:root {
  /* Matcha kontras tinggi — semua pasangan teks lolos WCAG AA (≥ 4,5:1) */
  --m900: #13310A;
  --m800: #24521A;   /* header: teks putih 9,1:1 */
  --m700: #2F6A1B;   /* tombol utama: teks putih 6,6:1 */
  --m600: #3F8423;
  --m500: #5A9E2E;   /* batang grafik: 3,3:1 terhadap putih */
  --m300: #A9CF85;
  --m200: #CDE5B3;
  --m100: #E2F0D3;
  --m50:  #F2F8EA;
  --bg:   #EEF4E5;   /* latar hijau muda agar kartu putih menonjol */
  --card: #FFFFFF;
  --ink:  #13200B;   /* teks utama 15:1 */
  --muted:#46553B;   /* teks sekunder 7–8:1 */
  --line: #CFDCBF;
  --field:#7F9868;   /* garis input 3,2:1 */
  --crust:#F2B544;   /* aksen roti: teks gelap 9,3:1 */
  --cream:#FFF6E0;
  --danger:#B3311B;
  --warn-bg:#FFE9C2; --warn-ink:#7A4A00;
  --bad-bg:#FDDCD4;  --bad-ink:#9B2410;
  --ok-bg:#DDEFC9;   --ok-ink:#24521A;
  --sale-bg:#DCE8FA; --sale-ink:#1F4E8C;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(38,56,26,.06), 0 4px 14px rgba(38,56,26,.07);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); font-size: 15px; line-height: 1.4; }
body.noscroll { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--m700); }
h1, h2, h3 { margin: 0; line-height: 1.2; }
.muted { color: var(--muted); }
.r { text-align: right; }
.boot { padding: 40px; text-align: center; color: var(--muted); }
[hidden] { display: none !important; }

/* ---------- Tombol & input ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent; border-radius: 10px; padding: 10px 16px;
  font-weight: 600; background: var(--m100); color: var(--m800);
  min-height: 44px; transition: background .15s, transform .05s;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--m700); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--m800); }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn.ghost:hover { background: var(--m50); }
.btn.danger-ghost { background: transparent; border-color: #EBC9C1; color: var(--danger); }
.btn.sm { min-height: 34px; padding: 6px 12px; font-size: 14px; }
.btn.xl { min-height: 56px; font-size: 18px; }
.btn.block { width: 100%; }
.grow { flex: 1; }

input[type=text], input[type=search], input[type=date], input:not([type]), input[inputmode], select, textarea {
  width: 100%; border: 1px solid var(--field); border-radius: 10px; background: #fff;
  padding: 10px 12px; min-height: 44px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--m500); box-shadow: 0 0 0 3px var(--m100); }
.input-xl { font-size: 26px; font-weight: 700; text-align: right; min-height: 60px; }
.label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin: 14px 0 6px; }
.label small { font-weight: 400; }

.chip {
  border: 1.5px solid var(--field); background: #fff; border-radius: 999px;
  padding: 7px 14px; font-weight: 600; font-size: 14px; white-space: nowrap; min-height: 38px;
}
.chip.on { background: var(--m700); border-color: var(--m700); color: #fff; }

.seg { display: flex; gap: 6px; background: var(--m50); padding: 4px; border-radius: 12px; }
.seg button { flex: 1; border: 0; background: transparent; border-radius: 9px; padding: 10px; font-weight: 600; min-height: 44px; color: var(--muted); }
.seg button.on { background: #fff; color: var(--m800); box-shadow: var(--shadow); }

.tabs { display: flex; gap: 4px; background: var(--m100); padding: 4px; border-radius: 12px; }
.tabs button { border: 0; background: transparent; padding: 8px 16px; border-radius: 9px; font-weight: 600; color: var(--m800); }
.tabs button.on { background: #fff; box-shadow: var(--shadow); }

/* ---------- Login ---------- */
#app { min-height: 100%; }
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(circle at 20% 10%, var(--m200), transparent 50%), radial-gradient(circle at 90% 90%, var(--m100), transparent 50%), var(--bg); }
.login-card { width: 100%; max-width: 360px; background: #fff; border-radius: 22px; box-shadow: var(--shadow); padding: 28px 24px; text-align: center; }
.login-card h1 { font-size: 22px; color: var(--m800); margin-top: 12px; }
.login-card p { margin: 6px 0 0; color: var(--muted); }
.login-logo { width: 72px; height: 72px; margin: 0 auto; border-radius: 18px; overflow: hidden; }
.login-logo img { width: 100%; height: 100%; object-fit: contain; }
.pin-dots { display: flex; justify-content: center; gap: 12px; margin: 22px 0 18px; height: 16px; }
.pin-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--m600); }
.pin-dots i.on { background: var(--m700); border-color: var(--m700); }
.pin-dots.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pinpad button { height: 62px; border-radius: 16px; border: 1.5px solid var(--field); background: var(--m50); font-size: 24px; font-weight: 600; }
.pinpad button:active { background: var(--m200); }
.pinpad .ok { background: var(--m700); color: #fff; border-color: var(--m700); font-size: 17px; }
.pinpad .ghost { background: #fff; }
.login-err { color: var(--danger); min-height: 20px; margin-top: 12px; font-size: 14px; }

/* ---------- Kerangka ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px;
  background: var(--m800); color: #fff;
  padding: 8px 16px; min-height: 60px; border-bottom: 3px solid var(--crust);
  box-shadow: 0 2px 12px rgba(19,49,10,.25);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; white-space: nowrap; color: #fff; }
.brand .mark { width: 36px; height: 36px; border-radius: 10px; overflow: hidden; background: #fff; flex: none; }
.brand .mark img { width: 100%; height: 100%; object-fit: contain; }
.topbar nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.topbar nav a { color: #DCEBC9; text-decoration: none; padding: 8px 14px; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.topbar nav a.active { background: var(--crust); color: var(--ink); }
.topbar nav a:hover:not(.active) { background: rgba(255,255,255,.12); color: #fff; }
.user { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-weight: 600; color: #fff; }
.user .btn.ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.user .btn.ghost:hover { background: rgba(255,255,255,.12); }
.outlet-sel { width: auto; min-height: 38px; padding: 6px 10px; border-radius: 10px; border: 2px solid var(--crust); background: #fff; color: var(--ink); font-weight: 700; max-width: 200px; }
.outlet-pill { background: var(--crust); color: var(--ink); padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.main { min-height: calc(100vh - 58px); }

.page { max-width: 1100px; margin: 0 auto; padding: 20px 16px 40px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head h2 { font-size: 22px; color: var(--m800); }
.page-head input[type=date] { width: auto; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.card + .card { margin-top: 16px; }
.card h3 { font-size: 16px; margin-bottom: 12px; color: var(--m800); }
.empty { padding: 40px 16px; text-align: center; color: var(--muted); grid-column: 1 / -1; }

/* ---------- Kasir ---------- */
.pos { display: grid; grid-template-columns: 1fr 380px; height: calc(100vh - 58px); }
.catalog { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.catalog-top { padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 10px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.grid {
  flex: 1; overflow-y: auto; padding: 4px 16px 24px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; align-content: start;
}
.pcard {
  position: relative; display: flex; flex-direction: column; text-align: left; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden;
  box-shadow: var(--shadow); transition: transform .08s, border-color .15s;
}
.pcard:hover { border-color: var(--m300); }
.pcard:active { transform: scale(.97); }
.pimg { aspect-ratio: 4 / 3; background: var(--m100); }
.pimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.noimg { display: grid; place-items: center; background: linear-gradient(135deg, var(--m200), var(--cream)); }
.noimg span { font-size: 30px; font-weight: 800; color: var(--m600); letter-spacing: 1px; }
.pinfo { padding: 10px 12px 12px; }
.pname { font-weight: 600; font-size: 15px; line-height: 1.25; min-height: 2.5em; }
.pprice { color: var(--m700); font-weight: 700; margin-top: 4px; }
.ptag { position: absolute; top: 8px; left: 8px; background: rgba(255,255,255,.92); color: var(--m800); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.pbadge { position: absolute; top: 8px; right: 8px; background: var(--crust); color: #fff; min-width: 26px; height: 26px; border-radius: 13px; display: grid; place-items: center; font-weight: 700; font-size: 13px; padding: 0 7px; }

.cart { background: #fff; border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.cart-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cart-head h2 { font-size: 18px; flex: 1; color: var(--m800); }
.cart-list { flex: 1; overflow-y: auto; padding: 4px 0; }
.cart-empty { padding: 50px 24px; text-align: center; color: var(--muted); }
.cline { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px dashed var(--line); }
.cmain { flex: 1; min-width: 0; cursor: pointer; }
.cname { font-weight: 600; }
.ctop { font-size: 13px; color: var(--m700); display: flex; justify-content: space-between; gap: 8px; }
.ctop span { color: var(--muted); }
.cnote { font-size: 13px; color: var(--muted); font-style: italic; }
.cunit { font-size: 13px; color: var(--muted); margin-top: 2px; }
.cside { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; }
.ctotal { font-weight: 700; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.stepper button { width: 36px; height: 34px; border: 0; background: var(--m50); font-size: 20px; font-weight: 600; color: var(--m800); }
.stepper span { min-width: 34px; text-align: center; font-weight: 700; }
.stepper.lg button { width: 48px; height: 46px; font-size: 24px; }
.stepper.lg span { min-width: 48px; font-size: 18px; }
.cart-foot { padding: 14px 16px 16px; border-top: 1px solid var(--line); background: var(--m50); }
.total-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.total-row strong { font-size: 26px; color: var(--m800); }
.cart-fab, .only-mobile { display: none; }

/* ---------- Modal ---------- */
.backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(30,40,22,.45); display: grid; place-items: center; padding: 16px; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.modal { width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; border-radius: 20px; padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.25); animation: pop .18s; }
.modal.wide { max-width: 640px; }
@keyframes pop { from { transform: translateY(12px); opacity: 0; } }
.m-title { font-size: 20px; color: var(--m800); margin-bottom: 4px; }
.modal-foot { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

.pm { margin: -20px -20px 0; }
.pm-img { aspect-ratio: 16 / 9; background: var(--m100); }
.pm-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-img.noimg { aspect-ratio: 16 / 5; }
.pm-body { padding: 16px 20px 0; }
.pm-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.pm-head h3 { font-size: 20px; }
.pm-price { font-weight: 700; color: var(--m700); font-size: 18px; white-space: nowrap; }
.tops { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.top { display: flex; align-items: center; gap: 8px; text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: 12px; padding: 10px; min-height: 50px; }
.top .tname { flex: 1; font-weight: 600; font-size: 14px; }
.top .tprice { font-size: 13px; color: var(--m700); font-weight: 700; }
.tcheck { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--m300); flex: none; display: grid; place-items: center; }
.top.on { border-color: var(--m600); background: var(--m50); }
.top.on .tcheck { background: var(--m600); border-color: var(--m600); }
.top.on .tcheck::after { content: ""; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
.qty-row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.qty-row .label { margin: 0; }

.pay-total { background: linear-gradient(135deg, var(--m700), var(--m600)); color: #fff; border-radius: 14px; padding: 14px 16px; margin-top: 12px; display: flex; justify-content: space-between; align-items: baseline; }
.pay-total strong { font-size: 28px; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.change-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--m50); }
.change-row strong { font-size: 22px; color: var(--m800); }
.change-row.minus strong { color: var(--danger); }

.success { text-align: center; padding-top: 8px; }
.success .check { width: 64px; height: 64px; border-radius: 50%; background: var(--m100); color: var(--m700); display: grid; place-items: center; font-size: 34px; font-weight: 800; margin: 0 auto 12px; }
.big-change { margin-top: 18px; background: var(--m50); border-radius: 14px; padding: 16px; }
.big-change span { display: block; color: var(--muted); font-weight: 600; }
.big-change strong { font-size: 36px; color: var(--m800); }

/* ---------- Tabel & daftar ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.stat span { display: block; font-size: 13px; color: var(--muted); font-weight: 600; }
.stat strong { font-size: 22px; color: var(--m800); }
.table-wrap { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; }
.card .table-wrap { box-shadow: none; border-radius: 0; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--m50); }
.card .tbl th { background: transparent; padding-left: 0; }
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.card .tbl td { padding-left: 0; }
.tbl th.r, .tbl td.r { text-align: right; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: var(--m50); }
.tbl tr.void td { color: var(--muted); text-decoration: line-through; }
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--m100); color: var(--m800); text-decoration: none; }
.badge.off { background: #EEE; color: #666; }
.badge.red, .badge.bad { background: var(--bad-bg); color: var(--bad-ink); }
.badge.warn { background: var(--warn-bg); color: var(--warn-ink); }
.badge.ok { background: var(--ok-bg); color: var(--ok-ink); }
.bar { height: 6px; border-radius: 3px; background: var(--m100); margin-top: 4px; }
.bar i { display: block; height: 100%; border-radius: 3px; background: var(--m500); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid2 > .card + .card { margin-top: 0; }

.plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.prow { display: flex; gap: 12px; align-items: center; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px; text-align: left; border: 1px solid transparent; }
.prow:hover { border-color: var(--m300); }
.prow.off { opacity: .55; }
.prow .thumb { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; flex: none; }
.prow .thumb.noimg span { font-size: 18px; }
.prow .thumb img { width: 100%; height: 100%; object-fit: cover; }
.prow .pi { flex: 1; min-width: 0; }
.prow .pi b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .pi small { color: var(--muted); }

/* ---------- Form ---------- */
.form label:not(.check) { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 12px; }
.form label:not(.check) > input, .form label:not(.check) > select, .form label:not(.check) > textarea { margin-top: 6px; color: var(--ink); font-weight: 400; font-size: 15px; }
.form textarea { min-height: 64px; resize: vertical; }
.check { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-weight: 600; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--m700); }
.img-up { display: flex; gap: 14px; align-items: center; }
.img-prev { width: 120px; height: 90px; border-radius: 12px; overflow: hidden; background: var(--m50); border: 1px dashed var(--m300); display: grid; place-items: center; font-size: 12px; color: var(--muted); text-align: center; flex: none; }
.img-prev img { width: 100%; height: 100%; object-fit: cover; }
.img-prev.logo img { object-fit: contain; }
.img-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.hint { font-size: 13px; color: var(--muted); margin-top: 6px; }
.radio-row { display: flex; gap: 8px; margin-top: 6px; }

.settings { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
.preview-wrap { position: sticky; top: 76px; }
.preview-paper { background: #fff; border-radius: 6px; box-shadow: var(--shadow); padding: 14px 0; display: flex; justify-content: center; }
.receipt-box { background: var(--m50); border-radius: 12px; padding: 14px; display: flex; justify-content: center; margin-top: 12px; }
.receipt-box .receipt { background: #fff; padding: 10px 8px; box-shadow: var(--shadow); }

/* ---------- Struk ---------- */
.receipt { font-family: "Courier New", ui-monospace, Menlo, Consolas, monospace; color: #000; line-height: 1.35; word-wrap: break-word; }
.receipt.w58 { width: 48mm; }
.receipt.w80 { width: 72mm; }
.receipt.fs11 { font-size: 11px; } .receipt.fs12 { font-size: 12px; } .receipt.fs13 { font-size: 13px; }
.r-center { text-align: center; }
.r-store { font-weight: 700; font-size: 1.25em; }
.r-logo { text-align: center; margin-bottom: 4px; }
.r-logo img { max-width: 60%; max-height: 22mm; filter: grayscale(1); }
.r-gap { margin-top: 4px; }
.r-line { border-top: 1px dashed #000; margin: 6px 0; }
.r-row { display: flex; justify-content: space-between; gap: 6px; }
.r-item { margin-bottom: 4px; }
.r-sub { padding-left: 8px; }
.r-bold { font-weight: 700; font-size: 1.1em; }
.r-void { font-weight: 700; margin: 4px 0; }
.r-title { font-weight: 700; margin-top: 4px; letter-spacing: .5px; }
.r-head { font-weight: 700; margin: 2px 0; }
.r-row span:first-child { min-width: 0; }
.r-row span:last-child { white-space: nowrap; text-align: right; }
.r-sign { display: flex; justify-content: space-between; text-align: center; margin-top: 4px; }
.r-sign > div { width: 48%; }

#print-area { display: none; }
#print-area.measure { display: block; position: absolute; left: -10000px; top: 0; visibility: hidden; }
@media print {
  body { background: #fff; }
  body > * { display: none !important; }
  #print-area { display: block !important; }
}

/* ---------- Toast ---------- */
#toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px); opacity: 0; z-index: 80; background: var(--m900); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 600; pointer-events: none; transition: .2s; max-width: calc(100vw - 32px); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.err { background: var(--danger); }

/* ---------- Umum tambahan ---------- */
.mb { margin-bottom: 14px; }
.nowrap { white-space: nowrap; }
.small { font-size: 12.5px; }
.page.wide { max-width: 1280px; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.in { background: var(--ok-bg); color: var(--ok-ink); }
.btn.in:hover { background: var(--m200); }
.tbl tr.off td { opacity: .55; }
.menu-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.menu-list .btn { justify-content: flex-start; }
.card h3 small { font-weight: 400; }

/* Stat yang bisa diklik (filter stok) */
.stat-btn { text-align: left; border: 2px solid transparent; cursor: pointer; font: inherit; }
.stat-btn.on { border-color: var(--m600); }
.stat-btn span .badge { font-size: 12px; display: inline-block; }

/* Jenis pergerakan stok */
.mv { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.mv.in { background: var(--ok-bg); color: var(--ok-ink); }
.mv.out { background: var(--bad-bg); color: var(--bad-ink); }
.mv.sale { background: var(--sale-bg); color: var(--sale-ink); }
.mv.adj { background: var(--warn-bg); color: var(--warn-ink); }

.filter-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.filter-row label { font-size: 13px; font-weight: 600; color: var(--muted); }
.filter-row input, .filter-row select { margin-top: 6px; }

/* Editor resep di form produk/topping */
.recipe { margin-top: 18px; padding: 12px; border-radius: 12px; background: var(--m50); border: 1px dashed var(--m300); }
.recipe .label { margin-top: 0; }
.rc-row { display: grid; grid-template-columns: 1fr 90px 54px 40px; gap: 6px; align-items: center; margin-bottom: 8px; }
.form .rc-row select, .form .rc-row input { margin: 0; }
.rc-unit { font-size: 13px; color: var(--muted); }

/* ---------- Dashboard ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.kpi span { font-size: 13px; color: var(--muted); font-weight: 600; }
.kpi strong { font-size: 26px; color: var(--ink); letter-spacing: -.01em; }
.kpi small { font-size: 12.5px; }
.kpi.hero { background: linear-gradient(135deg, var(--m700), var(--m600)); color: #fff; }
.kpi.hero span, .kpi.hero small, .kpi.hero strong { color: #fff; }
.kpi.hero strong { font-size: 30px; }
.kpi small.up { color: var(--ok-ink); font-weight: 700; }
.kpi small.down { color: var(--bad-ink); font-weight: 700; }
.kpi.hero small.up, .kpi.hero small.down { color: #fff; }
.dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dash-grid > .card { margin: 0; min-width: 0; }
.span2 { grid-column: span 2; }

/* Grafik kolom */
.cc { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.cc-y { display: flex; flex-direction: column; justify-content: space-between; height: 180px; font-size: 11px; color: var(--muted); text-align: right; transform: translateY(-6px); }
.cc-main { min-width: 0; }
.cc-plot { position: relative; height: 180px; display: flex; align-items: flex-end; gap: 0; }
.cc-grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.cc-grid i { border-top: 1px solid var(--line); }
.cc-grid i:last-child { border-top-color: #CBD5BD; }
.cc-col { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; padding: 0 2px; cursor: default; }
.cc-col:hover { background: rgba(141,187,87,.12); border-radius: 6px 6px 0 0; }
.cc-bar { width: 100%; max-width: 34px; background: var(--m500); border-radius: 4px 4px 0 0; transition: height .3s; }
.cc-bar.hl { background: var(--m700); }
.cc-col:hover .cc-bar { background: var(--m600); }
.cc-x { display: flex; margin-top: 6px; }
.cc-x span { flex: 1; text-align: center; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: visible; }

/* Daftar dengan bar horizontal */
.lrows { display: flex; flex-direction: column; }
.lrow { display: flex; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.lrow:last-child { border-bottom: 0; }
.lrow.click { cursor: pointer; }
.lrow.click:hover { background: var(--m50); }
.lrows.compact .lrow { padding: 7px 0; }
.lrow-top { display: flex; justify-content: space-between; gap: 8px; }
.hbar, .meter { height: 8px; border-radius: 4px; background: var(--m100); margin-top: 6px; overflow: hidden; }
.hbar i { display: block; height: 100%; background: var(--m500); border-radius: 4px; }
.meter i { display: block; height: 100%; background: var(--crust); border-radius: 4px; }
.stock-counts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.stock-counts a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink); padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; }
.stock-counts a:hover { background: var(--m50); }
.all-good { padding: 24px 0; text-align: center; color: var(--ok-ink); font-weight: 700; }
.mini-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mini-stats div { background: var(--m50); border-radius: 10px; padding: 8px; text-align: center; }
.mini-stats b { display: block; font-size: 20px; margin-top: 4px; }

/* ---------- Multi-outlet ---------- */
.scope-note { margin: -6px 0 14px; color: var(--muted); }
.scope-note b { color: var(--ink); }
.scope-tag { display: inline-block; vertical-align: middle; font-size: 13px; font-weight: 700; background: var(--crust); color: var(--ink); padding: 3px 10px; border-radius: 999px; margin-left: 6px; }
.cart-outlet { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pick-outlet { max-width: 760px; margin: 24px auto; text-align: center; }
.pick-outlet h2 { color: var(--m800); font-size: 24px; }
.outlet-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 20px; }
.outlet-grid .outlet-card { flex: 0 1 240px; }
.outlet-card { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 20px; border-radius: var(--radius); border: 2px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.outlet-card:hover { border-color: var(--m600); }
.outlet-card b { font-size: 18px; color: var(--m800); }
.outlet-card span { color: var(--muted); font-size: 14px; }
.cell-aman { color: var(--ink); font-weight: 600; }
.cell-menipis { background: var(--warn-bg); color: var(--warn-ink); font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.cell-habis { background: var(--bad-bg); color: var(--bad-ink); font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.up { color: var(--ok-ink); font-weight: 700; }
.down { color: var(--bad-ink); font-weight: 700; }
.cmp-bar { min-width: 180px; }
.more { display: inline-block; margin-top: 10px; font-weight: 700; color: var(--m700); }

/* ---------- Offline & sinkron ---------- */
.net { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 13px; white-space: nowrap; }
.net i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.net.on { background: rgba(255,255,255,.14); color: #DCEBC9; }
.net.wait { background: var(--warn-bg); color: var(--warn-ink); }
.net.off { background: var(--bad-bg); color: var(--bad-ink); animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .75; } }
.offline-note { background: var(--warn-bg); color: var(--warn-ink); border-radius: 10px; padding: 10px 12px; font-size: 14px; font-weight: 600; margin: 12px 0 0; }
.pending-card { border: 2px solid var(--crust); }
.badge.sale { background: var(--sale-bg); color: var(--sale-ink); }
.device-pill { display: inline-block; margin-top: 8px; background: var(--m100); color: var(--m800); font-weight: 700; font-size: 13px; padding: 4px 12px; border-radius: 999px; }

/* ---------- Cetak langsung ---------- */
.direct-print { margin-top: 16px; padding: 14px; border-radius: 12px; background: var(--cream); border: 1.5px solid var(--crust); font-size: 14px; }
.direct-print b { color: var(--ink); }
.direct-print p { margin: 6px 0; color: var(--muted); }
.direct-print ol { margin: 6px 0 10px; padding-left: 20px; color: var(--ink); }
.direct-print li { margin: 6px 0; }

/* ---------- Banner pasang aplikasi ---------- */
.install-bar { position: fixed; z-index: 45; top: 74px; right: 16px; width: min(380px, calc(100vw - 32px)); display: flex; align-items: center; gap: 12px; background: #fff; border: 2px solid var(--crust); border-radius: 16px; padding: 12px; box-shadow: 0 10px 30px rgba(19,49,10,.25); animation: pop .2s; }
.install-bar.warn-bar { border-color: var(--danger); background: #FFF8F6; }
.install-bar img { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.install-bar b { display: block; color: var(--m800); }
.install-bar span { display: block; font-size: 13px; color: var(--muted); }
.login ~ #install .install-bar, body:has(.login) .install-bar { top: 16px; }

/* ---------- Transfer stok ---------- */
.mv.tf { background: #EBE2F7; color: #4E2A7A; }
.count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--danger); color: #fff; font-size: 12px; margin-left: 4px; }
.tf-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.tf-list .card + .card { margin-top: 0; }
.tf.tf-in { border: 2px solid var(--crust); }
.tf-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.tf-dir { font-size: 12.5px; font-weight: 700; color: var(--m800); margin-left: 4px; }
.tf-route { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 10px 12px; background: var(--m50); border-radius: 10px; font-weight: 700; }
.tf-route b { color: var(--m700); font-size: 18px; }
.tf-route select { flex: 1; width: auto; }
.tf-items { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.tf-alert { display: block; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: #EBE2F7; color: #4E2A7A; font-weight: 700; text-decoration: none; }

/* ---------- Outlet & akun kasir ---------- */
.outlet-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.outlet-cards .card + .card { margin-top: 0; }
.outlet-box.off { opacity: .6; }
.ob-name { font-size: 17px; color: var(--m800); }
.staff { display: flex; flex-wrap: wrap; gap: 6px; }
.staff-chip { border: 1.5px solid var(--field); background: #fff; border-radius: 999px; padding: 5px 12px; font-weight: 600; font-size: 14px; }
.staff-chip:hover { border-color: var(--m700); background: var(--m50); }
.staff-chip.off { opacity: .55; }
.device-row { display: flex; gap: 10px; }
.device-row select { flex: 1; }

#tip { position: fixed; z-index: 90; pointer-events: none; background: var(--m900); color: #fff; font-size: 13px; padding: 7px 10px; border-radius: 8px; opacity: 0; transition: opacity .1s; max-width: 260px; }
#tip.show { opacity: 1; }

/* ---------- Responsif ---------- */
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr 1fr; }
  .dash-grid .span2 { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .pos { grid-template-columns: 1fr 330px; }
  .settings { grid-template-columns: 1fr; }
  .preview-wrap { position: static; }
}
@media (max-width: 760px) {
  body { font-size: 15px; }
  .topbar { flex-wrap: wrap; gap: 8px 12px; padding: 8px 12px; }
  .topbar nav { order: 3; flex-basis: 100%; }
  .brand span { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
  .user { margin-left: auto; }
  .user .uname { display: none; }
  .outlet-sel { max-width: 150px; }
  .main { min-height: auto; }
  .pos { display: block; height: auto; }
  .catalog { overflow: visible; }
  .catalog-top { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 10px 12px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 4px 12px 96px; overflow: visible; }
  .cart { position: fixed; inset: 0; z-index: 40; border: 0; transform: translateY(100%); transition: transform .22s; }
  .cart.open { transform: none; }
  .only-mobile { display: inline-flex; }
  .cart-fab {
    position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 30;
    display: flex; align-items: center; gap: 10px; border: 0; border-radius: 16px; padding: 14px 16px;
    background: var(--m700); color: #fff; font-weight: 600; box-shadow: 0 8px 24px rgba(38,56,26,.35);
  }
  .cart-fab strong { margin-left: auto; font-size: 18px; }
  .fab-count { background: #fff; color: var(--m800); border-radius: 999px; min-width: 26px; height: 26px; display: grid; place-items: center; font-weight: 800; padding: 0 6px; }
  .modal { padding: 16px; border-radius: 18px; }
  .pm { margin: -16px -16px 0; }
  .pm-body { padding: 14px 16px 0; }
  .tops { grid-template-columns: 1fr; }
  .grid2 { grid-template-columns: 1fr; }
  .page { padding: 14px 12px 32px; }
  .dash-grid { grid-template-columns: 1fr; }
  .kpi strong { font-size: 21px; }
  .kpis { gap: 10px; }
  .kpi { padding: 12px 14px; }
  .kpi.hero strong { font-size: 22px; }
  .filter-row { grid-template-columns: 1fr 1fr; }
  .hide-sm { display: none; }
  .head-actions { width: 100%; }
  .head-actions .btn { flex: 1; }
  .rc-row { grid-template-columns: 1fr 70px 44px 36px; }
  .cc-y, .cc-plot { height: 150px; }
}