/* ── BaseButton styles ── */
.bp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
border: 1px solid transparent;
white-space: nowrap;
text-decoration: none;
}
.bp-btn:disabled { opacity: 0.6; cursor: not-allowed;
}
/* Sizes */
.bp-btn--sm { padding: 6px 14px; font-size: 12px;
}
.bp-btn--md { padding: 9px 20px;
}
.bp-btn--lg { padding: 12px 28px; font-size: 14px;
}
/* Variants */
.bp-btn--primary { background: #da2128; color: #fff; border-color: #da2128;
}
.bp-btn--primary:hover:not(:disabled) { background: #c41e24; border-color: #c41e24;
}
.bp-btn--outline { background: #fff; color: #4e5a82; border-color: #d1d5e8;
}
.bp-btn--outline:hover:not(:disabled) { background: #f8f9fc;
}
.bp-btn--text { background: transparent; color: #6b7db8; border-color: transparent; padding-left: 4px; padding-right: 4px;
}
.bp-btn--text:hover:not(:disabled) { color: #1a1d35;
}
.bp-btn--danger { background: #fee2e2; color: #b91c1c; border-color: #fecaca;
}
.bp-btn--danger:hover:not(:disabled) { background: #fecaca;
}
.bp-btn--navy { background: #1a1d35; color: #fff; border-color: #1a1d35;
}
.bp-btn--navy:hover:not(:disabled) { background: #2d3154; border-color: #2d3154;
}
/* Loading spinner */
.bp-btn-spinner {
width: 14px;
height: 14px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: bp-spin 0.6s linear infinite;
flex-shrink: 0;
}
@keyframes bp-spin {
to { transform: rotate(360deg);
}
}
/* ── bp- form primitives (global, prefixed to avoid conflicts) ── */
.bp-form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.bp-form-group--full { grid-column: 1 / -1;
}
.bp-label {
font-size: 12px;
font-weight: 600;
color: #000;
letter-spacing: 0.4px;
}
.bp-required { color: #da2128;
}
.bp-input {
/* Fixed 34px height (border-box) — kept in lockstep with BaseSelect
and BaseSearchSelect so mixed form rows align on the baseline. */
height: 34px;
padding: 0 12px;
border: 1px solid #c0c1cb;
border-radius: 8px;
font-size: 13.5px;
color: #1a1d35;
outline: none;
transition: border-color 0.15s;
font-family: inherit;
width: 100%;
box-sizing: border-box;
}
.bp-input:focus {
border-color: #da2128;
box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
}
.bp-input--error { border-color: #b91c1c !important;
}
.bp-input--disabled { background: #f8f9fc; color: #9098b0; cursor: not-allowed;
}
.bp-input--readonly { background: #f8f9fc; color: #1a1d35; cursor: default; border-color: #c0c1cb;
}
.bp-field-error { font-size: 11px; color: #b91c1c;
}
.bp-field-helper { font-size: 11px; color: #9098b0;
}
/* ── BaseSelect component styles ── */
.bp-select-wrap { width: 100%;
}
.bp-select { width: 100%;
}
.bp-select.p-select {
/* Fixed 34px height (border-box) — locks in a consistent form-row
height across BaseInput / BaseSelect / BaseSearchSelect. */
height: 34px;
box-sizing: border-box;
width: 100%;
border: 1px solid #c0c1cb;
border-radius: 8px;
box-shadow: none;
transition: border-color 0.15s;
}
.bp-select.p-select:hover:not(.p-disabled) { border-color: #a0a1ab;
}
.bp-select.p-select.p-focus {
border-color: #da2128;
box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
outline: none;
}
.bp-select-wrap--open .bp-select.p-select {
border-color: #da2128;
box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
outline: none;
}
.bp-select .p-select-label {
/* Flex-center so the label text vertically centres inside the
fixed-height 34px trigger (parent border-box). */
display: flex;
align-items: center;
height: 100%;
padding: 0 12px;
font-size: 13.5px;
color: #1a1d35;
font-family: inherit;
}
.bp-select .p-select-label.p-placeholder { color: #9098b0;
}
.bp-select .p-select-dropdown {
width: 36px;
color: #6b7db8;
display: flex;
align-items: center;
justify-content: center;
}
.bp-select .p-select-dropdown svg { width: 14px; height: 14px;
}
.bp-select--error.p-select { border-color: #b91c1c !important;
}
.bp-select.p-disabled { background: #f8f9fc;
}
.bp-select.p-disabled .p-select-label { color: #9098b0;
}
/* ── PrimeVue Select overlay — teleported to body, must be global ── */
.p-select-overlay,
.p-select-overlay.p-component {
z-index: 9999 !important;
background-color: #ffffff !important;
border: 1px solid #c0c1cb !important;
border-radius: 8px !important;
box-shadow: 0 8px 24px rgba(25, 26, 55, 0.14) !important;
font-family: inherit;
font-size: 13.5px;
overflow: hidden;
}
.p-select-overlay .p-select-list-container,
.p-select-overlay .p-select-list {
background-color: #ffffff !important;
}
.p-select-overlay .p-select-filter-container {
padding: 8px 12px;
border-bottom: 1px solid #e4e7f0;
background-color: #ffffff !important;
}
.p-select-overlay .p-select-filter {
width: 100%;
padding: 7px 10px;
border: 1px solid #c0c1cb;
border-radius: 6px;
font-size: 13px;
font-family: inherit;
outline: none;
background-color: #fff !important;
}
.p-select-overlay .p-select-filter:focus { border-color: #5b6af0;
}
.p-select-overlay .p-select-list {
/* No max-height or overflow here — PrimeVue sets max-height on the parent
.p-select-list-container via its scrollHeight prop. Competing here causes
nested scroll containers that collapse item padding on long lists. */
padding: 6px 0;
}
.p-select-overlay .p-select-option,
.p-select-overlay .p-select-option-container {
padding: 11px 14px !important;
line-height: 1.4 !important;
font-size: 13.5px !important;
color: #1a1d35 !important;
cursor: pointer !important;
background-color: #ffffff !important;
}
.p-select-overlay .p-select-option:hover,
.p-select-overlay .p-select-option-container:hover { background-color: #f5f6fb !important;
}
.p-select-overlay .p-select-option.p-focus,
.p-select-overlay .p-select-option-container.p-focus { background-color: #f5f6fb !important;
}
.p-select-overlay .p-select-option.p-selected,
.p-select-overlay .p-select-option-container.p-selected { background-color: #eef0fd !important; color: #3d4db0 !important; font-weight: 600 !important;
}
.p-select-overlay .p-select-empty-message { padding: 12px 14px !important; font-size: 13px !important; color: #9098b0 !important; background-color: #ffffff !important;
}
/* ── BaseMultiSelect component styles ── */
.bp-mselect-wrap { width: 100%;
}
.bp-mselect { width: 100%;
}
.bp-mselect.p-multiselect {
width: 100%;
/* Fixed 34px trigger height to match BaseInput / BaseSelect / BaseSearchSelect
(v1.1.46). border-box keeps the outer edge exactly 34px including the
1px border, so mixed form rows stay baseline-aligned. Vertical padding
is zero — the label element centres its text via `display:flex;
align-items:center; height:100%` (same recipe as BaseSelect).
Caveat: `display='chip'` + `tagsPosition='inside'` with many picks
will clip stacked chips at this height; that combo should use
`tagsPosition='below'` for a compact single-row trigger + chips
rendered outside. */
height: 34px;
box-sizing: border-box;
border: 1px solid #c0c1cb;
border-radius: 8px;
box-shadow: none;
transition: border-color 0.15s;
}
.bp-mselect.p-multiselect:hover:not(.p-disabled) { border-color: #a0a1ab;
}
.bp-mselect.p-multiselect.p-focus {
border-color: #da2128;
box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
outline: none;
}
.bp-mselect-wrap--open .bp-mselect.p-multiselect {
border-color: #da2128;
box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
outline: none;
}
.bp-mselect .p-multiselect-label {
/* Vertical padding at 0 — label element centres via flex on the 34px
trigger. Horizontal padding matches BaseInput's `padding: 0 12px`. */
padding: 0 12px;
height: 100%;
display: flex;
align-items: center;
font-size: 13.5px;
color: #1a1d35;
font-family: inherit;
/* Prevent long comma-joined labels from pushing the trigger taller — the
chevron column has its own fixed 36px width, so this label span owns
everything to its left. */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.bp-mselect .p-multiselect-label.p-placeholder { color: #9098b0;
}
.bp-mselect .p-multiselect-dropdown {
width: 36px;
color: #6b7db8;
display: flex;
align-items: center;
justify-content: center;
}
.bp-mselect .p-multiselect-dropdown svg { width: 14px; height: 14px;
}
.bp-mselect--error.p-multiselect { border-color: #b91c1c !important;
}
.bp-mselect.p-disabled { background: #f8f9fc;
}
.bp-mselect.p-disabled .p-multiselect-label { color: #9098b0;
}
/* chip display mode */
.bp-mselect .p-multiselect-chip {
background: rgba(218, 33, 40, 0.08);
color: #da2128;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
padding: 2px 7px;
margin: 2px 3px 2px 0;
}
.bp-mselect .p-multiselect-chip-icon {
font-size: 10px;
margin-left: 4px;
cursor: pointer;
opacity: 0.7;
}
.bp-mselect .p-multiselect-chip-icon:hover { opacity: 1;
}
/* ── PrimeVue MultiSelect overlay — teleported to body, must be global ── */
.p-multiselect-overlay,
.p-multiselect-overlay.p-component {
z-index: 9999 !important;
background-color: #ffffff !important;
border: 1px solid #c0c1cb !important;
border-radius: 8px !important;
box-shadow: 0 8px 24px rgba(25, 26, 55, 0.14) !important;
font-family: inherit;
font-size: 13.5px;
overflow: hidden;
}
.p-multiselect-overlay .p-multiselect-header {
padding: 8px 12px;
border-bottom: 1px solid #e4e7f0;
background-color: #ffffff !important;
display: flex;
align-items: center;
gap: 8px;
}
.p-multiselect-overlay .p-multiselect-filter-container {
flex: 1;
}
.p-multiselect-overlay .p-multiselect-filter {
width: 100%;
padding: 7px 10px;
border: 1px solid #c0c1cb;
border-radius: 6px;
font-size: 13px;
font-family: inherit;
outline: none;
background-color: #fff !important;
}
.p-multiselect-overlay .p-multiselect-filter:focus { border-color: #da2128;
}
.p-multiselect-overlay .p-multiselect-list-container,
.p-multiselect-overlay .p-multiselect-list {
background-color: #ffffff !important;
}
.p-multiselect-overlay .p-multiselect-list { padding: 6px 0;
}
.p-multiselect-overlay .p-multiselect-option,
.p-multiselect-overlay .p-multiselect-option-container {
padding: 11px 14px !important;
line-height: 1.4 !important;
font-size: 13.5px !important;
color: #1a1d35 !important;
cursor: pointer !important;
background-color: #ffffff !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.p-multiselect-overlay .p-multiselect-option:hover,
.p-multiselect-overlay .p-multiselect-option-container:hover { background-color: #f5f6fb !important;
}
.p-multiselect-overlay .p-multiselect-option.p-focus,
.p-multiselect-overlay .p-multiselect-option-container.p-focus { background-color: #f5f6fb !important;
}
.p-multiselect-overlay .p-multiselect-option.p-selected,
.p-multiselect-overlay .p-multiselect-option-container.p-selected {
background-color: #fff3f3 !important;
color: #da2128 !important;
font-weight: 600 !important;
}
/* checkbox inside each option */
.p-multiselect-overlay .p-checkbox {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.p-multiselect-overlay .p-checkbox-box {
width: 16px;
height: 16px;
border: 1.5px solid #c0c1cb;
border-radius: 4px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.15s, background 0.15s;
}
.p-multiselect-overlay .p-checkbox-box.p-checked {
background: #da2128 !important;
border-color: #da2128 !important;
}
.p-multiselect-overlay .p-checkbox-box.p-checked svg { color: #fff !important;
}
.p-multiselect-overlay .p-multiselect-empty-message {
padding: 12px 14px !important;
font-size: 13px !important;
color: #9098b0 !important;
background-color: #ffffff !important;
}
/* ── tagsPosition='below' — selected items render as removable tags BELOW the input ── */
.bp-mselect-trigger-placeholder {
color: #9098b0;
}
.bp-mselect-trigger-count {
color: #1a1d35;
font-weight: 600;
}
.bp-mselect-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
max-height: 120px;
overflow-y: auto;
}
.bp-mselect-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 4px 4px 10px;
background: rgba(218, 33, 40, 0.08);
color: #da2128;
border-radius: 14px;
font-size: 12px;
font-weight: 600;
line-height: 1;
}
.bp-mselect-tag-remove {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: 50%;
color: #da2128;
cursor: pointer;
padding: 0;
transition: background 0.15s, color 0.15s;
}
.bp-mselect-tag-remove:hover {
background: #da2128;
color: #fff;
}
/* ── BaseTreeMultiSelect — mirrors BaseMultiSelect's trigger geometry so
mixed form rows stay baseline-aligned. */
.bp-treesel-wrap { width: 100%;
}
.bp-treesel { width: 100%;
}
.bp-treesel.p-treeselect {
width: 100%;
height: 34px;
box-sizing: border-box;
border: 1px solid #c0c1cb;
border-radius: 8px;
box-shadow: none;
transition: border-color 0.15s;
}
.bp-treesel.p-treeselect:hover:not(.p-disabled) { border-color: #a0a1ab;
}
.bp-treesel.p-treeselect.p-focus,
.bp-treesel-wrap--open .bp-treesel.p-treeselect {
border-color: #da2128;
box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
outline: none;
}
.bp-treesel .p-treeselect-label {
padding: 0 12px;
height: 100%;
display: flex;
align-items: center;
font-size: 13.5px;
color: #1a1d35;
font-family: inherit;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.bp-treesel .p-treeselect-label.p-placeholder { color: #9098b0;
}
.bp-treesel .p-treeselect-dropdown {
width: 36px;
color: #6b7db8;
display: flex;
align-items: center;
justify-content: center;
}
.bp-treesel .p-treeselect-dropdown svg { width: 14px; height: 14px;
}
.bp-treesel--error.p-treeselect { border-color: #b91c1c !important;
}
.bp-treesel.p-disabled { background: #f8f9fc;
}
.bp-treesel.p-disabled .p-treeselect-label { color: #9098b0;
}
/* ── Overlay — teleported to body, must be global ── */
.p-treeselect-overlay,
.p-treeselect-overlay.p-component {
z-index: 9999 !important;
background-color: #ffffff !important;
border: 1px solid #c0c1cb !important;
border-radius: 8px !important;
box-shadow: 0 8px 24px rgba(25, 26, 55, 0.14) !important;
font-family: inherit;
font-size: 13.5px;
overflow: hidden;
min-width: 260px;
}
/* Filter row — PrimeVue 4 renders this via the inner Tree component as
an IconField, which also carries the `.p-iconfield` class on the
same wrapper. We target both so a theme-level rename doesn't break
the styling. Likewise the input carries BOTH `.p-tree-filter-input`
AND `.p-inputtext`; the latter is what Aura's base theme sets its
default font-size / padding on, which was winning on specificity
and leaving the input looking unstyled (giant placeholder text).
The combined selector `input.p-tree-filter-input` out-specifies the
theme's `.p-inputtext` rule, and the `!important` on sizing props
guards against any future Aura preset that reasserts them. */
.p-treeselect-overlay .p-tree-filter,
.p-treeselect-overlay .p-iconfield {
padding: 8px 12px !important;
background-color: #ffffff !important;
border-bottom: 1px solid #e4e7f0 !important;
width: 100%;
box-sizing: border-box;
}
.p-treeselect-overlay input.p-tree-filter-input,
.p-treeselect-overlay .p-iconfield > input.p-inputtext {
width: 100% !important;
height: 34px !important;
padding: 7px 32px 7px 10px !important;
border: 1px solid #c0c1cb !important;
border-radius: 6px !important;
font-size: 13px !important;
font-family: inherit !important;
line-height: 1.3 !important;
color: #1a1d35 !important;
outline: none !important;
background-color: #fff !important;
box-sizing: border-box !important;
box-shadow: none !important;
}
.p-treeselect-overlay input.p-tree-filter-input:focus,
.p-treeselect-overlay .p-iconfield > input.p-inputtext:focus {
border-color: #da2128 !important;
box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12) !important;
}
.p-treeselect-overlay input.p-tree-filter-input::-moz-placeholder, .p-treeselect-overlay .p-iconfield > input.p-inputtext::-moz-placeholder {
color: #9098b0 !important;
font-size: 13px !important;
font-family: inherit !important;
opacity: 1;
}
.p-treeselect-overlay input.p-tree-filter-input::placeholder,
.p-treeselect-overlay .p-iconfield > input.p-inputtext::placeholder {
color: #9098b0 !important;
font-size: 13px !important;
font-family: inherit !important;
opacity: 1;
}
/* IconField wrapper must be position:relative for the absolutely-
positioned SearchIcon to anchor against the input. PrimeVue sets
this on the base .p-iconfield rule but if our padding on .p-tree-
filter wins the cascade without this, the icon can escape its
intended slot. Belt-and-braces. */
.p-treeselect-overlay .p-tree-filter,
.p-treeselect-overlay .p-iconfield {
position: relative !important;
}
/* SearchIcon — anchored to the input's right edge, vertically centred.
The IconField usually handles this but our overrides to the parent's
padding occasionally desync the default anchor. Pinning it here
keeps the glyph aligned regardless of theme tweaks.
`line-height: 0` + explicit flex centering + sized child SVG together
guarantee vertical centre — without them the span's intrinsic line-
box height pushes the icon off-centre (that's why it previously
rendered near the top of the input). */
.p-treeselect-overlay .p-tree-filter .p-inputicon,
.p-treeselect-overlay .p-iconfield .p-inputicon {
position: absolute !important;
right: 22px !important;
top: 50% !important;
transform: translateY(-50%) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #6b7db8 !important;
width: 14px !important;
height: 14px !important;
line-height: 0 !important;
font-size: 14px !important;
pointer-events: none;
}
.p-treeselect-overlay .p-tree-filter .p-inputicon > svg,
.p-treeselect-overlay .p-iconfield .p-inputicon > svg {
width: 14px !important;
height: 14px !important;
display: block !important;
}
.p-treeselect-overlay .p-tree {
background: #ffffff !important;
border: none !important;
padding: 4px 0 !important;
max-height: 300px;
overflow-y: auto;
}
.p-treeselect-overlay .p-tree-node-content {
display: flex !important;
align-items: center !important;
/* 10px gap matches BaseMultiSelect's option spacing — gives the
checkbox room to breathe from the label text. */
gap: 10px !important;
padding: 7px 10px !important;
line-height: 1.4 !important;
font-size: 13.5px !important;
color: #1a1d35 !important;
cursor: pointer !important;
border-radius: 4px;
margin: 1px 4px;
}
.p-treeselect-overlay .p-tree-node-content:hover,
.p-treeselect-overlay .p-tree-node-content.p-focus { background-color: #f5f6fb !important;
}
/* Group (parent) rows — slightly heavier so tree hierarchy reads at a glance. */
.p-treeselect-overlay .p-tree-node-children .p-tree-node-content { padding-left: 20px !important;
}
.p-treeselect-overlay > .p-tree > .p-tree-root > .p-tree-node > .p-tree-node-content {
font-weight: 600;
color: #1a1d35 !important;
}
/* Checkbox styling — matches BaseMultiSelect. */
.p-treeselect-overlay .p-checkbox {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.p-treeselect-overlay .p-checkbox-box {
width: 16px;
height: 16px;
border: 1.5px solid #c0c1cb;
border-radius: 4px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.15s, background 0.15s;
}
/* PrimeVue 4 puts the state modifier on the ROOT .p-checkbox wrapper
(`.p-checkbox-checked` / `.p-checkbox-indeterminate`), NOT on the
`.p-checkbox-box` child — this was why the box stayed white even
when ticked. Target the wrapper, then style the nested box. Keep
both patterns (wrapper-driven + box-adjacent) in case a future
PrimeVue release migrates the modifier back onto the box. */
.p-treeselect-overlay .p-checkbox.p-checkbox-checked > .p-checkbox-box,
.p-treeselect-overlay .p-checkbox.p-checkbox-indeterminate > .p-checkbox-box,
.p-treeselect-overlay .p-checkbox-box.p-checked,
.p-treeselect-overlay .p-checkbox-box.p-indeterminate,
.p-treeselect-overlay .p-checkbox-box.p-highlight {
background: #da2128 !important;
border-color: #da2128 !important;
}
.p-treeselect-overlay .p-checkbox.p-checkbox-checked > .p-checkbox-box svg,
.p-treeselect-overlay .p-checkbox.p-checkbox-indeterminate > .p-checkbox-box svg,
.p-treeselect-overlay .p-checkbox-box.p-checked svg,
.p-treeselect-overlay .p-checkbox-box.p-indeterminate svg,
.p-treeselect-overlay .p-checkbox-box.p-highlight svg {
color: #fff !important;
}
/* The CheckboxIcon in PrimeVue 4 is sometimes rendered via a CSS mask
whose colour follows the icon's `color`, and sometimes as an inline
SVG whose stroke follows `currentColor`. Covering both so the tick
mark reads as white against the red fill in every build. */
.p-treeselect-overlay .p-checkbox.p-checkbox-checked > .p-checkbox-box .p-checkbox-icon,
.p-treeselect-overlay .p-checkbox.p-checkbox-indeterminate > .p-checkbox-box .p-checkbox-icon {
color: #ffffff !important;
fill: #ffffff !important;
}
.p-treeselect-overlay .p-treeselect-empty-message {
padding: 12px 14px !important;
font-size: 13px !important;
color: #9098b0 !important;
background-color: #ffffff !important;
}
/* ── tagsPosition='below' — matches BaseMultiSelect's recipe ── */
.bp-treesel-trigger-placeholder { color: #9098b0;
}
.bp-treesel-trigger-count { color: #1a1d35; font-weight: 600;
}
.bp-treesel-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
max-height: 120px;
overflow-y: auto;
}
.bp-treesel-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 4px 4px 10px;
background: rgba(218, 33, 40, 0.08);
color: #da2128;
border-radius: 14px;
font-size: 12px;
font-weight: 600;
line-height: 1;
}
.bp-treesel-tag-remove {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: 50%;
color: #da2128;
cursor: pointer;
padding: 0;
transition: background 0.15s, color 0.15s;
}
.bp-treesel-tag-remove:hover {
background: #da2128;
color: #fff;
}
.bp-textarea {
padding: 9px 12px;
border: 1px solid #c0c1cb;
border-radius: 8px;
font-size: 13.5px;
color: #1a1d35;
outline: none;
transition: border-color 0.15s;
font-family: inherit;
width: 100%;
box-sizing: border-box;
min-height: 80px;
}
.bp-textarea:focus {
border-color: #da2128;
box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
}
.bp-textarea--error { border-color: #b91c1c !important;
}
.bp-textarea--disabled { background: #f8f9fc; color: #9098b0; cursor: not-allowed;
}
/* ── Wrapper ── */
.bp-tbl-wrap { display: flex; flex-direction: column;
}
.bp-tbl-scroll { overflow-x: auto; border-radius: 10px; border: 1px solid #e4e7f0;
}
/* ── Table base ── */
.bp-tbl {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 12px;
font-weight: 600;
color: #1a1d35;
background: #fff;
min-width: 820px;
}
/* ── Header: sort row ── */
.bp-tbl-thead-sort { background: #191a37;
}
.bp-tbl-th {
padding: 0;
border-bottom: 2px solid #2d2f52;
white-space: nowrap;
font-weight: 700;
font-size: 11px;
color: #fff;
text-transform: uppercase;
letter-spacing: 0.4px;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.bp-tbl-th--sortable { cursor: pointer;
}
.bp-tbl-th--sortable:hover { background: #23254a;
}
.bp-tbl-th--left { text-align: left;
}
.bp-tbl-th--right { text-align: right;
}
.bp-tbl-th--center { text-align: center;
}
.bp-tbl-th-inner {
display: flex;
align-items: center;
gap: 5px;
padding: 11px 14px;
}
.bp-tbl-th--right .bp-tbl-th-inner { justify-content: flex-end;
}
.bp-tbl-th--center .bp-tbl-th-inner { justify-content: center;
}
.bp-tbl-th-label { flex: 1;
}
.bp-tbl-sort-icon { color: #da2128; flex-shrink: 0; display: flex;
}
.bp-tbl-sort-icon--idle { color: #4e5a82;
}
/* ── Header: search row ── */
.bp-tbl-thead-search { background: #f9fafc;
}
.bp-tbl-th-search {
padding: 6px 8px;
border-bottom: 1px solid #e4e7f0;
vertical-align: middle;
}
.bp-tbl-search-wrap {
display: flex;
align-items: center;
gap: 5px;
background: #fff;
border: 1px solid #d1d5e8;
border-radius: 6px;
padding: 0 7px;
height: 28px;
transition: border-color 0.15s;
}
.bp-tbl-search-wrap:focus-within {
border-color: #da2128;
box-shadow: 0 0 0 2px rgba(218, 33, 40, 0.08);
}
.bp-tbl-search-icon { color: #9098b0; flex-shrink: 0;
}
.bp-tbl-search-input {
border: none;
outline: none;
font-size: 11.5px;
color: #1a1d35;
background: transparent;
width: 100%;
min-width: 0;
font-family: inherit;
}
.bp-tbl-search-input::-moz-placeholder { color: #c4c9de;
}
.bp-tbl-search-input::placeholder { color: #c4c9de;
}
.bp-tbl-search-clear {
background: none;
border: none;
cursor: pointer;
color: #9098b0;
font-size: 14px;
line-height: 1;
padding: 0;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
}
.bp-tbl-search-clear:hover { color: #da2128;
}
/* ── Body rows ── */
.bp-tbl-row { transition: background 0.12s;
}
.bp-tbl-row--clickable { cursor: pointer;
}
.bp-tbl-row:nth-child(odd) { background: #fff;
}
.bp-tbl-row:nth-child(even) { background: #f4f4f7;
}
.bp-tbl-row:hover { background: #fdf5f5;
}
.bp-tbl-td {
padding: 11px 14px;
vertical-align: middle;
}
.bp-tbl-td--clip { overflow: hidden;
}
.bp-tbl-td--right { text-align: right;
}
.bp-tbl-td--center { text-align: center;
}
.bp-tbl-cell-text {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ── Status badge ── */
.bp-tbl-status {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
white-space: nowrap;
}
.bp-tbl-status-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
}
.bp-tbl-status--draft { background: rgba(250,204,21,0.15); color: #b45309;
}
.bp-tbl-status--draft .bp-tbl-status-dot { background: #f59e0b;
}
.bp-tbl-status--active { background: rgba(34,197,94,0.12); color: #15803d;
}
.bp-tbl-status--active .bp-tbl-status-dot { background: #22c55e;
}
.bp-tbl-status--closed { background: rgba(107,114,128,0.12); color: #374151;
}
.bp-tbl-status--closed .bp-tbl-status-dot { background: #9ca3af;
}
.bp-tbl-status--approved { background: rgba(34,197,94,0.12); color: #15803d;
}
.bp-tbl-status--approved .bp-tbl-status-dot { background: #22c55e;
}
.bp-tbl-status--completed { background: rgba(59,130,246,0.12); color: #1d4ed8;
}
.bp-tbl-status--completed .bp-tbl-status-dot { background: #3b82f6;
}
/* ── Loading skeleton ── */
.bp-tbl-row--skeleton { pointer-events: none;
}
.bp-tbl-skeleton {
height: 14px;
border-radius: 6px;
background: linear-gradient(90deg, #f0f1f5 25%, #e8eaf2 50%, #f0f1f5 75%);
background-size: 200% 100%;
animation: bp-tbl-shimmer 1.4s infinite;
}
@keyframes bp-tbl-shimmer {
0% { background-position: 200% 0;
}
100% { background-position: -200% 0;
}
}
/* ── Empty state ── */
.bp-tbl-td-empty { text-align: center; padding: 48px 20px;
}
.bp-tbl-empty { display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.bp-tbl-empty-icon { color: #c4c9de;
}
.bp-tbl-empty p { font-size: 13px; color: #9098b0; margin: 0;
}
/* ── Footer ── */
.bp-tbl-footer { display: flex; justify-content: flex-end; padding: 8px 4px 0;
}
.bp-tbl-count { font-size: 11.5px; color: #9098b0;
}
/* ── Cell alignment ── */
.bp-tbl-td--center { text-align: center;
}
.bp-tbl-td--right { text-align: right;
}
/* ── Text truncation with ellipsis for default-rendered cells ── */
.bp-tbl-td--clip .bp-tbl-cell-text {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
/* ── Expandable parent row ── */
.bp-tbl-row--expandable { cursor: pointer;
}
/* ── Expand column cell wrapper ── */
.bp-tbl-expand-cell {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
}
/* ── Expand chevron button ── */
.bp-tbl-expand-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
border: 1.5px solid #d1d5e8;
background: #fff;
color: #6b7db8;
cursor: pointer;
padding: 0;
font-family: inherit;
transition: background 0.15s, border-color 0.15s, color 0.15s;
flex-shrink: 0;
}
.bp-tbl-expand-btn svg {
transition: transform 0.2s ease;
}
.bp-tbl-expand-btn:hover {
background: #f5f6fb;
border-color: #b0b7d8;
color: #1a1d35;
}
.bp-tbl-expand-btn--open {
background: #1a1d35;
border-color: #1a1d35;
color: #fff;
}
.bp-tbl-expand-btn--open:hover {
background: #2d3152;
border-color: #2d3152;
}
.bp-tbl-expand-btn--open svg {
transform: rotate(90deg);
}
/* ── Version count badge ── */
.bp-tbl-expand-count {
position: absolute;
top: -4px;
right: -4px;
min-width: 15px;
height: 15px;
padding: 0 3px;
border-radius: 99px;
background: #da2128;
color: #fff;
font-size: 8.5px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
pointer-events: none;
}
/* ── Child rows — same appearance as parent ── */
.bp-tbl-row--child { background: inherit;
}
.bp-tbl-cell-text--muted { color: #c4c9de !important;
}
.bp-tabbar {
border-bottom: 1px solid #e4e7f0;
background: #fff;
overflow-x: hidden;
}
.bp-tabbar-row {
display: flex;
gap: 2px;
padding: 0 4px;
}
.bp-tabbar-btn {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
padding: 14px 14px 11px;
border: none;
border-bottom: 3px solid transparent;
background: transparent;
cursor: pointer;
border-radius: 8px 8px 0 0;
white-space: nowrap;
font-family: inherit;
transition: background 0.15s;
flex-shrink: 0;
}
.bp-tabbar-btn:hover { background: #f8f9fc;
}
.bp-tabbar-btn--active {
border-bottom-color: #da2128;
background: #fff5f5;
}
.bp-tabbar-btn--disabled {
opacity: 0.38;
cursor: not-allowed;
pointer-events: none;
}
.bp-tabbar-icon {
width: 34px;
height: 34px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
background: #f0f1f5;
color: #6b7db8;
flex-shrink: 0;
transition: background 0.15s, color 0.15s;
}
.bp-tabbar-btn--active .bp-tabbar-icon {
background: #fee2e2;
color: #da2128;
}
.bp-tabbar-text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
}
.bp-tabbar-code {
font-size: 11px;
font-weight: 700;
color: #4e5a82;
letter-spacing: 0.3px;
}
.bp-tabbar-btn--active .bp-tabbar-code { color: #da2128;
}
.bp-tabbar-name {
font-size: 9.5px;
color: #9098b0;
}
.bp-tabbar-name--solo {
font-size: 12px;
font-weight: 600;
color: #4e5a82;
}
.bp-tabbar-btn--active .bp-tabbar-name { color: #da2128;
}
.bp-tabbar-count {
position: absolute;
top: 5px;
right: 5px;
min-width: 18px;
height: 20px;
border-radius: 9px;
background: #e4e7f0;
color: #1a1d35;
font-size: 10px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
padding: 5px 10px;
line-height: 1;
pointer-events: none;
}
.bp-tabbar-btn--active .bp-tabbar-count {
background: #da2128;
color: #fff;
}
.bp-rs-box {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
height: 34px;
border: 1px solid #c0c1cb;
border-radius: 8px;
padding: 0 12px;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.bp-rs-val {
font-size: 11.5px;
font-weight: 700;
color: #da2128;
white-space: nowrap;
flex-shrink: 0;
}
.bp-rs-track-wrap {
position: relative;
flex: 1;
height: 24px;
display: flex;
align-items: center;
cursor: pointer;
min-width: 0;
touch-action: none;
}
.bp-rs-track {
position: absolute;
left: 0;
right: 0;
height: 4px;
border-radius: 99px;
background: #e4e7f0;
}
.bp-rs-fill {
position: absolute;
height: 4px;
border-radius: 99px;
background: #da2128;
pointer-events: none;
}
.bp-rs-handle {
position: absolute;
width: 18px;
height: 18px;
border-radius: 50%;
background: #da2128;
border: 2px solid #fff;
box-shadow: 0 1px 5px rgba(218, 33, 40, 0.35);
transform: translateX(-50%);
top: 50%;
margin-top: -9px;
cursor: grab;
pointer-events: none;
}
.bp-rs-track-wrap:active .bp-rs-handle { cursor: grabbing;
}
.bp-rs-box--active {
border-color: #da2128;
box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
}
.bp-filter-card {
background: #fff;
border: 1px solid #e4e7f0;
border-radius: 10px;
}
.bp-filter-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 18px;
}
.bp-filter-bar-left {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
}
.bp-filter-icon { color: #da2128; flex-shrink: 0;
}
.bp-filter-title {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #4e5a82;
white-space: nowrap;
flex-shrink: 0;
}
.bp-filter-badge {
display: inline-flex;
align-items: center;
background: #da2128;
color: #fff;
font-size: 10.5px;
font-weight: 700;
border-radius: 99px;
padding: 2px 8px;
white-space: nowrap;
flex-shrink: 0;
}
.bp-filter-clear {
background: none;
border: 1px solid #d1d5e8;
border-radius: 6px;
padding: 3px 10px;
font-size: 11.5px;
font-weight: 600;
color: #4e5a82;
cursor: pointer;
font-family: inherit;
transition: border-color 0.15s, color 0.15s;
white-space: nowrap;
flex-shrink: 0;
}
.bp-filter-clear:hover { border-color: #da2128; color: #da2128;
}
.bp-filter-toggle {
display: inline-flex;
align-items: center;
gap: 5px;
background: none;
border: 1px solid #d1d5e8;
border-radius: 6px;
padding: 4px 12px;
font-size: 12px;
font-weight: 600;
color: #4e5a82;
cursor: pointer;
font-family: inherit;
white-space: nowrap;
transition: border-color 0.15s, color 0.15s;
flex-shrink: 0;
}
.bp-filter-toggle:hover { border-color: #da2128; color: #da2128;
}
.bp-filter-body {
border-top: 1px solid #e4e7f0;
padding: 16px 18px 14px;
}
.bp-filter-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px 16px;
align-items: end;
}
/* ── Active filter chips row (holds both groups + flat singles) ── */
.bp-filter-chips {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
flex: 1;
min-width: 0;
padding-bottom: 0;
}
/* ── Grouped chips (one bordered container per filter kind) ── */
.bp-filter-group {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
padding: 3px 6px 3px 3px;
background: #ffffff;
border: 1px solid #e4e7f0;
border-radius: 16px;
box-shadow: 0 1px 1px rgba(16, 24, 40, 0.03);
max-width: 100%;
}
.bp-filter-group-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 8px 2px 7px;
border-radius: 99px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
white-space: nowrap;
}
.bp-filter-group-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
}
.bp-filter-group-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 2px 1px 9px;
border-radius: 99px;
font-size: 11.5px;
font-weight: 600;
white-space: nowrap;
max-width: 180px;
}
.bp-filter-group-pill-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bp-filter-group-pill-remove {
display: flex;
align-items: center;
justify-content: center;
width: 15px;
height: 15px;
border-radius: 50%;
border: 0;
background: rgba(255, 255, 255, 0.65);
color: inherit;
cursor: pointer;
font-size: 13px;
line-height: 1;
padding: 0;
font-family: inherit;
opacity: 0.75;
transition: background 0.12s, opacity 0.12s, color 0.12s;
}
.bp-filter-group-pill-remove:hover {
background: rgba(218, 33, 40, 0.9);
color: #ffffff;
opacity: 1;
}
/* Palette — mirrors forecast's compliance-report chip colour vocabulary.
Each colour has three variants: badge (bg + text), dot (bg), pill (bg + text).
Add new colours by extending COLOR_WHITELIST in the script AND defining
the three selectors below for the same colour name. */
.bp-filter-group-badge--sky { background: #e0f2fe; color: #075985;
}
.bp-filter-group-dot--sky { background: #0ea5e9;
}
.bp-filter-group-pill--sky { background: #f0f9ff; color: #075985; box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.25);
}
.bp-filter-group-badge--violet { background: #ede9fe; color: #5b21b6;
}
.bp-filter-group-dot--violet { background: #8b5cf6;
}
.bp-filter-group-pill--violet { background: #f5f3ff; color: #5b21b6; box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.25);
}
.bp-filter-group-badge--teal { background: #ccfbf1; color: #115e59;
}
.bp-filter-group-dot--teal { background: #14b8a6;
}
.bp-filter-group-pill--teal { background: #f0fdfa; color: #115e59; box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.25);
}
.bp-filter-group-badge--amber { background: #fef3c7; color: #92400e;
}
.bp-filter-group-dot--amber { background: #f59e0b;
}
.bp-filter-group-pill--amber { background: #fffbeb; color: #92400e; box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.25);
}
.bp-filter-group-badge--emerald { background: #d1fae5; color: #065f46;
}
.bp-filter-group-dot--emerald { background: #10b981;
}
.bp-filter-group-pill--emerald { background: #ecfdf5; color: #065f46; box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.25);
}
.bp-filter-group-badge--fuchsia { background: #fae8ff; color: #86198f;
}
.bp-filter-group-dot--fuchsia { background: #d946ef;
}
.bp-filter-group-pill--fuchsia { background: #fdf4ff; color: #86198f; box-shadow: inset 0 0 0 1px rgba(217, 70, 239, 0.25);
}
.bp-filter-group-badge--red { background: #fee2e2; color: #991b1b;
}
.bp-filter-group-dot--red { background: #ef4444;
}
.bp-filter-group-pill--red { background: #fef2f2; color: #991b1b; box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.25);
}
.bp-filter-group-badge--slate { background: #e2e8f0; color: #334155;
}
.bp-filter-group-dot--slate { background: #64748b;
}
.bp-filter-group-pill--slate { background: #f1f5f9; color: #334155; box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.25);
}
/* ── Flat single-value chips (back-compat with pre-groups consumers) ── */
.bp-filter-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 4px 2px 8px;
border-radius: 99px;
background: rgba(218, 33, 40, 0.07);
border: 1px solid rgba(218, 33, 40, 0.2);
white-space: nowrap;
flex-shrink: 0;
}
.bp-filter-tag-label {
font-size: 10.5px;
font-weight: 700;
color: #da2128;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.bp-filter-tag-value {
font-size: 11px;
font-weight: 600;
color: #1a1d35;
}
.bp-filter-tag-remove {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
border: none;
background: none;
cursor: pointer;
font-size: 13px;
line-height: 1;
color: #9098b0;
padding: 0;
font-family: inherit;
transition: background 0.12s, color 0.12s;
}
.bp-filter-tag-remove:hover { background: rgba(218, 33, 40, 0.12); color: #da2128;
}
.bp-alert-overlay {
position: fixed;
inset: 0;
/* Topmost interactive layer — alerts must render above every modal,
popup, picker, etc. Matches BaseToast (9999) so notifications and
alerts share the same "always on top" tier. */
z-index: 9999;
background: rgba(0, 0, 0, 0.45);
}
.bp-alert {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10000;
width: 480px;
min-width: 360px;
max-width: 95vw;
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
}
/* ── Header ── */
.bp-alert-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
background: #1a1d35;
cursor: grab;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
gap: 12px;
flex-shrink: 0;
height: 40px;
}
.bp-alert-header:active { cursor: grabbing;
}
.bp-alert-header-left {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
flex: 1;
}
.bp-alert-header-icon {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
flex-shrink: 0;
}
.bp-alert-title {
font-size: 14px;
font-weight: 600;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bp-alert-close {
flex-shrink: 0;
width: 28px;
height: 28px;
border: none;
background: rgba(255, 255, 255, 0.1);
color: #fff;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
}
.bp-alert-close:hover { background: rgba(255, 255, 255, 0.22);
}
/* ── Content ── */
.bp-alert-content {
display: flex;
flex-direction: row;
min-height: 135px;
flex: 1;
}
.bp-alert-type-panel {
display: flex;
align-items: flex-start;
justify-content: center;
width: 68px;
padding-top: 20px;
flex-shrink: 0;
}
.bp-alert-body {
flex: 1;
padding: 20px;
font-size: 13.5px;
color: #1a1d35;
line-height: 1.65;
word-break: break-word;
overflow-y: auto;
}
/* ── Footer ── */
.bp-alert-footer {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
padding: 10px 20px;
border-top: 1px solid #e4e7f0;
background: #f8f9fc;
flex-shrink: 0;
}
/* ── Responsive ── */
@media (max-width: 480px) {
.bp-alert { width: 95vw; min-width: 0;
}
.bp-alert-footer { flex-direction: column-reverse; align-items: stretch;
}
.bp-alert-footer .bp-btn { width: 100%; justify-content: center;
}
}
.bp-toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
width: 340px;
max-width: calc(100vw - 40px);
pointer-events: none;
}
.bp-toast-list {
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
}
.bp-toast {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 12px 14px 14px;
background: #fff;
border-radius: 10px;
border-left: 4px solid;
box-shadow: 0 4px 20px rgba(25, 26, 55, 0.13);
pointer-events: all;
min-height: 52px;
width: 100%;
box-sizing: border-box;
}
.bp-toast-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 20px;
}
.bp-toast-message {
flex: 1;
font-size: 13.5px;
color: #1a1d35;
line-height: 1.5;
margin: 0;
word-break: break-word;
}
.bp-toast-close {
flex-shrink: 0;
width: 26px;
height: 26px;
border: none;
background: rgba(0, 0, 0, 0.06);
color: #6b7280;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s;
padding: 0;
}
.bp-toast-close:hover {
background: rgba(0, 0, 0, 0.12);
color: #1a1d35;
}
/* ── Transition animations ── */
.bp-toast-enter-active {
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.bp-toast-leave-active {
transition: all 0.25s ease-in;
position: absolute;
right: 0;
left: 0;
}
.bp-toast-enter-from {
opacity: 0;
transform: translateX(110%);
}
.bp-toast-leave-to {
opacity: 0;
transform: translateX(110%);
}
.bp-toast-move {
transition: transform 0.22s ease;
}
/* ── Responsive ── */
@media (max-width: 480px) {
.bp-toast-container {
top: 12px;
right: 12px;
left: 12px;
width: auto;
max-width: 100%;
}
}
/* ── BaseLoader overlay ── */
/* Full-viewport dimmer that blocks all interaction while any load is
active. z-index sits above BaseToast (9999) so a loader triggered
from within a toast-heavy screen still lands on top. */
.bp-loader-overlay {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
background: rgba(15, 17, 40, 0.42);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.bp-loader-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 26px 34px;
background: #ffffff;
border-radius: 14px;
box-shadow: 0 12px 40px rgba(15, 17, 40, 0.22);
min-width: 200px;
max-width: min(80vw, 420px);
}
/* Ring spinner — same `bp-spin` keyframe used by BaseButton so the
whole app shares a single spin animation. Colour is the brand red
(#da2128) to stay on-tone with primary actions and the required-
field indicator. */
.bp-loader-spinner {
width: 44px;
height: 44px;
border: 4px solid rgba(218, 33, 40, 0.18);
border-top-color: #da2128;
border-radius: 50%;
animation: bp-spin 0.8s linear infinite;
flex-shrink: 0;
}
.bp-loader-text {
margin: 0;
font-size: 13.5px;
font-weight: 600;
color: #1a1d35;
text-align: center;
line-height: 1.5;
word-break: break-word;
min-height: 20px;
}
/* Enter/leave — quick fade so the overlay never feels heavy. Card
also scales in slightly to give a subtle "arriving" cue. */
.bp-loader-enter-active,
.bp-loader-leave-active {
transition: opacity 0.18s ease;
}
.bp-loader-enter-active .bp-loader-card,
.bp-loader-leave-active .bp-loader-card {
transition: transform 0.18s ease, opacity 0.18s ease;
}
.bp-loader-enter-from,
.bp-loader-leave-to {
opacity: 0;
}
.bp-loader-enter-from .bp-loader-card,
.bp-loader-leave-to .bp-loader-card {
opacity: 0;
transform: scale(0.94);
}
/* Mobile — tighten the card so it fits comfortably on narrow screens. */
@media (max-width: 480px) {
.bp-loader-card {
padding: 20px 24px;
min-width: 160px;
max-width: calc(100vw - 32px);
}
.bp-loader-spinner {
width: 38px;
height: 38px;
border-width: 3px;
}
}
/* ── Overlay ── */
.bp-popup-overlay {
position: fixed;
inset: 0;
background: rgba(15, 17, 40, 0.55);
display: flex;
align-items: center;
justify-content: center;
z-index: 1100;
padding: 16px;
}
/* ── Dialog ── */
.bp-popup-dialog {
background: #fff;
border-radius: 14px;
box-shadow: 0 16px 48px rgba(15, 17, 40, 0.22);
width: 100%;
max-height: 90vh;
display: flex;
flex-direction: column;
}
/* ── Header ── */
.bp-popup-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px 15px;
border-bottom: 1px solid #d0d4e4;
gap: 12px;
}
.bp-popup-title {
font-size: 20px;
font-weight: 600;
color: #1a1d35;
line-height: 1.3;
}
.bp-popup-close {
background: transparent;
border: none;
cursor: pointer;
padding: 5px;
border-radius: 6px;
color: #4e5a82;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s, color 0.15s;
}
.bp-popup-close:hover {
background: #eeeef5;
color: #1a1d35;
}
/* ── Body ── */
.bp-popup-body {
padding: 20px;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
/* ── Transition ── */
.bp-popup-fade-enter-active,
.bp-popup-fade-leave-active {
transition: opacity 0.2s ease;
}
.bp-popup-fade-enter-active .bp-popup-dialog,
.bp-popup-fade-leave-active .bp-popup-dialog {
transition: transform 0.2s ease, opacity 0.2s ease;
}
.bp-popup-fade-enter-from,
.bp-popup-fade-leave-to {
opacity: 0;
}
.bp-popup-fade-enter-from .bp-popup-dialog,
.bp-popup-fade-leave-to .bp-popup-dialog {
transform: scale(0.96) translateY(-8px);
opacity: 0;
}
/* ── Mobile ── */
@media (max-width: 480px) {
.bp-popup-dialog { border-radius: 10px;
}
.bp-popup-body { padding: 16px;
}
}
/* ── Container (multi-mode) ── */
.bp-search-multi.p-autocomplete {
display: block;
width: 100%;
}
.bp-search-multi-wrap {
position: relative;
width: 100%;
}
.bp-search-multi-icon {
position: absolute;
right: 12px;
top: 14px;
color: #6b7db8;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 1;
}
.bp-search-multi .p-autocomplete-input-multiple {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 8px 36px 8px 12px;
border: 1px solid #d1d5e8;
border-radius: 8px;
background: #fff;
min-height: 44px;
/* Cap chip-area height so the popup doesn't grow indefinitely when many users are added */
max-height: 120px;
overflow-y: auto;
width: 100%;
cursor: text;
list-style: none;
margin: 0;
transition: border-color 0.15s, box-shadow 0.15s;
}
/* When tagsPosition='below', suppress chips inside the input — they render in the list below */
.bp-search-multi--tags-below .p-autocomplete-chip-item {
display: none !important;
}
.bp-search-multi--error .p-autocomplete-input-multiple {
border-color: #b91c1c;
}
.bp-search-multi .p-autocomplete-input-multiple:focus-within {
border-color: #5b6af0;
box-shadow: 0 0 0 3px rgba(91, 106, 240, 0.12);
outline: none;
}
/* ── Input slot (the typing area) ── */
/* flex-basis 100% forces the input onto its own row so "Add more" sits below the chips */
.bp-search-multi .p-autocomplete-input-chip {
flex: 1 1 100%;
min-width: 100%;
padding: 0;
list-style: none;
}
.bp-search-multi .p-autocomplete-input-chip input,
.bp-search-multi .p-autocomplete-input-multiple input {
border: none;
outline: none;
background: transparent;
font-size: 13.5px;
color: #1a1d35;
width: 100%;
padding: 4px 2px;
}
.bp-search-multi .p-autocomplete-input-chip input::-moz-placeholder, .bp-search-multi .p-autocomplete-input-multiple input::-moz-placeholder {
color: #6b7db8;
}
.bp-search-multi .p-autocomplete-input-chip input::placeholder,
.bp-search-multi .p-autocomplete-input-multiple input::placeholder {
color: #6b7db8;
}
/* ── Chips (PrimeVue chip token) ── */
.bp-search-multi .p-autocomplete-chip {
background: #eef2ff !important;
border: 1px solid #d1d9f3 !important;
border-radius: 999px !important;
padding: 2px 4px 2px 2px !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
font-size: 13px !important;
color: #1a1d35 !important;
list-style: none !important;
}
.bp-search-multi .p-autocomplete-chip:hover {
background: #e0e7ff !important;
border-color: #b8c4ee !important;
}
/* Hide PrimeVue's default × icon when using our custom slot button */
.bp-search-multi .p-autocomplete-chip-icon { display: none !important;
}
/* ── Chip content (custom slot) ── */
.bp-search-multi-chip {
display: inline-flex;
align-items: center;
gap: 6px;
}
.bp-search-multi-chip-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
border: none;
background: transparent;
color: #4e5a82;
cursor: pointer;
padding: 0;
margin-left: 2px;
transition: background 0.15s, color 0.15s;
}
.bp-search-multi-chip-remove:hover {
background: #da2128;
color: #fff;
}
.bp-search-multi-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
font-size: 10.5px;
font-weight: 600;
color: #fff;
flex-shrink: 0;
letter-spacing: 0.2px;
}
.bp-search-multi-chip-label {
font-size: 13px;
color: #1a1d35;
line-height: 1.2;
}
/* ── Loader ──
Push OUT of the input on the right (mirrors BaseSearchSelect's loader
placement in `.bp-search-single .p-autocomplete-loader`). PrimeVue's
default for multi-mode drops the loader inside the input on the LEFT
where it overlaps typed text; the negative `right` moves it to the
gap between this field and the next form control, 2px clearance from
the input's right border. `top: 50%` + `margin-top: -9px` centres it
vertically regardless of chip-row growth. `!important` overrides
PrimeVue's own logical-property positioning (inset-inline-start).
Colour: brand red matches BaseLoader / BaseButton spinners for a
coherent "work-in-progress" indicator across the app. */
.bp-search-multi .p-autocomplete-loader {
left: auto !important;
right: -19px !important;
inset-inline-start: auto !important;
inset-inline-end: -19px !important;
top: 50% !important;
width: 18px;
height: 18px;
margin-top: -9px;
color: #da2128;
}
/* ── Overlay panel ── */
.p-autocomplete-overlay {
/* PrimeVue 4 theme variables don't resolve consistently — force opaque surface */
background: #fff !important;
border: 1px solid #d1d5e8 !important;
border-radius: 8px;
box-shadow: 0 8px 20px rgba(15, 17, 40, 0.12) !important;
margin-top: 4px;
padding: 8px 4px;
max-height: 280px;
overflow-y: auto;
/* PrimeVue applies z-index inline (default ~1000); override to sit above BasePopup at 1100 */
z-index: 1300 !important;
}
.p-autocomplete-list {
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
}
.p-autocomplete-option {
padding: 8px 10px !important;
border-radius: 6px !important;
cursor: pointer;
font-size: 13.5px;
color: #1a1d35 !important;
list-style: none;
}
.p-autocomplete-option:hover,
.p-autocomplete-option.p-autocomplete-option-focus,
.p-autocomplete-option.p-focus {
background: #eef2ff !important;
color: #1a1d35 !important;
}
.bp-search-multi-option {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.bp-search-multi-opt-text { min-width: 0;
}
.bp-search-multi-opt-name {
font-size: 13.5px;
color: #1a1d35;
font-weight: 500;
line-height: 1.25;
}
.bp-search-multi-opt-sub {
font-size: 11.5px;
color: #6b7db8;
line-height: 1.25;
margin-top: 1px;
}
.bp-search-multi-empty {
padding: 12px;
font-size: 13px;
color: #6b7db8;
text-align: center;
}
/* ── Below-mode pill chips (tagsPosition='below') ── */
.bp-search-multi-below {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 6px;
max-height: 120px;
overflow-y: auto;
padding: 2px;
}
.bp-search-multi-below-chip {
display: inline-flex;
align-items: center;
gap: 4px;
background: #eef2ff;
border: 1px solid #d1d9f3;
border-radius: 999px;
padding: 4px 4px 4px 12px;
font-size: 13px;
color: #1a1d35;
line-height: 1.2;
transition: background 0.15s, border-color 0.15s;
}
.bp-search-multi-below-chip:hover {
background: #e0e7ff;
border-color: #b8c4ee;
}
.bp-search-multi-below-label {
white-space: nowrap;
}
.bp-search-multi-below-remove {
width: 20px;
height: 20px;
border-radius: 50%;
border: none;
background: transparent;
color: #4e5a82;
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s, color 0.15s;
}
.bp-search-multi-below-remove:hover {
background: #da2128;
color: #fff;
}
.bp-search-single-wrap {
position: relative;
width: 100%;
}
.bp-search-single.p-autocomplete {
display: block;
width: 100%;
}
.bp-search-single .p-autocomplete-input {
/* Fixed 34px height (border-box) — kept in lockstep with BaseInput
and BaseSelect so mixed form rows align on the baseline. Right
padding (32px) preserves clearance for the clear-× / search-icon
that render absolutely-positioned inside .bp-search-single-wrap. */
height: 34px;
box-sizing: border-box;
width: 100%;
padding: 0 32px 0 12px;
font-size: 13.5px;
color: #1a1d35;
border: 1px solid #d1d5e8;
border-radius: 8px;
background: #fff;
transition: border-color 0.15s, box-shadow 0.15s;
outline: none;
}
.bp-search-single .p-autocomplete-input::-moz-placeholder {
color: #6b7db8;
}
.bp-search-single .p-autocomplete-input::placeholder {
color: #6b7db8;
}
.bp-search-single .p-autocomplete-input:focus {
border-color: #5b6af0;
box-shadow: 0 0 0 3px rgba(91, 106, 240, 0.12);
}
.bp-search-single--error .p-autocomplete-input {
border-color: #b91c1c;
}
.bp-search-single-clear {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
border: none;
background: transparent;
color: #4e5a82;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background 0.15s, color 0.15s;
}
.bp-search-single-clear:hover {
background: #da2128;
color: #fff;
}
.bp-search-single-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: #6b7db8;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.bp-search-single-create {
padding: 6px 4px;
}
.bp-search-single-create-link {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border: none;
padding: 6px 10px;
font-size: 12.5px;
font-weight: 600;
color: #5b6af0;
cursor: pointer;
border-radius: 6px;
transition: background 0.15s, color 0.15s;
}
.bp-search-single-create-link:hover {
background: #eef0ff;
color: #3b48d0;
}
/* PrimeVue AutoComplete's built-in loader (SpinnerIcon rendered when
the :loading prop is true).
Position: PrimeVue's default (`inset-inline-end:
dt('autocomplete.padding.x')`) places the loader inside the input,
where it overlaps the custom Q search icon we render at right: 10px.
A negative `right` pushes the loader OUT of the input entirely so it
sits in the gap between this field and the next form control, with a
2px clearance from the input's right border. Width 18px + right -20px
→ loader left edge at (container_right + 2px).
Size: the SpinnerIcon SVG is a filled ring path, so its visible stroke
thickness scales with icon size. `.p-icon`'s default (`dt('icon.size')`)
can render the arc quite thin — pinning to 18px keeps it visually
consistent with the rest of the app's loading indicators.
Colour: SpinnerIcon fills its path with `fill="currentColor"`, so
setting `color` on the loader element switches it to brand red
(#da2128) — the same shade used by BaseLoader's page-level ring and
BaseButton's :loading spinner. Keeps every "work-in-progress"
indicator on one colour. */
.bp-search-single .p-autocomplete-loader {
right: -19px;
inset-inline-end: -19px;
width: 18px;
height: 18px;
margin-top: -9px;
color: #da2128;
}
.bp-skills-picker { position: relative; width: 100%;
}
/* ── Trigger button ────────────────────────────────────────────────────── */
.bp-skills-picker-trigger {
width: 100%;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 0 8px 0 10px;
font-size: 13.5px;
font-family: inherit;
background: #fff;
border: 1px solid #c0c1cb;
border-radius: 8px;
outline: none;
cursor: pointer;
transition: border-color 0.15s;
}
.bp-skills-picker-trigger:hover { border-color: #a0a1ab;
}
.bp-skills-picker-trigger--open { border-color: #a0a1ab;
}
.bp-skills-picker-trigger-inner {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.bp-skills-picker-trigger-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
color: #6b7db8;
}
.bp-skills-picker-trigger-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #9098b0;
}
.bp-skills-picker-trigger-label--filled { color: #1a1d35; font-weight: 600;
}
.bp-skills-picker-clear {
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: #9098b0;
cursor: pointer;
font-size: 16px;
line-height: 1;
padding: 0;
}
.bp-skills-picker-clear:hover { color: #da2128;
}
/* ── tagsPosition='below' chips ─────────────────────────────────────────── */
.bp-skills-picker-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
max-height: 120px;
overflow-y: auto;
}
.bp-skills-picker-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 4px 4px 10px;
background: rgba(218, 33, 40, 0.08);
color: #da2128;
border-radius: 14px;
font-size: 12px;
font-weight: 600;
line-height: 1;
}
.bp-skills-picker-tag-remove {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: 50%;
color: #da2128;
cursor: pointer;
padding: 0;
transition: background 0.15s, color 0.15s;
}
.bp-skills-picker-tag-remove:hover {
background: #da2128;
color: #fff;
}
/* ── Modal overlay ─────────────────────────────────────────────────────── */
.bp-skills-picker-overlay {
position: fixed;
inset: 0;
z-index: 1200;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.bp-skills-picker-modal {
background: #fff;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(15, 17, 40, 0.25);
width: 100%;
max-width: 800px;
max-height: 80vh;
display: flex;
flex-direction: column;
overflow: hidden;
font-family: inherit;
}
/* ── Header ────────────────────────────────────────────────────────────── */
.bp-skills-picker-modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 14px 20px;
border-bottom: 1px solid #f1f1f6;
}
.bp-skills-picker-modal-eyebrow {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: #9098b0;
}
.bp-skills-picker-modal-title {
font-size: 14px;
font-weight: 600;
color: #1a1d35;
margin-top: 2px;
}
.bp-skills-picker-modal-close {
width: 28px;
height: 28px;
background: transparent;
border: none;
border-radius: 6px;
color: #9098b0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.bp-skills-picker-modal-close:hover { background: #f5f6fb; color: #1a1d35;
}
/* ── Proficiency note ──────────────────────────────────────────────────── */
.bp-skills-picker-modal-note {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 9px 20px;
background: #fffbeb;
border-bottom: 1px solid #fde68a;
color: #92400e;
font-size: 11px;
line-height: 1.4;
}
.bp-skills-picker-modal-note svg { flex-shrink: 0; margin-top: 1px; color: #f59e0b;
}
.bp-skills-picker-modal-note p { margin: 0;
}
/* ── Body ──────────────────────────────────────────────────────────────── */
.bp-skills-picker-modal-body {
display: grid;
grid-template-columns: 1fr 280px;
flex: 1;
overflow: hidden;
}
.bp-skills-picker-pane { display: flex; flex-direction: column; overflow: hidden;
}
.bp-skills-picker-pane--left { border-right: 1px solid #f1f1f6;
}
.bp-skills-picker-pane--right { padding: 12px; background: #fafafd; overflow-y: auto;
}
@media (max-width: 640px) {
.bp-skills-picker-modal-body { grid-template-columns: 1fr;
}
.bp-skills-picker-pane--left { border-right: none; border-bottom: 1px solid #f1f1f6; max-height: 50%;
}
}
/* Search row */
.bp-skills-picker-search-row {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 12px 8px;
border-bottom: 1px solid #f1f1f6;
}
.bp-skills-picker-search-row svg { color: #9098b0; flex-shrink: 0;
}
.bp-skills-picker-search-input {
flex: 1;
height: 28px;
font-size: 12.5px;
color: #1a1d35;
background: transparent;
border: 0;
outline: none;
font-family: inherit;
}
.bp-skills-picker-search-input::-moz-placeholder { color: #9098b0;
}
.bp-skills-picker-search-input::placeholder { color: #9098b0;
}
.bp-skills-picker-search-clear {
font-size: 11px;
color: #9098b0;
background: transparent;
border: 0;
cursor: pointer;
}
.bp-skills-picker-search-clear:hover { color: #1a1d35;
}
/* Tree */
.bp-skills-picker-tree {
flex: 1;
overflow-y: auto;
padding: 4px 0;
font-size: 12.5px;
}
.bp-skills-picker-empty {
padding: 24px 12px;
text-align: center;
font-size: 11.5px;
color: #9098b0;
}
.bp-skills-picker-row {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.bp-skills-picker-row--domain { cursor: pointer;
}
.bp-skills-picker-row--category { cursor: pointer; padding-left: 28px;
}
.bp-skills-picker-row--group { padding-left: 48px; padding-top: 2px; padding-bottom: 2px;
}
.bp-skills-picker-row--skill { cursor: pointer; padding-left: 84px; padding-top: 2px; padding-bottom: 2px;
}
.bp-skills-picker-row:hover { background: #fafafd;
}
.bp-skills-picker-caret {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
color: #9098b0;
flex-shrink: 0;
}
.bp-skills-picker-caret-btn { background: transparent; border: 0; cursor: pointer; padding: 0;
}
.bp-skills-picker-caret-svg { width: 10px; height: 10px; transition: transform 0.15s;
}
.bp-skills-picker-caret-svg--open { transform: rotate(90deg);
}
.bp-skills-picker-domain-label { font-weight: 600; color: #1a1d35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-skills-picker-category-label { font-weight: 500; color: #4e5a82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-skills-picker-group-inner {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
cursor: pointer;
}
.bp-skills-picker-group-label { font-weight: 600; color: #4e5a82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-skills-picker-skill-label { color: #4e5a82; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bp-skills-picker-checkbox {
width: 14px;
height: 14px;
border: 1px solid #c0c1cb;
border-radius: 3px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
}
.bp-skills-picker-checkbox--all { background: #da2128; border-color: #da2128;
}
.bp-skills-picker-checkbox--partial { background: #f0a0a3; border-color: #f0a0a3;
}
/* Right pane — selected list */
.bp-skills-picker-pane-title {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: #4e5a82;
margin-bottom: 8px;
}
.bp-skills-picker-pane-empty {
font-size: 11.5px;
color: #9098b0;
font-style: italic;
text-align: center;
padding: 16px 0;
}
.bp-skills-picker-selected-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
}
.bp-skills-picker-selected-item {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 8px;
background: #fff;
border: 1px solid #e4e7f0;
border-radius: 6px;
font-size: 12px;
}
.bp-skills-picker-selected-text { flex: 1; min-width: 0;
}
.bp-skills-picker-selected-name {
color: #1a1d35;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bp-skills-picker-selected-meta {
color: #9098b0;
font-size: 10.5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bp-skills-picker-selected-remove {
width: 20px;
height: 20px;
background: transparent;
border: 0;
color: #9098b0;
cursor: pointer;
flex-shrink: 0;
}
.bp-skills-picker-selected-remove:hover { color: #da2128;
}
/* ── Footer ────────────────────────────────────────────────────────────── */
.bp-skills-picker-modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 10px 20px;
border-top: 1px solid #f1f1f6;
background: #fafafd;
}
.bp-skills-picker-footer-clear {
font-size: 12px;
color: #9098b0;
background: transparent;
border: 0;
cursor: pointer;
}
.bp-skills-picker-footer-clear:hover { color: #da2128;
}
.bp-skills-picker-footer-cancel {
height: 30px;
padding: 0 12px;
font-size: 12px;
font-family: inherit;
font-weight: 500;
color: #4e5a82;
background: #fff;
border: 1px solid #e4e7f0;
border-radius: 6px;
cursor: pointer;
}
.bp-skills-picker-footer-cancel:hover { background: #fafafd;
}
.bp-skills-picker-footer-apply {
height: 30px;
padding: 0 12px;
font-size: 12px;
font-family: inherit;
font-weight: 600;
color: #fff;
background: #0d1526;
border: 0;
border-radius: 6px;
cursor: pointer;
}
.bp-skills-picker-footer-apply:hover { background: #1e2d45;
}
/* Transition */
.bp-skills-picker-fade-enter-active,
.bp-skills-picker-fade-leave-active { transition: opacity 0.15s ease;
}
.bp-skills-picker-fade-enter-from,
.bp-skills-picker-fade-leave-to { opacity: 0;
}
.fade-enter-active[data-v-476d3c35],
.fade-leave-active[data-v-476d3c35] {
transition: opacity 0.15s ease;
}
.fade-enter-from[data-v-476d3c35],
.fade-leave-to[data-v-476d3c35] {
opacity: 0;
}
.ss-fadeup-enter-active[data-v-bd07afd6], .ss-fadeup-leave-active[data-v-bd07afd6] { transition: all 180ms ease;
}
.ss-fadeup-enter-from[data-v-bd07afd6] { opacity: 0; transform: translateY(-6px);
}
.ss-fadeup-leave-to[data-v-bd07afd6] { opacity: 0; transform: translateY(-6px);
}
/* Indeterminate progress bar for the Resource View refetch. A sliding
segment rather than a percentage: the fetch gives no progress events, and
a fake percentage that stalls at 90% is worse than an honest "working". */
.cf-progress[data-v-f0220ad5] {
animation: cf-progress-slide-f0220ad5 1.1s ease-in-out infinite;
will-change: transform;
}
@keyframes cf-progress-slide-f0220ad5 {
0% { transform: translateX(-100%);
}
100% { transform: translateX(400%);
}
}
/* Respect the OS setting — the bar still shows, it just stops moving. */
@media (prefers-reduced-motion: reduce) {
.cf-progress[data-v-f0220ad5] { animation: none; width: 100%; opacity: 0.55;
}
}
.fade-enter-active[data-v-f0220ad5], .fade-leave-active[data-v-f0220ad5] { transition: opacity 0.18s ease;
}
.fade-enter-from[data-v-f0220ad5], .fade-leave-to[data-v-f0220ad5] { opacity: 0;
}
.cf-toast-enter-active[data-v-f0220ad5], .cf-toast-leave-active[data-v-f0220ad5] { transition: opacity 0.2s ease, transform 0.2s ease
}
.cf-toast-enter-from[data-v-f0220ad5], .cf-toast-leave-to[data-v-f0220ad5] { opacity: 0; transform: translateY(-8px)
}
/* Hide the native number-input spinner inside the inline-edit cells. */
input[type="number"][data-v-f0220ad5]::-webkit-inner-spin-button,
input[type="number"][data-v-f0220ad5]::-webkit-outer-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
input[type="number"][data-v-f0220ad5] {
-moz-appearance: textfield;
-webkit-appearance: textfield;
appearance: textfield;
}
/* Matrix scroll container — both axes scroll natively INSIDE the matrix card.
Sticky thead + sticky group-header rows keep the date row and section labels
pinned to the top of the scroll container as the user scrolls down to enter
values on a bottom row. Min-height shows ~10 rows by default; max-height
lets tall screens use the full available room. Styling matches MyForecast
for visual consistency. */
.fc-grid-scroll[data-v-f0220ad5] {
overflow-x: auto;
overflow-y: auto;
/* min-height sized to show the date header + DAY TOTAL row + a handful of
data rows without leaving a giant dead area on empty projects (PM's
Corner drilldown often lands here). Reduced from 600px on 2026-07-22 —
the previous value showed ~15 data rows by default which crowded the
viewport once the ribbon + FILTERS card stacked above it. */
min-height: 260px;
max-height: calc(100vh - 200px);
scrollbar-width: thin;
scrollbar-color: rgba(100, 116, 139, 0.55) transparent;
}
/* DAY TOTAL row placement — two layered mechanisms so the row always
ends up at the container's bottom edge, regardless of data-row count:
1. `.fc-grid-scroll table { height: 100% }` stretches the table to
fill the scroll container. The `.fc-spacer-row` above DAY TOTAL
has `height: 100%`, absorbing all extra vertical space so DAY
TOTAL renders at the container's true bottom in the empty /
short-content case.
2. `position: sticky; bottom: 0` on the DAY TOTAL cells keeps the row
pinned when the middle rows are taller than the container and the
user scrolls — the row would otherwise scroll off the bottom edge.
Cells must be individually sticky because a `` can't be sticky in
the table rendering model. z-index tiers: middle day cells 20 (above
body rows), left/right sticky corners 25 (above middle sticky), still
below sticky thead (30). */
.fc-grid-scroll table[data-v-f0220ad5] {
height: 100%;
}
.fc-grid-scroll tr.fc-spacer-row[data-v-f0220ad5] {
height: 100%;
}
.fc-grid-scroll tr.fc-spacer-row > td[data-v-f0220ad5] {
padding: 0;
border: 0;
}
.fc-grid-scroll tr.fc-day-total-row > td[data-v-f0220ad5] {
position: sticky;
bottom: 0;
z-index: 20;
}
.fc-grid-scroll tr.fc-day-total-row > td.sticky.left-0[data-v-f0220ad5] { z-index: 25;
}
.fc-grid-scroll tr.fc-day-total-row > td.sticky.right-0[data-v-f0220ad5] { z-index: 25;
}
.fc-grid-scroll[data-v-f0220ad5]::-webkit-scrollbar { width: 8px; height: 8px;
}
.fc-grid-scroll[data-v-f0220ad5]::-webkit-scrollbar-track { background: transparent;
}
.fc-grid-scroll[data-v-f0220ad5]::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.55); border-radius: 4px;
}
.fc-grid-scroll[data-v-f0220ad5]::-webkit-scrollbar-thumb:hover { background: rgba(71, 85, 105, 0.8);
}
.fc-grid-scroll[data-v-f0220ad5]::-webkit-scrollbar-corner { background: transparent;
}
/* Sticky date header — pin the whole thead instead of each , because
applying position:sticky to every header cell triggers a Firefox bug
where the cell renders but its inner content (day labels, day numbers)
is hidden inside table layouts. Sticky thead with border-separate works
in Chrome + Firefox. */
.fc-grid-scroll thead[data-v-f0220ad5] { position: sticky; top: 0; z-index: 30;
}
/* Header corners — also sticky-horizontally via existing `sticky left-0` /
`sticky right-0` Tailwind classes. Bump z-index so the corner cells sit
above body cells crossing them on either axis. */
.fc-grid-scroll thead th.left-0[data-v-f0220ad5],
.fc-grid-scroll thead th.right-0[data-v-f0220ad5] { z-index: 40;
}
/* Sticky GROUP HEADER rows (NP / Client+Acq / Resources) — pin just below the
date header so the user always knows which group they're entering against.
`top` value matches the rendered thead row height (≈40px for the 2-line
day-of-week + day-number layout). */
/* `--fc-thead-h` is set in JS by measureGridWidth() from the real thead
`offsetHeight`, so the group header pins exactly below the date header
(no gap, no overlap) across browsers + content variations. Fallback 64 px
covers the first paint before measurement runs. */
.fc-grid-scroll tr.fc-group-header > td[data-v-f0220ad5] { position: sticky; top: var(--fc-thead-h, 64px); z-index: 25;
}
.fc-grid-scroll tr.fc-group-header > td.left-0[data-v-f0220ad5],
.fc-grid-scroll tr.fc-group-header > td.right-0[data-v-f0220ad5] { z-index: 35;
}
/* Firefox `position: sticky` + `border-collapse: collapse` bug — sticky
cells render but hide their inner content. Switch to border-separate +
border-spacing: 0 (visually identical) and recreate ` ` borders via
cell-level rules below. */
.fc-grid-scroll table[data-v-f0220ad5] { border-collapse: separate; border-spacing: 0;
}
/* Row separator under every project / resource row (excluding group headers
which set their own border below). */
.fc-grid-scroll tbody > tr > td[data-v-f0220ad5] { border-bottom: 1px solid #f1f5f9;
}
/* Group-header coloured borders. */
.fc-grid-scroll tbody > tr.fc-group-header > td[data-v-f0220ad5] { border-bottom-color: #bbf7d0;
}
.fc-grid-scroll tbody > tr.fc-group-header-blue > td[data-v-f0220ad5] { border-bottom-color: #bfdbfe;
}
.fc-grid-scroll tbody > tr.fc-group-header-amber > td[data-v-f0220ad5] { border-bottom-color: #fde68a;
}
/* Stage-locked matrix cells — amber diagonal hatch + tiny lock icon in the
top-right corner. Mirrors MyForecastView's `.fc-cell-stage-locked` so both
surfaces communicate the lock state identically. The input on top is
transparent so the hatch shows through; the icon is amber-700 to match
the pill + input border. pointer-events:none so clicks pass through to
the underlying (disabled) input. */
.fc-cell-stage-locked[data-v-f0220ad5] {
position: relative;
background-image: repeating-linear-gradient(
45deg,
rgba(254, 243, 199, 0.6),
rgba(254, 243, 199, 0.6) 4px,
rgba(252, 211, 77, 0.18) 4px,
rgba(252, 211, 77, 0.18) 5px
);
}
/* Nearing-end cell tint — solid soft yellow on the runway between today
and the project's `actualEndDate` when the project is within 30 days
of ending. Distinct from the stage-lock hatch so a glance tells
"warning runway" apart from "already locked". Mirrors
`.fc-cell-nearing-end` in MyForecastView. */
.fc-cell-nearing-end[data-v-f0220ad5] {
background-color: #fefce8;
}
/* Department multi-select — custom group header + polished child rows.
Uses :deep because the picker teleports into PrimeVue's overlay
(.p-multiselect-overlay), which sits outside this component's
scoped-CSS boundary.
Layout:
─────────────────────────────────
[☐] Client facing (4)
─────────────────────────────────
☐ Regional Resources
☐ CS Pyramid FSE (Market)
...
─────────────────────────────────
[☐] Non-Client facing (15)
Children get 32px left padding + a subtle left border so they sit
visibly UNDER the group header instead of blending with it. */
/* Reset PrimeVue's group-wrapper padding — our custom slot manages its own. */
.fc-dept-overlay .p-multiselect-option-group {
padding: 0 !important;
background: transparent !important;
}
/* Group header — bold, tinted, clearly clickable. */
.fc-dept-overlay .fc-dept-group-header {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
cursor: pointer;
background: #f1f5fb;
border-top: 1px solid #dfe4ee;
border-bottom: 1px solid #dfe4ee;
font-weight: 700;
color: #0f172a;
font-size: 12.5px;
letter-spacing: 0.01em;
line-height: 1.2;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
transition: background 0.12s, border-color 0.12s;
}
.fc-dept-overlay .p-multiselect-option-group:first-child .fc-dept-group-header {
border-top: 0;
}
.fc-dept-overlay .fc-dept-group-header:hover {
background: #e7edf7;
}
.fc-dept-overlay .fc-dept-group-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border: 1.5px solid #94a3b8;
border-radius: 4px;
background: #fff;
transition: background 0.12s, border-color 0.12s;
flex-shrink: 0;
}
.fc-dept-overlay .fc-dept-group-check.is-checked,
.fc-dept-overlay .fc-dept-group-check.is-partial {
background: #da2128;
border-color: #da2128;
color: #fff;
}
.fc-dept-overlay .fc-dept-group-dash {
width: 8px;
height: 2px;
background: #fff;
border-radius: 1px;
}
.fc-dept-overlay .fc-dept-group-label {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fc-dept-overlay .fc-dept-group-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 18px;
padding: 0 8px;
border-radius: 999px;
background: #ffffff;
border: 1px solid #cbd5e1;
color: #475569;
font-size: 10.5px;
font-weight: 700;
flex-shrink: 0;
}
/* Child option rows — indented so they read as children of the group
above. Left padding lands the child checkbox visually under the group
label. Overrides the `padding: 11px 14px !important` from the shared
BaseMultiSelect global CSS in @dssplus/bizplus-fe-ui. */
.fc-dept-overlay .p-multiselect-option {
padding: 8px 14px 8px 40px !important;
font-size: 13px !important;
line-height: 1.3 !important;
border-left: 3px solid transparent;
gap: 10px !important;
}
/* Overlay dimensions — explicit min/max stops PrimeVue's JS-computed
panel height from racing on first open and collapsing to a few
pixels tall (the "sometimes the UI collapses" bug — panel becomes so
short the matrix content underneath bleeds visually). Baseline used
by every filter dropdown on the page:
• min-width 280px — matches the trigger's `min-w-[220px]` plus
margin for the search input + group check.
• min-height 200px — at least "Client facing" header + a couple
rows always visible on open.
• max-height 420px — bounded so long department lists don't push
the panel below the viewport bottom.
`.p-multiselect-items-wrapper` gets its own scroll cap since PrimeVue
sets that node's height inline via JS; hard-capping keeps the
scrollbar predictable regardless of when the JS runs. */
.fc-dept-overlay {
min-width: 280px;
min-height: 200px;
max-height: 420px;
}
.fc-dept-overlay .p-multiselect-items-wrapper {
max-height: 340px !important;
overflow-y: auto !important;
}
.fc-dept-overlay .p-multiselect-option:hover {
border-left-color: #da2128;
}
.fc-dept-overlay .p-multiselect-option.p-selected {
border-left-color: #da2128;
background-color: #fff3f3 !important;
}
/* Swap BaseAlert's hardcoded bell-notification header icon for a trash icon
while the Remove confirmation is open — a destructive action shouldn't read
as a "notification". Keyed off body[data-fc-remove-dialog], set/unset by the
removeResDialogOpen watcher (+ onBeforeUnmount cleanup) so it never bleeds
into other BaseAlert usages.
MyForecastView.vue defines an identical rule for its own remove dialog.
Duplicated here deliberately rather than shared: the rules are byte-identical
and idempotent, and this keeps ForecastView self-sufficient instead of
depending on MyForecastView's stylesheet also being in the bundle. */
body[data-fc-remove-dialog] .bp-alert-header-icon { width: 18px; height: 18px;
}
body[data-fc-remove-dialog] .bp-alert-header-icon > svg { display: none;
}
body[data-fc-remove-dialog] .bp-alert-header-icon::after {
content: '';
display: block;
width: 18px;
height: 18px;
background-color: #fff;
-webkit-mask-image: url("data:image/svg+xml;utf8, ` borders stop rendering in
separate mode, so the row separators below recreate them at the cell level. */
.matrix-scroll table[data-v-dc3fcbfa] { border-collapse: separate; border-spacing: 0;
}
/* Row separator: 1 px slate-100 line under every project/activity row.
Excludes the Day Total row (which paints its own top border) and the very
last row (no trailing line). The group-header rows below override with
their own coloured border. */
.matrix-scroll tbody > tr:not(.fc-day-total-row) > td[data-v-dc3fcbfa] {
border-bottom: 1px solid #f1f5f9; /* slate-100 */
}
/* Group-header row borders: amber for TIME OFF, green for NP, blue for
Client + Acq. Match the tr-level `border-b border-{amber|green|blue}-200`
that border-collapse used to render. */
.matrix-scroll tbody > tr.fc-group-header > td[data-v-dc3fcbfa] { border-bottom-color: #c7d2fe;
}
.matrix-scroll tbody > tr.fc-group-header-amber > td[data-v-dc3fcbfa] { border-bottom-color: #fde68a;
}
.matrix-scroll tbody > tr.fc-group-header-green > td[data-v-dc3fcbfa] { border-bottom-color: #bbf7d0;
}
.matrix-scroll tbody > tr.fc-group-header-blue > td[data-v-dc3fcbfa] { border-bottom-color: #bfdbfe;
}
/* While the project search is active, drop the 10-row min-height so the grid
shrinks to fit just the matched rows + sticky headers + Day Total. The
max-height still caps tall result sets. */
.matrix-scroll--auto[data-v-dc3fcbfa] { min-height: 0;
}
/* Week view used to set `max-height: none` so the grid grew to content height
(no internal scrollbar), but users expected the same Week/Month behaviour —
sticky Day Total pinned to the bottom of a fixed-height card with a vertical
scrollbar when the row count overflows. The base `.matrix-scroll` rules now
apply uniformly in both modes. */
/* WebKit (Chrome/Edge/Safari) — :deep() so the pseudo-element rules pierce
Vue's scoped-CSS attribute selector and actually style the native bar. */
[data-v-dc3fcbfa] .matrix-scroll::-webkit-scrollbar { width: 8px; height: 8px;
}
[data-v-dc3fcbfa] .matrix-scroll::-webkit-scrollbar-track { background: transparent;
}
[data-v-dc3fcbfa] .matrix-scroll::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.55); border-radius: 4px;
}
[data-v-dc3fcbfa] .matrix-scroll::-webkit-scrollbar-thumb:hover { background: rgba(71, 85, 105, 0.8);
}
[data-v-dc3fcbfa] .matrix-scroll::-webkit-scrollbar-corner { background: transparent;
}
/* Sticky date header — pin the date row to the top of `.matrix-scroll` as
the user scrolls vertically. We sticky the WHOLE thead instead of each
individually because applying position:sticky to every header cell
triggers a Firefox bug where the cell box renders but its inner content
(day labels, day numbers) is hidden inside `border-collapse` tables —
even after switching to border-separate the issue persisted. Modern Chrome
+ Firefox both support sticky when border-collapse is `separate`
(now set on .matrix-scroll table), so this is the simplest solution that
works everywhere. */
.matrix-scroll thead[data-v-dc3fcbfa] { position: sticky; top: 0; z-index: 30;
}
/* Header corners (sticky-left + sticky-top simultaneously) need higher
z-index so they sit above sticky body cells crossing them. The sticky-left
and sticky-right Tailwind classes already pin the project + total s
horizontally — we only bump z-index here. */
.matrix-scroll thead th.left-0[data-v-dc3fcbfa],
.matrix-scroll thead th.right-0[data-v-dc3fcbfa] { z-index: 40;
}
/* Sticky GROUP HEADER rows (Time Off / Non-Project / Client+Acq) — pin
EXACTLY below the date header. `--fc-thead-h` is set in JS by
measureStickyWidths() from the real thead `offsetHeight` so we get a
per-browser/per-content correct value (past-day lock icons + cross-browser
line-height drift made a fixed pixel value brittle — too low → overlap on
the day numbers, too high → visible gap). Fallback 64 px covers the first
paint before measurement runs. */
.matrix-scroll tr.fc-group-header > td[data-v-dc3fcbfa] { position: sticky; top: var(--fc-thead-h, 64px); z-index: 25;
}
.matrix-scroll tr.fc-group-header > td.left-0[data-v-dc3fcbfa],
.matrix-scroll tr.fc-group-header > td.right-0[data-v-dc3fcbfa] { z-index: 35;
}
/* Sticky DAY TOTAL row — pins to the BOTTOM of `.matrix-scroll` so the
summary stays visible while entering hours on any project row above.
`box-shadow: 0 -1px 0 #1e2d45` paints a 1px navy line along the TOP edge
of every cell. Without it, the slate-100 `border-b` from the project row
above bleeds through as a bright horizontal line against the navy band. */
.matrix-scroll tr.fc-day-total-row > td[data-v-dc3fcbfa] {
position: sticky;
bottom: 0;
z-index: 28;
box-shadow: 0 -1px 0 0 #1e2d45;
}
.matrix-scroll tr.fc-day-total-row > td.left-0[data-v-dc3fcbfa],
.matrix-scroll tr.fc-day-total-row > td.right-0[data-v-dc3fcbfa] { z-index: 38;
}
/* Stage-locked cell — applied to day cells whose project has moved out of
`InProcess` in F&O AND whose date is beyond the current calendar month.
Diagonal amber hatch reads as "disabled with reason" without using a
bright error background — the muted treatment signals "not your fault,
the project closed upstream" rather than "your input is invalid". The
input element inside is :disabled (read-only) and styled with amber
borders to match. See `isStageFutureLocked` in script + the cell's class
binding. The backend `projectStageService.assertSavable` enforces the
same rule on the write path. */
.fc-cell-stage-locked[data-v-dc3fcbfa] {
position: relative;
background-image: repeating-linear-gradient(
45deg,
rgba(254, 243, 199, 0.6),
rgba(254, 243, 199, 0.6) 4px,
rgba(252, 211, 77, 0.18) 4px,
rgba(252, 211, 77, 0.18) 5px
);
}
/* Nearing-end cell tint — solid soft yellow (yellow-50) covering the
runway between today and the project's `actualEndDate`. Distinct from
the stage-lock hatch so a glance tells "warning runway" apart from
"already locked". The row pill ("NEARING END {date}") carries the
text-level context. */
.fc-cell-nearing-end[data-v-dc3fcbfa] {
background-color: #fefce8;
}
body[data-fc-remove-dialog] .bp-alert-header-icon { width: 18px; height: 18px;
}
body[data-fc-remove-dialog] .bp-alert-header-icon > svg { display: none;
}
body[data-fc-remove-dialog] .bp-alert-header-icon::after {
content: '';
display: block;
width: 18px;
height: 18px;
background-color: #fff;
-webkit-mask-image: url("data:image/svg+xml;utf8, .
A 6px hot-zone pinned to the right edge; light red on hover so users
can find it. Drag updates the consuming view's reactive widths map. */
.bp-col-resize-handle {
position: absolute;
top: 0;
right: 0;
width: 6px;
height: 100%;
cursor: col-resize;
z-index: 5;
background: transparent;
transition: background 0.12s;
}
.bp-col-resize-handle:hover,
.bp-col-resize-handle:active {
background: rgba(218, 33, 40, 0.55);
}
/* ── Table density modes for shared BaseTable ──
Class is applied to the wrapper element containing . We override
the shared `bp-tbl-*` cell paddings rather than modifying the shared
package. `comfortable` is BaseTable's native default, so it has no rule. */
.table-density-compact .bp-tbl-th,
.table-density-compact .bp-tbl-td {
padding-top: 4px;
padding-bottom: 4px;
}
.table-density-spacious .bp-tbl-th,
.table-density-spacious .bp-tbl-td {
padding-top: 14px;
padding-bottom: 14px;
}
/* ── Hide browser-native clear ("×") button on `
slot so we overlay a native checkbox on top of the first `` in the
sort-header row. `left`/`top`/`width`/`height` are set at runtime via
inline style from `measureSelectAllTh()` — this stays correct even when
BaseTable's `table-layout:fixed` + `width:100%` stretches `_select`
proportionally on wide viewports. */
.bp-compliance-tbl[data-v-168284eb] { position: relative;
}
.bp-compliance-tbl__selectall[data-v-168284eb] {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
padding: 0;
margin: 0;
}
.bp-compliance-tbl__selectall input[data-v-168284eb] {
margin: 0;
padding: 0;
}
/* Project-column width for the daily matrix sticky-left cells — mirrors
UserForecastOverviewView's `.fc-proj-col`. The CSS var `--fc-proj-col-w`
is set inline on the matrix scroll container. max-width is critical:
without it a long project name forces the cell wider than the var,
expanding the whole table past the container and forcing a horizontal
scrollbar even when computed widths sum to less than available space. */
.fc-proj-col[data-v-168284eb] {
width: var(--fc-proj-col-w, 240px);
min-width: var(--fc-proj-col-w, 240px);
max-width: var(--fc-proj-col-w, 240px);
}
/* Matrix scroll container — mirrors MyForecastView's `.matrix-scroll`.
The container owns BOTH axes of scroll so the panel body itself doesn't
scroll (preventing the doubled-scrollbar look). Thin slate-600 thumb
on a transparent track matches MyForecast's webkit + Firefox styling. */
.matrix-scroll[data-v-168284eb] {
overflow-x: auto;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(71, 85, 105, 0.8) #e2e8f0;
}
[data-v-168284eb] .matrix-scroll::-webkit-scrollbar { width: 8px; height: 8px;
}
[data-v-168284eb] .matrix-scroll::-webkit-scrollbar-track { background: transparent;
}
[data-v-168284eb] .matrix-scroll::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.55); border-radius: 4px;
}
[data-v-168284eb] .matrix-scroll::-webkit-scrollbar-thumb:hover { background: rgba(71, 85, 105, 0.8);
}
[data-v-168284eb] .matrix-scroll::-webkit-scrollbar-corner { background: transparent;
}
/* Row dividers — re-added at the cell level since border-separate
doesn't render borders. Colour matches MyForecast's pattern. */
.matrix-scroll tbody > tr:not(.fc-day-total-row) > td[data-v-168284eb] {
border-bottom: 1px solid #f1f5f9; /* slate-100 */
}
.matrix-scroll tbody > tr.fc-group-header-amber > td[data-v-168284eb] { border-bottom-color: #fde68a;
}
.matrix-scroll tbody > tr.fc-group-header-green > td[data-v-168284eb] { border-bottom-color: #bbf7d0;
}
.matrix-scroll tbody > tr.fc-group-header-blue > td[data-v-168284eb] { border-bottom-color: #bfdbfe;
}
/* Sticky THEAD — pins the Project / Activity strip to the top of the
scroll container so the day-header and Total label stay visible while
scrolling through long project lists. Corners (sticky-left thead th +
sticky-right thead th) need a higher z so they sit above the sticky
body cells that cross them. */
.matrix-scroll thead[data-v-168284eb] { position: sticky; top: 0; z-index: 30;
}
.matrix-scroll thead th.left-0[data-v-168284eb],
.matrix-scroll thead th.right-0[data-v-168284eb] { z-index: 40;
}
/* Sticky DAY TOTAL row — pins to the BOTTOM of the scroll container.
`box-shadow: 0 -1px 0 #1e2d45` paints a navy line on the top edge of
each cell — without it, the slate-100 border-bottom from the project
row above would bleed through as a bright line against the navy band. */
.matrix-scroll tr.fc-day-total-row > td[data-v-168284eb] {
position: sticky;
bottom: 0;
z-index: 28;
box-shadow: 0 -1px 0 0 #1e2d45;
}
.matrix-scroll tr.fc-day-total-row > td.left-0[data-v-168284eb],
.matrix-scroll tr.fc-day-total-row > td.right-0[data-v-168284eb] { z-index: 38;
}
/* Reset PrimeVue's group-wrapper padding — our custom slot manages its own. */
.fc-dept-overlay .p-multiselect-option-group {
padding: 0 !important;
background: transparent !important;
}
/* Group header — bold, tinted, clearly clickable. */
.fc-dept-overlay .fc-dept-group-header {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
cursor: pointer;
background: #f1f5fb;
border-top: 1px solid #dfe4ee;
border-bottom: 1px solid #dfe4ee;
font-weight: 700;
color: #0f172a;
font-size: 12.5px;
letter-spacing: 0.01em;
line-height: 1.2;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
transition: background 0.12s, border-color 0.12s;
}
.fc-dept-overlay .p-multiselect-option-group:first-child .fc-dept-group-header {
border-top: 0;
}
.fc-dept-overlay .fc-dept-group-header:hover {
background: #e7edf7;
}
.fc-dept-overlay .fc-dept-group-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border: 1.5px solid #94a3b8;
border-radius: 4px;
background: #fff;
transition: background 0.12s, border-color 0.12s;
flex-shrink: 0;
}
.fc-dept-overlay .fc-dept-group-check.is-checked,
.fc-dept-overlay .fc-dept-group-check.is-partial {
background: #da2128;
border-color: #da2128;
color: #fff;
}
.fc-dept-overlay .fc-dept-group-dash {
width: 8px;
height: 2px;
background: #fff;
border-radius: 1px;
}
.fc-dept-overlay .fc-dept-group-label {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fc-dept-overlay .fc-dept-group-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 18px;
padding: 0 8px;
border-radius: 999px;
background: #ffffff;
border: 1px solid #cbd5e1;
color: #475569;
font-size: 10.5px;
font-weight: 700;
flex-shrink: 0;
}
/* Child option rows — indented so they read as children of the group
above. Overrides the `padding: 11px 14px !important` from the shared
BaseMultiSelect global CSS in @dssplus/bizplus-fe-ui. */
.fc-dept-overlay .p-multiselect-option {
padding: 8px 14px 8px 40px !important;
font-size: 13px !important;
line-height: 1.3 !important;
border-left: 3px solid transparent;
gap: 10px !important;
}
/* Overlay dimensions — explicit min/max stops PrimeVue's JS-computed
panel height from racing on first open and collapsing to a few
pixels tall. */
.fc-dept-overlay {
min-width: 280px;
min-height: 200px;
max-height: 420px;
}
.fc-dept-overlay .p-multiselect-items-wrapper {
max-height: 340px !important;
overflow-y: auto !important;
}
.fc-dept-overlay .p-multiselect-option:hover {
border-left-color: #da2128;
}
.fc-dept-overlay .p-multiselect-option.p-selected {
border-left-color: #da2128;
background-color: #fff3f3 !important;
}
/* ── Grid sizing override (BaseTable) ──────────────────────────────────────
BaseTable ships `width:100%; table-layout:fixed; min-width:820px`. Because
the layout is fixed, once the column widths total more than the container
the browser treats them as proportions and SHRINKS every column — and
`.bp-tbl-th` is nowrap with no clipping, so headers overflow into the next
column instead of truncating.
Raising min-width to the real total makes `.bp-tbl-scroll` (already
`overflow-x:auto` in the component) do its job: columns keep their width
and the grid scrolls sideways instead. `--fc-grid-min` is set inline from
the visible columns, so it tracks Table Settings. */
.fc-grid-fit .bp-tbl { min-width: var(--fc-grid-min, 820px);
}
/* Let a multi-word header use two lines rather than demanding the width on
one: "Sep 2026 Est. Charge" needs ~160px on a single line, ~124px wrapped.
Breaks at SPACES ONLY. An earlier version set `overflow-wrap: anywhere`,
which let the browser break inside a word — single-word headers came out as
"COUNT / RY" and "L / E". Every column below is sized to fit its longest
WORD, so nothing needs to break mid-word. */
.fc-grid-fit .bp-tbl-th { white-space: normal;
}
.fc-grid-fit .bp-tbl-th-inner { align-items: flex-start; line-height: 1.25;
}
/* Project-column width for the daily matrix and yearly summary sticky-left
cells. The CSS var `--fc-proj-col-w` is set on the daily matrix's scroll
container (see `dailyMatrixStyle` in script) so cells expand to absorb
leftover container width. The yearly summary table's parent doesn't set
the var, so its cells fall back to the literal 220px default. */
.fc-proj-col[data-v-8f5605a2] {
width: var(--fc-proj-col-w, 220px);
min-width: var(--fc-proj-col-w, 220px);
/* max-width is critical — without it, a long project name forces the cell
to grow beyond `--fc-proj-col-w`, expanding the whole table past the
container width and triggering a horizontal scrollbar even when our
computed widths sum to less than the available space. Same fix applied
to MyForecast .matrix-scroll project column. */
max-width: var(--fc-proj-col-w, 220px);
}
/* Reset PrimeVue's group-wrapper padding — our custom slot manages its own. */
.fc-dept-overlay .p-multiselect-option-group {
padding: 0 !important;
background: transparent !important;
}
/* Group header — bold, tinted, clearly clickable. */
.fc-dept-overlay .fc-dept-group-header {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
cursor: pointer;
background: #f1f5fb;
border-top: 1px solid #dfe4ee;
border-bottom: 1px solid #dfe4ee;
font-weight: 700;
color: #0f172a;
font-size: 12.5px;
letter-spacing: 0.01em;
line-height: 1.2;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
transition: background 0.12s, border-color 0.12s;
}
.fc-dept-overlay .p-multiselect-option-group:first-child .fc-dept-group-header {
border-top: 0;
}
.fc-dept-overlay .fc-dept-group-header:hover {
background: #e7edf7;
}
.fc-dept-overlay .fc-dept-group-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border: 1.5px solid #94a3b8;
border-radius: 4px;
background: #fff;
transition: background 0.12s, border-color 0.12s;
flex-shrink: 0;
}
.fc-dept-overlay .fc-dept-group-check.is-checked,
.fc-dept-overlay .fc-dept-group-check.is-partial {
background: #da2128;
border-color: #da2128;
color: #fff;
}
.fc-dept-overlay .fc-dept-group-dash {
width: 8px;
height: 2px;
background: #fff;
border-radius: 1px;
}
.fc-dept-overlay .fc-dept-group-label {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fc-dept-overlay .fc-dept-group-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 18px;
padding: 0 8px;
border-radius: 999px;
background: #ffffff;
border: 1px solid #cbd5e1;
color: #475569;
font-size: 10.5px;
font-weight: 700;
flex-shrink: 0;
}
/* Child option rows — indented so they read as children of the group
above. Overrides the `padding: 11px 14px !important` from the shared
BaseMultiSelect global CSS in @dssplus/bizplus-fe-ui. */
.fc-dept-overlay .p-multiselect-option {
padding: 8px 14px 8px 40px !important;
font-size: 13px !important;
line-height: 1.3 !important;
border-left: 3px solid transparent;
gap: 10px !important;
}
/* Overlay dimensions — explicit min/max stops PrimeVue's JS-computed
panel height from racing on first open and collapsing to a few
pixels tall. */
.fc-dept-overlay {
min-width: 280px;
min-height: 200px;
max-height: 420px;
}
.fc-dept-overlay .p-multiselect-items-wrapper {
max-height: 340px !important;
overflow-y: auto !important;
}
.fc-dept-overlay .p-multiselect-option:hover {
border-left-color: #da2128;
}
.fc-dept-overlay .p-multiselect-option.p-selected {
border-left-color: #da2128;
background-color: #fff3f3 !important;
}
/* ── Grid sizing override (BaseTable) ──────────────────────────────────────
BaseTable ships `width:100%; table-layout:fixed; min-width:820px`. Because
the layout is fixed, once the column widths total more than the container
the browser treats them as proportions and SHRINKS every column — and
`.bp-tbl-th` is nowrap with no clipping, so headers overflow into the next
column instead of truncating. That is the "overlapping headers" bug.
Raising min-width to the real total makes `.bp-tbl-scroll` (already
`overflow-x:auto` in the component) do its job: columns keep their width
and the grid scrolls sideways instead. `--fc-grid-min` is set inline from
the visible columns, so it tracks Table Settings. */
.fc-grid-fit .bp-tbl { min-width: var(--fc-grid-min, 820px);
}
/* Let a multi-word header use two lines rather than demanding the width on
one: "Sep 2026 Est. Charge" needs ~160px on a single line, ~124px wrapped.
Breaks at SPACES ONLY. An earlier version set `overflow-wrap: anywhere`,
which let the browser break inside a word — single-word headers came out as
"COUNT / RY" and "L / E". Every column below is sized to fit its longest
WORD, so nothing needs to break mid-word. */
.fc-grid-fit .bp-tbl-th { white-space: normal;
}
.fc-grid-fit .bp-tbl-th-inner { align-items: flex-start; line-height: 1.25;
}
/* ── Two-pane shell — matches the scheduler admintasks feel ───────── */
.admintasks-shell[data-v-ffc792d7] {
display: grid;
grid-template-columns: 240px 1fr;
min-height: calc(100vh - 64px);
background: #f7f8fc;
}
@media (max-width: 767px) {
.admintasks-shell[data-v-ffc792d7] {
/* Stack on narrow viewports; the sidebar becomes a compact horizontal
chip row above the main pane rather than a fixed left column. */
grid-template-columns: 1fr;
}
}
.admintasks-sidebar[data-v-ffc792d7] {
background: #ffffff;
border-right: 1px solid #e2e8f0;
padding: 1.25rem 1rem;
overflow-y: auto;
}
.sidebar-heading[data-v-ffc792d7] {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: #64748b;
margin-bottom: 0.5rem;
}
.sidebar-heading-second[data-v-ffc792d7] {
/* Spacing separator between the TABLES + VIEWS sections. */
margin-top: 1.25rem;
}
.sidebar-items[data-v-ffc792d7] {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.sidebar-item[data-v-ffc792d7] {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 8px;
font-size: 13px;
color: #334155;
cursor: pointer;
transition: background 120ms;
}
.sidebar-item[data-v-ffc792d7]:hover { background: #f1f5f9;
}
.sidebar-item.active[data-v-ffc792d7] {
background: #0d1526;
color: #ffffff;
}
.sidebar-item.active .sidebar-icon[data-v-ffc792d7] { color: #ffffff;
}
.sidebar-icon[data-v-ffc792d7] {
flex-shrink: 0;
color: #64748b;
}
.entity-label[data-v-ffc792d7] {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12.5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admintasks-main[data-v-ffc792d7] {
padding: 1.5rem;
overflow-y: auto;
}
@media (max-width: 767px) {
.admintasks-main[data-v-ffc792d7] { padding: 1rem;
}
}
.fadeup-enter-active[data-v-ffc792d7], .fadeup-leave-active[data-v-ffc792d7] { transition: all 180ms ease;
}
.fadeup-enter-from[data-v-ffc792d7] { opacity: 0; transform: translateY(-6px);
}
.fadeup-leave-to[data-v-ffc792d7] { opacity: 0; transform: translateY(-6px);
}