/* ==========================================================================
   Ruang BKK Mengajar — tema baru: bersih, terang, profesional (gaya Ruangguru)
   Biru cerah + putih + aksen teal/amber, kartu putih membulat dengan bayangan lembut.
   ========================================================================== */

:root {
  --primary: #1565d8;
  --primary-dark: #0d47a1;
  --primary-light: #4a9bff;
  --primary-soft: #eaf2ff;
  --teal: #00b8a9;
  --amber: #ff9f1c;
  --success: #16a34a;
  --success-soft: #e8f8ee;
  --danger: #e5484d;
  --danger-soft: #fdecec;
  --ink: #0f2340;
  --text: #28405f;
  --muted: #6b7f99;
  --line: #e3ebf7;
  --bg: #f4f8fd;
  --white: #ffffff;
  /* Satu nilai untuk jarak antar kartu (dipakai .card & .slider) supaya SEMUA kartu,
     termasuk banner informasi, punya spasi yang sama dan tidak terlihat mepet. */
  --jarak-kartu: 24px;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 10px 28px rgba(21, 101, 216, 0.09);
  --shadow-sm: 0 4px 14px rgba(21, 101, 216, 0.08);
  --shadow-lg: 0 18px 46px rgba(13, 71, 161, 0.16);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  background: var(--bg);
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--ink); font-weight: 800; letter-spacing: -0.01em; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.hidden { display: none !important; }
.mt { margin-top: 22px; }
.center { text-align: center; }
.txt-ok { color: var(--success); font-weight: 700; }
.txt-no { color: var(--danger); font-weight: 700; }
.txt-primary { color: var(--primary); }
.txt-benar { color: var(--success); }
.txt-salah { color: var(--danger); }
.muted { color: var(--muted); }
.muted-small { font-size: 0.85rem; color: var(--muted); font-weight: 500; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sr-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* --------------------------- latar belakang --------------------------- */
.bg-3d-wrapper {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background:
    radial-gradient(1100px 420px at 12% -10%, #e3efff 0%, rgba(227, 239, 255, 0) 60%),
    radial-gradient(900px 380px at 95% 4%, #e8fbf8 0%, rgba(232, 251, 248, 0) 55%),
    linear-gradient(180deg, #f7fafe 0%, #eef4fd 100%);
}
.shape { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5; animation: float 14s ease-in-out infinite; }
.shape-1 { width: 420px; height: 420px; background: radial-gradient(circle, #7cb7ff, #cfe3ff); top: -140px; left: -120px; }
.shape-2 { width: 460px; height: 460px; background: radial-gradient(circle, #9df3ea, #e6fffb); bottom: -180px; right: -140px; animation-delay: -4s; }
.shape-3 { width: 320px; height: 320px; background: radial-gradient(circle, #ffe0b3, #fff5e6); top: 42%; left: 48%; animation-delay: -8s; opacity: 0.35; }

@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(26px) scale(1.04); }
}

/* ------------------------------- header ------------------------------- */
#main-header {
  background: linear-gradient(120deg, var(--primary-dark) 0%, var(--primary) 45%, #2f8bf0 100%);
  color: #fff;
  padding: 14px 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 8px 24px rgba(13, 71, 161, 0.22);
}
#main-header::after {
  content: ''; position: absolute; inset: auto 0 -10px 0; height: 10px;
  background: linear-gradient(120deg, rgba(13, 71, 161, 0.14), rgba(47, 139, 240, 0.06));
}
.header-title { font-size: 1.05rem; font-weight: 800; display: flex; align-items: center; gap: 10px; letter-spacing: -0.01em; }
.header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.who { font-size: 0.85rem; font-weight: 600; opacity: 0.95; }
/* Nama pegawai di pojok kanan header: harus TERANG di atas gradien biru. */
.header-user {
  font-size: 0.88rem; font-weight: 700; color: #fff;
  background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.32);
  padding: 5px 12px; border-radius: 999px; white-space: nowrap; line-height: 1.3;
}
.badge-mini {
  display: inline-block; background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 2px 10px; border-radius: 999px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em;
}

.container { max-width: 1180px; margin: 26px auto; padding: 0 16px; position: relative; z-index: 1; }
.footer-note { text-align: center; font-size: 0.78rem; color: #8a9cb5; padding: 8px 16px 34px; }

/* ------------------- info peringkat pegawai (pemacu semangat) ---------- */
.peringkat-card { margin-top: 20px; }
.peringkat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.peringkat-head h3 { margin: 0; font-size: 1.15rem; }
.peringkat-skor { text-align: right; }
.peringkat-besar { display: block; font-size: 2.2rem; font-weight: 800; color: var(--primary); line-height: 1; }
.peringkat-besar.peringkat-kosong { color: #9fb0c8; }
.peringkat-kejar { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--primary-soft); border: 1px solid #cfe3ff; color: #10406f; font-size: 0.9rem; }
.papan-wrap { margin-top: 16px; }
.papan-poin { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.papan-poin li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fbfdff; }
.papan-poin li.saya { border-color: var(--primary); background: var(--primary-soft); box-shadow: var(--shadow-sm); }
.papan-rank { flex: 0 0 34px; font-weight: 800; color: var(--primary-dark); }
.papan-nama { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.papan-poin { flex: 0 0 auto; text-align: right; }
.peringkat-strip { display: flex; align-items: center; gap: 14px; margin: 16px 0 0; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--primary-soft); border: 1px solid #cfe3ff; text-align: left; }
.peringkat-strip-rank { flex: 0 0 auto; font-size: 1.7rem; font-weight: 800; color: var(--primary-dark); }

/* ------------------- apresiasi setelah menyelesaikan level -------------- */
.sorak { display: flex; align-items: flex-start; gap: 14px; text-align: left; margin: 6px 0 20px; padding: 16px 18px; border-radius: var(--radius-sm); border: 1px solid #cfe3ff; background: var(--primary-soft); }
.sorak-ikon { font-size: 2rem; line-height: 1; }
.sorak-judul { display: block; font-size: 1.05rem; color: var(--primary-dark); }
.sorak-pesan { margin: 4px 0 0; font-size: 0.9rem; color: var(--text); }
.sorak-emas { background: linear-gradient(135deg, #fff8e1, #fff1d6); border-color: #ffd166; }
.sorak-emas .sorak-judul { color: #9a6200; }
.sorak-perak { background: linear-gradient(135deg, #f4f8ff, #eaf2ff); }
.sorak-perunggu { background: linear-gradient(135deg, #fff6f0, #ffeadf); border-color: #ffc9a8; }
.sorak-perunggu .sorak-judul { color: #9a4a12; }
@media (max-width: 560px) { .peringkat-skor { text-align: left; } }

/* ---------------------- halaman cetak (lembar koreksi) ----------------- */
.page-cetak { background: #fff; }
.cetak-lembar { max-width: 1000px; margin: 0 auto; padding: 26px 22px 40px; }
.cetak-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 3px solid var(--primary); padding-bottom: 12px; margin-bottom: 18px; }
.cetak-kop h1 { margin: 0; font-size: 1.25rem; letter-spacing: 0.02em; color: var(--primary-dark); }
.cetak-sub { margin: 4px 0 0; color: var(--muted); font-size: 0.9rem; }
.cetak-tombol { display: flex; gap: 8px; flex: 0 0 auto; }
.cetak-identitas { width: 100%; border-collapse: collapse; margin-bottom: 22px; }
.cetak-identitas th, .cetak-identitas td { border: 1px solid var(--line); padding: 8px 10px; font-size: 0.86rem; text-align: left; }
.cetak-identitas th { background: #f7faff; width: 150px; color: var(--primary-dark); font-weight: 700; }
.cetak-level { margin-bottom: 24px; break-inside: avoid; }
.cetak-level h3 { font-size: 1rem; margin: 0 0 8px; border-left: 4px solid var(--primary); padding-left: 10px; }
.cetak-ringkas { display: block; font-size: 0.78rem; font-weight: 500; color: var(--muted); margin-top: 2px; }
.cetak-tabel { width: 100%; border-collapse: collapse; }
.cetak-tabel th, .cetak-tabel td { border: 1px solid #ccd6e4; padding: 7px 9px; font-size: 0.8rem; text-align: left; vertical-align: top; }
.cetak-tabel th { background: #eef4fd; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.cetak-tabel .kol-no { width: 34px; text-align: center; }
.cetak-tabel .kol-status { width: 70px; font-weight: 800; text-align: center; }
.cetak-tabel tr.baris-salah td { background: #fdecec; }
.cetak-tabel tr.baris-benar td { background: #f6fdf9; }
.cetak-tabel tr.baris-salah .kol-status { color: #b42318; }
.cetak-tabel tr.baris-benar .kol-status { color: #166534; }
.cetak-catatan { font-size: 0.85rem; color: var(--muted); background: #f7faff; border: 1px dashed #c9dcfa; border-radius: 10px; padding: 12px 14px; }
.cetak-tanda { display: flex; justify-content: space-between; gap: 30px; margin-top: 44px; }
.cetak-tanda > div { flex: 1 1 0; text-align: center; }
.cetak-tanda span { display: block; font-size: 0.8rem; color: var(--muted); }
.cetak-tanda b { display: block; margin-top: 46px; border-top: 1px solid #333; padding-top: 6px; }
.cetak-kaki { margin-top: 26px; font-size: 0.74rem; color: #8896ab; text-align: center; }

@media print {
  .page-cetak .cetak-tombol { display: none !important; }
  .cetak-lembar { max-width: none; padding: 0; }
  .cetak-tabel th, .cetak-tabel td { font-size: 10px; padding: 5px 7px; }
  .cetak-tabel tr.baris-benar td { background: #fff; }
  .cetak-level { page-break-inside: avoid; }
}

/* ---------------------------- poin (admin) ---------------------------- */
/* Kotak ringkasan poin di modal "Atur Poin Pegawai". */
.poin-ringkas { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 18px; }
.poin-kotak { background: #f7faff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; text-align: center; }
.poin-kotak span { display: block; }
.poin-kotak b { display: block; font-size: 1.35rem; font-weight: 800; color: var(--ink); line-height: 1.2; margin-top: 2px; }
.poin-input { width: 110px; margin: 0; padding: 8px 10px; }
/* Modal atur poin boleh lebih lebar karena memuat dua tabel. */
#modal-poin .modal-card { max-width: 940px; }
#modal-poin input[type='text'] { margin: 0; padding: 8px 10px; }

/* Chip bonus di halaman pegawai. */
.chip-bonus { background: #fff8e6; color: #9a6200; border: 1px solid #ffd166; }
.baris-bonus td { background: #fffdf5; }

/* ------------------- pemberitahuan sistem ditutup (ON/OFF) -------------- */
.sistem-tutup { border-left: 6px solid var(--amber); background: #fffaf0; }
.sistem-tutup b { color: #9a6200; }
.sistem-tutup-card { border-left: 6px solid var(--amber); display: flex; gap: 14px; align-items: flex-start; background: #fffaf0; }
.sistem-tutup-ikon { font-size: 2rem; line-height: 1; }
.sistem-tutup-card b { display: block; color: #9a6200; font-size: 1rem; }

/* ------------------------ trainer & kelas bimbingan -------------------- */
/* Kotak saklar (tampilkan/sembunyikan) di tab Trainer. */
.toggle-box { border-left: 5px solid var(--primary-light); background: linear-gradient(135deg, #eaf2ff, #ffffff); }
.toggle-box .check-line { font-size: 0.95rem; }
.toggle-kepala { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Badge status kesiapan trainer (dipakai di halaman pegawai maupun admin). */
.status-trainer { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 0.76rem; font-weight: 800; border: 1px solid transparent; white-space: nowrap; }
.st-tersedia { background: #e8f8ee; color: #166534; border-color: #b7e4c7; }
.st-kelas { background: #eaf2ff; color: #10406f; border-color: #cfe3ff; }
.st-sibuk { background: #fff3e0; color: #b45309; border-color: #ffd9a0; }
.st-istirahat { background: #f3f0ff; color: #5b21b6; border-color: #ddd6fe; }
.st-dinas { background: #eef6ff; color: #0e7490; border-color: #bae6fd; }
.st-off { background: #f1f5fb; color: #6b7f99; border-color: #dbe4f0; }

/* Bintang ulasan trainer. */
.bintang { color: #f0b429; font-size: 1.05rem; letter-spacing: 1px; }
.bintang-angka { font-weight: 800; color: var(--ink); }

/* Notifikasi pegawai. */
.notif-card { border-left: 6px solid var(--primary-light); }
.notif-kepala { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.notif-kepala h3 { margin: 0; font-size: 1.1rem; }
.notif-badge { background: var(--danger); color: #fff; font-size: 0.7rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; vertical-align: middle; }
.notif-daftar { display: flex; flex-direction: column; gap: 10px; }
.notif-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fbfdff; }
.notif-item.baru { background: linear-gradient(135deg, #eaf2ff, #ffffff); border-color: #cfe3ff; }
.notif-ikon { font-size: 1.4rem; line-height: 1; }
.notif-item b { font-size: 0.92rem; }

/* Panel trainer untuk dirinya sendiri. */
.trainer-saya { border-left: 6px solid #f0b429; }
.trainer-saya-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.trainer-saya-kepala h3 { margin: 0; font-size: 1.1rem; }
.status-pilih { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.status-tombol { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 0.85rem; font-weight: 700; color: var(--text); cursor: pointer; transition: transform 0.14s, box-shadow 0.14s, border-color 0.14s; }
.status-tombol:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.status-tombol.aktif { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(21, 101, 216, 0.16); background: var(--primary-soft); color: var(--primary-dark); }

/* Katalog kelas (kartu kursus). */
.kelas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }
.kelas-kartu { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.16s, box-shadow 0.16s; }
.kelas-kartu:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.kelas-kartu.kelas-selesai { opacity: 0.92; }
.kelas-foto { position: relative; height: 150px; background: linear-gradient(135deg, #1565d8, #6a4bd6); background-size: cover; background-position: center; display: grid; place-items: center; }
.kelas-foto-ikon { font-size: 3rem; }
.kelas-status { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; font-size: 0.7rem; font-weight: 800; background: rgba(255, 255, 255, 0.92); color: var(--ink); }
.kk-dibuka { background: #e8f8ee !important; color: #166534 !important; }
.kk-selesai { background: #eaf2ff !important; color: #10406f !important; }
.kk-batal { background: #fdecec !important; color: #b42318 !important; }
.kelas-media { position: absolute; bottom: 10px; right: 10px; padding: 4px 10px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; background: rgba(15, 35, 64, 0.72); color: #fff; }
.kelas-isi { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.kelas-isi h4 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.kelas-trainer { margin: 0; font-size: 0.9rem; }
.kelas-jadwal { margin: 0; line-height: 1.5; }
.kelas-desk { margin: 0; }
.kelas-materi { display: flex; flex-wrap: wrap; gap: 6px; }
.kelas-aksi { margin-top: auto; padding-top: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kelas-kosong { display: flex; gap: 14px; align-items: center; background: #fbfdff; border: 1px dashed #c9dcfa; border-radius: var(--radius); padding: 18px 20px; }
.kelas-kosong > span { font-size: 2rem; }

/* Daftar trainer (halaman pegawai). */
.trainer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.trainer-kartu { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 8px; }
.trainer-kepala { display: flex; gap: 12px; align-items: center; }
.trainer-avatar { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.4rem; font-weight: 800; color: #fff; background: linear-gradient(150deg, var(--primary-dark), var(--primary-light)); flex: 0 0 auto; overflow: hidden; }
.trainer-avatar-foto { width: 100%; height: 100%; background-size: cover; background-position: center; display: block; }
.trainer-identitas { min-width: 0; }
.trainer-identitas b { display: block; font-size: 0.98rem; }
.trainer-identitas .muted-small { display: block; line-height: 1.35; }
.trainer-status { display: flex; flex-wrap: wrap; gap: 8px; }
.trainer-bintang { margin: 0; }
.trainer-jadwal { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* Ringkasan kelas di dashboard & kepala halaman pengajar. */
.pengajar-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.pengajar-kepala h2 { margin: 0; }
.kelas-stat { display: flex; gap: 12px; flex-wrap: wrap; }
.kelas-stat-kotak { background: var(--primary-soft); border: 1px solid #cfe3ff; border-radius: var(--radius-sm); padding: 10px 14px; text-align: center; min-width: 96px; }
.kelas-stat-kotak b { display: block; font-size: 1.3rem; font-weight: 800; color: var(--primary-dark); line-height: 1.15; }
.kelas-saya-mini { display: flex; flex-wrap: wrap; gap: 6px; }

/* Baris "Kelas Saya" (pegawai). */
.kelas-saya-daftar { display: flex; flex-direction: column; gap: 12px; }
.kelas-saya-baris { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.kelas-saya-info b { display: block; }
.kelas-saya-info .muted-small { display: block; line-height: 1.45; }
.kelas-saya-aksi { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Admin: kartu trainer & kelas & usulan. */
.trainer-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 18px; }
.trainer-admin-kartu { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px; }
.trainer-admin-kartu.nonaktif { opacity: 0.62; }
.trainer-admin-kepala { display: flex; gap: 12px; align-items: center; }
.trainer-admin-baris { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kelas-admin-kartu { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); margin-bottom: 18px; }
.kelas-admin-kartu.dibatalkan { opacity: 0.7; }
.kelas-admin-kepala { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 10px; }
.kelas-admin-foto { width: 78px; height: 78px; border-radius: 14px; background-size: cover; background-position: center; flex: 0 0 auto; display: grid; place-items: center; font-size: 2rem; background-color: #eaf2ff; }
.kelas-admin-judul { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kelas-admin-judul b { font-size: 1.02rem; }
.usulan-kartu { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.usulan-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.usulan-kepala b { font-size: 1rem; }
.usulan-kepala .muted-small { display: block; }
.trainer-pilih { width: 100%; min-height: 110px; }

/* ------------- panel kesehatan data & pantauan NIP (Ringkasan) ----------- */
.kesehatan-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 22px; box-shadow: var(--shadow); }
.kesehatan-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.kesehatan-kepala h3 { margin: 0; font-size: 1.15rem; }
.badge-live { background: var(--danger); color: #fff; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; padding: 3px 8px; border-radius: 999px; vertical-align: middle; margin-left: 6px; animation: pulse 1.8s infinite; }
.kesehatan-kartu { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kesehatan-item { text-align: left; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fbfdff; cursor: pointer; font: inherit; transition: transform 0.14s, box-shadow 0.14s, border-color 0.14s; }
.kesehatan-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.kesehatan-item.aktif { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(21, 101, 216, 0.14); background: var(--primary-soft); }
.kesehatan-item b { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: var(--ink); }
.kesehatan-item span { display: block; font-size: 0.76rem; font-weight: 700; color: var(--muted); }
.kesehatan-item.ks-selesai b { color: var(--success); }
.kesehatan-item.ks-belum b { color: #b45309; }
.kesehatan-item.ks-gantung b { color: var(--danger); }
.kesehatan-item.ks-error b { color: #7c3aed; }
.kesehatan-item.ks-tanpa b { color: #0e7490; }
.chip-kategori { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 0.7rem; font-weight: 800; white-space: nowrap; }
.chip-selesai { background: #e8f8ee; color: #166534; }
.chip-belum { background: #fff3e0; color: #b45309; }
.chip-menggantung { background: #fdecec; color: #b42318; }
.chip-tanpa_rincian { background: #eef6ff; color: #0e7490; }
.chip-error { background: #f3f0ff; color: #5b21b6; }

/* ------------------- matriks edit poin per level (admin) ---------------- */
.matriks-input { width: 96px; margin: 0; padding: 7px 9px; text-align: right; font-weight: 700; }
.matriks-tanda { display: block; font-size: 0.68rem; color: var(--muted); margin-top: 3px; white-space: nowrap; }
#matriks-tbody td { vertical-align: top; }
#matriks-kepala th { white-space: nowrap; }

/* ---------------------------- laporan excel --------------------------- */
.laporan-jenis { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 4px 0 20px; }
.laporan-kartu { background: #fbfdff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; }
.laporan-kartu b { display: block; margin-bottom: 6px; color: var(--primary-dark); font-size: 0.95rem; }
.laporan-kartu .muted-small { margin: 0; }

/* ----------------------------- papan chat ----------------------------- */
.chat-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.chat-kepala h2 { margin: 0; }
.chat-stat .badge-value { font-size: 1.8rem; }

.emote-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.emote-tombol {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 6px; cursor: pointer; font: inherit; color: var(--ink);
  box-shadow: var(--shadow-sm); transition: transform 0.14s, border-color 0.14s, box-shadow 0.14s;
}
.emote-tombol:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--primary); box-shadow: var(--shadow); }
.emote-tombol:disabled { opacity: 0.5; cursor: wait; }
.emote-emoji { font-size: 1.9rem; line-height: 1; }
.emote-label { font-size: 0.74rem; font-weight: 700; color: var(--muted); }

.template-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.template-tombol {
  background: linear-gradient(135deg, var(--primary-soft), #ffffff);
  border: 1px solid #cfe3ff; border-radius: 999px; padding: 10px 18px;
  font: inherit; font-size: 0.9rem; font-weight: 700; color: var(--primary-dark);
  cursor: pointer; transition: transform 0.14s, box-shadow 0.14s;
}
.template-tombol:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.template-tombol:disabled { opacity: 0.5; cursor: wait; }

.chat-status { margin-top: 16px; padding: 10px 14px; border-radius: 11px; background: var(--primary-soft); border: 1px solid #cfe3ff; color: #10406f; font-size: 0.86rem; font-weight: 600; }
.chat-status-galat { background: var(--danger-soft); border-color: #f7c8ca; color: #b42318; }

.chat-dinding { display: flex; flex-direction: column; gap: 12px; }
.chat-ringkas .chat-dinding { gap: 10px; }
.isian { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; box-shadow: var(--shadow-sm); }
.isian-admin { background: linear-gradient(135deg, #fffdf5, #ffffff); border-color: #ffe0a3; }
.isian-kepala { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.isian-avatar { font-size: 1.3rem; line-height: 1; }
.isian-nama { flex: 1 1 auto; min-width: 0; }
.isian-nama b { display: block; font-size: 0.92rem; }
.isian-nama .muted-small { display: block; }
.isian-hapus { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.95rem; padding: 4px 8px; border-radius: 8px; }
.isian-hapus:hover { background: var(--danger-soft); color: var(--danger); }
.isian-isi { font-size: 1.05rem; font-weight: 700; color: var(--ink); word-break: break-word; }
.isian-emote .isian-isi { font-size: 2rem; line-height: 1.2; }
.isian-teks .isian-isi { font-size: 1rem; font-weight: 700; color: var(--primary-dark); }
.chat-kosong { display: flex; gap: 14px; align-items: center; background: #fbfdff; border: 1px dashed #c9dcfa; border-radius: var(--radius); padding: 18px 20px; }
.chat-kosong > span { font-size: 2rem; }

/* Pengingat batas sesi pegawai (public/sesi.js) — muncul 60 detik sebelum keluar. */
.sesi-banner {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 60; width: min(94vw, 620px);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #fff8e6; border: 1px solid #ffd166; box-shadow: var(--shadow);
  border-radius: 14px; padding: 12px 14px; font-size: 0.9rem; color: #7a4b00;
}
.sesi-banner .sesi-ikon { font-size: 1.3rem; line-height: 1; }
.sesi-banner .sesi-teks { flex: 1 1 240px; }
.sesi-banner b { color: #a35a00; }

/* ------------------- 5 Finalis per ruang (Liga BKK) -------------------- */
.finalis-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--line); }
.finalis-head h3 { margin: 0 0 4px; font-size: 1.3rem; }
.finalis-head .muted-small { margin: 0; max-width: 70ch; }
.finalis-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 760px) { .finalis-grid { grid-template-columns: repeat(2, 1fr); } }
.finalis-card {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); transition: transform 0.16s, box-shadow 0.16s;
}
.finalis-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.finalis-card.finalis-utama { border-left: 6px solid var(--primary); }
.finalis-rank {
  flex: 0 0 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--primary-dark), var(--primary-light)); color: #fff;
  font-weight: 800; font-size: 1.15rem;
}
.finalis-card.finalis-utama .finalis-rank { background: linear-gradient(150deg, #b7791f, #f0b429); }
.finalis-badan { flex: 1 1 auto; min-width: 0; }
.finalis-badan h4 { margin: 0 0 2px; font-size: 1.05rem; }
.finalis-badan .muted-small { margin: 0; line-height: 1.45; }
.finalis-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 8px; }
.chip-level {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary-dark); font-size: 0.74rem; font-weight: 800;
}
.chip-level b { font-size: 0.82rem; }
.chip-level.kosong { background: #f1f5fb; color: #90a2ba; }
.finalis-poin { flex: 0 0 auto; text-align: center; padding-left: 8px; border-left: 1px dashed var(--line); }
.finalis-poin span { display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.finalis-poin b { display: block; font-size: 1.7rem; font-weight: 800; color: var(--success); line-height: 1.1; }
@media (max-width: 560px) {
  .finalis-card { flex-wrap: wrap; }
  .finalis-poin { border-left: none; padding-left: 0; text-align: left; }
}

/* -------------------------------- kartu ------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: var(--jarak-kartu);
  box-shadow: var(--shadow);
}
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card h2 { color: var(--ink); }
.card h3 { color: var(--ink); }
.center-card { text-align: center; }
.panel-soft { background: #fbfdff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 20px; }
.soft-box { background: #fbfdff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; }
.soft-box label { font-weight: 700; color: var(--ink); display: block; margin-bottom: 6px; font-size: 0.9rem; }

/* -------------------------------- form -------------------------------- */
input, select, textarea {
  width: 100%; padding: 13px 14px; margin: 7px 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 0.97rem; font-family: inherit; font-weight: 500;
  background: #fbfdff; color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
input::placeholder, textarea::placeholder { color: #9aabc3; }
input:focus, select:focus, textarea:focus {
  outline: none; background: #fff; border-color: var(--primary-light);
  box-shadow: 0 0 0 4px rgba(74, 155, 255, 0.18);
}
textarea { resize: vertical; min-height: 92px; }
.check-line { display: flex; gap: 10px; align-items: flex-start; background: var(--primary-soft); border: 1px solid #cfe3ff; border-radius: var(--radius-sm); padding: 12px 14px; margin-top: 10px; font-size: 0.9rem; }
.check-line input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--primary); flex: 0 0 auto; }
.hint-live { font-size: 0.85rem; font-weight: 600; color: var(--muted); margin: 6px 0 0; min-height: 20px; }
.hint-live.kurang { color: var(--danger); }
.hint-live.cukup { color: var(--amber); }
.hint-live.kuat { color: var(--success); }

/* ------------------------------- tombol ------------------------------- */
.btn {
  display: inline-block; padding: 12px 22px; border: none; border-radius: var(--radius-sm);
  font-family: inherit; font-size: 0.95rem; font-weight: 700; text-align: center;
  cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease, filter 0.15s;
  width: 100%; color: inherit;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(120deg, var(--primary) 0%, #2f8bf0 100%); color: #fff; box-shadow: 0 8px 18px rgba(21, 101, 216, 0.28); }
.btn-primary:hover { filter: brightness(1.05); box-shadow: 0 12px 22px rgba(21, 101, 216, 0.32); }
.btn-success { background: linear-gradient(120deg, #12a150 0%, var(--teal) 100%); color: #fff; box-shadow: 0 8px 18px rgba(0, 184, 169, 0.24); }
.btn-ghost { background: #f2f7ff; color: var(--primary); border: 1px solid #d9e7ff; }
.btn-ghost:hover { background: #e8f1ff; }
.btn-danger-outline { background: var(--danger-soft); color: var(--danger); border: 1px solid #f7cccd; }
.btn-header { width: auto; background: rgba(255, 255, 255, 0.18); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); padding: 8px 16px; font-size: 0.85rem; }
.btn-header:hover { background: rgba(255, 255, 255, 0.28); }
.btn-disabled, .btn[disabled] { background: #e7edf6; color: #93a4bd; cursor: not-allowed; box-shadow: none; transform: none; }
.btn-sm { width: auto; padding: 8px 14px; font-size: 0.85rem; }
.btn-lg { padding: 15px; font-size: 1.02rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.btn-row-center { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }

@media (min-width: 768px) { .btn { width: auto; } .btn-block { width: 100%; } }

/* ------------------------------- notif -------------------------------- */
.notif { padding: 13px 16px; border-radius: var(--radius-sm); font-weight: 600; margin: 14px 0; font-size: 0.9rem; border: 1px solid transparent; }
.notif ul { margin: 8px 0 0 18px; padding: 0; }
.notif li { margin: 2px 0; font-weight: 500; }
.notif-err { background: var(--danger-soft); color: #b02a2f; border-color: #f7cccd; }
.notif-ok { background: var(--success-soft); color: #0f7a3d; border-color: #c3ecd4; }
.notif-info { background: var(--primary-soft); color: #0d47a1; border-color: #cfe3ff; }

#toast-wrap { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 0.9rem;
  box-shadow: 0 14px 30px rgba(15, 35, 64, 0.28); opacity: 0; transform: translateY(14px);
  transition: opacity 0.2s, transform 0.2s; max-width: min(90vw, 540px); text-align: center;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.err { background: #b02a2f; }
.toast.ok { background: #0f7a3d; }

/* -------------------------------- login ------------------------------- */
.login-card { max-width: 440px; margin: 56px auto; text-align: center; padding: 40px 28px; border-radius: 24px; box-shadow: var(--shadow-lg); }
.login-emoji {
  width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 26px; display: grid; place-items: center;
  font-size: 2.6rem; background: linear-gradient(135deg, var(--primary-soft), #e8fbf8); border: 1px solid var(--line);
  animation: float 6s ease-in-out infinite;
}
.login-title { color: var(--ink); margin: 0 0 4px; font-size: 1.7rem; font-weight: 800; }
.login-sub { color: var(--muted); margin: 0 0 20px; font-weight: 600; font-size: 0.92rem; }
.login-card input { text-align: center; }
.login-foot { font-size: 0.85rem; color: var(--muted); margin: 16px 0 0; font-weight: 600; }

/* --------------------------- dashboard pegawai ------------------------ */
.profile-card {
  background: linear-gradient(120deg, #ffffff 0%, #f6faff 100%);
  border-left: 6px solid var(--primary);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px;
}
.profile-info { display: flex; align-items: center; gap: 18px; }
.profile-avatar {
  width: 76px; height: 76px; border-radius: 24px; display: grid; place-items: center; font-size: 2.1rem; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--primary-soft), #e8fbf8); border: 1px solid var(--line);
}
.profile-details h2 { margin: 0 0 6px; font-size: 1.5rem; }
.profile-details .badge { background: #eef4fd; border: 1px solid var(--line); padding: 5px 13px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; color: var(--text); display: inline-block; margin: 0 6px 5px 0; }
.profile-details .badge-info { background: var(--primary-soft); border-color: #cfe3ff; color: var(--primary-dark); }
.profile-unit { font-size: 0.92rem; color: var(--muted); margin-top: 6px; font-weight: 600; }

.badge-container { display: flex; gap: 14px; flex-wrap: wrap; }
.badge-3d {
  padding: 16px 24px; border-radius: var(--radius-sm); text-align: center; position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.ruang-badge { background: linear-gradient(135deg, var(--primary) 0%, #2f8bf0 100%); color: #fff; }
.poin-badge { background: linear-gradient(135deg, #ffd166 0%, var(--amber) 100%); color: #6b3d00; }
.badge-title { font-size: 0.78rem; display: block; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; margin-bottom: 3px; opacity: 0.92; }
.badge-value { font-size: 2.3rem; font-weight: 800; line-height: 1; display: block; }
.ruang-badge .badge-value { font-size: 2.6rem; }

.modul-card { border-left: 6px solid var(--teal); }
.locked-card { background: #fff6e8; border-left: 6px solid var(--amber); color: #8a5200; font-weight: 700; border-color: #ffe2b8; }
.reminder-card {
  background: linear-gradient(120deg, #ffffff 0%, #f3f8ff 100%);
  border-left: 6px solid var(--primary-light);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.reminder-card .reminder-icon { font-size: 1.7rem; line-height: 1; }
.reminder-card > div { flex: 1 1 260px; }

/* Daftar evaluasi pegawai (dulu grid 3 kolom dengan ilustrasi samping;
   ilustrasinya dihapus sesuai permintaan pemilik — sekarang satu kolom penuh). */
.dash-isi { display: flex; flex-direction: column; }

.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.section-head h3 { margin: 0; font-size: 1.25rem; }
.note-red { font-size: 0.8rem; color: var(--danger); font-weight: 700; background: var(--danger-soft); padding: 4px 10px; border-radius: 999px; }

.level-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .level-grid { grid-template-columns: repeat(2, 1fr); } }
.level-card {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  background: #fff; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  box-shadow: var(--shadow-sm);
}
.level-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #cfe3ff; }
.level-card.done { background: linear-gradient(120deg, #f2fdf6 0%, #ffffff 100%); border-left: 5px solid var(--success); }
.level-card.kosong { background: #f8fafc; border-left: 5px solid #c3cede; }
.level-title { margin: 0 0 4px; font-size: 1.15rem; color: var(--ink); }
.level-title.done { color: var(--success); }
.score-box { background: #f6faff; border: 1px solid var(--line); padding: 8px 13px; border-radius: 10px; font-size: 0.88rem; margin-top: 6px; display: inline-block; }
.score-box strong { color: var(--success); font-size: 1.2rem; }
.badge-wait { background: #eef2f8; color: #5b6d86; padding: 6px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; }
.badge-alert { background: #fff3e0; color: #b45309; }

/* -------------------------------- ujian ------------------------------- */
.quiz-card { max-width: 900px; margin: 20px auto; }
.quiz-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.quiz-head h3 { margin: 0; font-size: 1.25rem; }
.quiz-level { display: inline-block; margin-top: 6px; padding: 4px 12px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; font-size: 0.85rem; }
.timer {
  font-size: 1.4rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap;
  background: linear-gradient(120deg, var(--primary) 0%, #2f8bf0 100%);
  padding: 10px 22px; border-radius: 999px; box-shadow: 0 8px 18px rgba(21, 101, 216, 0.28);
}
.timer.is-warn { background: linear-gradient(120deg, #f59e0b 0%, var(--amber) 100%); box-shadow: 0 8px 18px rgba(255, 159, 28, 0.3); }
.timer.is-danger { background: linear-gradient(120deg, #e5484d 0%, #ff6b6b 100%); animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.62; } }
.quiz-status { font-size: 0.85rem; font-weight: 700; color: var(--success); margin-bottom: 12px; }
.quiz-status.err { color: var(--danger); }
.q-text { font-size: 1.2rem; line-height: 1.6; margin-bottom: 20px; font-weight: 700; color: var(--ink); }
.options { margin-bottom: 24px; }
.option-label {
  display: block; padding: 16px 18px; border-radius: var(--radius-sm); margin-bottom: 12px; cursor: pointer; font-size: 1rem;
  background: #fbfdff; border: 1.5px solid var(--line); transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.option-label:hover { transform: translateY(-2px); border-color: var(--primary-light); background: #fff; }
.option-label.selected { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dark); font-weight: 700; box-shadow: 0 0 0 3px rgba(74, 155, 255, 0.16); }
.option-row { display: flex; align-items: flex-start; gap: 12px; }
.option-row input { width: 20px; height: 20px; margin: 3px 0 0; flex: 0 0 auto; accent-color: var(--primary); }
.quiz-nav { display: flex; justify-content: space-between; gap: 12px; }
.btn-next { min-width: 190px; }
.quiz-progress-card { max-width: 900px; margin: 0 auto 22px; padding: 18px 22px; }
.quiz-progress-text { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; margin-bottom: 9px; flex-wrap: wrap; }
.progress { height: 10px; border-radius: 999px; background: #e7eef9; overflow: hidden; }
.progress > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), var(--teal)); transition: width 0.3s; border-radius: 999px; }

/* -------------------------------- hasil ------------------------------- */
.result-card { max-width: 780px; margin: 26px auto; text-align: center; }
.result-emoji { font-size: 3.6rem; line-height: 1; margin-bottom: 6px; animation: float 4s ease-in-out infinite; }
.result-sub { color: var(--muted); font-size: 1.02rem; font-weight: 700; }
.result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 24px 0 8px; }
.result-tile { border-radius: var(--radius-sm); padding: 20px 16px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 2px; }
.tile-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 800; color: var(--muted); }
.tile-value { font-size: 2.6rem; font-weight: 800; line-height: 1.1; }
.tile-note { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.tile-benar { background: linear-gradient(150deg, #f2fdf6 0%, #ffffff 100%); border-color: #c3ecd4; }
.tile-benar .tile-value { color: var(--success); }
.tile-salah { background: linear-gradient(150deg, #fdf3f3 0%, #ffffff 100%); border-color: #f7cccd; }
.tile-salah .tile-value { color: var(--danger); }
.tile-poin { background: linear-gradient(150deg, #fff8ec 0%, #ffffff 100%); border-color: #ffe2b8; }
.tile-poin .tile-value { color: #b26a00; }
.result-total { font-weight: 700; color: var(--ink); margin: 10px 0 18px; }
.review-box { text-align: left; margin: 20px 0; max-height: 440px; overflow-y: auto; padding-right: 6px; }
.review-box h4 { border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 12px; }
.review-item { border: 1px solid var(--line); border-left: 5px solid var(--danger); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 10px; background: #fff; }
.review-item.benar { border-left-color: var(--success); }
.review-q { font-weight: 700; color: var(--ink); font-size: 0.95rem; margin-bottom: 6px; }
.review-line { font-size: 0.87rem; margin: 3px 0; }
.review-line.kunci { color: var(--primary); }

/* --------------------- isi kunci jawaban massal ----------------------- */
.q-input-row { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.q-input-row.q-perlu-kunci { border-left: 5px solid var(--amber); background: #fffdf7; }
.q-input-head { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.q-input-teks { flex: 1 1 320px; font-weight: 600; color: var(--ink); font-size: 0.95rem; }
.q-input-row .kunci-pilih { flex: 0 0 260px; min-width: 200px; margin: 0; font-weight: 700; }
@media (max-width: 640px) { .q-input-row .kunci-pilih { flex: 1 1 100%; } }

/* -------------------------------- admin ------------------------------- */
/* Catatan: gaya .portal-head diatur di blok sidebar portal (gaya monitoring). */
.live-indicator { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 700; color: var(--success); }
.live-indicator .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.16); animation: pulse 1.6s infinite; }

.admin-nav { display: flex; gap: 8px; overflow-x: auto; padding: 6px 4px 12px; margin-bottom: 20px; }
.admin-nav button {
  background: #fff; border: 1px solid var(--line); font-family: inherit; font-weight: 700; font-size: 0.9rem;
  color: var(--text); cursor: pointer; white-space: nowrap; padding: 11px 17px; border-radius: 999px;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.admin-nav button:hover { border-color: var(--primary-light); color: var(--primary); }
.admin-nav button.active { color: #fff; background: linear-gradient(120deg, var(--primary), #2f8bf0); border-color: transparent; box-shadow: 0 8px 18px rgba(21, 101, 216, 0.24); }

.admin-tab { padding: 22px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat-card { display: block; text-align: center; padding: 20px 16px; border-radius: var(--radius-sm); }
.stat-number { font-size: 2.3rem; margin: 0; font-weight: 800; letter-spacing: -0.02em; transition: color 0.2s; }
.stat-caption { margin: 6px 0 0; color: var(--muted); font-weight: 700; font-size: 0.88rem; }
.angka-naik { animation: pop 0.5s ease-out; }
@keyframes pop { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } }

.ruang-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 16px; margin-bottom: 22px; }
.ruang-stat { display: flex; flex-direction: column; align-items: stretch; padding: 18px; }
.ruang-stat-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 10px; }
.stat-line { display: flex; justify-content: space-between; margin: 4px 0; font-weight: 700; font-size: 0.92rem; }
.progress-bar-lg { background: #e7eef9; border-radius: 999px; height: 9px; overflow: hidden; margin-top: 10px; }
.progress-bar-lg > div { background: linear-gradient(90deg, var(--primary), var(--teal)); height: 100%; width: 0; transition: width 0.5s; border-radius: 999px; }

.chart-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 22px; }
/* Anak grid/flex tidak boleh memaksa lebar melebihi wadahnya (mis. kanvas grafik). */
.chart-grid > *, .stat-grid > *, .ruang-grid > *, .level-grid > *, .two-col > *, .result-grid > * { min-width: 0; }
.chart-card { min-width: 0; }
.chart-box { min-width: 0; }
.chart-box > canvas { max-width: 100% !important; height: auto !important; }
@media (min-width: 900px) { .chart-grid { grid-template-columns: 1fr 1fr; } }
.chart-card { background: #fbfdff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px; }
.chart-card h4 { margin: 0 0 14px; color: var(--ink); font-size: 1rem; }
.chart-box { position: relative; height: 250px; }

/* umpan aktivitas */
.feed { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; }
.feed-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.feed-item.feed-berjalan { border-left: 4px solid var(--amber); }
.feed-item.feed-selesai { border-left: 4px solid var(--success); }
.feed-item.feed-baru { animation: sorot 2.4s ease-out; }
@keyframes sorot { 0% { background: #e8f4ff; } 100% { background: #fff; } }
.feed-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary-light); flex: 0 0 auto; }
.feed-body { flex: 1 1 auto; min-width: 0; }
.feed-nama { font-weight: 700; font-size: 0.9rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-nip { font-weight: 600; color: var(--muted); font-size: 0.78rem; }
.feed-ket { font-size: 0.82rem; color: var(--muted); }
.feed-waktu { font-size: 0.78rem; color: var(--muted); font-weight: 700; flex: 0 0 auto; }

.level-bar + .level-bar { margin-top: 12px; }
.level-bar-head { display: flex; justify-content: space-between; font-size: 0.88rem; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
.level-bar-track { height: 10px; border-radius: 999px; background: #e7eef9; overflow: hidden; }
.level-bar-track > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--teal)); transition: width 0.6s; }

.filter-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filter-row > select, .filter-row > input { flex: 1 1 180px; margin: 0; font-weight: 600; }
.filter-row > .search-input { flex: 2 1 250px; }
.filter-row > .grow1 { flex: 1 1 140px; }
.filter-row > .grow2 { flex: 2 1 200px; }
.filter-inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filter-inline select { width: auto; margin: 0; padding: 8px 12px; font-weight: 600; }
.filter-inline .search-input { width: auto; min-width: 220px; margin: 0; padding: 9px 12px; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.two-col input, .two-col select { margin-top: 0; }

.bulk-bar {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  background: var(--primary-soft); border: 1px solid #cfe3ff; border-radius: var(--radius-sm);
  padding: 12px 16px; margin-bottom: 16px;
}
.bulk-bar .check-line { background: transparent; border: none; padding: 0; margin: 0; }
.badge-ok-dot, .badge-off-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.badge-ok-dot { background: var(--success); }
.badge-off-dot { background: #a9b7c9; }

.upload-box {
  border: 2px dashed #c9dcfa; border-radius: var(--radius); background: linear-gradient(160deg, #fbfdff, #f2f8ff);
  padding: 22px; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.upload-box:hover, .upload-box.is-drag { border-color: var(--primary); background: #eef6ff; }
.upload-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.upload-icon { font-size: 2.4rem; }
.upload-text { font-weight: 700; color: var(--ink); margin: 0; }

.table-wrap { overflow-x: auto; max-width: 100%; min-width: 0; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { background: #f7faff; color: var(--primary-dark); font-weight: 800; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.05em; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #fafcff; }
td .row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rank-pill { background: linear-gradient(120deg, #ffd166, var(--amber)); color: #6b3d00; padding: 5px 12px; border-radius: 999px; font-weight: 800; font-size: 0.85rem; }
.empty-row { text-align: center; padding: 24px; color: var(--muted); }
td input, td select { margin: 0; padding: 8px 10px; font-size: 0.88rem; }
td .cell-input-nama { min-width: 170px; }

.client-msg { display: none; text-align: center; padding: 32px; color: var(--muted); font-weight: 700; font-size: 1rem; }
body[data-role='client'] .admin-only { display: none !important; }
body[data-role='client'] .client-msg { display: block; }

/* -------------------------------- modal ------------------------------- */
.modal { position: fixed; inset: 0; background: rgba(15, 35, 64, 0.55); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 18px; }
.modal-card { max-width: 700px; width: 100%; max-height: 86vh; overflow-y: auto; margin: 0; box-shadow: var(--shadow-lg); }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 1.1rem; }
.modal-close { background: var(--danger-soft); color: var(--danger); border: 1px solid #f7cccd; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-weight: 800; flex: 0 0 auto; }

/* ------------------------------ responsif ----------------------------- */
@media (max-width: 640px) {
  .container { padding: 0 12px; }
  .card { padding: 18px; }
  .login-card { margin: 30px auto; padding: 30px 20px; }
  .login-title { font-size: 1.35rem; }
  h1 { font-size: 1.5rem; }
  .timer { font-size: 1.15rem; padding: 8px 16px; }
  .q-text { font-size: 1.05rem; }
  .quiz-nav { flex-direction: column-reverse; }
  .quiz-nav .btn { width: 100%; }
  .badge-3d { padding: 12px 18px; flex: 1 1 auto; }
  .badge-value { font-size: 1.9rem; }
  .stat-number { font-size: 1.9rem; }
  .tile-value { font-size: 2.2rem; }
  .header-title { font-size: 0.92rem; }
  .hide-sm { display: none; }
  .admin-nav button { padding: 9px 14px; font-size: 0.84rem; }
}

/* -------------------------------- cetak ------------------------------- */
@media print {
  /* Catatan: aturan cetak khusus sidebar portal ada di akhir blok sidebar (harus
     SETELAH .portal-shell{display:grid}, kalau tidak akan ditimpa aturan sesudahnya). */
  .bg-3d-wrapper, #main-header, .portal-menu, .admin-nav, .filter-row, .btn, .footer-note, .panel-soft, #modal-detail, .bulk-bar { display: none !important; }
  body { background: #fff; }
  .container { max-width: none; margin: 0; padding: 0; }
  .card { box-shadow: none; border: 1px solid #ccc; }
  table { min-width: 0; font-size: 11px; }
  /* Daftar finalis liga sering dicetak untuk rapat juri. */
  .finalis-grid { grid-template-columns: repeat(2, 1fr); }
  .finalis-card { box-shadow: none; border: 1px solid #bbb; break-inside: avoid; }
}

/* ============================ komponen baru ============================ */

/* Slider informasi (login & dashboard) */
.login-wrap { max-width: 980px; margin: 0 auto; }
.login-info { margin-top: 20px; }
.slider {
  position: relative; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid var(--line); background: #fff;
  /* Jarak bawah memakai variabel yang SAMA dengan .card supaya banner & kartu akun
     tidak terlihat mepet, dan seragam dengan jarak antar kartu lain (keluhan pemilik). */
  margin-bottom: var(--jarak-kartu);
}
/* Di halaman masuk jaraknya sudah diatur oleh gap flex, jadi tidak perlu margin lagi. */
.page-masuk .slider { margin-bottom: 0; }
.slider-track { position: relative; min-height: 112px; }
.slide { display: none; }
.slide.aktif { display: block; animation: masuk 0.35s ease-out; }
@keyframes masuk { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
/* Gambar banner informasi: ditampilkan pada rasio ASLINYA (width 100%, height auto)
   supaya banner tidak terpotong seperti sebelumnya (dulu dipaksa 170px dengan
   background cover, sehingga hanya sepertiga gambar yang terlihat). Di layar lebar
   tingginya dibatasi supaya tetap proporsional, dan gambar yang gagal dimuat
   disembunyikan oleh public/slider.js. */
.slide-gambar {
  display: block; width: 100%; height: auto;
  /* Batas tinggi hanya sebagai pengaman kalau ada gambar yang rasionya sangat tinggi;
     pada banner lebar biasa (mis. 2.46:1) tinggi aslinya ±480px sehingga tampil utuh. */
  max-height: 520px; object-fit: cover; object-position: center;
  background: linear-gradient(135deg, #eaf2ff, #e8fbf8);
}
.slide-isi { padding: 16px 20px 18px; }
.slide-label { display: inline-block; background: var(--primary-soft); color: var(--primary-dark); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; margin-bottom: 8px; }
.slide-isi h4 { margin: 0 0 6px; font-size: 1.15rem; }
.slide-isi p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.slider-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); background: #fbfdff; }
.slider-panah { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--primary); font-size: 1.2rem; font-weight: 800; cursor: pointer; line-height: 1; }
.slider-panah:hover { background: var(--primary-soft); }
.slider-titik-wrap { display: flex; gap: 7px; }
.slide-titik { width: 9px; height: 9px; border-radius: 50%; border: none; background: #cfdcee; cursor: pointer; padding: 0; }
.slide-titik.aktif { background: var(--primary); width: 22px; border-radius: 999px; }

/* Materi */
.materi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.materi-card { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; box-shadow: var(--shadow-sm); color: inherit; transition: transform 0.15s, border-color 0.15s; }
.materi-card:hover { transform: translateY(-3px); border-color: var(--primary-light); text-decoration: none; }
.materi-ikon { font-size: 1.8rem; line-height: 1; }
.materi-isi b { display: block; color: var(--ink); }
.materi-aksi { display: inline-block; margin-top: 8px; font-size: 0.85rem; font-weight: 700; color: var(--primary); }
.empty-materi { display: flex; gap: 14px; align-items: center; padding: 18px; border: 1px dashed #c9dcfa; border-radius: var(--radius-sm); background: #fbfdff; }
.empty-materi span { font-size: 1.8rem; }

/* Progres pegawai */
.progres-card { background: linear-gradient(120deg, #ffffff 0%, #f3f8ff 100%); }
.progres-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.progres-persen { font-size: 1.5rem; font-weight: 800; color: var(--primary); }
.progres-track { height: 12px; border-radius: 999px; background: #e7eef9; overflow: hidden; }
.progres-track > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--teal)); transition: width 0.6s; }

/* Chip kecil (benar/salah/poin) */
.level-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.chip { font-size: 0.78rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #eef2f8; color: var(--text); }
.chip-ok { background: var(--success-soft); color: #0f7a3d; }
.chip-no { background: var(--danger-soft); color: #b02a2f; }
.chip-poin { background: #fff5e6; color: #a86200; }
.level-card.terkunci { background: #f7f9fc; border-left: 5px solid #b9c6d8; }

/* Level dibuka (panel admin) */
.level-chips { display: inline-flex; gap: 4px; }
.chip-level { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 0.72rem; font-weight: 800; background: #eef2f8; color: #8a9cb5; }
.chip-level.on { background: var(--primary); color: #fff; }
.level-set { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.level-cb { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; cursor: pointer; font-size: 0.8rem; font-weight: 700; background: #fff; }
.level-cb input { width: 15px; height: 15px; margin: 0; accent-color: var(--primary); }
.level-cb.on { background: var(--primary-soft); border-color: var(--primary-light); color: var(--primary-dark); }

/* Paginasi */
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.pager-info, .pager-hal { font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.pager-nav { display: flex; align-items: center; gap: 10px; }

/* Rekap poin per level (halaman hasil) */
.rekap-box { text-align: left; margin: 20px 0; }
.rekap-box h4 { border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 12px; }
.tabel-rekap { min-width: 0; }
.tabel-rekap th, .tabel-rekap td { padding: 10px 12px; }
.tabel-rekap tfoot th { background: var(--primary-soft); color: var(--primary-dark); }
.baris-aktif td { background: var(--primary-soft); font-weight: 700; }
.review-mati { opacity: 0.66; border-left-color: #b9c6d8 !important; }


/* ============ halaman masuk: kartu form sederhana + slider informasi ============ */
/* Latar polos, isi halaman diletakkan di TENGAH layar (horizontal + vertikal). */
.page-masuk {
  background: #f6f8fc;
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
}
.page-masuk .container { flex: 1 1 auto; display: flex; flex-direction: column; max-width: none; margin: 0; padding: 0; }
.page-masuk .bg-3d-wrapper { display: none; } /* latar polos, tanpa hiasan */
.page-masuk .footer-note { padding: 6px 16px 16px; } /* catatan kaki tidak menambah tinggi berlebih */

.masuk-sederhana {
  width: 100%; max-width: 470px;
  /* margin:auto memusatkan dua arah sekaligus dan TIDAK memotong bagian atas
     kalau isi halaman lebih tinggi dari layar (beda dengan align-items:center). */
  margin: auto; padding: 26px 18px 30px;
  display: flex; flex-direction: column; gap: 16px;
}

/* ---- kop: merek + judul singkat (tanpa gambar) ---- */
.masuk-kepala { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.masuk-logo {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem;
  background: linear-gradient(150deg, var(--primary-dark), var(--primary-light)); color: #fff;
  box-shadow: 0 12px 24px rgba(21, 101, 216, 0.25);
}
.masuk-judul { margin: 4px 0 0; font-size: 1.3rem; letter-spacing: -0.01em; }
.masuk-sub { margin: 0; color: var(--muted); font-size: 0.86rem; max-width: 36ch; }

/* ---- kartu form ---- */
.auth-card { width: 100%; margin: 0; background: #fff; border: 1px solid #e4e9f2; box-shadow: 0 10px 30px rgba(16, 35, 63, 0.07); border-radius: 18px; padding: 22px 24px; }
.auth-title { text-align: center; font-size: 1.4rem; margin: 0 0 4px; }
.auth-sub { text-align: center; color: var(--muted); font-size: 0.88rem; margin: 0 0 14px; }
.auth-label { display: block; font-size: 0.88rem; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 14px; }
.auth-link { background: none; border: none; padding: 0; font: inherit; font-size: 0.85rem; font-weight: 700; color: var(--primary); cursor: pointer; }
.auth-link:hover { text-decoration: underline; }
.auth-card input { margin: 0 0 2px; }
.auth-pass { position: relative; }
.auth-pass input { padding-right: 46px; }
.auth-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 8px; cursor: pointer; color: var(--muted);
  display: grid; place-items: center; border-radius: 9px;
}
.auth-eye:hover { color: var(--primary); background: rgba(79, 70, 229, 0.08); }
.auth-eye svg { width: 19px; height: 19px; }
.auth-lupa { margin: 10px 0 0; padding: 11px 13px; border-radius: 11px; background: var(--primary-soft); border: 1px solid #cfe3ff; color: #10406f; font-size: 0.83rem; line-height: 1.5; }
.auth-remember { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 600; color: var(--text); margin: 12px 0 14px; cursor: pointer; }
.auth-remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.auth-submit { padding: 13px; font-size: 1rem; }
.auth-note { text-align: center; font-size: 0.85rem; color: var(--muted); margin: 12px 0 0; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 12px 0; color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: #e4e9f2; }
.auth-copy { text-align: center; font-size: 0.78rem; color: #8896ab; margin: 0; }

/* ---- informasi (slider) di bawah kartu ---- */
.masuk-info { display: flex; flex-direction: column; gap: 12px; }
.masuk-info-judul { margin: 0; font-size: 1.05rem; }

@media (max-width: 640px) {
  .masuk-sederhana { padding: 20px 14px 26px; gap: 14px; }
  .auth-card { padding: 18px 16px; }
}

/* ============ portal admin: sidebar KIRI bergaya dashboard monitoring ============ */
/* Menu ditempatkan di kolom 1 secara EKSPLISIT (jangan mengandalkan urutan dokumen —
   pernah gagal senyap saat pemilik memintanya di kanan, sekarang di kiri sesuai permintaan). */
.portal-shell { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
/* WAJIB: anak grid/flex harus boleh menyusut, kalau tidak tabel ber-min-width
   (atau deret menu mendatar) akan melebarkan seluruh halaman di layar HP. */
.portal-shell > * { min-width: 0; }
.portal-isi > * { min-width: 0; }
@media (min-width: 1000px) {
  .portal-shell { grid-template-columns: 274px 1fr; }
  .portal-menu { grid-column: 1; grid-row: 1; }
  .portal-isi { grid-column: 2; grid-row: 1; min-width: 0; }
}

.portal-menu {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border: 1px solid var(--line); border-radius: 20px;
  box-shadow: 0 14px 34px rgba(16, 35, 63, 0.10);
  position: sticky; top: 74px; display: flex; flex-direction: column;
  max-height: calc(100vh - 96px); overflow: hidden;
}
/* Kepala sidebar: merek + mode */
.menu-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 14px; border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, var(--primary-dark), var(--primary) 60%, #2f8bf0);
  color: #fff;
}
.menu-brand-mark {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 1.3rem;
  background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.32); flex: 0 0 auto;
}
.menu-brand-teks { min-width: 0; }
.menu-brand-teks b { display: block; font-size: 0.98rem; letter-spacing: -0.01em; line-height: 1.25; }
.menu-brand-teks span { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }

/* Kotak pantauan cepat (angka hidup + jam) */
.menu-pantau { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 7px; }
.pantau-baris { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.83rem; color: var(--muted); }
.pantau-baris b { font-size: 1rem; font-weight: 800; color: var(--ink); }
.pantau-jam { display: flex; align-items: center; gap: 8px; margin-top: 3px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 0.78rem; font-weight: 800; color: var(--primary-dark); }
.pantau-jam .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); animation: pulse 1.6s infinite; }

/* Daftar menu yang bisa digulir */
.menu-scroll { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 5px; }
.menu-judul {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  padding: 12px 12px 6px; display: flex; align-items: center; gap: 8px;
}
.menu-judul::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.menu-scroll .menu-judul:first-child { padding-top: 2px; }
.portal-menu button {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; border: 1px solid transparent;
  background: transparent; color: var(--text); font-family: inherit; font-weight: 700; font-size: 0.88rem;
  padding: 10px 12px; border-radius: 12px; cursor: pointer; position: relative;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.portal-menu button:hover { background: #eef6ff; border-color: #d9e7ff; transform: translateX(3px); }
.portal-menu button.active {
  background: linear-gradient(120deg, var(--primary), #2f8bf0); color: #fff; border-color: transparent;
  box-shadow: 0 10px 20px rgba(21, 101, 216, 0.28);
}
/* Penanda batang di sisi kiri item aktif (khas dashboard monitoring). */
.portal-menu button.active::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 22px; border-radius: 999px; background: var(--primary);
}
.menu-ikon { font-size: 1.05rem; width: 22px; text-align: center; flex: 0 0 auto; }
.menu-teks { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Kaki sidebar: identitas pengguna + keluar */
.menu-kaki { border-top: 1px solid var(--line); padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.menu-user { display: flex; align-items: center; gap: 10px; }
.menu-user-avatar { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 1.05rem; background: var(--primary-soft); border: 1px solid #cfe3ff; flex: 0 0 auto; }
.menu-user > div { min-width: 0; }
.menu-user b { display: block; font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-user .badge-mini { background: var(--primary-soft); border-color: #cfe3ff; color: var(--primary-dark); margin-top: 4px; }
.menu-kaki .btn { margin: 0; }

/* Tanpa jeda gulir untuk kartu tab di dalam area isi */
.portal-isi .admin-tab { margin-bottom: 0; }
.portal-isi { display: flex; flex-direction: column; gap: 22px; }

/* Header monitoring di dalam area isi (bukan lagi kartu terpisah di atas) */
.portal-head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: -4px 0 20px; padding-bottom: 16px; border-bottom: 2px solid var(--line);
}
.portal-head h2 { margin: 0 0 4px; font-size: 1.4rem; }

/* Layar sempit: sidebar jadi deret menu mendatar (dashboard tetap terbaca) */
@media (max-width: 999px) {
  .portal-menu { position: static; max-height: none; display: block; padding: 12px; width: 100%; min-width: 0; }
  .kesehatan-panel { padding: 14px; }
  .kesehatan-kartu { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
  .kesehatan-item b { font-size: 1.25rem; }
  .kesehatan-kepala { flex-direction: column; }
  .menu-pantau { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; }
  .pantau-jam { border-top: none; margin: 0; padding: 0; }
  .menu-judul { display: none; }
  /* Daftar menu menjadi deret mendatar yang bisa digeser */
  .menu-scroll { display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 10px 0 0; }
  .menu-scroll button { width: auto; flex: 0 0 auto; padding: 9px 14px; background: #f7faff; border-color: var(--line); }
  .menu-scroll button:hover { transform: none; }
  .portal-menu button.active::before { display: none; }
  .menu-kaki { flex-direction: row; align-items: center; justify-content: space-between; margin-top: 12px; }
  .menu-kaki .btn { width: auto; }
  .menu-user { flex: 1 1 auto; }
}
.pager-info b, .pager-hal { color: var(--ink); }

/* Cetak dari portal admin: sidebar + kolomnya hilang, isi memakai lebar penuh.
   Aturan ini diletakkan SETELAH .portal-shell{display:grid} supaya menang. */
@media print {
  .portal-menu { display: none !important; }
  .portal-shell { display: block !important; }
  .portal-isi { display: block !important; grid-column: auto !important; }
}

/* ==================== ringkasan admin lebih berwarna ==================== */
.stat-card { position: relative; overflow: hidden; border: none !important; color: #fff; }
.stat-card::after { content: ''; position: absolute; right: -30px; bottom: -40px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.stat-card .stat-number, .stat-card .stat-caption { color: #fff !important; position: relative; z-index: 1; }
.stat-card .stat-ikon { font-size: 1.5rem; position: relative; z-index: 1; display: block; margin-bottom: 4px; }
/* Keterangan kecil di kartu statistik supaya angka tidak salah tafsir. */
.stat-hint { display: block; position: relative; z-index: 1; font-size: 0.72rem; color: rgba(255, 255, 255, 0.9); margin-top: 2px; }
.stat-biru { background: linear-gradient(135deg, #1565d8, #4a9bff); box-shadow: 0 14px 30px rgba(21, 101, 216, 0.28); }
.stat-hijau { background: linear-gradient(135deg, #0e9f6e, #34d399); box-shadow: 0 14px 30px rgba(16, 163, 116, 0.26); }
.stat-merah { background: linear-gradient(135deg, #e5484d, #ff8a8e); box-shadow: 0 14px 30px rgba(229, 72, 77, 0.24); }
.stat-ungu { background: linear-gradient(135deg, #7c3aed, #a78bfa); box-shadow: 0 14px 30px rgba(124, 58, 237, 0.24); }
.ruang-stat { border-left-width: 6px !important; background: #fff; }
.ruang-1 { border-left-color: #1565d8 !important; }
.ruang-2 { border-left-color: #ff9f1c !important; }
.ruang-3 { border-left-color: #00b8a9 !important; }
.ruang-4 { border-left-color: #7c3aed !important; }
.ruang-stat .progress-bar-lg > div { background: linear-gradient(90deg, #1565d8, #00b8a9); }
.feed-item.feed-selesai { background: linear-gradient(120deg, #f4fdf8, #ffffff); }
.feed-item.feed-berjalan { background: linear-gradient(120deg, #fff9ef, #ffffff); }
.section-ungu .section-head h3 { color: #7c3aed; }

/* panel perlu ditindaklanjuti */
.perhatian-card { border-left: 6px solid var(--amber); }
.perhatian-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.perhatian-ringkas { font-size: 0.85rem; font-weight: 800; color: #b45309; background: #fff7e6; border: 1px solid #ffe2b8; border-radius: 10px; padding: 8px 12px; }
.perhatian-item { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.perhatian-item .p-ikon { font-size: 1.1rem; }
.perhatian-item .p-isi { flex: 1 1 auto; min-width: 0; font-size: 0.88rem; }
.perhatian-item.p-kuning { border-left: 4px solid var(--amber); }
.perhatian-item.p-merah { border-left: 4px solid var(--danger); }
.perhatian-item.p-biru { border-left: 4px solid var(--primary-light); }