/* Bảng tiến độ một đơn dùng máy (track.js). Mobile first: card dọc, nút to, chữ to.
   Dùng token màu của style.css nếu có, không có (trang public) thì rơi về giá trị ở đây. */
.tb-card { background: var(--card, #fff); color: var(--ink, #172132); border: 1px solid var(--line, #dce2e8);
  border-radius: 14px; padding: 16px; max-width: 560px; margin: 0 auto; box-sizing: border-box; }
.tb-head { border-bottom: 1px solid var(--line, #dce2e8); padding-bottom: 12px; margin-bottom: 8px; }
.tb-title { font-size: 20px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.tb-sub { font-size: 13px; color: var(--ink-soft, #64748b); margin-top: 2px; }
.tb-eta { font-size: 16px; margin-top: 8px; }
.tb-warn { background: var(--warn-bg, #fff4e5); color: var(--warn-ink, #8a4b00); border: 1px solid var(--warn-line, #f3c78a);
  border-radius: 10px; padding: 8px 10px; font-size: 14px; margin: 8px 0; }
.tb-steps { list-style: none; margin: 0; padding: 0; }
.tb-step { padding: 12px 2px; border-bottom: 1px solid var(--line, #eef1f4); }
.tb-step:last-child { border-bottom: 0; }
.tb-row { display: flex; align-items: baseline; gap: 10px; font-size: 16px; }
.tb-icon { width: 20px; flex: 0 0 20px; text-align: center; font-weight: 700; }
.tb-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tb-when { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--ink-soft, #64748b); font-size: 14px; }
.tb-step.is-done .tb-icon { color: var(--ok-ink, #0a7d3c); }
.tb-step.is-done .tb-name { color: var(--ink-soft, #64748b); }
.tb-step.is-running .tb-name, .tb-step.is-current .tb-name { font-weight: 700; text-transform: uppercase; }
.tb-step.is-running .tb-icon { color: var(--magenta, #c2185b); }
.tb-machines { margin: 4px 0 0 30px; font-size: 14px; color: var(--ink-soft, #64748b); }
.tb-progress { margin: 8px 0 0 30px; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.tb-bar { flex: 1 1 auto; height: 10px; border-radius: 99px; background: var(--line, #e5e9ee); overflow: hidden; }
.tb-bar span { display: block; height: 100%; background: var(--magenta, #c2185b); }
.tb-actions { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 2px 30px; }
.tb-actions.small { flex-direction: row; }
.tb-btn { font: inherit; font-size: 15px; border-radius: 10px; border: 1px solid var(--line-strong, #b8c2cc);
  background: var(--card, #fff); color: var(--ink, #172132); padding: 8px 12px; cursor: pointer; min-height: 40px; }
.tb-btn.primary { background: var(--ink, #172132); color: var(--ink-invert, #fff); border-color: var(--ink, #172132); }
.tb-btn.big { font-size: 17px; font-weight: 700; min-height: 54px; letter-spacing: .02em; }
.tb-btn:disabled { opacity: .5; }
.tb-note { font-size: 13px; color: var(--ink-soft, #64748b); margin: 10px 0 0; text-align: center; }
.tb-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 1000;
  display: flex; align-items: flex-end; justify-content: center; padding: 12px; }
.tb-dialog { background: var(--card, #fff); color: var(--ink, #172132); border-radius: 16px; padding: 18px;
  width: 100%; max-width: 480px; box-sizing: border-box; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.tb-dialog h3 { margin: 0 0 10px; font-size: 18px; }
.tb-dialog p { font-size: 16px; line-height: 1.5; margin: 0 0 10px; }
.tb-dialog-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.tb-dialog-actions .tb-btn { min-height: 48px; }
.tb-chips { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 8px 0; }
.tb-custom { display: block; font-size: 15px; margin-top: 8px; }
.tb-custom[hidden] { display: none; }
.tb-custom small { display: block; color: var(--ink-soft, #64748b); margin-top: 4px; }
.tb-time { font: inherit; font-size: 18px; width: 110px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line-strong, #b8c2cc); }
.tb-status { text-align: center; font-size: 14px; min-height: 20px; margin: 10px 0; color: var(--ok-ink, #0a7d3c); }
.tb-status.bad { color: var(--warn-ink, #b3261e); }
@media (min-width: 700px) {
  .tb-backdrop { align-items: center; }
  .tb-actions { flex-direction: row; }
}