* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #fff; font: 12px Tahoma, "Segoe UI", Arial, sans-serif; color: #111; overflow: hidden; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
input, select, textarea { font: inherit; border: 1px solid #b9b9b9; background: #f0f0f0; height: 22px; padding: 1px 4px; min-width: 0; }
textarea { height: auto; resize: none; background: #fff; }
.yellow { background: #ffffe0 !important; }

:root { --z: 1; }
#app {
  display: grid; transform: scale(var(--z)); transform-origin: 0 0;
  width: calc(100vw / var(--z)); height: calc(100vh / var(--z));
  grid-template-columns: minmax(560px, 1fr) 345px;
  grid-template-rows: 96px 1fr 58px 22px;
  grid-template-areas: "hdr hdr" "menu bill" "ftr ftr" "st st";
}

/* ---------- header ---------- */
#hdr { grid-area: hdr; display: flex; gap: 6px; padding: 4px 4px 2px; border-bottom: 1px solid #ddd; }
.hdr-title { width: 240px; }
.hdr-title .title { color: #1aa79b; font-weight: bold; font-size: 17px; padding: 4px 2px; }
.vat-chk { color: #e10000; font-weight: bold; font-size: 13px; display: flex; align-items: center; gap: 4px; }
.btn-mst { width: 55px; height: 44px; background: #b0c4de; color: #fff; border: 1px solid #9ab; font-weight: bold; font-size: 13px; margin-top: 2px; }
.btn-order { width: 68px; height: 44px; margin-top: 2px; font-size: 13px; }
.hdr-info { display: grid; grid-template-columns: 46px 100px 50px 106px; gap: 3px 4px; align-items: center; margin-left: 2px; align-content: start; }
.hdr-info label, .hdr-cust label { color: #333; font-size: 11px; white-space: nowrap; overflow: hidden; }
.hdr-info input, .hdr-info select { width: 100%; }
.hdr-info .dt { display: flex; gap: 2px; }
.hdr-info .dt input:first-child { width: 64px; } .hdr-info .dt input:last-child { width: 38px; }
.hdr-cust { display: grid; grid-template-columns: 54px 108px 72px 1fr; gap: 3px 4px; align-items: center; flex: 1; max-width: 345px; margin-left: auto; align-content: start; }
.hdr-cust input, .hdr-cust select { width: 100%; }
.hdr-cust button { height: 22px; font-weight: bold; }
.btn-teal { background: #20b2aa; color: #fff; border: 1px solid #1a9a93; font-weight: bold; }
.btn-teal:hover { background: #1aa69e; }
.btn-white { background: #fff; border: 1px solid #aaa; }
.btn-red { background: #f01818; color: #fff; border: 1px solid #c00; font-weight: bold; }
.btn-gray { background: #efefef; border: 1px solid #b5b5b5; }
.btn-gray:hover:not(:disabled) { background: #e2e2e2; }
.posapp { background: #fff6e8 !important; font-style: italic; font-size: 15px; color: #999; height: 26px; }

/* ---------- menu ---------- */
#menu { grid-area: menu; display: flex; flex-direction: column; min-height: 0; padding: 0 4px; }
.menu-top { display: flex; align-items: center; gap: 8px; height: 30px; }
#fGroup { width: 152px; height: 24px; }
#lastItem { color: #0020c0; font-weight: bold; font-size: 13px; }
.menu-body { flex: 1; display: flex; gap: 6px; min-height: 0; }
#groups { width: 108px; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 40px; gap: 1px; align-content: start; overflow: auto; }
.grp { background: #20b2aa; color: #fff; border: 0; font-size: 10px; font-weight: bold; text-align: left; padding: 3px; line-height: 1.15; word-break: break-word; }
.grp.on { background: #f08080; }
.items-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.nav { display: flex; align-items: center; gap: 4px; height: 36px; }
.nav-btn { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #777; background: #fff; font-size: 18px; font-weight: bold; color: #444; }
.nav-up { width: 30px; height: 32px; border: 0; background: none; font-size: 26px; color: #aaa; }
.search { flex: 1; position: relative; }
.search input { width: 100%; height: 30px; font-size: 13px; }
.search span { position: absolute; right: 6px; top: 6px; color: #555; }
#items { flex: 1; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); grid-auto-rows: 50px; gap: 2px; align-content: start; padding-top: 2px; }
.itm { background: #deb887; border: 0; text-align: left; padding: 2px 3px; font-size: 10px; line-height: 1.15; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.itm:hover { filter: brightness(1.05); }
.itm.hit { background: #f08080; }
.itm .n { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.itm .p { color: #e00000; font-size: 10px; }
.itm.combo .n { font-weight: bold; }
.empty-note { color: #999; padding: 20px; grid-column: 1 / -1; }

/* ---------- bill ---------- */
#bill { grid-area: bill; display: flex; flex-direction: column; min-height: 0; padding-right: 4px; }
.flags { display: grid; grid-template-columns: 1.2fr 1fr; gap: 4px 6px; padding: 4px 0 6px; font-weight: bold; font-size: 12.5px; }
.flags label { display: flex; align-items: center; gap: 4px; color: #999; }
.flags label.auto { color: #333; }
.flags.manual label { color: #333; }
.line-btns { display: flex; justify-content: flex-end; gap: 2px; margin-bottom: 3px; }
.lb { width: 56px; height: 27px; background: #fff; border: 1px solid #bbb; font-size: 18px; font-weight: bold; }
.lb.blue { color: #1030d0; } .lb.red { color: #e00000; }
#gridWrap { flex: 1; min-height: 60px; overflow: auto; border: 1px solid #bbb; background: #fff; }
#grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
#grid th { position: sticky; top: 0; background: #f4f4f4; font-weight: normal; border: 1px solid #ddd; padding: 2px; font-size: 11px; height: 28px; }
#grid td { border-bottom: 1px solid #eee; padding: 3px 2px; height: 36px; vertical-align: middle; }
#grid .c-no { width: 12px; } #grid .c-idx { width: 18px; } #grid .c-qty { width: 34px; } #grid .c-money { width: 52px; } #grid .c-gift { width: 28px; }
#grid td.num { text-align: right; }
#grid td.name { font-weight: bold; font-size: 11px; line-height: 1.2; }
#grid tr.comp td.name { font-weight: normal; color: #555; padding-left: 12px; }
#grid tr.gift td.name { color: #b04000; }
#grid tr.sel td { background: #cfe6fb; }
#grid tr.sel td.c-no { background: #ffd24a; }
#grid td.c-no { background: #f7f7f7; border-right: 1px solid #ddd; }
#grid td.idx { color: #888; text-align: center; font-size: 10px; }
.tabs { height: 20px; border-top: 1px solid #bbb; }
.tab { display: inline-block; padding: 2px 6px; border: 1px solid #bbb; border-top: 0; background: #fff; font-size: 11px; }

#payPanel { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
#payPanel.hidden { display: none; }
.pay-title { color: #1aa79b; font-weight: bold; font-size: 11px; }
.pay-grid { display: grid; grid-template-columns: 162px 1fr; gap: 4px; height: 112px; }
.pay-left { display: flex; flex-direction: column; gap: 3px; }
.btn-gray.wide { height: 20px; font-size: 11px; }
.pay-row { display: flex; gap: 3px; } .pay-row select { flex: 1; height: 26px; background: #fff; }
.btn-gray.lbl { width: 54px; height: 26px; font-size: 11px; }
#denoms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
#denoms button { font-size: 10px; padding: 1px; height: 18px; background: #fff; border: 1px solid #ccc; }
.pay-list { border: 1px solid #bbb; border-collapse: collapse; width: 100%; font-size: 11px; display: block; overflow: auto; }
.pay-list thead, .pay-list tbody { display: table; width: 100%; table-layout: fixed; }
.pay-list th { background: #f4f4f4; font-weight: normal; border: 1px solid #ddd; height: 20px; }
.pay-list th:nth-child(2) { background: #ffd24a; }
.pay-list td { padding: 2px; border-bottom: 1px solid #eee; cursor: pointer; }
.pay-list td.num { text-align: right; }
.pay-list .c-no { width: 10px; }
.pay-amt { display: grid; grid-template-columns: 54px 110px 1fr; gap: 4px; align-items: center; }
.pay-amt input { height: 26px; background: #fff; font-size: 13px; text-align: right; }
.note-lbl { font-size: 11px; }
.pay-actions { display: grid; grid-template-columns: 162px 1fr; gap: 4px; }
.pay-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pay-btns button { height: 32px; font-size: 11px; }
#fNote { height: 56px; margin-top: -24px; }

/* ---------- footer ---------- */
#ftr { grid-area: ftr; display: flex; gap: 4px; align-items: center; padding: 3px 4px; border-top: 1px solid #ccc; }
.totals { flex: 1; border-collapse: collapse; table-layout: fixed; height: 46px; }
.totals th { background: #20b2aa; color: #fff; text-align: left; font-size: 10.5px; padding: 1px 3px; height: 16px; border-right: 1px solid #fff; }
.totals td { background: #f0f0f0; border: 1px solid #d5d5d5; text-align: right; font-weight: bold; font-size: 14px; padding: 2px 4px; }
.totals .c-sl { width: 42px; }
.totals td.yellow { background: #ffffe0; }
.totals td.neg { color: #d00; }
.btn-gray.big { width: 74px; height: 44px; font-size: 11px; color: #222; }
.btn-gray.big.flash { background: #ffe08a; border-color: #e6b800; }
#btnMain { width: 88px; height: 44px; font-size: 15px; }
#btnMain.calc { background: #f08080; border-color: #e06a6a; }

#status { grid-area: st; display: flex; justify-content: space-between; align-items: center; padding: 0 6px; background: #f3f3f3; border-top: 1px solid #ddd; font-size: 11px; }
#stLeft.ok { color: #0a0; } #stLeft.bad { color: #d00; }
.st-right { display: flex; gap: 12px; align-items: center; }
.st-right label { display: flex; gap: 3px; align-items: center; }
.test-badge { background: #7ee85e; padding: 1px 6px; font-weight: bold; }
.test-badge.live { background: #d00; color: #fff; }

/* ---------- modal / toast ---------- */
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal.hidden { display: none; }
.modal-box { transform: scale(var(--z)); background: #fff; min-width: 380px; max-width: calc(92vw / var(--z)); max-height: calc(90vh / var(--z)); display: flex; flex-direction: column; border: 1px solid #888; box-shadow: 0 8px 30px rgba(0,0,0,.3); }
.modal-head { background: #20b2aa; color: #fff; font-weight: bold; padding: 6px 10px; display: flex; justify-content: space-between; font-size: 13px; }
.modal-head button { background: none; border: 0; color: #fff; font-size: 18px; line-height: 1; }
#modalBody { padding: 10px; overflow: auto; }
#modalFoot { padding: 8px 10px; display: flex; justify-content: flex-end; gap: 6px; border-top: 1px solid #eee; }
#modalFoot button { min-width: 90px; height: 32px; }
.mtable { border-collapse: collapse; width: 100%; font-size: 12px; }
.mtable th { background: #f4f4f4; font-weight: normal; border: 1px solid #ddd; padding: 3px; text-align: left; }
.mtable td { border-bottom: 1px solid #eee; padding: 4px 3px; }
.mtable td.num, .mtable th.num { text-align: right; }
.mtable tr.pick { cursor: pointer; } .mtable tr.pick:hover td { background: #eef7ff; }
.mtable tr.on td { background: #d9f5e5; }
.form { display: grid; grid-template-columns: 120px 1fr; gap: 6px 8px; align-items: center; }
.form input, .form select { height: 28px; background: #fff; }
.combo-info { margin-bottom: 8px; font-weight: bold; }
.combo-info .bad { color: #d00; } .combo-info .good { color: #080; }
.big-ok { font-size: 20px; color: #0a7; font-weight: bold; margin-bottom: 6px; }
.big-change { font-size: 26px; font-weight: bold; color: #d00; }
#toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 8px 16px; border-radius: 4px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 60; max-width: 80vw; }
#toast.show { opacity: .95; } #toast.err { background: #c62828; }
.busy { cursor: progress !important; }

.print-frame { position: absolute; width: 0; height: 0; border: 0; left: -9999px; }