*{box-sizing:border-box}
:root{--green:#006b50;--green2:#008563;--gold:#f2b300;--ink:#17344b;--muted:#758590;--line:#e5ecef;--bg:#f4f7f8}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Segoe UI,Arial,sans-serif;font-size:13px}
.sidebar{position:fixed;z-index:100;left:0;top:0;bottom:0;width:248px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column}
.brand{height:82px;flex:none;background:linear-gradient(145deg,#005b45,#008466);color:#fff;padding:12px 14px;display:flex;align-items:center;gap:10px}
.brand img{width:52px;height:52px;border-radius:50%;object-fit:contain;background:#fff;padding:3px}
.brand b{font-size:12px;display:block;white-space:nowrap}.brand small{font-size:9px;display:block;opacity:.86;margin-top:3px}
.nav-area{padding:10px;overflow-y:auto;flex:1}.nav-caption{font-size:9px;font-weight:800;color:#9aa6ad;letter-spacing:.7px;margin:16px 10px 5px}
.nav-link-main,.nav-sub{display:flex;align-items:center;text-decoration:none;color:#526777;border-radius:8px;margin:2px 0}
.nav-link-main{gap:11px;padding:9px 10px;font-weight:600}.nav-link-main i{width:17px;text-align:center;color:#27765f}
.nav-sub{gap:9px;padding:7px 8px 7px 19px;font-size:12px}.nav-sub i{font-size:7px;color:#87949d}.nav-link-main:hover,.nav-sub:hover,.nav-link-main.active,.nav-sub.active{background:#eaf6f1;color:var(--green)}
.side-status{padding:11px 14px;border-top:1px solid var(--line);font-size:10px;color:#71818b}.side-status span{display:inline-block;width:7px;height:7px;background:#13a36e;border-radius:50%;margin-right:5px}
.topbar{position:fixed;left:248px;right:0;top:0;height:64px;background:#fff;border-bottom:1px solid var(--line);z-index:90;display:flex;justify-content:space-between;align-items:center;padding:0 22px}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:18px}.menu-toggle{border:0;background:none;color:var(--green);font-size:18px}.searchbox{height:37px;width:410px;border:1px solid #dfe7eb;border-radius:8px;background:#fbfcfc;display:flex;align-items:center;padding:0 11px;color:#87949e}.searchbox input{border:0;outline:0;background:transparent;width:100%;font-size:11px;padding-left:8px}
.clock{display:flex;gap:8px;align-items:center;color:#617480;font-size:10px}.clock i{color:var(--green)}.clock small{display:block;color:#9aa6ad;margin-top:2px}.administrator{display:flex;align-items:center;gap:8px}.administrator b{font-size:11px;display:block}.administrator small{font-size:9px;color:#8d9aa3;display:block}.administrator>i{font-size:8px;color:#82909a;margin-left:2px}.avatar{width:34px;height:34px;border-radius:50%;background:#e8f4ef;color:var(--green);display:grid;place-items:center}
.main{margin-left:248px;padding-top:64px;min-height:calc(100vh - 45px)}.content{padding:18px 22px 24px}
.hero{height:248px;border-radius:14px;background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.87) 31%,rgba(255,255,255,.16) 70%),url('../images/background/gedung-rsasm.png') center/cover no-repeat;display:flex;align-items:center;padding:30px;box-shadow:0 7px 24px rgba(18,52,69,.09)}
.hero-copy{max-width:410px}.hero h1{font-size:29px;line-height:1.1;margin:0 0 9px;color:#005f49;font-weight:800}.hero p{font-size:14px;line-height:1.55;color:#3c596b;margin:0}.hero .line{height:4px;width:55px;background:var(--gold);border-radius:5px;margin:15px 0}.hero em{font-weight:600;color:#17674f}
.filters{position:relative;margin-top:-25px;background:#fff;border-radius:11px;padding:15px;box-shadow:0 5px 18px rgba(18,52,69,.08)}.filters label{font-size:10px;font-weight:700;color:#566d7b;margin-bottom:4px}.filters .form-control,.filters .form-select{height:36px;border-color:#dce5e9;border-radius:7px;font-size:11px}.btn-green{height:36px;background:var(--green);border:0;color:#fff;border-radius:7px;font-size:11px;font-weight:700}.btn-green:hover{background:#005d47;color:#fff}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}.kpi{background:#fff;border-radius:11px;padding:14px;display:flex;gap:12px;align-items:center;box-shadow:0 4px 15px rgba(18,52,69,.06)}.kpi-icon{width:43px;height:43px;border-radius:9px;display:grid;place-items:center;font-size:18px}.green{background:#e8f6f0;color:#08785a}.mint{background:#edf8f3;color:#0b9b6d}.gold{background:#fff5df;color:#c88d00}.purple{background:#f0eafe;color:#7347cb}.kpi small{display:block;color:#73838e;font-size:9px}.kpi strong{display:block;font-size:23px;line-height:1.25}.kpi .up{font-size:9px;color:#0b9a6c}
.row2{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-top:12px}.row3{display:grid;grid-template-columns:2fr 1fr 1.15fr;gap:12px;margin-top:12px}.panel{background:#fff;border-radius:11px;padding:15px;box-shadow:0 4px 15px rgba(18,52,69,.06)}.panel-title{font-size:13px;font-weight:800;margin-bottom:10px}.panel-title small{float:right;color:#9aa6ad;font-weight:400;font-size:9px}.chart{height:220px}.chart.sm{height:190px}.mini-table{width:100%;font-size:9px}.mini-table th{background:#f7f9fa;color:#73828c;font-size:8px;text-transform:uppercase}.mini-table td,.mini-table th{padding:6px;border-bottom:1px solid #edf1f3}
.footer{margin-left:248px;background:#005c47;color:#d9eee8;padding:13px 24px;font-size:10px;display:flex;justify-content:space-between}.footer i{color:#14a970;font-size:7px;margin-right:4px}
@media(max-width:1050px){.searchbox{width:280px}.kpis{grid-template-columns:repeat(2,1fr)}.row3{grid-template-columns:1fr 1fr}.row3 .panel:last-child{grid-column:1/-1}}
@media(max-width:780px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:translateX(0)}.topbar{left:0}.main{margin-left:0}.footer{margin-left:0}.searchbox,.clock{display:none}.kpis,.row2,.row3{grid-template-columns:1fr}.content{padding:12px}.hero{height:230px;padding:22px;background:linear-gradient(90deg,rgba(255,255,255,.97),rgba(255,255,255,.58)),url('../images/background/gedung-rsasm.png') center/cover}.hero h1{font-size:25px}}