/* ═══════════════════════════════════════════════════════════════
   TriverseHub · ToolHub — Theme System
   ─────────────────────────────────────────────────────────────
   SKIN / THEMING ONLY — structure lives in style.css

   CASCADE ORDER (critical — do not change):
     1. :root          → light defaults + layout vars (lowest priority)
     2. [data-theme="light"] → explicit light (same spec as :root, comes after)
     3. @media auto-dark → system dark when no data-theme attr
     4. [data-theme="dark"] → explicit dark (LAST = highest priority at equal spec)

   Toggled via JS; persisted in localStorage ("th-theme").
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Layout variables (never theme-specific) ─────────────── */
:root {
  --header-height:  60px;
  --sidebar-width:  290px;
  --radius-sm:      8px;
  --radius-md:      12px;
  --radius-lg:      14px;
}

/* ── 2. Light theme — :root (default / lowest priority) ──────── */
:root {
  color-scheme: light;

  /* brand */
  --brand:               #4f46e5;
  --brand-hover:         #4338ca;
  --brand-soft:          #eef2ff;
  --brand-soft-border:   #c7d2fe;
  --brand-text-on:       #ffffff;

  /* page */
  --bg:                  #f6f7fb;
  --surface:             #ffffff;
  --surface-alt:         #f8fafc;
  --surface-raised:      #ffffff;

  /* text */
  --text:                #1f2937;
  --text-muted:          #6b7280;
  --text-soft:           #475569;
  --text-inverse:        #ffffff;

  /* borders */
  --border:              #e2e8f0;
  --border-strong:       #cbd5e1;

  /* header */
  --header-start:        #111;
  --header-end:          #555;
  --header-text:         #ffffff;
  --header-btn-bg:       rgba(255 255 255 / .18);
  --header-btn-hover:    rgba(255 255 255 / .30);

  /* sidebar */
  --sidebar-bg:          #0f172a;
  --sidebar-text:        #e2e8f0;
  --sidebar-hover:       rgba(148 163 184 / .18);
  --sidebar-accent:      #c4b5fd;

  /* footer */
  --footer-bg:           #111827;
  --footer-text:         #9ca3af;

  /* inputs */
  --input-bg:            #ffffff;
  --input-border:        #d1d5db;
  --input-text:          #1f2937;

  /* chips */
  --chip-bg:             #f1f5f9;
  --chip-text:           #334155;

  /* KPI */
  --kpi-bg:              #ffffff;
  --kpi-label:           #64748b;

  /* summary */
  --summary-bg:          #eff6ff;
  --summary-border:      #dbeafe;
  --summary-title:       #1d4ed8;

  /* tables */
  --table-header-bg:     #f8fafc;
  --table-header-text:   #334155;
  --table-border:        #e2e8f0;
  --table-row-hover:     #f0f9ff;
  --table-selected:      #dbeafe;

  /* charts */
  --chart-card-bg:       #ffffff;
  --chart-title:         #334155;

  /* todo */
  --todo-item-bg:        #ffffff;
  --todo-done-text:      #94a3b8;

  /* sticky */
  --sticky-bg:           rgba(255 255 255 / .92);

  /* product badges */
  --badge-app-bg:        #ede9fe;
  --badge-app-text:      #5b21b6;
  --badge-tool-bg:       #dbeafe;
  --badge-tool-text:     #1e3a8a;
  --badge-util-bg:       #dcfce7;
  --badge-util-text:     #166534;

  /* card variant */
  --card-app-bg-start:   #f8faff;
  --card-app-bg-end:     #f5f3ff;
  --card-app-border:     #dbe4ff;

  /* scrollbars */
  --scrollbar-track:     #f1f5f9;
  --scrollbar-thumb:     #cbd5e1;
  --scrollbar-hover:     #94a3b8;

  /* shadows */
  --shadow-sm:           0 1px 3px rgba(0 0 0 / .08);
  --shadow-md:           0 4px 12px rgba(15 23 42 / .12);
  --shadow-header:       0 4px 12px rgba(15 23 42 / .18);
  --shadow-sidebar:      4px 0 24px rgba(0 0 0 / .15);

  /* overlays */
  --overlay-bg:          rgba(15 23 42 / .45);

  /* utility tabs */
  --tab-active-bg:       #4f46e5;
  --tab-active-border:   #4f46e5;
  --tab-active-text:     #ffffff;

  /* toolbar */
  --toolbar-bg:          #f8fafc;
  --toolbar-border:      #e2e8f0;
}

/* ── 3. Explicit light (for icon toggle state) — same as :root ── */
[data-theme="light"] {
  color-scheme: light;

  --brand:               #4f46e5;
  --brand-hover:         #4338ca;
  --brand-soft:          #eef2ff;
  --brand-soft-border:   #c7d2fe;
  --brand-text-on:       #ffffff;

  --bg:                  #f6f7fb;
  --surface:             #ffffff;
  --surface-alt:         #f8fafc;
  --surface-raised:      #ffffff;

  --text:                #1f2937;
  --text-muted:          #6b7280;
  --text-soft:           #475569;
  --text-inverse:        #ffffff;

  --border:              #e2e8f0;
  --border-strong:       #cbd5e1;

  --header-start:        #4f46e5;
  --header-end:          #4338ca;
  --header-text:         #ffffff;
  --header-btn-bg:       rgba(255 255 255 / .18);
  --header-btn-hover:    rgba(255 255 255 / .30);

  --sidebar-bg:          #0f172a;
  --sidebar-text:        #e2e8f0;
  --sidebar-hover:       rgba(148 163 184 / .18);
  --sidebar-accent:      #c4b5fd;

  --footer-bg:           #111827;
  --footer-text:         #9ca3af;

  --input-bg:            #ffffff;
  --input-border:        #d1d5db;
  --input-text:          #1f2937;

  --chip-bg:             #f1f5f9;
  --chip-text:           #334155;

  --kpi-bg:              #ffffff;
  --kpi-label:           #64748b;

  --summary-bg:          #eff6ff;
  --summary-border:      #dbeafe;
  --summary-title:       #1d4ed8;

  --table-header-bg:     #f8fafc;
  --table-header-text:   #334155;
  --table-border:        #e2e8f0;
  --table-row-hover:     #f0f9ff;
  --table-selected:      #dbeafe;

  --chart-card-bg:       #ffffff;
  --chart-title:         #334155;

  --todo-item-bg:        #ffffff;
  --todo-done-text:      #94a3b8;

  --sticky-bg:           rgba(255 255 255 / .92);

  --badge-app-bg:        #ede9fe;
  --badge-app-text:      #5b21b6;
  --badge-tool-bg:       #dbeafe;
  --badge-tool-text:     #1e3a8a;
  --badge-util-bg:       #dcfce7;
  --badge-util-text:     #166534;

  --card-app-bg-start:   #f8faff;
  --card-app-bg-end:     #f5f3ff;
  --card-app-border:     #dbe4ff;

  --scrollbar-track:     #f1f5f9;
  --scrollbar-thumb:     #cbd5e1;
  --scrollbar-hover:     #94a3b8;

  --shadow-sm:           0 1px 3px rgba(0 0 0 / .08);
  --shadow-md:           0 4px 12px rgba(15 23 42 / .12);
  --shadow-header:       0 4px 12px rgba(15 23 42 / .18);
  --shadow-sidebar:      4px 0 24px rgba(0 0 0 / .15);

  --overlay-bg:          rgba(15 23 42 / .45);

  --tab-active-bg:       #4f46e5;
  --tab-active-border:   #4f46e5;
  --tab-active-text:     #ffffff;

  --toolbar-bg:          #f8fafc;
  --toolbar-border:      #e2e8f0;
}

/* ── 4. Auto dark — system preference, no explicit data-theme ── */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;

    --brand:               #818cf8;
    --brand-hover:         #6366f1;
    --brand-soft:          #1e1b4b;
    --brand-soft-border:   #3730a3;
    --brand-text-on:       #ffffff;

    --bg:                  #0d1117;
    --surface:             #161b22;
    --surface-alt:         #1c2128;
    --surface-raised:      #21262d;

    --text:                #e6edf3;
    --text-muted:          #8b949e;
    --text-soft:           #7d8590;
    --text-inverse:        #0d1117;

    --border:              #30363d;
    --border-strong:       #484f58;

    --header-start:        #1e1b4b;
    --header-end:          #312e81;
    --header-text:         #ffffff;
    --header-btn-bg:       rgba(255 255 255 / .12);
    --header-btn-hover:    rgba(255 255 255 / .22);

    --sidebar-bg:          #010409;
    --sidebar-text:        #c9d1d9;
    --sidebar-hover:       rgba(177 186 196 / .12);
    --sidebar-accent:      #a5b4fc;

    --footer-bg:           #010409;
    --footer-text:         #8b949e;

    --input-bg:            #21262d;
    --input-border:        #30363d;
    --input-text:          #e6edf3;

    --chip-bg:             #21262d;
    --chip-text:           #c9d1d9;

    --kpi-bg:              #21262d;
    --kpi-label:           #8b949e;

    --summary-bg:          #1e1b4b;
    --summary-border:      #3730a3;
    --summary-title:       #a5b4fc;

    --table-header-bg:     #21262d;
    --table-header-text:   #c9d1d9;
    --table-border:        #30363d;
    --table-row-hover:     #1c2128;
    --table-selected:      #1e3a5f;

    --chart-card-bg:       #21262d;
    --chart-title:         #c9d1d9;

    --todo-item-bg:        #21262d;
    --todo-done-text:      #484f58;

    --sticky-bg:           rgba(22 27 34 / .92);

    --badge-app-bg:        #2e1065;
    --badge-app-text:      #c4b5fd;
    --badge-tool-bg:       #1e3a5f;
    --badge-tool-text:     #93c5fd;
    --badge-util-bg:       #14532d;
    --badge-util-text:     #86efac;

    --card-app-bg-start:   #1c1a2e;
    --card-app-bg-end:     #1a1b2e;
    --card-app-border:     #3730a3;

    --scrollbar-track:     #161b22;
    --scrollbar-thumb:     #30363d;
    --scrollbar-hover:     #484f58;

    --shadow-sm:           0 1px 3px rgba(0 0 0 / .4);
    --shadow-md:           0 4px 12px rgba(0 0 0 / .4);
    --shadow-header:       0 4px 12px rgba(0 0 0 / .5);
    --shadow-sidebar:      4px 0 24px rgba(0 0 0 / .5);

    --overlay-bg:          rgba(0 0 0 / .6);

    --tab-active-bg:       #818cf8;
    --tab-active-border:   #818cf8;
    --tab-active-text:     #0d1117;

    --toolbar-bg:          #1c2128;
    --toolbar-border:      #30363d;
  }
}

/* ── 5. Explicit dark — LAST so it wins at equal specificity ─── */
[data-theme="dark"] {
  color-scheme: dark;

  --brand:               #818cf8;
  --brand-hover:         #6366f1;
  --brand-soft:          #1e1b4b;
  --brand-soft-border:   #3730a3;
  --brand-text-on:       #ffffff;

  --bg:                  #0d1117;
  --surface:             #161b22;
  --surface-alt:         #1c2128;
  --surface-raised:      #21262d;

  --text:                #e6edf3;
  --text-muted:          #8b949e;
  --text-soft:           #7d8590;
  --text-inverse:        #0d1117;

  --border:              #30363d;
  --border-strong:       #484f58;

  --header-start:        #1e1b4b;
  --header-end:          #312e81;
  --header-text:         #ffffff;
  --header-btn-bg:       rgba(255 255 255 / .12);
  --header-btn-hover:    rgba(255 255 255 / .22);

  --sidebar-bg:          #010409;
  --sidebar-text:        #c9d1d9;
  --sidebar-hover:       rgba(177 186 196 / .12);
  --sidebar-accent:      #a5b4fc;

  --footer-bg:           #010409;
  --footer-text:         #8b949e;

  --input-bg:            #21262d;
  --input-border:        #30363d;
  --input-text:          #e6edf3;

  --chip-bg:             #21262d;
  --chip-text:           #c9d1d9;

  --kpi-bg:              #21262d;
  --kpi-label:           #8b949e;

  --summary-bg:          #1e1b4b;
  --summary-border:      #3730a3;
  --summary-title:       #a5b4fc;

  --table-header-bg:     #21262d;
  --table-header-text:   #c9d1d9;
  --table-border:        #30363d;
  --table-row-hover:     #1c2128;
  --table-selected:      #1e3a5f;

  --chart-card-bg:       #21262d;
  --chart-title:         #c9d1d9;

  --todo-item-bg:        #21262d;
  --todo-done-text:      #484f58;

  --sticky-bg:           rgba(22 27 34 / .92);

  --badge-app-bg:        #2e1065;
  --badge-app-text:      #c4b5fd;
  --badge-tool-bg:       #1e3a5f;
  --badge-tool-text:     #93c5fd;
  --badge-util-bg:       #14532d;
  --badge-util-text:     #86efac;

  --card-app-bg-start:   #1c1a2e;
  --card-app-bg-end:     #1a1b2e;
  --card-app-border:     #3730a3;

  --scrollbar-track:     #161b22;
  --scrollbar-thumb:     #30363d;
  --scrollbar-hover:     #484f58;

  --shadow-sm:           0 1px 3px rgba(0 0 0 / .4);
  --shadow-md:           0 4px 12px rgba(0 0 0 / .4);
  --shadow-header:       0 4px 12px rgba(0 0 0 / .5);
  --shadow-sidebar:      4px 0 24px rgba(0 0 0 / .5);

  --overlay-bg:          rgba(0 0 0 / .6);

  --tab-active-bg:       #818cf8;
  --tab-active-border:   #818cf8;
  --tab-active-text:     #0d1117;

  --toolbar-bg:          #1c2128;
  --toolbar-border:      #30363d;
}

/* ── 6. Scrollbar theming ────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
::-webkit-scrollbar              { width: 8px; height: 8px; }
::-webkit-scrollbar-track        { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb        { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover  { background: var(--scrollbar-hover); }

/* ── 7. Bootstrap dark integration ──────────────────────────── */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
html:not([data-theme="light"]):not([data-theme="dark"]) .form-control,
html:not([data-theme="light"]):not([data-theme="dark"]) .form-select {
  background-color: var(--input-bg);
  border-color:     var(--input-border);
  color:            var(--input-text);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem rgba(129 140 248 / .25);
  background-color: var(--input-bg);
  color: var(--input-text);
}

[data-theme="dark"] .dropdown-menu,
html:not([data-theme="light"]):not([data-theme="dark"]) .dropdown-menu {
  background-color: var(--surface-raised);
  border-color:     var(--border);
}

[data-theme="dark"] .dropdown-item,
html:not([data-theme="light"]):not([data-theme="dark"]) .dropdown-item {
  color: var(--text);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus,
html:not([data-theme="light"]):not([data-theme="dark"]) .dropdown-item:hover {
  background-color: var(--surface-alt);
  color:            var(--text);
}

[data-theme="dark"] .btn-outline-secondary,
html:not([data-theme="light"]):not([data-theme="dark"]) .btn-outline-secondary {
  border-color: var(--border);
  color:        var(--text-muted);
}

[data-theme="dark"] .btn-outline-secondary:hover,
html:not([data-theme="light"]):not([data-theme="dark"]) .btn-outline-secondary:hover {
  background-color: var(--surface-raised);
  border-color:     var(--border-strong);
  color:            var(--text);
}

/* ── 8. Theme toggle icon visibility ────────────────────────── */
.th-icon-auto,
.th-icon-light,
.th-icon-dark {
  display: none;
}
/* auto = no data-theme attr on html */
html:not([data-theme])          .th-icon-auto  { display: inline-block; }
html[data-theme="light"]        .th-icon-light { display: inline-block; }
html[data-theme="dark"]         .th-icon-dark  { display: inline-block; }