/* production
   Work orders, shop paperwork and the shop floor.

   Loaded by `stylesheet_link_tag :app`, which includes every .css under
   app/assets sorted by filename — so the NUMBER PREFIX IS THE CASCADE ORDER.
   Renaming a file moves it in the cascade. */

/* ---------------- production ---------------- */
.progress {
  height: 5px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.progress span { display: block; height: 100%; background: var(--signal); }

/* Shop paperwork. Printed and carried around a workshop, so it's plain,
   high-contrast, and has somewhere to tick things off. */
body.print { background: #fff; }
.sheet { max-width: 980px; margin: 0 auto; padding: 28px; color: #000; }
.sheet-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 12px; margin-bottom: 18px; border-bottom: 2px solid #000;
}
.sheet-title { font: 600 19px var(--ui); letter-spacing: -0.02em; }
.sheet-sub { font-size: 12.5px; color: #444; margin-top: 3px; }

.sheet-table { width: 100%; border-collapse: collapse; }
.sheet-table th {
  font: 500 10px var(--ui); text-transform: uppercase; letter-spacing: 0.06em;
  text-align: left; color: #444; padding: 6px 8px; border-bottom: 1px solid #000;
}
.sheet-table td { padding: 9px 8px; border-bottom: 1px solid #ccc; font-size: 12.5px; vertical-align: top; }
.sheet-table .num { text-align: right; }
.sheet-table .small { font-size: 11.5px; color: #333; }
.sheet-table .strong { font-weight: 600; font-size: 13.5px; }
.tickbox { }
.tickbox::before {
  content: ""; display: block; width: 15px; height: 15px;
  border: 1.5px solid #000; border-radius: 2px;
}

.sheet-block { margin-top: 20px; padding-top: 12px; border-top: 1px solid #000; }
.sheet-block-title {
  font: 500 10px var(--ui); text-transform: uppercase; letter-spacing: 0.06em;
  color: #444; margin-bottom: 7px;
}
.sheet-row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 3px 0; }
.sheet-note { font-size: 12.5px; padding: 3px 0; }
.sheet-foot { margin-top: 26px; font-size: 11px; color: #666; }

@media print {
  .print-hide { display: none; }
  .sheet { padding: 0; max-width: none; }
  .sheet-table tr { page-break-inside: avoid; }
}

.split-check { width: auto; }

.pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 14px 18px; border-top: 1px solid var(--line);
  font-size: 13px;
}
.pagination-links { display: flex; gap: 8px; }

/* "showing some of many" on a card, with a way through to the rest. */
.card-more {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 11px 18px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-3);
}

/* ---------------- shop floor ---------------- */
/* A unit and its steps are one block: drop the rule between them, and let the
   steps cell own the spacing. Without this the first card butts straight up
   against the unit row's border. */
tr.unit-row.has-steps > td { border-bottom: none; padding-bottom: 4px; }
.steps-cell { padding: 0 18px 16px; border-bottom: 1px solid var(--line); }
.steps { display: flex; flex-direction: column; gap: 6px; }
.step {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 10px 12px; border-radius: var(--r);
  background: var(--sunken); border: 1px solid var(--line);
}
.step.in_progress { border-color: var(--signal); background: var(--signal-bg); }
.step.done, .step.skipped { opacity: .55; }
.step-main { flex: 1; font-size: 13px; }
.step-instructions { font-size: 12.5px; margin-top: 4px; line-height: 1.5; white-space: pre-line; }
.step-actions { flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.step-finish { display: flex; justify-content: flex-end; }

/* The override is the exception, so it stays folded away until asked for. */
.step-override > summary {
  cursor: pointer; list-style: none;
  font-size: 11.5px; color: var(--ink-3);
  text-align: right; padding: 4px 0 0;
}
.step-override > summary::-webkit-details-marker { display: none; }
.step-override > summary:hover { color: var(--ink); }
.step-override-body { padding-top: 6px; max-width: 210px; }
.step-override-body input { width: 100%; text-align: right; }
.step-override-body p { font-size: 11px; line-height: 1.4; margin: 5px 0 0; text-align: right; }

.timer { display: flex; align-items: center; gap: 8px; }
.timer-clock {
  font: 500 15px var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.timer-clock.is-running { color: var(--signal); }

/* --- a bill of materials ------------------------------------------------ */

/* Six columns because a component is six facts, and reading them across is
   how you check a bill rather than a part. */
.bom-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 70px minmax(0, 1.2fr) 68px 30px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.bom-row input, .bom-row select { margin: 0; min-width: 0; }
.rows-head.bom-row {
  margin-bottom: 6px;
  font: 500 11px var(--ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 860px) {
  /* Six across is unreadable on a phone; the labels come back per field. */
  .bom-row { grid-template-columns: 1fr 1fr; }
  .rows-head.bom-row { display: none; }
}

/* Recording waste: four fields on one line, because it is a thing somebody
   does at a bench with one hand. */
.waste-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 8px; }
.waste-form .field { margin: 0; }
.waste-form .field label { font-size: 11.5px; }
.waste-form input[type="number"] { width: 92px; }

/* --- the cutting plan on a printed sheet -------------------------------- */

/* One block per fabric and cut length, because those are the two things that
   decide what can share a length of roll. */
.cut-group { margin-bottom: 14px; }
.cut-group:last-child { margin-bottom: 0; }
.cut-group-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 6px 0 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.cut-group-head .mono { font-size: 11.5px; color: var(--ink-3); }
/* A cut is several panels, so a row is taller than a data row and its cells
   have to sit at the top of it rather than float in the middle. */
.cut-table td { vertical-align: top; }
.cut-table .small div { padding: 1px 0; }

/* Why a step stopped, or was passed over. Set apart from the instructions
   above it, which are what to DO — this is what happened instead. */
.step-note {
  font-size: 12.5px; margin-top: 4px; line-height: 1.5;
  color: var(--ink-2); border-left: 2px solid var(--line-2); padding-left: 8px;
}

/* THE BENCH PRESSES THESE WITH GLOVES ON. Start, Pause, Resume, Finish,
   Reopen and Skip were 26px tall — .button-small is 5px of padding and
   .link-button 4px — on the one page in the app that is used standing up, at
   arm's length, on a tablet. Measured before: 50 x 26. */
.step-actions .button, .step-actions .link-button, .step-actions input[type="submit"] {
  min-height: 40px; padding-left: 14px; padding-right: 14px;
}
.step-actions .step-override > summary { padding: 10px 0 0; }
/* Ticking a whole shade off, in the units table beside it. */
.unit-row .button-small, .unit-row .link-button { min-height: 40px; }