/* =========================================================================
   SIKA — Guru Piket & Dashboard KBM
   -------------------------------------------------------------------------
   Seluruh warna diambil dari token pada tokens.css sehingga mode malam ikut
   bekerja tanpa penyesuaian tambahan. Panel gelap (sambutan piket & denyut
   KBM) memakai --panel-dalam / --panel-aksen, bukan tangga --biru-, karena
   tangga itu arahnya dibalik saat mode malam.
   ====================================================================== */

/* -------------------------------------------------------------------------
   Navigasi tanggal
   ---------------------------------------------------------------------- */

.s-piket-nav {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	flex-wrap: wrap;
}

.s-piket-tanggal .s-input {
	width: 168px;
	font-variant-numeric: tabular-nums;
}

.s-nonaktif {
	opacity: 0.4;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
   Panel sambutan petugas piket
   ---------------------------------------------------------------------- */

.s-piket-sambut,
.s-kbm-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-6);
	flex-wrap: wrap;
	padding: var(--s-7);
	border-radius: var(--r-2xl);
	background: var(--panel-dalam);
	color: #fff;
	box-shadow: var(--bayang-lg);
}

.s-piket-sambut-isi,
.s-kbm-hero-utama {
	flex: 1 1 340px;
	min-width: 0;
}

.s-piket-lencana {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: var(--r-bulat);
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.22);
	font-size: var(--t-2xs);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.s-piket-lencana .s-ikon { width: 14px; height: 14px; }

.s-piket-sambut-judul,
.s-kbm-hero-judul {
	margin-top: var(--s-4);
	font-size: var(--t-2xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.25;
	color: #fff;
}

.s-piket-sambut-ket,
.s-kbm-hero-ket {
	margin-top: var(--s-2);
	font-size: var(--t-md);
	font-weight: 500;
	color: rgba(255, 255, 255, 0.78);
	line-height: 1.6;
}

.s-kbm-hero-alarm {
	color: #FFD48A;
	font-weight: 700;
}

.s-piket-status-baris {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin-top: var(--s-4);
	flex-wrap: wrap;
}

/* Cincin di atas panel gelap: jalurnya putih tembus pandang, bukan
   --permukaan-3 yang menjadi gelap saat mode malam. */
.s-piket-sambut .s-cincin-jalur,
.s-kbm-hero .s-cincin-jalur {
	stroke: rgba(255, 255, 255, 0.22);
}

.s-piket-sambut .s-donat-nilai,
.s-kbm-hero .s-donat-nilai { color: #fff; }

.s-piket-sambut .s-donat-label,
.s-kbm-hero .s-donat-label { color: rgba(255, 255, 255, 0.72); }

/* -------------------------------------------------------------------------
   Denyut KBM (panel dashboard)
   ---------------------------------------------------------------------- */

.s-kbm-hero-angka {
	display: flex;
	gap: var(--s-6);
	margin-top: var(--s-6);
	flex-wrap: wrap;
}

.s-kbm-hero-sel {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-left: var(--s-4);
	border-left: 2px solid rgba(255, 255, 255, 0.22);
}

.s-kbm-hero-nilai {
	font-size: var(--t-2xl);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
}

.s-kbm-hero-label {
	font-size: var(--t-2xs);
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* -------------------------------------------------------------------------
   Daftar sesi yang diawasi
   ---------------------------------------------------------------------- */

.s-piket-jam-kepala {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: 9px var(--s-6);
	background: var(--permukaan-3);
	border-bottom: 1px solid var(--garis-lembut);
	border-top: 1px solid var(--garis-lembut);
	position: sticky;
	top: 0;
	z-index: 2;
}

.s-piket-jam-no {
	font-size: var(--t-xs);
	font-weight: 800;
	color: var(--teks-2);
	letter-spacing: 0.02em;
}

.s-piket-jam-waktu {
	font-size: var(--t-2xs);
	font-weight: 600;
	color: var(--teks-4);
	font-variant-numeric: tabular-nums;
}

.s-piket-sesi {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding: var(--s-4) var(--s-6);
	border-bottom: 1px solid var(--garis-lembut);
	transition: background var(--cepat);
	flex-wrap: wrap;
}

.s-piket-sesi:last-child { border-bottom: 0; }
.s-piket-sesi:hover { background: var(--permukaan-2); }

.s-piket-sesi--berlangsung {
	background: var(--sukses-50);
	box-shadow: inset 3px 0 0 var(--sukses-500);
}

.s-piket-sesi--berlangsung:hover { background: var(--sukses-100); }

.s-piket-sesi--tercatat { background: transparent; }

.s-piket-sesi--kosong {
	background: var(--bahaya-50);
	box-shadow: inset 3px 0 0 var(--bahaya-500);
}

.s-piket-sesi--kosong:hover { background: var(--bahaya-100); }

.s-piket-sesi-guru {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	flex: 1 1 260px;
	min-width: 0;
}

.s-piket-sesi-hasil {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	flex-wrap: wrap;
	flex: 0 1 auto;
}

.s-piket-sesi-aksi {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin-left: auto;
	flex-wrap: wrap;
}

/* Pemilih status milik piket: enam tombol, sedikit lebih rapat. */
.s-status-pilih--piket .s-status-tbl { width: 32px; height: 30px; }

.s-status-tbl--terlambat[aria-pressed='true']   { background: var(--peringatan-500); }
.s-status-tbl--tidak_hadir[aria-pressed='true'] { background: var(--bahaya-500); }

.s-pil--infal {
	background: var(--teal-50);
	color: var(--teal-600);
	border-color: var(--teal-100);
}

.s-pil--kosong {
	background: var(--bahaya-50);
	color: var(--bahaya-700);
	border-color: var(--bahaya-100);
}

/* -------------------------------------------------------------------------
   Perizinan siswa
   ---------------------------------------------------------------------- */

.s-izin-jenis {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-2);
}

.s-izin-opsi { cursor: pointer; }

.s-izin-opsi input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.s-izin-opsi-isi {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: 10px var(--s-3);
	border: 1.5px solid var(--garis);
	border-radius: var(--r-md);
	background: var(--permukaan);
	font-size: var(--t-xs);
	font-weight: 600;
	color: var(--teks-2);
	transition: all var(--cepat) var(--ease-keluar);
	line-height: 1.3;
}

.s-izin-opsi-isi .s-ikon { flex-shrink: 0; color: var(--teks-4); }

.s-izin-opsi:hover .s-izin-opsi-isi {
	border-color: var(--biru-300);
	background: var(--biru-50);
}

.s-izin-opsi input:checked + .s-izin-opsi-isi {
	border-color: var(--biru-500);
	background: var(--biru-50);
	color: var(--biru-800);
	box-shadow: var(--bayang-sm);
}

.s-izin-opsi input:checked + .s-izin-opsi-isi .s-ikon { color: var(--biru-600); }
.s-izin-opsi input:focus-visible + .s-izin-opsi-isi { box-shadow: var(--cincin); }

.s-izin-baris {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-4) var(--s-6);
	border-bottom: 1px solid var(--garis-lembut);
	transition: background var(--cepat);
}

.s-izin-baris:last-child { border-bottom: 0; }
.s-izin-baris:hover { background: var(--permukaan-2); }

.s-izin-baris--batal { opacity: 0.55; }
.s-izin-baris--batal .s-tugas-judul { text-decoration: line-through; }

/* -------------------------------------------------------------------------
   Lembar laporan
   ---------------------------------------------------------------------- */

.s-lapor-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
	gap: var(--s-3);
}

.s-lapor-sel {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	background: var(--permukaan-2);
	border: 1px solid var(--garis-lembut);
	border-radius: var(--r-md);
}

.s-lapor-ikon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: var(--r-sm);
	background: var(--permukaan-3);
	color: var(--teks-3);
}

.s-lapor-nilai {
	font-size: var(--t-lg);
	font-weight: 800;
	color: var(--teks);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.s-lapor-label {
	font-size: var(--t-2xs);
	font-weight: 600;
	color: var(--teks-4);
	margin-top: 1px;
}

.s-lapor-baris {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	padding: var(--s-4) var(--s-6);
	border-bottom: 1px solid var(--garis-lembut);
}

.s-lapor-baris:last-child { border-bottom: 0; }
.s-lapor-baris:hover { background: var(--permukaan-2); }

/* -------------------------------------------------------------------------
   Grafik denyut KBM per jam pelajaran
   ---------------------------------------------------------------------- */

.s-kbm-jam {
	display: flex;
	align-items: flex-end;
	gap: var(--s-2);
	height: 176px;
	padding-top: var(--s-4);
}

.s-kbm-jam-kolom {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
	gap: 6px;
	position: relative;
}

.s-kbm-jam-bilah {
	width: 100%;
	max-width: 46px;
	display: flex;
	flex-direction: column;
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--permukaan-3);
	min-height: 6px;
	transition: transform var(--sedang) var(--ease-pegas);
}

.s-kbm-jam-kolom:hover .s-kbm-jam-bilah { transform: scaleY(1.03); }

.s-kbm-seg { display: block; width: 100%; }
.s-kbm-seg--hadir  { background: var(--sukses-500); }
.s-kbm-seg--kosong { background: var(--bahaya-500); }
.s-kbm-seg--belum  { background: var(--abu-300); }

.s-kbm-jam-jml {
	font-size: var(--t-2xs);
	font-weight: 700;
	color: var(--teks-3);
}

.s-kbm-jam-no {
	font-size: var(--t-2xs);
	font-weight: 700;
	color: var(--teks-4);
	width: 22px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--r-xs);
}

.s-kbm-jam-kolom--kini .s-kbm-jam-no {
	background: var(--biru-500);
	color: #fff;
}

.s-kbm-kunci {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	display: inline-block;
}

.s-kbm-kunci--hadir  { background: var(--sukses-500); }
.s-kbm-kunci--kosong { background: var(--bahaya-500); }
.s-kbm-kunci--belum  { background: var(--abu-300); }

/* -------------------------------------------------------------------------
   Tren kehadiran
   ---------------------------------------------------------------------- */

.s-kbm-tren {
	display: flex;
	align-items: flex-end;
	gap: var(--s-2);
	height: 196px;
}

.s-kbm-tren-kolom {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
	gap: 5px;
	padding: var(--s-2) 2px;
	border-radius: var(--r-md);
	transition: background var(--cepat);
}

.s-kbm-tren-kolom:hover { background: var(--permukaan-2); }
.s-kbm-tren-kolom--kini { background: var(--biru-50); }

.s-kbm-tren-nilai {
	font-size: var(--t-2xs);
	font-weight: 700;
	color: var(--teks-3);
	font-variant-numeric: tabular-nums;
}

.s-kbm-tren-bilah {
	width: 100%;
	max-width: 34px;
	border-radius: var(--r-sm) var(--r-sm) 3px 3px;
	min-height: 4px;
	transition: transform var(--sedang) var(--ease-pegas);
}

.s-kbm-tren-kolom:hover .s-kbm-tren-bilah { transform: scaleY(1.04); }

.s-kbm-tren-bilah--hijau  { background: linear-gradient(180deg, var(--sukses-500), var(--sukses-600)); }
.s-kbm-tren-bilah--kuning { background: linear-gradient(180deg, var(--peringatan-500), var(--peringatan-600)); }
.s-kbm-tren-bilah--merah  { background: linear-gradient(180deg, var(--bahaya-500), var(--bahaya-600)); }

.s-kbm-tren-label {
	font-size: var(--t-2xs);
	font-weight: 700;
	color: var(--teks-2);
}

.s-kbm-tren-tgl {
	font-size: 10px;
	font-weight: 600;
	color: var(--teks-4);
}

/* Kartu peringatan kelas tanpa guru */
.s-kartu--waspada {
	border-color: var(--bahaya-100);
	box-shadow: 0 0 0 1px var(--bahaya-100), var(--bayang-md);
}

/* -------------------------------------------------------------------------
   Penugasan piket mingguan (Data Master)
   ---------------------------------------------------------------------- */

.s-piket-pekan {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--s-3);
}

.s-piket-hari {
	display: flex;
	flex-direction: column;
	border: 1.5px solid var(--garis);
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--permukaan);
	min-height: 148px;
}

.s-piket-hari--kosong {
	border-style: dashed;
	border-color: var(--peringatan-100);
	background: var(--peringatan-50);
}

.s-piket-hari-kepala {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-2);
	padding: 9px var(--s-3);
	background: var(--permukaan-3);
	border-bottom: 1px solid var(--garis-lembut);
}

.s-piket-hari--kosong .s-piket-hari-kepala {
	background: var(--peringatan-100);
	border-bottom-color: var(--peringatan-100);
}

.s-piket-hari-nama {
	font-size: var(--t-xs);
	font-weight: 800;
	color: var(--teks-2);
	letter-spacing: 0.01em;
}

.s-piket-hari-jml {
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--r-bulat);
	background: var(--biru-500);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
}

.s-piket-hari--kosong .s-piket-hari-jml { background: var(--peringatan-500); }

.s-piket-hari-isi {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	padding: var(--s-3);
	flex: 1;
}

.s-piket-hari-kosong-teks {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 1;
	font-size: var(--t-2xs);
	font-weight: 600;
	color: var(--peringatan-700);
	text-align: center;
}

.s-piket-kartu {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-2);
	border: 1px solid var(--garis-lembut);
	border-radius: var(--r-md);
	background: var(--permukaan-2);
	transition: all var(--cepat) var(--ease-keluar);
}

.s-piket-kartu:hover {
	border-color: var(--biru-300);
	background: var(--biru-50);
}

.s-piket-kartu--nonaktif { opacity: 0.58; }

.s-piket-gate {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s-4);
	padding: var(--s-5);
	border: 1.5px solid var(--garis);
	border-radius: var(--r-lg);
	background: var(--permukaan-2);
	flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
   Gerbang jurnal (halaman Isi Jurnal & daftar jurnal)
   ---------------------------------------------------------------------- */

.s-gerbang {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding: var(--s-4) var(--s-5);
	border-radius: var(--r-lg);
	border: 1.5px solid var(--garis);
	background: var(--permukaan-2);
	margin-bottom: var(--s-5);
	transition: all var(--sedang) var(--ease-keluar);
}

.s-gerbang-ikon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border-radius: var(--r-md);
	background: var(--permukaan-3);
	color: var(--teks-3);
}

.s-gerbang-judul {
	font-size: var(--t-md);
	font-weight: 700;
	color: var(--teks);
	line-height: 1.35;
}

.s-gerbang-pesan {
	font-size: var(--t-xs);
	font-weight: 500;
	color: var(--teks-3);
	line-height: 1.6;
	margin-top: 2px;
}

.s-gerbang--buka {
	border-color: var(--sukses-100);
	background: var(--sukses-50);
}

.s-gerbang--buka .s-gerbang-ikon {
	background: var(--sukses-100);
	color: var(--sukses-700);
}

.s-gerbang--buka .s-gerbang-judul { color: var(--sukses-700); }

.s-gerbang--tunggu {
	border-color: var(--peringatan-100);
	background: var(--peringatan-50);
}

.s-gerbang--tunggu .s-gerbang-ikon {
	background: var(--peringatan-100);
	color: var(--peringatan-700);
}

.s-gerbang--tunggu .s-gerbang-judul { color: var(--peringatan-700); }

.s-gerbang--kunci {
	border-color: var(--bahaya-100);
	background: var(--bahaya-50);
}

.s-gerbang--kunci .s-gerbang-ikon {
	background: var(--bahaya-100);
	color: var(--bahaya-700);
}

.s-gerbang--kunci .s-gerbang-judul { color: var(--bahaya-700); }
.s-gerbang--kunci .s-gerbang-pesan { color: var(--bahaya-700); }

/* Kartu penugasan yang jurnalnya masih terkunci */
.s-ampu--kunci { opacity: 0.62; }

.s-ampu--kunci:hover {
	border-color: var(--bahaya-300, var(--bahaya-100));
	transform: none;
	box-shadow: var(--bayang-xs);
}

.s-ampu-gembok,
.s-ampu-verif {
	position: absolute;
	top: var(--s-4);
	right: var(--s-4);
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #fff;
}

.s-ampu-gembok { background: var(--bahaya-500); }
.s-ampu-verif  { background: var(--sukses-500); }

.s-ampu-gembok .s-ikon,
.s-ampu-verif .s-ikon { width: 12px; height: 12px; stroke-width: 2.4; }

.s-ampu.dipilih .s-ampu-gembok,
.s-ampu.dipilih .s-ampu-verif { display: none; }

/* -------------------------------------------------------------------------
   Penyesuaian layar kecil
   ---------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.s-piket-pekan { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.s-piket-sambut,
	.s-kbm-hero { padding: var(--s-6); }

	.s-piket-sambut-judul,
	.s-kbm-hero-judul { font-size: var(--t-xl); }

	.s-kbm-hero-angka { gap: var(--s-4); }
	.s-izin-jenis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.s-kbm-tren-tgl { display: none; }
}

@media (max-width: 680px) {
	.s-piket-pekan { grid-template-columns: minmax(0, 1fr); }
	.s-piket-hari { min-height: 0; }

	.s-piket-sesi { padding: var(--s-4); }
	.s-piket-sesi-aksi { margin-left: 0; width: 100%; }
	.s-status-pilih--piket { width: 100%; justify-content: space-between; }
	.s-status-pilih--piket .s-status-tbl { flex: 1; }

	.s-izin-baris,
	.s-lapor-baris { padding: var(--s-4); }

	.s-kbm-jam { height: 140px; }
	.s-kbm-jam-jml { display: none; }

	.s-gerbang { flex-wrap: wrap; }

	.s-piket-nav { width: 100%; }
	.s-piket-tanggal { flex: 1; }
	.s-piket-tanggal .s-input { width: 100%; }
}

/* -------------------------------------------------------------------------
   Mode malam: titik yang tidak tercakup token
   ---------------------------------------------------------------------- */

:root[data-tema='gelap'] .s-kbm-seg--belum,
:root[data-tema='gelap'] .s-kbm-kunci--belum { background: var(--abu-400); }

:root[data-tema='gelap'] .s-piket-hari--kosong { background: var(--peringatan-50); }

/* -------------------------------------------------------------------------
   Cetak
   ---------------------------------------------------------------------- */

@media print {
	.s-piket-nav,
	.s-piket-sesi-aksi,
	.s-tab { display: none !important; }

	.s-piket-sambut,
	.s-kbm-hero {
		box-shadow: none;
		border: 1px solid #ddd;
	}
}