/* Copyright (c) 2026 Dow Furniture. Burl Home. All rights reserved. Proprietary and confidential: see LICENSE. */ /* Burl Home — touch-friendly POS UI in the Burl Home brand (Ink, Bone, Burl Amber; Sora + Figtree). App colors come from the Burl Home theme kit (burl-home.css, --bh-*). Status colors (green / amber / red / blue) and chart colors stay separate so meaning never depends on the brand palette. ============================== DESIGN RULES (read before building a screen) ============================== Goal: calm, uniform, Apple-like. Every screen is built from the tokens and classes below; no new literal sizes, colors or radii in inline style="" — if a utility is missing, add it here. TYPE (Figtree body, Sora for h1/h2/big numbers). Nothing on screen below 13px (printDoc templates exempt). .caption 13 · .footnote 14 · body 16 (dense tables 15) · .headline 17/600 · .title2 22 · .large-title 30 h1 = large title · h2 = headline (cards) / title2 (sheets) · h3 = headline · small/.muted helper text = footnote Tokens: --fs-caption --fs-footnote --fs-body --fs-dense --fs-headline --fs-title2 --fs-large SPACE --s1 4 · --s2 8 · --s3 12 · --s4 16 · --s5 24 · --s6 32 (gaps, margins, padding: use these only) RADIUS --r-sm 8 (inputs, small chips, thumbnails) · --r 12 (buttons, cards, rows) · --r-lg 18 (sheets, big cards) · --r-pill 999 COLOR text: --ink, --muted (secondary), --faint (tertiary, ≥13px only); surfaces: --bg, --panel, --panel-2; brand: --brand (fills) + --on-brand, --brand-text (brand-colored text/icons on surfaces), --brand-soft (tint); status: --accent/--warn/--bad/--info (text) + *-soft (tint) ; filled: --accent + --on-accent, --bad-strong + --on-bad; --focus (keyboard ring). Never hard-code #fff/#000 or rgba() colors in a component: add a token. Every text pair here is ≥ 4.5:1 in light and dark (checked; see the design-system commit). TOUCH 44px minimum for anything tappable (--tap-min); 48px default (--tap); floor mode and New sale use 48–56. FOCUS Every interactive element shows a 2px --focus ring on :focus-visible (offset 2px). Never remove outlines. BUTTONS — 5 variants only primary 44px square, ALWAYS has aria-label remove buttons: rmBtn("Sofa") → icon danger button labelled "Remove Sofa" size: .small = compact (44px, 14px text) — only inside table rows / dense lists. Labels are sentence case and name the action ("Void order", not "OK"). Dismiss = "Cancel" when something is pending, "Done"/"Close" when nothing is. Long saves: busy(button, promise). ICONS ic(name) from ui.js (24-grid, 1.8 stroke, currentColor). No emoji or text glyphs as icons. STATUS .badge (+ .b-, .ok/.warn/.bad/.info) for state; ✓/✕ text never stands alone. UTILITIES layout .hstack (row, gap 8, centered) .vstack (column, gap 8) .grow (flex:1) .wrap .gap-1…gap-4 .spacer (push right) space .mt-0…mt-4 .mb-0…mb-4 (0/4/8/12/16 = --s1…--s4) text .caption .footnote .headline .title2 .muted .faint .num (tabular, right-aligned in tables) .tnum (tabular only) .nowrap .right .center .bold .ok-text .warn-text .bad-text .info-text size .w-auto .w-full .maxw-sm (360) .maxw-md (520) .maxw-lg (760) ============================================================================================================ */ :root { --navy: var(--brand-text); --navy-dark: var(--bh-primary-hover); --navy-deep: var(--bh-text); --sage: var(--bh-honey); --sage-soft: rgba(233,178,98,.20); --bg: var(--bh-bg); --panel: var(--bh-surface); --panel-2: #FBF8F2; --sidebar: var(--bh-surface); --ink: var(--bh-text); --muted: var(--bh-text-muted); --faint: #676E77; --line: var(--bh-border); --field: #ffffff; --field-line: #D6CCBC; --brand: var(--bh-primary); --brand-hover: var(--bh-primary-hover); --brand-soft: rgba(150,87,26,.09); --on-brand: var(--bh-on-primary); --nav-active: var(--bh-surface-muted); --focus: var(--bh-focus); --accent: #4E6B4A; --accent-soft: rgba(78,107,74,.13); --warn: #96571A; --warn-soft: rgba(233,178,98,.24); --bad: #B42318; --bad-soft: rgba(180,35,24,.10); --info: #3B6E99; --info-soft: rgba(59,110,153,.11); --radius: var(--r); --radius-sm: var(--r-sm); --shadow: 0 1px 2px rgba(24,34,46,.06), 0 4px 16px rgba(24,34,46,.06); --shadow-lg: var(--bh-shadow-raised), 0 24px 64px rgba(24,34,46,.18); --tap: 48px; /* default control height (Burl Home kit) */ --tap-min: 44px; /* the floor for anything tappable (Apple HIG) */ /* spacing */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; /* radius */ --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-pill: 999px; /* type scale */ --fs-caption: 13px; --fs-footnote: 14px; --fs-body: 16px; --fs-dense: 15px; --fs-headline: 17px; --fs-title2: 22px; --fs-large: 30px; /* semantic colors that pair with a fill */ --brand-text: var(--bh-link); /* brand-colored text and icons on a surface */ --on-accent: #FFFFFF; --bad-strong: #B42318; --on-bad: #FFFFFF; --btn-hover: rgba(150,87,26,.16); /* default button hover tint */ --tab-hover: color-mix(in srgb, var(--panel) 55%, transparent); --toast-bg: rgba(30,30,32,.95); --toast-ok: #34513A; --toast-bad: #B42318; --on-toast: #FFFFFF; --on-toast-btn: rgba(255,255,255,.18); --scrim: rgba(0,0,0,.34); --font: var(--bh-font-body); --font-display: var(--bh-font-display); --mark-ring: var(--bh-ink); --mark-mid: var(--bh-amber); --mark-eye: var(--bh-amber); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sage-soft: rgba(233,178,98,.14); --panel-2: #202B38; --faint: #8E99A6; --field: #1B2531; --field-line: #3A4859; --brand-soft: rgba(192,122,44,.16); --accent: #A9CFA4; --accent-soft: rgba(169,207,164,.14); --warn: #E9B262; --warn-soft: rgba(233,178,98,.16); --bad: #F4AAA2; --bad-soft: rgba(244,170,162,.14); --info: #8FB8DD; --info-soft: rgba(143,184,221,.15); --shadow: 0 1px 2px rgba(0,0,0,.6); --shadow-lg: 0 24px 64px rgba(0,0,0,.7); --on-accent: var(--bh-ink); --btn-hover: rgba(192,122,44,.26); --mark-ring: var(--bh-bone); --mark-eye: var(--bh-honey); color-scheme: dark; }} :root[data-theme="dark"] { --sage-soft: rgba(233,178,98,.14); --panel-2: #202B38; --faint: #8E99A6; --field: #1B2531; --field-line: #3A4859; --brand-soft: rgba(192,122,44,.16); --accent: #A9CFA4; --accent-soft: rgba(169,207,164,.14); --warn: #E9B262; --warn-soft: rgba(233,178,98,.16); --bad: #F4AAA2; --bad-soft: rgba(244,170,162,.14); --info: #8FB8DD; --info-soft: rgba(143,184,221,.15); --shadow: 0 1px 2px rgba(0,0,0,.6); --shadow-lg: 0 24px 64px rgba(0,0,0,.7); --on-accent: var(--bh-ink); --btn-hover: rgba(192,122,44,.26); --mark-ring: var(--bh-bone); --mark-eye: var(--bh-honey); color-scheme: dark; } :root[data-text="large"] { font-size: 112%; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { font-family: var(--font); } body { margin: 0; background: var(--bg); color: var(--ink); display: flex; min-height: 100vh; font-size: var(--fs-body); line-height: 1.4; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; } svg.i { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } a { color: var(--navy); } /* ---------- sidebar ---------- */ .sidebar { width: 248px; flex-shrink: 0; height: 100vh; position: sticky; top: 0; padding: 16px 12px 12px; display: flex; flex-direction: column; overflow-y: auto; background: var(--sidebar); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-right: 1px solid var(--line); } .brand { display: flex; gap: 10px; align-items: center; padding: 2px 8px 14px; line-height: 1.15; font-weight: 700; } .brand.bh-brand { flex-direction: column; align-items: flex-start; gap: 2px; text-decoration: none; color: var(--ink); } .bh-brand .bh-row { display: flex; align-items: center; gap: 10px; } .bh-brand .store { font-size: var(--fs-caption); font-weight: 600; color: var(--muted); padding-left: 42px; } /* Burl Home logo: the burl mark (drawn inline so it follows light/dark) + the Sora word mark */ .bh-mark { width: 32px; height: 32px; flex-shrink: 0; fill: none; stroke: var(--mark-ring); stroke-width: 7; } .bh-mark .r2 { stroke: var(--mark-mid); } .bh-mark .eye { fill: var(--mark-eye); stroke: none; } .bh-word { font-family: var(--font-display); font-size: 21px; letter-spacing: -.03em; line-height: 1; color: var(--ink); white-space: nowrap; } .bh-word b { font-weight: 700; } .bh-word { font-weight: 300; } .auth-brand.bh-brand .bh-word { font-size: 24px; } .auth-brand .bh-mark { width: 40px; height: 40px; } h1, h2, .term-amt, .stat .v, .ns-total b, .change-amt, .big-price, .plan .amt { font-family: var(--font-display); } h1, h2 { font-weight: 600; letter-spacing: -.02em; } .brand small { display: block; font-weight: 500; font-size: var(--fs-caption); color: var(--muted); } .logo { background: var(--brand); color: var(--on-brand); font-weight: 700; font-size: 14px; width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; letter-spacing: -.5px; flex-shrink: 0; } .search-btn { display: flex; align-items: center; gap: 8px; margin: 0 4px 6px; padding: 0 10px; min-height: var(--tap); border-radius: var(--r-sm); border: none; background: var(--brand-soft); color: var(--muted); cursor: pointer; font: inherit; } .search-btn kbd { margin-left: auto; font-family: var(--font); font-size: var(--fs-caption); color: var(--faint); } nav { display: flex; flex-direction: column; gap: 1px; } nav .sec { font-size: var(--fs-caption); font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; padding: 14px 10px 4px; } nav a { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; padding: 0 10px; min-height: var(--tap); border-radius: var(--r-sm); font-size: var(--fs-dense); } nav a svg { color: var(--navy); } nav a:hover { background: var(--brand-soft); } nav a.active { background: var(--nav-active); color: var(--brand-text); font-weight: 700; } nav a.active svg { color: var(--brand-text); } nav a .count { margin-left: auto; font-size: var(--fs-caption); font-weight: 600; color: var(--faint); } nav a .count.hot { background: var(--bad-strong); color: var(--on-bad); border-radius: var(--r-pill); padding: 1px 7px; } nav a.active .count { color: var(--muted); } nav a.active .count.hot { background: var(--bad-strong); color: var(--on-bad); } nav a .count:empty { display: none; } .dt-mode { margin-top: 6px; font-size: var(--fs-caption); padding: 8px 10px; border-radius: var(--r-sm); color: var(--muted); } .copyright { font-size: var(--fs-caption); color: var(--faint); padding: 6px 10px 0; line-height: 1.4; } @media (max-width: 1000px) { .sidebar .copyright { display: none; } } .user-chip { margin-top: auto; padding: 10px 6px 4px; border-top: 1px solid var(--line); } .user-chip .who { display: flex; align-items: center; gap: 10px; } .user-chip .who b { display: block; font-size: 14px; } .user-chip .who small { color: var(--muted); font-size: var(--fs-caption); } .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--sage); color: #1d1d1f; display: grid; place-items: center; font-weight: 600; font-size: 13px; flex-shrink: 0; } .user-chip .actions { margin-top: 8px; gap: 6px; } .user-chip .btn, .user-chip button { min-height: var(--tap-min); padding: 0 10px; font-size: var(--fs-footnote); background: transparent; } /* ---------- page ---------- */ main { flex: 1; padding: 22px 32px 120px; min-width: 0; } h1 { font-size: var(--fs-large); font-weight: 700; letter-spacing: -.025em; margin: 4px 0 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } h1 .actions { margin-left: auto; } h2 { font-size: var(--fs-headline); font-weight: 600; margin: 0 0 12px; letter-spacing: -.01em; } h3 { font-size: var(--fs-headline); font-weight: 600; margin: 0 0 8px; } small { font-size: var(--fs-footnote); } .row { display: flex; gap: 16px; flex-wrap: wrap; } .grow { flex: 1; min-width: 0; } .card { background: var(--panel); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow); } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; } .stat { background: var(--panel); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); } .stat .k { color: var(--muted); font-size: 13px; font-weight: 500; } .stat .v { font-size: 26px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } a.stat { text-decoration: none; color: inherit; display: block; } a.stat:hover { box-shadow: 0 0 0 2px var(--brand-soft), var(--shadow); } .muted { color: var(--muted); } .empty { color: var(--muted); padding: 28px 16px; text-align: center; } .empty b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; } .hidden { display: none !important; } /* ---------- tables ---------- */ table { width: 100%; border-collapse: collapse; } th { text-align: left; font-size: var(--fs-caption); color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; } td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; height: var(--tap); font-size: var(--fs-dense); } tr:last-child td { border-bottom: none; } tr.click { cursor: pointer; } tr.click:hover td { background: var(--brand-soft); } .num { text-align: right; font-variant-numeric: tabular-nums; } .table-wrap { overflow-x: auto; } tr.tot td { font-weight: 700; border-top: 2px solid var(--navy); background: var(--brand-soft); } /* ---------- forms ---------- */ input, select, textarea { font: inherit; font-size: 16px; padding: 0 12px; min-height: var(--tap); border: 1px solid var(--field-line); border-radius: var(--radius-sm); background: var(--field); color: var(--ink); width: 100%; } textarea { padding: 10px 12px; min-height: 84px; resize: vertical; } select { padding-right: 8px; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); } input[readonly], input:disabled, select:disabled, textarea:disabled { background: var(--panel-2); color: var(--muted); } input[type="checkbox"], input[type="radio"], input.check { width: 22px; height: 22px; min-height: 0; padding: 0; accent-color: var(--brand); vertical-align: middle; cursor: pointer; } input[type="color"] { padding: 4px; } label { display: block; font-size: var(--fs-footnote); color: var(--muted); margin-bottom: 12px; font-weight: 500; } label > input, label > select, label > textarea { margin-top: 5px; } label:has(> input.check) { display: flex; align-items: center; gap: 10px; min-height: var(--tap); color: var(--ink); font-size: var(--fs-body); cursor: pointer; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; } .grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 12px; } td input, td select { min-height: var(--tap-min); } td input.qty { width: 72px; } td input.price { width: 110px; } /* ---------- buttons ---------- */ button, .btn { font: inherit; font-size: var(--fs-body); font-weight: 500; border: none; background: var(--brand-soft); color: var(--navy); padding: 0 16px; min-height: var(--tap); min-width: var(--tap); border-radius: var(--r); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; transition: transform .08s, background .15s; } button:hover, .btn:hover { background: var(--btn-hover); } button:active, .btn:active { transform: scale(.97); } button:disabled { opacity: .4; cursor: default; transform: none; } button.primary, .btn.primary { background: var(--brand); color: var(--on-brand); font-weight: 600; } button.primary:hover, .btn.primary:hover { background: var(--brand-hover); } button.danger, .btn.danger { color: var(--bad); background: var(--bad-soft); } button.danger:hover, .btn.danger:hover { background: color-mix(in srgb, var(--bad) 18%, transparent); } button.danger.filled { background: var(--bad-strong); color: var(--on-bad); font-weight: 600; } /* only the confirm button of ask({danger}) */ button.danger.filled:hover { background: color-mix(in srgb, var(--bad-strong) 88%, #000); } button.small, .btn.small { font-size: var(--fs-footnote); padding: 0 12px; min-height: var(--tap-min); min-width: var(--tap-min); } button.link { background: none; color: var(--navy); padding: 0 6px; min-width: 0; font-weight: 500; } button.link:hover { text-decoration: underline; background: none; } button.link:disabled { opacity: 1; } button.wide { width: 100%; min-height: 50px; font-size: 17px; } .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } select.print-fmt { width: auto; } /* Letter / Receipt (80 mm), beside a Print button */ .toolbar { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; } .toolbar input { max-width: 340px; } /* ---------- badges & tags ---------- */ .badge { display: inline-block; padding: 3px 9px; border-radius: var(--r-pill); font-size: var(--fs-caption); font-weight: 600; background: var(--panel-2); color: var(--muted); white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line); text-transform: capitalize; } .b-sent, .b-delivered, .b-Delivered, .b-resolved { background: var(--accent-soft); color: var(--accent); box-shadow: none; } .b-not_sent, .b-open, .b-new { background: var(--info-soft); color: var(--info); box-shadow: none; } .b-changed, .b-parts, .b-scheduled { background: var(--warn-soft); color: var(--warn); box-shadow: none; } .b-error, .b-void { background: var(--bad-soft); color: var(--bad); box-shadow: none; } .tag { display: inline-block; padding: 3px 9px; border-radius: var(--r-sm); font-size: var(--fs-caption); font-weight: 700; letter-spacing: .02em; white-space: nowrap; text-decoration: none; } .tag-cust { background: var(--brand); color: var(--on-brand); } .tag-stock { background: var(--panel-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); } .tag-special { background: var(--sage); color: #1d1d1f; } /* ---------- order editor ---------- */ .search-results { border-radius: var(--radius-sm); max-height: 320px; overflow: auto; margin-top: 6px; background: var(--panel); box-shadow: var(--shadow), 0 0 0 1px var(--line); } .search-results div { padding: 0 12px; min-height: 48px; cursor: pointer; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; } .search-results div:hover { background: var(--brand-soft); } .totals td { border: none; padding: 4px 8px; height: auto; } .totals tr.grand td { font-size: 18px; font-weight: 700; border-top: 1px solid var(--line); padding-top: 10px; } .dt-panel .status { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .errors { background: var(--bad-soft); color: var(--bad); border-radius: var(--radius-sm); padding: 12px 14px; margin: 10px 0; } .errors ul { margin: 4px 0 0; padding-left: 18px; } .ok-box { background: var(--accent-soft); color: var(--accent); border-radius: var(--radius-sm); padding: 12px 14px; margin: 10px 0; } pre.xml { background: #1c1c1e; color: #e3e8f2; padding: 14px; border-radius: var(--radius-sm); overflow: auto; max-height: 55vh; font-size: var(--fs-caption); line-height: 1.45; } .day-group h2 { display: flex; justify-content: space-between; align-items: center; } .price-box { background: var(--brand-soft); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 10px; } .price-box table td { border: none; padding: 3px 6px; height: auto; } .price-box .big { font-size: 22px; font-weight: 700; color: var(--navy); } .inline { display: flex; gap: 6px; } .inline select { width: 72px; flex-shrink: 0; } .loc-cell { font-variant-numeric: tabular-nums; text-align: center; } .loc-zero { color: var(--faint); opacity: .6; } td select.loc { width: 170px; } .sp-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); } .lockbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--brand); color: var(--on-brand); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; } .lockbar.open { background: var(--warn-soft); color: var(--warn); } .lockbar button.primary { background: #fff; color: #1d1d1f; } /* the plain (brand-filled) bar: its button is a light pill with brand text, readable in light and dark */ .lockbar:not(.open):not(.quote):not(.change) button:not(.primary) { background: var(--on-brand); color: var(--brand); font-weight: 600; } .lockbar:not(.open):not(.quote):not(.change) button:not(.primary):hover { background: color-mix(in srgb, var(--on-brand) 88%, var(--brand)); } .lockbar:not(.open):not(.quote):not(.change) button:focus-visible { outline-color: var(--on-brand); } .lockbar.change { background: var(--bad-soft); color: var(--bad); box-shadow: inset 0 0 0 2px var(--bad); } .lockbar.change button.primary { background: var(--bad-strong); color: var(--on-bad); } .lockbar.quote { background: var(--info-soft); color: var(--info); } .lockbar.quote input { min-height: var(--tap-min); } .split-box { border-radius: var(--radius-sm); padding: 12px; max-width: 520px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); } .split-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; } .split-total { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; } .split-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; } .split-row select { flex: 1; } .split-row .pct { display: flex; align-items: center; gap: 4px; width: 118px; } .split-row .pct input { width: 90px; } .change-box { margin-top: 12px; padding: 16px; border-radius: var(--radius); background: var(--bad-soft); text-align: center; box-shadow: inset 0 0 0 2px var(--bad); } .change-amt { font-size: 38px; font-weight: 700; color: var(--bad); margin: 4px 0 10px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .change-hint { background: var(--warn-soft); color: var(--warn); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 0 8px; font-size: 14px; } .change-hint b { font-size: 16px; } /* ---------- tabs & chips & segmented ---------- */ .tabs { display: inline-flex; gap: 2px; flex-wrap: wrap; margin-bottom: 16px; background: var(--line); border-radius: var(--r); padding: 3px; } .tab { background: none; border-radius: var(--r-sm); padding: 0 16px; min-height: var(--tap-min); font-weight: 500; color: var(--ink); } .tab:hover { background: var(--tab-hover); } .tab.on { background: var(--panel); box-shadow: 0 1px 3px rgba(0,0,0,.14); font-weight: 600; color: var(--ink); } a.tab { text-decoration: none; display: inline-flex; } .seg { display: inline-flex; background: var(--line); border-radius: var(--r); padding: 3px; gap: 2px; flex-wrap: wrap; } .seg button { background: none; color: var(--ink); border-radius: var(--r-sm); min-height: var(--tap-min); padding: 0 16px; font-weight: 500; } .seg button.on { background: var(--panel); box-shadow: 0 1px 3px rgba(0,0,0,.14); font-weight: 600; } .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .chip { border-radius: var(--r-pill); padding: 0 16px; min-height: var(--tap); font-weight: 500; background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); } .chip small { color: var(--muted); margin-left: 4px; font-weight: 400; } .chip.small-chip { font-size: 14px; } .chip.on, .chip.small-chip.on { background: var(--brand); color: var(--on-brand); box-shadow: none; } .chip.on small { color: var(--on-brand); } /* delivery day chips: the date, then what's already booked ("3 stops · 9 pcs"); amber = nearly full, red = full (a warning only) */ .chip.day-chip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; padding: 4px 14px; } .chip.day-chip .dc-day small { margin-left: 4px; } .chip.day-chip .day-load { margin: 1px 0 0; font-size: 11.5px; font-variant-numeric: tabular-nums; } .chip.day-chip.near:not(.on) { background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn); } .chip.day-chip.near:not(.on) .day-load { color: var(--warn); font-weight: 600; } .chip.day-chip.full:not(.on) { background: var(--bad-soft); box-shadow: inset 0 0 0 1.5px var(--bad); } .chip.day-chip.full:not(.on) .day-load { color: var(--bad); font-weight: 600; } .chip.day-chip.full.on { box-shadow: inset 0 0 0 2px var(--bad); } .chip.day-chip.early:not(.on) { opacity: .62; } .day-group h2 .day-sum { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } /* delivery areas (Settings → Delivery days): the area's name on a day chip, a day the truck doesn't go there, the board's per-area line */ .chip.day-chip .day-area { margin: 1px 0 0; font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .01em; } .chip.day-chip.on .day-area { color: var(--on-brand); } .chip.day-chip.off-area:not(.on) { background: var(--panel-2); } .chip.day-chip.off-area:not(.on) .day-area { font-weight: 400; } .chip.day-chip.near:not(.on) .day-area { color: var(--warn); } .chip.day-chip.full:not(.on) .day-area { color: var(--bad); } .area-sum { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--s3); } .area-chip { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 4px 6px 4px 12px; border-radius: var(--r-pill); background: var(--panel-2); font-size: var(--fs-footnote); } .area-chip.bad { background: var(--bad-soft); color: var(--bad); } .area-place { gap: 2px; padding-right: 2px; } .area-place .link { min-height: 0; min-width: 0; padding: 2px; color: inherit; } .area-place .link svg.i { width: 14px; height: 14px; } .chip.area-day { cursor: pointer; display: inline-flex; align-items: center; min-height: 36px; } .chip.area-day:has(input:focus-visible) { outline: 2px solid var(--focus, var(--brand)); outline-offset: 2px; } .spsum { margin: -2px 0 12px; font-size: 15px; color: var(--muted); } .spsum b { color: var(--ink); } /* ---------- grouped lists (iOS Settings style) ---------- */ .group-title { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 22px 4px 7px; font-weight: 500; } .group { background: var(--panel); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .li { display: flex; align-items: center; gap: 12px; padding: 10px 16px; min-height: 56px; position: relative; } .li + .li::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--line); } .li.tap { cursor: pointer; } .li.tap:hover { background: var(--panel-2); } .li.tap:active { background: var(--brand-soft); } .li .main { flex: 1; min-width: 0; } .li .main b { display: block; font-weight: 600; font-size: 16px; } .li .main small { color: var(--muted); font-size: 14px; } .li .end { text-align: right; } .li .end b { display: block; font-variant-numeric: tabular-nums; } .li .end small { color: var(--muted); font-size: 13px; } .li .chev { color: var(--faint); } .li input, .li select { border: none; background: transparent; padding: 0; min-height: var(--tap-min); } .li input:focus, .li select:focus { outline: none; } .li label { margin: 0; flex: 1; } .pill { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-caption); font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); white-space: nowrap; } .pill.warn { background: var(--warn-soft); color: var(--warn); } .pill.navy { background: var(--brand-soft); color: var(--navy); } .pill.bad { background: var(--bad-soft); color: var(--bad); } .pill svg.i { width: 14px; height: 14px; } .check-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; flex-shrink: 0; } .check-dot svg.i { width: 16px; height: 16px; } .field { display: flex; align-items: center; gap: 10px; background: var(--panel); border-radius: var(--radius); padding: 0 14px; min-height: 54px; box-shadow: var(--shadow); } .field svg.i { color: var(--faint); } .field input { flex: 1; border: none; outline: none; background: none; font-size: 18px; min-height: 52px; padding: 0; } .field input:focus { outline: none; } .stepper { display: inline-flex; align-items: center; background: var(--bg); border-radius: var(--r); } .stepper button { width: var(--tap); background: none; font-size: 22px; color: var(--navy); padding: 0; } .stepper span { min-width: 30px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; } /* ---------- sheets (modal) ---------- */ .modal { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; animation: fadeIn .2s; } .modal-card { background: var(--panel); border-radius: var(--r-lg); padding: 22px; width: min(760px, 100%); max-height: 90vh; overflow: auto; box-shadow: var(--shadow-lg); animation: sheetIn .28s cubic-bezier(.2,.9,.3,1.1); } .modal-card.narrow { width: min(460px, 100%); } .modal-card h2 { font-size: var(--fs-title2); } .modal-card .sheet-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; } .modal-card .sheet-actions.stack { flex-direction: column-reverse; } .modal-card .sheet-actions.stack button { width: 100%; min-height: 50px; } @keyframes fadeIn { from { opacity: 0; } } @keyframes sheetIn { from { opacity: 0; transform: translateY(14px) scale(.97); } } /* ---------- spotlight (⌘K) ---------- */ .spot { position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 55; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; animation: fadeIn .15s; } .spot-card { width: min(640px, 100%); background: var(--panel); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; animation: sheetIn .2s; } .spot-field { display: flex; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid var(--line); } .spot-field svg.i { color: var(--faint); width: 22px; height: 22px; } .spot-field input { border: none; font-size: 20px; min-height: 60px; padding: 0; background: none; } .spot-field input:focus { outline: none; } .spot-res { max-height: 56vh; overflow: auto; padding: 6px 0; } .spot-res .lbl { font-size: var(--fs-caption); color: var(--faint); text-transform: uppercase; letter-spacing: .05em; padding: 10px 18px 4px; } .spot-res .li { min-height: 50px; padding: 6px 18px; cursor: pointer; } .spot-res .li + .li::before { display: none; } .spot-res .li.sel { background: var(--nav-active); color: var(--ink); } .spot-res .li.sel small { color: var(--muted); } /* ---------- toast ---------- */ .toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--toast-bg); color: var(--on-toast); padding: 12px 14px 12px 18px; border-radius: var(--r); z-index: 60; max-width: min(560px, calc(100vw - 32px)); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 14px; animation: toastIn .25s; } .toast.err { background: var(--toast-bad); } .toast.ok { background: var(--toast-ok); } .toast button { background: var(--on-toast-btn); color: var(--on-toast); min-height: var(--tap-min); font-weight: 600; } @keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } } /* "A new version of Burl Home is ready." — sits at the top, doesn't block the screen */ .ver-banner { position: fixed; left: 50%; top: calc(10px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 14px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-lg); border-radius: var(--r); padding: 8px 8px 8px 18px; max-width: calc(100vw - 32px); font-weight: 600; } .ver-banner span { min-width: 0; } /* ---------- New Sale ---------- */ .ns { max-width: 880px; padding-bottom: 40px; } .ns-steps { display: flex; gap: 6px; margin: 2px 0 22px; } .ns-step { flex: 1; background: none; padding: 0; text-align: left; display: block; min-height: var(--tap); border-radius: 0; color: var(--faint); } .ns-step:hover { background: none; } .ns-step:active { transform: none; } .ns-step .bar { height: 4px; border-radius: 4px; background: var(--line); transition: background .3s; } .ns-step.done .bar, .ns-step.on .bar { background: var(--brand); } .ns-step span { display: block; margin-top: 8px; font-size: 14px; font-weight: 500; } .ns-step.on span { color: var(--ink); font-weight: 600; } .ns-step.done span { color: var(--muted); } .ns-bar { position: fixed; left: 248px; right: 0; bottom: 0; z-index: 30; padding: 12px 32px calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 14px; background: var(--sidebar); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--line); } .ns-total small { display: block; color: var(--muted); font-size: 13px; } .ns-total b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .ns-bar .go { margin-left: auto; min-width: 230px; min-height: 52px; font-size: 17px; border-radius: var(--r); } .methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .method { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); border-radius: var(--radius); padding: 16px; min-height: 88px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; white-space: normal; border: 2px solid transparent; } .method:hover { background: var(--panel); border-color: var(--brand-soft); } .method svg.i { color: var(--navy); width: 24px; height: 24px; } .method small { color: var(--muted); font-weight: 400; } .method.on { border-color: var(--brand); background: var(--brand-soft); } .bigamount { font-size: 46px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-align: center; padding: 8px 0 2px; } .keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 360px; margin: 12px auto 0; } .keypad button { min-height: 58px; background: var(--panel); color: var(--ink); box-shadow: var(--shadow); font-size: 24px; font-weight: 400; } .quick { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; } .change-line { text-align: center; margin-top: 12px; font-size: 17px; } .change-line b { color: var(--accent); font-size: 24px; } .done { text-align: center; padding: 36px 0; } .big-check { width: 92px; height: 92px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; margin: 0 auto 18px; animation: pop .5s cubic-bezier(.2,1.4,.4,1); } .big-check svg.i { width: 50px; height: 50px; stroke-width: 2.6; } @keyframes pop { from { transform: scale(.4); opacity: 0; } } .done h2 { font-size: 30px; margin: 0 0 6px; letter-spacing: -.02em; } .done p { color: var(--muted); margin: 0 0 20px; font-size: 16px; line-height: 1.5; } .done .actions { justify-content: center; } .note { color: var(--faint); font-size: 13px; margin: 8px 4px 0; } /* ---------- New Sale (one page) ---------- */ .sale { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); gap: 0 18px; align-items: start; max-width: 1280px; } .sale-title { grid-column: 1 / -1; } .sale-main { min-width: 0; } .sale-side { position: sticky; top: 16px; } .sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .sec-head h2 { margin: 0; } .sale .card { padding: 16px 18px; } .sale-lines { margin-top: 12px; border-top: 1px solid var(--line); } .sale-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 100px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); } .sale-line .main { cursor: pointer; min-width: 0; } .sale-line .main b { display: block; font-weight: 600; } .sale-line .main small { color: var(--muted); font-size: 13px; } .sale-line .ext { text-align: right; font-variant-numeric: tabular-nums; } .price-cell { display: flex; gap: 4px; align-items: center; } .price-in { width: 108px; text-align: right; } .price-in.below { border-color: var(--bad); box-shadow: 0 0 0 2px var(--bad-soft); } button.adj { min-width: 0; padding: 0 10px; font-size: 13px; font-weight: 600; } td button.adj { margin-left: 4px; } /* the search box keeps at least 60% of the row; when vendor + category don't fit beside it they wrap to their own row (iPad) */ .item-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .item-search .field { flex: 3 1 60%; min-width: 0; } .item-filters { flex: 1 1 348px; display: flex; gap: 8px; min-width: 0; } .item-search select { flex: 1 1 0; min-width: 0; } .item-search select { min-height: 54px; border-radius: var(--radius); box-shadow: var(--shadow); border: none; background: var(--panel); } .result-list { max-height: 360px; overflow-y: auto; } .line-extra { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; margin-top: -2px; } .line-extra .det { flex: 1; min-height: var(--tap-min); font-size: 14px; } .so-chk { display: flex; align-items: center; gap: 8px; margin: 0; min-height: var(--tap-min); padding: 0 12px; border-radius: var(--r-sm); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: 14px; white-space: nowrap; cursor: pointer; } .so-chk.on { background: var(--warn-soft); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn); font-weight: 600; } @media (max-width: 760px) { .line-extra { flex-wrap: wrap; } } .line-det { display: block; font-size: 13px; color: var(--ink); opacity: .8; font-style: italic; margin-top: 2px; } .side-card { padding: 16px; } .side-card .totals td { padding: 5px 0; } .side-card .totals input, .side-card .totals select { min-height: var(--tap-min); } .side-label { font-size: var(--fs-caption); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin: 4px 0 6px; } .disc-in { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; } .disc-in input { width: 92px; text-align: right; } .seg.mini { padding: 2px; } .seg.mini button { min-height: 44px; padding: 0 10px; font-size: 14px; } .pay-methods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .pm { flex-direction: column; gap: 2px; min-height: 58px; padding: 6px 2px; background: var(--panel-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-caption); white-space: normal; } .pm svg.i { color: var(--navy); } .pm.on { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); font-weight: 600; } .go-btn { width: 100%; min-height: 54px; font-size: 16px; white-space: normal; line-height: 1.25; padding: 6px 14px; } .ns-preview { margin-top: 10px; min-height: 22px; } @media (max-width: 1060px) { .sale { grid-template-columns: 1fr; } .sale-side { position: static; } } @media (max-width: 640px) { .sale-line { grid-template-columns: 1fr auto; } } /* a narrow items card (iPad portrait beside the sidebar) stacks the line the same way, so the item's name keeps its width */ .sale-lines { container-type: inline-size; } @container (max-width: 560px) { .sale-line { grid-template-columns: 1fr auto; } } /* ---------- charts (validated categorical palette; dark mode has its own steps) ---------- */ :root { --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; --series-6: #008300; --series-other: #9a9893; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300; --series-other: #6f6e69; } } :root[data-theme="dark"] { --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300; --series-other: #6f6e69; } .pie-wrap { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; } .pie { width: 240px; height: 240px; flex-shrink: 0; } .pie path { stroke: var(--panel); stroke-width: 2; transition: opacity .15s; cursor: default; } .pie:hover path { opacity: .55; } .pie path:hover { opacity: 1; } .pie text { font-size: 13px; font-weight: 600; fill: #fff; pointer-events: none; } .legend { list-style: none; padding: 0; margin: 0; flex: 1; min-width: 240px; } .legend li { display: flex; align-items: center; gap: 10px; min-height: 36px; border-bottom: 1px solid var(--line); } .legend .sw { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; } .legend .nm { flex: 1; color: var(--ink); } .legend .amt { font-variant-numeric: tabular-nums; color: var(--ink); } .legend .pc { width: 56px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; } .viz-tip { position: fixed; z-index: 70; pointer-events: none; background: var(--panel); color: var(--ink); box-shadow: var(--shadow-lg); border-radius: var(--r-sm); padding: 8px 12px; font-size: 13px; } .bar-cell { position: relative; min-width: 140px; } .bar-cell span { display: block; height: 10px; border-radius: 0 4px 4px 0; background: var(--series-1); } .rank { color: var(--muted); font-variant-numeric: tabular-nums; width: 28px; } /* ---------- service ---------- */ .prio { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; } .prio button { min-width: 0; padding: 0; background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; } .prio button.on { background: var(--brand); color: var(--on-brand); box-shadow: none; } .prio button.on.hi { background: var(--bad-strong); color: var(--on-bad); } .prio-ends { display: flex; justify-content: space-between; font-size: var(--fs-caption); color: var(--muted); margin-top: 4px; } .prio-pill { display: inline-grid; place-items: center; min-width: 30px; height: 26px; border-radius: var(--r-sm); font-weight: 700; font-size: 13px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); } .prio-pill.hi { background: var(--bad-strong); color: var(--on-bad); box-shadow: none; } .prio-pill.mid { background: var(--warn-soft); color: var(--warn); box-shadow: none; } .photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; } .photo { position: relative; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); } .photo img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; } .photo button { position: absolute; top: 4px; right: 4px; min-height: var(--tap-min); min-width: var(--tap-min); padding: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; } /* on a photo: always dark glass, both themes */ .photo button:hover { background: rgba(0,0,0,.75); } .photo-add { aspect-ratio: 1; border-radius: var(--r); border: 2px dashed var(--field-line); display: grid; place-items: center; color: var(--navy); cursor: pointer; font-weight: 600; text-align: center; padding: 6px; } .photo-add input { display: none; } .timeline { list-style: none; padding: 0; margin: 0; } .timeline li { padding: 10px 0; border-bottom: 1px solid var(--line); } .timeline li:last-child { border-bottom: none; } .timeline small { color: var(--muted); display: block; margin-top: 2px; } /* ---------- misc carried over ---------- */ .logo-preview { border: 1px dashed var(--field-line); border-radius: var(--radius-sm); min-height: 90px; display: grid; place-items: center; padding: 10px; background: #fff; } .logo-preview img { max-height: 110px; max-width: 100%; } .brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .brand-card { border-radius: var(--radius-sm); padding: 12px; box-shadow: inset 0 0 0 1px var(--line); } .ft-like { font-size: 22px; font-weight: 800; color: var(--navy); text-transform: uppercase; text-align: center; } .filters select { max-width: 210px; } .big-price { font-size: 32px; font-weight: 700; color: var(--navy); margin: 4px 0 12px; } #cTbl tr.uncounted td { background: var(--warn-soft); } #cTbl .cQty { font-weight: 800; } /* ---------- sign-in ---------- */ body.signed-out .sidebar, body.signed-out main, body.signed-out .mbar, body.signed-out .tabbar { display: none !important; } .auth { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: var(--bg); overflow: auto; z-index: 40; } .auth-card { background: var(--panel); border-radius: var(--r-lg); padding: 32px; width: min(440px, 100%); box-shadow: var(--shadow-lg); } .auth-card h2 { font-size: 22px; } .auth-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; font-size: 18px; line-height: 1.15; font-weight: 700; } .auth-brand small { display: block; font-size: var(--fs-caption); color: var(--muted); font-weight: 500; } .auth-logo { display: block; max-height: 90px; max-width: 70%; margin: 0 auto 16px; } .code-input { font-size: 26px !important; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; min-height: 56px !important; } .steps { padding-left: 18px; } .steps li { margin-bottom: 14px; } .qr { margin: 10px 0; min-height: var(--tap-min); } .qr img, .qr canvas { border: 8px solid #fff; box-shadow: 0 0 0 1px var(--line); border-radius: var(--r-sm); } code.key { display: inline-block; font-size: 15px; background: var(--brand-soft); padding: 6px 10px; border-radius: var(--r-sm); letter-spacing: .08em; margin-top: 6px; word-break: break-all; } .codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0 14px; } .codes code { font-size: 16px; background: var(--brand-soft); padding: 8px 10px; border-radius: var(--r-sm); text-align: center; letter-spacing: .06em; } .inv-tools { margin: -4px 0 12px; align-items: center; } .inv-tools .show-all { margin: 0 0 0 auto; display: flex; gap: 8px; align-items: center; white-space: nowrap; font-size: 14px; color: var(--muted); } .cost-reveal { margin: 10px 0 0; border-top: 1px solid var(--line); padding-top: 6px; } .cost-reveal summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; font-weight: 600; color: var(--muted); } .cost-reveal[open] summary { color: var(--ink); } @media (max-width: 700px) { /* phones: one swipeable row each, so the list starts higher on the screen */ #locBtns, #catBtns, .inv-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px 2px; } #locBtns::-webkit-scrollbar, #catBtns::-webkit-scrollbar, .inv-tools::-webkit-scrollbar { display: none; } #locBtns > *, #catBtns > *, .inv-tools > * { flex-shrink: 0; white-space: nowrap; } .inv-tools .show-all { margin-left: 4px; } } /* ---------- iPad (portrait and landscape): the sidebar is an icon rail, so the screen gets the room ---------- Each icon keeps its name (spoken by screen readers, shown as a tooltip on hover); the menu button at the top opens the full sidebar over the page with every name spelled out (a tap on a screen, the scrim or Escape closes it). */ .mbar, .tabbar, .menu-scrim, .menu-head, .rail-btn { display: none; } @media (min-width: 701px) and (max-width: 1180px) { :root { --rail: 72px; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; height: auto; z-index: 45; width: var(--rail); padding: 10px 8px 10px; overflow-x: hidden; } main { margin-left: var(--rail); padding: 18px 20px 120px; } body.floor-on main { margin-left: 0; } .ns-bar { left: var(--rail); padding-left: 20px; padding-right: 20px; } .rail-btn { display: flex; align-self: center; flex-shrink: 0; margin: 0 0 6px; min-width: var(--tap); padding: 0; background: transparent; color: var(--navy); } .rail-btn:hover { background: var(--brand-soft); } .sidebar .dt-mode, .sidebar .copyright, .bh-brand .store, .search-btn kbd { display: none; } body:not(.rail-open) .sidebar .lbl, body:not(.rail-open) .sidebar .bh-word { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } body:not(.rail-open) .bh-brand { align-items: center; padding: 2px 0 10px; } body:not(.rail-open) .search-btn { justify-content: center; margin: 0 0 6px; padding: 0; } body:not(.rail-open) nav a { justify-content: center; padding: 0; position: relative; } body:not(.rail-open) nav .sec { font-size: 0; height: 1px; padding: 0; margin: 8px 10px; background: var(--line); } body:not(.rail-open) nav a .count { position: absolute; top: 3px; right: 3px; margin: 0; font-size: 11px; line-height: 16px; min-width: 16px; padding: 0 4px; text-align: center; border-radius: var(--r-pill); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); } body:not(.rail-open) nav a .count.hot { background: var(--bad-strong); box-shadow: none; } body:not(.rail-open) .user-chip { padding: 10px 0 4px; } body:not(.rail-open) .user-chip .who { justify-content: center; } body:not(.rail-open) .user-chip .who > div, body:not(.rail-open) .user-chip #themeBtn, body:not(.rail-open) .user-chip .actions { display: none; } /* opened: the full sidebar over the page */ body.rail-open .sidebar { width: 264px; padding: 10px 12px 12px; z-index: 48; box-shadow: var(--shadow-lg); background: var(--panel); } body.rail-open .rail-btn { align-self: flex-start; } body.rail-open .menu-scrim { display: block; position: fixed; inset: 0; z-index: 47; background: var(--scrim); animation: fadeIn .2s; } body.rail-open .sidebar .copyright { display: block; } } /* ---------- phone: top bar, bottom tabs, sidebar as a full menu ---------- */ @media (max-width: 700px) { :root { --tabbar-h: calc(62px + env(safe-area-inset-bottom)); } body { flex-direction: column; } .mbar { display: flex; align-items: center; gap: 6px; position: sticky; top: 0; z-index: 35; padding: calc(4px + env(safe-area-inset-top)) 8px 4px; background: var(--sidebar); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); } .mbar-btn { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 12px; border: none; border-radius: var(--r-sm); background: var(--brand-soft); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; } .mbar-btn svg { color: var(--navy); } .mbar-brand { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; } .mbar { background: var(--bh-topbar); border-bottom-color: transparent; } .mbar .bh-mark { width: 26px; height: 26px; --mark-ring: var(--bh-bone); --mark-eye: var(--bh-honey); } .mbar .bh-word { font-size: 18px; color: var(--bh-topbar-text); } .mbar-btn { background: var(--bh-topbar-field); color: var(--bh-topbar-text); } .mbar-btn svg { color: var(--bh-honey); } /* the sidebar becomes a slide-in menu showing every screen by name */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 70; width: min(330px, 88vw); height: 100%; padding: calc(10px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)); transform: translateX(-105%); transition: transform .25s cubic-bezier(.2,.9,.3,1); box-shadow: var(--shadow-lg); border-right: 1px solid var(--line); background: var(--panel); } body.menu-open .sidebar { transform: none; } .menu-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 8px; } .menu-head b { font-size: 22px; } .menu-scrim { position: fixed; inset: 0; z-index: 65; background: var(--scrim); } body.menu-open .menu-scrim { display: block; animation: fadeIn .2s; } body.menu-open { overflow: hidden; } .sidebar .search-btn, .sidebar .bh-brand { display: none; } .sidebar nav a { font-size: 17px; min-height: 50px; } .sidebar .copyright { display: block; } /* bottom tabs: icon over a spelled-out name */ .tabbar { display: flex; flex-direction: row; gap: 2px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 34; height: var(--tabbar-h); padding: 4px 4px env(safe-area-inset-bottom); background: var(--sidebar); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--line); } .tabbar a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 54px; padding: 0 2px; border-radius: var(--r-sm); text-decoration: none; color: var(--muted); font-size: var(--fs-caption); font-weight: 600; } .tabbar a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .tabbar a svg { color: inherit; width: 24px; height: 24px; } .tabbar a.active { color: var(--brand-text); background: var(--nav-active); } main { padding: 14px 16px calc(var(--tabbar-h) + 100px); } h1 { font-size: 26px; } .grid2, .grid3 { grid-template-columns: 1fr; } .li { padding: 10px 12px; } .li .end { max-width: 36%; } .li .end small { font-size: var(--fs-caption); } .stats { grid-template-columns: 1fr 1fr; gap: 10px; } .stat { padding: 14px; } .stat .v { font-size: 22px; } .ns-bar { left: 0; bottom: var(--tabbar-h); padding: 10px 16px; } .ns-bar .go { min-width: 0; flex: 1; } .ns-total b { font-size: 22px; } .toast { bottom: calc(var(--tabbar-h) + 16px); } .modal { align-items: flex-end; padding: 0; } .modal-card { border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 92vh; padding-bottom: calc(22px + env(safe-area-inset-bottom)); } .prio { grid-template-columns: repeat(5, 1fr); } } @media print { .sidebar, .mbar, .tabbar, .menu-scrim, .no-print, .dt-panel, .ns-bar, .toast { display: none !important; } body { background: #fff; color: #000; } main { padding: 0; } .card { box-shadow: none; } } /* ---------- list calendar (Sales Orders, Quotes) ---------- */ .dp-wrap { position: relative; display: inline-flex; align-items: center; gap: 2px; } .dp-btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .dp-btn.on { background: var(--nav-active); color: var(--brand-text); font-weight: 700; } .dp-btn.on svg { color: var(--brand-text); } .dp-x { min-width: var(--tap); padding: 0; font-size: 20px; background: none; color: var(--muted); } .dp-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 45; width: min(340px, calc(100vw - 32px)); padding: 14px; border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-lg); border: 1px solid var(--line); animation: fadeIn .15s; } .dp-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .dp-head b { font-size: 16px; } .dp-nav { min-width: var(--tap); padding: 0; font-size: 22px; background: none; color: var(--ink); } .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .dp-dow span { text-align: center; font-size: var(--fs-caption); font-weight: 600; color: var(--faint); padding: 2px 0 4px; } .dp-day { min-height: var(--tap); padding: 2px 0; border-radius: var(--r-sm); background: none; color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; line-height: 1.1; } .dp-day b { font-weight: 600; font-size: var(--fs-dense); } .dp-day small { font-size: var(--fs-caption); font-weight: 700; color: var(--brand-text); min-height: 13px; line-height: 1; } .dp-day:hover { background: var(--brand-soft); } .dp-day.today b { text-decoration: underline; text-underline-offset: 3px; } .dp-day.in { background: var(--nav-active); border-radius: 0; } .dp-day.edge { background: var(--brand); color: var(--on-brand); border-radius: var(--r-sm); } .dp-day.edge small { color: var(--on-brand); } .dp-day.anchor { box-shadow: 0 0 0 2px var(--brand) inset; } .dp-hint { font-size: var(--fs-caption); color: var(--muted); margin: 8px 0 4px; } .dp-foot { display: flex; justify-content: space-between; align-items: center; } .list-sum { margin: 0 0 10px; color: var(--muted); font-size: 14px; } .list-sum b { color: var(--ink); } /* ---------- card terminal window ---------- */ .term-box { text-align: center; display: grid; gap: 6px; justify-items: center; padding: 6px 0; } .term-box h2 { margin: 0; font-size: 22px; } .term-box p { margin: 0 0 6px; max-width: 34ch; } .term-amt { font-size: 40px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .term-approved h2 { color: var(--good, var(--accent)); } .term-declined h2, .term-error h2 { color: var(--bad); } .term-unknown h2, .term-cancelled h2 { color: var(--warn); } .term-spin { width: 42px; height: 42px; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--brand); animation: termspin .9s linear infinite; margin: 6px 0 10px; } @keyframes termspin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .term-spin { animation-duration: 3s; } } .term-pick { width: 100%; } .card-tries { margin-top: 8px; font-size: 13px; } .card-tries summary { cursor: pointer; color: var(--muted); min-height: var(--tap); display: flex; align-items: center; } .tax-ctl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; font-weight: 400; } .tax-row { text-align: right; } .tax-row .tax-ctl { justify-content: flex-end; } .rep-pick { display: block; max-width: 460px; margin: 0 0 14px; } .rep-pick select { font-size: 17px; font-weight: 600; min-height: 48px; } /* ---------- Today: personal tiles ---------- */ .dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: start; } .dash-tile { min-width: 0; } .dash-tile.wide { grid-column: 1 / -1; } .dash-tile > .card, .dash-tile > .stats { margin-bottom: 16px; } @media (max-width: 1000px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } } .goal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } .goal-head h2 { margin: 0; } .goal-head span { font-variant-numeric: tabular-nums; } .goal-bar { position: relative; height: 14px; border-radius: var(--r-pill); background: var(--brand-soft); margin: 12px 0 8px; overflow: visible; } .goal-bar span { position: absolute; inset: 0 auto 0 0; border-radius: var(--r-pill); background: var(--brand); max-width: 100%; } .goal-bar i { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); opacity: .55; border-radius: 2px; } .goal-sub { font-size: 13px; } .qlinks { display: flex; flex-wrap: wrap; gap: 8px; } .qlinks .btn { text-decoration: none; } .tile-list { display: grid; gap: 4px; } .tile-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--line); } .link-row { gap: 8px; margin-bottom: 6px; } .link-row .inline { display: flex; gap: 6px; } .link-row input { min-width: 0; } /* ---------- Returns: pick the item ---------- */ .ret-list { display: grid; gap: 6px; max-height: 300px; overflow-y: auto; margin: 4px 0 12px; } .ret-item { display: grid; justify-items: start; justify-content: stretch; gap: 2px; text-align: left; width: 100%; min-height: var(--tap); padding: 10px 12px; border-radius: var(--r-sm); background: var(--panel-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font: inherit; cursor: pointer; } .ret-item small { color: var(--muted); font-size: 13px; } .ret-item.on { box-shadow: inset 0 0 0 2px var(--brand); background: var(--brand-soft); } .ret-loc { min-height: var(--tap-min); font-size: 14px; max-width: 100%; } /* ---------- In Stock on phones: one card per item instead of a wide table ---------- */ .stock-cards { display: none; } @media (max-width: 700px) { #spRes table { display: none; } #spRes .card { padding: 14px; } .stock-cards { display: grid; gap: 8px; } #spRes .table-wrap { overflow: visible; } .stock-card { display: grid; gap: 10px; min-width: 0; padding: 12px; border-radius: var(--r); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); cursor: pointer; } .stock-card:active { background: var(--brand-soft); } .sc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .sc-name { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; } .sc-name b { font-size: 16px; line-height: 1.25; } .sc-name small { color: var(--muted); font-size: var(--fs-caption); line-height: 1.35; } .sc-price { font-family: var(--font-display); font-weight: 600; font-size: 17px; white-space: nowrap; font-variant-numeric: tabular-nums; } .sc-locs { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; } .sc-loc { display: grid; gap: 1px; align-content: space-between; padding: 6px 7px; border-radius: var(--r-sm); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); } .sc-loc small { font-size: var(--fs-caption); color: var(--muted); line-height: 1.2; overflow-wrap: break-word; hyphens: auto; } .sc-loc b { font-size: 17px; font-variant-numeric: tabular-nums; color: var(--faint); } .sc-loc.has b { color: var(--ink); } .sc-loc.total { background: var(--brand-soft); box-shadow: none; } .sc-loc.total b { color: var(--ink); } } .spo-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border: 1.5px dashed var(--sage); } .loc-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto auto; grid-template-areas: "code name name name name" ". kind up dn del" ". tax tax tax tax"; gap: 6px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); } .loc-row .lCode { grid-area: code; } .loc-row .lName { grid-area: name; } .loc-row .lKind { grid-area: kind; } .loc-row .lTax { grid-area: tax; margin: 0; font-size: 14px; display: flex; gap: 8px; align-items: center; } .loc-row .lTax input { max-width: 110px; } .loc-row .lUp { grid-area: up; } .loc-row .lDn { grid-area: dn; } .loc-row .lDel { grid-area: del; } .loc-row input[readonly] { background: var(--panel-2); color: var(--muted); text-align: center; font-weight: 700; } /* Screen saver: blurs whatever is open after idle minutes (Settings → Store) */ body.saver-on > *:not(#saver) { filter: blur(18px) saturate(.8); pointer-events: none; user-select: none; } #saver { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; cursor: pointer; background: color-mix(in srgb, var(--bg, #F6F2EA) 72%, transparent); backdrop-filter: blur(22px) saturate(.85); -webkit-backdrop-filter: blur(22px) saturate(.85); padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); } #saver .saver-card { display: grid; justify-items: center; gap: 6px; text-align: center; color: var(--ink); } #saver .bh-mark { width: 72px; height: 72px; } #saver .saver-time { font: 600 56px/1 var(--bh-font-display, "Sora", sans-serif); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } #saver .saver-store { font-weight: 600; font-size: 18px; } #saver .saver-hint { color: var(--muted, #5E6670); font-size: 15px; margin-top: 8px; } @media (prefers-reduced-motion: no-preference) { #saver { animation: saverIn .35s ease-out; } @keyframes saverIn { from { opacity: 0; } } } /* Leads */ .lead-list { display: grid; gap: 12px; } .lead.new { border-left: 4px solid var(--bad, #B42318); } .lead.in_progress { border-left: 4px solid var(--warn, #96571A); } .lead-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; } .lead-name { font-size: 18px; } .lead-product { font-weight: 600; margin-top: 6px; } .lead-msg { white-space: pre-wrap; margin: 6px 0; max-width: 70ch; } .lead-contact { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; } .lead-actions { margin-top: 10px; flex-wrap: wrap; } .lead-card .lead-mini { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 8px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; } .lead-card .lead-mini .muted { grid-column: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lead-card .lead-mini small { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--muted); } /* ---- Floor mode (iPad on the sales floor): no sidebar, big touch targets ---- */ body.floor-on .sidebar, body.floor-on .tabbar, body.floor-on .mbar { display: none !important; } body.floor-on main { padding: 0 0 40px; } .floor { max-width: 1280px; margin: 0 auto; } .fl-bar { position: sticky; top: 0; z-index: 20; display: flex; gap: 10px; align-items: center; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; background: var(--bg); border-bottom: 1px solid var(--line); } .fl-bar input { flex: 1; min-width: 0; font-size: 20px; min-height: 56px; border-radius: var(--r); padding: 0 18px; } .fl-exit { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); color: var(--ink); text-decoration: none; font-size: 22px; flex-shrink: 0; } .fl-btn { min-height: 56px; padding: 0 18px; font-size: 17px; border-radius: var(--r); white-space: nowrap; } .fl-count { display: inline-block; min-width: 24px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--on-brand); color: var(--brand); font-weight: 800; } .fl-chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .fl-chip { flex-shrink: 0; min-height: 48px; padding: 0 18px; border-radius: var(--r-pill); font-size: 16px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); } .fl-chip.on { background: var(--brand); color: var(--on-brand); border-color: var(--brand); } .fl-filters { display: flex; gap: 12px; align-items: center; padding: 8px 16px; flex-wrap: wrap; } .fl-filters select { max-width: 260px; min-height: 48px; font-size: 16px; } .fl-toggle { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 16px; min-height: 48px; } .fl-toggle input { width: 22px; height: 22px; } .fl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; padding: 8px 16px; } .fl-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 16px; min-height: 170px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); color: var(--ink); box-shadow: var(--shadow); font: inherit; cursor: pointer; } .fl-card:active { transform: scale(.985); } .fl-cat { font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .fl-name { font-size: 19px; font-weight: 800; line-height: 1.2; } .fl-sub { font-size: 13px; color: var(--muted); } .fl-price { font-size: 24px; font-weight: 800; margin-top: auto; } .fl-price s { font-size: 15px; font-weight: 600; color: var(--muted); } .fl-price.big { font-size: 34px; } .fl-where { font-size: 14px; color: var(--muted); } .fl-where.in { color: var(--accent); } .fl-out { color: var(--bad); } .fl-order { font-size: 13px; color: var(--info); } .fl-empty { grid-column: 1 / -1; padding: 60px 16px; text-align: center; font-size: 18px; color: var(--muted); } .fl-feats { margin: 10px 0; padding-left: 22px; font-size: 16px; line-height: 1.5; } .fl-stock table td { font-size: 16px; padding: 8px 6px; } .fl-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; } .fl-big { min-height: 56px; padding: 0 22px; font-size: 17px; border-radius: var(--r); } .fl-qty { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: var(--r); padding: 4px; } .fl-qty button { width: 48px; height: 48px; font-size: 24px; border-radius: var(--r-sm); } .fl-qty span { min-width: 40px; text-align: center; font-size: 22px; font-weight: 800; } .fl-list td { font-size: 16px; padding: 10px 6px; } .ft-qr { position: absolute; right: .18in; bottom: .42in; text-align: center; font-size: 7pt; color: #555; line-height: 1.1; } .ft-qr svg { display: block; width: .85in; height: .85in; } @media (max-width: 700px) { .fl-bar { flex-wrap: wrap; } .fl-bar input { order: 3; flex-basis: 100%; } .fl-grid { grid-template-columns: 1fr; } } .review-ask { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; max-width: 720px; padding: 12px 16px; border-radius: var(--radius); background: var(--warn-soft); color: var(--ink); text-align: left; } .review-ask small { display: block; color: var(--muted); font-size: var(--fs-caption); margin-top: 2px; } .done .review-ask { margin: 0 auto 18px; } .fl-step { width: 48px; height: 48px; min-height: 48px; padding: 0; font-size: 20px; border-radius: var(--r); } .po-filters { flex-wrap: wrap; gap: 10px; align-items: end; } .po-filters label { margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; } .po-filters select, .po-filters input { min-width: 150px; } /* product form: follow the vendor's pricing or a set price */ .price-mode { display: grid; gap: 8px; margin: 4px 0 10px; } .pm-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; margin: 0; color: var(--ink); } .pm-opt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--brand); background: var(--brand-soft); } .pm-opt input { margin-top: 3px; width: auto; min-height: 0; } .pm-opt span { display: grid; gap: 2px; font-size: 15px; } .pm-opt small { color: var(--muted); font-size: 13px; font-weight: 400; } .pm-exc { margin: 0 0 10px; } .pm-exc summary { cursor: pointer; min-height: var(--tap-min); display: flex; align-items: center; color: var(--muted); font-size: 14px; } .badge.warn { background: var(--warn-soft); color: var(--warn); text-transform: none; } .badge.rule { text-transform: none; } /* prices: promotion banner, the store's price, the regular price struck through */ .promo-badge { display: inline-block; color: #fff; font-size: var(--fs-caption); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 7px; border-radius: var(--r-sm); vertical-align: middle; } .reg-line { display: block; font-size: 13px; color: var(--muted); font-weight: 500; } .reg-line.small { font-size: var(--fs-caption); } .big-price .promo-badge { font-size: 13px; } .modal-card.wide { width: min(860px, 100%); } .pr-sum { cursor: pointer; min-height: var(--tap-min); display: flex; align-items: center; font-weight: 700; } .pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 12px; margin-bottom: 8px; } .pr-chk { display: flex; gap: 8px; align-items: center; margin: 0; color: var(--ink); font-size: var(--fs-footnote); min-height: var(--tap-min); } .totals tr.saves td { color: var(--accent); font-weight: 700; } /* promotion + discount savings */ /* an example next to a field's label: stays visible when the box is filled in */ label .eg { font-weight: 400; color: var(--muted); font-size: var(--fs-caption); margin-left: 4px; } .cat-list { display: grid; gap: 4px; } .cat-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); } .cat-block > .cat-row { border-bottom: none; } .cat-block { border-bottom: 1px solid var(--line); padding-bottom: 4px; } .cat-types { margin: 0 0 4px 16px; } .cat-types summary { cursor: pointer; color: var(--muted); font-size: var(--fs-caption); min-height: 32px; display: flex; align-items: center; } .cat-type-row { padding: 2px 0; font-size: var(--fs-body); } .cat-type-row:last-child { border-bottom: none; } /* product photos: the form's strip, and the main photo on floor mode, In Stock and New Sale */ h2 .eg { font-weight: 400; color: var(--muted); font-size: var(--fs-caption); margin-left: 6px; letter-spacing: 0; text-transform: none; } .prod-photos { margin-bottom: 12px; } .prod-photos .photo img { cursor: default; } .photo button.ph-main { top: auto; bottom: 4px; left: 4px; right: auto; border-radius: var(--r-pill); padding: 0 10px; min-width: 0; font-size: var(--fs-caption); font-weight: 600; } .photo button.ph-rm.sure { border-radius: var(--r-pill); width: auto; padding: 0 10px; background: var(--bad-strong); color: var(--on-bad); font-size: var(--fs-caption); font-weight: 700; } .photo .ph-tag { position: absolute; bottom: 6px; left: 6px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--brand); color: var(--on-brand); font-size: var(--fs-caption); font-weight: 700; } .pthumb { width: 48px; height: 48px; border-radius: var(--r-sm); object-fit: cover; flex: 0 0 auto; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); } .fl-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); background: var(--panel-2); margin-bottom: 6px; } .fl-detail-photo { width: 100%; max-height: 46vh; object-fit: contain; border-radius: var(--r); background: var(--panel-2); display: block; } .fl-thumbs { display: flex; gap: 8px; margin: 8px 0 4px; overflow-x: auto; } .fl-thumbs button { padding: 0; min-height: 0; border-radius: var(--r-sm); border: 2px solid transparent; background: none; flex: 0 0 auto; } .fl-thumbs button.on { border-color: var(--navy); } .fl-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-sm); display: block; } .stock-photo { width: 100%; max-height: 260px; object-fit: contain; border-radius: var(--r); background: var(--panel-2); margin: 4px 0 10px; display: block; } /* Today: get ready for your first sale (admins) */ .setup-card ol { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 2px; } .setup-card li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; column-gap: 10px; row-gap: 6px; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--line); } .setup-card .st-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } @media (max-width: 640px) { .setup-card li { grid-template-columns: 26px 1fr; } .setup-card .st-act { grid-column: 2; justify-content: flex-start; } } .setup-card li:last-child { border-bottom: none; } .setup-card .st-mark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; font-weight: 800; font-size: 14px; box-shadow: inset 0 0 0 2px var(--field-line); color: var(--muted); } .setup-card li.st-done .st-mark { background: var(--accent); color: var(--on-accent); box-shadow: none; } .setup-card li.st-done .st-text, .setup-card li.st-skipped .st-text { color: var(--muted); text-decoration: line-through; } .setup-card .st-label { min-width: 0; font-weight: 600; } .setup-card .st-where { font-size: var(--fs-caption); color: var(--muted); display: block; font-weight: 400; text-decoration: none; } .setup-bar { height: 8px; border-radius: var(--r-pill); background: var(--panel-2); overflow: hidden; margin-top: 6px; } .setup-bar span { display: block; height: 100%; background: var(--accent); } /* barcode scanning: the "Scan or type a SKU" box on receiving sheets, and the row a scan just counted */ .scan-box { max-width: 340px; font-weight: 700; color: var(--ink); } @keyframes scanHit { from { background: var(--accent-soft); } to { background: transparent; } } tr.scan-hit > td { animation: scanHit 1.2s ease-out; } /* ======================================================================== design system: shared pieces */ /* ---------- type scale classes ---------- */ .caption { font-size: var(--fs-caption); } .footnote { font-size: var(--fs-footnote); } .body-text { font-size: var(--fs-body); } .headline { font-size: var(--fs-headline); font-weight: 600; } .title2 { font-size: var(--fs-title2); font-weight: 600; font-family: var(--font-display); letter-spacing: -.02em; } .large-title { font-size: var(--fs-large); font-weight: 700; font-family: var(--font-display); letter-spacing: -.025em; } .faint { color: var(--faint); } .bold { font-weight: 600; } .ok-text { color: var(--accent); } .warn-text { color: var(--warn); } .bad-text { color: var(--bad); } .info-text { color: var(--info); } /* ---------- layout utilities ---------- */ .hstack { display: flex; flex-direction: row; align-items: center; gap: var(--s2); } .vstack { display: flex; flex-direction: column; gap: var(--s2); } .wrap { flex-wrap: wrap; } .spacer { flex: 1; } .gap-1 { gap: var(--s1); } .gap-2 { gap: var(--s2); } .gap-3 { gap: var(--s3); } .gap-4 { gap: var(--s4); } .mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: var(--s1) !important; } .mt-2 { margin-top: var(--s2) !important; } .mt-3 { margin-top: var(--s3) !important; } .mt-4 { margin-top: var(--s4) !important; } .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: var(--s1) !important; } .mb-2 { margin-bottom: var(--s2) !important; } .mb-3 { margin-bottom: var(--s3) !important; } .mb-4 { margin-bottom: var(--s4) !important; } .tnum { font-variant-numeric: tabular-nums; } .nowrap { white-space: nowrap; } .right { text-align: right; } .center { text-align: center; } .w-auto { width: auto !important; } .w-full { width: 100%; } .maxw-sm { max-width: 360px; } .maxw-md { max-width: 520px; } .maxw-lg { max-width: 760px; } /* ---------- keyboard focus: one ring for everything you can tab to ---------- */ a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible, .li:focus-visible, .chip:focus-visible, .tab:focus-visible, input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .modal-card:focus { outline: none; } /* the sheet itself takes focus when it opens; only its controls show a ring */ .field:focus-within { box-shadow: 0 0 0 2px var(--focus), var(--shadow); } label:has(> input.check:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); } /* ---------- icon buttons (always with aria-label) ---------- */ button.icon, .btn.icon { width: var(--tap-min); min-width: var(--tap-min); min-height: var(--tap-min); height: var(--tap-min); padding: 0; border-radius: var(--r); background: transparent; color: var(--brand-text); } button.icon:hover, .btn.icon:hover { background: var(--btn-hover); } button.icon.danger { color: var(--bad); background: transparent; } button.icon.danger:hover { background: var(--bad-soft); } button.icon svg.i { width: 20px; height: 20px; } .photo button.icon, .photo button.icon.danger { background: rgba(0,0,0,.6); color: #fff; border-radius: 50%; } /* over a photo: dark glass in both themes */ .photo button.icon:hover { background: rgba(0,0,0,.75); } .photo button.icon.ph-rm.sure { background: var(--bad-strong); color: var(--on-bad); width: auto; padding: 0 10px; border-radius: var(--r-pill); } button.fl-step.icon { width: 48px; min-width: 48px; height: 48px; min-height: 48px; } /* floor mode keeps its 48px targets */ .setup-card .st-mark svg.i { width: 16px; height: 16px; stroke-width: 2.4; } svg.i.sm { width: 16px; height: 16px; } svg.i.lg { width: 24px; height: 24px; } /* a glyph that sits in a line of text (lock, note, warning…) */ .inline-ic { display: inline-flex; vertical-align: -3px; } .inline-ic svg.i { width: 18px; height: 18px; } /* ---------- small status badges (replace bare ✓ / ✕ text) ---------- */ .badge.ok { background: var(--accent-soft); color: var(--accent); box-shadow: none; text-transform: none; } .badge.bad { background: var(--bad-soft); color: var(--bad); box-shadow: none; text-transform: none; } .badge.info { background: var(--info-soft); color: var(--info); box-shadow: none; text-transform: none; } .badge svg.i { width: 13px; height: 13px; stroke-width: 2.4; vertical-align: -2px; margin-right: 2px; } /* an order's Payment + Delivery badges (progressBadges), or one green Complete */ .badge.prog { text-transform: none; } .prog-pair { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; } h1 .prog-pair, h1 .badge.prog { font-family: var(--font); font-weight: 600; } /* the pickup release: items to hand over, and the customer's signature */ .rel-items td { vertical-align: top; } /* What's going now (part of an order): one row per piece still to go, a tick and − / + */ .rel-picks { display: grid; gap: 8px; } .rel-pick { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); } .rel-pick.on { box-shadow: inset 0 0 0 2px var(--accent); } .rel-pick label { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; margin: 0; min-height: var(--tap); cursor: pointer; } .rel-pick label .grow { display: flex; flex-direction: column; min-width: 0; } .rel-pick label b { overflow-wrap: anywhere; } .rel-pick .oe-qty { min-width: 44px; text-align: center; } @media (max-width: 520px) { .rel-pick { flex-wrap: wrap; } .rel-pick .stepper { margin-left: auto; } } .sig-pad { position: relative; border: 1px dashed var(--field-line); border-radius: var(--r); background: #fff; color: #5b6470; touch-action: none; } /* paper-white in both themes: the ink is dark */ .sig-pad canvas { display: block; width: 100%; height: 160px; cursor: crosshair; touch-action: none; } .sig-pad .sig-hint { position: absolute; left: 12px; bottom: 10px; pointer-events: none; } .sig-pad .sig-clear { position: absolute; right: 8px; top: 8px; background: #F1ECE4; color: #18222E; } .sig-img { display: block; max-width: 100%; height: 72px; object-fit: contain; object-position: left; background: #fff; border-radius: var(--r-sm); } /* ---------- loading: top progress bar (router) and busy buttons ---------- */ #progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80; pointer-events: none; opacity: 0; transition: opacity .2s; overflow: hidden; } #progress::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: var(--brand); border-radius: 0 3px 3px 0; animation: progressRun 1.1s ease-in-out infinite; } #progress.on { opacity: 1; } @keyframes progressRun { from { transform: translateX(-100%); } to { transform: translateX(260%); } } .spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; display: inline-block; animation: termspin .7s linear infinite; flex-shrink: 0; } button.is-busy { cursor: progress; } button.is-busy:disabled { opacity: .7; } @media (prefers-reduced-motion: reduce) { #progress::after { animation-duration: 3s; } .spinner { animation-duration: 2s; } } /* screens: selling — Today, Quotes, Sales orders, the order screen, New sale */ /* empty states: icon + one line + (optional) the action that fills it — sellEmpty() */ .sell-empty { display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s5) var(--s4); } .sell-empty > svg.i { width: 32px; height: 32px; color: var(--faint); } .sell-empty p { margin: 0; color: var(--muted); } .sell-empty .btn, .sell-empty button { margin-top: var(--s2); } /* table rows that open on click also carry a real link in their first cell (keyboard) */ .row-link { color: inherit; text-decoration: none; } .row-link:hover { text-decoration: underline; } /* list rows that are links or buttons */ .li.li-flush { padding-left: 0; padding-right: 0; } .li.li-flush + .li::before, .li + .li.li-flush::before { left: 0; } .li > a.main { color: inherit; text-decoration: none; min-height: var(--tap); display: flex; flex-direction: column; justify-content: center; } .li > a.main:hover b { color: var(--brand-text); } button.li { width: 100%; text-align: left; justify-content: flex-start; background: transparent; color: var(--ink); border-radius: 0; font-weight: 400; white-space: normal; } button.li:active { transform: none; } .li.li-bare { padding: 0; min-height: 0; } button.li.li-bare { min-height: var(--tap); } .li .main .row2 { display: block; } .tint-brand { color: var(--brand-text); } .fw-normal { font-weight: 400; } .span-all { grid-column: 1 / -1; } /* Today: one "Needs attention" card, a row per kind of issue; a row opens in place */ .attn-card { padding-bottom: var(--s2); } .attn-card .sec-head { margin-bottom: var(--s1); } .attn-row { display: block; border-top: 1px solid var(--line); } .attn-card .sec-head + .attn-row { border-top: none; } .attn-row > summary, a.attn-row { display: flex; align-items: center; gap: var(--s3); min-height: var(--tap); padding: var(--s2) 0; cursor: pointer; list-style: none; color: var(--ink); text-decoration: none; font-weight: 600; border-radius: var(--r-sm); } .attn-row > summary::-webkit-details-marker { display: none; } .attn-row > summary:hover .grow, a.attn-row:hover .grow { color: var(--brand-text); } a.attn-row small { display: block; font-weight: 400; } .attn-ic { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; flex-shrink: 0; } .attn-ic svg.i { width: 18px; height: 18px; } .attn-row.bad .attn-ic { background: var(--bad-soft); color: var(--bad); } .attn-row.warn .attn-ic { background: var(--warn-soft); color: var(--warn); } .attn-row.info .attn-ic { background: var(--info-soft); color: var(--info); } .attn-chev { display: inline-flex; color: var(--faint); transition: transform .2s; } .attn-row[open] > summary .attn-chev { transform: rotate(90deg); } .attn-body { padding: 0 0 var(--s3) calc(32px + var(--s3)); } .attn-item { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s3); min-height: var(--tap); padding: var(--s2) 0; border-top: 1px solid var(--line); } .attn-item .grow { min-width: min(220px, 100%); } .attn-item .footnote { display: block; } @media (max-width: 640px) { .attn-body { padding-left: 0; } } @media (prefers-reduced-motion: reduce) { .attn-chev { transition: none; } } /* sign-in style prompts and the admin gate */ .pin-in { font-size: var(--fs-title2); letter-spacing: .3em; max-width: 240px; } .gate-card { max-width: 460px; margin: var(--s6) auto; } .gate-ic { display: grid; place-items: center; color: var(--brand-text); } /* the order screen */ .inline-date { width: auto; display: inline-block; padding: 0 var(--s2); margin-left: var(--s1); } .order-sub { margin: calc(-1 * var(--s2)) 0 var(--s3); } .order-search { position: relative; } /* the order screen uses New sale's layout (.sale); its side column is taller than the window, so it scrolls with the page */ .oe .sale-side { position: static; } .oe-wide { grid-column: 1 / -1; min-width: 0; } #oePay { scroll-margin-top: 72px; } /* clear of the phone top bar when Take payment scrolls to it */ .oe-qty, .oe-price { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .oe-menu .li svg.i { color: var(--navy); flex-shrink: 0; } .oe-menu .li.oe-danger, .oe-menu .li.oe-danger svg.i { color: var(--bad); } .oe-bar { display: none; } /* phones only: the total and the primary button stay at the bottom */ @media (max-width: 700px) { .oe-bar { display: flex; } .oe-head-go { display: none; } body:has(.oe-bar) .toast { bottom: calc(var(--tabbar-h) + 90px); } } button.disc-pct { min-height: var(--tap-min); } .errors.warn { background: var(--warn-soft); color: var(--warn); } .dt-foot { justify-content: space-between; } .cust-sum { justify-content: space-between; align-items: flex-start; } .cust-sum .pill { text-decoration: none; } .cust-sum .actions { align-items: flex-start; } .tot-note { padding-top: var(--s2); } .search-results .sr-row { width: 100%; min-height: var(--tap); padding: 0 var(--s3); border-radius: 0; background: none; color: var(--ink); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: var(--s3); font-weight: 400; white-space: normal; text-align: left; } .search-results .sr-row:hover { background: var(--brand-soft); } .search-results .sr-row:active { transform: none; } .search-results > div.muted { padding: var(--s3); } .split-slot { width: 54px; flex-shrink: 0; } .slot-44 { width: var(--tap-min); flex-shrink: 0; } .change-box.refund { background: var(--info-soft); box-shadow: inset 0 0 0 2px var(--info); } .change-fields { text-align: left; } /* New sale */ .avatar.add { background: var(--brand-soft); color: var(--brand-text); } .li-new .main b { color: var(--brand-text); } .price-from { font-weight: 500; } .sheet-sub { margin-top: calc(-1 * var(--s2)); } .field.field-flat { box-shadow: inset 0 0 0 1px var(--field-line); } .field-sym { font-size: var(--fs-headline); color: var(--muted); min-width: 16px; } .qty-in { max-width: 140px; } .sheet-actions.sheet-split { justify-content: space-between; } .addr-row { padding: var(--s1) 0; gap: var(--s3); } .chip.chip-brand { margin: var(--s1) 0 var(--s2); box-shadow: inset 0 0 0 1px var(--brand-text); color: var(--brand-text); } .notes-in { min-height: 60px; } .sp-row { padding: 0 0 var(--s3); } .miss-line { min-height: 18px; } .last4-in { letter-spacing: .2em; } .last4-in::placeholder { letter-spacing: normal; } .tend-in { font-size: var(--fs-title2); } .big-check.bad { background: var(--bad-strong); color: var(--on-bad); } .change-back { font-size: var(--fs-title2); } .done-new { margin-top: var(--s5); } .done-new button { min-width: 240px; min-height: 52px; font-size: var(--fs-headline); } .sale-line button.main { display: block; text-align: left; background: none; color: inherit; padding: 0; min-height: var(--tap); border-radius: var(--r-sm); font-weight: 400; white-space: normal; min-width: 0; } .sale-line button.main:hover { background: none; } .sale-line button.main:hover b { color: var(--brand-text); } .sale-line button.main:active { transform: none; } /* New sale: 48px targets throughout */ .sale button.small, .sale .btn.small, .sale .seg.mini button, .sale .so-chk { min-height: var(--tap); } .sale button.icon { width: var(--tap); min-width: var(--tap); height: var(--tap); min-height: var(--tap); } .toolbar select.sel-narrow { max-width: 220px; } .sale .seg button, .sale .disc-in input { min-height: var(--tap); } /* screens: customers & money */ /* Customers, Ready to schedule, Balances owed, Delivery board, Dispatch log, Reports, Cash drawers, Gift certificates, Leads, My account and the sign-in screens. Built from the tokens above; only what the utilities don't cover lives here. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } th:has(> .sr-only) { position: relative; } /* keeps the hidden label inside a scrolling table */ /* a clickable table row: its main cell is a real link, so Tab reaches every row and the row lights up with it */ a.row-link { color: inherit; font-weight: 600; text-decoration: none; border-radius: var(--r-sm); display: inline-flex; align-items: center; min-height: var(--tap-min); white-space: nowrap; } a.row-link:hover { text-decoration: underline; } h2 a.row-link { min-height: 0; white-space: normal; } tr.click:focus-within td { background: var(--brand-soft); } a.li { color: inherit; text-decoration: none; } .li-flush .li { padding-left: 0; padding-right: 0; } .li-flush .li + .li::before { left: 0; } /* empty states: an icon and one line */ .empty-ic { display: block; color: var(--faint); margin-bottom: var(--s2); } .empty-ic svg.i { width: 28px; height: 28px; margin: 0 auto; display: block; } .empty .footnote { display: block; max-width: 52ch; margin: 0 auto; } td.empty { height: auto; font-size: var(--fs-body); } /* page furniture */ .lede { margin: calc(-1 * var(--s2)) 0 var(--s4); color: var(--muted); max-width: 72ch; } .split { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); flex-wrap: wrap; } .h-sub { font-size: var(--fs-footnote); font-weight: 500; color: var(--muted); font-family: var(--font); letter-spacing: 0; } .aside-card { width: 380px; max-width: 100%; } .grow-card { flex: 1; min-width: min(320px, 100%); } .card-warn { box-shadow: inset 0 0 0 2px var(--warn), var(--shadow); } .break { overflow-wrap: anywhere; } .lh-loose { line-height: 1.5; } .upper { text-transform: uppercase; } .actions.end { justify-content: flex-end; } .stat .v.v-sm { font-size: var(--fs-title2); } .credit-row { padding: var(--s1) 0; } .col-qty { width: 56px; } .col-status { width: 260px; } .loc-have { font-weight: 800; color: var(--brand-text); } .file-btn { cursor: pointer; } .minw-table { min-width: min(300px, 100%); } td .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: var(--s2); vertical-align: -1px; } /* a row of labelled fields that wraps on narrow screens */ .form-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: flex-end; } .form-row label { margin: 0; } .form-row label > input, .form-row label > select { display: block; } .form-row > .grow { min-width: 160px; } .field-num { max-width: 150px; } .field-short { max-width: 240px; } .field-code { max-width: 200px; } /* reports: one bar (report, dates, quick ranges) and one header per report card */ .rep-bar { display: flex; flex-direction: column; gap: var(--s3); } .rep-bar .rep-pick { margin: 0; } .rep-ranges { align-self: flex-start; } .rep-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); } .rep-head h2 { margin: 0; } .rep-head p { margin: var(--s1) 0 0; font-size: var(--fs-footnote); color: var(--muted); max-width: 72ch; } .rep-head .actions { flex-shrink: 0; } /* #/reports: the list of reports in sections, two columns when there's room */ .rep-home { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 0 var(--s5); align-items: start; } .rep-home .set-head svg.i { color: var(--brand-text); } /* commissions: a salesperson's row opens to their lines */ .cmOpen { display: inline-flex; align-items: center; gap: var(--s1); padding-left: 0; } .cmOpen svg.i { transition: transform .15s; } .cmOpen[aria-expanded="true"] svg.i { transform: rotate(90deg); } tr.cm-detail > td { background: var(--panel-2); padding: var(--s3); } /* cash drawer: the end-of-day count stands apart, with big numbers and one primary action */ .drawer-close { margin-top: var(--s4); padding: var(--s4); border-radius: var(--r); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); } .drawer-close h3 { margin-bottom: var(--s1); } input.count-input { font-family: var(--font-display); font-size: var(--fs-title2); font-weight: 600; font-variant-numeric: tabular-nums; min-height: 56px; } .drDiff:empty { display: none; } .drDiff { margin: 0 0 var(--s3); } .drDiff .diff { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-display); font-size: var(--fs-title2); font-weight: 600; font-variant-numeric: tabular-nums; } .drDiff .diff svg.i { width: 24px; height: 24px; } /* sign-in: a calm centered card */ .auth-card .auth-brand { justify-content: center; } .auth-card .auth-title { text-align: center; font-size: var(--fs-title2); margin: 0 0 var(--s2); } .auth-card form { margin-top: var(--s4); } .auth-card .errors:not(.hidden) { margin: 0 0 var(--s3); } .auth-card input[aria-invalid="true"] { border-color: var(--bad); } .auth-card button.link { min-height: var(--tap-min); } @media (max-width: 700px) { .rep-head .actions { width: 100%; } .col-status { width: auto; } .auth-card { padding: var(--s5) var(--s4); } } /* screens: inventory */ /* (In stock, product form, Suggested reorder, Purchase orders, Promotions, Tags, Transfers, Counts, Import, Floor mode, Service) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .pre-wrap { white-space: pre-wrap; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .lede { margin: calc(-1 * var(--s2)) 0 var(--s4); font-size: var(--fs-footnote); max-width: 80ch; line-height: 1.5; } .scroll-box { max-height: 50vh; overflow: auto; } .inv-list { margin: 0 0 var(--s2); padding-left: var(--s5); line-height: 1.6; } .inv-line { display: flex; gap: var(--s3); align-items: center; padding: var(--s1) 0; border-top: 1px solid var(--line); min-height: var(--tap-min); } /* one toolbar row: search field + menus/segments; wraps cleanly on narrow screens */ .inv-bar { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-bottom: var(--s3); } .inv-bar .field, .inv-search .field { flex: 1 1 260px; min-width: 0; max-width: 440px; min-height: var(--tap); padding: 0 var(--s3); box-shadow: none; border: 1px solid var(--field-line); border-radius: var(--r-sm); background: var(--field); } .inv-search .field { max-width: none; } .inv-bar .field input, .inv-search .field input { font-size: var(--fs-body); min-height: calc(var(--tap) - 2px); } .inv-bar .field:focus-within, .inv-search .field:focus-within { box-shadow: 0 0 0 2px var(--focus); border-color: var(--focus); } .inv-bar select { width: auto; max-width: 240px; flex: 0 1 auto; } .inv-bar .seg { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; } .inv-bar .seg button { white-space: nowrap; flex-shrink: 0; } .inv-toggle { display: flex; align-items: center; gap: var(--s2); margin: 0; min-height: var(--tap-min); white-space: nowrap; color: var(--ink); font-size: var(--fs-footnote); font-weight: 500; } .inv-toggle select { margin: 0; } .inv-sum { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin: 0 0 var(--s3); } .inv-search { position: relative; } .inv-end { align-items: end; } .inv-mini { width: 64px; min-height: var(--tap-min); padding: 0 var(--s2); display: inline-block; } .po-filters label { flex-direction: row; align-items: center; gap: var(--s2); } .po-filters input[type="date"] { min-width: 0; width: auto; } @media (max-width: 700px) { .inv-bar .field { flex-basis: 100%; max-width: none; } .inv-bar select { flex: 1 1 calc(50% - var(--s2)); min-width: 0; max-width: none; } /* two across: location, category, type, vendor */ .inv-bar .seg { flex: 1 1 100%; } } /* empty states: icon, one line, the next step */ .inv-empty { display: grid; justify-items: center; gap: var(--s2); padding: var(--s6) var(--s4); text-align: center; color: var(--muted); } .inv-empty p { margin: 0; max-width: 46ch; line-height: 1.5; } .inv-empty-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); } .inv-empty .btn, .inv-empty button { margin-top: var(--s2); } td .inv-empty { padding: var(--s5) var(--s3); } /* a list row's name: a real link/button so Tab reaches every row */ .row-link { background: none; padding: 0; min-height: 0; min-width: 0; border-radius: var(--r-sm); font: inherit; font-weight: 600; color: var(--ink); text-align: left; white-space: normal; display: inline; text-decoration: none; } .row-link:hover { background: none; text-decoration: underline; } a.row-link { color: var(--brand-text); } .row-link:active { transform: none; } tr.click:focus-within td { background: var(--brand-soft); } .loc-has { font-weight: 700; } .search-results [role="button"]:focus-visible { outline-offset: -2px; background: var(--brand-soft); } /* product form: one heading style per section */ .pf-sec { font-size: var(--fs-headline); font-weight: 600; margin: var(--s5) 0 var(--s3); padding-top: var(--s4); border-top: 1px solid var(--line); } form .pf-sec:first-child, .pf > .pf-sec:first-child { margin-top: var(--s2); padding-top: 0; border-top: none; } .pf-label { font-size: var(--fs-footnote); color: var(--muted); font-weight: 500; margin: 0 0 var(--s2); } .pf-tag { align-items: start; } .pf .pm-exc summary, details.pm-exc > summary { min-height: var(--tap-min); } /* purchase orders */ .po-ack { box-shadow: inset 0 0 0 2px var(--brand), var(--shadow); } .ack-find { min-width: 240px; position: relative; } .imp-num { max-width: 160px; } .imp-sel { min-width: 220px; } .info-box { background: var(--info-soft); color: var(--info); } .file-btn { position: relative; margin: 0; cursor: pointer; } .file-btn:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; } .file-in { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; } /* promotions */ .promo-row { padding: var(--s3) 0; flex-wrap: wrap; } .promo-row::before { left: 0 !important; } /* floor mode: category tiles when nothing is searched, 48px+ everywhere */ .fl-field { flex: 1; min-width: 0; min-height: 56px; box-shadow: none; border: 1px solid var(--field-line); background: var(--field); border-radius: var(--r); } .fl-field input { font-size: var(--fs-title2); min-height: 54px; } .fl-bar .fl-field input { padding: 0; } .fl-title { margin: var(--s1) 0 var(--s2); font-size: var(--fs-large); line-height: 1.15; } .fl-tile { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; min-height: 200px; border-radius: var(--r-lg); overflow: hidden; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); text-align: left; white-space: normal; } .fl-tile:hover { background: var(--panel); border-color: var(--brand); } .fl-tile:active { transform: scale(.985); } .fl-tile-photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--panel-2); } .fl-tile-blank { display: grid; place-items: center; color: var(--faint); } .fl-tile-blank svg.i { width: 40px; height: 40px; } .fl-tile-name { padding: var(--s3) var(--s4); font-size: var(--fs-headline); font-weight: 700; font-family: var(--font-display); } .fl-tile-count { display: block; margin-top: 2px; font-size: var(--fs-caption); font-weight: 400; font-family: var(--font); color: var(--muted); } /* a tile with no photo: a line icon for the kind of furniture, the name and the count */ .fl-tile.fl-tile-text { justify-content: space-between; align-items: flex-start; min-height: 150px; padding: var(--s4); text-align: left; } .fl-tile-text .fl-tile-name { padding: 0; } .fl-tile-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--brand-soft); color: var(--brand); } .fl-tile-ic svg.i { width: 32px; height: 32px; } /* item sheet: "Also in" other sizes and finishes */ .fl-also:empty { display: none; } .fl-also { margin-top: var(--s4); } .fl-also-h { margin: 0 0 8px; font-size: var(--fs-headline); } .fl-also-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; } .fl-also-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; min-height: var(--tap); border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); font: inherit; text-align: left; white-space: normal; cursor: pointer; } .fl-also-card:hover { border-color: var(--brand); } .fl-also-card > * { max-width: 100%; overflow-wrap: anywhere; } .fl-also-price { font-weight: 700; font-variant-numeric: tabular-nums; } .fl-types { padding-top: 4px; } .fl-types .fl-chip { min-height: 44px; padding: 0 14px; font-size: 15px; background: var(--panel-2); } .fl-types .fl-chip.on { background: var(--ink); color: var(--panel); border-color: var(--ink); } .fl-empty { display: grid; justify-items: center; gap: var(--s3); font-size: var(--fs-headline); } .fl-empty p { margin: 0; } .fl-empty-sm { padding: var(--s5) var(--s4); } .fl-empty svg.i { width: 36px; height: 36px; color: var(--faint); } .fl-video { width: 100%; border-radius: var(--r); background: var(--panel-2); display: block; } .fl-actions .spacer { flex: 1; } .fl-actions .fl-big.link { min-height: 56px; } .fl-chip, .fl-filters select, .fl-toggle { min-height: 48px; } body.floor-on .fl-list .fl-step, body.floor-on .fl-list button.icon { width: 48px; min-width: 48px; height: 48px; min-height: 48px; } @media (max-width: 700px) { .fl-bar .fl-field { order: 3; flex-basis: 100%; } .fl-grid { grid-template-columns: 1fr 1fr; } .fl-tile { min-height: 160px; } .fl-tile-name { font-size: var(--fs-body); } } /* service */ .svc-pick { width: 100%; border-radius: 0; background: var(--panel); color: var(--ink); text-align: left; justify-content: flex-start; white-space: normal; font-weight: 400; min-height: 56px; } .svc-pick:hover { background: var(--panel-2); } .svc-pick .main small { display: block; } .svc-pick:active { transform: none; } .svc-link { color: inherit; text-decoration: none; } .brand-ic { color: var(--brand-text); font-weight: 600; } .svc-main { min-width: 320px; } .svc-side { width: 380px; max-width: 100%; } .svc-full { width: 100%; border-radius: var(--r); display: block; } @media (max-width: 700px) { .svc-main { min-width: 0; flex-basis: 100%; } .svc-side { width: 100%; } } .inv-bar label { margin: 0; display: flex; align-items: center; gap: var(--s2); white-space: nowrap; } .inv-bar label > input, .inv-bar label > select { margin-top: 0; } /* screens: settings */ /* Settings = a list of sections + the open section (like iPhone / macOS Settings). The switch to a drill-in list is a container query on .set-wrap (the content width), matched in app.js by setNarrow(). Rows: .set-head over a .set-group of .set-row, .set-foot under. */ :root { --switch-knob: #FFFFFF; --switch-shadow: 0 1px 3px rgba(0,0,0,.28); } .set-wrap { container-type: inline-size; } .set-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: var(--s6); align-items: start; } .set-nav { position: sticky; top: var(--s4); max-height: calc(100vh - var(--s6)); overflow-y: auto; padding: 0 var(--s1) var(--s4) 0; } .set-nav h1 { margin: var(--s1) 0 var(--s2); } .set-nav-sec { font-size: var(--fs-caption); font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; padding: var(--s3) var(--s3) var(--s1); } .set-nav-list { display: flex; flex-direction: column; gap: 1px; } .set-nav-list a { display: flex; align-items: center; gap: var(--s3); min-height: var(--tap-min); padding: 0 var(--s3); border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-size: var(--fs-dense); position: relative; } .set-nav-list a svg.i { color: var(--brand-text); } .set-nav-list a:hover { background: var(--brand-soft); } .set-nav-list a.on { background: var(--nav-active); color: var(--brand-text); font-weight: 600; } .set-nav-list a .chev { display: none; color: var(--faint); } .set-pane { min-width: 0; max-width: 760px; padding-bottom: var(--s6); } .set-back { display: none; } .set-title { margin: var(--s2) 0 var(--s4); } .set-head { display: flex; align-items: center; gap: var(--s2); font-family: var(--font); font-size: var(--fs-caption); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: var(--s5) var(--s4) var(--s2); } .set-head .badge { text-transform: none; letter-spacing: 0; } .set-intro { color: var(--muted); font-size: var(--fs-footnote); line-height: 1.5; margin: 0 var(--s1) var(--s4); } .set-foot { color: var(--muted); font-size: var(--fs-footnote); line-height: 1.45; margin: var(--s2) var(--s4) 0; } .set-foot code, .set-code { word-break: break-all; } .set-group { background: var(--panel); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; } .set-group.set-pad { padding: var(--s3) var(--s4); overflow: visible; } .set-group.table-wrap { overflow-x: auto; } .set-group > summary { min-height: var(--tap); display: flex; align-items: center; padding: 0 var(--s4); cursor: pointer; font-weight: 600; } .set-group[open] > summary { border-bottom: 1px solid var(--line); } .set-pane details:not(.set-group) > summary { cursor: pointer; min-height: var(--tap-min); display: flex; align-items: center; } .set-scroll { max-height: 340px; overflow: auto; } /* one inset row: label on the left, its value on the right */ .set-group .set-row, label.set-row { display: flex; align-items: center; gap: var(--s4); min-height: var(--tap); padding: var(--s2) var(--s4); margin: 0; color: var(--ink); font-size: var(--fs-body); font-weight: 400; position: relative; } .set-group > * + .set-row::before, .set-group > * + .set-link::before, .set-group > * + .user-row::before, .set-group > * + .term-row::before, .set-group > * + .vf-row::before, .set-group > * + .vs-row::before { content: ""; position: absolute; top: 0; left: var(--s4); right: 0; height: 1px; background: var(--line); } .set-lbl { flex: 1 1 40%; min-width: 0; } .set-lbl small { display: block; color: var(--muted); font-size: var(--fs-caption); } .set-row > input:not(.check), .set-row > select, .set-row > .hstack, .set-row > .inline { flex: 1 1 58%; max-width: 400px; margin: 0; min-width: 0; } .set-row > input.set-num { flex: 0 0 132px; max-width: 132px; } .set-row.stack { flex-direction: column; align-items: stretch; gap: var(--s2); } .set-row.stack > * { max-width: none; flex: none; } .set-row > input.check { margin-left: auto; } .sp-off { text-decoration: line-through; } /* iOS-style switch on a checkbox (role="switch"); the whole row is the tap target */ input.check.switch { appearance: none; -webkit-appearance: none; width: 51px; height: 31px; border-radius: var(--r-pill); background: var(--field-line); position: relative; flex-shrink: 0; transition: background .2s; cursor: pointer; } input.check.switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: var(--switch-knob); box-shadow: var(--switch-shadow); transition: transform .2s; } input.check.switch:checked { background: var(--accent); } input.check.switch:checked::before { transform: translateX(20px); } @media (prefers-reduced-motion: reduce) { input.check.switch, input.check.switch::before { transition: none; } } .set-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); } /* a row that opens something (vendor, card processing) */ .set-link, button.set-link { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: var(--tap); padding: var(--s2) var(--s4); background: transparent; color: var(--ink); text-decoration: none; text-align: left; justify-content: flex-start; border-radius: 0; font-weight: 400; white-space: normal; position: relative; } .set-link:hover, button.set-link:hover { background: var(--panel-2); } .set-link:active, button.set-link:active { transform: none; background: var(--brand-soft); } .set-link .chev { color: var(--faint); } .set-link b { display: block; font-weight: 600; } .set-link small { display: block; color: var(--muted); font-size: var(--fs-footnote); } .set-subback { padding-left: 0; gap: var(--s1); } .set-pane .change-hint, .set-pane .errors { margin: var(--s3) 0; } tr.on > td { background: var(--brand-soft); } /* staff accounts */ .user-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, auto); gap: var(--s2) var(--s4); padding: var(--s3) var(--s4); position: relative; } .user-set { display: flex; flex-direction: column; gap: var(--s1); } .user-act { grid-column: 1 / -1; } /* card terminals, vendor option boxes and surcharges */ .term-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--s2); align-items: center; padding: var(--s2) var(--s4); position: relative; } .vf-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto auto; gap: var(--s2); align-items: center; padding: var(--s2) var(--s4); position: relative; } .vf-req, label.vf-req:has(> input.check) { display: flex; align-items: center; gap: var(--s2); margin: 0; min-height: var(--tap-min); color: var(--muted); font-size: var(--fs-footnote); } .vf-head { padding-top: var(--s2); padding-bottom: 0; } .comm-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; } .spiff-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr) auto; } .comm-row.cat-rate-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, .8fr) auto; } .cat-rate-row:not(:has(> input)) > select[data-k=mode] { grid-column: 2 / 4; } .spiff-row { align-items: end; } .spiff-date { margin: 0; min-width: 0; } .spiff-date > span { display: block; color: var(--muted); font-size: var(--fs-caption); font-weight: 400; } /* Set spiffs by model: one row per item, its $ box on the right */ .sm-list { max-height: 50vh; overflow-y: auto; border-top: 1px solid var(--line); } .sm-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); } .sm-row b { display: block; font-weight: 600; } .sm-row small { display: block; } .sm-row input { flex: 0 0 110px; max-width: 110px; } /* Settings → Commissions → Rate calculator */ .cc-seg { width: 100%; } .cc-seg button { flex: 1 1 0; } input.cc-range { width: 100%; padding: 0; border: 0; background: transparent; accent-color: var(--accent); min-height: var(--tap-min); } .cc-prop { margin: 0 var(--s4) var(--s3); font-size: var(--fs-body); } .cc-prop b { font-size: var(--fs-title2); } .cc-prop small { display: block; margin-top: var(--s1); } .cc-stats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-bottom: var(--s3); } .cc-now { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: 0 var(--s4); color: var(--muted); font-size: var(--fs-footnote); line-height: 1.45; } /* Settings → Special charges */ .set-link.spc-off b { color: var(--muted); } .vs-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 72px auto; gap: var(--s2); align-items: center; padding: var(--s2) var(--s4); position: relative; } .brand-logo { min-height: 80px; border-width: 3px; border-style: solid; } .set-color { width: 56px; padding: 2px; height: var(--tap-min); } .brand-card label { margin-bottom: var(--s3); } /* narrow content (phone, iPad portrait): the list drills into one section with a back button */ @container (max-width: 699px) { .set-shell { grid-template-columns: minmax(0, 1fr); gap: 0; } .set-shell.at-root .set-pane, .set-shell:not(.at-root) .set-nav { display: none; } .set-nav { position: static; max-height: none; overflow: visible; padding: 0; } .set-nav-list { background: var(--panel); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; gap: 0; } .set-nav-list a { min-height: var(--tap); border-radius: 0; padding: 0 var(--s4); font-size: var(--fs-body); } .set-nav-list a + a::before { content: ""; position: absolute; top: 0; left: 48px; right: 0; height: 1px; background: var(--line); } .set-nav-list a .chev { display: block; } .set-nav-list a.on { background: transparent; color: var(--ink); font-weight: 400; } .set-back { display: inline-flex; align-items: center; gap: var(--s1); min-height: var(--tap-min); color: var(--brand-text); text-decoration: none; font-weight: 500; margin-left: calc(-1 * var(--s1)); } .set-title { margin-top: 0; } .user-row { grid-template-columns: minmax(0, 1fr); } .term-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } .term-row > select { grid-column: 1 / 3; } .comm-row { grid-template-columns: minmax(0, 1fr) 110px auto; } .comm-row > select { grid-column: auto; } .comm-row.cat-rate-row { grid-template-columns: minmax(0, 1fr) 110px auto; } .cat-rate-row > select[data-k=name] { grid-column: 1 / 3; } .cat-rate-row > button { grid-column: 3; grid-row: 1; } .cat-rate-row:not(:has(> input)) > select[data-k=mode] { grid-column: 1 / 3; } .spiff-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } .spiff-row > button { grid-column: 3; grid-row: 1; } } @container (max-width: 480px) { /* text boxes and pickers go under their label; numbers and switches stay on the right */ .set-group .set-row:has(> input:not(.check):not(.set-num)), .set-group .set-row:has(> select), .set-group .set-row:has(> .hstack), .set-group .set-row:has(> .inline), label.set-row:has(> input:not(.check):not(.set-num)), label.set-row:has(> select), label.set-row:has(> .hstack), label.set-row:has(> .inline) { flex-direction: column; align-items: stretch; gap: var(--s1); } .set-row:has(> input:not(.check):not(.set-num)) > .set-lbl, .set-row:has(> select) > .set-lbl, .set-row:has(> .hstack) > .set-lbl, .set-row:has(> .inline) > .set-lbl { flex: none; } .set-row > input:not(.check), .set-row > select, .set-row > .hstack, .set-row > .inline { max-width: none; flex: none; } .set-row > input.set-num { flex: 0 0 96px; max-width: 96px; } .vf-row { grid-template-columns: minmax(0, 1fr) auto auto; } .vf-row > .fc { grid-column: 1 / -1; grid-row: 2; } .vf-head { display: none; } .vs-row { grid-template-columns: minmax(0, 1fr) 80px 64px auto; } } /* floor mode tiles: everything stays inside the card (a promotion's banner, price and struck prices wrap onto lines) */ .fl-card > * { max-width: 100%; min-width: 0; } .fl-card .fl-name, .fl-card .fl-sub, .fl-card .fl-where, .fl-card .fl-order { overflow-wrap: anywhere; } .fl-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 4px; width: 100%; } .fl-price > b, .fl-price > s { white-space: nowrap; } .fl-price .promo-badge { align-self: center; } .fl-price .reg-line { flex-basis: 100%; white-space: normal; } .fl-detail .fl-price { margin-top: 4px; } .was-line { font-size: var(--fs-footnote, 14px); font-weight: 500; color: var(--muted); white-space: nowrap; } .fl-price .was-line { flex-basis: 100%; } .fl-price .was-line s { font-size: inherit; font-weight: 600; } .fl-card { white-space: normal; } /* (a button: buttons don't wrap by default) */ .was-line { white-space: normal; } .was-line s, .reg-line s { white-space: nowrap; } @media (max-width: 520px) { .fl-grid:not(:has(.fl-tile)) { grid-template-columns: 1fr; } } /* phones: one product per row (category tiles stay two across) */ /* inside the iPhone / iPad app: the camera scan button beside a scan box */ .cam-scan { flex: 0 0 auto; margin-left: var(--s2); } .scan-box:has(.cam-scan), .field:has(.cam-scan) { display: flex; align-items: center; gap: var(--s2); } /* ZIP → town: the town box glows briefly when it's filled from the ZIP */ input.filled { animation: zip-filled 1.2s ease-out; } @keyframes zip-filled { from { background: var(--brand-soft); } to { background: inherit; } } @media (prefers-reduced-motion: reduce) { input.filled { animation: none; } } /* Order screen: when the order was created, right under its title */ .order-created { color: var(--muted); font-size: var(--fs-footnote); margin: calc(-1 * var(--s2)) 0 var(--s3); } .order-created .i { vertical-align: -3px; margin-right: var(--s1); } .order-created b { color: var(--ink); font-weight: 600; } .h1-sub { font-size: var(--fs-body); font-weight: 500; font-family: var(--font); } /* Customers → Merge into… / Possible duplicates */ .mg-card { margin: 0; padding: var(--s3); } .mg-card b { font-weight: 600; } .mg-list { margin: 0 0 var(--s3); padding-left: 1.2em; line-height: 1.7; } .dup-group .li .main a { color: inherit; text-decoration: none; } .dup-group .li .main small { display: block; } /* Gift certificates → Add an old gift card: the CSV preview */ .og-tbl { max-height: 280px; overflow: auto; margin-bottom: var(--s2); } /* Type-to-search drop-downs (ui.js): the search box and list that open under a longer