/* gp-kasir dry prototype — mobile-first, big touch targets */
:root {
  --green-700: #14532d;
  --green-600: #16803c;
  --green-100: #dcfce7;
  --bg: #f7f7f5;
  --card: #ffffff;
  --ink: #1c2421;
  --muted: #6b7570;
  --line: #e4e6e2;
  --danger: #b3261e;
  --danger-100: #fdecea;
  --amber: #92400e;
  --amber-100: #fef3c7;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
}
.page { max-width: 480px; margin: 0 auto; padding: 12px 12px 96px; }

header.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 4px 12px;
}
header.top .brand { font-weight: 700; font-size: 18px; color: var(--green-700); }
header.top .meta { font-size: 12px; color: var(--muted); text-align: right; }

nav.tabs {
  display: flex; gap: 6px; margin-bottom: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px;
}
nav.tabs a {
  flex: 1; text-align: center; padding: 10px 4px; border-radius: 9px;
  font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none;
}
nav.tabs a.active { background: var(--green-700); color: #fff; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px; margin-bottom: 12px;
}
.card h2 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 10px; }

/* catalogue tiles */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 12px; text-align: center; cursor: pointer; user-select: none;
}
.tile:active { background: var(--green-100); }
.tile .name { font-weight: 700; font-size: 17px; }
.tile .price { font-size: 13px; color: var(--muted); margin-top: 4px; }
.tile.soldout { opacity: .45; position: relative; }
.tile.soldout::after {
  content: "HABIS"; position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 800; font-size: 18px; color: var(--danger); letter-spacing: .1em;
  transform: rotate(-12deg);
}

/* cart */
.cart-line {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 10px 2px; border-bottom: 1px dashed var(--line); font-size: 16px;
}
.cart-line:last-child { border-bottom: none; }
.cart-line .who { font-weight: 600; }
.cart-line .who small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.cart-line .amt { font-variant-numeric: tabular-nums; }
.cart-line button.del {
  border: none; background: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 0 4px;
}

.total-bar {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--green-700); color: #fff; border-radius: 14px;
  padding: 16px 18px; margin: 12px 0;
}
.total-bar .label { font-size: 13px; opacity: .85; }
.total-bar .amount { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.total-bar .exact { font-size: 11px; opacity: .7; margin-top: 2px; }

.pay-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.pay-btn {
  padding: 14px 4px; border-radius: 12px; border: 2px solid var(--line);
  background: var(--card); font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer;
}
.pay-btn.selected { border-color: var(--green-600); background: var(--green-100); color: var(--green-700); }
.pay-btn.disabled { opacity: .4; pointer-events: none; }

button.primary {
  width: 100%; padding: 18px; border: none; border-radius: 14px;
  background: var(--green-600); color: #fff; font-size: 19px; font-weight: 800; cursor: pointer;
}
button.primary:active { background: var(--green-700); }
button.primary:disabled { opacity: .4; }

/* docked app layout (kasir): scrollable region + anchored checkout dock.
   100vh first as a fallback for engines that mishandle dvh; dvh wins where supported.
   interactive-widget=resizes-content (in the page meta) keeps the keyboard from covering the dock. */
body.docked {
  height: 100vh; height: 100dvh;
  /* the generic body{min-height:100vh} is the large viewport (URL bar hidden) — with the
     URL bar visible it EXCEEDS 100dvh and would stretch the body past the visible screen,
     cutting the dock's bottom buttons. Kill it for the docked layout. */
  min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
/* width:100% is load-bearing — a flex item with auto cross-axis margins (margin:0 auto)
   does NOT stretch; without it the page shrink-to-fits to content width and misaligns with the dock.
   min-height:0 lets the region actually shrink so the dock is never pushed off-screen. */
body.docked .page { flex: 1; min-height: 0; width: 100%; max-width: 480px; margin: 0 auto; overflow-y: auto; padding-bottom: 16px; }
/* a classic scrollbar would consume width inside .page and misalign content with the dock */
body.docked .page { scrollbar-width: none; }
body.docked .page::-webkit-scrollbar { display: none; }
.checkout-dock {
  flex: none; width: 100%; max-width: 480px; margin: 0 auto;
  /* keep the latest-transaction bar clear of the Android gesture pill / iPhone home bar —
     viewport-fit=cover (page meta) makes env(safe-area-inset-bottom) real in installed PWAs */
  padding: 0 12px max(16px, calc(10px + env(safe-area-inset-bottom)));
  background: var(--bg); border-top: 1px solid var(--line);
}
.checkout-dock .total-bar { margin: 10px 0; }
@media (max-height: 720px) {
  .checkout-dock .total-bar { margin: 6px 0; padding: 10px 14px; }
  .checkout-dock .total-bar .amount { font-size: 30px; }
  .checkout-dock .pay-btn { padding: 10px 4px; font-size: 14px; }
  .checkout-dock button.primary { padding: 13px; font-size: 17px; }
}

/* QRIS display (customer scans the helper's phone) */
.qris-card {
  background: var(--card); border-radius: 16px; padding: 20px 18px;
  width: 100%; max-width: 400px; text-align: center;
}
.qris-card h3 { font-size: 16px; color: var(--muted); font-weight: 600; }
.qris-amount { font-size: 38px; font-weight: 800; color: var(--green-700); margin: 6px 0 12px; font-variant-numeric: tabular-nums; }
.qris-img { width: 78%; max-width: 300px; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 12px; }
.qris-card .note { margin: 10px 0 14px; }
.qris-card .primary { margin-top: 0; }

/* last transaction — lives in the rekap sheet under the money peek (moved off the
   checkout dock: vertical estate on the selling screen is too expensive for a preview) */
.sheet-latest { margin: 10px 0 4px; }
.sheet-latest .sl-empty { font-size: 13px; color: var(--muted); padding: 4px 2px; }
.sheet-latest .sl-row {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px;
}
.sheet-latest .sl-info { color: var(--ink); min-width: 0; font-size: 13px; cursor: pointer; }
.sheet-latest .sl-info b { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin-right: 6px; }
.sheet-latest .sl-info small {
  display: block; color: var(--muted); font-size: 11px; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sheet-latest .sl-row.voided .sl-info, .sheet-latest .sl-row.voided .sl-info small { text-decoration: line-through; color: var(--muted); }
.sheet-latest button.void {
  flex: none; border: 1px solid var(--line); background: none; border-radius: 8px;
  font-size: 12px; padding: 8px 12px; color: var(--danger); cursor: pointer;
}

/* recent sales — grouped summary + expandable per-melon detail */
.recent { margin-top: 14px; }
.recent-item {
  padding: 8px 2px; border-bottom: 1px dashed var(--line); font-size: 14px;
}
.recent-item .recent-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.recent-item .desc { color: var(--ink); cursor: pointer; }
.recent-item .desc small { color: var(--muted); display: block; }
.recent-item .right { text-align: right; font-variant-numeric: tabular-nums; }
.recent-item.voided .desc, .recent-item.voided .right .amt { text-decoration: line-through; color: var(--muted); }
.recent-item .void-tag { font-size: 11px; color: var(--danger); font-weight: 700; }
.recent-item button.void {
  border: 1px solid var(--line); background: none; border-radius: 8px;
  font-size: 12px; padding: 6px 10px; color: var(--danger); cursor: pointer;
}
/* per-melon detail, shown when a collapsed line is tapped */
.melon-list { font-size: 13px; color: var(--muted); padding: 4px 0 2px 6px; }
.melon-list .m-row { display: flex; justify-content: space-between; padding: 2px 0; font-variant-numeric: tabular-nums; }
.melon-list .m-row.total { font-weight: 700; color: var(--ink); border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 6px; }
.melon-list .m-row.m-note { color: var(--amber); font-size: 12px; padding-top: 3px; }
.melon-list .m-group small { color: var(--muted); font-weight: 400; }
/* overflow affordance under the fixed window */
.see-all {
  width: 100%; padding: 10px; border: none; background: none; cursor: pointer;
  color: var(--green-700); font-weight: 700; font-size: 13px;
}

/* day pill — the ONLY persistent non-selling element; operational info, never money */
.day-pill {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 18px; font-size: 14px; font-weight: 600; color: var(--muted);
  cursor: pointer; margin-bottom: 12px;
}
.day-pill .chev { color: var(--green-700); font-weight: 800; }

/* pill action chip — verb, button-styled (outlined): the pill is a control, not a caption */
.day-pill .pill-action {
  background: transparent; color: var(--green-700); border: 2px solid var(--green-700);
  border-radius: 999px; padding: 4px 13px; font-size: 13px; font-weight: 700; flex: none;
}
.day-pill:active .pill-action { background: var(--green-100); }

/* one-time first-run coach mark — in-flow tooltip pointing up at the pill */
.coach {
  position: relative; background: var(--green-700); color: #fff; border-radius: 12px;
  padding: 10px 14px; font-size: 13px; font-weight: 600; margin: -4px 0 12px;
}
.coach::before {
  content: "▲"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  color: var(--green-700); font-size: 14px; line-height: 1;
}

/* day sheet (bottom sheet from the pill) — base .sheet rule lives with .keypad-sheet */
.sheet .handle { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 6px auto 12px; }
.sheet h3 { font-size: 16px; margin-bottom: 10px; }
.sheet .peek {
  background: var(--green-100); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
}
.sheet .peek .n { font-size: 28px; font-weight: 800; color: var(--green-700); font-variant-numeric: tabular-nums; }
.sheet .peek .sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.sheet-item {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 14px 6px; border: none; background: none;
  font-size: 16px; font-weight: 600; color: var(--ink); cursor: pointer;
  border-bottom: 1px solid var(--line); text-align: left;
}
.sheet-item:last-child { border-bottom: none; }
.sheet-item:disabled { opacity: .4; cursor: default; }
.sheet-item .arrow { color: var(--muted); }
.sheet-item.close { color: var(--muted); justify-content: center; font-weight: 500; }

/* back link on admin pages */
a.back {
  display: inline-block; margin-bottom: 10px; font-size: 14px; font-weight: 600;
  color: var(--green-700); text-decoration: none;
}

/* keypad overlay */
.overlay {
  position: fixed; inset: 0; background: rgba(20, 32, 24, .55);
  display: none; align-items: flex-end; justify-content: center; z-index: 10;
}
.overlay.open { display: flex; }

/* deliberate-action dialog (void) — top-anchored so the on-screen keyboard never covers it */
.overlay.center { align-items: flex-start; padding: max(24px, 8dvh) 24px 24px; overflow-y: auto; }
.dialog {
  background: var(--card); border-radius: 16px; padding: 18px; width: 100%; max-width: 400px;
}
.dialog h3 { font-size: 18px; margin-bottom: 8px; }
.dialog .void-detail {
  background: var(--danger-100); border-radius: 10px; padding: 10px 12px;
  font-size: 15px; margin-bottom: 10px; line-height: 1.5;
}
.dialog input[type=text] {
  width: 100%; font-size: 18px; padding: 12px; border: 2px solid var(--line);
  border-radius: 10px; margin: 4px 0 12px; text-align: center;
}
.dialog input[type=text].ready { border-color: var(--danger); }
.reason-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.reason-chip {
  border: 1px solid var(--line); background: none; border-radius: 999px;
  font-size: 12px; padding: 6px 12px; color: var(--muted); cursor: pointer;
}
.reason-chip.selected { border-color: var(--danger); color: var(--danger); background: var(--danger-100); font-weight: 700; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dialog-actions button.danger-go {
  border: none; border-radius: 12px; padding: 14px; font-size: 16px; font-weight: 800;
  background: var(--danger); color: #fff; cursor: pointer;
}
.dialog-actions button.danger-go:disabled { opacity: .35; }
.dialog-actions button.danger-go.go-green { background: var(--green-700); } /* buka is an opening, not a destruction */

/* closed (tutup) state card — replaces the tiles while the day is closed */
.closed-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 16px; margin-bottom: 12px; text-align: center;
}
.closed-card .cc-icon { font-size: 34px; margin-bottom: 4px; }
.closed-card h2 { font-size: 18px; margin-bottom: 6px; }
.closed-card .primary { width: 100%; margin-top: 10px; }
.closed-card .cc-nudge { font-size: 12px; opacity: .75; margin-top: 10px; }

/* day navigation (history/summary) — prev/next across retained days; no flushing */
.day-nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 10px;
}
.day-nav b { font-size: 15px; }
.day-nav-btn {
  background: var(--card); border: 1px solid var(--green-700); color: var(--green-700);
  border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.day-nav-cur { font-size: 12px; opacity: .6; }

/* PENDING_BEGIN morning review — price check rows + sold-out carryover prompts */
.begin-card { text-align: left; }
.begin-card h2, .begin-card .cc-icon { text-align: center; }
.begin-card .primary { margin-top: 12px; }
.begin-price {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 14px;
}
.begin-price b { font-variant-numeric: tabular-nums; }
.carry-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 2px; font-size: 13px;
}
.carry-row .pay-btn { padding: 6px 10px; font-size: 12px; margin-left: 6px; }
.keypad-sheet {
  background: var(--card); width: 100%; max-width: 480px;
  border-radius: 20px 20px 0 0; padding: 16px 16px 24px;
  max-height: calc(100dvh - 16px); overflow-y: auto;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}
/* short viewports (iPhone XR-class and smaller): tighten so + Tambah is always visible */
@media (max-height: 720px) {
  .keypad-sheet { padding-top: 12px; }
  .keypad-display { font-size: 34px; margin: 4px 0 2px; }
  .keypad button { padding: 12px; font-size: 20px; }
  .keypad-actions button { padding: 11px; }
}
.sheet {
  background: var(--card); width: 100%; max-width: 480px;
  border-radius: 20px 20px 0 0; padding: 8px 16px 20px;
  max-height: calc(100dvh - 16px); overflow-y: auto;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}
.keypad-sheet .item-name { text-align: center; font-weight: 700; font-size: 17px; }
.keypad-display {
  text-align: center; font-size: 44px; font-weight: 800; margin: 8px 0 2px;
  font-variant-numeric: tabular-nums;
}
.keypad-amount { text-align: center; color: var(--muted); font-size: 15px; margin-bottom: 12px; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keypad button {
  padding: 16px; font-size: 22px; font-weight: 700; border: none; border-radius: 12px;
  background: var(--bg); color: var(--ink); cursor: pointer;
}
.keypad button:active { background: var(--green-100); }
.keypad button.action { background: var(--danger-100); color: var(--danger); font-size: 16px; }
.keypad-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }

/* summary tables */
table.sum { width: 100%; border-collapse: collapse; font-size: 15px; }
table.sum th, table.sum td { padding: 9px 6px; text-align: right; font-variant-numeric: tabular-nums; }
table.sum th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--line); }
table.sum td:first-child, table.sum th:first-child { text-align: left; }
table.sum tr.total-row td { font-weight: 800; border-top: 2px solid var(--line); }

.big-number { text-align: center; padding: 8px 0; }
.big-number .n { font-size: 38px; font-weight: 800; color: var(--green-700); font-variant-numeric: tabular-nums; }
.big-number .l { font-size: 13px; color: var(--muted); }

/* generic rows / settings */
.row { display: flex; justify-content: space-between; align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--line); gap: 12px; }
.row:last-child { border-bottom: none; }
.row .k { font-weight: 600; font-size: 15px; }
.row .k small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; margin-top: 2px; }
/* catalogue editor row (settings) — see the .row.cat-row overrides after the generic input rule */
.row select, .row input[type=text] {
  font-size: 15px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; min-width: 140px;
}
/* catalogue editor overrides — MUST follow the generic rule above: same specificity
   (0,2,1 vs 0,2,1) means order decides, and the generic min-width:140px was winning */
.row.cat-row > input[type="text"]:first-of-type { flex: 1 1 auto; min-width: 0; }
.row.cat-row input[type=text][inputmode="numeric"] { flex: 0 0 auto; width: 9ch; min-width: 0; }
button.danger {
  width: 100%; padding: 14px; border: none; border-radius: 12px;
  background: var(--danger-100); color: var(--danger); font-size: 15px; font-weight: 700; cursor: pointer;
}

/* launcher / flow map */
.flow-step { display: flex; gap: 12px; align-items: flex-start; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.flow-step:last-child { border-bottom: none; }
.flow-step .num {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--green-100); color: var(--green-700);
  display: grid; place-items: center; font-weight: 800; font-size: 14px;
}
.flow-step a { font-weight: 700; color: var(--green-700); text-decoration: none; font-size: 16px; }
.flow-step p { font-size: 13px; color: var(--muted); margin-top: 2px; }

.flash {
  position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%);
  background: var(--green-700); color: #fff; font-size: 22px; font-weight: 800;
  padding: 20px 36px; border-radius: 16px; display: none; z-index: 20;
}
.flash.show { display: block; animation: pop .18s ease-out; }
@keyframes pop { from { transform: translate(-50%,-50%) scale(.85); opacity: 0; } }

.note { font-size: 12px; color: var(--muted); padding: 4px 2px; }
pre.preview {
  background: #10241a; color: #d7f5e3; font-size: 11px; line-height: 1.5;
  border-radius: 10px; padding: 12px; overflow-x: auto; margin-top: 8px;
}