/* Milling runs, mass balance, packing and traceability. Uses the app.css and viz.css tokens,
   so light, dark and print need nothing extra here except the bag labels (always black on white). */

.prod-crumbs { font-size: 14px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.prod-crumbs a { text-decoration: none; font-weight: 600; }

/* Trace / scan box */
.prod-trace-box { display: flex; flex-direction: column; gap: 6px; }
.prod-trace-box .field-label { display: inline-flex; align-items: center; gap: 8px; }
.prod-trace-box .field-label .icon { width: 18px; height: 18px; }
.prod-trace-row { display: flex; gap: 8px; }
.prod-trace-row input { flex: 1 1 auto; min-width: 0; font-family: var(--mono); }

/* Hero */
.prod-hero { display: grid; gap: 16px; margin-bottom: 16px; }
.prod-hero-main { display: flex; flex-direction: column; gap: 14px; }
.prod-hero-main h2 { margin: 0; }
.prod-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 12px 0; }

/* Yield meters */
.prod-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px 22px; margin-top: 12px; }

/* Cards of running runs and open batches */
.prod-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.prod-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--radius); border: 1px solid var(--line); border-top: 4px solid var(--info); background: var(--glass-strong); color: var(--ink); text-decoration: none; transition: box-shadow .15s, transform .15s; }
.prod-card:hover { box-shadow: var(--shadow-hover); color: var(--ink); transform: translateY(-1px); }
.prod-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.prod-card-top strong { font-size: 16px; }
.prod-card-what { font-size: 14px; color: var(--muted); }
.prod-card-figs { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Status chips on the runs list */
.prod-status-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.prod-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--ink); font-size: 14px; text-decoration: none; }
.prod-chip strong { font-variant-numeric: tabular-nums; }
.prod-chip-info { background: var(--info-bg); color: var(--info); border-color: transparent; }
.prod-chip-warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.prod-chip-ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }

/* Output kind picker: big tap targets with the stream colour */
.prod-kinds { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.prod-kinds legend { margin-bottom: 6px; }
.prod-kind { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 12px; border-radius: 12px; border: 1.5px solid var(--line-strong); background: var(--glass); cursor: pointer; font-weight: 600; }
.prod-kind input { margin: 0; }
.prod-kind::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--viz-rice); box-shadow: inset 0 0 0 1px var(--line-strong); }
.prod-kind-broken::before { background: var(--viz-broken); }
.prod-kind-bran::before { background: var(--viz-bran); }
.prod-kind-husk::before { background: var(--viz-husk); }
.prod-kind-reject::before { background: var(--muted); }
.prod-kind:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.prod-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; background: var(--viz-rice); box-shadow: inset 0 0 0 1px var(--line-strong); }
.prod-dot-broken { background: var(--viz-broken); }
.prod-dot-bran { background: var(--viz-bran); }
.prod-dot-husk { background: var(--viz-husk); }
.prod-dot-reject { background: var(--muted); }

/* Live preview while closing a run */
.prod-preview { display: block; padding: 10px 14px; border-radius: 12px; background: var(--sunk); font-weight: 600; font-variant-numeric: tabular-nums; }
.prod-preview:empty { display: none; }
.prod-preview.is-ok { background: var(--ok-bg); color: var(--ok); }
.prod-preview.is-over { background: var(--bad-bg); color: var(--bad); }

/* Lines */
.prod-undone td { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.prod-undone td:last-child, .prod-undone td:nth-last-child(2) { text-decoration: none; }
.prod-under td { color: var(--bad); font-weight: 600; }
.prod-undo summary { cursor: pointer; color: var(--bad); font-weight: 600; font-size: 14px; }
.prod-undo .inline-form { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.prod-undo input { min-width: 160px; }
.prod-cancel summary { cursor: pointer; font-weight: 600; color: var(--bad); }

/* Run lot and batch codes */
.prod-runlot-codes { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.prod-qr { width: 120px; height: 120px; display: block; background: #FFFFFF; padding: 4px; border-radius: 8px; }
.prod-code-big { display: block; font-size: 22px; letter-spacing: .02em; margin-bottom: 4px; }
.prod-runlot-codes svg.barcode { max-width: 260px; background: #FFFFFF; }

/* Trace chain */
.prod-chain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.prod-chain > li { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 10px 18px; border-radius: 12px; background: var(--sunk); border-left: 4px solid var(--accent); }
.prod-chain-kind { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* Bag labels: black on white in every theme, so readers and printers get contrast */
.prod-labels { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.prod-label { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1.5px dashed #888888; border-radius: 12px; background: #FFFFFF; color: #111111; break-inside: avoid; page-break-inside: avoid; }
.prod-label-head { display: flex; flex-direction: column; gap: 1px; border-bottom: 1px solid #DDDDDD; padding-bottom: 6px; }
.prod-label-head strong { font-size: 15px; line-height: 1.25; }
.prod-label-head span { font-size: 12px; color: #444444; }
.prod-label-body { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; }
.prod-qr-sm { width: 96px; height: 96px; display: block; }
.prod-label-facts { margin: 0; display: grid; gap: 2px; font-size: 13px; }
.prod-label-facts div { display: flex; gap: 6px; }
.prod-label-facts dt { color: #555555; min-width: 5.5em; }
.prod-label-facts dd { margin: 0; font-weight: 600; }
.prod-label-weight { font-size: 18px; }
.prod-label-code { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.prod-label-bar { width: 100%; max-width: 260px; height: auto; }
.prod-label-code span { font-size: 15px; letter-spacing: .04em; }

@media (max-width: 560px) {
  .prod-trace-row { flex-direction: column; }
  .prod-kpis { grid-template-columns: 1fr 1fr; }
  .prod-meters { grid-template-columns: 1fr; }
  .prod-labels { grid-template-columns: 1fr; }
  .prod-kind { flex: 1 1 calc(50% - 8px); }
}

@media print {
  .prod-trace-box, .prod-undo, .prod-cancel { display: none !important; }
  .prod-labels { grid-template-columns: 1fr 1fr 1fr; gap: 4mm; }
  .prod-label { border: 1px solid #000000; border-radius: 4px; padding: 3mm; }
  .prod-card, .prod-chain > li { break-inside: avoid; }
}