/* ═════════════════════════════════════════════════════════════════════════
   PROCUREMENT INTELLIGENCE - COMPARE QUOTES (proc-compare.css)

   Only new selectors, every one prefixed .vc-. The rail, strip, alerts,
   chips, pills, drawer and activity list are the workspace's own ws-* and
   op-* classes and are not restyled here. Same tokens, same greens, ambers
   and blues, and a light pass for every colour set below.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Strip and alerts ────────────────────────────────────────────────── */
.vc-strip { margin-bottom: 22px; }
.vc-strip .ws-kpi { cursor: default; }
.vc-strip .ws-kpi:hover { transform: none; border-color: var(--border); }
.vc-alerts { margin-bottom: 18px; }
.vc-err { margin-bottom: 10px; }

/* ── Two columns: the package list and the matrix ────────────────────── */
.vc-layout { display: grid; grid-template-columns: minmax(230px, 290px) minmax(0, 1fr); gap: 18px; align-items: start; }
.vc-list { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 12px; }
.vc-list-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 2px 4px; }
.vc-list-h h2 { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-light); }
.vc-list-h span { font-size: 11px; color: var(--gray-light); opacity: .85; }
.vc-card {
    position: relative; overflow: hidden; cursor: pointer; font: inherit; text-align: left; color: inherit;
    display: flex; flex-direction: column; gap: 5px;
    padding: 11px 13px 10px; border-radius: 12px;
    border: 1px solid var(--border); border-left: 3px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    transition: transform .16s var(--ease-out, ease), border-color .16s ease, background .16s ease;
}
.vc-card:hover { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06); }
.vc-card.is-active { border-color: rgba(196,23,23,.55); background: rgba(196,23,23,.08); box-shadow: 0 0 0 3px rgba(196,23,23,.12); }
.vc-card.is-warn { border-left-color: #e0a03b; }
.vc-card.is-bad, .vc-card.is-stop { border-left-color: #ff6b6b; }
.vc-card-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; color: var(--gray-light); }
.vc-card h4 { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--white); }
.vc-card-m { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--gray-light); }
.vc-card-f {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    margin-top: 4px; padding-top: 7px; border-top: 1px solid var(--border);
    font-size: 11px; color: var(--gray-light);
}
.vc-card-f b { font-size: 12px; color: #2fc07d; font-variant-numeric: tabular-nums; }
.vc-card-f b.is-disq { color: #ff8f8f; text-decoration: line-through; }
.vc-card-f i { font-style: normal; }
.vc-pkg-quotes_in { background: rgba(56,132,255,.18); color: #6ba6ff; }
.vc-pkg-rfq_out { background: rgba(224,160,59,.16); color: #e0a03b; }
.vc-pkg-awarded, .vc-pkg-closed { background: rgba(20,168,106,.18); color: #2fc07d; }
.vc-pkg-not_started, .vc-pkg-scoping { background: rgba(255,255,255,.08); color: var(--gray-light); }

/* ── The chosen package ──────────────────────────────────────────────── */
.vc-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.vc-quiet {
    padding: 16px 18px; border-radius: 12px; border: 1px dashed var(--border);
    font-size: 12.5px; line-height: 1.6; color: var(--gray-light);
}
.vc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.vc-head-id { flex: 1; min-width: 240px; }
.vc-head-id h2 { margin: 2px 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--white); }
.vc-head-id .ws-meta i { font-style: normal; opacity: .75; }
.vc-head-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vc-link {
    font: inherit; font-size: inherit; cursor: pointer; padding: 0; border: 0; background: none;
    color: #6ba6ff; text-decoration: underline; text-decoration-color: rgba(107,166,255,.4); text-underline-offset: 2px;
}
.vc-link:hover { text-decoration-color: #6ba6ff; }
.vc-reco {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
    padding: 12px 15px; border-radius: 12px; font-size: 13px; line-height: 1.55; color: var(--white);
    border: 1px solid rgba(20,168,106,.35); background: rgba(20,168,106,.08);
}
.vc-reco.is-warn { border-color: rgba(224,160,59,.4); background: rgba(224,160,59,.08); }
.vc-reco.is-quiet { border-color: var(--border); background: rgba(255,255,255,.03); color: var(--gray-light); }
.vc-reco i { font-style: normal; font-size: 11px; color: var(--gray-light); }
.vc-reco-l { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #2fc07d; }
.vc-reco.is-warn .vc-reco-l { color: #e0a03b; }
.vc-reco.is-quiet .vc-reco-l { color: var(--gray-light); }

/* ── The matrix: one column per vendor ───────────────────────────────── */
.vc-matrix-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 13px; background: rgba(255,255,255,.025); }
.vc-matrix { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 640px; font-size: 12px; }
.vc-matrix th, .vc-matrix td { padding: 9px 12px; vertical-align: top; text-align: left; border-bottom: 1px solid var(--border); }
.vc-matrix tbody tr:last-child th, .vc-matrix tbody tr:last-child td { border-bottom: 0; }
.vc-matrix thead th { padding-top: 12px; padding-bottom: 10px; background: rgba(255,255,255,.035); }
.vc-matrix .vc-lbl { width: 140px; min-width: 120px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-light); white-space: nowrap; }
.vc-matrix .vc-est { width: 150px; min-width: 130px; background: rgba(255,255,255,.03); color: var(--gray-light); border-right: 1px solid var(--border); }
.vc-matrix .vc-est b { color: var(--white); font-variant-numeric: tabular-nums; }
.vc-matrix .vc-col { min-width: 190px; }
.vc-matrix td b { display: block; font-size: 13px; font-weight: 700; color: var(--white); font-variant-numeric: tabular-nums; }
.vc-matrix td small { display: block; margin-top: 3px; font-size: 10.5px; line-height: 1.45; color: var(--gray-light); }
.vc-matrix td .op-chip { margin-top: 5px; }
.vc-matrix .vc-col.is-disq { background: rgba(255,255,255,.015); color: var(--gray-light); }
.vc-matrix td.vc-col.is-disq b { color: var(--gray-light); text-decoration: line-through; text-decoration-color: rgba(255,143,143,.6); }
.vc-matrix th.vc-col.is-best-price { box-shadow: inset 0 3px 0 #2fc07d; }
.vc-matrix th.vc-col.is-best-lead:not(.is-best-price) { box-shadow: inset 0 3px 0 #6ba6ff; }
.vc-matrix .vc-col.is-carried { background: rgba(20,168,106,.07); }
.vc-vend { display: block; font: inherit; font-size: 13px; font-weight: 800; letter-spacing: -.01em; cursor: pointer; padding: 0; border: 0; background: none; color: var(--white); text-align: left; }
.vc-vend:hover { color: #6ba6ff; }
.vc-est .vc-vend { cursor: default; color: var(--gray-light); }
.vc-est i { display: block; font-size: 10px; font-style: normal; color: var(--gray-light); opacity: .8; }
.vc-vend-m { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.vc-none { font-style: normal; font-size: 11px; color: var(--gray-light); opacity: .6; }
.vc-lev { cursor: help; text-decoration: underline dotted rgba(255,255,255,.3); text-underline-offset: 3px; }
.vc-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.vc-perf { font: inherit; cursor: pointer; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
.vc-perf:hover small { color: var(--white); }
.vc-acts { display: flex; flex-wrap: wrap; gap: 5px; }
.vc-acts .up-btn, .vc-acts .sr-act { padding: 5px 10px; font-size: 11px; }
.vc-acts.is-drawer .up-btn, .vc-acts.is-drawer .sr-act { padding: 8px 14px; font-size: 12px; }
.vc-award { white-space: nowrap; }

/* ── Line by line ────────────────────────────────────────────────────── */
.vc-lines { margin-top: 4px; }
.vc-sec-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.vc-sec-h h2 { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-light); }
.vc-sec-h span { font-size: 11.5px; color: var(--gray-light); opacity: .85; }
.vc-lines-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.vc-lines-t { border-collapse: collapse; width: 100%; font-size: 12px; }
.vc-lines-t th { padding: 8px 12px; text-align: left; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-light); background: rgba(255,255,255,.035); border-bottom: 1px solid var(--border); white-space: nowrap; }
.vc-lines-t td { padding: 8px 12px; vertical-align: top; border-bottom: 1px solid var(--border); color: var(--gray-light); font-variant-numeric: tabular-nums; }
.vc-lines-t tbody tr:last-child td { border-bottom: 0; }
.vc-lines-t td b { color: var(--white); font-weight: 700; }
.vc-lines-t td small { display: block; margin-top: 2px; font-size: 10.5px; color: var(--gray-light); }
.vc-lines-t td .op-chip { margin-top: 3px; }

/* ── The drawer ──────────────────────────────────────────────────────── */
.vc-rc .op-acts { flex-wrap: wrap; }
.vc-rc-h h2 { color: var(--white); }
.vc-rc-f { margin-bottom: 8px; }
.vc-disq { padding: 10px 14px; margin-bottom: 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.55; color: #ff8f8f; background: rgba(255,107,107,.1); border: 1px solid rgba(255,107,107,.3); }
.vc-rc .op-fld i.is-bad { color: #ff8f8f; }
.vc-text { margin: 12px 0; font-size: 12.5px; line-height: 1.6; color: var(--gray-light); }
.vc-text h4 { margin: 0 0 4px; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--white); }
.vc-rc-lines { margin: 14px 0; }
.vc-rc-lines h4 { margin: 0 0 6px; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--white); }
.vc-rc-lines .vc-lines-t { border: 1px solid var(--border); border-radius: 10px; }

/* ── Empty state ─────────────────────────────────────────────────────── */
.vc-empty .ws-blank-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ── Light theme ─────────────────────────────────────────────────────── */
html.light .vc-list-h h2, html.light .vc-list-h span, html.light .vc-card-t, html.light .vc-card-m, html.light .vc-card-f,
html.light .vc-quiet, html.light .vc-reco i, html.light .vc-sec-h h2, html.light .vc-sec-h span, html.light .vc-text,
html.light .vc-none, html.light .vc-est, html.light .vc-est i { color: var(--gray-mid); }
html.light .vc-card h4, html.light .vc-head-id h2, html.light .vc-reco, html.light .vc-vend, html.light .vc-matrix td b,
html.light .vc-matrix .vc-est b, html.light .vc-lines-t td b, html.light .vc-text h4, html.light .vc-rc-lines h4, html.light .vc-rc-h h2 { color: var(--black); }
html.light .vc-strip .ws-kpi:hover { border-color: rgba(0,0,0,.1); }
html.light .vc-card { background: #fafbfc; border-color: rgba(0,0,0,.09); border-left-color: rgba(0,0,0,.18); }
html.light .vc-card:hover { background: #fff; border-color: rgba(0,0,0,.2); }
html.light .vc-card.is-active { background: rgba(196,23,23,.05); border-color: rgba(196,23,23,.45); }
html.light .vc-card.is-warn { border-left-color: #a8690f; }
html.light .vc-card.is-bad, html.light .vc-card.is-stop { border-left-color: #c41717; }
html.light .vc-card-f { border-color: rgba(0,0,0,.08); }
html.light .vc-card-f b { color: #0f7a4b; }
html.light .vc-card-f b.is-disq { color: #c41717; }
html.light .vc-pkg-quotes_in { background: rgba(43,95,184,.14); color: #2b5fb8; }
html.light .vc-pkg-rfq_out { background: rgba(168,105,15,.12); color: #a8690f; }
html.light .vc-pkg-awarded, html.light .vc-pkg-closed { background: rgba(20,168,106,.14); color: #0f7a4b; }
html.light .vc-pkg-not_started, html.light .vc-pkg-scoping { background: rgba(0,0,0,.06); color: var(--gray-mid); }
html.light .vc-quiet { border-color: rgba(0,0,0,.14); }
html.light .vc-head { border-color: rgba(0,0,0,.08); }
html.light .vc-link { color: #2b5fb8; text-decoration-color: rgba(43,95,184,.4); }
html.light .vc-link:hover { text-decoration-color: #2b5fb8; }
html.light .vc-reco { border-color: rgba(20,168,106,.35); background: rgba(20,168,106,.07); }
html.light .vc-reco.is-warn { border-color: rgba(168,105,15,.4); background: rgba(168,105,15,.07); }
html.light .vc-reco.is-quiet { border-color: rgba(0,0,0,.1); background: #fafbfc; }
html.light .vc-reco-l { color: #0f7a4b; }
html.light .vc-reco.is-warn .vc-reco-l { color: #a8690f; }
html.light .vc-reco.is-quiet .vc-reco-l { color: var(--gray-mid); }
html.light .vc-matrix-wrap, html.light .vc-lines-wrap, html.light .vc-rc-lines .vc-lines-t { border-color: rgba(0,0,0,.1); background: #fff; }
html.light .vc-matrix th, html.light .vc-matrix td, html.light .vc-lines-t th, html.light .vc-lines-t td { border-color: rgba(0,0,0,.08); }
html.light .vc-matrix thead th, html.light .vc-lines-t th { background: rgba(0,0,0,.035); }
html.light .vc-matrix .vc-lbl, html.light .vc-lines-t th, html.light .vc-matrix td small, html.light .vc-lines-t td, html.light .vc-lines-t td small { color: var(--gray-mid); }
html.light .vc-matrix .vc-est { background: rgba(0,0,0,.025); border-right-color: rgba(0,0,0,.08); }
html.light .vc-matrix .vc-col.is-disq { background: rgba(0,0,0,.015); }
html.light .vc-matrix td.vc-col.is-disq b { color: var(--gray-mid); text-decoration-color: rgba(196,23,23,.5); }
html.light .vc-matrix th.vc-col.is-best-price { box-shadow: inset 0 3px 0 #0f7a4b; }
html.light .vc-matrix th.vc-col.is-best-lead:not(.is-best-price) { box-shadow: inset 0 3px 0 #2b5fb8; }
html.light .vc-matrix .vc-col.is-carried { background: rgba(20,168,106,.06); }
html.light .vc-vend:hover { color: #2b5fb8; }
html.light .vc-lev { text-decoration-color: rgba(0,0,0,.3); }
html.light .vc-perf:hover small { color: var(--black); }
html.light .vc-disq { color: #c41717; background: rgba(196,23,23,.07); border-color: rgba(196,23,23,.3); }
html.light .vc-rc .op-fld i.is-bad { color: #c41717; }