/* ==========================================================================
   MiFitness Quote Tool

   PALETTE — Roland's brief for this tool: "Colours must be black and white
   only". The chrome is therefore monochrome. The margin and discount alert
   colours (--red / --amber / --green) are DELIBERATELY kept: a consultant
   has to be able to tell a healthy margin from a bad one at a glance, and
   greyscale cannot carry that safely. Nothing else uses colour.
   ========================================================================== */
:root{
  --ink:#12151a; --ink-2:#39414d; --ink-3:#6b7480; --line:#e2e6ec; --line-2:#eef1f5;
  --bg:#f4f6f9; --panel:#ffffff; --panel-2:#fafbfd;
  /* MiFitness is black and white. --brand is the brand; --red is a WARNING
     colour only — below-margin, out of stock, a failed lookup — and it never
     appears on a document a customer sees. */
  --brand:#12151a; --brand-2:#000000; --brand-soft:#f1f2f4;
  --red:#d81f26; --red-dark:#a8161c; --red-soft:#fdeaea;
  --green:#0f7a4a; --green-soft:#e6f4ec;
  --amber:#a86800; --amber-soft:#fdf3e0;
  --blue:#000000; --blue-soft:#f1f2f4;
  --gp-blue:#14509e; --gp-blue-soft:#eaf0f9;
  --r:10px; --sh:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --sh-lg:0 8px 28px rgba(16,24,40,.14);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:15px/1.5 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); -webkit-text-size-adjust:100%;
}
h1,h2,h3,h4{margin:0 0 .5em; line-height:1.25; font-weight:650; letter-spacing:-.01em}
h1{font-size:22px} h2{font-size:19px} h3{font-size:16px} h4{font-size:14px}
p{margin:0 0 .8em}
a{color:var(--blue)}
small{font-size:12.5px}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}
.nowrap{white-space:nowrap}
.hide{display:none !important}

/* ------------------------------------------------------------- PIN gate */
#gate{position:fixed;inset:0;z-index:9000;background:#000;
  display:flex;align-items:center;justify-content:center;padding:20px}
.gate-card{background:#fff;border-radius:16px;padding:30px 28px;width:100%;max-width:380px;
  box-shadow:var(--sh-lg);text-align:center}
.gate-card img{max-width:210px;height:auto;margin-bottom:2px}
.gate-card h2{margin:14px 0 4px}
.pin-input{width:100%;font-size:30px;letter-spacing:.5em;text-align:center;padding:14px 10px 14px 20px;
  border:2px solid var(--line);border-radius:12px;margin:16px 0 6px;font-family:var(--mono)}
.pin-input:focus{outline:none;border-color:var(--ink)}
.gate-err{color:var(--red);font-size:13.5px;min-height:20px;margin:2px 0 8px}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.pin-pad button{padding:15px 0;font-size:19px;border:1px solid var(--line);background:#fff;
  border-radius:10px;cursor:pointer;font-family:var(--mono)}
.pin-pad button:active{background:var(--line-2)}

/* -------------------------------------------------------------- chrome
   One dark bar, the UAE Quote Calculator's. Eleven tabs plus the save button
   and the view toggle will not sit in one rigid row on a laptop, so the bar
   wraps and .topctl keeps the controls glued together as a block. */
.topbar{background:var(--ink);color:#fff;padding:10px 18px 0;position:sticky;top:0;z-index:500}
/* Row one: identity and controls. Row two: the navigation, so the
   Customer/Manager toggle keeps its place when the tab row wraps. */
.topbar-main{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap}
.topbar img.logo{height:28px}
/* Not uppercased: the capital H is the name. */
.brandtxt{font-size:12.5px;letter-spacing:.06em;font-weight:600;color:#9aa4ad;
  border-left:1px solid #39414a;padding-left:16px}
.topctl{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none;flex-wrap:wrap}
.qref{font-family:var(--mono);font-size:12px;background:rgba(255,255,255,.12);
  padding:4px 9px;border-radius:6px;letter-spacing:.02em}
.whoami{font-size:12.5px;color:#c3c9d2}
.mgr-badge{background:var(--brand-2);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;
  border-radius:5px;letter-spacing:.05em;text-transform:uppercase}
/* A margin view is the one state where a careless print costs real money, so
   the whole window carries a mark while you are in one. */
body.marginview .topbar{box-shadow:inset 0 -3px 0 var(--amber)}
body.marginview .mgr-badge{background:var(--amber);color:#fff}
@media print{ body.marginview .topbar{box-shadow:none} }

.tabs{display:flex;gap:2px;flex-wrap:wrap;margin-top:9px;padding-top:8px;
  border-top:1px solid #2a323a}
.tabs button{background:transparent;border:0;color:#a7b1ba;padding:9px 14px;
  border-radius:7px 7px 0 0;font:inherit;font-weight:600;font-size:13px;cursor:pointer;
  white-space:nowrap}
.tabs button:hover{color:#fff;background:#20272e}
.tabs button.on{background:#fff;color:var(--ink)}
/* A manager's own tabs, before the PIN. Present, dimmed, and obviously a
   door rather than a dead label — they used to be removed from the page
   entirely, which read as the tool having lost half its screens. */
.tabs button.locked{color:#6b747d;opacity:.72}
.tabs button.locked::before{content:"\1F512";font-size:10.5px;margin-right:5px;opacity:.85}
.tabs button.locked:hover{color:#fff;opacity:1;background:#20272e}
.tabs button .pill{background:var(--brand-2);color:#fff;border-radius:9px;padding:1px 6px;
  font-size:11px;margin-left:5px;font-variant-numeric:tabular-nums}
.tabs button.on .pill{background:var(--brand-2);color:#fff}

/* ---- tab groups ------------------------------------------------------
   A hairline and a small label per group, rather than a second row of
   navigation: the row keeps working exactly as it did, and a consultant
   who never opens Stock & site simply reads past it. On a phone each
   group takes its own line, which is easier to hit than fourteen tabs
   wrapped arbitrarily. */
.tabs{align-items:flex-end}
.tabgrp{display:flex;align-items:flex-end;gap:2px;flex-wrap:wrap;
  padding-left:11px;margin-left:9px;border-left:1px solid #2a323a}
.tabgrp:first-child{padding-left:0;margin-left:0;border-left:0}
.tabgrp-l{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#77818b;padding:0 7px 12px 0;white-space:nowrap;user-select:none;align-self:flex-end}
@media (max-width:760px){
  /* The row becomes a block and each group becomes its own row inside it.
     Flex items 100% wide inside a wrapping flex row do not stack reliably —
     they end up sharing a line and overlapping. This is deterministic. */
  .tabs{display:block}
  .tabgrp{display:flex;flex-wrap:wrap;border-left:0;padding-left:0;margin-left:0}
  .tabgrp + .tabgrp{margin-top:2px;border-top:1px solid #222a31;padding-top:4px}
  .tabgrp-l{width:100%;padding:8px 0 1px}
}

.topsave{border:1px solid #3a434c;background:#20272e;color:#dfe4e8;padding:7px 14px;
  border-radius:8px;font:inherit;font-weight:700;font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;display:flex;align-items:center;gap:7px;white-space:nowrap;
  flex:none;cursor:pointer}
.topsave:hover{background:#2b333b;color:#fff}
/* a red dot means there is something not yet saved */
.topsave.dirty{border-color:#fff;color:#fff}
.topsave.dirty::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;flex:none}
.topsave.done{background:var(--green);border-color:var(--green);color:#fff}
.topsave.done::before{content:none}
.topnew{border:1px solid #3a434c;background:transparent;color:#aeb8c2;padding:7px 12px;
  border-radius:8px;font:inherit;font-weight:700;font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;white-space:nowrap;flex:none;cursor:pointer}
.topnew:hover{background:#20272e;color:#fff;border-color:#4a545e}
.viewtog{display:flex;background:#20272e;border-radius:8px;padding:3px;gap:3px;flex:none}
.viewtog button{border:0;background:transparent;color:#9aa4ad;padding:6px 12px;border-radius:6px;
  font:inherit;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.viewtog button.on{background:#fff;color:var(--ink)}
.topnew .sm,.viewtog .sm{display:none}
@media(max-width:860px){
  .topnew .lg,.viewtog .lg{display:none}
  .topnew .sm,.viewtog .sm{display:inline}
  .brandtxt,.whoami{display:none}
}

/* ---- the running total, always in the corner ---- */
#miniCart{position:fixed;right:16px;bottom:16px;z-index:450;width:272px;font-size:13px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 30px rgba(18,22,26,.14),0 2px 6px rgba(18,22,26,.06);overflow:hidden}
#miniCart.hide{display:none}
#miniCart .mcbar{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:var(--ink);color:#fff;border:0;padding:9px 11px;font:inherit;cursor:pointer}
#miniCart .mcbar:hover{background:#1c2229}
#miniCart .mcbag{position:relative;flex:none;width:22px;height:22px;opacity:.9}
#miniCart .mcbag svg{width:22px;height:22px;display:block}
#miniCart .mcn{position:absolute;top:-5px;right:-6px;min-width:16px;height:16px;padding:0 4px;
  background:#fff;color:var(--ink);border-radius:9px;font-size:10px;font-weight:800;
  line-height:16px;text-align:center}
#miniCart .mcttl{flex:1;min-width:0}
#miniCart .mck{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#9aa4ad;line-height:1.3}
#miniCart .mcv{display:block;font-size:14px;font-weight:800;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
#miniCart .mccar{flex:none;color:#9aa4ad;transition:transform .15s ease;font-size:11px}
#miniCart.open .mccar{transform:rotate(180deg)}
#miniCart .mcbody{display:none;padding:10px 11px 11px;max-height:46vh;overflow:auto}
#miniCart.open .mcbody{display:block}
#miniCart .mcwho{font-size:11px;color:var(--ink-3);line-height:1.4;margin-bottom:8px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
#miniCart .mcwho b{color:var(--ink);font-weight:700}
#miniCart .mcrow{display:flex;gap:8px;align-items:baseline;width:100%;text-align:left;
  background:transparent;border:0;padding:4px 0;color:var(--ink);font:inherit;font-size:12.5px}
#miniCart button.mcrow{cursor:pointer}
#miniCart button.mcrow:hover .mcnm{color:var(--brand-2);text-decoration:underline}
#miniCart .mcnm{flex:1;min-width:0}
#miniCart .mcsub{display:block;font-size:10.5px;color:var(--ink-3);line-height:1.3}
#miniCart .mcam{flex:none;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
#miniCart .mcsum{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
#miniCart .mcsum .mcrow{padding:3px 0}
#miniCart .mcbig{font-weight:800;font-size:13.5px;border-top:1px solid var(--ink);
  margin-top:5px;padding-top:6px}
@media print{#miniCart{display:none !important}}

main{padding:14px;max-width:1400px;margin:0 auto}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;margin-bottom:14px;box-shadow:var(--sh)}
.panel > h3:first-child, .panel > h2:first-child{margin-top:0}
.panel-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.panel-head h3{margin:0}
.panel-head .spacer{flex:1}

/* ------------------------------------------------------------- controls */
label.f{display:block;font-size:12px;font-weight:600;color:var(--ink-2);
  margin-bottom:4px;letter-spacing:.01em}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],
select,textarea{
  width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;
  font:inherit;font-size:14px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-soft)}
textarea{min-height:70px;resize:vertical;line-height:1.45}
.grid{display:grid;gap:11px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 15px;border-radius:8px;border:1px solid var(--line);background:#fff;
  font:inherit;font-size:14px;font-weight:550;cursor:pointer;color:var(--ink);white-space:nowrap}
.btn:hover{background:var(--panel-2)}
.btn.primary{background:#000;border-color:#000;color:#fff}
.btn.primary:hover{background:#2a2a2a;border-color:#2a2a2a}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.dark:hover{background:#000}
.btn.sm{padding:6px 10px;font-size:13px}
.btn.ghost{background:none;border-color:transparent;color:var(--blue)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}

.chip{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11.5px;
  font-weight:600;letter-spacing:.01em;border:1px solid transparent;white-space:nowrap}
.chip.ok{background:var(--green-soft);color:var(--green)}
.chip.no{background:var(--red-soft);color:var(--red-dark)}
.chip.warn{background:var(--amber-soft);color:var(--amber)}
.chip.info{background:var(--blue-soft);color:var(--blue)}
.chip.sale{background:var(--brand-2);color:#fff}
.chip.neutral{background:var(--line-2);color:var(--ink-2)}

.alert{padding:10px 13px;border-radius:8px;font-size:13.5px;margin-bottom:9px;
  border-left:3.5px solid;display:flex;gap:8px;align-items:flex-start;line-height:1.45}
.alert.critical{background:var(--red-soft);border-color:var(--red);color:var(--red-dark)}
.alert.warn{background:var(--amber-soft);border-color:#e0a127;color:var(--amber)}
.alert.info{background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}
.alert.ok{background:var(--green-soft);border-color:var(--green);color:var(--green)}
.alert b{font-weight:700}

/* ------------------------------------------------------------ catalogue */
.cat-bar{display:grid;grid-template-columns:1fr auto;gap:10px;margin-bottom:12px}
.cat-filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.fchip{padding:6px 12px;border:1px solid var(--line);border-radius:20px;background:#fff;
  font-size:13px;cursor:pointer;font-family:inherit;color:var(--ink-2);white-space:nowrap}
.fchip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.fchip.sale.on{background:var(--brand-2);border-color:var(--brand-2)}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:12px}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column}
.card .ph{aspect-ratio:4/3;background:#f0f2f5 center/contain no-repeat;position:relative}
/* No photo means no photo — not a grey rectangle telling the customer we are
   missing one. The tile keeps only the badges, at the top of the card. */
.card .ph.none{aspect-ratio:auto;background:none;min-height:0;padding:8px 8px 0}
.card .ph.none .badges{position:static;max-width:100%}
.card .ph.none:empty{display:none}
.card .badges{position:absolute;top:6px;left:6px;display:flex;gap:4px;flex-wrap:wrap;max-width:92%}
.card .body{padding:9px 10px 10px;display:flex;flex-direction:column;flex:1;gap:5px}
.card .nm{font-size:13.2px;font-weight:600;line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .sku{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.card .pr{font-size:16px;font-weight:700;margin-top:auto}
.card .was{font-size:12px;color:var(--ink-3);text-decoration:line-through;margin-right:5px;font-weight:400}
.card .mgr{font-size:11.5px;color:var(--ink-3);font-family:var(--mono)}

/* ---------------------------------------------------------- quote lines */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px}
table.q{width:100%;border-collapse:collapse;font-size:13.5px;min-width:900px}
table.q th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-3);font-weight:700;padding:0 8px 7px;border-bottom:1.5px solid var(--line);white-space:nowrap}
table.q td{padding:9px 8px;border-bottom:1px solid var(--line-2);vertical-align:top}
table.q tbody tr:hover{background:var(--panel-2)}
table.q td.r,table.q th.r{text-align:right}
table.q td.c,table.q th.c{text-align:center}
.li-img{width:46px;height:46px;object-fit:contain;background:#fff;
  border:1px solid var(--line-2);border-radius:6px;flex:none}
.li-main{display:flex;gap:9px}
.li-nm{font-weight:600;line-height:1.32;font-size:13.5px}
.li-sku{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.li-cmt{margin-top:6px}
.li-cmt input{font-size:12.5px;padding:5px 8px}
.qty-in{width:56px;text-align:center;padding:6px 4px}
.disc-sel{width:88px;padding:6px 6px;font-size:13px}
.lead-sel{width:150px;padding:6px 6px;font-size:12.5px}
.lead-sel.unset{border-color:#e0a127;background:var(--amber-soft)}
.gp-cell{font-family:var(--mono);font-weight:650;font-size:13px}
/* Margin bands, Roland 19/09/2026: 60%+ blue, 55-59.9 black, 50-54.9 amber,
   below 50 red. --blue is black elsewhere in this black-and-white scheme,
   so the good band gets its own token rather than borrowing it. */
.gp-good{color:var(--gp-blue);font-weight:600}
.gp-ok{color:var(--ink)}
.gp-warn{color:var(--amber)}
.gp-bad{color:var(--red);font-weight:600}
.x-btn{background:none;border:none;color:var(--ink-3);font-size:19px;cursor:pointer;
  line-height:1;padding:2px 5px}
.x-btn:hover{color:var(--red-dark)}
tr.flag-critical td{background:var(--red-soft)}
tr.flag-critical:hover td{background:#fbdede}
tr.flag-warn td{background:var(--amber-soft)}
tr.flag-warn:hover td{background:#fbecd4}

/* -------------------------------------------------------------- totals */
.tot-grid{display:grid;grid-template-columns:1fr 340px;gap:14px;align-items:start}
.tot{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.tot .row{display:flex;justify-content:space-between;gap:14px;padding:6px 0;font-size:14px}
.tot .row.sub{border-top:1px solid var(--line);margin-top:5px;padding-top:9px}
.tot .row.big{font-size:19px;font-weight:750;border-top:2px solid var(--ink);
  margin-top:7px;padding-top:10px}
.tot .row.save{color:var(--green);font-weight:650}
.tot .row .v{font-variant-numeric:tabular-nums;font-weight:600}
.mgr-box{background:#15181d;color:#fff;border-radius:10px;padding:14px 16px;margin-top:12px}
.mgr-box .row{display:flex;justify-content:space-between;padding:5px 0;font-size:13.5px}
.mgr-box .row .v{font-family:var(--mono);font-weight:650}
.mgr-box h4{color:#fff;margin:0 0 8px;font-size:12px;text-transform:uppercase;
  letter-spacing:.07em;color:#98a1ad}

/* ------------------------------------------------------------- uploads */
.drop{border:2px dashed var(--line);border-radius:10px;padding:18px;text-align:center;
  color:var(--ink-3);font-size:13.5px;cursor:pointer;background:var(--panel-2)}
.drop:hover{border-color:var(--blue);color:var(--blue)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:11px}
.thumb{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.thumb img{width:100%;height:110px;object-fit:contain;background:#f0f2f5;display:block}
.thumb .t-body{padding:7px}
.thumb input{font-size:12px;padding:5px 7px}
.thumb .t-del{width:100%;margin-top:5px;font-size:12px;padding:4px}

/* -------------------------------------------------------- saved quotes */
table.saved{width:100%;border-collapse:collapse;font-size:13.5px}
table.saved th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-3);padding:0 9px 7px;border-bottom:1.5px solid var(--line)}
table.saved td{padding:10px 9px;border-bottom:1px solid var(--line-2)}
table.saved tr:hover td{background:var(--panel-2)}

/* ------------------------------------------------------------ workflow */
.steps{counter-reset:s;display:grid;gap:10px}
.step{display:flex;gap:12px;padding:13px 15px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:10px}
.step::before{counter-increment:s;content:counter(s);flex:none;width:25px;height:25px;
  border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;
  font-size:13px;font-weight:700}
.step .sb{flex:1}
.step h4{margin:1px 0 4px}
.step p{margin:0 0 7px;font-size:13.5px;color:var(--ink-2)}

/* ============================== PRINT DOCUMENT ========================== */
#doc{background:#fff}
/* THE DOCUMENT SETS ITS OWN TYPE.
   One family from the cover to the signature block. Figures line up through
   tabular-nums rather than a second, monospaced face — a customer-facing page
   that switches typeface halfway down reads as two documents stapled together. */
.pg,.pg *{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
  Helvetica,Arial,sans-serif}
.pg .num,.pg .v,.pg .p,table.doc td.r,table.doc th.r,.tot-doc .v{
  font-variant-numeric:tabular-nums}
.pg{width:210mm;min-height:297mm;padding:14mm 15mm 16mm;margin:0 auto 18px;background:#fff;
  box-shadow:var(--sh-lg);position:relative;page-break-after:always;break-after:page;
  display:flex;flex-direction:column}
.pg:last-child{page-break-after:auto;break-after:auto}
.pg-foot{position:absolute;left:15mm;right:15mm;bottom:8mm;border-top:1px solid var(--line);
  padding-top:5px;font-size:8.5pt;color:var(--ink-3);display:flex;justify-content:space-between}
.doc-head{display:flex;justify-content:space-between;align-items:flex-start;
  border-bottom:2.5px solid var(--brand-2);padding-bottom:9px;margin-bottom:14px}
.doc-head img{height:34px}
.doc-head .r{text-align:right;font-size:9pt;line-height:1.45;color:var(--ink-2)}
.doc-title{font-size:20pt;font-weight:750;letter-spacing:-.02em;margin:0}
.doc-sub{font-size:9pt;color:var(--ink-3);margin:1px 0 0}

/* The hand-built company profile that used .hero/.stats/.ph-box/.bullets and
   the rest was replaced on 16/09/2026 by the real profile document, which
   brings its own stylesheet. Those rules are gone: left in place they matched
   elements inside the embedded profile and repainted its stat tiles black. */

table.doc{width:100%;border-collapse:collapse;font-size:8.8pt}
table.doc th{background:#15181d;color:#fff;text-align:left;padding:6px 7px;
  font-size:7.6pt;text-transform:uppercase;letter-spacing:.045em;font-weight:700}
table.doc td{padding:6px 7px;border-bottom:1px solid var(--line);vertical-align:top}
table.doc tr:nth-child(even) td{background:#fafbfd}
table.doc td.r,table.doc th.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.doc td.c,table.doc th.c{text-align:center}
table.doc .was{text-decoration:line-through;color:var(--ink-3);font-size:8pt}
table.doc .cmt{font-size:7.8pt;color:var(--ink-2);font-style:italic;padding-top:2px}
table.doc .dsku{font-size:7.6pt;color:var(--ink-3);padding-top:1px}
table.doc img.pi{width:34px;height:34px;object-fit:contain;background:#f5f6f8;border-radius:4px}
/* Section heading on the printed quote — the one thing on the page bolder than
   the totals, because it is what a customer's eye uses to navigate. */
table.doc tr.dhead td{background:#15181d !important;color:#fff;font-weight:800;
  font-size:9.2pt;letter-spacing:.13em;text-transform:uppercase;padding:7px 8px;
  border-bottom:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}
/* ---- links in the document ----
   A link has to look like one. Underlined in MiFitness red, so on screen and in
   the PDF it reads as clickable — and the raw address is nowhere, because a URL
   typed out in the middle of a customer's quote is not a link, it is clutter. */
.pg a.plink{color:var(--ink);font-weight:700;text-decoration:underline;
  text-decoration-color:var(--ink-3);text-decoration-thickness:1px;
  text-underline-offset:2px}
.pg a.dlink{color:var(--ink-2);text-decoration:underline;
  text-decoration-color:var(--ink-3);text-underline-offset:2px;font-weight:600}
.pg a{color:var(--ink)}

.tot-doc{margin-left:auto;width:88mm;font-size:9.2pt;margin-top:10px}
.tot-doc .row{display:flex;justify-content:space-between;padding:4px 0}
.tot-doc .row.sub{border-top:1px solid var(--line);padding-top:6px;margin-top:3px}
.tot-doc .row.big{border-top:2px solid var(--ink);margin-top:5px;padding-top:7px;
  font-size:12pt;font-weight:750}
.tot-doc .row.save{color:var(--green);font-weight:700}
.tot-doc .v{font-variant-numeric:tabular-nums;white-space:nowrap}
.terms{margin-top:12px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:7px;padding:10px 12px;font-size:8.4pt;line-height:1.5}
.terms h4{font-size:8.5pt;margin:0 0 5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink)}
.terms ul{margin:0;padding-left:14px}
.sign{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:16px;font-size:8.5pt}
.sign .line{border-bottom:1px solid var(--ink);height:26px;margin-bottom:3px}

.prod-block:has(.imgs.noimg){grid-template-columns:1fr}
.prod-block .imgs.noimg{display:none}
.prod-block{display:grid;grid-template-columns:62mm 1fr;gap:11px;padding:11px 0;
  border-bottom:1px solid var(--line);break-inside:avoid;page-break-inside:avoid}
.prod-block .imgs{display:grid;gap:5px}
.prod-block .imgs img.main{width:100%;height:44mm;object-fit:contain;background:#f5f6f8;border-radius:6px}
.prod-block .imgs .strip{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.prod-block .imgs .strip img{width:100%;height:16mm;object-fit:contain;background:#f5f6f8;border-radius:4px}
.prod-block h4{font-size:11pt;margin:0 0 2px}
.prod-block .meta{font-size:8pt;color:var(--ink-3);margin-bottom:5px;letter-spacing:.01em}
.prod-block .blurb{font-size:8.6pt;line-height:1.5;margin-bottom:6px}
.prod-block .feat{margin:0 0 6px;padding-left:14px;font-size:8.4pt;line-height:1.5}
.spec-tbl{width:100%;border-collapse:collapse;font-size:8pt}
.spec-tbl td{padding:2.5px 6px;border-bottom:1px solid var(--line-2)}
.spec-tbl td:first-child{color:var(--ink-3);width:38%;font-weight:600}
.prod-price{display:flex;gap:14px;align-items:baseline;margin-top:6px;padding-top:6px;
  border-top:1px solid var(--line)}
.prod-price .p{font-size:13pt;font-weight:750;white-space:nowrap}
.prod-price .w{font-size:9pt;text-decoration:line-through;color:var(--ink-3)}
.prod-price a{font-size:8.4pt}
.supp-img{width:100%;border-radius:7px;border:1px solid var(--line);display:block;
  background:#f5f6f8;object-fit:contain;max-height:150mm}
.cust-logo-doc{max-height:22mm;max-width:52mm;object-fit:contain}

/* ------------------------------------------------------------ responsive */
@media (max-width:960px){
  .tot-grid{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  main{padding:10px}
  .panel{padding:13px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
  .cat-bar{grid-template-columns:1fr}
  .topbar{padding:8px 10px 0}
  .topbar-main{gap:8px 10px}
  .topbar img.logo{height:22px}
  .tabs{margin-top:7px;padding-top:6px;overflow-x:auto;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch}
  .tabs button{padding:7px 10px;font-size:12.5px}
  #miniCart{right:10px;bottom:10px;width:calc(100vw - 20px);max-width:272px}
  .pg{width:auto;min-height:0;padding:12px;box-shadow:none;border:1px solid var(--line);
    border-radius:8px;margin-bottom:12px}
  .pg-foot{position:static;margin-top:14px}
  .bullets{columns:1}
  .prod-block{grid-template-columns:1fr}
  .tot-doc{width:100%}
  .two,.three{grid-template-columns:1fr}
  .hero img{height:34mm}
  .ph-box img{height:28mm}
}

/* ---------------------------------------------------------------- print */
@media print{
  @page{size:A4;margin:0}
  html,body{background:#fff !important}
  .topbar,#gate,.noprint{display:none !important}
  /* Whitelist, not blacklist: the printed document is #doc and nothing else.
     Every control panel and quote section on screen is for the salesperson —
     one of them reaching a customer PDF is the kind of mistake you only find
     out about afterwards. */
  section[data-pane] > .panel,
  section[data-pane] > .qsecs,
  section[data-pane] > .vatbar,
  section[data-pane] > .tot-grid,
  #quoteAlerts{display:none !important}
  main{padding:0;max-width:none}
  #doc{display:block !important}
  .pg{width:210mm;min-height:297mm;overflow:visible;box-shadow:none;margin:0;border:none;border-radius:0;
    padding:14mm 15mm 16mm}
  .prod-block,.stat,.ph-box,tr{break-inside:avoid;page-break-inside:avoid}
  table.doc thead{display:table-header-group}
  a{color:var(--ink);text-decoration:none}
  .tot-doc .row.big{font-size:12pt}
}

/* Sub-categories of the selected navigation group — one level below the top
   row, so the catalogue reads like the website drop-down. */
.cat-filters.cat-subs{margin-top:-2px;padding-left:14px;border-left:2px solid var(--ink)}
.cat-filters.cat-subs .fchip{font-size:12.5px;padding:5px 10px}

/* ------------------------------------------------------ catalogue sort */
.catsort{font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.catsort-sel{padding:6px 10px;border:1px solid var(--line);border-radius:20px;
  background:#fff;font-family:inherit;font-size:13px;color:var(--ink-2);cursor:pointer}
.catsort-sel:focus{outline:none;border-color:var(--ink)}
@media (max-width:560px){
  .catsort{display:none}
  .catsort-sel{flex:1 1 100%;border-radius:8px}
}

/* ---------------------------------------------- catalogue quantity + add */
.card{display:flex;flex-direction:column}
.card .body{flex:1}
.card.on-quote{box-shadow:inset 0 0 0 2px var(--ink)}
.card .nm a{color:inherit;text-decoration:none}
.card .nm a:hover{text-decoration:underline}
.qrow{display:flex;border-top:1px solid var(--line);margin-top:auto}
.qrow .qty{display:flex;border-right:1px solid var(--line);flex:none}
.qrow .qty button{width:30px;border:0;background:var(--panel);cursor:pointer;font-size:17px;line-height:1;color:var(--ink)}
.qrow .step button:hover{background:var(--line-2)}
.qrow .qty input{width:44px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);
  text-align:center;font-family:var(--mono);font-size:14px;padding:9px 0;background:var(--panel);
  -moz-appearance:textfield;color:var(--ink)}
.qrow .qty input::-webkit-outer-spin-button,
.qrow .qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qrow .addbtn{flex:1;min-width:0;border:0;background:var(--panel);cursor:pointer;font-size:12.5px;
  font-weight:650;padding:9px 4px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qrow .addbtn:hover{background:var(--ink);color:#fff}
.qrow .addbtn.on{background:var(--ink);color:#fff}

/* ------------------------------------------------------------ mini cart */
/* Stat tiles across the top of Inventory health and the Margin report. The
   1px gap over a line-coloured background draws the rules between them, so
   they read as one strip. auto-fit, not auto-fill: auto-fill reserves empty
   tracks and strands the tiles two-thirds of the way across. */
.hstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin:2px 0 16px}
.hstat{background:#fff;padding:12px 14px}
.hstat .hv{font-size:20px;font-weight:750;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.hstat .hl{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:6px;line-height:1.35}

/* --------------------------------------------------------- full picture */
#lightbox{position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,.88);display:flex;
  align-items:center;justify-content:center;padding:32px;cursor:zoom-out}
#lightbox figure{margin:0;max-width:min(1000px,92vw);max-height:88vh;display:flex;
  flex-direction:column;align-items:center;gap:12px}
#lightbox img{max-width:100%;max-height:78vh;object-fit:contain;background:#fff;border-radius:8px}
#lightbox figcaption{color:#fff;font-size:13.5px;text-align:center;max-width:70ch}
#lightbox button{position:absolute;top:14px;right:18px;background:none;border:0;color:#fff;
  font-size:34px;line-height:1;cursor:pointer}
.card .ph[data-zoom]{cursor:zoom-in}
.card .ontot{font-size:11.5px;font-family:var(--mono);color:var(--ink-2);
  background:var(--panel-2);border-top:1px solid var(--line-2);padding:5px 10px}
.card .ontot b{font-weight:700;color:var(--ink)}

/* The customer / manager toggle is styled once, up in the chrome block. */

/* A margin warning a salesperson sees WITHOUT ever seeing the figure itself. */
.card .mflag{font-size:11px;font-weight:700;letter-spacing:.02em;padding:4px 7px;border-radius:6px;
  display:inline-block;align-self:flex-start}
.card .mflag.amber{background:var(--amber-soft);color:var(--amber);border:1px solid var(--amber)}
.card .mflag.red{background:var(--red-soft);color:var(--red-dark);border:1px solid var(--red)}
.card .mflag.plain{background:var(--blue-soft);color:var(--ink);border:1px solid var(--line)}
/* No average cost in Dear: there is no margin to show, and a blank would read
   as "fine". The line says so instead, in both views. */
.card .mflag.nocost-flag{background:var(--amber-soft);color:var(--amber);
  border:1px dashed var(--amber);white-space:normal;line-height:1.35;max-width:100%}
.nocost{color:var(--amber);font-weight:600}
/* Weighted GP is the figure that decides anything; the per-quote average is a
   cross-check and is set back so the two are never read as equals. */
.colsub{display:block;font-weight:500;text-transform:none;letter-spacing:0;
  font-size:10px;color:var(--ink-3)}
.colsoft{opacity:.62}
.mrnotes{margin:0 0 4px;padding-left:20px;line-height:1.6}
.mrnotes li{margin-bottom:4px}

/* ----------------------------------------------------------------- TODAY
   The consultant's dashboard. Everything is their own; no cost price appears
   anywhere on it, in either view. */
.tdhead{display:flex;align-items:baseline;gap:14px;margin:2px 0 14px}
.tdhead h1{margin:0;font-size:23px;font-weight:700;letter-spacing:-.01em}
.tdresume{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.tdresume-txt{flex:1 1 320px;display:flex;flex-direction:column;gap:3px}
.tdresume-q{font-size:16px;font-weight:700}
.tdsub{margin:18px 0 6px;font-size:13px;font-weight:700;letter-spacing:.02em}
.tdsub:first-of-type{margin-top:6px}

.tdrow{display:grid;grid-template-columns:1fr 180px 104px 78px;gap:12px;align-items:center;
  padding:10px 2px;border-top:1px solid var(--line-2)}
.tdrow-title{font-size:13.5px;font-weight:600;line-height:1.35}
.tdrow-sub{font-size:12px;margin-top:2px}
.tdrow-right{font-size:13px;text-align:right}
.tdrow-chip{text-align:right}
.tdrow-go{text-align:right}
/* A left edge carries the kind, so the three lists stay distinguishable when
   they run together down a long page. */
.tdrow.bad{border-left:3px solid var(--red);padding-left:9px}
.tdrow.warn{border-left:3px solid var(--amber);padding-left:9px}
.tdrow.ok{border-left:3px solid var(--gp-blue);padding-left:9px}

.tdstat,.tdclose{padding:5px 7px;font-size:12.5px;max-width:150px}

/* ---- leaderboard: five small boards, everyone sees the same ones ---- */
.lbgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.lbcard{background:#fff;padding:13px 14px 12px;display:flex;flex-direction:column;gap:7px}
.lbtitle{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;line-height:1.35}
.lbempty{font-size:12px;line-height:1.45}
.lbrow{display:grid;grid-template-columns:20px 1fr auto;gap:8px;align-items:baseline;
  padding:5px 6px;border-radius:6px;margin:0 -6px}
.lbrow.me{background:var(--brand-soft)}
.lbpos{font-size:11.5px;font-weight:800;color:var(--ink-3);font-variant-numeric:tabular-nums}
.lbrow.me .lbpos{color:var(--ink)}
.lbname{font-size:13px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.lbyou{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700}
/* On a narrow card the name matters more than the tag — the row is already
   shaded for the person reading it. */
@media screen and (max-width:1180px){ .lbyou{display:none} }
.lbval{font-size:13px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.lbsub{display:block;font-size:10.5px;font-weight:500;color:var(--ink-3);margin-top:1px}
.lbgap{text-align:center;color:var(--ink-3);font-size:13px;line-height:1;margin:-2px 0}

/* ---- the Parcel Perfect contents grid ---- */
.pp{margin-top:14px;border-top:1px dashed var(--line);padding-top:12px}
.pphead{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:13px}
.pptbl th,.pptbl td{font-size:12.5px;padding:6px 8px}
.pptbl td.num{font-variant-numeric:tabular-nums}

/* ---- delivery and installation, each its own block ---- */
.svc{border:1px solid var(--line);border-radius:10px;padding:13px 14px;margin-bottom:12px;
  background:var(--panel)}
.svc.needed{border-color:var(--red);background:var(--red-soft)}
.svchead{display:flex;align-items:center;gap:9px;margin-bottom:10px;font-size:14px}
.svcgrid{display:grid;grid-template-columns:1fr 1fr 150px;gap:12px;align-items:start}
.svcgrid .f{margin-bottom:4px}
.svcgrid .tiny{margin-top:4px;line-height:1.4}
.svcout{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:7px 0 0;margin-top:9px;border-top:1px solid var(--line-2);font-size:13px}
.svcout.saving{color:var(--amber);border-top:0;padding-top:2px}
.svcout.mgr{color:var(--ink-3)}
.svcv{font-weight:700;font-variant-numeric:tabular-nums}
.svctot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:11px 14px;border-radius:10px;background:var(--ink);color:#fff;font-size:13.5px}
@media screen and (max-width:720px){ .svcgrid{grid-template-columns:1fr} }
tr.tdexp td{background:var(--red-soft)}
@media screen and (max-width:760px){
  .tdrow{grid-template-columns:1fr 90px;gap:8px}
  .tdrow-right,.tdrow-chip,.tdrow-go{text-align:left;grid-column:1/-1}
}

/* ------------------------------------------------------------- RFQ intake
   The UAE tool's layout, in this tool's black and white. The confidence chip
   keeps its colours: a consultant has to tell a strong match from a guess at a
   glance, and greyscale cannot carry that safely. */
.rfqdrop{border:2px dashed var(--line);border-radius:11px;min-height:104px;display:flex;
  align-items:center;justify-content:center;text-align:center;padding:18px;cursor:pointer;
  background:var(--panel-2);margin-top:12px}
.rfqdrop:hover,.rfqdrop.on{border-color:var(--ink);background:var(--brand-soft)}
.rfqhead{font-weight:800;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);background:var(--line-2);padding:6px 11px;border-radius:6px;margin:14px 0 6px}
.rfqrow{display:grid;grid-template-columns:34px 1fr 1.35fr 84px 96px;gap:11px;align-items:start;
  padding:9px 4px;border-top:1px solid var(--line)}
.rfqrow.off{opacity:.42}
.rfqrow .asked{font-size:12.5px;font-weight:600;line-height:1.35}
.rfqrow .rfqtick{display:flex;align-items:center;justify-content:center;padding-top:5px}
.rfqrow input[type=checkbox]{width:17px;height:17px;accent-color:var(--ink)}
.rfqrow select,.rfqrow input[type=number]{padding:6px 8px;font-size:12.5px;width:100%}
.rfqconf{padding-top:5px;text-align:right}
.cf{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10.5px;font-weight:800;
  letter-spacing:.05em;white-space:nowrap}
.cf.strong{background:var(--gp-blue-soft);color:var(--gp-blue)}
.cf.fair{background:var(--line-2);color:var(--ink)}
.cf.close{background:var(--amber-soft);color:var(--amber);border:1px solid var(--amber)}
.cf.weak{background:var(--amber-soft);color:var(--amber)}
.cf.none{background:var(--red-soft);color:var(--red-dark)}
@media screen and (max-width:680px){
  .rfqrow{grid-template-columns:28px 1fr;gap:8px}
  .rfqrow .rfqpick,.rfqrow .rfqqty,.rfqrow .rfqconf{grid-column:2}
  .rfqconf{text-align:left}
}

/* ================================================= QUOTE: VAT + SECTIONS */
.vatbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:14px}
.vatbar .vl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.vatseg{display:flex;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:3px;gap:3px}
.vatseg button{border:0;background:transparent;color:var(--ink-3);padding:7px 15px;border-radius:6px;
  font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.vatseg button.on{background:var(--ink);color:#fff}
.vatwarn{font-size:12.5px;font-weight:600;color:var(--amber);background:var(--amber-soft);
  border:1px solid var(--amber);border-radius:7px;padding:5px 10px}

  font-weight:700;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:9px}
  padding:0 14px;cursor:pointer;font-size:15px}
/* Maximised: this section fills the window so the salesperson can work in it */
body.qmax .qsec{display:none}
body.qmax .qsec.maxed{display:block;position:fixed;inset:56px 16px 16px;z-index:400;overflow:auto;
  box-shadow:0 20px 60px rgba(16,24,40,.28)}
body.qmax .qsec.maxed .qsec-b{display:block}
body.qmax #vatBar,body.qmax #quoteAlerts{display:none}

/* alternatives */
/* ---- out of stock: what we could sell instead ----
   auto-FIT, not auto-fill: with four alternatives and room for nine tracks,
   auto-fill leaves five empty columns and the row stops two thirds of the way
   across. auto-fit collapses the empty tracks so the cards use the full width.
   Nothing is truncated — a product name a salesperson cannot read is no use. */
.altrow{border:1px solid var(--line);border-radius:9px;padding:13px 15px;margin-bottom:12px}
.altrow .ah{font-weight:700;font-size:14px;margin-bottom:2px}
.altrow .as{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-bottom:11px}
.altopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.altopt{display:flex;flex-direction:column;gap:9px;border:1px solid var(--line);
  border-radius:9px;padding:11px;background:var(--panel-2);min-width:0}
.altopt .atop{display:flex;gap:10px;align-items:flex-start;min-width:0}
.altopt img,.altopt .noimg{width:46px;height:46px;object-fit:contain;background:#fff;
  border:1px solid var(--line-2);border-radius:6px;flex:none}
.altopt .ai{min-width:0;flex:1}
.altopt .an{font-size:12.5px;font-weight:650;line-height:1.35;overflow-wrap:anywhere}
.altopt .ap{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:3px;
  overflow-wrap:anywhere}
.altopt .abot{display:flex;align-items:center;gap:9px;margin-top:auto;
  padding-top:9px;border-top:1px solid var(--line-2)}
.altopt .apr{flex:1;min-width:0;font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums}
.altopt .adf{display:block;font-size:10.5px;font-weight:600;margin-top:1px}
.altopt .adf.up{color:var(--red-dark)}
.altopt .adf.down{color:var(--green)}
.altopt .adf.same{color:var(--ink-3)}
.altopt button{border:1px solid var(--ink);background:var(--ink);color:#fff;border-radius:7px;
  padding:7px 13px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;flex:none}
.altopt button:hover{background:#000;border-color:#000}
.altopt button:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}

/* ------------------------------------------- consignment weight / volume */
.nodim{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.03em;
  color:var(--amber);background:var(--amber-soft);border:1px solid var(--amber);
  border-radius:5px;padding:1px 6px;margin-top:4px}
.consgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.consgrid>div{background:#fff;padding:10px 12px}
.consgrid .cv{font-size:17px;font-weight:750;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.consgrid .cl{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:5px;line-height:1.4}
.consbad{margin-top:10px;font-size:12.5px;background:var(--red-soft);border:1px solid var(--red);
  color:var(--red-dark);border-radius:8px;padding:9px 11px}
.conswarn{margin-top:8px;font-size:12.5px;background:var(--amber-soft);border:1px solid var(--amber);
  color:var(--amber);border-radius:8px;padding:9px 11px}
.dimsim{display:inline-block;font-size:10.5px;font-weight:600;color:var(--blue);
  background:var(--blue-soft);border:1px solid var(--blue);border-radius:5px;padding:1px 6px;margin-top:4px}

/* ===== Customer lookup (Dear type-ahead) & export rows ===== */
.lookup{position:relative}
.lookres{
  position:absolute; z-index:40; left:0; right:0; top:calc(100% + 4px);
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-lg); max-height:300px; overflow:auto;
}
.lookrow{
  display:block; width:100%; text-align:left; background:none; border:0;
  padding:9px 12px; cursor:pointer; font:inherit; color:var(--ink);
  border-bottom:1px solid var(--line-2);
}
.lookrow:last-child{border-bottom:0}
.lookrow:hover,.lookrow:focus{background:var(--brand-soft); outline:none}
.lookrow .ln{display:block; font-weight:600}
.lookrow .lm{display:block; font-size:12px; color:var(--ink-3); margin-top:2px}
.lookstate{font-size:12.5px; color:var(--ink-3); margin-top:6px; min-height:1px}
.lookstate:empty{margin-top:0}
.lookstate.ok{color:var(--green)}
.lookstate.warn{color:var(--amber)}
.lookstate.err{color:var(--red-dark)}
.lookstate.new{color:var(--amber)}
.lookstate .btn{margin-left:8px}
.exprow{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.exprow .tiny{color:var(--ink-3)}
.custline{display:flex; gap:8px; align-items:flex-start}
.custline .lookup{flex:1 1 auto}
.custline .btn{flex:0 0 auto; margin-top:1px}

/* =====================================================================
   COLLAPSIBLE QUOTE SECTIONS
   Ported from the UAE Quote Calculator, which solved this already: a stack
   of cards on one scroll means nothing stands out. Each section is a native
   <details>, and a CLOSED section still carries a one-line summary of what is
   inside it, so nobody has to open all nine to find where something lives.
   The summary carries the FINDING, not the label — "3 covered by stock ·
   2 short" rather than "stock".
   ===================================================================== */
.qsec{background:var(--panel);border:1px solid var(--line);border-radius:12px;
      margin-bottom:12px;overflow:hidden}
.qsec[open]{border-color:var(--brand);box-shadow:0 1px 3px rgba(16,24,40,.06)}
.qsec>summary{list-style:none;cursor:pointer;padding:15px 18px;display:flex;
              align-items:center;gap:12px;user-select:none}
.qsec>summary::-webkit-details-marker{display:none}
.qsec>summary:hover{background:rgba(0,0,0,.02)}
.qsec>summary:focus-visible{outline:2px solid var(--brand-2);outline-offset:-2px}
.qsig{flex:none;width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line);
      position:relative;transition:transform .15s ease,border-color .15s ease}
.qsig::before,.qsig::after{content:"";position:absolute;background:var(--ink-3);border-radius:1px}
.qsig::before{left:5px;right:5px;top:9.25px;height:1.5px}
.qsig::after{top:5px;bottom:5px;left:9.25px;width:1.5px;transition:opacity .15s ease}
.qsec[open]>summary .qsig{border-color:var(--brand);transform:rotate(90deg)}
.qsec[open]>summary .qsig::after{opacity:0}
.qst{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.qsm{font-size:12px;color:var(--ink-3);font-weight:500;margin-left:auto;text-align:right;
     white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52%}
.qsb{padding:0 18px 16px;border-top:1px solid var(--line)}
.qsblurb{margin:12px 0 14px;font-size:13px;color:var(--ink-3)}
/* panels keep their spacing but lose the second border inside a section */
.qsb .panel{border:0;background:transparent;padding:0;margin-bottom:20px;box-shadow:none}
.qsb .panel:last-of-type{margin-bottom:0}
.qsb .panel+.panel{padding-top:16px;border-top:1px dashed var(--line)}
.qsave{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
       display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* a row per brand / per group, for the ladders */
.brandrow{display:flex;align-items:center;gap:10px;padding:9px 0;
          border-bottom:1px dashed var(--line);flex-wrap:wrap}
.brandrow:last-child{border-bottom:0}
.brandrow .bn{font-weight:700;min-width:150px}
.brandrow .bc{font-size:12px;color:var(--ink-3);min-width:130px}
.brandrow input[type=number]{width:96px}
.brandrow.none .bn,.brandrow.none .bc{opacity:.45}

/* switches for the show/hide settings */
.toggle{display:flex;align-items:center;gap:9px;font-weight:650;font-size:13px;cursor:pointer}
.toggle input{display:none}
.switch{position:relative;width:40px;height:22px;background:#cfd6dc;border-radius:12px;
        transition:.15s;flex:none}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;
               background:#fff;border-radius:50%;transition:.15s}
input:checked+.switch{background:var(--brand-2)}
input:checked+.switch::after{transform:translateX(18px)}

/* drop zone for a Dear export */
.drop{border:2px dashed var(--line);border-radius:10px;padding:22px;text-align:center;
      cursor:pointer;color:var(--ink-3);font-size:13.5px;background:var(--panel-2)}
.drop:hover,.drop.over{border-color:var(--brand);color:var(--ink);background:var(--brand-soft)}

/* What comes out of the printer if someone prints from manager view. */
#mgrPrintStop{display:none;padding:60px 40px;font-family:inherit}
#mgrPrintStop h1{font-size:26px;margin:0 0 14px}
#mgrPrintStop p{font-size:14px;line-height:1.6;max-width:56ch;color:#333}
#mgrPrintStop .big{margin-top:22px;padding:14px 18px;border:2px solid var(--red-dark);
  border-radius:8px;color:var(--red-dark);font-weight:700;display:inline-block;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
@media print{
  body.blockprint #mgrPrintStop{display:block !important}
  body.blockprint > *:not(#mgrPrintStop){display:none !important}
  .qsec,.qsec[open]{border:0;background:transparent;margin:0;overflow:visible;box-shadow:none}
  .qsec>summary{display:none}
  .qsb{border-top:0;padding:0}
}

/* The notification count sits in the closed section's summary, in red, so a
   warning is visible without opening anything. */
.qsm .cnt{display:inline-block;min-width:19px;padding:1px 7px;border-radius:10px;
  background:var(--red);color:#fff;font-weight:800;font-size:11.5px;
  font-variant-numeric:tabular-nums;margin-left:6px}
.qsm .cnt.clear{background:var(--green-soft);color:var(--green);font-weight:700}
#qs-alerts[open]{border-color:var(--red)}
#qs-alerts .qsb .alert:last-child{margin-bottom:0}

/* =====================================================================
   QUOTE TABLE — column widths, section headings, row reordering
   The item column takes whatever is left; every other column is sized to
   what it actually holds, so Qty stops being a hand's width for two digits.
   ===================================================================== */
table.q th.c-item,table.q td.c-item{width:auto;min-width:260px}
table.q th.c-eta,table.q td.c-eta{width:158px}
table.q th.c-qty,table.q td.c-qty{width:62px;text-align:center}
table.q th.c-list,table.q td.c-list{width:104px}
table.q th.c-wdisc,table.q td.c-wdisc{width:84px}
table.q th.c-xdisc,table.q td.c-xdisc{width:96px}
table.q th.c-unit,table.q td.c-unit{width:106px}
table.q th.c-total,table.q td.c-total{width:118px}
table.q th.c-cost,table.q td.c-cost{width:96px}
table.q th.c-gpr,table.q td.c-gpr{width:88px}
table.q th.c-gpp,table.q td.c-gpp{width:72px}
table.q th.c-act,table.q td.c-act{width:46px}
.qty-in{width:46px;text-align:center;padding:6px 3px}
.lead-sel{width:150px;padding:6px 6px;font-size:12.5px}

/* A section heading, bolder than anything else in the table — it is what the
   customer's eye lands on when they scan a long quote. */
table.q tr.headrow td{
  background:var(--ink);color:#fff;padding:11px 12px;
  border-bottom:0;border-top:2px solid var(--ink)}
table.q tr.headrow:hover td{background:var(--ink)}
table.q tr.headrow:first-child td{border-top:0}
.headrow .hd{font-size:14px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.headrow .hdctl{float:right;display:flex;gap:6px}
.headrow .hdctl button{background:transparent;border:1px solid #4a545e;color:#c3c9d2;
  border-radius:6px;padding:3px 9px;font:inherit;font-size:11px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.headrow .hdctl button:hover{background:#20272e;color:#fff;border-color:#6a747e}

/* "+ Heading above this line" — quiet until the row is hovered, so 40 lines
   do not turn into 40 shouting buttons. */
/* The insert strip: a hairline exactly where the heading will land, with the
   product it will sit above named on it. Quiet until you go near it, so forty
   lines do not become forty shouting buttons. */
table.q tr.addhdrow td{padding:0;border-bottom:0;position:relative;height:16px}
table.q tr.addhdrow:hover td{background:transparent}
.addhd{
  display:block;width:100%;background:none;border:0;border-top:1px dashed var(--line);
  color:var(--ink-3);font:inherit;font-size:11px;font-weight:600;letter-spacing:.02em;
  text-align:left;padding:3px 10px 3px 66px;cursor:pointer;opacity:.42;
  transition:opacity .12s ease,color .12s ease,background .12s ease}
table.q tr.addhdrow:hover .addhd,.addhd:hover,.addhd:focus-visible{
  opacity:1;color:var(--ink);background:var(--brand-soft);
  border-top-color:var(--brand);border-top-style:solid}
.addhd:focus-visible{outline:2px solid var(--brand-2);outline-offset:-2px}
@media(hover:none){.addhd{opacity:1}}

/* Drag to reorder. Grip, drop indicator, and the same move from the keyboard. */
table.q th.c-grip,table.q td.c-grip{width:60px;white-space:nowrap;color:var(--ink-3);
  font-variant-numeric:tabular-nums;font-size:12px}
.grip{display:inline-block;cursor:grab;touch-action:none;color:#b9c2ca;font-size:15px;
  line-height:1;padding:3px 4px;margin-right:5px;border-radius:4px;user-select:none;
  vertical-align:middle}
.grip:hover{background:var(--line-2);color:var(--ink)}
.grip:focus{outline:2px solid var(--brand-2);outline-offset:0;color:var(--ink)}
.grip:active{cursor:grabbing}
.lno{vertical-align:middle}
table.q tr.dragging{opacity:.35}
table.q tr.dropbefore td{box-shadow:inset 0 3px 0 var(--brand-2)}
table.q tr.dropafter td{box-shadow:inset 0 -3px 0 var(--brand-2)}

/* The headings panel above the table */
.hdrow{display:flex;gap:10px;align-items:center;padding:9px 0;
  border-bottom:1px dashed var(--line);flex-wrap:wrap}
.hdrow:last-child{border-bottom:0}
.hdrow .t{font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase}

/* Printed: the heading stays, the controls do not. */
@media print{
  table.q tr.headrow td{background:#111 !important;color:#fff !important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .grip,.addhd,.hdctl{display:none !important}
}

/* Per-brand ETA rows */
#brandLeadBox .brandrow select{width:190px}
body.dragging-line{cursor:grabbing}
body.dragging-line *{cursor:grabbing !important}

/* =====================================================================
   BLACK AND WHITE — the MiFitness scheme.
   Nothing a customer sees carries an accent colour. The only colour left in
   the app is a WARNING, and warnings are .noprint or manager-only, so they
   cannot reach a document.
   ===================================================================== */
.pg, .pg *, #doc, #propDoc {
  /* The accent is gone, and the greys are true neutrals rather than the slate
     the screen uses — a grey with a blue cast still reads as a colour on paper. */
  --red: #000000; --red-dark: #000000; --red-soft: #f4f4f4;
  --blue: #000000; --blue-soft: #f4f4f4;
  --ink: #000000; --ink-2: #3d3d3d; --ink-3: #767676;
  --line: #d6d6d6; --line-2: #ebebeb;
  --green: #3d3d3d; --green-soft: #f4f4f4;
  --amber: #3d3d3d; --amber-soft: #f4f4f4;
}
.pg .chip.sale, table.doc .chip.sale{background:var(--brand-2);color:#fff}

/* =====================================================================
   COMPANY PROFILE PAGES
   The profile is a finished A4 document in its own right and goes in whole —
   its own markup, its own typography, no header or footer laid over it. The
   .pg gives it the page box; everything inside is the profile's own CSS,
   namespaced under .cprof so the two stylesheets cannot collide.
   ===================================================================== */
.pg.profile-pg{padding:0;overflow:hidden;display:block;background:#fff}
.pg.profile-pg > .cprof{width:100%;height:100%;display:block}
/* The profile's page sizes itself; inside our .pg it fills it instead. */
.pg.profile-pg .cprof .page{width:100%;height:100%;box-shadow:none;margin:0}
.pg.profile-pg .cprof{color:#0E1114}
.pg.profile-pg img{max-width:none}
@media print{
  .pg.profile-pg{padding:0}
  .pg.profile-pg .cprof .page{width:210mm;height:297mm}
  /* The profile is black-on-dark in places; those blocks must actually print. */
  .pg.profile-pg .cprof *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media (max-width:640px){
  .pg.profile-pg{border:1px solid var(--line);border-radius:8px}
  .pg.profile-pg .cprof .page{height:auto;min-height:0}
}

/* ---- proposal cover ----
   The square lockup, black because the page is white, sitting in the upper
   third. Everything used to be centred as one block in the middle of an
   otherwise empty A4 page; the content now starts near the top and the
   reference details sit at the foot, the way a cover page actually reads. */
.pg.cover-pg{display:flex;flex-direction:column;text-align:center;
  padding:26mm 20mm 16mm}
.pg .cover-top{flex:0 0 auto}
.pg .cover-logo{width:38mm;height:auto;display:block;margin:0 auto 14mm;
  object-fit:contain}
.pg .cover-wordmark{font-size:28pt;font-weight:750;margin:0 auto 14mm}
.pg .cover-eyebrow{font-size:9pt;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;margin-bottom:9px}
.pg .cover-title{font-size:27pt;line-height:1.1;margin:0 0 18px;letter-spacing:-.02em}
.pg .cover-rule{width:64px;height:3px;background:#000;margin:0 auto 20px}
.pg .cover-label{font-size:9pt;color:var(--ink-3);letter-spacing:.14em;text-transform:uppercase}
.pg .cover-for{font-size:17pt;font-weight:700;margin:5px 0 0}
.pg .cover-cust{margin:16px auto 0;padding-top:14px;border-top:1px solid var(--line);
  max-width:110mm;display:flex;justify-content:center}
.pg .cust-logo-doc{max-height:24mm;max-width:90mm;object-fit:contain}
.pg .cover-intro{max-width:132mm;margin:18px auto 0;font-size:9.6pt;
  line-height:1.6;color:var(--ink-2)}
.pg .cover-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);
  font-size:9pt;color:var(--ink-3);line-height:1.65}

/* =============================================================================
   CRM — deals board, call sheet rows, drawer, modals
   ========================================================================== */
.crmboard{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
@media (max-width:1100px){.crmboard{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.crmboard{grid-template-columns:1fr}}
.crmcol{background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r);padding:9px}
.crmcolhead{display:flex;justify-content:space-between;align-items:baseline;gap:6px;
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-3);padding:0 2px 8px;border-bottom:1px solid var(--line-2);margin-bottom:8px}
.crmcolhead span{font-weight:500;letter-spacing:0;text-transform:none;font-size:11px}
.crmcard{display:block;width:100%;text-align:left;background:var(--panel);
  border:1px solid var(--line);border-radius:8px;padding:9px 10px;margin-bottom:7px;
  cursor:pointer;font:inherit;color:inherit}
.crmcard:hover{border-color:var(--ink-3)}
.crmcard.late{border-left:3px solid var(--red)}
.crmco{font-weight:700;font-size:13.5px;line-height:1.3}
.crmti{font-size:12px;color:var(--ink-2);margin-top:2px}
.crmmeta{font-size:11.5px;color:var(--ink-3);margin-top:4px}
.crmnext{font-size:11.5px;margin-top:5px;padding-top:5px;border-top:1px dashed var(--line-2);
  color:var(--ink-2)}
.crmnext.late{color:var(--red-dark);font-weight:600}
.crmnext.none{color:var(--amber)}

.crmback{position:fixed;inset:0;background:rgba(10,12,16,.45);z-index:900;
  display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:24px 16px}
.crmdraw,.crmmodal{background:var(--panel);border-radius:var(--r);box-shadow:var(--sh-lg);
  width:100%;max-width:760px;padding:18px 20px 22px;margin:auto 0}
.crmmodal{max-width:560px}
.crmdrawhead{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;
  padding-bottom:11px;border-bottom:1px solid var(--line)}
.crmdrawhead h3{margin:0;font-size:18px}
.crmdrawhead .spacer,.crmdrawhead>div:first-child{flex:1}
.crmgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:11px}
.crmf{display:flex;flex-direction:column;gap:4px}
.crmf input,.crmf select,.crmf textarea{width:100%}
.crmlost{margin-top:12px;padding:10px 12px;border-radius:6px;background:var(--red-soft);
  color:var(--red-dark);font-size:13px}
.crmreasons{display:grid;grid-template-columns:1fr;gap:2px;margin-top:10px}
.crmradio{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:6px;
  font-size:13.5px;cursor:pointer}
.crmradio:hover{background:var(--brand-soft)}
.crmradio input{margin:0}
.crmlog{list-style:none;margin:6px 0 0;padding:0}
.crmlog li{border-left:2px solid var(--line);padding:0 0 12px 12px;position:relative}
.crmlogtop{display:flex;gap:8px;align-items:baseline;font-size:13px;flex-wrap:wrap}
.crmlogtop .muted{margin-left:auto;font-size:11.5px}
.crmlognote{font-size:13px;color:var(--ink-2);margin-top:3px;white-space:pre-wrap}

.tdwho .tdreps{display:flex;flex-wrap:wrap;gap:6px}
.tdrep{display:flex;flex-direction:column;gap:1px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:8px;padding:7px 11px;font:inherit;
  font-size:13px;font-weight:600;color:inherit;cursor:pointer;text-align:left}
.tdrep span{font-size:11px;font-weight:400;color:var(--ink-3)}
.tdrep:hover{border-color:var(--ink-3)}
.tdrep.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tdrep.on span{color:rgba(255,255,255,.65)}

/* An arrival date on a card: out of stock, but we know when. */
.chip.eta{background:var(--amber-soft);color:var(--amber);border-color:transparent}
.etaline{font-size:11.5px;color:var(--amber);font-weight:600;margin-top:2px}
.etaline .muted{font-weight:400}
.etasrc{font-size:11px;color:var(--ink-3);margin-top:1px}
.etasrc.warn{color:var(--amber)}

/* A live courier rate */
.ppask{margin-top:12px;padding-top:11px;border-top:1px dashed var(--line)}
.pplaces{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ppplace{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;
  padding:6px 10px;font:inherit;font-size:12.5px;color:inherit;cursor:pointer}
.ppplace:hover{border-color:var(--ink-3)}
.ppplace.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.ppplace.on .muted{color:rgba(255,255,255,.7)}
.pprates{margin-top:10px}
.pprate{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:9px 12px;
  margin-bottom:6px;font:inherit;color:inherit;cursor:pointer;text-align:left}
.pprate:hover{border-color:var(--ink);background:var(--brand-soft)}
.pprate .prn{font-size:13px}
.pprate .prv{font-weight:700;font-size:14px;white-space:nowrap}

/* ---- the team (manager only) ---------------------------------------- */
.tdteam .tmtbl { width:100%; margin-top:6px }
.tdteam .tmtbl th { text-align:left; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted); padding:0 8px 6px 0 }
.tdteam .tmtbl td { padding:7px 8px 7px 0; border-top:1px solid var(--line);
  vertical-align:middle }
.tdteam .tmoff td { opacity:.5 }
.tdteam .tmchk { display:inline-flex; align-items:center; gap:5px; font-size:12.5px;
  margin-right:8px; white-space:nowrap }
.tdteam .tmadd { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:11px }
.ppsteps { margin:7px 0 0 }
.ppdiag { width:100%; margin-top:8px }
.ppdiag td { padding:5px 8px 5px 0; border-top:1px solid var(--line); vertical-align:top;
  word-break:break-all }
.ppdiag tr.ppok td { background:rgba(46,160,67,.12) }
.tdteam .tmform { margin-top:11px; padding:12px; border:1px solid var(--line); border-radius:9px }
.tdteam .tmgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px }
.tdteam .tmpinin { padding:4px 7px }

/* ---- whose Parcel Perfect login ------------------------------------- */
.ppwho { margin-bottom:9px }
.ppwhorow { display:flex; gap:9px; align-items:center; flex-wrap:wrap;
  padding:7px 9px; border:1px solid var(--line); border-radius:8px }
.ppsign { padding:11px; border:1px solid var(--line); border-radius:9px }
.ppsign .ppgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px }

/* ---- measuring a product the Bible does not have -------------------- */
.dimtbl { width:100%; margin-top:9px }
.dimtbl th { text-align:left; font-size:11px; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted); padding:0 6px 5px 0; font-weight:600 }
.dimtbl td { padding:5px 6px 5px 0; border-top:1px solid var(--line); vertical-align:middle }
.dimtbl td:first-child { width:42% }
.dimtbl .dimin { width:100%; min-width:58px; padding:4px 6px; text-align:right }
.nodim.byhand { color:#a86800 }

/* ---- uploading the Dimensions Bible --------------------------------- */
.dimmap { margin-top:11px; padding:12px; border:1px solid var(--line); border-radius:9px }
.dimgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr));
  gap:10px; margin-top:10px }
#dimAdminBody input[type=file] { font-size:13px }

/* ---- Inventory Health: one collapsed section per report -------------- */
.hsec { border:1px solid var(--line); border-radius:9px; margin-top:10px; overflow:hidden }
.hsec > summary { display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:11px 13px; list-style:none; user-select:none }
.hsec > summary::-webkit-details-marker { display:none }
.hsec > summary::before { content:'▸'; font-size:12px; color:var(--muted);
  transition:transform .12s ease; flex:none }
.hsec[open] > summary::before { transform:rotate(90deg) }
.hsec > summary:hover { background:rgba(127,127,127,.06) }
.hsec .hsum { font-weight:600; font-size:14px }
.hsec .hn { margin-left:auto; font-size:12px; font-weight:600; padding:1px 8px;
  border-radius:999px; background:#a8161c; color:#fff }
.hsec .hn.zero { background:transparent; color:var(--muted); font-weight:500 }
.hsec .hsecb { padding:0 13px 13px }
.hsec .hsecb > p:first-child { margin-top:0 }
.hsec > summary .btn.hx { margin-left:10px; padding:2px 9px; font-size:11.5px; flex:none }
.hsec .hn + .btn.hx { margin-left:8px }
.hsec > summary .hn { margin-left:auto }
.hprio { padding:9px 11px; border-radius:8px; background:rgba(168,22,28,.08);
  border:1px solid rgba(168,22,28,.28); font-size:12.5px; line-height:1.45 }

/* ---- website health (marketing) ------------------------------------- */
.mktdo { margin:14px 0 4px; padding:12px 14px; border:1px solid var(--line);
  border-radius:10px; background:rgba(127,127,127,.05) }
.mktdo ol { margin:7px 0 0; padding-left:20px }
.mktdo li { margin:5px 0; font-size:13px; line-height:1.5 }
.mktpull { margin-top:12px }
/* A marketing sign-in has no cart, no quote chrome and no view toggle. */
body.mkt-mode #miniCart,
body.mkt-mode #viewTog,
body.mkt-mode #saveBtn,
body.mkt-mode #newQuoteBtn,
body.mkt-mode #qref { display:none !important }

/* ---- pro forma invoice ---------------------------------------------- */
.pfco{border:1px solid #cfd4dc;border-radius:4px;padding:8px 10px;margin:0 0 11px;
  font-size:8.4pt;line-height:1.45}
.pfco-n{font-weight:700;font-size:11pt}
.pfco-v{font-weight:600;margin-bottom:5px}
.pfco-a{margin-bottom:5px}
.pfco-e{margin-top:5px;padding-top:5px;border-top:1px solid #e6e9ee}
.pfbank{width:100%;border-collapse:collapse;font-size:9.2pt;margin-top:4px}
.pfbank th{text-align:left;width:150px;padding:4px 10px 4px 0;font-weight:600;
  border-bottom:1px solid #e6e9ee;vertical-align:top}
.pfbank td{padding:4px 0;border-bottom:1px solid #e6e9ee}
.pfref{font-size:8.8pt;margin:8px 0 0;font-weight:600}
.pfterms{font-size:8.6pt;line-height:1.5;margin:4px 0 0;padding-left:16px}
.pfterms li{margin-bottom:3px}
.pfnote{font-size:8.6pt;margin-top:12px;padding:7px 9px;border:1px solid #cfd4dc;
  border-radius:4px;font-weight:600}


/* ------------------------------------------------------------ admin tab */
/* One chip per table, so a manager can take a single table without
   downloading the whole database to get at it. */
.exgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.exchip{display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;
  font-family:inherit;cursor:pointer;text-align:left;color:var(--ink)}
.exchip:hover{border-color:var(--ink)}
.exchip b{font-size:13px;text-transform:capitalize}
.exchip span{font-size:11.5px;color:var(--ink-3)}
.exchip:disabled{opacity:.5;cursor:default}


/* --------------------------------------------------- sign-in gate fields */
/* The gate CARD is white on a dark page — the fields live on the card, so
   they are dark-on-light like every other field in the app. Written as
   white-on-white first time round, which rendered as an invisible form. */
.gate-card .gfield{text-align:left;margin-bottom:12px}
.gate-card .gfield label{display:block;font-size:12.5px;font-weight:600;
  color:var(--ink-2);margin:0 0 5px}
.gate-card .gfield input{width:100%;padding:12px 13px;border-radius:10px;
  border:1.5px solid var(--line);background:#fff;
  color:var(--ink);font:inherit;font-size:15px;-webkit-appearance:none}
.gate-card .gfield input:focus{outline:none;border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(21,24,29,.07)}
.gate-card .gfield input::placeholder{color:var(--ink-3)}
.gate-card #gSignin{margin-top:16px}

/* ------------------------------------------------------ team, admin tab */
/* A plain text button. Used where a full button would shout on a table row. */
.lnk{background:none;border:0;padding:0;font:inherit;color:var(--ink-2);
  text-decoration:underline;cursor:pointer}
.lnk:hover{color:var(--ink)}
.tmedit input{width:100%;margin-bottom:5px;padding:6px 8px;border:1px solid var(--line);
  border-radius:7px;font:inherit;font-size:12.5px}

/* The invite link, shown once. */
.invmask{position:fixed;inset:0;background:rgba(10,12,15,.55);z-index:9998;
  display:flex;align-items:center;justify-content:center;padding:20px}
.invcard{background:#fff;border-radius:13px;padding:22px 22px 20px;max-width:560px;width:100%;
  box-shadow:0 22px 60px rgba(0,0,0,.35)}
.invurl{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  padding:10px 11px;border:1px solid var(--line);border-radius:9px;resize:vertical;
  background:#f7f8fa;color:var(--ink);word-break:break-all}


/* --------------------------------------------------------- the idle lock */
/* A quiet warning, bottom-right, 45 seconds before the screen locks itself.
   Deliberately not a modal: it must not steal a click from somebody who is
   mid-sentence with a customer. */
.idlewarn{position:fixed;right:18px;bottom:18px;z-index:9997;max-width:290px;
  background:#15181d;color:#fff;padding:13px 15px;border-radius:11px;
  box-shadow:0 10px 32px rgba(0,0,0,.35);font-size:13px;line-height:1.45;
  pointer-events:none;animation:idlein .2s ease-out}
.idlewarn b{display:block;font-size:13.5px;margin-bottom:3px}
.idlewarn span{color:rgba(255,255,255,.72)}
@keyframes idlein{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media print{.idlewarn{display:none}}

.pwshow{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;
  background:#f3f5f8;padding:4px 8px;border-radius:6px;letter-spacing:.02em;
  user-select:all;color:var(--ink)}


/* ============================================= the team, one line per person
   The fields ARE the row: they read as text until you click into one, so a
   table of 15 people does not look like a form with 60 boxes in it. */
.tmwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tmtbl{min-width:900px}
.tmtbl td{vertical-align:top}
.tmtbl input.cell,.tmtbl select.cell{width:100%;font:inherit;font-size:13px;
  padding:6px 8px;border:1px solid transparent;border-radius:7px;background:transparent;
  color:var(--ink);-webkit-appearance:none}
.tmtbl input.cell:hover,.tmtbl select.cell:hover{border-color:var(--line)}
.tmtbl input.cell:focus,.tmtbl select.cell:focus{outline:none;border-color:var(--ink);
  background:#fff;box-shadow:0 0 0 3px rgba(21,24,29,.06)}
.tmtbl select.cell{border-color:var(--line);background:#fff;cursor:pointer}
.tmtbl input.cell::placeholder{color:var(--ink-3);font-style:italic}
.tmtbl input.cell.saving{opacity:.55}
.tmtbl input.cell.saved{border-color:var(--green,#0f7a4a);
  box-shadow:0 0 0 3px rgba(15,122,74,.12)}

.tmdesk{display:flex;align-items:center;gap:5px;margin-top:5px;color:var(--ink-3);
  cursor:pointer;white-space:nowrap}
.tmdesk input{margin:0}

/* Every action on one strip, in the order somebody needs them. */
.tmacts{white-space:nowrap}
.tmacts .btn{margin:0 4px 4px 0}
.tmmsg{min-height:14px;white-space:normal;max-width:240px}
.tmmsg.ok{color:var(--green,#0f7a4a)}
.tmpinwrap{display:inline-flex;gap:5px;align-items:center;margin:0 4px 4px 0}
.tmpinwrap .tmpinin{width:92px;padding:5px 8px;border:1px solid var(--line);
  border-radius:7px;font:inherit;font-size:13px}

.tmnote{background:#fbf1df;color:#8a5a00;border-radius:9px;padding:10px 13px;
  font-size:13px;margin:0 0 11px;line-height:1.45}
.tmchk{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:13px;
  color:var(--ink-2);cursor:pointer}
.tmchk input{margin:0}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tmtbl input.cell:focus,
  :root:not([data-theme="light"]) .tmtbl select.cell{background:#1b1f26}
}


/* ======================================================== the busy bar
   A thin bar across the very top of the window whenever the tool is
   waiting on the server. It is the answer to "it looks like it has
   frozen": something on screen has to move, or people click again.
   Fixed to the viewport so it is visible from any scroll position, and
   above everything including the gate. */
/* overflow:hidden because the sliding bar inside animates out to 178% and,
   unclipped, made the whole DOCUMENT 10px wider than a 390px phone for as
   long as any request was in flight — a page that twitches sideways every
   time it loads. Found by the smoke test on 23/09/2026, not by eye. */
.netbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:10000;overflow:hidden;
  background:rgba(216,31,38,.16);opacity:0;transition:opacity .15s;pointer-events:none}
.netbar.on{opacity:1}
.netbar i{display:block;height:100%;width:38%;background:var(--brand-2,#d81f26);
  border-radius:0 2px 2px 0;animation:netslide 1.05s ease-in-out infinite}
@keyframes netslide{
  0%{transform:translateX(-100%)}
  60%{transform:translateX(178%)}
  100%{transform:translateX(178%)}
}
@media (prefers-reduced-motion: reduce){
  .netbar i{animation:none;width:100%;opacity:.55}
}
@media print{.netbar{display:none}}

/* A button that is waiting says so, rather than sitting there looking
   like it was never pressed. */
.btn.working{position:relative;color:transparent!important}
.btn.working::after{content:"";position:absolute;inset:0;margin:auto;
  width:13px;height:13px;border:2px solid currentColor;border-top-color:transparent;
  border-radius:50%;color:#fff;animation:btnspin .6s linear infinite}
@keyframes btnspin{to{transform:rotate(360deg)}}

/* The date reads first, the clock time sits back from it. Tabular figures so
   a column of dates lines up instead of shuffling column to column. */
.lastin{font-variant-numeric:tabular-nums;font-size:13px;white-space:nowrap}
.lastin .muted{font-size:12px}

/* The foot of the saved list: how many are showing, and how to get more. */
.savedfoot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}

/* A manager looking at a team they cannot change. */
.tmnote.readonly{background:var(--line-2,#f0f2f5);color:var(--ink-2)}
.chip.own{background:#2b2318;color:#e0ac5c}

/* The running total follows the quote, not the whole app. On Admin, the
   reports and the health screens there is no quote in play. */
#miniCart.offquote{display:none}
.repsaved{color:var(--green,#0f7a4a);font-weight:600;margin-left:8px}

/* ---------------------------------------- the unfinished-quote offer bar */
.resumebar{display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  background:#fff8e8;border:1px solid #f0dcb0;border-left:3px solid #c98a00;
  border-radius:0 10px 10px 0;padding:13px 16px;margin-bottom:14px}
.resumebar .rb-txt{flex:1 1 300px;min-width:0}
.resumebar .rb-h{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:#8a5a00;font-weight:600;margin-bottom:3px}
.resumebar .rb-q{font-size:15px;color:var(--ink)}
.resumebar .rb-m{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.resumebar .rb-act{display:flex;gap:8px;flex-wrap:wrap}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .resumebar{background:#2b2318;
    border-color:#443a28;border-left-color:#c98a00}
  :root:not([data-theme="light"]) .resumebar .rb-h{color:#e0ac5c}
}

/* --------------------------------------- over 450 kg: get a truck quoted */
.truckbox{background:#fff5e6;border:1px solid #f0d9ae;border-left:3px solid #c98a00;
  border-radius:0 10px 10px 0;padding:14px 16px;margin:12px 0}
.truckbox .tb-h{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:#8a5a00;font-weight:700;margin-bottom:6px}
.truckbox .tb-p{margin:0 0 10px;font-size:13.5px;line-height:1.5;color:var(--ink-2);
  max-width:74ch}
.truckbox .tb-warn{color:#8a5a00}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .truckbox{background:#2b2318;border-color:#443a28;
    border-left-color:#c98a00}
  :root:not([data-theme="light"]) .truckbox .tb-h,
  :root:not([data-theme="light"]) .truckbox .tb-warn{color:#e0ac5c}
}

/* ------------------------------------- a measurement that cannot be right */
.badm{background:#fdeaea;border:1px solid #f0cfcd;border-left:3px solid #c1141b;
  border-radius:0 10px 10px 0;padding:14px 16px;margin:12px 0}
.badm .bm-h{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:#a8161c;font-weight:700;margin-bottom:6px}
.badm .bm-p{margin:0 0 9px;font-size:13.5px;line-height:1.5;color:var(--ink-2);max-width:74ch}
.badm .bm-l{margin:0 0 9px;padding-left:18px;font-size:13px;line-height:1.55}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .badm{background:#301a1b;border-color:#46282a;
    border-left-color:#ff8a8d}
  :root:not([data-theme="light"]) .badm .bm-h{color:#ff8a8d}
}

/* ------------------------------------- the Bible's columns, before import */
.dimcols{border:1px solid var(--line);border-radius:10px;padding:13px 15px;margin-top:12px;
  background:var(--panel,#fff)}
.dimcols .dc-h{font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin-bottom:9px}
.dimcols table{font-size:13px}
.dimcols .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.dimcols select.dimpick{max-width:260px}
/* Now that every row carries a dropdown, the mapping table is wider than a
   phone. It scrolls in its own box; the page behind it does not move. */
.dimcols{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* A long unbroken string — and an uploaded file is called something like
   3ef38f2e-BIBLE_-_Complete_Dims_and_Weights_v3.0_REPAIRED_1.xlsx — has no
   space to break at, so it pushed the Admin page 10px wider than the phone
   and the whole app twitched sideways. Words wrap where they must. */
body{overflow-wrap:break-word}
@media screen and (max-width:640px){
  .dimcols select.dimpick{max-width:190px}
}

/* ==================================================================== phone
   Measured, not guessed. At a 390px viewport the browser was shrinking the
   whole page to about 70% because .topctl carried flex:0 0 auto and so kept
   its 514px max-content width. Everything else followed from that: the page
   was 524px wide inside a 390px window, so every panel was drawn small and
   then scaled down again. The rule below lets the control block take a row of
   its own and wrap inside it. Anything else that is genuinely wider than a
   phone — a fifteen-column report table — scrolls inside its own box, never
   by dragging the page sideways. */
@media (max-width:640px){
  .topctl{flex:1 1 100%;min-width:0;margin-left:0;justify-content:flex-start;
    gap:7px;row-gap:7px}
  .topbar-main{row-gap:7px}
  .qref{order:-1}
  /* The header was eating 330px of an 844px phone screen — two fifths of the
     window, permanently, because it is sticky. Same controls, smaller. */
  .topbar{padding:7px 10px 0}
  .topbar img.logo{height:20px}
  /* Smaller type, but not smaller targets: a thumb needs about 38px and a
     consultant taps these standing next to a customer. */
  .topsave,.topnew{padding:6px 10px;font-size:11px;letter-spacing:.03em;min-height:38px}
  .viewtog{padding:2px}
  .viewtog button{padding:6px 11px;font-size:11px;min-height:34px}
  .mgr-badge{font-size:10px;padding:2px 6px}
  .qref{font-size:11px;padding:3px 7px}
  .tabs button{padding:7px 10px;font-size:12px;min-height:40px}
}
/* The A4 preview cannot fit a phone and should not pretend to. It scrolls
   sideways inside its own box; the page behind it does not move. Screen only:
   an overflow box in paged media clips whatever sticks out, which would drop
   the Cost and GP columns off a printed manager copy. */
@media screen and (max-width:640px){
  .pg{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* A tablet in portrait is 768px and an A4 page is 794px, so the preview was
   one centimetre too wide to fit and dragged the whole page with it. Below
   880px the sheet is capped to the window and scrolls inside itself. */
@media screen and (max-width:880px){
  .pg{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* The saved-quotes table has nine columns and is read on a phone in the car
   park more often than at a desk. It scrolls in its box at every width. */
#savedWrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* A customer Cin7 has stopped: worth seeing in the list, before the pick. */
.lookrow.onhold .ln{color:var(--red)}
.holdtag{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:var(--red-soft);color:var(--red-dark);padding:2px 6px;border-radius:5px;
  margin-left:7px;vertical-align:1px}

/* iOS Safari zooms the whole page in when you tap a text field smaller than
   16px, and then leaves you zoomed. Every field on the tool was 12–14px, so
   every tap on a phone threw the layout sideways. 16px on phones only; the
   desktop sizes above are untouched. The same block gives the tap targets a
   thumb's worth of height — .btn alone appears 900 times on the Today desk. */
@media screen and (max-width:640px){
  /* !important because roughly thirty rules further up set 12–14px on these
     fields by class or by id, and a phone-width override has to win all of
     them. It is scoped to screens under 640px and to font-size alone. */
  input[type=text],input[type=number],input[type=email],input[type=password],
  input[type=search],input[type=tel],input[type=url],input[type=date],
  input:not([type]),select,textarea{font-size:16px !important}
  .btn,.fchip,.pl-b,select,.catsort-sel{min-height:38px}
  .btn{display:inline-flex;align-items:center;justify-content:center}
}