/* ⛔ TOKEN TEMA PINDAH KE `public/css/tema.css` (keputusan CEO 8 Nov 2026).
   Dulu TIGA blok di sini — `:root` terang, media gelap, dan `[data-theme="dark"]` —
   menuliskan palet yang SAMA tiga kali; mengubah satu berarti lupa dua, dan itulah
   yang membuat tema tidak bisa ditukar. Sekarang nilainya satu rumah, dan sebuah
   tema baru cukup memetakan ulang PERAN ke PALET.
   ⚠ Berkas ini tetap memanggil `var(--brand)` dkk apa adanya; yang hilang hanya
   DEFINISINYA. Dokumentasinya `docs/TEMA.md`. */
*{box-sizing:border-box;margin:0;padding:0}
/* atribut hidden selalu menang atas aturan display berbasis kelas */
[hidden]{display:none !important}
html{font-size:15px}
body{background:var(--bg);color:var(--text);font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.55}
.mono{font-family:"IBM Plex Mono","Consolas",monospace}
a{color:var(--brand-text)}
button{font:inherit;cursor:pointer}

.demo-banner{background:var(--brand);color:#fff;padding:.5rem 1rem;font-size:.8rem;text-align:center;letter-spacing:.02em}
.demo-banner strong{font-weight:700}

.shell{display:flex;min-height:100vh}
/* Sidebar MENEMPEL & bergulir sendiri. Cacat yang melahirkannya (temuan CEO 28 Agu:
   "dimana fitur scan transfer stok oleh doni?"): setelah Gudang & Operasional dipecah
   per fitur, sidebar tumbuh 1.016px — lebih tinggi dari jendela 720px. Butir bawahnya
   TIDAK TERLIHAT sampai halaman digulir, dan begitu digulir sidebar ikut hanyut ke
   atas. Fitur yang ada jadi tidak bisa ditemukan — sama saja dengan tidak ada.
   Dijaga kelas K31 (gaya terhitung + jangkauan nyata tiap butir). */
.sidebar{width:232px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);padding:1.1rem .8rem;display:flex;flex-direction:column;gap:.2rem;
  position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto;overscroll-behavior:contain}
.logo{display:flex;align-items:center;gap:.6rem;padding:.3rem .5rem 1rem;border-bottom:1px solid var(--border);margin-bottom:.7rem}
.logo-mark{width:34px;height:34px;border-radius:8px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;letter-spacing:.02em}
.logo-name{font-weight:800;font-size:.95rem;line-height:1.15}
.logo-sub{font-size:.68rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.nav-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:.7rem .5rem .25rem}
.nav-item{display:flex;align-items:center;gap:.55rem;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:.5rem .6rem;color:var(--text);font-weight:500;font-size:.86rem}
.nav-item:hover{background:var(--surface-2)}
.nav-item.active{background:var(--brand-soft);color:var(--brand-text);font-weight:700}
/* Ikon navigasi: SATU keluarga glif monokrom, dipusatkan optis, lebar seragam.
   Cacat sebelumnya: 🧮 (emoji berwarna, glif 17,7px) bercampur simbol monokrom
   (10,9–12,9px) — kotaknya sama tetapi glifnya beda ukuran, sehingga terlihat
   tidak selaras (teguran CEO). `font-variant-emoji:text` menahan mesin render
   menaikkan simbol menjadi emoji berwarna. */
.nav-item .ic,.bnav-item .ic,.tbtn.ikon{
  font-variant-emoji:text;
  font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2",system-ui,sans-serif;
}
.nav-item .ic{width:1.35rem;flex:0 0 1.35rem;display:inline-flex;align-items:center;
  justify-content:center;font-size:1rem;line-height:1;opacity:.85}
.nav-item.dis{opacity:.42;cursor:not-allowed}
.lencana{margin-left:auto;background:var(--bad);color:#fff;border-radius:999px;font-size:.68rem;font-weight:800;padding:.05rem .42rem;min-width:1.3rem;text-align:center}
[data-visual="b"] .lencana{background:#E0705E;color:#2A0A05}
.bnav-item .lencana{position:absolute;top:.1rem;right:22%;margin:0}
.bnav-item{position:relative}
.nav-foot{margin-top:auto;font-size:.7rem;color:var(--muted);padding:.6rem .5rem;border-top:1px solid var(--border)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:1rem;padding:.7rem 1.4rem;background:var(--surface);border-bottom:1px solid var(--border)}
.crumb{font-size:.82rem;color:var(--muted)}
.crumb b{color:var(--text);font-weight:600}
.search{margin-left:auto;display:flex;align-items:center;gap:.5rem;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:.4rem .7rem;font-size:.82rem;color:var(--muted);min-width:230px}
.tbtn{border:1px solid var(--border);background:var(--surface);border-radius:8px;padding:.4rem .65rem;font-size:.82rem;color:var(--text)}
.tbtn:hover{border-color:var(--border-strong)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700}

.content{padding:1.4rem;display:flex;flex-direction:column;gap:1.1rem;max-width:1180px;width:100%}
.screen{display:none}
.screen.on{display:flex;flex-direction:column;gap:1.1rem}

.page-head{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap}
/* blok judul WAJIB boleh menyusut: `min-width:auto` bawaan flex membuat sub-judul
   panjang menahan lebar, sehingga kepala layar melebihi layarnya begitu tombol
   tetangga ditambahkan (ditangkap penjaga lebar 1024 saat audit lintas modul) */
.page-head > div:first-child{min-width:0;flex:1 1 240px}
.page-head h1{font-size:1.35rem;font-weight:800;letter-spacing:-.01em;text-wrap:balance}
.page-head .sub{color:var(--muted);font-size:.85rem;margin-top:.15rem}
.head-actions{margin-left:auto;display:flex;gap:.5rem;flex-wrap:wrap}

.btn{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;padding:.5rem .85rem;font-size:.83rem;font-weight:600}
.btn:hover{border-color:var(--border-strong)}
.btn.pri{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.pri:hover{background:var(--brand-strong);border-color:var(--brand-strong)}
.btn.sm{padding:.28rem .6rem;font-size:.76rem;border-radius:6px}

.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
.card-h{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border-bottom:1px solid var(--border);flex-wrap:wrap}
.card-h h2{font-size:.92rem;font-weight:700}
.card-h .hint{font-size:.74rem;color:var(--muted)}
.card-b{padding:1rem}
.card-b.tight{padding:0}

.chip{display:inline-flex;align-items:center;gap:.3rem;border-radius:999px;padding:.13rem .6rem;font-size:.72rem;font-weight:600;border:1px solid transparent}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.bad{background:var(--bad-soft);color:var(--bad)}
.chip.info{background:var(--brand-soft);color:var(--brand-text)}
.chip.line{border-color:var(--border);color:var(--muted);background:transparent}
.sku{font-family:"IBM Plex Mono",monospace;font-size:.78rem;background:var(--chip-mono-bg);border:1px solid var(--border);border-radius:6px;padding:.1rem .4rem;white-space:nowrap}

.src{display:inline-flex;align-items:center;gap:.3rem;font-size:.68rem;color:var(--muted);border:1px dashed var(--border-strong);border-radius:6px;padding:.08rem .45rem}

table{width:100%;border-collapse:collapse;font-size:.84rem}
th{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--border);background:var(--surface-2)}
td{padding:.6rem .8rem;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr.rowlink{cursor:pointer}
tr.rowlink:hover td{background:var(--surface-2)}
.tblwrap{overflow-x:auto;min-width:0;max-width:100%}
.stepper{min-width:0;max-width:100%}
.card{min-width:0}

.filters{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.filters .f{border:1px solid var(--border);background:var(--surface);border-radius:8px;padding:.4rem .7rem;font-size:.8rem;color:var(--muted)}
.filters .f b{color:var(--text);font-weight:600}
.f.dd{cursor:pointer;position:relative;user-select:none}
.f.dd:hover{border-color:var(--border-strong)}
/* filter yang sedang membatasi daftar — dibedakan dari keadaan default */
.f.aktif{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-text)}
.f.aktif b{color:var(--brand-text)}
.fclear{border:1px solid var(--border);background:var(--surface);border-radius:8px;padding:.35rem .6rem;font-size:.76rem;color:var(--muted)}
.fclear:hover{border-color:var(--border-strong);color:var(--text)}
.ddmenu,.pmenu{position:absolute;top:calc(100% + 4px);left:0;z-index:80;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow);min-width:160px;padding:.25rem;display:flex;flex-direction:column}
.ddmenu button,.pmenu button{background:none;border:0;text-align:left;padding:.38rem .6rem;border-radius:6px;font-size:.8rem;color:var(--text)}
.ddmenu button:hover,.pmenu button:hover{background:var(--surface-2)}
.ddmenu button.on,.pmenu button.on{background:var(--brand-soft);color:var(--brand-text);font-weight:700}
.f.search{cursor:text;min-width:200px;display:inline-flex;gap:.35rem;align-items:center}
.f.search .q{outline:none;min-width:110px;color:var(--text)}
.f.search .q:empty::before{content:attr(data-ph);color:var(--muted)}

.tabs{display:flex;gap:.15rem;border-bottom:1px solid var(--border);flex-wrap:wrap}
.tab{border:0;background:none;padding:.55rem .9rem;font-size:.85rem;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--text)}
.tab.on{color:var(--brand-text);border-bottom-color:var(--brand)}
.tab .cnt{font-size:.7rem;background:var(--surface-2);border-radius:999px;padding:.05rem .45rem;margin-left:.3rem;color:var(--muted)}
.tab.on .cnt{background:var(--brand-soft);color:var(--brand-text)}
.tabpane{display:none}
.tabpane.on{display:flex;flex-direction:column;gap:1.1rem;min-width:0}
/* anak flex bawaannya `min-width:auto` — pembungkus tabel (.tblwrap) jadi TIDAK BISA
   menyusut, sehingga tabel lebar mendorong seluruh layar melebihi jendela (terlihat
   di 1024px saat audit lintas modul; gulir dua sumbu yang ADR-032 larang) */
.tabpane.on > *{min-width:0}
.stagelist{display:flex;flex-direction:column;gap:1.1rem}
th.isian{background:var(--brand-soft);color:var(--brand-text)}
th .hth{font-size:.62rem;font-weight:500;letter-spacing:0;text-transform:none;opacity:.85;margin-top:.1rem}
td .cellinp.simharga,td .cellinp.simtarget{min-width:92px;text-align:right;background:var(--brand-soft);border-color:var(--brand)}
/* baris cari: kotak & keterangan tidak saling menindih; saran melayang di bawah kotak */
.caribar{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.caribar .skusearch{position:relative;flex:0 1 320px;min-width:220px}
.caribar .f.search{width:100%}
/* Tabel di layar sempit: tiap baris jadi kartu berlabel (D-113).
   Pola ini lahir di #tblSim (satu-satunya pemakainya sampai 9 Sep); sapuan D-113
   menemukan 19 layar lain memaksa gulir dua sumbu pada tabel yang sama bentuknya —
   obatnya SUDAH ADA tetapi tidak dipakai (kelas ADR-042). Kini pola yang sama
   berlaku untuk tiap tabel ENTITAS bertanda .tkartu; labelnya diturunkan dari
   thead oleh pasangLabelKartu(), bukan diketik per sel. Tabel MATRIKS/pembanding
   (harga grosir T1–T5, matriks izin, langkah perhitungan) sengaja TIDAK ditandai:
   maknanya justru perbandingan antar kolom, gulir + kolom beku lebih jujur. */
@media(max-width:900px){
  #tblSim thead,table.tkartu thead{display:none}
  #tblSim,#tblSim tbody,#tblSim tr,#tblSim td,
  table.tkartu,table.tkartu tbody,table.tkartu tr,table.tkartu td{display:block;width:auto}
  #tblSim tr,table.tkartu tr{border:1px solid var(--border);border-radius:10px;margin:.5rem;padding:.35rem .1rem;background:var(--surface)}
  #tblSim tr.terpilih{border-color:var(--brand)}
  #tblSim td,table.tkartu td{display:flex;justify-content:space-between;align-items:center;gap:.8rem;border:0;padding:.32rem .8rem;text-align:right}
  #tblSim td::before,table.tkartu td::before{content:attr(data-l);font-size:.72rem;color:var(--muted);text-align:left;flex:0 0 auto}
  #tblSim td[data-l="SKU"],table.tkartu td:first-child{flex-direction:column;align-items:flex-start;text-align:left}
  #tblSim td[data-l="SKU"]::before,table.tkartu td:first-child::before{margin-bottom:.1rem}
  #tblSim .cellinp{min-width:110px}
  /* kolom aksi/kosong tidak menggambar label kosong */
  table.tkartu td:not([data-l])::before,table.tkartu td[data-l=""]::before{content:none}
  /* baris kaki ber-colspan (+ Tambah baris, Muat berikutnya) tampil polos, bukan kartu */
  table.tkartu td[colspan]{display:block;text-align:left}
  /* pembekuan kolom pertama tidak bermakna dalam wujud kartu */
  .tblwrap table.tkartu th:first-child,.tblwrap table.tkartu td:first-child{position:static;box-shadow:none;background:transparent}
}
/* ===== BARIS RINGKAS (D-113 tahap 2 — layar contoh Penggajian & Barang Masuk) =====
   Di layar sempit tabel entitas TIDAK diputar 90° jadi kartu label:nilai (pola tkartu
   di atas — tiap baris melar setinggi jumlah kolomnya), melainkan DIGANTI daftar yang
   dirancang per layar: identitas + angka pengambil keputusan + chip keadaan; rincian
   selebihnya satu ketukan (detail/slip). Digambar mesin yang sama dengan tabelnya. */
.lring{display:none}
@media(max-width:900px){
  .meja-lebar{display:none!important}
  .lring{display:flex;flex-direction:column;gap:.55rem}
}
.bring{border:1px solid var(--border);border-radius:12px;padding:.6rem .75rem;background:var(--surface);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.35rem}
.bring[data-slip],.bring[data-detmasuk]{cursor:pointer}
.bring .b1{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;min-height:24px}
.bring .b1 .nilai{font-weight:800;font-size:1.02rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.bring .b2{display:flex;flex-wrap:wrap;gap:.25rem .45rem;align-items:center}
.bring .baksi{display:flex;gap:.5rem;margin-top:.15rem}
.bring .baksi .btn{flex:1;justify-content:center;min-height:40px}
.bring.redup{opacity:.72}
.lring .lkosong{border:1px dashed var(--border);border-radius:12px;padding:.9rem;text-align:center;color:var(--muted)}
/* ===== TABEL RINGKAS BERPERAN (.tring — D-113 batch 3, ADR-143) =====
   Baris tabel entitas TETAP baris tabel yang sama (filter/urut/mesin tak tersentuh),
   tetapi tiap sel diberi PERAN per layar (pasangPeran): c-id identitas · c-num angka
   keputusan (berlabel kecil dari thead) · c-num2 angka kedua · c-sub keterangan ·
   c-chip keadaan · c-hide disimpan untuk lebar penuh. Di ≤900px CSS menyusunnya jadi
   kartu RANCANGAN — bukan tabel diputar 90° (pelajaran tkartu, penilaian CEO 9 Sep). */
@media(max-width:900px){
  table.tring thead{display:none}
  table.tring,table.tring tbody{display:block;width:auto}
  table.tring tr{display:grid;grid-template-columns:minmax(0,1fr) fit-content(58%);gap:.05rem .7rem;
    border:1px solid var(--border);border-radius:12px;margin:.5rem;padding:.55rem .75rem;
    background:var(--surface);box-shadow:var(--shadow)}
  table.tring td{display:block;border:0;padding:0;grid-column:1/-1;text-align:left}
  table.tring td.c-id{grid-column:1;grid-row:1;font-weight:700}
  table.tring td.c-num{grid-column:2;grid-row:1;text-align:right;font-weight:800;font-size:1.02rem;font-variant-numeric:tabular-nums}
  table.tring td.c-num2{grid-column:2;grid-row:2;text-align:right;font-variant-numeric:tabular-nums}
  table.tring td.c-num::before,table.tring td.c-num2::before{content:attr(data-l);display:block;font-weight:400;font-size:.68rem;color:var(--muted)}
  /* kode gabungan panjang (mis. "KT-SHP-016+BATERAI-A3") adalah satu kata tanpa spasi:
     tanpa izin memutus, ia meluap kotaknya dan huruf terakhirnya terpotong — ditemukan
     penjaga K65 di 390px, tidak pernah terlihat di lebar penuh */
  table.tring td.c-sub{grid-column:1;font-size:.78rem;color:var(--muted);overflow-wrap:anywhere}
  /* chip kode SKU bawaannya `white-space:nowrap`; di dalam kartu sempit ia menolak
     membungkus sehingga kode gabungan meluap dan huruf terakhirnya terpotong */
  table.tring td .sku{white-space:normal;overflow-wrap:anywhere}
  table.tring td.c-chip{display:flex;gap:.3rem .45rem;flex-wrap:wrap;align-items:center;margin-top:.15rem}
  table.tring td.c-hide{display:none}
  table.tring td.c-aksi{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.2rem}
  table.tring td[colspan]{grid-column:1/-1}
  .tblwrap table.tring th:first-child,.tblwrap table.tring td:first-child{position:static;box-shadow:none;background:transparent}
}
/* ubin ringkasan (SEMUA layar — kelas D-113): di ponsel memadat 2×2 supaya
   pekerjaan utama layarnya terlihat tanpa gulir — bukan ubin besar bertumpuk */
@media(max-width:900px){
  .tiles{grid-template-columns:repeat(2,1fr);gap:.5rem}
  .tiles .tile{padding:.5rem .65rem}
  .tiles .tile .n{font-size:1rem}
}
.filters .f.viewbtn{cursor:pointer}
.filters .f.viewbtn.on{border-color:var(--brand);color:var(--brand-text);font-weight:700}

.grid2{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:1.1rem;align-items:start}
@media(max-width:980px){.grid2{grid-template-columns:1fr}}
.kv{display:grid;grid-template-columns:130px 1fr;gap:.35rem .8rem;font-size:.84rem}
.kv dt{color:var(--muted)}
.kv dd{font-weight:500}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.8rem}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.9rem 1rem;box-shadow:var(--shadow)}
.tile .n{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums}
.tile .l{font-size:.76rem;color:var(--muted);margin-top:.1rem}
.tile.warn .n{color:var(--warn)}
.tile.bad .n{color:var(--bad)}
.tile.ok .n{color:var(--ok)}

.stepper{display:flex;gap:0;overflow-x:auto;padding:.2rem 0}
.step{flex:1;min-width:118px;text-align:center;position:relative;padding-top:1.55rem;font-size:.72rem;color:var(--muted)}
.step::before{content:"";position:absolute;top:.55rem;left:0;right:0;height:2px;background:var(--border)}
.step::after{content:"";position:absolute;top:.2rem;left:50%;transform:translateX(-50%);width:.8rem;height:.8rem;border-radius:50%;background:var(--surface);border:2px solid var(--border-strong)}
.step.done{color:var(--text)}
.step.done::before{background:var(--brand)}
.step.done::after{background:var(--brand);border-color:var(--brand)}
.step.cur{color:var(--brand-text);font-weight:700}
.step.cur::after{background:var(--surface);border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.step:first-child::before{left:50%}
.step:last-child::before{right:50%}

.att{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--border);border-radius:8px;padding:.3rem .6rem;font-size:.76rem;background:var(--surface-2)}
.log{list-style:none;font-size:.8rem}
.log li{display:flex;gap:.8rem;padding:.38rem 0;border-bottom:1px dashed var(--border)}
.log li:last-child{border-bottom:0}
.log time{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--muted);white-space:nowrap;padding-top:.1rem}

.note{background:var(--warn-soft);border:1px solid transparent;color:var(--warn);border-radius:8px;padding:.55rem .8rem;font-size:.78rem}
.note.info{background:var(--brand-soft);color:var(--brand-text)}
.note.bad{background:var(--bad-soft);color:var(--bad)}
/* CHIP "✓ Tersimpan" MELAYANG (temuan 11 Sep dengan MEMAKAI di 390px).
   Dulu ia disisipkan tepat di bawah .page-head — yaitu di PUNCAK layar — sementara
   kontrol pemicunya bisa ribuan piksel di bawah. Diukur: mengetuk saklar izin di
   Pengguna & Peran (top 402) menaruh chipnya di top −1860 pada jendela 844; orangnya
   menekan saklar dan TIDAK MELIHAT APA PUN. Kelas ADR-175 (umpan balik mendarat di
   tempat orang tidak menatap), pada permukaan yang belum kebagian obatnya.
   Kenapa MELAYANG dan bukan digulir seperti `tampakkanTuntunan`: chip ini hilang
   sendiri 2,6 detik. Menggulir orang ke puncak berarti ia kehilangan baris yang baru
   diketuknya — di matriks 32 baris itu mahal — lalu pesannya lenyap. Yang hilang
   sendiri DIBAWA KE ORANGNYA; yang menetap & menuntut tindakan (pesan penolakan),
   orangnya yang dibawa ke sana. Bentuknya meminjam kebiasaan .aksibar yang sudah ada
   di aplikasi ini, bukan bentuk baru. */
.note.tersimpan{position:fixed;left:50%;transform:translateX(-50%);bottom:1rem;z-index:96;
  max-width:min(720px,94vw);box-shadow:0 6px 24px rgba(0,0,0,.28);
  border-color:var(--brand);margin:0}
@media(max-width:820px){.note.tersimpan{bottom:4.6rem;width:94vw}}
.fifo{background:var(--brand-soft);border-radius:10px;padding:.8rem 1rem;font-size:.84rem;color:var(--brand-text)}
.fifo b{font-weight:700}
.bar{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;min-width:70px}
.bar i{display:block;height:100%;background:var(--ok)}
.bar.mid i{background:var(--warn)}
/* baris pilih-cepat di kepala daftar usulan */
.pilihbar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding:.5rem .7rem;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
/* baris aksi MELAYANG — selalu terlihat, tak perlu gulir ke dasar halaman */
.aksibar{position:fixed;left:50%;transform:translateX(-50%);bottom:1rem;z-index:95;
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--brand);border-radius:12px;
  padding:.6rem .9rem;box-shadow:0 6px 24px rgba(0,0,0,.28);max-width:min(720px,94vw)}
.aksibar[hidden]{display:none}
.aksibar .ab-n{font-size:.9rem;font-weight:700;white-space:nowrap}
.aksibar .ab-d{color:var(--muted);white-space:nowrap}
@media(max-width:820px){.aksibar{bottom:4.6rem;width:94vw;justify-content:space-between}}
/* ===== Kartu keputusan usulan harga ===== */
.kelompok{display:flex;flex-direction:column;gap:.5rem}
.kh{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.84rem;padding:.1rem .2rem}
.ucard{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--border-strong);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.ucard.bad{border-left-color:var(--bad)}
.ucard.warn{border-left-color:var(--warn)}
.uhead{display:grid;grid-template-columns:auto minmax(150px,1.2fr) auto auto auto;gap:.8rem;align-items:center;padding:.75rem .9rem}
.uid .sku{font-size:.82rem}
.uharga{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.uharga .dari{color:var(--muted);text-decoration:line-through;font-size:.82rem}
.uharga .pan{color:var(--muted)}
.uharga .ke{font-size:1.15rem;font-weight:800}
.uharga .del{font-size:.72rem;font-weight:700;border-radius:999px;padding:.05rem .45rem}
.uharga .del.naik{background:var(--ok-soft);color:var(--ok)}
.uharga .del.turun{background:var(--bad-soft);color:var(--bad)}
.udampak{display:flex;flex-direction:column;text-align:right;font-variant-numeric:tabular-nums}
.udampak b{font-size:.92rem}
.uaksi{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
.usebab{padding:0 .9rem .7rem;font-size:.78rem;color:var(--muted);border-bottom:1px solid transparent}
.usebab b{color:var(--text)}
.urinci{padding:.2rem .9rem .9rem;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:.5rem;background:var(--surface-2)}
@media(max-width:820px){
  .uhead{grid-template-columns:auto 1fr;row-gap:.55rem}
  .uharga,.udampak,.uaksi{grid-column:1/-1}
  .udampak{flex-direction:row;gap:.4rem;text-align:left;align-items:baseline}
  .uaksi{justify-content:flex-start}
}
/* ===== Modus fokus kelengkapan data ===== */
.fokus{max-width:620px}
.fokus .fbig{font-size:1.1rem;font-weight:800}
.fokus .frow{display:flex;justify-content:space-between;gap:.6rem;font-size:.8rem}
.fnav{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.fprog{flex:1;min-width:120px}
/* smart search SKU — ketik → saran (dipakai di seluruh aplikasi, ADR-048) */
.skusearch{position:relative;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.sugg{position:absolute;top:calc(100% + 4px);left:0;z-index:90;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);min-width:300px;max-width:min(460px,88vw);max-height:270px;overflow:auto;padding:.25rem}
/* Daftar saran yang lahir DI DALAM wadah bergulir (tabel formulir) sebelumnya terpotong
   oleh wadah itu dan tertimpa tombol di bawahnya — temuan CEO 27 Agu. z-index tidak bisa
   menolong: elemen absolut tetap dipotong oleh ancestor yang overflow-nya bukan visible.
   Maka saat terbuka, panel dilepas dari aliran wadah dan dipasang pada koordinat layar. */
.sugg.lepas{position:fixed;top:auto;left:auto;z-index:120}
.sugg button{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;width:100%;text-align:left;background:none;border:0;padding:.45rem .6rem;border-radius:7px;color:var(--text)}
.sugg button:hover{background:var(--brand-soft)}
.sugg .s1{font-family:"IBM Plex Mono",monospace;font-size:.8rem;font-weight:600}
.sugg .s2{font-size:.74rem;color:var(--muted)}
.sugg .kosong{padding:.5rem .6rem;font-size:.78rem;color:var(--muted)}
.skupick{display:inline-flex;align-items:center;gap:.3rem;border:1px solid var(--border);border-radius:8px;padding:.4rem .7rem;background:var(--surface-2);color:var(--text);font-size:.85rem;cursor:pointer;font-family:"IBM Plex Mono",monospace}
.skupick:hover{border-color:var(--brand);color:var(--brand-text)}
.skupick.kosong{color:var(--muted);font-family:inherit}
tr.simrow.terpilih td{background:var(--brand-soft)}
/* antrean pekerjaan di layar Perlu Tindakan */
/* ANTREAN = DAFTAR TRIASE, BUKAN TUMPUKAN KARTU (koreksi CEO 10 Sep: "kartu sangat
   banyak bertumpuk sampai bawah"). Sesudah antrean lintas modul masuk, jumlahnya
   belasan — kartu setinggi 100px×13 = 1.300px gulir sebelum pekerjaannya kelihatan,
   dan tidak ada yang menonjol karena semuanya sama besar. Rancangannya sekarang:
   BARIS ringkas ±52px (tetap ≥40px sentuh, ADR-032) · angka rata kanan dalam kolom
   tetap sehingga bisa dipindai menurun · MENDESAK dipisah di atas · sisanya
   dikelompokkan per domain lewat urutan. Di lebar penuh barisnya mengalir 2–3 kolom. */
/* min(340px,100%): tanpa itu kolom minimum 340px MEMAKSA layar melebar di 320px —
   ditangkap penjaga lebar saat rancangan ini pertama dijalankan */
.antrean{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:.4rem .8rem;align-items:start}
/* Kolom angka: `minmax(2.6rem,max-content)`, BUKAN 2.6rem mati. Angka empat digit
   berpemisah ribuan ("1.037") butuh 48px sementara 2.6rem hanya 42px — angkanya
   terpotong kotaknya sendiri. Ditemukan penjaga K65, bukan mata. */
.aq{display:grid;grid-template-columns:minmax(2.6rem,max-content) minmax(0,1fr) auto;gap:.1rem .7rem;align-items:center;text-align:left;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--border-strong);border-radius:10px;padding:.5rem .7rem;color:var(--text);min-height:52px}
/* ⛔ ANAK YANG BUKAN BAGIAN BAKU WAJIB MENGAMBIL SATU BARIS PENUH.
   Cacat yang melahirkannya (dilaporkan CEO — "papan tugas teks berantakan"): kartu
   Papan Tugas MEMAKAI KEMBALI komponen .aq, lalu menambah chip status, baris progres,
   dan tombol salin. Ketiganya bukan .aqn/.aql/.aqm/.aqdom sehingga DITEMPATKAN
   OTOMATIS ke kolom 1 dan 3 — tombol terjepit di kolom angka selebar 42px (teksnya
   membungkus jadi pita tiga baris), teks progres yang panjang membengkakkan kolom 3
   sampai kolom judul menyusut jadi NOL. Akar sebenarnya kelalaian saya: ADR-146
   mengubah .aq jadi baris triase berpenempatan EKSPLISIT, dan saya hanya menyapu satu
   pemakainya. Aturan ini membuat komponennya tahan dipakai ulang — bukan menuntut tiap
   pemakainya hafal petak grid-nya (Prinsip 6: koreksi berlaku SEKELAS). */
.aq > *:not(.aqn):not(.aql):not(.aqm):not(.aqdom){grid-column:1/-1}
.aq:hover{border-color:var(--brand);border-left-color:var(--brand);background:var(--surface-2)}
.aq.bad{border-left-color:var(--bad)}
.aq.warn{border-left-color:var(--warn)}
/* penempatan EKSPLISIT — penempatan otomatis menyelipkan kolom domain di antara
   angka dan label (terlihat saat dicoba sendiri di 390px) */
.aq .aqn{grid-column:1;grid-row:1/3;font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;text-align:right}
.aq.bad .aqn{color:var(--bad)}
.aq.warn .aqn{color:var(--warn)}
.aq .aql{grid-column:2;grid-row:1;font-size:.82rem;font-weight:600;line-height:1.25}
/* baris kedua boleh dua baris: sejak kartu menyebut penunggu + umur + alasan, satu
   baris ber-ellipsis memotong justru bagian yang menjelaskan KENAPA ia mendesak */
.aq .aqm{grid-column:2;grid-row:2;font-size:.71rem;color:var(--muted);line-height:1.25;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* dua baris meta dalam satu .aq tidak boleh menumpuk di baris grid yang sama
   (U-39 d · ADR-212 #10) — kartu tugas Profil memakai dua; baris kedua turun */
.aq .aqm ~ .aqm{grid-row:3}
/* .aqdom bukan sekadar label domain — sejak tab dibubarkan (ADR-173) ia SATU-SATUNYA
   penanda bahwa barisnya bisa dibuka. Bentuk lamanya (abu 0,68rem) terbaca sebagai
   kategori, dan CEO kehilangan jejak tabnya: *"pindah ke mana?"*. Kini ia berkotak,
   dan panahnya dipisah jadi elemen sendiri supaya terbaca sebagai ARAH, bukan tanda
   baca yang menempel pada kata. */
.aq .aqdom{grid-column:3;grid-row:1/3;justify-self:end;align-self:center;font-size:.68rem;
  color:var(--muted);white-space:nowrap;display:inline-flex;align-items:center;gap:.3rem;
  border:1px solid var(--border);border-radius:999px;padding:.1rem .25rem .1rem .5rem}
.aq .aqdom .pn{font-size:.9rem;line-height:1;color:var(--brand-text);font-weight:700}
.aq:hover .aqdom{border-color:var(--brand);color:var(--brand-text)}
@media(max-width:900px){.aq .aqdom{padding:.18rem .3rem .18rem .55rem}}
/* kepala bagian triase — memisah MENDESAK dari sisanya tanpa menyembunyikan apa pun */
.aqhead{grid-column:1/-1;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:.5rem .1rem .1rem}
.aqhead:empty{display:none}
.aqringkas{font-size:.8rem;color:var(--muted);margin:-.2rem 0 .5rem}
.aqringkas b{color:var(--text)}
/* petunjuk "ketuk barisnya" — dibedakan dari angka ringkasan supaya terbaca sebagai
   ajakan, bukan bagian dari statistik */
.aqringkas .aqpetunjuk{color:var(--brand-text);font-weight:600}
/* baris kedua kartu memuat DUA fakta yang selama ini tak ada: siapa yang ditunggu,
   dan sudah berapa lama. Keduanya menempel di .aqm supaya tetap satu baris. */
.aq .aqsiapa{font-weight:700;color:var(--text)}
.aq .aqumur{color:var(--warn)}
.aq.bad .aqumur{color:var(--bad)}
/* saringan "menunggu siapa" */
.aqsaring{display:flex;gap:.4rem;flex-wrap:wrap;margin:0 0 .6rem}
/* keadaan KOSONG wajib tetap membuktikan cakupannya — layar kosong tanpa kalimat
   tidak bisa dibedakan dari layar yang rusak (arahan CEO 10 Sep) */
.aqkosong{grid-column:1/-1;order:5;border:1px dashed var(--border);border-radius:10px;
  padding:.9rem;font-size:.8rem;color:var(--muted);text-align:center}
.aqkosong b{color:var(--text)}
/* baris progres kelengkapan — klik untuk mengerjakan jenis data itu */
.prog{display:grid;grid-template-columns:150px minmax(80px,1fr) auto;gap:.7rem;align-items:center;cursor:pointer;padding:.3rem .4rem;border-radius:8px}
.prog:hover{background:var(--surface-2)}
.prog .pl{font-size:.82rem;font-weight:600}
.prog .pn{font-size:.76rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:640px){.prog{grid-template-columns:1fr;gap:.25rem}.prog .pn{white-space:normal}}
/* ADR-054: baris kendali paginasi — bentuknya SAMA di seluruh tabel */
.pgbar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.55rem .9rem;border-top:1px solid var(--border);font-size:.78rem;color:var(--muted)}
.pgbar .pgnum{margin-left:auto;display:flex;align-items:center;gap:.2rem;flex-wrap:wrap;min-width:0;justify-content:flex-end}
.pgbar .pgb{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:6px;min-width:1.9rem;height:1.9rem;padding:0 .4rem;font-size:.76rem;font-weight:600}
.pgbar .pgb:hover:not(:disabled){border-color:var(--border-strong)}
.pgbar .pgb.on{background:var(--brand);border-color:var(--brand);color:#fff}
.pgbar .pgb:disabled{opacity:.4;cursor:not-allowed}
.pgbar .pgell{padding:0 .15rem}
@media(max-width:640px){.pgbar{gap:.4rem}.pgbar .pgnum{margin-left:0;width:100%;justify-content:center}
  .pgbar .pgb{min-width:40px;height:40px}}
/* ADR-055/057: pemilih tema di Pengaturan (menggantikan layar Arah Visual) */
.temagrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.7rem}
.temaopt{display:flex;flex-direction:column;gap:.3rem;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.6rem;color:var(--text)}
.temaopt:hover{border-color:var(--border-strong)}
.temaopt.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}
.temaopt .tnama{font-weight:700;font-size:.84rem}
.temaopt.on .tnama::after{content:" ✓";color:var(--brand-text)}
.temaopt .tket{font-size:.72rem;color:var(--muted);line-height:1.35}
.tprev{display:flex;height:46px;border-radius:7px;overflow:hidden;border:1px solid var(--border)}
.tprev i{width:30%;display:block}.tprev b{flex:1;display:block}
.tp-djg i{background:#01549D}.tp-djg b{background:#F4F7FA}
.tp-cerah i{background:#fff;border-right:1px solid #D9E2EA}.tp-cerah b{background:#F4F7FA}
.tp-kontras i{background:#0B2338}.tp-kontras b{background:#fff}
.tp-rapat i{background:#01549D}.tp-rapat b{background:#EDF2F7;
  background-image:repeating-linear-gradient(#EDF2F7 0 5px,#D9E2EA 5px 6px)}
/* ADR-052 / QA T-07: setiap kode SKU & nomor dokumen adalah TAUTAN ke objeknya */
.lnk{color:var(--brand-text);cursor:pointer;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--brand-text) 40%,transparent)}
.lnk:hover{text-decoration-color:var(--brand-text)}
/* ===== ADR-052: PANEL SUNTING SAMPING — pengganti dialog "Nilai" generik ===== */
.panel-veil{position:fixed;inset:0;background:rgba(10,18,28,.42);z-index:70;display:flex;justify-content:flex-end}
.panel{width:min(460px,100%);background:var(--surface);height:100%;display:flex;flex-direction:column;box-shadow:-8px 0 28px rgba(10,18,28,.18)}
.panel-h{display:flex;align-items:flex-start;gap:.6rem;padding:.9rem 1rem;border-bottom:1px solid var(--border)}
.panel-h h2{font-size:.95rem;font-weight:700;line-height:1.25}
.panel-h .psub{font-size:.72rem;color:var(--muted);margin-top:.1rem}
.panel-body{flex:1;overflow:auto;padding:1rem;display:flex;flex-direction:column;gap:.85rem}
.panel-f{flex:0 0 auto;display:flex;gap:.6rem;padding:.85rem 1rem;border-top:1px solid var(--border);background:var(--surface-2)}
.pfield{display:flex;flex-direction:column;gap:.22rem}
.pfield > .lbl{font-size:.76rem;font-weight:600;display:flex;align-items:baseline;gap:.4rem}
.pfield > .lbl .satuan{font-weight:400;color:var(--muted);font-size:.7rem}
.pfield > .lbl .wajib{color:var(--bad);font-weight:700}
.pfield .bantu{font-size:.7rem;color:var(--muted)}
.pfield .inp{border:1px solid var(--border);border-radius:8px;padding:.42rem .6rem;font-size:.85rem;background:var(--surface);min-height:2.1rem}
.pfield .inp:focus{outline:2px solid var(--brand);outline-offset:-1px}
.pfield.salah .inp{border-color:var(--bad)}
.pfield .galat{font-size:.7rem;color:var(--bad)}
.panel .riwayat{border-top:1px dashed var(--border);padding-top:.7rem;margin-top:.2rem}
.panel .riwayat h3{font-size:.78rem;font-weight:700;margin-bottom:.35rem}
.panel .riwayat li{font-size:.74rem;color:var(--muted);list-style:none;padding:.15rem 0}
@media(max-width:640px){.panel{width:100%}}
/* ADR-032: bidang sentuh ≥40px di lebar mobile — kotaknya boleh tetap kecil,
   yang diperbesar area kliknya (temuan QA T-15: kotak centang 18×15 px) */
@media(max-width:900px){
  /* specificity dinaikkan agar menang atas aturan .cek dasar yang ditulis belakangan */
  body .cek{min-width:40px;width:40px;min-height:40px;height:40px;line-height:40px;font-size:1.25rem}
  body .tab,body .f,body .btn.sm{min-height:40px;display:inline-flex;align-items:center}
  /* KEPALA juga bagian aplikasi: tombolnya wajib ikut aturan sentuh (temuan CEO) */
  body .topbar .tbtn,body .topbar .avatar,body .topbar .ikon{min-width:40px;min-height:40px}
  /* ⛔ ATURAN INI DULU HANYA MENYEBUT `.btn.sm` — TOMBOL YANG PALING TIDAK PENTING.
     Ditemukan 11 Sep dengan MEMAKAI aplikasinya di 390px, bukan oleh asersi: pagar
     sentuh yang ada hanya mengukur TIGA ikon di kepala, sehingga `.btn` polos —
     yakni AKSI UTAMA tiap layar dan tombol Simpan/Batal tiap dialog — luput dan
     tetap 36px selama ini. Sebarannya: 47 dialog (Batal) · 31+17 dialog (Simpan…) ·
     ±22 aksi utama layar. Ironisnya aturan lama melindungi tombol kecil dan
     membiarkan tombol besar. `justify-content` disebut karena `.btn` yang diregangkan
     induknya (mis. `.bring .baksi .btn{flex:1}`) akan rata kiri begitu jadi flex. */
  body .btn{min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  /* Lembar ☰ Menu memakai `.nav-item` — di ponsel ia SATU-SATUNYA daftar seluruh
     modul (sidebar disembunyikan, ADR-014), dan ke-31 butirnya 35px. ADR-104:
     navigasi wajib TERJANGKAU, bukan sekadar ada. */
  body .nav-item,body .bnav-item{min-height:40px}
  /* Sel isian di dalam tabel (simulator harga, baris pembelian) 23px — bidang ketik
     terkecil di seluruh aplikasi, dan justru tempat angka uang diketik. Rata kanannya
     dipertahankan lewat `justify-content`, sebab `text-align` tidak lagi mengaturnya
     setelah kotaknya jadi flex. */
  body .cellinp{min-height:40px;display:inline-flex;align-items:center}
  /* `.inp` — saudara `.cellinp` yang TERLEWAT saat ADR-175 menyapu bidang sentuh.
     Ditemukan 11 Sep dengan mengerjakan pekerjaan Pengaturan di 390×844: panel sunting ✎
     punya tiga isian dan DUA di antaranya 34px — termasuk "Nilai", tempat angka setelan
     diketik. Kenapa pagar K76 diam: `.inp` tidak ada di selektornya, DAN panel itu lahir
     saat ✎ diketuk, jadi menyalakan veil kosong tidak pernah menemukannya (kelas
     `lahirSaatDipakai`, K74 butir 2). Dua lubang sekaligus; keduanya ditutup K78. */
  body .inp,body .pfield .inp{min-height:40px;display:flex;align-items:center}
  body td.num .cellinp,body td .cellinp.simharga,body td .cellinp.simtarget{justify-content:flex-end}
}

/* ===== KEPALA APLIKASI — kontrol nyata & selalu rata kanan ===== */
.topbar-aksi{margin-left:auto;display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.topbar .search{margin-left:0;min-width:230px}
/* Kotak cari berperilaku SAMA di mana pun ia dipakai — kepala aplikasi maupun di dalam
   lapisan pencarian. Dahulu aturan ini terikat `.topbar`, sehingga kotak di dalam
   lapisan tidak punya lebar dan tidak punya teks petunjuk: di ponsel ia tampak sebagai
   ruang kosong yang tak bisa diketik (temuan CEO 26 Agu). */
.search .q{flex:1;min-width:0;outline:none;color:var(--text)}
.search .q:empty::before{content:attr(data-ph);color:var(--muted)}
.search:focus-within{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
.tbtn.ikon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;font-size:.95rem}
#cariMobile{display:none}
.avatar{border:0;font:inherit;font-size:.72rem;font-weight:700;cursor:pointer}
.avatar:hover{filter:brightness(1.12)}
@media(max-width:900px){
  .topbar{gap:.5rem;padding:.6rem .9rem}
  .topbar .search{display:none}
  #cariMobile{display:inline-flex}
  .crumb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* lapisan pencarian (dipakai ikon ⌕ di mobile & Ctrl K di desktop) */
.cariveil{position:fixed;inset:0;background:rgba(10,18,28,.42);z-index:80;display:flex;
  align-items:flex-start;justify-content:center;padding:4rem 1rem}
.carikotak{background:var(--surface);border:1px solid var(--border);border-radius:12px;
  width:min(620px,100%);max-height:70vh;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.carihead{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;border-bottom:1px solid var(--border)}
/* target sentuh kotak cari di lapisan ≥40px pada lebar mobile (ADR-032) */
@media(max-width:900px){.carihead .search{min-height:40px}}
.carilist{overflow:auto;padding:.35rem}
.cariitem{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;background:none;
  border:0;border-radius:8px;padding:.5rem .6rem;color:var(--text);font-size:.85rem}
.cariitem:hover,.cariitem:focus-visible{background:var(--surface-2)}
.cariitem .jns{margin-left:auto;font-size:.68rem;color:var(--muted)}
/* menu akun */
.akunmenu{position:fixed;z-index:85;background:var(--surface);border:1px solid var(--border);
  border-radius:10px;box-shadow:var(--shadow);min-width:230px;padding:.35rem;overflow:hidden}
.akunhead{display:flex;flex-direction:column;padding:.55rem .65rem;border-bottom:1px solid var(--border);margin-bottom:.25rem}
.akunitem{display:block;width:100%;text-align:left;background:none;border:0;border-radius:7px;
  padding:.5rem .65rem;color:var(--text);font-size:.84rem}
.akunitem:hover,.akunitem:focus-visible{background:var(--surface-2)}
@media(max-width:900px){.akunitem{min-height:40px}}
/* ===== TEMA KONTRAS TINGGI (data-visual="d") — untuk cahaya terang / mata lelah.
   Bukan sekadar "gelap": garis lebih tegas, teks lebih pekat, warna status lebih jenuh. */
:root[data-visual="d"]{
  --brand:#003E73; --brand-strong:#00294D; --brand-soft:#D6E6F5; --brand-text:#003E73;
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#EEF2F6; --text:#000000; --muted:#3A4652;
  --border:#8A9AAA; --border-strong:#5A6B7C;
  --ok:#0B5D34; --ok-soft:#D6F0E1; --warn:#6B4200; --warn-soft:#FBEBCC;
  --bad:#8C1E10; --bad-soft:#FADAD4; --shadow:none;
}
@media (prefers-color-scheme: dark){
  :root[data-visual="d"]:not([data-theme="light"]){
    --brand:#7FC0FF; --brand-strong:#A8D6FF; --brand-soft:#062036; --brand-text:#9ACFFF;
    --bg:#000000; --surface:#0A1119; --surface-2:#131D28; --text:#FFFFFF; --muted:#B9C8D6;
    --border:#5A6B7C; --border-strong:#8A9AAA;
    --ok:#57E39A; --ok-soft:#062617; --warn:#FFC24D; --warn-soft:#2B2007;
    --bad:#FF8B76; --bad-soft:#2E0F09; --shadow:none;
  }
}
:root[data-visual="d"][data-theme="dark"]{
  --brand:#7FC0FF; --brand-strong:#A8D6FF; --brand-soft:#062036; --brand-text:#9ACFFF;
  --bg:#000000; --surface:#0A1119; --surface-2:#131D28; --text:#FFFFFF; --muted:#B9C8D6;
  --border:#5A6B7C; --border-strong:#8A9AAA;
  --ok:#57E39A; --ok-soft:#062617; --warn:#FFC24D; --warn-soft:#2B2007;
  --bad:#FF8B76; --bad-soft:#2E0F09; --shadow:none;
}
[data-visual="d"] .card,[data-visual="d"] .btn,[data-visual="d"] .tbtn,
[data-visual="d"] .f,[data-visual="d"] .chip{border-width:2px}
[data-visual="d"] th{border-bottom:2px solid var(--border-strong)}
[data-visual="d"] .sidebar{border-right:2px solid var(--border-strong)}
[data-visual="d"] .topbar{border-bottom:2px solid var(--border-strong)}
[data-visual="d"] .nav-item.active{outline:2px solid var(--brand);outline-offset:-2px}
/* ===== PANDUAN (ADR-164): panel langkah melayang + sorotan kontrolnya =====
   Panel MELAYANG, bukan menyisipkan diri ke dalam layar: panduan tidak boleh
   menggeser tata letak yang sedang ia ajarkan. Sorotan memakai outline + offset,
   bukan mengubah border, supaya ukuran kontrolnya tidak bergeser saat disorot —
   kontrol yang melompat sedikit saat disorot justru membuat orang ragu. */
/* z-index DI ATAS dialog (110): langkah panduan sering justru berada DI DALAM dialog —
   "tekan Lapor terima" membuka dialog, dan panduan yang tenggelam di belakangnya
   berhenti menuntun tepat saat paling dibutuhkan (temuan CEO 10 Sep, di ponsel). */
.bimbing{position:fixed;right:1rem;bottom:1rem;z-index:120;width:min(340px,92vw);
  background:var(--surface);border:1px solid var(--brand);border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.3);padding:.7rem .8rem;display:flex;flex-direction:column;gap:.4rem}
.bimbing[hidden]{display:none}
.bimbing .bh{display:flex;align-items:center;gap:.5rem;font-size:.86rem}
.bimbing .bl{font-size:.72rem;color:var(--muted)}
.bimbing .bt{font-size:.84rem;line-height:1.45}
.bimbing .bs{border-top:1px dashed var(--border);padding-top:.4rem}
.bimbing .ba{display:flex;gap:.5rem;margin-top:.1rem}
.bimbing .ba .btn{flex:1;justify-content:center}
/* z-index diperlukan supaya kontrol yang disorot BERADA DI ATAS peredupannya sendiri;
   tanpa itu elemen yang datang belakangan di DOM ikut terang dan sorotannya kabur.
   ⚠ `!important` BUKAN kemalasan: kolom isian memakai `outline:none` untuk menghapus
   garis fokus bawaan peramban (`.inp[contenteditable]`, `.f.search .q`), dan aturan itu
   ikut membunuh sorotan panduan — kontrol yang PALING sering jadi langkah justru yang
   paling sering tidak tersorot. Terbukti di ponsel: gaya terhitungnya "none 3px". */
.disorot{outline:3px solid var(--brand)!important;outline-offset:3px;border-radius:8px;
  position:relative;z-index:95;box-shadow:0 0 0 9999px rgba(10,18,28,.34)}
.pandukartu{border:1px solid var(--border)}
.pandukartu:hover{border-color:var(--brand)}

.bimbing.atas{bottom:auto;top:1rem}
@media(max-width:820px){.bimbing{right:.5rem;left:.5rem;bottom:4.8rem;width:auto}
  .bimbing.atas{top:.5rem;bottom:auto}}
/* kartu label dus di dialog Cetak Label — kontrol NYATA, satu kartu satu koli */
.lblkartu{font:inherit;color:var(--text);cursor:pointer;border:1px solid var(--border)}
.lblkartu:hover:not(:disabled){border-color:var(--brand)}
.lblkartu.siap{border-color:var(--ok);box-shadow:0 0 0 1px var(--ok) inset}
.lblkartu:disabled{cursor:default;opacity:.62}
/* baris kelompok pada daftar usulan harga */
tr.grup td{background:var(--surface-2);font-size:.8rem}
/* papan status sumber data (Berkas & Sinkron) */
.srcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.8rem}
.srccard{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.85rem .95rem;display:flex;flex-direction:column;gap:.45rem;box-shadow:var(--shadow);border-left:4px solid var(--ok)}
.srccard.perlu{border-left-color:var(--warn)}
.srccard.basi{border-left-color:var(--bad)}
.srccard .sn{font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.srccard .sm{font-size:.76rem;color:var(--muted)}
.srccard .srow{display:flex;justify-content:space-between;gap:.5rem;font-size:.76rem;font-variant-numeric:tabular-nums}
.mut{color:var(--muted)}
.small{font-size:.76rem}
:where(button,a):focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion: no-preference){
  .screen.on{animation:fade .18s ease}
  @keyframes fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
}
/* freeze header + kolom pertama saat tabel discroll (ADR-008) */
.tblwrap{position:relative}
.tblwrap th{position:sticky;top:0;z-index:3}
.tblwrap th:first-child,.tblwrap td:first-child{position:sticky;left:0;z-index:2;background:var(--surface);box-shadow:2px 0 0 var(--border)}
.tblwrap th:first-child{z-index:4;background:var(--surface-2)}
tr.rowlink:hover td:first-child{background:var(--surface-2)}

.prod-photo{width:110px;height:110px;flex-shrink:0;border-radius:12px;border:1px solid var(--border);background:linear-gradient(150deg,var(--brand-soft),var(--surface-2));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;color:var(--brand-text);font-weight:700;font-size:.72rem}
.prod-photo .ph{font-size:2rem;line-height:1}
.photo-hero{aspect-ratio:4/3;border-radius:10px;border:1px solid var(--border);background:linear-gradient(150deg,var(--brand-soft),var(--surface-2));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;color:var(--brand-text);font-weight:700}
.photo-hero .ph{font-size:3rem;line-height:1}
.thumbrow{display:flex;gap:.5rem;margin-top:.6rem}
.thumb{width:56px;height:56px;border-radius:8px;border:2px solid var(--border);background:linear-gradient(150deg,var(--brand-soft),var(--surface-2));display:flex;align-items:center;justify-content:center;font-size:1.2rem;cursor:pointer}
.thumb.on{border-color:var(--brand)}
.mini-thumb{width:34px;height:34px;border-radius:6px;border:1px solid var(--border);background:linear-gradient(150deg,var(--brand-soft),var(--surface-2));display:inline-flex;align-items:center;justify-content:center;font-size:.95rem;vertical-align:middle;margin-right:.45rem}

/* layar kecil (ADR-014): sidebar disembunyikan, navigasi pindah ke BOTTOM BAR */
.bottomnav{display:none}
@media(max-width:820px){
  .sidebar{display:none}
  .bottomnav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--surface);border-top:1px solid var(--border);padding:.3rem .4rem calc(.3rem + env(safe-area-inset-bottom));box-shadow:0 -2px 10px rgba(0,0,0,.08)}
  .bnav-item{flex:1;background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:.12rem;padding:.35rem .2rem;color:var(--muted);font-size:.6rem;font-weight:600;border-radius:8px}
  .bnav-item .ic{font-size:1.15rem;line-height:1;display:flex;align-items:center;justify-content:center;height:1.35rem}
  .bnav-item.active{color:var(--brand-text);background:var(--brand-soft)}
  /* HANYA kotak cari di kepala yang disembunyikan — ikon ⌕ menggantikannya.
     Dahulu selektornya `.search` polos, sehingga kotak ketik DI DALAM lapisan
     pencarian ikut lenyap: di ponsel lapisannya terbuka tanpa tempat mengetik
     apa pun (temuan CEO 26 Agu). */
  .topbar .search{display:none}
  .content{padding:.9rem .9rem 5.5rem}
  .kv{grid-template-columns:105px 1fr}
  .page-head h1{font-size:1.15rem}
  .prod-photo{width:84px;height:84px}
  .btn.sm{padding:.68rem .75rem;font-size:.8rem}
}

/* ===== ARAH VISUAL — Opsi B: Sidebar Biru DJG ===== */
[data-visual="b"] .sidebar{background:linear-gradient(178deg,#01549D 0%,#02365F 115%);border-right:1px solid rgba(255,255,255,.08)}
[data-visual="b"] .logo{border-bottom-color:rgba(255,255,255,.2)}
[data-visual="b"] .logo-mark{background:#fff;color:#01549D}
[data-visual="b"] .logo-name{color:#fff}
[data-visual="b"] .logo-sub{color:#A9C9E6}
[data-visual="b"] .nav-label{color:#8FB4D9}
[data-visual="b"] .nav-item{color:#D9E8F6}
[data-visual="b"] .nav-item:hover{background:rgba(255,255,255,.1)}
[data-visual="b"] .nav-item.active{background:rgba(255,255,255,.17);color:#fff}
[data-visual="b"] .nav-foot{color:#A9C9E6;border-top-color:rgba(255,255,255,.2)}
[data-visual="b"] .bottomnav{background:#01549D;border-top-color:#02365F}
[data-visual="b"] .bnav-item{color:#BFD9EF}
[data-visual="b"] .bnav-item.active{color:#fff;background:rgba(255,255,255,.17)}

/* ===== ARAH VISUAL — Opsi C: Kompak Datar ===== */
:root[data-visual="c"]{font-size:13.5px;--shadow:none}
[data-visual="c"] .card{border-radius:6px}
[data-visual="c"] .btn,[data-visual="c"] .tbtn,[data-visual="c"] .nav-item,[data-visual="c"] .search,[data-visual="c"] .filters .f{border-radius:4px}
[data-visual="c"] .chip,[data-visual="c"] .sku,[data-visual="c"] .att,[data-visual="c"] .src{border-radius:4px}
[data-visual="c"] th,[data-visual="c"] td{padding:.42rem .6rem}
[data-visual="c"] .card-b{padding:.75rem}
[data-visual="c"] .card-b.tight{padding:0}
[data-visual="c"] .card-h{padding:.6rem .75rem}
[data-visual="c"] .content{padding:1rem;gap:.85rem}
[data-visual="c"] .screen.on,[data-visual="c"] .tabpane.on,[data-visual="c"] .stagelist{gap:.85rem}
[data-visual="c"] .tile{border-radius:6px;padding:.7rem .8rem}
[data-visual="c"] .tile .n{font-size:1.3rem}
[data-visual="c"] .prod-photo,[data-visual="c"] .photo-hero,[data-visual="c"] .fifo,[data-visual="c"] .note{border-radius:6px}

/* ===== Pemilih arah visual ===== */
.vopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
.vopt{display:flex;flex-direction:column}
.vopt .spec{height:150px;border-radius:12px 12px 0 0;border-bottom:1px solid var(--border);display:flex;overflow:hidden;box-shadow:inset 0 0 0 1px var(--border-strong)}
[data-visual="c"] .vopt .spec{border-radius:6px 6px 0 0}
.vopt .vbody{padding:.9rem 1rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.vopt h3{font-size:.95rem;font-weight:800;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.vopt .vdesc{font-size:.8rem;color:var(--muted)}
.vopt ul{font-size:.76rem;color:var(--muted);padding-left:1.05rem;display:flex;flex-direction:column;gap:.15rem}
.vopt .btn{margin-top:auto}
.s-side{width:66px;flex-shrink:0;padding:9px 7px;display:flex;flex-direction:column;gap:6px}
.s-main{flex:1;padding:9px;display:flex;flex-direction:column;gap:6px}
.s-line{height:7px;border-radius:4px}
.s-card{border-radius:7px;flex:1;padding:7px;display:flex;flex-direction:column;gap:5px}

/* ===== Layar login ===== */
.login-veil{position:fixed;inset:0;z-index:120;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:1.2rem}
.login-veil[hidden]{display:none}
.login-card{width:100%;max-width:370px;padding:1.7rem 1.6rem;display:flex;flex-direction:column;gap:1rem}
.login-brand{display:flex;flex-direction:column;align-items:center;gap:.55rem;text-align:center;padding-bottom:.3rem}
.login-brand .logo-mark{width:52px;height:52px;font-size:1.2rem;border-radius:12px}
.field{display:flex;flex-direction:column;gap:.3rem;font-size:.78rem;font-weight:600;color:var(--muted)}
.field .inp{border:1px solid var(--border);border-radius:8px;padding:.6rem .75rem;background:var(--surface-2);color:var(--muted);font-size:.9rem;font-weight:400}
.inp[contenteditable]{cursor:text;outline:none}
.inp[contenteditable]:focus{border-color:var(--brand);background:var(--surface);color:var(--text)}
.inp[contenteditable]:empty::before{content:attr(data-ph);color:var(--muted)}
.inp[data-pilih],.cellinp{cursor:pointer;user-select:none;position:relative}
/* kotak centang: kontrol nyata, bukan lambang mati */
.cek{cursor:pointer;user-select:none;font-size:1rem;line-height:1;display:inline-block;min-width:1.2rem;text-align:center;color:var(--muted)}
.cek[data-on="1"]{color:var(--brand-text)}
.cek:hover{color:var(--brand-text)}
.inp[data-pilih]:hover,.cellinp:hover{border-color:var(--brand);color:var(--brand-text)}
.cellinp{display:inline-block;border:1px solid var(--border);border-radius:6px;padding:.2rem .5rem;font-size:.76rem;background:var(--surface-2);color:var(--muted)}
.cellinp[contenteditable]{cursor:text;outline:none}
.cellinp[contenteditable]:focus{border-color:var(--brand);background:var(--surface);color:var(--text)}
.cellinp[contenteditable]:empty::before{content:attr(data-ph);color:var(--muted)}
.login-row{display:flex;align-items:center;gap:.45rem;font-size:.8rem;color:var(--muted)}

/* ===== Dialog formulir ===== */
.modal-veil{position:fixed;inset:0;z-index:110;background:rgba(10,16,23,.55);display:flex;align-items:flex-start;justify-content:center;padding:2.2rem 1rem;overflow:auto}
.modal-veil[hidden]{display:none}
.modal-card{width:100%;max-width:780px;margin-bottom:2rem}

/* ===== Dropzone unggah berkas ===== */
.dropzone{border:2px dashed var(--border-strong);border-radius:10px;padding:1.1rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.2rem;text-align:center;color:var(--muted);font-size:.8rem;font-weight:400;cursor:pointer;background:var(--surface-2)}
.dropzone b{color:var(--text)}
.dropzone:hover{border-color:var(--brand);color:var(--brand-text)}
[data-visual="c"] .dropzone{border-radius:6px}

/* ===== Banner mockup ===== */
.demo-banner{display:flex;justify-content:center;align-items:center;gap:.45rem .9rem;flex-wrap:wrap}
.demo-banner button{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:6px;padding:.14rem .6rem;font-size:.74rem;font-weight:600}
.demo-banner button:hover{background:rgba(255,255,255,.26)}