/* ==========================================================================
   MBG CAFÉ — panel back-office & kasir
   DITULIS MOBILE-FIRST: aturan dasar = layar HP, lalu naik lewat min-width.
   Struktur: font → token → dasar → shell → komponen → tabel → form → sheet
             → spreadsheet → utilitas → layar besar → cetak
   ========================================================================== */

/* ---------- font di-host sendiri (tanpa permintaan ke Google, tanpa render-block) ---------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url("/assets/fonts/inter-600.woff2") format("woff2")}
@font-face{font-family:"Jakarta";font-style:normal;font-weight:800;font-display:swap;
  src:url("/assets/fonts/jakarta-800.woff2") format("woff2")}

:root{
  --oranye:#F2622E; --oranye-tua:#D9501E; --oranye-muda:#FFF1EA;
  --tinta:#0E1116; --tinta-2:#161B24; --tinta-3:#1F2632;
  --teks:#161B24; --teks-2:#5A6473; --teks-3:#8A93A2;
  --garis:#E6E8EC; --garis-2:#EFF1F4;
  --latar:#F5F6F8; --putih:#fff;
  --hijau:#0F8A5F; --hijau-muda:#E7F6EF;
  --kuning:#B7791F; --kuning-muda:#FFF6E5;
  --merah:#C63329; --merah-muda:#FDECEA;
  --biru:#2F5BEA; --biru-muda:#EDF1FE;

  /* satu tangga jarak dipakai seluruh aplikasi — sumber kerapian */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;
  /* Ritme vertikal: jarak antar-section & padding dalam kartu. Keduanya tumbuh
     bersama di layar besar, jadi proporsinya tetap sama.
     Angkanya sengaja RAPAT: aplikasi kasir dipakai sambil berdiri melayani
     pembeli — makin banyak baris yang muat dalam satu layar, makin sedikit
     menggulir. Longgar itu enak dilihat di halaman promosi, bukan di panel. */
  --seksi:12px; --pad-kartu:14px;
  --r:12px; --r-l:14px; --r-s:9px;
  --bayang:0 1px 2px rgba(16,24,40,.05), 0 4px 12px rgba(16,24,40,.05);
  --bayang-l:0 8px 28px rgba(16,24,40,.10);
  --sisi-lebar:236px;
  --tepi:14px;                  /* padding tepi halaman, tumbuh di layar besar */
  --atas-tinggi:52px;
  --isi-maks:1560px;            /* di layar ultra-lebar isi berhenti melebar & dipusatkan */
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-judul:"Jakarta","Inter",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{margin:0;font-family:var(--font);font-size:14.5px;line-height:1.55;color:var(--teks);
  background:var(--latar);-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
h1,h2,h3,h4{font-family:var(--font-judul);margin:0;letter-spacing:-.02em;line-height:1.25;font-weight:800}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
.ikon{flex:none}
.lewati{position:absolute;left:-9999px}
.lewati:focus{left:8px;top:8px;z-index:99;background:var(--putih);padding:8px 14px;border-radius:8px}
:focus-visible{outline:2px solid var(--oranye);outline-offset:2px}
::selection{background:var(--oranye);color:#fff}

/* batang gulir tipis di seluruh aplikasi — bawaan Windows terlalu kasar */
*{scrollbar-width:thin;scrollbar-color:#C7CCD6 transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#CFD4DD;border-radius:99px;border:3px solid transparent;
  background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#AEB5C2;background-clip:content-box;border:3px solid transparent}

/* ==========================================================================
   SHELL — HP dulu: sidebar jadi laci, topbar menempel di atas
   ========================================================================== */
.sisi{position:fixed;inset:0 auto 0 0;width:min(84vw,var(--sisi-lebar));background:var(--tinta);
  color:#C9D1DE;display:flex;flex-direction:column;z-index:40;
  transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--bayang-l)}
body.menu-buka .sisi{transform:none}
/* Kepala sidebar: setinggi topbar persis (var(--atas-tinggi)) supaya garis
   bawah menu dan garis bawah topbar berada di SATU garis horizontal. */
.sisi-merek{display:flex;align-items:center;gap:var(--s2);padding:0 var(--s3);flex:none;
  min-height:var(--atas-tinggi);border-bottom:1px solid #1B2230}
.merek{display:flex;align-items:center;gap:9px;color:#fff;flex:1;min-width:0}
.merek-logo{width:30px;height:30px;border-radius:9px;background:var(--oranye);display:grid;
  place-items:center;flex:none;color:#fff}
.merek-teks{font-family:var(--font-judul);font-weight:800;font-size:13.5px;letter-spacing:-.01em;
  display:flex;flex-direction:column;line-height:1.2;min-width:0}
.merek-teks small{font-family:var(--font);font-weight:500;font-size:10.5px;color:#7C8798;letter-spacing:.02em}
.sisi-tutup{display:block;background:none;border:0;color:#8A94A6;padding:6px;cursor:pointer}

/* Batang gulir menu kiri sengaja DISEMBUNYIKAN (tetap bisa digulir) — garis
   abu-abu vertikal di tepi menu gelap terlihat seperti cacat tampilan. */
.sisi-nav{flex:1;overflow-y:auto;padding:var(--s2) 9px var(--s3);overscroll-behavior:contain;
  scrollbar-width:none;-ms-overflow-style:none}
.sisi-nav::-webkit-scrollbar{width:0;height:0;display:none}
.sisi-grup{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#6B7688;padding:var(--s3) 9px 3px}
.sisi-nav > .sisi-grup:first-child{padding-top:2px}
.sisi-item{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:var(--r-s);
  font-size:13.5px;font-weight:500;color:#B9C2D0;transition:background .13s,color .13s}
.sisi-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sisi-item:hover{background:#1B2230;color:#fff}
.sisi-item.aktif{background:var(--oranye);color:#fff;box-shadow:0 4px 12px rgba(242,98,46,.32)}
.sisi-item.aktif .ikon{color:#fff}
.lencana{font-style:normal;font-size:11px;font-weight:700;background:var(--merah);color:#fff;
  min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 5px}
.sisi-item.aktif .lencana{background:rgba(255,255,255,.25)}
/* Kaki menu sengaja setipis mungkin: isinya cuma nomor versi, dan setiap piksel
   di sini memakan ruang daftar menu. */
.sisi-kaki{flex:none;padding:6px 9px;border-top:1px solid #202836;background:var(--tinta)}
.sisi-versi{text-align:center;font-size:10px;color:#4E5866;padding:3px 0 0;letter-spacing:.03em}

.tirai{position:fixed;inset:0;background:rgba(14,17,22,.45);z-index:35;
  animation:pudar .16s ease}
@keyframes pudar{from{opacity:0}to{opacity:1}}

.atas{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--garis);
  display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--tepi);min-height:var(--atas-tinggi)}
.atas-judul{flex:1;min-width:0}
.atas-judul h1{font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.2}
.atas-judul p{margin:0;font-size:11.5px;color:var(--teks-2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;line-height:1.3}
/* Semua tombol di topbar dipaksa satu ukuran dari sini — halaman tidak perlu
   (dan tidak boleh) mengatur ukurannya sendiri. Di layar sempit label teksnya
   disembunyikan supaya deretan tombol tidak pernah mendorong judul halaman. */
.atas-aksi{display:flex;align-items:center;gap:6px;flex:none}
/* Tinggi 40px DIPAKSA dari sini (menang atas .tbl-kecil karena dua kelas):
   halaman tidak bisa lagi menyelipkan tombol berukuran lain ke topbar —
   itulah yang membuat tombol "Pasang" tampak lebih pendek dari tetangganya. */
.atas-aksi .tbl{--tbl-t:40px;--tbl-x:12px;--tbl-f:13.5px;--tbl-r:10px}
/* jam & profil ikut tinggi yang sama supaya seluruh deretan topbar satu garis */
.atas-aksi .jam-toko{height:40px}
.atas-aksi .tbl .lbl{display:none}
@media (min-width:900px){
  .atas-aksi .tbl{--tbl-x:15px}
  .atas-aksi .tbl .lbl{display:inline}
}
.tombol-menu{display:inline-flex;background:none;border:1px solid var(--garis);border-radius:var(--r-s);
  padding:7px;cursor:pointer;color:var(--teks);flex:none}
.jam-toko{display:none;align-items:center;gap:4px;padding:0 11px;border-radius:var(--r-s);
  background:var(--latar);border:1px solid var(--garis)}
.jam-toko strong{font-size:13.5px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.jam-toko small{font-size:10px;font-weight:700;color:var(--teks-3);letter-spacing:.04em}
.profil{display:flex;align-items:center;gap:8px}
.profil-avatar{width:32px;height:32px;border-radius:50%;background:var(--tinta);color:#fff;
  display:grid;place-items:center;font-size:11.5px;font-weight:700;letter-spacing:.02em;flex:none}
.profil-teks{display:none;flex-direction:column;line-height:1.2}
.profil-teks strong{font-size:13px}
.profil-teks small{font-size:11px;color:var(--teks-2)}

/* Ruang bawah dulu 72px — sisa dari masa ada pita melayang di dasar layar.
   Pita itu sudah tidak ada, jadi ruang itu murni menganggur. */
.isi{padding:var(--seksi) var(--tepi) var(--s6);max-width:var(--isi-maks)}

/* ---------- notifikasi ---------- */
.notif{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--r);
  margin-bottom:var(--s4);font-weight:500;border:1px solid transparent;font-size:13.5px}
.notif .ikon{flex:none}
.notif-ok{background:var(--hijau-muda);color:#0B6647;border-color:#BFE6D5}
.notif-galat,.notif-error{background:var(--merah-muda);color:#9E2B22;border-color:#F5C9C4}
.notif-info{background:var(--biru-muda);color:#22409E;border-color:#CBD7FB}
.notif-peringatan{background:var(--kuning-muda);color:#8A5B12;border-color:#F3DFB4}

/* ==========================================================================
   KARTU & GRID — kunci kerapian: kartu di dalam grid selalu setinggi barisnya
   ========================================================================== */
/* Jarak antar-section dikendalikan SATU variabel (--seksi) supaya semua
   halaman punya ritme vertikal yang sama, bukan margin ad-hoc per halaman. */
.kartu{background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-l);
  box-shadow:var(--bayang);margin-bottom:var(--seksi);overflow:hidden;
  display:flex;flex-direction:column}
.kartu:last-child{margin-bottom:0}
.kartu-kepala{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--pad-kartu);
  border-bottom:1px solid var(--garis-2);flex-wrap:wrap;min-height:48px}
.kartu-kepala h2{font-size:14.5px;font-weight:800;flex:1;min-width:140px}
.kartu-kepala p{margin:1px 0 0;font-size:12px;color:var(--teks-2);font-weight:400;
  letter-spacing:0;text-transform:none}
.kartu-kepala > .baris,.kartu-kepala > .tbl-deret{flex:none}
.kartu-isi{padding:var(--pad-kartu);flex:1}
.kartu-isi > :first-child{margin-top:0}
.kartu-isi > :last-child{margin-bottom:0}
/* tabel menempel tepi kartu — tanpa ini garis tabel tidak sejajar tepi kartu */
.kartu > .tabel-bungkus{margin:0}
.kartu-kaki{padding:var(--s2) var(--pad-kartu);border-top:1px solid var(--garis-2);background:#FAFBFC;
  display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;margin-top:auto;min-height:46px}

/* judul section berdiri sendiri (di luar kartu) */
.seksi-judul{display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s3);flex-wrap:wrap}
.seksi-judul h2{font-size:15px;flex:1;min-width:140px}
.seksi-judul p{margin:2px 0 0;font-size:12.5px;color:var(--teks-2)}

/* min-width:0 wajib untuk semua item grid — tanpa ini konten lebar (tabel, grafik)
   memaksa kolom melebihi layar dan halaman jadi bisa digeser ke samping di HP. */
.grid{display:grid;gap:var(--seksi);align-items:stretch;margin-bottom:var(--seksi)}
.grid:last-child{margin-bottom:0}
.grid > *{min-width:0}
.grid > .kartu{margin-bottom:0;height:100%}     /* kolom kiri & kanan selalu sejajar */
.grid-4,.grid-3,.grid-2,.grid-2-1{grid-template-columns:1fr}
.grid-4{grid-template-columns:repeat(2,1fr)}     /* KPI tetap 2 kolom di HP */

/* Kolom dasbor: kartu ditumpuk rapat dan kartu TERAKHIR meregang, sehingga kedua
   kolom berakhir di garis yang sama — kaki kartu (tombol "Lihat semua") ikut turun
   ke bawah, bukan menyisakan ruang menganggur. */
.grid-2-1 > div{display:flex;flex-direction:column;gap:var(--seksi);min-width:0}
.grid-2-1 > div > .kartu{margin-bottom:0}
/* Kartu terakhir meregang HANYA bila kolom itu berisi lebih dari satu kartu.
   Dulu berlaku untuk semua: kolom berisi satu tabel pendek ikut ditarik setinggi
   kolom sebelah, hasilnya kartu putih menganga ratusan piksel di bawah tabel. */
.grid-2-1 > div:has(> .kartu:nth-child(2)) > .kartu:last-child{flex:1}

/* ---------- KPI ---------- */
.kpi{background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-l);
  padding:var(--s3);display:flex;gap:10px;align-items:flex-start;box-shadow:var(--bayang);
  height:100%;min-height:66px}
.kpi-ikon{width:32px;height:32px;border-radius:9px;background:var(--oranye-muda);color:var(--oranye);
  display:grid;place-items:center;flex:none}
.kpi > div{min-width:0}
.kpi-label{font-size:11.5px;color:var(--teks-2);font-weight:500;display:block}
.kpi-nilai{font-family:var(--font-judul);font-size:21px;font-weight:800;letter-spacing:-.025em;
  display:block;margin-top:1px;line-height:1.2;font-variant-numeric:tabular-nums}
.kpi-catatan{font-size:11px;color:var(--teks-3);display:block;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis}
.kpi-hijau .kpi-ikon{background:var(--hijau-muda);color:var(--hijau)}
.kpi-merah .kpi-ikon{background:var(--merah-muda);color:var(--merah)}
.kpi-kuning .kpi-ikon{background:var(--kuning-muda);color:var(--kuning)}
.kpi-biru .kpi-ikon{background:var(--biru-muda);color:var(--biru)}

/* ==========================================================================
   TOMBOL — SATU sistem untuk seluruh aplikasi.
   Warna diatur lewat 4 variabel per varian (--bg/--bg-h/--fg/--bd), JANGAN
   dengan menimpa `background` langsung: dulu `.tbl:hover` (2 kelas) menang
   atas `.tbl-merah` (1 kelas), sehingga tombol merah/hijau berubah jadi
   putih ber-teks putih alias HILANG saat disorot.
   Ukuran dikunci pada 3 tinggi saja: 34 / 40 / 48.
   ========================================================================== */
.tbl{
  --bg:var(--putih); --bg-h:#F1F3F6; --fg:var(--teks); --bd:var(--garis); --bd-h:#D7DBE2;
  --tbl-t:40px; --tbl-x:15px; --tbl-f:13.5px; --tbl-r:10px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:var(--tbl-t);min-height:var(--tbl-t);padding:0 var(--tbl-x);
  border-radius:var(--tbl-r);border:1px solid var(--bd);font-weight:600;
  font-size:var(--tbl-f);line-height:1;cursor:pointer;text-align:center;
  transition:background .14s,border-color .14s,color .14s,transform .09s,box-shadow .14s;
  white-space:nowrap;background:var(--bg);color:var(--fg);
  -webkit-tap-highlight-color:transparent}
.tbl:hover{background:var(--bg-h);border-color:var(--bd-h)}
.tbl:active{transform:scale(.98)}
.tbl .ikon{width:1.15em;height:1.15em}

.tbl-utama{--bg:var(--oranye);--bg-h:var(--oranye-tua);--fg:#fff;--bd:var(--oranye);--bd-h:var(--oranye-tua)}
.tbl-gelap{--bg:var(--tinta);--bg-h:var(--tinta-3);--fg:#fff;--bd:var(--tinta);--bd-h:var(--tinta-3)}
.tbl-hijau{--bg:var(--hijau);--bg-h:#0C744F;--fg:#fff;--bd:var(--hijau);--bd-h:#0C744F}
.tbl-merah{--bg:var(--merah);--bg-h:#A82A21;--fg:#fff;--bd:var(--merah);--bd-h:#A82A21}
.tbl-hantu{--bg:transparent;--bg-h:var(--garis-2);--fg:var(--teks-2);--bd:transparent;--bd-h:var(--garis-2)}
.tbl-hantu:hover{color:var(--teks)}
.tbl-garis{--bg:transparent;--bg-h:var(--oranye-muda);--fg:var(--oranye-tua);--bd:#F6C6B1;--bd-h:var(--oranye)}

/* tiga ukuran resmi — tak ada tinggi tombol lain di aplikasi ini */
.tbl-kecil{--tbl-t:34px;--tbl-x:11px;--tbl-f:12.5px;--tbl-r:8px}
.tbl-besar{--tbl-t:48px;--tbl-x:22px;--tbl-f:15px;--tbl-r:12px}
.tbl-ikon{--tbl-x:0;width:var(--tbl-t);padding:0}
.tbl-blok{width:100%}
.tbl:disabled,.tbl[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}

/* Tombol SIMPAN sebuah form selalu memakai kelas ini — satu kelas, satu ukuran.
   Dulu tiap halaman memilih sendiri: ada yang tbl-besar, ada yang biasa, ada
   yang merah; hasilnya tombol "Simpan" terlihat berbeda dari halaman ke halaman.
   Di HP ia memenuhi lebar (sasaran sentuh penuh), di layar besar melebar
   secukupnya dengan lebar minimum yang sama untuk semua halaman. */
.tbl-simpan{--tbl-t:48px;--tbl-x:22px;--tbl-f:15px;--tbl-r:12px;width:100%}
@media (min-width:600px){.tbl-simpan{width:auto;min-width:184px}}

/* Deret tombol di kaki kartu ikut aturan yang sama: penuh & sama lebar di HP,
   menyusut ke kanan di layar besar. Tidak ada tombol "nanggung" lagi. */
.kartu-kaki > .tbl{flex:1 1 auto;justify-content:center}
@media (min-width:600px){.kartu-kaki > .tbl{flex:0 0 auto}}
/* Kalau satu kaki berisi tombol simpan, SEMUA tombol di kaki itu ikut tingginya.
   Ini yang mencegah pasangan "Simpan hitungan" (48px) + "Posting" (40px) berdiri
   bersebelahan dengan tinggi berbeda. */
.kartu-kaki:has(.tbl-simpan) > .tbl,
.tbl-deret:has(.tbl-simpan) > .tbl{--tbl-t:48px;--tbl-f:15px;--tbl-r:12px}

/* deret tombol: jarak seragam, dan di HP tombol memenuhi lebar supaya
   tidak ada tombol nanggung yang bikin baris terlihat tidak simetris */
.tbl-deret{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.tbl-deret > .tbl{flex:1 1 auto}
@media (min-width:600px){.tbl-deret > .tbl{flex:0 0 auto}}

/* ---------- pil / badge ---------- */
.pil{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  font-size:11.5px;font-weight:600;line-height:1.6;white-space:nowrap}
.pil-hijau{background:var(--hijau-muda);color:#0B6647}
.pil-merah{background:var(--merah-muda);color:#9E2B22}
.pil-kuning{background:var(--kuning-muda);color:#8A5B12}
.pil-biru{background:var(--biru-muda);color:#22409E}
.pil-abu{background:#F0F2F5;color:var(--teks-2)}
.pil-oranye{background:var(--oranye-muda);color:var(--oranye-tua)}

/* ==========================================================================
   TABEL — SATU gaya untuk seluruh aplikasi.
   Setiap tabel wajib berkolom nomor (.kol-no) di paling kiri.
   ========================================================================== */
.tabel-bungkus{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
table.tabel{width:100%;border-collapse:collapse;font-size:13.5px}
.tabel th{text-align:left;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--teks-2);font-weight:700;padding:8px var(--s3);background:#F7F9FB;
  border-bottom:1px solid var(--garis);white-space:nowrap;vertical-align:middle}
.tabel td{padding:8px var(--s3);border-bottom:1px solid var(--garis-2);vertical-align:middle}
.tabel tbody tr:last-child td{border-bottom:0}
.tabel tbody tr{transition:background .1s}
.tabel tbody tr:hover td{background:#FBFCFD}
.tabel .kanan,.tabel th.kanan{text-align:right}
.tabel .tengah,.tabel th.tengah{text-align:center}
.tabel .angka{font-variant-numeric:tabular-nums;white-space:nowrap}
.tabel .aksi{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.tabel-rapat td{padding:8px var(--s3)}
.baris-mati td{opacity:.55}
.tabel tfoot td{background:#F7F9FB;font-weight:700;border-top:1px solid var(--garis);border-bottom:0}

/* ---- kolom nomor urut: sama persis di semua tabel ---- */
.tabel th.kol-no{width:46px;padding-left:var(--s4);text-align:right;color:var(--teks-3)}
.tabel td.kol-no{width:46px;padding-left:var(--s4);text-align:right;color:var(--teks-3);
  font-variant-numeric:tabular-nums;font-size:12px;font-weight:600;white-space:nowrap}
.tabel tbody tr:hover td.kol-no{color:var(--teks-2)}
/* Nomor otomatis: dihitung CSS, jadi ia benar sendiri setelah baris disaring
   ATAU diurutkan ulang — tanpa satu baris JavaScript pun. Dipakai tabel yang
   isinya dimainkan di peramban; tabel berhalaman memakai nomor dari server. */
.no-otomatis tbody{counter-reset:baris}
.no-otomatis tbody tr:not([hidden]){counter-increment:baris}
/* Angkanya digambar TEPAT SATU KALI. Tabel panel menaruhnya di sel; lembar
   audit menaruhnya di <span class="sel"> karena sel lembar tidak berpadding.
   Dua aturan ini WAJIB saling eksklusif — kalau keduanya kena sel yang sama,
   nomornya tercetak dua kali di baris yang sama. */
.tabel.no-otomatis tbody tr:not([hidden]) td.kol-no::before{content:counter(baris)}
.lembar.no-otomatis tbody tr:not([hidden]) td.kol-no > .sel::before{content:counter(baris)}
.tabel-satuan.no-otomatis tbody tr:not([hidden]) td.kol-no::before{content:counter(baris)}

/* ---- di HP tabel padat jadi terlalu sempit: beri lebar minimum lalu geser ---- */
@media (max-width:599px){
  .tabel th,.tabel td{padding:10px 10px}
  .tabel th.kol-no,.tabel td.kol-no{width:34px;padding-left:var(--s3);font-size:11.5px}
  .tabel-bungkus{margin:0 calc(var(--s4) * -1);padding:0}
  .tabel-bungkus > table{min-width:560px}
  .tabel-bungkus > table th:first-child,.tabel-bungkus > table td:first-child{padding-left:var(--s4)}
  .tabel-bungkus > table th:last-child,.tabel-bungkus > table td:last-child{padding-right:var(--s4)}
  /* tabel yang muat penuh di HP (dinilai per halaman) tidak perlu digeser */
  .tabel-bungkus.muat > table{min-width:0}
  .tabel-bungkus.muat{margin:0}
}

.produk-sel{display:flex;align-items:center;gap:11px;min-width:190px}
/* contain + latar putih: foto produk (botol tinggi, bungkus mie) tetap terlihat
   utuh di kotak 36px — dengan cover, yang tampak cuma potongan tengahnya */
.produk-avatar{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  font-weight:700;font-size:12px;flex:none;object-fit:contain;letter-spacing:-.01em;
  background:var(--putih);border:1px solid var(--garis-2)}
.produk-nama{font-weight:600;line-height:1.3}
.produk-meta{font-size:11.5px;color:var(--teks-3)}

.kosong{text-align:center;padding:40px var(--s5);color:var(--teks-2)}
.kosong-ikon{width:52px;height:52px;border-radius:14px;background:var(--garis-2);color:var(--teks-3);
  display:grid;place-items:center;margin:0 auto var(--s3)}
.kosong h3{font-size:15px;margin-bottom:4px}
.kosong p{margin:0;font-size:13px}

/* ---------- form ---------- */
.form-baris{display:grid;gap:var(--s3);margin-bottom:var(--s4);grid-template-columns:1fr}
label.lb{display:block;font-size:12.5px;font-weight:600;color:var(--teks-2);margin-bottom:5px}
/* min-width:0 WAJIB. Kolom isian punya lebar minimum bawaan (≈20 karakter) yang
   menang atas width:100%, jadi tanpa ini kotak cari menolak menyusut dan
   menembus keluar kartu di layar HP — bukan menggeser halaman, tapi menimpa
   apa pun di sebelahnya. */
.inp,select.inp,textarea.inp{width:100%;min-width:0;padding:11px 12px;border:1px solid var(--garis);
  border-radius:10px;font-size:16px;background:var(--putih);color:var(--teks);
  transition:border-color .14s,box-shadow .14s}
/* 16px di HP mencegah Safari/iOS ikut memperbesar halaman saat kolom disentuh */
.inp:focus{border-color:var(--oranye);box-shadow:0 0 0 3px rgba(242,98,46,.13);outline:none}
.inp:disabled{background:#F5F6F8;color:var(--teks-3)}
textarea.inp{min-height:88px;resize:vertical}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='m1 1 5 5 5-5' stroke='%235A6473' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.bantuan{font-size:11.5px;color:var(--teks-3);margin-top:5px}
.inp-grup{display:flex;gap:var(--s2)}
.inp-grup .inp{flex:1;min-width:0}
.inp-imbuhan{display:flex;align-items:center;padding:0 12px;background:#F5F6F8;border:1px solid var(--garis);
  border-radius:10px;font-size:13px;color:var(--teks-2);white-space:nowrap;flex:none}
/* pemilih ikon kategori — radio yang tampil sebagai petak ikon */
.pilih-ikon{display:flex;flex-wrap:wrap;gap:var(--s2)}
.pilih-ikon-item{cursor:pointer}
.pilih-ikon-item input{position:absolute;opacity:0;width:0;height:0}
.pilih-ikon-item span{width:42px;height:42px;border-radius:11px;border:1px solid var(--garis);
  background:var(--putih);color:var(--teks-2);display:grid;place-items:center;
  transition:border-color .13s,background .13s,color .13s}
.pilih-ikon-item:hover span{border-color:#C9CFD9;color:var(--teks)}
.pilih-ikon-item input:checked + span{background:var(--oranye-muda);border-color:var(--oranye);
  color:var(--oranye-tua);box-shadow:0 0 0 3px rgba(242,98,46,.13)}
.pilih-ikon-item input:focus-visible + span{outline:2px solid var(--oranye);outline-offset:2px}

.centang{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;cursor:pointer;padding:4px 0}
.centang input{width:18px;height:18px;accent-color:var(--oranye);margin-top:2px;flex:none}
.centang small{display:block;color:var(--teks-3);font-size:11.5px}

/* Di HP kotak cari mengambil satu baris penuh; saringan lain turun ke bawahnya.
   Memaksakan semuanya sebaris membuat kotak cari terhimpit jadi beberapa piksel. */
.pencarian{position:relative;flex:1 1 100%;min-width:0}
.pencarian .ikon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--teks-3)}
.pencarian .inp{padding-left:36px}

.saring{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;width:100%}
/* saringan di dalam kepala kartu selalu mengambil sisa ruang — dulu tiap
   halaman menuliskan style="flex:1" sendiri, dan yang lupa jadi terlihat beda */
.kartu-kepala > .saring,.lembar-alat > .saring{flex:1 1 auto;min-width:0}
.saring-kanan{justify-content:flex-end;margin-left:auto}
/* "> " WAJIB: aturan ini mengubah isian jadi item flex berlebar-otomatis.
   Tanpa pembatas anak-langsung ia juga mengenai isian DI DALAM .pencarian,
   yang membuat isian itu kembali ke lebar bawaannya (±241px) lalu menembus
   keluar kotaknya di layar HP. */
.saring > .inp{width:auto;min-width:0;flex:1 1 140px;font-size:14px}
.saring > .tbl{flex:0 0 auto}
@media (min-width:600px){.pencarian{flex:1 1 220px}}

/* ---------- halaman pesan (login, 403) ---------- */
.halaman-pesan{display:grid;place-items:center;min-height:100vh;min-height:100dvh;
  padding:var(--s5);background:var(--latar)}
.kotak-pesan{background:var(--putih);border:1px solid var(--garis);border-radius:20px;padding:28px 24px;
  max-width:420px;width:100%;text-align:center;box-shadow:var(--bayang-l)}
.ikon-pesan{width:60px;height:60px;border-radius:18px;background:var(--oranye-muda);
  color:var(--oranye);display:grid;place-items:center;margin:0 auto var(--s3)}
/* penanda naik/turun pada KPI — dulu karakter ▲▼, sekarang ikon SVG */
.tren{display:inline-flex;align-items:center;gap:3px;font-weight:600}
.tren .ikon{width:11px;height:11px}
.kotak-pesan h1{font-size:21px;margin-bottom:10px}
.kotak-pesan p{color:var(--teks-2);margin:0 0 8px}
.kotak-pesan .kecil{font-size:12.5px;color:var(--teks-3)}
.kotak-pesan .tbl{margin:14px 6px 0}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(14,17,22,.55);display:grid;place-items:end center;
  padding:0;z-index:60;animation:pudar .14s ease}
.modal[hidden]{display:none}
.modal-kotak{background:var(--putih);border-radius:20px 20px 0 0;max-width:520px;width:100%;
  box-shadow:var(--bayang-l);max-height:92vh;max-height:92dvh;overflow:auto;
  animation:naik .2s cubic-bezier(.22,1,.36,1);padding-bottom:env(safe-area-inset-bottom)}
@keyframes naik{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}}
.modal-kepala{padding:var(--s4);border-bottom:1px solid var(--garis-2);display:flex;
  align-items:center;gap:var(--s3);position:sticky;top:0;background:var(--putih);z-index:1}
.modal-kepala h3{font-size:16px;flex:1;min-width:0}
.modal-isi{padding:var(--s4)}
/* Kaki modal: sepasang tombol yang SELALU sama tinggi dan sama lebar.
   Dulu tiap modal menulis ukurannya sendiri — "Batal" 40px berdampingan dengan
   "Selesaikan" 48px, dan lebarnya mengikuti panjang teks. Ukuran diputuskan
   di sini, jadi halaman tidak perlu (dan tidak boleh) mengaturnya lagi. */
.modal-kaki{padding:var(--s3) var(--s4);border-top:1px solid var(--garis-2);
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--s2);
  background:#FAFBFC;position:sticky;bottom:0;
  padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom))}
.modal-kaki .tbl{--tbl-t:48px;--tbl-f:14.5px;--tbl-r:12px;width:100%;min-width:0}
@media (min-width:600px){
  .modal-kaki{display:flex;justify-content:flex-end;padding-bottom:var(--s3)}
  .modal-kaki .tbl{width:auto;min-width:136px}
}

/* ==========================================================================
   SPREADSHEET (halaman audit) — grid padat bergaya lembar kerja
   ========================================================================== */
.lembar-bungkus{overflow:auto;max-height:calc(100dvh - 230px);overscroll-behavior:contain;
  border:1px solid var(--garis);border-radius:var(--r);background:var(--putih)}
table.lembar{border-collapse:separate;border-spacing:0;font-size:13px;width:100%;
  font-variant-numeric:tabular-nums}
.lembar th,.lembar td{border-right:1px solid var(--garis-2);border-bottom:1px solid var(--garis-2);
  padding:0;white-space:nowrap}
.lembar thead th{position:sticky;top:0;z-index:3;background:#F3F5F8;color:var(--teks-2);
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  padding:9px 10px;border-bottom:1px solid var(--garis);text-align:left;user-select:none}
.lembar thead th.urut{cursor:pointer}
.lembar thead th.urut:hover{background:#E9EDF3;color:var(--teks)}
.lembar thead th > span.kepala{display:inline-flex;align-items:center;gap:4px}
/* penanda arah urut: ikon SVG, bukan karakter ▲▼ */
.lembar thead th .arah{opacity:.35;flex:none;transition:opacity .12s,transform .12s,color .12s}
.lembar thead th.urut:hover .arah{opacity:.7}
.lembar thead th[aria-sort] .arah{opacity:1;color:var(--oranye)}
.lembar thead th[aria-sort="descending"] .arah{transform:rotate(180deg)}
.lembar th.kol-no,.lembar td.kol-no{width:44px;text-align:right;color:var(--teks-3);
  font-size:11.5px;font-weight:600}
.lembar td.kol-no > .sel{text-align:right;padding-right:10px}
.lembar td{padding:0}
.lembar td > .sel{display:block;padding:8px 10px;min-height:34px;line-height:18px}
.lembar td.kanan > .sel{text-align:right}
.lembar td.tengah > .sel{text-align:center}
/* Dua kolom pertama (nomor + nama) ikut membeku supaya baris tetap bisa
   dikenali saat lembar digeser jauh ke kanan. */
.lembar .beku-no,.lembar .beku{position:sticky;z-index:2;background:var(--putih)}
.lembar .beku-no{left:0;width:44px}
.lembar .beku{left:44px;box-shadow:1px 0 0 var(--garis);max-width:150px}
.lembar .beku .sel{overflow:hidden;text-overflow:ellipsis}
.lembar thead .beku-no,.lembar thead .beku{z-index:4;background:#F3F5F8}
.lembar tbody tr:nth-child(even) td{background:#FCFDFE}
.lembar tbody tr:nth-child(even) .beku-no,
.lembar tbody tr:nth-child(even) .beku{background:#FCFDFE}
.lembar tbody tr:hover td{background:var(--oranye-muda)}
.lembar tbody tr:hover .beku-no,.lembar tbody tr:hover .beku{background:var(--oranye-muda)}
.lembar tbody tr.baris-pilih td{background:#FFF6F2}
.lembar-input{width:100%;border:0;background:transparent;padding:8px 10px;font:inherit;
  font-size:13px;text-align:right;font-variant-numeric:tabular-nums;min-height:34px;color:var(--teks)}
.lembar-input:focus{outline:2px solid var(--oranye);outline-offset:-2px;background:#fff;
  box-shadow:inset 0 0 0 99px #FFF9F6}
.lembar-input::placeholder{color:#C2C8D2}
.lembar .plus{color:var(--hijau);font-weight:600}
.lembar .minus{color:var(--merah);font-weight:600}
.lembar-kaki{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;padding:var(--s3) var(--s4);
  border-top:1px solid var(--garis);background:#FAFBFC;font-size:12.5px;color:var(--teks-2)}
.lembar-kaki b{color:var(--teks);font-variant-numeric:tabular-nums}
.lembar-alat{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin-bottom:var(--s3)}
.lembar-kolom{display:flex;gap:6px;flex-wrap:wrap}
.kol-tbl{border:1px solid var(--garis);background:var(--putih);border-radius:8px;padding:5px 10px;
  font-size:12px;font-weight:600;color:var(--teks-2);cursor:pointer}
.kol-tbl[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:#fff}

/* ==========================================================================
   MODE LAYAR PENUH (Lembar Audit) — tanpa sidebar & topbar, lembar mengisi
   seluruh tinggi layar supaya satu layar = sebanyak mungkin baris.
   ========================================================================== */
body.layar-penuh{height:100dvh;overflow:hidden;background:var(--putih)}
.layar{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--latar)}
.layar-atas{flex:none;display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);
  background:var(--tinta);color:#fff;min-height:52px;padding-top:max(var(--s2),env(safe-area-inset-top))}
.layar-atas h1{font-size:14.5px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.layar-atas .redup{color:#8A94A6}
.layar-atas .tbl{--bg:#1B2230;--bg-h:#28303F;--fg:#D7DEE9;--bd:#28303F;--bd-h:#394355}
.layar-atas .tbl-utama{--bg:var(--oranye);--bg-h:var(--oranye-tua);--fg:#fff;
  --bd:var(--oranye);--bd-h:var(--oranye-tua)}
.layar-atas .inp{background:#1B2230;border-color:#2A3240;color:#fff;height:34px;padding:0 11px}
.layar-atas .inp::placeholder{color:#6B7688}
.layar-alat{flex:none;display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);
  background:var(--putih);border-bottom:1px solid var(--garis);overflow-x:auto;
  scrollbar-width:none}
.layar-alat::-webkit-scrollbar{display:none}
/* Rantai flex WAJIB utuh dari .layar sampai .lembar-bungkus, kalau tidak
   lembar tidak tahu tinggi yang tersedia dan kembali setinggi isinya. */
.layar-isi{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--putih)}
.layar-isi > .lembar-alat{flex:none}
.layar-isi > form{flex:1;min-height:0;display:flex;flex-direction:column}
.layar-isi .lembar-bungkus{flex:1;min-height:0;max-height:none;border:0;border-radius:0;
  margin:0}
.layar-isi .lembar-kaki{flex:none;padding-bottom:max(var(--s3),env(safe-area-inset-bottom))}
/* di layar penuh, tinggi baris dirapatkan supaya lebih banyak baris muat */
body.layar-penuh .lembar td > .sel{padding:6px 10px;min-height:30px}
body.layar-penuh .lembar-input{padding:6px 10px;min-height:30px}

/* ---------- utilitas ---------- */
.baris{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.baris-antar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.dorong{margin-left:auto}
/* jarak: hanya tangga ini yang boleh dipakai — tidak ada margin inline ad-hoc */
.mt0{margin-top:0}.mb0{margin-bottom:0}
.mt8{margin-top:var(--s2)}.mt12{margin-top:var(--s3)}.mt16{margin-top:var(--s4)}
.mb8{margin-bottom:var(--s2)}.mb16{margin-bottom:var(--s4)}
.sebaris{display:inline}
.dr-total{background:#FAFBFC;border-top:1px solid var(--garis)}
.dr-total .dr-teks strong{font-weight:700}
.kecil{font-size:12.5px}
.redup{color:var(--teks-2)}
.redup-2{color:var(--teks-3)}
.tebal{font-weight:700}
.angka{font-variant-numeric:tabular-nums}
.hijau{color:var(--hijau)}.merah{color:var(--merah)}.kuning{color:var(--kuning)}
.nowrap{white-space:nowrap}
.sembunyi{display:none!important}
.hanya-hp{display:initial}
.hanya-besar{display:none}

.bar{height:6px;border-radius:3px;background:var(--garis-2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--oranye);border-radius:3px}

.daftar-ringkas{display:flex;flex-direction:column}
.dr-item{display:flex;align-items:center;gap:11px;padding:11px var(--s4);border-bottom:1px solid var(--garis-2)}
.dr-item:last-child{border-bottom:0}
.dr-teks{flex:1;min-width:0}
.dr-teks strong{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.dr-teks span{font-size:11.5px;color:var(--teks-3)}
.dr-nilai{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- ajakan pasang aplikasi (A2HS) ----------
   DULU: pita melayang di dasar layar. Di layar kasir pita itu masuk ke bawah
   panel keranjang (yang ber-z-index lebih tinggi) sehingga hanya ikonnya
   yang menyembul dan tampak seperti kotak hitam rusak.
   SEKARANG: tombol resmi di topbar — tidak pernah menutupi apa pun. */
.tbl-pasang{--bg:var(--tinta);--bg-h:var(--tinta-3);--fg:#fff;--bd:var(--tinta);--bd-h:var(--tinta-3)}
.tbl-pasang[hidden]{display:none}   /* [hidden] harus menang atas display:inline-flex */

/* panduan pasang untuk iOS (Safari tak punya beforeinstallprompt) */
.pasang-tip{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3);
  background:var(--latar);border:1px solid var(--garis);border-radius:var(--r);font-size:13px}
.pasang-tip .ikon{color:var(--oranye);flex:none;margin-top:1px}
.pasang-tip ol{margin:6px 0 0;padding-left:18px}
.pasang-tip li{margin-bottom:3px}

/* ==========================================================================
   LAYAR BESAR
   ========================================================================== */
@media (min-width:600px){
  :root{--tepi:16px}
  .form-baris.f2{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .profil-teks{display:flex}
  .modal{place-items:center;padding:var(--s5)}
  .modal-kotak{border-radius:18px;max-height:90vh}
  .inp,select.inp,textarea.inp{font-size:14px}
}
@media (min-width:900px){
  :root{--tepi:18px;--atas-tinggi:56px;--seksi:16px;--pad-kartu:16px}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
  .form-baris.f3{grid-template-columns:repeat(3,1fr)}
  .form-baris.f4{grid-template-columns:repeat(2,1fr)}
  .atas-judul h1{font-size:18px}
  .atas-judul p{display:block}
  .jam-toko{display:flex}
  .profil{padding-left:var(--s3);border-left:1px solid var(--garis)}
  .kpi-nilai{font-size:22px}
  .lembar .beku{max-width:none}
}
@media (min-width:1100px){
  .sisi{transform:none;box-shadow:none;width:var(--sisi-lebar)}
  .sisi-tutup,.tombol-menu{display:none}
  .tirai{display:none!important}
  .atas,.isi{margin-left:var(--sisi-lebar)}
  .grid-2-1{grid-template-columns:2fr 1fr}
  .form-baris.f4{grid-template-columns:repeat(4,1fr)}
  .hanya-hp{display:none}
  .hanya-besar{display:initial}
  .lembar-bungkus{max-height:calc(100dvh - 226px)}
}
@media (min-width:1400px){
  :root{--tepi:22px}
}
/* Layar ultra-lebar: isi berhenti melebar di --isi-maks lalu DIPUSATKAN di ruang
   yang tersisa di sebelah menu. Tanpa ini, di monitor 2560px konten menumpuk di
   kiri dan menyisakan hampir seribu piksel kosong di kanan — persis keluhan
   "ada yang tidak full, ada yang kebesaran". */
@media (min-width:1900px){
  /* max-width DIBUANG di sini. Dengan box-sizing:border-box, max-width membatasi
     kotak BERIKUT padding — padding pemusat 380px×2 akan memakan lebar isi dan
     kontennya justru menyempit jadi ±800px. Yang benar: biarkan kotak selebar
     ruang tersisa, lalu pusatkan isinya dengan padding. */
  .isi{max-width:none;
    padding-inline:max(var(--tepi),calc((100vw - var(--sisi-lebar) - var(--isi-maks)) / 2))}
  .atas{padding-inline:max(var(--tepi),calc((100vw - var(--sisi-lebar) - var(--isi-maks)) / 2))}
}

/* ---------- cetak (struk & laporan) ---------- */
@media print{
  .sisi,.atas,.tirai,.tbl,.notif,.no-cetak,.layar-alat{display:none!important}
  .isi{margin:0;padding:0;max-width:none}
  .kartu{border:0;box-shadow:none;margin:0}
  .lembar-bungkus{max-height:none;overflow:visible;border:0}
  .lembar thead th{position:static}
  .lembar .beku{position:static;box-shadow:none}
  body{background:#fff;font-size:12px}
}