/*
  Kasir Agung, gaya dasar. Diambil dari prototype v12 (acuan tampilan).
  Warna dari logo Agung Catering: kuning, hitam, merah garis, hijau topi koki.
  Kuning hanya untuk pita atas, tab aktif, dan tombol utama.
*/
:root {
  --bg: #fbf8ec;
  --surface: #ffffff;
  --ink: #17171a;
  --muted: #5e5a4c;
  --line: #e4dec6;
  --brand: #f0d60d;
  --brand-ink: #111317;
  --brand-soft: #fcf3bd;
  --brand-line: #c9ac00;
  --leaf: #3b7a14;
  --leaf-ink: #ffffff;
  --leaf-soft: #e6f2d6;
  --warn: #8a5800;
  --warn-soft: #fbeccb;
  --danger: #ad1c22;
  --danger-soft: #f9e0df;
  --head: #f0d60d;
  --head-ink: #111317;
  --head-line: #111317;
  --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
  --r: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15140f; --surface: #1f1d16; --ink: #f2efe3; --muted: #aba695; --line: #38352a;
    --brand-soft: #3a3311; --brand-line: #f0d60d;
    --leaf: #9ccf6a; --leaf-ink: #10200a; --leaf-soft: #22301a;
    --warn: #eab85a; --warn-soft: #382c12; --danger: #f2877f; --danger-soft: #3c1e1c;
    --head: #1f1d16; --head-ink: #f2efe3; --head-line: #f0d60d;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15140f; --surface: #1f1d16; --ink: #f2efe3; --muted: #aba695; --line: #38352a;
  --brand-soft: #3a3311; --brand-line: #f0d60d;
  --leaf: #9ccf6a; --leaf-ink: #10200a; --leaf-soft: #22301a;
  --warn: #eab85a; --warn-soft: #382c12; --danger: #f2877f; --danger-soft: #3c1e1c;
  --head: #1f1d16; --head-ink: #f2efe3; --head-line: #f0d60d;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.45;
  padding-inline: 16px; padding-block: 0 40px;
  padding-top: env(safe-area-inset-top, 0px);
}
img { max-width: 100%; }
.wrap { max-width: 1100px; margin: 0 auto; }

/* ===== header ===== */
header.top {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  padding-block: 10px; padding-inline: 16px; margin-inline: -16px;
  background: var(--head); color: var(--head-ink); border-bottom: 3px solid var(--head-line);
  transition: background-color .35s ease, color .35s ease;
}
.brandmark { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brandmark img { height: 48px; width: auto; display: block; border-radius: 6px; }
.brandmark small { display: block; font-size: .8rem; font-weight: 700; font-family: var(--f-body); }
h1 { font-family: var(--f-display); font-size: 1.6rem; margin: 0; letter-spacing: -0.01em; }
.hdr-right { position: relative; display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.brandmark h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.akun-chip { font-size: .85rem; font-weight: 700; padding: 6px 12px; border-radius: 99px; background: var(--head-ink); color: var(--head); white-space: nowrap; }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--head-ink); background: transparent; color: var(--head-ink); display: grid; place-items: center; cursor: pointer; }
.set-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 290px; max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 14px;
  display: grid; gap: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.18); animation: fadeUp .2s ease both;
}
/* layar sempit atau pendek (HP tegak / miring): menu gear menempel di kanan layar, bisa digulir */
@media (max-width: 640px), (max-height: 520px) {
  .set-pop {
    position: fixed; right: 12px; left: auto; top: calc(env(safe-area-inset-top, 0px) + 72px);
    width: min(320px, calc(100vw - 24px)); max-width: none;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 150px);
  }
}
.set-pop .seg button { flex: 1; }
.set-akun { font-size: .9rem; line-height: 1.5; }
.versi { font-family: var(--f-mono); font-size: .78rem; color: var(--muted); }

/* ===== tab ===== */
nav.tabs {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--bg);
  display: flex; gap: 6px; overflow-x: auto; padding-block: 8px; border-bottom: 1px solid var(--line);
}
nav.tabs button { font: 700 1rem var(--f-body); border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 10px 16px; border-radius: 99px; cursor: pointer; white-space: nowrap; }
nav.tabs button[aria-selected="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand-line); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ===== isi ===== */
section.view { padding-block: 18px; }
h2 { font-family: var(--f-display); font-size: 1.25rem; margin: 0 0 4px; text-wrap: balance; }
h2::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--brand); border: 2px solid var(--brand-ink); border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.sub { color: var(--muted); margin: 0 0 16px; font-size: .95rem; max-width: 65ch; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: grid; gap: 14px; min-width: 0; max-width: 560px; }
.label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.field { display: grid; gap: 4px; min-width: 0; }
.field label { font-size: .85rem; color: var(--muted); }
input, select { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; width: 100%; min-width: 0; }
.hint { font-size: .82rem; color: var(--muted); }
.empty { color: var(--muted); padding: 18px; text-align: center; border: 1px dashed var(--line); border-radius: var(--r); max-width: 560px; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; }
.kv dt { color: var(--muted); font-size: .9rem; }
.kv dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.alert { border-radius: 8px; padding: 10px 12px; font-size: .9rem; }
.alert.warn { background: var(--warn-soft); color: var(--warn); }
.alert.bad { background: var(--danger-soft); color: var(--danger); }
.alert.ok { background: var(--leaf-soft); color: var(--leaf); }
.primary { font: 700 1.05rem var(--f-body); background: var(--brand); color: var(--brand-ink); border: 2px solid var(--brand-ink); border-radius: 10px; padding: 14px; cursor: pointer; }
.primary:disabled { opacity: .45; cursor: not-allowed; }
.ghost { font: 700 .9rem var(--f-body); background: var(--surface); color: var(--ink); border: 2px solid var(--brand-line); border-radius: 8px; padding: 10px 12px; cursor: pointer; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { font: 700 .9rem var(--f-body); border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 8px 14px; border-radius: 8px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand-line); }
button[data-armed] { background: var(--brand-ink) !important; color: var(--brand) !important; border-color: var(--brand-ink) !important; }
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 99px; font-weight: 700; z-index: 120;
  max-width: calc(100vw - 32px); text-align: center;
}
html.view-hp .toast { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }

/* ===== animasi ===== */
body, .panel, input, select, nav.tabs { transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes popIn { 0% { opacity: 0; transform: scale(.82); } 60% { opacity: 1; transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes barFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes shake { 0%,100% { transform: none; } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@keyframes spin { to { transform: rotate(360deg); } }
section.view:not([hidden]) { animation: fadeUp .35s cubic-bezier(.2,.7,.2,1) backwards; }
.toast:not([hidden]) { animation: fadeUp .3s ease both; }
.primary, .ghost, .seg button, .icon-btn, nav.tabs button, .bnav button, .keypad button { transition: transform .12s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
.primary:active, .ghost:active, .seg button:active, .icon-btn:active, nav.tabs button:active, .bnav button:active, .keypad button:active { transform: scale(.96); }

/* ===== splash ===== */
.splash { position: fixed; inset: 0; z-index: 100; background: #f0d60d; color: #111317; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; transition: opacity .45s ease, transform .45s ease; }
.splash img { height: 110px; width: auto; border-radius: 12px; animation: popIn .7s cubic-bezier(.2,.8,.2,1) both; }
.sp-title { font-family: var(--f-display); font-size: 2rem; font-weight: 700; animation: fadeUp .5s .35s both; }
.sp-sub { font-weight: 700; animation: fadeUp .5s .5s both; }
.sp-bar { width: 160px; height: 6px; border-radius: 99px; background: rgba(17,19,23,.15); overflow: hidden; margin-top: 10px; animation: fadeUp .4s .6s both; }
.sp-bar i { display: block; height: 100%; background: #111317; transform-origin: left; animation: barFill 1.1s .7s cubic-bezier(.4,0,.2,1) both; }
.splash.out { opacity: 0; transform: scale(1.04); pointer-events: none; }

/* ===== login ===== */
.login { position: fixed; inset: 0; z-index: 90; background: var(--bg); overflow-y: auto; display: grid; place-items: center; padding: 24px 16px; }
.login:not([hidden]) { animation: fadeUp .4s ease both; }
.login.out { opacity: 0; transition: opacity .35s ease; }
.login-card { width: 100%; max-width: 380px; display: grid; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.login-card img { height: 64px; width: auto; justify-self: center; border-radius: 8px; }
.lg-title { font-family: var(--f-display); font-size: 1.35rem; font-weight: 700; text-align: center; }
#lg-id { text-transform: uppercase; font-family: var(--f-mono); font-weight: 600; letter-spacing: .08em; }
.pin-dots { display: flex; justify-content: center; gap: 12px; }
.pin-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--brand-line); transition: background-color .15s ease, transform .15s ease; }
.pin-dots i.on { background: var(--ink); border-color: var(--ink); transform: scale(1.1); }
.pin-dots.shake { animation: shake .3s ease 2; }
.keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.keypad button { height: 52px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 700 1.3rem var(--f-display); cursor: pointer; }
.keypad .kp-soft { font: 700 .95rem var(--f-body); background: var(--brand-soft); }
.keypad .kp-go { font: 700 1rem var(--f-body); background: var(--brand); color: var(--brand-ink); border: 2px solid var(--brand-ink); }
.keypad button:disabled { opacity: .5; cursor: wait; }
.kp-go.loading { color: transparent; position: relative; }
.kp-go.loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--brand-ink); border-right-color: transparent; animation: spin .7s linear infinite; }
.lg-err { min-height: 1.2em; color: var(--danger); font-weight: 700; text-align: center; font-size: .9rem; }
.lg-help { font-size: .82rem; color: var(--muted); text-align: center; }

/* ===== tampilan HP ===== */
.bnav, .more-pop { display: none; }
html.view-hp body { padding-block-end: 110px; }
html.view-hp.force body { background: var(--line); }
html.view-hp.force .wrap { max-width: 420px; background: var(--bg); min-height: 100vh; padding-inline: 12px; box-shadow: 0 0 0 1px var(--line); }
html.view-hp .wrap { max-width: 420px; }
html.view-hp header.top { margin-inline: -12px; padding-inline: 12px; }
html.view-hp .brandmark img { height: 36px; }
html.view-hp .brandmark small { display: none; }
html.view-hp h1 { font-size: 1.25rem; }
html.view-hp nav.tabs { display: none; }
html.view-hp .akun-chip { font-size: .78rem; padding: 5px 10px; }
@media (max-width: 420px) { .chip-nama { display: none; } }
html.view-hp .sub { font-size: .88rem; }
html.view-hp .bnav {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(420px, 100%); z-index: 20; background: var(--surface); border-top: 1px solid var(--line);
  padding: 6px 4px calc(10px + env(safe-area-inset-bottom, 0px));
}
.bnav button { display: grid; justify-items: center; gap: 2px; border: 0; background: transparent; color: var(--muted); font: 700 .7rem var(--f-body); padding: 4px 0; cursor: pointer; }
.bnav svg { width: 44px; height: 26px; padding: 3px 12px; border-radius: 99px; }
.bnav button.on { color: var(--ink); }
.bnav button.on svg { background: var(--brand); color: var(--brand-ink); }
html.view-hp .more-pop:not([hidden]) {
  display: grid; position: fixed; right: max(12px, calc(50% - 198px)); bottom: 84px; z-index: 25;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px; min-width: 200px;
  box-shadow: 0 12px 30px rgba(0,0,0,.2); animation: fadeUp .2s ease both;
}
.more-pop button { text-align: left; border: 0; background: transparent; color: var(--ink); font: 700 1rem var(--f-body); padding: 12px; border-radius: 8px; cursor: pointer; }
.more-pop button:hover { background: var(--brand-soft); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ===== v0.2 kelola menu ===== */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.toolbar input[type="search"] { flex: 1 1 220px; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; }
.chip { font: 700 .88rem var(--f-body); border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 7px 12px; border-radius: 99px; cursor: pointer; white-space: nowrap; }
.chip[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand-line); }
.cek { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--muted); cursor: pointer; }
.cek input { width: 20px; height: 20px; accent-color: var(--brand-line); }
.mgrup { margin-top: 14px; }
.mgrup > .label { margin-bottom: 6px; }
.mlist { display: grid; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.mrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; text-align: left; width: 100%;
  font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; }
.mrow:last-child { border-bottom: 0; }
button.mrow { cursor: pointer; }
button.mrow:hover { background: var(--brand-soft); }
.mrow.mati { opacity: .55; }
.mrow .mn b { display: block; }
.mrow .mn small { display: block; color: var(--muted); font-size: .8rem; }
.mrow .mh { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mrow .mh small { display: block; color: var(--muted); font-size: .8rem; }
.badge { display: inline-block; font-size: .7rem; font-weight: 700; padding: 1px 7px; border-radius: 99px; margin-left: 6px; vertical-align: 2px; background: var(--line); color: var(--ink); }
.badge.mati { background: var(--danger-soft); color: var(--danger); }
.badge.titip { background: var(--warn-soft); color: var(--warn); }

html.modal-open, html.modal-open body { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,.45); display: grid; place-items: center; padding: 16px; animation: fadeUp .2s ease both; }
.sheet { width: 100%; max-width: 600px; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--ink); border-radius: 14px; border: 1px solid var(--line); }
.sheet-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.sheet-head h3 { margin: 0; font-family: var(--f-display); font-size: 1.2rem; }
.sheet-body { padding: 16px; display: grid; gap: 14px; }
.sheet-foot { position: sticky; bottom: 0; display: flex; gap: 10px; justify-content: space-between; padding: 12px 16px;
  background: var(--surface); border-top: 1px solid var(--line); }
.sheet-foot .primary { flex: 1; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 480px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } .modal { padding: 0; } .sheet { max-height: 100dvh; height: 100dvh; border-radius: 0; } }
.field .ket { font-size: .8rem; color: var(--muted); min-height: 1em; }
.field .ket.bad { color: var(--danger); font-weight: 700; }
.sub-box { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: grid; gap: 10px; }
.vchips { display: flex; flex-wrap: wrap; gap: 6px; }
.vchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 99px; padding: 4px 6px 4px 12px; font-weight: 700; font-size: .9rem; }
.vchip.mati { opacity: .5; text-decoration: line-through; }
.vchip button { border: 0; background: var(--bg); color: var(--ink); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-weight: 700; }
.baris-tambah { display: flex; gap: 8px; flex-wrap: wrap; }
.baris-tambah input { flex: 1 1 120px; }
.addon { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto auto; gap: 8px; align-items: center; }
.addon.mati > span { opacity: .5; text-decoration: line-through; }
@media (max-width: 480px) { .addon { grid-template-columns: minmax(0, 1fr) 96px; } }
.ghost.kecil { padding: 8px 10px; font-size: .85rem; }
.ghost.bahaya { border-color: var(--danger); color: var(--danger); }
.icon-x { border: 0; background: transparent; color: var(--ink); font-size: 1.6rem; line-height: 1; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }
html.modal-open .toast { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 16px); }

/* ===== v0.3 kasir, daftar order, nota ===== */
.mono { font-family: var(--f-mono); font-weight: 600; }
.badge.ok { background: var(--leaf-soft); color: var(--leaf); }
.sum { display: grid; gap: 4px; }
.sum-row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-variant-numeric: tabular-nums; }
.sum-row.total { font-size: 1.2rem; font-family: var(--f-display); font-weight: 700; padding-top: 6px; border-top: 2px solid var(--ink); }
.sum-row.lebih b { color: var(--warn); }

.ks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 16px; align-items: start; }
.ks-menu { min-width: 0; }
.ks-cart { position: sticky; top: 64px; max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; max-width: none; gap: 12px; }
@media (max-width: 860px) { .ks { grid-template-columns: minmax(0, 1fr); } .ks-cart { position: static; max-height: none; overflow: visible; } }
html.view-hp .ks { grid-template-columns: minmax(0, 1fr); }
html.view-hp .ks-cart { position: static; max-height: none; overflow: visible; }
.ks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
html.view-hp .ks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ks-item { position: relative; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 10px 12px; cursor: pointer; display: grid; gap: 2px; align-content: start; min-height: 74px;
  transition: transform .12s ease, border-color .2s ease, background-color .2s ease; }
.ks-item:hover { border-color: var(--brand-line); }
.ks-item:active { transform: scale(.97); }
.ks-item b { font-size: .95rem; line-height: 1.25; }
.ks-item span { font-variant-numeric: tabular-nums; font-size: .88rem; color: var(--muted); }
.ks-item small { font-size: .76rem; color: var(--muted); }
.ks-item .n { position: absolute; top: -7px; right: -7px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 99px; font-style: normal;
  background: var(--brand); color: var(--brand-ink); border: 2px solid var(--brand-ink); font-weight: 700; font-size: .82rem; display: grid; place-items: center; }
.ks-item.in .n { animation: popIn .35s ease both; }
.pilih-varian { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.pilih-varian .ghost { padding: 14px 10px; font-size: 1rem; }

.krow { display: grid; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.krow:first-child { padding-top: 0; }
.krow.lama { background: linear-gradient(90deg, var(--brand-soft), transparent 70%); margin-inline: -8px; padding-inline: 8px; border-radius: 6px; }
.krow.hapus { opacity: .6; }
.krow.hapus .kr-nama b { text-decoration: line-through; }
.kr-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.kr-kanan { display: flex; align-items: center; gap: 2px; flex: none; }
.kr-nama { min-width: 0; }
.kr-nama small { color: var(--muted); font-weight: 700; }
.kr-harga { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kr-ctl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kr-ctl select { width: auto; padding: 8px 10px; }
.kr-mode { font-size: .85rem; color: var(--muted); font-weight: 700; padding-inline: 4px; }
.kr-nom { width: 120px; }
.kr-del { border: 0; background: transparent; color: var(--danger); font-size: 1.5rem; line-height: 1; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }
.kr-cat { font-size: .9rem; padding: 8px 10px; }
.kr-add { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding-left: 12px; font-size: .9rem; color: var(--muted); }
.kr-add.on { color: var(--ink); font-weight: 700; }
.kr-add small { font-weight: 400; color: var(--muted); }
#ks-rows.kunci { opacity: .7; }
.step { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg); }
.step button { width: 40px; height: 40px; border: 0; background: transparent; color: var(--ink); font: 700 1.25rem var(--f-body); cursor: pointer; }
.step button:active { background: var(--brand-soft); }
.step span { min-width: 34px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.ks-bayar { display: grid; gap: 10px; }
.by-kembali { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.by-kembali.kurang { color: var(--danger); font-size: .95rem; }
.ks-ubah { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.saran { display: grid; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-top: -6px; }
.saran button { text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; cursor: pointer; }
.saran button:last-child { border-bottom: 0; }
.saran button:hover { background: var(--brand-soft); }
.saran small { color: var(--muted); font-family: var(--f-mono); }
.pel-chip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--leaf-soft); color: var(--leaf); border-radius: 8px; padding: 6px 6px 6px 12px; font-size: .9rem; }
.pel-chip button { margin-left: auto; border: 0; background: transparent; color: inherit; font-size: 1.3rem; width: 34px; height: 34px; cursor: pointer; }
.ks-bar { display: none; }
@media (max-width: 860px) {
  .ks-bar:not([hidden]) { display: flex; position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: min(420px, calc(100% - 24px)); z-index: 15; justify-content: space-between; gap: 10px; align-items: center;
    font: 700 1rem var(--f-body); background: var(--brand-ink); color: var(--brand); border: 0; border-radius: 12px; padding: 14px 16px;
    box-shadow: 0 10px 24px rgba(0,0,0,.25); cursor: pointer; }
}
.ks-bar.tutup { display: none !important; }
html.view-hp .ks-bar:not([hidden]) { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

/* daftar order */
.df-kas { max-width: none; margin-bottom: 12px; gap: 8px; }
.kas-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kas-grid div { background: var(--bg); border-radius: 8px; padding: 8px 10px; display: grid; }
.kas-grid small { color: var(--muted); font-size: .78rem; }
.kas-grid b { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.orow .mh small .badge { margin-left: 4px; }

/* nota */
.nt { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 760px) { .nt { grid-template-columns: minmax(0, 1fr); } }
html.view-hp .nt { grid-template-columns: minmax(0, 1fr); }
.nt-kanan { display: grid; gap: 12px; min-width: 0; }
.nt-aksi { gap: 10px; }
.nota { background: #fff; color: #111; font-family: var(--f-mono); font-size: 13px; line-height: 1.4; padding: 16px 14px; border-radius: 4px;
  border: 1px solid var(--line); box-shadow: 0 2px 0 var(--line); width: 100%; justify-self: center; max-width: 340px; }
.nota hr { border: 0; border-top: 1px dashed #111; margin: 8px 0; }
.nota .nh { display: grid; text-align: center; }
.nota .nh b { font-size: 15px; }
.nota .nl { display: flex; justify-content: space-between; gap: 8px; }
.nota .nl span:last-child { white-space: nowrap; }
.nota .na { padding-left: 8px; }
.nota .ni { margin-bottom: 6px; }
.nota .nn { font-weight: 600; }
.nota .nc { padding-left: 8px; font-style: italic; }
.nota .ntot { font-size: 14px; }
.nota .ntanda { text-align: center; font-weight: 600; letter-spacing: .2em; border: 1px solid #111; margin-top: 6px; }
.nota .nstat { text-align: center; font-weight: 600; letter-spacing: .15em; margin-top: 8px; }
.nota .nf { text-align: center; }
.nt-sukses { display: grid; justify-items: center; gap: 4px; text-align: center; background: var(--leaf-soft); color: var(--leaf);
  border-radius: 12px; padding: 16px; margin-bottom: 14px; animation: fadeUp .3s ease both; }
.nt-sukses .nt-no { font-family: var(--f-mono); font-size: 2.4rem; color: var(--ink); letter-spacing: .04em; }
.nt-sukses .nt-kembali { font-family: var(--f-display); font-size: 2rem; color: var(--ink); }
.nt-sukses .primary { margin-top: 8px; min-width: 220px; }
.nt-sukses .alert { color: var(--warn); }
.nt-riwayat { max-width: none; gap: 6px; }
.rb { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.rb:last-child { border-bottom: 0; }
.rb small { display: block; color: var(--muted); font-size: .8rem; }
.rb.mati > span { opacity: .55; text-decoration: line-through; }

#cetak { display: none; }
@media print {
  @page { size: 58mm auto; margin: 2mm; }
  html, body { background: #fff !important; padding: 0 !important; margin: 0 !important; }
  body > *:not(#cetak) { display: none !important; }
  #cetak { display: block !important; }
  #cetak .nota { width: 54mm; max-width: none; border: 0; box-shadow: none; padding: 0; font-size: 9pt; color: #000; }
}

/* ===== v0.4 ===== */
.seksi { margin-bottom: 14px; }
.seksi-judul { font: 700 .82rem var(--f-body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 6px 0 8px; }
.seksi.hari .seksi-judul { color: var(--leaf); }
.seksi.lain .seksi-judul { color: var(--warn); }
.ks-item.lain { border-style: dashed; opacity: .85; }
.ks-item .tg { justify-self: start; width: fit-content; font: 700 .68rem var(--f-body); font-style: normal; padding: 1px 6px; border-radius: 99px; background: var(--leaf-soft); color: var(--leaf); }
.ks-item .tg.bad { background: var(--danger-soft); color: var(--danger); }
b.tg.bad { color: var(--danger); }
.po-box { display: grid; gap: 10px; margin-bottom: 12px; border-color: var(--brand-line); background: var(--brand-soft); }
.po-box input, .po-box select { background: var(--surface); }
.sw-prev { display: flex; gap: 10px; overflow-x: auto; padding: 6px 0; scroll-snap-type: x mandatory; }
.sw-prev img { height: min(58vh, 520px); aspect-ratio: 9 / 16; border-radius: 10px; border: 1px solid var(--line); scroll-snap-align: start; flex: none; }
.hr-row .mh, .tt-row .mh { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; white-space: normal; }
.hr-row .seg button { padding: 6px 10px; }
.hr-row .seg button[data-st="habis"][aria-pressed="true"] { background: var(--danger); border-color: var(--danger); color: #fff; }
.sn-row { cursor: pointer; }
.sn-row input[type="checkbox"] { width: 22px; height: 22px; }
@media (max-width: 560px) {
  .hr-row, .tt-row { grid-template-columns: 1fr; }
  .hr-row .mh, .tt-row .mh { justify-content: flex-start; }
}
.toolbar input[type="date"] { width: auto; flex: 0 1 190px; }

/* v0.4.1 susun mingguan 2 kolom */
.sn-rentang label { font-size: .85rem; color: var(--muted); }
.sn-hari { position: sticky; top: 56px; z-index: 4; background: var(--bg); padding-block: 6px; }
.sn-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.sn-kiri .ks-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.sn-item { min-height: 64px; }
.sn-kanan { position: sticky; top: 112px; max-height: calc(100dvh - 128px); overflow-y: auto; overscroll-behavior: contain; max-width: none; gap: 10px; }
.sn-daftar { display: grid; }
.sn-kat { font: 700 .72rem var(--f-body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 8px 0 2px; }
.sn-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0 2px 2px; border-bottom: 1px solid var(--line); }
.sn-row span { font-size: .95rem; }
.sn-row .icon-x { width: 34px; height: 34px; flex: none; }
.sn-aksi { display: flex; flex-wrap: wrap; gap: 8px; }
.sn-belum { color: var(--warn); font-weight: 700; }
.sn-kanan #sn-simpan { width: 100%; }
@media (max-width: 860px) {
  .sn-wrap { grid-template-columns: minmax(0, 1fr); }
  .sn-kanan { position: static; max-height: none; overflow: visible; margin-bottom: 90px; }
}
html.view-hp .sn-wrap { grid-template-columns: minmax(0, 1fr); }
html.view-hp .sn-kanan { position: static; max-height: none; overflow: visible; margin-bottom: 150px; }
html.view-hp .sn-kiri .ks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .sn-hari { top: 0; } }
html.view-hp .sn-hari { top: 0; }