/* Pakline Packaging 2026 brand: logo greens #0E593A / #177B39 / #75A031 / lime #BCD32B; Montserrat headings, Open Sans text (as the letterhead).
   Layout: branded header with tabs; Customers = finder left, price sheet right; Costs = product list | spec + route | sticky cost summary. */
:root{
  --bg:#f2f5f1; --surface:#ffffff; --sunk:#f6f8f5; --ink:#15241b; --muted:#5a6a60; --line:#d8e1da;
  --accent:#0e593a; --accent-ink:#ffffff; --accent-soft:#e1eee5;
  --brand-mid:#177b39; --brand-olive:#75a031; --brand-lime:#bcd32b;
  --warn:#8f5200; --warn-soft:#fdf0d9; --good:#4a6b12; --good-soft:#eef5d3; --bad:#a8261d; --bad-soft:#fbe3e0;
  --c1:#3a6ea5; --c2:#177b39; --c3:#7b5ea7; --c4:#c07a1a; --c5:#75a031; --c6:#8a6d5a; --c7:#9aa7b1; --c8:#b0566f;
  --logo-light:inline-block; --logo-dark:none;
  /* product page sections: pastel, low contrast */
  --sec-route:#eaf2fb; --sec-route-bd:#c6d8ee; --sec-route-ink:#24507f;
  --sec-spec:#eff7da; --sec-spec-bd:#d2e5a1; --sec-spec-ink:#4a6b12;
  --sec-cost:#f2edfa; --sec-cost-bd:#d9cdee; --sec-cost-ink:#5b3f8f;
  --sec-files:#fbf1e7; --sec-files-bd:#ecd6be; --sec-files-ink:#8a5424;
  --sec-hist:#fcf7d8; --sec-hist-bd:#e9dd9c; --sec-hist-ink:#7a6510;
  --font-head:"Montserrat","Segoe UI",system-ui,sans-serif;
  --font-ui:"Open Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-code:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0e1611; --surface:#152019; --sunk:#111b15; --ink:#e3ece5; --muted:#99aa9f; --line:#283a2f;
  --accent:#74c487; --accent-ink:#0b140e; --accent-soft:#173426;
  --brand-mid:#3f9d5a; --brand-olive:#9cc456; --brand-lime:#c9de4a;
  --warn:#ffbe5c; --warn-soft:#3a2b12; --good:#c9de4a; --good-soft:#2b3512; --bad:#ff8f84; --bad-soft:#3d1a17;
  --c1:#6f9fd4; --c2:#5fbf78; --c3:#a88ad6; --c4:#e0a14a; --c5:#9cc456; --c6:#b8977f; --c7:#6b7a85; --c8:#e08aa0;
  --sec-route:#152233; --sec-route-bd:#26405e; --sec-route-ink:#9cc3ef; --sec-spec:#1b2512; --sec-spec-bd:#3a4d1f; --sec-spec-ink:#c9de4a; --sec-cost:#211b2e; --sec-cost-bd:#3e3158; --sec-cost-ink:#c8b4f0; --sec-files:#271e15; --sec-files-bd:#4b3826; --sec-files-ink:#f0bf8c; --sec-hist:#27240f; --sec-hist-bd:#4a441f; --sec-hist-ink:#eadc7a;
  --logo-light:none; --logo-dark:inline-block; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0e1611; --surface:#152019; --sunk:#111b15; --ink:#e3ece5; --muted:#99aa9f; --line:#283a2f;
  --accent:#74c487; --accent-ink:#0b140e; --accent-soft:#173426;
  --brand-mid:#3f9d5a; --brand-olive:#9cc456; --brand-lime:#c9de4a;
  --warn:#ffbe5c; --warn-soft:#3a2b12; --good:#c9de4a; --good-soft:#2b3512; --bad:#ff8f84; --bad-soft:#3d1a17;
  --c1:#6f9fd4; --c2:#5fbf78; --c3:#a88ad6; --c4:#e0a14a; --c5:#9cc456; --c6:#b8977f; --c7:#6b7a85; --c8:#e08aa0;
  --sec-route:#152233; --sec-route-bd:#26405e; --sec-route-ink:#9cc3ef; --sec-spec:#1b2512; --sec-spec-bd:#3a4d1f; --sec-spec-ink:#c9de4a; --sec-cost:#211b2e; --sec-cost-bd:#3e3158; --sec-cost-ink:#c8b4f0; --sec-files:#271e15; --sec-files-bd:#4b3826; --sec-files-ink:#f0bf8c; --sec-hist:#27240f; --sec-hist-bd:#4a441f; --sec-hist-ink:#eadc7a;
  --logo-light:none; --logo-dark:inline-block; color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:15px;line-height:1.45}
img{max-width:100%}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,.tab,.stat .v,.big{font-family:var(--font-head)}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* header */
.top{background:none;border:0;padding-top:12px;overflow-x:clip}

.top-in{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding:14px 22px 0;width:calc(100% + 28px);max-width:1396px;margin-left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--line);border-bottom:1px solid var(--line);border-top:4px solid var(--brand-mid);border-radius:0}
.brand{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand img{height:50px;width:auto}
.logo-l{display:var(--logo-light)}.logo-d{display:var(--logo-dark)}
.brand .pb{margin:0;font-size:1.2rem;font-weight:700;letter-spacing:-.01em;color:var(--accent);border-left:2px solid var(--line);padding-left:16px}
.fresh{margin:4px 0 0;color:var(--muted);font-size:.85rem}
.tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.who{font-size:.85rem;color:var(--muted)}
.avatar{order:99;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--accent-soft);color:var(--accent);border:2px solid var(--accent);font:700 .85rem var(--font-head);cursor:default}
.tabs{display:flex;gap:4px;flex-wrap:wrap;flex-basis:100%;margin-top:4px}
.tab{border:0;background:none;padding:9px 12px;cursor:pointer;font-weight:600;color:var(--ink);border-bottom:3px solid transparent}
.tab.on{color:var(--ink);border-bottom-color:var(--accent)}
/* two-row menu: Home + areas, then the current area's pages */
.trow{display:flex;gap:4px;flex-wrap:wrap;width:100%}
.trow.sub{border-top:1px solid var(--line);margin-top:2px}
.trow.sub .tab{font-size:.9rem;padding:7px 11px}
/* home page */
.hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:170px;padding:26px 28px 80px;border-radius:0;color:#fff;width:calc(100% + 28px);max-width:1396px;margin:-1px 0 0 50%;transform:translateX(-50%);background:linear-gradient(110deg,#0e593a 0%,#177b39 55%,#75a031 100%)}
.hero h2{margin:0 0 4px;font-size:1.9rem;color:#fff}
.hero p{margin:0;opacity:.92}
.heroart{flex:none;width:110px;height:110px;opacity:.9;background:linear-gradient(135deg,var(--brand-lime) 0 50%,transparent 50%),linear-gradient(45deg,rgba(255,255,255,.25),rgba(255,255,255,.05));clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.snapbox{position:relative;margin:-56px 0 20px;padding:16px 18px 18px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 4px 16px rgba(14,89,58,.12)}
.snapbox h3{margin:0 0 10px;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.snaps{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.snap{display:flex;flex-direction:column;gap:2px;text-align:left;border:0;border-bottom:3px solid var(--line);border-radius:0;background:none;padding:10px 8px 12px 2px;cursor:pointer}
.snap:hover,.snap:focus-visible{border-bottom-color:var(--accent);outline:0}
.snap.bad{border-bottom-color:var(--bad)}.snap.warn{border-bottom-color:var(--warn)}
.snap b{font:700 2.6rem/1.1 var(--font-head);color:var(--ink);text-align:center;align-self:stretch;margin-bottom:4px}
.snap span{font-size:.82rem;color:var(--muted);text-align:center;align-self:stretch}
.snap.bad b{color:var(--bad)}.snap.warn b{color:var(--warn)}
.home .qactions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px;margin:0 0 18px;padding:12px 16px;text-align:left}
.home .qactions .btn{width:auto}
.qactions h3{margin:0 8px 0 0;font-size:1rem}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:6px 0 22px}
.tile{display:flex;flex-direction:column;gap:4px;text-align:left;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:16px 18px;cursor:pointer;font:inherit;color:inherit;border-top:4px solid var(--accent)}
.tile:hover,.tile:focus-visible{border-color:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.tile h3{margin:0;font-size:1.15rem;color:var(--accent);display:flex;align-items:center;gap:10px}
.tile h3 .ico{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;color:var(--accent)}
.tile h3 .ico svg{width:30px;height:30px}
.ico-stock{color:var(--c1)!important}.ico-mfg{color:var(--c4)!important}.ico-pricing{color:var(--c3)!important}.ico-reports{color:var(--c2)!important}.ico-admin{color:var(--c6)!important}
.tnums{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px}
.tnum{display:flex;flex-direction:column;font-size:.8rem;color:var(--muted)}
.tnum b{font-size:1.5rem;color:var(--ink);font-family:var(--font-head);line-height:1.2}
.tnum.bad b{color:var(--bad)}.tnum.warn b{color:var(--warn)}
.attngrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.attngrid h3{margin:0 0 8px;font-size:1rem}
.attn{list-style:none;margin:0;padding:0}
.attn li{padding:6px 0;border-bottom:1px solid var(--line)}
.attn li:last-child{border-bottom:0}
.attn li.go{cursor:pointer}
.demo-bar{background:var(--warn-soft);color:var(--warn);font-size:.85rem}
.demo-in{max-width:1400px;margin:0 auto;padding-block:6px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.demo-in select{width:auto;padding:3px 6px}

/* controls */
.btn{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:7px 12px;cursor:pointer;font-weight:600;white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.small{padding:4px 9px;font-size:.85rem}
.btn[disabled]{opacity:.55;cursor:default}
.linkbtn{background:none;border:0;color:var(--accent);cursor:pointer;padding:0;font-weight:600}
input[type=search],input[type=text],input[type=email],input[type=password],select,textarea{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:8px 10px;min-width:0}
input[type=checkbox]{accent-color:var(--accent)}
textarea{min-height:70px;resize:vertical}
.lbl{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}

/* banners */
.banner{max-width:1400px;margin:12px auto 0;display:flex;flex-direction:column;gap:8px}
.banner:empty{display:none}
.note{border-radius:6px;padding:10px 12px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;background:var(--accent-soft)}
.note.warn{background:var(--warn-soft);color:var(--warn)}

/* layout */
.layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:24px;max-width:1400px;margin:0 auto;padding-block:20px 96px}
.layout.full{grid-template-columns:minmax(0,1fr)}
.layout.full .side{display:none}
.side,.main{min-width:0}
.list{margin-top:10px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden}
.list button{display:flex;justify-content:space-between;gap:8px;text-align:left;border:0;border-bottom:1px solid var(--line);background:transparent;padding:10px 12px;cursor:pointer}
.list button:last-child{border-bottom:0}
.list button:hover{background:var(--accent-soft)}
.list button.on{background:var(--accent);color:var(--accent-ink)}
.list .ct{color:var(--muted);font-size:.8rem;white-space:nowrap}
.list button.on .ct{color:inherit;opacity:.85}
.empty{padding:12px;color:var(--muted)}
.addbox{margin-top:12px;display:flex;gap:6px}
.crumb{background:none;border:0;color:var(--accent);cursor:pointer;padding:0;font-weight:600;margin-bottom:8px;text-align:left}
h2{margin:0;font-size:1.45rem;font-weight:700;letter-spacing:-.01em;text-wrap:balance}
h3{margin:0 0 8px;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.sub{margin:4px 0 16px;color:var(--muted)}
.code{font-family:var(--font-code);font-size:.9em;font-weight:500;white-space:nowrap}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);white-space:nowrap}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
tr.grp td{background:var(--sunk);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
tbody tr.go{cursor:pointer}
tbody tr.go:hover{background:var(--accent-soft)}
td.mine,th.mine{background:var(--accent-soft)}
.grid input{padding:6px 8px;min-width:90px}
.grid td{padding:6px 8px}
.lp input{min-width:70px;width:84px;text-align:right;padding:5px 6px}
.meta{display:block;color:var(--muted);font-size:.8rem}
.none{color:var(--muted)}
.chip{display:inline-block;font-size:.72rem;font-weight:600;border-radius:99px;padding:1px 8px;margin-left:6px;vertical-align:1px;white-space:nowrap;background:var(--accent-soft);color:var(--accent)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.good{background:var(--good-soft);color:var(--good)}
.chip.bad{background:var(--bad-soft);color:var(--bad)}
.up{color:var(--warn)}.down{color:var(--accent)}
.neg{color:var(--bad)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:22px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px 14px;min-width:0}
.stat .v{font-size:1.4rem;font-weight:700;font-variant-numeric:tabular-nums}
.stat .k{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.costline{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin:-10px 0 18px;padding:8px 12px;border-radius:6px;background:var(--sunk);border:1px dashed var(--line);font-size:.9rem}
.costline b{font-variant-numeric:tabular-nums}
.sec{margin-bottom:22px}
.rowadd{margin-top:8px}
.pct{display:flex;align-items:center;gap:8px;max-width:180px}
.pct input{text-align:right}
.inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-block:0 14px}
.inline select,.inline input{width:auto;min-width:140px;flex:1 1 140px}
.inline .narrow{flex:0 1 90px;min-width:70px}
.levelrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0 16px}
.levelrow select{width:auto}
.welcome{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:18px 20px;max-width:680px}
.welcome p{margin:0 0 8px}
.welcome p:last-child{margin:0}

/* save bar */
.bar{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);z-index:5}
.bar-in{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-block:10px;max-width:1400px;margin:0 auto}
.editing{color:var(--warn);font-weight:600}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding-block:24px}
.login-card{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.login-card::before{content:"";display:block;height:5px;background:linear-gradient(90deg,var(--brand-lime),var(--brand-olive) 35%,var(--brand-mid) 70%,var(--accent))}
.login-body{padding:24px;display:flex;flex-direction:column;gap:14px}
.login-body img{height:44px;width:auto;align-self:flex-start}
.login-body h1{margin:0;font-size:1.25rem;color:var(--accent)}
.login-body p{margin:0;color:var(--muted)}
.err{color:var(--bad);font-size:.9rem}

/* costs */
.cws{display:grid;grid-template-columns:260px minmax(0,1fr) 300px;gap:16px;align-items:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:8px}
.cside{padding:12px;display:flex;flex-direction:column;gap:8px}
.clist{display:flex;flex-direction:column;gap:2px;max-height:72vh;overflow:auto}
.citem{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 8px;text-align:left;background:transparent;border:1px solid transparent;border-radius:6px;padding:6px 8px;cursor:pointer}
.citem:hover{background:var(--sunk)}
.citem.on{background:var(--accent-soft);border-color:var(--accent)}
.citem .d{grid-column:1/-1;color:var(--muted);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.citem .v{font-family:var(--font-code);font-size:.85rem}
.ced{display:flex;flex-direction:column;gap:14px;min-width:0}
.card{padding:14px 16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.card h2{font-size:1.05rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card h2 .sum{margin-left:auto;font-family:var(--font-code);font-size:.95rem;font-weight:500}
.card h2 .whoby{font-family:var(--font-ui);font-size:.85rem;font-weight:500;color:var(--muted)}
.card h4{margin:4px 0 0;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hint{color:var(--muted);font-size:.83rem;margin:0}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 12px}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field label{font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:600}
.field input,.field select,.field textarea{padding:6px 8px}
.field input.n{font-family:var(--font-code);text-align:right}
.field.wide{grid-column:1/-1}
.check{display:flex;align-items:center;gap:8px;font-size:.9rem}
.swatch{width:12px;height:12px;border-radius:2px;flex:none;display:inline-block}
table.rows{min-width:480px}
table.rows th{padding:0 6px 4px;border:0}
table.rows td{padding:3px 6px;border:0;vertical-align:middle}
table.rows input,table.rows select{padding:5px 7px}
table.rows input.n{font-family:var(--font-code);text-align:right}
td.out{font-family:var(--font-code);text-align:right;white-space:nowrap;color:var(--muted)}
.route{display:flex;flex-wrap:wrap;gap:6px;align-items:stretch}
.stepc{flex:1 1 190px;min-width:0;border:1px solid var(--line);border-top:4px solid var(--sc);border-radius:6px;padding:10px;display:flex;flex-direction:column;gap:8px;background:var(--sunk)}
.stepc.off{opacity:.6;border-top-color:var(--line)}
.stepc .t{font-weight:600}
.stepc .flow{font-family:var(--font-code);font-size:.78rem;color:var(--muted)}
.arrow{align-self:center;color:var(--muted)}
.leg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:8px 12px;align-items:center;border:1px dashed var(--line);border-radius:6px;padding:8px 10px}
.leg small{display:block;color:var(--muted);font-family:var(--font-code);font-size:.78rem}
.leg .costs{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto;gap:6px;align-items:center}
.csum{position:sticky;top:12px;padding:16px;display:flex;flex-direction:column;gap:12px}
.eyebrow{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.big{font-weight:700;font-size:2.2rem;line-height:1.05;font-variant-numeric:tabular-nums}
.big small{font-family:var(--font-ui);font-weight:400;font-size:.85rem;color:var(--muted);margin-left:6px}
.sbar{display:flex;height:12px;border-radius:3px;overflow:hidden;background:var(--sunk);border:1px solid var(--line)}
.sbar span{display:block;height:100%}
.legend{display:flex;flex-direction:column;gap:4px}
.legend div{display:grid;grid-template-columns:12px minmax(0,1fr) auto auto;gap:8px;align-items:center;font-size:.83rem}
.legend .v{font-family:var(--font-code)}
.legend .p{font-family:var(--font-code);color:var(--muted);width:44px;text-align:right}
.warns{margin:0;padding:8px 10px;list-style:none;background:var(--warn-soft);border-radius:6px;font-size:.83rem;display:flex;flex-direction:column;gap:3px}
.warns li::before{content:"! ";color:var(--warn);font-weight:700}
.kv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;font-size:.85rem}
.kv .v{font-family:var(--font-code);text-align:right}
hr.rule{border:0;border-top:1px solid var(--line);margin:0}
table.sectbl{table-layout:fixed}
table.sectbl td{overflow-wrap:anywhere}
table.sectbl.grid input{width:100%;min-width:0}
/* stock control */
.stats.stock6{grid-template-columns:repeat(6,minmax(0,1fr))}
.stat.warnt{background:var(--warn-soft)}.stat.badt{background:var(--bad-soft)}.stat.badt .v{color:var(--bad)}.stat.goodt .v{color:var(--good)}
.spanels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:22px}
.spanel{min-width:0}
.spanel h3{margin-bottom:6px}
.spanel .tbl-wrap{max-height:340px;overflow:auto}
.spanel .none{padding:10px 12px;margin:0}
tr.backo td{background:var(--bad-soft)}
.sform{margin-bottom:14px;border-color:var(--accent)}
.stockline{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin:-10px 0 18px;padding:8px 12px;border-radius:6px;background:var(--accent-soft);font-size:.9rem}
/* product stock page: one strip, then tabs */
.sstrip{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--accent);border-radius:10px;padding:14px 20px;margin-bottom:14px}
.smain{display:flex;align-items:baseline;gap:10px}
.smain .k,.sside .k{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.sbig{font-family:var(--font-head);font-size:2.6rem;font-weight:700;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.su{font-size:1rem;color:var(--muted)}
.sside{display:flex;gap:28px;padding-left:28px;border-left:1px solid var(--line)}
.sside div{display:flex;flex-direction:column;gap:2px}
.sside b{font-family:var(--font-head);font-size:1.3rem;font-variant-numeric:tabular-nums}
.salerts{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px}
.salert{border-radius:6px;padding:6px 10px;font-weight:600;font-size:.9rem}
.salert.bad{background:var(--bad-soft);color:var(--bad)}
.salert.warn{background:var(--warn-soft);color:var(--warn)}
.sacts{margin-bottom:16px}
.sacts-minor{margin-left:auto;display:flex;gap:6px}
.stabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:2px solid var(--line)}
.stab{border:0;background:none;padding:9px 14px;cursor:pointer;font-weight:600;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-2px}
.stab.on{color:var(--ink);border-bottom-color:var(--accent)}
.stabn{display:inline-block;min-width:1.4em;padding:0 6px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font-size:.75rem;text-align:center}
.stabbody{border-top-left-radius:0;border-top-right-radius:0;border-top:0;margin-bottom:22px;max-height:420px;overflow:auto}
.stabbody .none{padding:12px;margin:0}
tr.hist td{color:var(--muted)}
tr.hist td b{color:var(--muted)}
@media (max-width:640px){.sside{padding-left:0;border-left:0}.sacts-minor{margin-left:0}}
/* backorders grouped by product */
.botable .bohead td{background:var(--sunk);border-top:2px solid var(--line);padding:10px 12px}
.bohead-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;align-items:baseline}
.bonums{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.9rem;color:var(--muted)}
.bonums b{color:var(--ink);font-variant-numeric:tabular-nums}
.botable td.prio{white-space:nowrap;width:1%}
.botable td.prio .btn{padding:1px 6px}
.sendnow{display:inline-block;font-weight:700;color:var(--good);background:var(--good-soft);border-radius:4px;padding:1px 8px}
/* job editor */
input.req,select.req,label.okbox.req{outline:2px solid var(--bad);outline-offset:-1px;background:var(--bad-soft)}
input.soft{outline:1px dashed var(--warn);outline-offset:-1px}
.okbox{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:6px;font-weight:700;color:var(--good)}
tr.switched td{background:var(--warn-soft)}
.swbox{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.costline.badline{border-color:var(--bad);background:var(--bad-soft)}
.specnotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px 14px;font-size:.88rem}
.specnotes .lbl{margin-bottom:2px}
input:disabled,select:disabled,textarea:disabled{opacity:.75;background:var(--sunk)}
@media (max-width:1000px){.stats.stock6{grid-template-columns:repeat(3,minmax(0,1fr))}.spanels{grid-template-columns:minmax(0,1fr)}}
/* product page sections: colour-coded and collapsible */
.msec{border:1px solid var(--msec-bd);border-radius:10px;background:var(--msec-bg)}
.msec>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:12px 16px}
.msec>summary::-webkit-details-marker{display:none}
.msec>summary::before{content:"\25B8";color:var(--msec-ink);font-size:.9rem;transition:transform .15s;display:inline-block}
.msec[open]>summary::before{transform:rotate(90deg)}
.msec>summary:hover .mtitle{text-decoration:underline}
.mtitle{font-family:var(--font-head);font-weight:700;font-size:1.05rem;color:var(--msec-ink)}
.msub{font-size:.83rem;color:var(--muted)}
.mbody{padding:0 12px 12px;display:flex;flex-direction:column;gap:12px}
.msec-route{--msec-bg:var(--sec-route);--msec-bd:var(--sec-route-bd);--msec-ink:var(--sec-route-ink)}
.msec-spec{--msec-bg:var(--sec-spec);--msec-bd:var(--sec-spec-bd);--msec-ink:var(--sec-spec-ink)}
.msec-costing{--msec-bg:var(--sec-cost);--msec-bd:var(--sec-cost-bd);--msec-ink:var(--sec-cost-ink)}
.msec-files{--msec-bg:var(--sec-files);--msec-bd:var(--sec-files-bd);--msec-ink:var(--sec-files-ink)}
.msec-history{--msec-bg:var(--sec-hist);--msec-bd:var(--sec-hist-bd);--msec-ink:var(--sec-hist-ink)}
/* the cost part inside a spec stage uses the costing colour, so cost fields are easy to spot */
.costbox{background:var(--sec-cost);border:1px solid var(--sec-cost-bd);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:10px}
.costhead{display:flex;justify-content:space-between;gap:10px;color:var(--sec-cost-ink)}
@media (prefers-reduced-motion:reduce){.msec>summary::before{transition:none}}
/* settings: editable drop-down lists */
.listsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.listed{border:1px solid var(--line);border-radius:8px;padding:10px;background:var(--sunk);min-width:0}
.lchips{display:flex;flex-wrap:wrap;gap:4px}
.lchip{display:inline-flex;align-items:center;gap:2px;font-size:.8rem;background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:1px 2px 1px 9px}
.lhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.lchip[draggable]{cursor:grab}
.lchip.dragging{opacity:.4}
.lchip.over{border-color:var(--accent);box-shadow:-3px 0 0 var(--accent)}
.lchip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.lx{border:0;background:none;color:var(--muted);cursor:pointer;font-size:.72rem;padding:2px 5px;border-radius:99px}
.lx:hover{color:var(--bad);background:var(--bad-soft)}
/* machine options: the working */
.mathlist{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:.83rem}
.mathlist li{padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--sunk);font-variant-numeric:tabular-nums}
.mathlist li.first{border-color:var(--accent);background:var(--accent-soft)}
/* attachments */
.attgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.atile{display:flex;flex-direction:column;gap:3px;min-width:0}
.athumb{position:relative;display:grid;place-items:center;height:120px;border:1px solid var(--line);border-radius:6px;background:var(--sunk);overflow:hidden;text-decoration:none}
.athumb:hover{border-color:var(--accent)}
.athumb img,.athumb canvas{max-width:100%;max-height:100%;object-fit:contain;background:#fff}
.athumb canvas:not(.ok){display:none}
.athumb canvas.ok+.aext{position:absolute;right:4px;bottom:4px;font-size:.62rem;padding:1px 5px}
.aext{font-family:var(--font-code);font-weight:600;font-size:.85rem;color:var(--accent-ink);background:var(--accent);border-radius:4px;padding:3px 8px}
.aname{font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attadd{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:8px;border-top:1px dashed var(--line)}
#attcard.drop{outline:2px dashed var(--accent);outline-offset:-6px}
/* route flow + margin table in the cost summary */
.rcode{display:inline-block;font-family:var(--font-code);font-weight:600;font-size:.8rem;letter-spacing:.04em;padding:2px 8px;border-radius:4px;background:var(--accent);color:var(--accent-ink);margin-right:6px}
.rflow{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:8px;padding:10px;background:var(--sunk)}
.rhead{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:8px}
.rhead .eyebrow{margin-right:auto}
.rstep{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--sc);border-radius:6px;padding:8px 10px;font-size:.88rem}
.rleg,.rend{position:relative;margin-left:14px;padding:8px 0 8px 16px;border-left:2px dashed var(--line);font-size:.8rem;color:var(--muted);display:flex;justify-content:space-between;gap:8px}
.rend{border-left-style:solid;border-left-color:var(--accent);padding-bottom:2px;font-weight:600;color:var(--accent)}
.mtable{width:100%;font-size:.85rem;border-collapse:collapse}
.mtable th,.mtable td{padding:5px 4px;border-bottom:1px solid var(--line)}
.mtable th{font-size:.68rem}
.mtable td.r{font-variant-numeric:tabular-nums;white-space:nowrap}
.mtable tr.dflt td{background:var(--accent-soft);font-weight:600}
.subtabs{display:flex;gap:6px;margin-bottom:14px}
.ratesgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px;align-items:start}

@media (max-width:1150px){.cws{grid-template-columns:230px minmax(0,1fr)}.csum{grid-column:2;grid-row:1;position:static}.ced{grid-column:2}}
@media (max-width:760px){
  .layout,.cws{grid-template-columns:minmax(0,1fr)}
  .layout.has-cust .side{display:none}
  .csum,.ced,.cside{grid-column:1;grid-row:auto}
  .stats{grid-template-columns:minmax(0,1fr)}
  .leg{grid-template-columns:minmax(0,1fr)}
  .leg .costs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .leg .costs select{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* production schedule */
.schead{font:700 .95rem Montserrat,sans-serif;color:var(--brand,#0e593a);margin:18px 0 6px;text-transform:uppercase;letter-spacing:.04em}
.schcard{padding:0;overflow:hidden}
.schcard .schtop{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;padding:10px 14px 4px}
.schcard .schtop h2{margin:0}
.schcard table td.prio{white-space:nowrap;width:1%}

/* cancel / undo confirm rows */
tr.cxrow td{background:var(--warn-bg,#fff7e0);border-top:0}
.cxbox{display:flex;flex-direction:column;gap:6px;padding:4px 0}
.cxbox .tools{margin:0}

.login-card .hubsub{margin:-6px 0 10px;color:var(--muted);font-size:.9rem}

/* quote preview: a white sheet in both themes, like the PDF */
table.qitems td{vertical-align:top}table.qitems td.qtxt{padding-top:12px}
.qpaper{background:#fff;color:#15241b;border:1px solid var(--line);border-radius:8px;padding:18px 20px;overflow-x:auto;box-shadow:0 1px 3px rgba(0,0,0,.06)}

/* reports (admin): filters, stat tiles, SVG charts with one shared tooltip */
.rfilters{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:4px 0 16px}
.rfilters label{display:flex;gap:6px;align-items:center;font-size:.85rem;color:var(--muted)}
.rfilters select,.rfilters input{width:auto}
.rtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.rtile{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.rtile .k{font-size:.8rem;color:var(--muted)}
.rtile b{font-size:1.6rem;font-family:var(--font-head);line-height:1.2}
.rdelta{font-weight:600;color:var(--muted);white-space:nowrap}.rdelta.up{color:var(--good)}.rdelta.down{color:var(--bad)}
.rchart h3{margin:0 0 8px;font-size:1rem}
.rsvg{width:100%;height:auto;display:block;font-variant-numeric:tabular-nums}
.rsvg .rgrid{stroke:var(--line);stroke-width:1}.rsvg .raxis{stroke:var(--muted);stroke-width:1}
.rsvg .rtick{fill:var(--muted);font-size:11px}
.rsvg .rbar{fill:var(--chart)}.rsvg .rbar.faint{fill:var(--chart);opacity:.45}
.rsvg .rhit{fill:transparent}.rsvg .rcol:hover .rbar{opacity:.8}
.rgrid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.rhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.rlegend{display:flex;gap:16px;font-size:.82rem;color:var(--muted);margin-bottom:8px}
.rlegend .sw{display:inline-block;width:12px;height:8px;border-radius:2px;margin-right:6px;vertical-align:middle}
.sw.cur,.rb.cur{background:var(--chart)}.sw.prev,.rb.prev{background:var(--chart-prev)}
.rbars{display:flex;flex-direction:column;gap:6px}
.rbrow{display:grid;grid-template-columns:minmax(120px,240px) 1fr 70px;gap:10px;align-items:center;background:none;border:0;padding:2px 0;cursor:pointer;font:inherit;color:inherit;text-align:left}
.rbrow:hover .rbname{text-decoration:underline}
.rbname{font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rbtrack{display:flex;flex-direction:column;gap:2px}
.rb{display:block;border-radius:0 4px 4px 0;min-width:1px}.rb.cur{height:10px}.rb.prev{height:5px}
.rbval{font-size:.82rem;text-align:right;font-variant-numeric:tabular-nums}
.rtable td.r,.rtable td.num{font-variant-numeric:tabular-nums}
.rfoot{margin-top:14px}
#rtip{position:fixed;display:none;pointer-events:none;z-index:60;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:6px 9px;font-size:.82rem;box-shadow:0 4px 14px rgba(0,0,0,.15);max-width:320px}/* chart colours (checked with the dataviz palette validator: lightness band, colour-blind and normal-vision separation, contrast) */
:root{--chart:#177b39;--chart-prev:#9aa7b1}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--chart:#4fa866;--chart-prev:#6b7a85}}
:root[data-theme="dark"]{--chart:#4fa866;--chart-prev:#6b7a85}
/* quick despatch */
table.bulk td{vertical-align:top}table.bulk td.qtxt{padding-top:12px}
table.bulk tr.bkerr td:first-child{box-shadow:inset 3px 0 0 var(--bad)}

/* customer delivery addresses (branches) */
.branches{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.branch{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--surface)}
.brrow{padding:8px 0;border-bottom:1px solid var(--line);margin:0 0 8px}

/* the Hub's own suggestion box (suggest.js), in place of the browser's datalist popup */
.sugg{position:absolute;display:none;z-index:80;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.14);max-height:300px;overflow-y:auto;max-width:min(460px,calc(100vw - 8px));padding:4px 0}
.sugg .sg{display:flex;flex-direction:column;padding:6px 12px;cursor:pointer;line-height:1.3}
.sugg .sg small{color:var(--muted);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sugg .sg.on{background:var(--accent-soft)}
table.bulk .meta .linkbtn{display:block;text-align:left;font-size:12px;margin-top:2px}table.bulk .bkbo{display:block;color:var(--warn,#b26b00);font-weight:600}.bkfix{display:block;margin-left:auto;font-size:12px;font-weight:500}.bkcount{display:flex;flex-direction:column;gap:4px;align-items:flex-end}.bkcount input{width:110px}
.qdep{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;font-weight:600;cursor:pointer}.qdep input{width:auto;margin:0}
.jobspec{flex-wrap:wrap;gap:8px;margin-bottom:12px}.jobspec select{width:auto;max-width:340px}.jobback{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:0 0 12px}
.fixline{display:flex;flex-wrap:wrap;gap:8px}.fixline label{display:flex;flex-direction:column;gap:2px;font-size:.75rem;color:var(--muted);flex:1 1 90px}.fixline label:first-child{flex-basis:100%}.fixline input{width:100%}

/* Product Stock settings rows: compact controls, not stretched across the page */
.sset{gap:10px 14px}.sset select,.sset input{flex:0 0 auto;min-width:0;width:auto}.sset select{max-width:270px}.sset input[type=text]{width:150px}.sset input.narrow{width:110px}.sset .meta{flex:1 1 100%}

.layout.onhome{padding-top:0}
.demo-bar{overflow:hidden}
.stripin{max-width:1368px;margin:0 auto}
.hero.slim{min-height:0;padding:18px 28px}
.hero.slim h2{font-size:1.5rem;margin:0}
.hero.slim p{margin:2px 0 0;font-size:.9rem}
.levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px 16px;margin:8px 0 0}
.levels dt{font-weight:700;color:var(--accent)}
.levels dd{margin:0;font-size:.85rem;color:var(--muted)}
.cctbl td{vertical-align:top}
.cctbl td.ccc.on{background:var(--good-soft)}
.cctbl tr.ccdone td{opacity:.75}
.ccbr{display:grid;grid-template-columns:22px minmax(150px,1fr) 34px;grid-template-areas:"tick name del" ". addr .";gap:2px 6px;align-items:center;margin:4px 0}
.ccbr > .check{grid-area:tick}
.ccbr > .ccbn{grid-area:name}
.ccbr > .ccaddr{grid-area:addr;display:flex;align-items:center;gap:2px;font-style:italic;font-size:.8rem;color:var(--muted)}
.ccbr > button{grid-area:del}
.ccaddr .ccba{border:0;border-bottom:1px dashed var(--line);border-radius:0;background:transparent;padding:1px 2px;font:italic .8rem var(--font-ui);color:var(--muted);flex:1;min-width:0}
.ccaddr .ccba:focus{border-bottom-color:var(--accent);color:var(--ink)}
.ccbn,.ccba{width:100%;min-width:0}
.ccbr .check{margin:0}
.cctbl td.ccdel{min-width:340px}
.cctbl{table-layout:auto}
.cctbl td,.cctbl th{text-align:left}
.cctbl .linkbtn{text-align:left;display:block}
.cctbl .ccdel .linkbtn{display:inline}
.legend .lsub{font-size:.78rem;color:var(--muted)}
.legend .lsub span:nth-child(2){padding-left:10px}
table.fac td:first-child,table.fac th:first-child{min-width:200px;white-space:nowrap}
table.fac td input.n{width:130px}
.snap .ctx{font-style:normal;font-size:.76rem;color:var(--muted);margin-top:8px;line-height:1.35}
.snap .ctx i{font-style:normal;font-weight:600}
.snap .ctx .good{color:var(--good,#177b39)}.snap .ctx .bad{color:var(--bad)}
.snap .spark{display:block;margin-top:8px}.snap .spark polyline{fill:none;stroke-linejoin:round;stroke-linecap:round}
.snap .spark .sa{stroke:var(--accent);stroke-width:2}.snap .spark .sb{stroke:var(--line);stroke-width:1.5}
.packline{font-size:.74rem;color:var(--muted)}
#prows td,#prows th{padding-left:8px;padding-right:8px}
#prows td:first-child .code{display:inline-block;max-width:150px;overflow-wrap:anywhere;text-align:left;line-height:1.25}
#prows td:nth-child(5){max-width:130px}
#prows td .meta.packline{margin-top:1px}
.newprodrow{display:flex;justify-content:flex-end;margin:6px 0 10px}
.newprodbtn{background:#0E593A;color:#fff;border:1px solid #0E593A;font-size:1.05rem;font-weight:700;padding:13px 28px;border-radius:8px;cursor:pointer}
.newprodbtn:hover,.newprodbtn:focus-visible{background:#177B39;border-color:#177B39;color:#fff}

/* Home banner: very dark forest green on the left, fading out to reveal a drawn NZ scene (HERO_SCENE in app.js). */
.home .hero{background:#0a2618;min-height:220px}
.home .hero::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#0a2618 0%,#0a2618 35%,rgba(10,38,24,.6) 55%,rgba(10,38,24,0) 75%),linear-gradient(0deg,#0a2618 0,rgba(10,38,24,0) 70px)}
.home .hero > div{position:relative;z-index:2}
.home .hero .heroscene{position:absolute;top:0;right:0;height:calc(100% - 64px);width:auto;max-width:85%;z-index:0}
@media (max-width:700px){.home .hero .heroscene{max-width:100%;opacity:.7}.home .hero::before{background:linear-gradient(90deg,#0a2618 0%,rgba(10,38,24,.85) 55%,rgba(10,38,24,.35) 100%)}}