/* CordList Theme — dark default, light optional */

:root input,
:root textarea,
:root select,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--bg-input, #0e0e16) !important;
  color: var(--text, #ececf4) !important;
  border-color: var(--border, rgba(255, 255, 255, 0.06)) !important;
}

:root input::placeholder,
[data-theme="dark"] input::placeholder,
:root textarea::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--text-dim, #5e5e74) !important;
}

:root,
[data-theme="dark"] {
  --bg: #070b14;
  --bg-elevated: #0f1626;
  --bg-card: #0d1322;
  --bg-input: #0b111e;
  --border: rgba(120, 160, 255, 0.09);
  --border-hover: rgba(59, 130, 246, 0.45);
  --text: #eef3fb;
  --text-muted: #9fb2cc;
  --text-dim: #61748f;
  --nav-bg: rgba(7, 11, 20, 0.82);
  --stat-card-bg: #0d1322;
  --modal-backdrop: rgba(0, 0, 0, 0.72);
}

:root[data-theme="light"],
html[data-theme="light"] {
  --bg: #f4f4f8;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --bg-input: #f0f0f5;
  --border: rgba(0, 0, 0, 0.07);
  --border-hover: rgba(37, 99, 235, 0.28);
  --text: #12121f;
  --text-muted: #5c5c72;
  --text-dim: #8b8ba3;
  --nav-bg: rgba(255, 255, 255, 0.92);
  --stat-card-bg: #ffffff;
  --modal-backdrop: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

[data-theme="light"] .site-bg {
  background:
    radial-gradient(ellipse 70% 45% at 50% -15%, rgba(59, 130, 246, 0.07), transparent 55%),
    var(--bg) !important;
}

[data-theme="light"] .nav-bar {
  background: var(--nav-bg) !important;
  border-color: var(--border) !important;
}

[data-theme="light"] .srv-card,
[data-theme="light"] .feat-inner,
[data-theme="light"] .glass-panel,
[data-theme="light"] .glass-card,
[data-theme="light"] .how-step,
[data-theme="light"] .stat-card {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] .text-white {
  color: var(--text) !important;
}

[data-theme="light"] .text-gray-300,
[data-theme="light"] .text-gray-400 {
  color: var(--text-muted) !important;
}

[data-theme="light"] .text-gray-500,
[data-theme="light"] .text-gray-600 {
  color: var(--text-dim) !important;
}

[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: var(--bg-input) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

[data-theme="light"] .tag {
  background: rgba(59, 130, 246, 0.08) !important;
  border-color: rgba(59, 130, 246, 0.14) !important;
  color: #3b82f6 !important;
}

[data-theme="light"] .cat-pill,
[data-theme="light"] .cat-btn {
  background: var(--bg-elevated) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}

[data-theme="light"] .cat-pill:hover,
[data-theme="light"] .cat-btn:hover,
[data-theme="light"] .cat-btn.active {
  background: rgba(59, 130, 246, 0.08) !important;
  border-color: rgba(59, 130, 246, 0.22) !important;
  color: #2563eb !important;
}

[data-theme="light"] .card-icon {
  background: #fff !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
}

[data-theme="light"] ::-webkit-scrollbar-track {
  background: #eeeef2;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.22);
}

[data-theme="light"] .stat-val,
[data-theme="light"] .stat-gradient,
[data-theme="light"] .gradient-text {
  -webkit-text-fill-color: initial !important;
  background: none !important;
  color: #2563eb !important;
}

[data-theme="light"] #m-menu {
  background: rgba(255, 255, 255, 0.98) !important;
  border-top-color: var(--border) !important;
}

[data-theme="light"] #m-menu a {
  color: var(--text-muted) !important;
}

[data-theme="light"] .footer-pro {
  background: var(--bg) !important;
  border-top-color: var(--border) !important;
}

[data-theme="light"] .footer-link,
[data-theme="light"] .footer-social {
  color: var(--text-dim) !important;
}

/* ========== LIGHT MODE FIXES (post blue-theme) ========== */

/* Light text utilities that would otherwise be invisible on white */
[data-theme="light"] .text-white,
[data-theme="light"] .text-gray-100,
[data-theme="light"] .text-gray-200 {
  color: var(--text) !important;
}

/* Hover states that turn text white (nav links, dropdowns) need dark text in light mode */
[data-theme="light"] .hover\:text-white:hover {
  color: var(--text) !important;
}

/* Blue accent text — darken for readable contrast on light backgrounds */
[data-theme="light"] .text-blue-200,
[data-theme="light"] .text-blue-300,
[data-theme="light"] .text-blue-400 {
  color: #2563eb !important;
}

/* Section label / pills */
[data-theme="light"] .section-label {
  color: #2563eb !important;
  background: rgba(59, 130, 246, 0.08) !important;
  border-color: rgba(59, 130, 246, 0.18) !important;
}

/* Sort tabs container in light mode */
[data-theme="light"] .sort-tabs {
  background: #eef1f7 !important;
  border-color: var(--border) !important;
}
[data-theme="light"] .sort-tab { color: var(--text-muted) !important; }
[data-theme="light"] .sort-tab.active { color: #fff !important; }

/* Browse category sidebar */
[data-theme="light"] .cat-sidebar-inner { background: var(--bg-card) !important; }

/* Animated grid + aurora: make the grid faintly visible and soften the glow on white */
[data-theme="light"] .site-bg::before {
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.05) 1px, transparent 1px) !important;
}
[data-theme="light"] .site-bg::after { opacity: 0.5 !important; }

/* Featured cards: lighter glow so it doesn't look muddy on white */
[data-theme="light"] .srv-card.featured {
  border-color: rgba(37, 99, 235, 0.45) !important;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18), 0 8px 26px rgba(37, 99, 235, 0.14) !important;
}
[data-theme="light"] .srv-card.featured::after { display: none !important; }

/* Card surfaces and dividers */
[data-theme="light"] .card-actions { border-top-color: var(--border) !important; }
[data-theme="light"] .card-banner::after {
  background: linear-gradient(180deg, transparent 40%, rgba(255, 255, 255, 0.35)) !important;
}

/* Buttons: ghost button readable border in light */
[data-theme="light"] .btn-ghost {
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--text-muted) !important;
}
[data-theme="light"] .btn-ghost:hover {
  color: #2563eb !important;
  border-color: rgba(37, 99, 235, 0.4) !important;
  background: rgba(59, 130, 246, 0.06) !important;
}

/* Generic translucent panels built with Tailwind (bg-white/[.04] etc) read as near-white
   in light mode; give them a subtle light surface instead */
[data-theme="light"] .bg-white\/\[\.02\],
[data-theme="light"] .bg-white\/\[\.03\],
[data-theme="light"] .bg-white\/\[\.04\],
[data-theme="light"] .bg-white\/\[\.06\] {
  background: rgba(0, 0, 0, 0.03) !important;
}

/* Nav active pill */
[data-theme="light"] .nav-link-active {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
  color: #2563eb !important;
}