/* Centroid-style dark theme */
:root {
    --bg-main: #0f1117;
    --bg-card: #1a1d27;
    --bg-sidebar: #11141c;
    --accent: #e53935;
    --accent-hover: #c0282d;
    --text-primary: #ffffff;
    --text-secondary: #9ca3af;
    --border-color: #2a2e38;
}

html.theme-dark body, body { background: var(--bg-main); color: var(--text-primary); }
html.theme-light body { background: #fafafa; color: #111827; }
html.theme-light .card { background: #ffffff !important; color: #111827; border-color: #e5e7eb !important; }
html.theme-light .sidebar { background: #ffffff !important; color: #111827; border-color: #e5e7eb !important; }
html.theme-light .nav-link { color: #4b5563; }
html.theme-light .nav-link:hover { background: rgba(0,0,0,0.04); color: #111827; }
html.theme-light .text-gray-400 { color: #6b7280 !important; }
html.theme-light .text-gray-500 { color: #6b7280 !important; }
html.theme-light .border-gray-800 { border-color: #e5e7eb !important; }
html.theme-light input, html.theme-light select, html.theme-light textarea {
    background: #ffffff !important; color: #111827 !important; border-color: #d1d5db !important;
}

.card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 0.5rem; }
.btn-primary { background: var(--accent); color: var(--text-primary); }
.btn-primary:hover { background: var(--accent-hover); }
.nav-link.active { color: var(--accent); border-left: 3px solid var(--accent); background: rgba(229,57,53,0.08); }
table thead { background: rgba(255,255,255,0.02); }
table tbody tr:hover { background: rgba(255,255,255,0.03); }

/* Coming-soon toast */
#csToast {
    position: fixed; top: 80px; right: 24px; z-index: 9999;
    background: rgba(229,57,53,0.95); color: white; padding: 10px 16px;
    border-radius: 8px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    transform: translateX(380px); transition: transform 0.25s ease-out;
}
#csToast.show { transform: translateX(0); }

/* ============================================================
   LIGHT THEME — comprehensive override (2026-06-13)
   EVERY rule scoped under html.theme-light → DARK THEME UNTOUCHED.
   Fixes washed-out admin light mode: remaps hardcoded Tailwind dark
   utilities + neutralizes inline dark-hex backgrounds. CSS-only,
   zero markup changes. Inline selectors anchored to `background:#`
   so text/border hex values (e.g. color:#e63946 brand tags) are
   never wrongly recoloured.
   ============================================================ */

/* --- Surfaces: dark gray panels/inputs/dropdowns → light --- */
html.theme-light .bg-gray-900 { background-color: #ffffff !important; }
html.theme-light .bg-gray-800 { background-color: #f3f4f6 !important; }
html.theme-light .bg-gray-700 { background-color: #e5e7eb !important; }
/* opacity variants incl. the FILTERS bar (bg-gray-900/50) → faint light panel */
html.theme-light .bg-gray-900\/50,
html.theme-light .bg-gray-900\/40,
html.theme-light .bg-gray-900\/30,
html.theme-light .bg-gray-800\/50,
html.theme-light .bg-gray-800\/40,
html.theme-light .bg-gray-800\/30,
html.theme-light .bg-gray-700\/50 { background-color: rgba(0,0,0,0.035) !important; }
/* hover states */
html.theme-light .hover\:bg-gray-700:hover,
html.theme-light .hover\:bg-gray-800:hover,
html.theme-light .hover\:bg-gray-700\/50:hover { background-color: #eceef1 !important; }

/* --- Borders: dark → light --- */
html.theme-light .border-gray-800,
html.theme-light .border-gray-700 { border-color: #e4e6ea !important; }
html.theme-light .border-gray-600,
html.theme-light .border-gray-500 { border-color: #d1d5db !important; }

/* --- Muted text → readable darks (the faded last-name/internal-id/createdby = text-gray-300) --- */
html.theme-light .text-gray-200,
html.theme-light .text-gray-300 { color: #374151 !important; }
html.theme-light .text-gray-400,
html.theme-light .text-gray-500 { color: #4b5563 !important; }
html.theme-light .placeholder-gray-400::placeholder { color: #9ca3af !important; }

/* --- White text → dark (body text on now-light surfaces) --- */
html.theme-light .text-white { color: #111827 !important; }
/* ...but RE-ASSERT white on solid colored buttons/badges. Requires BOTH
   classes so translucent tints (e.g. bg-red-500/15 + text-red-300) are
   never caught. Placed AFTER the override so equal-specificity wins. --- */
html.theme-light .btn-primary,
html.theme-light .bg-red-400.text-white, html.theme-light .bg-red-500.text-white, html.theme-light .bg-red-600.text-white, html.theme-light .bg-red-700.text-white,
html.theme-light .bg-green-500.text-white, html.theme-light .bg-green-600.text-white, html.theme-light .bg-green-700.text-white,
html.theme-light .bg-blue-400.text-white, html.theme-light .bg-blue-500.text-white, html.theme-light .bg-blue-600.text-white, html.theme-light .bg-blue-700.text-white,
html.theme-light .bg-emerald-400.text-white, html.theme-light .bg-emerald-500.text-white, html.theme-light .bg-emerald-600.text-white,
html.theme-light .bg-amber-600.text-white { color: #ffffff !important; }

/* --- Inline dark-hex backgrounds (cards/thead/dropdowns/topbar) → light.
   Inline style beats utility classes, so target the bg hex directly.
   Anchored to `background:#` (+ spaced form) to avoid touching color/border hexes. --- */
html.theme-light [style*="background:#1a1d27"], html.theme-light [style*="background: #1a1d27"],
html.theme-light [style*="background:#0a0a0a"], html.theme-light [style*="background: #0a0a0a"],
html.theme-light [style*="background:#111111"], html.theme-light [style*="background: #111111"],
html.theme-light [style*="background:#1a1a1a"], html.theme-light [style*="background: #1a1a1a"],
html.theme-light [style*="background:#0f1117"],
html.theme-light [style*="background:#0a0c12"] { background-color: #ffffff !important; }
/* thead / topbar dark (#0d0d0d) → subtle gray header (keeps header distinct) */
html.theme-light [style*="background:#0d0d0d"], html.theme-light [style*="background: #0d0d0d"] { background-color: #f1f3f5 !important; }
/* inline dark borders → light */
html.theme-light [style*="#2a2f3d"],
html.theme-light [style*="#2a2e38"],
html.theme-light [style*="#2a2a2a"] { border-color: #e4e6ea !important; }
/* keep brand/colored inline buttons readable: white text on saturated bg */
html.theme-light [style*="background:#e63946"], html.theme-light [style*="background: #e63946"],
html.theme-light [style*="background:#e53935"],
html.theme-light [style*="background:#dc2626"],
html.theme-light [style*="background:#10b981"],
html.theme-light [style*="background:#22c55e"],
html.theme-light [style*="background:#f59e0b"] { color: #ffffff !important; }

/* --- Light-mode ACTIVE sidebar nav-link → SOLID RED (final choice 2026-06-13).
   Overrides the pink-tint active rules (btsfx.css:29 + layout .nav-link.active).
   html.theme-light scoped → dark active state UNTOUCHED. --- */
html.theme-light .nav-link.active {
    background: #e63946 !important;
    color: #ffffff !important;
    border-radius: 8px;
    border-left: 3px solid #e63946 !important;
    font-weight: 500 !important;
}
html.theme-light .nav-link.active:hover {
    background: #e63946 !important;
    color: #ffffff !important;
}
html.theme-light .nav-link.active i,
html.theme-light .nav-link.active .fa {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* --- Light-mode ACTIVE GROUP/PARENT header → neutral grey, NO pink (2026-06-13).
   Overrides .nav-group.active-group pink (--brand-primary-soft 16% red on white).
   Keeps the child .nav-link.active as the single solid-red focal point.
   html.theme-light scoped → dark active-group (subtle red-tint) UNTOUCHED. --- */
html.theme-light .nav-group.active-group {
    background: rgba(0,0,0,0.04) !important;
    color: #111827 !important;
}
html.theme-light .nav-group.active-group:hover {
    background: rgba(0,0,0,0.06) !important;
}

/* --- Light-mode DARK linear-gradient cards (client portal hero etc.) → light.
   The inline-hex neutralizers above only catch `background:#hex`, not gradients.
   COLORED gradients (green/red) are intentionally NOT listed → stay as-is.
   html.theme-light scoped → dark untouched. --- */
html.theme-light [style*="linear-gradient(90deg,#0a0a0a,#1a0d12)"],
html.theme-light [style*="linear-gradient(135deg,#1a1d27 0%,#0a0a0a 100%)"],
html.theme-light [style*="linear-gradient(135deg,#111111,#1a0f0f)"] {
    background: #ffffff !important;
}

/* --- Light-mode #10: translucent-black boxes (funded-accounts "Challenge Fee" etc.)
   → faint light. #hex neutralizers don't catch rgba(). theme-light scoped. --- */
html.theme-light [style*="background:rgba(0,0,0,0.3)"],
html.theme-light [style*="background: rgba(0,0,0,0.3)"],
html.theme-light [style*="background:rgba(0,0,0,.3)"] {
    background: rgba(0,0,0,0.04) !important;
}
html.theme-light [style*="#1f2433"] { border-color: #e4e6ea !important; }

/* --- Light-mode #12: status/action chips were pale-color on pale-tint (invisible).
   Keep the tint bg; darken the TEXT to a readable shade. theme-light scoped. --- */
html.theme-light .text-emerald-300 { color: #047857 !important; }
html.theme-light .text-green-300   { color: #15803d !important; }
html.theme-light .text-red-300     { color: #b91c1c !important; }
html.theme-light .text-amber-300   { color: #b45309 !important; }
html.theme-light .text-blue-300    { color: #1d4ed8 !important; }
html.theme-light .badge-approved   { color: #047857 !important; }
html.theme-light .badge-pending    { color: #b45309 !important; }
html.theme-light .badge-rejected   { color: #b91c1c !important; }
html.theme-light .badge-expired    { color: #475569 !important; }
/* inline pale chip colors (e.g. audit-trail action chip color:#34d399) → readable dark */
html.theme-light [style*="color:#34d399"] { color: #047857 !important; }

/* --- #28 SAFETY: crypto loss-of-funds warning (withdrawals) — high contrast in light.
   Dark theme keeps its inline light-red (untouched). --- */
html.theme-light .crypto-loss-warning {
    background: rgba(239,68,68,0.12) !important;
    border-color: rgba(239,68,68,0.55) !important;
    color: #991b1b !important;
}
html.theme-light .crypto-loss-warning strong { color: #7f1d1d !important; }

/* --- Topbar dropdowns (avatar + notif): class-based light theming. The inline-hex
   neutralizer can't catch these because JS toggling .style.display reserializes the
   inline style (#1a1a1a → rgb(26,26,26)), breaking the [style*=hex] match. Class survives. --- */
html.theme-light .cli-dropdown { background: #ffffff !important; border-color: #e4e6ea !important; }