/* Bid Manager "Proposed" submission workspace — GLOBAL styles (not scoped), so the tab content
   rendered by child section components is styled too. Mirrors the submission-detail reference. */

/* Page wrapper: fills .content-area's bounded height so the TenderNavigation bar pins and only the
   tab content scrolls -- previously .ps-root took the full height WITH the nav above it, overflowing
   .content-area and scrolling the whole page. */
.ps-page { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.ps-root { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* A&E tab everywhere it appears (client portal + all BM submission views): Bidder Inclusions &
   Assumptions and Bidder Exclusions shown SIDE BY SIDE (two columns), not stacked. Global (this
   file is linked in index.html) so every submission-detail component gets it without duplicating.
   Stacks back to one column on narrow widths. */
.ae-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.ae-split .ae-col { min-width: 0; }
@media (max-width: 900px) {
    .ae-split { grid-template-columns: 1fr; }
}

.ps-empty {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .4rem; padding: 3rem 1rem; text-align: center;
}
.ps-empty-title { font-size: 1rem; font-weight: 800; color: var(--white, #F6F1E7); }
.ps-empty-sub { font-size: .78rem; color: var(--muted, #9C8880); max-width: 460px; line-height: 1.5; }

.ps-layout { flex: 1; min-height: 0; display: flex; overflow: hidden; }

/* ── Left list — matches submission-detail.css .sub-list / .sub-item ── */
.ps-list { width: 220px; flex-shrink: 0; border-right: 1px solid var(--border, #2a2a2a); overflow-y: auto; background: var(--card2, #101010); display: flex; flex-direction: column; }
.ps-list-hdr { padding: .65rem .9rem .55rem; font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--white, #F6F1E7); border-bottom: 1px solid var(--border, #2a2a2a); }
.ps-item { padding: .62rem .9rem; border-bottom: 1px solid rgba(255,255,255,.04); cursor: pointer; transition: background .12s; }
.ps-item:hover { background: rgba(255,255,255,.025); }
.ps-item.active { background: rgba(255,76,11,.07); border-left: 2.5px solid var(--orange, #FF4C0B); padding-left: calc(.9rem - 2.5px); }
.ps-item-top { display: flex; justify-content: space-between; align-items: center; }
.ps-item-code { font-size: .72rem; font-weight: 800; color: var(--white, #F6F1E7); }
.ps-item-status { font-size: .56rem; font-weight: 700; text-transform: uppercase; color: var(--muted, #9C8880); }
.ps-item-name { font-size: .68rem; color: var(--muted, #9C8880); margin-top: .1rem; }
.ps-item-val { font-size: .72rem; font-weight: 700; color: var(--green, #7DD4A8); margin-top: .2rem; }
.ps-item-val-lbl { font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #9C8880); margin-right: .3rem; }

/* ── Right detail ── */
.ps-detail { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.ps-detail-hdr { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1.2rem; border-bottom: 1px solid var(--border, #2a2a2a); flex-shrink: 0; }
.ps-detail-title { font-size: 1rem; font-weight: 800; color: var(--white, #F6F1E7); }
.ps-detail-sub { font-size: .66rem; color: var(--muted, #9C8880); margin-top: .15rem; }
.ps-price { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; margin-right: 1rem; }
.ps-price-lbl { font-size: .58rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted, #9C8880); font-weight: 700; }
.ps-price-val { font-size: .95rem; font-weight: 800; color: var(--orange, #FF4C0B); }
.ps-save-btn { background: var(--orange, #FF4C0B); color: #fff; border: none; border-radius: 6px; padding: .5rem 1.1rem; font-size: .74rem; font-weight: 700; cursor: pointer; font-family: inherit; margin-left: .5rem; }
.ps-save-btn:disabled { opacity: .6; cursor: not-allowed; }
/* Secondary "Save" (draft) action next to the primary Send to Client button. */
.ps-save-btn--ghost { background: transparent; border: 1px solid var(--border, #2a2a2a); color: var(--white, #F6F1E7); margin-left: 0; }
.ps-save-btn--ghost:hover:not(:disabled) { border-color: var(--orange, #FF4C0B); color: var(--orange, #FF4C0B); }

/* ── Tab bar (dotted, horizontal) — copied verbatim from submission-detail.css .sub-tabs/.sub-tab ── */
.ps-tabbar {
    display: flex; align-items: center; border-bottom: 1px solid var(--border, #2a2a2a);
    padding: 0 1.25rem; background: var(--card, #141414); flex-shrink: 0;
    gap: .1rem; flex-wrap: wrap;
}
.ps-tab {
    padding: .6rem .8rem; font-size: .73rem; font-weight: 600; color: var(--muted, #9C8880);
    cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: .15s;
    white-space: nowrap; display: flex; align-items: center; gap: .4rem;
}
.ps-tab:hover { color: var(--white, #F6F1E7); }
.ps-tab.active { color: var(--white, #F6F1E7); border-bottom-color: var(--orange, #FF4C0B); }
.ps-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green, #7DD4A8); flex-shrink: 0; }
.ps-tab-dot.amber { background: var(--amber, #F5C842); }
.ps-tab-dot.blue { background: var(--blue, #A8C4E0); }
.ps-tab-dot.muted { background: rgba(156,136,128,.4); }
.ps-tab-dot.orange { background: var(--orange, #FF4C0B); }
.ps-tab-x { color: var(--muted, #9C8880); font-size: .9rem; line-height: 1; margin-left: .1rem; }
.ps-tab-x:hover { color: #F87171; }

.ps-addtab-wrap { position: relative; margin-left: .4rem; align-self: center; }
.ps-addtab-btn { background: transparent; border: 1px dashed rgba(255,255,255,.2); color: var(--muted, #9C8880); border-radius: 6px; padding: .32rem .6rem; font-size: .68rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.ps-addtab-btn:hover { color: var(--white, #F6F1E7); border-color: var(--orange, #FF4C0B); }
.ps-addtab-menu { position: absolute; top: 110%; left: 0; z-index: 40; background: #181818; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: .3rem; min-width: 190px; box-shadow: 0 12px 40px rgba(0,0,0,.5); max-height: 340px; overflow-y: auto; }
.ps-addtab-item { padding: .42rem .55rem; font-size: .72rem; color: var(--muted, #9C8880); border-radius: 5px; cursor: pointer; }
.ps-addtab-item:hover { background: rgba(255,76,11,.1); color: var(--white, #F6F1E7); }
.ps-addtab-empty { padding: .42rem .55rem; font-size: .68rem; color: var(--muted, #9C8880); }

/* ── Tab content ── */
.ps-tab-content { flex: 1; min-height: 0; overflow-y: auto; }
.ps-pane { padding: 1.2rem; display: flex; flex-direction: column; gap: 1.1rem; max-width: 1100px; }

.ps-card { background: var(--card, #141414); border: 1px solid var(--border, #2a2a2a); border-radius: 10px; overflow: hidden; }
.ps-card-hdr { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .95rem; border-bottom: 1px solid var(--border, #2a2a2a); }
.ps-card-title { font-size: .82rem; font-weight: 800; color: var(--white, #F6F1E7); display: flex; align-items: center; gap: .5rem; }
.ps-card-body { padding: .85rem .95rem; }
.ps-card-body--flush { padding: 0; }

.ps-chip { font-size: .58rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; }
.ps-chip--green { background: rgba(125,212,168,.12); color: var(--green, #7DD4A8); }
.ps-chip--muted { background: rgba(255,255,255,.05); color: var(--muted, #9C8880); }

.ps-kv { display: flex; justify-content: space-between; padding: .45rem .1rem; border-bottom: 1px solid rgba(255,255,255,.04); font-size: .76rem; }
.ps-kv span:first-child { color: var(--muted, #9C8880); }
.ps-kv span:last-child { color: var(--white, #F6F1E7); font-weight: 700; }
.ps-green { color: var(--green, #7DD4A8) !important; }
.ps-muted { color: var(--muted, #9C8880); }

/* ── Tables ── */
.ps-tbl { width: 100%; border-collapse: collapse; font-size: .73rem; }
.ps-tbl th { text-align: left; padding: .55rem .85rem; font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #9C8880); border-bottom: 1px solid var(--border, #2a2a2a); background: rgba(255,255,255,.02); }
.ps-tbl td { padding: .48rem .85rem; border-bottom: 1px solid rgba(255,255,255,.04); color: var(--white, #F6F1E7); }
.ps-tbl th.r, .ps-tbl td.r { text-align: right; }
.ps-tbl tr.sel td { background: rgba(255,76,11,.06); }
.ps-tbl-total td { font-weight: 800; color: var(--orange, #FF4C0B); border-top: 1px solid var(--border, #2a2a2a); }
.ps-boq-empty { color: var(--muted, #9C8880); text-align: center; padding: 1.1rem !important; }
.ps-boq-total { font-weight: 700; }

/* ── Inputs ── */
.ps-in { width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 5px; padding: .34rem .48rem; font-family: inherit; font-size: .72rem; color: var(--white, #F6F1E7); outline: none; }
.ps-in:focus { border-color: rgba(255,76,11,.4); }
.ps-in.r { text-align: right; }
.ps-in.ps-price { max-width: 110px; }
.ps-boq td { padding: .32rem .5rem; }

.ps-mini-btn { background: transparent; border: 1px solid rgba(255,255,255,.14); color: var(--white, #F6F1E7); border-radius: 5px; padding: .3rem .65rem; font-size: .66rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.ps-mini-btn:hover { border-color: var(--orange, #FF4C0B); color: var(--orange, #FF4C0B); }
.ps-row-x { cursor: pointer; color: var(--muted, #9C8880); font-size: 1rem; line-height: 1; }
.ps-row-x:hover { color: #F87171; }

/* ── Forms / notes ── */
.ps-form { display: flex; flex-direction: column; gap: .8rem; }
.ps-form-row { display: flex; gap: .8rem; }
.ps-field { display: flex; flex-direction: column; gap: .28rem; flex: 1; }
.ps-field-lbl { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #9C8880); }
.ps-textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.ps-textarea--tall { min-height: 280px; }

/* ── Requirements ── */
.ps-req-cols { display: flex; gap: 1rem; align-items: flex-start; }
.ps-req-sections { width: 240px; flex-shrink: 0; background: var(--card, #141414); border: 1px solid var(--border, #2a2a2a); border-radius: 10px; overflow: hidden; }
.ps-req-items { flex: 1; min-width: 0; background: var(--card, #141414); border: 1px solid var(--border, #2a2a2a); border-radius: 10px; overflow: hidden; }
.ps-req-sec { display: flex; align-items: center; gap: .3rem; padding: .45rem .6rem; border-bottom: 1px solid rgba(255,255,255,.04); cursor: pointer; }
.ps-req-sec.active { background: rgba(255,76,11,.08); }
.ps-req-secname { border-color: transparent; background: transparent; }
.ps-req-empty { padding: 1.1rem; font-size: .72rem; color: var(--muted, #9C8880); text-align: center; }

.ps-loading { padding: 1.2rem; font-size: .74rem; color: var(--muted, #9C8880); }

/* ── Merge flow (Proposed workspace → Create Submission) ── */
.ps-merge-bar { padding: .5rem .9rem; border-bottom: 1px solid var(--border, #2a2a2a); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ps-merge-all { display: flex; align-items: center; gap: .1rem; font-size: .64rem; font-weight: 700; color: var(--muted, #9C8880); cursor: pointer; user-select: none; }
.ps-merge-all:hover { color: var(--white, #F6F1E7); }
.ps-merge-count { font-size: .6rem; font-weight: 800; color: var(--orange, #FF4C0B); margin-left: auto; }
.ps-merge-btn { width: 100%; background: var(--orange, #FF4C0B); color: #fff; border: none; border-radius: 6px; padding: .42rem .6rem; font-size: .66rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.ps-merge-btn:disabled { background: rgba(255,255,255,.07); color: var(--muted, #9C8880); cursor: not-allowed; }
.ps-merge-chk { accent-color: var(--orange, #FF4C0B); margin-right: .35rem; vertical-align: -1px; cursor: pointer; }
.ps-item-status.merged { color: var(--amber, #F5C842); }

/* ── Submissions workspace (final / merged submissions) ── */
.fs-badge { font-size: .54rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: .14rem .45rem; border-radius: 999px; white-space: nowrap; }
.fs-badge--draft { background: rgba(255,255,255,.07); color: var(--muted, #9C8880); }
.fs-badge--submitted { background: rgba(168,196,224,.14); color: var(--blue, #A8C4E0); }
.fs-badge--approved { background: rgba(125,212,168,.14); color: var(--green, #7DD4A8); }
.fs-badge--declined { background: rgba(248,113,113,.14); color: #F87171; }
.fs-badge--revised { background: rgba(245,200,66,.14); color: var(--amber, #F5C842); }

.fs-remarks { padding: .55rem 1.2rem; font-size: .72rem; color: var(--amber, #F5C842); background: rgba(245,200,66,.06); border-bottom: 1px solid var(--border, #2a2a2a); }

.fs-split { flex: 1; min-height: 0; display: flex; overflow: hidden; height: 100%; }
.fs-pkg-col { width: 235px; flex-shrink: 0; border-right: 1px solid var(--border, #2a2a2a); overflow-y: auto; background: var(--card2, #101010); }
.fs-pkg-item { padding: .55rem .85rem; border-bottom: 1px solid rgba(255,255,255,.04); cursor: pointer; transition: background .12s; }
.fs-pkg-item:hover { background: rgba(255,255,255,.025); }
.fs-pkg-item.active { background: rgba(255,76,11,.07); border-left: 2.5px solid var(--orange, #FF4C0B); padding-left: calc(.85rem - 2.5px); }
.fs-pkg-code { font-size: .7rem; font-weight: 800; color: var(--white, #F6F1E7); }
.fs-pkg-name { font-size: .66rem; color: var(--muted, #9C8880); margin-top: .08rem; }
.fs-pkg-sub { font-size: .6rem; color: var(--muted, #9C8880); margin-top: .08rem; opacity: .8; }
.fs-pkg-val { font-size: .68rem; font-weight: 700; color: var(--orange, #FF4C0B); margin-top: .18rem; }

.fs-boq { flex: 1; min-width: 0; overflow-y: auto; padding: 1rem 1.2rem; }
.fs-boq-strip { display: flex; align-items: center; gap: .6rem; padding: .6rem 1.2rem; border-bottom: 1px solid var(--border, #2a2a2a); background: var(--card, #141414); position: sticky; top: 0; z-index: 5; }
.fs-boq-strip-code { font-size: .6rem; font-weight: 800; letter-spacing: .05em; color: #fff; background: var(--orange, #FF4C0B); border-radius: 4px; padding: .16rem .45rem; }
.fs-boq-strip-name { font-size: .8rem; font-weight: 800; color: var(--white, #F6F1E7); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-boq-strip-total { font-size: .82rem; font-weight: 800; color: var(--orange, #FF4C0B); white-space: nowrap; }
.fs-grand { text-align: right; font-size: .8rem; font-weight: 800; color: var(--white, #F6F1E7); padding: .4rem .2rem 1rem; }
.fs-grand span { color: var(--orange, #FF4C0B); }

.fs-cl-body { white-space: pre-wrap; font-size: .76rem; color: var(--white, #F6F1E7); line-height: 1.6; padding: .7rem .1rem; border-bottom: 1px solid rgba(255,255,255,.04); }