/* ============================================================
   AMANANOBLE ORDER APP

   Design rule that governs everything here:
   COLOUR MEANS STATUS. Nothing else is coloured. Chrome, cards,
   type and structure are ink and paper. The only saturated
   colour on screen tells you where an order is in the process,
   so a glance at a list reads as a glance at the pipeline.

   Type is the system stack on purpose. The team works on cheap
   Android phones on mobile data, and product names appear in
   Tamil. A downloaded display face would cost a second of
   loading and would not carry Tamil well. Personality comes
   from weight, spacing and tabular numerals instead.

   The row rail and the docket-style order number are borrowed
   from the courier waybills this business handles all day.
   ============================================================ */

:root{
  /* ink and paper */
  --ink:#141820;
  --ink-2:#3d4552;
  --muted:#6f7787;
  --line:#e2e5ec;
  --line-2:#eef0f5;
  --paper:#f6f7f9;
  --card:#ffffff;

  /* chrome */
  --chrome:#12233f;
  --chrome-2:#1b3358;
  --chrome-ink:#a9bad4;

  /* status colours, the only meaningful colour in the app */
  --s-grey:#6a6f7a;   --s-grey-bg:#eef0f3;
  --s-amber:#8a5206;  --s-amber-bg:#fdefd9;
  --s-blue:#12558f;   --s-blue-bg:#e3f0fb;
  --s-teal:#0c6350;   --s-teal-bg:#dcf2ec;
  --s-green:#3a6410;  --s-green-bg:#e9f3dc;
  --s-red:#9c2b2b;    --s-red-bg:#fbe9e9;

  /* the one accent, and its two tints; the desk uses nothing else for
     "this is chosen" and "this is being typed into" */
  --accent:#12233f;
  --accent-bg:#eef4fc;
  --accent-bg-2:#e3edfa;

  --r:10px;
  --tap:48px;
  --side:236px;
  --panel-w:420px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

/* The hidden attribute has to beat anything below that sets a
   display. A rule here like .panel{display:flex} outranks the
   browser's own [hidden]{display:none} whatever its specificity,
   because an author rule always beats the browser's, and the
   panel would then sit on the page permanently. */
[hidden]{display:none !important;}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",
              "Noto Sans Tamil",Arial,sans-serif;
  font-size:16px;line-height:1.5;color:var(--ink);background:var(--paper);
  -webkit-text-size-adjust:100%;
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}

/* ============================================================
   SHELL
   ============================================================ */

.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--side);z-index:60;
  background:var(--chrome);color:#fff;display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .22s ease;
  padding-top:env(safe-area-inset-top);
}
body.drawer-open .sidebar{transform:translateX(0);}

.sidebar-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 18px 14px;
}
.logo{
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.drawer-close{
  background:none;border:none;color:var(--chrome-ink);font-size:26px;
  line-height:1;cursor:pointer;padding:0 4px;
}

.sidenav{flex:1;overflow-y:auto;padding:4px 10px;}
.sidebar-foot{padding:10px;border-top:1px solid rgba(255,255,255,.09);}

/* Three weights of attention: the page you are on is lit, the pages
   that work are plain, and the ones not built yet recede so they
   cannot be mistaken for something to press. */
.sidenav-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;margin-bottom:2px;border-radius:8px;
  color:var(--chrome-ink);text-decoration:none;font-size:14px;font-weight:400;
  min-height:44px;
}
.sidenav-item .ico{width:20px;text-align:center;font-size:15px;opacity:.85;}
.sidenav-item .txt{flex:1;}
.sidenav-item.on{background:rgba(255,255,255,.16);color:#fff;font-weight:500;}
.sidenav-item.on .ico{opacity:1;}
.sidenav-item.soon{color:rgba(169,186,212,.5);font-size:13px;}
.sidenav-item.soon .ico{opacity:.45;}
.sidenav-item .tag{
  font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,255,255,.07);color:rgba(169,186,212,.6);
  padding:2px 5px;border-radius:4px;
}
.sidenav-label{
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(169,186,212,.55);padding:12px 12px 4px;
}

.drawer-veil{
  position:fixed;inset:0;background:rgba(10,16,28,.5);z-index:55;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
body.drawer-open .drawer-veil{opacity:1;pointer-events:auto;}

.main{min-height:100vh;display:flex;flex-direction:column;}

.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:10px;
  background:var(--chrome);color:#fff;padding:11px 14px;
  padding-top:calc(11px + env(safe-area-inset-top));
}
.menu-btn{
  background:none;border:none;color:#fff;font-size:20px;line-height:1;
  padding:6px 4px;cursor:pointer;
}
.topbar-title{flex:1;font-size:16px;font-weight:600;}
/* the back arrow on every page, left of the title, like any app */
.back-btn{background:none;border:0;color:inherit;font-size:22px;line-height:1;width:40px;height:40px;min-height:40px;margin:-6px 4px -6px -6px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;flex:none;}
.back-btn:hover,.back-btn:focus-visible{background:rgba(255,255,255,.12);}
.back-btn[hidden]{display:none;}
/* the coloured counts in the left menu: colour is how urgent, the symbol says the same for anyone who cannot tell colours apart */
.navb{display:inline-flex;align-items:center;gap:2px;margin-left:auto;padding:1px 7px;border-radius:10px;font-size:11.5px;font-weight:600;line-height:18px;white-space:nowrap;color:#fff;flex:none}
.navb-red{background:#dc2626}
.navb-amber{background:#d97706}
.navb-blue{background:#2563eb}
.navb-green{background:#16a34a}
.sidenav .sidenav-sub{display:flex;align-items:center;gap:6px;padding-right:10px}
.sidenav-sub > span:first-child{flex:1;min-width:0}
/* a section's own badge shows while its pages are folded away; open, each page carries its own */
.sidenav-item:has(+ .sidenav-subs:not([hidden])) .navb-sec{display:none}
body.side-icons .sidenav-item .navb{position:absolute;top:2px;right:2px;padding:0 4px;font-size:10px;line-height:15px}
body.side-icons .sidenav-item{position:relative}
/* on the phone's bottom bar: the count only, on the icon's corner */
.tabbar .navb-tab{position:absolute;top:-8px;left:calc(50% + 3px);margin:0;padding:0 5px;min-width:20px;height:20px;line-height:20px;font-size:13px;justify-content:center;border:2px solid #fff}
/* on the Production page's own tab chips */
.chip .navb{margin-left:6px;padding:0 6px;line-height:17px;font-size:11px}
/* the top bar's Back is the one back button: the settings screens' own arrow beside the title steps aside */
body:has(#appBack:not([hidden])) .settings-back{display:none;}
.who{text-decoration:none;}
.avatar{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:var(--chrome-2);color:#fff;font-size:14px;font-weight:600;
}
.avatar.big{width:46px;height:46px;font-size:19px;flex:none;}

.wrap{flex:1;padding:14px 14px 96px;max-width:1180px;width:100%;}

.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;background:#fff;border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar a{
  flex:1;text-align:center;padding:6px 2px 8px;min-height:var(--tap);
  font-size:13px;color:var(--muted);text-decoration:none;
}
.tabbar a .ico{display:block;font-size:17px;line-height:1.35;}
.tabbar a.on{color:var(--chrome);font-weight:700;}

/* desktop: sidebar stays, bottom bar goes */
@media (min-width:900px){
  .sidebar{transform:translateX(0);}
  .main{margin-left:var(--side);}
  .menu-btn,.drawer-close,.tabbar,.drawer-veil{display:none;}
  .wrap{padding:20px 24px 40px;}
  .topbar{padding:13px 24px;}
}

/* ============================================================
   PAGE FURNITURE
   ============================================================ */

.page-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin:6px 2px 14px;
}
.page-title{font-size:21px;font-weight:700;margin:0;letter-spacing:-.01em;}

.section-title{
  font-size:11.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.09em;
  margin:22px 2px 8px;
}

.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:15px;margin-bottom:12px;
}

.empty{
  text-align:center;color:var(--muted);padding:30px 16px;
  background:#fff;border:1px dashed var(--line);border-radius:var(--r);
}

.muted{color:var(--muted);}
.small{font-size:13px;}
.centered{text-align:center;}
.nowrap{white-space:nowrap;}
.spacer{height:10px;}
.link-muted{color:var(--muted);}

/* ============================================================
   VIEW SWITCHER AND SEARCH
   ============================================================ */

.viewbar{
  display:flex;gap:2px;background:#e9ecf1;padding:3px;
  border-radius:9px;margin-bottom:12px;
}
.viewbar a{
  flex:1;text-align:center;padding:9px 6px;border-radius:7px;
  font-size:13.5px;font-weight:600;color:var(--ink-2);text-decoration:none;
}
.viewbar a.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(20,24,32,.10);}

.searchbar{position:relative;margin-bottom:12px;}
.searchbar input{
  width:100%;font-size:16px;padding:12px 38px 12px 14px;min-height:var(--tap);
  border:1px solid var(--line);border-radius:var(--r);background:#fff;
  font-family:inherit;-webkit-appearance:none;appearance:none;
}
.searchbar .clear{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--muted);text-decoration:none;font-size:20px;
}

.filterbar{
  display:flex;gap:7px;overflow-x:auto;padding:2px 0 12px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.filterbar::-webkit-scrollbar{display:none;}
.filterbar a{
  flex:none;font-size:13px;font-weight:600;text-decoration:none;
  padding:8px 14px;border-radius:999px;
  background:#fff;border:1px solid var(--line);color:var(--ink-2);
}
.filterbar a.on{background:var(--chrome);border-color:var(--chrome);color:#fff;}

/* ============================================================
   ORDER ROW  (the waybill rail is the signature element)
   ============================================================ */

.olist{display:flex;flex-direction:column;gap:8px;}

.orow{
  display:block;background:#fff;border:1px solid var(--line);
  border-left:5px solid var(--s-grey);
  border-radius:var(--r);padding:12px 14px;
  text-decoration:none;color:inherit;
}
.orow:active{background:#fcfcfd;}
.orow.tone-blue{border-left-color:var(--s-blue);}
.orow.tone-teal{border-left-color:var(--s-teal);}
.orow.tone-green{border-left-color:var(--s-green);}
.orow.tone-amber{border-left-color:var(--s-amber);}
.orow.tone-red{border-left-color:var(--s-red);}
.orow.tone-grey{border-left-color:var(--s-grey);}

.orow-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;}
.orow-name{font-weight:650;font-size:16px;letter-spacing:-.005em;}
.orow-no{
  font-family:var(--mono);font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.orow-mid{font-size:14px;color:var(--ink-2);margin-top:3px;}
.orow-bot{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:9px;gap:8px;
}

.badge{
  display:inline-block;font-size:11.5px;font-weight:700;
  padding:3px 9px;border-radius:999px;white-space:nowrap;
  letter-spacing:.01em;
}
.tone-grey .badge,.badge.grey{background:var(--s-grey-bg);color:var(--s-grey);}
.tone-amber .badge,.badge.amber{background:var(--s-amber-bg);color:var(--s-amber);}
.tone-blue .badge,.badge.blue{background:var(--s-blue-bg);color:var(--s-blue);}
.tone-teal .badge,.badge.teal{background:var(--s-teal-bg);color:var(--s-teal);}
.tone-green .badge,.badge.green{background:var(--s-green-bg);color:var(--s-green);}
.tone-red .badge,.badge.red{background:var(--s-red-bg);color:var(--s-red);}

.flag{
  display:inline-block;font-size:10.5px;font-weight:700;
  background:var(--s-red-bg);color:var(--s-red);
  padding:3px 7px;border-radius:5px;margin-left:5px;
  text-transform:uppercase;letter-spacing:.04em;
}
.age{
  font-size:12px;color:var(--muted);
  font-family:var(--mono);font-variant-numeric:tabular-nums;
}
.age.late{color:var(--s-red);font-weight:700;}

/* ============================================================
   COUNTS
   ============================================================ */

.counts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:6px;}
@media(min-width:620px){.counts{grid-template-columns:repeat(4,1fr);}}
.count{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:13px 14px;text-decoration:none;color:inherit;display:block;
}
.count b{
  display:block;font-size:25px;font-weight:700;line-height:1.15;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.count span{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}

/* ============================================================
   PIPELINE VIEW
   ============================================================ */

.stage{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:9px;overflow:hidden;
}
.stage summary{
  display:flex;align-items:center;gap:10px;
  padding:13px 14px;cursor:pointer;list-style:none;min-height:var(--tap);
}
.stage summary::-webkit-details-marker{display:none;}
.stage-dot{width:9px;height:9px;border-radius:50%;background:var(--s-grey);flex:none;}
.stage-dot.tone-amber{background:var(--s-amber);}
.stage-dot.tone-blue{background:var(--s-blue);}
.stage-dot.tone-teal{background:var(--s-teal);}
.stage-dot.tone-green{background:var(--s-green);}
.stage-dot.tone-red{background:var(--s-red);}
.stage-name{flex:1;font-weight:650;font-size:15px;}
.stage-count{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:13px;color:var(--muted);
  background:var(--paper);padding:3px 9px;border-radius:999px;
}
.stage[open] summary{border-bottom:1px solid var(--line-2);}
.stage .olist{padding:10px;}
.stage-empty{padding:16px;color:var(--muted);font-size:13.5px;text-align:center;}

/* ============================================================
   BOARD VIEW
   ============================================================ */

.board{
  display:flex;gap:10px;overflow-x:auto;padding-bottom:12px;
  -webkit-overflow-scrolling:touch;
}
.bcol{
  flex:none;width:250px;background:#eef0f4;
  border-radius:var(--r);display:flex;flex-direction:column;
}
.bcol-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 12px;font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;
  border-radius:var(--r) var(--r) 0 0;
  background:var(--s-grey-bg);color:var(--s-grey);
}
.bcol-head.tone-amber{background:var(--s-amber-bg);color:var(--s-amber);}
.bcol-head.tone-blue{background:var(--s-blue-bg);color:var(--s-blue);}
.bcol-head.tone-teal{background:var(--s-teal-bg);color:var(--s-teal);}
.bcol-head.tone-green{background:var(--s-green-bg);color:var(--s-green);}
.bcol-head.tone-red{background:var(--s-red-bg);color:var(--s-red);}
.bcol-count{font-family:var(--mono);font-variant-numeric:tabular-nums;}
.bcol-body{padding:8px;display:flex;flex-direction:column;gap:7px;min-height:70px;}
.bcard{
  background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:10px 11px;text-decoration:none;color:inherit;
}
.bcard-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline;}
.bcard-top strong{font-size:14.5px;font-weight:650;}
.bcard-bot{display:flex;align-items:center;gap:6px;margin-top:7px;}

/* ============================================================
   SPREADSHEET VIEW
   The whole of Order Tracking. It runs to both edges of the
   screen, because fifteen columns have to fit and none of them
   should fall off the right hand side unseen. The headings and
   the filter row stay put while the orders scroll under them.
   ============================================================ */

/* The table is the only thing on this screen allowed to scroll
   sideways, and it does that inside .tablewrap. A flex item is
   min-width:auto by default, which lets a wide table shoulder its
   parents past the edge of the window and scroll the whole page;
   min-width:0 is what actually stops that happening. */
/* The desk is exactly one screen tall and never scrolls as a page.
   Everything above the rows — the title, the search box, the chips,
   the headings and the filter row — is outside the scrolling box, so
   it all stays put and only the orders move. dvh keeps that true on a
   phone, where the browser's own bar grows and shrinks. */
body.sheet .main{height:100vh;height:100dvh;overflow:hidden;}
body.sheet .wrap{
  max-width:none;min-width:0;
  display:flex;flex-direction:column;min-height:0;
  padding:0 0 calc(58px + env(safe-area-inset-bottom));   /* clear the tab bar */
}
body.sheet .desk-bar,
body.sheet .chiprow-wrap,
body.sheet .onnow,
body.sheet .sheet-note{flex:none;}
body.sheet .sheet-form{
  min-width:0;flex:1;min-height:0;display:flex;flex-direction:column;
}
body.sheet .tablewrap{min-width:0;flex:1;min-height:0;}
.main{min-width:0;}

/* the bulk bar covers the foot of the table, so the rows end above it */
body.sheet.has-bulk .wrap{padding-bottom:calc(120px + env(safe-area-inset-bottom));}

.sheet-note{padding:8px 14px;font-size:13px;color:var(--muted);}

.tablewrap{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
body.sheet .tablewrap{
  border-radius:0;border-left:none;border-right:none;
  overflow:auto;
}

/* separate borders, or the sticky headings lose their underline */
.dtable{border-collapse:separate;border-spacing:0;width:100%;font-size:14px;}
.dtable th{
  text-align:left;padding:0 12px;height:34px;white-space:nowrap;
  font-size:11px;font-weight:500;color:var(--muted);
  text-transform:uppercase;letter-spacing:.07em;
  background:var(--paper);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:3;
}
/* The filter row sticks directly under the headings. How tall those are
   depends on the font and the wording, so the real height is measured in
   sheet.js and put into --head-h; the value here is only a fallback for
   the moment before that runs. It is off unless switched on from the
   Display menu: search and the Filters popover cover nearly every case,
   and it cost forty pixels on every screen for something rarely used. */
.dtable tr.frow{display:none;}
.dtable.frow-on tr.frow{display:table-row;}
.dtable tr.frow th{
  top:var(--head-h,34px);z-index:2;background:var(--card);padding:4px 6px;height:40px;
  text-transform:none;letter-spacing:0;
}
/* A row is a fixed height and the text sits in the middle of it: 36
   pixels comfortable, 30 compact, and nothing in a cell may change it. */
.dtable td{
  height:36px;padding:0 12px;border-bottom:1px solid var(--line-2);
  vertical-align:middle;white-space:nowrap;line-height:1.3;
}
.dtable tbody tr{cursor:pointer;}
.dtable tbody tr:hover{background:var(--paper);}
.dtable tbody tr:last-child td{border-bottom:none;}

/* ---------- the phone list ----------
   Below 640px the table is not shown at all: fifteen columns cannot be
   read on a phone. The same orders appear as cards instead, and nothing
   anywhere scrolls sideways. */

.cardlist{display:none;}

@media (max-width:767px){
  body.sheet .tablewrap{display:none;}
  .cardlist{
    display:block;flex:1;min-height:0;min-width:0;
    overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    background:var(--paper);padding:8px 10px 10px;
  }
}

/* One card per order: number and stage on the top line, the name in
   medium weight and larger, the phone to tap, what was ordered, and
   the money with its state on the bottom line. Every tap target on it
   is at least 44 pixels. */
.ocard{
  display:flex;align-items:stretch;gap:6px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:8px;overflow:hidden;
}
.ocard.picked{border-color:var(--accent);background:var(--accent-bg);}
.ocard-tick{
  display:flex;align-items:center;padding-left:10px;margin:0;flex:none;min-width:34px;
}
.ocard-tick input{
  width:22px;height:22px;min-height:0;margin:0;padding:0;
  accent-color:var(--accent);border-radius:4px;
}
.ocard-main{
  flex:1;min-width:0;display:block;padding:10px 4px 10px 0;
  text-decoration:none;color:inherit;cursor:pointer;
}
.ocard-top{display:flex;justify-content:space-between;gap:10px;align-items:center;}
.ocard-name{
  display:block;font-weight:500;font-size:16px;letter-spacing:-.005em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  min-width:0;margin-top:4px;text-decoration:none;
}
.ocard-phone{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;
  font-size:14px;color:var(--accent);text-decoration:none;
  font-variant-numeric:tabular-nums;
}
.ocard-nophone{color:var(--muted);}
.ocard-mid{
  font-size:14px;color:var(--ink-2);margin:0 0 6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ocard-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.ocard-amt{font-size:14px;font-weight:500;}
.ocard-acts{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 6px 6px 0;flex:none;
}
.ocard-acts .qa,.ocard-acts .peek{
  width:44px;height:44px;min-height:44px;border-radius:8px;
  font-size:18px;opacity:1;
}
.ocard-acts .peek{border:none;background:none;color:var(--ink-2);}

/* ---------- reaching the customer from a row ---------- */

.qa{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:8px;text-decoration:none;
  font-size:16px;line-height:1;flex:none;
}
.qa-wa{background:#e4f4e6;color:#1f7a35;}
.qa-call{background:var(--s-blue-bg);color:var(--s-blue);}
.qa:hover{filter:brightness(.95);}
.qa-none{color:var(--line);font-size:13px;line-height:1.2;}

/* In the table they keep out of the way until the row is pointed at,
   or reached with a keyboard. On a card they are always there. */
.dtable td.rowacts{
  position:sticky;right:0;z-index:1;background:#fff;
  white-space:nowrap;padding:3px 10px;text-align:right;
  line-height:0;                    /* same descender trap as the tick cell */
  box-shadow:-6px 0 8px -6px rgba(10,16,28,.14);
}
.dtable th.acts{
  position:sticky;right:0;z-index:4;width:92px;
  box-shadow:-6px 0 8px -6px rgba(10,16,28,.14);
}
.dtable tbody tr:hover td.rowacts{background:#fafbfd;}
.dtable tbody tr.picked td.rowacts{background:#eef4fc;}
.dtable td.rowacts .qa,
.dtable td.rowacts .qa-none{opacity:0;pointer-events:none;transition:opacity .12s ease;}
/* The dots are the way into everything a row can do, so they are always
   there, at full strength. Waiting for a hover left them unreachable on
   a phone, where there is no such thing. */
.dtable td.rowacts .qa-more{opacity:1;pointer-events:auto;}
.dtable tbody tr:hover td.rowacts .qa,
.dtable tbody tr:focus-within td.rowacts .qa,
.dtable tbody tr:hover td.rowacts .qa-none{opacity:1;pointer-events:auto;}
.c-acts{width:92px;}

.vis-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* ---------- the blank row a new order is typed into ----------
   It sits below the filter row and stays there, the way the last
   line of a spreadsheet is always within reach. */

.dtable tr.newrow td{
  position:sticky;z-index:2;
  top:calc(var(--head-h,34px) + var(--frow-h,0px));
  background:var(--accent-bg);border-bottom:2px solid var(--line);
  padding:0 6px;
}
.dtable tr.newrow.typing td{background:var(--accent-bg-2);}
.dtable tr.newrow.saving td{opacity:.55;}
.dtable td.newplus{
  color:var(--chrome);font-weight:700;font-size:17px;
  text-align:center;line-height:0;padding:3px 4px;
}
.dtable td.newacts{line-height:1;}

.newcell{
  width:100%;min-width:0;margin:0;
  border:1px solid transparent;background:transparent;border-radius:5px;
  padding:4px 6px;min-height:28px;
  font-size:13px;font-family:inherit;color:var(--ink);
  -webkit-appearance:none;appearance:none;
}
.newcell:hover{border-color:var(--line);background:#fff;}
.newcell:focus{
  border-color:var(--chrome);background:#fff;outline:none;
  box-shadow:0 0 0 2px rgba(18,35,63,.14);
}
select.newcell{padding-right:20px;background-position:right 4px center;}
.newcell-auto{color:var(--muted);font-size:12px;}

/* The same size, weight and colour as every other secondary control on
   the desk, so it reads as a control and not as a leftover. */
.btn-more{
  background:var(--card);border:1px solid var(--line);border-radius:6px;
  font:inherit;font-size:13px;font-weight:500;color:var(--ink-2);
  padding:4px 10px;min-height:28px;cursor:pointer;white-space:nowrap;
}
.btn-more:hover{border-color:var(--accent);color:var(--accent);}

body.dense .newcell{min-height:24px;padding:2px 5px;font-size:12.5px;}

/* ============================================================
   THE TEAM SCREEN
   ============================================================ */

.teambar{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap;}
.teambar input[type=search]{flex:1;min-width:160px;margin-top:0;min-height:42px;}
.teambar select{width:auto;min-width:150px;margin-top:0;min-height:42px;}

/* the table here scrolls sideways inside its own box, like the desk */
.utable{font-size:13.5px;}
.utable td{vertical-align:middle;}
.utable th{position:static;}          /* nothing to stick to on this page */
.utable .wrapcell{white-space:normal;min-width:220px;max-width:420px;line-height:1.45;}
.utable tbody tr:hover{background:#fafbfd;}

.inline-form{display:inline-block;margin:0;}
.rolepick{
  width:auto;min-width:150px;margin:0;min-height:34px;
  padding:5px 26px 5px 8px;font-size:13px;
  border:1px solid var(--line);border-radius:6px;background-position:right 6px center;
}
.uacts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.acts-head{text-align:left;}
.rolecount{
  font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);text-decoration:none;
}

/* ---------- the password, shown once ---------- */

.pwbox{
  background:#fff;border:2px solid var(--s-amber);border-radius:var(--r);
  padding:14px 16px;margin-bottom:14px;
}
.pwbox-head{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin-bottom:10px;}
.pwbox-head strong{font-size:15px;}
.pwbox-warn{
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  background:var(--s-amber-bg);color:var(--s-amber);padding:3px 8px;border-radius:5px;
}
.pwbox-rows{margin:0 0 12px;}
.pwbox-rows div{display:flex;gap:10px;padding:4px 0;border-bottom:1px solid var(--line-2);}
.pwbox-rows div:last-child{border-bottom:none;}
.pwbox-rows dt{width:78px;flex:none;color:var(--muted);font-size:12.5px;}
.pwbox-rows dd{margin:0;font-size:14px;word-break:break-all;}
.pwbox-rows code{
  font-family:var(--mono);font-size:16px;font-weight:700;letter-spacing:.06em;
  background:var(--paper);padding:3px 9px;border-radius:6px;
}
.pwbox-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

/* the add panel is a form all the way down, so it can flex */
.panel-form{display:flex;flex-direction:column;flex:1;min-height:0;}

@media (max-width:639px){
  .teambar select{width:100%;}
  .utable .uacts{flex-direction:column;align-items:stretch;}
}

/* ---------- and the button that replaces it on a phone ---------- */

.fab{display:none;}
@media (max-width:767px){
  .fab{
    display:flex;align-items:center;justify-content:center;
    position:fixed;right:16px;bottom:calc(74px + env(safe-area-inset-bottom));
    z-index:45;width:56px;height:56px;border-radius:50%;
    background:var(--chrome);color:#fff;border:none;
    font-size:30px;line-height:1;cursor:pointer;
    box-shadow:0 6px 18px rgba(10,16,28,.30);
  }
  body.has-bulk .fab,
  body.panel-open .fab{display:none;}
}

/* ---------- comfortable and compact ---------- */

body.dense .dtable td{height:30px;padding:0 8px;}
body.dense .dtable th{padding:0 8px;height:30px;}
body.dense .dtable tr.frow th{padding:2px 5px;height:34px;}
body.dense .frow input[type=text],
body.dense .frow select{min-height:26px;padding:2px 6px;font-size:12px;}
/* An inline-block sitting on the baseline holds the whole line box open
   for descenders underneath it, so the chip has to come down with the
   text or it alone decides the row height. */
body.dense .dtable .badge{
  padding:0 6px;font-size:10px;line-height:1.5;vertical-align:middle;
}
body.dense .ocard .badge{padding:1px 7px;font-size:10.5px;}
/* Only in the table, where a mouse is doing the pointing. On a card the
   buttons stay thumb sized whatever the density. */
body.dense .dtable .qa{width:20px;height:20px;font-size:11px;border-radius:5px;}
body.dense .dtable .tick input{width:16px;height:16px;}
/* body.dense .dtable td above outranks the .tick and .rowacts rules, so
   the strut those two switch off has to be switched off again here. */
body.dense .dtable td.tick,
body.dense .dtable td.rowacts{line-height:0;}
body.dense .dtable td.rowacts{padding:0 8px;}
body.dense .ocard-main{padding:7px 4px 7px 0;}
body.dense .ocard-name{font-size:14.5px;}
body.dense .ocard-mid{font-size:12.5px;margin:1px 0 5px;}
body.dense .ocard{margin-bottom:5px;}

.sortlink{
  display:inline-flex;align-items:center;gap:5px;
  color:inherit;text-decoration:none;
}
.sortlink:hover{color:var(--ink);}
.sortlink.on{color:var(--chrome);}
.sortlink .arr{font-size:9px;opacity:.4;}
.sortlink.on .arr{opacity:1;}

.frow input[type=text],.frow select{
  display:block;width:100%;min-width:96px;margin-top:0;
  min-height:32px;padding:5px 7px;
  font-size:13px;font-weight:400;color:var(--ink);
  border:1px solid var(--line);border-radius:6px;background:var(--card);
}
.frow select{padding-right:22px;background-position:right 6px center;}
.frow input::placeholder{color:var(--muted);}

@media (min-width:900px){
  body.sheet .wrap{padding:0 0 10px;}          /* no tab bar on a wide screen */
  body.sheet.has-bulk .wrap{padding-bottom:72px;}
  body.sheet .desk-bar{padding:0 24px;}
  body.sheet .chiprow{padding:0 24px;}
  body.sheet .onnow{padding:0 24px;}
}

/* ============================================================
   THE ORDER DESK
   Ticking, editing in place, the bar that rises from the bottom
   and the panels that slide in from the side.
   ============================================================ */

/* ---------- the chips ---------- */

/* One row, 40 pixels, that scrolls sideways and never wraps. All,
   then the stages, a divider, the payment chips, a divider, the saved
   views. A fade at each edge says there is more. The row used to wrap
   onto three lines, which is how the desk came to spend seven rows
   before the first order. */
.chiprow-wrap{position:relative;min-width:0;}
.chiprow{
  display:flex;flex-wrap:nowrap;align-items:center;gap:6px;
  height:40px;padding:0 14px;min-width:0;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 14px,#000 calc(100% - 14px),transparent);
          mask-image:linear-gradient(to right,transparent,#000 14px,#000 calc(100% - 14px),transparent);
}
.chiprow::-webkit-scrollbar{display:none;}
.chipcats{flex:none;display:inline-flex;align-items:center;background:var(--line);border-radius:999px;padding:2px;gap:2px;margin-right:4px;}
.chipcat{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;color:var(--ink-2);text-decoration:none;white-space:nowrap;}
.chipcat.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08);}
.chipcat b{font-weight:700;color:var(--chrome);}
@media (max-width:767px){
  .chipcat{height:38px;padding:0 12px;font-size:13px;}
}
.chip{
  flex:none;display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:500;text-decoration:none;
  padding:0 12px;border-radius:999px;height:32px;
  background:var(--card);border:1px solid var(--line);color:var(--ink-2);
  white-space:nowrap;
}
.chip b{font-weight:400;font-variant-numeric:tabular-nums;color:var(--muted);}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.chip.on b{color:#fff;}
/* A thin upright line between the groups: stages, then payment, then
   the saved views. */
.chip-sep{flex:none;width:1px;height:22px;background:var(--line);margin:0 4px;}

/* ---------- the tick column ---------- */

.dtable th.tick,.dtable td.tick{
  width:44px;padding:6px 4px 6px 12px;text-align:left;
  /* the box is an inline-block, so a line box would reserve room under
     it for descenders and quietly make every row taller than its text */
  line-height:0;
}
.dtable .tick input{
  width:20px;height:20px;margin:0;accent-color:var(--chrome);
  min-height:0;padding:0;border-radius:4px;display:inline-block;
}
.dtable tbody tr.picked{background:#eef4fc;}
.dtable tbody tr.picked:hover{background:#e7eefa;}
.c-tick{width:44px;}

/* ---------- rows are no longer one big link ---------- */

.dtable tbody tr{cursor:default;}
.namelink{color:var(--chrome);text-decoration:none;font-weight:650;}
.namelink:hover{text-decoration:underline;}

/* ---------- editing in place ---------- */

.dtable td.can-edit{cursor:text;}
.dtable td.can-edit:hover{box-shadow:inset 0 0 0 1px var(--line);}
/* Only an outline, never padding or size: the row must not move
   a pixel when a cell is being edited. The editor itself floats
   above the table in .cell-pop and takes up no space in it. */
.dtable td.editing{box-shadow:inset 0 0 0 2px var(--chrome);}
.dtable td.saving{opacity:.55;}
.dtable td.justsaved{animation:justsaved 900ms ease;}
@keyframes justsaved{from{background:#e9f3dc;}to{background:transparent;}}

.cell-pop{
  position:fixed;z-index:60;
  display:flex;align-items:center;gap:4px;
  background:#fff;border:1px solid var(--chrome);border-radius:8px;
  padding:5px;box-shadow:0 6px 22px rgba(10,16,28,.22);
  max-width:calc(100vw - 16px);
}
.cell-input{
  display:block;width:auto;min-width:120px;max-width:240px;flex:1;
  margin:0;padding:6px 8px;min-height:34px;font-size:14px;
  border:1px solid var(--line);border-radius:6px;
}
textarea.cell-input{min-height:64px;}
.cell-ok,.cell-no{
  border:none;cursor:pointer;flex:none;
  width:34px;height:34px;border-radius:6px;
  font-size:15px;line-height:1;
}
.cell-ok{background:var(--s-green-bg);color:var(--s-green);font-weight:700;}
.cell-no{background:var(--s-grey-bg);color:var(--s-grey);}

/* ---------- widths ---------- */

.grip{
  position:absolute;top:0;right:0;bottom:0;width:11px;
  cursor:col-resize;touch-action:none;
}
.grip:hover{background:linear-gradient(to right,transparent,rgba(18,35,63,.18));}
/* the headings are already sticky, which is enough to hang the grip on */
.dtable th[data-key]{padding-right:14px;}
body.resizing{cursor:col-resize;user-select:none;}

.dtable.fit{table-layout:fixed;width:100%;}
.dtable.fit td,.dtable.fit th{overflow:hidden;text-overflow:ellipsis;}

/* ---------- the bar that rises when rows are ticked ---------- */

/* On a phone it spans the window. On a wide screen it belongs to
   the content area, so it starts where the sidebar ends and moves
   with it, instead of hiding its first buttons underneath. */
.bulkbar{
  position:fixed;left:0;right:0;bottom:0;z-index:56;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--chrome);color:#fff;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 20px rgba(10,16,28,.22);
  animation:riseup .16s ease-out;
}
@media (min-width:900px){
  .bulkbar{left:var(--side);padding-left:24px;padding-right:24px;}
  body.side-icons .bulkbar{left:64px;}
  body.side-hidden .bulkbar{left:0;}
}
@keyframes riseup{from{transform:translateY(100%);}to{transform:translateY(0);}}
.bulk-count{font-size:14px;font-weight:600;white-space:nowrap;}
.bulk-count b{font-size:17px;font-variant-numeric:tabular-nums;}
/* min-width:0 lets the buttons wrap onto a second line instead of
   pushing the bar wider than the screen. */
.bulk-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;flex:0 1 auto;min-width:0;}
@media (min-width:900px){
  /* Delete and Clear stay on the right of the one line; a crowded row of actions scrolls sideways rather than wrapping under them */
  .bulkbar{flex-wrap:nowrap;}
  .bulk-actions{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;}
  .bulk-end{flex:0 0 auto;}
}
/* Light on dark, for every enabled button. Written to outrank the
   desk's own .btn-ghost colour, which is ink on paper and on this bar
   read as disabled. */
body.sheet .bulkbar .btn-ghost,.bulkbar .btn-ghost{
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff;
}
body.sheet .bulkbar .btn-ghost:hover,.bulkbar .btn-ghost:hover{
  background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.5);color:#fff;
}
/* A button that really is off looks off: no fill, a dashed edge, and
   not merely a dimmer copy of the others. */
body.sheet .bulkbar .btn:disabled{
  opacity:1;background:transparent;border:1px dashed rgba(255,255,255,.4);
  color:rgba(255,255,255,.55);cursor:not-allowed;
}
/* Delete and Clear selection sit apart on the right. Delete is the
   quietest thing on the bar: no fill, red text, so the most dangerous
   action is never the loudest. */
.bulk-end{
  display:flex;align-items:center;gap:8px;margin-left:auto;
  padding-left:16px;border-left:1px solid rgba(255,255,255,.2);
}
body.sheet .bulkbar .bulk-delete{
  background:transparent;border-color:rgba(255,255,255,.24);color:#f3a6a6;
}
body.sheet .bulkbar .bulk-delete:hover{background:rgba(243,166,166,.14);border-color:#f3a6a6;color:#f3a6a6;}
.bulk-clear{
  display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 8px;
  background:none;border:0;border-radius:6px;color:#fff;
  font:inherit;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;
}
.bulk-clear b{font-size:18px;font-weight:400;line-height:1;}
.bulk-clear:hover{background:rgba(255,255,255,.14);}
@media (max-width:767px){
  .bulk-end{margin-left:0;padding-left:0;border-left:0;width:100%;justify-content:flex-end;}
  .bulk-clear{min-height:44px;}
}
.btn-x{
  background:none;border:none;color:inherit;font-size:24px;line-height:1;
  cursor:pointer;padding:2px 8px;margin-left:auto;
}
.bulk-pick{
  display:flex;gap:6px;align-items:center;width:100%;
  padding-top:8px;border-top:1px solid rgba(255,255,255,.16);
}
.bulk-pick select{margin:0;min-height:40px;flex:1;max-width:280px;font-size:15px;}

/* the tab bar would sit under the bulk bar, so it steps aside */
body.has-bulk .tabbar{display:none;}

/* ---------- the panels ---------- */

.panel-veil{
  position:fixed;inset:0;background:rgba(10,16,28,.45);z-index:70;
}
.panel{
  position:fixed;top:0;right:0;bottom:0;z-index:75;
  width:100%;background:#fff;
  display:flex;flex-direction:column;
  box-shadow:-8px 0 26px rgba(10,16,28,.18);
  animation:slidein .18s ease-out;
}
@keyframes slidein{from{transform:translateX(100%);}to{transform:translateX(0);}}

/* Below 640px a panel is the whole screen. Above that it is a column
   down the right hand side. */
@media (min-width:640px){
  .panel{width:var(--panel-w);max-width:88%;}
  .panel-narrow{width:340px;max-width:88%;}
}

/* From 1200px the order panel is docked rather than laid over the top:
   the page gives up the width instead, so the table simply becomes
   narrower and everything behind stays usable. No scrim, because
   nothing behind it is switched off. */
@media (min-width:1200px){
  body.panel-docked .main{margin-right:var(--panel-w);}
  body.panel-docked .bulkbar{right:var(--panel-w);}
  body.panel-docked .panel{box-shadow:-1px 0 0 var(--line);}
  body.panel-docked #panelVeil{display:none !important;}
}
.panel-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:16px 18px 12px;border-bottom:1px solid var(--line);
}
.panel-no{font-family:var(--mono);font-size:12px;color:var(--muted);}
.panel-name{font-size:19px;font-weight:700;margin:2px 0 0;}
.panel-x{
  background:none;border:none;font-size:28px;line-height:1;color:var(--muted);
  cursor:pointer;padding:0 4px;min-height:44px;min-width:44px;
}
.panel-tools{display:flex;align-items:center;gap:2px;flex:none;}
.panel-pin{
  background:none;border:none;font-size:17px;line-height:1;color:var(--muted);
  cursor:pointer;border-radius:8px;min-height:44px;min-width:44px;
}
.panel-pin:hover{background:var(--paper);color:var(--ink-2);}
.panel-pin.on{background:var(--s-blue-bg);color:var(--s-blue);}
/* overscroll-behavior keeps a flick inside the panel from carrying
   on into the page underneath once it reaches the end. */
.panel-body{
  flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:14px 18px 20px;
}
.panel-group{margin-bottom:6px;}
.panel-ro{
  margin-top:6px;padding:11px 12px;background:var(--paper);
  border:1px solid var(--line-2);border-radius:9px;font-weight:400;color:var(--ink);
}
.panel-foot{
  display:flex;gap:8px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:#fff;
}
.panel-foot .btn{flex:1;}

/* ---------- the columns list ---------- */

.collist,.viewlist{list-style:none;margin:0 0 10px;padding:0;}
.collist li{
  display:flex;align-items:center;gap:8px;
  padding:7px 8px;border:1px solid var(--line);border-radius:9px;
  margin-bottom:6px;background:#fff;
}
.collist li.dragging{opacity:.45;}
.collist .drag{cursor:grab;color:var(--muted);font-size:15px;touch-action:none;}
.col-tick{flex:1;margin:0;font-weight:500;font-size:14px;display:flex;align-items:center;gap:8px;}
.col-tick input{width:19px;height:19px;min-height:0;margin:0;padding:0;accent-color:var(--chrome);}
.col-move{display:flex;gap:2px;}
.col-move button{
  background:var(--paper);border:1px solid var(--line);border-radius:6px;
  width:34px;height:34px;cursor:pointer;color:var(--ink-2);font-size:11px;
}

.viewlist li{
  display:flex;align-items:center;gap:6px;
  border:1px solid var(--line);border-radius:9px;margin-bottom:6px;background:#fff;
}
.view-go{
  flex:1;text-align:left;background:none;border:none;cursor:pointer;
  padding:12px 12px;font:inherit;font-weight:600;color:var(--ink);min-height:46px;
}
.viewlist .tag{
  font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--s-blue-bg);color:var(--s-blue);padding:2px 6px;border-radius:4px;
}
.viewlist .btn-x{color:var(--muted);margin:0;}

/* ---------- the little confirmation ---------- */

.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(84px + env(safe-area-inset-bottom));z-index:90;
  background:var(--ink);color:#fff;font-size:13.5px;font-weight:600;
  padding:11px 18px;border-radius:999px;max-width:90vw;text-align:center;
  box-shadow:0 6px 20px rgba(10,16,28,.28);
}
.toast.bad{background:var(--s-red);}
body.has-bulk .toast{bottom:calc(140px + env(safe-area-inset-bottom));}

/* ============================================================
   TILES  (More page)
   ============================================================ */

.tilegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;}
@media(min-width:620px){.tilegrid{grid-template-columns:repeat(4,1fr);}}
.tile{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:16px 12px;text-align:center;
  text-decoration:none;color:inherit;
}
.tile-ico{display:block;font-size:22px;margin-bottom:7px;}
.tile-txt{font-size:13px;font-weight:600;}
.tile.soon{color:var(--muted);}
.tile .tag{
  position:absolute;top:7px;right:7px;font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  background:var(--paper);color:var(--muted);padding:2px 5px;border-radius:4px;
}

.person-card{display:flex;align-items:center;gap:14px;}
.person-name{font-size:17px;font-weight:650;}

.soon-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:40px 24px;text-align:center;
}
.soon-icon{font-size:34px;margin-bottom:12px;color:var(--muted);}
.soon-card h2{font-size:18px;margin:0 0 8px;}
.soon-card p{margin:0 auto 14px;max-width:420px;}

/* ============================================================
   FORMS
   ============================================================ */

label{display:block;margin:0 0 14px;font-size:13.5px;font-weight:650;color:var(--ink-2);}

input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=tel],input[type=search],select,textarea{
  display:block;width:100%;margin-top:6px;
  font-size:16px;font-family:inherit;color:var(--ink);
  padding:12px;min-height:var(--tap);
  border:1px solid #ccd2dc;border-radius:9px;background:#fff;
  -webkit-appearance:none;appearance:none;
}
select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236f7787' stroke-width='2'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;
}
textarea{min-height:92px;resize:vertical;}
input:focus,select:focus,textarea:focus{
  outline:2px solid transparent;border-color:var(--chrome);
  box-shadow:0 0 0 3px rgba(18,35,63,.13);
}
a:focus-visible,button:focus-visible{
  outline:2px solid var(--chrome);outline-offset:2px;border-radius:6px;
}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.check{
  display:flex;align-items:center;gap:11px;
  font-weight:650;font-size:15px;margin-bottom:12px;min-height:var(--tap);
}
.check input{width:22px;height:22px;margin:0;flex:none;}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap);padding:12px 18px;
  font-size:15.5px;font-weight:650;font-family:inherit;
  border-radius:9px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;
}
.btn-primary{background:var(--chrome);color:#fff;}
.btn-primary:active{background:var(--chrome-2);}
.btn-ghost{background:#fff;color:var(--chrome);border-color:#ccd2dc;}
.btn-danger{background:#fff;color:var(--s-red);border-color:#e8c2c2;}
.btn-wa{background:#128c7e;color:#fff;}
.btn-block{display:flex;width:100%;}
.btn-sm{min-height:38px;padding:7px 14px;font-size:13.5px;}
.btn:disabled{opacity:.45;}
.btn-stack{display:flex;flex-direction:column;gap:10px;}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;}

/* ============================================================
   CALLOUTS, DETAIL LISTS, TIMELINE
   ============================================================ */

.callout{
  border-radius:9px;padding:12px 14px;margin-bottom:12px;font-size:14px;
  border-left:4px solid transparent;
}
.callout-ok{background:var(--s-green-bg);color:var(--s-green);border-left-color:var(--s-green);}
.callout-warn{background:var(--s-amber-bg);color:var(--s-amber);border-left-color:var(--s-amber);}
.callout-error{background:var(--s-red-bg);color:var(--s-red);border-left-color:var(--s-red);}
.callout-info{background:var(--s-blue-bg);color:var(--s-blue);border-left-color:var(--s-blue);}
.callout a{color:inherit;}

.dl{margin:0;}
.dl div{
  display:flex;justify-content:space-between;gap:14px;
  padding:10px 0;border-bottom:1px solid var(--line-2);
}
.dl div:last-child{border-bottom:none;}
.dl dt{color:var(--muted);font-size:13.5px;flex:none;}
.dl dd{margin:0;text-align:right;font-size:15px;word-break:break-word;}

.tl{list-style:none;margin:0;padding:0;}
.tl li{
  padding:9px 0 9px 16px;border-left:2px solid var(--line);
  position:relative;font-size:14px;
}
.tl li:before{
  content:'';position:absolute;left:-5px;top:15px;
  width:8px;height:8px;border-radius:50%;background:var(--line);
}
.tl li span{display:block;color:var(--muted);font-size:12px;}

/* ============================================================
   AUTH PAGES
   ============================================================ */

.auth-page{
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:20px;background:var(--chrome);
}
.auth-card{width:100%;max-width:370px;background:#fff;border-radius:14px;padding:28px 24px;}
.auth-card h1{font-size:20px;margin:0 0 6px;}
.auth-logo{
  font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chrome);margin-bottom:16px;
}

code{
  background:var(--paper);padding:2px 6px;border-radius:5px;
  font-size:14px;font-family:var(--mono);
}

/* ============================================================
   SIDEBAR MODES
   Pinned, shrunk to icons, or hidden. The choice is remembered
   per person and only applies on a wide screen. On a phone the
   sidebar is always the slide-in drawer.
   ============================================================ */

/* The three modes only mean anything on a wide screen, so on a
   phone the button is not shown at all rather than shown doing
   nothing. The drawer has its own close button there. */
.pin-btn{display:none;}

@media (min-width:900px){

  .pin-btn{
    display:block;background:none;border:none;color:var(--chrome-ink);
    font-size:17px;line-height:1;cursor:pointer;padding:4px 6px;border-radius:6px;
  }
  .pin-btn:hover{background:rgba(255,255,255,.10);color:#fff;}

  /* pinned is the default and is already handled above */

  body.side-icons .sidebar{width:64px;overflow:visible;}
  body.side-icons .main{margin-left:64px;}
  body.side-icons .logo,
  body.side-icons .sidenav-item .txt,
  body.side-icons .sidenav-item .tag{display:none;}
  body.side-icons .sidebar-head{justify-content:center;padding:16px 0 12px;}
  body.side-icons .sidenav-item{justify-content:center;padding:12px 0;}
  body.side-icons .sidenav-item .ico{width:auto;font-size:17px;}

  /* point at the narrow bar and it opens over the page */
  body.side-icons .sidebar:hover{width:var(--side);z-index:70;}
  body.side-icons .sidebar:hover .logo,
  body.side-icons .sidebar:hover .sidenav-item .txt,
  body.side-icons .sidebar:hover .sidenav-item .tag{display:block;}
  body.side-icons .sidebar:hover .sidebar-head{justify-content:space-between;padding:18px 18px 14px;}
  body.side-icons .sidebar:hover .sidenav-item{justify-content:flex-start;padding:11px 12px;}
  body.side-icons .sidebar:hover .sidenav-item .ico{width:20px;}

  body.side-hidden .sidebar{transform:translateX(-100%);}
  body.side-hidden .main{margin-left:0;}
  body.side-hidden .menu-btn{display:block;}
  body.side-hidden.drawer-open .sidebar{transform:translateX(0);z-index:70;}
  body.side-hidden .drawer-veil{display:block;}
  body.side-hidden .drawer-close{display:block;}
}

/* ---------- the health page ---------- */

.dtable td.hx{width:34px;text-align:center;font-size:15px;line-height:1;}
.hx-ok{color:var(--s-green);font-weight:700;}
.hx-no{color:var(--s-red);font-weight:700;}

/* ============================================================
   THE SETTINGS SCREENS
   One shape for all of them: a dense table on a wide screen,
   the same rows as cards on a phone, and the order desk's panel
   for everything that does not fit in a column.
   ============================================================ */

.settings-head{align-items:center;}
.settings-title{display:flex;align-items:center;gap:10px;min-width:0;}
.settings-back{
  color:var(--muted);text-decoration:none;font-size:19px;line-height:1;
  padding:2px 6px;border-radius:6px;
}
.settings-back:hover{background:var(--paper);color:var(--ink);}

.settings-wrap{max-height:none;}

/* compact enough to see twenty at once */
.stable{font-size:13px;}
.stable th{padding:6px 10px;position:static;}
.stable td{padding:0 10px;height:30px;vertical-align:middle;white-space:nowrap;}
.stable tbody tr{cursor:default;}
.stable tbody tr:hover{background:#f7f9fc;}
.stable tbody tr.dim td{opacity:.55;}
.stable tbody tr.dim:hover td{opacity:1;}

/* the first cell opens the panel */
.openrow{
  background:none;border:none;padding:0;margin:0;font:inherit;color:var(--ink);
  cursor:pointer;text-align:left;max-width:100%;
  display:inline-flex;align-items:center;gap:8px;
}
.openrow:hover{color:var(--chrome);text-decoration:underline;}
.stable td.openscell{font-weight:600;}

.stable .dragcol{width:30px;padding:0 2px 0 8px;}
.drag-handle{
  display:inline-block;color:var(--line);cursor:grab;
  font-size:14px;line-height:1;padding:6px 2px;touch-action:none;
}
.drag-handle:hover{color:var(--muted);}
tr.dragging{background:#eef4fc !important;box-shadow:0 2px 10px rgba(10,16,28,.16);}
body.row-dragging{cursor:grabbing;user-select:none;}

/* how many orders use a thing */
.use-none{color:var(--line);}
.use-some{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-2);}

.stable .badge{font-size:10px;padding:1px 6px;vertical-align:middle;}
.stable .stage-dot{display:inline-block;vertical-align:middle;margin-right:2px;}

/* the panel on these screens holds a plain form */
.panel .panel-body label{margin-bottom:12px;}
.panel-note{
  margin:-6px 0 14px;font-size:12.5px;color:var(--muted);line-height:1.45;
}
.panel-ro{margin-top:6px;}
.panel-danger{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
}

/* the cards that replace the table on a phone */
.settings-cards{display:none;}
.scard-main{
  background:none;border:none;font:inherit;text-align:left;width:100%;
  padding:11px 14px;cursor:pointer;color:inherit;
}
.scard .ocard-mid{margin-bottom:0;white-space:normal;}
.scard.dim{opacity:.6;}

@media (max-width:639px){
  .settings-wrap{display:none;}
  .settings-cards{display:block;}
  .settings-head{flex-wrap:wrap;gap:8px;}
}

/* ---------- the BotBee pages ---------- */

.bb-state{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 2px 14px;}
.bb-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 2px 8px;}
.bb-meta code{
  font-family:var(--mono);font-size:12px;background:var(--paper);
  padding:2px 7px;border-radius:5px;color:var(--ink-2);
}
.bb-raw{margin:8px 0 20px;}
.bb-raw summary{
  cursor:pointer;font-size:12.5px;color:var(--muted);
  padding:6px 2px;user-select:none;
}
.bb-raw summary:hover{color:var(--ink-2);}
.bb-raw pre,.bb-snippet{
  background:var(--ink);color:#dfe6f2;border-radius:var(--r);
  padding:12px 14px;overflow-x:auto;font-family:var(--mono);
  font-size:12px;line-height:1.55;margin:0 0 14px;
  white-space:pre-wrap;word-break:break-word;
}
.bb-two{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:16px;}
@media (min-width:760px){.bb-two{grid-template-columns:1fr 1fr;}}
.bb-names{list-style:none;margin:0;padding:0;font-size:13px;}
.bb-names li{padding:3px 0;border-bottom:1px solid var(--line-2);}
.bb-names li:last-child{border-bottom:none;}
.bb-arrow{color:var(--line);width:24px;text-align:center;}
.bb-save{display:flex;gap:10px;align-items:center;margin:10px 2px 22px;}

/* ---------- TAGS ----------
   A stage is one thing an order is; a tag is one of several things
   it can be. So a tag is smaller and quieter than a stage badge,
   and the colour still carries the meaning. */
.tagchip{
  display:inline-block;padding:1px 7px;border-radius:999px;
  font-size:11.5px;line-height:17px;white-space:nowrap;
  background:var(--s-grey-bg);color:var(--s-grey);
  margin:0 3px 0 0;vertical-align:middle;
}
.tagchip.amber{background:var(--s-amber-bg);color:var(--s-amber);}
.tagchip.blue{background:var(--s-blue-bg);color:var(--s-blue);}
.tagchip.teal{background:var(--s-teal-bg);color:var(--s-teal);}
.tagchip.green{background:var(--s-green-bg);color:var(--s-green);}
.tagchip.red{background:var(--s-red-bg);color:var(--s-red);}
.tagchip.off{opacity:.55;text-decoration:line-through;}
.tagchip.more{background:transparent;color:var(--muted);}

.tagcell{display:block;line-height:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tagcell .tagchip{line-height:17px;}

/* the button that opens the picker: in the blank row and the panel */
.tagpick{
  font:inherit;text-align:left;width:100%;min-height:26px;line-height:0;
  background:var(--card);border:1px solid var(--line-2);border-radius:7px;
  padding:3px 7px;cursor:pointer;color:var(--ink-2);
}
.tagpick:hover{border-color:var(--line);}
.tagpick:disabled{opacity:.5;cursor:default;}
.tagpick-none{color:var(--muted);font-size:12.5px;line-height:19px;}

.tagpop{
  position:fixed;z-index:80;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:0 6px 22px rgba(10,16,28,.22);padding:8px;
  min-width:190px;max-width:min(280px,calc(100vw - 16px));
}
.tagpop-list{max-height:min(46vh,300px);overflow-y:auto;margin-bottom:6px;}
.tagpop-one{
  display:flex;align-items:center;gap:8px;padding:4px 4px;border-radius:6px;
  cursor:pointer;font-size:13px;
}
.tagpop-one:hover{background:var(--paper);}
.tagpop-one input{margin:0;flex:none;}
.tagpop-foot{display:flex;gap:8px;justify-content:flex-end;border-top:1px solid var(--line-2);padding-top:8px;}
.tagpop p{margin:2px 4px 8px;}

/* on a phone the picker is a sheet at the bottom, within thumb reach */
@media (max-width:767px){
  .tagpop{
    left:8px !important;right:8px;top:auto !important;bottom:8px;
    max-width:none;width:auto;
  }
}

/* The position number down the left of every settings list. It is
   for reading, not data: narrow, quiet, and lining up as a column
   of digits rather than of text. */
.stable .serialcol{
  width:34px;padding-left:10px;padding-right:6px;
  color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;
}
.stable thead .serialcol{font-weight:700;}
.scard-serial{
  display:inline-block;min-width:1.4em;margin-right:7px;
  color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums;
}

/* The little wheel on the Refresh button while it is talking to
   BotBee. Grey like the chrome: this is waiting, not a status. */
.spinner{
  display:inline-block;width:11px;height:11px;margin-right:6px;
  vertical-align:-1px;border:2px solid var(--line);
  border-top-color:var(--muted);border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){
  .spinner{animation-duration:2.4s;}
}

/* ============================================================
   THE ORDER SCREEN
   Two columns on a laptop, one on anything narrower, and the line
   table becomes cards on a phone the way the order desk does.
   ============================================================ */
.ofwrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start;}
.ofmain{min-width:0;}
.ofside{min-width:0;}
.ofsticky{position:sticky;top:12px;}

.oflines table{table-layout:auto;}
.oflines input{width:100%;box-sizing:border-box;}
.oflines .ofnum{text-align:right;}
.oflines .ofnum input{text-align:right;}
.oflines th.ofnum{text-align:right;}
.ofprod{min-width:120px;}
.ofsays{display:block;margin-top:2px;}
.oflinetotal{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;}

.oftotals{margin:0;}
.oftotals > div{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:5px 0;border-bottom:1px solid var(--line-2);
}
.oftotals dt{color:var(--muted);font-size:13px;}
.oftotals dd{margin:0;font-variant-numeric:tabular-nums;text-align:right;}
.oftotals .ofgrand{border-bottom:2px solid var(--line);font-weight:700;font-size:16px;}
.oftotals .ofgrand dt{color:var(--ink);font-weight:700;font-size:14px;}
.oftotals .ofbalance dd{font-weight:700;}
.ofsmall{width:74px;display:inline-block;padding:4px 6px;font-size:13px;}

/* the lines as cards, on a phone */
.ofcards{display:none;}
.ofcard{
  border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-bottom:8px;
  background:#fff;
}
.ofcard-top{display:flex;align-items:center;gap:8px;}
.ofcard-top > b{flex:none;color:var(--muted);font-size:13px;}
.ofcard-top .ofprod{flex:1 1 auto;min-width:0;margin:0;min-height:44px;font-size:16px;}
.ofcard-top .btn-x{flex:none;min-width:44px;min-height:44px;font-size:22px;}
.ofcard .ofsays{margin:2px 0 0 22px;}
.ofcard-mid{display:grid;grid-template-columns:1fr 1.2fr 1fr 1.2fr;gap:8px;align-items:end;margin-top:6px;}
.ofcard-mid label{margin:0;min-width:0;}
.ofcard-mid input{margin:0;width:100%;min-height:44px;font-size:16px;text-align:right;}
.ofcard-mid .oflinetotal{text-align:right;font-size:14px;line-height:44px;}
.ofcard-mid .oflinetotal .sub{line-height:1.1;}
.ofmenu-row{min-height:44px;}

@media (max-width:1023px){
  .ofwrap{grid-template-columns:minmax(0,1fr);}
  .ofsticky{position:static;}
}
@media (max-width:639px){
  .oflines{display:none;}
  .ofcards{display:block;}
}

/* The product dropdown on the order screen. Keyboard first: the
   highlighted row is the one Enter takes. */
.ofmenu{
  position:absolute;z-index:80;background:#fff;border:1px solid var(--line);
  border-radius:9px;box-shadow:0 8px 24px rgba(20,24,32,.13);overflow:auto;max-height:260px;
}
.ofmenu-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:baseline;
  width:100%;text-align:left;background:none;border:0;font:inherit;cursor:pointer;
  padding:7px 10px;border-bottom:1px solid var(--line-2);
}
.ofmenu-row:last-child{border-bottom:0;}
.ofmenu-row.on{background:var(--paper);}
.ofmenu-code{font-weight:650;font-size:12.5px;}
.ofmenu-name{color:var(--ink-2);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ofmenu-meta{color:var(--muted);font-size:11.5px;white-space:nowrap;}
.oflines td.ofread{color:var(--muted);font-size:12.5px;}

/* ---------- ONE PAGE PER ORDER ----------
   The order form and the working half of the order (stage buttons, the
   ledger, print, history) are one screen now. The fieldset exists only so
   a role that may not edit gets every control disabled at once; it must
   not take part in the layout, hence display:contents. */
.ofall{display:contents;border:0;margin:0;padding:0;min-width:0;}
.ofops{margin:20px 0 0;}
.ofops-state{margin:0 2px 12px;}

/* The dots that open the quick-edit panel, now that the name itself is a
   plain link to the order.

   The cell is a flex row so a long name runs out of room rather than
   pushing the button off the end of the cell, where it can be seen but
   not clicked. */
.namecell{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%;}
.namecell .namelink{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.peek{
  background:none;border:1px solid var(--line);border-radius:6px;
  color:var(--ink-2);font-size:14px;line-height:1;letter-spacing:.06em;
  padding:2px 7px;min-height:0;cursor:pointer;flex:none;
}
.peek:hover{border-color:var(--chrome);color:var(--chrome);}

/* A value in the import that has nowhere to go yet. Colour means status,
   and this one is "stop": nothing imports while any row looks like this. */
.dtable tr.tone-red td{background:var(--s-red-bg);}

/* ---------- WHAT IS ON THE ORDER ----------
   The Products and Qty cells are one thing wearing two faces, and both
   open the same panel. The cells themselves never wrap and never change
   the height of a row, whatever is on the order. */
.prodcell{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:100%;
}
.prodcell-none{color:var(--muted);}
.prodpick{
  display:block;width:100%;text-align:left;background:none;border:0;padding:0;
  font:inherit;color:inherit;cursor:pointer;min-height:0;min-width:0;
}
.prodpick:hover .prodcell{color:var(--chrome);}
.newqty{font-variant-numeric:tabular-nums;}

/* above the quick-edit panel (75), which is where a phone opens it from */
.pp-veil{position:fixed;inset:0;z-index:76;background:transparent;}
.prodpanel{
  position:fixed;z-index:77;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:0 12px 32px rgba(16,24,40,.18);
  display:flex;flex-direction:column;max-height:min(88vh,720px);
}
.pp-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 12px;border-bottom:1px solid var(--line-2);font-size:13px;
}
.pp-x{
  background:none;border:0;font-size:20px;line-height:1;color:var(--ink-2);
  cursor:pointer;padding:0 4px;min-height:0;
}
.pp-error{
  margin:8px 12px 0;padding:7px 9px;border-radius:6px;font-size:12.5px;
  background:var(--s-red-bg);color:var(--s-red);
}
.pp-body{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;}
.pp-lines{padding:6px 12px;flex:1 0 auto;min-height:48px;}
.pp-empty{color:var(--muted);font-size:12.5px;padding:10px 0;}
.pp-line{
  display:grid;grid-template-columns:1fr 64px 84px 90px 24px;gap:8px;
  align-items:center;padding:4px 0;border-bottom:1px solid var(--line-2);
}
.pp-line:last-child{border-bottom:0;}
.pp-what{min-width:0;overflow:hidden;}
.pp-what b{display:block;font-size:12.5px;}
.pp-name{
  display:block;font-size:11.5px;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pp-line input{
  width:100%;min-height:0;padding:4px 6px;font-size:12.5px;
  text-align:right;border:1px solid var(--line);border-radius:5px;
}
/* the price changes rarely, so it asks for less attention than the count */
.pp-line .pp-price{color:var(--ink-2);background:#fbfcfe;}
.pp-total{text-align:right;font-size:12.5px;font-variant-numeric:tabular-nums;}
/* the delivery charge: a row of its own under the products, typed like a price, nought reads Free */
.pp-delivery{
  display:grid;grid-template-columns:1fr 64px 84px 90px 24px;gap:8px;
  align-items:center;padding:6px 12px;border-top:1px solid var(--line-2);
}
.pp-delivery input{
  width:100%;min-height:0;padding:4px 6px;font-size:12.5px;
  text-align:right;border:1px solid var(--line);border-radius:5px;color:var(--ink-2);background:#fbfcfe;
}
.pp-del-note{white-space:normal;}
/* a product's main picture, small, beside its code on Products & lists and the Stock list */
.pthumb{width:34px;height:34px;object-fit:cover;border-radius:6px;border:1px solid var(--line);vertical-align:middle;margin-right:8px;float:left;background:#f4f5f7;}
.pthumb-none{display:inline-block;}
/* the order screen's line discount: the box and its rupees-or-percent beside it */
#lineTable tr.ofmain td{border-bottom:0;}
#lineTable tr.ofdline td{padding-top:0;}
.ofdwrap{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.ofdwrap .ofdisc{width:72px !important;flex:none;}
.oflines select.ofdt,.pos-order .oflines td select.ofdt{width:auto !important;min-width:44px;flex:none;}
.pos-order .oflines td input[data-f="quantity"]{min-width:42px;}
.pos-order .oflines td input[data-f="unit_price"]{min-width:58px;}
.pos-order .oflines th,.pos-order .oflines td{padding-left:4px !important;padding-right:4px !important;}
.pos-order .ofprod{min-width:90px;}
.pos-order .ofdwrap .ofdisc{width:60px !important;}
.ofdnote{color:var(--s-green);}
/* a custom line: what to make, its processes, its picture */
.ofcust{display:grid;gap:6px;padding:8px 10px;margin:2px 0 6px;background:#f5f8fd;border:1px solid #dbe5f3;border-radius:8px}
.ofcust-h{display:flex;gap:6px;align-items:center}
.ofcust textarea{width:100%;min-height:52px;font-size:14px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;resize:vertical;margin:0;box-sizing:border-box}
.ofcust-steps{display:flex;gap:4px 12px;flex-wrap:wrap;align-items:center;font-size:13px}
.ofcust-steps label{display:inline-flex;gap:4px;align-items:center;margin:0}
.ofcust-steps input{width:16px;height:16px;margin:0}
.ofcust-pic{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ofcust-pic img{width:56px;height:56px;object-fit:cover;border-radius:6px;border:1px solid var(--line);display:block}
.ofcust-say{color:var(--muted)}
@media (max-width:700px){.ofcust textarea{font-size:16px}.ofcust-steps{font-size:14px}.ofcust-steps input{width:20px;height:20px}}
.ofdt{min-height:0;width:auto;padding:2px 4px;margin-left:3px;font-size:12px;border:1px solid var(--line);border-radius:5px;background:#fbfcfe;vertical-align:middle;}
.ofcard-mid label .ofdt{margin:4px 0 0;}
.ofpay dd input{max-width:9em;}
/* a line's discount: under the line, the discount (rupees or percent) and the actual price, linked */
.pp-dline{grid-column:1 / -1;display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:-2px 0 2px;font-size:11.5px;color:var(--muted);}
.pp-dline input{width:72px;flex:none;padding:3px 6px;}
.pp-dline select,.pp-odisc select{min-height:0;padding:2px 4px;font-size:12px;border:1px solid var(--line);border-radius:5px;background:#fbfcfe;}
.pp-dline select{width:auto;min-width:46px;flex:0 0 auto;}
.pp-odisc select{width:100%;}
.pp-sheet .pp-dline select{min-height:40px;font-size:16px;}
.pp-dnote{color:var(--s-green);}
.pp-od-note a{color:var(--muted);text-decoration:underline;}
.pp-od-note,.pp-payrow .pp-name{white-space:normal;}
.pp-od-total{color:var(--s-red);}
.pp-sheet .pp-dline input{min-height:40px;font-size:16px;width:84px;}
.pp-del-note a{color:var(--muted);text-decoration:underline;}
.pp-sheet .pp-delivery input{min-height:44px;font-size:16px;}
.pp-rm{
  background:none;border:0;color:var(--muted);font-size:16px;line-height:1;
  cursor:pointer;padding:0;min-height:0;
}
.pp-rm:hover{color:var(--s-red);}

.pp-add{position:relative;padding:8px 12px;border-top:1px solid var(--line-2);}
.pp-search{width:100%;min-height:0;padding:7px 9px;font-size:13px;}
.pp-menu{
  position:absolute;left:12px;right:12px;bottom:calc(100% - 4px);z-index:2;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 -8px 24px rgba(16,24,40,.14);max-height:min(300px,45vh);overflow:auto;
}
.pp-opt{
  display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:baseline;
  width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:7px 10px;font:inherit;min-height:0;
}
.pp-opt b{font-size:12.5px;}
.pp-opt span{
  font-size:12px;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pp-opt i{font-style:normal;font-size:12px;color:var(--muted);}
.pp-opt.on,.pp-opt:hover{background:#eef4fc;}
/* already on the order: shown at the end, marked, not offered */
.pp-opt.had{cursor:default;color:var(--muted);}
.pp-opt.had b{color:var(--muted);font-weight:500;}
.pp-opt.had:hover{background:none;}
/* whose order the panel is editing */
.pp-whose{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pp-whose .pp-order{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;}
.pp-whose .pp-order:hover{text-decoration-color:currentColor;}
.pp-who{color:var(--ink-2);}

.pp-foot{
  display:flex;align-items:baseline;gap:10px;padding:8px 12px;
  border-top:1px solid var(--line-2);font-size:12.5px;
}
.pp-units{color:var(--ink-2);}
.pp-value{font-weight:650;margin-left:auto;font-variant-numeric:tabular-nums;}
/* Payment Received is a person's figure. This says so and does nothing. */
.pp-diff{color:var(--muted);font-size:11.5px;flex-basis:100%;}

/* On a phone it is a sheet, not something floating over a table that
   is not there. */
@media (max-width:767px){
  .prodpanel.pp-sheet{
    left:0 !important;top:0 !important;width:100% !important;
    height:100%;max-height:100%;border-radius:0;border:0;
  }
  .prodpanel.pp-sheet .pp-x{min-width:44px;min-height:44px;font-size:26px;}
  .prodpanel.pp-sheet .pp-menu{max-height:50vh;}
  .prodpanel.pp-sheet .pp-opt{min-height:44px;align-items:center;}
  .pp-veil{background:rgba(16,24,40,.35);}
  .pp-line{grid-template-columns:1fr 52px 72px 70px 24px;}
}

/* ---------- THE ... MENU ON A ROW ---------- */
.qa-more{
  font-size:13px;font-weight:500;line-height:1;letter-spacing:.06em;color:var(--ink-2);
  background:var(--card);border:1px solid var(--line);cursor:pointer;
}
.qa-more:hover{border-color:var(--accent);color:var(--accent);}
.rowmenu{
  position:fixed;z-index:70;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:0 12px 32px rgba(16,24,40,.18);
  padding:4px;max-height:min(70vh,460px);overflow:auto;
}
.rowmenu-one{
  display:block;width:100%;text-align:left;background:none;border:0;
  padding:7px 10px;font:inherit;font-size:13px;color:var(--ink);
  border-radius:6px;cursor:pointer;min-height:0;text-decoration:none;
}
.rowmenu-one:hover{background:#eef4fc;}
.rowmenu-one.is-danger{color:var(--s-red);}
.rowmenu-one.is-go{background:var(--chrome);color:#fff;text-align:center;margin-top:4px;}
.rowmenu-head{
  padding:6px 10px;font-size:11.5px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;
}
.rowmenu-none{padding:8px 10px;font-size:12.5px;color:var(--muted);}
.rowmenu-add{padding:4px 6px;}
.rowmenu-add input{width:100%;min-height:0;padding:6px 8px;font-size:13px;}
.rowmenu-side{float:right;color:var(--ink-2);}

/* the gear that takes you to whatever governs this screen */
.gearlink{
  color:var(--muted);text-decoration:none;font-size:14px;line-height:1;
  padding:2px 4px;border-radius:5px;
}
.gearlink:hover{color:var(--chrome);background:#eef4fc;}

/* ---------- THE FILTERS POPOVER ----------
   The whole filter bar, behind one button. It opens under the button
   on a wide screen and rises as a sheet from the foot of a phone. */
.fpop{
  position:fixed;z-index:72;width:min(560px,calc(100vw - 16px));
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 12px 32px rgba(16,24,40,.18);
}
.fpop .filterbar{display:block;margin:0;padding:0;}
.fpop-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px 0 16px;font-size:14px;font-weight:500;
}
.fpop-grid{
  display:grid;gap:10px 12px;grid-template-columns:repeat(2,minmax(0,1fr));
  padding:8px 16px 4px;
}
.fb{display:flex;flex-direction:column;gap:3px;margin:0;min-width:0;}
.fb > span{font-size:11px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
.fb select,.fb input{min-height:36px;margin-top:0;padding:6px 8px;font-size:14px;}
.fb-wide{grid-column:1 / -1;}
.fb-wide select{min-height:0;padding:4px 6px;}
.fpop-foot{
  display:flex;gap:8px;align-items:center;padding:10px 16px 14px;
  border-top:1px solid var(--line-2);margin-top:8px;
}
@media (max-width:767px){
  .fpop{
    left:0 !important;right:0;top:auto !important;bottom:0;width:100%;
    max-height:88vh;overflow-y:auto;border-radius:var(--r) var(--r) 0 0;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .fpop-grid{grid-template-columns:1fr;}
  .fb select,.fb input{min-height:44px;}
  .fpop-foot .btn{min-height:44px;flex:1;}
}

/* what is on, and how to take it off: the third row, only when there is
   something to say */
.onnow{
  display:flex;flex-wrap:nowrap;align-items:center;gap:6px;
  height:32px;padding:0 14px;min-width:0;overflow-x:auto;scrollbar-width:none;
}
.onnow::-webkit-scrollbar{display:none;}
.onnow-lead{font-size:13px;color:var(--muted);white-space:nowrap;}
.onnow-chip{
  display:inline-flex;align-items:center;gap:5px;padding:0 9px;height:24px;
  border-radius:999px;background:var(--accent-bg);color:var(--accent);
  font-size:13px;text-decoration:none;border:1px solid transparent;white-space:nowrap;
}
.onnow-chip:hover{border-color:var(--accent);}
.onnow-chip b{font-weight:400;opacity:.7;}
.chip-view{border-style:dashed;}

@media (max-width:767px){
  .cardlist{padding-bottom:calc(56px + env(safe-area-inset-bottom));}
  .onnow{height:40px;}
  .onnow-chip{height:32px;}
}
.phone-only{display:none;}
@media (max-width:767px){
  .phone-only{display:inline-flex;}
  .wide-only{display:none !important;}
}

/* ---------- WHAT A NUMBER MEANS ----------
   Red: a customer is waiting, or stock is at nought.
   Amber: below minimum, or something will block soon.
   Green: in stock, complete, received.
   Blue: in progress, assigned, waiting on somebody.
   Grey: nothing needed.

   The colour goes on the number and on its pill, never on the whole
   row. A screen of coloured rows reads as noise and stops meaning
   anything. Where a stage already has a colour, use the stage's. */
.num-red{color:var(--s-red);}
.num-amber{color:var(--s-amber, #b45309);}
.num-green{color:var(--s-green, #15803d);}
.num-blue{color:var(--chrome);}
.num-grey{color:var(--muted);}
.num-red,.num-amber,.num-green,.num-blue,.num-grey{font-variant-numeric:tabular-nums;}

.pill{
  display:inline-block;padding:2px 9px;border-radius:999px;
  font-size:11.5px;font-weight:650;letter-spacing:.01em;white-space:nowrap;
}
.pill-red{background:var(--s-red-bg);color:var(--s-red);}
.pill-amber{background:var(--s-amber-bg, #fef3c7);color:var(--s-amber, #b45309);}
.pill-green{background:var(--s-green-bg, #dcfce7);color:var(--s-green, #15803d);}
.pill-blue{background:#eef4fc;color:var(--chrome);}
.pill-grey{background:#f1f3f7;color:var(--muted);}

/* ============================================================
   THE ORDER DESK, LAID OUT
   Ninety-six pixels of chrome above the orders: one toolbar of 56
   and one chip row of 40. A third row of 32 appears only while a
   filter is on. The table takes everything left and is the only
   thing on the screen that scrolls.

   One type scale, nothing outside it: 11px uppercase for column
   headings, 13px for chips and buttons, 14px for what is in the
   table, 20px for the title. Two weights, regular and medium. One
   colour scale: ink, ink-2, muted, line, and the accent.
   ============================================================ */

/* ---------- row 1: the toolbar ---------- */
.desk-bar{
  display:flex;align-items:center;gap:10px;
  height:56px;padding:0 14px;min-width:0;
}
.desk-bar .page-title{
  font-size:20px;font-weight:500;margin:0;letter-spacing:-.01em;
  white-space:nowrap;flex:none;
}
.desk-search{
  position:relative;flex:1;min-width:80px;display:flex;align-items:center;
}
.desk-search input[type=search]{
  flex:1;width:100%;margin:0;min-height:36px;padding:6px 96px 6px 12px;
  font-size:14px;border-radius:8px;border:1px solid var(--line);
}
.desk-search input[type=search]::-webkit-search-cancel-button{display:none;}
.sheet-count{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-size:13px;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums;pointer-events:none;
}
.desk-search.has-clear .sheet-count{right:40px;}
.desk-clear{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  color:var(--muted);text-decoration:none;font-size:18px;border-radius:6px;
}
.desk-clear:hover{color:var(--ink);background:var(--paper);}
.desk-tools{display:flex;align-items:center;gap:6px;flex:none;}
.desk-tools .btn{white-space:nowrap;}
.desk-tools .btn.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.desk-tools .count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  font-size:11px;font-weight:500;background:rgba(255,255,255,.22);color:#fff;
}

/* every button on the desk is the same size and weight */
body.sheet .btn-sm{min-height:36px;padding:0 12px;font-size:13px;font-weight:500;}
body.sheet .btn-ghost{color:var(--ink-2);border-color:var(--line);}
body.sheet .btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
body.sheet .badge{font-weight:500;font-size:11px;}
body.sheet .pill{font-weight:500;font-size:11px;}
body.sheet .peek{font-size:13px;font-weight:500;color:var(--ink-2);opacity:1;}
body.sheet .sortlink{font-weight:500;}
body.sheet .namelink{font-weight:500;}
body.sheet .orow-no{font-weight:500;}
body.sheet .empty{font-size:14px;}
body.sheet .newcell{font-size:14px;}
body.sheet .newcell-auto{font-size:13px;}
body.sheet .prodcell{font-size:14px;}

/* ---------- the two small menus and where they sit ---------- */
.dmenu{
  position:fixed;z-index:72;min-width:220px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 12px 32px rgba(16,24,40,.18);padding:6px;
}
.dmenu-head{
  padding:8px 10px 4px;font-size:11px;font-weight:500;color:var(--muted);
  text-transform:uppercase;letter-spacing:.07em;
}
.dmenu-one{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:0 10px;min-height:36px;border-radius:6px;
  background:none;border:0;font:inherit;font-size:13px;font-weight:400;color:var(--ink);
  text-align:left;text-decoration:none;cursor:pointer;margin:0;
}
.dmenu-one:hover{background:var(--paper);}
.dmenu-one input{margin:0;width:18px;height:18px;min-height:0;padding:0;accent-color:var(--accent);flex:none;}
@media (max-width:767px){
  .dmenu{
    left:8px !important;right:8px;top:auto !important;bottom:calc(66px + env(safe-area-inset-bottom));
    min-width:0;
  }
  .dmenu-one{min-height:44px;font-size:14px;}
}

/* ---------- the toolbar on a phone ----------
   Search, Filters with its badge, and + New. Everything else is in
   the ... menu. The title is already in the bar above. */
@media (max-width:767px){
  .desk-bar{padding:0 10px;gap:8px;}
  .desk-bar .page-title{display:none;}
  .desk-search input[type=search]{min-height:44px;font-size:16px;}
  body.sheet .btn-sm{min-height:44px;}
  .chiprow{height:52px;padding:0 10px;}
  .chip{height:44px;padding:0 14px;}
  .chip-sep{height:28px;}
  /* nothing on a phone is set under 13px, pills and numbers included */
  body.sheet .ocard .badge,body.sheet .ocard .pill{font-size:13px;padding:3px 10px;}
  body.sheet .ocard .orow-no{font-size:13px;}
}

/* ---------- the row height, remembered per person ----------
   Nothing in a cell may be taller than the row: the buttons in the
   actions column and beside the name are cut to fit 36, and 30. */
.dtable td.rowacts{padding:0 10px;}
.dtable td.rowacts .qa{width:28px;height:28px;font-size:13px;border-radius:6px;}
.dtable td .peek{padding:1px 7px;}
body.dense .dtable td.rowacts .qa{width:24px;height:24px;font-size:12px;}
body.dense .dtable td .peek{padding:0 6px;}
body.dense .chip{height:32px;}

/* ---------- IMPORT / EXPORT ----------
   One dialog, two halves side by side; one under the other on a
   phone. The same popover as Filters, only wider. */
.xpop{width:min(780px,calc(100vw - 16px));}
.xpop .fpop-head{padding:10px 8px 0 16px;}
.xpop-grid{display:grid;grid-template-columns:1fr 1fr;}
.xpop-half{padding:8px 16px 16px;min-width:0;}
.xpop-half + .xpop-half{border-left:1px solid var(--line-2);}
.xpop-title{font-size:14px;font-weight:500;margin:0 0 4px;}
.xpop-lead{font-size:13px;color:var(--ink-2);margin:0 0 10px;}
.xpop-choice label{
  display:flex;align-items:center;gap:8px;min-height:32px;margin:0;
  font-size:13px;font-weight:400;color:var(--ink);cursor:pointer;
}
.xpop-choice input{margin:0;width:18px;height:18px;min-height:0;padding:0;accent-color:var(--accent);flex:none;}
.xpop-choice b{font-weight:400;color:var(--ink-2);font-variant-numeric:tabular-nums;}
.xpop-choice label:has(input:disabled){color:var(--muted);cursor:not-allowed;}
.xpop-fmt{display:flex;gap:14px;align-items:center;margin:8px 0 12px;font-size:13px;}
.xpop-fmt > span{color:var(--ink-2);}
.xpop-fmt label{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:400;font-size:13px;}
.xpop-fmt input{margin:0;width:18px;height:18px;min-height:0;padding:0;accent-color:var(--accent);}
.xpop-links{
  display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:center;
  font-size:13px;color:var(--ink-2);
}
.xpop-links > div{display:flex;gap:6px;}
.xpop-note{
  font-size:12.5px;line-height:1.5;color:var(--ink-2);background:var(--paper);
  border-radius:8px;padding:8px 10px;margin:12px 0;
}
.xpop-note code{font-family:var(--mono);font-size:12px;color:var(--ink);}
.xpop-file{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0;}
.xpop-pick{position:relative;overflow:hidden;cursor:pointer;margin:0;}
.xpop-pick input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;}
.xpop-filename{font-size:13px;color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;}
@media (max-width:767px){
  .xpop-grid{grid-template-columns:1fr;}
  .xpop-half + .xpop-half{border-left:0;border-top:1px solid var(--line-2);}
  .xpop-choice label{min-height:44px;font-size:14px;}
  .xpop-file .btn{min-height:44px;}
}

/* ---------- nothing clickable is grey ----------
   Every control that used to sit in the muted grey reads as disabled
   next to the ones that are. Ink on paper for all of them; muted is
   for text that only says something. */
.dtable th{color:var(--ink-2);}
.panel-x,.panel-pin,.gearlink,.desk-clear,.viewlist .btn-x{color:var(--ink-2);}

/* ---------- THE SUMMARY ----------
   Few numbers, large. A card is a link: the whole face opens the desk
   showing exactly what it counted. The colour of a number is the
   colour of its stage or its status, and nothing else on the card is
   coloured. On a phone the cards stack, stage cards first. */
.sum-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.sum-head .link-muted{text-decoration:none;}
.sum-ranges{height:auto;padding:0 0 12px;margin:0 0 4px;}
.sum-row{display:grid;gap:14px;margin:0 0 18px;grid-template-columns:repeat(3,minmax(0,1fr));}
.sum-attn{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.sum-card{
  display:flex;flex-direction:column;gap:4px;min-width:0;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px 16px;text-decoration:none;color:var(--ink);
  border-top:4px solid var(--s-grey);
}
.sum-card:hover{border-color:var(--accent);border-top-color:inherit;}
.sum-label{font-size:13px;font-weight:500;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em;}
.sum-num{font-size:56px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--s-grey);}
.sum-big .sum-num{font-size:84px;}
.sum-amt{font-size:40px;}
.sum-foot{font-size:13px;color:var(--muted);}
.sum-foot b{color:var(--ink);font-weight:600;}
.sum-small{flex-direction:row;align-items:center;gap:14px;padding:12px 16px;}
.sum-small .sum-num{font-size:34px;flex:none;}
.sum-small .sum-label{text-transform:none;letter-spacing:0;font-size:14px;color:var(--ink);}
.sum-card.tone-grey{border-top-color:var(--s-grey);}   .sum-card.tone-grey .sum-num{color:var(--s-grey);}
.sum-card.tone-amber{border-top-color:var(--s-amber);} .sum-card.tone-amber .sum-num{color:var(--s-amber);}
.sum-card.tone-blue{border-top-color:var(--s-blue);}   .sum-card.tone-blue .sum-num{color:var(--s-blue);}
.sum-card.tone-teal{border-top-color:var(--s-teal);}   .sum-card.tone-teal .sum-num{color:var(--s-teal);}
.sum-card.tone-green{border-top-color:var(--s-green);} .sum-card.tone-green .sum-num{color:var(--s-green);}
.sum-card.tone-red{border-top-color:var(--s-red);}     .sum-card.tone-red .sum-num{color:var(--s-red);}
.sum-print .sum-units{font-weight:600;color:var(--s-blue);}
@media (max-width:767px){
  .sum-row{grid-template-columns:1fr;gap:10px;}
  .sum-big .sum-num{font-size:72px;}
  .sum-num{font-size:48px;}
  .sum-amt{font-size:36px;}
  .sum-ranges{overflow-x:auto;}
}

/* ---------- INVENTORY & STOCK ----------
   Total first, then by location, on every quantity. Colour sits on
   the number and its pill, never on the row. Every heading carries
   its hint beneath in small grey. */
.stock-tabs{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.stock-tabs .stock-gear{margin-left:auto;font-size:16px;}
.stock-cards{margin-top:14px;}
.stat{align-items:flex-start;}
.stat .stat-words{display:flex;flex-direction:column;gap:2px;min-width:0;}
.stat .sum-label{text-transform:none;letter-spacing:0;font-size:13px;color:var(--ink);}
.stock-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 14px;}
.stock-filters input[type=search],.stock-filters select,.stock-filters input[type=date]{margin:0;min-height:36px;font-size:13px;padding:4px 8px;}
.stock-filters input[type=search]{min-width:200px;}
.stock-filters .check{margin:0;font-size:13px;}
.stocktable th .hl{display:block;font-size:11px;font-weight:500;color:var(--ink-2);text-transform:uppercase;letter-spacing:.07em;}
.stocktable th .hh,.matform .hh,.transfer-form .hh,.countform .hh,label .hh{display:block;font-size:11px;font-weight:400;color:var(--muted);text-transform:none;letter-spacing:0;white-space:normal;max-width:220px;line-height:1.3;margin-top:2px;}
.stocktable th{white-space:normal;vertical-align:top;height:auto;padding:8px 12px;}
.stocktable td{vertical-align:top;padding-top:8px;padding-bottom:8px;}
.qb{display:inline-flex;flex-direction:column;align-items:flex-end;gap:1px;line-height:1.15;}
.qb-total{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);}
.qb-total small{font-size:11px;font-weight:400;color:var(--muted);}
.qb-by{font-size:11.5px;color:var(--muted);white-space:normal;max-width:220px;text-align:right;}
td .qb-by:not(.ofnum .qb-by){text-align:left;}
.red,.qb-total.red{color:var(--s-red);} .amber,.qb-total.amber{color:var(--s-amber);} .green,.qb-total.green{color:var(--s-green);}
.blue,.qb-total.blue{color:var(--s-blue);} .grey{color:var(--s-grey);}
.spill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap;}
.spill.red{background:var(--s-red-bg);color:var(--s-red);} .spill.amber{background:var(--s-amber-bg);color:var(--s-amber);}
.spill.green{background:var(--s-green-bg);color:var(--s-green);} .spill.blue{background:var(--s-blue-bg);color:var(--s-blue);}
.spill.grey{background:var(--s-grey-bg);color:var(--s-grey);}
.stocktable tr.dim td{opacity:.7;}
.btn-more.is-off{opacity:.55;cursor:not-allowed;border-style:dashed;}
.stock-empty{text-align:left;padding:26px 22px;font-size:14px;color:var(--ink-2);}
.stock-empty p{margin:0 0 8px;} .stock-empty p:first-child{font-weight:500;color:var(--ink);}
.units-live{background:var(--paper);border-radius:8px;padding:8px 10px;color:var(--ink-2);}
.matform .field-row label,.transfer-form .field-row label{min-width:0;}
.stock-strip .sum-num{font-size:30px;}
label.hint-open .hh{color:var(--ink);}
@media (max-width:767px){
  .stocktable th .hh{display:none;} .stocktable th .hl{cursor:pointer;}
  .qb-by{max-width:140px;}
  .stock-filters input[type=search]{min-width:0;flex:1 1 100%;}
}
/* Column headings keep to their label; the meaning is a tooltip and the
   "What these columns mean" block under the table, so the table stays a table. */
.stocktable th .hh{display:none;}
.stocktable th .hl{cursor:help;}
.stocktable th.acts{width:auto;}
.stocktable td.rowacts{line-height:1.4;padding-top:10px;vertical-align:top;}
.stocktable td.rowacts .btn-more{display:inline-block;margin-left:4px;}
.stock-filters select{width:auto;flex:0 1 auto;max-width:240px;}
.stock-filters input[type=search]{flex:1 1 200px;max-width:340px;}
.stock-filters .btn{flex:0 0 auto;}
.glossary{margin:10px 0 0;font-size:13px;color:var(--ink-2);}
.glossary summary{cursor:pointer;font-weight:500;color:var(--ink);}
.glossary dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:10px 0 0;}
.glossary dt{font-weight:500;color:var(--ink);text-transform:uppercase;font-size:11px;letter-spacing:.07em;padding-top:2px;}
.glossary dd{margin:0;}
.sio{max-height:calc(100vh - 16px);overflow:auto;}
/* On the stock tables the row actions are an ordinary last column: pinned to the right
   they slid over the Status column as soon as the locations made the table wide. */
.stocktable td.rowacts,.stocktable th.acts{position:static;box-shadow:none;}
.stocktable .qb-by{max-width:170px;}

/* ---------- Inventory: the compact strip, the filters, the row ---------- */
.stock-warn{
  margin:0 0 10px;padding:8px 12px;border-radius:8px;font-size:13px;
  background:var(--s-amber-bg);color:var(--s-amber);border:1px solid rgba(180,120,0,.18);
}
.stock-warn a{color:inherit;font-weight:600;}
.stock-strip{
  display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline;
  padding:8px 12px;margin:0 0 12px;background:#fff;border:1px solid var(--line);border-radius:10px;
}
.strip-item{display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--ink);min-height:0;}
.strip-item:hover .strip-label{text-decoration:underline;}
.strip-num{font-size:19px;font-weight:650;font-variant-numeric:tabular-nums;line-height:1.1;}
.strip-label{font-size:12.5px;color:var(--muted);white-space:nowrap;}
.strip-num.red{color:var(--s-red);} .strip-num.amber{color:var(--s-amber);} .strip-num.green{color:var(--s-green);} .strip-num.blue{color:var(--s-blue);}

/* every filter control on every Inventory page: one height, one look,
   and room on the right for the arrow so it never sits on the words */
.stock-filters{margin-bottom:10px;}
.stock-filters select,.stock-filters input[type=search],.stock-filters input[type=date],.stock-filters input[type=number]{
  margin:0;min-height:36px;height:36px;font-size:13px;padding:4px 10px;border-radius:8px;width:auto;
}
.stock-filters select{padding-right:34px;background-position:right 11px center;max-width:260px;}
.stock-filters input[type=search]{flex:1 1 200px;max-width:340px;}
.stock-filters .btn{min-height:36px;}

/* the serial, the tick and the minimum on a stock row */
.stocktable th.tickcol,.stocktable td.tickcol{width:28px;padding-right:0;}
.stocktable td.tickcol input,.stocktable th.tickcol input{width:16px;height:16px;margin:0;}
.stocktable .serialcol{width:56px;font-variant-numeric:tabular-nums;font-size:12.5px;white-space:nowrap;}
.stocktable tr.rowlink{cursor:pointer;}
.stocktable tr.rowlink:hover td{background:#f7f9fc;}
.mincell .notset{font-size:12.5px;color:var(--muted);text-decoration:underline dotted;}
.mincell a.notset:hover{color:var(--ink);}
.minform{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin-top:4px;}
.minform input[type=number]{margin:0;width:80px;min-height:30px;padding:3px 6px;font-size:13px;}
.stock-bulk{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 10px;padding:8px 12px;
  background:var(--chrome);color:#fff;border-radius:10px;font-size:13px;
}
.stock-bulk .stock-bulk-count{font-weight:600;}
.stock-bulk .stock-bulk-field{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:500;color:#fff;}
.stock-bulk input[type=number]{margin:0;min-height:32px;padding:4px 8px;font-size:13px;}
.stock-bulk .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4);}
.stock-bulk .btn-ghost:hover{background:rgba(255,255,255,.12);}

/* a dead control that explains itself */
.btn-more.is-off{cursor:help;}
.tipbox{
  display:inline-block;max-width:260px;margin-left:6px;padding:6px 9px;border-radius:8px;
  background:var(--ink);color:#fff;font-size:12px;line-height:1.35;white-space:normal;text-align:left;vertical-align:middle;
}
.product-meta{margin:-6px 0 10px;}
.glossary-open{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0;font-size:13px;}
.glossary-open dt{font-weight:600;color:var(--ink);} .glossary-open dd{margin:0;color:var(--ink-2);}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}

/* ---------- Settings: two panels ---------- */
.settings-purpose{margin:0 0 14px;font-size:14px;color:var(--ink-2);}
.sx{display:grid;grid-template-columns:236px minmax(0,1fr);gap:22px;align-items:start;}
.sx-nav{
  position:sticky;top:12px;align-self:start;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;
  max-height:calc(100vh - 24px);overflow:auto;
}
.sx-search{margin:0 0 8px;}
.sx-search input{margin:0;min-height:36px;padding:6px 10px;font-size:13.5px;border-radius:8px;}
.sx-cats{list-style:none;margin:0;padding:0;}
.sx-cats a{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  color:var(--ink);text-decoration:none;font-size:13.5px;font-weight:500;
}
.sx-cats a:hover{background:var(--paper);}
.sx-cats a.on{background:var(--chrome);color:#fff;}
.sx-cats .sx-ico{width:18px;text-align:center;font-size:14px;opacity:.85;}
.sx-main{min-width:0;}
.sx-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;}
.sx-list li{border-top:1px solid var(--line);}
.sx-list li:first-child{border-top:none;}
.sx-row{display:flex;align-items:center;gap:12px;padding:12px 14px;color:var(--ink);text-decoration:none;}
.sx-row:hover{background:#f7f9fc;}
.sx-row .sx-ico{width:20px;text-align:center;opacity:.8;}
.sx-row-words{flex:1;min-width:0;}
.sx-row-label{font-weight:600;font-size:14px;}
.sx-row-blurb{font-size:12.5px;color:var(--muted);margin-top:1px;}
.sx-row-cat{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);white-space:nowrap;}
.sx-row.soon{color:var(--muted);cursor:default;}
.sx-row.soon .sx-row-label{font-weight:500;}
.sx-row .sx-arrow{color:var(--line);font-size:16px;}
.sx-none{padding:18px 14px;color:var(--muted);font-size:13.5px;}
.sx-hit{background:#fff3b0;border-radius:3px;padding:0 1px;}
.sx-mobile-back{display:none;}
@media (max-width:767px){
  .sx{display:block;}
  .sx-nav{position:static;max-height:none;margin-bottom:12px;}
  /* one panel at a time: the list, or the page with a back arrow */
  body.sx-page .sx-nav{display:none;}
  body.sx-page .sx-mobile-back{display:inline-flex;}
  body.sx-hub .sx-main{display:none;}
  body.sx-hub.sx-searching .sx-main{display:block;}
}
.sx-row-label,.sx-row-blurb{display:block;}
/* the Inventory pages start their table within the first third of the screen */
body.stockpage .viewbar.stock-tabs{margin-bottom:8px;}
body.stockpage .stock-warn{padding:5px 12px;margin-bottom:8px;font-size:12.5px;}
body.stockpage .stock-strip{padding:6px 12px;margin-bottom:8px;}
.stock-toolbar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:0 0 8px;}
.stock-toolbar .stock-filters{margin:0;}
.stock-toolbar form.stock-filters{flex:1 1 auto;}
.stock-toolbar .stock-tools{flex:0 0 auto;margin-left:auto;}
body.stockpage .stocktable th{padding:6px 12px;}
body.stockpage .stocktable .qb-by{max-width:230px;}
/* one line of tools above the table, whatever the width allows */
body.stockpage .viewbar.stock-tabs{padding:3px;}
body.stockpage .viewbar.stock-tabs a{padding:7px 12px;}
.stock-toolbar form.stock-filters{flex:1 1 0;min-width:0;}
.stock-toolbar .stock-filters select{max-width:180px;}
.stock-toolbar .stock-filters input[type=search]{flex:1 1 140px;min-width:120px;max-width:240px;}
.stock-toolbar .stock-filters .check{white-space:nowrap;}
/* the filter form keeps room for its controls; the tools drop to a second line when the width is short */
.stock-toolbar form.stock-filters{flex:1 1 400px;}
/* the by-location line has room to read as one or two lines, not four */
.stocktable td.physcol .qb-by:not(:empty){min-width:130px;}
/* the product column gives way before the actions fall off the right */
body.stockpage .stocktable th,body.stockpage .stocktable td{padding-left:9px;padding-right:9px;}
.stocktable td.stk-name{min-width:190px;max-width:280px;white-space:normal;}
.stocktable td.stk-name .muted.small{white-space:normal;}
body.stockpage .stocktable td.rowacts .btn-more{padding:4px 8px;margin-left:3px;}


/* ---------- Settings: Production ---------- */
.route-list{list-style:none;margin:0 0 8px;padding:0;counter-reset:step;}
.route-list li{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;margin-bottom:6px;background:#fff;
  counter-increment:step;
}
.route-list li::before{content:counter(step);width:20px;height:20px;border-radius:50%;background:var(--chrome);color:#fff;font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;flex:none;}
.route-list .route-name{font-weight:600;flex:1;}
.route-list .route-btns{display:flex;gap:2px;}
.route-list .btn-x{min-height:0;padding:2px 6px;}
.route-add{display:flex;flex-wrap:wrap;gap:6px;}
.route-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0 12px;}
.route-pick.products{margin-top:6px;}
.recipe-table td{padding:4px 6px;}
.recipe-table select,.recipe-table input{margin:0;min-height:34px;padding:4px 8px;font-size:13px;}
.rule-example{margin-top:14px;background:var(--paper);border-radius:8px;padding:10px 12px;}
.rule-example ol{margin:6px 0 0;padding-left:20px;font-size:13px;}
.rule-example li{margin-bottom:3px;} .rule-example li:last-child{font-weight:600;}


/* ---------- Production: the board ---------- */
.need-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.need{background:#fff;border:1px solid var(--line);border-radius:10px;margin:0 0 8px;padding:10px 14px;}
.need-main{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.need-what{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:2px;}
.need-what .namelink{font-size:15px;}
.need-nums{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;}
.nn{display:inline-flex;flex-direction:column;align-items:flex-end;min-width:52px;}
.nn b{font-size:18px;font-variant-numeric:tabular-nums;line-height:1.1;}
.nn small{font-size:11px;color:var(--muted);white-space:nowrap;}
.nn-sug b{color:var(--chrome);}
.need-act{flex:0 0 auto;}
.need-mat{margin-top:8px;padding:6px 10px;border-radius:8px;background:var(--s-amber-bg);color:var(--s-amber);font-size:12.5px;display:flex;flex-wrap:wrap;gap:4px 10px;}
.need-mat a{color:inherit;font-weight:600;}
.need-form{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;}
.need-form label{margin:0;font-size:12.5px;}
.need-form input,.need-form select{margin-top:4px;min-height:36px;padding:6px 10px;font-size:14px;width:auto;min-width:120px;}
.need-form-btns{display:flex;gap:6px;}
.need-fold{margin:14px 0;}
.need-fold summary{cursor:pointer;font-weight:600;font-size:13.5px;padding:8px 0;}

/* jobs */
.progline{font-size:12px;color:var(--muted);white-space:nowrap;}
.prog.done{color:var(--s-green);font-weight:600;} .prog.now{color:var(--s-blue);font-weight:600;} .prog.ready{color:var(--ink);} .prog.skipped{color:var(--s-grey);text-decoration:line-through;}
.prog-dot{margin:0 5px;color:var(--line);}
.progbar{display:flex;gap:2px;margin-top:4px;height:5px;max-width:260px;}
.progseg{flex:1;background:#e9ecf1;border-radius:3px;overflow:hidden;}
.progseg > span{display:block;height:100%;background:var(--s-blue);}
.progseg.done > span{background:var(--s-green);} .progseg.skipped > span{background:var(--s-grey);}
.jobstable td{vertical-align:middle;}
.inline-report{display:inline-flex;gap:4px;align-items:center;margin:0 4px 4px 0;}
.inline-report input[type=number],.inline-report input[type=text],.inline-report select{margin:0;min-height:30px;padding:3px 6px;font-size:13px;width:auto;}
.inline-report input[type=number]{width:74px;} .inline-report input[type=text]{width:160px;}
.inline-report label{display:flex;align-items:center;gap:6px;margin:0;font-size:12.5px;font-weight:500;}
.job-action-row{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;}
.job-history li{margin-bottom:6px;font-size:13px;}
.stepacts{white-space:normal !important;}
.btn.red{color:var(--s-red);}

/* performance */
.perf-range{align-items:center;}
.perf-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.perf-export{margin-left:auto;display:inline-flex;gap:4px;}
.perf-teams td.b{font-weight:600;}

/* alerts */
.alerts{list-style:none;margin:0 0 16px;padding:0;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.alert a{display:flex;flex-direction:column;gap:2px;padding:10px 14px;color:var(--ink);text-decoration:none;border-top:1px solid var(--line);}
.alert:first-child a{border-top:none;}
.alert a:hover{background:#f7f9fc;}
.alert.unread .alert-text{font-weight:600;}
.alert.unread a{border-left:3px solid var(--s-blue);}

/* ---------- My work: a phone screen ---------- */
body.mywork .wrap{max-width:720px;}
.mw-h{font-size:15px;font-weight:650;margin:16px 0 8px;}
.mw-h .muted{font-weight:400;font-size:13px;}
.mw-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 10px;}
.mw-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.mw-product{font-size:15px;font-weight:600;flex:1 1 auto;}
.mw-qty{font-size:40px;font-weight:700;line-height:1.05;margin:6px 0 2px;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.mw-qty small{font-size:14px;font-weight:500;color:var(--muted);margin-left:6px;letter-spacing:0;}
.mw-step{font-size:13.5px;color:var(--ink-2);margin-bottom:10px;}
.mw-btns{display:flex;flex-wrap:wrap;gap:8px;}
.mw-form{display:contents;}
.mw-btn{min-height:44px;min-width:44px;padding:10px 16px;font-size:15px;flex:1 1 auto;}
.mw-btn-wide{width:100%;}
.mw-done{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);}
.mw-qty-label{font-size:14px;}
.mw-qty-input{font-size:28px;font-weight:600;min-height:56px;text-align:center;}
.mw-done-list{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--line);border-radius:12px;}
.mw-done-list li{padding:10px 14px;border-top:1px solid var(--line);font-size:14px;}
.mw-done-list li:first-child{border-top:none;}
.mw-finish .mw-title{margin:0;font-size:18px;}
@media (max-width:480px){
  .mw-btn{flex:1 1 44%;}
  .mw-qty{font-size:44px;}
}

/* the bell */
.bell{position:relative;color:rgba(255,255,255,.75);text-decoration:none;font-size:18px;line-height:1;padding:6px 22px 6px 8px;margin-right:2px;display:inline-flex;align-items:center;overflow:hidden;}
.bell:hover{color:#fff;}
.bell b{position:absolute;top:0;right:2px;background:var(--s-red);color:#fff;font-size:13px;font-weight:700;border-radius:999px;padding:0 5px;line-height:1.3;}
.stepacts .inline-report select{max-width:120px;} .stocktable td.stepacts{min-width:240px;}

/* ---------- Leads ---------- */
.syncpop{width:min(620px,calc(100vw - 16px));}
.sync-body{padding:8px 16px 14px;}
.sync-status p{margin:0 0 8px;}
.sync-progress{margin:8px 0;}
.sync-bar{height:6px;background:#e9ecf1;border-radius:3px;overflow:hidden;margin-bottom:6px;}
.sync-bar > span{display:block;height:100%;width:2%;background:var(--s-blue);transition:width .3s ease;}
.sync-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px 14px;margin:8px 0;}
.sync-row{display:flex;align-items:baseline;gap:10px;font-size:13.5px;}
.sync-row b{font-size:22px;min-width:40px;text-align:right;font-variant-numeric:tabular-nums;}
.sync-errors{max-height:160px;overflow:auto;background:var(--paper);border-radius:8px;padding:8px 10px;margin:8px 0;}
.sync-errors ul{margin:4px 0 0;padding-left:18px;}
.sync-actions{display:flex;flex-direction:column;gap:8px;margin:10px 0;}
.sync-actions .btn-stack{display:flex;gap:8px;flex-wrap:wrap;}
.sync-log td{vertical-align:top;}
.sync-errs{margin:4px 0 0;padding-left:16px;}
.sum-leads{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.sum-leads .sum-num{font-size:56px;}
.lead-form .ofside label{display:block;margin-bottom:10px;}
.lead-danger .inline-report input{min-width:120px;}
.lead-delete{margin-top:4px;}
.lead-history li b{font-weight:500;}
body.leadpage .wrap{max-width:1100px;}
.ofmain-wide{margin-top:16px;}

/* a heading that is also the number box: New order, New lead */
.page-title.no-head{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;}
.page-title.no-head label{font:inherit;margin:0;cursor:text;}
.page-title .no-edit{
  font:inherit;font-weight:inherit;color:inherit;line-height:1.1;
  width:auto;min-height:0;margin:0;padding:0 4px;
  border:none;border-bottom:2px dashed var(--line);border-radius:0;background:transparent;
  font-variant-numeric:tabular-nums;
}
.page-title .no-edit:focus{outline:none;border-bottom-color:var(--accent);background:var(--accent-bg);}
.page-title.no-head .muted{font-weight:400;}

/* the BotBee webhook screens */
.hookseen{display:flex;flex-wrap:wrap;gap:6px;}
.hookseen .chip{cursor:pointer;}
.hooklog td{vertical-align:top;}
.hooklog tr.hook-review td{background:var(--s-amber-bg, #fff8e6);}
.hookraw{margin-top:4px;} .hookraw summary{cursor:pointer;color:var(--muted);}
.hookraw pre{white-space:pre-wrap;word-break:break-all;max-height:240px;overflow:auto;margin:6px 0;}

/* ---------- a settings row that is a block, not a table row ----------
   Every input gets the width it needs; nothing is cut off mid-word. */
.setblock{position:relative;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:0 0 10px;background:#fff;}
.setblock-slim{padding:10px 12px;}
.setblock-new{border-style:dashed;}
.setblock .field-row{gap:10px 14px;}
.setblock label{margin-bottom:8px;min-width:0;}
.setblock label:last-child{margin-bottom:0;}
.setblock-x{position:absolute;top:8px;right:8px;z-index:1;}
.setblock-line{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:4px;}
.setblock-line label{margin:0;min-height:0;}
.setblock-line label.check{gap:6px;}
.setblock-line select{margin:0;min-height:36px;width:auto;min-width:150px;}
.setblock-line .btn{margin-left:auto;}
.urlbox{display:flex;gap:6px;align-items:center;}
.urlbox textarea{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;background:var(--paper);resize:none;word-break:break-all;line-height:1.4;padding:8px 10px;min-height:0;height:3.6em;}
.setblock-save{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;}
.inline-short{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:13.5px;font-weight:400;}
.inline-short input{width:72px;margin:0;min-height:34px;padding:4px 8px;text-align:center;}
.recipe-lines .field-row{grid-template-columns:120px minmax(0,1fr);}
.recipe-line label{margin-bottom:6px;}
@media (max-width:640px){
  .setblock .field-row{grid-template-columns:1fr;}
  .setblock-line .btn{margin-left:0;}
}

/* ---------- OUTGOING TRIGGERS AND THE SEND DIALOG ---------- */
.msgdlg-wrap{position:fixed;inset:0;z-index:80;background:rgba(10,16,28,.42);display:flex;align-items:center;justify-content:center;padding:16px;}
.msgdlg{background:#fff;border-radius:var(--r);box-shadow:0 18px 48px rgba(16,24,40,.28);width:min(560px,100%);max-height:min(90vh,720px);display:flex;flex-direction:column;}
.msgdlg-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);font-size:15px;}
.msgdlg-body{padding:14px 16px;overflow:auto;flex:1 1 auto;}
.msgdlg-foot{display:flex;gap:8px;justify-content:flex-end;padding:10px 16px;border-top:1px solid var(--line);}
.msgdlg-rule{display:block;width:100%;text-align:left;background:none;border:1px solid var(--line);border-radius:8px;padding:9px 12px;margin-bottom:6px;font:inherit;cursor:pointer;min-height:0;}
.msgdlg-rule:hover{background:#eef4fc;}
.msgdlg-rule b{display:block;font-size:14px;}
.msgdlg-rule span{display:block;margin-top:2px;}
.msgdlg-text{width:100%;font:inherit;font-size:14px;line-height:1.45;padding:10px 12px;min-height:0;}
.msgdlg-rulename{margin-bottom:2px;}
.msg-rule.is-off{opacity:.72;}
.msg-rule-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap;margin-bottom:6px;}
.msg-rule-top .badge{margin-left:4px;}
.msg-rule-btns{display:flex;gap:4px;flex-wrap:wrap;}
.msg-rule-btns form{margin:0;}
.msg-acts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px 16px;}
.msg-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start;}
.msg-preview{white-space:pre-wrap;word-break:break-word;background:var(--paper);border:1px dashed var(--line);border-radius:8px;padding:10px 12px;font:inherit;font-size:14px;line-height:1.45;min-height:120px;margin:0;}
.msg-preview-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px;font-weight:600;margin-bottom:6px;}
.msg-preview-head input{width:140px;min-height:0;padding:4px 8px;font-size:12.5px;margin:0;}
.msg-lang textarea{font-size:14px;line-height:1.45;}
.chip-sm{font-size:11.5px;padding:2px 8px;min-height:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.msg-draft .msg-text{width:100%;font:inherit;font-size:14px;line-height:1.45;padding:10px 12px;min-height:0;}
.msg-draft.is-off{border-style:dashed;}
.msglog td{vertical-align:top;}
@media (max-width:720px){.msg-two{grid-template-columns:1fr;}}

/* ---------- BULK PRICING ---------- */
.pricing-row{grid-template-columns:repeat(4,minmax(0,1fr)) auto;align-items:end;}
.pricing-weight{white-space:nowrap;margin-bottom:10px;}
@media (max-width:760px){.pricing-row{grid-template-columns:1fr 1fr;}}
.pp-bulk{display:block;width:100%;font-size:12px;color:var(--muted);margin-top:4px;}

/* ---------- THE PRICE IN FULL, UNDER THE LINES ---------- */
.ofquote{margin-top:14px;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:var(--paper);}
.ofquote-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;}
.pq-row{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:14px;font-variant-numeric:tabular-nums;}
.pq-row span{min-width:0;}
.pq-row b{white-space:nowrap;}
.pq-row.is-sub{border-top:1px solid var(--line);margin-top:4px;padding-top:8px;}
.pq-row.is-off b{color:var(--s-red);}
.pq-row.is-grand{border-top:1px solid var(--line);margin-top:4px;padding-top:8px;font-size:16px;}
.pq-btns{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin-top:8px;}
/* the popover's foot is the price in full */
.pp-foot{display:block;}
.pp-foot .pq-row{font-size:12.5px;padding:3px 0;}
.pp-foot .pq-row.is-grand{font-size:14px;}
.pp-foot .pp-diff{display:block;margin-top:4px;}
/* the totals panel: the discount box, its unit and the figure on one line */
.oftotals > div{flex-wrap:nowrap;}
.oftotals dd{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:nowrap;}
.oftotals dd .ofsmall{width:64px;}
.oftotals dd select.ofsmall{width:58px;padding-right:2px;}
.oftotals dd #tDiscount{white-space:nowrap;}
.ofsend{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:10px;}
.ofsend .muted{margin-right:auto;}
.ofquote-head .btn-stack{display:flex;flex-direction:row;gap:6px;margin:0;}
.oftotals dd input.ofsmall:only-child{width:104px;}
.ofsend .muted{flex-basis:100%;margin:0;}
.ofsend + #bulkHint{margin-top:8px;}
.pp-foot{flex:0 0 auto;}
.pp-foot .pq-row{font-size:13px;}

/* ---------- ONE SAVE ---------- */
.ofsave-state{font-size:12.5px;color:var(--muted);margin:0 0 8px;min-height:1.2em;}
.ofsave-state.bad{color:var(--s-red);}
.ofsavebar{display:none;}
.ofreverse{display:inline-flex;gap:4px;align-items:center;}
@media (max-width:1023px){
  .ofsavebar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:56;gap:10px;align-items:center;justify-content:space-between;
    background:#fff;border-top:1px solid var(--line);padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 20px rgba(10,16,28,.12);
  }
  .ofsavebar .ofsave-state{margin:0;}
  .ofops{padding-bottom:72px;}
}
@media (min-width:900px) and (max-width:1023px){.ofsavebar{left:var(--side);} body.side-icons .ofsavebar{left:64px;} body.side-hidden .ofsavebar{left:0;}}

/* ---------- ACCOUNTS ---------- */
.acc-hero{text-align:center;padding:22px 16px 18px;}
.acc-hero-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.acc-hero-num{font-size:44px;line-height:1.1;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin:4px 0 6px;}
.acc-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin-bottom:14px;}
.acc-card{margin:0;}
.acc-card-name{font-weight:650;font-size:14px;}
.acc-card-num{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;margin:4px 0 2px;}
.acc-month .sum-card{padding:12px 14px;}
.acc-month .sum-num{font-size:22px;}
.sum-card.tone-green{border-top-color:var(--s-green,#15803d);} .sum-card.tone-green .sum-num{color:var(--s-green,#15803d);}
.sum-card.tone-red{border-top-color:var(--s-red);} .sum-card.tone-red .sum-num{color:var(--s-red);}
.acc-list{list-style:none;margin:0;padding:0;}
.acc-list li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-2);}
.acc-list li:last-child{border-bottom:0;}
.acc-list-main{display:flex;flex-direction:column;min-width:0;}
.acc-list-main b{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;}
.acc-list-side{display:flex;flex-direction:column;align-items:flex-end;flex:none;font-variant-numeric:tabular-nums;}
.acc-filter{display:flex;gap:10px;align-items:end;flex-wrap:wrap;}
.acc-filter label{margin:0;flex:1 1 140px;}
.acc-filter .btn{margin-bottom:2px;}
@media (max-width:760px){.acc-month{grid-template-columns:1fr;} .acc-hero-num{font-size:36px;}}
/* the account list */
.acc-lead{margin:-6px 2px 10px;display:flex;align-items:center;gap:6px;}
.info-tip{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--muted);font:600 11px/1 var(--mono, ui-monospace, monospace);cursor:pointer;padding:0;min-height:0;}
.info-tip:hover{color:var(--ink);border-color:var(--ink-2);}
.acc-table td{height:auto;padding-top:7px;padding-bottom:7px;white-space:normal;}
.acc-name{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;}
.acc-name-main{font-weight:600;font-size:14px;}
.acc-bal{font-weight:600;}
.acc-menucol{width:36px;text-align:right;}
.acc-table tfoot td{background:var(--paper);border-top:2px solid var(--line);font-weight:600;padding-top:10px;padding-bottom:10px;}
.acc-total-now{font-size:16px;font-weight:700;}
.acc-active{align-items:flex-start;}
.acc-active span{display:flex;flex-direction:column;gap:2px;}
.acc-active small{font-weight:400;font-size:12.5px;}
.acc-foot{align-items:center;}
.acc-foot .acc-foot-bal{flex:1;text-align:left;}
.acc-foot .btn{flex:0 0 auto;}

/* the open section's own pages, under it in the menu */
.sidenav-subs{display:flex;flex-direction:column;margin:-2px 0 6px;}
.sidenav-sub{
  display:block;padding:6px 12px 6px 46px;font-size:13px;color:rgba(255,255,255,.72);
  text-decoration:none;border-radius:7px;line-height:1.3;
}
.sidenav-sub:hover{color:#fff;background:rgba(255,255,255,.06);}
.sidenav-sub.on{color:#fff;background:rgba(255,255,255,.14);font-weight:600;}
body.side-icons .sidenav-subs{display:none;}
.sidenav-caret{flex:none;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;color:rgba(255,255,255,.6);font-size:12px;margin:-4px -6px -4px 0;}
.sidenav-caret:hover{background:rgba(255,255,255,.12);color:#fff;}
body.side-icons .sidenav-caret{display:none;}
.acc-form{max-width:640px;}
.acc-form textarea{min-height:72px;}
.acc-after{display:block;margin-top:4px;min-height:1.2em;}
.acc-form-foot{flex-direction:row;gap:8px;margin-top:6px;}
.acc-toolbar{display:flex;justify-content:flex-end;gap:8px;margin:-46px 0 10px;}
.acc-cols{max-width:420px;}
.acc-cols-list{list-style:none;margin:0 0 10px;padding:0;}
.acc-cols-list li{display:flex;align-items:center;gap:8px;padding:4px 6px;border:1px solid var(--line);border-radius:7px;margin-bottom:4px;background:#fff;cursor:grab;}
.acc-cols-list li .check{flex:1;font-size:13.5px;font-weight:500;min-height:0;}
.acc-cols-list .drag-handle{color:var(--muted);cursor:grab;}
.acc-cols-move button{background:none;border:1px solid var(--line);border-radius:5px;width:26px;height:26px;min-height:0;padding:0;cursor:pointer;color:var(--ink-2);margin-left:2px;}
.acc-files{display:flex;flex-direction:column;gap:6px;margin:-4px 0 10px;}
.acc-file{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--line);border-radius:7px;padding:6px 8px;}
.acc-file a{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);min-width:0;font-size:13px;}
.acc-file a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.acc-file img{width:44px;height:44px;object-fit:cover;border-radius:5px;flex:none;}
.acc-file-pdf{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:5px;background:var(--paper);font-size:11px;font-weight:700;color:var(--muted);flex:none;}
/* the accounts list: the top stays put, the rows edit where they sit */
/* the expenses list is laid out like the order desk: the band and the columns box stay put,
   the rows scroll in their own box under them, and the head of the table stays at the top of that box */
body.acclist .main{height:100vh;height:100dvh;overflow:hidden;}
body.acclist .wrap{display:flex;flex-direction:column;min-height:0;padding-bottom:14px;}
body.acclist .wrap > *{flex:none;}
body.acclist .wrap > .tablewrap{flex:1;min-height:0;overflow:auto;}
.acc-sticky{z-index:30;background:var(--paper,#f4f6f9);padding:0 0 8px;margin:0;}
.acc-sticky-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.acc-sticky-total{display:flex;align-items:baseline;gap:12px;}
.acc-sticky-total b{font-size:20px;font-variant-numeric:tabular-nums;}
.acc-sticky .chiprow{margin-bottom:6px;height:34px;}
.acc-sticky .acc-filter{padding:8px 12px;gap:8px;}
.acc-sticky .acc-filter label{font-size:12px;}
.acc-sticky .acc-filter input,.acc-sticky .acc-filter select{min-height:34px;padding:4px 8px;font-size:13px;}
/* the list scrolls with the page, so the head can stick under the band; a widened column makes the table wider */
.acc-table{width:auto;min-width:100%;}
.acc-table th{position:relative;overflow:hidden;text-overflow:ellipsis;}
.acc-table td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:420px;}
.acc-table thead th{box-shadow:0 1px 0 var(--line);}
.acc-table td.acc-cell-editing{max-width:none;overflow:visible;}
.acc-table .grip{position:absolute;top:0;right:0;width:8px;height:100%;cursor:col-resize;}
.acc-table .grip:hover{background:var(--accent);opacity:.4;}
body.resizing{cursor:col-resize;user-select:none;}
.acc-newrow td{background:#fbfcfe;padding:4px 6px;}
.acc-newrow td.acc-menucol{overflow:visible;}
.acc-newrow .newcell{width:100%;min-height:32px;padding:4px 8px;font-size:13px;box-sizing:border-box;border-color:var(--line);background:#fff;}
.acc-newrow select.newcell{padding-right:22px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236f7787' stroke-width='2'/></svg>");background-repeat:no-repeat;background-position:right 6px center;}
.acc-newrow .btn-sm{padding:4px 8px;min-height:30px;}
body.dense .acc-table td{height:26px;padding-top:2px;padding-bottom:2px;font-size:12.5px;}
body.dense .acc-newrow .newcell{min-height:26px;padding:2px 6px;font-size:12.5px;}
.acc-toolbar-inline{margin:0;}
.acc-move{display:inline-flex;gap:6px;align-items:center;}
.acc-move select{margin:0;min-height:0;padding:5px 26px 5px 8px;font-size:12.5px;max-width:190px;}
.acc-sticky form.acc-filter{margin-bottom:0;}
.acc-table thead th{position:sticky;top:0;background:var(--paper,#f4f6f9);z-index:2;}
.acc-sort{color:inherit;text-decoration:none;}
.acc-sort.on{color:var(--ink);font-weight:600;}
.acc-cell{cursor:text;}
.acc-cell:hover{background:#eef4fc;}
.acc-cell-edit{width:100%;min-height:0;padding:4px 6px;font-size:13px;box-sizing:border-box;}
.acc-table td.justsaved{background:var(--s-green-bg,#e6f4ea);}
.acc-open{color:var(--muted);text-decoration:none;font-variant-numeric:tabular-nums;}
.acc-open:hover,.acc-open:focus-visible{color:var(--ink);text-decoration:underline;}
.acc-filebtn{background:none;border:0;padding:0;font:inherit;cursor:pointer;color:var(--ink-2);min-height:0;}
.tickcol{width:28px;}
.acc-bulk .acc-bulk-pick{min-height:32px;padding:4px 8px;font-size:13px;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:7px;}
.acc-bulk .acc-bulk-pick option{color:var(--ink);}

/* ---- purchases: the wide panel, the GST switch, the lines, the totals ---- */
@media (min-width:640px){ .panel.panel-wide{width:760px;max-width:96%;} }
.acc-gst-row{display:flex;justify-content:flex-end;margin-bottom:8px;}
.acc-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff;}
.acc-seg label{margin:0;padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted);display:flex;align-items:center;gap:6px;}
.acc-seg label.on{background:var(--chrome);color:#fff;}
.acc-seg input{position:absolute;opacity:0;width:0;height:0;}
.acc-gst-strip{background:var(--s-blue-bg);color:var(--s-blue);padding:8px 12px;border-radius:8px;font-size:13px;margin-bottom:10px;}
.acc-nogst-strip{background:var(--s-grey-bg);color:var(--s-grey);padding:8px 12px;border-radius:8px;font-size:13px;margin-bottom:10px;}
.acc-lines-wrap{overflow-x:auto;margin:0 -4px;}
.acc-lines{width:100%;border-collapse:collapse;font-size:13px;}
.acc-lines th{text-align:left;font-size:11px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:4px 4px;white-space:nowrap;}
.acc-lines td{padding:2px 4px;vertical-align:middle;}
.acc-lines input,.acc-lines select{margin:0;min-height:34px;padding:4px 8px;font-size:13px;width:100%;box-sizing:border-box;}
.acc-lines input[data-qty]{width:62px;} .acc-lines input[data-rate]{width:88px;} .acc-lines input[data-units]{width:62px;} .acc-lines input[name$="[hsn]"]{width:64px;} .acc-lines .acc-desc-cell{min-width:128px;}
.acc-unit-words{display:block;font-size:11px;color:var(--muted);white-space:nowrap;} .acc-lines select{width:76px;padding-right:20px;background-position:right 6px center;}
.acc-lines.nogst .gstcol{display:none;}
.acc-line-amt{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink-2);min-width:88px;}
.acc-line-x{background:none;border:0;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding:4px 6px;min-height:0;}
.acc-line-x:hover{color:var(--s-red);}
.acc-totals{margin:12px 0 0 auto;max-width:320px;border-top:1px solid var(--line);padding-top:8px;}
.acc-totals > div{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-size:13px;}
.acc-totals b{font-variant-numeric:tabular-nums;}
.acc-totals .acc-totals-grand{border-top:1px solid var(--line);margin-top:4px;padding-top:8px;font-size:15px;}
.acc-purchase .section-title{margin:14px 0 6px;}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;}
/* the stock tick on a purchase line: its own narrow column, a small pill grey until ticked and green once the line is stock;
   the unit box appears under it only for a material not yet on the list */
.acc-lines .stockcol{width:1%;white-space:nowrap;text-align:center;vertical-align:top;}
.acc-stock-pick{margin:9px 0 0;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--s-grey-bg);color:var(--s-grey);padding:3px 8px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;user-select:none;line-height:1.3;}
.acc-stock-pick input{width:12px;height:12px;margin:0;min-height:0;accent-color:var(--s-green);}
.acc-stock-pick.on{background:var(--s-green-bg);color:var(--s-green);}
.acc-stock-unit{display:block;margin-top:4px;}
.acc-stock-unit input{width:78px;font-size:12px;padding:3px 6px;min-height:0;text-align:left;}
.acc-stock-check{margin-top:2px;}
/* the two doors "New material" offers */
.acc-how{display:flex;flex-direction:column;gap:10px;}
.acc-how-one,.acc-how-one:hover,.acc-how-one:focus{text-decoration:none;}
.acc-how-one{display:block;width:100%;box-sizing:border-box;padding:15px;border:1px solid var(--line);border-radius:var(--r);color:var(--ink);background:var(--card);cursor:pointer;}
.acc-how-one:hover,.acc-how-one:focus{border-color:var(--chrome);color:var(--ink);outline:none;}
.acc-how-one b{display:block;font-size:14px;margin-bottom:3px;}
.acc-how-one span{display:block;font-size:12.5px;font-weight:400;color:var(--muted);line-height:1.45;}
.acc-how-help{margin:12px 0 0;line-height:1.45;}
.acc-how-more{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);}
.acc-how-more a{text-decoration:none;color:var(--muted);}
.acc-how-more a:hover{color:var(--chrome);}
/* the small inline forms on Settings → Sales: a box and its button on one line */
.acc-inline-form{display:flex;gap:8px;align-items:center;margin:0;}
.acc-inline-form input[type="text"]{margin:0;flex:1;min-width:0;}

/* ---------- the Accounts dashboard ---------- */
.dash-periods{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.dash-span{margin-left:auto;}
.dash-arrange{margin-bottom:14px;}
.dash-warn{margin-bottom:10px;}
.dash-warn a{text-decoration:none;font-weight:500;}
.dash-sec{margin-bottom:6px;}
.dash-sec .acc-card{display:block;color:inherit;text-decoration:none;}
.dash-sec .acc-card:hover{border-color:var(--accent);}
.dash-flow .sum-label,.dash-owed .sum-label{line-height:1.3;}
.dash-owed .sum-card{text-decoration:none;color:inherit;}
.sum-card.tone-grey{border-top-color:var(--s-grey);} .sum-card.tone-grey .sum-num{color:var(--s-grey);}
.dash-chart{padding:12px 16px 6px;}
.dash-legend{display:flex;gap:14px;margin-bottom:6px;align-items:center;}
.dash-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px;}
.dash-svg{display:block;max-width:100%;height:auto;}
.dash-bars{display:flex;flex-direction:column;gap:6px;}
.dash-brow{display:grid;grid-template-columns:minmax(120px,1.2fr) 3fr minmax(110px,auto);gap:10px;align-items:center;color:inherit;text-decoration:none;padding:2px 0;}
.dash-brow:hover .dash-lbl{color:var(--accent);}
.dash-lbl{font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dash-track{height:10px;background:var(--line-2);border-radius:5px;overflow:hidden;}
.dash-fill{display:block;height:100%;background:var(--s-red);border-radius:5px;}
.dash-amt{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;font-size:13.5px;white-space:nowrap;}
.dash-foot{margin-top:10px;}
.dash-table th.r,.dash-table td.r{text-align:right;font-variant-numeric:tabular-nums;}
.dash-table th a{color:var(--muted);text-decoration:none;}
.dash-table th a.on{color:var(--ink);}
.dash-table td{position:relative;}
.dash-spark{display:block;height:3px;background:var(--s-green-bg,#dcfce7);border-radius:2px;margin-top:3px;}
.dash-table .pill{margin-left:6px;}
.dash-table td:first-child{white-space:normal;min-width:140px;}
.dash-table td:first-child .muted{white-space:nowrap;}
@media (max-width:600px){
  .dash-brow{grid-template-columns:1fr auto;}
  .dash-brow .dash-track{grid-column:1 / -1;}
  .dash-span{margin-left:0;width:100%;}
}
.dash-group{margin:0 0 8px;padding:10px 12px;}
.dash-group-cats{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:6px;}
.dash-group-cats .check{min-height:0;padding:3px 0;}

/* ---------- THE FILTER CONTROL (filter_pick, assets/filterpick.js) ----------
   One button that says what is chosen, a checklist under it. The same
   control on every list; the compact form sits in a column filter row. */
.fpick{position:relative;display:inline-block;max-width:100%;}
.fpick-btn{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;
  min-height:32px;padding:5px 9px;font:inherit;font-size:13px;font-weight:400;color:var(--ink);
  border:1px solid var(--line);border-radius:6px;background:var(--card);cursor:pointer;text-align:left;
}
.fpick-btn.on{border-color:var(--chrome);color:var(--chrome);font-weight:500;}
.fpick-words{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.fpick-caret{font-size:10px;opacity:.6;flex:none;}
.fpick-compact{display:block;}
.fpick-compact .fpick-btn{display:flex;width:100%;min-width:96px;}
.fpick-pop{
  position:fixed;z-index:80;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 12px 32px rgba(16,24,40,.18);
}
.fpick-find{margin:8px 8px 0;min-height:30px;font-size:13px;}
.fpick-list{overflow:auto;padding:6px 4px;flex:1 1 auto;}
.fpick-opt{
  display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;
  font-size:13px;cursor:pointer;min-height:32px;
}
.fpick-opt:hover{background:var(--paper);}
.fpick-opt input{margin:0;flex:none;}
.fpick-opt span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fpick-opt i{font-style:normal;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;}
.fpick-foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 8px;border-top:1px solid var(--line-2);
}
.fpick-clear{background:none;border:0;font:inherit;font-size:12.5px;color:var(--ink-2);cursor:pointer;padding:4px 6px;min-height:0;}
.fpick-clear:hover{color:var(--ink);text-decoration:underline;}
body.dense .frow .fpick-btn{min-height:26px;padding:2px 6px;font-size:12px;}
@media (max-width:767px){
  .fpick-pop{
    left:0 !important;right:0;top:auto !important;bottom:0;width:100% !important;
    max-height:70vh !important;border-radius:var(--r) var(--r) 0 0;border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .fpick-opt{min-height:44px;font-size:15px;}
  .fpick-find{min-height:40px;font-size:16px;}
}

/* the products panel: the note under a price, the save bar, the unsaved question */
.pp-pnote{grid-column:2 / -1;text-align:right;font-size:11.5px;color:var(--muted);margin-top:-2px;}
.pp-pnote a{color:var(--chrome);}
.pp-save{
  display:flex;align-items:center;justify-content:flex-end;gap:10px;
  padding:8px 12px;border-top:1px solid var(--line-2);background:var(--card);flex:none;
}
.pp-save .pp-submit{min-width:130px;}
.pp-ask{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;font-size:13px;
  background:var(--s-amber-bg,#fff7e6);border-top:1px solid var(--line-2);flex:none;
}
.pp-ask span{flex:1 1 auto;font-weight:600;}
@media (max-width:767px){
  .prodpanel.pp-sheet .pp-save{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));}
  .prodpanel.pp-sheet .pp-submit{min-height:44px;flex:1 1 auto;}
}

/* ============================================================
   THE ORDER SCREEN: A STRIP AND FOUR BLOCKS (order_form.php)
   A dark strip that never moves, then four blocks side by side,
   Customer 3 | Payment 3 | Dispatch 3 | The order 4, every one starting
   at the top; the tallest sets the page height and the page scrolls
   when it must. No block clips. Under 1260px of working width the
   blocks go two by two; on a phone, one column in the same order.

   ONE RAIL, ONE LABEL PER FIELD, NOTHING ABOVE A BOX: every label sits
   on the left of its field, right-aligned, on a rail of one width
   (--rail), the same in every block. Three boxes on one line (pincode,
   city, state) take the rail's word for the first and say what they are
   while empty. A required field carries a star. Blocks have no coloured
   edge: colour on this screen means status, in the pills.
   ============================================================ */
:root{--rail:96px;}
body.pos .wrap{max-width:none;padding:0 0 14px;display:flex;flex-direction:column;min-height:0;}
body.pos .page-head{display:none;}
.pos-form{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;}
.pos-form input[type=hidden]{display:none;}
.pos-strip{
  position:sticky;top:var(--topbar-h,46px);z-index:39;
  display:flex;align-items:center;gap:10px;flex-wrap:nowrap;min-height:50px;
  background:var(--chrome);color:#fff;padding:6px 16px;
}
.pos-back{color:#fff;opacity:.7;text-decoration:none;font-size:18px;line-height:1;padding:4px 6px 4px 0;}
.pos-back:hover{opacity:1;}
.pos-no{font-weight:700;font-size:16px;letter-spacing:.01em;white-space:nowrap;display:inline-flex;align-items:baseline;gap:4px;}
.pos-no small{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;opacity:.7;margin-left:4px;}
.pos-no .no-edit{
  display:inline-block;width:auto;margin:0;min-height:0;padding:2px 6px;font:inherit;font-weight:700;
  background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:6px;
}
.pos-who{font-size:14px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.pos-strip .badge{flex:none;}
.pos-sp{flex:1 1 auto;}
.pos-strip .ofsave-state{margin:0;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;font-size:12px;}
.pos-strip .ofsave-state.bad{color:#ffd0d0;}
.pos-strip .btn-primary{background:#fff;color:var(--chrome);border-color:#fff;font-weight:700;white-space:nowrap;}
.pos-strip .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35);background:none;white-space:nowrap;}
.pos-strip .pos-msg{display:flex;gap:6px;align-items:center;flex-wrap:nowrap;flex:none;}
@media (max-width:1499px){ .pos-strip .ofsave-state{display:none;} }
.pos-strip .pos-msg .btn{min-height:30px;padding:3px 10px;}
.pos-strip .pos-undo small{font-weight:500;opacity:.75;margin-left:4px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom;}
.pos-menu{position:relative;}
.pos-menu summary{list-style:none;cursor:pointer;display:inline-flex;}
.pos-menu summary::-webkit-details-marker{display:none;}
.pos-menu-list{
  position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:220px;
  display:flex;flex-direction:column;gap:2px;padding:6px;
  background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 32px rgba(16,24,40,.18);
}
.pos-menu-list a{padding:7px 10px;border-radius:6px;font-size:13px;color:var(--ink);text-decoration:none;}
.pos-menu-list a:hover{background:var(--paper);}
.pos-menu-list .muted{padding:4px 10px;}
.pos-callout{margin:10px 16px 0;}

.pos-grid{
  display:grid;grid-template-columns:minmax(0,3fr) minmax(0,3fr) minmax(0,3fr) minmax(0,4fr);
  gap:12px;padding:12px 16px 0;min-height:0;align-items:start;
}
.pos-block{
  min-width:0;min-height:0;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:10px 14px 12px;
  display:flex;flex-direction:column;gap:6px;
}
.pos-customer{grid-column:1;}
.pos-money{grid-column:2;}
.pos-disp{grid-column:3;}
.pos-order{grid-column:4;}
/* the block heading: the name in bold capitals, and a pill on the right that says the block's state */
.pos-h{
  margin:0 0 4px;display:flex;align-items:center;gap:8px;min-height:24px;
  font-size:12px;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.07em;
}
.pos-h .badge{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:600;font-size:11.5px;}
.pos-h .badge .pos-age{margin-left:4px;}
.pos-lbl{display:block;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:4px 0 2px;}

/* ---- the rail ---- */
.fr{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:0 10px;align-items:center;min-width:0;min-height:30px;}
.fr > label{
  margin:0;text-align:right;font-size:12px;font-weight:500;color:var(--ink-2);
  text-transform:none;letter-spacing:0;line-height:1.2;min-width:0;overflow-wrap:anywhere;
}
.fr > label .req{color:var(--s-red);font-weight:700;margin-left:2px;}
.fr > .fx{min-width:0;}
/* several boxes on one line: the first takes the rail's word, the rest say what they are while empty */
.fx-line{display:flex;align-items:center;gap:6px;min-width:0;}
.fx-line > *{min-width:0;}
.fx-line > input,.fx-line > select{flex:1 1 0;}
.fx-line > .pos-into,.fx-line > .small{flex:none;}
.fx-line > .btn{flex:none;}
.fx-line.end{justify-content:flex-end;}
.pos-block .w-s{width:92px;flex:0 0 92px;}
.pos-block .w-m{width:150px;flex:0 0 150px;}
.pos-into{white-space:nowrap;}
.pos-into b{color:var(--ink-2);font-weight:600;}
.pos-block input.mirror{color:var(--muted);background:var(--paper);}
.grp{border-top:1px solid var(--line-2);margin-top:4px;padding-top:6px;display:flex;flex-direction:column;gap:6px;}
.pos-age{font-weight:500;opacity:.75;margin-left:2px;}
.gl{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:0 0 2px;line-height:1.2;}
.pos-gl-btn{min-height:24px;padding:2px 10px;font-size:12px;text-transform:none;letter-spacing:0;}

/* the boxes: 30 pixels tall, close-set; a note is one line until it is focused */
.pos-block input[type=text],.pos-block input[type=email],.pos-block input[type=number],.pos-block input[type=date],
.pos-block input[type=datetime-local],.pos-block input[type=tel],.pos-block select,.pos-block textarea{
  margin:0;min-height:30px;padding:3px 9px;font-size:13px;font-weight:400;color:var(--ink);line-height:1.3;
  text-transform:none;letter-spacing:0;width:100%;
}
.pos-block input::placeholder,.pos-block textarea::placeholder{color:#a3a9b6;}
.pos-block textarea.pos-note{min-height:30px;height:30px;resize:none;overflow:hidden;transition:height .12s;}
.pos-block textarea.pos-note:focus{height:64px;overflow:auto;resize:vertical;}
.pos-block .panel-ro{margin:0;font-size:13px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink);min-height:30px;display:flex;align-items:center;flex-wrap:wrap;gap:6px;}
.pos-block .panel-ro.muted{color:var(--muted);font-weight:400;}
.pos-block label.check{margin:0;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--ink-2);text-transform:none;letter-spacing:0;min-height:30px;}
.pos-block label.check input{width:auto;margin:0;min-height:0;}
.pos-block .panel-note{margin:0;}
.pos-received{display:flex;gap:6px;align-items:center;}
.pos-received textarea{flex:1 1 auto;min-width:0;color:var(--muted);background:var(--paper);}
.pos-received .btn{flex:none;min-height:28px;padding:2px 9px;}
.pos-under{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px;}
.pos-under .age{font-size:11.5px;}
.pos-hint{font-size:12px;color:var(--ink-2);display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:2px 0 0 calc(var(--rail) + 10px);}
.pos-hint.ok{color:var(--s-green);}
.pos-hint.ok::before{content:"\2713";font-weight:700;}
.pos-msg{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.pos-fold summary{list-style:none;cursor:pointer;}
.pos-fold summary::-webkit-details-marker{display:none;}
.pos-fold summary .fx{font-size:12.5px;color:var(--ink-2);min-height:30px;display:flex;align-items:center;gap:6px;}
.pos-fold[open] summary .pos-caret{transform:rotate(180deg);}
.pos-caret{font-size:10px;color:var(--muted);display:inline-block;}
.pos-fold .tablewrap{margin:4px 0 0;}
.pos-table td,.pos-table th{padding:4px 6px;height:auto;font-size:12.5px;white-space:normal;}
.pos-table .badge{margin-left:4px;}
.pos-ledger tr.dim td{color:var(--muted);}
.pos-ledger{display:flex;flex-direction:column;gap:6px;}
.ofreverse .ofsmall{width:90px;}
.pos-statusmoney{display:flex;flex-direction:column;gap:6px;}

/* the order: the lines, then the money, then send; the receipt in full is folded at the foot */
.pos-order .pos-lines{display:flex;flex-direction:column;gap:6px;}
.pos-order .oflines{margin:0;overflow:visible;}
.pos-order .oflines th,.pos-order .oflines td{padding-left:6px;padding-right:6px;}
.pos-order .oflines th .req{color:var(--s-red);margin-left:2px;}
.pos-order .oflines td input,.pos-order .oflines td select{padding:4px 5px;font-size:12.5px;min-height:30px;margin:0;}
.pos-order .oflines th{font-size:10.5px;padding-top:4px;padding-bottom:4px;}
.pos-order .oflines td{padding-top:3px;padding-bottom:3px;height:auto;}
.pos-order .pos-addline{width:100%;justify-content:center;border-style:dashed;min-height:32px;}
.pos-order .pos-totals{border-top:1px solid var(--line);padding-top:8px;margin-top:6px;}
.pos-order .oftotals > div{padding:3px 0;}
.pos-order .oftotals dd .ofsmall{width:110px;flex:none;}
.pos-order .oftotals dd select.ofsmall{width:56px;}
.pos-order .oftotals .ofgrand{font-size:15px;border-top:1px solid var(--line);margin-top:4px;padding-top:8px;}
.pos-order .oftotals .ofgrand dd{font-size:19px;font-weight:700;}
.pos-order .oftotals .ofbalance dd{color:var(--s-red);font-weight:600;}
.pos-order .ofsend{margin-top:10px;border-top:1px solid var(--line-2);padding-top:10px;display:flex;align-items:center;gap:8px;}
.pos-order .ofsend .muted{margin-right:auto;}
.pos-order .ofquote{margin-top:6px;}
.pos-order .ofquote-body{padding:8px 0 2px;}

.pos-history-list{width:min(560px,calc(100vw - 32px));max-height:60vh;overflow:auto;padding:10px 14px;margin:0;}
.pos-history-list li{font-size:12.5px;}
.pos-count{font-weight:500;opacity:.7;margin-left:3px;}

/* the phone's foot bar: the total and the button, above the keyboard */
.pos-foot{display:none;}
.pos-foot-total{display:flex;flex-direction:column;line-height:1.1;}
.pos-foot-total small{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);}
.pos-foot-total b{font-size:17px;font-variant-numeric:tabular-nums;}

/* narrower: two by two, Customer and The order above, Payment and Dispatch below; the page scrolls */
@media (max-width:1499px){
  .pos-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .pos-customer{grid-column:1;grid-row:1;}
  .pos-order{grid-column:2;grid-row:1;}
  .pos-money{grid-column:1;grid-row:2;}
  .pos-disp{grid-column:2;grid-row:2;}
}
@media (max-width:767px){
  :root{--rail:84px;}
  .pos-strip{padding:6px 12px;gap:6px 8px;top:0;flex-wrap:wrap;}
  .pos-strip .pos-who{flex:1 1 100%;order:1;font-size:13px;}
  .pos-strip .pos-sp{display:none;}
  .pos-strip .btn,.pos-strip .ofsave-state,.pos-strip .pos-menu:not(.pos-history){display:none;}
  .pos-strip .pos-history summary,.pos-strip .pos-msg .btn{display:inline-flex;}
  /* the same order as the wide screen, read top to bottom: who, then the money, then the parcel, then the lines */
  .pos-grid{grid-template-columns:1fr;padding:10px 12px 0;}
  .pos-customer{grid-column:1;grid-row:1;}
  .pos-money{grid-column:1;grid-row:2;}
  .pos-disp{grid-column:1;grid-row:3;}
  .pos-order{grid-column:1;grid-row:4;}
  .pos-block input[type=text],.pos-block input[type=email],.pos-block input[type=number],.pos-block input[type=date],
  .pos-block input[type=datetime-local],.pos-block select{min-height:44px;font-size:16px;}
  .pos-block textarea.pos-note{min-height:44px;height:44px;font-size:16px;}
  .pos-block .w-s{width:96px;flex-basis:96px;}
  .pos-block .w-m{width:160px;flex-basis:160px;}
  .pos-callout{margin-left:12px;margin-right:12px;}
  /* the history list hangs from the strip itself, the width of the screen, instead of from its button (which sat mid-strip and pushed the list off the left edge) */
  .pos-strip .pos-history{position:static;}
  .pos-strip .pos-history-list{left:8px;right:8px;width:auto;top:calc(100% + 4px);max-height:70vh;}
  .pos-foot{display:flex;}
  body.pos .wrap{padding-bottom:calc(84px + env(safe-area-inset-bottom));}
}
@media (min-width:768px) and (max-width:1023px){
  .pos-foot{display:none;}   /* the strip's own button is enough once it fits */
}
.pos-block input.dmy.bad{border-color:var(--s-red);}
@media (max-width:639px){ .ofmenu{max-height:50vh;} .ofmenu-row{padding:8px 12px;} }

/* the Tracking group in Dispatch: single lines, quiet buttons, the scans folded */
.pos-tracking .panel-ro{background:none;padding:0;min-height:26px;font-size:12.5px;flex-wrap:nowrap;white-space:nowrap;overflow:hidden;gap:6px;}
.pos-tracking .panel-ro > span:first-child{overflow:hidden;text-overflow:ellipsis;min-width:0;}
.pos-tracking .btn-sm{min-height:26px;padding:2px 9px;font-size:12px;flex:none;}
.pos-tracking .pos-actline{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;min-height:26px;}
.pos-tracking .pos-actline .small{white-space:normal;}
.pos-tracking .callout{padding:4px 8px;}
.pos-tracking .fr{align-items:center;}
.pos-tracking .pos-err{color:var(--s-red);flex:1 1 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ============================================================
   THE WHATSAPP INBOX
   Two panels on one grid: the list, the chat. Styled the way the
   WhatsApp app itself looks, because that is what the people using it
   know: round letter avatars on soft colours, no dividers between rows,
   a green unread count, a wallpaper behind the thread, white bubbles for
   theirs and pale green for ours with a tail, the time inside the
   bubble, a pill for typing and a round green button to send. The
   greens are WhatsApp's and mean "WhatsApp", nothing else in the app
   uses them. On a phone the list is the screen and a chat replaces it
   (body.wa-open), with a back arrow and a menu behind the dots.
   ============================================================ */
.wa{
  --wa-green:#00a884; --wa-green-2:#25d366; --wa-out:#d9fdd3; --wa-tick:#53bdeb;
  --wa-wall:#efeae2; --wa-bar:#f0f2f5; --wa-ink:#111b21; --wa-ink-2:#667781; --wa-line:#e9edef;
}
body.wa-page .main{height:100vh;min-height:0;overflow:hidden;}
body.wa-page .wrap{max-width:none;padding:0;flex:1;min-height:0;display:flex;flex-direction:column;}
.wa{display:grid;grid-template-columns:340px minmax(0,1fr) 300px;grid-template-rows:minmax(0,1fr);flex:1;min-height:0;background:var(--card);color:var(--wa-ink);}
.wa-side{display:flex;flex-direction:column;min-height:0;overflow:hidden;border-left:1px solid var(--wa-line);background:#fff;}
.wa-side-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--wa-line);min-height:60px;}
.wa-side-head .btn{display:none;}
.wa-side-body{flex:1;overflow-y:auto;padding:6px 0 20px;}
.wa-sec{border-bottom:1px solid var(--wa-line);}
.wa-sec summary{list-style:none;cursor:pointer;padding:8px 12px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--wa-ink-2);font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:6px;}
.wa-grip{margin-left:auto;margin-right:4px;cursor:grab;color:#b9c0c6;font-size:12px;letter-spacing:-3px;}
.wa-sec.wa-dragging{opacity:.5;}
.wa-sec summary::-webkit-details-marker{display:none;}
.wa-sec summary::after{content:"\25BE";}
.wa-sec:not([open]) summary::after{content:"\25B8";}
.wa-sec-body{padding:0 12px 8px;font-size:13px;}
.wa-kv{display:grid;grid-template-columns:88px 1fr;gap:2px 8px;padding:3px 0;border-bottom:1px dashed var(--wa-line);line-height:1.35;align-items:baseline;}
.wa-kv:last-child{border-bottom:0;}
.wa-kv>span:first-child{color:var(--wa-ink-2);font-size:12px;}
.wa-kv select.sm{font-size:12.5px;padding:2px 4px;max-width:100%;}
.wa-kv-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px;}
.wa-acts{display:flex;flex-direction:column;gap:6px;}
.wa-acts .btn,.wa-acts a.btn{justify-content:center;}
.wa-tagpick{display:flex;flex-direction:column;gap:4px;}
.wa-tags-on,.wa-tags-off{display:flex;flex-wrap:wrap;gap:4px;}
.wa-tags-off{padding-top:6px;}
.wa-tagadd summary{list-style:none;cursor:pointer;font-size:12px;color:var(--wa-green);padding:2px 0;}
.wa-tagadd summary::-webkit-details-marker{display:none;}
.wa-tag-x{margin-left:2px;color:#6b8a6b;font-size:13px;}
.wa-tag{display:inline-flex;align-items:center;gap:3px;border:1px solid var(--wa-line);border-radius:12px;padding:2px 8px;font-size:12px;cursor:pointer;background:#fff;line-height:1.4;}
.wa-tag input{display:none;}
.wa-tag.on{background:#e7fce3;border-color:#a8d5a2;color:#0b4f2a;}
.wa-side textarea{width:100%;font-size:14px;}
.wa-side select.sm{font-size:13px;padding:4px 6px;}
.wa-info-btn{background:none;border:0;font-size:22px;color:var(--wa-ink-2);cursor:pointer;padding:4px 8px;border-radius:50%;line-height:1;}
.wa-info-btn:hover{background:#e2e6e8;}
@media (max-width:1199px){
  .wa{grid-template-columns:340px minmax(0,1fr);}
  .wa-side{display:none;}
  body.wa-info .wa-side{display:flex;position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:120;box-shadow:-8px 0 30px rgba(0,0,0,.2);}
  .wa-side-head .btn{display:inline-flex;}
}
@media (min-width:1200px){
  .wa-info-btn{display:none;}
}
.wa-list{display:flex;flex-direction:column;border-right:1px solid var(--wa-line);min-width:0;min-height:0;overflow:hidden;background:#fff;}
.wa-list-head{padding:12px 12px 6px;display:grid;gap:10px;}
.wa-title{font-size:22px;font-weight:700;display:flex;align-items:center;gap:8px;padding:0 4px;}
.wa-total,.nav-badge,.wa-unread{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#25d366;color:#fff;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;}
.sidenav-item .nav-badge{margin-left:auto;}
.nav-badge.co-badge{background:#dc2626;}
.tabbar .ico{position:relative;}
.tabbar .nav-badge{position:absolute;top:-4px;left:calc(50% + 6px);height:16px;min-width:16px;font-size:10px;padding:0 4px;}
.wa-search input{width:100%;border-radius:22px;background:var(--wa-bar);border-color:transparent;padding-left:16px;min-height:40px;}
.wa-search input:focus{background:#fff;border-color:var(--wa-green);box-shadow:none;}
.wa-filters{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;}
.wa-filters::-webkit-scrollbar{display:none;}
.wa-filters .chip{border-radius:16px;background:var(--wa-bar);border-color:transparent;color:var(--wa-ink-2);padding:6px 12px;white-space:nowrap;}
.wa-filters .chip.on{background:#e7fce3;border-color:transparent;color:#0b4f2a;font-weight:600;}
.wa-rows{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;}
.wa-row{display:flex;gap:14px;align-items:center;padding:10px 16px;text-decoration:none;color:var(--wa-ink);min-height:72px;border-bottom:1px solid #f5f6f6;}
.wa-row:hover{background:#f5f6f6;}
.wa-row.on{background:var(--wa-bar);}
.wa-row.unread .wa-row-name,.wa-row.unread .wa-row-preview{font-weight:700;color:var(--wa-ink);}
.wa-row.unread .wa-row-when{color:#25d366;font-weight:600;}
.wa-avatar{flex:0 0 49px;width:49px;height:49px;border-radius:50%;background:#dfe5e7;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:20px;}
.wa-avatar.av-0{background:#6fa8dc;}.wa-avatar.av-1{background:#8e7cc3;}.wa-avatar.av-2{background:#e06666;}
.wa-avatar.av-3{background:#f6b26b;}.wa-avatar.av-4{background:#93c47d;}.wa-avatar.av-5{background:#76a5af;}
.wa-avatar.av-6{background:#c27ba0;}.wa-avatar.av-7{background:#a2c4c9;}
.wa-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.wa-row-top,.wa-row-sub{display:flex;align-items:center;gap:8px;min-width:0;}
.wa-row-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px;}
.wa-row-when{font-size:12px;color:var(--wa-ink-2);white-space:nowrap;}
.wa-row-preview{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;color:var(--wa-ink-2);}
.wa-closed,.wa-done{font-size:12px;color:var(--wa-ink-2);}
.wa-more{margin:8px 12px;}
.wa-chat{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:var(--wa-wall);position:relative;}
.wa-none{flex:1;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--wa-bar);}
.wa-head{display:flex;align-items:center;gap:12px;padding:8px 14px;background:var(--wa-bar);border-bottom:1px solid var(--wa-line);min-height:60px;}
.wa-head .wa-avatar{flex-basis:40px;width:40px;height:40px;font-size:17px;}
.wa-back{display:none;font-size:22px;text-decoration:none;color:var(--wa-ink);padding:6px 6px 6px 0;line-height:1;}
.wa-head-main{flex:1;min-width:0;}
.wa-head-name{font-weight:600;font-size:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.3;}
.wa-head-sub{font-size:13px;color:var(--wa-ink-2);display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wa-head-sub a{color:var(--wa-ink-2);}
.wa-menu{position:relative;}
.wa-menu summary{list-style:none;cursor:pointer;font-size:24px;line-height:1;padding:6px 10px;color:var(--wa-ink-2);border-radius:50%;}
.wa-menu summary::-webkit-details-marker{display:none;}
.wa-menu summary:hover{background:#e2e6e8;}
.wa-menu-list{position:absolute;right:0;top:calc(100% + 4px);z-index:60;min-width:240px;display:flex;flex-direction:column;padding:6px 0;background:#fff;border-radius:6px;box-shadow:0 2px 12px rgba(0,0,0,.2);}
.wa-menu-list a,.wa-menu-list button{display:block;width:100%;text-align:left;padding:11px 20px;font:inherit;font-size:14.5px;color:var(--wa-ink);background:none;border:0;text-decoration:none;cursor:pointer;}
.wa-menu-list a:hover,.wa-menu-list button:hover{background:#f5f6f6;}
.wa-linkbox{padding:8px 14px;border-bottom:1px solid var(--wa-line);display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--wa-bar);}
.wa-linkbox input{flex:1;min-width:200px;}
.wa-link-results{flex:1 1 100%;display:grid;gap:4px;}
.wa-link-pick{text-align:left;background:#fff;border:1px solid var(--wa-line);border-radius:8px;padding:8px 10px;cursor:pointer;font:inherit;}
.wa-link-pick:hover{border-color:var(--wa-green);}
.wa-thread{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:12px 6%;display:flex;flex-direction:column;gap:3px;
  background-color:var(--wa-wall);
  background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px),radial-gradient(rgba(0,0,0,.025) 1px,transparent 1px);
  background-size:22px 22px,34px 34px;background-position:0 0,11px 17px;}
.wa-day{align-self:center;margin:10px 0 6px;}
.wa-day span{background:#fff;color:#54656f;font-size:12.5px;padding:5px 12px;border-radius:8px;box-shadow:0 1px .5px rgba(11,20,26,.13);}
.wa-sys{align-self:center;margin:4px 0;max-width:90%;text-align:center;}
.wa-sys span{background:#fff8e1;color:#6b5a1e;font-size:12px;padding:4px 10px;border-radius:8px;box-shadow:0 1px .5px rgba(11,20,26,.13);}
.wa-msg{position:relative;max-width:min(65%,520px);background:#fff;border-radius:8px;padding:6px 8px 4px;align-self:flex-start;display:flex;flex-direction:column;gap:2px;font-size:14.5px;line-height:1.4;word-wrap:break-word;box-shadow:0 1px .5px rgba(11,20,26,.13);margin-top:2px;}
.wa-msg.in{border-top-left-radius:0;}
.wa-msg.in::before{content:"";position:absolute;top:0;left:-8px;border:8px solid transparent;border-top-color:#fff;border-right-color:#fff;border-bottom:0;border-left:0;width:0;height:0;}
.wa-msg.out{align-self:flex-end;background:var(--wa-out);border-top-right-radius:0;}
.wa-msg.out::before{content:"";position:absolute;top:0;right:-8px;border:8px solid transparent;border-top-color:var(--wa-out);border-left-color:var(--wa-out);border-bottom:0;border-right:0;width:0;height:0;}
.wa-msg + .wa-msg.in,.wa-msg.in + .wa-msg.in{border-top-left-radius:8px;}
.wa-msg.in + .wa-msg.in::before,.wa-msg.out + .wa-msg.out::before{display:none;}
.wa-msg.out + .wa-msg.out{border-top-right-radius:8px;}
.wa-msg .wa-text{white-space:pre-wrap;padding-right:6px;}
.wa-msg .wa-meta{align-self:flex-end;font-size:11px;color:var(--wa-ink-2);display:flex;gap:4px;align-items:center;margin-top:-2px;}
.wa-status{letter-spacing:-2px;}
.wa-trans{display:block;font-size:13.5px;color:#3b4a54;border-top:1px dashed rgba(0,0,0,.12);margin-top:4px;padding-top:4px;font-style:italic;white-space:pre-wrap;}
.wa-translate{background:none;border:0;color:var(--wa-green);font:inherit;font-size:11px;cursor:pointer;padding:0 2px;}
.wa-vn{display:flex;flex-direction:column;gap:2px;margin-top:4px;padding-top:4px;border-top:1px dashed rgba(0,0,0,.12);font-size:13.5px;}
.wa-vn-words{white-space:pre-wrap;}
.wa-vn-orig{font-size:12.5px;color:var(--wa-ink-2);white-space:pre-wrap;}
.wa-vn-why{color:var(--s-red);}
.wa-vn-again{display:flex;gap:4px;flex-wrap:wrap;align-items:center;}
.wa-vn-again select.wa-tool-sel{width:auto;max-width:46%;font-size:12px;padding:1px 4px;margin:0;display:inline-block;height:auto;line-height:1.3;}
.wa-mt{display:block;font-size:10.5px;color:var(--wa-ink-2);font-style:normal;text-transform:uppercase;letter-spacing:.04em;margin-top:2px;}
.wa-translate:hover{text-decoration:underline;}
.wa-tool-group{display:inline-flex;align-items:center;gap:4px;}
.wa-tool-sel{font-size:12px;padding:1px 4px;border:1px solid var(--wa-line);border-radius:6px;background:#fff;}
.wa-src{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--wa-ink-2);background:rgba(0,0,0,.06);border-radius:4px;padding:0 4px;margin-right:2px;}
.wa-ref{display:block;font-size:12px;color:#7a5c00;background:#fff4d6;border-radius:6px;padding:4px 8px;margin-bottom:4px;}
.wa-status[data-status="read"]{color:var(--wa-tick);}
.wa-status[data-status="failed"]{color:var(--s-red);letter-spacing:0;}
.wa-fail{font-size:12px;color:var(--s-red);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.wa-msg.failed{opacity:.8;border:1px dashed var(--s-red);box-shadow:none;}
.wa-msg.failed::before{display:none;}
.wa-pic img{display:block;max-width:100%;max-height:300px;border-radius:6px;}
.wa-msg audio{max-width:100%;width:270px;}
.wa-doc{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;background:rgba(0,0,0,.05);text-decoration:none;color:var(--wa-ink);}
.wa-nofile{font-size:13px;color:var(--wa-ink-2);font-style:italic;}
.wa-foot{padding:10px 14px;background:var(--wa-bar);}
.wa-others{padding:4px 14px;background:var(--s-amber-bg);color:var(--s-amber);}
.wa-window{padding:10px 14px;background:#fff8e1;color:#5c4a00;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;}
.wa-reply{display:flex;align-items:flex-end;gap:8px;padding:8px 10px;background:var(--wa-bar);}
.wa-pill{flex:1;display:flex;align-items:flex-end;gap:4px;background:#fff;border-radius:24px;padding:4px 10px 4px 6px;min-height:44px;}
.wa-pill textarea{flex:1;min-height:36px;max-height:150px;resize:none;line-height:1.35;border:0;background:transparent;padding:8px 4px;font-size:16px;}
.wa-plus-btn{display:none;width:36px;height:36px;border-radius:50%;border:0;background:none;color:#54656f;font-size:26px;line-height:1;cursor:pointer;flex:0 0 36px;padding:0;}
.wa-plus{position:absolute;left:10px;bottom:76px;z-index:30;background:#fff;border-radius:12px;box-shadow:0 4px 18px rgba(0,0,0,.22);padding:6px;min-width:250px;display:flex;flex-direction:column;}
.wa-plus[hidden]{display:none;}
.wa-plus > button{background:none;border:0;text-align:left;padding:12px 14px;font:inherit;font-size:15px;cursor:pointer;border-radius:8px;color:var(--wa-ink);border-bottom:1px solid var(--wa-line);}
.wa-plus > button:last-child{border-bottom:0;text-align:center;}
.wa-plus > button:hover{background:rgba(0,0,0,.05);}
.wa-pill textarea:focus{box-shadow:none;outline:none;}
.wa-attach{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;cursor:pointer;color:#54656f;flex:0 0 36px;}
.wa-attach:hover{background:#f0f2f5;}
.wa-count{white-space:nowrap;align-self:center;font-size:11px;padding-right:4px;}
.wa-count.red{color:var(--s-red);}
.wa-sendbtn{flex:0 0 44px;width:44px;height:44px;border-radius:50%;border:0;background:var(--wa-green);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.wa-sendbtn:disabled{opacity:.5;cursor:default;}
.wa-rec{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--wa-bar);}
.wa-rec-dot{width:12px;height:12px;border-radius:50%;background:var(--s-red);animation:wa-blink 1s infinite;}
@keyframes wa-blink{50%{opacity:.2;}}
.wa-rec [data-rec-time]{font-variant-numeric:tabular-nums;font-weight:600;min-width:40px;}
.wa-tools{display:flex;gap:10px;padding:0 12px 6px;background:var(--wa-bar);align-items:center;white-space:nowrap;overflow-x:auto;}
/* the language bar above the box: which language the reply is typed in, which it goes out in, and as words or a voice */
/* the language chip: one line above the box saying what the reply will be; a tap opens the sheet of choices */
.wa-langrow{display:flex;gap:10px;padding:4px 12px 2px;background:var(--wa-bar);align-items:center;flex-wrap:wrap;min-height:30px;}
.wa-langchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--wa-line);background:#fff;border-radius:999px;padding:4px 12px;font:inherit;font-size:13px;color:var(--wa-ink-2);cursor:pointer;max-width:100%;}
.wa-langchip.is-on{border-color:#128c7e;color:#0b6b60;background:#e9f7f4;font-weight:600;}
.wa-langchip .pos-caret{font-style:normal;opacity:.6;}
.wa-langhint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wa-langsheet{position:absolute;left:10px;right:10px;bottom:76px;z-index:31;background:#fff;border-radius:14px;box-shadow:0 4px 18px rgba(0,0,0,.22);padding:10px 12px 12px;max-width:560px;max-height:70vh;overflow:auto;}
.wa-langsheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.wa-langsheet-row{margin:8px 0;}
.wa-langsheet-cap{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--wa-ink-2);margin-bottom:4px;}
.wa-langpicks{display:flex;flex-wrap:wrap;gap:6px;}
.wa-langpick{border:1px solid var(--wa-line);background:#fff;border-radius:10px;padding:8px 12px;font:inherit;font-size:14px;color:var(--wa-ink);cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;min-height:44px;line-height:1.2;}
.wa-langpick small{color:var(--wa-ink-2);font-size:11.5px;}
.wa-langpick.is-theirs{border-color:#128c7e;}
.wa-langpick.is-picked{background:#128c7e;color:#fff;border-color:#128c7e;}
.wa-langpick.is-picked small{color:rgba(255,255,255,.85);}
.wa-rec [data-rec-translate]{white-space:nowrap;}
/* the preview before a translated reply goes: what was typed, what will be sent, the meaning check */
.wa-preview{background:#fff;border-top:1px solid var(--wa-line);padding:10px 14px;display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow:auto;}
.wa-preview-head{display:flex;align-items:center;justify-content:space-between;}
.wa-preview-row{display:flex;flex-direction:column;gap:2px;}
.wa-preview-cap{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--wa-ink-2);display:flex;align-items:center;gap:6px;}
.wa-preview-cap i{text-transform:none;letter-spacing:0;font-style:normal;}
.wa-preview-txt{white-space:pre-wrap;font-size:14.5px;line-height:1.4;}
.wa-preview-edit{width:100%;font:inherit;font-size:14.5px;padding:6px 8px;border:1px solid var(--wa-line);border-radius:8px;resize:vertical;}
.wa-preview-warn{color:#8a5a00;background:#fff8e1;padding:6px 10px;border-radius:8px;font-size:13px;}
.wa-preview-voice{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.wa-preview-voice audio{height:36px;max-width:100%;}
.wa-preview-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.wa-wrote{border-top:1px dashed rgba(0,0,0,.12);}
.wa-waiting{background:#fff;border-top:1px solid var(--wa-line);padding:8px 14px;display:flex;flex-direction:column;gap:10px;max-height:40vh;overflow:auto;}
.wa-waiting-row{display:flex;flex-direction:column;gap:4px;padding:6px 10px;border:1px dashed var(--wa-line);border-radius:10px;}
.wa-error.wa-note{background:#e8f5e9;color:#1b5e20;}
.wa-budget-red{background:#fdecea;color:#7a1f14;}
.wa-budget-amber{background:#fff8e1;color:#5c4a00;}
.wa-wrote .wa-mt{display:block;margin-bottom:2px;}
.wa-tools .wa-tool{white-space:nowrap;}
.wa-tool{background:none;border:0;color:var(--wa-ink-2);font:inherit;font-size:12.5px;cursor:pointer;padding:2px 4px;}
.wa-tool:hover{color:var(--wa-green);}
.wa-tpl{background:#fff;border-top:1px solid var(--wa-line);max-height:60%;display:flex;flex-direction:column;}
.wa-tpl-head{display:flex;gap:8px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--wa-line);}
.wa-tpl-head input{flex:1;min-width:120px;}
.wa-tpl-list{overflow-y:auto;padding:6px 8px;display:flex;flex-direction:column;gap:4px;}
.wa-tpl-lang{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--wa-ink-2);padding:6px 6px 2px;}
.wa-tpl-item{text-align:left;background:#fff;border:1px solid var(--wa-line);border-radius:8px;padding:8px 10px;cursor:pointer;font:inherit;display:grid;gap:2px;}
.wa-tpl-item span{font-size:13px;color:var(--wa-ink-2);white-space:pre-wrap;}
.wa-tpl-item:hover{border-color:var(--wa-green);}
.wa-tpl-fill{overflow-y:auto;padding:10px 12px;display:grid;gap:10px;}
.wa-tpl-vars{display:grid;gap:8px;}
.wa-tpl-var{display:grid;gap:4px;}
.wa-tpl-preview{display:grid;gap:4px;}
.wa-tpl-preview .wa-msg{align-self:start;max-width:100%;white-space:pre-wrap;box-shadow:none;border:1px solid #c7e9c0;}
.wa-tpl-preview .wa-msg::before{display:none;}
.wa-tpl-acts{display:flex;gap:8px;}
.wa-quick{background:#fff;border-top:1px solid var(--wa-line);max-height:50%;display:flex;flex-direction:column;}
.wa-slash{background:#fff;border-top:1px solid var(--wa-line);max-height:40%;overflow-y:auto;padding:6px 8px;display:flex;flex-direction:column;gap:4px;box-shadow:0 -4px 12px rgba(0,0,0,.06);}
.wa-slash .wa-tpl-item{padding:6px 10px;}
.wa-filebox{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 10px;background:var(--wa-bar);border-top:1px solid var(--wa-line);}
.wa-filebox input{flex:1;min-width:160px;}
.wa-sending{padding:4px 14px;background:var(--wa-bar);}
.wa-error{padding:6px 14px;color:var(--s-red);background:var(--s-red-bg);}
.wa-lightbox{position:fixed;inset:0;z-index:200;background:rgba(10,14,22,.9);display:flex;align-items:center;justify-content:center;padding:20px;}
.wa-lightbox img{max-width:100%;max-height:100%;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.5);}
.wa-lightbox button{position:absolute;top:12px;right:16px;font-size:30px;background:none;border:0;color:#fff;cursor:pointer;line-height:1;}
@media (max-width:767px){
  .wa{grid-template-columns:1fr;}
  body.wa-info .wa-side{width:100%;}
  body.wa-page .wrap{padding-bottom:calc(62px + env(safe-area-inset-bottom, 0px));}
  .wa-list{border-right:0;}
  .wa-list-head{padding:8px 12px 6px;gap:8px;}
  .wa-title{display:none;}
  body.wa-page .wa-chat{display:none;}
  body.wa-page.wa-open .wa-list{display:none;}
  body.wa-page.wa-open .wa-chat{display:flex;}
  .wa-back{display:inline-block;}
  .wa-head{padding:6px 8px;gap:8px;min-height:56px;}
  .wa-head-name{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
  .wa-head-name .badge{margin-left:6px;}
  .wa-wide{display:none;}
  .wa-msg{max-width:82%;}
  .wa-thread{padding:10px 8px;}
  .wa-count{display:none;}
  .wa-reply{padding:6px 8px;}
}
/* ---- the WhatsApp icon that opens a number's chat here: on an order, a lead, a desk row ---- */
.wa-ico{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#25d366;color:#fff;text-decoration:none;flex:0 0 36px;}
.wa-ico:hover{background:#1ebe5b;color:#fff;}
.wa-ico.wa-ico-btn{width:34px;height:34px;flex-basis:34px;}
.wa-ico-web{background:#fff;color:#128c7e;border:1.5px solid #25d366;position:relative;}
.wa-ico-web:hover{background:#eafaf1;color:#128c7e;}
.wa-ico-out{position:absolute;right:-3px;top:-3px;font-size:11px;line-height:1;background:#fff;border-radius:50%;padding:1px 2px;color:#128c7e;border:1px solid #25d366;}
/* ---- the thread as WhatsApp draws it: stickers, quotes, reactions, forwarded, deleted, the bubble menu ---- */
.wa-msg.t-sticker{background:none;box-shadow:none;padding:0;}
.wa-msg.t-sticker::before{display:none;}
.wa-msg.t-sticker .wa-meta{background:rgba(255,255,255,.75);border-radius:8px;padding:0 5px;margin-top:0;}
.wa-stick{display:block;width:160px;max-width:60vw;height:auto;}
.wa-quote{display:grid;grid-template-columns:1fr auto;gap:0 8px;border-left:4px solid var(--wa-green);background:rgba(0,0,0,.05);border-radius:6px;padding:5px 8px;margin-bottom:4px;cursor:pointer;font-size:13px;line-height:1.3;max-width:100%;}
.wa-msg.out .wa-quote{background:rgba(0,0,0,.06);}
.wa-quote-who{grid-column:1;color:var(--wa-green);font-weight:600;font-size:12.5px;}
.wa-quote-words{grid-column:1;color:var(--wa-ink-2);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:pre-wrap;}
.wa-quote img{grid-column:2;grid-row:1/3;width:44px;height:44px;object-fit:cover;border-radius:4px;}
.wa-fwd{font-size:12px;color:var(--wa-ink-2);font-style:italic;}
.wa-deleted{font-size:13.5px;color:var(--wa-ink-2);font-style:italic;}
.wa-rawbtn{background:none;border:0;color:var(--wa-green);font:inherit;font-size:12px;cursor:pointer;padding:0;text-decoration:underline;}
.wa-rxs{position:absolute;bottom:-12px;left:8px;display:flex;gap:2px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:1px 5px;font-size:13px;line-height:1.3;box-shadow:0 1px 2px rgba(0,0,0,.12);z-index:1;}
.wa-msg.out .wa-rxs{left:auto;right:8px;}
.wa-msg:has(.wa-rxs){margin-bottom:12px;}
.wa-chev{position:absolute;top:2px;right:4px;width:22px;height:22px;border:0;border-radius:50%;background:rgba(255,255,255,.85);color:#54656f;font-size:14px;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s;padding:0;display:flex;align-items:center;justify-content:center;}
.wa-msg:hover .wa-chev,.wa-msg:focus-within .wa-chev{opacity:1;}
.wa-msg.out .wa-chev{background:rgba(217,253,211,.9);}
.wa-msg.t-sticker .wa-chev{background:rgba(255,255,255,.9);}
.wa-flash{animation:wa-flash 1.4s ease-out;}
@keyframes wa-flash{0%,60%{box-shadow:0 0 0 3px rgba(0,168,132,.55);}100%{box-shadow:0 1px .5px rgba(11,20,26,.13);}}
.wa-bmenu{position:fixed;z-index:120;background:#fff;border-radius:10px;box-shadow:0 4px 18px rgba(0,0,0,.22);padding:6px;min-width:190px;display:flex;flex-direction:column;}
.wa-bmenu > button{background:none;border:0;text-align:left;padding:9px 12px;font:inherit;font-size:14px;cursor:pointer;border-radius:6px;color:var(--wa-ink);}
.wa-bmenu > button:hover{background:rgba(0,0,0,.05);}
.wa-bmenu-rx{display:flex;gap:2px;padding:2px 4px 6px;border-bottom:1px solid var(--wa-line);margin-bottom:4px;}
.wa-bmenu-rx button{background:none;border:0;font-size:22px;line-height:1;width:36px;height:36px;border-radius:50%;cursor:pointer;padding:0;}
.wa-bmenu-rx button:hover{background:rgba(0,0,0,.06);transform:scale(1.15);}
.wa-bmenu-rx [data-rx-more]{font-size:20px;color:#54656f;border:1px dashed var(--wa-line);}
.wa-rawbox{position:fixed;inset:0;z-index:130;background:rgba(11,20,26,.5);display:flex;align-items:center;justify-content:center;padding:16px;}
.wa-rawbox-in{background:#fff;border-radius:10px;max-width:720px;width:100%;max-height:85vh;display:flex;flex-direction:column;padding:12px;}
.wa-rawbox pre{flex:1;overflow:auto;font-size:12px;line-height:1.4;background:#f7f8fa;border-radius:6px;padding:10px;margin:8px 0 0;white-space:pre-wrap;word-break:break-word;}
.wa-replying[hidden],.wa-bmenu[hidden],.wa-rawbox[hidden],.wa-emoji[hidden]{display:none;}
.wa-replying{display:flex;align-items:center;gap:8px;padding:6px 12px 0;background:var(--wa-bar);}
.wa-replying .wa-quote{flex:1;margin:0;cursor:default;background:#fff;}
.wa-replying-x{background:none;border:0;font-size:22px;line-height:1;color:#54656f;cursor:pointer;width:32px;height:32px;border-radius:50%;}
.wa-emoji-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:0;background:none;color:#54656f;cursor:pointer;flex:0 0 36px;padding:0;}
.wa-emoji{background:#fff;border-top:1px solid var(--wa-line);max-height:220px;overflow:auto;padding:8px 10px;}
.wa-emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:2px;}
.wa-emoji-grid button{background:none;border:0;font-size:22px;line-height:1;height:36px;border-radius:6px;cursor:pointer;padding:0;}
.wa-emoji-grid button:hover{background:rgba(0,0,0,.06);}
@media (hover:none){
  .wa-chev{display:none;}   /* a long press opens the menu */
}
/* ---- a phone: the whole screen is WhatsApp, the ERP's bars gone; the way back is in the list head ---- */
@media (max-width:767px){
  body.wa-page .topbar,body.wa-page .tabbar{display:none;}
  html:has(body.wa-page),body.wa-page{overflow:hidden;height:100%;}
  /* pinned to the screen: the keyboard or a scroll of the page can never push the header away */
  body.wa-page .main{position:fixed;inset:0;height:auto;min-height:0;margin:0;display:flex;flex-direction:column;}
  body.wa-page .wrap{padding-bottom:env(safe-area-inset-bottom, 0px);}
  .wa-chat{position:relative;}
  .wa-plus-btn{display:inline-flex;align-items:center;justify-content:center;}
  .wa-tools{display:none;}
  .wa-langrow{padding:4px 8px 2px;}
  .wa-langsheet{left:6px;right:6px;bottom:calc(70px + env(safe-area-inset-bottom, 0px));max-width:none;}
  .wa-preview{max-height:70vh;}
  .wa-emoji-btn{display:none;}
  .wa-reply{padding:6px 8px calc(6px + env(safe-area-inset-bottom, 0px));gap:6px;}
  .wa-pill{min-height:46px;padding:3px 8px 3px 4px;align-items:center;}
  .wa-pill textarea{padding:10px 4px;}
  .wa-attach{width:34px;height:34px;flex-basis:34px;}
  .wa-sendbtn{width:46px;height:46px;flex-basis:46px;}
  .wa-head-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
  .wa-day{position:sticky;top:0;z-index:2;}
  .wa-erp-back{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:var(--wa-ink);text-decoration:none;font-size:20px;flex:0 0 36px;}
  .wa-title{display:flex;align-items:center;gap:8px;}
  .wa-list-head{padding-top:calc(8px + env(safe-area-inset-top, 0px));}
  .wa-msg{max-width:85%;}
  .wa-bmenu{min-width:220px;}
  .wa-tools .muted{display:none;}
}
@media (min-width:768px){
  .wa-erp-back{display:none;}
}

.usage-table td.r,.usage-table th.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.usage-table td{vertical-align:top;padding:8px 10px;}
.usage-table td:first-child,.usage-table th:first-child{white-space:normal;max-width:460px;min-width:220px;}
.usage-table{width:100%;}
.usage-table tfoot th{border-top:2px solid var(--line);}
/* ---------- Language & voice ---------- */
.lang-bar{height:8px;background:var(--line);border-radius:4px;overflow:hidden;}
.lang-bar span{display:block;height:100%;background:var(--s-green);}
.lang-bar span.amber{background:var(--s-amber);}
.lang-bar span.red{background:var(--s-red);}
.lang-prov{border:1px solid var(--line);border-radius:8px;padding:8px 12px;margin-bottom:8px;}
.lang-prov summary{cursor:pointer;display:flex;align-items:center;gap:8px;}
.lang-prov label{display:block;margin-top:8px;}
.lang-order{list-style:none;padding:0;margin:0 0 10px;display:flex;flex-direction:column;gap:4px;max-width:420px;}
.lang-order li{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);}
.lang-order li .btn{margin-left:auto;}
.lang-order li .btn + .btn{margin-left:0;}
.lang-editor td{background:var(--paper);}

/* ---------- the stock cards: one card per product, the number that matters, in words ---------- */
.stock-viewtoggle{display:inline-flex;border:1px solid var(--line,#dfe3ea);border-radius:8px;overflow:hidden;margin-right:6px}
.stock-viewtoggle .btn{border:0;border-radius:0}
.stock-viewtoggle .btn.on{background:var(--ink,#111);color:#fff}
.scards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:10px}
.scard{background:#fff;border:1px solid var(--line,#dfe3ea);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;border-top:4px solid #cbd2dc}
.scard.tone-green{border-top-color:var(--s-green,#15803d)}
.scard.tone-amber{border-top-color:var(--s-amber,#b45309)}
.scard.tone-red{border-top-color:var(--s-red,#b91c1c)}
.scard.tone-grey{border-top-color:#cbd2dc}
.sc-top{display:flex;gap:10px;align-items:center}
.sc-img{width:56px;height:56px;border-radius:8px;background:#f1f3f7;overflow:hidden;flex:none;display:flex;align-items:center;justify-content:center}
.sc-img img{width:100%;height:100%;object-fit:cover}
.sc-noimg{font-size:12px;font-weight:700;color:var(--muted,#6b7280);letter-spacing:.04em}
.sc-code{font-weight:700;font-size:15px}
.sc-name{font-size:13px;color:#334155}
.sc-big{font-size:34px;font-weight:700;line-height:1.05;font-variant-numeric:tabular-nums}
.sc-big .sc-unit{font-size:13px;font-weight:500;color:var(--muted,#6b7280);margin-left:4px}
.sc-big.sc-unknown{color:#94a3b8}
.tone-red .sc-big{color:var(--s-red,#b91c1c)}
.tone-amber .sc-big{color:var(--s-amber,#b45309)}
.tone-green .sc-big{color:var(--s-green,#15803d)}
.sc-line{font-size:13px;color:#334155;line-height:1.4}
.sc-by{display:flex;gap:12px;flex-wrap:wrap}
.sc-status{margin-top:auto}
.sc-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start;border-top:1px solid var(--line,#eef0f4);padding-top:8px}
.sc-act summary{list-style:none;cursor:pointer;display:inline-block}
.sc-act summary::-webkit-details-marker{display:none}
.sc-act[open]{flex-basis:100%}
.sc-act-pic summary{padding-left:8px;padding-right:8px}
.sc-form{margin-top:8px;padding:10px;background:#f8f9fb;border-radius:8px;display:flex;flex-direction:column;gap:8px}
.sc-form-words{font-size:13px;color:#334155}
.sc-field{display:flex;align-items:center;gap:8px;font-size:13px}
.sc-field input[type=number],.sc-field select{flex:1;min-width:0;padding:8px;font-size:16px;border:1px solid var(--line,#dfe3ea);border-radius:8px}
.sc-field input[type=file]{font-size:13px}
@media (max-width:760px){.scards{grid-template-columns:1fr}.sc-big{font-size:38px}.sc-actions .btn{min-height:44px;padding:10px 14px}}

/* Page speed (speed_lib.php): the owner's grey timing line under every page */
.speed-line{margin:24px 0 8px;font-size:13px;color:#9aa3b2;text-align:center}
.speed-line.warn{color:#b45309}
.speed-line.bad{color:#b91c1c}
/* moving between pages: the old screen stays until the new one is ready, then a short fade; the menu and top bar stay still */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:90ms}
  .sidebar{view-transition-name:an-sidebar}
  .topbar{view-transition-name:an-topbar}
  .tabbar{view-transition-name:an-tabbar}
}

/* Design (design.php, design_lib.php): the board, the gallery, the list and one design's page. Colour is the step's own. */
body.dz-body .wrap{max-width:1500px;}
.dz-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.dz-head .page-title{margin:0;}
.dz-views{margin:0;flex:0 0 auto;}
.dz-views a{flex:0 0 auto;padding:7px 14px;}
.dz-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:1;min-width:0;}
.dz-filters input[type=search]{flex:1;min-width:160px;max-width:300px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:14px;}
.dz-filters select{padding:8px;border:1px solid var(--line);border-radius:8px;font-size:14px;background:#fff;max-width:180px;}
.dz-check{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-2);}
.dz-chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px;}
.dz-chip{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13px;color:var(--ink-2);text-decoration:none;}
.dz-chip b{font-weight:700;color:var(--ink);}
.dz-chip.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 10%,#fff);}
.dz-chip-dot{width:8px;height:8px;border-radius:50%;background:var(--c);flex:0 0 auto;}
.dz-pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:13px;font-weight:600;color:var(--c);background:color-mix(in srgb,var(--c) 13%,#fff);white-space:nowrap;}
.dz-no{font-family:var(--mono,monospace);font-size:13px;color:var(--muted);}
.dz-type{font-size:13px;color:var(--muted);}
.dz-av{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#e3e7ee;color:var(--ink-2);font-size:11px;font-weight:700;flex:0 0 auto;}
.dz-av-none{background:#f1f2f5;color:#a0a7b4;}
.dz-short{color:var(--s-amber);font-weight:600;}
.dz-late{color:var(--s-red);font-weight:600;}

/* the board */
.dz-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:12px;overflow-x:auto;padding-bottom:8px;align-items:start;}
.dz-col{background:#eef0f4;border-radius:12px;min-width:0;}
.dz-col header{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:13px;font-weight:700;color:var(--ink);border-top:3px solid var(--c);border-radius:12px 12px 0 0;}
.dz-col header b{margin-left:auto;font-weight:600;color:var(--muted);}
.dz-col-body{display:flex;flex-direction:column;gap:8px;padding:0 8px 10px;max-height:calc(100vh - 240px);overflow-y:auto;}
.dz-col-empty{font-size:13px;color:#a0a7b4;text-align:center;padding:14px 0;margin:0;}
.dz-cardlet{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;text-decoration:none;color:var(--ink);transition:box-shadow .12s;}
.dz-cardlet:hover{box-shadow:0 3px 10px rgba(20,24,32,.10);}
.dz-thumb{aspect-ratio:4/3;background:#f4f5f8;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.dz-thumb img,.dz-tile-pic img,.dz-mini img{width:100%;height:100%;object-fit:contain;display:block;}
.dz-thumb-empty span{font-size:13px;color:#a0a7b4;}
.dz-pdf{font-weight:800;letter-spacing:.06em;color:var(--s-red)!important;font-size:15px!important;}
.dz-cl-body{padding:9px 11px 10px;}
.dz-cl-top{display:flex;justify-content:space-between;gap:6px;}
.dz-cl-title{font-weight:600;font-size:14px;line-height:1.3;margin:2px 0;}
.dz-cl-prod{font-size:13px;color:var(--ink-2);font-family:var(--mono,monospace);}
.dz-cl-foot{display:flex;align-items:center;gap:10px;margin-top:7px;font-size:13px;color:var(--muted);}
.dz-more{display:block;text-align:center;font-size:13px;padding:6px;color:var(--ink-2);}

/* the gallery */
.dz-gal-tabs{display:flex;align-items:center;gap:14px;margin-bottom:12px;}
.dz-gal-tabs a{font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent;}
.dz-gal-tabs a.on{color:var(--ink);border-color:var(--ink);}
.dz-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.dz-tile{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--ink);}
.dz-tile:hover{box-shadow:0 4px 14px rgba(20,24,32,.10);}
.dz-tile-pic{aspect-ratio:1/1;background:#f4f5f8;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.dz-tile-body{padding:10px 12px 12px;}
.dz-tile-meta{font-size:13px;color:var(--muted);}
.dz-tile-foot{display:flex;align-items:center;gap:8px;margin-top:8px;}
.dz-print{font-size:13px;color:var(--s-green);font-weight:600;}

/* the list */
.dz-tablewrap{padding:0;overflow-x:auto;}
.dz-table{width:100%;border-collapse:collapse;font-size:14px;}
.dz-table th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap;}
.dz-table td{padding:8px 10px;border-bottom:1px solid var(--line-2);vertical-align:middle;}
.dz-table tbody tr{cursor:pointer;}
.dz-table tbody tr:hover{background:var(--accent-bg);}
.dz-table a{color:var(--ink);text-decoration:none;}
.dz-td-pic{width:64px;}
.dz-mini{width:56px;height:42px;background:#f4f5f8;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.dz-mini span{font-size:10px!important;}
.dz-empty{text-align:center;color:var(--muted);padding:28px 16px;background:#fff;border:1px dashed var(--line);border-radius:var(--r);}

/* one design */
.dz-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 10px;}
.dz-back{font-size:20px;text-decoration:none;color:var(--ink-2);padding:2px 6px 2px 0;}
.dz-title{font-size:22px;margin:0;font-weight:700;}
.dz-steps{display:flex;gap:0;list-style:none;padding:0;margin:0 0 14px;overflow-x:auto;}
.dz-steps li{display:flex;align-items:center;gap:7px;padding:7px 16px 7px 4px;font-size:13px;color:var(--muted);white-space:nowrap;position:relative;}
.dz-steps li:not(:last-child)::after{content:"";width:22px;height:1px;background:var(--line);margin-left:10px;}
.dz-step-dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:#fff;}
.dz-steps li.done{color:var(--ink-2);}
.dz-steps li.done .dz-step-dot{background:var(--c);border-color:var(--c);color:#fff;}
.dz-steps li.on{color:var(--ink);font-weight:700;}
.dz-steps li.on .dz-step-dot{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent);background:color-mix(in srgb,var(--c) 15%,#fff);color:var(--c);}
.dz-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:start;}
.dz-main,.dz-side{display:flex;flex-direction:column;gap:14px;min-width:0;}
.dz-card{margin:0;}
.dz-card-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.dz-card-head .card-title{margin:0;}
.dz-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto;}
.dz-tabs a{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;font-size:13px;color:var(--ink-2);text-decoration:none;border:1px solid transparent;}
.dz-tabs a.on{border-color:var(--line);background:var(--paper);color:var(--ink);font-weight:600;}
.dz-st{font-size:11.5px;padding:1px 7px;border-radius:999px;background:var(--s-grey-bg);color:var(--s-grey);font-weight:600;}
.dz-st-ok{background:var(--s-green-bg);color:var(--s-green);}
.dz-st-warn{background:var(--s-amber-bg);color:var(--s-amber);}
.dz-st-wait{background:var(--s-blue-bg);color:var(--s-blue);}
.dz-view-switch{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px;}
.dz-view-switch button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 12px;font-size:13px;cursor:pointer;color:var(--ink-2);}
.dz-view-switch button.on{background:var(--ink);color:#fff;border-color:var(--ink);}
.dz-ext{font-size:13px;color:var(--ink-2);margin-left:8px;}
.dz-view-switch .dz-ext:first-of-type{margin-left:auto;}
.dz-stage-pic{background:#f4f5f8;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:240px;overflow:hidden;}
.dz-stage-pic[hidden]{display:none;}
.dz-stage-pic img{max-width:100%;max-height:70vh;object-fit:contain;cursor:zoom-in;display:block;}
.dz-stage-pic p{padding:6px 10px;margin:0;text-align:center;}
.dz-pdf-frame{width:100%;height:70vh;border:0;background:#fff;}
.dz-canva{width:100%;position:relative;padding-top:75%;}
.dz-canva iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.dz-meta{font-size:13px;color:var(--muted);margin:8px 0 0;}
.dz-note{font-size:14px;background:var(--paper);border-radius:8px;padding:8px 10px;margin:6px 0 0;}
.dz-add{margin-top:12px;border-top:1px solid var(--line-2);padding-top:10px;}
.dz-add summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--ink);}
.dz-form{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.dz-form label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink-2);font-weight:600;}
.dz-form label.dz-check{flex-direction:row;font-weight:500;}
.dz-form input[type=text],.dz-form input[type=url],.dz-form input[type=date],.dz-form select,.dz-form textarea{font:inherit;font-size:15px;font-weight:400;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);width:100%;}
.dz-form fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;min-width:0;}
.dz-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.dz-row{display:flex;gap:8px;justify-content:flex-end;align-items:center;}
.dz-row select{width:auto;}
.dz-inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px;}
.dz-inline input[type=url],.dz-inline input[type=text]{flex:1;min-width:160px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:14px;}
.dz-count{font-size:13px;margin-left:auto;font-weight:600;}
.dz-count.ok{color:var(--s-green);}
.dz-count.short{color:var(--s-amber);}
.dz-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;}
.dz-photos figure{margin:0;position:relative;aspect-ratio:1/1;background:#f4f5f8;border-radius:8px;overflow:hidden;}
.dz-photos img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;display:block;}
.dz-x{position:absolute;top:4px;right:4px;margin:0;}
.dz-x button{width:26px;height:26px;border-radius:50%;border:0;background:rgba(20,24,32,.6);color:#fff;font-size:16px;line-height:1;cursor:pointer;}
.dz-x-inline{position:static;display:inline;}
.dz-x-inline button{width:22px;height:22px;background:transparent;color:var(--muted);}
.dz-sub{font-size:14px;margin:16px 0 6px;}
.dz-videos{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;}
.dz-videos li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;}
.dz-vid-ico{width:26px;height:26px;border-radius:6px;background:var(--paper);display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:var(--ink-2);}
.dz-tl{list-style:none;padding:0;margin:0 0 6px;display:flex;flex-direction:column;gap:10px;}
.dz-c{display:flex;gap:10px;}
.dz-c-body{flex:1;min-width:0;font-size:14px;background:var(--paper);border-radius:10px;padding:8px 11px;}
.dz-c-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:2px;}
.dz-ev{display:flex;gap:10px;align-items:baseline;font-size:13px;color:var(--ink-2);padding-left:7px;}
.dz-ev-dot{width:9px;height:9px;border-radius:50%;background:#cfd5df;flex:0 0 auto;}
.dz-comment textarea{min-height:64px;}
.dz-next .small{margin-top:0;}
.dz-wide{width:100%;justify-content:center;}
.dz-why{font-size:13px;color:var(--s-amber);margin:6px 0 0;}
.dz-drop{margin-top:12px;text-align:right;}
.dz-link-btn{border:0;background:none;color:var(--muted);font-size:13px;text-decoration:underline;cursor:pointer;padding:0;}
.dz-facts{list-style:none;padding:0;margin:12px 0 0;font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:4px;}
.dz-newcard{max-width:720px;}
.dz-zoom{position:fixed;inset:0;z-index:200;background:rgba(10,12,16,.88);display:flex;align-items:center;justify-content:center;padding:24px;}
.dz-zoom[hidden]{display:none;}
.dz-zoom img{max-width:100%;max-height:100%;object-fit:contain;}
.dz-zoom button{position:absolute;top:12px;right:16px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:24px;cursor:pointer;}
@media (max-width:1100px){.dz-grid{grid-template-columns:1fr;}}
.dz-card .card-title{margin-top:0;}
.dz-newbtn{margin-left:auto;}
@media (max-width:767px){
  .dz-head{gap:8px;}
  .dz-head .page-title{font-size:20px;}
  .dz-views a{padding:7px 10px;}
  .dz-hide-sm{display:none;}
  .dz-filters{order:5;flex:1 1 100%;}
  .dz-filters input[type=search]{flex:1 1 100%;min-width:0;max-width:none;width:100%;}
  .dz-filters select{flex:1 1 40%;min-width:0;max-width:none;}
  .dz-board{grid-auto-columns:82vw;scroll-snap-type:x mandatory;}
  .dz-col{scroll-snap-align:start;}
  .dz-col-body{max-height:none;}
  .dz-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .dz-two{grid-template-columns:1fr;}
  .dz-title{font-size:19px;}
  .dz-view-switch .dz-ext:first-of-type{margin-left:0;}
  .dz-form button,.dz-inline button{min-height:44px;}
}

/* The quick task (quick_task_lib.php): "+ Task" in the top bar, a panel on the right, a sheet from the bottom on a phone */
.qt-btn{margin-left:auto;margin-right:8px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;border-radius:8px;padding:6px 12px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;}
.qt-btn:hover{background:rgba(255,255,255,.12);}
.qt-btn + .bell{margin-left:0;}

/* A dropdown you can type into (assets/pickselect.js, any select[data-pick]): the select stays, out of sight, and
   carries the value; the box shows the choice and narrows the list as words are typed */
.pk{position:relative;display:block;width:100%;min-width:220px;}
.pk-sel{position:absolute !important;left:0;bottom:0;width:100% !important;height:1px !important;opacity:0;pointer-events:none;margin:0 !important;padding:0 !important;border:0 !important;}
.pk-in{width:100%;font:inherit;font-size:15px;padding:9px 38px 9px 11px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);margin:0;}
.pk-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg-2);}
.pk-btn{position:absolute;right:1px;top:1px;bottom:1px;width:34px;border:0;border-left:1px solid var(--line-2);border-radius:0 7px 7px 0;background:#fff;color:var(--ink-2);font-size:14px;cursor:pointer;}
.pk-btn:hover{background:var(--paper);}
.pk-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:120;margin:0;padding:4px;list-style:none;max-height:320px;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(20,24,32,.14);}
.pk-list[hidden]{display:none;}
.pk-list li{padding:8px 10px;border-radius:6px;font-size:14px;font-weight:400;color:var(--ink);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pk-list li.cur{font-weight:600;}
.pk-list li.on,.pk-list li:hover{background:var(--accent-bg);}
.pk-list li.pk-none{color:var(--muted);cursor:default;background:none;}
@media (max-width:767px){ .pk-in{font-size:16px;min-height:44px;} .pk-list li{padding:11px 10px;} }

/* The left menu's sections across the top bar (render_topnav() in nav.php), wide screens only; it scrolls sideways
   and never wraps. Tasks stands apart after a rule: white on the dark bar, so it is the one thing that reads first. */
.topnav{display:none;}
.topnav-task{display:inline-flex;align-items:center;gap:6px;flex:none;margin-left:auto;padding:6px 10px;border-radius:8px;background:#fff;color:var(--chrome);font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;}
.topnav-task:hover{background:var(--accent-bg-2);}
.topnav-task.on{box-shadow:0 0 0 2px rgba(255,255,255,.55);}
.topnav-task .navb{margin-left:2px;}
.topnav-task + .qt-btn{margin-left:8px;}
/* a phone's top bar must never be wider than the phone: the title gives way with "…" before anything else does */
.topbar-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.topbar > *{flex-shrink:0;}
.topbar > .topbar-title,.topbar > .topnav{flex-shrink:1;}
@media (max-width:767px){
  .topbar{gap:6px;}
  .topnav-task .txt{display:none;}
  .topnav-task{padding:5px 8px;gap:4px;}
  .topnav-task .navb{font-size:13px;}
  .topnav-task + .qt-btn{margin-left:2px;margin-right:2px;}
  .bell{padding-right:18px;}
}
@media (min-width:900px){
  .topbar-title{flex:none;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .topnav{display:flex;flex:1;min-width:0;gap:2px;overflow-x:auto;scrollbar-width:none;padding-right:10px;margin-left:6px;border-left:1px solid rgba(255,255,255,.15);padding-left:8px;}
  .topnav::-webkit-scrollbar{display:none;}
  .topnav-item{display:inline-flex;align-items:center;gap:6px;flex:none;padding:6px 10px;border-radius:8px;color:var(--chrome-ink);font-size:13.5px;text-decoration:none;white-space:nowrap;}
  .topnav-item .ico{font-size:14px;opacity:.85;}
  .topnav-item:hover{background:rgba(255,255,255,.08);color:#fff;}
  .topnav-item.on{background:rgba(255,255,255,.16);color:#fff;font-weight:600;}
  .topnav-item.soon{color:rgba(169,186,212,.5);}
  .topnav-item .navb{margin-left:2px;padding:0 6px;font-size:11px;line-height:17px;}
  .topnav-task{margin-left:0;position:relative;}
  .topnav-task::before{content:"";position:absolute;left:-9px;top:4px;bottom:4px;width:1px;background:rgba(255,255,255,.25);}
  .topnav + .topnav-task{margin-left:9px;}
}
.qt-veil{position:fixed;inset:0;background:rgba(10,12,16,.28);z-index:300;}
.qt-veil[hidden],.qt-panel[hidden]{display:none;}
.qt-panel{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:100vw;background:#fff;z-index:301;box-shadow:-8px 0 30px rgba(20,24,32,.18);display:flex;flex-direction:column;overflow-y:auto;}
.qt-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);font-size:16px;position:sticky;top:0;background:#fff;}
.qt-x{border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:var(--muted);width:40px;height:40px;}
.qt-form,.qt-done{display:flex;flex-direction:column;gap:12px;padding:16px;}
.qt-form[hidden],.qt-done[hidden]{display:none;}
.qt-form label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--ink-2);}
.qt-form input[type=text],.qt-form select,.qt-form textarea{font:inherit;font-size:16px;font-weight:400;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);width:100%;}
.qt-form label.qt-check{flex-direction:row;align-items:center;gap:8px;font-weight:500;}
.qt-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.qt-about{font-size:13px;color:var(--muted);background:var(--paper);border-radius:8px;padding:7px 10px;margin:0;}
.qt-about[hidden],.qt-err[hidden],.qt-nomobile[hidden],.qt-wa[hidden]{display:none;}
.qt-err{color:var(--s-red);font-size:14px;margin:0;}
.qt-save,.qt-wa{width:100%;justify-content:center;min-height:46px;}
.qt-wa{background:#1f8f4e;border-color:#1f8f4e;}
.qt-ok{font-weight:600;color:var(--s-green);margin:0;}
.qt-nomobile{font-size:14px;color:var(--s-amber);margin:0;}
.qt-msg{white-space:pre-wrap;font-family:inherit;font-size:14px;background:var(--paper);border-radius:10px;padding:10px 12px;margin:0;max-height:40vh;overflow:auto;}
.qt-row{display:flex;gap:8px;flex-wrap:wrap;}
body.qt-on{overflow:hidden;}
@media (max-width:767px){
  .qt-btn{padding:6px 9px;font-size:13px;}
  .qt-panel{top:auto;left:0;right:0;width:auto;max-height:92vh;border-radius:16px 16px 0 0;box-shadow:0 -8px 30px rgba(20,24,32,.2);}
  .qt-two{grid-template-columns:1fr;}
}
.tkp-wa{color:#1f8f4e;font-weight:600;font-size:14px;text-decoration:none;}
.tkp-wa:hover{text-decoration:underline;}
.qt-form .qt-save{position:sticky;bottom:8px;box-shadow:0 4px 14px rgba(20,24,32,.15);}
.qt-due{display:flex;flex-direction:column;gap:6px;}
.qt-lbl{font-size:13px;font-weight:600;color:var(--ink-2);}
.qt-chips{display:flex;gap:6px;flex-wrap:wrap;}
.qt-chips button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-size:13px;color:var(--ink-2);cursor:pointer;}
.qt-chips button.on{background:var(--ink);border-color:var(--ink);color:#fff;}
.qt-due input[type=date],.qt-due input[type=time]{font:inherit;font-size:16px;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);width:100%;min-width:0;}

/* Production → Demand: demand added by hand, under its product in What to make */
.dtable tr.pr-hand td{background:var(--paper);border-top:0;padding-top:4px;padding-bottom:4px;}

/* Autosave and Undo in the top bar (assets/autosave.js) */
.saved-note{margin-left:auto;margin-right:8px;font-size:13px;color:var(--chrome-ink);opacity:0;transition:opacity .2s;white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis;}
.saved-note.on{opacity:1;}
.saved-note.bad{color:#fff;background:#b42318;border-radius:6px;padding:3px 8px;}
.undo-btn{margin-right:8px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;border-radius:8px;padding:6px 12px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;}
.undo-btn:hover{background:rgba(255,255,255,.12);}
.undo-btn[hidden]{display:none;}
.saved-note ~ .qt-btn{margin-left:0;}
.as-hint{margin-left:8px;}
@media (max-width:767px){ .saved-note:not(.bad){display:none;} .saved-note.bad{position:fixed;top:56px;right:8px;left:8px;max-width:none;z-index:50;} .undo-btn{padding:5px 8px;} }