/* =========================================================
   AURORA UI ADAPTATION
   Sumber visual: aurora-free-1.0.0. File ini hanya memuat
   adaptasi CSS statis, bukan React/MUI demo template.
   ========================================================= */
:root {
	--navy: #3385F0;
	--blue: #3385F0;
	--ink: #1B2124;
	--muted: #77878F;
	--line: #DBE6EB;
	--surface: #ffffff;
	--background: #F7FAFC;
	--green: #099F69;
	--orange: #F68D2A;
	--red: #D02241;
	--aurora-sidebar: #ffffff;
	--aurora-hover: #EAF3FD;
	--aurora-purple-soft: #F2E4FE;
	--aurora-shadow: 0 10px 30px rgba(17, 20, 23, .08);
}

body { background: var(--background); color: var(--ink); font-family: var(--font-utama); }
.aplikasi { background: var(--background); }
.sidebar {
	width: 262px; flex-basis: 262px; padding: 0 14px 20px;
	background: var(--aurora-sidebar); border-right: 1px solid var(--line);
	box-shadow: 0 1px 2px rgba(17, 20, 23, .04);
}
.brand {
	flex: 0 0 auto;
	height: var(--tinggi-header); min-height: 0;
	margin: 0 -14px 14px; padding: 0 26px;
	align-items: center;
	border-bottom: 1px solid rgba(219, 230, 235, .75);
}
.brand-mark { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, #3385F0, #A641FA); box-shadow: 0 8px 18px rgba(51, 133, 240, .26); }
.brand strong { color: var(--ink); font-size: var(--fs-menengah); letter-spacing: 0; }
.brand small { color: var(--muted); }
.profil { flex: 0 0 auto; padding-left: 11px; border-radius: 8px; border-color: #EBF2F5; background: #F7FAFC; }
.label-menu, .sidebar-bawah { flex: 0 0 auto; }
/* Daftar menu yang menggulung bila sidebar lebih pendek daripada isinya. */
.navigasi { min-height: 0; overflow-y: auto; }
.tab-btn {
	display: flex; align-items: center; gap: 9px;
	min-height: 44px; padding: 10px 12px; border-radius: 8px;
	color: #4D595E; font-size: var(--fs-tabel); font-weight: 600; text-transform: none;
}
.tab-btn span { width: 28px; color: #77878F; }
.tab-btn:hover, .tab-btn.aktif { background: var(--aurora-hover); color: #245DA8; transform: none; }
.tab-btn.aktif span { color: #3385F0; }
button.keluar { border-radius: 8px; border-color: #F2C1CA; background: #F9E2E6; color: #B11D37; }
.konten { width: calc(100% - 262px); padding: 24px 28px 44px; }
.judul-halaman {
	position: sticky; top: 0; z-index: 5; align-items: center;
	min-height: var(--tinggi-header);
	margin: -24px -28px 22px; padding: 18px 28px;
	background: rgba(247, 250, 252, .9); border-bottom: 1px solid rgba(219, 230, 235, .75);
	backdrop-filter: blur(10px);
}
.judul-halaman h1 { color: var(--ink); letter-spacing: 0; }
.eyebrow { color: #3385F0; }
.kartu-stat, .panel, .halaman > .kotak, .halaman > .sub-halaman > .kotak, .kartu-login {
	border-color: #EBF2F5; border-radius: 8px; box-shadow: var(--aurora-shadow);
}
.panel-topline { background: #ffffff; }
.panel-topline h2, .kotak h2 { color: var(--ink); }
.panel-topline h2::before, .kotak h2::before { background: #3385F0; }
input, select, textarea {
	border-color: #DBE6EB; border-radius: 8px; background: #ffffff;
}
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(51, 133, 240, .16); border-color: #3385F0; }
button.tombol-tambah { border-radius: 8px; background: #3385F0; box-shadow: 0 8px 18px rgba(51, 133, 240, .22); }
.tombol-sekunder, .tombol-edit { border-radius: 8px; background: #F7FAFC; border-color: #DBE6EB; color: #245DA8; }
.tombol-hapus { background: #D02241; border-radius: 8px; }
.tombol-selesai { background: #099F69; border-radius: 8px; }
.status, .cip, .nilai-tugas, .tanda-status, .tanda-hadir { border-radius: 999px; }
.tabel-siswa-scroll, .tabel-tabungan-scroll, .tabel-pinjaman-scroll, .tabel-wa-scroll { border-color: #EBF2F5; border-radius: 8px; }
th { background: #F7FAFC; color: #4D595E; letter-spacing: .04em; }
td { color: #4D595E; }
tbody tr:hover td, .tabel-siswa tbody tr:hover, .tabel-tabungan tbody tr:hover { background: #F7FAFC; }
.panel-login { background: linear-gradient(135deg, rgba(10, 27, 48, .72), rgba(116, 45, 175, .42)); }

/* Ikon SVG lokal bergaya outline modern, konsisten untuk seluruh UI. */
.app-icon,
button.keluar .app-icon {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	line-height: 1;
	text-align: center;
}

span.app-icon, i.app-icon { display: inline-grid; place-items: center; }

.svg-icon {
	width: var(--aurora-icon-size, var(--ikon-dasar));
	height: var(--aurora-icon-size, var(--ikon-dasar));
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	overflow: visible;
}

.brand-mark span { width: 26px; height: 26px; color: #ffffff; --aurora-icon-size: 24px; }
.tab-btn > span { width: 26px; height: 26px; margin-right: 0; --aurora-icon-size: var(--ikon-menu); }
.tab-btn.aktif > span { color: #3385F0; }
.ikon-tombol { width: 20px; height: 20px; margin-right: 7px; vertical-align: -4px; --aurora-icon-size: 17px; }
.subjudul-panel > span { width: 30px; height: 30px; border-radius: 8px; background: #EAF3FD; color: #3385F0; --aurora-icon-size: 18px; }
.aksi-grid button > span { width: 36px; height: 36px; margin-bottom: 10px; border-radius: 9px; background: #EAF3FD; color: #3385F0; --aurora-icon-size: 21px; }
.grup-lipat > summary::before {
	content: "" !important;
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--blue);
	border-bottom: 2px solid var(--blue);
	background: transparent;
	transform: rotate(-45deg);
}
.grup-lipat[open] > summary::before { transform: rotate(45deg); }
button.keluar { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
button.keluar .app-icon { --aurora-icon-size: 17px; }
button.keluar::after { display: none !important; }
.kotak-laporan.keluar {
	display: block;
	width: auto;
	padding: 20px;
	cursor: default;
}

/* Dashboard dipadatkan dan diseimbangkan mengikuti rasa template Aurora. */
#halaman-dashboard { display: none; }
#halaman-dashboard.aktif { display: block; }
#halaman-dashboard .kartu-ringkasan { gap: 16px; }
#halaman-dashboard .kartu-stat {
	position: relative;
	min-height: 128px;
	align-items: flex-start;
	padding: 18px;
	overflow: hidden;
}
#halaman-dashboard .kartu-stat::after {
	content: "";
	position: absolute;
	right: -28px;
	bottom: -34px;
	width: 104px;
	height: 104px;
	border-radius: 50%;
	background: rgba(51, 133, 240, .08);
}
#halaman-dashboard .kartu-stat p { color: #4D595E; font-size: var(--fs-kecil); font-weight: 700; }
#halaman-dashboard .kartu-stat strong { color: #1B2124; font-size: 28px; letter-spacing: 0; white-space: nowrap; }
#halaman-dashboard .kartu-stat small { display: block; max-width: 210px; line-height: 1.45; }
.ikon-stat {
	width: 50px;
	height: 50px;
	border-radius: 14px;
	--aurora-icon-size: var(--ikon-kartu);
}
.grid-dashboard { grid-template-columns: minmax(0, 1fr) minmax(330px, .78fr); gap: 16px; margin-top: 16px; }
.grid-grafik { gap: 16px; margin-top: 16px; }
#halaman-dashboard .panel { min-height: 236px; padding: 18px; border-radius: 8px; }
#halaman-dashboard .panel-heading { gap: 14px; margin-bottom: 18px; }
#halaman-dashboard .panel-heading h2 { margin-bottom: 5px; color: #1B2124; font-size: var(--fs-judul); }
#halaman-dashboard .panel-heading p { max-width: 320px; line-height: 1.45; }
.grafik-tugas-wrap { display: grid; gap: 13px; }
.grafik-tugas-angka { display: flex; align-items: baseline; gap: 8px; }
.grafik-tugas-angka strong {
	color: #1B2124;
	font-size: var(--fs-besar);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.grafik-tugas-angka span { color: var(--muted); font-size: var(--fs-tabel); font-weight: 600; }
.grafik-line {
	position: relative;
	min-height: 232px;
	padding: 0;
	overflow: visible;
}
.grafik-line.grafik-kosong { display: grid; place-items: center; border: 1px dashed #DBE6EB; border-radius: 8px; background: #F7FAFC; }
.line-chart { display: block; width: 100%; height: 232px; overflow: visible; }
.line-grid { stroke: #CFE0F7; stroke-width: 1; stroke-dasharray: 4 4; }
.line-axis-label { fill: #A8B9D3; font-size: 13px; font-weight: 600; }
.line-area { fill: url(#gradienTugasLine); }
.line-stroke {
	fill: none;
	stroke: #2478FF;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.line-label { fill: #A8B9D3; font-size: 13px; font-weight: 600; }
.line-point { cursor: default; outline: none; }
.line-hit { fill: transparent; stroke: transparent; pointer-events: all; }
.line-guide { stroke: #CFE0F7; stroke-width: 1; stroke-dasharray: 4 4; opacity: 0; transition: opacity .16s ease; }
.line-point-halo { fill: rgba(36, 120, 255, .12); opacity: 0; transition: opacity .2s ease; }
.line-point-dot { fill: #ffffff; stroke: #2478FF; stroke-width: 3; transition: transform .2s ease; transform-box: fill-box; transform-origin: center; }
.line-point:hover .line-guide, .line-point:focus .line-guide { opacity: 1; }
.line-point:hover .line-point-halo, .line-point:focus .line-point-halo { opacity: 1; }
.line-point:hover .line-point-dot, .line-point:focus .line-point-dot { transform: scale(1.2); }
.line-tooltip { opacity: 0; pointer-events: none; transition: opacity .16s ease; }
.line-point:hover .line-tooltip, .line-point:focus .line-tooltip { opacity: 1; }
.line-tooltip rect { fill: #ffffff; stroke: #DBE6EB; filter: drop-shadow(0 10px 18px rgba(17, 20, 23, .18)); }
.line-tooltip text { fill: #1B2124; font-size: 15px; font-weight: 600; }
.legenda-tugas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 0; }
.aksi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.aksi-grid button { min-height: 116px; padding: 16px; border-radius: 8px; }
.aksi-grid b { color: #1B2124; font-size: var(--fs-tabel); }
.aksi-grid small { line-height: 1.45; }
.grafik-batang { min-height: 184px; }

@media (max-width: 760px) {
	.sidebar { width: 100%; padding: 12px 14px 10px; }
	.konten { width: 100%; padding: 20px 14px 34px; }
	.judul-halaman { margin: -20px -14px 16px; padding: 16px 14px; }
	.tab-btn { gap: 7px; }
	.brand { height: auto; margin: 0 0 10px; padding: 0 180px 10px 0; border-bottom: 0; }
	.brand > div:last-child { min-width: 0; }
	.brand strong, .brand small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.profil { padding-left: 7px; }
	.judul-halaman { min-height: 0; }
	/* Merek, profil, dan tombol keluar berbagi satu baris di atas sidebar.
	   Ukurannya dikunci di sini supaya teks yang diperbesar tidak saling menimpa. */
	.brand strong { font-size: var(--fs-sedang); }
	.profil { right: 54px; max-width: 150px; padding: 4px 7px; }
	.profil > div:last-child { min-width: 0; }
	.profil strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.profil small { display: none; }
	/* Tombol keluar jadi lingkaran berikon; labelnya disembunyikan di sini karena
	   aturan tipografi umum memakai urutan yang lebih akhir daripada media query app.css. */
	button.keluar { width: 38px; height: 38px; padding: 0; gap: 0; border-radius: 50%; font-size: 0; }
	button.keluar .app-icon { --aurora-icon-size: 18px; }
	.grid-dashboard, .grid-grafik, .aksi-grid { grid-template-columns: 1fr; }
	#halaman-dashboard .kartu-stat { min-height: 104px; }
	.line-chart { height: 196px; }
	.grafik-line { min-height: 196px; }
}