/* ============================================================
   Dark Theme — html[data-theme="dark"]
   Single source of truth for all dark mode overrides.
   Organized: variables → global elements → Tailwind →
              landing → login → console → finder → forms/modals
   ============================================================ */

/* ── 1. All CSS variable overrides (merged) ── */
html[data-theme="dark"] {
  /* critical-css.html */
  --bg-global: #0f172a;
  --bg-body: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;
  --text-disabled: #475569;
  --border-subtle: rgba(255, 255, 255, 0.1);

  /* design-tokens.css — Slate scale flipped */
  --slate-900: #f1f5f9;
  --slate-800: #e2e8f0;
  --slate-700: #cbd5e1;
  --slate-600: #94a3b8;
  --slate-500: #64748b;
  --slate-400: #475569;
  --slate-300: #334155;
  --slate-200: #1e293b;
  --slate-100: #1e293b;
  --slate-50:  #0f172a;

  /* Sidebar */
  --sidebar-bg: rgba(15, 23, 42, 0.85);
  --sidebar-border: rgba(20, 184, 166, 0.15);
  --sidebar-item-hover: rgba(20, 184, 166, 0.12);
  --sidebar-item-active-bg: rgba(20, 184, 166, 0.15);

  /* Glass */
  --glass-bg: rgba(15, 23, 42, 0.6);
  --glass-border: rgba(255, 255, 255, 0.1);

  /* login-panel.css */
  --primary-gradient-start: #0a2520;
  --primary-gradient-mid: #0d3830;
  --primary-gradient-end: #115e52;
  --border-light: #334155;
  --border-medium: #475569;
  --bg-input: #1e293b;
  --bg-white: #1e293b;
  --bg-overlay: rgba(0, 0, 0, 0.7);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.35), 0 20px 50px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.4), 0 32px 70px rgba(0, 0, 0, 0.35);

  /* landing.css */
  --teal: #14B8A6;
  --teal-dark: #0f9688;
  --teal-dim: #0d8a7c;
  --teal-light: rgba(20, 184, 166, 0.15);
  --teal-glow: rgba(20, 184, 166, 0.3);
  --teal-border: rgba(20, 184, 166, 0.35);

  /* finder.html / general cards */
  --bg-card: #1e293b;
  --bg-hover: #263548;
  --bg-nav: rgba(15, 23, 42, 0.85);
  --shadow-card-sm: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-card-lg: 0 12px 24px rgba(0, 0, 0, 0.35);
  --shadow-floating: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* ================================================================
   2. Global element overrides
   ================================================================ */

html[data-theme="dark"] body {
  background: #0f172a;
  color: #f1f5f9;
}

html[data-theme="dark"] header {
  background: rgba(15, 23, 42, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] nav {
  background-color: rgba(15, 23, 42, 0.95);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] ::selection {
  background: rgba(20, 184, 166, 0.3);
  color: #f1f5f9;
}

/* Tables */
html[data-theme="dark"] table { border-color: #334155; }
html[data-theme="dark"] th { background: #0f172a; color: #94a3b8; border-color: #334155; }
html[data-theme="dark"] td { border-color: #334155; color: #cbd5e1; }
html[data-theme="dark"] tr:hover td { background: rgba(255, 255, 255, 0.03); }

/* Toast */
html[data-theme="dark"] .toast { background: #1e293b; border-color: #334155; color: #f1f5f9; }

/* Scrollbar */
html[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0f172a; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* ================================================================
   3. Reusable component overrides (cards, dropdowns, forms, modals)
   ================================================================ */

/* Cards */
html[data-theme="dark"] .design-card { background: #1e293b; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
html[data-theme="dark"] .design-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
html[data-theme="dark"] .glass-card { background: rgba(15,23,42,0.6); border-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] .feature-card { border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .feature-card:hover { background: #263548; }
html[data-theme="dark"] .pricing-card { background: #1e293b; border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .pricing-card-popular { border-color: rgba(20,184,166,0.3); }

/* Inputs */
html[data-theme="dark"] .input-capsule { background: rgba(30,41,59,0.9); border-color: #334155; color: #f1f5f9; }
html[data-theme="dark"] .input-capsule::placeholder { color: #64748b; }

/* Forms (login + modals + finder) */
html[data-theme="dark"] .form-group { color: #cbd5e1; }
html[data-theme="dark"] .form-label { color: #cbd5e1 !important; }
html[data-theme="dark"] .form-input { background: #162032 !important; border: 1px solid #475569 !important; color: #f1f5f9 !important; }
html[data-theme="dark"] .form-input:focus { border-color: #14B8A6 !important; box-shadow: 0 0 0 3px rgba(20,184,166,0.2) !important; }
html[data-theme="dark"] .form-input::placeholder { color: #64748b !important; }
html[data-theme="dark"] .form-hint { color: #64748b !important; }
html[data-theme="dark"] .auth-input-icon { color: #64748b; }
html[data-theme="dark"] .error-message { background-color: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); }

/* Modals */
html[data-theme="dark"] .modal-mask { background: rgba(0,0,0,0.7); }
html[data-theme="dark"] .modal-box { background: #1e293b; border-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] .modal-title { color: #f1f5f9; }
html[data-theme="dark"] .modal-subtitle { color: #94a3b8; }
html[data-theme="dark"] .modal-form label { color: #cbd5e1; }
html[data-theme="dark"] .modal-form input,
html[data-theme="dark"] .modal-form select,
html[data-theme="dark"] .modal-form textarea { background: #0f172a; border-color: #334155; color: #f1f5f9; }
html[data-theme="dark"] .modal-cancel-btn { background: #334155; color: #cbd5e1; border-color: #475569; }

/* Dropdowns (shared pattern) */
html[data-theme="dark"] .sidebar-user-dropdown,
html[data-theme="dark"] .nav-user-dropdown,
html[data-theme="dark"] .console-user-dropdown,
html[data-theme="dark"] .landing-lang-dropdown,
html[data-theme="dark"] .console-lang-dropdown { background: #1e293b; border-color: #334155; }
html[data-theme="dark"] .sidebar-user-dropdown { box-shadow: 0 -4px 20px rgba(0,0,0,0.4); }

html[data-theme="dark"] .sidebar-dropdown-item,
html[data-theme="dark"] .nav-dropdown-item,
html[data-theme="dark"] .console-lang-item,
html[data-theme="dark"] .landing-lang-item { color: #cbd5e1; }

html[data-theme="dark"] .sidebar-dropdown-item:hover,
html[data-theme="dark"] .nav-dropdown-item:hover,
html[data-theme="dark"] .console-lang-item:hover,
html[data-theme="dark"] .landing-lang-item:hover { background: rgba(255,255,255,0.06); }

html[data-theme="dark"] .sidebar-dropdown-divider,
html[data-theme="dark"] .nav-dropdown-divider { background: #334155; }

/* Buttons */
html[data-theme="dark"] .nav-user-btn,
html[data-theme="dark"] .console-user-btn { background: #1e293b; border-color: #334155; }
html[data-theme="dark"] .landing-lang-btn { border-color: #334155; }
html[data-theme="dark"] .console-sidebar .sidebar-logout-btn:hover { background: rgba(239,68,68,0.15); }
html[data-theme="dark"] .console-header-btn:hover { background: rgba(255,255,255,0.08); }

/* Tags & icons (reusable across finder + other pages) */
html[data-theme="dark"] .tag-blue { background: rgba(59,130,246,0.15); color: #60a5fa; }
html[data-theme="dark"] .tag-green { background: rgba(16,185,129,0.15); color: #34d399; }
html[data-theme="dark"] .tag-orange { background: rgba(245,158,11,0.15); color: #fbbf24; }
html[data-theme="dark"] .tag-purple { background: rgba(139,92,246,0.15); color: #a78bfa; }
html[data-theme="dark"] .icon-purple { background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(99,102,241,0.15)); color: #a78bfa; }
html[data-theme="dark"] .icon-blue { background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(96,165,250,0.15)); color: #60a5fa; }
html[data-theme="dark"] .icon-orange { background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(251,191,36,0.15)); color: #fbbf24; }
html[data-theme="dark"] .icon-green { background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(52,211,153,0.15)); color: #34d399; }
html[data-theme="dark"] .icon-red { background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(248,113,113,0.15)); color: #f87171; }
html[data-theme="dark"] .icon-gray { background: #1e293b; color: #94a3b8; }
html[data-theme="dark"] .card-icon { background: #0f172a; }
html[data-theme="dark"] .agent-tag { background-color: #0f172a; color: #94a3b8; }

/* ================================================================
   4. Tailwind utility overrides
   ================================================================ */
html[data-theme="dark"] .bg-white { background-color: #1e293b; }
html[data-theme="dark"] .bg-white\/95 { background-color: rgba(15,23,42,0.95); }
html[data-theme="dark"] .bg-white\/80 { background-color: rgba(15,23,42,0.8); }
html[data-theme="dark"] .bg-gray-50 { background-color: #0f172a; }
html[data-theme="dark"] .bg-gray-100 { background-color: #1e293b; }
html[data-theme="dark"] .bg-gray-200 { background-color: #334155; }
html[data-theme="dark"] .text-gray-400 { color: #64748b; }
html[data-theme="dark"] .text-gray-500 { color: #94a3b8; }
html[data-theme="dark"] .text-gray-600 { color: #94a3b8; }
html[data-theme="dark"] .text-gray-700 { color: #cbd5e1; }
html[data-theme="dark"] .text-gray-800 { color: #e2e8f0; }
html[data-theme="dark"] .text-gray-900 { color: #f1f5f9; }
html[data-theme="dark"] .hover\:text-gray-900:hover { color: #f1f5f9; }
html[data-theme="dark"] .border-gray-200 { border-color: #334155; }
html[data-theme="dark"] .border-gray-300 { border-color: #475569; }
html[data-theme="dark"] .border-gray-200\/50 { border-color: rgba(51,65,85,0.5); }
html[data-theme="dark"] .divide-gray-200 > * + * { border-color: #334155; }

/* ================================================================
   5. Landing page overrides (index.html)
   ================================================================ */

html[data-theme="dark"] .hero { background: #0f172a; }
html[data-theme="dark"] .hero-bg-grad { background: linear-gradient(to bottom, #0f172a, #0c1524, #0f172a); }
html[data-theme="dark"] .hero-grid-fade { background: linear-gradient(to bottom, transparent, rgba(15,23,42,0.5), #0f172a); }
html[data-theme="dark"] .hero-radial { background: radial-gradient(circle at 50% 40%, transparent 20%, #0f172a 70%); }
html[data-theme="dark"] .hero-title { color: #f1f5f9; }
html[data-theme="dark"] .hero-desc { color: #94a3b8; }
html[data-theme="dark"] .btn-cta { background: #14B8A6; color: white; }
html[data-theme="dark"] .btn-demo { background: rgba(255,255,255,0.08); color: #cbd5e1; border-color: rgba(255,255,255,0.15); }

html[data-theme="dark"] .feature-badge { background: rgba(15,23,42,0.7); border-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] .badge-title { color: #f1f5f9; }
html[data-theme="dark"] .badge-desc { color: #94a3b8; }
html[data-theme="dark"] .badge-icon-box { background: rgba(20,184,166,0.1); }

html[data-theme="dark"] .dashboard-section { background: #0f172a; }
html[data-theme="dark"] .dashboard-vis { background: rgba(15,23,42,0.5); }
html[data-theme="dark"] .dash-sidebar,
html[data-theme="dark"] .dash-header,
html[data-theme="dark"] .dash-console,
html[data-theme="dark"] .dash-stat { background: #1e293b; border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .dash-metric { background: rgba(15,23,42,0.5); }
html[data-theme="dark"] .dash-stat-label,
html[data-theme="dark"] .dash-metric-label,
html[data-theme="dark"] .dash-desc { color: #94a3b8; }
html[data-theme="dark"] .dash-stat-sub,
html[data-theme="dark"] .dash-metric-sub { color: #64748b; }
html[data-theme="dark"] .dash-title { color: #f1f5f9; }
html[data-theme="dark"] .dash-check-icon { color: #14B8A6; }
html[data-theme="dark"] .dash-checks li span { color: #cbd5e1; }

html[data-theme="dark"] .bento-section { background: rgba(20,184,166,0.02); }
html[data-theme="dark"] .bento-title { color: #f1f5f9; }
html[data-theme="dark"] .bento-desc { color: #94a3b8; }
html[data-theme="dark"] .bento-card-bg { background: rgba(20,184,166,0.06); }
html[data-theme="dark"] .bento-card-sheen { background: linear-gradient(to bottom, rgba(255,255,255,0.08), transparent); }

html[data-theme="dark"] .deploy-card { background: rgba(15,23,42,0.6); border-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] .deploy-title { color: #f1f5f9; }
html[data-theme="dark"] .deploy-subtitle { color: #94a3b8; }
html[data-theme="dark"] .deploy-tab-btn { color: #94a3b8; border-color: rgba(255,255,255,0.06); }
html[data-theme="dark"] .deploy-tab-btn:hover { background: rgba(255,255,255,0.06); }
html[data-theme="dark"] .deploy-tab-btn.active { background: rgba(20,184,166,0.1); color: #14B8A6; border-color: rgba(20,184,166,0.3); }
html[data-theme="dark"] .deploy-detail-card { background: rgba(15,23,42,0.5); border-color: rgba(255,255,255,0.06); }
html[data-theme="dark"] .deploy-detail-inner { background: rgba(15,23,42,0.4); }

html[data-theme="dark"] .security-section { background: rgba(20,184,166,0.02); }
html[data-theme="dark"] .security-title { color: #f1f5f9; }
html[data-theme="dark"] .security-desc { color: #94a3b8; }
html[data-theme="dark"] .security-card { background: rgba(15,23,42,0.5); border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .security-card:hover { background: #1e293b; }
html[data-theme="dark"] .security-card-title { color: #f1f5f9; }
html[data-theme="dark"] .security-card-desc { color: #94a3b8; }
html[data-theme="dark"] .security-icon { background: rgba(20,184,166,0.08); border-color: rgba(255,255,255,0.08); }

html[data-theme="dark"] .footer-section { background: linear-gradient(to bottom, #0f172a, #0c1524); }
html[data-theme="dark"] .footer-section div[style*="background:rgba(255,255,255"] { background: rgba(15,23,42,0.65) !important; border-color: rgba(255,255,255,0.1) !important; }
html[data-theme="dark"] .footer-section span[style*="color:#0f172a"],
html[data-theme="dark"] .footer-section span[style*="color: #0f172a"] { color: #f1f5f9 !important; }
html[data-theme="dark"] .footer-section span[style*="color:#94a3b8"],
html[data-theme="dark"] .footer-section a[style*="color:#94a3b8"] { color: #64748b !important; }
html[data-theme="dark"] .back-top { background: rgba(15,23,42,0.8); border-color: rgba(255,255,255,0.1); color: #94a3b8; }

html[data-theme="dark"] .nav-pill { background: rgba(15,23,42,0.75); border-color: rgba(255,255,255,0.1); }

/* ================================================================
   6. Login page overrides
   ================================================================ */

html[data-theme="dark"] .left-section { background: linear-gradient(160deg, #0a1628 0%, #0d1f35 30%, #102840 60%, #0f2137 100%) !important; }
html[data-theme="dark"] .video-overlay { background: rgba(0,0,0,0.4) !important; }
html[data-theme="dark"] .right-bg-decoration { opacity: 0.15; }
html[data-theme="dark"] .right-section { background: #0f172a; }
html[data-theme="dark"] .login-container { background: #1e293b; border-radius: 16px; padding: 32px; }
html[data-theme="dark"] .login-header-custom .logo-text { color: #f1f5f9 !important; }
html[data-theme="dark"] .login-header-custom p { color: #94a3b8 !important; }
html[data-theme="dark"] .tabs { border-bottom-color: #334155; }
html[data-theme="dark"] .tab-btn { color: #94a3b8; }
html[data-theme="dark"] .tab-btn:hover { color: #14B8A6; }
html[data-theme="dark"] .tab-btn.active { color: #14B8A6; }
html[data-theme="dark"] .footer { color: #64748b; }

/* ================================================================
   7. Console page overrides
   ================================================================ */

/* Profile page */
html[data-theme="dark"] .regular-info-row,
html[data-theme="dark"] .info-row { background: #0f172a; border-color: #334155; }
html[data-theme="dark"] .lang-select { background: #1e293b; border-color: #475569; color: #f1f5f9; }
html[data-theme="dark"] .lang-select:focus { border-color: #14B8A6; }
html[data-theme="dark"] .login-method { border-color: #334155; }
html[data-theme="dark"] .form-label { color: #cbd5e1; }

/* Models page — segment control + card specs */
html[data-theme="dark"] .segment-control-container { background: #1e293b; }
html[data-theme="dark"] .segment-item.active { background: #334155; color: #f1f5f9; }
html[data-theme="dark"] .bg-\[\#F5F5F7\] { background-color: #0f172a !important; }
html[data-theme="dark"] .text-\[\#1D1D1F\] { color: #f1f5f9 !important; }
html[data-theme="dark"] .text-\[\#86868B\] { color: #94a3b8 !important; }
html[data-theme="dark"] .border-\[rgba\(0\,0\,0\,0\.05\)\] { border-color: rgba(255,255,255,0.08) !important; }

/* College page — module cards */
html[data-theme="dark"] .module-card { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important; border-color: #334155; }
html[data-theme="dark"] .nav-item { color: #94a3b8; }
html[data-theme="dark"] .nav-item:hover { color: #f1f5f9; }

/* Help page — content cards, code blocks */
html[data-theme="dark"] .nav-link { color: #94a3b8; }
html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .nav-link.active { color: #14B8A6; }

html[data-theme="dark"] .console-header { background: rgba(15,23,42,0.88); border-bottom-color: rgba(20,184,166,0.15); }
html[data-theme="dark"] .console-mobile-topbar { background: rgba(15,23,42,0.97); border-bottom-color: rgba(255,255,255,0.06); }
html[data-theme="dark"] .console-mobile-topbar-title { color: #f1f5f9; }
html[data-theme="dark"] .sidebar-mobile-toggle { background: rgba(15,23,42,0.85); border-color: rgba(20,184,166,0.15); }
html[data-theme="dark"] .sidebar-mobile-toggle.sidebar-toggle-inline:hover { background: rgba(255,255,255,0.08) !important; }
html[data-theme="dark"] .sidebar-mobile-overlay { background: rgba(0,0,0,0.6); }

/* ================================================================
   8. Finder page overrides
   ================================================================ */

html[data-theme="dark"] .hero-visual { background: #1e293b; }
html[data-theme="dark"] .app-footer { background-color: #0f172a; border-top-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .copy-prompt-btn { background: #0f172a; border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .copy-prompt-btn:hover { background: #14B8A6; border-color: #14B8A6; }
html[data-theme="dark"] .link-with-icon { color: #14B8A6; }

/* ================================================================
   9. Inline style fallback overrides (last resort)
   ================================================================ */

html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background-color: white"],
html[data-theme="dark"] [style*="background-color:white"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"] { background: #1e293b !important; }

html[data-theme="dark"] [style*="color: #111827"],
html[data-theme="dark"] [style*="color:#111827"] { color: #f1f5f9 !important; }
html[data-theme="dark"] [style*="color: rgb(17, 24, 39)"],
html[data-theme="dark"] [style*="color:rgb(17, 24, 39)"] { color: #f1f5f9 !important; }