/* Load after all other CSS so these rules win */
:root, [data-theme], body { color-scheme: light dark; }

/* DARK defaults (you already use these) */
:root {
  --bg: #0b1325;
  --ink: #e5e7eb;
  --muted: #94a3b8;
  --card: #111a31;
  --line: rgba(148,163,184,0.25);
  --accent: #2563eb;
  --accent-ink: #ffffff;
}

/* LIGHT overrides */
[data-theme="light"] {
  --bg: #f8fafc;
  --ink: #0b1325;
  --muted: #475569;
  --card: #ffffff;
  --line: rgba(2,6,23,0.12);
  --accent: #2563eb;
  --accent-ink: #ffffff;
}

/* Global */
html, body { background: var(--bg) !important; color: var(--ink) !important; }
a { color: var(--accent) !important; }
hr { border: 0 !important; border-top: 1px solid var(--line) !important; }

/* Layout chrome */
header, nav, footer { background: var(--card) !important; color: var(--ink) !important; border-color: var(--line) !important; }

/* Cards / panels / tables */
.card, .panel, .box, .table, .table th, .table td {
  background: var(--card) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

/* Forms */
input, select, textarea {
  background: var(--card) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}
input::placeholder, textarea::placeholder { color: var(--muted) !important; }

/* Buttons (primary) */
.btn, button.btn, a.btn {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border: 1px solid var(--accent) !important;
}

/* Kicker / subtle text */
.kicker, .muted, small, .text-muted { color: var(--muted) !important; }

/* Fallback body classes (JS also toggles these) */
body.is-light { background: #f8fafc !important; color: #0b1325 !important; }
body.is-dark  { background: #0b1325 !important; color: #e5e7eb !important; }

/* Force sidebar/menu to theme */
.sidebar, .sidebar a, .menu, .menu a {
  background: var(--card) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}
.sidebar a:hover, .menu a:hover {
  background: var(--line) !important;
}

/* Force admin buttons to use accent colors */
.admin .btn, .admin button, .admin input[type=submit] {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border: 1px solid var(--accent) !important;
}
.admin .btn:hover { opacity: .85; }

/* Danger buttons */
.admin .btn.danger { background: var(--danger) !important; border-color: var(--danger) !important; }

/* ================== LIGHT THEME FIXES ================== */
[data-theme="light"] .sidebar, 
[data-theme="light"] .sidebar a, 
[data-theme="light"] .menu a {
  background: #ffffff !important;
  color: #0b1325 !important;
  border-color: var(--line) !important;
}

[data-theme="light"] .card, 
[data-theme="light"] .panel, 
[data-theme="light"] .box {
  background: #ffffff !important;
  color: #0b1325 !important;
  border: 1px solid var(--line) !important;
}

[data-theme="light"] .table, 
[data-theme="light"] .table th, 
[data-theme="light"] .table td, 
[data-theme="light"] table, 
[data-theme="light"] th, 
[data-theme="light"] td {
  background: #ffffff !important;
  color: #0b1325 !important;
  border-color: var(--line) !important;
}

[data-theme="light"] .btn, 
[data-theme="light"] button, 
[data-theme="light"] input[type=submit] {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
}

[data-theme="light"] .btn.secondary { 
  background: transparent !important; 
  color: var(--accent) !important; 
  border-color: var(--line) !important;
}
[data-theme="light"] .btn.danger { 
  background: var(--danger) !important; 
  border-color: var(--danger) !important; 
}

/* Helpers */
.text-danger { color: var(--danger) !important; }

/* Buttons (base + danger) */
.btn, button.btn, a.btn {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border: 1px solid var(--accent) !important;
}
.btn.danger, a.btn.danger, button.btn.danger {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
}

/* Sidebar tiles (ensure consistent look in both themes) */
.sidebar a, .menu a {
  display: block;
  background: var(--card) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}
.sidebar a:hover, .menu a:hover { background: var(--line) !important; }

/* Fix dashboard stat cards in Light mode */
[data-theme="light"] .stat, 
[data-theme="light"] .card.stat, 
[data-theme="light"] .dashboard .card {
  background: #ffffff !important;
  color: #0b1325 !important;
  border: 1px solid var(--line) !important;
}
[data-theme="light"] .stat strong, 
[data-theme="light"] .card.stat strong {
  color: #0b1325 !important;
}
/* Admin dashboard KPI cards */
.dashboard .card,
.dashboard .stat,
.dashboard .kpi,
.dashboard .metric,
.card.stat,
.card.kpi {
  background: var(--card) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}
.dashboard .card .kicker,
.dashboard .stat .kicker { color: var(--muted) !important; }

/* Force light look when theme is light */
[data-theme="light"] .dashboard .card,
[data-theme="light"] .dashboard .stat,
[data-theme="light"] .dashboard .kpi,
[data-theme="light"] .dashboard .metric,
[data-theme="light"] .card.stat,
[data-theme="light"] .card.kpi {
  background: #ffffff !important;
  color: #0b1325 !important;
  border: 1px solid var(--line) !important;
}
[data-theme="light"] .dashboard .card .kicker,
[data-theme="light"] .dashboard .stat .kicker { color: var(--muted) !important; }
/* === Admin dashboard KPI cards (robust) === */
.kpi,
.dashboard .kpi,
.card.kpi,
.admin-cards .kpi {
  background: var(--card) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
}
.kpi .kicker,
.card.kpi .kicker { color: var(--muted) !important; }

/* Light theme presentation */
[data-theme="light"] .kpi,
[data-theme="light"] .dashboard .kpi,
[data-theme="light"] .card.kpi,
[data-theme="light"] .admin-cards .kpi {
  background: #ffffff !important;
  color: #0b1325 !important;
  border: 1px solid var(--line) !important;
}
[data-theme="light"] .kpi .kicker,
[data-theme="light"] .card.kpi .kicker { color: var(--muted) !important; }
/* ===== Make the whole admin canvas light when in Light mode ===== */
[data-theme="light"] html,
[data-theme="light"] body,
[data-theme="light"] .admin-shell,
[data-theme="light"] .admin,
[data-theme="light"] .admin-main,
[data-theme="light"] .admin-content {
  background: #f8fafc !important;  /* page bg */
  color: #0b1325 !important;
}

/* Topbar/header chrome */
[data-theme="light"] .admin-topbar,
[data-theme="light"] .admin-header {
  background: #ffffff !important;
  color: #0b1325 !important;
  border-bottom: 1px solid var(--line) !important;
}

/* Sidebar container chrome */
[data-theme="light"] .sidebar {
  background: #e9eef6 !important;   /* subtle rail */
  border-right: 1px solid var(--line) !important;
}

/* Sidebar tiles/links (normal, hover, active) */
[data-theme="light"] .sidebar a {
  background: #ffffff !important;
  color: #0b1325 !important;
  border: 1px solid var(--line) !important;
}
[data-theme="light"] .sidebar a:hover {
  background: #f3f6fb !important;
}
[data-theme="light"] .sidebar a.active,
[data-theme="light"] .sidebar .active > a {
  background: #eef3fb !important;
  border-color: var(--accent) !important;
}

/* Cards and panels in Light */
[data-theme="light"] .card,
[data-theme="light"] .panel,
[data-theme="light"] .box {
  background: #ffffff !important;
  color: #0b1325 !important;
  border: 1px solid var(--line) !important;
}
/* ===== LIGHT MODE: force wrappers & rails to light ===== */
[data-theme="light"] body,
[data-theme="light"] .admin-shell,
[data-theme="light"] .admin,
[data-theme="light"] .admin-main,
[data-theme="light"] .admin-content,
[data-theme="light"] .content,
[data-theme="light"] main {
  background: #f8fafc !important;
  color: #0b1325 !important;
}

/* top bar/header */
[data-theme="light"] .admin-topbar,
[data-theme="light"] header.admin,
[data-theme="light"] .admin-header {
  background: #ffffff !important;
  color: #0b1325 !important;
  border-bottom: 1px solid var(--line) !important;
}

/* left rail / sidebar (container) */
[data-theme="light"] .sidebar,
[data-theme="light"] .admin-sidebar,
[data-theme="light"] nav.sidebar {
  background: #e9eef6 !important;
  border-right: 1px solid var(--line) !important;
}

/* sidebar tiles */
[data-theme="light"] .sidebar a,
[data-theme="light"] .admin-sidebar a {
  background: #ffffff !important;
  color: #0b1325 !important;
  border: 1px solid var(--line) !important;
}
[data-theme="light"] .sidebar a:hover,
[data-theme="light"] .admin-sidebar a:hover { background: #f3f6fb !important; }
[data-theme="light"] .sidebar a.active,
[data-theme="light"] .admin-sidebar a.active { background: #eef3fb !important; border-color: var(--accent) !important; }

/* cards & panels everywhere */
[data-theme="light"] .card,
[data-theme="light"] .panel,
[data-theme="light"] .box {
  background: #ffffff !important;
  color: #0b1325 !important;
  border: 1px solid var(--line) !important;
}

/* KPI tiles */
[data-theme="light"] .kpi { background:#ffffff !important; color:#0b1325 !important; border:1px solid var(--line) !important; }
/* Theme toggle cleanup */
#admThemeBtn {
  font-size: 0;       /* hide leftover text */
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  cursor: pointer;
}
#admThemeBtn::before {
  font-size: 16px; 
  content: "🌙";   /* default icon */
}
[data-theme="dark"] #admThemeBtn::before { content: "☀️"; }