:root{
  /* Allow UA to pick correct default form colors */
  color-scheme: light;
}

html[data-theme="dark"]{
  color-scheme: dark;

  /* Common tokens used across pages */
  --bg:#0b1220;
  --gray-bg:#0b1220;
  --card:#0f1a2b;
  --text:#e6f1ff;
  --muted:#9fb3c8;
  --border:#22314d;
  --ring:rgba(34,197,94,.25);
  --shadow:rgba(0,0,0,.55);

  /* Navbar tokens (defined in navbar.php) */
  --white:#0f1a2b;
}

/* Base surfaces */
html[data-theme="dark"] body{
  background:var(--bg);
  color:var(--text);
}

html[data-theme="dark"] .card{
  background:var(--card);
  border-color:var(--border);
  box-shadow:0 18px 50px var(--shadow);
}

html[data-theme="dark"] .muted{
  color:var(--muted);
}

/* Forms */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:#0b1526;
  color:var(--text);
  border-color:var(--border);
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus{
  border-color:#22c55e;
  box-shadow:0 0 0 4px var(--ring);
  outline:none;
}

/* Tables */
html[data-theme="dark"] table{
  color:var(--text);
  background:var(--card);
}
html[data-theme="dark"] th{
  /* Opaque header so it stays readable even if page uses light row backgrounds */
  background:linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.06)), var(--card);
  color:var(--text);
}
html[data-theme="dark"] td,
html[data-theme="dark"] th{
  border-bottom-color:rgba(255,255,255,.08);
}
html[data-theme="dark"] td{
  /* Opaque cell background for consistent contrast */
  background:var(--card);
  color:var(--text);
}

/* Sticky first column/header in some pages (nama siswa, NIS/NISN) */
html[data-theme="dark"] th.sticky,
html[data-theme="dark"] td.sticky{
  background:var(--card);
  color:var(--text);
}
html[data-theme="dark"] td.sticky{
  border-right:1px solid rgba(255,255,255,.10);
}

/* Pills/badges used in progress page */
html[data-theme="dark"] .pill{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
  color:var(--text);
}

/* Navbar dropdown */
html[data-theme="dark"] nav.navbar .drop{
  background:var(--card);
  color:var(--text);
  border:1px solid rgba(255,255,255,.10);
}
html[data-theme="dark"] nav.navbar .drop a{
  color:var(--text);
}
html[data-theme="dark"] nav.navbar .drop a:hover{
  background:rgba(255,255,255,.06);
}
html[data-theme="dark"] nav.navbar .drop .cap{
  color:var(--muted);
}
html[data-theme="dark"] nav.navbar .drop a.active{
  background:rgba(34,197,94,.12);
}

/* Don't print dark theme */
@media print{
  html{ color-scheme: light; }
  html[data-theme="dark"]{
    --bg:#fff;
    --gray-bg:#fff;
    --card:#fff;
    --text:#000;
    --muted:#333;
    --border:#ddd;
    --shadow:transparent;
    --white:#fff;
  }
}