/*
 * Chiron School Management System
 * Design System — Single Source of UI/UX Truth
 * Path: chiron/frontend/assets/css/main.css
 *
 * ARCHITECTURE
 * ─────────────────────────────────────────────
 * 1. DESIGN TOKENS       — all values live here; never hard-code elsewhere
 * 2. BASE                — reset, body, focus ring
 * 3. LAYOUT              — app shell, sidebar wrapper, page content
 * 4. SIDEBAR THEMES      — per-user-type colour overrides
 * 5. SIDEBAR             — the sidebar component
 * 6. TOPBAR              — the top navigation bar
 * 7. BUTTONS             — ONE system: .btn + modifiers
 * 8. FORM ELEMENTS       — ONE system: .form-input, .form-select, etc.
 * 9. CARDS               — .card, .card-header, .card-body, .card-footer
 * 10. TABLES             — .table-wrap, .table-toolbar, .data-table
 * 11. BADGES & STATUS    — .badge, .status-badge
 * 12. MODALS & OVERLAYS  — .modal-backdrop, .modal
 * 13. SETTINGS FORMS     — .settings-section, .form-card, .form-grid
 * 14. UTILITY PATTERNS   — .page-header, .filter-bar, .empty-state, .spinner
 * 15. TOOLTIP
 * 16. ANIMATION
 * 17. RESPONSIVE
 *
 * SIZE SYSTEM (compact, consistent):
 *   button/input height  → 2.375rem (38 px) default | 2rem (32 px) sm | 2.625rem (42 px) lg
 *   icon size            → 1rem (16 px) default     | 0.875rem (14 px) sm | 1.125rem (18 px) lg
 *   border-radius        → 0.375rem buttons/inputs  | 0.625rem cards
 *   font in UI controls  → 0.9375rem (15 px)
 *   body / table text    → 0.875rem  (14 px)
 *   label / meta text    → 0.75rem   (12 px)
 */

/* ================================================================
   1. DESIGN TOKENS
   ================================================================ */
:root {
    /* ── Primitive colour palette ─────────────────────────── */
    --blue-50:  #eff6ff; --blue-100: #dbeafe; --blue-200: #bfdbfe;
    --blue-300: #93c5fd; --blue-400: #60a5fa; --blue-500: #3b82f6;
    --blue-600: #2563eb; --blue-700: #1d4ed8; --blue-800: #1e40af;
    --blue-900: #1e3a8a;

    --gray-50:  #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb;
    --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280;
    --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937;
    --gray-900: #111827;

    --slate-50:  #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0;
    --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b;
    --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b;
    --slate-900: #0f172a;

    /* status primitives */
    --green-50: #f0fdf4; --green-100: #dcfce7; --green-200: #bbf7d0;
    --green-500: #10b981; --green-600: #059669; --green-700: #047857;
    --amber-50: #fffbeb; --amber-100: #fef3c7; --amber-200: #fde68a;
    --amber-500: #f59e0b; --amber-600: #d97706;
    --red-50: #fef2f2; --red-100: #fee2e2; --red-200: #fecaca;
    --red-500: #ef4444; --red-600: #dc2626; --red-700: #b91c1c;
    --cyan-50: #ecfeff; --cyan-100: #cffafe;
    --cyan-500: #06b6d4; --cyan-600: #0891b2;
    --purple-50: #faf5ff; --purple-100: #f3e8ff;
    --purple-500: #a855f7; --purple-600: #9333ea; --purple-700: #7e22ce;

    /* ── Semantic colour tokens ───────────────────────────── */
    /* Action */
    --color-primary:        var(--blue-600);
    --color-primary-hover:  var(--blue-700);
    --color-primary-focus:  var(--blue-500);
    --color-primary-light:  var(--blue-50);
    --color-primary-ring:   rgba(37, 99, 235, 0.2);

    /* Status */
    --color-success:        var(--green-500);
    --color-success-bg:     var(--green-50);
    --color-success-border: rgba(16, 185, 129, 0.25);
    --color-warning:        var(--amber-500);
    --color-warning-bg:     var(--amber-50);
    --color-warning-border: rgba(245, 158, 11, 0.25);
    --color-error:          var(--red-500);
    --color-error-bg:       var(--red-50);
    --color-error-border:   rgba(239, 68, 68, 0.25);
    --color-info:           var(--cyan-500);
    --color-info-bg:        var(--cyan-50);
    --color-info-border:    rgba(6, 182, 212, 0.25);

    /* Surface */
    --color-surface:        #ffffff;
    --color-surface-subtle: var(--slate-50);
    --color-surface-muted:  var(--slate-100);

    /* Border */
    --color-border:         var(--slate-200);
    --color-border-strong:  var(--slate-300);
    --color-border-focus:   var(--blue-500);

    /* Text */
    --color-text:           var(--slate-800);
    --color-text-secondary: var(--slate-500);
    --color-text-muted:     var(--slate-400);
    --color-text-inverse:   #ffffff;

    /* Backwards-compat aliases (used by dashboard.css / pages) */
    --primary-50:  var(--blue-50);  --primary-100: var(--blue-100);
    --primary-200: var(--blue-200); --primary-300: var(--blue-300);
    --primary-400: var(--blue-400); --primary-500: var(--blue-500);
    --primary-600: var(--blue-600); --primary-700: var(--blue-700);
    --primary-800: var(--blue-800); --primary-900: var(--blue-900);
    --success: var(--green-500);
    --warning: var(--amber-500);
    --error:   var(--red-500);
    --info:    var(--cyan-500);
    --bg-main:      var(--color-surface);
    --bg-secondary: var(--color-surface-subtle);
    --bg-tertiary:  var(--color-surface-muted);
    --bg-card:      var(--color-surface);
    --border-light:  var(--slate-200);
    --border-medium: var(--slate-300);
    --border-dark:   var(--slate-400);
    --text-primary:   var(--slate-800);
    --text-secondary: var(--slate-500);
    --text-muted:     var(--slate-400);

    /* ── Sidebar default tokens (admin / superadmin) ──────── */
    --sidebar-bg-start:        #1e293b;
    --sidebar-bg-middle:       #334155;
    --sidebar-bg-end:          #475569;
    --sidebar-text-primary:    #f1f5f9;
    --sidebar-text-secondary:  #cbd5e1;
    --sidebar-text-muted:      #94a3b8;
    --sidebar-border:          #475569;
    --sidebar-hover:           rgba(59, 130, 246, 0.10);
    --sidebar-active:          rgba(59, 130, 246, 0.20);

    /* ── Typography ───────────────────────────────────────── */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

    /* Type scale — 7 steps, strictly enforced */
    --text-2xs:  0.6875rem;   /* 11 px — timestamps, meta chips */
    --text-xs:   0.75rem;     /* 12 px — labels, table headers, badges */
    --text-sm:   0.875rem;    /* 14 px — body, table cells */
    --text-base: 0.9375rem;   /* 15 px — standard UI (buttons, inputs, nav) */
    --text-lg:   1rem;        /* 16 px — card titles, section labels */
    --text-xl:   1.125rem;    /* 18 px — page sub-headers */
    --text-2xl:  1.25rem;     /* 20 px — page titles */
    --text-3xl:  1.5rem;      /* 24 px — dashboard / hero numbers */

    /* ── Component sizing — heights shared by buttons & inputs ─ */
    --h-ctrl:    2.375rem;    /* 38 px — default control height */
    --h-ctrl-sm: 2rem;        /* 32 px — small control height    */
    --h-ctrl-lg: 2.625rem;    /* 42 px — large control height    */

    /* Horizontal padding for controls */
    --px-ctrl:    0.875rem;   /* 14 px */
    --px-ctrl-sm: 0.625rem;   /* 10 px */
    --px-ctrl-lg: 1.125rem;   /* 18 px */

    /* Icon sizes */
    --icon-sm: 0.875rem;      /* 14 px */
    --icon:    1rem;          /* 16 px */
    --icon-lg: 1.125rem;      /* 18 px */

    /* ── Spacing scale ────────────────────────────────────── */
    --space-1:   0.25rem;     /* 4 px */
    --space-2:   0.5rem;      /* 8 px */
    --space-3:   0.75rem;     /* 12 px */
    --space-4:   1rem;        /* 16 px */
    --space-5:   1.25rem;     /* 20 px */
    --space-6:   1.5rem;      /* 24 px */
    --space-8:   2rem;        /* 32 px */

    /* Page-level gutters */
    --page-x: 1.5rem;
    --page-y: 1.25rem;

    /* ── Border radius ────────────────────────────────────── */
    --radius-xs:   0.25rem;   /* 4 px  */
    --radius-sm:   0.3125rem; /* 5 px  */
    --radius:      0.375rem;  /* 6 px  — controls (buttons, inputs) */
    --radius-md:   0.5rem;    /* 8 px  — small cards, chips */
    --radius-lg:   0.625rem;  /* 10 px — cards */
    --radius-xl:   0.75rem;   /* 12 px — large cards */
    --radius-2xl:  1rem;      /* 16 px — modal, panels */
    --radius-full: 9999px;    /* pill  */

    /* ── Shadows ──────────────────────────────────────────── */
    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.04);
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04);
    --shadow:    0 2px 6px rgb(0 0 0 / 0.07), 0 1px 3px rgb(0 0 0 / 0.04);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 0.08), 0 2px 4px rgb(0 0 0 / 0.04);
    --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.09), 0 3px 8px rgb(0 0 0 / 0.04);
    --shadow-xl: 0 16px 40px rgb(0 0 0 / 0.10), 0 6px 12px rgb(0 0 0 / 0.05);
    --shadow-focus: 0 0 0 3px var(--color-primary-ring);

    /* ── Transitions ──────────────────────────────────────── */
    --ease:           cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 100ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition:      150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 250ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Layout dimensions ────────────────────────────────── */
    --sidebar-width:           240px;
    --sidebar-collapsed-width:  64px;
    --topbar-height:            64px;
}

/* ================================================================
   2. BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-surface-subtle);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body { margin: 0; }

/* Global focus ring — keyboard only */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Hide Alpine.js un-rendered elements */
[x-cloak] { display: none !important; }

/* ================================================================
   3. LAYOUT
   ================================================================ */
.app-container {
    display: flex;
    min-height: 100vh;
}

.main-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: margin-left var(--transition);
}

/* Page scrollable body */
.page-content {
    flex: 1;
    padding: var(--page-y) var(--page-x);
    overflow-x: hidden;
}

/* Desktop layout */
@media (min-width: 1024px) {
    .main-content-wrapper {
        margin-left: var(--sidebar-width);
    }
    .main-content-wrapper.sidebar-collapsed {
        margin-left: var(--sidebar-collapsed-width);
    }
}

@media (max-width: 1023px) {
    .main-content-wrapper {
        margin-left: 0 !important;
    }
}

/* Sidebar overlay (mobile) */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    z-index: 45;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}
.sidebar-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* ================================================================
   4. SIDEBAR THEMES — per user-type colour overrides
   ================================================================ */
/* Teacher — forest green */
.modern-sidebar[data-user-type="teacher"] {
    --sidebar-bg-start: #14532d; --sidebar-bg-middle: #166534; --sidebar-bg-end: #15803d;
    --sidebar-border: #166534;
    --sidebar-hover:  rgba(74, 222, 128, 0.12);
    --sidebar-active: rgba(74, 222, 128, 0.22);
    --primary-300: #86efac; --primary-400: #4ade80;
}
/* Staff — deep indigo */
.modern-sidebar[data-user-type="staff"] {
    --sidebar-bg-start: #1e1b4b; --sidebar-bg-middle: #312e81; --sidebar-bg-end: #3730a3;
    --sidebar-border: #312e81;
    --sidebar-hover:  rgba(129, 140, 248, 0.12);
    --sidebar-active: rgba(129, 140, 248, 0.22);
    --primary-300: #a5b4fc; --primary-400: #818cf8;
}
/* Parent — deep rose */
.modern-sidebar[data-user-type="parent"] {
    --sidebar-bg-start: #3b0a0a; --sidebar-bg-middle: #7f1d1d; --sidebar-bg-end: #991b1b;
    --sidebar-border: #7f1d1d;
    --sidebar-hover:  rgba(248, 113, 113, 0.12);
    --sidebar-active: rgba(248, 113, 113, 0.22);
    --primary-300: #fca5a5; --primary-400: #f87171;
}
/* Accountant — deep teal */
.modern-sidebar[data-user-type="accountant"] {
    --sidebar-bg-start: #042f2e; --sidebar-bg-middle: #134e4a; --sidebar-bg-end: #115e59;
    --sidebar-border: #134e4a;
    --sidebar-hover:  rgba(45, 212, 191, 0.12);
    --sidebar-active: rgba(45, 212, 191, 0.22);
    --primary-300: #5eead4; --primary-400: #2dd4bf;
}
/* Frontdesk — warm amber */
.modern-sidebar[data-user-type="frontdesk"] {
    --sidebar-bg-start: #451a03; --sidebar-bg-middle: #78350f; --sidebar-bg-end: #92400e;
    --sidebar-border: #78350f;
    --sidebar-hover:  rgba(251, 191, 36, 0.12);
    --sidebar-active: rgba(251, 191, 36, 0.22);
    --primary-300: #fde68a; --primary-400: #fbbf24;
}
/* Receptionist — sky blue */
.modern-sidebar[data-user-type="receptionist"] {
    --sidebar-bg-start: #0c2a4a; --sidebar-bg-middle: #075985; --sidebar-bg-end: #0369a1;
    --sidebar-border: #075985;
    --sidebar-hover:  rgba(56, 189, 248, 0.12);
    --sidebar-active: rgba(56, 189, 248, 0.22);
    --primary-300: #7dd3fc; --primary-400: #38bdf8;
}
/* HR — deep violet */
.modern-sidebar[data-user-type="hr"] {
    --sidebar-bg-start: #2e1065; --sidebar-bg-middle: #4c1d95; --sidebar-bg-end: #5b21b6;
    --sidebar-border: #4c1d95;
    --sidebar-hover:  rgba(192, 132, 252, 0.12);
    --sidebar-active: rgba(192, 132, 252, 0.22);
    --primary-300: #d8b4fe; --primary-400: #c084fc;
}
/* Security — crimson */
.modern-sidebar[data-user-type="security"] {
    --sidebar-bg-start: #3c0808; --sidebar-bg-middle: #7f0000; --sidebar-bg-end: #b91c1c;
    --sidebar-border: #7f0000;
    --sidebar-hover:  rgba(248, 113, 113, 0.12);
    --sidebar-active: rgba(248, 113, 113, 0.22);
    --primary-300: #fca5a5; --primary-400: #f87171;
}
/* Librarian — warm brown */
.modern-sidebar[data-user-type="librarian"] {
    --sidebar-bg-start: #1c0a00; --sidebar-bg-middle: #7c2d12; --sidebar-bg-end: #9a3412;
    --sidebar-border: #7c2d12;
    --sidebar-hover:  rgba(251, 146, 60, 0.12);
    --sidebar-active: rgba(251, 146, 60, 0.22);
    --primary-300: #fdba74; --primary-400: #fb923c;
}
/* Driver — steel zinc */
.modern-sidebar[data-user-type="driver"] {
    --sidebar-bg-start: #18181b; --sidebar-bg-middle: #3f3f46; --sidebar-bg-end: #52525b;
    --sidebar-border: #3f3f46;
    --sidebar-hover:  rgba(161, 161, 170, 0.12);
    --sidebar-active: rgba(161, 161, 170, 0.22);
    --primary-300: #d4d4d8; --primary-400: #a1a1aa;
}

/* ================================================================
   5. SIDEBAR COMPONENT
   ================================================================ */
.modern-sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: linear-gradient(180deg,
        var(--sidebar-bg-start)  0%,
        var(--sidebar-bg-middle) 50%,
        var(--sidebar-bg-end)   100%);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: all var(--transition);
    overflow-x: visible;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
}

.modern-sidebar::-webkit-scrollbar { width: 4px; }
.modern-sidebar::-webkit-scrollbar-track { background: transparent; }
.modern-sidebar::-webkit-scrollbar-thumb {
    background: var(--sidebar-text-muted);
    border-radius: 2px;
}

@media (min-width: 1024px) {
    .modern-sidebar.collapsed { width: var(--sidebar-collapsed-width); }
}

@media (max-width: 1023px) {
    .modern-sidebar { transform: translateX(-100%); overflow-x: hidden; }
    .modern-sidebar.open { transform: translateX(0); }
    .modern-sidebar.collapsed { transform: translateX(-100%); }
}

/* Sidebar header */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: var(--topbar-height);
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex: 1;
    min-width: 0;
}

.sidebar-logo-icon {
    width: 1.875rem;
    height: 1.875rem;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.sidebar-logo-text {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--sidebar-text-primary);
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity var(--transition);
}

.sidebar-toggle {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: var(--radius);
    border: none;
    background: none;
    color: var(--sidebar-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.sidebar-toggle:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-primary);
}

@media (min-width: 1024px) {
    .modern-sidebar .sidebar-toggle  { background: var(--sidebar-active) !important; }
    .modern-sidebar.collapsed .sidebar-toggle { background: #C21807 !important; }
}

/* Sidebar nav */
.sidebar-nav {
    flex: 1;
    padding: 1rem 0.625rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--sidebar-text-muted) transparent;
}

.nav-section { margin-bottom: 1.5rem; }

.nav-section-title {
    color: var(--sidebar-text-muted);
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
    padding: 0 0.625rem;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity var(--transition);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0 0.625rem;
    margin: 0.125rem 0;
    border-radius: var(--radius-md);
    color: var(--sidebar-text-secondary);
    text-decoration: none;
    font-size: var(--text-base);
    font-weight: 500;
    transition: all var(--transition-fast);
    position: relative;
    height: 2.375rem;             /* compact — was 2.75rem */
}

.nav-item:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-primary);
    transform: translateX(2px);
}

.nav-item.active {
    background: var(--sidebar-active);
    color: var(--primary-300);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--primary-400);
}

.nav-item.active::after {
    content: '';
    position: absolute;
    right: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    width: 5px; height: 5px;
    background: var(--primary-400);
    border-radius: var(--radius-full);
}

.nav-item-icon {
    width: var(--icon);
    height: var(--icon);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-item-text { white-space: nowrap; overflow: hidden; }

.nav-item-badge {
    margin-left: auto;
    background: linear-gradient(135deg, var(--error), #dc2626);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.125rem 0.3125rem;
    border-radius: var(--radius-full);
    min-width: 1.125rem;
    height: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Collapsed sidebar */
@media (min-width: 1024px) {
    .modern-sidebar.collapsed .sidebar-nav    { padding: 0.75rem 0.375rem; }
    .modern-sidebar.collapsed .nav-section    { margin-bottom: 0.75rem; }
    .modern-sidebar.collapsed .nav-item       { gap: 0; }
    .modern-sidebar.collapsed .nav-item-text  { display: none; }
    .modern-sidebar.collapsed .nav-section-title { opacity: 0; }
    .modern-sidebar.collapsed .sidebar-logo-text { opacity: 0; }
    .modern-sidebar.collapsed .sidebar-footer .user-info,
    .modern-sidebar.collapsed .sidebar-footer .nav-item-icon { display: none; opacity: 0; }
    .modern-sidebar.collapsed .sidebar-footer { padding: 0; }
    .modern-sidebar.collapsed .sidebar-footer .user-avatar { padding: 0.5rem; }
}

/* Sidebar footer / user profile */
.sidebar-footer {
    border-top: 1px solid var(--sidebar-border);
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.08);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    width: 100%;
}

.sidebar-user:hover { background: var(--sidebar-hover); }

.user-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary-400), var(--primary-500));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: var(--text-xs);
    font-weight: 700;
    flex-shrink: 0;
}

/* Tooltip (JS-generated for collapsed sidebar) */
.tooltip {
    position: fixed;
    background: var(--gray-900);
    color: white;
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius);
    font-size: var(--text-xs);
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 10000;
    box-shadow: var(--shadow-md);
}

/* ================================================================
   6. TOPBAR
   ================================================================ */
.modern-topbar {
    height: var(--topbar-height);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    padding: 0 var(--page-x);
    position: sticky;
    top: 0;
    z-index: 40;
    width: 100%;
    box-shadow: var(--shadow-xs);
    gap: 1rem;
}

.topbar-left    { display: flex; align-items: center; gap: 0.875rem; flex: 1; min-width: 0; }
.topbar-right   { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.topbar-actions { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }

.topbar-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.topbar-search {
    position: relative;
    width: 280px;
    max-width: 100%;
}

.topbar-search input {
    width: 100%;
    height: var(--h-ctrl-sm);
    padding: 0 var(--px-ctrl) 0 2.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface-subtle);
    font-size: var(--text-sm);
    color: var(--color-text);
    transition: all var(--transition-fast);
}

.topbar-search input:focus {
    outline: none;
    background: var(--color-surface);
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
}

.topbar-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    width: var(--icon-sm);
    height: var(--icon-sm);
}

/* Topbar icon actions */
.topbar-action {
    width: var(--h-ctrl-sm);
    height: var(--h-ctrl-sm);
    border: none;
    background: none;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    position: relative;
    flex-shrink: 0;
}

.topbar-action:hover {
    background: var(--color-surface-muted);
    color: var(--color-text);
}

.topbar-action-badge {
    position: absolute;
    top: 0.125rem;
    right: 0.125rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    background: var(--color-error);
    border: 1.5px solid var(--color-surface);
    border-radius: var(--radius-full);
    font-size: 0.625rem;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ================================================================
   7. BUTTONS — ONE SYSTEM
   ─────────────────────────────────────────────────────────────────
   Sizes:
     default  → h: 2.25rem  | px: 0.875rem | text: 0.875rem
     .btn-sm  → h: 1.875rem | px: 0.625rem | text: 0.8125rem
     .btn-lg  → h: 2.5rem   | px: 1.125rem | text: 0.875rem
     .btn-icon (square, same h as default)
     .btn-icon-sm (square, same h as sm)

   Variants: btn-primary | btn-secondary | btn-danger | btn-ghost | btn-outline
   ================================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: var(--h-ctrl);
    padding: 0 var(--px-ctrl);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: var(--text-base);
    font-weight: 600;
    font-family: var(--font-primary);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    user-select: none;
}

/* Icon within a button */
.btn svg, .btn i[data-lucide], .btn .lucide {
    width: var(--icon);
    height: var(--icon);
    flex-shrink: 0;
}

/* Sizes */
.btn-sm {
    height: var(--h-ctrl-sm);
    padding: 0 var(--px-ctrl-sm);
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
}
.btn-sm svg, .btn-sm i[data-lucide], .btn-sm .lucide {
    width: var(--icon-sm);
    height: var(--icon-sm);
}

.btn-lg {
    height: var(--h-ctrl-lg);
    padding: 0 var(--px-ctrl-lg);
}

/* Square icon-only buttons */
.btn-icon {
    width: var(--h-ctrl);
    height: var(--h-ctrl);
    padding: 0;
    border-radius: var(--radius);
}
.btn-icon-sm {
    width: var(--h-ctrl-sm);
    height: var(--h-ctrl-sm);
    padding: 0;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
}
.btn-icon svg, .btn-icon i, .btn-icon-sm svg, .btn-icon-sm i { margin: 0; }

/* Colour variants */
.btn-primary {
    background: linear-gradient(135deg, var(--blue-600), var(--blue-700));
    color: var(--color-text-inverse);
    border-color: transparent;
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--blue-700), var(--blue-800));
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}
.btn-secondary:hover:not(:disabled) {
    background: var(--color-surface-subtle);
    border-color: var(--slate-400);
    transform: translateY(-1px);
}

.btn-danger {
    background: linear-gradient(135deg, var(--red-500), var(--red-600));
    color: var(--color-text-inverse);
    border-color: transparent;
    box-shadow: var(--shadow-sm);
}
.btn-danger:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--red-600), var(--red-700));
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.btn-ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border-color: transparent;
}
.btn-ghost:hover:not(:disabled) {
    background: var(--color-surface-muted);
    color: var(--color-text);
}

.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-outline:hover:not(:disabled) {
    background: var(--color-primary-light);
    transform: translateY(-1px);
}

/* Icon-only colour combos */
.btn-icon.btn-secondary, .btn-icon-sm.btn-secondary {
    background: var(--color-surface);
    border-color: var(--color-border-strong);
    color: var(--color-text-secondary);
}
.btn-icon.btn-secondary:hover:not(:disabled),
.btn-icon-sm.btn-secondary:hover:not(:disabled) {
    color: var(--color-text);
    background: var(--color-surface-subtle);
}
.btn-icon.btn-danger, .btn-icon-sm.btn-danger {
    background: transparent;
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--color-error);
}
.btn-icon.btn-danger:hover:not(:disabled),
.btn-icon-sm.btn-danger:hover:not(:disabled) {
    background: var(--color-error-bg);
    border-color: var(--color-error);
}
.btn-icon.btn-ghost, .btn-icon-sm.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--color-text-secondary);
}
.btn-icon.btn-ghost:hover:not(:disabled),
.btn-icon-sm.btn-ghost:hover:not(:disabled) {
    background: var(--color-surface-muted);
    color: var(--color-text);
}

/* Disabled state */
.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Loading spinner inside button */
.btn-spinner {
    width: 0.875rem;
    height: 0.875rem;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    flex-shrink: 0;
}
.btn-secondary .btn-spinner,
.btn-ghost .btn-spinner,
.btn-outline .btn-spinner {
    border-color: rgba(0, 0, 0, 0.15);
    border-top-color: var(--color-text);
}

/* Legacy alias — do not use for new code */
.modern-button       { }
.modern-button.primary   { @apply .btn .btn-primary; }
.modern-button.secondary { @apply .btn .btn-secondary; }
.modern-button.ghost     { @apply .btn .btn-ghost; }

/* ================================================================
   8. FORM ELEMENTS — ONE SYSTEM
   ─────────────────────────────────────────────────────────────────
   All controls share the same height as .btn (var(--h-ctrl)).
   This ensures buttons and inputs align naturally in a row.
   ================================================================ */

/* Group wrapper */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
}
.form-group.full-width,
.form-group.col-span-2 { grid-column: 1 / -1; }

/* Label */
.form-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    letter-spacing: 0.01em;
}
.form-label i, .form-label svg {
    width: var(--icon-sm);
    height: var(--icon-sm);
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* Core input / select / textarea */
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    height: var(--h-ctrl);
    padding: 0 var(--px-ctrl);
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-size: var(--text-base);
    font-family: var(--font-primary);
    color: var(--color-text);
    line-height: 1;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--color-text-muted); }

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Select: custom chevron */
.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    background-size: 1rem;
    padding-right: 2.25rem;
    cursor: pointer;
}

/* Textarea overrides height */
.form-textarea {
    height: auto;
    min-height: 6rem;
    padding: 0.625rem var(--px-ctrl);
    line-height: var(--leading-relaxed, 1.625);
    resize: vertical;
}

/* Small variant */
.form-input.form-input-sm,
.form-select.form-select-sm {
    height: var(--h-ctrl-sm);
    padding: 0 var(--px-ctrl-sm);
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
}

/* Input with leading icon */
.input-group {
    position: relative;
    display: flex;
    align-items: center;
}
.input-group .input-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon);
    height: var(--icon);
    color: var(--color-text-muted);
    pointer-events: none;
    flex-shrink: 0;
}
.input-group .form-input,
.input-group .form-select { padding-left: 2.25rem; }

/* Checkbox */
.form-checkbox {
    width: 1rem;
    height: 1rem;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    appearance: none;
}
.form-checkbox:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 0.625rem;
    background-position: center;
    background-repeat: no-repeat;
}
.form-checkbox:focus { outline: none; box-shadow: var(--shadow-focus); }

/* Toggle switch */
.toggle-switch { display: flex; align-items: center; gap: 0.625rem; }
.toggle-switch input[type="checkbox"] {
    width: 2.5rem;
    height: 1.375rem;
    appearance: none;
    background: var(--slate-300);
    border-radius: var(--radius-full);
    position: relative;
    cursor: pointer;
    transition: background var(--transition);
    border: 1.5px solid transparent;
    flex-shrink: 0;
}
.toggle-switch input[type="checkbox"]:checked {
    background: linear-gradient(135deg, var(--blue-600), var(--blue-700));
}
.toggle-switch input[type="checkbox"]::before {
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: white;
    top: 50%;
    left: 0.125rem;
    transform: translateY(-50%);
    transition: left var(--transition);
    box-shadow: var(--shadow-xs);
}
.toggle-switch input[type="checkbox"]:checked::before {
    left: calc(100% - 1.125rem);
}
.toggle-switch input[type="checkbox"]:focus { outline: none; box-shadow: var(--shadow-focus); }
.toggle-switch label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    user-select: none;
}

/* Help and error text */
.form-help {
    font-size: var(--text-2xs);
    color: var(--color-text-muted);
    line-height: 1.5;
}
.form-error {
    font-size: var(--text-2xs);
    color: var(--color-error);
    line-height: 1.5;
}
.form-input.is-error,
.form-select.is-error,
.form-textarea.is-error {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px var(--color-error-bg);
}

/* Checkbox group list */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.875rem;
    background: var(--color-surface-subtle);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
}
.checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    user-select: none;
    padding: 0.3125rem;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}
.checkbox-item:hover { background: var(--color-surface); }
.checkbox-item span { font-size: var(--text-sm); font-weight: 500; color: var(--color-text); }

/* ================================================================
   9. CARDS
   ================================================================ */
.card,
.modern-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--transition-fast);
}
.card:hover,
.modern-card:hover {
    box-shadow: var(--shadow-sm);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}
.card-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.card-title i, .card-title svg {
    width: var(--icon);
    height: var(--icon);
    color: var(--color-primary);
}
.card-actions { display: flex; align-items: center; gap: 0.375rem; }

.card-body,
.card-content {
    padding: 1.25rem;
}
.card-footer {
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Compact card */
.card-sm .card-header { padding: 0.75rem 1rem; }
.card-sm .card-body   { padding: 0.75rem 1rem; }

/* ================================================================
   9b. STAT CARDS & DASHBOARD COMPONENTS
   (Previously in dashboard.css — moved here so all pages can use them)
   ================================================================ */

/* Stats grid — responsive column layout */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

/* Individual stat card */
.stat-card {
    position: relative;
    padding: 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: box-shadow var(--transition-fast);
    box-shadow: var(--shadow-xs);
}
.stat-card:hover {
    box-shadow: var(--shadow-md);
}

.stat-card-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.stat-card-info { flex: 1; min-width: 0; }

.stat-card-label {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.05em;
    margin-bottom: 0.375rem;
}
.stat-card-value {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
    margin-bottom: 0.5rem;
}
.stat-card-change {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0.1875rem 0.5rem;
    border-radius: var(--radius-full);
}
.stat-card-change.positive { background: var(--color-success-bg); color: var(--green-700); }
.stat-card-change.negative { background: var(--color-error-bg);   color: var(--red-700); }

/* Stat icon box */
.stat-card-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.125rem;
    transition: transform var(--transition-fast);
}
.stat-card:hover .stat-card-icon { transform: scale(1.05); }
.stat-card-icon i,
.stat-card-icon svg { color: white; width: 1.125rem; height: 1.125rem; }

.stat-card-icon.blue   { background: linear-gradient(135deg, var(--blue-500),   var(--blue-600)); }
.stat-card-icon.green  { background: linear-gradient(135deg, var(--green-500),  var(--green-600)); }
.stat-card-icon.orange { background: linear-gradient(135deg, var(--amber-500),  var(--amber-600)); }
.stat-card-icon.purple { background: linear-gradient(135deg, var(--purple-500), var(--purple-600)); }
.stat-card-icon.red    { background: linear-gradient(135deg, var(--red-500),    var(--red-600)); }
.stat-card-icon.cyan   { background: linear-gradient(135deg, var(--cyan-500),   var(--cyan-600)); }

/* Dashboard card panel */
.dashboard-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.dashboard-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }

.dashboard-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--color-border);
}
.dashboard-card-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}
.dashboard-card-title i,
.dashboard-card-title svg { width: var(--icon); height: var(--icon); color: var(--color-primary); }

/* Welcome banner */
.welcome-banner {
    position: relative;
    background: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-800) 100%);
    border-radius: var(--radius-xl);
    padding: 2rem 1.75rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.welcome-banner::after {
    content: '';
    position: absolute;
    top: -40%; right: -5%;
    width: 36%; height: 200%;
    background: radial-gradient(ellipse, rgba(255,255,255,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.welcome-banner-content  { position: relative; z-index: 1; }
.welcome-banner-title    { font-size: var(--text-3xl); font-weight: 700; color: white; margin: 0 0 0.375rem; line-height: var(--leading-tight, 1.25); }
.welcome-banner-subtitle { font-size: var(--text-base); color: rgba(255, 255, 255, 0.8); margin: 0 0 1.25rem; }

/* Quick actions grid */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 1.25rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-xs);
}
.quick-action-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.quick-action-icon {
    width: 2.75rem; height: 2.75rem;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
    border-radius: var(--radius-lg);
    color: white; font-size: 1.125rem;
    transition: transform var(--transition-fast);
}
.quick-action-btn:hover .quick-action-icon { transform: scale(1.08); }
.quick-action-label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); text-align: center; }

/* Activity feed */
.activity-feed { display: flex; flex-direction: column; gap: 0.75rem; }
.activity-item {
    display: flex;
    gap: 0.875rem;
    padding: 0.875rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}
.activity-item:hover { background: var(--color-surface-subtle); transform: translateX(2px); }
.activity-icon {
    width: 2.25rem; height: 2.25rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full);
    font-size: 0.875rem; color: white;
}
.activity-icon.blue   { background: linear-gradient(135deg, var(--blue-500),   var(--blue-600)); }
.activity-icon.green  { background: linear-gradient(135deg, var(--green-500),  var(--green-600)); }
.activity-icon.orange { background: linear-gradient(135deg, var(--amber-500),  var(--amber-600)); }
.activity-icon.purple { background: linear-gradient(135deg, var(--purple-500), var(--purple-600)); }
.activity-content    { flex: 1; min-width: 0; }
.activity-title      { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); margin-bottom: 0.125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-description { font-size: var(--text-xs); color: var(--color-text-secondary); margin-bottom: 0.125rem; }
.activity-time       { font-size: var(--text-2xs); color: var(--color-text-muted); }

/* Progress bars */
.progress-container { margin-bottom: 1rem; }
.progress-header    { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.375rem; }
.progress-label     { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-secondary); }
.progress-value     { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.progress-bar-wrapper {
    height: 0.5rem;
    background: var(--color-surface-muted);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--blue-500), var(--blue-600));
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
    position: relative; overflow: hidden;
}
.progress-bar::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    animation: shimmer 2s infinite;
}
.progress-bar.success { background: linear-gradient(90deg, var(--green-500), var(--green-600)); }
.progress-bar.warning { background: linear-gradient(90deg, var(--amber-500), var(--amber-600)); }
.progress-bar.danger  { background: linear-gradient(90deg, var(--red-500),   var(--red-600)); }

/* Skeleton loading */
.skeleton {
    background: linear-gradient(90deg,
        var(--color-surface-muted) 25%,
        var(--color-surface-subtle) 50%,
        var(--color-surface-muted) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius);
}
.skeleton-text   { height: 0.875rem; margin-bottom: 0.5rem; }
.skeleton-card   { height: 200px; border-radius: var(--radius-xl); }
.skeleton-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; }

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

/* Chart container */
.chart-container {
    position: relative;
    padding: 0.75rem;
    border-radius: var(--radius-lg);
    background: var(--color-surface-subtle);
}

/* ================================================================
   10. TABLES
   ================================================================ */
.table-wrap,
.modern-table-container {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    gap: 0.75rem;
    flex-wrap: wrap;
    background: var(--color-surface-subtle);
}

.table-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

/* Filter chip / pill button */
.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: var(--h-ctrl-sm);
    padding: 0 0.75rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}
.filter-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.filter-btn.active {
    background: var(--color-primary-light);
    border-color: var(--blue-300);
    color: var(--blue-700);
}

/* Table element */
.data-table,
.modern-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.modern-table th {
    text-align: left;
    padding: 0.625rem 1rem;
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-subtle);
    white-space: nowrap;
}

.data-table td,
.modern-table td {
    padding: 0.625rem 1rem;
    font-size: var(--text-sm);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.data-table tbody tr,
.modern-table tbody tr { transition: background var(--transition-fast); }

.data-table tbody tr:last-child td,
.modern-table tbody tr:last-child td { border-bottom: none; }

.data-table tbody tr:hover,
.modern-table tbody tr:hover { background: var(--color-surface-subtle); }

.data-table tbody tr.highlighted,
.modern-table tbody tr.highlighted { background: var(--color-primary-light); }

/* ================================================================
   11. BADGES & STATUS
   ================================================================ */
/* Generic badge */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid transparent;
}
.badge-primary  { background: var(--blue-100);   color: var(--blue-700);   border-color: var(--blue-200); }
.badge-success  { background: var(--green-100);  color: var(--green-700);  border-color: var(--color-success-border); }
.badge-warning  { background: var(--amber-100);  color: var(--amber-600);  border-color: var(--color-warning-border); }
.badge-error    { background: var(--red-100);    color: var(--red-700);    border-color: var(--color-error-border); }
.badge-info     { background: var(--cyan-100);   color: var(--cyan-600);   border-color: var(--color-info-border); }
.badge-neutral  { background: var(--gray-100);   color: var(--gray-600);   border-color: var(--gray-200); }
.badge-purple   { background: var(--purple-100); color: var(--purple-700); border-color: rgba(168, 85, 247, 0.25); }

/* Status badge (uppercase, slightly larger) */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.1875rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}
.status-badge.success {
    background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(5,150,105,.08));
    color: var(--green-700);
    border-color: var(--color-success-border);
}
.status-badge.warning {
    background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(217,119,6,.08));
    color: var(--amber-600);
    border-color: var(--color-warning-border);
}
.status-badge.error {
    background: linear-gradient(135deg, rgba(239,68,68,.08), rgba(220,38,38,.08));
    color: var(--red-700);
    border-color: var(--color-error-border);
}
.status-badge.info {
    background: linear-gradient(135deg, rgba(6,182,212,.08), rgba(8,145,178,.08));
    color: var(--cyan-600);
    border-color: var(--color-info-border);
}
.status-badge.default {
    background: var(--gray-100);
    color: var(--gray-600);
    border-color: var(--gray-200);
}

/* Status dot */
.status-dot {
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}
.status-dot.success { background: var(--color-success); }
.status-dot.warning { background: var(--color-warning); }
.status-dot.error   { background: var(--color-error); }
.status-dot.info    { background: var(--color-info); }
.status-dot.default { background: var(--slate-400); }

/* Nav badge (red pill count) */
.nav-item-badge {
    margin-left: auto;
    background: linear-gradient(135deg, var(--red-500), var(--red-600));
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.125rem 0.3125rem;
    border-radius: var(--radius-full);
    min-width: 1.125rem;
    height: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ================================================================
   12. MODALS & OVERLAYS
   ================================================================ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(3px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal {
    background: var(--color-surface);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 30rem;
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal-sm { max-width: 22rem; }
.modal-lg { max-width: 42rem; }
.modal-xl { max-width: 56rem; }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.modal-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}
.modal-body {
    padding: 1.25rem;
    overflow-y: auto;
    flex: 1;
}
.modal-footer {
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ================================================================
   13. SETTINGS FORMS
   ================================================================ */
.settings-section {
    animation: fadeUp 0.2s ease;
}

.section-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1.5px solid var(--color-border);
}
.section-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.section-title i, .section-title svg {
    width: 1.375rem;
    height: 1.375rem;
    color: var(--color-primary);
}
.section-description {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: var(--leading-relaxed, 1.625);
}

.settings-form { display: flex; flex-direction: column; gap: 1.25rem; }

/* Form card */
.form-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}

/* Subsection title inside a form card */
.subsection-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text);
    margin: 1.25rem 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.subsection-title:first-child { margin-top: 0; }
.subsection-title i, .subsection-title svg {
    width: var(--icon-sm);
    height: var(--icon-sm);
    color: var(--color-primary);
}

/* Form grid layout */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}
.form-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

/* Legacy class names */
.form-grid.two-columns   { grid-template-columns: repeat(2, 1fr); }
.form-grid.three-columns { grid-template-columns: repeat(3, 1fr); }

/* Form actions row */
.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 1.25rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

/* Event/notification rows */
.notification-events { display: flex; flex-direction: column; gap: 0.75rem; }
.event-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.event-item:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-xs); }
.event-info { flex: 1; }
.event-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.125rem;
}
.event-description {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    margin: 0;
}

/* ================================================================
   14. UTILITY PATTERNS
   ================================================================ */

/* Page header: title (left) + action buttons (right) */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}
.page-header-left  { min-width: 0; }
.page-header-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.page-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    line-height: var(--leading-tight, 1.25);
}
.page-subtitle {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    margin: 0.125rem 0 0;
}

/* Filter bar: search + selects in a row */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.filter-bar .form-input,
.filter-bar .form-select {
    height: var(--h-ctrl-sm);
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
}

/* Empty state */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem;
}
.empty-state-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    background: var(--color-surface-muted);
}
.empty-state-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.25rem;
}
.empty-state-desc {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 0 0 1rem;
}

/* Divider */
.divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 1.25rem 0;
}

/* Loading spinner */
.spinner {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--color-border-strong);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.65s linear infinite;
}
.spinner-sm { width: 1rem; height: 1rem; }
.spinner-lg { width: 2.25rem; height: 2.25rem; border-width: 3px; }

/* Page loading overlay */
.page-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.5rem;
}

/* Screen-reader only */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Truncate */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ================================================================
   15. TOOLTIP
   ================================================================ */
.tooltip {
    position: fixed;
    background: var(--gray-900);
    color: white;
    padding: 0.3125rem 0.625rem;
    border-radius: var(--radius);
    font-size: var(--text-xs);
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 10000;
    box-shadow: var(--shadow-md);
}

/* ================================================================
   16. ANIMATION
   ================================================================ */
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.animate-spin   { animation: spin 1s linear infinite; }
.animate-pulse  { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-fadeIn { animation: fadeIn 0.2s ease; }

/* ================================================================
   17. RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
    .form-grid.cols-3,
    .form-grid.three-columns { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    :root {
        --page-x: 1rem;
        --page-y: 1rem;
    }

    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    .stat-card-value { font-size: var(--text-2xl); }
    .quick-actions { grid-template-columns: repeat(2, 1fr); }
    .welcome-banner { padding: 1.5rem; }
    .welcome-banner-title { font-size: var(--text-2xl); }

    .modern-topbar { padding: 0 1rem; }
    .topbar-search { display: none; }

    .table-toolbar {
        padding: 0.75rem 1rem;
        flex-direction: column;
        align-items: stretch;
    }

    .data-table th,
    .data-table td,
    .modern-table th,
    .modern-table td { padding: 0.5rem 0.75rem; }

    .form-grid,
    .form-grid.cols-2,
    .form-grid.cols-3,
    .form-grid.two-columns,
    .form-grid.three-columns { grid-template-columns: 1fr; }

    .form-card { padding: 1rem; }

    .form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .form-actions .btn { width: 100%; justify-content: center; }

    .event-item { flex-direction: column; align-items: flex-start; }

    .page-header { flex-direction: column; align-items: flex-start; }
    .page-header-right { width: 100%; }
}

/* ================================================================
   18. SMALL UTILITIES
   ================================================================ */
.border-b-3 { border-bottom-width: 3px; }

@media (max-width: 640px) {
    .modal { border-radius: var(--radius-xl); }
    .modal-backdrop { padding: 0.5rem; align-items: flex-end; }
    .stats-grid { grid-template-columns: 1fr; }
}