/* BIDDERS AND INVITATIONS: the bidder list inside Estimation & Bidding.
   Reuses the ws-* shell classes; everything of its own is bd-. */

/* the tab strip estimate.js draws above the bid: bidders first, the number second */
.es-tabs { display: flex; gap: 6px; padding: 4px; border-radius: 14px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.03); width: max-content; max-width: 100%; }
.es-tab {
    display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 10px; border: 0; background: none;
    color: var(--gray-light, #aeaeb2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.es-tab i { font-style: normal; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 100px; background: rgba(255,255,255,.08); font-size: 11px; font-weight: 800; }
.es-tab small { font-weight: 600; font-size: 11px; opacity: .8; }
.es-tab:hover { color: var(--white, #fff); }
.es-tab.is-on { background: var(--red, #c41717); color: #fff; box-shadow: 0 6px 18px rgba(196,23,23,.28); }
.es-tab.is-on i { background: rgba(255,255,255,.22); color: #fff; }
.es-tab .bd-unread { margin-left: 2px; }
html.light .es-tabs { background: #fff; border-color: rgba(0,0,0,.08); }
html.light .es-tab { color: #6e6e73; }
html.light .es-tab:hover { color: #0a0a0a; }
html.light .es-tab i { background: rgba(0,0,0,.06); }

.bd { display: flex; flex-direction: column; gap: 16px; }
/* on the Bidders & vendors coverage screen the list sits above the trade coverage */
.dir-bidders { margin: 16px 0 22px; }
.dir-cov-body { display: flex; flex-direction: column; gap: 12px; }
.bd-quiet { padding: 12px 4px; color: var(--gray-light, #aeaeb2); font-size: 13px; line-height: 1.5; }

/* ── the project: one slim row ───────────────────────────────────────── */
.bd-top { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.03); }
.bd-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.bd-fact { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 12.5px; }
.bd-fact i { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-light, #aeaeb2); }
.bd-fact b { font-weight: 700; white-space: nowrap; }
.bd-more { border: 0; background: none; color: var(--gray-light, #aeaeb2); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; padding: 0; margin-left: auto; }
.bd-desc { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--gray-light, #aeaeb2); }
.bd-counts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bd-cnt { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 10px; border-radius: 100px; background: rgba(255,255,255,.06); font-size: 11.5px; color: var(--gray-light, #aeaeb2); white-space: nowrap; }
.bd-cnt b { font-size: 13px; font-weight: 850; color: var(--white, #fff); font-variant-numeric: tabular-nums; }
.bd-cnt.is-zero b { color: var(--gray-light, #aeaeb2); }
.bd-cnt.is-hero { background: rgba(196,23,23,.16); }
.bd-cnt.is-good b { color: #37c27a; } .bd-cnt.is-warn b { color: #e6a700; }
.bd-cnt.is-good.is-zero b, .bd-cnt.is-warn.is-zero b { color: var(--gray-light, #aeaeb2); }
.bd-modes { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin-left: auto; font-size: 11.5px; color: var(--gray-light, #aeaeb2); }
.bd-mode, .bd-cat { display: inline-flex; align-items: center; gap: 5px; }
.bd-mode .ws-i, .bd-cat .ws-i { width: 13px; height: 13px; }
.bd-mode.is-test { color: #e6a700; font-weight: 700; }
.bd-mode.is-live { color: #37c27a; font-weight: 700; }

/* ── the body ────────────────────────────────────────────────────────── */
.bd-body { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 14px; align-items: start; }
.bd-side { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 80px; }
.bd-tools { display: flex; flex-direction: column; gap: 6px; }
.bd-search { display: flex; align-items: center; gap: 8px; padding: 0 11px; border-radius: 11px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.bd-search .ws-i { width: 14px; height: 14px; color: var(--gray-light, #aeaeb2); flex: 0 0 auto; }
.bd-search input { flex: 1 1 auto; min-width: 0; padding: 8px 0; border: 0; background: none; color: inherit; font: inherit; font-size: 13px; outline: none; }
.bd-tools-r { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bd-tools select, .bd-compose textarea {
    width: 100%; padding: 7px 9px; border-radius: 9px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
    color: inherit; font: inherit; font-size: 12.5px;
}
/* THE NATIVE OPTION LIST. A select's popup is drawn by the browser in the
   page's colour scheme, so on the dark panel it came up as a white box with
   near-white text. Telling it the scheme is dark, and painting the options,
   makes it readable in both themes. */
.bd-tools select { color-scheme: dark; cursor: pointer; }
.bd-tools select option { background: #1c1c1e; color: #fff; padding: 6px 8px; }
html.light .bd-tools select { color-scheme: light; }
html.light .bd-tools select option { background: #fff; color: #0a0a0a; }
.bd-count { font-size: 11px; color: var(--gray-light, #aeaeb2); padding: 0 4px; }
.bd-list { display: flex; flex-direction: column; gap: 3px; max-height: calc(100vh - 168px); min-height: 240px; overflow: auto; padding-right: 3px; scrollbar-width: thin; }
.bd-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; text-align: left; padding: 7px 10px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.025); color: var(--white, #fff); font: inherit; cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.bd-row:hover { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.05); }
.bd-row.is-invited { border-left: 3px solid rgba(230,167,0,.7); }
.bd-row.is-on { border-color: rgba(196,23,23,.6); background: rgba(196,23,23,.1); }
.bd-row-n { display: flex; align-items: center; gap: 7px; min-width: 0; }
.bd-row-n b { flex: 1 1 auto; min-width: 96px; font-size: 12.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-unread { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 100px; background: var(--red, #c41717); color: #fff; font-style: normal; font-size: 10px; font-weight: 800; }
.bd-row-c { display: flex; gap: 3px; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.bd-chip { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; padding: 1px 6px; border-radius: 100px; font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; background: rgba(255,255,255,.08); color: var(--gray-light, #aeaeb2); max-width: 96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-chip.is-more { background: none; border: 1px dashed rgba(255,255,255,.2); }
.bd-chip.is-none { background: none; border: 1px dashed rgba(255,255,255,.18); font-weight: 600; }
.bd-row-m { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--gray-light, #aeaeb2); flex: 0 0 auto; }
.bd-row-p { display: inline-flex; align-items: center; gap: 3px; min-width: 26px; justify-content: flex-end; }
.bd-row-m .ws-i { width: 11px; height: 11px; }
.bd-st { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 1px 6px; border-radius: 100px; white-space: nowrap; }
.bd-st.is-in { color: #37c27a; background: rgba(55,194,122,.14); }
.bd-st.is-sent { color: #e6a700; background: rgba(230,167,0,.14); }
.bd-st.is-no { color: var(--gray-light, #aeaeb2); background: rgba(255,255,255,.08); }

/* ── one company ─────────────────────────────────────────────────────── */
.bd-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.bd-blank { min-height: 320px; }
.bd-co-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bd-co-id { min-width: 0; }
.bd-co-id h3 { margin: 4px 0 8px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.bd-co-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--gray-light, #aeaeb2); }
.bd-co-meta span, .bd-co-meta a { display: inline-flex; align-items: center; gap: 5px; }
.bd-co-meta a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); }
.bd-co-meta .ws-i { width: 13px; height: 13px; }
.bd-co-trades { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.bd-co-trades small { font-size: 11px; color: var(--gray-light, #aeaeb2); margin: 0 4px; }
.bd-co-trades .sr-act { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; }
.bd-co-trades .ws-i { width: 12px; height: 12px; }
.bd-co-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bd-co-acts .up-btn, .bd-mini { display: inline-flex; align-items: center; gap: 7px; }
.bd-co-acts .ws-i, .bd-mini .ws-i, .bd-compose .ws-i { width: 14px; height: 14px; }
.bd-co-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 14px; align-items: start; }
.bd-co-main, .bd-co-side { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.bd-card { border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: rgba(255,255,255,.025); padding: 11px 14px; }
.bd-card h4 { margin: 0 0 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; }
.bd-card h4 small { font-weight: 500; font-size: 11.5px; color: var(--gray-light, #aeaeb2); }
.bd-n { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 100px; background: rgba(255,255,255,.08); color: var(--gray-light, #aeaeb2); }
.bd-n.is-red { background: var(--red, #c41717); color: #fff; }

/* people */
.bd-people { display: flex; flex-direction: column; }
.bd-person { display: grid; grid-template-columns: 26px minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 6px; border-top: 1px solid rgba(255,255,255,.06); }
.bd-person:first-child { border-top: 0; }
.bd-person.is-picked { background: rgba(196,23,23,.06); border-radius: 10px; }
.bd-person.is-live { }
.bd-pick { display: flex; align-items: center; justify-content: center; }
.bd-pick input { width: 16px; height: 16px; accent-color: var(--red, #c41717); cursor: pointer; }
.bd-pick-x { display: block; width: 6px; height: 6px; border-radius: 100px; background: rgba(255,255,255,.15); }
.bd-person-n { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bd-person-n b { font-size: 13.5px; font-weight: 750; }
.bd-person-n small { font-size: 11.5px; color: var(--gray-light, #aeaeb2); }
.bd-person-n small.is-out { color: #e6a700; }
.bd-person-c { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; color: var(--gray-light, #aeaeb2); }
.bd-person-c a { color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-person-s { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bd-person-s small { font-size: 11px; color: var(--gray-light, #aeaeb2); }
.bd-mailst { font-size: 10.5px; }
.bd-mailst.is-ok { color: #37c27a; } .bd-mailst.is-warn { color: #e6a700; }
.bd-pill { display: inline-flex; align-self: flex-start; align-items: center; padding: 3px 9px; border-radius: 100px; font-size: 11px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.bd-pill.is-none { background: rgba(255,255,255,.08); color: var(--gray-light, #aeaeb2); }
.bd-pill.is-sent { background: rgba(230,167,0,.14); color: #e6a700; }
.bd-pill.is-seen { background: rgba(80,160,255,.16); color: #7cb8ff; }
.bd-pill.is-in { background: rgba(55,194,122,.16); color: #37c27a; }
.bd-pill.is-no { background: rgba(255,255,255,.08); color: var(--gray-light, #aeaeb2); text-decoration: line-through; }
.bd-pill.is-off { background: rgba(255,255,255,.05); color: var(--gray-light, #aeaeb2); }
.bd-person-a { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.bd-ib { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: var(--gray-light, #aeaeb2); cursor: pointer; text-decoration: none; }
.bd-ib:hover { color: var(--white, #fff); border-color: rgba(255,255,255,.3); }
.bd-ib.is-danger:hover { color: #ff5c5c; border-color: rgba(255,92,92,.5); }
.bd-ib .ws-i { width: 14px; height: 14px; }
.bd-noemail { font-size: 11px; color: var(--gray-light, #aeaeb2); font-style: italic; }

/* files */
.bd-files { display: flex; flex-direction: column; gap: 6px; }
.bd-file { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
.bd-file > .ws-i { width: 18px; height: 18px; color: var(--red, #c41717); flex: 0 0 auto; }
.bd-file-n { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bd-file-n b { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-file-n small { font-size: 11px; color: var(--gray-light, #aeaeb2); }
.bd-file-a { display: flex; gap: 4px; }

/* the thread */
.bd-chat { position: sticky; top: 88px; display: flex; flex-direction: column; }
.bd-thread { display: flex; flex-direction: column; gap: 8px; max-height: 420px; min-height: 120px; overflow: auto; padding: 4px 2px; scrollbar-width: thin; }
.bd-msg { max-width: 88%; display: flex; flex-direction: column; gap: 3px; }
.bd-msg.is-us { align-self: flex-end; align-items: flex-end; }
.bd-msg.is-them { align-self: flex-start; }
.bd-msg-b { padding: 9px 12px; border-radius: 14px; font-size: 13px; line-height: 1.5; }
.bd-msg.is-us .bd-msg-b { background: var(--red, #c41717); color: #fff; border-bottom-right-radius: 4px; }
.bd-msg.is-them .bd-msg-b { background: rgba(255,255,255,.08); border-bottom-left-radius: 4px; }
.bd-msg-m { font-size: 10.5px; color: var(--gray-light, #aeaeb2); }
.bd-compose { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.bd-compose textarea { resize: vertical; min-height: 44px; }
.bd-compose .up-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* ── light theme ─────────────────────────────────────────────────────── */
html.light .bd-top, html.light .bd-row, html.light .bd-card, html.light .bd-file { background: #fff; border-color: rgba(0,0,0,.08); }
html.light .bd-cnt { background: rgba(0,0,0,.05); }
html.light .bd-cnt b { color: #0a0a0a; }
html.light .bd-cnt.is-hero { background: rgba(196,23,23,.1); }
html.light .bd-fact b { color: #0a0a0a; }
html.light .bd-row { color: #0a0a0a; }
html.light .bd-row.is-on { background: rgba(196,23,23,.06); }
html.light .bd-search, html.light .bd-tools select, html.light .bd-compose textarea { background: #fff; border-color: rgba(0,0,0,.12); color: #0a0a0a; }
html.light .bd-chip { background: rgba(0,0,0,.06); color: #3a3a3c; }
html.light .bd-chip.is-more, html.light .bd-chip.is-none { border-color: rgba(0,0,0,.2); }
html.light .bd-modes, html.light .bd-person { border-top-color: rgba(0,0,0,.07); }
html.light .bd-ib { background: #fff; border-color: rgba(0,0,0,.12); color: #3a3a3c; }
html.light .bd-ib:hover { color: #0a0a0a; border-color: rgba(0,0,0,.3); }
html.light .bd-msg.is-them .bd-msg-b { background: rgba(0,0,0,.06); color: #0a0a0a; }
html.light .bd-n { background: rgba(0,0,0,.06); color: #3a3a3c; }
html.light .bd-pill.is-none, html.light .bd-pill.is-no, html.light .bd-pill.is-off { background: rgba(0,0,0,.06); color: #3a3a3c; }
html.light .bd-pick-x { background: rgba(0,0,0,.15); }

/* ── narrow ──────────────────────────────────────────────────────────── */
@media (max-width: 1180px) { .bd-co-grid { grid-template-columns: 1fr; } .bd-chat { position: static; } }
@media (max-width: 900px) {
    .bd-modes { margin-left: 0; }
    .bd-body { grid-template-columns: 1fr; }
    .bd-side { position: static; }
    .bd-list { max-height: 360px; }
    .bd-person { grid-template-columns: 26px minmax(0, 1fr); }
    .bd-person-c, .bd-person-s, .bd-person-a { grid-column: 2; }
    .bd-person-a { justify-content: flex-start; }
}