/* ============================================================ DHN POS — "Quiet Premium" design system Two themes via data-theme on . All color through tokens. Separation by elevation, well-style inputs, restrained motion. POS sizing per brief §8a (bigger targets, no load-bearing hover). All existing class names are preserved. ============================================================ */ :root{ /* type */ --font-ui:'Inter',system-ui,-apple-system,sans-serif; --font-display:'Archivo',var(--font-ui); --fs-0:.6875rem; /* 11 labels/eyebrows */ --fs-1:.8125rem; /* 13 secondary */ --fs-2:.9375rem; /* 15 body (POS floor, shifted up one step) */ --fs-3:1.0625rem; /* 17 section titles */ --fs-4:1.25rem; /* 20 page h1 */ /* shape + motion */ --r-s:6px; --r-m:8px; --r-l:12px; --t-fast:130ms cubic-bezier(.4,0,.2,1); --t-med:200ms cubic-bezier(.4,0,.2,1); --t-spring:260ms cubic-bezier(.34,1.56,.64,1); } html[data-theme="dark"]{ color-scheme:dark; --bg:#131416; --bg-raised:#1B1D20; --bg-sunken:#0E0F11; --bg-overlay:#202327; --field:#101214; --field-hover:#15171A; --field-focus:#0C0D0F; --hover:rgba(233,234,236,.045); --text:#E9EAEC; --text-2:#9BA0A7; --text-3:#61656C; --accent:#C7CDD4; --accent-hover:#DDE1E6; --accent-ink:#15161A; --border:rgba(233,234,236,.07); --border-strong:rgba(233,234,236,.16); --ring:rgba(199,205,212,.22); --ok:#79B38D; --ok-bg:rgba(121,179,141,.1); --warn:#C9A86A; --warn-bg:rgba(201,168,106,.1); --danger:#CE8484; --danger-strong:#A75454; --danger-bg:rgba(206,132,132,.09); --info:#8FB0CE; --info-bg:rgba(143,176,206,.1); --purple:#AFA0D6; --purple-bg:rgba(175,160,214,.1); --shadow-card:0 1px 2px rgba(0,0,0,.25); --shadow-pop:0 4px 12px rgba(0,0,0,.35),0 24px 64px -12px rgba(0,0,0,.5); --shadow-lift:0 6px 16px -6px rgba(0,0,0,.45); --scrim:rgba(8,9,10,.72); } html[data-theme="light"]{ color-scheme:light; --bg:#F4F4F3; --bg-raised:#FFFFFF; --bg-sunken:#ECECEB; --bg-overlay:#FFFFFF; --field:#F0F0EF; --field-hover:#EAEAE8; --field-focus:#FFFFFF; --hover:rgba(28,30,34,.04); --text:#1C1E22; --text-2:#5D6269; --text-3:#9AA0A7; --accent:#26292E; --accent-hover:#3A3E45; --accent-ink:#F6F6F5; --border:rgba(28,30,34,.1); --border-strong:rgba(28,30,34,.22); --ring:rgba(38,41,46,.14); --ok:#3E7E55; --ok-bg:rgba(62,126,85,.08); --warn:#8A6F35; --warn-bg:rgba(138,111,53,.1); --danger:#A14A4A; --danger-strong:#8A3B3B; --danger-bg:rgba(161,74,74,.07); --info:#3C6690; --info-bg:rgba(60,102,144,.08); --purple:#6A5BA0; --purple-bg:rgba(106,91,160,.09); --shadow-card:0 1px 2px rgba(20,22,26,.05),0 1px 1px rgba(20,22,26,.03); --shadow-pop:0 4px 16px rgba(20,22,26,.1),0 24px 64px -12px rgba(20,22,26,.18); --shadow-lift:0 6px 16px -8px rgba(20,22,26,.25); --scrim:rgba(28,30,34,.45); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;font-family:var(--font-ui);font-size:var(--fs-2);line-height:1.5; color:var(--text);background:var(--bg); font-variant-numeric:tabular-nums; /* digits align everywhere */ -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } a{color:var(--accent);text-decoration:none} html[data-theme="light"] a{color:var(--info)} /* dark graphite "accent" is unreadable as a link */ a:hover{text-decoration:underline} h1{font-family:var(--font-display);font-size:var(--fs-4);font-weight:600;letter-spacing:-.01em;margin:0 0 4px} h2{font-family:var(--font-display);font-size:var(--fs-0);font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--text-2);margin:0 0 12px} h3{font-family:var(--font-display);font-size:var(--fs-0);font-weight:600;letter-spacing:.07em; text-transform:uppercase;color:var(--text-2);margin:0 0 8px} small,.muted{color:var(--text-3);font-size:var(--fs-1)} .icon{flex:none;vertical-align:-3px} /* ---------- app shell ---------- */ .layout{min-height:100vh} .sidebar{position:fixed;top:0;left:0;bottom:0;width:236px;background:var(--bg-raised); border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:40;transition:transform var(--t-med)} .sidebar__brand{display:flex;align-items:center;gap:9px;height:56px;padding:0 18px; font-family:var(--font-display);font-weight:700;font-size:var(--fs-2);letter-spacing:.02em; border-bottom:1px solid var(--border);color:var(--text)} .sidebar__brand .dot{width:24px;height:24px;border-radius:7px;background:var(--accent); display:grid;place-items:center;color:var(--accent-ink);font-size:12px;font-weight:700} .sidebar__nav{flex:1;overflow-y:auto;padding:12px 10px} .nav-group{margin-bottom:14px} .nav-group__label{font-size:var(--fs-0);font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--text-3);padding:4px 10px 6px} .nav-link{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-s); color:var(--text-2);font-weight:500;margin-bottom:1px;line-height:1.1;transition:background var(--t-fast),color var(--t-fast)} .nav-link:hover{background:var(--hover);color:var(--text);text-decoration:none} .nav-link.on{background:var(--accent);color:var(--accent-ink);font-weight:600} .nav-link.on .icon{color:var(--accent-ink)} .nav-link .icon{color:var(--text-3)} .sidebar__user{border-top:1px solid var(--border);padding:10px 14px;font-size:var(--fs-1); color:var(--text-3);display:flex;align-items:center;justify-content:space-between;gap:8px} .sidebar__user b{color:var(--text);font-weight:600} .sidebar__user a{color:var(--text-3)}.sidebar__user a:hover{color:var(--text)} .main{margin-left:236px;min-height:100vh;display:flex;flex-direction:column} .topbar{position:sticky;top:0;z-index:30;height:56px;display:flex;align-items:center;gap:10px; padding:0 20px;background:var(--bg-sunken);border-bottom:1px solid var(--border)} .topbar__spacer{flex:1} .topbar__user{font-size:var(--fs-1);color:var(--text-2)} .iconbtn,.menu-toggle{display:inline-grid;place-items:center;background:var(--field); border:1px solid var(--border);color:var(--text-2);width:38px;height:38px;border-radius:var(--r-s); padding:0;cursor:pointer;transition:background var(--t-fast),transform var(--t-fast)} .iconbtn:hover,.menu-toggle:hover{background:var(--field-hover);color:var(--text)} .iconbtn:active,.menu-toggle:active{transform:scale(.94)} .menu-toggle{display:none} .content{padding:22px 24px 48px;max-width:1200px;width:100%;margin:0 auto;flex:1} @media(min-width:1700px){.content{max-width:1360px}} .scrim{display:none;position:fixed;inset:0;background:var(--scrim);z-index:35} body.nav-open .scrim{display:block} /* theme toggle: icons swap by theme */ .theme-toggle .moon{display:none}.theme-toggle .sun{display:block} html[data-theme="dark"] .theme-toggle .sun{display:none} html[data-theme="dark"] .theme-toggle .moon{display:block} .theme-toggle .icon{transition:transform var(--t-spring)} .theme-toggle:active .icon{transform:rotate(40deg)} /* ---------- page header ---------- */ .page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px} .page-head .actions{display:flex;gap:8px;flex-wrap:wrap} /* ---------- workspace: central list + right-hand editor column ---------- */ .workspace{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;align-items:start} .workspace__main{min-width:0} .workspace__side{position:sticky;top:calc(var(--topbar-h) + 18px);max-height:calc(100vh - var(--topbar-h) - 36px); overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding-right:2px} .workspace__side .box{margin:0} @media(max-width:1024px){ .workspace{grid-template-columns:1fr} .workspace__side{position:static;max-height:none;overflow:visible} } /* ---------- cards ---------- */ .box,.card{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-l); padding:18px;box-shadow:var(--shadow-card)} .box{margin:0 0 16px} .box h2:first-child,.card h2:first-child{margin-top:0} .row{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;margin-bottom:16px} .row>.box,.row>.card{flex:1;min-width:280px;margin-bottom:0} /* ---------- stats ---------- */ .cards,.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:18px} .stat,.card.stat{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-l); padding:16px 18px;box-shadow:var(--shadow-card)} .stat__value,.card .num{font-family:var(--font-display);font-size:1.7rem;font-weight:600; letter-spacing:-.02em;color:var(--text);line-height:1.1;display:block} .stat__label,.card>div:last-child{color:var(--text-3);font-size:var(--fs-1);margin-top:4px} .stat__sub{margin-top:8px;font-size:var(--fs-1)} .stat--danger .stat__value{color:var(--danger)} .stat--warning .stat__value{color:var(--warn)} /* ---------- buttons ---------- */ button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;position:relative;overflow:hidden; font-family:var(--font-display);font-weight:600;font-size:var(--fs-0);letter-spacing:.06em; text-transform:uppercase;line-height:1;cursor:pointer;padding:11px 16px;border-radius:var(--r-s); border:1px solid transparent;background:var(--accent);color:var(--accent-ink); transition:background var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast),transform var(--t-fast); white-space:nowrap} button:hover,.btn:hover{background:var(--accent-hover);color:var(--accent-ink);text-decoration:none;transform:translateY(-1px)} button:active,.btn:active{transform:translateY(0) scale(.97)} /* press squish */ button:focus-visible,.btn:focus-visible, input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)} button:disabled,.btn:disabled{opacity:.45;cursor:not-allowed;transform:none} .btn.ghost,.btn-secondary{background:var(--field);color:var(--text);border-color:var(--border-strong)} .btn.ghost:hover,.btn-secondary:hover{background:var(--field-hover);color:var(--text)} .btn.cash{background:var(--ok);color:#0c130f}.btn.cash:hover{background:var(--ok)} .btn.danger,.btn-danger{background:var(--danger-strong);color:#fff}.btn.danger:hover{background:var(--danger)} .btn-sm{padding:7px 11px} .btn-lg{padding:14px 20px;font-size:var(--fs-1)} /* ---------- forms: well-style ---------- */ label{display:block;font-family:var(--font-display);font-size:var(--fs-0);font-weight:600; letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);margin:10px 0 5px} input,select,textarea{font-family:var(--font-ui);font-size:var(--fs-2);color:var(--text); background:var(--field);padding:10px 12px;border:1px solid transparent;border-radius:var(--r-s); width:100%;max-width:100%;transition:background var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)} input::placeholder,textarea::placeholder{color:var(--text-3)} input:hover,select:hover,textarea:hover{background:var(--field-hover)} input:focus,select:focus,textarea:focus{background:var(--field-focus);border-color:var(--border-strong); box-shadow:0 0 0 3px var(--ring);outline:none} textarea{min-height:74px;resize:vertical} input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--accent);vertical-align:-2px;margin-right:6px} input[type=color]{padding:4px;height:40px;cursor:pointer} select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239BA0A7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 10px center;padding-right:32px} form.box input,form.box select,form.box textarea{display:block;width:100%} label.inline-check{font-family:var(--font-ui);text-transform:none;letter-spacing:0;font-weight:500; color:var(--text);display:flex;align-items:center;gap:2px} .help{display:block;color:var(--text-3);font-size:var(--fs-1);margin-top:5px} .field{margin-bottom:14px;min-width:0} /* min-width:0 — gotcha §7.1 */ .field>label{margin-top:0} .form-section{border-top:1px solid var(--border);margin-top:8px;padding-top:14px} .form-section:first-of-type{border-top:0;margin-top:0;padding-top:0} .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px} .form-grid .full{grid-column:1/-1} .form-grid>*{min-width:0} /* gotcha §7.1 */ .form-actions{display:flex;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)} @media(max-width:560px){.form-grid{grid-template-columns:1fr}} /* toolbar */ .toolbar,.inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 14px} .inline input,.inline select{margin:0;width:auto} .toolbar .search{position:relative;flex:1;min-width:200px;max-width:340px} .toolbar .search input{padding-left:34px;width:100%} .toolbar .search .icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-3)} .toolbar .spacer{flex:1} /* ---------- tables ---------- */ .table-wrap{overflow:auto;border:1px solid var(--border);border-radius:var(--r-l);background:var(--bg-raised);box-shadow:var(--shadow-card)} table{border-collapse:separate;border-spacing:0;width:100%;background:var(--bg-raised); border:1px solid var(--border);border-radius:var(--r-l);overflow:hidden;margin:0 0 16px} .table-wrap table{border:0;border-radius:0;margin:0} thead th{position:sticky;top:56px;z-index:1;background:var(--bg-sunken);color:var(--text-3); font-family:var(--font-display);font-weight:600;font-size:var(--fs-0);letter-spacing:.06em; text-transform:uppercase;text-align:left;padding:10px 14px;border-bottom:1px solid var(--border);white-space:nowrap} .table-wrap thead th{top:0} tbody td{padding:11px 14px;border-bottom:1px solid var(--border);font-size:var(--fs-1);color:var(--text)} tfoot th{padding:11px 14px;font-size:var(--fs-1);background:var(--bg-sunken);color:var(--text-2)} tbody tr:last-child td{border-bottom:0} tbody tr:hover td{background:var(--hover)} th.sortable{cursor:pointer;user-select:none} th.sortable:hover{color:var(--text)} th.sortable[data-dir]::after{content:" ▲";font-size:9px;opacity:.7} th.sortable[data-dir="desc"]::after{content:" ▼"} th:first-child,td:first-child{padding-left:18px} th:last-child,td:last-child{padding-right:18px} td small{display:block;color:var(--text-3)} .neg{color:var(--danger);font-weight:600} .dirty td{background:var(--warn-bg)} .row-actions{display:flex;gap:6px;justify-content:flex-end} .row-actions a{color:var(--text-2);font-family:var(--font-display);font-weight:600;font-size:var(--fs-0); letter-spacing:.05em;text-transform:uppercase;padding:5px 9px;border-radius:var(--r-s);border:1px solid var(--border)} .row-actions a:hover{background:var(--hover);color:var(--text);text-decoration:none} .empty{padding:28px;text-align:center;color:var(--text-3)} #liveResults{transition:opacity .12s} .pager{display:flex;align-items:center;gap:12px;justify-content:center;margin:14px 0} /* ---------- status pills ---------- */ .badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-display);font-size:var(--fs-0); font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px;line-height:1.5;border:1px solid transparent} .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .badge--neutral{background:var(--hover);color:var(--text-2);border-color:var(--border)} .badge--success{background:var(--ok-bg);color:var(--ok)} .badge--warning,.badge.warn{background:var(--warn-bg);color:var(--warn)} .badge--danger{background:var(--danger-bg);color:var(--danger)} .badge--info{background:var(--info-bg);color:var(--info)} .badge--purple{background:var(--purple-bg);color:var(--purple)} /* ---------- flash / alerts ---------- */ .flash,.alert{display:flex;align-items:center;gap:9px;background:var(--ok-bg);border:1px solid transparent; color:var(--ok);padding:11px 14px;border-radius:var(--r-m);margin:0 0 14px;font-size:var(--fs-1);font-weight:500} .flash{animation:flashin var(--t-spring)} /* feedback: confirms a save just happened */ @keyframes flashin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .alert--warning{background:var(--warn-bg);color:var(--warn)} .alert--danger{background:var(--danger-bg);color:var(--danger)} .alert--info{background:var(--info-bg);color:var(--info)} .alert .icon{flex:none} /* ---------- dashboard ---------- */ .quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px} .quick .btn{justify-content:flex-start;padding:14px 16px} .activity{list-style:none;margin:0;padding:0} .activity li{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:10px 0;border-bottom:1px solid var(--border);font-size:var(--fs-1)} .activity li:last-child{border-bottom:0} .activity .when{color:var(--text-3);font-size:var(--fs-1);white-space:nowrap} /* ---------- modals (native ) ---------- */ dialog{border:1px solid var(--border);border-radius:var(--r-l);background:var(--bg-raised);color:var(--text); box-shadow:var(--shadow-pop);padding:22px;max-width:440px;width:92%} dialog::backdrop{background:var(--scrim)} dialog[open]{animation:fadeup .2s ease} dialog h2{margin-top:0} dialog menu{display:flex;gap:8px;justify-content:flex-end;padding:0;margin:18px 0 0} .paydue{font-size:1.5rem;font-weight:700;font-family:var(--font-display)} .change-big{font-size:1.5rem;font-weight:700;color:var(--ok)} .quickcash{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 4px} .quickcash button{flex:1;background:var(--field);color:var(--text);border:1px solid var(--border-strong)} .quickcash button:hover{background:var(--field-hover)} /* on-screen numpad (§8a: big keys, press-squish, no shine) */ .numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 2px} .numpad button{background:var(--field);color:var(--text);border:1px solid var(--border-strong); font-family:var(--font-ui);font-size:1.25rem;font-weight:600;letter-spacing:0;text-transform:none; min-height:54px;padding:0} .numpad button:hover{background:var(--field-hover)} /* ---------- tabs (settings) ---------- */ .tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:18px} .tab{font-family:var(--font-display);font-size:var(--fs-0);font-weight:600;letter-spacing:.07em; text-transform:uppercase;color:var(--text-3);padding:10px 14px;border-bottom:2px solid transparent;cursor:pointer} .tab:hover{color:var(--text);text-decoration:none} .tab.on{color:var(--text);border-bottom-color:var(--accent)} .tabpanel{display:none}.tabpanel.on{display:block} /* ============================================================ LOGIN */ body.login{display:flex;min-height:100vh;align-items:center;justify-content:center;background:var(--bg)} .loginbox{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-l); padding:28px;width:340px;box-shadow:var(--shadow-pop)} .loginbox h1{margin:0 0 4px} .loginbox .sub{color:var(--text-3);margin:0 0 18px;font-size:var(--fs-1)} .loginbox .err{background:var(--danger-bg);color:var(--danger);padding:9px 12px;border-radius:var(--r-s); font-size:var(--fs-1);font-weight:500;margin-bottom:12px} .loginbox button{width:100%;margin-top:16px} .login-brand{display:flex;align-items:center;gap:9px;margin-bottom:16px;font-family:var(--font-display);font-weight:700;letter-spacing:.02em} .login-brand .dot{width:26px;height:26px;border-radius:8px;background:var(--accent);display:grid;place-items:center;color:var(--accent-ink);font-weight:700} /* Store logo (assets/logo.png) — login pages show it larger/centered, sidebar smaller */ .login-brand{justify-content:center} .login-brand .brand-logo{max-height:84px;width:auto} .sidebar__brand .brand-logo{max-height:38px;width:auto} /* ============================================================ POS (§8a scale) */ .pos-grid{display:grid;grid-template-columns:1fr 400px;gap:18px;align-items:start} .pos-main{min-width:0} .posbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .posbar label{margin:0} .posbar select{width:auto;min-width:160px} /* Customer typeahead: input + floating results dropdown */ .cust-search{position:relative;display:inline-block} .cust-search input{width:230px;padding-right:30px} #customerClear{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none; color:var(--text-3);cursor:pointer;font-size:15px;line-height:1;padding:4px} #customerClear:hover{color:var(--text)} #customerResults{position:absolute;z-index:30;top:calc(100% + 4px);left:0;min-width:300px;max-width:420px;max-height:340px;overflow:auto; gap:2px;padding:4px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-m);box-shadow:var(--shadow-lift)} #customerResults:empty{display:none} #customerResults .result{min-height:40px;padding:8px 12px;border:0;box-shadow:none;border-radius:var(--r-s)} #customerResults .result:hover{background:var(--bg-sunken);transform:none} #customerResults .result .nm{font-size:var(--fs-1)} #customerResults .result small{margin-left:auto;white-space:nowrap;padding-left:10px} .cust-row{display:inline-flex;gap:8px;align-items:center} .result--new{color:var(--accent);font-weight:600;border-top:1px solid var(--border)!important;border-radius:0!important} /* Customer card (shown once a customer is attached) */ .custcard{display:flex;flex-direction:column;gap:12px;padding:14px 16px; background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-l);box-shadow:var(--shadow-card)} .custcard__main{min-width:0} .custcard__name{display:flex;gap:8px;align-items:center;font-size:var(--fs-3);flex-wrap:wrap} .custcard__notes{margin-top:6px;padding:6px 10px;background:var(--bg-sunken);border-radius:var(--r-s);font-size:var(--fs-1);white-space:pre-wrap} .custcard__addr{min-width:0} .custcard--empty{display:block;font-size:var(--fs-1);text-align:center} .ccaddr-label{display:block;margin:0} .custcard__addr #ccAddrText{margin-top:4px;white-space:pre-wrap;font-size:var(--fs-1)} .custcard__actions{align-self:center} /* Product search: stock badge */ .result .stock{color:var(--text-3);white-space:nowrap;margin-left:auto;padding:0 12px} .result .stock.oos{color:var(--danger)} .result b{margin-left:0} /* Cart row inline inputs (line discount + note) */ .line-inputs{display:flex;gap:5px;margin-top:3px} .line-inputs .linedisc{width:5em} .line-inputs .linenote{width:8em} .line-inputs input{padding:2px 5px;font-size:12px} .cart-note{margin:10px 0 4px} .cart-note input{width:100%} /* Held sales list */ .held-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-m);margin-bottom:8px} .held-item__act{display:flex;gap:8px;align-items:center;flex-shrink:0} /* Customer dialog address rows */ .custdlg-h3{margin:16px 0 8px;font-size:var(--fs-2)} .cd-addr{display:grid;grid-template-columns:1fr 2fr auto auto;gap:8px;align-items:start;margin-bottom:8px} .cd-addr .cd-arm{align-self:center} .scan-wrap{position:relative;margin:14px 0 10px} #scan{font-size:1.05rem;padding:15px 14px 15px 42px;margin:0} .scan-wrap .icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-3)} .results{display:flex;flex-direction:column;gap:6px;margin-bottom:10px} .results:empty{display:none} .result{display:flex;align-items:center;gap:10px;min-height:54px;padding:12px 14px;border:1px solid var(--border); border-radius:var(--r-m);cursor:pointer;background:var(--bg-raised);box-shadow:var(--shadow-card); transition:border-color var(--t-fast),transform var(--t-fast)} .result:active{transform:scale(.99)} .result:hover{border-color:var(--border-strong)} .result .nm{flex:1;font-weight:500;font-size:var(--fs-2)} .result small{color:var(--text-3)} .result b{color:var(--text);font-size:1.05rem} /* [hidden] must win over explicit display rules (custcard flex/block, totals rows, etc.) */ [hidden]{display:none!important} /* Cart now lives in the left column under search */ .cart-panel{background:var(--bg-raised);border:1px solid var(--border); border-radius:var(--r-l);box-shadow:var(--shadow-card);overflow:hidden;display:flex;flex-direction:column} .cart-panel__head{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between} .cart-panel__head h2{margin:0} .cart-scroll{overflow-y:auto;max-height:calc(100vh - 240px)} /* Right rail: customer + quick order + checkout (sticky) */ .pos-rail{position:sticky;top:74px;display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 92px);overflow-y:auto} .checkout{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-l);box-shadow:var(--shadow-card);overflow:hidden} .checkout .totals{border-top:0} table.cart{border:0;border-radius:0;margin:0} table.cart thead{display:none} table.cart td{border-bottom:1px solid var(--border);vertical-align:middle;padding:12px 14px} table.cart tr:last-child td{border-bottom:0} .cart .nm{font-size:var(--fs-2)} .qty-step{display:inline-flex;align-items:center;border:1px solid var(--border-strong);border-radius:var(--r-s);overflow:hidden} .qty-step button{background:var(--field);color:var(--text);border:0;width:40px;height:40px;padding:0;border-radius:0;font-size:18px;text-transform:none} .qty-step button:hover{background:var(--field-hover);transform:none} .qty-step button:active{transform:scale(.9)} .qty-step input{width:52px;text-align:center;border:0;border-left:1px solid var(--border);border-right:1px solid var(--border);border-radius:0;padding:8px 2px} .cart .x{background:none;color:var(--text-3);border:0;padding:6px;font-size:16px} .cart .x:hover{color:var(--danger);background:transparent;transform:none} .cart-empty{padding:34px 16px;text-align:center;color:var(--text-3)} .totals{padding:14px 16px;border-top:1px solid var(--border)} .totals>div{display:flex;justify-content:space-between;align-items:center;padding:4px 0;color:var(--text-2);font-size:var(--fs-2)} .totals span{font-variant-numeric:tabular-nums} .totals .grand{font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--text); padding-top:10px;margin-top:6px;border-top:1px solid var(--border)} .totals .grand.tick{animation:tick var(--t-spring)} @keyframes tick{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}} .tenders{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px 16px;border-top:1px solid var(--border)} .tenders .btn{min-height:60px;font-size:var(--fs-1)} /* §8a touch targets */ .tenders .btn.cash{grid-column:1/-1} .tenders .ghost{grid-column:1/-1;min-height:46px} #tierbadge{margin-left:auto} .qp{margin-top:16px} .qp h2{display:flex;align-items:center;gap:6px} .qpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px} .qpbtn{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;text-transform:none;letter-spacing:0; font-family:var(--font-ui);background:var(--bg-raised);color:var(--text);border:1px solid var(--border-strong); min-height:62px;padding:10px 12px} .qpbtn:hover{border-color:var(--accent);background:var(--field-hover);transform:none} .qpbtn span{font-weight:600;font-size:13px;line-height:1.2} .qpbtn b{font-size:1.05rem;color:var(--text)} /* ============================================================ WORK-ORDER BOARD */ .board{display:grid;grid-template-columns:repeat(4,minmax(200px,1fr));gap:14px;align-items:start} .board .col{background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--r-l);padding:12px} .board .col h3{margin:2px 4px 10px;display:flex;justify-content:space-between;align-items:center} .wocard{display:block;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-m); padding:11px 12px;margin-bottom:8px;color:var(--text);box-shadow:var(--shadow-card);transition:border-color var(--t-fast),transform var(--t-fast)} .wocard:hover{text-decoration:none;border-color:var(--border-strong)} .wocard:active{transform:scale(.99)} .wocard strong{display:block;margin:3px 0} details.box>summary{cursor:pointer;font-family:var(--font-display);font-weight:600;letter-spacing:.04em;list-style:none} details.box>summary::-webkit-details-marker{display:none} details.box>summary::before{content:"▸";margin-right:8px;color:var(--text-3)} details.box[open]>summary::before{content:"▾"} /* ============================================================ RESPONSIVE */ @media(max-width:980px){ .pos-grid{grid-template-columns:1fr} .pos-rail{position:static;max-height:none;overflow:visible} .cart-scroll{max-height:none} .board{grid-template-columns:repeat(2,1fr)} } @media(max-width:860px){ .sidebar{transform:translateX(-100%)} body.nav-open .sidebar{transform:translateX(0);box-shadow:var(--shadow-pop)} .main{margin-left:0} .menu-toggle{display:inline-grid} thead th{top:0} .content{padding:16px 14px 40px} } @media(max-width:560px){.board{grid-template-columns:1fr}.tenders{grid-template-columns:1fr}} @media print{.sidebar,.topbar,.menu-toggle{display:none}.main{margin-left:0}.content{padding:0;max-width:none}} /* ============================================================ MOTION — "punched up" set */ /* click ripple (function feedback) */ .ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.28;transform:scale(0); animation:ripple var(--t-med) ease-out forwards;pointer-events:none} @keyframes ripple{to{transform:scale(1);opacity:0}} /* save-state: spinner swapped into a button on submit (+ spring check on POS) */ .spin{display:inline-block;width:15px;height:15px;border:2px solid currentColor;border-top-color:transparent; border-radius:50%;animation:spin .6s linear infinite;vertical-align:-2px} @keyframes spin{to{transform:rotate(360deg)}} button.is-loading,.btn.is-loading{pointer-events:none} .check{display:inline-block;animation:pop var(--t-spring)} @keyframes pop{0%{transform:scale(.2);opacity:0}60%{transform:scale(1.25)}100%{transform:scale(1);opacity:1}} /* card hover-lift / zoom (delight; touch has no hover so it's non-load-bearing) */ .stat,.wocard,.result{transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast)} @media(hover:hover){ .stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)} .result:hover{transform:translateY(-1px);box-shadow:var(--shadow-lift)} .wocard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)} } /* error shake (feedback on a failed action) */ .shake{animation:shake 420ms cubic-bezier(.36,.07,.19,.97)} @keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)} 30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}} /* staggered entrance — once at load, fenced behind .settled (gotcha §7.3) */ body:not(.settled) .content>*{opacity:0;animation:fadeup .5s cubic-bezier(.4,0,.2,1) forwards} body:not(.settled) .content>*:nth-child(1){animation-delay:.03s} body:not(.settled) .content>*:nth-child(2){animation-delay:.08s} body:not(.settled) .content>*:nth-child(3){animation-delay:.13s} body:not(.settled) .content>*:nth-child(4){animation-delay:.18s} body:not(.settled) .content>*:nth-child(5){animation-delay:.23s} body:not(.settled) .content>*:nth-child(n+6){animation-delay:.28s} @keyframes fadeup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} /* reduced-motion guard — wins regardless of order */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;animation-iteration-count:1!important} body:not(.settled) .content>*{opacity:1} }