, so a stacked layout comes for free.) */
.tpv-grid tbody tr:last-child th[data-v-85aa42f6],
.tpv-grid tbody tr:last-child td[data-v-85aa42f6] {
border-bottom: none;
}
/* Freeze the first column — position:sticky keeps it pinned to the left
edge of the scroll container while everything else scrolls. Requires an
explicit background so scrolled cells don't bleed through. z-index keeps
the header
above body
. */
.tpv-grid-role-col[data-v-85aa42f6] {
position: sticky;
left: 0;
z-index: 2;
background: #f4f6fb;
min-width: 180px;
box-shadow: 2px 0 0 0 #e2e5ee;
color: #1a1d35;
}
/* Body rows: role names stay left-aligned (readability); header row
inherits the centered thead th rule above. */
.tpv-grid tbody th.tpv-grid-role-col[data-v-85aa42f6] {
text-align: left;
font-weight: 600;
}
/* Header cell of the first column must sit above the body's first-column
cells during horizontal scroll, so bump its z-index one higher. */
.tpv-grid thead .tpv-grid-role-col[data-v-85aa42f6] {
z-index: 3;
}
.wr-wrap[data-v-73eeae9c] {
display: flex;
flex-direction: column;
gap: 16px;
}
.wr-section-body[data-v-73eeae9c] {
padding: 20px 18px;
display: flex;
flex-direction: column;
gap: 16px;
}
.wr-two-col[data-v-73eeae9c] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 24px;
}
@media (max-width: 640px) {
.wr-two-col[data-v-73eeae9c] { grid-template-columns: 1fr;
}
}
.wr-field[data-v-73eeae9c] {
display: flex;
flex-direction: column;
gap: 6px;
}
.wr-label[data-v-73eeae9c] {
font-size: 12px;
font-weight: 600;
color: #1a1d35;
}
/* Box 1 helper. */
.wr-helper[data-v-73eeae9c] {
font-size: 12.5px;
color: #4e5a82;
padding: 8px 10px;
border-radius: 6px;
background: #f4f6fb;
}
.wr-helper--warn[data-v-73eeae9c] {
color: #b91c1c;
background: #fee2e2;
}
/* Box 1 table. */
.wr-table-scroll[data-v-73eeae9c] {
overflow-x: auto;
border: 1px solid #e2e5ee;
border-radius: 6px;
background: #ffffff;
}
.wr-table[data-v-73eeae9c] {
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
}
.wr-table thead th[data-v-73eeae9c] {
background: #f4f6fb;
color: #1a1d35;
font-weight: 700;
text-align: center;
padding: 8px 10px;
border-bottom: 1px solid #e2e5ee;
white-space: nowrap;
}
.wr-table tbody td[data-v-73eeae9c] {
padding: 8px 10px;
border-bottom: 1px solid #eef0f5;
color: #1a1d35;
white-space: nowrap;
}
.wr-table tbody tr:last-child td[data-v-73eeae9c] {
border-bottom: none;
}
.wr-table tbody tr:nth-child(even) td[data-v-73eeae9c] {
background: #f7f8fc;
}
.wr-cell-num[data-v-73eeae9c] {
text-align: center;
font-variant-numeric: tabular-nums;
}
/* Box 2 — Resource Planning grid.
Single-table layout with two sticky columns (Resource Name + Total
Days) — mirrors the Excel-style freeze-pane pattern used on the TPV
rate-card grid. The scroll container's `overflow-x: auto` handles
horizontal overflow when the week strip is wider than available
space; the table itself uses `min-width: 100%` so it stretches to
fill the container when the week strip is narrower.
Fonts, tile widths, current-week accent, and e1..e5 value tints
match TEE so the two calendars read the same across the app. */
.wr-planning-scroll[data-v-73eeae9c] {
overflow-x: auto;
overflow-y: hidden;
border: 1px solid #e2e5ee;
border-radius: 6px;
background: #ffffff;
}
.wr-planning-scroll[data-v-73eeae9c]::-webkit-scrollbar { height: 7px;
}
.wr-planning-scroll[data-v-73eeae9c]::-webkit-scrollbar-track { background: #f0f1f5;
}
.wr-planning-scroll[data-v-73eeae9c]::-webkit-scrollbar-thumb { background: #c8cde0; border-radius: 4px;
}
.wr-planning-tbl[data-v-73eeae9c] {
/* Matches TPV's freeze-pane pattern:
width: max-content → table takes its natural (col-sum) width
min-width: 100% → stretches to fill the container when the
natural width is narrower (few weeks).
No `table-layout: fixed` and no
widths — those turned out
to be unreliable across browsers for this pattern. Instead,
min-width on individual header/body cells (below) authoritatively
drives each column's actual rendered width, which keeps the
sticky columns' `left` offsets aligned with reality. */
border-collapse: separate;
border-spacing: 0;
width: -moz-max-content;
width: max-content;
min-width: 100%;
font-size: 12px;
color: #1a1d35;
}
/* Header rows — kept at fixed pixel heights so alignment is trivial
and doesn't depend on content wrapping. */
.wr-planning-mh[data-v-73eeae9c] {
background: #eef1f7;
color: #4e5a82;
font-weight: 700;
height: 26px;
padding: 0 6px;
text-align: center;
border-bottom: 1px solid #e2e5ee;
white-space: nowrap;
}
.wr-planning-fh[data-v-73eeae9c] {
background: #f4f6fb;
color: #1a1d35;
font-weight: 700;
height: auto;
padding: 8px 10px;
text-align: left;
border-bottom: 1px solid #e2e5ee;
border-right: 1px solid #eef0f5;
white-space: nowrap;
vertical-align: middle;
}
.wr-planning-wh[data-v-73eeae9c] {
background: #f4f6fb;
color: #1a1d35;
font-weight: 700;
height: 30px;
padding: 0;
text-align: center;
border-bottom: 1px solid #e2e5ee;
border-right: 1px solid #eef0f5;
font-size: 11px;
/* Match .wr-planning-wk's min-width so header + body columns line
up. Without this, the header cell can auto-grow past 44px on
wider labels (e.g. "W100●") and desync from the body. */
min-width: 44px;
}
.wr-planning-wh.cur[data-v-73eeae9c] { color: #1d4ed8; background: #eff6ff;
}
.wr-planning-dh[data-v-73eeae9c] {
height: 22px;
padding: 0;
text-align: center;
color: #6b7086;
font-size: 10.5px;
font-weight: 500;
border-bottom: 1px solid #e2e5ee;
border-right: 1px solid #eef0f5;
background: #ffffff;
min-width: 44px;
}
.wr-planning-dh.cur[data-v-73eeae9c] { color: #1d4ed8; background: #eff6ff;
}
/* Body cells. */
.wr-planning-row[data-v-73eeae9c] {
height: 32px;
}
.wr-planning-td[data-v-73eeae9c] {
padding: 6px 10px;
border-bottom: 1px solid #eef0f5;
border-right: 1px solid #eef0f5;
color: #1a1d35;
white-space: nowrap;
vertical-align: middle;
background: #ffffff;
}
.wr-planning-td.center[data-v-73eeae9c] {
text-align: center;
font-variant-numeric: tabular-nums;
}
.wr-planning-row:nth-child(even) .wr-planning-td[data-v-73eeae9c] { background: #f7f8fc;
}
.wr-planning-wk[data-v-73eeae9c] {
height: 32px;
padding: 0;
text-align: center;
border-bottom: 1px solid #eef0f5;
border-right: 1px solid #eef0f5;
vertical-align: middle;
color: #1a1d35;
font-variant-numeric: tabular-nums;
background: #ffffff;
/* Fixed min-width per week column — enforced on the cell rather
than via
, which the browser was silently ignoring under
`width: max-content`. */
min-width: 44px;
}
.wr-planning-wk.past[data-v-73eeae9c] { background: #fafbfd; color: #6b7086;
}
.wr-planning-wk.cur[data-v-73eeae9c] { background: #eff6ff;
}
.wr-planning-row:nth-child(even) .wr-planning-wk[data-v-73eeae9c]:not(.cur):not(.past) { background: #f7f8fc;
}
.wr-planning-wk-val[data-v-73eeae9c] {
display: inline-block;
font-size: 11.5px;
font-weight: 600;
}
/* Value-driven tint — matches TEE's e1..e5 scale so the two calendars
read the same. `.cur` / `.past` are set alongside these classes; the
ordering in the class list (past/cur first, then eN) means CSS
specificity ties get broken by source-order and eN wins for coloured
cells while past/cur wins for empty cells. */
.wr-planning-wk.e1[data-v-73eeae9c] { background: #eef6ff;
}
.wr-planning-wk.e2[data-v-73eeae9c] { background: #dbeafe;
}
.wr-planning-wk.e3[data-v-73eeae9c] { background: #bfdbfe;
}
.wr-planning-wk.e4[data-v-73eeae9c] { background: #93c5fd; color: #ffffff;
}
.wr-planning-wk.e5[data-v-73eeae9c] { background: #60a5fa; color: #ffffff;
}
/* Totals row — sits at the bottom, no zebra tint, subtle divider up
top so it reads as a summary section. */
.wr-planning-totals-row .wr-planning-td[data-v-73eeae9c],
.wr-planning-totals-row .wr-planning-wk[data-v-73eeae9c] {
background: #f4f6fb;
font-weight: 700;
border-top: 2px solid #d5dae7;
border-bottom: none;
}
/* Sticky freeze — first two columns pin to the left edge while the
week strip scrolls. `left` values must sum with the previous
sticky column's min-width to stay visually adjacent (260 → 260px). */
.wr-planning-sticky-name[data-v-73eeae9c] {
position: sticky;
left: 0;
z-index: 2;
min-width: 260px;
max-width: 260px;
box-shadow: 2px 0 0 0 #e2e5ee;
overflow: hidden;
text-overflow: ellipsis;
}
.wr-planning-sticky-total[data-v-73eeae9c] {
position: sticky;
left: 260px;
z-index: 2;
min-width: 110px;
max-width: 110px;
box-shadow: 2px 0 0 0 #e2e5ee;
}
/* Header row cells that are sticky need higher z-index to sit above
scrolled body cells during horizontal scroll. */
.wr-planning-tbl thead .wr-planning-sticky-name[data-v-73eeae9c],
.wr-planning-tbl thead .wr-planning-sticky-total[data-v-73eeae9c] {
z-index: 3;
}
.wr-planning-empty[data-v-73eeae9c] {
padding: 20px 10px;
text-align: center;
color: #9098b0;
font-style: italic;
border-bottom: none;
background: #ffffff;
}
.rsp-pending[data-v-8f1a98b8] {
margin: 0;
padding: 16px 4px;
color: #6b7280;
font-size: 13px;
font-style: italic;
}
/* Summary box 3-field row.
Three equal columns on desktop. Each field stacks its label above the
value; fields 2 & 3 split their value area into a sum + percentage
pair. Collapses to a single column on narrow screens to keep numbers
readable on mobile. */
.rsp-summary-row[data-v-8f1a98b8] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.rsp-summary-field[data-v-8f1a98b8] {
display: flex;
flex-direction: column;
gap: 6px;
}
/* First field (single input) — half-width input so it visually mirrors
the "input half" of the split-value pair used in fields 2 & 3. */
.rsp-summary-field--half input[data-v-8f1a98b8] {
width: 50%;
}
.rsp-summary-pair[data-v-8f1a98b8] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
align-items: center;
}
.rsp-summary-pct[data-v-8f1a98b8] {
padding: 6px 8px;
font-size: 13px;
font-weight: 600;
text-align: center;
font-variant-numeric: tabular-nums;
color: #1a1d35;
}
@media (max-width: 720px) {
.rsp-summary-row[data-v-8f1a98b8] { grid-template-columns: 1fr;
}
}
/* Vertical gap between the 3-field row and the practice-summary table
in Box 1 — the 3-field row uses `gap:16px` but that only spaces its
own children; the table sits outside that grid. */
.rsp-summary-table-wrap[data-v-8f1a98b8] {
margin-top: 16px;
}
/* Slightly taller rows on this table only — the practice-summary rows
need a bit more breathing room than the compact split-detail rows
used in the practice boxes below. */
.rsp-summary-table-wrap .rsp-table tbody td[data-v-8f1a98b8] {
padding-top: 12px;
padding-bottom: 12px;
}
/* Mismatch warning — inline red notice shown under a practice table
when its Level 1 value ≠ Level 2 sum. Matches the soft-red pill tone
used elsewhere for validation messages (WR helper--warn, BaseAlert
error palette). */
.rsp-mismatch[data-v-8f1a98b8] {
margin: 0 0 10px;
padding: 8px 12px;
background: #fee2e2;
border: 1px solid #f87171;
border-radius: 6px;
color: #b91c1c;
font-size: 12.5px;
font-weight: 600;
}
/* "Practice not selected" notice — shown in place of the split table
when the practice isn't in the OIS selection. Muted amber to signal a
soft blocker (user can fix by editing OIS), not an error. */
.rsp-not-selected[data-v-8f1a98b8] {
margin: 0;
padding: 14px 16px;
color: #92400e;
background: #fef3c7;
border: 1px solid #fcd34d;
border-radius: 6px;
font-size: 13px;
line-height: 1.5;
}
/* ORM table — 5-column grid.
Layout mirrors the wr-table + tle-grid pattern used elsewhere in the
dealsheet so tables stay visually consistent across every tab. */
.rsp-table-scroll[data-v-8f1a98b8] {
overflow-x: auto;
border: 1px solid #e2e5ee;
border-radius: 6px;
background: #ffffff;
}
.rsp-table[data-v-8f1a98b8] {
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
min-width: 720px;
}
.rsp-table thead th[data-v-8f1a98b8] {
background: #f4f6fb;
color: #1a1d35;
font-weight: 700;
text-align: center;
padding: 8px 10px;
border-bottom: 1px solid #e2e5ee;
white-space: nowrap;
}
.rsp-th-desc[data-v-8f1a98b8] {
text-align: left !important;
min-width: 320px;
}
.rsp-table tbody td[data-v-8f1a98b8] {
padding: 6px 10px;
border-bottom: 1px solid #eef0f5;
color: #1a1d35;
white-space: nowrap;
}
.rsp-table tbody tr:last-child td[data-v-8f1a98b8] {
border-bottom: none;
}
.rsp-cell-desc[data-v-8f1a98b8] {
text-align: left;
}
/* Number cells — right-aligned tabular-nums for clean column alignment.
No background tint on inputs — the shared .bp-input styling is used
as-is so number cells look identical to every other tab in the app. */
.rsp-cell-num[data-v-8f1a98b8] {
padding: 4px 6px;
min-width: 130px;
text-align: right;
font-variant-numeric: tabular-nums;
}
.rsp-cell-static[data-v-8f1a98b8] {
text-align: right;
padding-right: 12px;
min-width: 90px;
font-variant-numeric: tabular-nums;
}
.rsp-num-input[data-v-8f1a98b8] {
width: 100%;
padding: 5px 8px;
font-size: 13px;
text-align: right;
}
/* Readonly variant — matches the .ds-ois-readonly-value styling in
OisTab.vue so readonly numeric cells across dealsheet tabs share the
same soft-grey pill treatment. Only affects ; plain
readonly text (spans /
cells) is untouched. */
.rsp-num-input[readonly][data-v-8f1a98b8] {
background: #f0f1f5;
border-color: #e4e7f0;
color: #4e5a82;
font-weight: 600;
}
/* Brand-red label — applies only to the BaseSelect wearing `.tle-label-red`
so other TLE labels stay default dark grey. */
.tle-label-red[data-v-938564c8] .bp-label {
color: #da2128;
}
/* Yes / No state tint on the "Is T&L to be invoice back to the client?"
dropdown. Uses the platform's semantic light-tint pill style — soft
background, matching border, deep saturated text — instead of a solid
colour fill, which reads noisy against the red label above and red
message below. Same palette convention used by BaseAlert and the OSQ
Win-Prob row-card selected state. */
/* Yes state — paint only the outer .p-select background so the rounded
corners stay clean. The inner .p-select-label is left transparent so it
inherits the parent's pink visual; only its text colour is overridden. */
.tle-invoiced-yes[data-v-938564c8] .p-select {
background: #fee2e2 !important;
border-color: #f87171 !important;
}
.tle-invoiced-yes[data-v-938564c8] .p-select .p-select-label {
background: transparent !important;
color: #b91c1c !important;
}
.tle-invoiced-yes[data-v-938564c8] .p-select .p-select-dropdown svg {
color: #b91c1c !important;
stroke: #b91c1c !important;
}
/* No state — same pattern, business-green palette. */
.tle-invoiced-no[data-v-938564c8] .p-select {
background: #dcfce7 !important;
border-color: #86efac !important;
}
.tle-invoiced-no[data-v-938564c8] .p-select .p-select-label {
background: transparent !important;
color: #166534 !important;
}
.tle-invoiced-no[data-v-938564c8] .p-select .p-select-dropdown svg {
color: #166534 !important;
stroke: #166534 !important;
}
.tle-msg-block[data-v-938564c8] { margin-top: 6px;
}
.tle-msg[data-v-938564c8] {
margin: 6px 0 0;
font-size: 12.5px;
line-height: 1.45;
}
.tle-msg--red-caps[data-v-938564c8] {
color: #da2128;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.tle-msg--grey[data-v-938564c8] {
color: #4e5a82;
font-weight: 500;
}
.tle-msg--red[data-v-938564c8] {
color: #da2128;
font-weight: 600;
}
/* Three-column summary row above the resource table. Cards mirror the
TEE Summary KPI-card style — dashed border marks them as derived (like
TEE's `kpi-card--calc`). Local class prefix (`tle-kpi-*`) because
TeeTab's scoped styles don't leak here. */
.tle-summary-row[data-v-938564c8] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding-bottom: 16px;
margin-bottom: 16px;
border-bottom: 1px solid #eef1f8;
}
.tle-kpi-card[data-v-938564c8] {
background: #f8f9fc;
border: 1px solid #e4e7f0;
border-radius: 10px;
padding: 10px 14px;
min-width: 110px;
}
.tle-kpi-card--calc[data-v-938564c8] { border-style: dashed;
}
.tle-kpi-lbl[data-v-938564c8] {
font-size: 10px;
font-weight: 700;
color: #9098b0;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 6px;
}
.tle-kpi-val[data-v-938564c8] {
font-size: 16px;
font-weight: 800;
color: #1a1d35;
line-height: 1.1;
}
.tle-kpi-currency[data-v-938564c8] {
color: #4e5a82;
margin-right: 4px;
}
@media (max-width: 760px) {
.tle-summary-row[data-v-938564c8] { grid-template-columns: 1fr;
}
}
/* Empty state — same visual tone as TPV / TEE empties. */
.tle-empty[data-v-938564c8] {
padding: 24px 12px;
text-align: center;
color: #6b7280;
font-size: 13px;
}
/* Horizontally-scrollable 17-column grid. Sticky first column keeps
Resource Name visible while scrolling right through the transport
modes. Cells are compact (36px min-height) to keep the grid dense —
TPV uses the same convention. */
.tle-grid-scroll[data-v-938564c8] {
overflow-x: auto;
border: 1px solid #e4e7f0;
border-radius: 6px;
background: #fff;
}
.tle-grid[data-v-938564c8] {
border-collapse: collapse;
width: -moz-max-content;
width: max-content;
min-width: 100%;
font-size: 12px;
color: #1a1d35;
}
.tle-grid thead th[data-v-938564c8] {
position: sticky;
top: 0;
background: #f4f6fb;
color: #4e5a82;
font-weight: 700;
font-size: 11px;
text-align: center;
padding: 8px 6px;
border-bottom: 1px solid #d1d5e8;
white-space: nowrap;
z-index: 1;
}
.tle-grid tbody th[data-v-938564c8],
.tle-grid tbody td[data-v-938564c8] {
padding: 6px 6px;
border-bottom: 1px solid #eef1f8;
min-height: 36px;
height: 36px;
vertical-align: middle;
}
.tle-grid tbody tr:last-child th[data-v-938564c8],
.tle-grid tbody tr:last-child td[data-v-938564c8] { border-bottom: none;
}
/* First column — sticky left. Higher z-index than the sticky header so the
header still overlays it correctly at the top-left crossing. */
.tle-grid-name-col[data-v-938564c8] {
position: sticky;
left: 0;
background: #fff;
min-width: 200px;
max-width: 240px;
z-index: 2;
border-right: 1px solid #d1d5e8;
text-align: left;
padding-left: 12px;
}
.tle-grid thead .tle-grid-name-col[data-v-938564c8] {
background: #f4f6fb;
z-index: 3;
}
.tle-grid-name-cell[data-v-938564c8] {
font-weight: 600;
color: #1a1d35;
}
/* Numeric input cells — match the TPV grid pattern: minimum wrapper padding,
inherit border / background / border-radius / focus ring from the shared
`.bp-input` (from @dssplus/bizplus-fe-ui). Only fine-tune width, padding,
font-size and right-alignment so the input fills its cell tidily and
digits line up cleanly across rows. */
.tle-grid-cell-num[data-v-938564c8] {
padding: 4px 6px;
min-width: 120px;
}
.tle-grid-cell-num .tle-num-input[data-v-938564c8] {
width: 100%;
padding: 5px 8px;
font-size: 13px;
text-align: right;
}
/* Static (computed) cells — grand-total column + per-transport total
columns. Light grey wash flags them as read-only / derived at a glance
and separates them visually from the editable numeric inputs on either
side. Right-aligned to match the input cells. */
.tle-grid-cell-static[data-v-938564c8] {
text-align: right;
padding-right: 12px;
color: #4e5a82;
font-weight: 600;
min-width: 100px;
background: #f4f6fb;
}
/* Contract Details section body — 3-column grid. Col 1 holds the
payment-terms field; the warning slot always occupies cols 2-3 so
grid auto-flow of later fields lands cleanly on the next row. */
.cfc-contract-grid[data-v-357cc917] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
align-items: end;
}
.cfc-warning-slot[data-v-357cc917] {
grid-column: 2 / -1;
}
@media (max-width: 720px) {
.cfc-contract-grid[data-v-357cc917] { grid-template-columns: 1fr;
}
.cfc-warning-slot[data-v-357cc917] { grid-column: 1 / -1;
}
}
/* Payment-terms row — BaseInput on the left with its own label above
the input; the "days" suffix flex-aligned at the bottom so it sits
next to the input, not the label. */
.cfc-payment-row[data-v-357cc917] {
display: flex;
align-items: flex-end;
gap: 8px;
}
.cfc-num-input[data-v-357cc917] {
flex: 1;
min-width: 0;
}
.cfc-suffix[data-v-357cc917] {
padding-bottom: 8px;
font-size: 13px;
font-weight: 600;
color: #4e5a82;
white-space: nowrap;
}
/* Payment-terms warning — brand-red text, aligns with the input row
(not the label) via padding. Just red text per the spec — no pill
background. */
.cfc-warning[data-v-357cc917] {
padding-bottom: 8px;
color: #b91c1c;
font-size: 12.5px;
font-weight: 600;
line-height: 1.4;
}
/* Yes/No question list — visual match for the OSQ Opportunity Score
sub-section (bordered card, per-row pill radios, green for Yes / red
for No). Kept as its own cfc-q-* namespace since scoped styles don't
cross component boundaries. If a third tab ever needs the same list,
promote to fe-ui. */
.cfc-q-list[data-v-357cc917] {
display: flex;
flex-direction: column;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
overflow: hidden;
}
.cfc-q-item[data-v-357cc917] {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 0.75rem 1rem;
border-bottom: 1px solid #f3f4f6;
transition: background 0.15s;
}
.cfc-q-item[data-v-357cc917]:last-child { border-bottom: none;
}
.cfc-q-item[data-v-357cc917]:hover { background: #f9fafb;
}
.cfc-q-label[data-v-357cc917] {
flex: 1;
font-size: 0.875rem;
color: #111827;
line-height: 1.45;
}
.cfc-q-radios[data-v-357cc917] {
flex-shrink: 0;
display: flex;
gap: 0.375rem;
}
.cfc-q-radio[data-v-357cc917] {
display: inline-flex;
align-items: center;
padding: 0.3rem 1rem;
border: 1.5px solid #e5e7eb;
border-radius: 9999px;
cursor: pointer;
font-size: 0.8125rem;
font-weight: 500;
color: #6b7280;
transition: border-color 0.15s, background 0.15s, color 0.15s;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.cfc-q-radio[data-v-357cc917]:hover { border-color: #9ca3af; color: #374151;
}
.cfc-q-radio--yes[data-v-357cc917] {
border-color: #16a34a;
background: #f0fdf4;
color: #15803d;
}
.cfc-q-radio--no[data-v-357cc917] {
border-color: #dc2626;
background: #fff1f2;
color: #b91c1c;
}
.cfc-q-radio-input[data-v-357cc917] { display: none;
}
/* Inline follow-up sub-panel — appears right below its parent question
inside the bordered card. Soft grey background matches the row hover
tone so it reads as a nested detail, not a separate section. */
.cfc-q-followup[data-v-357cc917] {
padding: 0.75rem 1rem 0.85rem;
background: #f9fafb;
border-bottom: 1px solid #f3f4f6;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.cfc-q-followup[data-v-357cc917]:last-child { border-bottom: none;
}
.cfc-q-followup-label[data-v-357cc917] {
font-size: 0.85rem;
font-weight: 600;
color: #374151;
}
/* Dropdown cell on the classification row — mirrors the flex-shrink
sizing of .cfc-q-radios so the row's left-cell (label) still
flex-grows and the right-cell stays a comfortable dropdown width. */
.cfc-q-select[data-v-357cc917] {
flex-shrink: 0;
width: 240px;
}
/* Warning strip — brand-red banner that flows inside the same
bordered card as the question rows. Keeps the card's outline
uninterrupted; last-child rule drops the trailing separator when
this is the final child. */
.cfc-q-strip[data-v-357cc917] {
padding: 0.7rem 1rem;
font-size: 12.5px;
font-weight: 600;
line-height: 1.4;
border-bottom: 1px solid #f3f4f6;
}
.cfc-q-strip[data-v-357cc917]:last-child { border-bottom: none;
}
.cfc-q-strip--warn[data-v-357cc917] {
background: #fee2e2;
color: #b91c1c;
}
@media (max-width: 640px) {
.cfc-q-item[data-v-357cc917] { flex-direction: column; gap: 0.5rem;
}
.cfc-q-radios[data-v-357cc917] { justify-content: flex-start;
}
.cfc-q-select[data-v-357cc917] { width: 100%;
}
}
/* ── Invoicing Countries — per-market sub-boxes ────────────────
One bordered card per market, laid out on a 3-column grid so all
five markets fit in two rows (WCENA / TMEA / AP on row 1, LA / USC
on row 2). Cells stretch to the tallest in each row via grid's
default align-self so boxes stay level even when one has the "Other"
free-text input open and others don't. Collapses to 2 then 1 column
on narrower screens. */
.cfc-ic-body[data-v-357cc917] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
@media (max-width: 960px) {
.cfc-ic-body[data-v-357cc917] { grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.cfc-ic-body[data-v-357cc917] { grid-template-columns: 1fr;
}
}
.cfc-ic-box[data-v-357cc917] {
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
overflow: hidden;
background: #fff;
}
.cfc-ic-header[data-v-357cc917] {
padding: 0.55rem 0.875rem;
background: #f3f4f6;
font-size: 0.8rem;
font-weight: 700;
color: #374151;
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 1px solid #e5e7eb;
}
.cfc-ic-content[data-v-357cc917] {
padding: 0.875rem;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
/* Brand-red label on the "Other" free-text input for visual
distinction, matching the same treatment used in OSQ Potential
Competitors. `:deep` pierces the BaseInput scoped boundary. */
.cfc-ic-other[data-v-357cc917] .bp-label {
color: #da2128;
}
/* ── Financial Items to Consider (advisory content) ────────────
Static reference block — no inputs. Bold intros followed by
bullet lists, capped by three tax-clause cards on the shared
table-header background (#f4f6fb). */
.cfc-fin-body[data-v-357cc917] {
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.cfc-fin-bold[data-v-357cc917] {
margin: 0;
font-size: 13px;
font-weight: 700;
color: #1a1d35;
line-height: 1.55;
}
/* Normal-weight advisory paragraph — same font-size as bullets, no
emphasis. Used for the reference-note blocks that flow between the
bold headings inside the Financial Items box. */
.cfc-fin-normal[data-v-357cc917] {
margin: 0;
font-size: 12.5px;
font-weight: 400;
color: #374151;
line-height: 1.55;
}
/* Modifier used to insert a slightly larger visual gap ABOVE a normal
paragraph — flags a "line break" separator between logical sections
without needing an empty or spacer element. */
.cfc-fin-normal--divider[data-v-357cc917] {
margin-top: 0.5rem;
}
/* Native list bullets are suppressed by display:flex — we render our
own small red disc via ::before so each item carries a visible
marker that matches the section's red-tone header. */
.cfc-fin-bullets[data-v-357cc917] {
margin: 0 0 0 0.4rem;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.4rem;
font-size: 12.5px;
color: #374151;
line-height: 1.55;
}
.cfc-fin-bullets li[data-v-357cc917] {
position: relative;
padding-left: 1.1rem;
}
.cfc-fin-bullets li[data-v-357cc917]::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 5px;
height: 5px;
border-radius: 50%;
background: #da2128;
}
/* Italic sub-text under the "Example:" bullet — two worked-example
paragraphs sit indented beneath the bullet, unbulleted and italic
so they read as an illustration rather than another point. */
.cfc-fin-example[data-v-357cc917] {
margin-top: 0.35rem;
font-style: italic;
color: #4b5563;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.cfc-fin-example p[data-v-357cc917] { margin: 0;
}
/* Tax clauses — three paragraphs share ONE bordered box with the
shared table header background so they read as a single reference
block. Paragraph spacing (gap) provides visual separation between
clauses without splitting the container into three cards. */
.cfc-fin-clauses[data-v-357cc917] {
margin-top: 0.2rem;
padding: 0.9rem 1rem;
background: #f4f6fb;
border: 1px solid #e2e5ee;
border-radius: 6px;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.cfc-fin-clause[data-v-357cc917] {
font-size: 12.5px;
color: #1a1d35;
line-height: 1.55;
white-space: pre-line;
}
/* BaseAlert's default width is 480px which feels cramped when the field list
includes "Please Justify" entries prefixed with long parent questions.
Bump to 600px specifically for this modal via :deep() — leaves other
BaseAlert usages untouched. */
[data-v-1db63393] .bp-alert { width: 600px;
}
.mand-intro[data-v-1db63393] { margin: 0 0 12px; color: #4e5a82;
}
/* Cap the list height so the modal never exceeds the viewport — the intro
text stays visible above and the button row stays visible below. 45vh is
a comfortable middle ground; the list scrolls internally when long. */
.mand-scroll[data-v-1db63393] { max-height: 45vh; overflow-y: auto; padding-right: 4px;
}
.mand-group[data-v-1db63393] { margin-bottom: 16px;
}
.mand-group[data-v-1db63393]:last-child { margin-bottom: 0;
}
.mand-tab-label[data-v-1db63393] {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #9098b0;
margin-bottom: 6px;
}
.mand-list[data-v-1db63393] { margin: 0; padding-left: 18px; list-style: disc;
}
.mand-list li[data-v-1db63393] { margin-bottom: 4px;
}
.mand-jump[data-v-1db63393] {
background: none;
border: none;
color: #da2128;
font-size: 13px;
font-weight: 600;
cursor: pointer;
padding: 0;
text-decoration: none;
text-align: left;
}
.mand-jump[data-v-1db63393]:hover { text-decoration: underline;
}
.ds-section { border: 1px solid #d1d5e8; border-radius: 10px; overflow: hidden; margin-bottom: 16px;
}
.ds-section:last-child { margin-bottom: 0;
}
.ds-section-header {
padding: 9px 18px; font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.7px;
color: #fff; display: flex; align-items: center; gap: 8px;
}
.ds-section--blue .ds-section-header { background: #191a37;
}
.ds-section--red .ds-section-header { background: #da2128;
}
.ds-section-body { padding: 20px 18px; background: #fff;
}
.ds-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px 20px;
}
.ds-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px;
}
.ds-grid > *, .ds-grid-2 > * { min-width: 0;
}
.ds-stack { display: flex; flex-direction: column; gap: 16px;
}
.ds-save-error { margin-top: 16px; padding: 10px 14px; border-radius: 8px; background: #fee2e2; color: #b91c1c; font-size: 13px;
}
.ds-tab-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 24px; gap: 12px; text-align: center;
}
.ds-placeholder-title { font-size: 15px; font-weight: 600; color: #4e5a82;
}
.ds-placeholder-sub { font-size: 13px; color: #9098b0;
}
@media (max-width: 640px) {
.ds-grid, .ds-grid-2 { grid-template-columns: 1fr;
}
}
/* Red `*` marker used on every mandatory field label. Enlarged so it's
readable even on small (10-12px) section headers where the default
label-inherited size would be nearly invisible. The line-height:0 keeps
it from stretching the line box; vertical-align middle sits it on the
label baseline neatly. */
.bp-required {
font-size: 16px;
font-weight: 700;
line-height: 0;
vertical-align: middle;
/* Guarantees breathing room between the label text and the `*` regardless
of whether the source component included a leading space inside the
span. BaseSearchSelect renders it with no space, others with " *". */
margin-inline-start: 4px;
}
/* Mandatory-field highlight — applied for ~2.5s after the user clicks a
field in the mandatory-fields modal. Global so it cascades through the
Base component roots inside tab templates.
Uses a positioned ::after pseudo-element (not outline or box-shadow):
– outline gets clipped by .ds-card { overflow: clip } when the target
spans the full card width (e.g. Practice Selection section).
– inset box-shadow gets painted OVER by opaque children (header + body
backgrounds inside .ds-section cover the parent's inset shadow).
A positioned ::after with z-index sits on top of children and can't be
clipped by ancestor overflow because it's inside the element's border-box. */
.ds-field-highlight {
position: relative;
}
.ds-field-highlight::after {
content: '';
position: absolute;
inset: 0;
border: 2px solid #da2128;
border-radius: inherit;
pointer-events: none;
z-index: 10;
animation: ds-field-pulse 0.6s ease-in-out 2;
}
@keyframes ds-field-pulse {
0%, 100% { border-color: #da2128;
}
50% { border-color: rgba(218, 33, 40, 0.35);
}
}
.ds-page[data-v-4b1f64a1] { padding: 20px;
}
.ds-page-header[data-v-4b1f64a1] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
gap: 12px;
flex-wrap: wrap;
}
.ds-page-identity[data-v-4b1f64a1] {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.ds-page-icon-box[data-v-4b1f64a1] {
width: 48px;
height: 48px;
border-radius: 12px;
background: #fff0f0;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ds-page-title[data-v-4b1f64a1] { font-size: 22px; font-weight: 700; color: #1a1d35; margin: 0;
}
.ds-page-sub[data-v-4b1f64a1] { font-size: 13px; color: #6b7db8; margin-top: 3px;
}
.ds-page-actions[data-v-4b1f64a1] { display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.ds-card[data-v-4b1f64a1] {
overflow: clip; /* clip keeps border-radius visual but does not block position:sticky */
}
/* ── Sticky tab nav + content header ── */
.ds-sticky-bar[data-v-4b1f64a1] {
position: sticky;
top: 0;
z-index: 20;
background: #fff;
box-shadow: 0 2px 8px rgba(25, 26, 55, 0.1);
}
/* ── Step bar ── */
.ds-step-bar[data-v-4b1f64a1] { background: #f8f9fc; border-bottom: 1px solid #e4e7f0;
}
.ds-step-track[data-v-4b1f64a1] { display: flex; align-items: stretch;
}
.ds-step-item[data-v-4b1f64a1] {
display: flex; align-items: center; gap: 10px;
padding: 6px 20px 6px 16px; flex: 1; cursor: pointer;
border-radius: 8px 8px 0 0; transition: background 0.2s;
}
.ds-step--active[data-v-4b1f64a1] {
background: #fff; border: 1px solid #e4e7f0;
border-bottom: 3px solid #da2128;
border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.ds-step--locked[data-v-4b1f64a1] { cursor: not-allowed;
}
.ds-step--locked .ds-step-name[data-v-4b1f64a1] { color: #9098b0;
}
.ds-step-circle[data-v-4b1f64a1] {
width: 20px; height: 20px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700; flex-shrink: 0;
background: #e4e7f0; color: #9098b0;
}
.ds-step--active .ds-step-circle[data-v-4b1f64a1] { background: #da2128; color: #fff;
}
.ds-step--done .ds-step-circle[data-v-4b1f64a1] { background: #22c55e; color: #fff;
}
.ds-step-text[data-v-4b1f64a1] { flex: 1;
}
.ds-step-label[data-v-4b1f64a1] { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #9098b0;
}
.ds-step--active .ds-step-label[data-v-4b1f64a1] { color: #da2128;
}
.ds-step-name[data-v-4b1f64a1] { font-size: 12px; font-weight: 700; color: #1a1d35;
}
.ds-step-arrow[data-v-4b1f64a1] { color: #c8cde0; font-size: 14px; align-self: center; flex-shrink: 0;
}
.ds-step-badge[data-v-4b1f64a1] {
font-size: 9px; font-weight: 600; padding: 1px 6px; border-radius: 8px;
background: rgba(218,33,40,0.10); color: #da2128; white-space: nowrap;
}
.ds-step-badge--locked[data-v-4b1f64a1] { background: #f0f1f5; color: #9098b0;
}
/* ── Tab nav ── */
.ds-tab-nav[data-v-4b1f64a1] { display: flex; align-items: stretch; border-bottom: 1px solid #e4e7f0; background: #fff;
}
.ds-tab-nav[data-v-4b1f64a1] .bp-tabbar { flex: 1; border-bottom: none;
}
.ds-tab-arrow[data-v-4b1f64a1] {
flex-shrink: 0; width: 36px;
border: none; border-bottom: 3px solid transparent;
background: #fff; color: #6b7db8; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.15s, color 0.15s;
}
.ds-tab-arrow[data-v-4b1f64a1]:hover { background: #f5f6fb; color: #da2128;
}
.ds-tab-arrow[data-v-4b1f64a1]:disabled { opacity: 0.25; cursor: not-allowed;
}
/* ── Tab content ── */
.ds-tab-content[data-v-4b1f64a1] { padding: 28px 0px;
}
.ds-content-header[data-v-4b1f64a1] { display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: white; border-bottom: #bbbbbb 1px solid; margin-top: 10px;
}
/* Fieldset wrapper on every tab template root — used to blanket-disable
every native form control inside when the dealsheet is opened readonly.
Reset default fieldset appearance so it stays invisible; `:deep` pierces
the scoped-style boundary into each child tab component's template. */
[data-v-4b1f64a1] .tab-fieldset {
border: 0;
padding: 0;
margin: 0;
min-width: 0; /* fieldset defaults to min-content — breaks flex/grid children */
}
/* When the fieldset is disabled, use the default arrow cursor across the
tab. The `not-allowed` red-circle cursor felt too aggressive as a
whole-tab treatment; disabled fields still look disabled via their own
greying, and the read-only pill in the sticky header makes the mode
explicit. */
[data-v-4b1f64a1] .tab-fieldset[disabled],[data-v-4b1f64a1] .tab-fieldset[disabled] * {
cursor: default !important;
}
/* Custom clickable divs (Win Prob row cards, GO/NO-GO tiles) and custom
Base* triggers (PrimeVue's Select/MultiSelect/AutoComplete render as
`
`s, not native form controls, so `fieldset[disabled]` doesn't
cascade to them). `pointer-events: none` on them under the disabled
fieldset blocks the trigger click — which in turn prevents PrimeVue's
overlay dropdown from ever opening (the overlay itself teleports to
body, so this trigger-side block is the right place to gate it). */
[data-v-4b1f64a1] .tab-fieldset[disabled] [role="radio"],[data-v-4b1f64a1] .tab-fieldset[disabled] [role="button"],[data-v-4b1f64a1] .tab-fieldset[disabled] .ds-gonogo-btn,[data-v-4b1f64a1] .tab-fieldset[disabled] .osq-wp-row-card,[data-v-4b1f64a1] .tab-fieldset[disabled] .osq-score-radio,[data-v-4b1f64a1] .tab-fieldset[disabled] .dss-yn-radio,[data-v-4b1f64a1] .tab-fieldset[disabled] .ds-practice-card--clickable,[data-v-4b1f64a1] .tab-fieldset[disabled] .p-select,[data-v-4b1f64a1] .tab-fieldset[disabled] .p-multiselect,[data-v-4b1f64a1] .tab-fieldset[disabled] .p-autocomplete,[data-v-4b1f64a1] .tab-fieldset[disabled] .bp-search-single-clear,[data-v-4b1f64a1] .tab-fieldset[disabled] .bp-search-single-wrap {
pointer-events: none;
}
/* Base* triggers should visually look disabled too — soften the tint. */
[data-v-4b1f64a1] .tab-fieldset[disabled] .p-select,[data-v-4b1f64a1] .tab-fieldset[disabled] .p-multiselect,[data-v-4b1f64a1] .tab-fieldset[disabled] .p-autocomplete {
opacity: 0.75;
background: #f8f9fc;
}
/* Read-only mode badge — amber pill with lock icon, sits between the tab
title and the status badge in the sticky content-header row. Visible
only when the dealsheet was opened for viewing (props.readonly). */
.ds-readonly-badge[data-v-4b1f64a1] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 999px;
background: #fef3c7;
color: #92400e;
border: 1px solid #fcd34d;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
white-space: nowrap;
flex-shrink: 0;
}
.ds-readonly-badge svg[data-v-4b1f64a1] { flex-shrink: 0;
}
/* ── Identity info strip (page header top-right) ── */
.ds-info-strip[data-v-4b1f64a1] {
display: flex;
align-items: stretch;
background: #fff;
border: 1px solid #e4e7f0;
border-radius: 10px;
overflow: hidden;
}
.ds-info-item[data-v-4b1f64a1] {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 18px;
min-width: 0;
}
.ds-info-sep[data-v-4b1f64a1] {
width: 1px;
background: #e4e7f0;
margin: 8px 0;
flex-shrink: 0;
}
.ds-info-label[data-v-4b1f64a1] {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #9098b0;
white-space: nowrap;
}
.ds-info-value[data-v-4b1f64a1] {
font-size: 13px;
font-weight: 700;
color: #1a1d35;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 160px;
}
.ds-info-value--id[data-v-4b1f64a1] {
display: flex;
align-items: center;
gap: 6px;
}
.ds-version-badge[data-v-4b1f64a1] {
display: inline-block;
font-size: 10px;
font-weight: 700;
padding: 1px 6px;
border-radius: 6px;
background: #1a1d35;
color: #fff;
letter-spacing: 0.2px;
flex-shrink: 0;
}
.ds-content-title-wrap[data-v-4b1f64a1] {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.ds-content-title[data-v-4b1f64a1] {
font-size: 16px;
font-weight: 700;
color: #1a1d35;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ds-content-subtitle[data-v-4b1f64a1] { font-size: 12px; color: #9098b0; margin-top: 2px;
}
/* Back link in the sticky header — left side. Mirrors the bottom footer back-link semantics. */
/* Layout hook only — visuals come from BaseButton variant="navy" size="sm".
flex-shrink keeps the button intact when the header title next to it is
long enough to compress its siblings. */
.ds-back-link[data-v-4b1f64a1] { flex-shrink: 0;
}
/* ── Status badge ── */
.ds-status-badge[data-v-4b1f64a1] {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px; border-radius: 20px;
font-size: 11px; font-weight: 600;
background: rgba(250,204,21,0.15); color: #b45309;
}
.ds-status-dot[data-v-4b1f64a1] { width: 6px; height: 6px; border-radius: 50%; background: #f59e0b;
}
/* Status colour modifiers — mirrors listing screen bp-tbl-status colours exactly */
.ds-status-badge--draft[data-v-4b1f64a1] { background: #f3f4f6; color: #6b7280;
}
.ds-status-badge--draft .ds-status-dot[data-v-4b1f64a1] { background: #9ca3af;
}
.ds-status-badge--inprogress[data-v-4b1f64a1] { background: #eff6ff; color: #2563eb;
}
.ds-status-badge--inprogress .ds-status-dot[data-v-4b1f64a1] { background: #3b82f6;
}
.ds-status-badge--develop[data-v-4b1f64a1] { background: #fffbeb; color: #b45309;
}
.ds-status-badge--develop .ds-status-dot[data-v-4b1f64a1] { background: #f59e0b;
}
.ds-status-badge--proposed[data-v-4b1f64a1] { background: #f0fdf4; color: #16a34a;
}
.ds-status-badge--proposed .ds-status-dot[data-v-4b1f64a1] { background: #22c55e;
}
.ds-status-badge--approved[data-v-4b1f64a1] { background: #f0fdf4; color: #16a34a;
}
.ds-status-badge--approved .ds-status-dot[data-v-4b1f64a1] { background: #22c55e;
}
.ds-status-badge--completed[data-v-4b1f64a1] { background: #f0fdf4; color: #16a34a;
}
.ds-status-badge--completed .ds-status-dot[data-v-4b1f64a1] { background: #22c55e;
}
.ds-status-badge--closed[data-v-4b1f64a1] { background: #f3f4f6; color: #6b7280;
}
.ds-status-badge--closed .ds-status-dot[data-v-4b1f64a1] { background: #9ca3af;
}
.ds-status-badge--nogo[data-v-4b1f64a1] { background: #fff1f2; color: #dc2626;
}
.ds-status-badge--nogo .ds-status-dot[data-v-4b1f64a1] { background: #ef4444;
}
.ds-status-badge--rejected[data-v-4b1f64a1] { background: #f3f4f6; color: #6b7280;
}
.ds-status-badge--rejected .ds-status-dot[data-v-4b1f64a1] { background: #9ca3af;
}
/* ── Footer ── */
.ds-footer[data-v-4b1f64a1] {
display: flex; justify-content: space-between; align-items: center;
}
.ds-footer-left[data-v-4b1f64a1] { display: flex; gap: 10px; align-items: center;
}
.ds-footer-right[data-v-4b1f64a1] { display: flex; gap: 10px;
}
@media (max-width: 768px) {
.ds-page[data-v-4b1f64a1] { padding: 12px;
}
.ds-tab-content[data-v-4b1f64a1] { padding: 16px;
}
.ds-footer[data-v-4b1f64a1] { flex-direction: column; gap: 12px; padding: 16px;
}
.ds-footer-right[data-v-4b1f64a1] { width: 100%; justify-content: flex-end;
}
.ds-info-strip[data-v-4b1f64a1] { display: none;
}
}
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */
border-style: solid; /* 2 */
border-color: #e5e7eb; /* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-moz-tab-size: 4; /* 3 */
-o-tab-size: 4;
tab-size: 4; /* 3 */
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
font-feature-settings: normal; /* 5 */
font-variation-settings: normal; /* 6 */
-webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0; /* 1 */
line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0; /* 1 */
color: inherit; /* 2 */
border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
font-feature-settings: normal; /* 2 */
font-variation-settings: normal; /* 3 */
font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-feature-settings: inherit; /* 1 */
font-variation-settings: inherit; /* 1 */
font-size: 100%; /* 1 */
font-weight: inherit; /* 1 */
line-height: inherit; /* 1 */
letter-spacing: inherit; /* 1 */
color: inherit; /* 1 */
margin: 0; /* 2 */
padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
-webkit-appearance: button; /* 1 */
background-color: transparent; /* 2 */
background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; /* 1 */
vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
display: none;
}
.container {
width: 100%;
}
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
}
:where([data-mfe="dealsheetApp"]) .\!visible {
visibility: visible !important;
}
:where([data-mfe="dealsheetApp"]) .visible {
visibility: visible;
}
:where([data-mfe="dealsheetApp"]) .invisible {
visibility: hidden;
}
:where([data-mfe="dealsheetApp"]) .collapse {
visibility: collapse;
}
:where([data-mfe="dealsheetApp"]) .static {
position: static;
}
:where([data-mfe="dealsheetApp"]) .fixed {
position: fixed;
}
:where([data-mfe="dealsheetApp"]) .absolute {
position: absolute;
}
:where([data-mfe="dealsheetApp"]) .relative {
position: relative;
}
:where([data-mfe="dealsheetApp"]) .sticky {
position: sticky;
}
:where([data-mfe="dealsheetApp"]) .mb-1 {
margin-bottom: 0.25rem;
}
:where([data-mfe="dealsheetApp"]) .mb-6 {
margin-bottom: 1.5rem;
}
:where([data-mfe="dealsheetApp"]) .\!block {
display: block !important;
}
:where([data-mfe="dealsheetApp"]) .block {
display: block;
}
:where([data-mfe="dealsheetApp"]) .inline {
display: inline;
}
:where([data-mfe="dealsheetApp"]) .flex {
display: flex;
}
:where([data-mfe="dealsheetApp"]) .inline-flex {
display: inline-flex;
}
:where([data-mfe="dealsheetApp"]) .table {
display: table;
}
:where([data-mfe="dealsheetApp"]) .flow-root {
display: flow-root;
}
:where([data-mfe="dealsheetApp"]) .grid {
display: grid;
}
:where([data-mfe="dealsheetApp"]) .hidden {
display: none;
}
:where([data-mfe="dealsheetApp"]) .w-full {
width: 100%;
}
:where([data-mfe="dealsheetApp"]) .flex-shrink {
flex-shrink: 1;
}
:where([data-mfe="dealsheetApp"]) .grow {
flex-grow: 1;
}
:where([data-mfe="dealsheetApp"]) .border-collapse {
border-collapse: collapse;
}
:where([data-mfe="dealsheetApp"]) .transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
:where([data-mfe="dealsheetApp"]) .resize {
resize: both;
}
:where([data-mfe="dealsheetApp"]) .flex-col {
flex-direction: column;
}
:where([data-mfe="dealsheetApp"]) .flex-col-reverse {
flex-direction: column-reverse;
}
:where([data-mfe="dealsheetApp"]) .flex-wrap {
flex-wrap: wrap;
}
:where([data-mfe="dealsheetApp"]) .items-start {
align-items: flex-start;
}
:where([data-mfe="dealsheetApp"]) .justify-between {
justify-content: space-between;
}
:where([data-mfe="dealsheetApp"]) .gap-2 {
gap: 0.5rem;
}
:where([data-mfe="dealsheetApp"]) .gap-3 {
gap: 0.75rem;
}
:where([data-mfe="dealsheetApp"]) :is(.space-y-4 > :not([hidden]) ~ :not([hidden])) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
:where([data-mfe="dealsheetApp"]) .rounded {
border-radius: 0.25rem;
}
:where([data-mfe="dealsheetApp"]) .border {
border-width: 1px;
}
:where([data-mfe="dealsheetApp"]) .p-6 {
padding: 1.5rem;
}
:where([data-mfe="dealsheetApp"]) .px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
:where([data-mfe="dealsheetApp"]) .py-12 {
padding-top: 3rem;
padding-bottom: 3rem;
}
:where([data-mfe="dealsheetApp"]) .pt-4 {
padding-top: 1rem;
}
:where([data-mfe="dealsheetApp"]) .text-center {
text-align: center;
}
:where([data-mfe="dealsheetApp"]) .text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
:where([data-mfe="dealsheetApp"]) .text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
:where([data-mfe="dealsheetApp"]) .font-medium {
font-weight: 500;
}
:where([data-mfe="dealsheetApp"]) .font-semibold {
font-weight: 600;
}
:where([data-mfe="dealsheetApp"]) .uppercase {
text-transform: uppercase;
}
:where([data-mfe="dealsheetApp"]) .italic {
font-style: italic;
}
:where([data-mfe="dealsheetApp"]) .tabular-nums {
--tw-numeric-spacing: tabular-nums;
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
:where([data-mfe="dealsheetApp"]) .text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
:where([data-mfe="dealsheetApp"]) .text-gray-700 {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
:where([data-mfe="dealsheetApp"]) .text-red-600 {
--tw-text-opacity: 1;
color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
:where([data-mfe="dealsheetApp"]) .underline {
text-decoration-line: underline;
}
:where([data-mfe="dealsheetApp"]) .shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
:where([data-mfe="dealsheetApp"]) .outline {
outline-style: solid;
}
:where([data-mfe="dealsheetApp"]) .ring {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
:where([data-mfe="dealsheetApp"]) .blur {
--tw-blur: blur(8px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
:where([data-mfe="dealsheetApp"]) .grayscale {
--tw-grayscale: grayscale(100%);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
:where([data-mfe="dealsheetApp"]) .invert {
--tw-invert: invert(100%);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
:where([data-mfe="dealsheetApp"]) .filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
:where([data-mfe="dealsheetApp"]) .backdrop-filter {
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
:where([data-mfe="dealsheetApp"]) .transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
:where([data-mfe="dealsheetApp"]) .ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* ─────────────────────────────────────────────────────────────────────────
PrimeVue design-token fallbacks
The shell uses PrimeVue in unstyled/headless mode so none of the
--p-* design-token variables are set globally. @primeuix/styles converts
dt('x.y') → var(--p-x-y) at runtime; without these values every Dialog
element (mask, box, header, footer) renders transparent.
───────────────────────────────────────────────────────────────────────── */
:root {
/* Overlay mask (used by Dialog, Drawer, etc.) */
--px-mask-background: rgba(0, 0, 0, 0.5);
--p-mask-background: rgba(0, 0, 0, 0.5);
--p-mask-color: rgba(255, 255, 255, 0.7);
--p-mask-transition-duration: 0.2s;
/* Dialog box */
--p-dialog-background: #ffffff;
--p-dialog-border-color: #e4e7f0;
--p-dialog-color: #1a1d35;
--p-dialog-border-radius: 12px;
--p-dialog-shadow: 0 20px 60px -8px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.08);
/* Dialog header */
--p-dialog-header-padding: 1.125rem 1.375rem;
--p-dialog-header-gap: 0.5rem;
/* Dialog title */
--p-dialog-title-font-size: 1rem;
--p-dialog-title-font-weight: 700;
/* Dialog content */
--p-dialog-content-padding: 1.25rem 1.375rem;
/* Dialog footer */
--p-dialog-footer-padding: 0.75rem 1.375rem;
--p-dialog-footer-gap: 0.5rem;
}
@media (min-width: 640px) {
:where([data-mfe="dealsheetApp"]) .sm\:flex-row {
flex-direction: row;
}
:where([data-mfe="dealsheetApp"]) .sm\:items-center {
align-items: center;
}
:where([data-mfe="dealsheetApp"]) .sm\:justify-end {
justify-content: flex-end;
}
}