/* ============================================================
   SIPKL - Global Stylesheet
   Tema : TERANG & BERSIH, modern (hijau - kuning)
   Model tampilan: portal minimal ber-4 kartu peran (dipertahankan)
   ============================================================ */

/* ============================================================
   ABSENSI SELFIE + ANTI FAKE GPS
   ============================================================ */
.kamera-wajah {
  position: absolute;
  left: 50%;
  bottom: .7rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .6rem;
  border-radius: 99px;
  background: rgba(220, 38, 38, .88);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .6);
}

.kamera-wajah.is-ada { background: rgba(22, 163, 74, .9); }
.kamera-wajah.d-none { display: none !important; }

.kamera-viewport { position: relative; }

.kamera-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.absensi-wajah-notice {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .7rem .85rem;
  margin-top: .8rem;
  border: 1px dashed #fca5a5;
  border-radius: 12px;
  background: #fff7f7;
  color: #b91c1c;
  font-size: .74rem;
  line-height: 1.6;
}

.absensi-wajah-notice b { font-weight: 800; }

.btn-lumine:disabled,
.btn-lumine[disabled] {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.35);
  box-shadow: none;
}

.absensi-wajah-notice.is-bebas {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #047857;
}

.absensi-thumb {
  display: inline-block;
  width: 46px;
  height: 46px;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.absensi-thumb-lg { width: 92px; height: 92px; }

.absensi-bukti {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.absensi-bukti small { color: #64748b; font-size: .66rem; }

.absensi-foto-kosong { color: #cbd5e1; font-size: .9rem; }

.absensi-cek {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .7rem;
}

.absensi-cek-item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .6rem;
  border-radius: 99px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  font-size: .7rem;
  font-weight: 700;
}

.absensi-cek-item.is-ok { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.absensi-cek-item.is-bad { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }

/* ============================================================
   PANEL GURU PEMBIMBING - SHELL SATU HALAMAN
   ============================================================ */
.app-shell { min-height: 100vh; background: var(--bg, #f5f7fc); }
.dudi-shell { min-height: 100vh; background: var(--bg, #f5f7fc); }

/* Topbar sticky: sisakan ruang agar isi tidak pernah tertutup */
html { scroll-padding-top: 96px; }
.app-shell section[id],
.app-shell [id^="bagian-"] { scroll-margin-top: 96px; }
.app-main { padding-top: 2px; }
.app-main > .container { padding-top: .9rem !important; }

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #fff;
  border-bottom: 1px solid #e6ecf5;
  box-shadow: 0 2px 10px -6px rgba(15, 23, 42, .25);
}

.app-topbar-in {
  max-width: 1240px;
  margin: 0 auto;
  padding: .5rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  color: #0f172a;
  min-width: 0;
  flex: 1 1 auto;
}

.app-brand-ic {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  font-size: 1.05rem;
}

.app-brand-ic.varian-biru { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.app-brand-ic.varian-ungu { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.app-brand-ic.varian-amber { background: linear-gradient(135deg, #f59e0b, #d97706); }
.app-brand-ic.varian-hijau { background: linear-gradient(135deg, #10b981, #059669); }
.app-brand-ic.varian-rose { background: linear-gradient(135deg, #ec4899, #be185d); }

.app-brand-teks { display: flex; flex-direction: column; min-width: 0; }
.app-brand-teks b { font-size: .95rem; font-weight: 800; line-height: 1.15; }

.app-brand-teks small {
  font-size: .68rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}

.app-topbar-akun { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }

.app-akun {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  max-width: 190px;
  padding: .3rem .6rem;
  border-radius: 99px;
  background: #eef2f7;
  color: #334155;
  font-size: .74rem;
  font-weight: 700;
}

.app-akun i { color: #10b981; }
.app-akun-nama { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app-keluar {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem .7rem;
  border-radius: 9px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: .74rem;
  font-weight: 700;
  text-decoration: none;
}

.app-keluar:hover { background: #fecaca; }

/* ============================================================
   LOGOUT
   ============================================================ */
/* Form logout menggantikan <a href> supaya logout hanya bisa lewat
   POST + token CSRF (lihat auth/logout.php). Formnya display:contents
   supaya tombolnya tetap menjadi anak flex di dalam .app-topbar-akun
   dan .admin-topbar -- dengan begitu jaraknya tidak bergeser. */
.logout-form {
  display: contents;
}

button.app-keluar,
button.admin-logout {
  font-family: inherit;
  appearance: none;
  cursor: pointer;
}

/* .app-keluar tidak pernah menulis properti border, sehingga <a>-nya
   punya border-width 0. Tombol akan mewarisi border outset abu-abu
   dari browser kalau border tidak dihapus di sini. */
button.app-keluar {
  border: 0;
}

button.admin-logout:focus-visible,
button.app-keluar:focus-visible,
button.admin-backup-format:focus-visible,
button.admin-backup-download-button:focus-visible {
  outline: 2px solid var(--admin-ink, currentColor);
  outline-offset: 2px;
}

.app-nav {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 .75rem .55rem;
  display: flex;
  gap: .35rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.app-nav::-webkit-scrollbar { display: none; }

.app-nav a,
.app-nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  flex: 1 1 auto;
  min-width: 120px;
  padding: .45rem .8rem;
  border: 1px solid #dbe3ef;
  border-radius: 11px;
  background: #f8fafc;
  color: #475569;
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.app-nav a i,
.app-nav button i { font-size: .95rem; }
.app-nav a:hover,
.app-nav button:hover { background: #eef2f7; }

.app-nav a.active,
.app-nav button.active {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #047857;
}

/* Konten shell TIDAK boleh memakai margin negatif / max-width dari
   gaya dashboard murid, karena di sini tidak ada .app-header untuk
   ditindih. Tanpa ini, konten meluncur ke bawah topbar sticky. */
.app-shell > .app-main {
  max-width: none;
  margin: 0;
  padding: 0 0 1.5rem;
  position: static;
  z-index: auto;
}

.app-shell > .app-main > * + * { margin-top: 0; }
.app-shell > .app-main > .container { max-width: 1240px; }

/* ---------- Wadah navbar (tab atau dropdown) ---------- */
.app-navbar {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 .75rem .4rem;
}

.app-navbar .app-nav { max-width: none; margin: 0; padding: 0; }

/* ---------- Mode dropdown ---------- */
.app-menu { display: none; position: relative; }

/* ============ PEMILIHAN MODE OTOMATIS (responsif) ============
   PC / Laptop  -> TABS (deretan)
   Tablet / HP  -> DROPDOWN (satu tombol menu)
   ============================================================ */
@media (max-width: 1023.98px), ((pointer: coarse) and (max-width: 1365.98px)) {
  .app-shell .app-nav { display: none !important; }
  .app-shell .app-menu { display: block !important; }
}

/* Default (PC / laptop) */
.app-shell .app-nav { display: flex; }
.app-shell .app-menu { display: none; }

/* Dipaksa oleh JS (sumber kebenaran utama) */
.app-shell.nav-force-tabs .app-nav { display: flex !important; }
.app-shell.nav-force-tabs .app-menu { display: none !important; }
.app-shell.nav-force-dropdown .app-nav { display: none !important; }
.app-shell.nav-force-dropdown .app-menu { display: block !important; }

.app-menu-btn {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .5rem .7rem;
  border: 1px solid #6ee7b7;
  border-radius: 11px;
  background: #ecfdf5;
  color: #047857;
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  text-align: left;
}

.app-menu-btn > i:first-child { font-size: 1rem; }

.app-menu-btn-teks { display: flex; flex-direction: column; line-height: 1.15; flex: 1 1 auto; min-width: 0; }
.app-menu-btn-teks small { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.app-menu-btn-teks b { font-size: .84rem; font-weight: 800; }
.app-menu-chevron { font-size: .8rem; transition: transform .18s; }
.app-menu-btn.is-buka .app-menu-chevron { transform: rotate(180deg); }

.app-menu-list {
  position: absolute;
  z-index: 1040;
  top: calc(100% + .35rem);
  left: 0;
  right: 0;
  padding: .3rem;
  background: #fff;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  box-shadow: 0 18px 40px -20px rgba(15, 23, 42, .45);
  animation: app-menu-muncul .14s ease-out;
}

.app-menu-list[hidden] { display: none; }

@keyframes app-menu-muncul {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.app-menu-list a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .6rem;
  border-radius: 10px;
  text-decoration: none;
  color: #1e293b;
}

.app-menu-list a:hover { background: #f1f5f9; }
.app-menu-list a.active { background: #ecfdf5; }

.app-menu-ic {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #eef2f7;
  color: #475569;
}

.app-menu-list a.active .app-menu-ic { background: #d1fae5; color: #047857; }

.app-menu-teks { display: flex; flex-direction: column; line-height: 1.2; flex: 1 1 auto; min-width: 0; }
.app-menu-teks b { font-size: .84rem; font-weight: 700; }
.app-menu-teks small { font-size: .68rem; color: #94a3b8; }
.app-menu-arrow { font-size: .75rem; color: #cbd5e1; }

@media (max-width: 640px) {
  .app-menu-btn { padding: .45rem .55rem; }
  .app-menu-teks small { font-size: .58rem; }
  .app-menu-teks b { font-size: .78rem; }
}

.app-back {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-bottom: .85rem;
  padding: .3rem .65rem;
  border-radius: 9px;
  background: #eef2f7;
  color: #475569;
  font-size: .75rem;
  font-weight: 700;
  text-decoration: none;
}

.app-back:hover { background: #e2e8f0; }

@media (max-width: 640px) {
  .app-topbar-in { padding: .45rem .75rem; }
  .app-brand-ic { width: 30px; height: 30px; flex-basis: 30px; font-size: .9rem; }
  .app-brand-teks b { font-size: .84rem; }
  .app-brand-teks small { max-width: 34vw; font-size: .6rem; }
  .app-akun { max-width: 32px; padding: .28rem .42rem; }
  .app-akun-nama { display: none; }
  .app-keluar { padding: .32rem .5rem; font-size: .7rem; }
  .app-navbar { padding: 0 .5rem .4rem; gap: .3rem; }
  .app-nav { gap: .3rem; }
  .app-nav a,
  .app-nav button { min-width: 0; padding: .45rem .4rem; font-size: .7rem; }
  .app-nav a span,
  .app-nav button span { overflow: hidden; text-overflow: ellipsis; }
  .app-menu-btn { padding: .45rem .55rem; }
  html { scroll-padding-top: 84px; }
  .app-shell section[id],
  .app-shell [id^="bagian-"] { scroll-margin-top: 84px; }
}

/* ============================================================
   PANEL DUDI - memakai class generik .app-* (lihat blok di atas)
   ============================================================ */
.dudi-topbar { border-bottom-color: #e6ecf5; }
.dudi-toggle-ident i { transition: transform .15s; }

/* ============================================================
   FILTER BAR GENERIK (absensi & jurnal guru)
   Dipakai bersama supaya tidak ada dua set gaya yang melenceng.
   ============================================================ */
.filt-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .8rem 1rem;
  padding: .9rem 1.05rem;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.filt-field {
  display: flex;
  flex-direction: column;
  gap: .28rem;
  min-width: 0;
}

.filt-label {
  color: var(--muted);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1;
}

/* basis lebar per kolom — mencegah select melar memenuhi baris.
   Dihitung agar 5 field + tombol muat dalam container 1240px tanpa
   memaksa baris kedua. */
.filt-dudi  { flex: 1 1 180px; max-width: 240px; }
.filt-murid { flex: 1 1 170px; max-width: 250px; }
.filt-jurusan { flex: 1 1 170px; max-width: 255px; }
.filt-kelas { flex: 1 1 150px; max-width: 215px; }
.filt-bulan { flex: 0 1 165px; }
.filt-hari  { flex: 0 1 140px; }
.filt-sumber { flex: 0 1 170px; }
.filt-status { flex: 0 1 160px; }
.filt-tgl   { flex: 0 1 152px; }

.filt-bar .select-wrap { display: block; }

.filt-bar select.form-field,
.filt-bar select.filter-select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 2.1rem 0 .8rem;
  background: #fff;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
}

/* input tanggal tetap memakai picker bawaan browser, jadi tidak
   diberi appearance:none (menghilangkan ikon kalender) */
.filt-bar input.form-field {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 .6rem;
  background: #fff;
  font-size: .84rem;
  font-weight: 600;
}

.filt-bar select.form-field:disabled {
  color: #94a3b8;
  background: #eef2f7;
  cursor: not-allowed;
}

.filt-bar .select-wrap:has(select:disabled)::after { opacity: .35; }

.filt-actions {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  align-self: flex-end;
  margin-left: auto;
}

.filt-actions .btn-icon { padding: .45rem .7rem; font-size: .8rem; }

.filt-reset {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
}

.filt-reset:hover { color: var(--ink); }

@media (max-width: 700px) {
  .filt-dudi,
  .filt-murid,
  .filt-jurusan,
  .filt-kelas,
  .filt-bulan,
  .filt-hari,
  .filt-sumber,
  .filt-status,
  .filt-tgl { flex: 1 1 100%; max-width: none; }
  .filt-actions { margin-left: 0; width: 100%; }
}

.abs-grid-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.abs-grid { width: 100%; border-collapse: collapse; }

.abs-grid th,
.abs-grid td {
  padding: .5rem .45rem;
  border-bottom: 1px solid #eef2f7;
  white-space: nowrap;
}

.abs-grid thead th {
  color: var(--muted);
  background: #fafbfd;
  font-size: .74rem;
  font-weight: 800;
  text-align: center;
}

.abs-grid tbody tr:last-child td { border-bottom: 0; }
.abs-grid tbody tr:hover td { background: #f8fafc; }

.abs-col-murid {
  min-width: 210px;
  padding-left: .85rem !important;
  background: #f8fafc;
  border-right: 1px solid #dbe3ef;
  text-align: left;
  font-weight: 700;
  color: var(--ink);
}

.abs-col-murid small {
  display: block;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 500;
}

.abs-col-hari { min-width: 54px; text-align: center; }
.abs-col-total { min-width: 46px; text-align: center; }

.abs-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: .1rem .3rem;
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 800;
}

.abs-badge.is-hadir { color: #15803d; background: #dcfce7; }
.abs-badge.is-sakit { color: #b45309; background: #fef3c7; }
.abs-badge.is-izin  { color: #1d4ed8; background: #dbeafe; }
.abs-badge.is-alfa  { color: #b91c1c; background: #fee2e2; }

.abs-kosong { color: #cbd5e1; }

.abs-col-total.is-hadir { color: #16a34a; font-weight: 800; }
.abs-col-total.is-sakit { color: #d97706; font-weight: 800; }
.abs-col-total.is-izin  { color: #2563eb; font-weight: 800; }
.abs-col-total.is-alfa  { color: #dc2626; font-weight: 800; }

/* Penanda "dicatat Instruktur DUDI": cincin di sekeliling badge.
   Absen yang dicatat murid sendiri tidak diberi cincin. */
.abs-badge.dari-dudi { box-shadow: 0 0 0 1.5px #0f172a; }
.abs-col-total.is-mandiri { color: #1d4ed8; font-weight: 800; }
.abs-col-total.is-dudi { color: #7c3aed; font-weight: 800; }
.abs-col-oleh { border-left: 1.5px solid #dbe3ef; }
.abs-grid-subhead th { border-bottom: 1px solid #dbe3ef; }

.abs-grid-dudi tfoot th {
  padding: .5rem .45rem;
  border-top: 1.5px solid #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
  font-size: .72rem;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}
.abs-grid-dudi tfoot th.abs-col-murid { text-align: left; }

.abs-legend-sumber i.is-mandiri { background: #fff; box-shadow: inset 0 0 0 1.5px #94a3b8; }
.abs-legend-sumber i.is-dudi { background: #fff; box-shadow: inset 0 0 0 1.5px #0f172a; }

.abs-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  padding: .75rem .25rem 0;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
}

.abs-legend span { display: inline-flex; align-items: center; gap: .35rem; }

.abs-legend i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  display: inline-block;
}

.abs-legend i.is-hadir { background: #22c55e; }
.abs-legend i.is-sakit { background: #f59e0b; }
.abs-legend i.is-izin  { background: #3b82f6; }
.abs-legend i.is-alfa  { background: #ef4444; }

.abs-grid .empty td { padding: 2.2rem 1rem; text-align: center; color: var(--muted); }

@media (max-width: 900px) {
  .abs-col-murid { position: sticky; left: 0; z-index: 2; }
  .abs-grid thead th.abs-col-murid { z-index: 3; }
}

@media (max-width: 560px) {
  .filt-bar { padding: .8rem .75rem; gap: .65rem .75rem; }
}

/* ============================================================
   PENCARIAN LANGSUNG (LIVE SEARCH) - PANEL ADMIN
   ============================================================ */
.admin-topbar { flex-wrap: wrap; row-gap: .7rem; }
.admin-topbar-judul { flex: 1 1 240px; min-width: 0; }

.admin-cari {
  position: relative;
  flex: 1 1 320px;
  max-width: 420px;
  min-width: 220px;
}

.admin-cari input[type="search"] {
  width: 100%;
  padding: .5rem .8rem .5rem 2.1rem;
  font: inherit;
  font-size: .82rem;
  color: #1e293b;
  background: #f8fafc;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
}

.admin-cari input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

.admin-cari input[type="search"]:focus {
  outline: 0;
  background: #fff;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

.admin-cari-ikon {
  position: absolute;
  left: .7rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: .85rem;
  pointer-events: none;
}

.admin-cari-spinner {
  position: absolute;
  right: .7rem;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid #dbe3ef;
  border-top-color: #2563eb;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.admin-cari.is-memuat .admin-cari-spinner { opacity: 1; animation: admin-cari-putar .7s linear infinite; }

@keyframes admin-cari-putar { to { transform: rotate(360deg); } }

.admin-cari-panel {
  position: absolute;
  z-index: 1080;
  top: calc(100% + .4rem);
  left: 0;
  right: 0;
  max-height: 62vh;
  overflow-y: auto;
  padding: .35rem;
  background: #fff;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  box-shadow: 0 18px 40px -20px rgba(15, 23, 42, .45);
}

.admin-cari-panel[hidden] { display: none; }

.admin-cari-grup { padding: .25rem 0; }
.admin-cari-grup + .admin-cari-grup { border-top: 1px solid #f1f5f9; }

.admin-cari-judul {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .5rem;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #64748b;
}

.admin-cari-judul span {
  margin-left: auto;
  padding: .05rem .35rem;
  border-radius: 99px;
  background: #eef2f7;
  color: #475569;
  font-size: .62rem;
}

.admin-cari-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nama badge" "sub badge";
  gap: .1rem .5rem;
  padding: .45rem .5rem;
  border-radius: 9px;
  text-decoration: none;
  color: #1e293b;
}

.admin-cari-item:hover,
.admin-cari-item.is-aktif { background: #eff6ff; }

/* min-width: 0 pada kolom pertama, dan overflow-wrap pada
   teksnya. Tanpa itu, satu nama siswa atau DUDI yang panjang
   (mis. nama gabungan dengan "(" dan NISN di dalamnya) punya
   min-content lebih lebar dari panel, dan karena panel-nya
   position:absolute, teksnya meluber keluar panel -- bahkan
   sampai keluar topbar. */
.admin-cari-nama {
  grid-area: nama;
  font-size: .8rem;
  font-weight: 700;
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-cari-item small {
  grid-area: sub;
  font-size: .68rem;
  color: #94a3b8;
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-cari-badge {
  grid-area: badge;
  align-self: center;
  padding: .1rem .4rem;
  border-radius: 99px;
  background: #e0e7ff;
  color: #3730a3;
  font-size: .6rem;
  font-weight: 800;
  white-space: nowrap;
}

.admin-cari-kosong {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: 1rem .6rem;
  font-size: .76rem;
  color: #64748b;
}

.admin-cari-kosong b { color: #0f172a; }

body.is-cari-memuat::after {
  content: "";
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #2563eb, #22d3ee, #2563eb);
  background-size: 200% 100%;
  animation: admin-cari-mu 1s linear infinite;
}

@keyframes admin-cari-mu { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ============================================================
   NILAI SISWA (DUDI) - kolom penilaian rubric
   ============================================================ */
.nilai-guard {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .85rem 1rem;
  margin: 1rem 0;
  border: 1px solid #fecaca;
  border-radius: 12px;
  background: #fef2f2;
  color: #b91c1c;
}

.nilai-guard b { display: block; font-size: .82rem; font-weight: 800; }
.nilai-guard span { font-size: .74rem; color: #991b1b; }
.nilai-guard.is-aktif { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.nilai-guard.is-aktif span { color: #065f46; }

.rubrik-box {
  border: 1px solid #c7d7ef;
  border-radius: 12px;
  background: #eef4ff;
  padding: 1rem 1.1rem;
  margin-top: 1rem;
}

.rubrik-box-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.rubrik-box-head .t-ic {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #dbeafe;
  color: #1d4ed8;
}

.rubrik-box-head h4 { margin: 0; font-size: .92rem; font-weight: 800; color: #1e293b; }

.rubrik-badge {
  padding: .15rem .5rem;
  border-radius: 99px;
  background: #e0e7ff;
  color: #3730a3;
  font-size: .64rem;
  font-weight: 800;
}

.rubrik-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  color: #475569;
  font: inherit;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
}

.rubrik-list {
  margin: .8rem 0 0;
  padding-left: 1.1rem;
  color: #1e293b;
  font-size: .78rem;
  line-height: 1.7;
}

.rubrik-list b { font-weight: 800; }
.rubrik-skala { margin-top: .7rem; font-size: .72rem; color: #334155; }

.rubrik-info {
  margin-top: .7rem;
  padding: .6rem .75rem;
  border-radius: 9px;
  background: #fff;
  border: 1px solid #dbe3ef;
  font-size: .7rem;
  color: #475569;
}

.nilai-tips {
  margin-top: 1rem;
  padding: .55rem .8rem;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  font-size: .72rem;
  color: #475569;
}

.nilai-tips b { color: #0f172a; }

table.nilai-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: .78rem;
}

table.nilai-table th {
  padding: .55rem .6rem;
  text-align: center;
  background: #f4f7fb;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  vertical-align: middle;
}

table.nilai-table th.siswa-kolom,
table.nilai-table td.siswa-kolom { text-align: left; }

table.nilai-table td {
  padding: .8rem .6rem;
  border: 1px solid #eef2f7;
  text-align: center;
  color: #1f2937;
  vertical-align: middle;
}

table.nilai-table tbody tr:nth-child(even) td { background: #fbfdff; }

.nilai-rata b { display: block; font-size: .88rem; font-weight: 800; color: #0f172a; }
.nilai-rata span { display: block; font-size: .6rem; color: #94a3b8; }
.nilai-rata i { color: #cbd5e1; font-style: normal; }
.nilai-aksi .btn-lumine { white-space: nowrap; }

table.nilai-table th.aksi-kolom,
table.nilai-table td.aksi-kolom { width: 158px; }

table.nilai-table tr.empty td {
  padding: 1.6rem .6rem;
  color: #94a3b8;
  text-align: center;
  font-size: .78rem;
}

input.nilai-skor {
  display: none;
  width: 100%;
  min-width: 96px;
  max-width: 130px;
  margin: 0 auto;
  padding: .35rem .5rem;
  text-align: center;
  font-size: .82rem;
  font-weight: 700;
  color: #0f172a;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
}

input.nilai-skor:focus {
  outline: 0;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
}

table.nilai-table tr.is-aktif td { background: #fffdf3 !important; }
table.nilai-table tr.is-aktif input.nilai-skor { display: block; }
table.nilai-table tr.is-aktif .nilai-teks { display: none; }
table.nilai-table tr.is-aktif .nilai-rata b { color: #b45309; }

.nilai-aksi-grup {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: .3rem;
  justify-content: center;
  align-items: center;
}

.nilai-aksi-grup .btn { white-space: nowrap; }

.nilai-catatan {
  display: none;
  margin-top: 1rem;
  padding: .9rem 1rem;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #fffdf3;
}

.nilai-catatan.is-aktif { display: block; }

.nilai-catatan .field-label {
  display: block;
  font-size: .74rem;
  font-weight: 800;
  color: #334155;
  margin-bottom: .35rem;
}

.nilai-catatan .nilai-catatan-judul {
  display: block;
  margin: 0 0 .4rem;
  font-size: .74rem;
  font-weight: 800;
  color: #334155;
}

.nilai-catatan textarea {
  display: block;
  width: 100%;
  padding: .6rem .7rem;
  font: inherit;
  font-size: .8rem;
  color: #1f2937;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  resize: vertical;
}

.nilai-catatan textarea:focus {
  outline: 0;
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .18);
}

table.data-table tr.row-absen-murid td { background: #f2f7ff; }
table.data-table tr.row-absen-murid:hover td { background: #e9f1ff; }
table.nilai-table tr.row-absen-murid td { background: #f2f7ff; }

@media (max-width: 800px) {
  .nilai-guard { padding: .7rem .8rem; }
  .rubrik-toggle { margin-left: 0; }
}

:root {
  --bg: #f5f7fc;
  --surface: #ffffff;
  --line: rgba(15, 27, 45, .08);
  --ink: #0b1220;
  --muted: #64748b;
  --green: #10b981;
  --green-2: #059669;
  --green-dark: #047857;
  --amber: #f59e0b;
  --amber-2: #fbbf24;
  --sky: #38bdf8;
  --radius: 18px;
  --shadow: 0 2px 4px rgba(16, 24, 40, .04), 0 14px 34px -18px rgba(16, 24, 40, .16);
  --shadow-lg: 0 24px 60px -28px rgba(16, 24, 40, .28);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  min-height: 100vh;
  background:
    radial-gradient(1100px 560px at 88% -12%, rgba(16, 185, 129, .13), transparent 62%),
    radial-gradient(900px 520px at -12% 18%, rgba(245, 158, 11, .11), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

a { text-decoration: none; }
.text-muted { color: var(--muted) !important; }

/* ============================================================
   NAVBAR INTERNAL (glass)
   ============================================================ */
.navbar.navigasi {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(15, 27, 45, .06);
  padding: .7rem 0;
}
.navigasi .navbar-brand { color: var(--ink); font-weight: 800; letter-spacing: .01em; }
.navigasi .nav-link {
  color: #475569; font-weight: 600; border-radius: 50rem;
  padding: .5rem 1rem !important; margin: 0 .1rem; transition: .2s;
}
.navigasi .nav-link:hover { color: var(--green-dark); background: #f0fdf4; }
.navigasi .navbar-nav .nav-link.active { color: var(--green-dark); background: #ecfdf5; }

.brand-icon {
  width: 38px; height: 38px; border-radius: 12px; color: #fff; font-size: 1.05rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--green), var(--green-2));
  box-shadow: 0 8px 18px -8px rgba(16, 185, 129, .8);
}
.navigasi .nav-link .bi { color: var(--green); }

.btn-glass {
  background: linear-gradient(135deg, var(--green), var(--green-2)); color: #fff; border: none;
  border-radius: 11px; padding: .45rem 1.15rem; font-weight: 600;
  box-shadow: 0 8px 18px -10px rgba(16, 185, 129, .8); transition: .2s;
}
.btn-glass:hover { background: var(--green-dark); color: #fff; transform: translateY(-1px); }

.role-badge {
  display: inline-block; margin-left: .4rem; padding: .22rem .68rem; font-size: .68rem;
  font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  background: linear-gradient(90deg, #ecfdf5, #d1fae5); color: var(--green-dark);
  border: 1px solid #a7f3d0; border-radius: 50rem;
}
@media (min-width: 768px) { .navigasi .role-badge { vertical-align: middle; } }

.badge-soft {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  padding: .42rem 1.05rem; border-radius: 50rem; font-size: .82rem; font-weight: 600;
  box-shadow: 0 2px 10px -6px rgba(16, 24, 40, .25);
}
.badge-soft .bi { color: var(--green); }

/* ============================================================
   TOMBOL
   ============================================================ */
.btn-lumine {
  background: linear-gradient(135deg, #0ea37a, #047857); color: #fff;
  border: none; border-radius: 13px; font-weight: 700;
  box-shadow: 0 14px 26px -12px rgba(5, 150, 105, .75); transition: .2s;
}
.btn-lumine:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 18px 32px -12px rgba(5, 150, 105, .9); }
.btn-lumine:disabled, .btn-lumine.disabled { opacity: .6; }

.btn-ghost-primary {
  background: #f0fdf4; color: var(--green-dark); border: 1px solid #bbf7d0;
  border-radius: 12px; font-weight: 600; transition: .2s;
}
.btn-ghost-primary:hover { background: #d1fae5; color: #065f46; transform: translateY(-1px); }

/* ============================================================
   KARTU STATISTIK
   ============================================================ */
.stat-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem 1.3rem; display: flex; align-items: center; gap: .95rem;
  height: 100%; box-shadow: var(--shadow); transition: .22s;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.stat-card small { color: var(--muted); font-weight: 600; }
.stat-card h3 { font-weight: 800; color: var(--ink); margin-bottom: 0; letter-spacing: .01em; }

.stat-icon {
  width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3rem;
}
.sc-blue   { background: linear-gradient(135deg, #0ea5e9, #38bdf8); box-shadow: 0 12px 22px -12px rgba(14, 165, 233, .7); }
.sc-green  { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 12px 22px -12px rgba(16, 185, 129, .7); }
.sc-orange { background: linear-gradient(135deg, #f59e0b, #f97316); box-shadow: 0 12px 22px -12px rgba(245, 158, 11, .7); }
.sc-purple { background: linear-gradient(135deg, #8b5cf6, #6366f1); box-shadow: 0 12px 22px -12px rgba(139, 92, 246, .7); }

/* ============================================================
   THUMB & CHECK STATUS
   ============================================================ */
.thumb-foto {
  width: 46px; height: 46px; object-fit: cover; border-radius: 12px;
  border: 1px solid var(--line); cursor: zoom-in; transition: .2s;
}
.thumb-foto:hover { transform: scale(1.07); box-shadow: 0 10px 20px -10px rgba(16, 24, 40, .45); }

.form-check-status {
  background: #f8fafc; border: 1px solid var(--line); border-radius: 12px;
  padding: .6rem 1rem; margin: 0; transition: .15s;
}
.absensi-status {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
}
.absensi-status .form-check-status {
  /* min-width: 152px dihapus. Dua dari tiga opsi dalam satu
     baris butuh 152 + 152 + 22 (gap) = 326px; pada layar 320px
     bahkan dua pun tidak muat, dan karena .absensi-status
     memakai flex-wrap, barisnya jadi 2 + 1 yang terlihat
     tidak rapi. Padding kiri 2.6rem tetap menjaga kotak centang
     tidak bertabrakan dengan teks. */
  margin: 0;
  padding: .6rem 1.4rem .6rem 2.6rem;
}
.absensi-status .form-check-input {
  margin-left: -1.9rem;
}
.form-check-status:hover { border-color: #6ee7b7; background: #ecfdf5; }
.form-check-status .form-check-input:checked { background-color: var(--green); border-color: var(--green); }

/* ============================================================
   HALAMAN DEPAN (PORTAL) - model: logo -> judul -> 4 kartu -> footer
   ============================================================ */
.portal {
  position: relative;
  max-width: 1040px; margin: 0 auto; padding: 3.6rem 1.25rem 4.2rem; text-align: center;
}
/* dekorasi lembut di belakang konten */
.portal-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); }
.blob-g { width: 520px; height: 520px; top: -170px; left: -130px;
  background: radial-gradient(circle at 30% 30%, rgba(16, 185, 129, .30), transparent 62%); }
.blob-a { width: 480px; height: 480px; top: -120px; right: -150px;
  background: radial-gradient(circle at 60% 30%, rgba(245, 158, 11, .26), transparent 62%); }
.blob-s { width: 380px; height: 380px; bottom: -160px; left: 38%;
  background: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, .18), transparent 60%); }
.mesh {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(15, 23, 42, .06) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 30%, transparent 78%);
          mask-image: radial-gradient(circle at 50% 30%, #000 30%, transparent 78%);
}

.portal-head { animation: rise .7s ease both; }
.portal-logo {
  width: 96px; height: 96px; margin: 0 auto 1.4rem; border-radius: 28px;
  background: linear-gradient(135deg, #10b981, #047857); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 2.7rem;
  box-shadow: 0 28px 52px -22px rgba(5, 150, 105, .65), inset 0 1px 0 rgba(255, 255, 255, .35);
  position: relative;
}
.portal-logo::after {
  content: ""; position: absolute; inset: -9px; border-radius: 34px;
  border: 1.5px dashed rgba(16, 185, 129, .35); animation: spin 22s linear infinite;
}
.portal-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 28px;
  background: #fff;
  padding: 6px;
}
.portal h1 {
  font-size: clamp(1.8rem, 4.2vw, 2.7rem); font-weight: 800; letter-spacing: .015em; margin: 0;
  line-height: 1.15;
}
.portal h1 .accent {
  background: linear-gradient(90deg, #059669, #10b981 45%, #f59e0b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.portal .sub { color: var(--muted); font-weight: 600; margin: .7rem 0 0; }
.portal .tahun {
  display: inline-block; margin-left: .35rem; padding: .28rem .85rem; border-radius: 50rem;
  background: linear-gradient(90deg, #fef3c7, #fffbeb); color: #b45309; font-weight: 700;
  font-size: .8rem; border: 1px solid #fde68a;
}
.portal .label {
  margin: 2.7rem 0 1.2rem; font-weight: 800; color: #334155;
  letter-spacing: .4em; text-transform: uppercase; font-size: .95rem;
}
.portal .label::after {
  content: ""; display: block; width: 60px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--green), var(--amber));
  margin: .7rem auto 0;
}

.portal .row > * { animation: rise .6s ease both; }
.portal .row > *:nth-child(1) { animation-delay: .12s; }
.portal .row > *:nth-child(2) { animation-delay: .2s; }
.portal .row > *:nth-child(3) { animation-delay: .28s; }
.portal .row > *:nth-child(4) { animation-delay: .36s; }

.role-card {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: 1.8rem 1.55rem; height: 100%; color: var(--ink); text-align: left;
  display: flex; flex-direction: column; transition: .24s; box-shadow: var(--shadow);
}
.role-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; opacity: 0;
  background: var(--rc, var(--green)); transition: .24s;
}
.role-card::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: .24s;
  background: radial-gradient(360px 220px at 20% 0%, var(--rc-soft, rgba(16, 185, 129, .10)), transparent 70%);
}
.role-card:hover { transform: translateY(-6px); color: var(--ink); }
.role-card:hover::before { opacity: 1; }
.role-card:hover::after { opacity: 1; }

.rc-g { --rc: #10b981; --rc-soft: rgba(16, 185, 129, .14); }
.rc-a { --rc: #f59e0b; --rc-soft: rgba(245, 158, 11, .14); }
.rc-s { --rc: #38bdf8; --rc-soft: rgba(56, 189, 248, .14); }
.rc-d { --rc: #475569; --rc-soft: rgba(71, 85, 105, .14); }

.rc-g:hover { border-color: #6ee7b7; box-shadow: 0 34px 54px -26px rgba(16, 185, 129, .45); }
.rc-a:hover { border-color: #fde68a; box-shadow: 0 34px 54px -26px rgba(245, 158, 11, .45); }
.rc-s:hover { border-color: #bae6fd; box-shadow: 0 34px 54px -26px rgba(56, 189, 248, .45); }
.rc-d:hover { border-color: #cbd5e1; box-shadow: 0 34px 54px -26px rgba(71, 85, 105, .4); }

.role-card .role-num {
  position: absolute; top: .85rem; right: 1.1rem; font-size: .72rem; font-weight: 800;
  letter-spacing: .12em; color: #cbd5e1;
}
.card-thumb {
  width: 54px; height: 54px; border-radius: 16px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.45rem; margin-bottom: 1.05rem; position: relative; z-index: 1;
}
.c1 { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 14px 24px -12px rgba(16, 185, 129, .75); }
.c2 { background: linear-gradient(135deg, #f59e0b, #f97316); box-shadow: 0 14px 24px -12px rgba(245, 158, 11, .75); }
.c3 { background: linear-gradient(135deg, #0ea5e9, #22d3ee); box-shadow: 0 14px 24px -12px rgba(14, 165, 233, .75); }
.c4 { background: linear-gradient(135deg, #475569, #0f172a); box-shadow: 0 14px 24px -12px rgba(15, 23, 42, .6); }
.role-card h5 { font-weight: 800; position: relative; z-index: 1; }
.role-card .desc { color: var(--muted); font-size: .9rem; margin-bottom: 0; position: relative; z-index: 1; }
.role-card .role-meta {
  margin-top: auto; padding-top: 1.25rem; display: flex; align-items: center;
  justify-content: flex-end; position: relative; z-index: 1;
}
.badge-login {
  background: #ecfdf5; color: var(--green-dark); font-size: .75rem; font-weight: 700;
  border-radius: 50rem; padding: .36rem .9rem; display: inline-flex; align-items: center; gap: .35rem;
}
.role-card .arrow { color: var(--rc, var(--green)); font-weight: 800; font-size: 1.05rem; transition: .22s; }
.role-card:hover .arrow { transform: translateX(5px); }

.portal-footer {
  border-top: 1px solid rgba(15, 27, 45, .06); padding: 1.3rem 1rem; text-align: center;
  color: var(--muted); font-size: .85rem; background: rgba(255, 255, 255, .65);
  backdrop-filter: blur(10px);
}
.portal-footer .bi { color: var(--green); }

/* ============================================================
   HALAMAN LOGIN (glass card)
   ============================================================ */
.auth-body {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(900px 520px at 80% -10%, rgba(16, 185, 129, .16), transparent 60%),
    radial-gradient(760px 480px at 12% 100%, rgba(245, 158, 11, .14), transparent 55%),
    #f5f7fc;
  padding: 2rem 1rem; position: relative;
}
.auth-body::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(15, 23, 42, .05) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 20%, transparent 75%);
          mask-image: radial-gradient(circle at 50% 40%, #000 20%, transparent 75%);
}
.auth-wrap { width: 100%; max-width: 440px; position: relative; }
.auth-back {
  display: inline-flex; align-items: center; gap: .4rem; color: var(--muted);
  font-weight: 600; font-size: .9rem; margin-bottom: .95rem;
  background: rgba(255, 255, 255, .8); border: 1px solid var(--line);
  padding: .4rem 1rem; border-radius: 50rem; transition: .2s;
}
.auth-back:hover { color: var(--green-dark); border-color: #a7f3d0; }
.auth-card {
  border-radius: 24px; padding: 2rem 2.1rem;
  border: 1px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, rgba(16, 185, 129, .35), rgba(245, 158, 11, .25)) border-box;
  box-shadow: 0 30px 70px -34px rgba(16, 24, 40, .3) !important;
}
.auth-head .auth-icon {
  width: 60px; height: 60px; border-radius: 18px; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem;
}
.auth-head h4 { letter-spacing: .01em; }
.auth-tabs { flex-wrap: wrap; gap: .35rem; }
.auth-tabs .nav-link {
  flex: 1; border-radius: 12px; font-weight: 700; color: #475569;
  background: #f4f6fa; border: 1px solid var(--line); transition: .2s;
}
.auth-tabs .nav-link.active {
  color: #fff; background: linear-gradient(135deg, #10b981, #047857);
  box-shadow: 0 10px 20px -10px rgba(16, 185, 129, .8); border-color: transparent;
}
.auth-hint {
  margin-top: 1.15rem; padding: .75rem 1rem; border-radius: 13px;
  background: linear-gradient(90deg, #f0fdf4, #ecfdf5); border: 1px solid #bbf7d0;
  color: #065f46; font-size: .85rem; border-left: 4px solid var(--green);
}

/* ============================================================
   KOMPONEN KAMERA (KameraApp / assets/js/kamera.js)
   ============================================================ */
.kamera-app .kamera-viewport {
  position: relative; border-radius: 18px; overflow: hidden;
  background: #0b1220; min-height: 260px; border: 2px dashed #6ee7b7;
}
/* aspect-ratio 16/9, bukan tinggi tetap 300px. Stream diminta
   pada 1280x720. Kotak 300px di dalam wadah 700px punya rasio 2,33
   -- lebih lebar dari stream -- sehingga object-fit:cover memotong
   sekitar 25% tinggi frame, sedangkan overlay bingkai landmark
   digambar memakai koordinat frame PENUH. Akibatnya kotak yang
   terlihat di layar tidak sama dengan wajah yang dianalisa, dan
   syarat "wajah di tengah bingkai" menolak wajah yang secara
   visual sudah pas. Samakan rasionya di semua ukuran layar. */
.kamera-app video {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 46vh;
  object-fit: cover;
  display: block;
}
.kamera-geo {
  position: absolute; left: 12px; bottom: 12px;
  background: rgba(11, 18, 32, .82); color: #fff; font-size: .82rem;
  border-radius: 9px; padding: .35rem .75rem; max-width: calc(100% - 24px);
}
.kamera-preview { border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); }
.kamera-preview img { width: 100%; display: block; }
.kamera-preview-caption { background: #0b1220; color: #cbd5e1; font-size: .8rem; text-align: center; padding: .5rem; }
.kamera-aksi { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.k-btn {
  border-radius: 11px; font-weight: 700; display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1.25rem; transition: .18s;
}
.k-btn-mulai { background: linear-gradient(135deg, #10b981, #047857); color: #fff; border: none; box-shadow: 0 10px 20px -10px rgba(16, 185, 129, .8); }
.k-btn-mulai:hover:not(:disabled) { color: #fff; transform: translateY(-1px); }
.k-btn-jepret { background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff; border: none; box-shadow: 0 10px 20px -10px rgba(245, 158, 11, .8); }
.k-btn-jepret:hover:not(:disabled) { color: #fff; transform: translateY(-1px); }
.k-btn-ulang { background: #e8ecf4; color: #0b1220; border: none; }
.k-btn:disabled { opacity: .45; cursor: not-allowed; }
.kamera-info { margin-top: .8rem; font-size: .9rem; min-height: 1.4rem; }

/* ============================================================
   ANIMASI
   ============================================================ */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .portal-logo::after, .portal .row > *, .portal-head { animation: none; }
}

/* ============================================================
   KOMPONEN HALAMAN MODUL (murid & lainnya) - gaya modern
   ============================================================ */
.page-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: .8rem; margin-bottom: 1.2rem;
}
.page-head h4 { margin: 0; font-weight: 800; }
.page-head .lead { color: var(--muted); font-size: .95rem; margin: .15rem 0 0; }

.app-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow); overflow: hidden;
}
.app-card .app-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1rem 1.35rem; border-bottom: 1px solid var(--line);
}
.app-card .app-card-head h6 { margin: 0; font-weight: 800; }
.app-card .app-card-body { padding: 1.35rem; }
.app-card .app-card-body.flat { padding: 0; }

/* Banner sambutan di dashboard */
.welcome-band {
  position: relative; border-radius: 20px; overflow: hidden; color: #fff;
  margin-bottom: 1.6rem; padding: 1.6rem 1.9rem;
  background: linear-gradient(120deg, #065f46 0%, #059669 55%, #10b981 100%);
  box-shadow: 0 24px 46px -22px rgba(5, 150, 105, .6);
}
.welcome-band::before, .welcome-band::after {
  content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .1);
}
.welcome-band::before { right: -60px; top: -60px; width: 230px; height: 230px; }
.welcome-band::after { right: 60px; bottom: -95px; width: 190px; height: 190px; }
.welcome-band .eyebrow { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; opacity: .85; font-weight: 700; }
.welcome-band h4 { font-weight: 800; margin: .2rem 0; position: relative; z-index: 1; }
.welcome-band .lead { color: rgba(255, 255, 255, .9); margin: 0; position: relative; z-index: 1; }
.welcome-band .btn-light { font-weight: 700; position: relative; z-index: 1; }

/* Tombol aksi cepat */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem; }
.quick-tile {
  display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.25rem;
  background: #f7fafc; border: 1px solid var(--line); border-radius: 15px; color: var(--ink);
  font-weight: 700; transition: .2s;
}
.quick-tile i { color: var(--green); font-size: 1.35rem; }
.quick-tile small { color: var(--muted); font-weight: 600; }
.quick-tile:hover {
  border-color: #6ee7b7; background: #f0fdf4; transform: translateY(-3px);
  box-shadow: 0 16px 30px -18px rgba(16, 185, 129, .5); color: var(--ink);
}

/* Header kartu bergradien (info DUDI) */
.tile-band {
  color: #fff; padding: 1.35rem 1.35rem; position: relative; overflow: hidden;
  background: linear-gradient(120deg, #059669, #10b981);
}
.tile-band.sky   { background: linear-gradient(120deg, #0284c7, #38bdf8); }
.tile-band.amber { background: linear-gradient(120deg, #d97706, #f59e0b); }
.tile-band.slate { background: linear-gradient(120deg, #334155, #64748b); }
.tile-band::after {
  content: ""; position: absolute; right: -30px; top: -45px;
  width: 150px; height: 150px; border-radius: 50%; background: rgba(255, 255, 255, .12);
}
.tile-band .bi { font-size: 1.9rem; }
.tile-band h6 { margin: 0; font-weight: 800; }
.tile-band small { color: rgba(255, 255, 255, .92); }

/* Baris info label:nilai */
.info-list { display: flex; flex-direction: column; }
.info-list .info-row { display: flex; gap: .75rem; padding: .62rem 0; align-items: baseline; }
.info-list .info-row + .info-row { border-top: 1px dashed var(--line); }
.info-row .k { flex: 0 0 96px; color: var(--muted); font-weight: 600; font-size: .86rem; }
.info-row .v { color: var(--ink); font-weight: 600; word-break: break-word; }

/* Daftar jurnal ala timeline */
.jurnal-list .jl { display: flex; gap: 1rem; padding: 1.05rem 1.35rem; align-items: flex-start; }
.jurnal-list .jl + .jl { border-top: 1px solid var(--line); }
.jl .jl-date {
  flex: 0 0 82px; text-align: center; border-radius: 13px; background: #f1f5f9;
  padding: .5rem .3rem; align-self: stretch;
}
.jl .jl-date b { display: block; font-size: 1.05rem; color: var(--green-dark); }
.jl .jl-date span { font-size: .66rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.jl .jl-main { flex: 1; min-width: 0; }
.jl .jl-main .text-muted { font-size: .86rem; }
.jl .jl-foto { flex: 0 0 56px; }

.empty-state { text-align: center; color: var(--muted); padding: 2.2rem 1rem; }
.empty-state .bi { font-size: 2.1rem; color: #cbd5e1; }
.empty-state .tl { font-weight: 700; color: #475569; }

/* Chip rekap singkat (absensi bulan ini) */
.chip-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .85rem; }
.chip-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 1rem 1.1rem; display: flex; align-items: center; gap: .8rem; box-shadow: var(--shadow);
}
.chip-card .cc-ic {
  width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center;
  justify-content: center; color: #fff; font-size: 1.15rem; flex: 0 0 42px;
}
.cc-green  { background: linear-gradient(135deg, #10b981, #059669); }
.cc-amber  { background: linear-gradient(135deg, #f59e0b, #f97316); }
.cc-sky    { background: linear-gradient(135deg, #38bdf8, #0284c7); }
.cc-slate  { background: linear-gradient(135deg, #64748b, #334155); }
.cc-red    { background: linear-gradient(135deg, #ef4444, #dc2626); }
.chip-card b { font-size: 1.25rem; font-weight: 800; display: block; line-height: 1.1; }
.chip-card small { color: var(--muted); font-weight: 600; }

/* ============================================================
   HALAMAN BERANDA MURID (adaptasi referensi navy + emas)
   ============================================================ */
.app-header {
  position: relative; z-index: 0; color: #fff;
  background: linear-gradient(160deg, #131b33 0%, #1a264a 55%, #23325c 100%);
  padding: 1.3rem 1rem 4.4rem; border-bottom: 4px solid var(--amber);
}
.app-header .topbar {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  max-width: 1000px; margin: 0 auto; position: relative; z-index: 2;
}
.btn-ghost-light {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid rgba(148, 163, 184, .45); color: #e2e8f0; border-radius: 10px;
  padding: .42rem 1rem; font-size: .86rem; font-weight: 600; background: rgba(255, 255, 255, .04);
  transition: .2s;
}
.btn-ghost-light:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.app-head { text-align: center; max-width: 720px; margin: 0 auto; margin-top: .9rem; }
.app-logo {
  width: 92px; height: 92px; margin: 0 auto 1.05rem; border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #047857); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  box-shadow: 0 0 0 3px #fff, 0 18px 34px -16px rgba(0, 0, 0, .55);
}
.app-logo i { font-size: 1.5rem; }
.app-logo b { font-size: .66rem; letter-spacing: .24em; }
.app-head h1 {
  font-weight: 800; letter-spacing: .02em; line-height: 1.15;
  font-size: clamp(1.5rem, 4vw, 2.3rem); margin: 0;
}
.app-head .school { color: var(--amber-2); font-weight: 800; letter-spacing: .12em; font-size: 1rem; margin: .3rem 0 0; }
.app-head .tp { color: #cbd5e1; font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 600; margin-top: .35rem; }

.app-header ~ .app-main { max-width: 1000px; margin: -3.1rem auto 0; padding: 0 1rem 3rem; position: relative; z-index: 2; }
.app-header ~ .app-main > * + * { margin-top: 1.2rem; }

.gold-top { height: 5px; background: linear-gradient(90deg, var(--amber), var(--amber-2)); }
.card-block { padding: 1.4rem 1.6rem; }
.card-title-row { display: flex; align-items: center; gap: .7rem; }
.card-title-row .t-ic {
  width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center;
  justify-content: center; color: #fff; font-size: 1.02rem;
  background: linear-gradient(135deg, #10b981, #047857);
}
.card-title-row h3 { margin: 0; font-weight: 800; font-size: 1.05rem; }
.card-sub { color: var(--muted); font-size: .86rem; margin: .2rem 0 0; }

.search-group { display: flex; margin: 1.15rem 0; max-width: 560px; }
.search-group input {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-right: 0; border-radius: 12px 0 0 12px;
  padding: .62rem 1rem; font-weight: 700; letter-spacing: .03em; background: #fbfcfe; color: var(--ink);
}
.search-group input:focus { outline: none; border-color: #6ee7b7; }
.search-group .btn-cari {
  border: 0; border-radius: 0 12px 12px 0; padding: .62rem 1.4rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #10b981, #047857); display: inline-flex; align-items: center; gap: .5rem;
}
.search-group .btn-cari:hover { filter: brightness(1.12); }

.green-top { height: 5px; background: linear-gradient(90deg, var(--green-2), var(--amber)); }

.ident-grid { background: #f7f9fc; border: 1px solid var(--line); border-radius: 14px; padding: 1.15rem 1.3rem; }
.ident-grid .ig { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem 1.8rem; }
.ident-grid .ti { text-transform: uppercase; color: #94a3b8; font-size: .68rem; letter-spacing: .08em; font-weight: 700; }
.ident-grid .v { color: var(--ink); font-weight: 800; font-size: .95rem; word-break: break-word; }
@media (max-width: 640px) { .ident-grid .ig { grid-template-columns: 1fr; } }

.seg-tabs {
  display: flex; flex-wrap: wrap; gap: .3rem; background: #eef1f6; border: 1px solid var(--line);
  padding: .3rem; border-radius: 14px;
}
.seg-tabs button, .seg-tabs a {
  flex: 1 1 150px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .68rem 1rem; border: 0; border-radius: 11px; font-weight: 700; color: #64748b;
  background: transparent; font-size: .9rem; transition: .18s; white-space: nowrap;
}
.seg-tabs button.active, .seg-tabs a.active { background: #fff; color: var(--green-dark); box-shadow: 0 6px 14px -8px rgba(16, 24, 40, .35); }
.seg-tabs button:hover, .seg-tabs a:hover { color: var(--green-dark); }

.field-label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: .45rem; }
.form-field {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: .68rem 1rem;
  background: #fbfcfe; color: var(--ink); font-size: .92rem;
}
.form-field:focus { outline: none; border-color: #6ee7b7; background: #fff; }
textarea.form-field { resize: vertical; min-height: 84px; }

.btn-gold {
  width: 100%; border: 0; border-radius: 12px; padding: .85rem 1rem; font-weight: 800;
  letter-spacing: .06em; color: #3b2d0d; cursor: pointer;
  background: linear-gradient(135deg, #efb64a, #d69a34);
  box-shadow: 0 14px 26px -14px rgba(198, 146, 56, .9); transition: .2s;
}
.btn-gold:hover { filter: brightness(1.07); color: #3b2d0d; transform: translateY(-1px); }

.filterbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.select-wrap { position: relative; }
select.filter-select {
  -webkit-appearance: none; appearance: none; border: 1px solid var(--line); border-radius: 10px;
  padding: .5rem 2.1rem .5rem .9rem; font-size: .86rem; font-weight: 600; color: #334155;
  background: #fff; cursor: pointer;
}
.select-wrap::after {
  content: ""; position: absolute; top: 50%; right: .8rem; transform: translateY(-50%);
  border: 5px solid transparent; border-top-color: #64748b;
}
.btn-icon {
  border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: .5rem .85rem;
  color: #475569; display: inline-flex; align-items: center; gap: .4rem;
}
.btn-icon:hover { background: #f1f5f9; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left; font-weight: 700; color: var(--muted); font-size: .78rem; letter-spacing: .03em;
  padding: .8rem 1rem; border-bottom: 1px solid var(--line); background: #fafbfd; text-transform: uppercase;
}
.data-table td { padding: .85rem 1rem; border-bottom: 1px solid #f1f5f9; font-size: .88rem; vertical-align: top; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table .empty td { text-align: center; color: var(--muted); padding: 2.4rem 1rem; }

.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .85rem; }
.kpi {
  background: #f7f9fc; border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1.1rem;
  display: flex; align-items: center; gap: .7rem;
}
.kpi .kic { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; }
.kpi b { font-size: 1.2rem; font-weight: 800; display: block; line-height: 1.05; }
.kpi small { color: var(--muted); font-weight: 600; }

/* ============================================================
   CETAK KHUSUS : hanya area .print-area (riwayat jurnal) yang terlihat
   ============================================================ */
.print-ident { display: none; }
.print-area .pi-note,
.print-area .pi-footer { display: none; }

/* Dua-ejaan tanggal: layar memakai "1 September 2026" (enak dibaca),
   cetak memakai "26/09/2026" (pendek, tidak menabrak kolom Nama). */
.cetak-hpai { display: none; }
@media print {
  .cetak-hpai { display: inline; }
  .cetak-layar { display: none !important; }
}

@media print {
  @page { size: A4 portrait; margin: 12mm 10mm; }

  html, body { background: #fff !important; font-size: 10pt; }

  /* ---------- Isolasi area cetak ----------
     Versi lama memakai "body * { visibility: hidden }" lalu
     .print-area diberi position:absolute. Cara itu merusak dokumen
     multi-halaman: area cetak ikut terpotong ke satu halaman,
     elemen tersembunyi tetap menyisakan ruang kosong, dan
     .app-shell { min-height:100vh } memaksa halaman kosong extra.
     Sekarang chrome disembunyikan dan seluruh pembungkus
     dinetralkan, sehingga .print-area mengalir normal dan
     paginasi browser bekerja benar. */
  .app-topbar,
  .app-navbar,
  .app-menu,
  .app-footer,
  .app-back,
  .nilai-tips,
  .nilai-guard,
  .rubrik-box,
  .nilai-catatan,
  .modal { display: none !important; }

  .app-shell > .app-main > .container > *:not(:has(.print-area)) { display: none !important; }
  /* Section di dalam .app-shell (DUDI & Guru) juga punya kartu non-cetak
     di sebelah area cetak - form absensi, kartu KPI, dan lain-lain.
     PENTING: :not(.print-area) wajib ada, karena :has() tidak pernah
     mencocokkan elemen dengan dirinya sendiri. Tanpa itu, area cetak
     akan cocok dengan :not(:has(.print-area)) lalu menyembunyikan
     dirinya sendiri dan hasilnya halaman cetak kosong. */
  .app-shell section > *:not(.print-area):not(:has(.print-area)) { display: none !important; }

  .app-shell,
  .app-shell > .app-main,
  .app-shell > .app-main > .container,
  .app-shell section,
  .app-card,
  .card-block {
    min-height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .print-area {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  /* elemen layar yang tidak ikut tercetak */
  .print-area .green-top,
  .print-area .card-title-row,
  .print-area .filt-bar,
  .print-area .filterbar,
  .print-area .overflow-auto::before { display: none !important; }

  /* tabel tidak boleh terpotong / menggulung saat cetak */
  .print-area .overflow-auto { overflow: visible !important; }
  .print-area table { page-break-inside: auto; }
  .print-area table tr { page-break-inside: avoid; break-inside: avoid; }
  .print-area thead { display: table-header-group; }
  .print-area tfoot { display: table-footer-group; }

  /* ================= KOP CETAK (identitas murid) ================= */
  .print-ident {
    display: block; margin-bottom: 1rem; overflow: hidden; border-radius: 10px;
    page-break-inside: avoid; break-inside: avoid;
  }
  .print-ident .pi-band {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
    padding: 1.05rem 1.3rem; color: #fff;
    background: linear-gradient(120deg, #065f46, #059669 55%, #10b981);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .print-ident .pi-band small {
    display: block; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
    font-weight: 700; opacity: .9;
  }
  .print-ident .pi-band h2 { margin: .15rem 0 0; font-size: 1.35rem; font-weight: 800; letter-spacing: .01em; }
  .print-ident .pi-periode { text-align: right; font-size: .85rem; font-weight: 800; line-height: 1.3; }
  .print-ident .pi-periode i {
    display: block; font-style: normal; font-size: .62rem; letter-spacing: .18em;
    text-transform: uppercase; font-weight: 700; opacity: .85;
  }

  .print-ident .pi-body {
    display: grid; grid-template-columns: 1fr 1fr; gap: .15rem .6rem;
    border: 1px solid #cfe8da; border-top: 0; background: #f8fbf9;
    padding: .85rem 1.3rem 1rem;
  }
  .print-ident .pi-item { display: flex; gap: .5rem; font-size: .85rem; padding: .22rem 0; }
  .print-ident .pi-item span { flex: 0 0 120px; color: #64748b; font-weight: 700; }
  .print-ident .pi-item b { color: #0f172a; min-width: 0; word-break: break-word; }

  /* ================= TABEL CETAK =================
     Tabel cetak: kunci lebar agar kolom rata dan tidak meluber.
     Lebar tiap kolom didefinisikan di markup lewat <colgroup>. */
  .print-area .data-table {
    width: 100% !important;
    table-layout: fixed;
    border-collapse: collapse;
  }
  /* Lebar kolom SELALU lewat <colgroup> di markup, bukan nth-child:
     tiap role punya jumlah kolom berbeda (7 / 6 / 8 / 5), jadi
     nth-child generik akan salah menimpa tabel lain. */
  .print-area .data-table thead th {
    background: #e2e8f0 !important; color: #0f172a; font-size: .64rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .04em; border-bottom: 1.5px solid #0f172a;
    padding: .34rem .3rem; vertical-align: middle;
  }
  .print-area .data-table td {
    font-size: .7rem; line-height: 1.35; padding: .3rem .28rem;
    border-bottom: 1px solid #cbd5e1; vertical-align: top;
    overflow-wrap: break-word; word-break: break-word;
  }
  .print-area .data-table tbody tr:nth-child(even) td { background: #f8fafc; }
  .print-area .data-table .thumb-foto { width: 28px; height: 28px; }
  .print-area .data-table .filter-select,
  .print-area .data-table .empty { display: none; }

  /* Baris dekoratif layar tidak perlu ikut tercetak */
  .print-area .kpi-row,
  .print-area .chip-row,
  .print-area .alert { display: none !important; }

  .print-area .pi-note { font-size: .65rem; color: #64748b; margin-top: .5rem; font-style: italic; }

  .print-area .pi-footer {
    display: flex; justify-content: space-between; gap: 3rem;
    margin-top: 2.6rem; padding: 0 1rem;
    page-break-inside: avoid; break-inside: avoid;
  }
  .print-area .pi-footer .sig { flex: 1; text-align: center; font-size: .75rem; color: #334155; }
  .print-area .pi-footer .sig .sig-line {
    width: 88%; max-width: 170px; border-bottom: 1px solid #0f172a; margin: 2.4rem auto .35rem;
  }
  .print-area .pi-footer .sig b { font-size: .78rem; }

  /* Hanya satu penanda tangan (DUDI / Murid): geser ke kanan supaya
     tidak menggantung di tengah halaman seperti tidak sengaja. */
  .print-area .pi-footer:has(> .sig:only-child) { justify-content: flex-end; }
  .print-area .pi-footer:has(> .sig:only-child) > .sig { flex: 0 0 44%; }

  /* Rekap per DUDI / semua DUDI tanpa kolom Orang Tua / Wali:
     tanda tangan Guru Pembimbing digeser ke kanan, bukan melebar
     sendiri di tengah halaman. */
  .print-area .pi-footer.is-guru-saja { justify-content: flex-end; }
  .print-area .pi-footer.is-guru-saja .sig { flex: 0 0 44%; }

  /* ============================================================
     REKAP ABSENSI — tampilan cetak standar ala rekap resmi
     (identitas + ringkasan + tanda tangan) dipadu .print-area
     ============================================================ */
  .print-area .rk-kop { text-align: center; margin-bottom: 1.2rem; }
  .print-area .rk-kop h1 {
    margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: .05em;
    color: #0f172a; text-transform: uppercase;
  }
  .print-area .rk-kop strong {
    display: block; font-size: .68rem; letter-spacing: .18em; font-weight: 700;
    color: #475569; text-transform: uppercase; margin-top: .05rem;
  }
  .print-area .rk-kop p { margin: .2rem 0 .5rem; font-size: .78rem; color: #475569; font-weight: 600; }
  .print-area .rk-kop .rk-line { border-top: 1px solid #0f172a; margin: .4rem 0 .6rem; }
  .print-area .rk-kop h2 {
    margin: 0 0 .1rem; font-size: 1.05rem; font-weight: 800; letter-spacing: .12em;
    color: #0f172a; text-transform: uppercase;
  }
  .print-area .rk-kop small { font-size: .75rem; color: #475569; font-weight: 700; }

  .print-area .rk-id {
    border: 1px solid #94a3b8; border-radius: 8px; overflow: hidden; margin-bottom: 1rem;
  }
  .print-area .rk-id div {
    display: grid; grid-template-columns: 165px 1fr; padding: .34rem .9rem; font-size: .8rem;
  }
  .print-area .rk-id div:nth-child(odd) { background: #f1f5f9; }
  .print-area .rk-id span { font-weight: 700; color: #334155; }
  .print-area .rk-id b { color: #0f172a; }

  .print-area .rk-ringkas {
    display: flex; gap: .5rem; margin-bottom: .9rem; border: 1px solid #94a3b8;
    border-radius: 8px; overflow: hidden; background: #f8fafc;
  }
  .print-area .rk-ringkas > span {
    flex: 1; text-align: center; padding: .5rem .4rem;
  }
  .print-area .rk-ringkas > span + span { border-left: 1px solid #cbd5e1; }
  .print-area .rk-ringkas small { display: block; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: #64748b; }
  .print-area .rk-ringkas b { font-size: 1.15rem; font-weight: 800; color: #0f172a; }

  /* Persentase di dalam kotak ringkasan */
  .print-area .rk-ringkas > span em {
    display: block;
    margin-top: 1px;
    font-size: .62rem;
    font-style: normal;
    font-weight: 700;
    color: #64748b;
  }

  /* Baris tingkat kehadiran */
  .print-area .rk-hadir {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 1rem;
    padding: .45rem .8rem;
    background: #f1f5f9;
    border: 1px solid #94a3b8;
    border-radius: 8px;
  }
  .print-area .rk-hadir-teks { flex: 0 0 auto; }
  .print-area .rk-hadir-teks b {
    display: block;
    font-size: .74rem;
    font-weight: 800;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: .05em;
  }
  .print-area .rk-hadir-teks span { font-size: .7rem; color: #475569; }
  .print-area .rk-hadir-ukur {
    flex: 1 1 auto;
    height: 10px;
    border-radius: 99px;
    background: #e2e8f0;
    overflow: hidden;
  }
  .print-area .rk-hadir-ukur i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #059669, #10b981);
  }

  /* ==========================================================
     CETAK HALAMAN MURID (rekap absensi & riwayat jurnal)
     Discopot dengan .tabel-cetak-* supaya tidak bentrok dengan
     aturan .print-area .data-table milik halaman Guru.
     ========================================================== */
  .tabel-cetak-absen,
  .tabel-cetak-jurnal { table-layout: fixed; }

  /* Kolom "Aksi" (tombol edit) tidak ada artinya di kertas */
  .tabel-cetak-jurnal .kolom-aksi { display: none; }

  /* 5 kolom yang ikut tercetak: Tgl, Pekerjaan, Hasil, Catatan, Foto */
  .tabel-cetak-jurnal th:nth-child(1), .tabel-cetak-jurnal td:nth-child(1) { width: 12%; }
  .tabel-cetak-jurnal th:nth-child(2), .tabel-cetak-jurnal td:nth-child(2) { width: 31%; }
  .tabel-cetak-jurnal th:nth-child(3), .tabel-cetak-jurnal td:nth-child(3) { width: 31%; }
  .tabel-cetak-jurnal th:nth-child(4), .tabel-cetak-jurnal td:nth-child(4) { width: 18%; }
  .tabel-cetak-jurnal th:nth-child(5), .tabel-cetak-jurnal td:nth-child(5) { width: 8%; }

  /* Rekap absensi DUDI: 6 kolom, lebar lewat <colgroup>. */
  .tabel-cetak-dudi { table-layout: fixed; }
  .tabel-cetak-dudi td { overflow-wrap: break-word; word-break: break-word; }
  .tabel-cetak-dudi td small { font-size: .62rem; line-height: 1.3; }

  /* Matriks absensi (pakai .abs-grid, bukan .data-table, jadi aturan
     tabel cetak di atas tidak menjangkau). */
  .print-area .abs-grid-wrap { overflow: visible !important; border-radius: 0; }
  .print-area .abs-grid { font-size: .62rem; }
  .print-area .abs-grid th,
  .print-area .abs-grid td { padding: .22rem .2rem; }
  .print-area .abs-grid thead th {
    background: #e2e8f0 !important;
    color: #0f172a;
    border-bottom: 1px solid #94a3b8;
    font-size: .58rem;
  }
  .print-area .abs-grid .abs-col-murid {
    min-width: 0;
    position: static !important;
    background: #f8fafc;
    font-size: .64rem;
  }
  .print-area .abs-grid .abs-col-murid small { font-size: .54rem; }
  .print-area .abs-grid .abs-col-hari,
  .print-area .abs-grid .abs-col-total { min-width: 0; }
  .print-area .abs-badge {
    min-width: 0;
    padding: 0 .2rem;
    font-size: .56rem;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .print-area .abs-badge.dari-dudi { box-shadow: 0 0 0 1px #0f172a; }
  .print-area .abs-legend { padding-top: .5rem; font-size: .62rem; }

  /* Rekap absensi murid: 8 kolom. Lebar lewat <colgroup> (header sudah
     satu baris, tapi colgroup tetap paling andal untuk
     table-layout: fixed). */
  .tabel-cetak-absen .bukti-sel { text-align: center; }
  .tabel-cetak-absen .bukti-sel small { font-size: .64rem; line-height: 1.2; white-space: nowrap; }
  .tabel-cetak-absen .bukti-ya { color: #15803d; font-weight: 800; white-space: nowrap; }

  /* Garis pembatas kelompok kolom bukti (Selfie | Wajah | GPS) */
  .tabel-cetak-absen th:nth-child(5), .tabel-cetak-absen td:nth-child(5) { border-left: 1.5px solid #cbd5e1; }
  .tabel-cetak-absen th:nth-child(7), .tabel-cetak-absen td:nth-child(7) { border-right: 1.5px solid #cbd5e1; }

  /* Teks panjang harus membungkus, bukan membuat kolom melebar dan
     mendorong kolom lain keluar kertas. */
  .tabel-cetak-absen td,
  .tabel-cetak-jurnal td { overflow-wrap: break-word; word-break: break-word; }
  .tabel-cetak-absen .absensi-thumb,
  .tabel-cetak-jurnal .thumb-foto { width: 34px; height: 34px; }

  /* Badge status (Hadir/Sakit/Izin/Alfa) kehilangan warna di cetak
     kalau browser memakai mode hemat tinta. */
  .print-area .badge,
  .print-area .absensi-foto-kosong {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Rapatkan kop rekap absensi supaya lebih banyak baris muat satu halaman */
  .print-area .rk-kop { margin-bottom: .7rem; }
  .print-area .rk-kop h1 { font-size: 1.05rem; }
  .print-area .rk-kop h2 { font-size: .95rem; }
  .print-area .rk-id { margin-bottom: .6rem; }
  .print-area .rk-id div { grid-template-columns: 120px 1fr; padding: .2rem .7rem; }
  .print-area .rk-ringkas { margin-bottom: .6rem; }
  .print-area .rk-ringkas > span { padding: .3rem .4rem; }
  .print-area .rk-ringkas b { font-size: 1rem; }

  /* ==========================================================
     CETAK HALAMAN MURID - ISOLASI
     Halaman Murid tidak memakai .app-shell, jadi aturan isolasi
     umum di atas tidak berlaku. Yang dicetak hanya blok yang
     sedang aktif: section yang memuat .print-area.
     ========================================================== */
  body.cetak-murid > *:not(.container) { display: none !important; }
  body.cetak-murid > .container {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.cetak-murid .container > *:not(:has(.print-area)) { display: none !important; }
  /* Section hanya memuat satu area cetak, tapi di dalamnya ada juga
     form absensi, kartu KPI, dan modal - semuanya ikut disembunyikan.
     PENTING: :not(.print-area) wajib ada, karena :has() tidak pernah
     mencocokkan elemen dengan dirinya sendiri. Tanpa itu, area cetak
     akan cocok dengan :not(:has(.print-area)) lalu menyembunyikan
     dirinya sendiri dan hasilnya halaman cetak kosong. */
  body.cetak-murid section > *:not(.print-area):not(:has(.print-area)) { display: none !important; }
  body.cetak-murid [hidden] { display: none !important; }
  body.cetak-murid .print-area {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  body.cetak-murid .print-area .card-block { padding: 0 !important; }
  body.cetak-murid .print-area .overflow-auto { overflow: visible !important; }

  /* Judul di dalam kartu (ikon + subjudul) tidak perlu ikut tercetak,
     kop resmi sudah memuat identitas. Badge status di dalam tabel
     tetap dicetak. */
  body.cetak-murid .print-area .card-title-row,
  body.cetak-murid .print-area .d-flex.flex-wrap.justify-content-between,
  body.cetak-murid .print-area .legenda-sumber { display: none !important; }

  /* Kaki dokumen: tanggal cetak + sumber */
  body.cetak-murid .print-area .pi-note {
    margin-top: .8rem;
    padding-top: .5rem;
    border-top: 1px dashed #cbd5e1;
    font-size: .62rem;
    color: #64748b;
    font-style: normal;
  }
}

.admin-dashboard {
  --admin-navy: #1b2a49;
  --admin-navy-2: #243a63;
  --admin-ink: #14213d;
  --admin-muted: #64748b;
  --admin-line: #d7deea;
  --admin-surface: #ffffff;
  --admin-bg: #f7f8fb;
  --admin-gold: #d9a62e;
  min-height: 100vh;
  padding: 16px;
  background: linear-gradient(135deg, #17243f 0%, #24365d 100%);
}

.admin-shell {
  max-width: 1440px;
  min-height: calc(100vh - 32px);
  margin: 0 auto;
  /* overflow:visible, BUKAN hidden.
     Nilai lama (hidden) ditambahkan hanya agar radius 20px
     memotong isi sudut, tapi efeknya jauh lebih besar dari itu:
     setiap anak yang 1px terlalu lebar menjadi TIDAK
     TERJANGKAU, bukan sekadar tidak rapi. Di layar HP itu
     muncul sebagai "ada bagian yang terpotong dan tidak bisa
     digeser". Karena html/body juga memakai overflow-x:clip,
     pengguna tidak punya jalur pemulihan lain lewat scroll
     horizontal halaman. */
  overflow: visible;
  background: var(--admin-bg);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(8, 17, 35, .3);
}

.admin-topbar {
  min-height: 106px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 44px;
  background: var(--admin-surface);
  border-bottom: 1px solid var(--admin-line);
}

.admin-topbar h1 {
  margin: 0;
  color: var(--admin-ink);
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

.admin-topbar p {
  margin: 3px 0 0;
  color: #52617a;
  font-size: .84rem;
}

.admin-logout {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  color: var(--admin-ink);
  background: #f5f7fa;
  border: 1px solid var(--admin-line);
  border-radius: 14px;
  font-size: .82rem;
  font-weight: 700;
  box-shadow: 0 7px 14px rgba(20, 33, 61, .12);
  transition: .2s;
}

.admin-logout:hover {
  color: var(--admin-ink);
  background: #fff;
  transform: translateY(-1px);
}

.admin-shell-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
}

.admin-sidebar {
  padding: 28px 18px 34px;
  background: #f8f9fc;
  border-right: 1px solid var(--admin-line);
}

.admin-nav-box {
  margin: 4px 0 0;
  border-radius: 13px;
  background: #fff;
  border: 1px solid var(--admin-line);
  overflow: hidden;
}

.admin-nav-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 9px 11px;
  color: #26344f;
  font-size: .76rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.admin-nav-summary::-webkit-details-marker {
  display: none;
}

.admin-nav-summary i {
  color: var(--admin-navy-2);
  font-size: 1rem;
}

.admin-nav-summary .admin-nav-chevron {
  margin-left: auto;
  color: #94a3b8;
  font-size: .78rem;
  transition: transform .18s ease;
}

.admin-nav-box[open] .admin-nav-summary {
  color: #fff;
  background: var(--admin-navy);
}

.admin-nav-box[open] .admin-nav-summary i {
  color: #fff;
}

.admin-nav-box[open] .admin-nav-summary .admin-nav-chevron {
  color: #fff;
  transform: rotate(180deg);
}

.admin-nav-sub {
  margin: 0;
  padding: 6px;
  list-style: none;
}

.admin-nav-sub .admin-nav-link {
  min-height: 35px;
  padding: 7px 10px;
  font-size: .76rem;
}

.admin-nav-sub .admin-nav-link i {
  font-size: .95rem;
}

.admin-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 43px;
  padding: 10px 14px;
  color: #26344f;
  border-radius: 13px;
  font-size: .87rem;
  font-weight: 600;
  transition: .18s;
}

.admin-nav-link > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-nav-link i {
  width: 18px;
  flex: 0 0 18px;
  color: var(--admin-navy-2);
  font-size: 1.05rem;
  text-align: center;
}

.admin-nav-link:hover {
  color: var(--admin-ink);
  background: #edf1f7;
}

.admin-nav-link:focus-visible {
  outline: 2px solid var(--admin-navy-2);
  outline-offset: 2px;
}

.admin-nav-link.active {
  color: #fff;
  background: var(--admin-navy);
  box-shadow: 0 10px 18px rgba(27, 42, 73, .22);
}

.admin-nav-link.active i {
  color: #fff;
}

.admin-nav-link.disabled {
  color: #8a96a9;
  cursor: not-allowed;
  opacity: .72;
}

.admin-content {
  min-width: 0;
  padding: 28px 36px 42px;
}

.admin-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--admin-line);
}

.admin-title-line {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--admin-navy-2);
}

.admin-title-line i {
  font-size: 1.15rem;
}

.admin-title-line h2 {
  margin: 0;
  color: var(--admin-ink);
  font-size: 1.08rem;
  font-weight: 800;
}

.admin-page-head p {
  margin: 2px 0 0 28px;
  color: var(--admin-muted);
  font-size: .82rem;
}

.admin-school-meta {
  color: var(--admin-ink);
  font-size: .82rem;
  font-weight: 800;
  text-align: right;
}

.admin-school-meta span {
  display: block;
  margin-top: 3px;
  color: var(--admin-muted);
  font-size: .72rem;
  font-weight: 600;
}

.admin-alert {
  margin: 20px 0 0;
  border-radius: 13px;
}

.admin-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 24px;
  padding: 24px 26px;
  background: #f0f2f6;
  border: 1px solid #ccd3df;
  border-radius: 20px;
}

.admin-welcome span,
.admin-welcome h3,
.admin-welcome p {
  position: relative;
  z-index: 1;
}

.admin-welcome span {
  display: block;
  color: var(--admin-ink);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.admin-welcome h3 {
  margin: 5px 0 3px;
  color: var(--admin-ink);
  font-size: 1.45rem;
  font-weight: 800;
}

.admin-welcome p {
  margin: 0;
  color: #56657c;
  font-size: .8rem;
}

.admin-welcome-note {
  max-width: 330px;
  text-align: right;
}

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin-top: 18px;
}

.admin-stat-card {
  min-height: 178px;
  padding: 23px 22px 20px;
  background: var(--admin-surface);
  border: 1px solid var(--admin-line);
  border-radius: 20px;
  box-shadow: 0 7px 16px rgba(20, 33, 61, .035);
}

.admin-stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #53627a;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.admin-stat-top i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  color: var(--admin-navy-2);
  background: #eef1f6;
  border-radius: 13px;
  font-size: 1.15rem;
}

.admin-stat-card strong {
  display: block;
  margin-top: 15px;
  color: var(--admin-ink);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
}

.admin-stat-card small {
  display: block;
  margin-top: 8px;
  color: var(--admin-muted);
  font-size: .78rem;
}

.admin-stat-card-gold strong,
.admin-stat-card-gold .admin-stat-top i {
  color: #bc8610;
}

.admin-stat-card-gold .admin-stat-top i {
  background: #fff8e9;
}

.admin-mini-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.admin-mini-stats > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 15px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--admin-line);
  border-radius: 13px;
}

.admin-mini-stats span {
  color: var(--admin-muted);
  font-size: .75rem;
  font-weight: 600;
}

.admin-mini-stats strong {
  color: var(--admin-ink);
  font-size: 1rem;
  font-weight: 800;
}

.admin-mini-stats strong small {
  color: var(--admin-muted);
  font-size: .7rem;
  font-weight: 600;
}

.admin-chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.admin-chart-card,
.admin-list-card {
  min-width: 0;
  padding: 22px 24px;
  background: var(--admin-surface);
  border: 1px solid var(--admin-line);
  border-radius: 20px;
  box-shadow: 0 7px 16px rgba(20, 33, 61, .035);
}

.admin-chart-head,
.admin-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-chart-head h3,
.admin-card-heading h3 {
  margin: 0;
  color: var(--admin-ink);
  font-size: 1rem;
  font-weight: 800;
}

.admin-chart-head > span {
  color: var(--admin-muted);
  font-size: .74rem;
  font-weight: 700;
}

.admin-vertical-chart {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  min-height: 280px;
  margin-top: 20px;
}

.admin-chart-scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 0 29px;
  color: var(--admin-muted);
  font-size: .7rem;
  text-align: right;
}

.admin-bars {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: 14px;
  min-height: 280px;
  padding: 4px 12px 0;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 55px, #e6eaf0 56px);
  border-bottom: 1px solid #cfd6e1;
}

.admin-bar-column {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  gap: 6px;
}

.admin-bar-value {
  min-height: 16px;
  color: var(--admin-ink);
  font-size: .7rem;
  font-weight: 700;
}

.admin-bar {
  width: min(58px, 75%);
  min-height: 8px;
  background: var(--admin-navy);
  border-radius: 8px 8px 2px 2px;
}

.admin-bar-column > span {
  max-width: 100%;
  overflow: hidden;
  color: var(--admin-ink);
  font-size: .72rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-chart-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 16px;
  color: var(--admin-ink);
  font-size: .78rem;
  font-weight: 700;
}

.admin-chart-legend i {
  width: 13px;
  height: 13px;
  background: var(--admin-navy);
  border-radius: 2px;
}

.admin-horizontal-chart {
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-height: 280px;
  margin-top: 27px;
}

.admin-hbar-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 25px;
  align-items: center;
  gap: 10px;
}

.admin-hbar-label {
  overflow: hidden;
  color: var(--admin-ink);
  font-size: .68rem;
  font-weight: 600;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-hbar-track {
  height: 29px;
  overflow: hidden;
  background: #f3f5f8;
  border-radius: 5px;
}

.admin-hbar-track > div {
  height: 100%;
  min-width: 5px;
  background: var(--admin-gold);
  border-radius: 5px;
}

.admin-hbar-row strong {
  color: var(--admin-ink);
  font-size: .72rem;
  text-align: right;
}

.admin-chart-axis {
  display: flex;
  justify-content: space-between;
  margin: 14px 35px 0 140px;
  color: var(--admin-muted);
  font-size: .68rem;
}

.admin-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 20px;
  margin-top: 20px;
}

.admin-card-heading {
  padding-bottom: 15px;
  border-bottom: 1px solid #edf0f4;
}

.admin-card-heading a {
  color: var(--admin-navy-2);
  font-size: .75rem;
  font-weight: 700;
}

.admin-visit-list {
  display: flex;
  flex-direction: column;
}

.admin-visit-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #edf0f4;
}

.admin-visit-row:last-child {
  border-bottom: 0;
  padding-bottom: 2px;
}

.admin-visit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  color: var(--admin-navy-2);
  background: #eef2f7;
  border-radius: 10px;
}

.admin-visit-copy {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.admin-visit-copy strong {
  overflow: hidden;
  color: var(--admin-ink);
  font-size: .8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-visit-copy span {
  overflow: hidden;
  color: var(--admin-muted);
  font-size: .72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-visit-row time {
  color: var(--admin-muted);
  font-size: .68rem;
  white-space: nowrap;
}

.admin-quick-links {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.admin-quick-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  color: var(--admin-ink);
  border-bottom: 1px solid #edf0f4;
}

.admin-quick-links a:last-child {
  border-bottom: 0;
}

.admin-quick-links a > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--admin-navy-2);
  background: #eef2f7;
  border-radius: 10px;
}

.admin-quick-links a > span {
  display: flex;
  flex: 1;
  flex-direction: column;
  font-size: .8rem;
  font-weight: 800;
}

.admin-quick-links a small {
  margin-top: 2px;
  color: var(--admin-muted);
  font-size: .7rem;
  font-weight: 500;
}

.admin-quick-links a > b {
  color: #9aa6b8;
  font-size: .75rem;
}

.admin-quick-links a:hover {
  color: var(--admin-navy-2);
}

.admin-empty {
  padding: 28px 0 12px;
  color: var(--admin-muted);
  font-size: .8rem;
  text-align: center;
}

@media (max-width: 1100px) {
  .admin-shell-layout {
    grid-template-columns: 245px minmax(0, 1fr);
  }

  .admin-content {
    padding: 24px;
  }

  .admin-stat-grid,
  .admin-mini-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .admin-dashboard {
    padding: 0;
  }

  .admin-shell {
    min-height: 100vh;
    border-radius: 0;
  }

  .admin-topbar {
    padding: 22px 20px;
  }

  .admin-shell-layout {
    display: block;
  }

  .admin-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--admin-line);
  }

  .admin-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 8px;
    align-items: start;
  }

  .admin-content {
    padding: 22px 16px 32px;
  }

  .admin-page-head,
  .admin-welcome {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-school-meta,
  .admin-welcome-note {
    text-align: left;
  }

  .admin-chart-grid,
  .admin-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .admin-topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .admin-stat-grid,
  .admin-mini-stats {
    grid-template-columns: 1fr;
  }

  .admin-chart-card,
  .admin-list-card {
    padding: 18px 16px;
  }

  .admin-hbar-row {
    grid-template-columns: 95px minmax(0, 1fr) 22px;
    gap: 7px;
  }

  .admin-chart-axis {
    margin-left: 102px;
  }

  .admin-nav {
    grid-template-columns: 1fr;
  }
}

.admin-content > .row {
  margin-top: 0;
}

.admin-content > .card,
.admin-content > .admin-report-toolbar,
.admin-content > .admin-stat-grid,
.admin-content > .admin-filter-card,
.admin-content > .admin-table-card,
.admin-content > .admin-form-card,
.admin-content > .admin-chart-card,
.admin-content > .admin-chart-grid,
.admin-content > .admin-bottom-grid,
.admin-content > .admin-account-grid,
.admin-content > .admin-backup-grid,
.admin-content > .admin-rubric-grid,
.admin-content > .admin-rubric-table-card,
  .admin-content > .admin-danger-card,
  .admin-content > .admin-rubric-reference {
  margin-top: 20px;
}

.admin-content .card {
  border-radius: 18px;
  border-color: var(--admin-line);
}

.admin-content .card-header {
  background: #fff;
  border-bottom-color: #edf0f4;
}

.admin-content .form-control,
.admin-content .form-select {
  min-height: 44px;
  border-color: var(--admin-line);
  border-radius: 10px;
}

.admin-content .form-control:focus,
.admin-content .form-select:focus {
  border-color: #9aabc5;
  box-shadow: 0 0 0 .2rem rgba(36, 58, 99, .08);
}

.admin-report-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 20px;
  background: #fff;
  border: 1px solid var(--admin-line);
  border-radius: 16px;
}

.admin-report-toolbar > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.admin-report-toolbar span,
.admin-report-toolbar strong {
  font-size: .78rem;
}

.admin-report-toolbar span {
  color: var(--admin-muted);
  font-weight: 600;
}

.admin-report-toolbar strong {
  color: var(--admin-ink);
  font-weight: 800;
}

.admin-filter-form,
.admin-filter-card {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--admin-line);
  border-radius: 16px;
}

.admin-filter-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--admin-muted);
  font-size: .7rem;
  font-weight: 700;
}

.admin-filter-form input,
.admin-filter-card select,
.admin-filter-search {
  min-height: 42px;
  color: var(--admin-ink);
  background: #f8fafc;
  border: 1px solid var(--admin-line);
  border-radius: 10px;
}

.admin-filter-form input {
  padding: .5rem .7rem;
  font-size: .78rem;
}

.admin-filter-form button,
.admin-filter-card button,
.admin-form-actions button,
.admin-toolbar-link,
.admin-toolbar-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: .6rem 1rem;
  color: #fff;
  background: var(--admin-navy-2);
  border: 0;
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 800;
  transition: .18s;
}

.admin-filter-form button:hover,
.admin-filter-card button:hover,
.admin-form-actions button:hover,
.admin-toolbar-link:hover,
.admin-toolbar-links a:hover {
  color: #fff;
  background: var(--admin-navy);
  transform: translateY(-1px);
}

.admin-filter-card select {
  min-width: 150px;
  padding: .5rem 2rem .5rem .75rem;
  font-size: .78rem;
}

.admin-filter-search {
  display: flex;
  flex: 1 1 260px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}

.admin-filter-search i {
  color: var(--admin-muted);
}

.admin-filter-search input {
  width: 100%;
  min-height: 40px;
  color: var(--admin-ink);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: .8rem;
}

.admin-toolbar-link,
.admin-toolbar-links a {
  min-height: 38px;
  padding: .5rem .85rem;
  color: var(--admin-navy-2);
  background: #edf1f7;
}

.admin-toolbar-links {
  display: flex;
  gap: 8px;
}

.admin-table-card,
.admin-form-card,
.admin-rubric-table-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--admin-line);
  border-radius: 18px;
}

.admin-table-card > .admin-card-heading,
.admin-form-card > .admin-card-heading,
.admin-rubric-table-card > .admin-card-heading {
  margin: 0;
  padding: 20px 22px 15px;
}

.admin-table-card .admin-card-heading > span,
.admin-form-card .admin-card-heading > span,
.admin-rubric-table-card .admin-card-heading > span {
  color: var(--admin-muted);
  font-size: .72rem;
  font-weight: 600;
}

.admin-data-table {
  min-width: 720px;
  margin-bottom: 0;
}

.admin-data-table thead th {
  padding: .8rem 1rem;
  color: var(--admin-muted);
  background: #fafbfd;
  border-bottom: 1px solid var(--admin-line);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-data-table tbody td {
  padding: .85rem 1rem;
  color: #334155;
  border-bottom: 1px solid #edf0f4;
  font-size: .8rem;
  vertical-align: middle;
}

.admin-data-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-data-table tbody tr:hover {
  background: #fbfcfe;
}

.admin-data-table td small {
  display: block;
  margin-top: 3px;
  color: var(--admin-muted);
  font-size: .7rem;
  font-weight: 500;
}

.admin-status,
.admin-code {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: .2rem .55rem;
  border-radius: 50rem;
  font-size: .68rem;
  font-weight: 800;
  white-space: nowrap;
}

.admin-status.is-active {
  color: #047857;
  background: #d1fae5;
}

.admin-status.is-inactive {
  color: #64748b;
  background: #e8edf3;
}

.admin-status.is-pending {
  color: #a16207;
  background: #fef3c7;
}

.admin-code {
  color: #92400e;
  background: #fef3c7;
  letter-spacing: .04em;
}

.admin-form-card {
  padding-bottom: 22px;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  padding: 6px 22px 0;
}

.admin-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-field > span {
  color: var(--admin-ink);
  font-size: .78rem;
  font-weight: 800;
}

.admin-field input {
  min-height: 44px;
  padding: .6rem .8rem;
  color: var(--admin-ink);
  background: #f8fafc;
  border: 1px solid var(--admin-line);
  border-radius: 10px;
}

.admin-field input:focus {
  outline: 0;
  border-color: #9aabc5;
  box-shadow: 0 0 0 .2rem rgba(36, 58, 99, .08);
}

.admin-form-actions {
  display: flex;
  align-items: end;
}

.admin-form-actions button {
  min-height: 44px;
}

.admin-account-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  gap: 20px;
}

.admin-profile-card,
.admin-profile-meta,
.admin-backup-card,
.admin-rubric-card,
.admin-danger-card {
  background: #fff;
  border: 1px solid var(--admin-line);
  border-radius: 18px;
}

.admin-profile-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px;
}

.admin-profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  color: var(--admin-navy-2);
  background: #e9eef5;
  border-radius: 18px;
  font-size: 1.6rem;
}

.admin-profile-card span,
.admin-profile-meta span,
.admin-backup-card span,
.admin-rubric-card span,
.admin-danger-card span {
  color: var(--admin-muted);
  font-size: .72rem;
  font-weight: 700;
}

.admin-profile-card h2 {
  margin: 4px 0 3px;
  color: var(--admin-ink);
  font-size: 1.15rem;
  font-weight: 800;
}

.admin-profile-card p {
  margin: 0;
  color: var(--admin-muted);
  font-size: .78rem;
}

.admin-profile-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  padding: 20px;
}

.admin-profile-meta div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 14px;
  border-right: 1px solid #edf0f4;
}

.admin-profile-meta div:last-child {
  border-right: 0;
}

.admin-profile-meta strong {
  overflow: hidden;
  color: var(--admin-ink);
  font-size: .8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-rubric-grid,
.admin-backup-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.admin-rubric-card,
.admin-backup-card {
  padding: 20px;
}

.admin-rubric-card strong {
  display: block;
  margin: 10px 0 8px;
  color: var(--admin-navy-2);
  font-size: 1.7rem;
  font-weight: 800;
}

.admin-rubric-card p {
  min-height: 48px;
  margin: 0;
  color: var(--admin-muted);
  font-size: .77rem;
  line-height: 1.6;
}

.admin-rubric-card small {
  display: block;
  margin-top: 14px;
  color: var(--admin-ink);
  font-size: .7rem;
  font-weight: 700;
}

.admin-rubric-primary {
  border-top: 4px solid var(--admin-navy-2);
}

.admin-rubric-secondary {
  border-top: 4px solid #6c83a8;
}

.admin-backup-card {
  display: flex;
  align-items: center;
  gap: 14px;
}

.admin-backup-card > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.admin-backup-card strong {
  color: var(--admin-ink);
  font-size: .88rem;
  font-weight: 800;
}

.admin-backup-card small {
  color: var(--admin-muted);
  font-size: .7rem;
}

.admin-backup-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  color: var(--admin-navy-2);
  background: #e9eef5;
  border-radius: 13px;
  font-size: 1.15rem;
}

.admin-backup-icon-gold {
  color: #b4770b;
  background: #fff5dc;
}

.admin-backup-icon-blue {
  color: #2872b8;
  background: #eaf4ff;
}

.admin-steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0 22px;
  list-style: none;
}

.admin-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  color: var(--admin-muted);
  border-bottom: 1px solid #edf0f4;
  font-size: .78rem;
}

.admin-steps li:last-child {
  border-bottom: 0;
}

.admin-steps b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  color: var(--admin-navy-2);
  background: #e9eef5;
  border-radius: 8px;
  font-size: .7rem;
}

.admin-disabled-action {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 22px 0;
  padding: 13px 15px;
  color: #53627a;
  background: #f7f9fc;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  font-size: .76rem;
}

.admin-disabled-action i {
  color: var(--admin-navy-2);
  font-size: 1rem;
}

.admin-disabled-action button {
  margin-left: auto;
  padding: .45rem .7rem;
  color: #94a3b8;
  background: #e8edf3;
  border: 0;
  border-radius: 8px;
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
}

.admin-disabled-action-danger {
  color: #9a3412;
  background: #fff7ed;
  border-color: #fdba74;
}

.admin-disabled-action-danger i {
  color: #ea580c;
}

.admin-danger-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 25px;
  background: #fffaf5;
  border-color: #fed7aa;
}

.admin-danger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  color: #c2410c;
  background: #ffedd5;
  border-radius: 14px;
  font-size: 1.2rem;
}

.admin-danger-card span {
  color: #c2410c;
}

.admin-danger-card h2 {
  margin: 5px 0 7px;
  color: #7c2d12;
  font-size: 1.2rem;
  font-weight: 800;
}

.admin-danger-card p {
  max-width: 750px;
  margin: 0;
  color: #7c2d12;
  font-size: .8rem;
  line-height: 1.65;
}

.admin-settings-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 0 22px 22px;
}

.admin-settings-list > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px;
  background: #f8fafc;
  border: 1px solid #edf0f4;
  border-radius: 12px;
}

.admin-settings-list span {
  color: var(--admin-muted);
  font-size: .7rem;
  font-weight: 700;
}

.admin-settings-list strong {
  color: var(--admin-ink);
  font-size: .85rem;
  font-weight: 800;
}

@media (max-width: 800px) {
  .admin-report-toolbar,
  .admin-filter-form,
  .admin-filter-card {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-filter-form label,
  .admin-filter-form input,
  .admin-filter-form button,
  .admin-filter-card select,
  .admin-filter-card button,
  .admin-filter-search {
    width: 100%;
  }

  .admin-filter-form button,
  .admin-filter-card button {
    width: auto;
    align-self: flex-start;
  }

  .admin-account-grid,
  .admin-rubric-grid,
  .admin-backup-grid {
    grid-template-columns: 1fr;
  }

  .admin-form-grid,
  .admin-settings-list {
    grid-template-columns: 1fr;
  }

  .admin-profile-meta {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .admin-profile-meta div {
    padding: 0 0 12px;
    border-right: 0;
    border-bottom: 1px solid #edf0f4;
  }

  .admin-profile-meta div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .admin-disabled-action {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .admin-disabled-action button {
    margin-left: 0;
  }
}

.admin-dashboard-home .admin-welcome {
  margin-top: 24px;
  padding: 24px 26px;
}

.admin-dashboard-stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin-top: 18px;
}

.admin-dashboard-stat-grid .admin-stat-card {
  min-height: 140px;
  padding: 18px 20px 16px;
}

.admin-dashboard-stat-grid .admin-stat-top {
  font-size: .72rem;
}

.admin-dashboard-stat-grid .admin-stat-top i {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  border-radius: 12px;
  font-size: 1.05rem;
}

.admin-dashboard-stat-grid .admin-stat-card strong {
  margin-top: 14px;
  font-size: 2rem;
}

.admin-dashboard-stat-grid .admin-stat-card small {
  margin-top: 6px;
  font-size: .72rem;
}

.admin-dashboard-chart-grid {
  margin-top: 20px;
}

.admin-dashboard-chart-grid .admin-chart-card {
  min-height: 360px;
  padding: 22px 24px 18px;
}

.admin-dashboard-chart-grid .admin-vertical-chart,
.admin-dashboard-chart-grid .admin-bars {
  min-height: 255px;
}

.admin-dashboard-chart-grid .admin-horizontal-chart {
  min-height: 255px;
  margin-top: 28px;
}

.admin-dashboard-chart-grid .admin-chart-head h3 {
  font-size: 1.05rem;
}

@media (max-width: 1100px) {
  .admin-dashboard-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .admin-dashboard-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .admin-dashboard-stat-grid {
    grid-template-columns: 1fr;
  }
}

.admin-dashboard-chart-grid .admin-hbar-label {
  max-height: 2.3em;
  line-height: 1.15;
  white-space: normal;
}

.admin-dashboard-chart-grid .admin-hbar-track > div.is-empty {
  min-width: 0;
}

/* Dashboard tidak mencetak kolom nilai di kanan bar, jadi grid-nya
   hanya label + bar (grid dasar punya 3 kolom + <strong>). */
.admin-dashboard-chart-grid .admin-hbar-row {
  grid-template-columns: 130px minmax(0, 1fr);
}

@media (max-width: 480px) {
  .admin-dashboard-chart-grid .admin-hbar-row {
    grid-template-columns: 95px minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .admin-dashboard-chart-grid .admin-chart-axis {
    margin-right: 22px;
    margin-left: 102px;
  }
}

.admin-dashboard {
  --admin-navy: var(--green-2);
  --admin-navy-2: var(--green-dark);
  --admin-ink: var(--ink);
  --admin-muted: var(--muted);
  --admin-line: rgba(15, 27, 45, .08);
  --admin-bg: var(--bg);
  --admin-gold: var(--amber);
  padding: 12px;
  background:
    radial-gradient(900px 480px at 88% -12%, rgba(16, 185, 129, .13), transparent 62%),
    radial-gradient(700px 420px at -12% 18%, rgba(245, 158, 11, .11), transparent 55%),
    var(--bg);
}

.admin-shell {
  max-width: 1360px;
  min-height: calc(100vh - 24px);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
}

.admin-topbar {
  min-height: 92px;
  padding: 20px 32px;
}

.admin-topbar h1 {
  font-size: 1.05rem;
}

.admin-topbar p {
  font-size: .78rem;
}

.admin-logout {
  padding: 9px 15px;
  color: var(--green-dark);
  background: #f0fdf4;
  border-color: #bbf7d0;
  box-shadow: 0 6px 12px rgba(5, 150, 105, .1);
}

.admin-logout:hover {
  color: var(--green-dark);
  background: #dcfce7;
}

.admin-shell-layout {
  grid-template-columns: 250px minmax(0, 1fr);
}

.admin-sidebar {
  padding: 22px 13px 28px;
  background: #f8fafc;
}

.admin-nav-box {
  margin: 3px 0 0;
}

.admin-nav-summary {
  min-height: 37px;
  padding: 8px 10px;
  font-size: .74rem;
}

.admin-nav-sub {
  padding: 5px;
}

.admin-nav-sub .admin-nav-link {
  min-height: 33px;
  padding: 6px 9px;
  font-size: .74rem;
}

.admin-nav-link {
  min-height: 37px;
  padding: 8px 11px;
  border-radius: 11px;
  font-size: .79rem;
}

.admin-nav-link i {
  color: var(--green-2);
}

.admin-nav-link.active {
  background: linear-gradient(135deg, var(--green), var(--green-2));
  box-shadow: 0 8px 16px rgba(5, 150, 105, .24);
}

.admin-content {
  padding: 22px 28px 32px;
}

.admin-page-head {
  padding-bottom: 15px;
}

.admin-title-line h2 {
  font-size: .98rem;
}

.admin-page-head p,
.admin-school-meta {
  font-size: .75rem;
}

.admin-welcome {
  margin-top: 18px;
  padding: 18px 22px;
  background: #f0fdf4;
  border-color: #bbf7d0;
  border-radius: 16px;
}

.admin-welcome h3 {
  font-size: 1.25rem;
}

.admin-welcome span {
  font-size: .67rem;
}

.admin-welcome p {
  font-size: .75rem;
}

.admin-stat-grid {
  gap: 12px;
}

.admin-stat-card {
  min-height: 150px;
  padding: 18px 18px 16px;
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.admin-stat-top {
  font-size: .72rem;
}

.admin-stat-top i {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  color: var(--green-2);
  background: #ecfdf5;
  border-radius: 12px;
  font-size: 1.05rem;
}

.admin-stat-card strong {
  margin-top: 13px;
  font-size: 1.9rem;
}

.admin-stat-card small {
  margin-top: 6px;
  font-size: .72rem;
}

.admin-stat-card-gold .admin-stat-top i {
  color: #d97706;
  background: #fffbeb;
}

.admin-chart-card,
.admin-list-card,
.admin-table-card,
.admin-form-card,
.admin-rubric-table-card {
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.admin-chart-card,
.admin-list-card {
  padding: 18px 20px;
}

.admin-chart-head h3,
.admin-card-heading h3 {
  font-size: .95rem;
}

.admin-bar {
  background: linear-gradient(180deg, var(--green), var(--green-2));
}

.admin-chart-legend i {
  background: var(--green-2);
}

.admin-hbar-track > div {
  background: var(--amber);
}

.admin-filter-form button,
.admin-filter-card button,
.admin-form-actions button,
.admin-toolbar-link,
.admin-toolbar-links a {
  background: linear-gradient(135deg, var(--green), var(--green-2));
  box-shadow: 0 8px 16px -10px rgba(5, 150, 105, .55);
}

.admin-filter-form button:hover,
.admin-filter-card button:hover,
.admin-form-actions button:hover,
.admin-toolbar-link:hover,
.admin-toolbar-links a:hover {
  background: var(--green-dark);
}

.admin-data-table thead th {
  color: var(--green-dark);
  background: #f0fdf4;
  border-bottom-color: #bbf7d0;
}

.admin-profile-avatar,
.admin-backup-icon {
  color: var(--green-2);
  background: #ecfdf5;
}

.admin-rubric-primary {
  border-top-color: var(--green-2);
}

.admin-rubric-secondary {
  border-top-color: var(--amber);
}

.admin-backup-icon-gold {
  color: #d97706;
  background: #fffbeb;
}

@media (max-width: 1100px) {
  .admin-shell-layout {
    grid-template-columns: 225px minmax(0, 1fr);
  }

  .admin-content {
    padding: 20px;
  }
}

.admin-dashboard-home .admin-welcome {
  margin-top: 18px;
  padding: 18px 22px;
}

.admin-dashboard-stat-grid {
  gap: 12px;
  margin-top: 14px;
}

.admin-dashboard-stat-grid .admin-stat-card {
  min-height: 132px;
  padding: 15px 17px 14px;
}

.admin-dashboard-stat-grid .admin-stat-card strong {
  margin-top: 12px;
  font-size: 1.8rem;
}

.admin-dashboard-chart-grid {
  margin-top: 16px;
}

.admin-dashboard-chart-grid .admin-chart-card {
  min-height: 330px;
  padding: 18px 20px 16px;
}

.admin-dashboard-chart-grid .admin-vertical-chart,
.admin-dashboard-chart-grid .admin-bars {
  min-height: 225px;
}

.admin-dashboard-chart-grid .admin-horizontal-chart {
  min-height: 225px;
  margin-top: 20px;
}

@media (max-width: 800px) {
  .admin-dashboard-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .admin-dashboard-stat-grid {
    grid-template-columns: 1fr;
  }
}

.admin-analytics-page {
  margin-top: -2px;
}

.admin-filter-notice {
  margin: 0 0 14px;
  border-radius: 12px;
  font-size: .76rem;
}

.admin-analytics-filter {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.admin-analytics-filter-form {
  display: flex;
  align-items: end;
  gap: 10px;
}

.admin-analytics-filter-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--admin-ink);
  font-size: .7rem;
  font-weight: 800;
}

.admin-analytics-filter-form input {
  min-width: 140px;
  min-height: 42px;
  padding: .5rem .7rem;
  color: var(--admin-ink);
  background: #fff;
  border: 1px solid var(--admin-line);
  border-radius: 10px;
  font-size: .78rem;
}

.admin-analytics-filter-form button,
.admin-export-pdf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: .6rem 1rem;
  color: var(--green-dark);
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 800;
  transition: .18s;
}

.admin-analytics-filter-form button:hover {
  background: #dcfce7;
}

/* Tombol Export PDF.
   Kontrolnya <a>, bukan <button>, jadi butuh display/alignment sendiri
   supaya tidak jatuh sebagai link biru polos. Warna amber dipakai di
   semua laporan (siswa, pembimbing, DUDI, nilai, analitik). */
.admin-export-pdf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: .6rem 1rem;
  color: #713f12;
  background: #fbbf24;
  border: 1px solid #f59e0b;
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 8px 16px -10px rgba(180, 83, 9, .65);
  transition: .18s;
}

.admin-export-pdf:hover {
  color: #713f12;
  background: #f59e0b;
}

button.admin-export-pdf {
  cursor: pointer;
  font-family: inherit;
  appearance: none;
}

.admin-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.admin-bulk-pilih {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .74rem;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
}

.admin-bulk-info {
  font-size: .72rem;
  font-weight: 700;
  color: #64748b;
  margin-right: auto;
}

.admin-bulk-hapus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: .35rem .8rem;
  color: #fff;
  background: #dc2626;
  border: 1px solid #b91c1c;
  border-radius: 8px;
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
}

.admin-dudi-modal-grid,
.admin-guru-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-dudi-modal-grid label,
.admin-guru-modal-grid label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: .72rem;
  font-weight: 700;
  color: #334155;
}

.admin-dudi-modal-grid input,
.admin-dudi-modal-grid select,
.admin-guru-modal-grid input,
.admin-guru-modal-grid select {
  min-height: 40px;
  padding: .45rem .6rem;
  font: inherit;
  font-size: .82rem;
  color: #0f172a;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
}

.admin-dudi-modal-grid input:focus,
.admin-dudi-modal-grid select:focus,
.admin-guru-modal-grid input:focus,
.admin-guru-modal-grid select:focus {
  outline: none;
  border-color: #10b981;
}

/* Tombol Edit di baris tabel Master Data.
   Murid, DUDI, dan Guru sengaja dikelompokkan dalam satu selector
   supaya dijamin tampil sama persis. Kalau menambah halaman master
   data baru, masukkan class edit-nya ke sini juga — jangan membuat
   aturan terpisah, itu penyebabnya tombol Edit Murid pernah meleset. */
.admin-student-edit,
.admin-guru-edit,
.admin-dudi-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 6px;
  padding: 0;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  background: #f0fdf4;
  color: #047857;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.admin-student-edit:hover,
.admin-guru-edit:hover,
.admin-dudi-edit:hover {
  background: #dcfce7;
  color: #047857;
}

@media (max-width: 640px) {
  .admin-dudi-modal-grid,
  .admin-guru-modal-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.admin-bulk-hapus:disabled {
  color: #94a3b8;
  background: #f1f5f9;
  border-color: #cbd5e1;
  cursor: not-allowed;
}

.admin-bulk-kolom {
  width: 38px;
  text-align: center;
}

.admin-bulk-kolom input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: #dc2626;
  cursor: pointer;
}

@media print {
  .admin-bulk-bar,
  .admin-bulk-kolom {
    display: none !important;
  }
}

.admin-health-card {
  display: grid;
  grid-template-columns: 64px minmax(200px, .8fr) minmax(0, 1.6fr);
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-top: 4px solid var(--green-2);
  border-radius: 16px;
}

.admin-health-card.is-fair {
  background: #fffbeb;
  border-color: #fde68a;
  border-top-color: var(--amber);
}

.admin-health-card.is-poor {
  background: #fff7ed;
  border-color: #fed7aa;
  border-top-color: #ea580c;
}

.admin-health-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  color: var(--green-2);
  background: #ccfbf1;
  border-radius: 16px;
  font-size: 1.4rem;
}

.admin-health-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 16px;
  border-right: 1px solid #bbf7d0;
}

.admin-health-copy span {
  color: #64748b;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.admin-health-copy strong {
  color: var(--green-dark);
  font-size: 1.35rem;
  font-weight: 800;
}

.admin-health-copy small {
  color: #64748b;
  font-size: .7rem;
}

.admin-health-card > p {
  margin: 0;
  color: #475569;
  font-size: .78rem;
  line-height: 1.55;
}

.admin-analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.admin-analytics-kpi {
  display: flex;
  min-height: 82px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 13px 15px;
  background: #fff;
  border: 1px solid var(--admin-line);
  border-radius: 14px;
}

.admin-analytics-kpi span {
  color: #64748b;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
}

.admin-analytics-kpi strong {
  color: var(--admin-navy-2);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

.admin-analytics-kpi.is-green strong { color: var(--green-2); }
.admin-analytics-kpi.is-red strong { color: #dc2626; }
.admin-analytics-kpi.is-gold strong { color: #d97706; }

.admin-analytics-card {
  overflow: hidden;
  margin-top: 16px;
  background: #fff;
  border: 1px solid var(--admin-line);
  border-top: 4px solid var(--green-2);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.admin-accent-gold { border-top-color: var(--amber); }
.admin-accent-navy { border-top-color: var(--admin-navy-2); }
.admin-accent-red { border-top-color: #dc2626; }
.admin-accent-teal { border-top-color: #0f766e; }
.admin-accent-green { border-top-color: var(--admin-navy); }

.admin-analytics-card-head {
  padding: 16px 20px 11px;
}

.admin-analytics-card-head h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--admin-ink);
  font-size: .98rem;
  font-weight: 800;
}

.admin-analytics-card-head h3 i {
  color: var(--green-2);
  font-size: 1rem;
}

.admin-analytics-card-head p {
  margin: 5px 0 0 27px;
  color: var(--admin-muted);
  font-size: .74rem;
  line-height: 1.45;
}

.admin-analytics-table {
  min-width: 620px;
  margin-bottom: 0;
}

.admin-analytics-table thead th {
  padding: .7rem 1rem;
  color: #64748b;
  background: #fafbfd;
  border-top: 1px solid #edf0f4;
  border-bottom: 1px solid var(--admin-line);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-analytics-table tbody td {
  padding: .75rem 1rem;
  color: #334155;
  border-bottom: 1px solid #edf0f4;
  font-size: .78rem;
  vertical-align: middle;
}

.admin-analytics-table tbody tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 1200px) {
  .admin-analytics-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .admin-analytics-filter,
  .admin-analytics-filter-form {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-analytics-filter-form input,
  .admin-analytics-filter-form button,
  .admin-export-pdf {
    width: 100%;
  }

  .admin-health-card {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .admin-health-copy {
    padding-right: 0;
    border-right: 0;
  }

  .admin-health-card > p {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .admin-analytics-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-health-card {
    grid-template-columns: 1fr;
  }

  .admin-health-icon {
    width: 46px;
    height: 46px;
  }
}

@media print {
  .admin-analytics-page .admin-analytics-filter,
  .admin-analytics-page .admin-filter-notice {
    display: none !important;
  }

  .admin-analytics-page .admin-analytics-card {
    break-inside: auto;
    page-break-inside: auto;
  }

  .admin-analytics-page .admin-analytics-card-head {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .admin-analytics-page .admin-analytics-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .admin-analytics-page .admin-analytics-table thead {
    display: table-header-group;
  }

  .admin-analytics-page .table-responsive {
    overflow: visible !important;
  }

  .admin-analytics-page .admin-analytics-table {
    min-width: 0;
  }
}

.admin-student-report {
  margin-top: -2px;
}

.admin-student-filter {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.admin-student-filter-form {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}

.admin-student-filter-form label {
  display: flex;
  min-width: 145px;
  flex: 1 1 145px;
  flex-direction: column;
  gap: 5px;
  color: var(--admin-ink);
  font-size: .7rem;
  font-weight: 800;
}

.admin-student-filter-form select,
.admin-student-reset,
.admin-student-filter-form button,
.admin-student-actions button {
  min-height: 42px;
  padding: .55rem .8rem;
  color: var(--admin-ink);
  background: #fff;
  border: 1px solid var(--admin-line);
  border-radius: 10px;
  font-size: .76rem;
  font-weight: 700;
}

.admin-student-filter-form select {
  min-width: 0;
  width: 100%;
}

.admin-student-reset,
.admin-student-filter-form button,
.admin-student-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}

.admin-student-reset {
  color: var(--admin-muted);
  background: #f8fafc;
  text-decoration: none;
}

.admin-student-reset:hover {
  color: #b91c1c;
  background: #fff5f5;
  border-color: #f4b8c0;
}

.admin-student-filter-form button {
  color: #fff;
  background: linear-gradient(135deg, var(--green), var(--green-2));
  border-color: transparent;
  box-shadow: 0 8px 16px -10px rgba(5, 150, 105, .55);
}

.admin-student-actions button {
  color: var(--admin-ink);
  background: #f8fafc;
}

.admin-student-profile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  background: #f0f2f6;
  border: 1px solid #cbd3df;
  border-radius: 16px;
}

/* Tiap pasangan label/nilai dibungkus .admin-student-field, jadi
   grid-nya menghitung SATU kolom per pasangan -- bukan 10 track
   (5 label + 5 nilai) seperti versi lama.

   Versi lama menulis 10 track tetap dengan minmax(150px, 1fr).
   Jumlah minimumnya: 5 label (~45px) + 5 nilai (150px, kecuali
   NISN 100px) + 9 gap 8px = ~1100px. Tapi kolom konten admin
   hanya ~990px (shell 1360 - sidebar 250 - padding konten 56 -
   padding kartu 40). Artinya grid melebar melewati kartu di
   lebar laptop biasa, dan tidak pernah kembali normal karena media
   query di bawah mengukur VIEWPORT (1100px) -- bukan lebar
   kolom -- sehingga di layar 1366px aturan desktop tetap aktif
   padahal tidak muat.

   auto-fit + minmax(0, 1fr) sekarang membagi pasangan-pasangan
   itu sesuai ruang yang benar-benar tersedia, dan otomatis
   turun ke 3 / 2 / 1 kolom tanpa perlu menebak breakpoint. */
.admin-student-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 18px;
  flex: 1;
  /* Tanpa ini, track min-content (nama DUDI yang panjang)
     ikut melebarkan grid melewati kartu. */
  min-width: 0;
}

.admin-student-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.admin-student-field strong {
  /* Nama DUDI/sekolah bisa panjang dan tanpa spasi --
     overflow-wrap:anywhere mencegahnya melebar keluar kartu. */
  overflow-wrap: anywhere;
}

.admin-student-profile span {
  color: #64748b;
  font-size: .75rem;
}

.admin-student-profile strong {
  color: var(--admin-ink);
  font-size: .8rem;
  font-weight: 800;
}

.admin-student-period {
  display: flex;
  min-width: 145px;
  flex-direction: column;
  gap: 4px;
  padding-left: 16px;
  border-left: 1px solid #cbd3df;
  text-align: right;
}

.admin-student-period span {
  color: #64748b;
  font-size: .7rem;
}

.admin-student-period strong {
  color: var(--green-dark);
  font-size: .78rem;
}

.admin-student-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.admin-student-kpi-grid article {
  display: flex;
  min-height: 76px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--admin-line);
  border-radius: 14px;
}

.admin-student-kpi-grid span {
  color: #64748b;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
}

.admin-student-kpi-grid strong {
  color: var(--admin-navy-2);
  font-size: 1.35rem;
  font-weight: 800;
}

.admin-student-card {
  overflow: hidden;
  margin-top: 16px;
  background: #fff;
  border: 1px solid var(--admin-line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.admin-student-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 20px 13px;
}

.admin-student-card-head h3 {
  margin: 0;
  color: var(--admin-ink);
  font-size: .98rem;
  font-weight: 800;
}

.admin-student-card-head > span {
  color: var(--admin-muted);
  font-size: .72rem;
}

.admin-student-card-head button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: .5rem .75rem;
  color: #b91c1c;
  background: #ef4444;
  border: 0;
  border-radius: 10px;
  font-size: .72rem;
  font-weight: 800;
  opacity: .85;
}

.admin-student-card-head button:disabled {
  cursor: not-allowed;
  opacity: .75;
  pointer-events: none;
}

.admin-student-table {
  min-width: 680px;
  margin-bottom: 0;
}

.admin-student-table thead th {
  padding: .75rem 1rem;
  color: #64748b;
  background: #fafbfd;
  border-top: 1px solid #edf0f4;
  border-bottom: 1px solid var(--admin-line);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-student-table tbody td {
  padding: .8rem 1rem;
  color: #334155;
  border-bottom: 1px solid #edf0f4;
  font-size: .78rem;
  vertical-align: middle;
}

.admin-student-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-photo-link {
  color: var(--green-dark);
  font-weight: 700;
  text-decoration: underline;
}

.admin-action-disabled {
  color: #ef4444;
  opacity: .8;
}

.admin-attendance-status {
  display: inline-flex;
  padding: .22rem .55rem;
  color: #1d4ed8;
  background: #dbeafe;
  border-radius: 50rem;
  font-size: .68rem;
  font-weight: 800;
}

.admin-attendance-status.hadir {
  color: #047857;
  background: #d1fae5;
}

.admin-attendance-status.sakit {
  color: #b45309;
  background: #fef3c7;
}

.admin-attendance-status.izin {
  color: #1d4ed8;
  background: #dbeafe;
}

.admin-attendance-status.alpha {
  color: #b91c1c;
  background: #fee2e2;
}

.admin-student-empty {
  padding: 70px 20px;
  background: #fff;
  border: 1px solid var(--admin-line);
  border-radius: 16px;
  text-align: center;
}

.admin-student-empty i {
  color: #a7b6ca;
  font-size: 2.2rem;
}

.admin-student-empty h3 {
  margin: 12px 0 4px;
  color: var(--admin-ink);
  font-size: 1rem;
}

.admin-student-empty p {
  margin: 0;
  color: var(--admin-muted);
  font-size: .78rem;
}

.admin-student-danger {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  color: var(--admin-muted);
  border-top: 1px solid var(--admin-line);
  font-size: .76rem;
}

.admin-student-danger > i {
  color: #ef4444;
  font-size: 1rem;
}

.admin-student-danger button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: .65rem .85rem;
  color: #fff;
  background: #dc2626;
  border: 0;
  border-radius: 10px;
  font-size: .72rem;
  font-weight: 800;
}

@media (max-width: 1100px) {
  .admin-student-profile {
    align-items: flex-start;
    flex-direction: column;
  }

  /* .admin-student-fields tidak perlu override kolom di sini:
     repeat(auto-fit, minmax(190px, 1fr)) sudah otomatis turun
     sendiri mengikuti lebar kolom yang tersedia. */

  .admin-student-period {
    width: 100%;
    padding: 12px 0 0;
    border-top: 1px solid #cbd3df;
    border-left: 0;
    text-align: left;
  }
}

@media (max-width: 800px) {
  .admin-student-filter,
  .admin-student-filter-form {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-student-filter-form label,
  .admin-student-reset,
  .admin-student-filter-form button,
  .admin-student-actions button {
    width: 100%;
  }

  .admin-student-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .admin-student-kpi-grid {
    grid-template-columns: 1fr;
  }

  .admin-student-danger {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .admin-student-danger button {
    width: 100%;
    margin-left: 0;
    justify-content: center;
  }
}

@media print {
  .admin-dashboard {
    padding: 0 !important;
    background: #fff !important;
  }

  .admin-shell {
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .admin-topbar,
  .admin-sidebar,
  .admin-page-head {
    display: none !important;
  }

  .admin-shell-layout {
    display: block !important;
  }

  .admin-content {
    padding: 0 !important;
  }

  .admin-student-report {
    position: static !important;
    width: auto !important;
    margin: 0 !important;
  }

  .admin-student-report .admin-student-filter,
  .admin-student-report .admin-student-actions,
  .admin-student-report .admin-student-card-head button,
  .admin-student-report .admin-student-danger,
  .admin-student-report .admin-action-disabled {
    display: none !important;
  }

  .admin-student-report .admin-student-card {
    overflow: visible;
    break-inside: auto;
    page-break-inside: auto;
  }

  .admin-student-report .admin-student-card-head {
    break-after: avoid;
    page-break-after: avoid;
  }

  .admin-student-report .admin-student-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .admin-student-report .admin-student-table thead {
    display: table-header-group;
  }

  .admin-student-report .table-responsive {
    overflow: visible !important;
  }

  .admin-student-report .admin-student-table {
    min-width: 0;
  }
}

.admin-teacher-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  background: #f0f2f6;
  border: 1px solid #cbd3df;
  border-radius: 16px;
}

.admin-teacher-summary > div:first-child {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.admin-teacher-summary span {
  color: #64748b;
  font-size: .75rem;
}

.admin-teacher-summary strong {
  color: var(--admin-ink);
  font-size: .82rem;
  font-weight: 800;
}

.admin-teacher-summary strong:not(:last-child) {
  margin-right: 14px;
}

.admin-teacher-table {
  min-width: 850px;
}

@media (max-width: 800px) {
  .admin-teacher-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-teacher-summary .admin-student-period {
    width: 100%;
  }
}

.admin-dudi-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  background: #f0f2f6;
  border: 1px solid #cbd3df;
  border-radius: 16px;
}

.admin-dudi-summary > div:first-child {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  gap: 6px 10px;
  flex: 1;
}

.admin-dudi-summary span {
  color: #64748b;
  font-size: .75rem;
}

.admin-dudi-summary strong {
  color: var(--admin-ink);
  font-size: .8rem;
  font-weight: 800;
}

.admin-dudi-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.admin-dudi-kpi-grid article {
  display: flex;
  min-height: 76px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--admin-line);
  border-radius: 14px;
}

.admin-dudi-kpi-grid span {
  color: #64748b;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
}

.admin-dudi-kpi-grid strong {
  color: var(--admin-navy-2);
  font-size: 1.35rem;
  font-weight: 800;
}

.admin-dudi-student-table {
  min-width: 620px;
}

.admin-dudi-attendance-table {
  min-width: 650px;
}

.admin-dudi-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 7px;
  font-size: .72rem;
  font-weight: 800;
}

.admin-dudi-status.has-attendance,
.admin-dudi-legend .has-attendance {
  color: #047857;
  background: #d1fae5;
}

.admin-dudi-status.is-sakit,
.admin-dudi-legend .is-sakit {
  color: #b45309;
  background: #fef3c7;
}

.admin-dudi-status.is-izin,
.admin-dudi-legend .is-izin {
  color: #1d4ed8;
  background: #dbeafe;
}

.admin-dudi-status.is-alpha,
.admin-dudi-legend .is-alpha {
  color: #b91c1c;
  background: #fee2e2;
}

.admin-dudi-status.no-attendance {
  color: #94a3b8;
  background: #f1f5f9;
}

.admin-dudi-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 20px 16px;
  color: var(--admin-muted);
  font-size: .7rem;
}

.admin-dudi-legend span {
  padding: .18rem .45rem;
  border-radius: 5px;
  font-weight: 700;
}

@media (max-width: 1100px) {
  .admin-dudi-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-dudi-summary > div:first-child {
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .admin-dudi-summary .admin-student-period {
    width: 100%;
  }
}

@media (max-width: 800px) {
  .admin-dudi-summary > div:first-child {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .admin-dudi-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .admin-dudi-kpi-grid {
    grid-template-columns: 1fr;
  }
}

.admin-grade-report {
  margin-top: -2px;
}

.admin-grade-heading {
  margin-bottom: 14px;
}

.admin-grade-heading h3 {
  margin: 0;
  color: var(--admin-ink);
  font-size: 1rem;
  font-weight: 800;
}

.admin-grade-heading p {
  margin: 4px 0 0;
  color: var(--admin-muted);
  font-size: .74rem;
}

.admin-grade-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}

.admin-grade-search {
  display: flex;
  flex: 1 1 230px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--admin-line);
  border-radius: 10px;
}

.admin-grade-search i {
  color: var(--admin-muted);
}

.admin-grade-search input {
  width: 100%;
  min-height: 40px;
  color: var(--admin-ink);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: .78rem;
}

.admin-grade-filter select,
.admin-grade-filter button {
  min-height: 42px;
  padding: .55rem .8rem;
  color: var(--admin-ink);
  background: #fff;
  border: 1px solid var(--admin-line);
  border-radius: 10px;
  font-size: .76rem;
  font-weight: 700;
}

.admin-grade-filter select {
  min-width: 140px;
}

.admin-grade-filter button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}

.admin-grade-filter button[type="submit"] {
  color: #fff;
  background: linear-gradient(135deg, var(--green), var(--green-2));
  border-color: transparent;
}

.admin-grade-tool:disabled {
  color: var(--admin-muted);
  cursor: not-allowed;
  opacity: .7;
}

/* Baris filter Rekap Nilai memakai kontrol setinggi 42px, jadi tombol
   Export PDF di sana ikut disamakan tingginya. */
.admin-grade-filter .admin-export-pdf {
  min-height: 42px;
}

/* Tombol Reset: kembali ke URL polos, tampil kembali tanpa filter */
.admin-grade-filter .admin-grade-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: .55rem .9rem;
  color: var(--admin-ink);
  background: #fff;
  border: 1px solid var(--admin-line);
  border-radius: 10px;
  font-size: .76rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}

.admin-grade-filter .admin-grade-reset:hover {
  color: #b91c1c;
  background: #fff5f5;
  border-color: #f4b8c0;
}

.admin-grade-table-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--admin-line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.admin-grade-table {
  min-width: 860px;
  margin-bottom: 0;
}

.admin-grade-table thead th {
  padding: .7rem .8rem;
  color: #64748b;
  background: #fafbfd;
  border-bottom: 1px solid var(--admin-line);
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.35;
  text-transform: uppercase;
  vertical-align: bottom;
  white-space: nowrap;
}

.admin-grade-table tbody td {
  padding: .75rem .8rem;
  color: #334155;
  border-bottom: 1px solid #edf0f4;
  font-size: .75rem;
  vertical-align: middle;
}

.admin-grade-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-grade-table td small {
  display: block;
  margin-top: 3px;
  color: var(--admin-muted);
  font-size: .66rem;
}

.admin-grade-predicate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 25px;
  height: 25px;
  padding: 0 .3rem;
  border-radius: 7px;
  font-size: .72rem;
  font-weight: 800;
}

.admin-grade-predicate.is-A { color: #047857; background: #d1fae5; }
.admin-grade-predicate.is-B { color: #1d4ed8; background: #dbeafe; }
.admin-grade-predicate.is-C { color: #b45309; background: #fef3c7; }
.admin-grade-predicate.is-D,
.admin-grade-predicate.is-E { color: #b91c1c; background: #fee2e2; }
.admin-grade-predicate.is-empty { color: #94a3b8; background: #f1f5f9; }

.admin-grade-rubric {
  max-width: 150px;
  color: #334155;
  font-size: .7rem;
  line-height: 1.35;
}

.admin-grade-rubric small {
  color: var(--admin-muted);
}

.admin-grade-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  color: var(--admin-muted);
  border-top: 1px solid #edf0f4;
  font-size: .72rem;
}

.admin-grade-pagination > div:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
}

.admin-grade-pagination form {
  display: inline-flex;
}

.admin-grade-pagination select {
  min-height: 30px;
  padding: .2rem 1.4rem .2rem .5rem;
  color: var(--admin-ink);
  background: #fff;
  border: 1px solid var(--admin-line);
  border-radius: 7px;
  font-size: .72rem;
}

.admin-grade-pages {
  display: flex;
  align-items: center;
  gap: 9px;
}

.admin-grade-pages a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--admin-ink);
  background: #fff;
  border: 1px solid var(--admin-line);
  border-radius: 8px;
}

.admin-grade-pages a.is-disabled {
  color: #cbd5e1;
  pointer-events: none;
}

.admin-grade-pages span {
  white-space: nowrap;
}

@media (max-width: 800px) {
  .admin-grade-filter {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-grade-search,
  .admin-grade-filter select,
  .admin-grade-filter button {
    width: 100%;
  }

  .admin-grade-pagination {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

@media print {
  .admin-grade-report .admin-grade-filter,
  .admin-grade-report .admin-grade-pagination {
    display: none !important;
  }

  .admin-grade-report .admin-grade-table-card {
    overflow: visible;
    break-inside: auto;
  }

  .admin-grade-report .admin-grade-table thead {
    display: table-header-group;
  }

  .admin-grade-report .table-responsive {
    overflow: visible !important;
  }

  .admin-grade-report .admin-grade-table {
    min-width: 0;
  }
}

.admin-jurusan-print-title {
  display: none;
}

.admin-jurusan-page {
  margin-top: -2px;
}

.admin-jurusan-add-form {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto auto;
  gap: 10px;
  margin-bottom: 16px;
}

.admin-jurusan-add-form input,
.admin-jurusan-add-form button,
.admin-jurusan-add-form a {
  min-height: 44px;
  border-radius: 11px;
  font-size: .8rem;
  font-weight: 700;
}

.admin-jurusan-add-form input {
  min-width: 0;
  padding: .65rem .85rem;
  color: var(--admin-ink);
  background: #fff;
  border: 1px solid var(--admin-line);
}

.admin-jurusan-add-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: .6rem 1.2rem;
  color: #fff;
  background: var(--admin-navy-2);
  border: 0;
  box-shadow: 0 8px 16px -10px rgba(5, 150, 105, .55);
}

.admin-jurusan-add-form a {
  display: inline-flex;
  align-items: center;
  padding: .6rem .85rem;
  color: var(--admin-muted);
  background: #f8fafc;
  border: 1px solid var(--admin-line);
}

.admin-jurusan-search {
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(100%, 410px);
  min-height: 44px;
  margin-bottom: 14px;
  padding: 0 13px;
  background: #fff;
  border: 1px solid var(--admin-line);
  border-radius: 11px;
}

.admin-jurusan-search i {
  color: var(--admin-muted);
}

.admin-jurusan-search input {
  width: 100%;
  min-height: 42px;
  color: var(--admin-ink);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: .8rem;
}

.admin-jurusan-table-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--admin-line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.admin-jurusan-table {
  min-width: 560px;
  margin-bottom: 0;
}

.admin-jurusan-table thead th {
  padding: .75rem 1rem;
  color: #64748b;
  background: #fafbfd;
  border-bottom: 1px solid var(--admin-line);
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-jurusan-table tbody td {
  padding: .9rem 1rem;
  color: #334155;
  border-bottom: 1px solid #edf0f4;
  font-size: .8rem;
}

.admin-jurusan-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-jurusan-edit {
  color: inherit;
}

.admin-jurusan-edit:hover {
  color: var(--admin-ink);
}

.admin-jurusan-delete-form {
  display: inline;
}

.admin-jurusan-delete {
  padding: 0;
  color: var(--admin-ink);
  background: transparent;
  border: 0;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
}

.admin-jurusan-delete:hover {
  color: #dc2626;
}

.admin-jurusan-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  color: var(--admin-muted);
  border-top: 1px solid #edf0f4;
  font-size: .72rem;
}

.admin-jurusan-pagination > div:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
}

.admin-jurusan-pagination form {
  display: inline-flex;
}

.admin-jurusan-pagination select {
  min-height: 30px;
  padding: .2rem 1.4rem .2rem .5rem;
  color: var(--admin-ink);
  background: #fff;
  border: 1px solid var(--admin-line);
  border-radius: 7px;
  font-size: .72rem;
}

@media (max-width: 800px) {
  .admin-jurusan-add-form {
    grid-template-columns: 1fr;
  }

  .admin-jurusan-add-form input,
  .admin-jurusan-add-form button,
  .admin-jurusan-add-form a {
    width: 100%;
  }

  .admin-jurusan-search {
    width: 100%;
  }

  .admin-jurusan-pagination,
  .admin-jurusan-pagination > div,
  .admin-jurusan-pagination form {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

@media print {
  .admin-jurusan-print-title {
    display: block;
    margin-bottom: 14px;
    color: var(--admin-ink);
    font-size: 1.1rem;
    font-weight: 800;
  }

  .admin-jurusan-page .admin-jurusan-add-form,
  .admin-jurusan-page .admin-jurusan-search,
  .admin-jurusan-page .admin-jurusan-pagination {
    display: none !important;
  }

  .admin-jurusan-page .admin-jurusan-table-card {
    overflow: visible;
  }

  .admin-jurusan-page .admin-jurusan-table {
    min-width: 0;
  }

  .admin-jurusan-page .admin-jurusan-table th:last-child,
  .admin-jurusan-page .admin-jurusan-table td:last-child {
    display: none;
  }
}

.admin-rubric-editor {
  display: grid;
  gap: 16px;
}

.admin-rubric-notice,
.admin-rubric-program-filter,
.admin-rubric-mapel-card,
.admin-rubric-editor-card {
  background: #fff;
  border: 1px solid var(--admin-line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.admin-rubric-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  color: #eafff5;
  background: linear-gradient(120deg, #065f46, #0b8a64);
}

.admin-rubric-notice > div {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.admin-rubric-notice i {
  margin-top: 2px;
  font-size: 1.4rem;
}

.admin-rubric-notice strong,
.admin-rubric-notice p {
  display: block;
}

.admin-rubric-notice p {
  margin: 5px 0 0;
  color: #c9f4e2;
  font-size: .76rem;
}

.admin-rubric-notice > span {
  padding-left: 18px;
  border-left: 1px solid rgba(255, 255, 255, .22);
  font-size: .7rem;
  line-height: 1.5;
  text-align: right;
}

.admin-rubric-notice small {
  color: #b8ead9;
  font-size: .65rem;
}

.admin-rubric-program-filter {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
}

.admin-rubric-program-filter label {
  color: var(--admin-ink);
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
}

.admin-rubric-program-filter select {
  min-width: 280px;
  min-height: 42px;
  padding: .55rem .8rem;
  color: var(--admin-ink);
  background: #f8fafc;
  border: 1px solid var(--admin-line);
  border-radius: 10px;
  font-size: .8rem;
}

.admin-rubric-mapel-card,
.admin-rubric-editor-card {
  padding: 20px;
}

.admin-rubric-mapel-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 18px;
}

.admin-rubric-mapel-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 12px;
  color: var(--admin-ink);
  background: #f8fafc;
  border: 1px solid var(--admin-line);
  border-radius: 11px;
  text-decoration: none;
}

.admin-rubric-mapel-item:hover,
.admin-rubric-mapel-item.is-active {
  color: var(--admin-ink);
  background: #effcf6;
  border-color: #86d8b6;
}

.admin-rubric-mapel-item span {
  padding: 4px 7px;
  color: #047857;
  background: #d5f7e7;
  border-radius: 6px;
  font-size: .66rem;
  font-weight: 800;
}

.admin-rubric-mapel-item strong {
  overflow: hidden;
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-rubric-mapel-item i {
  color: var(--admin-muted);
}

.admin-rubric-add-mapel,
.admin-rubric-add-element {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 160px;
  gap: 9px;
  padding-top: 16px;
  border-top: 1px solid #edf0f4;
}

.admin-rubric-add-element {
  grid-template-columns: 1.2fr 1.2fr 120px 120px 1fr 1fr auto;
  padding-top: 0;
  border-top: 0;
}

.admin-rubric-add-mapel input,
.admin-rubric-add-element input,
.admin-rubric-add-element textarea,
.admin-rubric-editor-card input,
.admin-rubric-editor-card textarea {
  width: 100%;
  min-height: 42px;
  padding: .55rem .7rem;
  color: var(--admin-ink);
  background: #f8fafc;
  border: 1px solid var(--admin-line);
  border-radius: 9px;
  font-size: .76rem;
}

.admin-rubric-add-mapel button,
.admin-rubric-add-element button,
.admin-rubric-editor-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: .55rem .9rem;
  color: #fff;
  background: var(--admin-navy-2);
  border: 0;
  border-radius: 9px;
  font-size: .75rem;
  font-weight: 800;
}

/* ============================================================
   CATATAN: GRID RUBRIK YANG MELEBIH LEBAR LAYAR
   ------------------------------------------------------------
   CATATAN SAJA, bukan perbaikan. Perbaikannya ada di blok
   "GRID LEBAR YANG TIDAK BISA DIGESER" di bagian bawah
   berkas, karena hanya blok di situ yang terletak SETELAH
   aturan dasarnya.

   .admin-rubric-elements (min-width 920px) dan
   .admin-rubric-reference-table (min-width 700px) adalah CSS
   GRID, bukan <table>, jadi tidak ikut tertangkap pembungkus
   .table-responsive yang menyelamatkan <table> di bagian atas
   berkas.

   .admin-rubric-reference-table sudah punya override
   min-width:0 di @media (max-width:700px). Yang bermasalah
   adalah .admin-rubric-elements (min-width 920px) dan
   .admin-rubric-reference-card (overflow:hidden): keduanya
   membuat isinya terpotong tanpa bisa digeser.

   Kenapa tidak diperbaiki di sini: aturan dasar keduanya
   berada DI BAWAH blok ini dengan specificity yang sama.
   Media query tidak menambah specificity, jadi media query
   yang diletakkan sebelum aturan dasar akan kalah diam-diam
   dan perbaikannya tidak akan pernah berlaku.
   ============================================================ */
.admin-rubric-program-card {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-rubric-total {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: .72rem;
  font-weight: 800;
}

.admin-rubric-total span {
  margin: 0 4px;
  color: var(--admin-muted);
}

.admin-rubric-total.is-valid {
  color: #047857;
  background: #dcfce7;
}

.admin-rubric-total.is-invalid {
  color: #b45309;
  background: #fef3c7;
}

.admin-rubric-elements {
  min-width: 920px;
  margin-bottom: 0;
}

.admin-rubric-elements th {
  padding: .7rem .8rem;
  color: #64748b;
  background: #fafbfd;
  border-bottom: 1px solid var(--admin-line);
  font-size: .67rem;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-rubric-elements td {
  padding: .75rem .8rem;
  border-bottom: 1px solid #edf0f4;
  vertical-align: top;
}

.admin-rubric-elements td:first-child {
  min-width: 170px;
}

.admin-rubric-elements td > strong {
  font-size: .76rem;
}

.admin-rubric-elements input {
  min-width: 90px;
}

.admin-rubric-elements textarea {
  min-height: 58px;
  resize: vertical;
}

.admin-rubric-editor-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
}

@media (max-width: 900px) {
  .admin-rubric-notice,
  .admin-rubric-program-filter {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-rubric-notice > span {
    padding-top: 10px;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .22);
    border-left: 0;
    text-align: left;
  }

  .admin-rubric-program-filter select {
    width: 100%;
    min-width: 0;
  }

  .admin-rubric-add-element {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 650px) {
  .admin-rubric-mapel-list,
  .admin-rubric-add-mapel,
  .admin-rubric-add-element {
    grid-template-columns: 1fr;
  }

  .admin-rubric-editor-card,
  .admin-rubric-mapel-card {
    padding: 14px;
  }
}

.admin-content > .admin-rubric-reference {
  margin-top: 20px;
}

.admin-rubric-reference {
  max-width: 1120px;
  margin: 20px auto 0;
  color: var(--admin-ink);
}

.admin-rubric-reference-header {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 14px 18px;
  border-top: 1px solid #d8dee8;
  border-bottom: 3px solid var(--admin-ink);
}

.admin-rubric-reference-header > div,
.admin-rubric-reference-card > header > div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.admin-rubric-reference-header i,
.admin-rubric-reference-card > header i {
  margin-top: 2px;
  font-size: 1.25rem;
}

.admin-rubric-reference-header h3,
.admin-rubric-reference-card h3,
.admin-rubric-reference-card h4,
.admin-rubric-preview-heading h3 {
  margin: 0;
  color: var(--admin-ink);
  font-weight: 800;
}

.admin-rubric-reference-header h3 {
  font-size: 1rem;
}

.admin-rubric-reference-header p,
.admin-rubric-reference-card header p,
.admin-rubric-preview-heading p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: .73rem;
  line-height: 1.55;
}

.admin-rubric-preview-heading {
  padding: 24px 2px 14px;
}

.admin-rubric-preview-heading h3 {
  font-size: 1.12rem;
}

.admin-rubric-preview-heading p {
  max-width: 980px;
}

.admin-rubric-reference-card {
  margin-bottom: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d7e0ea;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
}

.admin-rubric-dudi-card {
  border-top: 3px solid #f0b323;
}

.admin-rubric-pembimbing-card {
  border-top: 3px solid var(--admin-ink);
}

.admin-rubric-reference-card > header {
  padding: 18px 20px 14px;
}

.admin-rubric-reference-card > header h3 {
  font-size: .92rem;
}

.admin-rubric-reference-card > header strong {
  color: var(--admin-ink);
}

.admin-rubric-qualification {
  margin: 0 20px 14px;
  padding: 11px 14px;
  color: #334155;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-size: .75rem;
  line-height: 1.55;
}

.admin-rubric-qualification strong {
  color: var(--admin-ink);
}

.admin-rubric-program-card {
  margin: 0 20px 16px;
  overflow-x: auto;
  border: 1px solid #bfdbfe;
  border-radius: 15px;
}

.admin-rubric-program-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 15px;
  background: #f8fbff;
  border-bottom: 1px solid #dbeafe;
}

.admin-rubric-program-card h4 {
  font-size: .95rem;
}

.admin-rubric-program-card > header span {
  padding: 4px 8px;
  color: #475569;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  font-size: .62rem;
  font-weight: 800;
  white-space: nowrap;
}

.admin-rubric-reference-table {
  min-width: 700px;
  display: grid;
  grid-template-columns: minmax(220px, 34%) 1fr;
}

.admin-rubric-table-head,
.admin-rubric-table-row {
  display: contents;
}

.admin-rubric-table-head > span,
.admin-rubric-table-row > span {
  padding: 9px 15px;
  border-bottom: 1px solid #e2e8f0;
  font-size: .74rem;
  line-height: 1.5;
}

.admin-rubric-table-head > span {
  color: #64748b;
  background: #f8fafc;
  font-weight: 500;
}

.admin-rubric-table-row > span:first-child {
  color: #334155;
}

.admin-rubric-table-row:last-child > span {
  border-bottom: 0;
}

.admin-rubric-scale {
  padding: 14px 2px 22px;
  color: #64748b;
  font-size: .7rem;
}

.admin-rubric-scale strong {
  color: var(--admin-ink);
}

.admin-rubric-reference-footer {
  padding: 26px 12px 10px;
  border-top: 1px solid #d8dee8;
  color: #64748b;
  font-size: .75rem;
  text-align: center;
}

@media (max-width: 700px) {
  .admin-rubric-reference-header,
  .admin-rubric-program-card > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-rubric-reference-table {
    min-width: 0;
    display: block;
  }

  .admin-rubric-table-head,
  .admin-rubric-table-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .admin-rubric-table-head > span,
  .admin-rubric-table-row > span {
    padding: 8px 12px;
  }

  .admin-rubric-table-head > span {
    display: none;
  }

  .admin-rubric-table-row > span:first-child {
    padding-bottom: 0;
    border-bottom: 0;
    font-weight: 800;
  }

  .admin-rubric-table-row > span:last-child {
    padding-top: 3px;
  }
}

@media print {
  .admin-rubric-reference-header {
    border-top: 0;
  }

  .admin-rubric-program-card {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none;
  }
}

.admin-student-page {
  display: grid;
  gap: 18px;
  margin-top: -2px;
}

.admin-student-import,
.admin-student-add,
.admin-murid-table-card {
  background: #f4f7fb;
  border: 1px solid #9eb3d0;
  border-radius: 13px;
}

.admin-student-import,
.admin-student-add {
  padding: 15px 17px;
}

.admin-student-import-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  /* Judul "Import Data Siswa" dan kontrol di sebelahnya bisa
     tidak muat satu baris di 320px. Tanpa wrap, lebar judul
     (min-width:auto sebagai flex item) mendorong kontrol ke
     luar tepi dan memotongnya. */
  flex-wrap: wrap;
}

.admin-student-import-head strong {
  color: var(--admin-ink);
  font-size: .78rem;
}

.admin-student-import-head i {
  margin-right: 4px;
}

.admin-student-template {
  min-height: 34px;
  padding: .35rem .7rem;
  color: var(--admin-ink);
  background: #edf3fb;
  border: 1px solid #b6c8e0;
  border-radius: 8px;
  font-size: .7rem;
  font-weight: 800;
}

.admin-student-import input[type="file"] {
  min-height: 40px;
  padding: .35rem .55rem;
  background: #fff;
  border-color: #b7c5d8;
  border-radius: 9px;
  font-size: .75rem;
}

.admin-student-import small {
  display: block;
  margin-top: 9px;
  color: #64748b;
  font-size: .65rem;
  line-height: 1.45;
}

.admin-student-import code {
  color: #475569;
  font-size: .64rem;
}

.admin-student-section-title {
  margin-bottom: 10px;
  color: var(--admin-ink);
  font-size: .78rem;
  font-weight: 800;
}

.admin-student-form-grid {
  display: grid;
   /* minmax(0, ...) di semua track form grid, bukan hanya filter.
     1fr = minmax(auto, 1fr), dan lantai auto itu berasal dari
     min-width:default kontrol formulir (~170-190px pada font
     16px yang dipaksa aturan anti-zoom iOS). Tiga track 1fr
     seperti ini butuh ~510px dan tidak pernah muat di HP. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.admin-student-form-grid input,
.admin-student-form-grid select {
  width: 100%;
  min-height: 42px;
  padding: .55rem .75rem;
  color: var(--admin-ink);
  background: #fff;
  border: 1px solid #b7c5d8;
  border-radius: 9px;
  font-size: .76rem;
}

.admin-student-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.admin-student-form-actions button {
  min-height: 38px;
  padding: .45rem .9rem;
  color: #fff;
  background: var(--admin-ink);
  border: 0;
  border-radius: 9px;
  font-size: .75rem;
  font-weight: 800;
}

.admin-student-form-actions a {
  color: var(--admin-muted);
  font-size: .74rem;
}

/* minmax(0, 1fr), BUKAN 1fr.
   1fr sebenarnya minmax(auto, 1fr): panjang <option> terpanjang
   menjadi lantai min-content track. Daftar DUDI memuat nama
   perusahaan penuh seperti "PT Bank Rakyat Indonesia (Persero)
   Tbk." yang pada font 16px (dipaksa oleh aturan anti-zoom iOS
   di bawah 820px) jauh lebih lebar dari 320px. Akibatnya satu
   select DUDI sudah cukup untuk melebarkan track lebih dari layar.
   minmax(0, 1fr) menghapus lantai itu dan membiarkan teks terpotong
   di dalam select, yang jauh lebih baik daripada seluruh tabel
   terdorong keluar layar. */
/* min-width:0 pada label dan select filter.
   Track grid punya lantai min-content dari anak-anaknya. Tanpa
   min-width:0, <select> ikut menentukan lebarnya sebesar teks
   <option> terpanjang -- pada halaman DUDI dan instruktur itu
   nama perusahaan penuh. */
.admin-dudi-filters label,
.admin-dudi-filters select,
.admin-guru-filters label,
.admin-guru-filters select,
.admin-instruktur-filters label,
.admin-instruktur-filters select,
.admin-student-filters label,
.admin-student-filters select {
  min-width: 0;
  max-width: 100%;
}

.admin-student-filters {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}

.admin-student-filters label {
  display: grid;
  gap: 5px;
  color: #475569;
  font-size: .72rem;
  font-weight: 800;
}

.admin-student-filters label > div {
  position: relative;
}

.admin-student-filters label > div i {
  position: absolute;
  top: 50%;
  left: 12px;
  color: var(--admin-muted);
  transform: translateY(-50%);
}

.admin-student-filters input,
.admin-student-filters select {
  width: 100%;
  min-height: 42px;
  padding: .5rem .7rem;
  color: var(--admin-ink);
  background: #fff;
  border: 1px solid #b7c5d8;
  border-radius: 9px;
  font-size: .74rem;
}

.admin-student-filters label > div input {
  padding-left: 34px;
}

.admin-murid-table-card {
  overflow: hidden;
  background: #fff;
  border-radius: 0;
}

.admin-murid-table {
  min-width: 760px;
  margin-bottom: 0;
}

.admin-murid-table thead th {
  padding: .75rem .8rem;
  color: #64748b;
  background: #f7f9fc;
  border-bottom: 1px solid #cbd5e1;
  font-size: .72rem;
  font-weight: 500;
}

.admin-murid-table tbody td {
  padding: .78rem .8rem;
  color: #1e293b;
  border-bottom: 1px solid #d9e1eb;
  font-size: .73rem;
  vertical-align: middle;
}

.admin-murid-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-student-edit,
.admin-student-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 28px;
  margin-left: 9px;
  border-radius: 7px;
  text-decoration: none;
}

.admin-student-edit {
  color: var(--admin-ink);
}

.admin-student-edit:hover {
  color: #fff;
  background: var(--admin-ink);
}

.admin-student-delete {
  color: #ef4444;
}

.admin-student-delete:hover {
  color: #fff;
  background: #ef4444;
}

.admin-student-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  color: #64748b;
  background: #f4f7fb;
  border-top: 1px solid #cbd5e1;
  font-size: .68rem;
}

.admin-student-pagination form {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-student-pagination select {
  min-height: 30px;
  padding: .2rem .7rem;
  color: var(--admin-ink);
  background: #fff;
  border: 1px solid #b7c5d8;
  border-radius: 7px;
  font-size: .7rem;
}

.admin-student-pagination > div {
  display: flex;
  align-items: center;
  gap: 5px;
}

.admin-student-pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--admin-ink);
  background: #edf3fb;
  border: 1px solid #b6c8e0;
  border-radius: 7px;
  text-decoration: none;
}

.admin-student-pagination a.is-disabled {
  color: #a7b4c5;
  pointer-events: none;
}

@media (max-width: 900px) {
  .admin-student-form-grid,
  .admin-student-filters {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .admin-student-form-grid,
  .admin-student-filters {
    /* minmax(0, 1fr), bukan 1fr. 1fr = minmax(auto, 1fr), dan
       lantai auto itu berasal dari teks <option> terpanjang --
       justru masalah yang sedang diperbaiki di sini. */
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-student-pagination,
  .admin-student-pagination > div,
  .admin-student-pagination form {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

@media print {
  .admin-student-import,
  .admin-student-add,
  .admin-student-filters {
    display: none;
  }

  .admin-murid-table-card {
    border: 0;
  }

  .admin-student-pagination {
    display: none;
  }

  .admin-murid-table th:last-child,
  .admin-murid-table td:last-child {
    display: none;
  }
}

.admin-student-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.admin-student-modal-grid label {
  display: grid;
  gap: 5px;
  color: #475569;
  font-size: .72rem;
  font-weight: 700;
}

.admin-student-modal-grid input,
.admin-student-modal-grid select {
  width: 100%;
  min-height: 40px;
  padding: .5rem .7rem;
  color: var(--admin-ink);
  background: #fff;
  border: 1px solid #b7c5d8;
  border-radius: 8px;
  font-size: .76rem;
}

.admin-student-import form,
.admin-dudi-import form,
.admin-guru-import form,
.admin-instruktur-import form {
  display: flex;
  align-items: center;
  gap: 9px;
  /* flex-wrap WAJIB. Tanpa ini, <input type="file"> (yang punya
     lebar default ~230px, dan lebih lebar lagi di iOS Safari)
     ditambah tombol yang white-space:nowrap memaksa baris
     menjadi ~345px di dalam container yang hanya ~283px di
     layar 375px. Section-nya adalah grid item, dan grid item
     punya min-width:auto -- jadi min-content baris ini ikut
     melebarkan seluruh track grid, halaman melebar, lalu
     overflow:hidden memotong sisanya. Gejalanya: tombol
     "Mulai Impor" hilang di tepi kanan. */
  flex-wrap: wrap;
}

/* Input file diberi basis yang boleh menyusut. Nilai aslinya
   sekarang tidak batasi lebarnya sama sekali. */
.admin-student-import input[type="file"],
.admin-dudi-import input[type="file"],
.admin-guru-import input[type="file"],
.admin-instruktur-import input[type="file"] {
  flex: 1 1 180px;
  min-width: 0;
  max-width: 100%;
}

/* Tombol import pindah ke baris sendiri saat tidak cukup
   ruang, dan tidak lagi butuh nowrap karena tidak lagi
   berbagi baris dengan input file yang lebar. */
.admin-student-import form button,
.admin-dudi-import form button,
.admin-guru-import form button,
.admin-instruktur-import form button {
  flex: 0 1 auto;
  max-width: 100%;
  white-space: normal;
}

.admin-student-import form button,
.admin-dudi-import form button,
.admin-guru-import form button,
.admin-instruktur-import form button {
  min-height: 38px;
  padding: .45rem .8rem;
  color: #fff;
  background: var(--admin-ink);
  border: 0;
  border-radius: 8px;
  font-size: .72rem;
  font-weight: 800;
}

@media (max-width: 600px) {
  .admin-student-modal-grid {
    grid-template-columns: 1fr;
  }
}

.admin-backup-page,
.admin-clear-page {
  max-width: 980px;
  margin: 20px auto 0;
}

.admin-backup-download,
.admin-backup-restore,
.admin-clear-card {
  margin-bottom: 18px;
  padding: 20px;
  background: #fff;
  border: 1px solid #b8c8dc;
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.admin-backup-card-head,
.admin-clear-head {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.admin-backup-card-head > i,
.admin-clear-head > i {
  color: var(--admin-ink);
  font-size: 1.2rem;
}

.admin-backup-card-head h3,
.admin-clear-head h3 {
  margin: 0;
  color: var(--admin-ink);
  font-size: .95rem;
  font-weight: 800;
}

.admin-backup-card-head p,
.admin-clear-head p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: .73rem;
  line-height: 1.5;
}

.admin-backup-formats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 14px;
}

.admin-backup-formats a {
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 10px 12px;
  color: var(--admin-ink);
  background: #fff;
  border: 1px solid #c7d3e2;
  border-radius: 10px;
  text-decoration: none;
}

.admin-backup-formats a:hover,
.admin-backup-formats a.is-active {
  background: #eef3f9;
  border-color: #8fa5c2;
}

/* Pemilih format backup sekarang <button> di dalam <form>, bukan
   <a> langsung, karena unduhan backup wajib POST + token CSRF.
   Form-nya dibuat display:contents supaya tombolnya tetap menjadi
   anak grid dan jarak/grid 4 kolom di atas tidak berubah. */
.admin-backup-format-form {
  display: contents;
}

.admin-backup-formats .admin-backup-format {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 58px;
  padding: 10px 12px;
  color: var(--admin-ink);
  text-align: left;
  background: #fff;
  border: 1px solid #c7d3e2;
  border-radius: 10px;
  font-family: inherit;
  appearance: none;
  cursor: pointer;
  transition: .18s;
}

.admin-backup-formats .admin-backup-format:hover,
.admin-backup-formats .admin-backup-format.is-active {
  background: #eef3f9;
  border-color: #8fa5c2;
}

.admin-backup-formats strong {
  font-size: .75rem;
}

.admin-backup-formats small {
  color: #64748b;
  font-size: .65rem;
}

.admin-backup-download-button,
.admin-backup-restore button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: .55rem .9rem;
  color: #fff;
  background: var(--admin-ink);
  border: 0;
  border-radius: 9px;
  font-size: .75rem;
  font-weight: 800;
  text-decoration: none;
}

/* Tombol unduh backup dipakai sebagai <button type="submit">, bukan
   <a>, karena unduhannya POST + token CSRF. */
button.admin-backup-download-button {
  font-family: inherit;
  appearance: none;
  cursor: pointer;
  transition: .18s;
}

button.admin-backup-download-button:hover {
  filter: brightness(1.12);
}

/* Formulir verifikasi password memakai struktur class yang sama dengan
   form restore (label + input + tombol), supaya keduanya tampil
   konsisten. Sebelumnya markup verifikasi tidak punya class sama
   sekali, sehingga button-nya jatuh ke tampilan bawaan browser. */
.admin-backup-restore form,
.admin-backup-reauth-form {
  display: grid;
  gap: 13px;
  margin-top: 18px;
}

.admin-backup-restore label,
.admin-backup-reauth-form label {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: .74rem;
  font-weight: 800;
}

.admin-restore-confirm {
  display: flex !important;
  align-items: center;
  gap: 7px !important;
  color: #64748b !important;
  font-size: .7rem !important;
  font-weight: 500 !important;
}

.admin-restore-confirm input {
  width: 15px;
  min-height: 15px;
  accent-color: var(--admin-ink);
}

.admin-backup-restore input,
.admin-backup-restore select,
.admin-backup-reauth-form input[type="password"] {
  min-height: 42px;
  padding: .5rem .7rem;
  color: var(--admin-ink);
  background: #fff;
  border: 1px solid #b7c5d8;
  border-radius: 9px;
  font-size: .76rem;
}

.admin-backup-restore input:focus-visible,
.admin-backup-restore select:focus-visible,
.admin-backup-reauth-form input[type="password"]:focus-visible {
  outline: 2px solid var(--admin-ink);
  outline-offset: 1px;
}

.admin-backup-restore button,
.admin-backup-reauth-form .admin-backup-submit {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: .55rem .9rem;
  color: #fff;
  background: #7388a4;
  border: 0;
  border-radius: 9px;
  font-family: inherit;
  font-size: .75rem;
  font-weight: 800;
  appearance: none;
  cursor: pointer;
  transition: .18s;
}

.admin-backup-restore button:hover,
.admin-backup-reauth-form .admin-backup-submit:hover {
  filter: brightness(1.08);
}

.admin-backup-reauth-form .admin-backup-submit {
  background: var(--admin-ink);
}

.admin-backup-note {
  margin: 14px 0 0;
  color: #64748b;
  font-size: .7rem;
}

.admin-clear-card {
  border-color: #ff8b8b;
}

.admin-clear-head > i,
.admin-clear-head h3,
.admin-clear-head strong {
  color: #ef2b2d;
}

.admin-clear-head strong {
  display: block;
  margin-top: 8px;
  font-size: .73rem;
}

.admin-clear-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0 15px;
}

.admin-clear-options label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
}

.admin-clear-options input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: #2563eb;
}

.admin-clear-options span {
  display: grid;
  gap: 3px;
}

.admin-clear-options strong {
  color: #1e293b;
  font-size: .74rem;
}

.admin-clear-options small {
  color: #64748b;
  font-size: .65rem;
}

.admin-clear-confirm {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: .74rem;
  font-weight: 800;
}

.admin-clear-confirm input {
  min-height: 42px;
  padding: .5rem .7rem;
  color: var(--admin-ink);
  background: #fff;
  border: 1px solid #b7c5d8;
  border-radius: 9px;
  font-size: .76rem;
}

.admin-clear-card button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  margin-top: 12px;
  padding: .55rem .9rem;
  color: #fff;
  background: #ef777b;
  border: 0;
  border-radius: 9px;
  font-size: .75rem;
  font-weight: 800;
}

@media (max-width: 700px) {
  .admin-backup-formats,
  .admin-clear-options {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 500px) {
  .admin-backup-formats,
  .admin-clear-options {
    grid-template-columns: 1fr;
  }
}

.admin-settings-page {
  max-width: 980px;
  margin: 20px auto 0;
}

.admin-settings-page form {
  display: grid;
  gap: 18px;
}

.admin-settings-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--admin-line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.admin-settings-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 18px 20px;
  background: #f8fafc;
  border-bottom: 1px solid var(--admin-line);
}

.admin-settings-card-head > div {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.admin-settings-card-head i {
  color: var(--admin-ink);
  font-size: 1.2rem;
}

.admin-settings-card-head h3 {
  margin: 0;
  color: var(--admin-ink);
  font-size: .95rem;
  font-weight: 800;
}

.admin-settings-card-head p {
  margin: 4px 0 0;
  color: var(--admin-muted);
  font-size: .72rem;
}

.admin-settings-status {
  padding: 5px 9px;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 800;
}

.admin-settings-status.is-active {
  color: #047857;
  background: #dcfce7;
}

.admin-settings-status.is-inactive {
  color: #64748b;
  background: #e2e8f0;
}

.admin-settings-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  padding: 20px;
}

.admin-settings-fields label {
  position: relative;
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: .74rem;
  font-weight: 800;
}

.admin-settings-fields label.wide {
  grid-column: 1 / -1;
}

.admin-settings-fields label > span {
  position: absolute;
  top: 0;
  right: 0;
  color: #dc2626;
}

.admin-settings-fields input,
.admin-settings-fields select,
.admin-settings-fields textarea {
  width: 100%;
  min-height: 42px;
  padding: .55rem .75rem;
  color: var(--admin-ink);
  background: #fff;
  border: 1px solid #b7c5d8;
  border-radius: 9px;
  font-size: .78rem;
  font-weight: 400;
}

.admin-settings-fields textarea {
  resize: vertical;
}

.admin-settings-actions {
  display: flex;
  justify-content: flex-end;
}

.admin-settings-actions button {
  min-height: 42px;
  padding: .6rem 1.1rem;
  color: #fff;
  background: var(--admin-ink);
  border: 0;
  border-radius: 9px;
  font-size: .78rem;
  font-weight: 800;
}

@media (max-width: 650px) {
  .admin-settings-fields {
    grid-template-columns: 1fr;
  }

  .admin-settings-fields label.wide {
    grid-column: auto;
  }
}

/* ===================================================================
   FORM BOBOT NILAI AKHIR (admin/rubrik-penilaian.php)

   Sengaja memakai kelas kartu rubrik yang sama dengan bagian di
   bawahnya -- .admin-rubric-reference-card, .admin-rubric-bobot-card
   -- supaya kolomnya rata lebar dan gayanya konsisten. Versi
   sebelumnya memakai .admin-settings-card milik halaman Pengaturan;
   kartu itu tidak punya padding (style.css:7204) dan
   .admin-settings-actions juga tidak (:7308), sehingga tombolnya
   menempel tepat di sudut kartu tanpa ruang.
   =================================================================== */

.admin-rubrik-bobot-card {
  border-top: 3px solid #4f46e5;
  border-radius: 18px;
}

.admin-rubrik-bobot-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  padding: 0 20px 18px;
}

.admin-rubrik-bobot-fields label {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: .74rem;
  font-weight: 800;
}

.admin-rubrik-bobot-fields input {
  width: 100%;
  min-height: 42px;
  padding: .55rem .75rem;
  color: var(--admin-ink);
  background: #fff;
  border: 1px solid #b7c5d8;
  border-radius: 9px;
  font-size: .78rem;
  font-weight: 400;
}

.admin-rubrik-bobot-fields label small {
  color: #64748b;
  font-size: .72rem;
  font-weight: 400;
  line-height: 1.55;
}

/* Mirip .admin-rubric-qualification supaya sekilas sama dengan
   kotak acuan di kartu DUDI. Varian .is-ok / .is-salah dinyalakan
   oleh JS sesuai jumlah bobot. */
.admin-rubrik-bobot-info {
  grid-column: 1 / -1;
  padding: 11px 14px;
  color: #334155;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-size: .75rem;
  line-height: 1.55;
}

.admin-rubrik-bobot-info b {
  color: var(--admin-ink);
}

.admin-rubrik-bobot-info.is-ok {
  background: #f0fdf4;
  border-color: #86efac;
  color: #14532d;
}

.admin-rubrik-bobot-info.is-ok b {
  color: #14532d;
}

.admin-rubrik-bobot-info.is-salah {
  background: #fef2f2;
  border-color: #fecaca;
  color: #7f1d1d;
}

.admin-rubrik-bobot-info.is-salah b {
  color: #7f1d1d;
}

/* Kaki kartu: garis pemisah penuh + tombol rata kanan. Padding
   eksplisit karena .admin-rubric-reference-card tidak memberi
   padding ke anaknya. */
.admin-rubrik-bobot-kaki {
  display: flex;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid #e2e8f0;
  background: #fbfcfe;
}

.admin-rubrik-bobot-kaki button {
  min-height: 42px;
  padding: .6rem 1.1rem;
  color: #fff;
  background: var(--admin-ink);
  border: 0;
  border-radius: 9px;
  font-size: .78rem;
  font-weight: 800;
}

.admin-rubrik-bobot-kaki button:hover {
  filter: brightness(1.12);
}

@media (max-width: 650px) {
  .admin-rubrik-bobot-fields {
    grid-template-columns: 1fr;
  }
}

/* Pesan "belum ada data" di dalam kartu rubrik. */
.admin-rubric-kosong {
  margin: 14px 0;
  padding: 22px 18px;
  text-align: center;
  color: #64748b;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  font-size: .76rem;
  line-height: 1.65;
}

.admin-guru-page {
  display: grid;
  gap: 18px;
  margin-top: -2px;
}

.admin-guru-add,
.admin-guru-import,
.admin-guru-table-card {
  background: #f4f7fb;
  border: 1px solid #9eb3d0;
  border-radius: 13px;
}

.admin-guru-add {
  padding: 14px;
}

.admin-guru-add form {
  display: grid;
  /* minmax(0, ...): lihat catatan di .admin-student-form-grid. */
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1.2fr) auto;
  gap: 10px;
  align-items: center;
}

.admin-guru-add input,
.admin-guru-add select,
.admin-guru-add button {
  min-height: 40px;
  border-radius: 9px;
  font-size: .75rem;
}

.admin-guru-add input,
.admin-guru-add select {
  width: 100%;
  padding: .5rem .7rem;
  color: var(--admin-ink);
  background: #fff;
  border: 1px solid #b7c5d8;
}

.admin-guru-add button {
  padding: .5rem 1.35rem;
  color: #fff;
  background: var(--admin-ink);
  border: 0;
  font-weight: 800;
}

.admin-guru-add a {
  color: var(--admin-muted);
  font-size: .72rem;
}

.admin-guru-import {
  padding: 14px 15px;
}

.admin-guru-import > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
  /* Sama seperti .admin-student-import-head. */
  flex-wrap: wrap;
}

.admin-guru-import strong {
  color: var(--admin-ink);
  font-size: .77rem;
}

.admin-guru-import button {
  min-height: 32px;
  padding: .3rem .7rem;
  color: var(--admin-ink);
  background: #edf3fb;
  border: 1px solid #b6c8e0;
  border-radius: 8px;
  font-size: .7rem;
  font-weight: 800;
}

.admin-guru-import input[type="file"] {
  min-height: 40px;
  background: #fff;
  border-color: #b7c5d8;
  font-size: .74rem;
}

.admin-guru-import small {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: .64rem;
}

.admin-guru-import code {
  color: #475569;
  font-size: .63rem;
}

.admin-guru-filters {
  display: grid;
  /* minmax(0, ...) menggantikan minmax(240px, 1.2fr). Lantai
     240px + 220px + gap 12px = 472px, jauh lebih lebar dari
     layar HP mana pun -- dan mins tetap berlaku pada breakpoint
     mana pun selama tidak ditimpa. */
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}

.admin-guru-filters label {
  display: grid;
  gap: 5px;
  color: #475569;
  font-size: .72rem;
  font-weight: 800;
}

.admin-guru-filters label > div {
  position: relative;
}

.admin-guru-filters label > div i {
  position: absolute;
  top: 50%;
  left: 12px;
  color: var(--admin-muted);
  transform: translateY(-50%);
}

.admin-guru-filters input,
.admin-guru-filters select {
  width: 100%;
  min-height: 42px;
  padding: .5rem .7rem;
  color: var(--admin-ink);
  background: #fff;
  border: 1px solid #b7c5d8;
  border-radius: 9px;
  font-size: .74rem;
}

.admin-guru-filters label > div input {
  padding-left: 34px;
}

.admin-guru-table-card {
  overflow: hidden;
  background: #fff;
  border-radius: 0;
}

.admin-guru-table {
  min-width: 620px;
  margin-bottom: 0;
}

.admin-guru-table thead th {
  padding: .75rem .8rem;
  color: #64748b;
  background: #f7f9fc;
  border-bottom: 1px solid #cbd5e1;
  font-size: .72rem;
  font-weight: 500;
}

.admin-guru-table tbody td {
  padding: .78rem .8rem;
  color: #1e293b;
  border-bottom: 1px solid #d9e1eb;
  font-size: .73rem;
  vertical-align: middle;
}

.admin-guru-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-guru-code-form input {
  width: 100%;
  max-width: 210px;
  min-height: 36px;
  padding: .4rem .7rem;
  color: var(--admin-ink);
  background: #fff;
  border: 1px solid #b7c5d8;
  border-radius: 9px;
  font-size: .72rem;
  font-weight: 700;
}

.admin-guru-edit,
.admin-guru-delete {
  color: var(--admin-ink);
  font-size: .72rem;
  font-weight: 700;
}

.admin-guru-edit {
  margin-right: 12px;
}

.admin-guru-edit:hover {
  color: #1d4ed8;
}

.admin-guru-delete:hover {
  color: #dc2626;
}

.admin-guru-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  color: #64748b;
  background: #f4f7fb;
  border-top: 1px solid #cbd5e1;
  font-size: .68rem;
}

.admin-guru-pagination form,
.admin-guru-pagination > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-guru-pagination select {
  min-height: 30px;
  padding: .2rem .6rem;
  color: var(--admin-ink);
  background: #fff;
  border: 1px solid #b7c5d8;
  border-radius: 7px;
  font-size: .7rem;
}

.admin-guru-pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--admin-ink);
  background: #edf3fb;
  border: 1px solid #b6c8e0;
  border-radius: 7px;
  text-decoration: none;
}

.admin-guru-pagination a.is-disabled {
  color: #a7b4c5;
  pointer-events: none;
}

@media (max-width: 800px) {
  .admin-guru-add form {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .admin-guru-add form,
  .admin-guru-filters {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-guru-pagination,
  .admin-guru-pagination > div,
  .admin-guru-pagination form {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

@media print {
  .admin-guru-add,
  .admin-guru-import,
  .admin-guru-filters,
  .admin-guru-pagination {
    display: none;
  }

  .admin-guru-table {
    min-width: 0;
  }

  .admin-guru-table th:last-child,
  .admin-guru-table td:last-child {
    display: none;
  }
}

.admin-instruktur-page {
  display: grid;
  gap: 18px;
  margin-top: -2px;
}

.admin-instruktur-add,
.admin-instruktur-import,
.admin-instruktur-table-card {
  background: #f4f7fb;
  border: 1px solid #9eb3d0;
  border-radius: 13px;
}

.admin-instruktur-add {
  padding: 14px;
}

.admin-instruktur-add form {
  display: grid;
  /* minmax(0, ...): lihat catatan di .admin-student-form-grid. */
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) auto;
  gap: 10px;
}

.admin-instruktur-add input,
.admin-instruktur-add select,
.admin-instruktur-add button {
  min-height: 40px;
  border-radius: 9px;
  font-size: .75rem;
}

.admin-instruktur-add input,
.admin-instruktur-add select {
  width: 100%;
  padding: .5rem .7rem;
  color: var(--admin-ink);
  background: #fff;
  border: 1px solid #b7c5d8;
}

.admin-instruktur-add button {
  padding: .5rem 1.4rem;
  color: #fff;
  background: var(--admin-ink);
  border: 0;
  font-weight: 800;
}

.admin-instruktur-import {
  padding: 14px 15px;
}

.admin-instruktur-import > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
  /* Sama seperti .admin-student-import-head. */
  flex-wrap: wrap;
}

.admin-instruktur-import strong {
  color: var(--admin-ink);
  font-size: .77rem;
}

.admin-instruktur-import button {
  min-height: 32px;
  padding: .3rem .7rem;
  color: var(--admin-ink);
  background: #edf3fb;
  border: 1px solid #b6c8e0;
  border-radius: 8px;
  font-size: .7rem;
  font-weight: 800;
}

.admin-instruktur-import input[type="file"] {
  min-height: 40px;
  background: #fff;
  border-color: #b7c5d8;
  font-size: .74rem;
}

.admin-instruktur-import small {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: .64rem;
}

.admin-instruktur-import code {
  color: #475569;
  font-size: .63rem;
}

.admin-instruktur-filters {
  display: grid;
  /* Track ketiga (auto) adalah tombol Reset, yang lebarnya
     mengikuti isinya -- bukan lantai px yang perlu dilepas. */
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.admin-instruktur-filters label {
  display: grid;
  gap: 5px;
  color: #475569;
  font-size: .72rem;
  font-weight: 800;
}

.admin-instruktur-filters label > div {
  position: relative;
}

.admin-instruktur-filters label > div i {
  position: absolute;
  top: 50%;
  left: 12px;
  color: var(--admin-muted);
  transform: translateY(-50%);
}

.admin-instruktur-filters input,
.admin-instruktur-filters select {
  width: 100%;
  min-height: 42px;
  padding: .5rem .7rem;
  color: var(--admin-ink);
  background: #fff;
  border: 1px solid #b7c5d8;
  border-radius: 9px;
  font-size: .74rem;
}

.admin-instruktur-filters label > div input {
  padding-left: 34px;
}

.admin-instruktur-reset {
  min-height: 42px;
  padding: .6rem .3rem;
  color: #475569;
  font-size: .72rem;
  font-weight: 800;
  text-decoration: none;
}

.admin-instruktur-table-card {
  overflow: hidden;
  background: #fff;
  border-radius: 0;
}

.admin-instruktur-table {
  min-width: 620px;
  margin-bottom: 0;
}

.admin-instruktur-table thead th {
  padding: .75rem .8rem;
  color: #64748b;
  background: #f7f9fc;
  border-bottom: 1px solid #cbd5e1;
  font-size: .72rem;
  font-weight: 500;
}

.admin-instruktur-table tbody td {
  padding: .78rem .8rem;
  color: #1e293b;
  border-bottom: 1px solid #d9e1eb;
  font-size: .73rem;
  vertical-align: middle;
}

.admin-instruktur-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-instruktur-edit,
.admin-instruktur-delete {
  color: var(--admin-ink);
  font-size: .72rem;
  font-weight: 700;
}

.admin-instruktur-edit {
  margin-right: 12px;
}

.admin-instruktur-edit:hover {
  color: #1d4ed8;
}

.admin-instruktur-delete:hover {
  color: #dc2626;
}

.admin-instruktur-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  color: #64748b;
  background: #f4f7fb;
  border-top: 1px solid #cbd5e1;
  font-size: .68rem;
}

.admin-instruktur-pagination form,
.admin-instruktur-pagination > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-instruktur-pagination select {
  min-height: 30px;
  padding: .2rem .6rem;
  color: var(--admin-ink);
  background: #fff;
  border: 1px solid #b7c5d8;
  border-radius: 7px;
  font-size: .7rem;
}

.admin-instruktur-pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--admin-ink);
  background: #edf3fb;
  border: 1px solid #b6c8e0;
  border-radius: 7px;
  text-decoration: none;
}

.admin-instruktur-pagination a.is-disabled {
  color: #a7b4c5;
  pointer-events: none;
}

@media (max-width: 700px) {
  .admin-instruktur-add form,
  .admin-instruktur-filters {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-instruktur-pagination,
  .admin-instruktur-pagination > div,
  .admin-instruktur-pagination form {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

@media print {
  .admin-instruktur-add,
  .admin-instruktur-import,
  .admin-instruktur-filters,
  .admin-instruktur-pagination {
    display: none;
  }

  .admin-instruktur-table {
    min-width: 0;
  }

  .admin-instruktur-table th:last-child,
  .admin-instruktur-table td:last-child {
    display: none;
  }
}

.admin-dudi-page {
  display: grid;
  gap: 18px;
  margin-top: -2px;
}

.admin-dudi-add,
.admin-dudi-import,
.admin-dudi-table-card {
  background: #f4f7fb;
  border: 1px solid #9eb3d0;
  border-radius: 13px;
}

.admin-dudi-add {
  padding: 14px;
}

.admin-dudi-add form {
  display: grid;
  /* Lima track 1fr berarti lantai ~850px. minmax(0, ...) membuat
     kolom bisa menyusut ke isi minimal. */
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1.2fr) auto;
  gap: 9px;
  align-items: center;
}

.admin-dudi-add input,
.admin-dudi-add select,
.admin-dudi-add button {
  min-height: 40px;
  border-radius: 9px;
  font-size: .74rem;
}

.admin-dudi-add input,
.admin-dudi-add select {
  width: 100%;
  padding: .5rem .7rem;
  color: var(--admin-ink);
  background: #fff;
  border: 1px solid #b7c5d8;
}

.admin-dudi-add button {
  padding: .5rem 1.15rem;
  color: #fff;
  background: var(--admin-ink);
  border: 0;
  font-weight: 800;
}

.admin-dudi-add a {
  color: var(--admin-muted);
  font-size: .72rem;
}

.admin-dudi-import {
  padding: 14px 15px;
}

.admin-dudi-import > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
  /* Sama seperti .admin-student-import-head. */
  flex-wrap: wrap;
}

.admin-dudi-import strong {
  color: var(--admin-ink);
  font-size: .77rem;
}

.admin-dudi-import button {
  min-height: 32px;
  padding: .3rem .7rem;
  color: var(--admin-ink);
  background: #edf3fb;
  border: 1px solid #b6c8e0;
  border-radius: 8px;
  font-size: .7rem;
  font-weight: 800;
}

.admin-dudi-import input[type="file"] {
  min-height: 40px;
  background: #fff;
  border-color: #b7c5d8;
  font-size: .74rem;
}

.admin-dudi-import small {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: .64rem;
}

.admin-dudi-import code {
  color: #475569;
  font-size: .63rem;
}

.admin-dudi-filters {
  display: grid;
  /* Sama seperti guru: lihat catatan di .admin-guru-filters. */
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}

.admin-dudi-filters label {
  display: grid;
  gap: 5px;
  color: #475569;
  font-size: .72rem;
  font-weight: 800;
}

.admin-dudi-filters label > div {
  position: relative;
}

.admin-dudi-filters label > div i {
  position: absolute;
  top: 50%;
  left: 12px;
  color: var(--admin-muted);
  transform: translateY(-50%);
}

.admin-dudi-filters input,
.admin-dudi-filters select {
  width: 100%;
  min-height: 42px;
  padding: .5rem .7rem;
  color: var(--admin-ink);
  background: #fff;
  border: 1px solid #b7c5d8;
  border-radius: 9px;
  font-size: .74rem;
}

.admin-dudi-filters label > div input {
  padding-left: 34px;
}

.admin-dudi-table-card {
  overflow: hidden;
  background: #fff;
  border-radius: 0;
}

.admin-dudi-table {
  min-width: 760px;
  margin-bottom: 0;
}

.admin-dudi-table thead th {
  padding: .75rem .8rem;
  color: #64748b;
  background: #f7f9fc;
  border-bottom: 1px solid #cbd5e1;
  font-size: .72rem;
  font-weight: 500;
}

.admin-dudi-table tbody td {
  padding: .7rem .8rem;
  color: #1e293b;
  border-bottom: 1px solid #d9e1eb;
  font-size: .73rem;
  vertical-align: middle;
}

.admin-dudi-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-dudi-code-form input {
  width: 100%;
  max-width: 155px;
  min-height: 36px;
  padding: .4rem .7rem;
  color: var(--admin-ink);
  background: #fff;
  border: 1px solid #b7c5d8;
  border-radius: 9px;
  font-size: .72rem;
  font-weight: 700;
}

.admin-dudi-edit,
.admin-dudi-delete {
  color: var(--admin-ink);
  font-size: .72rem;
  font-weight: 700;
}

.admin-dudi-edit {
  margin-right: 12px;
}

.admin-dudi-edit:hover {
  color: #1d4ed8;
}

.admin-dudi-delete:hover {
  color: #dc2626;
}

.admin-dudi-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  color: #64748b;
  background: #f4f7fb;
  border-top: 1px solid #cbd5e1;
  font-size: .68rem;
}

.admin-dudi-pagination form,
.admin-dudi-pagination > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-dudi-pagination select {
  min-height: 30px;
  padding: .2rem .6rem;
  color: var(--admin-ink);
  background: #fff;
  border: 1px solid #b7c5d8;
  border-radius: 7px;
  font-size: .7rem;
}

.admin-dudi-pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--admin-ink);
  background: #edf3fb;
  border: 1px solid #b6c8e0;
  border-radius: 7px;
  text-decoration: none;
}

.admin-dudi-pagination a.is-disabled {
  color: #a7b4c5;
  pointer-events: none;
}

@media (max-width: 900px) {
  .admin-dudi-add form {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .admin-dudi-add form,
  .admin-dudi-filters {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-dudi-pagination,
  .admin-dudi-pagination > div,
  .admin-dudi-pagination form {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

@media print {
  .admin-dudi-add,
  .admin-dudi-import,
  .admin-dudi-filters,
  .admin-dudi-pagination {
    display: none;
  }

  .admin-dudi-table {
    min-width: 0;
  }

  .admin-dudi-table th:last-child,
  .admin-dudi-table td:last-child {
    display: none;
  }
}

.admin-student-import a,
.admin-dudi-import a,
.admin-guru-import a,
.admin-instruktur-import a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: .3rem .7rem;
  color: var(--admin-ink, #0b1b33);
  background: #edf3fb;
  border: 1px solid #b6c8e0;
  border-radius: 8px;
  font-size: .7rem;
  font-weight: 800;
  white-space: nowrap;
}

.admin-student-template {
  min-height: 34px;
  padding: .35rem .7rem;
}

.admin-clear-modes {
  display: grid;
  gap: 10px;
  margin: 14px 0 16px;
}

.admin-clear-mode {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: #f7faff;
  border: 1px solid #c3d3e8;
  border-radius: 12px;
  cursor: pointer;
}

.admin-clear-mode span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.admin-clear-mode strong {
  color: #0b1b33;
  font-size: .78rem;
  font-weight: 800;
}

.admin-clear-mode small {
  color: #64748b;
  font-size: .68rem;
}

.admin-clear-mode:has(input:checked) {
  background: #eaf1fb;
  border-color: #1d4ed8;
}

.admin-clear-warning {
  padding: 14px 16px;
  background: #fff4f4;
  border: 1px solid #f3b1b1;
  border-radius: 12px;
}
.admin-clear-warning strong {
  display: block;
  color: #b91c1c;
  font-size: .78rem;
  font-weight: 800;
}

.admin-clear-warning p {
  margin: 8px 0 0;
  color: #7f1d1d;
  font-size: .7rem;
  line-height: 1.6;
}

.app-footer {
  position: relative;
  margin-top: 26px;
  font-size: .75rem;
}

/* Garis aksen tipis di tepi atas: memberi batas yang jelas tanpa
   menambah bobot visual. Warnanya diambil dari token tema, jadi
   ikut berubah saat ganti tema (tidak hardcoded). */
.app-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--t-primary), transparent);
  opacity: .45;
}

.app-footer-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 10px 20px;
  flex-wrap: wrap;
}

.app-footer-terang {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  color: #475569;
}

.app-footer-gelap {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  color: #cbd5e1;
}

.app-footer-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-right: auto;
  min-width: 0;
}

.app-footer-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: linear-gradient(135deg, #10b981, #047857);
  color: #fff;
  font-size: 1.05rem;
  overflow: hidden;
}

.app-footer-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  padding: 3px;
}

.app-footer-text {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  min-width: 0;
}

.app-footer-text strong {
  color: #0b1b33;
  font-size: .78rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-footer-gelap .app-footer-text strong {
  color: #f1f5f9;
}

.app-footer-text small {
  color: #64748b;
  font-size: .69rem;
}

.app-footer-gelap .app-footer-text small {
  color: #94a3b8;
}

.app-footer-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.app-footer-nav a {
  color: #475569;
  font-weight: 700;
  font-size: .73rem;
}

.app-footer-nav a:hover {
  color: #047857;
}

.app-footer-gelap .app-footer-nav a {
  color: #cbd5e1;
}

.app-footer-gelap .app-footer-nav a:hover {
  color: #fff;
}

.app-footer-meta {
  margin-left: 4px;
  color: #94a3b8;
  font-size: .69rem;
}

@media (max-width: 800px) {
  .app-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .app-footer-brand {
    margin-right: 0;
  }

  /* Pemisah tipis supaya meta tidak menempel ke nav saat ditumpuk */
  .app-footer-meta {
    margin-left: 0;
    padding-top: 8px;
    border-top: 1px solid var(--t-line);
    width: 100%;
  }
}

@media print {
  .app-footer {
    display: none !important;
  }
}

.app-footer-fixed {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  margin: 0 auto;
  max-width: 480px;
}

@media (max-width: 560px) {
  .app-footer-fixed {
    position: static;
    margin: 14px auto 0;
    max-width: 100%;
  }
}

@media (max-height: 720px) {
  .auth-body {
    flex-direction: column;
    justify-content: flex-start;
  }

  .auth-wrap {
    margin: auto 0;
  }

  .app-footer-fixed {
    position: static;
    margin: 12px auto 0;
    max-width: 100%;
  }
}

.admin-settings-logo {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 17px;
}

.admin-settings-logo-preview {
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f7fb;
  border: 1px dashed #9eb3d0;
  border-radius: 14px;
  overflow: hidden;
}

.admin-settings-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.admin-settings-logo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #94a3b8;
}

.admin-settings-logo-empty i {
  font-size: 1.5rem;
}

.admin-settings-logo-empty small {
  font-size: .6rem;
}

.admin-settings-logo-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.admin-settings-logo-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .72rem;
  font-weight: 700;
  color: #0b1b33;
}

.admin-settings-logo-form small {
  font-weight: 500;
  color: #64748b;
  font-size: .66rem;
}

.admin-settings-logo-remove {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .4rem .8rem;
  color: #b91c1c;
  background: #fff1f2;
  border: 1px solid #f4b8c0;
  border-radius: 8px;
  font-size: .7rem;
  font-weight: 800;
}

@media (max-width: 640px) {
  .admin-settings-logo {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-settings-logo-preview {
    margin: 0 auto;
  }
}

/* ============================================================
   PREDIKAT NILAI (dipakai di tabel Nilai Guru & DUDI)
   Warna .cetak-a..e sengaja sama dengan cetak.css supaya
   predikat di layar dan di laporan tercetak konsisten.
   ============================================================ */
.nilai-predikat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  margin-top: 3px;
  padding: .1rem .4rem;
  border-radius: 99px;
  font-size: .68rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .02em;
}

.cetak-a { background: #dcfce7; color: #15803d; }
.cetak-b { background: #dbeafe; color: #1d4ed8; }
.cetak-c { background: #fef9c3; color: #a16207; }
.cetak-d { background: #ffedd5; color: #c2410c; }
.cetak-e { background: #fee2e2; color: #b91c1c; }

.nilai-keterangan {
  display: block;
  margin-top: 3px;
  color: #94a3b8;
  font-size: .6rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}

/* ============================================================
   AKUN OPERATOR (Admin -> Akun Admin)
   Operator = akun admin dengan akses per menu. Catatan explainer-nya
   sengaja redup (abu) supaya bedanya jelas dari admin yang hijau.
   ============================================================ */
.admin-op-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 16px 0;
  padding: 14px 16px;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-left: 4px solid #94a3b8;
  border-radius: 12px;
}

.admin-op-note > i {
  flex: 0 0 auto;
  color: #64748b;
  font-size: 1.1rem;
}

.admin-op-note b {
  display: block;
  color: #0f172a;
  font-size: .8rem;
  font-weight: 800;
}

.admin-op-note span {
  display: block;
  margin-top: 3px;
  font-size: .72rem;
  line-height: 1.6;
}

.admin-op-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--admin-line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.admin-akses-card {
  overflow: hidden;
  margin-bottom: 18px;
  background: #fff;
  border: 1px solid var(--admin-line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.admin-op-table {
  min-width: 720px;
  margin-bottom: 0;
}

.admin-op-table thead th {
  padding: .7rem .9rem;
  color: #64748b;
  background: #fafbfd;
  border-bottom: 1px solid var(--admin-line);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.admin-op-table tbody td {
  padding: .75rem .9rem;
  color: #334155;
  border-bottom: 1px solid #edf0f4;
  font-size: .75rem;
  vertical-align: middle;
}

.admin-op-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-op-table code {
  padding: .1rem .35rem;
  color: #475569;
  background: #f1f5f9;
  border-radius: 5px;
  font-size: .72rem;
}

.admin-op-role {
  display: block;
  margin-top: 3px;
  color: #94a3b8;
  font-size: .66rem;
  font-weight: 600;
}

.admin-op-role.is-ok {
  color: #047857;
}

.admin-op-aksi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-op-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: .78rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.admin-op-btn:hover {
  color: #0f172a;
  background: #e2e8f0;
}

.admin-op-btn.is-danger:hover {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #f4b8c0;
}

/* Tombol Batal di baris aksi form (bukan tombol submit).
   Dulu bernama .admin-form-cancel. Kelas itu sekarang tidak dipakai
   di mana pun -- pemakai terakhirnya, link "Batal" di baris aksi
   form hak akses, sudah diganti menjadi .admin-akses-batal agar
   konsisten dengan blok .admin-akses-* di sekitarnya.

   Nama KEDUA tetap dipertahankan di selector list ini supaya
   halaman lain yang masih memakai kelas lama tidak langsung
   kehilangan gaya. Hapus .admin-form-cancel setelah dipastikan
   tidak ada lagi pemakaiannya. */
.admin-akses-batal,
.admin-form-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: .6rem 1rem;
  color: #334155;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
}

.admin-akses-batal:hover,
.admin-form-cancel:hover {
  color: #0f172a;
  background: #e2e8f0;
}

/* ---------- Hak akses menu Operator ---------- */

/* .admin-card-heading di aturan dasar hanya punya padding-bottom + border,
   dan gaya <h3>/<span>-nya hanya ditulis untuk .admin-table-card,
   .admin-form-card, dan .admin-rubric-table-card. Jadi dua kartu baru
   ini perlu layout judulnya sendiri, kalau tidak teks "<span>" jadi
   sebesar normal dan meluber melewati tepi kartu. */
.admin-akses-card > .admin-card-heading,
.admin-op-card > .admin-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  padding: 17px 20px 14px;
  border-bottom: 1px solid var(--admin-line);
}

.admin-akses-card > .admin-card-heading h3,
.admin-op-card > .admin-card-heading h3 {
  margin: 0;
  color: var(--admin-ink);
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.3;
}

.admin-akses-card > .admin-card-heading > span,
.admin-op-card > .admin-card-heading > span {
  color: var(--admin-muted);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: right;
}

.admin-akses-grup {
  margin: 0;
  padding: 14px 18px 16px;
  border: 0;
  border-bottom: 1px solid #edf0f4;
}

.admin-akses-grup legend {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
  margin-bottom: 10px;
  color: #0f172a;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.admin-akses-grup legend i {
  color: #64748b;
  font-size: .95rem;
}

.admin-akses-choose {
  margin-left: auto;
  padding: .25rem .6rem;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  font-size: .64rem;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.admin-akses-choose:hover {
  color: #0f172a;
  background: #e2e8f0;
}

.admin-akses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}

.admin-akses-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: .74rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: .15s;
}

.admin-akses-item:hover {
  border-color: #94a3b8;
  background: #f1f5f9;
}

.admin-akses-item input {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  accent-color: #059669;
  cursor: pointer;
}

.admin-akses-item > i {
  flex: 0 0 auto;
  color: #94a3b8;
  font-size: .95rem;
}

.admin-akses-item.is-on {
  color: #047857;
  background: #f0fdf4;
  border-color: #6ee7b7;
}

.admin-akses-item.is-on > i {
  color: #059669;
}

.admin-akses-kaki {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  background: #fafbfd;
  flex-wrap: wrap;
}

.admin-akses-info {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  flex: 1 1 420px;
  min-width: 0;
  margin: 0;
  color: #475569;
  font-size: .72rem;
  line-height: 1.65;
}

/* Teks dibungkus <span> karena kontainer ini display:flex. Tanpa
   pembungkus, tiap potongan teks dan tiap <b> jadi flex item
   sendiri sehingga tampil berderet-ke-samping. */
.admin-akses-info > i {
  flex: 0 0 auto;
  margin-top: 3px;
  color: #059669;
}

.admin-akses-info > span {
  flex: 1;
  min-width: 0;
}

.admin-akses-info b {
  color: #0f172a;
  font-weight: 800;
}

.admin-akses-tombol {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.admin-akses-tombol button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: .6rem 1.1rem;
  color: #fff;
  background: linear-gradient(135deg, #10b981, #059669);
  border: 0;
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
  transition: .18s;
}

.admin-akses-tombol button:hover:not(:disabled) {
  background: #047857;
  transform: translateY(-1px);
}

.admin-akses-tombol .admin-akses-batal,
.admin-akses-tombol .admin-form-cancel {
  white-space: nowrap;
}

@media (max-width: 700px) {
  .admin-akses-kaki {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-akses-tombol {
    flex-direction: column;
  }

  .admin-akses-tombol > * {
    width: 100%;
  }
}

/* ---------- Pemilih tema (Admin -> Pengaturan) ---------- */
.tema-modes {
  display: flex;
  gap: 9px;
  padding: 0 20px 14px;
}

.tema-mode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

.tema-mode input {
  width: 15px;
  height: 15px;
  accent-color: var(--green-2);
  cursor: pointer;
}

.tema-mode.is-on {
  color: var(--green-dark);
  background: #f0fdf4;
  border-color: #6ee7b7;
}

.tema-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  padding: 0 20px 16px;
}

.tema-pilih {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  color: #334155;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  transition: .15s;
}

.tema-pilih input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tema-swatch {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
}

.tema-nama {
  font-size: .78rem;
  font-weight: 800;
}

.tema-centang {
  margin-left: auto;
  color: var(--green-2);
  font-size: 1rem;
  opacity: 0;
}

.tema-pilih:hover {
  border-color: #94a3b8;
  background: #f1f5f9;
}

.tema-pilih.is-on {
  color: #0f172a;
  background: #f0fdf4;
  border-color: var(--green-2);
}

.tema-pilih.is-on .tema-centang {
  opacity: 1;
}

.tema-kaki {
  padding: 0 20px 16px;
}

.tema-kaki small {
  display: block;
  color: #64748b;
  font-size: .7rem;
  line-height: 1.6;
}

/* ---------- Panel Operator ---------- */
.op-lock {
  max-width: 620px;
  margin: 0 auto;
  padding: 40px 32px;
  text-align: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 24px 50px -30px rgba(15, 23, 42, .45);
}

.op-lock-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 18px;
  font-size: 1.8rem;
}

.op-lock-judul {
  margin: 18px 0 6px;
  color: #0f172a;
  font-size: 1.3rem;
  font-weight: 800;
}

.op-lock-sub {
  margin: 0;
  color: #475569;
  font-size: .84rem;
  line-height: 1.7;
}

.op-lock-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 22px 0;
  background: #e2e8f0;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}

.op-lock-info div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 8px;
  background: #f8fafc;
}

.op-lock-info span {
  color: #64748b;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.op-lock-info b {
  color: #0f172a;
  font-size: .82rem;
  font-weight: 800;
}

.op-lock-info b.is-kosong {
  color: #b91c1c;
}

.op-lock-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 24px;
  padding: 13px 15px;
  color: #7f1d1d;
  background: #fff7f7;
  border: 1px solid #fecaca;
  border-radius: 12px;
  text-align: left;
}

.op-lock-alert i {
  flex: 0 0 auto;
  margin-top: 2px;
}

.op-lock-alert span {
  font-size: .74rem;
  line-height: 1.65;
}

.op-lock-foot {
  display: block;
  margin-top: 20px;
  color: #94a3b8;
  font-size: .68rem;
}

/* Peringatan: migrasi role_menu_akses belum dijalankan */
.admin-akses-gagal {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 16px 18px 0;
  padding: 14px 16px;
  color: #7f1d1d;
  background: #fff7f7;
  border: 1px solid #fecaca;
  border-left: 4px solid #dc2626;
  border-radius: 12px;
}

/* ---------- Verifikasi Dua Faktor (2FA) ---------- */

/* Isi kartu. .admin-akses-card tidak memberi padding pada
   anaknya, jadi tanpa wrapper ini semua teks menempel tepi. */
.admin-2fa-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 20px 20px;
}

/* Lencana status di kanan judul */
.admin-2fa-pill {
  margin-right: 5px;
  font-size: .82em;
  vertical-align: -1px;
}
.admin-2fa-pill.is-aktif { color: #059669; }
.admin-2fa-pill.is-menunggu { color: #d97706; }
.admin-2fa-pill.is-off { color: #94a3b8; }

.admin-2fa-deskripsi {
  margin: 0;
  max-width: 78ch;
  color: #64748b;
  font-size: .78rem;
  line-height: 1.75;
}
.admin-2fa-deskripsi b { color: #334155; font-weight: 700; }

/* Kotak status: hijau saat sehat, merah saat kode pemulihan habis */
.admin-2fa-status {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  color: #065f46;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-left: 4px solid #10b981;
  border-radius: 12px;
}
.admin-2fa-status > i {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 1.05rem;
}
.admin-2fa-status b {
  display: block;
  font-size: .8rem;
  font-weight: 800;
}
.admin-2fa-status span {
  display: block;
  margin-top: 2px;
  font-size: .74rem;
  line-height: 1.65;
}

.admin-2fa-status.is-bahaya {
  color: #991b1b;
  background: #fef2f2;
  border-color: #fecaca;
  border-left-color: #ef4444;
}

/* Dua aksi dalam satu baris di layar lebar, bertumpuk di HP */
.admin-2fa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.admin-2fa-aksi {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 15px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.admin-2fa-aksi > b {
  color: #0f172a;
  font-size: .8rem;
  font-weight: 800;
}
.admin-2fa-aksi > b i {
  margin-right: 5px;
  color: #64748b;
  vertical-align: -1px;
}
.admin-2fa-aksi > span {
  color: #64748b;
  font-size: .73rem;
  line-height: 1.65;
}

/* Zona berbahaya: merah muda, bukan merah menyala */
.admin-2fa-aksi.is-bahaya {
  background: #fffafa;
  border-color: #fecaca;
}
.admin-2fa-aksi.is-bahaya > b { color: #991b1b; }
.admin-2fa-aksi.is-bahaya > b i { color: #dc2626; }

/* Baris form: input + tombol, tombol menempel rata kanan */
.admin-2fa-form {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 3px;
}
.admin-2fa-form .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
.admin-2fa-form-solo { margin-top: 0; }

.admin-2fa-input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 190px;
  padding: 9px 12px;
  color: #0f172a;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-align: center;
  transition: border-color .15s, box-shadow .15s;
}
.admin-2fa-input::placeholder {
  color: #cbd5e1;
  font-weight: 600;
  letter-spacing: .3em;
}
.admin-2fa-input:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .16);
}
/* Kolom password tidak pakai letter-spacing -- membingungkan */
input[type="password"].admin-2fa-input {
  letter-spacing: .06em;
  text-align: left;
}

@media (max-width: 520px) {
  .admin-2fa-form { flex-wrap: wrap; }
  .admin-2fa-input { max-width: none; }
  .admin-2fa-form .btn { flex: 1 1 100%; }
}

/* Langkah aktivasi: kunci rahasia & kode pemulihan */
.admin-2fa-nomor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 7px;
  color: #fff;
  background: #0284c7;
  border-radius: 50%;
  font-size: .68rem;
  font-weight: 800;
  vertical-align: 1px;
}
.admin-2fa-judul2 { margin-top: 6px; }
.admin-2fa-mini { font-size: .7rem !important; opacity: .85; }

.admin-2fa-pending,
.admin-2fa-kode {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px 18px;
  border-radius: 12px;
}

.admin-2fa-pending {
  color: #0c4a6e;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-left: 4px solid #0284c7;
}

.admin-2fa-kode {
  color: #78350f;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-left: 4px solid #d97706;
}

.admin-2fa-pending > b,
.admin-2fa-kode > b {
  font-size: .8rem;
  font-weight: 800;
}

.admin-2fa-pending > span,
.admin-2fa-kode > span {
  font-size: .73rem;
  line-height: 1.65;
  opacity: .92;
}

/* Kunci rahasia: besar, monospace, mudah disalin manual ke HP */
.admin-2fa-secret {
  padding: 11px 13px;
  color: #0f172a;
  background: #fff;
  border: 1px dashed #94a3b8;
  border-radius: 9px;
  font-family: Consolas, "Courier New", monospace;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .12em;
  word-break: break-all;
  user-select: all;
}

.admin-2fa-uri {
  padding: 9px 11px;
  color: #334155;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: .66rem;
  line-height: 1.6;
  word-break: break-all;
}

/* Daftar kode pemulihan: satu per baris, mudah dicetak */
.admin-2fa-kode code {
  display: block;
  margin-top: 3px;
  padding: 12px 14px;
  color: #1f2937;
  background: #fff;
  border: 1px solid #fcd34d;
  border-radius: 9px;
  font-family: Consolas, "Courier New", monospace;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.9;
}

.admin-akses-gagal > i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: #dc2626;
}

.admin-akses-gagal b {
  display: block;
  color: #991b1b;
  font-size: .8rem;
  font-weight: 800;
}

.admin-akses-gagal span {
  display: block;
  margin: 5px 0 9px;
  font-size: .73rem;
  line-height: 1.6;
}

.admin-akses-gagal code {
  font-size: .7rem;
}

.admin-akses-cmd {
  display: block;
  margin-bottom: 7px;
  padding: 9px 12px;
  color: #0f172a;
  background: #fff;
  border: 1px solid #f4b8c0;
  border-radius: 8px;
  font-family: Consolas, "Courier New", monospace;
  font-size: .72rem;
  font-weight: 700;
  word-break: break-all;
}

.admin-akses-gagal small {
  display: block;
  color: #9f1239;
  font-size: .68rem;
  line-height: 1.6;
}

/* Form mati saat tabel belum ada */
.admin-akses-card form[onsubmit] .admin-akses-item input:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.admin-akses-card button:disabled,
.admin-akses-tombol button:disabled {
  cursor: not-allowed;
  filter: grayscale(.6);
  opacity: .5;
}

/* ---------- Panel Operator ---------- */

/* Varian hijau untuk operator yang sudah punya izin */
.op-lock-ic.is-ok {
  color: #047857;
  background: #ecfdf5;
}

/* Operator yang punya akses: daftar menu, bukan kunci kosong */
.op-home {
  max-width: 820px;
  margin: 0 auto;
  padding: 34px 30px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 24px 50px -30px rgba(15, 23, 42, .45);
}

.op-home-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 26px;
}

.op-home-head h1 {
  margin: 0 0 4px;
  color: #0f172a;
  font-size: 1.25rem;
  font-weight: 800;
}

.op-home-head p {
  margin: 0;
  color: #475569;
  font-size: .8rem;
  line-height: 1.65;
}

.op-home-grup {
  margin-bottom: 20px;
}

.op-home-judul {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
  color: #64748b;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.op-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 9px;
}

.op-home-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  transition: .15s;
}

.op-home-item:hover {
  color: #047857;
  background: #f0fdf4;
  border-color: #6ee7b7;
  transform: translateY(-1px);
}

.op-home-item > i:first-child {
  flex: 0 0 auto;
  color: #059669;
  font-size: 1.05rem;
}

.op-home-item span {
  flex: 1;
}

.op-home-panah {
  flex: 0 0 auto;
  color: #cbd5e1;
  font-size: .85rem;
}

.op-home-item:hover .op-home-panah {
  color: #059669;
}

.op-home-kaki {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
  flex-wrap: wrap;
}

.op-home-kaki .op-lock-foot {
  margin-top: 0;
  max-width: 460px;
}

@media (max-width: 560px) {
  .op-lock {
    padding: 30px 18px;
  }

  .op-lock-info {
    grid-template-columns: 1fr;
  }

  .op-home {
    padding: 26px 18px;
  }

  .op-home-kaki {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============================================================
   LAPISAN RESPONSIF GLOBAL
   ------------------------------------------------------------
   Blok ini DITEMPATKAN DI AKHIR berkas dengan sengaja.
   Seluruh media query di atas ditulis untuk lebar tablet; yang
   hilang adalah perbaikan yang berlaku ke semua halaman --
   muncul sebagai gejala di HP: halaman geser ke samping,
   tombol terpotong notch, browser memperbesar tampilan saat
   input diklik.

   Menaruhnya di akhir berarti aturan ini menang di urutan
   cascade tanpa perlu menaikkan spesifisitas selector.

   TIDAK semuanya dibungkus @media -- sebagian sengaja
   global karena salah hanya di layar kecil.
   ============================================================ */

/* ---------- 1. Cegah zoom otomatis iOS saat input diklik ---------- */
/* iOS memperbesar tampilan SELURUH halaman kalau font input < 16px,
   dan zoom itu tidak bisa dikembalikan dengan pinch biasa atau
   meta viewport. Akibatnya murid melihat halaman 2x lebih besar dan
   harus menggulir zigzag untuk kembali.

   Aturan ini hanya berlaku di layar kecil karena di desktop
   tidak ada zoom otomatis, jadi font boleh tetap kecil seperti
   desain aslinya. */
@media (max-width: 820px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  .form-control,
  .form-select {
    /* 16px bukan gaya -- ini batas teknis iOS. */
    font-size: 16px !important;
  }
}

/* ---------- 2. Cegah halaman melebar melebihi layar ---------- */
/* Satu elemen yang terlalu lebar (tabel, kode yang panjang,
   nama sekolah tanpa spasi) membuat seluruh dokumen jadi
   bisa di-scroll ke samping -- dan di HP itu merusak: pengguna
   harus menggulir horizontal hanya untuk memuat konten.

   overflow-x: clip memotong TANPA membuat elemen di dalamnya
   ikut bisa di-scroll (berbeda dari hidden yang membiarkan
   scroll programatis). Dipakai di html/body supaya konten
   yang memang harus di-scroll (tabel di .table-responsive)
   tetap bisa di-scroll di dalam wadahnya sendiri. */
html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
  /* Cegah teks panjang tanpa spasi (kode akses, hash) bikin
     halaman melebar. overflow-wrap lebih halus daripada
     word-break: break-all yang memotong kata normal. */
  overflow-wrap: break-word;
}

/* ---------- 3. Area notch / cekungan layar ---------- */
/* Di iPhone dengan notch atau Dynamic Island, bagian atas dan bawah
   layar tertutup system UI. Konten yang di-pin ke tepi
   (topbar sticky, sticky sidebar) jadi tertutup -- teks terpotong
   dan tombol tak bisa diklik karena tertutup gesture bar.

   padding-left/right dipakai (bukan margin) supaya konten tetap
   selaras dengan padding yang sudah ada. env() mengembalikan 0
   di perangkat tanpa notch, jadi tidak ada efek samping. */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  /* Topbar hanya dapat padding aman di layar kecil. Di desktop
     .admin-topbar memakai padding lebar (26px 44px) yang memang
     sengaja -- menimpanya dengan 1rem di semua lebar akan
     membuat topbar admin terlihat sempit di monitor. */
  @media (max-width: 820px) {
    .app-topbar,
    .admin-topbar {
      padding-left: calc(1rem + env(safe-area-inset-left, 0px));
      padding-right: calc(1rem + env(safe-area-inset-right, 0px));
    }
  }

  .cetak-aksi {
    padding-left: calc(12px + env(safe-area-inset-left, 0px));
    padding-right: calc(12px + env(safe-area-inset-right, 0px));
  }
}

/* ---------- 4. 100dvh menggantikan 100vh ---------- */
/* 100vh di browser mobile = tinggi LAYAR FULL, bukan tinggi area
   yang terlihat. Saat address bar muncul/disembunyikan, 100vh
   berubah-ubah sehingga footer ikut bergeser dan konten pernah
   tertutup keyboard.

   100dvh (dynamic viewport) mengikuti area yang benar-benar
   terlihat. Blok @supports dipakai supaya browser lama yang
   tidak mengenal 100dvh tetap memakai 100vh seperti sebelumnya. */
@supports (height: 100dvh) {
  .app-shell,
  .dudi-shell,
  .admin-shell,
  .admin-dashboard {
    min-height: 100dvh;
  }

  @media (max-width: 800px) {
    .admin-shell {
      min-height: 100dvh;
    }
  }
}

/* ---------- 5. Target sentuh minimal 44x44px ---------- */
/* Panduan Android & Apple: target di bawah 44px mudah salah ketuk,
   terutama buat siswa yang memindai QR sambil memegang HP dengan
   satu tangan. Di desktop tidak ada sentuhan, jadi rule ini hanya
   berlaku di perangkat sentuh -- tampilan desktop tidak berubah. */
@media (pointer: coarse) {
  .app-keluar,
  button.app-keluar,
  .admin-logout,
  .admin-backup-format,
  .admin-backup-download-button,
  .btn-lumine,
  .k-btn,
  .btn-cari,
  .app-menu-btn,
  .op-home-item,
  .admin-quick-links a {
    min-height: 44px;
  }

   /* Tombol kecil di dalam sel tabel sering cuma setinggi teks,
     karena `display` dan `padding`-nya dikecilkan supaya tabel
     muat. Pada layar sentuh keduanya dikembalikan supaya tombol
     benar-benar bisa ditekan. */
  .admin-guru-edit,
  .admin-guru-delete,
  .admin-dudi-edit,
  .admin-dudi-delete,
  .nilai-aksi .btn-lumine {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 .55rem;
  }
}

/* ---------- 6. Tabel lebar: scroll yang jelas ---------- */
/* `.table-responsive` dari Bootstrap sudah memberi overflow-x,
   tapi di HP tidak ada petunjuk bahwa tabel bisa digeser -- pengguna
   mengira tabelnya terpotong.

   Ditambahkan: panah gradien di tepi yang menunjukkan masih ada
   isi di samping, plus overscroll-behavior supaya "gulir ke luar" tidak ikut
   menggulir halaman induk. */
.table-responsive {
  /* overflow-x WAJIB dideklarasikan di sini, bukan mengandalkan
     Bootstrap. Aturan aslinya hanya memberi -webkit-overflow-
     scrolling, sehingga kemampuan menggulir seluruhnya berasal
     dari bootstrap.min.css yang dimuat dari CDN jsdelivr.
     Kalau CDN tidak terjangkau -- kondisi yang wajar di jaringan
     sekolah atau saat internet mati -- setiap tabel 560-760px
     di lima halaman master data meluber keluar kartunya dan
     ikut terpotong oleh overflow:hidden di bawahnya, persis
     gejala "terpotong dan tidak bisa digeser". Deklarasikan
     sendiri supaya tabel tetap bisa digeser tanpa CDN. */
  overflow-x: auto;
  /* Momentum di iOS: objek berhenti pelan setelah pengguna
     lepas jari. */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* Padding scroll mencegah scrollIntoView menempel tepat di
     tepi container dan menyembunyikan baris pertama/terakhir. */
  scroll-padding-inline: 1rem;
}

/* Catatan: tidak ditambahkan gradien "panah" di tepi tabel.
   Trik scroll-shadow yang umum butuh gradien penutup berwarna
   PUTIH di atas bayangan. Di aplikasi ini warna permukaan
   berubah antara mode terang, enam tema, dan mode gelap
   (--surface / --admin-surface), jadi gradien putih akan
   tampak sebagai kotak terang di mode gelap. Perbaikan yang
   salah lebih buruk daripada tidak ada. */

/* ---------- 7. Aksi kolom tabel nilai ---------- */
/* Lebar tetap 158px membuat kolom ini memakan ruang berharga yang
   tidak ada di layar 360px. Di bawah 640px lebarnya dilepas
   supaya tabel benar-benar punya ruang untuk data. */
@media (max-width: 640px) {
  table.nilai-table th.aksi-kolom,
  table.nilai-table td.aksi-kolom {
    width: auto;
  }

  .nilai-aksi {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    justify-content: center;
  }

  .nilai-aksi .btn-lumine {
    padding: .35rem .55rem;
    font-size: .7rem;
  }
}

/* ---------- 8. Kolom kode akses guru / DUDI ---------- */
/* Input kode akses berada di dalam sel tabel yang punya
   min-width. Di layar kecil, `width:100%` + max-width dari
   blok utama sudah cukup; yang perlu adalah stack tombol
   edit/hapus supaya tidak berdempetan. */
@media (max-width: 700px) {
  .admin-guru-code-form input,
  .admin-dudi-code-form input {
    max-width: 100%;
    min-height: 40px;
  }

  .admin-guru-edit,
  .admin-guru-delete,
  .admin-dudi-edit,
  .admin-dudi-delete {
    display: inline-block;
    margin-top: 4px;
  }
}

/* ---------- 9. Video kamera mengikuti lebar layar ---------- */
/* `height:300px` tetap membuat video melebar keluar layar di HP
   yang sempit, karena object-fit:cover memotong SISI bukan
   tinggi. Diganti aspect-ratio supaya bingkai selalu proporsional
   dan tidak keluar dari viewport. */
@media (max-width: 820px) {
  .kamera-app video {
    height: auto;
    /* 16/9, bukan 4/3. Stream diminta pada 1280x720 (16:9). Kotak
       4/3 dengan object-fit cover memotong 25% lebar frame di kiri
       dan kanan, sementara overlay bingkai landmark digambar dengan
       koordinat frame PENUH. Akibatnya kotak yang terlihat di layar
       tidak sama dengan wajah yang sedang dianalisa, dan syarat
       "wajah di tengah bingkai" menolak wajah yang secara visual
        sudah pas. Menyamakan aspect-ratio dengan rasio stream
        menghilangkan seluruh pergeseran itu. */
    aspect-ratio: 16 / 9;
    max-height: 52vh;
    object-fit: cover;
  }

  .kamera-app .kamera-viewport {
    min-height: 0;
  }
}

/* ---------- 10. Sticky topbar: ruang scroll yang benar ---------- */
/* html { scroll-padding-top } ditulis di blok atas memakai
   96px untuk desktop. Di HP topbar lebih pendek, dan angka
   hardcoded itu membuat anchor sedikit meleset. Diturunkan
   ke nilai yang sama dengan media query 640px di atas. */
@media (max-width: 640px) {
  html { scroll-padding-top: 84px; }
}

/* ---------- 11. Hemat gerak untuk HP ---------- */
/* Animasi transisi berjalan di thread utama. Di HP kelas
   bawah, animasi yang tidak perlu (hover, masuk halaman)
   hanya membuang frame dan baterai. Dimatikan HANYA kalau
   pengguna memang memintanya lewat setelan sistem. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 12. Cegah zoom gesture di halaman absensi ---------- */
/* Gestur dua-jari di halaman kamera membesar-besarkan video dan
   membuat jepret diambil tanpa sengaja saat pengguna memencet.
   Mematikan gestur multi-sentuh HANYA di area kamera --
   halaman lain tetap boleh diperbesar seperti biasa. */
@media (max-width: 820px) {
  .kamera-app,
  .kamera-app * {
    touch-action: manipulation;
  }

  .kamera-app video,
  .kamera-app canvas {
    touch-action: none;
  }
}

/* ============================================================
   MODAL TAMBAH DATA MASTER
   ------------------------------------------------------------
   Halaman master data (Siswa, DUDI, Guru, Instruktur, Jurusan)
   memakai pola yang sama:

     [ Tombol "Tambah ..." ]  ->  modal Bootstrap
     [ tombol Edit di tabel ] ->  modal Bootstrap (per baris)

   Formulir tambah tidak lagi tampil di halaman. Ini bukan
   sekadar soal estetika: formulir tambah yang panjang memakan
   layar penuh di HP, sehingga tabel -- bagian yang sebenarnya
   sering dibuka -- terdorong jauh ke bawah.
   .admin-tambah-bar  : baris berisi tombol pemicu
   .admin-tambah-btn  : tombol pemicunya

   .admin-modal-grid dipakai di dalam modal. Sengaja memakai
   kelas BARU, bukan .admin-dudi-modal-grid / .admin-guru-modal-grid
   yang sudah ada, supaya lima halaman ini seragam dan tidak
   saling bergantung pada gaya spesifik satu halaman.
   ============================================================ */
.admin-tambah-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.admin-tambah-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 44px;
  padding: .6rem 1.15rem;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #10b981, #047857);
  color: #fff;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 20px -12px rgba(5, 150, 105, .9);
  transition: transform .15s, box-shadow .15s;
}

.admin-tambah-btn:hover,
.admin-tambah-btn:focus-visible {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 24px -14px rgba(5, 150, 105, .95);
}

.admin-tambah-btn:focus-visible {
  outline: 2px solid #047857;
  outline-offset: 2px;
}

/* Baris pemicu ikut jadi penuh di layar sempit: tombol yang
   menempel di tepi kanan terlihat seperti hasil terpotong, dan
   target sentuhnya jadi lebih sempit dari seharusnya. */
@media (max-width: 640px) {
  .admin-tambah-bar {
    justify-content: stretch;
  }

  .admin-tambah-btn {
    flex: 1 1 auto;
  }
}

/* ---------- Grid isian di dalam modal ---------- */
/* Dua kolom: satu sel = satu FIELD utuh (label di atas kontrolnya).

   VERSI LAMA: grid-template-columns: minmax(0, 1px) minmax(0, 1fr)
   -- kolom pertama sengaja dikunci 1px. Niatnya sempat "label di
   kiri, input di kanan" supaya <select> panjang tidak mendorong
   grid. Tapi markup-nya <label><span>Label</span><input></label>,
   jadi setiap <label> adalah SATU sel grid, bukan dua sel terpisah.
   Akibatnya auto-placement menaruh:
       field 1 -> kolom 1 (1px)  = input-nya 1px, HILANG
       field 2 -> kolom 2 (1fr)  = normal
       field 3 -> kolom 1 (1px)  = HILANG
       ...
   Tambah Siswa (7 field): NISN, Kelas, Jurusan, dan Pembimbing
   tidak terlihat sama sekali -- hanya Nama Siswa, Jenis Kelamin, dan
   DUDI yang tampil. Itulah yang bikin formnya terasa "berantakan":
   bukan soal lebar, tapi setengah fieldnya hilang.

   minmax(0, 1fr) per kolom sudah menyelesaikan masalah yang
   semula jadi alasan kolom 1px itu ada: lantai min-content
   <select> yang isinya panjang (mis. nama DUDI) tidak lagi bisa
   melebarkan track melewati dialog. */
.admin-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* Jumlah field ganjil (mis. 3 di Tambah Guru, 7 di Tambah Siswa)
   membuat field terakhir sendirian di kolom 1 dan menyisakan
   setengah baris kosong. Selector :last-child:nth-child(odd) hanya
   PAS saat field terakhir memang ganjil -- tidak perlu menandai
   field satu per satu di markup, dan tetap benar kalau nanti ada
   field yang ditambah atau dihapus. */
.admin-modal-grid > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.admin-modal-grid label,
.admin-modal-grid > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.admin-modal-grid label > span,
.admin-modal-grid > div > span {
  color: var(--admin-ink, #0f172a);
  font-size: .76rem;
  font-weight: 700;
}

.admin-modal-grid input,
.admin-modal-grid select,
.admin-modal-grid textarea {
  min-height: 44px;
  width: 100%;
  max-width: 100%;
  padding: .6rem .8rem;
  color: var(--admin-ink, #0f172a);
  background: #f8fafc;
  border: 1px solid var(--admin-line, #d7e0ec);
  border-radius: 10px;
  font-family: inherit;
  font-size: .84rem;
}

.admin-modal-grid select {
  /* <select> bawaan browser sering memanjang melebihi lebar
     wadahnya. width:100% dan min-width:0 di atas sudah
     menahannya; min-width:0 di sini menutup kemungkinan
     browser yang mengabaikan salah satunya. */
  min-width: 0;
}

.admin-modal-grid input:focus,
.admin-modal-grid select:focus,
.admin-modal-grid textarea:focus {
  outline: 0;
  border-color: #9aabc5;
  background: #fff;
  box-shadow: 0 0 0 .2rem rgba(36, 58, 99, .08);
}

.admin-modal-grid small {
  color: var(--admin-muted, #64748b);
  font-size: .7rem;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .admin-modal-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

/* Modal di layar pendek (HP landscape): judul dan kaki dialog
   ikut menjulur, membuat area isian tinggal sedikit. */
@media (max-height: 560px) {
  .modal-dialog {
    margin: .5rem;
  }

  .modal-body {
    padding: .9rem 1rem;
  }

  .modal-header,
  .modal-footer {
    padding: .6rem 1rem;
  }

  .admin-modal-grid {
    gap: 10px;
  }

  .admin-modal-grid input,
  .admin-modal-grid select,
  .admin-modal-grid textarea {
    min-height: 40px;
    padding: .45rem .7rem;
  }
}

@media (max-width: 800px) and (max-height: 560px) {
  .modal-dialog {
    max-width: none;
    margin: .4rem;
  }

  .admin-modal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
   SIDEBAR ADMIN DI LAYAR KECIL
   ------------------------------------------------------------
   CATATAN: aturan di blok ini MENGGANTIKAN versi lama, bukan
   menambahkannya. Sidebar sekarang jadi drawer penuh
   (position:fixed, lihat blok di akhir berkas). Aturan
   max-height 45vh / 40vh / 34vh di bawah sudah dikalahkan
   specificity oleh blok drawer tersebut -- sengaja, karena
   batas tinggi itu justru penyebab menu tidak pernah terlihat
   saat tombol ditekan di tengah halaman.
   ============================================================ */

/* Di layar lebar: tombol tidak pernah muncul. */
.admin-nav-toggle {
  display: none;
}

/*    CATATAN: aturan position di blok @media di bawah sudah
   digantikan oleh blok di akhir berkas, di mana elemen ini
   menjadi tombol mengambang di dasar layar (position:fixed).
   Alasannya dilaporkan: sebagai elemen di dalam alur halaman,
   tombol ikut ter-scroll dan tidak bisa dijangkau dari
   tengah halaman. */
@media (max-width: 800px) {
  .admin-nav-toggle {
    display: block;
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 10px 14px;
    background: var(--admin-surface, #fff);
    border-bottom: 1px solid var(--admin-line, #e3e9f2);
  }

  .admin-nav-toggle-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    /* 48px, bukan 44px: ini target sentuh utama di halaman
       admin versi HP, jadi ia mendapat sentuhan paling besar. */
    min-height: 48px;
    padding: .65rem .85rem;
    color: var(--admin-ink, #0f172a);
    background: #f8fafc;
    border: 1px solid var(--admin-line, #e3e9f2);
    border-radius: 12px;
    font-family: inherit;
    font-size: .86rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
  }

  .admin-nav-toggle-btn > span {
    flex: 1 1 auto;
  }

  .admin-nav-toggle-panah {
    flex: 0 0 auto;
    color: var(--admin-muted, #64748b);
    transition: transform .18s;
  }

  /* Panah berputar saat sidebar terbuka, supaya keadaan
     tidak bergantung pada ingatan pengguna. */
  .admin-nav-toggle-btn[aria-expanded="true"] .admin-nav-toggle-panah {
    transform: rotate(180deg);
  }

  .admin-nav-toggle-btn:focus-visible {
    outline: 2px solid var(--admin-navy, #1b2a49);
    outline-offset: 2px;
  }

  /* disembunyikan secara bawaan; kelas .is-terbuka dipasang JS.
     Bentuknya sebagai drawer (position:fixed) diatur di blok
     akhir berkas. */
  .admin-sidebar {
    display: none;
    max-height: none;
    overflow: visible;
  }

  .admin-sidebar.is-terbuka {
    display: block;
  }

  /* ATURAN INI SUDAH TIDAK BERLAKU. Semuanya -- max-height,
     padding, dan overflow -- dikalahkan specificity oleh blok
     drawer di akhir berkas, karena batas 45vh inilah yang membuat
     menu tidak pernah terlihat ketika tombol ditekan dari tengah
     halaman. Dibiarkan di sini hanya supaya riwayatnya jelas;
     mengubahnya di sini tidak akan mengubah apa pun. */
  .admin-sidebar.is-terbuka {
    max-height: 45vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 12px 14px;
  }
}

/* ============================================================
   GRID LEBAR YANG TIDAK BISA DIGESER
   ------------------------------------------------------------
   .admin-rubric-elements (min-width 920px) dan
   .admin-rubric-reference-table (min-width 700px) adalah CSS
   GRID, bukan <table>, jadi tidak ikut tertangkap pembungkus
   .table-responsive yang menyelamatkan <table> di bagian atas
   berkas.

   PENTING SOAL URUTAN: blok ini sengaja diletakkan di AKHIR
   berkas. Aturan dasarnya -- .admin-rubric-elements dengan
   min-width 920px dan .admin-rubric-reference-card dengan
   overflow:hidden, keduanya di bagian "rubrik" di atas --
   specificity-nya sama dan berada DI DAWAH blok ini. Media
   query tidak menambah specificity, jadi kalau blok ini
   diletakkan lebih awal, ia akan kalah diam-diam dan
   perbaikannya tidak pernah berlaku -- persis yang terjadi
   pada versi pertama perubahan ini.

   Blok kembar di bagian atas berkas sengaja hanya berisi
   catatan, bukan Styling, supaya tidak ada duplikat aturan
   yang saling meniadakan.
   ============================================================ */
@media (max-width: 900px) {
  .admin-rubric-elements {
    min-width: 0;
  }

  .admin-rubric-elements td:first-child {
    min-width: 0;
  }

  /* Sel rubric memuat kalimat acuan yang panjang. Pada 360px,
     kolom pertama yang dikunci 170px membuat kolom bahan ajar
     tersisa sangat sempit. */
  .admin-rubric-elements th,
  .admin-rubric-elements td {
    padding: 8px 7px;
    font-size: .68rem;
    overflow-wrap: anywhere;
  }

  /* overflow:hidden di aturan dasar memotong grid 700px tanpa
     memberi cara menggulir. overflow-x:auto memakai perilaku
     yang sama (tetap memotong) tetapi membolehkan pengguna
     menggeser, jadi isi yang lebar tetap bisa dibaca. */
  .admin-rubric-reference-card {
    overflow-x: auto;
  }
}

/* ============================================================
   MODUL ABSENSI RINGAN (assets/js/absensi.js)
   ------------------------------------------------------------
   Sengaja memakai prefix .absensi- supaya TIDAK bentrok dengan
   .kamera-* milik kamera.js. Keduanya boleh dipakai bersamaan
   di halaman yang sama tanpa saling menimpa gaya.
   ============================================================ */
.absensi-app .absensi-viewport {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #0b1220;
  border: 2px dashed #6ee7b7;
}

/* Bingkai mengikuti rasio 4:3 (640x480) dan dibatasi tingginya.
   Tanpa max-height, video akan setinggi 75vh dan menutupi
   tombol di bawahnya di layar pendek. */
.absensi-app video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  max-height: 55vh;
  object-fit: cover;
  /* Swipe di area video tidak boleh memperbesar halaman --
     justru bisa membuat tombol Jepret tak bisa ditekan. */
  touch-action: none;
}

.absensi-app .absensi-geo {
  position: absolute;
  left: 12px;
  bottom: 12px;
  max-width: calc(100% - 24px);
  padding: .35rem .75rem;
  border-radius: 9px;
  background: rgba(11, 18, 32, .82);
  color: #fff;
  font-size: .8rem;
}

.absensi-app .absensi-pratinjau {
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 18px 40px -22px rgba(15, 23, 42, .45);
}

.absensi-app .absensi-pratinjau img {
  display: block;
  width: 100%;
}

.absensi-app .absensi-aksi {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}

.absensi-app .absensi-aksi .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border-radius: 11px;
  font-weight: 700;
}

/* Tanpa .d-none yang eksplisit, utility itu tidak selalu menang
   dari display:inline-flex di atas. */
.absensi-app .d-none { display: none !important; }

.absensi-app .absensi-info {
  min-height: 1.5rem;
  margin-top: .8rem;
  font-size: .85rem;
  line-height: 1.5;
}

@media (max-width: 820px) {
  .absensi-app video {
    max-height: 42vh;
  }

  .absensi-app .absensi-aksi .btn {
    min-height: 44px;
  }
}

/* ============================================================
   LAPISAN LANDSCAPE / VIEWPORT PENDEK
   ------------------------------------------------------------
   Blok-blok sebelumnya semuanya memakai max-WIDTH. Itu
   menyelesaikan portrait, tapi tidak menyelesaikan landscape,
   karena masalah di landscape bukan lebar -- melainkan TINGGI.

   Contoh nyata (iPhone 12 landscape = 844 x 390):
     - @media (max-width: 820px) TIDAK terpenuhi, karena 844 > 820.
      - Jadi perbaikan kamera di bawah tidak aktif, dan
        .kamera-app video memakai max-height 52vh yang pada
        viewport 390px berarti 203px. Sisa ruang untuk tombol dan
        seluruh isi form: 187px.
     - .admin-topbar tetap min-height 92px -- 24% dari layar.
     - Chart dashboard min-height 330px -- 85% dari layar.

   Karena itu ambang di sini adalah TINGGI, bukan lebar:
   (max-height: 560px) menangkap semua HP landscape (375-430px)
   maupun jendela browser pendek di desktop, tanpa menyalakan
   aturan ini di tablet yang ruangnya masih lega.

   Blok ini ditaruh PALING AKHIR karena harus menang atas aturan
   max-width di atas (kamera: 46vh di sini vs 52vh di blok 820px).
   ============================================================ */

/* ---------- 1. Kamera: bingkai mengikuti tinggi layar ---------- */
/* Prioritas utama. max-height dipakai, bukan height tetap,
   supaya video selalu muat walau ada address bar atau keyboard
   virtual yang menambah/mengurangi tinggi viewport. */
@media (max-height: 560px) {
  .kamera-app video {
    height: auto;
    /* Stream 1280x720 = 16:9. Lihat catatan di blok 820px di atas:
       rasio kotak harus sama dengan rasio stream, kalau tidak
       overlay bingkai bergeser dari wajah yang terlihat. */
    aspect-ratio: 16 / 9;
    max-height: 46vh;
    object-fit: cover;
  }

  /* min-height: 0 (bukan 260px dari blok utama) supaya bingkai
     mengikuti tinggi video, bukan memaksakan tinggi minimum
     yang tidak ada gunanya di layar pendek. */
  .kamera-app .kamera-viewport {
    min-height: 0;
  }

  /* 38vh, BUKAN 46vh seperti kamera di atas. Aturan
     max-width:820px yang lebih dulu menetapkan 42vh; kalau di
     sini ditulis 46vh, landscape justru membuat video lebih
     besar -- berlawanan dengan tujuan blok ini. Progresinya
     sekarang menurun: 42 (portrait) -> 38 (landscape)
     -> 34 (sangat pendek). */
  .absensi-app video {
    max-height: 38vh;
  }

  /* Watermark lokasi menempel di tepi bawah; di layar pendek
     warnanya menimpa sebagian besar bingkai. Dikecilkan. */
  .kamera-geo,
  .absensi-app .absensi-geo {
    left: 8px;
    bottom: 8px;
    padding: .2rem .5rem;
    font-size: .68rem;
  }

  .kamera-app .kamera-info,
  .absensi-app .absensi-info {
    min-height: 0;
    margin-top: .4rem;
    font-size: .75rem;
  }
}

/* ---------- 2. Topbar admin: 92px jadi ramping ---------- */
/* min-height: 92px pada aturan dasar .admin-topbar tidak pernah
   dikecilkan di media query lain, karena semua breakpoint berbasis
   lebar dan kolom-stack yang membantu hanya jalan di <=480px --
   sedangkan HP landscape justru 640-932px. */
@media (max-height: 560px) {
  .admin-topbar {
    min-height: 0;
    padding: 10px 16px;
    gap: 12px;
  }

  .admin-topbar h1 {
    font-size: 1rem;
  }

  .admin-topbar p {
    margin-top: 1px;
    font-size: .72rem;
  }

  /* Anchor di halaman harus berhenti di BAWAH topbar, bukan
     tertutupnya. Nilai 96px (desktop) dan 84px (mobile
     portrait) sama-sama sekitar 20-25% dari 390px. */
  html {
    scroll-padding-top: 58px;
  }

  .app-shell section[id],
  .app-shell [id^="bagian-"] {
    scroll-margin-top: 58px;
  }

  .app-topbar-in {
    padding: .35rem .75rem;
  }

  .app-navbar {
    padding: 0 .5rem .25rem;
  }

  /* .admin-page-head dikecilkan di sini: di <=800px dia jadi
     dua baris (flex-direction: column), dan di 932px landscape
     kolom-stack itu TIDAK aktif -- jadi gap + padding-nya yang
     harus dikecilkan agar tidak memakan tinggi layar. */
  .admin-page-head {
    gap: 10px;
    padding-bottom: 10px;
  }

  .admin-content {
    padding: 14px 16px 24px;
  }

  /* Daftar ini harus sama persis dengan aturan dasar
     .admin-content > * di bagian "admin" berkas ini,
     termasuk .admin-rubric-reference yang punya aturannya
     sendiri di blok rubrik. Kalau ada yang tertinggal di sini
     saja, blok itu akan tetap memakai margin 20px sementara
     yang lain jadi 12px -- jarak antar kartu jadi tidak
     seragam. */
  .admin-content > .card,
  .admin-content > .admin-report-toolbar,
  .admin-content > .admin-stat-grid,
  .admin-content > .admin-filter-card,
  .admin-content > .admin-table-card,
  .admin-content > .admin-form-card,
  .admin-content > .admin-chart-card,
  .admin-content > .admin-chart-grid,
  .admin-content > .admin-bottom-grid,
  .admin-content > .admin-account-grid,
  .admin-content > .admin-backup-grid,
  .admin-content > .admin-rubric-grid,
  .admin-content > .admin-rubric-table-card,
  .admin-content > .admin-danger-card,
  .admin-content > .admin-rubric-reference {
    margin-top: 12px;
  }
}

/* ---------- 3. Jarak menu lebih rapat di layar pendek ---------- */
/* Batas tinggi sidebar sudah tidak relevan lagi: sidebar kini
   drawer penuh (position:fixed) yang ruang layarnya selalu
   memenuhi seluruh viewport. Yang masih perlu disetel di sini
   hanyalah kerapatan menu, supaya lebih banyak tautan muat
   tanpa menggulir di HP landscape.

   Aturan max-height di blok ini sengaja TIDAK dihapus, hanya
   dikalahkan specificity oleh blok drawer di akhir berkas --
   biayanya nol, dan dokumentasinya di situ. */
@media (max-width: 800px) and (max-height: 560px) {
  .admin-sidebar.is-terbuka {
    max-height: none;
  }

  .admin-nav {
    gap: 4px 6px;
  }
}

/* ---------- 4. Chart dashboard ---------- */
/* min-height 330px / 225px berarti 52-85% dari viewport
   landscape. Chart jadi bisa di-scroll, isinya tetap utuh. */
@media (max-height: 560px) {
  .admin-dashboard-chart-grid .admin-chart-card {
    min-height: 0;
    padding: 14px;
  }

  .admin-dashboard-chart-grid .admin-vertical-chart,
  .admin-dashboard-chart-grid .admin-horizontal-chart,
  .admin-dashboard-chart-grid .admin-bars {
    min-height: 148px;
  }

  .admin-chart-card,
  .admin-list-card {
    padding: 14px;
  }

  /* Kartu statistik: min-height 132-150px x 2 baris = 300px,
     padahal isinya cuma angka dan label. Tinggi minimum di sini
     tidak menambah informasi apa pun.

     .admin-mini-stats sengaja TIDAK ikut: anak-anaknya bukan
     .admin-stat-card melainkan div biasa, jadi
     selector itu tidak akan pernah cocok. */
  .admin-stat-card,
  .admin-dashboard-stat-grid .admin-stat-card {
    min-height: 0;
  }

  .admin-stat-grid,
  .admin-dashboard-stat-grid {
    gap: 10px;
  }
}

/* ---------- 5. Halaman login ---------- */
/* .auth-card punya padding 2rem yang tidak pernah dikecilkan.
   Di 375px tinggi, kartu yang terpusat justru lebih tinggi
   dari layar dan bagian atasnya terpotong. */
@media (max-height: 560px) {
  .auth-body {
    min-height: 100dvh;
    padding: .9rem .75rem;
  }

  .auth-wrap {
    max-width: 100%;
  }

  .auth-card {
    padding: 1.1rem 1.15rem;
  }

  /* .auth-head .auth-icon (bukan .auth-icon) karena aturan dasarnya
     memakai prefix itu. Tanpa prefix yang sama,
     spesifisitas (0,1,0) kalah dari (0,2,0) dan ikon tetap 60px. */
  .auth-head .auth-icon {
    width: 46px;
    height: 46px;
    font-size: 1.35rem;
    border-radius: 13px;
  }

  .auth-hint {
    margin-top: .7rem;
    padding: .5rem .7rem;
    font-size: .75rem;
  }
}

/* ---------- 6. Dashboard murid ---------- */
/* .app-header punya padding bawah 4.4rem yang dikompensasi
   margin negatif -3.1rem pada .app-main. Keduanya harus
   dikecilkan BERSAMAAN; kalau hanya satu, isi akan menimpa
   header atau menyisakan ruang kosong. */
@media (max-height: 560px) {
  .app-header {
    padding: .85rem 1rem 3rem;
  }

  .app-header ~ .app-main {
    margin: -2.15rem auto 0;
  }
}

/* ---------- 7. Panel operator ---------- */
@media (max-height: 560px) {
  .op-lock,
  .op-home {
    padding: 18px 14px;
  }

  .op-home-grid {
    gap: 7px;
  }

  .op-home-kaki {
    margin-top: 14px;
    padding-top: 12px;
  }
}

/* ---------- 8. Landscape yang SANGAT pendek ---------- */
/* Ponsel lama / mode split-screen: 320-360px tinggi. Di sini
   44px target sentuh mulai jadi porsi besar dari layar, jadi
   ruang lain yang dikecilkan lebih agresif -- tapi tinggi
   tombol sendiri TIDAK dikurangi (itu kebutuhan aksesibilitas
   dan tidak layak ditawar demi hemat ruang). */
@media (max-height: 400px) {
  .kamera-app video,
  .absensi-app video {
    max-height: 34vh;
  }

  .admin-dashboard-chart-grid .admin-vertical-chart,
  .admin-dashboard-chart-grid .admin-horizontal-chart,
  .admin-dashboard-chart-grid .admin-bars {
    min-height: 116px;
  }

  .admin-topbar p {
    /* Di 360px tinggi, satu baris subjudul pun ~= 5% layar. */
    display: none;
  }
}

@media (max-width: 800px) and (max-height: 400px) {
  .admin-sidebar.is-terbuka {
    max-height: none;
  }
}

/* ============================================================
   HEADER ADMIN DI HP
   ------------------------------------------------------------
   MASALAH YANG DISELESAIKAN

   Header dibangun dengan flex + flex-wrap. Di HP itu gagal
   karena SEARCH punya basis yang lebih besar dari sisa ruang:

       .admin-topbar-judul  flex: 1 1 240px
       .admin-cari          flex: 1 1 320px; min-width: 220px
       .admin-logout        flex: 0 1 auto  (~90px)

   Di layar 360px (lebar konten 320px setelah padding):
     240 + 320 + 90 + 2 x gap 24 = 698px  >  320px

   Browser membungkus: judul sendirian (baris 1), pencarian
   sendirian (baris 2), tombol Keluar sendirian (baris 3).
TIGA baris, bukan dua -- padahal baris 2 dan 3 muat
   berdua dengan mudah. Itulah sebabnya header admin terasa
   jauh lebih tinggi di HP dibanding di laptop, dan markup
   yang sama dipakai di seluruh 17 halaman admin.

   SOLUSI: ganti ke CSS Grid di layar kecil.

Grid dipakai (bukan sekadar menata ulang flex) karena
   grid-area bersifat DETERMINISTIK. Dengan flex-wrap,
   item mana yang jatuh di baris mana bergantung pada
   flex-basis masing-masing -- perubahan kecil pada padding
   atau font bisa membuat header melompat dari 2 baris jadi 3
   tanpa ada yang berubah di kode. Grid tidak punya sifat itu.

   Perhatikan: .logout-form di aturan dasar memakai
   display: contents, jadi <button>-nya yang jadi elemen grid,
   bukan <form>-nya. Itu sebabnya .admin-logout bisa diberi
   grid-area langsung.
   ============================================================ */

@media (max-width: 800px) {
  .admin-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "judul keluar"
      "cari  cari";
    align-items: center;
    justify-content: stretch;
    gap: 10px 12px;
    min-height: 0;
    padding: 12px 14px;
    /* Reset eksplisit. Aturan lama di @media (max-width: 480px)
       masih menaruh flex-direction: column di sini. Sekarang
       tidak berpengaruh (display: grid), tapi dibersihkan
       supaya tidak menjadi jebakan kalau suatu saat blok ini
       dihapus dan layout kembali ke flex diam-diam. */
    flex-direction: row;
    flex-wrap: wrap;
  }

  .admin-topbar-judul {
    grid-area: judul;
    min-width: 0;
  }

  .admin-logout {
    grid-area: keluar;
    justify-self: end;
  }

  .admin-cari {
    grid-area: cari;
  }

  .admin-topbar h1 {
    font-size: 1.02rem;
    /* Judul panel ini hanya berisi teks tetap ("Panel
       Administrator" / "Panel Operator"), jadi ellipsis praktis
       tidak pernah terpakai. Tapi tetap dipasang: yang
       sebenarnya menentukan adalah min-width: 0 di
       .admin-topbar-judul, supaya judul tidak pernah mendorong
       tombol Keluar keluar layar seandainya teksnya suatu saat
       diganti jadi lebih panjang. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Subjudul dipotong satu baris. Teks aslinya ("Kelola data,
     laporan, dan penilaian PKL sekolah.") membungkus dua baris
     di layar 360px dan memakan tinggi yang mahal -- padahal
     kalimat itu sudah disampaikan ulang oleh isi halaman. */
  .admin-topbar p {
    margin-top: 1px;
    font-size: .74rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Pencarian jadi selebar penuh. flex-basis 320px dan
     min-width 220px dari aturan utama DIBUANG, karena
     justru itulah yang memaksa pembungkusan tiga baris.

     min-width: 0 WAJIB. Tanpa itu, min-width: 220px masih
     berlaku dan track grid bisa melebar melebihi layar. */
  .admin-cari {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .admin-cari input[type="search"] {
    /* Aturan anti-zoom iOS di blok "Cegah zoom otomatis iOS
       saat input diklik" (selector input:not([type=checkbox]))
       sudah menaikkan font ke 16px.
       Padding dinaikkan sedikit supaya tinggi barisnya tetap
       di atas target sentuh 44px. */
    padding-top: .6rem;
    padding-bottom: .6rem;
  }

  /* Panel hasil ikut melebar mengikuti kotak pencarian yang kini
     selebar layar, jadi nama panjang tidak terpotong di
     laporan. */
  .admin-cari-panel {
    max-height: 52vh;
  }

  /* Saat keyboard HP terbuka, area yang terlihat menyusut
     hampir separuh, sementara vh tetap menghitung tinggi
     layout. Panel yang memakai vh murni akan meluncur melewati
     tepi bawah layar dan sebagian isinya tak terjangkau.

     dvh mengikuti viewport dinamis -- ikut menyusut bersama
     keyboard, jadi batasnya selalu pas di area yang benar-benar
     terlihat. @supports dipakai agar vh tetap berlaku di
     browser lama. */
  @supports (max-height: 52dvh) {
    .admin-cari-panel { max-height: 52dvh; }
  }

  .admin-logout {
    padding: .5rem .8rem;
    font-size: .78rem;
    white-space: nowrap;
  }
}

/* ---------- HP yang sangat sempit (320px) ---------- */
@media (max-width: 360px) {
  .admin-topbar {
    padding: 10px 12px;
    gap: 8px 10px;
  }

  .admin-topbar h1 { font-size: .95rem; }

  .admin-topbar p { font-size: .7rem; }

  /* Di 320px, ikon + "Keluar" ~= 78px. Judul masih dapat
     sisa ~180px, cukup untuk "Panel Administrator" satu
     baris dengan ellipsis. */
  .admin-logout {
    padding: .45rem .65rem;
    font-size: .74rem;
  }
}

/* ---------- Landscape pendek: satu baris ---------- */
/* Di HP landscape ruang LEBAR tapi TINGGI yang langka. Grid
   dua baris di atas akan memakai sekitar 110px dari 375px --
   29% layar sebelum konten.

   Karena itu di sini dikembalikan ke SATU baris:
   judul | pencarian | keluar. Semua muat karena lebar 667px
   masih jauh lebih besar dari jumlah basis-nya. */
@media (max-width: 800px) and (max-height: 560px) {
  .admin-topbar {
    grid-template-columns: minmax(0, 1fr) minmax(160px, 260px) auto;
    grid-template-areas: "judul cari keluar";
    gap: 12px;
    padding: 8px 14px;
  }

  /* min-width: 0 lagi-lagi wajib: track pencarian punya
     minmax(160px, 260px) yang akan memaksa kolom lain
     menyempit di layar sangat pendek. */
  .admin-cari {
    min-width: 0;
  }
}

@media (max-width: 800px) and (max-height: 400px) {
  .admin-topbar {
    padding: 6px 12px;
    gap: 10px;
  }

  .admin-topbar p { display: none; }
}

/* ============================================================
   PERBAIKAN LAYOUT HP / TABLET / IPHONE
   ------------------------------------------------------------
   Semua aturan di blok ini DITARUH DI AKHIR berkas dengan
   sengaja. Alasannya, bukan sekadar gaya: blok "tema v2"
   (style.css:3828-4130) adalah deklarasi ulang seluruh kulit
   admin dan ia berada DI BAWAH blok responsif yang lebih awal.
   Media query tidak menambah specificity, jadi nilai-nilai
   breakpoint HP yang ditulis di sana sudah lama dikalahkan
   diam-diam oleh nilai desktop. Contoh nyata yang terukur:
     .admin-content      22px 16px ->  jadi 20px semua sisi
     .admin-dashboard    0        ->  jadi 12px
     .admin-shell-layout 245px    ->  jadi 225px
   Ketiganya insieme-sama memakan 66px dari lebar pakai di layar
   375px.

   Menulis ulang di sini berarti blok ini berada setelah SEMUA
   aturan dasar, sehingga benar-benar menang tanpa perlu
   menggandakan specificity.
   ============================================================ */

/* ---------- 1. MODAL: badan form harus bisa di-scroll ---------- */
/*
   Gejalanya: di HP, tombol "Simpan" di modal Tambah/Edit tidak
   bisa dijangkau karena area isian tidak pernah mau bergulir.

   Mekanismenya ada dua, dan keduanya harus diperbaiki:

   a) .modal-content milik Bootstrap adalah flex column. Biasanya
      .modal-body adalah anak langsungnya, sehingga
      overflow-y:auto miliknya bekerja. Tapi di semua modal
      aplikasi ini ada <form> di antara keduanya -- jadi yang
      menjadi anak flex adalah <form>, bukan .modal-body.
      Flex item punya min-height:auto = tinggi isinya, jadi
      form tidak pernah menyusut, .modal-body tidak pernah
      dibatasi tingginya, dan tombol Simpan terdorong keluar
      dialog.

   b) .overflow-hidden pada .modal-content membuat isi yang
      meluber TERPOTONG, bukan sekadar bergeser. Karena
      .modal-content sudah punya max-height (dari a), tidak ada
      jalur pemulihan lain -- persis gejala "tidak bisa di-scroll".
*/
.modal-content {
  /* 100dvh adalah tinggi viewport dinamis: di iPhone yang
     address bar-nya menyusut, dvh ikut menyusut sehingga
     dialog tidak keluar layar. dvh tidak didukung browser
     lama, jadi ada fallback dvh -> vh di bawah. */
  max-height: calc(100vh - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
}

.modal-content > form {
  /* Jadikan <form> rusak lagi flex column, dan BERI DIA
     min-height:0 supaya boleh menyusut di bawah tinggi
     .modal-content. Inilah satu-satunya perbaikan yang membuat
     langkah (a) bekerja. */
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.modal-content > form > .modal-body {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Leher kepala dan kaki dialog tidak ikut bergulir -- hanya
   isian yang boleh. Tanpa ini, judul ikut ter-scroll bersama
   isian dan pengguna kehilangan konteks tombol yang dia cari. */
.modal-content > form > .modal-footer {
  flex: 0 0 auto;
}

/* ---------- 2. SIDEBAR: drawer, bukan blok dalam alur ---------- */
/*
   Gejalanya: setelah halaman di-scroll ke bawah, tombol "Menu
   Navigasi" ikut ter-scroll dan menekan tombolnya tidak
   menampilkan apa pun -- pengguna harus scroll penuh ke atas
   dulu.

   Itu bukan karena sticky gagal. Sidebar-nya hanya BERUBAH
   dari display:none menjadi display:block, jadi ia tetap
   elemen dalam alur dokumen di posisi paling atas halaman.
   Kalau pengguna sedang di scrollY = 1400, menu yang baru
   "terbuka" berada 1400px DI ATAS posisi layar sekarang.
   Offset scroll tidak berubah, jadi dari sisi pengguna tidak
   terjadi apa-apa.

   Perbaikannya bukan urusan CSS semata, tapi mengubah sidebar
   jadi drawer yang MENYAMPAI konten (position:fixed) lengkap
   dengan latar gelap di belakangnya.
*/
.admin-drawer-tutup {
  /* Tombol tutup di dalam drawer. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  margin-bottom: 12px;
  padding: .5rem .75rem;
  color: var(--admin-ink, #0f172a);
  background: #f8fafc;
  border: 1px solid var(--admin-line, #e3e9f2);
  border-radius: 12px;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}

.admin-drawer-tutup > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Di layar lebar tombol tutup tidak boleh muncul sama sekali. */
@media (min-width: 801px) {
  .admin-drawer-tutup { display: none; }
}

/* Kunci gulir halaman selama drawer terbuka. overflow:hidden pada
   <html> diperlukan, bukan pada <body> -- scroll-lock berbasis
   body hanya bekerja di sebagian peramban. */
html.admin-drawer-terbuka,
html.admin-drawer-terbuka body {
  overflow: hidden;
}

@media (max-width: 800px) {
  /* Tombol Menu menjadi tombol mengambang di dasar layar, bukan
     elemen di dalam alur halaman. Dengan begitu ia selalu ada
     di layar berapa pun posisinya pengguna sedang menggulir. */
  .admin-nav-toggle {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    top: auto;
    z-index: 1030;
    padding: 0;
    background: none;
    border: 0;
  }

  .admin-nav-toggle-btn {
    /* Bayangan supaya tombol mengambang tetap terbaca di atas
       tabel apa pun yang sedang lewat di bawahnya. */
    box-shadow: 0 10px 30px -8px rgba(15, 23, 42, .38);
  }

  /* Ruang untuk tombol mengambang, supaya isian baris terakhir
     tabel tidak pernah tertutup tombol Menu. Dipakai sebagai
     longhand, bukan shorthand `padding`, karena blok "5. LEBAR
     KEMBALI DI HP" di bawah hanya menuliskan padding kiri/kanan/
     atas -- dan kalau suatu saat penulisnya memakai shorthand,
     nilai 78px ini akan hilang tanpa suara. */
  .admin-content {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }

  /* Drawer. position:fixed membuatnya selalu terlihat ke mana
     pun halaman sedang berada.

     PENTING SOAL SELECTIVITY: aturan-aturan ini TIDAK BOLEH
     ditulis pada selector .admin-sidebar saja. Di atas ada
     .admin-sidebar.is-terbuka (specificity 0,2,0) yang masih
     menyetel max-height:45vh dan padding 10/12/14px. Media query
     tidak menambah specificity, jadi meski blok ini jauh lebih
     baru, .admin-sidebar (0,1,0) tetap kalah dan drawer akan
     tetap terpotong 45vh dengan padding yang tidak aman untuk
     notch iPhone. Karena itu di sini selector-nya memakai kelas
     ganda untuk mengikat specificity. */
  .admin-sidebar.is-terbuka,
  .admin-sidebar:not(.is-terbuka) {
    position: fixed;
    inset: 0;
    z-index: 1040;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 14px calc(24px + env(safe-area-inset-bottom, 0px));
    background: var(--admin-surface, #fff);
    /* Latar gelap tanpa elemen tambahan: box-shadow 100vmax
       menyeberang ke semua sisi drawer. */
    box-shadow: 0 0 0 100vmax rgba(15, 23, 42, .5);
  }

  .admin-sidebar:not(.is-terbuka) {
    display: none;
  }

  .admin-sidebar.is-terbuka {
    display: block;
    animation: admin-drawer-masuk .18s ease-out;
  }

  /* Menu dalam drawer memakai satu kolom penuh. Dua kolom
     (columns) terasa sempit di layar 375px dan membuat label
     seperti "Penilaian Siswa" terpotong. */
  .admin-sidebar .admin-nav-sub {
    grid-template-columns: minmax(0, 1fr);
  }
}

@keyframes admin-drawer-masuk {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-sidebar.is-terbuka { animation: none; }
}

/* ---------- 3. INPUT FILE ---------- */
/*
   <input type="file"> bawaan browser tidak bisa diperkecil hanya
   dengan width. Di iOS Safari, tombol internal
   (::-webkit-file-upload-button) punya lebar intrinsik mengikuti
   teks "Pilih File" pada ukuran font kontrol -- dan aturan
   anti-zoom (font-size:16px !important) justru membuatnya
   selebar mungkin. Akibatnya kontrol ini meluber keluar baris
   form dan terpotong.

   Solusinya: kontrol diberi lebar penuh pada barisnya sendiri,
   dan tombol internal diberi gaya sendiri yang tidak punya
   lebar minimum.
*/
.admin-student-import input[type="file"],
.admin-dudi-import input[type="file"],
.admin-guru-import input[type="file"],
.admin-instruktur-import input[type="file"] {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: .5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .8rem;
}

.admin-student-import input[type="file"]::file-selector-button,
.admin-dudi-import input[type="file"]::file-selector-button,
.admin-guru-import input[type="file"]::file-selector-button,
.admin-instruktur-import input[type="file"]::file-selector-button {
  min-width: 0;
  margin-right: 10px;
  padding: .5rem .7rem;
  color: var(--admin-ink, #0f172a);
  background: #f8fafc;
  border: 1px solid var(--admin-line, #e3e9f2);
  border-radius: 9px;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}

/* ::-webkit-file-upload-button adalah padanan untuk Safari lama
   dan iOS, yang tidak mengenal ::file-selector-button. */
.admin-student-import input[type="file"]::-webkit-file-upload-button,
.admin-dudi-import input[type="file"]::-webkit-file-upload-button,
.admin-guru-import input[type="file"]::-webkit-file-upload-button,
.admin-instruktur-import input[type="file"]::-webkit-file-upload-button {
  min-width: 0;
  margin-right: 10px;
  padding: .5rem .7rem;
  color: var(--admin-ink, #0f172a);
  background: #f8fafc;
  border: 1px solid var(--admin-line, #e3e9f2);
  border-radius: 9px;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 640px) {
  /* Tombol "Mulai Impor" pindah ke baris penuh di bawah
     kontrol file, supaya tidak berebut ruang dengannya. */
  .admin-student-import form button,
  .admin-dudi-import form button,
  .admin-guru-import form button,
  .admin-instruktur-import form button {
    flex: 1 1 100%;
  }
}

/* ---------- 4. GRID HALAMAN ---------- */
/*
   .admin-*-page adalah display:grid tanpa grid-template-columns,
   jadi track tunggalnya implisit auto = minmax(auto, auto).
   Grid item punya min-width:auto, sehingga anak yang min-content-nya
   besar akan melebarkan seluruh halaman. minmax(0, 1fr) menghapus
   lantai itu.
*/
.admin-student-page,
.admin-dudi-page,
.admin-guru-page,
.admin-instruktur-page,
.admin-jurusan-page {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

/* Section di dalamnya juga tidak boleh menyumbang lebar. */
.admin-student-page > *,
.admin-dudi-page > *,
.admin-guru-page > *,
.admin-instruktur-page > * {
  min-width: 0;
}

/* ---------- 5. LEBAR KEMBALI DI HP ---------- */
/* Diperbaiki di sini, bukan di blok responsif yang lama, karena
   blok tema v2 di atas menimpanya dengan nilai desktop. Padding
   yang dipulihkan: .admin-dashboard 0 (bukan 12px) dan
   .admin-content 18px 14px (bukan 20px semua sisi).

   padding-bottom SENGAJA TIDAK ditulis di sini dengan shorthand
   `padding`. Aturan sebelumnya (walau lebih awal di berkas ini)
   menyisakan ruang 78px + safe-area supaya baris terakhir tabel
   tidak tertutup tombol Menu yang mengambang di dasar layar.
   Shorthand `padding` akan mengembalikan nilai itu menjadi
   26px, dan tombolnya akan menutupi isi -- persis kelas bug yang
   sudah beberapa kali muncul di berkas ini. */
@media (max-width: 800px) {
  .admin-dashboard { padding: 0; }

  .admin-content {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 18px;
  }
}

/* ---------- 6. FOOTER ---------- */
.app-footer {
  /* Ruang untuk gesture bar iPhone. Tanpa ini, baris "© 2026 ·
     Hak cipta dilindungi" berada tepat di atas garis gesture dan
     sebagian tidak bisa dibaca. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  margin-bottom: 0;
}

.app-footer-inner {
  padding-bottom: 18px;
}

.app-footer-text {
  min-width: 0;
}

.app-footer-text strong,
.app-footer-text small {
  /* white-space:nowrap + ellipsis tanpa max-width membuat teks
     yang terpotong tidak pernah memakai ellipsis, dan justru
     mendorong nav ke luar. */
  min-width: 0;
}

/* Tablet: tidak ada satu pun aturan footer antara 801-1023px.
   iPad 834px dan 1112px mendapat layout baris desktop yang
   sempit, dengan brand memakai margin-right:auto yang membuat
   nav dan meta terdorong ke kanan. Breakpoint-nya 1024px, bukan
   800px seperti blok footer yang lebih lama di atas, supaya
   iPad ikut mendapat layout bertumpuk. */
@media (max-width: 1024px) {
  .app-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .app-footer-brand {
    margin-right: 0;
  }

  .app-footer-meta {
    margin-left: 0;
    padding-top: 10px;
    border-top: 1px solid var(--t-line, #e2e8f0);
    width: 100%;
  }

  /* Ellipsis hanya aktif bila ada max-width. Tanpanya, teks
     nowrap yang panjang dipotong oleh overflow-x:clip di
     html/body -- terpotong tanpa tanda, bukan dengan titik tiga.
     Berlaku untuk seluruh lebar di bawah 1024px, bukan hanya
     640px, karena di iPad pun nama sekolah bisa panjang. */
  .app-footer-text strong {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  /* Di layar kecil, kartu bersudut membulat yang menempel ke dua
     tepi layar terlihat aneh: panel admin di atasnya sudah
     memenuhi lebar layar dan tanpa border. Samakan. */
  .app-footer,
  .app-footer-terang,
  .app-footer-gelap {
    background: none;
    border: 0;
    border-radius: 0;
  }

  /* Garis dekoratif ::before sudah tidak perlu -- masih ada
     border dan fill, jadi tiga garis untuk satu pemisah. */
  .app-footer::before {
    display: none;
  }

  .app-footer-inner {
    padding: 14px 16px 18px;
    gap: 10px;
  }
}

/* ---------- 7. PERFAMA: jangan cat ulang background tiap scroll ---------- */
/*
   background-attachment: fixed pada dua radial-gradient besar
   memaksa viewport dicat ulang di SETIAP frame scroll di HP.
   iOS Safari juga mengabaikannya. Hapus di layar kecil saja.
*/
@media (max-width: 1024px) {
  body {
    background-attachment: scroll;
  }
}

/* ---------- 8. TOPBAR ADMIN STICKY DI HP ---------- */
/*
   .admin-topbar tidak punya position sama sekali di rule mana
   pun, sehingga di HP judul panel, pencarian global, dan tombol
   Keluar ikut ter-scroll jauh ke atas. html scroll-padding-top
   di file ini justru disetel 58-96px untuk mengosongkan ruang
   bagi topbar yang sebenarnya tidak pernah sticky.
*/
@media (max-width: 800px) {
  .admin-topbar {
    position: sticky;
    top: 0;
    z-index: 900;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
  }
}

/* ============================================================
   FOOTER HALAMAN LOGIN
   ------------------------------------------------------------
   Keempat halaman auth/ (login_admin, login_dudi, login_guru,
   login_murid) memakai .app-footer-fixed. Versi lamanya:

     .app-footer-fixed { position: absolute; bottom: 16px;
                         max-width: 480px; }

   Itu gagal karena tiga hal yang saling terkait:

   a) TIDAK ADA RUANG YANG DIALOKASIKAN. .auth-wrap hanya
      dipusatkan di dalam area isi .auth-body, sementara
      footer diposisikan absolut 16px dari dasar .auth-body
      (elemen itu position:relative, jadi dialah yang jadi
      acuan -- bukan dokumen).
      Padding bawah yang ada hanya env(safe-area-inset-bottom)
      milik .app-footer -- pada perangkat tanpa home indicator
      nilainya nol, dan di mana pun nilainya jauh lebih kecil
      dari tinggi footer itu sendiri. Tidak ada ruang yang
      disisakan untuk footer, jadi pada kartu yang tinggi
      (login_guru + pesan flash) footer menimpa isi kartu.

   b) DI BAWAH 560px LEBAR, footer berubah jadi position:static --
      TETAPI .auth-body tidak pernah diubah ke flex-direction:
      column. .auth-body tetap display:flex row, sehingga
      <footer> menjadi saudara .auth-wrap dalam SATU BARIS.
      Di iPhone 15 (393x852) kartu menyusut ke ~250px dan
      teks copyright menggantung sebagai untingan tipis di
      sampingnya.
      Ini merusak di semua ponsel modern portrait, bukan
      kasus pinggir.

   c) 100vh BUKAN 100dvh. 100vh memakai tinggi viewport TERBESAR
      -- tinggi saat address bar iOS disembunyikan. Begitu
      address bar atau keyboard virtual muncul, tinggi yang
      terlihat berkurang sementara 100vh tetap: bottom:16px
      jatuh di bawah area terlihat dan footer hilang.

   Dan lebarnya 480px, lebih lebar dari .auth-wrap (440px) --
   jadi di tablet footer terlihat kotak yang lebih lebar dari
   kartu yang seharusnya menjadi acuan.

   Solusinya satu: footer jadi anak flow normal, melebar sama
   dengan kartu, di dalam kolom flex. Bukan lagi melayang.
   ============================================================ */

/* 1. Body jadi KOLUM: kartu di atas, footer di bawah.
      Tanpa ini, footer static berdiri di samping kartu. */
.auth-body {
  flex-direction: column;
  justify-content: center;
}

/* .auth-wrap dibersihkan dari margin: auto 0 yang ada di blok
      max-height:720px. Margin otomatis pada flex item
      diselesaikan SEBELUM justify-content, dan ia memakan
      seluruh ruang bebas -- sehingga justify-content di atas
      tidak pernah ikut berlaku.

      Masalahnya muncul justru saat isinya tidak muat: ruang
      bebas menjadi negatif, margin otomatis runtuh jadi 0, dan
      justify-content: center baru kemudian membagi ruang
      negatif itu sama rata ke atas dan ke bawah. Titik teratas
      kartu berakhir di atas posisi scroll -- tidak terjangkau, dan
      pengguna tidak bisa menggulir ke atas untuk membacanya.
      Di layar setinggi 561-720px inilah yang terjadi, karena
      aturan pemadatan yang sesungguhnya baru mulai berlaku
      pada 560px.

      Dengan margin dinolkan, hanya justify-content yang
      menentukan posisi, dan ia bisa dikendalikan per breakpoint
      seperti di blok 8. */
.auth-wrap {
  margin: 0;
}

/* 2. 100dvh untuk semua lebar. Blok @supports global di
      berkas ini (.app-shell, .admin-shell, dan lainnya) tidak
      memuat .auth-body, jadi halaman login masih terjebak
      100vh yang tidak menyusut mengikuti address bar. */
@supports (min-height: 100dvh) {
  .auth-body {
    min-height: 100dvh;
  }
}

/* 3. Ruang bawah supaya footer tidak menempel ke tepi layar.

      env(safe-area-inset-bottom) SENGAJA TIDAK diulang di sini.
      Aturan umum .app-footer (blok 6) sudah menerapkannya sekali
      pada elemen itu sendiri, dan .app-footer-fixed adalah
      elemen yang sama. Kalau inset juga ditambahkan di sini,
      pada iPhone ber-home-indicator nilainya terhitung dua kali
      di tumpukan vertikal (padding .auth-body ditambah padding
      .app-footer), dan menyisakan sekitar 34px ruang mati di
      bawah teks copyright.

      Yang dibutuhkan di sini hanya jarak tambahan, tanpa inset. */
.auth-body {
  padding-bottom: 1rem;
}

/* 4. Ubah dari position:absolute ke flow normal, dan samakan
      lebar dengan .auth-wrap. 440px, bukan 480px: lebar
      footer tidak boleh lebih besar dari lebar kartu.

      padding-bottom di sini SENGAJA TIDAK diulang. Aturan
      umum .app-footer (blok 6) sudah menambahkan
      env(safe-area-inset-bottom) sekali, dan .app-footer-fixed
      adalah elemen yang sama -- menulisnya lagi di sini
      membuat inset terhitung dua kali. Yang diatur blok ini
      hanya penempatan posisi, lebar, dan margin atas.

      left / right / bottom versi lama tidak ikut diulang juga:
      semuanya tidak berlaku di bawah position:static, dan
      menyalinnya hanya menambah aturan yang sia-sia. */
.app-footer-fixed {
  position: static;
  width: 100%;
  max-width: 440px;
  margin: 16px auto 0;
}

/* 5. Tata letak ringkas dan terpusat, sama di semua lebar
      dan orientasi. Menghindari dua masalah: di >=1025px,
      .app-footer-brand memakai margin-right:auto yang
      menyisakan ~250px ruang kosong di tengah footer 440px;
      di <=1024px, flex-direction:column dengan gap 10px
      menyisakan strip kosong karena <nav> di halaman login
      tidak berisi satu pun tautan. */
.app-footer-fixed .app-footer-inner {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 16px 14px;
  text-align: center;
}

.app-footer-fixed .app-footer-brand {
  margin-right: 0;
  justify-content: center;
  min-width: 0;
  max-width: 100%;
}

.app-footer-fixed .app-footer-meta {
  margin-left: 0;
  width: auto;
  padding-top: 0;
  border-top: 0;
}

/* 6. <nav> di halaman login selalu kosong: $_SESSION['role']
      belum ada sebelum login, jadi $footer_dashboard kosong.
      app-footer.php sekarang tidak merender <nav> sama sekali
      kalau tidak ada tautan, jadi aturan ini murni jaring
      pengaman.

      Sengaja memakai .app-footer-fixed sebagai prefix. Tanpa
      prefix, aturan ini ikut berlaku di footer halaman admin
      dan murid, yang di sana selalu punya tautan Dashboard.
      Kalau suatu saat ada footer dengan nav berisi ikon saja
      atau diisi lewat JavaScript -- sehingga tidak ada <a> --
      selector polos akan membuatnya hilang diam-diam di
      seluruh aplikasi. */

.app-footer-fixed .app-footer-nav:not(:has(a)) {
  display: none;
}

/* 7. Teks 11px terlalu kecil di HP, terutama di dalam kotak
      yang sudah sempit. Dinaikkan sedikit -- nama sekolah
      0,78rem (12,5px) jadi 0,8rem, teks kecil dan copyright
      0,69rem (11px) jadi 0,72rem (11,5px). Di layar sangat
      sempit nama sekolah boleh membungkus, bukan terpotong
      dengan tanda ellipsis. */
.app-footer-fixed .app-footer-text strong {
  font-size: .8rem;
  max-width: 100%;
}

.app-footer-fixed .app-footer-text small,
.app-footer-fixed .app-footer-meta {
  font-size: .72rem;
}

@media (max-width: 360px) {
  .app-footer-fixed .app-footer-inner {
    padding: 10px 10px 12px;
  }

  .app-footer-fixed .app-footer-text strong {
    font-size: .74rem;
    white-space: normal;
  }

  .app-footer-fixed .app-footer-text small,
  .app-footer-fixed .app-footer-meta {
    font-size: .68rem;
  }
}

/* 8. Layar pendek: jangan dipusatkan.
      Di HP landscape dan saat keyboard terbuka, tinggi layar
      tidak cukup untuk memusatkan kartu DAN footer sekaligus.
      Memusatkan keduanya membuat tepi atas terpotong dan
      pengguna harus menggulir ke ATAS untuk membaca judul --
      lebih buruk daripada halaman yang mulai dari atas dan
      boleh digulir ke bawah.

      min-height dvh yang dipakai di atas sudah mengikuti tinggi
      viewport sebenarnya, jadi aturan ini tetap berlaku saat
      keyboard buka-tutup.

      Aturan ini memakai ambang 720px, bukan 560px, untuk
      menutup rentang 561-720px yang tadinya bermasalah. Di
      rentang itu blok max-height:720px lama meminta flex-start,
      tapi blok 1 di atas -- spesifisitas sama, letaknya lebih
      akhir -- menimpanya dengan center. Isi halaman (kartu +
      footer) belum bisa dipadatkan karena pemadatan baru
      berlaku di 560px, sehingga memusatkan halaman pada layar
      setinggi 600px justru membuat tepi atas tidak terjangkau.

      Contoh nyata: jendela browser desktop yang dipotong
      setinggi 600px, dan tablet kecil dalam orientasi
      landscape. */
@media (max-height: 720px) {
  .auth-body {
    justify-content: flex-start;
  }
}

@media (max-height: 560px) {
  .app-footer-fixed {
    margin-top: 10px;
  }
}

/* 9. auth/2fa-admin.php berbeda dari empat halaman login
      lainnya: ia menaruh .auth-body sebagai <div> di dalam
      <body>, sementara <body>-nya sendiri sudah punya
      min-height:100vh dari aturan global.

      Dua lapis itu tidak menambah tinggi menjadi 200vh --
      min-height anak tidak dijumlahkan ke min-height induk.
      Masalahnya lebih halus: .auth-body setinggi 100vh adalah ISI
      <body>, dan <body> punya min-height 100vh juga. Dua batas
      tinggi yang masing-masing benar sendiri, tapi footer --
      anak terakhir di dalam .auth-body -- berakhir berdiri
      persis di tepi bawah viewport, sedikit di luar area yang
      terlihat.

      Akibatnya di halaman 2FA footer nyaris tidak terlihat
      tanpa digulir, sementara di empat halaman login lain
      footer langsung terlihat karena .auth-body itu sendiri
      <body>-nya.

      min-height di bawah memakai 100dvh sehingga ikut
      menyusut bersama address bar, dan halaman ini memakai
      layout kolom yang sama seperti empat halaman login
      lainnya. */
body > .auth-body {
  min-height: 100vh;
  padding-bottom: 1rem;
}

@supports (min-height: 100dvh) {
  body > .auth-body {
    min-height: 100dvh;
  }
}

/* Ikon 2FA memakai .auth-icon TANPA prefix .auth-head, dan
   selector .auth-icon polos tidak ada di mana pun di berkas
   ini -- sehingga ikonnya tidak pernah dapat kotak 60px
   bersudut membulat seperti di halaman login lain.

   Selector di bawah butuh KEDUA kelas, jadi tidak akan
   menyentuh portal di index.php yang memakai .c1-.c4 pada
   class="card-thumb c1" tanpa .auth-icon.

   CATATAN EFEK SAMPING: keempat halaman login lain juga
   memakai class="auth-icon c1" (atau c3/c4), jadi aturan ini
   berlaku untuk mereka juga, bukan hanya 2FA. Spesifisitasnya
   (0,2,0) sama dengan .auth-head .auth-icon di blok
   max-height:560px, dan karena letaknya lebih akhir, nilai
   yang benar-benar berlaku di layar pendek berasal dari sini
   -- termasuk font-size 1,25rem, bukan 1,35rem seperti
   sebelumnya. Artinya pada keempat halaman login itu, nilai
   1,35rem di blok lama tidak lagi terlihat. */
.auth-icon.c1,
.auth-icon.c2,
.auth-icon.c3,
.auth-icon.c4 {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

@media (max-height: 560px) {
  .auth-icon.c1,
  .auth-icon.c2,
  .auth-icon.c3,
  .auth-icon.c4 {
    width: 46px;
    height: 46px;
    /* border-radius ikut dikecilkan, bukan dibiarkan 18px dari
       aturan di atas. Nilai 13px inilah yang dipakai ikon
       halaman login pada ukuran yang sama. */
    border-radius: 13px;
    font-size: 1.25rem;
  }
}