/* ============================================================
   Portal SD Sekar Adi — SATU SUMBER WARNA
   Tema: "FLUID GLASS" (kaca lembut, biru langit; terang & gelap).

   Berkas ini dipakai bersama oleh:
     - portal-style.css  (semua halaman modul)  -> lewat <link> terpisah
     - index.html        (beranda)              -> lewat <link>

   Dulu blok variabel ini ditulis DUA KALI (di portal-style.css dan
   di index.html) dan berisiko berbeda. Sekarang cukup ubah di sini.
   ============================================================ */
/* Font TIDAK diimpor dari sini. CSS @import bersifat berantai: browser harus
   mengunduh berkas ini dulu, baru tahu harus mengunduh font. Sekarang tiap
   halaman memuat font lewat <link> sendiri supaya jalan berbarengan. */

/* Font angka & label kode — sama di terang maupun gelap.
   Dipakai untuk KPI, jam, dan label bagian supaya digit rata. */
:root{ --font-mono:'Geist Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; }

/* ============================================================
   TEMA — dua set nilai untuk variabel yang sama.

   Cara kerjanya:
     :root                          → set TERANG (bawaan Fluid Glass)
     @media prefers-color-scheme    → GELAP bila perangkat pengguna gelap
     html[data-tema="gelap|terang"] → pilihan manual (tombol tema), menimpa keduanya

   Aturan main untuk halaman baru: JANGAN menulis warna langsung
   (#2563eb, rgba(255,255,255,.05), dst). Pakai variabel di bawah,
   supaya halaman itu otomatis ikut kedua tema.

   Variabel penting:
     --teal / --teal-tua / --aksen-teks : warna aksen (biru)
     --putih / --kaca                    : permukaan kartu (kaca)
     --lapis / --lapis-kuat              : lapisan tipis di atas kartu
     --input-bg, --pilihan-bg/-teks      : kotak isian & isi dropdown
     --tombol-utama-bg/-teks             : tombol utama (navy di terang, biru muda di gelap)

   Dua halaman sengaja DI LUAR sistem ini: kebersihan.html dan
   sarpras-petugas.html — keduanya memang dibuat terang & berdiri
   sendiri (dibuka tanpa login lewat tautan).
   ============================================================ */
:root{
    color-scheme:light;
    --font:'Geist','Inter','Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    --font-judul:'Geist','Inter','Plus Jakarta Sans',system-ui,sans-serif;
    --teal:#2563eb; --teal-tua:#1d4ed8; --teal-muda:rgba(37,99,235,.12); --teal-lembut:rgba(37,99,235,.06); --teal-garis:rgba(37,99,235,.35);
    --teks:#0f1e33; --teks-lembut:#4b5b75; --teks-samar:#5f7090;
    --garis:rgba(15,30,51,.09); --garis-tua:rgba(15,30,51,.18);
    --bg:#eef3fa; --putih:rgba(255,255,255,.74);
    --merah:#dc2626; --merah-muda:rgba(220,38,38,.10);
    --biru-muda:rgba(37,99,235,.10); --biru-tua:#1d4ed8;
    --kuning-muda:rgba(217,119,6,.13); --kuning-tua:#a16207;
    --radius:12px; --radius-lg:18px; --radius-xl:26px;
    --shadow-sm:0 1px 2px rgba(15,30,51,.05), inset 0 0 0 1px rgba(255,255,255,.55);
    --shadow-md:0 18px 40px rgba(37,99,235,.14);
    --lapis:rgba(37,99,235,.045); --lapis-kuat:rgba(37,99,235,.09);
    --input-bg:rgba(255,255,255,.85);
    --aksen-teks:#1d4ed8;
    --sukses:#0f7a4d;     --sukses-bg:rgba(16,185,129,.12);   --sukses-garis:rgba(16,185,129,.30);
    --peringatan:#b45309; --peringatan-bg:rgba(245,158,11,.14); --peringatan-garis:rgba(245,158,11,.32);
    --bahaya:#b91c1c;     --bahaya-bg:rgba(220,38,38,.10);    --bahaya-garis:rgba(220,38,38,.30);
    --grafik-tinta:#0f1e33; --grafik-tinta-lembut:#5b6b88;
    --grafik-garis:rgba(15,30,51,.08); --grafik-permukaan:#ffffff;
    --grafik-tooltip:rgba(255,255,255,.97); --grafik-tooltip-garis:rgba(15,30,51,.14);
    --seri-1:#3b82f6; --seri-2:#0d9488; --seri-3:#d97706;
    --latar-lapisan:
      radial-gradient(900px 500px at 10% -10%, rgba(90,169,255,.35), transparent 60%),
      radial-gradient(700px 500px at 100% 10%, rgba(190,215,255,.70), transparent 60%),
      radial-gradient(800px 600px at 50% 110%, rgba(147,197,253,.28), transparent 60%);
    --pilihan-bg:#ffffff; --pilihan-teks:#0f1e33;
    --padat:#ffffff; --padat-kepala:#e9f0fa; --padat-garis:rgba(15,30,51,.10);
    --ic-teal:#0f766e; --ic-blue:#1d4ed8; --ic-amber:#b45309;
    --ic-pink:#be185d; --ic-green:#047857; --ic-purple:#6d28d9;
    --kaca:rgba(255,255,255,.72); --kaca-topbar:rgba(255,255,255,.62);
    --kartu-login:rgba(255,255,255,.80);
    --tombol-utama-bg:#0f1e33; --tombol-utama-teks:#ffffff; --tombol-utama-bayangan:0 8px 22px rgba(15,30,51,.22);
    --nav-aktif-bg:#0f1e33; --nav-aktif-teks:#ffffff;
    --hero-bg:linear-gradient(160deg,#5aa9ff 0%,#8ec5ff 45%,#dbeaff 100%);
    --hero-teks:#0f1e33; --hero-teks-lembut:#233a5c; --hero-garis:rgba(255,255,255,.75);
    --hero-orb:radial-gradient(circle at 50% 55%,rgba(255,255,255,.95),rgba(255,255,255,.55) 40%,transparent 68%);
    --hero-tombol-bg:rgba(255,255,255,.55); --hero-tombol-garis:rgba(255,255,255,.9);
}

/* ---------- Set GELAP (ikut setelan perangkat) ---------- */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --font:'Geist','Inter','Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    --font-judul:'Geist','Inter','Plus Jakarta Sans',system-ui,sans-serif;
    --teal:#60a5fa; --teal-tua:#3b82f6; --teal-muda:rgba(96,165,250,.16); --teal-lembut:rgba(96,165,250,.08); --teal-garis:rgba(96,165,250,.40);
    --teks:#e6edf8; --teks-lembut:#a3b1c9; --teks-samar:#8494b0;
    --garis:rgba(255,255,255,.08); --garis-tua:rgba(255,255,255,.17);
    --bg:#0b1220; --putih:rgba(21,31,52,.66);
    --merah:#f87171; --merah-muda:rgba(248,113,113,.16);
    --biru-muda:rgba(96,165,250,.16); --biru-tua:#93c5fd;
    --kuning-muda:rgba(251,191,36,.16); --kuning-tua:#fcd34d;
    --radius:12px; --radius-lg:18px; --radius-xl:26px;
    --shadow-sm:0 1px 2px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
    --shadow-md:0 18px 40px rgba(2,8,25,.55);
    --lapis:rgba(255,255,255,.05); --lapis-kuat:rgba(255,255,255,.09);
    --input-bg:rgba(255,255,255,.06);
    --aksen-teks:#93c5fd;
    --sukses:#6ee7b7;      --sukses-bg:rgba(52,211,153,.16);   --sukses-garis:rgba(52,211,153,.35);
    --peringatan:#fcd34d;  --peringatan-bg:rgba(251,191,36,.16); --peringatan-garis:rgba(251,191,36,.35);
    --bahaya:#fca5a5;      --bahaya-bg:rgba(248,113,113,.16);  --bahaya-garis:rgba(248,113,113,.4);
    --grafik-tinta:#e6edf8; --grafik-tinta-lembut:#a3b1c9;
    --grafik-garis:rgba(255,255,255,.08); --grafik-permukaan:#151f34;
    --grafik-tooltip:rgba(11,18,32,.95); --grafik-tooltip-garis:rgba(255,255,255,.14);
    --seri-1:#3b82f6; --seri-2:#0d9488; --seri-3:#d97706;
    --latar-lapisan:
      radial-gradient(900px 500px at 10% -10%, rgba(37,99,235,.35), transparent 60%),
      radial-gradient(700px 500px at 100% 10%, rgba(30,64,175,.35), transparent 60%),
      radial-gradient(800px 600px at 50% 110%, rgba(56,189,248,.14), transparent 60%);
    --pilihan-bg:#111a2e; --pilihan-teks:#e6edf8;
    --padat:#151f34; --padat-kepala:#1b2740; --padat-garis:rgba(255,255,255,.10);
    --ic-teal:#5eead4; --ic-blue:#93c5fd; --ic-amber:#fcd34d;
    --ic-pink:#f9a8d4; --ic-green:#6ee7b7; --ic-purple:#c4b5fd;
    --kaca:rgba(21,31,52,.66); --kaca-topbar:rgba(13,20,36,.70);
    --kartu-login:rgba(18,27,46,.76);
    --tombol-utama-bg:#60a5fa; --tombol-utama-teks:#071427; --tombol-utama-bayangan:0 8px 22px rgba(96,165,250,.30);
    --nav-aktif-bg:rgba(96,165,250,.16); --nav-aktif-teks:#bfdbfe;
    --hero-bg:linear-gradient(160deg,#1e40af 0%,#1e3a8a 45%,#111c36 100%);
    --hero-teks:#e6edf8; --hero-teks-lembut:#c7d4ea; --hero-garis:rgba(96,165,250,.35);
    --hero-orb:radial-gradient(circle at 50% 55%,rgba(147,197,253,.55),rgba(96,165,250,.25) 40%,transparent 68%);
    --hero-tombol-bg:rgba(255,255,255,.08); --hero-tombol-garis:rgba(255,255,255,.22);
  }
}

/* ---------- Pilihan manual pengguna (menimpa setelan perangkat) ---------- */
html[data-tema="gelap"]{
    color-scheme:dark;
    --font:'Geist','Inter','Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    --font-judul:'Geist','Inter','Plus Jakarta Sans',system-ui,sans-serif;
    --teal:#60a5fa; --teal-tua:#3b82f6; --teal-muda:rgba(96,165,250,.16); --teal-lembut:rgba(96,165,250,.08); --teal-garis:rgba(96,165,250,.40);
    --teks:#e6edf8; --teks-lembut:#a3b1c9; --teks-samar:#8494b0;
    --garis:rgba(255,255,255,.08); --garis-tua:rgba(255,255,255,.17);
    --bg:#0b1220; --putih:rgba(21,31,52,.66);
    --merah:#f87171; --merah-muda:rgba(248,113,113,.16);
    --biru-muda:rgba(96,165,250,.16); --biru-tua:#93c5fd;
    --kuning-muda:rgba(251,191,36,.16); --kuning-tua:#fcd34d;
    --radius:12px; --radius-lg:18px; --radius-xl:26px;
    --shadow-sm:0 1px 2px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
    --shadow-md:0 18px 40px rgba(2,8,25,.55);
    --lapis:rgba(255,255,255,.05); --lapis-kuat:rgba(255,255,255,.09);
    --input-bg:rgba(255,255,255,.06);
    --aksen-teks:#93c5fd;
    --sukses:#6ee7b7;      --sukses-bg:rgba(52,211,153,.16);   --sukses-garis:rgba(52,211,153,.35);
    --peringatan:#fcd34d;  --peringatan-bg:rgba(251,191,36,.16); --peringatan-garis:rgba(251,191,36,.35);
    --bahaya:#fca5a5;      --bahaya-bg:rgba(248,113,113,.16);  --bahaya-garis:rgba(248,113,113,.4);
    --grafik-tinta:#e6edf8; --grafik-tinta-lembut:#a3b1c9;
    --grafik-garis:rgba(255,255,255,.08); --grafik-permukaan:#151f34;
    --grafik-tooltip:rgba(11,18,32,.95); --grafik-tooltip-garis:rgba(255,255,255,.14);
    --seri-1:#3b82f6; --seri-2:#0d9488; --seri-3:#d97706;
    --latar-lapisan:
      radial-gradient(900px 500px at 10% -10%, rgba(37,99,235,.35), transparent 60%),
      radial-gradient(700px 500px at 100% 10%, rgba(30,64,175,.35), transparent 60%),
      radial-gradient(800px 600px at 50% 110%, rgba(56,189,248,.14), transparent 60%);
    --pilihan-bg:#111a2e; --pilihan-teks:#e6edf8;
    --padat:#151f34; --padat-kepala:#1b2740; --padat-garis:rgba(255,255,255,.10);
    --ic-teal:#5eead4; --ic-blue:#93c5fd; --ic-amber:#fcd34d;
    --ic-pink:#f9a8d4; --ic-green:#6ee7b7; --ic-purple:#c4b5fd;
    --kaca:rgba(21,31,52,.66); --kaca-topbar:rgba(13,20,36,.70);
    --kartu-login:rgba(18,27,46,.76);
    --tombol-utama-bg:#60a5fa; --tombol-utama-teks:#071427; --tombol-utama-bayangan:0 8px 22px rgba(96,165,250,.30);
    --nav-aktif-bg:rgba(96,165,250,.16); --nav-aktif-teks:#bfdbfe;
    --hero-bg:linear-gradient(160deg,#1e40af 0%,#1e3a8a 45%,#111c36 100%);
    --hero-teks:#e6edf8; --hero-teks-lembut:#c7d4ea; --hero-garis:rgba(96,165,250,.35);
    --hero-orb:radial-gradient(circle at 50% 55%,rgba(147,197,253,.55),rgba(96,165,250,.25) 40%,transparent 68%);
    --hero-tombol-bg:rgba(255,255,255,.08); --hero-tombol-garis:rgba(255,255,255,.22);
}

html[data-tema="terang"]{
    color-scheme:light;
    --font:'Geist','Inter','Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    --font-judul:'Geist','Inter','Plus Jakarta Sans',system-ui,sans-serif;
    --teal:#2563eb; --teal-tua:#1d4ed8; --teal-muda:rgba(37,99,235,.12); --teal-lembut:rgba(37,99,235,.06); --teal-garis:rgba(37,99,235,.35);
    --teks:#0f1e33; --teks-lembut:#4b5b75; --teks-samar:#5f7090;
    --garis:rgba(15,30,51,.09); --garis-tua:rgba(15,30,51,.18);
    --bg:#eef3fa; --putih:rgba(255,255,255,.74);
    --merah:#dc2626; --merah-muda:rgba(220,38,38,.10);
    --biru-muda:rgba(37,99,235,.10); --biru-tua:#1d4ed8;
    --kuning-muda:rgba(217,119,6,.13); --kuning-tua:#a16207;
    --radius:12px; --radius-lg:18px; --radius-xl:26px;
    --shadow-sm:0 1px 2px rgba(15,30,51,.05), inset 0 0 0 1px rgba(255,255,255,.55);
    --shadow-md:0 18px 40px rgba(37,99,235,.14);
    --lapis:rgba(37,99,235,.045); --lapis-kuat:rgba(37,99,235,.09);
    --input-bg:rgba(255,255,255,.85);
    --aksen-teks:#1d4ed8;
    --sukses:#0f7a4d;     --sukses-bg:rgba(16,185,129,.12);   --sukses-garis:rgba(16,185,129,.30);
    --peringatan:#b45309; --peringatan-bg:rgba(245,158,11,.14); --peringatan-garis:rgba(245,158,11,.32);
    --bahaya:#b91c1c;     --bahaya-bg:rgba(220,38,38,.10);    --bahaya-garis:rgba(220,38,38,.30);
    --grafik-tinta:#0f1e33; --grafik-tinta-lembut:#5b6b88;
    --grafik-garis:rgba(15,30,51,.08); --grafik-permukaan:#ffffff;
    --grafik-tooltip:rgba(255,255,255,.97); --grafik-tooltip-garis:rgba(15,30,51,.14);
    --seri-1:#3b82f6; --seri-2:#0d9488; --seri-3:#d97706;
    --latar-lapisan:
      radial-gradient(900px 500px at 10% -10%, rgba(90,169,255,.35), transparent 60%),
      radial-gradient(700px 500px at 100% 10%, rgba(190,215,255,.70), transparent 60%),
      radial-gradient(800px 600px at 50% 110%, rgba(147,197,253,.28), transparent 60%);
    --pilihan-bg:#ffffff; --pilihan-teks:#0f1e33;
    --padat:#ffffff; --padat-kepala:#e9f0fa; --padat-garis:rgba(15,30,51,.10);
    --ic-teal:#0f766e; --ic-blue:#1d4ed8; --ic-amber:#b45309;
    --ic-pink:#be185d; --ic-green:#047857; --ic-purple:#6d28d9;
    --kaca:rgba(255,255,255,.72); --kaca-topbar:rgba(255,255,255,.62);
    --kartu-login:rgba(255,255,255,.80);
    --tombol-utama-bg:#0f1e33; --tombol-utama-teks:#ffffff; --tombol-utama-bayangan:0 8px 22px rgba(15,30,51,.22);
    --nav-aktif-bg:#0f1e33; --nav-aktif-teks:#ffffff;
    --hero-bg:linear-gradient(160deg,#5aa9ff 0%,#8ec5ff 45%,#dbeaff 100%);
    --hero-teks:#0f1e33; --hero-teks-lembut:#233a5c; --hero-garis:rgba(255,255,255,.75);
    --hero-orb:radial-gradient(circle at 50% 55%,rgba(255,255,255,.95),rgba(255,255,255,.55) 40%,transparent 68%);
    --hero-tombol-bg:rgba(255,255,255,.55); --hero-tombol-garis:rgba(255,255,255,.9);
}