/* =====================================================================
   SIMAP — sistem desain
   Arah rupa: ruang kelas SD. Papan tulis hijau tua, goresan kapur kuning,
   kertas buku tulis, dan pita warna per mata pelajaran.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

:root {
  /* Palet */
  --papan:        #16362B;   /* hijau papan tulis */
  --papan-terang: #1F4A3C;
  --papan-gelap:  #0E241C;
  --kapur:        #F4EFE3;   /* putih kapur, sedikit hangat */
  --kapur-kuning: #F2C14E;   /* aksen utama */
  --bata:         #C0563F;   /* peringatan / alpa */
  --daun:         #2E9E6B;   /* berhasil / hadir */
  --tinta:        #1B2430;   /* teks utama */
  --tinta-samar:  #5B6875;
  --garis:        #E2DED4;   /* garis buku tulis */
  --kertas:       #FBF9F4;
  --kartu:        #FFFFFF;

  /* Bentuk */
  --r-sm: 6px; --r-md: 12px; --r-lg: 18px;
  --bayang: 0 1px 2px rgba(27,36,48,.06), 0 8px 24px -12px rgba(27,36,48,.18);
  --bayang-kuat: 0 2px 4px rgba(27,36,48,.08), 0 18px 40px -18px rgba(27,36,48,.30);
  --sidebar-w: 254px;
}

/* Atribut hidden harus menang atas display inline.
   Tanpa ini, modal yang memakai style="display:grid" tetap tampil
   walau sudah diberi atribut hidden. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--kertas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display {
  font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0 0 .4em;
}
h1 { font-size: 1.75rem; } h2 { font-size: 1.35rem; } h3 { font-size: 1.1rem; }

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

.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .86em; }

/* ------------------------------------------------------------ Kerangka */
.tata { display: flex; min-height: 100vh; }

.sisi {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--papan);
  color: var(--kapur);
  padding: 20px 14px 28px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  /* Goresan kapur samar sebagai tekstur papan */
  background-image:
    radial-gradient(ellipse 60% 30% at 20% 12%, rgba(244,239,227,.055), transparent 70%),
    radial-gradient(ellipse 50% 25% at 85% 60%, rgba(244,239,227,.04), transparent 70%);
}

.sisi__merek { display: flex; align-items: center; gap: 11px; padding: 4px 8px 20px; }
.sisi__logo {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  background: var(--kapur-kuning); color: var(--papan-gelap);
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 17px;
}
.sisi__nama { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.sisi__sub  { font-size: 11px; color: rgba(244,239,227,.6); line-height: 1.3; }

.sisi__gugus { margin: 18px 0 6px; padding: 0 10px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(244,239,227,.45); }

.sisi a.tautan {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; margin-bottom: 2px; border-radius: var(--r-sm);
  color: rgba(244,239,227,.82); font-size: 14px; font-weight: 500;
  text-decoration: none; transition: background .14s, color .14s;
}
.sisi a.tautan:hover { background: rgba(244,239,227,.08); color: var(--kapur); }
.sisi a.tautan.aktif { background: var(--kapur-kuning); color: var(--papan-gelap); font-weight: 600; }
.sisi .ikon { width: 17px; height: 17px; flex: none; opacity: .9; }
.sisi a.tautan.aktif .ikon { opacity: 1; }

.utama { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.bar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 26px; background: var(--kartu);
  border-bottom: 1px solid var(--garis); position: sticky; top: 0; z-index: 20;
}
.bar__judul { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.bar__kanan { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--papan-terang);
  color: var(--kapur); font-size: 12.5px; font-weight: 700;
}

.isi { padding: 24px 26px 56px; max-width: 1360px; width: 100%; }

/* ------------------------------------------------------------- Komponen */
.kartu {
  background: var(--kartu); border: 1px solid var(--garis);
  border-radius: var(--r-md); box-shadow: var(--bayang);
}
.kartu__kepala {
  padding: 15px 18px; border-bottom: 1px solid var(--garis);
  display: flex; align-items: center; gap: 12px;
}
.kartu__kepala h3 { margin: 0; font-size: 15px; }
.kartu__isi { padding: 18px; }
.kartu__kaki { padding: 12px 18px; border-top: 1px solid var(--garis); background: #FCFBF7;
  border-radius: 0 0 var(--r-md) var(--r-md); }

.petak { display: grid; gap: 16px; }
.petak-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.petak-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.petak-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.petak-sisi { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* Kartu angka — pita warna di tepi kiri, bukan gradien */
.angka { position: relative; padding: 17px 18px 17px 21px; overflow: hidden; }
.angka::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--papan-terang); }
.angka--kuning::before { background: var(--kapur-kuning); }
.angka--daun::before   { background: var(--daun); }
.angka--bata::before   { background: var(--bata); }
.angka__label { font-size: 12px; font-weight: 600; color: var(--tinta-samar); text-transform: uppercase; letter-spacing: .06em; }
.angka__nilai { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 30px; line-height: 1.1; margin-top: 4px; }
.angka__ket { font-size: 12.5px; color: var(--tinta-samar); margin-top: 2px; }

/* Tombol */
.tbl {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--r-sm); border: 1px solid transparent;
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .14s, border-color .14s, transform .06s;
  text-decoration: none;
}
.tbl:hover { text-decoration: none; }
.tbl:active { transform: translateY(1px); }
.tbl--utama  { background: var(--papan); color: var(--kapur); }
.tbl--utama:hover { background: var(--papan-terang); }
.tbl--aksen  { background: var(--kapur-kuning); color: var(--papan-gelap); }
.tbl--aksen:hover { background: #E8B43C; }
.tbl--garis  { background: var(--kartu); color: var(--tinta); border-color: var(--garis); }
.tbl--garis:hover { border-color: var(--tinta-samar); }
.tbl--bahaya { background: var(--bata); color: #fff; }
.tbl--kecil  { padding: 6px 11px; font-size: 13px; }
.tbl[disabled] { opacity: .55; cursor: not-allowed; }

/* Isian formulir */
.medan { margin-bottom: 15px; }
.medan label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--tinta); }
.medan .bantu { font-size: 12px; color: var(--tinta-samar); font-weight: 400; margin-top: 4px; }

input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], input[type=time], input[type=datetime-local], input[type=search],
select, textarea {
  width: 100%; padding: 9px 12px; font-family: inherit; font-size: 14px; color: var(--tinta);
  background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--r-sm);
  transition: border-color .14s, box-shadow .14s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--papan-terang);
  box-shadow: 0 0 0 3px rgba(31,74,60,.12);
}
textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
select { appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235B6875' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; }

.baris { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.baris > .medan { flex: 1; min-width: 160px; margin-bottom: 0; }

/* Tabel */
.tabel-bungkus { overflow-x: auto; border-radius: var(--r-md); }
table.tabel { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--kartu); }
table.tabel th {
  text-align: left; padding: 10px 13px; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-samar);
  background: #FAF8F3; border-bottom: 1px solid var(--garis); white-space: nowrap;
}
table.tabel td { padding: 10px 13px; border-bottom: 1px solid var(--garis); vertical-align: middle; }
table.tabel tbody tr:hover { background: #FCFBF7; }
table.tabel tbody tr:last-child td { border-bottom: none; }
.tengah { text-align: center; } .kanan { text-align: right; }

/* Label status */
.label {
  display: inline-block; padding: 3px 9px; border-radius: 100px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.label--hadir, .label--sukses, .label--disetujui { background: #E4F4EC; color: #1B6C48; }
.label--telat, .label--menunggu, .label--draf { background: #FCF1D8; color: #8A6212; }
.label--alpa, .label--bahaya, .label--revisi { background: #F9E5E1; color: #93341F; }
.label--izin, .label--sakit, .label--info { background: #E7EEF6; color: #2C4C70; }
.label--netral { background: #EFEDE7; color: var(--tinta-samar); }

/* Pesan kilat */
.pesan {
  padding: 12px 16px; border-radius: var(--r-sm); margin-bottom: 18px;
  font-size: 14px; font-weight: 500; display: flex; gap: 10px; align-items: flex-start;
  border-left: 3px solid;
}
.pesan--sukses  { background: #E4F4EC; border-color: var(--daun); color: #15503A; }
.pesan--error   { background: #F9E5E1; border-color: var(--bata); color: #7E2C1A; }
.pesan--warning { background: #FCF1D8; border-color: var(--kapur-kuning); color: #7A5610; }

/* Kosong */
.kosong { text-align: center; padding: 44px 20px; color: var(--tinta-samar); }
.kosong h3 { color: var(--tinta); margin-bottom: 6px; }
.kosong p { margin: 0 0 16px; font-size: 14px; }

/* Bilah kemajuan */
.bilah { height: 7px; background: var(--garis); border-radius: 100px; overflow: hidden; }
.bilah span { display: block; height: 100%; background: var(--daun); border-radius: 100px; transition: width .4s ease; }
.bilah--kuning span { background: var(--kapur-kuning); }

/* Pita warna mapel */
.pita { display: inline-block; width: 3px; height: 1em; border-radius: 2px; vertical-align: -.15em; margin-right: 7px; }

/* ------------------------------------------------------- Halaman masuk */
.masuk {
  min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr;
  background: var(--kertas);
}
.masuk__kiri {
  background: var(--papan); color: var(--kapur);
  padding: 54px 56px; display: flex; flex-direction: column; justify-content: space-between;
  background-image:
    repeating-linear-gradient(transparent, transparent 37px, rgba(244,239,227,.045) 37px, rgba(244,239,227,.045) 38px),
    radial-gradient(ellipse 55% 30% at 25% 18%, rgba(244,239,227,.06), transparent 70%);
}
.masuk__kanan { display: grid; place-items: center; padding: 40px 32px; }
.masuk__kotak { width: 100%; max-width: 372px; }
.masuk__tagline {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: 40px; line-height: 1.12; letter-spacing: -.03em; margin: 0 0 14px;
}
.masuk__tagline em { font-style: normal; color: var(--kapur-kuning); }
.masuk__daftar { list-style: none; padding: 0; margin: 26px 0 0; }
.masuk__daftar li {
  padding: 7px 0 7px 26px; position: relative; font-size: 14.5px; color: rgba(244,239,227,.8);
}
.masuk__daftar li::before {
  content: ''; position: absolute; left: 2px; top: 15px;
  width: 11px; height: 2px; background: var(--kapur-kuning); border-radius: 2px;
}

/* --------------------------------------------- Papan kehadiran gerbang */
.papan-layar {
  min-height: 100vh; background: var(--papan); color: var(--kapur);
  padding: 34px 40px; font-family: 'Bricolage Grotesque', sans-serif;
}
.papan-layar__jam { font-size: 76px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.papan-tap {
  display: flex; align-items: center; gap: 16px; padding: 15px 20px;
  background: rgba(244,239,227,.07); border-radius: var(--r-md); margin-bottom: 10px;
  animation: masukPelan .35s ease;
}
.papan-tap__nama { font-size: 25px; font-weight: 700; }
@keyframes masukPelan { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------- Modul ajar */
.modul-bagian { margin-bottom: 22px; }
.modul-bagian h4 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-samar); margin: 0 0 8px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700;
}
.modul-bagian .kotak {
  padding: 14px 16px; background: var(--kertas);
  border: 1px solid var(--garis); border-radius: var(--r-sm); font-size: 14.5px;
}
.modul-bagian .kotak p:first-child { margin-top: 0; } .modul-bagian .kotak p:last-child { margin-bottom: 0; }

/* Tombol AI — satu-satunya elemen dengan kilau, agar mudah dikenali */
.tbl--ai {
  background: var(--papan-gelap); color: var(--kapur-kuning);
  border: 1px solid rgba(242,193,78,.35);
}
.tbl--ai:hover { background: var(--papan); }
.tbl--ai.sedang { pointer-events: none; opacity: .8; }
.tbl--ai.sedang::after {
  content: ''; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(242,193,78,.3); border-top-color: var(--kapur-kuning);
  animation: putar .7s linear infinite;
}
@keyframes putar { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- Rapor */
@media print {
  .sisi, .bar, .tanpa-cetak { display: none !important; }
  body { background: #fff; font-size: 11.5pt; }
  .isi { padding: 0; max-width: none; }
  .kartu { border: none; box-shadow: none; }
  .lembar { page-break-after: always; }
}
.lembar {
  background: #fff; padding: 26mm 20mm; max-width: 210mm; margin: 0 auto 20px;
  box-shadow: var(--bayang);
}
.kop { display: flex; gap: 16px; align-items: center; border-bottom: 3px double var(--tinta); padding-bottom: 12px; margin-bottom: 20px; }
.kop img { width: 66px; height: 66px; object-fit: contain; }
.kop__teks { text-align: center; flex: 1; }
.kop__teks .besar { font-family: 'Bricolage Grotesque', sans-serif; font-size: 19px; font-weight: 800; }

/* ------------------------------------------------------------ Responsif */
@media (max-width: 1080px) {
  .petak-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .petak-sisi, .petak-3 { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .sisi {
    position: fixed; left: 0; top: 0; z-index: 60;
    transform: translateX(-100%); transition: transform .22s ease;
  }
  .sisi.buka { transform: none; box-shadow: var(--bayang-kuat); }
  .tirai { position: fixed; inset: 0; background: rgba(14,36,28,.5); z-index: 55; }
  .isi, .bar { padding-left: 16px; padding-right: 16px; }
  .petak-2, .petak-4 { grid-template-columns: 1fr; }
  .masuk { grid-template-columns: 1fr; }
  .masuk__kiri { display: none; }
  .papan-layar__jam { font-size: 48px; }
}

.buka-sisi { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
@media (max-width: 820px) { .buka-sisi { display: block; } }

/* Aksesibilitas */
:focus-visible { outline: 2px solid var(--papan-terang); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Kotak pencarian orang ---------- */
.pilih-orang { position: relative; }

.po-hasil {
  position: absolute; z-index: 40; left: 0; right: 0;
  background: var(--kartu); border: 1px solid var(--garis);
  border-radius: 10px; margin-top: 4px; max-height: 280px; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(27, 36, 48, .12);
}
.po-baris { padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--garis); }
.po-baris:last-child { border-bottom: 0; }
.po-baris:hover, .po-sorot { background: var(--kertas); }
.po-nama { display: block; font-size: 13.5px; font-weight: 600; }
.po-ket  { display: block; font-size: 11.5px; color: var(--tinta-samar); margin-top: 2px; }
.po-kosong { padding: 11px 12px; font-size: 13px; color: var(--tinta-samar); }

.po-terpilih {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--kertas);
  border: 1px solid var(--papan-terang); border-radius: 10px; font-size: 13.5px;
}
.po-teks { flex: 1; }
.po-ganti {
  background: none; border: 0; color: var(--bata);
  cursor: pointer; font-size: 12.5px; padding: 0;
}

/* ---------- Kartu angka ---------- */
/* Label panjang seperti "Kartu belum dikenal" harus boleh membungkus antar
   kata, bukan dipaksa satu huruf per baris ketika kartunya menyempit */
.angka { min-width: 0; }
.angka__label {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--tinta-samar); line-height: 1.45; overflow-wrap: break-word;
}
.angka__nilai { font-size: 28px; font-weight: 800; line-height: 1.15; margin: 4px 0 2px; }
.angka__ket { font-size: 11.5px; color: var(--tinta-samar); line-height: 1.5; }