/* =============================================================================
   Siky Limited — Theme Switcher (central 8-theme system)
   ============================================================================
   Provides 8 user-switchable themes across the portal AND landing page.
   Works alongside theme-soft.css (per-branch accents) without cascade conflict:
     - theme-soft.css     sets --brand-accent / --brand-* per data-branch
     - theme-switcher.css sets --bg / --panel / --text / --accent per data-theme
   Specificity note: theme-soft.css's strongest selector is html:root (0,0,1,1).
   Ours is html:root[data-theme="X"] (0,0,2,1) which outranks it cleanly.
   Both use !important — higher specificity wins the tiebreak.

   Themes:  day · night · chrome-red · aquarium · startup ·
            liquid-glass · crystal-glass · corporate-pastel

   Font:    Apple San Francisco system stack (native on macOS/iOS) →
            Inter (SF-alike) on Windows/Linux → system fallbacks.
   =========================================================================== */

:root{
  /* Apple SF first (macOS/iOS/iPadOS) → Inter (SF-lookalike) elsewhere. */
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Helvetica Neue","Segoe UI",system-ui,Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --arabic:"Amiri",serif;

  /* Theme-invariant layout tokens. Safe globally because they don't change
     between light/dark — they're geometry, not colour. */
  --radius:10px;
  --radius-sm:6px;
  --radius-lg:16px;
  --radius-pill:999px;
}

/* Universal font application — outranks dashboard inline body{font-family:...} rules. */
html:root,html:root body{
  font-family:var(--sans) !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern","liga","calt";
}
html:root code,html:root pre,html:root kbd,html:root samp,
html:root [class*="mono"],html:root [data-mono]{
  font-family:var(--mono) !important;
}

/* Smooth theme crossfade. */
html:root body{
  transition:background-color 300ms ease,color 300ms ease;
}

/* Belt-and-braces: force body background + text to respond to theme even
   on dashboards that haven't been swept to use var(--...) yet.
   Higher specificity than inline :root-scoped rules; lower than surface-level
   body{background:#XYZ} which still wins via source order — but crucially
   flips BODY itself on any dashboard where body uses a basic colour. */
html:root body{
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

/* =============================================================================
   GLOBAL THEME-AWARE SELECTORS
   Paint primitives so any dashboard built on normal HTML flips for free.
   Closes roughly 40% of the hardcoded-hex gap without per-file edits.
   ============================================================================ */

/* Table borders & headers — most dashboards use plain <table><th><td>. */
html:root table{ border-color: var(--border) !important; }
html:root th, html:root td{ border-color: var(--border) !important; }
html:root thead th{
  background: var(--surface2) !important;
  color: var(--text) !important;
}
html:root tbody tr:hover{
  background: color-mix(in srgb, var(--accent) 6%, transparent) !important;
}

/* Form primitives — placeholder / selection. */
html:root ::placeholder{ color: var(--muted) !important; opacity: 1; }
html:root ::selection{
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--text);
}

/* Custom scrollbars — Webkit + Firefox. */
html:root *{ scrollbar-color: color-mix(in srgb, var(--text) 20%, transparent) transparent; }
html:root ::-webkit-scrollbar{ width:10px; height:10px; }
html:root ::-webkit-scrollbar-track{ background: transparent; }
html:root ::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--text) 20%, transparent);
  border-radius: var(--radius-pill);
}
html:root ::-webkit-scrollbar-thumb:hover{
  background: color-mix(in srgb, var(--text) 35%, transparent);
}

/* Modal / card / panel universals — catches any dashboard using these class names. */
html:root .modal, html:root .card, html:root .panel{
  background: var(--panel) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* =============================================================================
   THEME 1 · DAY (Clean Professional light — default for backward compat)
   ============================================================================ */
html:root[data-theme="day"]{
  --bg:#F8FAFC !important;
  --bg-main:#F8FAFC !important;
  --bg-secondary:#FFFFFF !important;
  --bg-soft:#F1F5F9 !important;
  --bg-sidebar:#FFFFFF !important;
  --bg-card:#FFFFFF !important;
  --panel:#FFFFFF !important;
  --panel-hover:#F1F5F9 !important;
  --card:#FFFFFF !important;
  --surface:#FFFFFF !important;
  --surface2:#F8FAFC !important;
  --surface3:#F1F5F9 !important;
  --pill-bg:#F1F5F9 !important;

  --text:#1F2937 !important;
  --text-primary:#111827 !important;
  --text-secondary:#6B7280 !important;
  --text-muted:#6B7280 !important;
  --text2:#6B7280 !important;
  --text3:#9CA3AF !important;
  --muted:#6B7280 !important;
  --muted-2:#9CA3AF !important;
  --ink:#111827 !important;

  --border:#E5E7EB !important;
  --border-soft:#E5E7EB !important;
  --border2:#E5E7EB !important;
  --line:#E5E7EB !important;
  --line-soft:#F0F1F5 !important;

  --accent:#3B82F6 !important;
  --accent-2:#2563EB !important;
  --accent2:#2563EB !important;
  --accent-3:#10B981 !important;
  --primary:#3B82F6 !important;
  --primary-deep:#2563EB !important;
  --primary-hover:#60A5FA !important;
  --primary-tint:#DBEAFE !important;
  --brand:#3B82F6 !important;

  --success:#10B981 !important;
  --green:#10B981 !important;
  --ok:#10B981 !important;
  --warn:#F59E0B !important;
  --warning:#F59E0B !important;
  --amber:#F59E0B !important;
  --gold:#F4B740 !important;
  --orange:#F59E0B !important;
  --danger:#EF4444 !important;
  --red:#EF4444 !important;
  --info:#3B82F6 !important;
  --blue:#3B82F6 !important;
  --teal:#3B82F6 !important;
  --teal2:#2563EB !important;
  --purple:#8B5CF6 !important;

  --status-overdue-bg:#FECACA !important;
  --status-overdue-text:#991B1B !important;
  --status-outstanding-bg:#FEE2E2 !important;
  --status-outstanding-text:#92400E !important;
  --status-ontrack-bg:#D1FAE5 !important;
  --status-ontrack-text:#065F46 !important;
  --status-pending-bg:#FEF3C7 !important;
  --status-pending-text:#92400E !important;
  --status-closed-bg:#E5E7EB !important;
  --status-closed-text:#374151 !important;

  --ring:rgba(59,130,246,.25) !important;
  --shadow:0 1px 2px rgba(15,23,42,.06),0 4px 12px rgba(15,23,42,.04) !important;
  --shadow-soft:0 4px 12px rgba(0,0,0,0.05) !important;
  --shadow-card:0 6px 18px rgba(15,23,42,0.06) !important;
  --shadow-hover:0 10px 28px rgba(15,23,42,0.10) !important;
  --gradient-accent:linear-gradient(135deg,#2563EB 0%,#7C3AED 50%,#4F46E5 100%) !important;
  --brand-grad:linear-gradient(135deg,#3B82F6 0%,#2563EB 100%) !important;
  --grad-primary:linear-gradient(135deg,#3B82F6 0%,#2563EB 100%) !important;
  --grad-sidebar:linear-gradient(180deg,#3B82F6 0%,#2563EB 100%) !important;

  /* Interaction / affordance tokens. */
  --brand2:#60A5FA !important;
  --text-on-accent:#FFFFFF !important;
  --link:#2563EB !important;
  --disabled-bg:#F3F4F6 !important;
  --disabled-text:#9CA3AF !important;
  --tooltip-bg:#111827 !important;
  --tooltip-text:#F9FAFB !important;
  --shadow-accent-subtle:0 2px 8px rgba(59,130,246,.12) !important;
  --glow-accent:0 0 20px rgba(59,130,246,.25) !important;
}

/* =============================================================================
   THEME 2 · NIGHT (command-centre cyan on near-black)
   ============================================================================ */
html:root[data-theme="night"]{
  --bg:#05070e !important;
  --bg-main:#05070e !important;
  --bg-secondary:#0a0f1e !important;
  --bg-soft:#0a0f1e !important;
  --bg-sidebar:#0a0f1e !important;
  --bg-card:#0f1729 !important;
  --panel:#0f1729 !important;
  --panel-hover:#162038 !important;
  --card:#0f1729 !important;
  --surface:#0f1729 !important;
  --surface2:#0a0f1e !important;
  --surface3:#162038 !important;
  --pill-bg:#162038 !important;

  --text:#e5e7eb !important;
  --text-primary:#f3f4f6 !important;
  --text-secondary:#9ca3af !important;
  --text-muted:#9ca3af !important;
  --text2:#9ca3af !important;
  --text3:#6b7280 !important;
  --muted:#9ca3af !important;
  --muted-2:#6b7280 !important;
  --ink:#f3f4f6 !important;

  --border:rgba(0,217,255,0.2) !important;
  --border-soft:rgba(255,255,255,0.08) !important;
  --border2:rgba(0,217,255,0.2) !important;
  --line:rgba(0,217,255,0.2) !important;
  --line-soft:rgba(255,255,255,0.08) !important;

  --accent:#00d9ff !important;
  --accent-2:#7aa6ff !important;
  --accent2:#7aa6ff !important;
  --accent-3:#c084fc !important;
  --primary:#00d9ff !important;
  --primary-deep:#0891b2 !important;
  --primary-hover:#67e8f9 !important;
  --primary-tint:rgba(0,217,255,0.15) !important;
  --brand:#00d9ff !important;

  --success:#22c55e !important;
  --green:#22c55e !important;
  --ok:#22c55e !important;
  --warn:#f59e0b !important;
  --warning:#f59e0b !important;
  --amber:#f59e0b !important;
  --gold:#fbbf24 !important;
  --orange:#fb923c !important;
  --danger:#ef4444 !important;
  --red:#ef4444 !important;
  --info:#00d9ff !important;
  --blue:#7aa6ff !important;
  --teal:#00d9ff !important;
  --teal2:#0891b2 !important;
  --purple:#c084fc !important;

  --status-overdue-bg:rgba(239,68,68,0.18) !important;
  --status-overdue-text:#fca5a5 !important;
  --status-outstanding-bg:rgba(251,191,36,0.18) !important;
  --status-outstanding-text:#fcd34d !important;
  --status-ontrack-bg:rgba(34,197,94,0.18) !important;
  --status-ontrack-text:#86efac !important;
  --status-pending-bg:rgba(251,191,36,0.18) !important;
  --status-pending-text:#fcd34d !important;
  --status-closed-bg:rgba(148,163,184,0.18) !important;
  --status-closed-text:#cbd5e1 !important;

  --ring:rgba(0,217,255,.35) !important;
  --shadow:0 20px 60px -30px rgba(0,217,255,.25),0 8px 28px rgba(0,0,0,.45) !important;
  --shadow-soft:0 4px 12px rgba(0,0,0,0.3) !important;
  --shadow-card:0 6px 18px rgba(0,0,0,0.4) !important;
  --shadow-hover:0 12px 32px rgba(0,217,255,0.2) !important;
  --gradient-accent:linear-gradient(135deg,#00d9ff,#7aa6ff 60%,#c084fc) !important;
  --brand-grad:linear-gradient(135deg,#00d9ff 0%,#7aa6ff 100%) !important;
  --grad-primary:linear-gradient(135deg,#00d9ff 0%,#0891b2 100%) !important;
  --grad-sidebar:linear-gradient(180deg,#0a0f1e 0%,#05070e 100%) !important;

  /* Interaction / affordance tokens. */
  --brand2:#0891b2 !important;
  --text-on-accent:#05070e !important;
  --link:#67e8f9 !important;
  --disabled-bg:#1e293b !important;
  --disabled-text:#64748b !important;
  --tooltip-bg:#0f1729 !important;
  --tooltip-text:#e5e7eb !important;
  --shadow-accent-subtle:0 2px 8px rgba(0,217,255,.2) !important;
  --glow-accent:0 0 24px rgba(0,217,255,.4) !important;
}

/* =============================================================================
   THEME 3 · CHROME-RED (satin metallic)
   ============================================================================ */
html:root[data-theme="chrome-red"]{
  --bg:#140606 !important;
  --bg-main:#140606 !important;
  --bg-secondary:#1f0a0a !important;
  --bg-soft:#1f0a0a !important;
  --bg-sidebar:#1f0a0a !important;
  --bg-card:#2a0c0c !important;
  --panel:#2a0c0c !important;
  --panel-hover:#380e0e !important;
  --card:#2a0c0c !important;
  --surface:#2a0c0c !important;
  --surface2:#1f0a0a !important;
  --surface3:#380e0e !important;
  --pill-bg:#380e0e !important;

  --text:#fef2f2 !important;
  --text-primary:#fef2f2 !important;
  --text-secondary:#fca5a5 !important;
  --text-muted:#fca5a5 !important;
  --text2:#fca5a5 !important;
  --text3:#f87171 !important;
  --muted:#fca5a5 !important;
  --muted-2:#f87171 !important;
  --ink:#fef2f2 !important;

  --border:#7f1d1d !important;
  --border-soft:#451a1a !important;
  --border2:#7f1d1d !important;
  --line:#7f1d1d !important;
  --line-soft:#451a1a !important;

  --accent:#dc2626 !important;
  --accent-2:#c0c0c0 !important;
  --accent2:#c0c0c0 !important;
  --accent-3:#fbbf24 !important;
  --primary:#dc2626 !important;
  --primary-deep:#991b1b !important;
  --primary-hover:#ef4444 !important;
  --primary-tint:rgba(220,38,38,0.15) !important;
  --brand:#dc2626 !important;

  --success:#4ade80 !important;
  --green:#4ade80 !important;
  --ok:#4ade80 !important;
  --warn:#fbbf24 !important;
  --warning:#fbbf24 !important;
  --amber:#fbbf24 !important;
  --gold:#fbbf24 !important;
  --orange:#fb923c !important;
  --danger:#f87171 !important;
  --red:#f87171 !important;
  --info:#fca5a5 !important;
  --blue:#fca5a5 !important;
  --teal:#dc2626 !important;
  --teal2:#991b1b !important;
  --purple:#a78bfa !important;

  --status-overdue-bg:rgba(248,113,113,0.22) !important;
  --status-overdue-text:#fecaca !important;
  --status-outstanding-bg:rgba(251,191,36,0.18) !important;
  --status-outstanding-text:#fcd34d !important;
  --status-ontrack-bg:rgba(74,222,128,0.18) !important;
  --status-ontrack-text:#86efac !important;
  --status-pending-bg:rgba(251,191,36,0.18) !important;
  --status-pending-text:#fcd34d !important;
  --status-closed-bg:rgba(252,165,165,0.18) !important;
  --status-closed-text:#fca5a5 !important;

  --ring:rgba(220,38,38,.4) !important;
  --shadow:0 14px 40px -20px rgba(220,38,38,.5),inset 0 1px 0 rgba(192,192,192,.25),0 2px 8px rgba(0,0,0,.6) !important;
  --shadow-soft:0 4px 12px rgba(0,0,0,0.5) !important;
  --shadow-card:0 6px 18px rgba(0,0,0,0.55) !important;
  --shadow-hover:0 14px 40px -20px rgba(220,38,38,.5) !important;
  --gradient-accent:linear-gradient(135deg,#b91c1c 0%,#991b1b 50%,#7f1d1d 100%) !important;
  --brand-grad:linear-gradient(135deg,#dc2626 0%,#991b1b 100%) !important;
  --grad-primary:linear-gradient(135deg,#dc2626 0%,#991b1b 100%) !important;
  --grad-sidebar:linear-gradient(180deg,#1f0a0a 0%,#140606 100%) !important;

  /* Interaction / affordance tokens. */
  --brand2:#991b1b !important;
  --text-on-accent:#fef2f2 !important;
  --link:#fca5a5 !important;
  --disabled-bg:#380e0e !important;
  --disabled-text:#f87171 !important;
  --tooltip-bg:#140606 !important;
  --tooltip-text:#fef2f2 !important;
  --shadow-accent-subtle:0 2px 8px rgba(220,38,38,.2) !important;
  --glow-accent:0 0 24px rgba(220,38,38,.4) !important;
}

/* =============================================================================
   THEME 4 · AQUARIUM (bioluminescent deep blue)
   ============================================================================ */
html:root[data-theme="aquarium"]{
  --bg:#04101f !important;
  --bg-main:#04101f !important;
  --bg-secondary:#081b33 !important;
  --bg-soft:#081b33 !important;
  --bg-sidebar:#081b33 !important;
  --bg-card:#0d2547 !important;
  --panel:#0d2547 !important;
  --panel-hover:#12325c !important;
  --card:#0d2547 !important;
  --surface:#0d2547 !important;
  --surface2:#081b33 !important;
  --surface3:#12325c !important;
  --pill-bg:#12325c !important;

  --text:#e0f2fe !important;
  --text-primary:#f0f9ff !important;
  --text-secondary:#7dd3fc !important;
  --text-muted:#7dd3fc !important;
  --text2:#7dd3fc !important;
  --text3:#38bdf8 !important;
  --muted:#7dd3fc !important;
  --muted-2:#38bdf8 !important;
  --ink:#f0f9ff !important;

  --border:rgba(56,189,248,0.22) !important;
  --border-soft:rgba(56,189,248,0.12) !important;
  --border2:rgba(56,189,248,0.22) !important;
  --line:rgba(56,189,248,0.22) !important;
  --line-soft:rgba(56,189,248,0.12) !important;

  --accent:#22d3ee !important;
  --accent-2:#60a5fa !important;
  --accent2:#60a5fa !important;
  --accent-3:#a78bfa !important;
  --primary:#22d3ee !important;
  --primary-deep:#0e7490 !important;
  --primary-hover:#67e8f9 !important;
  --primary-tint:rgba(34,211,238,0.15) !important;
  --brand:#22d3ee !important;

  --success:#34d399 !important;
  --green:#34d399 !important;
  --ok:#34d399 !important;
  --warn:#fbbf24 !important;
  --warning:#fbbf24 !important;
  --amber:#fbbf24 !important;
  --gold:#fbbf24 !important;
  --orange:#fb923c !important;
  --danger:#fb7185 !important;
  --red:#fb7185 !important;
  --info:#60a5fa !important;
  --blue:#60a5fa !important;
  --teal:#22d3ee !important;
  --teal2:#0e7490 !important;
  --purple:#a78bfa !important;

  --status-overdue-bg:rgba(251,113,133,0.18) !important;
  --status-overdue-text:#fda4af !important;
  --status-outstanding-bg:rgba(251,191,36,0.18) !important;
  --status-outstanding-text:#fcd34d !important;
  --status-ontrack-bg:rgba(52,211,153,0.18) !important;
  --status-ontrack-text:#6ee7b7 !important;
  --status-pending-bg:rgba(251,191,36,0.18) !important;
  --status-pending-text:#fcd34d !important;
  --status-closed-bg:rgba(125,211,252,0.15) !important;
  --status-closed-text:#7dd3fc !important;

  --ring:rgba(34,211,238,.35) !important;
  --shadow:0 0 30px rgba(34,211,238,.12),0 12px 28px rgba(2,12,25,.6) !important;
  --shadow-soft:0 4px 12px rgba(0,0,0,0.35) !important;
  --shadow-card:0 6px 18px rgba(2,12,25,0.5) !important;
  --shadow-hover:0 12px 32px rgba(34,211,238,0.25) !important;
  --gradient-accent:linear-gradient(135deg,#22d3ee 0%,#60a5fa 50%,#a78bfa 100%) !important;
  --brand-grad:linear-gradient(135deg,#22d3ee 0%,#60a5fa 100%) !important;
  --grad-primary:linear-gradient(135deg,#22d3ee 0%,#0e7490 100%) !important;
  --grad-sidebar:linear-gradient(180deg,#081b33 0%,#04101f 100%) !important;

  /* Interaction / affordance tokens. */
  --brand2:#0e7490 !important;
  --text-on-accent:#04101f !important;
  --link:#67e8f9 !important;
  --disabled-bg:#12325c !important;
  --disabled-text:#7dd3fc !important;
  --tooltip-bg:#04101f !important;
  --tooltip-text:#e0f2fe !important;
  --shadow-accent-subtle:0 2px 8px rgba(34,211,238,.2) !important;
  --glow-accent:0 0 24px rgba(34,211,238,.4) !important;
}

/* =============================================================================
   THEME 5 · STARTUP (dark purple + hot orange)
   ============================================================================ */
html:root[data-theme="startup"]{
  --bg:#1a0b2e !important;
  --bg-main:#1a0b2e !important;
  --bg-secondary:#1a0b2e !important;
  --bg-soft:#2d1b4e !important;
  --bg-sidebar:#1a0b2e !important;
  --bg-card:#3a2560 !important;
  --panel:#3a2560 !important;
  --panel-hover:#4a2c6e !important;
  --card:#3a2560 !important;
  --surface:#3a2560 !important;
  --surface2:#2d1b4e !important;
  --surface3:#4a2c6e !important;
  --pill-bg:#4a2c6e !important;

  --text:#faf5ff !important;
  --text-primary:#faf5ff !important;
  --text-secondary:#d8b4fe !important;
  --text-muted:#d8b4fe !important;
  --text2:#d8b4fe !important;
  --text3:#c084fc !important;
  --muted:#d8b4fe !important;
  --muted-2:#c084fc !important;
  --ink:#faf5ff !important;

  --border:rgba(168,85,247,0.3) !important;
  --border-soft:rgba(168,85,247,0.15) !important;
  --border2:rgba(168,85,247,0.3) !important;
  --line:rgba(168,85,247,0.3) !important;
  --line-soft:rgba(168,85,247,0.15) !important;

  --accent:#f97316 !important;
  --accent-2:#a855f7 !important;
  --accent2:#a855f7 !important;
  --accent-3:#ec4899 !important;
  --primary:#f97316 !important;
  --primary-deep:#c2410c !important;
  --primary-hover:#fb923c !important;
  --primary-tint:rgba(249,115,22,0.15) !important;
  --brand:#f97316 !important;

  --success:#4ade80 !important;
  --green:#4ade80 !important;
  --ok:#4ade80 !important;
  --warn:#fbbf24 !important;
  --warning:#fbbf24 !important;
  --amber:#fbbf24 !important;
  --gold:#fbbf24 !important;
  --orange:#fb923c !important;
  --danger:#fb7185 !important;
  --red:#fb7185 !important;
  --info:#a855f7 !important;
  --blue:#a855f7 !important;
  --teal:#f97316 !important;
  --teal2:#c2410c !important;
  --purple:#a855f7 !important;

  --status-overdue-bg:rgba(251,113,133,0.18) !important;
  --status-overdue-text:#fda4af !important;
  --status-outstanding-bg:rgba(251,191,36,0.18) !important;
  --status-outstanding-text:#fcd34d !important;
  --status-ontrack-bg:rgba(74,222,128,0.18) !important;
  --status-ontrack-text:#86efac !important;
  --status-pending-bg:rgba(251,191,36,0.18) !important;
  --status-pending-text:#fcd34d !important;
  --status-closed-bg:rgba(216,180,254,0.18) !important;
  --status-closed-text:#d8b4fe !important;

  --ring:rgba(249,115,22,.4) !important;
  --shadow:0 16px 48px -18px rgba(249,115,22,.35),0 8px 24px rgba(15,5,32,.65) !important;
  --shadow-soft:0 4px 12px rgba(15,5,32,0.4) !important;
  --shadow-card:0 6px 18px rgba(15,5,32,0.5) !important;
  --shadow-hover:0 16px 48px -18px rgba(249,115,22,.4) !important;
  --gradient-accent:linear-gradient(135deg,#fb923c 0%,#f97316 50%,#ea580c 100%) !important;
  --brand-grad:linear-gradient(135deg,#f97316 0%,#c2410c 100%) !important;
  --grad-primary:linear-gradient(135deg,#f97316 0%,#a855f7 100%) !important;
  --grad-sidebar:linear-gradient(180deg,#2d1b4e 0%,#1a0b2e 100%) !important;

  /* Interaction / affordance tokens. */
  --brand2:#c2410c !important;
  --text-on-accent:#1a0b2e !important;
  --link:#d8b4fe !important;
  --disabled-bg:#2d1b4e !important;
  --disabled-text:#c084fc !important;
  --tooltip-bg:#1a0b2e !important;
  --tooltip-text:#faf5ff !important;
  --shadow-accent-subtle:0 2px 8px rgba(249,115,22,.25) !important;
  --glow-accent:0 0 24px rgba(249,115,22,.4) !important;
}

/* =============================================================================
   THEME 6 · LIQUID-GLASS (frosted iridescent)
   ============================================================================ */
html:root[data-theme="liquid-glass"]{
  --bg:#efe7db !important;
  --bg-main:#efe7db !important;
  --bg-secondary:#e8dfd0 !important;
  --bg-soft:#e8dfd0 !important;
  --bg-sidebar:#ffffff !important;
  --bg-card:#ffffff !important;
  --panel:#ffffff !important;
  --panel-hover:#faf5ff !important;
  --card:#ffffff !important;
  --surface:#ffffff !important;
  --surface2:#efe7db !important;
  --surface3:#e8dfd0 !important;
  --pill-bg:#faf5ff !important;

  --text:#1f2937 !important;
  --text-primary:#111827 !important;
  --text-secondary:#4b5563 !important;
  --text-muted:#4b5563 !important;
  --text2:#4b5563 !important;
  --text3:#6b7280 !important;
  --muted:#4b5563 !important;
  --muted-2:#6b7280 !important;
  --ink:#111827 !important;

  --border:#d4c5a9 !important;
  --border-soft:#e8dfd0 !important;
  --border2:#d4c5a9 !important;
  --line:#d4c5a9 !important;
  --line-soft:#e8dfd0 !important;

  --accent:#7c3aed !important;
  --accent-2:#06b6d4 !important;
  --accent2:#06b6d4 !important;
  --accent-3:#db2777 !important;
  --primary:#7c3aed !important;
  --primary-deep:#6d28d9 !important;
  --primary-hover:#8b5cf6 !important;
  --primary-tint:rgba(124,58,237,0.15) !important;
  --brand:#7c3aed !important;

  --success:#059669 !important;
  --green:#059669 !important;
  --ok:#059669 !important;
  --warn:#d97706 !important;
  --warning:#d97706 !important;
  --amber:#d97706 !important;
  --gold:#d97706 !important;
  --orange:#d97706 !important;
  --danger:#dc2626 !important;
  --red:#dc2626 !important;
  --info:#06b6d4 !important;
  --blue:#06b6d4 !important;
  --teal:#06b6d4 !important;
  --teal2:#0e7490 !important;
  --purple:#7c3aed !important;

  --status-overdue-bg:#fecaca !important;
  --status-overdue-text:#991b1b !important;
  --status-outstanding-bg:#fed7aa !important;
  --status-outstanding-text:#7c2d12 !important;
  --status-ontrack-bg:#bbf7d0 !important;
  --status-ontrack-text:#14532d !important;
  --status-pending-bg:#fde68a !important;
  --status-pending-text:#78350f !important;
  --status-closed-bg:#e8dfd0 !important;
  --status-closed-text:#4b5563 !important;

  --ring:rgba(124,58,237,.25) !important;
  --shadow:0 8px 28px rgba(124,58,237,.12),0 4px 16px rgba(6,182,212,.10),0 2px 10px rgba(244,114,182,.10) !important;
  --shadow-soft:0 4px 12px rgba(124,58,237,.08) !important;
  --shadow-card:0 6px 18px rgba(124,58,237,.10) !important;
  --shadow-hover:0 10px 28px rgba(124,58,237,.16) !important;
  --gradient-accent:linear-gradient(135deg,#6d28d9 0%,#7c3aed 50%,#be185d 100%) !important;
  --brand-grad:linear-gradient(135deg,#7c3aed 0%,#6d28d9 100%) !important;
  --grad-primary:linear-gradient(135deg,#7c3aed 0%,#06b6d4 100%) !important;
  --grad-sidebar:linear-gradient(180deg,#ffffff 0%,#efe7db 100%) !important;

  /* Interaction / affordance tokens. */
  --brand2:#6d28d9 !important;
  --text-on-accent:#ffffff !important;
  --link:#6d28d9 !important;
  --disabled-bg:#e8dfd0 !important;
  --disabled-text:#6b7280 !important;
  --tooltip-bg:#1f2937 !important;
  --tooltip-text:#faf5ff !important;
  --shadow-accent-subtle:0 2px 8px rgba(124,58,237,.12) !important;
  --glow-accent:0 0 20px rgba(124,58,237,.25) !important;
}

/* =============================================================================
   THEME 7 · CRYSTAL-GLASS (faceted cut-crystal, prismatic)
   ============================================================================ */
html:root[data-theme="crystal-glass"]{
  --bg:#eaf2fb !important;
  --bg-main:#eaf2fb !important;
  --bg-secondary:#dde5f0 !important;
  --bg-soft:#dde5f0 !important;
  --bg-sidebar:#ffffff !important;
  --bg-card:#ffffff !important;
  --panel:#ffffff !important;
  --panel-hover:#f0f9ff !important;
  --card:#ffffff !important;
  --surface:#ffffff !important;
  --surface2:#eaf2fb !important;
  --surface3:#dde5f0 !important;
  --pill-bg:#f0f9ff !important;

  --text:#0f172a !important;
  --text-primary:#0f172a !important;
  --text-secondary:#475569 !important;
  --text-muted:#475569 !important;
  --text2:#475569 !important;
  --text3:#64748b !important;
  --muted:#475569 !important;
  --muted-2:#64748b !important;
  --ink:#0f172a !important;

  --border:#cbd5e1 !important;
  --border-soft:#e2e8f0 !important;
  --border2:#cbd5e1 !important;
  --line:#cbd5e1 !important;
  --line-soft:#e2e8f0 !important;

  --accent:#0369a1 !important;
  --accent-2:#6d28d9 !important;
  --accent2:#6d28d9 !important;
  --accent-3:#0f766e !important;
  --primary:#0369a1 !important;
  --primary-deep:#075985 !important;
  --primary-hover:#0284c7 !important;
  --primary-tint:rgba(3,105,161,0.15) !important;
  --brand:#0369a1 !important;

  --success:#047857 !important;
  --green:#047857 !important;
  --ok:#047857 !important;
  --warn:#92400e !important;
  --warning:#92400e !important;
  --amber:#92400e !important;
  --gold:#92400e !important;
  --orange:#92400e !important;
  --danger:#b91c1c !important;
  --red:#b91c1c !important;
  --info:#0369a1 !important;
  --blue:#0ea5e9 !important;
  --teal:#14b8a6 !important;
  --teal2:#0f766e !important;
  --purple:#8b5cf6 !important;

  --status-overdue-bg:#fecaca !important;
  --status-overdue-text:#7f1d1d !important;
  --status-outstanding-bg:#fed7aa !important;
  --status-outstanding-text:#7c2d12 !important;
  --status-ontrack-bg:#bbf7d0 !important;
  --status-ontrack-text:#14532d !important;
  --status-pending-bg:#fef3c7 !important;
  --status-pending-text:#713f12 !important;
  --status-closed-bg:#e2e8f0 !important;
  --status-closed-text:#334155 !important;

  --ring:rgba(14,165,233,.35) !important;
  --shadow:0 10px 40px rgba(14,165,233,.15),0 4px 12px rgba(139,92,246,.08) !important;
  --shadow-soft:0 4px 12px rgba(14,165,233,.08) !important;
  --shadow-card:0 6px 18px rgba(14,165,233,.10) !important;
  --shadow-hover:0 12px 32px rgba(14,165,233,.18) !important;
  --gradient-accent:linear-gradient(135deg,#075985 0%,#0ea5e9 50%,#06b6d4 100%) !important;
  --brand-grad:linear-gradient(135deg,#0ea5e9 0%,#075985 100%) !important;
  --grad-primary:linear-gradient(135deg,#0ea5e9 0%,#075985 100%) !important;
  --grad-sidebar:linear-gradient(180deg,#ffffff 0%,#eaf2fb 100%) !important;

  /* Interaction / affordance tokens. */
  --brand2:#075985 !important;
  --text-on-accent:#ffffff !important;
  --link:#0369a1 !important;
  --disabled-bg:#e2e8f0 !important;
  --disabled-text:#64748b !important;
  --tooltip-bg:#0f172a !important;
  --tooltip-text:#f0f9ff !important;
  --shadow-accent-subtle:0 2px 8px rgba(3,105,161,.12) !important;
  --glow-accent:0 0 20px rgba(3,105,161,.25) !important;
}

/* =============================================================================
   THEME 8 · CORPORATE-PASTEL (lavender + pink)
   ============================================================================ */
html:root[data-theme="corporate-pastel"]{
  --bg:#f5f0fa !important;
  --bg-main:#f5f0fa !important;
  --bg-secondary:#f3e8ff !important;
  --bg-soft:#f3e8ff !important;
  --bg-sidebar:#ffffff !important;
  --bg-card:#ffffff !important;
  --panel:#ffffff !important;
  --panel-hover:#fdf4ff !important;
  --card:#ffffff !important;
  --surface:#ffffff !important;
  --surface2:#f5f0fa !important;
  --surface3:#f3e8ff !important;
  --pill-bg:#fdf4ff !important;

  --text:#1f2937 !important;
  --text-primary:#111827 !important;
  --text-secondary:#6b7280 !important;
  --text-muted:#6b7280 !important;
  --text2:#6b7280 !important;
  --text3:#9ca3af !important;
  --muted:#6b7280 !important;
  --muted-2:#9ca3af !important;
  --ink:#111827 !important;

  --border:#e9d5ff !important;
  --border-soft:#f3e8ff !important;
  --border2:#e9d5ff !important;
  --line:#e9d5ff !important;
  --line-soft:#f3e8ff !important;

  --accent:#db2777 !important;
  --accent-2:#8b5cf6 !important;
  --accent2:#8b5cf6 !important;
  --accent-3:#14b8a6 !important;
  --primary:#db2777 !important;
  --primary-deep:#be185d !important;
  --primary-hover:#ec4899 !important;
  --primary-tint:rgba(219,39,119,0.15) !important;
  --brand:#db2777 !important;

  --success:#14b8a6 !important;
  --green:#14b8a6 !important;
  --ok:#14b8a6 !important;
  --warn:#f59e0b !important;
  --warning:#f59e0b !important;
  --amber:#f59e0b !important;
  --gold:#f59e0b !important;
  --orange:#f59e0b !important;
  --danger:#ef4444 !important;
  --red:#ef4444 !important;
  --info:#8b5cf6 !important;
  --blue:#8b5cf6 !important;
  --teal:#14b8a6 !important;
  --teal2:#0f766e !important;
  --purple:#8b5cf6 !important;

  --status-overdue-bg:#fecaca !important;
  --status-overdue-text:#991b1b !important;
  --status-outstanding-bg:#fed7aa !important;
  --status-outstanding-text:#7c2d12 !important;
  --status-ontrack-bg:#ccfbf1 !important;
  --status-ontrack-text:#134e4a !important;
  --status-pending-bg:#fde68a !important;
  --status-pending-text:#78350f !important;
  --status-closed-bg:#f3e8ff !important;
  --status-closed-text:#4c1d95 !important;

  --ring:rgba(236,72,153,.2) !important;
  --shadow:0 8px 32px rgba(236,72,153,.08),0 2px 8px rgba(139,92,246,.06) !important;
  --shadow-soft:0 4px 12px rgba(236,72,153,.06) !important;
  --shadow-card:0 6px 18px rgba(139,92,246,.10) !important;
  --shadow-hover:0 10px 28px rgba(236,72,153,.14) !important;
  --gradient-accent:linear-gradient(135deg,#be185d 0%,#7c3aed 50%,#4c1d95 100%) !important;
  --brand-grad:linear-gradient(135deg,#db2777 0%,#be185d 100%) !important;
  --grad-primary:linear-gradient(135deg,#db2777 0%,#8b5cf6 100%) !important;
  --grad-sidebar:linear-gradient(180deg,#ffffff 0%,#f3e8ff 100%) !important;
  /* Interaction / affordance tokens. */
  --brand2:#be185d !important;
  --text-on-accent:#ffffff !important;
  --link:#db2777 !important;
  --disabled-bg:#f3e8ff !important;
  --disabled-text:#6b7280 !important;
  --tooltip-bg:#1f2937 !important;
  --tooltip-text:#faf5ff !important;
  --shadow-accent-subtle:0 2px 8px rgba(219,39,119,.12) !important;
  --glow-accent:0 0 20px rgba(219,39,119,.25) !important;
}

/* =============================================================================
   THEME RAIL — right-side vertical swatch switcher (injected by theme-switcher.js)
   ============================================================================ */
.siky-theme-rail{
  position:fixed;
  top:50%;
  right:14px;
  transform:translateY(-50%);
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(14px) saturate(1.6);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
  border:1px solid rgba(0,0,0,0.08);
  box-shadow:0 10px 28px rgba(0,0,0,0.12);
}
html:root[data-theme="night"] .siky-theme-rail,
html:root[data-theme="aquarium"] .siky-theme-rail,
html:root[data-theme="chrome-red"] .siky-theme-rail,
html:root[data-theme="startup"] .siky-theme-rail{
  background:rgba(15,23,42,0.72);
  border-color:rgba(255,255,255,0.12);
  box-shadow:0 10px 28px rgba(0,0,0,0.55);
}
.siky-theme-rail .siky-swatch{
  width:34px;
  height:34px;
  border-radius:50%;
  cursor:pointer;
  position:relative;
  border:2px solid rgba(255,255,255,0.6);
  box-shadow:0 2px 8px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.35);
  transition:transform 180ms ease,box-shadow 180ms ease,border-color 180ms ease;
}
.siky-theme-rail .siky-swatch:hover{
  transform:scale(1.15);
  box-shadow:0 4px 14px rgba(0,0,0,0.25),inset 0 1px 0 rgba(255,255,255,0.5);
}
.siky-theme-rail .siky-swatch.is-active{
  transform:scale(1.12);
  border-color:#fff;
  box-shadow:0 0 0 3px rgba(59,130,246,0.45),0 4px 14px rgba(0,0,0,0.2);
}
.siky-theme-rail .siky-swatch[data-swatch="day"]             {background:#3B82F6}
.siky-theme-rail .siky-swatch[data-swatch="night"]           {background:#00d9ff}
.siky-theme-rail .siky-swatch[data-swatch="chrome-red"]      {background:#dc2626}
.siky-theme-rail .siky-swatch[data-swatch="aquarium"]        {background:#22d3ee}
.siky-theme-rail .siky-swatch[data-swatch="startup"]         {background:#f97316}
.siky-theme-rail .siky-swatch[data-swatch="liquid-glass"]    {background:#7c3aed}
.siky-theme-rail .siky-swatch[data-swatch="crystal-glass"]   {background:#0369a1}
.siky-theme-rail .siky-swatch[data-swatch="corporate-pastel"]{background:#db2777}

.siky-theme-rail .siky-swatch::after{
  content:attr(data-label);
  position:absolute;
  right:calc(100% + 10px);
  top:50%;
  transform:translateY(-50%);
  white-space:nowrap;
  padding:5px 10px;
  border-radius:999px;
  font-family:var(--sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  background:rgba(17,24,39,.92);
  color:#fff;
  opacity:0;
  pointer-events:none;
  transition:opacity 180ms ease;
}
.siky-theme-rail .siky-swatch:hover::after{opacity:1}

@media (max-width:640px){
  .siky-theme-rail{
    top:auto;
    right:50%;
    bottom:12px;
    transform:translateX(50%);
    flex-direction:row;
    border-radius:999px;
  }
  .siky-theme-rail .siky-swatch::after{
    top:auto;
    right:auto;
    bottom:calc(100% + 10px);
    left:50%;
    transform:translateX(-50%);
  }
}

@media (prefers-reduced-motion:reduce){
  .siky-theme-rail .siky-swatch,
  html:root body{
    transition:none !important;
  }
}

/* =============================================================================
   Rail header: collapse toggle + tiny "Theme" label.
   ============================================================================ */
.siky-theme-rail .siky-theme-toggle{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,0.08);
  background:rgba(255,255,255,0.9);
  color:#111827;
  cursor:pointer;
  font-size:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:transform 180ms ease,background 180ms ease;
}
.siky-theme-rail .siky-theme-toggle:hover{transform:scale(1.08)}
html:root[data-theme="night"] .siky-theme-rail .siky-theme-toggle,
html:root[data-theme="aquarium"] .siky-theme-rail .siky-theme-toggle,
html:root[data-theme="chrome-red"] .siky-theme-rail .siky-theme-toggle,
html:root[data-theme="startup"] .siky-theme-rail .siky-theme-toggle{
  background:rgba(30,41,59,0.9);
  color:#F8FAFC;
  border-color:rgba(255,255,255,0.12);
}
.siky-theme-rail .siky-theme-label{
  font-family:var(--sans);
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-align:center;
  color:#6B7280;
  padding:2px 0;
  user-select:none;
}
html:root[data-theme="night"] .siky-theme-rail .siky-theme-label,
html:root[data-theme="aquarium"] .siky-theme-rail .siky-theme-label,
html:root[data-theme="chrome-red"] .siky-theme-rail .siky-theme-label,
html:root[data-theme="startup"] .siky-theme-rail .siky-theme-label{
  color:#cbd5e1;
}

/* Collapsed state: hide label + swatches, keep only toggle. */
.siky-theme-rail.is-collapsed .siky-theme-label,
.siky-theme-rail.is-collapsed .siky-swatch{
  display:none !important;
}
.siky-theme-rail.is-collapsed{
  padding:6px;
  gap:0;
}

@media (max-width:640px){
  .siky-theme-rail .siky-theme-label{display:none}
}

/* =============================================================================
   Print: hide the rail, force day palette.
   ============================================================================ */
@media print{
  .siky-theme-rail{display:none !important}
}