/* ============================================================================
   SALINAN OTOMATIS — JANGAN DISUNTING DI SINI.
   Sumbernya: design UI/sds_ui.css. Ubah di sana, lalu jalankan:
       python "design UI/salin_cetakan.py"
   Salinan ini ada di aplikasi/ karena hanya folder itu yang disajikan peladen
   (/opt/sds/pwa) dan hanya berkas di bawahnya yang bisa disimpan service worker.
   ============================================================================ */
/* ============================================================================
   SDS UI — CETAKAN TAMPILAN BAKU aplikasi lapangan Sejati Distribution System
   Sumber tunggal warna, huruf, jarak, dan komponen untuk 8 peran SDS.
   Dipakai dengan:  <link rel="stylesheet" href="sds_ui.css">
                    <body data-peran="sales">
   Aturan yang tidak boleh dilanggar:
     1. TANPA font/berkas dari internet — aplikasi harus utuh saat sinyal hilang.
     2. Warna baru TIDAK ditulis langsung di halaman; tambahkan tokennya di sini.
     3. Sentuhan di HP minimal 44px; angka memakai tabular-nums supaya kolom lurus.
     4. SATU peran = SATU bentuk. data-peran adalah satu-satunya saklar; bentuk
        lapangan/kantor mengikutinya sendiri (lihat PATEN di bawah). Tidak ada
        atribut mode terpisah, supaya tidak pernah ada dua versi satu peran.
   Dokumen lengkap: TAMPILAN_SDS.md — contoh hidup: galeri_ui.html
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKEN */
:root{
  /* Merek Sejati — dikunci owner, jangan diubah */
  --sejati-navy:#03005E;
  --sejati-merah:#FB0501;

  /* Permukaan & tinta */
  --kertas:#FFFFFF;        /* latar halaman lapangan */
  --kertas-kantor:#F3F5F7; /* latar halaman kantor (PC) */
  --kartu:#F8FAFD;         /* isi kartu di atas kertas putih */
  --kartu-kantor:#FFFFFF;  /* kartu putih di atas latar abu kantor */
  --tinta:#121B30;         /* teks utama */
  --tinta-lembut:#5A6478;  /* teks penjelas */
  --garis:#DFE5EF;         /* garis pemisah & tepi kolom isian */
  --garis-tebal:#C4CDDD;

  /* Status — arti sama di seluruh peran */
  --sukses:#166534;      --sukses-latar:#DCFCE7;
  --proses:#B45309;      --proses-latar:#FEF3C7;
  --bahaya:#FB0501;      --bahaya-latar:#FBE3E2;
  --bahaya-teks:#9E1414; /* merah untuk TEKS kecil (merek terlalu terang di putih) */
  --info:#0E7490;        --info-latar:#DFF3F8;

  /* Peran aktif — diisi ulang oleh [data-peran] di bawah.
     Bawaan = Sales lembut, supaya halaman yang belum diberi data-peran pun ikut teduh. */
  --peran:#4A5488;
  --peran-terang:#5D68A0;
  --peran-latar:#EAECF5;

  /* Huruf: hanya yang sudah ada di perangkat */
  --huruf:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --dasar:16px;      /* lapangan: terbaca sambil berdiri & kena matahari */
  --t-judul:17px; --t-sedang:15px; --t-kecil:13.5px; --t-mikro:11px;

  /* Jarak — kelipatan 2/4 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;

  /* Sudut & bayangan */
  --r-kartu:10px; --r-kontrol:6px; --r-lembar:14px; --r-chip:999px;
  --bayang:0 1px 2px rgba(18,27,48,.06), 0 2px 8px rgba(18,27,48,.05);
  --bayang-apung:0 8px 28px rgba(18,27,48,.18);

  --sentuh:44px;     /* tinggi minimum yang boleh disentuh */
  --lebar-hp:520px;  /* lebar isi aplikasi lapangan */
  --lebar-pc:1200px; /* lebar isi papan kantor */
}

/* Warna per peran — satu keluarga warna TEREDAM (permintaan owner 9 Sep 2026:
   "palet warnanya dibuat lebih soft"). Nada tua yang tajam diganti nada berdebu:
   sama-sama sedang, kroma rendah, jadi delapan aplikasi terasa satu rumpun dan
   pita peran tidak menyilaukan saat dipandang seharian.
   Semua sudah dicek: teks putih di atasnya minimal 4,5:1 (WCAG AA).
   Merah dan navy MEREK tidak ikut dilembutkan — dipakai di logo dan tombol batal. */
[data-peran="sales"]      { --peran:#4A5488; --peran-terang:#5D68A0; --peran-latar:#EAECF5 } /* navy lembut  7,1:1 */
[data-peran="canvass"]    { --peran:#35719A; --peran-terang:#4487B2; --peran-latar:#E7F0F6 } /* biru lembut  5,3:1 */
[data-peran="koordinator"]{ --peran:#B8050A; --peran-terang:#F39B9D; --peran-latar:#FBE1E2 } /* merah (30 Sep 2026) */
[data-peran="driver"]     { --peran:#334155; --peran-terang:#ADB3BB; --peran-latar:#EBECEE } /* abu gelap 10,4:1 (29 Sep 2026, cadangan bila sds_sentra.css belum termuat) */
[data-peran="dispatcher"] { --peran:#3F7D5A; --peran-terang:#4F9370; --peran-latar:#E8F2EC } /* hijau lembut 4,8:1 */
[data-peran="gudang"]     { --peran:#0E7490; --peran-terang:#9EE0EC; --peran-latar:#E0F6FA } /* biru muda 5,4:1 (30 Sep 2026; cadangan bila sds_sentra.css belum termuat) */
[data-peran="kasir"]      { --peran:#9C4A52; --peran-terang:#B45F67; --peran-latar:#F6EAEB } /* bata lembut  6,0:1 */
[data-peran="rtm"]        { --peran:#0066FF; --peran-terang:#99C2FF; --peran-latar:#E0EDFF } /* biru 4,8:1 (29 Sep 2026: tanpa ungu) */
[data-peran="program"]    { --peran:#115E59; --peran-terang:#99CFC9; --peran-latar:#E1F2EF } /* hijau tua / teal - Admin Program (promo tahap 2, owner 11 Okt 2026) */

/* ===== PATEN BENTUK PER PERAN — jangan dibuat versi lain =====================
   Bentuk halaman melekat pada perannya, bukan dipilih terpisah:

     LAPANGAN (HP)   sales · canvass · koordinator · driver
                     latar putih, huruf 16px, isi 520px, tombol 44px, nav bawah
     KANTOR (PC)     dispatcher · gudang · kasir · rtm
                     latar abu, huruf 14px, isi 1200px, tombol 36px, tab + tabel

   Halaman cukup menulis <body data-peran="kasir"> dan bentuk kantornya ikut
   sendiri. Selektor di bawah inilah daftar peran kantor — kalau kelak ada peran
   kantor baru, tambahkan namanya di SETIAP selektor :is(...) berikut, jangan
   membuat saklar mode baru. Cari dengan: grep 'data-peran="dispatcher"'
   ========================================================================== */

/* ---- Jembatan nama lama -> token baru.
   Halaman v79 memakai --navy, --hijau, --line, --card, --muted, --ink, --merah.
   Tiga halaman lapangan bahkan MEMAKAI --garis dan --navy tanpa pernah
   mendefinisikannya (tepi hilang di grid aksi dalam-toko). Aliasnya ditaruh di
   sini supaya halaman lama ikut benar begitu berkas ini dipasang, tanpa
   menyunting ulang 16 halaman sekaligus.

   Ditulis untuk :root DAN body — bukan :root saja. Nilai custom property
   dihitung di elemen tempat ia ditulis, sedangkan data-peran menempel di <body>.
   Kalau alias hanya ada di :root, --navy sudah terlanjur beku pada warna
   bawaan (Sales) dan halaman Driver akan keluar navy, bukan teal. */
:root, body{
  --navy:var(--peran); --hijau:var(--peran); --navy-t:var(--peran-terang);
  --navy-soft:var(--peran-latar); --hijau-soft:var(--peran-latar); --hijau-terang:var(--peran-terang);
  --line:var(--garis); --card:var(--kartu); --bg:var(--kertas);
  --ink:var(--tinta); --muted:var(--tinta-lembut);
  --merah:var(--bahaya); --merah-soft:var(--bahaya-latar);
  --amber:var(--proses); --amber-soft:var(--proses-latar);
  --r:var(--r-kartu);
}

/* ------------------------------------------------------------- 2. DASAR */
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent }
html,body{ margin:0 }
body{
  background:var(--kertas); color:var(--tinta);
  font-family:var(--huruf); font-size:var(--dasar); line-height:1.45;
  overscroll-behavior:none;
  padding-bottom:env(safe-area-inset-bottom);
}
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="program"]){ background:var(--kertas-kantor); font-size:14px; --kartu:var(--kartu-kantor) }

h1,h2,h3,h4,p,figure{ margin:0 }
b,strong{ font-weight:800 }
a{ color:var(--peran); font-weight:700 }
img,svg{ max-width:100% }

/* Judul bagian: huruf kecil berspasi, bukan huruf besar tebal — supaya isi
   halaman yang menonjol, bukan labelnya. */
.judul-bagian{
  font-size:var(--t-kecil); text-transform:uppercase; letter-spacing:.08em;
  color:var(--tinta-lembut); font-weight:800; margin:var(--s5) 2px var(--s2);
}
.lembut{ color:var(--tinta-lembut); font-size:var(--t-kecil) }
.angka{ font-variant-numeric:tabular-nums }

/* Fokus papan ketik selalu terlihat (dipakai kasir & gudang yang bekerja cepat
   dengan Tab). Tidak muncul saat disentuh/diklik. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--peran-terang); outline-offset:2px; border-radius:var(--r-kontrol);
}

@media (prefers-reduced-motion:reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important } }

/* ------------------------------------------------------- 3. KEPALA HALAMAN */
.sds-kepala{
  position:sticky; top:0; z-index:10;
  background:#fff; border-bottom:1px solid var(--garis);
}
.sds-kepala .baris-kepala{ display:flex; align-items:center; gap:var(--s2); padding:10px var(--s4) }
.sds-kepala .logo{ height:26px; flex:none }
.sds-kepala .judul{ font-size:var(--t-judul); font-weight:800 }
.sds-kepala .kembali{
  background:none; border:0; color:var(--tinta); font-size:22px; cursor:pointer;
  padding:0 var(--s1); min-width:32px;
}
/* Pita peran: satu-satunya tempat warna peran memenuhi lebar layar */
.pita-peran{
  background:var(--peran); color:#fff; text-align:center;
  font-size:var(--t-mikro); font-weight:800; letter-spacing:.22em; padding:3px 0;
}
/* Bar info di bawah kepala: tanggal · nama · depo (temuan tester 7 Sep) */
.bar-info{
  display:flex; flex-wrap:wrap; gap:var(--s3);
  padding:5px var(--s4); background:var(--kartu); border-top:1px solid var(--garis);
  font-size:12.5px; color:var(--tinta-lembut);
}
.bar-info b{ color:var(--tinta) }

/* Papan kantor: kepala putih bergaris peran + tab di kanan */
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="program"]) .sds-kepala{ border-bottom:3px solid var(--peran) }
.sds-tab{ display:flex; gap:var(--s1); margin-left:auto }
.sds-tab button{
  border:0; background:none; font:inherit; font-weight:800; color:var(--tinta);
  padding:var(--s2) 14px; cursor:pointer; border-radius:5px 5px 0 0;
  border-bottom:3px solid transparent;
}
.sds-tab button.aktif{ color:var(--peran); border-bottom-color:var(--sejati-merah) }

/* Bilah penyaring papan kantor (depo, tanggal, tombol muat ulang) */
.bilah-saring{
  background:#fff; border-bottom:1px solid var(--garis);
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:var(--s2) var(--s4);
}
.bilah-saring label{ font-weight:700; font-size:13px; margin:0 }

/* BARIS KENDALI: label sejajar tengah dengan kotak isian di sebelahnya.
   Aturan umum label (bagian 6) memberi margin atas 12px dan bawah 4px supaya formulir
   bertumpuk enak dibaca. Di dalam BARIS mendatar aturan itu justru merusak: flexbox
   menengahkan kotak MARGIN, bukan kotak tulisan, sehingga tulisannya tampak turun sekitar
   4px dari kotak isian di sampingnya. Keluhan owner 11 September 2026 ("tulisan depo dan
   kirim tidak berada di tengah, terlalu bawah") berasal dari sini, dan gejalanya muncul di
   banyak halaman karena pola barisnya sama.
   Aturan di bawah menolkan margin itu HANYA untuk label yang menjadi anak langsung sebuah
   baris mendatar - formulir bertumpuk biasa tidak tersentuh. */
.baris > label, .cari > label, .filterbar > label, .rp-alat > label,
[style*="display:flex"] > label, [style*="display: flex"] > label,
[style*="display:inline-flex"] > label{
  display:inline-flex; align-items:center; gap:6px; margin:0;
}
.cari > label > input[type=checkbox], .filterbar > label > input[type=checkbox],
[style*="display:flex"] > label > input[type=checkbox]{ margin:0; flex:0 0 auto }

/* --------------------------------------------------------------- 4. ISI */
.sds-isi{ max-width:var(--lebar-hp); margin:0 auto; padding:var(--s4) }
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="program"]) .sds-isi{ max-width:var(--lebar-pc) }
.tampilan{ display:none } .tampilan.aktif{ display:block }

.kartu{
  background:var(--kartu); border:1px solid var(--garis); border-radius:var(--r-kartu);
  padding:14px var(--s4); margin-bottom:10px;
}
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="program"]) .kartu{ padding:14px; margin-bottom:14px }
.kartu.tekan{ cursor:pointer }
.kartu.tekan:active{ transform:scale(.985) }
.kartu.sorot{ border-color:var(--peran); box-shadow:0 0 0 2px var(--peran-latar) }
.kartu .kepala-kartu{ display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s2) }
.kartu h3{ color:var(--peran); font-size:15px }

.dua{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.baris{ display:flex; gap:10px; align-items:center }
.baris.pisah{ justify-content:space-between }
@media(max-width:900px){ .dua{ grid-template-columns:1fr } }

/* Strip angka penting (CP/AC/EC di sales, KPI di papan kantor) */
.strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(84px,1fr)); gap:6px; margin-bottom:10px }
.strip .k{
  background:var(--kartu); border:1px solid var(--garis); border-radius:var(--r-kartu);
  padding:var(--s2) var(--s1); text-align:center;
}
.strip .n{ font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--peran); line-height:1.1 }
.strip .l{ font-size:10px; color:var(--tinta-lembut); font-weight:800; letter-spacing:.04em; text-transform:uppercase }
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="program"]) .strip{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:14px }
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="program"]) .strip .k{ background:#fff; padding:12px }
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="program"]) .strip .n{ font-size:24px; font-weight:900 }
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="program"]) .strip .l{ font-size:12px; text-transform:none; letter-spacing:0 }

/* Halaman yang dibuka DI DALAM bingkai portal (kantor.html / kantor-rtm.html) tidak boleh
   menggambar merek dua kali: portal sudah memasang logo SEJATI dan pita perannya di atas.
   Penanda data-dalam-bingkai dipasang versi.js. Tombol aksi di kepala tetap ditampilkan. */
html[data-dalam-bingkai="1"] body > header > svg,
html[data-dalam-bingkai="1"] body > header > .peran{ display:none }
html[data-dalam-bingkai="1"] body > header{ padding-top:6px; padding-bottom:6px }
/* owner 16 Sep 2026: di portal RTM kepala halaman anak (logo + nama PT + depo + refresh) disembunyikan seluruhnya -
   kontrolnya dipindah ke kepala portal, supaya layar lebih lega dan logo tidak dobel */
html[data-dalam-bingkai="1"] body[data-peran="rtm"] > header{ display:none }

/* ----------------------------------------------------------- 5. TOMBOL */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  font:inherit; font-weight:800; line-height:1.2; text-align:center;
  border:1.5px solid var(--garis); border-radius:var(--r-kontrol);
  /* Padding tegak, bukan tinggi mati: label dua baris ("Ya, batalkan" di layar
     sempit) menambah tinggi kotak, tidak meluber keluar. */
  padding:10px var(--s4); min-height:var(--sentuh); cursor:pointer;
  background:var(--kartu); color:var(--tinta);
}
.btn:active{ transform:scale(.99) }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none }
.btn-utama{ background:var(--peran); color:#fff; border-color:var(--peran) }
.btn-garis{ background:transparent; color:var(--peran); border:1.5px solid var(--peran) }
.btn-hantu{ background:transparent; border-color:transparent; color:var(--peran) }
.btn-sukses{ background:var(--sukses); color:#fff; border-color:var(--sukses) }
.btn-bahaya{ background:var(--bahaya); color:#fff; border-color:var(--bahaya) }
.btn-lebar{ display:flex; width:100%; margin-top:10px }
.btn-kecil{ min-height:34px; padding:6px 12px; font-size:var(--t-kecil) }
/* Aturan 3 di kepala berkas ini: sentuhan di HP minimal 44px. Tombol kecil di aplikasi
   LAPANGAN sempat 34-39px sehingga sulit ditekan sambil berdiri di toko; di papan kantor
   (pakai tetikus) ukuran kecil tetap boleh. */
body:is([data-peran="sales"],[data-peran="canvass"],[data-peran="koordinator"],[data-peran="driver"]) .btn-kecil{ min-height:var(--sentuh) }
.btn-mini{ min-height:26px; padding:2px 8px; font-size:12px; border-radius:5px; background:#fff }
.btn-mini.aktif{ background:var(--peran); color:#fff; border-color:var(--peran) }
/* Di papan kantor tombol tidak perlu setinggi jempol */
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="program"]) .btn{ min-height:36px }

/* Grid aksi dalam-toko (order, retur, foto, tagih…) — 4 kolom, ikon di atas */
.grid-aksi{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s2); margin:10px 0 }
.grid-aksi .aksi{
  border:1px solid var(--garis); background:#fff; border-radius:var(--r-kontrol);
  padding:10px var(--s1); min-height:64px; font-size:22px; cursor:pointer; color:var(--peran);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s1);
}
.grid-aksi .aksi span{ font-size:10.5px; font-weight:700; line-height:1.15; text-align:center; color:var(--tinta) }
.grid-aksi .aksi.utama{ background:var(--peran); border-color:var(--peran); color:#fff }
.grid-aksi .aksi.utama span{ color:#fff }
.grid-aksi .aksi:disabled{ opacity:.35; cursor:not-allowed }
.grid-aksi.mati .aksi{ opacity:.35; pointer-events:none }

/* Penambah jumlah — tombol besar supaya bisa ditekan sambil berdiri */
.jumlah{ display:flex; align-items:center; border:1.5px solid var(--garis); border-radius:var(--r-kontrol); overflow:hidden; background:#fff }
.jumlah button{ width:44px; height:42px; border:0; background:#fff; font-size:20px; font-weight:800; color:var(--peran); cursor:pointer }
.jumlah input{ width:64px; border:0; text-align:center; font-weight:800; font-variant-numeric:tabular-nums }

/* ------------------------------------------------------------- 6. ISIAN */
label{ display:block; font-size:var(--t-kecil); font-weight:700; color:var(--tinta-lembut); margin:var(--s3) 0 var(--s1) }
input,select,textarea{
  width:100%; font:inherit; padding:11px 12px; min-height:var(--sentuh);
  border:1.5px solid var(--garis); border-radius:var(--r-kontrol);
  background:#fff; color:var(--tinta);
}
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="program"]) :is(input,select,textarea){
  min-height:36px; padding:var(--s2) 10px; border-width:1px;
}
input[type=checkbox],input[type=radio]{ width:20px; height:20px; min-height:0; accent-color:var(--peran) }
input[type=color]{ width:34px; height:28px; min-height:0; padding:0 }
input:disabled,select:disabled{ background:var(--kartu); color:var(--tinta-lembut) }
.bantuan{ font-size:12.5px; color:var(--tinta-lembut); margin-top:var(--s1) }
.galat{ font-size:12.5px; color:var(--bahaya-teks); font-weight:700; margin-top:var(--s1) }
input.galat-isi,select.galat-isi{ border-color:var(--bahaya) }

/* ----------------------------------------------------- 7. LABEL STATUS */
.chip{
  display:inline-block; font-size:12px; font-weight:800; padding:3px 10px;
  border-radius:var(--r-chip); white-space:nowrap;
  background:var(--peran-latar); color:var(--peran);
}
.chip.sukses{ background:var(--sukses-latar); color:var(--sukses) }
.chip.proses{ background:var(--proses-latar); color:var(--proses) }
.chip.bahaya{ background:var(--bahaya-latar); color:var(--bahaya-teks) }
.chip.netral{ background:#EEF2F5; color:var(--tinta-lembut) }
.chip.padat{ background:var(--peran); color:#fff }
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="program"]) .chip{ font-size:11px; padding:2px 8px; border-radius:6px }

/* --------------------------------------------------------- 8. TABEL PC */
.tabel-bungkus{ overflow-x:auto }             /* tabel lebar menggulir sendiri */
table{ width:100%; border-collapse:collapse; font-size:13px }
th{
  background:var(--peran-latar); color:var(--peran); text-align:left;
  padding:7px var(--s2); font-size:12px; white-space:nowrap;
}
td{ padding:7px var(--s2); border-bottom:1px solid var(--garis); vertical-align:top }
table.rapi th, table.rapi td{ white-space:nowrap } /* owner 19 Sep 2026: seluruh isi tabel kantor tidak terlipat/terpotong; kotak pembungkus overflow-x:auto yang bergeser */
table.rapi td.bungkus{ white-space:normal; min-width:220px; max-width:420px }
th{ white-space:nowrap }
.id-kode, td.id-kode{ font-family:ui-monospace, Consolas, monospace; font-size:12.5px; white-space:nowrap; letter-spacing:.2px } /* owner 19 Sep 2026: ID pelanggan / nomor SO-DO tidak boleh terlipat atau terpotong */
tbody tr:hover td{ background:#F8FAFD }
.tabel-lengket th{ position:sticky; top:0; z-index:1 }  /* judul kolom tetap saat menggulir */
td.angka,th.angka{ text-align:right; font-variant-numeric:tabular-nums }
tr.rinci td{ background:#FAFBFD; font-size:12.5px; color:#37415A; padding:6px var(--s2) var(--s2) 28px }
tr.batal td{ opacity:.6; text-decoration:line-through }
tr.batal td.aksi{ opacity:1; text-decoration:none }
tr.sorot td{ background:var(--proses-latar) !important }

/* ------------------------------------------------- 9. KEADAAN HALAMAN */
/* Empat keadaan yang wajib punya tampilan sendiri: memuat, kosong, gagal, luring. */
.keadaan{ text-align:center; padding:var(--s6) var(--s4); color:var(--tinta-lembut) }
.keadaan .ikon{ font-size:34px; display:block; margin-bottom:var(--s2) }
.keadaan b{ display:block; color:var(--tinta); font-size:var(--t-sedang); margin-bottom:2px }
/* Tombol pemulihan selalu di baris sendiri, bukan menempel di ujung kalimat. */
.keadaan .btn{ display:flex; width:max-content; margin:var(--s3) auto 0 }

.pita-status{ padding:var(--s2) var(--s4); font-weight:700; font-size:var(--t-kecil); display:none }
.pita-status.tampil{ display:block }
.pita-status.proses{ background:var(--proses-latar); color:var(--proses) }
.pita-status.bahaya{ background:var(--bahaya-latar); color:var(--bahaya-teks) }
.pita-status.sukses{ background:var(--sukses-latar); color:var(--sukses) }
.pita-status.luring{ background:var(--tinta); color:#fff }

/* Badge sinkron di kepala aplikasi lapangan */
.badge-sinkron{
  margin-left:auto; font-size:12px; font-weight:800; padding:4px 10px;
  border-radius:var(--r-chip); background:var(--peran-latar); color:var(--peran); white-space:nowrap;
}
.badge-sinkron.antre{ background:var(--proses); color:#fff }
.badge-sinkron.luring{ background:var(--bahaya); color:#fff }

.memuat{ display:inline-block; width:16px; height:16px; border:2.5px solid var(--peran-latar);
  border-top-color:var(--peran); border-radius:50%; animation:putar .8s linear infinite; vertical-align:-3px }
@keyframes putar{ to{ transform:rotate(360deg) } }

/* --------------------------------------------- 10. NAVIGASI BAWAH (HP) */
.nav-bawah{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  background:#fff; border-top:1px solid var(--garis); padding-bottom:env(safe-area-inset-bottom);
}
.nav-bawah .isi{ max-width:var(--lebar-hp); margin:0 auto; display:grid; grid-auto-flow:column; grid-auto-columns:1fr }
.nav-bawah button{
  border:0; background:none; font:inherit; font-size:var(--t-mikro); font-weight:800;
  color:var(--tinta-lembut); padding:7px 0 6px; min-height:var(--sentuh); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:2px; position:relative;
}
.nav-bawah button .ik{ font-size:20px; line-height:1 }
.nav-bawah button.aktif{ color:var(--peran) }
.nav-bawah .bdg{
  position:absolute; top:2px; right:calc(50% - 22px);
  background:var(--bahaya); color:#fff; font-size:10px; border-radius:9px; padding:0 5px; min-width:16px;
}
body.pakai-nav-bawah .sds-isi{ padding-bottom:76px }  /* isi tidak tertutup nav */

/* ------------------------------------------- 11. LEMBAR, DIALOG, TOAST */
.tirai{
  position:fixed; inset:0; background:rgba(18,27,48,.55); z-index:40;
  display:none; align-items:flex-end; justify-content:center;
}
.tirai.tampil{ display:flex }
.tirai.tengah{ align-items:center; padding:var(--s4) }
.lembar{
  background:#fff; width:100%; max-width:var(--lebar-hp); padding:var(--s4);
  border-radius:var(--r-lembar) var(--r-lembar) 0 0; max-height:85vh; overflow:auto;
  box-shadow:var(--bayang-apung); padding-bottom:calc(var(--s4) + env(safe-area-inset-bottom));
}
.tirai.tengah .lembar{ border-radius:var(--r-lembar); max-width:560px }
.lembar .pegangan{ width:38px; height:4px; border-radius:2px; background:var(--garis-tebal); margin:0 auto var(--s3) }
.lembar h3{ font-size:var(--t-judul); margin-bottom:var(--s1) }
.lembar .aksi-lembar{ display:flex; gap:var(--s2); margin-top:var(--s4) }
.lembar .aksi-lembar .btn{ flex:1 }

.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--tinta); color:#fff; padding:10px 18px; border-radius:var(--r-chip);
  font-size:14px; max-width:90vw; text-align:center; z-index:50;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.toast.tampil{ opacity:.96 }

/* ------------------------------------------------------- 12. DAFTAR HP */
/* Kartu antaran/kunjungan: nomor urut, nama, keterangan, status di kanan. */
.item{
  display:flex; gap:var(--s3); align-items:flex-start;
  background:var(--kartu); border:1px solid var(--garis); border-left:4px solid var(--peran);
  border-radius:var(--r-kartu); padding:var(--s3) 14px; margin-bottom:var(--s2);
}
.item.selesai{ border-left-color:var(--sukses) }
.item.gagal{ border-left-color:var(--bahaya) }
.item.tunda{ border-left-color:var(--proses) }
.item .no{
  flex:none; width:26px; height:26px; border-radius:50%; background:var(--peran); color:#fff;
  font-size:12.5px; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.item .isi{ flex:1; min-width:0 }
.item .nama{ font-weight:800 }
.item .ket{ font-size:12.5px; color:var(--tinta-lembut) }

/* ------------------------------------------------------------ 13. PETA */
.peta-bungkus{ position:relative; border-radius:var(--r-kartu); overflow:hidden; border:1px solid var(--garis) }
.legenda{ display:flex; gap:10px; flex-wrap:wrap; font-size:12px; margin:6px 0; color:var(--tinta-lembut) }
.legenda b{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:4px; vertical-align:middle }

/* ------------------------------------------------ 14. LAYAR SEMPIT (HP) */
/* Papan kantor kadang dibuka dari HP (dispatcher mengecek dari jalan, kasir
   dari gudang). Di bawah 640px tabel dikecilkan; tabel yang lebar sebaiknya
   TIDAK digeser ke samping — beri kelas .tabel-tumpuk supaya tiap baris
   berubah menjadi kartu, nama kolom diambil dari data-label tiap sel:

     <table class="tabel-tumpuk">
       <tr><th>Outlet</th><th>Nilai</th></tr>
       <tr><td>Juanda WR</td><td data-label="Nilai">Rp 134.000</td></tr>
     </table>

   Sel pertama sengaja tanpa data-label: ia menjadi judul kartu. */
@media (max-width:640px){
  .sds-isi{ padding:var(--s3) }
  .kartu{ padding:var(--s3); border-radius:var(--r-kontrol) }

  /* 1. Semua tabel mengecil supaya lebih banyak kolom muat */
  table{ font-size:12px }
  th{ padding:5px 6px; font-size:11px }
  td{ padding:5px 6px }
  tr.rinci td{ padding-left:14px }

  /* 2. Tabel lebar: tiap baris jadi kartu, tanpa geser ke samping */
  .tabel-tumpuk, .tabel-tumpuk tbody, .tabel-tumpuk tr, .tabel-tumpuk td{ display:block; width:auto }
  .tabel-tumpuk thead, .tabel-tumpuk tr:first-child:has(th){ display:none } /* judul kolom pindah ke tiap sel */
  .tabel-tumpuk tr{
    background:var(--kartu); border:1px solid var(--garis); border-left:4px solid var(--peran);
    border-radius:var(--r-kartu); padding:var(--s2) var(--s3); margin-bottom:var(--s2);
  }
  .tabel-tumpuk tr:hover td{ background:none }
  .tabel-tumpuk td{
    border:0; padding:3px 0; text-align:left;
    display:flex; gap:var(--s3); justify-content:space-between; align-items:baseline;
  }
  .tabel-tumpuk td[data-label]::before{
    content:attr(data-label); flex:none;
    font-size:var(--t-mikro); font-weight:800; letter-spacing:.04em; text-transform:uppercase;
    color:var(--tinta-lembut);
  }
  /* Sel tanpa data-label = judul kartu: rata kiri, tanpa label kosong yang
     mendorongnya ke kanan (space-between menghitung ::before kosong sebagai isi). */
  .tabel-tumpuk td:not([data-label]){ font-weight:800; font-size:var(--t-sedang); padding-bottom:var(--s1); justify-content:flex-start }
  .tabel-tumpuk td.angka{ font-variant-numeric:tabular-nums }
  .tabel-tumpuk .tabel-lengket th, .tabel-lengket.tabel-tumpuk th{ position:static }

  /* 3. Bilah penyaring & tab tidak boleh memaksa halaman melar */
  .bilah-saring{ padding:var(--s2) var(--s3); gap:var(--s2) }
  .bilah-saring input, .bilah-saring select{ flex:1; min-width:120px }
  .sds-tab{ width:100%; margin-left:0; overflow-x:auto; scrollbar-width:none }
  .sds-tab::-webkit-scrollbar{ display:none }   /* tetap bisa digeser, tanpa batang gulir */
  .sds-tab button{ padding:var(--s2) 10px; white-space:nowrap }
  .strip{ gap:var(--s1) }
}

/* ----------------------------------------------------------- 15. CETAK */
@media print{
  .sds-kepala,.nav-bawah,.bilah-saring,.toast,.tirai,.btn,#badge-versi{ display:none !important }
  body{ background:#fff; font-size:12px }
  .kartu{ border:0; padding:0 }
  th{ background:#eee !important; color:#000 !important; -webkit-print-color-adjust:exact }
  table{ page-break-inside:auto } tr{ page-break-inside:avoid }
}

/* -------------------------------------------------------- 15. UTILITAS */
.sembunyi{ display:none !important }
.rata-kanan{ text-align:right } .rata-tengah{ text-align:center }
.penuh{ width:100% }
.jarak-atas{ margin-top:var(--s3) } .jarak-bawah{ margin-bottom:var(--s3) }
.hanya-pembaca-layar{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* lencana kuning DMS: tab / tombol yang alurnya ditiru dari DMS 3.0 (owner 11 Sep 2026) */
.badge-dms{ display:inline-block; margin-left:5px; padding:1px 7px; border-radius:6px; font-size:10.5px; font-weight:800; letter-spacing:.04em; line-height:1.4; background:var(--proses-latar); color:var(--proses); vertical-align:1px; white-space:nowrap }

/* owner 16 Sep 2026: kotak angka tanpa tombol naik-turun (semua aplikasi); pemisah ribuan diketik otomatis oleh versi.js */
input[type=number]{ -moz-appearance:textfield; appearance:textfield }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }

/* owner 16 Sep 2026: baris penyaring/isian rapi di halaman kantor - label dekat kotak, tinggi seragam, sebaris rata tengah */
.setel-grid{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end}
.setel-grid > div{display:flex; flex-direction:column; gap:3px}
.setel-grid label{font-size:12px; font-weight:700; color:var(--muted, #5A6478); white-space:nowrap; margin:0}
.setel-grid input, .setel-grid select{height:36px; padding:0 10px; border:1px solid var(--line, #D8DEE9); border-radius:8px; font:inherit; font-weight:700; margin:0; background:#fff; box-sizing:border-box}
.setel-grid input{width:150px}
.setel-grid input[type=number]{width:110px}
.setel-grid select{min-width:150px}
.setel-grid input[data-combo-untuk]{width:200px}
.setel-grid .aksi{flex-direction:row; align-items:center; gap:10px; min-height:36px}
.setel-grid .aksi label{display:inline-flex; align-items:center; gap:4px; font-weight:600}
.setel-grid .aksi input[type=checkbox]{width:auto; height:auto; margin:0}
.setel-grid .aksi .btn-garis, .setel-grid .aksi .btn-utama, .setel-grid .aksi button{height:36px; padding:0 12px; display:inline-flex; align-items:center}

/* owner 16 Sep 2026: latar di luar kartu/tabel lebih gelap supaya tiap kartu terlihat terpisah - SEMUA aplikasi.
   Ditulis dengan html body supaya menang atas --bg lokal tiap halaman. */
html body[data-peran="dispatcher"], html body[data-peran="gudang"], html body[data-peran="kasir"], html body[data-peran="rtm"], html body[data-peran="program"], html body.kantor{ background:#E4E8EF !important }
html body[data-peran="sales"], html body[data-peran="canvass"], html body[data-peran="motoris"], html body[data-peran="koordinator"], html body[data-peran="driver"]{ background:#EEF1F6 !important }
html body .kartu, html body .card{ background:#fff; border:1px solid #CBD3E0; box-shadow:0 1px 3px rgba(18,27,48,.08) }
html body .kartu table, html body .card table{ background:#fff }