:root{--green:#12603f;--green2:#177b50;--pale:#e7f5ec;--gold:#d5a128;--ink:#1b2b3d;--muted:#728096;--line:#e1e8ec;--bg:#f5f8f7;--shadow:0 16px 42px rgba(27,52,43,.09)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,"Segoe UI",Arial,sans-serif}a{color:inherit;text-decoration:none}button,select{font:inherit}
.sidebar{position:fixed;inset:0 auto 0 0;z-index:40;width:320px;display:flex;flex-direction:column;overflow-y:auto;background:radial-gradient(circle at 10% 5%,#fff,transparent 22%),linear-gradient(180deg,#eaf6ed,#dcefe4);border-right:1px solid #cfe2d5}.brand{display:flex;align-items:center;gap:14px;padding:25px 22px;border-bottom:1px solid #cfe2d5}.brand img{width:52px;height:64px;object-fit:contain}.brand span,.brand strong,.brand small{display:block}.brand strong{color:var(--green);font-size:19px}.brand small{max-width:200px;margin-top:3px;color:#587064;font-size:11px;line-height:1.4}.nav-title{margin:22px 25px 8px;color:#6b8375;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.sidebar nav{padding:0 14px}.goal{margin-bottom:7px}.goal-button{width:100%;display:grid;grid-template-columns:30px 1fr 20px;gap:9px;align-items:start;padding:12px;color:#315b44;background:transparent;border:0;border-radius:12px;text-align:left;cursor:pointer;line-height:1.45}.goal-button:hover,.goal-button.active{background:rgba(255,255,255,.75);box-shadow:inset 3px 0 var(--gold)}.goal-button b{width:26px;height:26px;display:grid;place-items:center;color:#fff;background:var(--green2);border-radius:8px;font-size:12px}.goal-button i{font-size:18px;font-style:normal}.indicator-links{display:none;max-height:260px;overflow:auto;padding:6px 5px 8px 50px}.indicator-links.open{display:block}.indicator-links a{display:block;padding:7px 8px;color:#557365;border-left:1px solid #b9d4c4;font-size:11px;line-height:1.4}.indicator-links a strong{display:block;color:var(--green2)}.side-note{margin:auto 20px 22px;padding:17px;color:#486757;background:rgba(255,255,255,.58);border-radius:14px}.side-note strong{color:var(--green)}.side-note p{font-size:12px}.side-note small{font-size:10px}
main{min-height:100vh;margin-left:320px}header{position:sticky;top:0;z-index:20;height:80px;display:flex;align-items:center;gap:14px;padding:0 34px;background:rgba(255,255,255,.92);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}header>span{color:#698074;font-size:12px;font-weight:800;letter-spacing:.1em}header a{display:flex;align-items:center;gap:7px;margin-left:auto;color:var(--green);font-weight:700}.menu{width:46px;height:44px;color:var(--green);background:#fff;border:1px solid var(--line);border-radius:12px;font-size:20px;cursor:pointer}.content{padding:38px 34px 44px}.hero{max-width:1450px;display:flex;justify-content:space-between;gap:24px;align-items:end;margin:0 auto 22px}.hero em{display:inline-flex;padding:5px 9px;color:var(--green2);background:var(--pale);border-radius:999px;font-size:10px;font-style:normal;font-weight:800;letter-spacing:.12em}.hero h1{margin:12px 0 5px;color:var(--green);font-size:clamp(30px,3vw,43px);letter-spacing:-.04em}.hero p{max-width:730px;margin:0;color:var(--muted);line-height:1.6}.updated{min-width:220px;padding:13px 16px;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 8px 24px rgba(27,52,43,.05)}.updated small,.updated strong{display:block}.updated small{color:var(--muted);font-size:10px;text-transform:uppercase}.updated strong{margin-top:4px;color:var(--green);font-size:13px}
.filter{max-width:1450px;display:grid;grid-template-columns:auto 1fr 105px auto 1fr 105px auto;gap:10px;align-items:center;padding:13px;margin:0 auto 24px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 24px rgba(27,52,43,.05)}.filter>strong,.filter>span{color:#77867e;font-size:13px}.filter select{min-height:48px;padding:0 12px;color:#3a4c42;background:#f5f8f6;border:1px solid transparent;border-radius:10px}.filter select:focus{outline:3px solid rgba(23,123,80,.15)}.filter button{min-height:48px;padding:0 20px;color:#fff;background:linear-gradient(135deg,#9a6a08,var(--gold));border:0;border-radius:10px;font-weight:750;cursor:pointer}
.stats{max-width:1450px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0 auto 28px}.stats article{min-height:215px;display:flex;justify-content:space-between;align-items:end;gap:15px;padding:31px;color:#fff;border-radius:25px;box-shadow:0 20px 36px rgba(28,64,51,.16)}.stats .blue{background:linear-gradient(135deg,#173c61,#2f73bd)}.stats .teal{background:linear-gradient(135deg,#087b78,#13a9ac)}.stats .gold{background:linear-gradient(135deg,#c56b2e,#e0ac47)}.stats p{margin:0 0 45px;color:rgba(255,255,255,.82);font-size:13px;font-weight:800;letter-spacing:.08em}.stats div>strong{display:block;font-size:56px;line-height:1}.stats strong small{margin-left:4px;color:rgba(255,255,255,.72);font-size:19px}.stats div>span{display:block;margin-top:10px;color:rgba(255,255,255,.7);font-size:12px}.stats article>b{--p:320deg;position:relative;width:76px;height:76px;display:grid;place-items:center;flex:0 0 76px;margin-bottom:4px;background:conic-gradient(#fff var(--p),rgba(255,255,255,.18) 0);border-radius:50%;font-size:13px}.stats article>b:before{content:"";position:absolute;width:59px;height:59px;background:rgba(0,0,0,.1);border-radius:50%}.stats article>b{isolation:isolate}.stats article>b:before{z-index:-1}
.analytics{max-width:1450px;display:grid;grid-template-columns:1.8fr .9fr;gap:24px;margin:0 auto 24px}.card{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}.card-title{display:flex;justify-content:space-between;gap:15px;align-items:start;padding:24px 28px 8px}.card-title h2{margin:0;font-size:18px}.card-title p{margin:6px 0 0;color:#94a1b1;font-size:12px}.card-title>span{padding:6px 12px;color:var(--green);background:#eef4f0;border-radius:999px;font-size:11px;font-weight:750}.bars{height:300px;display:grid;grid-template-columns:repeat(3,1fr);gap:35px;align-items:end;padding:28px 60px 0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 54px,#edf1f3 55px)}.bars>div{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:end}.bars>div>strong{margin-bottom:8px;color:#3b5167;font-size:12px}.bars>div>i{position:relative;width:min(72px,65%);flex:1}.bars>div>i>b{position:absolute;inset:auto 0 0;background:linear-gradient(180deg,#20a572,var(--green));border-radius:8px 8px 2px 2px}.bars>div>i>em{position:absolute;left:-13px;right:-13px;bottom:83.33%;border-top:2px dashed #c8d2d7}.bars small{height:34px;display:flex;align-items:center;color:#718096;font-weight:700}.legend{margin:0;padding:10px 20px 22px;color:#8090a0;font-size:10px;text-align:center}.balance canvas{width:min(320px,94%);height:auto;display:block;margin:5px auto}.balance>small{display:block;padding:0 25px 25px;color:var(--muted);font-size:11px;line-height:1.6;text-align:center}
.details{max-width:1450px;margin:0 auto}.table-wrap{overflow-x:auto;padding:12px 28px 28px}table{width:100%;border-collapse:collapse;font-size:12px}th{padding:12px;color:#748398;background:#f3f7f5;text-align:left;font-size:10px;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}td{padding:13px 12px;color:#4a5b6e;border-bottom:1px solid #edf1ef;vertical-align:top}td:first-child{color:var(--green);white-space:nowrap}td small{display:block;margin-top:4px;color:#98a3af}tbody tr{scroll-margin-top:95px}tbody tr:target{background:#eff9f2;box-shadow:inset 4px 0 var(--gold)}.status{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:750;white-space:nowrap}.status.success{color:#11683e;background:#e5f6eb}.status.warning{color:#8a5b07;background:#fff2cf}.status.empty{color:#647181;background:#edf1f3}
footer{display:flex;justify-content:space-between;gap:18px;padding:20px 34px;color:#819087;background:#fff;border-top:1px solid var(--line);font-size:10px}.overlay{display:none}
@media(max-width:1100px){.sidebar{width:285px}main{margin-left:285px}.stats{gap:14px}.stats article{min-height:190px;padding:22px}.stats p{margin-bottom:34px}.analytics{grid-template-columns:1fr}.filter{grid-template-columns:repeat(3,1fr)}.filter>strong,.filter>span{display:none}}
@media(max-width:900px){.sidebar{transform:translateX(-105%);transition:.25s}.sidebar.open{transform:translateX(0)}main{margin-left:0}.overlay.show{position:fixed;inset:0;z-index:35;display:block;background:rgba(6,31,21,.48);border:0}}
@media(max-width:700px){header{height:68px;padding:0 16px}header>span{display:none}.content{padding:25px 14px 34px}.hero{display:block}.updated{margin-top:16px}.filter{grid-template-columns:1fr 1fr}.filter button{grid-column:1/-1}.stats{grid-template-columns:1fr}.stats article{min-height:180px}.card-title{flex-wrap:wrap;padding:20px 18px 8px}.bars{padding-inline:30px}.table-wrap{padding:10px 18px 22px}footer{display:grid;padding:18px 16px}}

/* Tabel capaian seperti SI-MONEVKU */
.performance-table{margin-top:26px}.performance-table .table-wrap{padding-top:18px}.performance-table table{font-size:13px}.performance-table thead th{padding:15px 13px;color:#fff;background:#315f99;border-right:1px solid rgba(255,255,255,.14);font-size:11px}.performance-table thead th:first-child{border-radius:12px 0 0 0}.performance-table thead th:last-child{border-radius:0 12px 0 0}.performance-table td{padding:17px 13px}.performance-table tbody tr:nth-child(even){background:#f7f9fc}.performance-table .goal-cell{width:230px;color:#173a5e;line-height:1.45}.number-cell{text-align:center;white-space:nowrap}.gap{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;font-weight:800;white-space:nowrap}.gap.up{color:#08777d;background:#e6f3f2}.gap.down{color:#df5d32;background:#fff0ea}.detail-button{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;color:#fff;background:linear-gradient(135deg,#173a5e,#356db2);border-radius:9px;font-size:11px;font-weight:800;white-space:nowrap}.detail-button:hover{filter:brightness(1.08)}

/* Halaman detail indikator */
.dashboard-link{display:flex;margin:20px 14px 5px;padding:11px 14px;color:var(--green);background:rgba(255,255,255,.68);border-radius:10px;font-size:12px;font-weight:800}.detail-nav{max-height:530px;overflow-y:auto!important;padding:0 14px!important}.detail-nav a{display:block;padding:9px 10px;color:#557365;border-left:2px solid #b9d4c4;font-size:10px;line-height:1.35}.detail-nav a strong{display:block;color:var(--green2);font-size:11px}.detail-nav a:hover,.detail-nav a.active{color:#173a5e;background:#fff;border-left-color:var(--gold)}.detail-content{padding-top:30px}.detail-hero{max-width:1450px;display:grid;grid-template-columns:minmax(300px,1fr) auto;gap:28px;align-items:end;margin:0 auto 18px}.detail-hero>div>a{color:var(--green2);font-size:11px;font-weight:750}.detail-hero h1{margin:12px 0 3px;color:#df9200;font-size:34px}.detail-hero>div>p{max-width:780px;margin:0;color:#33465d;font-size:16px;font-weight:700;line-height:1.5}.detail-hero>div>span{display:block;margin-top:7px;color:#8490a0;font-size:11px}.detail-filter{display:grid;grid-template-columns:auto 125px 82px auto 125px 82px 42px;gap:6px;align-items:center;padding:20px;color:#df9200;background:#eaf3ff;border-left:4px solid #e89b00;border-radius:18px}.detail-filter select{height:38px;padding:0 8px;background:#fff;border:1px solid #b9c8d6;border-radius:5px}.detail-filter button{height:38px;color:#fff;background:#df9200;border:0;border-radius:6px;cursor:pointer}.indicator-banner{max-width:1450px;margin:0 auto 18px;padding:17px 24px;color:#273ccf;background:#d9d7ff;border-left:4px solid #3d3df5;border-radius:18px;font-size:14px}.detail-summary{max-width:1450px;display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:0 auto 18px}.detail-summary article{padding:20px;background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:0 8px 24px rgba(27,52,43,.05)}.detail-summary small,.detail-summary strong,.detail-summary span{display:block}.detail-summary small{color:var(--muted);font-weight:750}.detail-summary strong{margin:8px 0 4px;color:#173a5e;font-size:26px}.detail-summary span{color:var(--green2);font-size:10px}.note-card{max-width:1450px;margin:0 auto 18px;padding:24px;background:#fff0e5;border-radius:18px}.note-card h2{margin:0 0 18px;font-size:16px}.note-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.note-grid>div{padding:15px;background:rgba(255,255,255,.55);border-radius:12px}.note-grid strong{color:#173a5e;font-size:12px}.note-grid p{margin:7px 0 0;font-size:12px;line-height:1.6}.detail-history{max-width:1450px;margin:0 auto}.empty-detail{padding:30px!important;color:var(--muted);text-align:center}
@media(max-width:1050px){.detail-hero{grid-template-columns:1fr}.detail-filter{grid-template-columns:repeat(3,1fr)}.detail-filter>strong,.detail-filter>span{display:none}.detail-summary{grid-template-columns:repeat(2,1fr)}.note-grid{grid-template-columns:1fr}}
@media(max-width:700px){.performance-table .goal-cell{min-width:210px}.detail-filter{grid-template-columns:1fr 1fr}.detail-filter button{grid-column:1/-1}.detail-summary{grid-template-columns:1fr 1fr}.detail-hero h1{font-size:28px}}

/* Perbaikan kompatibilitas seluruh ukuran layar */
html,body{width:100%;max-width:100%;overflow-x:hidden}.sidebar{max-width:86vw}main{width:calc(100% - 320px);min-width:0}.content,.hero,.filter,.stats,.analytics,.details,.detail-hero,.indicator-banner,.detail-summary,.note-card,.detail-history{width:100%;min-width:0}.card,.table-wrap{max-width:100%;min-width:0}.table-wrap{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}.performance-table table{width:100%;min-width:0;table-layout:fixed}.performance-table th:nth-child(1){width:5%}.performance-table th:nth-child(2){width:18%}.performance-table th:nth-child(3){width:31%}.performance-table th:nth-child(4),.performance-table th:nth-child(5),.performance-table th:nth-child(6),.performance-table th:nth-child(7){width:9%}.performance-table th:nth-child(8){width:10%}.performance-table td{min-width:0;white-space:normal;overflow-wrap:anywhere;word-break:normal}.performance-table td.number-cell{white-space:nowrap}.detail-history table{min-width:780px}.goal-cell{overflow-wrap:anywhere}.stats article,.card-title>div{min-width:0}
@media(max-width:1100px){main{width:calc(100% - 285px)}}
@media(min-width:761px) and (max-width:1250px){.performance-table table{min-width:940px;table-layout:fixed}}
@media(max-width:900px){main{width:100%}.content{padding-left:18px;padding-right:18px}}
@media(max-width:760px){
  .content{padding-left:12px;padding-right:12px}
  .performance-table{overflow:visible;background:transparent;border:0;box-shadow:none}
  .performance-table .card-title{margin-bottom:12px;background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow)}
  .performance-table .table-wrap{padding:0;overflow:visible}
  .performance-table table,.performance-table tbody,.performance-table tr,.performance-table td{width:100%;display:block;min-width:0}
  .performance-table thead{display:none}
  .performance-table tbody{display:grid;gap:12px}
  .performance-table tbody tr{overflow:hidden;padding:7px 0;background:#fff!important;border:1px solid var(--line);border-radius:15px;box-shadow:0 8px 24px rgba(27,52,43,.07)}
  .performance-table tbody tr:target{box-shadow:inset 4px 0 var(--gold),0 8px 24px rgba(27,52,43,.07)}
  .performance-table td{position:relative;min-height:40px;padding:10px 12px 10px 42%;border-bottom:1px solid #edf1ef;text-align:left!important}
  .performance-table td:last-child{border-bottom:0}
  .performance-table td::before{content:attr(data-label);position:absolute;left:12px;top:10px;width:35%;color:#718096;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
  .performance-table .goal-cell{width:100%;min-width:0;color:#173a5e}
  .detail-button{width:100%;min-height:38px}
  .detail-history table{min-width:690px}
  .detail-summary{grid-template-columns:1fr}
  .detail-filter{width:100%;padding:14px}
  .note-card{padding:18px}
}
@media(max-width:420px){.performance-table td{padding-left:38%}.performance-table td::before{width:31%}.stats article{padding:20px}.stats div>strong{font-size:44px}.stats article>b{width:64px;height:64px;flex-basis:64px}.stats article>b:before{width:49px;height:49px}}