/* VervalBosku — tampilan layar penuh */
:root{
  --vv-primary:#0f6e6e; --vv-primary-2:#0b5757; --vv-bg:#f3f5f7; --vv-line:#e3e7ec; --vv-ink:#1d2733; --vv-mute:#6b7785;
  --vv-red:#d64545; --vv-amber:#e0a106; --vv-green:#1f9d63; --vv-blue:#2f6fde;
  --bs-primary:#0f6e6e; --bs-primary-rgb:15,110,110;
}
html,body{height:100%}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--vv-ink);background:var(--vv-bg);font-size:14px}
.btn-primary{--bs-btn-bg:var(--vv-primary);--bs-btn-border-color:var(--vv-primary);--bs-btn-hover-bg:var(--vv-primary-2);--bs-btn-hover-border-color:var(--vv-primary-2)}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- LOGIN ---------- */
.login-page{background:#fff}
.login-wrap{display:flex;min-height:100vh}
.login-side{flex:1;background:linear-gradient(150deg,#0f6e6e,#0a3f4f);color:#fff;padding:56px;display:flex;flex-direction:column}
.brand-big{font-size:30px;font-weight:800;margin-bottom:18px}
.login-points li{margin:10px 0;font-size:15px}.login-points i{margin-right:8px;opacity:.85}
.login-form{flex:1;display:flex;align-items:center;justify-content:center;padding:32px}
@media(max-width:820px){.login-side{display:none}}

/* ---------- KERANGKA ---------- */
.app{overflow:hidden;display:flex;flex-direction:column;height:100vh}
.topbar{height:56px;background:#fff;border-bottom:1px solid var(--vv-line);display:flex;align-items:center;gap:14px;padding:0 14px}
.brand{font-weight:800;font-size:18px;color:var(--vv-primary);white-space:nowrap}
.bidang{align-items:center;gap:10px;min-width:0;max-width:46vw}
.badge-bidang{background:#e8f3f3;color:var(--vv-primary);border-radius:20px;padding:4px 10px;font-weight:600;font-size:12px;white-space:nowrap}
.btn-icon{border:1px solid var(--vv-line);background:#fff;width:34px;height:34px;padding:0;border-radius:8px}
.btn-user{border:1px solid var(--vv-line);background:#fff;border-radius:8px;font-size:13px}
.tahun{font-size:12px;color:var(--vv-mute);border-left:1px solid var(--vv-line);padding-left:10px}
.sync{font-size:12px;color:var(--vv-mute);white-space:nowrap}.sync i{font-size:8px;vertical-align:middle;color:#aab}
.sync.ok i{color:var(--vv-green)}.sync.err i{color:var(--vv-red)}
.spin{animation:spin 1s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}

.workspace{display:grid;grid-template-columns:250px 380px 1fr;flex:1;min-height:0}
.topbar{flex:none}
/* ---------- TOTAL ANGGARAN ---------- */
.budget{flex:none;display:flex;align-items:stretch;gap:12px;padding:10px 14px;background:linear-gradient(90deg,#0f6e6e,#12807a);color:#fff;border-bottom:1px solid #0b5757}
.b-total{flex:none;min-width:230px;padding-right:14px;border-right:1px solid rgba(255,255,255,.25)}
.b-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;opacity:.85;font-weight:600}
.b-val{font-size:24px;font-weight:800;line-height:1.15;transition:color .2s}
.b-val.turun{color:#ffe08a}
.b-sub{font-size:11.5px;opacity:.85}
.b-live{background:#ffe08a;color:#5c4400;border-radius:10px;padding:1px 7px;font-size:10px;text-transform:none;letter-spacing:0;margin-left:4px}
.b-kats{flex:1;display:flex;gap:8px;overflow-x:auto;min-width:0;padding-bottom:2px}
.b-kat{flex:none;min-width:150px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:6px 10px;cursor:pointer;color:#fff;text-align:left}
.b-kat:hover{background:rgba(255,255,255,.2)}.b-kat.on{background:#fff;color:var(--vv-ink)}
.b-kat .n{font-size:11.5px;display:flex;align-items:center;gap:6px;white-space:nowrap;opacity:.95}
.b-kat .n .sw{width:9px;height:9px;border-radius:3px;flex:none;border:1px solid rgba(255,255,255,.6)}
.b-kat .v{font-size:15px;font-weight:700}
.b-kat .d{font-size:10.5px;opacity:.85;white-space:nowrap}
.b-kat .d .minus{color:#ffd0d0;font-weight:600}.b-kat.on .d .minus{color:#b42318}
.b-stat{flex:none;display:flex;flex-direction:column;justify-content:center;gap:2px;font-size:12px;padding-left:14px;border-left:1px solid rgba(255,255,255,.25);white-space:nowrap}
.b-stat b{margin-left:4px}
@media(max-width:1199px){.b-stat{display:none}}
@media(max-width:767px){.b-kats{display:none}.b-total{border:0}}
.pane{min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--vv-line)}
.pane-scroll{overflow:auto;flex:1;min-height:0}
.pane-filter{background:#fff}.pane-filter .pane-scroll{padding:14px}
.pane-list{background:#fbfcfd}
.pane-detail{background:var(--vv-bg);border-right:0;overflow:auto}
@media(max-width:1399px){.workspace{grid-template-columns:230px 340px 1fr}}
@media(max-width:1199px){
  .workspace{grid-template-columns:340px 1fr}
  .pane-filter{position:fixed;z-index:1050;top:56px;bottom:0;left:0;width:280px;transform:translateX(-100%);transition:.2s;box-shadow:0 0 30px rgba(0,0,0,.15)}
  .pane-filter.open{transform:none}
  .backdrop-filter.open{position:fixed;inset:56px 0 0 0;background:rgba(0,0,0,.25);z-index:1040}
}
@media(max-width:767px){.workspace{grid-template-columns:1fr}.pane-detail{display:none}.app.show-detail .pane-list{display:none}.app.show-detail .pane-detail{display:flex}}

/* ---------- FILTER ---------- */
.search-box{position:relative;margin-bottom:14px}.search-box i{position:absolute;left:10px;top:9px;color:var(--vv-mute)}
.search-box input{padding-left:32px;font-size:13px}
.f-group{margin-bottom:16px}
.f-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--vv-mute);margin-bottom:7px}
.f-list .f-kat{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer;user-select:none;border:1px solid transparent}
.f-list .f-kat:hover{background:#f3f6f8}.f-list .f-kat.on{background:#eef7f7;border-color:#cfe6e6}
.f-kat .sw{width:10px;height:10px;border-radius:3px;flex:none}.f-kat .nm{flex:1;font-size:13px;line-height:1.2}.f-kat .ct{font-size:11px;color:var(--vv-mute);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{border:1px solid var(--vv-line);background:#fff;border-radius:20px;padding:3px 10px;font-size:12px;cursor:pointer}
.chip.on{background:var(--vv-primary);border-color:var(--vv-primary);color:#fff}
.seg{display:flex;border:1px solid var(--vv-line);border-radius:8px;overflow:hidden}
.seg button{flex:1;border:0;background:#fff;font-size:12px;padding:5px 0;border-right:1px solid var(--vv-line)}
.seg button:last-child{border-right:0}.seg button.on{background:var(--vv-primary);color:#fff;font-weight:600}
.f-check{display:flex;align-items:center;gap:7px;font-size:13px;padding:3px 0;cursor:pointer}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}

/* ---------- DAFTAR ---------- */
.tabs{display:flex;border-bottom:1px solid var(--vv-line);background:#fff}
.tabs button{flex:1;border:0;background:none;padding:12px 4px;font-size:13px;color:var(--vv-mute);border-bottom:2px solid transparent;font-weight:600}
.tabs button b{display:inline-block;min-width:22px;padding:0 6px;border-radius:10px;background:#eef1f4;color:var(--vv-ink);font-size:11px}
.tabs button.on{color:var(--vv-primary);border-bottom-color:var(--vv-primary)}.tabs button.on b{background:var(--vv-primary);color:#fff}
.list-summary{padding:8px 14px;font-size:12px;color:var(--vv-mute);border-bottom:1px solid var(--vv-line);background:#fff;display:flex;justify-content:space-between}
.card-u{background:#fff;border:1px solid var(--vv-line);border-radius:10px;margin:10px 12px;padding:11px 12px;cursor:pointer;position:relative;transition:.12s}
.card-u:hover{border-color:#b9d6d6;box-shadow:0 2px 8px rgba(15,110,110,.08)}
.card-u.on{border-color:var(--vv-primary);box-shadow:0 0 0 2px rgba(15,110,110,.18)}
.card-u .kode{font-size:11px;color:var(--vv-mute)}
.card-u .jdl{font-weight:600;line-height:1.3;margin:2px 0 4px}
.card-u .meta{font-size:12px;color:var(--vv-mute);display:flex;gap:10px;flex-wrap:wrap}
.card-u .nil{font-weight:700;font-size:14px;text-align:right}
.card-u .nil s{display:block;font-size:11px;font-weight:400;color:var(--vv-mute)}
.card-u .kats{position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;display:flex;flex-direction:column}
.card-u .kats span{flex:1}
.tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px}
.tg{font-size:10.5px;border-radius:4px;padding:1px 6px;font-weight:600;white-space:nowrap}
.tg-over{background:#fde8e8;color:#b42318}.tg-nossh{background:#fff4d6;color:#8a6100}.tg-nospek{background:#eceff3;color:#4b5563}
.tg-modal{background:#e6efff;color:#1d4ed8}.tg-besar{background:#e0f5fa;color:#0e7490}.tg-gab{background:#2b3440;color:#fff}
.tg-bosda{background:#f3e8ff;color:#7e22ce}.tg-bosp{background:#e8f3f3;color:#0f6e6e}
.tg-tinggi{background:#fee2e2;color:#b91c1c}.tg-pra{background:#fff1e6;color:#c2410c}
.st{font-size:11px;font-weight:700;border-radius:20px;padding:2px 8px}
.st-pra_verifikasi,.st-diajukan{background:#fff4d6;color:#8a6100}.st-diverifikasi{background:#dcf5e8;color:#16794a}
.st-disetujui,.st-ditetapkan{background:#d9f0ff;color:#0b5c99}.st-revisi{background:#ffe9d6;color:#b54708}.st-ditolak{background:#fde8e8;color:#b42318}
.empty{padding:40px 20px;text-align:center;color:var(--vv-mute)}
.empty.big{margin:auto;max-width:520px}.empty.big i{font-size:46px;color:#b8c7c7}.empty.big h5{margin-top:12px;color:var(--vv-ink)}

/* ---------- DETAIL ---------- */
.d-wrap{padding:18px 22px 110px}
.d-head{background:#fff;border:1px solid var(--vv-line);border-radius:12px;padding:16px 18px}
.d-head h4{font-weight:700;margin:2px 0 6px;color:var(--vv-ink)}
.d-head .info{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:var(--vv-mute)}.d-head .info b{color:var(--vv-ink);font-weight:600}
.justif{background:#f7f9fb;border-radius:8px;padding:8px 10px;margin-top:10px;font-size:13px;white-space:pre-line}
.alur{display:flex;align-items:center;gap:0;margin-top:14px;overflow-x:auto;padding-bottom:2px}
.step{display:flex;align-items:center;gap:8px;white-space:nowrap}
.step .ic{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;flex:none}
.step .tx{font-size:11px;line-height:1.2}.step .tx b{display:block;font-size:12px}
.step .ln{width:28px;height:2px;background:var(--vv-line);margin:0 8px}
.s-selesai .ic{background:#dcf5e8;color:#16794a}.s-menunggu .ic{background:#fff4d6;color:#8a6100}
.s-dilewati .ic{background:#e8f3f3;color:var(--vv-primary);border:1px dashed var(--vv-primary)}
.s-nanti .ic{background:#eef1f4;color:#9aa5b1}.s-aktif .ic{background:var(--vv-primary);color:#fff}
.alur-note{font-size:12px;color:var(--vv-primary);background:#eef7f7;border-radius:8px;padding:6px 10px;margin-top:10px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}
.kpi{background:#fff;border:1px solid var(--vv-line);border-radius:10px;padding:10px 12px}
.kpi .l{font-size:11px;color:var(--vv-mute);font-weight:600;text-transform:uppercase;letter-spacing:.03em}.kpi .v{font-size:18px;font-weight:700}
@media(max-width:991px){.kpis{grid-template-columns:repeat(2,1fr)}}
.juk{border-radius:8px;padding:7px 10px;font-size:12.5px;margin-top:8px}
.juk-larangan{background:#fde8e8;color:#8f1d14}.juk-peringatan{background:#fff4d6;color:#7a5600}.juk-info{background:#e6efff;color:#1d3f8a}

.tbl-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.tbl-tools .seg{flex:none}.tbl-tools .seg button{padding:5px 12px;white-space:nowrap}
.tbl{background:#fff;border:1px solid var(--vv-line);border-radius:12px;overflow:hidden}
.tbl table{margin:0;font-size:13px}
.tbl th{background:#f7f9fb;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--vv-mute);font-weight:700;white-space:nowrap;border-bottom:1px solid var(--vv-line)!important;position:sticky;top:0}
.tbl td{vertical-align:top;border-color:#eef1f4}
.tbl tr.kat-row td{background:#fafbfc;font-size:12px;font-weight:700;padding:6px 12px}
.tbl tr.lain td{opacity:.55}
.tbl tr.dec-setuju{background:#f3fbf6}.tbl tr.dec-tolak{background:#fff6f6}.tbl tr.dec-ubah{background:#fffaf0}
.it-nm{font-weight:600}.it-sp{font-size:12px;color:var(--vv-mute)}
.it-sp.kosong{color:#b42318;font-style:italic}
.it-rk{font-size:11px;color:#94a0ad}
.d-up{color:var(--vv-red);font-weight:700}.d-ok{color:var(--vv-green);font-weight:600}
.dec{display:flex;gap:4px}
.dec button{border:1px solid var(--vv-line);background:#fff;border-radius:7px;width:34px;height:30px;padding:0;font-size:15px;color:#7a8794}
.dec button.b-setuju.on{background:var(--vv-green);border-color:var(--vv-green);color:#fff}
.dec button.b-ubah.on{background:var(--vv-amber);border-color:var(--vv-amber);color:#fff}
.dec button.b-tolak.on{background:var(--vv-red);border-color:var(--vv-red);color:#fff}
.dec-extra{margin-top:6px;display:grid;grid-template-columns:70px 1fr;gap:4px;min-width:210px}
.dec-extra input{font-size:12px;padding:3px 6px}
.dec-extra .cat{grid-column:1/-1}
.done-badge{font-size:11.5px}
.links a{font-size:11px;color:var(--vv-mute);text-decoration:none;margin-right:8px}.links a:hover{color:var(--vv-primary)}

.footer-bar{position:sticky;bottom:0;margin-top:auto;background:#fff;border-top:1px solid var(--vv-line);padding:10px 22px;display:flex;align-items:center;gap:18px;box-shadow:0 -4px 16px rgba(0,0,0,.04);z-index:5}
.footer-bar .fb-num{font-size:12px;color:var(--vv-mute)}.footer-bar .fb-num b{display:block;font-size:16px;color:var(--vv-ink)}
.footer-bar .prog{flex:1;min-width:120px}
.progress{height:7px}
.riwayat{background:#fff;border:1px solid var(--vv-line);border-radius:12px;padding:12px 16px;margin-top:14px}
.rw{display:flex;gap:10px;padding:6px 0;border-bottom:1px dashed #edf0f3;font-size:12.5px}.rw:last-child{border:0}
.rw .t{color:var(--vv-mute);white-space:nowrap;font-size:11.5px;width:120px;flex:none}
.quick-notes button{font-size:11.5px;margin:2px}
.back-mobile{display:none}@media(max-width:767px){.back-mobile{display:inline-block}}