/* ═════════════════════════════════════════════════════════════════════════
   PROCUREMENT INTELLIGENCE - BUYOUT (proc-buyout.css)

   Only new selectors, every one prefixed .bo-. 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.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── The bar above the packages ──────────────────────────────────────── */
.bo-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    margin: 4px 0 16px;
}
.bo-bar-l h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--white); }
.bo-bar-l span { display: block; margin-top: 3px; font-size: 12px; color: var(--gray-light); }
.bo-bar-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bo-bar-r .up-btn { padding: 8px 16px; font-size: 12.5px; }
.bo-strip { margin-bottom: 22px; }
.bo-strip .ws-kpi { cursor: default; }
.bo-strip .ws-kpi:hover { transform: none; border-color: var(--border); }
.bo-err { margin: 12px 24px 0; }

.bo-sec { margin-bottom: 26px; }
.bo-sec-h { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.bo-sec-h h2 {
    margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--gray-light);
}
.bo-sec-s { font-size: 12px; color: var(--gray-light); opacity: .85; }
.bo-quiet {
    padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--border);
    font-size: 12.5px; line-height: 1.6; color: var(--gray-light);
}
.bo-empty .bo-sec { margin-top: 26px; text-align: left; }

/* ── Tables: packages and the drawer's lines ─────────────────────────── */
.bo-tbl-w { overflow-x: auto; border: 1px solid var(--border); border-radius: 13px; background: rgba(255,255,255,.02); }
.bo-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bo-tbl th {
    text-align: left; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--gray-light); padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.bo-tbl td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--white); }
.bo-tbl tr:last-child td { border-bottom: 0; }
.bo-tbl .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bo-tbl td.is-num i { font-style: normal; font-size: 10.5px; color: var(--gray-light); margin-left: 4px; }
.bo-tbl td.is-over { color: #e0a03b; }
.bo-tbl td i { font-style: normal; color: var(--gray-light); font-size: 11px; }
.bo-tbl .op-mono { font-size: 11.5px; }
.bo-row { cursor: pointer; transition: background .12s ease; }
.bo-row:hover td { background: rgba(255,255,255,.035); }
.bo-row td:first-child { border-left: 3px solid transparent; }
.bo-row.is-warn td:first-child { border-left-color: #e0a03b; }
.bo-row.is-bad td:first-child { border-left-color: #ff6b6b; }
.bo-row.is-stop td:first-child { border-left-color: var(--red); }
.bo-td-t b { display: block; font-weight: 700; line-height: 1.35; }
.bo-row-f { display: block; margin-top: 4px; font-size: 11px; line-height: 1.45; color: var(--gray-light); }
.bo-row-f.is-bad, .bo-row-f.is-stop { color: #ff8f8f; }
.bo-row-f.is-warn { color: #e0a03b; }
.bo-tbl-lines td { font-size: 12px; }
.bo-line.is-bad td:first-child, .bo-line.is-stop td:first-child { box-shadow: inset 3px 0 0 #ff6b6b; }
.bo-line.is-warn td:first-child { box-shadow: inset 3px 0 0 #e0a03b; }
.bo-line-a { white-space: nowrap; }
.bo-line-a .sr-act { margin-left: 4px; padding: 4px 9px; font-size: 11px; }

/* ── Order-by chip and submittal state ───────────────────────────────── */
.bo-ob {
    display: inline-block; font-size: 10.5px; font-weight: 650; padding: 3px 9px; border-radius: 100px;
    background: rgba(255,255,255,.07); color: var(--gray-light); white-space: nowrap;
}
.bo-ob.is-warn { background: rgba(224,160,59,.16); color: #e0a03b; }
.bo-ob.is-bad { background: rgba(255,107,107,.16); color: #ff8f8f; }
.bo-ob.is-done { background: rgba(20,168,106,.16); color: #2fc07d; }
.bo-ob.is-none { background: transparent; border: 1px dashed var(--border); font-weight: 500; }
.bo-st {
    display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 650; padding: 2px 8px; border-radius: 100px;
    background: rgba(255,255,255,.07); color: var(--gray-light);
}
.bo-st.is-approved, .bo-st.is-approved_as_noted { background: rgba(20,168,106,.18); color: #2fc07d; }
.bo-st.is-under_review, .bo-st.is-submitted { background: rgba(56,132,255,.18); color: #6ba6ff; }
.bo-st.is-rejected, .bo-st.is-revise_resubmit { background: rgba(255,107,107,.18); color: #ff8f8f; }
.bo-st.is-not_started, .bo-st.is-drafting { background: rgba(224,160,59,.16); color: #e0a03b; }
.bo-lnk {
    font: inherit; color: var(--white); background: transparent; border: 0; padding: 0; cursor: pointer;
    text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px;
}
.bo-lnk:hover { text-decoration-color: var(--red); }
.bo-lnk.is-draft { color: var(--gray-light); }
.bo-lnk + .bo-lnk, .bo-lnk + .op-chip { margin-left: 6px; }

/* ── The flow board ──────────────────────────────────────────────────── */
.bo-flow-w { overflow-x: auto; }
.bo-flow { display: flex; flex-direction: column; gap: 6px; min-width: 860px; }
.bo-fl {
    display: grid; grid-template-columns: 2.2fr 1.4fr 1fr 1.4fr 1.2fr; gap: 10px; align-items: stretch;
    padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); border-left: 3px solid rgba(255,255,255,.14);
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); cursor: pointer;
    transition: transform .14s ease, border-color .14s ease;
}
.bo-fl:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.22); }
.bo-fl.is-head {
    padding: 4px 12px; border: 0; background: transparent; cursor: default;
    font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-light);
}
.bo-fl.is-head:hover { transform: none; }
.bo-fl.is-warn { border-left-color: #e0a03b; }
.bo-fl.is-bad { border-left-color: #ff6b6b; }
.bo-fl.is-stop { border-left-color: var(--red); background: rgba(196,23,23,.08); }
.bo-fl.is-delivered { border-left-color: #2fc07d; }
.bo-fl-f { grid-column: 1 / -1; font-size: 11px; line-height: 1.45; color: var(--gray-light); padding-top: 6px; border-top: 1px dashed var(--border); }
.bo-fl-f.is-bad, .bo-fl-f.is-stop { color: #ff8f8f; }
.bo-fl-f.is-warn { color: #e0a03b; }
.bo-fc { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12px; color: var(--white); }
.bo-fc > b { font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.bo-fc-s { display: block; font-size: 10.5px; color: var(--gray-light); }
.bo-fc-s i { font-style: normal; }
.bo-fc.is-empty > span { color: var(--gray-light); font-size: 11px; font-style: italic; }
.bo-fc.is-done > b { color: #2fc07d; }
.bo-fc.is-bad > b { color: #ff8f8f; }
.bo-fc .bo-ob { align-self: flex-start; margin-top: 2px; }
.bo-fc .op-chip { align-self: flex-start; }
.bo-fc .bo-lnk { align-self: flex-start; }

/* ── Added by change orders ──────────────────────────────────────────── */
.bo-added { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.bo-added-c { padding: 12px 14px; border-radius: 13px; border: 1px solid rgba(224,160,59,.35); background: rgba(224,160,59,.06); }
.bo-added-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bo-added-h b { flex: 1; font-size: 13px; color: var(--white); }
.bo-added-h .up-btn { padding: 6px 12px; font-size: 11.5px; }
.bo-added-l { margin: 8px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.6; color: var(--white); }
.bo-added-l i { font-style: normal; color: var(--gray-light); }

/* ── The drawer ──────────────────────────────────────────────────────── */
.bo-rc { width: min(980px, 96vw); }
.bo-rc-ok { padding: 12px 24px 0; font-size: 12.5px; color: #2fc07d; }
.bo-rc-s { padding: 16px 24px 0; }
.bo-rc-s h4 {
    margin: 0 0 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-light);
}
.bo-rc-p { margin: 0 0 10px; font-size: 12.5px; color: var(--gray-light); }
.bo-money {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; padding: 16px 24px 0;
}
.bo-m { padding: 10px 12px; border-radius: 11px; border: 1px solid var(--border); background: rgba(255,255,255,.03); }
.bo-m span { display: block; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-light); }
.bo-m b { display: block; margin-top: 4px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--white); font-variant-numeric: tabular-nums; }
.bo-m b i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--gray-light); margin-left: 4px; }
.bo-m.is-warn b { color: #e0a03b; }
.bo-m.is-bad b { color: #ff8f8f; }
.bo-m.is-ok b { color: #2fc07d; }
.bo-basis { margin: 8px 24px 0; font-size: 11.5px; line-height: 1.5; color: var(--gray-light); }
.bo-rfqs { display: flex; flex-direction: column; gap: 6px; }
.bo-rfq {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px;
    border-radius: 11px; border: 1px solid var(--border); background: rgba(255,255,255,.03);
}
.bo-rfq.is-selected { border-color: rgba(20,168,106,.4); }
.bo-rfq.is-declined, .bo-rfq.is-not_selected { opacity: .7; }
.bo-rfq-v { font: inherit; font-weight: 700; color: var(--white); background: transparent; border: 0; padding: 0; cursor: pointer; }
.bo-rfq-v:hover { color: var(--red); }
.bo-rfq-a { font-variant-numeric: tabular-nums; color: var(--white); }
.bo-rfq-a.is-none { font-weight: 500; color: var(--gray-light); }
.bo-rfq-t { flex-basis: 100%; font-size: 11px; color: var(--gray-light); }
.bo-cmts { display: flex; flex-direction: column; gap: 6px; }
.bo-cmt {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; text-align: left; font: inherit; cursor: pointer;
    padding: 9px 12px; border-radius: 11px; border: 1px solid var(--border); background: rgba(255,255,255,.03); color: var(--white);
}
.bo-cmt:hover { border-color: rgba(255,255,255,.22); }
.bo-cmt b { flex: 1; font-weight: 650; }
.bo-cmt i { font-style: normal; color: var(--gray-light); }

@media (max-width: 720px) {
    .bo-money { grid-template-columns: repeat(2, 1fr); }
    .bo-bar-r { width: 100%; }
}

/* ── Light theme ─────────────────────────────────────────────────────── */
html.light .bo-bar-l h2 { color: #17181c; }
html.light .bo-bar-l span { color: #5f6470; }
html.light .bo-sec-h h2 { color: #5f6470; }
html.light .bo-sec-s { color: #5f6470; }
html.light .bo-quiet { color: #5f6470; border-color: #dcdfe5; }
html.light .bo-tbl-w { background: #fff; border-color: #e3e5ea; }
html.light .bo-tbl th { color: #6b7080; border-bottom-color: #e3e5ea; }
html.light .bo-tbl td { color: #17181c; border-bottom-color: #eceef2; }
html.light .bo-tbl td i { color: #6b7080; }
html.light .bo-tbl td.is-over { color: #a56a00; }
html.light .bo-row:hover td { background: #f5f6f8; }
html.light .bo-row-f { color: #5f6470; }
html.light .bo-row-f.is-bad, html.light .bo-row-f.is-stop { color: #c41717; }
html.light .bo-row-f.is-warn { color: #a56a00; }
html.light .bo-ob { background: #eef0f3; color: #5f6470; }
html.light .bo-ob.is-warn { background: rgba(224,160,59,.18); color: #a56a00; }
html.light .bo-ob.is-bad { background: rgba(196,23,23,.1); color: #c41717; }
html.light .bo-ob.is-done { background: rgba(20,168,106,.14); color: #157a4f; }
html.light .bo-ob.is-none { border-color: #dcdfe5; }
html.light .bo-st { background: #eef0f3; color: #5f6470; }
html.light .bo-st.is-approved, html.light .bo-st.is-approved_as_noted { background: rgba(20,168,106,.14); color: #157a4f; }
html.light .bo-st.is-under_review, html.light .bo-st.is-submitted { background: rgba(56,132,255,.14); color: #1f5fcc; }
html.light .bo-st.is-rejected, html.light .bo-st.is-revise_resubmit { background: rgba(196,23,23,.1); color: #c41717; }
html.light .bo-st.is-not_started, html.light .bo-st.is-drafting { background: rgba(224,160,59,.18); color: #a56a00; }
html.light .bo-lnk { color: #17181c; text-decoration-color: rgba(23,24,28,.3); }
html.light .bo-lnk.is-draft { color: #6b7080; }
html.light .bo-fl { background: #fff; border-color: #e3e5ea; border-left-color: #d3d6dd; }
html.light .bo-fl:hover { border-color: #c9ccd4; }
html.light .bo-fl.is-head { background: transparent; color: #6b7080; border: 0; }
html.light .bo-fl.is-stop { background: rgba(196,23,23,.05); }
html.light .bo-fl-f { color: #5f6470; border-top-color: #e3e5ea; }
html.light .bo-fl-f.is-bad, html.light .bo-fl-f.is-stop { color: #c41717; }
html.light .bo-fl-f.is-warn { color: #a56a00; }
html.light .bo-fc { color: #17181c; }
html.light .bo-fc-s { color: #6b7080; }
html.light .bo-fc.is-empty > span { color: #8a8f9c; }
html.light .bo-fc.is-done > b { color: #157a4f; }
html.light .bo-fc.is-bad > b { color: #c41717; }
html.light .bo-added-c { background: rgba(224,160,59,.08); border-color: rgba(165,106,0,.35); }
html.light .bo-added-h b { color: #17181c; }
html.light .bo-added-l { color: #17181c; }
html.light .bo-added-l i { color: #6b7080; }
html.light .bo-rc-ok { color: #157a4f; }
html.light .bo-rc-s h4 { color: #6b7080; }
html.light .bo-rc-p { color: #5f6470; }
html.light .bo-m { background: #fff; border-color: #e3e5ea; }
html.light .bo-m span { color: #6b7080; }
html.light .bo-m b { color: #17181c; }
html.light .bo-m b i { color: #6b7080; }
html.light .bo-m.is-warn b { color: #a56a00; }
html.light .bo-m.is-bad b { color: #c41717; }
html.light .bo-m.is-ok b { color: #157a4f; }
html.light .bo-basis { color: #5f6470; }
html.light .bo-rfq { background: #fff; border-color: #e3e5ea; }
html.light .bo-rfq-v { color: #17181c; }
html.light .bo-rfq-a { color: #17181c; }
html.light .bo-rfq-a.is-none { color: #6b7080; }
html.light .bo-rfq-t { color: #5f6470; }
html.light .bo-cmt { background: #fff; border-color: #e3e5ea; color: #17181c; }
html.light .bo-cmt:hover { border-color: #c9ccd4; }
html.light .bo-cmt i { color: #6b7080; }