/* ==========================================================================
   TICKETGO — ENTERPRISE DESIGN SYSTEM v2
   ==========================================================================
   - Modular color scale (50–900 per family)
   - Modular type scale
   - 4/8 px spacing rhythm
   - Realistic elevation
   - Animation/motion tokens
   - WCAG AA focus rings
   - Component primitives: cards, buttons, forms, tables, badges, tooltips,
     dropdowns, modals, skeletons, toasts, empty-state, KPI tiles, sparkline,
     stepper, breadcrumb, tabs, pill segmented control.
   ========================================================================== */

/* ---- DESIGN TOKENS ------------------------------------------------------- */
:root {
    /* Color — Brand (modern indigo-blue) */
    --c-primary-50:  #eef4ff;
    --c-primary-100: #dbe7fe;
    --c-primary-200: #bfd2fe;
    --c-primary-300: #93b4fd;
    --c-primary-400: #608bfa;
    --c-primary-500: #3a66f5;
    --c-primary-600: #2451e9;
    --c-primary-700: #1d3fd5;
    --c-primary-800: #1f37ad;
    --c-primary-900: #1f3389;

    /* Color — Neutral (cool gray, slate-aligned) */
    --c-neutral-0:   #ffffff;
    --c-neutral-25:  #fcfcfd;
    --c-neutral-50:  #f8fafc;
    --c-neutral-100: #f1f5f9;
    --c-neutral-200: #e2e8f0;
    --c-neutral-300: #cbd5e1;
    --c-neutral-400: #94a3b8;
    --c-neutral-500: #64748b;
    --c-neutral-600: #475569;
    --c-neutral-700: #334155;
    --c-neutral-800: #1e293b;
    --c-neutral-900: #0f172a;
    --c-neutral-950: #020617;

    /* Color — Semantic */
    --c-success-50:  #ecfdf5;
    --c-success-100: #d1fae5;
    --c-success-500: #10b981;
    --c-success-600: #059669;
    --c-success-700: #047857;

    --c-warning-50:  #fffbeb;
    --c-warning-100: #fef3c7;
    --c-warning-500: #f59e0b;
    --c-warning-600: #d97706;
    --c-warning-700: #b45309;

    --c-danger-50:   #fef2f2;
    --c-danger-100:  #fee2e2;
    --c-danger-500:  #ef4444;
    --c-danger-600:  #dc2626;
    --c-danger-700:  #b91c1c;

    --c-info-50:     #eff6ff;
    --c-info-100:    #dbeafe;
    --c-info-500:    #3b82f6;
    --c-info-600:    #2563eb;
    --c-info-700:    #1d4ed8;

    --c-purple-50:   #f5f3ff;
    --c-purple-100:  #ede9fe;
    --c-purple-500:  #8b5cf6;
    --c-purple-600:  #7c3aed;
    --c-purple-700:  #6d28d9;

    --c-teal-50:     #f0fdfa;
    --c-teal-100:    #ccfbf1;
    --c-teal-500:    #14b8a6;
    --c-teal-600:    #0d9488;

    --c-pink-50:     #fdf2f8;
    --c-pink-100:    #fce7f3;
    --c-pink-500:    #ec4899;
    --c-pink-600:    #db2777;

    /* Surface aliases */
    --c-bg:           var(--c-neutral-50);
    --c-bg-subtle:    var(--c-neutral-100);
    --c-surface:      var(--c-neutral-0);
    --c-surface-2:    var(--c-neutral-25);
    --c-surface-alt:  #fafbfc;
    --c-border:       var(--c-neutral-200);
    --c-border-strong: var(--c-neutral-300);
    --c-divider:      var(--c-neutral-100);

    /* Text aliases */
    --c-fg:           var(--c-neutral-900);
    --c-fg-secondary: var(--c-neutral-600);
    --c-fg-muted:     var(--c-neutral-500);
    --c-fg-subtle:    var(--c-neutral-400);
    --c-fg-on-brand:  #ffffff;

    /* Convenience legacy aliases (so old class refs still work) */
    --primary:        var(--c-primary-600);
    --primary-hover:  var(--c-primary-700);
    --primary-light:  var(--c-primary-50);
    --primary-soft:   var(--c-primary-50);
    --success:        var(--c-success-600);
    --success-light:  var(--c-success-50);
    --warning:        var(--c-warning-600);
    --warning-light:  var(--c-warning-50);
    --danger:         var(--c-danger-600);
    --danger-light:   var(--c-danger-50);
    --info:           var(--c-info-600);
    --info-light:     var(--c-info-50);
    --purple:         var(--c-purple-600);
    --purple-light:   var(--c-purple-50);
    --teal:           var(--c-teal-600);
    --teal-light:     var(--c-teal-50);
    --pink:           var(--c-pink-600);
    --pink-light:     var(--c-pink-50);
    --bg:             var(--c-bg);
    --bg-alt:         var(--c-surface-alt);
    --card:           var(--c-surface);
    --border:         var(--c-border);
    --border-light:   var(--c-divider);
    --text:           var(--c-fg);
    --text-secondary: var(--c-fg-secondary);
    --text-muted:     var(--c-fg-muted);

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --fs-xs:   11px;
    --fs-sm:   12px;
    --fs-base: 13px;
    --fs-md:   14px;
    --fs-lg:   16px;
    --fs-xl:   18px;
    --fs-2xl:  22px;
    --fs-3xl:  28px;
    --fs-4xl:  34px;

    --lh-tight:   1.2;
    --lh-snug:    1.35;
    --lh-normal:  1.5;
    --lh-relaxed: 1.65;

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* Spacing (4 px rhythm) */
    --sp-0:   0;
    --sp-0_5: 2px;
    --sp-1:   4px;
    --sp-1_5: 6px;
    --sp-2:   8px;
    --sp-3:   12px;
    --sp-4:   16px;
    --sp-5:   20px;
    --sp-6:   24px;
    --sp-7:   28px;
    --sp-8:   32px;
    --sp-10:  40px;
    --sp-12:  48px;
    --sp-16:  64px;
    --sp-20:  80px;

    /* Radius */
    --radius-xs: 3px;
    --radius-sm: 5px;
    --radius:    7px;
    --radius-md: 9px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    /* Elevation (cooler shadows) */
    --shadow-xs: 0 1px 1px rgba(15, 23, 42, .04);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 1px rgba(15, 23, 42, .03);
    --shadow:    0 1px 3px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-md: 0 4px 8px -2px rgba(15, 23, 42, .08), 0 2px 4px -2px rgba(15, 23, 42, .05);
    --shadow-lg: 0 12px 24px -6px rgba(15, 23, 42, .12), 0 4px 8px -2px rgba(15, 23, 42, .06);
    --shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, .18), 0 8px 16px -4px rgba(15, 23, 42, .08);
    --shadow-overlay: 0 24px 64px -16px rgba(15, 23, 42, .22), 0 12px 32px -8px rgba(15, 23, 42, .12);
    --shadow-ring-brand: 0 0 0 4px rgba(36, 81, 233, .12);
    --shadow-ring-danger: 0 0 0 4px rgba(220, 38, 38, .12);

    /* Motion */
    --ease-out:    cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --dur-fast:    120ms;
    --dur-base:    180ms;
    --dur-slow:    280ms;

    /* Layout */
    --sidebar-w:           260px;
    --sidebar-w-collapsed: 64px;
    --topbar-h:            60px;
    --content-max:         1480px;
    --content-pad:         24px;
    --z-sidebar:           20;
    --z-topbar:            30;
    --z-overlay:           40;
    --z-modal:             50;
    --z-toast:             60;
    --z-tooltip:           70;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- RESET / BASE -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body.tg-body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--c-fg);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'ss01' 1, 'cv11' 1;
}
.tg-body a { color: var(--c-primary-600); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.tg-body a:hover { color: var(--c-primary-700); text-decoration: underline; text-underline-offset: 2px; }
.tg-body button { font-family: inherit; cursor: pointer; border: none; background: none; }
.tg-body input, .tg-body select, .tg-body textarea { font-family: inherit; font-size: inherit; color: inherit; }
.tg-body h1, .tg-body h2, .tg-body h3, .tg-body h4, .tg-body h5, .tg-body h6 {
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color: var(--c-fg);
    margin: 0;
    letter-spacing: -0.011em;
}
.tg-body h1 { font-size: var(--fs-2xl); letter-spacing: -0.022em; }
.tg-body h2 { font-size: var(--fs-xl); letter-spacing: -0.018em; }
.tg-body h3 { font-size: var(--fs-lg); }
.tg-body h4 { font-size: var(--fs-md); }
.tg-body :focus-visible {
    outline: 2px solid var(--c-primary-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Selection */
.tg-body ::selection { background: var(--c-primary-100); color: var(--c-primary-900); }

/* ---- APP SHELL ----------------------------------------------------------- */
.app { display: flex; min-height: 100vh; }

/* ===== SIDEBAR ===== */
.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: linear-gradient(180deg, #0a1227 0%, #0f172a 100%);
    color: rgba(255, 255, 255, .72);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255, 255, 255, .04);
    transition: width var(--dur-slow) var(--ease-out);
    z-index: var(--z-sidebar);
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .08); border-radius: 4px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .15); }

.sidebar-brand {
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    position: sticky;
    top: 0;
    background: rgba(10, 18, 39, .9);
    backdrop-filter: blur(12px);
    z-index: 1;
}
.brand-logo {
    width: 34px; height: 34px;
    /* Monochrome: white face on the dark sidebar */
    background: #ffffff;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f172a;
    font-weight: var(--fw-bold);
    font-size: 14px;
    box-shadow: 0 6px 16px rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(15, 23, 42, .06);
    letter-spacing: -0.02em;
}
.brand-name { color: white; font-weight: var(--fw-semibold); font-size: var(--fs-md); letter-spacing: -0.01em; }
.brand-tag { color: rgba(255, 255, 255, .42); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: var(--fw-semibold); margin-top: 1px; }

.nav-section { padding: 12px 10px 4px; }
.nav-section-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, .35);
    padding: 10px 14px 6px;
    font-weight: var(--fw-semibold);
}
.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 14px;
    border-radius: var(--radius);
    color: rgba(255, 255, 255, .72);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    user-select: none;
    margin-bottom: 1px;
    text-decoration: none;
    position: relative;
}
.nav-item:hover { background: rgba(255, 255, 255, .05); color: white; text-decoration: none; }
.nav-item.active {
    /* Monochrome white pill on dark sidebar — replaces the blue gradient */
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 6px 18px -6px rgba(255, 255, 255, .18),
                inset 0 -1px 0 rgba(15, 23, 42, .04);
    font-weight: var(--fw-semibold);
}
.nav-item.active::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    background: #ffffff;
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 10px rgba(255, 255, 255, .65);
}
.nav-item i { font-size: 18px; width: 18px; flex-shrink: 0; opacity: .85; }
.nav-item.active i { opacity: 1; color: #1d3fd5; }
.nav-item .nav-badge {
    margin-left: auto;
    background: rgba(255, 255, 255, .1);
    color: white;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    font-weight: var(--fw-semibold);
}
.nav-item.active .nav-badge { background: rgba(15, 23, 42, .12); color: #0f172a; }

/* Sidebar collapsed (data-collapsed on body) */
body.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); }
body.sidebar-collapsed .sidebar .brand-name,
body.sidebar-collapsed .sidebar .brand-tag,
body.sidebar-collapsed .sidebar .nav-section-title,
body.sidebar-collapsed .sidebar .nav-item span:not(.nav-badge),
body.sidebar-collapsed .sidebar .nav-item .nav-badge,
body.sidebar-collapsed .sidebar .ws-tile-info,
body.sidebar-collapsed .sidebar .ws-tile-chev,
body.sidebar-collapsed .sidebar .sb-search,
body.sidebar-collapsed .sidebar .sb-section-toggle .ti-chevron-down,
body.sidebar-collapsed .sidebar .sb-status,
body.sidebar-collapsed .sidebar .sb-user-info,
body.sidebar-collapsed .sidebar .sb-fav-btn,
body.sidebar-collapsed .sidebar .nav-empty { display: none; }
body.sidebar-collapsed .sidebar-brand,
body.sidebar-collapsed .sidebar .ws-tile { justify-content: center; padding: 14px 8px; }
body.sidebar-collapsed .nav-item { justify-content: center; padding: 10px; }
body.sidebar-collapsed .sidebar .sb-footer { padding: 10px; justify-content: center; }
body.sidebar-collapsed .sidebar .sb-user { padding: 6px; justify-content: center; }

/* ========== SIDEBAR v2 — Workspace switcher / search / favorites / footer ========== */

/* Workspace switcher tile (replaces brand block) */
.ws-tile {
    margin: 10px;
    padding: 10px 12px;
    display: flex; align-items: center; gap: 11px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.06);
    color: white;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
    position: relative;
}
.ws-tile:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); text-decoration: none; }
.ws-tile-logo {
    width: 32px; height: 32px;
    /* Monochrome — white face on the dark sidebar */
    background: #ffffff;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #0f172a; font-weight: 700; font-size: 13px;
    box-shadow: 0 6px 14px rgba(255,255,255,.12), inset 0 -1px 0 rgba(15,23,42,.06);
    flex-shrink: 0;
    letter-spacing: -0.02em;
}
.ws-tile-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; flex: 1; }
.ws-tile-name {
    font-weight: var(--fw-semibold); font-size: var(--fs-md);
    letter-spacing: -0.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ws-tile-meta {
    font-size: 10px; color: rgba(255,255,255,.45);
    text-transform: uppercase; letter-spacing: 0.08em;
    font-weight: var(--fw-semibold); margin-top: 1px;
}
.ws-tile-chev {
    color: rgba(255,255,255,.4); font-size: 16px; flex-shrink: 0;
    transition: transform var(--dur-fast) var(--ease-out);
}
.ws-tile.open .ws-tile-chev { transform: rotate(180deg); color: rgba(255,255,255,.7); }

/* Workspace dropdown */
.ws-menu {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: #111a30; border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-md); padding: 5px;
    box-shadow: 0 20px 40px rgba(0,0,0,.45);
    z-index: 10;
    opacity: 0; transform: translateY(-4px); pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ws-tile.open + .ws-menu, .ws-menu.open {
    opacity: 1; transform: translateY(0); pointer-events: auto;
}
.ws-menu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: var(--radius);
    color: rgba(255,255,255,.8); font-size: var(--fs-base);
    cursor: pointer; transition: background var(--dur-fast) var(--ease-out);
    text-decoration: none;
}
.ws-menu-item:hover { background: rgba(255,255,255,.05); color: white; text-decoration: none; }
.ws-menu-item.active { background: rgba(58,102,245,.18); color: white; }
.ws-menu-item .ti-check { margin-left: auto; color: var(--c-primary-400); }
.ws-menu-divider { height: 1px; background: rgba(255,255,255,.06); margin: 4px 0; }
.ws-menu-section { padding: 6px 12px 2px; font-size: 10px; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--fw-semibold); }

/* Sidebar quick search */
.sb-search {
    margin: 0 10px 4px;
    position: relative;
}
.sb-search input {
    width: 100%; height: 32px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--radius);
    padding: 0 32px 0 32px;
    color: white; font-size: var(--fs-sm);
    transition: all var(--dur-fast) var(--ease-out);
}
.sb-search input::placeholder { color: rgba(255,255,255,.35); }
.sb-search input:focus {
    outline: none;
    background: rgba(255,255,255,.07);
    border-color: rgba(58,102,245,.5);
    box-shadow: 0 0 0 3px rgba(58,102,245,.15);
}
.sb-search > i {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: rgba(255,255,255,.45); font-size: 14px;
    pointer-events: none;
}
.sb-search kbd {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.06); color: rgba(255,255,255,.5);
    border: 1px solid rgba(255,255,255,.08);
    padding: 1px 5px; border-radius: 3px;
    font-size: 9px; font-family: var(--font-mono);
    line-height: 1.6;
}

/* Section header (collapsible) */
.sb-section-toggle {
    display: flex; align-items: center; gap: 6px;
    width: 100%; padding: 8px 14px 6px;
    background: none; border: none;
    color: rgba(255,255,255,.35);
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out);
}
.sb-section-toggle:hover { color: rgba(255,255,255,.7); }
.sb-section-toggle .ti-chevron-down {
    margin-left: auto; font-size: 14px;
    transition: transform var(--dur-fast) var(--ease-out);
}
.nav-section.collapsed .sb-section-toggle .ti-chevron-down { transform: rotate(-90deg); }
.nav-section-items {
    overflow: hidden;
    max-height: 800px;
    transition: max-height var(--dur-slow) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-section.collapsed .nav-section-items {
    max-height: 0;
    opacity: 0;
}

/* Hover-revealed star button on nav items */
.sidebar .nav-item { position: relative; }
.sb-fav-btn {
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    width: 22px; height: 22px;
    border-radius: var(--radius-xs);
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.3);
    background: none; border: none; cursor: pointer;
    opacity: 0;
    transition: all var(--dur-fast) var(--ease-out);
}
.sidebar .nav-item:hover .sb-fav-btn,
.sb-fav-btn.is-fav { opacity: 1; }
.sb-fav-btn:hover { background: rgba(255,255,255,.08); color: #fbbf24; }
.sb-fav-btn.is-fav { color: #fbbf24; }
.sb-fav-btn i { font-size: 14px; }

/* Empty state inside the favorites section */
.nav-empty {
    padding: 6px 14px 8px;
    font-size: 11px; color: rgba(255,255,255,.3);
    font-style: italic;
}

/* Footer block — status + user mini */
.sb-footer {
    margin-top: auto;
    padding: 10px;
    border-top: 1px solid rgba(255,255,255,.05);
    display: flex; flex-direction: column; gap: 8px;
    background: rgba(0,0,0,.18);
}
.sb-status {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 10px;
    background: rgba(16,185,129,.1);
    border: 1px solid rgba(16,185,129,.18);
    border-radius: 999px;
    color: #6ee7b7;
    font-size: 10px;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    align-self: flex-start;
}
.sb-status-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 0 rgba(52,211,153,.5);
    animation: sb-status-pulse 2.2s ease-out infinite;
}
@keyframes sb-status-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,.5); }
    50%      { box-shadow: 0 0 0 5px rgba(52,211,153,0); }
}

.sb-user {
    display: flex; align-items: center; gap: 10px;
    padding: 8px;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.05);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
    text-decoration: none;
}
.sb-user:hover { background: rgba(255,255,255,.06); text-decoration: none; }
.sb-user-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(135deg, var(--c-info-500), var(--c-purple-500));
    display: inline-flex; align-items: center; justify-content: center;
    color: white; font-weight: var(--fw-semibold); font-size: 11px;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
    letter-spacing: -0.02em;
}
.sb-user-info { line-height: 1.15; min-width: 0; flex: 1; }
.sb-user-name { color: white; font-size: var(--fs-sm); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-user-role { color: rgba(255,255,255,.4); font-size: 10px; }
.sb-user-action {
    color: rgba(255,255,255,.4); font-size: 16px;
    transition: color var(--dur-fast) var(--ease-out);
}
.sb-user:hover .sb-user-action { color: rgba(255,255,255,.8); }

/* Tooltip when sidebar collapsed (icon-only) */
body.sidebar-collapsed .sidebar .nav-item:hover::after {
    content: attr(data-tt);
    position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%);
    background: var(--c-neutral-900); color: white;
    padding: 5px 10px; border-radius: var(--radius-sm);
    font-size: var(--fs-xs); white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    font-weight: var(--fw-medium);
}
body.sidebar-collapsed .sidebar .nav-item:hover::before {
    content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
    border: 5px solid transparent; border-right-color: var(--c-neutral-900);
}
/* Active glow indicator (left edge) — already on .nav-item.active::before, but
   in collapsed mode our tooltip uses ::before, so suppress that. */
body.sidebar-collapsed .sidebar .nav-item.active::before { display: none; }
body.sidebar-collapsed .sidebar .nav-item.active { position: relative; }
body.sidebar-collapsed .sidebar .nav-item.active::after { /* keep tooltip on hover only */ }

/* ===== MAIN COLUMN ===== */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ===== TOPBAR ===== */
.topbar {
    height: var(--topbar-h);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border-bottom: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    padding: 0 var(--content-pad);
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: var(--z-topbar);
}
.topbar-toggle {
    width: 36px; height: 36px;
    border-radius: var(--radius);
    color: var(--c-fg-secondary);
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.topbar-toggle:hover { background: var(--c-neutral-100); color: var(--c-fg); }
.topbar-toggle i { font-size: 20px; }

.topbar-search { flex: 1; max-width: 480px; position: relative; }
.topbar-search input {
    width: 100%;
    height: 36px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 0 12px 0 38px;
    background: var(--c-neutral-50);
    color: var(--c-fg);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
    font-size: var(--fs-base);
}
.topbar-search input::placeholder { color: var(--c-fg-muted); }
.topbar-search input:focus {
    outline: none;
    border-color: var(--c-primary-500);
    background: white;
    box-shadow: var(--shadow-ring-brand);
}
.topbar-search i {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--c-fg-muted); font-size: 18px;
}
.topbar-search kbd {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: var(--c-neutral-100); color: var(--c-fg-muted);
    border: 1px solid var(--c-border);
    padding: 1px 6px; border-radius: var(--radius-xs);
    font-size: 10px; font-family: var(--font-mono);
}

.topbar-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.icon-btn {
    width: 36px; height: 36px; border-radius: var(--radius-md);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--c-fg-secondary); position: relative;
    background: none; border: none; cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    text-decoration: none;
}
.icon-btn:hover { background: var(--c-neutral-100); color: var(--c-fg); }
.icon-btn:active { transform: scale(.96); }
.icon-btn .dot {
    position: absolute; top: 7px; right: 7px;
    width: 8px; height: 8px;
    background: var(--c-danger-500);
    border-radius: 50%;
    border: 2px solid white;
    animation: tg-pulse 2s var(--ease-out) infinite;
}
@keyframes tg-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .5); }
    50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
}
.icon-btn i { font-size: 18px; }

.user-menu {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 10px 4px 4px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
    margin-left: 4px;
    border: 1px solid transparent;
}
.user-menu:hover { background: var(--c-neutral-100); border-color: var(--c-border); }
.avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--c-info-500), var(--c-purple-500));
    display: inline-flex; align-items: center; justify-content: center;
    color: white; font-weight: var(--fw-semibold); font-size: 12px;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
    letter-spacing: -0.02em;
}
.avatar-xs { width: 20px; height: 20px; font-size: 9px; }
.avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.avatar-lg { width: 48px; height: 48px; font-size: 16px; }
.avatar-xl { width: 64px; height: 64px; font-size: 20px; }
.user-info { line-height: 1.2; }
.user-name { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--c-fg); }
.user-role { font-size: var(--fs-xs); color: var(--c-fg-muted); margin-top: 1px; }

/* ===== PAGE CONTAINER ===== */
.page-container { padding: var(--sp-6) var(--content-pad); max-width: var(--content-max); margin: 0 auto; width: 100%; }

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--sp-6);
    gap: var(--sp-4);
    flex-wrap: wrap;
}
.page-title-group h1 { font-size: var(--fs-2xl); margin-bottom: 4px; letter-spacing: -0.022em; }
.page-subtitle { font-size: var(--fs-base); color: var(--c-fg-secondary); }

/* Breadcrumb */
.breadcrumb {
    font-size: var(--fs-sm);
    color: var(--c-fg-muted);
    margin-bottom: 6px;
    padding: 0;
    background: none;
    display: flex; align-items: center; gap: 6px;
}
.breadcrumb a { color: var(--c-fg-muted); }
.breadcrumb a:hover { color: var(--c-fg-secondary); text-decoration: none; }

/* ---- BUTTONS ----------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    border: 1px solid transparent;
    background: var(--c-surface);
    color: var(--c-fg);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    white-space: nowrap;
    text-decoration: none;
    letter-spacing: -0.005em;
}
.btn:hover { background: var(--c-neutral-50); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn:focus-visible { box-shadow: var(--shadow-ring-brand); outline: none; }
.btn i { font-size: 16px; }

.btn-primary {
    background: linear-gradient(180deg, var(--c-primary-500), var(--c-primary-600));
    color: white;
    border-color: var(--c-primary-600);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .15);
}
.btn-primary:hover {
    background: linear-gradient(180deg, var(--c-primary-600), var(--c-primary-700));
    border-color: var(--c-primary-700);
    color: white;
}
.btn-outline {
    border-color: var(--c-border);
    background: var(--c-surface);
    color: var(--c-fg);
}
.btn-outline:hover { background: var(--c-neutral-50); border-color: var(--c-border-strong); }
.btn-ghost { background: transparent; color: var(--c-fg-secondary); }
.btn-ghost:hover { background: var(--c-neutral-100); color: var(--c-fg); }
.btn-danger {
    background: linear-gradient(180deg, var(--c-danger-500), var(--c-danger-600));
    color: white; border-color: var(--c-danger-600);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .15);
}
.btn-danger:hover { background: linear-gradient(180deg, var(--c-danger-600), var(--c-danger-700)); color: white; }
.btn-success {
    background: linear-gradient(180deg, var(--c-success-500), var(--c-success-600));
    color: white; border-color: var(--c-success-600);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .15);
}
.btn-success:hover { background: linear-gradient(180deg, var(--c-success-600), var(--c-success-700)); color: white; }
.btn-soft-primary  { background: var(--c-primary-50);  color: var(--c-primary-700); }
.btn-soft-primary:hover { background: var(--c-primary-100); }
.btn-soft-danger   { background: var(--c-danger-50);   color: var(--c-danger-700); }
.btn-soft-danger:hover { background: var(--c-danger-100); }
.btn-soft-success  { background: var(--c-success-50);  color: var(--c-success-700); }
.btn-soft-success:hover { background: var(--c-success-100); }

.btn-sm { height: 30px; padding: 0 10px; font-size: var(--fs-sm); border-radius: var(--radius); }
.btn-lg { height: 44px; padding: 0 20px; font-size: var(--fs-md); border-radius: var(--radius-lg); }
.btn-icon { padding: 0; width: 36px; }
.btn-icon.btn-sm { width: 30px; }
.btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* Button group */
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); margin-left: 0; }
.btn-group .btn:last-child  { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

/* ---- CARDS ------------------------------------------------------------- */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.card:not(.card-flush):hover { border-color: var(--c-border-strong); }
.card-elevated { box-shadow: var(--shadow-sm); }
.card-elevated:hover { box-shadow: var(--shadow-md); }
.card-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--c-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: none;
}
.card-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin: 0; letter-spacing: -0.011em; }
.card-subtitle { font-size: var(--fs-sm); color: var(--c-fg-muted); margin-top: 2px; }
.card-body { padding: 20px; }
.card-body-compact { padding: 14px 20px; }
.card-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--c-divider);
    background: var(--c-surface-2);
    display: flex; justify-content: space-between; align-items: center;
    font-size: var(--fs-sm);
    color: var(--c-fg-muted);
}
.card-flush { box-shadow: none; }

/* ---- KPI CARDS --------------------------------------------------------- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}
.kpi {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.kpi:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.kpi-label {
    font-size: var(--fs-xs);
    color: var(--c-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--fw-semibold);
    margin-bottom: 8px;
}
.kpi-value {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    letter-spacing: -0.025em;
    color: var(--c-fg);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.kpi-foot {
    display: flex; align-items: center; gap: 6px;
    margin-top: 10px;
    font-size: var(--fs-sm);
    color: var(--c-fg-muted);
}
.kpi-trend {
    display: inline-flex; align-items: center; gap: 3px;
    font-weight: var(--fw-semibold);
    padding: 2px 6px;
    border-radius: var(--radius);
    font-size: var(--fs-xs);
}
.kpi-trend i { font-size: 13px; }
.kpi-trend.up { color: var(--c-success-700); background: var(--c-success-50); }
.kpi-trend.down { color: var(--c-danger-700); background: var(--c-danger-50); }
.kpi-trend.flat { color: var(--c-fg-secondary); background: var(--c-neutral-100); }
.kpi-icon {
    position: absolute; top: 16px; right: 16px;
    width: 38px; height: 38px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    transition: transform var(--dur-fast) var(--ease-out);
}
.kpi:hover .kpi-icon { transform: rotate(-4deg) scale(1.05); }
.kpi-icon.primary { background: var(--c-primary-50); color: var(--c-primary-700); }
.kpi-icon.success { background: var(--c-success-50); color: var(--c-success-700); }
.kpi-icon.warning { background: var(--c-warning-50); color: var(--c-warning-700); }
.kpi-icon.danger  { background: var(--c-danger-50);  color: var(--c-danger-700); }
.kpi-icon.info    { background: var(--c-info-50);    color: var(--c-info-700); }
.kpi-icon.purple  { background: var(--c-purple-50);  color: var(--c-purple-700); }
.kpi-icon.teal    { background: var(--c-teal-50);    color: var(--c-teal-600); }

/* Sparkline in KPI */
.kpi-spark {
    height: 30px; margin-top: 8px;
    display: flex; align-items: flex-end; gap: 2px;
}
.kpi-spark > span {
    display: block; flex: 1; min-height: 2px;
    background: linear-gradient(180deg, var(--c-primary-400), var(--c-primary-600));
    border-radius: 1px;
    opacity: .65;
    transition: opacity var(--dur-fast) var(--ease-out);
}
.kpi:hover .kpi-spark > span { opacity: 1; }

/* ---- BADGES / PILLS ---------------------------------------------------- */
.tg-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.5;
    letter-spacing: -0.005em;
    border: 1px solid transparent;
}
.tg-badge-primary { background: var(--c-primary-50); color: var(--c-primary-700); border-color: var(--c-primary-100); }
.tg-badge-success { background: var(--c-success-50); color: var(--c-success-700); border-color: var(--c-success-100); }
.tg-badge-warning { background: var(--c-warning-50); color: var(--c-warning-700); border-color: var(--c-warning-100); }
.tg-badge-danger  { background: var(--c-danger-50);  color: var(--c-danger-700);  border-color: var(--c-danger-100); }
.tg-badge-info    { background: var(--c-info-50);    color: var(--c-info-700);    border-color: var(--c-info-100); }
.tg-badge-purple  { background: var(--c-purple-50);  color: var(--c-purple-700);  border-color: var(--c-purple-100); }
.tg-badge-teal    { background: var(--c-teal-50);    color: var(--c-teal-600);   border-color: var(--c-teal-100); }
.tg-badge-pink    { background: var(--c-pink-50);    color: var(--c-pink-600);   border-color: var(--c-pink-100); }
.tg-badge-muted   { background: var(--c-neutral-100); color: var(--c-fg-secondary); border-color: var(--c-border); }
.tg-badge-dot::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; display: inline-block;
}

/* ---- TABLES ------------------------------------------------------------ */
.table-wrap { overflow-x: auto; }
table.data {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-base);
    margin: 0;
}
table.data thead { position: sticky; top: 0; z-index: 1; }
table.data th {
    text-align: left;
    font-weight: var(--fw-semibold);
    color: var(--c-fg-secondary);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 11px 16px;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface-2);
    white-space: nowrap;
}
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable:hover { color: var(--c-fg); }
table.data th.sortable::after {
    content: '↕'; opacity: .35; margin-left: 4px; font-size: 10px;
}
table.data th.sort-asc::after { content: '↑'; opacity: 1; color: var(--c-primary-600); }
table.data th.sort-desc::after { content: '↓'; opacity: 1; color: var(--c-primary-600); }
table.data td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-divider);
    vertical-align: middle;
    background: var(--c-surface);
    color: var(--c-fg);
}
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr { transition: background var(--dur-fast) var(--ease-out); }
table.data tbody tr:hover td { background: var(--c-neutral-50); }
table.data .strong { font-weight: var(--fw-semibold); color: var(--c-fg); }
table.data .muted { color: var(--c-fg-muted); font-size: var(--fs-sm); }
table.data a.cell-link { font-weight: var(--fw-medium); }

/* ---- FORMS ------------------------------------------------------------- */
.form-group { margin-bottom: var(--sp-4); }
.form-row { display: grid; gap: var(--sp-4); }
.form-row.cols-2 { grid-template-columns: 1fr 1fr; }
.form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-fg);
    margin-bottom: 6px;
    letter-spacing: -0.005em;
}
.form-label .req { color: var(--c-danger-500); margin-left: 2px; }
.form-control,
.form-select {
    display: block;
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
    color: var(--c-fg);
    font-size: var(--fs-base);
    font-family: inherit;
}
.form-control::placeholder { color: var(--c-fg-muted); }
.form-control:hover, .form-select:hover { border-color: var(--c-border-strong); }
.form-control:focus, .form-select:focus {
    outline: none;
    border-color: var(--c-primary-500);
    box-shadow: var(--shadow-ring-brand);
    background: white;
}
.form-control.is-invalid { border-color: var(--c-danger-500); }
.form-control.is-invalid:focus { box-shadow: var(--shadow-ring-danger); }
.form-control.textarea { height: auto; padding: 10px 12px; resize: vertical; min-height: 96px; line-height: var(--lh-normal); }
.form-hint { font-size: var(--fs-xs); color: var(--c-fg-muted); margin-top: 4px; }
.form-error { font-size: var(--fs-xs); color: var(--c-danger-600); margin-top: 4px; display: flex; align-items: center; gap: 4px; }

/* Native select chevron */
.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* Input with leading icon */
.input-wrap { position: relative; }
.input-wrap .form-control { padding-left: 36px; }
.input-wrap > i {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    color: var(--c-fg-muted); font-size: 18px; pointer-events: none;
}

/* Checkbox */
.tg-check {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    font-size: var(--fs-sm); color: var(--c-fg-secondary);
}
.tg-check input { appearance: none; width: 16px; height: 16px; border: 1.5px solid var(--c-border-strong); border-radius: var(--radius-xs); background: white; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); position: relative; }
.tg-check input:hover { border-color: var(--c-primary-500); }
.tg-check input:checked { background: var(--c-primary-600); border-color: var(--c-primary-600); }
.tg-check input:checked::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 11px; font-weight: bold; }
.tg-check input:focus-visible { box-shadow: var(--shadow-ring-brand); outline: none; }

/* ---- FILTERS BAR ------------------------------------------------------- */
.filters {
    display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center;
    margin-bottom: var(--sp-4);
}
.filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-full);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
    color: var(--c-fg-secondary);
    text-decoration: none;
    user-select: none;
}
.filter-chip:hover { border-color: var(--c-border-strong); color: var(--c-fg); text-decoration: none; background: var(--c-neutral-50); }
.filter-chip.active {
    background: var(--c-primary-600);
    border-color: var(--c-primary-600);
    color: white;
    box-shadow: var(--shadow-sm);
}
.filter-chip.active:hover { background: var(--c-primary-700); color: white; }

/* ---- TABS -------------------------------------------------------------- */
.tabs {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: var(--sp-5);
    position: relative;
}
.tab {
    padding: 10px 16px;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    color: var(--c-fg-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.tab:hover { color: var(--c-fg); text-decoration: none; }
.tab.active { color: var(--c-primary-700); border-bottom-color: var(--c-primary-600); }

/* Segmented control */
.segmented {
    display: inline-flex; padding: 3px; border: 1px solid var(--c-border);
    background: var(--c-neutral-50); border-radius: var(--radius-md);
}
.segmented > button, .segmented > a {
    padding: 5px 12px; border-radius: var(--radius-sm);
    font-size: var(--fs-sm); font-weight: var(--fw-medium);
    color: var(--c-fg-secondary); border: none; background: transparent;
    cursor: pointer; transition: all var(--dur-fast) var(--ease-out); text-decoration: none;
}
.segmented > button:hover { color: var(--c-fg); }
.segmented > button.active, .segmented > a.active {
    background: var(--c-surface); color: var(--c-fg);
    box-shadow: var(--shadow-xs);
}

/* ---- GRID UTILS -------------------------------------------------------- */
.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.col-span-2 { grid-column: span 2; }
.flex { display: flex; gap: var(--sp-3); }
.flex-1 { flex: 1; }
.flex-col { flex-direction: column; }
.flex-center { align-items: center; }
.flex-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.text-muted { color: var(--c-fg-muted); }
.text-secondary { color: var(--c-fg-secondary); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.text-lg { font-size: var(--fs-lg); }
.font-medium { font-weight: var(--fw-medium); }
.font-semibold { font-weight: var(--fw-semibold); }
.tabular { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }

/* ---- DROPDOWN MENU ----------------------------------------------------- */
.tg-dropdown { position: relative; display: inline-block; }
.tg-dropdown-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 220px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 5px;
    z-index: var(--z-overlay);
    opacity: 0; transform: translateY(-4px) scale(.98);
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.tg-dropdown.open .tg-dropdown-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.tg-dropdown-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: var(--radius);
    font-size: var(--fs-base); color: var(--c-fg);
    cursor: pointer; transition: background var(--dur-fast) var(--ease-out);
    text-decoration: none;
}
.tg-dropdown-item:hover { background: var(--c-neutral-100); text-decoration: none; color: var(--c-fg); }
.tg-dropdown-item i { font-size: 16px; color: var(--c-fg-muted); }
.tg-dropdown-item.danger { color: var(--c-danger-600); }
.tg-dropdown-item.danger i { color: var(--c-danger-500); }
.tg-dropdown-divider { height: 1px; background: var(--c-divider); margin: 4px 0; }
.tg-dropdown-header {
    padding: 8px 12px 6px; font-size: var(--fs-xs);
    color: var(--c-fg-muted); text-transform: uppercase;
    letter-spacing: 0.06em; font-weight: var(--fw-semibold);
}

/* ---- MODAL / DIALOG ---------------------------------------------------- */
dialog.tg-modal {
    border: none; padding: 0;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-overlay);
    background: var(--c-surface);
    color: var(--c-fg);
    max-width: 560px; width: 92%;
    animation: tg-modal-in var(--dur-base) var(--ease-out);
}
dialog.tg-modal::backdrop { background: rgba(15, 23, 42, .35); backdrop-filter: blur(2px); }
@keyframes tg-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- TOOLTIP ----------------------------------------------------------- */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute; bottom: calc(100% + 6px); left: 50%;
    transform: translateX(-50%) translateY(2px);
    background: var(--c-neutral-900); color: white;
    padding: 5px 8px; border-radius: var(--radius-sm);
    font-size: var(--fs-xs); white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    z-index: var(--z-tooltip);
    box-shadow: var(--shadow-md);
}
[data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- LOGIN / AUTH ------------------------------------------------------ */
.login-shell { min-height: 100vh; display: flex; background: var(--c-bg); }
.login-side {
    flex: 1;
    background: radial-gradient(circle at 20% 100%, #1d3fd5 0%, #0a1227 60%);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 48px; color: white; position: relative; overflow: hidden;
}
.login-side::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(800px circle at 80% 20%, rgba(255, 255, 255, .08), transparent 50%),
        radial-gradient(600px circle at 40% 90%, rgba(124, 58, 237, .25), transparent 50%);
}
.login-side::after {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 32px 32px;
    mask: radial-gradient(ellipse at center, black, transparent 80%);
}
.login-side > * { position: relative; z-index: 1; }
.login-hero h2 {
    color: white; font-size: var(--fs-4xl); font-weight: var(--fw-bold); line-height: 1.15;
    margin-bottom: 16px; letter-spacing: -0.025em;
}
.login-hero p { font-size: var(--fs-lg); opacity: 0.78; max-width: 460px; line-height: var(--lh-relaxed); }
.login-features { display: flex; flex-direction: column; gap: 12px; margin-top: 36px; }
.login-feature { display: flex; align-items: center; gap: 10px; font-size: var(--fs-base); opacity: 0.85; }
.login-feature i {
    font-size: 18px; color: #34d399;
    background: rgba(52, 211, 153, .15);
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}

.login-form-side {
    width: 480px; background: white;
    display: flex; flex-direction: column; justify-content: center;
    padding: 48px;
}
.login-card { max-width: 380px; margin: 0 auto; width: 100%; }
.login-card h1 { font-size: var(--fs-3xl); margin-bottom: 6px; letter-spacing: -0.025em; }
.login-card .subtitle { color: var(--c-fg-secondary); font-size: var(--fs-md); margin-bottom: 32px; }
.login-checkbox { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); margin-bottom: 20px; color: var(--c-fg-secondary); cursor: pointer; }
.login-btn { width: 100%; height: 44px; justify-content: center; font-weight: var(--fw-semibold); border-radius: var(--radius-lg); }
.login-divider { text-align: center; position: relative; margin: 24px 0; color: var(--c-fg-muted); font-size: var(--fs-xs); }
.login-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--c-border); z-index: 0; }
.login-divider span { background: white; padding: 0 12px; position: relative; z-index: 1; text-transform: uppercase; letter-spacing: 0.1em; font-weight: var(--fw-semibold); }

/* ---- TICKET WORKSPACE -------------------------------------------------- */
.workspace {
    display: grid; grid-template-columns: 360px 1fr 320px;
    gap: 0; height: calc(100vh - var(--topbar-h) - 48px);
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius-xl); overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.ws-list { border-right: 1px solid var(--c-border); display: flex; flex-direction: column; min-width: 0; background: var(--c-surface); }
.ws-header { padding: 14px 16px; border-bottom: 1px solid var(--c-divider); display: flex; flex-direction: column; gap: 10px; }
.ws-search { position: relative; }
.ws-search input {
    width: 100%; height: 34px;
    border: 1px solid var(--c-border); border-radius: var(--radius-md);
    padding: 0 10px 0 34px; font-size: var(--fs-sm); background: var(--c-neutral-50);
    transition: all var(--dur-fast) var(--ease-out);
}
.ws-search input:focus { outline: none; background: white; border-color: var(--c-primary-500); box-shadow: var(--shadow-ring-brand); }
.ws-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--c-fg-muted); font-size: 16px; }
.ws-filters { display: flex; gap: 6px; font-size: var(--fs-xs); }
.ws-filters .filter-chip { padding: 4px 10px; font-size: var(--fs-xs); }

.ticket-list { overflow-y: auto; flex: 1; }
.ticket-item {
    padding: 14px 16px; border-bottom: 1px solid var(--c-divider);
    cursor: pointer; position: relative;
    transition: background var(--dur-fast) var(--ease-out);
    text-decoration: none; color: inherit; display: block;
}
.ticket-item:hover { background: var(--c-neutral-50); text-decoration: none; color: inherit; }
.ticket-item.active {
    background: var(--c-primary-50);
    box-shadow: inset 3px 0 0 var(--c-primary-600);
}
.ticket-item-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
.ticket-customer { display: flex; align-items: center; gap: 8px; font-weight: var(--fw-semibold); font-size: var(--fs-base); }
.ticket-time { font-size: var(--fs-xs); color: var(--c-fg-muted); }
.ticket-subject {
    font-size: var(--fs-base); color: var(--c-fg); font-weight: var(--fw-medium);
    margin-bottom: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ticket-preview {
    font-size: var(--fs-sm); color: var(--c-fg-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin-bottom: 6px;
}
.ticket-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.ticket-item .unread-dot {
    position: absolute; right: 16px; bottom: 14px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary-600);
    box-shadow: 0 0 0 3px var(--c-primary-100);
}

.ws-conv { display: flex; flex-direction: column; background: var(--c-surface-2); min-width: 0; }
.conv-header { padding: 14px 20px; background: var(--c-surface); border-bottom: 1px solid var(--c-divider); display: flex; align-items: center; justify-content: space-between; }
.conv-subject { font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.conv-meta { font-size: var(--fs-sm); color: var(--c-fg-muted); margin-top: 2px; }
.conv-actions { display: flex; gap: 6px; }
.conv-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }

.msg { max-width: 78%; display: flex; gap: 10px; }
.msg.agent { align-self: flex-end; flex-direction: row-reverse; }
.msg-bubble {
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    font-size: var(--fs-base); line-height: var(--lh-relaxed); word-wrap: break-word;
    box-shadow: var(--shadow-xs);
}
.msg.agent .msg-bubble {
    background: linear-gradient(180deg, var(--c-primary-500), var(--c-primary-600));
    color: white; border-color: var(--c-primary-600);
}
.msg-meta { font-size: var(--fs-xs); color: var(--c-fg-muted); margin-top: 6px; display: flex; gap: 8px; }
.msg.agent .msg-meta { justify-content: flex-end; }
.msg-attachment { margin-top: 8px; padding: 8px 10px; background: rgba(0, 0, 0, .05); border-radius: var(--radius); font-size: var(--fs-sm); display: flex; align-items: center; gap: 8px; }
.msg.agent .msg-attachment { background: rgba(255, 255, 255, .2); }

.conv-reply { background: var(--c-surface); border-top: 1px solid var(--c-divider); padding: 12px 20px; }
.reply-tools { display: flex; gap: 4px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--c-divider); }
.reply-tool {
    width: 30px; height: 30px; border-radius: var(--radius);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--c-fg-secondary); cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}
.reply-tool:hover { background: var(--c-neutral-100); color: var(--c-fg); }
.reply-textarea { width: 100%; border: none; resize: none; font-size: var(--fs-base); padding: 6px 0; outline: none; min-height: 60px; font-family: inherit; line-height: var(--lh-relaxed); }
.reply-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }

.ws-detail { background: var(--c-surface); border-left: 1px solid var(--c-divider); overflow-y: auto; padding: 20px; min-width: 0; }
.detail-section { margin-bottom: var(--sp-6); }
.detail-section-title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-fg-muted); margin-bottom: 10px; font-weight: var(--fw-semibold); }
.detail-field { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--c-divider); font-size: var(--fs-sm); }
.detail-field-label { color: var(--c-fg-muted); }
.detail-field-value { font-weight: var(--fw-medium); }

/* ---- POLICY ------------------------------------------------------------ */
.policy-layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; }
.policy-sections { display: flex; flex-direction: column; gap: 16px; }
.section-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--dur-fast) var(--ease-out); }
.section-card:hover { border-color: var(--c-border-strong); }
.section-card-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--c-surface-2); border-bottom: 1px solid var(--c-divider); }
.section-num {
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, var(--c-primary-500), var(--c-primary-600));
    color: white;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-sm); font-weight: var(--fw-bold);
    margin-right: 10px;
    box-shadow: var(--shadow-sm);
}
.section-card-body { padding: 18px; font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--c-fg-secondary); }

/* ---- TIMELINE ---------------------------------------------------------- */
.timeline { position: relative; padding-left: 24px; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--c-border), var(--c-border-strong)); }
.tl-item { position: relative; margin-bottom: 18px; }
.tl-dot { position: absolute; left: -22px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: white; border: 2.5px solid var(--c-primary-500); box-shadow: 0 0 0 4px rgba(58, 102, 245, .12); }
.tl-dot.success { border-color: var(--c-success-500); box-shadow: 0 0 0 4px rgba(16, 185, 129, .12); }
.tl-dot.warning { border-color: var(--c-warning-500); box-shadow: 0 0 0 4px rgba(245, 158, 11, .12); }
.tl-dot.danger  { border-color: var(--c-danger-500); box-shadow: 0 0 0 4px rgba(239, 68, 68, .12); }
.tl-dot.muted   { border-color: var(--c-neutral-400); background: var(--c-neutral-100); box-shadow: none; }
.tl-title { font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.tl-meta { font-size: var(--fs-xs); color: var(--c-fg-muted); margin-top: 2px; }
.tl-body { font-size: var(--fs-sm); color: var(--c-fg-secondary); margin-top: 4px; }

/* ---- RISK MATRIX ------------------------------------------------------- */
.risk-matrix {
    display: grid;
    grid-template-columns: 60px repeat(5, 1fr);
    grid-template-rows: 30px repeat(5, 1fr);
    gap: 3px; padding: 12px;
    background: var(--c-surface-2); border-radius: var(--radius-lg); border: 1px solid var(--c-border);
}
.risk-cell {
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-xs); font-weight: var(--fw-bold);
    border-radius: var(--radius-sm); min-height: 50px; position: relative;
    cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.risk-cell:hover { transform: scale(1.04); z-index: 1; box-shadow: var(--shadow-md); }
.risk-axis { display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); color: var(--c-fg-muted); font-weight: var(--fw-semibold); text-align: center; }
.risk-cell.r-low  { background: #d4f5dd; color: #1a7e36; }
.risk-cell.r-med  { background: #fff3bf; color: #b08600; }
.risk-cell.r-high { background: #ffd8a8; color: #d9480f; }
.risk-cell.r-crit { background: #ffc9c9; color: #c92a2a; }
.risk-count { position: absolute; top: 4px; right: 6px; background: rgba(0, 0, 0, .15); color: inherit; font-size: 10px; padding: 1px 5px; border-radius: var(--radius-full); font-weight: var(--fw-bold); }

/* ---- ONBOARDING STEPPER ------------------------------------------------ */
.journey-stepper { display: flex; align-items: center; margin-bottom: var(--sp-6); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 20px 24px; }
.step { display: flex; align-items: center; gap: 12px; flex: 1; position: relative; }
.step:not(:last-child)::after { content: ''; position: absolute; left: 100%; top: 19px; width: 100%; height: 2px; background: var(--c-border); z-index: 0; }
.step.done:not(:last-child)::after { background: var(--c-success-500); }
.step-circle {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--c-neutral-100); border: 2px solid var(--c-border);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--c-fg-muted);
    flex-shrink: 0; position: relative; z-index: 1;
    transition: all var(--dur-base) var(--ease-out);
}
.step.done .step-circle { background: var(--c-success-500); border-color: var(--c-success-500); color: white; box-shadow: 0 4px 8px rgba(16, 185, 129, .25); }
.step.active .step-circle {
    background: white; border-color: var(--c-primary-500); color: var(--c-primary-700);
    box-shadow: 0 0 0 4px var(--c-primary-50), 0 4px 8px rgba(58, 102, 245, .25);
}
.step-label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-fg-secondary); }
.step.active .step-label { color: var(--c-fg); font-weight: var(--fw-semibold); }
.step.done .step-label { color: var(--c-fg-secondary); }

/* ---- FLOATING TAG ------------------------------------------------------ */
.floating-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-full); font-size: var(--fs-xs); color: var(--c-fg-secondary); font-weight: var(--fw-medium); }

/* ---- CHART BARS -------------------------------------------------------- */
.chart-bars { display: flex; align-items: flex-end; gap: 6px; height: 180px; padding: 0 8px; }
.chart-bar { flex: 1; background: linear-gradient(180deg, var(--c-primary-400), var(--c-primary-600)); border-radius: var(--radius-sm) var(--radius-sm) 0 0; position: relative; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); min-height: 8px; cursor: pointer; }
.chart-bar:hover { opacity: 1; transform: scaleY(1.04); }
.chart-bar::after { content: attr(data-label); position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--c-fg-muted); }
.chart-legend { display: flex; gap: 16px; font-size: var(--fs-sm); color: var(--c-fg-secondary); margin-top: 30px; padding-top: 12px; border-top: 1px solid var(--c-divider); }
.chart-legend-item { display: flex; align-items: center; gap: 6px; }
.chart-legend-color { width: 10px; height: 10px; border-radius: var(--radius-xs); }

/* ---- DONUT ------------------------------------------------------------- */
.donut {
    --p: 70; --c: var(--c-primary-600);
    width: 120px; height: 120px; border-radius: 50%;
    background:
        radial-gradient(closest-side, white 65%, transparent 65% 100%),
        conic-gradient(var(--c) calc(var(--p) * 1%), var(--c-neutral-100) 0);
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    position: relative; transition: transform var(--dur-base) var(--ease-out);
}
.donut:hover { transform: rotate(2deg); }
.donut-value { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.donut-label { font-size: 10px; color: var(--c-fg-muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* ---- STATUS DOT -------------------------------------------------------- */
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.status-dot.green  { background: var(--c-success-500); box-shadow: 0 0 0 3px var(--c-success-50); }
.status-dot.orange { background: var(--c-warning-500); box-shadow: 0 0 0 3px var(--c-warning-50); }
.status-dot.red    { background: var(--c-danger-500);  box-shadow: 0 0 0 3px var(--c-danger-50); }
.status-dot.blue   { background: var(--c-primary-600); box-shadow: 0 0 0 3px var(--c-primary-50); }

/* ---- PROGRESS ---------------------------------------------------------- */
.tg-progress { height: 6px; background: var(--c-neutral-100); border-radius: var(--radius-full); overflow: hidden; }
.tg-progress-bar { height: 100%; background: linear-gradient(90deg, var(--c-primary-500), var(--c-primary-600)); transition: width var(--dur-slow) var(--ease-out); border-radius: inherit; }
.tg-progress-bar.success { background: linear-gradient(90deg, var(--c-success-500), var(--c-success-600)); }
.tg-progress-bar.warning { background: linear-gradient(90deg, var(--c-warning-500), var(--c-warning-600)); }
.tg-progress-bar.danger  { background: linear-gradient(90deg, var(--c-danger-500), var(--c-danger-600)); }

/* ---- PAGINATION -------------------------------------------------------- */
.tg-pagination { display: flex; align-items: center; gap: 4px; font-size: var(--fs-sm); }
.page-btn { min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--c-border); background: var(--c-surface); cursor: pointer; color: var(--c-fg); text-decoration: none; transition: all var(--dur-fast) var(--ease-out); font-weight: var(--fw-medium); }
.page-btn.active { background: var(--c-primary-600); color: white; border-color: var(--c-primary-600); box-shadow: var(--shadow-sm); }
.page-btn:not(.active):hover { background: var(--c-neutral-50); border-color: var(--c-border-strong); }

/* ---- EMPTY STATE ------------------------------------------------------- */
.empty { text-align: center; padding: 48px 24px; color: var(--c-fg-muted); }
.empty i { font-size: 48px; opacity: 0.35; margin-bottom: 12px; display: block; }
.empty-title { color: var(--c-fg); font-weight: var(--fw-semibold); font-size: var(--fs-md); margin-bottom: 6px; }

/* ---- SKELETON LOADER --------------------------------------------------- */
.skeleton { background: linear-gradient(90deg, var(--c-neutral-100) 25%, var(--c-neutral-200) 50%, var(--c-neutral-100) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; border-radius: var(--radius-sm); }
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-text { height: 12px; margin-bottom: 8px; }
.skeleton-text-lg { height: 16px; }

/* ---- TOGGLE SWITCH ----------------------------------------------------- */
.toggle { position: relative; display: inline-block; width: 38px; height: 22px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--c-neutral-300); transition: background var(--dur-fast) var(--ease-out); border-radius: var(--radius-full); }
.toggle-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background: white; transition: transform var(--dur-fast) var(--ease-out); border-radius: 50%; box-shadow: var(--shadow-sm); }
.toggle input:checked + .toggle-slider { background: var(--c-primary-600); }
.toggle input:checked + .toggle-slider::before { transform: translateX(16px); }
.toggle input:focus-visible + .toggle-slider { box-shadow: var(--shadow-ring-brand); }

/* ---- NOTES / CALLOUTS -------------------------------------------------- */
.note {
    padding: 12px 14px;
    background: var(--c-info-50); border-left: 3px solid var(--c-info-500);
    border-radius: var(--radius);
    font-size: var(--fs-sm); color: var(--c-fg-secondary);
}
.note.warning { background: var(--c-warning-50); border-color: var(--c-warning-500); color: var(--c-warning-700); }
.note.danger  { background: var(--c-danger-50);  border-color: var(--c-danger-500);  color: var(--c-danger-700); }
.note.success { background: var(--c-success-50); border-color: var(--c-success-500); color: var(--c-success-700); }

/* ---- FLASH MESSAGES (TOASTS) ------------------------------------------ */
.tg-flash {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border: 1px solid;
    margin-bottom: var(--sp-4);
    font-size: var(--fs-base);
    display: flex; align-items: center; gap: 10px;
    box-shadow: var(--shadow-sm);
    animation: tg-flash-in var(--dur-base) var(--ease-out);
}
@keyframes tg-flash-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.tg-flash i { font-size: 20px; flex-shrink: 0; }
.tg-flash.success { background: var(--c-success-50); border-color: var(--c-success-100); color: var(--c-success-700); }
.tg-flash.success i { color: var(--c-success-500); }
.tg-flash.danger,
.tg-flash.error   { background: var(--c-danger-50);  border-color: var(--c-danger-100);  color: var(--c-danger-700); }
.tg-flash.danger i,
.tg-flash.error i { color: var(--c-danger-500); }
.tg-flash.warning { background: var(--c-warning-50); border-color: var(--c-warning-100); color: var(--c-warning-700); }
.tg-flash.warning i { color: var(--c-warning-500); }
.tg-flash.info    { background: var(--c-info-50);    border-color: var(--c-info-100);    color: var(--c-info-700); }
.tg-flash.info i  { color: var(--c-info-500); }

/* ---- SCROLLBAR (subtle) ------------------------------------------------ */
.conv-body::-webkit-scrollbar,
.ticket-list::-webkit-scrollbar,
.ws-detail::-webkit-scrollbar { width: 6px; }
.conv-body::-webkit-scrollbar-thumb,
.ticket-list::-webkit-scrollbar-thumb,
.ws-detail::-webkit-scrollbar-thumb { background: var(--c-neutral-300); border-radius: var(--radius-full); }
.conv-body::-webkit-scrollbar-thumb:hover,
.ticket-list::-webkit-scrollbar-thumb:hover,
.ws-detail::-webkit-scrollbar-thumb:hover { background: var(--c-neutral-400); }

/* ---- BOOTSTRAP CONFLICT RESETS ---------------------------------------- */
.tg-body .container,
.tg-body .container-fluid,
.tg-body .container-xxl { padding: 0; margin: 0; max-width: none; }
.tg-body .row { margin: 0; }
.tg-body .col, .tg-body [class*="col-"] { padding: 0; }
.tg-body .dropdown-menu { border: 1px solid var(--c-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 4px 0; font-size: var(--fs-base); }
.tg-body .dropdown-item { padding: 8px 14px; color: var(--c-fg); }
.tg-body .dropdown-item:hover { background: var(--c-neutral-50); }

/* ---- RESPONSIVE -------------------------------------------------------- */
@media (max-width: 1280px) {
    :root { --content-pad: 20px; }
    .grid-3 { grid-template-columns: 1fr 1fr; }
    .grid-4 { grid-template-columns: 1fr 1fr; }
    .policy-layout { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
    .workspace { grid-template-columns: 320px 1fr; }
    .ws-detail { display: none; }
    .login-side { display: none; }
    .login-form-side { width: 100%; }
}
@media (max-width: 768px) {
    :root { --content-pad: 16px; }
    body.tg-body .sidebar {
        position: fixed; top: 0; left: 0; bottom: 0;
        transform: translateX(-100%);
        transition: transform var(--dur-slow) var(--ease-out);
        box-shadow: var(--shadow-xl);
    }
    body.sidebar-open .sidebar { transform: translateX(0); }
    body.sidebar-open::after {
        content: ''; position: fixed; inset: 0;
        background: rgba(0, 0, 0, .35); z-index: calc(var(--z-sidebar) - 1);
        animation: tg-fade-in var(--dur-base) var(--ease-out);
    }
    @keyframes tg-fade-in { from { opacity: 0; } to { opacity: 1; } }
    .topbar-search { max-width: 240px; }
    .topbar-search kbd { display: none; }
    .user-info { display: none; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .form-row.cols-2, .form-row.cols-3 { grid-template-columns: 1fr; }
    .workspace { grid-template-columns: 1fr; height: auto; }
    .ws-list { max-height: 60vh; }
    .page-header { flex-direction: column; align-items: stretch; }
    .login-form-side { padding: 24px; }
    .login-card h1 { font-size: var(--fs-2xl); }
    table.data th, table.data td { padding: 10px 12px; }
}
@media (max-width: 480px) {
    .kpi-value { font-size: var(--fs-2xl); }
    .topbar { padding: 0 12px; gap: 8px; }
    .topbar-search { display: none; }
}

/* ==========================================================================
   ENHANCEMENTS — Filter Bar, Section Bands, Sticky Toolbar (2026-05-17)
   ========================================================================== */

/* ── Filter bar ─────────────────────────────────────────────────────────── */
.tg-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    padding: 14px 18px;
    background: var(--c-bg-elevated, #fff);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-xs);
}
.tg-filter-bar .filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 160px;
    min-width: 140px;
}
.tg-filter-bar .filter-field label {
    font-size: 11px;
    font-weight: 600;
    color: var(--c-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}
.tg-filter-bar .filter-field input,
.tg-filter-bar .filter-field select {
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: var(--c-bg-page);
    font-size: 13px;
    color: var(--c-fg-primary);
    transition: border-color .15s, box-shadow .15s;
}
.tg-filter-bar .filter-field input:focus,
.tg-filter-bar .filter-field select:focus {
    outline: 0;
    border-color: var(--c-primary-500);
    box-shadow: 0 0 0 3px var(--c-primary-50);
}
.tg-filter-bar .filter-actions {
    display: flex;
    gap: 6px;
    align-items: flex-end;
    margin-left: auto;
    flex-wrap: wrap;
}
.tg-filter-bar.compact {
    padding: 10px 14px;
}
.tg-filter-bar .filter-search {
    flex: 2 1 280px;
}
.tg-filter-bar .filter-chip-row {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px dashed var(--c-divider);
}
.tg-filter-bar .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--c-primary-50);
    color: var(--c-primary-700);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--c-primary-200);
}
.tg-filter-bar .filter-chip .x {
    display: inline-flex;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--c-primary-200);
    color: var(--c-primary-700);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 2px;
    font-size: 10px;
}
.tg-filter-bar .filter-chip .x:hover {
    background: var(--c-primary-300);
}

/* ── Section bands (for grouped forms) ──────────────────────────────────── */
.tg-section {
    margin-bottom: 18px;
}
.tg-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: linear-gradient(90deg, var(--c-primary-50), transparent);
    border-left: 3px solid var(--c-primary-500);
    border-radius: 0 8px 8px 0;
    margin-bottom: 14px;
    position: sticky;
    top: 60px;
    z-index: 5;
    background-color: var(--c-bg-page, #fff);
}
.tg-section-head .ico {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--c-primary-600);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}
.tg-section-head .text {
    flex: 1;
    min-width: 0;
}
.tg-section-head h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--c-fg-primary);
    letter-spacing: -0.01em;
}
.tg-section-head .desc {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--c-fg-muted);
}
.tg-section-head .badge-count {
    background: var(--c-primary-600);
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.tg-section-body {
    padding: 4px 0 0;
}

/* sub-section (smaller, in-card) */
.tg-subsection-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--c-divider);
}
.tg-subsection-head:first-child {
    margin-top: 0;
}
.tg-subsection-head h4 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--c-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Section anchor nav (left rail "jump to") ───────────────────────────── */
.tg-section-nav {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 8px;
    background: var(--c-bg-elevated, #fff);
    border: 1px solid var(--c-border);
    border-radius: 10px;
}
.tg-section-nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--c-fg-secondary);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.tg-section-nav a:hover {
    background: var(--c-neutral-100);
    color: var(--c-fg-primary);
}
.tg-section-nav a.active {
    background: var(--c-primary-50);
    color: var(--c-primary-700);
    font-weight: 600;
}
.tg-section-nav a .num {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--c-neutral-200);
    color: var(--c-fg-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}
.tg-section-nav a.active .num {
    background: var(--c-primary-600);
    color: #fff;
}

/* ── Sticky toolbar (between header and content) ────────────────────────── */
.tg-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    background: var(--c-bg-elevated, #fff);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    margin-bottom: 14px;
}
.tg-toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tg-toolbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* ── Print button affordance ────────────────────────────────────────────── */
.btn-print {
    background: var(--c-bg-page);
    color: var(--c-fg-primary);
    border: 1px solid var(--c-border);
}
.btn-print:hover {
    background: var(--c-neutral-50);
    border-color: var(--c-primary-300);
    color: var(--c-primary-700);
}

/* ── Stat-strip — narrow row of stat tiles for filter-bar tops ──────────── */
.tg-stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.tg-stat-tile {
    padding: 12px 14px;
    background: var(--c-bg-elevated, #fff);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.tg-stat-tile .ico {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--c-primary-50);
    color: var(--c-primary-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.tg-stat-tile.success .ico { background: var(--c-success-50); color: var(--c-success-600); }
.tg-stat-tile.warning .ico { background: var(--c-warning-50); color: var(--c-warning-600); }
.tg-stat-tile.danger .ico  { background: var(--c-danger-50);  color: var(--c-danger-600); }
.tg-stat-tile.info .ico    { background: var(--c-info-50);    color: var(--c-info-600); }
.tg-stat-tile .meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.tg-stat-tile .val { font-size: 18px; font-weight: 700; color: var(--c-fg-primary); font-variant-numeric: tabular-nums; }
.tg-stat-tile .lbl { font-size: 11px; color: var(--c-fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }