/* frontend/css/dark-mode.css
   Dark mode is the DEFAULT. This file adds .light class overrides
   and the dark-mode toggle transition.
*/

/* Smooth theme transitions */
*, *::before, *::after {
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease;
}

/* Exceptions — don't transition transforms or shadows (causes jank) */
.btn, .card, .modal, .toast { transition: all 200ms ease; }

/* ─── Light mode navbar ─────────────────────────────────────────────────── */
.light .navbar {
  background: rgba(248,250,252,0.95);
  border-bottom-color: #e2e8f0;
}
.light .navbar-nav a { color: #475569; }
.light .navbar-nav a:hover { color: var(--c-primary); }

/* ─── Light mode footer ─────────────────────────────────────────────────── */
.light .footer { background: #f8fafc; border-top-color: #e2e8f0; }
.light .footer ul a { color: #64748b; }

/* ─── Light mode cards ──────────────────────────────────────────────────── */
.light .card, .light .stat-card { background: #fff; border-color: #e2e8f0; }
.light .card:hover { border-color: #cbd5e1; }

/* ─── Light mode form controls ──────────────────────────────────────────── */
.light .form-control {
  background: #fff;
  border-color: #e2e8f0;
  color: #0f172a;
}
.light .form-control:focus { border-color: var(--c-primary); }

/* ─── Light mode table ──────────────────────────────────────────────────── */
.light .table-wrap { border-color: #e2e8f0; }
.light .table thead { background: #f1f5f9; }
.light .table th { color: #64748b; }
.light .table td { color: #0f172a; border-top-color: #e2e8f0; }
.light .table tbody tr:hover { background: #f8fafc; }

/* ─── Light mode modal ──────────────────────────────────────────────────── */
.light .modal { background: #fff; border-color: #e2e8f0; }

/* ─── Light mode toast ──────────────────────────────────────────────────── */
.light .toast { background: #fff; border-color: #e2e8f0; }

/* ─── Light mode hero ───────────────────────────────────────────────────── */
.light .hero-bg {
  background:
    radial-gradient(ellipse 60% 60% at 70% 50%, rgba(20,184,166,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 10% 80%, rgba(59,130,246,0.03) 0%, transparent 60%);
}

/* ─── Light mode badges ─────────────────────────────────────────────────── */
.light .badge-primary { background: rgba(20,184,166,0.1); }
.light .badge-neutral { background: #f1f5f9; color: #475569; }

/* ─── Theme toggle button ───────────────────────────────────────────────── */
#theme-toggle {
  width: 36px; height: 36px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--c-text-muted);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  transition: all 200ms ease;
}
#theme-toggle:hover {
  color: var(--c-primary);
  border-color: var(--c-primary);
}