/* AgriTrace platform — design system v2.
   Built around 6 ideas:
     1. A real grayscale ramp (50→950) instead of 4 magic gray tones.
     2. A primary brand ramp (deep emerald) + a warm secondary (amber)
        for accents and "good news" highlights — no more single-green
        monochrome.
     3. Type scale + tabular numerals on numeric values so columns line
        up the way agronomy ledgers should.
     4. Cards lift, buttons depress, tables scroll cleanly under sticky
        headers — every interactive element responds to the pointer.
     5. Dark mode that actually feels finished (deeper surfaces,
        brand-tinted active states, no muddy borders).
     6. Every existing class name (.btn, .kpi-card, .card, .table, etc.)
        keeps its contract — templates need zero changes.
*/

/* ──────────────────────────────────────────────────────────────────────────
   Design tokens
   ────────────────────────────────────────────────────────────────────────── */

:root {
    /* Brand — deep emerald (cocoa farm + tropical canopy palette). */
    --brand-50:  #ecfdf5;
    --brand-100: #d1fae5;
    --brand-200: #a7f3d0;
    --brand-300: #6ee7b7;
    --brand-400: #34d399;
    --brand-500: #10b981;
    --brand-600: #059669;
    --brand-700: #047857;
    --brand-800: #065f46;
    --brand-900: #064e3b;
    --brand-950: #022c22;

    /* Secondary — warm amber for "premium / specialty" accents. */
    --accent-amber-50:  #fffbeb;
    --accent-amber-100: #fef3c7;
    --accent-amber-300: #fcd34d;
    --accent-amber-500: #f59e0b;
    --accent-amber-700: #b45309;

    /* Cool blue — for info / link / map states. */
    --info-50:  #eff6ff;
    --info-100: #dbeafe;
    --info-300: #93c5fd;
    --info-500: #3b82f6;
    --info-700: #1d4ed8;

    /* Red — danger / blocked / critical risk. */
    --danger-50:  #fef2f2;
    --danger-100: #fee2e2;
    --danger-300: #fca5a5;
    --danger-500: #ef4444;
    --danger-700: #b91c1c;

    /* Yellow — warning / pending sync / overdue. */
    --warning-50:  #fefce8;
    --warning-100: #fef9c3;
    --warning-300: #fde047;
    --warning-500: #eab308;
    --warning-700: #a16207;

    /* Grayscale (slate-tinted — slightly cooler than pure neutral). */
    --gray-25:  #fafbfc;
    --gray-50:  #f6f7f9;
    --gray-100: #eceef2;
    --gray-200: #dee2e8;
    --gray-300: #c5cad3;
    --gray-400: #9aa1ad;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --gray-950: #0a0d14;

    /* Semantic aliases — the names every component uses. */
    --bg:           var(--gray-50);
    --bg-soft:      var(--gray-25);
    --surface:      #ffffff;
    --surface-2:    var(--gray-25);
    --surface-3:    var(--gray-50);
    --border:       var(--gray-200);
    --border-soft:  var(--gray-100);
    --text:         var(--gray-900);
    --text-strong:  #000;
    --text-muted:   var(--gray-500);
    --text-subtle:  var(--gray-400);

    --accent:        var(--brand-600);
    --accent-soft:   var(--brand-50);
    --accent-strong: var(--brand-700);
    --accent-hover:  var(--brand-700);

    --danger:        var(--danger-500);
    --danger-soft:   var(--danger-50);
    --warning:       var(--warning-700);
    --warning-soft:  var(--warning-50);
    --info:          var(--info-500);
    --info-soft:     var(--info-50);

    /* Elevation — softer, layered. */
    --shadow-xs: 0 1px 1px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06),
                 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07),
                 0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 12px 20px -8px rgba(15, 23, 42, 0.12),
                 0 4px 8px -4px rgba(15, 23, 42, 0.06);
    --shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.18);
    --shadow-glow-brand: 0 0 0 4px rgba(16, 185, 129, 0.18);

    /* Radius. */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 22px;
    --radius-pill: 999px;

    /* Spacing — single source of truth, used in calc(). */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;

    /* Layout. */
    --sidebar-w: 248px;
    --topbar-h: 68px;

    /* Motion. */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 120ms var(--ease-out);
    --transition: 180ms var(--ease-out);

    color-scheme: light;
}

[data-theme="dark"] {
    --bg:           #0b0f15;
    --bg-soft:      #0e131b;
    --surface:      #131923;
    --surface-2:    #161d28;
    --surface-3:    #1c2330;
    --border:       #232b39;
    --border-soft:  #1d2431;
    --text:         #e7eaef;
    --text-strong:  #ffffff;
    --text-muted:   #99a2b3;
    --text-subtle:  #6b7587;

    --accent:        var(--brand-400);
    --accent-soft:   #093327;
    --accent-strong: var(--brand-300);
    --accent-hover:  var(--brand-300);

    --danger:        var(--danger-300);
    --danger-soft:   #2a1417;
    --warning:       var(--warning-300);
    --warning-soft:  #2a2410;
    --info:          var(--info-300);
    --info-soft:     #122036;

    --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.45);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45),
                 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 6px 10px -1px rgba(0, 0, 0, 0.55),
                 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 14px 24px -8px rgba(0, 0, 0, 0.65),
                 0 4px 10px -4px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 26px 56px -12px rgba(0, 0, 0, 0.75);
    --shadow-glow-brand: 0 0 0 4px rgba(52, 211, 153, 0.22);

    color-scheme: dark;
}

/* ──────────────────────────────────────────────────────────────────────────
   Reset + base
   ────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv11";
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--accent-hover); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: var(--text);
    letter-spacing: -0.01em;
    font-weight: 700;
}
h1 { font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; }
h2 { font-size: 22px; line-height: 1.25; }
h3 { font-size: 17px; line-height: 1.3; }

p { margin: 0 0 var(--space-3); }

code {
    font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
    font-size: 0.92em;
    background: var(--surface-3);
    padding: 1px 6px;
    border-radius: var(--radius-xs);
}

/* Force tabular numerals on every number-bearing element so columns
   line up — agronomy ledgers and KPI cards both benefit. */
.kpi-value, .table td, .table th, .badge, .pagination,
input[type="number"], .num {
    font-variant-numeric: tabular-nums;
}

::selection {
    background: var(--brand-200);
    color: var(--brand-900);
}
[data-theme="dark"] ::selection {
    background: var(--brand-800);
    color: var(--brand-100);
}

/* Focus visibility — used by every interactive element. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* ──────────────────────────────────────────────────────────────────────────
   App shell — sidebar + main column
   ────────────────────────────────────────────────────────────────────────── */

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
    transition: grid-template-columns 220ms cubic-bezier(.2, .9, .3, 1);
}

/* Sidebar collapsed: the grid track shrinks to 0; the sidebar
   itself slides off to the left with a synchronised transform.
   Both transitions run at the same 220 ms cubic-bezier so the
   layout reflow + slide are perceived as one motion. */
.app-shell.is-sidebar-collapsed {
    grid-template-columns: 0 1fr;
}
.app-shell.is-sidebar-collapsed .sidebar {
    transform: translateX(calc(-1 * var(--sidebar-w)));
    visibility: hidden;
    pointer-events: none;
}

.sidebar {
    position: sticky; top: 0;
    height: 100vh;
    background: var(--surface);
    border-right: 1px solid var(--border-soft);
    padding: var(--space-5) 0 var(--space-4);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transition:
        transform 220ms cubic-bezier(.2, .9, .3, 1),
        visibility 0s linear 220ms;
    /* Subtle vertical brand stripe (decorative). */
    background-image: linear-gradient(
        180deg,
        var(--surface) 0%,
        var(--surface) 70%,
        var(--bg-soft) 100%
    );
}
.app-shell:not(.is-sidebar-collapsed) .sidebar {
    /* Inverse of the visibility delay so the sidebar is visible
       immediately when expanding (transform handles the motion). */
    transition:
        transform 220ms cubic-bezier(.2, .9, .3, 1),
        visibility 0s linear 0s;
}

.sidebar-header {
    padding: 0 var(--space-5) var(--space-5);
    border-bottom: 1px solid var(--border-soft);
}
.brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--text);
}
.brand:hover { text-decoration: none; color: var(--text); }
.brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    color: #fff !important;
    box-shadow: 0 4px 10px -2px rgba(5, 150, 105, 0.45);
    font-size: 18px;
    flex-shrink: 0;
}
.brand-icon .bi { color: #fff !important; }
.brand-text {
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.02em;
    line-height: 1.1;
    background: linear-gradient(135deg, var(--brand-700), var(--gray-900));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme="dark"] .brand-text {
    background: linear-gradient(135deg, var(--brand-300), #ffffff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-section { padding: var(--space-4) 0 var(--space-1); }
.nav-section-title {
    padding: 0 var(--space-5) var(--space-2);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-subtle);
}

.nav-items {
    list-style: none;
    padding: 0 var(--space-3);
    margin: 0;
}
.nav-item { margin: 2px 0; }
.nav-item a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 9px var(--space-3);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    transition: background var(--transition-fast),
                color var(--transition-fast),
                transform var(--transition-fast);
    position: relative;
}
.nav-item a:hover {
    background: var(--surface-3);
    text-decoration: none;
    color: var(--text);
    transform: translateX(1px);
}
.nav-item.active a {
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 600;
}
.nav-item.active a::before {
    content: '';
    position: absolute;
    left: -8px; top: 8px; bottom: 8px;
    width: 3px;
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
}
[data-theme="dark"] .nav-item.active a {
    background: rgba(52, 211, 153, 0.10);
    color: var(--brand-300);
}

.nav-icon {
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
    color: var(--text-muted);
    flex-shrink: 0;
    transition: color var(--transition-fast);
}
.nav-item.active .nav-icon { color: var(--accent); }
.nav-item a:hover .nav-icon { color: var(--text); }
.nav-icon .bi { font-size: 17px; }
.nav-label { flex: 1; }

/* ──────────────────────────────────────────────────────────────────────────
   Main column — topbar + content
   ────────────────────────────────────────────────────────────────────────── */

.main-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg);
}

.topbar {
    position: sticky; top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--border-soft);
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    padding: 0 var(--space-7);
}
[data-theme="dark"] .topbar { background: rgba(19, 25, 35, 0.88); }

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--space-5);
}
.page-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.02em;
}
.topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 10px 4px 4px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 13px;
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--transition-fast);
}
.user-chip:hover { box-shadow: var(--shadow-sm); }
.user-chip > .bi,
.user-chip .user-avatar {
    width: 26px; height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    flex-shrink: 0;
    text-transform: uppercase;
}
a.user-chip { color: var(--text); }
a.user-chip:hover { text-decoration: none; }
.user-chip-name { font-weight: 600; color: var(--text); }
.user-chip-tenant {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    padding: 2px 7px;
    background: var(--surface-3);
    border-radius: var(--radius-pill);
    text-transform: lowercase;
}

.season-switcher { display: flex; align-items: center; gap: var(--space-2); }
.season-switcher select {
    padding: 6px 28px 6px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3e%3cpath fill='%236b7280' d='M0 0l5 6 5-6z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition-fast),
                background var(--transition-fast),
                transform var(--transition-fast);
}
.theme-toggle:hover {
    color: var(--text);
    background: var(--surface-3);
    transform: rotate(8deg);
}
.theme-toggle .bi { font-size: 16px; }
[data-theme="dark"] .theme-toggle .bi-sun-fill { display: inline-block; }
[data-theme="dark"] .theme-toggle .bi-moon-fill { display: none; }
.theme-toggle .bi-sun-fill { display: none; }
.theme-toggle .bi-moon-fill { display: inline-block; }

/* Sidebar collapse/expand toggle. Lives at the start of .topbar-inner
   so it reads as "this controls the thing to my left". */
.sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    margin-right: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    flex: 0 0 auto;
    transition: color var(--transition-fast),
                background var(--transition-fast),
                border-color var(--transition-fast);
}
.sidebar-toggle:hover {
    color: var(--text);
    background: var(--surface-3);
    border-color: var(--border-strong, var(--border));
}
.sidebar-toggle:focus-visible {
    outline: 2px solid var(--accent, #0d9488);
    outline-offset: 2px;
}
.sidebar-toggle .bi { font-size: 16px; }

/* Show "collapse" arrow (chevrons-left) when expanded;
   "expand" arrow (chevrons-right) when collapsed.
   The button lives inside .app-shell so a descendant selector works. */
.sidebar-toggle .sidebar-toggle__expanded { display: inline-block; }
.sidebar-toggle .sidebar-toggle__collapsed { display: none; }
.app-shell.is-sidebar-collapsed .sidebar-toggle .sidebar-toggle__expanded {
    display: none;
}
.app-shell.is-sidebar-collapsed .sidebar-toggle .sidebar-toggle__collapsed {
    display: inline-block;
}

.content {
    padding: var(--space-7) var(--space-7);
    flex: 1;
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
}

/* ──────────────────────────────────────────────────────────────────────────
   Page header (h2 + actions)
   ────────────────────────────────────────────────────────────────────────── */

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-soft);
}
.page-header .page-header-title { display: flex; align-items: center; gap: var(--space-3); }
.page-header h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.page-header .page-header-meta {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}
.page-header .page-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Optional eyebrow tag above the page title — set by views via
   `<span class="kicker">…</span>` before <h2>. */
.kicker {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 3px 8px;
    border-radius: var(--radius-xs);
    margin-bottom: 6px;
}

/* ──────────────────────────────────────────────────────────────────────────
   KPI cards / stat tiles
   ────────────────────────────────────────────────────────────────────────── */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.kpi-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-5);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--transition),
                transform var(--transition),
                border-color var(--transition);
    overflow: hidden;
}
.kpi-card::before {
    /* Color-coded leading rail — primary (brand) by default. */
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--brand-400), var(--brand-700));
    opacity: 0.85;
}
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--border);
}
.kpi-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 600;
}
.kpi-value {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.05;
    margin-top: var(--space-2);
    color: var(--text);
    letter-spacing: -0.025em;
}
.kpi-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: var(--space-2);
}
.kpi-sub a {
    color: var(--accent);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.kpi-sub a:hover {
    text-decoration: none;
    gap: 6px;
}

/* Variant rails for color-coded KPI grids (use class alongside .kpi-card). */
.kpi-card.kpi-warning::before { background: linear-gradient(180deg, var(--warning-300), var(--warning-500)); }
.kpi-card.kpi-danger::before  { background: linear-gradient(180deg, var(--danger-300),  var(--danger-500));  }
.kpi-card.kpi-info::before    { background: linear-gradient(180deg, var(--info-300),    var(--info-500));    }
.kpi-card.kpi-amber::before   { background: linear-gradient(180deg, var(--accent-amber-300), var(--accent-amber-500)); }
.kpi-card.kpi-neutral::before { background: linear-gradient(180deg, var(--gray-300),    var(--gray-500));    }

/* ──────────────────────────────────────────────────────────────────────────
   Cards
   ────────────────────────────────────────────────────────────────────────── */

.card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: box-shadow var(--transition);
}
.card:hover { box-shadow: var(--shadow-sm); }
.card-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%);
}
.card-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: var(--text);
    letter-spacing: -0.005em;
}
.card-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 2px;
}
.card-body { padding: var(--space-5); }
.card-body > *:last-child { margin-bottom: 0; }
.card-body .table { margin: calc(var(--space-5) * -1); width: calc(100% + (var(--space-5) * 2)); }

/* ──────────────────────────────────────────────────────────────────────────
   Tables
   ────────────────────────────────────────────────────────────────────────── */

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
}
.table th, .table td {
    text-align: left;
    padding: 12px var(--space-4);
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
}
.table th {
    background: var(--surface-2);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    position: sticky;
    top: var(--topbar-h);
    z-index: 5;
}
.table th:first-child { padding-left: var(--space-5); }
.table th:last-child  { padding-right: var(--space-5); }
.table td:first-child { padding-left: var(--space-5); }
.table td:last-child  { padding-right: var(--space-5); }
.table tbody tr {
    transition: background var(--transition-fast);
}
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr.is-selected { background: var(--accent-soft); }

.table .col-select { width: 36px; padding-right: 0; }
.table .col-select input[type="checkbox"] { cursor: pointer; }

/* Numeric column helper — right-aligned + tabular numerals. */
.table .num,
.table .col-num,
.table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ──────────────────────────────────────────────────────────────────────────
   Badges
   ────────────────────────────────────────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 8px;
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 600;
    background: var(--surface-3);
    color: var(--text-muted);
    border: 1px solid transparent;
    line-height: 1.4;
    letter-spacing: 0.01em;
}
.badge::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
}
.badge .bi { font-size: 11px; opacity: 0.8; }
.badge.no-dot::before { display: none; }

.badge-success {
    background: var(--brand-50);
    color: var(--brand-700);
    border-color: var(--brand-100);
}
.badge-warning {
    background: var(--warning-50);
    color: var(--warning-700);
    border-color: var(--warning-100);
}
.badge-danger  {
    background: var(--danger-50);
    color: var(--danger-700);
    border-color: var(--danger-100);
}
.badge-info    {
    background: var(--info-50);
    color: var(--info-700);
    border-color: var(--info-100);
}
.badge-neutral {
    background: var(--surface-3);
    color: var(--text-muted);
    border-color: var(--border-soft);
}

[data-theme="dark"] .badge-success {
    background: rgba(52, 211, 153, 0.12);
    color: var(--brand-300);
    border-color: rgba(52, 211, 153, 0.25);
}
[data-theme="dark"] .badge-warning {
    background: rgba(234, 179, 8, 0.12);
    color: var(--warning-300);
    border-color: rgba(234, 179, 8, 0.25);
}
[data-theme="dark"] .badge-danger {
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger-300);
    border-color: rgba(239, 68, 68, 0.28);
}
[data-theme="dark"] .badge-info {
    background: rgba(59, 130, 246, 0.12);
    color: var(--info-300);
    border-color: rgba(59, 130, 246, 0.28);
}

/* ──────────────────────────────────────────────────────────────────────────
   Empty state
   ────────────────────────────────────────────────────────────────────────── */

.empty-state {
    text-align: center;
    padding: var(--space-8) var(--space-6);
    color: var(--text-muted);
    font-size: 14px;
}

.empty-state.empty-state-rich {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-9) var(--space-6);
}
.empty-state-rich .empty-icon {
    width: 64px; height: 64px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--brand-50), var(--surface));
    border: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-600);
    font-size: 28px;
    box-shadow: inset 0 0 0 4px var(--surface);
}
[data-theme="dark"] .empty-state-rich .empty-icon {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.12), var(--surface-2));
    color: var(--brand-300);
}
.empty-state-rich .empty-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.01em;
}
.empty-state-rich .empty-desc {
    font-size: 14px;
    color: var(--text-muted);
    max-width: 380px;
    text-align: center;
    margin: 0;
    line-height: 1.55;
}
.empty-state-rich .empty-action { margin-top: var(--space-3); }

/* ──────────────────────────────────────────────────────────────────────────
   Histogram bars (PES dashboard etc.)
   ────────────────────────────────────────────────────────────────────────── */

.histogram { display: flex; flex-direction: column; gap: var(--space-2); }
.histogram-row {
    display: grid;
    grid-template-columns: 100px 1fr 60px;
    align-items: center;
    gap: var(--space-3);
    font-size: 13px;
}
.histogram-label { color: var(--text-muted); font-weight: 500; }
.histogram-bar {
    background: var(--surface-3);
    border-radius: var(--radius-sm);
    height: 22px;
    position: relative;
    overflow: hidden;
}
.histogram-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
    border-radius: var(--radius-sm);
    transition: width 600ms var(--ease-out);
}
.histogram-count {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────────────────────────────────────
   Pagination
   ────────────────────────────────────────────────────────────────────────── */

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-soft);
    font-size: 13px;
    color: var(--text-muted);
    background: var(--surface-2);
}
.pagination .page-controls { display: flex; align-items: center; gap: 6px; }
.pagination .page-controls a,
.pagination .page-controls .current {
    padding: 5px 11px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-weight: 500;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.pagination .page-controls a:hover {
    background: var(--surface-3);
    text-decoration: none;
}
.pagination .page-controls .current {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.pagination .per-page select {
    padding: 5px 28px 5px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3e%3cpath fill='%236b7280' d='M0 0l5 6 5-6z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

/* ──────────────────────────────────────────────────────────────────────────
   Login page — animated brand gradient
   ────────────────────────────────────────────────────────────────────────── */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    position: relative;
    overflow: hidden;
    background: var(--bg);
}
.login-page::before,
.login-page::after {
    content: '';
    position: absolute;
    width: 460px; height: 460px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.45;
    z-index: 0;
}
.login-page::before {
    top: -160px; left: -120px;
    background: radial-gradient(circle, var(--brand-300), transparent 70%);
    animation: float-orb-a 18s ease-in-out infinite;
}
.login-page::after {
    bottom: -180px; right: -160px;
    background: radial-gradient(circle, var(--info-300), transparent 70%);
    animation: float-orb-b 22s ease-in-out infinite;
}
@keyframes float-orb-a {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(40px, 30px); }
}
@keyframes float-orb-b {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-30px, -40px); }
}

.login-card {
    position: relative;
    z-index: 1;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: var(--space-9) var(--space-7) var(--space-7);
    width: 100%;
    max-width: 420px;
}
.login-brand { text-align: center; margin-bottom: var(--space-6); }
.login-brand .brand-icon {
    display: inline-flex;
    width: 48px; height: 48px;
    margin-bottom: var(--space-2);
    font-size: 22px;
}
.login-brand h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.025em;
}
.login-subtitle {
    color: var(--text-muted);
    margin-top: 4px;
    font-size: 14px;
}

.login-form .form-group { margin-bottom: var(--space-3); }
.login-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text);
}
.login-form .form-control {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14.5px;
    font-family: inherit;
    background: var(--surface);
    color: var(--text);
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast);
}
.login-form .form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-glow-brand);
}
.login-submit {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 14.5px;
    cursor: pointer;
    margin-top: var(--space-2);
    transition: transform var(--transition-fast),
                box-shadow var(--transition-fast),
                filter var(--transition-fast);
    box-shadow: 0 6px 16px -4px rgba(5, 150, 105, 0.45);
}
.login-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -6px rgba(5, 150, 105, 0.55);
    filter: brightness(1.05);
}
.login-submit:active { transform: translateY(0); }

.login-footer {
    text-align: center;
    margin-top: var(--space-6);
    color: var(--text-muted);
    font-size: 12px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Alerts
   ────────────────────────────────────────────────────────────────────────── */

.alert {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    font-size: 13.5px;
    margin-bottom: var(--space-4);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    border: 1px solid;
}
.alert::before {
    font-family: 'bootstrap-icons';
    font-size: 18px;
    line-height: 1.3;
    flex-shrink: 0;
}
.alert-danger {
    background: var(--danger-50);
    color: var(--danger-700);
    border-color: var(--danger-100);
}
.alert-danger::before { content: '\f33a'; }
.alert-success {
    background: var(--brand-50);
    color: var(--brand-700);
    border-color: var(--brand-100);
}
.alert-success::before { content: '\f26b'; }
.alert-warning {
    background: var(--warning-50);
    color: var(--warning-700);
    border-color: var(--warning-100);
}
.alert-warning::before { content: '\f33b'; }
.alert-info {
    background: var(--info-50);
    color: var(--info-700);
    border-color: var(--info-100);
}
.alert-info::before { content: '\f431'; }

[data-theme="dark"] .alert-danger { background: rgba(239,68,68,0.12); color: var(--danger-300); border-color: rgba(239,68,68,0.3); }
[data-theme="dark"] .alert-success { background: rgba(52,211,153,0.12); color: var(--brand-300); border-color: rgba(52,211,153,0.3); }
[data-theme="dark"] .alert-warning { background: rgba(234,179,8,0.12); color: var(--warning-300); border-color: rgba(234,179,8,0.3); }
[data-theme="dark"] .alert-info { background: rgba(59,130,246,0.12); color: var(--info-300); border-color: rgba(59,130,246,0.3); }

/* ──────────────────────────────────────────────────────────────────────────
   Breadcrumbs
   ────────────────────────────────────────────────────────────────────────── */

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px var(--space-7);
    font-size: 12.5px;
    color: var(--text-muted);
    background: transparent;
    border-bottom: 1px solid var(--border-soft);
}
.breadcrumbs a { color: var(--text-muted); font-weight: 500; }
.breadcrumbs a:hover { color: var(--accent); text-decoration: none; }
.breadcrumbs .sep { opacity: 0.4; }
.breadcrumbs .current { color: var(--text); font-weight: 600; }

/* ──────────────────────────────────────────────────────────────────────────
   Module sub-nav (pill bar)
   ────────────────────────────────────────────────────────────────────────── */

.module-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: var(--space-3) var(--space-7);
    background: var(--surface);
    border-bottom: 1px solid var(--border-soft);
    overflow-x: auto;
    scrollbar-width: thin;
}
.module-nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: background var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast);
}
.module-nav a:hover {
    background: var(--surface-3);
    color: var(--text);
    text-decoration: none;
}
.module-nav a.active {
    background: var(--accent-soft);
    color: var(--accent-strong);
    border-color: var(--brand-100);
    font-weight: 600;
}
[data-theme="dark"] .module-nav a.active {
    background: rgba(52, 211, 153, 0.12);
    color: var(--brand-300);
    border-color: rgba(52, 211, 153, 0.25);
}
.module-nav .bi { font-size: 14px; }

/* ──────────────────────────────────────────────────────────────────────────
   Forms — list/detail/create shells, inputs, action bars
   ────────────────────────────────────────────────────────────────────────── */

.form-shell {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-6) var(--space-7) calc(var(--space-9) + var(--space-3));
    margin-bottom: var(--space-5);
    position: relative;
}
.form-shell .form-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-soft);
}
.form-shell .form-header h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.form-shell .form-header .form-meta {
    font-size: 12.5px;
    color: var(--text-muted);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4) var(--space-5);
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.form-group.full { grid-column: 1 / -1; }
.form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.form-group label .req { color: var(--danger); margin-left: 2px; }
.form-group .help-text {
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.45;
}
.form-group .form-error {
    font-size: 12.5px;
    color: var(--danger-700);
    display: flex;
    align-items: center;
    gap: 4px;
}
.form-group .form-error .bi { font-size: 13px; }

[data-theme="dark"] .form-group .form-error { color: var(--danger-300); }

.form-shell .form-control,
.form-shell .form-select,
.form-shell input[type="text"],
.form-shell input[type="email"],
.form-shell input[type="number"],
.form-shell input[type="password"],
.form-shell input[type="date"],
.form-shell input[type="datetime-local"],
.form-shell input[type="tel"],
.form-shell input[type="url"],
.form-shell input[type="search"],
.form-shell select,
.form-shell textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    background: var(--surface);
    color: var(--text);
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast),
                background var(--transition-fast);
}
.form-shell .form-control:hover,
.form-shell input:hover,
.form-shell select:hover,
.form-shell textarea:hover { border-color: var(--gray-400); }
.form-shell .form-control:focus,
.form-shell input:focus,
.form-shell select:focus,
.form-shell textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-glow-brand);
}
.form-shell .form-control.is-invalid,
.form-shell input.is-invalid,
.form-shell select.is-invalid,
.form-shell textarea.is-invalid {
    border-color: var(--danger);
}
.form-shell textarea { min-height: 110px; resize: vertical; }
.form-shell input[type="checkbox"],
.form-shell input[type="radio"] { width: auto; margin-right: 6px; }

/* ──────────────────────────────────────────────────────────────────────────
   Custom checkboxes + radios
   Native controls hidden, styled boxes drawn via ::before. Works in
   plain HTML forms — wrap with <label class="check"><input ...>label</label>
   or stand-alone in tables (.col-select). Existing markup using bare
   <input type="checkbox"> still gets the upgraded look without
   touching a single template.
   ──────────────────────────────────────────────────────────────────────── */

input[type="checkbox"],
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border: 1.5px solid var(--gray-300);
    background: var(--surface);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    margin: 0;
    transition: background var(--transition-fast),
                border-color var(--transition-fast),
                box-shadow var(--transition-fast),
                transform 80ms var(--ease-out);
    vertical-align: middle;
}
input[type="checkbox"] { border-radius: var(--radius-xs); }
input[type="radio"]    { border-radius: var(--radius-pill); }

input[type="checkbox"]:hover:not(:disabled),
input[type="radio"]:hover:not(:disabled) {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 0;
    border-color: var(--accent);
    box-shadow: var(--shadow-glow-brand);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}

/* Tick mark — drawn via SVG background so it scales cleanly. */
input[type="checkbox"]:checked::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M3 8l3.5 3.5L13 5'/%3e%3c/svg%3e");
    background-size: 13px 13px;
    background-repeat: no-repeat;
    background-position: center;
    animation: check-pop 160ms var(--ease-out);
}
input[type="radio"]:checked::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    animation: check-pop 160ms var(--ease-out);
}

@keyframes check-pop {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--surface-3);
    border-color: var(--border);
}

input[type="checkbox"]:indeterminate {
    background: var(--accent);
    border-color: var(--accent);
}
input[type="checkbox"]:indeterminate::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'%3e%3cpath d='M4 8h8'/%3e%3c/svg%3e");
    background-size: 13px 13px;
    background-repeat: no-repeat;
    background-position: center;
}

/* Aligned label wrapper — opt-in via .check / .radio classes.
   Still works on plain `<label>` with a nested input. */
label.check, label.radio {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: 14px;
    color: var(--text);
    user-select: none;
    line-height: 1.4;
}
label.check input[type="checkbox"],
label.radio input[type="radio"] {
    margin: 0;
}
label.check:has(input:disabled),
label.radio:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.7;
}

/* Switch variant — for binary toggles where the surface is the message.
   Use: <label class="switch"><input type="checkbox"><span></span> Active</label>
*/
label.switch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: 14px;
    user-select: none;
}
label.switch input[type="checkbox"] {
    appearance: none;
    width: 36px; height: 22px;
    border-radius: var(--radius-pill);
    background: var(--gray-300);
    border: 0;
    position: relative;
    cursor: pointer;
    transition: background var(--transition-fast);
    flex-shrink: 0;
}
label.switch input[type="checkbox"]::before {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 16px; height: 16px;
    border-radius: var(--radius-pill);
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition);
}
label.switch input[type="checkbox"]:checked {
    background: var(--accent);
}
label.switch input[type="checkbox"]:checked::before {
    transform: translateX(14px);
}
label.switch input[type="checkbox"]:focus-visible {
    box-shadow: var(--shadow-glow-brand);
}

/* Select-all-row in table headers gets a slight weight bump — the
   visual difference between a header checkbox and body checkbox helps
   operators not misclick. */
.table thead input[type="checkbox"] { border-color: var(--gray-400); }

.form-action-bar {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    margin: var(--space-6) calc(var(--space-7) * -1) calc(var(--space-6) * -1);
    padding: var(--space-4) var(--space-7);
    background: var(--surface);
    border-top: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    box-shadow: 0 -4px 14px rgba(15, 23, 42, 0.05);
}
.form-action-bar .left-actions,
.form-action-bar .right-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ──────────────────────────────────────────────────────────────────────────
   Buttons
   ────────────────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast),
                transform var(--transition-fast),
                box-shadow var(--transition-fast);
    white-space: nowrap;
    line-height: 1.2;
    font-family: inherit;
    letter-spacing: -0.005em;
}
.btn:hover {
    background: var(--surface-3);
    text-decoration: none;
    border-color: var(--gray-300);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
}
.btn .bi { font-size: 15px; }

.btn-primary {
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    color: #fff;
    border-color: var(--brand-700);
    box-shadow: 0 1px 2px rgba(5, 150, 105, 0.25);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--brand-600), var(--brand-800));
    border-color: var(--brand-800);
    color: #fff;
    box-shadow: 0 4px 10px -2px rgba(5, 150, 105, 0.45);
    transform: translateY(-1px);
}
.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(5, 150, 105, 0.25);
}

.btn-danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
    box-shadow: 0 1px 2px rgba(239, 68, 68, 0.25);
}
.btn-danger:hover {
    background: var(--danger-700);
    border-color: var(--danger-700);
    color: #fff;
    box-shadow: 0 4px 10px -2px rgba(239, 68, 68, 0.4);
    transform: translateY(-1px);
}

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

.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-sm .bi { font-size: 13px; }
.btn-lg { padding: 12px 20px; font-size: 15px; }

.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--radius-md);
}
.btn-icon.btn-sm { width: 30px; height: 30px; }

/* Button group — flush adjacent buttons. */
.btn-group {
    display: inline-flex;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.btn-group .btn { border-radius: 0; }
.btn-group .btn + .btn { border-left-width: 0; }
.btn-group .btn:first-child { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
.btn-group .btn:last-child { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }

/* ──────────────────────────────────────────────────────────────────────────
   Modal (Bootstrap overrides)
   ────────────────────────────────────────────────────────────────────────── */

.modal-content {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}
.modal-header {
    border-bottom: 1px solid var(--border-soft);
    padding: var(--space-4) var(--space-5);
}
.modal-header .modal-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.modal-body { padding: var(--space-5); font-size: 14px; }
.modal-body .consequence {
    background: var(--warning-50);
    border: 1px solid var(--warning-100);
    color: var(--warning-700);
    border-radius: var(--radius-sm);
    padding: 11px 13px;
    font-size: 13px;
    margin-bottom: var(--space-4);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}
[data-theme="dark"] .modal-body .consequence {
    background: rgba(234, 179, 8, 0.1);
    color: var(--warning-300);
    border-color: rgba(234, 179, 8, 0.28);
}
.modal-body .consequence .bi { font-size: 18px; flex-shrink: 0; }
.modal-body .typed-confirm-help {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.modal-body .typed-confirm-help code {
    background: var(--surface-3);
    color: var(--danger-700);
}
.modal-footer {
    border-top: 1px solid var(--border-soft);
    padding: var(--space-3) var(--space-5);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* ──────────────────────────────────────────────────────────────────────────
   Filter bar
   ────────────────────────────────────────────────────────────────────────── */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-xs);
}
.filter-bar .filter-search {
    flex: 1;
    min-width: 220px;
    position: relative;
}
.filter-bar .filter-search .bi {
    position: absolute;
    left: 11px; top: 50%;
    transform: translateY(-50%);
    color: var(--text-subtle);
}
.filter-bar .filter-search input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast);
}
.filter-bar .filter-search input::placeholder { color: var(--text-subtle); }
.filter-bar .filter-search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-glow-brand);
}
.filter-bar .filter-select {
    padding: 8px 30px 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3e%3cpath fill='%236b7280' d='M0 0l5 6 5-6z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 0 var(--space-4) var(--space-3);
    margin-top: -2px;
    margin-bottom: var(--space-3);
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent-strong);
    border: 1px solid var(--brand-100);
    font-size: 12px;
    font-weight: 500;
}
[data-theme="dark"] .filter-chip {
    background: rgba(52, 211, 153, 0.12);
    color: var(--brand-300);
    border-color: rgba(52, 211, 153, 0.25);
}
.filter-chip a {
    color: inherit; opacity: 0.7;
    line-height: 1; text-decoration: none;
}
.filter-chip a:hover { opacity: 1; }
.filter-chips .clear-all {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: 4px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Bulk action bar
   ────────────────────────────────────────────────────────────────────────── */

.bulk-action-bar {
    position: fixed;
    bottom: var(--space-6);
    left: calc(var(--sidebar-w) + var(--space-7));
    right: var(--space-7);
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 30;
    font-size: 13px;
    animation: bulk-bar-in 220ms var(--ease-out);
}
.bulk-action-bar.is-visible { display: flex; }
@keyframes bulk-bar-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.bulk-action-bar .bulk-count { font-weight: 700; }
.bulk-action-bar .bulk-actions {
    display: flex; gap: 6px; flex-wrap: wrap;
}
.bulk-action-bar .select-matching {
    color: var(--accent); font-size: 12.5px;
}

@media (max-width: 880px) {
    .bulk-action-bar {
        left: var(--space-3);
        right: var(--space-3);
        bottom: var(--space-3);
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Chart cards
   ────────────────────────────────────────────────────────────────────────── */

.chart-card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-4);
    transition: box-shadow var(--transition);
}
.chart-card:hover { box-shadow: var(--shadow-sm); }
.chart-card .chart-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 var(--space-3);
}
.chart-card .chart-canvas-wrap {
    position: relative;
    height: 240px;
}
.chart-card.tall .chart-canvas-wrap { height: 340px; }
.chart-card .chart-empty {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Skeleton loaders
   ────────────────────────────────────────────────────────────────────────── */

@keyframes skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton {
    background: linear-gradient(
        90deg,
        var(--surface-2) 0%,
        var(--gray-200) 50%,
        var(--surface-2) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-xs);
    color: transparent;
    user-select: none;
}
[data-theme="dark"] .skeleton {
    background: linear-gradient(
        90deg,
        var(--surface-2) 0%,
        var(--surface-3) 50%,
        var(--surface-2) 100%
    );
    background-size: 200% 100%;
}
.skeleton-line { height: 12px; margin: 6px 0; }
.skeleton-line.wide { width: 100%; }
.skeleton-line.med { width: 70%; }
.skeleton-line.short { width: 40%; }
.skeleton-block { height: 220px; }

/* ──────────────────────────────────────────────────────────────────────────
   Toasts
   ────────────────────────────────────────────────────────────────────────── */

.toast-region {
    position: fixed;
    bottom: var(--space-5);
    right: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    z-index: 1080;
    max-width: 380px;
}
.toast-msg {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-left: 4px solid var(--info);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 12px 14px;
    font-size: 13.5px;
    color: var(--text);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    animation: toast-in 240ms var(--ease-out) both;
}
.toast-msg.toast-success { border-left-color: var(--accent); }
.toast-msg.toast-error,
.toast-msg.toast-danger { border-left-color: var(--danger); }
.toast-msg.toast-warning { border-left-color: var(--warning); }
.toast-msg .bi { font-size: 17px; flex-shrink: 0; line-height: 1.3; }
.toast-msg.toast-success .bi { color: var(--accent); }
.toast-msg.toast-error .bi,
.toast-msg.toast-danger .bi { color: var(--danger); }
.toast-msg.toast-warning .bi { color: var(--warning); }
.toast-msg.toast-info .bi { color: var(--info); }
.toast-msg .toast-body { flex: 1; }
.toast-msg .toast-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0 4px;
    transition: color var(--transition-fast);
}
.toast-msg .toast-close:hover { color: var(--text); }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.toast-msg.is-leaving { animation: toast-out 200ms var(--ease-in-out) both; }
@keyframes toast-out {
    to { opacity: 0; transform: translateX(20px); }
}

/* ──────────────────────────────────────────────────────────────────────────
   Severity icon next to badge (color-blind safety)
   ────────────────────────────────────────────────────────────────────────── */

.badge .bi { font-size: 11px; margin-right: 2px; vertical-align: -1px; }

/* ──────────────────────────────────────────────────────────────────────────
   Utilities
   ────────────────────────────────────────────────────────────────────────── */

.text-muted { color: var(--text-muted); }
.text-subtle { color: var(--text-subtle); }
.text-success { color: var(--brand-700); }
[data-theme="dark"] .text-success { color: var(--brand-300); }
.text-danger { color: var(--danger-700); }
[data-theme="dark"] .text-danger { color: var(--danger-300); }
.text-right { text-align: right; }
.text-center { text-align: center; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* Subtle dotted divider — for "and now another section" inside a card. */
.divider {
    height: 0;
    border: 0;
    border-top: 1px dashed var(--border);
    margin: var(--space-4) 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   Responsive
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .content { padding: var(--space-5) var(--space-5); }
    .topbar { padding: 0 var(--space-5); }
    .breadcrumbs, .module-nav { padding-left: var(--space-5); padding-right: var(--space-5); }
}

@media (max-width: 880px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar {
        position: relative;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }
    .content { padding: var(--space-4); }
    .form-action-bar { margin: var(--space-4) calc(var(--space-4) * -1) calc(var(--space-4) * -1); padding: var(--space-3) var(--space-4); }
    .form-shell { padding: var(--space-4) var(--space-4) var(--space-9); }
    .breadcrumbs, .module-nav { padding: var(--space-2) var(--space-4); }
    .page-header { flex-direction: column; align-items: flex-start; }
    .kpi-card { padding: var(--space-4); }
    .kpi-value { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .login-page::before, .login-page::after { animation: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Page-level patterns (added 2026-05-08, owner feedback: alignment pass)
   ──────────────────────────────────────────────────────────────────────────

   Background: pages were authored with a mix of Bootstrap 5 grid
   (`.row` / `.col-md-*`) and ad-hoc inline `style="gap:Npx"` /
   `style="padding:Npx;border:..."`. Two consequences:

     - Bootstrap's grid uses negative-margin gutters; layering a CSS
       `gap` on top causes column overlap on some viewports.
     - Inline-styled "boxes" duplicate `.card` without the design
       tokens (shadow, border-soft, hover transition), so the page
       looks consistent at a glance but breaks under inspection.

   The classes below are utility primitives the survey UX pass
   (and any module that follows the same recipe) should reach for
   instead of inline styling. Each one solves a specific recurring
   layout, with explicit gutter handling that doesn't fight
   Bootstrap.
*/

/* `.shortcut-banner` — a callout strip that lives above a form or
   list and tells the user "this page does X, but the related Y lives
   over there." Use on edit pages to surface the related canvas /
   builder / queue. */
.shortcut-banner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-left: 4px solid var(--accent, #0d9488);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-xs);
}
.shortcut-banner__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 20px;
}
.shortcut-banner__body { flex: 1; min-width: 0; }
.shortcut-banner__title {
    margin: 0 0 2px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}
.shortcut-banner__sub {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}
.shortcut-banner__actions {
    flex: 0 0 auto;
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
@media (max-width: 720px) {
    .shortcut-banner { flex-direction: column; align-items: flex-start; }
    .shortcut-banner__actions { width: 100%; }
}

/* `.path-grid` + `.path-card` — empty-state pattern that offers two
   or more equally-weighted next steps (e.g. "build from scratch" vs
   "import XLSForm"). Uses CSS Grid with `auto-fit` so it collapses
   to one column on narrow viewports without us having to reach for
   the Bootstrap row/col system (which fought our `gap`). */
.path-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-3);
}
.path-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    transition: box-shadow var(--transition), border-color var(--transition);
}
.path-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--accent-soft-strong, var(--accent-soft));
}
.path-card__title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.path-card__title i { color: var(--accent); font-size: 18px; }
.path-card__sub {
    flex: 1;
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}
.path-card__actions {
    margin-top: var(--space-3);
    display: flex;
    gap: var(--space-2);
}

/* `.toolbar-row` — small flex utility for an "input + clear + button"
   inline group inside a card header. Replaces ad-hoc
   `style="display:flex;gap:6px"`. */
.toolbar-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.toolbar-row > .form-control,
.toolbar-row > .form-select { min-width: 200px; }

/* `.tag-list` — for inline lists of `<code>` chips (e.g. cascading-
   dataset levels) inside a meta line. Replaces ad-hoc inline
   margin-right on each chip. */
.tag-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
}
.tag-list code {
    background: var(--surface-2);
    color: var(--text);
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    font-size: 11.5px;
}

/* `.card` originally had `overflow: hidden` to round nested content
   like tables. That clipped popovers (e.g. the expression-editor
   reference picker) and made Bootstrap's negative-margin row
   gutters bleed-clip. Switch to `clip` (same visual rounding, but
   doesn't break absolutely-positioned descendants in browsers that
   support it; falls back to hidden everywhere else). */
.card { overflow: clip; }

/* Restore the table overflow guard, since `.card { overflow: clip }`
   alone allows wide tables to bust out of the rounded card edge. */
.card-body .table-responsive { overflow-x: auto; }