/**
 * ClinicOS — Calm Clinical theme layer (ui/clinicos-token-reskin, Stage 2).
 *
 * Loads AFTER clinicos-fonts.css + clinicos-tokens.css (HEAD render hook).
 * Restyles Filament's shared components to the designer's HTML reference
 * using ONLY semantic tokens (--color-*, --spacing-*, --radius-*, --shadow-*).
 * Flows, markup and navigation skeleton untouched. Light mode only.
 */

/*
 * Legacy --cos-* names are COMPATIBILITY ALIASES onto the Calm Clinical
 * semantic tokens (clinicos-tokens.css). Custom blades keep using --cos-*
 * and inherit the system with zero markup changes. New styles must use the
 * semantic tokens directly.
 */
:root {
    --cos-bg: var(--color-bg-canvas);            /* warm sand canvas */
    --cos-sand: var(--sand-200);                 /* soft sand (hover) */
    --cos-surface: var(--color-bg-surface);      /* cards */
    --cos-navy: var(--color-bg-brand);           /* primary navy */
    --cos-navy-2: var(--color-bg-rail);          /* deep navy (unused; kept for safety) */
    --cos-navy-border: var(--navy-400);          /* (unused; kept for safety) */
    --cos-text: var(--color-text-primary);       /* near-black per Calm Clinical */
    --cos-text-muted: var(--color-text-secondary);
    --cos-border: var(--color-border-subtle);
    --cos-accent: var(--color-accent-success);   /* green */
    --cos-accent-soft: var(--color-bg-success-subtle);
    --cos-accent-ink: var(--color-text-on-accent); /* white on green, per spec */
    --cos-warning: var(--amber-600);
    --cos-danger: var(--color-bg-danger);
    --cos-info: var(--color-status-info-fg);
}

/* Typography foundation: Inter for Latin, Noto Sans Devanagari for Hindi —
   the --font-mixed stack lets mixed runs fall through per character. */
.fi-body, .fi-body input, .fi-body textarea, .fi-body select, .fi-body button {
    font-family: var(--font-mixed) !important;
}
.fi-body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ============ Canvas ============ */
.fi-body, .fi-main, .fi-main-ctn { background-color: var(--color-bg-canvas) !important; }

/* ============ Sidebar — deep navy rail (bg-rail per spec) ============ */
.fi-sidebar, .fi-sidebar-nav { background-color: var(--color-bg-rail) !important; border-color: rgba(255,255,255,0.06) !important; }
.fi-sidebar .fi-sidebar-item-label { color: #C2CDDA !important; font-size: 13px; }
.fi-sidebar .fi-sidebar-item-icon { color: #8FA3BC !important; width: 1.05rem !important; height: 1.05rem !important; }
.fi-sidebar .fi-sidebar-group-label {
    color: #6F8093 !important;
    font: var(--type-overline); letter-spacing: .08em !important; text-transform: uppercase;
    padding: var(--spacing-xs) var(--spacing-md) !important;
}
.fi-sidebar .fi-sidebar-item-btn { border-radius: var(--radius-md) !important; padding: 9px 10px !important; transition: background-color .15s ease; }
.fi-sidebar .fi-sidebar-item-btn:hover { background-color: rgba(255,255,255,0.06) !important; }
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-btn,
.fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-btn { background-color: rgba(43,170,102,0.16) !important; }
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label { color: #FFFFFF !important; font-weight: 600; }
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: var(--color-accent-success) !important; }
.fi-sidebar-header, .fi-sidebar .fi-logo { color: #FFFFFF !important; }
.fi-sidebar-header { padding: var(--spacing-lg) var(--spacing-md) !important; }
.fi-sidebar-group + .fi-sidebar-group { border-top: 1px solid rgba(255,255,255,0.05); padding-top: var(--spacing-sm); margin-top: var(--spacing-sm); }

/* ============ Topbar ============ */
.fi-topbar > * {
    background-color: var(--color-bg-surface) !important;
    border-color: var(--color-border-subtle) !important;
    box-shadow: var(--shadow-xs) !important;
}
.fi-global-search .fi-input-wrp { border-radius: var(--radius-full) !important; background: var(--color-bg-surface-alt) !important; }
/* The inner input must stay transparent — an opaque input inside the pill
   wrapper ends before the rounded corner and reads as a "faded" cut. */
.fi-global-search .fi-input { background: transparent !important; }

/* ============ Cards / surfaces — one radius, one shadow ============ */
.fi-section, .fi-fieldset, .fi-wi, .fi-ta-ctn, .fi-in-component-ctn, .fi-dropdown-panel {
    background-color: var(--color-bg-surface) !important;
    border: 1px solid var(--color-border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
}
.fi-section-header { padding-bottom: var(--spacing-xs); }
.fi-dropdown-panel { box-shadow: var(--shadow-lg) !important; }

/* ============ Headings ============ */
.fi-header-heading { font: var(--type-heading-xl) !important; letter-spacing: -0.01em; color: var(--color-text-brand) !important; }
.fi-header-subheading, .fi-breadcrumbs { font: var(--type-body-sm) !important; color: var(--color-text-secondary) !important; }
.fi-section-header-heading { font: var(--type-heading-md) !important; color: var(--color-text-primary) !important; }
.fi-section-header-description { font: var(--type-caption) !important; color: var(--color-text-secondary) !important; }

/* ============ Data tables — dense-legible 13px per reference ============ */
.fi-ta-ctn { overflow: hidden; }
.fi-ta-header-cell {
    padding: 11px 14px !important;
    font: var(--type-body-sm-str) !important; font-size: 12px !important;
    color: var(--color-text-secondary) !important;
    background: var(--color-bg-surface-alt) !important;
    border-bottom: 1px solid var(--color-border-subtle) !important;
    text-transform: none; letter-spacing: 0;
}
.fi-ta-cell { padding-top: 11px !important; padding-bottom: 11px !important; }
.fi-ta-text { font: var(--type-body-sm) !important; color: var(--color-text-secondary); }
.fi-ta-row { border-color: var(--color-border-subtle) !important; transition: background-color .15s ease; }
.fi-ta-row:hover { background-color: var(--color-bg-surface-alt) !important; }
.fi-ta-row.fi-selected, .fi-ta-row[aria-selected="true"] { background-color: var(--color-bg-success-subtle) !important; }
.fi-ta-header-toolbar { padding: var(--spacing-md) var(--spacing-lg) !important; background: var(--color-bg-surface) !important; }

/* ============ Tabs — underline style with green active (reference) ============ */
.fi-tabs {
    gap: var(--spacing-xs) !important; padding: 0 !important;
    border: none !important; border-bottom: 1px solid var(--color-border-subtle) !important;
    border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
}
.fi-tabs-item {
    border-radius: 0 !important;
    padding: 10px 14px !important;
    font: var(--type-body-sm-str) !important;
    background: transparent !important;
    border: none !important; border-bottom: 2px solid transparent !important;
    color: var(--color-text-secondary) !important;
    transition: color .15s ease, border-color .15s ease;
}
.fi-tabs-item:hover { color: var(--color-text-primary) !important; background: transparent !important; }
.fi-tabs-item.fi-active {
    color: var(--color-text-brand) !important;
    border-bottom-color: var(--color-accent-success) !important;
    font-weight: 600 !important;
}
.fi-tabs-item .fi-badge { background: var(--color-bg-sunken) !important; color: var(--color-text-secondary) !important; }
.fi-tabs-item.fi-active .fi-badge { background: var(--color-accent-success) !important; color: var(--color-text-on-accent) !important; }

/* ============ Buttons ============ */
.fi-btn {
    border-radius: var(--radius-md) !important;
    font: var(--type-body-md-str) !important;
    padding: 9px 16px !important;
    letter-spacing: 0.005em;
    transition: filter .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.fi-btn:hover { filter: brightness(0.96); }
.fi-btn:focus-visible { box-shadow: var(--shadow-focus) !important; }
.fi-icon-btn { border-radius: var(--radius-md) !important; transition: background-color .15s ease; }
.fi-icon-btn:hover { background: var(--color-bg-hover) !important; }

/* ============ Badges / status pills ============ */
.fi-badge {
    border-radius: var(--radius-full) !important;
    font-size: 11px !important; font-weight: 600 !important;
    letter-spacing: 0.015em;
    padding: 3px 9px !important;
}

/* ============ Inputs — navy focus ring per spec (WCAG-visible) ============ */
.fi-input, .fi-select-input, .fi-textarea {
    background-color: var(--color-bg-surface) !important;
    border-color: var(--color-border-default) !important;
    color: var(--color-text-primary) !important;
    font: var(--type-body-md) !important;
}
.fi-input::placeholder, .fi-textarea::placeholder { color: var(--color-text-tertiary) !important; }
.fi-input-wrp { border-radius: var(--radius-md) !important; transition: box-shadow .15s ease, border-color .15s ease; }
.fi-input-wrp:focus-within {
    border-color: var(--color-border-focus) !important;
    box-shadow: var(--shadow-focus) !important;
}

/* ============ Stat widgets ============ */
.fi-wi-stats-overview-stat-label {
    font: var(--type-overline) !important; letter-spacing: .06em !important;
    text-transform: uppercase; color: var(--color-text-secondary) !important;
}
.fi-wi-stats-overview-stat-value {
    font: var(--type-display-lg) !important; letter-spacing: -0.02em;
    color: var(--color-text-brand) !important;
}
.fi-wi-stats-overview-stat-description { font: var(--type-caption) !important; }

/* ============ Modals ============ */
.fi-modal-window { border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-lg) !important; background: var(--color-bg-surface) !important; }
.fi-modal-close-overlay, .fi-modal-overlay { background: rgba(13,27,42,0.35) !important; }
.fi-modal-footer { background: var(--color-bg-surface-alt) !important; border-top: 1px solid var(--color-border-subtle) !important; }
.fi-modal-heading { color: var(--color-text-brand) !important; }

/* ============ Notifications (toast) — navy surface, per reference ============ */
.fi-no-notification {
    background: var(--color-bg-rail) !important;
    border: none !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
}
.fi-no-notification .fi-no-notification-title { color: #FFFFFF !important; }
.fi-no-notification .fi-no-notification-body { color: #C9D4E2 !important; }

/* ============ Empty states ============ */
.fi-ta-empty-state { padding: 44px 24px !important; }
.fi-ta-empty-state-icon-bg {
    background: var(--color-bg-sunken) !important;
    color: var(--color-text-secondary) !important;
    border-radius: var(--radius-full) !important;
    width: 4rem !important; height: 4rem !important;
}
.fi-ta-empty-state-heading { font: var(--type-heading-md) !important; color: var(--color-text-primary) !important; }
.fi-ta-empty-state-description { font: var(--type-body-sm) !important; color: var(--color-text-secondary) !important; }

/* ============ Pagination ============ */
.fi-pagination { padding: var(--spacing-md) var(--spacing-lg) !important; }
.fi-pagination-item-btn {
    border-radius: var(--radius-md) !important; min-width: 2rem; height: 2rem;
    font: var(--type-caption) !important; font-weight: 500 !important;
    transition: background-color .15s ease;
}
.fi-pagination-item-btn:hover { background: var(--color-bg-hover) !important; }
.fi-pagination-item-btn[aria-current], .fi-pagination-item-btn.fi-active {
    background: var(--color-bg-brand) !important; color: var(--color-text-on-brand) !important;
}
.fi-pagination-overview, .fi-pagination-records-per-page-select .fi-input { font: var(--type-caption) !important; color: var(--color-text-secondary) !important; }

/* ============ Table action chips ============ */
.fi-ta-actions { gap: var(--spacing-xs) !important; }
.fi-ta-actions .fi-link {
    padding: 4px 9px !important;
    border-radius: var(--radius-md) !important;
    font-size: 12px !important; font-weight: 600 !important;
    background: color-mix(in srgb, currentColor 9%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    text-decoration: none !important;
    transition: background-color .15s ease;
}
.fi-ta-actions .fi-link:hover { background: color-mix(in srgb, currentColor 16%, transparent); }

/* ============ Filters ============ */
.fi-ta-filters { padding: var(--spacing-lg) !important; gap: var(--spacing-md) !important; }

/* ============ Login (simple layout) ============ */
.fi-simple-layout, .fi-simple-main { background-color: var(--color-bg-canvas) !important; }
.fi-simple-main-ctn .fi-section, .fi-simple-main { box-shadow: none !important; }

/* ============ Micro details ============ */
:where(a, button):focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--sand-300); border-radius: var(--radius-full); border: 2px solid var(--color-bg-canvas); }
::-webkit-scrollbar-track { background: transparent; }