/* FactoryPlus — application styles (built on tokens.css) */
@import url("fonts.css");
@import url("tokens.css");

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--chalk);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-3);
}

a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Top bar ---------- */
.topbar {
  background: var(--indigo-deep);
  color: #fff;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  height: 52px;
  position: sticky;
  top: 0;
  z-index: 30;
}
.topbar__brand {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__brand:hover { text-decoration: none; }
.brandmark {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 5px;
  background: #fff; color: var(--indigo-deep);
  font-size: 13px; font-weight: 800; letter-spacing: -0.02em; flex: none;
}
.topbar__spacer { flex: 1; }
.topbar__user { font-size: 13px; color: #cfd9ea; display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.topbar__iconbtn {
  position: relative;
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: var(--radius);
  color: #fff; background: transparent; border: 1px solid transparent; cursor: pointer;
}
.topbar__iconbtn:hover { background: rgba(255,255,255,0.12); text-decoration: none; }
.badge {
  position: absolute; top: 2px; right: 0;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--alert); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.badge--inline { position: static; display: inline-block; margin-left: auto; }
/* ---------- Office shell ---------- */
.shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: calc(100vh - 52px);
}
.rail {
  background: var(--paper);
  border-right: 1px solid var(--line);
  padding: var(--space-4) 0;
  position: sticky;
  top: 52px;
  height: calc(100vh - 52px);
  overflow-y: auto;
}
.rail__group { margin-bottom: var(--space-4); }
.rail__title {
  font-size: 11px;
  color: var(--ink-soft);
  padding: 0 var(--space-4);
  margin: 0 0 var(--space-1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.rail a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px var(--space-4);
  color: var(--ink);
  border-left: 3px solid transparent;
  font-size: 14px;
}
.rail a .ico { color: var(--ink-soft); flex: none; }
.rail a.active .ico { color: var(--indigo); }
.rail a:hover { background: var(--indigo-wash); text-decoration: none; }
.rail a.active {
  border-left-color: var(--indigo);
  background: var(--indigo-wash);
  font-weight: 600;
}
.main { padding: var(--space-5); max-width: 1240px; width: 100%; min-width: 0; }

/* ---------- Factory (phone-first) shell ---------- */
.mshell { max-width: 560px; margin: 0 auto; }

/* Factory shell opens up on bigger screens: same components, more room.
   (CSS breakpoint — no user-agent sniffing needed.) */
@media (min-width: 720px) {
  .mshell { max-width: 720px; }
  .mhead h1 { font-size: 26px; }
  .mhead .sub { font-size: 14px; }
  .mbody { padding-top: var(--space-5); }
}
@media (min-width: 1000px) {
  .mshell { max-width: 900px; }
}
.mhead {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: var(--space-4);
}
.mhead h1 { font-size: 20px; margin: 0; }
.mhead__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.mhead .sub { color: var(--ink-soft); font-size: 13px; margin-top: 2px; }
.mhead__back:empty, .crumbs:empty { display: none; }
.mhead__back a, .crumbs .back { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 600; margin: -4px 0 6px -4px; padding: 4px; min-height: 32px; }
.crumbs .back { margin: 0; padding: 0; min-height: 0; font-size: 13px; }
.mbody { padding: var(--space-4); }
.bottomnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
  display: flex;
  z-index: 20;
}
/* Reserve space so nothing interactive hides under the fixed nav */
/* Set on the shell itself — :has() is missing on older Android WebViews */
.mshell { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
.bottomnav a {
  flex: 1;
  text-align: center;
  padding: 10px 0 max(10px, env(safe-area-inset-bottom));
  font-size: 12px;
  color: var(--ink-soft);
  border-top: 2px solid transparent;
}
.bottomnav a.active { color: var(--indigo); border-top-color: var(--indigo); font-weight: 600; }
.bottomnav a:hover { text-decoration: none; }
.bottomnav .nav-ico { display: block; position: relative; width: 24px; height: 24px; margin: 0 auto 2px; }
.bottomnav .nav-ico .badge { top: -4px; right: -12px; }

/* ---------- Tickets (job rows with status spine) ---------- */
.ticket {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--spine-neutral);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  color: inherit;
  min-height: var(--tap);
}
.ticket:hover { text-decoration: none; border-color: var(--line-strong); border-left-width: 4px; }
.ticket--new { border-left-color: var(--spine-new); }
.ticket--progress { border-left-color: var(--spine-progress); }
.ticket--ok { border-left-color: var(--spine-ok); }
.ticket--bad { border-left-color: var(--spine-bad); }
.ticket--qc { border-left-color: var(--spine-qc); }
.ticket .steps { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.ticket__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}
.ticket__no { font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.ticket__style { font-weight: 600; margin-top: 2px; }
.ticket__meta { color: var(--ink-soft); font-size: 13px; margin-top: 4px; }
.ticket__meta strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.ticket--bad .ticket__meta strong.late { color: var(--alert); font-weight: 700; }

/* ---------- Chips ---------- */
.chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.chip--new { background: var(--indigo-wash); color: var(--indigo-deep); }
.chip--pending { background: var(--amber-wash); color: var(--amber); }
.chip--progress { background: var(--amber-wash); color: var(--amber); }
.chip--ok { background: var(--loom-wash); color: var(--loom); }
.chip--bad { background: var(--alert-wash); color: var(--alert); }
.chip--neutral { background: #ECEEEA; color: var(--ink-soft); }
.chip--active { background: var(--indigo); color: #fff; }
.chip--qc { background: var(--qc-wash); color: var(--qc); }
.chip--done { background: var(--loom); color: #fff; }

/* ---------- Production journey (planned → delivered) ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.steps__item { position: relative; text-align: center; font-size: 12px; color: var(--ink-soft); min-width: 0; }
.steps__item + .steps__item::before {
  content: ""; position: absolute; top: 12px; right: 50%; width: 100%; height: 2px; background: var(--line);
}
.steps__item.is-done::before, .steps__item.is-current::before { background: var(--indigo); }
.steps__dot {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 26px; height: 26px; margin: 0 auto 4px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--line-strong);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.steps__label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.is-done .steps__dot { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.is-current .steps__dot { border-color: var(--indigo); color: var(--indigo); box-shadow: 0 0 0 4px var(--indigo-wash); }
.is-current .steps__label { color: var(--ink); font-weight: 600; }
.steps--late .is-current .steps__dot { border-color: var(--alert); color: var(--alert); box-shadow: 0 0 0 4px var(--alert-wash); }
.steps--late .is-current .steps__label { color: var(--alert); }
.steps .is-done:last-child .steps__dot { background: var(--loom); border-color: var(--loom); }
/* Narrow phones: only the current step keeps its label — dots say the rest. */
@media (max-width: 480px) {
  .steps__dot { width: 24px; height: 24px; }
  .steps__item + .steps__item::before { top: 11px; }
  .steps__label { visibility: hidden; }
  .is-current .steps__label { visibility: visible; overflow: visible; }
}
/* compact: six segments under a status chip in tables */
.psteps { display: flex; gap: 3px; margin-top: 6px; width: 84px; }
.psteps i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.psteps i.is-done { background: var(--indigo); }
.psteps i.is-current { background: var(--indigo); opacity: 0.45; }
.psteps--late i.is-current { background: var(--alert); opacity: 1; }
.psteps--done i.is-done { background: var(--loom); }

/* ---------- Stat strip (dashboards) ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 84px;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  color: inherit;
}
a.stat:hover { border-color: var(--line-strong); text-decoration: none; background: #FCFCFB; }
.stat__num {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat__unit { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-right: 2px; }
.stat__label { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.stat__hint { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }
.stat--zero .stat__num { color: var(--line-strong); }
.stat--bad { border-left-color: var(--alert); }
.stat--bad .stat__num { color: var(--alert); }
.stat--warn { border-left-color: var(--amber); }
.stat--warn .stat__num { color: var(--amber); }
.stat--ok { border-left-color: var(--loom); }
.stat--info { border-left-color: var(--indigo); }
.stat__num--bad { color: var(--alert); }
/* Wide screens: one row of equal tiles, however many a strip holds —
   no lone tile wrapping onto a second row. */
@media (min-width: 1200px) {
  .stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .stats--pair { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
}
.stats--pair { grid-template-columns: 1fr 1fr; margin-bottom: 0; }
.stats--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat { min-height: 72px; }
  .stat__num { font-size: 22px; }
}

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: var(--space-5) 0 var(--space-3); }
.section-head h2 { margin: 0; font-size: 16px; }
.section-head a { font-size: 13px; }

/* Output chart: server-rendered bars, no JS. */
.chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-2); align-items: end; height: 140px; padding-top: var(--space-2); }
.chart__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; min-width: 0; }
.chart__bar { width: 100%; max-width: 44px; background: var(--indigo); border-radius: 3px 3px 0 0; position: relative; min-height: 2px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.chart__bar--empty { background: var(--line); }
.chart__defect { background: var(--alert); width: 100%; }
.chart__val { font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.chart__day { font-size: 11px; color: var(--ink-soft); }
.legend { display: flex; gap: var(--space-4); font-size: 12px; color: var(--ink-soft); margin-top: var(--space-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

/* ---------- Tables ---------- */
.table-wrap { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; font-size: 14px; }
table.list th {
  text-align: left;
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 600;
  padding: 10px var(--space-4);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
table.list td { padding: 10px var(--space-4); border-bottom: 1px solid var(--line); vertical-align: top; }
table.list tr:last-child td { border-bottom: none; }
table.list tr:hover td { background: #FAFBF9; }
/* table.list th sets text-align:left with higher specificity — mirror it here
   so numeric headers align with their right-aligned values. */
table.list td.num, table.list th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 13px; white-space: nowrap; }
table.list th a.sort { color: inherit; display: inline-block; }
table.list th a.sort:hover { color: var(--indigo); text-decoration: none; }
table.list th[aria-sort="ascending"], table.list th[aria-sort="descending"] { color: var(--ink); }
table.list tr.row--late td:first-child { box-shadow: inset 3px 0 0 var(--alert); }
table.list tr.row--void td { color: var(--ink-soft); text-decoration: line-through; }
table.list tr.row--void td.keep { text-decoration: none; }
table.list tfoot td { font-weight: 600; border-top: 1px solid var(--line-strong); border-bottom: none; }
table.list td.actions { white-space: nowrap; text-align: right; }
table.list--form td { vertical-align: middle; padding: 6px var(--space-3); }
table.list--form input, table.list--form select { min-height: 38px; padding: 6px 10px; font-size: 14px; }
table.list--form td.num input { text-align: right; max-width: 160px; }
.muted { color: var(--ink-soft); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.neg { color: var(--alert); }

/* progress bars */
.bar { background: var(--indigo-wash); border-radius: 999px; height: 10px; overflow: hidden; }
.bar--lg { height: 14px; }
.bar--sm { height: 6px; }
.bar__fill { background: var(--indigo); height: 100%; border-radius: 999px; }
.bar__fill--ok { background: var(--loom); }
.bar__fill--warn { background: var(--amber); }
.bar__fill--bad { background: var(--alert); }
.minibar { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.minibar .bar { flex: 1; }
.minibar span { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; }
.stage { margin-bottom: 10px; }
.stage__label { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 3px; }
.stage__label strong { font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  border: 1px solid var(--indigo);
  background: var(--indigo);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  padding: 10px 20px;
  min-height: var(--tap);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
}
.btn:hover { background: var(--indigo-deep); text-decoration: none; }
.btn--block { display: block; width: 100%; }
.btn--ghost { background: var(--paper); color: var(--indigo); }
.btn--ghost:hover { background: var(--indigo-wash); }
.btn--danger { background: var(--paper); color: var(--alert); border-color: var(--alert); }
.btn--danger:hover { background: var(--alert-wash); }
.btn--green { background: var(--loom); border-color: var(--loom); }
.btn--green:hover { background: #256541; }
.btn--quiet {
  background: var(--paper); color: var(--ink); border-color: var(--line-strong); font-weight: 500;
}
.btn--quiet:hover { background: var(--chalk); }
.btn--sm { min-height: 34px; padding: 5px 12px; font-size: 13px; }
.btn--link { background: none; border: none; color: var(--indigo); padding: 0; min-height: 0; font-weight: 600; }
.btn--link:hover { background: none; text-decoration: underline; }
.btn .ico { vertical-align: -4px; margin-right: 6px; }
.btn:focus-visible, a:focus-visible, .filter:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.actions-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* ---------- Forms ---------- */
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.field .help { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
.field .req { color: var(--alert); }
/* Must out-rank the global input rule (its :not() chain is 0,5,1). */
.field--error select,
.field--error textarea,
.field--error input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="search"]) { border-color: var(--alert); background: #FFFBFA; }
.field--error label { color: var(--alert); }
.field input[type="checkbox"] { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }
.form--wide { max-width: none; }
/* Two-column form grid: short fields pair up, textareas/long pickers span. */
.form { max-width: 720px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); }
.form-grid .field--wide { grid-column: 1 / -1; }
.form-grid .field { min-width: 0; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field .opt { font-weight: 400; color: var(--ink-soft); font-size: 12px; margin-left: 2px; }
/* The numbers people type every day: big, bold, easy to check at a glance. */
/* Must out-rank the global input rule (its :not() chain is 0,5,1). */
.field--big input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="search"]) { font-family: var(--font-head); font-size: 26px; font-weight: 700; min-height: 60px; font-variant-numeric: tabular-nums; }
.field--big label { font-size: 14px; }
/* Short fields that sit side by side even on a phone (pieces, hours…). */
.mshell .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mshell .form-grid > .field:not(.field--half) { grid-column: 1 / -1; }
.field--check label { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; cursor: pointer; }
.field--check input[type="checkbox"] { margin: 0; }
textarea { resize: vertical; }
.form-section { grid-column: 1 / -1; font-size: 14px; margin: var(--space-3) 0 var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line); }
/* A panel that only holds a form sizes to the form instead of a wide empty box. */
.panel:has(> form.form:not(.form--wide)) { max-width: 768px; }
.form-actions { padding-top: var(--space-4); border-top: 1px solid var(--line); }
.mshell .form-actions { border-top: none; padding-top: 0; }
.form-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }
.form-note--error { background: var(--alert-wash); border-color: var(--alert); }
.form-note p { margin: 0; }
.inline-fields { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: flex-end; }
.inline-fields .field { margin-bottom: 0; flex: 1; min-width: 140px; }

/* filter tabs (list pages) */
.filters { display: flex; gap: 8px; }
.filter {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--paper);
}
.filter.active { background: var(--indigo); border-color: var(--indigo); color: #fff; }
/* All native form controls styled like inputs — Django renders bare widgets,
   and tiny unstyled <select>s anchor their popup to an 18px strip (the
   "dropdown opens in the middle and snaps shut" bug). */
select,
textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="search"]) {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  min-height: 44px;
}
select:focus, textarea:focus, input:focus {
  outline: 2px solid var(--indigo);
  outline-offset: 1px;
}
.input, select.input, textarea.input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  min-height: 44px;
}
.input:focus { outline: 2px solid var(--indigo); outline-offset: 1px; }
.errorlist { color: var(--alert); font-size: 13px; margin: 4px 0 0; padding: 0; list-style: none; }
.form-note {
  background: var(--amber-wash);
  border: 1px solid var(--amber);
  color: var(--ink);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 14px;
}

/* ---------- Messages ---------- */
.messages { list-style: none; margin: 0; padding: var(--space-3) var(--space-4); }
.messages li {
  border-radius: var(--radius);
  padding: 10px var(--space-4);
  margin-bottom: var(--space-2);
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 14px;
}
.messages li.success { border-color: var(--loom); background: var(--loom-wash); }
.messages li.error { border-color: var(--alert); background: var(--alert-wash); }
.messages li.info, .messages li.warning { border-color: var(--amber); background: var(--amber-wash); }

/* ---------- Panels & detail pages ---------- */
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
.panel h2 { font-size: 15px; margin-bottom: var(--space-3); }
.panel__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.panel__head h2 { margin: 0; }
.panel--flush { padding: 0; overflow: hidden; }
.panel--flush .table-wrap { border: none; border-radius: 0; }
.panel > .table-wrap { margin: 0 calc(-1 * var(--space-5)); border-left: none; border-right: none; border-radius: 0; }
.panel > .table-wrap:last-child { margin-bottom: calc(-1 * var(--space-4)); border-bottom: none; }
/* Side-by-side cards share one height so their edges line up. */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-4); align-items: stretch; }
.grid-2 > .panel { margin-bottom: 0; display: flex; flex-direction: column; min-width: 0; }
.grid-2 > .panel > :last-child { margin-bottom: 0; }
.grid-2 + .panel, .grid-2 + .section-head { margin-top: var(--space-4); }
.big-figure { font-family: var(--font-head); font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 2px 0; }
.danger-zone { border-color: #E8C4C0; }
/* "Where is it / what now" card at the top of a PO page */
.panel--next { border-left: 4px solid var(--indigo); }
.panel--next > .steps { margin: var(--space-2) 0 var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.panel--next h2 { display: flex; align-items: center; gap: 6px; }
.panel--next .subtitle { font-size: 14px; color: var(--ink); }
.danger-zone h2 { color: var(--alert); }

/* Inline expanding forms (void/cancel with reason) — <details>, no JS. */
details.reveal { display: inline-block; }
details.reveal > summary { list-style: none; cursor: pointer; }
details.reveal > summary::-webkit-details-marker { display: none; }
details.reveal[open] > summary { margin-bottom: var(--space-2); }
details.reveal .reveal__body { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
details.reveal .reveal__body input { min-height: 34px; padding: 5px 10px; font-size: 13px; width: 220px; }

/* Callouts */
.callout { border: 1px solid var(--line-strong); border-left-width: 4px; border-radius: var(--radius); background: var(--paper); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); font-size: 14px; }
.callout strong:first-child { margin-right: 4px; }
.callout--warn { border-color: var(--amber); background: var(--amber-wash); }
.callout--bad { border-color: var(--alert); background: var(--alert-wash); }
.callout--info { border-color: var(--indigo); background: var(--indigo-wash); }
.callout--ok { border-color: var(--loom); background: var(--loom-wash); }
.callout ul { margin: 6px 0 0; padding-left: 18px; }
.callout .actions-row { margin-top: var(--space-2); }
.kv { display: grid; grid-template-columns: 160px 1fr; row-gap: 6px; font-size: 14px; }
.kv dt { color: var(--ink-soft); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; }
.page-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.page-title h1 { margin: 0; font-size: 22px; }
.page-title .actions-row { justify-content: flex-end; }
.page-title .chip { vertical-align: 2px; }
.crumbs { font-size: 13px; color: var(--ink-soft); margin-bottom: 4px; }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--indigo); }
.subtitle { color: var(--ink-soft); font-size: 13px; margin-top: 2px; }

/* ---------- Timeline (job history) ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 var(--space-4) var(--space-5); border-left: 2px solid var(--line-strong); margin-left: 6px; }
.timeline li:last-child { border-left-color: transparent; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--indigo);
}
.timeline .when { font-size: 12px; color: var(--ink-soft); }
.timeline .who { font-size: 13px; }

/* ---------- Empty states ---------- */
.empty {
  background: var(--paper);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  color: var(--ink-soft);
}
.empty .empty__title { font-family: var(--font-head); font-size: 17px; color: var(--ink); font-weight: 600; margin-bottom: 6px; }

/* ---------- Filters ---------- */
.filters { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); align-items: center; }
.filters a.filter {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--ink);
  background: var(--paper);
}
.filters a.filter.active { background: var(--indigo); border-color: var(--indigo); color: #fff; font-weight: 600; }
/* Inside filter rows, native controls keep their natural width — the global
   100%-width input rule (mobile dropdown fix) must not apply here. */
.filters form { display: flex; align-items: center; gap: 8px; margin: 0; }
.filters form select,
.filters form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="search"]) {
  width: auto;
  min-width: 160px;
  min-height: 38px;
  padding: 6px 12px;
  font-size: 14px;
}
.filters form .btn { white-space: nowrap; }
/* Desktop factory shell: phone-style block buttons shouldn't stretch across
   the wide desktop main column (phones keep them full-width in .mshell). */
.main .btn--block { display: inline-block; width: auto; min-width: 220px; }
.filters input[type="search"] {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 6px 12px;
  min-height: 38px;
  font-family: var(--font-body);
  font-size: 14px;
  min-width: 220px;
  background: var(--paper);
}
.filters .btn { min-height: 38px; padding: 6px 14px; font-size: 14px; }
.filters a.filter { min-height: 34px; display: inline-flex; align-items: center; }
.toolbar { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-4); }
.toolbar .filters { margin-bottom: 0; }
.toolbar__spacer { flex: 1; }
.toolbar__count { font-size: 13px; color: var(--ink-soft); }

/* Pagination */
.pager { display: flex; gap: var(--space-2); align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: var(--space-3); font-size: 13px; color: var(--ink-soft); }
.pager__links { display: flex; gap: 6px; }
.pager a, .pager span.current { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.pager span.current { background: var(--indigo); border-color: var(--indigo); color: #fff; font-weight: 600; }
.pager a:hover { text-decoration: none; background: var(--indigo-wash); }

/* ---------- Login ---------- */
.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.login-side {
  background: var(--indigo-deep);
  color: #DCE4F1;
  padding: var(--space-6);
  display: flex; flex-direction: column; justify-content: space-between;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 14px);
}
.login-side h2 { color: #fff; font-size: 30px; line-height: 1.15; max-width: 420px; margin: 0 0 var(--space-3); }
.login-side p { max-width: 420px; margin: 0; }
.login-side .flow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-5); font-size: 13px; }
.login-side .flow span { border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; padding: 3px 10px; }
.login-side .brand { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-head); font-weight: 700; color: #fff; font-size: 18px; }
.login-wrap { width: 100%; max-width: 400px; margin: auto; padding: var(--space-6) var(--space-4); }
.login-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-6); }
.login-card h1 { font-size: 22px; margin-bottom: var(--space-1); }
.login-card .subtitle { margin-bottom: var(--space-4); }
.login-foot { font-size: 13px; color: var(--ink-soft); margin-top: var(--space-4); }
.login-brand { display: none; text-align: center; color: var(--ink-soft); font-size: 13px; margin-bottom: var(--space-4); }
.login-brand .mark { font-family: var(--font-head); font-weight: 700; color: var(--indigo); font-size: 18px; display: block; }
@media (max-width: 800px) {
  .login-page { grid-template-columns: 1fr; }
  .login-side { display: none; }
  .login-brand { display: block; }
}

/* ---------- Install hint (PWA) ---------- */
.install-hint {
  background: var(--indigo-wash);
  border: 1px solid var(--indigo);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  font-size: 13px;
  margin-bottom: var(--space-4);
}

/* ---------- Inline utilities ---------- */
.inlineform { display: inline; margin: 0; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Language switcher (topbar + profile): one submit button per language, no JS. */
.langform { display: inline-flex; align-items: center; margin: 0; }
.langseg { display: inline-flex; border: 1px solid rgba(255,255,255,0.3); border-radius: var(--radius); overflow: hidden; }
.langseg button {
  font: inherit; font-size: 12px; font-weight: 600;
  color: #DCE4F1; background: transparent; border: none;
  padding: 5px 9px; cursor: pointer; min-width: 34px;
}
.langseg button + button { border-left: 1px solid rgba(255,255,255,0.3); }
.langseg button:hover { background: rgba(255,255,255,0.12); color: #fff; }
.langseg button[aria-pressed="true"] { background: #fff; color: var(--indigo-deep); }
.panel .langseg, .mhead .langseg { border-color: var(--line-strong); }
.panel .langseg button, .mhead .langseg button { color: var(--ink); }
.panel .langseg button + button, .mhead .langseg button + button { border-left-color: var(--line-strong); }
.panel .langseg button:hover, .mhead .langseg button:hover { background: var(--indigo-wash); color: var(--ink); }
.panel .langseg button[aria-pressed="true"], .mhead .langseg button[aria-pressed="true"] { background: var(--indigo); color: #fff; }
.linklike {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
}

/* ---------- Responsive: HQ shell collapses under 900px ----------
   The side rail becomes a horizontal scrollable nav strip so phone users
   keep full navigation. */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .rail {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    align-self: start;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 0 var(--space-2);
    -webkit-overflow-scrolling: touch;
  }
  .rail__group { display: flex; flex: 0 0 auto; margin: 0; align-items: center; align-self: start; }
  .rail__title { display: none; }
  .rail a {
    white-space: nowrap;
    border-left: none;
    border-bottom: 3px solid transparent;
    padding: 12px 12px;
  }
  .rail a.active {
    border-left: none;
    border-bottom-color: var(--indigo);
  }
  .main { padding: var(--space-4); }
  .kv { grid-template-columns: 1fr; }
  .kv dt { margin-top: 6px; }
  .rail { position: static; height: auto; top: auto; }
  .rail a .ico { display: none; }
  .topbar__username { display: none; }
  .page-title .actions-row { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .topbar { gap: var(--space-2); padding: 0 var(--space-3); }
  .panel { padding: var(--space-3) var(--space-4); }
  .panel > .table-wrap { margin-left: calc(-1 * var(--space-4)); margin-right: calc(-1 * var(--space-4)); }
  .filters input[type="search"] { min-width: 0; width: 100%; }
  .filters form { flex: 1 1 100%; }
}

@media print {
  .topbar, .rail, .bottomnav, .btn, .toolbar, .pager, .messages, .no-print { display: none !important; }
  body { background: #fff; }
  .shell { display: block; }
  .main { padding: 0; max-width: none; }
  .panel, .table-wrap { border-color: #bbb; }
}

/* ---------- Printable documents (delivery note, statement, order) ---------- */
.doc { max-width: 820px; margin: var(--space-5) auto; background: var(--paper); border: 1px solid var(--line); padding: 40px 48px; font-size: 14px; }
.doc__bar { max-width: 820px; margin: var(--space-4) auto 0; display: flex; gap: var(--space-2); justify-content: flex-end; }
.doc__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-5); border-bottom: 2px solid var(--ink); padding-bottom: var(--space-4); margin-bottom: var(--space-5); }
.doc__company { font-family: var(--font-head); font-size: 22px; font-weight: 700; }
.doc__title { font-family: var(--font-head); font-size: 18px; text-transform: uppercase; letter-spacing: 0.08em; text-align: right; }
.doc__no { font-family: var(--font-mono); font-size: 15px; text-align: right; }
.doc__parties { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-bottom: var(--space-5); }
.doc__parties h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin: 0 0 4px; font-family: var(--font-body); }
.doc table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-5); }
.doc th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); border-bottom: 1px solid var(--ink); padding: 6px 8px; }
.doc td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc .num { text-align: right; font-variant-numeric: tabular-nums; }
.doc tfoot td { font-weight: 700; border-top: 1px solid var(--ink); border-bottom: none; }
.doc__sign { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: 60px; }
.doc__sign div { border-top: 1px solid var(--ink); padding-top: 6px; font-size: 12px; color: var(--ink-soft); }
.doc__foot { margin-top: var(--space-5); font-size: 12px; color: var(--ink-soft); }
@media print {
  .doc { border: none; margin: 0; padding: 0; max-width: none; }
  .doc__bar { display: none; }
  @page { margin: 16mm; }
}

/* ---------- Horizontal bar list (top defects) ---------- */
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bars li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; font-size: 13px; }
.bars__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars__track { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.bars__fill { display: block; height: 100%; background: var(--alert); border-radius: 999px; }
.bars__val { font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }

/* ---------- Error pages (403 / 404 / 500) ---------- */
.errorpage { max-width: 520px; margin: 12vh auto 0; padding: 0 var(--space-4); }
.errorpage h1 { margin-top: 0; }
.mshell .reveal > summary.btn--block { display: flex; justify-content: center; width: 100%; }

/* Reference numbers inside page titles keep the heading's size. */
.page-title h1 .mono { font-size: inherit; font-weight: 500; letter-spacing: -0.01em; }

/* ---------- Form + guide side panel (wide screens) ---------- */
.with-aside { display: grid; grid-template-columns: minmax(0, 768px) minmax(260px, 340px); gap: var(--space-4); align-items: start; }
.with-aside > .panel { margin-bottom: 0; max-width: none; }
.aside .panel { padding: var(--space-4); }
.aside .panel h2 { font-size: 14px; margin-bottom: var(--space-2); }
.aside__lead { margin: 0 0 var(--space-3); font-size: 14px; }
.aside__note { margin: var(--space-2) 0 var(--space-3); }
.aside__note:last-child { margin-bottom: 0; }
.kv--tight { grid-template-columns: auto 1fr; column-gap: var(--space-3); font-size: 13px; }
.kv--tight dd { text-align: right; }
.loadlist, .daylist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); font-size: 13px; }
.loadlist__top { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.loadlist__name { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.loadlist__free { font-variant-numeric: tabular-nums; white-space: nowrap; }
.loadlist .bar { margin-bottom: 3px; }
.daylist { gap: 6px; }
.daylist__date { display: inline-block; min-width: 92px; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
@media (max-width: 1100px) { .with-aside { grid-template-columns: minmax(0, 1fr); } }

/* Inline confirmation tick inside an action form (e.g. pass a short QC). */
label.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; cursor: pointer; min-height: 40px; }
label.check input[type="checkbox"] { width: 18px; height: 18px; margin: 0; }
/* QC row: pass form and the fail toggle sit on one baseline. */
.qc-actions { align-items: flex-end; }
.qc-actions .inline-fields { align-items: flex-end; flex-wrap: wrap; }
.qc-actions .reveal > summary { margin-bottom: 0; }

/* Printed documents: letterhead, cancelled stamp, small summary tables. */
.doc__letterhead .doc__addr { font-size: 12px; color: var(--ink-soft); line-height: 1.45; }
.doc__stamp { border: 2px solid var(--alert); color: var(--alert); font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 12px; margin-bottom: var(--space-5); text-align: center; }
.doc table.doc__summary { width: auto; min-width: 50%; margin-left: auto; font-size: 13px; }
.doc table.doc__summary td, .doc table.doc__summary th { padding: 4px 8px; }
.doc__bank { margin-top: var(--space-4); font-size: 13px; border: 1px solid var(--line); padding: 10px 12px; }
.doc__bank h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin: 0 0 4px; font-family: var(--font-body); }
.bars__fill--muted { background: var(--line-strong, #B8B4A8); }

/* Long names (holidays, styles, Tamil labels) wrap inside their cell
   instead of pushing past the card edge. */
table.list td { overflow-wrap: break-word; }

/* Scroll hint: a soft shadow on the right edge while a wide table has more
   columns off-screen (pure CSS, background-attachment trick). */
.table-wrap {
  background:
    linear-gradient(to right, var(--paper) 30%, rgba(255,255,255,0)) left center / 24px 100% no-repeat local,
    linear-gradient(to left, var(--paper) 30%, rgba(255,255,255,0)) right center / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(20,20,40,.16), transparent) left center / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(20,20,40,.16), transparent) right center / 10px 100% no-repeat scroll;
  /* The covers are paper-coloured, so the table must sit on paper too —
     otherwise they show as a white fade on tables that don't scroll. */
  background-color: var(--paper);
}

/* Laptop widths: drop the least important columns so status and money stay
   on screen. Mark a cell/heading with .col-lg to hide it under 1200px. */
@media (max-width: 1199px) {
  .col-lg { display: none; }
}

/* Row actions collapse to one compact group instead of stacking. */
td.actions { white-space: nowrap; }
td.actions .btn--sm { padding-inline: 8px; }
.lg-only { display: none; }
@media (max-width: 1199px) { .lg-only { display: block; } }

/* Compact per-row menu ("More ▾") for secondary row actions. */
.rowmenu { position: relative; }
.rowmenu > summary { list-style: none; cursor: pointer; }
.rowmenu > summary::-webkit-details-marker { display: none; }
.rowmenu__body { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 170px; padding: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(20,20,40,.12); }
.rowmenu__body .btn, .rowmenu__body form, .rowmenu__body button { width: 100%; justify-content: flex-start; text-align: left; }
.btn--danger-text { color: var(--alert); }
.table-wrap:has(.rowmenu[open]) { overflow: visible; }

/* PO history: each marker takes its stage colour. */
.timeline li.tl--planned::before { border-color: var(--line-strong); }
.timeline li.tl--quality_check::before { border-color: var(--qc); }
.timeline li.tl--completed::before, .timeline li.tl--delivered::before { border-color: var(--loom); }
.timeline li.tl--delivered::before { background: var(--loom); }
.timeline li.tl--in_production::before { background: var(--indigo); }
.timeline li.tl--cancelled::before { border-color: var(--alert); }

/* Floor phones: void/reverse toggles and language buttons get finger-sized targets. */
.mshell .reveal > summary.btn--link, .shell--factory .reveal > summary.btn--link { min-height: 40px; display: inline-flex; align-items: center; }
.langseg button { min-height: 32px; min-width: 40px; }
/* Short number fields side by side: keep the label on one line so the inputs line up. */
.field--half > label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Factory PO actions: all full width; the QC request is the quieter one. */
.reveal { max-width: 100%; }
.panel .reveal > summary.btn--block { width: 100%; }
.reveal--block { display: block; }
.errorpage__brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; font-size: 18px; margin-bottom: var(--space-4); color: var(--ink); }
.errorpage__brand .brandmark { background: var(--indigo); color: #fff; }

/* Department output: a day under the line's target */
.cell--short { color: var(--amber); font-weight: 600; }

/* Live refresh indicator (static/js/live.js) */
.live-stamp { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,.75); margin-right: var(--space-3); white-space: nowrap; }
.live-stamp[hidden] { display: none; }
.live-stamp__dot { width: 7px; height: 7px; border-radius: 50%; background: #5FD08A; box-shadow: 0 0 0 3px rgba(95,208,138,.2); }
@media (max-width: 720px) { .live-stamp { display: none; } }

/* Flash messages on printable pages sit above the document. */
.doc__messages { max-width: 820px; margin: var(--space-3) auto 0; }
.doc__messages:empty { display: none; }
/* Printables on a phone: no sideways scroll for the amount column. */
@media (max-width: 480px) {
  .doc { padding: 20px 14px; font-size: 13px; margin: var(--space-3) 8px; }
  .doc table { font-size: 12px; }
  .doc__bar { flex-wrap: wrap; padding: 0 8px; }
  .doc__bar .muted { display: none; }
}
/* Long Sinhala/Tamil labels wrap inside their tile instead of spilling out. */
.stat__label { overflow-wrap: anywhere; }
/* Comfortable tap targets for the language switch on phones. */
@media (max-width: 720px) {
  .panel .langseg button, .mhead .langseg button { min-height: 44px; min-width: 48px; }
}
.errorpage h1 { font-size: clamp(22px, 6vw, 34px); overflow-wrap: anywhere; }
/* Stage-output tickets are plain floor records, not "needs attention". */
.ticket--progress { border-left-color: var(--indigo); }

/* Name cells keep a readable width instead of wrapping word by word. */
.cell-name { min-width: 180px; }
.lg-inline { display: none; }
@media (max-width: 1199px) { .lg-inline { display: inline; } }
/* Inline filter bars (date ranges, selects) use compact controls, the same
   height as the filter chips and the CSV button beside them. */
.toolbar input:not([type="checkbox"]):not([type="radio"]), .toolbar select { width: auto; min-height: 38px; padding: 6px 10px; font-size: 14px; }
.toolbar .btn { min-height: 38px; padding: 6px 14px; font-size: 14px; }
/* A form button posing as a link matches the links next to it. */
.btn--link.small { font-size: 12px; font-weight: 400; }

/* Fold-out action forms inside a table cell (Cleared / Returned / Void…)
   open as a small floating panel under their button instead of growing the
   row — growing it pushed the table into a sideways scroll. */
td details.reveal { position: relative; vertical-align: middle; }
td details.reveal[open] > summary { margin-bottom: 0; }
td details.reveal .reveal__body {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  width: min(320px, 86vw); flex-direction: column; align-items: stretch; gap: var(--space-2);
  padding: var(--space-3); background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 10px 28px rgba(20,20,40,.16); white-space: normal; text-align: left;
}
td details.reveal .reveal__body input, td details.reveal .reveal__body select { width: 100%; }
td details.reveal .reveal__body .btn { justify-content: center; }
.table-wrap:has(td details.reveal[open]) { overflow: visible; }
td.actions > details.reveal + details.reveal, td.actions > * + details.reveal { margin-left: 4px; }
.panel:has(td details.reveal[open]) { overflow: visible; }

/* Issue several materials at once: one row per BOM material. */
.issue-rows { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.issue-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.issue-row__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.issue-row__qty { display: flex; align-items: center; gap: 6px; }
.issue-row__qty input { max-width: 112px; flex: none; text-align: right; font-size: 17px; font-variant-numeric: tabular-nums; }
.issue-row__qty .muted { min-width: 28px; }
.issue-row__err { grid-column: 1 / -1; }
.issue-row--done .issue-row__name strong { color: var(--ink-soft); }
@media (max-width: 380px) { .issue-row__qty input { max-width: 96px; } }