/* ═══════════════════════════════════════════════════════════════════════════
   Design token Sistem Informasi Perpustakaan Daarul Jannah
   Seluruh nilai diambil dari §4 dokumen serah-terima desain. Jangan menulis
   nilai hex atau ukuran mentah di file lain — pakai token di sini.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url("../fonts/fonts.8e1b8348976d.css");

:root {
  /* ── Latar & permukaan ─────────────────────────────────────────────────── */
  --bg-canvas: #F5F2EA;
  --bg-surface: #FFFDF8;
  --bg-muted: #F9F7F1;
  --bg-subtle: #EFEADC;
  --bg-subtle-alt: #F1ECE0;
  --bg-terpilih: #EAF2EC;

  /* ── Teks ──────────────────────────────────────────────────────────────── */
  --ink-primary: #1C1B17;
  --ink-secondary: #4A463C;
  --ink-tertiary: #5A554A;
  --ink-tertiary-alt: #6A6558;
  --ink-muted: #7A7568;
  --ink-faint: #9A9484;
  --ink-faint-alt: #8A8474;

  /* ── Garis ─────────────────────────────────────────────────────────────── */
  --border-default: #E2DCCC;
  --border-inner: #EDE8DB;
  --border-row: #F1ECE0;
  --border-strong: #D8D1BF;

  /* ── Merek ─────────────────────────────────────────────────────────────── */
  --green: #1F6B3B;
  --green-hover: #14532B;
  --forest: #16281D;
  --forest-line: #24382B;
  --forest-active: #264734;
  --forest-btn: #1F3A29;
  --forest-dot: #3B5544;
  --gold: #C4A265;

  /* ── Status ────────────────────────────────────────────────────────────── */
  --danger: #A6402F;
  --warning: #8A6620;

  /* ── Medali papan peringkat ────────────────────────────────────────────── */
  /* Peringkat pertama memakai --gold; dua sisanya butuh nadanya sendiri. */
  --medali-perak: #C6C0B0;
  --medali-gangsa: #A97142;

  /* ── Teks di atas forest ───────────────────────────────────────────────── */
  --dark-text: #F7F4EC;
  --dark-text-2: #F0EDE3;
  --dark-text-3: #E8E4D8;
  --dark-muted: #C9C4B4;
  --dark-muted-2: #A9A493;
  --dark-muted-3: #8A8878;

  /* ── Badge status ──────────────────────────────────────────────────────── */
  --badge-aman-bg: #E4EFE7;
  --badge-aman-fg: #1F6B3B;
  --badge-hati-bg: #F6EEDC;
  --badge-hati-fg: #8A6620;
  --badge-bahaya-bg: #F3E3DF;
  --badge-bahaya-fg: #A6402F;
  --badge-netral-bg: #EFEADC;
  --badge-netral-fg: #4A463C;
  --badge-info-bg: #E3EBF2;
  --badge-info-fg: #2E5A78;

  /* ── Grafik ────────────────────────────────────────────────────────────── */
  --chart-track: #EDE8DB;
  --chart-track-gelap: #24382B;

  /* ── Tipografi ─────────────────────────────────────────────────────────── */
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --tracking-judul: -0.02em;
  --tracking-judul-kios: -0.025em;
  --tracking-caps: 0.12em;

  /* ── Radius ────────────────────────────────────────────────────────────── */
  --r-input: 8px;
  --r-kartu: 11px;
  --r-modal: 14px;
  --r-kios: 13px;
  --r-kios-lg: 16px;
  --r-pill: 20px;
  --r-spine: 3px;

  /* ── Spacing ───────────────────────────────────────────────────────────── */
  --pad-konten: 26px;
  --pad-kartu: 16px;
  --pad-kartu-lg: 18px;
  --pad-baris: 12px 18px;
  --gap-kartu: 16px;
  --gap-layout: 18px;
  --gap-kios: 24px;

  /* ── Bayangan ──────────────────────────────────────────────────────────── */
  --shadow-hover: 0 8px 22px rgba(28, 27, 23, 0.09);
  --shadow-drawer: -18px 0 44px rgba(28, 27, 23, 0.14);
  --shadow-modal: 0 26px 60px rgba(28, 27, 23, 0.24);
  --shadow-toast: 0 14px 34px rgba(22, 40, 29, 0.3);

  /* ── Overlay ───────────────────────────────────────────────────────────── */
  --overlay-petugas: rgba(22, 40, 29, 0.34);
  --overlay-siswa: rgba(22, 40, 29, 0.4);
  --overlay-kios: rgba(22, 40, 29, 0.44);

  /* ── Kerangka ──────────────────────────────────────────────────────────── */
  --sidebar-w: 242px;
  --header-h: 66px;
  --header-siswa-h: 70px;
  --header-kios-h: 82px;
  --drawer-w: 456px;
}

/* ═══ Reset ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--ink-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}

button:disabled { cursor: not-allowed; }

a { color: inherit; text-decoration: none; }

input, select, textarea { font: inherit; color: inherit; }

table { border-collapse: collapse; width: 100%; }

img { display: block; max-width: 100%; }

/* ═══ Utilitas dasar ══════════════════════════════════════════════════════ */

.mono { font-family: var(--font-mono); }

/* Ikon garis inline — gambar ada di `apps/core/ikon.py`, dipanggil `{% ikon %}`.
   Warnanya mewarisi `currentColor`, jadi cukup ubah `color` induknya. */
.ikon { display: inline-block; vertical-align: middle; flex: none; }

.ikon--redup  { color: var(--ink-faint); }
.ikon--emas   { color: var(--gold); }
.ikon--aman   { color: var(--green); }
.ikon--hati   { color: var(--warning); }
.ikon--bahaya { color: var(--danger); }

/* Ikon set sengaja hanya menyimpan satu arah tiap bentuk; arah sebaliknya
   diputar di CSS. Dipakai panah "kembali" dan tombol halaman sebelumnya. */
.ikon--balik { transform: rotate(180deg); }

/* Label kapital monospace: header tabel, eyebrow. */
.caps {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.judul-halaman {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: var(--tracking-judul);
}

.judul-kartu {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: var(--tracking-judul);
}

.kartu {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-kartu);
}

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.badge--aman   { background: var(--badge-aman-bg);   color: var(--badge-aman-fg); }
.badge--hati   { background: var(--badge-hati-bg);   color: var(--badge-hati-fg); }
.badge--bahaya { background: var(--badge-bahaya-bg); color: var(--badge-bahaya-fg); }
.badge--netral { background: var(--badge-netral-bg); color: var(--badge-netral-fg); }
.badge--info   { background: var(--badge-info-bg);   color: var(--badge-info-fg); }

/* Punggung buku — warna diisi inline dari `warna_buku` (deterministik per kode). */
.spine {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: var(--r-spine);
  color: var(--bg-surface);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.teks-bahaya { color: var(--danger); }
.teks-hati { color: var(--warning); }
.teks-aman { color: var(--green); }
.teks-muted { color: var(--ink-muted); }

.hanya-layar-pembaca {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ═══ Scrollbar ═══════════════════════════════════════════════════════════ */

* { scrollbar-width: thin; scrollbar-color: #DCD5C4 transparent; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #DCD5C4;
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: content-box;
}

/* ═══ Animasi ═════════════════════════════════════════════════════════════ */

@keyframes riseIn   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes drawerIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes toastIn  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.anim-layar  { animation: riseIn 0.28s ease both; }
.anim-panel  { animation: riseIn 0.22s ease both; }
.anim-drawer { animation: drawerIn 0.26s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.anim-toast  { animation: toastIn 0.22s ease both; }

/* Modal dipusatkan lewat translate(-50%, -50%). Keadaan akhir riseIn adalah
   transform: none, dan karena animasinya memakai fill-mode both, transform itu
   bertahan setelah animasi selesai sehingga modal tergeser ke kanan-bawah.
   Modal karena itu memakai keyframe sendiri yang menjaga titik pusatnya. */
@keyframes riseInPusat {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

.modal.anim-panel { animation-name: riseInPusat; }

@media (prefers-reduced-motion: reduce) {
  .anim-layar, .anim-panel, .anim-drawer, .anim-toast { animation: none; }
  .modal.anim-panel { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ═══ Toast ═══════════════════════════════════════════════════════════════ */

.toast-wrap {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--forest);
  color: var(--dark-text-2);
  border-radius: 10px;
  padding: 13px 20px;
  font-size: 13px;
  box-shadow: var(--shadow-toast);
}

.toast .ikon { color: var(--gold); }

.toast--bahaya .ikon { color: #E08D7C; }

/* Nada ketiga: kabar yang bukan sukses dan bukan kegagalan — "mungkin sudah
   terkirim, periksa dulu". Warnanya diterangkan dari --warning, seperti
   --danger diterangkan di atas: tokennya dipilih untuk latar terang,
   sedangkan toast berlatar hutan. */
.toast--hati .ikon { color: #E5C07B; }

/* ═══ Overlay & modal ═════════════════════════════════════════════════════ */

.overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-petugas);
  z-index: 40;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  background: var(--bg-surface);
  border-radius: var(--r-modal);
  box-shadow: var(--shadow-modal);
  max-height: calc(100vh - 32px);
  overflow: hidden auto;
}