/* RFQ 4-step stepper */
.steps { display: flex; gap: 0; counter-reset: st; margin: 8px 0 20px; padding: 0; background: none; border: 0; }
.steps > div { flex: 1; position: relative; counter-increment: st; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 13px; font-weight: 600; color: #64748B; background: none !important; border: 0 !important; padding: 0 4px !important; }
.steps > div::before { left: auto; top: auto; transform: none; line-height: normal; content: counter(st); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid #DCE4EE; color: #64748B; font-weight: 700; position: relative; z-index: 1; transition: .2s; }
.steps > div::after { width: auto; content: ""; position: absolute; top: 16px; left: calc(-50% + 16px); right: calc(50% + 16px); height: 2px; background: #DCE4EE; }
.steps > div:first-child::after { display: none; }
.steps > div.on { color: #102744; }
.steps > div.on::before { background: #2563EB; border-color: #2563EB; color: #fff; box-shadow: 0 0 0 4px rgba(37, 99, 235, .15); }
.steps > div.on::after { background: #2563EB; }
@media (max-width: 600px) { .steps > div { font-size: 11px; } }

/* Quote comparison */
.x-cmp { margin-bottom: 16px; }
.x-qt th, .x-qt td { vertical-align: top; text-align: left; min-width: 160px; }
.x-qt tr > th:first-child { min-width: 110px; color: #64748B; font-weight: 600; }
.x-qt .badge { margin-left: 4px; }

/* Order timeline */
.x-otl { margin-bottom: 16px; }
.x-order { padding: 14px 0; border-top: 1px solid #DCE4EE; }
.x-order:first-of-type { border-top: 0; }
.x-steps { list-style: none; display: flex; margin: 14px 0 0; padding: 0; overflow-x: auto; }
.x-steps li { flex: 1; min-width: 96px; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; font-size: 12px; color: #64748B; }
.x-steps li i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid #DCE4EE; font-weight: 700; z-index: 1; }
.x-steps li::after { content: ""; position: absolute; top: 14px; left: calc(-50% + 14px); right: calc(50% + 14px); height: 2px; background: #DCE4EE; }
.x-steps li:first-child::after { display: none; }
.x-steps li b { color: inherit; font-weight: 600; }
.x-steps li small { font-size: 11px; min-height: 14px; }
.x-steps li.done { color: #15803D; }
.x-steps li.done i { background: #15803D; border-color: #15803D; color: #fff; }
.x-steps li.done::after, .x-steps li.now::after { background: #15803D; }
.x-steps li.now { color: #2563EB; }
.x-steps li.now i { border-color: #2563EB; color: #2563EB; box-shadow: 0 0 0 4px rgba(37, 99, 235, .15); }
.x-steps li.bad { color: #B91C1C; }
.x-steps li.bad i { background: #B91C1C; border-color: #B91C1C; color: #fff; }
.x-steps li.bad::after { background: #B91C1C; }

/* Supplier verification banner */
.x-kyb { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid; margin-bottom: 16px; }
.x-kyb > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.x-kyb span { font-size: 13px; }
.x-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.x-ico svg { width: 22px; height: 22px; }
.x-kyb.warn { background: #FFFBEB; border-color: #FCD34D; }
.x-kyb.warn .x-ico { background: #F59E0B; color: #fff; }
.x-kyb.info { background: #EFF6FF; border-color: #BFDBFE; }
.x-kyb.info .x-ico { background: #2563EB; color: #fff; }
.x-kyb.bad { background: #FEF2F2; border-color: #FECACA; }
.x-kyb.bad .x-ico { background: #B91C1C; color: #fff; }
.x-kyb.ok { background: #F0FDF4; border-color: #BBF7D0; }
.x-kyb.ok .x-ico { background: #15803D; color: #fff; }
@media (max-width: 600px) { .x-kyb { flex-wrap: wrap; } .x-kyb .btn { width: 100%; } }
/* Old chip-style timeline is replaced by the progress stepper on the Orders page */
body:has(#x-otl .x-steps) .dash-main .timeline { display: none; }

/* ---------- Mobile & spacing polish ---------- */
.section-title { flex-wrap: wrap; gap: 8px; }
.lcard .body .row { flex-wrap: nowrap; }
.store-head .row { flex-wrap: wrap; }
.modal { border-radius: 16px; }
@media (max-width: 860px) {
  .section-title { margin: 32px 0 12px; }
  .detail h1 { font-size: 26px; line-height: 34px; }
  .side-links { scrollbar-width: none; }
  .side-links::-webkit-scrollbar { display: none; }
}
@media (max-width: 600px) {
  h1 { font-size: 26px; line-height: 34px; }
  h2 { font-size: 20px; line-height: 28px; }
  .card { padding: 14px; }
  .page-head { padding: 20px; border-radius: 12px; }
  .page-head.row input, .page-head input[type=search] { min-width: 0 !important; width: 100%; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 12px; gap: 10px; }
  .kico { width: 36px; height: 36px; border-radius: 10px; }
  .kico svg { width: 18px; height: 18px; }
  .kpi b { font-size: 20px; line-height: 26px; }
  .kpi .muted { font-size: 12px; line-height: 16px; }
  .big { font-size: 24px; line-height: 30px; }
  .clock { font-size: 26px; line-height: 36px; padding: 2px 12px; }
  .dash-top { padding: 16px; border-radius: 12px; }
  .dash-top h1 { font-size: 22px; line-height: 28px; }
  .modal { padding: 20px; }
  .toasts { left: 12px; right: 12px; bottom: 12px; }
  .toast { max-width: none; }
  .store-head { padding: 0 16px 16px; }
  .store-banner { height: 140px; }
  .news-hero { padding: 20px; min-height: 220px; }
  .news-hero h2 { font-size: 22px; line-height: 30px; }
  .tabs a, .tabs button { padding: 10px 12px; }
  th, td { padding: 9px 8px; }
  .search .btn { padding: 0 14px; }
  .cmp-tray { bottom: 10px; padding: 8px 10px; gap: 8px; }
  .row.between > .row { width: 100%; }
  /* stop iPhone zooming in when tapping a field */
  input, select, textarea, label.f input, label.f select, label.f textarea { font-size: 16px; }
  .dash-main .panel-head { flex-wrap: wrap; }
}
@media (max-width: 380px) {
  .kpis { grid-template-columns: 1fr; }
  .cats { grid-template-columns: repeat(2, 1fr); }
}