/* ==========================================================================
   MODE TAMPILAN — terang (bawaan) · gelap · sepia
   --------------------------------------------------------------------------
   Dimuat SETELAH assets/style.css, jadi aturan di sini menimpa warna tema lama
   tanpa menyentuh tata letak yang sudah teruji.

   ATURAN PENTING: seluruh perubahan warna dibatasi `@media screen` supaya
   cetakan (laporan A4/F4, rekap, lembar tanda tangan) tetap hitam-putih di atas
   kertas putih, apa pun mode yang sedang dipakai. Lihat blok @media print di
   bagian bawah sebagai pengaman tambahan.
   ========================================================================== */

/* ---------- Pemilih mode (bilah atas & halaman masuk) ---------- */
.tema-pilih {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--t-permukaan-2, rgba(255, 255, 255, .55));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.tema-pilih-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 12.4px; font-weight: 600;
  color: var(--muted); padding: 6px 11px; border-radius: 999px;
  line-height: 1; min-height: 30px;
}
.tema-pilih-btn:hover { color: var(--ink); }
.tema-pilih-btn.aktif {
  background: linear-gradient(135deg, var(--indigo), var(--violet)); color: #fff;
  box-shadow: 0 8px 18px -12px rgba(79, 70, 229, .9);
}
.tema-ikon { font-size: 13.5px; line-height: 1; }
.tema-pilih-melayang { position: fixed; top: 14px; right: 14px; z-index: 70; }

@media (max-width: 620px) {
  .tema-pilih-btn .tema-label { display: none; }
  .tema-pilih-btn { padding: 8px 11px; min-height: 34px; }
}

@media screen {

  /* ======================= Nilai warna per mode ======================= */
  html[data-tema="gelap"] {
    color-scheme: dark;
    --ink: #E8EAF6;
    --muted: #9EA7C6;
    --line: rgba(148, 163, 184, .22);
    --glass: rgba(23, 29, 52, .72);
    --glass-strong: rgba(28, 35, 63, .88);
    --shadow: 0 18px 40px -22px rgba(0, 0, 0, .85);
    --t-bg:
      radial-gradient(900px 520px at 8% -6%, rgba(99, 102, 241, .22), transparent 62%),
      radial-gradient(760px 460px at 96% 2%, rgba(139, 92, 246, .16), transparent 60%),
      radial-gradient(700px 520px at 44% 106%, rgba(20, 184, 166, .12), transparent 62%),
      #0B1020;
    --t-bilah: rgba(12, 17, 34, .88);
    --t-permukaan: #161C33;
    --t-permukaan-2: #1C2440;
    --t-garis: rgba(148, 163, 184, .20);
    --t-kepala: #1D2544;
    --t-hover: rgba(255, 255, 255, .05);
    --t-isian: #111830;
    --t-bayang: 0 10px 26px -18px rgba(0, 0, 0, .9);
  }
  html[data-tema="sepia"] {
    color-scheme: light;
    --ink: #3B3120;
    --muted: #7C6A4A;
    --line: rgba(124, 100, 62, .28);
    --glass: rgba(255, 251, 243, .78);
    --glass-strong: rgba(255, 252, 246, .93);
    --shadow: 0 18px 40px -22px rgba(94, 70, 38, .38);
    --t-bg:
      radial-gradient(900px 520px at 8% -6%, rgba(214, 163, 92, .26), transparent 62%),
      radial-gradient(760px 460px at 96% 2%, rgba(180, 130, 80, .20), transparent 60%),
      #F3E7D2;
    --t-bilah: rgba(253, 247, 236, .88);
    --t-permukaan: #FFFBF2;
    --t-permukaan-2: #FBF2E0;
    --t-garis: rgba(124, 100, 62, .22);
    --t-kepala: #EFE0C4;
    --t-hover: rgba(124, 100, 62, .07);
    --t-isian: #FFFDF7;
    --t-bayang: 0 10px 26px -20px rgba(94, 70, 38, .45);
  }

  /* ======================= Kerangka halaman ======================= */
  html:is([data-tema="gelap"], [data-tema="sepia"]) body {
    background: var(--t-bg);
    color: var(--ink);
  }
  html:is([data-tema="gelap"], [data-tema="sepia"]) .bg-orb { opacity: .20; }
  html:is([data-tema="gelap"], [data-tema="sepia"]) .topbar {
    background: var(--t-bilah);
    border-bottom-color: var(--t-garis);
  }
  html:is([data-tema="gelap"], [data-tema="sepia"]) .mainnav {
    border-top-color: var(--t-garis);
  }
  html:is([data-tema="gelap"], [data-tema="sepia"]) .mainnav a { color: var(--muted); }
  html:is([data-tema="gelap"], [data-tema="sepia"]) .mainnav a:hover {
    background: var(--t-permukaan); color: var(--ink);
  }
  html:is([data-tema="gelap"], [data-tema="sepia"]) .user-chip {
    background: var(--t-permukaan); border-color: var(--t-garis);
  }
  html:is([data-tema="gelap"], [data-tema="sepia"]) .footer {
    background: var(--t-bilah); border-top-color: var(--t-garis);
  }

  /* ======================= Kartu, tile, tombol ======================= */
  html:is([data-tema="gelap"], [data-tema="sepia"]) .card,
  html:is([data-tema="gelap"], [data-tema="sepia"]) .tile,
  html:is([data-tema="gelap"], [data-tema="sepia"]) .hari-blok {
    background: var(--glass-strong);
    border-color: var(--t-garis);
    box-shadow: var(--t-bayang);
  }
  html:is([data-tema="gelap"], [data-tema="sepia"]) .btn {
    background: var(--t-permukaan); color: var(--ink); border-color: var(--t-garis);
  }
  html:is([data-tema="gelap"], [data-tema="sepia"]) .btn-ghost {
    background: var(--t-permukaan-2); color: var(--ink);
  }
  html:is([data-tema="gelap"], [data-tema="sepia"]) .btn-primary,
  html:is([data-tema="gelap"], [data-tema="sepia"]) .btn-success,
  html:is([data-tema="gelap"], [data-tema="sepia"]) .btn-danger { color: #fff; }
  html:is([data-tema="gelap"], [data-tema="sepia"]) .empty { color: var(--muted); }
  html:is([data-tema="gelap"], [data-tema="sepia"]) .chip {
    background: var(--t-permukaan-2); border-color: var(--t-garis); color: var(--muted);
  }


  /* ======================= Tabel ======================= */
  html:is([data-tema="gelap"], [data-tema="sepia"]) .table-wrap {
    background: var(--t-permukaan); border-color: var(--t-garis);
  }
  html:is([data-tema="gelap"], [data-tema="sepia"]) thead th {
    background: var(--t-kepala); color: var(--muted); border-bottom-color: var(--t-garis);
  }
  html:is([data-tema="gelap"], [data-tema="sepia"]) tbody td { border-bottom-color: var(--t-garis); }
  html:is([data-tema="gelap"], [data-tema="sepia"]) tbody tr:hover { background: var(--t-hover); }

  /* ======================= Kolom isian ======================= */
  html:is([data-tema="gelap"], [data-tema="sepia"]) input[type=text],
  html:is([data-tema="gelap"], [data-tema="sepia"]) input[type=password],
  html:is([data-tema="gelap"], [data-tema="sepia"]) input[type=number],
  html:is([data-tema="gelap"], [data-tema="sepia"]) input[type=email],
  html:is([data-tema="gelap"], [data-tema="sepia"]) input[type=url],
  html:is([data-tema="gelap"], [data-tema="sepia"]) input[type=date],
  html:is([data-tema="gelap"], [data-tema="sepia"]) input[type=time],
  html:is([data-tema="gelap"], [data-tema="sepia"]) input[type=datetime-local],
  html:is([data-tema="gelap"], [data-tema="sepia"]) input[type=search],
  html:is([data-tema="gelap"], [data-tema="sepia"]) input[type=tel],
  html:is([data-tema="gelap"], [data-tema="sepia"]) select,
  html:is([data-tema="gelap"], [data-tema="sepia"]) textarea {
    background: var(--t-isian); color: var(--ink); border-color: var(--t-garis);
  }
  html:is([data-tema="gelap"], [data-tema="sepia"]) select option {
    background: var(--t-isian); color: var(--ink);
  }
  html:is([data-tema="gelap"], [data-tema="sepia"]) input[type=file] {
    background: var(--t-permukaan-2); border-color: var(--t-garis); color: var(--ink);
  }
  html:is([data-tema="gelap"], [data-tema="sepia"]) .logo-slot {
    background: var(--t-permukaan-2); border-color: var(--t-garis);
  }
  /* Kotak pratinjau logo dibiarkan PUTIH di semua mode: logo sekolah/provinsi
     umumnya bergambar gelap dengan latar transparan, jadi akan hilang di latar gelap. */
  html:is([data-tema="gelap"], [data-tema="sepia"]) .logo-slot-preview {
    background: #fff; border-color: var(--t-garis);
  }

  /* ======================= Catatan & kalender mini ======================= */
  html:is([data-tema="gelap"], [data-tema="sepia"]) .blok-note {
    background: var(--t-permukaan-2); border-color: var(--t-garis);
  }
  html:is([data-tema="gelap"], [data-tema="sepia"]) .mini-kalender .tgl {
    background: var(--t-permukaan-2); color: var(--muted); border-color: var(--t-garis);
  }
  html:is([data-tema="gelap"], [data-tema="sepia"]) .keg-baris { border-top-color: var(--t-garis); }

  /* ======================= Lembar laporan tetap kertas putih =======================
     Lembar laporan adalah gambaran hasil cetak, jadi warnanya TIDAK ikut mode
     (teks sudah dipaksa hitam oleh .lkh-sheet), hanya bingkai luarnya yang disesuaikan. */
  html:is([data-tema="gelap"], [data-tema="sepia"]) .lkh-sheet {
    border-color: var(--t-garis);
    box-shadow: var(--t-bayang);
  }

  /* ======================= Khusus mode gelap ======================= */
  html[data-tema="gelap"] .btn-hapus { color: #FCA5A5; }
  html[data-tema="gelap"] .b-abu { background: rgba(148, 163, 184, .18); color: #CBD5E1; }
  html[data-tema="gelap"] .b-kuning { background: rgba(245, 158, 11, .20); color: #FCD34D; }
  html[data-tema="gelap"] .b-merah { background: rgba(239, 68, 68, .22); color: #FCA5A5; }
  html[data-tema="gelap"] .b-biru { background: rgba(59, 130, 246, .24); color: #BFDBFE; }
  html[data-tema="gelap"] .b-hijau { background: rgba(16, 185, 129, .22); color: #A7F3D0; }
  html[data-tema="gelap"] .b-ungu { background: rgba(139, 92, 246, .26); color: #DDD6FE; }
  html[data-tema="gelap"] .alert-info {
    background: rgba(59, 130, 246, .16); border-color: rgba(59, 130, 246, .38); color: #BFDBFE;
  }
  html[data-tema="gelap"] .alert-sukses {
    background: rgba(16, 185, 129, .16); border-color: rgba(16, 185, 129, .38); color: #A7F3D0;
  }
  html[data-tema="gelap"] .alert-galat {
    background: rgba(239, 68, 68, .18); border-color: rgba(239, 68, 68, .40); color: #FCA5A5;
  }
  html[data-tema="gelap"] .alert-peringatan {
    background: rgba(245, 158, 11, .18); border-color: rgba(245, 158, 11, .40); color: #FCD34D;
  }
  html[data-tema="gelap"] .keg-jam { background: rgba(139, 92, 246, .24); color: #DDD6FE; }
  html[data-tema="gelap"] .foto-item img { border-color: var(--t-garis); }
}

/* ==========================================================================
   PENGAMAN CETAK: dalam mode apa pun, kertas tetap putih dan tinta tetap hitam.
   (Sebagian besar aturan mode sudah dibatasi @media screen; blok ini menjaga
   bila ada properti yang tetap berlaku saat mencetak, mis. color-scheme.)
   ========================================================================== */
@media print {
  html[data-tema] { color-scheme: light !important; }
  html[data-tema] body { background: #fff !important; color: #000 !important; }
  .tema-pilih { display: none !important; }
}