/* ============================================================
   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; }

/* ============================================================
   Index / Landing Page - Dark Mode
   ============================================================ */

/* Glass cards on dark */
html.dark .glass-card {
    background: rgba(30, 41, 59, 0.7) !important;
    border-color: rgba(148, 163, 184, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}
html.dark .glass-card:hover {
    background: rgba(30, 41, 59, 0.9) !important;
    box-shadow: 0 16px 48px rgba(139, 92, 246, 0.15) !important;
}

/* Glass card dark variant (already in index but just in case) */
html.dark .glass-card-dark {
    background: rgba(30, 41, 59, 0.5) !important;
    border-color: rgba(148, 163, 184, 0.08) !important;
}

/* Navbar dark on index */
html.dark nav.fixed {
    background-color: rgba(15, 23, 42, 0.9) !important;
    border-color: rgba(148, 163, 184, 0.1) !important;
}
html.dark nav .bg-slate-100.rounded-full {
    background-color: rgba(30, 41, 59, 0.8) !important;
}

/* Hero badge */
html.dark .bg-violet-50.border.border-violet-200 {
    background-color: rgba(139, 92, 246, 0.15) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}
html.dark .bg-cyan-50.border.border-cyan-200 {
    background-color: rgba(6, 182, 212, 0.15) !important;
    border-color: rgba(6, 182, 212, 0.3) !important;
}
html.dark .bg-emerald-50.border.border-emerald-200 {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}
html.dark .bg-amber-50.border.border-amber-200 {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

/* Feature card icon backgrounds */
html.dark .bg-violet-100 { background-color: rgba(139, 92, 246, 0.2) !important; }
html.dark .bg-cyan-100 { background-color: rgba(6, 182, 212, 0.2) !important; }
html.dark .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.2) !important; }
html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.2) !important; }
html.dark .bg-rose-100 { background-color: rgba(244, 63, 94, 0.2) !important; }
html.dark .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.2) !important; }
html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.2) !important; }
html.dark .bg-purple-100 { background-color: rgba(168, 85, 247, 0.2) !important; }

/* Comparison section red/emerald backgrounds */
html.dark .bg-red-50\/50 {
    background-color: rgba(239, 68, 68, 0.08) !important;
}
html.dark .bg-emerald-50\/50 {
    background-color: rgba(16, 185, 129, 0.08) !important;
}

/* Table */
html.dark .compare-row:hover {
    background: rgba(139, 92, 246, 0.06) !important;
}
html.dark table thead tr {
    border-color: #334155 !important;
}
html.dark table tbody tr {
    border-color: rgba(51, 65, 85, 0.5) !important;
}
html.dark td.text-slate-700,
html.dark .text-slate-700 {
    color: #cbd5e1 !important;
}

/* Pricing plan card */
html.dark .plan-popular {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(6, 182, 212, 0.08)) !important;
}
html.dark .bg-white.rounded-\[22px\] {
    background-color: #1e293b !important;
}

/* Cost comparison cards */
html.dark .bg-white.rounded-xl.px-4.py-3.border.border-slate-200.shadow-sm {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
html.dark .bg-white\/60 {
    background-color: rgba(30, 41, 59, 0.6) !important;
}

/* Footer */
html.dark footer {
    border-color: #334155 !important;
}
html.dark footer .border-t.border-slate-100 {
    border-color: #334155 !important;
}
html.dark .text-slate-700.uppercase {
    color: #e2e8f0 !important;
}

/* Login/Cadastro right panel dark */
html.dark .right-panel {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important;
}
html.dark .card-glass {
    background: rgba(30, 41, 59, 0.85) !important;
    border-color: rgba(148, 163, 184, 0.1) !important;
}
html.dark .input-modern {
    background: rgba(15, 23, 42, 0.8) !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
html.dark .input-modern:focus {
    background: #0f172a !important;
    border-color: #8b5cf6 !important;
}

/* Mobile menu dark */
html.dark #mobileMenu,
html.dark #mobileNav {
    background-color: #0f172a !important;
    border-color: #334155 !important;
}
html.dark #moreMenu {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* Button overrides on dark */
html.dark .bg-slate-100.hover\:bg-slate-200 {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}
html.dark .bg-slate-100.hover\:bg-slate-200:hover {
    background-color: #334155 !important;
}