/* Inventory: availability bars, low-stock rows, sparklines. */
tr.lowrow td{background:var(--amber-soft)}
.avail-bar{display:flex;height:10px;border-radius:0;overflow:hidden;background:var(--panel-2);margin:6px 0 4px}
.avail-bar i{display:block;height:100%}
.dot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.spark{display:flex;align-items:flex-end;gap:2px;height:26px}
.spark i{flex:1;background:var(--accent);border-radius:0;min-width:3px}

/* Stock dashboard (stock-dashboard.js): cards that open a list, two bar charts, the list switch.
   Chart colours from the Knauf viz palette (tokens.css): available = --s1, the reorder mark = --s2, under the red
   point = --neg. */
button.stat.pick{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin:0;width:100%;text-align:left;font:inherit;line-height:inherit;color:inherit;cursor:pointer}  /* buttons do not inherit line-height: without it the five buttons sit shorter than the Stock value card */
button.stat.pick:hover{border-color:var(--line-strong)}
button.stat.pick.on{border-color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}
.task-charts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.task-charts .card{margin:0;padding:14px 18px}
.task-charts h3{margin:0 0 10px;font-size:13.5px}
.hbar{display:grid;grid-template-columns:minmax(90px,160px) 1fr auto;gap:10px;align-items:center;font-size:12.5px;margin-bottom:7px}
.hbar>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar .num{font-family:var(--mono);font-size:12px;color:var(--ink-2);min-width:70px;text-align:right}
.hbar-track{position:relative;height:12px;background:var(--panel-2)}
.hbar-track i{position:absolute;inset:0 auto 0 0;display:block}
.hbar-track b{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--s2)}
.hbar-legend{display:flex;gap:14px;font-size:12px;color:var(--ink-3);margin-top:8px}
.hbar-legend i{display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px}
.hbar-legend i.mark{width:2px;background:var(--s2)}
td.cover-cell{width:180px;min-width:120px}
.task-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.task-head h2{margin:0;font-size:16px}
.task-head p{margin:3px 0 0;max-width:760px}
.task-lists{margin-bottom:10px;max-width:100%;overflow-x:auto}
.task-lists small{font-family:var(--mono);font-size:10.5px;opacity:.75;margin-left:3px}
.pill-btn{border:0;cursor:pointer;font-family:inherit}
@media (max-width:900px){.task-charts{grid-template-columns:1fr}}
/* ABC class: A in navy, B in Knauf blue, C grey */
.abc{display:inline-block;min-width:20px;text-align:center;font-family:var(--mono);font-size:11px;font-weight:600;padding:1px 5px;border-radius:3px}
.abc-A{background:var(--accent);color:var(--accent-ink)}.abc-B{background:var(--accent-soft);color:var(--accent)}.abc-C{background:var(--panel-2);color:var(--ink-3)}
/* 12-week trend: the value line over the out-of-stock bars */
.trend-wrap{display:flex;flex-direction:column;gap:4px}
.trend-line{display:block;width:100%;height:100px;overflow:visible;border-bottom:1px solid var(--grid)}
.trend-out{display:flex;align-items:flex-end;gap:3px;height:34px}
.trend-out i{flex:1;background:var(--neg);min-height:1px;opacity:.8}
.trend-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3)}
.prod-cell{min-width:160px}
.prod-cell small{display:block;font-size:11px;color:var(--ink-3)}
.use-src{font-family:var(--sans);font-size:10px;color:var(--ink-3);margin-left:2px}

/* ---- stock overview, stock list and product page (SAP-style; stock-dashboard.js, stocklist.js, stockitem.js) ---- */
/* status: a word with a dot, never colour alone; red critical, amber warning, green good */
.st{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;white-space:nowrap}
.st i{width:9px;height:9px;border-radius:50%;background:currentColor}
.st-crit{color:var(--red)}.st-warn{color:var(--amber)}.st-good{color:var(--good)}
.text-amber{color:var(--amber)}
.linkbtn{border:0;background:none;padding:0;color:var(--accent);font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none}
.linkbtn:hover{text-decoration:underline}
/* the six overview cards */
.ov-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;margin-bottom:12px}
.ov-card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.ov-card.crit{border-top:3px solid var(--red);padding-top:10px}.ov-card.warn{border-top:3px solid var(--amber);padding-top:10px}
.ov-card h3{margin:0;font-size:14px}.ov-card>.linkbtn,.ov-card>a.linkbtn{margin-top:auto;align-self:flex-start}
.ov-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-3)}
.ov-num{font-family:var(--mono);font-size:26px;font-weight:600;color:var(--ink);line-height:1.1}.ov-num.crit{color:var(--red)}.ov-num.warn{color:var(--amber)}
.ov-spark{width:100%;height:46px}
.ov-row{display:grid;grid-template-columns:minmax(0,1fr) 90px 52px;gap:8px;align-items:center;font-size:13px;color:var(--ink);text-decoration:none}
.ov-row span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ov-row b{font-family:var(--mono);font-weight:600;text-align:right}
.ov-track{height:7px;border-radius:4px;background:var(--panel-2);overflow:hidden}.ov-track i{display:block;height:100%;border-radius:4px}
.bar-crit{background:var(--red)}.bar-warn{background:var(--amber)}.bar-navy{background:var(--accent)}
.ov-line{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;font-size:13px}.ov-line span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-legend,.sl-legend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--ink-2)}
.ov-legend i,.sl-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.ov-att h2{margin-bottom:8px}.ov-ok{color:var(--good);font-weight:600;margin-bottom:12px}.ov-att{margin-bottom:12px}
/* stock split by status: available, reserved, quality check, blocked, on order (dashed) */
.split{display:flex;height:10px;min-width:120px;border-radius:3px;overflow:hidden;background:var(--panel-2)}.split.big{height:14px;border-radius:7px}
.sp-available{background:var(--good)}.sp-reserved{background:var(--brand)}.sp-quality{background:#E0B93A}.sp-blocked{background:var(--red)}
.sp-onorder{background:repeating-linear-gradient(90deg,var(--accent) 0 3px,transparent 3px 6px);box-shadow:inset 0 0 0 1px var(--accent)}
/* days left: a bar full at 90 days, with the number */
.dbar{display:inline-flex;align-items:center;gap:8px;min-width:120px}.dbar>span{flex:1;height:7px;border-radius:4px;background:var(--panel-2);overflow:hidden}
.dbar i{display:block;height:100%;background:var(--good)}.dbar.st-crit i{background:var(--red)}.dbar.st-warn i{background:var(--amber)}
.dbar b{font-family:var(--mono);font-weight:600;font-size:12.5px;min-width:28px;text-align:right;color:var(--ink)}
/* stock list: the filter bar */
.filterbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;align-items:end;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:10px}
.filterbar .chk{flex-direction:row;align-items:center;gap:8px}.filterbar .chk input{width:auto}
.row-f{flex-direction:row;align-items:center;gap:8px}.row-f select{width:auto}
.sl-tools{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-bottom:8px}
/* product page */
.crumbs{margin:0 0 8px;font-size:12px;color:var(--ink-3)}.crumbs a{color:var(--accent);text-decoration:none}
.pi-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start;margin-bottom:12px}
.pi-head h1{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.pi-head p{margin:4px 0 0}
.pi-why{font-size:13px;font-weight:600}.pi-why.st-crit{color:var(--red)}.pi-why.st-warn{color:var(--amber)}.pi-why.st-good{color:var(--good)}
.pi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:10px;margin-bottom:10px}
.pi-grid .card h2{margin-bottom:8px}
.pi-chart{width:100%;height:auto}
.pi-chart .ch-axis{stroke:var(--line)}.pi-chart .ch-level{stroke:var(--amber);stroke-dasharray:4 4}.pi-chart .ch-today{stroke:var(--ink-3);stroke-dasharray:2 3}
.pi-chart .ch-past{fill:none;stroke:var(--brand);stroke-width:2.5}.pi-chart .ch-fut{fill:none;stroke:var(--ink-3);stroke-width:2;stroke-dasharray:5 4}.pi-chart .ch-fut.bad{stroke:var(--red)}
.pi-chart text{font-size:11px;fill:var(--ink-3)}.pi-chart .ch-lvl-t{fill:var(--amber);font-weight:600}
.pi-in{color:var(--good);font-weight:600;font-size:12px}.pi-out{color:var(--accent);font-weight:600;font-size:12px}
tr.tot td{font-weight:600}
@media (max-width:600px){.pi-grid{grid-template-columns:1fr}}
/* product page tables sit in half-width cards: tighter headings and a narrow split bar, so nothing is cut off */
.pi-grid>.card{margin:0;min-width:0}
.pi-grid th{letter-spacing:.02em;padding-left:6px;padding-right:6px}.pi-grid td{padding-left:6px;padding-right:6px}
.pi-grid .split{min-width:50px;width:70px}
.seg.task-lists{flex-wrap:wrap}  /* the list tabs wrap instead of running off the page */