/* Madar POS: the till and the admin portal share this. The tokens are the Madar design system's (workspace.html, 27 Sep 2026): the system typeface, Apple's grey ladder, one radius scale, copper for the human side (the primary action, what needs you) and ice for the machine side (data). Dark is the brand; light follows the device, and a shop floor in daylight usually wants light. data-theme on is a person's own choice. */ :root{ color-scheme:dark; --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro",system-ui,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans Arabic",sans-serif; --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro",system-ui,"Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans Arabic",sans-serif; --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace; --bg:#1C1C1E; --side:#232325; --surface:#2C2C2E; --surface-2:#3A3A3C; --elevated:#262628; --fill:rgba(118,118,128,.24); --fill-2:rgba(118,118,128,.16); --fill-3:rgba(118,118,128,.1); --field:rgba(118,118,128,.14); --field-line:rgba(255,255,255,.1); --sep:rgba(255,255,255,.08); --sep-2:rgba(255,255,255,.14); --label:#F5F5F7; --label-2:#A1A1A6; --label-3:#98989D; --on-red:#1A0E08; --copper:#F2926B; --copper-ink:#F2926B; --on-copper:#1A0E08; --copper-tint:rgba(242,146,107,.16); --ice:#9BC1E0; --ice-ink:#9BC1E0; --ice-tint:rgba(155,193,224,.14); --green-ink:#30D158; --green-tint:rgba(48,209,88,.14); --orange-ink:#FFB340; --orange-tint:rgba(255,159,10,.16); --red-ink:#FF7B73; --red-tint:rgba(255,69,58,.16); --scrim:rgba(0,0,0,.55); --shadow:0 24px 70px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.3); --r-xs:6px; --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px; --spring:cubic-bezier(.32,.72,0,1); --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px); } @media (prefers-color-scheme:light){ :root:not([data-theme="dark"]){ color-scheme:light; --bg:#F5F5F7; --side:#ECECEE; --surface:#FEFEFE; --surface-2:#F2F2F4; --elevated:#FEFEFE; --fill:rgba(118,118,128,.16); --fill-2:rgba(118,118,128,.1); --fill-3:rgba(118,118,128,.06); --field:#FEFEFE; --field-line:rgba(0,0,0,.14); --sep:rgba(0,0,0,.08); --sep-2:rgba(0,0,0,.14); --label:#1D1D1F; --label-2:#5E5E63; --label-3:#6E6E73; --copper-ink:#A5532F; --copper-tint:rgba(242,146,107,.2); --ice-ink:#2A6497; --ice-tint:rgba(58,125,181,.12); --green-ink:#1E7B34; --green-tint:rgba(52,199,89,.14); --orange-ink:#A35200; --orange-tint:rgba(255,149,0,.16); --red-ink:#C4161C; --red-tint:rgba(255,59,48,.12); --scrim:rgba(0,0,0,.3); --shadow:0 24px 70px rgba(40,30,20,.22),0 2px 8px rgba(40,30,20,.1); --on-red:#fff; } } :root[data-theme="light"]{ color-scheme:light; --bg:#F5F5F7; --side:#ECECEE; --surface:#FEFEFE; --surface-2:#F2F2F4; --elevated:#FEFEFE; --fill:rgba(118,118,128,.16); --fill-2:rgba(118,118,128,.1); --fill-3:rgba(118,118,128,.06); --field:#FEFEFE; --field-line:rgba(0,0,0,.14); --sep:rgba(0,0,0,.08); --sep-2:rgba(0,0,0,.14); --label:#1D1D1F; --label-2:#5E5E63; --label-3:#6E6E73; --copper-ink:#A5532F; --copper-tint:rgba(242,146,107,.2); --ice-ink:#2A6497; --ice-tint:rgba(58,125,181,.12); --green-ink:#1E7B34; --green-tint:rgba(52,199,89,.14); --orange-ink:#A35200; --orange-tint:rgba(255,149,0,.16); --red-ink:#C4161C; --red-tint:rgba(255,59,48,.12); --scrim:rgba(0,0,0,.3); --shadow:0 24px 70px rgba(40,30,20,.22),0 2px 8px rgba(40,30,20,.1); --on-red:#fff; } *{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--bg);color:var(--label);font:15px/1.45 var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent} button,input,select,textarea{font:inherit;color:inherit} .num{font-variant-numeric:tabular-nums} [hidden]{display:none!important} :focus-visible{outline:2px solid var(--copper);outline-offset:2px} ::selection{background:var(--copper-tint)} input,textarea{caret-color:var(--copper)} a{color:var(--ice-ink)} input[type=checkbox]{accent-color:var(--copper);width:20px;height:20px} *{scrollbar-color:var(--fill) transparent} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border:0;border-radius:var(--r-sm); background:var(--fill-2);color:var(--label);font-weight:560;cursor:pointer;white-space:nowrap;text-decoration:none;transition:filter .12s,transform .08s} .btn:hover{background:var(--fill)} .btn:active{transform:scale(.98)} .btn:disabled{opacity:.45;cursor:default;transform:none} .btn.primary{background:var(--copper);color:var(--on-copper)} .btn.primary:hover{filter:brightness(1.06)} .btn.quiet{background:transparent;color:var(--ice-ink)} .btn.quiet:hover{background:var(--ice-tint)} .btn.danger{background:var(--red-tint);color:var(--red-ink)} .btn.sm{height:32px;padding:0 12px;font-size:13.5px} .btn.lg{height:56px;font-size:17px;border-radius:var(--r)} /* fields */ .field{display:grid;gap:6px;font-size:13px;color:var(--label-2)} .field input,.field select,.field textarea,input.in,select.in{width:100%;height:40px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--field-line);background:var(--field);color:var(--label);font-size:15px} .field textarea{height:auto;min-height:72px;padding:10px 12px;resize:vertical} .field .hint{font-size:12px;color:var(--label-3)} .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} @media (max-width:560px){.grid2,.grid3{grid-template-columns:1fr}} /* level pills: state in form as well as colour */ .pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:var(--r-pill);font-size:12px;font-weight:600;white-space:nowrap} .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .pill.ok{background:var(--green-tint);color:var(--green-ink)} .pill.low{background:var(--orange-tint);color:var(--orange-ink)} .pill.out,.pill.count{background:var(--red-tint);color:var(--red-ink)} .pill.unset{background:var(--fill-2);color:var(--label-2)} /* sheets */ .scrim{position:fixed;inset:0;z-index:50;background:var(--scrim);display:grid;place-items:center;padding:16px;animation:fade .15s} .sheet{width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--elevated);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:20px;display:grid;gap:14px;animation:rise .24s var(--spring)} .sheet h3{margin:0;font:650 19px/1.25 var(--font-display);letter-spacing:-.01em} .sheet .row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap} @keyframes rise{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}} @keyframes fade{from{opacity:0}to{opacity:1}} /* toast */ .toast{position:fixed;left:50%;bottom:calc(20px + var(--safe-b));transform:translateX(-50%);z-index:80;background:var(--label);color:var(--bg);padding:10px 16px;border-radius:var(--r-pill);font-size:14px;font-weight:560;box-shadow:var(--shadow);max-width:calc(100vw - 32px)} .toast.bad{background:var(--red-ink);color:var(--on-red)} .err{color:var(--red-ink);font-size:13.5px;min-height:1em} .muted{color:var(--label-2)} .mark{display:inline-flex;align-items:center;gap:8px;font:700 15px/1 var(--font-display);letter-spacing:-.01em} .mark svg{width:20px;height:20px} /* the offline banner: the till says it cannot record, and does not pretend */ .offline{position:fixed;top:0;left:0;right:0;z-index:90;background:var(--orange-ink);color:var(--on-red);text-align:center;padding:calc(6px + var(--safe-t)) 12px 6px;font-size:13.5px;font-weight:600} .offline.sync{background:var(--surface-2);color:var(--label)} .offline.stuck{background:var(--red-ink);color:var(--on-red)} .offline button{font:inherit;color:inherit;background:transparent;border:1px solid currentColor;border-radius:var(--r-pill);padding:1px 10px;margin-left:8px;cursor:pointer} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* Receipts and invoices on a receipt roll (pos-common.js Pos.receipt): only #receipt prints. Each copy is its own page, so a printer set to cut per page cuts between the customer's copy and the merchant's. The receipt's own look is outside the print block so Pos.print can measure it before printing: the page is then exactly as long as the longest copy (a page size of "80mm auto" is not valid CSS, and Chrome printed US Letter). */ #receipt{display:none} .rc{width:72mm;margin:0 auto;padding:3mm 0 6mm;font:12px/1.35 ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:#000;background:#fff;break-after:page;page-break-after:always;overflow-wrap:anywhere} .rc:last-child{break-after:auto;page-break-after:auto} .rc .c{text-align:center} .rc .b{font-weight:700} .rc .t{font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;text-align:center;margin:4px 0} .rc hr{border:0;border-top:1px dashed #000;margin:5px 0} .rc .l{display:flex;justify-content:space-between;gap:8px} .rc .l>span:first-child{min-width:0} .rc .l>span:last-child{flex:none;white-space:nowrap} .rc .s{font-size:11px} /* Arabic in a monospace face comes out stretched: a real Arabic face, as Windows and macOS have. */ .rc [dir="rtl"]{font-family:Tahoma,"Segoe UI","Geeza Pro","Noto Naskh Arabic",sans-serif;font-size:12.5px} .rc .sig{margin-top:14px;border-top:1px solid #000;padding-top:2px;font-size:11px} /* A 58 mm roll prints 48 mm wide. */ #receipt.p58 .rc{width:48mm;font-size:10.5px} #receipt.p58 .rc .s{font-size:9.5px} #receipt.p58 .rc .t{font-size:12px} @media print{ @page{size:80mm 200mm;margin:0} body{background:#fff!important;color:#000!important} body>*:not(#receipt){display:none!important} #receipt{display:block!important} } /* The guide (pos-common.js Pos.guide): the page dims, one thing is lit, and a card says what it is for. No chat: pointing, in plain words. */ .gd-spot{position:fixed;z-index:90;border-radius:var(--r);box-shadow:0 0 0 9999px rgba(0,0,0,.58),0 0 0 3px var(--copper);transition:left .25s var(--spring),top .25s var(--spring),width .25s var(--spring),height .25s var(--spring);pointer-events:none} .gd-card{position:fixed;z-index:91;width:min(340px,calc(100vw - 24px));background:var(--elevated);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:16px;display:grid;gap:8px;animation:rise .2s var(--spring)} .gd-card .n{font-size:12px;font-weight:600;color:var(--copper-ink);letter-spacing:.02em} .gd-card h4{margin:0;font:650 16px/1.3 var(--font-display)} .gd-card p{margin:0;font-size:14px;line-height:1.5;color:var(--label-2)} .gd-card .row{display:flex;gap:8px;align-items:center;margin-top:4px} .gd-card .row .gap{flex:1} .gd-help{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + var(--safe-b));z-index:40;width:44px;height:44px;border-radius:50%;border:0;background:var(--surface-2);color:var(--label);font:700 20px var(--font-display);box-shadow:var(--shadow);cursor:pointer} .gd-help:hover{background:var(--fill)} @media print{.gd-help,.gd-spot,.gd-card{display:none!important}} /* Touch screens: every control a finger can hit reliably (44 px), the basket's plus and minus bigger still. The amount a cashier types reads large. */ @media (pointer:coarse){.btn.sm{height:44px}} .sheet input.big{font:700 34px/1.1 var(--font-display);letter-spacing:-.01em}