/* F. BINSABBAR POS - kiosk till layout.
POS-only structure on top of fb-ui.css. NO new design tokens - kit vars only.
Two-pane sale surface (catalogue + cart), full-viewport, touch-hardened. */
/* ---- kiosk hardening + full-viewport shell ---------------------------------- */
/* is a PLAIN BLOCK (not a flex container) - Safari/WebKit fails to paint the
flow children of a flex . The flex column lives on #pos-app instead. */
html { height: 100%; }
html, body {
margin: 0;
background: var(--canvas-bg);
color: var(--text);
overscroll-behavior: none; /* kill pull-to-refresh on a till */
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation; /* no 300ms tap delay */
}
body {
min-height: 100vh;
font-family: futura-pt, "Futura PT", "Trebuchet MS", sans-serif;
-webkit-user-select: none; user-select: none;
}
/* The flex shell wrapper (replaces body-as-flex). */
#pos-app {
display: flex;
flex-direction: column;
height: 100vh;
height: 100dvh; /* dynamic viewport on Safari 15.4+; 100vh fallback above */
}
/* Inputs/textareas remain selectable + zoom-safe (16px avoids iOS focus zoom). */
.text-input, input, textarea, [contenteditable] {
-webkit-user-select: text; user-select: text;
font-size: 16px;
}
.pos-embed.pos-embed-bg, .pos-embed.pos-embed-bg body { background: var(--pos-embed-bg, var(--canvas-bg)); }
/* Auth gate: hide everything until sign-in resolves (auth.js / pos.js remove it). */
html.auth-pending body > *:not(.fb-busy):not(.pos-gate) { visibility: hidden; }
/* ---- top chrome ------------------------------------------------------------- */
.pos-top {
display: flex; align-items: center; gap: var(--s-4);
padding: max(var(--s-2), env(safe-area-inset-top)) max(var(--s-5), env(safe-area-inset-right)) var(--s-2) max(var(--s-5), env(safe-area-inset-left));
border-bottom: 1px solid var(--control-border);
background: var(--control-bg);
min-height: var(--s-10);
flex: 0 0 auto;
}
.pos-top > * { min-width: 0; }
.pos-top-l { display: flex; align-items: baseline; gap: var(--s-2); }
.pos-wordmark { font-weight: 500; letter-spacing: 0.10em; font-size: 15px; }
.pos-sub { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.pos-tabs { display: flex; gap: var(--s-1); margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
.pos-tabs::-webkit-scrollbar { display: none; }
.pos-tab {
border: 0; background: transparent; cursor: pointer;
padding: var(--s-2) var(--s-4); border-radius: var(--radius-pill);
font: inherit; font-size: 13px; letter-spacing: 0.04em; color: var(--text-muted);
min-height: var(--s-9); white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease;
}
.pos-tab.is-active { background: var(--text); color: var(--text-inverse); }
.pos-top-r { display: flex; align-items: center; gap: var(--s-3); }
.pos-shop { min-height: var(--s-9); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-user {
display: flex; align-items: center; gap: var(--s-2);
border: 1px solid var(--control-border); background: var(--control-bg);
border-radius: var(--radius-pill); padding: var(--s-1) var(--s-3) var(--s-1) var(--s-1);
cursor: pointer; min-height: var(--s-9); max-width: 200px; flex: 0 0 auto;
}
.pos-user-avatar {
width: 32px; height: 32px; border-radius: var(--radius-pill); flex: 0 0 auto;
background: var(--text); color: var(--premium-yellow);
display: grid; place-items: center; font-size: 11px; letter-spacing: 0.04em;
}
.pos-user-meta { display: flex; flex-direction: column; line-height: 1.2; text-align: left; min-width: 0; }
.pos-user-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
/* The shared auth.js injects a fixed bottom-right "Sign out" pill; the POS has its
own cashier switch (top-right), so hide the duplicate. */
#fb-signout-pill { display: none !important; }
.pos-user-role { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
/* ---- main views ------------------------------------------------------------- */
/* Pure flex (NO position:absolute views) - Safari/WebKit fails to PAINT
absolutely-positioned content inside a flex item with a flex-resolved height
(everything reports visible + sized but renders blank). The active view is a
normal flex child that fills #pos-main. */
#pos-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pos-view { display: none; flex: 1 1 auto; min-height: 0; min-width: 0; }
.pos-view.is-active { display: flex; }
/* SALE: catalogue + cart */
#view-sale { flex-direction: row; }
.catalogue { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: var(--s-4); gap: var(--s-3); }
.cat-bar { display: flex; flex-direction: column; gap: var(--s-3); }
.cat-tabs { display: flex; gap: var(--s-2); }
.cat-tab {
border: 1px solid var(--control-border); background: var(--control-bg); cursor: pointer;
padding: var(--s-2) var(--s-4); border-radius: var(--radius-pill); font: inherit; font-size: 13px;
color: var(--text-muted); min-height: var(--s-9); flex: 1 1 0;
}
.cat-tab.is-active { background: var(--text); color: var(--text-inverse); border-color: var(--text); }
.cat-search { display: flex; gap: var(--s-2); }
.cat-search .text-input { flex: 1 1 auto; }
.cat-scan { flex: 0 0 auto; min-height: var(--s-9); }
.cat-grid {
flex: 1 1 auto; overflow-y: auto;
display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s-3);
/* NO align-content:start - on a fixed-height scroll grid whose content overflows,
align-content:start makes the ROWS OVERLAP (and only at sizes where content
overflows -> the ratio-dependent "cards overlap" bug). Default packs rows correctly. */
grid-auto-rows: max-content;
padding-bottom: var(--s-6);
}
.cat-card {
border: 1px solid var(--control-border); background: rgba(255,255,255,0.55);
border-radius: var(--radius-card); padding: var(--s-3); cursor: pointer;
display: flex; flex-direction: column; gap: var(--s-2); text-align: left;
overflow: hidden; /* clip the thumbnail so a tall image can't spill onto neighbours */
transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.cat-card:active { transform: scale(0.98); }
.cat-card.is-disabled { opacity: 0.5; pointer-events: none; }
.cat-card.is-request {
align-self: start;
border-style: dashed;
background: transparent;
min-height: 96px;
justify-content: center;
}
/* ![]()
thumb with a FIXED height + object-fit:cover - contained, never overflows
(the old background-div + aspect-ratio let tall jewel photos spill over the cards). */
/* Bulletproof thumbnail box: fixed 132px, overflow:hidden (a scroll container, so its
flex auto-minimum is 0 - the box can't be stretched by the image), holding an ![]()
that fills it with object-fit:cover. overflow:hidden clips at EVERY width. */
.cat-card-thumb {
position: relative; /* containing block for the absolutely-positioned img */
/* Owner rule 2026-07-04: product covers are ALWAYS square (1:1), no scrim.
The img child is absolutely positioned (contributes no flow height), so
the box is sized by aspect-ratio alone - with a fixed-height fallback for
engines without aspect-ratio support (see @supports below). */
width: 100%; aspect-ratio: 1 / 1; height: auto; flex: 0 0 auto; min-height: 0; max-height: none;
border-radius: var(--radius-sm); overflow: hidden;
transform: translateZ(0); /* own compositing layer - WebKit otherwise fails to clip a child to a border-radius+overflow:hidden box, so the image spills */
background-color: var(--hover);
}
/* aspect-ratio unsupported (old WebKit): the absolutely-positioned img gives
the box zero height - fall back to the legacy fixed thumb height. */
@supports not (aspect-ratio: 1 / 1) {
.cat-card-thumb { height: 132px; min-height: 132px; max-height: 132px; }
}
/* Absolutely positioned inside the relative+overflow:hidden box: the canonical
cover-image pattern. object-fit:cover on a normal-flow flex/grid child can PAINT
outside its box in WebKit/Blink (layout says 132px, paint spills) - absolute
positioning forces the paint to stay inside the clipped box. */
.cat-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-card-sku { font-size: 10px; letter-spacing: 0.06em; color: var(--text-faint); }
/* Clamp the title to 2 lines so cards stay tidy (no flex-grow empty space). */
.cat-card-title { font-size: 12px; line-height: 1.3; flex: 0 0 auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat-card-price { font-size: 13px; font-weight: 500; margin-top: 2px; }
.cat-card-sub {
align-self: flex-start;
border-radius: var(--radius-pill);
background: var(--hover);
color: var(--text-muted);
padding: 4px 8px;
font-size: 9px;
line-height: 1.2;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.cat-card-note { font-size: 11px; line-height: 1.35; color: var(--text-muted); }
.cat-empty {
grid-column: 1 / -1;
border: 1px dashed var(--control-border);
border-radius: var(--radius-card);
color: var(--text-muted);
padding: var(--s-6);
text-align: center;
font-size: 13px;
}
.cat-foot { font-size: 11px; color: var(--text-faint); min-height: 14px; }
/* CART panel */
.cart-panel {
flex: 0 0 380px; max-width: 42vw; display: flex; flex-direction: column;
border-left: 1px solid var(--control-border); background: rgba(255,255,255,0.42);
}
.cart-client { padding: var(--s-3); border-bottom: 1px solid var(--control-border); }
.cart-client-btn {
width: 100%; text-align: left; border: 1px solid var(--control-border); background: var(--control-bg);
border-radius: var(--radius-md); padding: var(--s-1) var(--s-3); cursor: pointer; min-height: var(--s-9);
display: flex; flex-direction: column; gap: 2px;
}
.cart-client-label { font-size: 14px; }
.cart-client-sub { font-size: 11px; color: var(--text-muted); }
.cart-lines { flex: 1 1 auto; overflow-y: auto; padding: var(--s-2) var(--s-3); }
.cart-empty { color: var(--text-faint); font-size: 13px; text-align: center; padding: var(--s-8) var(--s-4); }
.cart-empty.is-error { color: var(--accent); }
.cart-line { border-bottom: 1px solid var(--control-border); padding: var(--s-3) 0; }
.cart-line-top { display: flex; justify-content: space-between; gap: var(--s-2); }
.cart-line-desc { font-size: 12px; line-height: 1.35; flex: 1 1 auto; }
.cart-line-desc .ar { color: var(--text-muted); direction: rtl; display: block; }
.cart-line-sku { font-size: 10px; color: var(--text-faint); letter-spacing: 0.04em; }
.cart-line-remove { border: 0; background: transparent; cursor: pointer; color: var(--text-faint); font-size: 18px; line-height: 1; padding: 0; width: var(--s-9); height: var(--s-9); flex: 0 0 var(--s-9); border-radius: var(--radius-pill); }
.cart-line-ctl { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); flex-wrap: wrap; }
.cart-step { display: inline-flex; align-items: center; border: 1px solid var(--control-border); border-radius: var(--radius-pill); background: var(--control-bg); }
.cart-step button { width: var(--s-9); height: var(--s-9); border: 0; background: transparent; cursor: pointer; font-size: 18px; line-height: 1; border-radius: var(--radius-pill); }
.cart-step button:disabled { opacity: 0.3; cursor: default; }
.cart-step input { width: 40px; height: var(--s-9); text-align: center; border: 0; background: transparent; font: inherit; font-size: 14px; }
.cart-stock-hint { font-size: 10px; color: var(--text-faint); letter-spacing: 0.03em; }
.cart-disc { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); }
.cart-disc input { width: var(--s-9); height: var(--s-9); text-align: center; border: 1px solid var(--control-border); border-radius: var(--radius-sm); background: var(--control-bg); font: inherit; font-size: 13px; }
.cart-disc input:disabled { opacity: 0.4; }
.cart-line-total { margin-left: auto; font-size: 13px; font-weight: 500; }
.cart-pers { margin-top: var(--s-2); font-size: 11px; color: var(--champagne); display: flex; align-items: center; gap: var(--s-2); }
.cart-pers button { border: 1px solid var(--control-border); background: var(--control-bg); border-radius: var(--radius-pill); font: inherit; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 0 var(--s-3); cursor: pointer; min-height: var(--s-9); }
.cart-subline { font-size: 11px; color: var(--text-muted); margin-top: 4px; padding-left: var(--s-3); border-left: 2px solid var(--champagne); }
.cart-totals { padding: var(--s-3); border-top: 1px solid var(--control-border); font-size: 13px; }
.cart-totals .row { display: flex; justify-content: space-between; padding: 2px 0; color: var(--text-muted); }
.cart-totals .row.grand { color: var(--text); font-size: 18px; font-weight: 500; padding-top: var(--s-2); }
.cart-totals .vat-note { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.cart-actions { padding: 0 var(--s-3) max(var(--s-3), env(safe-area-inset-bottom)); }
.pos-checkout { width: 100%; min-height: var(--s-9); font-size: 15px; }
.pos-checkout:disabled { opacity: 0.45; }
/* INVOICES + AFTER-SALES lists */
#view-invoices, #view-aftersales { flex-direction: column; padding: var(--s-4); gap: var(--s-3); overflow: hidden; }
.inv-bar, .as-bar { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; flex: 0 0 auto; }
.inv-filters { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.inv-search, #inv-search { flex: 1 1 240px; }
.as-bar #as-isn { flex: 1 1 280px; }
.inv-list, .as-list { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-2); padding-bottom: var(--s-8); }
.inv-load-more { align-self: center; min-height: var(--s-9); flex: 0 0 auto; }
.inv-card { border: 1px solid var(--control-border); background: rgba(255,255,255,0.55); border-radius: var(--radius-card); padding: var(--s-3) var(--s-4); }
.inv-card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.inv-num { font-size: 14px; font-weight: 500; }
.inv-meta { font-size: 11px; color: var(--text-muted); }
.inv-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); }
.inv-actions .btn { min-height: var(--s-9); font-size: 12px; padding: var(--s-2) var(--s-4); }
/* ---- overlays --------------------------------------------------------------- */
/* The blocking busy overlay is the shared kit `.fb-busy` (see fb-ui.css): hidden by
default (display:none), revealed only when the element does NOT carry [hidden], so
pos.js toggles it purely via node.hidden - no POS-local busy/spinner CSS needed.
The [hidden] attribute MUST still win over the display rules below for .pos-gate /
.pos-toast, which use id/class rules that outrank the UA [hidden]{display:none}
- so without this, a "hidden" overlay stays displayed. #pos-gate is OPAQUE
(background:var(--canvas-bg)) at z-index 9900, so when wrongly shown it covers the
ENTIRE app with blank cream (this was the blank-page bug). Force hidden to win. */
#pos-gate[hidden], #pos-toast[hidden] { display: none !important; }
.pos-modal-root { position: fixed; inset: 0; z-index: 9700; pointer-events: none; }
.pos-modal-root > * { pointer-events: auto; }
.pos-sheet-backdrop { position: fixed; inset: 0; background: rgba(10,10,10,0.34); display: flex; align-items: flex-end; justify-content: center; }
.pos-sheet { width: 100%; max-width: 720px; max-height: 92vh; overflow-y: auto; background: var(--canvas-bg); border-radius: var(--radius-glass) var(--radius-glass) 0 0; padding: var(--s-5) max(var(--s-5), env(safe-area-inset-right)) max(var(--s-5), env(safe-area-inset-bottom)) max(var(--s-5), env(safe-area-inset-left)); box-shadow: 0 -8px 40px rgba(0,0,0,0.18); }
.pos-sheet-grab { width: 40px; height: 4px; border-radius: var(--radius-pill); background: var(--control-border); margin: 0 auto var(--s-4); }
.pos-sheet h3 { margin: 0 0 var(--s-3); font-size: 16px; font-weight: 500; }
.pos-sheet .field { margin-bottom: var(--s-3); }
.pos-sheet-actions { display: flex; gap: var(--s-3); margin-top: var(--s-4); }
.pos-sheet-actions .btn { flex: 1 1 0; min-height: var(--s-9); }
.pos-toast { position: fixed; left: 50%; bottom: max(var(--s-6), env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 9800; background: var(--text); color: var(--text-inverse); padding: var(--s-3) var(--s-5); border-radius: var(--radius-pill); font-size: 13px; max-width: 86vw; }
.pos-toast.is-error { background: var(--accent); color: var(--premium-yellow); }
/* full-screen deny / gate card (CONCIERGE / no role / token missing) */
.pos-gate { position: fixed; inset: 0; z-index: 9900; display: grid; place-items: center; background: var(--canvas-bg); padding: var(--s-6); text-align: center; }
.pos-gate-card { max-width: 420px; }
.pos-gate-card h2 { font-weight: 500; font-size: 20px; margin: 0 0 var(--s-3); }
.pos-gate-card p { color: var(--text-muted); font-size: 14px; line-height: 1.5; }
/* embed: hide standalone-only chrome */
.pos-embed .pos-top { padding-top: var(--s-2); }
.pos-embed #fb-signout-pill, .pos-embed .page-nav { display: none !important; }
@media (hover: hover) {
.pos-tab:not(.is-active):hover, .cat-tab:not(.is-active):hover { background: var(--hover); color: var(--text); }
.pos-user:hover, .cart-client-btn:hover, .cart-step button:not(:disabled):hover, .cart-line-remove:hover, .cart-pers button:hover { background: var(--control-bg-hover); }
.cat-card:not(.is-disabled):hover { background: var(--control-bg-hover); border-color: rgba(0,0,0,0.18); box-shadow: 0 8px 24px rgba(0,0,0,0.06); transform: translateY(-1px); }
}
/* phones / narrow: stack the cart under the catalogue */
@media (max-width: 760px) {
.pos-top {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--s-2) var(--s-3);
padding: max(var(--s-2), env(safe-area-inset-top)) max(var(--s-3), env(safe-area-inset-right)) var(--s-2) max(var(--s-3), env(safe-area-inset-left));
}
.pos-top-l { grid-column: 1; grid-row: 1; }
.pos-top-r { grid-column: 2; grid-row: 1; justify-self: end; }
.pos-tabs { grid-column: 1 / -1; grid-row: 2; width: 100%; margin: 0; }
.pos-tab { flex: 1 1 0; padding-left: var(--s-2); padding-right: var(--s-2); }
#view-sale { flex-direction: column; overflow: hidden; }
.catalogue { flex: 1 1 52%; min-height: 0; padding: var(--s-3); }
.cat-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); padding-bottom: var(--s-3); }
.cart-panel { flex: 0 0 48%; min-height: 300px; max-width: none; border-left: 0; border-top: 1px solid var(--control-border); }
.cart-lines { min-height: 0; }
}
@media (max-width: 520px) {
.pos-wordmark { font-size: 13px; }
.pos-sub { display: none; }
.pos-shop { max-width: 150px; }
.pos-user { padding-right: var(--s-1); }
.pos-user-meta { display: none; }
.cat-tabs { overflow-x: auto; scrollbar-width: none; }
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab { min-width: 112px; }
.cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cart-line-total { flex-basis: 100%; margin-left: 0; text-align: right; }
.pos-sheet-actions { flex-direction: column-reverse; }
}