/* ============================================================
   Absensi Guru MA Baiturrahman
   Palet: hijau pesantren + kuning emas, dasar kertas netral
   ============================================================ */

:root {
  --hijau: #14624f;
  --hijau-gelap: #0b3b30;
  --hijau-muda: #e4efe9;
  --emas: #b98b1d;
  --emas-muda: #fdf3dc;
  --kertas: #f4f6f4;
  --putih: #ffffff;
  --tinta: #17211e;
  --abu: #667771;
  --garis: #dde4e0;
  --merah: #b3261e;
  --merah-muda: #fbe9e7;
  --biru: #1d5a86;
  --biru-muda: #e6f0f7;
  --radius: 10px;
  --bayang: 0 1px 2px rgba(11, 59, 48, .08), 0 8px 24px -16px rgba(11, 59, 48, .35);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--kertas);
}

h1, h2, h3 { margin: 0 0 .35em; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 1rem; }
a { color: var(--hijau); }

/* ---------- Kerangka halaman ---------- */
.topbar {
  background: var(--hijau-gelap);
  color: #eaf3ef;
  padding: .7rem 1rem;
  display: flex;
  align-items: center;
  gap: .9rem;
  position: sticky;
  top: 0;
  z-index: 40;
}
.topbar .merek { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.topbar .logo {
  width: 34px; height: 34px; flex: none;
  border-radius: 8px;
  background: var(--emas);
  color: var(--hijau-gelap);
  display: grid; place-items: center;
  font-weight: 800; font-size: .95rem;
}
.topbar .judul { font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .sub { font-size: .72rem; color: #9fc0b4; }
.topbar .kanan { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.topbar .siapa { font-size: .8rem; text-align: right; line-height: 1.3; }
.topbar .siapa b { display: block; }
.topbar .siapa span { color: #9fc0b4; }
.topbar a.keluar {
  color: #eaf3ef; text-decoration: none; border: 1px solid #2c6f5c;
  padding: .35rem .7rem; border-radius: 8px; font-size: .82rem;
}
.topbar a.keluar:hover { background: #17564a; }

.menu {
  background: var(--hijau);
  display: flex;
  gap: .15rem;
  padding: 0 .5rem;
  overflow-x: auto;
  position: sticky; top: 50px; z-index: 39;
  -webkit-overflow-scrolling: touch;
}
.menu a {
  color: #d5e7e0; text-decoration: none; white-space: nowrap;
  padding: .7rem .85rem; font-size: .88rem; border-bottom: 3px solid transparent;
}
.menu a:hover { color: #fff; }
.menu a.aktif { color: #fff; border-bottom-color: var(--emas); font-weight: 600; }

.wadah { max-width: 1140px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.wadah-sempit { max-width: 680px; }

/* ---------- Kartu ---------- */
.kartu {
  background: var(--putih);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  box-shadow: var(--bayang);
  padding: 1.1rem;
  margin-bottom: 1rem;
}
.kartu-judul {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
  margin: -.15rem 0 .9rem;
}
.kartu-judul h2 { margin: 0; }

.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Angka ringkasan ---------- */
.statistik { background: var(--putih); border: 1px solid var(--garis); border-radius: var(--radius); padding: .9rem 1rem; }
.statistik .angka { font-size: 1.8rem; font-weight: 800; line-height: 1; color: var(--hijau-gelap); }
.statistik .nama { font-size: .8rem; color: var(--abu); margin-top: .3rem; }
.statistik.tekan-emas { border-left: 4px solid var(--emas); }
.statistik.tekan-hijau { border-left: 4px solid var(--hijau); }
.statistik.tekan-merah { border-left: 4px solid var(--merah); }
.statistik.tekan-biru { border-left: 4px solid var(--biru); }

/* ---------- Jam besar ---------- */
.jam-besar {
  background: linear-gradient(160deg, var(--hijau-gelap), var(--hijau));
  color: #fff; border-radius: var(--radius); padding: 1.4rem 1.1rem; text-align: center;
  border: 1px solid var(--hijau-gelap);
}
.jam-besar .waktu { font-size: 2.9rem; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.jam-besar .tanggal { color: #bcd9cd; font-size: .9rem; }

/* ---------- Tombol ---------- */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font: inherit; font-weight: 600; font-size: .9rem;
  padding: .6rem 1.1rem; border-radius: 8px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  background: var(--hijau); color: #fff;
}
.tombol:hover { background: var(--hijau-gelap); }
.tombol:disabled, .tombol[disabled] { opacity: .5; cursor: not-allowed; }
.tombol.garis { background: transparent; color: var(--hijau); border-color: var(--hijau); }
.tombol.garis:hover { background: var(--hijau-muda); }
.tombol.netral { background: #eef1ef; color: var(--tinta); border-color: var(--garis); }
.tombol.netral:hover { background: #e3e8e5; }
.tombol.emas { background: var(--emas); color: #2a1f05; }
.tombol.emas:hover { background: #a37916; }
.tombol.bahaya { background: var(--merah); }
.tombol.bahaya:hover { background: #8e1e17; }
.tombol.penuh { width: 100%; }
.tombol.besar { padding: .95rem 1.2rem; font-size: 1rem; }
.tombol.kecil { padding: .35rem .6rem; font-size: .78rem; }
:focus-visible { outline: 3px solid var(--emas); outline-offset: 2px; }

.aksi-baris { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- Form ---------- */
label.bidang { display: block; margin-bottom: .85rem; }
label.bidang > span { display: block; font-size: .82rem; color: var(--abu); margin-bottom: .3rem; font-weight: 600; }
input[type=text], input[type=password], input[type=date], input[type=time],
input[type=number], input[type=search], select, textarea {
  width: 100%; font: inherit; font-size: .92rem;
  padding: .58rem .7rem; border: 1px solid var(--garis); border-radius: 8px;
  background: var(--putih); color: var(--tinta);
}
input:focus, select:focus, textarea:focus { border-color: var(--hijau); outline: none; box-shadow: 0 0 0 3px rgba(20,98,79,.12); }
textarea { min-height: 80px; resize: vertical; }
.bantuan { font-size: .78rem; color: var(--abu); }

.saring { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.saring label.bidang { margin-bottom: 0; }
.saring select, .saring input { min-width: 140px; }

/* ---------- Tabel ---------- */
.tabel-gulir { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tabel { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.tabel th, table.tabel td { padding: .55rem .6rem; border-bottom: 1px solid var(--garis); text-align: left; vertical-align: middle; }
table.tabel thead th { background: var(--hijau-muda); color: var(--hijau-gelap); font-size: .78rem; font-weight: 700; white-space: nowrap; }
table.tabel tbody tr:hover { background: #f8faf9; }
table.tabel td.tengah, table.tabel th.tengah { text-align: center; }
table.tabel .nomor { color: var(--abu); width: 38px; }

table.rekap { font-size: .72rem; }
table.rekap th, table.rekap td { padding: .3rem .25rem; text-align: center; border: 1px solid var(--garis); }
table.rekap td.nama-guru, table.rekap th.nama-guru { text-align: left; white-space: nowrap; min-width: 160px; }
table.rekap td.akhir-pekan { background: #f1f3f2; color: #a9b4b0; }

/* Rekap jam masuk & pulang (dua baris per guru) */
.cetak-kepala { display: none; text-align: center; margin-bottom: .8rem; }
table.jam-rekap { font-size: .68rem; }
table.jam-rekap td, table.jam-rekap th { padding: .22rem .2rem; white-space: nowrap; }
table.jam-rekap th.jam-label, table.jam-rekap td.jam-label { min-width: 46px; }
table.jam-rekap td.nama-guru { border-bottom: none; }
table.jam-rekap tr.baris-atas td { border-bottom: none; }
table.jam-rekap tr.baris-bawah td.nomor, table.jam-rekap tr.baris-bawah td.nama-guru { display: none; }
table.jam-rekap tr.baris-bawah { border-bottom: 2px solid var(--garis); }
table.jam-rekap td.jam-label.masuk { color: var(--hijau-gelap); font-weight: 700; text-align: left; }
table.jam-rekap td.jam-label.pulang { color: var(--merah, #b3261e); font-weight: 700; text-align: left; }
table.jam-rekap tbody tr:nth-of-type(4n+1) td,
table.jam-rekap tbody tr:nth-of-type(4n+2) td { background: #fafcfb; }

/* ---------- Badge status ---------- */
.badge {
  display: inline-block; padding: .18rem .5rem; border-radius: 999px;
  font-size: .74rem; font-weight: 700; white-space: nowrap;
}
.badge.hadir { background: var(--hijau-muda); color: var(--hijau-gelap); }
.badge.terlambat { background: var(--emas-muda); color: #7a5b0d; }
.badge.izin, .badge.cuti, .badge.dinas { background: var(--biru-muda); color: var(--biru); }
.badge.sakit { background: #f3ecf9; color: #6a3b9a; }
.badge.alpha { background: var(--merah-muda); color: var(--merah); }
.badge.netral { background: #eef1ef; color: var(--abu); }

/* ---------- Pemberitahuan ---------- */
.pesan { padding: .7rem .9rem; border-radius: 8px; margin-bottom: 1rem; font-size: .9rem; border: 1px solid; }
.pesan.sukses { background: var(--hijau-muda); border-color: #bcd8cc; color: var(--hijau-gelap); }
.pesan.gagal { background: var(--merah-muda); border-color: #f0c5c1; color: var(--merah); }
.pesan.info { background: var(--biru-muda); border-color: #c3dbeb; color: var(--biru); }

.kosong { text-align: center; padding: 2.2rem 1rem; color: var(--abu); }
.kosong b { display: block; color: var(--tinta); margin-bottom: .25rem; }

/* ---------- Kamera ---------- */
.kamera-bingkai {
  position: relative; background: #0d1512; border-radius: var(--radius);
  overflow: hidden; aspect-ratio: 3 / 4; max-height: 60vh; margin: 0 auto;
  display: grid; place-items: center;
}
.kamera-bingkai video, .kamera-bingkai img.pratinjau {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.kamera-bingkai .petunjuk { position: absolute; inset: auto 0 0 0; padding: .5rem; text-align: center;
  color: #d8e6e0; font-size: .8rem; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.kamera-mati { color: #8aa79c; font-size: .9rem; padding: 2rem 1rem; text-align: center; }

.absen-kotak { display: grid; gap: .75rem; }
.absen-info { display: flex; justify-content: space-between; gap: .75rem; }
.absen-info div { flex: 1; background: var(--putih); border: 1px solid var(--garis); border-radius: 8px; padding: .65rem; text-align: center; }
.absen-info .label { font-size: .75rem; color: var(--abu); }
.absen-info .isi { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.foto-kecil { width: 46px; height: 46px; object-fit: cover; border-radius: 6px; border: 1px solid var(--garis); }

/* ---------- Login ---------- */
.login-layar {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}

/* Panel kiri: latar dekoratif dengan nama madrasah */
.login-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, #0b3b30 0%, #14624f 55%, #1c7761 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2.5rem;
}
.login-hero-pola {
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(244,215,140,.14) 0, transparent 42%),
    radial-gradient(circle at 85% 75%, rgba(244,215,140,.10) 0, transparent 40%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 26px);
}
.login-hero-isi { position: relative; z-index: 1; max-width: 420px; text-align: center; }
.login-hero-ikon { width: 150px; height: auto; margin: 0 auto 1.4rem; display: block; filter: drop-shadow(0 12px 24px rgba(0,0,0,.25)); }
.login-hero-logo { width: 96px; height: 96px; object-fit: contain; background: #fff; border-radius: 18px; padding: .5rem; margin: 0 auto 1.4rem; display: block; box-shadow: 0 12px 24px rgba(0,0,0,.25); }
.login-hero-nama { font-size: 1.7rem; letter-spacing: .01em; margin-bottom: .5rem; }
.login-hero-tagline { color: #c9e3d8; font-size: .95rem; margin-bottom: 1.6rem; }
.login-hero-poin { list-style: none; margin: 0; padding: 0; text-align: left; display: inline-grid; gap: .7rem; }
.login-hero-poin li {
  position: relative; padding-left: 1.6rem; font-size: .88rem; color: #e4f2ec;
}
.login-hero-poin li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--emas); color: #2a1f05; font-size: .7rem; font-weight: 800;
  display: grid; place-items: center;
}

/* Panel kanan: form login */
.login-panel { display: grid; place-items: center; padding: 1.5rem; background: var(--kertas); }
.login-kotak { width: 100%; max-width: 380px; background: var(--putih); border-radius: 14px; padding: 1.6rem; box-shadow: 0 20px 60px -30px rgba(11,59,48,.35); border: 1px solid var(--garis); }
.login-kepala { text-align: center; margin-bottom: 1.2rem; }
.login-kepala .lambang { width: 56px; height: 56px; margin: 0 auto .6rem; border-radius: 14px; background: var(--emas); color: var(--hijau-gelap); display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; }
.login-kepala h1 { font-size: 1.15rem; }
.login-kepala p { color: var(--abu); font-size: .85rem; margin: 0; }

@media (max-width: 900px) {
  .login-layar { grid-template-columns: 1fr; }
  .login-hero { padding: 2.4rem 1.5rem 2rem; }
  .login-hero-ikon { width: 110px; }
  .login-hero-poin { display: none; }
  .login-panel { padding: 1.25rem 1rem 2.5rem; }
}

/* ---------- Responsif ---------- */
@media (max-width: 820px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .topbar .siapa { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Cetak ---------- */
@media print {
  @page { size: landscape; margin: 8mm; }
  .topbar, .menu, .aksi-baris, .saring, .tanpa-cetak { display: none !important; }
  body { background: #fff; font-size: 11px; }
  .kartu { box-shadow: none; border: none; padding: 0; }
  table.rekap th, table.rekap td { border: 1px solid #999; }
  .cetak-kepala { display: block; }
  table.jam-rekap { font-size: 6.5px; }
  table.jam-rekap td, table.jam-rekap th { padding: 1px 2px; }
  .tabel-gulir { overflow: visible; }
}