/* SDS TEMA SENTRA (owner 29 Sep 2026).
   Keputusan owner: "cocok sekali dengan UI UX Sentra"; "hanya ubah tombol dan warnanya, jangan letak-letaknya" (sudut kartu & panah
   dropdown boleh); "warna peran tetap warna-warni ... mejikuhibiniu tidak masalah"; "kurang senada dalam 1 halaman" -> tiap halaman
   SATU keluarga warna turunan warna perannya; garis bawah tab aktif 2px ("terlalu tebal bagian bawahnya"). "sudah bagus".
   Dipasang SESUDAH sds_ui.css dan SESUDAH <style> halaman. Tidak mengubah huruf, ukuran, jarak, maupun letak apa pun.
   Turunan per peran: --peran (tombol, garis kepala, garis tab aktif) · --peran-teks (tulisan di atas --peran: putih / biru tua bila
   warnanya terlalu terang) · --peran-hover (tombol disorot) · --peran-terang (tepi tab aktif) · --peran-latar (latar tab aktif,
   kepala tabel) · --peran-tua (judul kartu, tulisan tab aktif & kepala tabel). */

/* ---- 1. warna netral & status bersama ---- */
:root, body{
  --tinta:#15123F; --tinta-lembut:#4C4A6B; --tinta-samar:#7D7B96;
  --garis:#DCE3EA; --garis-tebal:#C9D3DD; --garis-lembut:#EEF2F5;
  --kertas-kantor:#F4F6F8; --kartu-kantor:#FFFFFF;
  --sukses:#1E8E4F; --sukses-latar:#E6F5EC;
  --proses:#9A6200; --proses-latar:#FFF3DF;
  --bahaya:#A3161B; --bahaya-latar:#FDECEA; --bahaya-teks:#A3161B;
  --peran-teks:#FFFFFF;
}
/* ---- 2. warna peran: palet pelangi. --peran-cerah = warna asli (tombol utama, garis kepala, label peran, garis tab aktif);
   --peran = versi TERBACA (tulisan putih di atasnya & sebagai tulisan di atas putih >= 4,6:1) untuk semua pemakaian lama di halaman ---- */
body[data-peran="sales"]       { --peran-cerah:#4A5488; --peran-teks:#FFFFFF; --peran:#4A5488; --peran-hover:#3E4773; --peran-terang:#A9AFCD; --peran-latar:#EAECF5; --peran-tua:#262B4A } /* biru tua lembut (warna lama, 30 Sep 2026) */
body[data-peran="canvass"]     { --peran-cerah:#F97316; --peran-teks:#15123F; --peran:#BD5711; --peran-hover:#D46213; --peran-terang:#FDC7A2; --peran-latar:#FEEEE3; --peran-tua:#7C3A0B } /* jingga */
body[data-peran="driver"]      { --peran-cerah:#334155; --peran-teks:#FFFFFF; --peran:#334155; --peran-hover:#293444; --peran-terang:#ADB3BB; --peran-latar:#EBECEE; --peran-tua:#1F2733 } /* abu gelap (owner 29 Sep 2026: "driver tukar dengan koordinator" - dulu kuning) */
body[data-peran="dispatcher"]  { --peran-cerah:#15803D; --peran-teks:#FFFFFF; --peran:#15803D; --peran-hover:#126D34; --peran-terang:#A1CCB1; --peran-latar:#E3F0E8; --peran-tua:#0A401E } /* hijau */
body[data-peran="gudang"]      { --peran-cerah:#06B6D4; --peran-teks:#03005E; --peran:#0E7490; --peran-hover:#0AA3BE; --peran-terang:#9EE0EC; --peran-latar:#E0F6FA; --peran-tua:#0B4F5E } /* biru muda (30 Sep 2026: toska terlalu mirip hijau Dispatcher) */
body[data-peran="kasir"]       { --peran-cerah:#7B3F00; --peran-teks:#FFFFFF; --peran:#7B3F00; --peran-hover:#653400; --peran-terang:#CAB299; --peran-latar:#EFE8E0; --peran-tua:#442300 } /* coklat (owner 29 Sep 2026: "bedakan warna kasir" dari biru RTM; dulu biru #2563EB) */
body[data-peran="rtm"]         { --peran-cerah:#0066FF; --peran-teks:#FFFFFF; --peran:#0066FF; --peran-hover:#0057D9; --peran-terang:#99C2FF; --peran-latar:#E0EDFF; --peran-tua:#003380 } /* biru (owner 29 Sep 2026: "RTM biru saja, birunya kurang biru" - dulu nila) */
body[data-peran="koordinator"] { --peran-cerah:#E1060B; --peran-teks:#FFFFFF; --peran:#E1060B; --peran-hover:#BF0509; --peran-terang:#F39B9D; --peran-latar:#FBE1E2; --peran-tua:#700306 } /* merah (30 Sep 2026: dari Sales) */
body[data-peran="hp"]          { --peran-cerah:#03005E; --peran-teks:#FFFFFF; --peran:#03005E; --peran-hover:#030050; --peran-terang:#9A99BF; --peran-latar:#E1E0EC; --peran-tua:#02002F } /* biru tua Sejati */
body[data-peran="account"]     { --peran-cerah:#03005E; --peran-teks:#FFFFFF; --peran:#03005E; --peran-hover:#030050; --peran-terang:#9A99BF; --peran-latar:#E1E0EC; --peran-tua:#02002F } /* biru tua Sejati - SDS Account, khusus administrator (owner 29 Sep 2026) */
body[data-peran="program"]     { --peran-cerah:#0F766E; --peran-teks:#FFFFFF; --peran:#115E59; --peran-hover:#0D4D49; --peran-terang:#99CFC9; --peran-latar:#E1F2EF; --peran-tua:#083B38 } /* hijau tua / teal - Admin Program (owner 11 Okt 2026; bukan ungu/nila, beda dari Dispatcher hijau & Gudang biru muda) */

/* ---- 3. dasar ---- */
body{ color:var(--tinta) }
html body[data-peran="dispatcher"], html body[data-peran="gudang"], html body[data-peran="kasir"], html body[data-peran="rtm"], html body[data-peran="account"], html body[data-peran="program"], html body.kantor{ background:var(--kertas-kantor) !important }
a{ color:var(--peran-tua) }
:where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:2px solid var(--peran); outline-offset:2px }

/* ---- 4. kepala halaman: garis bawah & label peran ---- */
body > header, .sds-kepala{ border-bottom-color:var(--peran-cerah) !important }
header .peran, .pita-peran{ background:var(--peran-cerah) !important; color:var(--peran-teks) !important }

/* ---- 5. kartu & judul: sudut 12px + bayangan halus ala SENTRA, judul warna tua peran ---- */
body .kartu{ background:#fff; border-color:var(--garis); border-radius:12px; box-shadow:0 1px 2px rgba(11,31,51,.06),0 2px 8px rgba(11,31,51,.06) }
body .kartu h3, body h3{ color:var(--peran-tua) }
body .muted, body .lembut{ color:var(--tinta-lembut) }

/* ---- 6. tombol ala SENTRA: sudut 8px ---- */
body :is(.btn, .btn-utama, .btn-garis, .btn-hantu, .btn-mini, button.b){ border-radius:8px; transition:background .12s,border-color .12s }
body .btn-utama{ background:var(--peran-cerah) !important; border-color:var(--peran-cerah) !important; color:var(--peran-teks) !important }
body .btn-utama:hover{ background:var(--peran-hover) !important; border-color:var(--peran-hover) !important }
body :is(.btn-garis, .btn){ background:#fff; border-color:var(--garis); color:var(--tinta) }
body :is(.btn-garis, .btn):hover{ background:var(--kertas-kantor); border-color:var(--garis-tebal) }
body .btn-hantu{ background:transparent; border-color:transparent; color:var(--tinta-lembut) }
body .btn-bahaya{ background:#fff !important; border-color:#F1C4C1 !important; color:var(--bahaya) !important }
body .btn-bahaya:hover{ background:var(--bahaya-latar) !important }
body .btn-sukses{ background:var(--sukses) !important; border-color:var(--sukses) !important; color:#fff !important }
body .btn-mini.aktif{ background:var(--peran); border-color:var(--peran); color:#fff }

/* ---- 7. tab: latar lembut peran, tulisan tua peran, garis bawah 2px warna peran (tanpa menggeser letak) ---- */
body :is(.tab-gudang, header nav, .sds-tab) button{ background:#fff; border-color:var(--garis); color:var(--tinta-lembut); border-radius:8px }
body :is(.tab-gudang, header nav, .sds-tab) button:hover{ background:var(--garis-lembut); color:var(--tinta) }
body :is(.tab-gudang, header nav, .sds-tab) button.aktif{ background:var(--peran-latar) !important; border-color:var(--peran-terang) !important; color:var(--peran-tua) !important; box-shadow:inset 0 -2px 0 var(--peran-cerah) !important }
body .lencana-tab{ background:#E1060B }

/* ---- 8. isian ---- */
body :is(input, select, textarea){ border-color:var(--garis); background:#fff; color:var(--tinta) }
body :is(input, select, textarea):focus{ outline:none; border-color:var(--peran-terang); box-shadow:0 0 0 3px var(--peran-latar) }
body label{ color:var(--tinta-lembut) }
body input[type=checkbox], body input[type=radio]{ accent-color:var(--peran) }
body select:not([multiple]):not([size]){ -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C4A6B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:12px 12px; padding-right:34px }

/* ---- 9. tabel: kepala latar lembut peran, tulisan tua peran ---- */
body th{ background:var(--peran-latar) !important; color:var(--peran-tua) !important }
body td{ border-bottom-color:var(--garis-lembut) }
body tbody tr:hover td, body table tr:hover td{ background:#F8FAFC }

/* ---- 10. label status: hijau selesai, kuning proses, merah masalah ---- */
body .chip.sukses{ background:var(--sukses-latar); color:var(--sukses) }
body .chip.proses{ background:var(--proses-latar); color:var(--proses) }
body .chip.bahaya{ background:var(--bahaya-latar); color:var(--bahaya) }

/* ---- 11. keterbacaan warna cerah (kuning Driver, jingga Canvass/Motoris) ----
   Halaman lama memakai --navy/--hijau (alias warna peran) untuk TULISAN dan untuk LATAR bertulisan putih. Alias diarahkan ke
   versi TUA peran supaya keduanya tetap terbaca; tombol utama tetap memakai warna cerah lewat aturan .btn-utama di atas. */
body[data-peran]{ --navy:var(--peran); --hijau:var(--peran); --navy-t:var(--peran-terang); --hijau-terang:var(--peran-terang); --navy-soft:var(--peran-latar); --hijau-soft:var(--peran-latar) }
body a, body .sds-tab button.aktif, body .strip .n, body .grid-aksi .aksi, body .jumlah button, body .nav-bawah button.aktif{ color:var(--peran-tua) }
body .chip{ background:var(--peran-latar); color:var(--peran-tua) }
body .chip.netral{ background:#EEF2F5; color:var(--tinta-lembut) }
body .badge-sinkron:not(.antre):not(.luring){ background:var(--peran-latar); color:var(--peran-tua) }
/* tab halaman kantor lain (Master Data, Setting Promo, Setting Target, portal RTM) = gaya tab yang sama */
body :is(.tab, nav) button.aktif{ background:var(--peran-latar) !important; border-color:var(--peran-terang) !important; color:var(--peran-tua) !important; box-shadow:inset 0 -2px 0 var(--peran-cerah) !important }
body .nav-bawah button.aktif{ background:transparent !important; border-color:transparent !important; box-shadow:none !important }

/* ---- 12. MENU SAMPING ala SENTRA (menu_samping.js; owner 29 Sep 2026: "tab di samping seperti Sentra, bisa diciutkan,
   jika diciutkan hanya muncul ikonnya"; ikon garis 1 warna mengikuti warna tulisan) ---- */
.sm-sembunyi{ display:none !important }
.sm-tubuh{ display:flex; align-items:flex-start }
.sm-isi{ flex:1; min-width:0 }
.sm-menu{ position:sticky; top:var(--sm-atas, 0px); height:calc(100vh - var(--sm-atas, 0px)); width:236px; flex:none; overflow-y:auto; overflow-x:hidden;
  background:#fff; border-right:1px solid var(--garis); display:flex; flex-direction:column; padding:4px 10px 10px; transition:width .15s ease; z-index:4 }
.sm-label{ font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--peran-tua); padding:14px 10px 6px; white-space:nowrap }
.sm-item, .sm-ciut{ display:flex; align-items:center; gap:10px; width:100%; min-height:38px; padding:6px 8px 6px 10px; border:0; background:transparent;
  border-radius:8px; color:var(--tinta-lembut); font:inherit; font-size:13.5px; font-weight:600; text-align:left; cursor:pointer; position:relative; line-height:1.25 }
.sm-ik{ width:22px; height:22px; flex:none; display:inline-flex; align-items:center; justify-content:center }
.sm-menu .sds-ikon{ width:20px; height:20px; flex:none }
.sm-nm{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sm-item:hover, .sm-ciut:hover{ background:var(--garis-lembut); color:var(--tinta) }
.sm-item.aktif{ background:var(--peran-latar); color:var(--peran-tua); font-weight:700 }
.sm-item.aktif::before{ content:""; position:absolute; left:-10px; top:7px; bottom:7px; width:3px; border-radius:0 3px 3px 0; background:var(--peran-cerah) }
.sm-lencana{ background:#E1060B; color:#fff; border-radius:10px; padding:0 7px; font-size:11px; font-weight:700; line-height:18px }
.sm-kaki{ margin-top:auto; position:sticky; bottom:-10px; margin-bottom:-10px; padding:8px 0 10px; background:#fff; border-top:1px solid var(--garis-lembut); z-index:2; box-shadow:0 -6px 10px -8px rgba(21,18,63,.18) }
.sm-menu .sm-ciut{ background:var(--peran-cerah); color:var(--peran-teks); border:1px solid var(--peran-cerah); justify-content:center; font-weight:700 }
.sm-menu .sm-ciut:hover{ background:var(--peran-hover); border-color:var(--peran-hover); color:var(--peran-teks) }
.sm-menu .sm-ciut .sm-nm{ flex:none }
.sm-tombol-hp, .sm-latar{ display:none }
@media (min-width:801px){
  body.sm-diciut .sm-menu{ width:64px }
  body.sm-diciut .sm-label{ font-size:0; height:1px; padding:0; margin:12px 8px; background:var(--garis-lembut); overflow:hidden }
  body.sm-diciut .sm-label *{ display:none !important }
  body.sm-diciut :is(.sm-item, .sm-ciut){ justify-content:center; padding:6px 0 }
  body.sm-diciut .sm-nm{ display:none }
  body.sm-diciut .sm-lencana{ position:absolute; top:2px; right:4px; padding:0 5px; font-size:10px; line-height:15px }
}
@media (max-width:800px){
  .sm-tombol-hp{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:32px; border:1px solid var(--garis); background:#fff;
    border-radius:8px; color:var(--tinta); cursor:pointer; margin-right:6px; flex:none; padding:0 }
  .sm-tombol-hp .sds-ikon{ width:22px; height:22px }
  .sm-menu{ position:fixed; top:0; left:0; bottom:0; height:100vh; width:270px; z-index:95; box-shadow:0 8px 28px rgba(11,31,51,.2); transform:translateX(-105%); transition:transform .18s ease }
  body.sm-buka .sm-menu{ transform:none }
  body.sm-buka .sm-latar{ display:block; position:fixed; inset:0; background:rgba(11,31,51,.3); z-index:94 }
  .sm-ciut{ display:none }
}
/* halaman RTM di dalam portal: deretan tab-nya pindah jadi sub-menu di menu kiri portal */
html[data-dalam-bingkai="1"] body[data-peran="rtm"] div.tab{ display:none !important }

/* ---- 13. KEPALA KANTOR & PROFIL ala SENTRA (versi.js: tombol #sds-profil + menu #sds-profil-menu; owner 29 Sep 2026) ---- */
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) > header{ border-bottom:1px solid var(--garis) !important; box-shadow:0 1px 2px rgba(11,31,51,.04); min-height:48px; padding-top:4px !important; padding-bottom:4px !important }
/* owner 29 Sep 2026: "perkecil bagian header, supaya layar lebih luas" */
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) > header > svg, body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) > header > .baris-atas > svg, body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) > header > .baris-kepala > svg, body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) > header .hd-kiri > svg{ height:21px !important; width:auto } /* 3 Okt: logo dispatcher (di dalam .hd-kiri) disamakan 21px seperti RTM/halaman kantor lain */
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) > header .peran, body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) > header .baris-atas > span[style*="border-radius:6px"]{ font-size:10.5px !important; padding:1px 8px !important }
#kepala-kantor .sds-keluar-lama, #kepala-kantor .sds-siapa-lama{ display:none !important }
#kepala-kantor{ gap:6px !important }
#kepala-kantor > button:not(#sds-profil){ background:#fff !important; color:var(--tinta) !important; border:1px solid var(--garis) !important; font-weight:600 !important; height:32px !important; min-width:32px !important; padding:0 8px !important }
#kepala-kantor > button:not(#sds-profil):hover{ background:var(--kertas-kantor) !important; border-color:var(--garis-tebal) !important }
#sds-btn-lapor{ font-size:16px !important }
#sds-profil{ display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 6px 0 3px; margin-left:4px; border:0; background:transparent; border-radius:999px; cursor:pointer; color:var(--tinta-lembut); font:inherit }
#sds-profil:hover{ background:var(--garis-lembut) }
#sds-profil .sp-avatar{ width:28px; height:28px; border-radius:50%; background:var(--peran-latar); color:var(--peran-tua); font-weight:700; font-size:12px; display:inline-flex; align-items:center; justify-content:center; flex:none }
#sds-profil .sp-teks{ display:flex; flex-direction:column; text-align:left; line-height:1.2; max-width:170px }
#sds-profil .sp-teks b{ font-size:12.5px; color:var(--tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
#sds-profil .sp-teks small{ font-size:11px; color:var(--tinta-samar); white-space:nowrap }
#sds-profil-menu{ position:fixed; z-index:990; min-width:240px; background:#fff; border:1px solid var(--garis); border-radius:8px; box-shadow:0 8px 28px rgba(11,31,51,.16); padding:6px; font-size:13.5px }
#sds-profil-menu .spm-judul{ display:flex; align-items:center; gap:6px; padding:8px 10px 4px; font-size:12px; font-weight:700; color:var(--tinta-lembut) }
#sds-profil-menu .spm-email{ padding:0 10px 8px; font-size:12px; color:var(--tinta-samar) }
#sds-profil-menu .spm-sep{ height:1px; background:var(--garis-lembut); margin:6px 0 }
#sds-profil-menu button{ display:flex; align-items:center; gap:8px; width:100%; height:34px; padding:0 10px; border:0; background:transparent; border-radius:6px; text-align:left; cursor:pointer; font:inherit; color:var(--tinta) }
#sds-profil-menu button:hover{ background:var(--kertas-kantor) }
#sds-profil-menu button svg{ width:16px; height:16px; flex:none; color:var(--peran-tua) }
#sds-profil-menu .spm-bahaya, #sds-profil-menu .spm-bahaya svg{ color:var(--bahaya) }
#sds-profil-menu .spm-bahaya:hover{ background:var(--bahaya-latar) }
#sds-profil-menu .spm-ukuran{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 10px; margin:0; font-size:13px; color:var(--tinta); font-weight:600 }
#sds-profil-menu .spm-ukuran-label{ display:grid; grid-template-columns:16px auto; column-gap:6px; align-items:center; line-height:1.25 }
#sds-profil-menu .spm-ukuran-label svg{ color:var(--peran-tua) }
#sds-profil-menu .spm-ukuran small{ grid-column:2; font-size:11.5px; color:var(--tinta-samar); font-weight:500 }
#sds-profil-menu .spm-ukuran select{ width:auto; min-height:32px; height:32px; padding:0 30px 0 10px; font-size:13px; font-weight:600; border-radius:8px }
@media (max-width:800px){ #sds-profil .sp-teks{ display:none } }
/* ukuran tulisan (zoom): tinggi yang memakai 100vh dikompensasi supaya tetap penuh layar */
html[data-ukuran] body:is([data-peran="rtm"],[data-peran="program"]):has(> .tubuh){ height:calc(100vh / var(--sds-zoom, 1)) }
html[data-ukuran] .sm-menu{ height:calc(100vh / var(--sds-zoom, 1) - var(--sm-atas, 0px)) }

/* ---- 14. SAMAKAN DENGAN RTM (29 Sep 2026): nama PT di kepala, label depo ringkas, dropdown depo berwarna ---- */
#sds-pt{ font-weight:900; font-size:14px; letter-spacing:.5px; color:var(--peran-tua); margin-left:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:36vw }
@media (max-width:1000px){ #sds-pt{ display:none } }
#info-depo.sds-info-depo-lama{ display:none !important }
#sds-chip-depo{ display:inline-flex; align-items:center; height:32px; padding:0 12px; border-radius:8px; background:var(--peran-latar); color:var(--peran-tua); border:1px solid var(--peran-terang); font-weight:700; font-size:13px; white-space:nowrap; max-width:200px; overflow:hidden; text-overflow:ellipsis; cursor:default }
body[data-peran="dispatcher"] #f-depo{ background-color:var(--peran-latar) !important; color:var(--peran-tua) !important; border-color:var(--peran-terang) !important; font-weight:700 }

/* ---- 15. KEPALA MENEMPEL & LAYAR SEMPIT seperti RTM (owner 29 Sep 2026: "tombol ciutkan menu tidak freeze",
   "ketika dikecilkan bagian header samakan dengan RTM saat dikecilkan") ---- */
/* kepala menempel di atas -> menu samping (tinggi = layar - kepala, lewat --sm-atas) selalu memperlihatkan tombol Ciutkan */
body.sm-aktif > header{ position:sticky; top:0; z-index:60 }
/* tetap SATU baris seperti RTM (versi.js lama memasang flex-wrap:wrap di atribut style) */
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="account"],[data-peran="program"]) > header{ flex-wrap:nowrap !important; overflow:visible }
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="account"],[data-peran="program"]) > header > *{ flex-shrink:0 }
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="account"],[data-peran="program"]) > header #sds-chip-depo{ flex-shrink:1; min-width:0 }
#kepala-kantor, #kepala-kantor > *, #sds-profil, #sds-profil .sp-avatar{ flex-shrink:0 }
@media (max-width:1000px){
  #sds-chip-depo{ max-width:160px }
}
@media (max-width:800px){
  /* status "online/antrean" diringkas agar kepala muat satu baris; tetap tampil bila ada antrean (warna kuning/merah) */
  body:is([data-peran="gudang"],[data-peran="kasir"]) > header [id$="-antrean"] span[style*="DCFCE7"]{ display:none }
}

/* ---- 16. SATU UKURAN untuk isian & tombol halaman PC (owner 29 Sep 2026: "kenapa kotaknya gede2 sekali", "tombol segarkan jangan mepet2",
   "usahakan 1 ukuran jadi tidak aneh", "rapikan semua") - semua kotak isian, pilihan & tombol di kartu = 36px ---- */
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=range]), select):not([multiple]):not([size]){
  height:36px !important; min-height:36px !important; padding-top:0 !important; padding-bottom:0 !important; line-height:34px }
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) .kartu button:not(.sm-item):not(.sm-ciut):not(table button):not([role=tab]){
  display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px !important; min-height:36px !important;
  padding:0 14px !important; font-size:13.5px !important; line-height:1 !important; white-space:nowrap; vertical-align:middle; flex-shrink:0; box-sizing:border-box }
/* tombol sesudah tulisan/isian dalam satu baris: beri jarak, jangan menempel */
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) .kartu :is(b,strong,span,label,input,select,a) + button:not(table button){ margin-left:8px }
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) .kartu [style*="display:flex"] > :is(b,strong,span,label,input,select,a) + button{ margin-left:0 }
/* baris flex berisi isian + tombol: sejajar tengah, tombol tidak ikut memanjang */
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) .kartu [style*="display:flex"]:has(> button){ align-items:flex-end }
/* <br> lama di form: tidak lagi menambah baris kosong 19px - jarak diatur oleh label (12px) & tombol (12px) */
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) .kartu > br{ content:""; display:block; height:0; margin:0 }
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) .kartu > br + br + button,
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) .kartu > br + button{ margin-top:12px }
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) .kartu > br + [style*="display:flex"]{ margin-top:8px !important }
/* menu profil: ganti peran (owner 29 Sep 2026) */
#sds-profil-menu button.spm-aktif{ background:var(--peran-latar); color:var(--peran-tua); font-weight:700 }
#sds-profil-menu button small{ font-size:11px; color:var(--tinta-samar); font-weight:500 }

/* ---- 17. Evaluasi v370 (owner 29 Sep 2026: "rapikan semua") ---- */
/* label sudah blok -> <br> sesudahnya hanya menambah baris kosong ("Tanggal", "Produk", "Dari" terlalu jauh dari kotaknya) */
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) .kartu label + br{ display:none }
/* tabel lebar tidak lagi membuat SELURUH halaman bergeser ke samping - cukup bergulir di dalam kartunya
   (RTM dikecualikan: ada daftar pilihan melayang .ip-daftar di dalam kartu) */
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="account"],[data-peran="program"]) .kartu{ overflow-x:auto }
/* layar sangat sempit: kepala tetap muat satu baris */
@media (max-width:640px){
  #sds-chip-depo{ max-width:136px }
  #kepala-kantor{ gap:4px !important }
  body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="account"],[data-peran="program"]) > header{ gap:8px !important; padding-left:10px !important; padding-right:10px !important }
}
/* chip depo: titik-titik (…) bila nama terlalu panjang, bukan terpotong mentah (flex tidak mendukung text-overflow) */
#sds-chip-depo{ display:inline-block !important; line-height:30px }
#sds-profil-menu .spm-sub{ padding:6px 10px 2px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-samar) }

/* ---- 18. KONTRAS HALAMAN (owner 30 Sep 2026: "header dan side bar ... supaya kontras dengan halaman") ----
   header & menu samping tetap putih; LATAR halaman kantor abu lebih gelap supaya header, menu, dan kartu putih menonjol */
:root{ --halaman-kantor:#E3E8EF }
html body[data-peran="dispatcher"], html body[data-peran="gudang"], html body[data-peran="kasir"], html body[data-peran="rtm"], html body[data-peran="account"], html body[data-peran="program"], html body.kantor{ background:var(--halaman-kantor) !important }
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) > header{ background:#fff !important; box-shadow:0 1px 0 var(--garis), 0 2px 8px rgba(11,31,51,.08) !important }
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) .sm-menu{ background:#fff; border-right:1px solid var(--garis-tebal, #C9D3DD); box-shadow:2px 0 8px rgba(11,31,51,.06) }
body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) .kartu{ border-color:#D5DCE5 }
/* aplikasi HP (owner 30 Sep 2026: "terapkan ke semua halaman role"): latar abu, kepala & kartu putih */
html body:is([data-peran="sales"],[data-peran="canvass"],[data-peran="koordinator"],[data-peran="driver"]){ background:var(--halaman-kantor) !important; --card:#FFFFFF }
body:is([data-peran="sales"],[data-peran="canvass"],[data-peran="koordinator"],[data-peran="driver"]) > header{ background:#fff !important; box-shadow:0 1px 0 var(--garis), 0 2px 8px rgba(11,31,51,.08) !important }

/* ---- 19. PENJELASAN BERGAMBAR (owner 30 Sep 2026: "buat penjelasan lebih mudah dipahami, lebih rapi", "less teks more drawing or ikon") ----
   .alur = langkah berikon dengan panah; .info-ikon = keterangan singkat berikon; .tip = satu baris catatan */
.alur{ display:flex; align-items:stretch; flex-wrap:wrap; gap:6px; margin:8px 0 10px }
.alur-l{ flex:1 1 110px; max-width:190px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; padding:10px 8px;
  background:var(--peran-latar, #F4F6F8); border:1px solid var(--peran-terang, #D8DEE9); border-radius:10px; line-height:1.25 }
.alur-ik{ font-size:22px; line-height:1; margin-bottom:2px }
.alur-l b{ font-size:13px; color:var(--peran-tua, #15123F) }
.alur-l small{ font-size:11.5px; color:var(--tinta-lembut, #4C4A6B) }
.alur-panah{ align-self:center; font-size:22px; font-weight:700; color:var(--peran, #5A6478); flex:none }
.info-ikon{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 }
.info-ikon > span{ background:var(--kertas-kantor, #F4F6F8); border:1px solid var(--garis, #D8DEE9); border-radius:8px; padding:6px 10px; font-size:13px }
p.tip{ font-size:12.5px; color:var(--tinta-lembut, #4C4A6B); margin:4px 0 8px }
p.tip.tip-awas{ background:#FFF7E6; border:1px solid #F5D9A8; color:#7A4B00; border-radius:8px; padding:6px 10px }
@media (max-width:640px){ .alur-panah{ display:none } .alur-l{ max-width:none; flex-basis:45% } }

/* ---- 20. KOTAK CARI PRODUK (input + daftar) (owner 30 Sep 2026: "jika kode atau nama produk dipencet, dropdown langsung terbuka dan ikon dropdown rapikan")
   panah bawaan browser (segitiga hitam, posisi turun) disembunyikan -> panah sama dengan pilihan lain, di tengah; klik = daftar terbuka (versi.js) */
input[list]{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C4A6B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 10px center !important; background-size:16px 16px !important; padding-right:34px !important }
input[list]::-webkit-calendar-picker-indicator{ display:none !important; opacity:0 !important }
.chip-auto{ display:inline-block; margin-left:8px; font-size:11.5px; font-weight:700; color:var(--peran-tua, #15123F); background:var(--peran-latar, #EEF2F5); border:1px solid var(--peran-terang, #D8DEE9); border-radius:999px; padding:1px 8px; vertical-align:middle }

/* ---- 21. KOTAK TANGGAL / JAM tidak menciut (owner 30 Sep 2026: "logo kalendar hilang" - #f-tgl Dispatcher tertekan jadi 30px) ---- */
input[type=date], input[type=datetime-local], input[type=month]{ min-width:150px !important; flex-shrink:0 !important }
input[type=time]{ min-width:110px !important; flex-shrink:0 !important }

/* ---- 22. KOTAK ANGKA (owner 30 Sep 2026: "jika penjelasan merupakan kondisi terkini ... buat paten seperti tabel atau kolom informasi")
   ringkasan kondisi terkini = kotak angka tetap, bukan kalimat berjalan: .info-angka > .ia-kotak (<b>angka</b><small>label</small>);
   .ia-kotak.awas = merah (perlu ditindak). Dibuat lewat fungsi kotakAngka([[angka, label, awas?], ...]) di tiap halaman ---- */
.info-angka{ display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:8px; margin:6px 0 10px; width:100% }
.ia-kotak{ background:#fff; border:1px solid var(--garis, #D8DEE9); border-radius:8px; padding:8px 10px; text-align:center; line-height:1.25; min-width:0 }
.ia-kotak b{ display:block; font-size:18px; font-weight:900; color:var(--peran-tua, #15123F); overflow-wrap:anywhere }
.ia-kotak small{ display:block; margin-top:2px; font-size:11.5px; font-weight:600; color:var(--tinta-lembut, #4C4A6B); overflow-wrap:anywhere }
.ia-kotak.awas{ background:#FBE3E2; border-color:#F2B8B5 }
.ia-kotak.awas b, .ia-kotak.awas small{ color:#9E1414 }

/* ---- 23. KEPALA RINGKAS layar sangat sempit (evaluasi 30 Sep 2026: kanan kepala Dispatcher menjorok 80 px keluar layar di lebar 347 px) ---- */
@media (max-width:520px){
  body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) > header{ gap:6px !important; padding-left:8px !important; padding-right:8px !important }
  body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) > header :is(.hd-baris, .baris-atas, .baris-kepala){ gap:6px !important }
  body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) > header :is(.peran, .hd-kiri > span[style*="border-radius"]){ display:none !important }
  body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) > header svg:not(.sds-ikon){ height:16px !important; width:auto }
  #sds-profil > svg:last-child{ display:none }
  #kepala-kantor{ gap:4px !important }
  #kepala-kantor > button:not(#sds-profil){ min-width:32px !important; padding:0 6px !important }
  #sds-chip-depo, #f-depo, #p-depo-tombol{ max-width:120px !important; min-width:90px !important }
}
@media (max-width:420px){
  #kepala-kantor > button[title="Muat ulang data"]{ display:none !important }
}

/* owner 3 Okt 2026 "pastikan jangan ada yang bisa di-select tulisannya, selain yang perlu di-copy, supaya tidak salah pencet":
   tulisan biasa (judul, tombol, label, kartu, menu) tidak bisa diseleksi; yang tetap bisa: isian, sel tabel data, kode/ID. */
body{ -webkit-user-select:none; user-select:none }
input, textarea, select, [contenteditable="true"], pre, code, td, .boleh-salin, .id-kode, .salin{ -webkit-user-select:text; user-select:text }
td button, td .chip, td .btn-mini, td .b{ -webkit-user-select:none; user-select:none }
/* owner 3 Okt: kursor tetap panah di atas tulisan biasa; isian = kursor teks; tombol/tautan = tangan penunjuk */
body{ cursor:default }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=button]):not([type=submit]), textarea, [contenteditable="true"]{ cursor:text }
a[href], button:not(:disabled), select, label[for], summary, [onclick]{ cursor:pointer }
/* owner 3 Okt: nama PT di kepala - layar lebar nama lengkap, layar sempit disingkat (PT SWS / PT LMS / PT PDS) */
.pt-singkat{ display:none }
@media (max-width:1000px){ .pt-penuh{ display:none } .pt-singkat{ display:inline } }

/* ---- 24. KEPALA SERAGAM semua halaman kantor (owner 3 Okt 2026: "bagian header samakan semua dengan bagian kasir utk yang memang sama").
   Acuan Kasir: tinggi 48px, tepi 24px, jarak 14px, logo 21px, cip peran sama. Nama PT di TENGAH atas (lebar: nama lengkap,
   <=1000px: singkatan PT SWS, 15px). Depo di KIRI tombol muat ulang: pil gaya RTM (32px, 14px tebal, radius 8px, latar tint peran);
   halaman satu depo (Kasir, Gudang) = label tetap tanpa panah, halaman lintas depo (Dispatcher, RTM) = dropdown pil. Hanya tampilan; kepala halaman anak di bingkai portal RTM tetap tersembunyi. ---- */
html:not([data-dalam-bingkai="1"]) body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) > header{
  display:flex !important; flex-direction:row !important; align-items:center !important; flex-wrap:nowrap !important; gap:14px !important;
  min-height:48px !important; padding:0 24px !important; box-sizing:border-box !important }
html:not([data-dalam-bingkai="1"]) body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]):not(.sm-aktif) > header{ position:relative }
html:not([data-dalam-bingkai="1"]) body:is([data-peran="dispatcher"],[data-peran="rtm"],[data-peran="program"]) > header > :is(.hd-baris, .baris-atas){ flex:1 1 auto !important; min-width:0; min-height:0 !important; display:flex !important; align-items:center !important; gap:14px !important; position:static !important }
html:not([data-dalam-bingkai="1"]) body[data-peran="dispatcher"] > header .hd-kiri{ gap:14px !important }
/* tombol menu (layar sempit): RTM disamakan dengan tombol menu bersama (menu_samping.js) */
html:not([data-dalam-bingkai="1"]) body:is([data-peran="rtm"],[data-peran="program"]) > header .tbl-menu{ width:36px !important; height:32px !important; padding:0 !important; margin-right:6px; flex:none; color:var(--tinta); align-items:center; justify-content:center }
html:not([data-dalam-bingkai="1"]) body:is([data-peran="rtm"],[data-peran="program"]) > header .tbl-menu .sds-ikon{ width:22px !important; height:22px !important }
/* nama PT: tengah atas, sama di semua halaman */
html:not([data-dalam-bingkai="1"]) body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) > header :is(#sds-pt, #pt-nama){
  display:block !important; position:absolute !important; left:50% !important; top:50% !important; transform:translate(-50%, -50%) !important;
  margin:0 !important; padding:0 !important; flex:none !important; order:0 !important; text-align:center !important; justify-self:auto !important;
  font:900 15px/1.3 system-ui, "Segoe UI", Roboto, sans-serif !important; letter-spacing:.5px !important; color:var(--peran-tua) !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:calc(100% - 640px) !important; width:auto !important }
html:not([data-dalam-bingkai="1"]) body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) > header :is(#sds-pt, #pt-nama):empty{ display:none !important }
@media (max-width:1000px){
  html:not([data-dalam-bingkai="1"]) body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) > header :is(#sds-pt, #pt-nama){ max-width:calc(100% - 520px) !important }
}
/* pemilih / label depo: pil gaya RTM */
html:not([data-dalam-bingkai="1"]) body:is([data-peran="gudang"],[data-peran="kasir"]) #sds-chip-depo,
html:not([data-dalam-bingkai="1"]) body:is([data-peran="rtm"],[data-peran="program"]) > header #p-depo-tombol,
html:not([data-dalam-bingkai="1"]) body[data-peran="dispatcher"] > header .hd-kanan .dp-depo-pil select#f-depo{
  height:32px !important; min-height:32px !important; box-sizing:border-box !important; border-radius:8px !important;
  font-size:14px !important; font-weight:700 !important; background-color:var(--peran-latar) !important; color:var(--peran-tua) !important;
  border:1px solid var(--peran-terang) !important; box-shadow:none !important; vertical-align:middle }
html:not([data-dalam-bingkai="1"]) body:is([data-peran="gudang"],[data-peran="kasir"]) #sds-chip-depo{ padding:0 12px !important; line-height:30px !important; cursor:default !important }
html:not([data-dalam-bingkai="1"]) body:is([data-peran="rtm"],[data-peran="program"]) > header #p-depo-tombol{ padding:0 10px 0 12px !important }
html:not([data-dalam-bingkai="1"]) body[data-peran="dispatcher"] > header .hd-kanan .dp-depo-pil select#f-depo{ padding:0 28px 0 32px !important }
html:not([data-dalam-bingkai="1"]) body[data-peran="dispatcher"] > header .hd-kanan .dp-depo-pil::before{ left:12px !important; font-size:14px !important }
/* jarak pil depo -> tombol muat ulang = 6px (sama dengan jarak antartombol kanan) */
html:not([data-dalam-bingkai="1"]) body:is([data-peran="rtm"],[data-peran="program"]) > header .baris-atas > .pilih-depo{ margin-left:auto !important }
html:not([data-dalam-bingkai="1"]) body:is([data-peran="rtm"],[data-peran="program"]) > header .baris-atas > .kanan{ margin-left:-8px !important; gap:6px !important }
@media (max-width:640px){
  html:not([data-dalam-bingkai="1"]) body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) > header{ gap:8px !important; padding-left:10px !important; padding-right:10px !important }
  html:not([data-dalam-bingkai="1"]) body:is([data-peran="dispatcher"],[data-peran="rtm"],[data-peran="program"]) > header :is(.hd-baris, .baris-atas, .hd-kiri){ gap:8px !important }
  html:not([data-dalam-bingkai="1"]) body:is([data-peran="rtm"],[data-peran="program"]) > header .baris-atas > .kanan{ margin-left:-4px !important; gap:4px !important }
}
@media (max-width:520px){
  html:not([data-dalam-bingkai="1"]) body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) > header{ gap:6px !important; padding-left:8px !important; padding-right:8px !important }
  html:not([data-dalam-bingkai="1"]) body:is([data-peran="dispatcher"],[data-peran="rtm"],[data-peran="program"]) > header :is(.hd-baris, .baris-atas, .hd-kiri){ gap:6px !important }
  html:not([data-dalam-bingkai="1"]) body:is([data-peran="rtm"],[data-peran="program"]) > header .baris-atas > .kanan{ margin-left:-2px !important }
}
@media (max-width:480px){
  html:not([data-dalam-bingkai="1"]) body:is([data-peran="dispatcher"],[data-peran="gudang"],[data-peran="kasir"],[data-peran="rtm"],[data-peran="account"],[data-peran="program"]) > header :is(#sds-pt, #pt-nama){ display:none !important }
}