/* Components. Values come only from tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 400 var(--fs-14)/1.45 var(--font-sans); color: var(--ink); background: var(--canvas);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong);
  text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button { font: inherit; color: inherit; }
[x-cloak] { display: none !important; }
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num { text-align: right; white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-12); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Layout ---------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  background: var(--surface); border-right: var(--line-w) solid var(--line);
  padding: var(--s-5) 0 var(--s-4);
}
.sidebar-head { padding: 0 var(--s-5) var(--s-6); }
.wordmark { font-weight: 600; font-size: var(--fs-14); letter-spacing: -.1px; }
.wordmark-sub { font-size: var(--fs-12); color: var(--muted); }
.logo { display: block; max-width: 132px; max-height: 28px; margin-bottom: var(--s-3); }
.nav { display: flex; flex-direction: column; }
.nav a {
  display: block; padding: 6px var(--s-5); color: var(--muted); text-decoration: none;
  border-left: 2px solid transparent; font-size: var(--fs-14);
}
.nav a:hover { color: var(--ink); background: var(--hover); }
.nav a[aria-current="page"] { color: var(--ink); border-left-color: var(--accent); font-weight: 500; }
.nav-sep { height: 1px; background: var(--line); margin: var(--s-3) var(--s-5); }
.sidebar-foot { margin-top: auto; padding: var(--s-4) var(--s-5) 0; border-top: var(--line-w) solid var(--line);
  display: grid; gap: var(--s-3); font-size: var(--fs-12); color: var(--muted); }
.sync-line { display: flex; align-items: center; gap: var(--s-2); }
.sidebar-foot .row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.menu-btn { display: none; }

.main { min-width: 0; display: flex; flex-direction: column; }
.page { width: 100%; max-width: var(--content-max); padding: var(--s-6) var(--s-8) var(--s-12); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4);
  margin-bottom: var(--s-4); }
.page-title { font-size: var(--fs-28); font-weight: 600; line-height: 1.15; letter-spacing: -.4px; margin: 0; }
.page-sub { color: var(--muted); margin-top: var(--s-1); }
.section { margin-top: var(--s-6); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  margin-bottom: var(--s-2); }
.section-title { font-size: var(--fs-16); font-weight: 600; margin: 0; }
.section-note { font-size: var(--fs-12); color: var(--muted); }
.surface { background: var(--surface); border: var(--line-w) solid var(--line); border-radius: var(--r-2); }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; }

/* ---------- Filter bar ---------- */
.filterbar {
  position: sticky; top: 0; z-index: 20; background: var(--canvas);
  border-bottom: var(--line-w) solid var(--line);
}
.filterbar-inner {
  max-width: var(--content-max); min-height: var(--filterbar-h); padding: var(--s-2) var(--s-8);
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2);
}
.filterbar .spacer { flex: 1 1 auto; }
.seg { display: inline-flex; border: var(--line-w) solid var(--line-strong); border-radius: var(--r-3);
  background: var(--surface); overflow: hidden; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label, .seg button {
  height: calc(var(--control-h) - 2px); display: inline-flex; align-items: center; padding: 0 10px;
  font-size: var(--fs-13); color: var(--muted); cursor: pointer; border: 0; background: none;
  border-left: var(--line-w) solid var(--line); white-space: nowrap;
}
.seg > :first-child, .seg > input:first-child + label { border-left: 0; }
.seg label:hover, .seg button:hover { color: var(--ink); background: var(--hover); }
.seg input:checked + label, .seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: -2px; }

.control, .input {
  height: var(--control-h); border: var(--line-w) solid var(--line-strong); border-radius: var(--r-3);
  background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-13);
  padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap;
}
.control:hover, .input:hover { border-color: var(--muted); }
.control[aria-expanded="true"] { border-color: var(--ink); }
.control .count { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--surface);
  background: var(--ink); border-radius: var(--r-1); padding: 0 4px; line-height: 16px; }
.control .caret { width: 8px; height: 8px; border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted); transform: translateY(-2px) rotate(45deg); margin-left: 2px; }
.input { cursor: text; width: 100%; }
.input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.input::placeholder { color: var(--faint); }
.search { position: relative; width: 240px; }
.search .input { padding-left: 28px; }
.search::before { content: ""; position: absolute; left: 10px; top: 10px; width: 9px; height: 9px;
  border: 1.5px solid var(--muted); border-radius: 50%; }
.search::after { content: ""; position: absolute; left: 19px; top: 20px; width: 5px; height: 1.5px;
  background: var(--muted); transform: rotate(45deg); }
.reset { font-size: var(--fs-16); color: var(--muted); text-decoration: none; width: 24px; text-align: center; }
.reset:hover { color: var(--ink); }
.filterbar .spacer { flex: 1 1 0; min-width: 0; }
.busy { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent);
  opacity: 0; transform-origin: left; transform: scaleX(.2); transition: opacity .1s; pointer-events: none; }
.busy.htmx-request { opacity: 1; animation: busy 1s ease-in-out infinite; }
@keyframes busy { from { transform: scaleX(.05); } to { transform: scaleX(1); } }

/* Popover */
.pop { position: relative; display: inline-block; }
.pop-panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: 260px;
  background: var(--surface); border: var(--line-w) solid var(--line-strong); border-radius: var(--r-3);
  box-shadow: var(--overlay-shadow); padding: var(--s-2);
}
.pop-panel.right { left: auto; right: 0; }
.pop-panel .input { margin-bottom: var(--s-2); }
.pop-title { font-size: var(--fs-12); color: var(--muted); margin: var(--s-2) var(--s-1) var(--s-1); }
.pop-title:first-child { margin-top: 0; }
.optlist { max-height: 260px; overflow-y: auto; display: grid; }
.opt { display: flex; align-items: center; gap: var(--s-2); padding: 5px var(--s-1); border-radius: var(--r-1);
  cursor: pointer; font-size: var(--fs-13); }
.opt:hover { background: var(--hover); }
.opt .meta { margin-left: auto; color: var(--faint); font-family: var(--font-mono); font-size: var(--fs-12); }
.pop-foot { display: flex; justify-content: space-between; gap: var(--s-2); border-top: var(--line-w) solid var(--line);
  margin-top: var(--s-2); padding-top: var(--s-2); }
.pop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); min-width: 520px; }
.pop-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 780px; }

/* Checkbox / radio */
.check { appearance: none; width: 14px; height: 14px; margin: 0; flex: none; border: 1px solid var(--line-strong);
  border-radius: var(--r-1); background: var(--surface); display: inline-grid; place-content: center; cursor: pointer; }
.check:checked { background: var(--ink); border-color: var(--ink); }
.check:checked::after { content: ""; width: 7px; height: 4px; border-left: 1.5px solid var(--surface);
  border-bottom: 1.5px solid var(--surface); transform: translateY(-1px) rotate(-45deg); }
.check[type="radio"] { border-radius: 50%; }
.check[type="radio"]:checked::after { width: 6px; height: 6px; border: 0; border-radius: 50%;
  background: var(--surface); transform: none; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); margin: 0 0 var(--s-4); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 4px 0 8px;
  border: var(--line-w) solid var(--line-strong); border-radius: var(--r-2); font-size: var(--fs-12);
  background: var(--surface); }
.chip .k { color: var(--muted); }
.chip button { border: 0; background: none; cursor: pointer; color: var(--muted); width: 16px; height: 16px;
  line-height: 14px; padding: 0; border-radius: var(--r-1); }
.chip button:hover { color: var(--ink); background: var(--hover); }

/* Buttons */
.btn { height: var(--control-h); padding: 0 var(--s-3); border-radius: var(--r-3); font-size: var(--fs-13);
  font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  border: var(--line-w) solid var(--line-strong); background: var(--surface); color: var(--ink);
  text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--ink); }
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.btn-primary:hover { background: color-mix(in srgb, var(--ink) 85%, var(--surface)); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { border-color: transparent; background: none; color: var(--muted); }
.btn-ghost:hover { color: var(--ink); border-color: transparent; background: var(--hover); }
.btn-sm { height: 24px; padding: 0 var(--s-2); font-size: var(--fs-12); }
.btn[disabled], .btn.htmx-request { opacity: .5; cursor: progress; }
.icon-btn { width: var(--control-h); padding: 0; }

/* Status */
.status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--data-mid); flex: none; }
.status.ink::before { background: var(--ink); }
.status.open::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--data-mid); }
.status.bad::before { background: var(--bad); }
.status.bad { color: var(--bad); }
/* Auftragsstatus by classification; filled = settled, ring = still running. */
.status.s-done::before { background: var(--ink); }
.status.s-open::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.status.s-waiting::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--data-mid); }
.status.s-cancelled { color: var(--muted); }
.status.s-cancelled::before { background: var(--data-compare); }
.status.s-unknown { color: var(--muted); }
.status.s-unknown::before { background: transparent; border: 1px dashed var(--data-mid); width: 4px; height: 4px; }
/* Formularstatus */
.status.f-finalized::before { background: var(--ink); }
.status.f-inProgress::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ---------- KPI bar ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface);
  border: var(--line-w) solid var(--line); border-radius: var(--r-2); }
.kpi { padding: var(--s-4) var(--s-5) var(--s-4); border-left: var(--line-w) solid var(--line);
  border-top: var(--line-w) solid var(--line); min-width: 0; display: grid;
  grid-template-columns: 1fr auto; grid-template-areas: "label spark" "value value" "cmp cmp"; column-gap: var(--s-2); }
.kpi:nth-child(4n + 1) { border-left: 0; }
.kpi:nth-child(-n + 4) { border-top: 0; }
.kpi-label { grid-area: label; font-size: var(--fs-12); color: var(--muted); align-self: start; }
.kpi-spark { grid-area: spark; align-self: start; }
.kpi-value { grid-area: value; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-40); line-height: 1.05; font-weight: 400; letter-spacing: -1.5px; margin-top: var(--s-2);
  white-space: nowrap; }
.kpi-value .unit { font-size: var(--fs-16); letter-spacing: 0; color: var(--muted); margin-left: 4px; }
.kpi-cmp { grid-area: cmp; margin-top: var(--s-2); font-size: var(--fs-12); color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-cmp .delta { color: var(--ink); font-family: var(--font-mono); }
.kpi.bad .kpi-value { color: var(--bad); }
.kpi.minor { padding-top: var(--s-3); padding-bottom: var(--s-3); }
.kpi.minor .kpi-value { font-size: var(--fs-28); letter-spacing: -.8px; margin-top: var(--s-1); }
.kpi.minor .kpi-value .unit { font-size: var(--fs-14); }
.kpi.minor .kpi-cmp { margin-top: var(--s-1); }
/* KPI split by order kind: one row per kind (label, value, comparison) */
.kpis-split { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s-3); }
.kpis-split .kpi { border-top: 0; grid-template-areas: "label" "rows"; grid-template-columns: 1fr; }
.kpis-split .kpi:nth-child(2n + 1) { border-left: 0; }
.kpi-split-rows { grid-area: rows; margin: var(--s-2) 0 0; }
.kpi-split-row { display: grid; grid-template-columns: minmax(110px, 1fr) auto minmax(0, 1.6fr);
  align-items: baseline; column-gap: var(--s-4); padding: var(--s-1) 0; border-top: var(--line-w) solid var(--line); }
.kpi-split-row:first-child { border-top: 0; }
.kpi-split-row dt { font-size: var(--fs-13); }
.kpi-split-row dd { margin: 0; }
.kpi-split-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-20);
  text-align: right; white-space: nowrap; }
.kpi-split-value .unit { font-size: var(--fs-12); color: var(--muted); margin-left: 3px; }
.kpi-split-row .kpi-cmp { margin-top: 0; }
@media (max-width: 900px) { .kpis-split { grid-template-columns: 1fr; }
  .kpis-split .kpi { border-left: 0; } .kpis-split .kpi + .kpi { border-top: var(--line-w) solid var(--line); } }
.spark { display: block; overflow: visible; }
.spark polyline { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.spark circle { fill: var(--accent); }

/* ---------- Charts ---------- */
.charts { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); background: var(--surface);
  border: var(--line-w) solid var(--line); border-radius: var(--r-2); }
.chart { padding: var(--s-4) var(--s-5) var(--s-3); min-width: 0; border-left: var(--line-w) solid var(--line); }
.chart:first-child { border-left: 0; }
.charts-2x2 .chart:nth-child(odd) { border-left: 0; }
.charts-2x2 .chart:nth-child(n + 3) { border-top: var(--line-w) solid var(--line); }
.span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  margin-bottom: var(--s-3); }
.chart-title { font-size: var(--fs-14); font-weight: 600; }
.chart-note { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; }
.chart-box { position: relative; height: 200px; }
.key { display: inline-flex; align-items: center; gap: 5px; margin-left: var(--s-3); }
.key i { width: 8px; height: 8px; display: inline-block; border-radius: 1px; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; background: var(--surface); border: var(--line-w) solid var(--line);
  border-radius: var(--r-2); max-height: var(--table-max-h, none); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-13); }
.table th, .table td { height: var(--row-h); padding: 0 10px; border-bottom: var(--line-w) solid var(--line);
  text-align: left; white-space: nowrap; vertical-align: middle; }
.table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); color: var(--muted);
  font-weight: 500; font-size: var(--fs-12); border-bottom-color: var(--line-strong); }
.table th.num, .table td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.table th.num { font-family: var(--font-sans); }
.table tbody tr:hover > td { background: var(--hover); }
.table > tbody:last-of-type > tr:last-child > td { border-bottom: 0; }
.table.inner tbody tr:last-child > td { border-bottom: 0; }
.search .input::-webkit-search-cancel-button { display: none; }
.table td.wrap { white-space: normal; min-width: 220px; }
.table td.trunc { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.table.inner td.trunc { max-width: 200px; }
.block .table.inner { table-layout: fixed; }
.block .table.inner td.trunc { max-width: none; }
.block .table.inner th:first-child { width: 58%; }
.table td a { text-decoration: none; }
.table td a:hover { text-decoration: underline; text-decoration-color: var(--ink); }
.table .sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.table .sort::after { content: ""; width: 0; height: 0; border: 3px solid transparent; opacity: .35;
  border-top-color: currentColor; transform: translateY(2px); }
.table .sort[aria-sort="ascending"]::after { opacity: 1; border-top-color: transparent; border-bottom-color: currentColor;
  transform: translateY(-2px); }
.table .sort[aria-sort="descending"]::after { opacity: 1; }
.table tfoot td { font-weight: 500; border-top: var(--line-w) solid var(--line-strong); border-bottom: 0; }
.table .th-tools { width: 1%; text-align: right; }
.row-toggle { width: 20px; height: 20px; border: 0; background: none; cursor: pointer; padding: 0;
  display: inline-grid; place-items: center; color: var(--muted); }
.row-toggle::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .12s; }
.row-toggle[aria-expanded="true"]::before { transform: rotate(45deg); }
.row-toggle:hover { color: var(--ink); }
.detail-row > td { background: var(--canvas); padding: var(--s-3) var(--s-4) var(--s-4) 44px; white-space: normal; }
.detail-row:hover > td { background: var(--canvas); }
.detail-grid { display: grid; gap: var(--s-4); }
.subhead { font-size: var(--fs-12); font-weight: 600; margin: 0 0 var(--s-1); display: flex; gap: var(--s-2); }
.subhead .muted { font-weight: 400; }
.table.inner { background: var(--surface); border: var(--line-w) solid var(--line); border-radius: var(--r-2); }
.table.inner th, .table.inner td { height: 30px; }
.table.inner thead th { position: static; }
.table .subtotal td { font-weight: 500; background: var(--hover); }
.more-link { border: 0; background: none; padding: 0; color: var(--muted); cursor: pointer; font-size: var(--fs-12);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.table-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border-top: var(--line-w) solid var(--line); font-size: var(--fs-12); color: var(--muted); }

.table .tog { width: 32px; padding: 0 0 0 var(--s-2); }
.table tr.is-open > td { background: var(--hover); }
.table .group-row > td { background: var(--canvas); font-weight: 500; border-bottom-color: var(--line-strong); }
.table .group-row:hover > td { background: var(--canvas); }
.g-label { font-weight: 600; margin-right: var(--s-2); }
.flag { display: inline-block; margin-left: 6px; padding: 0 4px; border: var(--line-w) solid var(--line-strong);
  border-radius: var(--r-1); font-family: var(--font-sans); font-size: 11px; line-height: 16px; color: var(--muted); }
.loading { color: var(--muted); font-size: var(--fs-12); padding: var(--s-2) 0; }
.loading::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: -1px;
  border: 1.5px solid var(--line-strong); border-top-color: var(--ink); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pager { display: inline-flex; align-items: center; gap: var(--s-2); }
.pager .per { display: inline-flex; gap: 2px; align-items: center; margin-right: var(--s-3); }
.pager .per a { padding: 0 5px; text-decoration: none; color: var(--muted); font-family: var(--font-mono); }
.pager .per a:hover { color: var(--ink); }
.pager .per a[aria-current] { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.toolbar { align-items: center; flex-wrap: wrap; }
.tool-group { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.tool-label { font-size: var(--fs-12); color: var(--muted); }
.seg a.seg-link { height: calc(var(--control-h) - 2px); display: inline-flex; align-items: center; padding: 0 10px;
  font-size: var(--fs-13); color: var(--muted); text-decoration: none; border-left: var(--line-w) solid var(--line);
  white-space: nowrap; }
.seg a.seg-link:first-child { border-left: 0; }
.seg a.seg-link:hover { color: var(--ink); background: var(--hover); }
.seg a.seg-link[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.seg.sm a.seg-link { height: 22px; padding: 0 8px; font-size: var(--fs-12); }
.seg span.seg-link { height: calc(var(--control-h) - 2px); display: inline-flex; align-items: center; padding: 0 10px;
  font-size: var(--fs-13); color: var(--faint); border-left: var(--line-w) solid var(--line); white-space: nowrap; cursor: not-allowed; }
.seg span.seg-link:first-child { border-left: 0; }

/* Pivot */
.pivot-tools { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: center; margin-bottom: var(--s-2); }
.pivot th.dim, .pivot td.dim { position: sticky; left: 0; z-index: 1; background: var(--surface);
  border-right: var(--line-w) solid var(--line); min-width: 180px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.pivot thead th.dim { z-index: 3; }
.pivot tbody tr:hover > td.dim { background: var(--hover); }
.pivot tfoot td.dim { background: var(--surface); }
.pivot th.tot, .pivot td.tot { border-left: var(--line-w) solid var(--line-strong); font-weight: 500; }
.pivot td.zero { color: var(--faint); }
.pivot .dim .sub { color: var(--muted); font-size: var(--fs-12); margin-left: var(--s-2); }
.pivot thead th.colh { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }

/* Order sections (expandable row and detail page) */
.order-sections { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4) var(--s-5); }
.osec { min-width: 0; }
.osec-times { grid-column: 1 / -1; }
.osec-foot { grid-column: 1 / -1; display: flex; gap: var(--s-2); }
.inner-wrap { overflow-x: auto; }
.subhead-sum { margin-left: auto; font-weight: 400; }
.table .day-row > td { background: var(--hover); height: 28px; font-size: var(--fs-12); }
.table.inner tbody:last-of-type tr:last-child > td { border-bottom: var(--line-w) solid var(--line); }
.table.inner tfoot td { border-top: var(--line-w) solid var(--line-strong); }
.none { margin: 0; padding: var(--s-2) 0; }
.warn-text { font-weight: 600; text-decoration: underline; text-decoration-style: dotted; }
.crumbs { font-size: var(--fs-12); color: var(--muted); margin-bottom: var(--s-2); }
.crumbs a { color: var(--muted); }
.blocks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: var(--s-6);
  background: var(--surface); border: var(--line-w) solid var(--line); border-radius: var(--r-2); }
.block { padding: var(--s-4) var(--s-5) var(--s-5); min-width: 0; border-left: var(--line-w) solid var(--line); }
.block:first-child { border-left: 0; }
.block-title { font-size: var(--fs-14); font-weight: 600; margin: 0 0 var(--s-3); }
.block-title .muted { font-weight: 400; }
.block .table.inner { margin-bottom: var(--s-2); }
.prose-list { padding: 0 var(--s-5); }
.work-item { padding: var(--s-4) 0; border-top: var(--line-w) solid var(--line); }
.work-item:first-child { border-top: 0; }
.work-item h3 { font-size: var(--fs-14); font-weight: 600; margin: 0 0 var(--s-1); display: flex; gap: var(--s-3);
  align-items: baseline; justify-content: space-between; }
.work-item h3 .small { font-weight: 400; }
.work-item p, .para { margin: 0 0 var(--s-1); max-width: 90ch; }
.lead-value { font-size: var(--fs-16); margin: 0 0 var(--s-2); }
.sigs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.sig { border-top: var(--line-w) solid var(--line-strong); padding-top: var(--s-2); }
.sig-role { font-size: var(--fs-12); color: var(--muted); }
.sig-name { font-size: var(--fs-16); margin: 2px 0; }
.toast { position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: 100; max-width: 420px; padding: var(--s-2) var(--s-3);
  background: var(--ink); color: var(--surface); border-radius: var(--r-2); font-size: var(--fs-13); box-shadow: var(--overlay-shadow); }
.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpis-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpis-3 .kpi, .kpis-5 .kpi, .kpis-6 .kpi { border-top: 0; border-left: var(--line-w) solid var(--line); }
.kpis-3 .kpi:first-child, .kpis-5 .kpi:first-child, .kpis-6 .kpi:first-child { border-left: 0; }

/* Timeline (machine history) */
.timeline { list-style: none; margin: 0; padding: 0; }
.tl-year { padding: var(--s-3) var(--s-5) var(--s-1); font-size: var(--fs-12); font-weight: 600; color: var(--muted);
  border-top: var(--line-w) solid var(--line); }
.tl-year:first-child { border-top: 0; }
.tl-item { --rail: calc(var(--s-5) + 88px + 20px); position: relative; display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto; column-gap: 40px; padding: var(--s-3) var(--s-5); }
.tl-item::before { content: ""; position: absolute; left: var(--rail); top: 0; bottom: 0; width: 1px; background: var(--line); }
.tl-item::after { content: ""; position: absolute; left: calc(var(--rail) - 3px); top: 19px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.tl-item.draft::after { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--data-mid); }
.tl-item:hover { background: var(--hover); }
.tl-date { font-size: var(--fs-13); padding-top: 2px; }
.tl-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.tl-title a { font-weight: 500; }
.tl-meta { font-size: var(--fs-12); margin-top: 2px; }
.tl-meta .sep { margin: 0 4px; }
.tl-work { font-size: var(--fs-12); margin-top: 2px; max-width: 90ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-actions { align-self: center; }

/* Employee list extras */
.ratio { display: inline-flex; width: 88px; height: 6px; background: var(--data-compare); vertical-align: middle; }
.ratio i { display: block; height: 100%; background: var(--data-2); }
.ratio-cell { white-space: nowrap; font-size: var(--fs-12); color: var(--muted); }
.ratio-cell .mono { display: inline-block; min-width: 34px; text-align: right; margin-left: var(--s-2); }

/* Export form */
.export-form { background: var(--surface); border: var(--line-w) solid var(--line); border-radius: var(--r-2); }
.ex-formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: var(--line-w) solid var(--line); }
.ex-format { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4) var(--s-5); cursor: pointer;
  border-left: var(--line-w) solid var(--line); }
.ex-format:first-child { border-left: 0; }
.ex-format:hover { background: var(--hover); }
.ex-format .check { margin-top: 3px; }
.ex-format strong { display: block; font-weight: 600; }
.ex-format:has(input:checked) { box-shadow: inset 0 -2px 0 var(--ink); }
.ex-items { border: 0; border-radius: 0; }
.ex-items label { cursor: pointer; }
.ex-cols { display: flex; align-items: center; gap: var(--s-2); }
.ex-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-5);
  padding: var(--s-3) var(--s-5); border-top: var(--line-w) solid var(--line-strong); }
.ex-action { display: flex; align-items: center; gap: var(--s-4); white-space: nowrap; }

.ext { color: var(--muted); text-decoration: none; font-family: var(--font-sans); margin-left: 2px; }
.ext:hover { color: var(--ink); }

/* Settings */
.set-nav { display: flex; gap: var(--s-5); border-bottom: var(--line-w) solid var(--line); margin-top: var(--s-2);
  font-size: var(--fs-13); }
.set-nav a { color: var(--muted); padding: var(--s-2) 0; text-decoration: none; }
.set-nav a:hover { color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink); }
.set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
.set-grid .set-block:last-child { grid-column: 1 / -1; }
.set-block-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
  padding: var(--s-3) var(--s-4); border-bottom: var(--line-w) solid var(--line); }
.set-title { font-size: var(--fs-13); font-weight: 600; margin: 0 0 2px; }
.set-table { border: 0; border-radius: 0; }
.set-input { width: 45%; padding-top: 3px !important; padding-bottom: 3px !important; }
.set-input .input { width: 100%; height: 28px; }
.set-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding: var(--s-2) var(--s-4); border-top: var(--line-w) solid var(--line); }
.set-sync { display: flex; justify-content: space-between; align-items: center; gap: var(--s-6); padding: var(--s-4) var(--s-5); }
.set-actions { display: flex; gap: var(--s-2); }
.set-detail { white-space: normal; max-width: 380px; }
.set-detail summary { cursor: pointer; font-size: var(--fs-12); color: var(--muted); }
.set-detail summary:hover { color: var(--ink); }
.set-detail p { margin: var(--s-1) 0; }
.set-errors { margin: var(--s-1) 0; padding-left: var(--s-4); font-size: 11px; color: var(--ink); }
.set-pw { padding: var(--s-4) var(--s-5); }
.set-pw-form { display: grid; grid-template-columns: repeat(3, minmax(0, 240px)); gap: var(--s-3) var(--s-4); }
.set-pw-form label { font-size: var(--fs-12); color: var(--muted); display: grid; gap: var(--s-1); }
.set-pw-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s-4); }
@media (max-width: 1100px) { .set-grid { grid-template-columns: 1fr; } }

/* Data quality (the only page where red marks findings) */
.q-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.q-kpis .kpi { border-top: 0; border-left: var(--line-w) solid var(--line); color: inherit; text-decoration: none; }
.q-kpis .kpi:nth-child(5n + 1) { border-left: 0; }
.q-kpis .kpi:nth-child(n + 6) { border-top: var(--line-w) solid var(--line); }
.q-kpi:hover { background: var(--hover); }
.q-kpi .kpi-label { min-height: 2.6em; }
.q-scope { margin: var(--s-2) 0 0; max-width: 110ch; }
.q-count { font-size: var(--fs-13); font-weight: 400; color: var(--muted); margin-left: var(--s-1); }
.q-count.q-bad { color: var(--bad); }
.section-title .status { margin-right: var(--s-2); vertical-align: middle; }
.q-ok { padding: var(--s-3) var(--s-4); font-size: var(--fs-13); color: var(--muted); }
.q-orders { white-space: normal; max-width: 360px; }
.mono .status { font-family: var(--font-sans); margin-left: var(--s-2); }
.q-head { display: block; }
.q-head .section-note { display: block; margin-top: 2px; max-width: 110ch; }
.q-more { padding: var(--s-2) 0; }
@media (max-width: 1279px) {
  .q-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .q-kpis .kpi:nth-child(n) { border-left: var(--line-w) solid var(--line); border-top: 0; }
  .q-kpis .kpi:nth-child(4n + 1) { border-left: 0; }
  .q-kpis .kpi:nth-child(n + 5) { border-top: var(--line-w) solid var(--line); }
}

/* Column picker */
.colpick { width: 340px; }
.colpick .group { font-size: var(--fs-12); color: var(--muted); margin: var(--s-2) var(--s-1) 2px; }
.colpick .opt .move { margin-left: auto; display: inline-flex; gap: 2px; visibility: hidden; }
.colpick .opt:hover .move { visibility: visible; }
.colpick .move button { width: 18px; height: 18px; border: 0; background: none; color: var(--muted); cursor: pointer;
  border-radius: var(--r-1); padding: 0; line-height: 18px; font-size: 11px; }
.colpick .move button:hover { background: var(--line); color: var(--ink); }

/* Calendar */
.cal { width: 252px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-2); }
.cal-head strong { font-weight: 500; font-size: var(--fs-13); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.cal-grid .dow { font-size: 11px; color: var(--faint); text-align: center; padding: 2px 0; }
.cal-grid button { height: 30px; border: 0; background: none; cursor: pointer; font-family: var(--font-mono);
  font-size: var(--fs-12); border-radius: var(--r-1); color: var(--ink); }
.cal-grid button:hover { background: var(--hover); }
.cal-grid button.out { color: var(--faint); }
.cal-grid button.in { background: var(--hover); }
.cal-grid button.edge { background: var(--ink); color: var(--surface); }
.cal-grid button.today { box-shadow: inset 0 -2px 0 var(--accent); }
.date-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-bottom: var(--s-3); }
.date-fields label { font-size: var(--fs-12); color: var(--muted); display: grid; gap: 2px; }
.date-fields .input { font-family: var(--font-mono); }

/* Empty state */
.empty { padding: var(--s-10) var(--s-6); text-align: center; color: var(--muted); }
.empty strong { display: block; color: var(--ink); font-weight: 500; margin-bottom: var(--s-1); }

/* Description list */
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--s-6); margin: 0; font-size: var(--fs-13); }
.dl dt { color: var(--muted); }
.dl dd { margin: 0; }

/* Notice */
.notice { border: var(--line-w) solid var(--line-strong); border-left: 2px solid var(--ink); background: var(--surface);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-1); font-size: var(--fs-13); margin-bottom: var(--s-4); }

/* Login */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--s-6); }
.login-box { width: 100%; max-width: 340px; }
.login-box .wordmark { font-size: var(--fs-20); }
.login-box form { margin-top: var(--s-6); display: grid; gap: var(--s-3); }
.login-box label { font-size: var(--fs-12); color: var(--muted); display: grid; gap: var(--s-1); }
.login-box .btn { width: 100%; margin-top: var(--s-2); }
.error-text { color: var(--bad); font-size: var(--fs-13); }

/* Styleguide */
.sg-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.swatch { width: 120px; font-size: var(--fs-12); }
.swatch i { display: block; height: 40px; border: var(--line-w) solid var(--line); border-radius: var(--r-2); margin-bottom: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
  .page, .filterbar-inner { padding-left: var(--s-4); padding-right: var(--s-4); }
  .filterbar-inner { gap: 6px; }
  .seg label, .seg button { padding: 0 7px; }
  .reset { width: 20px; }
  .control { padding: 0 8px; }
  /* Search collapses to an icon and expands over the bar while focused. */
  .search { width: var(--control-h); height: var(--control-h); }
  .search .input { position: absolute; right: 0; top: 0; width: var(--control-h); padding-right: 0; z-index: 5;
    transition: width .12s; }
  .search .input::placeholder { color: transparent; }
  .search:focus-within .input { width: 280px; padding-right: 10px; }
  .search:focus-within .input::placeholder { color: var(--faint); }
  .search .input:not(:placeholder-shown) { border-color: var(--ink); }
  .search::before, .search::after { z-index: 6; pointer-events: none; }
  .kpi { padding: var(--s-3) var(--s-4); }
  .kpi-value { font-size: 32px; letter-spacing: -1px; }
  .kpi.minor .kpi-value { font-size: var(--fs-20); letter-spacing: -.4px; }
  .kpi.minor .kpi-spark { display: none; }
  .kpi-cmp { white-space: normal; }
  .kpi-cmp .sep { display: none; }
  .kpi-cmp .delta { display: block; }
  .chart { padding: var(--s-3) var(--s-4); }
}
@media (max-width: 1100px) {
  .charts .chart { grid-column: span 6; }
  .charts:not(.charts-2x2) .chart:nth-child(3) { grid-column: span 12; border-left: 0; border-top: var(--line-w) solid var(--line); }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 50; left: 0; top: 0; width: 248px; transform: translateX(-100%);
    transition: transform .15s; }
  .sidebar.open { transform: none; box-shadow: var(--overlay-shadow); }
  .menu-btn { display: inline-flex; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(n) { border-left: var(--line-w) solid var(--line); border-top: var(--line-w) solid var(--line); }
  .kpi:nth-child(2n + 1) { border-left: 0; }
  .kpi:nth-child(-n + 2) { border-top: 0; }
  .pop-grid, .pop-grid-3 { grid-template-columns: 1fr; min-width: 280px; }
  .charts-2x2 .chart { grid-column: span 12; border-left: 0; }
  .charts-2x2 .chart:nth-child(n + 2) { border-top: var(--line-w) solid var(--line); }
  .kpis-3, .kpis-5, .kpis-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blocks, .order-sections { grid-template-columns: 1fr; }
  .block { border-left: 0; border-top: var(--line-w) solid var(--line); }
  .block:first-child { border-top: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }