/*
 * HT-CRM · Veritas Medical Theme
 * Aesthetic: Swiss precision meets Bosphorus warmth
 * Primary: Teal (medical authority)  |  Surface: warm ivory
 * Font: Sora (loaded by panel provider via BunnyFontProvider)
 */

/* ══════════════════════════════════════════════
   CSS CUSTOM PROPERTIES
══════════════════════════════════════════════ */
:root {
  --crm-teal:        #0d9488;   /* teal-600  */
  --crm-teal-dark:   #0f766e;   /* teal-700  */
  --crm-teal-light:  #ccfbf1;   /* teal-100  */
  --crm-gold:        #b07d3a;   /* ochre accent — used very sparingly */
  --crm-surface:     #f5f7f8;
  --crm-white:       #ffffff;
  --crm-border:      #e4e9ec;
  --crm-border-sm:   #edf0f2;
  --crm-text-muted:  #7c8fa0;
  --crm-text-strong: #0f1e2d;
  --crm-shadow-sm:   0 1px 2px rgba(0,0,0,0.05);
  --crm-shadow:      0 1px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --crm-shadow-md:   0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --crm-shadow-teal: 0 4px 20px rgba(13,148,136,0.18);
  --crm-radius:      10px;
  --crm-radius-sm:   7px;
  --crm-radius-lg:   14px;
}

/* ══════════════════════════════════════════════
   1 · GLOBAL LAYOUT & BODY
══════════════════════════════════════════════ */

body {
  background-color: var(--crm-surface);
  /* Subtle dot grid — like a medical form's graph paper */
  background-image: radial-gradient(
    circle,
    rgba(0, 90, 90, 0.055) 1.2px,
    transparent 1.2px
  );
  background-size: 26px 26px;
}

/* Main content wrapper — clean card over the textured body */
.fi-main-ctn {
  background: transparent;
}

.fi-main {
  background: transparent;
}

/* Page content padding refinement */
.fi-page {
  padding: 1.25rem !important;
}

/* ══════════════════════════════════════════════
   2 · SIDEBAR
══════════════════════════════════════════════ */

.fi-sidebar.fi-main-sidebar {
  background: var(--crm-white) !important;
  border-right: 1px solid var(--crm-border) !important;
}

/* Header area */
.fi-sidebar-header {
  padding: 1.125rem 1rem 1rem !important;
  border-bottom: 1px solid var(--crm-border-sm) !important;
}

/* Brand name */
.fi-brand-name {
  font-size: 1.025rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  color: var(--crm-text-strong) !important;
}

/* Nav container */
.fi-sidebar-nav {
  padding: 0.5rem 0 !important;
}

/* Group labels — uppercase + wide tracking, muted */
.fi-sidebar-group-label {
  font-size: 0.6rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: var(--crm-text-muted) !important;
  padding: 1.1rem 1rem 0.3rem !important;
  opacity: 1 !important;
}

/* Nav item wrapper */
.fi-sidebar-item {
  padding: 1px 6px !important;
}

/* Nav item button */
.fi-sidebar-item-btn {
  border-radius: var(--crm-radius-sm) !important;
  padding: 0.45rem 0.75rem !important;
  transition: background-color 0.12s ease, box-shadow 0.12s ease !important;
  position: relative !important;
}

.fi-sidebar-item-btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 0;
  background: var(--crm-teal);
  border-radius: 0 3px 3px 0;
  transition: width 0.15s ease;
}

.fi-sidebar-item-btn:hover {
  background-color: #f0f9f8 !important;
}

/* Active item — teal left accent */
.fi-sidebar-item-btn[aria-current="page"],
.fi-sidebar-item-btn.fi-active {
  background: linear-gradient(to right, #e6f7f5, #f0faf9) !important;
  color: var(--crm-teal-dark) !important;
}

.fi-sidebar-item-btn[aria-current="page"]::before,
.fi-sidebar-item-btn.fi-active::before {
  width: 3px;
}

/* Item label */
.fi-sidebar-item-label {
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

/* Item icon */
.fi-sidebar-item-icon {
  opacity: 0.7;
}

.fi-sidebar-item-btn[aria-current="page"] .fi-sidebar-item-icon,
.fi-sidebar-item-btn.fi-active .fi-sidebar-item-icon {
  opacity: 1;
}

/* Footer */
.fi-sidebar-footer {
  border-top: 1px solid var(--crm-border-sm) !important;
  padding: 0.75rem 0.5rem !important;
}

/* ══════════════════════════════════════════════
   3 · TOPBAR
══════════════════════════════════════════════ */

.fi-topbar-ctn {
  border-bottom: 1px solid var(--crm-border) !important;
}

.fi-topbar {
  background: var(--crm-white) !important;
}

/* ══════════════════════════════════════════════
   4 · SECTIONS / CARDS
══════════════════════════════════════════════ */

.fi-section {
  background: var(--crm-white) !important;
  border: 1px solid var(--crm-border) !important;
  box-shadow: var(--crm-shadow) !important;
  border-radius: var(--crm-radius-lg) !important;
  overflow: hidden !important;
}

.fi-section-header {
  border-bottom: 1px solid var(--crm-border-sm) !important;
  padding: 0.875rem 1.25rem !important;
  background: #fafbfc !important;
}

.fi-section-header-heading {
  font-size: 0.825rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--crm-text-strong) !important;
}

.fi-section-header-description {
  font-size: 0.75rem !important;
  color: var(--crm-text-muted) !important;
}

/* ══════════════════════════════════════════════
   5 · TABLES
══════════════════════════════════════════════ */

/* Table container */
.fi-ta-main {
  border-radius: var(--crm-radius-lg) !important;
  border: 1px solid var(--crm-border) !important;
  overflow: hidden !important;
  box-shadow: var(--crm-shadow) !important;
  background: var(--crm-white) !important;
}

/* Header cells — medical label style */
th.fi-ta-cell,
thead .fi-ta-cell {
  font-size: 0.63rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--crm-text-muted) !important;
  background: #f8f9fa !important;
  border-bottom: 2px solid var(--crm-border) !important;
  padding-top: 0.8rem !important;
  padding-bottom: 0.8rem !important;
}

/* Body rows */
.fi-ta-row {
  transition: background-color 0.1s ease !important;
  border-bottom: 1px solid var(--crm-border-sm) !important;
}

.fi-ta-row:last-child {
  border-bottom: none !important;
}

/* Row hover — teal left accent stripe */
.fi-ta-row:hover {
  background-color: #f0f9f8 !important;
}

.fi-ta-row:hover .fi-ta-cell:first-child {
  box-shadow: inset 3px 0 0 var(--crm-teal) !important;
}

/* Striped rows */
.fi-ta-row:nth-child(even) {
  background-color: #fafbfc !important;
}

.fi-ta-row:nth-child(even):hover {
  background-color: #f0f9f8 !important;
}

/* Table toolbar (search + actions row) */
.fi-ta-header-toolbar {
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid var(--crm-border-sm) !important;
  background: #fafbfc !important;
}

/* Filters above table */
.fi-ta-filters-before-content {
  border-bottom: 1px solid var(--crm-border-sm) !important;
  background: #fafbfc !important;
  padding: 0.875rem 1rem !important;
}

/* Pagination */
.fi-ta-footer {
  border-top: 1px solid var(--crm-border-sm) !important;
  background: #fafbfc !important;
  padding: 0.625rem 1rem !important;
}

/* ══════════════════════════════════════════════
   6 · SEARCH INPUT
══════════════════════════════════════════════ */

.fi-ta-search-input {
  border-radius: 8px !important;
  font-size: 0.8125rem !important;
  background: var(--crm-white) !important;
}

/* Focus ring */
.fi-ta-search-field:focus-within {
  box-shadow: 0 0 0 2.5px rgba(13, 148, 136, 0.2) !important;
}

/* ══════════════════════════════════════════════
   7 · BADGES
══════════════════════════════════════════════ */

.fi-badge {
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.025em !important;
  border-radius: 5px !important;
  padding: 2px 7px !important;
}

/* ══════════════════════════════════════════════
   8 · BUTTONS
══════════════════════════════════════════════ */

.fi-btn {
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  letter-spacing: -0.01em !important;
  transition: all 0.14s ease !important;
}

/* Primary button — teal with subtle lift */
.fi-btn-color-primary {
  box-shadow: var(--crm-shadow-sm) !important;
}

.fi-btn-color-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--crm-shadow-teal) !important;
}

/* ══════════════════════════════════════════════
   9 · FORM INPUTS
══════════════════════════════════════════════ */

.fi-input-wrp,
.fi-fo-field-wrp,
.fi-fo-component-ctn input,
.fi-fo-component-ctn textarea,
.fi-fo-component-ctn select {
  border-radius: 8px !important;
}

.fi-input {
  border-radius: 8px !important;
  font-size: 0.875rem !important;
}

/* Focus ring */
.fi-input:focus {
  box-shadow: 0 0 0 2.5px rgba(13, 148, 136, 0.18) !important;
}

/* ══════════════════════════════════════════════
   10 · STATS OVERVIEW WIDGETS
══════════════════════════════════════════════ */

.fi-wi-stats-overview-stat {
  border-radius: var(--crm-radius-lg) !important;
  border: 1px solid var(--crm-border) !important;
  box-shadow: var(--crm-shadow) !important;
  overflow: hidden !important;
  background: var(--crm-white) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.fi-wi-stats-overview-stat:hover {
  box-shadow: var(--crm-shadow-teal) !important;
  transform: translateY(-2px) !important;
}

.fi-wi-stats-overview-stat-value {
  font-size: 1.875rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.1 !important;
}

.fi-wi-stats-overview-stat-label {
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--crm-text-muted) !important;
}

.fi-wi-stats-overview-stat-description {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}

/* ══════════════════════════════════════════════
   11 · PAGE HEADERS
══════════════════════════════════════════════ */

.fi-header-heading {
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  font-size: 1.4rem !important;
  color: var(--crm-text-strong) !important;
}

.fi-header-subheading {
  font-size: 0.8125rem !important;
  color: var(--crm-text-muted) !important;
}

/* ══════════════════════════════════════════════
   12 · TABS (Saved Views bar)
══════════════════════════════════════════════ */

.fi-tabs {
  border-bottom: 1px solid var(--crm-border) !important;
}

.fi-tabs-tab {
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  padding: 0.625rem 0.875rem !important;
  transition: color 0.12s ease !important;
}

/* Active tab underline */
.fi-tabs-tab[aria-selected="true"] {
  font-weight: 700 !important;
  color: var(--crm-teal-dark) !important;
}

/* ══════════════════════════════════════════════
   13 · NOTIFICATIONS / TOASTS
══════════════════════════════════════════════ */

.fi-no-notification {
  border-radius: var(--crm-radius-lg) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13), 0 2px 8px rgba(0, 0, 0, 0.07) !important;
  border: 1px solid var(--crm-border) !important;
}

/* ══════════════════════════════════════════════
   14 · MODALS
══════════════════════════════════════════════ */

.fi-modal-window {
  border-radius: var(--crm-radius-lg) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid var(--crm-border) !important;
}

.fi-modal-header {
  border-bottom: 1px solid var(--crm-border-sm) !important;
  padding: 1.25rem 1.5rem !important;
}

.fi-modal-header-heading {
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.fi-modal-footer {
  border-top: 1px solid var(--crm-border-sm) !important;
  background: #fafbfc !important;
  padding: 0.875rem 1.5rem !important;
}

/* ══════════════════════════════════════════════
   15 · EMPTY STATE
══════════════════════════════════════════════ */

.fi-ta-empty-state {
  padding: 4rem 2rem !important;
}

.fi-ta-empty-state-icon {
  opacity: 0.18 !important;
}

.fi-ta-empty-state-heading {
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--crm-text-strong) !important;
}

/* ══════════════════════════════════════════════
   16 · FILTER INDICATORS (active filter chips)
══════════════════════════════════════════════ */

.fi-ta-filter-indicators {
  padding: 0.5rem 1rem !important;
}

.fi-ta-filter-indicator {
  border-radius: 6px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════
   17 · DARK MODE OVERRIDES
   Filament manages dark mode via html.dark class (Alpine.store('theme')).
   Do NOT use @media (prefers-color-scheme: dark) — it conflicts with
   Filament's manual toggle because the OS preference stays dark even
   when the user explicitly selects light mode in the panel.
══════════════════════════════════════════════ */

/* Explicit light-mode resets — ensure OS-default dark users see correct
   light colors when Filament removes html.dark after a manual toggle. */
html:not(.dark) {
  --crm-surface:     #f5f7f8;
  --crm-white:       #ffffff;
  --crm-border:      #e4e9ec;
  --crm-border-sm:   #edf0f2;
  --crm-text-muted:  #7c8fa0;
  --crm-text-strong: #0f1e2d;
}

html:not(.dark) body {
  background-image: radial-gradient(
    circle,
    rgba(0, 90, 90, 0.055) 1.2px,
    transparent 1.2px
  );
  background-size: 26px 26px;
}

/* Dark mode via Filament's html.dark class */
html.dark {
  --crm-surface: #0f1923;
  --crm-white: #18232f;
  --crm-border: #2a3a4a;
  --crm-border-sm: #213040;
  --crm-text-muted: #6b82a0;
  --crm-text-strong: #e8edf2;
}

html.dark body {
  background-image: radial-gradient(
    circle,
    rgba(13, 148, 136, 0.06) 1.2px,
    transparent 1.2px
  );
}

html.dark .fi-sidebar.fi-main-sidebar {
  background: #121e2a !important;
  border-right-color: var(--crm-border) !important;
}

html.dark th.fi-ta-cell,
html.dark thead .fi-ta-cell {
  background: #18242f !important;
}

html.dark .fi-ta-filters-before-content,
html.dark .fi-ta-header-toolbar,
html.dark .fi-ta-footer,
html.dark .fi-section-header,
html.dark .fi-modal-footer {
  background: #18242f !important;
}

html.dark .fi-ta-row:hover {
  background-color: #1a2d38 !important;
}

html.dark .fi-wi-stats-overview-stat {
  background: #18232f !important;
}

html.dark .fi-topbar {
  background: #121e2a !important;
}

html.dark .fi-ta-main {
  background: var(--crm-white) !important;
}

/* ══════════════════════════════════════════════
   18 · KANBAN BOARD (Lead Kanban)
══════════════════════════════════════════════ */

/* Kanban columns get card treatment */
[class*="kanban-column"] {
  border-radius: var(--crm-radius-lg) !important;
  border: 1px solid var(--crm-border) !important;
}

/* ══════════════════════════════════════════════
   19 · INFOLIST (Lead View detail page)
══════════════════════════════════════════════ */

.fi-in-entry-wrp {
  padding: 0.5rem 0 !important;
}

.fi-in-entry-label {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--crm-text-muted) !important;
  margin-bottom: 0.2rem !important;
}

.fi-in-text-entry {
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: var(--crm-text-strong) !important;
}

/* ══════════════════════════════════════════════
   20 · SCROLLBAR (Webkit)
══════════════════════════════════════════════ */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 90, 90, 0.18);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(13, 148, 136, 0.35);
}