/**
 * ALETHEIA DESIGN SYSTEM
 * Custom CSS for Dental Practice Analytics Platform
 *
 * Organization:
 * 1. CSS Layers (@layer base, components, utilities)
 * 2. Design Tokens (colors, spacing, typography, shadows, etc.)
 * 3. Base Styles (body, resets)
 * 4. Components (buttons, cards, forms, tables)
 * 5. Utilities (spacing, flex, shadows)
 *
 * Usage Guidelines:
 * - Use design tokens (CSS variables) - NEVER hard-code values
 * - Prefer utility classes for spacing/layout
 * - Use component classes for semantic meaning
 * - Follow BEM naming for complex components
 *
 * Accessibility:
 * - All colors meet WCAG AA contrast (4.5:1)
 * - Focus states are clearly visible (WCAG 2.4.7)
 * - Keyboard navigation is fully supported
 */

/* ===== CSS Layers - Organized cascade control ===== */
@layer base, components, utilities;

@layer base {
    :root {
        /* ===== Typography Scale - Compact ===== */
        --font-size-xs: 0.6875rem;   /* 11px - counters, timestamps */
        --font-size-sm: 0.75rem;     /* 12px - badges, table headers */
        --font-size-base: 0.8125rem; /* 13px - body, tables, sidebar */
        --font-size-md: 0.875rem;    /* 14px - card headers, emphasis */
        --font-size-lg: 1rem;        /* 16px - section titles */
        --font-size-xl: 1.125rem;    /* 18px - page titles */
        --font-size-2xl: 1.25rem;    /* 20px - main headings */
        --font-size-3xl: 1.5rem;     /* 24px - display, KPI secondary */
        --font-size-4xl: 1.75rem;    /* 28px - display, KPI primary */

        /* ===== Comprehensive Color System ===== */

        /* Neutral Gradient (Gray scale) */
        --neutral-50: #FAFAFA;
        --neutral-100: #F5F5F5;
        --neutral-200: #E5E5E5;
        --neutral-300: #D4D4D4;
        --neutral-400: #A3A3A3;
        --neutral-500: #737373;
        --neutral-600: #525252;
        --neutral-700: #404040;
        --neutral-800: #262626;
        --neutral-900: #171717;

        /* ===== Brand Palettes (Tailwind v4 OKLCH) ===== */

        /* Teal Palette */
        --teal-50: oklch(0.984 0.014 180.72);
        --teal-100: oklch(0.953 0.051 180.801);
        --teal-200: oklch(0.91 0.096 180.426);
        --teal-300: oklch(0.855 0.138 181.071);
        --teal-400: oklch(0.777 0.152 181.912);
        --teal-500: oklch(0.704 0.14 182.503);
        --teal-600: oklch(0.6 0.118 184.704);
        --teal-700: oklch(0.511 0.096 186.391);
        --teal-800: oklch(0.437 0.078 188.216);
        --teal-900: oklch(0.386 0.063 188.416);
        --teal-950: oklch(0.277 0.046 192.524);

        /* Blue Palette */
        --blue-50: oklch(0.97 0.014 254.604);
        --blue-100: oklch(0.932 0.032 255.585);
        --blue-200: oklch(0.882 0.059 254.128);
        --blue-300: oklch(0.809 0.105 251.813);
        --blue-400: oklch(0.707 0.165 254.624);
        --blue-500: oklch(0.623 0.214 259.815);
        --blue-600: oklch(0.546 0.245 262.881);
        --blue-700: oklch(0.488 0.243 264.376);
        --blue-800: oklch(0.424 0.199 265.638);
        --blue-900: oklch(0.379 0.146 265.522);
        --blue-950: oklch(0.282 0.091 267.935);

        /* Hex equivalents for JavaScript (charts, etc.) */
        --teal-600-hex: #0d9488;
        --blue-600-hex: #2563eb;

        /* ===== Brand Semantic Layer (default: teal) ===== */
        --brand-50: var(--teal-50);
        --brand-100: var(--teal-100);
        --brand-200: var(--teal-200);
        --brand-300: var(--teal-300);
        --brand-400: var(--teal-400);
        --brand-500: var(--teal-500);
        --brand-600: var(--teal-600);
        --brand-700: var(--teal-700);
        --brand-800: var(--teal-800);
        --brand-900: var(--teal-900);
        --brand-950: var(--teal-950);

        /* ===== Secondary Accent (Warm Amber) ===== */
        --accent-50: #FFFBEB;
        --accent-100: #FEF3C7;
        --accent-200: #FDE68A;
        --accent-300: #FCD34D;
        --accent-400: #FBBF24;
        --accent-500: #F59E0B;
        --accent-600: #D97706;
        --accent-700: #B45309;
        --accent-800: #92400E;
        --accent-900: #78350F;

        /* Semantic Colors - Success (Green) */
        --success-50: #F0FDF4;
        --success-100: #DCFCE7;
        --success-200: #BBF7D0;
        --success-300: #86EFAC;
        --success-400: #4ADE80;
        --success-500: #22C55E;
        --success-600: #16A34A;
        --success-700: #15803D;
        --success-800: #166534;
        --success-900: #14532D;

        /* Semantic Colors - Warning (Amber) */
        --warning-50: #FFFBEB;
        --warning-100: #FEF3C7;
        --warning-200: #FDE68A;
        --warning-300: #FCD34D;
        --warning-400: #FBBF24;
        --warning-500: #F59E0B;
        --warning-600: #D97706;
        --warning-700: #B45309;
        --warning-800: #92400E;
        --warning-900: #78350F;

        /* Semantic Colors - Error/Danger (Red) */
        --error-50: #FEF2F2;
        --error-100: #FEE2E2;
        --error-200: #FECACA;
        --error-300: #FCA5A5;
        --error-400: #F87171;
        --error-500: #EF4444;
        --error-600: #DC2626;
        --error-700: #B91C1C;
        --error-800: #991B1B;
        --error-900: #7F1D1D;

        /* Semantic Colors - Info (Blue) */
        --info-50: #EFF6FF;
        --info-100: #DBEAFE;
        --info-200: #BFDBFE;
        --info-300: #93C5FD;
        --info-400: #60A5FA;
        --info-500: #3B82F6;
        --info-600: #2563EB;
        --info-700: #1D4ED8;
        --info-800: #1E40AF;
        --info-900: #1E3A8A;

        /* ===== Chart Color Palette ===== */
        /* Complementary colors for charts and data visualization */
        --chart-cyan-600: #0891b2;
        --chart-sky-600: #0284c7;
        --chart-indigo-500: #6366f1;
        --chart-violet-500: #8b5cf6;
        --chart-rose-500: #f43f5e;
        --chart-amber-500: #f59e0b;

        /* Chart color array (computed from brand + complementary) */
        /* Primary chart color uses brand-600 hex equivalent */
        --chart-color-1: var(--teal-600-hex);
        --chart-color-2: var(--chart-cyan-600);
        --chart-color-3: var(--chart-sky-600);
        --chart-color-4: var(--chart-indigo-500);
        --chart-color-5: var(--chart-violet-500);
        --chart-color-6: var(--chart-rose-500);

        /* ===== Spacing Scale - 4px base unit ===== */
        --space-0: 0;           /* 0px */
        --space-1: 0.25rem;     /* 4px */
        --space-2: 0.5rem;      /* 8px */
        --space-3: 0.75rem;     /* 12px */
        --space-4: 1rem;        /* 16px */
        --space-5: 1.25rem;     /* 20px */
        --space-6: 1.5rem;      /* 24px */
        --space-8: 2rem;        /* 32px */
        --space-10: 2.5rem;     /* 40px */
        --space-12: 3rem;       /* 48px */
        --space-16: 4rem;       /* 64px */
        --space-20: 5rem;       /* 80px */
        --space-24: 6rem;       /* 96px */

        /* ===== Elevation System - Shadows ===== */
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.02);
        --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
        --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
        --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
        --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);

        /* ===== Border Radius Scale ===== */
        --radius-sm: 6px;     /* Small elements, badges */
        --radius-md: 8px;     /* Buttons, inputs, default */
        --radius-lg: 12px;    /* Cards, modals */
        --radius-xl: 16px;    /* Large features */
        --radius-2xl: 20px;   /* Hero sections */
        --radius-full: 9999px; /* Pills, avatars */

        /* ===== Motion System ===== */
        --duration-instant: 100ms;
        --duration-fast: 150ms;
        --duration-base: 200ms;
        --duration-slow: 300ms;
        --duration-slower: 500ms;

        /* Easing functions */
        --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
        --ease-out: cubic-bezier(0, 0, 0.2, 1);
        --ease-in: cubic-bezier(0.4, 0, 1, 1);
        --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

        /* ===== Data Visualization Colors - WCAG AA Compliant ===== */
        --chart-1: var(--brand-600);        /* Primary brand */
        --chart-2: var(--info-600);         /* Blue */
        --chart-3: var(--warning-600);      /* Amber */
        --chart-4: #7C3AED;                 /* Purple */
        --chart-5: #DB2777;                 /* Pink */
        --chart-6: var(--brand-700);        /* Brand darker */
        --chart-7: var(--info-700);         /* Blue darker */
        --chart-8: #C2410C;                 /* Orange */

        /* ===== Focus Ring - WCAG 2.4.7 Compliant ===== */
        --focus-ring-color: var(--brand-600);
        --focus-ring-width: 3px;
        --focus-ring-offset: 2px;
        --focus-ring-shadow: 0 0 0 4px var(--brand-100);
        --focus-ring-alpha: oklch(from var(--brand-500) l c h / 0.15);

        /* ===== Breakpoints - Mobile-first approach ===== */
        --breakpoint-sm: 640px;   /* Small devices */
        --breakpoint-md: 768px;   /* Tablets */
        --breakpoint-lg: 1024px;  /* Desktops */
        --breakpoint-xl: 1280px;  /* Large desktops */
        --breakpoint-2xl: 1536px; /* Extra large screens */

        /* Container max-widths */
        --container-sm: 640px;
        --container-md: 768px;
        --container-lg: 1024px;
        --container-xl: 1280px;

        /* ===== Theme Variables - Dark Mode Ready ===== */
        --bg-primary: var(--neutral-50);
        --bg-secondary: white;
        --bg-tertiary: var(--neutral-100);
        --bg-card: white;
        --bg-card-header: var(--neutral-100);
        --bg-interactive: var(--brand-50);
        --bg-interactive-hover: var(--brand-100);
        --text-primary: var(--neutral-800);
        --text-secondary: var(--neutral-600);
        --text-tertiary: var(--neutral-500);
        --text-on-brand: white;
        --text-on-brand-muted: oklch(1 0 0 / 0.8);
        --border-primary: var(--neutral-200);
        --border-secondary: var(--neutral-300);
    }

    /* ===== Blue Brand Theme ===== */
    [data-brand="blue"] {
        --brand-50: var(--blue-50);
        --brand-100: var(--blue-100);
        --brand-200: var(--blue-200);
        --brand-300: var(--blue-300);
        --brand-400: var(--blue-400);
        --brand-500: var(--blue-500);
        --brand-600: var(--blue-600);
        --brand-700: var(--blue-700);
        --brand-800: var(--blue-800);
        --brand-900: var(--blue-900);
        --brand-950: var(--blue-950);
        /* Chart primary color for blue brand */
        --chart-color-1: var(--blue-600-hex);
    }

    /* ===== Dark Mode - Auto respects system preference ===== */
    @media (prefers-color-scheme: dark) {
        [data-theme="auto"] {
            --bg-primary: var(--neutral-900);
            --bg-secondary: var(--neutral-800);
            --bg-tertiary: var(--neutral-700);
            --bg-card: var(--neutral-800);
            --bg-card-header: var(--neutral-700);
            --bg-interactive: var(--brand-900);
            --bg-interactive-hover: var(--brand-800);
            --text-primary: var(--neutral-100);
            --text-secondary: var(--neutral-300);
            --text-tertiary: var(--neutral-400);
            --text-on-brand: var(--neutral-950);
            --text-on-brand-muted: oklch(0 0 0 / 0.8);
            --border-primary: var(--neutral-700);
            --border-secondary: var(--neutral-600);
        }
    }

    /* Dark Mode - Manual override */
    [data-theme="dark"] {
        --bg-primary: var(--neutral-900);
        --bg-secondary: var(--neutral-800);
        --bg-tertiary: var(--neutral-700);
        --bg-card: var(--neutral-800);
        --bg-card-header: var(--neutral-700);
        --bg-interactive: var(--brand-900);
        --bg-interactive-hover: var(--brand-800);
        --text-primary: var(--neutral-100);
        --text-secondary: var(--neutral-300);
        --text-tertiary: var(--neutral-400);
        --text-on-brand: var(--neutral-950);
        --text-on-brand-muted: oklch(0 0 0 / 0.8);
        --border-primary: var(--neutral-700);
        --border-secondary: var(--neutral-600);
    }

    /* Light Mode - Manual override */
    [data-theme="light"] {
        --bg-primary: var(--neutral-50);
        --bg-secondary: white;
        --bg-tertiary: var(--neutral-100);
        --bg-card: white;
        --bg-card-header: var(--neutral-100);
        --bg-interactive: var(--brand-50);
        --bg-interactive-hover: var(--brand-100);
        --text-primary: var(--neutral-800);
        --text-secondary: var(--neutral-600);
        --text-tertiary: var(--neutral-500);
        --text-on-brand: white;
        --text-on-brand-muted: oklch(1 0 0 / 0.8);
        --border-primary: var(--neutral-200);
        --border-secondary: var(--neutral-300);
    }

    /* ===== Dark Mode Component Overrides ===== */

    /* table-light thead: adapt to dark theme */
    @media (prefers-color-scheme: dark) {
        [data-theme="auto"] .table-light {
            --bs-table-bg: var(--neutral-700) !important;
            --bs-table-color: var(--neutral-100) !important;
            --bs-table-border-color: var(--neutral-600) !important;
        }
    }
    [data-theme="dark"] .table-light {
        --bs-table-bg: var(--neutral-700) !important;
        --bs-table-color: var(--neutral-100) !important;
        --bs-table-border-color: var(--neutral-600) !important;
    }

    /* Sidebar section headers: use brand-300 text in dark mode for contrast */
    @media (prefers-color-scheme: dark) {
        [data-theme="auto"] .sidebar-section-toggle {
            color: var(--brand-300);
        }
    }
    [data-theme="dark"] .sidebar-section-toggle {
        color: var(--brand-300);
    }

    /* ===== Enhanced Focus Visibility (WCAG 2.4.7) ===== */

    /* Enhanced focus-visible with outline + shadow + background */
    *:focus-visible {
        outline: var(--focus-ring-width) solid var(--focus-ring-color);
        outline-offset: var(--focus-ring-offset);
        box-shadow: var(--focus-ring-shadow);
    }

    /* Component-specific focus enhancements */
    button:focus-visible,
    a:focus-visible {
        outline: var(--focus-ring-width) solid var(--focus-ring-color);
        outline-offset: var(--focus-ring-offset);
        box-shadow: var(--focus-ring-shadow);
        background-color: var(--brand-50);
        transition: background-color var(--duration-fast) var(--ease-out);
    }

    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline: var(--focus-ring-width) solid var(--focus-ring-color);
        outline-offset: 0;
        box-shadow: var(--focus-ring-shadow);
        border-color: var(--brand-500);
    }

    /* Focus for cards and interactive containers */
    .card:focus-visible,
    .list-group-item:focus-visible {
        outline: var(--focus-ring-width) solid var(--focus-ring-color);
        outline-offset: var(--focus-ring-offset);
        box-shadow: var(--focus-ring-shadow), var(--shadow-md);
    }
}

/* Body */
body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

/* Headings & Display */
h1, h2, h3, h4,
.kpi-value, .kpi-hero-value, .kpi-group-total,
.page-title, .sidebar-heading {
    font-family: 'Instrument Sans', 'Plus Jakarta Sans', sans-serif;
}

/* Sidebar */
#sidebar-wrapper {
    min-height: 100vh;
    width: 250px;
    background-color: var(--bg-tertiary);
    transition: margin var(--duration-base) var(--ease-out);
}

#sidebar-wrapper .sidebar-heading {
    padding: var(--space-4);
    background-color: var(--bg-secondary);
}

.sidebar-logo {
    max-height: 60px;
}

#sidebar-wrapper .list-group-item {
    border: none;
    padding: var(--space-2) var(--space-5);
    font-size: var(--font-size-base);
    transition: all var(--duration-fast) var(--ease-out);
}

#sidebar-wrapper .list-group-item:hover {
    background-color: var(--bg-interactive);
    padding-left: var(--space-6);
}

#sidebar-wrapper .list-group-item.active {
    background-color: var(--brand-600);
    color: var(--text-on-brand);
    border-left: 4px solid var(--brand-800);
}

#sidebar-wrapper .sidebar-section-header {
    font-weight: 600;
    font-size: var(--font-size-xs);
    letter-spacing: 0.05em;
}

/* Sidebar Collapsible Sections */
.sidebar-section {
    border-bottom: none;
}

.sidebar-section-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--space-2) var(--space-5);
    background-color: var(--bg-secondary);
    border: none;
    font-weight: 600;
    font-size: var(--font-size-xs);
    letter-spacing: 0.05em;
    color: var(--brand-700);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);
    text-align: left;
}

.sidebar-section-toggle:hover {
    background-color: var(--bg-interactive);
    color: var(--brand-800);
}

.sidebar-section-toggle:focus {
    outline: none;
    background-color: var(--bg-interactive);
}

.sidebar-section-toggle .section-chevron {
    font-size: var(--font-size-sm);
    transition: transform var(--duration-slow) var(--ease-out);
}

.sidebar-section-toggle[aria-expanded="false"] .section-chevron {
    transform: rotate(-90deg);
}

.sidebar-section-toggle[aria-expanded="true"] .section-chevron {
    transform: rotate(0deg);
}

.sidebar-section-content {
    padding-bottom: var(--space-1);
}

.sidebar-section-content .list-group-item {
    padding-left: var(--space-6);
    border-left: 3px solid transparent;
}

.sidebar-section-content .list-group-item:hover {
    padding-left: calc(var(--space-6) + var(--space-1));
    border-left: 3px solid var(--border-secondary);
}

.sidebar-section-content .list-group-item.active {
    border-left: 3px solid var(--brand-800);
}

/* Sidebar collapsing height animation */
.sidebar-section .collapsing {
    transition: height var(--duration-base) var(--ease-out);
}

/* Page Content */
#page-content-wrapper {
    min-width: 0;
    width: 100%;
}

/* Cards */
.card {
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

/* Override Bootstrap border-0 on cards — keep consistent outline */
.card.border-0 {
    border: 1px solid var(--border-primary) !important;
}

.hover-shadow:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg) !important;
}

/* Buttons - default to compact size */
.btn {
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1.4;
    transition: all var(--duration-fast) var(--ease-out);
}

.btn-success {
    background-color: var(--brand-600);
    border-color: var(--brand-600);
}

.btn-success:hover {
    background-color: var(--brand-800);
    border-color: var(--brand-800);
}

/* Tables */
.table {
    font-size: var(--font-size-base);
}

.table thead {
    border-bottom: 2px solid var(--border-secondary);
}

.table thead th {
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--text-secondary);
}

.table tbody tr {
    transition: background-color var(--duration-fast) var(--ease-out);
}

.table tbody tr:hover {
    background-color: var(--bg-interactive);
}

/* Empty/placeholder cell — dim dashes for cleaner tables */
.table td.cell-empty {
    color: var(--neutral-300);
}

/* Dense table variant for wide tables with many columns */
.table-dense td,
.table-dense th {
    padding: 0.25rem 0.35rem;
    font-size: var(--font-size-xs);
}
.table-dense thead th {
    font-size: 0.65rem;
}

/* Forms */
.form-control, .form-select {
    border-radius: var(--radius-md);
    border-color: var(--neutral-200);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-base);
}

.form-control:focus, .form-select:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 0.2rem var(--brand-100);
}

/* Badges */
.badge {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: var(--radius-sm);
}

/* Messages */
.alert {
    border-radius: var(--radius-lg);
    border: none;
}

/* Sidebar Toggle - Desktop */
#wrapper.toggled #sidebar-wrapper {
    margin-left: -250px;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    #sidebar-wrapper {
        margin-left: -250px;
        position: fixed;
        z-index: 1000;
        height: 100vh;
    }

    #sidebar-wrapper.show {
        margin-left: 0;
    }

    #wrapper.toggled #sidebar-wrapper {
        margin-left: -250px;
    }

    #wrapper.toggled #sidebar-wrapper.show {
        margin-left: 0;
    }
}

/* Sidebar Toggle */
#sidebar-toggle {
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-base);
    line-height: 1;
}

/* Utilities */
.text-brand-green {
    color: var(--brand-600);
}

.bg-brand-green {
    background-color: var(--brand-600);
}

/* ===== Animations ===== */

/* Fade in from below */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn var(--duration-slow) var(--ease-out);
}

/* Staggered card entrance — apply .stagger-in to parent, children animate in sequence */
@keyframes cardEnter {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.stagger-in > * {
    animation: cardEnter var(--duration-slow) var(--ease-out) both;
}

.stagger-in > *:nth-child(1)  { animation-delay: 0ms; }
.stagger-in > *:nth-child(2)  { animation-delay: 50ms; }
.stagger-in > *:nth-child(3)  { animation-delay: 100ms; }
.stagger-in > *:nth-child(4)  { animation-delay: 150ms; }
.stagger-in > *:nth-child(5)  { animation-delay: 200ms; }
.stagger-in > *:nth-child(6)  { animation-delay: 250ms; }
.stagger-in > *:nth-child(7)  { animation-delay: 300ms; }
.stagger-in > *:nth-child(8)  { animation-delay: 350ms; }
.stagger-in > *:nth-child(n+9) { animation-delay: 400ms; }

/* Skeleton loading placeholder for HTMX swaps */
@keyframes skeletonPulse {
    0%   { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

.skeleton-loading {
    position: relative;
    overflow: hidden;
    pointer-events: none;
}

.skeleton-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--neutral-100) 40%,
        var(--neutral-200) 50%,
        var(--neutral-100) 60%,
        transparent 100%
    );
    background-size: 200px 100%;
    animation: skeletonPulse 1.5s ease-in-out infinite;
    border-radius: inherit;
    z-index: 1;
}

/* Apply skeleton to HTMX-loading elements */
.htmx-request .card,
.htmx-request .table-responsive {
    position: relative;
    overflow: hidden;
}

.htmx-request .card::after,
.htmx-request .table-responsive::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--neutral-100) 40%,
        var(--neutral-200) 50%,
        var(--neutral-100) 60%,
        transparent 100%
    );
    background-size: 200px 100%;
    animation: skeletonPulse 1.5s ease-in-out infinite;
    border-radius: inherit;
    z-index: 1;
    opacity: 0.6;
}

/* Smooth sidebar collapse (override Bootstrap's abrupt none) */
.sidebar-section .collapse {
    transition: height var(--duration-slow) var(--ease-out);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .stagger-in > *,
    .fade-in,
    .skeleton-loading::after,
    .htmx-request .card::after,
    .htmx-request .table-responsive::after {
        animation: none !important;
    }
}

/* Language Switcher */
.dropdown-submenu {
    position: relative;
}

.dropdown-header {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-secondary);
    padding: var(--space-2) var(--space-4);
    margin-bottom: 0;
}

.language-option {
    cursor: pointer;
}

.form-check-label {
    cursor: pointer;
    font-size: var(--font-size-base);
    padding-left: var(--space-1);
}

.form-check {
    margin-bottom: var(--space-2);
}

.form-check:last-child {
    margin-bottom: 0;
}

.form-check-input:checked {
    background-color: var(--brand-600);
    border-color: var(--brand-600);
}

/* Style Django CheckboxSelectMultiple/RadioSelect to match Bootstrap form-check */
.form-section ul,
.form-section div[id^="id_"]:not(.form-control) {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.form-section ul li,
.form-section div[id^="id_"] > div {
    margin-bottom: var(--space-1);
}

.form-section ul li label,
.form-section div[id^="id_"] > div label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--font-size-base);
}

.form-section ul li input[type="checkbox"],
.form-section ul li input[type="radio"],
.form-section div[id^="id_"] > div input[type="checkbox"],
.form-section div[id^="id_"] > div input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 1em;
    height: 1em;
    border: 1px solid var(--neutral-400);
    border-radius: 0.25em;
    background-color: var(--bg-card);
    cursor: pointer;
    flex-shrink: 0;
}

.form-section ul li input[type="radio"],
.form-section div[id^="id_"] > div input[type="radio"] {
    border-radius: 50%;
}

.form-section ul li input[type="checkbox"]:checked,
.form-section ul li input[type="radio"]:checked,
.form-section div[id^="id_"] > div input[type="checkbox"]:checked,
.form-section div[id^="id_"] > div input[type="radio"]:checked {
    background-color: var(--brand-600);
    border-color: var(--brand-600);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3e%3cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3e%3c/svg%3e");
    background-size: 0.75em;
    background-position: center;
    background-repeat: no-repeat;
}

/* Breadcrumbs */
.breadcrumb-nav {
    margin-bottom: var(--space-2);
}

.breadcrumb-nav .breadcrumb {
    background: none;
    padding: 0;
    margin: 0;
    font-size: var(--font-size-xs);
}

.breadcrumb-nav .breadcrumb-item a {
    color: var(--text-tertiary);
    text-decoration: none;
}

.breadcrumb-nav .breadcrumb-item a:hover {
    color: var(--brand-600);
    text-decoration: underline;
}

.breadcrumb-nav .breadcrumb-item.active {
    color: var(--text-secondary);
}

.breadcrumb-nav .breadcrumb-item + .breadcrumb-item::before {
    color: var(--neutral-300);
}

/* Page Headers */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
}

.page-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin: 0;
}

/* Card Headers - Standardized */
.card-header {
    font-weight: 500;
    font-size: var(--font-size-md);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

/* ===== Harmonious Design System ===== */

/* Card Headers - Consistent neutral style matching table/sidebar language */
.card-header-neutral {
    background: var(--bg-card);
    border-bottom: none;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    position: relative;
}

.card-header-neutral .btn {
    text-transform: none;
    letter-spacing: normal;
}

.card-header-neutral::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--space-4);
    right: var(--space-4);
    height: 1px;
    background: var(--border-primary);
}

.card-header-neutral i {
    color: var(--brand-600);
    font-size: var(--font-size-base);
}

/* Action Buttons - Two-tier hierarchy */
.btn-action-primary {
    background-color: var(--brand-600);
    border-color: var(--brand-600);
    color: var(--text-on-brand);
}

.btn-action-primary:hover {
    background-color: var(--brand-700);
    border-color: var(--brand-700);
    color: var(--text-on-brand);
}

.btn-action-secondary {
    background-color: transparent;
    border-color: var(--border-secondary);
    color: var(--text-secondary);
}

.btn-action-secondary:hover {
    background-color: var(--bg-interactive);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

.btn-action-destructive {
    background-color: transparent;
    border-color: var(--error-500);
    color: var(--error-600);
}

.btn-action-destructive:hover {
    background-color: var(--error-50);
    border-color: var(--error-600);
    color: var(--error-800);
}

/* Semantic Badges - Minimal palette */
.badge-status-active {
    background-color: var(--success-100) !important;
    color: var(--success-700) !important;
}

.badge-status-inactive {
    background-color: var(--error-100) !important;
    color: var(--error-700) !important;
}

.badge-status-neutral {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
}

.badge-status-pending {
    background-color: var(--warning-100) !important;
    color: var(--warning-700) !important;
}

/* Type/Category Badges - Subtle brand tint */
.badge-type {
    background-color: var(--bg-interactive) !important;
    color: var(--brand-700) !important;
}

/* Table action buttons - Consistent outline style */
.table-actions .btn-action-view {
    background-color: transparent;
    border-color: var(--border-secondary);
    color: var(--text-secondary);
    padding: var(--space-1) var(--space-2);
}

.table-actions .btn-action-view:hover {
    background-color: var(--brand-600);
    border-color: var(--brand-600);
    color: var(--text-on-brand);
}

.table-actions .btn-action-edit {
    background-color: transparent;
    border-color: var(--border-secondary);
    color: var(--text-secondary);
    padding: var(--space-1) var(--space-2);
}

.table-actions .btn-action-edit:hover {
    background-color: var(--bg-interactive);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

.table-actions .btn-action-delete {
    background-color: transparent;
    border-color: var(--border-secondary);
    color: var(--text-secondary);
    padding: var(--space-1) var(--space-2);
}

.table-actions .btn-action-delete:hover {
    background-color: var(--error-50);
    border-color: var(--error-500);
    color: var(--error-600);
}

/* Login Page */
.login-card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.login-header {
    background: var(--brand-600);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    color: var(--text-on-brand);
    padding: var(--space-8);
}

.login-footer {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Doctolib indicator */
.doctolib-indicator {
    height: 16px;
    opacity: 0.9;
}

.doctolib-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.doctolib-badge img {
    height: 12px;
}

/* Table Action Buttons - Compact */
.table-actions {
    white-space: nowrap;
}

.table-actions .btn {
    padding: 0.2rem 0.4rem;
    font-size: var(--font-size-sm);
    line-height: 1.2;
}

.table-actions .btn + .btn {
    margin-left: var(--space-1);
}

/* Navbar Typography */
.navbar {
    font-size: var(--font-size-base);
}

.navbar-brand {
    font-size: var(--font-size-md);
    font-weight: 500;
}

/* Page h2 Titles */
h2 {
    font-size: var(--font-size-xl);
}

/* Form Labels */
.form-label {
    font-size: var(--font-size-base);
}

/* ===== Sortable & Filterable Table Headers ===== */
.table thead th.sortable,
.table thead th.filtered {
    user-select: none;
}

.table thead th .th-content {
    white-space: nowrap;
}

/* Sort link */
.table thead th .sort-link {
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.table thead th .sort-link:hover {
    color: var(--brand-600);
}

.table thead th.sorted .sort-link {
    color: var(--brand-700);
    font-weight: 600;
}

.table thead th .sort-icon {
    font-size: var(--font-size-xs);
    opacity: 0.5;
}

.table thead th.sortable:hover .sort-icon {
    opacity: 0.8;
}

.table thead th.sorted .sort-icon {
    opacity: 1;
    color: var(--brand-600);
}

/* Filtered column highlight */
.table thead th.filtered {
    background-color: var(--bg-interactive);
}

/* Filter funnel button */
.filter-btn {
    padding: 0 3px;
    line-height: 1;
    color: var(--neutral-500);
    background: none;
    border: none;
    opacity: 0.6;
    transition: all var(--duration-fast) var(--ease-out);
}

.filter-btn:hover {
    color: var(--brand-600);
    opacity: 1;
}

.filter-btn.active {
    color: var(--brand-600);
    opacity: 1;
}

/* Filter dropdown menu */
.filter-dropdown-menu {
    min-width: auto !important;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
}

/* Column filter pills inside dropdown */
.column-filter-pills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.filter-pill {
    font-size: var(--font-size-xs);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    text-decoration: none;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    white-space: nowrap;
    line-height: 1.5;
    transition: all var(--duration-fast) var(--ease-out);
    cursor: pointer;
}

.filter-pill:hover {
    color: var(--brand-600);
    border-color: var(--brand-300);
    background: var(--bg-interactive);
    text-decoration: none;
}

.filter-pill.active {
    color: white;
    background: var(--brand-600);
    border-color: var(--brand-600);
}

/* Select filter inside dropdown */
.column-filter-select .form-select {
    font-size: var(--font-size-xs);
    padding: 2px 24px 2px 6px;
    height: auto;
    min-width: 120px;
}

/* Allow filter dropdowns to escape table-responsive vertically while keeping horizontal scroll */
.table-responsive {
    overflow-x: auto;
    overflow-y: visible;
}

/* Clear filter button (inline, next to funnel) */
.filter-clear-inline-btn {
    padding: 0 2px;
    line-height: 1;
    color: var(--neutral-500);
    background: none;
    border: none;
    font-size: var(--font-size-xs);
    opacity: 0.7;
    transition: all var(--duration-fast) var(--ease-out);
}

.filter-clear-inline-btn:hover {
    opacity: 1;
    color: var(--error-500);
}

/* Search-select filter inside dropdown */
.column-filter-search-select {
    min-width: 180px;
    max-width: 260px;
}

.filter-search-header {
    margin-bottom: 6px;
}

.filter-search-header input {
    font-size: var(--font-size-xs);
}

.filter-search-list {
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-secondary) var(--bg-tertiary);
}

.filter-search-list::-webkit-scrollbar {
    width: 6px;
}

.filter-search-list::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.filter-search-list::-webkit-scrollbar-thumb {
    background: var(--border-secondary);
    border-radius: var(--radius-sm);
}

.filter-search-item {
    display: block;
    padding: 3px 8px;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.filter-search-item:hover {
    background: var(--brand-50);
    color: var(--brand-600);
    text-decoration: none;
}

.filter-search-item.active {
    background: var(--brand-600);
    color: white;
}

/* Text search filter inside dropdown */
.column-filter-text-search input {
    font-size: var(--font-size-xs);
    min-width: 120px;
}

/* Loading state for filters */
[data-filter-pills].htmx-loading,
[data-filter-inline-select].htmx-loading,
[data-filter-search-select].htmx-loading,
[data-filter-text-search].htmx-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* ===== Pagination ===== */
.pagination {
    font-size: var(--font-size-sm);
}

.pagination .page-link {
    color: var(--text-secondary);
    border-color: var(--border-primary);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
}

.pagination .page-link:hover {
    color: var(--brand-700);
    background-color: var(--bg-interactive);
    border-color: var(--border-secondary);
}

.pagination .page-link:focus {
    box-shadow: 0 0 0 0.2rem var(--brand-100);
    border-color: var(--brand-500);
}

.pagination .page-item.active .page-link {
    background-color: var(--brand-600);
    border-color: var(--brand-600);
    color: var(--text-on-brand);
}

.pagination .page-item.disabled .page-link {
    color: var(--text-tertiary);
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
}

/* Small pagination variant */
.pagination-sm .page-link {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
}

/* Per-page selector (matches pagination style) */
.per-page-label {
    color: var(--text-tertiary);
    border-color: var(--border-primary);
    border-right: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    cursor: default;
}

.per-page-select {
    border-color: var(--border-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    cursor: pointer;
    appearance: auto;
}

.per-page-select:hover {
    color: var(--brand-700);
    background-color: var(--bg-interactive);
    border-color: var(--border-secondary);
}

.per-page-select:focus {
    box-shadow: 0 0 0 0.2rem var(--brand-100);
    border-color: var(--brand-500);
    outline: none;
}


/* ===== Component Size Variants ===== */
@layer components {
    /* Button Sizes - coherent scale from xs to lg
       Base .btn: space-1 space-3, font-size-sm (default)
    */
    .btn.btn-xs {
        padding: var(--space-1) var(--space-1);
        font-size: var(--font-size-xs);
        line-height: 1.2;
    }

    .btn.btn-sm {
        padding: var(--space-1) var(--space-2);
        font-size: var(--font-size-xs);
        line-height: 1.3;
    }

    .btn.btn-md {
        padding: var(--space-2) var(--space-4);
        font-size: var(--font-size-base);
        border-radius: var(--radius-md);
    }

    .btn.btn-lg {
        padding: var(--space-3) var(--space-5);
        font-size: var(--font-size-md);
        border-radius: var(--radius-md);
    }

    /* Input Sizes */
    .form-control-xs,
    .form-select-xs {
        padding: var(--space-1) var(--space-2);
        font-size: var(--font-size-xs);
        border-radius: var(--radius-sm);
    }

    .form-control-sm,
    .form-select-sm {
        padding: var(--space-2) var(--space-3);
        font-size: var(--font-size-sm);
        border-radius: var(--radius-sm);
    }

    .form-control-lg,
    .form-select-lg {
        padding: var(--space-4) var(--space-5);
        font-size: var(--font-size-md);
        border-radius: var(--radius-md);
    }

    /* Badge Sizes */
    .badge-sm {
        padding: var(--space-1) var(--space-2);
        font-size: var(--font-size-xs);
    }

    .badge-lg {
        padding: var(--space-2) var(--space-4);
        font-size: var(--font-size-base);
    }
}

/* ===== Component States ===== */
@layer components {
    /* Button States */
    .btn:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
        transition: all var(--duration-fast) var(--ease-out);
    }

    .btn:active:not(:disabled) {
        transform: translateY(0);
        box-shadow: none;
        transition: all var(--duration-instant) var(--ease-in);
    }

    .btn:disabled,
    .btn.disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }

    /* Input States */
    .form-control:hover:not(:disabled):not(:focus) {
        border-color: var(--neutral-400);
        transition: border-color var(--duration-fast) var(--ease-out);
    }

    .form-control:disabled,
    .form-select:disabled {
        background-color: var(--bg-tertiary);
        cursor: not-allowed;
        opacity: 0.6;
    }

    /* Link States */
    a:hover {
        text-decoration: underline;
        transition: color var(--duration-fast) var(--ease-out);
    }

    a:active {
        transform: scale(0.98);
        transition: transform var(--duration-instant) var(--ease-in);
    }
}

/* ===== Utility Classes ===== */
@layer utilities {
    /* Shadow Utilities */
    .shadow-xs { box-shadow: var(--shadow-xs) !important; }
    .shadow-sm { box-shadow: var(--shadow-sm) !important; }
    .shadow-md { box-shadow: var(--shadow-md) !important; }
    .shadow-lg { box-shadow: var(--shadow-lg) !important; }
    .shadow-xl { box-shadow: var(--shadow-xl) !important; }
    .shadow-2xl { box-shadow: var(--shadow-2xl) !important; }
    .shadow-none { box-shadow: none !important; }

    /* Radius Utilities */
    .rounded-sm { border-radius: var(--radius-sm) !important; }
    .rounded-md { border-radius: var(--radius-md) !important; }
    .rounded-lg { border-radius: var(--radius-lg) !important; }
    .rounded-xl { border-radius: var(--radius-xl) !important; }
    .rounded-2xl { border-radius: var(--radius-2xl) !important; }
    .rounded-full { border-radius: var(--radius-full) !important; }

    /* Spacing Utilities - Padding */
    .p-0 { padding: var(--space-0) !important; }
    .p-1 { padding: var(--space-1) !important; }
    .p-2 { padding: var(--space-2) !important; }
    .p-3 { padding: var(--space-3) !important; }
    .p-4 { padding: var(--space-4) !important; }
    .p-5 { padding: var(--space-5) !important; }
    .p-6 { padding: var(--space-6) !important; }
    .p-8 { padding: var(--space-8) !important; }

    /* Spacing Utilities - Margin */
    .m-0 { margin: var(--space-0) !important; }
    .m-1 { margin: var(--space-1) !important; }
    .m-2 { margin: var(--space-2) !important; }
    .m-3 { margin: var(--space-3) !important; }
    .m-4 { margin: var(--space-4) !important; }
    .m-5 { margin: var(--space-5) !important; }
    .m-6 { margin: var(--space-6) !important; }
    .m-8 { margin: var(--space-8) !important; }

    /* Directional Padding */
    .px-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
    .px-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
    .px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
    .py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
    .py-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
    .py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }

    /* Directional Margin */
    .mx-2 { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
    .mx-3 { margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
    .mx-4 { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
    .mx-auto { margin-left: auto !important; margin-right: auto !important; }
    .my-2 { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
    .my-3 { margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
    .my-4 { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }

    /* Flexbox Utilities */
    .d-flex { display: flex !important; }
    .flex-row { flex-direction: row !important; }
    .flex-column { flex-direction: column !important; }
    .flex-wrap { flex-wrap: wrap !important; }
    .flex-nowrap { flex-wrap: nowrap !important; }
    .justify-start { justify-content: flex-start !important; }
    .justify-center { justify-content: center !important; }
    .justify-end { justify-content: flex-end !important; }
    .justify-between { justify-content: space-between !important; }
    .justify-around { justify-content: space-around !important; }
    .items-start { align-items: flex-start !important; }
    .items-center { align-items: center !important; }
    .items-end { align-items: flex-end !important; }
    .items-stretch { align-items: stretch !important; }
    .gap-1 { gap: var(--space-1) !important; }
    .gap-2 { gap: var(--space-2) !important; }
    .gap-3 { gap: var(--space-3) !important; }
    .gap-4 { gap: var(--space-4) !important; }

    /* Grid Utilities */
    .d-grid { display: grid !important; }
    .grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
    .grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
    .grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }

    /* Text Utilities */
    .text-xs { font-size: var(--font-size-xs) !important; }
    .text-sm { font-size: var(--font-size-sm) !important; }
    .text-base { font-size: var(--font-size-base) !important; }
    .text-lg { font-size: var(--font-size-lg) !important; }
    .text-xl { font-size: var(--font-size-xl) !important; }

    /* Icon Size Utilities */
    .icon-lg { font-size: 2rem !important; }
    .icon-xl { font-size: 3rem !important; }
    .icon-2xl { font-size: 4rem !important; }
    .icon-hero { font-size: 5rem !important; }
}

/* ===== Theme Picker Styles ===== */
.theme-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    margin-right: var(--space-1);
    vertical-align: middle;
}

.theme-swatch.bg-teal { background: var(--teal-500); }
.theme-swatch.bg-blue { background: var(--blue-500); }

/* Active state for theme buttons */
.theme-brand-btn.active,
.theme-mode-btn.active {
    background-color: var(--brand-100) !important;
    border-color: var(--brand-500) !important;
    color: var(--brand-700) !important;
}

/* Theme picker button group */
.theme-picker .btn-group .btn {
    padding: var(--space-2) var(--space-3);
}

/* ===== Dashboard KPI & Chart Components ===== */

/* KPI Cards */
.kpi-card {
    transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg) !important;
}

.kpi-value {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    line-height: 1.2;
}

.kpi-change {
    font-size: var(--font-size-md);
    font-weight: 500;
}

.kpi-change.positive { color: var(--success-600); }
.kpi-change.negative { color: var(--error-500); }

/* KPI Master Layout — Two-column hero + breakdowns */
.kpi-master {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.kpi-hero {
    grid-row: 1 / 3;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-4) var(--space-5);
    background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
    color: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    min-width: 240px;
}

.kpi-hero-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
    margin-bottom: var(--space-1);
}

.kpi-hero-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.kpi-group {
    grid-column: 2;
    background: var(--bs-body-bg, #fff);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    transition: box-shadow var(--duration-base) var(--ease-out);
}

.kpi-group:hover {
    box-shadow: var(--shadow-md);
}

.kpi-group-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
    min-width: 160px;
}

.kpi-group-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-500);
}

.kpi-group-total {
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--bs-body-color, var(--neutral-800));
}

.kpi-divider {
    width: 1px;
    align-self: stretch;
    background: var(--border-primary);
    flex-shrink: 0;
}

.kpi-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-5);
    flex: 1;
}

.kpi-breakdown-item {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    min-width: 0;
}

.kpi-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    position: relative;
    top: -1px;
}

.kpi-dot--amo     { background: var(--brand-500); }
.kpi-dot--amc     { background: var(--info-500); }
.kpi-dot--patient { background: var(--warning-500); }
.kpi-dot--card    { background: var(--info-400); }
.kpi-dot--bank    { background: var(--success-500); }
.kpi-dot--cash    { background: var(--neutral-400); }
.kpi-dot--other   { background: var(--neutral-300); }

.kpi-breakdown-label {
    font-size: var(--font-size-sm);
    color: var(--neutral-500);
    white-space: nowrap;
}

.kpi-breakdown-value {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--bs-body-color, var(--neutral-700));
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .kpi-master {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .kpi-hero {
        grid-row: auto;
        grid-column: auto;
        padding: var(--space-3) var(--space-4);
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .kpi-hero-value {
        font-size: var(--font-size-4xl);
    }
    .kpi-group {
        grid-column: auto;
        flex-wrap: wrap;
    }
    .kpi-divider {
        display: none;
    }
    .kpi-breakdown {
        gap: var(--space-1) var(--space-3);
    }
}

/* Chart Containers */
.chart-container {
    min-height: 280px;
}

/* Date Filter Button */
.date-filter-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.date-filter-btn:hover {
    border-color: var(--brand-600);
}

/* Preset List */
.preset-list label {
    display: block;
    padding: var(--space-2);
    margin: var(--space-1) 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.preset-list label:hover {
    background: var(--bg-tertiary);
}

.preset-list input:checked + span {
    color: var(--brand-600);
    font-weight: 600;
}

/* Skeleton Loading Animation */
.skeleton {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--border-primary) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: var(--radius-sm);
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text {
    height: 1rem;
    margin-bottom: var(--space-2);
}

.skeleton-kpi {
    height: 2rem;
    width: 80%;
}

.skeleton-chart {
    height: 250px;
    width: 100%;
}

/* Comparison Cards */
.comparison-card {
    border-left: 4px solid var(--brand-600);
}

.comparison-value {
    font-size: var(--font-size-3xl);
    font-weight: 600;
}

.comparison-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Ranking Badges */
.ranking-badge {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    font-weight: 700;
}

.ranking-1 {
    background: linear-gradient(135deg, var(--warning-400), var(--warning-500));
    color: var(--text-on-brand);
}

.ranking-2 {
    background: linear-gradient(135deg, var(--neutral-400), var(--neutral-500));
    color: var(--text-on-brand);
}

.ranking-3 {
    background: linear-gradient(135deg, var(--warning-600), var(--warning-700));
    color: var(--text-on-brand);
}

.ranking-other {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* Appointment Items */
.appointment-item {
    border-left: 3px solid var(--brand-600);
    background: var(--bg-secondary);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-2);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Performance Bar */
.performance-bar {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.performance-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-600), var(--brand-500));
    border-radius: var(--radius-full);
    transition: width var(--duration-slow) var(--ease-out);
}

/* ===== Alpine.js x-cloak - Prevent flash of unstyled content ===== */
/* Hide elements with x-cloak attribute until Alpine.js initializes */
[x-cloak] {
    display: none !important;
}