/* ============================================================
   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; }
.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; }
.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); }
}

/* ---------- Selection, bulk actions, row controls ---------- */
.selcol { width: 36px; padding-inline-end: 0 !important; }
.actcol { width: 40px; text-align: end; }
.itemtable tr .actcol .iconbtn { opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); }
.itemtable tr:hover .actcol .iconbtn, .itemtable tr .actcol .iconbtn:focus-visible { opacity: 1; }
@media (hover: none) { .itemtable tr .actcol .iconbtn { opacity: 1; } }
tr.is-selected td { background: var(--color-primary-soft); }
.rowtag { margin-top: 4px; }
td.is-assumed .editcell { background: var(--status-warning-bg); box-shadow: inset 0 0 0 1px var(--tx-warning-600); font-weight: var(--weight-semibold); }
.tx-warn { color: var(--status-warning-fg); font-weight: var(--weight-semibold); }

.bulkbar {
  position: sticky; top: calc(var(--header-height) + 8px); z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  background: var(--surface-inverse); color: #fff;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  animation: bulkin var(--duration-base) var(--ease-out);
}
@keyframes bulkin { from { opacity: 0; transform: translateY(-4px); } }
.bulkbar__count { font: var(--font-label); margin-inline-end: var(--space-3); }
.bulkbar .tx-caption { color: rgba(255, 255, 255, 0.7); }
.bulkbar__hint { margin-inline-start: auto; }
.bulkbar .btn--subtle { --_bg: rgba(255, 255, 255, 0.1); --_fg: #fff; --_bd: rgba(255, 255, 255, 0.22); --_hover: rgba(255, 255, 255, 0.2); }
.bulkbar .btn--ghost { --_fg: rgba(255, 255, 255, 0.85); --_hover: rgba(255, 255, 255, 0.12); }
.bulkbar .btn svg { width: 12px; height: 12px; }

/* ---------- Add item ---------- */
.additem { display: flex; flex-direction: column; gap: var(--space-4); border-color: var(--color-primary); }
.additem__grid { display: grid; grid-template-columns: 1.4fr 1fr 2fr 0.7fr 0.7fr 0.8fr; gap: var(--space-4); align-items: end; }
.additem__grid .additem__newsection:not([hidden]) { grid-column: span 1; }
@media (max-width: 1024px) {
  .additem__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .additem__desc { grid-column: 1 / -1; }
}

/* ---------- How your file was read ---------- */
.structure { padding: 0; overflow: hidden; }
.structure__summary {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-6); cursor: pointer; list-style: none;
}
.structure__summary::-webkit-details-marker { display: none; }
.structure__icon {
  width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: var(--radius-md); background: var(--surface-tint); color: var(--color-primary);
}
.structure__icon svg { width: 17px; height: 17px; }
.structure__toggle { color: var(--text-link); font-weight: var(--weight-semibold); }
.structure[open] .structure__toggle::after { content: ' ▴'; }
.structure:not([open]) .structure__toggle::after { content: ' ▾'; }
.structure__body { border-top: var(--hairline); padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); }
.sheetcard__head { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.colmap { display: grid; grid-template-columns: 110px repeat(6, minmax(0, 1fr)); gap: var(--space-4); }
.colmap__field .field__label { font-size: var(--text-xs); }
@media (max-width: 1024px) { .colmap { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .colmap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Row roles ---------- */
.rolecell { display: flex; align-items: center; gap: var(--space-2); }
.roleselect { width: 168px; font-weight: var(--weight-semibold); }
.roleselect--item { color: var(--status-success-fg); }
.roleselect--section, .roleselect--group { color: var(--color-primary); }
.roleselect--term { color: var(--color-ai); }
.roleselect--skip, .roleselect--total { color: var(--text-muted); }
.cmp.is-changed td:first-child { box-shadow: inset 3px 0 0 var(--color-primary); }
.cmp--skip td, .cmp--total td { background: var(--surface-sunken); }
.cmp--skip .clamp { color: var(--text-muted); }
.cmp--section .clamp, .cmp--group .clamp { font-weight: var(--weight-semibold); color: var(--text-strong); }
.cmpres .tx-caption { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- "Missing or wrong items?" panel ---------- */
.fixpanel {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--surface-tint); border: 1px solid var(--color-primary-tint);
}
.fixpanel__head { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.fixpanel__head .tx-caption svg { width: 12px; height: 12px; margin: 0 2px; }
.fixpanel__cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fixpanel__cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fixcard {
  display: flex; align-items: flex-start; gap: var(--space-4); text-align: start;
  padding: var(--space-4) var(--space-5); cursor: pointer;
  background: var(--surface-card); color: var(--text-body);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  font: inherit;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.fixcard:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.fixcard:focus-visible { box-shadow: var(--focus-ring); }
.fixcard__icon {
  width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: var(--radius-md); background: var(--color-primary); color: #fff;
}
.fixcard__icon svg { width: 16px; height: 16px; }
.fixcard__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.fixcard__title { font: var(--font-label); color: var(--text-strong); display: flex; align-items: center; gap: 6px; }
.fixcard__text { font: var(--font-caption); color: var(--text-muted); line-height: var(--leading-normal); }
.fixcard__go { color: var(--text-subtle); align-self: center; }
.fixcard__go svg { width: 16px; height: 16px; }
@media (max-width: 1024px) { .fixpanel__cards, .fixpanel__cards--2 { grid-template-columns: 1fr; } }

/* ---------- Make editable cells look editable ---------- */
.editcell { border-bottom: 1px dashed transparent; position: relative; }
.itemtable tr:hover .editcell { border-bottom-color: var(--border-strong); }
.itemtable tr:hover .col-desc .editcell::after {
  content: '✎'; position: absolute; inset-inline-end: 4px; top: 2px;
  font-size: 11px; color: var(--text-subtle);
}
.editcell:focus { border-bottom-color: transparent; }

/* ---------- How-to strip in "Rows from your file" ---------- */
.howto-inline {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
  background: var(--surface-tint); border: 1px solid var(--color-primary-tint);
  font: var(--font-caption); color: var(--text-body);
}
.howto-inline b { color: var(--text-strong); }
.howto-inline svg { width: 12px; height: 12px; color: var(--color-primary); }
@media (max-width: 1024px) { .howto-inline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.structure__toggle { pointer-events: none; }
.structure[open] .structure__toggle::after, .structure:not([open]) .structure__toggle::after { content: none; }

.cmpaction { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.cmpaction .btn svg { width: 11px; height: 11px; }
.structure, #resultTabs, .additem { scroll-margin-top: calc(var(--header-height) + 16px); }
.roleselect { width: 180px; }