/* ============================================================
   B2B Ordering Portal — shared stylesheet
   Loaded by both index.html (customer) and admin.html (admin).
   ============================================================ */

:root{
  --ground:#EFF2EC; --surface:#FFFFFF; --surface-2:#F7F9F4; --sunken:#E8ECE3;
  --ink:#16201A; --muted:#5B675F; --faint:#8B968D;
  --rule:#DCE2D7; --rule-soft:#E9EDE4;
  --accent:#14663F; --accent-2:#1B8452; --accent-wash:#E2EEE7; --accent-line:#A6CBB6;
  --amber:#9C6410; --amber-wash:#F7EEDD;
  --orange:#B5581B; --orange-wash:#FBEADC;
  --blue:#1B5674; --blue-wash:#E2EDF3;
  --red:#96311F; --red-wash:#F7E7E3;
  --shadow-1:0 1px 2px rgba(22,32,26,.06);
  --shadow-2:0 2px 10px rgba(22,32,26,.07);
  --f-d:"Newsreader",Georgia,serif;
  --f-b:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-m:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#111510; --surface:#1A201A; --surface-2:#161C16; --sunken:#0D110C;
  --ink:#E6EDE3; --muted:#98A497; --faint:#77836F;
  --rule:#2B342A; --rule-soft:#222A22;
  --accent:#5CBE8D; --accent-2:#6FCE9C; --accent-wash:#1A2A21; --accent-line:#2E4A3A;
  --amber:#D9973F; --amber-wash:#2A2116;
  --orange:#E8944F; --orange-wash:#2E1E12;
  --blue:#6BAAD0; --blue-wash:#152530;
  --red:#DC7A63; --red-wash:#2B1815;
  --shadow-1:0 1px 2px rgba(0,0,0,.35); --shadow-2:0 2px 10px rgba(0,0,0,.4);
}}
:root[data-theme="dark"]{
  --ground:#111510; --surface:#1A201A; --surface-2:#161C16; --sunken:#0D110C;
  --ink:#E6EDE3; --muted:#98A497; --faint:#77836F;
  --rule:#2B342A; --rule-soft:#222A22;
  --accent:#5CBE8D; --accent-2:#6FCE9C; --accent-wash:#1A2A21; --accent-line:#2E4A3A;
  --amber:#D9973F; --amber-wash:#2A2116;
  --orange:#E8944F; --orange-wash:#2E1E12;
  --blue:#6BAAD0; --blue-wash:#152530;
  --red:#DC7A63; --red-wash:#2B1815;
  --shadow-1:0 1px 2px rgba(0,0,0,.35); --shadow-2:0 2px 10px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--ground);color:var(--ink);font-family:var(--f-b);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---- phone shell ---- */
/* Exactly one screen tall, with .scr scrolling inside it — so the dock at the
   bottom stays where the thumb expects it. With min-height the shell grew with
   its content instead, and on a phone the dock sat below the fold: a customer
   halfway down 48 papers had to scroll to the end of the list to reach Cart.
   dvh as well as vh because a phone browser's address bar slides away as you
   scroll and vh does not follow it, which leaves the dock a bar's height off
   the bottom of the screen. */
.phone{max-width:440px;margin:0 auto;background:var(--surface);
  height:100vh;height:100dvh;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-2);position:relative}
@media(min-width:520px){.phone{margin:18px auto;min-height:0;height:calc(100vh - 36px);border-radius:16px;overflow:hidden;border:1px solid var(--rule)}}
.scr{flex:1;overflow-y:auto;padding-bottom:8px}
.appbar{display:flex;align-items:center;gap:11px;padding:14px 16px 12px;border-bottom:1px solid var(--rule-soft);position:sticky;top:0;background:var(--surface);z-index:20}
.appbar h1{font-family:var(--f-d);font-weight:600;font-size:19px;margin:0;letter-spacing:-.01em;flex:1;line-height:1.2}
.back{border:0;background:var(--surface-2);width:32px;height:32px;border-radius:9px;display:grid;place-content:center;flex:none;color:var(--muted)}
.back:hover{background:var(--accent-wash);color:var(--accent)}
.wordmark{font-family:var(--f-d);font-weight:600;font-size:19px;letter-spacing:-.01em;flex:1}
.wordmark span{color:var(--accent)}
.pad{padding:16px}

/* ---- bottom nav ---- */
/* The home indicator on a modern iPhone sits over the bottom of the screen;
   without this the last row of labels is under it. */
.nav{display:flex;border-top:1px solid var(--rule);background:var(--surface);flex:none;
  padding-bottom:env(safe-area-inset-bottom,0px)}
.nav button{flex:1;border:0;background:transparent;padding:9px 4px 11px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:500;color:var(--faint);position:relative}
.nav button[aria-current="page"]{color:var(--accent)}
.nav .dot{position:absolute;top:5px;right:calc(50% - 20px);min-width:16px;height:16px;border-radius:8px;background:var(--accent);color:var(--surface);font-family:var(--f-m);font-size:9.5px;font-weight:600;display:grid;place-content:center;padding:0 4px}
:root[data-theme="dark"] .nav .dot{color:#111510}

/* ---- category cards ---- */
.cats{display:flex;flex-direction:column;gap:11px}
.cat{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--rule);border-radius:13px;padding:13px;text-align:left;width:100%;box-shadow:var(--shadow-1)}
.cat:hover{border-color:var(--accent-line);background:var(--surface-2)}
.cat .art{width:72px;height:72px;border-radius:10px;background:var(--surface-2);flex:none;overflow:hidden}
.cat .art svg{display:block;width:100%;height:100%}
.cat .t{font-family:var(--f-d);font-size:20px;font-weight:600;line-height:1.15;margin-bottom:3px}
.cat .s{font-size:12.5px;color:var(--muted);line-height:1.35}
.cat .arw{margin-left:auto;color:var(--faint);flex:none}

/* ---- option grid ---- */
.step{margin-bottom:22px}
.steplbl{display:flex;align-items:baseline;gap:8px;margin-bottom:9px}
.steplbl .k{font-family:var(--f-m);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);font-weight:500}
.steplbl .c{font-family:var(--f-m);font-size:10px;color:var(--faint);margin-left:auto}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
/* 96px leaves about 45px for the label once the swatch and padding are taken,
   which is narrower than the word "Tirupati" — so real brand names were cut
   off mid-word where the sample catalogue's short ones never were. Steps with
   long labels get wider tiles; short ones keep three to a row. */
.opts.wide{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
.opt{border:1.5px solid var(--rule);background:var(--surface);border-radius:10px;padding:11px 9px;text-align:left;display:flex;align-items:center;gap:9px;min-height:52px;font-size:14px;font-weight:500;line-height:1.25}
.opt:hover{border-color:var(--accent-line);background:var(--surface-2)}
.opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-wash);color:var(--accent)}
/* A flex child will not shrink below its longest word unless it is told it
   may, so "Lamination Roll" ran past the edge of its tile and was cut off.
   Every brand name in the old sample catalogue was short enough to hide it. */
.opt>span{min-width:0;overflow-wrap:break-word;hyphens:auto}
.opt .sw{width:24px;height:24px;border-radius:6px;flex:none;display:grid;place-content:center;font-family:var(--f-m);font-size:10px;font-weight:600;color:#fff;overflow:hidden}
.opt .sw img{width:100%;height:100%;object-fit:cover;display:block}
.opt .dotc{width:20px;height:20px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.12)}
.fixed{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--rule-soft);border-radius:8px;padding:7px 11px;font-size:13.5px;color:var(--muted)}
.fixed b{color:var(--ink);font-weight:600}

/* ---- quantity ---- */
.qwrap{background:var(--surface-2);border:1px solid var(--rule);border-radius:13px;padding:15px;margin-bottom:16px}
.qhead{font-size:13px;color:var(--muted);margin-bottom:11px}
.qhead b{color:var(--ink)}
.stepper{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.stepper button{width:44px;height:44px;border-radius:11px;border:1.5px solid var(--rule);background:var(--surface);font-size:21px;font-weight:500;display:grid;place-content:center;line-height:1;color:var(--accent)}
.stepper button:hover:not(:disabled){border-color:var(--accent);background:var(--accent-wash)}
.stepper button:disabled{opacity:.35;cursor:not-allowed;color:var(--faint)}
.stepper .val{flex:1;text-align:center}
.stepper .val .n{font-family:var(--f-m);font-size:27px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.stepper .val .u{font-size:12px;color:var(--muted);display:block;margin-top:2px}
.presets{display:flex;gap:7px;flex-wrap:wrap}
.presets button{border:1px solid var(--rule);background:var(--surface);border-radius:20px;padding:6px 13px;font-family:var(--f-m);font-size:12.5px;font-weight:500;color:var(--muted)}
.presets button:hover{border-color:var(--accent);color:var(--accent)}
.hint{font-size:12px;color:var(--faint);margin-top:9px;display:flex;gap:6px;align-items:flex-start}

/* ---- buttons ---- */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;border-radius:11px;padding:14px;font-size:15px;font-weight:600;background:var(--accent);color:var(--surface);box-shadow:var(--shadow-1)}
:root[data-theme="dark"] .btn{color:#111510}
.btn:hover{background:var(--accent-2)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:var(--surface);color:var(--ink);border:1.5px solid var(--rule);box-shadow:none}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--surface)}
/* An armed destructive action: the second click of a two-click confirm. */
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn.danger:hover{background:var(--red);filter:brightness(1.08)}
.btn.wa{background:#1FA855;color:#fff}
.btn.wa:hover{background:#188F47}
.btn.sm{padding:9px 14px;font-size:13px;width:auto;border-radius:9px}
.sticky{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--rule-soft);padding:12px 16px;display:flex;flex-direction:column;gap:8px}

/* ---- forms ---- */
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:500;color:var(--muted);margin-bottom:5px}
.field input,.field textarea{width:100%;border:1.5px solid var(--rule);background:var(--surface);border-radius:10px;padding:11px 12px;font-size:15px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field textarea{resize:vertical;min-height:66px}
.field .err{font-size:12px;color:var(--red);margin-top:4px}
.field .hint{margin-top:5px}

/* ---- cart / list rows ---- */
.row{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--rule-soft)}
.row:last-child{border-bottom:0}
.row .thumb{width:50px;height:50px;border-radius:9px;background:var(--surface-2);flex:none;overflow:hidden}
.row .thumb svg{width:100%;height:100%;display:block}
.row .body{flex:1;min-width:0}
.row .nm{display:block;font-weight:600;font-size:14.5px;line-height:1.3}
.row .sp{display:block;font-family:var(--f-m);font-size:11.5px;color:var(--muted);margin-top:3px}
.row .qt{display:block;font-family:var(--f-m);font-size:12.5px;font-weight:600;color:var(--accent);margin-top:5px}
.row .x{border:0;background:transparent;color:var(--faint);align-self:flex-start;padding:2px 4px;font-size:16px;line-height:1}
.row .x:hover{color:var(--red)}

.card{background:var(--surface);border:1px solid var(--rule);border-radius:13px;padding:15px;margin-bottom:12px;box-shadow:var(--shadow-1)}
.card.flat{box-shadow:none;background:var(--surface-2)}
.card h3{margin:0 0 9px;font-size:13px;font-weight:600;letter-spacing:.01em}

.pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-m);font-size:10.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:20px;white-space:nowrap}
.pill.new{background:var(--amber-wash);color:var(--amber)}
.pill.quo{background:var(--blue-wash);color:var(--blue)}
.pill.con{background:var(--accent-wash);color:var(--accent)}
.pill.dis{background:var(--blue-wash);color:var(--blue)}
.pill.com{background:var(--accent-wash);color:var(--accent)}
.pill.can{background:var(--red-wash);color:var(--red)}
/* Money owed: its own colour, so it is not read as done (green) or new (amber). */
.pill.cre{background:var(--orange-wash);color:var(--orange)}
.pill.pen{background:var(--amber-wash);color:var(--amber)}
/* Paused reads as held, not wrong: its own orange, so it cannot be mistaken
   for the amber of Pending or the red of Blocked at a glance. */
.pill.pau{background:var(--orange-wash);color:var(--orange)}

.empty{text-align:center;padding:52px 22px;color:var(--faint)}
.empty .ic{margin-bottom:12px;opacity:.5}
.empty p{margin:0 0 16px;font-size:14px}

.banner{display:flex;gap:10px;background:var(--amber-wash);border:1px solid var(--amber);border-radius:11px;padding:12px 13px;margin-bottom:14px;font-size:13px;color:var(--ink);align-items:flex-start}
.banner .t{font-weight:600;display:block;margin-bottom:2px;color:var(--amber)}
.banner.ok{background:var(--accent-wash);border-color:var(--accent-line)}
.banner.ok .t{color:var(--accent)}

.success{text-align:center;padding:36px 20px}
.success .ring{width:66px;height:66px;border-radius:50%;background:var(--accent-wash);display:grid;place-content:center;margin:0 auto 18px;color:var(--accent)}
.success h2{font-family:var(--f-d);font-size:26px;font-weight:600;margin:0 0 6px}
.success .no{font-family:var(--f-m);font-size:15px;font-weight:600;color:var(--accent);margin-bottom:12px}
.success p{color:var(--muted);font-size:14px;margin:0 auto 22px;max-width:30ch;line-height:1.55}

/* ---- admin ---- */
.admin{max-width:1180px;margin:0 auto;padding:22px 20px 60px}
.admin-h{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.admin-h h1{font-family:var(--f-d);font-size:28px;font-weight:600;margin:0;letter-spacing:-.015em}
.admin-h .sub{font-size:13px;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:11px;margin-bottom:22px}
/* Tiles are buttons now: they lead to the orders they are counting. */
.stat{background:var(--surface);border:1px solid var(--rule);border-radius:11px;padding:13px 15px;
  font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%;display:block}
.stat:hover{border-color:var(--accent)}
.stat.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.stat:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.stat .k{font-family:var(--f-m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.stat .v{font-family:var(--f-m);font-size:25px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.stat.hot .v{color:var(--amber)}
.tabs{display:flex;gap:3px;border-bottom:1px solid var(--rule);margin-bottom:16px;overflow-x:auto}
.tabs button{border:0;background:transparent;padding:9px 14px;font-size:13.5px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.oc{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:15px;margin-bottom:11px}
/* The header folds the card. A button, so it can be tapped and announced as
   one; the card's own padding sits on the .oc around it. */
.oc-h{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:10px;
  width:100%;border:0;background:none;padding:0;font:inherit;color:inherit;text-align:left}
.oc-h:hover .cx{color:var(--accent)}
.oc-sum{font-size:13px;color:var(--muted);font-family:var(--f-m)}
.oc-h .no{font-family:var(--f-m);font-size:14px;font-weight:600}
.oc-h .dt{font-family:var(--f-m);font-size:11.5px;color:var(--faint)}
.oc-h .sp{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap}
.oc-who{font-size:13.5px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--rule-soft)}
.oc-who b{font-weight:600}
.oc-who .m{font-family:var(--f-m);font-size:12px;color:var(--muted);display:block;margin-top:2px}
.oc-items{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.oc-item{display:flex;gap:10px;font-size:13px;align-items:baseline}
.oc-item .n{flex:1}
/* A product with nothing more to say than its name leaves this element empty,
   and an empty block still takes a line's height — a gap under one product and
   not the others reads as something that failed to load. */
.oc-item .n em:empty, .pr-n em:empty, .dl-item em:empty, .sp:empty{display:none}
.oc-item .n em{font-style:normal;font-family:var(--f-m);font-size:11.5px;color:var(--muted);display:block}
.oc-item .q{font-family:var(--f-m);font-size:12.5px;font-weight:600;color:var(--accent);white-space:nowrap}
.oc-acts{display:flex;gap:7px;flex-wrap:wrap;align-items:center;padding-top:11px;border-top:1px solid var(--rule-soft)}
.oc-acts select{border:1px solid var(--rule);background:var(--surface);border-radius:8px;padding:8px 10px;font-size:13px}
.addr{font-size:12.5px;color:var(--muted);background:var(--surface-2);border-radius:8px;padding:9px 11px;margin-bottom:11px;line-height:1.45}
.ctable{width:100%;border-collapse:collapse;font-size:13.5px}
.ctable th{font-family:var(--f-m);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);text-align:left;font-weight:500;padding:8px 12px 8px 0;border-bottom:1px solid var(--rule)}
.ctable td{padding:11px 12px 11px 0;border-bottom:1px solid var(--rule-soft);vertical-align:top}
.ctable td.mono{font-family:var(--f-m);font-size:12.5px;color:var(--muted)}
/* Editing a product where it is listed. */
.ctable td.nowrap{white-space:nowrap}
.ctable .pnum{width:52px;font:inherit;font-family:var(--f-m);font-size:12.5px;padding:3px 5px;
  border:1.5px solid var(--rule);border-radius:6px;background:var(--surface);color:var(--ink);
  text-align:right}
.ctable .pnum:focus{outline:none;border-color:var(--accent)}
.ctable .unit{color:var(--faint)}
.ctable .sale{display:flex;align-items:center;gap:7px;font-size:12.5px;cursor:pointer;
  white-space:nowrap}
.ctable .sale input{accent-color:var(--accent);cursor:pointer;margin:0}
/* A withdrawn product stays listed, visibly set aside rather than gone. */
.ctable tr.off{opacity:.5}
/* A customer's details, opened by tapping the row. The table stays as short as
   it was — on a phone the alternative was eight columns and sideways scrolling. */
.cshop{border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;text-align:left;
  display:flex;gap:8px;align-items:baseline;width:100%}
.cshop:hover .cx{color:var(--accent)}
/* Big enough to read as "tap me": at 10px and --faint it was a speck. */
.cx{font-size:13px;line-height:1.15;color:var(--muted);flex:none}
.ctable tr.copen td{border-bottom:0}
.ctable tr.cdet td{padding-top:0}
.cdet-box{background:var(--surface-2);border:1px solid var(--rule);border-radius:10px;padding:11px 12px}
.cdet-a{font-size:13.5px;line-height:1.45;margin-bottom:5px}
.cdet-l{font-size:12.5px;color:var(--muted);line-height:1.6}
.cdet-m{font-family:var(--f-m);font-size:12.5px;color:var(--muted);margin-bottom:5px}
/* On a phone the number costs more than it gives: it pushed "Sunita Book
   Depot" onto three lines. It is in the panel the row opens instead. */
@media (max-width:560px){
  .ctable th.wa-col, .ctable td.wa-col{display:none}
}
.ctable tr.off .sale span{color:var(--muted)}
/* The order count in the customers table is a way in to those orders. */
/* Lines the shop took off an order: kept visible, clearly not part of it. */
/* Remove the line, or keep some of it — asked in place, on the line itself. */
.oc-item.choosing{display:block;background:var(--surface-2);border:1px solid var(--rule);border-radius:10px;padding:11px 12px;margin:6px 0}
.ch-q{font-size:13.5px;font-weight:600;margin-bottom:9px}
.ch-r{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:7px}
.ch-r select,.ch-r input[type=number]{font:inherit;font-size:13px;padding:6px 8px;border:1.5px solid var(--rule);border-radius:8px;background:var(--surface);color:var(--ink)}
.ch-r input[type=number]{width:78px;font-family:var(--f-m)}
.ch-note{font-size:12.5px;color:var(--muted)}
/* A password being read out loud: big, spaced, unmistakable. */
.pw{font-family:var(--f-m);font-size:21px;letter-spacing:.06em;background:var(--sunken);
  border:1px solid var(--rule);border-radius:9px;padding:12px 14px;text-align:center;
  user-select:all;word-break:break-all}
/* Correcting the address and note, and adding a product, on the order card. */
.addr{position:relative}
.ed-b{position:absolute;top:8px;right:9px;font:inherit;font-family:var(--f-m);font-size:11px;color:var(--accent);background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:2px 7px;cursor:pointer}
.ed-b:hover{border-color:var(--accent)}
.addr.editing{padding:11px 12px}
.ed-l{display:block;font-family:var(--f-m);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin:2px 0 5px}
.addr.editing textarea,.addp textarea{width:100%;box-sizing:border-box;font:inherit;font-size:13px;padding:8px 9px;border:1.5px solid var(--rule);border-radius:8px;background:var(--surface);color:var(--ink);margin-bottom:9px;resize:vertical}
.addp{margin-top:10px;padding:11px 12px;background:var(--surface-2);border:1px solid var(--rule);border-radius:10px}
.addp select{font:inherit;font-size:13px;padding:7px 8px;border:1.5px solid var(--rule);border-radius:8px;background:var(--surface);color:var(--ink);max-width:100%;flex:1;min-width:0}
.addp .ap-q{font:inherit;font-size:13px;padding:7px 9px;border:1.5px solid var(--rule);border-radius:8px;background:var(--surface);color:var(--ink);flex:1;min-width:0}
.addp .ap-q:focus{outline:none;border-color:var(--accent)}
/* The browser draws its own ✕ in a search field; one clear affordance is enough. */
.addp .ap-q::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.addp select[size]{padding:4px}
.addp select[size] option{padding:3px 5px}
.addp input[type=number]{font:inherit;font-family:var(--f-m);font-size:13px;width:78px;padding:6px 8px;border:1.5px solid var(--rule);border-radius:8px;background:var(--surface);color:var(--ink)}
/* An item added by name: text boxes that look like the search above them, and
   a unit menu that stays its own size rather than taking the row. */
.addp .oo-in{font:inherit;font-size:13px;padding:7px 9px;border:1.5px solid var(--rule);border-radius:8px;background:var(--surface);color:var(--ink);flex:1;min-width:0}
.addp .oo-in:focus{outline:none;border-color:var(--accent)}
.addp select[data-oo]{flex:none}
.oo-note{margin:0 0 4px;line-height:1.45}
.ap-alt{margin-top:10px;padding-top:9px;border-top:1px solid var(--rule-soft)}
/* What the customer asked for, next to what they will get. */
.oc-item .q .was{display:block;font-style:normal;font-size:11px;color:var(--faint);text-decoration:line-through;font-weight:400}
.oc-gone{margin-top:10px;padding-top:9px;border-top:1px dashed var(--rule)}
.oc-gone-h{font-family:var(--f-m);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.oc-gone-h span{display:block;text-transform:none;letter-spacing:0;font-size:11.5px;margin-top:2px}
.oc-item.gone{opacity:.55}
.oc-item.gone .n,.oc-item.gone .q{text-decoration:line-through}
.olink{font:inherit;font-family:var(--f-m);font-size:12.5px;color:var(--accent);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.olink:hover{color:var(--ink)}
.olink:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
/* Says which customer the order list has been narrowed to, and how to undo it. */
/* Status chips above the order list. */
/* Catalogue search on the customer portal. */
.srch{position:relative;margin-bottom:16px}
.srch input{width:100%;box-sizing:border-box;font:inherit;font-size:15px;padding:11px 38px 11px 13px;
  border:1.5px solid var(--rule);border-radius:11px;background:var(--surface);color:var(--ink);
  -webkit-appearance:none}
.srch input:focus{outline:none;border-color:var(--accent)}
/* type="search" earns the search key on a phone keyboard, but WebKit also
   draws its own ✕ inside the field — which landed on top of ours, so the box
   showed two. Ours stays: it is styled to match and Firefox draws none. */
.srch input::-webkit-search-cancel-button,
.srch input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.srch-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;
  border:0;background:none;color:var(--faint);font-size:14px;cursor:pointer;border-radius:50%}
.srch-x:hover{color:var(--ink);background:var(--sunken)}
.srl{display:flex;flex-direction:column;gap:8px}
.sr{display:flex;gap:12px;align-items:center;width:100%;text-align:left;font:inherit;cursor:pointer;
  background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:10px 12px}
.sr:hover{border-color:var(--accent)}
.sr .art{width:44px;height:44px;flex:none;border-radius:8px;overflow:hidden;display:flex;
  align-items:center;justify-content:center;background:var(--sunken)}
.sr .art img,.sr .art svg{width:100%;height:100%;object-fit:cover}
.sr .body{display:flex;flex-direction:column;gap:2px;min-width:0}
.sr .nm{font-size:14px;font-weight:600;color:var(--ink)}
.sr .sp{font-family:var(--f-m);font-size:12px;color:var(--muted)}
.sr:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Pricing an order (admin) — a rate per line, with what it comes to. */
.price{margin-top:10px;padding:12px 13px;background:var(--surface-2);
  border:1px solid var(--rule);border-radius:10px}
.pr-h{font-family:var(--f-m);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin-bottom:8px}
.pr-row{display:flex;align-items:center;gap:10px;padding:5px 0}
.pr-n{flex:1;min-width:0;font-size:13.5px}
.pr-n em{display:block;font-style:normal;font-family:var(--f-m);font-size:11.5px;color:var(--faint)}
.pr-in{display:flex;align-items:center;gap:4px;flex:none}
.pr-in .cur{font-family:var(--f-m);font-size:12px;color:var(--faint)}
.pr-in input{width:88px;font:inherit;font-family:var(--f-m);font-size:13px;padding:5px 7px;
  border:1.5px solid var(--rule);border-radius:7px;background:var(--surface);color:var(--ink);
  text-align:right}
.pr-in input:focus{outline:none;border-color:var(--accent)}
/* A floor rather than a fixed width. 92px holds ₹99,999.99 and stops there,
   and a wholesale line runs into lakhs — ₹12,38,563.50 was cut off mid-number,
   which is the one figure on this panel that must never be half-read. Being
   the last item in the row, the right edges still line up as it grows. */
.pr-a{flex:none;min-width:92px;text-align:right;font-family:var(--f-m);font-size:13px;
  font-variant-numeric:tabular-nums;color:var(--muted)}
/* Where a rate came from. A remembered figure must never look like one the
   shop typed for this order — the border is the whole difference. */
.pr-hint{display:block;font-style:normal;font-family:var(--f-m);font-size:11px;
  color:var(--faint);margin-top:2px;line-height:1.45}
.pr-hint.pr-old{color:var(--amber)}
.pr-use{border:0;background:none;padding:0;font:inherit;color:var(--accent);
  text-decoration:underline;cursor:pointer}
.pr-in.pr-mem input{border-style:dashed;border-color:var(--accent-line);
  background:var(--accent-wash)}
.pr-in.pr-mem input:focus{border-style:solid;border-color:var(--accent);
  background:var(--surface)}
/* On a narrow screen the rate box and the amount are fixed widths, so the
   product name — the one thing you read to know what you are pricing — was
   squeezed to less than either of them, and its quantity line ("10 Packets")
   was cut off outright. Below this width the line gets the full row and the
   figures move underneath it. */
@media (max-width:430px){
  .pr-row{flex-wrap:wrap;row-gap:4px}
  .pr-n{flex:1 0 100%}
  .pr-in{margin-left:auto}
  .pr-total .pr-n{flex:1 1 auto}
}
/* The delivery link, once minted: shown so it can be tapped, read and copied. */
.dlink{margin-top:11px;padding:12px 13px;background:var(--accent-wash);
  border:1px solid var(--accent-line);border-radius:10px}
.dlink h4{margin:0 0 3px;font-size:13.5px;font-weight:600}
.dlink p{margin:0 0 9px;font-size:12.5px;color:var(--muted);line-height:1.45}
.dlink-url{font-size:11.5px;color:var(--muted);background:var(--surface);
  border:1px solid var(--rule);border-radius:7px;padding:7px 9px;margin-bottom:10px;
  overflow-wrap:anywhere;line-height:1.4}
.pr-total{border-top:1px solid var(--rule);margin-top:5px;padding-top:9px}
.pr-total .pr-n{font-weight:600}
.pr-total .pr-a{color:var(--ink);font-weight:600;font-size:14.5px}

/* The quotation as the customer sees it. */
.quote{margin-top:14px}
.qr{display:flex;align-items:baseline;gap:12px;padding:6px 0}
.qn{flex:1;min-width:0;font-size:13.5px}
.qn em{display:block;font-style:normal;font-family:var(--f-m);font-size:11.5px;color:var(--faint)}
.qa{flex:none;font-family:var(--f-m);font-size:13.5px;font-variant-numeric:tabular-nums}
.qtot{border-top:1px solid var(--rule);margin-top:5px;padding-top:10px}
.qtot .qn{font-weight:600}
.qtot .qa{font-weight:600;font-size:16px;color:var(--accent)}
.qnote{font-size:11.5px;color:var(--faint);line-height:1.5;margin:10px 0 0}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chip{font:inherit;font-size:12.5px;padding:5px 11px;border-radius:999px;cursor:pointer;
  background:var(--surface);color:var(--muted);border:1px solid var(--rule)}
.chip:hover{border-color:var(--accent);color:var(--ink)}
.chip.on{background:var(--accent-wash);border-color:var(--accent-line);color:var(--accent);font-weight:600}
.chip .n{font-family:var(--f-m);font-size:11px;opacity:.75;margin-left:3px}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* New orders that landed while the page was open. Green rather than amber:
   this is business arriving, not something going wrong. */
.freshbar{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:9px 12px;
  background:var(--accent-wash);border:1px solid var(--accent-line);border-radius:10px;
  font-size:13.5px;line-height:1.4}
.freshbar b{color:var(--accent)}
.freshbar .btn{margin-left:auto;flex:none}
.filterbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--accent-wash);border:1px solid var(--accent-line);border-radius:11px;padding:10px 13px;margin-bottom:14px;font-size:13.5px}
.scroll-x{overflow-x:auto}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* product photographs (decision 3) sit where the drawn artwork did */
.cat .art img, .row .thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* switch between the customer portal and the admin dashboard */
.switch{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  border:1px solid var(--rule);background:var(--surface-2);border-radius:8px;
  padding:5px 10px;font-size:12px;font-weight:500;color:var(--muted);
  text-decoration:none;line-height:1;
}
.switch:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-wash)}
.switch svg{width:14px;height:14px}

/* --- removing a line from an order (admin) ------------------------------- */
.oc-x{
  border:1px solid var(--rule);background:var(--surface);color:var(--muted);
  width:22px;height:22px;border-radius:6px;line-height:1;cursor:pointer;
  font-size:12px;flex:none;align-self:center;
}
.oc-x:hover:not(:disabled){border-color:var(--red,#c0392b);color:var(--red,#c0392b)}
.oc-x:disabled{opacity:.3;cursor:not-allowed}
.banner.sm{font-size:12.5px;padding:9px 11px;margin:0 0 10px}

/* --- toast: "added to cart", without leaving the catalogue --------------- */
.toast{
  position:fixed;left:50%;bottom:78px;transform:translateX(-50%);
  z-index:60;display:flex;align-items:center;gap:12px;
  background:var(--ink);color:var(--surface);border-radius:11px;
  padding:11px 13px;font-size:13px;font-weight:500;
  box-shadow:0 8px 26px rgba(0,0,0,.24);max-width:min(420px,calc(100vw - 32px));
  animation:toast-in .18s ease-out;
}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.toast .tw{flex:1;line-height:1.35}
.toast button{
  border:1px solid color-mix(in srgb, currentColor 34%, transparent);
  background:none;color:var(--surface);
  border-radius:7px;padding:6px 10px;font-size:12.5px;font-weight:600;
  cursor:pointer;white-space:nowrap;font-family:inherit;
}
.toast button:hover{background:color-mix(in srgb, currentColor 16%, transparent)}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}

/* --- printing one order (admin) ------------------------------------------ */
#printsheet{display:none}

@media print{
  /* Only the order reaches the paper — no dashboard, no navigation. */
  body>*{display:none!important}
  body{background:#fff}
  #printsheet{
    display:block!important;position:static;
    font-family:var(--f-b,system-ui);color:#000;padding:0;
  }
  #printsheet .ps-h{
    display:flex;justify-content:space-between;align-items:baseline;
    border-bottom:2px solid #000;padding-bottom:8px;margin-bottom:14px;
  }
  #printsheet .ps-biz{font-size:19px;font-weight:700}
  #printsheet .ps-no{font-family:var(--f-m,monospace);font-size:15px;font-weight:600}
  #printsheet .ps-meta{
    display:grid;grid-template-columns:repeat(3,1fr);gap:8px 18px;margin-bottom:12px;font-size:12px;
  }
  #printsheet .ps-meta span,#printsheet .ps-addr span,#printsheet .ps-note span{
    display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:#555;
  }
  #printsheet .ps-addr,#printsheet .ps-note{
    font-size:12px;margin-bottom:12px;padding:8px 10px;border:1px solid #bbb;border-radius:4px;
  }
  #printsheet .ps-t{width:100%;border-collapse:collapse;margin-bottom:10px;font-size:12px}
  #printsheet .ps-t th{
    text-align:left;border-bottom:1.5px solid #000;padding:6px 4px;
    font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;
  }
  #printsheet .ps-t td{border-bottom:1px solid #ddd;padding:7px 4px;vertical-align:top}
  #printsheet .ps-t .sp{font-size:10.5px;color:#555}
  #printsheet .ps-t .q{white-space:nowrap;font-weight:600;text-align:right}
  #printsheet .ps-t .mono{font-family:var(--f-m,monospace);font-size:11px}
  #printsheet .ps-n{font-size:10.5px;color:#555;margin-bottom:26px}
  #printsheet .ps-sig{display:flex;gap:40px;margin-top:32px}
  #printsheet .ps-sig div{
    flex:1;border-top:1px solid #000;padding-top:5px;font-size:10px;color:#555;
  }
  @page{margin:14mm}
}

/* --- the delivery portal ------------------------------------------------- */
/* Read on a pavement, one-handed: the address and the amount to collect are
   the two things sized to be found without looking for them. */
.dl{max-width:520px;margin:0 auto;padding:18px 16px 40px}
.dl-wait{color:var(--muted);text-align:center;padding:40px 0}
.dl-h{display:flex;align-items:baseline;gap:10px;margin-bottom:18px}
.dl-h .no{font-family:var(--f-m);font-size:13px;font-weight:600}
.dl-h .biz{font-family:var(--f-m);font-size:11px;color:var(--faint);margin-left:auto}
.dl h1{font-family:var(--f-d);font-size:30px;font-weight:600;margin:0 0 2px;line-height:1.15}
.dl-who{color:var(--muted);margin:0 0 16px;font-size:14.5px}
.dl-addr{display:block;background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  padding:14px 15px;font-size:16px;line-height:1.45;color:var(--ink);text-decoration:none;
  margin-bottom:12px}
.dl-addr span{display:block;margin-top:7px;font-family:var(--f-m);font-size:11.5px;color:var(--accent)}
.dl-collect{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--accent-wash);border:1px solid var(--accent-line);border-radius:12px;
  padding:14px 16px;margin-bottom:16px}
.dl-collect span{font-family:var(--f-m);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent)}
.dl-collect b{font-family:var(--f-m);font-size:26px;font-weight:600;color:var(--accent);
  font-variant-numeric:tabular-nums}
.dl-collect.none{background:var(--amber-wash);border-color:var(--amber)}
.dl-collect.none span{color:var(--amber)}
.dl-collect.none b{font-size:14px;color:var(--amber)}
.dl-items{background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  padding:12px 15px;margin-bottom:12px}
.dl-items h2{font-family:var(--f-m);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin:0 0 8px;font-weight:500}
.dl-item{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:14px}
.dl-item em{display:block;font-style:normal;font-family:var(--f-m);font-size:11.5px;color:var(--faint)}
.dl-item b{font-family:var(--f-m);font-size:13.5px;white-space:nowrap}
.dl-note{background:var(--amber-wash);border:1px solid var(--amber);border-radius:12px;
  padding:12px 15px;font-size:14px;margin-bottom:16px}
.dl-note span{display:block;font-family:var(--f-m);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--amber);margin-bottom:4px}
.dl-acts{display:flex;flex-direction:column;gap:10px}
.dl-acts .btn{width:100%;padding:14px;font-size:15.5px}
.dl-nowa{font-size:13px;line-height:1.5;color:var(--amber);background:var(--amber-wash);border-radius:9px;padding:10px 12px;margin:0}
.dl-foot{font-size:11.5px;color:var(--faint);text-align:center;margin:18px 0 0;line-height:1.5}
.dl-done{text-align:center;padding:40px 0}
.dl-done .ring{width:64px;height:64px;border-radius:50%;background:var(--accent-wash);
  color:var(--accent);font-size:30px;display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px}
.dl-done h1{font-size:26px}
.dl-done p{color:var(--muted);margin:0 0 16px}
.dl-cash{font-family:var(--f-m);color:var(--ink)!important}