/* Batch traceability + recall drill (pages/kitchen/traceability.html). Demo data, no backend. */
.tr-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.tr-picker .sp-input-icon { flex: 1 1 240px; max-width: 320px; }
.tr-dir { margin-left: auto; }

.tr-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; position: relative; margin-bottom: 14px; }
.tr-step { position: relative; text-align: left; padding: 14px; border: 1px solid var(--sp-border); border-radius: var(--sp-radius-md); background: var(--sp-surface); color: var(--sp-text); display: flex; flex-direction: column; gap: 6px; transition: border-color .18s, box-shadow .18s, transform .18s; animation: tr-in .45s var(--sp-ease) both; animation-delay: calc(var(--i) * 80ms); }
.tr-step:hover { border-color: var(--sp-border-strong); box-shadow: var(--sp-shadow-sm); }
.tr-step.is-on { border-color: var(--sp-primary); box-shadow: 0 0 0 3px var(--sp-primary-ring); }
.tr-step:not(:last-child)::after { content: ''; position: absolute; top: 31px; right: -11px; width: 12px; height: 2px; background: var(--sp-border-strong); z-index: 1; }
.tr-step.is-hit { border-color: var(--sp-danger); background: var(--sp-danger-soft); }
@keyframes tr-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tr-step-n { display: flex; align-items: center; gap: 8px; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sp-muted); }
.tr-step-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--sp-primary-soft); color: var(--sp-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.tr-step b { font-size: .88rem; letter-spacing: -.01em; }
.tr-step small { color: var(--sp-muted); font-size: .72rem; line-height: 1.4; }
.tr-sys { align-self: flex-start; padding: 1px 7px; border-radius: 99px; background: var(--sp-surface-3); color: var(--sp-text-2); font-size: .64rem; font-weight: 600; }
.tr-warn { color: var(--sp-warning-text); font-weight: 600; }
.tr-bad { color: var(--sp-danger-text); font-weight: 600; }

.tr-detail dl { display: grid; grid-template-columns: 150px 1fr; gap: 9px 14px; margin: 0; font-size: .8rem; }
.tr-detail dt { color: var(--sp-muted); font-weight: 500; }
.tr-detail dd { margin: 0; color: var(--sp-text); }
.tr-lots { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.tr-lot { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--sp-divider); border-radius: 10px; background: var(--sp-surface-2); font-size: .78rem; }
.tr-lot.is-warn { border-color: var(--sp-warning); }
.tr-lot b { color: var(--sp-text); }
.tr-lot span { color: var(--sp-muted); }

.tr-drill-run { width: 100%; }
.tr-prog { height: 8px; border-radius: 8px; background: var(--sp-surface-3); overflow: hidden; margin: 14px 0 10px; }
.tr-prog i { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, var(--sp-primary), var(--sp-violet)); transition: width .25s linear; }
.tr-counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.tr-counters div { padding: 8px 4px; border-radius: 10px; background: var(--sp-surface-2); }
.tr-counters b { display: block; font-size: 1.1rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tr-counters span { font-size: .66rem; color: var(--sp-muted); text-transform: uppercase; letter-spacing: .05em; }
.tr-result { margin-top: 14px; }
.tr-result[hidden] { display: none; }
.tr-result-sum { padding: 11px 13px; border-radius: 10px; background: var(--sp-danger-soft); color: var(--sp-danger-text); font-size: .8rem; line-height: 1.5; margin-bottom: 12px; }
.tr-outlets { max-height: 260px; overflow: auto; margin: 0 -4px 12px; padding: 0 4px; display: flex; flex-direction: column; gap: 6px; }
.tr-outlet { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 10px; border: 1px solid var(--sp-divider); border-radius: 10px; font-size: .76rem; }
.tr-outlet b { color: var(--sp-text); font-weight: 600; }
.tr-outlet span { color: var(--sp-muted); }
.tr-chip { align-self: center; grid-row: 1 / span 2; grid-column: 2; padding: 2px 8px; border-radius: 99px; font-size: .66rem; font-weight: 700; background: var(--sp-surface-3); color: var(--sp-text-2); white-space: nowrap; }
.tr-chip.held { background: var(--sp-warning-soft); color: var(--sp-warning-text); }
.tr-chip.notified { background: var(--sp-success-soft); color: var(--sp-success-text); }
.tr-result-acts { display: flex; flex-wrap: wrap; gap: 8px; }

.tr-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.tr-log li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding-bottom: 12px; position: relative; font-size: .78rem; }
.tr-log li:not(:last-child)::before { content: ''; position: absolute; left: 8px; top: 18px; bottom: 0; width: 2px; background: var(--sp-divider); }
.tr-log i { width: 18px; height: 18px; border-radius: 50%; background: var(--sp-primary-soft); border: 2px solid var(--sp-primary); margin-top: 1px; }
.tr-log b { color: var(--sp-text); font-weight: 600; }
.tr-log small { display: block; color: var(--sp-muted); font-size: .7rem; }

@media (max-width: 1199.98px) {
  .tr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-step::after { display: none; }
}
@media (max-width: 575.98px) { .tr-steps { grid-template-columns: 1fr; } .tr-detail dl { grid-template-columns: 1fr; gap: 2px; } .tr-detail dd { margin-bottom: 8px; } }
@media (prefers-reduced-motion: reduce) { .tr-step { animation: none; } .tr-prog i { transition: none; } }