/* voxeel-darkmode.css v6 — dark theme overlay for app.voxeel.ai (React SPA)
 * Strategy: targets the SPA's Tailwind utility classes + custom tokens
 * (bg-ink, bg-accent, bg-white, bg-black/*, text-ink, text-muted, text-white, border-black/*)
 * Applied when html[data-theme="dark"] is set (persisted in localStorage['vx-theme']).
 * Voxeel palette preserved: teal #0ea5a4 + accent2 orange remain intact.
 * Idempotent — no selector collisions with Tailwind's default cascade.
 */

/* === Base surfaces (dark) === */
html[data-theme="dark"] {
    background-color: #0b1220 !important;
    background-image:
        radial-gradient(900px 500px at 0% 0%, rgba(14, 165, 164, .16), transparent 60%),
        radial-gradient(1200px 600px at 100% 0%, rgba(249, 115, 22, .10), transparent 60%),
        radial-gradient(1000px 600px at 50% 100%, rgba(14, 165, 164, .08), transparent 60%) !important;
    color: #e7eef7 !important;
    color-scheme: dark;
}
html[data-theme="dark"] body {
    background-color: #0b1220 !important;
    background-image: inherit !important;
    color: #e7eef7 !important;
}

/* === Base surfaces (light) — explicit override to beat lingering dark !important === */
html[data-theme="light"] {
    background-color: #f7f3ee !important;
    background-image: none !important;
    color: #1b1f2a !important;
    color-scheme: light;
}
html[data-theme="light"] body {
    background-color: #f7f3ee !important;
    background-image: none !important;
    color: #1b1f2a !important;
}

/* === Cards / panels (bg-white variants) === */
html[data-theme="dark"] .bg-white {
    background-color: #131d30 !important;
}
html[data-theme="dark"] .bg-white\/60,
html[data-theme="dark"] .bg-white\/70,
html[data-theme="dark"] .bg-white\/80,
html[data-theme="dark"] .bg-white\/90 {
    background-color: rgba(19, 29, 48, .88) !important;
    backdrop-filter: blur(10px);
}

/* === Dark-surfaces classes from the SPA === */
html[data-theme="dark"] .bg-ink {
    background-color: #192642 !important;
}

/* === bg-black/x transparencies → invert for dark === */
html[data-theme="dark"] .bg-black\/5 { background-color: rgba(255, 255, 255, .05) !important; }
html[data-theme="dark"] .bg-black\/10 { background-color: rgba(255, 255, 255, .08) !important; }
html[data-theme="dark"] .bg-black\/20 { background-color: rgba(255, 255, 255, .12) !important; }

/* === Text colors === */
html[data-theme="dark"] .text-ink { color: #e7eef7 !important; }
html[data-theme="dark"] .text-muted { color: #8b9bb1 !important; }
html[data-theme="dark"] .text-white { color: #ffffff !important; }
html[data-theme="dark"] .text-black { color: #e7eef7 !important; }
html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-slate-700,
html[data-theme="dark"] .text-slate-800,
html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-gray-900 { color: #e7eef7 !important; }

/* === Borders === */
html[data-theme="dark"] .border-black\/10,
html[data-theme="dark"] .border-black\/20,
html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-300 {
    border-color: rgba(255, 255, 255, .10) !important;
}

/* === Form elements === */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background-color: #131d30 !important;
    border-color: rgba(255, 255, 255, .12) !important;
    color: #e7eef7 !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #6b7e97 !important; }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
    outline: none !important;
    border-color: #0ea5a4 !important;
    box-shadow: 0 0 0 4px rgba(14, 165, 164, .22) !important;
}

/* === Shadows get softer + darker === */
html[data-theme="dark"] .shadow,
html[data-theme="dark"] .shadow-sm,
html[data-theme="dark"] .shadow-md,
html[data-theme="dark"] .shadow-lg,
html[data-theme="dark"] .shadow-xl,
html[data-theme="dark"] .shadow-2xl {
    --tw-shadow: 0 6px 18px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .3);
    --tw-shadow-colored: 0 6px 18px var(--tw-shadow-color);
}

/* === Dividers / hr === */
html[data-theme="dark"] hr { border-color: rgba(255, 255, 255, .10) !important; }

/* === Buttons preserve accent (teal) but tune secondary === */
html[data-theme="dark"] button.bg-white,
html[data-theme="dark"] .rounded-xl.bg-white {
    background-color: #131d30 !important;
    color: #e7eef7 !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
}

/* === Scrollbars (webkit) === */
html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0b1220; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .08);
    border-radius: 8px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .15); }

/* === Toggle button (visible in both themes) === */
.vx-spa-theme-toggle {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 99999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(14, 165, 164, .35);
    background: rgba(14, 165, 164, .14);
    color: #0ea5a4;
    cursor: pointer;
    font-size: 1.05rem;
    font-family: inherit;
    transition: transform .2s ease, background .2s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    backdrop-filter: blur(6px);
}
.vx-spa-theme-toggle:hover {
    background: rgba(14, 165, 164, .24);
    transform: rotate(12deg);
}
html[data-theme="dark"] .vx-spa-theme-toggle {
    background: rgba(240, 180, 41, .14);
    border-color: rgba(240, 180, 41, .35);
    color: #f0b429;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .vx-spa-theme-toggle:hover {
    background: rgba(240, 180, 41, .24);
}

/* === Login page radial gradients stay but respect dark bg === */
html[data-theme="dark"] [class*="bg-[radial-gradient"] {
    background-image:
        radial-gradient(1200px 600px at 10% -10%, rgba(14, 165, 164, .18), transparent),
        radial-gradient(900px 500px at 100% 0%, rgba(249, 115, 22, .14), transparent) !important;
}

/* === Special: the big VX logo badge stays dark (keep as is) === */
/* No override needed — bg-ink already dark */

/* === Selection highlight in dark === */
html[data-theme="dark"] ::selection {
    background: rgba(14, 165, 164, .35);
    color: #ffffff;
}

/* === Smooth transitions for theme switches === */
html {
    transition: background-color .2s ease, color .2s ease;
}
html * {
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
/* === END voxeel-darkmode.css === */