:root {
    --primary: #2f5d50;
    --primary-dark: #234539;
    --accent: #d4a857;
    --bg-soft: #f4f6f5;
    --sidebar-w: 250px;
}

body {
    background: var(--bg-soft);
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ===== LOGIN ===== */
.login-page { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); min-height: 100vh; display:flex; align-items:center; }
.login-wrapper { width:100%; display:flex; justify-content:center; }
.login-card { background:#fff; border-radius:16px; padding:2.5rem; width:100%; max-width:380px; box-shadow:0 20px 50px rgba(0,0,0,.25); }
.login-icon { font-size:2.5rem; color:var(--primary); }

/* ===== LAYOUT ===== */
.app-wrapper { display:flex; flex-direction:column; min-height:100vh; }
.topbar { height:60px; background:#fff; border-bottom:1px solid #e3e6e5; position:sticky; top:0; z-index:1030; }

.sidebar {
    position:fixed; top:60px; left:0; bottom:0; width:var(--sidebar-w);
    background:var(--primary-dark); color:#fff; overflow-y:auto; z-index:1020;
    transition: transform .25s ease;
}
.sidebar-brand { padding:1.1rem 1.2rem; font-weight:700; font-size:1.05rem; color:#fff; display:flex; align-items:center; gap:.5rem; border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar-nav { display:flex; flex-direction:column; padding:.5rem 0 2rem; }
.sidebar-nav a { color:rgba(255,255,255,.78); padding:.55rem 1.2rem; text-decoration:none; font-size:.92rem; display:flex; align-items:center; gap:.6rem; }
.sidebar-nav a:hover { background:rgba(255,255,255,.08); color:#fff; }
.sidebar-nav a.active { background:var(--accent); color:#1b1b1b; font-weight:600; }
.nav-group-title { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.45); padding:1rem 1.2rem .25rem; }

.nav-group-toggle {
    width:100%; background:none; border:none; color:rgba(255,255,255,.85);
    padding:.6rem 1.2rem; font-size:.92rem; display:flex; align-items:center;
    justify-content:space-between; cursor:pointer; text-align:left;
}
.nav-group-toggle:hover { background:rgba(255,255,255,.08); color:#fff; }
.nav-group-toggle span { display:flex; align-items:center; gap:.6rem; }
.nav-group-toggle .chevron { transition: transform .2s ease; font-size:.75rem; }
.nav-group-toggle.open .chevron, .nav-group-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.sidebar-nav .sub-link { padding-left:2.4rem; font-size:.88rem; }
.sidebar-nav .collapse .sub-link.active { background:var(--accent); color:#1b1b1b; font-weight:600; }

.main-content { margin-left:var(--sidebar-w); margin-top:60px; padding:1.25rem; flex:1; }

.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1015; }

@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.show { transform: translateX(0); }
    .main-content { margin-left:0; }
    .sidebar-overlay.show { display:block; }
}

/* ===== CARDS / WIDGETS ===== */
.stat-card { border:none; border-radius:14px; box-shadow:0 2px 10px rgba(0,0,0,.05); }
.stat-card .icon-box { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.card { border:none; border-radius:14px; box-shadow:0 2px 10px rgba(0,0,0,.05); }
.card-header { background:#fff; border-bottom:1px solid #eee; font-weight:600; border-radius:14px 14px 0 0 !important; }

table.dataTable { font-size:.88rem; }
.badge-lunas { background:#dcf5e3; color:#1f7a3d; }
.badge-belum { background:#fde3e3; color:#b42323; }

/* ===== PRINT ===== */
@media print {
    .no-print { display:none !important; }
    .topbar { display:none !important; }
    .sidebar { display:none !important; }
    body { background:#fff; font-size:10pt; }
    .main-content { margin:0 !important; padding:0 !important; }
    .card { box-shadow:none !important; border:none !important; margin-bottom:.25rem !important; }
    .card-body { padding:.4rem !important; }
    table { page-break-inside:auto; font-size:9.5pt; }
    tr { page-break-inside:avoid; page-break-after:auto; }
    thead { display:table-header-group; }
    th, td { padding:.25rem .4rem !important; }
    .judul-laporan-resmi { text-align:center; margin-bottom:2px; }
    .judul-laporan-resmi h5 { font-weight:bold; text-transform:uppercase; margin-bottom:0; font-size:12pt; }
    .judul-laporan-resmi p { margin-bottom:6px; font-size:9pt; }
    .kelas-break { page-break-after:always; break-after:page; }
    @page { margin: 1cm; }
}
.kop-surat { display:flex; align-items:center; gap:1rem; border-bottom:3px solid #000; padding-bottom:.75rem; margin-bottom:1rem; }
.kop-surat img { height:70px; }
.kop-surat h4, .kop-surat p { margin:0; }