* { box-sizing: border-box; }
[hidden] { display: none !important; }
:root { --navy:#101b9f; --blue:#377dff; --ink:#17213c; --muted:#71809c; --line:#e3e9f2; --surface:#fff; --background:#f7f9fc; --green:#14b886; --orange:#ff9f1c; }
body { margin:0; color:var(--ink); background:var(--background); font-family:"Trebuchet MS","Segoe UI",sans-serif; font-size:13px; }
button { font:inherit; }
.aplikasi { display:flex; min-height:100vh; }
.sidebar { width:262px; flex:0 0 262px; min-height:100vh; padding:20px 12px 16px; background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; }
.profil { display:flex; align-items:center; gap:9px; min-height:58px; padding:8px; border:1px solid var(--line); border-radius:7px; background:#fbfcfe; }
.avatar { display:grid; place-items:center; width:38px; height:38px; border:1px solid #d8e1ec; border-radius:50%; background:#f1f5fa; color:var(--navy); font-weight:800; }
.profil strong,.profil small { display:block; }.profil strong { font-size:11px; }.profil small { margin-top:3px; color:var(--muted); font-size:10px; }
.label-menu { margin:31px 5px 10px 12px; color:#273047; font-size:10px; font-weight:800; }.navigasi { display:grid; gap:3px; }
.tab-btn { width:100%; padding:10px 8px; border:0; border-radius:6px; background:transparent; color:#303847; cursor:pointer; text-align:left; font-size:12px; font-weight:700; text-transform:uppercase; }.tab-btn span { display:inline-block; width:22px; color:#263044; font-size:16px; text-align:center; text-transform:none; }.tab-btn:hover,.tab-btn.aktif { background:#eee7fc; color:#202487; }.tab-btn.aktif span { color:var(--navy); }
.sidebar-bawah { margin-top:auto; padding-top:20px; border-top:1px solid var(--line); }.keluar { width:100%; padding:7px; border:1px solid #ffcaca; border-radius:20px; background:#fff3f3; color:#c52e2e; cursor:pointer; font-size:11px; font-weight:800; }
.konten { width:calc(100% - 262px); max-width:1420px; padding:27px 26px 42px; }.judul-halaman { display:flex; align-items:end; justify-content:space-between; margin:0 0 17px; }.eyebrow { margin:0 0 5px; color:var(--navy); font-size:10px; font-weight:800; letter-spacing:.05em; } h1,h2,p { margin-top:0; } h1 { margin-bottom:0; color:var(--navy); font-size:20px; } h2 { margin-bottom:5px; color:var(--navy); font-size:14px; }.tanggal-hari { color:var(--muted); font-size:11px; }
.halaman { display:none; }.halaman.aktif { display:block; }
.kartu-ringkasan { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.kartu-stat,.panel { border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:0 8px 18px rgba(32,64,116,.04); }.kartu-stat { display:flex; align-items:center; gap:16px; min-height:87px; padding:15px 20px; }.kartu-stat p { margin-bottom:5px; color:var(--navy); font-size:11px; font-weight:800; }.kartu-stat strong { display:block; margin-bottom:4px; color:var(--navy); font-size:26px; line-height:1; }.kartu-stat small,.panel-heading p { color:var(--muted); font-size:10px; }.ikon-stat { display:grid; place-items:center; width:35px; height:35px; border-radius:9px; font-size:20px; font-weight:900; }.biru .ikon-stat { background:#e7efff; color:var(--blue); }.hijau .ikon-stat { background:#def8ef; color:var(--green); }.jingga .ikon-stat { background:#fff0d9; color:var(--orange); font-size:12px; }
.grid-dashboard { display:grid; grid-template-columns:1.05fr 1.35fr; gap:14px; margin-top:14px; }.panel { padding:16px 14px; }.panel-heading { display:flex; align-items:start; justify-content:space-between; margin-bottom:16px; }.panel-heading p { margin-bottom:0; }.lingkaran-wrap { display:flex; align-items:center; justify-content:space-around; min-height:130px; }.lingkaran { display:grid; place-items:center; width:112px; height:112px; border:10px solid #e9f0f7; border-top-color:var(--navy); border-left-color:var(--navy); border-radius:50%; text-align:center; transform:rotate(-40deg); }.lingkaran strong,.lingkaran small { display:block; transform:rotate(40deg); }.lingkaran strong { color:#11182d; font-size:21px; }.lingkaran small { color:var(--muted); font-size:9px; }.legenda { display:grid; gap:13px; color:#45516b; font-size:11px; }.legenda span { display:flex; align-items:center; gap:6px; }.legenda b { margin-left:9px; color:var(--ink); }.dot { display:inline-block; width:8px; height:8px; border-radius:50%; }.biru-bg { background:#dbe5f1; }.hijau-bg { background:var(--green); }
.aksi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.aksi-grid button { min-height:88px; padding:12px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); cursor:pointer; text-align:left; box-shadow:0 6px 12px rgba(34,73,130,.04); }.aksi-grid button:hover { border-color:#c3d2f4; transform:translateY(-2px); }.aksi-grid span { display:block; margin-bottom:8px; color:var(--blue); font-size:20px; }.aksi-grid b,.aksi-grid small { display:block; }.aksi-grid b { font-size:11px; }.aksi-grid small { margin-top:4px; color:var(--muted); font-size:9px; }
.tabel-panel { margin-top:14px; }.link-button { border:0; background:transparent; color:var(--navy); cursor:pointer; font-size:11px; font-weight:800; }.tabel-scroll { overflow-x:auto; } table { width:100%; border-collapse:collapse; min-width:500px; } th,td { padding:10px; border-top:1px solid var(--line); text-align:left; font-size:10px; } th { color:#50607a; font-size:9px; } td { color:#41516c; }.kosong { color:var(--muted); text-align:center; }.status { display:inline-block; padding:4px 8px; border-radius:3px; background:#e2f8ee; color:#11835e; font-size:9px; font-weight:800; }
.halaman > .kotak { width:100%; max-width:none; padding:24px; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:0 8px 18px rgba(32,64,116,.04); }.kotak h2 { border-bottom:1px solid var(--line); padding-bottom:13px; }.kotak label { display:block; margin:16px 0 7px; color:#34405a; font-size:11px; font-weight:800; }
.kotak-siswa { max-width:none!important; padding:0!important; overflow:hidden; }.panel-topline { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 20px 14px; border-bottom:1px solid var(--line); }.panel-topline h2 { margin:0 0 4px; padding:0; border:0; }.panel-topline p { margin:0; color:var(--muted); font-size:10px; }.alat-atas { margin:0; flex-wrap:wrap; justify-content:flex-end; }.alat-atas .tombol-sekunder { flex:0 0 auto; padding:8px 12px; }.subjudul-panel { display:flex; align-items:center; gap:8px; padding:14px 20px 10px; color:var(--navy); font-size:13px; }.subjudul-panel span { color:var(--blue); font-size:18px; }.form-siswa-grid { display:grid; grid-template-columns:1.05fr 1.4fr 1fr .65fr; gap:12px; padding:0 20px; }.form-siswa-grid label { margin:0 0 6px; }.form-siswa-grid textarea { min-height:38px; resize:vertical; }.aksi-form-siswa { display:flex; gap:8px; padding:16px 20px; border-bottom:1px solid var(--line); }.aksi-form-siswa .tombol-tambah { width:auto; min-width:145px; margin:0; padding:9px 16px; }.aksi-form-siswa .tombol-batal { width:auto; margin:0; padding:9px 14px; }.info-excel { display:flex; align-items:center; gap:12px; margin:16px 20px 0; padding:12px 14px; border:1px dashed #9bdfb7; border-radius:8px; background:#f2fff5; color:#397a50; font-size:10px; }.info-excel strong { color:#237b45; white-space:nowrap; }.info-excel span { padding:4px 7px; border-radius:4px; background:#e4f6e8; font-family:Consolas,monospace; }.kotak-siswa .daftar-item { margin:16px 20px 20px; }
.kotak-siswa { max-width:none!important; }
input,select,textarea { width:100%; padding:11px 12px; border:1px solid #d9e1ed; border-radius:7px; background:#fbfcfe; color:var(--ink); font:inherit; } input:focus,select:focus,textarea:focus { outline:2px solid #d6e2ff; border-color:var(--blue); } button.tombol-tambah { width:100%; margin-top:18px; padding:11px; border:0; border-radius:7px; background:var(--navy); color:#fff; cursor:pointer; font-weight:800; }
.alat-data { display:flex; gap:8px; margin-top:10px; }.tombol-sekunder { flex:1; padding:9px; border:1px solid #cbd7eb; border-radius:7px; background:#f7f9fd; color:var(--navy); cursor:pointer; font-size:11px; font-weight:800; }.tombol-sekunder:hover { background:#edf2ff; border-color:var(--blue); }
.daftar-item { margin-top:20px; }.item { display:flex; justify-content:space-between; gap:10px; margin-bottom:9px; padding:13px; border:1px solid var(--line); border-left:3px solid var(--blue); border-radius:7px; background:#fbfcfe; }.item-kiri { flex:1; line-height:1.6; }.item-kiri strong { font-size:12px; }.item-kiri small { color:var(--muted); font-size:10px; }.item-kanan { display:flex; gap:5px; }.tombol-selesai,.tombol-hapus { padding:6px 9px; border:0; border-radius:5px; color:#fff; cursor:pointer; }.tombol-selesai { background:var(--green); }.tombol-hapus { background:#e95d67; }.tugas-selesai { opacity:.65; text-decoration:line-through; }.laporan { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.kotak-laporan { padding:20px; border:1px solid var(--line); border-radius:8px; font-size:12px; font-weight:800; }.kotak-laporan span { display:block; margin-top:10px; font-size:19px; }.masuk { color:#1476d4; background:#edf6ff; }.keluar { color:#d34656; background:#fff0f1; }.saldo { color:#c47b11; background:#fff8e8; }
.tabel-siswa-scroll { overflow-x:auto; margin-top:20px; border:1px solid var(--line); border-radius:8px; }.tabel-siswa { width:100%; min-width:680px; border-collapse:collapse; background:#fff; }.tabel-siswa th { padding:11px 12px; border-bottom:1px solid #dbe4ef; background:#f6f8fb; color:#566782; font-size:10px; font-weight:800; letter-spacing:.03em; text-align:left; white-space:nowrap; }.tabel-siswa td { padding:12px; border-bottom:1px solid #e8edf4; color:#465570; font-size:11px; line-height:1.45; vertical-align:middle; }.tabel-siswa tbody tr:nth-child(even) { background:#fbfcfe; }.tabel-siswa tbody tr:hover { background:#f1f5ff; }.tabel-siswa th:nth-child(1) { width:20%; }.tabel-siswa th:nth-child(2) { width:34%; }.tabel-siswa th:nth-child(3) { width:20%; }.tabel-siswa th:nth-child(4) { width:12%; }.tabel-siswa th:nth-child(5) { width:14%; text-align:center; }.tabel-siswa .aksi-siswa { text-align:center; white-space:nowrap; }.tabel-siswa .tombol-edit,.tabel-siswa .tombol-hapus { margin:0 2px; padding:8px 10px; }
.form-tabungan-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:12px; padding:0 20px; }.form-tabungan-grid label { margin:0 0 6px; }.kolom-keterangan { grid-column:span 2; }.kotak-tabungan .daftar-item { margin:16px 20px 20px; }.tabel-tabungan-scroll { overflow-x:auto; margin-top:20px; border:1px solid var(--line); border-radius:8px; }.tabel-tabungan { width:100%; min-width:760px; border-collapse:collapse; background:#fff; }.tabel-tabungan th { padding:11px 12px; border-bottom:1px solid #dbe4ef; background:#f6f8fb; color:#566782; font-size:10px; font-weight:800; text-align:left; white-space:nowrap; }.tabel-tabungan td { padding:12px; border-bottom:1px solid #e8edf4; color:#465570; font-size:11px; vertical-align:middle; }.tabel-tabungan tbody tr:nth-child(even) { background:#fbfcfe; }.tabel-tabungan tbody tr:hover { background:#f1f5ff; }.tabel-tabungan .aksi-siswa { text-align:center; white-space:nowrap; }.tabel-tabungan .tombol-hapus { padding:8px 10px; }.tabel-tabungan .nominal-masuk { color:#11835e; font-weight:800; }.tabel-tabungan .nominal-keluar { color:#d34656; font-weight:800; }.status-keluar { background:#fff0f1; color:#d34656; }
.form-pinjaman-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr 1.5fr; gap:12px; padding:0 20px; }.form-pinjaman-grid label { margin:0 0 6px; }.kotak-pinjaman .daftar-item { margin:16px 20px 20px; }.saldo-pinjaman { margin:16px 20px 0; padding:12px 14px; border:1px solid #dbe4ef; border-radius:7px; background:#f8faff; color:#566782; font-size:11px; }.saldo-pinjaman strong { color:var(--navy); font-size:var(--fs-judul); }.tabel-pinjaman-scroll { overflow-x:auto; margin-top:20px; border:1px solid var(--line); border-radius:8px; }.tabel-pinjaman { width:100%; min-width:680px; border-collapse:collapse; background:#fff; }.tabel-pinjaman th { padding:11px 12px; border-bottom:1px solid #dbe4ef; background:#f6f8fb; color:#566782; font-size:10px; font-weight:800; text-align:left; white-space:nowrap; }.tabel-pinjaman td { padding:12px; border-bottom:1px solid #e8edf4; color:#465570; font-size:11px; vertical-align:middle; }.tabel-pinjaman tbody tr:nth-child(even) { background:#fbfcfe; }.tabel-pinjaman .aksi-siswa { text-align:center; white-space:nowrap; }
.tombol-edit { padding:6px 9px; border:0; border-radius:5px; background:#e8efff; color:var(--navy); cursor:pointer; }.tombol-batal { width:100%; margin-top:8px; padding:9px; border:1px solid #d5ddeb; border-radius:7px; background:#fff; color:var(--muted); cursor:pointer; font-size:11px; font-weight:800; }.frekuensi { color:#6b4ab6; background:#f4efff; }
.kotak-laporan-halaman .laporan { grid-template-columns:repeat(4,1fr); }
.filter-laporan { display:flex; align-items:center; gap:10px; margin:16px 20px 0; max-width:360px; }.filter-laporan label { margin:0; color:#34405a; font-size:11px; font-weight:800; white-space:nowrap; }.filter-laporan select { padding:9px 10px; }
@keyframes muncul { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:760px) { .sidebar { width:68px; flex-basis:68px; padding:12px 8px; }.profil { justify-content:center; padding:7px 0; }.profil>div:last-child,.label-menu,.tab-btn:not(.aktif)::after,.tab-btn { font-size:0; }.tab-btn span { width:100%; font-size:18px; }.tab-btn.aktif { font-size:0; }.sidebar-bawah { padding-top:12px; }.keluar { font-size:0; }.keluar::after { content:""; font-size:17px; }.konten { width:calc(100% - 68px); padding:18px 12px 30px; }.kartu-ringkasan,.grid-dashboard,.laporan { grid-template-columns:1fr; }.kartu-stat { min-height:74px; }.lingkaran-wrap { justify-content:space-evenly; }.aksi-grid { grid-template-columns:1fr; }.aksi-grid button { min-height:auto; }.tanggal-hari { display:none; } }
@media (max-width:900px) { .panel-topline { align-items:flex-start; flex-direction:column; }.alat-atas { width:100%; justify-content:flex-start; }.form-siswa-grid { grid-template-columns:1fr 1fr; }.kolom-alamat { grid-column:span 2; } }
@media (max-width:900px) { .form-tabungan-grid { grid-template-columns:1fr 1fr; }.form-tabungan-grid .kolom-keterangan { grid-column:span 2; } }
@media (max-width:900px) { .form-pinjaman-grid { grid-template-columns:1fr 1fr; }.form-pinjaman-grid .kolom-keterangan { grid-column:span 2; } }
@media (max-width:900px) { .kotak-laporan-halaman .laporan { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .form-siswa-grid { grid-template-columns:1fr; }.kolom-alamat { grid-column:auto; }.info-excel { align-items:flex-start; flex-direction:column; gap:6px; }.alat-atas .tombol-sekunder { flex:1; }.aksi-form-siswa { flex-wrap:wrap; } }
@media (max-width:560px) { .form-tabungan-grid { grid-template-columns:1fr; }.form-tabungan-grid .kolom-keterangan { grid-column:auto; } }
@media (max-width:560px) { .form-pinjaman-grid { grid-template-columns:1fr; }.form-pinjaman-grid .kolom-keterangan { grid-column:auto; }.saldo-pinjaman { margin-left:14px; margin-right:14px; } }

/* Brand and responsive application shell */
body { background:#f3f6fb; color:#17213c; }
.sidebar { position:sticky; top:0; height:100vh; box-shadow:8px 0 24px rgba(32,64,116,.04); }
.brand { display:flex; align-items:center; gap:10px; min-height:52px; margin:0 3px 17px; padding:5px 4px 16px; border-bottom:1px solid var(--line); }
.brand-mark { display:grid; place-items:center; width:37px; height:37px; border-radius:10px; background:linear-gradient(145deg,#101b9f,#377dff); color:#fff; box-shadow:0 6px 12px rgba(55,125,255,.24); }
.brand-mark span { font-size:12px; font-weight:900; letter-spacing:.03em; }
.brand strong,.brand small { display:block; }.brand strong { color:var(--navy); font-size:14px; letter-spacing:-.02em; }.brand small { margin-top:3px; color:var(--muted); font-size:9px; }
.profil { background:#f8faff; }
.konten { max-width:none; padding:30px 32px 48px; }
.judul-halaman { margin-bottom:22px; }
.eyebrow { letter-spacing:.1em; font-size:9px; }
.judul-halaman h1 { font-size:28px; letter-spacing:-.03em; }
.panel,.kartu-stat,.halaman > .kotak { box-shadow:0 8px 24px rgba(32,64,116,.05); }
.tab-btn { transition:background .2s ease,color .2s ease,transform .2s ease; }
.tab-btn:hover { transform:translateX(2px); }
.tabel-siswa td,.tabel-tabungan td { height:48px; }
.tombol-sekunder,.tombol-tambah,.tombol-edit,.tombol-hapus,.tombol-selesai { transition:filter .2s ease,transform .2s ease; }
.tombol-sekunder:hover,.tombol-tambah:hover,.tombol-edit:hover,.tombol-hapus:hover,.tombol-selesai:hover { filter:brightness(.97); transform:translateY(-1px); }

@media (max-width:760px) {
	.aplikasi { display:block; min-height:100vh; }
	.sidebar { position:relative; width:100%; height:auto; min-height:0; padding:12px 14px 10px; border-right:0; border-bottom:1px solid var(--line); box-shadow:0 4px 18px rgba(32,64,116,.06); }
	.brand { margin:0 0 10px; padding:0 0 10px; border-bottom:0; }
	.brand-mark { width:34px; height:34px; }
	.brand strong { font-size:13px; }
	.profil { position:absolute; top:12px; right:14px; min-height:34px; padding:4px 7px; border:0; background:transparent; }
	.profil .avatar { width:32px; height:32px; }
	.profil > div:last-child { display:block; }
	.profil strong { font-size:10px; }.profil small { font-size:8px; }
	.label-menu { display:none; }
	.navigasi { display:flex; gap:5px; width:100%; overflow-x:auto; padding:4px 0 2px; scrollbar-width:none; }
	.navigasi::-webkit-scrollbar { display:none; }
	.tab-btn,.tab-btn.aktif,.navigasi .tab-btn:not(.aktif) { flex:0 0 auto; width:auto; padding:9px 11px; font-size:11px; white-space:nowrap; }
	.tab-btn span { width:auto; margin-right:4px; font-size:14px; }
	.sidebar-bawah { position:absolute; top:12px; right:8px; padding:0; border:0; }
	.keluar { width:30px; height:30px; padding:0; font-size:0; border-radius:50%; }
	.keluar::after { content:""; font-size:15px; }
	.konten { width:100%; padding:22px 14px 34px; }
	.judul-halaman { margin-bottom:16px; }
	.judul-halaman h1 { font-size:24px; }
	.kartu-ringkasan { gap:8px; }
	.kartu-stat { min-height:70px; padding:13px 14px; }
	.kartu-stat strong { font-size:22px; }
	.panel-topline { padding:15px 14px 12px; }
	.form-siswa-grid,.form-tabungan-grid { padding:0 14px; }
	.aksi-form-siswa { padding:14px; }
	.info-excel { margin-left:14px; margin-right:14px; }
	.kotak-siswa .daftar-item,.kotak-tabungan .daftar-item { margin-left:14px; margin-right:14px; }
	.filter-laporan { margin-left:14px; margin-right:14px; max-width:none; }
}

/* =========================================================
   SISTEM TIPOGRAFI
   Satu sumber aturan untuk jenis huruf, ukuran, bobot, dan
   jarak huruf di seluruh aplikasi. Ditaruh paling akhir agar
   menimpa ukuran lama yang tersebar di atas.
   ========================================================= */
:root {
	--font-utama: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-angka: "Inter", "Segoe UI", Consolas, monospace;
	/* Skala ukuran: naik bertahap, tidak ada ukuran liar di luar daftar ini */
	--fs-mikro: 11px;  /* label kapital terkecil */
	--fs-kecil: 12px;  /* keterangan pendukung */
	--fs-tabel: 13px;  /* isi tabel dan tombol kecil */
	--fs-dasar: 14px;  /* teks isi, input, tombol */
	--fs-sedang: 15px; /* teks utama */
	--fs-menengah: 16px;/* judul sekunder dan nama sistem */
	--fs-judul: 18px;  /* judul panel */
	--fs-angka: 24px;  /* nominal pada kartu */
	--fs-besar: 32px;  /* angka statistik dashboard */
	--fs-halaman: 28px;/* judul halaman */
	--tinggi-header: 95px;/* tinggi baris atas: merek sidebar = header halaman */
	/* Skala ikon: satu sumber ukuran supaya ikon ikut proporsional dengan teks */
	--ikon-dasar: 19px;   /* ikon umum di dalam tombol dan teks */
	--ikon-menu: 20px;    /* ikon menu sidebar */
	--ikon-kartu: 25px;   /* ikon kartu statistik dashboard */
	/* Bobot: hanya empat tingkat supaya konsisten */
	--fw-biasa: 400;
	--fw-medium: 500;
	--fw-tebal: 600;
	--fw-kuat: 700;
	/* Jarak huruf */
	--jarak-kapital: .08em;
	--jarak-rapat: -.02em;
}

body {
	font-family: var(--font-utama);
	font-size: var(--fs-sedang);
	font-weight: var(--fw-biasa);
	line-height: 1.55;
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
input, select, textarea, button { font-family: inherit; }

/* --- Judul --- */
h1, h2, h3 { line-height: 1.28; }
.judul-halaman h1 { font-size: var(--fs-halaman); font-weight: var(--fw-kuat); letter-spacing: -.03em; }
.eyebrow { font-size: var(--fs-mikro); font-weight: var(--fw-tebal); letter-spacing: .12em; text-transform: uppercase; }
.tanggal-hari { font-size: var(--fs-tabel); font-weight: var(--fw-medium); }
h2, .panel-heading h2, .panel-topline h2, .kotak h2 { font-size: var(--fs-judul); font-weight: var(--fw-tebal); letter-spacing: -.01em; }
.panel-topline p, .panel-heading p { font-size: var(--fs-kecil); font-weight: var(--fw-biasa); line-height: 1.5; }
.subjudul-panel strong { font-size: var(--fs-dasar); font-weight: var(--fw-tebal); letter-spacing: -.01em; }
/* Judul bagian di halaman Laporan: garis aksen menggantikan emoji */
.kotak h2.judul-rekap { display: flex; align-items: center; gap: 9px; margin: 26px 0 12px; padding: 0; border: 0; font-size: var(--fs-menengah); font-weight: var(--fw-tebal); }
.kotak h2.judul-rekap::before { content: ""; flex: 0 0 auto; width: 3px; height: 15px; border-radius: 2px; background: var(--blue); }

/* --- Sidebar --- */
.brand strong { font-size: var(--fs-menengah); font-weight: var(--fw-kuat); letter-spacing: var(--jarak-rapat); }
.brand small { font-size: var(--fs-mikro); font-weight: var(--fw-medium); letter-spacing: .02em; }
.brand-mark span { font-size: var(--fs-dasar); font-weight: var(--fw-kuat); letter-spacing: .04em; }
.profil strong { font-size: var(--fs-tabel); font-weight: var(--fw-tebal); }
.profil small { font-size: var(--fs-kecil); font-weight: var(--fw-biasa); }
.label-menu { font-size: var(--fs-mikro); font-weight: var(--fw-tebal); letter-spacing: var(--jarak-kapital); text-transform: uppercase; }
.tab-btn { font-size: var(--fs-tabel); font-weight: var(--fw-tebal); letter-spacing: .04em; }
.tab-btn.aktif { font-weight: var(--fw-kuat); }
.tab-btn span { font-weight: var(--fw-biasa); letter-spacing: 0; }
.keluar { font-size: var(--fs-tabel); font-weight: var(--fw-tebal); letter-spacing: .01em; }

/* --- Kartu statistik dashboard --- */
.kartu-stat p { font-size: var(--fs-kecil); font-weight: var(--fw-tebal); letter-spacing: .06em; text-transform: uppercase; }
.kartu-stat strong { font-size: var(--fs-besar); font-weight: var(--fw-kuat); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kartu-stat small { font-size: var(--fs-kecil); font-weight: var(--fw-biasa); }
.ikon-stat { font-weight: var(--fw-tebal); }
.lingkaran strong { font-size: var(--fs-angka); font-weight: var(--fw-kuat); letter-spacing: var(--jarak-rapat); font-variant-numeric: tabular-nums; }
.lingkaran small { font-size: var(--fs-mikro); font-weight: var(--fw-medium); letter-spacing: .04em; }
.legenda { font-size: var(--fs-tabel); font-weight: var(--fw-biasa); }
.legenda b { font-weight: var(--fw-tebal); font-variant-numeric: tabular-nums; }
.aksi-grid b { font-size: var(--fs-tabel); font-weight: var(--fw-tebal); letter-spacing: -.01em; }
.aksi-grid small { font-size: var(--fs-mikro); font-weight: var(--fw-biasa); }
.aksi-grid span { font-weight: var(--fw-biasa); }

/* --- Kartu ringkasan halaman Laporan --- */
.kotak-laporan { font-weight: var(--fw-medium); }
.kotak-laporan small { display: flex; align-items: center; gap: 7px; font-size: var(--fs-kecil); font-weight: var(--fw-tebal); letter-spacing: .07em; text-transform: uppercase; }
.kotak-laporan .tanda { flex: 0 0 auto; font-size: var(--fs-tabel); font-style: normal; font-weight: var(--fw-biasa); line-height: 1; opacity: .75; }
.kotak-laporan span { margin-top: 9px; font-size: var(--fs-angka); font-weight: var(--fw-kuat); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* --- Tabel --- */
th, .tabel-siswa th, .tabel-tabungan th, .tabel-pinjaman th {
	font-size: var(--fs-mikro); font-weight: var(--fw-tebal);
	letter-spacing: var(--jarak-kapital); text-transform: uppercase; white-space: nowrap;
}
td, .tabel-siswa td, .tabel-tabungan td, .tabel-pinjaman td {
	font-size: var(--fs-tabel); font-weight: var(--fw-biasa); line-height: 1.5;
	font-variant-numeric: tabular-nums;
}
td strong { font-weight: var(--fw-tebal); letter-spacing: -.01em; }
/* Kolom angka rata kanan supaya digit rupiah sejajar antar baris */
th.angka, td.angka { text-align: right; white-space: nowrap; }
.tabel-tabungan .nominal-masuk, .tabel-tabungan .nominal-keluar,
td.nominal-masuk, td.nominal-keluar { font-weight: var(--fw-tebal); }
.kosong { font-size: var(--fs-tabel); font-weight: var(--fw-biasa); font-style: italic; }
.status { font-size: var(--fs-mikro); font-weight: var(--fw-tebal); letter-spacing: .03em; }

/* --- Formulir --- */
.kotak label, .form-siswa-grid label, .form-tabungan-grid label, .form-pinjaman-grid label, .filter-laporan label {
	font-size: var(--fs-tabel); font-weight: var(--fw-tebal); letter-spacing: 0;
}
input, select, textarea { font-size: var(--fs-dasar); font-weight: var(--fw-biasa); }
input::placeholder, textarea::placeholder { font-weight: var(--fw-biasa); color: #9aa6bd; }
.saldo-pinjaman { font-size: var(--fs-tabel); font-weight: var(--fw-biasa); }
.saldo-pinjaman strong { font-weight: var(--fw-kuat); letter-spacing: var(--jarak-rapat); font-variant-numeric: tabular-nums; }
.info-excel { font-size: var(--fs-kecil); font-weight: var(--fw-biasa); }
.info-excel strong { font-weight: var(--fw-tebal); }
.info-excel span { font-size: var(--fs-mikro); font-weight: var(--fw-medium); letter-spacing: .02em; }

/* --- Tombol --- */
.tombol-tambah { font-size: var(--fs-dasar); font-weight: var(--fw-tebal); letter-spacing: .01em; }
.tombol-sekunder { display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-tabel); font-weight: var(--fw-tebal); letter-spacing: .01em; white-space: nowrap; }
.ikon-tombol { margin-right: 7px; font-size: var(--fs-dasar); font-weight: var(--fw-biasa); line-height: 1; opacity: .8; }
.tombol-batal, .link-button { font-size: var(--fs-tabel); font-weight: var(--fw-tebal); }
.tombol-edit, .tombol-hapus, .tombol-selesai { font-size: var(--fs-kecil); font-weight: var(--fw-tebal); letter-spacing: .02em; white-space: nowrap; }
.item-kiri strong { font-size: var(--fs-dasar); font-weight: var(--fw-tebal); letter-spacing: -.01em; }
.item-kiri small { font-size: var(--fs-kecil); font-weight: var(--fw-biasa); }

@media (max-width:760px) {
	.judul-halaman h1 { font-size: 24px; }
	.tab-btn, .tab-btn.aktif, .navigasi .tab-btn:not(.aktif) { font-size: var(--fs-tabel); font-weight: var(--fw-tebal); }
	.kartu-stat strong { font-size: 27px; }
	.kotak-laporan span { font-size: 22px; }
}

/* =========================================================
   LAPORAN WHATSAPP PER SISWA
   ========================================================= */
.halaman > .kotak + .kotak { margin-top: 14px; }
.kotak-wa { padding: 0 !important; overflow: hidden; }
.alat-wa { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 16px 20px 0; }
.alat-wa[hidden], .alat-wa .alat-wa-kolom[hidden] { display: none; }
.alat-wa-kolom { flex: 0 0 auto; min-width: 168px; }
.alat-wa-kolom label { display: block; margin: 0 0 6px; color: #34405a; }
.alat-wa-kolom select, .alat-wa-kolom input { padding: 9px 10px; }
.cek-wa { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; margin: 0; padding: 0 2px; color: #34405a; cursor: pointer; white-space: nowrap; }
.cek-wa input { width: auto; margin: 0; accent-color: var(--blue); cursor: pointer; }
.tabel-wa .kolom-cek { width: 40px; padding-right: 0; text-align: center; }
.tabel-wa .nomor-urut { width: 44px; color: #8b97ad; text-align: center; }
.tabel-wa th.nomor-urut { color: #566782; }
.cek-siswa { width: auto; margin: 0; accent-color: var(--blue); cursor: pointer; transform: scale(1.15); }
.cek-siswa:disabled { cursor: not-allowed; opacity: .45; }
.tabel-wa tbody tr.baris-ditandai { background: #eef4ff; }
.tabel-wa tbody tr.baris-ditandai:hover { background: #e6eeff; }

.bar-broadcast {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	margin-top: 12px; padding: 12px 14px;
	border: 1px solid #cfe0f7; border-radius: 8px; background: #f2f7ff;
	color: #3a4a66; font-size: var(--fs-tabel);
}
.bar-broadcast span { flex: 1 1 240px; line-height: 1.5; }
.bar-broadcast strong { color: var(--navy); font-weight: var(--fw-kuat); }
.bar-broadcast.berjalan { border-color: #f0cf98; background: #fffaf0; }
.bar-broadcast.berjalan strong { color: #a8690c; }
.bar-broadcast.selesai { border-color: #b7e6cd; background: #f1fbf5; }
.bar-broadcast.selesai strong { color: #11835e; }
.tombol-netral {
	padding: 8px 13px; border: 1px solid #cbd7eb; border-radius: 6px;
	background: var(--surface); color: #566782; cursor: pointer;
	font-size: var(--fs-kecil); font-weight: var(--fw-tebal); white-space: nowrap;
}
.tombol-netral:hover { border-color: var(--blue); color: var(--navy); }

.ringkas-wa { margin: 12px 2px 0; color: var(--muted); font-size: var(--fs-kecil); }
.ringkas-wa strong { color: var(--ink); font-weight: var(--fw-tebal); }
.tanpa-transaksi { color: #9aa6bd; }
.kotak-wa .daftar-item { margin: 16px 20px 20px; }
.tabel-wa-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.tabel-wa { width: 100%; min-width: 790px; border-collapse: collapse; background: var(--surface); }
.tabel-wa th { padding: 11px 12px; border-bottom: 1px solid #dbe4ef; background: #f6f8fb; color: #566782; text-align: left; }
.tabel-wa td { padding: 12px; border-bottom: 1px solid #e8edf4; color: #465570; vertical-align: middle; }
.tabel-wa th.angka, .tabel-wa td.angka { text-align: right; }
.tabel-wa tbody tr:nth-child(even) { background: #fbfcfe; }
.tabel-wa tbody tr:hover { background: #f1f5ff; }
.tabel-wa tbody tr:last-child td { border-bottom: 0; }
.tabel-wa .aksi-siswa { text-align: center; white-space: nowrap; }
.tabel-wa td.angka { font-weight: var(--fw-tebal); color: var(--navy); }
.tombol-nomor {
	padding: 5px 9px; border: 1px dashed #c8d3e4; border-radius: 6px;
	background: #f8fafd; color: #465570; cursor: pointer;
	font-size: var(--fs-tabel); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums;
	transition: background .2s ease, border-color .2s ease;
}
.tombol-nomor:hover { background: #eef3ff; border-color: var(--blue); color: var(--navy); }
.tanpa-nomor { border-color: #f0cf98; background: #fffaf0; color: #c1801a; font-style: italic; }
.tanpa-nomor:hover { border-color: var(--orange); background: #fff5e4; color: #a8690c; }
.tombol-wa {
	padding: 8px 14px; border: 0; border-radius: 6px;
	background: #1faa59; color: #fff; cursor: pointer;
	font-size: var(--fs-kecil); font-weight: var(--fw-tebal); letter-spacing: .02em; white-space: nowrap;
	transition: filter .2s ease, transform .2s ease;
}
.tombol-wa:hover:not(:disabled) { filter: brightness(.94); transform: translateY(-1px); }
.tombol-wa:disabled { background: #e8ecf3; color: #9aa6bd; cursor: not-allowed; }

@media (max-width:560px) {
	.alat-wa { margin-left: 14px; margin-right: 14px; }
	.alat-wa-kolom { flex: 1 1 100%; min-width: 0; }
	.kotak-wa .daftar-item { margin-left: 14px; margin-right: 14px; }
}

/* =========================================================
   MATA PELAJARAN & KEHADIRAN SISWA
   ========================================================= */
.kotak-mapel, .kotak-kehadiran { padding: 0 !important; overflow: hidden; }
.form-mapel-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; padding: 0 20px; }
.form-mapel-grid label { margin: 0 0 6px; }
.kotak-mapel .daftar-item, .kotak-kehadiran .daftar-item { margin: 16px 20px 20px; }
.kotak-kehadiran .alat-wa { align-items: flex-end; }

/* Daftar yang bisa digulung, memakai <details> bawaan browser. */
.grup-lipat { margin: 4px 20px 20px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe; }
.grup-lipat > summary {
	display: flex; align-items: center; gap: 9px; padding: 12px 14px;
	color: var(--navy); cursor: pointer; list-style: none;
	font-size: var(--fs-dasar); font-weight: var(--fw-tebal); letter-spacing: -.01em;
}
.grup-lipat > summary::-webkit-details-marker { display: none; }
.grup-lipat > summary::before { content: ""; color: var(--blue); font-size: 11px; transition: transform .2s ease; }
.grup-lipat[open] > summary::before { transform: rotate(90deg); }
.grup-lipat > summary:hover { background: #f2f6ff; border-radius: 8px; }
.hitung-lipat {
	padding: 2px 8px; border-radius: 20px; background: #e8efff; color: var(--navy);
	font-size: var(--fs-mikro); font-weight: var(--fw-tebal); font-variant-numeric: tabular-nums;
}
.grup-lipat .daftar-item { margin: 0 14px 14px; }
.grup-lipat .tabel-wa-scroll { background: var(--surface); }

/* Kolom pilihan Sakit / Izin / Alpa */
.tabel-hadir { min-width: 720px; }
.tabel-mapel { min-width: 520px; }
.tabel-hadir .kolom-status { width: 74px; text-align: center; }
.radio-hadir { width: auto; margin: 0; cursor: pointer; transform: scale(1.2); }
.radio-sakit { accent-color: #c47b11; }
.radio-izin { accent-color: var(--blue); }
.radio-alpa { accent-color: #d34656; }
.tabel-hadir tbody tr.baris-sakit { background: #fff8e8; }
.tabel-hadir tbody tr.baris-izin { background: #edf6ff; }
.tabel-hadir tbody tr.baris-alpa { background: #fff0f1; }
.tanda-hadir {
	display: inline-block; padding: 3px 9px; border-radius: 20px;
	font-size: var(--fs-mikro); font-weight: var(--fw-tebal); letter-spacing: .02em; white-space: nowrap;
}
/* Warna dasar = Hadir; kelas di bawahnya menimpa saat siswa tidak hadir. */
.tanda-hadir { background: #e6f7f1; color: #11835e; }
.tanda-sakit { background: #fff3dc; color: #c47b11; }
.tanda-izin { background: #e4efff; color: #1476d4; }
.tanda-alpa { background: #ffe3e5; color: #d34656; }

/* Rekap: kolom nama per status bisa panjang, jadi dibiarkan membungkus. */
.tabel-rincian-hadir { min-width: 880px; }
.tabel-rincian-hadir .sel-nama { min-width: 150px; line-height: 1.6; white-space: normal; }
.jumlah-nama {
	display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 20px;
	background: #eef2f8; color: #566782;
	font-size: var(--fs-mikro); font-weight: var(--fw-tebal); font-variant-numeric: tabular-nums;
}
.grup-lipat.grup-dalam { margin: 16px 0 0; background: var(--surface); }
.grup-lipat.grup-dalam .daftar-item { margin: 0 12px 12px; }

/* Rekap kehadiran: satu baris per siswa, keterangan berisi tanggal tidak hadir. */
.tabel-rekap-hadir .kolom-keterangan-hadir { min-width: 240px; line-height: 1.55; white-space: normal; }
/* Nama siswa tidak terlipat walau keterangannya panjang. */
.tabel-rekap-hadir th:nth-child(2), .tabel-rekap-hadir td:nth-child(2) { white-space: nowrap; }
/* Form absen harian: kolom saringan boleh menyusut supaya kedua tombolnya tetap sebaris. */
#halaman-kehadiran .kotak-kehadiran > .alat-wa > .alat-wa-kolom { flex: 1 1 140px; min-width: 140px; }
.ket-hadir { display: block; color: #465570; }
.ket-hadir + .ket-hadir { margin-top: 3px; }
.ket-hadir b { font-weight: var(--fw-tebal); }
.ket-hadir.sakit b { color: #c47b11; }
.ket-hadir.izin b { color: #1476d4; }
.ket-hadir.alpa b { color: #d34656; }
.tabel-rekap-hadir tfoot td { border-top: 1px solid #dbe4ef; border-bottom: 0; background: #f6f8fb; color: #34405a; font-weight: var(--fw-tebal); }
/* Pesan saat saringan kelas/nama tidak menemukan siswa, dengan tombol "Tampilkan semua siswa". */
.kosong-saringan { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 12px; }
.kosong-saringan p { margin: 0; }
/* Tombol "Hapus Absen Ini" di form absen harian; tampil hanya bila sesinya sudah tercatat. */
.alat-wa .tombol-netral[hidden] { display: none; }
.tombol-netral.tombol-netral-bahaya { border-color: #f2c1ca; color: #d34656; }
.tombol-netral.tombol-netral-bahaya:hover { border-color: #d34656; background: #fff0f1; color: #d34656; }

.ringkas-hadir { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cip {
	padding: 7px 12px; border: 1px solid var(--line); border-radius: 20px;
	background: var(--surface); font-size: var(--fs-kecil); font-weight: var(--fw-tebal);
}
.cip strong { margin-left: 4px; font-weight: var(--fw-kuat); font-variant-numeric: tabular-nums; }
.cip-hadir { border-color: #b7e6cd; background: #f1fbf5; color: #11835e; }
.cip-sakit { border-color: #f6e0b4; background: #fff8e8; color: #c47b11; }
.cip-izin { border-color: #c9e2fb; background: #edf6ff; color: #1476d4; }
.cip-alpa { border-color: #fbd2d6; background: #fff0f1; color: #d34656; }

@media (max-width:560px) {
	.form-mapel-grid { grid-template-columns: 1fr; padding: 0 14px; }
	.grup-lipat { margin-left: 14px; margin-right: 14px; }
	.kotak-mapel .daftar-item, .kotak-kehadiran .daftar-item { margin-left: 14px; margin-right: 14px; }
}

/* =========================================================
   MENU SIDEBAR: DROPDOWN PER KATEGORI
   Tombol kategori membuka/menutup daftar menunya dengan animasi
   tinggi (grid 0fr -> 1fr). Kategori yang semua menunya tidak
   boleh diakses disembunyikan lewat JS.
   ========================================================= */
.kategori-menu { display: grid; }
/* .tab-btn memakai display:flex, jadi atribut hidden perlu dipaksa di sini. */
.navigasi [hidden] { display: none !important; }
.kategori-induk {
	display: flex; align-items: center; gap: 9px; width: 100%; min-height: 42px; padding: 8px 12px;
	border: 0; border-radius: 10px; background: transparent; color: #56607a; cursor: pointer;
	font: inherit; font-size: var(--fs-tabel); font-weight: var(--fw-tebal); letter-spacing: .04em; text-align: left;
	transition: background .2s ease, color .2s ease;
}
.kategori-induk > span[data-icon] { width: 26px; height: 26px; color: #97a1b4; --aurora-icon-size: var(--ikon-menu); transition: color .2s ease; }
.kategori-induk .panah-menu {
	width: 18px; height: 18px; margin-left: auto; color: #97a1b4; --aurora-icon-size: 13px;
	transition: transform .3s cubic-bezier(.4, 0, .2, 1), color .2s ease;
}
.kategori-menu.terbuka .panah-menu { transform: rotate(90deg); }
.isi-kategori { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.4, 0, .2, 1); }
.kategori-menu.terbuka .isi-kategori { grid-template-rows: 1fr; }
.daftar-kategori {
	display: grid; gap: 2px; min-height: 0; overflow: hidden;
	margin-left: 25px; padding-left: 10px; border-left: 1px solid var(--line);
	opacity: 0; transform: translateY(-4px);
	transition: opacity .22s ease, transform .3s cubic-bezier(.4, 0, .2, 1);
}
.kategori-menu.terbuka .daftar-kategori { opacity: 1; transform: none; }
.daftar-kategori > :first-child { margin-top: 3px; }
.daftar-kategori > :last-child { margin-bottom: 6px; }

/* =========================================================
   ANIMASI PERPINDAHAN HALAMAN
   Isi halaman masuk bertahap (memudar sambil naik sedikit) dan
   judul halaman ikut beranimasi. Semua gerakan dimatikan bila
   pengguna meminta gerakan dikurangi di sistem operasinya.
   ========================================================= */
@keyframes masukHalaman { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes masukJudul { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.halaman.aktif > *, .sub-halaman.aktif > *, .halaman.aktif .kartu-ringkasan > * {
	animation: masukHalaman .45s cubic-bezier(.22, .8, .3, 1) both;
}
/* Panel laporan tidak ikut dianimasikan; cukup isinya, supaya tidak berlapis. */
.halaman.aktif > .sub-halaman { animation: none; }
.halaman.aktif > :nth-child(2), .halaman.aktif .kartu-ringkasan > :nth-child(2) { animation-delay: .06s; }
.halaman.aktif > :nth-child(3), .halaman.aktif .kartu-ringkasan > :nth-child(3) { animation-delay: .12s; }
.halaman.aktif > :nth-child(n+4), .halaman.aktif .kartu-ringkasan > :nth-child(n+4) { animation-delay: .18s; }
#judulHalaman.animasi-masuk { animation: masukJudul .35s cubic-bezier(.22, .8, .3, 1) both; }
@media (prefers-reduced-motion: reduce) {
	.halaman.aktif > *, .sub-halaman.aktif > *, .halaman.aktif .kartu-ringkasan > *, #judulHalaman.animasi-masuk { animation: none; }
	.kategori-induk, .kategori-induk .panah-menu, .isi-kategori, .daftar-kategori { transition: none; }
}

/* =========================================================
   KERAPIAN TAMPILAN HALAMAN
   Aturan bersama supaya setiap halaman memakai jarak, tinggi
   kontrol, dan gaya tabel yang sama.
   ========================================================= */
/* Semua kotak halaman berjarak tepi 20px dari isinya, tanpa padding ganda. */
.kotak-tabungan, .kotak-pinjaman { padding: 0 !important; overflow: hidden; }
/* Tinggi kontrol form disamakan supaya kolom dalam satu baris sejajar. */
.kotak :is(input:not([type="checkbox"], [type="radio"], [type="file"]), select) { height: 42px; }
.kotak textarea { min-height: 42px; }
.alat-wa-kolom :is(input, select), .alat-wa .tombol-netral { height: 40px; }
.alat-wa .cek-wa { display: inline-flex; height: 40px; margin: 0; }
/* Kolom aksi selebar tombolnya saja, dengan judul kolom tepat di atas tombol. */
.tabel-wa .aksi-siswa { width: 1%; }
.tabel-wa .aksi-siswa button + button { margin-left: 4px; }
/* Tombol Edit di tabel tabungan dibuat berlatar penuh, sebentuk dengan tombol Hapus di sebelahnya. */
.tabel-transaksi .aksi-siswa .tombol-edit {
	padding: 6px 9px; border: 0; border-radius: 8px;
	background: #2563eb; color: #fff; cursor: pointer;
}
.tabel-transaksi .aksi-siswa .tombol-edit:hover { background: #1d4ed8; filter: none; }
/* Baris yang sedang diedit lewat formulir di atas tabel. */
.tabel-wa tbody tr.baris-diedit td { background: #fff8e6; }
.tabel-wa td.nominal-masuk { color: #11835e; }
.tabel-wa td.nominal-keluar { color: #d34656; }
/* Kotak catatan berisi kalimat biasa, berbeda dari .info-excel yang memuat format kolom. */
.info-catatan {
	display: flex; align-items: baseline; gap: 10px; margin: 16px 20px 0; padding: 11px 14px;
	border: 1px solid #dbe4ef; border-left: 3px solid var(--blue); border-radius: 8px;
	background: #f8faff; color: #566782; font-size: var(--fs-kecil); line-height: 1.5;
}
.info-catatan strong { color: var(--navy); white-space: nowrap; }

/* Panel laporan: hanya satu yang tampil sesuai menu laporan yang dipilih di sidebar. */
.sub-halaman { display: none; }
.sub-halaman.aktif { display: block; }
.halaman > .sub-halaman > .kotak {
	width: 100%; max-width: none; padding: 0; overflow: hidden;
	border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
	box-shadow: 0 8px 24px rgba(32,64,116,.05);
}
/* Isi laporan tabungan diberi jarak tepi 20px, sama seperti panel halaman lain. */
.kotak-laporan-halaman .laporan { margin: 16px 20px 0; }
.kotak-laporan-halaman .judul-rekap { margin-left: 20px; margin-right: 20px; }
.kotak-laporan-halaman .tabel-wa-scroll { margin: 0 20px 20px; }

@media (max-width:760px) {
	/* Sidebar berubah jadi baris menu mendatar yang bisa digeser. Dropdown
	   kategori ikut sebaris: menunya muncul tepat di sebelah tombol kategori. */
	.kategori-menu { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
	.kategori-induk { flex: 0 0 auto; width: auto; min-height: 0; padding: 9px 11px; white-space: nowrap; }
	.isi-kategori { display: none; }
	.kategori-menu.terbuka .isi-kategori { display: block; }
	.daftar-kategori { display: flex; gap: 4px; margin: 0; padding-left: 8px; overflow: visible; opacity: 1; transform: none; }
	.daftar-kategori > :first-child, .daftar-kategori > :last-child { margin: 0; }
	.info-catatan { margin-left: 14px; margin-right: 14px; }
	.kotak-laporan-halaman .laporan { margin-left: 14px; margin-right: 14px; }
	.kotak-laporan-halaman .judul-rekap { margin-left: 14px; margin-right: 14px; }
	.kotak-laporan-halaman .tabel-wa-scroll { margin-left: 14px; margin-right: 14px; }
}

/* =========================================================
   DASHBOARD GRAFIK
   Dashboard hanya menyajikan angka ringkas dan grafik; rincian
   datanya ada di menu masing-masing. Semua kartu bisa diklik.
   ========================================================= */
.kartu-ringkasan { grid-template-columns: repeat(4, 1fr); }
.ungu .ikon-stat { background: #f2ecff; color: #6b4ab6; font-size: 17px; }

/* Kartu dan panel yang membuka menu lain saat diklik. */
.kartu-klik { cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.kartu-klik:hover { border-color: #c3d2f4; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(32,64,116,.09); }

/* Isi panel grafik menempati sisa tinggi, supaya dua panel sebaris tetap seimbang. */
.grid-grafik .panel, .panel-statistik { display: flex; flex-direction: column; }
.grid-grafik .grafik-batang { flex: 1 1 auto; height: auto; min-height: 168px; }
.panel-statistik .lingkaran-wrap { flex: 1 1 auto; }

/* Lingkaran tugas: conic-gradient supaya ikut bergerak sesuai persentase. */
.lingkaran {
	position: relative; border: 0; transform: none;
	background: conic-gradient(var(--navy) calc(var(--nilai, 0) * 1%), #e9f0f7 0);
	transition: background .35s ease;
}
.lingkaran::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--surface); }
.lingkaran strong, .lingkaran small { position: relative; transform: none; }

/* --- Grafik batang --- */
.grid-grafik { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.grafik-batang { display: flex; align-items: flex-end; gap: 12px; height: 168px; margin-top: 6px; }
.grafik-batang.grafik-kosong { align-items: center; justify-content: center; }
.grafik-kosong .kosong { margin: 0; padding: 0 12px; font-size: var(--fs-tabel); }
.batang-kolom { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; }
.batang-isi { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 5px; }
.batang { width: 100%; max-width: 38px; min-height: 4px; border-radius: 6px 6px 0 0; transition: height .35s ease; }
.batang-nilai { color: var(--navy); font-size: var(--fs-dasar); font-weight: var(--fw-kuat); font-variant-numeric: tabular-nums; }
.batang-label { max-width: 100%; overflow: hidden; color: var(--muted); font-size: var(--fs-mikro); font-weight: var(--fw-tebal); letter-spacing: .04em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; }
.batang-hadir { background: var(--green); }
.batang-sakit { background: var(--orange); }
.batang-izin { background: var(--blue); }
.batang-alpa { background: #e95d67; }
.batang-masuk { background: var(--blue); }
.batang-keluar { background: #e95d67; }
.legenda-grafik { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; color: #45516b; font-size: var(--fs-kecil); }
.legenda-grafik span { display: flex; align-items: center; gap: 6px; }
.dot-masuk { background: var(--blue); }
.dot-keluar { background: #e95d67; }

@media (max-width:1160px) { .kartu-ringkasan { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:900px) { .grid-grafik { grid-template-columns: 1fr; } }
@media (max-width:560px) { .kartu-ringkasan { grid-template-columns: 1fr; } .grafik-batang { gap: 8px; } }

/* =========================================================
   MENU DAFTAR TUGAS
   Formulir dan tabel mengikuti pola panel yang sama dengan
   menu Tabungan dan Data Siswa.
   ========================================================= */
.kotak-tugas { padding: 0 !important; overflow: hidden; }
.form-tugas-grid { display: grid; grid-template-columns: 1.2fr 1.1fr .95fr .6fr; gap: 12px; padding: 0 20px; }
.form-tugas-grid label { margin: 0 0 6px; }
.kolom-judul-tugas { grid-column: span 3; }
.kotak-tugas .daftar-item { margin: 16px 20px 20px; }

.tabel-tugas { min-width: 980px; }
.tabel-tugas .nomor-urut { width: 44px; color: #8b97ad; text-align: center; }
.tabel-tugas th.nomor-urut { color: #566782; }
.tabel-tugas .sel-judul { min-width: 210px; }
.tabel-tugas .sel-judul small { display: block; margin-top: 3px; color: var(--muted); font-size: var(--fs-kecil); line-height: 1.45; }
.tabel-tugas .kolom-nilai { width: 76px; text-align: center; }
.tabel-tugas tbody tr.baris-tugas-selesai td:not(.aksi-siswa) { color: #7d8ba3; }
.tabel-tugas .aksi-siswa .tombol-selesai,
.tabel-tugas .aksi-siswa .tombol-edit,
.tabel-tugas .aksi-siswa .tombol-hapus { margin: 0 2px; padding: 7px 10px; font-size: var(--fs-kecil); font-weight: var(--fw-tebal); }

/* Lencana nilai: hijau 85+, biru 70+, jingga 55+, merah di bawahnya. */
.nilai-tugas {
	display: inline-block; min-width: 42px; padding: 4px 9px; border-radius: 20px; text-align: center;
	font-size: var(--fs-tabel); font-weight: var(--fw-kuat); font-variant-numeric: tabular-nums;
}
.nilai-a { background: #e6f7f1; color: #11835e; }
.nilai-b { background: #e4efff; color: #1476d4; }
.nilai-c { background: #fff3dc; color: #c47b11; }
.nilai-d { background: #ffe3e5; color: #d34656; }
.nilai-kosong { background: #eef2f8; color: #9aa6bd; }

/* Lencana status tugas, seragam dengan lencana kehadiran. */
.tanda-status {
	display: inline-block; padding: 3px 9px; border-radius: 20px;
	font-size: var(--fs-mikro); font-weight: var(--fw-tebal); letter-spacing: .02em; white-space: nowrap;
}
.status-selesai { background: #e6f7f1; color: #11835e; }
.status-belum { background: #fff3dc; color: #c47b11; }
.status-lewat { background: #ffe3e5; color: #d34656; }
/* Lencana kategori tugas: ungu untuk PR, biru untuk tugas sekolah. */
.kategori-pr { background: #f4efff; color: #6b4ab6; white-space: nowrap; }
.kategori-sekolah { background: #edf6ff; color: #1476d4; white-space: nowrap; }
/* Di tabel Daftar Tugas lencana kategori menempel di depan judul, supaya kolom Aksi tetap muat. */
.sel-judul > .tanda-status { margin-right: 6px; vertical-align: 1px; }
.cip-nilai { border-color: #d9cdf5; background: #f6f2ff; color: #6b4ab6; }

@media (max-width:900px) { .form-tugas-grid { grid-template-columns: 1fr 1fr; } .kolom-judul-tugas { grid-column: span 2; } }
@media (max-width:760px) { .form-tugas-grid { padding: 0 14px; } .kotak-tugas .daftar-item { margin-left: 14px; margin-right: 14px; } }
@media (max-width:560px) { .form-tugas-grid { grid-template-columns: 1fr; } .kolom-judul-tugas { grid-column: auto; } }

/* =========================================================
   AKUN PENGGUNA
   ========================================================= */
.kotak-akun { padding: 0 !important; overflow: hidden; }
.form-akun-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 20px; }
.form-akun-grid label { margin: 0 0 6px; }
.kotak-akun .daftar-item { margin: 16px 20px 20px; }
.tabel-akun small { display: block; margin-top: 3px; color: var(--muted); font-size: var(--fs-kecil); }
.status-nonaktif { background: #eef1f6; color: #71809c; }
.baris-nonaktif td { color: #8b97ad; }
button:disabled { cursor: not-allowed; opacity: .55; transform: none !important; }
.auth-terkunci { overflow: hidden; }
.auth-terkunci .aplikasi { visibility: hidden; pointer-events: none; }
.panel-login { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(16, 24, 45, .38); }
.panel-login[hidden] { display: none; }
.kartu-login { width: min(360px, 100%); padding: 22px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 24px 60px rgba(16, 27, 159, .18); }
.login-brand { margin: 0 0 14px; padding: 0 0 14px; }
.kartu-login label { display: block; margin: 12px 0 6px; color: #34405a; font-size: var(--fs-tabel); font-weight: var(--fw-tebal); }
.kartu-login .tombol-tambah { margin-top: 16px; }
.pesan-login { min-height: 18px; margin: 10px 0 0; color: #c52e2e; font-size: var(--fs-tabel); font-weight: var(--fw-tebal); }

@media (max-width:900px) {
	.form-akun-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width:760px) {
	.form-akun-grid { padding: 0 14px; }
	.kotak-akun .daftar-item { margin-left: 14px; margin-right: 14px; }
}
@media (max-width:560px) {
	.form-akun-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   PENGATURAN SISTEM
   Identitas aplikasi (nama + logo) yang dipakai sidebar,
   header, dan halaman login. Mengikuti pola panel menu lain.
   ========================================================= */
.kotak-sistem { padding: 0 !important; overflow: hidden; }
.form-sistem-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 20px; padding: 0 20px 24px; align-items: start; }
.form-sistem-grid label { margin: 0 0 6px; }
.kolom-identitas { min-width: 0; }
.kolom-identitas label + input + label { margin-top: 14px; }
.kolom-identitas .teks-bantuan { margin-top: 7px; }
.aksi-form-sistem { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.aksi-form-sistem .tombol-tambah { width: auto; min-width: 165px; margin: 0; padding: 11px 18px; }
.aksi-form-sistem .tombol-batal { width: auto; margin: 0; padding: 11px 16px; }

.panel-logo-sistem {
	display: flex; align-items: center; gap: 18px;
	min-width: 0; padding: 18px;
	border: 1px solid var(--line); border-radius: 10px; background: #fbfcfe;
}
.panel-logo-sistem > div { min-width: 0; }
/* Kotak pratinjau memakai gaya yang sama dengan lencana merek di sidebar,
   supaya hasil unggahan terlihat persis seperti nanti di aplikasi. */
.preview-logo-sistem {
	flex: 0 0 auto; display: grid; place-items: center; overflow: hidden;
	width: 82px; height: 82px; border-radius: 18px;
	background: linear-gradient(145deg, #101b9f, #377dff); color: #fff;
	box-shadow: 0 10px 20px rgba(55, 125, 255, .22);
	--aurora-icon-size: 40px;
}
.preview-logo-sistem span { width: 44px; height: 44px; }
.preview-logo-sistem img, .brand-mark img {
	display: block; width: 100%; height: 100%;
	border-radius: inherit; object-fit: cover;
}
.teks-bantuan { display: block; margin-top: 9px; color: var(--muted); font-size: var(--fs-kecil); line-height: 1.5; }
input[type="file"] { padding: 9px 12px; cursor: pointer; }
input[type="file"]::file-selector-button {
	margin-right: 12px; padding: 7px 13px;
	border: 1px solid #cbd7eb; border-radius: 6px;
	background: #f7f9fd; color: var(--navy); cursor: pointer;
	font: inherit; font-size: var(--fs-kecil); font-weight: var(--fw-tebal);
}
input[type="file"]::file-selector-button:hover { border-color: var(--blue); background: #edf2ff; }

@media (max-width:900px) {
	.form-sistem-grid { grid-template-columns: 1fr; }
}
@media (max-width:760px) {
	.form-sistem-grid { padding: 0 14px 20px; }
}
@media (max-width:560px) {
	.panel-logo-sistem { align-items: flex-start; flex-direction: column; gap: 14px; }
	.aksi-form-sistem .tombol-tambah, .aksi-form-sistem .tombol-batal { flex: 1 1 100%; min-width: 0; }
}

/* =========================================================
   KARTU GRAFIK DONAT (Grafik Kehadiran)
   Susunan kartu: judul - donat - legenda - garis - rincian
   persentase per status. Garis pemisah dibuat selebar kartu
   dengan margin negatif sebesar padding panel dashboard (18px).
   ========================================================= */
.donat-wrap {
	display: flex; flex: 1 1 auto;
	flex-direction: column; align-items: center; justify-content: center;
	gap: 16px; padding: 22px 0 18px;
}
.donat-wrap.grafik-kosong { padding: 30px 0; text-align: center; }
.donat-svg { display: block; width: 190px; max-width: 72%; height: auto; }
/* Ujung potongan dibiarkan rata; celah antar potongan diatur dari dasharray. */
.donat-potong { transition: stroke-dasharray .35s ease, stroke-dashoffset .35s ease; }

.donat-legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
.donat-legenda span { display: inline-flex; align-items: center; gap: 8px; color: #45516b; font-size: var(--fs-tabel); font-weight: var(--fw-medium); }
.donat-legenda .dot { width: 11px; height: 11px; }

.donat-kaki { border-top: 1px solid var(--line); }
.panel-donat .ringkas-wa { margin-top: 14px; text-align: center; }

/* Warna status dipakai bersama oleh potongan donat, titik legenda, dan angka. */
.warna-hadir { color: var(--green); }
.warna-sakit { color: var(--orange); }
.warna-izin  { color: var(--blue); }
.warna-alpa  { color: #e95d67; }
.dot-hadir { background: var(--green); }
.dot-sakit { background: var(--orange); }
.dot-izin  { background: var(--blue); }
.dot-alpa  { background: #e95d67; }



/* Penanda kecil saat data dikirim ke database: menyimpan / tersimpan / gagal. */
.status-simpan {
	position: fixed; right: 18px; bottom: 18px; z-index: 60; max-width: 340px;
	padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px;
	background: var(--surface); color: #34405a; box-shadow: 0 10px 28px rgba(32, 64, 116, .14);
	font-size: var(--fs-kecil); font-weight: var(--fw-tebal); line-height: 1.5;
}
.status-simpan[hidden] { display: none; }
.status-simpan.menyimpan { border-color: #c9e2fb; background: #edf6ff; color: #1476d4; }
.status-simpan.tersimpan { border-color: #b7e6cd; background: #f1fbf5; color: #11835e; }
.status-simpan.gagal { border-color: #fbd2d6; background: #fff0f1; color: #d34656; font-weight: var(--fw-medium); }