/* NEX-T POS - the till screens (js/sell.js): Sell (products + cart), Payment, Sale done, Recent, Counter, and the
   set-up / "open in another window" pages; plus the sync panel (js/sync.js).
   Laptop first (1280×720, 1366×768, 1920×1080): two panes filling the screen under the top bar, each scrolling on its
   own; at tablet width the cart narrows, on a narrow screen it goes under the products. Colours come from the tokens in
   css/base.css, so dark mode and the till's stronger contrast apply here too; the product tile colours have their own
   light / dark pairs below. Every control stays ≥ 44 px (--tap). */

/* ------------------------------------------------------------------ Sell: the two panes */
.view.sell { display: flex; align-items: stretch; min-height: 0; overflow: hidden; }
.sell-left { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 0 max(16px, var(--safe-l)); }

/* search / scan */
.sell-search { position: relative; display: flex; align-items: center; flex: none; }
.sell-search-ico { position: absolute; left: 14px; width: 22px; height: 22px; color: var(--muted); pointer-events: none; }
.sell-search .sell-search-input { min-height: 54px; padding: 10px 92px 10px 46px; border-width: 2px; border-radius: var(--radius); font-size: 19px; font-weight: 600; }
.sell-search-input::-webkit-search-cancel-button { display: none; }
.sell-search-clear { position: absolute; right: 44px; color: var(--muted); }
.sell-kbd { position: absolute; right: 14px; pointer-events: none; }
@media (pointer: coarse) { .sell-kbd { display: none; } .sell-search-clear { right: 6px; } }

/* category chips: one row that scrolls sideways */
.sell-chips { flex: none; flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: thin; }
.sell-chips .chip { flex: none; }

/* the product grid */
.sell-grid-wrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 4px 16px 2px; overscroll-behavior: contain; }
.sell-hint { margin: 0 0 8px; color: var(--muted); font-weight: 600; }
.sell-hint:empty { display: none; }
.sell-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sell-more { grid-column: 1 / -1; margin: 6px 0 0; text-align: center; }
.sell-grid > .empty { grid-column: 1 / -1; }

/* a product tile: picture (or colour + initials), stock badge, name, price */
.tile { position: relative; display: flex; flex-direction: column; align-items: stretch; min-height: 152px; padding: 0; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; transition: border-color .12s, box-shadow .12s, transform .06s; }
.tile:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tile:active { transform: scale(.98); }
.tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tile-img { display: flex; align-items: center; justify-content: center; flex: none; height: 78px; overflow: hidden;
  background: var(--tile-bg, var(--surface-3)); color: var(--tile-ink, var(--muted)); }
.tile-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile-swatch { font-size: 28px; font-weight: 800; letter-spacing: .03em; line-height: 1; }
.tile-badge { position: absolute; top: 6px; right: 6px; font-size: 13px; box-shadow: 0 0 0 2px var(--surface); }
.tile-name { padding: 8px 10px 0; font-size: 15px; font-weight: 700; line-height: 1.25; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tile-price { margin-top: auto; padding: 4px 10px 9px; font-size: 17px; font-weight: 800; }
.tile.is-out .tile-img { opacity: .55; }

/* tile colours (when a product has no picture): light, and dark further down */
.tile-c-grey   { --tile-bg: #e6e9ee; --tile-ink: #3f4652; }
.tile-c-red    { --tile-bg: #fde0e0; --tile-ink: #a01818; }
.tile-c-orange { --tile-bg: #fde4cc; --tile-ink: #9a4705; }
.tile-c-yellow { --tile-bg: #fbefb4; --tile-ink: #765800; }
.tile-c-green  { --tile-bg: #d8f2e1; --tile-ink: #0f6b3c; }
.tile-c-teal   { --tile-bg: #d0f0ed; --tile-ink: #0b655f; }
.tile-c-blue   { --tile-bg: #dde6fd; --tile-ink: #1d44c4; }
.tile-c-purple { --tile-bg: #ebdffb; --tile-ink: #6a2bb8; }
@media (prefers-color-scheme: dark) {
  .tile-c-grey   { --tile-bg: #2b3242; --tile-ink: #d3d9e4; }
  .tile-c-red    { --tile-bg: #4a1f25; --tile-ink: #ffb3b8; }
  .tile-c-orange { --tile-bg: #4a2d14; --tile-ink: #ffc58f; }
  .tile-c-yellow { --tile-bg: #45391a; --tile-ink: #f6dc7a; }
  .tile-c-green  { --tile-bg: #173a27; --tile-ink: #8fe0b2; }
  .tile-c-teal   { --tile-bg: #123b3a; --tile-ink: #84e0d8; }
  .tile-c-blue   { --tile-bg: #1f2c58; --tile-ink: #a9bdff; }
  .tile-c-purple { --tile-bg: #34234f; --tile-ink: #d4b8ff; }
}

/* ------------------------------------------------------------------ Sell: the cart */
.sell-cart { flex: none; width: 400px; min-height: 0; display: flex; flex-direction: column; background: var(--surface);
  border-left: 1px solid var(--line-strong); padding-right: var(--safe-r); }
@media (min-width: 1600px) { .sell-cart { width: 460px; } }
.cart-head { display: flex; align-items: center; gap: 10px; flex: none; min-height: 52px; padding: 6px 10px 6px 16px; border-bottom: 1px solid var(--line); }
.cart-title { margin: 0; font-size: 18px; font-weight: 800; }
.cart-count { color: var(--muted); font-weight: 600; }
.cart-lines { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; min-height: 120px;
  padding: 24px; color: var(--muted); text-align: center; }
.cart-empty .ico { width: 34px; height: 34px; opacity: .6; }
.cart-empty p { margin: 0; max-width: 260px; }
/* a cart line: the name (+ price each, discount) on the left over two rows; the line total, then − qty + on the right */
.cart-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 2px 8px;
  padding: 6px 12px 8px 6px; border-bottom: 1px solid var(--line); }
.cart-line .line-main { grid-column: 1; grid-row: 1 / span 2; align-self: stretch; justify-content: center; }
.cart-line .line-total { grid-column: 2; grid-row: 1; }
.cart-line .line-qty { grid-column: 2; grid-row: 2; justify-self: end; }
.cart-line.is-new { animation: line-in 1.1s ease-out; }
@keyframes line-in { from { background: var(--accent-soft); } }
.line-main { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; min-height: var(--tap); padding: 4px 8px;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.line-main:hover { background: var(--surface-2); }
.line-name { font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.line-sub { color: var(--muted); font-size: 13px; }
.line-disc { color: var(--ok); font-weight: 700; }
.line-qty { display: flex; align-items: center; gap: 4px; }
.qty-btn .ico { width: 18px; height: 18px; }
.cart-line .qty-input { width: 52px; min-height: var(--tap); padding: 6px 2px; text-align: center; font-weight: 800; }
.line-total { min-width: 82px; text-align: right; font-size: 17px; font-weight: 800; white-space: nowrap; }
.cart-tools { display: flex; flex-wrap: wrap; gap: 8px; flex: none; padding: 10px 12px; border-top: 1px solid var(--line); }
.cart-tools .btn { flex: 1 1 0; min-width: 0; }
.cart-totals { flex: none; padding: 4px 16px 6px; }
.tot-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-variant-numeric: tabular-nums; }
.tot-row.tot-muted { color: var(--muted); font-size: 14px; font-weight: 600; }
.tot-row.tot-disc { color: var(--ok); font-weight: 700; }
.tot-row.tot-total { margin: 2px 0; font-size: 28px; font-weight: 800; }
.cart-charge { flex: none; padding: 4px 12px 6px; }
.charge-btn { position: relative; font-size: 24px; }
.charge-kbd { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: inherit; background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .45); }
.charge-btn:disabled .charge-kbd { display: none; }
.cart-foot { flex: none; padding: 0 16px calc(10px + var(--safe-b)); color: var(--muted); font-size: 13px; text-align: center; }
.cart-foot.is-old { color: var(--warn); font-weight: 700; }

/* the line dialog: Remove on its own, on the left */
.line-dialog .dialog-actions .btn-danger-ghost { margin-right: auto; }
.disc-edit .seg { margin: 2px 0 10px; }
.disc-quick { margin: 0 0 10px; }

/* tablets, small laptops, short screens */
@media (max-width: 1100px) {
  .sell-cart { width: 350px; }
  .sell-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}
@media (max-height: 700px) {
  .tile { min-height: 132px; }
  .tile-img { height: 62px; }
  .tot-row.tot-total { font-size: 24px; }
  .charge-btn { min-height: 60px; font-size: 21px; }
}
/* narrow (a phone, a tablet upright): the products above, the cart under them; the page scrolls */
@media (max-width: 760px) {
  .view.sell { flex-direction: column; overflow: visible; }
  .sell-left { flex: none; height: 62dvh; padding: 10px 10px 0; }
  .sell-cart { width: auto; border-left: 0; border-top: 1px solid var(--line-strong); }
  .cart-lines { flex: none; max-height: none; }
  .sell-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
  .tile { min-height: 124px; }
  .tile-img { height: 56px; }
}

/* ------------------------------------------------------------------ Payment */
.dialog.pay-dialog { max-width: 940px; }
.pay { display: flex; flex-direction: column; gap: 14px; }
.pay-due { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.pay-due-label { font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pay-due-amount { font-size: 42px; font-weight: 800; line-height: 1.05; }
.pay-due-sub { color: var(--muted); font-weight: 600; }
.pay-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.pay-method { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 10px 14px;
  border: 2px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 17px; font-weight: 800; cursor: pointer; }
.pay-method .ico { width: 24px; height: 24px; }
.pay-method:hover { border-color: var(--accent); }
.pay-method[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pay-cash { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 18px; align-items: start; }
.pay-cash .pay-cash-input { min-height: 64px; font-size: 32px; }
/* Exact + up to 5 notes: rows of 3 */
.pay-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.pay-quick .btn { min-height: 52px; font-size: 17px; padding-left: 6px; padding-right: 6px; }
.pay-change { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; margin-top: 14px; padding: 10px 16px;
  border-radius: var(--radius); background: var(--surface-2); color: var(--muted); font-size: 17px; font-weight: 700; }
.pay-change.is-ok { background: var(--ok-soft); color: var(--ok); }
.pay-change.is-short { background: var(--warn-soft); color: var(--warn); }
.pay-change-amount { font-size: 36px; font-weight: 800; line-height: 1; }
.keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.keypad .key { min-height: 56px; font-size: 23px; font-weight: 800; }
.keypad .key-fn { font-size: 17px; }
.keypad .key:last-child { grid-column: span 2; }
.pay-other p { margin: 0 0 12px; }
.pay-other .pay-showqr { margin-bottom: 14px; }
.pay-note summary { cursor: pointer; color: var(--accent); font-weight: 700; min-height: var(--tap); display: flex; align-items: center; }
.pay-note .field { margin-top: 4px; }
.pay-error { color: var(--danger); font-weight: 700; }
.pay-error:empty { display: none; }
.pay-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.pay-complete { flex: 1 1 auto; max-width: 440px; }
@media (max-width: 720px) {
  .pay-cash { grid-template-columns: minmax(0, 1fr); }
  .pay-foot { flex-direction: column-reverse; align-items: stretch; }
  .pay-complete { max-width: none; }
}
@media (max-height: 760px) {
  .pay-due-amount { font-size: 34px; }
  .keypad .key { min-height: 46px; font-size: 20px; }
  .pay-change { min-height: 56px; margin-top: 10px; }
  .pay-change-amount { font-size: 30px; }
  .pay-method { min-height: 52px; }
}

/* the payment QR, full screen for the customer: the amount and the shop's QR as big as the screen allows */
.dialog.pay-qr { max-width: none; width: 100%; height: calc(100dvh - 32px); max-height: none; }
.pay-qr .dialog-body { display: flex; }
.payqr { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 0; text-align: center; }
.payqr-label { font-size: 18px; font-weight: 700; color: var(--muted); }
.payqr-amount { font-size: clamp(44px, 8vw, 84px); font-weight: 800; line-height: 1.05; }
.payqr-img { flex: 1 1 auto; min-height: 0; width: auto; max-width: 100%; max-height: 58dvh; object-fit: contain; padding: 12px;
  background: #fff; border-radius: var(--radius); }
.payqr-missing { max-width: 460px; padding: 16px; border-radius: var(--radius); background: var(--warn-soft); font-weight: 700; }
.payqr-help { color: var(--muted); font-weight: 600; }
.pay-qr .dialog-actions .btn { flex: 1 1 0; min-height: 64px; font-size: 20px; }

/* ------------------------------------------------------------------ Sale done */
.dialog.sale-done { max-width: 560px; }
.done { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0 2px; text-align: center; }
.done-ico { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
.done-ico .ico { width: 36px; height: 36px; stroke-width: 2.6; }
.done-label { font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.done-change { font-size: 60px; font-weight: 800; line-height: 1.05; }
.done-paid { color: var(--ok); }
.done-meta { color: var(--muted); font-weight: 600; }
.done-no { font-size: 18px; }
.done-status { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.sale-done .dialog-actions .btn { flex: 1 1 0; min-height: 58px; font-size: 18px; }

/* ------------------------------------------------------------------ Close counter */
.close-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 720px) { .close-grid { grid-template-columns: minmax(0, 1fr); } }
.close-grid .section-title { margin-top: 0; }
.close-expected { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 14px; padding: 12px 14px;
  border-radius: var(--radius); background: var(--surface-2); font-weight: 700; }
.close-expected b { font-size: 24px; }
.close-diff { margin: 8px 0 12px; font-weight: 800; font-size: 18px; }
.close-diff:empty { display: none; }
.close-diff.is-ok { color: var(--ok); }
.close-diff.is-off { color: var(--warn); }
.void-approval { margin-top: 12px; }

/* the figures of a shift (Close dialog, Counter screen) */
.sum-list { display: flex; flex-direction: column; }
.sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.sum-row:last-child { border-bottom: 0; }
.sum-row.sum-sub { padding-left: 14px; color: var(--muted); font-size: 14px; }
.sum-row.sum-strong { font-weight: 800; }

/* ------------------------------------------------------------------ Recent, Counter, set-up pages (scroll normally) */
body.layout-till .view.till-page { width: 100%; max-width: 1180px; margin: 0 auto;
  padding: 18px max(20px, var(--safe-r)) calc(32px + var(--safe-b)) max(20px, var(--safe-l)); }
.recent-search { min-width: 220px; }
.recent-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0 0 16px; }
.recent-summary .card + .card { margin-top: 0; }
.recent-summary .stat-error { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.recent-summary .stat-error .stat-value { color: var(--danger); }
.recent-table td { font-size: 15px; }
.sale-drawer .receipt-paper { padding: 14px 10px; }
.counter-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .counter-grid { grid-template-columns: minmax(0, 1fr); } }
.setup-card { max-width: 580px; margin: 6vh auto 0; }
.setup-card h1 { font-size: 22px; }

/* ------------------------------------------------------------------ the sync panel (js/sync.js) */
.sync-panel { display: flex; flex-direction: column; gap: 10px; }
.sync-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sync-head .pill { white-space: normal; }
.sync-kv { font-size: 14px; }
.sync-panel .section-title { margin: 8px 0 0; }
.sync-panel .table-wrap { max-height: 320px; overflow: auto; }
.sync-panel p { margin: 0; }
.sync-err { color: var(--danger); font-size: 13px; overflow-wrap: anywhere; }