:root{
  --green-dark:#0f5132;
  --green-primary:#116836;
  --green-accent:#15803d;
  --green-soft:#e6f4ea;
  --blue-soft:#e8eefc;
  --orange-soft:#fef3e0;
  --purple-soft:#f1ecfb;
  --red-soft:#fdeaea;
  --teal-soft:#e2f6f5;
  --text-dark:#1f2937;
  --text-muted:#6b7280;
  --border-color:#e7e9ee;
  --bg-page:#f6f7f9;
}
*{box-sizing:border-box;}
body{
  font-family:'Segoe UI',Roboto,-apple-system,BlinkMacSystemFont,sans-serif;
  background:#e2e5ea;
  color:var(--text-dark);
  margin:0;
  padding:22px;
  min-height:100vh;
}
a{text-decoration:none;}

/* ---------- Material Icons ---------- */
.material-icons{
  font-family:'Material Icons';
  font-weight:normal;
  font-style:normal;
  display:inline-block;
  line-height:1;
  text-transform:none;
  letter-spacing:normal;
  word-wrap:normal;
  white-space:nowrap;
  direction:ltr;
  -webkit-font-smoothing:antialiased;
  vertical-align:middle;
}
.btn .material-icons,.btn-menu .material-icons{font-size:18px;}

/* ---------- Layout ---------- */
.app-wrapper{
  display:flex;
  min-height:calc(100vh - 44px);
  max-width:1440px;
  margin:0 auto;
  background:var(--bg-page);
  border-radius:20px;
  box-shadow:0 12px 36px rgba(15,23,42,.10);
}
.sidebar{
  border-top-left-radius:20px;
  border-bottom-left-radius:20px;
  width:270px;
  background:#fff;
  border-right:1px solid var(--border-color);
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  transition:margin-left .25s ease;
}
.sidebar-brand{
  background:var(--green-primary);
  color:#fff;
  padding:22px 20px;
  display:flex;
  align-items:center;
  gap:12px;
  border-top-left-radius:20px;
}
.sidebar-brand .icon-box{
  width:42px;height:42px;background:rgba(255,255,255,.15);
  border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
}
.sidebar-brand h1{font-size:17px;margin:0;font-weight:700;}
.sidebar-brand p{font-size:12px;margin:2px 0 0;opacity:.85;}

.sidebar-nav{flex:1;padding:16px 12px;overflow-y:auto;}
/* Judul pembatas kelompok menu. Garis tipis di atas memisahkan dari kelompok
   sebelumnya; yang pertama tidak perlu garis maupun jarak atas berlebih. */
.sidebar-nav .nav-section{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:#9ca3af;padding:8px 14px 4px;margin-top:12px;
  border-top:1px solid var(--border-color);
}
.sidebar-nav .nav-section:first-child{margin-top:0;border-top:none;}
.sidebar-nav a{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:10px;
  color:#374151;font-size:14.5px;font-weight:500;
  margin-bottom:4px;
}
.sidebar-nav a .nav-icon{font-size:18px;width:22px;text-align:center;}
.sidebar-nav a:hover{background:#f3f4f6;}
.sidebar-nav a.active{background:var(--green-soft);color:var(--green-primary);font-weight:700;}

.sidebar-user{
  border-top:1px solid var(--border-color);
  padding:14px 16px;display:flex;align-items:center;gap:10px;position:relative;
}
.avatar-circle{
  width:40px;height:40px;border-radius:50%;
  background:var(--green-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;flex-shrink:0;
  overflow:hidden;
}
.avatar-circle img{width:100%;height:100%;object-fit:cover;display:block;}
.avatar-upload{position:relative;display:inline-block;}
.avatar-upload .avatar-circle{width:84px;height:84px;font-size:26px;}
.avatar-upload input[type=file]{display:none;}
.avatar-upload label.avatar-edit-btn{
  position:absolute;bottom:-2px;right:-2px;
  width:30px;height:30px;border-radius:50%;
  background:var(--green-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:3px solid #fff;
}
.avatar-upload label.avatar-edit-btn .material-icons{font-size:15px;}
.avatar-filename{font-size:12.5px;color:var(--text-muted);margin-top:8px;}
.sidebar-user .user-info{flex:1;min-width:0;}
.sidebar-user .user-info strong{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-user .user-info span{font-size:12px;color:var(--text-muted);}
.user-menu{
  display:none;position:absolute;bottom:60px;left:12px;right:12px;
  background:#fff;border:1px solid var(--border-color);border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);overflow:hidden;z-index:20;
}
.user-menu.show{display:block;}
.user-menu a{display:block;padding:10px 14px;font-size:13.5px;color:#374151;}
.user-menu a:hover{background:#f3f4f6;}
.user-menu a.text-danger{color:#dc2626;}
/* Tombol Keluar dikirim lewat POST, tetapi tampil persis seperti tautan di
   atasnya — pengamanan tidak seharusnya mengubah apa yang dilihat guru. */
.menu-keluar{
  display:block;width:100%;text-align:left;padding:10px 14px;font-size:13.5px;
  background:none;border:none;cursor:pointer;font-family:inherit;color:#dc2626;
}
.menu-keluar:hover{background:#f3f4f6;}

/* ---------- Topbar ---------- */
.main-content{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{
  background:#fff;border-bottom:1px solid var(--border-color);
  padding:16px 28px;display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:10;
  border-top-right-radius:20px;
}
.topbar .hamburger{
  border:none;background:none;font-size:20px;cursor:pointer;color:#374151;
  display:none;
  /* Target sentuh 40x40 saat tampil di mobile */
  width:40px;height:40px;border-radius:10px;
  align-items:center;justify-content:center;flex-shrink:0;
}
.topbar .hamburger:hover{background:var(--green-soft);}
.topbar-right{display:flex;align-items:center;gap:22px;}
/* Ukuran minimal 40px agar nyaman disentuh di layar sentuh (ikonnya sendiri
   hanya ~24px, terlalu kecil sebagai target jari). */
.bell-wrap{
  position:relative;color:#374151;font-size:19px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:10px;flex-shrink:0;
}
.bell-wrap:hover,.bell-wrap:focus-visible{background:var(--green-soft);color:var(--green-primary);}
/* Saat ada yang belum dibaca, loncengnya sendiri ikut menonjol — tidak hanya
   angka kecil di sudut, yang mudah terlewat. */
.bell-wrap.ada{color:var(--green-primary);}
.bell-badge{
  position:absolute;top:2px;right:2px;background:#dc2626;color:#fff;
  font-size:10px;line-height:1;min-width:17px;height:17px;border-radius:9px;font-weight:700;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
  /* Cincin putih memisahkan lencana dari ikon di belakangnya. */
  box-shadow:0 0 0 2px #fff;
}

/* Periode aktif di topbar. Tampil sebagai TOMBOL hanya untuk admin, karena
   hanya admin yang dapat mengelolanya; peran lain mendapat teks biasa supaya
   tidak tampak dapat diklik padahal tidak. */
/* Periode aktif di topbar — KETERANGAN, bukan kendali.
   Tanpa bingkai dan tanpa efek hover: apa pun yang berbingkai kotak di topbar
   akan dicoba diklik, dan yang ini tidak ke mana-mana. */
.ta-info{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13.5px;font-weight:600;color:var(--text-dark);white-space:nowrap;
  background:var(--green-soft);border-radius:20px;padding:6px 13px;
}
.ta-info .material-icons{font-size:16px;color:var(--green-primary);}
/* Belum diatur: kuning, karena seluruh angka di aplikasi bergantung padanya. */
.ta-info.ta-kosong{background:var(--orange-soft);color:#92400e;}
.ta-info.ta-kosong .material-icons{color:#d97706;}
@media (max-width:640px){
  /* Di ponsel topbar sempit; ikonnya cukup, labelnya turun ke judul halaman. */
  .ta-info .ta-text{display:none;}
  .ta-info{padding:6px 9px;}
}

.page-body{padding:28px;flex:1;}
.page-title{font-size:26px;font-weight:700;margin:0 0 4px;}
.page-subtitle{color:var(--text-muted);margin:0 0 24px;font-size:14.5px;}

/* ---------- Stat cards ---------- */
.stats-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;margin-bottom:22px;
}
.stat-card{
  background:#fff;border:1px solid var(--border-color);border-radius:14px;
  padding:20px;display:flex;flex-direction:column;gap:10px;
}
.stat-card .icon-circle{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;}
.stat-card .stat-label{color:var(--text-muted);font-size:13.5px;font-weight:600;}
.stat-card .stat-value{font-size:30px;font-weight:800;line-height:1;}
.stat-card .stat-link{font-size:13px;font-weight:600;color:var(--green-primary);}
/* Varian untuk halaman yang jumlah kartunya PASTI empat (mis. Inventaris).
   auto-fit bawaan menyisakan satu kartu sendirian di baris kedua pada lebar
   layar yang umum; di sini pembagiannya dikunci 4 / 2 / 1 agar selalu genap. */
/* Bar persentase kehadiran pada dashboard kepsek. */
.bar-hadir{display:block;height:7px;border-radius:4px;background:var(--border-color);overflow:hidden;margin-bottom:3px;}
.bar-hadir span{display:block;height:100%;border-radius:4px;}

.stats-grid.empat{grid-template-columns:repeat(4,1fr);}
@media (max-width:1180px){ .stats-grid.empat{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .stats-grid.empat{grid-template-columns:1fr;} }

.bg-green{background:var(--green-soft);color:var(--green-primary);}
.bg-blue{background:var(--blue-soft);color:#3b5bdb;}
.bg-orange{background:var(--orange-soft);color:#d97706;}
.bg-purple{background:var(--purple-soft);color:#7c3aed;}
.bg-red{background:var(--red-soft);color:#dc2626;}
.bg-teal{background:var(--teal-soft);color:#0d9488;}

/* ---------- Menu cards (dashboard shortcuts) ---------- */
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;}
.menu-card{
  background:#fff;border:1px solid var(--border-color);border-radius:14px;
  padding:26px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;
}
.menu-card .icon-circle{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:14px;}
.menu-card h3{margin:0 0 8px;font-size:16.5px;}
.menu-card p{color:var(--text-muted);font-size:13.5px;margin:0 0 18px;line-height:1.5;}
.btn-menu{
  border:none;padding:9px 22px;border-radius:8px;font-weight:600;font-size:13.5px;cursor:pointer;margin-top:auto;
}
.btn-menu.green{background:var(--green-soft);color:var(--green-primary);}
.btn-menu.blue{background:var(--blue-soft);color:#3b5bdb;}
.btn-menu.orange{background:var(--orange-soft);color:#d97706;}
.btn-menu.purple{background:var(--purple-soft);color:#7c3aed;}
.btn-menu.red{background:var(--red-soft);color:#dc2626;}
.btn-menu.teal{background:var(--teal-soft);color:#0d9488;}
.btn-menu:hover{filter:brightness(0.95);}

/* ---------- Generic cards / tables ---------- */
.card-box{background:#fff;border:1px solid var(--border-color);border-radius:14px;padding:22px;margin-bottom:22px;}
.card-box h2{font-size:17px;margin:0 0 16px;}
/* Tabel lebar bisa digeser ke samping. Bayangan tipis di tepi kiri/kanan
   muncul OTOMATIS hanya bila masih ada isi tersembunyi ke arah itu, sebagai
   isyarat bagi pengguna mobile bahwa tabel dapat digeser. */
.table-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:
    linear-gradient(to right,#fff 35%,rgba(255,255,255,0)) left center,
    linear-gradient(to left,#fff 35%,rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%,rgba(15,23,42,.14),rgba(15,23,42,0)) left center,
    radial-gradient(farthest-side at 100% 50%,rgba(15,23,42,.14),rgba(15,23,42,0)) right center;
  background-repeat:no-repeat;
  background-size:34px 100%,34px 100%,13px 100%,13px 100%;
  background-attachment:local,local,scroll,scroll;
}
table.data-table{width:100%;border-collapse:collapse;font-size:14px;}
table.data-table th{
  text-align:left;padding:11px 14px;background:#f9fafb;color:var(--text-muted);
  font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;
  border-bottom:1px solid var(--border-color);white-space:nowrap;
}
table.data-table td{padding:12px 14px;border-bottom:1px solid var(--border-color);vertical-align:middle;}
table.data-table tr:last-child td{border-bottom:none;}
table.data-table tr:hover td{background:#fafbfc;}

.badge{display:inline-block;padding:4px 11px;border-radius:20px;font-size:12px;font-weight:700;}
.badge-hadir,.badge-aktif,.badge-sangat-baik{background:var(--green-soft);color:var(--green-primary);}
.badge-izin,.badge-baik{background:var(--orange-soft);color:#d97706;}
.badge-sakit{background:var(--red-soft);color:#dc2626;}
.badge-alpa{background:#1f2937;color:#fff;}
.badge-admin{background:var(--purple-soft);color:#7c3aed;}
.badge-guru{background:var(--blue-soft);color:#3b5bdb;}
.badge-kepsek{background:var(--orange-soft);color:#d97706;}
.badge-scanner{background:var(--teal-soft);color:#0d9488;}
.badge-siswa{background:#eef2ff;color:#4f46e5;}

/* ---------- ID Card siswa (dipakai untuk unduh PNG via html2canvas) ---------- */
.idcard-stage{position:fixed;left:-10000px;top:0;z-index:-1;}
.idcard{position:relative;width:340px;height:540px;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 16px 40px rgba(15,23,42,.28);font-family:'Segoe UI',Arial,sans-serif;color:#1f2937;}
.idcard .idc-deco{position:absolute;border-radius:50%;z-index:0;}
.idcard .idc-deco.d1{width:240px;height:240px;background:#d9f0e2;top:130px;left:-120px;}
.idcard .idc-deco.d2{width:180px;height:180px;background:#eaf6ef;bottom:-70px;right:-60px;}
.idcard .idc-deco.d3{width:120px;height:120px;background:#cdead9;bottom:40px;left:-60px;}
.idcard .idc-head{position:relative;z-index:2;text-align:center;color:#fff;padding:14px 18px 26px;background:linear-gradient(140deg,#15803d 0%,#116836 55%,#0f5132 100%);clip-path:ellipse(150% 100% at 50% 0%);}
.idcard .idc-clip{width:60px;height:7px;border-radius:6px;background:rgba(255,255,255,.55);margin:0 auto 10px;}
.idcard .idc-crest{width:48px;height:48px;border-radius:50%;background:#fff;margin:0 auto 7px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.18);overflow:hidden;}
.idcard .idc-crest img{width:100%;height:100%;object-fit:contain;border-radius:50%;}
.idcard .idc-school{font-size:13px;font-weight:800;line-height:1.2;text-transform:uppercase;letter-spacing:.3px;}
.idcard .idc-title{font-size:14px;font-weight:800;letter-spacing:2px;margin-top:8px;}
.idcard .idc-body{position:relative;z-index:2;text-align:center;padding:0 20px 18px;margin-top:-16px;}
.idcard .idc-photo{width:118px;height:118px;margin:0 auto;border-radius:14px;overflow:hidden;border:3px solid #fff;box-shadow:0 5px 14px rgba(15,23,42,.22);background:#116836;display:flex;align-items:center;justify-content:center;}
.idcard .idc-photo img{width:100%;height:100%;object-fit:cover;}
.idcard .idc-photo .ini{color:#fff;font-size:38px;font-weight:800;}
.idcard .idc-nama{font-size:20px;font-weight:800;color:#0f5132;margin-top:10px;line-height:1.15;letter-spacing:.3px;}
.idcard .idc-info{font-size:13px;font-weight:700;color:#374151;margin-top:5px;}
.idcard .idc-info span{color:#6b7280;font-weight:600;}
.idcard .idc-qr{width:132px;height:132px;margin:10px auto 0;}
.idcard .idc-qr img{width:100%;height:100%;display:block;}
/* Kode Kelas: dipakai siswa untuk masuk, jadi harus terbaca sekali lihat dan
   tidak tertukar antara 0/O atau 1/l — karena itu memakai huruf monospace. */
.idcard .idc-kode{
  margin:9px auto 0;padding:5px 12px;background:#e6f4ea;border-radius:7px;display:inline-block;
}
.idcard .idc-kode span{
  display:block;font-size:7.5px;font-weight:700;letter-spacing:1.6px;color:#4b7c5c;
}
.idcard .idc-kode b{
  display:block;font-size:14px;font-weight:800;letter-spacing:1.2px;color:#0f5132;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;margin-top:1px;
}
.idcard .idc-verif{font-size:9px;font-weight:700;letter-spacing:1.4px;color:#94a3b8;margin-top:7px;text-transform:uppercase;}

/* ---------- Tombol cepat (dashboard siswa) ---------- */
.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:22px;}
.quick-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--border-color);border-radius:14px;padding:16px 18px;box-shadow:0 3px 10px rgba(15,23,42,.05);text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s;}
.quick-card:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(15,23,42,.12);border-color:var(--green-accent);}
.quick-card > .material-icons{font-size:28px;color:#fff;background:var(--green-primary);border-radius:12px;padding:10px;}
.quick-card strong{display:block;color:var(--text-dark);font-size:15px;}
.quick-card small{color:var(--text-muted);font-size:12.5px;}

/* ---------- Pengajuan Izin ---------- */
.izin-list{display:flex;flex-direction:column;gap:2px;max-height:300px;overflow-y:auto;}
.izin-item{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:10px 2px;border-bottom:1px solid var(--border-color);}
.izin-item:last-child{border-bottom:none;}
.izin-main{display:flex;flex-direction:column;gap:2px;min-width:0;}
.izin-main strong{font-size:13.5px;}
.izin-main small{font-size:12px;color:var(--text-muted);}
.izin-main .izin-note{color:var(--green-primary);}

/* ---------- Kartu Siswa (portal siswa) ---------- */
.kartu-identitas{display:flex;flex-direction:column;gap:16px;}
.kartu-head{display:flex;align-items:center;gap:14px;}
.kartu-qr{text-align:center;}
.kartu-absen{display:flex;flex-direction:column;gap:10px;}
.kartu-absen > div{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid var(--border-color);padding-bottom:8px;}
.kartu-absen > div:last-child{border-bottom:none;padding-bottom:0;}
.kartu-absen .lbl{color:var(--text-muted);font-size:13px;}
.badge-muted{background:#f3f4f6;color:#6b7280;}

/* ---------- Dashboard guru: kelas mini card ---------- */
.dash-top-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;margin-bottom:22px;}
.dash-top-grid .card-box{margin-bottom:0;}
.dash-right-stack{display:flex;flex-direction:column;gap:22px;}
/* Anak grid/flex bawaannya min-width:auto, sehingga menolak menyusut di bawah
   lebar konten terpanjangnya dan membuat halaman meluber di layar sempit. */
.dash-top-grid > *,.dash-right-stack > *{min-width:0;}
.timeline-content{min-width:0;overflow-wrap:anywhere;}
@media (max-width:900px){.dash-top-grid{grid-template-columns:1fr;}}

/* Kartu kelas yang diwalikan di Dashboard — pengganti halaman /kelas.
   Melebar sendiri mengikuti jumlah rombel, tanpa breakpoint tersendiri.

   auto-FIT, bukan auto-fill. auto-fill tetap membuat tiga jalur meski hanya ada
   satu kartu, sehingga wali kelas dengan satu rombel — keadaan yang paling lazim
   di SD — melihat satu kartu menyendiri dengan dua pertiga baris kosong di
   kanannya. auto-fit meruntuhkan jalur yang tak terpakai.

   Batas atasnya 340px, bukan 1fr: tanpa itu satu kartu melar selebar halaman
   untuk memuat tiga angka, dan yang tampak justru kartu yang kehilangan isinya. */
.dash-kelas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,340px));
                 justify-content:start;gap:18px;margin-bottom:22px;}
.dash-kelas-card{margin-bottom:0;display:flex;flex-direction:column;gap:12px;}
.dash-kelas-head{display:flex;align-items:flex-start;gap:11px;}
.dash-kelas-head .material-icons{color:var(--primary);font-size:26px;}
.dash-kelas-head strong{display:block;font-size:15.5px;}
.dash-kelas-head small{color:var(--text-muted);font-size:12.5px;}
.dash-kelas-angka{display:flex;align-items:baseline;gap:7px;}
.dash-kelas-angka .angka{font-size:30px;font-weight:700;line-height:1;color:var(--primary);}
.dash-kelas-angka .label{color:var(--text-muted);font-size:13px;}
.dash-kelas-kode{font-size:12.5px;color:var(--text-muted);padding:8px 11px;
                 background:var(--bg-soft,#f6f8fb);border-radius:9px;overflow-wrap:anywhere;}
.dash-kelas-card .btn{align-self:flex-start;margin-top:auto;}

.kelas-mini-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;}
.kelas-mini-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--border-color);border-radius:12px;background:#fff;transition:border-color .15s,background .15s;}
.kelas-mini-card:hover{border-color:var(--green-accent);background:var(--green-soft);}
.kelas-mini-card strong{display:block;font-size:14.5px;color:var(--text-dark);}
.kelas-mini-card span{font-size:12.5px;color:var(--text-muted);}

/* ---------- Dashboard guru: grafik kehadiran ---------- */
.chart-grid-2col{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:center;}
@media (max-width:800px){.chart-grid-2col{grid-template-columns:1fr;}}

/* ---------- Dashboard guru: timeline jadwal hari ini ---------- */
.timeline-item{display:flex;gap:14px;}
.timeline-time{width:60px;flex-shrink:0;text-align:right;font-size:13px;font-weight:700;color:#374151;padding-top:2px;}
.timeline-time small{display:block;font-weight:400;color:var(--text-muted);font-size:11px;}
.timeline-line{display:flex;flex-direction:column;align-items:center;width:14px;flex-shrink:0;}
.timeline-dot{width:12px;height:12px;border-radius:50%;background:var(--green-primary);border:3px solid var(--green-soft);flex-shrink:0;}
.timeline-connector{flex:1;width:2px;background:var(--border-color);margin:2px 0;min-height:24px;}
.timeline-content{flex:1;background:#f9fafb;border-radius:10px;padding:12px 16px;margin-bottom:14px;}
.timeline-content strong{display:block;font-size:14.5px;margin-bottom:2px;}
.timeline-content span{font-size:12.5px;color:var(--text-muted);}

/* ---------- Status select (styled like a colored pill dropdown) ---------- */
.status-select{
  border:none;border-radius:20px;padding:7px 16px;font-size:13px;font-weight:700;cursor:pointer;
  background-color:#f3f4f6;color:#374151;min-width:110px;
}
.status-select:disabled{cursor:not-allowed;opacity:.7;}
.status-select.status-hadir{background-color:var(--green-soft);color:var(--green-primary);}
.status-select.status-izin{background-color:var(--orange-soft);color:#d97706;}
.status-select.status-sakit{background-color:var(--red-soft);color:#dc2626;}
.status-select.status-alpa{background-color:#e5e7eb;color:#1f2937;}

/* ---------- Two column layout (main content + sidebar) ---------- */
.two-col-layout{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start;}
@media (max-width:900px){.two-col-layout{grid-template-columns:1fr;}}

/* ---------- Filter row with label-above-input fields ---------- */
.filter-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;justify-content:space-between;margin-bottom:20px;}
.filter-fields{display:flex;flex-wrap:wrap;gap:16px;}
.filter-field{display:flex;flex-direction:column;gap:6px;}
.filter-field label{font-size:12.5px;font-weight:600;color:var(--text-muted);margin:0;}
.filter-field select,.filter-field input{min-width:170px;}

/* ---------- Rekap Kehadiran: daftar bertumpuk (Kartu Siswa) ---------- */
.rekap-list{display:flex;flex-direction:column;gap:10px;}
.rekap-row{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:10px;background:#f9fafb;}
.rekap-row .rekap-label{font-size:13.5px;font-weight:600;color:#374151;}
.rekap-row .rekap-count{font-weight:800;font-size:14px;padding:3px 13px;border-radius:20px;}

/* ---------- Daftar hasil Periksa Kesiapan Server ----------
   Dipakai menggantikan tabel: isi terpentingnya kalimat penjelasan, dan kalimat
   panjang di dalam sel tabel berujung pada kolom sempit yang memecah tiap kata
   ke barisnya sendiri. Susunan ini memberi penjelasan selebar kartu dan bekerja
   apa adanya di ponsel. */
.siap-list{display:flex;flex-direction:column;gap:10px;}
.siap-item{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;
           background:#fbfcfd;border:1px solid var(--border-color);
           border-left-width:3px;border-radius:10px;}
.siap-ikon{font-size:20px;border-radius:8px;padding:6px;flex-shrink:0;}
.siap-isi{min-width:0;flex:1;}
.siap-judul{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;}
.siap-judul strong{font-size:14.5px;color:var(--text-dark);}
.siap-judul code{font-size:12.5px;background:#eef0f3;padding:2px 8px;border-radius:6px;
                 color:var(--text-dark);word-break:break-word;}
.siap-arti{margin:5px 0 0;font-size:13px;line-height:1.55;color:var(--text-muted);}

/* ---------- Tab penyaring & kotak cari (Penempatan Siswa) ----------
   Tab dipakai untuk memindah CAKUPAN daftar, bukan menyembunyikan isinya:
   tiap tab membawa angkanya sendiri supaya admin tahu ada isi di tab sebelah
   tanpa harus membukanya satu per satu. Tab kosong pun tetap tampil — "Lulus 0"
   memberi tahu lebih banyak daripada tab yang menghilang. */
.tab-pils{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.tab-pil{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
         border:1px solid var(--border-color);background:#fff;color:var(--text-muted);
         font-size:13.5px;font-weight:600;text-decoration:none;transition:all .15s;}
.tab-pil:hover{border-color:var(--green-primary);color:var(--text-dark);}
.tab-pil.active{background:var(--green-soft);border-color:var(--green-primary);color:var(--green-primary);}
.tab-jml{background:rgba(15,23,42,.07);border-radius:999px;padding:1px 8px;font-size:12px;font-weight:800;}
.tab-pil.active .tab-jml{background:#fff;}

.arsip-cari{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.arsip-cari input[type=text]{flex:1 1 240px;min-width:0;}

/* ---------- Rekap Kehadiran: satu kartu per status (Absensi) ----------
   Memakai kartu .scan-stat apa adanya (lihat Scanner) — satu bentuk kartu
   statistik untuk seluruh aplikasi, bukan dua yang mirip tapi tak sama.

   Yang diatur di sini hanya dua hal. Pertama, jumlah kolomnya: .scan-stats
   memakai auto-fit yang pas untuk TIGA kartu, tetapi lima kartu membungkus jadi
   4+1 pada rentang lebar yang umum — satu kartu sendirian di baris kedua,
   terbaca seperti kekeliruan. Dengan 2/3/5 kolom pembungkusannya selalu
   berpasangan.

   Kedua, warna ikonnya. Bawaan .scan-stat selalu hijau; di sini hijau berarti
   "hadir", jadi ikon Alpa yang ikut hijau akan membantah angkanya sendiri.
   Warnanya mengikuti lencana yang sudah dipakai di seluruh aplikasi.

   Kelas .scan-stat ikut ditulis pada pemilih warna, bukan .stat-izin sendirian:
   keduanya berspesifisitas sama, dan aturan .scan-stat berada lebih bawah di
   berkas ini — tanpa itu warnanya kalah urutan dan seluruh ikon tetap hijau. */
.rekap-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (min-width:560px){.rekap-stats{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (min-width:1280px){.rekap-stats{grid-template-columns:repeat(5,minmax(0,1fr));}}
.scan-stat.stat-izin  > .material-icons{color:#d97706;background:var(--orange-soft);}
.scan-stat.stat-sakit > .material-icons{color:#dc2626;background:var(--red-soft);}
.scan-stat.stat-alpa  > .material-icons{color:#1f2937;background:#e5e7eb;}
.scan-stat.stat-belum > .material-icons{color:#6b7280;background:#eef0f3;}

/* ---------- Dashboard wali kelas ---------- */
/* Baris kelas yang diwalikan: satu baris ringkas selebar halaman, menggantikan
   kartu 340px yang menyisakan lajur putih di kanannya saat guru hanya memegang
   satu rombel — dan itu keadaan yang lazim. */
.wali-kelas-bar{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;}
.wali-kelas-item{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--border-color);border-radius:12px;padding:13px 16px;
}
.wali-kelas-item > .material-icons{
  font-size:20px;color:var(--green-primary);background:var(--green-soft);
  border-radius:9px;padding:8px;flex-shrink:0;
}
.wali-kelas-item .wk-teks{min-width:0;flex:1 1 200px;}
.wali-kelas-item .wk-teks strong{display:block;font-size:14.5px;}
.wali-kelas-item .wk-teks small{color:var(--text-muted);font-size:12.5px;}
.wali-kelas-item .wk-aksi{display:flex;gap:8px;flex-wrap:wrap;}

/* Daftar siswa tidak hadir hari ini — namanya, bukan angkanya. */
.absen-list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;}
.absen-list li{
  display:flex;align-items:center;gap:11px;
  padding:9px 0;border-bottom:1px solid var(--border-color);
}
.absen-list li:last-child{border-bottom:none;padding-bottom:0;}
.absen-list .badge{flex-shrink:0;min-width:52px;text-align:center;}
.absen-list .al-teks{min-width:0;}
.absen-list .al-teks strong{display:block;font-size:13.5px;line-height:1.3;}
.absen-list .al-teks small{color:var(--text-muted);font-size:12px;}

/* ---------- Jadwal Pelajaran (dipakai guru, kepsek & siswa) ----------
   Satu susunan untuk tiga halaman; markup-nya di app/views/jadwal/_kartu.php.
   minmax(280px,1fr): enam hari mengalir 3-3 di layar lebar, 2-2 di tablet,
   dan menumpuk di ponsel — tanpa satu pun media query. */
.jadwal-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:20px;align-items:start;
}
.jadwal-hari{
  background:#fff;border:1px solid var(--border-color);border-radius:13px;
  overflow:hidden;box-shadow:0 2px 8px rgba(15,23,42,.05);
}
/* Hari ini disorot — satu-satunya kartu yang menuntut perhatian sekarang. */
.jadwal-hari.kini{border-color:var(--green-primary);box-shadow:0 4px 14px rgba(17,104,54,.14);}
.jadwal-hari.kosong{background:#fbfcfd;}

.jh-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border-color);}
.jadwal-hari.kini .jh-head{background:var(--green-soft);border-bottom-color:#bfe0cd;}

/* Ikon kalender kecil. Angkanya = jumlah jam pelajaran hari itu. */
.jh-cal{
  position:relative;width:52px;flex-shrink:0;background:#fff;
  border:1px solid var(--border-color);border-radius:8px;padding-top:11px;
  text-align:center;box-shadow:0 2px 6px rgba(15,23,42,.10);
}
.jh-cal::before{content:"";position:absolute;top:0;left:0;right:0;height:11px;background:var(--green-primary);border-radius:7px 7px 0 0;}
.jh-ring{position:absolute;top:-4px;width:5px;height:11px;background:#9aa4b2;border-radius:3px;z-index:2;}
.jh-ring:nth-of-type(1){left:12px;}
.jh-ring:nth-of-type(2){right:12px;}
.jh-num{display:block;font-size:21px;font-weight:800;color:var(--green-primary);line-height:1.1;}
.jh-dow{display:block;font-size:9.5px;font-weight:700;letter-spacing:1.3px;color:var(--text-muted);padding-bottom:5px;}
/* Hari tanpa jadwal: angka 0 tidak boleh terbaca sekeras angka yang bermakna. */
.jadwal-hari.kosong .jh-cal::before{background:#cbd5e1;}
.jadwal-hari.kosong .jh-num{color:var(--text-muted);}

.jh-judul{min-width:0;flex:1;}
.jh-judul strong{display:block;font-size:14.5px;font-weight:800;letter-spacing:.4px;color:var(--text-dark);}
.jh-judul small{font-size:11.5px;font-weight:600;color:var(--text-muted);}
.jh-tanda{
  flex-shrink:0;font-size:10.5px;font-weight:700;letter-spacing:.3px;
  background:var(--green-primary);color:#fff;border-radius:20px;padding:3px 9px;
}

.jh-body{padding:4px 16px 12px;}
.jh-kosong{margin:14px 0;text-align:center;font-size:12.5px;color:var(--text-muted);font-style:italic;}

/* Satu jam pelajaran. Tiga baris tetap: waktu, mapel, guru — urutan yang sama
   di ketiga halaman, sehingga mata tidak perlu mencari ulang tiap berpindah. */
.jh-jam{
  display:block;padding:11px 0;border-bottom:1px solid var(--border-color);
  text-decoration:none;color:inherit;
}
.jh-jam:last-child{border-bottom:none;}
a.jh-jam{cursor:pointer;border-radius:8px;padding-left:9px;padding-right:9px;margin:0 -9px;transition:background .13s;}
a.jh-jam:hover{background:var(--green-soft);}
.jj-waktu{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--green-primary);}
.jj-waktu em{font-style:normal;font-weight:600;color:var(--text-muted);font-size:11px;}
.jj-waktu em::before{content:"·";margin-right:7px;}
.jj-mapel{display:block;font-size:14px;font-weight:700;color:var(--text-dark);margin-top:3px;line-height:1.3;}
.jj-guru{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text-muted);margin-top:3px;}
.jj-guru .material-icons{font-size:13px;}

@media print{
  .jadwal-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .jadwal-hari{box-shadow:none;break-inside:avoid;}
  .jh-tanda{display:none;}
}

/* ---------- Jadwal Piket (kartu kalender per hari) ---------- */
.piket-day-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:26px 22px;padding:12px 4px 4px;
}
.piket-day-card{display:flex;flex-direction:column;break-inside:avoid;}
.pdc-head{display:flex;align-items:center;gap:12px;padding:0 2px 12px;}
.pdc-cal{
  position:relative;width:64px;flex-shrink:0;background:#fff;
  border:1px solid var(--border-color);border-radius:8px;padding-top:13px;
  text-align:center;box-shadow:0 3px 8px rgba(15,23,42,.10);
}
.pdc-cal::before{content:"";position:absolute;top:0;left:0;right:0;height:13px;background:var(--green-primary);border-radius:7px 7px 0 0;}
.pdc-ring{position:absolute;top:-5px;width:6px;height:13px;background:#9aa4b2;border-radius:3px;z-index:2;}
.pdc-ring:nth-of-type(1){left:15px;}
.pdc-ring:nth-of-type(2){right:15px;}
.pdc-num{font-size:25px;font-weight:800;color:var(--green-primary);line-height:1.05;}
.pdc-dow{display:block;font-size:10.5px;font-weight:700;letter-spacing:1.5px;color:var(--text-muted);padding-bottom:6px;}
.pdc-dayname{font-size:16px;font-weight:800;letter-spacing:1.2px;color:var(--green-primary);text-transform:uppercase;}
/* Judul dua baris: nama hari + keterangannya (rentang jam di Jadwal
   Pelajaran). Piket memakai .pdc-dayname sendirian, jadi pembungkus ini
   hanya muncul bila keterangannya ada. */
.pdc-judul{display:flex;flex-direction:column;gap:1px;min-width:0;}
.pdc-judul small{font-size:11.5px;color:var(--text-muted);font-weight:600;letter-spacing:.2px;}
/* Hari tanpa jadwal: ikonnya dikelabukan supaya angka 0 tidak terbaca
   sekeras angka yang bermakna. */
.pdc-cal.kosong::before{background:#cbd5e1;}
.pdc-cal.kosong .pdc-num{color:var(--text-muted);}
.pdc-body{
  background:#fff;border:1px solid var(--border-color);border-top:3px solid var(--green-primary);
  border-radius:10px;padding:12px 16px;min-height:190px;box-shadow:0 6px 16px rgba(15,23,42,.08);
}
.pdc-line{
  display:block;border-bottom:1px solid var(--border-color);padding:8px 4px;
  color:var(--text-dark);font-size:13px;font-weight:600;line-height:1.3;min-height:35px;
}
a.pdc-line{cursor:pointer;text-decoration:none;border-radius:5px;transition:background .15s;}
a.pdc-line:hover{background:var(--green-soft);}
.pdc-line.empty{min-height:35px;}

.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between;margin-bottom:18px;}
.toolbar .filters{display:flex;flex-wrap:wrap;gap:10px;}
/* Kelompok tombol di sisi kanan toolbar. */
.toolbar-aksi{display:flex;flex-wrap:wrap;gap:8px;}

/* Varian filter untuk TOOLBAR — pasangannya `.filter-field` yang dipakai di
   dalam kartu. Bedanya hanya lebar minimum: di toolbar ia berbagi baris dengan
   tombol, jadi tidak boleh selebar filter yang berdiri sendiri.
   Tanpa aturan ini `<label>` kembali ke display:block bawaan dan tiap filter
   memakan dua baris penuh — itulah bentuk berantakan yang tampak sebelumnya. */
.filter-item{display:flex;flex-direction:column;gap:6px;}
.filter-item label{font-size:12.5px;font-weight:600;color:var(--text-muted);margin:0;}
.filter-item select,.filter-item input{min-width:150px;}

.btn{
  display:inline-flex;align-items:center;gap:7px;border:none;border-radius:9px;
  padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;
}
.btn-primary{background:var(--green-primary);color:#fff;}
.btn-primary:hover{background:var(--green-dark);}
.btn-outline{background:#fff;border:1px solid var(--border-color);color:var(--text-dark);}
.btn-outline:hover{background:#f3f4f6;}
.btn-danger-outline{background:#fff;border:1px solid #fca5a5;color:#dc2626;}
/* Tombol merah PENUH — hanya untuk tindakan yang menghapus data tak terpulihkan
   (Pulihkan dari Cadangan). Sengaja beda dari btn-danger-outline yang dipakai
   hapus baris biasa: yang satu membuang satu baris, yang ini seluruh sekolah. */
.btn-danger{background:#dc2626;color:#fff;border:1px solid #dc2626;}
.btn-danger:hover{background:#b91c1c;border-color:#b91c1c;}

/* Kartu bertanda bahaya. Bingkai merah supaya tidak terbaca sebagai kartu
   pengaturan biasa saat mata menyapu halaman. */
.kartu-bahaya{border:1px solid #fca5a5;box-shadow:0 2px 10px rgba(220,38,38,.08);}
.kartu-bahaya > h2{color:#b91c1c;}
.btn-sm{padding:6px 12px;font-size:12.5px;border-radius:7px;}

input,select,textarea{
  border:1px solid var(--border-color);border-radius:9px;padding:9px 13px;
  font-size:14px;font-family:inherit;background:#fff;color:var(--text-dark);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green-accent);}
label{font-size:13.5px;font-weight:600;color:#374151;display:block;margin-bottom:6px;}
.form-group{margin-bottom:16px;}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;}
/* Field selebar form — agar tidak menyisakan ruang kosong di kanan pada kartu
   lebar (mis. Kirim Pengumuman). Radio & checkbox tetap seukuran aslinya. */
.form-lebar input:not([type=radio]):not([type=checkbox]),
.form-lebar select,
.form-lebar textarea{width:100%;}

.action-icons{display:flex;gap:6px;}
.action-icons a,.action-icons button{
  border:1px solid var(--border-color);background:#fff;width:32px;height:32px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#374151;font-size:14px;
}
.action-icons a.view{color:#3b82f6;}
.action-icons a.edit{color:#3b82f6;}
.action-icons a.delete,.action-icons button.delete{color:#ef4444;}
.action-icons a.view:hover{background:var(--blue-soft);color:#3b5bdb;border-color:transparent;}
.action-icons a.edit:hover{background:var(--blue-soft);color:#3b5bdb;border-color:transparent;}
.action-icons a.delete:hover,.action-icons button.delete:hover{background:var(--red-soft);color:#dc2626;border-color:transparent;}

/* ---------- Pagination ---------- */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:16px;}
.pagination a,.pagination span{
  min-width:34px;height:34px;padding:0 6px;border-radius:8px;border:1px solid var(--border-color);
  display:flex;align-items:center;justify-content:center;background:#fff;color:#374151;font-size:13.5px;font-weight:600;
}
.pagination a:hover{background:#f3f4f6;}
.pagination .active{background:var(--green-primary);color:#fff;border-color:var(--green-primary);}
.pagination .disabled{opacity:.4;pointer-events:none;}

.alert{padding:13px 18px;border-radius:10px;margin-bottom:18px;font-size:14px;font-weight:500;}
.alert-success{background:var(--green-soft);color:var(--green-primary);}
.alert-danger{background:var(--red-soft);color:#dc2626;}
.alert-info{background:var(--blue-soft);color:#3b5bdb;}
/* Tersimpan, tapi ada yang perlu diperhatikan. */
.alert-warning{background:var(--orange-soft);color:#d97706;}

/* ---------- Modal ---------- */
.modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(17,24,39,.5);
  align-items:center;justify-content:center;z-index:100;padding:20px;
}
.modal-overlay.show{display:flex;}
.modal-box{background:#fff;border-radius:14px;max-width:720px;width:100%;max-height:90vh;overflow-y:auto;}
/* Varian lebar untuk modal bertabel (mis. Daftar Nilai, Ekstrakurikuler) */
.modal-box.lebar{max-width:1040px;}
.modal-box.biodata{max-width:640px;}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border-color);}
.modal-header h3{margin:0;font-size:17px;}
.modal-close{border:none;background:none;font-size:20px;cursor:pointer;color:#6b7280;}
.modal-body{padding:22px 24px;}
.modal-footer{padding:16px 24px;border-top:1px solid var(--border-color);display:flex;justify-content:flex-end;gap:10px;}

/* ---------- Login page (split screen: hero hijau + kartu form) ---------- */
/* Halaman login tampil penuh sampai tepi layar, jadi padding bingkai milik
   body (yang dipakai halaman ber-sidebar) dinetralkan di sini. */
body.login-body{padding:0;margin:0;background:var(--bg-page);}
.login-page{
  --gold:#f0b429;
  min-height:100vh;display:flex;background:var(--bg-page);overflow:hidden;
}

/* --- Sisi kiri: hero --- */
.login-hero{
  position:relative;flex:1 1 55%;display:flex;flex-direction:column;
  justify-content:space-between;padding:48px 64px;color:#fff;isolation:isolate;
}
/* Dua lapis bentuk melengkung: emas (di belakang) menyembul jadi aksen tipis
   di sepanjang lengkung hijau. Radius elips membuat sisi kanan membusur. */
.login-hero .hero-shape,
.login-hero .hero-accent{
  position:absolute;top:0;bottom:0;left:0;z-index:-1;
  border-top-right-radius:190px 50%;border-bottom-right-radius:190px 50%;
}
.login-hero .hero-accent{right:-104px;top:56px;bottom:-56px;background:var(--gold);}
.login-hero .hero-shape{
  right:-86px;
  background:linear-gradient(158deg,var(--green-dark) 0%,var(--green-primary) 52%,var(--green-accent) 100%);
}
/* Tekstur titik halus supaya bidang hijau tidak terasa datar */
.login-hero .hero-shape::after{
  content:'';position:absolute;inset:0;border-radius:inherit;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);
  background-size:22px 22px;
}

.login-brand{display:flex;align-items:center;gap:14px;}
.login-brand .brand-logo{
  width:56px;height:56px;border-radius:14px;flex-shrink:0;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--gold);
}
.login-brand .brand-logo img{width:100%;height:100%;object-fit:contain;border-radius:13px;}
.login-brand h1{margin:0;font-size:27px;font-weight:800;letter-spacing:.5px;line-height:1.1;}
.login-brand p{margin:3px 0 0;font-size:13.5px;opacity:.9;}

.hero-copy{max-width:520px;padding:32px 0;}
.hero-copy h2{font-size:44px;line-height:1.15;margin:0;font-weight:800;letter-spacing:-.5px;}
.hero-copy .hero-rule{width:88px;height:5px;background:var(--gold);border-radius:3px;margin:26px 0;}
.hero-copy p{font-size:16.5px;line-height:1.6;margin:0;opacity:.92;max-width:430px;}

.hero-features{display:flex;gap:34px;margin-top:42px;}
.hero-features .feat{width:112px;}
.hero-features .feat .feat-icon{
  width:66px;height:66px;border-radius:18px;margin-bottom:12px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:30px;
}
.hero-features .feat span{font-size:13.5px;line-height:1.4;display:block;font-weight:500;}
.login-hero .hero-foot{font-size:12.5px;opacity:.75;margin:0;}

/* --- Sisi kanan: kartu form --- */
.login-form-side{
  flex:1 1 45%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:22px;padding:40px 32px;
}
.login-card{
  background:#fff;border-radius:24px;padding:44px 42px;width:100%;max-width:436px;
  box-shadow:0 24px 60px rgba(15,23,42,.10),0 2px 8px rgba(15,23,42,.05);
}
.login-card .icon-box{
  width:86px;height:86px;background:var(--green-soft);color:var(--green-primary);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:40px;margin:0 auto 20px;
}
.login-card h2{text-align:center;font-size:29px;margin:0 0 6px;color:var(--green-primary);font-weight:800;}
.login-card p.sub{text-align:center;color:var(--text-muted);font-size:14.5px;margin:0 0 26px;}
.login-card .form-group{margin-bottom:18px;}
.login-card label{display:block;font-size:13.5px;font-weight:600;margin-bottom:8px;color:var(--text-dark);}

/* Input dengan ikon di kiri (dan tombol mata di kanan untuk password) */
.input-icon{position:relative;}
.input-icon > .material-icons{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-size:20px;color:#9ca3af;pointer-events:none;
}
.input-icon input{width:100%;padding:13px 14px 13px 44px;font-size:14.5px;}
.input-icon input::placeholder{color:#b0b5bd;}
.input-icon.has-toggle input{padding-right:46px;}
.pw-toggle{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;color:#9ca3af;
  padding:6px;line-height:0;border-radius:8px;
}
.pw-toggle:hover{color:var(--green-primary);background:var(--green-soft);}
.pw-toggle .material-icons{font-size:20px;}

/* Pemilih jalur masuk: Guru (email) vs Siswa (kode kelas + NIS) */
.login-tabs{
  display:flex;gap:6px;background:#f3f4f6;border-radius:12px;padding:5px;margin:0 0 22px;
}
.login-tabs a{
  flex:1;text-align:center;padding:9px 10px;border-radius:9px;font-size:14px;font-weight:600;
  color:var(--text-muted);text-decoration:none;transition:background .15s,color .15s;
}
.login-tabs a.active{background:#fff;color:var(--green-primary);box-shadow:0 1px 3px rgba(15,23,42,.12);}
.login-tabs a:not(.active):hover{color:var(--text-dark);}

.login-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 22px;}
.login-meta label{display:flex;align-items:center;gap:8px;margin:0;font-weight:500;color:var(--text-muted);cursor:pointer;}
.login-meta input[type=checkbox]{width:16px;height:16px;accent-color:var(--green-primary);cursor:pointer;}
.link-btn{
  background:none;border:none;padding:0;cursor:pointer;
  color:var(--green-accent);font-size:13.5px;font-weight:600;font-family:inherit;
}
.link-btn:hover{text-decoration:underline;}

.login-card .btn-primary{width:100%;justify-content:center;padding:14px;font-size:15.5px;font-weight:700;border-radius:10px;}
.login-note{
  margin-top:16px;padding:14px 16px;background:#f9fafb;border:1px solid var(--border-color);
  border-radius:12px;font-size:12.8px;color:var(--text-muted);line-height:1.65;
}
.login-note strong{color:var(--text-dark);}
.login-note code{background:#eef1f4;padding:1px 6px;border-radius:5px;font-size:12px;}
.login-note[hidden]{display:none;}
.login-foot{font-size:13px;color:var(--text-muted);margin:0;text-align:center;}
.login-foot a{color:var(--green-primary);font-weight:600;}

/* --- Responsif: di layar sempit hero jadi header ringkas di atas --- */
@media (max-width:1040px){
  .login-hero{padding:40px;}
  .hero-copy h2{font-size:36px;}
  .hero-features{gap:22px;}
}
@media (max-width:880px){
  .login-page{flex-direction:column;}
  .login-hero{flex:0 0 auto;padding:34px 28px 44px;}
  .login-hero .hero-shape,.login-hero .hero-accent{
    right:0;left:0;border-radius:0 0 46% 46%/0 0 62px 62px;
  }
  .login-hero .hero-accent{top:0;bottom:-18px;}
  .login-hero .hero-shape{bottom:0;}
  .hero-copy{padding:26px 0 0;}
  .hero-copy h2{font-size:29px;}
  .hero-copy .hero-rule{margin:18px 0;}
  .hero-copy p{font-size:15px;}
  .hero-features,.login-hero .hero-foot{display:none;}
  .login-form-side{padding:28px 20px 40px;}
  .login-card{padding:34px 26px;box-shadow:0 12px 34px rgba(15,23,42,.10);}
  .login-card .icon-box{width:70px;height:70px;font-size:34px;}
  .login-card h2{font-size:25px;}
}


/* ---------- Grid Daftar Nilai ---------- */
table.nilai-grid{font-size:12.5px;}
table.nilai-grid th{text-align:center;padding:6px 5px;font-size:11px;white-space:nowrap;}
table.nilai-grid th.kol-grup{white-space:normal;}
/* Kepala kolom nomor (T1, UH2, …) sengaja sempit: yang membedakannya hanya
   angka, jadi kolom selebar namanya hanya membuang ruang mendatar yang justru
   dibutuhkan saat jumlah tugasnya banyak. */
table.nilai-grid th.kol-ke{min-width:44px;font-weight:700;}
table.nilai-grid td{padding:4px 5px;}
table.nilai-grid td.sel{padding:3px;}
table.nilai-grid td.sel input{
  width:52px;padding:5px 4px;text-align:center;font-size:12.5px;
  border:1px solid var(--border-color);border-radius:6px;
}
table.nilai-grid td.sel input:focus{border-color:var(--green-accent);outline:none;}
table.nilai-grid td.sel input[readonly]{background:#f9fafb;color:var(--text-muted);}
/* Nilai Akhir adalah TEKS, bukan kotak isian: angkanya terisi sendiri dan tidak
   pernah dikirim ke server. */
table.nilai-grid td.sel-akhir{
  background:var(--orange-soft);color:var(--text-dark);
  font-weight:700;font-size:13.5px;text-align:center;
}
table.nilai-grid td.sel-akhir.kosong{color:var(--text-muted);font-weight:400;}

/* Kolom No & Nama tetap terlihat saat tabel digeser ke samping —
   tanpa ini guru kehilangan acuan siswa saat mengisi kolom TP yang jauh. */
table.nilai-grid .kol-no,table.nilai-grid .kol-nama{position:sticky;background:#fff;z-index:2;}
table.nilai-grid .kol-no{left:0;width:36px;text-align:center;}
table.nilai-grid .kol-nama{left:36px;min-width:150px;box-shadow:1px 0 0 var(--border-color);}
table.nilai-grid thead .kol-no,table.nilai-grid thead .kol-nama{background:#f9fafb;z-index:3;}
table.nilai-grid .kol-akhir{min-width:88px;}
/* Rumus Nilai Akhir — deretan suku, bukan kalimat. Dibungkus agar di layar
   sempit sukunya turun ke baris berikutnya, bukan memaksa halaman menggeser. */
.nilai-rumus{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:16px;padding:11px 14px;border-radius:11px;
  background:var(--orange-soft);border:1px solid #fcd9a5;
  font-size:13px;color:var(--text-dark);
}
.nilai-rumus > .material-icons{font-size:19px;color:#d97706;flex-shrink:0;}
.nilai-rumus .rumus-judul{font-weight:700;}
.nilai-rumus .rumus-sama,.nilai-rumus .rumus-plus{color:var(--text-muted);font-weight:700;}
.nilai-rumus .rumus-suku{
  background:#fff;border:1px solid #fcd9a5;border-radius:7px;padding:3px 9px;white-space:nowrap;
}
.nilai-rumus .rumus-suku b{color:#d97706;}
/* Didorong ke ujung kanan; di layar sempit ia ikut turun dan margin-left:auto
   tidak berpengaruh, jadi tidak perlu penanganan khusus. */
.nilai-rumus .rumus-sumber{margin-left:auto;font-size:12px;color:var(--text-muted);}
.nilai-rumus .rumus-sumber a{color:#d97706;font-weight:600;}
@media (max-width:640px){
  /* Sukunya sudah membungkus, jadi `margin-left:auto` menyisakan keterangan ini
     mengambang sendirian di tengah baris terakhir. Rata kiri seperti sisanya. */
  .nilai-rumus .rumus-sumber{margin-left:0;width:100%;}
}

.nilai-catatan{margin:10px 2px 0;font-size:12.5px;line-height:1.6;color:var(--text-muted);}

/* Baris tombol Daftar Nilai — dibungkus agar tetap rapi di layar sempit. */
.nilai-aksi{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--border-color);
}
.nilai-aksi .text-muted{font-size:12.5px;}

.check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px 14px;}
.check-list{
  display:flex;flex-direction:column;gap:6px;max-height:190px;overflow-y:auto;
  border:1px solid var(--border-color);border-radius:9px;padding:10px 12px;
}
.check-item{display:flex;align-items:center;gap:9px;font-size:13.5px;cursor:pointer;margin:0;font-weight:500;}
.check-item input[type=checkbox]{width:16px;height:16px;accent-color:var(--green-primary);cursor:pointer;flex-shrink:0;}
.check-item span{line-height:1.35;}

/* Tabel radio di dalam form (refleksi & observasi) */
table.form-table td,table.form-table th{vertical-align:middle;}
table.form-table td.tengah{text-align:center;}
table.form-table input[type=radio]{width:17px;height:17px;accent-color:var(--green-primary);cursor:pointer;}
table.form-table input[type=text]{width:100%;padding:6px 9px;font-size:13px;}

/* ---------- Dashboard guru mapel ---------- */
/* auto-FIT, bukan auto-fill: guru mata pelajaran yang hanya mengampu satu kelas
   tidak boleh melihat satu kartu menyendiri dengan dua jalur kosong di kanannya.
   Batas 380px menahan kartu tunggal melar selebar halaman. */
.ampu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,380px));
           justify-content:start;gap:16px;}
.ampu-card{border:1px solid var(--border-color);border-radius:12px;padding:16px;background:#fff;
           display:flex;flex-direction:column;gap:12px;}
.ampu-head{display:flex;align-items:center;gap:12px;}
.ampu-head strong{display:block;font-size:15px;color:var(--text-dark);}
.ampu-head span{font-size:12.5px;color:var(--text-muted);}
.ampu-mapel{display:flex;flex-wrap:wrap;gap:6px;}

/* Satu mapel beserta slot jadwalnya. */
.ampu-mapel-blok{border-top:1px solid var(--border-color);padding-top:11px;}
.ampu-slot{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:5px;}
.ampu-slot li{
  display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-muted);
  padding:5px 9px;border-radius:7px;background:var(--bg-page);
}
.ampu-slot .hari{min-width:52px;font-weight:600;color:var(--text-dark);}
.ampu-slot .jam{font-variant-numeric:tabular-nums;}
/* Baris hari ini disorot — satu-satunya yang menuntut tindakan hari ini, dan
   tanpa penanda ia harus dicari sendiri di antara jadwal seminggu penuh. */
.ampu-slot li.kini{background:var(--green-soft);color:var(--green-primary);}
.ampu-slot li.kini .hari{color:var(--green-primary);}
.ampu-slot .tanda{
  margin-left:auto;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.3px;color:var(--green-primary);
}

.ampu-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:2px;}
.ampu-actions .btn{flex:1 1 auto;justify-content:center;}

/* Kotak catatan/pengingat di dashboard */
.dash-note{display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:11px;
  background:var(--bg-page);border:1px solid var(--border-color);font-size:13.5px;line-height:1.55;}
.dash-note > .material-icons{font-size:22px;color:var(--text-muted);flex-shrink:0;}
.dash-note a{color:var(--green-primary);font-weight:600;display:inline-block;margin-top:2px;}
/* Tautan biasa di dalam catatan memang hijau — TOMBOL tidak. Tanpa pengecualian
   ini, .btn-primary di dalam .dash-note mendapat teks hijau di atas latar hijau
   dan menjadi kotak kosong yang tidak terbaca sama sekali. */
.dash-note a.btn-primary{color:#fff;}
.dash-note a.btn-outline{color:var(--text-dark);}
.dash-note.ok{background:var(--green-soft);border-color:#bfe0cd;}
.dash-note.ok > .material-icons{color:var(--green-primary);}
.dash-note.warn{background:var(--orange-soft);border-color:#fcd9a5;}
.dash-note.warn > .material-icons{color:#d97706;}

/* Keterangan kecil di bawah field form */
.form-hint{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:12.5px;color:var(--text-muted);}
.form-hint .material-icons{font-size:15px;}

/* ---------- Daftar Notifikasi ---------- */
.notif-list{list-style:none;margin:0;padding:0;}
/* Baris = ikon + isi + aksi. Barisnya sendiri BUKAN tautan: menandai dibaca
   dan membuka tujuan adalah dua hal berbeda, jadi keduanya tombol terpisah. */
.notif-item{
  display:flex;align-items:flex-start;gap:14px;padding:15px 12px;
  border-bottom:1px solid var(--border-color);border-radius:10px;
}
.notif-item:last-child{border-bottom:none;}
/* Yang belum dibaca ditandai garis hijau di tepi kiri, bukan latar penuh:
   saat sebagian besar belum dibaca, latar penuh membuat seluruh daftar hijau
   dan justru tidak ada yang menonjol. */
.notif-item.unread{
  background:var(--green-soft);
  box-shadow:inset 3px 0 0 var(--green-primary);
}
.notif-icon{
  width:40px;height:40px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.notif-icon .material-icons{font-size:20px;}
.notif-icon.green{background:var(--green-soft);color:var(--green-primary);}
.notif-icon.blue{background:var(--blue-soft);color:#3b5bdb;}
.notif-icon.orange{background:var(--orange-soft);color:#d97706;}
.notif-body{flex:1;min-width:0;}
.notif-judul{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.notif-body strong{font-size:14.5px;}
.notif-body p{margin:3px 0 0;font-size:13.5px;color:var(--text-muted);line-height:1.5;}
.notif-body small{display:block;margin-top:5px;font-size:12px;color:var(--text-muted);}

/* Dua aksi per baris. Ditumpuk di kanan supaya sejajar antar baris walau
   panjang pesannya berbeda-beda. */
.notif-aksi{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;}
.notif-tandai{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  background:#fff;border:1px solid var(--border-color);border-radius:8px;
  padding:5px 10px;font-size:12.5px;font-weight:600;color:var(--green-primary);
  cursor:pointer;transition:background .12s,border-color .12s;
}
.notif-tandai:hover{background:var(--green-soft);border-color:#bfe0cd;}
.notif-tandai:disabled{opacity:.55;cursor:default;}
.notif-tandai .material-icons{font-size:15px;}
.notif-buka{
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
  font-size:12.5px;font-weight:600;color:var(--text-muted);padding:3px 4px;
}
.notif-buka:hover{color:var(--green-primary);}
.notif-buka .material-icons{font-size:14px;}

@media (max-width:640px){
  /* Di ponsel tombolnya turun ke bawah isi, dan labelnya cukup ikon. */
  .notif-item{flex-wrap:wrap;}
  .notif-aksi{flex-direction:row;align-items:center;width:100%;
              justify-content:flex-end;margin-top:2px;}
  .notif-tandai .teks{display:none;}
}

/* ---------- Utilities ---------- */
.text-muted{color:var(--text-muted);}
.mt-0{margin-top:0;}
.d-flex{display:flex;}
.gap-2{gap:8px;}
.align-center{align-items:center;}
.empty-state{text-align:center;padding:50px 20px;color:var(--text-muted);}
.empty-state .icon{font-size:38px;margin-bottom:12px;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  body.sidebar-open{overflow:hidden;}
  body.sidebar-open::after{
    content:'';position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:40;
  }
  body{padding:0;background:var(--bg-page);}
  .app-wrapper{border-radius:0;box-shadow:none;max-width:100%;min-height:100vh;}
  .sidebar-brand{border-top-left-radius:0;}
  .topbar{border-top-right-radius:0;}
  .sidebar{position:fixed;top:0;bottom:0;left:0;z-index:50;margin-left:-270px;box-shadow:0 0 30px rgba(0,0,0,.15);border-radius:0;}
  .sidebar.show{margin-left:0;}
  .topbar{border-top-right-radius:0;padding:14px 18px;}
  .topbar .hamburger{display:inline-flex;}
  .page-body{padding:18px;}
}
@media (max-width:520px){
  /* Teksnya tetap ditampilkan — dulu disembunyikan sehingga menyisakan kotak
     berisi ikon saja yang tak bermakna. Cukup diperkecil dan dirapatkan. */
  .topbar-right{gap:12px;}
  .ta-info{font-size:12.5px;}
  a.ta-info{padding:6px 9px;}
}

/* ---------- Penyesuaian layar sempit (HP) ---------- */
@media (max-width:640px){
  /* Judul halaman & kartu lebih ringkas agar muat lebih banyak isi */
  .page-title{font-size:20px;}
  .page-body{padding:14px;}
  .card-box{padding:16px;border-radius:12px;}
  .card-box h2{font-size:15.5px;}

  /* Toolbar menumpuk; tombol & filter melebar penuh supaya mudah disentuh */
  .toolbar{flex-direction:column;align-items:stretch;}
  .toolbar .filters{width:100%;}
  .toolbar .filters > *{flex:1 1 auto;}
  .toolbar > .btn,.toolbar form > .btn{width:100%;justify-content:center;}

  /* Kartu statistik & menu jadi satu kolom penuh */
  .stats-grid,.menu-grid{grid-template-columns:1fr;gap:14px;}
  .kelas-mini-grid,.ampu-grid{grid-template-columns:1fr;}

  /* Bagan struktur: rapatkan agar sebagian besar kelas muat tanpa digeser */
  .org-two{gap:18px;}
  .org-node{min-width:0;padding:10px 14px;}
  .org-anggota{min-width:0;}
  .org-node .org-role{font-size:13.5px;}
  .org-node .org-name{font-size:12.5px;}

  /* Denah: kursi mengecil & mengisi lebar yang tersedia */
  .denah-grid{grid-template-columns:repeat(var(--denah-kolom,4), minmax(62px,1fr));gap:9px;}
  .seat{min-height:84px;padding:9px 4px 8px;}
  .seat .seat-name{font-size:11px;}
  .denah-board{width:100%;letter-spacing:3px;font-size:13px;padding:16px 12px;}

  /* Modal memakai hampir seluruh layar */
  .modal-overlay{padding:10px;}
  .modal-box{max-height:94vh;border-radius:12px;}
  .modal-header,.modal-body,.modal-footer{padding-left:16px;padding-right:16px;}
  .modal-footer{flex-direction:column-reverse;}
  .modal-footer > .btn{width:100%;justify-content:center;}

  /* Tabel: sedikit lebih padat supaya lebih banyak kolom terlihat */
  table.data-table{font-size:13px;}
  table.data-table th,table.data-table td{padding:9px 10px;}

  /* Isyarat bahwa tabel bisa digeser ke samping */
  .table-wrap{-webkit-overflow-scrolling:touch;}

  /* Grafik dashboard menumpuk */
  .chart-grid-2col{grid-template-columns:1fr;}

  /* Target sentuh minimal ~34px untuk tombol kecil & tautan di kartu statistik */
  .btn-sm{min-height:34px;padding:7px 13px;}
  .stat-link{display:inline-flex;align-items:center;min-height:34px;}
}

/* ---------- Sub-judul seksi di dalam form modal ---------- */
.form-section{
  font-size:13px;font-weight:700;color:var(--green-primary);
  margin:6px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border-color);
  text-transform:uppercase;letter-spacing:.4px;
}
.form-section:first-child{margin-top:0;}

/* ---------- Pengaturan Sekolah ---------- */
/* Lebar dibatasi sekali di pembungkus, bukan diulang di tiap kartu: formulir
   selebar layar membuat baris isian jadi terlalu panjang untuk dipindai. */
.setelan{max-width:720px;}
.setelan .setelan-ket{margin:-6px 0 18px;font-size:13px;line-height:1.55;color:var(--text-muted);}
/* Tombol simpan tiap kartu, dipisahkan garis agar terbaca sebagai penutup
   kartunya — bukan sebagai isian berikutnya. */
.setelan-aksi{margin-top:20px;padding-top:16px;border-top:1px solid var(--border-color);}

/* Bobot sebagai penjumlahan: kotak + kotak + kotak = total. */
.bobot-baris{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;}
.bobot-item{display:flex;flex-direction:column;gap:6px;flex:1 1 130px;min-width:120px;}
.bobot-item label{font-size:12.5px;font-weight:600;color:var(--text-muted);margin:0;}
.bobot-input{position:relative;}
.bobot-input input{width:100%;padding-right:30px;text-align:center;font-weight:700;}
/* Tanda % menempel di dalam kotak; pointer-events dimatikan supaya klik di
   atasnya tetap jatuh ke kotak isiannya, bukan ke label yang tak berfungsi. */
.bobot-input span{
  position:absolute;right:11px;top:50%;transform:translateY(-50%);
  font-size:12.5px;color:var(--text-muted);pointer-events:none;
}
.bobot-plus{padding-bottom:11px;color:var(--text-muted);font-weight:700;}
.bobot-total{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:96px;padding:7px 12px;border-radius:9px;border:1px solid var(--border-color);
  background:var(--bg-page);line-height:1.3;
}
.bobot-total small{font-size:11px;color:var(--text-muted);font-weight:600;}
.bobot-total strong{font-size:15px;}
.bobot-total.pas{background:var(--green-soft);border-color:#bfe0cd;}
.bobot-total.pas strong{color:var(--green-primary);}
.bobot-total.meleset{background:var(--red-soft);border-color:#f5c2c2;}
.bobot-total.meleset strong{color:#dc2626;}
@media (max-width:560px){
  /* Tanda + kehilangan maknanya begitu sukunya turun ke baris masing-masing. */
  .bobot-plus{display:none;}
  .bobot-total{width:100%;}
}

/* Pilihan penerima berbentuk kartu-radio (mis. form Kirim Pengumuman). */
.opsi-radio{display:flex;gap:10px;flex-wrap:wrap;}
.opsi-radio-item{
  flex:1 1 160px;display:flex;align-items:center;gap:8px;
  border:1px solid var(--border-color);border-radius:10px;padding:11px 14px;
  cursor:pointer;font-weight:600;font-size:14px;color:var(--text-dark);
  transition:border-color .12s, background .12s;
}
.opsi-radio-item input{width:auto;margin:0;flex-shrink:0;}
.opsi-radio-item .material-icons{font-size:19px;color:var(--text-muted);}
.opsi-radio-item:hover{border-color:#c7ccd4;}
/* Kartu terpilih disorot lewat kelas .terpilih (di-toggle JS) — lebih andal
   daripada :has(input:checked) yang tidak selalu revalidasi dinamis. */
.opsi-radio-item.terpilih{
  border-color:var(--green-primary);background:var(--green-soft);color:var(--green-primary);
}
.opsi-radio-item.terpilih .material-icons{color:var(--green-primary);}
/* Enam tingkat SD: kartunya dibuat lebih ramping agar muat tiga per baris di
   ponsel, bukan satu per baris seperti pilihan dua-opsi biasa. */
.opsi-tingkat .opsi-radio-item{flex:1 1 92px;justify-content:center;padding:11px 8px;}
/* Ringkasan mapel yang akan disiapkan untuk fase terpilih. */
.kotak-mapel-fase{
  border:1px solid var(--border-color);border-left:3px solid var(--green-primary);
  border-radius:8px;background:#fafbfc;
  padding:10px 13px;margin:-4px 0 18px;font-size:13px;line-height:1.55;
}

/* Biodata siswa (read-only) — popup gaya CV untuk kepsek. */
.cv-header{
  display:flex;align-items:center;gap:16px;padding:18px;border-radius:12px;
  background:linear-gradient(135deg,var(--green-soft),#fff);
  border:1px solid var(--border-color);margin-bottom:18px;
}
.cv-ident{min-width:0;}
.cv-ident h4{margin:0 0 6px;font-size:18px;font-weight:800;}
.cv-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.cv-nomor{font-size:12.5px;color:var(--text-muted);}
.cv-section{margin-bottom:16px;}
.cv-section:last-child{margin-bottom:0;}
.cv-section-title{
  display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--green-primary);margin-bottom:8px;padding-bottom:6px;
  border-bottom:1px solid var(--border-color);
}
.cv-section-title .material-icons{font-size:17px;}
/* Dua kolom label–nilai; menumpuk satu kolom di layar sempit. */
.cv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 22px;}
.cv-item{display:flex;flex-direction:column;gap:1px;min-width:0;}
.cv-item .cv-label{font-size:11.5px;color:var(--text-muted);}
.cv-item .cv-value{font-size:14px;font-weight:600;word-break:break-word;}
@media (max-width:560px){
  .cv-grid{grid-template-columns:1fr;}
  .cv-header{flex-direction:column;text-align:center;}
  .cv-tags{justify-content:center;}
}

/* ---------- Struktur Organisasi Kelas ---------- */
.org-scroll{overflow-x:auto;}
.org-chart{display:flex;flex-direction:column;align-items:center;padding:14px 10px 6px;}
.org-node{
  background:#fff;border:2px solid #bfe0cd;border-radius:16px;
  padding:12px 26px;min-width:220px;max-width:520px;text-align:center;
  box-shadow:0 4px 12px rgba(15,23,42,.07);
}
.org-node .org-role{font-weight:700;font-size:15px;color:var(--text-dark);}
.org-node .org-name{font-size:13.5px;color:var(--green-primary);margin-top:3px;font-weight:600;}
.org-node .org-name.muted{color:var(--text-muted);font-style:italic;font-weight:500;}
.org-node.org-wali{border-color:#7cc499;background:var(--green-soft);}
.org-line{width:2px;height:26px;background:#8ccaa5;}
.org-two{display:flex;gap:80px;position:relative;padding-top:26px;}
.org-two::before{content:"";position:absolute;top:0;left:25%;right:25%;height:2px;background:#8ccaa5;}
.org-col{position:relative;display:flex;flex-direction:column;align-items:center;}
.org-col::before{content:"";position:absolute;top:-26px;width:2px;height:26px;background:#8ccaa5;}
.org-anggota{border-color:#9fd3b3;background:var(--green-soft);min-width:280px;}
.org-anggota-sub{font-size:12.5px;color:var(--text-muted);margin-top:2px;}
.org-anggota-list{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px;}
.org-anggota-item{
  background:#fff;border:1px solid #bfe0cd;border-radius:20px;
  padding:4px 12px;font-size:12px;color:var(--green-primary);font-weight:600;
}
@media (max-width:560px){
  .org-two{gap:22px;}
}

/* ---------- Denah Tempat Duduk ---------- */
.denah-legend{display:flex;gap:20px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:24px;padding-top:16px;border-top:1px solid var(--border-color);font-size:13px;}
.denah-legend .lg{display:inline-flex;align-items:center;gap:7px;color:var(--text-dark);}
.denah-legend .box{width:16px;height:16px;border-radius:5px;border:1.5px solid;display:inline-block;}

/* Papan tulis bergaya whiteboard berbingkai hijau + dudukan/tray (selaras tema) */
.denah-board{
  position:relative;width:80%;max-width:560px;margin:6px auto 38px;
  background:#f6faf7;color:var(--green-dark);
  text-align:center;font-weight:800;letter-spacing:6px;font-size:15px;
  padding:22px 18px;border-radius:8px;border:5px solid var(--green-primary);
  box-shadow:0 8px 20px rgba(15,23,42,.12),inset 0 0 0 1px rgba(15,80,50,.08);
}
.denah-board::after{
  content:"";position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);
  width:56%;height:12px;background:var(--green-dark);border-radius:0 0 12px 12px;
  box-shadow:0 7px 12px rgba(15,23,42,.20);
}

.denah-scroll{overflow-x:auto;}
.denah-grid{
  display:grid;gap:16px;justify-content:center;
  grid-template-columns:repeat(var(--denah-kolom,4), minmax(84px,120px));
}
.seat{
  position:relative;border:1.5px solid var(--border-color);border-radius:14px;background:#fff;
  padding:12px 8px 11px;min-height:104px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;gap:7px;text-align:center;
  box-shadow:0 2px 6px rgba(15,23,42,.05);
}
.seat .seat-code{
  font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--text-muted);
  background:rgba(15,23,42,.05);padding:2px 9px;border-radius:20px;
}
.seat .seat-icon{font-size:30px;color:#c2c8d0;}
.seat .avatar-circle{box-shadow:0 2px 5px rgba(15,23,42,.12);}
.seat .seat-name{font-size:12.5px;font-weight:700;color:var(--text-muted);line-height:1.2;margin-top:1px;}
.seat.filled{background:var(--green-soft);border-color:#8fd0a6;}
.seat.filled .seat-name{color:var(--green-dark);}
.seat.broken{background:var(--red-soft);border-color:#f0a9a9;}
.seat.broken .seat-icon{color:#e07a7a;}
.seat.broken .seat-name{color:#c0392b;}
.seat.clickable{cursor:pointer;transition:box-shadow .15s,transform .15s,border-color .15s;}
.seat.clickable:hover{box-shadow:0 8px 18px rgba(15,23,42,.13);transform:translateY(-2px);border-color:var(--green-accent);}

/* ---------- Catatan info (mis. integrasi Scanner di halaman Absensi) ---------- */
.info-note{
  display:flex;align-items:flex-start;gap:10px;background:var(--green-soft);
  border:1px solid #bfe0cd;color:var(--green-dark);border-radius:10px;
  padding:11px 14px;margin-bottom:16px;font-size:13px;line-height:1.5;
}
.info-note .material-icons{font-size:20px;color:var(--green-primary);flex-shrink:0;margin-top:1px;}
.absen-cell{display:flex;align-items:center;gap:8px;}
.absen-time,.absen-ket{width:100%;padding:6px 8px;border:1px solid var(--border-color);border-radius:7px;font-size:13px;color:var(--text-dark);background:#fff;}
.absen-time:focus,.absen-ket:focus{outline:none;border-color:var(--green-accent);}
.absen-time:disabled,.absen-ket:disabled{background:#f3f4f6;color:var(--text-muted);}
.absen-tercatat{display:inline-flex;align-items:center;color:var(--green-primary);}
.absen-tercatat .material-icons{font-size:18px;}
.badge-belum{background:#eef0f3;color:#6b7280;}

/* ---------- Scanner Absensi QR ---------- */
.scan-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:20px;}
.scan-stat{background:#fff;border:1px solid var(--border-color);border-radius:12px;padding:15px 18px;display:flex;align-items:center;gap:14px;box-shadow:0 3px 10px rgba(15,23,42,.05);}
.scan-stat > .material-icons{font-size:26px;color:var(--green-primary);background:var(--green-soft);border-radius:10px;padding:9px;}
.scan-stat strong{font-size:23px;display:block;line-height:1;color:var(--text-dark);}
.scan-stat small{color:var(--text-muted);font-size:12.5px;}

.scan-mode{display:flex;gap:10px;margin-bottom:18px;}
.scan-mode .mode-btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px;border-radius:12px;border:2px solid var(--border-color);background:#fff;
  font-size:15px;font-weight:700;color:var(--text-muted);cursor:pointer;transition:all .15s;
}
.scan-mode .mode-btn.active{background:var(--green-soft);border-color:var(--green-primary);color:var(--green-primary);}
.scan-mode .mode-btn[data-mode="pulang"].active{background:var(--orange-soft);border-color:#d97706;color:#d97706;}

.scan-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:20px;align-items:start;}
@media (max-width:860px){.scan-layout{grid-template-columns:1fr;}}

.scan-video-wrap{position:relative;width:100%;aspect-ratio:4/3;background:#0f1720;border-radius:12px;overflow:hidden;}
.scan-video-wrap video{width:100%;height:100%;object-fit:cover;display:block;}
.scan-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#cbd5e1;background:#111827;}
.scan-overlay.hidden{display:none;}
.scan-overlay .material-icons{font-size:44px;opacity:.6;}
.scan-overlay p{font-size:13px;margin:0;text-align:center;padding:0 22px;line-height:1.4;}
.scan-reticle{position:absolute;top:50%;left:50%;width:56%;aspect-ratio:1;transform:translate(-50%,-50%);border:3px solid rgba(255,255,255,.85);border-radius:16px;box-shadow:0 0 0 2000px rgba(0,0,0,.15);pointer-events:none;}
.scan-cam-actions{margin-top:14px;display:flex;justify-content:center;}
.scan-side{display:flex;flex-direction:column;gap:20px;}
.scan-result{display:flex;align-items:center;gap:16px;border-left:6px solid var(--border-color);}
.scan-result-icon{width:62px;height:62px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--bg-page);overflow:hidden;}
.scan-result-icon img{width:100%;height:100%;object-fit:cover;}
.scan-result-icon .material-icons{font-size:30px;color:var(--text-muted);}
.scan-result-icon .ini{font-size:22px;font-weight:800;color:#fff;}
.scan-result-title{font-size:18px;font-weight:800;color:var(--text-dark);line-height:1.2;}
.scan-result-sub{font-size:13px;color:var(--text-muted);margin-top:3px;}
.scan-result.ok{border-left-color:var(--green-primary);background:var(--green-soft);}
.scan-result.ok .scan-result-icon{background:var(--green-primary);}
.scan-result.warn{border-left-color:#d97706;background:var(--orange-soft);}
.scan-result.warn .scan-result-icon{background:#d97706;}
.scan-result.err{border-left-color:#dc2626;background:var(--red-soft);}
.scan-result.err .scan-result-icon{background:#fff;}
.scan-result.err .scan-result-icon .material-icons{color:#dc2626;}

.scan-log-box h3{margin:0 0 10px;font-size:15px;}
.scan-log{list-style:none;margin:0;padding:0;max-height:340px;overflow-y:auto;}
.scan-log-item{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--border-color);}
.scan-log-item:last-child{border-bottom:none;}
.scan-log-item .sl-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--green-primary);}
.scan-log-item.warn .sl-dot{background:#d97706;}
.scan-log-item.err .sl-dot{background:#dc2626;}
.scan-log-item .sl-main{flex:1;min-width:0;}
.scan-log-item .sl-main strong{display:block;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.scan-log-item .sl-main small{font-size:12px;color:var(--text-muted);}
.scan-log-item .sl-time{font-size:11.5px;color:var(--text-muted);font-variant-numeric:tabular-nums;flex-shrink:0;}
.scan-log-empty{color:var(--text-muted);font-size:13px;text-align:center;padding:16px 0;}

/* ---------- Header khusus cetak ---------- */
.print-only{display:none;}
.print-header{text-align:center;margin-bottom:18px;}
.print-header h2{margin:0;font-size:18px;}
.print-header h3{margin:4px 0 0;font-size:15px;font-weight:600;}
.print-header p{margin:4px 0 0;font-size:13px;color:var(--text-muted);}

/* ---------- Aturan cetak (Cetak PDF via print browser) ---------- */
@media print{
  @page{margin:14mm;}
  body{background:#fff;padding:0;}
  .sidebar,.topbar,.no-print,.filter-row,.toolbar,.pagination,.alert,
  .page-title,.page-subtitle{display:none !important;}
  .modal-overlay{display:none !important;}
  .app-wrapper{display:block;box-shadow:none;border-radius:0;max-width:100%;margin:0;background:#fff;}
  .main-content{margin:0;}
  .page-body{padding:0;}
  .card-box{box-shadow:none;border:none;padding:0;}
  .print-only{display:block !important;}
  .org-node,.seat,.pdc-body,.pdc-cal,.pdc-cal::before{box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  /* Garis konektor bagan struktur organisasi (dibuat dari background) agar ikut tercetak */
  .org-line,.org-two::before,.org-col::before{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .denah-board{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .seat.clickable{cursor:default;}

  /* Jadwal Pelajaran: paksa tabel muat 1 halaman (jangan terpotong) */
  .table-wrap{overflow:visible !important;}

  /* Jadwal Piket: kartu tetap muat, jangan terpotong antar halaman */
  .piket-day-grid{grid-template-columns:repeat(3,1fr);gap:14px;}
  .piket-day-card{break-inside:avoid;}
  .pdc-body{min-height:0;box-shadow:none;}
}

/* =========================================================================
   HALAMAN PUBLIK — daftar, verifikasi, lupa password, wizard penyiapan
   Satu kolom terpusat; tanpa hero, karena halaman ini soal menyelesaikan
   satu tugas, bukan meyakinkan pengunjung.
   ========================================================================= */
.publik-page{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:40px 20px;gap:22px;
}
.publik-brand{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--green-primary);
}
.publik-brand .material-icons{
  font-size:26px;background:var(--green-soft);border-radius:12px;padding:9px;
}
.publik-brand strong{display:block;font-size:19px;font-weight:800;letter-spacing:-.2px;}
.publik-brand small{display:block;font-size:12.5px;color:var(--text-muted);font-weight:500;}

.publik-card{
  background:#fff;border-radius:20px;padding:38px 36px;width:100%;max-width:490px;
  box-shadow:0 20px 50px rgba(15,23,42,.09),0 2px 6px rgba(15,23,42,.04);
}
.publik-card h1{
  font-size:24px;font-weight:800;color:var(--text-dark);margin:0 0 8px;letter-spacing:-.3px;
}
.publik-sub{font-size:14.5px;color:var(--text-muted);margin:0 0 26px;line-height:1.65;}
.publik-teks{font-size:14px;color:var(--text-dark);line-height:1.75;margin:0 0 20px;}

.publik-card .form-group{margin-bottom:18px;}
.publik-card label{
  display:block;font-size:13.5px;font-weight:600;margin-bottom:8px;color:var(--text-dark);
}
.publik-card input[type=text],
.publik-card input[type=email],
.publik-card input[type=password]{width:100%;padding:13px 14px;font-size:14.5px;}
.publik-card .input-icon input{padding-left:44px;}

.wajib{color:#dc2626;}
.form-bantuan{
  display:block;font-size:12.5px;color:var(--text-muted);margin-top:7px;line-height:1.6;
}
.form-galat{
  display:block;font-size:12.5px;color:#dc2626;margin-top:7px;font-weight:500;
}
.btn-blok{width:100%;justify-content:center;padding:14px;font-size:15.5px;font-weight:700;
  border-radius:10px;margin-top:6px;}

/* Ikon besar untuk halaman berstatus (email terkirim, tautan kedaluwarsa) */
.publik-ikon{
  width:76px;height:76px;border-radius:50%;background:var(--green-soft);
  color:var(--green-primary);display:flex;align-items:center;justify-content:center;
  margin:0 auto 22px;
}
.publik-ikon .material-icons{font-size:36px;}
.publik-ikon-gagal{background:var(--red-soft);color:#dc2626;}
.publik-card .publik-ikon + h1{text-align:center;}
.publik-card .publik-ikon + h1 + .publik-sub{text-align:center;}

.publik-catatan{
  margin-top:22px;padding:15px 17px;background:#f9fafb;border:1px solid var(--border-color);
  border-radius:12px;font-size:12.8px;color:var(--text-muted);line-height:1.7;
}
.publik-catatan strong{color:var(--text-dark);}
.publik-catatan code{background:#eef1f4;padding:1px 6px;border-radius:5px;font-size:12px;}
/* Penanda mode pengembangan — sengaja mencolok agar tidak terbawa ke produksi
   tanpa disadari. */
.publik-catatan-dev{background:var(--orange-soft);border-color:#fcd9a4;}

.publik-alt{text-align:center;font-size:13.5px;color:var(--text-muted);margin:22px 0 0;}
.publik-alt a{color:var(--green-accent);font-weight:600;text-decoration:none;}
.publik-alt a:hover{text-decoration:underline;}
.publik-foot{font-size:12.5px;color:var(--text-muted);margin:0;text-align:center;}

.form-baris{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

@media (max-width:560px){
  .publik-page{padding:26px 16px;}
  .publik-card{padding:30px 22px;border-radius:16px;}
  .publik-card h1{font-size:21px;}
  .form-baris{grid-template-columns:1fr;gap:0;}
}

.login-daftar{
  text-align:center;font-size:13.5px;color:var(--text-muted);margin:18px 0 0;
  padding-top:16px;border-top:1px solid var(--border-color);
}
.login-daftar a{color:var(--green-accent);font-weight:600;text-decoration:none;}
.login-daftar a:hover{text-decoration:underline;}

/* =========================================================================
   LANGGANAN & PANEL PLATFORM
   ========================================================================= */

/* Spanduk pengingat masa aktif di atas isi halaman */
.spanduk-masa{
  display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:12px;
  margin-bottom:20px;font-size:13.5px;line-height:1.6;
}
.spanduk-masa .material-icons{font-size:22px;flex-shrink:0;}
.spanduk-masa div{flex:1;}
.spanduk-masa .btn{flex-shrink:0;padding:9px 18px;font-size:13.5px;}
.spanduk-masa.dekat{background:var(--orange-soft);color:#92400e;border:1px solid #fcd9a4;}
.spanduk-masa.habis{background:var(--red-soft);color:#991b1b;border:1px solid #f5c2c2;}

/* Kartu status di halaman Langganan */
.langganan-status{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.langganan-status .ls-kiri{display:flex;align-items:center;gap:16px;}
.langganan-status .material-icons{font-size:38px;}
.langganan-status h2{margin:0 0 3px;font-size:17px;}
.langganan-status p{margin:0;font-size:13.5px;color:var(--text-muted);}
.langganan-status.aman  .material-icons{color:var(--green-primary);}
.langganan-status.dekat .material-icons{color:#d97706;}
.langganan-status.habis .material-icons{color:#dc2626;}

/* Pilihan paket */
.paket-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:6px;}
.paket-kartu{position:relative;cursor:pointer;margin:0;}
.paket-kartu input{position:absolute;opacity:0;pointer-events:none;}
.paket-isi{
  display:block;padding:18px;border:2px solid var(--border-color);border-radius:14px;
  transition:border-color .15s,background .15s;
}
.paket-kartu input:checked + .paket-isi{border-color:var(--green-primary);background:var(--green-soft);}
.paket-label{display:block;font-size:13.5px;font-weight:600;color:var(--text-muted);margin-bottom:4px;}
.paket-harga{display:block;font-size:24px;font-weight:800;color:var(--green-primary);letter-spacing:-.5px;}
.paket-catatan{display:block;font-size:12.5px;color:var(--text-muted);margin-top:6px;line-height:1.6;}

/* Rekening tujuan transfer */
.rekening-box{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;
  padding:18px;background:#f9fafb;border:1px solid var(--border-color);border-radius:12px;
}
.rekening-box small{display:block;font-size:12px;color:var(--text-muted);margin-bottom:4px;}
.rekening-box strong{font-size:15px;color:var(--text-dark);}
.rekening-box .rek-nomor{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.5px;}

/* Kotak "menunggu konfirmasi" di halaman guru */
.menunggu-box{display:flex;gap:14px;align-items:flex-start;padding:16px;
  background:var(--orange-soft);border-radius:12px;}
.menunggu-box .material-icons{color:#d97706;font-size:24px;flex-shrink:0;}
.menunggu-box p{margin:0 0 6px;font-size:13.5px;line-height:1.65;}
.menunggu-box p:last-child{margin-bottom:0;font-size:12.5px;}

/* Kartu pembayaran di panel superadmin */
.bayar-kartu{
  display:flex;gap:18px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;
  padding:18px;border:1px solid var(--border-color);border-radius:12px;margin-bottom:12px;
}
.bayar-kartu:last-child{margin-bottom:0;}
.bayar-info{flex:1;min-width:260px;}
.bayar-baris{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.bayar-info p{margin:0 0 4px;font-size:13.5px;line-height:1.6;}
.bayar-catatan{display:flex;align-items:center;gap:6px;margin-top:8px !important;
  font-size:12.5px;color:var(--text-muted);}
.bayar-catatan .material-icons{font-size:15px;}
.bayar-aksi{display:flex;flex-direction:column;gap:8px;min-width:210px;}
.bayar-aksi .btn{width:100%;justify-content:center;}
.bayar-aksi .form-tolak{display:flex;gap:6px;}
.bayar-aksi .form-tolak input{flex:1;padding:9px 11px;font-size:12.5px;}
.bayar-aksi .form-tolak .btn{width:auto;padding:9px 13px;}

.text-warning{color:#d97706;}

@media (max-width:640px){
  .spanduk-masa{flex-wrap:wrap;}
  .spanduk-masa .btn{width:100%;justify-content:center;}
  .langganan-status{flex-direction:column;align-items:flex-start;}
  .bayar-aksi{min-width:100%;}
}

/* Daftar keterangan bergaya (halaman Ekspor, Kebijakan) */
.info-list{display:flex;flex-direction:column;gap:14px;}
.info-item{display:flex;gap:13px;align-items:flex-start;padding:14px 16px;
  background:#f9fafb;border:1px solid var(--border-color);border-radius:12px;
  font-size:13.5px;line-height:1.7;color:var(--text-muted);}
.info-item .material-icons{font-size:21px;color:var(--green-primary);flex-shrink:0;margin-top:1px;}
.info-item strong{color:var(--text-dark);}
.info-item.warn{background:var(--orange-soft);border-color:#fcd9a4;color:#92400e;}
.info-item.warn .material-icons{color:#d97706;}
.info-item.warn strong{color:#7c2d12;}

/* Halaman hukum (privasi, syarat) — kartu publik yang lebih lebar & padat teks */
.publik-card.legal{max-width:720px;}
.legal-isi{font-size:14px;line-height:1.85;color:var(--text-dark);}
.legal-isi h2{
  font-size:16px;font-weight:700;margin:28px 0 10px;color:var(--green-primary);
  padding-top:18px;border-top:1px solid var(--border-color);
}
.legal-isi h2:first-child{margin-top:0;padding-top:0;border-top:none;}
.legal-isi p{margin:0 0 12px;}
.legal-isi ul{margin:0 0 14px;padding-left:22px;}
.legal-isi li{margin-bottom:7px;}
.legal-isi strong{color:var(--text-dark);font-weight:700;}
.legal-isi em{color:var(--text-muted);}
/* Blok yang memuat janji pokok — sengaja menonjol agar tidak terlewat
   di antara paragraf yang panjang. */
.legal-tegas{
  background:var(--green-soft);border-left:4px solid var(--green-primary);
  border-radius:0 10px 10px 0;padding:15px 18px;margin:16px 0 18px;
  font-size:13.5px;line-height:1.75;color:#14532d;
}

/* =========================================================================
   KENAIKAN KELAS
   ========================================================================= */

/* Pilihan mode: kelas ikut naik vs tetap di tingkat */
.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;}
.mode-kartu{position:relative;cursor:pointer;margin:0;}
.mode-kartu input{position:absolute;opacity:0;pointer-events:none;}
.mode-isi{
  display:block;padding:20px;border:2px solid var(--border-color);border-radius:14px;
  transition:border-color .15s,background .15s;height:100%;
}
.mode-kartu input:checked + .mode-isi{border-color:var(--green-primary);background:var(--green-soft);}
.mode-ikon{display:block;font-size:28px;color:var(--green-primary);margin-bottom:8px;}
.mode-label{display:block;font-size:15px;font-weight:700;color:var(--text-dark);margin-bottom:5px;}
.mode-ringkas{display:block;font-size:12.8px;color:var(--text-muted);line-height:1.65;}

/* Pintasan tandai-semua */
.pintasan-nasib{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;margin-top:12px;}
.btn-mini{padding:6px 12px;font-size:12.5px;border-radius:8px;}

/* Radio nasib per siswa */
.nasib-pilih{display:flex;flex-wrap:wrap;gap:6px;}
.nasib-pilih label{display:inline-flex;align-items:center;margin:0;cursor:pointer;}
.nasib-pilih input{position:absolute;opacity:0;pointer-events:none;}
.nasib-pilih span{
  display:inline-block;padding:5px 11px;border:1px solid var(--border-color);border-radius:20px;
  font-size:12.3px;font-weight:500;color:var(--text-muted);transition:all .13s;white-space:nowrap;
}
.nasib-pilih input:checked + span{
  background:var(--green-primary);border-color:var(--green-primary);color:#fff;font-weight:600;
}

/* Pratinjau */
.pratinjau-ringkas{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;}
.pr-item{padding:16px;background:#f9fafb;border:1px solid var(--border-color);border-radius:12px;}
.pr-label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;}
.pr-item strong{display:block;font-size:15.5px;color:var(--text-dark);line-height:1.4;}
.pr-item small{display:block;font-size:12.3px;color:var(--text-muted);margin-top:4px;}

.daftar-nama{display:flex;flex-wrap:wrap;gap:7px;}
.nama-pil{
  display:inline-block;padding:6px 13px;background:var(--green-soft);color:var(--green-primary);
  border-radius:20px;font-size:13px;font-weight:500;
}

.konfirmasi-box{border:2px solid #fcd9a4;background:#fffbf5;}
.konfirmasi-box h2{color:#92400e;}
.konfirmasi-box code{background:#fde9c8;padding:2px 7px;border-radius:5px;font-weight:700;}
.konfirmasi-aksi{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}

/* Ringkasan arsip */
.arsip-ringkas{display:flex;flex-wrap:wrap;gap:14px;}
.arsip-item{
  padding:14px 20px;background:#f9fafb;border:1px solid var(--border-color);
  border-radius:12px;text-align:center;min-width:110px;
}
.arsip-item strong{display:block;font-size:24px;font-weight:800;color:var(--green-primary);}
.arsip-item span{display:block;font-size:12.3px;color:var(--text-muted);margin-top:2px;}

@media (max-width:640px){
  .konfirmasi-aksi .btn{width:100%;justify-content:center;}
}

/* Serah terima antar guru */
.opsi-centang{display:flex;gap:12px;align-items:flex-start;cursor:pointer;margin:0;
  padding:16px;border:2px solid var(--border-color);border-radius:12px;transition:all .15s;}
.opsi-centang:has(input:checked){border-color:var(--green-primary);background:var(--green-soft);}
.opsi-centang input{width:18px;height:18px;margin-top:2px;flex-shrink:0;
  accent-color:var(--green-primary);cursor:pointer;}
.opsi-centang span{font-size:13.8px;line-height:1.6;color:var(--text-dark);}
.opsi-centang small{display:block;font-size:12.5px;color:var(--text-muted);
  margin-top:6px;line-height:1.7;}

.kode-serah{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13.5px;font-weight:700;letter-spacing:1px;color:var(--green-primary);
  background:var(--green-soft);padding:4px 10px;border-radius:6px;
}
.input-kode{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:17px !important;letter-spacing:2px;text-transform:uppercase;font-weight:600;
}

/* =========================================================================
   ABSENSI MODE CEPAT — satu ketukan per siswa
   ========================================================================= */
.mode-absen-kepala{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:4px;}
.mode-absen-kepala h2{margin:0;}

.absen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px;}

.absen-kartu{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:15px 11px;border:2px solid var(--border-color);border-radius:14px;
  background:#fff;cursor:pointer;font-family:inherit;text-align:center;
  transition:transform .08s,border-color .15s,background .15s;
  -webkit-tap-highlight-color:transparent;user-select:none;
}
.absen-kartu:active{transform:scale(.96);}
.ak-inisial{
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:14px;font-weight:800;background:#eef1f4;color:#6b7280;
}
.ak-nama{font-size:13px;font-weight:600;color:var(--text-dark);line-height:1.35;}
.ak-status{font-size:11.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;}

/* Warna mengikuti badge yang sudah dipakai di seluruh aplikasi, supaya guru
   tidak perlu menghafal dua sistem warna untuk hal yang sama. */
.absen-kartu.status-belum{background:#fff;}
.absen-kartu.status-belum .ak-status{color:#9ca3af;}
.absen-kartu.status-Hadir{border-color:var(--green-primary);background:var(--green-soft);}
.absen-kartu.status-Hadir .ak-inisial{background:var(--green-primary);color:#fff;}
.absen-kartu.status-Hadir .ak-status{color:var(--green-primary);}
.absen-kartu.status-Izin{border-color:#d97706;background:var(--orange-soft);}
.absen-kartu.status-Izin .ak-inisial{background:#d97706;color:#fff;}
.absen-kartu.status-Izin .ak-status{color:#b45309;}
.absen-kartu.status-Sakit{border-color:#7c3aed;background:var(--purple-soft);}
.absen-kartu.status-Sakit .ak-inisial{background:#7c3aed;color:#fff;}
.absen-kartu.status-Sakit .ak-status{color:#6d28d9;}
.absen-kartu.status-Alpa{border-color:#dc2626;background:var(--red-soft);}
.absen-kartu.status-Alpa .ak-inisial{background:#dc2626;color:#fff;}
.absen-kartu.status-Alpa .ak-status{color:#b91c1c;}

/* Di ponsel, kartu diperbesar agar nyaman diketuk sambil berdiri di kelas. */
@media (max-width:520px){
  .absen-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:9px;}
  .absen-kartu{padding:13px 9px;}
  .ak-inisial{width:36px;height:36px;font-size:13px;}
}

/* =========================================================================
   IMPOR SISWA
   ========================================================================= */
.langkah-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.langkah-item{
  display:flex;align-items:center;gap:9px;padding:10px 16px;border-radius:10px;
  background:#f3f4f6;color:var(--text-muted);font-size:13.5px;font-weight:600;
}
.langkah-no{
  width:22px;height:22px;border-radius:50%;background:#d1d5db;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;
}
.langkah-item.aktif{background:var(--green-soft);color:var(--green-primary);}
.langkah-item.aktif .langkah-no{background:var(--green-primary);}
.langkah-item.lewat{background:#fff;border:1px solid var(--green-primary);color:var(--green-primary);}
.langkah-item.lewat .langkah-no{background:var(--green-primary);}

.peta-select{width:100%;}
tr.baris-galat{background:#fef6f6;}
tr.baris-galat td{color:#7f1d1d;}