/* Hospomate — iPad landscape, touch-first. Register is dark, Back Office is light. */
:root {
  --brand: #4FD1C5;
  --brand-ink: #ffffff;
  --brand-soft: rgba(79, 209, 197, 0.16);
  --ok: #2fbf7f;
  --danger: #e5534b;
  --warn: #e6a23c;

  --bg: #121418;
  --panel: #1a1d23;
  --panel-2: #22262e;
  --tile: #2a2f38;
  --tile-hi: #343a45;
  --line: #2f343d;
  --ink: #f1f3f6;
  --ink-2: #a9b0bc;
  --ink-3: #737b88;

  --radius: 14px;
  --tap: 56px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: var(--bg); color: var(--ink); -webkit-user-select: none; user-select: none; overscroll-behavior: none; }
input, textarea, select { -webkit-user-select: text; user-select: text; font: inherit; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
#app { height: 100%; }

.btn { min-height: 48px; padding: 0 18px; border-radius: 12px; background: var(--tile); color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .06s, background .15s; }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--brand); color: var(--brand-ink); }
.btn.ok { background: var(--ok); color: #06210f; }
.btn.danger { background: transparent; color: var(--danger); border: 1px solid rgba(229,83,75,.5); }
.btn.ghost { background: transparent; border: 1px solid var(--line); }
.btn.lg { min-height: 64px; font-size: 20px; }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn.block { width: 100%; }
.pill { padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--tile); color: var(--ink-2); }
.pill.brand { background: var(--brand-soft); color: var(--brand); }
.muted { color: var(--ink-2); }
.tiny { font-size: 12px; color: var(--ink-3); }

/* ---------- Register layout ---------- */
.register { display: grid; grid-template-columns: 148px 1fr 380px; grid-template-rows: 64px 1fr; height: 100%; }
.topbar { grid-column: 1 / 3; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -.02em; min-width: 132px; }
.brand-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; font-weight: 900; }
.search { flex: 1; max-width: 420px; position: relative; }
.search input { width: 100%; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); padding: 0 14px 0 40px; }
.search svg { position: absolute; left: 13px; top: 13px; opacity: .6; }
.topbar .spacer { flex: 1; }
.icon-btn { min-width: 48px; height: 44px; border-radius: 12px; background: var(--panel-2); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; font-weight: 600; position: relative; }
.badge { position: absolute; top: -5px; right: -5px; background: var(--brand); color: var(--brand-ink); font-size: 12px; font-weight: 800; min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 5px; }

.cats { grid-row: 2; background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; padding: 10px 8px; display: flex; flex-direction: column; gap: 6px; }
.cat { min-height: 60px; border-radius: 12px; text-align: left; padding: 10px 12px; font-weight: 700; font-size: 15px; color: var(--ink-2); border-left: 4px solid transparent; background: transparent; }
.cat.active { background: var(--brand); color: var(--brand-ink); border-left-color: var(--c, var(--brand)); }

.grid-wrap { grid-row: 2; overflow-y: auto; padding: 14px; }
.grid-title { display: flex; align-items: baseline; gap: 10px; margin: 2px 4px 12px; }
.grid-title h2 { margin: 0; font-size: 20px; }
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.product { position: relative; height: 112px; border-radius: var(--radius); background: var(--tile); padding: 12px; text-align: left; display: flex; flex-direction: column; justify-content: space-between; border-top: 5px solid var(--c, var(--brand)); transition: transform .06s, background .15s; }
.product:active { transform: scale(.96); background: var(--tile-hi); }
.product .name { font-weight: 700; font-size: 15px; line-height: 1.2; }
.product .price { color: var(--ink-2); font-weight: 600; font-size: 14px; }
.product .has-mods { position: absolute; right: 10px; bottom: 12px; font-size: 11px; color: var(--ink-3); }
.empty { color: var(--ink-3); text-align: center; padding: 60px 20px; }

/* ---------- Order panel ---------- */
.order { grid-column: 3; grid-row: 1 / 3; background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.order-head { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.order-head .row { display: flex; gap: 8px; align-items: center; }
.seg { display: flex; background: var(--panel-2); border-radius: 12px; padding: 4px; flex: 1; }
.seg button { flex: 1; height: 40px; border-radius: 9px; font-weight: 700; color: var(--ink-2); }
.seg button.on { background: var(--brand); color: var(--brand-ink); }
.chip-btn { height: 40px; border-radius: 10px; background: var(--panel-2); padding: 0 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.chip-btn.set { background: var(--brand-soft); color: var(--brand); }
.lines { flex: 1; overflow-y: auto; padding: 6px 0; }
.line { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; padding: 10px 14px; align-items: start; width: 100%; text-align: left; }
.line:active, .line.sel { background: var(--panel-2); }
.line .qty { font-weight: 800; color: var(--brand); }
.line .nm { font-weight: 600; }
.line .mods { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.line .note { font-size: 13px; color: var(--warn); margin-top: 2px; font-style: italic; }
.line .amt { font-weight: 600; }
.order-note { margin: 0 14px 8px; padding: 8px 10px; border-radius: 10px; background: rgba(230,162,60,.12); color: var(--warn); font-size: 13px; }
.totals { padding: 10px 14px; border-top: 1px solid var(--line); }
.totals .r { display: flex; justify-content: space-between; color: var(--ink-2); font-size: 14px; padding: 2px 0; }
.totals .r.big { color: var(--ink); font-size: 24px; font-weight: 800; padding-top: 6px; }
.order-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 0 14px 10px; }
.pay-bar { padding: 0 14px 14px; }

/* ---------- Modals ---------- */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: grid; place-items: center; z-index: 50; animation: fade .15s; }
@keyframes fade { from { opacity: 0 } }
.modal { width: min(720px, 92vw); max-height: 88vh; background: var(--panel); border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); animation: pop .18s; }
.modal.wide { width: min(980px, 95vw); }
@keyframes pop { from { transform: translateY(16px) scale(.98); opacity: 0 } }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 20px; flex: 1; }
.modal-body { padding: 16px 20px; overflow-y: auto; }
.modal-foot { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); align-items: center; }
.modal-foot .grow { flex: 1; }
.set-block { margin-bottom: 18px; }
.set-block h4 { margin: 0 0 8px; display: flex; gap: 8px; align-items: center; font-size: 15px; }
.set-block.err h4 { color: var(--danger); }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.opt { min-height: 56px; border-radius: 12px; background: var(--tile); padding: 8px 12px; text-align: left; border: 2px solid transparent; }
.opt.on { border-color: var(--brand); background: var(--brand-soft); }
.opt .p { font-size: 13px; color: var(--ink-2); }
.stepper { display: inline-flex; align-items: center; gap: 4px; background: var(--panel-2); border-radius: 12px; padding: 4px; }
.stepper button { width: 48px; height: 44px; border-radius: 9px; background: var(--tile); font-size: 22px; font-weight: 700; }
.stepper span { min-width: 44px; text-align: center; font-weight: 800; font-size: 20px; }
textarea.note, input.field { width: 100%; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); padding: 12px; font-size: 16px; }
textarea.note { min-height: 80px; resize: none; }
.quick-notes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Tables */
.areas { display: flex; gap: 8px; margin-bottom: 14px; }
.floor { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.table { aspect-ratio: 1.15; border-radius: 16px; background: var(--tile); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 2px solid transparent; }
.table .tn { font-size: 26px; font-weight: 800; }
.table.busy { background: rgba(79,209,197,.12); border-color: rgba(79,209,197,.5); }
.table.current { border-color: var(--ok); }
.table .tiny { color: var(--ink-2); }

/* Parked */
.parked-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.parked { background: var(--tile); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.parked .top { display: flex; justify-content: space-between; font-weight: 700; }
.parked .items { font-size: 13px; color: var(--ink-2); min-height: 36px; }
.parked .acts { display: flex; gap: 8px; margin-top: auto; }   /* Open and Void always at the bottom of the card */

/* ---------- Checkout ---------- */
.checkout { display: grid; grid-template-columns: 380px 1fr; height: 100%; }
.co-left { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.co-left .head { padding: 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.co-right { overflow-y: auto; padding: 20px 28px; display: flex; flex-direction: column; gap: 20px; }
.due { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.due .lbl { color: var(--ink-2); font-weight: 600; }
.due .amt { font-size: 52px; font-weight: 800; letter-spacing: -.02em; }
.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 700; margin: 0 0 10px; }
.cash-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cash-row .btn { min-height: 64px; font-size: 20px; }
.pay-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pay-type { min-height: 72px; border-radius: 14px; font-weight: 700; font-size: 17px; background: var(--tile); border-bottom: 4px solid var(--c); }
.amount-entry { display: grid; grid-template-columns: 1fr 260px; gap: 20px; align-items: start; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keypad button { height: 56px; border-radius: 12px; background: var(--tile); font-size: 22px; font-weight: 700; }
.amount-display { height: 64px; border-radius: 14px; background: var(--panel-2); display: flex; align-items: center; justify-content: flex-end; padding: 0 18px; font-size: 30px; font-weight: 800; margin-bottom: 8px; border: 2px solid var(--brand-soft); }
.payments { display: flex; flex-direction: column; gap: 6px; }
.payment-row { display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); }
.split-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.split-tabs .btn.on { background: var(--brand); color: var(--brand-ink); }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.check { border-radius: 14px; background: var(--tile); padding: 12px; border: 2px solid transparent; text-align: left; display: flex; flex-direction: column; gap: 4px; min-height: 92px; }
.check.on { border-color: var(--brand); }
.check.paid { opacity: .55; border-color: var(--ok); }
.check .amt { font-size: 22px; font-weight: 800; }
.assign-line { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.assign-line .seats { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.seat { width: 44px; height: 44px; border-radius: 10px; background: var(--tile); font-weight: 800; }
.seat.on { background: var(--brand); color: var(--brand-ink); }

.done { height: 100%; display: grid; place-items: center; text-align: center; }
.done .tick { width: 96px; height: 96px; border-radius: 50%; background: var(--ok); color: #06210f; display: grid; place-items: center; font-size: 52px; margin: 0 auto 16px; }
.receipt { background: #fbfaf7; color: #222; width: 340px; margin: 18px auto; padding: 18px; border-radius: 6px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; text-align: left; max-height: 46vh; overflow-y: auto; }
.receipt .r { display: flex; justify-content: space-between; gap: 10px; }
.receipt hr { border: 0; border-top: 1px dashed #aaa; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #f1f3f6; color: #111; padding: 12px 18px; border-radius: 12px; font-weight: 600; z-index: 80; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.rotate-hint { display: none; }
@media (orientation: portrait) and (max-width: 1100px) {
  .rotate-hint { display: grid; place-items: center; position: fixed; inset: 0; z-index: 100; background: var(--bg); color: var(--ink); font-size: 20px; padding: 40px; text-align: center; }
}

/* ---------- Back Office (light) ---------- */
.bo { --b-bg: #F2F5F7; --b-panel: #fff; --b-line: #e4e2dc; --b-ink: #1d1f23; --b-ink-2: #5d636e; --b-accent: #4FD1C5; --b-accent-ink: #ffffff;
  display: grid; grid-template-columns: 240px 1fr; height: 100%; background: var(--b-bg); color: var(--b-ink); }
.bo-side { padding: 16px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.bo-side .brand { padding: 4px 10px 16px; color: var(--b-ink); }
.bo-side .grp { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--b-ink-2); padding: 14px 12px 6px; font-weight: 700; }
.bo-nav { min-height: 44px; border-radius: 10px; padding: 0 12px; text-align: left; font-weight: 600; color: var(--b-ink); display: flex; align-items: center; }
.bo-nav.on { background: var(--b-accent); color: var(--b-accent-ink); }
.bo-side .grow { flex: 1; }
.bo-main { background: var(--b-panel); margin: 10px 10px 10px 0; border-radius: 16px; border: 1px solid var(--b-line); display: flex; flex-direction: column; min-height: 0; }
.bo-head { padding: 18px 28px; border-bottom: 1px solid var(--b-line); display: flex; align-items: center; gap: 12px; }
.bo-head h1 { margin: 0; font-size: 28px; font-weight: 600; flex: 1; letter-spacing: -.01em; }
.bo-body { padding: 22px 28px; overflow-y: auto; }
.bo .btn { background: #efede8; color: var(--b-ink); min-height: 44px; }
.bo .btn.primary { background: var(--b-accent); color: var(--b-accent-ink); }
.bo .btn.danger { background: transparent; }
.bo-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--b-line); margin: -6px 0 18px; }
.bo-tabs button { padding: 10px 0; font-weight: 600; color: var(--b-ink-2); border-bottom: 2px solid transparent; }
.bo-tabs button.on { color: var(--b-accent-ink); background: var(--b-accent); border-color: var(--b-accent); border-radius: 8px 8px 0 0; padding-inline: 14px; }
.bo table { width: 100%; border-collapse: collapse; }
.bo th { text-align: left; font-size: 13px; color: var(--b-ink-2); font-weight: 700; padding: 10px; border-bottom: 1px solid var(--b-line); }
.bo td { padding: 8px 10px; border-bottom: 1px solid var(--b-line); vertical-align: middle; }
.bo td input, .bo td select, .bo .bo-field { height: 42px; border: 1px solid var(--b-line); border-radius: 8px; padding: 0 10px; background: #fff; color: var(--b-ink); width: 100%; }
.bo td input.num { text-align: right; max-width: 110px; }
.bo .swatch { width: 26px; height: 26px; border-radius: 7px; display: inline-block; vertical-align: middle; }
.bo .toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.bo .toolbar .grow { flex: 1; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; }
.card { border: 1px solid var(--b-line); border-radius: 14px; padding: 16px; }
.card .k { color: var(--b-ink-2); font-size: 13px; font-weight: 600; }
.card .v { font-size: 28px; font-weight: 700; margin-top: 6px; }
.bars { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 160px 1fr 80px; gap: 10px; align-items: center; font-size: 14px; }
.bar { height: 14px; border-radius: 7px; background: var(--b-accent); }
.os-card { border: 1px solid var(--b-line); border-radius: 12px; margin-bottom: 12px; }
.os-card summary { padding: 14px 16px; font-weight: 600; cursor: pointer; list-style: none; display: flex; gap: 10px; align-items: center; }
.os-card .inner { padding: 0 16px 16px; }
.bo .tag { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: #efede8; color: var(--b-ink-2); font-weight: 600; }
.bo .notice { background: #e8f8f6; border: 1px solid #b9ebe5; color: #1f6b64; padding: 12px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
.bo .two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.bo h3 { margin: 0 0 12px; font-size: 17px; }

/* Fit 1180–1366px landscape iPads */
.search { min-width: 200px; }
.icon-btn, .chip-btn { white-space: nowrap; }
.order-head .row { flex-wrap: wrap; }
.chip-btn { padding: 0 10px; }
@media (max-width: 1240px) {
  .register { grid-template-columns: 128px 1fr 352px; }
  .brand { min-width: 0; }
  .topbar { gap: 8px; }
}

/* Order type selector */
.type-btn { height: 48px; border-radius: 12px; background: var(--panel-2); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-weight: 700; font-size: 17px; width: 100%; }
.type-btn .chev { color: var(--ink-2); font-size: 14px; }
.type-list { display: flex; flex-direction: column; gap: 10px; }
.type-opt { min-height: 64px; border-radius: 14px; background: var(--tile); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; font-size: 19px; font-weight: 700; border: 2px solid transparent; }
.type-opt.on { border-color: var(--brand); background: var(--brand-soft); }

/* Customer picker and form */
.cust-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.cust-row { display: flex; gap: 8px; align-items: stretch; }
.cust-row.on .cust-pick { border-color: var(--brand); background: var(--brand-soft); }
.cust-pick { flex: 1; min-height: 56px; border-radius: 12px; border: 1px solid var(--line); padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.cust-name { font-weight: 700; }
.cust-edit { min-width: 76px; }
.cust-form { display: flex; flex-direction: column; gap: 14px; }
.f { display: flex; flex-direction: column; gap: 6px; position: relative; }
.f > span:first-child { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.addr-list { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; }
.addr-list:empty { display: none; }
.addr-opt { text-align: left; padding: 12px 14px; min-height: 48px; background: var(--tile); border-bottom: 1px solid var(--line); }
.addr-opt:active { background: var(--tile-hi); }
.f .req { font-style: normal; color: var(--warn); font-weight: 600; margin-left: 6px; }
.chip-btn.warn { background: rgba(229,83,75,.14); color: var(--danger); }

/* Floor plans: tables are placed by centre (left/top %) with size from tableStyle() */
.plan { position: relative; aspect-ratio: 1.6; width: min(100%, calc(56vh * 1.6)); margin: 0 auto; border-radius: 16px; background: var(--panel-2); }
.plan .table { position: absolute; transform: translate(-50%, -50%); padding: 4px; gap: 2px; overflow: hidden; text-align: center; }
.plan .table .tn { font-size: 20px; line-height: 1; }
.plan .table .tiny { font-size: 11px; white-space: nowrap; }
.table.shape-round, .fp-t.shape-round { border-radius: 50%; }
.table.shape-square, .table.shape-rect { border-radius: 12px; }

/* Back Office: area heading with Floor plan button, and the editor */
.area-head { display: flex; align-items: center; gap: 14px; margin: 8px 0 12px; }
.area-head h3 { margin: 0; }
.fp { display: grid; grid-template-columns: 1fr 270px; gap: 20px; align-items: start; }
.fp-plan { position: relative; aspect-ratio: 1.6; border-radius: 14px; border: 1px solid var(--b-line); background-color: #f7f5f0;
  background-image: radial-gradient(#d6d1c6 1.2px, transparent 1.2px); background-size: 4% 6.4%; touch-action: none; overflow: hidden; }
.fp-t { position: absolute; transform: translate(-50%, -50%); background: #fff; border: 2px solid #cfc9bd; border-radius: 10px; color: var(--b-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: grab; box-shadow: 0 2px 6px rgba(0,0,0,.08); touch-action: none; }
.fp-t b { font-size: 18px; line-height: 1; }
.fp-t span { font-size: 11px; color: var(--b-ink-2); white-space: nowrap; }
.fp-t.sel { border-color: var(--b-accent); box-shadow: 0 0 0 4px rgba(79,209,197,.3); z-index: 1; }
.fp-t.dragging { cursor: grabbing; z-index: 2; box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.fp-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--b-ink-2); }
.fp-side { border: 1px solid var(--b-line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.fp-side h3 { margin: 0; }
.fp-hint { margin: 0; color: var(--b-ink-2); font-size: 14px; line-height: 1.5; }
.fp-f { display: flex; flex-direction: column; gap: 6px; }
.fp-f > span { font-weight: 600; font-size: 14px; }
.fp-step { display: flex; align-items: center; gap: 10px; }
.fp-step .btn { width: 48px; font-size: 20px; }
.fp-step b { min-width: 32px; text-align: center; font-size: 18px; }
.fp-shapes { display: flex; flex-direction: column; gap: 6px; }
.fp-sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fp-sizes .fp-shape { justify-content: center; padding: 0 6px; }
.fp-shape { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--b-line); font-weight: 600; color: var(--b-ink); }
.fp-shape.on { border-color: var(--b-accent); background: #e8f8f6; }
.fp-ico { width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 4px; }
.fp-ico.shape-round { border-radius: 50%; }
.fp-ico.shape-rect { width: 28px; height: 16px; }
@media (max-width: 1240px) { .fp { grid-template-columns: 1fr 230px; } }

/* Structural elements (walls, counters, doors…) on floor plans */
.st { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; overflow: visible; }
.st-label { font-size: 11px; font-weight: 700; white-space: nowrap; pointer-events: none; }
.st-wall { background: var(--st); border-radius: 2px; }
.st-counter { background: var(--st); border-radius: 6px; color: var(--st-ink); }
.st-door { background: repeating-linear-gradient(90deg, var(--st) 0 6px, transparent 6px 10px); border-radius: 2px; }
.st-window { background: var(--st); border: 1px solid color-mix(in srgb, var(--st) 70%, #000); border-radius: 1px; }
.st-pillar { background: var(--st); border-radius: 3px; }
.st-plant { background: radial-gradient(circle, var(--st) 45%, color-mix(in srgb, var(--st) 70%, #000) 100%); border-radius: 50%; }
.st-zone { border: 2px dashed var(--st); border-radius: 10px; background: color-mix(in srgb, var(--st) 12%, transparent); color: var(--ink-2); align-items: flex-start; justify-content: flex-start; padding: 4px 8px; }
.st-door .st-label, .st-window .st-label, .st-wall .st-label { position: absolute; top: 100%; margin-top: 2px; color: var(--ink-2); }
.plan .st { pointer-events: none; }
.plan .table { z-index: 1; }

/* Editor */
.fp-plan .st { cursor: grab; touch-action: none; }
.fp-plan .st-zone { color: var(--b-ink-2); }
.fp-plan .st-door .st-label, .fp-plan .st-window .st-label, .fp-plan .st-wall .st-label { color: var(--b-ink-2); }
.fp-plan .st.sel { outline: 2px solid var(--b-accent); outline-offset: 3px; z-index: 3; }
.fp-plan .st.dragging { cursor: grabbing; z-index: 4; }
.fp-t { z-index: 1; }
.fp-handle { position: absolute; right: -10px; bottom: -10px; width: 28px; height: 28px; border-radius: 50%; background: var(--b-accent); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: nwse-resize; touch-action: none; }
.fp-palette { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fp-pal { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border: 1px solid var(--b-line); border-radius: 10px; font-weight: 600; font-size: 13px; color: var(--b-ink); text-align: left; }
.fp-pal:active { background: #e8f8f6; }
.fp-sw { width: 18px; height: 12px; flex: none; position: static; transform: none; }
.fp-sw.st-wall { height: 4px; } .fp-sw.st-door, .fp-sw.st-window { height: 5px; } .fp-sw.st-pillar, .fp-sw.st-plant { width: 12px; }
.fp-row { display: flex; gap: 8px; } .fp-row .btn { flex: 1; }
.fp-opt { font-style: normal; font-weight: 500; color: var(--b-ink-2); font-size: 12px; }
.fp-saved { color: var(--b-ink-2); font-size: 13px; margin-right: 4px; }

/* Chairs: one mark per seat around each table (positions from chairLayout()) */
.chair { position: absolute; transform: translate(-50%, -50%); border-radius: 3px; pointer-events: none; font-style: normal; }
.plan .table { overflow: visible; }
.plan .table .chair { background: var(--tile-hi); }
.plan .table.busy .chair { background: rgba(79,209,197,.55); }
.plan .table.current .chair { background: var(--ok); }
.fp-t .chair { background: #d8d2c6; }
.fp-t.sel .chair { background: var(--b-accent); }

/* Chair sides picker: a mini table with a tappable bar on each side */
.fp-sides { position: relative; width: 132px; height: 104px; margin: 2px auto 0; }
.fp-side-table { position: absolute; left: 34px; top: 30px; width: 64px; height: 44px; border-radius: 8px; border: 2px solid #cfc9bd; background: #fff; }
.fp-sides:not(.rect) .fp-side-table { left: 44px; width: 44px; }
.fp-side-btn { position: absolute; border-radius: 6px; background: #ece8e0; border: 1px dashed #cfc9bd; }
.fp-side-btn.on { background: var(--b-accent); border: 1px solid var(--b-accent); }
.fp-side-btn.top, .fp-side-btn.bottom { left: 34px; width: 64px; height: 22px; }
.fp-sides:not(.rect) .fp-side-btn.top, .fp-sides:not(.rect) .fp-side-btn.bottom { left: 44px; width: 44px; }
.fp-side-btn.top { top: 2px; } .fp-side-btn.bottom { bottom: 2px; }
.fp-side-btn.left, .fp-side-btn.right { top: 30px; height: 44px; width: 26px; }
.fp-side-btn.left { left: 4px; } .fp-side-btn.right { right: 4px; }
.fp-sides:not(.rect) .fp-side-btn.left { left: 14px; } .fp-sides:not(.rect) .fp-side-btn.right { right: 14px; }

/* Structure colour swatches */
.fp-colors { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.fp-color { aspect-ratio: 1; border-radius: 8px; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); min-height: 28px; }
.fp-color.on { border-color: var(--b-ink); box-shadow: inset 0 0 0 2px #fff; }
.fp-color.custom { position: relative; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--b-ink-2); background: conic-gradient(#d1574b, #e0a84f, #5fb36b, #4FD1C5, #3b6fd8, #8a6bd1, #d1574b); overflow: hidden; }
.fp-color.custom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.fp-color-reset { min-height: 36px !important; font-size: 13px; }
/* Extra-small tables: smaller number */
.fp-t.size-xs b, .plan .table.size-xs .tn { font-size: 13px; }
.plan .table.size-xs .tiny { display: none; }

/* Multi-selection */
.fp-multi { display: flex; align-items: center; gap: 8px; }
.fp-multi h3 { flex: 1; }
.fp-multi .btn { min-height: 36px; }
.fp-side-btn.mixed { background: repeating-linear-gradient(45deg, var(--b-accent) 0 5px, #ece8e0 5px 10px); border: 1px solid var(--b-accent); }
.bo .btn.fp-pick.on { background: #e8f8f6; color: #1f6b64; box-shadow: inset 0 0 0 2px var(--b-accent); }
.fp-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fp-row2 .fp-step { gap: 4px; }
.fp-row2 .fp-step .btn { width: 40px; padding: 0; }
.fp-row2 .fp-step b { min-width: 0; flex: 1; font-size: 16px; }

/* Table picker: Show Map / Show List toggle at the top left */
.modal-head .grow { flex: 1; }
.view-toggle { min-height: 40px; padding: 0 14px; background: var(--brand-soft); color: var(--brand); }

/* Checkout: no keypad when splitting evenly or by item */
.amount-entry.no-keypad { grid-template-columns: 1fr; }

/* Split by item: pick items, pay their total, repeat */
.pick-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.pick-head .grow { flex: 1; }
.pick-head .btn { min-height: 40px; }
.pick-list { display: flex; flex-direction: column; gap: 6px; }
.pick { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; min-height: 56px; padding: 8px 14px; border-radius: 12px; background: var(--tile); border: 2px solid transparent; text-align: left; }
.pick .tick { width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.pick.on { border-color: var(--brand); background: var(--brand-soft); }
.pick.on .tick { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.pick.paid { opacity: .5; }
.pick.paid .tick { border-color: var(--ok); color: var(--ok); }
.pick-name { display: flex; flex-direction: column; gap: 2px; }
.pick-extra { color: var(--warn, #e0a84f); }
.pick-amt { font-weight: 700; }
.paid-groups { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.paid-group { border-radius: 12px; background: var(--panel-2); padding: 12px 14px; }
.pg-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.pg-line { display: flex; justify-content: space-between; color: var(--ink-2); padding: 3px 0; }

/* Sale complete: receipt options */
.done-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Receipts list (register) */
.rc-list { display: flex; flex-direction: column; gap: 8px; }
.rc-row { display: grid; grid-template-columns: minmax(130px, 1.2fr) 110px 110px 60px 100px minmax(130px, 1.3fr) 100px; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 12px; background: var(--tile); text-align: left; min-height: 64px; }
.rc-row:active { background: var(--tile-hi); }
.rc-main, .rc-meta { display: flex; flex-direction: column; gap: 2px; }
.rc-main strong { font-size: 17px; }
.rc-pays { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.rc-pay { display: flex; justify-content: space-between; gap: 10px; color: var(--ink-2); }
.rc-total { font-size: 20px; font-weight: 800; text-align: right; }
.rc-detail .receipt { margin: 0 auto; }

/* Checkout tip choice (per payment) */
.tip-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tip-row .section-title { margin-right: 6px !important; }
.btn.tip { min-height: 44px; padding: 0 14px; }
.btn.tip .tiny { color: inherit; opacity: .75; }
.btn.tip.on { background: var(--brand); color: var(--brand-ink); }

/* Receipts: day navigation and filters */
.day-nav { min-width: 44px; font-size: 22px; padding: 0 10px; }
.rc-day { flex: none !important; }
.rc-filter { position: relative; min-width: 48px; }
.rc-filter.on { border-color: var(--brand); color: var(--brand); }
.rc-filter .badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--brand); color: var(--brand-ink); font-size: 12px; font-weight: 800; display: grid; place-items: center; padding: 0 5px; }
.rc-filters { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-end; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.rc-fg { display: flex; flex-direction: column; gap: 6px; }
.rc-clear { min-height: 38px; margin-left: auto; }

.rc-select { min-width: 180px; height: 44px; padding: 0 12px; font-size: 15px; }
.overlay.no-anim, .overlay.no-anim .modal { animation: none; }
select.field { border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 600; -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }

/* Team office */
.bo-side .btn + .btn { margin-top: 8px; }
.team-empty { padding: 48px 20px; text-align: center; color: var(--b-ink-2); }
.team-empty h3 { color: var(--b-ink); }
.mate-list { display: flex; flex-direction: column; border: 1px solid var(--b-line); border-radius: 14px; overflow: hidden; }
.mate-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 160px 110px 60px; gap: 14px; align-items: center; padding: 12px 16px; text-align: left; color: var(--b-ink); border-bottom: 1px solid var(--b-line); min-height: 68px; }
.mate-row:last-child { border-bottom: 0; }
.mate-row:hover { background: #faf9f6; }
.mate-row.off { color: var(--b-ink-2); }
.mate-avatar { width: 44px; height: 44px; border-radius: 50%; background: #e8f8f6; color: #1f6b64; display: grid; place-items: center; font-weight: 800; }
.mate-row.off .mate-avatar { background: #efede8; color: var(--b-ink-2); }
.mate-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mate-main span { color: var(--b-ink-2); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mate-col { font-variant-numeric: tabular-nums; color: var(--b-ink-2); }
.bo .tag.ok { background: #d5f4f0; color: #1f6b64; justify-self: start; }
.mate-edit { color: var(--b-ink-2); font-weight: 600; text-align: right; }

/* Team office: Apps */
.app-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 180px)); gap: 28px; padding: 8px 0; }
.app-tile { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--b-ink); }
.app-icon { width: 100%; aspect-ratio: 1; max-width: 180px; border-radius: 28px; background: var(--app-bg); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(29,31,35,.12); transition: transform .08s; }
.app-icon svg { width: 52%; height: 52%; }
.app-tile:active .app-icon { transform: scale(.96); }
.app-tile:focus-visible .app-icon { outline: 3px solid var(--b-ink); outline-offset: 3px; }
.app-name { font-weight: 800; font-size: 17px; letter-spacing: .02em; }
@media (max-width: 900px) { .app-grid { grid-template-columns: repeat(2, minmax(0, 180px)); } }

/* Super admin (admin.html) */
.admin-login { min-height: 100%; display: grid; place-items: center; background: #f6f5f2; padding: 24px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); }
.admin-card { width: min(400px, 100%); background: #fff; border: 1px solid #e4e2dc; border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 14px; color: #1d1f23; box-shadow: 0 10px 30px rgba(29,31,35,.06); }
.admin-card .brand { color: #1d1f23; padding: 0; }
.admin-card h1 { margin: 6px 0 4px; font-size: 24px; }
.admin-card .bo-field { height: 46px; border: 1px solid #e4e2dc; border-radius: 10px; padding: 0 12px; width: 100%; font-size: 16px; background: #fff; color: #1d1f23; }
.admin-card .btn.primary { background: #4FD1C5; color: #fff; min-height: 48px; }
.af { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.admin-error { color: #c0392b; min-height: 18px; margin: 0; font-size: 14px; }
.admin-who { padding: 10px 12px; color: var(--b-ink-2); line-height: 1.5; word-break: break-all; }
.rest-head, .rest-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1.4fr) 120px 110px; gap: 14px; align-items: center; padding: 12px 16px; }
.rest-head { font-size: 13px; font-weight: 700; color: var(--b-ink-2); padding-block: 0 8px; }
.rest-row { border-bottom: 1px solid var(--b-line); min-height: 64px; color: var(--b-ink); }
.rest-row:last-child { border-bottom: 0; }
.rest-row.off { color: var(--b-ink-2); }
.rest-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rest-main span { color: var(--b-ink-2); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rest-main .rest-owner { color: inherit; font-size: 15px; }
.rest-col { color: var(--b-ink-2); font-variant-numeric: tabular-nums; min-width: 0; }
.admin-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.admin-kpis .v { font-variant-numeric: tabular-nums; }
.admin-kpis .sub { margin-top: 4px; font-weight: 500; }
.admin-note { margin: 14px 0 0; color: var(--b-ink-2); }
@media (max-width: 760px) { .admin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Super admin: companies, restaurants, logos ---------- */
.rest-row.co-row, .rest-head.co-row { grid-template-columns: minmax(0, 1.6fr) 140px minmax(0, 1.4fr) 120px 110px 20px; }
.rest-row.loc-row, .rest-head.loc-row { grid-template-columns: 44px minmax(0, 1.6fr) minmax(0, 1.4fr) 120px 110px 56px; }
button.rest-row { width: 100%; text-align: left; font: inherit; }
button.rest-row:hover { background: #faf9f6; }
.rest-col small { color: var(--b-ink-2); font-size: 13px; }
.rest-logo { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: #f1efea; border: 1px solid var(--b-line); }
.rest-logo.none { display: grid; place-items: center; font-weight: 700; color: var(--b-ink-2); }
.bo .btn.co-back { min-height: 40px; padding: 0 12px; color: var(--b-ink-2); background: transparent; border: 0; }
.co-card { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 20px; padding: 16px 18px; border: 1px solid var(--b-line); border-radius: 14px; background: #faf9f6; margin-bottom: 18px; }
.co-card div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.co-card span { font-size: 12px; font-weight: 700; color: var(--b-ink-2); text-transform: uppercase; letter-spacing: .05em; }
.co-card strong { font-weight: 600; overflow-wrap: anywhere; }
.co-card a { color: #1f8f85; }
@media (max-width: 900px) { .co-card { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.f .fopt, .addr-fields .fopt { font-style: normal; font-weight: 500; color: var(--ink-3); margin-left: 8px; }
.logo-row { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.logo-slot { display: flex; flex-direction: column; gap: 10px; }
.logo-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.logo-btns .btn { min-height: 40px; padding: 0 14px; }
.checker, .logo-prev, .ie-canvas { background-color: #fff; background-image: linear-gradient(45deg, #e8e8e8 25%, transparent 25%), linear-gradient(-45deg, #e8e8e8 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e8e8e8 75%), linear-gradient(-45deg, transparent 75%, #e8e8e8 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.logo-prev { width: 96px; height: 96px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--line); }
.logo-prev.wide { width: 288px; max-width: 100%; height: 96px; }
.logo-prev img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo-prev span { color: #737b88; font-size: 13px; font-weight: 600; }
@media (max-width: 640px) { .logo-row { grid-template-columns: 1fr; } }

/* Image editor (own layer above an open pop-up) */
.ie-layer { z-index: 60; }
.modal.ie { width: min(760px, 94vw); }
.ie-stage { display: grid; place-items: center; padding: 18px; background: var(--bg); border-radius: 14px; }
.ie-canvas { max-width: 100%; max-height: 48vh; width: auto; height: auto; border-radius: 6px; outline: 2px solid var(--brand); touch-action: none; cursor: grab; }
.ie-canvas:active { cursor: grabbing; }
.ie-hint { color: var(--ink-3); margin: 10px 0 12px; text-align: center; }
.ie-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ie-zoom { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink-2); font-size: 13px; }
.ie-range { flex: 1; accent-color: var(--brand); height: 32px; }
.ie-bgs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.ie-bgs > span { margin-right: 4px; }
.ie-bg { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.ie-bg.on { border-color: var(--brand); background: var(--brand-soft); }
.ie-bg i { width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(255,255,255,.3); }
.ie-bg i.none { background: linear-gradient(135deg, transparent 45%, var(--danger) 45%, var(--danger) 55%, transparent 55%), #fff; }
.rest-row.user-row, .rest-head.user-row { grid-template-columns: 44px minmax(0, 1.4fr) 100px minmax(0, 1.4fr) 110px 56px; }
.role-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: #efede8; color: var(--b-ink-2); }
.role-tag.owner { background: #e8f8f6; color: #1f6b64; }
.role-tag.manager { background: #f1ecfa; color: #5b4396; }
.venue-picks { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.venue-pick { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-bottom: 1px solid var(--line); font-weight: 600; }
.venue-pick:last-child { border-bottom: 0; }
.venue-pick.all { background: var(--panel-2); }
.venue-pick input { width: 20px; height: 20px; accent-color: var(--brand); }
.venue-pick small { color: var(--ink-3); font-weight: 500; }
.venue-pick:has(input:disabled) { color: var(--ink-2); }
.seg-tabs { display: inline-flex; gap: 4px; padding: 4px; background: #F2F5F7; border-radius: 12px; margin-bottom: 16px; }
.seg-tabs button { min-height: 40px; padding: 0 20px; border-radius: 9px; font-weight: 700; color: var(--b-ink-2); }
.seg-tabs button.on { background: var(--brand); color: var(--brand-ink); box-shadow: 0 1px 3px rgba(29,31,35,.12); }

/* Super admin: user page (light form on the Back Office panel) */
.user-form { max-width: 720px; }
.user-co { margin: 0; color: var(--b-ink-2); font-weight: 600; }
.user-form .f > span:first-child { color: var(--b-ink-2); }
.user-form .f .fopt, .user-form .addr-fields .fopt { color: #8b919b; }
.user-form input.field, .user-form select.field { height: 48px; padding: 0 12px; border: 1px solid var(--b-line); border-radius: 10px; background: #fff; color: var(--b-ink); font-size: 16px; font-weight: 500; }
.user-form select.field { background-image: linear-gradient(45deg, transparent 50%, var(--b-ink-2) 50%), linear-gradient(-45deg, transparent 50%, var(--b-ink-2) 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.user-form .venue-picks { border-color: var(--b-line); }
.user-form .venue-pick { border-color: var(--b-line); color: var(--b-ink); }
.user-form .venue-pick.all { background: #faf9f6; }
.user-form .venue-pick small { color: var(--b-ink-2); }
.user-form .venue-pick:has(input:disabled) { color: var(--b-ink-2); }
.user-form #af-error { color: #c0392b; min-height: 18px; margin: 0; font-size: 14px; }
.bo-head .tag { margin-right: 4px; }

/* Split address block (Address, Unit, State, Postcode) */
.addr-fields { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.addr-fields legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.addr-grid { display: grid; grid-template-columns: 120px minmax(0, 1fr) 120px 110px; gap: 10px; }
.addr-line { grid-column: 2 / -1; }
.addr-suburb { grid-column: 1 / 3; }
.addr-grid .f > span:first-child { font-weight: 600; font-size: 12px; }
@media (max-width: 640px) { .addr-grid { grid-template-columns: 1fr 1fr; } .addr-unit { grid-column: 1 / 2; } .addr-line, .addr-suburb { grid-column: 1 / -1; } }
.bo .addr-fields legend, .user-form .addr-fields legend { color: var(--b-ink-2); }
.pin-row { display: flex; align-items: center; gap: 10px; }
.user-form input.field.pin { width: 130px; font-size: 22px; font-weight: 800; letter-spacing: .3em; font-variant-numeric: tabular-nums; text-align: center; padding: 0 8px; }
.pin-note { margin: 0; color: var(--b-ink-2); font-size: 14px; line-height: 1.4; }
.addr-grid select.field { padding: 12px 30px 12px 12px; font-size: 16px; font-weight: 500; height: 100%; min-height: 46px; }

/* Page title with breadcrumbs above it */
.head-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.head-title h1 { flex: none; }
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--b-ink-2); }
.crumbs button { padding: 2px 0; font-weight: 600; color: var(--b-ink-2); }
.crumbs button:hover { color: var(--b-ink); text-decoration: underline; }
.user-form input.field.pin.bad { border-color: #d64545; box-shadow: 0 0 0 1px #d64545; }
.pin-msg { margin: 6px 0 0; min-height: 18px; color: #d64545; font-size: 14px; font-weight: 600; }
.pin-msg:empty { display: none; }
.seg-tabs button:disabled { opacity: .45; cursor: not-allowed; }
.co-joined { margin: 0; color: var(--b-ink-2); }

/* Devices: linking codes (Back Office) */
.lc-intro { margin: 0 0 16px; color: var(--b-ink-2); max-width: 760px; line-height: 1.5; }
.lc-new { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; padding: 16px; border: 1px solid var(--b-line); border-radius: 14px; background: #faf9f6; margin-bottom: 16px; }
.lc-label { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 220px; max-width: 420px; font-size: 13px; font-weight: 700; color: var(--b-ink-2); }
.lc-head, .lc-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 170px 150px 190px; gap: 14px; align-items: center; padding: 12px 16px; }
.lc-head { font-size: 13px; font-weight: 700; color: var(--b-ink-2); padding-block: 0 8px; }
.lc-row { border-bottom: 1px solid var(--b-line); min-height: 64px; color: var(--b-ink); }
.lc-row:last-child { border-bottom: 0; }
.lc-row.revoked { color: var(--b-ink-2); }
.lc-code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 17px; font-weight: 700; letter-spacing: .06em; }
.lc-row.revoked .lc-code { text-decoration: line-through; }
.lc-dev { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-status { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.lc-sub { font-size: 13px; color: var(--b-ink-2); }
.lc-acts { display: flex; gap: 8px; justify-content: flex-end; }
.lc-acts .btn { min-height: 38px; padding: 0 14px; }
.bo .tag.warn { background: #fdf3e1; color: #8a5a00; }

/* POSMate: Link this iPad */
.link-screen { min-height: 100%; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.link-card { width: min(460px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.link-card h1 { margin: 8px 0 0; font-size: 28px; }
.link-card p { margin: 0; color: var(--ink-2); line-height: 1.5; }
.link-label { font-size: 13px; font-weight: 700; color: var(--ink-2); margin-top: 8px; }
.link-input { height: 64px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); text-align: center;
  font: 700 28px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }
.link-input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.link-input.bad { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.link-error { min-height: 20px; color: var(--danger) !important; font-weight: 600; font-size: 14px; }
.link-bo { color: var(--ink-2); }
.link-note { color: var(--ink-3) !important; text-align: center; }

/* Devices: configurations (Back Office) */
.cfg-head, .cfg-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.3fr) 80px 56px; gap: 14px; align-items: center; padding: 12px 16px; }
.cfg-head { font-size: 13px; font-weight: 700; color: var(--b-ink-2); padding-block: 0 8px; }
.cfg-row { width: 100%; text-align: left; border-bottom: 1px solid var(--b-line); min-height: 60px; color: var(--b-ink); }
.cfg-row:last-child { border-bottom: 0; }
.cfg-row:hover { background: #faf9f6; }
.cfg-row .lc-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-opt { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; border-bottom: 1px solid var(--b-line); font-weight: 600; color: var(--b-ink); cursor: pointer; }
.cfg-opt:last-child { border-bottom: 0; }
.cfg-opt input { width: 20px; height: 20px; accent-color: var(--brand); flex: none; }
.cfg-opt span { display: flex; flex-direction: column; gap: 2px; }
.cfg-opt small { font-weight: 500; color: var(--b-ink-2); font-size: 13px; }
.cfg-dot { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.cfg-saved { color: var(--b-ink-2); margin: 14px 0 0; }
.cfg-later { margin: 0; padding: 10px 14px; border-radius: 10px; background: #fdf3e1; color: #8a5a00; font-weight: 600; font-size: 14px; }
.cfg-devs { margin: 0; color: var(--b-ink); }
.user-form input.field.bad { border-color: #d64545; box-shadow: 0 0 0 1px #d64545; }
.lc-dev { display: flex; flex-direction: column; gap: 6px; white-space: normal; }
.bo .bo-field.lc-cfg { height: 34px; max-width: 220px; font-size: 14px; }
.lc-head, .lc-row { grid-template-columns: 160px minmax(0, 1fr) 150px 150px 190px; }

/* POSMate: PIN sign-in */
.pin-card { align-items: center; text-align: center; width: min(400px, 100%); }
.pin-card .brand { align-self: center; }
.pin-dots { display: flex; gap: 18px; justify-content: center; margin: 14px 0 4px; }
.pin-dots i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink-3); transition: background .1s, border-color .1s; }
.pin-dots i.on { background: var(--brand); border-color: var(--brand); }
.pin-dots.shake { animation: pin-shake .35s; }
@keyframes pin-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.pin-err { text-align: center; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 80px); gap: 14px; justify-content: center; margin-top: 4px; }
.pin-pad button { height: 80px; border-radius: 50%; background: var(--tile); font-size: 28px; font-weight: 600; color: var(--ink); }
.pin-pad button:active { background: var(--brand); color: var(--brand-ink); }
.pin-pad button[data-k="clear"], .pin-pad button[data-k="del"] { background: transparent; font-size: 18px; color: var(--ink-2); }
/* Register: Log out at the bottom of the category column */
.cats-logout { flex: none; min-height: 52px; border-radius: 12px; padding: 0 12px; text-align: left; font-weight: 700; font-size: 15px; color: var(--ink-2); border: 1px solid var(--line); }
.cats-logout:active { background: var(--tile); color: var(--ink); }

/* Register: Tables / Orders / Receipts fill the main area (no pop-ups) */
.icon-btn.on { background: var(--brand); color: var(--brand-ink); }
.icon-btn.on .badge { background: var(--brand-ink); color: #1f6b64; }
.view-head { display: flex; align-items: center; gap: 10px; margin: 2px 4px 14px; flex-wrap: wrap; }
.view-head h2 { margin: 0; font-size: 20px; }
.view-head .grow { flex: 1; }
.cat-back { min-height: 48px; color: var(--ink); background: var(--panel-2); }
.rc-detail-page { max-width: 460px; margin: 0 auto; }
.cfg-inline { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; flex-wrap: wrap; }
.user-form input.field.cfg-mins { width: 84px; height: 40px; text-align: center; font-weight: 700; }
.cfg-help { color: var(--b-ink-2); font-size: 13px; font-weight: 500; }
.cfg-sub { display: flex; align-items: center; gap: 12px; padding: 10px 14px 14px 46px; border-bottom: 1px solid var(--b-line); font-weight: 600; font-size: 14px; color: var(--b-ink-2); flex-wrap: wrap; }
.cfg-sub:last-child { border-bottom: 0; }
.user-form .cfg-sub select.field { width: auto; min-width: 200px; height: 42px; }

/* Checkboxes and radio buttons, app-wide: teal when on, with a white tick / white centre (no dark ring). */
input[type="checkbox"], input[type="radio"] {
  -webkit-appearance: none; appearance: none; margin: 0; flex: none; cursor: pointer;
  width: 20px; height: 20px; border: 2px solid #9aa0a8; border-radius: 6px; background: transparent;
  display: inline-grid; place-content: center; vertical-align: middle; transition: background .12s, border-color .12s;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked {
  background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
  border-color: var(--brand);
}
input[type="radio"]:checked { background: var(--brand); border-color: var(--brand); box-shadow: inset 0 0 0 4px var(--brand), inset 0 0 0 10px #fff; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .5; cursor: not-allowed; }
/* Checkout: the selected payment type (preselected from the iPad's configuration) */
.pay-type.on { background: var(--brand); color: var(--brand-ink); border-bottom-color: var(--c); box-shadow: 0 0 0 2px var(--brand); }
.pay-go { margin-top: 12px; }
.lc-sets { display: flex; gap: 8px; flex-wrap: wrap; }
/* Covers pop-up: 1–10, then a custom number with Set */
.covers-pad button.on { background: var(--brand); color: var(--brand-ink); }
.covers-custom { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.covers-custom label { font-weight: 700; color: var(--ink-2); font-size: 14px; }
.covers-custom input.field { height: 52px; font-size: 20px; font-weight: 700; text-align: center; }
.covers-custom .btn { min-height: 52px; min-width: 96px; }
.covers-err { color: var(--danger) !important; min-height: 16px; margin: 8px 0 0; }
.covers-pad button[data-v="10"] { grid-column: 2; }
/* Left rail bottom: Back Office, then Log out */
.cats-bo { margin-top: auto; flex: none; min-height: 52px; border-radius: 12px; padding: 0 12px; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--ink); background: var(--panel-2); }
.cats-bo svg { flex: none; opacity: .8; }
.cats-bo:active { background: var(--tile); }
.cats-bo, .cats-logout { white-space: nowrap; }

/* Register: categories (and areas) in one column; product tiles 10% smaller */
.cat-grid { display: flex; flex-direction: column; gap: 6px; }
.products { grid-template-columns: repeat(auto-fill, minmax(119px, 1fr)); gap: 9px; }
.product { height: 101px; padding: 11px; }
.product .name { font-size: 14px; }
.product .price { font-size: 13px; }
/* "Tap again to confirm" buttons (no pop-ups in the offices) */
.btn.armed, .bo .btn.armed { background: var(--danger); color: #fff; border-color: var(--danger); }

/* User permissions: sub-tabs and yes/no rows */
.sub-tabs { display: flex; gap: 6px; border-bottom: 2px solid var(--b-accent); margin: 0 0 16px; }
.sub-tabs button { padding: 9px 18px; font-weight: 700; color: var(--b-ink-2); border-radius: 8px 8px 0 0; }
.sub-tabs button.on { background: var(--brand); color: var(--brand-ink); }
.perm-row { display: flex; align-items: center; gap: 16px; padding: 14px 16px; }
.perm-text { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.perm-text small { color: var(--b-ink-2); font-size: 13px; }
.yes-no { display: inline-flex; padding: 4px; gap: 4px; border-radius: 10px; background: #efede8; flex: none; }
.yes-no button { min-width: 64px; min-height: 38px; border-radius: 8px; font-weight: 700; color: var(--b-ink-2); }
.yes-no button.on { background: var(--brand); color: var(--brand-ink); }
/* POSMate: settings icon for users with edit access from the POS */
.grid-wrap { position: relative; }
.pos-settings { position: absolute; top: 10px; right: 14px; z-index: 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--panel-2); color: var(--ink); }
.pos-settings:active { background: var(--brand); color: var(--brand-ink); }
.grid-wrap.has-settings .grid-title, .grid-wrap.has-settings .view-head { padding-right: 56px; }

/* POSMate: menu edit mode */
.pos-settings.on { background: var(--brand); color: var(--brand-ink); }
.edit-banner { margin: 2px 60px 12px 4px; padding: 8px 12px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); font-weight: 600; font-size: 13px; }
.cat-add { min-height: 48px; border: 2px dashed var(--brand); color: var(--brand); background: transparent; text-align: center; margin-bottom: 4px; }
.grid-title { flex-wrap: wrap; align-items: center; }
.folder-back { min-height: 36px; padding: 0 10px; font-size: 14px; color: var(--ink-2); }
.add-wrap { position: relative; }
.add-btn { min-height: 36px; padding: 0 14px; font-size: 14px; }
.add-list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 5; display: flex; flex-direction: column; min-width: 160px; padding: 6px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.add-list button { text-align: left; padding: 12px 14px; border-radius: 8px; font-weight: 700; }
.add-list button:hover, .add-list button:active { background: var(--brand); color: var(--brand-ink); }
.products.folders { margin-bottom: 10px; }
.folder-tile { background: var(--panel-2); border-top-width: 5px; }
.folder-tile .name { display: flex; align-items: center; gap: 6px; }
.products.editing .product { outline: 2px dashed rgba(79,209,197,.55); outline-offset: -2px; }
.fo-colors { display: flex; gap: 10px; flex-wrap: wrap; }
.fo-color { width: 38px; height: 38px; border-radius: 10px; border: 3px solid transparent; }
.fo-color.on { border-color: #fff; box-shadow: 0 0 0 2px var(--brand); }
.venue-picks .perm-row + .perm-row { border-top: 1px solid var(--b-line); }
/* Log out always sits at the very bottom of the left column (with Back Office just above it, when shown). */
.cats-logout { margin-top: auto; }
.cats-bo + .cats-logout { margin-top: 0; }
/* Register title row: bigger folder name, and the tiles start below the settings icon */
.grid-title { min-height: 48px; margin: 4px 4px 16px; align-items: center; }
.grid-title h2 { font-size: 24px; }
.grid-wrap.has-settings .grid-title { padding-right: 60px; }
.pos-settings { top: 14px; }
/* Folder tiles: the folder icon sits before the item count */
.folder-count { display: inline-flex; align-items: center; gap: 6px; }
/* Menu edit mode: drag and drop sorting */
[data-sort] [data-sort-id] { touch-action: none; cursor: grab; }
[data-sort] .dragging { position: relative; z-index: 20; opacity: .9; cursor: grabbing; box-shadow: 0 16px 34px rgba(0,0,0,.5); transition: none; }
[data-sort] .drop-target { outline: 3px solid var(--brand) !important; outline-offset: 2px; }
.cat-grid.editing .cat { border: 1px dashed rgba(79,209,197,.45); }
/* Left folders while dragging: inside (outline + label) or between (a line above / below) */
[data-sort="rail"] .drop-into { outline: 3px solid var(--brand) !important; outline-offset: -3px; background: var(--brand-soft) !important; position: relative; }
[data-sort="rail"] .drop-into::after { content: 'Move inside'; position: absolute; right: 8px; bottom: 6px; font-size: 11px; font-weight: 700; color: var(--brand); }
[data-sort="rail"] .drop-before, [data-sort="rail"] .drop-after { position: relative; }
[data-sort="rail"] .drop-before::before, [data-sort="rail"] .drop-after::before { content: ''; position: absolute; left: 4px; right: 4px; height: 4px; border-radius: 2px; background: var(--brand); box-shadow: 0 0 0 2px rgba(79,209,197,.25); }
[data-sort="rail"] .drop-before::before { top: -6px; }
[data-sort="rail"] .drop-after::before { bottom: -6px; }
/* Dragging: a copy follows the finger above everything; the original stays faded in place */
.drag-ghost { position: fixed; z-index: 100; margin: 0; pointer-events: none; opacity: .95; box-shadow: 0 18px 40px rgba(0,0,0,.55); transition: none !important; }
[data-sort] .dragging { opacity: .35; box-shadow: none; transform: none !important; }

/* Folder looks: border colour (default) or full background, and a chosen font colour */
.cat { position: relative; }
.cat.has-ink:not(.active), .folder-tile.has-ink .name { color: var(--ink-f); }
.cat.look-fill { background: var(--fill); color: var(--ink-f); border-left-color: var(--fill); }
.cat.look-fill.active { background: var(--fill); color: var(--ink-f); box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px var(--brand); }
.folder-tile.look-fill { background: var(--fill); color: var(--ink-f); }
.folder-tile.look-fill .name, .folder-tile.look-fill .price { color: var(--ink-f); }
.folder-tile.look-fill .price { opacity: .85; }
/* Pencil on each folder in edit mode */
.cat-edit { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(0,0,0,.4); color: #fff; }
.folder-tile .cat-edit { top: 8px; right: 8px; }
.cat-edit:active { background: var(--brand); }
/* Folder editor pop-up */
.fl-preview { display: flex; justify-content: center; padding: 14px; border-radius: 12px; background: var(--panel); }
.fl-preview .cat { width: 160px; display: flex; align-items: center; pointer-events: none; }
.fl-seg { flex: none; }
.fo-auto { min-height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); font-weight: 700; color: var(--ink-2); }
.fo-auto.on { border-color: var(--brand); color: var(--brand); }
.fo-custom { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.fo-custom input[type="color"] { width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: none; cursor: pointer; }
/* Category buttons on the left: the selected one keeps its own look (no colour change); the title shows which is open */
.cat-rail .cat.active { background: transparent; color: var(--ink-2); box-shadow: none; border-left-color: var(--c, var(--brand)); }
.cat-rail .cat.active:not(.look-fill) { color: var(--ink-2); }
.cat-rail .cat.has-ink.active { color: var(--ink-f); }
.cat-rail .cat.look-fill.active { background: var(--fill); color: var(--ink-f); box-shadow: none; }
/* "Border colour" folders always show their coloured edge, selected or not */
.cat-rail .cat:not(.look-fill) { border-left-color: var(--c, var(--brand)); }
/* Add item pop-up: Search products / New item */
.modal-tabs.seg { margin: 12px 20px 0; flex: none; }
.it-results { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
.it-result { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-radius: 12px; background: var(--tile); text-align: left; }
.it-result > span:first-child { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.it-result small { color: var(--ink-3); font-size: 12px; }
.it-price { color: var(--ink-2); font-weight: 600; }
.it-add { color: var(--brand); font-weight: 700; font-size: 14px; }
.it-result:active { background: var(--tile-hi); }
.it-empty { color: var(--ink-3); text-align: center; padding: 20px 0; margin: 0; }
.it-note { margin: 0; color: var(--ink-2); }
/* Product › Reporting */
.pr-h { margin: 22px 0 10px; font-size: 16px; }
.pr-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; height: 180px; align-items: end; padding: 14px; border: 1px solid var(--b-line); border-radius: 14px; max-width: 720px; }
.pr-bar { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.pr-bar i { width: 100%; max-width: 44px; min-height: 2px; border-radius: 6px 6px 2px 2px; background: var(--b-accent); }
.pr-n { font-size: 13px; font-weight: 700; color: var(--b-ink); min-height: 16px; }
.pr-d { font-size: 12px; color: var(--b-ink-2); font-weight: 600; }
.seg-tabs { flex-wrap: wrap; max-width: 100%; }

/* Search fields: teal focus ring and a teal clear (×) button instead of the browser's default colours */
:root { accent-color: var(--brand); }
input, textarea, select { accent-color: var(--brand); }
.search input:focus, input[type="search"]:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-left: 6px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%234FD1C5'/%3E%3Cpath d='M8 8l8 8M16 8l-8 8' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Register top bar: the restaurant's name next to the logo (cut with … when it's long) */
.topbar .brand { min-width: 0; max-width: 260px; flex: none; }
.topbar .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
.bo-venue { display: flex; flex-direction: column; gap: 6px; padding: 8px 4px 2px; font-size: 12px; font-weight: 700; color: var(--b-ink-2); text-transform: uppercase; letter-spacing: .06em; }
.bo-venue select { text-transform: none; letter-spacing: 0; font-weight: 600; }
/* Back Office: location switcher under the app name */
.bo-side .bo-venue { padding: 0 4px 12px; text-transform: none; letter-spacing: 0; }
.bo-side .bo-venue select { height: 44px; font-weight: 700; font-size: 15px; }
.bo-venue-one { padding: 0 12px 14px; font-weight: 700; color: var(--b-ink-2); font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Back Office sidebar: collapsible groups */
.bo-side .grp-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; cursor: pointer; border-radius: 8px; }
.bo-side .grp-toggle:hover { color: var(--b-ink); }
.grp-chev { transition: transform .15s; flex: none; }
.grp-toggle.open .grp-chev { transform: rotate(90deg); }
.grp-items { display: flex; flex-direction: column; gap: 2px; }

/* Office header: user icon with a floating menu (hover or tap) */
.user-menu { position: relative; margin-left: 6px; flex: none; }
.user-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #efede8; color: var(--b-ink); }
.user-initials { font-weight: 800; font-size: 15px; }
.user-menu:hover .user-btn, .user-menu.open .user-btn { background: var(--b-accent); color: var(--b-accent-ink); }
.user-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 230px; padding: 8px; border-radius: 14px; background: #fff; border: 1px solid var(--b-line); box-shadow: 0 16px 40px rgba(29,31,35,.16); display: none; flex-direction: column; gap: 2px; }
.user-pop::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }   /* keeps hover alive between icon and menu */
.user-menu:hover .user-pop, .user-menu.open .user-pop { display: flex; }
.user-who { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; border-bottom: 1px solid var(--b-line); margin-bottom: 4px; }
.user-who span { font-size: 13px; color: var(--b-ink-2); }
.user-pop button { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 10px; border-radius: 8px; text-align: left; font-weight: 600; color: var(--b-ink); }
.user-pop button:hover { background: #f1efea; }
.user-pop .user-logout { color: #c0392b; }
.lc-head, .lc-row { grid-template-columns: 160px minmax(0, 1fr) 150px 150px 300px; }
.lc-acts .btn.primary { white-space: nowrap; }
/* Tables open on another POS: red, can't be opened here */
.table.locked { background: rgba(229,83,75,.16); border-color: var(--danger); }
.plan .table.locked .chair { background: rgba(229,83,75,.7); }
.table.locked .tiny { color: #ff8f88; }
.in-use { display: grid; gap: 10px; }
.in-use div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--tile); }
.in-use span { color: var(--ink-2); font-weight: 600; }
.unlock-note { margin: 14px 0 0; line-height: 1.45; }
.unlock-note.busy { color: var(--warn) !important; }
.unlock-note.free { color: var(--ink-2) !important; }
.modal-foot .btn[disabled] { opacity: .4; pointer-events: none; }
/* Order panel: course tabs (Go Now / Hold On) */
.course-tabs { display: flex; gap: 4px; padding: 4px; margin: 10px 14px 0; border-radius: 12px; background: var(--panel-2); }
.course-tabs button { flex: 1; min-height: 40px; border-radius: 9px; font-weight: 700; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.course-tabs button.on { background: var(--brand); color: var(--brand-ink); }
.course-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: rgba(255,255,255,.18); font-size: 12px; display: inline-grid; place-items: center; }
.course-tabs button:not(.on) .course-n { background: var(--tile); color: var(--ink); }
/* Open orders with a course on hold: an amber "on hold" note and dot */
.held-tag { color: var(--warn); font-weight: 700; }
.table.held { position: relative; }
.table.held::after { content: ''; position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 2px var(--bg); }
.plan .table.held::after { top: 2px; right: 2px; }
/* Course Away is yellow while a course is still waiting to be called away */
.order-actions .btn.course-waiting { background: var(--warn); border-color: var(--warn); color: #ffffff; }
.order-actions .btn { white-space: nowrap; padding: 0 8px; }
/* Hold On tab: pause icon while waiting, tick once called away; ticks on items already away */
.course-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.course-ic.held { background: var(--warn); color: #fff; }
.course-ic.away { background: var(--ok); color: #fff; }
.line-away { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ok); color: #fff; vertical-align: -3px; margin-left: 4px; }
.line-away svg { width: 12px; height: 12px; }
/* Order activity: info button next to the table, and the list in its pop-up */
.chip-btn.info-btn { width: 40px; padding: 0; justify-content: center; color: var(--ink-2); }
.order-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.order-log li { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.order-log li:last-child { border-bottom: 0; }
.ol-time { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 14px; padding-top: 1px; }
.ol-what { display: flex; flex-direction: column; gap: 2px; font-weight: 600; }
.ol-what small { color: var(--ink-3); font-weight: 500; font-size: 13px; }
.cfg-head.ot-row, .cfg-row.ot-row { grid-template-columns: minmax(0, 1.4fr) 140px 160px 120px 56px; }
.cfg-row.off { color: var(--b-ink-2); }

/* Order panel header: info icon beside the order number, order menu (burger) on the right */
.order-title { gap: 6px; align-items: center; flex-wrap: nowrap; }
.order-title .icon-btn { min-width: 34px; height: 34px; padding: 0; border-radius: 10px; color: var(--ink-2); }
.order-title .icon-btn:hover { color: var(--ink); }

/* Orders view: timers on each open order */
.order-timers { display: grid; gap: 4px; margin: 6px 0 10px; }
.otm-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); }
.otm-row strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.otm-row.held, .otm-row.held strong { color: #f0b429; }
.otm-row.away strong { color: var(--brand); }

/* PIN screen: BackOffice login under the keypad card */
.link-screen:has(.pin-bo-login) { grid-template-rows: auto auto; align-content: center; gap: 18px; }
.pin-bo-login { justify-self: center; min-width: 220px; min-height: 48px; color: var(--ink-2); border: 1px solid var(--line); }
.admin-card .btn.ghost { background: #fff; color: #1d1f23; border: 1px solid #e4e2dc; min-height: 48px; }
.admin-card .bo-field:focus { outline: none; border-color: #4FD1C5; box-shadow: 0 0 0 3px rgba(79,209,197,.25); }

/* Order menu (☰): Printing Center, Transfer Table, Discounts */
.order-menu { position: relative; }
.order-menu.open .order-menu-btn { background: var(--brand); color: var(--brand-ink); }
.order-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 220px; padding: 6px; border-radius: 14px;
  background: var(--panel-2); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 2px; }
.order-pop button { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px; border-radius: 10px; font-weight: 600; text-align: left; color: var(--ink); }
.order-pop button svg { color: var(--ink-2); flex: none; }
.order-pop button:hover { background: rgba(79,209,197,.14); }

/* Transfer Table: banner above the floor plan while picking the new table */
.transfer-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 10px 12px 10px 16px; border-radius: 14px;
  background: rgba(79,209,197,.14); border: 1px solid rgba(79,209,197,.45); color: var(--ink); font-size: 15px; }
.transfer-bar span { flex: 1; }
.transfer-bar strong { color: var(--brand); }

/* Order lines already sent with the saved order: grey; new, unsent items stay bright */
.line.sent .nm, .line.sent .amt { color: var(--ink-2); font-weight: 500; }
.line.sent .qty { color: color-mix(in srgb, var(--brand) 55%, var(--ink-2)); }
.line.sent .mods { color: color-mix(in srgb, var(--ink-2) 75%, transparent); }

/* Orders view: the order open on this POS, and orders open (locked) on another POS */
.parked.here { box-shadow: inset 0 0 0 2px var(--brand); }
.parked.locked { box-shadow: inset 0 0 0 2px var(--danger, #e5534b); }
.open-tag { font-size: 13px; font-weight: 700; }
.open-tag.here { color: var(--brand); }
.open-tag.locked { color: var(--danger, #e5534b); }
.order-pop button:disabled { opacity: .38; cursor: default; }
.order-pop button:disabled:hover { background: none; }

/* Payments › Discounts list */
.cfg-head.disc-row, .cfg-row.disc-row { grid-template-columns: minmax(0, 1.4fr) 160px 120px 56px; }

/* POS Discounts pop-up */
.disc-body { display: flex; flex-direction: column; gap: 10px; }
.disc-h { margin: 6px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.disc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.disc-tpl { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); text-align: left; border: 2px solid transparent; }
.disc-tpl span { font-size: 13px; color: var(--ink-2); }
.disc-tpl.on { border-color: var(--brand); }
.disc-seg { flex: none; }
.disc-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.disc-quick .chip-btn { min-width: 64px; justify-content: center; }
.disc-remove { align-self: flex-start; margin-top: 4px; }
/* Order totals: the discount line (tap to change it) */
.totals .disc-line { width: 100%; color: var(--brand); text-align: left; padding: 0; background: none; }
.cfg-head.ut-row, .cfg-row.ut-row { grid-template-columns: minmax(0, 1.4fr) 120px 120px 56px; }
.perm-select { max-width: 220px; height: 44px; }

/* Multiple-selection dropdown (POS User Type › Users with this type) */
.multi-pick { position: relative; max-width: 560px; }
.multi-pick summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--b-line, #e4e2dc); border-radius: 12px; background: #fff; cursor: pointer; font-size: 16px; }
.multi-pick summary::-webkit-details-marker { display: none; }
.multi-pick[open] summary { border-color: #4FD1C5; box-shadow: 0 0 0 3px rgba(79,209,197,.2); }
.multi-pick[open] summary svg { transform: rotate(180deg); }
.multi-list { margin-top: 6px; border: 1px solid var(--b-line, #e4e2dc); border-radius: 12px; background: #fff; max-height: 320px; overflow: auto; }
.multi-opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--b-line, #e4e2dc); cursor: pointer; }
.multi-opt:last-child { border-bottom: 0; }
.multi-opt span { display: flex; flex-direction: column; }
.multi-opt small { color: #8a8f98; font-size: 13px; }
.rc-meta.rc-disc > span:nth-child(2) { color: var(--brand); font-weight: 600; }
.cfg-head.combo-row, .cfg-row.combo-row { grid-template-columns: minmax(0, 1.2fr) 130px minmax(0, 1fr) 90px 120px 56px; }

/* Void pop-up: reason buttons (one must be chosen) */
.void-reasons { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.void-reasons .chip-btn { min-height: 52px; justify-content: center; font-size: 15px; border: 2px solid transparent; }
.void-reasons .chip-btn.on { border-color: var(--danger, #e5534b); background: rgba(229,83,75,.16); color: var(--ink); }

/* Payments › Voids */
.cfg-head.vr-row, .cfg-row.vr-row { grid-template-columns: minmax(0, 1.4fr) 160px 120px 56px; }
.vr-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; max-width: 640px; }
.vr-opt { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px 16px; border-radius: 12px; border: 2px solid #e4e2dc; background: #fff; }
.vr-opt small { color: #6b6f76; font-size: 13px; line-height: 1.4; }
.vr-opt.on { border-color: #4FD1C5; background: rgba(79,209,197,.08); }
.void-reasons .chip-btn span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.void-reasons .chip-btn small { font-size: 12px; color: var(--ink-2); font-weight: 500; }
.vr-reasons { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }

/* Table names (floor plan editor and POS tables): always centred, across and down */
.fp-t, .plan .table, .floor .table { text-align: center; }
/* …on one line: fitTableLabels() (ui.js) shrinks the font when the name is wider than the table */
.fp-t b, .table .tn { display: block; width: max-content; padding: 0; text-align: center; line-height: 1.1; white-space: nowrap; }

/* Team › Settings: reporting group colour and targets */
.user-form textarea.field { width: 100%; padding: 12px; border: 1px solid var(--b-line); border-radius: 10px; background: #fff; color: var(--b-ink); font-size: 16px; resize: vertical; }
.rg-colors { grid-template-columns: repeat(13, 36px); }
.tgl-row { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; color: var(--b-ink); cursor: pointer; }
input.tgl[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 46px; height: 28px; border-radius: 14px; border: none; display: inline-block; background: #cfd5da; position: relative; margin: 0; cursor: pointer; transition: background .15s; flex: none; }
input.tgl[type="checkbox"]::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s; }
input.tgl[type="checkbox"]:checked { background: var(--b-accent); }
input.tgl[type="checkbox"]:checked::after { transform: translateX(18px); }
input.tgl[type="checkbox"]:focus-visible { outline: 2px solid var(--b-accent); outline-offset: 2px; }
.pct-field { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 700; color: var(--b-ink-2); }
.pct-field[hidden] { display: none; }
.user-form .pct-field input.field { width: 120px; text-align: right; }
.set-dot { width: 14px !important; height: 14px !important; border-radius: 4px !important; margin-right: 8px; }

/* Product list: filters, row selection and bulk actions */
.prod-filters { flex-wrap: wrap; gap: 10px; }
.prod-filters .prod-filter { max-width: 210px; }
.prod-table .sel-col { width: 44px; text-align: center; padding-right: 0; }
.prod-table .sel-col input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; padding: 0; border-radius: 4px; border: 1.5px solid #9aa1ab; vertical-align: middle; }
.prod-table .sel-col input[type="checkbox"]:not(:checked) { background: #fff; }
.prod-table .sel-col input[type="checkbox"]:checked { border-color: var(--brand); background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.prod-table tr.picked td { background: #eefaf9; }
.prod-table tr.off td > input, .prod-table tr.off td > select { color: #8b919a; }
.prod-table td .tag { margin-left: 8px; }
.sel-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px; border: 1px solid var(--brand); border-radius: 12px; background: #eefaf9; }
.allergen-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.per-page { display: inline-flex; align-items: center; gap: 8px; color: #5d636e; }
.per-page select { width: auto; min-width: 76px; }
.pager { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.pager .btn { min-width: 44px; }
.pager .btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* POS: availability on product buttons, and the item info pop-up (press and hold) */
.product { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.product .avail-badge { display: inline-block; margin-left: 6px; vertical-align: 1px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #e0a84f; color: #1b1d22; }
.product .avail-badge.out { background: var(--danger); color: #fff; }
.product.sold-out { opacity: .5; }
.product.sold-out .name { text-decoration: line-through; }
.item-info { overflow: hidden; }
.item-info .info-img { height: 180px; background: var(--c); display: grid; place-items: center; }
.item-info .info-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-info .info-img span { font-size: 64px; font-weight: 800; color: rgba(255,255,255,.85); }
.item-info .modal-head h3 { flex: 1; }
.item-info h4 { margin: 14px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.item-info .info-desc { margin: 0; line-height: 1.45; }
.item-info .info-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.item-info .info-chips small { font-weight: 500; opacity: .8; }
.item-info .info-avail { display: flex; gap: 10px; align-items: center; }
.item-info .info-avail select { flex: 1; }
.item-info .info-count { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.item-info .info-count input { width: 100px; }
/* Back Office product Details: image, removable allergens */
.prod-image { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.prod-image img, .prod-image-empty { width: 120px; height: 90px; border-radius: 10px; object-fit: cover; border: 1px solid var(--b-line, #e4e2dc); }
.prod-image-empty { display: grid; place-items: center; color: #8b919a; font-size: 13px; background: #fff; }
.removable-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.removable-row { display: grid; grid-template-columns: 110px auto 1fr; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--b-line, #e4e2dc); border-radius: 12px; background: #fff; }
.removable-row .cfg-opt { border: none; padding: 0; background: none; }

/* POS logo menu: the logo and the venue's initials open it (Receipts lives here). */
.brand-wrap { position: relative; flex: none; }
.brand-btn { min-width: 0; height: 44px; padding: 0 12px 0 6px; border-radius: 12px; background: transparent; color: var(--ink); font: inherit; font-weight: 800; font-size: 19px; }
.brand-btn:hover, .brand-btn.on { background: var(--panel-2); }
.brand-btn[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--brand); }
.brand-caret { font-size: 12px; opacity: .6; margin-left: -4px; }
.brand-list { min-width: 220px; z-index: 20; }
.brand-list-name { padding: 8px 14px 10px; font-size: 13px; color: var(--ink); opacity: .65; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.brand-list button { display: flex; align-items: center; gap: 10px; }
.brand-list button.on { background: var(--brand); color: var(--brand-ink); }

/* Orders carried over from an earlier business day (after the daily sales reset). */
.open-tag.old { display: inline-block; color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); border-radius: 8px; padding: 4px 8px; }
.parked.old { box-shadow: inset 4px 0 0 var(--warn); }
.carried-head { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }

/* Orders: the customer's name on an open order, easy to spot. */
.parked-customer { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--ink); }
.parked-customer svg { flex: none; width: 18px; height: 18px; color: var(--brand); }
.parked-customer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* …and its note: an icon, a bit brighter than the timers, smaller than the name. */
.parked-note { display: flex; align-items: flex-start; gap: 7px; font-size: 14px; font-weight: 600; color: var(--ink); opacity: .85; }
.parked-note svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--warn); }
.parked-note span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Orders view: order type tabs (All, Dine-In, Takeaway…) with how many are open. */
.order-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; margin: 0 4px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; width: fit-content; max-width: 100%; }
.order-tabs button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 10px; font-weight: 700; color: var(--ink); opacity: .8; }
.order-tabs button.on { background: var(--brand); color: var(--brand-ink); opacity: 1; }
.order-tabs .ot-count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: grid; place-items: center; font-size: 12px; background: var(--panel-2); color: var(--ink); }
.order-tabs button.on .ot-count { background: rgba(0,0,0,.18); color: var(--brand-ink); }

/* Sold out: top bar tab (only while something is sold out) and its list. */
.icon-btn.soldout-btn:not(.on) { color: var(--danger); }
.icon-btn.soldout-btn .badge { background: var(--danger); color: #fff; }
.soldout-list { display: flex; flex-direction: column; gap: 10px; }
.soldout-row { display: grid; grid-template-columns: 52px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.so-tile { width: 52px; height: 52px; border-radius: 12px; background: var(--c); color: #1d1f23; display: grid; place-items: center; font-weight: 900; font-size: 22px; overflow: hidden; }
.so-tile img { width: 100%; height: 100%; object-fit: cover; }
.so-main, .so-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.so-main strong { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-meta > span:last-child { font-weight: 700; }
.so-reset { min-width: 110px; }
@media (max-width: 900px) { .soldout-row { grid-template-columns: 52px 1fr auto; } .so-meta { grid-column: 2; } }
/* Products with options: just an arrow at the bottom right. */
.product .has-mods { font-size: 22px; line-height: 1; bottom: 9px; right: 12px; font-weight: 700; }

/* Item pop-up footer: a Limited item's countdown (how many are left after this). */
.countdown-pill { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 12px; font-weight: 800; font-size: 15px; color: #1d1f23; background: var(--warn); white-space: nowrap; }
.countdown-pill.out { background: var(--danger); color: #fff; }

/* Item pop-up: the Availability and Back to available dropdowns, as tall as the Left / Hours boxes. */
.item-info select#info-status, .item-info select#info-reset {
  height: 54px; width: 100%; padding: 0 44px 0 16px; border-radius: 12px; border: 1px solid var(--line);
  background-color: var(--panel-2); color: var(--ink); font-size: 17px; font-weight: 700;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e8eaed' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.item-info select#info-status:focus, .item-info select#info-reset:focus { outline: none; border-color: #4FD1C5; box-shadow: 0 0 0 2px rgba(79,209,197,.35); }
.item-info .info-count input { height: 54px; font-size: 17px; }

/* Printing Center: items (with square tick boxes) on the left, printed dockets on the right. */
.pc-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pc-col { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px 8px; border-bottom: 1px solid var(--line); }
.pc-all { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; min-height: 40px; }
.pc-box { flex: none; width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--ink); opacity: .75; display: grid; place-items: center; }
.pc-box.on { background: #4FD1C5; border-color: #4FD1C5; color: #0f2e2b; opacity: 1; }
.pc-items { display: flex; flex-direction: column; gap: 6px; }
.pc-item { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px; border-radius: 12px; background: var(--panel-2); min-height: 56px; }
.pc-item.on { box-shadow: inset 0 0 0 2px #4FD1C5; }
.pc-qty { font-weight: 800; color: var(--brand); min-width: 28px; }
.pc-name { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pc-note { color: var(--warn); }
.pc-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pc-tag { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 8px; background: var(--line); }
.pc-tag.hold { color: var(--warn); } .pc-tag.away { color: var(--brand); } .pc-tag.new { color: var(--ink); background: transparent; border: 1px dashed var(--line); }
.pc-foot { display: flex; justify-content: flex-end; padding-top: 6px; }
.pc-dockets { display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 230px); overflow: auto; }
.docket { background: #f4f1ea; color: #1d1f23; border-radius: 10px; padding: 12px 14px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.docket .tiny { color: #5d636e; }
.docket.old { background: var(--panel-2); color: var(--ink); font-family: inherit; }
.docket.old .tiny { color: inherit; opacity: .7; }
.dk-head { display: flex; justify-content: space-between; gap: 8px; }
.docket ul { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px dashed #b9b4a8; display: flex; flex-direction: column; gap: 6px; }
.docket li { display: flex; gap: 8px; }
.docket li small { display: block; color: #5d636e; }
.docket li em { font-style: normal; color: #a86a00; font-weight: 700; }
.docket li.removed { text-decoration: line-through; color: #b3261e; }
.dk-qty { font-weight: 800; min-width: 30px; }
@media (max-width: 1100px) { .pc-grid { grid-template-columns: 1fr; } }

/* Printing Center v2: rows hold the tick button and, for a ticked item of 2+, a "Print n of N" stepper. */
.pc-item { flex-direction: column; align-items: stretch; padding: 0; gap: 0; }
.pc-pick { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px; min-height: 56px; width: 100%; }
.pc-part { display: flex; align-items: center; gap: 10px; padding: 0 12px 12px 48px; }
.stepper.sm button { width: 36px; height: 36px; }
.stepper.sm span { min-width: 28px; text-align: center; font-weight: 800; }
.stepper.sm button:disabled { opacity: .35; }
/* A docket as printed: 80mm thermal paper look. */
.docket { width: min(100%, 320px); margin: 0 auto; background: #fbfaf6; color: #111; border-radius: 4px; padding: 14px 16px 16px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; line-height: 1.35; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.dk-venue { text-align: center; font-weight: 800; font-size: 14px; }
.dk-title { text-align: center; font-weight: 900; font-size: 17px; margin: 4px 0 6px; letter-spacing: .04em; }
.dk-order { text-align: center; font-weight: 900; font-size: 18px; padding: 4px 0 6px; border-bottom: 1px dashed #777; margin-bottom: 6px; }
.dk-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.docket ul { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px dashed #777; display: flex; flex-direction: column; gap: 8px; }
.docket li { display: flex; gap: 10px; font-size: 15px; font-weight: 800; }
.docket li .dk-name small { display: block; font-size: 13px; font-weight: 600; color: #222; padding-left: 4px; }
.docket li small.dk-note { font-weight: 800; }
.docket li.removed { text-decoration: none; color: #111; }
.docket li.removed .dk-name { text-decoration: line-through; }
.dk-qty { min-width: 40px; white-space: nowrap; }
.dk-sec { text-align: center; font-weight: 900; margin-top: 10px; }
.dk-onote { font-weight: 700; padding-top: 4px; }
.dk-end { text-align: center; font-size: 11px; color: #666; margin-top: 12px; padding-top: 8px; border-top: 1px dashed #777; }
/* Each printed docket: Reprint Full Docket under it. */
.dk-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dk-reprint { width: min(100%, 320px); min-height: 44px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.dk-of { text-align: center; font-size: 12px; margin: -4px 0 4px; }
.dk-fire { text-align: center; font-weight: 900; font-size: 17px; margin-top: 8px; padding: 12px 0 4px; border-top: 1px dashed #777; letter-spacing: .03em; }
.dk-fire small { display: block; font-size: 12px; font-weight: 600; margin-top: 4px; letter-spacing: 0; }

/* Set Away Time: the button once a time is set, the note under the course tabs, and the pop-up. */
.order-actions .btn.away-set { color: var(--warn); border-color: var(--warn); }
.away-chip { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 8px 12px; border-radius: 10px; font-size: 14px; text-align: left; color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.away-chip svg { flex: none; }
.away-chip strong { font-weight: 800; }
.away-f { display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
.away-select { height: 54px; font-size: 18px; font-weight: 700; padding: 0 14px; border-radius: 12px; }
.danger-text { color: var(--danger); margin-top: 12px; }

/* Tables › Show Info: a small tag under each table with an open order (open for, last edit, course state). */
.view-toggle.on { background: color-mix(in srgb, #4FD1C5 18%, var(--panel-2)); color: #4FD1C5; }
.view-toggle svg { flex: none; }
.plan .table-info { position: absolute; z-index: 3; transform: translateX(-50%); pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 2px 6px; border-radius: 7px; background: rgba(15,17,21,.92); border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(0,0,0,.35); white-space: nowrap; font-size: 11px; line-height: 1.25; color: var(--ink); }
.table-info .ti-row { display: flex; gap: 7px; align-items: center; }
.table-info .ti-row > span { display: inline-flex; align-items: center; gap: 3px; }
.table-info svg { width: 11px; height: 11px; opacity: .8; }
.table-info b { font-weight: 800; }
.table-info .ti-hold { color: var(--warn); }
.table-info .ti-away { color: var(--brand); }
.table-info.inline { display: flex; margin-top: 4px; font-size: 12px; }
.table-info.inline .ti-row { flex-wrap: wrap; justify-content: center; }
/* Show Info on the floor plan: a square card covering the table — number, open for, last edit, course. */
.plan .table-info.square { transform: translate(-50%, -50%); width: 74px; min-height: 74px; padding: 5px 4px; gap: 2px; justify-content: center; border-radius: 12px;
  background: rgba(20,23,28,.96); border: 2px solid #4FD1C5; box-shadow: 0 4px 12px rgba(0,0,0,.45); font-size: 11px; }
.plan .table-info.square:has(.ti-hold) { border-color: var(--warn); }
.table-info.square > span { display: inline-flex; align-items: center; gap: 3px; }
.table-info .ti-name { font-size: 15px; font-weight: 900; line-height: 1.1; margin-bottom: 1px; }
/* Info cards: slightly smaller text. */
.plan .table-info.square { font-size: 10px; gap: 1px; }
.plan .table-info.square .ti-name { font-size: 13px; }
.plan .table-info.square svg { width: 10px; height: 10px; }
/* Info cards: as wide as their text, with a little room each side. */
.plan .table-info.square { width: max-content; min-width: 0; min-height: 0; padding: 4px 6px; }
/* Order buttons without Hold On: Clear and Send side by side. */
.order-actions.two { grid-template-columns: 1fr 1fr; }

/* Choices (radio buttons) look like the checkboxes, app-wide: a rounded square, teal with a white tick when picked. */
input[type="radio"] { border-radius: 6px; }
input[type="radio"]:checked {
  box-shadow: none; border-color: var(--brand);
  background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}

/* ---------- Offices on phones (Back Office, Team, super admin) ---------- */
.bo-menu-btn { display: none; }
/* The "rotate your iPad" note is for the POS only. */
body:has(.bo) .rotate-hint, body:has(.admin-login) .rotate-hint { display: none !important; }
@media (max-width: 820px) {
  .bo { grid-template-columns: 1fr; position: relative; }
  /* The side menu becomes a drawer opened with ☰ */
  .bo-side { position: fixed; z-index: 60; inset: 0 auto 0 0; width: min(290px, 86vw); background: var(--b-bg); box-shadow: 8px 0 30px rgba(0,0,0,.18);
    transform: translateX(-105%); transition: transform .2s ease; padding-top: max(16px, env(safe-area-inset-top)); }
  .bo.nav-open .bo-side { transform: none; }
  .bo.nav-open::after { content: ''; position: fixed; inset: 0; z-index: 55; background: rgba(15,17,21,.35); }
  .bo-menu-btn { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: #efede8; color: var(--b-ink); align-self: center; }
  .bo-main { margin: 0; border-radius: 0; border: 0; min-width: 0; height: 100%; }
  .bo-head { flex-wrap: wrap; padding: 10px 14px; gap: 8px; padding-top: max(10px, env(safe-area-inset-top)); }
  .bo-head > * { order: 3; }
  .bo-head .bo-menu-btn { order: 0; }
  .bo-head .head-title { order: 1; flex: 1 1 calc(100% - 112px); }   /* leaves room for ☰ and the avatar only */
  .bo-head .head-title .crumbs, .bo-head .crumbs { flex-wrap: wrap; }
  .bo-head .user-menu { order: 2; }   /* ☰ · title · avatar on the first line; the page's buttons below */
  .bo-head h1 { font-size: 22px; overflow-wrap: anywhere; }
  .bo-head .btn { min-height: 40px; padding: 0 12px; font-size: 14px; }
  .bo-body { padding: 14px; -webkit-overflow-scrolling: touch; }
  /* Tables scroll sideways instead of squashing */
  .bo-body table { display: block; overflow-x: auto; white-space: nowrap; max-width: 100%; }
  .bo-body table td, .bo-body table th { white-space: nowrap; }
  .bo-body td input:not([type=checkbox]):not([type=radio]), .bo-body td select { min-width: 120px; }
  .bo-body td input.num, .bo-body td input[data-kind=money] { min-width: 84px; }
  /* Tabs and filter rows scroll sideways / wrap */
  .seg-tabs, .bo-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .seg-tabs button, .bo-tabs button { flex: none; white-space: nowrap; }
  .bo .toolbar, .prod-filters { flex-wrap: wrap; }
  .bo .toolbar > *, .prod-filters > * { flex: 1 1 140px; }
  /* Two columns become one */
  .bo .two, .bo .f-row, .user-form .f-row { grid-template-columns: 1fr !important; display: grid; }
  .user-form, .cust-form { max-width: 100%; }
  .bo .bo-field, .bo input.field, .bo select.field { max-width: 100% !important; }
  .bo .cards, .admin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .fp { grid-template-columns: 1fr !important; }
  .bo .pager, .sel-bar { flex-wrap: wrap; }
}
/* Course Away pop-up: Away Now next to Set. */
.modal-foot .btn.away-now { background: var(--warn); border-color: var(--warn); color: #fff; margin-right: 8px; }

/* Sync status (bottom left, every page): offline, or changes still being sent. */
.sync-status { position: fixed; left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 90; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(0,0,0,.3); pointer-events: auto; }
.sync-status[hidden] { display: none; }
.sync-status.offline { background: #e5534b; color: #fff; }
.sync-status.sending { background: #f0b429; color: #1d1f23; }

/* Offline: Tables note, and order cards flagged after POS that worked offline meet again. */
.offline-note { margin: 0 4px 12px; padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; color: #fff; background: color-mix(in srgb, var(--danger) 85%, transparent); }
.open-tag.clash { display: inline-block; color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); border-radius: 8px; padding: 4px 8px; }
.open-tag.was { display: inline-block; color: var(--ink); opacity: .75; font-weight: 600; }

/* Forgot password? (sign-in pages) and Forgot your PIN? (POS). */
.forgot-link { align-self: center; background: none; border: 0; padding: 4px 8px; color: #1f8f86; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.admin-card a.btn { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.pin-forgot { margin-top: 14px; background: none; border: 0; color: var(--ink); opacity: .75; font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pin-forgot-help { margin: 8px 0 0; font-size: 13px; opacity: .8; text-align: center; max-width: 320px; }

/* Super admin › Integrations. */
.int-form { max-width: 640px; gap: 14px; }
.int-head { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.int-check { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.int-check.ok { background: #d5f4f0; color: #1f6b64; }
.int-check.bad { background: #fde8e6; color: #9b2c24; }
.int-acts { display: flex; flex-wrap: wrap; gap: 10px; }