/* =====================================================================
   Sistem Absensi RFID — tema "Kartu & Loket"
   Palet: tinta navy, kertas dingin, kobalt, kuning stempel
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --tinta:      #14243D;
  --tinta-2:    #1E3557;
  --tinta-3:    #2A4570;
  --kertas:     #F1F4F9;
  --putih:      #FFFFFF;
  --garis:      #D8E0EC;
  --redup:      #6B7A90;

  --kobalt:     #2F4DD0;
  --kobalt-mud: #EAEEFC;
  --stempel:    #E8A317;

  --ok:         #157F4D;
  --ok-mud:     #E4F3EB;
  --warn:       #B9700D;
  --warn-mud:   #FBF0DD;
  --bad:        #BF3A3A;
  --bad-mud:    #FAE8E8;

  --r:          10px;
  --bayang:     0 1px 2px rgba(20,36,61,.06), 0 6px 20px rgba(20,36,61,.06);

  --display: 'Space Grotesk', 'Segoe UI', Tahoma, sans-serif;
  --body:    'Inter', 'Segoe UI', Tahoma, sans-serif;
  --mono:    'JetBrains Mono', 'Consolas', monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--body);
  background: var(--kertas);
  color: var(--tinta);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--kobalt); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--display); margin: 0 0 .4em; letter-spacing: -.015em; }
h1 { font-size: 22px; font-weight: 700; }
h2 { font-size: 17px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }

/* ---------- Tata letak ---------- */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 244px; flex: 0 0 244px; background: var(--tinta); color: #C9D5E8;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.sidebar__merek {
  padding: 18px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.09);
  display: flex; gap: 11px; align-items: center;
}
.sidebar__logo {
  width: 36px; height: 36px; border-radius: 8px; flex: 0 0 36px;
  background: var(--stempel); color: var(--tinta);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 15px;
}
.sidebar__nama { font-family: var(--display); font-weight: 600; color: #fff; font-size: 14px; line-height: 1.2; }
.sidebar__sub  { font-size: 11px; color: #8FA3C0; letter-spacing: .04em; text-transform: uppercase; }

.nav { padding: 12px 10px; overflow-y: auto; flex: 1; }
.nav__grup { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
             color: #6F84A5; padding: 14px 10px 6px; font-weight: 600; }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  color: #C9D5E8; font-size: 13.5px; margin-bottom: 2px; text-decoration: none;
}
.nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav a.aktif { background: var(--kobalt); color: #fff; font-weight: 500; }
.nav a .ikon { width: 17px; text-align: center; opacity: .9; font-size: 14px; }
.nav a .lencana {
  margin-left: auto; background: var(--stempel); color: var(--tinta);
  font-size: 10.5px; font-weight: 700; border-radius: 20px; padding: 1px 7px;
}

.sidebar__kaki { padding: 12px; border-top: 1px solid rgba(255,255,255,.09); font-size: 12px; }
.sidebar__kaki b { color: #fff; display: block; font-size: 13px; }
.sidebar__kaki span { color: #8FA3C0; }
.sidebar__kaki a { color: #FF9C9C; font-size: 12px; }

.utama { flex: 1; min-width: 0; }
.topbar {
  background: var(--putih); border-bottom: 1px solid var(--garis);
  padding: 12px 24px; display: flex; align-items: center; gap: 16px;
  position: sticky; top: 0; z-index: 20;
}
.topbar h1 { margin: 0; font-size: 18px; }
.topbar__jam { margin-left: auto; font-family: var(--mono); font-size: 13px; color: var(--redup); }
.konten { padding: 22px 24px 60px; max-width: 1400px; }

/* ---------- Kartu / panel ---------- */
.kartu {
  background: var(--putih); border: 1px solid var(--garis);
  border-radius: var(--r); box-shadow: var(--bayang); margin-bottom: 18px;
}
.kartu__kepala {
  padding: 13px 16px; border-bottom: 1px solid var(--garis);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.kartu__kepala h2, .kartu__kepala h3 { margin: 0; }
.kartu__isi { padding: 16px; }
.kartu__kaki { padding: 12px 16px; border-top: 1px solid var(--garis); background: #FAFBFD;
               border-radius: 0 0 var(--r) var(--r); }

/* ---------- Statistik ---------- */
.grid-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat {
  background: var(--putih); border: 1px solid var(--garis); border-radius: var(--r);
  padding: 14px 16px; box-shadow: var(--bayang); position: relative; overflow: hidden;
}
.stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--kobalt); }
.stat--ok::before   { background: var(--ok); }
.stat--warn::before { background: var(--warn); }
.stat--bad::before  { background: var(--bad); }
.stat__label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--redup); font-weight: 600; }
.stat__nilai { font-family: var(--display); font-size: 27px; font-weight: 700; line-height: 1.15; margin-top: 2px; }
.stat__ket   { font-size: 12px; color: var(--redup); }

/* ---------- Tabel ---------- */
.tabel-bungkus { overflow-x: auto; }
table.tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tabel th {
  text-align: left; padding: 9px 12px; background: #F6F8FC;
  border-bottom: 1px solid var(--garis); font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--redup); font-weight: 600; white-space: nowrap;
}
table.tabel td { padding: 9px 12px; border-bottom: 1px solid #EDF1F7; vertical-align: middle; }
table.tabel tbody tr:hover { background: #FAFBFE; }
table.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel .mono { font-family: var(--mono); font-size: 12px; }
.tabel .num  { text-align: right; font-family: var(--mono); }
.tabel--rapat td, .tabel--rapat th { padding: 6px 10px; }

/* ---------- Badge ---------- */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap; line-height: 1.6;
}
.badge--ok   { background: var(--ok-mud);   color: var(--ok); }
.badge--warn { background: var(--warn-mud); color: var(--warn); }
.badge--bad  { background: var(--bad-mud);  color: var(--bad); }
.badge--info { background: var(--kobalt-mud); color: var(--kobalt); }
.badge--mute { background: #EEF1F6; color: var(--redup); }

/* ---------- Form ---------- */
label.lbl { display: block; font-size: 12px; font-weight: 600; color: var(--tinta-2); margin-bottom: 5px; }
.isian, select.isian, textarea.isian {
  width: 100%; padding: 8px 11px; border: 1px solid var(--garis); border-radius: 8px;
  font-family: var(--body); font-size: 13.5px; background: var(--putih); color: var(--tinta);
}
.isian:focus { outline: 2px solid var(--kobalt); outline-offset: 1px; border-color: var(--kobalt); }
.isian--mono { font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.baris { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 13px; }
.bidang { margin-bottom: 13px; }
.petunjuk { font-size: 11.5px; color: var(--redup); margin-top: 4px; }

.tbl {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 8px;
  border: 1px solid transparent; background: var(--kobalt); color: #fff;
  font-family: var(--body); font-weight: 600; font-size: 13.5px; cursor: pointer; text-decoration: none;
}
.tbl:hover { filter: brightness(1.08); text-decoration: none; color: #fff; }
.tbl--garis { background: var(--putih); color: var(--tinta); border-color: var(--garis); }
.tbl--garis:hover { background: #F6F8FC; color: var(--tinta); }
.tbl--stempel { background: var(--stempel); color: var(--tinta); }
.tbl--bahaya { background: var(--bad); }
.tbl--kecil { padding: 5px 10px; font-size: 12px; }
.tbl:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Notifikasi ---------- */
.pesan { padding: 11px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 13.5px; border: 1px solid; }
.pesan--ok   { background: var(--ok-mud);   border-color: #BFE3CF; color: #0E5C38; }
.pesan--info { background: var(--kobalt-mud); border-color: #C6D2F7; color: #1E3690; }
.pesan--warn { background: var(--warn-mud); border-color: #EFD6A8; color: #8A5309; }
.pesan--bad  { background: var(--bad-mud);  border-color: #EFC3C3; color: #8E2828; }

/* ---------- Kartu tap (elemen khas) ---------- */
.taplist { display: flex; flex-direction: column; gap: 10px; }
.tap {
  display: flex; align-items: stretch; background: var(--putih);
  border: 1px solid var(--garis); border-radius: var(--r); overflow: hidden;
  box-shadow: var(--bayang); animation: masuk .32s cubic-bezier(.2,.8,.3,1);
}
@keyframes masuk { from { opacity: 0; transform: translateY(-8px) scale(.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tap { animation: none; } }

/* sisi kiri kartu — perforasi seperti karcis */
.tap__sobek {
  width: 9px; flex: 0 0 9px; background: var(--kobalt);
  background-image: radial-gradient(circle at 50% 0, var(--putih) 2.6px, transparent 2.7px);
  background-size: 9px 11px;
}
.tap--ok   .tap__sobek { background-color: var(--ok); }
.tap--warn .tap__sobek { background-color: var(--warn); }
.tap--error .tap__sobek { background-color: var(--bad); }

.tap__isi { flex: 1; padding: 11px 14px; min-width: 0; }
.tap__nama { font-family: var(--display); font-weight: 600; font-size: 15.5px; }
.tap__detail { font-size: 12.5px; color: var(--redup); }
.tap__uid { font-family: var(--mono); font-size: 11px; color: #93A2B8; letter-spacing: .1em; }
.tap__kanan { padding: 11px 14px; text-align: right; display: flex; flex-direction: column;
              justify-content: center; align-items: flex-end; gap: 3px; border-left: 1px dashed var(--garis); }
.tap__jam { font-family: var(--mono); font-size: 14px; font-weight: 600; }

/* stempel status */
.stempel-status {
  font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .11em;
  text-transform: uppercase; border: 2px solid currentColor; border-radius: 4px;
  padding: 1px 8px; transform: rotate(-3deg); opacity: .92;
}
.stempel-status--ok    { color: var(--ok); }
.stempel-status--warn  { color: var(--warn); }
.stempel-status--error { color: var(--bad); }

/* ---------- Layar monitor besar ---------- */
.monitor { background: var(--tinta); min-height: 100vh; color: #E7EDF7; padding: 22px; }
.monitor__kepala { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.monitor__judul { font-family: var(--display); font-size: 21px; color: #fff; }
.monitor__jam { margin-left: auto; font-family: var(--mono); font-size: 30px; font-weight: 600; color: var(--stempel); }
.monitor .kartu { background: #1B2E4C; border-color: #2C4368; }
.monitor .tap { background: #223A5E; border-color: #33507A; }
.monitor .tap__nama { color: #fff; }
.monitor .tap__detail { color: #A8BBD6; }
.monitor .tap__kanan { border-left-color: #33507A; }
.monitor .tap__jam { color: #fff; }
.monitor .stat { background: #1B2E4C; border-color: #2C4368; }
.monitor .stat__nilai { color: #fff; }
.monitor .stat__label { color: #8FA3C0; }

/* sorotan tap terbaru — satu momen, bukan hiasan di mana-mana */
.sorot {
  background: var(--putih); border-radius: 14px; padding: 22px 24px; color: var(--tinta);
  display: flex; gap: 20px; align-items: center; margin-bottom: 18px;
  border-left: 8px solid var(--kobalt); min-height: 116px;
}
.sorot--ok    { border-left-color: var(--ok); }
.sorot--warn  { border-left-color: var(--warn); }
.sorot--error { border-left-color: var(--bad); }
.sorot__foto {
  width: 78px; height: 78px; flex: 0 0 78px; border-radius: 10px; background: var(--kobalt-mud);
  display: grid; place-items: center; font-family: var(--display); font-size: 27px;
  font-weight: 700; color: var(--kobalt);
}
.sorot__nama { font-family: var(--display); font-size: 26px; font-weight: 700; line-height: 1.15; }
.sorot__detail { font-size: 15px; color: var(--redup); }
.sorot__kanan { margin-left: auto; text-align: right; }
.sorot__jam { font-family: var(--mono); font-size: 27px; font-weight: 600; }

/* ---------- Utilitas ---------- */
.tumpuk { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.kanan { margin-left: auto; }
.redup { color: var(--redup); }
.kecil { font-size: 12px; }
.mono  { font-family: var(--mono); }
.tengah { text-align: center; }
.kosong { padding: 34px 18px; text-align: center; color: var(--redup); }
.kosong__judul { font-family: var(--display); font-size: 15px; color: var(--tinta-2); margin-bottom: 4px; }
.bar { height: 6px; background: #EDF1F7; border-radius: 4px; overflow: hidden; min-width: 70px; }
.bar > i { display: block; height: 100%; background: var(--ok); }
.pil { display: inline-block; padding: 2px 8px; border-radius: 6px; background: #EEF1F6;
       font-size: 11.5px; font-family: var(--mono); }

/* fokus keyboard terlihat jelas */
a:focus-visible, button:focus-visible, .isian:focus-visible, select:focus-visible {
  outline: 2px solid var(--stempel); outline-offset: 2px;
}

/* ---------- Halaman login ---------- */
.login-latar {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: var(--tinta);
  background-image: radial-gradient(circle at 18% 12%, #23406B 0%, transparent 45%),
                    radial-gradient(circle at 84% 88%, #1D3557 0%, transparent 42%);
}
.login-kartu {
  width: 100%; max-width: 392px; background: var(--putih); border-radius: 14px;
  overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.32);
}
.login-kartu__pita { height: 7px; background: linear-gradient(90deg, var(--kobalt) 0 60%, var(--stempel) 60% 100%); }
.login-kartu__isi { padding: 26px 26px 24px; }
.login-kartu__logo {
  width: 46px; height: 46px; border-radius: 10px; background: var(--tinta); color: var(--stempel);
  display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 18px;
  margin-bottom: 14px;
}

/* ---------- Cetak ---------- */
@media print {
  .sidebar, .topbar, .tbl, .cetak-sembunyi { display: none !important; }
  body { background: #fff; }
  .konten { padding: 0; }
  .kartu { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
}

/* ---------- Responsif ---------- */
@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; flex: none; height: auto; position: static; }
  .sidebar__kaki, .nav__grup { display: none; }
  .nav { display: flex; overflow-x: auto; padding: 8px; gap: 6px; }
  .nav a { white-space: nowrap; margin: 0; }
  .konten { padding: 16px 14px 40px; }
  .topbar { padding: 10px 14px; }
  .sorot { flex-wrap: wrap; }
  .sorot__nama { font-size: 21px; }
  .monitor__jam { font-size: 22px; }
}

/* ==========================================================
   Linimasa jam masuk (halaman kontrol hari)
   ========================================================== */
.linimasa{
  display:flex; gap:0; margin:4px 0 18px; position:relative;
  border-radius:10px; overflow:hidden; border:1px solid var(--garis);
}
.linimasa::before{
  content:''; position:absolute; left:0; right:0; top:50%; height:1px;
  background:repeating-linear-gradient(90deg,var(--garis) 0 6px,transparent 6px 12px);
}
.linimasa__pos{
  flex:1; padding:14px 12px; text-align:center; position:relative;
  background:var(--kertas); border-right:1px solid var(--garis);
}
.linimasa__pos:last-child{ border-right:0; }
.linimasa__pos--tekan{ background:var(--tinta); }
.linimasa__pos--tekan .linimasa__jam{ color:#fff; }
.linimasa__pos--tekan .linimasa__ket{ color:rgba(255,255,255,.72); }
.linimasa__pos--nyala{ background:rgba(232,163,23,.14); }
.linimasa__jam{
  display:block; font-family:var(--mono); font-size:22px; font-weight:600;
  color:var(--tinta); letter-spacing:-.5px;
}
.linimasa__ket{
  display:block; margin-top:3px; font-size:11px; line-height:1.35;
  color:var(--redup); text-transform:uppercase; letter-spacing:.4px;
}

/* ==========================================================
   Pemilih siswa banyak (dispensasi)
   ========================================================== */
.pilihan-siswa{
  max-height:260px; overflow-y:auto; margin-top:8px;
  border:1px solid var(--garis); border-radius:8px; background:#fff;
}
.pilihan-siswa__baris{
  display:grid; grid-template-columns:20px 90px 1fr 90px; align-items:center; gap:10px;
  padding:7px 12px; border-bottom:1px solid var(--garis); cursor:pointer;
}
.pilihan-siswa__baris:last-child{ border-bottom:0; }
.pilihan-siswa__baris:hover{ background:var(--kertas); }
.pilihan-siswa__baris:has(input:checked){ background:rgba(47,77,208,.07); }

.baris--pisah{
  padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--garis);
}
.tumpuk--pisah{ padding-top:14px; border-top:1px solid var(--garis); }
.baris--info td{ padding-top:0; border-top:0; }
.baris--coret td{ opacity:.5; }
.baris--coret td:first-child{ text-decoration:line-through; }
.kartu--redup{ opacity:.62; }
.bidang--sempit{ max-width:170px; }
.lbl.centang{ display:flex; align-items:center; gap:7px; cursor:pointer; text-transform:none; }
.lbl.centang input{ margin:0; }

@media (max-width:900px){
  .linimasa{ flex-wrap:wrap; }
  .linimasa__pos{ flex:1 1 50%; border-bottom:1px solid var(--garis); }
  .pilihan-siswa__baris{ grid-template-columns:20px 1fr; }
  .pilihan-siswa__baris .kecil{ grid-column:2; }
  .bidang--sempit{ max-width:none; }
}

/* Bar pemakaian kuota pesan */
.kuota{ margin:2px 0 16px; }
.kuota__bar{
  height:10px; border-radius:99px; background:var(--garis); overflow:hidden;
}
.kuota__bar span{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--kobalt),var(--stempel));
}
.kuota__ket{ margin-top:7px; font-size:13px; color:var(--redup); }
.lencana{
  display:inline-block; padding:3px 9px; margin-left:5px; border-radius:99px;
  font-size:11px; font-weight:600; letter-spacing:.3px;
  background:#EEF1F6; color:var(--redup); vertical-align:middle;
}
.lencana--biru { background:var(--kobalt-mud); color:var(--kobalt); }
.lencana--merah{ background:var(--bad-mud);    color:var(--bad); }
.lencana--hijau{ background:var(--ok-mud);     color:var(--ok); }
.lencana--abu  { background:var(--garis);      color:var(--tinta); }

/* Kartu peringatan & isian yang tidak bisa diubah */
.kartu--awas{ border-color:var(--warn); background:var(--warn-mud); }
.kartu--awas .kartu__isi{ color:var(--warn); }
.isian--mati{ background:var(--kertas); color:var(--redup); }
.sidebar__kaki a + a{ margin-left:12px; }

/* Pilihan peran berganda */
.pilih-peran{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:8px; margin-top:8px;
}
.pilih-peran__item{
  display:flex; align-items:flex-start; gap:9px; padding:10px 12px;
  border:1px solid var(--garis); border-radius:8px; background:#fff; cursor:pointer;
}
.pilih-peran__item:hover{ background:var(--kertas); }
.pilih-peran__item:has(input:checked){
  border-color:var(--kobalt); background:var(--kobalt-mud);
}
.pilih-peran__item input{ margin-top:3px; }
.pilih-peran__item b{ display:block; font-size:13px; }
.pilih-peran__item .kecil{ display:block; line-height:1.35; margin-top:1px; }

/* Kalender akademik bulanan */
.kalender{
  display:grid; grid-template-columns:repeat(7,1fr); gap:1px;
  background:var(--garis); border:1px solid var(--garis); border-radius:8px; overflow:hidden;
}
.kalender__kepala{
  background:var(--tinta); color:#fff; padding:8px 6px; text-align:center;
  font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase;
}
.kalender__sel{ background:#fff; min-height:86px; padding:6px; }
.kalender__sel--kosong{ background:var(--kertas); }
.kalender__sel--pekan{ background:#FAFBFD; }
.kalender__sel--libur{ background:var(--bad-mud); }
.kalender__sel--ini{ box-shadow:inset 0 0 0 2px var(--kobalt); }
.kalender__tgl{ font-family:var(--mono); font-size:13px; font-weight:600; color:var(--tinta); }
.kalender__sel--libur .kalender__tgl{ color:var(--bad); }
.kalender__agenda{
  margin-top:4px; padding:2px 5px; border-radius:4px; font-size:10.5px; line-height:1.3;
  background:var(--kobalt-mud); color:var(--kobalt);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.kalender__agenda--libur{ background:var(--bad); color:#fff; }
@media (max-width:900px){
  .kalender__sel{ min-height:62px; padding:4px; }
  .kalender__agenda{ font-size:9px; }
}