@import url('https://fonts.cdnfonts.com/css/opendyslexic');

/* ── Theme Variables ───────────────────────────────────────────────────────── */
:root {
  /* Layout — never changes */
  --sidebar-w:     240px;
  --sidebar-w-col: 60px;
  --topbar-h:      58px;
  --card-radius:   10px;

  /* ── Light (default) ── */
  --sidebar-bg:          #1e293b;
  --sidebar-text:        #94a3b8;
  --sidebar-active:      #3b82f6;
  --sidebar-hover:       rgba(255,255,255,0.06);
  --sidebar-divider:     rgba(255,255,255,0.08);
  --sidebar-brand-color: #ffffff;

  --topbar-bg:      #ffffff;
  --topbar-shadow:  rgba(0,0,0,0.08);
  --topbar-title:   #1e293b;

  --page-bg:        #f1f5f9;
  --body-color:     #1e293b;
  --muted-color:    #64748b;

  --card-bg:            #ffffff;
  --card-border:        #e2e8f0;
  --card-shadow:        rgba(0,0,0,0.06);
  --card-header-bg:     #f8fafc;
  --card-header-border: #e2e8f0;
  --card-header-color:  #374151;

  --input-bg:          #ffffff;
  --input-border:      #dee2e6;
  --input-color:       #1e293b;
  --input-placeholder: #94a3b8;
  --input-focus-border:#3b82f6;
  --input-focus-shadow:rgba(59,130,246,0.2);

  --table-header-bg: #f8fafc;
  --table-border:    #e2e8f0;
  --table-hover:     #f8fafc;

  --list-item-bg:    #ffffff;
  --list-item-border:#e2e8f0;

  --btn-icon-border: #e2e8f0;
  --btn-icon-color:  #64748b;
  --btn-icon-hover:  #f1f5f9;

  --comment-bg:      #f8fafc;
  --comment-border:  #e2e8f0;
  --detail-border:   #f1f5f9;
  --filter-bg:       #ffffff;
  --link-color:      #1e293b;
  --link-hover:      #3b82f6;

  --dropdown-bg:     #ffffff;
  --dropdown-border: #e2e8f0;
  --dropdown-color:  #1e293b;
  --dropdown-hover:  #f1f5f9;
}

/* ── Dark ────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --sidebar-bg:          #020617;
  --sidebar-text:        #94a3b8;
  --sidebar-active:      #60a5fa;
  --sidebar-hover:       rgba(255,255,255,0.05);
  --sidebar-divider:     rgba(255,255,255,0.07);
  --sidebar-brand-color: #e2e8f0;

  --topbar-bg:      #1e293b;
  --topbar-shadow:  rgba(0,0,0,0.3);
  --topbar-title:   #e2e8f0;

  --page-bg:        #0f172a;
  --body-color:     #cbd5e1;
  --muted-color:    #64748b;

  --card-bg:            #1e293b;
  --card-border:        #334155;
  --card-shadow:        rgba(0,0,0,0.2);
  --card-header-bg:     #162032;
  --card-header-border: #334155;
  --card-header-color:  #94a3b8;

  --input-bg:          #0f172a;
  --input-border:      #334155;
  --input-color:       #e2e8f0;
  --input-placeholder: #475569;
  --input-focus-border:#60a5fa;
  --input-focus-shadow:rgba(96,165,250,0.2);

  --table-header-bg: #162032;
  --table-border:    #334155;
  --table-hover:     #263348;

  --list-item-bg:    #1e293b;
  --list-item-border:#334155;

  --btn-icon-border: #334155;
  --btn-icon-color:  #94a3b8;
  --btn-icon-hover:  #263348;

  --comment-bg:      #162032;
  --comment-border:  #334155;
  --detail-border:   #334155;
  --filter-bg:       #1e293b;
  --link-color:      #cbd5e1;
  --link-hover:      #60a5fa;

  --dropdown-bg:     #1e293b;
  --dropdown-border: #334155;
  --dropdown-color:  #cbd5e1;
  --dropdown-hover:  #263348;
}

/* ── Midnight (deep indigo) ───────────────────────────────────────────────── */
[data-theme="midnight"] {
  --sidebar-bg:          #0f0c29;
  --sidebar-text:        #a78bfa;
  --sidebar-active:      #8b5cf6;
  --sidebar-hover:       rgba(139,92,246,0.12);
  --sidebar-divider:     rgba(139,92,246,0.15);
  --sidebar-brand-color: #ede9fe;

  --topbar-bg:      #1a1040;
  --topbar-shadow:  rgba(0,0,0,0.4);
  --topbar-title:   #ede9fe;

  --page-bg:        #13102b;
  --body-color:     #ddd6fe;
  --muted-color:    #7c3aed;

  --card-bg:            #1a1040;
  --card-border:        #312e81;
  --card-shadow:        rgba(139,92,246,0.1);
  --card-header-bg:     #0f0c29;
  --card-header-border: #312e81;
  --card-header-color:  #a78bfa;

  --input-bg:          #0f0c29;
  --input-border:      #4c1d95;
  --input-color:       #ede9fe;
  --input-placeholder: #6d28d9;
  --input-focus-border:#8b5cf6;
  --input-focus-shadow:rgba(139,92,246,0.25);

  --table-header-bg: #0f0c29;
  --table-border:    #312e81;
  --table-hover:     #1e1a4a;

  --list-item-bg:    #1a1040;
  --list-item-border:#312e81;

  --btn-icon-border: #4c1d95;
  --btn-icon-color:  #a78bfa;
  --btn-icon-hover:  #1e1a4a;

  --comment-bg:      #0f0c29;
  --comment-border:  #4c1d95;
  --detail-border:   #312e81;
  --filter-bg:       #1a1040;
  --link-color:      #ddd6fe;
  --link-hover:      #c4b5fd;

  --dropdown-bg:     #1a1040;
  --dropdown-border: #312e81;
  --dropdown-color:  #ddd6fe;
  --dropdown-hover:  #1e1a4a;
}

/* ── Diesel (dark industrial charcoal + electric orange) ─────────────────── */
[data-theme="nord"] {
  --sidebar-bg:          #141414;
  --sidebar-text:        #8a8a8a;
  --sidebar-active:      #f97316;
  --sidebar-hover:       rgba(249,115,22,0.1);
  --sidebar-divider:     rgba(249,115,22,0.15);
  --sidebar-brand-color: #e8e8e8;

  --topbar-bg:      #1e1e1e;
  --topbar-shadow:  rgba(0,0,0,0.5);
  --topbar-title:   #f97316;

  --page-bg:        #111111;
  --body-color:     #d4d4d4;
  --muted-color:    #6b6b6b;

  --card-bg:            #1e1e1e;
  --card-border:        #2e2e2e;
  --card-shadow:        rgba(0,0,0,0.5);
  --card-header-bg:     #181818;
  --card-header-border: #2e2e2e;
  --card-header-color:  #8a8a8a;

  --input-bg:          #181818;
  --input-border:      #2e2e2e;
  --input-color:       #d4d4d4;
  --input-placeholder: #4a4a4a;
  --input-focus-border:#f97316;
  --input-focus-shadow:rgba(249,115,22,0.2);

  --table-header-bg: #181818;
  --table-border:    #2e2e2e;
  --table-hover:     #242424;

  --list-item-bg:    #1e1e1e;
  --list-item-border:#2e2e2e;

  --btn-icon-border: #2e2e2e;
  --btn-icon-color:  #6b6b6b;
  --btn-icon-hover:  #242424;

  --comment-bg:      #181818;
  --comment-border:  #f97316;
  --detail-border:   #2e2e2e;
  --filter-bg:       #1e1e1e;
  --link-color:      #d4d4d4;
  --link-hover:      #f97316;

  --dropdown-bg:     #1e1e1e;
  --dropdown-border: #2e2e2e;
  --dropdown-color:  #d4d4d4;
  --dropdown-hover:  #242424;
}

/* ── Solarized (warm amber) ──────────────────────────────────────────────── */
[data-theme="solarized"] {
  --sidebar-bg:          #002b36;
  --sidebar-text:        #657b83;
  --sidebar-active:      #268bd2;
  --sidebar-hover:       rgba(38,139,210,0.1);
  --sidebar-divider:     rgba(255,255,255,0.08);
  --sidebar-brand-color: #fdf6e3;

  --topbar-bg:      #eee8d5;
  --topbar-shadow:  rgba(0,43,54,0.1);
  --topbar-title:   #073642;

  --page-bg:        #fdf6e3;
  --body-color:     #586e75;
  --muted-color:    #93a1a1;

  --card-bg:            #eee8d5;
  --card-border:        #d9d2c0;
  --card-shadow:        rgba(0,43,54,0.06);
  --card-header-bg:     #e5dfc8;
  --card-header-border: #d9d2c0;
  --card-header-color:  #657b83;

  --input-bg:          #fdf6e3;
  --input-border:      #d9d2c0;
  --input-color:       #073642;
  --input-placeholder: #93a1a1;
  --input-focus-border:#268bd2;
  --input-focus-shadow:rgba(38,139,210,0.2);

  --table-header-bg: #e5dfc8;
  --table-border:    #d9d2c0;
  --table-hover:     #e5dfc8;

  --list-item-bg:    #eee8d5;
  --list-item-border:#d9d2c0;

  --btn-icon-border: #d9d2c0;
  --btn-icon-color:  #657b83;
  --btn-icon-hover:  #e5dfc8;

  --comment-bg:      #e5dfc8;
  --comment-border:  #d9d2c0;
  --detail-border:   #d9d2c0;
  --filter-bg:       #eee8d5;
  --link-color:      #586e75;
  --link-hover:      #268bd2;

  --dropdown-bg:     #eee8d5;
  --dropdown-border: #d9d2c0;
  --dropdown-color:  #586e75;
  --dropdown-hover:  #e5dfc8;
}

/* ── Neon (near-black terminal + electric green) ─────────────────────────── */
[data-theme="dracula"] {
  --sidebar-bg:          #020a04;
  --sidebar-text:        #3a6b3a;
  --sidebar-active:      #39ff14;
  --sidebar-hover:       rgba(57,255,20,0.08);
  --sidebar-divider:     rgba(57,255,20,0.12);
  --sidebar-brand-color: #b8ffb8;

  --topbar-bg:      #040e06;
  --topbar-shadow:  rgba(0,0,0,0.7);
  --topbar-title:   #39ff14;

  --page-bg:        #010802;
  --body-color:     #c0f0c0;
  --muted-color:    #3a6b3a;

  --card-bg:            #040e06;
  --card-border:        #0a2010;
  --card-shadow:        rgba(57,255,20,0.06);
  --card-header-bg:     #020a04;
  --card-header-border: #0a2010;
  --card-header-color:  #3a6b3a;

  --input-bg:          #020a04;
  --input-border:      #0a2010;
  --input-color:       #c0f0c0;
  --input-placeholder: #1a4a1a;
  --input-focus-border:#39ff14;
  --input-focus-shadow:rgba(57,255,20,0.2);

  --table-header-bg: #020a04;
  --table-border:    #0a2010;
  --table-hover:     #061208;

  --list-item-bg:    #040e06;
  --list-item-border:#0a2010;

  --btn-icon-border: #0a2010;
  --btn-icon-color:  #3a6b3a;
  --btn-icon-hover:  #061208;

  --comment-bg:      #020a04;
  --comment-border:  #39ff14;
  --detail-border:   #0a2010;
  --filter-bg:       #040e06;
  --link-color:      #c0f0c0;
  --link-hover:      #39ff14;

  --dropdown-bg:     #040e06;
  --dropdown-border: #0a2010;
  --dropdown-color:  #c0f0c0;
  --dropdown-hover:  #061208;
}

/* ── Coffee (dark espresso browns + caramel accent) ──────────────────────── */
[data-theme="monokai"] {
  --sidebar-bg:          #1a0f08;
  --sidebar-text:        #9a7a5a;
  --sidebar-active:      #c87941;
  --sidebar-hover:       rgba(200,121,65,0.1);
  --sidebar-divider:     rgba(200,121,65,0.18);
  --sidebar-brand-color: #f0dfc8;

  --topbar-bg:      #231508;
  --topbar-shadow:  rgba(0,0,0,0.5);
  --topbar-title:   #c87941;

  --page-bg:        #140c05;
  --body-color:     #e8d5c0;
  --muted-color:    #7a5a40;

  --card-bg:            #231508;
  --card-border:        #3d2510;
  --card-shadow:        rgba(0,0,0,0.45);
  --card-header-bg:     #1a0f08;
  --card-header-border: #3d2510;
  --card-header-color:  #9a7a5a;

  --input-bg:          #1a0f08;
  --input-border:      #3d2510;
  --input-color:       #e8d5c0;
  --input-placeholder: #5a3d28;
  --input-focus-border:#c87941;
  --input-focus-shadow:rgba(200,121,65,0.22);

  --table-header-bg: #1a0f08;
  --table-border:    #3d2510;
  --table-hover:     #2a1a0a;

  --list-item-bg:    #231508;
  --list-item-border:#3d2510;

  --btn-icon-border: #3d2510;
  --btn-icon-color:  #7a5a40;
  --btn-icon-hover:  #2a1a0a;

  --comment-bg:      #1a0f08;
  --comment-border:  #c87941;
  --detail-border:   #3d2510;
  --filter-bg:       #231508;
  --link-color:      #e8d5c0;
  --link-hover:      #c87941;

  --dropdown-bg:     #231508;
  --dropdown-border: #3d2510;
  --dropdown-color:  #e8d5c0;
  --dropdown-hover:  #2a1a0a;
}

/* ── Tokyo Night ──────────────────────────────────────────────────────────── */
[data-theme="tokyo"] {
  --sidebar-bg:          #16161e;
  --sidebar-text:        #545c7e;
  --sidebar-active:      #7aa2f7;
  --sidebar-hover:       rgba(122,162,247,0.08);
  --sidebar-divider:     rgba(84,92,126,0.25);
  --sidebar-brand-color: #c0caf5;

  --topbar-bg:      #1a1b26;
  --topbar-shadow:  rgba(0,0,0,0.35);
  --topbar-title:   #c0caf5;

  --page-bg:        #13131c;
  --body-color:     #a9b1d6;
  --muted-color:    #545c7e;

  --card-bg:            #1a1b26;
  --card-border:        #292e42;
  --card-shadow:        rgba(0,0,0,0.2);
  --card-header-bg:     #16161e;
  --card-header-border: #292e42;
  --card-header-color:  #545c7e;

  --input-bg:          #13131c;
  --input-border:      #292e42;
  --input-color:       #c0caf5;
  --input-placeholder: #545c7e;
  --input-focus-border:#7aa2f7;
  --input-focus-shadow:rgba(122,162,247,0.2);

  --table-header-bg: #16161e;
  --table-border:    #292e42;
  --table-hover:     #1f2030;

  --list-item-bg:    #1a1b26;
  --list-item-border:#292e42;

  --btn-icon-border: #292e42;
  --btn-icon-color:  #545c7e;
  --btn-icon-hover:  #1f2030;

  --comment-bg:      #16161e;
  --comment-border:  #7aa2f7;
  --detail-border:   #292e42;
  --filter-bg:       #1a1b26;
  --link-color:      #a9b1d6;
  --link-hover:      #7dcfff;

  --dropdown-bg:     #1a1b26;
  --dropdown-border: #292e42;
  --dropdown-color:  #a9b1d6;
  --dropdown-hover:  #1f2030;
}

/* ── Catppuccin Mocha ─────────────────────────────────────────────────────── */
[data-theme="catppuccin"] {
  --sidebar-bg:          #181825;
  --sidebar-text:        #585b70;
  --sidebar-active:      #cba6f7;
  --sidebar-hover:       rgba(203,166,247,0.08);
  --sidebar-divider:     rgba(88,91,112,0.3);
  --sidebar-brand-color: #cdd6f4;

  --topbar-bg:      #1e1e2e;
  --topbar-shadow:  rgba(0,0,0,0.3);
  --topbar-title:   #cdd6f4;

  --page-bg:        #11111b;
  --body-color:     #cdd6f4;
  --muted-color:    #6c7086;

  --card-bg:            #1e1e2e;
  --card-border:        #313244;
  --card-shadow:        rgba(0,0,0,0.2);
  --card-header-bg:     #181825;
  --card-header-border: #313244;
  --card-header-color:  #6c7086;

  --input-bg:          #11111b;
  --input-border:      #313244;
  --input-color:       #cdd6f4;
  --input-placeholder: #585b70;
  --input-focus-border:#cba6f7;
  --input-focus-shadow:rgba(203,166,247,0.2);

  --table-header-bg: #181825;
  --table-border:    #313244;
  --table-hover:     #24273a;

  --list-item-bg:    #1e1e2e;
  --list-item-border:#313244;

  --btn-icon-border: #313244;
  --btn-icon-color:  #585b70;
  --btn-icon-hover:  #24273a;

  --comment-bg:      #181825;
  --comment-border:  #cba6f7;
  --detail-border:   #313244;
  --filter-bg:       #1e1e2e;
  --link-color:      #cdd6f4;
  --link-hover:      #89dceb;

  --dropdown-bg:     #1e1e2e;
  --dropdown-border: #313244;
  --dropdown-color:  #cdd6f4;
  --dropdown-hover:  #24273a;
}

/* ── Gruvbox ──────────────────────────────────────────────────────────────── */
[data-theme="gruvbox"] {
  --sidebar-bg:          #141617;
  --sidebar-text:        #7c6f64;
  --sidebar-active:      #fabd2f;
  --sidebar-hover:       rgba(250,189,47,0.08);
  --sidebar-divider:     rgba(124,111,100,0.25);
  --sidebar-brand-color: #ebdbb2;

  --topbar-bg:      #282828;
  --topbar-shadow:  rgba(0,0,0,0.3);
  --topbar-title:   #ebdbb2;

  --page-bg:        #1d2021;
  --body-color:     #d5c4a1;
  --muted-color:    #7c6f64;

  --card-bg:            #282828;
  --card-border:        #3c3836;
  --card-shadow:        rgba(0,0,0,0.25);
  --card-header-bg:     #32302f;
  --card-header-border: #3c3836;
  --card-header-color:  #928374;

  --input-bg:          #1d2021;
  --input-border:      #3c3836;
  --input-color:       #ebdbb2;
  --input-placeholder: #665c54;
  --input-focus-border:#fabd2f;
  --input-focus-shadow:rgba(250,189,47,0.2);

  --table-header-bg: #32302f;
  --table-border:    #3c3836;
  --table-hover:     #32302f;

  --list-item-bg:    #282828;
  --list-item-border:#3c3836;

  --btn-icon-border: #3c3836;
  --btn-icon-color:  #7c6f64;
  --btn-icon-hover:  #32302f;

  --comment-bg:      #32302f;
  --comment-border:  #d79921;
  --detail-border:   #3c3836;
  --filter-bg:       #282828;
  --link-color:      #d5c4a1;
  --link-hover:      #83a598;

  --dropdown-bg:     #282828;
  --dropdown-border: #3c3836;
  --dropdown-color:  #d5c4a1;
  --dropdown-hover:  #32302f;
}

/* ── Brady Mode (DO NOT LOOK DIRECTLY AT SCREEN) ──────────────────────────── */
[data-theme="brady"] {
  --sidebar-bg:          #ff4500;
  --sidebar-text:        #ffff00;
  --sidebar-active:      #00ff00;
  --sidebar-hover:       rgba(0,255,0,0.15);
  --sidebar-divider:     rgba(255,255,0,0.4);
  --sidebar-brand-color: #ffffff;

  --topbar-bg:      #ff00ff;
  --topbar-shadow:  rgba(255,0,255,0.5);
  --topbar-title:   #ffffff;

  --page-bg:        #ff69b4;
  --body-color:     #1a0000;
  --muted-color:    #cc0066;

  --card-bg:            #ffff00;
  --card-border:        #ff1493;
  --card-shadow:        rgba(255,20,147,0.4);
  --card-header-bg:     #00ffff;
  --card-header-border: #ff1493;
  --card-header-color:  #cc0066;

  --input-bg:          #adff2f;
  --input-border:      #ff00ff;
  --input-color:       #1a0000;
  --input-placeholder: #8b008b;
  --input-focus-border:#ff0000;
  --input-focus-shadow:rgba(255,0,0,0.4);

  --table-header-bg: #00ffff;
  --table-border:    #ff1493;
  --table-hover:     #ff69b4;

  --list-item-bg:    #ffff00;
  --list-item-border:#ff1493;

  --btn-icon-border: #ff00ff;
  --btn-icon-color:  #ff00ff;
  --btn-icon-hover:  #ff69b4;

  --comment-bg:      #7fff00;
  --comment-border:  #ff00ff;
  --detail-border:   #ff1493;
  --filter-bg:       #ffff00;
  --link-color:      #8b0000;
  --link-hover:      #0000ff;

  --dropdown-bg:     #ffff00;
  --dropdown-border: #ff00ff;
  --dropdown-color:  #1a0000;
  --dropdown-hover:  #adff2f;
}
[data-theme="brady"] * {
  font-family: 'OpenDyslexic', 'Comic Sans MS', cursive !important;
}
[data-theme="brady"] .sidebar-brand i { color: #ffff00 !important; }
[data-theme="brady"] .nav-link.active { border-left-color: #00ff00 !important; }
[data-theme="brady"] body { animation: bradyflash 4s infinite; }
@keyframes bradyflash {
  0%,100% { background: #ff69b4; }
  25%     { background: #ff4500; }
  50%     { background: #9400d3; }
  75%     { background: #ff8c00; }
}

/* ── Abyss (deep ocean) ───────────────────────────────────────────────────── */
[data-theme="abyss"] {
  --sidebar-bg:          #05080f;
  --sidebar-text:        #4d7c9e;
  --sidebar-active:      #00d4ff;
  --sidebar-hover:       rgba(0,212,255,0.08);
  --sidebar-divider:     rgba(0,212,255,0.1);
  --sidebar-brand-color: #e0f2fe;
  --topbar-bg:      #0a1628;
  --topbar-shadow:  rgba(0,0,0,0.5);
  --topbar-title:   #bae6fd;
  --page-bg:        #0d1b2a;
  --body-color:     #bae6fd;
  --muted-color:    #4d7c9e;
  --card-bg:            #0a1628;
  --card-border:        #1e3a5f;
  --card-shadow:        rgba(0,0,0,0.5);
  --card-header-bg:     #0d1b2a;
  --card-header-border: #1e3a5f;
  --card-header-color:  #7dd3fc;
  --input-bg:          #0d1b2a;
  --input-border:      #1e3a5f;
  --input-color:       #bae6fd;
  --input-placeholder: #4d7c9e;
  --input-focus-border:#00d4ff;
  --input-focus-shadow:rgba(0,212,255,0.2);
  --table-header-bg: #0a1628;
  --table-border:    #1e3a5f;
  --table-hover:     #0d1b2a;
  --list-item-bg:    #0a1628;
  --list-item-border:#1e3a5f;
  --btn-icon-border: #1e3a5f;
  --btn-icon-color:  #4d7c9e;
  --btn-icon-hover:  #0d1b2a;
  --comment-bg:      #0d1b2a;
  --comment-border:  #1e3a5f;
  --detail-border:   #0d1b2a;
  --filter-bg:       #0a1628;
  --link-color:      #bae6fd;
  --link-hover:      #00d4ff;
  --dropdown-bg:     #0a1628;
  --dropdown-border: #1e3a5f;
  --dropdown-color:  #bae6fd;
  --dropdown-hover:  #0d1b2a;
}

/* ── Synthwave (80s neon retro) ───────────────────────────────────────────── */
[data-theme="synthwave"] {
  --sidebar-bg:          #09000f;
  --sidebar-text:        #9b5de5;
  --sidebar-active:      #f72585;
  --sidebar-hover:       rgba(247,37,133,0.1);
  --sidebar-divider:     rgba(247,37,133,0.15);
  --sidebar-brand-color: #fee440;
  --topbar-bg:      #130024;
  --topbar-shadow:  rgba(247,37,133,0.3);
  --topbar-title:   #fee440;
  --page-bg:        #180030;
  --body-color:     #e9d5ff;
  --muted-color:    #9b5de5;
  --card-bg:            #130024;
  --card-border:        #4a0080;
  --card-shadow:        rgba(247,37,133,0.2);
  --card-header-bg:     #180030;
  --card-header-border: #4a0080;
  --card-header-color:  #c77dff;
  --input-bg:          #180030;
  --input-border:      #4a0080;
  --input-color:       #e9d5ff;
  --input-placeholder: #9b5de5;
  --input-focus-border:#f72585;
  --input-focus-shadow:rgba(247,37,133,0.25);
  --table-header-bg: #130024;
  --table-border:    #4a0080;
  --table-hover:     #180030;
  --list-item-bg:    #130024;
  --list-item-border:#4a0080;
  --btn-icon-border: #4a0080;
  --btn-icon-color:  #9b5de5;
  --btn-icon-hover:  #180030;
  --comment-bg:      #180030;
  --comment-border:  #4a0080;
  --detail-border:   #180030;
  --filter-bg:       #130024;
  --link-color:      #e9d5ff;
  --link-hover:      #f72585;
  --dropdown-bg:     #130024;
  --dropdown-border: #4a0080;
  --dropdown-color:  #e9d5ff;
  --dropdown-hover:  #180030;
}

/* ── Forest (dark woodland) ───────────────────────────────────────────────── */
[data-theme="forest"] {
  --sidebar-bg:          #060e07;
  --sidebar-text:        #4a7c59;
  --sidebar-active:      #4ade80;
  --sidebar-hover:       rgba(74,222,128,0.08);
  --sidebar-divider:     rgba(74,222,128,0.1);
  --sidebar-brand-color: #dcfce7;
  --topbar-bg:      #0a1a0c;
  --topbar-shadow:  rgba(0,0,0,0.4);
  --topbar-title:   #bbf7d0;
  --page-bg:        #0f1f10;
  --body-color:     #bbf7d0;
  --muted-color:    #4a7c59;
  --card-bg:            #0a1a0c;
  --card-border:        #1e3b22;
  --card-shadow:        rgba(0,0,0,0.4);
  --card-header-bg:     #0f1f10;
  --card-header-border: #1e3b22;
  --card-header-color:  #86efac;
  --input-bg:          #0f1f10;
  --input-border:      #1e3b22;
  --input-color:       #bbf7d0;
  --input-placeholder: #4a7c59;
  --input-focus-border:#4ade80;
  --input-focus-shadow:rgba(74,222,128,0.2);
  --table-header-bg: #0a1a0c;
  --table-border:    #1e3b22;
  --table-hover:     #0f1f10;
  --list-item-bg:    #0a1a0c;
  --list-item-border:#1e3b22;
  --btn-icon-border: #1e3b22;
  --btn-icon-color:  #4a7c59;
  --btn-icon-hover:  #0f1f10;
  --comment-bg:      #0f1f10;
  --comment-border:  #1e3b22;
  --detail-border:   #0f1f10;
  --filter-bg:       #0a1a0c;
  --link-color:      #bbf7d0;
  --link-hover:      #4ade80;
  --dropdown-bg:     #0a1a0c;
  --dropdown-border: #1e3b22;
  --dropdown-color:  #bbf7d0;
  --dropdown-hover:  #0f1f10;
}


/* ── Rose (deep wine sidebar, rose page) ─────────────────────────────────── */
[data-theme="rose"] {
  --sidebar-bg:          #4a0e34;
  --sidebar-text:        #f0abca;
  --sidebar-active:      #f472b6;
  --sidebar-hover:       rgba(244,114,182,0.1);
  --sidebar-divider:     rgba(244,114,182,0.2);
  --sidebar-brand-color: #fdf2f8;
  --topbar-bg:      #ffffff;
  --topbar-shadow:  rgba(244,114,182,0.15);
  --topbar-title:   #831843;
  --page-bg:        #fdf2f8;
  --body-color:     #831843;
  --muted-color:    #be185d;
  --card-bg:            #ffffff;
  --card-border:        #fbcfe8;
  --card-shadow:        rgba(244,114,182,0.1);
  --card-header-bg:     #fdf2f8;
  --card-header-border: #fbcfe8;
  --card-header-color:  #9d174d;
  --input-bg:          #ffffff;
  --input-border:      #fbcfe8;
  --input-color:       #831843;
  --input-placeholder: #f9a8d4;
  --input-focus-border:#f472b6;
  --input-focus-shadow:rgba(244,114,182,0.2);
  --table-header-bg: #fdf2f8;
  --table-border:    #fbcfe8;
  --table-hover:     #fdf2f8;
  --list-item-bg:    #ffffff;
  --list-item-border:#fbcfe8;
  --btn-icon-border: #fbcfe8;
  --btn-icon-color:  #be185d;
  --btn-icon-hover:  #fdf2f8;
  --comment-bg:      #fdf2f8;
  --comment-border:  #fbcfe8;
  --detail-border:   #fdf2f8;
  --filter-bg:       #ffffff;
  --link-color:      #831843;
  --link-hover:      #ec4899;
  --dropdown-bg:     #ffffff;
  --dropdown-border: #fbcfe8;
  --dropdown-color:  #831843;
  --dropdown-hover:  #fdf2f8;
}

/* ── Mint (dark teal sidebar, fresh green page) ───────────────────────────── */
[data-theme="mint"] {
  --sidebar-bg:          #0f3d2e;
  --sidebar-text:        #6ee7b7;
  --sidebar-active:      #10b981;
  --sidebar-hover:       rgba(16,185,129,0.1);
  --sidebar-divider:     rgba(16,185,129,0.2);
  --sidebar-brand-color: #ecfdf5;
  --topbar-bg:      #ffffff;
  --topbar-shadow:  rgba(16,185,129,0.12);
  --topbar-title:   #065f46;
  --page-bg:        #f0fdf4;
  --body-color:     #064e3b;
  --muted-color:    #059669;
  --card-bg:            #ffffff;
  --card-border:        #a7f3d0;
  --card-shadow:        rgba(16,185,129,0.08);
  --card-header-bg:     #f0fdf4;
  --card-header-border: #a7f3d0;
  --card-header-color:  #065f46;
  --input-bg:          #ffffff;
  --input-border:      #a7f3d0;
  --input-color:       #064e3b;
  --input-placeholder: #6ee7b7;
  --input-focus-border:#10b981;
  --input-focus-shadow:rgba(16,185,129,0.2);
  --table-header-bg: #f0fdf4;
  --table-border:    #a7f3d0;
  --table-hover:     #f0fdf4;
  --list-item-bg:    #ffffff;
  --list-item-border:#a7f3d0;
  --btn-icon-border: #a7f3d0;
  --btn-icon-color:  #059669;
  --btn-icon-hover:  #f0fdf4;
  --comment-bg:      #f0fdf4;
  --comment-border:  #a7f3d0;
  --detail-border:   #f0fdf4;
  --filter-bg:       #ffffff;
  --link-color:      #064e3b;
  --link-hover:      #10b981;
  --dropdown-bg:     #ffffff;
  --dropdown-border: #a7f3d0;
  --dropdown-color:  #064e3b;
  --dropdown-hover:  #f0fdf4;
}

/* ── Lavender (deep purple sidebar, soft violet page) ────────────────────── */
[data-theme="lavender"] {
  --sidebar-bg:          #2d1b69;
  --sidebar-text:        #c4b5fd;
  --sidebar-active:      #8b5cf6;
  --sidebar-hover:       rgba(139,92,246,0.1);
  --sidebar-divider:     rgba(139,92,246,0.2);
  --sidebar-brand-color: #f5f3ff;
  --topbar-bg:      #ffffff;
  --topbar-shadow:  rgba(139,92,246,0.12);
  --topbar-title:   #4c1d95;
  --page-bg:        #f5f3ff;
  --body-color:     #3b0764;
  --muted-color:    #7c3aed;
  --card-bg:            #ffffff;
  --card-border:        #ddd6fe;
  --card-shadow:        rgba(139,92,246,0.08);
  --card-header-bg:     #f5f3ff;
  --card-header-border: #ddd6fe;
  --card-header-color:  #4c1d95;
  --input-bg:          #ffffff;
  --input-border:      #ddd6fe;
  --input-color:       #3b0764;
  --input-placeholder: #c4b5fd;
  --input-focus-border:#8b5cf6;
  --input-focus-shadow:rgba(139,92,246,0.2);
  --table-header-bg: #f5f3ff;
  --table-border:    #ddd6fe;
  --table-hover:     #f5f3ff;
  --list-item-bg:    #ffffff;
  --list-item-border:#ddd6fe;
  --btn-icon-border: #ddd6fe;
  --btn-icon-color:  #7c3aed;
  --btn-icon-hover:  #f5f3ff;
  --comment-bg:      #f5f3ff;
  --comment-border:  #ddd6fe;
  --detail-border:   #f5f3ff;
  --filter-bg:       #ffffff;
  --link-color:      #3b0764;
  --link-hover:      #7c3aed;
  --dropdown-bg:     #ffffff;
  --dropdown-border: #ddd6fe;
  --dropdown-color:  #3b0764;
  --dropdown-hover:  #f5f3ff;
}

/* ── Peach (rust sidebar, warm orange page) ───────────────────────────────── */
[data-theme="peach"] {
  --sidebar-bg:          #7c2d12;
  --sidebar-text:        #fed7aa;
  --sidebar-active:      #f97316;
  --sidebar-hover:       rgba(249,115,22,0.1);
  --sidebar-divider:     rgba(249,115,22,0.2);
  --sidebar-brand-color: #fff7ed;
  --topbar-bg:      #ffffff;
  --topbar-shadow:  rgba(249,115,22,0.12);
  --topbar-title:   #9a3412;
  --page-bg:        #fff7ed;
  --body-color:     #7c2d12;
  --muted-color:    #c2410c;
  --card-bg:            #ffffff;
  --card-border:        #fed7aa;
  --card-shadow:        rgba(249,115,22,0.08);
  --card-header-bg:     #fff7ed;
  --card-header-border: #fed7aa;
  --card-header-color:  #9a3412;
  --input-bg:          #ffffff;
  --input-border:      #fed7aa;
  --input-color:       #7c2d12;
  --input-placeholder: #fdba74;
  --input-focus-border:#f97316;
  --input-focus-shadow:rgba(249,115,22,0.2);
  --table-header-bg: #fff7ed;
  --table-border:    #fed7aa;
  --table-hover:     #fff7ed;
  --list-item-bg:    #ffffff;
  --list-item-border:#fed7aa;
  --btn-icon-border: #fed7aa;
  --btn-icon-color:  #c2410c;
  --btn-icon-hover:  #fff7ed;
  --comment-bg:      #fff7ed;
  --comment-border:  #fed7aa;
  --detail-border:   #fff7ed;
  --filter-bg:       #ffffff;
  --link-color:      #7c2d12;
  --link-hover:      #ea580c;
  --dropdown-bg:     #ffffff;
  --dropdown-border: #fed7aa;
  --dropdown-color:  #7c2d12;
  --dropdown-hover:  #fff7ed;
}


/* ── Parchment (aged paper, warm olive ink, antiquarian feel) ────────────── */
[data-theme="cream"] {
  --sidebar-bg:          #2a2415;
  --sidebar-text:        #a09060;
  --sidebar-active:      #8b7536;
  --sidebar-hover:       rgba(139,117,54,0.12);
  --sidebar-divider:     rgba(139,117,54,0.2);
  --sidebar-brand-color: #f5eedc;
  --topbar-bg:      #f5eedc;
  --topbar-shadow:  rgba(0,0,0,0.08);
  --topbar-title:   #2a2415;
  --page-bg:        #ede6d0;
  --body-color:     #2a2415;
  --muted-color:    #7a6a48;
  --card-bg:            #f5eedc;
  --card-border:        #d4c8a8;
  --card-shadow:        rgba(0,0,0,0.07);
  --card-header-bg:     #ede6d0;
  --card-header-border: #d4c8a8;
  --card-header-color:  #4a3d22;
  --input-bg:          #f5eedc;
  --input-border:      #d4c8a8;
  --input-color:       #2a2415;
  --input-placeholder: #a09060;
  --input-focus-border:#8b7536;
  --input-focus-shadow:rgba(139,117,54,0.2);
  --table-header-bg: #ede6d0;
  --table-border:    #d4c8a8;
  --table-hover:     #ede6d0;
  --list-item-bg:    #f5eedc;
  --list-item-border:#d4c8a8;
  --btn-icon-border: #d4c8a8;
  --btn-icon-color:  #7a6a48;
  --btn-icon-hover:  #ede6d0;
  --comment-bg:      #ede6d0;
  --comment-border:  #d4c8a8;
  --detail-border:   #ede6d0;
  --filter-bg:       #f5eedc;
  --link-color:      #2a2415;
  --link-hover:      #8b7536;
  --dropdown-bg:     #f5eedc;
  --dropdown-border: #d4c8a8;
  --dropdown-color:  #2a2415;
  --dropdown-hover:  #ede6d0;
}

/* ── Arctic (dark steel sidebar, cyan-white page) ─────────────────────────── */
[data-theme="arctic"] {
  --sidebar-bg:          #1e2d40;
  --sidebar-text:        #a5f3fc;
  --sidebar-active:      #22d3ee;
  --sidebar-hover:       rgba(34,211,238,0.1);
  --sidebar-divider:     rgba(34,211,238,0.2);
  --sidebar-brand-color: #f0f9ff;
  --topbar-bg:      #ffffff;
  --topbar-shadow:  rgba(34,211,238,0.1);
  --topbar-title:   #0e7490;
  --page-bg:        #ecfeff;
  --body-color:     #0e7490;
  --muted-color:    #06b6d4;
  --card-bg:            #ffffff;
  --card-border:        #a5f3fc;
  --card-shadow:        rgba(34,211,238,0.08);
  --card-header-bg:     #ecfeff;
  --card-header-border: #a5f3fc;
  --card-header-color:  #155e75;
  --input-bg:          #ffffff;
  --input-border:      #a5f3fc;
  --input-color:       #0e7490;
  --input-placeholder: #67e8f9;
  --input-focus-border:#22d3ee;
  --input-focus-shadow:rgba(34,211,238,0.2);
  --table-header-bg: #ecfeff;
  --table-border:    #a5f3fc;
  --table-hover:     #ecfeff;
  --list-item-bg:    #ffffff;
  --list-item-border:#a5f3fc;
  --btn-icon-border: #a5f3fc;
  --btn-icon-color:  #06b6d4;
  --btn-icon-hover:  #ecfeff;
  --comment-bg:      #ecfeff;
  --comment-border:  #a5f3fc;
  --detail-border:   #ecfeff;
  --filter-bg:       #ffffff;
  --link-color:      #0e7490;
  --link-hover:      #06b6d4;
  --dropdown-bg:     #ffffff;
  --dropdown-border: #a5f3fc;
  --dropdown-color:  #0e7490;
  --dropdown-hover:  #ecfeff;
}

/* ── Sand (dark brown sidebar, desert-warm page) ─────────────────────────── */
[data-theme="sand"] {
  --sidebar-bg:          #451a03;
  --sidebar-text:        #fcd34d;
  --sidebar-active:      #d97706;
  --sidebar-hover:       rgba(217,119,6,0.1);
  --sidebar-divider:     rgba(217,119,6,0.2);
  --sidebar-brand-color: #fffbeb;
  --topbar-bg:      #fffbeb;
  --topbar-shadow:  rgba(0,0,0,0.06);
  --topbar-title:   #78350f;
  --page-bg:        #fef3c7;
  --body-color:     #78350f;
  --muted-color:    #92400e;
  --card-bg:            #fffbeb;
  --card-border:        #fde68a;
  --card-shadow:        rgba(0,0,0,0.06);
  --card-header-bg:     #fef3c7;
  --card-header-border: #fde68a;
  --card-header-color:  #92400e;
  --input-bg:          #fffbeb;
  --input-border:      #fde68a;
  --input-color:       #78350f;
  --input-placeholder: #fcd34d;
  --input-focus-border:#d97706;
  --input-focus-shadow:rgba(217,119,6,0.2);
  --table-header-bg: #fef3c7;
  --table-border:    #fde68a;
  --table-hover:     #fef3c7;
  --list-item-bg:    #fffbeb;
  --list-item-border:#fde68a;
  --btn-icon-border: #fde68a;
  --btn-icon-color:  #92400e;
  --btn-icon-hover:  #fef3c7;
  --comment-bg:      #fef3c7;
  --comment-border:  #fde68a;
  --detail-border:   #fef3c7;
  --filter-bg:       #fffbeb;
  --link-color:      #78350f;
  --link-hover:      #b45309;
  --dropdown-bg:     #fffbeb;
  --dropdown-border: #fde68a;
  --dropdown-color:  #78350f;
  --dropdown-hover:  #fef3c7;
}

/* ── Blossom (crimson sidebar, sakura page) ───────────────────────────────── */
/* ── Crimson (deep true-red sidebar, clean white page — bold, not pink) ───── */
[data-theme="blossom"] {
  --sidebar-bg:          #5a0010;
  --sidebar-text:        #e8909a;
  --sidebar-active:      #dc143c;
  --sidebar-hover:       rgba(220,20,60,0.1);
  --sidebar-divider:     rgba(220,20,60,0.2);
  --sidebar-brand-color: #fff5f5;
  --topbar-bg:      #ffffff;
  --topbar-shadow:  rgba(220,20,60,0.1);
  --topbar-title:   #5a0010;
  --page-bg:        #fff5f5;
  --body-color:     #3d0008;
  --muted-color:    #9a4050;
  --card-bg:            #ffffff;
  --card-border:        #fbbcbc;
  --card-shadow:        rgba(220,20,60,0.07);
  --card-header-bg:     #fff5f5;
  --card-header-border: #fbbcbc;
  --card-header-color:  #7a0020;
  --input-bg:          #ffffff;
  --input-border:      #fbbcbc;
  --input-color:       #3d0008;
  --input-placeholder: #e8909a;
  --input-focus-border:#dc143c;
  --input-focus-shadow:rgba(220,20,60,0.2);
  --table-header-bg: #fff5f5;
  --table-border:    #fbbcbc;
  --table-hover:     #fff5f5;
  --list-item-bg:    #ffffff;
  --list-item-border:#fbbcbc;
  --btn-icon-border: #fbbcbc;
  --btn-icon-color:  #9a4050;
  --btn-icon-hover:  #fff5f5;
  --comment-bg:      #fff5f5;
  --comment-border:  #fbbcbc;
  --detail-border:   #fff5f5;
  --filter-bg:       #ffffff;
  --link-color:      #3d0008;
  --link-hover:      #dc143c;
  --dropdown-bg:     #ffffff;
  --dropdown-border: #fbbcbc;
  --dropdown-color:  #3d0008;
  --dropdown-hover:  #fff5f5;
}

/* ── Sage (dark forest sidebar, lime-green page) ─────────────────────────── */
[data-theme="sage"] {
  --sidebar-bg:          #1a2e1a;
  --sidebar-text:        #bef264;
  --sidebar-active:      #84cc16;
  --sidebar-hover:       rgba(132,204,22,0.1);
  --sidebar-divider:     rgba(132,204,22,0.2);
  --sidebar-brand-color: #f7fee7;
  --topbar-bg:      #ffffff;
  --topbar-shadow:  rgba(0,0,0,0.06);
  --topbar-title:   #365314;
  --page-bg:        #f7fee7;
  --body-color:     #365314;
  --muted-color:    #4d7c0f;
  --card-bg:            #ffffff;
  --card-border:        #d9f99d;
  --card-shadow:        rgba(132,204,22,0.08);
  --card-header-bg:     #f7fee7;
  --card-header-border: #d9f99d;
  --card-header-color:  #3f6212;
  --input-bg:          #ffffff;
  --input-border:      #d9f99d;
  --input-color:       #365314;
  --input-placeholder: #a3e635;
  --input-focus-border:#84cc16;
  --input-focus-shadow:rgba(132,204,22,0.2);
  --table-header-bg: #f7fee7;
  --table-border:    #d9f99d;
  --table-hover:     #f7fee7;
  --list-item-bg:    #ffffff;
  --list-item-border:#d9f99d;
  --btn-icon-border: #d9f99d;
  --btn-icon-color:  #4d7c0f;
  --btn-icon-hover:  #f7fee7;
  --comment-bg:      #f7fee7;
  --comment-border:  #d9f99d;
  --detail-border:   #f7fee7;
  --filter-bg:       #ffffff;
  --link-color:      #365314;
  --link-hover:      #65a30d;
  --dropdown-bg:     #ffffff;
  --dropdown-border: #d9f99d;
  --dropdown-color:  #365314;
  --dropdown-hover:  #f7fee7;
}


/* ── Stone (charcoal sidebar, clean neutral page) ─────────────────────────── */
[data-theme="stone"] {
  --sidebar-bg:          #374151;
  --sidebar-text:        #d1d5db;
  --sidebar-active:      #6366f1;
  --sidebar-hover:       rgba(99,102,241,0.1);
  --sidebar-divider:     rgba(99,102,241,0.2);
  --sidebar-brand-color: #f9fafb;
  --topbar-bg:      #ffffff;
  --topbar-shadow:  rgba(0,0,0,0.06);
  --topbar-title:   #111827;
  --page-bg:        #f3f4f6;
  --body-color:     #111827;
  --muted-color:    #6b7280;
  --card-bg:            #ffffff;
  --card-border:        #e5e7eb;
  --card-shadow:        rgba(0,0,0,0.05);
  --card-header-bg:     #f9fafb;
  --card-header-border: #e5e7eb;
  --card-header-color:  #374151;
  --input-bg:          #ffffff;
  --input-border:      #d1d5db;
  --input-color:       #111827;
  --input-placeholder: #9ca3af;
  --input-focus-border:#6366f1;
  --input-focus-shadow:rgba(99,102,241,0.2);
  --table-header-bg: #f9fafb;
  --table-border:    #e5e7eb;
  --table-hover:     #f9fafb;
  --list-item-bg:    #ffffff;
  --list-item-border:#e5e7eb;
  --btn-icon-border: #e5e7eb;
  --btn-icon-color:  #6b7280;
  --btn-icon-hover:  #f3f4f6;
  --comment-bg:      #f9fafb;
  --comment-border:  #e5e7eb;
  --detail-border:   #f3f4f6;
  --filter-bg:       #ffffff;
  --link-color:      #111827;
  --link-hover:      #6366f1;
  --dropdown-bg:     #ffffff;
  --dropdown-border: #e5e7eb;
  --dropdown-color:  #111827;
  --dropdown-hover:  #f9fafb;
}

/* ── Aqua (deep teal sidebar, light aqua page) ────────────────────────────── */
[data-theme="aqua"] {
  --sidebar-bg:          #134e4a;
  --sidebar-text:        #5eead4;
  --sidebar-active:      #14b8a6;
  --sidebar-hover:       rgba(20,184,166,0.1);
  --sidebar-divider:     rgba(20,184,166,0.2);
  --sidebar-brand-color: #f0fdfa;
  --topbar-bg:      #ffffff;
  --topbar-shadow:  rgba(20,184,166,0.1);
  --topbar-title:   #134e4a;
  --page-bg:        #f0fdfa;
  --body-color:     #134e4a;
  --muted-color:    #0f766e;
  --card-bg:            #ffffff;
  --card-border:        #99f6e4;
  --card-shadow:        rgba(20,184,166,0.08);
  --card-header-bg:     #f0fdfa;
  --card-header-border: #99f6e4;
  --card-header-color:  #115e59;
  --input-bg:          #ffffff;
  --input-border:      #99f6e4;
  --input-color:       #134e4a;
  --input-placeholder: #5eead4;
  --input-focus-border:#14b8a6;
  --input-focus-shadow:rgba(20,184,166,0.2);
  --table-header-bg: #f0fdfa;
  --table-border:    #99f6e4;
  --table-hover:     #f0fdfa;
  --list-item-bg:    #ffffff;
  --list-item-border:#99f6e4;
  --btn-icon-border: #99f6e4;
  --btn-icon-color:  #0f766e;
  --btn-icon-hover:  #f0fdfa;
  --comment-bg:      #f0fdfa;
  --comment-border:  #99f6e4;
  --detail-border:   #f0fdfa;
  --filter-bg:       #ffffff;
  --link-color:      #134e4a;
  --link-hover:      #0f766e;
  --dropdown-bg:     #ffffff;
  --dropdown-border: #99f6e4;
  --dropdown-color:  #134e4a;
  --dropdown-hover:  #f0fdfa;
}

/* ── Ember (volcanic dark, red ember glow) ────────────────────────────────── */
[data-theme="ember"] {
  --sidebar-bg:          #1a0505;
  --sidebar-text:        #f87171;
  --sidebar-active:      #ef4444;
  --sidebar-hover:       rgba(239,68,68,0.1);
  --sidebar-divider:     rgba(239,68,68,0.12);
  --sidebar-brand-color: #fef2f2;
  --topbar-bg:      #250808;
  --topbar-shadow:  rgba(0,0,0,0.5);
  --topbar-title:   #fca5a5;
  --page-bg:        #160404;
  --body-color:     #fca5a5;
  --muted-color:    #b91c1c;
  --card-bg:            #200707;
  --card-border:        #3f0d0d;
  --card-shadow:        rgba(239,68,68,0.1);
  --card-header-bg:     #160404;
  --card-header-border: #3f0d0d;
  --card-header-color:  #f87171;
  --input-bg:          #160404;
  --input-border:      #3f0d0d;
  --input-color:       #fca5a5;
  --input-placeholder: #7f1d1d;
  --input-focus-border:#ef4444;
  --input-focus-shadow:rgba(239,68,68,0.2);
  --table-header-bg: #200707;
  --table-border:    #3f0d0d;
  --table-hover:     #160404;
  --list-item-bg:    #200707;
  --list-item-border:#3f0d0d;
  --btn-icon-border: #3f0d0d;
  --btn-icon-color:  #b91c1c;
  --btn-icon-hover:  #160404;
  --comment-bg:      #160404;
  --comment-border:  #3f0d0d;
  --detail-border:   #160404;
  --filter-bg:       #200707;
  --link-color:      #fca5a5;
  --link-hover:      #ef4444;
  --dropdown-bg:     #200707;
  --dropdown-border: #3f0d0d;
  --dropdown-color:  #fca5a5;
  --dropdown-hover:  #160404;
}


/* ── Jade (deep emerald dark, jade green glow) ────────────────────────────── */
[data-theme="jade"] {
  --sidebar-bg:          #042318;
  --sidebar-text:        #6ee7b7;
  --sidebar-active:      #059669;
  --sidebar-hover:       rgba(5,150,105,0.1);
  --sidebar-divider:     rgba(5,150,105,0.12);
  --sidebar-brand-color: #ecfdf5;
  --topbar-bg:      #071f13;
  --topbar-shadow:  rgba(0,0,0,0.45);
  --topbar-title:   #a7f3d0;
  --page-bg:        #031a10;
  --body-color:     #a7f3d0;
  --muted-color:    #065f46;
  --card-bg:            #071f13;
  --card-border:        #14402a;
  --card-shadow:        rgba(0,0,0,0.4);
  --card-header-bg:     #031a10;
  --card-header-border: #14402a;
  --card-header-color:  #6ee7b7;
  --input-bg:          #031a10;
  --input-border:      #14402a;
  --input-color:       #a7f3d0;
  --input-placeholder: #065f46;
  --input-focus-border:#059669;
  --input-focus-shadow:rgba(5,150,105,0.2);
  --table-header-bg: #071f13;
  --table-border:    #14402a;
  --table-hover:     #031a10;
  --list-item-bg:    #071f13;
  --list-item-border:#14402a;
  --btn-icon-border: #14402a;
  --btn-icon-color:  #065f46;
  --btn-icon-hover:  #031a10;
  --comment-bg:      #031a10;
  --comment-border:  #14402a;
  --detail-border:   #031a10;
  --filter-bg:       #071f13;
  --link-color:      #a7f3d0;
  --link-hover:      #059669;
  --dropdown-bg:     #071f13;
  --dropdown-border: #14402a;
  --dropdown-color:  #a7f3d0;
  --dropdown-hover:  #031a10;
}

/* ── Hoss Mode (US Military — OD green, tan, army tactical) ──────────────── */
[data-theme="hoss"] {
  --sidebar-bg:          #1a1e10;
  --sidebar-text:        #7a8c5a;
  --sidebar-active:      #8a9970;
  --sidebar-hover:       rgba(138,153,112,0.12);
  --sidebar-divider:     rgba(138,153,112,0.15);
  --sidebar-brand-color: #c8b89a;

  --topbar-bg:      #2d3518;
  --topbar-shadow:  rgba(0,0,0,0.5);
  --topbar-title:   #c8b89a;

  --page-bg:        #3a3f20;
  --body-color:     #c8b89a;
  --muted-color:    #7a8c5a;

  --card-bg:            #2d3518;
  --card-border:        #4b5320;
  --card-shadow:        rgba(0,0,0,0.4);
  --card-header-bg:     #222817;
  --card-header-border: #4b5320;
  --card-header-color:  #8a9970;

  --input-bg:          #222817;
  --input-border:      #4b5320;
  --input-color:       #c8b89a;
  --input-placeholder: #556b2f;
  --input-focus-border:#8a9970;
  --input-focus-shadow:rgba(138,153,112,0.2);

  --table-header-bg: #222817;
  --table-border:    #4b5320;
  --table-hover:     #2d3518;

  --list-item-bg:    #2d3518;
  --list-item-border:#4b5320;

  --btn-icon-border: #4b5320;
  --btn-icon-color:  #7a8c5a;
  --btn-icon-hover:  #222817;

  --comment-bg:      #222817;
  --comment-border:  #4b5320;
  --detail-border:   #222817;
  --filter-bg:       #2d3518;
  --link-color:      #c8b89a;
  --link-hover:      #8a9970;

  --dropdown-bg:     #2d3518;
  --dropdown-border: #4b5320;
  --dropdown-color:  #c8b89a;
  --dropdown-hover:  #222817;
}
[data-theme="hoss"] * {
  font-family: 'Courier New', Courier, monospace !important;
  letter-spacing: .03em;
}
[data-theme="hoss"] .sidebar-brand i { color: #8a9970 !important; }

/* ── Jagur Mode (shades of white — good luck reading this) ────────────────── */
[data-theme="jagur"] {
  --sidebar-bg:          #ebebeb;
  --sidebar-text:        #d8d8d8;
  --sidebar-active:      #c5c5c5;
  --sidebar-hover:       rgba(0,0,0,0.04);
  --sidebar-divider:     rgba(0,0,0,0.06);
  --sidebar-brand-color: #e0e0e0;

  --topbar-bg:      #f5f5f5;
  --topbar-shadow:  rgba(0,0,0,0.03);
  --topbar-title:   #d0d0d0;

  --page-bg:        #f8f8f8;
  --body-color:     #d5d5d5;
  --muted-color:    #e2e2e2;

  --card-bg:            #ffffff;
  --card-border:        #f0f0f0;
  --card-shadow:        rgba(0,0,0,0.02);
  --card-header-bg:     #fafafa;
  --card-header-border: #f0f0f0;
  --card-header-color:  #d8d8d8;

  --input-bg:          #ffffff;
  --input-border:      #ebebeb;
  --input-color:       #c8c8c8;
  --input-placeholder: #e8e8e8;
  --input-focus-border:#d0d0d0;
  --input-focus-shadow:rgba(0,0,0,0.04);

  --table-header-bg: #fafafa;
  --table-border:    #f0f0f0;
  --table-hover:     #fafafa;

  --list-item-bg:    #ffffff;
  --list-item-border:#f0f0f0;

  --btn-icon-border: #ebebeb;
  --btn-icon-color:  #d5d5d5;
  --btn-icon-hover:  #f5f5f5;

  --comment-bg:      #fafafa;
  --comment-border:  #f0f0f0;
  --detail-border:   #f5f5f5;
  --filter-bg:       #ffffff;
  --link-color:      #d0d0d0;
  --link-hover:      #c5c5c5;

  --dropdown-bg:     #ffffff;
  --dropdown-border: #f0f0f0;
  --dropdown-color:  #d0d0d0;
  --dropdown-hover:  #fafafa;
}

/* ── Curtis Mode (John Deere — nothing runs like a Deere) ────────────────── */
[data-theme="curtis"] {
  --sidebar-bg:          #1a3d0f;
  --sidebar-text:        #a8c890;
  --sidebar-active:      #FFDE00;
  --sidebar-hover:       rgba(255,222,0,0.12);
  --sidebar-divider:     rgba(255,222,0,0.2);
  --sidebar-brand-color: #FFDE00;

  --topbar-bg:      #1f4a12;
  --topbar-shadow:  rgba(0,0,0,0.4);
  --topbar-title:   #FFDE00;

  --page-bg:        #0f2208;
  --body-color:     #d4e8c0;
  --muted-color:    #6a9a4a;

  --card-bg:            #1a3d0f;
  --card-border:        #2a5c18;
  --card-shadow:        rgba(0,0,0,0.4);
  --card-header-bg:     #143309;
  --card-header-border: #2a5c18;
  --card-header-color:  #FFDE00;

  --input-bg:          #143309;
  --input-border:      #2a5c18;
  --input-color:       #d4e8c0;
  --input-placeholder: #6a9a4a;
  --input-focus-border:#FFDE00;
  --input-focus-shadow:rgba(255,222,0,0.25);

  --table-header-bg: #143309;
  --table-border:    #2a5c18;
  --table-hover:     #1a3d0f;

  --list-item-bg:    #1a3d0f;
  --list-item-border:#2a5c18;

  --btn-icon-border: #2a5c18;
  --btn-icon-color:  #6a9a4a;
  --btn-icon-hover:  #143309;

  --comment-bg:      #143309;
  --comment-border:  #2a5c18;
  --detail-border:   #143309;
  --filter-bg:       #1a3d0f;
  --link-color:      #d4e8c0;
  --link-hover:      #FFDE00;

  --dropdown-bg:     #1a3d0f;
  --dropdown-border: #2a5c18;
  --dropdown-color:  #d4e8c0;
  --dropdown-hover:  #143309;
}
[data-theme="curtis"] .sidebar-brand i { color: #FFDE00 !important; }
[data-theme="curtis"] .nav-link.active { border-left-color: #FFDE00 !important; }

/* ── Weiland Mode (official brand colors — PMS 533 navy + PMS 7408 gold) ───── */
[data-theme="weiland"] {
  --sidebar-bg:          #1F2A44;
  --sidebar-text:        #A2AAAD;
  --sidebar-active:      #F6BE00;
  --sidebar-hover:       rgba(246,190,0,0.1);
  --sidebar-divider:     rgba(246,190,0,0.18);
  --sidebar-brand-color: #F6BE00;

  --topbar-bg:      #1F2A44;
  --topbar-shadow:  rgba(0,0,0,0.4);
  --topbar-title:   #F6BE00;

  --page-bg:        #425563;
  --body-color:     #D0D3D4;
  --muted-color:    #A2AAAD;

  --card-bg:            #1F2A44;
  --card-border:        #344560;
  --card-shadow:        rgba(0,0,0,0.35);
  --card-header-bg:     #18223a;
  --card-header-border: #344560;
  --card-header-color:  #A2AAAD;

  --input-bg:          #18223a;
  --input-border:      #344560;
  --input-color:       #D0D3D4;
  --input-placeholder: #A2AAAD;
  --input-focus-border:#F6BE00;
  --input-focus-shadow:rgba(246,190,0,0.22);

  --table-header-bg: #18223a;
  --table-border:    #344560;
  --table-hover:     #263352;

  --list-item-bg:    #1F2A44;
  --list-item-border:#344560;

  --btn-icon-border: #344560;
  --btn-icon-color:  #A2AAAD;
  --btn-icon-hover:  #18223a;

  --comment-bg:      #18223a;
  --comment-border:  #344560;
  --detail-border:   #344560;
  --filter-bg:       #1F2A44;
  --link-color:      #D0D3D4;
  --link-hover:      #F6BE00;

  --dropdown-bg:     #1F2A44;
  --dropdown-border: #344560;
  --dropdown-color:  #D0D3D4;
  --dropdown-hover:  #18223a;
}
[data-theme="weiland"] .sidebar-brand i { color: #F6BE00 !important; }
[data-theme="weiland"] .nav-link.active { border-left-color: #F6BE00 !important; }

/* ── Bootstrap variable bridge (makes BS components respect our themes) ───── */
:root, [data-theme] {
  --bs-body-bg:              var(--page-bg);
  --bs-body-color:           var(--body-color);
  --bs-border-color:         var(--card-border);
  --bs-card-bg:              var(--card-bg);
  --bs-card-border-color:    var(--card-border);
  --bs-card-cap-bg:          var(--card-header-bg);
  --bs-card-color:           var(--body-color);
  --bs-secondary-color:      var(--muted-color);
  --bs-tertiary-bg:          var(--card-header-bg);
  --bs-link-color:           var(--link-hover);
  --bs-link-hover-color:     var(--link-hover);
}
.table {
  --bs-table-color:          var(--body-color);
  --bs-table-bg:             transparent;
  --bs-table-border-color:   var(--table-border);
  --bs-table-hover-bg:       var(--table-hover);
  --bs-table-hover-color:    var(--body-color);
  --bs-table-striped-bg:     var(--table-hover);
  --bs-table-striped-color:  var(--body-color);
  --bs-table-active-bg:      var(--table-hover);
  --bs-table-active-color:   var(--body-color);
}
.list-group {
  --bs-list-group-bg:           var(--list-item-bg);
  --bs-list-group-border-color: var(--list-item-border);
  --bs-list-group-color:        var(--body-color);
  --bs-list-group-action-color: var(--body-color);
  --bs-list-group-hover-bg:     var(--table-hover);
}
.dropdown-menu {
  --bs-dropdown-bg:           var(--dropdown-bg);
  --bs-dropdown-border-color: var(--dropdown-border);
  --bs-dropdown-color:        var(--dropdown-color);
  --bs-dropdown-link-color:   var(--dropdown-color);
  --bs-dropdown-link-hover-bg:    var(--dropdown-hover);
  --bs-dropdown-link-hover-color: var(--dropdown-color);
  --bs-dropdown-divider-bg:   var(--dropdown-border);
  --bs-dropdown-header-color: var(--muted-color);
}
.modal {
  --bs-modal-bg:           var(--card-bg);
  --bs-modal-color:        var(--body-color);
  --bs-modal-border-color: var(--card-border);
  --bs-modal-header-border-color: var(--card-border);
  --bs-modal-footer-border-color: var(--card-border);
}

/* ── Reset / Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--page-bg); }
body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--page-bg);
  font-size: 14px;
  color: var(--body-color);
  transition: background 0.3s, color 0.3s;
}

/* ── Bootstrap component overrides (themed) ───────────────────────────────── */
.card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 1px 3px var(--card-shadow);
}
.card-header {
  background: var(--card-header-bg) !important;
  border-bottom: 1px solid var(--card-header-border) !important;
  border-radius: var(--card-radius) var(--card-radius) 0 0 !important;
  padding: 12px 16px !important;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--card-header-color) !important;
}
.form-control, .form-select {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-color) !important;
}
.form-control::placeholder { color: var(--input-placeholder) !important; }
.form-control:focus, .form-select:focus {
  background-color: var(--input-bg) !important;
  border-color: var(--input-focus-border) !important;
  color: var(--input-color) !important;
  box-shadow: 0 0 0 0.25rem var(--input-focus-shadow) !important;
}
.list-group-item {
  background-color: var(--list-item-bg) !important;
  border-color: var(--list-item-border) !important;
  color: var(--body-color) !important;
}
.text-muted { color: var(--muted-color) !important; }
.text-dark  { color: var(--body-color) !important; }
.dropdown-menu {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--dropdown-border) !important;
}
.dropdown-item {
  color: var(--dropdown-color) !important;
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--dropdown-hover) !important;
  color: var(--dropdown-color) !important;
}
.dropdown-divider { border-color: var(--dropdown-border) !important; }
.modal-content {
  background-color: var(--card-bg) !important;
  color: var(--body-color) !important;
  border-color: var(--card-border) !important;
}
.modal-header, .modal-footer {
  border-color: var(--card-border) !important;
}
/* keep Bootstrap's alert-success green — only retheme its border */
.alert-success { border-color: var(--card-border) !important; }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.25s ease, background 0.3s;
  z-index: 1000;
}
.sidebar.collapsed { width: var(--sidebar-w-col); }

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px;
  color: var(--sidebar-brand-color);
  font-size: 1.05rem;
  font-weight: 700;
  border-bottom: 1px solid var(--sidebar-divider);
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 0;
}
.sidebar-brand i { font-size: 1.3rem; color: var(--sidebar-active); flex-shrink: 0; }
.sidebar.collapsed .brand-text { opacity: 0; }

.sidebar-nav { padding: 12px 0; overflow-y: auto; flex: 1; display: flex; flex-direction: column; }

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 20px;
  color: var(--sidebar-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.15s, color 0.15s;
  font-size: 0.875rem;
}
.sidebar-nav .nav-link:hover { color: var(--sidebar-brand-color); background: var(--sidebar-hover); }
.sidebar-nav .nav-link.active {
  color: var(--sidebar-brand-color);
  background: color-mix(in srgb, var(--sidebar-active) 18%, transparent);
  border-left: 3px solid var(--sidebar-active);
}
.sidebar-nav .nav-link i { font-size: 1rem; flex-shrink: 0; width: 20px; text-align: center; }
.sidebar-nav .nav-link span { transition: opacity 0.15s; }
.sidebar.collapsed .nav-link span { opacity: 0; }
.sidebar.collapsed .nav-link { justify-content: center; padding: 9px 0; }

.sidebar-divider {
  border-top: 1px solid var(--sidebar-divider);
  margin: 8px 16px;
}

.sidebar-spacer { flex: 1; }

.nav-link-row .btn-icon {
  background: none;
  border: none;
  color: var(--muted-color);
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 5px;
}
.nav-link-row .btn-icon:hover { background: var(--sidebar-hover); color: var(--sidebar-brand-color); }

.text-danger-soft { color: #f87171 !important; }

/* ── Main Content ─────────────────────────────────────────────────────────── */
.main-content {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.25s ease;
}
.main-content.expanded { margin-left: var(--sidebar-w-col); }

/* ── Top Bar ──────────────────────────────────────────────────────────────── */
.top-bar {
  height: var(--topbar-h);
  background: var(--topbar-bg);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  box-shadow: 0 1px 3px var(--topbar-shadow);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background 0.3s;
}
.top-bar-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--topbar-title);
}
.btn-icon {
  background: none;
  border: 1px solid var(--btn-icon-border);
  border-radius: 6px;
  padding: 4px 8px;
  color: var(--btn-icon-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background 0.15s;
}
.btn-icon:hover { background: var(--btn-icon-hover); color: var(--body-color); }

/* ── Content Area ─────────────────────────────────────────────────────────── */
.content-area {
  padding: 20px 24px;
  flex: 1;
}
.flash-container { margin-bottom: 16px; }

/* ── Stat Cards ───────────────────────────────────────────────────────────── */
.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 1px 3px var(--card-shadow);
  height: 100%;
}
.stat-icon {
  width: 48px; height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.bg-blue-soft   { background: color-mix(in srgb, #3b82f6 14%, var(--card-bg)); }
.bg-indigo-soft { background: color-mix(in srgb, #6366f1 14%, var(--card-bg)); }
.bg-yellow-soft { background: color-mix(in srgb, #eab308 14%, var(--card-bg)); }
.bg-green-soft  { background: color-mix(in srgb, #22c55e 14%, var(--card-bg)); }
.text-indigo    { color: var(--sidebar-active); }

.stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-color); font-weight: 600; }
.stat-value { font-size: 1.8rem; font-weight: 700; color: var(--body-color); line-height: 1.1; }

/* ── Alert Cards ──────────────────────────────────────────────────────────── */
.alert-card {
  border-radius: var(--card-radius);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.alert-card-critical { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert-card-high     { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.alert-card:hover    { filter: brightness(0.97); }

/* ── Priority / Status Badges ─────────────────────────────────────────────── */
.badge-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.bp-very-low { background: #f1f5f9; color: #475569; }
.bp-low      { background: #dcfce7; color: #166534; }
.bp-medium   { background: #dbeafe; color: #1e40af; }
.bp-high     { background: #ffedd5; color: #9a3412; }
.bp-critical { background: #fee2e2; color: #991b1b; }
.bs-open        { background: #dbeafe; color: #1e40af; }
.bs-in-progress { background: #fef3c7; color: #92400e; }
.bs-pending     { background: #ffedd5; color: #9a3412; }
.bs-resolved    { background: #dcfce7; color: #166534; }
.bs-closed      { background: #f1f5f9; color: #475569; }

/* ── Table ────────────────────────────────────────────────────────────────── */
.table { color: var(--body-color); }
.table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-color);
  background: var(--table-header-bg);
  border-bottom: 1px solid var(--table-border) !important;
  border-color: var(--table-border) !important;
  padding: 10px 12px;
}
.table td { padding: 10px 12px; vertical-align: middle; border-color: var(--table-border) !important; }
.table-hover tbody tr:hover { background: var(--table-hover) !important; }

.ticket-title-link { color: var(--link-color); font-weight: 500; text-decoration: none; }
.ticket-title-link:hover { color: var(--link-hover); }

.sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
.sort-link:hover { color: var(--sidebar-active); }
.sort-link.active { color: var(--sidebar-active); }

/* ── Filter Bar ───────────────────────────────────────────────────────────── */
.filter-bar {
  background: var(--filter-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 14px 16px;
  box-shadow: 0 1px 3px var(--card-shadow);
}

/* ── Filter Dropdown Buttons ─────────────────────────────────────────────── */
.filter-dropdown-btn {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--body-color);
  font-size: .82rem;
  padding: 4px 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.filter-dropdown-btn:hover {
  background: var(--sidebar-hover);
  border-color: var(--sidebar-active);
  color: var(--sidebar-brand-color);
}
.filter-dropdown-btn.active {
  background: color-mix(in srgb, var(--sidebar-active) 12%, transparent);
  border-color: var(--sidebar-active);
  color: var(--sidebar-active);
}
.filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sidebar-active);
  color: #fff;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
}
.filter-mode-badge {
  display: inline-block;
  font-size: .62rem;
  font-weight: 700;
  background: #10b981;
  color: #fff;
  border-radius: 3px;
  padding: 0 3px;
  margin-left: 2px;
}
.filter-dropdown .dropdown-menu {
  background: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  max-height: 280px;
  overflow-y: auto;
}
.filter-dropdown .form-check-label { color: var(--body-color); cursor: pointer; }
.filter-dropdown .form-check-input { cursor: pointer; }

/* ── Detail Table ─────────────────────────────────────────────────────────── */
.detail-table th {
  font-size: 0.78rem;
  color: var(--muted-color);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  background: transparent !important;
  width: 40%;
  padding: 8px 16px;
  border-bottom: 1px solid var(--detail-border) !important;
  border-color: var(--detail-border) !important;
}
.detail-table td {
  font-size: 0.875rem;
  padding: 8px 16px;
  border-bottom: 1px solid var(--detail-border) !important;
  border-color: var(--detail-border) !important;
}
.detail-table tr:last-child th,
.detail-table tr:last-child td { border-bottom: none !important; }

/* ── Comment ──────────────────────────────────────────────────────────────── */
.comment-item {
  border-left: 3px solid var(--comment-border);
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  background: var(--comment-bg);
  margin-bottom: 10px;
}

/* ── Dopamine close button ────────────────────────────────────────────────── */
.btn-dopamine {
  background: linear-gradient(135deg, var(--sidebar-active), color-mix(in srgb, var(--sidebar-active) 60%, #ec4899));
  color: #fff;
  border: none;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--sidebar-active) 40%, transparent);
}
.btn-dopamine:hover {
  color: #fff;
  filter: brightness(1.1);
}

/* ── Search highlight mark ────────────────────────────────────────────────── */
mark.search-mark {
  background: color-mix(in srgb, var(--sidebar-active) 28%, var(--card-bg));
  color: var(--body-color);
  border-radius: 2px;
  padding: 0 1px;
}

/* ── Detail text ──────────────────────────────────────────────────────────── */
.detail-text {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--body-color);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Quick status / rock buttons ──────────────────────────────────────────── */
.btn-xs {
  padding: 2px 10px;
  font-size: 0.75rem;
  border-radius: 20px;
  line-height: 1.6;
}

/* ── Import page ──────────────────────────────────────────────────────────── */
.import-wrap { max-width: 800px; }
.step-badge {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--sidebar-active);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Theme picker active dot ──────────────────────────────────────────────── */
.theme-opt { position: relative; }
.theme-opt.is-active::after {
  content: '';
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sidebar-active);
}

/* ── Utility ──────────────────────────────────────────────────────────────── */
.row-hidden { display: none !important; }

/* ── Mobile FAB (hidden on desktop) ───────────────────────────────────── */
.mobile-fab {
  display: none;
}

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

/* ── Mobile: <= 768px ──────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Sidebar: off-screen slide-out drawer ─────────────────────────────── */
  .sidebar {
    width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform 0.3s ease, background 0.3s;
    z-index: 1100;
    box-shadow: none;
  }
  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.35);
  }
  .sidebar.collapsed {
    width: var(--sidebar-w);
    transform: translateX(-100%);
  }
  .sidebar.collapsed.mobile-open {
    transform: translateX(0);
  }
  /* Keep text visible in mobile drawer */
  .sidebar .brand-text,
  .sidebar .nav-link span,
  .sidebar.collapsed .brand-text,
  .sidebar.collapsed .nav-link span { opacity: 1 !important; }
  .sidebar .nav-link,
  .sidebar.collapsed .nav-link {
    justify-content: flex-start !important;
    padding: 12px 20px !important;
  }

  /* Sidebar overlay backdrop */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1050;
  }
  .sidebar-backdrop.active { display: block; }

  /* Sidebar nav items: bigger touch targets */
  .sidebar-nav .nav-link {
    min-height: 44px;
    font-size: 0.95rem;
  }
  .sidebar-nav .nav-link i { font-size: 1.15rem; }

  /* Saved query delete button: bigger touch target */
  .nav-link-row .btn-icon {
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Main content: full width ─────────────────────────────────────────── */
  .main-content,
  .main-content.expanded {
    margin-left: 0 !important;
  }

  /* ── Top bar ──────────────────────────────────────────────────────────── */
  .top-bar {
    padding: 0 12px;
    gap: 8px;
    height: 50px;
  }
  .top-bar-title {
    font-size: .88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40vw;
  }
  /* Hamburger button: bigger touch target */
  .top-bar .btn-icon#sidebarToggle,
  .top-bar #sidebarToggle {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Content area ─────────────────────────────────────────────────────── */
  .content-area {
    padding: 12px 10px;
  }

  /* ── Stat cards: 2-column grid, tighter ───────────────────────────────── */
  .stat-card {
    padding: 12px 14px;
  }
  .stat-value { font-size: 1.4rem; }
  .stat-label { font-size: .68rem; }

  /* ── Filter bar: full-width wrapping ──────────────────────────────────── */
  .filter-bar {
    padding: 10px 12px;
  }
  .filter-bar .input-group {
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }
  .filter-bar .d-flex.flex-wrap {
    gap: 6px !important;
  }
  .filter-dropdown-btn {
    font-size: .78rem;
    padding: 6px 10px;
    min-height: 36px;
  }
  /* Make filter dropdowns wider on mobile for touch */
  .filter-dropdown .dropdown-menu {
    min-width: 220px !important;
    max-height: 60vh;
  }
  .filter-dropdown .form-check {
    padding: 6px 0 6px 28px;
    min-height: 36px;
    display: flex;
    align-items: center;
  }
  .filter-dropdown .form-check-input {
    width: 20px;
    height: 20px;
    margin-top: 0;
  }
  .filter-dropdown .form-check-label {
    font-size: .88rem;
    padding-left: 4px;
  }

  /* ── Ticket table: horizontal scroll ──────────────────────────────────── */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }
  .table th,
  .table td {
    padding: 8px 10px;
    font-size: .82rem;
    white-space: nowrap;
  }
  /* Hide less important columns on small screens */
  .table .hide-mobile {
    display: none !important;
  }

  /* ── Bulk action bar ──────────────────────────────────────────────────── */
  #bulk-bar {
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 6px;
    border-radius: 0;
    margin: 0 -10px 8px -10px;
  }
  #bulk-bar .d-flex.gap-2 {
    gap: 4px !important;
    flex-wrap: wrap;
  }
  #bulk-bar .btn {
    font-size: .78rem;
    padding: 4px 8px;
  }

  /* ── Cards: tighter spacing ───────────────────────────────────────────── */
  .card {
    border-radius: 8px !important;
  }
  .card-header {
    padding: 10px 14px !important;
    font-size: .82rem;
  }
  .card-body {
    padding: 12px 14px;
  }

  /* ── Detail table (ticket detail right panel) ─────────────────────────── */
  .detail-table th,
  .detail-table td {
    padding: 8px 12px;
    font-size: .82rem;
  }
  .detail-table th { width: 35%; }

  /* ── Inline fields: touch-friendly ────────────────────────────────────── */
  .inline-field {
    min-height: 38px !important;
    font-size: .88rem !important;
  }

  /* ── Comment items ────────────────────────────────────────────────────── */
  .comment-item {
    padding: 10px 12px;
    margin-bottom: 8px;
  }

  /* ── Modals / popups: full width on mobile ────────────────────────────── */
  .modal-dialog {
    margin: 8px !important;
    max-width: calc(100vw - 16px) !important;
  }
  .modal-dialog.modal-sm {
    max-width: calc(100vw - 16px) !important;
  }

  /* ── Custom modal backdrops (merge, link, theme shop) ─────────────────── */
  #merge-modal-backdrop,
  #link-modal-backdrop {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  #merge-modal-backdrop > div,
  #link-modal-backdrop > div {
    width: 100% !important;
    max-height: 85vh !important;
    border-radius: 14px 14px 0 0 !important;
  }

  /* Theme shop: full width bottom sheet */
  #theme-shop-backdrop {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  #theme-shop-backdrop > div {
    width: 100% !important;
    max-height: 90vh !important;
    border-radius: 16px 16px 0 0 !important;
    overflow-y: auto !important;
  }

  /* Lightbox: safe on mobile */
  #lightbox img {
    max-width: 96vw !important;
    max-height: 85vh !important;
  }
  #lightbox button {
    top: 8px !important;
    right: 8px !important;
    font-size: 2.5rem !important;
    min-width: 44px;
    min-height: 44px;
  }

  /* Keyboard shortcuts modal -- hide on mobile (not relevant) */
  #kb-help-modal > div {
    width: 95vw !important;
    padding: 16px 18px !important;
  }

  /* ── Schedule banner / toasts ─────────────────────────────────────────── */
  #schedule-banner {
    padding: 8px 12px !important;
    font-size: .88rem;
  }
  #schedule-toasts {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    max-width: 100% !important;
  }

  /* ── Settings tabs: scrollable horizontally ───────────────────────────── */
  #settingsTabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: nowrap;
  }
  #settingsTabs::-webkit-scrollbar { display: none; }
  #settingsTabs .nav-item { flex-shrink: 0; }
  #settingsTabs .nav-link {
    padding: 8px 12px;
    font-size: .82rem;
    white-space: nowrap;
  }

  /* ── Settings field options: tighter on mobile ────────────────────────── */
  .option-row {
    flex-wrap: wrap;
    gap: 6px !important;
    padding: 8px 10px !important;
  }
  .option-row .option-name-input {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  /* ── Import page table ────────────────────────────────────────────────── */
  .import-wrap { max-width: 100%; }

  /* ── Rock detail custom fields ────────────────────────────────────────── */
  #custom-fields-list .d-flex {
    flex-wrap: wrap;
  }
  #custom-fields-list .d-flex input[style*="max-width:160px"] {
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* ── Dashboard: My Queue list items ───────────────────────────────────── */
  .list-group-item.list-group-item-action {
    padding: 10px 12px !important;
    min-height: 44px;
  }

  /* ── Buttons: minimum touch target ────────────────────────────────────── */
  .btn-sm {
    min-height: 36px;
    padding: 6px 12px;
    font-size: .82rem;
  }
  .btn-icon {
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Portal table: horizontal scroll ──────────────────────────────────── */
  .portal-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Rock cards: single column on very small ──────────────────────────── */
  .rock-card .card-body { padding: 12px; }

  /* ── Alert cards ──────────────────────────────────────────────────────── */
  .alert-card {
    padding: 12px 14px;
    gap: 10px;
  }
  .alert-card .fs-3 { font-size: 1.2rem !important; }

  /* ── Forms: wider inputs ──────────────────────────────────────────────── */
  .form-control,
  .form-select {
    min-height: 40px;
    font-size: .9rem;
  }
  .form-control-sm,
  .form-select-sm {
    min-height: 36px;
    font-size: .85rem;
  }
  textarea.form-control {
    min-height: auto;
  }

  /* ── Dopamine / close ticket button: prominent ────────────────────────── */
  #dopamine-btn {
    min-height: 44px;
    font-size: .9rem !important;
  }

  /* ── Note image drop zone: thumb-friendly ─────────────────────────────── */
  #drop-zone {
    padding: 14px !important;
    font-size: .88rem !important;
  }
  #drop-zone label {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* ── Chart containers in dashboard ────────────────────────────────────── */
  .card-body.d-flex[style*="height:180px"] {
    height: 140px !important;
  }

  /* ── Search page ──────────────────────────────────────────────────────── */
  .input-group-lg .form-control {
    font-size: .95rem;
  }
  .input-group-lg .input-group-text {
    padding: 8px 12px;
  }

  /* ── Top bar actions: compact ─────────────────────────────────────────── */
  .top-bar .ms-auto.d-flex {
    gap: 4px !important;
  }
  .top-bar .btn-sm {
    padding: 4px 8px;
    min-height: 36px;
    font-size: .78rem;
  }

  /* ── Mobile search bar (visible only on mobile) ───────────────────────── */
  .mobile-search-form {
    display: flex !important;
    padding: 6px 10px 10px;
    background: var(--topbar-bg);
    margin: 0 -10px;
    margin-top: -12px;
    margin-bottom: 12px;
  }
  .mobile-search-form .input-group {
    max-width: 100% !important;
  }

  /* ── Floating Action Button ────────────────────────────────────────────── */
  .mobile-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--sidebar-active);
    color: #fff;
    font-size: 1.6rem;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--sidebar-active) 50%, transparent), 0 2px 8px rgba(0,0,0,.2);
    text-decoration: none;
    z-index: 1000;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .mobile-fab:hover,
  .mobile-fab:active {
    transform: translateX(-50%) scale(1.1);
    box-shadow: 0 6px 28px color-mix(in srgb, var(--sidebar-active) 60%, transparent), 0 3px 12px rgba(0,0,0,.25);
    color: #fff;
    text-decoration: none;
  }

} /* end @media (max-width: 768px) */

/* Mobile search form: hidden by default (shown only in mobile media query) */
.mobile-search-form {
  display: none !important;
}
@media (max-width: 768px) {
  .mobile-search-form {
    display: flex !important;
  }
}

/* ── Headspace (canvas) mobile styles ────────────────────────────────────── */
@media (max-width: 768px) {
  #hs-bar {
    height: auto !important;
    min-height: 48px;
    flex-wrap: wrap !important;
    padding: 6px 8px !important;
    gap: 4px !important;
  }
  #hs-bar .back-btn {
    font-size: .75rem;
    padding: 4px 8px;
  }
  #hs-bar .ticket-label,
  #hs-bar .rock-label,
  #hs-bar .hs-name-label {
    max-width: 100px;
    font-size: .72rem;
  }
  .hs-divider {
    display: none !important;
  }
  .hs-tool-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.1rem;
  }
  #hs-color {
    width: 36px;
    height: 36px;
  }
  #hs-width {
    width: 52px;
    font-size: .75rem;
    padding: 3px 2px;
  }
  .hs-check-label {
    font-size: .75rem;
  }
  #hs-canvas-wrap {
    top: auto !important;
    position: fixed;
    left: 0; right: 0; bottom: 0;
  }
  #hs-status {
    font-size: .72rem;
  }
}

/* ── Driver.js tour popover theme ───────────────────────────────────────── */
.vantage-tour-popover.driver-popover {
  background: var(--card-bg, #fff);
  color: var(--body-color, #1e293b);
  border: 1px solid var(--card-border, rgba(0,0,0,.12));
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  max-width: 340px;
}
.vantage-tour-popover .driver-popover-title {
  font-size: .98rem;
  font-weight: 700;
  color: var(--body-color, #1e293b);
}
.vantage-tour-popover .driver-popover-description {
  font-size: .85rem;
  line-height: 1.55;
  color: var(--body-color, #1e293b);
  opacity: .9;
}
.vantage-tour-popover .driver-popover-footer {
  border-top: 1px solid var(--card-border, rgba(0,0,0,.1));
  padding-top: 10px;
  margin-top: 10px;
}
.vantage-tour-popover .driver-popover-footer button {
  font-size: .8rem;
  border-radius: 6px;
  padding: 5px 12px;
  text-shadow: none !important;
  box-shadow: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 500;
  letter-spacing: normal;
}
.vantage-tour-popover .driver-popover-footer button::before,
.vantage-tour-popover .driver-popover-footer button::after {
  display: none !important;
}
.vantage-tour-popover .driver-popover-footer .driver-popover-next-btn {
  background: var(--sidebar-active, #3b82f6);
  border-color: var(--sidebar-active, #3b82f6);
  color: #fff;
}
.vantage-tour-popover .driver-popover-footer .driver-popover-next-btn:hover {
  opacity: .88;
}
.vantage-tour-popover .driver-popover-footer .driver-popover-prev-btn {
  background: transparent;
  border-color: var(--card-border, rgba(0,0,0,.2));
  color: var(--body-color, #1e293b);
}
.vantage-tour-popover .driver-popover-progress-text {
  font-size: .75rem;
  opacity: .6;
}
.vantage-tour-popover .driver-popover-arrow-side-top.driver-popover-arrow { border-top-color: var(--card-bg, #fff); }
.vantage-tour-popover .driver-popover-arrow-side-bottom.driver-popover-arrow { border-bottom-color: var(--card-bg, #fff); }
.vantage-tour-popover .driver-popover-arrow-side-left.driver-popover-arrow { border-left-color: var(--card-bg, #fff); }
.vantage-tour-popover .driver-popover-arrow-side-right.driver-popover-arrow { border-right-color: var(--card-bg, #fff); }
@media (max-width: 768px) {
  .vantage-tour-popover.driver-popover { max-width: calc(100vw - 32px); }
}

/* ── Tutorial help button subtle pulse (first visit) ─────────────────────── */
#tutorial-help-btn.tour-pulse {
  animation: tour-pulse-ring 2s ease-in-out 3;
}
@keyframes tour-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(99,102,241,.5); }
  50%  { box-shadow: 0 0 0 8px rgba(99,102,241,0); }
  100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}

/* ── Portal form wrapper ─────────────────────────────────────────────────── */
.portal-form-wrap {
  max-width: 680px;
}
@media (max-width: 768px) {
  .portal-form-wrap {
    max-width: 100%;
  }
  /* Portal notification pref: full width on mobile */
  .card[style*="max-width:480px"] {
    max-width: 100% !important;
  }
  /* Detail pages: top_actions buttons wrap gracefully */
  .top-bar .ms-auto.d-flex {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  /* Changes/rocks/ideas list: card grid 1-column on small phones */
  .row-cols-md-2 > * {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* Stat bar: 2-up grid on mobile */
  .col-6.col-md-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  /* CIR / CMDB / KB detail cards: stacked on mobile */
  .col-lg-8, .col-lg-4 {
    padding-left: 8px;
    padding-right: 8px;
  }
  /* Table description truncation: relax on mobile */
  .text-truncate[style*="max-width:380px"] {
    max-width: 100% !important;
  }
}

/* ── Tablet / small desktop tweaks ───────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .content-area {
    padding: 16px 18px;
  }
  .sidebar.collapsed + .main-content,
  .main-content.expanded {
    margin-left: var(--sidebar-w-col);
  }
}