:root {
  --cyan: #1CABE2;
  --cyan-dark: #148cba;
  --grey: #333F48;
  --bg: #f5f7f8;
  --line: #dde3e7;
  --danger: #c0392b;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  background: var(--bg); color: var(--grey); font-size: 15px;
}
main { max-width: 1600px; margin: 0 auto; padding: 24px 24px 60px; }
h1 { font-size: 1.5rem; margin: 0.4em 0; }
h2 { font-size: 1.1rem; margin: 1.4em 0 0.5em; }
a { color: var(--cyan-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  display: flex; align-items: center; gap: 24px; padding: 12px 20px;
  background: var(--grey); color: #fff;
}
.topbar .brand { color: #fff; font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.topbar .brand span { color: var(--cyan); }
.brandlogo { height: 22px; width: auto; display: block; }
.topbar nav { display: flex; gap: 18px; flex: 1; }
.topbar nav a { color: #e8edf0; font-weight: 500; }
.topbar nav a:hover { color: var(--cyan); text-decoration: none; }
.topbar nav a.active { color: var(--cyan); }
.userbox { display: flex; gap: 10px; align-items: center; font-size: 0.9rem; color: #cfd6db; }
/* Second navigation tier: the pages of the module you are in. */
.subnav {
  display: flex; gap: 18px; padding: 9px 20px; background: #f2f5f7;
  border-bottom: 1px solid var(--line); font-size: 0.92rem;
}
.subnav a { color: var(--grey); font-weight: 500; }
.subnav a:hover { color: var(--cyan); text-decoration: none; }
.subnav a.active { color: var(--cyan); font-weight: 600; }
/* Collapsible module sections on the permissions matrix. */
.permgroup { margin: 14px 0; }
.permgroup > summary {
  cursor: pointer; font-weight: 600; font-size: 1.05rem; color: var(--grey);
  padding: 6px 0; list-style-position: inside;
}
.permgroup > summary:hover { color: var(--cyan); }
/* Request progress strip: status counts + clickable PO links into Procore. */
.progressline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 0; }
a.chip.po { background: var(--cyan); color: #fff; font-weight: 600; }
a.chip.po:hover { text-decoration: none; filter: brightness(1.08); }
a.status { text-decoration: none; }
a.status:hover { filter: brightness(1.08); text-decoration: none; }
.pill { background: var(--cyan); color: #fff; border-radius: 10px; padding: 0 7px; font-size: 0.8rem; }

.foot { text-align: center; color: #8a959d; font-size: 0.8rem; padding: 20px; }
.crumbs { font-size: 0.85rem; color: #8a959d; margin-top: 4px; }
.muted { color: #6b7780; }
.small { font-size: 0.82rem; }
.nowrap { white-space: nowrap; }
.error { color: var(--danger); }
.notice { background: #fff8e6; border: 1px solid #f0dfae; padding: 10px 14px; border-radius: 8px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 18px; }
.tile {
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px;
  display: flex; flex-direction: column; gap: 4px; transition: border-color 0.15s;
}
.tile:hover { border-color: var(--cyan); text-decoration: none; }
.tile.disabled { opacity: 0.55; }
.tile-code { font-weight: 700; font-size: 1.2rem; color: var(--grey); }
.tile-name { color: #6b7780; font-size: 0.88rem; }
.tile-count { color: var(--cyan-dark); font-size: 0.85rem; font-weight: 500; }

.searchbar { display: flex; gap: 10px; margin: 16px 0 10px; }
.searchbar input[type=search] { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 18px; }
.chip {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 4px 12px; font-size: 0.85rem; color: var(--grey);
}
.chip.active { background: var(--cyan); border-color: var(--cyan); color: #fff; }
.chip:hover { text-decoration: none; border-color: var(--cyan); }

/* border-collapse: separate + no overflow clipping, so the per-supplier update
   popover can extend beyond the table edge instead of being cut off */
table.list { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
table.list thead th:first-child { border-top-left-radius: 10px; }
table.list thead th:last-child { border-top-right-radius: 10px; }
table.list th { text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: #8a959d; padding: 10px 12px; border-bottom: 1px solid var(--line); }
table.list td { padding: 9px 12px; border-bottom: 1px solid #eef1f3; vertical-align: middle; }
table.list tr:last-child td { border-bottom: none; }
table.list.compact td, table.list.compact th { padding: 6px 10px; font-size: 0.88rem; }
.totalrow td { background: #f2fafd; }
.code { font-family: ui-monospace, Menlo, monospace; font-size: 0.86rem; }
.tag { background: #e8f6fc; color: var(--cyan-dark); border-radius: 4px; padding: 1px 7px; font-size: 0.76rem; }
.tag.warn { background: #fdeaea; color: var(--danger); }
/* Sync run summaries. A removal or a conflict is the only thing on that screen anyone
   needs to act on, so it is the only thing that gets colour. */
.sum-warn { color: #9a5b00; }
.sum-bad { color: var(--danger); }
.sum-muted { color: #8a959d; font-style: italic; }

/* Detail columns hold prose. `anywhere` breaks mid-word to make text fit any width, which
   on a squeezed column reads "approve / d feed" — so only break a word that genuinely
   cannot fit, and give the column a floor so it is never squeezed that far. */
.detailcell { max-width: 340px; min-width: 220px; overflow-wrap: break-word; }
/* Long identity codes DO need breaking anywhere — they have no spaces to break at. */
.detailcell .code, td .code { overflow-wrap: anywhere; }

/* The DNO updates review queue. Without widths the item description takes whatever it
   likes and everything else is crushed; these keep the decision buttons and the detail
   readable however long a description runs. */
table.list.flags { table-layout: fixed; }
table.list.flags col.c-when { width: 6.5rem; }
table.list.flags col.c-dno { width: 5rem; }
table.list.flags col.c-type { width: 7rem; }
table.list.flags col.c-detail { width: 24%; }
table.list.flags col.c-act { width: 11rem; }
table.list.flags td { vertical-align: top; }
table.list.flags td .code { display: inline-block; margin-right: 6px; }
/* The decision button and its quiet alternative stack, so neither is squeezed against the
   table edge however narrow the column runs. */
.flagactions form { display: block; margin: 0 0 4px; }
.flagactions .linklike { padding: 0; }

.status { border-radius: 4px; padding: 2px 8px; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.s-draft { background: #eef1f3; color: #6b7780; }
.s-sent { background: #e8f6fc; color: var(--cyan-dark); }
.s-quoted { background: #fff3d6; color: #9a7b00; }
.s-approved { background: #e4f7e9; color: #1e7d3c; }
.s-ordered { background: #1e7d3c; color: #fff; }
.s-cancelled, .s-failed, .s-removed, .s-not_ordered { background: #fdeaea; color: var(--danger); }
.s-completed { background: #1e7d3c; color: #fff; }
.s-open { background: #eef1f3; color: #6b7780; }
.s-ok, .s-added { background: #e4f7e9; color: #1e7d3c; }
.s-changed, .s-running { background: #fff3d6; color: #9a7b00; }
.s-conflict { background: #fdeaea; color: var(--danger); }

.btn {
  display: inline-block; background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 16px; font-family: inherit; font-size: 0.9rem; font-weight: 500;
  color: var(--grey); cursor: pointer;
}
.btn:hover { border-color: var(--cyan); text-decoration: none; }
.btn.primary { background: var(--cyan); border-color: var(--cyan); color: #fff; }
.btn.primary:hover { background: var(--cyan-dark); }
.btn.small { padding: 4px 10px; font-size: 0.82rem; }
.btn.danger-btn { border-color: var(--danger); color: var(--danger); }
.linklike { background: none; border: none; padding: 0; color: var(--cyan-dark); cursor: pointer; font: inherit; font-size: 0.86rem; }
.linklike:hover { text-decoration: underline; }
.linklike.danger { color: var(--danger); }
.inline { display: inline; }

input, select, textarea {
  font-family: inherit; font-size: 0.92rem; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--grey);
  width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--cyan); border-color: var(--cyan); }
label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; font-weight: 500; flex: 1; }
.row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 8px 0; }
.row > * { flex: 1; min-width: 120px; }
.row .btn { flex: 0; white-space: nowrap; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.qty { width: 84px; }
.addform { display: flex; gap: 6px; align-items: center; }
.addform .qty { width: 76px; }

.card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; margin: 18px 0; }
.item-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.item-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }

details.editbox { margin: 8px 0 16px; }
details.editbox summary, details.inline-edit summary { cursor: pointer; color: var(--cyan-dark); font-size: 0.88rem; }
details.inline-edit { position: relative; }
.popover {
  position: absolute; right: 0; z-index: 10; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.12); width: 300px;
  display: flex; flex-direction: column; gap: 10px;
}
.popover .row { margin: 0; }
/* explicit two-step remove: click "remove" -> confirm button appears */
details.confirm-remove { display: inline-block; position: relative; }
details.confirm-remove summary { list-style: none; cursor: pointer; }
details.confirm-remove summary::-webkit-details-marker { display: none; }
details.confirm-remove .confirmbox {
  position: absolute; right: 0; top: 130%; z-index: 20; background: #fff;
  border: 1px solid var(--danger); border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15); width: 240px; font-size: 0.85rem;
  display: flex; flex-direction: column; gap: 8px; text-align: left;
}
.center { text-align: center; }
.voltselect { max-width: 200px; }
.voltrow { margin: -6px 0 16px; }
/* quote-lines editor: roomy description, top-aligned cells, growing comment box.
   Slightly smaller type so big prices fit and the row stays tidy. */
#quote-form td { vertical-align: top; padding-top: 12px; font-size: 0.88rem; }
#quote-form input, #quote-form select, #quote-form textarea { font-size: 0.85rem; padding: 7px 8px; }
#quote-form td:nth-child(2) { min-width: 230px; }
#quote-form input[name^="price_"] { max-width: 130px; min-width: 110px; }
#quote-form input[name^="lead_"] { max-width: 58px; }
#quote-form select[name^="leadunit_"] { max-width: 86px; }
.commentcell { min-width: 200px; width: 22%; }
.comment-box { width: 100%; min-height: 36px; resize: vertical; overflow: hidden; line-height: 1.4; }
.row .btn { flex: 0 0 auto; white-space: nowrap; }

/* line-status row highlighting: light green = quoted, deeper green = approved/ordered */
table.list tr.row-quoted td { background: #f0faf2; }
table.list tr.row-approved td { background: #e2f6e8; }
table.list tr.row-ordered td { background: #d9f2e1; }
table.list tr.row-not_ordered td { background: #f6f6f6; color: #8a959d; }
/* --- request lines with several supplier quotes underneath each one --------------
   Each line is its own <tbody>: an item row, then one row per supplier's quote, then
   the "add a supplier quote" row. The grouping bar on the left is what makes it read
   as sub-items rather than a flat list of unrelated rows. */
table.list.quotes tbody.linegroup { border-top: 2px solid var(--line); }
table.list.quotes tbody.linegroup:first-of-type { border-top: none; }
/* The ITEM is a section band; its supplier quotes hang underneath as indented
   sub-rows with a connecting rail, so item vs quote reads at a glance. */
table.list.quotes tr.itemrow td { border-bottom: none; padding: 12px 8px; background: #eef3f6; }
table.list.quotes tr.itemrow.row-quoted td { background: #e8f4ec; }
table.list.quotes tr.itemrow.row-approved td { background: #d9eee0; }
table.list.quotes tr.itemrow .itemhead { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
table.list.quotes tr.itemrow .itemhead > div:first-child { flex: 1 1 340px; }
table.list.quotes tr.quoterow td, table.list.quotes tr.addrow td { border-bottom: none; padding-top: 5px; padding-bottom: 5px; }
table.list.quotes tr.quoterow td:nth-child(2),
table.list.quotes tr.addrow td:nth-child(2) { padding-left: 34px; position: relative; }
table.list.quotes tr.quoterow td:nth-child(2)::before,
table.list.quotes tr.addrow td:nth-child(2)::before {
  content: "↳"; position: absolute; left: 12px; color: #9fb4c0;
}
table.list.quotes tr.quoterow td.pick { text-align: center; }
table.list.quotes tr.quoterow.chosen td { background: #f3fbf5; }
table.list.quotes tr.quoterow.chosen td:nth-child(2) { box-shadow: inset 3px 0 0 var(--cyan); }
table.list.quotes tr.addrow td { padding-bottom: 14px; }
table.list.quotes tr.addrow select, table.list.quotes tr.addrow input { opacity: 0.75; }
table.list.quotes tr.addrow:focus-within select, table.list.quotes tr.addrow:focus-within input { opacity: 1; }
table.list.quotes tr.addrow input[list] { min-width: 240px; }
.supchips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 4px; }
.supchips .chip, button.chip { cursor: pointer; font-size: 0.78rem; padding: 2px 9px; font-family: inherit; }
.supchips .chip:hover, button.chip:hover { background: var(--cyan); color: #fff; border-color: var(--cyan); }
/* per-item supplier sub-header: the column labels belong to the supplier rows, not to
   the item band above them */
table.list.quotes tr.subhead td {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: #8a959d;
  padding: 6px 8px 2px; border-bottom: none;
}
table.list.quotes tr.subhead td:nth-child(2) { padding-left: 34px; }
/* the RFQ panel sits at the top of Step 1 */
.rfqpanel { background: #f4fbfe; border: 1px solid #cfe9f5; border-radius: 8px; padding: 12px 16px; margin: 12px 0 16px; }
.rfqpanel h3 { margin: 0 0 8px; font-size: 0.95rem; }
.rfqpanel table.list { background: #fff; }
/* a quote that is beaten on price or lead time is tinted so the trade-off is visible */
table.list.quotes td.dear, table.list.quotes td.dear input { color: var(--danger); }
table.list.quotes td.dear input { border-color: #f2c9c9; background: #fdf6f5; }
table.list.quotes td.slow, table.list.quotes td.slow input { color: var(--danger); }
table.list.quotes td.slow input { border-color: #f2c9c9; background: #fdf6f5; }
/* the supplier's own code for the item: quiet reference, editable in place */
table.list.quotes td.codecell { width: 110px; }
input.codeinput {
  width: 100px; font-family: ui-monospace, Menlo, monospace; font-size: 0.78rem;
  color: #6b7780; background: #fafbfc; border-color: #e6ebee; padding: 4px 7px;
}
input.codeinput:focus { color: var(--grey); background: #fff; }
/* the reversible "no choice" option is a small inline chip - the global label rule
   (block flex column, flex: 1) must not apply or it becomes a giant full-width box */
label.chip.nochoice {
  cursor: pointer; display: inline-flex; flex-direction: row; align-items: center;
  gap: 4px; flex: 0 0 auto; font-weight: 400; font-size: 0.85rem;
}
label.chip.nochoice input { width: auto; margin: 0; }
/* says what is filtering the list right now, with a way straight out of it */
.filterbar { background: #f4fbfe; border: 1px solid #cfe9f5; border-radius: 8px; padding: 8px 14px; margin: 0 0 10px; font-size: 0.9rem; }
.chip.good { background: #e2f6e8; border-color: #b7e2c4; color: #1d6b34; }
.chip.warn { background: #fdeaea; border-color: #f2c9c9; color: var(--danger); }

/* the comparison verdict: one sentence, coloured by what it is telling you to do */
.verdict { border-left: 4px solid var(--cyan); background: #f4fbfe; padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 6px 0 16px; }
.verdict.v-split { border-left-color: #1d6b34; background: #f1faf3; }
.verdict.v-single { border-left-color: var(--cyan); }
.verdict.v-incomplete { border-left-color: #d9a406; background: #fff8e6; }

.pushgroup { border-top: 1px solid var(--line); padding: 12px 0; }
.pushline { display: block; font-weight: 400; padding: 3px 0; }
.pushline input { width: auto; margin-right: 8px; }
.searchbar label { flex: 0 0 auto; }
.sortlink { color: inherit; white-space: nowrap; }
/* form controls inside tables size to their content, not the full row width */
table.list td input, table.list td select { width: auto; }
table.list td select { max-width: 220px; }
table.list td input[type=number], table.list td input[type=date] { max-width: 110px; }
.timeline { list-style: none; padding: 0; }
.timeline li { padding: 6px 0; border-bottom: 1px solid #eef1f3; }

.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--grey); }
.login-card { background: #fff; border-radius: 14px; padding: 36px 40px; width: 360px; }
.login-card h1 { font-size: 1.3rem; }
.login-card h1 span { color: var(--cyan); }
.login-card form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }

/* unit selector sits with the item's actions */
.unitbox { display: flex; align-items: center; gap: 8px; }
.unitbox select { width: auto; min-width: 130px; }
/* manually-maintained sections read differently from the operator-driven ones */
.tile.manual { border-style: dashed; }
.tile.manual .tile-code { color: var(--cyan-dark); }

/* results count + previous/next */
.pager { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 12px 0 4px; flex-wrap: wrap; }
.pagerlinks { display: flex; gap: 8px; }

/* Shown under an item's reference where the operator publishes no commodity
   code, so a Sinewave reference is never mistaken for the operator's own
   (Adam, 3 Aug 2026). Deliberately quiet: it is a caveat, not a warning. */
.nocode { color: #8a959d; font-size: 0.78rem; font-style: italic; line-height: 1.3; display: inline-block; }
td.code .nocode { white-space: normal; max-width: 190px; }