/* ============================================================
   TCCFlow Dark Mode Overrides
   Applied when html.dark is set
   ============================================================ */

html.dark { color-scheme: dark; }

html.dark body {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

/* Navbar */
html.dark nav.fixed {
    background-color: rgba(15, 23, 42, 0.85) !important;
    border-color: rgba(148, 163, 184, 0.1) !important;
}

/* Cards & surfaces */
html.dark .bg-white {
    background-color: #1e293b !important;
}
html.dark .bg-white\/80 {
    background-color: rgba(15, 23, 42, 0.85) !important;
}

/* Borders */
html.dark .border-slate-200,
html.dark .border-slate-100,
html.dark .border-slate-200\/80 {
    border-color: #334155 !important;
}
html.dark .border-violet-200 {
    border-color: rgba(139, 92, 246, 0.3) !important;
}
html.dark .border-red-200 {
    border-color: rgba(239, 68, 68, 0.3) !important;
}
html.dark .border-emerald-200 {
    border-color: rgba(16, 185, 129, 0.3) !important;
}

/* Text overrides */
html.dark .text-slate-900 {
    color: #e2e8f0 !important;
}
html.dark .text-slate-700,
html.dark .text-slate-600 {
    color: #94a3b8 !important;
}
html.dark .text-slate-500 {
    color: #94a3b8 !important;
}
html.dark .text-slate-400 {
    color: #64748b !important;
}

/* Background variants */
html.dark .bg-slate-50,
html.dark .bg-slate-100 {
    background-color: #0f172a !important;
}
html.dark .bg-violet-50 {
    background-color: rgba(139, 92, 246, 0.1) !important;
}
html.dark .bg-violet-100 {
    background-color: rgba(139, 92, 246, 0.15) !important;
}
html.dark .bg-cyan-50,
html.dark .bg-cyan-100 {
    background-color: rgba(6, 182, 212, 0.1) !important;
}
html.dark .bg-emerald-50,
html.dark .bg-emerald-100 {
    background-color: rgba(16, 185, 129, 0.1) !important;
}
html.dark .bg-amber-50,
html.dark .bg-amber-100 {
    background-color: rgba(245, 158, 11, 0.1) !important;
}
html.dark .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.1) !important;
}
html.dark .bg-rose-50,
html.dark .bg-rose-100 {
    background-color: rgba(244, 63, 94, 0.1) !important;
}
html.dark .bg-orange-100 {
    background-color: rgba(249, 115, 22, 0.1) !important;
}

/* Gradient overrides for cards */
html.dark .from-violet-50 {
    --tw-gradient-from: rgba(139, 92, 246, 0.08) !important;
}
html.dark .to-cyan-50 {
    --tw-gradient-to: rgba(6, 182, 212, 0.08) !important;
}

/* Inputs, selects */
html.dark input:not([type="checkbox"]):not([type="radio"]),
html.dark select,
html.dark textarea {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #475569 !important;
}
html.dark input:disabled {
    background-color: #1e293b !important;
    color: #64748b !important;
}

/* Hover states */
html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-slate-100:hover {
    background-color: #334155 !important;
}
html.dark .hover\:bg-white\/50:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Shadows */
html.dark .shadow-sm,
html.dark .shadow-xl {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
html.dark .shadow-xl.shadow-slate-200\/50 {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}

/* Blobs - more vibrant in dark */
html.dark .blob-1 { background: rgba(139, 92, 246, 0.15) !important; }
html.dark .blob-2 { background: rgba(6, 182, 212, 0.12) !important; }
html.dark .blob-3 { background: rgba(16, 185, 129, 0.10) !important; }

/* Modal overlay */
html.dark .bg-black\/50 {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* Code */
html.dark code {
    background-color: #0f172a !important;
    color: #a78bfa !important;
}

/* Pill nav (tab bar) */
html.dark .bg-slate-100.rounded-full {
    background-color: #1e293b !important;
}

/* Scrollbar */
html.dark ::-webkit-scrollbar { width: 8px; }
html.dark ::-webkit-scrollbar-track { background: #0f172a; }
html.dark ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }