/* ============================================================
   RFQ Item Generator — page layout.
   Components come from the shared Teradix design system
   (tokens.css + components/*), copied from the Spend Analytics
   platform. Only layout specific to this tool lives here.
   ============================================================ */

.topbar {
  position: sticky; top: 0; z-index: var(--z-header);
  display: flex; align-items: center; gap: var(--space-4);
  height: var(--header-height);
  padding: 0 var(--content-pad);
  background: var(--surface-card);
  border-bottom: var(--hairline);
}
.topbar__brand { display: inline-flex; align-items: center; }
.topbar__logo { height: 23px; width: auto; }
.topbar__logo--dark { display: none; }
[data-theme="dark"] .topbar__logo--light { display: none; }
[data-theme="dark"] .topbar__logo--dark { display: block; }
.topbar__divider { width: 1px; height: 22px; background: var(--border-default); }
.topbar__product { font: var(--font-label); color: var(--text-strong); }

.page {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-5) var(--space-12);
}

.hero { display: flex; flex-direction: column; gap: var(--space-3); }
.hero__sub { font: var(--font-body-lg); max-width: 640px; }

@media (max-width: 640px) {
  .topbar { padding: 0 var(--space-5); gap: var(--space-3); }
  .topbar__divider, .topbar__product { display: none; }
  .page { padding-top: var(--space-8); }
}

.page--wide { max-width: 1240px; }

/* ---------- Flow stepper ---------- */
.flowsteps { margin-bottom: var(--space-8); }
.flowsteps .step { font-size: var(--text-sm); }

/* ---------- Upload page: how it works ---------- */
.howto__item {
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-5);
  border: var(--hairline); border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.howto__icon {
  flex: 0 0 auto; width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--surface-tint); color: var(--color-primary);
}
.howto__icon svg { width: 17px; height: 17px; }
.howto .tx-caption { margin-top: 2px; line-height: var(--leading-normal); }

/* ---------- Working ---------- */
.worksteps { list-style: none; padding: var(--space-3) var(--space-5); }
.workstep {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) 0; font: var(--font-body-sm); color: var(--text-subtle);
}
.workstep + .workstep { border-top: var(--hairline); }
.workstep__mark {
  width: 22px; height: 22px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 50%;
  border: 1.5px solid var(--border-default);
}
.workstep__mark svg { width: 12px; height: 12px; }
.workstep--active { color: var(--text-strong); font-weight: var(--weight-semibold); }
.workstep--active .workstep__mark { border-color: var(--color-ai); color: var(--color-ai); }
.workstep--done { color: var(--text-body); }
.workstep--done .workstep__mark { border-color: var(--tx-success-600); background: var(--tx-success-600); color: #fff; }

/* ---------- Result header + KPIs ---------- */
.resulthead { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5) var(--space-6); flex-wrap: wrap; }
.resulthead__icon {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: var(--radius-lg);
  background: var(--status-success-bg); color: var(--status-success-fg);
}
.resulthead__icon svg { width: 22px; height: 22px; }
.resulthead__name { font: var(--font-h4); color: var(--text-strong); margin-bottom: 4px; }
.kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.warnlist { margin: 4px 0 0; padding-inline-start: 18px; }
.warnlist li + li { margin-top: 2px; }

/* ---------- Toolbars ---------- */
.toolbar { gap: var(--space-4); }
.toolbar .search { max-width: 420px; }
.toolbar__select { width: auto; max-width: 340px; }
.chip__n { font-variant-numeric: tabular-nums; opacity: 0.7; font-weight: var(--weight-regular); }
.table-wrap--tall { max-height: 68vh; overflow-y: auto; }
.code {
  display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-primary); background: var(--surface-tint);
  padding: 1px 6px; border-radius: var(--radius-xs); white-space: nowrap;
}
.hint { display: flex; align-items: center; gap: 6px; }

/* ---------- Items table ---------- */
.itemtable td { vertical-align: top; }
.itemtable .col-desc { min-width: 280px; width: 42%; }
.grouprow td { position: sticky; background: var(--surface-sunken); }
.grouprow--section td {
  padding-top: 12px; padding-bottom: 10px;
  border-top: 1px solid var(--border-default);
  background: var(--surface-tint);
}
.grouprow__title { font: var(--font-label); color: var(--text-strong); margin-inline-end: var(--space-3); }
.grouprow--sub td { font: var(--font-caption); color: var(--text-muted); font-weight: var(--weight-semibold); }
.rownum { display: inline-block; min-width: 22px; color: var(--text-subtle); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.editcell {
  min-height: 22px; padding: 2px 6px; margin: -2px -6px;
  border-radius: var(--radius-sm); outline: none; cursor: text;
  transition: background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.editcell:hover { background: var(--surface-sunken); }
.editcell:focus { background: var(--surface-card); box-shadow: var(--focus-ring); }
td.is-missing .editcell { background: var(--status-warning-bg); box-shadow: inset 0 0 0 1px var(--tx-warning-600); }
td.is-missing .editcell:empty::before { content: 'Add unit'; color: var(--status-warning-fg); font-size: var(--text-xs); }

.specs summary { cursor: pointer; display: flex; gap: var(--space-4); align-items: baseline; flex-wrap: wrap; list-style: none; }
.specs summary::before { content: '▸'; color: var(--text-subtle); }
.specs[open] summary::before { content: '▾'; }
.specs__list { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); max-height: 420px; overflow-y: auto; }
.specs__item p { margin-top: 4px; font: var(--font-body-sm); color: var(--text-body); }

/* ---------- Compare ---------- */
.comparetable td { vertical-align: top; }

.srcdesc { min-width: 260px; max-width: 460px; }
.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cmp--heading .clamp { font-weight: var(--weight-semibold); color: var(--text-strong); }
.srccode { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.srcextra { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.srccell {
  font-size: var(--text-xs); line-height: 1.4;
  padding: 1px 6px; border-radius: var(--radius-xs);
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
  max-width: 100%; overflow-wrap: anywhere;
}
.arrowcol { width: 28px; color: var(--text-subtle); }
.arrowcol svg { width: 14px; height: 14px; }
.cmp--total td, .cmp--heading td { background: var(--surface-sunken); }
.cmpres__desc { color: var(--text-strong); }
.cmpres .tx-caption { margin-top: 3px; }

.compare-ai .card { overflow: hidden; }
.doctext {
  margin: 0; padding: var(--space-5); max-height: 64vh; overflow: auto;
  font: var(--text-xs)/1.6 var(--font-mono); white-space: pre-wrap; color: var(--text-body);
}
.doctext--items { font-family: var(--font-sans); white-space: normal; display: flex; flex-direction: column; gap: var(--space-4); }

/* ---------- Copy to Teradix ---------- */
.builder { display: flex; flex-direction: column; gap: var(--space-5); }
.bgroup { padding: 0; overflow: hidden; }
.bgroup__head {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--surface-tint); border-bottom: var(--hairline);
}
.bgroup__num {
  width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 50%; background: var(--color-primary); color: #fff; font: var(--font-label);
}
.bgroup__title { font: var(--font-h4); color: var(--color-primary); }
.bgroup__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); }
.bfield { display: flex; flex-direction: column; gap: 6px; }
.bfield__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.bfield__value { display: flex; }
.bfield .textarea { resize: vertical; }
.typechips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.typechip {
  padding: 8px 18px; border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  font: var(--font-label); color: var(--text-muted); background: var(--surface-card);
}
.typechip.is-on { background: var(--tx-navy-900); border-color: var(--tx-navy-900); color: #fff; }
[data-theme="dark"] .typechip.is-on { background: var(--color-primary); border-color: var(--color-primary); }
.importbox {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap;
  padding: var(--space-5); border: 1.5px dashed var(--color-primary); border-radius: var(--radius-lg);
  background: var(--surface-tint);
}
.importbox__steps { display: flex; flex-direction: column; gap: 4px; font: var(--font-body-sm); }
.kbd {
  display: inline-block; padding: 0 6px; border-radius: var(--radius-xs);
  border: 1px solid var(--border-default); background: var(--surface-card);
  font: var(--weight-semibold) var(--text-xs)/1.7 var(--font-sans); color: var(--tx-success-700);
}
.termlist { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.termlist__item { display: flex; align-items: flex-start; gap: var(--space-3); }
.termlist__num {
  flex: 0 0 auto; min-width: 24px; padding-top: 9px; text-align: end;
  font: var(--font-caption); color: var(--text-subtle); font-variant-numeric: tabular-nums;
}
.termlist__text { min-height: 38px; height: 38px; padding: 8px 12px; overflow: hidden; resize: none; }
.termlist__item .iconbtn { margin-top: 5px; }

@media (max-width: 1024px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  /* One toast at a time on a phone; a stack would cover the content. */
  .toasts { inset-inline: var(--space-4); bottom: var(--space-4); }
  .toasts .toast { min-width: 0; max-width: none; }
  .toasts .toast:not(:last-child) { display: none; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flowsteps .step__line { display: none; }
  .resulthead__actions { width: 100%; }
  .resulthead__actions .btn { flex: 1 1 auto; }
  .bgroup__body { padding: var(--space-5); }
}