/* LEONNE — tema gelap elegan untuk operasional malam */
/* Dua font, masing-masing dengan tugasnya.
   Comic Neue  — wajah aplikasi: judul, label, tombol, teks umum.
   Inter       — permukaan DATA: tabel, angka, isian, timer. Dipertahankan
                 karena punya figur bertabular (lebar angka sama rata) sehingga
                 kolom rupiah lurus dan cepat dipindai kasir; font komik tidak
                 punya itu dan angkanya bergoyang saat nilainya berubah.
   Keduanya disajikan dari server sendiri — aplikasi ini tanpa CDN, dan
   Comic Sans MS milik Microsoft tidak boleh dibundel sekaligus tidak ada di
   Android. Comic Neue berlisensi SIL OFL, bentuknya serumpun, boleh disertakan. */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Comic Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/comic-neue-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Comic Neue';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/comic-neue-700.woff2') format('woff2');
}
/* Tema gelap (bawaan) — latar hitam pekat.
   Aturan token: --line untuk garis HIAS, --line-kuat untuk BATAS KOMPONEN yang
   disentuh (isian, tombol) karena WCAG 1.4.11 menuntut 3:1 di sana.
   Warna aksen (--green/--red/…) hanya untuk ISYARAT non-teks; teks berwarna
   memakai pasangan --*-t yang dihitung agar lolos 4,5:1 di kedua tema. */
:root {
  --bg: #000000;
  --panel: #0c0f14;
  --panel-2: #141922;
  --panel-3: #1b2230;       /* pita kepala tabel */
  --line: #2b3240;
  --line-kuat: #616c7e;
  --text: #e8ebf0;
  --muted: #8b94a3;
  --gold: #d4af6a;
  --gold-dim: #a8894f;
  --gold-hi: #eed9a9;
  --gold-teks: #1a1408;
  --gold-t: #e0c184;
  --green: #4cc38a;  --hijau-t: #6bd6a4;
  --red: #e5545e;    --merah-t: #f07a82;
  --blue: #5b9dd9;   --biru-t: #7fb6e8;   /* --blue: isyarat non-teks; --biru-t: teks */
  --amber: #e0a13f;  --amber-t: #edb35c;
  --abu-t: #9aa3b1;
  --kanvas-bg: #080a0e;
  --kanvas-garis: rgba(255,255,255,.11);
  --garis-tabel: #3f4757;
  --baris-sorot: rgba(212,175,106,.12);
  --input-bg: #05070a;      /* bidang isian formulir */
  --bayang: rgba(0,0,0,.45);
  --elev-1: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 22px -14px rgba(0,0,0,.45);
  --elev-2: 0 6px 24px rgba(0,0,0,.45);
  --elev-3: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -12px rgba(0,0,0,.75);
}
/* Token bebas-tema: skala spasi, huruf, radius, gerak, lapisan.
   Menggantikan 23 nilai padding, 18 ukuran huruf, dan 12 radius yang dulu acak. */
:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px;
  --t1: 11px; --t2: 12px; --t3: 14px; --t4: 17px; --t5: 22px; --t6: 30px;
  /* --font-teks: wajah aplikasi. --font-data: permukaan angka (lihat catatan
     di atas berkas). Comic Sans MS disebut sebagai cadangan bagi perangkat
     yang memilikinya; Comic Neue tetap yang dibundel agar semua sama. */
  --font-teks: 'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif;
  --font-data: 'Inter Variable', Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --fw: 400; --fw-tegas: 600; --fw-berat: 700;
  --ls-0: 0; --ls-1: .08em; --ls-2: .12em; --ls-3: .3em;
  --lh-rapat: 1.2; --lh-dasar: 1.5; --lh-padat: 1.35;
  --radius: 10px; --r-sm: 8px; --r-lg: 14px; --r-pill: 999px;
  --cincin: 2px solid var(--gold);
  --cepat: .14s; --sedang: .22s;
  --z-obj: 20; --z-gagang: 30; --z-modal: 50; --z-chip: 90; --z-toast: 99;
}
/* Tema terang — putih bersih dengan teks hitam pekat, aksen emas tetap */
body.tema-terang {
  --bg: #d3d6da;            /* dasar layar senada dengan sidebar */
  --panel: #ffffff;
  --panel-2: #f0f2f4;
  --panel-3: #e6e9ec;
  --line: #c9ced5;
  --line-kuat: #7e858f;
  --text: #000000;
  --muted: #5c5c5c;
  --gold: #8a6a1f;
  --gold-dim: #6f5518;      /* digelapkan: dasar gradien tombol utama harus lolos 4,5:1 */
  --gold-hi: #8a6a1f;
  --gold-teks: #ffffff;
  --gold-t: #5a4413;
  --green: #14794d;  --hijau-t: #0f5c3a;
  --red: #bf2f39;    --merah-t: #95232c;
  --blue: #245f96;   --biru-t: #1c4a75;
  --amber: #8f6414;  --amber-t: #6e4d0f;
  --abu-t: #4a4f57;
  --kanvas-bg: #ffffff;
  --kanvas-garis: rgba(0,0,0,.20);
  --garis-tabel: #b3b9c1;
  --baris-sorot: rgba(138,106,31,.10);
  --input-bg: #f7f8f9;
  --bayang: rgba(0,0,0,.13);
  --elev-1: 0 1px 2px rgba(0,0,0,.05);
  --elev-2: 0 6px 18px -10px rgba(0,0,0,.18);
  --elev-3: 0 24px 60px -18px rgba(0,0,0,.35);
}
/* di latar putih, kartu & modal cukup ditandai garis — tanpa gradasi gelap.
   Bayangan kini datang dari --elev-*, jadi penimpaan per-elemen tidak perlu lagi. */
body.tema-terang .card,
body.tema-terang .modal,
body.tema-terang .login-card { background: var(--panel); }
body.tema-terang .login-logo { color: var(--gold); background: none; -webkit-text-fill-color: currentColor; }
body.tema-terang .nav-item:hover { background: rgba(0,0,0,.06); }
body.tema-terang .nav-item.aktif { background: #ffffff; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-teks);
  font-size: 14px;
}
/* Permukaan DATA tetap Inter: angkanya bertabular, jadi kolom rupiah lurus dan
   tidak bergoyang saat nilai berubah — itu yang dibaca kasir cepat-cepat. */
table, .num, .stat .v, .obj .tot, .timer, .chip-rp, .batang-label, .topbar-jam {
  font-family: var(--font-data);
}
/* Angka bertabular ditegakkan di seluruh permukaan data sekaligus. */
table, .num, input[type="number"], .stat .v, .obj .tot, .timer, .chip-rp {
  font-variant-numeric: tabular-nums;
}
#app { height: 100vh; display: flex; }

/* ---------- login ---------- */
.login-wrap { margin: auto; width: 380px; max-width: 92vw; text-align: center; }
.login-logo {
  font-size: 38px; letter-spacing: 12px; font-weight: 300; margin-bottom: 6px;
  background: linear-gradient(180deg, #eed9a9, var(--gold) 55%, var(--gold-dim));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-indent: 12px; /* mengimbangi letter-spacing huruf terakhir */
}
.login-sub {
  color: var(--muted); margin-bottom: 30px; font-size: 11px; letter-spacing: 3.5px;
  display: flex; align-items: center; gap: 12px; justify-content: center;
}
.login-sub::before, .login-sub::after {
  content: ''; height: 1px; width: 34px;
  background: linear-gradient(90deg, transparent, var(--gold-dim));
}
.login-sub::after { background: linear-gradient(90deg, var(--gold-dim), transparent); }
.login-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 45%, var(--panel)), var(--panel) 70px);
  border: 1px solid color-mix(in srgb, var(--gold-dim) 30%, var(--line));
  border-radius: var(--r-lg); padding: var(--s7) var(--s6); text-align: left;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 30px 70px -20px rgba(0,0,0,.8),
              0 0 80px -30px color-mix(in srgb, var(--gold) 22%, transparent);
}

/* ---------- layout ---------- */
.sidebar {
  width: 210px; min-width: 210px; background: var(--bg); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; overflow-y: auto;
}
.side-logo { padding: var(--s5) var(--s5) var(--s2); font-size: var(--t5); letter-spacing: var(--ls-3); color: var(--gold); font-weight: 300; }
.side-role { padding: 0 var(--s5) var(--s4); color: var(--muted); font-size: var(--t1); border-bottom: 1px solid var(--line); }
/* Sidebar tanpa huruf tebal. Menu aktif tetap terbaca lewat garis emas,
   warna emas, dan latar — bukan lewat ketebalan huruf. */
.nav-group {
  padding: var(--s5) var(--s5) var(--s2); color: var(--gold-t); font-size: var(--t1);
  text-transform: uppercase; letter-spacing: var(--ls-2); font-weight: var(--fw);
}
.nav-item {
  display: block; padding: var(--s2) var(--s5); color: var(--text); text-decoration: none; cursor: pointer;
  border-left: 3px solid transparent; font-size: var(--t3); font-weight: var(--fw);
}
.nav-item:hover { background: var(--panel-2); }
.nav-item.aktif { border-left-color: var(--gold); background: var(--panel-2); color: var(--gold); font-weight: 400; }
.side-bottom { margin-top: auto; padding: 14px 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.wadah-kanan { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s3) var(--s7); border-bottom: 1px solid var(--line); background: var(--panel);
  flex: none;
}
.topbar-merek {
  font-size: var(--t2); letter-spacing: var(--ls-2); color: var(--gold);
  text-transform: uppercase; white-space: nowrap;
}
.topbar-hari { font-size: var(--t2); color: var(--muted); white-space: nowrap; }
.topbar-aksi { display: flex; align-items: center; gap: var(--s3); }
/* Jam berdetik tiap detik: angka bertabular agar lebarnya tidak bergoyang
   dan mendorong isi top bar di sebelahnya. */
.topbar-jam {
  font-size: var(--t2); color: var(--muted); font-variant-numeric: tabular-nums;
  white-space: nowrap; padding-right: var(--s3); border-right: 1px solid var(--line);
}

/* ---------- menu akun, pojok kanan atas ----------
   Menggantikan tautan "Akun Saya" yang dulu terselip di dasar sidebar.
   Identitas dan tombol Keluar berkumpul di satu tempat yang sudah dikenal
   pengguna; Keluar juga jadi satu klik lebih dalam sehingga tidak
   tersalah-tekan di tengah transaksi. */
.akun-bungkus { position: relative; }
.akun-tombol {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s3) var(--s1) var(--s1);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-pill);
  color: var(--text); font-size: var(--t2); font-weight: var(--fw); white-space: nowrap;
}
.akun-tombol:hover { background: var(--panel-2); border-color: var(--line); color: var(--text); }
.akun-tombol.aktif { background: var(--panel-2); border-color: var(--gold-dim); }
.akun-tombol[aria-expanded="true"] { background: var(--panel-2); border-color: var(--line-kuat); color: var(--text); }
.akun-inisial {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--gold) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent);
  color: var(--gold-t); font-size: var(--t1); font-weight: var(--fw-tegas);
  text-transform: uppercase; letter-spacing: var(--ls-0);
}
.akun-teks { display: flex; flex-direction: column; align-items: flex-start; line-height: var(--lh-rapat); gap: 1px; }
.akun-teks .n { font-size: var(--t2); color: var(--text); }
.akun-teks .r { font-size: var(--t1); color: var(--muted); text-transform: uppercase; letter-spacing: var(--ls-1); }
.akun-panah { color: var(--muted); font-size: 8px; transition: transform var(--cepat) ease; }
.akun-tombol[aria-expanded="true"] .akun-panah { transform: rotate(180deg); }

.akun-menu {
  position: absolute; top: calc(100% + var(--s2)); right: 0; min-width: 232px;
  background: var(--panel-2); border: 1px solid var(--line-kuat);
  border-radius: var(--r-lg); box-shadow: var(--elev-3);
  padding: var(--s2); z-index: var(--z-chip);
  animation: menu-turun var(--cepat) ease;
}
body.tema-terang .akun-menu { background: var(--panel); }
@keyframes menu-turun { from { opacity: 0; transform: translateY(-6px); } }
.akun-menu-kepala {
  padding: var(--s2) var(--s3) var(--s3);
  border-bottom: 1px solid var(--line); margin-bottom: var(--s2);
}
.akun-menu-kepala .n { font-size: var(--t3); color: var(--text); }
.akun-menu-kepala .u { font-size: var(--t1); color: var(--muted); margin-top: 2px; }
.akun-menu button {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  padding: var(--s2) var(--s3); font-size: var(--t3); font-weight: var(--fw);
}
.akun-menu button:hover { background: var(--panel-3); border-color: var(--line); color: var(--gold-t); }
.akun-menu button.keluar { color: var(--merah-t); }
.akun-menu button.keluar:hover {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  border-color: color-mix(in srgb, var(--red) 55%, var(--line)); color: var(--merah-t);
}
.akun-menu .sep-menu { height: 1px; background: var(--line); margin: var(--s2) 0; }

.main { flex: 1; overflow-y: auto; padding: var(--s6) var(--s7) var(--s7); }

/* keterangan di bawah kolom isian */
.bantuan { font-size: var(--t2); color: var(--muted); line-height: var(--lh-dasar); margin: var(--s1) 0 2px; }
.bantuan b { color: var(--text); font-weight: var(--fw-tegas); }

/* pesan gagal menetap di dalam form */
.kotak-gagal {
  border: 1px solid var(--red); border-left-width: 3px; border-radius: 8px;
  background: color-mix(in srgb, var(--red) 9%, transparent);
  color: var(--text); padding: 11px 14px; margin: 12px 0; font-size: 13px; line-height: 1.5;
}
.kotak-gagal b { color: var(--red); }
.page-title {
  font-size: var(--t5); font-weight: var(--fw-tegas); letter-spacing: var(--ls-0);
  line-height: var(--lh-rapat); margin-bottom: var(--s1);
}
.page-sub { color: var(--muted); font-size: var(--t2); line-height: var(--lh-dasar); margin-bottom: var(--s6); max-width: 76ch; }

/* ---------- komponen ---------- */
.card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 40%, var(--panel)), var(--panel) 52px);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s5); margin-bottom: var(--s4);
  box-shadow: var(--elev-1);
}
/* penanda sesaat: kartu yang baru saja dituju dari tombol lain */
.card.sorot { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 35%, transparent); }
@media (prefers-reduced-motion: no-preference) { .card { transition: border-color var(--sedang), box-shadow var(--sedang); } }
.card h3 {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--t1); margin-bottom: var(--s4); color: var(--gold-t);
  font-weight: var(--fw-tegas); letter-spacing: var(--ls-2); text-transform: uppercase;
}
.card h3::before {
  content: ''; width: 3px; height: 12px; flex: none;
  background: linear-gradient(180deg, var(--gold), var(--gold-dim));
  border-radius: 2px;
}
.card h3::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.grid { display: grid; gap: var(--s4); }
/* Formulir menyesuaikan lebar layar sendiri: kolom minimal 220px.
   Sebelumnya dipaksa 3 kolom, sehingga kartu "Paket baru" berisi 9 isian
   selalu setinggi ~290px berapa pun lebar layarnya. */
.grid-form {
  display: grid; gap: var(--s3) var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.grid-form > div > label:first-child { margin-top: 0; }
.g2 { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); }
.row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
/* ===== Bahasa desain formulir: hitam & emas =====
   Label mikro kapital berjarak, bidang isian tenggelam halus,
   fokus "menyala" emas, tombol emas bergradasi dengan angkatan lembut. */
label {
  display: block; margin: var(--s3) 0 var(--s1);
  font-size: var(--t1); font-weight: var(--fw-tegas); letter-spacing: var(--ls-1);
  text-transform: uppercase; color: var(--muted);
}
input, select, textarea {
  width: 100%; color: var(--text); font-family: var(--font-data); font-size: var(--t3);
  background: var(--input-bg);
  border: 1px solid var(--line-kuat); border-radius: var(--r-sm); padding: var(--s2) var(--s3);
  transition: border-color var(--cepat) ease, box-shadow var(--cepat) ease, background var(--cepat) ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--gold-dim); }
/* fokus ditandai halus: garis tepi menegas, tanpa mengubah warna latar bidang */
input:focus, select:focus, textarea:focus {
  outline: var(--cincin); outline-offset: 1px; border-color: var(--gold);
  box-shadow: none;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type="number"] { font-variant-numeric: tabular-nums; }
input[type="date"], input[type="datetime-local"], input[type="time"] { color-scheme: dark; }
body.tema-terang input[type="date"], body.tema-terang input[type="datetime-local"],
body.tema-terang input[type="time"] { color-scheme: light; }
/* Kotak centang & radio tidak ikut aturan "isian selebar kolom" di atas —
   tanpa ini keduanya melar 100% dan tiap pemakaian harus menambal
   style="width:auto" sendiri. */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--gold);
  width: auto; min-width: 0; height: auto;
  padding: 0; border: 0; background: none;
  vertical-align: -2px; cursor: pointer;
}
/* satu baris "kotak centang + keterangannya", seluruh baris bisa diklik */
.cek-baris {
  display: flex; align-items: center; gap: var(--s2); cursor: pointer;
  margin: var(--s4) 0 0; padding: 0;
  font-size: var(--t2); font-weight: var(--fw); letter-spacing: var(--ls-0);
  text-transform: none; color: var(--muted); user-select: none;
}
.cek-baris:hover { color: var(--text); }
.cek-baris input { flex: none; }
input:-webkit-autofill, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 40px var(--input-bg) inset;
  caret-color: var(--text); transition: background-color 9999s;
}
select {
  appearance: none; -webkit-appearance: none; padding-right: var(--s7); cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23d4af6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}
body.tema-terang select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%239a7526' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

button {
  background: var(--panel-2); color: var(--text); font-family: inherit; font-size: var(--t2);
  font-weight: var(--fw-tegas);
  border: 1px solid var(--line-kuat); border-radius: var(--r-sm); padding: var(--s2) var(--s4);
  cursor: pointer;
  transition: border-color var(--cepat) ease, color var(--cepat) ease, background var(--cepat) ease,
              box-shadow var(--cepat) ease, transform var(--cepat) ease;
}
button:hover { border-color: var(--gold-dim); color: var(--gold-t); }
button:active { transform: translateY(1px); }
button.utama {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 45%, var(--gold-dim));
  color: var(--gold-teks); border-color: var(--gold-dim);
  font-weight: var(--fw-berat); letter-spacing: var(--ls-0);
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 2px 8px color-mix(in srgb, var(--gold) 18%, transparent);
}
button.utama:hover {
  color: var(--gold-teks); border-color: var(--gold);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 4px 16px color-mix(in srgb, var(--gold) 32%, transparent);
  filter: brightness(1.06);
}
button.bahaya { background: transparent; color: var(--merah-t); border-color: color-mix(in srgb, var(--red) 60%, var(--line-kuat)); }
button.bahaya:hover { border-color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--merah-t); }
button.kecil { padding: var(--s1) var(--s3); font-size: var(--t1); border-radius: var(--r-sm); }
button:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; filter: none; transform: none; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: var(--cincin); outline-offset: 2px; }

/* setiap tabel duduk di bidangnya sendiri: hitam pekat pada tema gelap */
.scroll-x { overflow-x: auto; border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: var(--t3); background: transparent; }
/* Kepala tabel TIDAK dibuat sticky: .scroll-x memakai overflow-x:auto sehingga
   sumbu vertikalnya ikut menjadi auto, dan ia menjadi scrollport tanpa batas
   tinggi — sticky-nya tidak akan pernah bergeser. Pita --panel-3 tetap dipakai
   agar kepala tabel terbaca sebagai kepala. */
th {
  text-align: left; color: var(--muted); font-size: var(--t1); text-transform: uppercase;
  letter-spacing: var(--ls-1); font-weight: var(--fw-tegas); white-space: nowrap;
  padding: var(--s3) var(--s3); border-bottom: 1px solid var(--line-kuat); background: var(--panel-3);
}
td { padding: var(--s3); border-bottom: 1px solid var(--garis-tabel); line-height: var(--lh-padat); }
tr:last-child td { border-bottom: 0; }
/* Melacak baris pada tabel panjang lebih terbantu oleh strip zebra halus
   daripada garis tebal — garisnya tetap sedang agar kisi tidak terasa berat. */
tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--text) 4%, transparent); }
tr:hover td, tbody tr:nth-child(even):hover td { background: var(--baris-sorot); }
/* kolom aksi: tombol tetap satu baris, kelebihan lebar memicu gulir mendatar */
th.aksi, td.aksi { white-space: nowrap; text-align: right; }
td.aksi > button + button { margin-left: var(--s1); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.badge {
  display: inline-block; padding: 2px var(--s2); border-radius: var(--r-pill);
  font-size: var(--t1); font-weight: var(--fw-tegas); white-space: nowrap;
  background: color-mix(in srgb, currentColor 16%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
}
.b-hijau { color: var(--hijau-t); }
.b-merah { color: var(--merah-t); }
.b-biru  { color: var(--biru-t); }
.b-amber { color: var(--amber-t); }
.b-abu   { color: var(--abu-t); }
.b-gold  { color: var(--gold-t); }

/* Warna TEKS memakai pasangan --*-t: --amber/--red hanya lolos 3:1 sebagai
   isyarat non-teks, dan di atas kartu terisi keduanya gagal 4,5:1. */
.timer { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.timer.hampir { color: var(--amber-t); }
.timer.lewat { color: var(--merah-t); }
/* Kedip adalah penanda tambahan, bukan satu-satunya: di perangkat yang meminta
   gerak minimal, warnanya sendiri sudah membedakan. */
@media (prefers-reduced-motion: no-preference) {
  .timer.hampir { animation: kedip 1.2s infinite; }
  .timer.lewat { animation: kedip .7s infinite; }
}
@keyframes kedip { 50% { opacity: .35; } }

/* ---------- Mode POS: jendela penuh khusus kasir ---------- */
.hanya-pos { display: none; }
body.mode-pos .sidebar, body.mode-pos .topbar { display: none; }
body.mode-pos .main { padding: 14px 20px; }
body.mode-pos .hanya-pos { display: inline-block; }
body.mode-pos .sembunyi-pos { display: none; }

/* ---------- kanvas denah berlantai ---------- */
.kanvas-wrap { overflow: auto; padding-bottom: 4px; }
/* Kartu pembungkus kanvas tidak berisi apa pun selain kanvas, jadi padding
   sebesar kartu biasa hanya memakan ruang gambar. */
#kartu-kanvas { padding: var(--s3); }
.kanvas {
  /* Dipusatkan saat muat, tanpa mematikan gulir saat tidak muat: margin auto
     pada blok yang LEBIH LEBAR dari wadahnya menghitung 0, sedangkan
     display:flex pada .kanvas-wrap justru membuat kanvas menciut diam-diam
     (seluruh isinya position:absolute, jadi lebar min-content-nya nol). */
  margin-inline: auto;
  position: relative;
  width: calc(var(--cell) * var(--kolom));
  height: calc(var(--cell) * var(--baris));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--kanvas-bg);
  background-image:
    linear-gradient(to right, var(--kanvas-garis) 1px, transparent 1px),
    linear-gradient(to bottom, var(--kanvas-garis) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
}
.obj {
  position: absolute;
  left: calc(var(--x) * var(--cell));
  top: calc(var(--y) * var(--cell));
  width: calc(var(--w) * var(--cell) - 4px);
  height: calc(var(--h) * var(--cell) - 4px);
  margin: 2px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-2);
  padding: 5px;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; cursor: pointer; line-height: 1.25;
  transition: border-color .15s, box-shadow .15s;
}
.obj.bundar { border-radius: 50%; }
/* Umpan balik lewat box-shadow, bukan transform: bayangan tidak memakan ruang
   tata letak sehingga objek tetap lurus dengan kisi latar kanvas. */
.obj:hover { border-color: var(--gold-dim); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 22%, transparent); }
.kanvas:not(.edit) .obj:active { box-shadow: 0 0 0 2px var(--gold); }
.obj .nm { font-weight: 700; font-size: 14px; }
.obj .info { font-size: 10.5px; color: var(--abu-t); }
.obj .nm, .obj .info, .obj .tot { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obj .tot { font-size: 11px; color: var(--gold-t); font-variant-numeric: tabular-nums; }
.obj.terisi { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--panel-2)); }
/* Pada meja TERISI yang dicari mata adalah angkanya, bukan namanya — nama meja
   sudah diketahui dari posisinya di denah. Hierarkinya dibalik.
   Selektor sengaja diawali .kanvas agar mengalahkan aturan .kanvas.padat di
   bawah, yang praktis selalu menyala di tablet POS. */
.kanvas .obj.terisi .nm { font-size: var(--t2); font-weight: var(--fw-tegas); color: var(--abu-t); }
.kanvas .obj.terisi .tot { font-size: var(--t3); font-weight: var(--fw-berat); }
.kanvas.padat .obj.terisi .nm { font-size: 10px; }
.kanvas.padat .obj.terisi .tot { font-size: 12px; }
/* Penanda status berlapis: hari ini "ditahan" dan "perlu dibersihkan" hanya
   dibedakan garis 1px — tak terbaca dari jarak berdiri, dan tak terbaca sama
   sekali bagi kasir yang buta warna merah-hijau. Titik pojok + latar bernada
   memberi dua saluran, dan titiknya ikut bekerja pada objek bundar. */
.obj::after {
  content: ''; position: absolute; top: 5px; right: 5px;
  width: 7px; height: 7px; border-radius: 50%; background: transparent;
}
.obj.terisi::after { background: var(--gold); }
.obj.s-ditahan::after { background: var(--amber); }
.obj.s-kotor::after { background: var(--red); }
/* 14% sama dengan .terisi: cukup terlihat dari jarak berdiri, dan teks
   terlemah di atasnya masih 5,15:1 (batas AA 4,5). Di 20% turun ke 4,54. */
.obj.s-ditahan { background: color-mix(in srgb, var(--amber) 14%, var(--panel-2)); }
.obj.s-kotor { background: color-mix(in srgb, var(--red) 14%, var(--panel-2)); }
/* Badge di dalam kanvas ikut mengecil bersama kotaknya, bukan terpotong. */
.kanvas .obj .badge { font-size: inherit; padding: 0 4px; border-radius: var(--r-sm); }
/* objek mati: patokan denah — garis putus-putus, redup, tidak bisa diklik */
.obj.mati {
  border-style: dashed; border-color: color-mix(in srgb, var(--muted) 55%, var(--line));
  background: repeating-linear-gradient(45deg,
    transparent, transparent 6px,
    color-mix(in srgb, var(--muted) 10%, transparent) 6px,
    color-mix(in srgb, var(--muted) 10%, transparent) 12px);
  color: var(--muted); cursor: default;
}
.obj.mati .nm { font-weight: 600; letter-spacing: .3px; }
.kanvas:not(.edit) .obj.mati { pointer-events: none; }   /* di layar kasir benar-benar mati */
.kanvas.edit .obj.mati { cursor: grab; }                 /* di penyusun tetap bisa digeser */
.obj.mati:hover { border-color: var(--muted); }
.obj.s-ditahan { border-color: var(--amber); }
.obj.s-kotor { border-color: var(--red); }
.obj.sempit .info, .obj.sempit .tot { display: none; }
.obj.sempit .nm { font-size: 12px; }
/* kanvas padat (kotak grid kecil agar muat satu layar): tampilkan yang penting saja */
.kanvas.padat .obj { padding: 3px; }
.kanvas.padat .obj .nm { font-size: 11.5px; }
.kanvas.padat .obj .info { font-size: 9.5px; }
.kanvas.padat .obj .tot { font-size: 10px; }
.kanvas.padat .obj .timer { font-size: 11px; }
/* Kotak sekecil ini tidak muat tombol: di layar sentuh button.kecil dipaksa
   38px, sementara room 3 sel hanya menyisakan ±44px untuk empat baris — tombol
   terpotong dan tak bisa ditekan. Fungsinya tidak hilang: mengetuk kartunya
   membuka dialog yang memuat tombol yang sama. */
.kanvas.padat .obj button.kecil, .obj.sempit button.kecil { display: none; }

/* Nama objek mati mengikuti ukuran objeknya: dibatasi tinggi kotak (agar tidak
   melebihi) dan lebar kotak (agar tidak terlalu besar pada objek pipih),
   lalu dijepit antara 7px dan 20px. Teks boleh turun baris supaya nama panjang
   pada objek sempit-tinggi (mis. tangga) tetap terbaca utuh. */
.kanvas .obj.mati .nm {
  font-size: clamp(7px, min(
      calc(var(--h) * var(--cell) * 0.42),
      calc(var(--w) * var(--cell) * 0.22)
    ), 20px);
  line-height: 1.12;
  white-space: normal;
  overflow-wrap: anywhere;
  max-height: 100%;
}
/* Objek lebih tinggi daripada lebar (tangga, pintu di dinding samping):
   tulisan diputar berdiri mengikuti arah objek. Rumus ukuran huruf ikut
   bertukar — lebar kotak membatasi tebal huruf, tinggi kotak membatasi
   panjang tulisan. */
.kanvas .obj.mati.tegak .nm {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: clamp(7px, min(
      calc(var(--w) * var(--cell) * 0.42),
      calc(var(--h) * var(--cell) * 0.22)
    ), 20px);
  max-width: 100%;
  max-height: 100%;
}

/* baris ringkas di atas denah: judul + chip/tombol dalam satu baris */
.baris-cepat { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 14px; }
.judul-cepat {
  font-size: 10.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
  color: color-mix(in srgb, var(--gold) 34%, var(--muted)); margin-right: 4px;
}

/* penyusun denah: satu layar penuh — kolom alat menggulir sendiri */
.susun-denah { grid-template-columns: 1fr 268px; gap: 14px; align-items: start; }
/* min-width:0 wajib. Kolom 1fr berisi kanvas yang lebarnya eksplisit
   (--cell × --kolom), dan min-width:auto bawaan grid membuat kolom itu menolak
   menyusut di bawah lebar tersebut — panel pengaturan di kanan terpotong dan
   halaman ikut menggulir mendatar. */
.susun-denah > * { min-width: 0; }
/* Kolom alat dipadatkan agar seluruh formulir muat tanpa digulir sama sekali */
.kolom-alat .card { padding: 12px 13px; margin-bottom: 12px; }
.kolom-alat .card:last-child { margin-bottom: 0; }
.kolom-alat h3 { font-size: 11.5px; margin-bottom: 9px; gap: 7px; }
.kolom-alat h3::before { height: 13px; }
.kolom-alat label { margin: 8px 0 3px; font-size: 10px; letter-spacing: .7px; }
.kolom-alat input, .kolom-alat select, .kolom-alat textarea {
  padding: 6px 9px; font-size: 12.5px; border-radius: 7px;
}
.kolom-alat select { padding-right: 26px; background-position: right 9px center; }
.kolom-alat .bantuan { font-size: 10.5px; line-height: 1.35; margin: 4px 0 0; }
.kolom-alat button { padding: 6px 11px; font-size: 12px; }
.kolom-alat .badge { font-size: 10px; padding: 1px 7px; }
/* layar sentuh: target jari tetap besar, jadi kolom boleh digulir bila perlu */
@media (pointer: coarse) {
  .kolom-alat { max-height: calc(100vh - 180px); overflow-y: auto; }
  .kolom-alat input, .kolom-alat select, .kolom-alat button { min-height: 40px; font-size: 14px; }
}
@media (max-width: 860px) {
  .susun-denah { grid-template-columns: 1fr; }
  .kolom-alat { max-height: none; overflow: visible; }
}

/* mode penyusunan (master) */
.kanvas.edit .obj { cursor: grab; touch-action: none; user-select: none; }
.kanvas.edit .obj:active { cursor: grabbing; }
/* objek terpilih naik ke lapisan atas dan berhenti memotong isinya,
   supaya gagang ubah-ukuran tidak pernah tertutup — termasuk pada objek bundar */
.obj.terpilih { outline: 2px solid var(--gold); outline-offset: 1px; z-index: var(--z-obj); overflow: visible; }
.gagang {
  position: absolute; right: -9px; bottom: -9px; width: 18px; height: 18px; z-index: var(--z-gagang);
  background: var(--gold); border-radius: 5px; cursor: nwse-resize; touch-action: none;
  box-shadow: 0 0 0 2px var(--bg), 0 2px 6px rgba(0,0,0,.5);
}
.gagang::after {   /* garis diagonal kecil sebagai penanda tarik */
  content: ''; position: absolute; inset: 4px;
  border-right: 2px solid rgba(26,20,8,.75); border-bottom: 2px solid rgba(26,20,8,.75);
  border-radius: 0 0 3px 0;
}
@media (pointer: coarse) { .gagang { width: 24px; height: 24px; right: -12px; bottom: -12px; } }
.chip {
  display: inline-flex; align-items: center; gap: 6px; margin: 3px;
  padding: 6px 11px; border: 1px dashed var(--gold-dim); border-radius: 20px;
  background: var(--panel-2); cursor: pointer; font-size: 12.5px;
}
.chip:hover { background: var(--gold); color: var(--gold-teks); }
.simpan-status { font-size: 12px; color: var(--muted); }

/* ---------- pilihan menu kasir ---------- */
.menu-pilih { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; max-height: 320px; overflow-y: auto; }
.menu-btn { border: 1px solid var(--line); border-radius: 8px; padding: 8px; cursor: pointer; background: var(--panel-2); font-size: 12px; }
.menu-btn:hover { border-color: var(--gold-dim); }
.menu-btn .hg { color: var(--gold); font-size: 11px; margin-top: 3px; }
/* "habis" ditandai coretan + garis putus-putus, bukan diredupkan:
   justru nama produknya yang harus tetap terbaca kasir. */
.menu-btn.habis {
  cursor: not-allowed; color: var(--muted);
  border-style: dashed; border-color: var(--line-kuat);
  text-decoration: line-through; text-decoration-color: var(--red);
}

/* ---------- modal & toast ---------- */
.modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,.68);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; z-index: var(--z-modal); animation: bg-masuk var(--cepat) ease;
}
body.tema-terang .modal-bg { background: rgba(20,30,45,.45); }
.modal {
  margin: auto; width: min(560px, 94vw); max-height: 90vh; overflow-y: auto;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 45%, var(--panel)), var(--panel) 64px);
  border: 1px solid color-mix(in srgb, var(--gold-dim) 26%, var(--line));
  border-radius: var(--r-lg); padding: var(--s6);
  box-shadow: var(--elev-3);
  animation: modal-masuk var(--sedang) cubic-bezier(.2,.9,.3,1.15);
}
.modal.lebar { width: min(860px, 96vw); }
.modal h3 {
  color: var(--gold); margin: -2px 0 var(--s4); font-size: var(--t4); font-weight: var(--fw-tegas);
  letter-spacing: var(--ls-0); padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.modal h3::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 52px; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent); border-radius: 2px;
}
@keyframes modal-masuk { from { opacity: 0; transform: translateY(10px) scale(.975); } }
@keyframes bg-masuk { from { opacity: 0; } }
#toast-root { position: fixed; bottom: var(--s5); right: var(--s5); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--s2); }
.toast {
  background: var(--panel-2); border: 1px solid var(--line-kuat); border-left: 3px solid var(--green);
  padding: var(--s3) var(--s4); border-radius: var(--r-sm); font-size: var(--t3);
  max-width: 380px; box-shadow: var(--elev-2);
}
.toast.gagal { border-left-color: var(--red); }

.stat { text-align: left; padding: var(--s4) var(--s5); }
.stat .v {
  font-size: var(--t6); font-weight: var(--fw-berat); color: var(--text);
  font-variant-numeric: tabular-nums; line-height: var(--lh-rapat);
}
.stat.utama .v { color: var(--gold); }
.stat .l {
  font-size: var(--t1); color: var(--muted); margin-top: var(--s1);
  text-transform: uppercase; letter-spacing: var(--ls-1);
}

.tabbar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; flex-wrap: wrap; }
.tab { padding: 8px 14px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; font-size: 13px; }
.tab.aktif { color: var(--gold-t); border-bottom-color: var(--gold); }

.katalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.katalog-card img { width: 100%; height: 200px; object-fit: cover; border-radius: 8px; pointer-events: none; user-select: none; }
.muted { color: var(--muted); }
.gold { color: var(--gold); }
.mb0 { margin-bottom: 0; }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: var(--s4) 0; }

/* ---------- mode sentuh: layar sentuh mendapat target jari ±44px ---------- */
@media (pointer: coarse) {
  button { min-height: 44px; padding: 10px 18px; font-size: 14.5px; }
  button.kecil { min-height: 38px; padding: 8px 14px; font-size: 13.5px; }
  input, select, textarea { min-height: 44px; font-size: 16px; } /* 16px mencegah zoom otomatis iOS */
  input[type="checkbox"] { min-height: 0; width: 22px; height: 22px; }
  .nav-item { padding: 13px 20px; font-size: 15px; }
  td { padding: 12px 10px; font-size: 14px; }
  th { padding: 10px 10px; }
  .menu-btn { padding: 14px 10px; font-size: 14px; }
  .menu-pilih { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .tab { padding: 12px 16px; font-size: 14.5px; }
  .badge { font-size: 12px; padding: 3px 10px; }
}

@media (max-width: 860px) {
  #app { flex-direction: column; }
  /* flex:none wajib. Sebagai baris atas di susunan kolom, sidebar adalah
     kotak gulir (overflow-x:auto) sehingga tinggi minimum otomatisnya jatuh
     ke 0; tanpa ini ia diperas habis oleh .wadah-kanan yang flex:1 dan
     seluruh menu lenyap di layar sempit. */
  .sidebar { width: 100%; min-width: 0; flex: none; flex-direction: row; overflow-x: auto; align-items: center; }
  .side-logo { padding: 10px 14px; } .side-role, .nav-group { display: none; }
  .side-bottom { margin: 0; padding: 0 8px 0 0; border: 0; display: flex; gap: 4px; align-items: center; }
  .topbar { padding: 8px 14px; }
  /* Ruang sempit: nama & role dilepas, jam tetap — kasir memerlukannya.
     Lingkaran inisial bertahan supaya menu akun (dan Keluar di dalamnya)
     tetap bisa dijangkau. */
  .akun-teks { display: none; }
  .akun-tombol { padding: var(--s1); }
  .topbar-jam { border-right: 0; padding-right: 0; }
  .side-bottom .nav-item { padding: 8px 10px !important; }
  .nav-item { white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; }
  .nav-item.aktif { border-bottom-color: var(--gold); }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
}

/* ---------- saran tamu saat check-in ----------
   Daftar melayang di bawah kolom nama. Tanpa ini kasir hanya bisa mengetik nama
   baru, dan satu orang yang datang berulang lahir berkali-kali sebagai tamu
   berbeda. */
.saran-bungkus { position: relative; flex: 2; min-width: 0; }
.saran-tamu {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--panel-2); border: 1px solid var(--line-kuat);
  border-radius: var(--r-sm); box-shadow: var(--elev-3);
  z-index: var(--z-chip); max-height: 210px; overflow-y: auto; padding: var(--s1);
}
body.tema-terang .saran-tamu { background: var(--panel); }
.saran-tamu button {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  padding: var(--s2) var(--s3); font-size: var(--t3); font-weight: var(--fw);
}
.saran-tamu button:hover { background: var(--panel-3); border-color: var(--line); color: var(--gold-t); }
.saran-tamu .sub { display: block; font-size: var(--t1); color: var(--muted); margin-top: 1px; }
.saran-tamu button:hover .sub { color: var(--muted); }
.saran-tamu .kosong { padding: var(--s2) var(--s3); font-size: var(--t2); color: var(--muted); }
/* kolom nama yang sudah tertaut ke tamu lama ditandai jelas */
.saran-bungkus.terpilih input[data-t-nama] { border-color: var(--gold); }

/* ---------- indikator memuat ---------- */
.memuat { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 26px 4px; }
.spinner {
  width: 17px; height: 17px; flex: none; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--gold);
  animation: putar .7s linear infinite;
}
@keyframes putar { to { transform: rotate(360deg); } }

/* ---------- chip pratinjau rupiah pada input angka ---------- */
.chip-rp {
  position: fixed; z-index: var(--z-chip); pointer-events: none;
  background: var(--panel-2); border: 1px solid var(--gold-dim); color: var(--gold);
  border-radius: 6px; padding: 3px 9px; font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums; box-shadow: 0 4px 14px var(--bayang);
}

/* ---------- grafik batang dashboard ---------- */
.card:has(> .grafik-batang) { display: flex; flex-direction: column; }
.grafik-batang {
  display: flex; align-items: flex-end; gap: var(--s2);
  min-height: 180px; height: 100%; padding-top: var(--s2);
  border-bottom: 1px solid var(--line);
}
.batang-kolom { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.batang { width: 100%; max-width: 46px; border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, var(--gold), var(--gold-dim)); min-height: 3px; }
.batang-label { font-size: var(--t1); color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- cetak: putih bersih, tanpa kerangka aplikasi ---------- */
@media print {
  /* Kertas: SELURUH token warna ditimpa — termasuk token baru --panel-3,
     --line-kuat, --*-t, dan --elev-*. Satu token yang terlewat berarti
     tinta gelap dari tema layar ikut tercetak. */
  body, body.tema-terang {
    --bg: #fff; --panel: #fff; --panel-2: #f2f2f2; --panel-3: #e8e8e8;
    --line: #999; --line-kuat: #666; --text: #000; --muted: #444;
    --gold: #8a6a1f; --gold-dim: #8a6a1f; --gold-hi: #8a6a1f; --gold-teks: #fff;
    --gold-t: #5a4413; --hijau-t: #0f5c3a; --merah-t: #95232c; --biru-t: #1c4a75;
    --amber-t: #6e4d0f; --abu-t: #4a4f57;
    --green: #14794d; --red: #bf2f39; --blue: #245f96; --amber: #8f6414;
    --garis-tabel: #bbb; --baris-sorot: transparent; --input-bg: #fff;
    --kanvas-bg: #fff; --kanvas-garis: #ddd; --bayang: transparent;
    --elev-1: none; --elev-2: none; --elev-3: none;
    background: #fff !important; color: #000 !important;
  }
  /* strip zebra tidak ikut tercetak — tinta terbuang dan justru mengaburkan */
  tbody tr:nth-child(even) td { background: transparent !important; }
  th { position: static !important; }
  /* chrome aplikasi tidak ikut tercetak — termasuk top bar beserta jamnya */
  .sidebar, .topbar, button, .tabbar, #toast-root, .page-sub, .chip-rp { display: none !important; }
  .main { padding: 0; overflow: visible; }
  .card { box-shadow: none; background: #fff; break-inside: avoid; }
  .scroll-x { overflow: visible; }
  /* saat modal (mis. struk) terbuka, hanya modal yang dicetak */
  body:has(.modal-bg) .main, body:has(.modal-bg) .sidebar { display: none !important; }
  body .modal-bg, body.tema-terang .modal-bg {
    position: static; background: none !important; backdrop-filter: none;
  }
  .modal { box-shadow: none; border: none; width: 100%; max-height: none; animation: none; }
  .modal button { display: none !important; }
}