/* ==========================================================================
   theme.css — "Clean Blue" design system (v13). Loaded last in <head>, replaces glow.css.
   ONE place for colours: every other stylesheet reads these variables.
     --cb-*   Clean Blue tokens (light by default, dark under [data-theme="dark"])
     --bg/--surface/--text/... legacy names used by style.css + older templates
     --lx-* and --st-* names used by ui_kit.css and the redesigned pages
   Theme switching is unchanged: localStorage "theme" → <html data-theme>.
   ========================================================================== */

:root,
:root[data-theme="light"] {
  --cb-primary: #2563eb;          /* buttons, links, active nav */
  --cb-primary-hover: #1d4ed8;
  --cb-primary-2: #3b82f6;
  --cb-primary-soft: #eff6ff;
  --cb-primary-line: #bfdbfe;
  --cb-on-primary: #ffffff;
  --cb-btn: #2563eb;              /* solid button fill (white text) — same in both themes */
  --cb-btn-hover: #1d4ed8;
  --cb-bg: #f8fafc;
  --cb-card: #ffffff;
  --cb-elev: #f1f5f9;             /* table heads, inputs, chips */
  --cb-hover: #f1f5f9;
  --cb-text: #0f172a;
  --cb-text-2: #334155;
  --cb-muted: #64748b;
  --cb-border: #e2e8f0;
  --cb-border-2: #cbd5e1;
  --cb-success: #16a34a;  --cb-success-ink: #15803d;  --cb-success-soft: #f0fdf4;
  --cb-warning: #f59e0b;  --cb-warning-ink: #b45309;  --cb-warning-soft: #fffbeb;
  --cb-orange: #ea580c;   --cb-orange-ink: #c2410c;
  --cb-error: #dc2626;    --cb-error-ink: #b91c1c;    --cb-error-soft: #fef2f2;
  --cb-neutral: #94a3b8;
  --cb-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --cb-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px -2px rgba(15, 23, 42, .06);
  --cb-shadow-lg: 0 18px 44px -14px rgba(15, 23, 42, .25);
  --cb-ring: 0 0 0 3px rgba(37, 99, 235, .22);
  --cb-scrim: rgba(15, 23, 42, .45);
  --cb-r: 12px;
  --cb-r-sm: 8px;
  --cb-font: "Inter", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  color-scheme: light;
}

:root[data-theme="dark"],
:root:not([data-theme]) {
  --cb-primary: #60a5fa;          /* accent text / icons on dark */
  --cb-primary-hover: #93c5fd;
  --cb-primary-2: #3b82f6;
  --cb-primary-soft: rgba(96, 165, 250, .12);
  --cb-primary-line: rgba(96, 165, 250, .35);
  --cb-on-primary: #0b1220;
  --cb-btn: #2563eb;
  --cb-btn-hover: #3b82f6;
  --cb-bg: #0b1220;
  --cb-card: #111c2e;
  --cb-elev: #172338;
  --cb-hover: #1a2840;
  --cb-text: #f1f5f9;
  --cb-text-2: #cbd5e1;
  --cb-muted: #94a3b8;
  --cb-border: #263449;
  --cb-border-2: #33445e;
  --cb-success: #22c55e;  --cb-success-ink: #4ade80;  --cb-success-soft: rgba(34, 197, 94, .12);
  --cb-warning: #f59e0b;  --cb-warning-ink: #fbbf24;  --cb-warning-soft: rgba(245, 158, 11, .12);
  --cb-orange: #f97316;   --cb-orange-ink: #fb923c;
  --cb-error: #ef4444;    --cb-error-ink: #f87171;    --cb-error-soft: rgba(239, 68, 68, .12);
  --cb-neutral: #64748b;
  --cb-shadow-sm: 0 1px 2px rgba(0, 0, 0, .25);
  --cb-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 4px 14px -6px rgba(0, 0, 0, .35);
  --cb-shadow-lg: 0 22px 50px -16px rgba(0, 0, 0, .6);
  --cb-ring: 0 0 0 3px rgba(96, 165, 250, .28);
  --cb-scrim: rgba(2, 6, 18, .6);
  color-scheme: dark;
}

/* ---- legacy + kit names, derived (same block works for both themes).
   Selector matches style.css's ":root[data-theme=dark]" specificity so these win. ---- */
:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --bg: var(--cb-bg); --surface: var(--cb-card); --surface-2: var(--cb-elev); --sidebar: var(--cb-card);
  --text: var(--cb-text); --text-soft: var(--cb-muted); --border: var(--cb-border);
  --accent: var(--cb-primary); --accent-soft: var(--cb-primary-soft); --accent-ink: var(--cb-on-primary);
  --up: var(--cb-success-ink); --up-soft: var(--cb-success-soft);
  --down: var(--cb-error-ink); --down-soft: var(--cb-error-soft);
  --mid: var(--cb-warning-ink); --mid-soft: var(--cb-warning-soft);
  --shadow: var(--cb-shadow); --glow: var(--cb-shadow); --glow-hover: var(--cb-shadow);
  --radius: var(--cb-r);
  --glow-1: 0%; --glow-2: 0%;     /* insights.css page glow: off */

  --lx-bg: var(--cb-bg); --lx-card: var(--cb-card); --lx-card-2: var(--cb-elev); --lx-row-hover: var(--cb-hover);
  --lx-line: var(--cb-border); --lx-line-2: var(--cb-border-2);
  --lx-ink: var(--cb-text); --lx-ink-2: var(--cb-text-2); --lx-ink-3: var(--cb-muted);
  --lx-blue: var(--cb-primary); --lx-violet: var(--cb-primary); --lx-teal: var(--cb-success-ink);
  --lx-amber: var(--cb-warning-ink); --lx-red: var(--cb-error-ink);
  --lx-focus: var(--cb-ring);
  --lx-r: var(--cb-r); --lx-r-sm: var(--cb-r-sm);
  --lx-shadow: var(--cb-shadow-sm);
  /* status bands (existing business rules): hit / close / below / far below / none */
  --st-hit: var(--cb-success-ink); --st-close: var(--cb-warning-ink); --st-mid: var(--cb-orange-ink);
  --st-low: var(--cb-error-ink); --st-none: var(--cb-neutral);
  /* incident states */
  --stc-open: var(--cb-primary); --stc-prog: var(--cb-warning-ink); --stc-done: var(--cb-success-ink);
}

/* ==========================================================================
   Base
   ========================================================================== */
body {
  font-family: var(--cb-font);
  background: var(--cb-bg);
  background-image: none;
  color: var(--cb-text);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11" 1, "ss01" 1;
}
a { color: var(--cb-primary); }
:focus-visible { outline: none; box-shadow: var(--cb-ring); border-radius: 6px; }
::selection { background: color-mix(in srgb, var(--cb-primary-2) 28%, transparent); }

/* scrollbars: quiet in both themes */
* { scrollbar-width: thin; scrollbar-color: var(--cb-border-2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--cb-border-2); border-radius: 10px; border: 2px solid var(--cb-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--cb-muted); }

/* ==========================================================================
   Sidebar
   ========================================================================== */
.sidebar {
  width: 248px; padding: 16px 12px 14px; gap: 2px;
  background: var(--cb-card); box-shadow: none;
  border-inline-start: none; border-inline-end: 1px solid var(--cb-border);
  overflow-y: auto; overflow-x: hidden;
  transition: width .18s ease;
}
.brand { padding: 2px 6px 16px; gap: 10px; }
.brand-mark { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; background: var(--cb-btn); color: #fff; box-shadow: none; font-size: .8rem; }
.brand-text { font-weight: 650; font-size: .95rem; color: var(--cb-text); background: none; -webkit-text-fill-color: currentColor; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-collapse {
  width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; padding: 0;
  border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--cb-muted); cursor: pointer;
}
.sb-collapse:hover { background: var(--cb-hover); color: var(--cb-text); }

.project-badge {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 2px 14px; padding: 8px 10px; border-radius: 10px;
  background: var(--cb-elev); border: 1px solid var(--cb-border);
}
.project-name { color: var(--cb-primary); font-weight: 650; font-size: .85rem; }
.project-switch button { border-radius: 7px; border: 1px solid var(--cb-border); background: var(--cb-card); color: var(--cb-muted); font-size: .74rem; }
.project-switch button:hover { color: var(--cb-primary); border-color: var(--cb-primary-line); }

.nav { gap: 2px; }
.nav-item {
  position: relative; gap: 11px; height: 38px; padding: 0 10px; border-radius: 8px;
  color: var(--cb-muted); font-size: .875rem; font-weight: 500; letter-spacing: 0;
  transition: background .12s ease, color .12s ease;
}
.nav-item .nav-icon {
  width: 20px; height: 20px; border: none; background: none; border-radius: 0;
  color: inherit; box-shadow: none; display: grid; place-items: center;
}
.nav-item .nav-icon .ico { width: 18px; height: 18px; }
.nav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item:hover { background: var(--cb-hover); color: var(--cb-text); }
.nav-item:hover .nav-icon { color: inherit; border: none; box-shadow: none; }
.nav-item.is-active { background: var(--cb-primary-soft); color: var(--cb-primary); font-weight: 600; }
.nav-item.is-active .nav-icon { background: none; color: var(--cb-primary); box-shadow: none; }
.nav-item.is-active::before {
  content: ""; position: absolute; inset-inline-start: -12px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--cb-primary); box-shadow: none;
}
[dir="rtl"] .nav-item.is-active::before { border-radius: 3px 0 0 3px; }
.nav-badge {
  margin-inline-start: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-grid; place-items: center; font-size: .7rem; font-weight: 650;
  background: var(--cb-error-soft); color: var(--cb-error-ink); border: 1px solid color-mix(in srgb, var(--cb-error) 30%, transparent);
}

.sidebar-foot { gap: 8px; padding-top: 14px; border-top: 1px solid var(--cb-border); margin-top: auto; }
.lang-row { gap: 4px; padding: 3px; border-radius: 9px; background: var(--cb-elev); border: 1px solid var(--cb-border); }
.lang-btn { flex: 1; border: none; border-radius: 6px; background: transparent; color: var(--cb-muted); font-size: .75rem; font-weight: 600; height: 28px; display: grid; place-items: center; text-decoration: none; }
.lang-btn:hover { color: var(--cb-text); }
.lang-btn.is-active { background: var(--cb-card); color: var(--cb-text); box-shadow: var(--cb-shadow-sm); }
.theme-toggle, .tour-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px;
  border: 1px solid transparent; border-radius: 8px; background: transparent;
  color: var(--cb-muted); font: inherit; font-size: .84rem; cursor: pointer;
}
.theme-toggle:hover, .tour-btn:hover { background: var(--cb-hover); color: var(--cb-text); border-color: transparent; }
.theme-toggle .ico, .tour-btn .ico { flex-shrink: 0; }
.theme-icon { display: grid; place-items: center; }
.user-box { padding: 6px 6px 6px 8px; border-radius: 10px; background: transparent; border: 1px solid var(--cb-border); }
.user-avatar { background: var(--cb-btn); color: #fff; width: 28px; height: 28px; }
.user-name { color: var(--cb-text); font-weight: 550; font-size: .84rem; }
.logout-link { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; color: var(--cb-muted); }
.logout-link:hover { background: var(--cb-error-soft); color: var(--cb-error-ink); }

/* collapsed (icon-only) sidebar — desktop only, remembered per browser */
@media (min-width: 861px) {
  html.sb-mini .sidebar { width: 68px; padding-inline: 10px; }
  html.sb-mini .brand { flex-direction: column; padding-inline: 0; }
  html.sb-mini .brand-text, html.sb-mini .project-badge, html.sb-mini .lang-row { display: none; }
  /* labels stay readable by screen readers; a tooltip shows them on hover */
  html.sb-mini .nav-label, html.sb-mini .theme-label, html.sb-mini .tour-label, html.sb-mini .user-name {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  html.sb-mini .nav-item, html.sb-mini .theme-toggle, html.sb-mini .tour-btn { justify-content: center; padding: 0; }
  html.sb-mini .nav-item.is-active::before { inset-inline-start: -10px; }
  html.sb-mini .nav-badge { position: absolute; top: 2px; inset-inline-end: 2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: .62rem; }
  html.sb-mini .user-box { flex-direction: column; padding: 6px 0; border: none; }
  html.sb-mini .sb-collapse svg { transform: scaleX(-1); }
}

/* phones/tablets: the sidebar becomes a slide-in menu opened from the top bar */
@keyframes sbIn { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes sbInR { from { transform: translateX(100%); } to { transform: none; } }
.mbar { display: none; }
.sb-scrim { display: none; }
@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .mbar {
    display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 40;
    height: 56px; padding: 0 12px; background: var(--cb-card); border-bottom: 1px solid var(--cb-border);
  }
  .mbar .brand-mark { width: 30px; height: 30px; }
  .mbar b { flex: 1; min-width: 0; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mbar button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--cb-border); border-radius: 9px; background: var(--cb-card); color: var(--cb-text); cursor: pointer; }
  .sidebar {
    display: none; position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: 51; width: min(290px, 86vw); height: 100%;
    border-bottom: none; box-shadow: var(--cb-shadow-lg);
  }
  /* closed = out of the layout (an off-screen panel would widen the page in RTL) */
  html.sb-open .sidebar { display: flex; animation: sbIn .2s ease; }
  [dir="rtl"] html.sb-open .sidebar, html[dir="rtl"].sb-open .sidebar { animation-name: sbInR; }
  html.sb-open .sb-scrim { display: block; position: fixed; inset: 0; z-index: 50; background: var(--cb-scrim); }
  .sidebar .sb-collapse { display: none; }
  .nav { flex-direction: column; overflow: visible; }
  .sidebar-foot { flex-direction: column; margin-top: 16px; }
  .main { padding: 18px 14px 64px; }
  .panel { overflow-x: auto; }          /* wide tables scroll inside their card instead of widening the page */
}

/* ==========================================================================
   Page header
   ========================================================================== */
.main { padding: 24px 28px 64px; }
.topbar { align-items: center; margin-bottom: 20px; gap: 12px 16px; }
.topbar h1 { font-size: 1.5rem; font-weight: 650; letter-spacing: -.01em; color: var(--cb-text); background: none; -webkit-text-fill-color: currentColor; }
.sub { color: var(--cb-muted); font-size: .86rem; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px;
  background: var(--cb-btn); color: #fff; border: 1px solid var(--cb-btn); border-radius: 9px;
  font: inherit; font-size: .86rem; font-weight: 600; box-shadow: var(--cb-shadow-sm); filter: none;
  transition: background .12s ease, border-color .12s ease;
}
.btn-primary:hover { background: var(--cb-btn-hover); border-color: var(--cb-btn-hover); filter: none; box-shadow: var(--cb-shadow-sm); }
.btn-ghost { border-radius: 9px; border: 1px solid var(--cb-border); background: var(--cb-card); color: var(--cb-text-2); }
.btn-ghost:hover { background: var(--cb-hover); }
.xl-btn { width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--cb-border); background: var(--cb-card); color: var(--cb-text-2); }
.xl-btn:hover, [data-theme="dark"] .xl-btn:hover { background: var(--cb-hover); border-color: var(--cb-border-2); color: var(--cb-primary); }
[data-theme="dark"] .xl-btn { color: var(--cb-text-2); border-color: var(--cb-border); }
.xl-btn:focus-visible { outline: none; box-shadow: var(--cb-ring); }

/* ==========================================================================
   Surfaces, tables, inputs (older pages)
   ========================================================================== */
.card, .panel {
  background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: var(--cb-r);
  box-shadow: var(--cb-shadow-sm); transition: border-color .15s ease;
}
.card:hover, .panel:hover { transform: none; box-shadow: var(--cb-shadow-sm); border-color: var(--cb-border); }
.card-value { text-shadow: none; color: var(--cb-text); font-weight: 650; letter-spacing: -.01em; }
.card-label { color: var(--cb-muted); }
.panel-title { font-weight: 620; }

.data-table th {
  background: var(--cb-elev); color: var(--cb-muted); font-size: .75rem; font-weight: 600;
  text-transform: none; letter-spacing: .01em; border-bottom: 1px solid var(--cb-border);
}
.data-table td { border-bottom: 1px solid var(--cb-border); color: var(--cb-text-2); }
.data-table tbody tr:hover { background: var(--cb-hover); }
.table-wrap, .table-scroll { border-radius: var(--cb-r-sm); }

.main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,
.main select:focus, .main textarea:focus, .search-input:focus {
  outline: none; border-color: var(--cb-primary-2); box-shadow: var(--cb-ring);
}
.search-input { background: var(--cb-card); border-color: var(--cb-border); border-radius: 9px; }
select option { background: var(--cb-card); color: var(--cb-text); }

.bar-track { background: var(--cb-elev); border-color: var(--cb-border); }
.fill-up { background: var(--cb-success); } .fill-down { background: var(--cb-error); } .fill-mid { background: var(--cb-warning); }

.flash { border-radius: 10px; box-shadow: var(--cb-shadow-lg); border: 1px solid var(--cb-border); background: var(--cb-card); color: var(--cb-text); }
.flash-success { background: var(--cb-success-soft); color: var(--cb-success-ink); border-color: color-mix(in srgb, var(--cb-success) 30%, transparent); }
.flash-error { background: var(--cb-error-soft); color: var(--cb-error-ink); border-color: color-mix(in srgb, var(--cb-error) 30%, transparent); }
[data-theme="dark"] .flash-success, [data-theme="dark"] .flash-error { background-color: var(--cb-card); }

.tour-overlay { background: var(--cb-scrim); }
.tour-card { background: var(--cb-card); border: 1px solid var(--cb-border); border-radius: 14px; box-shadow: var(--cb-shadow-lg); }
.watermark, .tagline { opacity: .3; }

/* ==========================================================================
   Page banner ("about this page"), view-as bar, scope chip (moved from glow.css)
   ========================================================================== */
.pb {
  position: relative; display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 52px 14px 16px; margin: 0 0 18px; border-radius: var(--cb-r);
  background: var(--cb-card); border: 1px solid var(--cb-border); box-shadow: var(--cb-shadow-sm); overflow: hidden;
}
[dir="rtl"] .pb { padding: 14px 16px 14px 52px; }
.pb:not([hidden]) { animation: pbIn .25s ease; }
.pb[hidden], .pb-reopen[hidden] { display: none !important; }
@keyframes pbIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pb-icon { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: var(--cb-primary-soft); color: var(--cb-primary); }
.pb-title { font-weight: 650; font-size: .95rem; margin-bottom: 3px; color: var(--cb-text); }
.pb-desc { margin: 0 0 10px; color: var(--cb-muted); font-size: .84rem; line-height: 1.6; max-width: 820px; }
.pb-tips { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-tip { font-size: .74rem; padding: 3px 10px; border-radius: 99px; background: var(--cb-elev); border: 1px solid var(--cb-border); color: var(--cb-text-2); }
.pb-tip::before { content: "›"; margin-inline-end: 6px; color: var(--cb-primary); font-weight: 700; }
.pb-close {
  position: absolute; top: 10px; inset-inline-end: 10px; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--cb-muted); cursor: pointer;
}
.pb-close:hover { background: var(--cb-hover); color: var(--cb-text); }
.pb-reopen {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 4px 11px;
  border-radius: 99px; border: 1px solid var(--cb-border); background: var(--cb-card); color: var(--cb-muted);
  font-family: inherit; font-size: .76rem; cursor: pointer;
}
.pb-reopen:hover { color: var(--cb-primary); border-color: var(--cb-primary-line); }
@media (prefers-reduced-motion: reduce) { .pb, .sidebar { animation: none !important; transition: none !important; } }

.va-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 10px 14px; border-radius: 10px;
  background: var(--cb-warning-soft); border: 1px solid color-mix(in srgb, var(--cb-warning) 45%, transparent); color: var(--cb-text); font-size: .86rem;
}
.va-bar b { color: var(--cb-warning-ink); }
.va-bar .va-ro { font-size: .72rem; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--cb-warning) 20%, transparent); color: var(--cb-warning-ink); }
.va-bar form { margin-inline-start: auto; }
.va-bar button { border: none; cursor: pointer; font: inherit; font-weight: 650; padding: 6px 14px; border-radius: 8px; background: var(--cb-warning); color: #1c1300; }
.scope-chip { display: inline-flex; gap: 6px; align-items: center; margin: 0 0 14px; padding: 4px 12px; border-radius: 99px;
  font-size: .76rem; background: var(--cb-primary-soft); color: var(--cb-primary); border: 1px solid var(--cb-primary-line); }
.um-scope { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.um-scope select { flex: 1; min-width: 0; }
.um-scope .um-auto { font-size: .7rem; color: var(--cb-muted); }
.um-va { background: var(--cb-warning) !important; color: #1c1300 !important; }

/* ==========================================================================
   Insights panel (rail)
   ========================================================================== */
.ir-rail { background: var(--cb-card); border-color: var(--cb-border); box-shadow: var(--cb-shadow-sm); }
.ir-card { background: var(--cb-elev); border-color: var(--cb-border); }

/* ==========================================================================
   Older pages: keep their structure, swap decorative gold/purple for the system
   ========================================================================== */
:root .tool { color: var(--cb-text); background: var(--cb-card); border: 1px solid var(--cb-border); box-shadow: var(--cb-shadow-sm); min-height: 140px; }
:root .tool:hover { transform: none; border-color: var(--cb-primary-line); box-shadow: var(--cb-shadow); }
:root .tool::after { display: none; }
:root .tool h3, :root .tool p, :root .t-gold h3, :root .t-gold p { color: var(--cb-text); }
:root .tool p { color: var(--cb-muted); opacity: 1; }
:root .tool .ico { background: var(--cb-primary-soft); color: var(--cb-primary); backdrop-filter: none; border-radius: 10px; font-size: 1.4rem; }
:root .t-gold, :root .t-green, :root .t-blue, :root .t-violet { background: var(--cb-card); }
:root .studio { background: var(--cb-card); border-color: var(--cb-border); box-shadow: var(--cb-shadow-sm); }
:root .recent { background: var(--cb-elev); }
:root .adm-btn-gold, :root .um-gold, :root .kh-gold { background: var(--cb-btn); color: #fff; }
:root .kh-green { background: var(--cb-success); }
:root .r-admin { background: var(--cb-primary-soft); color: var(--cb-primary); }
:root .um-av { background: var(--cb-btn); }
.tt-search input:focus, .tt-select:focus { border-color: var(--cb-primary-2) !important; box-shadow: var(--cb-ring) !important; }
.tt-select.tt-active { border-color: var(--cb-primary-2) !important; background-color: var(--cb-primary-soft) !important; }
table.tt-table thead th.tt-th[data-sort="asc"], table.tt-table thead th.tt-th[data-sort="desc"] { color: var(--cb-primary) !important; background: var(--cb-primary-soft) !important; }
.tt-select option { color: var(--cb-text) !important; background: var(--cb-card) !important; }
.sdl-btn, [data-theme="dark"] .sdl-btn { color: var(--cb-muted); border-color: var(--cb-border); }
.sdl-btn:hover, [data-theme="dark"] .sdl-btn:hover { color: var(--cb-primary); border-color: var(--cb-primary-line); background: var(--cb-primary-soft); }

/* team activity table (was purple + gold inline) */
.tp-head { background: var(--cb-elev) !important; }
.tp-head th { color: var(--cb-muted) !important; font-size: .78rem; }
.tp-num { color: var(--cb-primary) !important; }
.tp-time { color: var(--cb-text) !important; }
.tp-on { background: var(--cb-success-soft) !important; color: var(--cb-success-ink) !important; }
.tp-off { background: var(--cb-warning-soft) !important; color: var(--cb-warning-ink) !important; }
.tp-back { color: var(--cb-primary) !important; }

/* theme toggle icon: moon in light mode, sun in dark mode */
.ti-sun, [data-theme="dark"] .ti-moon, :root:not([data-theme]) .ti-moon { display: none; }
[data-theme="dark"] .ti-sun, :root:not([data-theme]) .ti-sun { display: grid; }
.ti-moon { display: grid; }