/* =============================================================
   North IT Holiday Management — app.css
   All application styles. No inline CSS anywhere in the app.

   Structure:
     1. CSS Custom Properties (theme tokens)
     2. Theme overrides (northit, pride, love, blm)
     3. Reset / base
     4. Layout (header, sidebar, content)
     5. Components (cards, tabs, tables, badges, buttons, modals)
     6. Calendar
     7. Forms & inputs
     8. Animations & particles
     9. Utility classes
     10. Responsive
   ============================================================= */

/* ── 1. ROOT TOKENS (Unicorn / default theme) ─────────────── */
:root {
    /* Font stacks */
    --th-logo-font:  'Pacifico', cursive;
    --th-body-font:  'Nunito', sans-serif;

    /* Page background gradient stops */
    --th-bg1: #fdf2f8;
    --th-bg2: #faf5ff;
    --th-bg3: #f0f4ff;

    /* Header / login / toast gradient */
    --th-hdr-bg:  linear-gradient(135deg, #7c3aed, #db2777);
    --th-hdr-sub: #f9a8d4;   /* subtitle / role text in header */

    /* Brand colours */
    --th-pri:  #7c3aed;
    --th-pri2: #9333ea;
    --th-acc:  #ec4899;

    /* Sidebar */
    --th-sb-border: #f3e8ff;
    --th-sb-hover:  #fdf2f8;

    /* Shadows */
    --th-card-shadow:       rgba(168, 85, 247, .10);
    --th-stat-hover-shadow: rgba(168, 85, 247, .20);

    /* Progress bars */
    --th-prog1: #a855f7;
    --th-prog2: #ec4899;
    --th-prog-bg: #f3e8ff;

    /* Buttons */
    --th-btn: linear-gradient(135deg, #9333ea, #ec4899);

    /* Stat cards */
    --th-stat-bg1:    #faf5ff;
    --th-stat-bg2:    #fdf2f8;
    --th-stat-border: #f3e8ff;

    /* Tables */
    --th-table-hdr-bg:     #faf5ff;
    --th-table-hdr-border: #f3e8ff;
    --th-table-row-hover:  #fdf2f8;

    /* Tabs */
    --th-tabs-border: #f3e8ff;
    --th-tab-active:  #7c3aed;

    /* Calendar */
    --th-cal-head:         #c084fc;
    --th-cal-sel-bg:        rgba(168,85,247,.12);
    --th-cal-wknd:         #f472b6;
    --th-cal-today:        linear-gradient(135deg, #a855f7, #ec4899);
    --th-cal-bday-border:  #f9a8d4;
    --th-cal-hover:        #f3e8ff;
    --th-sel-ring:         #a855f7;
    --th-wfh-ring:         #c084fc;
    --th-dot:              #a855f7;

    /* Chips & inline elements */
    --th-dchip-bg:     #f3e8ff;
    --th-dchip-txt:    #7c3aed;
    --th-dchip-border: rgba(124,58,237,.2);
    --th-modal-title:  #7c3aed;
    --th-rules-bg1:    #fdf2f8;
    --th-rules-bg2:    #faf5ff;
    --th-rules-border: #f3e8ff;
    --th-rules-txt:    #374151;
    --th-input-border: #e9d5ff;

    /* Core UI (light theme defaults) */
    --th-bg:           #fdf2f8;
    --th-text:         #1e293b;
    --th-text-muted:   #64748b;
    --th-card:         #fff;
    --th-card-border:  #f3e8ff;
    --th-input-bg:     #fff;
    --th-sidebar:      #fff;

    /* Interactive widgets */
    --th-day-chip-sel:  #9333ea;
    --th-pic-sel-ring:  #c084fc;

    /* Scrollbar */
    --th-scroll-track:  #f3e8ff;
    --th-scroll-thumb:  #d8b4fe;
    --th-scroll-hover:  #c084fc;

    /* Semantic (not overridden by themes — always green/red/yellow) */
    --c-ok-bg:  #d1fae5;  --c-ok-txt:  #065f46;
    --c-err-bg: #fee2e2;  --c-err-txt: #991b1b;
    --c-wrn-bg: #fef3c7;  --c-wrn-txt: #92400e;
}

/* ── Scrollbar ────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--th-scroll-thumb) var(--th-scroll-track); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--th-scroll-track); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: var(--th-scroll-thumb); border-radius: 10px; border: 2px solid var(--th-scroll-track); }
::-webkit-scrollbar-thumb:hover { background: var(--th-scroll-hover); }
::-webkit-scrollbar-corner { background: var(--th-scroll-track); }

/* Dark theme status colors — muted backgrounds, visible text */
body.theme-northit,
body.theme-hacker, body.theme-dark, body.theme-watersports {
    --c-ok-bg:  rgba(16,185,129,.15);  --c-ok-txt:  #6ee7b7;
    --c-err-bg: rgba(239,68,68,.15);   --c-err-txt: #fca5a5;
    --c-wrn-bg: rgba(245,158,11,.15);  --c-wrn-txt: #fbbf24;
    --c-wrn-border: rgba(245,158,11,.3);
}

/* Dark theme calendar cell overrides */
body.theme-northit .cal-bh,
body.theme-dark .cal-bh,
body.theme-watersports .cal-bh       { background: rgba(239,68,68,.15) !important; color: #fca5a5 !important; }
body.theme-northit .cal-comp,
body.theme-dark .cal-comp,
body.theme-watersports .cal-comp     { background: rgba(245,158,11,.15) !important; color: #fbbf24 !important; }
body.theme-northit .cal-hol-ok,
body.theme-dark .cal-hol-ok,
body.theme-watersports .cal-hol-ok   { background: rgba(16,185,129,.15) !important; color: #6ee7b7 !important; }
body.theme-northit .cal-hol-pend,
body.theme-dark .cal-hol-pend,
body.theme-watersports .cal-hol-pend { background: rgba(245,158,11,.1) !important; color: #fbbf24 !important; outline-color: #fbbf24; }
body.theme-northit .cal-sick,
body.theme-dark .cal-sick,
body.theme-watersports .cal-sick     { background: rgba(239,68,68,.18) !important; color: #fca5a5 !important; outline-color: #f87171; }
body.theme-northit .cal-unpaid,
body.theme-dark .cal-unpaid,
body.theme-watersports .cal-unpaid   { background: rgba(245,158,11,.12) !important; color: #fbbf24 !important; outline-color: #d97706; }
body.theme-northit .cal-unpaid-req,
body.theme-dark .cal-unpaid-req,
body.theme-watersports .cal-unpaid-req { background: rgba(139,92,246,.15) !important; color: #c4b5fd !important; outline-color: #8b5cf6; }

/* ── 2a. NORTH IT THEME — dark navy / electric blue ──────── */
body.theme-northit {
    --th-logo-font:  'Orbitron', monospace;
    --th-bg1: #0d1117;  --th-bg2: #0f1923;  --th-bg3: #111827;
    --th-hdr-bg:  linear-gradient(135deg, #0d1117 0%, #0a2540 60%, #0d1117 100%);
    --th-hdr-sub: #38bdf8;
    --th-text:         #e2e8f0;
    --th-text-muted:   #94a3b8;
    --th-card:         #0d1f35;
    --th-card-border:  #1e3a5f;
    --th-input-bg:     #0a1628;
    --th-bg:           #0d1117;
    --th-sidebar:      #0a1628;
    --th-pri:  #0ea5e9;  --th-pri2: #38bdf8;  --th-acc: #0ea5e9;
    --th-sb-border: #1e3a5f;  --th-sb-hover: #0f2640;
    --th-card-shadow:       rgba(14, 165, 233, .15);
    --th-stat-hover-shadow: rgba(14, 165, 233, .25);
    --th-prog1: #0ea5e9;  --th-prog2: #38bdf8;
    --th-prog-bg: #0a1628;
    --th-btn:   linear-gradient(135deg, #0369a1, #0ea5e9);
    --th-stat-bg1: #0a1628;  --th-stat-bg2: #0d1f35;  --th-stat-border: #1e3a5f;
    --th-table-hdr-bg: #0a1628;  --th-table-hdr-border: #1e3a5f;  --th-table-row-hover: #0f2640;
    --th-tabs-border: #1e3a5f;  --th-tab-active: #38bdf8;
    --th-cal-head: #38bdf8;  --th-cal-wknd: #475569;
    --th-cal-today: linear-gradient(135deg, #0369a1, #0ea5e9);
    --th-cal-bday-border: #0ea5e9;  --th-cal-hover: #0f2640;
    --th-sel-ring: #0ea5e9;  --th-wfh-ring: #38bdf8;  --th-dot: #0ea5e9;
    --th-cal-sel-bg: rgba(255,255,255,.08);
    --th-dchip-bg: #0a2540;  --th-dchip-txt: #7dd3fc;  --th-dchip-border: rgba(14,165,233,.3);
    --th-modal-title: #38bdf8;
    --th-rules-bg1: #0a1628;  --th-rules-bg2: #0d1f35;  --th-rules-border: #1e3a5f;  --th-rules-txt: #7dd3fc;
    --th-input-border: #1e3a5f;
    --th-day-chip-sel: #0369a1;  --th-pic-sel-ring: #38bdf8;
    color: #e2e8f0;
    background: linear-gradient(135deg, #0d1117, #0f1923 60%, #111827);

    --th-body-font: 'Nunito', system-ui, sans-serif;
    --th-scroll-track:  #0a1628;
    --th-scroll-thumb:  #1e3a5f;
    --th-scroll-hover:  #2d5a8e;
}
body.theme-northit .sidebar         { background: #0a1628; border-right-color: #1e3a5f; }
body.theme-northit .sb-item         { color: #94a3b8; }
body.theme-northit .sb-item:hover   { background: #0f2640; }
body.theme-northit .sb-item.active  { background: linear-gradient(135deg, #0a2540, #0f2640); }
body.theme-northit .sb-title        { color: #0ea5e9; }
body.theme-northit .card            { background: #0d1f35; border: 1px solid #1e3a5f; }
body.theme-northit .card-title      { color: #38bdf8; }
body.theme-northit .info-box        { background: #0a2540; border-color: #1e3a5f; color: #7dd3fc; }
body.theme-northit th               { background: #0a1628 !important; color: #38bdf8 !important; border-bottom-color: #1e3a5f !important; }
body.theme-northit td               { border-bottom-color: #1a2e4a; color: #cbd5e1; }
body.theme-northit tr:hover td      { background: #0f2640 !important; }
body.theme-northit .finput          { background: #0a1628; border-color: #1e3a5f; color: #e2e8f0; }
body.theme-northit .sel-input       { background: #0a1628; border-color: #1e3a5f; color: #e2e8f0; }
body.theme-northit .modal           { background: #0d1f35; color: #e2e8f0; }
body.theme-northit .prog-bar        { background: #1e3a5f; }
body.theme-northit .hol-row         { border-bottom-color: #1e3a5f; }

body.theme-northit * { box-shadow: none !important; }
body.theme-northit .tabs            { border-bottom-color: #1e3a5f; }
body.theme-northit .tab             { color: #64748b; }
body.theme-northit .big-avatar      { border-color: #1e3a5f; }
body.theme-northit .rules-panel     { background: linear-gradient(135deg, #0a1628, #0d1f35) !important; border-color: #1e3a5f !important; }
body.theme-northit .day-chip        { border-color: #1e3a5f; color: #94a3b8; background: #0a1628; }
body.theme-northit .login-card      { background: #0d1f35; color: #e2e8f0; }
body.theme-northit .login-card .finput { background: #0a1628; border-color: #1e3a5f; color: #e2e8f0; }
body.theme-northit .login-card .totp-disp { background: #0a1628; color: #38bdf8; }
body.theme-northit .stat-lbl        { color: #7dd3fc; }
/* Use the SVG logo in header for North IT theme */
body.theme-northit .logo-text-fallback { display: none; }
body.theme-northit .logo-img.logo-white { display: block; }

/* ── 2b. PRIDE THEME — vivid rainbow ─────────────────────── */
body.theme-pride {
    --th-logo-font:  'Fredoka One', cursive;
    --th-bg1: #fffbf5;  --th-bg2: #f5fff8;  --th-bg3: #f5f8ff;
    --th-hdr-bg:  linear-gradient(90deg,
        #750787 0%, #004dff 17%, #008026 33%,
        #ffed00 50%, #ff8c00 67%, #e40303 83%, #750787 100%);
    --th-hdr-sub: #fff;
    --th-text:         #1e293b;
    --th-text-muted:   #64748b;
    --th-card:         #fff;
    --th-card-border:  #e5e7eb;
    --th-input-bg:     #fff;
    --th-bg:           #fffbf5;
    --th-sidebar:      #fff;
    --th-pri: #750787;  --th-pri2: #e40303;  --th-acc: #ff8c00;
    --th-sb-border: #fde68a;  --th-sb-hover: #fff8e7;
    --th-card-shadow:       rgba(117, 7, 135, .12);
    --th-stat-hover-shadow: rgba(228, 3, 3, .18);
    --th-prog1: #750787;  --th-prog2: #e40303;
    --th-prog-bg: #f5f0ff;
    --th-btn:   linear-gradient(90deg, #750787, #004dff, #008026, #ff8c00, #e40303);
    --th-stat-bg1: #fff8e7;  --th-stat-bg2: #f5fff8;  --th-stat-border: #fde68a;
    --th-table-hdr-bg: #fdf4ff;  --th-table-hdr-border: #e9d5ff;  --th-table-row-hover: #fff8e7;
    --th-tabs-border: #fde68a;  --th-tab-active: #750787;
    --th-cal-head: #750787;  --th-cal-wknd: #e40303;
    --th-cal-today: linear-gradient(90deg, #750787, #004dff, #008026, #ffed00, #ff8c00, #e40303);
    --th-cal-bday-border: #ff8c00;  --th-cal-hover: #fff8e7;
    --th-sel-ring: #750787;  --th-wfh-ring: #008026;  --th-dot: #e40303;
    --th-dchip-bg: #fde68a;  --th-dchip-txt: #750787;  --th-dchip-border: rgba(117,7,135,.25);
    --th-modal-title: #750787;
    --th-rules-bg1: #fff8e7;  --th-rules-bg2: #f5fff8;  --th-rules-border: #fde68a;  --th-rules-txt: #374151;
    --th-input-border: #fde68a;
    --th-day-chip-sel: #750787;  --th-pic-sel-ring: #e40303;

    --th-cal-sel-bg: rgba(231,57,0,.1);
    --th-body-font: 'Nunito', system-ui, sans-serif;
    --th-scroll-track:  #fff9f0;
    --th-scroll-thumb:  #fde68a;
    --th-scroll-hover:  #f7a800;
}
/* Rainbow sidebar section title rotation */
body.theme-pride .sb-section:nth-child(1) .sb-title { color: #e40303; }
body.theme-pride .sb-section:nth-child(2) .sb-title { color: #ff8c00; }
body.theme-pride .sb-section:nth-child(3) .sb-title { color: #008026; }
body.theme-pride .sb-section:nth-child(4) .sb-title { color: #004dff; }
body.theme-pride .sb-section:nth-child(5) .sb-title { color: #750787; }
body.theme-pride .sb-section:nth-child(6) .sb-title { color: #e40303; }
body.theme-pride .sb-item.active { background: linear-gradient(135deg, #fff8e7, #fde68a); color: #750787; }
body.theme-pride th { background: linear-gradient(90deg, #fff8e7, #f5fff8) !important; border-bottom-color: #fde68a !important; }
body.theme-pride tr:hover td { background: #fff8e7 !important; }
body.theme-pride .stat-card { border-width: 3px; }

/* ── 2c. LOVE THEME — deep crimson ────────────────────────── */
body.theme-love {
    --th-logo-font:  'Dancing Script', cursive;
    --th-bg1: #fff5f5;  --th-bg2: #fff0f0;  --th-bg3: #fdf0f4;
    --th-hdr-bg:  linear-gradient(135deg, #be123c, #e11d48);
    --th-hdr-sub: #fda4af;
    --th-text:         #1e293b;
    --th-text-muted:   #64748b;
    --th-card:         #fff;
    --th-card-border:  #fecdd3;
    --th-input-bg:     #fff;
    --th-bg:           #fff5f5;
    --th-sidebar:      #fff;
    --th-pri: #be123c;  --th-pri2: #e11d48;  --th-acc: #fb7185;
    --th-sb-border: #fecdd3;  --th-sb-hover: #fff1f2;
    --th-card-shadow:       rgba(190, 18, 60, .10);
    --th-stat-hover-shadow: rgba(190, 18, 60, .20);
    --th-prog1: #be123c;  --th-prog2: #fb7185;
    --th-prog-bg: #fff0f3;
    --th-btn:   linear-gradient(135deg, #be123c, #fb7185);
    --th-stat-bg1: #fff5f5;  --th-stat-bg2: #fff0f5;  --th-stat-border: #fecdd3;
    --th-table-hdr-bg: #fff5f7;  --th-table-hdr-border: #fecdd3;  --th-table-row-hover: #fff0f2;
    --th-tabs-border: #fecdd3;  --th-tab-active: #be123c;
    --th-cal-head: #be123c;  --th-cal-wknd: #fb7185;
    --th-cal-today: linear-gradient(135deg, #be123c, #fb7185);
    --th-cal-bday-border: #fda4af;  --th-cal-hover: #fff0f2;
    --th-sel-ring: #be123c;  --th-wfh-ring: #fb7185;  --th-dot: #e11d48;
    --th-dchip-bg: #fecdd3;  --th-dchip-txt: #be123c;  --th-dchip-border: rgba(190,18,60,.2);
    --th-modal-title: #be123c;
    --th-rules-bg1: #fff5f5;  --th-rules-bg2: #fff0f5;  --th-rules-border: #fecdd3;  --th-rules-txt: #374151;
    --th-input-border: #fecdd3;
    --th-day-chip-sel: #be123c;  --th-pic-sel-ring: #fda4af;

    --th-cal-sel-bg: rgba(190,18,60,.1);
    --th-body-font: 'Nunito', system-ui, sans-serif;
    --th-scroll-track:  #fff5f5;
    --th-scroll-thumb:  #fecdd3;
    --th-scroll-hover:  #fb7185;
}

/* ── 2d. BLM THEME — warm earth / browns ──────────────────── */
/*
   Inspired by the Black Lives Matter movement colours and the
   Pan-African flag (red, black, green) blended with warm earthy
   browns to create a dignified, grounded aesthetic.
   Brown tones represent the earth and the richness of Black heritage.
*/
body.theme-blm {
    --th-logo-font:  'Pacifico', cursive;
    --th-bg1: #fdf6f0;  --th-bg2: #f9ede1;  --th-bg3: #f5e6d5;
    --th-hdr-bg:  linear-gradient(135deg, #3d1f00 0%, #6b3a1f 50%, #1a0a00 100%);
    --th-hdr-sub: #d4a574;
    --th-text:         #1e293b;
    --th-text-muted:   #78716c;
    --th-card:         #fff;
    --th-card-border:  #e7e0d6;
    --th-input-bg:     #fff;
    --th-bg:           #fdf6f0;
    --th-sidebar:      #fff;
    --th-pri:  #6b3a1f;  --th-pri2: #8b4513;  --th-acc: #c17f3c;
    --th-sb-border: #f0d5b8;  --th-sb-hover: #faebd7;
    --th-card-shadow:       rgba(107, 58, 31, .15);
    --th-stat-hover-shadow: rgba(107, 58, 31, .25);
    --th-prog1: #6b3a1f;  --th-prog2: #c17f3c;
    --th-prog-bg: #f5efe8;
    --th-btn:   linear-gradient(135deg, #6b3a1f, #c17f3c);
    --th-stat-bg1: #fdf6f0;  --th-stat-bg2: #f9ede1;  --th-stat-border: #f0d5b8;
    --th-table-hdr-bg: #fdf6f0;  --th-table-hdr-border: #f0d5b8;  --th-table-row-hover: #faebd7;
    --th-tabs-border: #f0d5b8;  --th-tab-active: #6b3a1f;
    --th-cal-head: #8b4513;  --th-cal-wknd: #c17f3c;
    --th-cal-today: linear-gradient(135deg, #6b3a1f, #c17f3c);
    --th-cal-bday-border: #d4a574;  --th-cal-hover: #faebd7;
    --th-sel-ring: #6b3a1f;  --th-wfh-ring: #8b4513;  --th-dot: #c17f3c;
    --th-dchip-bg: #f0d5b8;  --th-dchip-txt: #6b3a1f;  --th-dchip-border: rgba(107,58,31,.2);
    --th-modal-title: #6b3a1f;
    --th-rules-bg1: #fdf6f0;  --th-rules-bg2: #f9ede1;  --th-rules-border: #f0d5b8;  --th-rules-txt: #374151;
    --th-input-border: #d4a574;
    --th-day-chip-sel: #6b3a1f;  --th-pic-sel-ring: #c17f3c;

    --th-cal-sel-bg: rgba(107,58,31,.1);
    --th-body-font: 'Nunito', system-ui, sans-serif;
    --th-scroll-track:  #fdf6f0;
    --th-scroll-thumb:  #e7e0d6;
    --th-scroll-hover:  #c17f3c;
}
body.theme-blm .sb-title       { color: #8b4513; }
body.theme-blm .card-title     { color: #6b3a1f; }
/* BLM sidebar accent — earthy with subtle red/green/black nods */
body.theme-blm .sb-section:nth-child(1) .sb-title { color: #8b0000; }  /* deep red */
body.theme-blm .sb-section:nth-child(2) .sb-title { color: #8b4513; }  /* saddle brown */
body.theme-blm .sb-section:nth-child(3) .sb-title { color: #2d5a27; }  /* forest green */
body.theme-blm .sb-section:nth-child(4) .sb-title { color: #6b3a1f; }
body.theme-blm .sb-section:nth-child(5) .sb-title { color: #8b0000; }
body.theme-blm .sb-section:nth-child(6) .sb-title { color: #2d5a27; }

/* ── 3. ANIMATIONS OFF ────────────────────────────────────── */
body.no-anim *                          { animation: none !important; transition: none !important; }
body.no-anim .particle,
body.no-anim .bday-card,
body.no-anim .bday-msg                  { display: none !important; }

/* ── 4. RESET / BASE ──────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--th-body-font);
    background: linear-gradient(135deg, var(--th-bg1) 0%, var(--th-bg2) 60%, var(--th-bg3) 100%);
    min-height: 100vh;
    font-size: 14px;
    color: #374151;
}

a { color: var(--th-pri); text-decoration: none; }
a:hover { text-decoration: none; }

/* ── 5. LAYOUT ────────────────────────────────────────────── */

/* Header */
.hdr {
    background: var(--th-hdr-bg);
    padding: .65rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
}
.hdr-left { display: flex; align-items: center; gap: .5rem; }
.hdr-logo { display: flex; align-items: center; gap: .6rem; }

/* SVG logo variants (hidden by default; shown per theme) */
.logo-img {
    display: none;
    height: 36px;
    width: auto;
}
.logo-img.logo-blue { display: none; }
.logo-img.logo-white { display: none; }
/* Text logo (all other themes) */
.logo-text-fallback { display: flex; flex-direction: column; }
.logo-title {
    font-family: var(--th-logo-font);
    color: #fff;
    font-size: 1.2rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    line-height: 1.2;
}
.logo-sub {
    color: var(--th-hdr-sub);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.hdr-right { display: flex; align-items: center; gap: .85rem; }
.hdr-user  { display: flex; align-items: center; gap: .5rem; }
.hdr-name  { color: #fff; font-weight: 700; font-size: .85rem; line-height: 1.2; }
.hdr-role  { color: var(--th-hdr-sub); font-size: .7rem; font-weight: 600; }

.avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .72rem;
    border: 2px solid rgba(255, 255, 255, .4);
    flex-shrink: 0;
    overflow: hidden;
    background: var(--th-sb-border);
    color: var(--th-pri);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.logout-btn {
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    padding: .3rem .85rem;
    border-radius: 16px;
    font-family: var(--th-body-font);
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
}
.logout-btn:hover { background: rgba(255, 255, 255, .32); }

/* ── App Switcher ────────────────────────────────────────────
   Sits in the header between the logo and the right section.
   Shows the current app name with a chevron; opens a dropdown
   listing all available North IT applications.
   ──────────────────────────────────────────────────────────── */
.app-switcher {
    position: relative;
}
.app-switcher-btn {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
    color: #fff;
    padding: .4rem .45rem;
    font-family: var(--th-body-font);
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s, border-color .18s;
    white-space: nowrap;
    user-select: none;
}
.app-switcher-btn:hover,
.app-switcher-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, .24);
    border-color: rgba(255, 255, 255, .42);
}

/* ── App Switcher 3x3 dot grid ───────────────────── */
.app-switcher-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    width: 18px;
    height: 18px;
    padding: 1px;
}
.app-switcher-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .85;
}
.app-switcher-btn:hover .app-switcher-dot,
.app-switcher-btn[aria-expanded="true"] .app-switcher-dot {
    opacity: 1;
}


/* Dropdown */
.app-switcher-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    background: var(--th-card, #1e1e2e);
    border: 1px solid var(--th-card-border, rgba(255, 255, 255, .12));
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
    padding: .35rem;
    z-index: 200;
    display: none;
    animation: switcher-in .14s ease;
}
.app-switcher-menu.open { display: block; }

@keyframes switcher-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.app-switcher-menu-header {
    padding: .3rem .55rem .4rem;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--th-cal-head, #94a3b8);
    border-bottom: 1px solid var(--th-card-border, rgba(255, 255, 255, .07));
    margin-bottom: .25rem;
}

.app-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .6rem;
    border-radius: 7px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--th-text, #e2e8f0);
    cursor: pointer;
    text-decoration: none;
    transition: background .14s;
    position: relative;
}
.app-item:hover { background: var(--th-sb-hover, rgba(255, 255, 255, .07)); }
.app-item.current {
    background: var(--th-sb-hover, rgba(255, 255, 255, .09));
    cursor: default;
}
.app-item-icon { font-size: 1.05rem; flex-shrink: 0; width: 1.4rem; text-align: center; }
.app-item-info { flex: 1; line-height: 1.25; }
.app-item-name { font-weight: 700; }
.app-item-desc {
    font-size: .68rem;
    font-weight: 500;
    opacity: .55;
    margin-top: 1px;
}
.app-item-check {
    font-size: .75rem;
    color: var(--th-pri, #a78bfa);
    flex-shrink: 0;
}
.app-item-ext {
    font-size: .65rem;
    opacity: .4;
    flex-shrink: 0;
}

/* Divider between app groups */
.app-switcher-divider {
    height: 1px;
    background: rgba(255, 255, 255, .07);
    margin: .3rem .1rem;
}

/* Layout */
.layout  { display: flex; height: calc(100vh - 57px); }
.content { flex: 1; padding: 1.5rem; overflow-y: auto; min-height: 0; max-width: calc(100vw - 204px); }

/* Sidebar */
.sidebar {
    width: 204px;
    background: var(--th-sidebar, #fff);
    border-right: 1px solid var(--th-sb-border);
    padding: 1.25rem .75rem;
    flex-shrink: 0;
    overflow-y: auto;
}
.sb-section { margin-bottom: 1.25rem; }
.sb-title {
    font-size: .65rem; font-weight: 800;
    color: var(--th-acc);
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 0 .5rem; margin-bottom: .4rem;
}
.sb-item {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .65rem; margin-bottom: 1px;
    border-radius: 10px;
    cursor: pointer;
    font-size: .82rem; font-weight: 700;
    color: #374151;
    transition: all .15s;
    background: none; border: none;
    font-family: var(--th-body-font);
    width: 100%; text-align: left;
}
.sb-item:hover  { background: var(--th-sb-hover); color: var(--th-pri); }
.sb-item.active { background: linear-gradient(135deg, var(--th-sb-border), var(--th-sb-hover)); color: var(--th-pri); }

/* Next bank holiday widget (sidebar bottom) */
.sb-bh-item { padding: .3rem .65rem; }
.sb-bh-name { font-weight: 800; font-size: .72rem; color: var(--th-pri); }
.sb-bh-date { font-size: .68rem; color: var(--th-acc); }

/* ── 6. CARDS ─────────────────────────────────────────────── */
.card {
    background: var(--th-card, #fff);
    border: 1px solid var(--th-card-border, transparent);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px var(--th-card-shadow);
    margin-bottom: 1.25rem;
}
.card-title {
    font-size: 1rem; font-weight: 800;
    color: var(--th-pri);
    margin-bottom: 1.1rem;
    display: flex; align-items: center; gap: .4rem;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .85rem;
    margin-bottom: 1.25rem;
}
.stat-card {
    background: linear-gradient(135deg, var(--th-stat-bg1), var(--th-stat-bg2));
    border: 2px solid var(--th-stat-border);
    border-radius: 14px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px var(--th-stat-hover-shadow); }
.stat-val { font-size: 1.9rem; font-weight: 800; color: var(--th-pri); display: block; }
.stat-lbl { font-size: .72rem; color: var(--th-acc); font-weight: 700; }

/* ── 7. TABS ──────────────────────────────────────────────── */
.tabs {
    display: flex; gap: .35rem;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid var(--th-tabs-border);
    overflow-x: auto; padding-bottom: 0;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    padding: .55rem 1rem;
    border: none; background: none;
    font-family: var(--th-body-font); font-weight: 700; font-size: .82rem;
    color: #9ca3af;
    cursor: pointer;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color .2s, border-color .2s;
}
.tab.active { color: var(--th-tab-active); border-bottom-color: var(--th-tab-active); }
.tab:hover  { color: var(--th-tab-active); }

/* ── 8. TABLES ────────────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .83rem; }
th {
    padding: .65rem .85rem;
    text-align: left; font-weight: 800;
    color: var(--th-pri);
    background: var(--th-table-hdr-bg);
    border-bottom: 2px solid var(--th-table-hdr-border);
}
td {
    padding: .65rem .85rem;
    border-bottom: 1px solid #f9fafb;
    vertical-align: middle;
}
tr:hover td { background: var(--th-table-row-hover); }

/* ── 9. BADGES ────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center;
    padding: .15rem .6rem;
    border-radius: 20px;
    font-size: .72rem; font-weight: 800;
}
.bg  { background: var(--c-ok-bg);  color: var(--c-ok-txt);  }
.by  { background: var(--c-wrn-bg); color: var(--c-wrn-txt); }
.br  { background: var(--c-err-bg); color: var(--c-err-txt); }
.bp  { background: var(--th-input-bg, var(--th-sb-border));  color: var(--th-pri); border: 1px solid var(--th-card-border, var(--th-sb-border)); }
.bk  { background: #fce7f3; color: #9d174d; }
.bb  { background: #e0f2fe; color: #0369a1; }

/* Named badge variants (used by Quotes app) */
.badge-green  { background: rgba(34,197,94,.12);  color: #15803d; }
.badge-blue   { background: rgba(59,130,246,.12);  color: #1d4ed8; }
.badge-gray   { background: rgba(107,114,128,.12); color: #4b5563; }
.badge-red    { background: rgba(239,68,68,.12);   color: #b91c1c; }
.badge-yellow { background: rgba(234,179,8,.12);   color: #a16207; }
.badge-purple { background: rgba(139,92,246,.12);  color: #7c3aed; }

/* ── 9b. SEARCH, QUOTE CARDS, STATS ──────────────────────── */

.form-input {
    width: 100%; padding: .55rem .85rem;
    border: 2px solid var(--th-input-border);
    border-radius: 10px;
    font-family: var(--th-body-font); font-size: .85rem;
    outline: none; transition: border .2s, box-shadow .2s;
    color: inherit; background: var(--th-input-bg, var(--th-card, #fff));
    box-sizing: border-box;
}
.form-input:focus { border-color: var(--th-pri2); box-shadow: 0 0 0 3px var(--th-card-shadow); }
.form-input::placeholder { color: var(--th-text-muted, #9ca3af); opacity: .7; }

.filter-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem 1.5rem; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.quote-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .5rem; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin: 1rem 0; }
.stat-card {
    text-align: center; padding: 1.25rem .75rem;
    border: 1px solid var(--th-card-border, #e5e7eb); border-radius: 12px;
    background: var(--th-card, #fff);
}
.stat-val { display: block; font-size: 2rem; font-weight: 800; color: var(--th-text); }
.stat-lbl { display: block; font-size: .75rem; color: var(--th-text-muted, #6b7280); margin-top: .25rem; text-transform: uppercase; letter-spacing: .04em; }

.quote-card {
    padding: .85rem 1rem; border: 1px solid var(--th-card-border, #e5e7eb);
    border-radius: 10px; cursor: pointer; transition: border-color .15s, box-shadow .15s;
    margin-bottom: .5rem; background: var(--th-card, #fff);
}
.quote-card:hover { border-color: var(--th-pri2, #6366f1); box-shadow: 0 2px 8px var(--th-card-shadow, rgba(0,0,0,.06)); }
.qc-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.qc-ref { font-weight: 800; font-size: .85rem; font-family: var(--th-mono-font, 'Fira Code', monospace); color: var(--th-pri, #4f46e5); }
.qc-name { font-weight: 600; font-size: .92rem; color: var(--th-text); }
.qc-customer { font-size: .8rem; color: var(--th-text-muted, #6b7280); }
.qc-meta { display: flex; gap: 1rem; font-size: .75rem; color: var(--th-text-muted, #9ca3af); margin-top: .2rem; }

.empty-state { text-align: center; padding: 2rem 1rem; color: var(--th-text-muted, #9ca3af); font-size: .9rem; }

.section-title { font-size: 1rem; font-weight: 700; color: var(--th-text); margin: 1.25rem 0 .75rem; }

.checkbox-row { display: flex; align-items: center; gap: .4rem; }
.checkbox-row label { cursor: pointer; font-size: .85rem; }
.cb-row { display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem; }
.cb-row label { cursor: pointer; font-size: .85rem; }

.form-footer { display: flex; gap: .75rem; justify-content: flex-end; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--th-card-border, #e5e7eb); }

.field-hint { font-size: .75rem; color: var(--th-text-muted, #9ca3af); margin-top: .25rem; font-style: italic; }

.data-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.data-table th {
    text-align: left; padding: .5rem .6rem; font-size: .75rem; font-weight: 700;
    color: var(--th-text-muted, #6b7280); text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 2px solid var(--th-card-border, #e5e7eb);
}
.data-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--th-card-border, #e5e7eb); color: var(--th-text); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--th-input-bg, rgba(0,0,0,.02)); }

.action-bar { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .75rem 0; padding: .5rem 0; border-bottom: 1px solid var(--th-card-border, #e5e7eb); }
.summary-cell { padding: .6rem 0; }
.summary-lbl { font-size: .7rem; color: var(--th-text-muted, #6b7280); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-bottom: .15rem; }
.summary-val { font-weight: 600; font-size: .95rem; color: var(--th-text); }

/* ── Line Item View (quote detail) ────────────────────────── */
.line-item-view {
    border: 1px solid var(--th-card-border, #e5e7eb);
    border-radius: 10px;
    padding: .85rem 1rem;
    margin-bottom: .6rem;
    background: var(--th-card, #fff);
}
.lv-header { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.lv-title  { font-weight: 800; font-size: .92rem; flex: 1; min-width: 150px; }
.lv-value  { font-weight: 800; font-size: 1rem; color: var(--th-pri, #7c3aed); white-space: nowrap; }
.lv-desc   { font-size: .82rem; color: var(--th-text-muted, #6b7280); margin-top: .4rem; line-height: 1.5; }

.scope-wrap  { margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--th-card-border, #e5e7eb); }
.scope-title { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--th-text-muted); margin-bottom: .35rem; }
.scope-row   { display: flex; align-items: center; gap: .5rem; font-size: .82rem; padding: .2rem 0; flex-wrap: wrap; }
.scope-type  { font-weight: 700; text-transform: capitalize; min-width: 80px; }
.scope-val   { color: var(--th-pri, #7c3aed); font-weight: 600; word-break: break-all; }
.scope-flags { font-size: .75rem; color: var(--th-text-muted); }
.scope-cred  { font-size: .78rem; color: var(--th-text-muted); padding-left: 1.5rem; }

/* ── Line Item Editor (edit quote) ────────────────────────── */
.line-item-editor { margin-top: 2rem; padding-top: 1.5rem; border-top: 2px solid var(--th-card-border, #e5e7eb); }
.li-list { margin-top: .75rem; }
.li-edit-row {
    border: 1px solid var(--th-card-border, #e5e7eb);
    border-radius: 10px;
    padding: .75rem 1rem;
    margin-bottom: .5rem;
    background: var(--th-card, #fff);
}
.lie-header { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.lie-title  { font-weight: 700; font-size: .9rem; flex: 1; min-width: 150px; }
.lie-value  { font-weight: 800; font-size: .95rem; color: var(--th-pri, #7c3aed); white-space: nowrap; }
.lie-scope-toggle { margin-top: .4rem; }

.badge-sm { font-size: .65rem; padding: .15rem .45rem; }

/* ── History list (quote detail) ──────────────────────────── */
.history-list { margin-top: .5rem; }
.history-row {
    display: flex; gap: .75rem; align-items: center;
    padding: .4rem 0; border-bottom: 1px solid var(--th-card-border, #e5e7eb);
    font-size: .82rem; flex-wrap: wrap;
}
.history-row:last-child { border-bottom: none; }
.hist-type { font-weight: 700; text-transform: capitalize; min-width: 120px; color: var(--th-pri, #7c3aed); }
.hist-note { flex: 1; color: var(--th-text); }
.hist-date { font-size: .75rem; color: var(--th-text-muted, #6b7280); white-space: nowrap; }

/* ── 10. BUTTONS ──────────────────────────────────────────── */
.btn {
    padding: .5rem .95rem;
    border-radius: 9px; border: 2px solid transparent;
    cursor: pointer;
    font-family: var(--th-body-font); font-weight: 700; font-size: .82rem;
    transition: all .2s;
    box-sizing: border-box;
}
.btn-s  { padding: .28rem .65rem; font-size: .75rem; border-radius: 7px; }
.btn-ok  { background: var(--c-ok-bg);  color: var(--c-ok-txt);  }
.btn-ok:hover  { background: #10b981; color: #fff; }
.btn-no  { background: var(--c-err-bg); color: var(--c-err-txt); }
.btn-no:hover  { background: #ef4444; color: #fff; }
.btn-pu  { background: var(--th-input-bg, var(--th-sb-border)); color: var(--th-pri); border: 2px solid var(--th-card-border, var(--th-sb-border)); }
.btn-pu:hover  { background: var(--th-pri2, var(--th-pri)); color: #fff; }
.btn-pi  { background: var(--th-input-bg, var(--th-sb-border)); color: var(--th-pri); border: 2px solid var(--th-card-border, var(--th-sb-border)); }
.btn-pi:hover  { background: var(--th-pri2, var(--th-pri)); color: #fff; }
.btn-gr  { background: var(--th-btn); color: #fff; box-shadow: 0 3px 10px var(--th-card-shadow); }
.btn-gr:hover  { transform: translateY(-1px); }
.btn-red { background: #ef4444; color: #fff; }
.btn-red:hover { background: #dc2626; transform: translateY(-1px); }
.btn-gray { background: var(--th-input-bg, #f3f4f6); color: var(--th-text-muted, #6b7280); border: 2px solid var(--th-card-border, transparent); }
.btn-gray:hover { background: var(--th-card-border, #e5e7eb); }

/* ── 10b. THEME TOGGLE BUTTONS (day selectors etc.) ───────── */
.theme-btn {
    padding: .4rem .85rem; border-radius: 8px; font-size: .82rem; font-weight: 700;
    cursor: pointer; border: 1px solid var(--th-card-border, #334155);
    background: var(--th-input-bg, var(--th-card, #0f172a)); color: var(--th-text-muted, #94a3b8);
    transition: all .15s ease;
}
.theme-btn:hover { border-color: var(--th-acc, #6366f1); color: var(--th-text, #e2e8f0); }
.theme-btn.active {
    background: var(--th-btn, linear-gradient(135deg, #7c3aed, #ec4899));
    border-color: transparent; color: #fff;
    box-shadow: 0 2px 8px rgba(124, 58, 237, .35);
}

/* ── 10c. CUSTOM CHECKBOXES ───────────────────────────────── */
input[type="checkbox"] {
    -webkit-appearance: none; appearance: none;
    width: 1.15rem; height: 1.15rem; border-radius: 4px; flex-shrink: 0;
    border: 2px solid var(--th-card-border, #334155);
    background: var(--th-input-bg, var(--th-card, #0f172a));
    cursor: pointer; position: relative; transition: all .15s ease;
}
input[type="checkbox"]:hover { border-color: var(--th-acc, #6366f1); }
input[type="checkbox"]:checked {
    background: var(--th-acc, #6366f1);
    border-color: var(--th-acc, #6366f1);
}
input[type="checkbox"]:checked::after {
    content: '✓'; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 900; color: #fff;
    text-shadow: 0 0 2px rgba(0,0,0,.5);
}

/* ── 11. MODALS ───────────────────────────────────────────── */
.modal-bg {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .5);
    display: flex; align-items: center; justify-content: center;
    z-index: 200; padding: 1rem;
    backdrop-filter: blur(3px);
}
.modal {
    background: var(--th-card, #fff);
    color: var(--th-text, #1e293b);
    border-radius: 22px;
    padding: 1.75rem;
    max-width: 500px; width: 100%;
    max-height: 88vh; overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    animation: modal-in .2s ease-out;
}
@keyframes modal-in {
    from { transform: scale(.92) translateY(16px); opacity: 0; }
    to   { transform: scale(1)   translateY(0);    opacity: 1; }
}
.modal-title  { font-size: 1.1rem; font-weight: 800; color: var(--th-modal-title); margin-bottom: 1.1rem; }
.modal-footer { display: flex; gap: .65rem; justify-content: flex-end; margin-top: 1.25rem; }

/* ── 12. CALENDAR ─────────────────────────────────────────── */
.cal-outer { width: 100%; }
.cal-nav-row {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-bottom: .85rem;
}
.cal-nav {
    background: var(--th-sb-border); border: none;
    color: var(--th-pri);
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer; font-size: .95rem;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s; flex-shrink: 0;
}
.cal-nav:hover { background: var(--th-pri2); color: #fff; }

.cal-month-lbl {
    font-size: 1.1rem; font-weight: 800; color: var(--th-pri);
    cursor: pointer; padding: .25rem .85rem;
    border-radius: 16px; transition: background .2s;
    background: none; border: none;
    font-family: var(--th-body-font);
    display: flex; align-items: center; gap: .35rem;
}
.cal-month-lbl:hover { background: var(--th-sb-border); }

/* Awareness event banner — legacy, kept for compat */
.awareness-banner {
    border-radius: 12px;
    padding: .6rem 1rem;
    margin-bottom: .75rem;
    font-size: .8rem; font-weight: 700;
    display: flex; align-items: center; gap: .5rem;
    color: #fff;
    opacity: .92;
}
.awareness-banner .aw-emoji { font-size: 1.2rem; flex-shrink: 0; }
.awareness-banner .aw-label { flex: 1; }
.awareness-banner.is-active { opacity: 1; box-shadow: 0 2px 10px rgba(0,0,0,.2); }

/* ── Awareness Event List (below calendar) ────────────────── */
.aw-event-item {
    border: 1px solid var(--th-sb-border, #e2e8f0);
    border-radius: 10px;
    margin-bottom: .5rem;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}
.aw-event-item:hover {
    border-color: var(--th-acc, #818cf8);
    box-shadow: 0 2px 8px rgba(99, 102, 241, .1);
}
.aw-event-item.aw-active {
    border-color: var(--th-acc, #818cf8);
    background: rgba(99, 102, 241, .04);
}
.aw-event-item.expanded {
    border-color: var(--th-acc, #818cf8);
    box-shadow: 0 2px 12px rgba(99, 102, 241, .15);
}
.aw-event-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem .85rem;
    gap: .5rem;
}
.aw-event-left {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}
.aw-color-bar {
    width: 4px;
    align-self: stretch;
    border-radius: 2px;
    flex-shrink: 0;
}
.aw-event-emoji {
    font-size: 1.2rem;
    flex-shrink: 0;
}
.aw-event-label {
    font-weight: 800;
    font-size: .85rem;
    color: var(--th-text, #1e293b);
}
.aw-event-date {
    font-size: .7rem;
    color: var(--th-text-muted, #64748b);
    font-weight: 600;
    margin-top: .1rem;
}
.aw-event-right {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}
.aw-today-badge {
    background: var(--th-acc, #818cf8);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 10px;
    white-space: nowrap;
}
.aw-chevron {
    font-size: .75rem;
    color: var(--th-text-muted, #64748b);
    transition: transform .2s;
}
.aw-event-item.expanded .aw-chevron {
    transform: rotate(90deg);
}
.aw-event-body {
    display: none;
    padding: 0 .85rem .75rem 3.2rem;
    font-size: .82rem;
    line-height: 1.65;
    color: var(--th-text-muted, #475569);
}
.aw-event-item.expanded .aw-event-body {
    display: block;
}
/* Calendar day highlight when event selected */
td.aw-highlight {
    outline: 2px solid var(--th-acc, #818cf8) !important;
    outline-offset: -1px;
    background: rgba(99, 102, 241, .08) !important;
    border-radius: 8px;
}
/* Awareness dot on calendar days */
.aw-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 2px;
}

/* Theme overrides */
body.theme-dark .aw-event-item { border-color: #27272a; }
body.theme-dark .aw-event-item:hover, body.theme-dark .aw-event-item.expanded { border-color: #818cf8; }
body.theme-dark .aw-event-label { color: #fafafa; }
body.theme-dark .aw-event-body { color: #a1a1aa; }
body.theme-dark .aw-today-badge { background: #818cf8; color: #fff; }
body.theme-dark .aw-chevron { color: #71717a; }
body.theme-dark .aw-event-date { color: #71717a; }
body.theme-hacker .aw-event-item { border-color: #1a2e1a; }
body.theme-hacker .aw-event-item:hover, body.theme-hacker .aw-event-item.expanded { border-color: #00ff00; }
body.theme-hacker .aw-event-label { color: #00ff00; }
body.theme-hacker .aw-event-body { color: #4ade80; }
body.theme-hacker .aw-today-badge { background: #166534; color: #00ff00; }
body.theme-hacker td.aw-highlight { outline-color: #00ff00 !important; background: rgba(0,255,0,.06) !important; }

/* Calendar table */
.cal-tbl { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.cal-tbl thead th {
    text-align: center; font-size: .68rem; font-weight: 800;
    color: var(--th-cal-head); padding: .35rem 0;
    background: transparent !important; border: none !important;
}
.cal-tbl thead th.wk-head { width: 28px; font-size: .6rem; opacity: .5; }

.cal-tbl tbody td.wk-cell {
    text-align: center; font-size: .6rem; font-weight: 800;
    color: var(--th-cal-head); opacity: .7;
    cursor: pointer; border-radius: 6px;
    padding: 0; height: 40px;
    vertical-align: middle; white-space: nowrap;
}
.cal-tbl tbody td.wk-cell:hover { background: var(--th-sb-border); color: var(--th-pri); opacity: 1; }

.cal-tbl tbody td.cal-day {
    text-align: center; vertical-align: middle;
    height: 40px; border-radius: 8px;
    cursor: pointer; font-size: .82rem; font-weight: 700;
    position: relative;
    transition: background .12s, transform .12s;
    padding: 0; line-height: 1.2;
}
.cal-tbl tbody td.cal-day:hover { background: var(--th-cal-hover); transform: scale(1.07); z-index: 10; }

/* Day state classes */
.cal-today    { background: var(--th-cal-today)  !important; color: #fff !important; }
.cal-bh       { background: #fee2e2 !important; color: #991b1b !important; }
.cal-comp     { background: #fef3c7 !important; color: #92400e !important; }
.cal-hol-ok   { background: #d1fae5 !important; color: #065f46 !important; }
.cal-hol-pend { background: #fef9c3 !important; color: #92400e !important; outline: 1px dashed #fbbf24; outline-offset: -2px; }
.cal-wfh      { outline: 2px solid var(--th-wfh-ring); outline-offset: -2px; }
.cal-om       { opacity: .25; cursor: default !important; }
.cal-om:hover { background: transparent !important; transform: none !important; }
.cal-wknd     { color: var(--th-cal-wknd); }
.cal-bday     { background: linear-gradient(135deg, var(--th-stat-bg1), var(--th-stat-bg2)) !important;
                color: var(--th-pri) !important; outline: 2px solid var(--th-cal-bday-border); outline-offset: -2px; }
.cal-sel      { box-shadow: 0 0 0 2.5px var(--th-sel-ring) !important; background: var(--th-cal-sel-bg, rgba(168,85,247,.12)) !important; }
.cal-disabled { opacity: .35; cursor: not-allowed !important; pointer-events: none; }
.cal-day[data-action="cal-select-date"]:hover:not(.cal-sel):not(.cal-disabled) {
    box-shadow: 0 0 0 2px var(--th-sel-ring); transition: box-shadow .12s;
}
.cal-taken    { background: #fef2f2 !important; color: #dc2626 !important; cursor: not-allowed !important; }
.cal-too-soon { background: #fff7ed !important; color: #c2410c !important; cursor: not-allowed !important; }

/* Textareas: vertical resize only */
textarea, .finput[type="text"] { resize: vertical; }
.cal-sick      { background: #fde8e8 !important; color: #9b1c1c !important; outline: 2px solid #f87171; outline-offset: -2px; }
.cal-unpaid    { background: #fef9c3 !important; color: #78350f !important; outline: 2px dashed #d97706; outline-offset: -2px; }
.cal-unpaid-req { background: #ede9fe !important; color: #5b21b6 !important; outline: 2px dashed #8b5cf6; outline-offset: -2px; }

/* Half-day indicator: diagonal split */
.cal-half.cal-hol-ok   { background: linear-gradient(135deg, #d1fae5 50%, rgba(255,255,255,.7) 50%) !important; }
.cal-half.cal-hol-pend { background: linear-gradient(135deg, #fef9c3 50%, rgba(255,255,255,.7) 50%) !important; }
.cal-half.cal-unpaid-req { background: linear-gradient(135deg, #ede9fe 50%, rgba(255,255,255,.7) 50%) !important; }
.cal-half-label { display:block; font-size:.45rem; font-weight:800; line-height:1; color:#d97706; margin-top:-2px; letter-spacing:.02em; }

/* Dark themes: half-day */
body.theme-northit .cal-half.cal-hol-ok,
body.theme-dark .cal-half.cal-hol-ok,
body.theme-hacker .cal-half.cal-hol-ok,
body.theme-watersports .cal-half.cal-hol-ok { background: linear-gradient(135deg, rgba(16,185,129,.15) 50%, rgba(255,255,255,.05) 50%) !important; }
body.theme-northit .cal-half.cal-hol-pend,
body.theme-dark .cal-half.cal-hol-pend,
body.theme-hacker .cal-half.cal-hol-pend,
body.theme-watersports .cal-half.cal-hol-pend { background: linear-gradient(135deg, rgba(245,158,11,.1) 50%, rgba(255,255,255,.05) 50%) !important; }
body.theme-northit .cal-half-label,
body.theme-dark .cal-half-label,
body.theme-hacker .cal-half-label,
body.theme-watersports .cal-half-label { color: #fbbf24; }
/* Admin-only: striped pattern on sick days makes them visually distinct from approved holidays */
.cal-sick::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, transparent, transparent 3px, rgba(239,68,68,.12) 3px, rgba(239,68,68,.12) 6px); border-radius: 8px; pointer-events: none; }

/* Dots and icons on calendar cells */
.dot {
    position: absolute; bottom: 3px; left: 50%;
    transform: translateX(-50%);
    width: 5px; height: 5px;
    border-radius: 50%; background: var(--th-dot); display: block;
}
.bday-dot {
    position: absolute; bottom: 2px; left: 50%;
    transform: translateX(-50%);
    font-size: .5rem; line-height: 1;
}
.sp-icon { font-size: .48rem; display: block; line-height: 1; margin-top: .05rem; }

/* Legend */
.legend { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .85rem; }
.leg    { display: flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; color: var(--th-text-muted, #374151); }
.ldot  { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; position: relative; overflow: hidden; }
/* Legend dots inherit calendar class backgrounds; suppress outlines/borders meant for full cells */
.ldot.cal-hol-pend, .ldot.cal-sick, .ldot.cal-unpaid, .ldot.cal-unpaid-req, .ldot.cal-bday { outline: none !important; }

/* Calendar day tooltip */
.cal-day[data-tooltip] { cursor: pointer; }
.cal-day[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute; bottom: calc(100% + 6px); left: 50%;
    transform: translateX(-50%);
    background: var(--th-card, #1e293b); color: var(--th-text, #e2e8f0);
    border: 1px solid var(--th-card-border, #334155);
    border-radius: 8px; padding: .45rem .7rem;
    font-size: .72rem; font-weight: 600; line-height: 1.5;
    white-space: pre-line; text-align: left;
    z-index: 100; pointer-events: none;
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
    min-width: 140px; max-width: 240px; width: max-content;
}
/* Arrow */
.cal-day[data-tooltip]:hover::before {
    content: '';
    position: absolute; bottom: calc(100% + 2px); left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: var(--th-card-border, #334155);
    z-index: 101; pointer-events: none;
}
/* Flip tooltip below for first row to avoid clipping */
.cal-tbl tbody tr:first-child .cal-day[data-tooltip]:hover::after {
    bottom: auto; top: calc(100% + 6px);
}
.cal-tbl tbody tr:first-child .cal-day[data-tooltip]:hover::before {
    bottom: auto; top: calc(100% + 2px);
    border-top-color: transparent; border-bottom-color: var(--th-card-border, #334155);
}
/* Shift tooltip for left-edge and right-edge cells */
.cal-tbl tbody td:nth-child(2).cal-day[data-tooltip]:hover::after { left: 0; transform: none; }
.cal-tbl tbody td:nth-child(2).cal-day[data-tooltip]:hover::before { left: 14px; transform: none; }
.cal-tbl tbody td:last-child.cal-day[data-tooltip]:hover::after { left: auto; right: 0; transform: none; }
.cal-tbl tbody td:last-child.cal-day[data-tooltip]:hover::before { left: auto; right: 14px; transform: none; }

/* ── 13. FORMS & INPUTS ───────────────────────────────────── */
.fgroup   { margin-bottom: 1.1rem; text-align: left; }
.flabel   { display: block; font-weight: 700; font-size: .8rem; color: var(--th-pri); margin-bottom: .35rem; }
.finput {
    width: 100%; padding: .5rem .85rem;
    border: 2px solid var(--th-input-border);
    border-radius: 12px;
    font-family: var(--th-body-font); font-size: .85rem;
    outline: none; transition: border .2s;
    color: #374151; background: #fff;
    box-sizing: border-box;
}
.finput:focus { border-color: var(--th-pri2); box-shadow: 0 0 0 3px var(--th-card-shadow); }

/* Dark theme date/time picker icons */
body.theme-northit .finput::-webkit-calendar-picker-indicator,
body.theme-hacker .finput::-webkit-calendar-picker-indicator,
body.theme-dark .finput::-webkit-calendar-picker-indicator,
body.theme-watersports .finput::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.5); cursor: pointer; }
body.theme-northit .sel-input::-webkit-calendar-picker-indicator,
body.theme-hacker .sel-input::-webkit-calendar-picker-indicator,
body.theme-dark .sel-input::-webkit-calendar-picker-indicator,
body.theme-watersports .sel-input::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.5); cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }

.sel-input {
    padding: .5rem .85rem;
    border: 2px solid var(--th-input-border);
    border-radius: 9px;
    font-family: var(--th-body-font); font-size: .85rem;
    outline: none; background: #fff; cursor: pointer; color: #374151;
    box-sizing: border-box;
}
.sel-input:focus { border-color: var(--th-pri); }

.radio-row {
    display: flex; align-items: center; gap: .5rem;
    margin-bottom: .6rem; cursor: pointer;
    font-size: .85rem; font-weight: 600;
}
.radio-row input { accent-color: var(--th-pri2); width: 16px; height: 16px; cursor: pointer; }

.day-chip {
    padding: .35rem .8rem; border-radius: 20px;
    border: 2px solid var(--th-input-border);
    cursor: pointer; font-size: .78rem; font-weight: 700;
    transition: all .15s; background: #fff;
    font-family: var(--th-body-font);
}
.day-chip.sel { background: var(--th-day-chip-sel); color: #fff; border-color: var(--th-day-chip-sel); }

/* ── 14. AVATAR PICKER ────────────────────────────────────── */
.pic-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; margin-top: .5rem; }
.pic-opt  {
    border-radius: 50%; width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; cursor: pointer;
    border: 3px solid transparent; transition: all .15s; overflow: hidden;
}
.pic-opt:hover    { transform: scale(1.15); }
.pic-opt.sel      { border-color: var(--th-day-chip-sel); box-shadow: 0 0 0 2px var(--th-pic-sel-ring); }
.pic-opt img      { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.big-avatar {
    width: 70px; height: 70px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; border: 4px solid white;
    box-shadow: 0 4px 16px var(--th-card-shadow);
    overflow: hidden; flex-shrink: 0;
}
.big-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ── 15. MISC BOXES ───────────────────────────────────────── */
.info-box {
    background: var(--th-sb-border);
    border: 1px solid var(--th-sb-hover);
    border-radius: 12px; padding: .9rem;
    font-size: .8rem; color: var(--th-pri);
    margin-bottom: .85rem; line-height: 1.5;
}
.warn-box {
    background: var(--c-wrn-bg, #fff7ed); border: 1px solid var(--c-wrn-border, #fed7aa);
    border-radius: 12px; padding: .9rem;
    font-size: .8rem; color: var(--c-wrn-txt, #9a3412);
    margin-bottom: .85rem; line-height: 1.5; font-weight: 600;
}
.err-box {
    background: var(--c-err-bg); border: 1px solid #fca5a5;
    border-radius: 12px; padding: .9rem;
    font-size: .8rem; color: var(--c-err-txt);
    margin-bottom: .85rem; line-height: 1.5; font-weight: 700;
}
.hint-box {
    background: var(--th-sb-border); border-radius: 12px; padding: .9rem;
    font-size: .8rem; color: var(--th-pri);
    margin-bottom: 1.25rem; text-align: left;
}

.rules-panel {
    background: linear-gradient(135deg, var(--th-rules-bg1), var(--th-rules-bg2));
    border: 2px solid var(--th-rules-border);
    border-radius: 14px; padding: 1rem; margin-bottom: .85rem;
    color: var(--th-rules-txt, #374151);
}
.rule-item { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .5rem; font-size: .8rem; font-weight: 600; color: var(--th-rules-txt, #374151); }
.rule-item:last-child { margin-bottom: 0; }
.rule-icon { font-size: 1rem; flex-shrink: 0; margin-top: .05rem; }

.dchip {
    background: var(--th-dchip-bg); color: var(--th-dchip-txt);
    padding: .15rem .5rem; border-radius: 5px;
    font-size: .72rem; font-weight: 700;
    border: 1px solid var(--th-dchip-border, rgba(124,58,237,.2));
    display: inline-block;
}
.dchip-more {
    background: var(--th-dchip-bg); color: var(--th-dchip-txt);
    padding: .15rem .5rem; border-radius: 5px;
    font-size: .68rem; font-weight: 800;
    border: 1px solid var(--th-dchip-border, rgba(124,58,237,.2));
}
.hol-row {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .65rem 0; border-bottom: 1px solid #f9fafb;
    flex-wrap: wrap;
}

.effect-btn { background: #f3f4f6; border: 2px solid transparent; border-radius: 8px; padding: .35rem .5rem; cursor: pointer; font-size: 1.1rem; transition: all .15s; }
.effect-btn:hover { transform: scale(1.2); }
.effect-btn.sel   { border-color: var(--th-sel-ring); background: var(--th-sb-border); }

/* Progress bars */
.prog-bar  { height: 9px; background: var(--th-prog-bg, var(--th-sb-border)); border-radius: 10px; overflow: hidden; margin-top: .4rem; }
.prog-fill { height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--th-prog1), var(--th-prog2)); transition: width .5s ease; }

/* Grid helpers */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

/* ── 16. LOGIN PAGE ───────────────────────────────────────── */
.login-page {
    min-height: 100vh;
    background: var(--th-hdr-bg);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.login-card {
    background: #fff; border-radius: 24px;
    padding: 2.5rem 2rem;
    width: 100%; max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
    text-align: center;
}
.login-logo { font-family: var(--th-logo-font); font-size: 1.9rem; color: var(--th-pri); margin-bottom: .25rem; }
.login-sub  { color: var(--th-acc); font-size: .85rem; font-weight: 700; margin-bottom: 1.75rem; }
.totp-disp  { font-family: monospace; font-size: 1.6rem; letter-spacing: .35em; color: var(--th-pri); font-weight: 800; text-align: center; background: #f3f4f6; border-radius: 8px; padding: .4rem .75rem; margin: .4rem 0; }
.sec-badge  { display: inline-flex; align-items: center; gap: .3rem; background: var(--c-ok-bg); color: var(--c-ok-txt); padding: .25rem .75rem; border-radius: 20px; font-size: .72rem; font-weight: 700; }

.btn-main {
    width: 100%; padding: .85rem; border: none;
    background: var(--th-btn); color: #fff;
    border-radius: 14px;
    font-family: var(--th-body-font); font-size: .95rem; font-weight: 800;
    cursor: pointer; transition: all .2s;
    box-shadow: 0 4px 15px var(--th-card-shadow);
    margin-top: .5rem;
}
.btn-main:hover { transform: translateY(-2px); box-shadow: 0 6px 20px var(--th-card-shadow); }

.err { color: #dc2626; font-size: .78rem; font-weight: 700; margin-top: .3rem; }

/* ── 17. TOAST ────────────────────────────────────────────── */
#toast {
    position: fixed; bottom: 1.5rem; right: 1.5rem;
    background: var(--th-hdr-bg); color: #fff;
    padding: .75rem 1.25rem; border-radius: 14px;
    font-weight: 700; font-size: .85rem;
    z-index: 10000;
    max-width: 320px; line-height: 1.4;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
    pointer-events: none;
    display: none;   /* shown via .toast-visible */
}
#toast.toast-visible { display: block; animation: toast-in .25s ease-out; }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── 18. PARTICLES / BIRTHDAY ─────────────────────────────── */
#particles { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }

.particle {
    position: absolute; font-size: 1.5rem;
    animation: float-up 2.5s ease-out forwards;
    pointer-events: none;
}
.bday-card {
    position: absolute;
    animation: float-up 2.8s ease-out forwards;
    pointer-events: none;
}
.bday-polaroid {
    background: #fff; border-radius: 6px;
    padding: 7px 7px 18px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    display: flex; flex-direction: column; align-items: center;
    min-width: 58px; border: 1px solid #e5e7eb;
}
.bday-face { width: 52px; height: 52px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 2rem; overflow: hidden; }
.bday-face img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.bday-name { font-size: .52rem; font-weight: 800; color: #374151; margin-top: 4px; text-align: center; white-space: nowrap; }
.bday-msg  { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); text-align: center; z-index: 10; animation: pop-in .4s ease-out; pointer-events: none; }

@keyframes float-up {
    0%   { opacity: 1;   transform: translateY(0)      rotate(0deg)  scale(1);   }
    100% { opacity: 0;   transform: translateY(-420px) rotate(25deg) scale(0.6); }
}
@keyframes pop-in {
    from { transform: translate(-50%, -60%) scale(.4); opacity: 0; }
    to   { transform: translate(-50%, -60%) scale(1);  opacity: 1; }
}

/* Bounce for login logo */
.spin-emoji { font-size: 3rem; display: block; margin-bottom: 1rem; animation: bounce 2s infinite ease-in-out; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Loading spinner (initial page load) */
#app-loading { display: flex; align-items: center; justify-content: center; height: 100vh; }
.loading-spinner {
    width: 48px; height: 48px;
    border: 4px solid var(--th-sb-border);
    border-top-color: var(--th-pri);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 19. RESPONSIVE / MOBILE ──────────────────────────────── */

/* Hamburger button (hidden on desktop) */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: .35rem .4rem;
    border-radius: 8px;
    color: #fff;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.menu-toggle:hover { background: rgba(255,255,255,.12); }
.menu-toggle .bar {
    display: block;
    width: 22px; height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .25s, opacity .2s;
}
/* Animated X when open */
body.menu-open .menu-toggle .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .menu-toggle .bar:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Sidebar overlay backdrop */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 199;
    backdrop-filter: blur(2px);
}
body.menu-open .sidebar-overlay { display: block; }



/* ── 20. ALERTS ────────────────────────────────────────────── */
/* ── Critical Alert Bar (above header) ────────────────────── */
.critical-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.25rem;
    background: #dc2626;
    color: #fff;
    text-align: center;
    justify-content: center;
    line-height: 1.4;
}
body.theme-unicorn  .critical-bar { background: #e11d48; }
body.theme-northit  .critical-bar { background: #b91c1c; }
body.theme-pride    .critical-bar { background: #dc2626; }
body.theme-love     .critical-bar { background: #be123c; }
body.theme-blm      .critical-bar { background: #991b1b; }
body.theme-hacker   .critical-bar { background: #450a0a; color: #fca5a5; }
body.theme-trans    .critical-bar { background: #e11d48; }
body.theme-clean    .critical-bar { background: #dc2626; }
body.theme-dark     .critical-bar { background: #7f1d1d; color: #fecaca; }
body.theme-watersports .critical-bar { background: #991b1b; }

.alert-zone {
    margin-bottom: .85rem;
}
.alert-banner {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem 1rem;
    border: 1px solid;
    border-radius: 10px;
    margin-bottom: .5rem;
    font-size: .85rem;
    line-height: 1.4;
}
.alert-dismiss {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .9rem;
    opacity: .55;
    padding: .1rem .3rem;
    flex-shrink: 0;
    border-radius: 6px;
    color: inherit;
    font-family: inherit;
    transition: opacity .15s;
}
.alert-dismiss:hover { opacity: 1; }

/* Alert bell in header */
.alert-bell {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: .35rem;
    border-radius: 8px;
    transition: background .15s;
    color: var(--th-hdr-text, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
}
.alert-bell svg { display: block; }
.alert-bell:hover { background: rgba(255,255,255,.15); }
.alert-dot {
    position: absolute;
    top: -4px; right: -4px;
    background: #ef4444;
    color: #fff;
    font-size: .6rem;
    font-weight: 800;
    min-width: 16px; height: 16px;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
    box-shadow: 0 0 0 2px var(--th-head-bg, #1a1a2e);
}
.alert-bell.has-alerts svg {
    animation: bell-ring 3s ease-in-out infinite;
    transform-origin: 50% 4px;
}
@keyframes bell-ring {
    0%, 80%, 100% { transform: rotate(0); }
    84% { transform: rotate(12deg); }
    88% { transform: rotate(-10deg); }
    92% { transform: rotate(6deg); }
    96% { transform: rotate(-3deg); }
}

/* ── 21. BADGES ─────────────────────────────────────────────── */
/* Badge chips rendered inline are styled via JS inline styles for colour
   flexibility (each badge has its own colour). This class provides common
   reset for the revoke button inside chips. */
.badge-revoke {
    margin-left: .15rem;
    vertical-align: middle;
}

/* Sidebar close btn: hidden on desktop, shown in mobile media query */
.sidebar-close { display: none; }

@media (max-width: 700px) {
    /* Grids */
    .grid2        { grid-template-columns: 1fr; }
    .stats-grid   { grid-template-columns: 1fr 1fr; }

    /* Show hamburger */
    .menu-toggle  { display: flex; }

    /* Hide user name/role text on small screens */
    .hdr-name, .hdr-role { display: none; }

    /* Header: tighter padding */
    .hdr { padding: .55rem .9rem; }

    /* Logo sub hidden on very small */
    .logo-sub { display: none; }

    /* Sidebar becomes a fixed slide-in drawer */
    .sidebar {
        position: fixed;
        top: 0; left: 0;
        width: 240px;
        height: 100dvh;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform .28s cubic-bezier(.4,0,.2,1);
        overflow-y: auto;
        box-shadow: 4px 0 24px rgba(0,0,0,.35);
        padding-top: 3.5rem;    /* clear the close button */
    }
    body.menu-open .sidebar { transform: translateX(0); }

    /* Content fills full width */
    .content {
        max-width: 100vw;
        padding: 1rem .85rem;
    }

    /* Layout: no gap for sidebar (it's overlaid) */
    .layout { display: block; height: calc(100vh - 50px); overflow-y: auto; }

    /* Close (×) button inside drawer */
    .sidebar-close {
        display: flex;
        position: absolute;
        top: .65rem; right: .65rem;
        background: rgba(255,255,255,.08);
        border: none; border-radius: 8px;
        color: inherit;
        font-size: 1.1rem;
        width: 32px; height: 32px;
        align-items: center; justify-content: center;
        cursor: pointer;
        transition: background .15s;
    }
    .sidebar-close:hover { background: rgba(255,255,255,.16); }

    /* Table: allow horizontal scroll inside cards */
    .tbl-wrap { max-width: calc(100vw - 1.7rem); }

    /* Compact card padding */
    .card { padding: 1rem; }

    /* Stat cards stacked */
    .stats-grid { gap: .65rem; }
}

@media (max-width: 400px) {
    .stats-grid { grid-template-columns: 1fr; }
    .logo-title { font-size: 1rem; }
}

/* ── Hacker Theme ───────────────────────────────────────────── */
body.theme-hacker,
body.theme-hacker * {
    font-family: 'Courier New', Courier, monospace;
}
body.theme-hacker {
    --th-bg:           #000000;
    --th-sidebar:      #000000;
    --th-sb-border:    #00ff00;
    --th-sb-item:      #000000;
    --th-sb-item-h:    #001a00;
    --th-sb-text:      #00ff00;
    --th-dchip-bg: #001a00; --th-dchip-txt: #00ff00; --th-dchip-border: rgba(0,255,0,.3);
    --th-rules-bg1: #001a00; --th-rules-bg2: #0a1f0a; --th-rules-border: #003300; --th-rules-txt: #4ade80;
    --th-pri:          #00ff00;
    --th-sec:          #00cc00;
    --th-acc:          #00ff00;
    --th-head-bg:      #000000;
    --th-hdr-bg:   #000;
    --th-hdr-sub:  #00cc00;
    --th-card:         #000000;
    --th-card-border:  #00ff00;
    --th-text:         #00ff00;
    --th-text-muted:   #00bb00;
    --th-input-bg:     #000000;
    --th-input-border: #00ff00;
    --th-cal-sel-bg:    rgba(0,255,0,.12);
    --th-modal-title:  #00ff00;
    --th-btn:          linear-gradient(135deg, #001a00, #003300);
    --th-cal-head:     #00ff00;
    --th-body-font:    'Courier New', monospace;
    --th-scroll-track:  #000000;
    --th-scroll-thumb:  #003300;
    --th-scroll-hover:  #00ff00;
    --th-head-font:    'Courier New', monospace;
    background: #000000;
    color: #00ff00;

    --th-pri2: #00cc00;
    --th-card-shadow: rgba(0,255,0,.1);
    --th-sb-hover: #001a00;
    --th-sel-ring: #00ff00;
    --th-table-hdr-bg: #000000;
    --th-table-hdr-border: #00ff00;
    --th-table-row-hover: #001a00;
    --th-prog1: #00ff00;
    --th-prog2: #00cc00;
    --th-prog-bg: #001a00;
    --th-stat-bg1: #0d120d;
    --th-stat-bg2: #001a00;
    --th-stat-border: #00ff00;
}
body.theme-hacker .sidebar {
    border-right: 1px solid #00ff00;
    background: #000000;
}
body.theme-hacker .hdr {
    background: #000;
    border-bottom: 1px solid #00ff00;
}
body.theme-hacker .hdr-name { color: #00ff00; }
body.theme-hacker .logo-title { color: #00ff00; text-shadow: 0 0 8px rgba(0,255,0,.4); }
body.theme-hacker .app-switcher-btn { color: #00ff00; }
body.theme-hacker .alert-bell { color: #00ff00; }
body.theme-hacker .logout-btn { color: #00ff00; border-color: #00ff00; background: rgba(0,255,0,.1); }
body.theme-hacker .card {
    background: #000000;
    border: 1px solid #00ff00;
}
body.theme-hacker .card:hover {
    border-color: #00ff00;
}
body.theme-hacker .btn-gr {
    background: #000000;
    color: #00ff00;
    border: 1px solid #00ff00;
    font-family: 'Courier New', monospace;
}
body.theme-hacker .btn-gr:hover {
    background: #00ff00;
    color: #000000;
}
body.theme-hacker .finput,
body.theme-hacker .sel-input,
body.theme-hacker textarea {
    background: #000000;
    border: 1px solid #00ff00;
    color: #00ff00;
    font-family: 'Courier New', monospace;
}
body.theme-hacker .finput:focus,
body.theme-hacker .sel-input:focus {
    border-color: #00ff00;
    outline: none;
}
body.theme-hacker .sb-item.active {
    background: #001a00;
    color: #00ff00;
    border-left: 3px solid #00ff00;
}
body.theme-hacker .hdr-logo img,
body.theme-hacker .login-logo img,
body.theme-hacker img[alt="North IT"] {
    filter: invert(0) sepia(1) saturate(10) hue-rotate(100deg) brightness(1.5);
}
body.theme-hacker table th {
    background: #000000 !important;
    color: #00ff00 !important;
    border-bottom: 1px solid #00ff00 !important;
}
body.theme-hacker table td {
    border-bottom: 1px solid #003300;
    color: #00ff00;
}
body.theme-hacker tr:hover td {
    background: #001a00 !important;
}
body.theme-hacker .modal {
    background: #000000;
    border: 1px solid #00ff00;
    color: #00ff00;
}
body.theme-hacker .tabs {
    border-bottom: 1px solid #00ff00;
}
body.theme-hacker .tab.active {
    border-bottom: 2px solid #00ff00;
    color: #00ff00;
}
body.theme-hacker .badge {
    border: 1px solid #00ff00;
}
body.theme-hacker * {
    box-shadow: none !important;
    text-shadow: none !important;
}

body.theme-hacker .sidebar {
    border-right: 1px solid #1a2e1a;
    background: linear-gradient(180deg, #0a0f0a 0%, #0d120d 100%);
}
body.theme-hacker .card {
    background: #0d120d;
    border: 1px solid #1a2e1a;
    box-shadow: 0 0 20px rgba(34,197,94,.05);
}
body.theme-hacker .card:hover {
    box-shadow: 0 0 30px rgba(34,197,94,.12);
}
body.theme-hacker .btn-gr {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #000;
    font-family: 'Orbitron', monospace;
    font-size: .7rem;
    letter-spacing: .05em;
}
body.theme-hacker .btn-gr:hover {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 0 16px rgba(34,197,94,.5);
}
body.theme-hacker .finput,
body.theme-hacker .sel-input,
body.theme-hacker textarea {
    background: #0a0f0a;
    border-color: #1a2e1a;
    color: #4ade80;
    font-family: 'Orbitron', 'Courier New', monospace;
}
body.theme-hacker .finput:focus,
body.theme-hacker .sel-input:focus {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,.2);
}
body.theme-hacker .sb-item.active {
    background: #0f2d0f;
    color: #4ade80;
    border-left: 3px solid #22c55e;
}
body.theme-hacker .sb-item:hover {
    background: #122012;
    color: #4ade80;
}
body.theme-hacker .sb-title     { color: #22c55e; text-transform: uppercase; letter-spacing: .1em; }
body.theme-hacker .card-title   { color: #4ade80; font-family: 'Orbitron', monospace; }
body.theme-hacker th            { background: #0d120d !important; color: #22c55e !important; border-bottom: 1px solid #1a2e1a !important; }
body.theme-hacker tr:hover td   { background: #0f2d0f !important; }
body.theme-hacker .cal-today    { background: #0f2d0f !important; border: 2px solid #22c55e !important; color: #4ade80 !important; }
body.theme-hacker .cal-sel      { background: #16a34a !important; color: #000 !important; font-weight: 900; }
body.theme-hacker .cal-bh       { background: rgba(239,68,68,.15) !important; color: #fca5a5 !important; }
body.theme-hacker .cal-comp     { background: rgba(245,158,11,.15) !important; color: #fbbf24 !important; }
body.theme-hacker .cal-hol-ok   { background: #064e3b !important; color: #6ee7b7 !important; }
body.theme-hacker .cal-hol-pend { background: #1c2f1c !important; color: #fbbf24 !important; }
body.theme-hacker .cal-sick     { background: rgba(239,68,68,.18) !important; color: #fca5a5 !important; outline-color: #f87171; }
body.theme-hacker .cal-unpaid   { background: rgba(245,158,11,.12) !important; color: #fbbf24 !important; outline-color: #d97706; }
body.theme-hacker .cal-unpaid-req { background: rgba(139,92,246,.15) !important; color: #c4b5fd !important; outline-color: #8b5cf6; }
body.theme-hacker .badge        { background: #0f2d0f; color: #4ade80; border: 1px solid #22c55e; }
body.theme-hacker .stat-card    { border: 1px solid #1a2e1a; background: #0d120d; }
body.theme-hacker .info-box     { background: #0a0f0a; border-left: 3px solid #22c55e; color: #4ade80; }
/* Scanline effect for authentic terminal feel */
body.theme-hacker::after {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0,0,0,.03) 0px,
        rgba(0,0,0,.03) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    z-index: 9999;
}
body.theme-hacker .sb-section:nth-child(n) .sb-title { color: #22c55e; }

/* ── Transgender Theme ─────────────────────────────────────── */
body.theme-trans {
    --th-bg:           #f0f8ff;
    --th-sidebar:      #e8f4fd;
    --th-sb-border:    #d4eaf7;
    --th-sb-item:      #e8f4fd;
    --th-sb-item-h:    #d6ecf8;
    --th-dchip-bg: #e0f0ff; --th-dchip-txt: #2563eb; --th-dchip-border: rgba(85,205,252,.35);
    --th-rules-bg1: #e8f4fd; --th-rules-bg2: #f0e8ff; --th-rules-border: #d4eaf7; --th-rules-txt: #374151;
    --th-sb-text:      #4a9eda;
    --th-pri:          #55cdfc;
    --th-sec:          #f7a8b8;
    --th-acc:          #55cdfc;
    --th-head-bg:      #55cdfc;
    --th-hdr-bg:   linear-gradient(90deg, #55cdfc, #f7a8b8, #fff, #f7a8b8, #55cdfc);
    --th-hdr-sub:  #2c5f8a;
    --th-card:         #ffffff;
    --th-card-border:  #d4eaf7;
    --th-text:         #2c5f8a;
    --th-text-muted:   #7ab5d8;
    --th-input-bg:     #f8fbff;
    --th-input-border: #b8d9f0;
    --th-modal-title:  #55cdfc;
    --th-btn:          linear-gradient(135deg, #55cdfc, #f7a8b8);
    --th-cal-head:     #55cdfc;
    --th-body-font:    'Nunito', system-ui, sans-serif;
    --th-scroll-track:  #f0f8ff;
    --th-scroll-thumb:  #bde0fe;
    --th-scroll-hover:  #55cdfc;
    --th-head-font:    'Nunito', system-ui, sans-serif;
    background: linear-gradient(160deg, #f5fbff 0%, #fff0f5 50%, #f5fbff 100%);
    color: #2c5f8a;

    --th-pri2: #f7a8b8;
    --th-card-shadow: rgba(85,205,252,.1);
    --th-sb-hover: #e8f4fd;
    --th-sel-ring: #55cdfc;
    --th-cal-sel-bg: rgba(85,205,252,.12);
    --th-table-hdr-bg: #e8f4fd;
    --th-table-hdr-border: #bde0fe;
    --th-table-row-hover: #f0f8ff;
    --th-prog1: #55cdfc;
    --th-prog2: #f7a8b8;
    --th-prog-bg: #e8f4fd;
    --th-stat-bg1: #e8f4fd;
    --th-stat-bg2: #fce4ec;
    --th-stat-border: #bde0fe;
}
body.theme-trans .sidebar { background: linear-gradient(180deg, #55cdfc 0%, #f7a8b8 50%, #ffffff 75%, #f7a8b8 85%, #55cdfc 100%); border-right: none; }
body.theme-trans .sb-item { color: rgba(255,255,255,.85); }
body.theme-trans .sb-item:hover { background: rgba(255,255,255,.2); color: #fff; }
body.theme-trans .sb-item.active { background: rgba(255,255,255,.3); color: #fff; border-left: 3px solid #fff; }
body.theme-trans .sb-title { color: rgba(255,255,255,.7); }
body.theme-trans .hdr { background: linear-gradient(90deg, #55cdfc, #f7a8b8, #ffffff, #f7a8b8, #55cdfc); border-bottom: none; }
body.theme-trans .hdr-name, body.theme-trans .hdr-role { color: #2c5f8a; }
body.theme-trans .btn-gr { background: linear-gradient(135deg, #55cdfc, #f7a8b8); color: #fff; border: none; }
body.theme-trans .btn-gr:hover { background: linear-gradient(135deg, #f7a8b8, #55cdfc); }
body.theme-trans .card { background: #fff; border: 1px solid #d4eaf7; }
body.theme-trans .finput, body.theme-trans .sel-input { background: #f8fbff; border-color: #b8d9f0; color: #2c5f8a; }
body.theme-trans .finput:focus, body.theme-trans .sel-input:focus { border-color: #55cdfc; }
body.theme-trans .tabs { border-bottom-color: #d4eaf7; }
body.theme-trans .tab.active { border-bottom-color: #55cdfc; color: #55cdfc; }
body.theme-trans table th { background: #e8f4fd !important; color: #4a9eda !important; border-bottom-color: #d4eaf7 !important; }

/* ── Clean Theme ───────────────────────────────────────────── */
body.theme-clean {
    --th-bg:           #fafafa;
    --th-sidebar:      #ffffff;
    --th-sb-border:    #e5e7eb;
    --th-sb-item:      #ffffff;
    --th-sb-item-h:    #f3f4f6;
    --th-dchip-bg: #f3f4f6; --th-dchip-txt: #374151; --th-dchip-border: #d1d5db;
    --th-rules-bg1: #f9fafb; --th-rules-bg2: #f3f4f6; --th-rules-border: #e5e7eb; --th-rules-txt: #374151;
    --th-sb-text:      #6b7280;
    --th-pri:          #111827;
    --th-sec:          #374151;
    --th-acc:          #111827;
    --th-head-bg:      #ffffff;
    --th-hdr-bg:   #fff;
    --th-hdr-sub:  #6b7280;
    --th-card:         #ffffff;
    --th-card-border:  #e5e7eb;
    --th-text:         #111827;
    --th-text-muted:   #6b7280;
    --th-input-bg:     #ffffff;
    --th-input-border: #d1d5db;
    --th-modal-title:  #111827;
    --th-btn:          #111827;
    --th-cal-head:     #111827;
    --th-body-font:    'Inter', 'Nunito', system-ui, sans-serif;
    --th-scroll-track:  #fafafa;
    --th-scroll-thumb:  #d1d5db;
    --th-scroll-hover:  #9ca3af;
    --th-head-font:    'Inter', 'Nunito', system-ui, sans-serif;
    background: #fafafa;
    color: #111827;

    --th-pri2: #1f2937;
    --th-card-shadow: rgba(0,0,0,.06);
    --th-sb-hover: #f9fafb;
    --th-sel-ring: #111827;
    --th-cal-sel-bg: rgba(17,24,39,.08);
    --th-table-hdr-bg: #f9fafb;
    --th-table-hdr-border: #e5e7eb;
    --th-table-row-hover: #f9fafb;
    --th-prog1: #111827;
    --th-prog2: #6b7280;
    --th-prog-bg: #e5e7eb;
    --th-stat-bg1: #f9fafb;
    --th-stat-bg2: #f3f4f6;
    --th-stat-border: #e5e7eb;
}
body.theme-clean * { box-shadow: none !important; }
body.theme-clean .sidebar { background: #fff; border-right: 1px solid #e5e7eb; }
body.theme-clean .sb-item { color: #6b7280; }
body.theme-clean .sb-item:hover { background: #f9fafb; color: #111827; }
body.theme-clean .sb-item.active { background: #f3f4f6; color: #111827; border-left: 3px solid #111827; }
body.theme-clean .sb-title { color: #9ca3af; letter-spacing: .06em; }
body.theme-clean .hdr { background: #fff; border-bottom: 1px solid #e5e7eb; }
body.theme-clean .hdr-name { color: #111827; }
body.theme-clean .hdr-role { color: #6b7280; }
body.theme-clean .logo-title { color: #111827; }
body.theme-clean .logo-sub { color: #6b7280; }
body.theme-clean .logo-text-fallback { display: none; }
body.theme-clean .logo-img.logo-blue { display: block; }
body.theme-clean .alert-bell { color: #6b7280; }
body.theme-clean .logout-btn { color: #111827; background: #f3f4f6; }
body.theme-clean .app-switcher-btn { color: #374151; }
body.theme-clean .card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; }
body.theme-clean .btn-gr { background: #111827; color: #fff; border: none; border-radius: 6px; }
body.theme-clean .btn-gr:hover { background: #1f2937; }
body.theme-clean .finput, body.theme-clean .sel-input { background: #fff; border-color: #d1d5db; color: #111827; border-radius: 6px; }
body.theme-clean .finput:focus, body.theme-clean .sel-input:focus { border-color: #111827; outline: none; }
body.theme-clean table th { background: #f9fafb !important; color: #6b7280 !important; border-bottom: 1px solid #e5e7eb !important; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
body.theme-clean table td { border-bottom: 1px solid #f3f4f6; color: #374151; }
body.theme-clean .badge { border-radius: 4px; }
body.theme-clean .modal { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; }

/* ── Dark Theme ────────────────────────────────────────────── */
body.theme-dark {
    --th-bg:           #09090b;
    --th-sidebar:      #18181b;
    --th-sb-border:    #27272a;
    --th-sb-item:      #18181b;
    --th-sb-item-h:    #27272a;
    --th-dchip-bg: #27272a; --th-dchip-txt: #a1a1aa; --th-dchip-border: #3f3f46;
    --th-rules-bg1: #18181b; --th-rules-bg2: #1c1c1f; --th-rules-border: #27272a; --th-rules-txt: #a1a1aa;
    --th-sb-text:      #a1a1aa;
    --th-pri:          #ffffff;
    --th-sec:          #e4e4e7;
    --th-acc:          #ffffff;
    --th-head-bg:      #18181b;
    --th-hdr-bg:   #18181b;
    --th-hdr-sub:  #a1a1aa;
    --th-card:         #18181b;
    --th-card-border:  #27272a;
    --th-text:         #fafafa;
    --th-text-muted:   #71717a;
    --th-input-bg:     #09090b;
    --th-input-border: #3f3f46;
    --th-cal-sel-bg:    rgba(255,255,255,.08);
    --th-modal-title:  #fafafa;
    --th-btn:          #fafafa;
    --th-cal-head:     #fafafa;
    --th-body-font:    'Nunito', system-ui, sans-serif;
    --th-scroll-track:  #09090b;
    --th-scroll-thumb:  #27272a;
    --th-scroll-hover:  #3f3f46;
    --th-head-font:    'Nunito', system-ui, sans-serif;
    background: #09090b;
    color: #fafafa;

    --th-pri2: #e4e4e7;
    --th-card-shadow: rgba(0,0,0,.3);
    --th-sb-hover: #27272a;
    --th-sel-ring: #fafafa;
    --th-table-hdr-bg: #18181b;
    --th-table-hdr-border: #27272a;
    --th-table-row-hover: #27272a;
    --th-prog1: #fafafa;
    --th-prog2: #a1a1aa;
    --th-prog-bg: #27272a;
    --th-stat-bg1: #18181b;
    --th-stat-bg2: #1c1c20;
    --th-stat-border: #27272a;
}
body.theme-dark * { box-shadow: none !important; }
body.theme-dark .sidebar { background: #18181b; border-right: 1px solid #27272a; }
body.theme-dark .sb-item { color: #a1a1aa; }
body.theme-dark .sb-item:hover { background: #27272a; color: #fafafa; }
body.theme-dark .sb-item.active { background: #27272a; color: #fafafa; border-left: 3px solid #ffffff; }
body.theme-dark .sb-title { color: #52525b; }
body.theme-dark .logo-text-fallback { display: none; }
body.theme-dark .logo-img.logo-white { display: block; }
body.theme-dark .hdr { background: #18181b; border-bottom: 1px solid #27272a; }
body.theme-dark .card { background: #18181b; border: 1px solid #27272a; }
body.theme-dark .card:hover { border-color: #3f3f46; }
body.theme-dark .btn-gr { background: #fafafa; color: #09090b; border: none; }
body.theme-dark .btn-gr:hover { background: #e4e4e7; }
body.theme-dark .finput, body.theme-dark .sel-input { background: #09090b; border-color: #3f3f46; color: #fafafa; }
body.theme-dark .finput:focus, body.theme-dark .sel-input:focus { border-color: #71717a; outline: none; }
body.theme-dark table th { background: #18181b !important; color: #71717a !important; border-bottom: 1px solid #27272a !important; }
body.theme-dark table td { border-bottom: 1px solid #1c1c1f; color: #d4d4d8; }
body.theme-dark tr:hover td { background: #1c1c1f !important; }
body.theme-dark .modal { background: #18181b; border: 1px solid #27272a; color: #fafafa; }
body.theme-dark .tabs { border-bottom-color: #27272a; }
body.theme-dark .tab.active { border-bottom-color: #fff; color: #fff; }

/* ── Watersports Theme ─────────────────────────────────────── */
body.theme-watersports {
    --th-bg:           #001a2e;
    --th-sidebar:      #001f38;
    --th-sb-border:    #0077b6;
    --th-sb-item:      #001f38;
    --th-sb-item-h:    #003554;
    --th-dchip-bg: #002540; --th-dchip-txt: #48cae4; --th-dchip-border: rgba(0,180,216,.3);
    --th-rules-bg1: #001a2e; --th-rules-bg2: #002540; --th-rules-border: #0077b6; --th-rules-txt: #90e0ef;
    --th-sb-text:      #48cae4;
    --th-pri:          #00b4d8;
    --th-sec:          #0096c7;
    --th-acc:          #90e0ef;
    --th-head-bg:      #001a2e;
    --th-hdr-bg:   linear-gradient(135deg, #001a2e, #003554);
    --th-hdr-sub:  #00b4d8;
    --th-card:         #002540;
    --th-card-border:  #0077b6;
    --th-text:         #caf0f8;
    --th-text-muted:   #48cae4;
    --th-input-bg:     #001a2e;
    --th-input-border: #0077b6;
    --th-cal-sel-bg:    rgba(0,180,216,.12);
    --th-pri2:             #90e0ef;
    --th-card-shadow:      rgba(0,150,199,.15);
    --th-sb-hover:         #002d52;
    --th-sel-ring:         #00b4d8;
    --th-table-hdr-bg:     #001f38;
    --th-table-hdr-border: #0077b6;
    --th-table-row-hover:  #002d52;
    --th-prog1:            #0096c7;
    --th-prog2:            #00b4d8;
    --th-prog-bg:            #001a2e;
    --th-stat-bg1:         #001f38;
    --th-stat-bg2:         #002540;
    --th-stat-border:      #0077b6;
    --th-modal-title:  #90e0ef;
    --th-btn:          linear-gradient(135deg, #0096c7, #00b4d8);
    --th-cal-head:     #00b4d8;
    --th-body-font:    'Nunito', system-ui, sans-serif;
    --th-scroll-track:  #001a2e;
    --th-scroll-thumb:  #003554;
    --th-scroll-hover:  #0077b6;
    --th-head-font:    'Nunito', system-ui, sans-serif;
    background: linear-gradient(135deg, #001a2e 0%, #003554 25%, #001a2e 50%, #002d52 75%, #001a2e 100%);
    background-size: 400% 400%;
    color: #caf0f8;
    animation: wave-bg 8s ease-in-out infinite;
}
@keyframes wave-bg {
    0%,100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
body.theme-watersports .sidebar {
    background: linear-gradient(180deg, #001a2e 0%, #002d52 40%, #001a2e 100%);
    border-right: 1px solid #0077b6;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
body.theme-watersports .sidebar::before {
    content: '';
    position: absolute;
    bottom: 0; left: -50%; width: 200%; height: 60px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60'%3E%3Cpath d='M0,30 C150,60 350,0 600,30 C850,60 1050,0 1200,30 L1200,60 L0,60 Z' fill='%230077b620'/%3E%3C/svg%3E") repeat-x bottom;
    animation: wave-slide 6s linear infinite;
    pointer-events: none;
}
@keyframes wave-slide { from { transform: translateX(0); } to { transform: translateX(50%); } }
body.theme-watersports .hdr {
    background: linear-gradient(90deg, #001a2e, #003554, #001a2e);
    border-bottom: none;
    position: relative;
    overflow: visible;
}
body.theme-watersports .hdr::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg,
        #001a2e 0%, #0077b6 10%, #00b4d8 20%, #90e0ef 30%, #00b4d8 40%,
        #0077b6 50%, #001a2e 60%, #0077b6 70%, #00b4d8 80%, #0077b6 90%, #001a2e 100%
    );
    background-size: 200% 100%;
    animation: wave-glow 4s linear infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes wave-glow {
    0%   { background-position: 0% 0; }
    100% { background-position: -200% 0; }
}
body.theme-watersports .sb-item { color: #48cae4; }
body.theme-watersports .sb-item:hover { background: #003554; color: #90e0ef; }
body.theme-watersports .sb-item.active { background: #003554; color: #caf0f8; border-left: 3px solid #00b4d8; }
body.theme-watersports .sb-title { color: #0096c7; }
body.theme-watersports .card {
    background: linear-gradient(135deg, #002540 0%, #003554 100%);
    border: 1px solid #0077b6;
}
body.theme-watersports .btn-gr {
    background: linear-gradient(135deg, #0096c7, #00b4d8);
    color: #fff;
    border: none;
}
body.theme-watersports .btn-gr:hover {
    background: linear-gradient(135deg, #00b4d8, #90e0ef);
    color: #001a2e;
}
body.theme-watersports .app-switcher-menu {
    background: #002540;
    border-color: #0077b6;
    box-shadow: 0 12px 32px rgba(0,0,0,.6);
}
body.theme-watersports .app-item:hover { background: #003554; }
body.theme-watersports .app-item.current { background: rgba(0,180,216,.15); }
body.theme-watersports .finput,
body.theme-watersports .sel-input {
    background: #001a2e;
    border: 1px solid #0077b6;
    color: #caf0f8;
}
body.theme-watersports .finput:focus,
body.theme-watersports .sel-input:focus {
    border-color: #00b4d8;
    box-shadow: 0 0 0 3px rgba(0,180,216,.2);
}
body.theme-watersports table th { background: #001f38 !important; color: #48cae4 !important; border-bottom: 1px solid #0077b6 !important; }
body.theme-watersports table td { border-bottom: 1px solid #002540; color: #90e0ef; }
body.theme-watersports tr:hover td { background: #003554 !important; }
body.theme-watersports .modal { background: #002540; border: 1px solid #0077b6; color: #caf0f8; }
body.theme-watersports .tabs { border-bottom: 2px solid #0077b6; }
body.theme-watersports .tab.active { border-bottom-color: #00b4d8; color: #00b4d8; }
body.theme-watersports .badge { border-color: #0077b6; }

/* User profile link — no default anchor styling */
a.hdr-user, a.sb-user {
    text-decoration: none;
    color: inherit;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
a.hdr-user:focus, a.sb-user:focus {
    outline: none;
}

/* ── Card Header Row: title left, buttons right ──────────── */
.card-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.card-header-row .card-title { margin: 0; }

/* ── Logo visibility per theme ────────────────────────────── */
.logo-img.logo-white { filter: brightness(0) invert(1); }
.logo-img.logo-blue  { filter: none; }

/* Default (unicorn): white logo on dark header */
.logo-text-fallback { display: none; }
.logo-img.logo-white { display: block; }
.logo-img.logo-blue  { display: none; }

/* Dark-header themes: white logo */
body.theme-northit   .logo-img.logo-white { display: block; }
body.theme-northit   .logo-img.logo-blue  { display: none;  }
body.theme-pride     .logo-img.logo-white { display: block; }
body.theme-pride     .logo-img.logo-blue  { display: none;  }
body.theme-love      .logo-img.logo-white { display: block; }
body.theme-love      .logo-img.logo-blue  { display: none;  }
body.theme-blm       .logo-img.logo-white { display: block; }
body.theme-blm       .logo-img.logo-blue  { display: none;  }
body.theme-hacker    .logo-img.logo-white { display: block; }
body.theme-hacker    .logo-img.logo-blue  { display: none;  }
body.theme-dark      .logo-img.logo-white { display: block; }
body.theme-dark      .logo-img.logo-blue  { display: none;  }
body.theme-watersports .logo-img.logo-white { display: block; }
body.theme-watersports .logo-img.logo-blue  { display: none;  }

/* Light-header themes: blue logo */
body.theme-clean     .logo-img.logo-white { display: none;  }
body.theme-clean     .logo-img.logo-blue  { display: block; }
body.theme-trans     .logo-img.logo-white { display: none;  }
body.theme-trans     .logo-img.logo-blue  { display: block; }

/* Hide text fallback when image logo is showing */
body.theme-northit   .logo-text-fallback { display: none; }
body.theme-pride     .logo-text-fallback { display: none; }
body.theme-love      .logo-text-fallback { display: none; }
body.theme-blm       .logo-text-fallback { display: none; }
body.theme-hacker    .logo-text-fallback { display: none; }
body.theme-dark      .logo-text-fallback { display: none; }
body.theme-watersports .logo-text-fallback { display: none; }
body.theme-clean     .logo-text-fallback { display: none; }
body.theme-trans     .logo-text-fallback { display: none; }

.alerts-dropdown { position:absolute;top:100%;right:0;width:320px;max-height:400px;overflow-y:auto;background:var(--th-card,#1e293b);border:1px solid var(--th-card-border,#334155);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.3);z-index:200;padding:.3rem 0; }
.alert-dd-item { padding:.6rem .75rem;border-bottom:1px solid rgba(100,116,139,.12); }
.alert-dd-item:last-child { border-bottom:none; }
.alert-dd-critical { border-left:3px solid #ef4444; }
.alert-dd-warning { border-left:3px solid #f59e0b; }
.alert-dd-info { border-left:3px solid #3b82f6; }