/* ==========================================================================
   MKH - Production
   Visual language from the Claude Design project.
   Requires tokens.css, base.css, components.css, layout.css and
   bill-of-materials.css, whose .bom-line the entry form reuses.

   The entry screen has one job the other forms do not: answering "what will
   these be worth" while there is still time to change something. That is what
   the running total at the foot of the page is for.
   ========================================================================== */

/* --------------------------------------------------------------------------
   What was made
   -------------------------------------------------------------------------- */

/* Product, quantity, warehouse and date. Wide enough to read the product name,
   with the three short fields sized to their contents rather than sharing the
   remainder equally, which would give the date twice the room it needs. */
.prod-head {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 140px minmax(0, 1fr) 160px;
  gap: var(--sp-3) var(--sp-4);
  align-items: start;
}

/* Where the made goods go, under the head, for a warehouse divided into areas. */
.prod-head__areas { margin-top: var(--sp-3); }

/* The areas a line's stock comes from or goes into, under everything else on
   the line: it is about the line as a whole, not about any one figure. */
.bom-line__areas { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   A line that also carries a value
   -------------------------------------------------------------------------- */

/* By-products need a third number: what they are worth. Extends the shared
   .bom-line rather than restating it. */
.bom-line--valued { grid-template-columns: minmax(0, 1fr) 132px 132px 34px; }

/* What is on the shelf, under the input that needs it. Read while typing a
   quantity, so it sits directly beneath the picker rather than beside it. */
.bom-line__stock {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--txt-3);
}
.bom-line__stock svg { width: 12px; height: 12px; flex: none; }

.bom-line__stock.is-short { color: var(--bad-fg); }

/* The row itself is marked, not only the note: a short line has to be findable
   by glancing down a list of fifteen. */
.bom-line.is-short .input,
.bom-line.is-short .combo__input { border-color: var(--bad); }

/* --------------------------------------------------------------------------
   What it will be worth
   -------------------------------------------------------------------------- */

/* The answer to the only question the screen exists to answer, kept in view
   while the form is still being filled in. Tinted rather than plain so it does
   not read as one more card of inputs. */
.prod-total { background: var(--surface-2); border-color: var(--line-strong); }

.prod-total.is-blocked { border-color: var(--bad); }

.prod-total__grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.prod-total__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-md);
  color: var(--txt-2);
}

/* The sum is the line people look for, so it is ruled off and given weight. */
.prod-total__line--sum {
  margin-top: var(--sp-1);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--txt);
}

.prod-total__label { min-width: 0; }

.prod-total__value { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* The per-unit figure, which is what somebody actually quotes. */
.prod-total__rate {
  margin-top: var(--sp-3);
  font-size: var(--fs-md);
  color: var(--txt-2);
}
.prod-total__rate strong { color: var(--accent-graphic); font-weight: var(--fw-bold); }

.prod-total__warn {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--bad-fg);
}

/* --------------------------------------------------------------------------
   Narrowing
   -------------------------------------------------------------------------- */

/* Four fields across stops fitting well before the tracks technically break:
   the product picker is the one that has to stay readable, so it takes a whole
   row and the rest share the next.

   The fixed track goes first, and it is sized for a date input rather than a
   quantity. Auto-placement then puts the quantity and the date in it and gives
   the remainder to the warehouse, which is the only one of the three carrying a
   name long enough to be cut off. */
@container content (max-width: 900px) {
  .prod-head { grid-template-columns: 165px minmax(0, 1fr); }
  .prod-head .field:first-child { grid-column: 1 / -1; }
}

@container content (max-width: 620px) {
  .prod-head { grid-template-columns: minmax(0, 1fr); }
  .bom-line--valued { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px; }
  .bom-line--valued .bom-line__product { grid-column: 1 / -1; }

  /* Stacked, the label and the figure would otherwise be pushed to opposite
     ends of a very narrow row and read as unrelated. */
  .prod-total__line { gap: var(--sp-2); }
}

@supports not (container-type: inline-size) {
  @media (max-width: 1180px) {
    .prod-head { grid-template-columns: 165px minmax(0, 1fr); }
    .prod-head .field:first-child { grid-column: 1 / -1; }
  }
  @media (max-width: 900px) {
    .prod-head { grid-template-columns: minmax(0, 1fr); }
    .bom-line--valued { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px; }
    .bom-line--valued .bom-line__product { grid-column: 1 / -1; }
    .prod-total__line { gap: var(--sp-2); }
  }
}