/* Gaya "Kaca Cerah": glassmorphism tema cerah. Semua gaya di berkas ini (CSP: tanpa style sebaris). */
:root{--ink:#12294d;--ink2:#34507c;--muted:#5c7396;--blue:#2f6df6;--blue-deep:#1f55d8;--blue-soft:#d3e2ff;--teal:#22b8cf;--green:#0f9d58;--amber:#b87d00;--red:#d93c4f;
--glass:rgba(255,255,255,.56);--glass-solid:rgba(255,255,255,.80);--edge:rgba(255,255,255,.88);--line:rgba(18,41,77,.12);
--shadow:0 12px 34px rgba(33,70,120,.16);--radius:22px;--focus:#12294d}
*{box-sizing:border-box}
html{background:#a9d2ee}
body{margin:0;min-height:100vh;color:var(--ink);font:14px/1.5 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;position:relative;
background:linear-gradient(135deg,#7fb8e6 0%,#a9d2ee 38%,#cfe4f3 70%,#e6f0f8 100%) fixed}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;filter:blur(8px);
background:radial-gradient(260px 260px at 8% 22%,rgba(255,255,255,.55),transparent 70%),radial-gradient(340px 340px at 92% 12%,rgba(47,109,246,.28),transparent 70%),radial-gradient(300px 300px at 78% 88%,rgba(34,184,207,.30),transparent 70%),radial-gradient(220px 220px at 20% 92%,rgba(255,255,255,.45),transparent 70%)}
#app,#login{position:relative;z-index:1}
.hidden{display:none!important}
button,input,select{font:inherit}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* kaca */
.card,.kpi,.top,.login-card,.drawer{background:var(--glass);border:1px solid var(--edge);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.9)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.card,.kpi,.top,.login-card,.drawer{background:#f4f9ff}}
/* tombol & form */
.btn{font-weight:700;font-size:13px;border:1px solid var(--edge);background:var(--glass-solid);color:var(--ink);border-radius:999px;padding:10px 18px;cursor:pointer;white-space:nowrap;transition:background .15s,box-shadow .15s}
.btn:hover{background:#fff}
.btn.primary{background:linear-gradient(135deg,#3b82f6,var(--blue));border-color:transparent;color:#fff;box-shadow:0 8px 20px rgba(47,109,246,.35)}
.btn.primary:hover{background:linear-gradient(135deg,var(--blue),var(--blue-deep))}
.btn.ghost{background:none;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--ink);background:none}
.btn:disabled{opacity:.5;cursor:wait}
input,select{color:var(--ink);background:var(--glass-solid);border:1px solid var(--line);border-radius:14px;padding:9px 14px;min-height:40px}
.brand{display:flex;gap:12px;align-items:center}
.brand b{font-size:16px;letter-spacing:-.3px}
.brand small{display:block;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.logo{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg,#60a5fa,var(--blue));color:#fff;font-weight:800;box-shadow:0 6px 16px rgba(47,109,246,.35)}
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login-card{width:min(400px,100%);display:grid;gap:16px;padding:34px;border-radius:var(--radius)}
.login-card label{display:grid;gap:6px;font-weight:700;font-size:12px}
.error{color:#b63444;margin:0;min-height:1em;font-size:12px}
/* kerangka */
.top{position:sticky;top:14px;z-index:5;margin:14px auto 0;max-width:1312px;width:calc(100% - 32px);border-radius:var(--radius);padding:12px 22px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.period{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:1}
.tabs{display:flex;gap:6px;align-items:center}
.tab{font-weight:700;font-size:13px;border:1px solid transparent;background:var(--glass-solid);color:var(--ink);padding:9px 18px;border-radius:999px;cursor:pointer}
.tab:hover{background:#fff}
.tab.active{background:var(--blue-soft);color:var(--blue-deep);border-color:#b9d0ff;box-shadow:0 6px 18px rgba(47,109,246,.22)}
main{max-width:1312px;margin:0 auto;padding:18px 16px 60px;display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.card{border-radius:var(--radius);padding:22px}
.card h3{margin:0 0 14px;font-size:17px;letter-spacing:-.3px}
.empty{text-align:center;color:var(--muted);padding:44px}
.status{color:var(--muted);font-size:13px;font-weight:600}
.status .lock{color:var(--amber);font-weight:800}
#report{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
main>*,.grid2>*{min-width:0}
/* KPI */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.kpi{border-radius:var(--radius);padding:20px 16px 16px;text-align:center}
.kpi span{display:block;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.kpi b{display:block;font-size:38px;font-weight:800;letter-spacing:-.04em;line-height:1.15;margin:6px 0 2px;font-variant-numeric:tabular-nums}
.kpi small{color:var(--muted);font-weight:700;font-size:12px}
.kpis .kpi:nth-child(1) b{color:var(--blue-deep)}.kpis .kpi:nth-child(2) b{color:var(--green)}.kpis .kpi:nth-child(3) b{color:#1795ab}
.warn{background:#fff0cc;color:#8a5d00;border:1px solid #f1dfaa;border-radius:16px;padding:12px 16px;margin-bottom:8px;font-weight:600}
.grid2{display:grid;grid-template-columns:3fr 2fr;gap:18px}
/* grafik */
.chart{height:200px;display:flex;align-items:flex-end;gap:3px;border-bottom:1px solid var(--line);padding-top:8px}
.chart .col{flex:1;height:100%;display:flex;align-items:flex-end;cursor:default}
.chart .col i{display:block;width:100%;background:linear-gradient(180deg,var(--blue),var(--teal));border-radius:6px 6px 0 0;min-height:1px;opacity:.9}
.chart .col:hover i{opacity:1;background:var(--blue-deep)}
.axis{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin-top:6px}
.hbars{display:grid;gap:8px;max-height:228px;overflow:auto}
.hbar{display:grid;grid-template-columns:minmax(0,1.3fr) 2fr auto;gap:10px;align-items:center;font-size:12px}
.hbar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink2);font-weight:600}
.hbar .track{height:10px;background:rgba(18,41,77,.08);border-radius:999px;overflow:hidden}
.hbar .track i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--blue));border-radius:999px}
.hbar b{font-variant-numeric:tabular-nums;font-weight:800}
/* tabel */
.tablebar{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;margin-bottom:14px}
.tablebar h3{margin:0}
.tools{display:flex;flex-wrap:wrap;gap:8px}
.tablewrap{overflow:auto;max-height:70vh;border-radius:16px}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{position:sticky;top:0;background:var(--glass-solid);color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;user-select:none}
th.sorted::after{content:" ▾"}
th.sorted.asc::after{content:" ▴"}
.num{text-align:right}
tbody tr{cursor:pointer}
tbody tr:hover{background:rgba(211,226,255,.55)}
tfoot td{font-weight:800;border-top:2px solid var(--line)}
td small{display:block;color:var(--muted);font-size:12px}
td input{width:130px;padding:4px 10px;min-height:34px}
td input.saved{border-color:var(--green)}
.badge{display:inline-block;font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px;background:rgba(18,41,77,.08);color:var(--muted);margin-left:4px}
.muted{color:var(--muted)}
/* panel samping */
.drawer{position:fixed;top:14px;right:14px;bottom:14px;width:min(440px,calc(100% - 28px));border-radius:var(--radius);z-index:10;overflow:auto;padding:20px;background:var(--glass-solid)}
.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.drawer-head small{display:block;color:var(--muted)}
.drawer h4{margin:18px 0 8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.drawer .chart{height:120px}
.tooltip{position:fixed;z-index:20;pointer-events:none;background:var(--ink);color:#fff;font-size:12px;padding:6px 10px;border-radius:10px;white-space:nowrap}
@media (max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}.top{width:calc(100% - 20px);padding:12px 16px}main{padding-left:10px;padding-right:10px}}