/* =========================================================
   ORBIT UI THEME
   Lapis tampilan paling akhir. Hanya mengatur warna, layout,
   bentuk, dan jarak. Tidak mengubah teks, data, maupun fungsi.
   Dimuat setelah app.css dan aurora.css supaya menimpa keduanya.
   ========================================================= */
:root {
	/* Aksen utama ungu/violet, ditemani biru, hijau, dan oranye per status. */
	--o-ungu: #6D28D9;
	--o-ungu-terang: #8B5CF6;
	--o-ungu-lembut: #EDE9FE;
	--o-biru: #0891B2;
	--o-biru-lembut: #E0F2FE;
	--o-hijau: #059669;
	--o-hijau-lembut: #D1FAE5;
	--o-jingga: #D97706;
	--o-jingga-lembut: #FEF3C7;
	--o-merah: #E11D48;

	--o-teks: #0F172A;
	--o-teks-lembut: #64748B;
	--o-garis: #E7EAF3;
	--o-permukaan: #FFFFFF;
	--o-latar: #F7F8FC;

	--o-radius: 18px;
	--o-radius-kecil: 12px;
	--o-bayang: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .05);
	--o-bayang-naik: 0 2px 4px rgba(15, 23, 42, .05), 0 16px 34px rgba(15, 23, 42, .09);

	--tinggi-header: 68px;
}

body { background: var(--o-latar); color: var(--o-teks); }
.aplikasi { background: var(--o-latar); }

/* ---------- TOP BAR ---------- */
.topbar {
	position: sticky; top: 0; z-index: 20;
	display: flex; align-items: center; gap: 14px;
	height: var(--tinggi-header);
	margin: -24px -28px 26px; padding: 0 24px;
	background: var(--o-permukaan);
	border-bottom: 1px solid var(--o-garis);
}
.topbar-ikon {
	display: inline-grid; place-items: center;
	width: 38px; height: 38px; padding: 0;
	border: 0; border-radius: var(--o-radius-kecil);
	background: transparent; color: var(--o-teks-lembut);
	--aurora-icon-size: 19px;
}
button.topbar-ikon { cursor: pointer; transition: background .2s ease, color .2s ease; }
button.topbar-ikon:hover { background: var(--o-ungu-lembut); color: var(--o-ungu); }
.topbar-aksi { display: flex; align-items: center; gap: 6px; margin-left: auto; }
/* Titik indikator notifikasi. */
.topbar-notif { position: relative; }
.topbar-notif::after {
	content: ""; position: absolute; top: 8px; right: 9px;
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--o-merah); box-shadow: 0 0 0 2px var(--o-permukaan);
}
.topbar-avatar {
	display: inline-grid; place-items: center;
	width: 36px; height: 36px; margin-left: 6px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--o-ungu), var(--o-ungu-terang));
	color: #fff; font-size: var(--fs-tabel); font-weight: var(--fw-kuat);
}
.remah { display: flex; align-items: center; gap: 8px; font-size: var(--fs-tabel); }
.remah span { color: var(--o-teks-lembut); font-weight: var(--fw-medium); }
.remah .remah-pisah { color: #C3CAD9; }
.remah strong { color: var(--o-teks); font-weight: var(--fw-kuat); }

/* ---------- SIDEBAR ---------- */
.sidebar { background: var(--o-permukaan); border-right: 1px solid var(--o-garis); box-shadow: none; }
.brand { height: var(--tinggi-header); padding: 0 22px; border-bottom: 1px solid var(--o-garis); }
.brand-mark {
	width: 38px; height: 38px; border-radius: var(--o-radius-kecil);
	background: linear-gradient(135deg, var(--o-ungu), var(--o-ungu-terang));
	box-shadow: 0 6px 16px rgba(109, 40, 217, .28);
}
.brand-mark span { width: 22px; height: 22px; --aurora-icon-size: 21px; }
.brand strong { color: var(--o-teks); font-size: var(--fs-menengah); font-weight: var(--fw-kuat); }
.brand small { color: var(--o-teks-lembut); }

.label-menu { margin: 22px 5px 8px 14px; color: #97A1B4; letter-spacing: .1em; }
.navigasi { gap: 3px; padding-top: 14px; }
/* Tombol kategori dropdown memakai warna yang sama dengan menu biasa. */
.kategori-induk { color: #56607A; }
.kategori-induk:hover { background: #F4F5FA; color: var(--o-teks); }
.kategori-induk:hover > span[data-icon], .kategori-induk:hover .panah-menu { color: var(--o-teks); }
.kategori-menu.berisi-aktif .kategori-induk,
.kategori-menu.berisi-aktif .kategori-induk > span[data-icon],
.kategori-menu.berisi-aktif .panah-menu { color: var(--o-ungu); }
.daftar-kategori { border-left-color: var(--o-garis); }
@media (min-width: 761px) {
	.daftar-kategori .tab-btn { min-height: 36px; padding: 7px 12px; font-weight: var(--fw-medium); }
}

.tab-btn {
	position: relative;
	min-height: 42px; padding: 9px 12px;
	border-radius: 10px; color: #56607A; font-weight: var(--fw-tebal);
}
.tab-btn span { color: #97A1B4; }
.tab-btn:hover { background: #F4F5FA; color: var(--o-teks); transform: none; }
.tab-btn:hover span { color: var(--o-teks); }
/* Item aktif: latar lavender + garis aksen tebal di sisi kiri. */
.tab-btn.aktif { background: var(--o-ungu-lembut); color: var(--o-ungu); }
.tab-btn.aktif span { color: var(--o-ungu); }
.tab-btn.aktif::before {
	content: ""; position: absolute; left: 0; top: 50%;
	width: 4px; height: 22px; margin-top: -11px;
	border-radius: 0 4px 4px 0; background: var(--o-ungu);
}

/* Kartu profil di bagian bawah sidebar. */
.profil {
	margin-top: auto; padding: 10px 11px;
	border: 1px solid var(--o-garis); border-radius: var(--o-radius-kecil);
	background: #FAFAFE;
}
.avatar {
	border: 0;
	background: linear-gradient(135deg, var(--o-ungu), var(--o-ungu-terang));
	color: #fff;
}
.profil strong { color: var(--o-teks); }
.profil small { color: var(--o-teks-lembut); }
.sidebar-bawah { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--o-garis); }
button.keluar {
	border-radius: var(--o-radius-kecil); border-color: #FBD5DD;
	background: #FFF1F4; color: var(--o-merah);
}

/* ---------- HEADER HALAMAN ---------- */
/* Top bar yang menempel; header halaman ikut menggulung seperti referensi. */
.judul-halaman {
	position: static; align-items: flex-start;
	min-height: 0; margin: 0 0 26px; padding: 0;
	background: none; border-bottom: 0; backdrop-filter: none;
}
.judul-halaman h1 { color: var(--o-teks); font-size: 30px; letter-spacing: -.03em; }
.eyebrow { color: var(--o-ungu); letter-spacing: .12em; }
.tanggal-hari { margin-top: 6px; color: var(--o-teks-lembut); }

/* ---------- KARTU UMUM ---------- */
.kartu-stat, .panel, .halaman > .kotak, .halaman > .sub-halaman > .kotak, .kartu-login {
	border: 1px solid var(--o-garis); border-radius: var(--o-radius);
	background: var(--o-permukaan); box-shadow: var(--o-bayang);
}
.kartu-klik:hover { border-color: #D9D2F6; box-shadow: var(--o-bayang-naik); transform: translateY(-2px); }
#halaman-dashboard .panel { min-width: 0; padding: 22px; border-radius: var(--o-radius); }
#halaman-dashboard .panel-heading { margin-bottom: 20px; }
#halaman-dashboard .panel-heading h2, .panel-topline h2, .kotak h2 { color: var(--o-teks); }
.panel-heading p, .panel-topline p { color: var(--o-teks-lembut); }

/* ---------- KARTU STATISTIK ---------- */
#halaman-dashboard .kartu-ringkasan { gap: 20px; }
#halaman-dashboard .kartu-stat {
	display: grid; gap: 0;
	grid-template-columns: auto 1fr;
	grid-template-areas: "ikon lencana" "isi isi" "tren tren";
	align-items: center; min-height: 0;
	padding: 20px 20px 0; overflow: hidden;
}
#halaman-dashboard .kartu-stat::after { content: none; }
.kartu-stat .ikon-stat {
	grid-area: ikon;
	width: 42px; height: 42px; border-radius: var(--o-radius-kecil);
	--aurora-icon-size: 21px;
}
.lencana-tren {
	grid-area: lencana; justify-self: end;
	padding: 5px 11px; border-radius: 999px;
	font-size: var(--fs-kecil); font-weight: var(--fw-kuat);
	font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tren-naik { background: var(--o-hijau-lembut); color: var(--o-hijau); }
.tren-turun { background: #FFE4E9; color: var(--o-merah); }
#halaman-dashboard .kartu-stat p {
	margin-bottom: 6px; color: var(--o-teks-lembut);
	font-size: var(--fs-kecil); font-weight: var(--fw-tebal); letter-spacing: .04em;
}
#halaman-dashboard .kartu-stat strong { color: var(--o-teks); font-size: 30px; letter-spacing: -.03em; }
#halaman-dashboard .kartu-stat small { color: var(--o-teks-lembut); }
/* Mini area-chart tren sebagai latar di dasar kartu. */
.sparkline { grid-area: tren; display: block; height: 44px; margin: 16px -20px 0; }
.sparkline-svg { display: block; width: 100%; height: 100%; }
.biru  .ikon-stat { background: var(--o-ungu-lembut); color: var(--o-ungu); }
.hijau .ikon-stat { background: var(--o-hijau-lembut); color: var(--o-hijau); }
.jingga .ikon-stat { background: var(--o-jingga-lembut); color: var(--o-jingga); }
.ungu  .ikon-stat { background: var(--o-biru-lembut); color: var(--o-biru); }
.biru  .sparkline { color: var(--o-ungu); }
.hijau .sparkline { color: var(--o-hijau); }
.jingga .sparkline { color: var(--o-jingga); }
.ungu  .sparkline { color: var(--o-biru); }

/* ---------- TAB PERIODE (Grafik Tugas) ---------- */
.tab-periode {
	display: inline-flex; gap: 2px; flex: 0 0 auto;
	padding: 3px; border-radius: 999px; background: #F1F3F9;
}
.tab-periode-btn {
	padding: 6px 13px; border: 0; border-radius: 999px;
	background: transparent; color: var(--o-teks-lembut); cursor: pointer;
	font-size: var(--fs-kecil); font-weight: var(--fw-tebal); white-space: nowrap;
	transition: background .2s ease, color .2s ease;
}
.tab-periode-btn:hover { color: var(--o-teks); }
.tab-periode-btn.aktif { background: var(--o-ungu); color: #fff; }

/* ---------- GRAFIK GARIS ---------- */
.grafik-tugas-angka strong { color: var(--o-teks); }
.line-grid { stroke: #E7EAF3; stroke-width: 1; stroke-dasharray: 2 5; }
.line-stroke { stroke: var(--o-ungu-terang); stroke-width: 2.5; }
.line-point-dot { stroke: var(--o-ungu-terang); }
.line-point-halo { fill: rgba(139, 92, 246, .16); }
.line-guide { stroke: #D8DEEC; }
.line-axis-label, .line-label { fill: #A3ABBD; }
.legenda-tugas .hijau-bg { background: var(--o-hijau); }
.legenda-tugas .biru-bg { background: var(--o-ungu-terang); }

/* ---------- GRAFIK BATANG (Grafik Kehadiran) ---------- */
.grafik-batang { gap: 14px; }
.batang { max-width: 44px; border-radius: 10px 10px 0 0; }
.batang-hadir { background: var(--o-hijau); }
.batang-sakit { background: var(--o-jingga); }
.batang-izin  { background: var(--o-ungu-terang); }
.batang-alpa  { background: var(--o-merah); }
.batang-masuk { background: var(--o-ungu-terang); }
.batang-keluar { background: var(--o-biru); }
.batang-nilai { color: var(--o-teks); }
.batang-label { color: #A3ABBD; }

/* ---------- AKSI CEPAT ---------- */
.aksi-grid button { border: 1px solid var(--o-garis); border-radius: var(--o-radius-kecil); }
.aksi-grid button:hover { border-color: #D9D2F6; background: #FCFBFF; }
.aksi-grid button > span { border-radius: 10px; background: var(--o-ungu-lembut); color: var(--o-ungu); }
.aksi-grid b { color: var(--o-teks); }
.aksi-grid small { color: var(--o-teks-lembut); }

/* ---------- KOMPONEN LAIN ---------- */
button.tombol-tambah { border-radius: var(--o-radius-kecil); background: var(--o-ungu); box-shadow: 0 8px 18px rgba(109, 40, 217, .22); }
.tombol-sekunder, .tombol-edit { border-radius: 10px; border-color: var(--o-garis); background: #FAFAFE; color: var(--o-ungu); }
.tombol-sekunder:hover { border-color: var(--o-ungu-terang); background: var(--o-ungu-lembut); }
.link-button { color: var(--o-ungu); }
.subjudul-panel > span { border-radius: 10px; background: var(--o-ungu-lembut); color: var(--o-ungu); }
.subjudul-panel { color: var(--o-ungu); }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(139, 92, 246, .16); border-color: var(--o-ungu-terang); }
input, select, textarea { border-radius: 10px; border-color: #DDE2EE; }
.panel-topline h2::before, .kotak h2::before { background: var(--o-ungu); }
.panel-login { background: linear-gradient(135deg, rgba(30, 20, 70, .74), rgba(109, 40, 217, .48)); }
.kartu-login { width: min(360px, calc(100vw - 40px)); border-radius: var(--o-radius); }

/* Sidebar bisa dilipat lewat tombol hamburger: digeser keluar ke kiri sambil memudar,
   sementara konten melebar dengan kurva yang sama supaya keduanya bergerak serempak.
   visibility ditunda sampai geseran selesai agar menu tidak bisa difokus saat tertutup. */
@media (min-width:761px) {
	.sidebar {
		transition: margin-left .42s cubic-bezier(.22, .61, .36, 1), opacity .32s ease .06s, visibility 0s linear 0s;
	}
	.konten { transition: width .42s cubic-bezier(.22, .61, .36, 1); }
	.sidebar-tutup .sidebar {
		margin-left: -262px; opacity: 0; visibility: hidden;
		transition: margin-left .42s cubic-bezier(.22, .61, .36, 1), opacity .24s ease, visibility 0s linear .42s;
	}
	.sidebar-tutup .konten { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.sidebar, .konten { transition: none !important; }
}

@media (max-width:760px) {
	.topbar { margin: -20px -14px 20px; padding: 0 12px; }
	.brand { height: auto; padding: 0 180px 10px 0; border-bottom: 0; }
	.profil { margin-top: 0; }
	.sidebar-bawah { margin-top: 0; padding-top: 0; border-top: 0; }
	.judul-halaman h1 { font-size: 25px; }
	#halaman-dashboard .kartu-ringkasan { gap: 14px; }
	.remah span:first-child, .remah span:first-child + .remah-pisah { display: none; }
	/* Di layar sempit remah cukup menampilkan nama halaman. */
	#remahKategori, #remahPisahKategori { display: none !important; }
	.topbar { height: 58px; }
	/* Judul kartu dan tab periode ditumpuk supaya tidak memaksa halaman melebar. */
	#halaman-dashboard .panel-heading { flex-wrap: wrap; gap: 12px; }
	#halaman-dashboard .panel-heading > div { min-width: 0; }
	.tab-periode { display: flex; width: 100%; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
	.tab-periode::-webkit-scrollbar { display: none; }
}

/* ---------- GRAFIK AREA MULTI-SERI & LEGENDA ---------- */
/* Legenda di atas chart, mengikuti pola dashboard analitik pada referensi. */
.legenda-chart { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: -6px 0 14px; }
.legenda-chart span {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--o-teks-lembut); font-size: var(--fs-tabel); font-weight: var(--fw-medium);
}
.legenda-chart .dot { width: 10px; height: 10px; }
.area-isi { stroke: none; }
.area-garis { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.line-point-dot { fill: #fff; stroke-width: 2.5; }
.line-tooltip .tip-judul { font-weight: var(--fw-kuat); }
.line-tooltip text { fill: var(--o-teks); font-size: 13px; }
.line-tooltip rect { fill: #fff; stroke: var(--o-garis); filter: drop-shadow(0 10px 20px rgba(15, 23, 42, .16)); }
/* Grafik batang berkelompok: satu kelompok per tanggal sesi. */
.grafik-batang .batang-isi { gap: 3px; }
.grafik-batang .batang { max-width: 14px; border-radius: 5px 5px 0 0; }
.grafik-batang .batang-nol { min-height: 0; }

/* ---------- GRAFIK BATANG BERKELOMPOK (SVG) ---------- */
/* Wadahnya dulu flex berisi div batang; sekarang menampung satu SVG. */
.grafik-batang { display: block; height: auto; min-height: 0; gap: 0; }
.grafik-batang.grafik-kosong { display: grid; place-items: center; min-height: 150px; text-align: center; }
.bar-chart { display: block; width: 100%; height: auto; }
.bar-grid { stroke: #E7EAF3; stroke-width: 1; }
.bar-pemisah { stroke: #F0F2F8; stroke-width: 1; }
.bar-aksis { stroke: #DDE2EE; stroke-width: 1; }
.bar-sumbu, .bar-label { fill: #8A93A6; font-size: 13px; font-weight: var(--fw-medium); }
.bar-isi { transition: opacity .18s ease; }
.bar-isi:hover { opacity: .82; }
/* Warna batang memakai warna status yang sudah dipakai sistem. */
rect.batang-hadir { fill: var(--o-hijau); }
rect.batang-sakit { fill: var(--o-jingga); }
rect.batang-izin  { fill: var(--o-ungu-terang); }
rect.batang-alpa  { fill: var(--o-merah); }
rect.batang-masuk { fill: var(--o-ungu-terang); }
rect.batang-keluar { fill: var(--o-biru); }

/* Penanda legenda berbentuk kotak memanjang, seperti legenda chart pada referensi. */
.legenda-balok { justify-content: center; }
.legenda-balok .dot { width: 34px; height: 12px; border-radius: 6px; }

@media (max-width:760px) {
	.bar-sumbu, .bar-label { font-size: 21px; }
	.kurva-label { font-size: 20px; }
}

/* ---------- GRAFIK TUGAS: AREA DIVERGEN ---------- */
.grafik-line { position: relative; }
.dv-chart { display: block; width: 100%; height: auto; overflow: visible; }
.dv-grid { stroke: #EDEFF6; stroke-width: 1; }
.dv-nol { stroke: #C9D0E0; stroke-width: 1; }
.dv-sumbu, .dv-label { fill: #8A93A6; font-size: 12px; font-weight: var(--fw-medium); }
.dv-area { stroke: none; }
.dv-garis { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* Garis bidik dan titik hanya muncul saat kursor berada di atas grafik. */
.dv-silang { stroke: #B9C1D4; stroke-width: 1; stroke-dasharray: 4 4; opacity: 0; }
.dv-silang.tampil { opacity: 1; }
.dv-titik { fill: #fff; stroke-width: 3; opacity: 0; vector-effect: non-scaling-stroke; transition: opacity .15s ease; }
.dv-titik.tampil { opacity: 1; }

.dv-tip {
	position: absolute; top: 8px; z-index: 3;
	display: grid; gap: 6px;
	min-width: 150px; padding: 11px 13px;
	border: 1px solid var(--o-garis); border-radius: var(--o-radius-kecil);
	background: var(--o-permukaan);
	box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
	pointer-events: none;
}
.dv-tip-judul { color: var(--o-teks-lembut); font-size: var(--fs-kecil); font-weight: var(--fw-tebal); }
.dv-tip-baris { display: flex; align-items: center; gap: 8px; color: var(--o-teks-lembut); font-size: var(--fs-tabel); }
.dv-tip-baris b { margin-left: auto; color: var(--o-teks); font-weight: var(--fw-kuat); font-variant-numeric: tabular-nums; }
.dv-tip .dot { flex: 0 0 auto; width: 9px; height: 9px; }

/* Legenda bawah yang bisa diklik untuk menyaring seri. */
.legenda-tugas span[data-seri] { cursor: pointer; user-select: none; transition: opacity .2s ease; }
.legenda-tugas span[data-seri]:hover { opacity: .72; }
.legenda-tugas span[data-seri].mati { opacity: .38; text-decoration: line-through; }

@media (max-width:760px) {
	.dv-sumbu, .dv-label { font-size: 22px; }
	.dv-tip { min-width: 132px; padding: 9px 11px; }
}

/* =========================================================
   PENYESUAIAN UKURAN KARTU DASHBOARD (tampilan minimalis)
   Dibatasi ke #halaman-dashboard supaya kartu di halaman lain
   (Daftar Tugas, Laporan, Pengaturan, login) tidak ikut berubah.
   ========================================================= */
#halaman-dashboard .panel,
#halaman-dashboard .kartu-stat { border-radius: 14px; }
#halaman-dashboard .panel { padding: 18px; }
#halaman-dashboard .panel-heading { margin-bottom: 14px; }
#halaman-dashboard .panel-heading h2 { font-size: var(--fs-menengah); }

/* Kartu statistik lebih padat: padding, angka, dan sparkline dikecilkan. */
#halaman-dashboard .kartu-ringkasan { gap: 14px; }
#halaman-dashboard .kartu-stat { padding: 16px 16px 0; }
#halaman-dashboard .kartu-stat .ikon-stat { width: 36px; height: 36px; border-radius: 10px; --aurora-icon-size: 18px; }
#halaman-dashboard .kartu-stat strong { font-size: 25px; }
#halaman-dashboard .lencana-tren { padding: 4px 9px; }
#halaman-dashboard .sparkline { height: 34px; margin: 11px -16px 0; }

/* Grid antar kartu dirapatkan. */
#halaman-dashboard .grid-dashboard,
#halaman-dashboard .grid-grafik { gap: 14px; margin-top: 14px; }

/* Area gambar tiap grafik dipendekkan agar kartu tidak menjulang. */
#halaman-dashboard .grafik-tugas-angka strong { font-size: 26px; }
#halaman-dashboard .aksi-grid { gap: 10px; }
#halaman-dashboard .aksi-grid button { min-height: 96px; padding: 13px; }
#halaman-dashboard .aksi-grid button > span { width: 32px; height: 32px; margin-bottom: 8px; --aurora-icon-size: 18px; }
#halaman-dashboard .legenda-chart { margin: -2px 0 10px; }
#halaman-dashboard .panel-donat .ringkas-wa,
#halaman-dashboard .ringkas-wa { margin-top: 10px; }

@media (max-width:760px) {
	#halaman-dashboard .panel { padding: 15px; }
	#halaman-dashboard .kartu-stat { padding: 14px 14px 0; }
	#halaman-dashboard .sparkline { margin: 10px -14px 0; }
	#halaman-dashboard .kartu-ringkasan { gap: 12px; }
}
/* Lantai tinggi warisan lapis aurora dilepas agar rasio chart yang baru berlaku. */
#halaman-dashboard .grafik-line { min-height: 0; }
#halaman-dashboard .grafik-batang { min-height: 0; }
#halaman-dashboard .panel { min-height: 0; }
#halaman-dashboard .grafik-line.grafik-kosong,
#halaman-dashboard .grafik-batang.grafik-kosong { min-height: 150px; }

/* ---------- BARIS ATAS DASHBOARD: Grafik Tugas + Aksi Cepat ---------- */
/* Dibatasi ke .grid-dashboard supaya kartu Kehadiran dan Tabungan
   di baris bawah tidak ikut mengecil. Keduanya satu baris grid, jadi
   tinggi ditentukan yang tertinggi - dua-duanya perlu diringkas. */
#halaman-dashboard .grid-dashboard .panel { padding: 16px; }
#halaman-dashboard .grid-dashboard .panel-heading { margin-bottom: 10px; }

/* Grafik Tugas: area chart dipendekkan, angka persen dan jarak dirapatkan. */
#halaman-dashboard .grafik-tugas-wrap { gap: 10px; }
#halaman-dashboard .grafik-tugas-angka strong { font-size: 22px; }
#halaman-dashboard .tab-periode { padding: 2px; }
#halaman-dashboard .tab-periode-btn { padding: 5px 11px; }

/* Aksi Cepat: tombol lebih pendek supaya tidak jadi penentu tinggi baris. */
#halaman-dashboard .aksi-grid { gap: 9px; }
#halaman-dashboard .aksi-grid button { min-height: 84px; padding: 11px; }
#halaman-dashboard .aksi-grid button > span { width: 28px; height: 28px; margin-bottom: 6px; --aurora-icon-size: 16px; }

@media (max-width:760px) {
	#halaman-dashboard .grid-dashboard .panel { padding: 14px; }
}

/* ---------- SKALA ANGKA DI KARTU DASHBOARD ---------- */
/* Angka utama sebelumnya 22-25px, jauh di atas judul kartu (16px) dan
   label (12px) sehingga terlihat mencolok. Diturunkan agar tetap menonjol
   tapi satu keluarga dengan teks lain di dashboard. */
#halaman-dashboard .kartu-stat strong,
#halaman-dashboard .grafik-tugas-angka strong { font-size: var(--fs-sedang); }

/* =========================================================
   KARTU STATISTIK DASHBOARD
   Susunan mengikuti pola kartu statistik dashboard modern:
     label kiri atas - ikon kanan atas
     angka besar
     baris tren: panah + persentase berwarna, lalu keterangan
     sparkline berwarna menempel di dasar kartu (garis aksen kartu)
   Warna identitas tiap kartu ditulis sekali lewat variabel --aksen*.
   ========================================================= */
#halaman-dashboard .kartu-stat.biru {            /* Total Tugas - hijau */
	--aksen: #2FA36B; --aksen-lembut: #E7F6EE; --aksen-garis: rgba(47, 163, 107, .24);
}
#halaman-dashboard .kartu-stat.hijau {           /* Tugas Selesai - teal */
	--aksen: #14A8A8; --aksen-lembut: #E0F6F6; --aksen-garis: rgba(20, 168, 168, .24);
}
#halaman-dashboard .kartu-stat.jingga {          /* Saldo Tabungan - biru */
	--aksen: #4285F4; --aksen-lembut: #E8F0FE; --aksen-garis: rgba(66, 133, 244, .24);
}
#halaman-dashboard .kartu-stat.ungu {            /* Kehadiran Hari Ini - oranye */
	--aksen: #E9A23B; --aksen-lembut: #FDF3E2; --aksen-garis: rgba(233, 162, 59, .26);
}

#halaman-dashboard .kartu-stat {
	position: relative; overflow: hidden;
	display: grid; gap: 0;
	grid-template-columns: auto 1fr;
	grid-template-areas: none;
	align-items: center; align-content: start;
	min-height: 0; padding: 16px 16px 0;
	background: var(--o-permukaan);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
#halaman-dashboard .kartu-stat::before,
#halaman-dashboard .kartu-stat::after { content: none; }
#halaman-dashboard .kartu-stat:hover {
	transform: translateY(-3px);
	border-color: var(--aksen-garis);
	box-shadow: 0 2px 6px rgba(15, 23, 42, .05), 0 14px 30px rgba(15, 23, 42, .10);
}

/* Anak-anak <div> pembungkus ikut jadi item grid supaya bisa ditata satu per satu. */
#halaman-dashboard .kartu-stat > div { display: contents; }

/* Baris 1: label kiri. Ikon dilepas dari alur dan ditempel di kanan atas. */
#halaman-dashboard .kartu-stat p {
	grid-area: auto; grid-column: 1 / -1; grid-row: 1;
	margin: 0 56px 6px 0;
	color: var(--o-teks-lembut);
	font-size: var(--fs-kecil); font-weight: var(--fw-tebal);
	letter-spacing: 0; text-transform: none;
}
#halaman-dashboard .kartu-stat .ikon-stat {
	grid-area: auto; position: absolute; top: 16px; right: 16px;
	width: 44px; height: 44px; border-radius: 12px;
	background: var(--aksen-lembut); color: var(--aksen);
	--aurora-icon-size: 23px;
}

/* Baris 2: angka utama, gelap dan tegas seperti pada referensi. */
#halaman-dashboard .kartu-stat strong {
	grid-area: auto; grid-column: 1 / -1; grid-row: 2;
	margin: 0 0 8px; color: var(--o-teks);
	font-size: 22px; font-weight: var(--fw-kuat);
	letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

/* Baris 3: persentase tren + keterangan, sebaris. */
#halaman-dashboard .lencana-tren {
	grid-area: auto; grid-column: 1; grid-row: 3; justify-self: start;
	display: inline-flex; align-items: center; gap: 4px;
	margin-right: 7px; padding: 0; border-radius: 0; background: none;
	font-size: var(--fs-kecil); font-weight: var(--fw-kuat);
	font-variant-numeric: tabular-nums; white-space: nowrap;
}
#halaman-dashboard .tren-naik { color: var(--o-hijau); }
#halaman-dashboard .tren-turun { color: var(--o-merah); }
/* Panah tren dipasang lewat CSS supaya teks lencana dari JS tidak perlu diubah. */
#halaman-dashboard .tren-naik::before { content: "\2197"; font-weight: var(--fw-kuat); }
#halaman-dashboard .tren-turun::before { content: "\2198"; font-weight: var(--fw-kuat); }
#halaman-dashboard .kartu-stat small {
	grid-area: auto; grid-column: 2; grid-row: 3; justify-self: start;
	color: #8A93A6; font-size: var(--fs-kecil); line-height: 1.4;
}

/* Baris 4: sparkline penuh selebar kartu - inilah garis aksen kartu. */
#halaman-dashboard .kartu-stat .sparkline {
	grid-area: auto; grid-column: 1 / -1; grid-row: 4;
	height: 40px; margin: 12px -16px 0;
	color: var(--aksen);
}

@media (max-width:760px) {
	#halaman-dashboard .kartu-stat { padding: 14px 14px 0; }
	#halaman-dashboard .kartu-stat .ikon-stat { top: 14px; right: 14px; }
	#halaman-dashboard .kartu-stat .sparkline { margin: 12px -14px 0; }
}

/* ---------- KARTU DONAT PROPORSI (Grafik Tabungan) ---------- */
.donat-sumber { display: flex; align-items: center; gap: 22px; flex: 1 1 auto; padding: 4px 0 2px; }
.donat-sumber.grafik-kosong { display: grid; place-items: center; min-height: 150px; text-align: center; }
.donat-gambar { position: relative; flex: 0 0 auto; width: 150px; height: 150px; }
.donat-gambar svg { display: block; width: 100%; height: 100%; }
/* Nominal saldo diletakkan di lubang donat. */
.donat-tengah {
	position: absolute; inset: 0;
	display: grid; place-content: center; text-align: center; pointer-events: none;
}
.donat-tengah strong {
	display: block; color: var(--o-teks);
	font-size: 17px; font-weight: var(--fw-kuat); letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}
.donat-tengah small { display: block; margin-top: 2px; color: var(--o-teks-lembut); font-size: var(--fs-kecil); }

.donat-rincian { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.donat-rincian li { display: flex; align-items: center; gap: 10px; }
.donat-rincian .dot { flex: 0 0 auto; width: 10px; height: 10px; }
.donat-nama {
	flex: 1 1 auto; min-width: 0; color: #56607A;
	font-size: var(--fs-tabel); font-weight: var(--fw-medium);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.donat-persen {
	flex: 0 0 auto; color: var(--o-teks);
	font-size: var(--fs-tabel); font-weight: var(--fw-kuat); font-variant-numeric: tabular-nums;
}

@media (max-width:560px) {
	.donat-sumber { gap: 16px; }
	.donat-gambar { width: 124px; height: 124px; }
}

/* ---------- PERIODE AKTIF (kanan atas kepala halaman) ---------- */
.periode-aktif { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.periode-aktif[hidden], .tanggal-hari[hidden] { display: none; }
.periode-aktif-label {
	display: inline-flex; align-items: center; gap: 6px; margin-right: 2px;
	color: var(--o-teks-lembut); font-size: var(--fs-tabel); font-weight: var(--fw-medium); white-space: nowrap;
	--aurora-icon-size: 16px;
}
.periode-aktif-label [data-icon] { color: var(--o-ungu); }
.periode-aktif select {
	width: auto; min-width: 128px; height: 38px; padding: 0 30px 0 12px;
	border: 1px solid var(--o-garis); border-radius: 10px;
	background-color: var(--o-permukaan); color: var(--o-teks);
	font-size: var(--fs-tabel); font-weight: var(--fw-tebal); cursor: pointer;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.periode-aktif select:hover { border-color: var(--o-ungu-terang); }
.periode-aktif select:disabled { color: var(--o-teks-lembut); background-color: #F4F5FA; cursor: not-allowed; }
.ringkas-periode { margin: 12px 20px 0; }

@media (max-width:760px) {
	.judul-halaman { flex-wrap: wrap; gap: 12px; }
	.periode-aktif { width: 100%; justify-content: flex-start; }
	.periode-aktif-label { width: 100%; }
	.periode-aktif select { flex: 1 1 0; width: auto; min-width: 0; }
	.ringkas-periode { margin-left: 14px; margin-right: 14px; }
}

/* =========================================================
   MENU SAMPING DI LAYAR HP
   Sidebar menjadi laci yang digeser dari kiri lewat tombol hamburger
   (body.sidebar-terbuka), bukan lagi baris menu mendatar yang berdesakan
   dengan nama akun. Isinya kembali tersusun ke bawah seperti di desktop.
   ========================================================= */
.tirai-sidebar { display: none; }

@media (max-width:760px) {
	.sidebar {
		position: fixed; top: 0; bottom: 0; left: 0; z-index: 80;
		display: flex; flex-direction: column;
		width: min(290px, 86vw); height: 100dvh; padding: 14px 12px 16px;
		border-right: 1px solid var(--o-garis); border-bottom: 0;
		background: var(--o-permukaan); box-shadow: none;
		overflow-y: auto; overscroll-behavior: contain;
		transform: translateX(-100%);
		transition: transform .3s cubic-bezier(.22, .61, .36, 1);
	}
	body.sidebar-terbuka .sidebar { transform: none; box-shadow: 0 24px 60px rgba(15, 23, 42, .32); }
	body.sidebar-terbuka { overflow: hidden; }

	.tirai-sidebar {
		display: block; position: fixed; inset: 0; z-index: 70;
		background: rgba(15, 23, 42, .45);
		opacity: 0; pointer-events: none; transition: opacity .25s ease;
	}
	body.sidebar-terbuka .tirai-sidebar { opacity: 1; pointer-events: auto; }

	/* Isi laci: merek, menu bertumpuk, lalu kartu profil dan tombol keluar di bawah. */
	.sidebar .brand { height: auto; margin: 0 0 6px; padding: 4px 6px 12px; border-bottom: 1px solid var(--o-garis); }
	.sidebar .brand strong { font-size: var(--fs-menengah); }
	.sidebar .label-menu { display: block; margin: 16px 6px 6px 12px; }
	.sidebar .navigasi { display: flex; flex-direction: column; gap: 3px; width: auto; padding: 6px 0 0; overflow-x: visible; }
	.sidebar .tab-btn, .sidebar .tab-btn.aktif, .sidebar .navigasi .tab-btn:not(.aktif) {
		width: 100%; padding: 10px 12px; font-size: var(--fs-tabel); white-space: normal;
	}
	.sidebar .tab-btn span[data-icon] { width: 22px; margin-right: 2px; font-size: 0; }
	/* Kategori kembali berupa akordeon bertumpuk (app.css sempat membuatnya mendatar
	   untuk sidebar versi lama), lengkap dengan submenu yang membuka ke bawah. */
	.sidebar .kategori-menu { display: grid; gap: 0; }
	.sidebar .kategori-induk { flex: 0 0 auto; width: 100%; min-height: 42px; padding: 9px 12px; white-space: normal; }
	.sidebar .isi-kategori { display: grid; grid-template-rows: 0fr; }
	.sidebar .kategori-menu.terbuka .isi-kategori { display: grid; grid-template-rows: 1fr; }
	.sidebar .daftar-kategori {
		display: grid; gap: 2px; overflow: hidden;
		margin: 0 0 0 25px; padding-left: 10px; border-left: 1px solid var(--o-garis);
	}
	.sidebar .daftar-kategori > :first-child { margin-top: 3px; }
	.sidebar .daftar-kategori > :last-child { margin-bottom: 6px; }
	.sidebar .daftar-kategori .tab-btn { min-height: 36px; padding: 8px 12px; font-weight: var(--fw-medium); }
	.sidebar .profil {
		position: static; max-width: none; margin-top: auto; padding: 10px 11px;
		border: 1px solid var(--o-garis); border-radius: var(--o-radius-kecil); background: #FAFAFE;
	}
	.sidebar .profil small { display: block; }
	.sidebar .sidebar-bawah { position: static; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--o-garis); }
	.sidebar button.keluar {
		width: 100%; height: auto; gap: 8px; padding: 10px;
		border-radius: var(--o-radius-kecil); font-size: var(--fs-tabel);
	}
	.sidebar button.keluar .app-icon { --aurora-icon-size: 17px; }

	.konten { width: 100%; }
	/* Tombol hamburger jadi satu-satunya jalan membuka menu, jadi selalu tampak. */
	.topbar-toggle { display: inline-grid; }
}

@media (max-width:760px) and (prefers-reduced-motion: reduce) {
	.sidebar, .tirai-sidebar { transition: none; }
}