:root{--teks:#111;--latar:#f4f4f2;--kartu:#fff;--garis:#c9c9c4;--redup:#555;--merah:#a40019;--merah-latar:#ffe3e3;
--oranye:#8a4b00;--oranye-latar:#fff0d6;--hijau:#0f6b2f;--hijau-latar:#e2f4e7;--biru:#0b4f8a;--biru-latar:#e4efff}
*{box-sizing:border-box}html{font-size:clamp(15px,0.55vw + 9px,24px)}
body{margin:0;background:var(--latar);color:var(--teks);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.35;overflow-x:hidden}
button,input{font:inherit}button{cursor:pointer}:focus-visible{outline:3px solid var(--biru);outline-offset:2px}
.atas{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center;justify-content:space-between;padding:.45rem 1rem;background:#1d1d1b;color:#fff}
.atas h1{font-size:1.25rem;margin:0}.env{font-size:.7rem;background:#fff;color:#1d1d1b;border-radius:.25rem;padding:.05rem .35rem;vertical-align:middle}
.waktu{margin:.1rem 0 0;font-size:.85rem;color:#ddd}
.status{font-weight:800;padding:.35rem .8rem;border-radius:.4rem;border:2px solid transparent}
.status.NORMAL{background:var(--hijau);color:#fff}.status.BASI,.status.TERPUTUS,.status.KONEKSI_GRUP_PUTUS{background:var(--merah);color:#fff;border-color:#fff}
.kecil{font-size:.85rem;padding:.3rem .7rem;border:1px solid #888;background:#333;color:#fff;border-radius:.3rem}
.banner{padding:.6rem 1rem;background:var(--merah);color:#fff;font-weight:800;font-size:1.15rem}.banner[hidden]{display:none}
body.redup .tata,body.redup .total{opacity:.4;filter:grayscale(1)}
.perhatian{padding:.45rem 1rem 0}.perhatian ul{margin:0;padding:0;list-style:none;display:grid;gap:.25rem;
grid-template-columns:repeat(auto-fit,minmax(min(100%,30rem),1fr))}
.perhatian li{background:var(--merah-latar);border-left:.4rem solid var(--merah);padding:.25rem .55rem;font-weight:700;font-size:.92rem;overflow-wrap:anywhere}
.perhatian li.Info{background:var(--biru-latar);border-left-color:var(--biru);font-weight:600}
.lagi{margin-top:.25rem;background:none;border:none;color:var(--biru);text-decoration:underline;padding:0}
.tab{display:flex;flex-wrap:wrap;gap:.4rem;padding:.5rem 1rem 0}
.tab button,.filter button{border:2px solid var(--garis);background:var(--kartu);color:var(--teks);border-radius:.4rem;padding:.3rem .7rem;font-weight:600}
.tab button[aria-pressed=true],.filter button[aria-pressed=true]{background:#1d1d1b;color:#fff;border-color:#1d1d1b}
.filter button.tindakan[aria-pressed=false]{border-color:var(--merah);color:var(--merah)}
.total{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:.4rem;padding:.4rem 1rem}
.total .ubin{background:var(--kartu);border:2px solid var(--garis);border-radius:.5rem;padding:.25rem .55rem;min-width:0}
.total .kepala{display:flex;align-items:baseline;gap:.45rem;min-width:0}
.total .qty{font-size:1.9rem;font-weight:900;line-height:1.05;flex:none}.total .nama{font-weight:700;overflow-wrap:break-word;font-size:.9rem;line-height:1.2;min-width:0}
.total .sub{font-size:.75rem;color:var(--merah);font-weight:700}.total .bersih{font-size:.75rem;color:var(--hijau);font-weight:700}
.total .perlu{font-size:.75rem;color:var(--oranye);font-weight:700}
.total .peta{color:var(--biru);font-weight:600}
.total .label{grid-column:1/-1;margin:0;font-size:.85rem;color:var(--redup)}
.tata{display:grid;grid-template-columns:minmax(13rem,17rem) minmax(0,1fr);gap:.7rem;padding:0 1rem 1rem;align-items:start}
.rail{position:sticky;top:.4rem;max-height:calc(100vh - .8rem);display:flex;flex-direction:column;gap:.35rem;background:var(--kartu);
border:2px solid var(--garis);border-radius:.55rem;padding:.5rem;min-width:0}
.label-cari{font-weight:700;font-size:.85rem}#cari{width:100%;padding:.35rem .5rem;border:2px solid var(--garis);border-radius:.35rem}
.semua{border:2px solid #1d1d1b;background:var(--kartu);border-radius:.4rem;padding:.4rem;font-weight:800;text-align:left}
.semua[aria-current=true]{background:#1d1d1b;color:#fff}
.daftar-outlet{list-style:none;margin:0;padding:0;overflow-y:auto;min-height:6rem;display:grid;gap:.25rem;align-content:start}
.daftar-outlet button{width:100%;text-align:left;border:2px solid var(--garis);background:#fafaf8;border-radius:.4rem;padding:.3rem .45rem;
display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 .4rem}
.daftar-outlet button[aria-current=true]{background:#1d1d1b;color:#fff;border-color:#1d1d1b}
.daftar-outlet .kode{font-weight:800;overflow-wrap:anywhere}.daftar-outlet .jumlah{font-weight:800}
.daftar-outlet .info{grid-column:1/-1;font-size:.78rem}
.daftar-outlet .KOSONG{border-style:dashed;color:var(--redup);background:#f4f4f2}
.daftar-outlet .TAHAN{border-color:var(--merah);border-left-width:.45rem}.daftar-outlet .TINDAKAN{border-color:var(--oranye);border-left-width:.45rem}
.catatan-rail{margin:0;font-size:.75rem;color:var(--redup)}
.panel{min-width:0}.kontrol{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center;justify-content:space-between}
.kontrol h2{margin:.2rem 0;font-size:1.25rem;overflow-wrap:anywhere}.filter{display:flex;flex-wrap:wrap;gap:.35rem}
.ringkas{margin:.2rem 0 .4rem;color:var(--redup);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:.55rem;align-items:start}
.grid.satu{grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr))}
.kartu{background:var(--kartu);border:2px solid var(--garis);border-radius:.55rem;min-width:0;overflow:hidden}
.kartu.TINDAKAN{border-color:var(--oranye)}.kartu.TAHAN{border-color:var(--merah);border-width:3px}
.kartu header{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.3rem .55rem;background:#ececea}
.kartu.TAHAN header{background:var(--merah-latar)}.kartu.TINDAKAN header{background:var(--oranye-latar)}
.kartu h3{margin:0;font-size:1.05rem;overflow-wrap:anywhere}.buka{border:1px solid var(--biru);color:var(--biru);background:#fff;border-radius:.3rem;font-size:.78rem;padding:.1rem .45rem;white-space:nowrap}
.kartu ol{list-style:none;margin:0;padding:0}
.order{padding:.4rem .55rem;border-top:1px solid #e1e1dd}.order.TAHAN{background:var(--merah-latar)}.order.TINDAKAN{background:var(--oranye-latar)}
.grid.satu .order{font-size:1.08rem}
.baris{display:flex;flex-wrap:wrap;gap:.2rem .6rem;align-items:baseline}
.jam{font-size:1.25rem;font-weight:900;min-width:3.2rem}.oid{font-size:.8rem;color:var(--redup);overflow-wrap:anywhere}
.item{display:flex;flex-wrap:wrap;gap:.3rem;margin:.25rem 0}
.chip{background:#f1f1ee;border:1px solid var(--garis);border-radius:.3rem;padding:.05rem .4rem;font-weight:700;overflow-wrap:anywhere;min-width:0}
.chip b{font-size:1.15rem}
.lencana{display:flex;flex-wrap:wrap;gap:.25rem}
.badge{font-size:.75rem;font-weight:800;border-radius:.25rem;padding:.08rem .35rem;border:1px solid currentColor}
.badge.ok{color:var(--hijau);background:var(--hijau-latar)}.badge.netral{color:var(--redup);background:#f1f1ee}
.badge.awas{color:var(--oranye);background:var(--oranye-latar)}.badge.bahaya{color:#fff;background:var(--merah);border-color:var(--merah)}
.tanda{margin:.2rem 0 0;color:var(--merah);font-weight:800;font-size:.9rem}.catatan{margin:.2rem 0 0;font-size:.85rem;font-style:italic;overflow-wrap:anywhere}
.kosong{grid-column:1/-1;padding:1rem;background:var(--kartu);border:2px dashed var(--garis);border-radius:.5rem;font-weight:700}
.kosong button{margin-left:.5rem}
.sumber{padding:.4rem 1rem 1.5rem;color:var(--redup);font-size:.85rem}
@media (max-width:900px){.tata{grid-template-columns:minmax(0,1fr)}.rail{position:static;max-height:42vh}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.masuk main{max-width:24rem;margin:4rem auto;display:grid;gap:.6rem;padding:0 1rem}.galat{color:var(--merah)}.masuk input,.masuk button{font-size:1.1rem;padding:.4rem}