/* =========================================================
   TEMA GELAP
   Aktif bila <html data-tema="gelap"> (tombol bulan di navbar).
   Dimuat paling akhir: menimpa token warna app.css, aurora.css,
   dan orbit.css, lalu warna yang ditulis langsung di ketiganya.
   Lencana status memakai warna aksen yang sama dengan tema terang,
   tetapi latarnya dibuat transparan agar tidak menyilaukan.
   ========================================================= */
html[data-tema="gelap"] {
	color-scheme: dark;

	--o-ungu: #A78BFA;
	--o-ungu-terang: #8B5CF6;
	--o-ungu-lembut: rgba(139, 92, 246, .18);
	--o-biru: #38BDF8;
	--o-biru-lembut: rgba(56, 189, 248, .14);
	--o-hijau: #34D399;
	--o-hijau-lembut: rgba(52, 211, 153, .14);
	--o-jingga: #FBBF24;
	--o-jingga-lembut: rgba(251, 191, 36, .14);
	--o-merah: #FB7185;
	--o-teks: #E6E9F2;
	--o-teks-lembut: #9AA3B8;
	--o-garis: #2A3042;
	--o-permukaan: #171B26;
	--o-latar: #0F121A;
	--o-bayang: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
	--o-bayang-naik: 0 2px 4px rgba(0, 0, 0, .35), 0 16px 34px rgba(0, 0, 0, .4);

	--navy: #A78BFA;
	--blue: #60A5FA;
	--ink: #E6E9F2;
	--muted: #9AA3B8;
	--line: #2A3042;
	--surface: #171B26;
	--background: #0F121A;
	--green: #34D399;
	--orange: #FBBF24;
	--red: #FB7185;
	--aurora-sidebar: #171B26;
	--aurora-hover: rgba(139, 92, 246, .14);
	--aurora-purple-soft: rgba(139, 92, 246, .18);
	--aurora-shadow: 0 10px 30px rgba(0, 0, 0, .35);

	--nav-bayang-panel: 0 4px 10px rgba(0, 0, 0, .35), 0 20px 48px rgba(0, 0, 0, .55);
	--nav-sorot: rgba(167, 139, 250, .28);
	--nav-mark: rgba(250, 204, 21, .32);
	--nav-mark-teks: #FEF9C3;

	--gelap-isian: #10131C;
	--gelap-baris-genap: rgba(255, 255, 255, .02);
	--gelap-baris-hover: rgba(139, 92, 246, .08);
	--gelap-kepala-tabel: #1C2130;
	--gelap-hijau-latar: rgba(52, 211, 153, .14);
	--gelap-biru-latar: rgba(56, 189, 248, .14);
	--gelap-jingga-latar: rgba(251, 191, 36, .14);
	--gelap-merah-latar: rgba(251, 113, 133, .15);
	--gelap-ungu-latar: rgba(167, 139, 250, .16);
	--gelap-abu-latar: rgba(154, 163, 184, .14);
}

/* ---------- Dasar ---------- */
html[data-tema="gelap"] body,
html[data-tema="gelap"] .aplikasi { background: var(--o-latar); color: var(--o-teks); }
html[data-tema="gelap"] .judul-halaman { background: none; }
html[data-tema="gelap"] .eyebrow,
html[data-tema="gelap"] .subjudul-panel { color: var(--o-ungu); }
html[data-tema="gelap"] h1, html[data-tema="gelap"] h2, html[data-tema="gelap"] h3 { color: var(--o-teks); }
html[data-tema="gelap"] .panel-topline { background: transparent; }
html[data-tema="gelap"] .kotak label,
html[data-tema="gelap"] .alat-wa-kolom label,
html[data-tema="gelap"] .filter-laporan label,
html[data-tema="gelap"] .kartu-login label,
html[data-tema="gelap"] .cek-wa { color: var(--o-teks); }

/* ---------- Sidebar ---------- */
html[data-tema="gelap"] .label-menu,
html[data-tema="gelap"] .kategori-induk > span[data-icon],
html[data-tema="gelap"] .kategori-induk .panah-menu,
html[data-tema="gelap"] .tab-btn span { color: #7C859B; }
html[data-tema="gelap"] .kategori-induk,
html[data-tema="gelap"] .tab-btn { color: #B6BDCE; }
html[data-tema="gelap"] .kategori-induk:hover,
html[data-tema="gelap"] .tab-btn:hover { background: rgba(255, 255, 255, .05); color: var(--o-teks); }
html[data-tema="gelap"] .tab-btn.aktif { background: var(--o-ungu-lembut); color: var(--o-ungu); }
html[data-tema="gelap"] .profil { border-color: var(--o-garis); background: #1C2130; }
html[data-tema="gelap"] button.keluar { border-color: rgba(251, 113, 133, .35); background: var(--gelap-merah-latar); color: var(--o-merah); }
html[data-tema="gelap"] .remah .remah-pisah { color: #4B5268; }

/* ---------- Isian formulir ---------- */
html[data-tema="gelap"] input,
html[data-tema="gelap"] select,
html[data-tema="gelap"] textarea { border-color: var(--o-garis); background-color: var(--gelap-isian); color: var(--o-teks); }
html[data-tema="gelap"] input::placeholder,
html[data-tema="gelap"] textarea::placeholder { color: #6B7389; }
html[data-tema="gelap"] input:focus,
html[data-tema="gelap"] select:focus,
html[data-tema="gelap"] textarea:focus { border-color: var(--o-ungu-terang); outline-color: rgba(139, 92, 246, .3); }
html[data-tema="gelap"] input:disabled,
html[data-tema="gelap"] select:disabled,
html[data-tema="gelap"] .periode-aktif select:disabled { background-color: #151925; color: #6B7389; }
html[data-tema="gelap"] input[type="file"]::file-selector-button { border-color: var(--o-garis); background: #1C2130; color: var(--o-teks); }
html[data-tema="gelap"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.8); }

/* ---------- Tombol ---------- */
/* Tombol berlatar ungu penuh memakai ungu yang lebih pekat supaya teks putih tetap terbaca. */
html[data-tema="gelap"] button.tombol-tambah,
html[data-tema="gelap"] .tab-periode-btn.aktif { background: #7C3AED; color: #fff; box-shadow: 0 8px 18px rgba(0, 0, 0, .35); }
html[data-tema="gelap"] button.tombol-tambah:hover { background: #8B5CF6; }
html[data-tema="gelap"] .topbar-avatar,
html[data-tema="gelap"] .avatar,
html[data-tema="gelap"] .avatar-besar,
html[data-tema="gelap"] .brand-mark { background: linear-gradient(135deg, #6D28D9, #8B5CF6); }
html[data-tema="gelap"] .tombol-sekunder,
html[data-tema="gelap"] .tombol-edit,
html[data-tema="gelap"] .tombol-batal,
html[data-tema="gelap"] .tombol-netral { border-color: var(--o-garis); background: #1C2130; color: var(--o-ungu); }
html[data-tema="gelap"] .tombol-sekunder:hover,
html[data-tema="gelap"] .tombol-edit:hover,
html[data-tema="gelap"] .tombol-batal:hover,
html[data-tema="gelap"] .tombol-netral:hover { border-color: var(--o-ungu-terang); background: var(--o-ungu-lembut); }
html[data-tema="gelap"] .tombol-batal,
html[data-tema="gelap"] .tombol-netral { color: var(--o-teks); }
html[data-tema="gelap"] .tombol-netral.tombol-netral-bahaya { border-color: rgba(251, 113, 133, .4); color: var(--o-merah); }
html[data-tema="gelap"] .tombol-netral.tombol-netral-bahaya:hover { background: var(--gelap-merah-latar); }
html[data-tema="gelap"] .tombol-nomor { border-color: #3A4157; background: var(--gelap-isian); color: var(--o-teks); }
html[data-tema="gelap"] .tombol-nomor:hover { background: var(--o-ungu-lembut); }
html[data-tema="gelap"] .tabel-wa tbody tr.baris-diedit td { background: var(--gelap-jingga-latar); }
html[data-tema="gelap"] .tabel-transaksi .aksi-siswa .tombol-edit { border: 0; background: #2563eb; color: #fff; }
html[data-tema="gelap"] .tabel-transaksi .aksi-siswa .tombol-edit:hover { background: #3b82f6; }
html[data-tema="gelap"] .tanpa-nomor { border-color: rgba(251, 191, 36, .4); background: var(--gelap-jingga-latar); color: var(--o-jingga); }
html[data-tema="gelap"] .tanpa-nomor:hover { background: rgba(251, 191, 36, .22); color: var(--o-jingga); }
html[data-tema="gelap"] .tombol-wa:disabled { background: #232838; color: #6B7389; }
html[data-tema="gelap"] .aksi-grid button { border-color: var(--o-garis); background: #1C2130; }
html[data-tema="gelap"] .aksi-grid button:hover { border-color: #4C3F7A; background: #20253A; }
html[data-tema="gelap"] .aksi-grid b { color: var(--o-teks); }
html[data-tema="gelap"] .aksi-grid button > span,
html[data-tema="gelap"] .subjudul-panel > span { background: var(--o-ungu-lembut); color: var(--o-ungu); }

/* ---------- Kartu & panel ---------- */
html[data-tema="gelap"] .kartu-stat,
html[data-tema="gelap"] .panel,
html[data-tema="gelap"] .halaman > .kotak,
html[data-tema="gelap"] .halaman > .sub-halaman > .kotak,
html[data-tema="gelap"] .kartu-login { border-color: var(--o-garis); background: var(--o-permukaan); box-shadow: var(--o-bayang); }
html[data-tema="gelap"] .kartu-klik:hover { border-color: #4C3F7A; box-shadow: var(--o-bayang-naik); }
html[data-tema="gelap"] #halaman-dashboard .kartu-stat p,
html[data-tema="gelap"] #halaman-dashboard .kartu-stat small,
html[data-tema="gelap"] .legenda, html[data-tema="gelap"] .legenda-grafik,
html[data-tema="gelap"] .donat-legenda span, html[data-tema="gelap"] .donat-nama { color: var(--o-teks-lembut); }
html[data-tema="gelap"] #halaman-dashboard .kartu-stat strong,
html[data-tema="gelap"] #halaman-dashboard .panel-heading h2,
html[data-tema="gelap"] .grafik-tugas-angka strong,
html[data-tema="gelap"] .lingkaran strong { color: var(--o-teks); }
html[data-tema="gelap"] #halaman-dashboard .kartu-stat:hover { box-shadow: var(--o-bayang-naik); }
/* Kartu statistik dashboard: aksen tiap kartu sama, latar ikonnya dibuat transparan. */
html[data-tema="gelap"] #halaman-dashboard .kartu-stat.biru { --aksen-lembut: rgba(47, 163, 107, .18); }
html[data-tema="gelap"] #halaman-dashboard .kartu-stat.hijau { --aksen-lembut: rgba(20, 168, 168, .18); }
html[data-tema="gelap"] #halaman-dashboard .kartu-stat.jingga { --aksen-lembut: rgba(66, 133, 244, .2); }
html[data-tema="gelap"] #halaman-dashboard .kartu-stat.ungu { --aksen-lembut: rgba(233, 162, 59, .18); }
html[data-tema="gelap"] .tren-naik { background: var(--gelap-hijau-latar); }
html[data-tema="gelap"] .tren-turun { background: var(--gelap-merah-latar); }
html[data-tema="gelap"] .tab-periode { background: #1C2130; }
html[data-tema="gelap"] .lingkaran { border-color: #232838; }
html[data-tema="gelap"] .grafik-line.grafik-kosong { border-color: var(--o-garis); background: var(--gelap-isian); }

/* Kotak ringkasan laporan tabungan (.kotak-laporan.masuk/keluar/saldo/frekuensi). */
html[data-tema="gelap"] .kotak-laporan.masuk { background: var(--gelap-biru-latar); color: var(--o-biru); }
html[data-tema="gelap"] .kotak-laporan.keluar { background: var(--gelap-merah-latar); color: var(--o-merah); }
html[data-tema="gelap"] .kotak-laporan.saldo { background: var(--gelap-jingga-latar); color: var(--o-jingga); }
html[data-tema="gelap"] .kotak-laporan.frekuensi { background: var(--gelap-ungu-latar); color: var(--o-ungu); }
html[data-tema="gelap"] .kotak-laporan { border-color: transparent; }

/* ---------- Tabel ---------- */
html[data-tema="gelap"] .tabel-wa-scroll,
html[data-tema="gelap"] .tabel-siswa-scroll,
html[data-tema="gelap"] .tabel-tabungan-scroll,
html[data-tema="gelap"] .tabel-pinjaman-scroll { border-color: var(--o-garis); background: var(--o-permukaan); }
html[data-tema="gelap"] .tabel-siswa, html[data-tema="gelap"] .tabel-tabungan, html[data-tema="gelap"] .tabel-pinjaman { background: var(--o-permukaan); }
html[data-tema="gelap"] th,
html[data-tema="gelap"] .tabel-wa th,
html[data-tema="gelap"] .tabel-siswa th, html[data-tema="gelap"] .tabel-tabungan th, html[data-tema="gelap"] .tabel-pinjaman th {
	border-bottom-color: var(--o-garis); background: var(--gelap-kepala-tabel); color: var(--o-teks-lembut);
}
html[data-tema="gelap"] td,
html[data-tema="gelap"] .tabel-wa td,
html[data-tema="gelap"] .tabel-siswa td, html[data-tema="gelap"] .tabel-tabungan td, html[data-tema="gelap"] .tabel-pinjaman td {
	border-bottom-color: #222735; color: #C9CFDC;
}
html[data-tema="gelap"] td strong { color: var(--o-teks); }
html[data-tema="gelap"] .tabel-wa tbody tr:nth-child(even),
html[data-tema="gelap"] .tabel-siswa tbody tr:nth-child(even),
html[data-tema="gelap"] .tabel-tabungan tbody tr:nth-child(even),
html[data-tema="gelap"] .tabel-pinjaman tbody tr:nth-child(even) { background: var(--gelap-baris-genap); }
html[data-tema="gelap"] tbody tr:hover td,
html[data-tema="gelap"] .tabel-wa tbody tr:hover,
html[data-tema="gelap"] .tabel-siswa tbody tr:hover,
html[data-tema="gelap"] .tabel-tabungan tbody tr:hover { background: var(--gelap-baris-hover); }
html[data-tema="gelap"] .tabel-wa tbody tr.baris-ditandai { background: var(--gelap-ungu-latar); }
html[data-tema="gelap"] .tabel-rekap-hadir tfoot td { border-top-color: var(--o-garis); background: var(--gelap-kepala-tabel); color: var(--o-teks); }
html[data-tema="gelap"] .tabel-wa .nomor-urut,
html[data-tema="gelap"] .tabel-tugas .nomor-urut,
html[data-tema="gelap"] .tanpa-transaksi,
html[data-tema="gelap"] .baris-nonaktif td,
html[data-tema="gelap"] .tabel-tugas tbody tr.baris-tugas-selesai td:not(.aksi-siswa) { color: #7C859B; }
html[data-tema="gelap"] .tabel-hadir tbody tr.baris-sakit { background: rgba(251, 191, 36, .07); }
html[data-tema="gelap"] .tabel-hadir tbody tr.baris-izin { background: rgba(56, 189, 248, .07); }
html[data-tema="gelap"] .tabel-hadir tbody tr.baris-alpa,
html[data-tema="gelap"] tr.baris-alpa { background: rgba(251, 113, 133, .07); }
html[data-tema="gelap"] .ket-hadir { color: #C9CFDC; }
html[data-tema="gelap"] .tabel-wa td.nominal-masuk, html[data-tema="gelap"] .tabel-tabungan .nominal-masuk { color: var(--o-hijau); }
html[data-tema="gelap"] .tabel-wa td.nominal-keluar, html[data-tema="gelap"] .tabel-tabungan .nominal-keluar { color: var(--o-merah); }

/* ---------- Lencana status ---------- */
html[data-tema="gelap"] .status,
html[data-tema="gelap"] .tanda-hadir,
html[data-tema="gelap"] .nilai-a,
html[data-tema="gelap"] .status-selesai { background: var(--gelap-hijau-latar); color: var(--o-hijau); }
html[data-tema="gelap"] .status-keluar,
html[data-tema="gelap"] .tanda-alpa,
html[data-tema="gelap"] .nilai-d,
html[data-tema="gelap"] .status-lewat { background: var(--gelap-merah-latar); color: var(--o-merah); }
html[data-tema="gelap"] .tanda-sakit,
html[data-tema="gelap"] .nilai-c,
html[data-tema="gelap"] .status-belum { background: var(--gelap-jingga-latar); color: var(--o-jingga); }
html[data-tema="gelap"] .tanda-izin,
html[data-tema="gelap"] .nilai-b,
html[data-tema="gelap"] .kategori-sekolah { background: var(--gelap-biru-latar); color: var(--o-biru); }
html[data-tema="gelap"] .kategori-pr { background: var(--gelap-ungu-latar); color: var(--o-ungu); }
html[data-tema="gelap"] .nilai-kosong,
html[data-tema="gelap"] .status-nonaktif,
html[data-tema="gelap"] .jumlah-nama { background: var(--gelap-abu-latar); color: var(--o-teks-lembut); }
html[data-tema="gelap"] .hitung-lipat { background: var(--o-ungu-lembut); color: var(--o-ungu); }
html[data-tema="gelap"] .ket-hadir.sakit b { color: var(--o-jingga); }
html[data-tema="gelap"] .ket-hadir.izin b { color: var(--o-biru); }
html[data-tema="gelap"] .ket-hadir.alpa b { color: var(--o-merah); }
html[data-tema="gelap"] .cip-hadir { border-color: rgba(52, 211, 153, .35); background: var(--gelap-hijau-latar); color: var(--o-hijau); }
html[data-tema="gelap"] .cip-sakit { border-color: rgba(251, 191, 36, .35); background: var(--gelap-jingga-latar); color: var(--o-jingga); }
html[data-tema="gelap"] .cip-izin { border-color: rgba(56, 189, 248, .35); background: var(--gelap-biru-latar); color: var(--o-biru); }
html[data-tema="gelap"] .cip-alpa { border-color: rgba(251, 113, 133, .35); background: var(--gelap-merah-latar); color: var(--o-merah); }
html[data-tema="gelap"] .cip-nilai { border-color: rgba(167, 139, 250, .35); background: var(--gelap-ungu-latar); color: var(--o-ungu); }

/* ---------- Kotak info & lipatan ---------- */
html[data-tema="gelap"] .info-excel { border-color: rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .07); color: #9FE3C6; }
html[data-tema="gelap"] .info-excel strong { color: var(--o-hijau); }
html[data-tema="gelap"] .info-excel span { background: rgba(52, 211, 153, .12); }
html[data-tema="gelap"] .info-catatan,
html[data-tema="gelap"] .saldo-pinjaman { border-color: var(--o-garis); background: #1C2130; color: var(--o-teks-lembut); }
html[data-tema="gelap"] .bar-broadcast { border-color: var(--o-garis); background: #1C2130; color: var(--o-teks); }
html[data-tema="gelap"] .bar-broadcast.berjalan { border-color: rgba(251, 191, 36, .4); background: rgba(251, 191, 36, .08); }
html[data-tema="gelap"] .bar-broadcast.berjalan strong { color: var(--o-jingga); }
html[data-tema="gelap"] .bar-broadcast.selesai { border-color: rgba(52, 211, 153, .4); background: rgba(52, 211, 153, .08); }
html[data-tema="gelap"] .bar-broadcast.selesai strong { color: var(--o-hijau); }
html[data-tema="gelap"] .grup-lipat,
html[data-tema="gelap"] .item,
html[data-tema="gelap"] .panel-logo-sistem { border-color: var(--o-garis); background: #141824; }
html[data-tema="gelap"] .grup-lipat > summary:hover { background: rgba(255, 255, 255, .04); }
html[data-tema="gelap"] .status-simpan { border-color: var(--o-garis); background: var(--o-permukaan); color: var(--o-teks); box-shadow: var(--nav-bayang-panel); }
html[data-tema="gelap"] .status-simpan.menyimpan { border-color: rgba(56, 189, 248, .4); background: #13222E; color: var(--o-biru); }
html[data-tema="gelap"] .status-simpan.tersimpan { border-color: rgba(52, 211, 153, .4); background: #13261F; color: var(--o-hijau); }
html[data-tema="gelap"] .status-simpan.gagal { border-color: rgba(251, 113, 133, .4); background: #2A1720; color: var(--o-merah); }
html[data-tema="gelap"] .pesan-login { color: var(--o-merah); }

/* ---------- Grafik (SVG) ---------- */
html[data-tema="gelap"] .line-grid,
html[data-tema="gelap"] .bar-grid,
html[data-tema="gelap"] .dv-grid { stroke: #252A3A; }
html[data-tema="gelap"] .bar-pemisah { stroke: #1E2230; }
html[data-tema="gelap"] .line-guide,
html[data-tema="gelap"] .bar-aksis,
html[data-tema="gelap"] .dv-nol,
html[data-tema="gelap"] .dv-silang { stroke: #3A4157; }
html[data-tema="gelap"] .line-axis-label, html[data-tema="gelap"] .line-label,
html[data-tema="gelap"] .bar-sumbu, html[data-tema="gelap"] .bar-label,
html[data-tema="gelap"] .dv-sumbu, html[data-tema="gelap"] .dv-label { fill: #7C859B; }
html[data-tema="gelap"] .batang-label { color: #7C859B; }
html[data-tema="gelap"] .line-point-dot,
html[data-tema="gelap"] .dv-titik { fill: var(--o-permukaan); }
html[data-tema="gelap"] .line-tooltip rect { fill: #1C2130; stroke: var(--o-garis); }
html[data-tema="gelap"] .line-tooltip text { fill: var(--o-teks); }
html[data-tema="gelap"] .dv-tip { border-color: var(--o-garis); background: #1C2130; color: var(--o-teks); box-shadow: var(--nav-bayang-panel); }

/* ---------- Navbar ---------- */
html[data-tema="gelap"] .notif-bahaya .ikon-notifikasi { background: var(--gelap-merah-latar); }

/* Kartu profil di dalam laci menu (layar HP) memakai permukaan gelap. */
@media (max-width:760px) {
	html[data-tema="gelap"] .sidebar .profil { background: #1C2130; }
}