/* ============================================================================ * ATQ POS shared styles — sourced from D:\Projects\Claude\mockups\pos\_shared.css * Used by PosLayout, PosHome, PosRegister, PosReceipts, PosHeld, PosSettings. * All classes are .pos-* prefixed — no conflict with Tailwind or app.css. * ========================================================================== */ /* ---------------------------------------------------------------------------- * Theme tokens. DARK is the default (:root) and keeps the shipped slate values * byte-for-byte. LIGHT is opt-in, POS-only, via * (toggled by atq.setPosTheme, persisted under 'atq-pos-theme', applied on load * by atq.initPreferences — independent of the ERP .dark theme). Accent stays * indigo. Colors elsewhere in this file resolve to these tokens so flipping * data-pos-theme re-skins every POS page. * -------------------------------------------------------------------------- */ :root { /* Surfaces (DARK — default; unchanged from shipped) */ --pos-bg: #020617; /* slate-950 — page bg */ --pos-panel: #0f172a; /* slate-900 — topbar / nav / cards */ --pos-panel-2: #131d31; /* nested / inset panel */ --pos-elevated: #16213a; /* modals / drawers */ --pos-tile: #1e293b; /* slate-800 — controls, inputs, keys */ --pos-tile-hover: #334155; /* slate-700 */ --pos-card: #1e293b; /* elevated card surface (= tile in dark) */ --pos-card-hover: #28374b; --pos-border: #334155; /* slate-700 */ --pos-border-strong:#475569; /* slate-600 */ --pos-text: #f1f5f9; /* slate-100 */ --pos-text-muted: #94a3b8; /* slate-400 */ --pos-text-faint: #64748b; /* slate-500 */ /* Brand (indigo — unchanged) */ --pos-accent: #6366f1; /* indigo-500 */ --pos-accent-hover: #4f46e5; --pos-accent-text: #a5b4fc; /* indigo-300 — accent as text on dark */ --pos-accent-tint: rgba(99,102,241,.15); --pos-accent-tint-2:rgba(99,102,241,.24); --pos-accent-ring: rgba(99,102,241,.35); --pos-on-accent: #ffffff; /* Semantic */ --pos-success: #10b981; /* emerald-500 */ --pos-success-text: #34d399; --pos-success-tint: rgba(16,185,129,.15); --pos-warning: #f59e0b; /* amber-500 */ --pos-warning-text: #fbbf24; --pos-warning-tint: rgba(245,158,11,.15); --pos-danger: #ef4444; /* red-500 */ --pos-danger-text: #f87171; --pos-danger-tint: rgba(239,68,68,.15); --pos-info: #3b82f6; /* blue-500 */ --pos-info-text: #60a5fa; --pos-info-tint: rgba(59,130,246,.18); --pos-on-warning: #1e293b; /* dark text on amber buttons */ /* Media / fx */ --pos-thumb: linear-gradient(135deg, #334155, #1e293b); --pos-thumb-2: linear-gradient(135deg, #475569, #1e293b); --pos-thumb-fg: #cbd5e1; --pos-backdrop: rgba(2,6,23,.8); --pos-backdrop-soft:rgba(2,6,23,.6); --pos-shadow-color: rgba(0,0,0,.45); /* Geometry */ --pos-touch: 3rem; /* 48px touch target */ --pos-radius: 0.75rem; /* 12px */ --pos-radius-sm: 8px; } /* LIGHT theme (POS-only — html[data-pos-theme="light"]) */ :root[data-pos-theme="light"] { --pos-bg: #eef0f6; /* light gray page so white cards pop */ --pos-panel: #ffffff; --pos-panel-2: #f5f6fb; --pos-elevated: #ffffff; --pos-tile: #eef1f7; /* control / inset on white */ --pos-tile-hover: #e2e6f0; --pos-card: #ffffff; /* elevated card surface = white */ --pos-card-hover: #f6f8fc; --pos-border: #e3e7f0; --pos-border-strong:#d2d8e4; --pos-text: #0f172a; --pos-text-muted: #64748b; --pos-text-faint: #94a3b8; --pos-accent: #6366f1; --pos-accent-hover: #4f46e5; --pos-accent-text: #4f46e5; /* darker indigo for text on white */ --pos-accent-tint: rgba(99,102,241,.10); --pos-accent-tint-2:rgba(99,102,241,.16); --pos-accent-ring: rgba(99,102,241,.30); --pos-on-accent: #ffffff; --pos-success: #059669; --pos-success-text: #059669; --pos-success-tint: rgba(16,185,129,.12); --pos-warning: #d97706; --pos-warning-text: #b45309; --pos-warning-tint: rgba(245,158,11,.14); --pos-danger: #dc2626; --pos-danger-text: #dc2626; --pos-danger-tint: rgba(239,68,68,.10); --pos-info: #2563eb; --pos-info-text: #2563eb; --pos-info-tint: rgba(59,130,246,.10); --pos-on-warning: #ffffff; --pos-thumb: linear-gradient(135deg, #e9edf5, #dde3ee); --pos-thumb-2: linear-gradient(135deg, #e2e8f2, #cfd6e3); --pos-thumb-fg: #64748b; --pos-backdrop: rgba(15,23,42,.38); --pos-backdrop-soft:rgba(15,23,42,.28); --pos-shadow-color: rgba(15,23,42,.16); } /* ============================================================================ * REGISTER REDESIGN (pos02) — amber re-accent + new token families. * LAYERED after the base blocks: values override by source order, so every * existing --pos-* name is preserved (other POS pages keep working) while the * palette becomes warm-light/amber. The CART is dark in BOTH themes via the * --pos-cart-* family (+ a scoped override on .pos-cart, further below). * Default theme is flipped to LIGHT in JS (atq.initPreferences) + PosLayout. * ========================================================================== */ :root { /* re-accent the dark default → amber */ --pos-accent: #f0a23a; --pos-accent-hover: #e08a1e; --pos-accent-text: #f2b969; --pos-accent-tint: rgba(240,162,58,.15); --pos-accent-tint-2:rgba(240,162,58,.24); --pos-accent-ring: rgba(240,162,58,.55); /* new amber families */ --pos-accent-strong:#e08a1e; --pos-accent-grad: linear-gradient(135deg, #f3ad48, #e0851b); --pos-accent-soft: rgba(240,162,58,.16); --pos-accent-soft-text: #f2b969; /* semantic gradients + -soft aliases (keep existing -tint names too) */ --pos-success-grad: linear-gradient(135deg, #22a555, #17994a); --pos-success-soft: var(--pos-success-tint); --pos-danger-soft: var(--pos-danger-tint); --pos-warning-soft: var(--pos-warning-tint); --pos-info-soft: var(--pos-info-tint); /* stronger scrollbars */ --pos-scroll: #39435a; --pos-scroll-hover: #4a566f; /* the dark cart (dark in BOTH themes) */ --pos-cart: #12151d; --pos-cart-head: #161a24; --pos-cart-inset: #1c2231; --pos-cart-line: rgba(255,255,255,.06); --pos-cart-divider: rgba(255,255,255,.14); --pos-cart-text: #f1f5f9; --pos-cart-muted: #94a3b8; --pos-cart-btn: #202634; --pos-cart-btn-hover: #2a3242; --pos-cart-av: #2c3446; --pos-cart-accent-soft:rgba(240,162,58,.12); --pos-cart-danger-soft:rgba(239,90,95,.14); --pos-cart-scroll: rgba(255,255,255,.28); --pos-cart-scroll-hover:rgba(255,255,255,.44); /* geometry + shadows */ --pos-radius-lg:20px; --pos-pill:999px; --pos-nav-w:78px; --pos-cart-w:396px; --pos-lead-w:158px; --pos-shadow-card: 0 1px 2px rgba(0,0,0,.4); --pos-shadow-pop: 0 20px 48px rgba(0,0,0,.55); --pos-shadow-modal:0 30px 70px rgba(0,0,0,.6); } /* warm cream + amber = the approved PRIMARY skin */ :root[data-pos-theme="light"] { --pos-bg: #f4f1ea; --pos-panel: #ffffff; --pos-panel-2: #f5f3ee; --pos-elevated: #ffffff; --pos-tile: #f0ede6; --pos-tile-hover: #e8e3d9; --pos-card: #ffffff; --pos-card-hover: #fbf9f5; --pos-border: #e9e3d9; --pos-border-strong:#dcd4c7; --pos-text: #20242e; --pos-text-muted: #6b7280; --pos-text-faint: #8b909b; --pos-accent: #e6912b; --pos-accent-hover: #d97f17; --pos-accent-strong:#c9740f; --pos-accent-grad: linear-gradient(135deg, #f0a23a 0%, #d9770f 100%); --pos-accent-text: #bd6f18; --pos-accent-soft: #fbeed7; --pos-accent-soft-text:#8a5310; --pos-accent-tint: rgba(230,145,43,.12); --pos-accent-tint-2:rgba(230,145,43,.18); --pos-accent-ring: rgba(230,145,43,.55); --pos-success: #17a34a; --pos-success-text:#15843d; --pos-success-tint:rgba(23,163,74,.12); --pos-success-soft:rgba(23,163,74,.12); --pos-success-grad: linear-gradient(135deg, #1ea94f, #149244); --pos-warning: #e0900f; --pos-warning-text:#a9690a; --pos-warning-tint:rgba(224,144,15,.14); --pos-warning-soft:rgba(224,144,15,.14); --pos-danger: #e0484d; --pos-danger-text:#cf3b40; --pos-danger-tint:rgba(224,72,77,.10); --pos-danger-soft:rgba(224,72,77,.10); --pos-info: #2f76e0; --pos-info-text:#2461bd; --pos-info-tint:rgba(47,118,224,.12); --pos-info-soft:rgba(47,118,224,.12); --pos-thumb: linear-gradient(135deg, #efe9df, #e4ddd0); --pos-thumb-2: linear-gradient(135deg, #e8e1d4, #d8cfbe); --pos-thumb-fg: #8a8272; --pos-scroll: #b0a794; --pos-scroll-hover:#948b78; --pos-backdrop: rgba(24,26,34,.42); --pos-backdrop-soft:rgba(24,26,34,.28); --pos-shadow-color: rgba(24,26,34,.14); --pos-shadow-card: 0 1px 2px rgba(28,30,38,.05), 0 5px 14px rgba(28,30,38,.05); --pos-shadow-pop: 0 16px 40px rgba(24,26,34,.16); --pos-shadow-modal: 0 30px 70px rgba(20,22,30,.30); /* cart stays dark in light theme */ --pos-cart:#181d29; --pos-cart-head:#1b2130; --pos-cart-inset:#232b3c; --pos-cart-line:rgba(255,255,255,.065); --pos-cart-divider:rgba(255,255,255,.14); --pos-cart-btn:#252d3e; --pos-cart-btn-hover:#2e3750; } /* ── Shell + layout ─────────────────────────────────────────────────────── */ .pos-shell { height: 100vh; display: flex; flex-direction: column; overflow: hidden; background: var(--pos-bg); color: var(--pos-text); font-family: 'Inter', system-ui, -apple-system, sans-serif; } /* Arabic (RTL) uses the same self-hosted Droid Arabic Kufi as the ERP (@font-face in tailwind-input.css). */ [dir="rtl"] .pos-shell { font-family: 'Droid Arabic Kufi', 'Tajawal', system-ui, sans-serif; } .pos-main { flex: 1; display: flex; min-height: 0; } /* Page host — flex column so pages either fill it (register) or scroll inside it (home/receipts). */ .pos-main-body { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .pos-content { flex: 1; min-height: 0; padding: 1.25rem; overflow: auto; } /* ── Topbar ─────────────────────────────────────────────────────────────── */ .pos-topbar { height: 64px; flex-shrink: 0; background: var(--pos-panel); border-bottom: 1px solid var(--pos-border); display: flex; align-items: center; padding: 0 1rem; gap: 1rem; } .pos-topbar-brand { display: flex; align-items: center; gap: .75rem; font-weight: 600; font-size: 18px; color: var(--pos-text); } .pos-topbar-brand .pos-logo { width: 40px; height: 40px; border-radius: 8px; background: linear-gradient(135deg, var(--pos-accent), #8b5cf6); display: grid; place-items: center; color: white; font-weight: 700; } .pos-topbar-brand .pos-tenant-muted { color: var(--pos-text-muted); font-weight: 400; } .pos-topbar-actions { margin-inline-start: auto; display: flex; gap: .5rem; align-items: center; } .pos-shift-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .75rem; border-radius: 999px; background: var(--pos-success-tint); border: 1px solid color-mix(in srgb, var(--pos-success) 40%, transparent); color: var(--pos-success); font-size: 13px; font-weight: 500; } .pos-shift-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pos-success); animation: pos-pulse 2s infinite; } .pos-shift-pill.closed { background: var(--pos-danger-tint); border-color: color-mix(in srgb, var(--pos-danger) 35%, transparent); color: var(--pos-danger); } .pos-shift-pill.closed .dot { background: var(--pos-danger); animation: none; } @keyframes pos-pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } } .pos-user-chip { display: flex; align-items: center; gap: .5rem; padding: 0 .5rem; } .pos-user-chip .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--pos-accent); display: grid; place-items: center; font-weight: 600; color: white; font-size: 13px; } .pos-user-chip .who { font-size: 13px; line-height: 1.3; } .pos-user-chip .who .name { color: var(--pos-text); } .pos-user-chip .who .sub { color: var(--pos-text-muted); font-size: 11px; } /* ── Icon button (square 48px) ──────────────────────────────────────────── */ .pos-icon-btn { width: var(--pos-touch); height: var(--pos-touch); border-radius: var(--pos-radius); background: var(--pos-tile); border: 1px solid var(--pos-border); color: var(--pos-text); display: grid; place-items: center; cursor: pointer; transition: background .15s; } .pos-icon-btn:hover { background: var(--pos-tile-hover); } /* ── Buttons (touch-sized) ──────────────────────────────────────────────── */ .pos-btn { height: var(--pos-touch); min-width: var(--pos-touch); padding: 0 1.25rem; border-radius: var(--pos-radius); background: var(--pos-tile); border: 1px solid var(--pos-border); color: var(--pos-text); font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; transition: background .15s, transform .1s; cursor: pointer; font-family: inherit; } .pos-btn:hover { background: var(--pos-tile-hover); } .pos-btn:active { transform: scale(.97); } .pos-btn:disabled, .pos-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; } .pos-btn-accent { background: var(--pos-accent); border-color: var(--pos-accent); color: white; } .pos-btn-accent:hover { background: var(--pos-accent-hover); } .pos-btn-success { background: var(--pos-success); border-color: var(--pos-success); color: white; } /* re-assert the colored bg on hover so the generic .pos-btn:hover (tile) can't turn it gray/white */ .pos-btn-success:hover { background: var(--pos-success); border-color: var(--pos-success); color: white; filter: brightness(1.08); } .pos-btn-danger { background: var(--pos-danger); border-color: var(--pos-danger); color: white; } .pos-btn-danger:hover { background: var(--pos-danger); border-color: var(--pos-danger); color: white; filter: brightness(1.08); } .pos-btn-warning { background: var(--pos-warning); border-color: var(--pos-warning); color: var(--pos-on-warning); } .pos-btn-warning:hover { background: var(--pos-warning); border-color: var(--pos-warning); color: var(--pos-on-warning); filter: brightness(1.05); } .pos-btn-danger-soft { background: var(--pos-danger-tint); border-color: color-mix(in srgb, var(--pos-danger) 35%, transparent); color: var(--pos-danger-text); } .pos-btn-danger-soft:hover { background: var(--pos-danger-tint); border-color: var(--pos-danger); color: var(--pos-danger-text); filter: brightness(1.05); } .pos-btn-ghost { background: transparent; } .pos-btn-lg { height: 4rem; padding: 0 1.5rem; font-size: 17px; } .pos-btn-xl { height: 5rem; padding: 0 2rem; font-size: 19px; font-weight: 600; } .pos-btn-cta { height: 64px; font-size: 20px; font-weight: 700; } /* ── Nav rail (vertical icon strip) ────────────────────────────────────── */ /* The rail SCROLLS. Items are aspect-ratio:1 so they never shrink, and the rail had overflow:visible inside .pos-shell{overflow:hidden} — so once a tenant's menu outgrew the screen the surplus items were CLIPPED AND UNREACHABLE, with no scrollbar to reveal them. Measured on AlrihlaPOS (11 rows): 1080px screen fits all; 800px hides 2; 768px hides 3 — including the bottom-pinned Settings. It looked fine on a desktop and failed on the till. min-height:0 is required: without it a flex child refuses to shrink below its content and overflow-y never engages. */ .pos-navrail { width: 88px; flex-shrink: 0; background: var(--pos-panel); border-inline-end: 1px solid var(--pos-border); display: flex; flex-direction: column; padding: .75rem .5rem; gap: .5rem; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; } /* The rail is 88px wide — the 12px POS scrollbar would eat an eighth of every icon. Keep the scroll, slim the furniture. */ .pos-navrail::-webkit-scrollbar { width: 4px; } .pos-navrail-item { width: 100%; aspect-ratio: 1; border-radius: var(--pos-radius); background: transparent; border: none; color: var(--pos-text-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; font-size: 11px; cursor: pointer; transition: background .15s, color .15s; font-family: inherit; } .pos-navrail-item:hover { background: var(--pos-tile); color: var(--pos-text); } .pos-navrail-item.active { background: var(--pos-accent); color: white; } .pos-navrail-item svg { width: 28px; height: 28px; } .pos-navrail-item.pinned-bottom { margin-top: auto; } /* ── Cards + tiles ──────────────────────────────────────────────────────── */ .pos-card { background: var(--pos-panel); border: 1px solid var(--pos-border); border-radius: var(--pos-radius); padding: 1.25rem; } .pos-tile { background: var(--pos-card); border: 1px solid var(--pos-border); border-radius: var(--pos-radius); padding: 1rem; min-height: 96px; display: flex; flex-direction: column; cursor: pointer; transition: all .15s; } .pos-tile:hover { background: var(--pos-card-hover); border-color: var(--pos-accent); } .pos-tile.selected { background: var(--pos-accent-tint); border-color: var(--pos-accent); } .pos-section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--pos-text-muted); font-weight: 600; margin-bottom: .75rem; } .pos-field-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--pos-text-muted); margin-bottom: .35rem; } /* ── KPI card (used by PosHome) ────────────────────────────────────────── */ .pos-kpi { background: var(--pos-card); border: 1px solid var(--pos-border); border-radius: var(--pos-radius); padding: 1rem; box-shadow: var(--pos-shadow-sm); } .pos-kpi .label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--pos-text-muted); } .pos-kpi .value { font-size: 26px; font-weight: 700; margin-top: .25rem; } .pos-kpi .delta { font-size: 12px; color: var(--pos-success); margin-top: .25rem; } .pos-kpi .delta.muted { color: var(--pos-text-muted); } .pos-kpi .delta.warn { color: var(--pos-warning); } /* ── Quick-action tile (used by PosHome) ───────────────────────────────── */ .pos-qa-tile { background: var(--pos-card); border: 1px solid var(--pos-border); border-radius: var(--pos-radius); padding: 1.25rem; text-align: center; cursor: pointer; transition: all .15s; min-height: 120px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .5rem; color: var(--pos-text); } .pos-qa-tile:hover { border-color: var(--pos-accent); background: var(--pos-card-hover); } .pos-qa-tile svg { width: 36px; height: 36px; color: var(--pos-accent); } .pos-qa-tile span { font-size: 14px; font-weight: 500; } .pos-qa-tile.disabled { opacity: .45; cursor: not-allowed; } .pos-qa-tile.disabled:hover { background: var(--pos-tile); border-color: var(--pos-border); } /* ── Receipt row (used by PosHome side panel) ──────────────────────────── */ .pos-receipt-row { display: flex; justify-content: space-between; padding: .75rem 0; border-bottom: 1px solid var(--pos-border); font-size: 14px; } .pos-receipt-row:last-child { border-bottom: none; } .pos-receipt-row .num { color: var(--pos-text-muted); font-family: monospace; } .pos-receipt-row .total { font-weight: 600; } /* ── Register (mockup 07) ──────────────────────────────────────────────── */ .pos-reg-root { display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--pos-bg); } .pos-reg-statusbar { display: flex; align-items: center; gap: .75rem; padding: .4rem 1rem; background: var(--pos-panel); border-bottom: 1px solid var(--pos-border); flex-shrink: 0; font-size: 12px; color: var(--pos-text-muted); } .pos-reg-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 200px 1fr 384px; } /* ── Terminal gate panels (P1-T6 — pairing / held-by-other) ──────────────── */ .pos-gate { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 2rem; } .pos-gate-card { width: 100%; max-width: 420px; text-align: center; } .pos-gate-icon { font-size: 40px; line-height: 1; margin-bottom: .5rem; } .pos-gate-title { font-size: 19px; font-weight: 700; margin-bottom: .5rem; color: var(--pos-text); } .pos-gate-sub { font-size: 14px; color: var(--pos-text-muted); line-height: 1.6; margin-bottom: 1rem; } .pos-gate-code { width: 100%; height: 3.25rem; font-size: 28px; font-weight: 700; letter-spacing: .5rem; text-align: center; font-family: monospace; background: var(--pos-bg); color: var(--pos-text); border: 1px solid var(--pos-border); border-radius: var(--pos-radius); } .pos-gate-code:focus { outline: none; border-color: var(--pos-accent); } .pos-gate-nopriv { font-size: 13px; color: var(--pos-text-muted); padding: .75rem; background: var(--pos-tile); border-radius: var(--pos-radius); } /* category rail */ .pos-cat-rail { background: var(--pos-panel); border-inline-end: 1px solid var(--pos-border); padding: .6rem .55rem; overflow-y: auto; display: flex; flex-direction: column; gap: .45rem; } .pos-cat-rail-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--pos-text-muted); font-weight: 600; padding: .15rem .25rem .25rem; } .pos-cat { padding: .55rem .65rem; background: var(--pos-tile); border: 1px solid var(--pos-border); border-radius: var(--pos-radius); cursor: pointer; text-align: start; transition: all .15s; display: flex; flex-direction: row; align-items: center; gap: .6rem; color: var(--pos-text); font-family: inherit; } .pos-cat:hover { background: var(--pos-tile-hover); } .pos-cat.active { background: var(--pos-accent); border-color: var(--pos-accent); color: white; } .pos-cat .cat-thumb { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; background: var(--pos-thumb-2); display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--pos-thumb-fg); } .pos-cat.active .cat-thumb { background: rgba(255,255,255,.2); } .pos-cat .cat-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; line-height: 1.2; } /* catalog column */ .pos-catalog { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .pos-scan-row { padding: .6rem 1rem; border-bottom: 1px solid var(--pos-border); flex-shrink: 0; } .pos-scan-box { background: var(--pos-card); border: 2px solid var(--pos-accent); border-radius: var(--pos-radius); padding: 0 1rem; height: 46px; display: flex; align-items: center; gap: .75rem; box-shadow: 0 0 0 4px var(--pos-accent-tint); } .pos-scan-box input { background: transparent; border: none; outline: none; color: var(--pos-text); font-size: 16px; flex: 1; font-family: inherit; } .pos-scan-box .hint { font-size: 11px; color: var(--pos-text-muted); white-space: nowrap; } .pos-item-grid { padding: 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: .7rem; overflow-y: auto; align-content: start; flex: 1; min-height: 0; } /* horizontal product card — image + text column side by side */ .pos-item-tile { background: var(--pos-card); border: 1px solid var(--pos-border); border-radius: var(--pos-radius); padding: .55rem .7rem; cursor: pointer; transition: all .1s; display: flex; align-items: center; gap: .7rem; min-height: 72px; text-align: start; color: var(--pos-text); font-family: inherit; } .pos-item-tile:hover { background: var(--pos-card-hover); border-color: var(--pos-accent); transform: translateY(-1px); } .pos-item-tile:active { transform: scale(.97); } .pos-item-tile .thumb { width: 56px; height: 56px; flex: 0 0 auto; background: var(--pos-thumb); border-radius: 11px; display: grid; place-items: center; font-size: 24px; font-weight: 700; color: var(--pos-thumb-fg); overflow: hidden; } .pos-item-tile .thumb img { width: 100%; height: 100%; object-fit: cover; } .pos-item-tile .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; } .pos-item-tile .name { font-size: 13px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .pos-item-tile .meta { font-size: 11px; color: var(--pos-text-muted); font-family: ui-monospace, monospace; } .pos-item-tile .price { font-size: 14px; font-weight: 800; color: var(--pos-accent-text); margin-top: .1rem; font-variant-numeric: tabular-nums; } .pos-catalog-footer { display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-top: 1px solid var(--pos-border); flex-shrink: 0; } /* cart column */ .pos-cart { background: var(--pos-panel); border-inline-start: 1px solid var(--pos-border); display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; } .pos-cart-header { padding: .8rem 1.1rem; border-bottom: 1px solid var(--pos-border); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } .pos-cart-header .title { font-weight: 600; font-size: 16px; } .pos-cart-header .sub { font-size: 12px; color: var(--pos-text-muted); } .pos-cart-lines { flex: 1; min-height: 0; overflow-y: auto; } .pos-cart-empty { padding: 1rem 1.1rem; font-size: 13px; color: var(--pos-text-muted); } .pos-cart-line { padding: .6rem 1.1rem; display: grid; grid-template-columns: 40px 1fr auto; gap: .6rem; border-bottom: 1px solid var(--pos-border); align-items: center; } .pos-cart-line .thumb { width: 40px; height: 40px; border-radius: 6px; background: var(--pos-thumb); display: grid; place-items: center; font-size: 15px; font-weight: 700; color: var(--pos-thumb-fg); } .pos-cart-line .ci-name { font-size: 13.5px; font-weight: 500; } .pos-cart-line .ci-meta { font-size: 11px; color: var(--pos-text-muted); margin-top: 1px; } .pos-cart-line .ci-right { text-align: end; } .pos-cart-line .ci-price { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } .pos-qty-row { display: flex; align-items: center; gap: .3rem; margin-top: .25rem; justify-content: flex-end; } .pos-qty-btn { width: 28px; height: 28px; border-radius: 6px; background: var(--pos-tile); border: 1px solid var(--pos-border); color: var(--pos-text); font-size: 15px; cursor: pointer; font-family: inherit; } .pos-qty-btn.danger { background: var(--pos-danger-tint); border-color: color-mix(in srgb, var(--pos-danger) 30%, transparent); color: var(--pos-danger); } .pos-qty-val { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; } /* totals + actions + pay (pinned at the bottom of the cart) */ .pos-totals-region { padding: .7rem 1.1rem; border-top: 1px solid var(--pos-border); background: var(--pos-bg); flex-shrink: 0; } .pos-trow { display: flex; justify-content: space-between; padding: .2rem 0; font-size: 13px; } .pos-trow.grand { font-size: 22px; font-weight: 700; border-top: 1px solid var(--pos-border); padding-top: .5rem; margin-top: .25rem; } .pos-cart-actions { padding: .7rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; flex-shrink: 0; } .pos-cart-actions .pos-btn { font-size: 13px; height: 42px; padding: 0 .25rem; } .pos-pay-btn { margin: 0 .7rem .7rem; height: 64px; font-size: 20px; font-weight: 700; flex-shrink: 0; } /* ── Held sales (mockup 09) ────────────────────────────────────────────── */ .pos-held-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; } .pos-held-card { background: var(--pos-panel); border: 1px solid var(--pos-border); border-radius: var(--pos-radius); padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; transition: all .15s; } .pos-held-card:hover { border-color: var(--pos-accent); transform: translateY(-2px); } .pos-held-card .head { display: flex; justify-content: space-between; align-items: baseline; } .pos-held-card .ref { font-family: monospace; font-size: 12px; color: var(--pos-text-muted); } .pos-held-card .age { font-size: 11px; padding: .15rem .5rem; border-radius: 999px; background: var(--pos-tile); color: var(--pos-text-muted); white-space: nowrap; } .pos-held-card .age.warn { background: var(--pos-warning-tint); color: var(--pos-warning); } .pos-held-card .customer { font-size: 16px; font-weight: 600; } .pos-held-card .meta { font-size: 12px; color: var(--pos-text-muted); } .pos-held-card .items { font-size: 13px; line-height: 1.5; max-height: 132px; overflow: hidden; background: var(--pos-bg); padding: .5rem .75rem; border-radius: 6px; } .pos-held-card .items .row { display: flex; justify-content: space-between; padding: .15rem 0; gap: .5rem; } .pos-held-card .items .row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pos-held-card .items .more { color: var(--pos-text-muted); padding-top: .25rem; } .pos-held-card .total-row { display: flex; justify-content: space-between; font-size: 16px; font-weight: 600; padding-top: .5rem; border-top: 1px solid var(--pos-border); } .pos-held-card .actions { display: grid; grid-template-columns: 1fr auto; gap: .5rem; } /* ── Returns (mockup 16) ───────────────────────────────────────────────── */ .pos-ret-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 400px; } .pos-ret-main { padding: 1.25rem; overflow: auto; min-width: 0; } .pos-ret-side { background: var(--pos-panel); border-inline-start: 1px solid var(--pos-border); display: flex; flex-direction: column; overflow-y: auto; } .pos-find-bar { display: flex; gap: .5rem; margin-bottom: 1.25rem; } .pos-find-box { flex: 1; background: var(--pos-panel); border: 1px solid var(--pos-border); border-radius: var(--pos-radius); padding: 0 1rem; height: 52px; display: flex; align-items: center; gap: .75rem; } .pos-find-box input { background: transparent; border: none; outline: none; color: var(--pos-text); font-size: 16px; flex: 1; font-family: inherit; } .pos-orig-invoice { background: var(--pos-panel); border: 1px solid var(--pos-border); border-radius: var(--pos-radius); overflow: hidden; } .pos-orig-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--pos-border); display: flex; justify-content: space-between; align-items: center; background: var(--pos-bg); gap: 1rem; } .pos-orig-head .inv { font-size: 18px; font-weight: 700; } .pos-orig-head .meta { font-size: 12px; color: var(--pos-text-muted); margin-top: .15rem; } .pos-orig-head .badge { padding: .2rem .65rem; border-radius: 999px; font-size: 11px; background: var(--pos-success-tint); color: var(--pos-success); white-space: nowrap; } .pos-ret-line { padding: .85rem 1.25rem; display: grid; grid-template-columns: 1fr auto auto auto; gap: .85rem; align-items: center; border-bottom: 1px solid var(--pos-border); } .pos-ret-line:last-child { border-bottom: none; } .pos-ret-line.selected { background: var(--pos-warning-tint); } .pos-ret-line.disabled { opacity: .4; } .pos-ret-line .nm { font-weight: 500; font-size: 14px; } .pos-ret-line .sub { font-size: 11px; color: var(--pos-text-muted); margin-top: .15rem; } .pos-ret-line .sold { text-align: center; font-size: 12px; color: var(--pos-text-muted); } .pos-ret-line .amt { font-weight: 700; min-width: 80px; text-align: end; font-variant-numeric: tabular-nums; } .pos-ret-line .qty-in { width: 64px; background: var(--pos-bg); border: 1px solid var(--pos-border); border-radius: 6px; padding: .4rem; color: var(--pos-text); text-align: end; font-family: inherit; } .pos-side-section { padding: 1.25rem; border-bottom: 1px solid var(--pos-border); } .pos-side-section h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--pos-text-muted); margin: 0 0 .75rem; font-weight: 600; } .pos-input, .pos-select { background: var(--pos-bg); border: 1px solid var(--pos-border); border-radius: 8px; padding: .65rem .75rem; color: var(--pos-text); width: 100%; font-size: 14px; font-family: inherit; } .pos-summary-row { display: flex; justify-content: space-between; padding: .35rem 0; font-size: 14px; } .pos-summary-row.grand { font-size: 24px; font-weight: 700; color: var(--pos-warning); border-top: 2px solid var(--pos-border); padding-top: .75rem; margin-top: .5rem; } .pos-tender-opt { padding: .75rem; background: var(--pos-tile); border: 2px solid var(--pos-border); border-radius: 8px; display: flex; align-items: center; gap: .5rem; font-size: 14px; } .pos-tender-opt.active { border-color: var(--pos-accent); background: var(--pos-accent-tint); } .pos-tender-opt.disabled { opacity: .45; } .pos-refund-bar { padding: 1.25rem; margin-top: auto; } .pos-refund-bar button { width: 100%; height: 64px; font-size: 20px; font-weight: 700; } /* ── Receipt detail drawer (mockup 06) ─────────────────────────────────── */ .pos-drawer-backdrop { position: fixed; inset: 0; background: var(--pos-backdrop-soft); backdrop-filter: blur(2px); z-index: 30; } .pos-drawer { position: fixed; top: 0; inset-inline-end: 0; bottom: 0; width: min(560px, 95vw); background: var(--pos-panel); border-inline-start: 1px solid var(--pos-border); box-shadow: -20px 0 40px var(--pos-shadow-color); display: flex; flex-direction: column; z-index: 31; color: var(--pos-text); } .pos-drawer-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--pos-border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .pos-drawer-header .inv-no { font-size: 22px; font-weight: 700; } .pos-drawer-header .inv-meta { color: var(--pos-text-muted); font-size: 13px; margin-top: .15rem; } .pos-drawer-body { flex: 1; overflow: auto; padding: 1.25rem; } .pos-drawer-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--pos-border); display: flex; gap: .5rem; flex-wrap: wrap; flex-shrink: 0; } .pos-rd-line { display: grid; grid-template-columns: 1fr auto auto; gap: .75rem; padding: .6rem 0; border-bottom: 1px dashed var(--pos-border); align-items: baseline; font-size: 14px; } .pos-rd-line:last-child { border-bottom: none; } .pos-rd-line .qty { font-variant-numeric: tabular-nums; color: var(--pos-text-muted); } .pos-rd-line .amount { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 90px; text-align: end; } /* ── Payment dialog (mockup 08) ────────────────────────────────────────── */ .pos-modal-backdrop2 { position: fixed; inset: 0; background: var(--pos-backdrop); backdrop-filter: blur(8px); display: grid; place-items: center; z-index: 50; } .pos-modal2 { background: var(--pos-panel); border: 1px solid var(--pos-border); border-radius: var(--pos-radius); width: 900px; max-width: 95vw; max-height: 96vh; display: flex; flex-direction: column; box-shadow: 0 25px 50px var(--pos-shadow-color); } .pos-modal2-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--pos-border); display: flex; align-items: center; justify-content: space-between; } .pos-modal2-title { font-size: 18px; font-weight: 600; } .pos-modal2-body { padding: 1rem 1.1rem; overflow: auto; } .pos-modal2-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--pos-border); } .pos-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; } .pos-key { height: 3.1rem; border-radius: var(--pos-radius); background: var(--pos-tile); border: 1px solid var(--pos-border); color: var(--pos-text); font-size: 20px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background .1s; } .pos-key:hover { background: var(--pos-tile-hover); } .pos-key:active { background: var(--pos-accent); color: white; } .pos-key.danger { background: var(--pos-danger-tint); color: var(--pos-danger); border-color: color-mix(in srgb, var(--pos-danger) 30%, transparent); } .pos-pay-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1rem; } .pos-tender-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: .5rem; margin-bottom: 1rem; } .pos-tender-tab { padding: .75rem .4rem; background: var(--pos-tile); border: 2px solid var(--pos-border); border-radius: var(--pos-radius); cursor: pointer; text-align: center; transition: all .15s; color: var(--pos-text); font-family: inherit; } .pos-tender-tab:hover { background: var(--pos-tile-hover); } .pos-tender-tab.active { background: var(--pos-accent); border-color: var(--pos-accent); color: white; } .pos-tender-tab .icon { font-size: 22px; display: block; margin-bottom: .2rem; } .pos-tender-tab .lbl { font-size: 12.5px; font-weight: 500; line-height: 1.2; } .pos-amount-display { background: var(--pos-bg); border: 1px solid var(--pos-border); border-radius: var(--pos-radius); padding: .6rem 1rem; margin-bottom: .5rem; display: flex; justify-content: space-between; align-items: baseline; } .pos-amount-display .label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--pos-text-muted); } .pos-amount-display .value { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; } .pos-quick-amts { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: .75rem; } .pos-quick-amt { padding: .55rem; background: var(--pos-tile); border: 1px solid var(--pos-border); border-radius: 8px; font-size: 14px; cursor: pointer; color: var(--pos-text); font-family: inherit; } .pos-quick-amt:hover { background: var(--pos-tile-hover); } .pos-balance-row { display: flex; justify-content: space-between; padding: .4rem 0; font-size: 15px; border-bottom: 1px dashed var(--pos-border); } .pos-balance-row:last-of-type { border-bottom: none; } .pos-balance-row.due { font-size: 22px; font-weight: 700; padding: .75rem 0 .5rem; border-bottom: 2px solid var(--pos-border); } .pos-balance-row.change { font-size: 19px; font-weight: 700; color: var(--pos-success); } .pos-balance-row.remaining { color: var(--pos-warning); font-weight: 600; } .pos-tender-item { display: flex; justify-content: space-between; align-items: center; padding: .5rem .75rem; background: var(--pos-tile); border-radius: 8px; margin-bottom: .25rem; font-size: 14px; } /* ── Loyalty + gift-card redeem (Phase D #3 PART B) ───────────────────── */ .pos-redeem { margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed var(--pos-border); display: flex; flex-direction: column; gap: .5rem; } .pos-redeem-row { display: flex; align-items: center; gap: .5rem; } .pos-redeem-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .pos-redeem-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--pos-text-muted); } .pos-redeem-bal { font-size: 14px; font-weight: 600; color: var(--pos-text); } .pos-redeem-btn { white-space: nowrap; height: 40px; padding: 0 .85rem; font-size: 13px; font-weight: 600; } .pos-redeem-gc .pos-redeem-input { flex: 1; min-width: 0; height: 40px; padding: 0 .75rem; font-size: 14px; background: var(--pos-tile); color: var(--pos-text); border: 1px solid var(--pos-border); border-radius: 8px; font-family: inherit; } .pos-redeem-gc .pos-redeem-input:focus { outline: none; border-color: var(--pos-accent); box-shadow: 0 0 0 3px var(--pos-accent-ring, rgba(99,102,241,.25)); } .pos-redeem-gc-result { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .75rem; border-radius: 8px; font-size: 13px; font-weight: 600; background: var(--pos-tile); border: 1px solid var(--pos-border); color: var(--pos-text); } .pos-redeem-gc-result.ok { border-color: var(--pos-success, #10b981); } .pos-redeem-gc-result.bad { border-color: var(--pos-danger, #ef4444); color: var(--pos-text-muted); } .pos-redeem-gc-status { text-transform: uppercase; font-size: 11px; color: var(--pos-danger, #ef4444); } [dir="rtl"] .pos-redeem-input { text-align: right; } /* ── Mada card terminal (Phase D #5) ─────────────────────────────────── */ .pos-mada { margin-top: .75rem; } .pos-mada-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem; } .pos-mada-spin { width: 16px; height: 16px; flex: 0 0 auto; border-radius: 50%; border: 2px solid var(--pos-border); border-top-color: var(--pos-accent); animation: pos-mada-spin .7s linear infinite; } @keyframes pos-mada-spin { to { transform: rotate(360deg); } } .pos-mada-unknown { display: flex; flex-direction: column; gap: .5rem; padding: .6rem .75rem; border-radius: 8px; border: 1px solid var(--pos-danger, #ef4444); background: var(--pos-danger-bg, rgba(239,68,68,.08)); } .pos-mada-unknown-lbl { font-size: 13px; font-weight: 700; color: var(--pos-danger, #ef4444); } .pos-mada-unknown-actions { display: flex; gap: .5rem; } /* ── Gift-card sale + balance inquiry (Phase D #3 PART C) ─────────────── */ /* Sits under the full-width PAY button — override the inherited 3-col cart-actions grid so the (up to) two buttons fill the row edge-to-edge, matching the PAY button width above them. */ .pos-gc-actions { margin-top: .5rem; display: flex; gap: .5rem; } .pos-gc-actions .pos-btn { flex: 1; } .pos-gc-dialog { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: .35rem; max-height: 94vh; overflow-y: auto; } .pos-gc-dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .25rem; } .pos-gc-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--pos-text-muted); margin-top: .25rem; } .pos-gc-input { width: 100%; height: 42px; padding: 0 .75rem; font-size: 15px; font-family: inherit; background: var(--pos-tile); color: var(--pos-text); border: 1px solid var(--pos-border); border-radius: 8px; } .pos-gc-input:focus { outline: none; border-color: var(--pos-accent); box-shadow: 0 0 0 3px var(--pos-accent-ring, rgba(99,102,241,.25)); } .pos-gc-cardrow { display: flex; gap: .5rem; align-items: center; } .pos-gc-cardrow .pos-gc-input { flex: 1; min-width: 0; } .pos-gc-cardrow .pos-btn { white-space: nowrap; height: 42px; } .pos-gc-hint { font-size: 11px; color: var(--pos-text-muted); margin-top: .25rem; } .pos-gc-result { margin-top: .5rem; padding: .6rem .75rem; border-radius: 8px; font-size: 14px; line-height: 1.6; background: var(--pos-tile); border: 1px solid var(--pos-border); color: var(--pos-text); } .pos-gc-result.ok { border-color: var(--pos-success, #10b981); } .pos-gc-result.bad { border-color: var(--pos-danger, #ef4444); } [dir="rtl"] .pos-gc-input { text-align: right; } /* ── Language toggle (topbar) — modern two-segment pill ────────────────── */ .pos-lang-toggle { display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 3px; background: var(--pos-tile); border: 1px solid var(--pos-border); border-radius: 999px; } .pos-lang-toggle button { border: none; background: transparent; color: var(--pos-text-muted); border-radius: 999px; height: 100%; min-width: 42px; padding: 0 .9rem; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background .15s, color .15s; } .pos-lang-toggle button:hover { color: var(--pos-text); } .pos-lang-toggle button.active { background: var(--pos-accent); color: #fff; } .pos-lang-toggle button.ar { font-family: 'Droid Arabic Kufi', 'Tajawal', system-ui, sans-serif; } /* ── Settings (mockup 14) ──────────────────────────────────────────────── */ .pos-settings-shell { display: grid; grid-template-columns: 240px 1fr; max-width: 1280px; margin: 0 auto; gap: 1.5rem; } .pos-settings-nav { display: flex; flex-direction: column; gap: .25rem; align-self: start; position: sticky; top: 0; background: var(--pos-panel); border: 1px solid var(--pos-border); border-radius: var(--pos-radius); padding: .5rem; box-shadow: var(--pos-shadow-sm); } .pos-settings-nav .nav-section { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--pos-text-muted); padding: .75rem .75rem .25rem; font-weight: 600; } .pos-settings-nav button { display: flex; align-items: center; gap: .5rem; padding: .65rem .75rem; border-radius: var(--pos-radius); background: transparent; border: none; color: var(--pos-text); font-size: 14px; cursor: pointer; text-align: start; width: 100%; font-family: inherit; } .pos-settings-nav button:hover { background: var(--pos-tile); } .pos-settings-nav button.active { background: var(--pos-accent); color: white; } .pos-card-section { background: var(--pos-panel); border: 1px solid var(--pos-border); border-radius: var(--pos-radius); margin-bottom: 1rem; } .pos-card-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--pos-border); display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .pos-card-head h2 { margin: 0; font-size: 16px; font-weight: 600; } .pos-card-body { padding: 1.25rem; } .pos-status-pill { font-size: 12px; padding: .15rem .65rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; } .pos-status-pill.green { background: var(--pos-success-tint); color: var(--pos-success); } .pos-status-pill.red { background: var(--pos-danger-tint); color: var(--pos-danger); } .pos-status-pill.amber { background: var(--pos-warning-tint); color: var(--pos-warning); } .pos-row-form { display: grid; grid-template-columns: 200px 1fr; gap: 1rem; align-items: center; padding: .5rem 0; } .pos-row-form label { font-size: 13px; color: var(--pos-text-muted); } .pos-row-form .val { font-size: 14px; } .pos-row-form .val.mono { font-family: monospace; word-break: break-all; } .pos-bridge-offline { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1rem; background: var(--pos-warning-tint); border: 1px solid color-mix(in srgb, var(--pos-warning) 30%, transparent); border-radius: var(--pos-radius); align-items: center; } /* ── Customer Lookup drawer (mockup 20) — Phase D ──────────────────────── */ .pos-cust-pill { display: inline-flex; align-items: center; gap: .5rem; height: 32px; padding: 0 .85rem; background: var(--pos-tile); border: 1px solid var(--pos-border); border-radius: 999px; font-size: 13px; cursor: pointer; color: var(--pos-text); font-family: inherit; max-width: 100%; } .pos-cust-pill:hover { background: var(--pos-tile-hover); border-color: var(--pos-accent); } .pos-cust-pill .av { width: 22px; height: 22px; border-radius: 50%; background: var(--pos-accent); color: #fff; font-weight: 700; font-size: 11px; display: grid; place-items: center; flex: 0 0 auto; } .pos-cust-pill .av.cash { background: var(--pos-text-muted); } .pos-cust-pill .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .pos-cust-pill .close { margin-inline-start: .25rem; background: transparent; border: none; color: var(--pos-text-muted); cursor: pointer; padding: 0; line-height: 1; font-size: 16px; } .pos-cust-pill .close:hover { color: var(--pos-danger); } .pos-drawer { position: fixed; top: 0; inset-inline-end: 0; bottom: 0; width: min(520px, 96vw); background: var(--pos-panel); border-inline-start: 1px solid var(--pos-border); box-shadow: -20px 0 40px var(--pos-shadow-color); display: flex; flex-direction: column; z-index: 50; } .pos-drawer-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--pos-border); display: flex; justify-content: space-between; align-items: center; } .pos-drawer-header .title { font-size: 18px; font-weight: 600; } .pos-drawer-body { flex: 1; overflow: auto; padding: 1.25rem; } .pos-drawer-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--pos-border); display: flex; gap: .5rem; } .pos-drawer-footer button { flex: 1; height: 52px; font-size: 15px; font-weight: 600; } .pos-cust-search { background: var(--pos-bg); border: 1px solid var(--pos-border); border-radius: var(--pos-radius); padding: 0 1rem; height: 52px; display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; } .pos-cust-search input { background: transparent; border: none; outline: none; color: var(--pos-text); font-size: 16px; flex: 1; min-width: 0; font-family: inherit; } .pos-cust-search:focus-within { border-color: var(--pos-accent); } .pos-cust-divider { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--pos-text-muted); margin: 1.5rem 0 .75rem; font-weight: 600; } .pos-cust-divider:first-child { margin-top: 0; } .pos-cust-card { padding: 1rem; background: var(--pos-bg); border: 1px solid var(--pos-border); border-radius: var(--pos-radius); margin-bottom: .5rem; display: grid; grid-template-columns: 48px 1fr auto; gap: .85rem; align-items: center; cursor: pointer; transition: border-color .15s, background .15s; text-align: start; width: 100%; color: inherit; font-family: inherit; } .pos-cust-card:hover { border-color: var(--pos-accent); } .pos-cust-card.selected { border-color: var(--pos-accent); background: var(--pos-accent-tint); } .pos-cust-card .av { width: 48px; height: 48px; border-radius: 50%; background: var(--pos-accent); display: grid; place-items: center; font-weight: 700; font-size: 18px; color: #fff; } .pos-cust-card .av.b2b { background: var(--pos-info, #3b82f6); } .pos-cust-card .nm { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .pos-cust-card .meta { font-size: 12px; color: var(--pos-text-muted); margin-top: .15rem; } .pos-cust-card .right { text-align: end; font-size: 12px; color: var(--pos-text-muted); } .pos-cust-tier { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; } .pos-cust-tier.b2b { background: var(--pos-info-tint); color: var(--pos-info-text); } .pos-cust-tier.walk { background: color-mix(in srgb, var(--pos-text-muted) 18%, transparent); color: var(--pos-thumb-fg); } .pos-cust-empty { text-align: center; color: var(--pos-text-muted); padding: 2rem 1rem; font-size: 14px; } /* ── Hardware Bridge (mockup 14) — Phase D ─────────────────────────────── */ .pos-bridge-banner { display:grid; grid-template-columns:auto 1fr auto; gap:1rem; padding:1rem; border-radius:var(--pos-radius); align-items:center; margin-bottom:1rem; border:1px solid; } .pos-bridge-banner.green { background:var(--pos-success-tint); border-color:color-mix(in srgb, var(--pos-success) 30%, transparent); } .pos-bridge-banner.amber { background:var(--pos-warning-tint); border-color:color-mix(in srgb, var(--pos-warning) 30%, transparent); } .pos-bridge-banner.red { background:var(--pos-danger-tint); border-color:color-mix(in srgb, var(--pos-danger) 30%, transparent); } .pos-bridge-banner .pulse { width:12px; height:12px; border-radius:50%; } .pos-bridge-banner.green .pulse { background:var(--pos-success); animation:pulse 2s infinite; } .pos-bridge-banner.amber .pulse { background:var(--pos-warning); animation:pulse 1s infinite; } .pos-bridge-banner.red .pulse { background:var(--pos-danger); } .pos-bridge-banner .info strong { display:block; font-size:15px; } .pos-bridge-banner .info .meta { font-size:12px; color:var(--pos-text-muted); margin-top:.25rem; } @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } } .pos-bridge-toggle { width:44px; height:24px; background:var(--pos-border); border-radius:999px; position:relative; cursor:pointer; transition:background .15s; flex:0 0 auto; } .pos-bridge-toggle::after { content:""; width:18px; height:18px; border-radius:50%; background:#fff; position:absolute; top:3px; left:3px; transition:left .2s; } .pos-bridge-toggle.on { background:var(--pos-success); } .pos-bridge-toggle.on::after { left:23px; } [dir="rtl"] .pos-bridge-toggle::after { left:auto; right:3px; transition:right .2s; } [dir="rtl"] .pos-bridge-toggle.on::after { right:23px; left:auto; } .pos-bridge-hw-list { display:flex; flex-direction:column; gap:.5rem; } .pos-bridge-hw { padding:.75rem; background:var(--pos-tile); border:1px solid var(--pos-border); border-radius:8px; display:grid; grid-template-columns:28px 1fr auto auto; gap:.75rem; align-items:center; font-size:14px; } .pos-bridge-hw.offline { opacity:.55; } .pos-bridge-hw .icon { font-size:22px; } .pos-bridge-hw .meta { font-size:11px; color:var(--pos-text-muted); margin-top:.15rem; } .pos-bridge-log { background:var(--pos-bg); border:1px solid var(--pos-border); border-radius:8px; padding:.75rem; font-family:monospace; font-size:12px; color:var(--pos-text-muted); margin-top:.75rem; max-height:160px; overflow-y:auto; line-height:1.7; } .pos-bridge-log .ok { color:var(--pos-success); } .pos-bridge-log .err { color:var(--pos-danger); } .pos-bridge-log .info { color:var(--pos-text-muted); } /* ── Scrollbar tweak (POS pages only — scoped via .pos-shell ancestor) ── */ .pos-shell ::-webkit-scrollbar { width: 10px; height: 10px; } .pos-shell ::-webkit-scrollbar-thumb { background: var(--pos-border-strong); border-radius: 5px; } .pos-shell ::-webkit-scrollbar-thumb:hover { background: var(--pos-text-faint); } .pos-shell ::-webkit-scrollbar-track { background: var(--pos-bg); } /* ── B2B standard tax-invoice notice (payment dialog) — Phase D ────────── */ .pos-b2b-notice { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; padding: .6rem .85rem; background: var(--pos-success-tint); border: 1px solid color-mix(in srgb, var(--pos-success) 40%, transparent); border-radius: var(--pos-radius); color: var(--pos-success); font-size: 13px; font-weight: 600; line-height: 1.4; } /* ── Customer Quick-Create form (mockup 20 bottom half) — Phase D ──────── */ .pos-cust-form { margin: .25rem 0 .75rem; padding: .75rem; background: var(--pos-tile); border: 1px dashed var(--pos-border); border-radius: var(--pos-radius); } .pos-cust-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .75rem; } .pos-cust-form-cell { display: flex; flex-direction: column; gap: .25rem; } .pos-cust-form-cell-full { grid-column: 1 / -1; } .pos-cust-form-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--pos-text-muted); font-weight: 600; } .pos-cust-form-input { width: 100%; padding: .5rem .65rem; background: var(--pos-bg); border: 1px solid var(--pos-border); border-radius: 6px; color: var(--pos-text); font-size: 13px; font-family: inherit; } .pos-cust-form-input:focus { outline: none; border-color: var(--pos-accent); box-shadow: 0 0 0 3px var(--pos-accent-tint); } .pos-cust-form-input::placeholder { color: var(--pos-text-muted); opacity: .6; } /* Phone (tel) fields: in RTL the email field aligns to the right by inheritance, but tel inputs keep LTR digit order — right-align them too so they match the email field. */ [dir="rtl"] .pos-cust-form-input[type="tel"], [dir="rtl"] .pos-receipt-input[type="tel"], [dir="rtl"] input[type="tel"].pos-input { text-align: right; } .pos-cust-form-error { margin-top: .5rem; padding: .5rem .65rem; font-size: 12px; background: var(--pos-danger-tint); color: var(--pos-danger); border: 1px solid color-mix(in srgb, var(--pos-danger) 35%, transparent); border-radius: 6px; } /* ── Receipt destination chooser (mockup 08 bottom right) — Phase D ─────── */ .pos-receipt-opts { margin-top:1.25rem; } .pos-receipt-opts-header { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--pos-text-muted); margin-bottom:.5rem; font-weight:600; } .pos-receipt-opts-row { display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; } .pos-receipt-opt { padding:.65rem .75rem; background:var(--pos-tile); border:1px solid var(--pos-border); border-radius:8px; display:flex; align-items:center; gap:.5rem; cursor:pointer; font-size:13px; transition:background .15s, border-color .15s, opacity .15s; user-select:none; } .pos-receipt-opt input[type=checkbox] { accent-color:var(--pos-accent); width:16px; height:16px; flex-shrink:0; } .pos-receipt-opt:hover { background:var(--pos-tile-hover); } .pos-receipt-opt.active { border-color:var(--pos-accent); background:var(--pos-accent-tint); } .pos-receipt-opt.disabled { opacity:.45; cursor:not-allowed; } .pos-receipt-opt.disabled:hover { background:var(--pos-tile); } .pos-receipt-opt.muted { opacity:.40; } .pos-receipt-opt-skip.active { border-color:var(--pos-danger); background:var(--pos-danger-tint); } .pos-receipt-input { width:100%; margin-top:.5rem; padding:.55rem .75rem; background:var(--pos-bg); border:1px solid var(--pos-border); border-radius:8px; color:var(--pos-text); font-size:14px; font-family:inherit; } .pos-receipt-input:focus { outline:none; border-color:var(--pos-accent); box-shadow:0 0 0 3px var(--pos-accent-tint); } .pos-receipt-hint { margin-top:.5rem; padding:.5rem .75rem; font-size:12px; line-height:1.5; color:var(--pos-text-muted); background:var(--pos-bg); border:1px dashed var(--pos-border); border-radius:8px; } /* ── QR-on-screen full-screen modal — Phase D receipt destination chooser ── */ .pos-qr-screen-backdrop { z-index:60; } /* sits above the payment dialog */ .pos-qr-screen-card { background:var(--pos-panel); border:1px solid var(--pos-border); border-radius:var(--pos-radius); padding:1.5rem; max-width:420px; width:100%; text-align:center; box-shadow:0 20px 60px var(--pos-shadow-color); } .pos-qr-screen-title { font-size:18px; font-weight:600; margin-bottom:.25rem; } .pos-qr-screen-hint { font-size:13px; color:var(--pos-text-muted); margin-bottom:1rem; line-height:1.5; } .pos-qr-screen-img { width:100%; max-width:320px; height:auto; background:white; padding:1rem; border-radius:12px; image-rendering:pixelated; } /* ── Card terminals admin (PosSettings — Phase D #5) ───────────────────── */ .pos-cardterm-list { display:flex; flex-direction:column; gap:.4rem; } .pos-cardterm-row { display:grid; grid-template-columns:1fr 1fr auto auto auto; gap:.75rem; align-items:center; padding:.7rem .85rem; background:var(--pos-tile); border:1px solid var(--pos-border); border-radius:8px; font-size:13px; } .pos-cardterm-row:hover { border-color:var(--pos-border-strong); } /* ============================================================================ * REGISTER REDESIGN (pos02) — structure. Appended last so these rules override * the original register rules by source order. Maps the warm-light / dark-cart / * amber / compact-line design onto the live .pos-* class names. * ========================================================================== */ /* strong, visible scrollbars (POS pages) */ .pos-shell ::-webkit-scrollbar { width:12px; height:12px; } .pos-shell ::-webkit-scrollbar-thumb { background:var(--pos-scroll); border-radius:7px; border:3px solid var(--pos-bg); } .pos-shell ::-webkit-scrollbar-thumb:hover { background:var(--pos-scroll-hover); } .pos-shell ::-webkit-scrollbar-track { background:transparent; } .pos-cart ::-webkit-scrollbar-thumb { background:var(--pos-cart-scroll); border-color:var(--pos-cart); } .pos-cart ::-webkit-scrollbar-thumb:hover { background:var(--pos-cart-scroll-hover); } /* register layout → 2 columns (catalog | cart); the category rail is gone */ .pos-reg-layout { grid-template-columns: 1fr var(--pos-cart-w); } .pos-cat-rail { display:none; } /* scan row: dark scan button (fixed width) + search box + Enter chip */ .pos-catalog .pos-scan-row { display:flex; gap:.6rem; align-items:center; padding:.85rem 1.1rem .55rem; } .pos-scan-btn { width:var(--pos-lead-w); flex:0 0 auto; height:52px; border-radius:14px; background:#20242e; color:#fff; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-size:13.5px; font-weight:700; border:none; box-shadow:var(--pos-shadow-card); font-family:inherit; cursor:pointer; } .pos-scan-btn:hover { filter:brightness(1.14); } .pos-scan-btn svg { width:20px; height:20px; } .pos-catalog .pos-scan-box { flex:1; min-width:0; height:52px; border:1px solid var(--pos-border); border-radius:14px; box-shadow:var(--pos-shadow-card); background:var(--pos-card); } .pos-catalog .pos-scan-box:focus-within { border-color:var(--pos-accent); box-shadow:0 0 0 3px var(--pos-accent-ring); } .pos-scan-kbd { font-size:11px; font-weight:700; color:var(--pos-text-muted); border:1px solid var(--pos-border); border-radius:7px; padding:.15rem .45rem; white-space:nowrap; } /* clear-search button (shown only while the term is non-empty) */ .pos-scan-clear { flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:1px solid var(--pos-border); background:var(--pos-tile); color:var(--pos-text-muted); font-size:14px; line-height:1; display:grid; place-items:center; touch-action:manipulation; } .pos-scan-clear:hover { background:var(--pos-tile-hover); color:var(--pos-text); } /* horizontal category bar: pinned "All items" (aligned to the scan button) + scrolling rest */ .pos-catrow { display:flex; gap:.6rem; padding:.1rem 1.1rem .4rem; flex-shrink:0; align-items:center; } .pos-catbar { flex:1; min-width:0; display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:none; -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 26px),transparent 100%); mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 26px),transparent 100%); } .pos-catbar::-webkit-scrollbar { display:none; } .pos-cat { flex:0 0 auto; height:44px; padding:0 .9rem; border-radius:var(--pos-pill); background:var(--pos-card); border:1px solid var(--pos-border); display:inline-flex; align-items:center; gap:.5rem; color:var(--pos-text); font-size:13.5px; font-weight:600; box-shadow:var(--pos-shadow-card); transition:all .15s; text-align:center; white-space:nowrap; flex-direction:row; } .pos-cat:hover { border-color:var(--pos-border-strong); background:var(--pos-card-hover); } .pos-cat.pos-cat-all { width:var(--pos-lead-w); justify-content:center; } .pos-cat .cat-thumb, .pos-cat .cat-name { all:unset; } .pos-cat .pos-cat-cc { font-size:11.5px; font-weight:700; color:var(--pos-text-muted); font-variant-numeric:tabular-nums; background:var(--pos-bg); border-radius:var(--pos-pill); padding:.05rem .5rem; } .pos-cat.active { background:var(--pos-accent-grad); border-color:transparent; color:#fff; box-shadow:0 8px 20px var(--pos-accent-tint-2); } .pos-cat.active .pos-cat-cc { background:rgba(255,255,255,.26); color:#fff; } /* item grid → large vertical tiles */ .pos-item-grid { padding:.7rem 1.1rem 1rem; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:.8rem; } .pos-item-tile { position:relative; flex-direction:column; align-items:center; gap:.5rem; min-height:0; padding:1rem .8rem .85rem; border-radius:var(--pos-radius-lg); text-align:center; box-shadow:var(--pos-shadow-card); } .pos-item-tile:hover { transform:translateY(-3px); box-shadow:var(--pos-shadow-pop); border-color:var(--pos-border-strong); } .pos-item-tile.selected { border-color:var(--pos-accent); box-shadow:0 0 0 2px var(--pos-accent); background:var(--pos-card); } .pos-item-tile .thumb { width:58px; height:58px; border-radius:17px; font-size:22px; } .pos-item-tile .body { flex:0 0 auto; align-items:center; gap:.12rem; width:100%; } .pos-item-tile .name { font-size:14px; font-weight:700; line-height:1.3; -webkit-line-clamp:2; min-height:2.6em; text-align:center; } .pos-item-tile .meta { font-size:11.5px; color:var(--pos-text-muted); } .pos-item-tile .price { margin-top:.2rem; align-self:center; background:var(--pos-accent-soft); color:var(--pos-accent-soft-text); font-weight:800; font-size:13.5px; padding:.28rem .7rem; border-radius:var(--pos-pill); } .pos-item-tile .pos-qbadge { position:absolute; top:9px; inset-inline-start:9px; min-width:27px; height:27px; padding:0 .3rem; border-radius:9px; background:var(--pos-accent-grad); color:#fff; font-size:14px; font-weight:800; display:grid; place-items:center; box-shadow:0 4px 12px var(--pos-accent-tint-2); font-variant-numeric:tabular-nums; } /* RA1 — stock badge on a catalog tile. NEW classes only: nothing existing is redefined, and none of this renders unless POS_sp_Catalog_Get returns LOW/OUT, which it only does when the branch Stock_Policy is on. */ .pos-item-tile .pos-stockbadge { position:absolute; top:9px; inset-inline-end:9px; height:20px; padding:0 .45rem; border-radius:7px; font-size:11px; font-weight:800; display:grid; place-items:center; letter-spacing:.2px; pointer-events:none; } .pos-item-tile .pos-stockbadge.out { background:var(--pos-danger, #b91c1c); color:#fff; } .pos-item-tile .pos-stockbadge.low { background:var(--pos-warn, #b45309); color:#fff; } .pos-item-tile.pos-tile-low { box-shadow:inset 0 0 0 1.5px var(--pos-warn, #b45309); } .pos-item-tile.pos-tile-out { box-shadow:inset 0 0 0 1.5px var(--pos-danger, #b91c1c); } /* Only a 'B' (block) policy sets disabled; 'W' keeps the tile fully usable. */ .pos-item-tile.pos-tile-out:disabled { opacity:.55; filter:grayscale(.6); cursor:not-allowed; } /* RA4 — the 86 (availability) badge. NEW classes only; nothing above is touched. 'U' always disables — unlike stock there is no policy, because the row exists only because an operator created it. 'L' is a ceiling, not a block, so it only warns. */ .pos-item-tile .pos-stockbadge.unavail { background:var(--pos-danger, #b91c1c); color:#fff; } .pos-item-tile .pos-stockbadge.limited { background:var(--pos-accent, #b45309); color:#fff; } .pos-item-tile.pos-tile-86 { box-shadow:inset 0 0 0 1.5px var(--pos-danger, #b91c1c); } .pos-item-tile.pos-tile-limited { box-shadow:inset 0 0 0 1.5px var(--pos-accent, #b45309); } .pos-item-tile.pos-tile-86:disabled { opacity:.5; filter:grayscale(.75); cursor:not-allowed; } /* pager */ .pos-catalog-footer { justify-content:center; gap:.4rem; } /* ── Cart: dark in BOTH themes via a scoped token override ───────────────── */ .pos-cart { background:var(--pos-cart); color:var(--pos-cart-text); border-inline-start:1px solid var(--pos-cart-line); --pos-text:var(--pos-cart-text); --pos-text-muted:var(--pos-cart-muted); --pos-text-faint:var(--pos-cart-muted); --pos-bg:var(--pos-cart-inset); --pos-panel:var(--pos-cart); --pos-tile:var(--pos-cart-inset); --pos-tile-hover:var(--pos-cart-btn-hover); --pos-card:var(--pos-cart-inset); --pos-border:var(--pos-cart-line); --pos-border-strong:var(--pos-cart-divider); --pos-accent-text:#f2b969; --pos-accent-soft-text:#f2b969; --pos-danger-text:#f5807f; } .pos-cart-header { padding:1rem 1.15rem .7rem; } .pos-cart-header .title { font-size:19px; font-weight:800; } .pos-cart-header .sub { font-size:12.5px; color:var(--pos-cart-muted); font-weight:600; } /* customer card — distinct inset + brighter border */ .pos-cart .pos-cust-pill { width:100%; height:auto; min-height:56px; padding:.6rem .7rem; border-radius:14px; background:var(--pos-cart-inset); border:1px solid rgba(255,255,255,.14); box-shadow:0 2px 8px rgba(0,0,0,.18); gap:.65rem; } .pos-cart .pos-cust-pill .av { width:38px; height:38px; border-radius:11px; font-size:13px; } .pos-cart .pos-cust-pill .av.cash { background:var(--pos-cart-av); color:var(--pos-cart-muted); } .pos-cart .pos-cust-pill .nm { font-weight:700; } /* compact 2-row line: name+total on top, all controls + unit price inline below */ .pos-cart-line { display:grid; grid-template-columns:38px 1fr; gap:.6rem; padding:.5rem 1.1rem; align-items:start; } .pos-cart-line .thumb { width:38px; height:38px; border-radius:11px; font-size:15px; margin-top:2px; } .pos-line-body { min-width:0; display:flex; flex-direction:column; gap:.3rem; } .pos-line-r1 { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; } .pos-line-name { font-size:14px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } .pos-line-tot { font-size:14.5px; font-weight:800; font-variant-numeric:tabular-nums; flex:0 0 auto; } .pos-line-meta { display:flex; align-items:center; gap:.45rem; min-width:0; font-size:11px; font-variant-numeric:tabular-nums; unicode-bidi:isolate; } .pos-line-meta .disc { color:var(--pos-danger-text); font-weight:700; } .pos-line-meta .note { color:var(--pos-accent-text); display:inline-flex; align-items:center; gap:.25rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pos-line-crow { display:flex; align-items:center; gap:.35rem; } .pos-line-crow .up { margin-inline-start:auto; font-size:11px; color:var(--pos-cart-muted); font-variant-numeric:tabular-nums; unicode-bidi:isolate; padding-inline-start:.4rem; } .pos-stepper { display:inline-flex; align-items:center; gap:.1rem; background:var(--pos-cart-inset); border-radius:var(--pos-pill); padding:2px; } .pos-stepper button { width:32px; height:32px; border-radius:50%; background:transparent; border:none; color:var(--pos-cart-text); font-size:17px; line-height:1; display:grid; place-items:center; cursor:pointer; font-family:inherit; } .pos-stepper button:hover { background:rgba(255,255,255,.09); } .pos-stepper button.plus { background:var(--pos-accent-grad); color:#fff; } .pos-stepper .q { min-width:22px; text-align:center; font-size:13.5px; font-weight:800; font-variant-numeric:tabular-nums; } .pos-line-tool { width:32px; height:32px; border-radius:9px; background:var(--pos-cart-inset); border:none; color:var(--pos-cart-muted); display:grid; place-items:center; cursor:pointer; font-size:14px; font-family:inherit; } .pos-line-tool.on { color:var(--pos-accent-text); background:var(--pos-cart-accent-soft); } .pos-line-tool.del { color:var(--pos-danger-text); background:var(--pos-cart-danger-soft); } /* totals: divider above + boxed grand total. SCOPED to the cart — the same .pos-trow.grand also appears in the (light) Close-shift + Z-report modals, where a dark box would make the Net figure invisible. */ .pos-totals-region { border-top:1px solid var(--pos-cart-divider); box-shadow:0 -8px 18px rgba(0,0,0,.16); background:transparent; } .pos-cart .pos-trow.grand { display:flex; align-items:center; justify-content:space-between; background:var(--pos-cart-inset); border:none; border-radius:14px; padding:.7rem .9rem; margin-top:.5rem; font-size:15px; font-weight:700; } .pos-cart .pos-trow.grand > span:last-child { font-size:24px; font-weight:800; } /* actions + pay + gift-card row */ .pos-cart-actions .pos-btn { background:var(--pos-cart-btn); border-color:transparent; color:var(--pos-cart-text); height:46px; border-radius:13px; } .pos-cart-actions .pos-btn:hover { background:var(--pos-cart-btn-hover); } .pos-cart-actions .pos-btn-danger { background:var(--pos-cart-danger-soft); color:var(--pos-danger-text); } .pos-cart-actions .pos-btn-danger:hover { background:var(--pos-cart-danger-soft); filter:brightness(1.15); } .pos-pay-btn { border-radius:16px; background:var(--pos-success-grad); border:none; color:#fff; box-shadow:0 12px 28px rgba(23,163,74,.35); } .pos-pay-btn:hover { filter:brightness(1.06); background:var(--pos-success-grad); } .pos-gc-actions .pos-btn { background:transparent; border:1px solid color-mix(in srgb, var(--pos-cart-text) 22%, transparent); color:var(--pos-accent-text); } .pos-gc-actions .pos-btn:hover { background:var(--pos-cart-accent-soft); } /* ── Topbar redesign: ATQ POS in the corner + tenant/branch next ─────────── */ .pos-topbar { gap:.85rem; } .pos-topbar-brand .pos-logo { background:var(--pos-accent-grad); color:#fff; border-radius:13px; box-shadow:0 6px 16px var(--pos-accent-tint-2); } .pos-topbar-brand .pos-logo svg { width:24px; height:24px; } .pos-brand-name { font-weight:800; font-size:16px; letter-spacing:-.01em; color:var(--pos-text); } .pos-tenant-block { padding-inline-start:.85rem; border-inline-start:1px solid var(--pos-border); line-height:1.2; } .pos-tenant-block .tn { font-size:13.5px; font-weight:700; color:var(--pos-text); } .pos-tenant-block .br { font-size:11.5px; color:var(--pos-text-muted); font-weight:600; margin-top:1px; } .pos-shift-pill bdi { unicode-bidi:isolate; font-variant-numeric:tabular-nums; } .pos-logout-btn:hover { color:var(--pos-danger-text); border-color:color-mix(in srgb, var(--pos-danger) 40%, transparent); } /* nav-rail active → AA-safe amber tint (was solid amber + white) */ .pos-navrail-item.active { background:var(--pos-accent-tint); color:var(--pos-accent-strong); } .pos-navrail-item.active svg { color:var(--pos-accent-strong); } /* ============================================================================ * PORT-REVIEW FIXES (Fable + port-correctness + RTL/contrast lenses) * ========================================================================== */ /* WCAG: white text on an amber FILL fails AA site-wide → dark espresso ink. Amber-as-text (accent-text / accent-soft-text) already passes and is untouched. */ :root { --pos-on-accent-solid:#3a2408; --pos-shadow-sm:0 1px 2px rgba(0,0,0,.4); } :root[data-pos-theme="light"] { --pos-on-warning:#3a2408; --pos-shadow-sm:0 1px 2px rgba(28,30,38,.06); } .pos-btn-accent, .pos-tender-tab.active, .pos-lang-toggle button.active, .pos-cat.active, .pos-item-tile .pos-qbadge { color:var(--pos-on-accent-solid); } .pos-key:active { color:var(--pos-on-accent-solid); } .pos-tender-tab.active .icon, .pos-cat.active .pos-cat-cc { color:var(--pos-on-accent-solid); } /* nav-active label AA on the amber tint (darker amber in both themes) */ .pos-navrail-item.active, .pos-navrail-item.active svg { color:var(--pos-accent-soft-text); } /* modifier child lines: indent + smaller thumb so add-on structure reads at a glance */ .pos-cart-line.child { padding-inline-start:2.2rem; } .pos-cart-line.child .thumb { width:28px; height:28px; font-size:13px; } /* RTL: category-bar overflow fade on the correct (end/left) edge */ [dir="rtl"] .pos-catbar { -webkit-mask-image:linear-gradient(to left,#000 0,#000 calc(100% - 26px),transparent 100%); mask-image:linear-gradient(to left,#000 0,#000 calc(100% - 26px),transparent 100%); } /* touch: a little more room around the compact controls + separate the destructive delete */ .pos-line-crow { gap:.45rem; } .pos-line-crow .pos-stepper button, .pos-line-crow .pos-line-tool { width:34px; height:34px; } .pos-line-tool.del { margin-inline-start:.15rem; } /* logout icon reads as destructive (distinct from the theme/lock icons beside it) */ .pos-logout-btn { color:var(--pos-danger-text); } /* scan button stays legible in the opt-in dark theme (near-black on near-black otherwise) */ :root:not([data-pos-theme="light"]) .pos-scan-btn { border:1px solid var(--pos-border-strong); } /* ============================================================================ * LIVE-TEST FIXES (operator runtime feedback, 2026-07-10) * ========================================================================== */ /* Item tiles were collapsing to ~74px: a -webkit-line-clamp name contributes ~0 height to the grid's `auto` row track, so tracks sized to just thumb+padding and the price/name overflowed onto the tiles below. Give the rows a content-fitting floor so every tile is fully sized and uniform. */ .pos-item-grid { grid-auto-rows: minmax(184px, auto); } /* Denser cart line + compressed checkout footer → more item lines visible. */ .pos-cart-line { padding-top:.4rem; padding-bottom:.4rem; } .pos-line-body { gap:.24rem; } .pos-line-crow .pos-stepper button, .pos-line-crow .pos-line-tool { width:32px; height:32px; } .pos-totals-region { padding:.45rem 1.1rem .25rem; } .pos-cart .pos-trow { padding:.15rem 0; } .pos-cart .pos-trow.grand { padding:.5rem .9rem; margin-top:.3rem; } .pos-cart-actions { padding:.4rem 1.1rem .25rem; } .pos-pay-btn { margin:.3rem 1.1rem .4rem; height:54px; font-size:18px; } .pos-gc-actions { margin-top:.3rem; } .pos-gc-actions .pos-btn { height:42px; } /* Category bar: a visible thin scrollbar so mouse users can scroll (was hidden). */ .pos-catbar { scrollbar-width:thin; scrollbar-color:var(--pos-scroll) transparent; } .pos-catbar::-webkit-scrollbar { display:block; height:6px; } .pos-catbar::-webkit-scrollbar-thumb { background:var(--pos-scroll); border-radius:3px; border:0; } .pos-catbar::-webkit-scrollbar-track { background:transparent; } /* Pager styled like the mockup: centered pill buttons + an amber current-page pill. */ .pos-catalog-footer { justify-content:center; gap:.4rem; padding:.4rem 1rem .55rem; } .pos-catalog-footer .pos-btn { border-radius:11px; box-shadow:var(--pos-shadow-card); } .pos-catalog-footer > span { min-width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; padding:0 .9rem; border-radius:11px; background:var(--pos-accent-grad); color:var(--pos-on-accent-solid) !important; font-weight:800; font-size:13.5px !important; } /* Close POS moved to the topbar (red) — replaces the removed status panel. */ .pos-closepos-btn { display:inline-flex; align-items:center; gap:.4rem; height:40px; padding:0 .85rem; border-radius:12px; background:var(--pos-danger-soft); border:1px solid color-mix(in srgb, var(--pos-danger) 38%, transparent); color:var(--pos-danger-text); font-size:13px; font-weight:700; font-family:inherit; cursor:pointer; transition:background .15s, border-color .15s, filter .15s; } .pos-closepos-btn:hover { border-color:var(--pos-danger); filter:brightness(1.05); } .pos-closepos-btn svg { width:18px; height:18px; } /* Floating status toast (the status message used to live in the removed panel). */ .pos-reg-toast { position:fixed; inset-inline:0; top:4.5rem; margin-inline:auto; width:max-content; max-width:90vw; padding:.6rem 1.15rem; border-radius:999px; font-size:14px; font-weight:700; color:#fff; z-index:90; box-shadow:var(--pos-shadow-modal); pointer-events:none; animation:pos-toast-in .18s ease-out; } @keyframes pos-toast-in { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } } .pos-reg-toast.ok { background:var(--pos-success); } .pos-reg-toast.err { background:var(--pos-danger); } /* Clearer SELECTED category indicator: amber fill + a solid amber ring. */ .pos-cat.active { box-shadow: 0 0 0 2px var(--pos-accent-strong), 0 8px 20px var(--pos-accent-tint-2); } /* Pager prev/next buttons: clearer border (was the faint --pos-border). */ .pos-catalog-footer .pos-btn { border-color: var(--pos-border-strong); } .pos-catalog-footer .pos-btn:hover { border-color: var(--pos-accent); } /* Cart line (compact): unit + unit price share the CONTROLS row — the sub grows from the start while the stepper/tools sit at the end, aligned under the line total. Any note sits between the name row and this row. Collapses the old 4-row line to 2–3 rows so more items stay visible. */ .pos-line-sub { display:flex; align-items:center; gap:.4rem; min-width:0; font-size:11.5px; color:var(--pos-cart-muted); font-variant-numeric:tabular-nums; unicode-bidi:isolate; } .pos-line-sub .u { font-weight:700; color:var(--pos-cart-text); } .pos-line-sub .disc { color:var(--pos-danger-text); font-weight:700; } .pos-line-crow .pos-line-sub { flex:1 1 auto; min-width:0; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pos-line-crow .pos-stepper { flex:0 0 auto; } /* Discount badge rides on row 1 beside the (gross) line total so the compact controls row never clips it. */ .pos-line-r1 .disc { font-size:11.5px; font-weight:700; color:var(--pos-danger-text); margin-inline-end:.35rem; unicode-bidi:isolate; } /* ============================================================================ * BATCH FIXES (operator feedback 2026-07-12) — category selected-state + radius, * panel/pager separators, tighter cart-summary spacing. Appended last → win by * source order over the earlier .pos-cat / spacing rules. * ========================================================================== */ /* Item 4 — category chips: smaller radius (was a full pill) + an UNMISTAKABLE selected state (solid saturated amber, dark ink, bold, strong ring, and a leading dot) so it's obvious which category is active vs a mere hover tint. */ .pos-cat { border-radius: 10px; } .pos-cat.active { background: var(--pos-accent); border-color: var(--pos-accent-strong); color: var(--pos-on-accent-solid); font-weight: 800; box-shadow: inset 0 0 0 1px var(--pos-accent-strong), 0 6px 16px var(--pos-accent-tint-2); } .pos-cat.active::before { content: ""; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--pos-on-accent-solid); margin-inline-end: .1rem; } /* Item 5 — separators: divide the category bar from the item grid, and the item grid from the pager, so the three zones read as distinct panels. */ .pos-catrow { border-bottom: 1px solid var(--pos-border); padding-bottom: .5rem; } .pos-catalog-footer { border-top: 1px solid var(--pos-border); } /* Item 7 — tighten the vertical gaps in the pinned cart summary (totals + action buttons + PAY + gift-card row) to free height for more cart lines. Button heights are untouched (touch targets preserved); only the between-spacing shrinks. */ .pos-totals-region { padding-top: .3rem; padding-bottom: .1rem; } .pos-cart .pos-trow { padding: .1rem 0; } .pos-cart .pos-trow.grand { margin-top: .2rem; padding-top: .45rem; padding-bottom: .45rem; } .pos-cart-actions { padding-top: .25rem; padding-bottom: .1rem; } .pos-pay-btn { margin-top: .2rem; margin-bottom: .25rem; } .pos-gc-actions { margin-top: .2rem; } /* ── Inline numeric pad (PosNumPad) ────────────────────────────────────────── Money / digit entry on keyboard-less touch tills, rendered INSIDE the dialog rather than as an overlay keyboard — nothing to focus, nothing to occlude. Additive: new class names only. The pad reuses .pos-keypad/.pos-key, so it inherits the shipped payment-pad sizing (3.1rem ~ 50px keys, clears the WCAG 2.5.5 44px bar) and light/dark theming for free. */ .pos-numpad-inline { margin-top: .5rem; } /* digits-only mode replaces the '.' cell with an empty spacer — keeps 0 in the same grid cell as the payment pad, and the gap must never be tappable */ .pos-numpad-inline > span { pointer-events: none; } /* the pair-code gate card is 420px wide; the pad should not sprawl across it */ .pos-numpad-gate { max-width: 288px; margin-inline: auto; } /* .pos-key had no disabled state — the payment pad never disables its keys */ .pos-key:disabled { opacity: .45; cursor: not-allowed; } .pos-key:disabled:hover { background: var(--pos-tile); } /* OSK on the LOGIN page (no .pos-shell there). Reserve is driven by the STABLE _oskEnabled class, not by show/hide, so the card never reflows under a finger mid-tap (a reflow could land the Sign-in tap on the Forgot-password link). Top-align + reserve the keyboard height + allow scroll, so the card and the Sign-in button stay reachable above the fixed keyboard on a 768px panel. */ .login-osk-reserved { align-items: flex-start; overflow-y: auto; padding-bottom: var(--pos-osk-h); } /* scrollIntoView(nearest) can't see the position:fixed keyboard overlaying the bottom — give every managed field a bottom scroll-margin equal to the keyboard height so the focused field is scrolled clear of it (matters for a low field: the password on login, the note in a modal on POS). */ body.pos-osk-open [data-osk] { scroll-margin-bottom: calc(var(--pos-osk-h) + 12px); } /* Note & modifier-picker modals with the keyboard open: the docked keyboard is z-70, above the z-50 modal, so top-anchor the modal and cap the dialog to the space above the keyboard — its inner region then scrolls and the focused note (+ Save) stays reachable. Scoped with :has([data-osk]) so ONLY a modal that actually contains a managed field is ever deformed — a non-note dialog opened while the class lingers (e.g. from the search box, within the 130ms grace) can't flash. !important overrides the picker's inline max-height:88vh for this transient state only. */ body.pos-osk-open .pos-modal-backdrop2:has([data-osk]) { align-items: start; padding-top: 2vh; } /* > .pos-card = the dialog card (note/picker/modifier-option all wrap in .pos-card), capped to the space above the keyboard. !important beats the pickers' inline max-height. */ body.pos-osk-open .pos-modal-backdrop2:has([data-osk]) > .pos-card { max-height: calc(100vh - var(--pos-osk-h) - 4vh) !important; } /* Customer-lookup drawer (full-height side panel) with the keyboard open: reserve the keyboard height inside the drawer so the flex footer (Attach) lifts above the keyboard and the body's scroll area ends above it (the focused field scrolls clear via scroll-margin-bottom). :has scopes it to a drawer that actually contains a managed field — the receipt-detail drawer has none. */ body.pos-osk-open .pos-drawer:has([data-osk]) { padding-bottom: var(--pos-osk-h); } /* Inline-styled modal that hosts OSK fields (the close-shift dialog): top-anchor + cap when the keyboard is open so the money fields and the Close button stay above it. !important beats the dialog's inline align-items:center / max-height:88vh. Only the close dialog carries these classes. */ body.pos-osk-open .pos-osk-host { align-items: flex-start !important; padding-top: 2vh; } body.pos-osk-open .pos-osk-sheet { max-height: calc(100vh - var(--pos-osk-h) - 4vh) !important; } /* topbar OSK toggle — lit when on-screen keyboard aids are enabled for this device */ .pos-icon-btn.on { background: var(--pos-accent-tint); border-color: var(--pos-accent); color: var(--pos-accent-text); } /* ── Docked on-screen text keyboard (PosOsk) ───────────────────────────────── A bottom sheet for free-text fields (item search; later notes / customer). The inline numpad handles money/digits; this handles letters. Theme-aware via the --pos-* tokens (works in light + dark). z-index 70 = above modals (50) and the QR screen (60), below toasts (90). */ /* Fallback keyboard height. The shim overwrites this with the sheet's MEASURED offsetHeight on show (measureHeight), so this only covers the first paint before the first focus. Real height ≈ 308px: border 1 + pad 7 + bar ~37 + 5 key rows (digits + 3 letters + fn) ×46 + 4 gaps ×6 + pad 10. */ :root { --pos-osk-h: 310px; } .pos-osk { position: fixed; inset-inline: 0; bottom: 0; z-index: 70; background: var(--pos-elevated); border-top: 1px solid var(--pos-border-strong); box-shadow: 0 -18px 44px var(--pos-backdrop); padding: .45rem .6rem calc(.6rem + env(safe-area-inset-bottom, 0px)); /* HIDDEN = truly inert. Never translate-only (the old V1 keyboard left an invisible dead zone over the PAY button). */ transform: translateY(100%); visibility: hidden; pointer-events: none; transition: transform .18s ease, visibility 0s linear .18s; -webkit-user-select: none; user-select: none; } .pos-osk.show { transform: none; visibility: visible; pointer-events: auto; transition: transform .18s ease; } .pos-osk-bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 0 .2rem .4rem; } .pos-osk-where { font-size: 12px; color: var(--pos-text-faint); font-weight: 600; } .pos-osk-where b { color: var(--pos-accent-text); font-weight: 700; } .pos-osk-hide { height: 30px; padding: 0 .8rem; border-radius: 999px; background: var(--pos-tile); border: 1px solid var(--pos-border); color: var(--pos-text-muted); font-size: 12.5px; font-weight: 600; } .pos-osk-hide:hover { background: var(--pos-tile-hover); color: var(--pos-text); } .pos-osk-keys { display: flex; flex-direction: column; gap: 6px; } /* Rows are authored in visual order and forced LTR — Arabic keys keep their physical-keyboard positions; we do NOT reverse the DOM with dir="rtl". */ .pos-osk-row { display: flex; gap: 6px; justify-content: center; direction: ltr; } .pos-osk-key { flex: 1; min-width: 0; height: 46px; /* ≥44px WCAG 2.5.5 · 6px gutters */ border-radius: 9px; background: var(--pos-tile); border: 1px solid var(--pos-border); color: var(--pos-text); font-size: 17px; font-weight: 600; display: grid; place-items: center; touch-action: manipulation; font-family: inherit; transition: background .08s, transform .06s; } .pos-osk-key:hover { background: var(--pos-tile-hover); } .pos-osk-key:active { background: var(--pos-accent); border-color: var(--pos-accent); color: #fff; transform: scale(.95); } .pos-osk-key.ar { font-size: 19px; font-family: var(--pos-font-ar, inherit); } .pos-osk-key.fn { flex: 0 0 auto; min-width: 58px; background: var(--pos-panel-2); color: var(--pos-text-muted); font-size: 13px; font-weight: 700; } .pos-osk-key.fn:hover { color: var(--pos-text); } .pos-osk-key.fn.on { background: var(--pos-accent-tint); border-color: var(--pos-accent); color: var(--pos-accent-text); } .pos-osk-key.lang { min-width: 64px; background: var(--pos-accent-tint); border-color: var(--pos-accent); color: var(--pos-accent-text); font-weight: 800; } .pos-osk-key.space { flex: 4; } .pos-osk-key.bksp { flex: 0 0 auto; min-width: 84px; background: var(--pos-danger-tint); border-color: color-mix(in srgb, var(--pos-danger) 30%, transparent); color: var(--pos-danger-text); font-size: 19px; } .pos-osk-key.done { flex: 0 0 auto; min-width: 96px; background: var(--pos-success); border-color: var(--pos-success); color: #fff; font-size: 14px; font-weight: 700; } /* Reserve the keyboard's height at the bottom of the POS body so it never covers content (the class is toggled on .pos-shell by the atq.osk shim on show/hide). */ .pos-shell.pos-osk-open .pos-main { padding-bottom: var(--pos-osk-h); transition: padding-bottom .18s ease; } .pos-shell .pos-main { transition: padding-bottom .18s ease; } /* ============================================================================ * POS FAVORITES (20260725_03) — the pinned ★ pseudo-category. * The lead group keeps the strip's alignment contract: it is exactly one * --pos-lead-w wide, the same as the dark scan button directly above it, so * adding ★ does NOT shift "All items" out from under the scan button. * With no favorites the group holds "All items" alone and, because that button * is flex:1 inside a --pos-lead-w box, the result is pixel-identical to before. * ========================================================================== */ .pos-cat-lead { flex:0 0 auto; width:var(--pos-lead-w); display:flex; gap:.45rem; } /* beat the `.pos-cat.pos-cat-all { width:var(--pos-lead-w) }` rule above: inside the group the button shares the slot instead of owning all of it */ .pos-cat-lead .pos-cat-all { width:auto; flex:1 1 auto; min-width:0; padding:0 .55rem; overflow:hidden; text-overflow:ellipsis; } .pos-cat-fav { flex:0 0 auto; width:48px; padding:0; justify-content:center; } .pos-cat-fav svg { width:21px; height:21px; } /* `.pos-cat.active` already sets the espresso-ink foreground for WCAG AA on the amber fill, and the star is fill="currentColor", so the active ★ inherits it. */ /* ============================================================================ * OPEN SHIFT (topbar) — the counterpart to .pos-closepos-btn. Green rather than * red: closing a shift is destructive-ish and final, opening one is routine. * Its dialog gets its own namespaced classes because the only shared modal in * this file (.pos-modal2) is a 900px workspace, far too large for a confirm. * ========================================================================== */ .pos-openpos-btn { display:inline-flex; align-items:center; gap:.4rem; height:40px; padding:0 .85rem; border-radius:12px; background:var(--pos-success-soft); border:1px solid color-mix(in srgb, var(--pos-success) 38%, transparent); color:var(--pos-success-text); font-size:13px; font-weight:700; font-family:inherit; cursor:pointer; transition:background .15s, border-color .15s, filter .15s; } .pos-openpos-btn:hover:not(:disabled) { border-color:var(--pos-success); filter:brightness(1.05); } .pos-openpos-btn:disabled { opacity:.55; cursor:not-allowed; } .pos-openpos-btn svg { width:18px; height:18px; } /* accept-the-drawer confirm */ .pos-openshift-backdrop { position:fixed; inset:0; background:var(--pos-backdrop); backdrop-filter:blur(4px); display:grid; place-items:center; z-index:75; padding:1rem; } .pos-openshift-card { background:var(--pos-panel); color:var(--pos-text); border:1px solid var(--pos-border); border-radius:var(--pos-radius); width:min(440px,94vw); padding:1.15rem; box-shadow:var(--pos-shadow-modal); } .pos-openshift-title { font-size:17px; font-weight:800; margin-bottom:.5rem; } .pos-openshift-body { font-size:13.5px; line-height:1.65; color:var(--pos-text-muted); } .pos-openshift-body p { margin:0 0 .8rem; } .pos-openshift-amount { display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; background:var(--pos-bg); border:1px solid var(--pos-border); border-radius:var(--pos-radius-sm); padding:.7rem .85rem; margin-bottom:.9rem; } .pos-openshift-amount span { font-size:13px; color:var(--pos-text-muted); } .pos-openshift-amount strong { font-size:20px; font-weight:800; color:var(--pos-text); font-variant-numeric:tabular-nums; } .pos-openshift-amount small { font-size:11.5px; font-weight:700; color:var(--pos-text-muted); } .pos-openshift-actions { display:flex; gap:.5rem; } .pos-openshift-actions .pos-btn { flex:1; } /* toast — sits above the dialog so a failed accept is readable without dismissing it */ .pos-openshift-toast { position:fixed; inset-block-end:1.5rem; left:50%; transform:translateX(-50%); z-index:80; padding:.7rem 1.1rem; border-radius:var(--pos-pill); font-size:13.5px; font-weight:700; max-width:min(560px,92vw); text-align:center; box-shadow:var(--pos-shadow-pop); } .pos-openshift-toast.ok { background:var(--pos-success); color:#fff; } .pos-openshift-toast.err { background:var(--pos-danger); color:#fff; } /* ═══════════════════════════════════════════════════════════════════════════ RETAIL REGISTER (POS Retail R2 · /pos/retail · mockup pos02/24) Same shell, nav rail and dark cart as the counter register. The catalog grid is replaced by an ENTRY BAR + a dense LINE LIST — a supermarket till is scan-first and keyboard-first, so tiles are the wrong shape for it. Every class here is `rt-` prefixed. Single-word class names in this sheet are a shared namespace, and reusing one silently re-styles an unrelated screen; a page-specific prefix is what stops the next screen colliding with this one. ═══════════════════════════════════════════════════════════════════════════ */ .pos-retail { display:flex; flex-direction:column; flex:1; min-height:0; background:var(--pos-bg); } .rt-reg { flex:1; min-height:0; display:grid; grid-template-columns:1fr var(--pos-cart-w); } .rt-lines-col { display:flex; flex-direction:column; min-width:0; min-height:0; } /* ── entry bar — the heart of the screen, always focused ─────────────────── */ .rt-entry { display:flex; gap:.6rem; padding:.85rem 1.1rem .55rem; flex-shrink:0; align-items:center; } .rt-qkbtn { width:132px; flex:0 0 auto; height:52px; border-radius:14px; background:#20242e; color:#fff; display:inline-flex; align-items:center; justify-content:center; gap:.45rem; font-size:13px; font-weight:700; border:none; cursor:pointer; font-family:inherit; } .rt-qkbtn:disabled { opacity:.45; cursor:not-allowed; } .rt-qtychip { display:inline-flex; align-items:center; gap:.35rem; width:88px; flex:0 0 auto; height:52px; border-radius:14px; background:var(--pos-accent); color:#fff; justify-content:center; font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; } .rt-qtychip .x { font-size:15px; opacity:.85; } .rt-entrybox { flex:1; min-width:0; height:52px; background:var(--pos-tile); border:1.5px solid var(--pos-accent); border-radius:14px; padding:0 1rem; display:flex; align-items:center; gap:.7rem; box-shadow:0 0 0 3px var(--pos-accent-ring); } .rt-entryinput { flex:1; min-width:0; border:none; outline:none; background:transparent; color:var(--pos-text); font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; font-family:inherit; } .rt-entryinput::placeholder { color:var(--pos-text-muted); font-weight:500; font-size:14.5px; } .rt-kbd { font-size:11px; font-weight:700; color:var(--pos-text-muted); border:1px solid var(--pos-border); border-radius:7px; padding:.15rem .45rem; } /* line-edit mode: the entry bar RETARGETS instead of opening a dialog */ .rt-elab { font-size:12.5px; font-weight:800; padding:.2rem .6rem; border-radius:999px; background:var(--pos-accent-soft); color:var(--pos-accent-soft-text); white-space:nowrap; flex:0 0 auto; } .rt-entrybox.editing { border-color:var(--pos-accent-strong); } /* offline: the entry bar goes visibly COLD, so scanning into a dead till is impossible to miss */ .rt-entrybox.dead { border-color:var(--pos-danger); box-shadow:0 0 0 3px var(--pos-danger-soft); opacity:.65; } .rt-hintrow { display:flex; gap:.5rem; padding:0 1.1rem .5rem; flex-shrink:0; flex-wrap:wrap; } .rt-hint { font-size:11.5px; font-weight:600; color:var(--pos-text-muted); background:var(--pos-panel); border:1px solid var(--pos-border); border-radius:999px; padding:.2rem .7rem; } .rt-hint b { color:var(--pos-accent-strong); font-family:ui-monospace,monospace; } .rt-hint.conn { display:inline-flex; align-items:center; gap:.4rem; font-weight:700; } .rt-hint.conn .cdot { width:8px; height:8px; border-radius:50%; } .rt-hint.conn.ok { background:var(--pos-success-soft); border-color:transparent; color:var(--pos-success-text); } .rt-hint.conn.ok .cdot { background:var(--pos-success); } .rt-hint.conn.bad { background:var(--pos-danger-soft); border-color:transparent; color:var(--pos-danger-text); } .rt-hint.conn.bad .cdot { background:var(--pos-danger); animation:rt-blink 1s step-end infinite; } .rt-hint.guard { background:var(--pos-info-soft); border-color:transparent; color:var(--pos-info-text); } @keyframes rt-blink { 50% { opacity:0; } } /* not-found: inline and non-blocking — a modal would steal the focus the design rests on */ .rt-nfbar { display:flex; align-items:center; gap:.8rem; margin:0 1.1rem .5rem; padding:.65rem .9rem; border-radius:14px; background:var(--pos-warning-soft); color:var(--pos-warning-text); border:1px solid var(--pos-warning); } .rt-nfbar .nftxt { flex:1; min-width:0; font-size:13.5px; font-weight:700; } .rt-nfbar .nfsub { display:block; font-size:11.5px; font-weight:500; color:var(--pos-text-muted); margin-top:1px; } .rt-nfbar .mono { font-family:ui-monospace,monospace; } .rt-nfacts { display:flex; gap:.4rem; flex:0 0 auto; } .rt-nfbtn { height:34px; padding:0 .75rem; border-radius:10px; background:var(--pos-tile); border:1px solid var(--pos-border); color:var(--pos-text); font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit; } .rt-nfbtn.ghost{ background:transparent; color:var(--pos-text-muted); } .rt-offbar { display:flex; align-items:center; gap:.6rem; margin:0 1.1rem .5rem; padding:.7rem .9rem; border-radius:14px; background:var(--pos-danger-soft); color:var(--pos-danger-text); font-size:13px; font-weight:700; border:1px solid var(--pos-danger); } /* ── line list — dense, tabular, keyboard-navigable ──────────────────────── */ .rt-lines-wrap { flex:1; min-height:0; overflow-y:auto; padding:0 1.1rem 1rem; } .rt-empty { padding:3.5rem 1rem; text-align:center; color:var(--pos-text-muted); } .rt-empty .t { font-size:14.5px; font-weight:600; } table.rt-lt { width:100%; border-collapse:separate; border-spacing:0; font-variant-numeric:tabular-nums; background:var(--pos-tile); border:1px solid var(--pos-border); border-radius:var(--pos-radius); overflow:hidden; } table.rt-lt thead th { position:sticky; top:0; z-index:2; background:var(--pos-panel); font-size:11px; font-weight:800; color:var(--pos-text-muted); padding:.6rem .75rem; text-align:start; border-bottom:1px solid var(--pos-border); white-space:nowrap; } table.rt-lt td { padding:.45rem .75rem; border-bottom:1px solid var(--pos-border); font-size:14px; vertical-align:middle; } table.rt-lt tbody tr:last-child td { border-bottom:none; } table.rt-lt tbody tr { cursor:pointer; } .rt-lt .num { text-align:end; } .rt-lt .c-n { width:38px; } .rt-lt .c-u { width:72px; } .rt-lt .c-q { width:78px; } .rt-lt .c-p { width:86px; } .rt-lt .c-t { width:96px; } .rt-lt .n { color:var(--pos-text-muted); font-size:12px; font-weight:700; } .rt-lt .nm { font-weight:700; } /* ★ DENSITY: at 1024x768 the list gets ~540px. A two-line row (~53px) shows ~10 rows — half the 15-20 the design calls for. The item code is REFERENCE data, not scanning data, so it is revealed only on the selected row, giving ~38px rows and 14-15 visible on the reference till. */ .rt-lt .code { display:none; font-size:11px; color:var(--pos-text-muted); font-family:ui-monospace,monospace; } .rt-lt tr.sel .code { display:inline; margin-inline-start:.5rem; } .rt-lt .u { color:var(--pos-text-muted); font-size:12.5px; } .rt-lt .q { font-weight:800; } .rt-lt .p { color:var(--pos-text-muted); } .rt-lt .t { font-weight:800; } .rt-lt tr.sel td { background:var(--pos-accent-tint); } .rt-lt tr.sel td:first-child { box-shadow:inset 3px 0 0 var(--pos-accent); } [dir="rtl"] .rt-lt tr.sel td:first-child { box-shadow:inset -3px 0 0 var(--pos-accent); } .rt-lt tr.sel .nm { color:var(--pos-accent-strong); } .rt-tag { display:inline-block; font-size:10.5px; font-weight:800; padding:.05rem .45rem; border-radius:999px; margin-inline-start:.35rem; vertical-align:1px; } .rt-tag.dc { background:var(--pos-warning-soft); color:var(--pos-warning-text); } /* ── dark cart rail ──────────────────────────────────────────────────────── */ .rt-cart { background:var(--pos-cart); color:var(--pos-cart-text); display:flex; flex-direction:column; min-width:0; min-height:0; } .rt-cart-head { padding:.9rem 1.15rem; border-bottom:1px solid var(--pos-cart-divider); display:flex; justify-content:space-between; align-items:center; flex-shrink:0; } .rt-cart-head .t { font-weight:700; font-size:16px; } .rt-counts { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; padding:.75rem 1.15rem .2rem; } .rt-counts .cbox { background:var(--pos-cart-inset); border-radius:13px; padding:.45rem .7rem; } .rt-counts .k { font-size:10.5px; font-weight:700; color:var(--pos-cart-muted); } .rt-counts .v { font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; } /* Two LABELLED groups, not a nine-button grid: the old grid mixed line-level, sale-level and navigation actions into one undifferentiated block, and nothing told the cashier which needed a line selected first. Each control carries its own key hint — there is no bottom F-key strip, which is what buys back ~35px of the line list on a 768px till. */ .rt-grp { padding:.75rem 1.15rem 0; } .rt-grp-h { font-size:10.5px; font-weight:800; color:var(--pos-cart-muted); margin-bottom:.45rem; display:flex; gap:.4rem; align-items:baseline; } .rt-grp-sel { font-size:11.5px; font-weight:700; color:var(--pos-accent-soft-text); background:var(--pos-cart-accent-soft); border-radius:999px; padding:.05rem .5rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:180px; } /* Visible-but-disabled with no selection: discoverability without a lie. */ .rt-grp-sel.none { color:var(--pos-cart-muted); background:var(--pos-cart-inset); font-weight:600; } @media (max-width:1024px) { .rt-grp-sel { max-width:130px; } } .rt-kh { font-size:9.5px; font-weight:800; font-family:ui-monospace,monospace; opacity:.6; } .rt-modes { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; padding:3px; background:var(--pos-cart-inset); border-radius:14px; } .rt-mode { height:52px; border-radius:11px; background:transparent; color:var(--pos-cart-text); font-size:13px; font-weight:700; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.08rem; border:none; cursor:pointer; font-family:inherit; } .rt-mode:hover:not(:disabled) { background:var(--pos-cart-btn); } .rt-mode.on { background:var(--pos-accent); color:#fff; } .rt-mode:disabled { opacity:.4; cursor:not-allowed; } .rt-linedel { width:100%; height:44px; margin-top:.45rem; border-radius:13px; background:var(--pos-cart-danger-soft); color:var(--pos-danger-text); font-size:13px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:.45rem; border:none; cursor:pointer; font-family:inherit; } .rt-linedel:disabled { opacity:.4; cursor:not-allowed; } .rt-sacts { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; } .rt-sact { height:56px; border-radius:13px; background:var(--pos-cart-btn); color:var(--pos-cart-text); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem; font-size:11.5px; font-weight:700; padding:0 .2rem; text-align:center; border:none; cursor:pointer; font-family:inherit; } .rt-sact:hover:not(:disabled) { background:var(--pos-cart-btn-hover); } .rt-sact:disabled { opacity:.4; cursor:not-allowed; } .rt-cart-foot { margin-top:auto; padding:.9rem 1.15rem 1rem; flex-shrink:0; } .rt-totals { border-top:1px solid var(--pos-cart-divider); padding-top:.6rem; } .rt-totals .trow { display:flex; justify-content:space-between; padding:.2rem 0; font-size:13px; color:var(--pos-cart-muted); } .rt-totals .trow .v { font-variant-numeric:tabular-nums; color:var(--pos-cart-text); font-weight:600; } .rt-vatmode { font-size:11px; font-weight:700; color:var(--pos-cart-muted); padding:.1rem .55rem; border-radius:999px; background:var(--pos-cart-inset); } .rt-grand { display:flex; justify-content:space-between; align-items:baseline; margin-top:.5rem; padding-top:.5rem; border-top:1px solid var(--pos-cart-divider); } .rt-grand .l { font-size:14px; font-weight:700; color:var(--pos-cart-muted); } .rt-grand .v { font-size:28px; font-weight:800; font-variant-numeric:tabular-nums; } .rt-pay { width:100%; height:64px; margin-top:.7rem; border-radius:14px; background:var(--pos-success); color:#fff; font-size:19px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; gap:.6rem; border:none; cursor:pointer; font-family:inherit; } .rt-pay .amt { font-variant-numeric:tabular-nums; } .rt-pay:disabled { opacity:.5; cursor:not-allowed; } /* ── ambiguity / search result rows ──────────────────────────────────────── */ .rt-rrow { display:flex; width:100%; align-items:center; gap:.9rem; padding:.7rem .9rem; border-radius:14px; border:1px solid var(--pos-border); background:var(--pos-tile); margin-bottom:.5rem; cursor:pointer; text-align:start; font-family:inherit; color:var(--pos-text); } .rt-rrow:hover { border-color:var(--pos-accent); background:var(--pos-accent-tint); } .rt-rrow .g { flex:1; min-width:0; } .rt-rrow .nm { display:block; font-size:14.5px; font-weight:700; } .rt-rrow .code { display:block; font-size:11px; color:var(--pos-text-muted); font-family:ui-monospace,monospace; } .rt-rrow .un { font-size:12px; font-weight:700; color:var(--pos-text-muted); background:var(--pos-bg); border-radius:999px; padding:.1rem .6rem; white-space:nowrap; } .rt-rrow .pr { font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; min-width:72px; text-align:end; } .rt-dlg-note { font-size:12px; color:var(--pos-text-muted); line-height:1.7; margin-bottom:.8rem; } /* ── Retail checkout (R2.2): payment dialog + change due ─────────────────── */ .rt-paysum { display:grid; gap:.3rem; margin-bottom:.9rem; } .rt-paysum .row{ display:flex; justify-content:space-between; font-size:14px; color:var(--pos-text-muted); } .rt-paysum .row b { font-variant-numeric:tabular-nums; color:var(--pos-text); font-size:16px; } .rt-paysum .row.due b { color:var(--pos-danger-text); } .rt-paysum .row.chg b { color:var(--pos-success-text); } .rt-tenderlist { display:grid; gap:.35rem; margin-bottom:.9rem; } .rt-tender { display:flex; align-items:center; gap:.6rem; padding:.45rem .7rem; border-radius:10px; background:var(--pos-panel); border:1px solid var(--pos-border); } .rt-tender .n { flex:1; font-size:13.5px; font-weight:600; } .rt-tender .a { font-variant-numeric:tabular-nums; font-weight:800; } .rt-paygrid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .rt-paybuf { height:56px; border-radius:12px; background:var(--pos-tile); border:2px solid var(--pos-accent); display:flex; align-items:center; justify-content:flex-end; padding:0 .9rem; font-size:26px; font-weight:800; font-variant-numeric:tabular-nums; margin-bottom:.6rem; } .rt-paypad { display:grid; grid-template-columns:repeat(3,1fr); gap:.45rem; } .rt-paypad button { height:52px; border-radius:12px; background:var(--pos-tile); border:1px solid var(--pos-border); color:var(--pos-text); font-size:19px; font-weight:700; font-variant-numeric:tabular-nums; cursor:pointer; font-family:inherit; } .rt-paypad button:hover { border-color:var(--pos-accent); } .rt-paypad button.clr { grid-column:span 3; color:var(--pos-danger-text); font-size:15px; } .rt-terms { display:grid; gap:.5rem; align-content:start; } .rt-term { min-height:58px; border-radius:12px; background:var(--pos-tile); border:1px solid var(--pos-border); color:var(--pos-text); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.1rem; cursor:pointer; font-family:inherit; padding:.4rem; } .rt-term:hover { border-color:var(--pos-accent); background:var(--pos-accent-tint); } .rt-term .tn { font-size:15px; font-weight:700; } .rt-term .th { font-size:11.5px; color:var(--pos-text-muted); font-variant-numeric:tabular-nums; } /* Change due — deliberately enormous. It is the number the cashier must not get wrong. */ .rt-change { text-align:center; padding:1.4rem .5rem .4rem; } .rt-change .k { font-size:15px; font-weight:700; color:var(--pos-text-muted); } .rt-change .v { font-size:84px; line-height:1; font-weight:800; color:var(--pos-success-text); font-variant-numeric:tabular-nums; margin:.35rem 0 .2rem; } .rt-change .v.ok { font-size:64px; } .rt-change .sub{ font-size:14px; color:var(--pos-text-muted); font-variant-numeric:tabular-nums; } .rt-change .sub b { color:var(--pos-text); } /* ── Retail R2.3: quick keys · weight pad · price check ──────────────────── */ .rt-qkgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.7rem; } .rt-qk { background:var(--pos-tile); border:1px solid var(--pos-border); border-radius:var(--pos-radius); padding:.85rem .7rem; text-align:center; cursor:pointer; font-family:inherit; color:var(--pos-text); display:flex; flex-direction:column; gap:.15rem; transition:.15s; } .rt-qk:hover { transform:translateY(-3px); border-color:var(--pos-accent); } .rt-qk .qn { font-size:13.5px; font-weight:700; line-height:1.3; } .rt-qk .qp { font-size:15px; font-weight:800; color:var(--pos-accent-text); font-variant-numeric:tabular-nums; } .rt-qk .qu { font-size:11px; color:var(--pos-text-muted); } .rt-wgt { text-align:center; padding:.4rem .5rem 0; } .rt-wgt .wnm { font-size:20px; font-weight:800; } .rt-wgt .wpr { font-size:13px; color:var(--pos-text-muted); margin-top:.15rem; } .rt-wgt .wval { margin:1rem auto .3rem; max-width:280px; height:66px; border-radius:14px; background:var(--pos-tile); border:2px solid var(--pos-accent); display:flex; align-items:center; justify-content:center; font-size:34px; font-weight:800; font-variant-numeric:tabular-nums; } .rt-wgt .wtot { font-size:14px; color:var(--pos-text-muted); } .rt-wgt .wtot b{ font-size:20px; color:var(--pos-text); font-variant-numeric:tabular-nums; } /* Read-only BY CONSTRUCTION: the resolve DTO carries no cost and no stock, so there is nothing here a customer must not see over the cashier's shoulder. */ .rt-pchk { text-align:center; padding:.8rem .5rem .2rem; } .rt-pchk .badge2 { display:inline-flex; align-items:center; gap:.4rem; font-size:11.5px; font-weight:800; padding:.25rem .8rem; border-radius:999px; background:var(--pos-info-soft); color:var(--pos-info-text); } .rt-pchk .nm2 { font-size:23px; font-weight:800; margin:.75rem 0 .1rem; } .rt-pchk .cd { font-size:12px; color:var(--pos-text-muted); font-family:ui-monospace,monospace; } .rt-pchk .pr2 { font-size:58px; font-weight:800; font-variant-numeric:tabular-nums; margin:.45rem 0 0; } .rt-pchk .u2 { font-size:13.5px; color:var(--pos-text-muted); } /* the armed price-check button, so a cashier can see the mode is on */ .rt-sact.armed { background:var(--pos-accent); color:#fff; } /* ═══ RA5 — the availability ("86") board (/pos/availability) ═══════════════ NEW classes only; nothing above is touched. The tile is deliberately dense and text-first rather than a copy of the register tile: this screen is scanned by a manager looking for one dish, not tapped by a cashier building a cart. */ .avb-root { padding:1rem 1.15rem 2rem; display:flex; flex-direction:column; gap:.75rem; } .avb-bar { display:flex; align-items:center; gap:.7rem; } .avb-title{ font-size:19px; font-weight:800; } .avb-error{ padding:.7rem .9rem; font-size:13px; color:var(--pos-danger-text, #b91c1c); } .avb-toolbar { display:flex; align-items:center; gap:.9rem; padding:.7rem .9rem; flex-wrap:wrap; } .avb-search { flex:1 1 260px; min-width:200px; } .avb-check { display:flex; align-items:center; gap:.4rem; font-size:13px; white-space:nowrap; } .avb-count { font-size:12.5px; color:var(--pos-text-muted); margin-inline-start:auto; } .avb-actions { display:flex; align-items:center; gap:.5rem; padding:.7rem .9rem; flex-wrap:wrap; } .avb-sel { font-size:13px; font-weight:700; margin-inline-end:.35rem; } .avb-grid { display:grid; gap:.6rem; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); } .avb-tile { position:relative; text-align:start; padding:.7rem .8rem; border-radius:12px; cursor:pointer; background:var(--pos-tile); border:1.5px solid var(--pos-border); color:var(--pos-text); display:flex; flex-direction:column; gap:.15rem; min-height:78px; } .avb-tile:hover { background:var(--pos-tile-hover); } .avb-tile.sel { border-color:var(--pos-accent); box-shadow:inset 0 0 0 1.5px var(--pos-accent); } .avb-tile.st-u { border-color:var(--pos-danger, #b91c1c); } .avb-tile.st-l { border-color:var(--pos-accent, #b45309); } .avb-tile .avb-state { position:absolute; top:8px; inset-inline-end:8px; height:20px; padding:0 .45rem; border-radius:7px; font-size:11px; font-weight:800; display:grid; place-items:center; background:var(--pos-bg); color:var(--pos-text-muted); } .avb-tile.st-u .avb-state { background:var(--pos-danger, #b91c1c); color:#fff; } .avb-tile.st-l .avb-state { background:var(--pos-accent, #b45309); color:#fff; } .avb-tile .avb-name { font-size:14px; font-weight:700; padding-inline-end:52px; } .avb-tile .avb-meta { font-size:11.5px; color:var(--pos-text-faint); } .avb-tile .avb-reason { font-size:11.5px; color:var(--pos-text-muted); font-style:italic; } .avb-tile .avb-until { font-size:11px; color:var(--pos-text-faint); } .avb-reasons { display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem; } .avb-reasonrow { display:flex; align-items:center; gap:.6rem; font-size:13px; } .avb-reasonrow .ar { min-width:160px; font-weight:600; } .avb-reasonrow .en { min-width:160px; color:var(--pos-text-muted); } .avb-reasonedit { display:flex; align-items:flex-end; gap:.6rem; flex-wrap:wrap; } .avb-kpis { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem; } .avb-kpi { padding:.6rem .9rem; border-radius:10px; background:var(--pos-tile); min-width:120px; } .avb-kpi.warn { box-shadow:inset 0 0 0 1.5px var(--pos-accent, #b45309); } .avb-kpi .v { display:block; font-size:22px; font-weight:800; } .avb-kpi .k { display:block; font-size:11.5px; color:var(--pos-text-muted); } .avb-health { margin-bottom:1.25rem; } .avb-health .h { font-size:14px; font-weight:800; margin-bottom:.15rem; } .avb-health .hint { font-size:12px; margin-bottom:.5rem; } .avb-health .rows { display:flex; flex-direction:column; gap:.25rem; } .avb-health .row { display:flex; gap:.6rem; font-size:12.5px; } .avb-health .row .no { color:var(--pos-text-faint); } .avb-modal { max-width:420px; } /* RA7 — the reset presets. A datetime picker on a touch till mid-service is the reason nobody sets a reset time at all; these are the three answers anyone actually gives. */ .avb-presets { display:flex; gap:.4rem; flex-wrap:wrap; } .avb-presets .pos-btn { height:34px; padding:0 .7rem; font-size:12.5px; } /* RA6 — a restricted modifier option. DISABLED, never hidden: dropping it would change the picker's Required/MinSelect arithmetic and make the parent silently unorderable. */ .pos-btn.pos-opt-86:disabled { opacity:.45; filter:grayscale(.7); cursor:not-allowed; border-color:var(--pos-danger, #b91c1c); } .pos-opt-blocked { margin-top:.4rem; font-size:12px; font-weight:700; color:var(--pos-danger-text, #b91c1c); } /* RA6 — the modifier half of the board. Text-first: the operator is reading which mechanism governs each option, which is the whole point of the tab. */ .avb-optlist { display:flex; flex-direction:column; gap:.3rem; } .avb-optrow { display:grid; grid-template-columns:1.4fr 1fr 1.6fr auto; align-items:center; gap:.6rem; font-size:13px; padding:.35rem .5rem; border-radius:8px; } .avb-optrow.off { background:var(--pos-tile); } .avb-optrow .nm { font-weight:700; } .avb-optrow .grp { color:var(--pos-text-muted); font-size:12px; } .avb-optrow .how { color:var(--pos-text-faint); font-size:11.5px; } /* RA8 — the oversell badge. Only a two-terminal race produces a negative Remaining, and the magnitude is the only record of how many extra plates went out, so it is shown not hidden. */ .avb-tile .avb-over { font-size:11px; font-weight:800; color:var(--pos-danger-text, #b91c1c); } /* ═══ RA5/RA6/RA8 — classes these screens actually need ═════════════════════ ⚠ Found by running the board, not by reading it. Two mistakes were live here: · `pos-modal` / `pos-modal-backdrop` DO NOT EXIST — the house modal is `pos-modal-backdrop2` + a `pos-card` child. Without the fixed-position backdrop the dialog rendered as an ordinary in-flow div ~2800px down the page: present in the DOM, invisible to the operator, and impossible to reach. · `mset-tab` / `mset-tabs` live in PosModifierSetup.razor.css, which Blazor SCOPES to that component, so borrowing the names styled nothing here. Both are the sort of thing a compile and a SQL harness cannot see. */ .avb-tabs { display:flex; gap:.3rem; border-bottom:1px solid var(--pos-border); } .avb-tab { padding:.6rem 1rem; font-size:14px; font-weight:600; color:var(--pos-text-muted); border:none; background:transparent; border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; } .avb-tab:hover { color:var(--pos-text); } .avb-tab.active { color:var(--pos-text); border-bottom-color:var(--pos-accent); } .avb-muted { color:var(--pos-text-muted); } /* the dialog itself: the backdrop centres it, so it only needs a width and a cap */ .avb-modal { width:420px; max-width:95vw; max-height:92vh; overflow:auto; padding:1.1rem 1.25rem; } .avb-modal-title { font-size:18px; font-weight:800; margin-bottom:.5rem; } .avb-modal-actions { display:flex; gap:.5rem; justify-content:flex-end; margin-top:1.1rem; flex-wrap:wrap; }