/*
 * Warna merek PrasFlow: SATU tempat untuk seluruh aplikasi (Tahap 1,
 * 17 Okt 2026). Dimuat di base.html SETELAH Bootstrap, jadi aturan di sini
 * menimpa warna bawaan Bootstrap. Hex merek TIDAK boleh ditulis di template
 * (dicek tes); pakai variabel di bawah atau kelas "primary" Bootstrap.
 *
 * Mengganti warna: ubah nilai di :root saja. Pasangan "-rgb" harus angka
 * yang sama dengan warna hex-nya (Bootstrap butuh bentuk "r, g, b" untuk
 * warna transparan seperti bg-primary dan border-primary).
 *
 * ATURAN KONTRAS (rumus WCAG; AA butuh 4,5:1 untuk teks biasa, 3:1 untuk
 * teks besar / tebal dan garis grafik):
 *   teks putih di atas navy        sekitar 15:1   semua teks
 *   teks putih di atas biru        sekitar 6,5:1  semua teks
 *   teks putih di atas biru terang sekitar 3,4:1  teks BESAR / tebal saja
 *   teks putih di atas cyan        sekitar 1,9:1  TIDAK untuk teks putih
 *   teks putih di atas oranye      sekitar 2,3:1  TIDAK untuk teks putih
 * Di atas cyan dan oranye pakai teks NAVY (sekitar 8:1 dan 6,7:1).
 * Oranye hanya AKSEN (lencana DEMO, garis tipis), bukan warna utama.
 */
:root {
  /* Palet merek */
  --warna-navy: #0A1F5C;           /* = config.WARNA_TEMA (dicek tes) */
  --warna-navy-rgb: 10, 31, 92;
  --warna-biru: #0055D4;
  --warna-biru-rgb: 0, 85, 212;
  --warna-biru-terang: #0090F0;
  --warna-cyan: #1CD0F2;
  --warna-aksen: #F7931E;          /* oranye: aksen saja */
  /* Oranye TUA (Tahap 4c-1): oranye merek yang digelapkan untuk GARIS
     grafik. Oranye merek hanya 2,3:1 di latar putih, terlalu pucat untuk
     garis tipis; yang ini sekitar 4,3:1 (dicek tes, minimal 3:1) */
  --warna-aksen-gelap: #C25E00;

  /* Warna UTAMA aplikasi = biru merek (tombol, tautan, label konteks
     scan). "-gelap" untuk tombol yang disentuh / ditekan (putih di atasnya
     sekitar 8,7:1) */
  --warna-utama: var(--warna-biru);
  --warna-utama-rgb: var(--warna-biru-rgb);
  --warna-utama-gelap: #0044AA;

  --warna-keluar: #dc3545;         /* Batal / Keluar */
  --warna-keluar-gelap: #bb2d3b;

  /* Tombol SIMPAN di form Kelas Saya (Tahap 4a, permintaan pemilik
     proyek: hijau gelap, teks putih, kontras minimal 4,5:1). Putih di
     atasnya sekitar 6,4:1; "-gelap" (disentuh / ditekan) sekitar 9,4:1.
     BUKAN hijau status kamera (#32d74b) dan bukan btn-success Bootstrap
     (#198754, hanya 4,5:1 pas di batas) */
  --warna-simpan: #146C43;
  --warna-simpan-gelap: #0F5132;

  /* Gradasi biru -> cyan HANYA untuk kartu / tombol (header tetap putih).
     Sisi kanan (cyan) terlalu terang untuk teks putih, jadi teks putih
     kecil tidak diletakkan di atas gradasi ini. */
  --gradasi-merek: linear-gradient(135deg, var(--warna-biru) 0%, var(--warna-biru) 35%, var(--warna-cyan) 100%);

  /* LATAR HALAMAN (cek HP Tahap 4a, 18 Okt 2026): gradasi lembut biru
     sangat muda -> cyan sangat muda. Header (logo) dan kartu TETAP putih
     supaya logo jelas dan tidak menyatu dengan latar. Teks yang langsung di
     atas latar ini (judul, tautan "<- Kelas Saya", teks kecil abu-abu) tetap
     minimal 4,5:1 di KEDUA ujung gradasi (dicek tests/test_app.py):
       teks biasa #212529   sekitar 14:1
       teks abu-abu Bootstrap (text-muted, 75% #212529) sekitar 6,4:1
       tautan biru          sekitar 5,7:1
     JANGAN dipakai untuk teks abu-abu #6c757d (text-secondary) langsung di
     atas latar: hanya sekitar 4,2:1 */
  --latar-atas: #EAF2FF;
  --latar-bawah: #E6FAFF;
  --gradasi-latar: linear-gradient(180deg, var(--latar-atas) 0%, var(--latar-bawah) 100%);

  /* Nilai DI BAWAH KKM (Tahap 4b): latar merah muda, teks merah tua
     (sekitar 6,8:1, dicek tes). Sama maknanya dengan merah muda di Excel */
  --warna-kkm-latar: #F8D7DA;
  --warna-kkm-teks: #842029;

  /* Garis grafik (Tahap 4c-1, grafik dari database; templates/kelola/
     grafik.html). Rata-rata kelas per kuartal: Formatif = garis tebal biru
     (6,5:1) titik bulat; Remedi = garis putus-putus oranye tua (4,3:1)
     titik SEGITIGA lebih besar, digambar di atas garis Formatif; Sumatif =
     titik belah ketupat navy (15:1). Perkembangan siswa: Nilai Formatif
     biru titik bulat, Nilai Kuartal navy titik kotak. Semua minimal 3:1
     di latar putih, dan jarak warna setiap pasangan dicek juga untuk buta
     warna (OKLab x100, normal / protan / deutan / tritan, minimal 13;
     tests/test_grafik.py). Angka juga selalu ada di tabel di bawah grafik. */
  --grafik-formatif: var(--warna-biru);
  --grafik-remedi: var(--warna-aksen-gelap);
  --grafik-sumatif: var(--warna-navy);
  --grafik-nilai-formatif: var(--warna-biru);
  --grafik-nilai-kuartal: var(--warna-navy);

  /* "primary" Bootstrap = warna utama: bg-primary, text-primary,
     border-primary, dan tautan ikut berubah */
  --bs-primary: var(--warna-utama);
  --bs-primary-rgb: var(--warna-utama-rgb);
  --bs-link-color: var(--warna-utama);
  --bs-link-color-rgb: var(--warna-utama-rgb);
  --bs-link-hover-color: var(--warna-utama-gelap);
  --bs-danger: var(--warna-keluar);
}

/* Latar seluruh halaman (base.html, body.latar-merek). html diberi warna
   ujung bawah supaya area di bawah halaman pendek / saat HP "memantul"
   tidak putih polos. Halaman scan layar penuh tertutup kamera, jadi
   latarnya tidak terlihat di sana. */
html { background-color: var(--latar-bawah); }
body.latar-merek {
  background-color: var(--latar-atas);
  background-image: var(--gradasi-latar);
  min-height: 100vh;
  min-height: 100dvh;
}

/* Header aplikasi: latar PUTIH dengan logo PrasFlow (gradasi merek hanya
   untuk kartu / tombol), garis bawah tipis sebagai pemisah */
.navbar-merek { background-color: #fff; border-bottom: 1px solid var(--bs-border-color); }
/* Logo di header: tinggi tetap, lebar mengikuti rasio gambar */
.logo-header { height: 32px; width: auto; }

/* Tombol utama (Mulai Scan, Simpan, Selesai dan keluar, ...).
   Warna tombol Bootstrap sudah "dibekukan" saat CSS-nya dibuat, jadi
   variabel tombolnya diisi ulang di sini. */
.btn-primary {
  --bs-btn-bg: var(--warna-utama);
  --bs-btn-border-color: var(--warna-utama);
  --bs-btn-hover-bg: var(--warna-utama-gelap);
  --bs-btn-hover-border-color: var(--warna-utama-gelap);
  --bs-btn-active-bg: var(--warna-utama-gelap);
  --bs-btn-active-border-color: var(--warna-utama-gelap);
  --bs-btn-disabled-bg: var(--warna-utama);
  --bs-btn-disabled-border-color: var(--warna-utama);
  --bs-btn-focus-shadow-rgb: var(--warna-utama-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--warna-utama);
  --bs-btn-border-color: var(--warna-utama);
  --bs-btn-hover-bg: var(--warna-utama);
  --bs-btn-hover-border-color: var(--warna-utama);
  --bs-btn-active-bg: var(--warna-utama-gelap);
  --bs-btn-active-border-color: var(--warna-utama-gelap);
  --bs-btn-disabled-color: var(--warna-utama);
  --bs-btn-disabled-border-color: var(--warna-utama);
  --bs-btn-focus-shadow-rgb: var(--warna-utama-rgb);
}

/* Tombol Batal / Keluar */
.btn-danger {
  --bs-btn-bg: var(--warna-keluar);
  --bs-btn-border-color: var(--warna-keluar);
  --bs-btn-hover-bg: var(--warna-keluar-gelap);
  --bs-btn-hover-border-color: var(--warna-keluar-gelap);
  --bs-btn-active-bg: var(--warna-keluar-gelap);
  --bs-btn-active-border-color: var(--warna-keluar-gelap);
}
.btn-outline-danger {
  --bs-btn-color: var(--warna-keluar);
  --bs-btn-border-color: var(--warna-keluar);
  --bs-btn-hover-bg: var(--warna-keluar);
  --bs-btn-hover-border-color: var(--warna-keluar);
  --bs-btn-active-bg: var(--warna-keluar-gelap);
  --bs-btn-active-border-color: var(--warna-keluar-gelap);
}

/* Kotak centang yang dicentang (mapel di form kelas): warna utama juga */
.form-check-input:checked { background-color: var(--warna-utama); border-color: var(--warna-utama); }

/* Tombol Simpan hijau gelap (form Kelas Saya, tabel nilai) */
.btn-simpan {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--warna-simpan);
  --bs-btn-border-color: var(--warna-simpan);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--warna-simpan-gelap);
  --bs-btn-hover-border-color: var(--warna-simpan-gelap);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--warna-simpan-gelap);
  --bs-btn-active-border-color: var(--warna-simpan-gelap);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--warna-simpan);
  --bs-btn-disabled-border-color: var(--warna-simpan);
  --bs-btn-focus-shadow-rgb: 20, 108, 67;
}

/* Kuning (Timpa, Batalkan simpan terakhir) tetap warna Bootstrap */

/* Lencana aksen oranye (DEMO): teks NAVY, bukan putih (kontras sekitar 6,7:1) */
.badge-aksen { background-color: var(--warna-aksen); color: var(--warna-navy); }

/* Tombol ikon mata di isian kata sandi (templates/_isian_sandi.html):
   minimal 44 px lebar supaya mudah diketuk di HP */
.tombol-lihat-sandi { min-width: 3rem; }

/* Nilai di bawah KKM (Tabel nilai, Tahap 4b) */
.di-bawah-kkm { background-color: var(--warna-kkm-latar) !important; color: var(--warna-kkm-teks) !important; font-weight: 600; }

/* ---------- Label konteks scan + LENCANA kuartal / jenis (Tahap 4c-1) ----------
   Cegah salah kuartal: "Q2 · F1" selalu terlihat mencolok di label
   scanner (juga layar penuh HP), konfirmasi hasil scan, dan rekap sesi.
   Lencana: latar navy, teks putih tebal (sekitar 15:1, dicek tes), garis
   putih tipis supaya tetap terpisah jelas di atas label biru layar penuh.
   Tidak pernah terpotong; teks kelas + mapel yang terpotong "..." di HP. */
.label-konteks { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.label-konteks .teks-konteks { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.label-konteks-bungkus .teks-konteks { white-space: normal; }
.lencana-konteks {
  flex: none; display: inline-block;
  background: var(--warna-navy); color: #fff;
  border: 1px solid #fff; border-radius: .4rem;
  padding: .15rem .5rem; font-size: 1rem; font-weight: 700; line-height: 1.3;
  letter-spacing: .02em; white-space: nowrap;
}
/* Ringkasan BESAR di layar konfirmasi sebelum Mulai Scan: kuartal dan
   jenis penilaian sebagai kotak navy teks putih (sekitar 15:1) */
.ringkasan-kuartal, .ringkasan-jenis {
  display: inline-block; background: var(--warna-navy); color: #fff;
  border-radius: .5rem; padding: .25rem .75rem;
  font-size: 1.6rem; font-weight: 800; letter-spacing: .03em; line-height: 1.3;
}