/* ============================================================
   Tobacco360 WMS — PT KRETEK NUSANTARA SEJAHTERA · Design tokens & components
   Visual system of the WMS engine: Tobacco360 WMS v7.18 (Machine Vision), reused by Tobacco360
   Accent: WMS blue #0f5acf · body #f6f7f9 · cards white r12
   ============================================================ */
:root{
  --accent:#0f5acf; --accent-dark:#0453c9; --accent-soft:#e8f0fe; --accent-border:#bcd2f7;
  --navy-1:#1b3e78; --navy-2:#1c4386; --hero-1:#2b5494; --hero-2:#1e3a8a;
  --green:#16a34a; --green-strong:#44b742; --green-soft:#e7f8e9; --green-border:#bce5c0;
  --amber:#d97706; --amber-soft:#fdf4d7; --amber-border:#f3d9a4; --amber-text:#92600a;
  --red:#dc2626; --red-soft:#fdeef0; --red-border:#f5c2c7; --red-text:#b91c1c;
  --purple:#7643cc; --purple-soft:#f1e9fb;
  --ink:#0f172a; --ink-2:#334155; --muted:#64748b; --muted-2:#94a3b8;
  --line:#e5e7eb; --line-soft:#eef1f5; --bg:#f6f7f9; --card:#ffffff;
  --r:12px; --r-sm:8px; --shadow:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.06);
  --shadow-lg:0 8px 24px rgba(15,23,42,.12);
  --mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
  --sidebar-w:248px; --topbar-h:56px;
  /* v4.6 (revisi client "samakan ukuran form"): SATU ukuran kontrol
     form untuk seluruh aplikasi — dipakai .fg, kontrol di dalam tabel,
     bar cari/filter, dan isi modal. */
  --ctl-h:36px; --ctl-fs:13px; --ctl-pad:8px 11px;
  /* v4.8 (revisi Gambar 4 "ukuran button buat agak besar, berlaku untuk
     semuanya"): tinggi baku tombol — sengaja sama dengan --ctl-h supaya
     tombol dan field sejajar rapi saat berdampingan. */
  --btn-h:36px; --btn-h-sm:30px;
  /* v4.9: inset horizontal baku isi kartu — dipakai .card-h, .card-p,
     dan setiap bar full-bleed yang jadi anak langsung .card, supaya
     semuanya rata di satu garis vertikal. */
  --card-pad:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Inter,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit;cursor:pointer}
code,.mono{font-family:var(--mono);font-size:12.5px}

/* ---------- App frame ---------- */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.sb-logo{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line-soft)}
.sb-logo .mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--accent),#3b82f6);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;letter-spacing:.5px}
.sb-logo .t1{font-weight:800;font-size:14.5px;letter-spacing:.2px}
.sb-logo .t1 .lt{color:#93b6ee}
.sb-logo .t2{font-size:10.5px;color:var(--muted)}
.sb-nav{flex:1;padding:10px 12px 4px}
.sb-group{margin:14px 4px 6px;font-size:10px;font-weight:700;letter-spacing:1.2px;color:var(--muted-2);text-transform:uppercase}
.sb-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);color:var(--ink-2);font-weight:500;font-size:13.5px;margin-bottom:2px}
.sb-item .ic{width:18px;text-align:center;font-size:14px;opacity:.85}
.sb-item:hover{background:var(--line-soft);text-decoration:none}
.sb-item.active{background:var(--accent);color:#fff;font-weight:600}
.sb-item.active .ic{opacity:1}
.sb-item .cnt{margin-left:auto;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;border-radius:99px;padding:1px 7px}
.sb-item.active .cnt{background:rgba(255,255,255,.25)}
.sb-foot{padding:12px;border-top:1px solid var(--line-soft)}
.sb-switch{display:block;text-align:center;border:1px solid var(--accent-border);color:var(--accent);border-radius:var(--r-sm);padding:9px 10px;font-weight:600;font-size:13px;background:#fff}
.sb-switch:hover{background:var(--accent-soft);text-decoration:none}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:var(--topbar-h);background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 20px;position:sticky;top:0;z-index:40}
.tb-module{background:var(--accent);color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.4px;border-radius:99px;padding:5px 14px}
.tb-plant{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:99px;padding:5px 13px;font-weight:600;font-size:13px;color:var(--ink-2);background:#fff}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.tb-live{display:flex;align-items:center;gap:7px;background:var(--green-soft);border:1px solid var(--green-border);color:#15803d;border-radius:99px;padding:4px 12px;font-size:12.5px;font-weight:600}
.tb-live .dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.6s infinite}
.tb-bell{position:relative;font-size:17px;color:var(--ink-2);background:none;border:none}
.tb-bell .n{position:absolute;top:-6px;right:-8px;background:var(--red);color:#fff;font-size:9.5px;font-weight:700;border-radius:99px;padding:1px 5px}
.tb-avatar{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;border:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.content{padding:18px 24px 90px;max-width:1560px;width:100%}
.crumb{font-size:12px;color:var(--muted);margin-bottom:10px}
.crumb b{color:var(--ink-2);font-weight:600}
.page-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.page-head h1{font-size:25px;font-weight:800;letter-spacing:-.3px;color:#10265c}
.page-head .sub{color:var(--muted);font-size:13.5px;margin-top:3px}
/* v4.9 (revisi Gambar 3): aksi halaman rata kanan DAN sejajar dengan
   baris judul — bukan dengan seluruh blok judul+subjudul. .page-head
   memakai align-items:flex-start, jadi tanpa penyetelan ini tombol
   menempel di garis paling atas dan terlihat naik dibanding judul. */
.page-head{--head-line:36px}
.page-actions{margin-left:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-height:var(--head-line)}
/* Tautan "kembali" dipasang sebagai baris penuh sendiri di atas judul
   supaya judul dan tombol aksi berbagi baris yang sama. */
.page-head>.page-back{flex:0 0 100%;order:-1;margin-bottom:2px}

/* ---------- Buttons ----------
   v4.8 (revisi Gambar 4): tombol dibesarkan di level token supaya SEMUA
   halaman ikut sekaligus — tinggi minimum --btn-h agar sejajar dengan
   tinggi field (--ctl-h) saat berdampingan di satu baris. Ukuran .btn-sm
   ikut naik: sebelumnya 4px/12px terasa terlalu mungil untuk tombol aksi
   di dalam tabel. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:var(--r-sm);
  min-height:var(--btn-h);padding:9px 18px;font-size:13.5px;font-weight:600;border:1px solid transparent;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark)}
.btn-green{background:var(--green-strong);color:#fff}
.btn-amber{background:#f59e0b;color:#fff}
.btn-red{background:var(--red);color:#fff}
.btn-outline{background:#fff;color:var(--ink-2);border-color:var(--line)}
.btn-outline:hover{background:var(--line-soft)}
.btn-outline-accent{background:#fff;color:var(--accent);border-color:var(--accent-border)}
.btn-outline-accent:hover{background:var(--accent-soft)}
.btn-ghost{background:none;color:var(--muted);border:none}
/* v4.8 (revisi Gambar 9): satu kelas baku untuk aksi merusak yang
   tampil sebagai ikon/teks polos (hapus baris, batal, tolak) — warnanya
   merah seperti tombol danger lain, bukan abu-abu netral. */
.btn-danger-ghost{background:none;color:var(--red-text);border:none}
.btn-danger-ghost:hover{background:var(--red-soft)}
/* Tombol hapus-baris yang sudah tersebar di banyak halaman memakai
   .btn-ghost + atribut data-*del / data-remove-row. Diwarnai merah di
   sini supaya SELURUH halaman konsisten tanpa perlu menyunting file
   modul yang berada di luar lingkup perubahan ini. */
.btn-ghost[data-del],.btn-ghost[data-adel],.btn-ghost[data-bdel],
.btn-ghost[data-edel],.btn-ghost[data-rdel],.btn-ghost[data-sdel],
.btn-ghost[data-remove-row],.btn-ghost[data-drop]{color:var(--red-text)}
.btn-ghost[data-del]:hover,.btn-ghost[data-adel]:hover,.btn-ghost[data-bdel]:hover,
.btn-ghost[data-edel]:hover,.btn-ghost[data-rdel]:hover,.btn-ghost[data-sdel]:hover,
.btn-ghost[data-remove-row]:hover,.btn-ghost[data-drop]:hover{background:var(--red-soft)}
.btn-outline-danger{background:#fff;color:var(--red-text);border-color:var(--red-border)}
.btn-outline-danger:hover{background:var(--red-soft)}
.btn-lg{min-height:46px;padding:13px 26px;font-size:15px;border-radius:10px}
.btn-sm{min-height:var(--btn-h-sm);padding:6px 13px;font-size:12.5px;border-radius:7px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- Cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card-p{padding:16px var(--card-pad)}
.card-h{display:flex;align-items:center;gap:10px;padding:13px var(--card-pad);border-bottom:1px solid var(--line-soft);font-weight:700;font-size:14px}
.card-h .hint{font-weight:500;color:var(--muted);font-size:12.5px}
.card-h .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.grid{display:grid;gap:14px}

/* ---------- Alert banners ---------- */
.banner{display:flex;gap:12px;border-radius:10px;padding:12px 16px;margin-bottom:12px;border:1px solid;border-left-width:4px;font-size:13px}
.banner .bi{font-size:15px;margin-top:1px}
.banner b.title{display:block;font-size:13.5px;margin-bottom:2px}
.banner .close{margin-left:auto;background:none;border:none;color:inherit;opacity:.5;font-size:15px}
.banner .act{font-weight:600}
.banner-red{background:var(--red-soft);border-color:var(--red-border);border-left-color:var(--red);color:#7f1d1d}
.banner-amber{background:var(--amber-soft);border-color:var(--amber-border);border-left-color:#f59e0b;color:#78350f}
.banner-blue{background:var(--accent-soft);border-color:var(--accent-border);border-left-color:var(--accent);color:#1e3a8a}
.banner-green{background:var(--green-soft);border-color:var(--green-border);border-left-color:var(--green);color:#14532d}
/* v5.7 — banner netral untuk keterangan hak akses (tidak dipakai modul lama) */
.banner-gray{background:var(--bg-soft,#f8fafc);border-color:var(--line);border-left-color:#94a3b8;color:#334155}
/* v6.4 — banner ungu: penanda Bal lepas dan alur penggabungan */
.banner-purple{background:var(--purple-soft);border-color:#ddccf5;border-left-color:var(--purple);color:#4c1d95}

/* ---------- KPI cards ---------- */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:13px 15px;position:relative}
.kpi .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.kpi .ic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;background:var(--accent-soft)}
.kpi .ic.ic-blue{background:var(--accent-soft);color:#1d4ed8}
.kpi .ic.ic-red{background:var(--red-soft);color:var(--red-text)}
.kpi .ic.ic-green{background:var(--green-soft);color:#15803d}
.kpi .ic.ic-amber{background:var(--amber-soft);color:var(--amber-text)}
.kpi .ic.ic-gray{background:var(--line-soft);color:var(--muted)}
.kpi:hover{box-shadow:var(--shadow-lg);border-color:var(--accent-border)}
.kpi.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.act-row .jic-lock{opacity:.55;font-size:16px}
.kpi .num{font-size:24px;font-weight:800;letter-spacing:-.5px}
.kpi .num small{font-size:13px;font-weight:600;color:var(--muted)}
.kpi .lbl{color:var(--muted);font-size:12.5px;margin-top:1px}
.kpi .delta{font-size:11.5px;font-weight:600;margin-top:6px}
.kpi .delta.up{color:var(--green)}
.kpi .delta.down{color:var(--red)}
.kpi .delta.flat{color:var(--muted)}
.info-i{width:16px;height:16px;border-radius:50%;border:1px solid var(--line);color:var(--muted-2);font-size:10px;display:inline-flex;align-items:center;justify-content:center;background:#fff;cursor:help;position:relative;font-style:normal}
.info-i:hover .tip{display:block}
.info-i .tip{display:none;position:absolute;top:20px;right:-8px;z-index:60;background:#0f172a;color:#e2e8f0;border-radius:8px;padding:9px 12px;width:230px;font-size:11.5px;line-height:1.5;text-align:left;box-shadow:var(--shadow-lg)}

/* ---------- Chips & badges ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:2px 10px;font-size:11.5px;font-weight:600;border:1px solid transparent;white-space:nowrap}
.chip-green{background:var(--green-soft);color:#15803d;border-color:var(--green-border)}
.chip-amber{background:var(--amber-soft);color:var(--amber-text);border-color:var(--amber-border)}
.chip-red{background:var(--red-soft);color:var(--red-text);border-color:var(--red-border)}
.chip-blue{background:var(--accent-soft);color:#1d4ed8;border-color:var(--accent-border)}
.chip-purple{background:var(--purple-soft);color:var(--purple)}
.chip-gray{background:var(--line-soft);color:var(--muted)}
.flag-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.flag-item{display:inline-flex;align-items:center;gap:5px}
.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* Packaging state chips (KNS-specific) */
.st-sealed{background:var(--green-soft);color:#15803d;border-color:var(--green-border)}
.st-opened{background:var(--accent-soft);color:#1d4ed8;border-color:var(--accent-border)}
.st-partial{background:var(--amber-soft);color:var(--amber-text);border-color:var(--amber-border)}
.st-loose{background:var(--line-soft);color:var(--muted)}

/* ---------- Filter bar ---------- */
.filterbar{display:flex;gap:14px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:12px 16px;margin-bottom:16px}
.f-field{display:flex;flex-direction:column;gap:4px;min-width:150px}
.f-field label{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.3px}
.f-field select,.f-field input{border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 10px;font-size:13px;font-family:inherit;background:#fff;color:var(--ink)}
.f-field select:focus,.f-field input:focus{outline:2px solid var(--accent-border)}

/* ---------- Tables ---------- */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{background:#fafbfc;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.tbl tr:hover td{background:#fafbff}
.tbl tr.row-amber td{background:#fffbeb}
.tbl tr.row-red td{background:#fef2f2}
.tbl tr.row-green td{background:#f0fdf4}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
/* v4.9: tabel yang menempel penuh ke tepi kartu (anak langsung .card)
   dibuat rata dengan garis isi kartu — sebelumnya kolom pertama meleset
   6px dari judul kartu dan bar cari karena sel hanya punya padding 12px.
   Tabel yang berada di dalam .card-p tidak ikut, karena inset-nya sudah
   diberikan oleh .card-p. */
.card>.tbl-wrap>.tbl>thead>tr>th:first-child,
.card>.tbl-wrap>.tbl>tbody>tr>td:first-child{padding-left:var(--card-pad)}
.card>.tbl-wrap>.tbl>thead>tr>th:last-child,
.card>.tbl-wrap>.tbl>tbody>tr>td:last-child{padding-right:var(--card-pad)}
.tbl .id-link{font-weight:600}
.tbl-foot{padding:10px 14px;color:var(--muted);font-size:12.5px;border-top:1px solid var(--line-soft)}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:2px;border-bottom:2px solid var(--line);margin-bottom:14px;overflow-x:auto}
.tab{border:none;background:none;padding:9px 16px;font-size:13.5px;font-weight:600;color:var(--muted);border-bottom:2.5px solid transparent;margin-bottom:-2px;white-space:nowrap}
.tab:hover{color:var(--ink-2)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.tab .cnt{background:var(--line-soft);color:var(--ink-2);border-radius:99px;font-size:11px;padding:1px 7px;margin-left:5px;font-weight:700}
.tab.warn .cnt{background:var(--amber-soft);color:var(--amber-text)}

/* ---------- Stat strip (map header style) ---------- */
.statstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 18px;margin-bottom:14px}
.stat .v{font-size:21px;font-weight:800}
.stat .k{font-size:10.5px;font-weight:700;letter-spacing:.8px;color:var(--muted);text-transform:uppercase;margin-top:1px}
.stat .bar{height:4px;border-radius:99px;background:var(--line-soft);margin-top:7px;overflow:hidden}
.stat .bar i{display:block;height:100%;border-radius:99px}

/* ---------- Bin grid (warehouse map) ---------- */
.bin{border:1.5px solid;border-radius:8px;padding:6px 7px;font-size:10.5px;text-align:center;cursor:pointer;background:#fff;min-width:76px}
.bin .bc{font-weight:700;font-size:10.5px}
.bin .bi2{color:var(--muted);font-size:10px}
.bin .bq{font-weight:700;font-size:11px}
.bin-available{border-color:#86dd8f;background:#f2fcf3;color:#166534}
.bin-occupied{border-color:#7fa8ec;background:#eff4fe;color:#1e40af}
.bin-reserved{border-color:#eec37a;background:#fdf7e7;color:#92600a}
.bin-full{border-color:#f19a9a;background:#fdf0f0;color:#991b1b}
.bin-quarantine{border-color:#c4a7ee;background:#f6f0fd;color:#6b21a8}
.bin-na{border-color:var(--line);background:#f5f6f8;color:var(--muted-2)}
.bin.target{border-width:2.5px;border-color:var(--accent);animation:binpulse 1.5s infinite}
@keyframes binpulse{0%,100%{box-shadow:0 0 0 0 rgba(15,90,207,.35)}50%{box-shadow:0 0 0 6px rgba(15,90,207,0)}}

/* ---------- Detail side panel ---------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.panel .p-h{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--line-soft);font-weight:800;font-size:15px}
.p-sec{padding:12px 16px;border-bottom:1px solid var(--line-soft)}
.p-sec .p-t{font-size:10.5px;font-weight:700;letter-spacing:.8px;color:var(--muted);text-transform:uppercase;margin-bottom:8px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:3.5px 0;font-size:13px}
.kv .k{color:var(--muted)}
.kv .v{font-weight:600;text-align:right}

/* ---------- Kotak detail (label di atas, nilai di bawah) ----------
   v7.13 (revisi client, Gambar 7): "saya ingin jika ada detail seperti
   ini dibuat rata kiri agar alignmentnya enak, ubah semua detail jadi
   standartnya seperti ini."

   Tujuh halaman (REQ-02A, OPN-04A, TRF-01A, CLM-02, INV-02, MST-03A,
   DSP-01A) memakai kembali nama kelas .kv untuk GRID kotak detail,
   padahal .kv di atas dirancang untuk baris panel samping yang memang
   rata kanan. Akibatnya nilai di dalam kotak ikut terdorong ke kanan
   dan tidak sejajar dengan labelnya. Definisi di bawah ini berlaku
   untuk seluruh kotak detail sekaligus — halaman tidak perlu diubah
   satu per satu, dan tidak ada lagi detail yang rata kanan. */
.kv-b,.mst-kv{text-align:left}
.kv .kv-b .k,.kv-b .k{text-align:left}
.kv .kv-b .v,.kv-b .v{text-align:left;font-weight:700}
.mst-kv-lbl,.mst-kv-val{text-align:left}

/* ---------- Hero card ---------- */
.hero{background:linear-gradient(120deg,var(--hero-1),var(--hero-2));color:#fff;border-radius:var(--r);padding:18px 22px;margin-bottom:14px}
.hero h2{font-size:20px;font-weight:800;margin-bottom:9px}
.hero .meta{display:flex;flex-wrap:wrap;gap:16px;font-size:12.5px;opacity:.95}
.hero .meta b{font-weight:700}

/* ---------- Instruction card ---------- */
.instruct{background:#eff6ff;border:1px solid var(--accent-border);border-radius:var(--r);padding:15px 18px;margin-bottom:14px}
.instruct .i-t{color:var(--accent);font-weight:700;font-size:13.5px;margin-bottom:10px}
.i-step{display:flex;gap:11px;margin-bottom:9px;font-size:13.5px;align-items:flex-start}
.i-step .n{width:22px;height:22px;min-width:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.i-note{display:flex;gap:9px;background:#dbeafe;border-radius:8px;padding:9px 12px;font-size:12.5px;color:#1e3a8a;margin-top:10px}

/* ---------- Sticky footer ---------- */
.sticky-foot{position:fixed;left:var(--sidebar-w);right:0;bottom:0;background:var(--card);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(15,23,42,.06);display:flex;align-items:center;gap:12px;padding:11px 24px;z-index:50;font-size:12.5px;color:var(--muted)}
.sticky-foot .acts{margin-left:auto;display:flex;gap:9px}

/* ---------- Demo scenarios box ---------- */
.demo-box{border:1.5px dashed var(--accent-border);background:#f8fbff;border-radius:var(--r);padding:14px 16px;margin-top:16px}
.demo-box .d-t{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--accent);text-transform:uppercase;margin-bottom:10px}
.demo-box .btns{display:flex;gap:9px;flex-wrap:wrap}

/* ---------- Charts (hand-drawn, no libs) ---------- */
.donut{position:relative;width:150px;height:150px;border-radius:50%;margin:0 auto}
.donut .hole{position:absolute;inset:22%;background:var(--card);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut .hole .hv{font-size:19px;font-weight:800}
.donut .hole .hk{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.legend{display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.legend .li{display:flex;align-items:center;gap:8px}
.legend .sw{width:10px;height:10px;border-radius:3px}
.legend .lv{margin-left:auto;font-weight:700}
.hbar{display:flex;flex-direction:column;gap:9px}
.hbar .hb{display:grid;grid-template-columns:110px 1fr 64px;align-items:center;gap:10px;font-size:12.5px}
.hbar .track{height:9px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.hbar .track i{display:block;height:100%;border-radius:99px}
.hbar .hv{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- Timeline (traceability) ---------- */
.timeline{position:relative;padding-left:30px}
.timeline:before{content:'';position:absolute;left:10px;top:6px;bottom:6px;width:2px;background:var(--accent-border)}
.tl-ev{position:relative;padding:0 0 18px 6px}
.tl-ev .tdot{position:absolute;left:-26px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid #dbeafe}
.tl-ev .t-when{font-size:11.5px;color:var(--muted);font-weight:600}
.tl-ev .t-title{font-weight:700;font-size:13.5px;margin:2px 0}
.tl-ev .t-desc{font-size:12.5px;color:var(--ink-2)}
.tl-ev .t-chips{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}

/* ---------- Modals / drawers ---------- */
.overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:80;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--card);border-radius:14px;box-shadow:var(--shadow-lg);width:min(560px,94vw);max-height:88vh;overflow-y:auto}
/* v4.6: modal lebar untuk isi bertabel / berkolom banyak (jadwal QC,
   assign picking, edit order, form BOM) supaya kontrol tidak terjepit */
.modal.wide{width:min(900px,96vw)}
/* v5.0 (revisi Gambar 1): tabel editor berkolom enam — nama material
   dan nama supplier ("PT Indra Jaya Swastika") harus terbaca utuh. */
.modal.xwide{width:min(1080px,96vw)}
.modal .m-h{display:flex;align-items:center;padding:15px 20px;border-bottom:1px solid var(--line-soft);font-weight:800;font-size:15.5px}
.modal .m-b{padding:16px 20px}
.modal .m-f{display:flex;justify-content:flex-end;gap:9px;padding:13px 20px;border-top:1px solid var(--line-soft)}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:74px;right:22px;z-index:99;background:#0f172a;color:#f1f5f9;border-radius:10px;padding:12px 17px;font-size:13px;box-shadow:var(--shadow-lg);max-width:380px;display:flex;gap:9px;align-items:flex-start;animation:toastin .25s ease}
.toast.ok{border-left:4px solid var(--green-strong)}
.toast.err{border-left:4px solid var(--red)}
.toast.warn{border-left:4px solid #f59e0b}
@keyframes toastin{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}

/* ---------- Forms ----------
   v4.6: satu baseline untuk SEMUA kontrol form (halaman + modal),
   termasuk yang berada di dalam tabel — sebelumnya kontrol di dalam
   sel tabel tidak pernah kena style sehingga tingginya berbeda-beda
   (19px default browser vs 33-35px di luar tabel). */
#jal-page input:not([type="checkbox"]):not([type="radio"]),
#jal-page select,
#jal-page textarea,
.m-b input:not([type="checkbox"]):not([type="radio"]),
.m-b select,
.m-b textarea{
  height:var(--ctl-h);
  min-height:var(--ctl-h);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:var(--ctl-pad);
  font-size:var(--ctl-fs);
  font-family:inherit;
  line-height:1.2;
  background:#fff;
  color:var(--ink);
  max-width:100%;
}
#jal-page textarea,.m-b textarea{height:auto;min-height:72px;resize:vertical;line-height:1.45}
#jal-page input:focus,#jal-page select:focus,#jal-page textarea:focus,
.m-b input:focus,.m-b select:focus,.m-b textarea:focus{outline:2px solid var(--accent-border)}
#jal-page input:disabled,#jal-page select:disabled,#jal-page textarea:disabled,
.m-b input:disabled,.m-b select:disabled,.m-b textarea:disabled{background:#f8fafc;color:var(--muted);cursor:not-allowed}
/* kontrol di dalam tabel mengisi lebar selnya supaya kolom rapi sejajar */
#jal-page .tbl td > input,#jal-page .tbl td > select,
.m-b .tbl td > input,.m-b .tbl td > select{width:100%}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px}
.fg{display:flex;flex-direction:column;gap:5px}
.fg label{font-size:11.5px;font-weight:700;color:var(--muted)}
.fg input,.fg select,.fg textarea{width:100%}
.fg .ro{background:#f8fafc;color:var(--ink-2)}

/* ---------- Misc ---------- */
.pill-row{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.note-assume{font-size:11.5px;color:var(--amber-text);background:var(--amber-soft);border:1px solid var(--amber-border);border-radius:8px;padding:7px 11px;display:inline-flex;gap:7px;align-items:flex-start}
.sec-title{font-size:15px;font-weight:800;margin:20px 0 10px}
.muted{color:var(--muted)}
.small{font-size:12px}
.right{text-align:right}
.w-100{width:100%}
.mt-8{margin-top:8px}.mt-14{margin-top:14px}.mb-14{margin-bottom:14px}
.flex{display:flex;align-items:center;gap:10px}
.progress{height:7px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.progress i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.avatar-sm{width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700}
.gauge{width:170px;margin:0 auto;text-align:center}
.qr-slot{width:54px;height:54px;border:1.5px dashed var(--muted-2);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--muted-2);text-align:center}

/* ---------- Landing (navy portal) ---------- */
.landing-wrap{min-height:100vh;background:linear-gradient(160deg,#16345f,var(--navy-1) 45%,var(--navy-2));color:#e2e8f0;display:flex;flex-direction:column;align-items:center;padding:52px 20px 40px}
.land-logo{display:flex;align-items:center;gap:14px}
.land-logo .mark{width:52px;height:52px;border-radius:13px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;color:#fff}
.land-logo h1{font-size:30px;font-weight:800;color:#fff;letter-spacing:.5px}
.land-logo h1 .lt{color:#7fb1f5}
.land-sub{color:#b6c6e4;margin-top:6px;font-size:14.5px}
.land-client{margin-top:14px;font-size:13px;color:#9fb4d8}
.land-pills{display:flex;gap:10px;margin:22px 0 30px;flex-wrap:wrap;justify-content:center}
.land-pill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:6px 15px;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:8px}
.land-pill .dot{width:7px;height:7px;border-radius:50%}
.land-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;max-width:1180px;width:100%}
.land-card{background:#fff;color:var(--ink);border-radius:16px;padding:22px;display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.land-card .ic{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:13px}
.land-card .mod{font-size:10.5px;font-weight:800;letter-spacing:1.1px;color:var(--muted)}
.land-card h3{font-size:18px;font-weight:800;margin:3px 0 8px}
.land-card p{font-size:12.5px;color:var(--ink-2);margin-bottom:12px}
.land-card ul{list-style:none;margin:0 0 16px;display:flex;flex-direction:column;gap:6px}
.land-card li{font-size:12.5px;display:flex;gap:8px;align-items:flex-start}
.land-card li:before{content:'✓';color:var(--green);font-weight:800}
.land-card.queued{opacity:.75;background:#f1f4f9}
.land-card.queued li:before{content:'•';color:var(--muted-2)}
.land-foot{margin-top:30px;font-size:12px;color:#8ea6cf;text-align:center}

/* ---------- Demo flow guide (float button + panel — SQ Portal reference style) ---------- */
.flow-fab{position:fixed;right:20px;bottom:20px;width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;font-size:19px;font-weight:800;border:none;box-shadow:0 8px 22px rgba(15,90,207,.42);z-index:70;display:flex;align-items:center;justify-content:center}
.flow-fab:hover{background:var(--accent-dark)}
.flow-fab .fdot{position:absolute;top:1px;right:1px;width:11px;height:11px;border-radius:50%;background:#4ade80;border:2px solid #fff}
.flow-panel{position:fixed;right:20px;bottom:78px;width:342px;max-height:min(76vh,660px);overflow-y:auto;background:#fff;border-radius:16px;box-shadow:0 18px 48px rgba(15,23,42,.28);z-index:69;padding:18px;display:none;border:1px solid var(--line)}
.flow-panel.open{display:block}
body:has(.sticky-foot) .flow-fab{bottom:78px}
body:has(.sticky-foot) .flow-panel{bottom:136px}
.fp-title{display:flex;gap:9px;align-items:center;font-weight:800;font-size:14.5px;margin-bottom:5px;color:var(--ink)}
.fp-title .fic{color:var(--accent);font-size:15px}
.fp-intro{font-size:12px;color:var(--muted);margin-bottom:13px;line-height:1.55}
.fp-sub{font-size:12.5px;font-weight:600;color:var(--accent-dark);margin-bottom:8px;line-height:1.4}
.fp-back{font-size:12px;color:var(--accent);cursor:pointer;margin-bottom:9px;display:inline-block;font-weight:600}
.fstep{display:flex;gap:10px;padding:10px 11px;border-radius:12px;margin-bottom:6px;border:1.5px solid transparent}
.fstep.pick:hover{background:var(--line-soft);cursor:pointer}
.fstep.active{background:#eff6ff;border-color:var(--accent)}
.fstep .fn{width:22px;height:22px;min-width:22px;border-radius:50%;background:#fff;border:1.5px solid var(--line);color:var(--muted);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px}
.fstep.active .fn{background:var(--accent);border-color:var(--accent);color:#fff}
.fstep.done .fn{background:var(--green-soft);border-color:var(--green-border);color:#15803d}
.fstep .chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.fstep .ft{font-weight:600;font-size:12.5px;margin:3px 0 2px;color:var(--ink);line-height:1.4}
.fstep .fsub{font-size:11px;color:var(--muted);margin:0 0 3px;line-height:1.4}
.fstep .fc{font-family:var(--mono);font-size:10.5px;color:var(--muted-2);letter-spacing:.6px}
.fstep .fact{margin-top:7px;display:flex;gap:6px;flex-wrap:wrap}
.you-chip{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:800;color:var(--accent);letter-spacing:.4px}
.you-chip:before{content:'●';font-size:8px}
.fp-foot{display:flex;gap:8px;margin-top:13px}

/* ---------- Elegant icon set (CSS mask, currentColor) — replaces all emoji ---------- */
.jic{display:inline-block;width:1.06em;height:1.06em;vertical-align:-0.14em;background:currentColor;-webkit-mask:var(--i) no-repeat center/contain;mask:var(--i) no-repeat center/contain;flex:none}
.jic-alert{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.6 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.6a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E")}
.jic-block{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.8 5.8l12.4 12.4'/%3E%3C/svg%3E")}
.jic-box{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5Z'/%3E%3Cpath d='M3 8l9 5 9-5'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E")}
.jic-lock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E")}
.jic-file{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h9l5 5v15H6Z'/%3E%3Cpath d='M15 2v5h5'/%3E%3C/svg%3E")}
.jic-x{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E")}
.jic-check-circle{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 5-5.5'/%3E%3C/svg%3E")}
/* v5.1 (revisi Gambar 1): DUA kelas ikon dipakai di seluruh aplikasi tapi
   tidak pernah punya definisi, jadi selama ini tampil sebagai kotak
   kosong — jic-check dipakai di 12 file (termasuk RTN-02, TRF-03, OPN-03
   yang di luar lingkup) dan jic-eye di PRC-05. Definisinya ditaruh di
   token bersama supaya semua halaman ikut sembuh tanpa perlu menyunting
   satu pun file modul. */
.jic-check{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E")}
.jic-eye{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.8-6.5 10-6.5S22 12 22 12s-3.8 6.5-10 6.5S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E")}
.jic-clipboard{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='14' height='17' rx='2'/%3E%3Cpath d='M9 5V3h6v2'/%3E%3Cpath d='M9 11h6'/%3E%3Cpath d='M9 15h6'/%3E%3C/svg%3E")}
.jic-clock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.jic-dot{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='none'%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3C/svg%3E")}
.jic-pin{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.1 7-11a7 7 0 1 0-14 0c0 4.9 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E")}
.jic-shield{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6Z'/%3E%3C/svg%3E")}
.jic-calendar{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M16 3v4'/%3E%3C/svg%3E")}
.jic-ship{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17h18l-2 4H5Z'/%3E%3Cpath d='M6 17V9h12v8'/%3E%3Cpath d='M12 9V5h4'/%3E%3C/svg%3E")}
.jic-user{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-6 8-6s8 2 8 6'/%3E%3C/svg%3E")}
.jic-factory{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 21h20'/%3E%3Cpath d='M4 21V10l5 3v-3l5 3V6h6v15'/%3E%3C/svg%3E")}
.jic-link{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 6 0l3-3a4 4 0 0 0-6-6l-1.5 1.5'/%3E%3Cpath d='M14 10a4 4 0 0 0-6 0l-3 3a4 4 0 0 0 6 6l1.5-1.5'/%3E%3C/svg%3E")}
.jic-gear{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.6 4.6l2.1 2.1M17.3 17.3l2.1 2.1M19.4 4.6l-2.1 2.1M6.7 17.3l-2.1 2.1'/%3E%3C/svg%3E")}
.jic-chart{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M7 17V9'/%3E%3Cpath d='M12 17V5'/%3E%3Cpath d='M17 17v-6'/%3E%3C/svg%3E")}
.jic-target{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.2'/%3E%3C/svg%3E")}
.jic-refresh{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 6.3'/%3E%3Cpath d='M20 5v6h-6'/%3E%3C/svg%3E")}
.jic-building{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18'/%3E%3Cpath d='M9 7h2M13 7h2M9 11h2M13 11h2M9 15h2M13 15h2'/%3E%3Cpath d='M11 21v-3h2v3'/%3E%3C/svg%3E")}
.jic-info{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8h.01'/%3E%3Cpath d='M11.2 12H12v5'/%3E%3C/svg%3E")}
.jic-search{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.5 16.5 4.5 4.5'/%3E%3C/svg%3E")}
.jic-filter{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16l-6.5 8.4V19l-3 2v-8.6Z'/%3E%3C/svg%3E")}
.jic-upload{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3Cpath d='M4 16v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E")}
.jic-truck{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='7' width='14' height='9'/%3E%3Cpath d='M15 10h4l3 3v3h-7'/%3E%3Ccircle cx='6' cy='19' r='2'/%3E%3Ccircle cx='18' cy='19' r='2'/%3E%3C/svg%3E")}
.jic-bell{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6'/%3E%3Cpath d='M10 19a2 2 0 0 0 4 0'/%3E%3C/svg%3E")}
.jic-route{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='6' r='2.4'/%3E%3Ccircle cx='19' cy='18' r='2.4'/%3E%3Cpath d='M7.4 6H15a4 4 0 0 1 0 8H9a4 4 0 0 0 0 8h7.6'/%3E%3C/svg%3E")}
.jic-db{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='2.8'/%3E%3Cpath d='M4 5v14c0 1.6 3.6 2.8 8 2.8s8-1.2 8-2.8V5'/%3E%3Cpath d='M4 12c0 1.6 3.6 2.8 8 2.8s8-1.2 8-2.8'/%3E%3C/svg%3E")}
.jic-gauge{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 19a9 9 0 1 1 15 0'/%3E%3Cpath d='M12 14l3.5-4.5'/%3E%3Ccircle cx='12' cy='14' r='1'/%3E%3C/svg%3E")}
.jic-inbox{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 13 5.5 5h13L22 13v6H2Z'/%3E%3Cpath d='M2 13h6l2 3h4l2-3h6'/%3E%3C/svg%3E")}
.jic-layers{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5Z'/%3E%3Cpath d='M3 13l9 5 9-5'/%3E%3Cpath d='M3 17l9 5 9-5'/%3E%3C/svg%3E")}
.jic-list-check{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 1.5 1.5L7 5'/%3E%3Cpath d='m3 12 1.5 1.5L7 11'/%3E%3Cpath d='m3 18 1.5 1.5L7 17'/%3E%3Cpath d='M10 6h11'/%3E%3Cpath d='M10 12h11'/%3E%3Cpath d='M10 18h11'/%3E%3C/svg%3E")}
.jic-swap{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h13'/%3E%3Cpath d='m14 4 3 3-3 3'/%3E%3Cpath d='M20 17H7'/%3E%3Cpath d='m10 14-3 3 3 3'/%3E%3C/svg%3E")}
.jic-grid{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E")}
.jic-check-square{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E")}
.jic-archive-down{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='5'/%3E%3Cpath d='M5 8v13h14V8'/%3E%3Cpath d='M12 11v6'/%3E%3Cpath d='m9 14 3 3 3-3'/%3E%3C/svg%3E")}
.jic-stamp{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a3 3 0 0 0-3 3c0 2 1 3 1 5H7a2 2 0 0 0-2 2v3h14v-3a2 2 0 0 0-2-2h-3c0-2 1-3 1-5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E")}
.jic-printer{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8V3h10v5'/%3E%3Crect x='3' y='8' width='18' height='9' rx='2'/%3E%3Cpath d='M7 14h10v7H7Z'/%3E%3C/svg%3E")}
.jic-scan{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2'/%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E")}
.jic-star{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.7 5.6 6.3.9-4.5 4.4 1 6.1L12 17l-5.5 3 1-6.1L3 9.5l6.3-.9Z'/%3E%3C/svg%3E")}
.jic-flag{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 4h13l-2.5 4L18 12H5'/%3E%3C/svg%3E")}
.jic-plus{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.jic-trash{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M9 7V4h6v3'/%3E%3Cpath d='M6 7l1 13a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-13'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E")}

/* ---------- status-breakdown chip strip (PRC-01 tabs, etc) ---------- */
.status-counters{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:10px 0 4px;padding:2px 0}
.status-counters .sc-label{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.3px;text-transform:uppercase;margin-right:2px}
.status-counters .chip{font-size:11.5px;padding:4px 11px}

/* ---------- shared search + filter bar (Sh.searchFilterBar) ---------- */
/* v4.9 (revisi Gambar 1): bar cari + chip filter adalah anak LANGSUNG
   .card (di antara .card-h dan .tbl-wrap), sehingga tidak ikut padding
   .card-p — dulu ia menempel ke tepi kartu. Sekarang keduanya memakai
   inset baku kartu (--card-pad) agar sejajar dengan judul kartu dan isi
   tabel di seluruh halaman. */
.search-filter-bar{display:flex;align-items:center;gap:10px;margin:12px 0 16px}
.card>.search-filter-bar{padding-left:var(--card-pad);padding-right:var(--card-pad)}
.card>.sfb-chips{padding-left:var(--card-pad);padding-right:var(--card-pad)}
/* Batas lebar kolom cari HARUS di-scope ke #jal-page/.m-b: aturan
   kontrol form global memakai selector ber-ID (#jal-page input) dengan
   specificity lebih tinggi, dan max-width:100% di sana membatalkan
   batas 320px versi lama — itulah sebabnya kolom cari melar memenuhi
   kartu di 24 halaman. */
#jal-page .search-filter-bar input[type="text"],
.m-b .search-filter-bar input[type="text"]{flex:0 1 320px;max-width:320px;min-width:180px}
.search-filter-bar input[type="text"]:focus{outline:2px solid var(--accent-border)}
.sfb-filter-count{background:var(--accent);color:#fff;font-size:10px;font-weight:700;border-radius:99px;padding:1px 6px;margin-left:6px}
.search-filter-bar{flex-wrap:wrap}
.sfb-inline{display:inline-flex;align-items:center;gap:6px}
.sfb-inline label{font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.sfb-inline select,.sfb-inline input{min-width:130px}
.sfb-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-6px 0 14px}
.sfb-chips .chip b{cursor:pointer;margin-left:4px;opacity:.7}
.sfb-chips .chip b:hover{opacity:1}
.page-back{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--accent);text-decoration:none;margin-bottom:6px}
.page-back:hover{text-decoration:underline}

/* ---------- Buat PR Manual / edit-item table — destructive remove-row hover ---------- */
.pr-item-row [data-remove-row]:hover{background:var(--red-soft);color:var(--red)}

/* ---------- v3.4 — consistent row-action button groups + bottom-right detail action bar ----------
   v3.6.2 fix: .act-row (display:flex) must NOT be the <td>'s own
   class. A table cell's `vertical-align` (the thing that centers a
   short cell within a taller row) only takes effect on boxes whose
   computed display is table-cell — putting display:flex directly on
   the <td> silently drops that, so the cell's box collapses to its
   OWN content height and sticks to the TOP of the row instead of
   centering, even though align-items:center still centers content
   *within* that shrunk box. Net effect: rows with a taller neighbour
   cell (e.g. a Flag chip) show a misaligned dash/button up near the
   row's top border. Fix: keep the <td> a plain table-cell (so
   vertical-align:middle from .tbl td applies normally) and put
   .act-row on an inner <div> instead — see irm-04/prc-01/prc-03/
   prc-05 for the pattern: <td class="act-row-cell"><div
   class="act-row">...</div></td>. */
.act-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tbl td.act-row-cell{padding-top:9px;padding-bottom:9px}
.detail-actions-bar{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
.detail-actions-bar .daf-note{margin-right:auto;font-size:12.5px;color:var(--muted)}
/* v4.8 (revisi Gambar 7): baris aksi yang menempel di dasar modal —
   dipakai pada layar cetak label (QR Batch, QR Pallet, label QC) yang
   isinya bisa panjang, supaya tombol Cetak/Tutup selalu terlihat tanpa
   perlu menggulung sampai bawah. */
.detail-actions-bar.sticky-actions{position:sticky;bottom:0;background:var(--card);margin-top:14px;padding:12px 0 2px;z-index:2}
@media print { .detail-actions-bar.sticky-actions{display:none!important} }

/* ---------- layar DETAIL di halaman desktop (v7.11) ----------
   Pola .mst-back / .mst-title / .mst-info-card / .mst-kv-grid selama ini
   hanya punya gaya di bawah body.mob-scan, jadi halaman desktop yang
   memakai pola yang sama (Detail Retur Tembakau, Detail Penerimaan
   Tembakau) tampil sebagai teks polos tanpa kartu — persis keluhan
   client. Aturan di bawah ini dasarnya; aturan mob-scan yang lebih
   spesifik tetap menang di layar mobile. */
.mst-back{display:inline-block;font-size:13px;font-weight:600;color:var(--accent);margin-bottom:8px;text-decoration:none}
.mst-back:hover{text-decoration:underline}
.mst-title{font-size:22px;font-weight:800;color:var(--ink);margin:0 0 12px;letter-spacing:-.01em}
.mst-info-card{padding:0;overflow:hidden}
.mst-info-card > .chip{margin:14px 18px 0}
.mst-kv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:10px;padding:12px 18px 16px}
.mst-kv{border:1px solid var(--line);border-radius:var(--r);padding:9px 12px;min-width:0}
.mst-kv-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.mst-kv-val{font-size:14px;font-weight:700;margin-top:3px;word-break:break-word;line-height:1.4}
.mst-kv-val .chip{font-weight:600}
/* v7.15.1: blok keterangan yang dipakai DI DALAM modal tidak butuh
   padding kartu — modalnya sudah punya. Sebelumnya layar-layar ini
   memakai .kpi/.kpi-l/.kpi-v yang tidak pernah punya CSS sama sekali,
   jadi keterangannya tampil sebagai teks polos tanpa bingkai. */
.mst-kv-grid.kv-flat{padding:0;margin-bottom:12px}
.mst-info-card .detail-actions-bar{margin:0;padding:14px 18px;border-top:1px solid var(--line-soft)}
@media(max-width:620px){.mst-kv-grid{grid-template-columns:1fr 1fr}}

/* ---------- v2.0 module switcher (sidebar foot) ---------- */
.sb-mod{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:2px}
.sb-mod:hover{background:var(--line-soft);text-decoration:none}
.sb-mod.active{background:var(--accent-soft);color:var(--accent-dark)}
.sb-mod .mdot{width:8px;height:8px;min-width:8px;border-radius:50%}

/* ============================================================
   v2.2 — card-level layman help ("?" per kartu, Fungsi + Metode)
   + baseline vertical rhythm so every page keeps a tidy 14px beat
   ============================================================ */
#jal-page>*+*{margin-top:14px}
.hlp{width:21px;height:21px;border-radius:50%;border:1px solid var(--accent-border);background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:11px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;flex:none;font-style:normal;user-select:none}
.hlp:hover,.hlp.pin{background:var(--accent);color:#fff;border-color:var(--accent)}
.card-h .hlp{margin-left:auto}
.card-h [style*="margin-left:auto"]~.hlp,.card-h .flex~.hlp{margin-left:8px}
#jal-hlp-pop{position:fixed;z-index:96;width:316px;max-width:calc(100vw - 24px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 38px rgba(15,23,42,.16);padding:13px 15px;font-size:12.2px;line-height:1.6;color:var(--ink-2);display:none}
#jal-hlp-pop.show{display:block}
#jal-hlp-pop .ht{font-size:9.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--accent);margin:0 0 3px;display:flex;align-items:center;gap:6px}
#jal-hlp-pop .ht .jic{font-size:12px}
#jal-hlp-pop .hb{margin:0 0 10px}
#jal-hlp-pop .hb:last-child{margin-bottom:0}

/* ============================================================
   v3.1 — Mobile Scan surface (IA: "Mobile Scan" page type, e.g.
   IRM-07/08, REQ-03/04, TRF-02, IFG-04, OFG-04/06, OPN-03).
   Same codebase/route, toggled via body.mob-scan (set by
   Sh.boot when page.mobile === true) — compact width, larger
   touch targets, bigger tap-friendly inputs/buttons, no dense
   multi-column tables (stack to cards instead).
   ============================================================ */
body.mob-scan{background:var(--bg-2, #f3f4f6)}
body.mob-scan #jal-page{max-width:480px;margin:0 auto;padding-left:10px;padding-right:10px}
body.mob-scan .chip-blue{background:var(--accent-soft);color:var(--accent-dark);font-weight:800}
body.mob-scan .btn,body.mob-scan button{min-height:46px;font-size:14.5px;border-radius:12px}
body.mob-scan .btn-lg,body.mob-scan button.primary{min-height:54px;font-size:16px;font-weight:800}
body.mob-scan #jal-page input:not([type="checkbox"]):not([type="radio"]),body.mob-scan #jal-page select,body.mob-scan #jal-page textarea,
body.mob-scan .m-b input:not([type="checkbox"]):not([type="radio"]),body.mob-scan .m-b select,body.mob-scan .m-b textarea{height:46px;min-height:46px;font-size:15px;border-radius:10px}
body.mob-scan #jal-page textarea,body.mob-scan .m-b textarea{height:auto;min-height:84px}
body.mob-scan .card{border-radius:14px;padding:14px}
body.mob-scan table{font-size:13px}
body.mob-scan .scan-box{border:2px dashed var(--accent-border);border-radius:14px;padding:22px 16px;text-align:center;background:var(--accent-soft);margin-bottom:12px}
body.mob-scan .scan-box .jic{font-size:34px;color:var(--accent)}
body.mob-scan .scan-box input{text-align:center;font-size:18px;font-weight:700;letter-spacing:.5px}
body.mob-scan .mismatch-warn{background:#FEF2F2;border:1px solid #FCA5A5;color:#991B1B;border-radius:10px;padding:10px 12px;font-size:13px;font-weight:600;margin:8px 0}

/* ============================================================
   v3.6 — Mobile Scan Task standard (JalScan / jal-scan.js).
   See SPEC-SCAN-STANDARD.md — implemented once here, reused by every
   scan-type operator page (IRM-07 first).
   ============================================================ */
body.mob-scan .mst-back{display:inline-block;font-size:13px;font-weight:600;color:var(--accent);margin-bottom:6px}
body.mob-scan .mst-title{font-size:19px;font-weight:800;color:#10265c;margin-bottom:2px}
body.mob-scan .mst-breadcrumb{font-size:11.5px;color:var(--muted);margin-bottom:12px}
body.mob-scan .mst-info-card{padding:14px}
body.mob-scan .mst-kv-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:10px}
body.mob-scan .mst-kv-lbl{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px}
body.mob-scan .mst-kv-val{font-size:13.5px;font-weight:700}
body.mob-scan .mst-group{padding:0;overflow:hidden}
body.mob-scan .mst-group-h{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line-soft);font-size:13.5px}
body.mob-scan .mst-search{width:calc(100% - 28px);margin:10px 14px;display:block;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;font-size:13.5px;font-family:inherit;min-height:44px}
body.mob-scan .mst-item{border-top:1px solid var(--line-soft);padding:12px 14px}
body.mob-scan .mst-item.active{background:var(--red-soft)}
body.mob-scan .mst-item-h{display:flex;align-items:center;gap:10px;cursor:pointer;min-height:46px}
body.mob-scan .mst-chevron{color:var(--muted);font-size:12px;width:14px;text-align:center}
body.mob-scan .mst-item-main{flex:1;min-width:0}
body.mob-scan .mst-item-main b{font-size:13.5px}
body.mob-scan .mst-code{margin-left:8px;font-size:11px;color:var(--muted)}
body.mob-scan .mst-subinfo{font-size:11.5px;color:var(--muted);margin-top:3px}
body.mob-scan .mst-units-hint{font-size:11px;color:var(--muted);margin:0 2px 8px}
body.mob-scan .mst-units{margin-top:10px;display:flex;flex-direction:column;gap:8px}
body.mob-scan .mst-unit{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line-soft);border-radius:10px;padding:10px 12px;min-height:46px;touch-action:pan-y;user-select:none;background:#fff}
body.mob-scan .mst-unit-main{display:flex;align-items:center;gap:10px;font-size:12.5px}
body.mob-scan .mst-edge{display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
body.mob-scan .mst-edge-badge{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:99px;font-size:11.5px;font-weight:700;white-space:nowrap;border:1px solid transparent}
body.mob-scan .mst-edge-badge i{font-size:13px}
body.mob-scan .mst-unit.scanned{border-color:var(--green-border);background:var(--green-soft)}
body.mob-scan .mst-edge-badge.done{background:var(--green-strong);color:#fff}
body.mob-scan .mst-edge-badge.todo{background:var(--red-soft);color:var(--red-text);border-color:var(--red-border)}
/* v7.18: z-index disebut TERANG di sini. Bilah kirim melekat di dasar
   layar ponsel, sedangkan panel pilihan-ganda (.msel-p) terbuka ke
   BAWAH kolomnya — di layar pendek keduanya bertemu. Tanpa angka
   yang tegas, bilahnya menang karena urutannya belakangan di DOM,
   dan daftar alasannya tertutup persis saat orang hendak memilih. */
body.mob-scan .mst-submit-bar{position:sticky;bottom:0;z-index:6;padding:12px 0 4px;margin-top:16px;background:linear-gradient(180deg,rgba(243,244,246,0),var(--bg-2,#f3f4f6) 30%);pointer-events:none}

/* Daftar hasil pada MODE SCAN BERULANG (JalScan.scanScreen cfg.berulang).
   Dulu tinggal di <style> lokal CLM-03; dipindah ke sini sejak v7.3
   karena komponennya bersama dan halaman lain boleh memakainya. */
.bk-dots{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.bk-dot{width:26px;height:6px;border-radius:99px;background:var(--line);cursor:pointer;flex:none}
.bk-dot.done{background:var(--green,#16a34a)}
.bk-dot.now{background:var(--accent);height:8px;margin-top:-1px}

.tr-line{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.tr-line:last-child{border-bottom:0}
.tr-line .mono{font-weight:700;white-space:nowrap}
.tr-line .sj{margin-left:auto;font-size:11px;color:var(--muted);text-align:right}
.tr-empty{padding:20px 12px;text-align:center;color:var(--muted);font-size:12.5px}
body.mob-scan .mst-submit-bar .btn{pointer-events:auto}
body.mob-scan .mst-submit-bar .btn[disabled]{background:var(--line);color:var(--muted);border-color:var(--line)}

/* ---------- fake-QR renderer (JalScan.qrGrid) ----------
   v3.7 FIX: these rules used to live in the retired irm-05.html's
   local <style> block and were deleted with it — leaving .qrgrid an
   invisible empty div everywhere it's used (scan viewfinder looked
   like a plain black screen, and the printed-label card in IRM-04's
   result modal had no QR image). Global now, per MV's revision:
   "ketika scan tidak hanya screen hitam tapi ada gambar barcodenya".
   --qrn is set inline by JalScan.qrGrid (grid is N x N). */
.qrgrid{display:grid;grid-template-columns:repeat(var(--qrn,11),9px);grid-auto-rows:9px;gap:1.5px;width:max-content;margin:0 auto 10px;padding:6px;background:#fff;border-radius:6px}
.qrgrid .qrc{background:#f1f5f9;border-radius:1px}
.qrgrid .qrc.on{background:#0f172a}

body.mob-scan .scan-viewport{border-radius:16px;overflow:hidden;background:radial-gradient(ellipse at center,#2a3240 0%,#0b0e14 100%);padding:36px 16px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}
body.mob-scan .scan-frame{position:relative;background:#fff;border-radius:14px;padding:14px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
/* inside the camera viewfinder the QR renders larger, like the camera
   is aiming at a real printed label */
body.mob-scan .scan-frame .qrgrid{margin:0;grid-template-columns:repeat(var(--qrn,11),13px);grid-auto-rows:13px;gap:2px;padding:0;background:transparent}
body.mob-scan .scan-frame .scan-code-label{text-align:center;font-family:var(--mono,monospace);font-weight:700;font-size:11px;letter-spacing:.5px;color:#334155;margin-top:8px}
body.mob-scan .scan-corners{position:absolute;inset:-8px;pointer-events:none}
body.mob-scan .scan-corners:before,body.mob-scan .scan-corners:after{content:'';position:absolute;width:22px;height:22px;border-color:var(--accent)}
body.mob-scan .scan-corners:before{top:0;left:0;border-top:3px solid;border-left:3px solid;border-radius:6px 0 0 0}
body.mob-scan .scan-corners:after{bottom:0;right:0;border-bottom:3px solid;border-right:3px solid;border-radius:0 0 6px 0}
body.mob-scan .scan-frame:before,body.mob-scan .scan-frame:after{content:'';position:absolute;width:22px;height:22px;border-color:var(--accent)}
body.mob-scan .scan-frame:before{top:-8px;right:-8px;border-top:3px solid;border-right:3px solid;border-radius:0 6px 0 0}
body.mob-scan .scan-frame:after{bottom:-8px;left:-8px;border-bottom:3px solid;border-left:3px solid;border-radius:0 0 0 6px}
body.mob-scan .scan-line{position:absolute;left:14px;right:14px;top:14px;height:2px;background:linear-gradient(90deg,transparent,#4ade80,transparent);animation:scanline 2s linear infinite}
@keyframes scanline{0%{top:14px}50%{top:calc(100% - 14px)}100%{top:14px}}
body.mob-scan .scan-caption{margin-top:12px;background:#0f172a;color:#e2e8f0;border-radius:10px;padding:12px 14px;font-size:12.5px;text-align:center;line-height:1.5}
body.mob-scan .scan-manual{margin-top:14px}

/* ============================================================
   v3.1 — reusable in-page tab bar (Sh.tabBar), for List-type IA
   pages that bundle a primary list with secondary monitoring
   data (e.g. PRC-01: Daftar PR + Re-order Point Board).
   ============================================================ */
.jal-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px}
.jal-tab{appearance:none;background:none;border:none;border-bottom:2px solid transparent;padding:9px 4px;margin-right:18px;font-size:13.5px;font-weight:700;color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.jal-tab:hover{color:var(--accent-dark)}
.jal-tab.active{color:var(--accent-dark);border-bottom-color:var(--accent)}
.jal-tab .cnt{background:var(--accent-soft);color:var(--accent-dark);border-radius:999px;font-size:10.5px;font-weight:800;padding:1px 7px;min-width:17px;text-align:center}
.jal-tab.active .cnt{background:var(--accent);color:#fff}
/* v4.6 — select operator yang belum diisi (assign manual) */
select.need-op{border-color:var(--amber, #d97706);background:#fffbeb}

/* ============================================================
   v5.0 (revisi Gambar 1) — tooltip nyata.
   Atribut title bawaan browser muncul telat dan tidak ada sama
   sekali di layar sentuh, sehingga keterangan "i" terasa mati.
   Gelembung ini dipasang ke <body> oleh Sh.initTips() supaya tidak
   terpotong oleh overflow modal, dan tampil seketika saat hover,
   fokus keyboard, maupun ketukan jari.
   ============================================================ */
.jtip{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;background:var(--line-soft);color:var(--muted);
  font-size:11px;font-weight:800;font-style:italic;line-height:1;cursor:help;user-select:none;
  border:1px solid transparent;transition:background .12s,color .12s,border-color .12s}
.jtip:hover,.jtip:focus-visible{background:var(--accent-soft);color:var(--accent-dark);
  border-color:var(--accent);outline:none}
.jtip-bubble{position:fixed;z-index:9999;max-width:300px;background:#0f172a;color:#f1f5f9;
  font-size:12.5px;line-height:1.55;font-weight:500;padding:9px 12px;border-radius:9px;white-space:pre-line;
  box-shadow:0 10px 28px rgba(15,23,42,.28);pointer-events:none;opacity:0;
  transform:translateY(3px);transition:opacity .11s ease,transform .11s ease}
.jtip-bubble.on{opacity:1;transform:none}
.jtip-bubble:after{content:"";position:absolute;top:100%;left:var(--arrow-x,50%);
  margin-left:-6px;border:6px solid transparent;border-top-color:#0f172a}
.jtip-bubble.below:after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#0f172a}

/* ============================================================
   Pilihan berkolom cari (v6.3) — dipakai MST-03 untuk memilih merek
   dan material tiap kategori. Kodenya tidak diketik, hanya dipilih;
   daftarnya disaring sambil mengetik supaya tetap terpakai ketika
   materialnya banyak.
   ============================================================ */
.pc{position:relative}
.pc-btn{width:100%;display:flex;align-items:center;gap:8px;text-align:left;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  padding:8px 11px;font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer}
.pc-btn:hover{border-color:var(--brand)}
.pc.open .pc-btn{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.pc-val{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-val.muted{color:var(--muted)}
.pc-car{color:var(--muted);font-size:11px;flex:none}
.pc-pop{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 4px);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 10px 30px -10px rgba(15,23,42,.35);padding:8px}
.pc-q{width:100%;border:1px solid var(--line);border-radius:var(--r);
  padding:7px 10px;font:inherit;font-size:13px;margin-bottom:6px}
.pc-q:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.pc-list{max-height:246px;overflow-y:auto}
.pc-it{display:flex;flex-direction:column;gap:1px;padding:6px 9px;border-radius:7px;cursor:pointer}
.pc-it.on{background:var(--bg-soft)}
.pc-it.cur .pc-l{font-weight:700}
.pc-it .pc-l{font-family:var(--mono,ui-monospace,monospace);font-size:12.5px}
.pc-it .pc-s{font-size:11.5px;color:var(--muted)}
.pc-kosong{padding:10px 9px;font-size:12px;color:var(--muted)}

/* baris kunci-nilai di layar Detail master (v6.3) */
.mst-drow{display:flex;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line-soft);font-size:13px;align-items:flex-start}
.mst-drow:last-child{border-bottom:0}
.mst-drow .k{min-width:180px;color:var(--muted);flex:none}
.mst-drow .v{flex:1;min-width:0}
@media (max-width:700px){.mst-drow{flex-direction:column;gap:3px}.mst-drow .k{min-width:0}}

/* form spesifikasi BOM per kategori (v6.3) */
.bom-kat{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;margin-bottom:9px}
.bom-kat-h{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.bom-kat-h b{font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.bom-row{display:flex;align-items:center;gap:9px;padding:5px 0;border-bottom:1px dashed var(--line-soft);font-size:12.5px}
.bom-row:last-of-type{border-bottom:0}
.bom-row .mono{flex:none}
.bom-row .bom-nm{flex:1;color:var(--ink-2, var(--muted));min-width:0;overflow:hidden;text-overflow:ellipsis}
.bom-bahaya{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}

/* ============================================================
   v6.4 — Pallet Gudang FG: tabel dua lapis bersama, denah zone ×
   pallet, dan drawer detail pallet. Dipakai MST-06, INV-01, KSL-01
   dan GAB-01 — satu implementasi, bukan empat yang mirip.
   ============================================================ */
.tbl-inner{width:100%;background:var(--card);border-left:1px solid var(--line-soft)}
.tbl-inner th{font-size:10px;letter-spacing:.05em;padding-top:8px;padding-bottom:8px}
.tbl-inner tr:last-child>td{border-bottom:0}
tr.pal-wrap>td{background:var(--bg);padding:0 0 0 26px}
.pal-tw{display:inline-block;width:12px;color:var(--muted);font-size:9px;transition:transform .13s;cursor:pointer}
.pal-tw.on{transform:rotate(90deg)}

/* ---------- denah ---------- */
.fgplan{padding:16px;border-radius:var(--r);background:
   linear-gradient(90deg,rgba(148,163,184,.11) 1px,transparent 1px) 0 0/26px 26px,
   linear-gradient(rgba(148,163,184,.11) 1px,transparent 1px) 0 0/26px 26px,#fbfcfd;
  border:1px solid var(--line-soft)}
.fgplan-top{display:flex;justify-content:flex-end;margin-bottom:14px}
.fgcont-area{border:2.5px solid #b0281f;border-radius:10px;padding:10px 12px 12px;background:#fff;max-width:520px;width:100%}
.fgcont-area .cah{display:flex;align-items:baseline;gap:8px;margin-bottom:9px;flex-wrap:wrap}
.fgcont-area .cah b{font-size:11.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:#b0281f}
.fgcont-area .cah span{font-size:11.5px;color:var(--muted)}
.fgcont-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.fgcont{border:1px solid var(--line);border-radius:8px;padding:9px 10px;text-align:left;background:var(--bg);display:block;width:100%;cursor:pointer;font-family:inherit}
.fgcont:hover{border-color:var(--accent);background:var(--accent-soft)}
.fgcont .cc{font-family:var(--mono);font-size:12px;font-weight:600;display:block;color:var(--ink)}
.fgcont .cn{font-size:11px;color:var(--muted);display:block;margin-top:1px}
.fgcont .cq{font-size:11.5px;font-weight:700;color:var(--ink-2);display:block;margin-top:6px;font-variant-numeric:tabular-nums}
.fgzgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.fgzone{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px;box-shadow:var(--shadow)}
.fgzone.full{border-color:var(--red-border);box-shadow:0 0 0 2px var(--red-soft)}
.fgzone.empty{border-style:dashed;border-color:var(--line);background:#fcfdfe}
.fgzh{display:flex;align-items:center;gap:6px;margin-bottom:8px;padding:0 2px}
.fgzh b{font-size:13px;font-weight:800;letter-spacing:.2px}
.fgzh .zs{margin-left:auto;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:600}
.fgpgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.fgpal{border:1px solid var(--line);border-radius:7px;padding:7px 8px 8px;text-align:left;display:block;width:100%;
  background:var(--line-soft);transition:transform .1s,box-shadow .1s;position:relative;overflow:hidden;cursor:pointer;font-family:inherit}
.fgpal:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(15,23,42,.13)}
.fgpal.sel{outline:2.5px solid var(--accent);outline-offset:1px}
.fgpal.dim{opacity:.22}
.fgpal .pn{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:4px;line-height:1.3}
.fgpal .tag{margin-left:auto;font-size:8.5px;font-weight:800;letter-spacing:.5px;border-radius:3px;padding:0 4px;line-height:1.5}
.fgpal .tag.bal{color:var(--purple);background:var(--purple-soft);border:1px solid #ddccf5;line-height:1.45}
.fgpal .tag.mentok{color:#fff;background:var(--red)}
.fgpal .tag.kunci{color:var(--amber-text);background:var(--amber-soft);border:1px solid var(--amber-border);line-height:1.45}
.fgpal .ps{display:block;font-size:11.5px;font-weight:700;margin-top:3px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fgpal .pq{display:block;font-size:10.5px;margin-top:1px;font-variant-numeric:tabular-nums;font-weight:600;opacity:.85;white-space:nowrap}
.fgpal .track{display:block;height:5px;border-radius:99px;background:rgba(15,23,42,.13);margin-top:7px;overflow:hidden;position:relative}
.fgpal .fill{height:100%;border-radius:99px}
.fgpal .rec{position:absolute;top:-2px;bottom:-2px;width:1.5px;background:rgba(15,23,42,.42)}
.fgpal.b-kosong{background:var(--line-soft);border-color:var(--line)}
.fgpal.b-kosong .ps{color:var(--muted-2);font-weight:600}
.fgpal.b-longgar{background:var(--accent-soft);border-color:var(--accent-border)} .fgpal.b-longgar .ps{color:#1d4ed8} .fgpal.b-longgar .fill{background:#2563eb}
.fgpal.b-hampir{background:var(--amber-soft);border-color:var(--amber-border)} .fgpal.b-hampir .ps{color:var(--amber-text)} .fgpal.b-hampir .fill{background:var(--amber)}
.fgpal.b-rekomendasi{background:var(--green-soft);border-color:var(--green-border)} .fgpal.b-rekomendasi .ps{color:#15803d} .fgpal.b-rekomendasi .fill{background:var(--green)}
.fgpal.b-berlebih{background:var(--red-soft);border-color:var(--red-border)} .fgpal.b-berlebih .ps{color:var(--red-text)} .fgpal.b-berlebih .fill{background:var(--red)}
.fgpal.is-mentok{background:repeating-linear-gradient(135deg,#fdeef0,#fdeef0 6px,#fbdfe3 6px,#fbdfe3 12px);border-color:var(--red)}
.fglegend{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.fglegend .lg{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:99px;
  padding:5px 12px;font-size:12px;font-weight:600;color:var(--ink-2);background:#fff;cursor:pointer;font-family:inherit}
.fglegend .lg:hover{background:var(--line-soft)}
.fglegend .lg[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.fglegend .lg .n{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:700}
.fgdot{width:8px;height:8px;border-radius:2px;flex:none;display:inline-block}

/* ---------- drawer detail pallet ---------- */
.fgscrim{position:fixed;inset:0;background:rgba(15,23,42,.34);z-index:80;opacity:0;transition:opacity .18s}
.fgscrim.on{opacity:1}
.fgdrawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,94vw);background:var(--card);z-index:81;
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;
  transition:transform .22s cubic-bezier(.4,0,.2,1),visibility 0s linear .22s}
.fgdrawer.on{transform:none;visibility:visible;transition:transform .22s cubic-bezier(.4,0,.2,1),visibility 0s linear 0s}
.fgdrawer .dh{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:10px}
.fgdrawer .dt{font-size:16px;font-weight:800;letter-spacing:-.2px;font-family:var(--mono)}
.fgdrawer .dsub{font-size:12px;color:var(--muted);margin-top:2px}
.fgdrawer .dx{margin-left:auto;width:30px;height:30px;border-radius:8px;color:var(--muted);font-size:17px;flex:none;
  display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer}
.fgdrawer .dx:hover{background:var(--line-soft);color:var(--ink)}
.fgdrawer .db{flex:1;overflow-y:auto;padding:16px 18px 30px}
.fggauge{border:1px solid var(--line);border-radius:10px;padding:13px 14px;margin-bottom:14px}
.fggauge .gnum{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.fggauge .gnum b{font-size:27px;font-weight:800;letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1}
.fggauge .gnum span{font-size:12.5px;color:var(--muted);font-weight:600}
.fggauge .gtrack{height:9px;border-radius:99px;background:var(--line-soft);margin:11px 0 7px;position:relative}
.fggauge .gfill{height:100%;border-radius:99px}
.fggauge .gmark{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink-2);border-radius:2px}
.fggauge .gscale{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
@media(max-width:1080px){.fgzgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.fgzgrid{grid-template-columns:1fr}.fgcont-row{grid-template-columns:1fr}}
/* Isi drawer memakai kelas mst-kv yang sama dengan layar scan, tetapi
   kelas itu hanya bergaya di dalam body.mob-scan. Di halaman desktop
   drawer tetap perlu tata letak dua kolomnya. */
.fgdrawer .mst-kv-grid{display:grid;grid-template-columns:118px 1fr;gap:2px 12px;margin:12px 0 6px}
.fgdrawer .mst-kv{display:contents}
.fgdrawer .mst-kv-lbl{font-size:12.5px;color:var(--muted);padding:6px 0}
.fgdrawer .mst-kv-val{font-size:13px;font-weight:600;color:var(--ink);padding:6px 0}
.fgdrawer .banner{margin:0 0 10px}
.fgdrawer .card{margin:0}
@media(max-width:560px){.fgdrawer .mst-kv-grid{grid-template-columns:1fr}.fgdrawer .mst-kv-lbl{padding-bottom:0}}

/* ============================================================
   v6.5 — Permukaan Tugas Operator (satu bentuk untuk semua).
   Revisi client 7 Sep 2026:
     "tampilan mobilenya bug" (GAB-02 / KSL-02) dan
     "Flow pengambilan samakan, bagi tugas per rack".

   Sebab bug-nya: .pwl-card dan .fg-item HANYA pernah ditulis di blok
   <style> lokal ifg-04/ofg-04/ofg-06. Halaman gab-02 dan ksl-02
   memakai markup yang sama tanpa CSS-nya, jadi barisnya jatuh ke
   tata letak blok biasa dan tombolnya menumpuk. Kelas-kelas itu
   sekarang global — dipakai halaman mana pun tanpa menyalin CSS.

   Tambahan v6.5: kepala tugas yang menonjolkan NAMA PRODUK dan
   REKOMENDASI RACK (bukan nomor tugas), dan gerbang lokasi —
   daftar unit baru muncul setelah zone + pallet/container discan.
   ============================================================ */
.pwl-card{display:flex;align-items:center;gap:12px;padding:14px;margin-bottom:10px;cursor:pointer}
.pwl-card .pwl-main{flex:1;min-width:0}
.pwl-card .pwl-id{font-weight:700;font-size:13.5px}
.pwl-card .pwl-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.pwl-card .pwl-arrow{color:var(--muted);font-size:16px;flex-shrink:0}
.fg-item{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line-soft);border-radius:12px;margin-bottom:10px;background:var(--card)}
.fg-item .fi-main{flex:1;min-width:0}
.fg-item .fi-t{font-weight:700;font-size:13px;overflow-wrap:anywhere}
.fg-item .fi-s{font-size:11.5px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.fg-item .btn,.fg-item .chip{flex-shrink:0}
.mismatch-box{margin:10px 0;padding:10px 12px;border-radius:10px;background:var(--amber-soft);color:var(--amber-text);font-size:12.5px}
.mismatch-box .btn{margin-top:8px}

/* ---------- kartu tugas per rack ----------
   Yang dibaca operator lebih dulu adalah NAMA PRODUK dan RACK
   tujuannya; nomor tugas turun jadi baris kecil di bawah. */
.rt-card{display:block;padding:0;margin-bottom:10px;cursor:pointer;overflow:hidden}
.rt-top{display:flex;align-items:flex-start;gap:10px;padding:13px 14px 0}
.rt-prod{flex:1;min-width:0;font-size:15.5px;font-weight:800;line-height:1.25;color:var(--ink);overflow-wrap:anywhere}
.rt-qty{flex-shrink:0}
.rt-dest{display:flex;align-items:center;gap:8px;margin:9px 14px 0;padding:9px 11px;border-radius:10px;background:var(--accent-soft);border:1px solid var(--accent-border)}
.rt-dest .rt-arrow{font-size:14px;color:var(--accent-dark);flex-shrink:0}
.rt-dest .rt-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.3px;color:var(--accent-dark);opacity:.85}
.rt-dest .rt-code{font-size:15px;font-weight:800;color:var(--accent-dark);font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);letter-spacing:-.2px}
.rt-dest .rt-note{font-size:11px;color:var(--accent-dark);opacity:.8;margin-top:1px}
.rt-foot{display:flex;align-items:center;gap:8px;padding:10px 14px 13px;font-size:11px;color:var(--muted)}
.rt-foot .rt-ref{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- kepala layar detail tugas ---------- */
body.mob-scan .mst-headline{font-size:22px;font-weight:800;line-height:1.2;letter-spacing:-.4px;color:#10265c;margin:2px 0 0;text-wrap:balance}
body.mob-scan .mst-headnote{display:flex;align-items:center;gap:9px;margin:10px 0 6px;padding:11px 13px;border-radius:12px;background:var(--accent-soft);border:1px solid var(--accent-border)}
body.mob-scan .mst-headnote .hn-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.3px;color:var(--accent-dark);opacity:.85}
body.mob-scan .mst-headnote .hn-code{font-size:19px;font-weight:800;color:var(--accent-dark);font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);letter-spacing:-.4px;line-height:1.15;overflow-wrap:anywhere}
body.mob-scan .mst-headnote .hn-note{font-size:11.5px;color:var(--accent-dark);opacity:.85;margin-top:2px}
body.mob-scan .mst-taskref{font-size:11px;color:var(--muted);margin-bottom:12px;overflow-wrap:anywhere}
body.mob-scan .mst-kv-val{overflow-wrap:anywhere}

/* ---------- gerbang lokasi ----------
   Daftar unit sengaja disembunyikan sampai lokasinya discan: itulah
   yang membuat operator berdiri di rack yang benar sebelum memegang
   barang, dan itu urutan yang diminta client. */
body.mob-scan .mst-gate{padding:0;overflow:hidden;margin-bottom:12px}
body.mob-scan .gt-h{padding:12px 14px;border-bottom:1px solid var(--line-soft);font-size:13.5px;font-weight:700}
body.mob-scan .gt-step{display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid var(--line-soft)}
body.mob-scan .gt-n{width:24px;height:24px;border-radius:99px;background:var(--line-soft);color:var(--muted);font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
body.mob-scan .gt-step.done .gt-n{background:var(--green-strong);color:#fff}
body.mob-scan .gt-step.now .gt-n{background:var(--accent);color:#fff}
body.mob-scan .gt-main{flex:1;min-width:0}
body.mob-scan .gt-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted)}
body.mob-scan .gt-code{font-size:14px;font-weight:800;font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);overflow-wrap:anywhere}
body.mob-scan .gt-step.done .gt-code{color:var(--green-text)}
body.mob-scan .gt-p{padding:13px 14px}
body.mob-scan .gt-p .gt-hint{font-size:11.5px;color:var(--muted);margin-top:9px;text-align:center}
body.mob-scan .mst-locbar{display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:11px;background:var(--green-soft);border:1px solid var(--green-border);color:var(--green-text);font-size:12.5px;font-weight:700;margin-bottom:12px}
body.mob-scan .mst-locbar .lb-code{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);overflow-wrap:anywhere}
body.mob-scan .mst-locbar .lb-sp{flex:1}
body.mob-scan .mst-locbar .btn{min-height:34px;padding:5px 11px;font-size:12px;flex-shrink:0}

/* ---------- pagination tabel + checkbox besar (GAB-01) ---------- */
.pg-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.pg-bar .pg-sp{flex:1}
.pg-bar .btn{min-height:34px;padding:5px 12px}
/* Spesifisitas sengaja dinaikkan: #jal-page .tbl td > input{width:100%}
   di atas memakai ID, jadi checkbox di dalam tabel akan ikut melar
   mengikuti lebar kolom kalau selektornya tidak setara. */
#jal-page .tbl td > input[type="checkbox"].pick-box,
.m-b .tbl td > input[type="checkbox"].pick-box,
input[type="checkbox"].pick-box{width:20px;height:20px;min-width:20px;accent-color:var(--accent);cursor:pointer;margin:0}
.tbl td.pick-cell{width:46px;text-align:center;vertical-align:middle}

/* ============================================================
   v6.5 — LAYAR SEMPIT (akar masalah "tampilan mobilenya bug").

   Sidebar 272px tidak pernah punya breakpoint, jadi di layar 390px ia
   tetap terpasang dan isi halaman terjepit tinggal 94px — dokumennya
   melebar sampai 590px dan semuanya menumpuk. Itu yang terlihat di
   layar konsolidasi dan penggabungan yang dilaporkan client.

   Di bawah 900px sidebar berubah jadi laci geser yang dibuka lewat
   tombol menu di topbar; di atas 900px tidak ada yang berubah sama
   sekali dari tampilan lama.
   ============================================================ */
.jic-menu{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E")}
.tb-menu{display:none;background:none;border:1px solid var(--line);border-radius:9px;width:38px;height:38px;align-items:center;justify-content:center;color:var(--ink-2);font-size:17px;flex:none}
.nav-scrim{display:none}
@media(max-width:900px){
  .tb-menu{display:flex}
  .sidebar{position:fixed;top:0;left:0;z-index:60;transform:translateX(-100%);transition:transform .18s ease;box-shadow:0 12px 40px rgba(15,23,42,.22)}
  body.nav-open .sidebar{transform:translateX(0)}
  .nav-scrim{display:block;position:fixed;inset:0;background:rgba(15,23,42,.45);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:55}
  body.nav-open .nav-scrim{opacity:1;pointer-events:auto}
  .main{width:100%;min-width:0}
  .content{padding:14px 12px 80px}
  .topbar{padding:0 12px;gap:9px}
  .topbar .tb-plant{display:none}
  .tb-right{gap:10px}
  .page-head h1{font-size:20px}
  /* Tabel lebar tetap boleh digulir DI DALAM kotaknya sendiri —
     badannya sendiri tidak pernah menggeser halaman ke samping. */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .kpi-row{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .grp-bar{flex-wrap:wrap}
  .grp-bar select,.grp-bar input{max-width:100%!important}
  /* Judul kartu sering membawa deretan chip ringkasan (IFG-01, OPN-01).
     Tanpa pembungkusan, deretan itulah yang mendorong halaman ke
     samping di HP. */
  .card-h{flex-wrap:wrap;row-gap:7px}
  .card-h .hlp{margin-left:0}
  .card-h .right{margin-left:0;flex-wrap:wrap}
  .detail-actions-bar{flex-wrap:wrap;row-gap:8px}
  .page-actions{flex-wrap:wrap}
  .seg{flex-wrap:wrap}
  .act-row{flex-wrap:wrap}
  /* Baris cari & saring: label + kontrolnya boleh turun baris, dan
     kontrolnya tidak lagi memaksa lebar minimum 130px. */
  .sfb-inline{flex-wrap:wrap}
  .sfb-inline select,.sfb-inline input{min-width:0;flex:1 1 130px}
  #jal-page .search-filter-bar input[type="text"],
  .m-b .search-filter-bar input[type="text"]{flex:1 1 100%;max-width:100%;min-width:0}
}
@media(max-width:560px){
  .sidebar{width:min(86vw,var(--sidebar-w));min-width:0}
  .page-head{gap:10px}
  .card{padding:14px}
  .mst-kv-grid,body.mob-scan .mst-kv-grid{grid-template-columns:1fr 1fr}
  .rt-top{flex-wrap:wrap}
  .rt-qty{order:3}
}
/* Halaman Mobile Scan memang dipakai di HP: laci navigasinya sama,
   tapi kolom isinya dipusatkan dan tidak pernah lebih lebar dari layar. */
body.mob-scan #jal-page{max-width:480px;width:100%}

/* Baris unit di layar scan: kode di baris pertama, keterangan panjang
   (nama produk, batch, tujuan) turun ke baris kedua. Tanpa min-width:0
   dan pembungkusan teks, keterangan panjang mendorong tombol Scan ke
   luar layar — itu yang terlihat menumpuk di HP. */
body.mob-scan .mst-unit{align-items:flex-start;gap:8px}
body.mob-scan .mst-unit-main{flex:1 1 auto;min-width:0;flex-wrap:wrap}
body.mob-scan .mst-unit-main.stack{display:block}
body.mob-scan .mst-unit-main .mu-t{font-size:12.5px;font-weight:700;overflow-wrap:anywhere}
body.mob-scan .mst-unit-main .mu-s{font-size:11px;color:var(--muted);margin-top:3px;overflow-wrap:anywhere;line-height:1.35}
body.mob-scan .mst-unit-main .chip{white-space:normal;overflow-wrap:anywhere;min-width:0}
body.mob-scan .mst-unit .mst-edge{align-self:center}

/* ============================================================
   v6.5b — Aksi baris ringkas + cetak label lokasi.
   Revisi client: "harusnya ada print label di master data zone ini,
   bisa print QR untuk zone dan setiap palletnya, sediakan edit juga,
   buttonnya actionnya tolong compactkan".

   Tombol teks merah selebar kolom diganti tombol ikon 30px: yang
   dibaca mata lebih dulu jadi isi barisnya, bukan deretan tombol
   "Nonaktifkan" yang berulang di tiap baris.
   ============================================================ */
.jic-edit{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E")}
.act-icons{display:inline-flex;align-items:center;gap:5px;justify-content:flex-end}
.act-ico{width:30px;height:30px;min-height:0;padding:0;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;font-size:13.5px;line-height:1;transition:background .12s,border-color .12s,color .12s}
.act-ico:hover{background:var(--line-soft);color:var(--ink)}
.act-ico:focus-visible{outline:2px solid var(--accent-border);outline-offset:1px}
.act-ico.ico-danger{color:var(--red-text);border-color:var(--red-border)}
.act-ico.ico-danger:hover{background:var(--red-soft)}
.act-ico.ico-good{color:var(--green-text);border-color:var(--green-border)}
.act-ico.ico-good:hover{background:var(--green-soft)}
.act-ico.ico-accent{color:var(--accent);border-color:var(--accent-border)}
.act-ico.ico-accent:hover{background:var(--accent-soft)}
.act-ico[disabled]{opacity:.38;cursor:not-allowed}
.act-row-cell.compact{white-space:nowrap;width:1%}

/* ---------- progres opname per zone (v7.11) ----------
   Daftar tugas hitung bisa berisi puluhan area; datar ia tidak terbaca.
   Dikelompokkan per zone, yang dibuka hanya yang sedang dikerjakan. */
.opz-list{padding:0 18px 4px}
.opz-grp{border:1px solid var(--line-soft);border-radius:var(--r);margin-bottom:8px;overflow:hidden}
.opz-grp.on{border-color:var(--line)}
.opz-h{display:flex;align-items:center;gap:10px;padding:10px 13px;cursor:pointer;background:var(--bg-soft);font-size:13px}
.opz-h:hover{background:var(--accent-soft)}
.opz-h .chev{color:var(--muted);width:12px}
.opz-h .hint{color:var(--muted);font-size:11.5px}
.opz-h .chip{margin-left:auto}
.opz-b{padding:4px 0}
.opz-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 13px;border-top:1px dashed var(--line-soft);font-size:12.5px}
.opz-row .opz-id{min-width:132px}
.opz-row .opz-scope{min-width:150px;flex:1}
.opz-row .prog-wrap{width:120px;height:6px;border-radius:99px;background:var(--line-soft);overflow:hidden;display:inline-block}
.opz-row .prog-fill{display:block;height:100%;background:var(--green-text);border-radius:99px}
.opz-row .opz-n{min-width:56px}
.opz-row .opz-petugas{min-width:150px;display:flex;align-items:center;gap:6px}
.opz-row .opz-edit{display:flex;align-items:center;gap:6px;min-width:260px}
.opz-row .opz-edit select{margin:0;min-width:130px}
@media(max-width:700px){.opz-row .opz-scope{min-width:120px}.opz-row .prog-wrap{width:70px}}

/* ---------- centang konfirmasi berat (v7.11) ----------
   Dipakai sebelum tindakan yang tidak bisa dibatalkan (write-off stok).
   Ukurannya sengaja setara tombolnya: kalau centangnya kecil, ia terbaca
   sebagai formalitas, padahal justru di situ keputusannya diambil. */
.konf-centang{display:flex;gap:11px;align-items:center;margin-top:12px;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg-soft);cursor:pointer;
  font-size:13.5px;line-height:1.45}
.konf-centang:hover{border-color:var(--accent-border)}
.konf-centang input[type="checkbox"]{width:20px;height:20px;flex:none;margin:0;cursor:pointer;accent-color:var(--accent)}
.konf-centang span{flex:1}

/* ---------- bagi petugas (Sh.bagiPetugas, v7.11) ----------
   Satu baris = satu petugas + jumlah yang ia kerjakan. Kolomnya dikunci
   lebarnya supaya angka tetap sejajar saat barisnya bertambah. */
.bp-head{display:grid;grid-template-columns:minmax(0,1fr) 108px 54px 34px;gap:9px;
  font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:var(--muted);padding:0 2px 6px}
.bp-head span:nth-child(2){grid-column:2 / span 2}
.bp-row{display:grid;grid-template-columns:minmax(0,1fr) 108px 54px 34px;gap:9px;
  align-items:center;margin-bottom:8px}
.bp-row select,.bp-row input{margin:0}
.bp-row .bp-unit{font-size:12px;color:var(--muted)}
.bp-row .bp-sp{display:block}
.bp-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}

/* ---------- bagi petugas PER MATERIAL (v7.13, revisi client) ----------
   "jadi ada nama materialnya di kolom kiri lalu pilih petugas, dan di
   kanan bisa isi QTY, bisa tambah petugas di setiap materialnya."
   Satu blok = satu material. Kiri identitas materialnya, kanan daftar
   petugas beserta jumlah yang ia kerjakan.

   v7.14 (revisi client): modalnya dilebarkan (lihat opts.wide di
   Sh.bagiPetugas), tombol hapus petugas memakai gaya danger, dan
   diberi garis pemisah tipis — antara kolom material dan kolom
   petugas, serta antar baris petugas — supaya batas tiap bagian
   terbaca saat satu material dipegang beberapa orang.

   v7.15.1 (bug dilaporkan client "assignment masih seperti ini apakah
   ini karena cache?"): BUKAN cache. Komentar di atas dulu ditutup
   tepat sebelum paragraf v7.14, sehingga paragraf itu terbaca sebagai
   CSS mentah dan penafsir membuang aturan berikutnya — yaitu .bp-mat
   — sebagai bagian dari sampah tersebut. Akibatnya bloknya kehilangan
   display:grid dan jatuh jadi susunan bertumpuk, sementara aturan
   sesudahnya (garis pemisah .bp-m-l) tetap hidup. Itulah sebabnya
   garis pemisahnya terlihat tapi kolomnya tidak.

   CATATAN: jangan pernah menulis tanda penutup komentar di dalam
   badan komentar — penafsir CSS menutupnya di situ juga. */
.bp-mat{display:grid;grid-template-columns:minmax(200px,290px) minmax(0,1fr);gap:0;
  border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;background:var(--card)}
.bp-mat:last-of-type{margin-bottom:4px}
.bp-mat .bp-m-l{min-width:0;display:flex;flex-direction:column;gap:3px;
  padding:13px 16px 13px 15px;border-right:1px solid var(--line-soft)}
.bp-mat .bp-m-l b{font-size:13.5px;line-height:1.3;word-break:break-word}
.bp-mat .bp-m-l .sub{font-size:11px;color:var(--muted);font-family:var(--mono,monospace);word-break:break-all}
.bp-mat .bp-m-l .tot{font-size:12px;color:var(--ink-2);margin-top:4px;font-variant-numeric:tabular-nums}
.bp-mat .bp-m-r{min-width:0;padding:13px 15px 13px 16px}
.bp-mat .bp-row{grid-template-columns:minmax(0,1fr) 120px 62px 34px;margin-bottom:8px}
.bp-mat .bp-row + .bp-row{border-top:1px solid var(--line-soft);padding-top:8px}
.bp-mat .bp-head{grid-template-columns:minmax(0,1fr) 120px 62px 34px;padding-bottom:6px}
.bp-mat .bp-foot{margin-top:3px}
.bp-mat.bp-kurang{border-color:var(--amber-border)}
@media (max-width:620px){
  .bp-mat{grid-template-columns:minmax(0,1fr)}
  .bp-mat .bp-m-l{border-right:none;border-bottom:1px solid var(--line-soft);padding-bottom:10px}
  .bp-mat .bp-m-r{padding-top:10px}
}

/* ---------- pilihan berganda: dropdown multi-select (v7.15) ----------
   v7.14 memakai deretan chip. Revisi client v7.15: "alasan itu pakai
   multiple dropdown saja jangan chip, tolong berlakukan untuk semuanya
   yang ada alasan pakai multiple select dropdown."

   Bentuknya mengikuti input teks biasa (tinggi, radius, dan border yang
   sama) supaya sebaris dengan isian lain di formulir, lalu membuka
   panel centang di bawahnya. Tinggi baris 40px — tetap enak disentuh
   di layar ponsel. */
.msel{position:relative}
.msel-t{width:100%;display:flex;align-items:center;gap:8px;text-align:left;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:9px;
  padding:9px 12px;font:inherit;font-size:13px;min-height:40px}
.msel-t:hover{border-color:var(--ink-3,#9aa3af)}
.msel.open .msel-t{border-color:var(--accent-border);box-shadow:0 0 0 3px var(--accent-soft)}
.msel-v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msel-v.kosong{color:var(--muted)}
.msel-n{flex:none}
.msel-c{flex:none;width:0;height:0;border-left:4.5px solid transparent;border-right:4.5px solid transparent;
  border-top:5px solid var(--muted);transition:transform .14s}
.msel.open .msel-c{transform:rotate(180deg)}
.msel-p{display:none;position:absolute;z-index:45;left:0;right:0;top:calc(100% + 5px);
  background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 26px rgba(15,23,42,.13);
  padding:5px;max-height:240px;overflow:auto}
.msel.open .msel-p{display:block}
/* Dipasang Sh.wireMulti selama sebuah panel pilihan-ganda terbuka,
   supaya panelnya berdiri di atas bilah kirim yang melekat di dasar
   layar ponsel. Dilepas begitu panelnya tertutup. */
.card.msel-host{position:relative;z-index:20}
.msel-o{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;cursor:pointer;
  font-size:13px;color:var(--ink-2);user-select:none}
.msel-o:hover{background:var(--bg-soft)}
.msel-o input{width:15px;height:15px;flex:none;accent-color:var(--accent);margin:0}
.msel-o.on{color:var(--ink);font-weight:600}
.msel-kosong{padding:10px;font-size:12.5px;color:var(--muted);text-align:center}

/* ---------- pemilih tumpukan lewat kode QR (v7.14) ----------
   Dipakai admin di layar web, yang memang tidak punya kamera: cari,
   lalu pilih tumpukannya dari daftar. */
.qr-list{border:1px solid var(--line);border-radius:var(--r);max-height:280px;overflow-y:auto;background:var(--card)}
.qr-item{display:flex;align-items:center;gap:12px;padding:11px 13px;border-bottom:1px solid var(--line-soft);cursor:pointer}
.qr-item:last-child{border-bottom:none}
.qr-item:hover{background:#fafbff}
.qr-item.sel{background:var(--accent-soft)}
.qr-item .m{flex:1;min-width:0}
.qr-item .k{font-family:var(--mono,monospace);font-size:12px;font-weight:700}
.qr-item .s{font-size:11.5px;color:var(--muted);margin-top:1px}

/* ---------- label lokasi (pratinjau di layar & hasil cetak) ---------- */
.lbl-sheet{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lbl-sheet.one{grid-template-columns:1fr;max-width:250px;margin:0 auto}
.lbl-card{border:1.5px solid #0f172a;border-radius:8px;padding:11px 9px 8px;text-align:center;background:#fff;break-inside:avoid;page-break-inside:avoid}
.lbl-card .lbl-code{font-family:var(--mono);font-size:17px;font-weight:800;letter-spacing:-.3px;color:#0f172a;margin-top:5px;word-break:break-all}
.lbl-card .lbl-name{font-size:10.5px;color:#334155;margin-top:2px;line-height:1.3}
.lbl-card .lbl-meta{font-size:9px;color:#64748b;margin-top:4px;border-top:1px dashed #cbd5e1;padding-top:4px;line-height:1.35}
.lbl-card .qrgrid{grid-template-columns:repeat(var(--qrn,11),6px);grid-auto-rows:6px;gap:1px;margin:0 auto;padding:3px}
.lbl-sheet.one .lbl-card .qrgrid{grid-template-columns:repeat(var(--qrn,11),10px);grid-auto-rows:10px;gap:1.5px}
.lbl-hint{font-size:12px;color:var(--muted);margin:10px 0 0;text-align:center}

/* Area cetak: hidup hanya di kertas, dan saat mencetak ia satu-satunya
   yang tampil — sisa aplikasi disembunyikan seluruhnya. */
#jal-print{display:none;background:#fff;padding:4mm}
#jal-print .prt-h{font-size:12px;color:#334155;margin-bottom:10px;display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #cbd5e1;padding-bottom:6px}
/* Sel QR yang mati dibuat transparan di kertas: yang perlu tercetak
   hanya sel yang hitam, sisanya hanya menghabiskan tinta. */
#jal-print .qrgrid,#jal-print .qrgrid .qrc{background:transparent}
#jal-print .qrgrid .qrc.on{background:#000}
@media print{
  /* Di-scope ke body.print-label: halaman lain punya lembar cetaknya
     sendiri (Surat Jalan di OFG-01) yang letaknya DI DALAM .app. Kalau
     aturan ini tidak di-scope, ia ikut menyembunyikan lembar itu dan
     yang tercetak jadi halaman kosong. */
  body.print-label>*{display:none!important}
  body.print-label>#jal-print{display:block!important}
  body{background:#fff}
  #jal-print .lbl-sheet{grid-template-columns:repeat(3,1fr);gap:6mm}
  @page{margin:10mm}
}

/* Keadaan ketiga pada baris unit: TIDAK DITEMUKAN. Terhitung selesai
   untuk membuka Submit, tapi tidak boleh tertukar dengan barang yang
   benar-benar diambil — karena itu warnanya merah, bukan hijau. */
body.mob-scan .mst-unit.gagal{border-color:var(--red-border);background:var(--red-soft)}
body.mob-scan .mst-unit.gagal .mu-t{text-decoration:line-through;opacity:.7}
body.mob-scan .mst-edge-badge.gagal{background:var(--red);color:#fff;border-color:var(--red)}

/* Kelompok tugas per plan / per order di layar operator.
   Client: "tugas picking saya juga ingin di gabungkan per plan" dan
   "tugas operator juga digabung per order penggabungan". Kartu rack
   tetap satu rack satu kartu — hanya berkumpul di bawah judul
   perintahnya, supaya operator tahu ketiga kartu ini satu pekerjaan. */
body.mob-scan .plan-grp{margin-bottom:18px}
body.mob-scan .plan-h{display:flex;align-items:center;gap:10px;padding:8px 2px 7px;margin-bottom:10px;border-bottom:2px solid var(--accent-border)}
body.mob-scan .plan-h .ph-main{flex:1;min-width:0}
body.mob-scan .plan-h .ph-id{font-size:13px;font-weight:800;font-family:var(--mono);letter-spacing:-.2px;color:var(--accent-dark);overflow-wrap:anywhere}
body.mob-scan .plan-h .ph-sub{font-size:11px;color:var(--muted);margin-top:1px;overflow-wrap:anywhere}
body.mob-scan .plan-grp .rt-card:last-child{margin-bottom:0}

/* ============================================================
   v6.8 — detail order pindah ke halamannya sendiri (OFG-01A).

   Gaya blok detail dulu tinggal di dalam <style> OFG-01. Sekarang
   dipakai dua halaman, jadi tempatnya di sini supaya tidak berdua-dua
   dan berbeda diam-diam.
   ============================================================ */
.det-h{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin:2px 0 8px}
.det-blok{margin-bottom:16px}
.task-line{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line-soft);font-size:12.5px}
.task-line:last-child{border-bottom:none}
.stg-line{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line-soft);font-size:12.5px}
.stg-line:last-child{border-bottom:none}
/* satu blok tugas per petugas — tertutup secara bawaan */
.tsk{border:1px solid var(--line-soft);border-radius:11px;margin-bottom:8px;background:var(--card);overflow:hidden}
.tsk-h{display:flex;align-items:center;gap:10px;padding:10px 13px;cursor:pointer;font-size:12.5px}
.tsk-h .tw{color:var(--muted);font-size:11px;width:12px;flex:none}
.tsk-h .nm{font-weight:700;min-width:118px}
.tsk-h .rk{color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tsk-b{border-top:1px dashed var(--line-soft);padding:4px 13px 8px}
.prog-wrap{background:var(--line-soft);border-radius:6px;height:8px;width:110px;overflow:hidden}
.prog-fill{height:100%;background:var(--green-text)}

/* kepala halaman detail order */
.ord-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.ord-head .oh-main{flex:1;min-width:220px}
.ord-head .oh-id{font-size:17px;font-weight:800;font-family:var(--mono);letter-spacing:-.3px}
.ord-head .oh-sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.ord-head .oh-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* baris exception — tombol pintas ke detail selisih di OPN-04A */
.exc-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 0;border-bottom:1px dashed var(--line-soft);font-size:12.5px}
.exc-line:last-child{border-bottom:none}
.exc-line .ex-sp{margin-left:auto;display:flex;align-items:center;gap:8px}

/* penanda unit pengganti — dipakai di OFG-01A dan di daftar unit OFG-04 */
.chip-ganti{background:var(--accent-soft);color:var(--accent-dark);border:1px solid var(--accent-border)}
.mst-unit .u-ganti{font-size:10.5px;color:var(--accent-dark);font-weight:700;letter-spacing:.2px}

/* Surat Jalan FG (Dok 7 client) — dilingkupi body.print-sj supaya
   tidak bertabrakan dengan lembar cetak label lokasi v6.6. */
#sj-print{display:none}
@media print{
  body.print-sj *{visibility:hidden}
  body.print-sj #sj-print, body.print-sj #sj-print *{visibility:visible}
  body.print-sj #sj-print{display:block;position:absolute;left:0;top:0;width:100%;padding:28px;color:#000}
}
#sj-print table{width:100%;border-collapse:collapse;margin-top:12px}
#sj-print th,#sj-print td{border:1px solid #000;padding:6px 8px;font-size:12px;text-align:left}
#sj-print .ttd{display:flex;justify-content:space-between;margin-top:36px;text-align:center}
#sj-print .ttd>div{width:22%}
#sj-print .ttd .line{margin-top:56px;border-top:1px solid #000;padding-top:4px;font-size:12px}

/* ============================================================
   v6.9 — panel QR tidak dikenali di layar scan.

   Client: "sediakan satu flow jika misalnya user scan QR lain bukan QR
   pallet misalnya QR code QRIS dll". Bentuknya kotak di bawah kamera,
   bukan modal — sama seperti kotak pallet tidak cocok yang sudah ada.
   ============================================================ */
.qr-warn{margin:12px 14px 0;padding:13px 14px;border-radius:12px;border:1px solid var(--amber-border);background:var(--amber-soft)}
.qr-warn.keras{border-color:var(--red-border);background:var(--red-soft)}
.qr-warn .qw-h{display:flex;align-items:center;gap:7px;font-weight:800;font-size:13.5px;color:var(--amber-text);margin-bottom:6px}
.qr-warn.keras .qw-h{color:var(--red-text)}
.qr-warn .qw-h .jic{width:16px;height:16px}
.qr-warn .qw-b{font-size:12.5px;line-height:1.55;color:var(--text)}
.qr-warn .qw-b b{font-weight:700}
.qr-warn .qw-kode{display:block;font-family:var(--mono);font-size:12px;margin:6px 0 2px;color:var(--muted)}
.qr-warn .qw-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.qr-warn .qw-act .btn{flex:1;min-width:132px;margin-top:0}
/* isian input manual, muncul di dalam panel */
.qr-warn .qw-man{margin-top:11px;padding-top:11px;border-top:1px dashed var(--amber-border)}
.qr-warn .qw-man .fg{margin-bottom:8px}
.qr-warn .qw-man label{display:block;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}

/* ============================================================
   v7.0 — Gaya dashboard baru (referensi klien, 3 gambar).
   Kartu aksi berpita warna, gauge okupansi, blok bernomor,
   dan tata letak laporan opname sebagai dokumen resmi.
   ============================================================ */

/* Token yang selama ini dipakai beberapa halaman tetapi tidak pernah
   didefinisikan (--green-text, --blue-text, --blue-bg) — nilainya
   ditetapkan di sini mengikuti pola --amber-text / --red-text. */
:root{
  --green-text:#15803d;
  --blue-text:#0453c9;
  --blue-bg:#e8f0fe;
  --blue-border:#bcd2f7;
  --bg-soft:#f8fafc;
}

/* --- blok bernomor --- */
.db-blok{display:flex;align-items:center;gap:10px;margin:22px 0 12px}
.db-blok .no{width:22px;height:22px;border-radius:7px;background:var(--blue-bg);color:var(--blue-text);
  display:grid;place-items:center;font-size:11px;font-weight:800;flex:none}
.db-blok h3{margin:0;font-size:13px;font-weight:800;letter-spacing:.3px;text-transform:uppercase}
.db-blok .sisi{margin-left:auto;display:flex;align-items:center;gap:8px}

/* --- kartu aksi (pita warna kiri) --- */
.ac-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:12px}
.ac{position:relative;display:block;text-decoration:none;color:inherit;background:var(--card);
  border:1px solid var(--line-soft);border-left:4px solid var(--line);border-radius:12px;padding:12px 14px;
  transition:border-color .12s,box-shadow .12s,transform .12s}
.ac:hover{box-shadow:0 3px 14px rgba(15,23,42,.09);transform:translateY(-1px)}
.ac .ac-top{display:flex;align-items:center;gap:6px;margin-bottom:8px;min-height:20px}
.ac .ac-n{font-size:23px;font-weight:800;line-height:1.1}
.ac .ac-l{font-size:12px;color:var(--ink-2);margin-top:2px;line-height:1.35}
.ac .ac-foot{display:flex;align-items:center;gap:6px;margin-top:10px;padding-top:9px;
  border-top:1px solid var(--line-soft);font-size:11px;color:var(--muted)}
.ac .ac-foot b{color:var(--ink-2);font-weight:700}
.ac .ac-arrow{position:absolute;top:11px;right:12px;color:var(--muted);font-size:12px;opacity:.7}
.ac:hover .ac-arrow{opacity:1;color:var(--blue-text)}
.ac.is-bad{border-left-color:var(--red-text)}
.ac.is-bad .ac-n{color:var(--red-text)}
.ac.is-warn{border-left-color:var(--amber-text)}
.ac.is-run{border-left-color:var(--blue-text)}
.ac.is-run .ac-n{color:var(--blue-text)}
.ac.is-ok{border-left-color:var(--green-text)}
.ac.is-idle{border-left-color:var(--line)}
.ac.is-idle .ac-n{color:var(--muted)}

/* --- gauge okupansi --- */
.gz{display:flex;flex-direction:column;align-items:center;gap:2px}
.gz-svg{width:100%;max-width:236px;height:auto;display:block}
.gz-sub{font-size:11.5px;color:var(--muted);text-align:center;margin-top:-4px}
.mt-rows{display:flex;flex-direction:column;gap:9px;margin-top:12px;width:100%}
.mt-row .mt-h{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px;color:var(--ink-2)}
.mt-row .mt-h b{font-variant-numeric:tabular-nums}
.mt-track{height:8px;border-radius:5px;background:var(--line-soft);overflow:hidden}
.mt-fill{height:100%;border-radius:5px}

/* --- catatan kaki kartu --- */
.db-note{display:flex;align-items:flex-start;gap:7px;margin-top:12px;padding:9px 11px;border-radius:9px;
  background:var(--blue-bg);color:var(--blue-text);font-size:11.5px;line-height:1.45}
.db-note.warn{background:var(--amber-bg);color:var(--amber-text)}
.db-note.ok{background:var(--green-bg);color:var(--green-text)}
.db-note .bi{flex:none;margin-top:1px}

/* --- baris peringatan stok kritis --- */
.kr-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.kr-tbl th{text-align:left;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding:0 10px 7px 0;border-bottom:1px solid var(--line-soft)}
.kr-tbl td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.kr-tbl tr:last-child td{border-bottom:0}
.kr-tbl .kr-nm{font-weight:700}
.kr-tbl .kr-id{font-size:11px;color:var(--muted)}

/* --- laporan opname sebagai dokumen --- */
.doc-h{border:1px solid var(--line-soft);border-radius:14px;padding:16px 18px;background:var(--card)}
.doc-h .doc-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;
  letter-spacing:.6px;text-transform:uppercase;color:var(--green-text);background:var(--green-bg);
  border-radius:99px;padding:3px 10px}
.doc-h h2{margin:10px 0 0;font-size:17px;line-height:1.3}
.doc-h .doc-sub{font-size:12px;color:var(--muted);margin-top:5px}
.doc-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line-soft)}
.doc-meta .dm-k{font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-weight:700}
.doc-meta .dm-v{font-size:12.5px;font-weight:700;margin-top:3px}
.doc-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:14px}
.doc-kpi .dk{border:1px solid var(--line-soft);border-radius:12px;padding:12px 14px;background:var(--card)}
.doc-kpi .dk .k{font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-weight:700}
.doc-kpi .dk .v{font-size:23px;font-weight:800;line-height:1.15;margin-top:3px;font-variant-numeric:tabular-nums}
.doc-kpi .dk .m{font-size:11px;color:var(--muted);margin-top:1px}
.doc-kpi .dk .bar{height:5px;border-radius:3px;background:var(--line-soft);margin-top:9px;overflow:hidden}
.doc-kpi .dk .bar i{display:block;height:100%;border-radius:3px}
.doc-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 16px;text-align:center}
.doc-empty .de-ic{width:40px;height:40px;border-radius:12px;background:var(--green-bg);color:var(--green-text);
  display:grid;place-items:center;font-size:18px}
.doc-empty b{font-size:13.5px}
.doc-empty .de-s{font-size:12px;color:var(--muted);max-width:440px;line-height:1.5}

/* --- footer aktivitas lapangan --- */
.db-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;padding:12px 16px;
  border:1px solid var(--line-soft);border-radius:12px;background:var(--bg-soft,var(--card))}
.db-foot .df-k{font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font-weight:700}
.db-foot .df-v{font-size:12.5px;color:var(--ink-2);flex:1;min-width:220px}

@media(max-width:760px){
  .ac-grid{grid-template-columns:1fr 1fr}
  .db-blok h3{font-size:12px}
}
@media(max-width:480px){ .ac-grid{grid-template-columns:1fr} }

/* ============================================================
   v7.1 — breakdown hierarki label, tag priority, papan approval.
   ============================================================ */
.hbtn{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:6px;border:0;
  background:transparent;color:var(--muted);cursor:pointer;font-size:10px;border-radius:5px;flex:none}
.hbtn:hover{background:var(--line-soft);color:var(--ink)}
.hbtn.kosong{cursor:default;visibility:hidden}
.isi-lvl{margin:2px 0 6px calc(18px + var(--lvl,1) * 16px);border-left:2px solid var(--line-soft);padding-left:10px}
.isi-line{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:12px;border-bottom:1px dashed var(--line-soft)}
.isi-line:last-child{border-bottom:0}
.chip-prio{background:var(--amber-soft);color:var(--amber-text);border-color:var(--amber-border);font-weight:800}

/* --- papan keputusan (approval batch & claim) --- */
.apv{border:1px solid var(--line-soft);border-left:4px solid var(--amber-text);border-radius:12px;
  padding:13px 15px;background:var(--card);margin-top:12px}
.apv.naik{border-left-color:var(--red-text)}
.apv.ok{border-left-color:var(--green-text)}
.apv-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13px;font-weight:700}
.apv-h .umur{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.apv-b{font-size:12px;color:var(--ink-2);margin-top:6px;line-height:1.5}
.apv-step{display:flex;align-items:center;gap:8px;margin-top:9px;flex-wrap:wrap}
.apv-step .tk{display:flex;align-items:center;gap:6px;font-size:11px;padding:4px 9px;border-radius:99px;
  background:var(--line-soft);color:var(--muted);font-weight:700}
.apv-step .tk.on{background:var(--amber-soft);color:var(--amber-text)}
.apv-step .tk.done{background:var(--green-soft);color:var(--green-text)}
.apv-step .ar{color:var(--muted-2);font-size:10px}

/* --- keranjang claim ala kasir --- */
.krj{border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;margin-top:12px}
.krj-h{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg-soft);
  border-bottom:1px solid var(--line-soft);font-size:12px;font-weight:700}
.krj-h .n{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums}
.krj-line{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.krj-line:last-child{border-bottom:0}
.krj-line .sj{font-size:11px;color:var(--muted)}
.krj-kosong{padding:22px 14px;text-align:center;color:var(--muted);font-size:12.5px}

/* ============================================================
   v7.5 — baris aksi mengambang untuk layar detail desktop.
   Tombol keputusan tidak perlu dibungkus kartu berjudul: ia
   menempel di dasar layar supaya selalu terlihat tanpa menggulung.
   Padanan .mst-submit-bar yang selama ini hanya hidup di shell
   mobile (body.mob-scan).
   ============================================================ */
/* padding-right menyediakan tempat untuk tombol bantuan mengambang di
   pojok kanan bawah: keduanya sama-sama menempel di dasar layar, jadi
   tanpa ini tombol keputusan selalu tertimpa sebagian. */
.act-float{position:sticky;bottom:0;z-index:5;display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin-top:18px;padding:12px 78px 12px 16px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);box-shadow:0 -8px 20px rgba(15,23,42,.07)}
.act-float .daf-note{flex:1;min-width:210px;font-size:12.5px;color:var(--muted);line-height:1.5}
.act-float .btn{flex:none}
@media (max-width:640px){.act-float{padding:11px 13px 74px}.act-float .btn{flex:1 1 100%}}

/* ============================================================
   v7.12 — PAGINATION BERSAMA (permintaan client, contoh gambar 1).

   "tolong untuk semua halaman yang berbentuk list awal transaksi
    seperti daftar return order, daftar stock opname dan seluruh
    transaksi lainnya termasuk di FG itu diberi pagination di
    tabelnya, maksimal data yang bisa ditampilkan misalkan 5
    (bisa dipilih sendiri oleh user)"
   ============================================================ */
.tt-pager{padding-top:0}
.jal-pager{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:14px;padding:10px 14px;background:#fff;margin-top:12px}
.jal-pager.kosong{display:none}
.jal-pager .pg-left{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.jal-pager .pg-lbl{font-size:12.5px;color:var(--ink-2)}
.jal-pager .pg-sep{width:1px;height:20px;background:var(--line)}
.jal-pager .pg-inp{width:52px;height:32px;border:1px solid var(--line);border-radius:8px;text-align:center;
  font-size:13px;font-weight:700;color:var(--text);background:#fff;padding:0 4px}
.jal-pager .pg-inp::-webkit-outer-spin-button,.jal-pager .pg-inp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.jal-pager .pg-rows{height:32px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-weight:700;
  color:var(--text);background:#fff;padding:0 6px}
.jal-pager .pg-tot{margin-left:4px}
.jal-pager .pg-right{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.jal-pager .pg-b,.jal-pager .pg-n{min-width:34px;height:34px;border-radius:9px;border:1px solid var(--line);
  background:#fff;color:var(--ink-2);font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;padding:0 8px}
.jal-pager .pg-n{border-color:transparent}
.jal-pager .pg-n.active{background:var(--bg-soft);border-color:var(--line);color:var(--text);font-weight:800}
.jal-pager .pg-b:hover:not([disabled]),.jal-pager .pg-n:hover{background:var(--bg-soft)}
.jal-pager .pg-b[disabled]{opacity:.38;cursor:default}
.jal-pager .pg-gap{padding:0 4px;color:var(--muted);font-size:13px}
@media print{ .jal-pager{display:none!important} }
@media (max-width:640px){
  .jal-pager{flex-direction:column;align-items:stretch}
  .jal-pager .pg-right{justify-content:center}
  .jal-pager .pg-tot{display:none}
}

/* v7.12 — pengatur jumlah lembar stiker (stiker rangkap per kemasan) */
.stk-atur{border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:11px;background:var(--bg-soft)}
.stk-atur-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0;border-bottom:1px dashed var(--line-soft)}
.stk-atur-row:last-child{border-bottom:none}
.stk-atur-row .mono{font-weight:700}
.stk-atur-row label{margin-left:auto;display:flex;align-items:center;gap:7px;font-weight:600;color:var(--ink-2)}
.stk-atur-row input{width:74px;height:31px;border:1px solid var(--line);border-radius:8px;text-align:center;font-weight:700}
.stk-tot{margin:0 0 9px}
.lbl-card .lbl-seq{color:#0f172a;font-weight:800}

/* ============================================================
   v7.12 — LEMBAR CETAK BERSAMA (#jal-sheet).

   Return Order, Detail Permintaan, Laporan Opname, Berita Acara
   Pemusnahan RM. Id-nya sengaja BUKAN sj-print: aturan global
   #sj-print{display:none} milik Surat Jalan FG sudah sekali
   menelan tombol cetak (temuan v7.11). Gerbangnya berdiri
   sendiri — body.print-sheet — dengan pola visibility.

   Blok tanda tangan tidak pernah memuat nama (poin 9 client).
   ============================================================ */
#jal-sheet-print{display:none}
@media print{
  body.print-sheet *{visibility:hidden}
  body.print-sheet #jal-sheet-print, body.print-sheet #jal-sheet-print *{visibility:visible}
  body.print-sheet #jal-sheet-print{display:block;position:absolute;left:0;top:0;width:100%;padding:28px;color:#000}
}
.jal-sheet{color:#000;font-size:12.5px}
.jal-sheet .sh-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.jal-sheet .sh-kop b{font-size:16px}
.jal-sheet .sh-sub{font-size:11.5px}
.jal-sheet .sh-no{text-align:right;font-size:12px}
.jal-sheet .sh-kepada{margin:14px 0 4px;font-size:12.5px}
.jal-sheet .sh-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 2px;font-size:11.5px}
.jal-sheet .sh-meta i{font-style:normal;color:#475569}
.jal-sheet table{width:100%;border-collapse:collapse;margin-top:12px}
.jal-sheet th,.jal-sheet td{border:1px solid #000;padding:6px 8px;font-size:12px;text-align:left;vertical-align:top}
.jal-sheet .sh-catatan{margin-top:12px;font-size:11.5px;line-height:1.5}
.jal-sheet .ttd{display:flex;justify-content:space-between;margin-top:36px;text-align:center;gap:14px}
.jal-sheet .ttd>div{flex:1}
.jal-sheet .ttd .line{margin-top:56px;border-top:1px solid #000;padding-top:4px;font-size:12px}

/* v7.12 — bingkai pratinjau untuk Sh.cetakLembar (lihat komentar di
   jal-shell.js): lembar putih "kertas" ditampilkan di atas latar abu
   di dalam modal, supaya pratinjau terlihat seperti hasil cetak
   sesungguhnya sebelum tombol Cetak ditekan. */
.cl-preview{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;
  padding:18px;margin-bottom:2px;max-height:60vh;overflow:auto}
.cl-preview .jal-sheet{background:#fff;border-radius:6px;padding:22px;box-shadow:0 1px 3px rgba(0,0,0,.1)}
/* v7.15.1: Surat Jalan FG dan Surat Jalan Retur dirakit sebagai
   #sj-print, yang secara global disembunyikan supaya lembarnya tidak
   ikut tampil di halaman biasa. Aturan aslinya TIDAK diubah — di sini
   ia hanya dimunculkan kembali di dalam dua wadah cetak bersama:
   pratinjau (.cl-preview) dan wadah cetaknya (#jal-sheet-print). */
.cl-preview #sj-print{display:block;background:#fff;border-radius:6px;padding:22px;box-shadow:0 1px 3px rgba(0,0,0,.1);color:#000}
#jal-sheet-print #sj-print{display:block}
@media (max-width:640px){ .cl-preview{padding:10px} .cl-preview .jal-sheet{padding:14px} }

/* v7.12 — dua kotak Good / Not Good saat hitung opname */
.opn-gn{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opn-gn .fg{margin-bottom:6px}
@media (max-width:420px){ .opn-gn{grid-template-columns:1fr} }

/* v7.12 — penanda lingkup data dashboard (RM / FG dipisah hak akses) */
.db-lingkup{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-soft)}

/* v7.12 — centang kategori di Master Alasan NG */
.al-kat{display:grid;gap:6px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

/* ============================================================
   v7.18 — STANDAR IKON AKSI TABEL

   Tiga salinan fungsi ico() dulu hidup terpisah di MST-06, OFG-01,
   dan prototipe, jadi ukurannya bercabang: 30px di satu tempat, 25px
   di tempat lain, dan gambar ikonnya ikut besar-kecilnya huruf wadah
   karena ditulis dalam em. Semuanya sekarang dikunci dalam piksel dan
   dirakit satu pintu lewat Sh.ikonAksi / Sh.selAksi.

   Warna menjawab satu pertanyaan sebelum petugas menekan: apa yang
   terjadi pada datanya. Biru membuka, abu hanya membaca, ungu
   mengubah, amber menghentikan tapi bisa dibalik, hijau menghidupkan,
   merah permanen.
   ============================================================ */
.jal-aksi{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end}
.jal-ico{width:32px;height:32px;min-width:32px;min-height:32px;max-height:32px;padding:0;flex:none;
  border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;
  line-height:1;transition:background .12s,border-color .12s,color .12s}
.jal-ico .jic{width:16px;height:16px;vertical-align:0}
.jal-ico:hover{background:var(--line-soft);color:var(--ink)}
.jal-ico:focus-visible{outline:2px solid var(--accent-border);outline-offset:1px}
.jal-ico[disabled]{opacity:.38;cursor:not-allowed}
.jal-ico.i-lihat{color:var(--accent);border-color:var(--accent-border)}
.jal-ico.i-lihat:hover{background:var(--accent-soft)}
.jal-ico.i-netral{color:var(--muted);border-color:var(--line)}
.jal-ico.i-netral:hover{background:var(--line-soft)}
.jal-ico.i-ubah{color:var(--violet-text);border-color:var(--violet-border)}
.jal-ico.i-ubah:hover{background:var(--violet-soft)}
.jal-ico.i-henti{color:var(--amber-text);border-color:var(--amber-border)}
.jal-ico.i-henti:hover{background:var(--amber-soft)}
.jal-ico.i-hidup{color:var(--green-text);border-color:var(--green-border)}
.jal-ico.i-hidup:hover{background:var(--green-soft)}
.jal-ico.i-hapus{color:var(--red-text);border-color:var(--red-border)}
.jal-ico.i-hapus:hover{background:var(--red-soft)}
/* tombol teks yang terpaksa sebaris dengan ikon: tingginya dikunci sama */
.jal-aksi .btn{min-height:32px;height:32px;padding:0 13px;font-size:12.5px;border-radius:8px}
.jal-aksi .btn .jic{width:14px;height:14px}

/* warna ungu — satu-satunya warna baru v7.18, khusus aksi Ubah supaya
   tidak tertukar dengan Detail yang biru */
:root{--violet:#7c3aed; --violet-text:#6d28d9; --violet-soft:#f5f3ff; --violet-border:#ddd6fe}

/* ============================================================
   v7.18 — WARNA TOMBOL

   Tolak dan Batal dulu memakai tombol putih yang sama persis, padahal
   yang satu menolak dokumen orang lain dan yang satu cuma menutup
   jendela. Warnanya mengikuti JAWABANNYA, bukan akibatnya: setuju
   tetap biru walaupun akibatnya permanen, karena beratnya disampaikan
   lewat catatan di kaki halaman dan modal konfirmasi.
   ============================================================ */
.btn-danger{background:var(--card);color:var(--red-text);border-color:var(--red-border)}
.btn-danger:hover{background:var(--red-soft);border-color:var(--red)}
.btn-danger:focus-visible{outline:2px solid var(--red-border);outline-offset:1px}

/* ============================================================
   v7.18 — KELAS YATIM YANG DIANGKAT KE SINI

   Semua ini dipakai di halaman tapi aturannya tidak pernah ada di
   mana pun, atau hanya ada di blok <style> satu halaman sementara
   halaman lain ikut memakainya. Akibatnya elemennya tampil polos —
   jenis bug yang sama dengan .kpi-l/.kpi-v yang dibereskan di v7.16.
   ============================================================ */
/* baris "belum ada data" yang membentang selebar tabel.
   Dipakai 7 halaman, dulu hanya didefinisikan di dsr-02 dan dsp-01. */
.kosong-lembut{padding:22px 18px;text-align:center;color:var(--muted);font-size:12.5px;line-height:1.6}

/* bilah alokasi pembagian petugas — pengaman agar yang dibagi pas
   dengan yang harus dikerjakan. Dipakai ifg-01, ofg-01, gab-01;
   aturannya dulu hanya ada di <style> ifg-01. */
.asg-remain{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;
  border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:#fafbfc;margin-top:10px}
.asg-remain b{font-variant-numeric:tabular-nums;color:var(--ink)}
.asg-remain.pas{border-color:var(--green-border);background:var(--green-soft);color:var(--green-text)}
.asg-remain.kurang{border-color:var(--amber-border);background:var(--amber-soft);color:var(--amber-text)}
.asg-remain.lebih{border-color:var(--red-border);background:var(--red-soft);color:var(--red-text)}

/* area tarik-lepas berkas impor + baris hasil validasinya (clm-01, ofg-01) */
.dropzone{border:2px dashed var(--accent-border);border-radius:12px;background:var(--accent-soft);
  padding:24px 18px;text-align:center;color:var(--accent-dark);font-size:13px;font-weight:600;cursor:pointer}
.dropzone:hover{border-color:var(--accent);background:#e7efff}
.dropzone .sub{font-weight:500;color:var(--muted);font-size:11.5px;margin-top:4px}
.imp-row td{border-left:3px solid transparent}
.imp-row.ok{background:var(--green-soft)}
.imp-row.ok td:first-child{border-left-color:var(--green)}
.imp-row.warn{background:var(--amber-soft)}
.imp-row.warn td:first-child{border-left-color:var(--amber)}
.imp-row.bad{background:var(--red-soft)}
.imp-row.bad td:first-child{border-left-color:var(--red)}

/* disembunyikan saat dicetak — dipakai command-center, opn-06, req-06,
   tapi tidak pernah punya aturan sama sekali, jadi penyaring dan
   tombol ikut tercetak di PDF */
@media print{.no-print{display:none !important}}

/* kartu label QR (mst-10, irm-04, irm-05) */
.qr-card{border:1px solid var(--line);border-radius:10px;padding:12px;text-align:center;background:var(--card)}
.qcode{font-family:var(--mono);font-size:12.5px;font-weight:800;margin-top:8px;word-break:break-all}
.qmeta{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.5}

/* wip-01 memakai jic-warn, yang tidak pernah ada — ikon yang benar
   bernama jic-alert. Aliasnya dipasang supaya banner lama tetap
   bergambar, dan halamannya ikut dibetulkan. */
.jic-warn{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.6 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.6a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E")}

/* ============================================================
   v7.18 — KOMPONEN BERSAMA TAK RESMI YANG DIANGKAT

   Kelas-kelas ini tidak pernah ada di berkas gaya bersama, tapi
   dipakai dua halaman atau lebih lewat <style> lokal masing-masing —
   dan beberapa salinannya sudah mulai berbeda satu sama lain.
   ============================================================ */
/* bilah hitungan di atas daftar (dsp-01, dsr-02, tat-03) */
.pl-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:11px 18px;
  border-bottom:1px solid var(--line-soft);font-size:12.5px;color:var(--ink-2)}
.pl-bar b{font-variant-numeric:tabular-nums;color:var(--ink)}
.pl-bar .sp{flex:1}

/* baris keterangan mendatar di dalam kartu (dsp-01, dsr-02) */
.jd-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--ink-2)}

/* kartu tugas picking (req-02, req-02a) — dua salinannya sudah beda
   latar, satu memakai #f8fafc dan satu var(--bg-soft,#f8fafc) */
.pk-card{border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;overflow:hidden;background:var(--card)}
.pk-head{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:11px 14px;background:#f8fafc;
  border-bottom:1px solid var(--line-soft)}
.pk-hmain{flex:1;min-width:0}
.pk-id{font-family:var(--mono);font-weight:800;font-size:13px}
.pk-op{font-size:11.5px;color:var(--muted);margin-top:2px}
.pk-n{font-variant-numeric:tabular-nums;font-size:12.5px;white-space:nowrap}
.pk-chips{display:flex;gap:6px;flex-wrap:wrap}
.pk-act{display:flex;gap:7px;flex-wrap:wrap}
.pk-body{padding:4px 0}
.pk-unit{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;
  padding:9px 14px;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.pk-unit:last-child{border-bottom:none}
.pk-loc{font-family:var(--mono);font-size:11.5px;color:var(--muted)}

/* kartu tugas penataan (tat-02, tat-04) — disalin kata per kata */
.tt-card{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-bottom:10px;background:var(--card)}
.tt-m{flex:1;min-width:0}
.tt-id{font-family:var(--mono);font-weight:800;font-size:13px}
.tt-s{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.5}
.tt-ar{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.tt-sect{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:14px 0 7px}

/* kotak kemajuan penataan (tat-01, tat-03) — disalin kata per kata.
   Bentuk barunya menumpang Sh.kpiRow, ini hanya untuk bilah kemajuannya. */
.km-bar{height:6px;border-radius:99px;background:var(--line-soft);overflow:hidden;margin-top:8px}
.km-bar > i{display:block;height:100%;background:var(--accent);border-radius:99px}

/* baris riwayat ringkas di dalam modal (prc-02, prc-05) */
.hist-item{font-size:12px;padding:5px 0;border-bottom:1px dashed var(--line-soft);color:var(--ink-2)}
.hist-item:last-child{border-bottom:none}

/* jic-download — dipakai Sh.IKON_JENIS.unduh, belum pernah ada */
.jic-download{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E")}

/* ============================================================
   v7.18 — MST-06 MASTER RACK: rack -> level -> kolom

   Daftar lokasi RM dulu satu tabel datar berisi 42 baris tanpa bentuk.
   Sekarang tiap rak jadi satu blok: kepala rak, lalu satu tabel
   berkelompok yang pita levelnya membentang selebar tabel dan
   kolom-kolomnya berbaris di bawahnya.
   ============================================================ */
.rk{border:1px solid var(--line);border-radius:13px;background:var(--card);overflow:hidden;margin-bottom:11px}
.rk.mati{opacity:.6}
.rk-h{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:12px 15px;cursor:pointer}
.rk-h:hover{background:#fafbff}
.rk-h .chev{color:var(--muted);font-size:12px;width:12px;flex:none}
.rk-h .kode{font-weight:800;font-size:15px}
.rk-h .nm{font-size:12.5px;color:var(--muted);font-weight:500;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:32ch}
.rk-h .sub{font-size:12px;color:var(--muted)}
.rk-h .sp{flex:1}
.rk-b{border-top:1px solid var(--line-soft)}
table.tbl.kolt th,table.tbl.kolt td{padding:8px 15px}
table.tbl.kolt th:last-child,table.tbl.kolt tr:not(.lvband) td:last-child{width:1%;white-space:nowrap}
table.tbl.kolt tr.mati{opacity:.55}
tr.lvband td{background:#f8fafc;border-top:1px solid var(--line);border-bottom:1px solid var(--line-soft);
  padding:0;width:auto}
tr.lvband.mati td{opacity:.6}
tr.lvband .lvb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px;font-weight:700;padding:8px 15px}
tr.lvband .lvb .sp{flex:1}

/* pratinjau kode yang akan dibuat saat menambah rack */
.prev{border:1px solid var(--accent-border);background:var(--accent-soft);border-radius:var(--r);padding:11px 13px;margin-top:4px}
.prev-h{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-dark)}
.prev-g{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;max-height:132px;overflow:auto}
.prev-c{font-family:var(--mono);font-size:11px;background:var(--card);border:1px solid var(--accent-border);
  border-radius:5px;padding:2px 7px;white-space:nowrap}
.prev-n{font-size:12px;color:var(--accent-dark);margin-top:8px;font-weight:600}

/* dua isian sebaris di dalam modal */
.gn2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.gn2{grid-template-columns:1fr}}

/* v7.18 — TAT-01: penanda per rak "sudah masuk sistem" */
.rk-stl{border-top:1px solid var(--line-soft)}
.rk-st{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 18px;border-bottom:1px solid var(--line-soft)}
.rk-st:last-child{border-bottom:none}
.rk-st.belum{background:#fafbfc}
.rk-st .kd{font-weight:800;font-size:13.5px;min-width:88px}
.rk-st .nm{font-size:12.5px;color:var(--muted);flex:1;min-width:110px}

/* v7.18 — TAT-01: baris pembagian petugas yang belum terisi */
.bp.kurang{border-color:var(--red-border);background:var(--red-soft)}

/* v7.18 — TAT-01: satu baris = satu rak + petugasnya.
   Bentuknya sengaja sama dengan .bp-mat di modal pembagian petugas:
   kode di kiri berlatar, isian di kanan. */
.bp{display:grid;grid-template-columns:minmax(140px,220px) minmax(0,1fr);border:1px solid var(--line);
  border-radius:var(--r);margin-bottom:9px;overflow:hidden;background:var(--card)}
.bp-l{padding:12px 14px;border-right:1px solid var(--line-soft);min-width:0;background:#fafbfc}
.bp-l b{font-family:var(--mono);font-size:13.5px}
.bp-l .s{font-size:11.5px;color:var(--muted);margin-top:3px}
.bp-r{padding:12px 14px;min-width:0}
@media(max-width:560px){.bp{grid-template-columns:1fr}.bp-l{border-right:none;border-bottom:1px solid var(--line-soft)}}

/* ============================================================
   T360 re-skin additions (Tahap T1) — module switcher, engine credit
   ============================================================ */
.tb-modsw{position:relative}
.tb-modsw>summary{list-style:none;cursor:pointer;user-select:none;display:inline-flex;align-items:center;gap:6px}
.tb-modsw>summary::-webkit-details-marker{display:none}
.tb-modsw>summary .car{font-size:10px;opacity:.85}
.tb-modmenu{position:absolute;top:calc(100% + 8px);left:0;z-index:80;min-width:230px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:0 10px 28px rgba(15,23,42,.14);padding:6px}
.tb-modmenu a{display:flex;flex-direction:column;padding:7px 10px;border-radius:var(--r-sm);color:var(--ink-2);font-size:13px;line-height:1.25}
.tb-modmenu a span{font-size:11px;color:var(--muted);font-weight:500}
.tb-modmenu a:hover{background:var(--bg-soft);text-decoration:none}
.tb-modmenu a.on{background:var(--accent-soft);color:var(--accent)}
.sb-credit{margin-top:8px;font-size:10px;line-height:1.35;color:var(--muted);text-align:center}
.sb-logo .mark{font-size:13px}
/* ---- T360 patch 92 (final QA): Mobile Scan pages enlarge every button to 46 px (touch targets) — keep the
   topbar icon buttons and the round avatar at their normal size (WMS REQ-03 / MES MON-03, WST-01) ---- */
body.mob-scan .topbar button { min-height: 0; }
body.mob-scan .topbar .tb-avatar { border-radius: 50%; font-size: 12.5px; }
/* ---- T360 patch 92 (final QA): WMS pages at phone width — no horizontal page scroll ---- */
@media (max-width: 640px) {
  html:not([data-space]) .content table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  html:not([data-space]) .db-note { flex-wrap: wrap; } html:not([data-space]) .db-note > * { min-width: 0; overflow-wrap: anywhere; }
  html:not([data-space]) .btn { white-space: normal; max-width: 100%; height: auto; }
  html:not([data-space]) .card-h, html:not([data-space]) .page-head, html:not([data-space]) .sfb { flex-wrap: wrap; }
  html:not([data-space]) .hint, html:not([data-space]) .sfb-inline { white-space: normal; max-width: 100%; flex-wrap: wrap; }
  html:not([data-space]) .content, html:not([data-space]) .card { min-width: 0; max-width: 100%; }
  html:not([data-space]) .card { overflow-x: auto; }   /* custom grids (IRM-06 .mon-row, OPN-06 .op-sec) scroll inside their card */
  html:not([data-space]) .banner > div { min-width: 0; } html:not([data-space]) .banner .chip { white-space: normal; }
}