/* ════════════════════════════════════════════════════════════
   Cashier + Restaurant — Unified Screen Redesign Prototype
   Design tokens reused verbatim from ../home-dashboard-prototype/styles.css, which itself
   lifted them from the live system (public/assets/css/lib/bootstrap-rtl.min.css,
   public/assets/css/style-rtl.css). Deliberately NOT a new aesthetic: this is a redesign of
   an already-branded product, so the two "Redesign Prototype" siblings should look like they
   belong to the same product, not two different apps. New tokens below are additive only,
   for concepts that don't exist on the dashboard (ticket status, POS numerals).
   ════════════════════════════════════════════════════════════ */

@font-face {
    font-family: "LamaSans";
    src: url("../public/assets/fonts/LamaSans/LamaSans-Regular.ttf");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "LamaSans";
    src: url("../public/assets/fonts/LamaSans/LamaSans-Medium.ttf");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "LamaSans";
    src: url("../public/assets/fonts/LamaSans/LamaSans-Bold.ttf");
    font-weight: 700;
    font-display: swap;
}

:root {
    /* brand - identical to home-dashboard-prototype */
    --primary: #077b9b;
    --primary-600: #066a86;
    --primary-100: #e6f2f5;
    --secondary: #6c757d;
    --success: #28a745;
    --danger: #dc3545;
    --warning: #ffc107;
    --info: #17a2b8;
    --dark: #292d32;

    /* surface - identical to home-dashboard-prototype */
    --page-bg: #f3f5f8;
    --card-bg: #ffffff;
    --surface-bg: #eaedf2;
    --border: #eef0f3;
    --border-strong: #e2e6eb;
    --text: #26303d;
    --text-muted: #78828e;
    --text-faint: #a2aab3;

    --topbar-bg: #ffffff;
    --topbar-border: #eef0f3;
    --topbar-shadow: 0 1px 3px rgba(17, 24, 39, .04);

    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --shadow-card: 0 1px 2px rgba(17, 24, 39, .04), 0 8px 24px -12px rgba(17, 24, 39, .10);
    --shadow-hover: 0 12px 28px -12px rgba(7, 123, 155, .28);

    /* new: ticket-status semantics (Direction A, D9) - reuses the existing KPI hue family
       rather than inventing new colors, so a status badge reads as "the same design system"
       as the dashboard's own KPI tiles. */
    --status-open-bg: #F0F1FF;      --status-open-fg: #077b9b;
    --status-kitchen-bg: #FFF6EE;   --status-kitchen-fg: #F88F2D;
    --status-paid-bg: #ECF9F5;      --status-paid-fg: #10B981;
    --status-voided-bg: #FFEFEF;    --status-voided-fg: #FF0000;
    --status-free-bg: #ECF9F5;      --status-free-fg: #10B981;

    color-scheme: light;
}

/* dark mode - single source of truth, same architecture as home-dashboard-prototype:
   every rule in this file reads color through the tokens above/below, so nothing needs a
   parallel dark ruleset written for it. */
[data-theme="dark"] {
    --primary-100: #103744;
    --page-bg: #0c1219;
    --card-bg: #141c26;
    --surface-bg: #0a0f15;
    --border: #232e3a;
    --border-strong: #2c3947;
    --text: #e7ecf1;
    --text-muted: #8f9baa;
    --text-faint: #616e7c;
    --topbar-bg: #0e161f;
    --topbar-border: #232e3a;

    --status-open-bg: #16233a;    --status-open-fg: #4fb8dd;
    --status-kitchen-bg: #33220f; --status-kitchen-fg: #ffa156;
    --status-paid-bg: #10291f;    --status-paid-fg: #34d399;
    --status-voided-bg: #331515;  --status-voided-fg: #ff6b6b;
    --status-free-bg: #10291f;    --status-free-fg: #34d399;

    color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    background: var(--page-bg);
    color: var(--text);
    font-family: "LamaSans", "Segoe UI", Tahoma, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* Thin-scrollbar treatment, applied globally rather than to a hand-picked list of containers -
   the app has many independently-scrolling regions (cart lines, product grid, receipt, session,
   payment body, ...) and a per-selector list kept missing new ones as screens changed (feedback
   came in twice for two different containers). `scrollbar-width` is inherited, so setting it
   once on `html` covers every scrollable descendant in Firefox; `*::-webkit-scrollbar` does the
   same for Chromium, this app's actual runtime. */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar { width: 4px; height: 4px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }

/* Numerals: tabular alignment matters a lot on a payment screen with a price column -
   a system monospace stack, used only for numbers, not as a brand-personality choice. */
.num {
    font-variant-numeric: tabular-nums;
    font-family: "SFMono-Regular", "Cascadia Code", Consolas, monospace;
    font-feature-settings: "tnum" 1;
}

.text-muted { color: var(--text-muted); font-size: .85em; }

/* ── app shell ─────────────────────────────────────────────── */
.app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    box-shadow: var(--topbar-shadow);
    flex: 0 0 auto;
}
.app-topbar__brand {
    font-weight: 700;
    font-size: 18px;
    color: var(--primary);
}
.app-topbar__tag {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--surface-bg);
    border-radius: 999px;
    padding: 2px 10px;
    margin-inline-start: 8px;
}
.app-topbar__actions { display: flex; gap: 8px; }
.icon-btn {
    width: 36px; height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--card-bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.icon-btn:hover { background: var(--surface-bg); }

.app-main {
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
}

/* ── tabs bar ──────────────────────────────────────────────── */
.tabs-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 20px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}
.tabs-bar__scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
}
.ticket-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-bg);
    color: var(--text);
    font-weight: 500;
    white-space: nowrap;
}
.ticket-tab--active {
    background: var(--primary-100);
    border-color: var(--primary);
    color: var(--primary);
}
.ticket-tab--add {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
    padding: 8px 16px;
}
.ticket-tab--add span { font-size: 18px; }
.ticket-tab__badge {
    font-size: 10px;
    background: var(--status-kitchen-bg);
    color: var(--status-kitchen-fg);
    border-radius: 999px;
    padding: 2px 8px;
}
.ticket-tab__close {
    color: var(--text-faint);
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
}
.ticket-tab__close:hover { color: var(--danger); }
.ticket-tab__timer {
    color: inherit;
    opacity: .75;
    font-size: 12px;
    font-weight: 700;
}
/* Feedback round 3: the icon toolbar + grid/search now share this same row instead of a
   separate stacked bar, pushed to the far side from tabs+add-order by .tabs-bar's own
   justify-content:space-between - see ProductCartScreen.js's `trailing` slot content. */
.tabs-bar__trailing {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    /* Room for .pos-toolbar__badge's negative top offset: without this the badge got clipped
       (feedback round 3) because a scrolling axis forces the other axis out of `visible` too,
       per the CSS overflow spec - padding, not a layout hack, is what actually fixes it. */
    padding: 8px 2px;
}

/* ── generic screen scaffolding ────────────────────────────── */
.screen {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
}
/* Back button sits at the FAR side from the title (feedback: left in the Arabic/RTL build,
   the opposite side if this ever ships in English/LTR) - space-between plus DOM order (title
   first, button second - see each screen's template) achieves that from `dir` alone, same
   DOM-order-driven mirroring already used for the cart/product panels, with no LTR build to
   test against yet but the mechanism carries over unchanged either way. */
.screen__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--card-bg);
}
.screen__header h2 { margin: 0; font-size: 20px; }

.btn {
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 10px 18px;
    font-weight: 600;
    font-size: 14px;
    transition: transform .05s ease;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:not(:disabled):hover { background: var(--primary-600); }
.btn--secondary { background: var(--status-kitchen-fg); color: #fff; }
.btn--success { background: var(--success); color: #fff; }
.btn--danger { background: var(--danger); color: #fff; }
.btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn--ghost:hover { background: var(--surface-bg); }
.btn--lg { padding: 14px 22px; font-size: 16px; width: 100%; }
.btn--sm { padding: 4px 10px; font-size: 12px; }

.input, .select {
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--card-bg);
    color: var(--text);
    font-size: 14px;
    margin-bottom: 10px;
}
.input:focus, .select:focus { outline: none; border-color: var(--primary); }
textarea.input { min-height: 70px; resize: vertical; }
.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.form-row { margin-bottom: 12px; }
.form-row label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }

/* ── floor plan ────────────────────────────────────────────── */
/* `.screen`'s base rule resets overflow:hidden and expects each screen to opt back in - this
   one never did (a pre-existing gap, not something the recent mobile work introduced): with
   enough tables to exceed one viewport's height, the extra rows were simply unreachable, no
   scroll at all (feedback: found while checking every screen at mobile width). */
.floorplan-screen { padding: 20px 24px; background: var(--page-bg); overflow-y: auto; }
.floorplan-legend {
    display: flex; gap: 20px; margin: 16px 0;
    font-size: 13px; color: var(--text-muted);
}
.floorplan-legend span { display: flex; align-items: center; gap: 6px; }
.legend-dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
}
.legend-dot--free { background: var(--status-free-fg); }
.legend-dot--open { background: var(--status-open-fg); }
.legend-dot--kitchen { background: var(--status-kitchen-fg); }
.floorplan-grid {
    display: grid;
    /* auto-fit (not auto-fill): with only ~8 tables, auto-fill was reserving empty phantom
       columns past the last tile instead of letting the real tiles grow into that space, so
       the grid clustered in a corner of the screen instead of filling it. */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    /* Centers each round tile within its (wider, auto-fit-stretched) track - see .table-tile's
       own max-width below for why the tile itself is capped rather than growing edge-to-edge. */
    justify-items: center;
}
.table-tile {
    /* Closer to an actual (round) table than a plain square card, per feedback - capped with
       max-width so it doesn't grow into an oversized circle on a wide screen with few tables;
       the grid track itself can still be wider, this just centers the tile within it. */
    aspect-ratio: 1;
    width: 100%;
    max-width: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--card-bg);
    font-weight: 700;
    font-size: 16px;
    box-shadow: var(--shadow-card);
}
.table-tile__total { font-size: 13px; font-weight: 700; }
.table-tile--free { border-color: var(--status-free-fg); color: var(--status-free-fg); }
.table-tile--open { border-color: var(--status-open-fg); background: var(--status-open-bg); color: var(--status-open-fg); }
.table-tile--kitchen { border-color: var(--status-kitchen-fg); background: var(--status-kitchen-bg); color: var(--status-kitchen-fg); }
.table-tile:hover { box-shadow: var(--shadow-hover); }

/* ── product / cart screen ─────────────────────────────────── */
.product-cart-screen { flex-direction: column; }
.product-cart-screen__body {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Toolbar: literal reference to Cashierk's dense icon bar, but every icon is a 48px+ touch
   target (the reference's icons are far smaller, mouse-oriented). Lives inline in
   TicketTabsBar's `trailing` slot now (feedback round 3), not a separate stacked bar. */
.pos-toolbar__icons {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}
.pos-toolbar__icon {
    position: relative;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-bg);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pos-toolbar__icon:hover { border-color: var(--primary); }
.pos-toolbar__badge {
    position: absolute;
    top: -6px;
    inset-inline-end: -6px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}
.tabs-bar__trailing .search-input { margin-bottom: 0; flex: 0 1 240px; min-width: 140px; }

.product-panel {
    flex: 1 1 65%;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    overflow-y: auto;
    background: var(--page-bg);
    min-height: 0;
}
.category-tabs { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 12px; }
.category-tab {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--card-bg);
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
}
.category-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.search-input { margin-bottom: 12px; }
.stock-alert {
    background: var(--status-voided-bg);
    color: var(--status-voided-fg);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
}
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
}
.product-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px;
    min-height: 96px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--card-bg);
    box-shadow: var(--shadow-card);
    text-align: center;
}
.product-tile:hover { box-shadow: var(--shadow-hover); border-color: var(--primary); }
.product-tile--out { opacity: .5; }
.product-tile--adhoc {
    border-style: dashed;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-weight: 600;
}
.product-tile__image { width: 100%; text-align: center; font-size: 36px; line-height: 1; padding: 4px 0; }
.product-tile__title { font-weight: 600; font-size: 14px; }
.product-tile__price { color: var(--primary); font-weight: 700; font-size: 15px; }
/* Multi-size products show one button per variant (literal reference to the real
   product-screen's button-per-`product.details` row) instead of quick-adding the first size.
   A fixed 2-column grid (not flex-wrap) so a narrow tile never collapses each button to its
   own full-width row - flex-wrap's per-item wrap made a 2nd/3rd variant stretch edge-to-edge
   once it no longer fit beside the first, which read as an ugly stack of bars. A lone leftover
   (3 variants, e.g. قهوة أمريكية) spans both columns on its own row instead of sitting
   half-width and lopsided. */
.product-tile__variants { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; width: 100%; }
.product-tile__variant-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
.product-tile__variant-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 10px;
    min-height: 44px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface-bg);
    font-size: 12px;
    font-weight: 600;
}
.product-tile__variant-btn:hover { border-color: var(--primary); color: var(--primary); }
.product-tile__variant-btn:disabled { opacity: .4; }
.product-tile__variant-btn .num { font-weight: 700; color: var(--primary); }
.product-tile__info {
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--surface-bg);
    color: var(--text-muted);
    font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
/* Literal reference: Cashierk shows the stock quantity on every tile, always - not just as a
   conditional low-stock warning (which is what this prototype showed before this pass). */
.product-tile__qty {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--surface-bg);
    border-radius: 999px;
    padding: 2px 10px;
}
.product-tile__qty--low { color: var(--status-kitchen-fg); background: var(--status-kitchen-bg); }
.product-grid--list { grid-template-columns: 1fr; }
.product-grid--list .product-tile { flex-direction: row; align-items: center; justify-content: space-between; }

.cart-panel {
    flex: 1 1 35%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border-inline-start: 1px solid var(--border);
    padding: 18px;
    overflow-y: auto;
}
.cart-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    margin-bottom: 12px;
}
.ticket-status-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}
.ticket-status-badge--open { background: var(--status-open-bg); color: var(--status-open-fg); }
.ticket-status-badge--sent_to_kitchen { background: var(--status-kitchen-bg); color: var(--status-kitchen-fg); }

.cart-lines { flex: 1 1 auto; overflow-y: auto; margin-bottom: 12px; }

/* Bundle offers (feedback round 4): a distinct card, not a row in the plain cart-line grid -
   its members are ONE linked, jointly-removable unit, not independent lines that merely share
   a footnote (see offersEngine.js/useTicketStore.js's addToBundle). */
.cart-bundle {
    border: 1px solid var(--status-paid-fg);
    background: var(--status-paid-bg);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 10px;
}
.cart-bundle__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 13px;
    color: var(--status-paid-fg);
    margin-bottom: 6px;
}
.cart-bundle__remove {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(220, 53, 69, .1);
    color: var(--danger);
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}
.cart-bundle__remove:hover { background: var(--danger); color: #fff; }
.cart-bundle__item {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 3px 0;
}
.cart-bundle__item--free { color: var(--status-paid-fg); font-weight: 700; }
.cart-bundle__pending { font-size: 12px; color: var(--text-muted); margin: 4px 0; }
.cart-bundle__total {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 13px;
    border-top: 1px dashed var(--status-paid-fg);
    margin-top: 6px;
    padding-top: 6px;
    color: var(--status-paid-fg);
}

.cart-line {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.cart-line__title { font-size: 14px; font-weight: 500; }
.cart-line__extras { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
/* Feedback round 4: was plain link-style text, easy to miss/mistake for a label rather than a
   tappable action - now a proper bordered chip with an icon, sized as a real touch target. */
.cart-line__extras-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 6px 12px;
    min-height: 32px;
    border-radius: 999px;
    border: 1px dashed var(--border-strong);
    background: var(--surface-bg);
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
}
.cart-line__extras-btn:hover { border-color: var(--primary); border-style: solid; }
.cart-line__qty { display: flex; align-items: center; gap: 8px; }
.cart-line__qty button {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--surface-bg);
    line-height: 1;
    font-size: 16px;
}
/* The qty number is itself a button now (feedback round 3: typing an exact quantity, e.g.
   selling 1000 pieces, beats tapping "+" a thousand times) - overrides the round +/- styling
   above since it's tappable but reads as plain text, not another circular stepper button. */
.cart-line__qty button.cart-line__qty-value {
    width: auto; height: auto; min-width: 28px;
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 700;
    padding: 4px 2px;
}
.cart-line__total { font-weight: 700; min-width: 50px; text-align: end; }
/* Feedback round 3: "شكل دينامك اكتر" for the delete action - a filled circular tap target
   with a trash icon and a hover/press state, replacing the old bare "×" glyph. */
.cart-line__remove {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(220, 53, 69, .1);
    color: var(--danger);
    font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, transform .1s ease;
}
.cart-line__remove:hover { background: var(--danger); color: #fff; }
.cart-line__remove:active { transform: scale(.92); }
.cart-lines__empty { color: var(--text-faint); text-align: center; padding: 40px 0; }

/* Offers: category-percent and bundle ("buy N get M free"), recalculated live from the cart
   via offersEngine.js - see the store's addLine/updateLineQty/removeLine call sites. */
.applied-offers {
    background: var(--status-paid-bg);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-bottom: 12px;
}
.applied-offers__title { font-weight: 700; font-size: 12px; color: var(--status-paid-fg); margin-bottom: 6px; }
.applied-offer-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: var(--status-paid-fg);
    padding: 2px 0;
}

/* Extras/add-ons picker modal (new mock feature, feedback round 3 - see mockData.js's
   `extras`). Chips instead of checkboxes to keep every tap target touch-sized. */
.extras-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.extras-picker__chip {
    padding: 10px 14px;
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface-bg);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.extras-picker__chip--active { background: var(--primary-100); border-color: var(--primary); color: var(--primary); }

/* Quick-actions row: literal reference to the 4 always-visible icon buttons on Cashierk's
   product screen (order-type/discount/customer/wholesale-price) - each a full touch target,
   not the reference's small icon-only buttons. */
.quick-actions-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-bg);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    min-height: 56px;
}
.quick-action__icon { font-size: 18px; }
.quick-action--active { background: var(--primary-100); border-color: var(--primary); color: var(--primary); }

.fast-pay-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 8px;
}
.fast-pay-row .btn { width: 100%; }

.qr-order-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.qr-order-row__actions { display: flex; align-items: center; gap: 10px; }
.modal-card--wide { width: min(92vw, 520px); }

.cart-panel__customer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--surface-bg);
    border: 1px dashed var(--border-strong);
    margin-bottom: 12px;
    font-weight: 500;
}
.cart-panel__total {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 700;
    padding: 12px 0;
    border-top: 2px solid var(--border-strong);
}
.cart-panel__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

/* Mobile-only cart open/close bar - hidden here, shown (and .cart-panel toggled) only inside
   the 860px media query below. Declared once outside it so the rule doesn't have to be
   duplicated per breakpoint. */
.mobile-cart-bar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 20px;
    min-height: 56px;
    border: none;
    border-top: 1px solid var(--border);
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
}
.mobile-cart-bar__count { display: flex; align-items: center; gap: 8px; }
.mobile-cart-bar__chevron { font-size: 14px; }
.mobile-cart-bar__total { font-size: 16px; }

/* ── customer screen ───────────────────────────────────────── */
.customer-screen, .adhoc-screen, .returns-screen { padding: 20px 24px; overflow-y: auto; background: var(--page-bg); }
.customer-search-row { display: flex; gap: 10px; align-items: flex-start; }
.customer-search-row .input { margin-bottom: 0; }
.customer-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.customer-list__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    border: 1px solid var(--border);
    width: 100%;
    text-align: start;
    cursor: pointer;
}
.customer-list__row--active { border-color: var(--primary); background: var(--primary-100); }
.customer-list__row--walkin { margin-top: 12px; font-style: italic; }
/* Not in the real cashier list (confirmed - no type column there today); added here since a
   cashier telling an individual from a company at a glance is plainly useful, and the type is
   now a real, meaningful field instead of nothing. */
.customer-type-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    margin-inline-start: 8px;
}
.customer-type-badge--1 { background: var(--primary-100); color: var(--primary); }
.customer-type-badge--2 { background: var(--status-kitchen-bg); color: var(--status-kitchen-fg); }
.customer-form, .adhoc-form { max-width: 480px; display: flex; flex-direction: column; }
.form-row-pair { display: flex; gap: 12px; }
.form-row-pair .form-row { flex: 1 1 0; }
/* Company/institution-only section (feedback: form data was missing this entirely) - matches
   the real customer_type==2 fields (tax number, commercial register, ZATCA national address)
   from Customer model + CustomersController's validation, shown conditionally here rather than
   always-on like the real cashier screen (see CustomerScreen.js's header note on why). */
.customer-form__section-title { font-size: 14px; font-weight: 700; margin: 4px 0 10px; }
.national-address-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 12px; }

/* ── payment screen ────────────────────────────────────────────────────────────────────
   Literal reference to Cashierk's payment dialog, but rebuilt as a full-screen, scrollable
   layout with a sticky totals/actions footer instead of a dense fixed-size modal - the
   density (all ~20 reference elements) is preserved in full; only the container shape and
   every element's own size changed, per the touch-target rule. */
.payment-screen { flex-direction: column; overflow: hidden; }
.payment-screen__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px 24px 8px;
    background: var(--page-bg);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.payment-totals-strip {
    display: flex;
    justify-content: space-around;
    background: var(--primary-100);
    border-radius: var(--radius-md);
    padding: 16px;
}
.payment-totals-strip > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.payment-totals-strip strong { font-size: 20px; color: var(--primary); }

.payment-section {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px;
}
.payment-section h3 { margin: 0 0 14px; font-size: 15px; }
.payment-section__header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.payment-section__header-row h3 { margin: 0; }

.segmented--3, .segmented--2 {
    display: grid;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 12px;
}
.segmented--3 { grid-template-columns: repeat(3, 1fr); }
.segmented--2 { grid-template-columns: repeat(2, 1fr); }
.segmented--3 button, .segmented--2 button {
    padding: 14px 8px;
    background: var(--card-bg);
    font-weight: 600;
    font-size: 13px;
    border-inline-start: 1px solid var(--border-strong);
    min-height: 48px;
}
.segmented--3 button:first-child, .segmented--2 button:first-child { border-inline-start: none; }
.segmented--3 button.active, .segmented--2 button.active { background: var(--primary); color: #fff; }

.discount-input-row { display: flex; gap: 10px; margin-bottom: 10px; }
.discount-input-row .input { margin-bottom: 0; flex: 1 1 auto; }
.discount-input-row .btn { width: auto; flex: 0 0 auto; }
.field-error { color: var(--danger); font-size: 13px; margin: -4px 0 10px; }
.applied-discount-chip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--status-paid-bg);
    color: var(--status-paid-fg);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-weight: 600;
    font-size: 13px;
}
.applied-discount-chip button { color: inherit; text-decoration: underline; font-size: 12px; }

.payment-methods__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-bottom: 16px; }
.method-chip {
    padding: 14px 10px;
    min-height: 52px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-strong);
    background: var(--card-bg);
    font-weight: 600;
    font-size: 13px;
}
.method-chip:hover { border-color: var(--primary); color: var(--primary); }
.method-chip--active { background: var(--primary); border-color: var(--primary); color: #fff; }
.payment-lines { display: flex; flex-direction: column; gap: 10px; }
.payment-line { display: grid; grid-template-columns: 1fr 130px 44px; gap: 10px; align-items: center; }
.payment-line__amount { margin-bottom: 0; }
.payment-line__remove { color: var(--text-faint); font-size: 22px; width: 40px; height: 40px; }
.payment-lines__empty { color: var(--text-faint); font-size: 13px; }

.customer-buttons-row { display: flex; gap: 10px; }
.customer-buttons-row .btn { width: auto; }
.customer-buttons-row__select { flex: 1 1 auto; }

.summary-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.summary-row--total { font-size: 18px; font-weight: 700; border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); margin: 8px 0; padding: 10px 0; }
.summary-row--negative { color: var(--danger); font-weight: 700; }

.payment-screen__footer {
    flex: 0 0 auto;
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 -4px 16px rgba(17, 24, 39, .06);
}
.payment-screen__footer-summary { flex: 1 1 auto; }
.payment-screen__footer-actions { display: flex; gap: 10px; flex: 1 1 auto; }
.payment-screen__footer-actions .btn { width: auto; flex: 1 1 auto; white-space: nowrap; }

.toast {
    position: fixed;
    bottom: 24px;
    inset-inline: 0;
    margin-inline: auto;
    width: fit-content;
    background: var(--dark);
    color: #fff;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 600;
    box-shadow: var(--shadow-hover);
    z-index: 60;
}

/* ── receipt screen ────────────────────────────────────────── */
.receipt-screen { flex-direction: column; }
.receipt-layout {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    padding: 20px 24px;
    overflow-y: auto;
    background: var(--page-bg);
}
.receipt-preview__paper {
    background: #fff;
    color: #1a1a1a;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    padding: 20px;
    font-size: 13px;
}
.receipt-preview--thermal .receipt-preview__paper { max-width: 240px; font-family: "SFMono-Regular", Consolas, monospace; }
.receipt-preview--a4 .receipt-preview__paper { aspect-ratio: 1/1.4; }
.receipt-preview__brand { font-weight: 700; text-align: center; margin-bottom: 6px; }
.receipt-preview__meta { text-align: center; color: #555; font-size: 11px; margin-bottom: 10px; }
.receipt-preview__line { display: flex; justify-content: space-between; padding: 3px 0; }
.receipt-preview__line--total { font-weight: 700; font-size: 14px; }
.receipt-preview__line--offer-title { font-weight: 700; font-size: 12px; margin-top: 4px; }
.control-row { margin-bottom: 14px; }
.control-row label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-muted); }
.segmented { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.segmented button { padding: 8px 18px; background: var(--card-bg); font-weight: 600; }
.segmented button.active { background: var(--primary); color: #fff; }
.receipt-actions { display: flex; gap: 10px; margin: 16px 0; }
.print-log { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 16px; }
.print-log h4 { margin: 0 0 8px; font-size: 13px; }
.print-log__row { font-size: 12px; color: var(--text-muted); padding: 3px 0; }

/* ── returns screen ────────────────────────────────────────── */
.order-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.order-list__row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 14px;
    padding: 12px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: start;
}
.order-list__row:hover { border-color: var(--primary); }
.return-line { padding: 8px 0; border-bottom: 1px solid var(--border); }
.return-success {
    margin-top: 14px;
    padding: 12px 16px;
    background: var(--status-paid-bg);
    color: var(--status-paid-fg);
    border-radius: var(--radius-sm);
    font-weight: 600;
}

/* ── modal ─────────────────────────────────────────────────── */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(10, 15, 20, .45);
    display: flex; align-items: center; justify-content: center;
    z-index: 50;
}
.modal-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 24px;
    width: min(90vw, 380px);
    box-shadow: var(--shadow-hover);
}
.modal-card h3 { margin: 0 0 8px; }
.modal-card p { color: var(--text-muted); margin: 0 0 20px; font-size: 14px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.modal-actions .btn { flex: 0 0 auto; width: auto; }

/* ── session screen ────────────────────────────────────────── */
.session-screen {
    align-items: center;
    padding: 28px 20px;
    background: var(--page-bg);
    overflow-y: auto;
}
.session-card {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.session-card--closed { align-items: center; text-align: center; gap: 20px; padding: 48px 24px; }
.session-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.session-card__status { display: flex; align-items: center; gap: 10px; }
.session-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--status-paid-fg);
    background: var(--status-paid-bg);
    padding: 6px 12px;
    border-radius: 999px;
}
.status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--status-paid-fg);
    display: inline-block;
}
.session-card__brand { display: flex; align-items: center; gap: 12px; }
.session-card__brand-text { display: flex; flex-direction: column; text-align: end; }
.session-card__brand-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-md);
    background: var(--primary-100);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
}

.session-metric, .session-metric--wide {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface-bg);
    border-radius: var(--radius-md);
    padding: 16px;
}
.session-metric__icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--card-bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex: 0 0 auto;
}
.session-metric__body { display: flex; flex-direction: column; gap: 2px; }
.session-metric__label { font-size: 13px; color: var(--text-muted); }
.session-metric__value { font-size: 18px; font-weight: 700; }
.session-metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.session-drawer-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--primary-100);
    border: 1px dashed var(--primary);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    width: 100%;
}
.session-drawer-bar__add {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.session-drawer-bar__label { font-weight: 600; color: var(--primary); }
.session-drawer-bar__value { margin-inline-start: auto; font-size: 20px; font-weight: 700; color: var(--primary); }

.session-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 4px;
}
.session-actions-grid .btn { width: 100%; }

@media (max-width: 860px) {
    /* padding-bottom reserves room for .mobile-cart-bar's fixed 56px, so the LAST row of
       whatever scrolls in here (the product grid, when the cart is collapsed) clears it
       instead of sliding underneath - the bar sits on top (z-index) but was never accounted
       for in this container's own scrollable height (feedback: bar covering the last products). */
    .product-cart-screen__body { flex-direction: column; overflow-y: auto; padding-bottom: 56px; }
    /* .cart-panel/.product-panel's desktop flex-basis (35%/65%) is a WIDTH share for the
       side-by-side row layout above. Once stacked into a column here, that basis was resolving
       against an indefinite height and collapsing - most visibly on .cart-lines, whose own
       flex:1 1 auto then had nothing to grow into, so added products rendered at 0 height
       (feedback: cart products not showing on the responsive screen). The outer body above
       already scrolls the whole stacked column, so the panels don't need their own nested
       scroll/flex-grow here - they just size to content. */
    .cart-panel, .product-panel { flex: 0 0 auto; overflow-y: visible; }
    .cart-lines { flex: 0 0 auto; overflow-y: visible; max-height: none; }
    .cart-panel { max-width: none; border-inline-start: none; border-top: 1px solid var(--border); }
    .receipt-layout { grid-template-columns: 1fr; }
    .quick-actions-row, .fast-pay-row { grid-template-columns: repeat(2, 1fr); }
    .payment-screen__footer { flex-direction: column; align-items: stretch; }
    /* Feedback: side-by-side on a narrow screen squeezed tabs+add-order and the icon/search
       toolbar into two half-width strips, each needing its own horizontal scroll - two
       cramped scrollbars in one row. Stacked instead, each gets the full width (order:-1 puts
       the toolbar on top without touching TicketTabsBar's own DOM order, which the wider
       layout still relies on for the icons-opposite-add-button placement). */
    .tabs-bar { flex-direction: column; align-items: stretch; gap: 8px; }
    .tabs-bar__trailing { order: -1; }

    /* Feedback: cart open/close via one fixed bottom button showing item count + total. Below
       860px the cart is collapsed (display:none) by default so the product grid gets the full
       screen; toggling `cartExpanded` (ProductCartScreen.js) adds --expanded, which turns it
       into a full-screen overlay instead. z-index 40 keeps it under .modal-backdrop's 50 (a
       qty-edit/extras modal opened while the cart is expanded must still win), and under the
       bar's own 41 so the close control is never covered by the panel it closes. */
    .cart-panel { display: none; }
    .cart-panel.cart-panel--expanded {
        display: flex;
        position: fixed;
        inset: 0;
        bottom: 56px;
        z-index: 40;
        max-width: none;
        border: none;
        /* Overrides this same media query's .cart-panel{overflow-y:visible} above (correct for
           the collapsed/inline case, which relies on the page's own scroll) - a `position:fixed`
           overlay has no such outer scroller, so without its own overflow a long cart (many
           bundles) just cut off at the viewport edge with no way to reach the rest, and the
           last visible row sat flush against the fixed bottom bar with nothing scrolling it
           clear (feedback: "the button covers cart data and there's no scroll"). */
        overflow-y: auto;
    }
    .mobile-cart-bar { display: flex; z-index: 41; }
}