/* ── 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;
}

.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 tags ── */
.bp-filter-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: #d1d5e8 transparent;
}
.bp-filter-tags::-webkit-scrollbar { height: 3px;
}
.bp-filter-tags::-webkit-scrollbar-track { background: transparent;
}
.bp-filter-tags::-webkit-scrollbar-thumb { background: #d1d5e8; border-radius: 99px;
}
.bp-filter-tags::-webkit-scrollbar-thumb:hover { background: #9098b0;
}
.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;
}

/* ── Overlay ── */
.ds-cm-overlay[data-v-784b9a35] {
  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 ── */
.ds-cm-dialog[data-v-784b9a35] {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(15, 17, 40, 0.22);
  width: 100%;
  max-width: 862px;
  overflow: hidden;
}

/* ── Header ── */
.ds-cm-header[data-v-784b9a35] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 22px 16px;
  border-bottom: 1px solid #d0d4e4;
  background: #fff;
  gap: 12px;
}
.ds-cm-header-text[data-v-784b9a35] {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ds-cm-title[data-v-784b9a35] {
  font-size: 15px;
  font-weight: 700;
  color: #1a1d35;
  line-height: 1.25;
}
.ds-cm-subtitle[data-v-784b9a35] {
  font-size: 12px;
  color: #7b84a3;
  line-height: 1.4;
}
.ds-cm-close[data-v-784b9a35] {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px;
  border-radius: 6px;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: background 0.15s;
}
.ds-cm-close[data-v-784b9a35]:hover {
  background: #eff4ff;
}

/* ── Body: two-panel grid ── */
.ds-cm-body[data-v-784b9a35] {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 300px;
}

/* ── Single panel ── */
.ds-cm-panel[data-v-784b9a35] {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 22px;
  min-width: 0; /* prevent grid blowout when content is wider than 1fr */
}
.ds-cm-panel-top[data-v-784b9a35] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Panel icon ── */
.ds-cm-panel-icon[data-v-784b9a35] {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.ds-cm-panel-icon--blue[data-v-784b9a35] {
  background: #eff4ff;
  color: #2563eb;
}
.ds-cm-panel-icon--red[data-v-784b9a35] {
  background: #fff0f0;
  color: #da2128;
}

/* ── Panel heading ── */
.ds-cm-panel-title[data-v-784b9a35] {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
}
.ds-cm-panel-title--blue[data-v-784b9a35] { color: #2563eb;
}
.ds-cm-panel-title--red[data-v-784b9a35]  { color: #da2128;
}
.ds-cm-panel-desc[data-v-784b9a35] {
  font-size: 11px;
  color: #9098b0;
  line-height: 1.45;
  margin-bottom: 4px;
}
.ds-cm-panel-help[data-v-784b9a35] {
  font-size: 11.5px;
  color: #6b7280;
  line-height: 1.65;
  margin: 6px 0 0;
  padding: 10px 12px;
  background: #f6f8ff;
  border-left: 3px solid #2563eb;
  border-radius: 0 6px 6px 0;
}
.ds-cm-panel-help--red[data-v-784b9a35] {
  background: #fff5f5;
  border-left-color: #da2128;
}

/* ── Duplicate alert (inline, per panel) ── */
.ds-cm-dup-alert[data-v-784b9a35] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 7px;
  font-size: 11.5px;
  color: #92400e;
  margin-top: 8px;
}

/* ── CRM error banner ── */
.ds-cm-crm-error[data-v-784b9a35] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  background: #fff1f2;
  border: 1px solid #fecaca;
  border-radius: 7px;
  font-size: 11.5px;
  color: #b91c1c;
  margin-top: 6px;
}

/* ── Fields ── */
.ds-cm-panel-fields[data-v-784b9a35] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

/* Truncate long selected value in the dropdown trigger */
.ds-cm-panel-fields[data-v-784b9a35] .p-select,
.ds-cm-panel-fields[data-v-784b9a35] .bp-select {
  min-width: 0;
  width: 100%;
}
.ds-cm-panel-fields[data-v-784b9a35] .p-select-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Naming-convention hint under the opportunity-name input on the right
   panel. Two-line layout: prefix reads as instruction (dark grey), the
   format literal reads as constraint (brand red). Distinct from
   `.ds-cm-note` which is a yellow tip box; this hint is intentionally
   minimal so it reads as a format the user must follow. */
.ds-cm-format-note[data-v-784b9a35] {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  line-height: 1.5;
}
.ds-cm-format-note-prefix[data-v-784b9a35] {
  color: #4e5a82;                /* brand dark-grey — matches label secondary text */
}
.ds-cm-format-note-value[data-v-784b9a35] {
  color: #da2128;                /* brand red — highlights the required pattern */
  font-weight: 600;
}

/* ── Note ── */
.ds-cm-note[data-v-784b9a35] {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 12px;
  background: #fffbef;
  border: 1px solid #fde68a;
  border-radius: 8px;
}
.ds-cm-note-icon[data-v-784b9a35] {
  font-size: 13px;
  flex-shrink: 0;
  line-height: 1.5;
}
.ds-cm-note-text[data-v-784b9a35] {
  font-size: 11px;
  color: #7c5e10;
  line-height: 1.5;
}

/* ── Panel CTA ── */
.ds-cm-panel-cta[data-v-784b9a35] {
  margin-top: 20px;
}
.ds-cm-panel-cta[data-v-784b9a35] button {
  width: 100%;
  justify-content: center;
}

/* Blue button override */
.ds-cm-btn-blue[data-v-784b9a35] button {
  background: #2563eb;
  border-color: #2563eb;
}
.ds-cm-btn-blue[data-v-784b9a35] button:hover:not(:disabled) {
  background: #1d4ed8;
  border-color: #1d4ed8;
}
.ds-cm-btn-blue[data-v-784b9a35] button:active:not(:disabled) {
  background: #1e40af;
  border-color: #1e40af;
}

/* ── Separator ── */
.ds-cm-sep[data-v-784b9a35] {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 44px;
  padding: 28px 0;
}
.ds-cm-sep-line[data-v-784b9a35] {
  flex: 1;
  width: 1px;
  background: #d0d4e4;
}
.ds-cm-sep-or[data-v-784b9a35] {
  padding: 7px 0;
  font-size: 10.5px;
  font-weight: 600;
  color: #b0b8cc;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

/* ── Transition ── */
.ds-cm-fade-enter-active[data-v-784b9a35],
.ds-cm-fade-leave-active[data-v-784b9a35] {
  transition: opacity 0.2s ease;
}
.ds-cm-fade-enter-active .ds-cm-dialog[data-v-784b9a35],
.ds-cm-fade-leave-active .ds-cm-dialog[data-v-784b9a35] {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.ds-cm-fade-enter-from[data-v-784b9a35],
.ds-cm-fade-leave-to[data-v-784b9a35] {
  opacity: 0;
}
.ds-cm-fade-enter-from .ds-cm-dialog[data-v-784b9a35],
.ds-cm-fade-leave-to .ds-cm-dialog[data-v-784b9a35] {
  transform: scale(0.96) translateY(-8px);
  opacity: 0;
}

/* ── Mobile ── */
@media (max-width: 640px) {
.ds-cm-body[data-v-784b9a35] {
    grid-template-columns: 1fr;
}
.ds-cm-sep[data-v-784b9a35] {
    flex-direction: row;
    width: auto;
    padding: 0 24px;
}
.ds-cm-sep-line[data-v-784b9a35] {
    flex: 1;
    width: auto;
    height: 1px;
}
.ds-cm-sep-or[data-v-784b9a35] {
    padding: 0 10px;
}
}

.ds-share[data-v-3a7dd473] {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Step 1 picker row ── */
.ds-share-row[data-v-3a7dd473] {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ds-share-picker[data-v-3a7dd473] {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ds-share-picker[data-v-3a7dd473] .bp-form-group {
  flex: 1;
  min-width: 0;
  margin: 0;
}
.ds-share-icon[data-v-3a7dd473] {
  width: 36px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4e5a82;
  flex-shrink: 0;
}
.ds-share-perm[data-v-3a7dd473] {
  width: 150px;
  flex-shrink: 0;
}
.ds-share-perm[data-v-3a7dd473] .bp-form-group { margin: 0;
}

/* ── Footer ── */
.ds-share-footer[data-v-3a7dd473] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  gap: 8px;
}
.ds-share-footer-right[data-v-3a7dd473] {
  display: flex;
  gap: 8px;
}

/* ── Step 2 manage list ── */
.ds-manage-list[data-v-3a7dd473] {
  border: 1px solid #e4e7f0;
  border-radius: 10px;
  background: #fff;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}
.ds-manage-empty[data-v-3a7dd473] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
  color: #6b7db8;
  font-size: 13px;
}
.ds-manage-row[data-v-3a7dd473] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background 0.15s;
}
.ds-manage-row[data-v-3a7dd473]:hover { background: #f5f6fb;
}
.ds-manage-avatar[data-v-3a7dd473] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}
.ds-manage-text[data-v-3a7dd473] { flex: 1; min-width: 0;
}
.ds-manage-name[data-v-3a7dd473] {
  font-size: 13.5px;
  font-weight: 600;
  color: #1a1d35;
  line-height: 1.2;
}
.ds-manage-email[data-v-3a7dd473] {
  font-size: 12px;
  color: #6b7db8;
  line-height: 1.2;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-manage-perm[data-v-3a7dd473] { width: 130px; flex-shrink: 0;
}
.ds-manage-perm[data-v-3a7dd473] .bp-form-group { margin: 0;
}
.ds-manage-remove[data-v-3a7dd473] {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #4e5a82;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.ds-manage-remove[data-v-3a7dd473]:hover {
  background: #da2128;
  color: #fff;
}

/* ── Share note (Step 1) ── */
.ds-share-note[data-v-3a7dd473] {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 12px;
  background: #fffbef;
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: 12px;
  color: #7c5e10;
  line-height: 1.45;
}
.ds-share-note-icon[data-v-3a7dd473] {
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Permission cell (icon + label) ── */
.ds-perm-cell[data-v-3a7dd473] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ds-perm-icon[data-v-3a7dd473] {
  color: #4e5a82;
  flex-shrink: 0;
}
@media (max-width: 560px) {
.ds-share-row[data-v-3a7dd473] { flex-direction: column; gap: 8px;
}
.ds-share-perm[data-v-3a7dd473] { width: 100%;
}
}

.dsv-page[data-v-6613b814] {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 24px 32px;
}

/* ── Page header ── */
.dsv-header[data-v-6613b814] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.dsv-actions-bar[data-v-6613b814] {
  display: flex;
  justify-content: flex-end;
}

/* ── Sticky filter + table header (2026-09-19) ────────────────────
   As the user scrolls the deal-sheet list, the filter panel and the
   table's <thead> stay pinned below the app's 64px top nav. Filter
   sits directly below the nav (top: 64px); the table header slots
   below the filter using a dynamic `--dsv-filter-h` CSS var set from
   a ResizeObserver in the script (filter panel height changes when
   the user expands / collapses tags or the layout wraps).

   Opaque background on both is required — sticky elements let the
   page content scroll BEHIND them, so without a background the rows
   would bleed through and read as scrambled ghosts. */
.dsv-sticky-filter-wrap[data-v-6613b814] {
  position: sticky;
  top: 64px;                  /* directly below the fixed top nav */
  z-index: 20;                /* above the sticky thead so filter always wins overlap */
  background: #f1f5f9;        /* matches the shell's page background */
  /* Small negative top-margin keeps the filter flush with the KPI row above
     without a visible seam when it starts sticking. */
  margin-top: 0;
}

/* BaseTableExpandable wraps its <table> in `.bp-tbl-scroll` with
   `overflow-x: auto` for horizontal-scroll on wide tables. Per the
   CSS spec, that computes `overflow-y: auto` too — establishing a
   scroll containing block. `position: sticky` on the <thead> then
   sticks relative to THAT container instead of the viewport, so
   `top: 264px` positioned the thead 264px inside the table itself
   (visible as a "floating" header mid-table).
   Neutering the overflow on this specific container lets sticky
   bubble up to page-level scroll. Trade-off: wide tables can no
   longer scroll horizontally within the container — instead they
   force page-level horizontal scroll on narrow viewports. Fine for
   the deal-sheet listing (columns fit on desktop; mobile users get
   page-level pan). Scoped via `.dsv-page :deep(...)` so only the
   dealsheet listing table is affected. */
.dsv-page[data-v-6613b814] .bp-tbl-scroll {
  overflow: visible;
}

/* Table header stickies — applied at <th> level, NOT <thead>, to work
   around a cross-browser quirk: `position: sticky` on <thead> makes
   the two child <tr> rows stick independently at the same `top`, and
   because table layout won't overlap them the browser leaves a gap
   BETWEEN them where scrolling data rows bleed through (2026-09-19
   bug). Applying sticky at <th> level with explicit stacked offsets
   lets both rows pin contiguously with no gap.
   `:deep` pierces the BaseTableExpandable scoped styling. Fallback
   offset 200px covers the initial paint before the filter-height
   ResizeObserver runs. Search-row offset uses a fixed 44px estimate
   of the sort-row height — bump this here if the design changes. */
.dsv-page[data-v-6613b814] .bp-tbl .bp-tbl-thead-sort th {
  position: sticky;
  top: calc(64px + var(--dsv-filter-h, 200px));
  z-index: 11;                       /* one higher than search row */
  background: #191a37;                /* sort row is dark-navy in base styles */
}
.dsv-page[data-v-6613b814] .bp-tbl .bp-tbl-thead-search th {
  position: sticky;
  /* Sort row height comes from a live ResizeObserver in the script
     (--dsv-sort-row-h). Fallback 44px only covers the first paint. */
  top: calc(64px + var(--dsv-filter-h, 200px) + var(--dsv-sort-row-h, 44px));
  z-index: 10;
  background: #ffffff;                /* opaque against scrolling body */
}
/* Subtle bottom border on the last sticky row so it reads as a
   visual separator from the scrolling body. */
.dsv-page[data-v-6613b814] .bp-tbl .bp-tbl-thead-search th {
  box-shadow: inset 0 -1px 0 #e4e7f0;
}

/* Re-round the top-left / top-right corners of the sticky header.
   The base `.bp-tbl-scroll` container carries `border-radius: 10px`
   + `overflow-x: auto`, which used to CLIP the header into rounded
   corners for free. This view overrides that container to
   `overflow: visible` above so `position: sticky` on the <th>s can
   escape it — but that also strips the clip, leaving square header
   corners. Applying the radius directly to the outermost sticky
   cells restores the previous visual without breaking sticky. */
.dsv-page[data-v-6613b814] .bp-tbl .bp-tbl-thead-sort th:first-child {
  border-top-left-radius: 10px;
}
.dsv-page[data-v-6613b814] .bp-tbl .bp-tbl-thead-sort th:last-child {
  border-top-right-radius: 10px;
}
.dsv-header-identity[data-v-6613b814] {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.dsv-icon-box[data-v-6613b814] {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #fff0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dsv-header-text[data-v-6613b814] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dsv-title[data-v-6613b814] {
  font-size: 20px;
  font-weight: 700;
  color: #1a1d35;
  margin: 0;
}
.dsv-subtitle[data-v-6613b814] {
  font-size: 13px;
  color: #6b7db8;
  margin: 0;
}



/* ── Filter grid ── */
.dsv-filter-field--wide[data-v-6613b814] { grid-column: span 2;
}
/* Revenue slider — stack the track above the $ min / $ max labels so
   long USD strings (e.g. "$ 9,346,000,000") can't compress the drag
   track. BaseRangeSlider's `.bp-rs-box` is a single flex row of
   [min-val] [track] [max-val]; we override its layout via `:deep()` to
   a two-row grid:
     row 1: track spans the full width
     row 2: min $ pinned left, max $ pinned right
   Height auto-grows to fit the two rows; padding is bumped a touch so
   the values don't crowd against the track. Scoped to `--rev-stacked`
   so the Win % slider (sibling in the same filter panel) keeps its
   compact inline layout. */
.dsv-filter-field--rev-stacked[data-v-6613b814] .bp-rs-box {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  -moz-column-gap: 0;
       column-gap: 0;
  row-gap: 6px;
  height: auto;
  padding: 8px 12px 6px;
}
.dsv-filter-field--rev-stacked[data-v-6613b814] .bp-rs-box > .bp-rs-track-wrap {
  grid-row: 1;
  grid-column: 1;
}
/* The two .bp-rs-val label divs are display:none'd below (their text
   comes from format-value="" now, and the editable overlay below the
   slider handles the display). No grid placement rules needed. */
.dsv-filter-field .bp-label[data-v-6613b814] { font-size: 11px; font-weight: 700; margin-bottom: 1px;
}
.dsv-filter-field .bp-form-group[data-v-6613b814] { gap: 5px;
}

/* Editable-in-place min / max labels for the revenue slider. Rendered
   AS FLOW-BELOW siblings of the slider (not absolute-positioned) so
   they can never overlap the drag handles or catch clicks meant for
   the track. The slider's own .bp-rs-val labels are blanked via
   format-value="" and then display:none'd here so we don't get a
   ghost empty row above these editable ones. Visually the user sees
   the slider on top + red editable numbers immediately below — same
   layout as the original static labels, just typeable. */
.dsv-filter-field--rev-stacked[data-v-6613b814] .bp-rs-box > .bp-rs-val {
  display: none;
}
.dsv-rev-inline-inputs[data-v-6613b814] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  /* Zero horizontal padding — inputs sit flush against the slider
     box's outer edges (left input pinned all the way left, right
     input pinned all the way right). Previously used 12px to match
     the slider box's inner padding, but that indented the inputs
     enough to truncate long values (e.g., "$ 2,101,527,617") on
     the min side. Matching the outer edge gives full width for
     comfortable readability at USD-billions scale. */
  padding: 0;
  margin-top: 4px;
}
.dsv-rev-inline-input[data-v-6613b814] {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: #da2128;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 6px;
  min-width: 0;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
  /* Equal width both sides so long values ("$ 2,101,527,617" is 15
     chars including "$ ") render fully on min AND max. Widened from
     120/160 to 160 both — right side had headroom, left didn't. */
  width: 160px;
}
.dsv-rev-inline-input--min[data-v-6613b814] { text-align: left;  flex: 0 1 auto;
}
.dsv-rev-inline-input--max[data-v-6613b814] { text-align: right; flex: 0 1 auto;
}
.dsv-rev-inline-input[data-v-6613b814]:hover:not(:disabled) {
  border-color: rgba(218, 33, 40, 0.35);
  cursor: text;
}
.dsv-rev-inline-input[data-v-6613b814]:focus {
  outline: none;
  border-color: #da2128;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(218, 33, 40, 0.12);
  cursor: text;
}
.dsv-rev-inline-input[data-v-6613b814]:disabled {
  color: #c4c9de;
  cursor: not-allowed;
}
.dsv-rev-inline-input[data-v-6613b814]::-moz-placeholder { color: #9098b0; font-weight: 500;
}
.dsv-rev-inline-input[data-v-6613b814]::placeholder { color: #9098b0; font-weight: 500;
}


/* ── Truncating text cell (Sales Owner, Account Name) ── */
.dsv-cell-truncate[data-v-6613b814] {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1a1d35;
}

/* ── Deal ID + version badge ── */
.dsv-deal-cell[data-v-6613b814] {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.dsv-deal-id-stack[data-v-6613b814] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dsv-deal-id[data-v-6613b814] {
  display: block;
  font-weight: 700;
  color: #1a1d35;
}
.dsv-version-badge[data-v-6613b814] {
  display: inline-block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 6px;
  background: transparent;
  color: #1a1d35;
  letter-spacing: 0.2px;
}

/* ── More-actions (⋯) button + popover menu ── */
.dsv-more-btn[data-v-6613b814] {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #d1d5e8;
  background: #fff;
  color: #4e5a82;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(15, 17, 40, 0.04);
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.dsv-more-btn[data-v-6613b814]:hover:not(:disabled) {
  background: #eef2ff;
  border-color: #b8c4ee;
  color: #1a1d35;
  box-shadow: 0 2px 4px rgba(15, 17, 40, 0.08);
}
.dsv-more-btn[data-v-6613b814]:active:not(:disabled) {
  background: #e0e7ff;
  box-shadow: 0 1px 2px rgba(15, 17, 40, 0.06);
}
.dsv-more-btn--disabled[data-v-6613b814],
.dsv-more-btn[data-v-6613b814]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
/* .dsv-more-menu and .dsv-more-item rules live in the unscoped \3c style> block below
   because the menu is teleported to <body> and wouldn't pick up scoped data attributes. */

/* ── Action buttons group ── */
.dsv-action-btns[data-v-6613b814] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding-right: 5px;
}

/* ── Revenue cell ── */
.dsv-revenue[data-v-6613b814] {
  display: block;
  text-align: right;
  font-weight: 600;
  color: #1a1d35;
  white-space: nowrap;
}

/* ── Opportunity Name cell ── */
.dsv-opp-cell[data-v-6613b814] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dsv-opp-text-stack[data-v-6613b814] {
  flex: 1 1 auto;
  min-width: 0;
}
.dsv-opp-name[data-v-6613b814] {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1a1d35;
  font-weight: 700;
}
.dsv-opp-number[data-v-6613b814] {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #6b7db8;
  margin-top: 2px;
  white-space: nowrap;
}


/* ── Win % bar ── */
.dsv-winbar[data-v-6613b814] { display: flex; align-items: center; gap: 5px;
}
.dsv-winbar-track[data-v-6613b814] {
  flex: 1;
  height: 7px;
  background: #e9eaf2;
  border-radius: 99px;
  overflow: hidden;
  min-width: 28px;
}
.dsv-winbar-fill[data-v-6613b814] { height: 100%; border-radius: 99px; transition: width 0.3s ease;
}
.dsv-winbar-fill--green[data-v-6613b814] { background: #22c55e;
}
.dsv-winbar-fill--red[data-v-6613b814]   { background: #da2128;
}
.dsv-winbar-label[data-v-6613b814] {
  font-size: 11px;
  font-weight: 600;
  color: #4e5a82;
  white-space: nowrap;
  min-width: 26px;
  text-align: right;
}

/* ── Copy icon button ── */
.dsv-copy-btn[data-v-6613b814] {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  width:          30px;
  height:         30px;
  border-radius:  7px;
  border:         1px solid #d1d5e8;
  background:     #fff;
  color:          #6b7db8;
  cursor:         pointer;
  flex-shrink:    0;
  transition:     background 0.15s, border-color 0.15s, color 0.15s;
}
.dsv-copy-btn[data-v-6613b814]:hover {
  background:     #f5f6fb;
  border-color:   #b0b7d8;
  color:          #1a1d35;
}
.dsv-copy-btn[data-v-6613b814]:disabled {
  opacity: 0.45;
  cursor:  not-allowed;
}

/* ── Child row version badge — muted grey (no border) ── */
[data-v-6613b814] .bp-tbl-row--child .dsv-version-badge {
  background: transparent;
  border: none;
  color: #9098b0;
}

/* ── Child row left accent border ── */
[data-v-6613b814] .bp-tbl-row--child td:first-child {
  box-shadow: inset 3px 0 0 #b91c22;
}

/* ── Status badges ── */
.bp-tbl-status[data-v-6613b814] {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  padding:        3px 9px;
  border-radius:  99px;
  font-size:      11px;
  font-weight:    600;
  white-space:    nowrap;
  letter-spacing: 0.2px;
}
.bp-tbl-status-dot[data-v-6613b814] {
  width:        6px;
  height:       6px;
  border-radius: 50%;
  flex-shrink:  0;
}
/* InProgress — blue */
.bp-tbl-status--inprogress[data-v-6613b814] {
  background: #eff6ff;
  color:      #2563eb;
}
.bp-tbl-status--inprogress .bp-tbl-status-dot[data-v-6613b814] { background: #3b82f6;
}
/* Develop — amber */
.bp-tbl-status--develop[data-v-6613b814] {
  background: #fffbeb;
  color:      #b45309;
}
.bp-tbl-status--develop .bp-tbl-status-dot[data-v-6613b814] { background: #f59e0b;
}
/* Proposed — green */
.bp-tbl-status--proposed[data-v-6613b814] {
  background: #f0fdf4;
  color:      #16a34a;
}
.bp-tbl-status--proposed .bp-tbl-status-dot[data-v-6613b814] { background: #22c55e;
}
/* NoGo — red */
.bp-tbl-status--nogo[data-v-6613b814] {
  background: #fff1f2;
  color:      #dc2626;
}
.bp-tbl-status--nogo .bp-tbl-status-dot[data-v-6613b814] { background: #ef4444;
}
/* Rejected — grey */
.bp-tbl-status--rejected[data-v-6613b814] {
  background: #f3f4f6;
  color:      #6b7280;
}
.bp-tbl-status--rejected .bp-tbl-status-dot[data-v-6613b814] { background: #9ca3af;
}

/* ── Add New button ── */
.dsv-new-btn[data-v-6613b814] {
  display:         inline-flex    !important;
  flex-direction:  row            !important;
  align-items:     center         !important;
  gap:             8px            !important;
  background:      #da2128        !important;
  color:           #fff           !important;
  border:          1px solid #da2128 !important;
  border-radius:   8px            !important;
  padding:         9px 20px       !important;
  font-size:       13px           !important;
  font-weight:     600            !important;
  font-family:     inherit        !important;
  cursor:          pointer        !important;
  white-space:     nowrap         !important;
  text-decoration: none           !important;
  line-height:     1.4            !important;
}
.dsv-new-btn[data-v-6613b814]:hover { background: #b91c22 !important; border-color: #b91c22 !important;
}

/* ── Error ── */
.dsv-error[data-v-6613b814] {
  background: #fff5f5;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  color: #b91c1c;
}

/* ── KPI card ── */
.dsv-kpi-card[data-v-6613b814] {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: #fff;
  border: 1px solid #e4e7f0;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.dsv-kpi-year[data-v-6613b814] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  font-size: 22px;
  font-weight: 800;
  color: #1a1d35;
  letter-spacing: -0.5px;
  background: #f9fafc;
  min-width: 80px;
}
.dsv-kpi-divider[data-v-6613b814] {
  width: 1px;
  background: #e4e7f0;
  flex-shrink: 0;
}
.dsv-kpi-stat[data-v-6613b814] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 12px 18px;
}
.dsv-kpi-numbers[data-v-6613b814] {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.dsv-kpi-count[data-v-6613b814] {
  font-size: 22px;
  font-weight: 800;
  color: #1a1d35;
  line-height: 1;
}
.dsv-kpi-rev[data-v-6613b814] {
  font-size: 14px;
  font-weight: 700;
  color: #da2128;
}
.dsv-kpi-label[data-v-6613b814] {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #9098b0;
  white-space: nowrap;
}
@media (max-width: 639px) {
.dsv-page[data-v-6613b814] { padding: 16px 16px 24px;
}
.dsv-kpi-card[data-v-6613b814] { width: 100%;
}
.dsv-kpi-year[data-v-6613b814] { padding: 12px 14px; font-size: 18px; min-width: 60px;
}
.dsv-kpi-stat[data-v-6613b814] { padding: 10px 14px;
}
}

/* ── Pending-delete row highlight (unscoped) ──────────────────────────
   Applied on the row (<tr>) that contains the opp-name cell marked
   `dsv-opp-cell--pending-delete`. Lives in the UNSCOPED block because
   Vue's scoped transformer doesn't reliably compile `:has()` when
   nested inside `:deep()` — the compiled selector silently omits the
   `:has(...)` part and the whole rule stops matching.

   No z-index escalation — the earlier attempt at `z-index: 10000` on
   the cells tied with the modal card and (due to Vue's teleport +
   stacking-context quirks) actually rendered the row IN FRONT of the
   modal instead of behind it. Simpler solution: pick a bright enough
   red that stays clearly red under the 45% backdrop dim (BaseAlert's
   `rgba(0,0,0,0.45)`). #ef4444 under 45% dim = ~rgb(131,37,37) —
   distinctly red, no z-index gymnastics needed, modal renders on top
   naturally.

   Covers both parent (latest version) and child (older version) rows
   because a deletion can target either. */
.bp-tbl-row:has(.dsv-opp-cell--pending-delete) .bp-tbl-td {
  background: #ef4444 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: inset 0 -1px 0 0 #991b1b !important;
}
/* Force white text on every descendant of a highlighted-row cell —
   `color` doesn't cascade through elements that set their own colour
   (opp-number span, date span, etc.), so `color: #fff` on the td alone
   leaves child text in its original hue. The universal selector +
   `!important` beats every per-element colour rule.

   EXCLUDED: the status pill (.bp-tbl-status) and the more-actions
   button (.dsv-more-btn) — both carry meaningful colour of their own
   (status colour + dot icons) which would become white-on-white or
   white-on-pale-blue and read as invisible. `:not()` with a descendant
   selector skips the whole subtree of each excluded class so their
   inner spans, dots, SVG shapes keep their original colour. */
.bp-tbl-row:has(.dsv-opp-cell--pending-delete) .bp-tbl-td *:not(.bp-tbl-status):not(.bp-tbl-status *):not(.dsv-more-btn):not(.dsv-more-btn *) {
  color: #ffffff !important;
}
.bp-tbl-row:has(.dsv-opp-cell--pending-delete) .bp-tbl-td:first-child {
  box-shadow: inset 6px 0 0 0 #991b1b, inset 0 -1px 0 0 #991b1b !important;
}
.dsv-more-menu {
  position: fixed;
  z-index: 1200;
  min-width: 160px;
  background: #fff;
  border: 1px solid #d1d5e8;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(15, 17, 40, 0.12);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dsv-more-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 13px;
  color: #1a1d35;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background 0.15s;
}
.dsv-more-item:hover {
  background: #eef2ff;
}
.dsv-more-item svg {
  color: #4e5a82;
  flex-shrink: 0;
}
/* Destructive menu item — red text + red hover so users read "Delete
   (this version)" as an intentional destructive choice, distinct from
   the neutral Copy / Share items above it. */
.dsv-more-item--danger        { color: #b91c1c;
}
.dsv-more-item--danger svg    { color: #b91c1c;
}
.dsv-more-item--danger:hover  { background: #fee2e2; color: #991b1b;
}

/* Disabled menu item — greyed text/icon, no hover feedback, not-allowed
   cursor so the affordance clearly reads as "action exists but not
   applicable here". Overrides the `--danger` red hover above so a
   disabled Delete doesn't flash red on cursor-over. Also strips the
   background transition so mouse-over is a no-op. */
.dsv-more-item:disabled,
.dsv-more-item:disabled:hover {
  color: #9098b0;
  background: transparent;
  cursor: not-allowed;
}
.dsv-more-item:disabled svg { color: #b7bdd0;
}

/* Pending-delete row highlight lives in the UNSCOPED style block below —
   Vue's scoped-CSS transformer doesn't compile `:has()` reliably when
   nested inside `:deep()`, so the rule silently no-ops. Unscoped
   bypasses the transformer entirely. */

/* Prevent long CRM user labels from expanding the select width */
[data-v-f577399b] .p-select-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-placeholder[data-v-f577399b] { color: #6b7db8;
}

/* Combined-answer alert line. Same light-red banner style used by the
   W&R Box 1 helper (`.wr-helper--warn` in WrTab.vue) — light red bg,
   deep red bold text, rounded corners. Keeps a consistent visual for
   "please act on this" messages across the dealsheet. */
.obi-work-inclusion-alert[data-v-f577399b] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  padding: 10px 14px;
  background: #fee2e2;
  color: #b91c1c;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.obi-work-inclusion-alert__icon[data-v-f577399b] {
  flex-shrink: 0;
}

/* Blue info banner for the PCI Screening advisory. Same layout as
   `.obi-work-inclusion-alert` — flex row with an info-circle icon
   flush-left, text (with inline link) filling the rest — but on a
   soft-blue palette so the "informational, not blocking" message is
   distinguishable at a glance from the red "cannot progress" banner
   used elsewhere. */
.obi-pci-guidance-info[data-v-f577399b] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  padding: 10px 14px;
  background: #eff6ff;             /* blue-50 tint */
  color: #1e3a8a;                  /* blue-900 body copy */
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
.obi-pci-guidance-info__icon[data-v-f577399b] {
  flex-shrink: 0;
  color: #1d4ed8;                  /* blue-700 icon */
}
/* Inline anchor — underline stays on so it reads as a link even inside
   the info-banner background; hover deepens the tint for feedback. */
.obi-pci-guidance-info__link[data-v-f577399b] {
  color: #1d4ed8;
  font-weight: 700;
  text-decoration: underline;
}
.obi-pci-guidance-info__link[data-v-f577399b]:hover,
.obi-pci-guidance-info__link[data-v-f577399b]:focus {
  color: #1e3a8a;
}

/* Work-inclusion reference callout — amber notice panel rendered below
   the "Is the Work Included…" dropdown. Read-only reference list; content
   swaps based on the Industry Aligned answer above. Palette matches the
   read-only badge convention (amber tint + deep amber-brown text). */
.obi-work-inclusion[data-v-f577399b] {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  padding: 12px 14px;
  color: #92400e;
}
.obi-work-inclusion-header[data-v-f577399b] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.obi-work-inclusion-header svg[data-v-f577399b] { flex-shrink: 0;
}
.obi-work-inclusion-grid[data-v-f577399b] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.obi-wi-tile[data-v-f577399b] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 10px;
  background: #fff;
  border: 1px solid #fde68a;
  border-radius: 8px;
  text-align: center;
  min-height: 82px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.obi-wi-icon[data-v-f577399b] {
  color: #b45309;
  flex-shrink: 0;
}
.obi-wi-tile-label[data-v-f577399b] {
  font-size: 12px;
  font-weight: 600;
  color: #78350f;
  line-height: 1.3;
}
/* Hover-tooltip behaviour for the four industryAligned='No' cards
   (Oil & Gas / Coal / Defence / Cannabis). Tiles that own a tooltip
   flag with `.obi-wi-tile--has-tooltip` so the help-cursor + hover
   ring only apply to those four cards and NOT to the excluded-industry
   ("Yes" branch) cards (Gambling / Adult / Tobacco / Prisons) which
   currently have no tooltip content. */
.obi-wi-tile--has-tooltip[data-v-f577399b] {
  position: relative;
  cursor: help;
  transition: box-shadow 150ms ease, border-color 150ms ease,
              background-color 150ms ease, transform 150ms ease;
}
/* Full hover highlight — warmer background, amber border, soft glow ring
   + drop shadow, and a 1px lift. Together they read as "this card is
   active" without competing with the tooltip's own visual weight. */
.obi-wi-tile--has-tooltip[data-v-f577399b]:hover {
  border-color: #d97706;
  background: #fffbeb;
  box-shadow:
    0 0 0 3px rgba(217, 119, 6, 0.18),
    0 6px 16px rgba(180, 83, 9, 0.22);
  transform: translateY(-1px);
}
/* Tooltip container — position: fixed, teleported to <body>. JS sets
   `top` / `left` from the tile's `getBoundingClientRect()` with edge
   clamping so the tooltip never bleeds off the viewport, and picks
   above vs below based on the REAL rendered height (measured in Pass 2)
   so it never covers the dealsheet tab bar or the sticky section header
   below. Reserved with `visibility: hidden` for one frame so the
   post-measure adjustment never happens in front of the user. */
.obi-wi-tooltip[data-v-f577399b] {
  position: fixed;
  /* `width` is set inline from JS per-card (Defence uses a wider layout
     so its longer copy wraps less and stays short enough to fit below
     the tile without flipping over the top nav). */
  max-width: calc(100vw - 24px);
  background: #fffdf5;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.22), 0 2px 8px rgba(15, 23, 42, 0.08);
  z-index: 1000;
  text-align: left;
  color: #4b3608;
  font-size: 12px;
  line-height: 1.55;
  pointer-events: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 140ms ease, transform 140ms ease;
}
.obi-wi-tooltip--above[data-v-f577399b] { transform: translateY(-2px);
}
.obi-wi-tooltip--visible[data-v-f577399b] {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
/* Directional arrow — rotated 10x10 square anchored to the tooltip's
   top edge (placement=below) or bottom edge (placement=above). The
   `--arrow-x` variable is set inline from JS so the arrow points at the
   source tile's centre regardless of whether the tooltip body has been
   clamped horizontally. */
.obi-wi-tooltip-arrow[data-v-f577399b] {
  position: absolute;
  left: var(--arrow-x, 50%);
  width: 10px;
  height: 10px;
  background: #fffdf5;
  border: 1px solid #fde68a;
  transform: translateX(-50%) rotate(45deg);
}
.obi-wi-tooltip--below .obi-wi-tooltip-arrow[data-v-f577399b] {
  top: -6px;
  border-right: none;
  border-bottom: none;
}
.obi-wi-tooltip--above .obi-wi-tooltip-arrow[data-v-f577399b] {
  bottom: -6px;
  border-left: none;
  border-top: none;
}
.obi-wi-tooltip-title[data-v-f577399b] {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #78350f;
  margin-bottom: 10px;
}
.obi-wi-tooltip-section[data-v-f577399b] {
  margin-bottom: 10px;
  padding-left: 10px;
  border-left: 3px solid transparent;
}
.obi-wi-tooltip-section[data-v-f577399b]:last-child { margin-bottom: 0;
}
.obi-wi-tooltip-section p[data-v-f577399b] {
  margin: 4px 0 0;
  color: #3f2f0a;
}
/* Section headers — brand-red for "Prohibited", forest-green for
   "Allowable", amber for "Conditional — careful/senior review". Font
   is uppercase + heavier so each classification reads at a glance. */
.obi-wi-tooltip-label[data-v-f577399b] {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.obi-wi-tooltip-section--prohibited[data-v-f577399b]  { border-left-color: #dc2626;
}
.obi-wi-tooltip-section--prohibited  .obi-wi-tooltip-label[data-v-f577399b] { color: #b91c1c;
}
.obi-wi-tooltip-section--allowable[data-v-f577399b]   { border-left-color: #16a34a;
}
.obi-wi-tooltip-section--allowable   .obi-wi-tooltip-label[data-v-f577399b] { color: #15803d;
}
.obi-wi-tooltip-section--conditional[data-v-f577399b] { border-left-color: #d97706;
}
.obi-wi-tooltip-section--conditional .obi-wi-tooltip-label[data-v-f577399b] { color: #b45309;
}

/* Custom prefix input for Est. Project revenue (base). Mimics the shared
   `.bp-input` visually (border, radius, focus ring) but its content is a
   flex row of [symbol, native input] so both children sit on the same
   baseline via `align-items: center` — no absolute positioning, no font
   metric guesswork. The native input has its own border/outline removed
   so the outer container renders the single visible border. */
.ds-currency-field[data-v-f577399b] {
  display: flex;
  align-items: center;
  gap: 8px;                 /* space between symbol and numeric text */
  border: 1px solid #c0c1cb;
  border-radius: 8px;
  background: #fff;
  padding: 0 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
  min-height: 38px;         /* match .bp-input rendered height */
}
.ds-currency-field[data-v-f577399b]:focus-within {
  border-color: #da2128;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
}
.ds-currency-prefix[data-v-f577399b] {
  color: #4e5a82;
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  pointer-events: none;
  flex-shrink: 0;
}
.ds-currency-native[data-v-f577399b] {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 9px 0;
  font-family: inherit;
  font-size: 13.5px;
  color: #1a1d35;
  /* Hide the native spin buttons — matches `.bp-input type=number` behaviour
     which browsers vary on. Keeps the field visually clean. */
  -moz-appearance: textfield;
}
.ds-currency-native[data-v-f577399b]::-webkit-outer-spin-button,
.ds-currency-native[data-v-f577399b]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── Add account popup body ── */
.ds-add-account-body[data-v-f577399b] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ds-add-account-footer[data-v-f577399b] {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

/* CRM sync disclaimer inside the Add Account / Add Client Contact popups
   — soft-red pill so it reads as a persistent note the user must
   acknowledge before clicking Add. Matches the red-tone note pattern
   used elsewhere (TEE weekly-effort reminder, CFC standard note): info
   icon on the left, gap, then the sentence. */
.ds-add-crm-note[data-v-f577399b] {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: -4px 0 0;
  padding: 8px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  color: #991b1b;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
}
.ds-add-crm-note svg[data-v-f577399b]  { flex-shrink: 0; margin-top: 1px;
}
.ds-add-crm-note span[data-v-f577399b] { min-width: 0;
}

/* Red info banner rendered at the top of the Client section — same red
   tone as .ds-add-crm-note but sits INSIDE the section grid and spans
   the full row via `grid-column: 1 / -1` so it reads as a section-level
   heads-up rather than a per-field hint. */
.ds-client-info-note[data-v-f577399b] {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  color: #991b1b;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}
.ds-client-info-note svg[data-v-f577399b]  { flex-shrink: 0; margin-top: 2px;
}
.ds-client-info-note span[data-v-f577399b] { min-width: 0;
}

/* ── Practice selection ── */
.ds-practice-grid[data-v-f577399b] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ds-practice-card[data-v-f577399b] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 10px 16px;
  border: 2px solid #e4e7f0;
  border-radius: 12px;
  background: #f8f9fc;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  text-align: center;
  font-family: inherit;
  outline: none;
  width: 100%;
}
.ds-practice-card[data-v-f577399b]:hover {
  border-color: #aab0cc;
  background: #f0f2fb;
  box-shadow: 0 3px 10px rgba(25,26,55,0.09);
}
.ds-practice-check[data-v-f577399b] {
  position: absolute;
  top: 9px; right: 9px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid #d1d5e8;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s;
  flex-shrink: 0;
}
.ds-practice-card--on .ds-practice-check[data-v-f577399b] { border-color: #da2128; background: #da2128;
}
.ds-practice-icon[data-v-f577399b] {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: #e9eaf2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7db8;
  transition: background 0.2s, color 0.2s;
}
.ds-practice-card--on .ds-practice-icon[data-v-f577399b] { background: #fee2e2; color: #da2128;
}
.ds-practice-code[data-v-f577399b] { font-size: 13px; font-weight: 800; color: #4e5a82; letter-spacing: 0.4px; margin-top: 2px;
}
.ds-practice-card--on .ds-practice-code[data-v-f577399b] { color: #da2128;
}
.ds-practice-name[data-v-f577399b] { font-size: 10.5px; color: #9098b0; line-height: 1.35;
}
.ds-practice-card--on .ds-practice-name[data-v-f577399b] { color: #b05560;
}
.ds-practice-loading[data-v-f577399b] { font-size: 12px; color: #9098b0; padding: 16px 0; text-align: center;
}
@media (max-width: 640px)  {
.ds-practice-grid[data-v-f577399b] { grid-template-columns: repeat(2, 1fr); max-width: 100%;
}
}

/* ── dss+ Assets ── */
.ds-asset-trigger[data-v-f577399b] { max-width: 480px;
}
.ds-asset-reveal[data-v-f577399b] {
  margin-top: 18px;
  padding: 16px 16px 10px;
  background: #f8f9fc;
  border: 1px solid #e4e7f0;
  border-radius: 10px;
}
.ds-asset-grid-header[data-v-f577399b] { font-size: 12.5px; color: #4e5a82; line-height: 1.55; margin-bottom: 14px;
}
.ds-asset-legend[data-v-f577399b] { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; flex-wrap: wrap;
}
.ds-asset-legend-item[data-v-f577399b] { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #9098b0; font-weight: 500;
}
.ds-asset-legend-icon[data-v-f577399b] { width: 20px; height: 20px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center;
}
.ds-asset-legend-item--ppt .ds-asset-legend-icon[data-v-f577399b] { background: #fff0f0; border: 1px solid #f5c6c6; color: #da2128;
}
.ds-asset-legend-item--url .ds-asset-legend-icon[data-v-f577399b] { background: #eff6ff; border: 1px solid #bcd0f7; color: #2563eb;
}
.ds-asset-loading[data-v-f577399b] { font-size: 12px; color: #9098b0; padding: 12px 0; text-align: center;
}
.ds-asset-grid[data-v-f577399b] { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 24px;
}
.ds-asset-row[data-v-f577399b] {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 8px; border: none;
  background: transparent; cursor: pointer; text-align: left;
  font-family: inherit; transition: background 0.15s; width: 100%;
}
.ds-asset-row[data-v-f577399b]:hover { background: #eef0f8;
}
.ds-asset-row--checked[data-v-f577399b] { background: #fff5f5;
}
.ds-asset-check[data-v-f577399b] {
  width: 17px; height: 17px; border-radius: 4px;
  border: 2px solid #d1d5e8; background: #fff; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}
.ds-asset-row--checked .ds-asset-check[data-v-f577399b] { border-color: #da2128; background: #da2128;
}
.ds-asset-label[data-v-f577399b] { flex: 1; font-size: 12.5px; color: #4e5a82; line-height: 1.3; min-width: 0;
}
.ds-asset-row--checked .ds-asset-label[data-v-f577399b] { color: #da2128; font-weight: 600;
}
.ds-asset-link[data-v-f577399b] {
  flex-shrink: 0; width: 27px; height: 27px; border-radius: 6px;
  border: 1px solid #e4e7f0; background: #f8f9fc;
  display: flex; align-items: center; justify-content: center;
  color: #9098b0; text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ds-asset-link--ppt[data-v-f577399b]:hover { background: #fff0f0; color: #da2128; border-color: #f5c6c6;
}
.ds-asset-link--url[data-v-f577399b]:hover { background: #eff6ff; color: #2563eb; border-color: #bcd0f7;
}
.ds-asset-link--empty[data-v-f577399b] { border-color: transparent; background: transparent;
}
.ds-asset-extra-info[data-v-f577399b] {
  margin-top: 18px; padding: 14px 16px; background: #fff;
  border: 1px solid #e4e7f0; border-radius: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.ds-asset-extra-line[data-v-f577399b] { font-size: 13px; line-height: 1.5; color: #4e5a82; margin: 0;
}
.ds-asset-extra-line--red[data-v-f577399b]  { color: #da2128;
}
.ds-asset-extra-line--bold[data-v-f577399b] { font-weight: 800;
}
.ds-asset-extra-line--gray[data-v-f577399b] { color: #9098b0;
}
.ds-asset-extra-link[data-v-f577399b] { color: #da2128; font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
}
.ds-asset-extra-link[data-v-f577399b]:hover { color: #b01820;
}

/* Red note rendered at the bottom of the assets sub-box when ORM is
   selected AND dss+ 360 is unchecked AND a reason has been saved.
   Bordered card + brand-red label so it reads as a REQUIRED explanation
   rather than incidental commentary. */
.ds-asset-removal-reason[data-v-f577399b] {
  margin-top: 12px;
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 4px solid #da2128;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ds-asset-removal-reason-label[data-v-f577399b] {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #da2128;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.ds-asset-removal-reason-text[data-v-f577399b] {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #1a1d35;
  white-space: pre-wrap;
}

/* In-popup Save/Cancel guidance note. Plain red text sat directly under
   the textarea — no background / border / icon so it reads as a hint
   attached to the input rather than a separate banner. */
.ds-dss360-removal-note[data-v-f577399b] {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #da2128;
}
/* Group label above the radio list — uppercase, small, spaced like a
   standard form label but sits directly above the option cards. */
.ds-dss360-removal-label[data-v-f577399b] {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1a1d35;
  margin: 0 0 8px;
}
/* Radio option list — stacked full-width cards. Each card is the label
   wrapper (so clicking anywhere selects). Native radio input stays
   visible (matches the image reference) but styled small on the left. */
.ds-dss360-removal-options[data-v-f577399b] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ds-dss360-removal-option[data-v-f577399b] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid #d1d5e8;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ds-dss360-removal-option[data-v-f577399b]:hover {
  background: #fafbfd;
}
.ds-dss360-removal-option--selected[data-v-f577399b] {
  background: #fef2f2;              /* soft red highlight for the picked option */
  border-color: #da2128;
}
.ds-dss360-removal-radio[data-v-f577399b] {
  width: 16px;
  height: 16px;
  accent-color: #da2128;             /* brand-red radio dot */
  cursor: pointer;
  flex-shrink: 0;
}
.ds-dss360-removal-option-label[data-v-f577399b] {
  font-size: 13.5px;
  color: #1a1d35;
  line-height: 1.4;
}
@media (max-width: 640px) {
.ds-asset-grid[data-v-f577399b] { grid-template-columns: 1fr;
}
}

/* ── Key Milestone Dates ── */
.ds-ms-timeline[data-v-f577399b] { display: flex; align-items: flex-start; overflow-x: auto; padding: 4px 0;
}
.ds-ms-card[data-v-f577399b] { display: flex; flex-direction: column; align-items: center; min-width: 100px; flex: 1;
}
.ds-ms-connector[data-v-f577399b] {
  flex: 1; height: 3px; min-width: 12px;
  background: #9098b8; margin-top: 19px;
  border-radius: 2px; flex-shrink: 0; transition: background 0.2s;
}
.ds-ms-connector--filled[data-v-f577399b] { background: #191a37;
}
.ds-ms-badge[data-v-f577399b] {
  width: 40px; height: 40px; border-radius: 50%;
  background: #e4e6f0; color: #9098b0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(25,26,55,0.08);
  transition: background 0.2s, color 0.2s;
}
.ds-ms-badge--filled[data-v-f577399b] { background: #191a37; color: #fff; box-shadow: 0 2px 6px rgba(25,26,55,0.22);
}
.ds-ms-body[data-v-f577399b] { width: 100%; display: flex; flex-direction: column; align-items: center;
}
.ds-ms-name[data-v-f577399b] {
  font-size: 10.5px; font-weight: 600; color: #4e5a82;
  text-align: center; margin: 8px 0 6px;
  min-height: 28px; display: flex; align-items: center;
  line-height: 1.3; padding: 0 4px;
}
.ds-ms-date-wrap[data-v-f577399b] { width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 0 3px; box-sizing: border-box;
}
.ds-ms-date-input[data-v-f577399b] {
  width: 100%; padding: 5px 4px; border-radius: 6px;
  border: 1px solid #e0d88a; background: #fffde7;
  font-size: 11px; font-family: inherit; color: #1a1d35;
  outline: none; text-align: center;
  transition: border-color 0.15s; box-sizing: border-box;
}
.ds-ms-date-input[data-v-f577399b]:focus { border-color: #c8b800;
}
.ds-ms-ind-label[data-v-f577399b] { font-size: 9.5px; font-weight: 600; color: #9098b0; font-style: italic; text-align: center; margin-top: 1px;
}
.ds-ms-ind-input[data-v-f577399b] {
  width: 100%; padding: 5px 4px; border-radius: 6px;
  border: 1px solid #d1d5e8; background: #f0f1f5;
  font-size: 11px; font-family: inherit; color: #9098b0;
  outline: none; text-align: center; cursor: not-allowed; box-sizing: border-box;
}
/* Applied only when the indicative slot has been populated by the milestone
   calculation (onMilestoneChange). Visually separates "calculated" indicative
   dates from the placeholder empty state so the user can see at a glance which
   downstream milestones have been auto-projected. Also inverts the date-picker
   glyph so it stays visible against the dark background. */
.ds-ms-ind-input--filled[data-v-f577399b] {
  background: #191a37;
  color: #fff;
  border-color: #191a37;
}
.ds-ms-ind-input--filled[data-v-f577399b]::-webkit-calendar-picker-indicator { filter: invert(1);
}
@media (max-width: 640px) {
.ds-ms-timeline[data-v-f577399b] { flex-direction: column; align-items: stretch; overflow-x: visible; position: relative;
}
.ds-ms-timeline[data-v-f577399b]::before {
    content: ''; position: absolute;
    left: 19px; top: 20px; bottom: 20px;
    width: 3px; background: #9098b8; border-radius: 2px; z-index: 0;
}
.ds-ms-connector[data-v-f577399b] { display: none;
}
.ds-ms-card[data-v-f577399b] { flex-direction: row; align-items: flex-start; min-width: unset; gap: 14px; margin-bottom: 20px; position: relative; z-index: 1;
}
.ds-ms-card[data-v-f577399b]:last-child { margin-bottom: 0;
}
.ds-ms-badge[data-v-f577399b] { box-shadow: 0 0 0 4px #fff; flex-shrink: 0;
}
.ds-ms-body[data-v-f577399b] { align-items: flex-start; flex: 1;
}
.ds-ms-name[data-v-f577399b] { margin: 2px 0 6px; min-height: unset; text-align: left; padding: 0;
}
.ds-ms-date-wrap[data-v-f577399b] { flex-direction: column; padding: 0; align-items: stretch; gap: 5px;
}
.ds-ms-date-input[data-v-f577399b], .ds-ms-ind-input[data-v-f577399b] { text-align: left;
}
}

/* Sub-Industry click-hint wrapper — occupies one .ds-grid cell so the
   surrounding 3-col layout stays intact. The hint sits directly under
   the BaseSelect with a small gap. Red text signals "you need to do
   something first" without escalating to a full validation error, since
   this is a guardrail rather than a submit-time failure. */
.obi-subind-wrap[data-v-f577399b] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.obi-subind-hint[data-v-f577399b] {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: #dc2626;
  line-height: 1.4;
}

/* ── NCDD / KYC ── */
.ds-kyc-list[data-v-01cd661a] { display: flex; flex-direction: column; gap: 0;
}

/* Groups a KYC row with its optional red note strip so the mandatory-field
   highlight outline wraps around both cleanly. flow-root prevents the note's
   margin-bottom from collapsing outside the wrapper box. */
.ds-kyc-row-group[data-v-01cd661a] { display: flow-root;
}
.ds-kyc-row[data-v-01cd661a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  flex-wrap: wrap;
}
.ds-kyc-question[data-v-01cd661a] {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  color: #1a1d35;
  line-height: 1.5;
  font-weight: 500;
}
.ds-kyc-radios[data-v-01cd661a] {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.ds-kyc-radio[data-v-01cd661a] {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 1rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 9999px;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ds-kyc-radio[data-v-01cd661a]:hover { border-color: #9ca3af;
}
.ds-kyc-radio--yes[data-v-01cd661a] { border-color: #16a34a; background: #f0fdf4;
}
.ds-kyc-radio--no[data-v-01cd661a]  { border-color: #dc2626; background: #fff1f2;
}
.ds-kyc-radio-input[data-v-01cd661a] { display: none;
}
.ds-kyc-radio-label[data-v-01cd661a] {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #6b7280;
  transition: color 0.15s;
}
.ds-kyc-radio--yes .ds-kyc-radio-label[data-v-01cd661a] { color: #15803d;
}
.ds-kyc-radio--no  .ds-kyc-radio-label[data-v-01cd661a] { color: #b91c1c;
}
.ds-kyc-radio--active .ds-kyc-radio-label[data-v-01cd661a] { color: #fff;
}
.ds-kyc-note[data-v-01cd661a] {
  margin: 0 0 10px;
  padding: 8px 12px;
  background: #fff5f5;
  border-left: 3px solid #da2128;
  border-radius: 0 6px 6px 0;
  font-size: 12px;
  color: #b91c1c;
  line-height: 1.5;
}
.ds-kyc-justify[data-v-01cd661a] { padding-bottom: 12px;
}
.ds-kyc-freetext[data-v-01cd661a] { padding: 14px 0;
}
.ds-kyc-divider[data-v-01cd661a] { height: 1px; background: #e4e7f0;
}
@media (max-width: 640px) {
.ds-kyc-row[data-v-01cd661a] { flex-direction: column; align-items: flex-start; gap: 10px;
}
.ds-kyc-radios[data-v-01cd661a] { width: 100%;
}
.ds-kyc-radio[data-v-01cd661a] { flex: 1; justify-content: center;
}
}


/* Delivery Work Location section body — 2-column grid holding two
   sub-boxes side-by-side (Delivery Work Location + Specific Skills
   Language). Same visual pattern as CFC's Invoicing Countries sub-boxes.
   Collapses to a single column on narrow screens so each box stays
   readable. */
.osq-loc-body[data-v-aacc4fee] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}
@media (max-width: 900px) {
.osq-loc-body[data-v-aacc4fee] { grid-template-columns: 1fr;
}
}

/* Individual sub-box — mirrors CFC's `.cfc-ic-box` treatment: rounded
   card with a grey uppercase header strip and a padded content area. */
.osq-sub-box[data-v-aacc4fee] {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
}
.osq-sub-box-header[data-v-aacc4fee] {
  padding: 0.55rem 0.875rem;
  background: #f3f4f6;
  font-size: 0.8rem;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #e5e7eb;
}
.osq-sub-box-content[data-v-aacc4fee] {
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* ── On-site delivery sub-section ── */
.osq-sub-divider[data-v-aacc4fee] {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 0.25rem 0;
}
.osq-sub-header[data-v-aacc4fee] {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Grid: label col | dropdown col | other-input col | btn col */
.osq-loc-headers[data-v-aacc4fee],
.osq-loc-row[data-v-aacc4fee] {
  display: grid;
  grid-template-columns: 170px 1fr 1fr 32px;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.osq-loc-col-head[data-v-aacc4fee] {
  font-size: 0.75rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.osq-loc-col-other[data-v-aacc4fee] { padding-left: 0;
}
.osq-loc-col-btn[data-v-aacc4fee],
.osq-loc-btn-placeholder[data-v-aacc4fee] { width: 32px;
}
.osq-loc-label[data-v-aacc4fee] {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  line-height: 1.3;
}
.osq-loc-other-input[data-v-aacc4fee] {
  width: 100%;
  padding: 0.4rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  outline: none;
  min-width: 0;
  box-sizing: border-box;
}
.osq-loc-other-input[data-v-aacc4fee]:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
@media (max-width: 640px) {
.osq-loc-headers[data-v-aacc4fee] { display: none;
}
.osq-loc-row[data-v-aacc4fee] {
    grid-template-columns: 1fr 32px;
    grid-template-rows: auto auto auto;
}
.osq-loc-row .osq-loc-label[data-v-aacc4fee]      { grid-column: 1 / -1;
}
.osq-loc-row[data-v-aacc4fee] .bp-select   { grid-column: 1;
}
.osq-loc-row .osq-loc-other-input[data-v-aacc4fee] { grid-column: 1;
}
.osq-loc-row .osq-loc-btn-placeholder[data-v-aacc4fee] { display: none;
}
}

/* ── Opportunity Score ── */
.osq-score-list[data-v-aacc4fee] {
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
}
.osq-score-item[data-v-aacc4fee] {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.15s;
}
.osq-score-item[data-v-aacc4fee]:last-child { border-bottom: none;
}
.osq-score-item[data-v-aacc4fee]:hover { background: #f9fafb;
}
.osq-score-item-left[data-v-aacc4fee] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.osq-score-item-label[data-v-aacc4fee] {
  font-size: 0.875rem;
  color: #111827;
  line-height: 1.45;
}
.osq-score-item-question[data-v-aacc4fee] {
  font-size: 0.8rem;
  color: #da2128;
  line-height: 1.4;
}
.osq-score-item-right[data-v-aacc4fee] {
  flex-shrink: 0;
}
.osq-score-radios[data-v-aacc4fee] {
  display: flex;
  gap: 0.375rem;
}
.osq-score-radio[data-v-aacc4fee] {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 1rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #6b7280;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.osq-score-radio[data-v-aacc4fee]:hover { border-color: #9ca3af; color: #374151;
}
.osq-score-radio--yes[data-v-aacc4fee] {
  border-color: #16a34a;
  background: #f0fdf4;
  color: #15803d;
}
.osq-score-radio--no[data-v-aacc4fee] {
  border-color: #dc2626;
  background: #fff1f2;
  color: #b91c1c;
}
.osq-score-radio-input[data-v-aacc4fee] { display: none;
}
.osq-score-footer[data-v-aacc4fee] {
  margin-top: 1rem;
  padding-top: 0.75rem;
}
.osq-score-result-row[data-v-aacc4fee] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}
.osq-score-result-label[data-v-aacc4fee] {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  text-align: right;
}
.osq-score-result-value[data-v-aacc4fee] {
  min-width: 90px;
  padding: 0.375rem 0.75rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 700;
  color: #15803d;
  text-align: right;
}
@media (max-width: 640px) {
.osq-score-item[data-v-aacc4fee] { flex-direction: column; gap: 0.5rem;
}
.osq-score-radios[data-v-aacc4fee] { justify-content: flex-start;
}
}

/* ── Win Probability ── */
.osq-wp-groups[data-v-aacc4fee] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.osq-wp-group[data-v-aacc4fee] {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
}
.osq-wp-group-header[data-v-aacc4fee] {
  padding: 0.5rem 0.875rem;
  background: #f3f4f6;
  font-size: 0.8rem;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #e5e7eb;
}
/* Sub-hint appended to the 4 Win-Probability group headers ("Select the one
   that best applies"). Softer weight and colour so the primary header text
   stays dominant. Only added to the v-for groups — the Opportunity Score
   sub-section reuses the same .osq-wp-group-header class without the hint. */
.osq-wp-group-hint[data-v-aacc4fee] {
  margin-left: 6px;
  font-weight: 500;
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0;
  color: #6b7280;
}

/* Single-select row cards for the four Win Probability sub-boxes. Whole
   row is clickable; selected state shows a light-green wash, a solid green
   4px left border, and flips the right-side pill from "Select…" to
   "✓ Selected". Radio-group semantics are wired via ARIA on the container
   and each row (see the template). */
.osq-wp-row-card[data-v-aacc4fee] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.875rem 0.55rem 0.75rem;
  border-bottom: 1px solid #f3f4f6;
  border-left: 4px solid transparent;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.osq-wp-row-card[data-v-aacc4fee]:last-child { border-bottom: none;
}
.osq-wp-row-card[data-v-aacc4fee]:hover:not(.osq-wp-row-card--selected) {
  background: #f9fafb;
}
.osq-wp-row-card[data-v-aacc4fee]:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px #86efac;
}
.osq-wp-row-card--selected[data-v-aacc4fee] {
  background: #f0fdf4;
  border-left-color: #22c55e;
}
.osq-wp-row-card-label[data-v-aacc4fee] {
  font-size: 0.85rem;
  color: #1a1d35;
  line-height: 1.35;
  flex: 1 1 auto;
  min-width: 0;
}

/* Right-side pill. Width targets the space previously occupied by the
   Yes+No pair combined so the row alignment matches the Opportunity Score
   section above (~120px). */
.osq-wp-select-btn[data-v-aacc4fee] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 120px;
  padding: 5px 12px;
  border: 1px solid #d1d5e8;
  border-radius: 999px;
  background: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  color: #4e5a82;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.osq-wp-row-card:hover:not(.osq-wp-row-card--selected) .osq-wp-select-btn[data-v-aacc4fee] {
  border-color: #86efac;
  color: #16a34a;
}
.osq-wp-select-btn--selected[data-v-aacc4fee] {
  background: #22c55e;
  border-color: #16a34a;
  color: #fff;
}
.osq-score-result-value--neutral[data-v-aacc4fee] {
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #374151;
}

/* Win Probability guidelines note — sits beneath the score-result row.
   Left-aligned so it visually anchors to the same edge as the CRM note
   above it (the CRM note is on the LEFT of the flex row, then the label
   + value are pushed right; this block spans the full width below). */
.osq-wp-guidelines[data-v-aacc4fee] {
  margin-top: 12px;
  padding: 10px 14px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #374151;
  text-align: left;
}
.osq-wp-guidelines__title[data-v-aacc4fee] {
  font-weight: 700;
  color: #1a1d35;
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}
.osq-wp-guidelines__list[data-v-aacc4fee] {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.osq-wp-guidelines__item[data-v-aacc4fee] {
  position: relative;
  padding-left: 16px;
}
/* Coloured leading dot per threshold — green / amber / red. Same palette
   as the Yes/No pills used across the app so the three bands read as
   good / caution / stop signals without needing an icon per line. */
.osq-wp-guidelines__item[data-v-aacc4fee]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.osq-wp-guidelines__item--good[data-v-aacc4fee]::before       { background: #16a34a;
}
.osq-wp-guidelines__item--borderline[data-v-aacc4fee]::before { background: #f59e0b;
}
.osq-wp-guidelines__item--weak[data-v-aacc4fee]::before       { background: #dc2626;
}

/* CRM Win Probability reference note. Sits inline on the LEFT of the
   Win Probability result row (label + value stay pinned right via
   `margin-right: auto` on the note). No background / border / strip —
   just red-tone text next to an info icon so it reads as an advisory
   without competing visually with the result box on the right. */
.osq-crm-winprob-note[data-v-aacc4fee] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;                     /* pushes label + value to the far right */
  color: #b91c1c;                         /* red-700 — legible on white without needing a fill */
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 500;
}
.osq-crm-winprob-note__icon[data-v-aacc4fee] {
  flex-shrink: 0;
  color: #da2128;                         /* brand red for the icon */
}
.osq-crm-winprob-note__text[data-v-aacc4fee] {
  flex: 1;
}
/* Highlighted value inside the sentence — slightly heavier weight
   and brand-red so it draws the eye without breaking the sentence
   flow. Injected via v-html so it can sit inline. */
.osq-crm-winprob-note__value[data-v-aacc4fee] {
  font-weight: 700;
  color: #b91c1c;
}
.osq-wp-sub-result[data-v-aacc4fee] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0.5rem 1rem 0.75rem;
  border-top: 1px solid #f3f4f6;
}

/* ── Potential Competitors inner box (Win Strategy section) ── */
.osq-potential-competitors[data-v-aacc4fee] {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
}
.osq-potential-competitors .osq-wp-group-header[data-v-aacc4fee] {
  padding: 0.5rem 0.875rem;
}
/* Multiselect on the left, conditional "Others" free-text on the right —
   two-column grid on desktop, stacks on narrow screens. When "Others"
   isn't picked the second cell is empty and the multiselect stays in
   col 1 at half width (matches other 2-column layouts in this tab). */
.osq-comp-grid[data-v-aacc4fee] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  padding: 0.875rem;
  align-items: start;
}
@media (max-width: 560px) {
.osq-comp-grid[data-v-aacc4fee] { grid-template-columns: 1fr;
}
}
/* Brand-red label on the "Others" free-text so users can visually
   distinguish the free-text field from the parent multiselect at a
   glance. `:deep` pierces the scoped-style boundary into BaseInput's
   internal `.bp-label`. */
.osq-comp-other[data-v-aacc4fee] .bp-label {
  color: #da2128;
}

/* ── Header row (intro left + expand/collapse-all right) ─────────────
   Two-column flex: intro grows to fill the row, toolbar hugs the right.
   Wraps to a stacked layout on narrow viewports so buttons don't crash
   into text. */
.ras-header-row[data-v-ce7cb185] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
}

/* ── Intro ────────────────────────────────────────────────────────────── */
.ras-intro[data-v-ce7cb185] {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1 1 auto;
  min-width: 0;
}
.ras-intro-line[data-v-ce7cb185] {
  margin: 0;
  font-size: 13px;
  color: #da2128;
  font-weight: 700;
  line-height: 1.6;
}
.ras-link[data-v-ce7cb185] {
  color: #2563eb;
  text-decoration: underline;
  font-weight: 600;
}
.ras-link[data-v-ce7cb185]:hover  { color: #1d4ed8;
}
.ras-link[data-v-ce7cb185]:active { color: #1e40af;
}

/* ── Toolbar (expand/collapse all) ───────────────────────────────────
   Sits between the intro and the first category card, right-aligned so
   the eye lands on it after reading the intro but before entering the
   grid. Small pill buttons with mini chevron icons — kept muted (grey
   border + navy text) so they don't compete with the primary red banners. */
.ras-toolbar[data-v-ce7cb185] {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.ras-toolbar-btn[data-v-ce7cb185] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid #d1d5e8;
  border-radius: 6px;
  background: #ffffff;
  color: #4e5a82;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-family: inherit;
}
.ras-toolbar-btn[data-v-ce7cb185]:hover {
  background: #f5f6fb;
  color: #1a1d35;
  border-color: #a0a1ab;
}
.ras-toolbar-btn[data-v-ce7cb185]:focus-visible {
  outline: 2px solid #da2128;
  outline-offset: -2px;
}
/* Same readonly override rationale as .ras-cat-header — collapse/expand
   is display-only, safe to keep clickable inside a disabled fieldset. */
.tab-fieldset[data-v-ce7cb185] .ras-toolbar-btn[role="button"],[data-v-ce7cb185] .ras-toolbar-btn[role="button"] {
  pointer-events: auto !important;
}

/* ── Category block (collapsible) ───────────────────────────────────── */
.ras-category[data-v-ce7cb185] {
  margin-top: 1.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

/* Red banner header — click toggles expand/collapse. */
.ras-cat-header[data-v-ce7cb185] {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: #fbe6e5;
  border: 0;
  border-bottom: 1px solid #f0c9c8;
  color: #1a1d35;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ras-cat-header[data-v-ce7cb185]:hover { background: #f9d8d6;
}
.ras-cat-header[data-v-ce7cb185]:focus-visible {
  outline: 2px solid #da2128;
  outline-offset: -2px;
}

/* Override for readonly: DealsheetEditView's central CSS applies
   pointer-events: none to `[role="button"]` inside a disabled fieldset
   (to block save-triggering custom clickables). The category toggle is
   display-only — it must remain clickable in readonly so users can still
   expand collapsed sections to view content. Bump specificity + important
   to trump the piercing :deep rule from the parent view. */
.tab-fieldset[data-v-ce7cb185] .ras-cat-header[role="button"],[data-v-ce7cb185] .ras-cat-header[role="button"] {
  pointer-events: auto !important;
}
.ras-cat-chevron[data-v-ce7cb185] {
  flex-shrink: 0;
  color: #da2128;
  transition: transform 0.15s;
  align-self: center;
}
.ras-cat-chevron--collapsed[data-v-ce7cb185] { transform: rotate(-90deg);
}

/* Text block — sits on the same baseline as the chevron and flows as
   one continuous inline sentence. line-height stays tight so long
   descriptions wrap cleanly to the next line. */
.ras-cat-text[data-v-ce7cb185] {
  flex: 1 1 auto;
  font-size: 12.5px;
  color: #4e5a82;
  font-weight: 400;
  line-height: 1.55;
  min-width: 0;
}
/* Number — red bold prefix. Small right margin so it doesn't jam
   against the bold name. */
.ras-cat-num[data-v-ce7cb185] {
  font-size: 13px;
  font-weight: 700;
  color: #da2128;
  margin-right: 6px;
}
/* Name — bold navy, ends with a colon. `<strong>` handles the bold
   weight; the small right margin adds breathing room before the
   descriptive text starts. */
.ras-cat-name[data-v-ce7cb185] {
  font-size: 13px;
  font-weight: 700;
  color: #1a1d35;
  margin-right: 4px;
}
.ras-cat-body[data-v-ce7cb185] {
  padding: 0.75rem 1rem 1rem;
  background: #ffffff;
}

/* Bullet reference list — italicised, muted, non-interactive. */
.ras-bullets[data-v-ce7cb185] {
  margin: 0 0 0.75rem 1.2rem;
  padding: 0;
  list-style: disc;
  color: #4e5a82;
}
.ras-bullets li[data-v-ce7cb185] {
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.55;
  padding: 2px 0;
}

/* ── Grid ─────────────────────────────────────────────────────────────
   Horizontal-scroll wrap so wide tables don't blow out the tab layout
   on narrow viewports. */
.ras-grid-wrap[data-v-ce7cb185] {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fdfdff;
}
.ras-grid[data-v-ce7cb185] {
  width: 100%;
  min-width: 1860px;
  /* `border-collapse: separate` + `border-spacing: 0` — with `collapse`,
     adjacent cells SHARE one border. When two adjacent cells are both
     sticky, that shared border becomes ambiguous (which cell "owns" it
     during scroll?) and the browser leaves a sub-pixel gap where
     scrolled content leaks through. With `separate`, each cell owns
     its own borders — no shared render, no gap. Below we use right +
     bottom borders (with a left/top edge on the first cell/row) so
     adjacent cells don't double up. */
  border-collapse: separate;
  border-spacing: 0;
  /* `table-layout: fixed` forces each column to the width declared in
     <colgroup>, ignoring content size. Without this the browser lets
     columns stretch/shrink to fit content, which knocks the sticky
     `left` offsets out of sync with the columns' actual pixel positions. */
  table-layout: fixed;
  font-size: 12.5px;
}
/* Border-per-cell rules — right + bottom on every cell, plus a
   left edge on the first column and a top edge on the first header
   row so the outer frame is closed. No shared borders = no sticky
   sub-pixel gap. */
.ras-grid th[data-v-ce7cb185],
.ras-grid td[data-v-ce7cb185] {
  border: 0;
  border-right:  1px solid #e2e5ee;
  border-bottom: 1px solid #e2e5ee;
  padding: 3px 4px;
  vertical-align: middle;
}
.ras-grid th[data-v-ce7cb185]:first-child,
.ras-grid td[data-v-ce7cb185]:first-child { border-left: 1px solid #e2e5ee;
}
.ras-grid thead tr:first-child th[data-v-ce7cb185] { border-top: 1px solid #e2e5ee;
}

/* Header three-tier: level 1 = section groups (Risk Identification / …),
   level 2 = pre-mitigation / post-mitigation sub-labels, level 3 = the
   actual column titles. */
.ras-grid-hdr-lvl1 th[data-v-ce7cb185] {
  background: #1a1d35;
  color: #ffffff;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 6px 6px;
  text-align: center;
}
.ras-grid-hdr-lvl2 th[data-v-ce7cb185] {
  background: #eef0fd;
  color: #1a1d35;
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 6px;
  text-align: center;
}
.ras-grid-hdr-lvl3 th[data-v-ce7cb185] {
  background: #f4f6fb;
  color: #4e5a82;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 6px;
  text-align: center;
}

/* Rows */
.ras-grid-row td[data-v-ce7cb185] { background: #ffffff;
}

/* Row-number cell — matches the Excel "1.1, 1.2, …" numbering style.
   Red bold on a subtle grey band so it reads as a row-anchor rather
   than editable content. Reactivity is free: the number is `idx + 1`
   from the v-for, so deleting a row auto-renumbers everything below. */
.ras-row-num[data-v-ce7cb185] {
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  color: #da2128;
  background: #f8f9fc !important;
  white-space: nowrap;
}

/* ── Sticky left columns (# + Risk Identification group) ──────────────
   Pin the leftmost 3 columns while the rest of the grid scrolls
   horizontally. Cumulative `left` offsets match the colgroup widths:
     col 1 (#):             50px  → left 0
     col 2 (Potential Risk): 180px → left 50
     col 3 (Impact):        180px → left 230
   Sticky cells need a SOLID background so scrolled-under content
   doesn't bleed through — set per-header-row (dark navy / muted /
   pale) and per-body-row (#fff, or #f8f9fc for the # column) so the
   frozen strip matches the rest of the row visually.
   z-index keeps sticky cells above the scrolling siblings. A subtle
   right-side shadow on the last frozen column (`sticky-col-3`) marks
   the freeze line so the user can see where scroll begins. */
.ras-grid .sticky-col-1[data-v-ce7cb185] { position: sticky; left: 0;     z-index: 3;
}
.ras-grid .sticky-col-2[data-v-ce7cb185] { position: sticky; left: 50px;  z-index: 3;
}
.ras-grid .sticky-col-3[data-v-ce7cb185] { position: sticky; left: 230px; z-index: 3; box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.12);
}

/* Backgrounds per row-type so sticky cells stay opaque under scroll.
   `!important` because the base `.ras-grid-row td { background: #fff }`
   rule + input styling can compete on paint order; the sticky cells
   MUST be opaque or scrolled content shows through.

   No more box-shadow bridges needed — with `border-collapse: separate`
   (above) each cell owns its own borders, so there's no shared-border
   ambiguity to leave a sub-pixel gap between adjacent sticky cells. */
.ras-grid-hdr-lvl1 .sticky-col-1[data-v-ce7cb185],
.ras-grid-hdr-lvl1 .sticky-col-2[data-v-ce7cb185] { background: #1a1d35 !important;
}
.ras-grid-hdr-lvl2 .sticky-col-1[data-v-ce7cb185],
.ras-grid-hdr-lvl2 .sticky-col-2[data-v-ce7cb185],
.ras-grid-hdr-lvl2 .sticky-col-3[data-v-ce7cb185] { background: #eef0fd !important;
}
.ras-grid-hdr-lvl3 .sticky-col-1[data-v-ce7cb185],
.ras-grid-hdr-lvl3 .sticky-col-2[data-v-ce7cb185],
.ras-grid-hdr-lvl3 .sticky-col-3[data-v-ce7cb185] { background: #f4f6fb !important;
}
.ras-grid-row    .sticky-col-2[data-v-ce7cb185],
.ras-grid-row    .sticky-col-3[data-v-ce7cb185] { background: #ffffff !important;
}

/* # column keeps its pale-grey band both in header and body. */
.ras-grid-row    .sticky-col-1.ras-row-num[data-v-ce7cb185] { background: #f8f9fc !important;
}

/* Cell inputs — single-line, compact. Padding + font-size + border match
   the shared BaseInput/BaseSelect (9px 12px, 13.5px, #c0c1cb 1px border,
   8px radius) so every field in a row lines up at the same ~40px height
   as OBI's form fields. Focus state mirrors bp-input focus (red-tone
   ring). Overflow scrolls horizontally within the field on long text —
   click into the cell to see the full value. */
.ras-cell-txt[data-v-ce7cb185] {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #c0c1cb;
  border-radius: 8px;
  font-size: 13.5px;
  color: #1a1d35;
  font-family: inherit;
  line-height: 1.4;
  background: #ffffff;
  box-sizing: border-box;
}
.ras-cell-txt[data-v-ce7cb185]:focus {
  outline: none;
  border-color: #da2128;
  box-shadow: 0 0 0 2px rgba(218, 33, 40, 0.12);
}
.ras-cell-date[data-v-ce7cb185] {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #c0c1cb;
  border-radius: 8px;
  font-size: 13.5px;
  color: #1a1d35;
  font-family: inherit;
  background: #ffffff;
  box-sizing: border-box;
}
.ras-cell-date[data-v-ce7cb185]:focus {
  outline: none;
  border-color: #da2128;
  box-shadow: 0 0 0 2px rgba(218, 33, 40, 0.12);
}

/* Risk-rating tier cell — full-bleed coloured pill with the tier label.
   colorHex arrives per-tier from the DB so ops can tune the palette.
   Height matches the sibling inputs (~40px including padding) so the row
   reads as one uniform strip. */
.ras-tier-cell[data-v-ce7cb185] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 6px 4px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #1a1d35;
  text-align: center;
}
.ras-tier-cell--empty[data-v-ce7cb185] {
  background: #f4f6fb;
  color: transparent;
}

/* Row delete — small red × in the last column. Kept visible on hover
   only via opacity so unfocused rows stay clean. */
.ras-row-delete[data-v-ce7cb185] {
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: #b91c1c;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
}
.ras-row-delete[data-v-ce7cb185]:hover { background: #fee2e2;
}

/* Add-row button — subtle grey pill under each grid, aligned left. */
.ras-add-row[data-v-ce7cb185] {
  margin-top: 6px;
  padding: 6px 12px;
  border: 1px dashed #c0c1cb;
  border-radius: 4px;
  background: #ffffff;
  color: #4e5a82;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.ras-add-row[data-v-ce7cb185]:hover {
  background: #f8f9fc;
  color: #1a1d35;
  border-color: #a0a1ab;
}

.ds-ois-wrap[data-v-df11dcd4] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px 0 8px;
}

/* Section header colour overrides */
.ds-ois-section--red .ds-section-header[data-v-df11dcd4] { background: #da2128;
}
.ds-section--dark    .ds-section-header[data-v-df11dcd4] { background: #0f172a;
}

/* Legal Entity & Financial Parameters — 2-column grid */
.ds-ois-lf-grid[data-v-df11dcd4] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  align-items: start;
}
@media (max-width: 640px) {
.ds-ois-lf-grid[data-v-df11dcd4] { grid-template-columns: 1fr;
}
}

/* Read-only OBI field display */
.ds-ois-readonly-field[data-v-df11dcd4] {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ds-ois-readonly-label[data-v-df11dcd4] {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}
.ds-ois-readonly-value[data-v-df11dcd4] {
  display: block;
  height: 36px;
  line-height: 36px;
  padding: 0 10px;
  background: #f0f1f5;
  border: 1px solid #e4e7f0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #4e5a82;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Currency-code prefix for the read-only Est. Project revenue (base) / USD
   informative rows. Bold, dark navy, followed by a small gap before the
   number. Sits on the same line as the value because the parent
   .ds-ois-readonly-value is `line-height: 36px` — inline children share
   that line box automatically. */
.ds-ois-currency-prefix[data-v-df11dcd4] {
  font-weight: 700;
  color: #1a1d35;
  margin-right: 6px;
}

/* Description */
.ds-ois-desc[data-v-df11dcd4] {
  font-size: 13.5px;
  font-weight: 700;
  color: #1a1d35;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* Table wrapper */
.ds-ois-table-wrap[data-v-df11dcd4] { overflow-x: auto;
}

/* Table */
.ds-ois-table[data-v-df11dcd4] {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* Header */
.ds-ois-th[data-v-df11dcd4] {
  padding: 8px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #6b7280;
  text-align: left;
  border-bottom: 2px solid #e8eaf2;
  white-space: nowrap;
  background: #fafbfc;
}
.ds-ois-th--role[data-v-df11dcd4]  { width: 160px;
}
.ds-ois-th--name[data-v-df11dcd4]  { min-width: 200px;
}
.ds-ois-th--hours[data-v-df11dcd4] { width: 130px;
}
.ds-ois-th--date[data-v-df11dcd4]  { width: 180px;
}
.ds-ois-th--del[data-v-df11dcd4]   { width: 48px;
}

/* Rows */
.ds-ois-row:not(:last-child) .ds-ois-td[data-v-df11dcd4] { border-bottom: 1px solid #f0f2f8;
}

/* Cells */
.ds-ois-td[data-v-df11dcd4] { padding: 6px 10px; vertical-align: middle;
}
.ds-ois-td--role[data-v-df11dcd4] { padding-left: 10px;
}
.ds-ois-td--del[data-v-df11dcd4]  { text-align: center;
}

/* Role label */
.ds-ois-role-label[data-v-df11dcd4] {
  font-size: 12.5px;
  font-weight: 600;
  color: #1a1d35;
  white-space: nowrap;
}

/* Date field wrapper */
.ds-ois-date-field[data-v-df11dcd4] { display: flex; flex-direction: column; gap: 5px;
}
.ds-ois-date-label[data-v-df11dcd4] { font-size: 12px; font-weight: 600; color: #374151;
}

/* Date input */
.ds-ois-date-input[data-v-df11dcd4] {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #d1d5e8;
  border-radius: 6px;
  font-size: 13px;
  color: #1a1d35;
  background: #fff;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
  font-family: inherit;
}
.ds-ois-date-input[data-v-df11dcd4]:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}
/* Inline error for the "end date must be after start date" check. Shown as a
   small red helper below the end-date input while the range is invalid. Same
   colour as the app's `.bp-field-error`. */
.ds-ois-date-error[data-v-df11dcd4] {
  font-size: 11px;
  color: #b91c1c;
  line-height: 1.35;
}

/* Delete button */
.ds-ois-delete-btn[data-v-df11dcd4] {
  background: transparent;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  color: #dc2626;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.ds-ois-delete-btn[data-v-df11dcd4]:hover:not(:disabled) { background: #fef2f2;
}
.ds-ois-delete-btn[data-v-df11dcd4]:disabled { opacity: 0.35; cursor: not-allowed;
}

/* Add row */
.ds-ois-add-row[data-v-df11dcd4] { margin-top: 12px;
}
.ds-ois-empty[data-v-df11dcd4] {
  padding: 24px 12px;
  text-align: center;
  font-size: 13px;
  color: #9098b0;
  background: #f5f6fb;
  border-radius: 8px;
}

/* ── Practice Split ── */
.ds-split-loading[data-v-df11dcd4] {
  font-size: 12px;
  color: #9098b0;
  padding: 16px 0;
  text-align: center;
}
.ds-split-none[data-v-df11dcd4] {
  font-size: 13px;
  color: #9098b0;
  padding: 20px 0 8px;
  font-style: italic;
}
.ds-split-grid[data-v-df11dcd4] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ds-practice-card[data-v-df11dcd4] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 10px 14px;
  border: 2px solid #e4e7f0;
  border-radius: 12px;
  background: #f8f9fc;
  text-align: center;
  font-family: inherit;
  cursor: default;
}
.ds-practice-card--inactive[data-v-df11dcd4] { opacity: 0.55;
}
.ds-practice-card--on[data-v-df11dcd4] { border-color: #f5c6c6; background: #fff8f8;
}
.ds-practice-card--clickable[data-v-df11dcd4] { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
.ds-practice-card--clickable[data-v-df11dcd4]:hover { border-color: #f5c6c6;
}
.ds-practice-card--clickable.ds-practice-card--inactive[data-v-df11dcd4]:hover { opacity: 0.8;
}
.ds-practice-check[data-v-df11dcd4] {
  position: absolute;
  top: 9px; right: 9px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid #d1d5e8;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ds-practice-card--on .ds-practice-check[data-v-df11dcd4] { border-color: #da2128; background: #da2128;
}
.ds-practice-icon[data-v-df11dcd4] {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: #e9eaf2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7db8;
}
.ds-practice-card--on .ds-practice-icon[data-v-df11dcd4] { background: #fee2e2; color: #da2128;
}
.ds-practice-code[data-v-df11dcd4] { font-size: 13px; font-weight: 800; color: #4e5a82; letter-spacing: 0.4px; margin-top: 2px;
}
.ds-practice-card--on .ds-practice-code[data-v-df11dcd4] { color: #da2128;
}
.ds-practice-name[data-v-df11dcd4] { font-size: 10.5px; color: #9098b0; line-height: 1.35;
}
.ds-practice-card--on .ds-practice-name[data-v-df11dcd4] { color: #b05560;
}

/* Wrapper around the "Split %" label + numeric field inside each selected
   practice card. Column so the label stacks above the input row. */
.ds-split-field[data-v-df11dcd4] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  width: 100%;
}
.ds-split-label[data-v-df11dcd4] {
  font-size: 11.5px;
  font-weight: 600;
  color: #4e5a82;
  align-self: flex-start;
}
.ds-split-input-row[data-v-df11dcd4] {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
}
.ds-split-input[data-v-df11dcd4] {
  flex: 1;
  min-width: 0;
  height: 34px;
  border: 1.5px solid #d1d5e8;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #1a1d35;
  text-align: center;
  background: #fff;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 0.15s;
}
.ds-split-input[data-v-df11dcd4]:focus { border-color: #da2128; box-shadow: 0 0 0 2px rgba(218, 33, 40, 0.1);
}
.ds-split-pct[data-v-df11dcd4] { font-size: 13px; font-weight: 600; color: #6b7280; flex-shrink: 0;
}
.ds-split-footer[data-v-df11dcd4] {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1.5px dashed #e4e7f0;
}
.ds-split-total-row[data-v-df11dcd4] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.ds-split-total-label[data-v-df11dcd4] { font-size: 13px; font-weight: 600; color: #4e5a82;
}
.ds-split-total-input-wrap[data-v-df11dcd4] { display: flex; align-items: center; gap: 5px;
}
.ds-split-input--total[data-v-df11dcd4] {
  width: 72px;
  background: #f0f1f5;
  cursor: not-allowed;
  font-weight: 800;
  color: #1a1d35;
  border-color: #e4e7f0;
}
.ds-split-input--total[data-v-df11dcd4]:focus { border-color: #e4e7f0; box-shadow: none;
}
.ds-split-warning[data-v-df11dcd4] {
  margin-top: 8px;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: #dc2626;
}

/* ── GO / NO-GO DECISION ── */
.ds-gonogo-meta-row[data-v-df11dcd4] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 24px;
}
.ds-gonogo-grid[data-v-df11dcd4] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ds-gonogo-btn[data-v-df11dcd4] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px 20px 24px;
  border-radius: 18px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.22s ease;
  font-family: inherit;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  outline: none;
}

/* GO — default state */
.ds-gonogo-btn--go[data-v-df11dcd4] {
  background: linear-gradient(145deg, #f0fdf4, #dcfce7);
  border-color: #86efac;
  color: #15803d;
}
.ds-gonogo-btn--go[data-v-df11dcd4]:hover:not(.ds-gonogo-btn--active) {
  background: linear-gradient(145deg, #dcfce7, #bbf7d0);
  border-color: #4ade80;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(22, 163, 74, 0.18);
}
/* GO — active state */
.ds-gonogo-btn--go.ds-gonogo-btn--active[data-v-df11dcd4] {
  background: linear-gradient(145deg, #22c55e, #16a34a, #15803d);
  border-color: #166534;
  color: #fff;
  box-shadow: 0 6px 28px rgba(22, 163, 74, 0.45), 0 0 0 4px rgba(22, 163, 74, 0.18);
  transform: translateY(-1px);
}

/* NO GO — default state */
.ds-gonogo-btn--nogo[data-v-df11dcd4] {
  background: linear-gradient(145deg, #fff1f2, #ffe4e6);
  border-color: #fca5a5;
  color: #b91c1c;
}
.ds-gonogo-btn--nogo[data-v-df11dcd4]:hover:not(.ds-gonogo-btn--active) {
  background: linear-gradient(145deg, #ffe4e6, #fecdd3);
  border-color: #f87171;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.18);
}
/* NO GO — active state */
.ds-gonogo-btn--nogo.ds-gonogo-btn--active[data-v-df11dcd4] {
  background: linear-gradient(145deg, #f87171, #dc2626, #b91c1c);
  border-color: #991b1b;
  color: #fff;
  box-shadow: 0 6px 28px rgba(220, 38, 38, 0.45), 0 0 0 4px rgba(220, 38, 38, 0.18);
  transform: translateY(-1px);
}

/* Icon circle */
.ds-gonogo-icon[data-v-df11dcd4] {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.22s ease;
  flex-shrink: 0;
}
.ds-gonogo-btn--go .ds-gonogo-icon[data-v-df11dcd4] {
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
}
.ds-gonogo-btn--go.ds-gonogo-btn--active .ds-gonogo-icon[data-v-df11dcd4] {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.ds-gonogo-btn--nogo .ds-gonogo-icon[data-v-df11dcd4] {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}
.ds-gonogo-btn--nogo.ds-gonogo-btn--active .ds-gonogo-icon[data-v-df11dcd4] {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.ds-gonogo-label[data-v-df11dcd4] {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1;
}
.ds-gonogo-sublabel[data-v-df11dcd4] {
  font-size: 11.5px;
  font-weight: 500;
  opacity: 0.72;
  letter-spacing: 0.2px;
}

/* Notes textarea */
.ds-gonogo-notes[data-v-df11dcd4] { margin-top: 20px;
}

/* Transition for notes slide-in */
.ds-fade-enter-active[data-v-df11dcd4] { transition: opacity 0.22s ease, transform 0.22s ease;
}
.ds-fade-leave-active[data-v-df11dcd4] { transition: opacity 0.16s ease, transform 0.16s ease;
}
.ds-fade-enter-from[data-v-df11dcd4]  { opacity: 0; transform: translateY(-8px);
}
.ds-fade-leave-to[data-v-df11dcd4]    { opacity: 0; transform: translateY(-4px);
}
@media (max-width: 640px) {
.ds-split-grid[data-v-df11dcd4]         { grid-template-columns: repeat(2, 1fr);
}
.ds-gonogo-meta-row[data-v-df11dcd4]    { grid-template-columns: 1fr;
}
.ds-gonogo-btn[data-v-df11dcd4]         { padding: 22px 16px 18px;
}
.ds-gonogo-icon[data-v-df11dcd4]        { width: 48px; height: 48px;
}
.ds-gonogo-label[data-v-df11dcd4]       { font-size: 17px;
}
}

.tee-info-wrap[data-v-10145cd0] {
  position: relative;
  display: inline-flex;
  margin-left: auto;
  vertical-align: middle;
  /* Plain arrow — the icon only reveals a hover tooltip; no click action,
     so `cursor: help` (which browsers render as an arrow with a question
     mark) misrepresented the affordance. */
  cursor: default;
  outline: none;
}
.tee-info-icn[data-v-10145cd0]                        { color: #da2128;
}
.tee-info-wrap:hover      .tee-info-icn[data-v-10145cd0],
.tee-info-wrap:focus-visible .tee-info-icn[data-v-10145cd0] { color: #a3161c;
}

.tee-info-tip-portal {
  position: fixed;
  background: #1a1d35;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  white-space: pre-line;
  min-width: 200px;
  max-width: 300px;
  width: -moz-max-content;
  width: max-content;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  z-index: 10000;
}
.tee-info-tip-arrow {
  position: absolute;
  bottom: 100%;
  right: 6px;  /* aligned near icon centre (icon 12px wide, arrow 10px total) */
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-bottom-color: #1a1d35;
}
/* When the balloon opens rightward (icon near viewport left edge), the arrow
   flips to the LEFT side of the balloon so it still visually connects to the
   icon underneath. */
.tee-info-tip-portal--right-anchor .tee-info-tip-arrow {
  right: auto;
  left: 6px;
}

.tee-row-menu[data-v-1eff67f0] {
  position: fixed;
  z-index: 1200;
  min-width: 200px;
  background: #fff;
  border: 1px solid #d1d5e8;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 17, 40, 0.16);
  padding: 4px;
  display: flex;
  flex-direction: column;
  font-family: inherit;
}
.tee-row-menu-item[data-v-1eff67f0] {
  border: none;
  background: transparent;
  text-align: left;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #1a1d35;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
}
.tee-row-menu-item[data-v-1eff67f0]:hover,
.tee-row-menu-item[data-v-1eff67f0]:focus-visible {
  background: #eef2ff;
  color: #4f46e5;
  outline: none;
}
.tee-row-menu-item--danger[data-v-1eff67f0] {
  color: #b91c1c;
}
.tee-row-menu-item--danger[data-v-1eff67f0]:hover,
.tee-row-menu-item--danger[data-v-1eff67f0]:focus-visible {
  background: #fef2f2;
  color: #dc2626;
}
.tee-row-menu-sep[data-v-1eff67f0] {
  height: 1px;
  background: #eef0f5;
  margin: 4px 6px;
}

.tee-wrap[data-v-5be5f7f7] { display: flex; flex-direction: column; gap: 0;
}

/* Grid section — flush body, toolbar carries the padding */
.ds-tee-grid-section[data-v-5be5f7f7] .ds-section-body { padding: 20px 18px;
}

/* ── KPI panel ── */
.tee-kpi-body[data-v-5be5f7f7] { display: flex; gap: 10px; flex-wrap: wrap;
}
.kpi-card[data-v-5be5f7f7] { background: #f8f9fc; border: 1px solid #e4e7f0; border-radius: 10px; padding: 10px 14px; min-width: 110px;
}
.kpi-lbl[data-v-5be5f7f7] { font-size: 10px; font-weight: 700; color: #9098b0; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; display: flex; align-items: center; gap: 6px;
}
.kpi-val[data-v-5be5f7f7] { font-size: 16px; font-weight: 800; color: #1a1d35; line-height: 1.1;
}
/* Currency-symbol prefix on the Calc-Pricing / Calc-Blended KPI values.
   Slightly smaller + muted colour so the numeric amount stays visually
   dominant, with a small right margin as breathing room. */
.kpi-val .kpi-currency[data-v-5be5f7f7] {
  font-size: 13px;
  font-weight: 700;
  color: #4e5a82;
  margin-right: 4px;
}
.kpi-val--date[data-v-5be5f7f7] { font-size: 13px; font-weight: 600; color: #1a1d35;
}
.kpi-val--blue[data-v-5be5f7f7] { color: #2563eb;
}
.kpi-val--pending[data-v-5be5f7f7] { color: #c8cde0;
}
.kpi-card--calc[data-v-5be5f7f7] { border-style: dashed;
}
/* Blended-rate status backgrounds — added alongside kpi-card--calc so they
   inherit the dashed border but override the default grey fill. */
.kpi-card--status-ok[data-v-5be5f7f7]   { background: #dcfce7; border-color: #86efac;
}
.kpi-card--status-warn[data-v-5be5f7f7] { background: #fef3c7; border-color: #fde68a;
}
.kpi-card--status-ok   .kpi-val--status[data-v-5be5f7f7] { color: #166534;
}
.kpi-card--status-warn .kpi-val--status[data-v-5be5f7f7] { color: #92400e;
}
.kpi-val--status[data-v-5be5f7f7] { font-size: 13px; font-weight: 700;
}
/* Info icon + hover-balloon tooltip live in the shared InfoTooltip.vue
   component — it teleports the balloon to <body> so ancestor overflow:hidden
   in the TEE Summary strip can't clip it. */
.tee-info-wrap:hover .tee-info-tip[data-v-5be5f7f7],
.tee-info-wrap:focus-within .tee-info-tip[data-v-5be5f7f7] { visibility: visible; opacity: 1;
}

/* ── Toolbar ── */
.tee-toolbar[data-v-5be5f7f7] { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}
.tee-toolbar-left[data-v-5be5f7f7]  { flex: 1; min-width: 200px; max-width: 300px;
}
.tee-toolbar-right[data-v-5be5f7f7] { display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.tee-pm-select[data-v-5be5f7f7] { width: 100%;
}
@media (max-width: 640px) {
.tee-toolbar-left[data-v-5be5f7f7]  { max-width: 100%; width: 100%;
}
.tee-toolbar-right[data-v-5be5f7f7] { width: 100%; justify-content: flex-end;
}
}
.tee-btn-primary[data-v-5be5f7f7] { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: #191a37; color: #fff; border: none; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.tee-btn-primary[data-v-5be5f7f7]:hover { background: #23254a;
}
.tee-btn-ghost[data-v-5be5f7f7] { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; background: #fff; color: #4e5a82; border: 1px solid #d1d5e8; border-radius: 7px; font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.tee-btn-ghost[data-v-5be5f7f7]:hover { border-color: #da2128; color: #da2128;
}

/* ── Section banner ──
   Post-UAT merge: a single unified strip across the top of the grid,
   replacing the previous `.tee-banner-res` + `.tee-banner-handle-spacer` +
   `.tee-banner-wee` three-part layout. The dark-navy / deep-blue split had
   its own visual reason (mirroring the two panels below); with only one
   scrollable table left, that split makes no sense. Single strip carries
   both counts + the scroll-right hint on one line. */
.tee-banners[data-v-5be5f7f7] { display: flex;
}

/* ── "+ Add new resource" button wrappers ──
   Sits above the dark-navy banner (top) and directly below the grid
   (bottom). Small SVG plus-icon + label rendered inside a BaseButton
   `variant="outline"`. LEFT-aligned so it reads as an unobtrusive
   inline affordance, not a heavy centered CTA. */
.tee-add-row-wrap[data-v-5be5f7f7] {
  display: flex;
  justify-content: flex-start;
}
.tee-add-row-wrap--top[data-v-5be5f7f7]    { padding: 4px 0 8px;
}
.tee-add-row-wrap--bottom[data-v-5be5f7f7] { padding: 10px 0 4px;
}
.tee-add-row-wrap[data-v-5be5f7f7] .bp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tee-banner-unified[data-v-5be5f7f7] {
  flex: 1;
  padding: 5px 12px;
  background: #191a37;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.banner-txt[data-v-5be5f7f7] { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: rgba(255,255,255,0.85); white-space: nowrap;
}
/* Sub-text ("— 22 resources", "— 21 weeks · scroll →") — bumped from
   0.4 → 0.75 opacity so the count + scroll hint stay legible on the
   dark navy banner. Still softer than the primary `.banner-txt` (0.85)
   so the visual hierarchy of label > detail is preserved. */
.banner-sub[data-v-5be5f7f7] { font-size: 10px; color: rgba(255,255,255,0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.banner-sep[data-v-5be5f7f7] { font-size: 12px; color: rgba(255,255,255,0.6); padding: 0 4px;
}

/* Tier-2 hint — resources present but OIS project start/end are missing.
   Soft-blue notice above the table, so the grid inside stays uncluttered
   (used to be a full-width message row inside the right-panel `<tbody>`
   before the merge). */
.tee-project-dates-hint[data-v-5be5f7f7] {
  margin: 0 0 8px;
  padding: 8px 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  color: #1e3a8a;
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 500;
}

/* ── Grid outer ──
   Sole horizontal scroll container after the two-panel merge. `.tee-tbl`
   inside is content-auto-sized (see below) so identity columns can grow
   past the old fixed widths without ellipsis-truncating long values. */
.tee-grid-outer[data-v-5be5f7f7] {
  border: 1px solid #d1d5e8;
  border-top: none;
  /* Localize BOTH scrolls to this container so `position: sticky` inside
     the table can pin against it. Sticky positioning is scoped to the
     nearest scrollable ancestor — if we let vertical scroll live at the
     page level, the sticky header simply scrolls away with the rest of
     the tab. Bounding the grid with a max-height turns it into an
     Excel-style scrollable region: header + first four columns pin,
     body pans in both directions. */
  overflow: auto;
  max-height: 70vh;
  background: #fff;
}
.tee-grid-outer[data-v-5be5f7f7]::-webkit-scrollbar { height: 7px; width: 7px;
}
.tee-grid-outer[data-v-5be5f7f7]::-webkit-scrollbar-track { background: #f0f1f5;
}
.tee-grid-outer[data-v-5be5f7f7]::-webkit-scrollbar-thumb { background: #c8cde0; border-radius: 4px;
}

/* Duplicate top scrollbar. Matches `.tee-grid-outer` palette so the top +
   bottom bars read as a pair. `overflow-y: hidden` keeps the container
   from ever showing a vertical scrollbar — only the horizontal thumb
   should render. Height sized to fit the 7px `::-webkit-scrollbar` plus
   a few pixels of chrome. `.tee-topscroll-inner` height 1 keeps the
   spacer invisible; its width is set at runtime by `setupTopscroll` to
   equal `.tee-tbl.scrollWidth`, so the thumb travel mirrors the grid's. */
.tee-topscroll[data-v-5be5f7f7] {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #d1d5e8;
  border-bottom: none;
  background: #fff;
  height: 12px;
}
.tee-topscroll[data-v-5be5f7f7]::-webkit-scrollbar { height: 7px; width: 7px;
}
.tee-topscroll[data-v-5be5f7f7]::-webkit-scrollbar-track { background: #f0f1f5;
}
.tee-topscroll[data-v-5be5f7f7]::-webkit-scrollbar-thumb { background: #c8cde0; border-radius: 4px;
}
.tee-topscroll-inner[data-v-5be5f7f7] { height: 1px;
}

/* ── Sticky columns ──
   The first four identity columns (#, edit, delete, Role) pin to the
   left edge of `.tee-grid-outer` when the user scrolls horizontally,
   so the row context stays visible while the rest of the identity /
   calendar area pans right. `left` offsets are the cumulative widths
   of the columns to the left (0 → 36 → 68 → 100). Cells must carry an
   opaque background — the scroll content passes underneath them, and
   sticky positioning does not alter stacking on its own. Row hover
   and nth-child(even) rules already paint opaque colours over `.tee-fd`,
   so those cascade correctly onto the sticky cells too. */
.tee-sticky-1[data-v-5be5f7f7],
.tee-sticky-2[data-v-5be5f7f7],
.tee-sticky-3[data-v-5be5f7f7] {
  position: sticky;
  z-index: 3;
}
/* Firmly lock column widths — `<col>` widths in the colgroup are only a
   hint in auto-layout mode; content can still push a column wider,
   which drifts the actual col-end position past the sticky `left`
   offset of the NEXT column. That drift leaves a transparent gap
   between adjacent sticky cells, and the horizontally-scrolling
   non-sticky content bleeds through. Locking width + min-width +
   max-width forces the rendered col to match the sticky offset chain
   exactly (0 → 36 → 68 → 248). Applied on every cell in the column
   (via the shared sticky-N class), so auto-layout has no wiggle room.
   Post-consolidation the three sticky columns are: # (36) → row-menu
   button (32) → Role (180). */
.tee-sticky-1[data-v-5be5f7f7] { left: 0;     width: 36px;  min-width: 36px;  max-width: 36px;
}
.tee-sticky-2[data-v-5be5f7f7] { left: 36px;  width: 32px;  min-width: 32px;  max-width: 32px;
}
.tee-sticky-3[data-v-5be5f7f7] { left: 68px;  width: 180px; min-width: 180px; max-width: 180px;
                /* No-blur shadow (previously `2px 0 4px -1px`). A blurred
                   shadow on a sticky element forces the browser to re-
                   rasterize on every horizontal-scroll frame, which was
                   the primary "shake / lag" contributor on long scrolls
                   across the weekly grid. Setting blur-radius to 0 keeps
                   the same 2px translucent right-edge strip (visually
                   near-identical — solid vs soft) at essentially zero
                   scroll-time paint cost. */
                box-shadow: 2px 0 0 0 rgba(0, 0, 0, 0.08);
}

/* Opaque backgrounds on every sticky cell — the horizontally-scrolling
   non-sticky area passes UNDERNEATH sticky cells, so any transparency
   lets scrolled text/borders bleed through the pinned columns. Row-
   contextual backgrounds (nth-child even, :hover, pending-delete,
   Preferred-Resource group) already cover the tbody sticky cells via
   `.tee-fd` cascade; these rules cover the four header rows explicitly
   so their sticky cells stay opaque regardless of source order. */
.fp-r1 .tee-sticky-1[data-v-5be5f7f7],
.fp-r1 .tee-sticky-2[data-v-5be5f7f7],
.fp-r1 .tee-sticky-3[data-v-5be5f7f7] { background: #f0f1f8 !important;
}
.fp-r3 .tee-sticky-1[data-v-5be5f7f7],
.fp-r3 .tee-sticky-2[data-v-5be5f7f7],
.fp-r3 .tee-sticky-3[data-v-5be5f7f7] { background: #f8f9fc !important;
}
.tee-fh.tee-sticky-1[data-v-5be5f7f7],
.tee-fh.tee-sticky-2[data-v-5be5f7f7],
.tee-fh.tee-sticky-3[data-v-5be5f7f7] { background: #f5f6fa !important;
}
/* tbody sticky cells — override the alternator so BOTH odd and even
   sticky cells paint opaque white; otherwise transparent gaps between
   the sticky column and the panning content are visible on odd rows. */
.tee-row .tee-fd.tee-sticky-1[data-v-5be5f7f7],
.tee-row .tee-fd.tee-sticky-2[data-v-5be5f7f7],
.tee-row .tee-fd.tee-sticky-3[data-v-5be5f7f7] { background: #fff;
}
.tee-row:nth-child(even) .tee-fd.tee-sticky-1[data-v-5be5f7f7],
.tee-row:nth-child(even) .tee-fd.tee-sticky-2[data-v-5be5f7f7],
.tee-row:nth-child(even) .tee-fd.tee-sticky-3[data-v-5be5f7f7] { background: #fafbfd;
}
/* tfoot sticky cells — grand-totals row background */
.tee-totals-row .tee-fd.tee-sticky-1[data-v-5be5f7f7],
.tee-totals-row .tee-fd.tee-sticky-2[data-v-5be5f7f7],
.tee-totals-row .tee-fd.tee-sticky-3[data-v-5be5f7f7] { background: #fff;
}

/* ── Sticky header rows ──
   Pin the four thead rows to the top of `.tee-grid-outer` so column
   labels stay visible while the user scrolls vertically through the
   resource list. `top` offsets are the cumulative heights of the rows
   above:
     - fp-r1  (26px)             → top: 0
     - main tee-fh row (36px)    → top: 26px
     - tee-sub-fh row (22px)     → top: 62px
     - fp-r3 date row (22px)     → top: 84px
   The row 2 headers use rowspan=2 for most columns, so they physically
   span 58px (36 + 22); the sticky `top: 26px` pins them at their
   natural top and they extend down past row 3 as normal. */
.tee-tbl thead .fp-r1 th[data-v-5be5f7f7]          { position: sticky; top: 0;    z-index: 4;
}
/* Row-2 cells: `.tee-fh` covers identity columns, `.tee-wh` covers the
   week-label cells (W1, W2…). Both share the same `rowspan="2"` +
   `top: 26px` treatment so they pin as one unified header band. */
.tee-tbl thead .tee-fh[data-v-5be5f7f7],
.tee-tbl thead .tee-wh[data-v-5be5f7f7]            { position: sticky; top: 26px; z-index: 4;
}
.tee-tbl thead .tee-sub-fh[data-v-5be5f7f7]        { position: sticky; top: 62px; z-index: 4;
}
.tee-tbl thead .fp-r3 td[data-v-5be5f7f7]          { position: sticky; top: 84px; z-index: 4;
}

/* Sticky-header + sticky-column intersections (the four cells at the
   left of every header row) need a HIGH z-index so they render on top
   of both the horizontally-scrolling calendar cells AND the sticky
   header rows they intersect with, when the user scrolls diagonally.
   Was `z-index: 6` (just above the `4` used by the header rows), but a
   sibling stacking-context edge case on the `fp-r3` date row let the
   week-date TDs bleed through the sticky columns on wide horizontal
   scrolls. Bumping well clear of the header-row band (which stops at 4)
   guarantees the sticky column always paints on top regardless of
   compositor ordering. */
.tee-tbl thead .tee-sticky-1[data-v-5be5f7f7],
.tee-tbl thead .tee-sticky-2[data-v-5be5f7f7],
.tee-tbl thead .tee-sticky-3[data-v-5be5f7f7] { z-index: 20;
}
/* Explicit anchor for the fp-r1 (month band) + fp-r3 (date row)
   sticky cells. Their per-row rules (`.tee-tbl thead .fp-r1 th` and
   `.tee-tbl thead .fp-r3 td`) each carry 2 classes + 2 elements of
   specificity — HIGHER than the shared `.tee-tbl thead .tee-sticky-N`
   rule above (2 classes + 1 element). Without these explicit selectors
   the per-row z-index (4) wins for the row-column intersections, and
   the horizontally-scrolling row content (month names, dates) bleeds
   through the sticky columns. The `.tee-sticky-N` class on the
   intersection cells pushes specificity to 3 classes + 2 elements,
   which beats the row rule. */
.tee-tbl thead .fp-r1 th.tee-sticky-1[data-v-5be5f7f7],
.tee-tbl thead .fp-r1 th.tee-sticky-2[data-v-5be5f7f7],
.tee-tbl thead .fp-r1 th.tee-sticky-3[data-v-5be5f7f7] { z-index: 20;
}
.tee-tbl thead .fp-r3 td.tee-sticky-1[data-v-5be5f7f7],
.tee-tbl thead .fp-r3 td.tee-sticky-2[data-v-5be5f7f7],
.tee-tbl thead .fp-r3 td.tee-sticky-3[data-v-5be5f7f7] { z-index: 20;
}

/* Consolidated notes box — soft-blue "info" card that groups the five
   per-note pills we used to render individually above the ROLE LIST /
   WEEKLY EFFORT banners. Per-item text colour is preserved (blue = tip,
   red = warn) so the severity signal isn't lost inside the unified
   container. The container itself uses the light-blue info palette
   (`#eff6ff` bg, `#bfdbfe` border) so the mandatory-error pulse
   (`.ds-field-highlight` on a specific `<li>`) reads clearly against it. */
.tee-notes-box[data-v-5be5f7f7] {
  margin: 0 0 10px;
  padding: 12px 16px 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
}
.tee-notes-header[data-v-5be5f7f7] {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1e3a8a;
  padding-bottom: 6px;
  border-bottom: 1px solid #dbeafe;
  margin-bottom: 8px;
}
.tee-notes-header svg[data-v-5be5f7f7] { flex-shrink: 0;
}
.tee-notes-title[data-v-5be5f7f7] {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.tee-notes-list[data-v-5be5f7f7] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tee-notes-item[data-v-5be5f7f7] {
  position: relative;
  padding-left: 16px;
  font-size: 12.5px;
  line-height: 1.5;
}
/* Coloured leading dot per severity — blue for tips (edit / layout
   guidance), red for warns (must-do to save / calculate correctly). */
.tee-notes-item[data-v-5be5f7f7]::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.tee-notes-item--tip[data-v-5be5f7f7]  { color: #1e3a8a;
}
.tee-notes-item--tip[data-v-5be5f7f7]::before  { background: #1e3a8a;
}
.tee-notes-item--warn[data-v-5be5f7f7] { color: #991b1b;
}
.tee-notes-item--warn[data-v-5be5f7f7]::before { background: #b91c1c;
}

/* ── Table ──
   Auto-layout (default, no `table-layout` set) so identity columns can grow
   to fit their content — the `<col style="width:...">` values act as MINIMUMS
   in auto-layout mode, not caps. Calendar week columns stay tight via
   per-cell `min-width`/`max-width: 40px` rules on `.tee-wh` / `.tee-dh` /
   `.tee-wk` below. */
.tee-tbl[data-v-5be5f7f7] { border-collapse: separate; border-spacing: 0;
}

/* Frozen header */
/* Identity column header — mirrors the TPV grid's `thead th` treatment
   (dark navy body copy on soft-grey background, roomy padding, slightly
   darker rules than the tbody borders). Matches how the TPV vendor grid
   presents its headers so both tables read consistently. `white-space:
   nowrap` forces each label onto a single line so auto-layout can't
   shrink the column below the header text width. */
/* Row-2 header cell — centred both axes. Horizontal via `text-align`,
   vertical via `vertical-align: middle` (native table-cell centring —
   flex isn't reliable across `<th>`s that also carry rowspan). Legacy
   `.center` / `.right` modifier classes are no-ops now (kept because
   they still appear in the template markup on # / currency-column
   headers, but every header now reads centred per the design ask). */
/* `line-height: 1.2` keeps the 13.5px header content within the 36px
   row height so the sub-header sticky offset (`top: 62px`) stays valid.
   The bottom rule is applied as an inset box-shadow instead of
   `border-bottom` because sticky-positioned cells with rowspan="2"
   otherwise let the sub-header row paint over the border edge. */
.tee-fh[data-v-5be5f7f7] { background: #f5f6fa; font-size: 13.5px; line-height: 1.2; font-weight: 700; color: #1a1d35; text-align: center; padding: 8px 10px; white-space: nowrap; border-right: 1px solid #c5c6c9; box-shadow: inset 0 -1px 0 #c5c6c9; height: 36px; vertical-align: middle;
}
.tee-fh.center[data-v-5be5f7f7] { text-align: center;
}
.tee-fh.right[data-v-5be5f7f7]  { text-align: center;
}

/* Frozen placeholder rows */
.fp-r1 th[data-v-5be5f7f7] { height: 26px; background: #f0f1f8; border-bottom: 1px solid #d1d5e8;
}
.fp-r3 td[data-v-5be5f7f7] { height: 22px; background: #f8f9fc; border-bottom: 2px solid #c8cde0;
}

/* Sub-header row cells for the Preferred Resource split ("TBD" / "Name").
   Sits directly under the `.tee-fh` row (rowspan=2 on every other header
   covers this row so the sub-headers only render inside the two Preferred
   Resource sub-columns). Uses the same palette as `.tee-fh` but a shorter
   height and slightly smaller font to read as a secondary label. */
.tee-tbl thead .tee-sub-fh[data-v-5be5f7f7] {
  background: #f5f6fa;
  font-size: 10px;
  font-weight: 700;
  /* Match `.tee-fh` — dark-navy text + slightly darker rules so the
     whole header band reads consistently with the TPV grid. */
  color: #1a1d35;
  /* `text-align: center` forces the "TBD" / "NAME" labels to centre
     inside their sub-columns. Scoped under `.tee-tbl thead` to win over
     any generic `th` text-align that browsers or global stylesheets
     apply — the previous plain-class selector wasn't taking effect
     because the column widths are wider than the label so the
     alignment mattered visually. */
  text-align: center !important;
  /* 10px horizontal so "TBD" gets clear breathing room on both sides
     inside the 68px sub-column — the previous 8px still read tight
     against the left border in some browsers because uppercase caps
     hug the edge more than lowercase text. */
  padding: 3px 10px;
  height: 22px;
  border-right: 1px solid #c5c6c9;
  border-bottom: 1px solid #c5c6c9;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.15;
}

/* Row-level TBD checkbox — matches the popup's `.tee-modal-tbd-check`
   input styling so the same widget reads the same in both entry points
   (dual-UI parity per bizplus-dealsheet/CLAUDE.md). */
.tee-row-tbd-check[data-v-5be5f7f7] {
  margin: 0;
  width: 14px;
  height: 14px;
  accent-color: #da2128;
  cursor: pointer;
  vertical-align: middle;
}
/* TBD data cell — narrow column, centred checkbox. `min-width` alongside
   `width` firmly locks the column at 56px — auto-layout otherwise treats
   the col-hint as a suggestion and can shrink the track when other
   columns demand space. 12px horizontal padding on each side gives the
   checkbox breathing room off the cell borders. */
.tee-fd--tbd[data-v-5be5f7f7] {
  padding: 0 14px !important;
  width: 68px;
  min-width: 68px;
}

/* Identity data cells (formerly "frozen"). Auto-layout tables let a column
   widen to fit its widest cell — dropping `overflow: hidden` +
   `text-overflow: ellipsis` here so a long role name, country name, or
   preferred-resource name renders fully instead of getting truncated with
   an ellipsis. `white-space: nowrap` stays so the row height stays at 40px
   (no wrap → no unexpected multi-line rows); the column just widens
   horizontally and the whole table scrolls in `.tee-grid-outer`. */
.tee-fd[data-v-5be5f7f7] { background: #fff; font-size: 12.5px; color: #1a1d35; border-right: 1px solid #e8eaf2; border-bottom: 1px solid #f0f2f8; height: 40px; padding: 0 6px; white-space: nowrap; vertical-align: middle;
  /* Buffer for `scrollIntoView` so mandatory-error clicks (from the
     VRB-A Go/NoGo modal, routed via `scrollToMandatoryField`) don't
     land the target cell BEHIND the internal sticky thead (~106px:
     fp-r1 26 + tee-fh 36 + tee-sub-fh 22 + fp-r3 22) or the sticky
     first-column band. Cell scrolls into view just below the header
     band. */
  scroll-margin-top:  120px;
  scroll-margin-left: 260px;
}
.tee-fd.center[data-v-5be5f7f7] { text-align: center;
}
.tee-fd.right[data-v-5be5f7f7]  { text-align: right;
}

/* Inline cell inputs */
.tee-cell-inp[data-v-5be5f7f7] { border: none; background: transparent; font-size: 12.5px; font-weight: 600; color: #1a1d35; width: 100%; outline: none; font-family: inherit;
}
.tee-cell-inp[data-v-5be5f7f7]::-moz-placeholder { color: #c8cde0; font-weight: 400;
}
.tee-cell-inp[data-v-5be5f7f7]::placeholder { color: #c8cde0; font-weight: 400;
}
.tee-cell-inp[data-v-5be5f7f7]:focus { background: #fffbeb;
}
.tee-cell-ro[data-v-5be5f7f7] { cursor: default; color: #8a95b0 !important; pointer-events: none;
}
.tee-cell-ro[data-v-5be5f7f7]:focus { background: transparent;
}
.tee-cell-select[data-v-5be5f7f7] { border: none; background: transparent; font-size: 11px; font-weight: 600; width: 100%; outline: none; font-family: inherit; color: #1a1d35; cursor: pointer;
}

/* BaseSelect-carrying cells (Role / Country Pricing / Language / Type).
   Post-UAT merge: identity columns now auto-size so there's no reason to
   pack the dropdown into the previous fixed 90-110px slot. Let BaseSelect
   render with its native chrome (border, chevron, padding) — the small
   4px inset just gives the dropdown breathing room off the cell edges,
   and `overflow: visible` keeps the focus ring / hover box-shadow from
   clipping against the cell borders. */
/* Cell width lock — every dropdown-carrying cell (Role / Type / Country /
   Language, plus the split-Name cell below) renders at the same 180px
   width so all five columns read visually uniform. Auto-layout would
   otherwise grow Role and Name to fit long picks like "Principal
   Consultant" or "Arul Kumaran Paramas"; capping the cell means those
   labels truncate inside the trigger via PrimeVue's built-in overflow. */
.tee-fd--bs[data-v-5be5f7f7] { padding: 4px 6px !important; overflow: visible; width: 180px; min-width: 180px;
}

/* Preferred Resource row cell — read-only text display. Picker + TBD
   toggle live exclusively in the Add / Edit Resource popup, so the row
   simply shows the stored name (or "TBD" placeholder text when blank).
   Matches the row's small-font styling used by the other frozen-panel
   cells so the column doesn't visually shout compared to its neighbours. */
/* Name cell — holds the BaseSearchSelect (picker) or `<input>` (TBD mode).
   Locked to the same 180px width as `.tee-fd--bs` above so all five
   identity dropdowns render uniform width regardless of picked value.
   `min-width` alongside `width` firmly locks the column — auto-layout
   treats plain `width` (and the `<col>` hint) as a suggestion and can
   shrink the track when adjacent columns demand space; `min-width`
   wins that tug-of-war so the Name column stays uniform with Role /
   Type / Country / Language. Long labels ("Arul Kumaran Paramas" etc.)
   truncate inside the trigger via PrimeVue's built-in overflow. */
.tee-fd--name[data-v-5be5f7f7] { padding: 4px 6px !important; width: 180px; min-width: 180px;
}

/* ── Preferred Resource group highlight ──
   TBD + Name are functionally paired (checkbox toggles which widget
   renders in the Name cell), so both data cells share a subtle soft-
   green tint on every row — matching the Country-Delivery pair below.
   One shared "grouped column" palette rather than two competing hues
   so the eye reads them as the same interaction pattern (paired-
   toggle-column) rather than as unrelated blocks. Applied via a
   specific `.tee-row .tee-fd--tbd/--name` selector so it wins over
   the base `.tee-fd { background: #fff }` and the
   `nth-child(even) .tee-fd { background: #fafbfd }` alternator.
   Hover deepens the tint slightly so the row-hover cue still reads
   inside the group. Pending-delete's `!important` red still wins over
   this because that rule is declared later with `!important`. */
.tee-row .tee-fd--tbd[data-v-5be5f7f7],
.tee-row .tee-fd--name[data-v-5be5f7f7] {
  background: #f0f7f0 !important;
}
.tee-row:hover .tee-fd--tbd[data-v-5be5f7f7],
.tee-row:hover .tee-fd--name[data-v-5be5f7f7] {
  background: #fde4e4 !important;
}

/* ── Country-Delivery group highlight ──
   Same pattern AND same palette as the Preferred Resource pair above —
   Remote (checkbox) + Country (dropdown) are functionally paired
   (checkbox toggles which widget is enabled), so both share the same
   soft-green tint. Consistent "grouped column" hue across every
   paired-toggle column in the row so users learn the pattern once.
   Hover deepens the tint slightly so the row-hover cue still reads
   inside the group. Pending-delete's `!important` red still wins because
   that rule is declared later with `!important`. */
.tee-row .tee-fd--remote[data-v-5be5f7f7],
.tee-row .tee-fd--country[data-v-5be5f7f7] {
  background: #f0f7f0 !important;
}
.tee-row:hover .tee-fd--remote[data-v-5be5f7f7],
.tee-row:hover .tee-fd--country[data-v-5be5f7f7] {
  background: #fde4e4 !important;
}

/* Remote data cell — narrow column, centred checkbox. Same shape as
   `.tee-fd--tbd` above: `min-width` alongside `width` firmly locks the
   column at 68px; 14px horizontal padding gives the checkbox breathing
   room off the cell borders. */
.tee-fd--remote[data-v-5be5f7f7] {
  padding: 0 14px !important;
  width: 68px;
  min-width: 68px;
}

/* Country cell — holds the BaseSelect (dropdown). Locked to 180px so it
   reads uniform with Role / Type / Country Pricing / Language / Name.
   `min-width` alongside `width` prevents auto-layout from shrinking the
   track when adjacent columns demand space. */
.tee-fd--country[data-v-5be5f7f7] {
  padding: 4px 6px !important;
  width: 180px;
  min-width: 180px;
}

/* Preferred Skills cell — whole-cell click target. Sits between Language
   and Target Rate; shows a compact "N selected" summary and opens the
   shared BaseSkillsPicker sub-popup on click. `cursor: pointer` on the
   whole cell so users get the click affordance across the full 110px
   width, not just on the count text. `role="button"` on the <td> is
   caught by the shared readonly CSS list in DealsheetEditView.vue so
   the click is auto-suppressed in read-only mode; the handler also
   guards with `if (props.readonly) return` (belt + suspenders per the
   frontend/CLAUDE.md rule for div-clickables). */
.tee-fd--skills[data-v-5be5f7f7] {
  padding: 0 8px !important;
  width: 110px;
  min-width: 110px;
  cursor: pointer;
  vertical-align: middle;
}
.tee-fd--skills:hover .tee-cell-skills-count[data-v-5be5f7f7] { color: #4f46e5;
}
.tee-fd--skills[data-v-5be5f7f7]:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: -2px;
}
/* Selection-count pill inside the cell. Two states:
     - `--empty` (no skills picked)  → soft grey, italic, reads as
       placeholder text so the cell doesn't shout with "0 selected"
     - default (>=1 skill picked)     → dark navy pill on a soft-indigo
       background so the count reads distinctly from surrounding
       drop-down + input cells. */
.tee-cell-skills-count[data-v-5be5f7f7] {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: #1e3a8a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  transition: color 0.12s, background 0.12s;
}
.tee-cell-skills-count--empty[data-v-5be5f7f7] {
  background: transparent;
  color: #9098b0;
  font-weight: 500;
  font-style: italic;
}

/* Hidden BaseSkillsPicker — kept in the DOM at the tab level so a
   template ref survives across cell clicks, but visually removed. Only
   the picker's internal MODAL (opened via openModal()) should render on
   screen; the picker's own trigger button + chip list would clutter the
   layout, so we hide the whole component and drive it programmatically.
   Not `display: none` — that would strip the component from the layout
   tree and BaseSkillsPicker's internal size measurements could break.
   Off-screen + zero footprint keeps it inert but present. */
.tee-hidden-picker[data-v-5be5f7f7] {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

/* Row-level Remote checkbox — matches the popup's
   `.tee-modal-remote-check` input styling so the same widget reads the
   same in both entry points (dual-UI parity per
   bizplus-dealsheet/CLAUDE.md). Brand-red accent for the tick. Disabled
   state (OSQ = 'remote' forces on + locks) keeps the tick vividly red
   — matching the popup — so the user reads "locked ON" rather than a
   washed-out disabled checkbox. */
.tee-row-remote-check[data-v-5be5f7f7] {
  margin: 0;
  width: 14px;
  height: 14px;
  accent-color: #da2128;
  cursor: pointer;
  vertical-align: middle;
}
.tee-row-remote-check--disabled[data-v-5be5f7f7] {
  cursor: not-allowed;
}
.tee-row-remote-check[data-v-5be5f7f7]:disabled {
  opacity: 1;
  accent-color: #da2128;
  cursor: not-allowed;
}
.tee-cell-name[data-v-5be5f7f7] { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.tee-cell-name--placeholder[data-v-5be5f7f7] { color: #c8cde0; font-style: italic; font-weight: 600; letter-spacing: 0.3px;
}
/* BaseSelect inside a row cell — restored to native chrome (border,
   chevron, padding, font size) after the UAT-driven merge freed up
   horizontal space per column. Only three tweaks survive from the old
   custom look:
     - `width: 100%` so the trigger fills the cell horizontally
     - `.bp-form-group { margin: 0 }` to strip the default vertical rhythm
       that would otherwise push the trigger off-centre in the 40px cell
     - `.bp-label { display: none }` because column headers already label
       the field and we don't want a second label above the dropdown
   Everything else (border, background, chevron, hover state, focus ring,
   placeholder colour, font size, padding) comes straight from BaseSelect's
   own styling in @dssplus/bizplus-fe-ui. */
[data-v-5be5f7f7] .tee-cell-bs { width: 100%;
}
[data-v-5be5f7f7] .tee-cell-bs .bp-form-group { margin: 0;
}
[data-v-5be5f7f7] .tee-cell-bs .bp-label { display: none;
}
/* Force BaseSearchSelect's internal PrimeVue AutoComplete DOM to fill the
   cell horizontally. `.p-autocomplete` defaults to `display: inline-flex`
   in PrimeVue 4 — its trigger only takes as much width as its content,
   so a short pick like "Arul" leaves the cell looking narrower than the
   sibling BaseSelect (Role / Type / Country / Language) columns even
   when the cell itself is locked to 180px. These rules stretch the
   autocomplete wrapper, the DSSPlus outer wrapper, and the inner
   <input> to 100% of the cell so the trigger visually matches the
   BaseSelect triggers next to it. Applied via `:deep` because the DOM
   lives inside the shared @dssplus/bizplus-fe-ui component. */
[data-v-5be5f7f7] .tee-cell-bs .p-autocomplete,[data-v-5be5f7f7] .tee-cell-bs .bp-search-single,[data-v-5be5f7f7] .tee-cell-bs .bp-search-single-wrap { width: 100%; display: block;
}
[data-v-5be5f7f7] .tee-cell-bs .p-autocomplete-input { width: 100%;
}

/* Row hover — post-merge, identity + calendar cells share one `<tr>`, so
   pure CSS `:hover` covers both without the old `hoveredRow` ref mirror.
   Identity cells go slightly darker on hover than calendar cells so the
   Excel-style "row here" cue still reads clearly across the whole row.
   Alternating `nth-child(even)` background stays on identity cells only —
   calendar cells keep their own past/current/heat-map colouring rules. */
.tee-row:nth-child(even) .tee-fd[data-v-5be5f7f7] { background: #fafbfd;
}
/* Row hover — soft brand-red tint (rose-50 / rose-25). Replaces the
   previous cool-grey `#eef2ff / #f4f6ff` which reads too close to a
   "disabled" state. Calendar cells hover slightly lighter than identity
   cells so the calendar band still visually recedes from the identity
   band, same relationship as the non-hover base colours. */
.tee-row:hover .tee-fd[data-v-5be5f7f7] { background: #fef2f2 !important;
}
.tee-row:hover .tee-wk[data-v-5be5f7f7] { background: #fff5f5 !important;
}

/* TEE follows the OBI / CFC pattern — no always-on red-box highlighting.
   When the user clicks a specific row-cell error in the mandatory-errors
   modal, the parent's `scrollToMandatoryField` finds the exact cell via its
   composite `data-mandatory-key` (see `teeCellKey` in <script setup>) and
   applies the shared `.ds-field-highlight` pulse (defined in
   DealsheetEditView.vue) for a temporary red outline. */

/* Serial-number cell — plain always-visible label. Row actions live in
   the adjacent sticky-2 column via a single "…" (more actions) menu
   button (see `.row-menu-btn` below). */
.row-num[data-v-5be5f7f7] { font-size: 11.5px; font-weight: 600; color: #9098b0;
}

/* Row actions column — 32px cell that holds the single "…" (more
   actions) menu-trigger button. Icon-only 24×24 pill styled as a
   neutral grey ⋮ that darkens to brand-indigo on hover / focus. Tooltip
   comes from the `title` attr. Post-consolidation replaces the separate
   `.tee-fd--edit-btn` + `.tee-fd--del-btn` cells and their icon-only
   pencil / trash buttons. */
.tee-fd--menu-btn[data-v-5be5f7f7] { padding: 0 !important; text-align: center; vertical-align: middle;
}
.row-menu-btn[data-v-5be5f7f7] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 5px;
  background: transparent; border: none; cursor: pointer;
  color: #9098b0; transition: background 0.12s, color 0.12s;
}
.row-menu-btn[data-v-5be5f7f7]:hover,
.row-menu-btn[data-v-5be5f7f7]:focus-visible {
  background: #eef2ff; color: #4f46e5; outline: none;
}

/* ── Row-selection click target (# column) ──
   The # cell doubles as the row-selection toggle — cursor pointer +
   subtle hover ring on the cell alone signals it's clickable without
   competing with the row-wide hover shading. Keyboard focus outline
   uses the brand indigo focus colour used elsewhere for div-clickables
   so the interaction reads consistent across the tab. */
/* Dual-purpose # cell — cursor: grab signals both "clickable" (for
   selection toggle) and "draggable" (for reorder). Active state (mouse
   held down) switches to grabbing so the affordance updates the moment
   the user starts a drag. `user-select: none` prevents accidental text
   selection during the drag path. */
.tee-fd--select-target[data-v-5be5f7f7] { cursor: grab; -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
.tee-fd--select-target[data-v-5be5f7f7]:active { cursor: grabbing;
}
.tee-fd--select-target[data-v-5be5f7f7]:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: -2px;
}

/* ── Drag-to-reorder visual states ──
   - `.tee-row--dragging`     : the source row (being lifted) fades so
     the user can see where they came from. Applied to every cell in
     the row (identity + calendar) so the fade is uniform edge-to-edge.
   - `.tee-row--drop-above`   : brand-red 3px indicator at the TOP of
     the target row via inset box-shadow. Applied to every cell so the
     indicator spans the whole horizontal band, not just identity cols.
   - `.tee-row--drop-below`   : same, but at the BOTTOM.
   Box-shadow (not border) avoids table row-height shift during drag. */
.tee-row--dragging .tee-fd[data-v-5be5f7f7],
.tee-row--dragging .tee-wk[data-v-5be5f7f7] { opacity: 0.5;
}
.tee-row--drop-above .tee-fd[data-v-5be5f7f7],
.tee-row--drop-above .tee-wk[data-v-5be5f7f7] {
  box-shadow: inset 0 3px 0 0 #da2128;
}
.tee-row--drop-below .tee-fd[data-v-5be5f7f7],
.tee-row--drop-below .tee-wk[data-v-5be5f7f7] {
  box-shadow: inset 0 -3px 0 0 #da2128;
}

/* ── Source row highlight while the "Set Week effort" strip is open ──
   Tints the row that owns the currently-open strip so the user can see
   at a glance WHICH row the amber input band below is editing. Softer
   amber than the strip itself (`#fef3c7`) so the strip still visually
   reads as the primary input area; the tinted row reads as its label.
   Same inset box-shadow overlay technique as `.tee-row--just-duplicated`
   — bypasses `!important` backgrounds on sticky / heat / e-over cells
   so the tint reaches uniformly across identity and calendar columns. */
.tee-row--effort-active .tee-fd[data-v-5be5f7f7],
.tee-row--effort-active .tee-wk[data-v-5be5f7f7] {
  box-shadow: inset 0 0 0 9999px rgba(245, 158, 11, 0.18);
}

/* ── "Set Week effort" bulk-fill strip ──
   Renders as an extra `<tr>` immediately after the source row when the
   user picks "Set Week effort" from the row menu. Full-row-width via
   the outer `<td colspan>`; inner content is a flex row containing the
   REPEAT DAYS label, resource name, Days-per-week input, From / To
   week dropdowns, and Apply / Clear / Close buttons. Amber palette
   (`#fef3c7` bg, `#a16207` accent) matches the "warning / bulk-action"
   affordance we use elsewhere without competing with the row's own
   selection red / group green / pending-delete state colours. */
/* Strip td spans every column (identity + calendar) so the amber band
   extends full-width visually. Padding is on the inner div (not the
   td) so the sticky inner container drives its own padding cleanly. */
.tee-repeat-strip > td[data-v-5be5f7f7] {
  background: #fef3c7;
  border-top: 1px solid #fde68a;
  border-bottom: 1px solid #fde68a;
  padding: 0;
  vertical-align: middle;
}
/* `position: sticky` on the inner container (NOT the td) — sticky on
   `<td>` with a large colspan is unreliable across browsers (Chromium
   in particular is known to skip the sticky calc on wide table cells),
   so we sticky the child div instead. Div scopes to `.tee-grid-outer`
   (the horizontal scroll container) — as the user scrolls the grid
   right, the strip's controls stay glued to the left edge of the
   viewport while the amber band extends behind them.
   `width: fit-content` keeps the sticky container just wide enough for
   its controls, so there's no invisible overflow eating pointer events
   on cells further right. */
.tee-repeat-strip-inner[data-v-5be5f7f7] {
  position: sticky;
  left: 0;
  z-index: 2;
  width: -moz-fit-content;
  width: fit-content;
  max-width: calc(100vw - 40px);
  padding: 10px 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: #78350f;
}
.tee-repeat-strip-title[data-v-5be5f7f7] {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #92400e;
  text-transform: uppercase;
}
.tee-repeat-strip-resource[data-v-5be5f7f7] {
  font-weight: 600;
  color: #1a1d35;
  padding-right: 8px;
  border-right: 1px solid #fbbf24;
}
.tee-repeat-strip-field[data-v-5be5f7f7] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tee-repeat-strip-lbl[data-v-5be5f7f7] {
  color: #78350f;
  font-weight: 600;
}
.tee-repeat-strip-days[data-v-5be5f7f7] {
  width: 68px;
  padding: 6px 10px;
  border: 1px solid #fbbf24;
  border-radius: 6px;
  background: #fff;
  color: #1a1d35;
  font-size: 12.5px;
  font-family: inherit;
  text-align: right;
  outline: none;
}
.tee-repeat-strip-days[data-v-5be5f7f7]:focus { border-color: #a16207; box-shadow: 0 0 0 2px rgba(161, 98, 7, 0.15);
}
.tee-repeat-strip-select[data-v-5be5f7f7] {
  padding: 6px 10px;
  border: 1px solid #fbbf24;
  border-radius: 6px;
  background: #fff;
  color: #1a1d35;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}
.tee-repeat-strip-select[data-v-5be5f7f7]:focus { border-color: #a16207; box-shadow: 0 0 0 2px rgba(161, 98, 7, 0.15);
}
.tee-repeat-strip-btn[data-v-5be5f7f7] {
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.tee-repeat-strip-btn--apply[data-v-5be5f7f7] {
  background: #a16207;
  color: #fff;
  border-color: #a16207;
}
.tee-repeat-strip-btn--apply[data-v-5be5f7f7]:hover { background: #78350f; border-color: #78350f;
}
.tee-repeat-strip-btn--clear[data-v-5be5f7f7] {
  background: transparent;
  color: #92400e;
  border-color: #fbbf24;
}
.tee-repeat-strip-btn--clear[data-v-5be5f7f7]:hover { background: #fde68a;
}
.tee-repeat-strip-btn--close[data-v-5be5f7f7] {
  background: transparent;
  color: #92400e;
  border-color: transparent;
  margin-left: auto;
}
.tee-repeat-strip-btn--close[data-v-5be5f7f7]:hover { color: #78350f; text-decoration: underline;
}

/* ── Just-duplicated row flash ──
   Fires briefly on rows created via "Duplicate this resource" (see
   `duplicateRow` + `recentlyDuplicatedKeys` in the script). Uses an
   inset `box-shadow` with alpha channel — NOT `background-color` —
   because grouped cells / sticky cells / selected / pending-delete
   all set their `background` with `!important`, and per CSS spec
   `!important` inside `@keyframes` is ignored. Box-shadow isn't
   fought by any existing rule, so the emerald overlay wins uniformly
   across every cell type (identity, sticky, grouped, week calendar)
   for the duration of the animation. Once the 2s animation ends the
   shadow evaluates back to the cell's normal state (which for most
   cells is none). Trade-off: for 2s the row loses sticky-3's right-
   edge separator and the pending-delete / selection first-child
   accent stripes — acceptable since those states are unlikely to be
   concurrent with a fresh duplicate. */
.tee-row--just-duplicated .tee-fd[data-v-5be5f7f7],
.tee-row--just-duplicated .tee-wk[data-v-5be5f7f7] {
  animation: teeRowJustDuplicated-5be5f7f7 2s ease-out;
}
@keyframes teeRowJustDuplicated-5be5f7f7 {
0%   { box-shadow: inset 0 0 0 9999px rgba(34, 197, 94, 0.60);
}
60%  { box-shadow: inset 0 0 0 9999px rgba(34, 197, 94, 0.40);
}
100% { box-shadow: inset 0 0 0 9999px rgba(34, 197, 94, 0);
}
}

/* Just-applied week-effort cell flash — fires briefly on every cell
   written by the REPEAT DAYS "Apply" button (see `applyWeekEffort` +
   `recentlyEffortAppliedCells` in the script). Same box-shadow overlay
   technique as the row duplicate flash (bypasses !important background
   rules), amber tint to match the strip's warm palette. */
.tee-wk--just-applied[data-v-5be5f7f7] { animation: teeCellJustApplied-5be5f7f7 2s ease-out;
}
@keyframes teeCellJustApplied-5be5f7f7 {
0%   { box-shadow: inset 0 0 0 9999px rgba(245, 158, 11, 0.55);
}
60%  { box-shadow: inset 0 0 0 9999px rgba(245, 158, 11, 0.35);
}
100% { box-shadow: inset 0 0 0 9999px rgba(245, 158, 11, 0);
}
}

/* Drag ghost — floating copy of the source row that follows the mouse.
   Fixed to the viewport (JS updates its position from the pointer),
   teleported to <body>, `pointer-events: none` so it can't intercept
   elementFromPoint used for drop detection. The inner content is a
   cloned <tr> rendered inside a mini <table> so the cell layout (col
   widths, sticky, group tints) reads the same as the live row.
   Wrapper adds a subtle tilt + lift-shadow so it visually reads as a
   "picked-up" row — the pattern users know from Windows Explorer /
   Airtable row drag. */
.tee-drag-ghost[data-v-5be5f7f7] {
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  border: 1px solid #da2128;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(15, 17, 40, 0.32);
  opacity: 0.94;
  transform: rotate(-1.2deg);
  overflow: hidden;
  /* Hard cap so a wide row doesn't extend far past the cursor. Combined
     with the reduced `DRAG_GHOST_COL_COUNT` in the script, the ghost
     stays close to the cursor tip (~500px wide) instead of spanning
     the full row. */
  max-width: 520px;
}
.tee-tbl-ghost[data-v-5be5f7f7] {
  /* Inherit `.tee-tbl` collapse/spacing but stop the ghost table from
     stretching to fill its wrapper — auto width fits the trimmed set
     of columns exactly. */
  width: auto;
  background: #fff;
}
/* Neutralise sticky positioning inside the ghost — the ghost's own
   wrapper is `position: fixed` and follows the cursor; the individual
   cell sticky rules would fight that. Selectors mirror the ones from
   the live table so the cascade lines up. */
.tee-tbl-ghost .tee-sticky-1[data-v-5be5f7f7],
.tee-tbl-ghost .tee-sticky-2[data-v-5be5f7f7],
.tee-tbl-ghost .tee-sticky-3[data-v-5be5f7f7] {
  position: static !important;
  left: auto !important;
  box-shadow: none !important;
}

/* ── Row selected highlight ──
   Clicking the # cell toggles `.tee-row--selected` on the row. Every
   cell in the row paints a light-red tint so the highlight reads as
   one continuous band all the way across — identity columns, the two
   grouped-column pairs, sticky columns, AND the per-week effort cells
   in the calendar section on the right. The enumerated selectors for
   `.tee-fd--tbd/--name/--remote/--country` and `.tee-wk.cur/.past/
   .e-over` are needed because those cells declare their own
   `!important` backgrounds — matching specificity here (with
   !important + declaration order) lets us override them. First-cell
   inset shadow adds a brand-red accent stripe (same trick as pending-
   delete uses, no layout shift). Pending-delete is declared AFTER
   this block so its bold red always wins when a selected row is also
   queued for delete. */
.tee-row--selected .tee-fd[data-v-5be5f7f7],
.tee-row--selected .tee-fd--tbd[data-v-5be5f7f7],
.tee-row--selected .tee-fd--name[data-v-5be5f7f7],
.tee-row--selected .tee-fd--remote[data-v-5be5f7f7],
.tee-row--selected .tee-fd--country[data-v-5be5f7f7],
.tee-row--selected .tee-fd.tee-sticky-1[data-v-5be5f7f7],
.tee-row--selected .tee-fd.tee-sticky-2[data-v-5be5f7f7],
.tee-row--selected .tee-fd.tee-sticky-3[data-v-5be5f7f7],
.tee-row--selected .tee-wk[data-v-5be5f7f7],
.tee-row--selected .tee-wk.cur[data-v-5be5f7f7],
.tee-row--selected .tee-wk.past[data-v-5be5f7f7],
.tee-row--selected .tee-wk.e-over[data-v-5be5f7f7] {
  background: #fecaca !important;
}
.tee-row--selected:hover .tee-fd[data-v-5be5f7f7],
.tee-row--selected:hover .tee-fd--tbd[data-v-5be5f7f7],
.tee-row--selected:hover .tee-fd--name[data-v-5be5f7f7],
.tee-row--selected:hover .tee-fd--remote[data-v-5be5f7f7],
.tee-row--selected:hover .tee-fd--country[data-v-5be5f7f7],
.tee-row--selected:hover .tee-fd.tee-sticky-1[data-v-5be5f7f7],
.tee-row--selected:hover .tee-fd.tee-sticky-2[data-v-5be5f7f7],
.tee-row--selected:hover .tee-fd.tee-sticky-3[data-v-5be5f7f7],
.tee-row--selected:hover .tee-wk[data-v-5be5f7f7],
.tee-row--selected:hover .tee-wk.cur[data-v-5be5f7f7],
.tee-row--selected:hover .tee-wk.past[data-v-5be5f7f7],
.tee-row--selected:hover .tee-wk.e-over[data-v-5be5f7f7] {
  background: #fca5a5 !important;
}
.tee-row--selected .tee-fd[data-v-5be5f7f7]:first-child {
  box-shadow: inset 4px 0 0 0 #da2128;
}

/* Pending-delete row highlight — same visual language as the Dealsheet
   listing delete flow (bold red bg, white text, thick red left bar) so
   the two destructive actions feel consistent. Applied via `.tee-row--
   pending-delete` on the <tr>; scoped rules force white on descendants
   with :not() escapes for the edit + delete buttons themselves (their
   SVG colour must remain intact to stay recognisable). Declared AFTER
   `.tee-row--selected` so both rules can carry `!important` at the same
   specificity — declaration order breaks the tie, so pending-delete's
   bold red always wins when a row is both selected AND queued for
   delete (the destructive action needs to shout louder than the
   view-aid highlight). */
.tee-row--pending-delete .tee-fd[data-v-5be5f7f7],
.tee-row--pending-delete .tee-fd--tbd[data-v-5be5f7f7],
.tee-row--pending-delete .tee-fd--name[data-v-5be5f7f7],
.tee-row--pending-delete .tee-fd--remote[data-v-5be5f7f7],
.tee-row--pending-delete .tee-fd--country[data-v-5be5f7f7],
.tee-row--pending-delete .tee-fd.tee-sticky-1[data-v-5be5f7f7],
.tee-row--pending-delete .tee-fd.tee-sticky-2[data-v-5be5f7f7],
.tee-row--pending-delete .tee-fd.tee-sticky-3[data-v-5be5f7f7] {
  background: #ef4444 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}
.tee-row--pending-delete .tee-fd[data-v-5be5f7f7]:first-child {
  box-shadow: inset 6px 0 0 0 #991b1b !important;
}
/* White text on the red pending-delete row — TARGETED at cell-level
   text elements only (row num, plain <input class="tee-cell-inp">, the
   calendar effort input, the skills-count pill, the tot-num footer
   text, and any direct `.tee-fd` text content via inheritance from the
   base pending-delete rule above).
   Explicitly NOT targeted: shared component internals — `.bp-input`
   (BaseInput on Proposed Rate + Work Stream), `.p-select-label`
   (BaseSelect on Role / Type / Country-Pricing / Country / Language),
   `.p-autocomplete-input` (BaseSearchSelect on Preferred Resource
   Name), etc. Those components keep their normal WHITE background +
   DARK text — the previous global `.tee-fd * { color: white }` sweep
   was forcing white text over their still-white backgrounds and
   producing invisible content. */
.tee-row--pending-delete .tee-cell-inp[data-v-5be5f7f7]::-moz-placeholder, .tee-row--pending-delete .tee-eff-inp[data-v-5be5f7f7]::-moz-placeholder {
  color: #ffffff !important;
}
.tee-row--pending-delete .row-num[data-v-5be5f7f7],
.tee-row--pending-delete .tee-cell-inp[data-v-5be5f7f7],
.tee-row--pending-delete .tee-cell-inp[data-v-5be5f7f7]::placeholder,
.tee-row--pending-delete .tee-eff-inp[data-v-5be5f7f7],
.tee-row--pending-delete .tee-eff-inp[data-v-5be5f7f7]::placeholder,
.tee-row--pending-delete .tee-cell-skills-count[data-v-5be5f7f7],
.tee-row--pending-delete .tot-num[data-v-5be5f7f7],
.tee-row--pending-delete .row-menu-btn[data-v-5be5f7f7] {
  color: #ffffff !important;
}
/* Skills-count pill loses its indigo-tint pill background too so it
   reads as a plain white numeric label on the red row, matching the
   other cell-level text treatments. */
.tee-row--pending-delete .tee-cell-skills-count[data-v-5be5f7f7] {
  background: transparent !important;
}

/* Rate colours — applied on the enclosing `.tee-fd` (post-BaseInput
   swap the class sits on the cell, not on the raw <input>). Cascades
   into the shared `.bp-input` inside BaseInput via `:deep` since
   `.bp-input` is a global class defined in the fe-ui package.
   Existing bare `.rate-low` / `.rate-ok` selectors kept so any other
   consumer of these classes (calendar heat text, popup readout, etc.)
   still reads correctly — do NOT remove without a search for
   `rateClass(` first. */
.rate-low[data-v-5be5f7f7] { color: #da2128 !important; font-weight: 700;
}
.rate-ok[data-v-5be5f7f7]  { color: #16a34a !important; font-weight: 700;
}
.tee-fd.rate-low[data-v-5be5f7f7] .bp-input { color: #da2128 !important; font-weight: 700;
}
.tee-fd.rate-ok[data-v-5be5f7f7]  .bp-input { color: #16a34a !important; font-weight: 700;
}

/* ── BaseInput inside a row cell ──
   The two cells that swapped from `.tee-cell-inp` (Proposed Rate,
   Work Stream) now render BaseInput's native chrome — same border,
   background, padding, and font-size as every other BaseInput on the
   page. Only three cell-level tweaks survive:
     - `overflow: visible` so the focus ring / box-shadow isn't clipped
       by the cell borders.
     - `.bp-form-group { gap: 0 }` because we render no label / helper
       here — the default 6px gap would otherwise leave dead space
       above the input inside the row.
     - `width: 100%` on `.bp-input` so it fills the cell horizontally.
   Right-alignment on the Proposed Rate side matches the numeric-column
   convention (Target Rate / Total Days on either side are right-
   aligned too). */
/* Width lock — same 180px firm width as Language / Country / Role /
   Type / Name / Country-Pricing so every identity-column BaseInput /
   BaseSelect reads uniform across the row. `width` + `min-width` prevent
   auto-layout from letting adjacent columns pull the track wider or
   shrinking it below the hint. */
.tee-fd--rate[data-v-5be5f7f7],
.tee-fd--workstream[data-v-5be5f7f7] {
  padding: 4px 6px !important;
  overflow: visible;
  width: 180px;
  min-width: 180px;
}
.tee-fd--rate[data-v-5be5f7f7]      .bp-form-group,
.tee-fd--workstream[data-v-5be5f7f7] .bp-form-group { gap: 0;
}
.tee-fd--rate[data-v-5be5f7f7]      .bp-input,
.tee-fd--workstream[data-v-5be5f7f7] .bp-input { width: 100%;
}
.tee-fd--rate[data-v-5be5f7f7]      .bp-input { text-align: right;
}

/* Preferred Resource → Name cell — when TBD is on, a BaseInput renders
   inside the cell (see template). Same shared-BaseInput sizing tweaks
   as the Rate / Work Stream cells above:
     - `overflow: visible` so BaseInput's focus ring isn't clipped.
     - `.bp-form-group { gap: 0 }` — we render no label / helper here,
       so the default 6px flex gap would leave dead space inside the
       40px row.
     - `.bp-input { width: 100% }` — fill the 180px cell width.
   The `.tee-cell-bs` rules further up handle the OTHER Name-cell state
   (BaseSearchSelect when TBD is off) so both variants read uniform. */
.tee-fd--name[data-v-5be5f7f7] .bp-form-group { gap: 0;
}
.tee-fd--name[data-v-5be5f7f7] .bp-input { width: 100%;
}

/* Preferred Resource cell wrapper — flex row so the FSE / ICDR tag sits
   beside the picker (right-aligned trailing chip) rather than beneath.
   The picker consumes remaining width via `flex: 1; min-width: 0` so
   long names truncate inside the picker's own trigger instead of pushing
   the tag off-canvas. */
.tee-name-cell[data-v-5be5f7f7] {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.tee-name-cell[data-v-5be5f7f7] > :first-child { flex: 1 1 auto; min-width: 0;
}
/* Small colour-coded pill for the classification derived from the
   picker's email domain. `flex-shrink: 0` keeps the tag at natural width
   as the picker shrinks. Uppercase for label-tag vibe consistent with
   the section banner styling used elsewhere in the tab. */
.tee-emp-tag[data-v-5be5f7f7] {
  display: inline-block;
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  line-height: 1.4;
}
.tee-emp-tag--fse[data-v-5be5f7f7]  { background: #e0f2fe; color: #075985; border: 1px solid #bae6fd;
}
.tee-emp-tag--icdr[data-v-5be5f7f7] { background: #fef3c7; color: #92400e; border: 1px solid #fde68a;
}
/* Popup variant — sits inline to the right of the picker in the popup
   too, matching the grid. Slightly larger padding / font because the
   popup form has more breathing room than the tightly-packed cell. */
.tee-emp-tag--popup[data-v-5be5f7f7] {
  margin-left: 8px;
  padding: 2px 10px;
  font-size: 11px;
  vertical-align: middle;
}

/* Weekly header cells */
.tee-mh[data-v-5be5f7f7] { font-size: 9.5px; font-weight: 700; color: #4e5a82; text-align: center; text-transform: uppercase; letter-spacing: 0.3px; border-right: 1px solid #c8cde0; border-bottom: 1px solid #d1d5e8; background: #f0f1f8; height: 26px; padding: 0 2px; white-space: nowrap; overflow: hidden;
}
.tee-wh[data-v-5be5f7f7] { width: 40px; min-width: 40px; max-width: 40px; font-size: 11px; font-weight: 700; color: #1a1d35; text-align: center; background: #f5f6fa; border-right: 1px solid #e8eaf2; border-bottom: 1px solid #d1d5e8; height: 32px; white-space: nowrap; overflow: hidden;
}
.tee-wh.cur[data-v-5be5f7f7] { background: #dbeafe; color: #1d4ed8;
}
.tee-dh[data-v-5be5f7f7] { width: 40px; min-width: 40px; max-width: 40px; font-size: 9px; font-weight: 500; color: #9098b0; text-align: center; background: #f8f9fc; border-right: 1px solid #e8eaf2; border-bottom: 2px solid #c8cde0; height: 22px; overflow: hidden;
}
.tee-dh.cur[data-v-5be5f7f7] { background: #dbeafe; color: #1d4ed8;
}

/* Effort cells. `scroll-margin-left` mirrors the value on `.tee-fd`
   so the REPEAT DAYS "Apply" auto-scroll lands the target week just past
   the sticky identity-column band instead of tucking it underneath. */
.tee-wk[data-v-5be5f7f7] { width: 40px; min-width: 40px; max-width: 40px; border-right: 1px solid #eaecf4; border-bottom: 1px solid #f0f2f8; text-align: center; height: 40px; padding: 0; vertical-align: middle; scroll-margin-left: 260px;
}
.tee-wk.cur[data-v-5be5f7f7]  { background: #eff6ff;
}
.tee-wk.past[data-v-5be5f7f7] { background: #fafbfd;
}
.tee-eff-inp[data-v-5be5f7f7] { width: 100%; height: 100%; border: none; background: transparent; text-align: center; font-size: 12.5px; font-weight: 600; color: #1a1d35; font-family: inherit; cursor: pointer; outline: none; padding: 0 2px;
}
.tee-eff-inp[data-v-5be5f7f7]:focus { background: #fffbeb; box-shadow: inset 0 0 0 2px #f59e0b;
}
.tee-eff-inp[data-v-5be5f7f7]::-moz-placeholder { color: #d1d5e8; font-weight: 400; font-size: 12px;
}
.tee-eff-inp[data-v-5be5f7f7]::placeholder { color: #d1d5e8; font-weight: 400; font-size: 12px;
}

/* Heat-map — text colour only, no background */
.e1 .tee-eff-inp[data-v-5be5f7f7] { color: #3b82f6;
}
.e2 .tee-eff-inp[data-v-5be5f7f7] { color: #2563eb;
}
.e3 .tee-eff-inp[data-v-5be5f7f7] { color: #1d4ed8;
}
.e4 .tee-eff-inp[data-v-5be5f7f7] { color: #1e40af;
}
.e5 .tee-eff-inp[data-v-5be5f7f7] { color: #1e3a8a;
}
/* Over-cap week (6 or 7 days) — brand-red tinted background so reviewers
   see the heavy allocation at a glance. Value is still capped at 7 by the
   input handler; this styling is a visual heads-up for 6/7. */
.tee-wk.e-over[data-v-5be5f7f7]                        { background: #fee2e2 !important;
}
.tee-wk.e-over .tee-eff-inp[data-v-5be5f7f7]           { color: #b91c1c;
}
.tee-row:hover .tee-wk.e-over[data-v-5be5f7f7]         { background: #fecaca !important;
}

/* Totals row */
.tee-totals-row .tee-fd[data-v-5be5f7f7] { background: #f0f4fa !important; font-weight: 700; font-size: 12px; border-top: 2px solid #c8cde0;
}
.tee-totals-row .tee-wk[data-v-5be5f7f7] { background: #f0f4fa !important; font-size: 11.5px; font-weight: 700; color: #1a1d35; border-top: 2px solid #c8cde0;
}

/* Empty-state row used by both panels — preserves the height of ~3 normal rows
   (3 × 40px) so the grid layout doesn't collapse when there are no resources.
   Brand-red text signals a prerequisite is missing (no resources / no dates),
   matching .tee-target-rate-note and .tee-save-error weight. */
.tee-empty-row .tee-empty-cell[data-v-5be5f7f7] {
  background: #fafbfd;
  height: 126px;
  text-align: center;
  vertical-align: middle;
  color: #da2128;
  font-size: 12.5px;
  font-style: italic;
  border-bottom: 1px solid #f0f2f8;
}
.tee-totals-row .tee-wk.cur[data-v-5be5f7f7] { background: #dbeafe !important; color: #1d4ed8;
}
.tot-num[data-v-5be5f7f7] { font-size: 11.5px; font-weight: 700; color: #1a1d35;
}
.tee-save-error[data-v-5be5f7f7] { margin: 8px 0 0; font-size: 12px; color: #da2128; font-weight: 600;
}

/* Target Rate prerequisite note — shown below the Target Rate field in the
   Add Resource popup and beneath the Role List table. Brand-red matches the
   attention weight of the save-error style but is a persistent note, not
   an error state. */
.tee-target-rate-note[data-v-5be5f7f7] {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: #da2128;
  font-weight: 500;
}

/* ── Add Resource Modal ── */

/* Single vertical-scroll column */
.tee-modal-body[data-v-5be5f7f7] { display: flex; flex-direction: column; gap: 20px;
}

/* Country-Delivery cell — custom label row with the "Remote Delivery"
   checkbox flush right, followed by the BaseSelect. Keeps the field
   width consistent with the other grid cells; the checkbox annotates the
   label rather than living below the control. */
.tee-modal-country-delivery[data-v-5be5f7f7] { display: flex; flex-direction: column;
}
.tee-modal-cd-header[data-v-5be5f7f7] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

/* Preferred Resource popup field — same shape as Country-Delivery above:
   flex label row with the "TBD" checkbox flush right of the label; the
   picker (BaseSearchSelect when TBD is off, BaseInput when on) renders
   below in the normal grid column. Reuses the `.tee-modal-remote-check`
   visual so both toggles read as siblings. */
.tee-modal-name-field[data-v-5be5f7f7] { display: flex; flex-direction: column;
}
.tee-modal-name-header[data-v-5be5f7f7] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.tee-modal-tbd-check[data-v-5be5f7f7] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #4e5a82;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
}
.tee-modal-tbd-check input[type="checkbox"][data-v-5be5f7f7] {
  margin: 0;
  width: 14px;
  height: 14px;
  accent-color: #da2128;
  cursor: pointer;
}
.tee-modal-remote-check[data-v-5be5f7f7] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #4e5a82;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
}
.tee-modal-remote-check input[type="checkbox"][data-v-5be5f7f7] {
  margin: 0;
  width: 14px;
  height: 14px;
  accent-color: #da2128;
  cursor: pointer;
}
/* When OSQ = 'remote' the checkbox is force-checked and locked. The
   browser's default disabled styling washes the check mark to grey — we
   override that so the tick stays vividly brand-red (visible "yes, this
   is on") while the cursor + label text read as "locked, don't try to
   uncheck". Only the label text softens; the checkbox itself keeps full
   opacity so the tick doesn't disappear. */
.tee-modal-remote-check--disabled[data-v-5be5f7f7] {
  cursor: not-allowed;
  color: #6b7280;
}
.tee-modal-remote-check--disabled input[type="checkbox"][data-v-5be5f7f7] {
  cursor: not-allowed;
}
.tee-modal-remote-check input[type="checkbox"][data-v-5be5f7f7]:disabled {
  opacity: 1;
  accent-color: #da2128;
}

/* Country-Delivery dropdown disabled state — both popup and inline row.
   PrimeVue's default `.p-disabled` is a very subtle opacity change that's
   hard to distinguish from an enabled empty control on a white page (see
   the user screenshot). Force a light-grey wash + a slightly deeper text
   colour so "disabled" reads at a glance. `:deep` pierces BaseSelect's
   scoped boundary in both mount points. */
.tee-modal-country-delivery[data-v-5be5f7f7] .p-select.p-disabled,
.tee-fd--bs[data-v-5be5f7f7] .p-select.p-disabled {
  background: #f4f6fb;
  border-color: #d5d9e5;
  opacity: 1;               /* clear PrimeVue's own dim */
  cursor: not-allowed;
}
.tee-modal-country-delivery[data-v-5be5f7f7] .p-select.p-disabled .p-select-label,
.tee-fd--bs[data-v-5be5f7f7] .p-select.p-disabled .p-select-label {
  color: #9ca3af;
  cursor: not-allowed;
}
.tee-modal-country-delivery[data-v-5be5f7f7] .p-select.p-disabled .p-select-dropdown,
.tee-fd--bs[data-v-5be5f7f7] .p-select.p-disabled .p-select-dropdown {
  color: #9ca3af;
  cursor: not-allowed;
}

/* Resource details: 2-column grid */
.tee-modal-form[data-v-5be5f7f7] { display: grid; grid-template-columns: 1fr 1fr; -moz-column-gap: 20px; column-gap: 20px; row-gap: 0;
}
.tee-modal-form[data-v-5be5f7f7] .bp-form-group { margin-bottom: 10px;
}
.tee-modal-span2[data-v-5be5f7f7] { grid-column: 1 / -1;
}
/* Anchors a field to the RIGHT column (col 2) of the 2-column modal
   grid regardless of DOM order. Used by the conditional Other-language
   input so it appears directly below the Language dropdown instead of
   flowing into the next left-column slot. */
.tee-modal-col2[data-v-5be5f7f7] { grid-column: 2;
}

/* Custom prefix input for Target Rate / Proposed Rate in the popup — same
   pattern as the OBI-tab "Est. Project revenue (base)" field. Flex row of
   [symbol, native input] inside a bordered container that mimics `.bp-input`.
   The `--readonly` modifier gives the Target Rate row the muted background
   used elsewhere for read-only display fields. */
.tee-currency-field[data-v-5be5f7f7] {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #c0c1cb;
  border-radius: 8px;
  background: #fff;
  padding: 0 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
  min-height: 38px;
}
.tee-currency-field[data-v-5be5f7f7]:focus-within:not(.tee-currency-field--readonly) {
  border-color: #da2128;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
}
.tee-currency-field--readonly[data-v-5be5f7f7] {
  background: #f8f9fc;
}
.tee-currency-prefix[data-v-5be5f7f7] {
  color: #4e5a82;
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  pointer-events: none;
  flex-shrink: 0;
}
.tee-currency-native[data-v-5be5f7f7] {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 9px 0;
  font-family: inherit;
  font-size: 13.5px;
  color: #1a1d35;
  -moz-appearance: textfield;
}
.tee-currency-native[data-v-5be5f7f7]::-webkit-outer-spin-button,
.tee-currency-native[data-v-5be5f7f7]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.tee-currency-native[readonly][data-v-5be5f7f7] {
  cursor: default;
  color: #1a1d35;
}

/* Weekly effort: full-width at bottom */
.tee-modal-effort[data-v-5be5f7f7] { display: flex; flex-direction: column; gap: 8px; background: #f8f9fc; border: 1px solid #e4e7f0; border-radius: 10px; padding: 14px;
}
.tee-modal-effort-hdr[data-v-5be5f7f7] { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #0f4c75; display: flex; align-items: center; gap: 6px; padding-bottom: 10px; border-bottom: 2px solid #d1d5e8;
}
.effort-hdr-weeks[data-v-5be5f7f7] { margin-left: auto; font-size: 10px; font-weight: 600; color: #9098b0; text-transform: none; letter-spacing: 0;
}

/* Horizontal scroll for tiles only */
.tee-modal-effort-scroll[data-v-5be5f7f7] { overflow-x: auto; overflow-y: visible; display: flex; gap: 10px; padding-bottom: 6px; padding-top: 10px;
}
.tee-modal-effort-scroll[data-v-5be5f7f7]::-webkit-scrollbar { height: 6px;
}
.tee-modal-effort-scroll[data-v-5be5f7f7]::-webkit-scrollbar-track { background: #eaecf4; border-radius: 4px;
}
.tee-modal-effort-scroll[data-v-5be5f7f7]::-webkit-scrollbar-thumb { background: #c8cde0; border-radius: 4px;
}
/* Popup empty state shown when project dates are missing — visual match for
   .tee-empty-cell on the main Role List calendar. Brand-red text matches
   the outer panel's empty state so the same prerequisite signal reads
   consistently in the popup. */
.tee-modal-effort-empty[data-v-5be5f7f7] {
  padding: 32px 14px;
  background: #fafbfd;
  border: 1px dashed #dcdfea;
  border-radius: 8px;
  color: #da2128;
  font-size: 12.5px;
  font-style: italic;
  text-align: center;
}
.tee-modal-month[data-v-5be5f7f7] { flex-shrink: 0;
}
.tee-modal-month-hdr[data-v-5be5f7f7] { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #6b7db8; padding: 2px 0 5px; border-bottom: 2px solid #d1d5e8; margin-bottom: 5px; white-space: nowrap;
}
.tee-modal-tiles[data-v-5be5f7f7] { display: flex; gap: 3px;
}
.tee-week-tile[data-v-5be5f7f7] { width: 54px; display: flex; flex-direction: column; align-items: center; border: 1px solid #e4e7f0; border-radius: 6px; background: #fff; overflow: hidden;
}
.tee-week-tile.tile-cur[data-v-5be5f7f7] { border-color: #93c5fd; background: #eff6ff;
}
.tee-week-tile.tile-past[data-v-5be5f7f7] { background: #fafbfd; opacity: 0.75;
}
.tile-wlbl[data-v-5be5f7f7] { font-size: 11px; font-weight: 700; color: #4e5a82; padding: 5px 2px 2px; line-height: 1;
}
.tile-date[data-v-5be5f7f7] { font-size: 10px; color: #9098b0; padding-bottom: 4px; line-height: 1;
}
.tile-inp[data-v-5be5f7f7] { width: 100%; border: none; border-top: 1px solid #e8eaf2; background: transparent; text-align: center; font-size: 13px; font-weight: 700; color: #1a1d35; font-family: inherit; padding: 6px 2px; outline: none; cursor: pointer;
}
.tee-week-tile.tile-cur .tile-inp[data-v-5be5f7f7] { border-top-color: #93c5fd;
}
.tile-inp[data-v-5be5f7f7]:focus { background: #fffbeb;
}
.tile-inp[data-v-5be5f7f7]::-moz-placeholder { color: #d1d5e8; font-weight: 400; font-size: 11px;
}
.tile-inp[data-v-5be5f7f7]::placeholder { color: #d1d5e8; font-weight: 400; font-size: 11px;
}
/* Popup tile — brand-red tint when draft effort exceeds 5 days.
   Mirrors the .tee-wk.e-over styling on the inline row so the popup and
   the row show the "heavy allocation" signal identically. */
.tee-week-tile.tile-over[data-v-5be5f7f7]                 { background: #fee2e2;
}
.tee-week-tile.tile-over .tile-inp[data-v-5be5f7f7]       { color: #b91c1c;
}

/* Modal footer */
/* Total Days now sits directly beneath the Weekly Effort calendar (moved out
   of the footer). Right-aligned baseline row so the big number lines up
   under the last week tile — reads as "sum of the row above". */
.tee-modal-total-days[data-v-5be5f7f7] {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  padding: 4px 4px 0;
}

/* Weekly Effort Additional Comments — full-width textarea between Total Days
   and the action footer. Small top margin so it visually separates from the
   Total Days readout without adding a heavy divider. */
.tee-modal-effort-comments[data-v-5be5f7f7] { padding-top: 4px;
}
.tee-modal-footer[data-v-5be5f7f7] { display: flex; align-items: center; justify-content: flex-end; width: 100%; gap: 12px;
}
.footer-total-lbl[data-v-5be5f7f7] { font-size: 11px; font-weight: 600; color: #9098b0; text-transform: uppercase; letter-spacing: 0.5px;
}
.footer-total-val[data-v-5be5f7f7] { font-size: 20px; font-weight: 800; color: #1a1d35;
}
.tee-modal-footer-actions[data-v-5be5f7f7] { display: flex; gap: 8px;
}

/* "Save & Add Another Resource" — dark-navy variant applied on top of the
   shared BaseButton `outline` base. :deep pierces the scoped-attribute
   boundary because BaseButton lives in @dssplus/bizplus-fe-ui — the
   generated .bp-btn class doesn't carry this tab's scoped id.
   Matches the ROLE LIST banner tone (#1a1d35) so the third button reads
   as its own visual mode alongside outline Cancel and primary-red Add
   Resource. */
.tee-btn-save-add[data-v-5be5f7f7] .bp-btn,[data-v-5be5f7f7] .bp-btn.tee-btn-save-add {
  background: #1a1d35 !important;
  border-color: #1a1d35 !important;
  color: #ffffff !important;
}
.tee-btn-save-add[data-v-5be5f7f7] .bp-btn:hover:not(:disabled),[data-v-5be5f7f7] .bp-btn.tee-btn-save-add:hover:not(:disabled) {
  background: #2a2f52 !important;
  border-color: #2a2f52 !important;
}
.tee-btn-save-add[data-v-5be5f7f7] .bp-btn-spinner,[data-v-5be5f7f7] .bp-btn.tee-btn-save-add .bp-btn-spinner {
  border-top-color: #ffffff !important;
}

/* ── Preferred Skills trigger (scoped — reaches component root) ── */
.tee-skill-section[data-v-5be5f7f7] { position: relative; display: flex; flex-direction: column; gap: 6px;
}
.tee-skill-label[data-v-5be5f7f7]   { font-size: 12px; font-weight: 600; color: #374151; letter-spacing: 0.1px;
}
.tee-skill-tree[data-v-5be5f7f7]    { width: 100%;
}
[data-v-5be5f7f7] .tee-skill-tree.p-treeselect {
  display: flex; align-items: center; width: 100%; overflow: visible;
  border: 1.5px solid #d1d5e8; border-radius: 10px; background: #fff;
  min-height: 42px; cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s;
}
[data-v-5be5f7f7] .tee-skill-tree.p-treeselect:hover { border-color: #9098b0;
}
[data-v-5be5f7f7] .tee-skill-tree.p-treeselect.p-focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,0.10); outline: none;
}
[data-v-5be5f7f7] .tee-skill-tree .p-treeselect-label-container { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden;
}
[data-v-5be5f7f7] .tee-skill-tree .p-treeselect-label { width: 100%; padding: 0; display: flex; align-items: center;
}
[data-v-5be5f7f7] .tee-skill-tree .p-treeselect-dropdown {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; background: transparent; border: none;
  border-left: 1.5px solid #e4e7f0; color: #6b7db8; border-radius: 0 9px 9px 0;
}

/* Value slot content */
.tee-skill-ph[data-v-5be5f7f7] { font-size: 13px; color: #9098b0; padding: 0 12px; display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tee-skill-badge[data-v-5be5f7f7] {
  display: inline-flex; align-items: center; gap: 5px; margin: 0 10px;
  padding: 4px 10px 4px 7px; border-radius: 20px;
  background: #eef2ff; border: 1.5px solid #c7d2fe;
  font-size: 12.5px; font-weight: 700; color: #3730a3; white-space: nowrap;
}
.tee-skill-badge svg[data-v-5be5f7f7] { color: #4f46e5; flex-shrink: 0;
}

/* Table cell skill badge — compact, no margin */
.tee-fd--skill[data-v-5be5f7f7] { padding: 0 6px !important; vertical-align: middle;
}
/* Compact plain-count variant of the skill cell — no badge, centred number */
.tee-fd--skill-count[data-v-5be5f7f7] { text-align: center; font-weight: 700; color: #4e5a82;
}
.tee-fd--skill-count .tee-skill-none[data-v-5be5f7f7] { font-weight: 400; color: #9098b0;
}
.tee-skill-badge--cell[data-v-5be5f7f7] {
  margin: 0; padding: 3px 7px 3px 5px; font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; display: inline-flex;
}
.tee-skill-none[data-v-5be5f7f7] { font-size: 12px; color: #c2c8d8; padding: 0 4px;
}

/* ── Resource modal dark header ── */
.tee-resource-modal .p-dialog-header {
  background: #191a37 !important;
  padding: 14px 20px !important;
  border-radius: 10px 10px 0 0 !important;
}
.tee-resource-modal .p-dialog-title {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
}
.tee-resource-modal .p-dialog-header-close {
  color: rgba(255,255,255,0.65) !important;
  border-radius: 6px !important;
  transition: background 0.15s, color 0.15s !important;
}
.tee-resource-modal .p-dialog-header-close:hover {
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
}
.tee-resource-modal .p-dialog-header-close-icon {
  width: 14px !important;
  height: 14px !important;
}

/* ══════════════════════════════════════════════════════
   tee-skill-panel — non-scoped so it reaches the
   PrimeVue teleported overlay DOM unconditionally
   ══════════════════════════════════════════════════════ */

/* Panel container */
.tee-skill-panel {
  background: #fff !important;
  border: 1px solid #c8cde0 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 6px rgba(0,0,0,0.06), 0 16px 40px rgba(15,20,55,0.12) !important;
  overflow: hidden !important;
}

/* ── Search header ── */
.tee-skill-panel .p-treeselect-header {
  padding: 8px !important;
  background: #fff !important;
  border-bottom: 1px solid #e4e7f0 !important;
  margin: 0 !important;
}

/* Container — relative so the icon can be absolute inside */
.tee-skill-panel .p-treeselect-filter-container,
.tee-skill-panel .p-iconfield {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

/*
  Use element+class selector to guarantee this beats PrimeVue's
  class-only !important rules (e.g. .p-inputtext, .p-treeselect-filter).
  Targeting the raw <input> element directly is the highest reliable override.
*/
.tee-skill-panel .p-treeselect-header input[type="text"] {
  display: block !important;
  width: 100% !important;
  height: 42px !important;
  box-sizing: border-box !important;
  border: 1px solid #d1d5e8 !important;
  border-radius: 6px !important;
  padding: 0 40px 0 12px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  color: #1a1d35 !important;
  background: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
       appearance: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.tee-skill-panel .p-treeselect-header input[type="text"]:hover {
  border-color: #9098b0 !important;
}
.tee-skill-panel .p-treeselect-header input[type="text"]:focus {
  border-color: #4f46e5 !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,0.15) !important;
}
.tee-skill-panel .p-treeselect-header input[type="text"]::-moz-placeholder {
  color: #9098b0 !important;
  opacity: 1 !important;
}
.tee-skill-panel .p-treeselect-header input[type="text"]::placeholder {
  color: #9098b0 !important;
  opacity: 1 !important;
}

/* Icon — absolute right inside the container */
.tee-skill-panel .p-treeselect-filter-icon,
.tee-skill-panel .p-inputicon,
.tee-skill-panel .p-treeselect-header svg {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #9098b0 !important;
  pointer-events: none !important;
  width: 16px !important;
  height: 16px !important;
}

/* ── Tree scroll ── */
.tee-skill-panel .p-tree { background: #fff !important; padding: 8px !important;
}
.tee-skill-panel .p-tree-wrapper,
.tee-skill-panel .p-tree-container { max-height: 280px; overflow-y: auto;
}
.tee-skill-panel .p-tree-wrapper::-webkit-scrollbar,
.tee-skill-panel .p-tree-container::-webkit-scrollbar { width: 5px;
}
.tee-skill-panel .p-tree-wrapper::-webkit-scrollbar-thumb,
.tee-skill-panel .p-tree-container::-webkit-scrollbar-thumb { background: #d1d5e8; border-radius: 10px;
}

/* ── Group spacing ── */
.tee-skill-panel .p-tree-root > .p-tree-node { margin-bottom: 2px;
}

/* ── All rows ── */
.tee-skill-panel .p-tree-node-content {
  display: flex !important; align-items: center !important; gap: 7px !important;
  padding: 8px 10px !important; border-radius: 8px !important; cursor: pointer;
  transition: background 0.12s;
}
.tee-skill-panel .p-tree-node-content:hover      { background: #f0f1f9 !important;
}
.tee-skill-panel .p-tree-node-content.p-highlight { background: #eef2ff !important;
}

/* ── Parent group headers ── */
.tee-skill-panel .p-tree-node:not(.p-tree-node-leaf) > .p-tree-node-content { padding: 7px 10px !important;
}
.tee-skill-panel .p-tree-node:not(.p-tree-node-leaf) > .p-tree-node-content .p-tree-node-label {
  font-size: 11px !important; font-weight: 800 !important; color: #4e5a82 !important;
  text-transform: uppercase !important; letter-spacing: 0.6px !important;
}

/* ── Child leaf nodes ── */
.tee-skill-panel .p-tree-node-leaf > .p-tree-node-content { padding-left: 18px !important;
}
.tee-skill-panel .p-tree-node-leaf > .p-tree-node-content .p-tree-node-label {
  font-size: 13px !important; font-weight: 500 !important; color: #2d3452 !important;
}
.tee-skill-panel .p-tree-node-leaf > .p-tree-node-content.p-highlight .p-tree-node-label {
  color: #3730a3 !important; font-weight: 600 !important;
}

/* ── Toggle button ── */
.tee-skill-panel .p-tree-node-toggle-button {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 22px !important; height: 22px !important; flex-shrink: 0 !important;
  background: transparent !important; border: none !important; border-radius: 5px !important;
  color: #6b7db8 !important; cursor: pointer; transition: background 0.12s, color 0.12s;
}
.tee-skill-panel .p-tree-node-toggle-button:hover { background: #dde1f0 !important; color: #191a37 !important;
}
.tee-skill-panel .p-tree-node-toggle-icon { width: 11px !important; height: 11px !important;
}

/* ── Checkboxes ── */
.tee-skill-panel .p-checkbox { flex-shrink: 0;
}
.tee-skill-panel .p-checkbox .p-checkbox-box {
  width: 17px !important; height: 17px !important; border-radius: 5px !important;
  border: 2px solid #c8cde0 !important; background: #fff !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: border-color 0.15s, background 0.15s;
}
.tee-skill-panel .p-checkbox[data-p-checked="true"] .p-checkbox-box,
.tee-skill-panel .p-checkbox.p-highlight .p-checkbox-box { border-color: #4f46e5 !important; background: #4f46e5 !important;
}
.tee-skill-panel .p-checkbox[data-p-indeterminate="true"] .p-checkbox-box,
.tee-skill-panel .p-checkbox.p-indeterminate .p-checkbox-box { border-color: #6b7db8 !important; background: #6b7db8 !important;
}
.tee-skill-panel .p-checkbox[data-p-checked="true"] .p-checkbox-icon,
.tee-skill-panel .p-checkbox[data-p-indeterminate="true"] .p-checkbox-icon,
.tee-skill-panel .p-checkbox.p-highlight .p-checkbox-icon { color: #fff !important;
}

/* ── Preferred Skills cell — clickable in readonly mode ─────────────
   DealsheetEditView's shared readonly gating applies pointer-events:
   none to every [role="button"] under .tab-fieldset[disabled] so custom
   click targets don't fire while the tab is view-only. TEE's Preferred
   Skills cell is an intentional exception: the user must be able to
   OPEN the picker to VIEW their selection. State-mutating interactions
   inside the picker are separately blocked by the tee-skill-picker-
   readonly rules further down. Overriding the shared rule with matching
   specificity + !important because the shared rule uses :deep() which
   compiles to a hash-scoped selector we can't easily beat with plain
   cascade specificity. */
.tab-fieldset[disabled] .tee-fd--skills[role="button"] {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* ── Readonly view of BaseSkillsPicker ──────────────────────────────
   Applied when TeeTab opens the picker while props.readonly is true —
   openSkillsPopup adds the body-level marker class here + a
   MutationObserver clears it when the overlay leaves the DOM. Blocks
   every interaction that would mutate the picker's working set (group
   checkboxes, group labels, skill rows, remove-chip buttons) so the
   modal reads as view-only. Navigation stays live: search, domain /
   category expand-collapse carets, close (X), Cancel. Apply and
   Clear-all are hidden entirely since there's nothing to commit. */
body.tee-skill-picker-readonly .bp-skills-picker-checkbox,
body.tee-skill-picker-readonly .bp-skills-picker-group-label,
body.tee-skill-picker-readonly .bp-skills-picker-row--skill,
body.tee-skill-picker-readonly .bp-skills-picker-selected-remove,
body.tee-skill-picker-readonly .bp-skills-picker-tag-remove,
body.tee-skill-picker-readonly .bp-skills-picker-clear {
  pointer-events: none !important;
}
body.tee-skill-picker-readonly .bp-skills-picker-checkbox {
  opacity: 0.75;   /* soften so it reads as non-interactive */
}
body.tee-skill-picker-readonly .bp-skills-picker-footer-clear,
body.tee-skill-picker-readonly .bp-skills-picker-footer-apply {
  display: none !important;
}

.dss-tab[data-v-b1c1fd8f] {
  padding: 4px 2px;
}

/* Column titles at the top of the tab, aligned to the row grid below.
   First cell is an empty spacer so the header labels sit exactly above the
   input and phase-total columns in every section. */
.dss-col-headers[data-v-b1c1fd8f] {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 260px 160px 160px;
  gap: 0;
  padding: 6px 16px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #1a1d35;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.dss-col-headers > div[data-v-b1c1fd8f]:nth-child(2) { text-align: left;  padding-left: 12px;
}
.dss-col-headers > div[data-v-b1c1fd8f]:nth-child(3) { text-align: right; padding-right: 12px;
}
.dss-col-headers > div[data-v-b1c1fd8f]:nth-child(4) { text-align: right; padding-right: 12px;
}

/* Section body reset — we drive layout via the .dss-row grid rather than
   the default `.ds-grid` used by ObiTab. */
.dss-section-body[data-v-b1c1fd8f] {
  padding: 0;
}

/* Row — 3-column grid (label / input / phase total). Same template as
   .dss-col-headers so the header row lines up perfectly. */
.dss-row[data-v-b1c1fd8f] {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 260px 160px 160px;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid #f1f2f5;
  min-height: 48px;
}
.dss-row[data-v-b1c1fd8f]:last-child { border-bottom: none;
}
.dss-cell-label[data-v-b1c1fd8f] {
  font-size: 13px;
  color: #1a1d35;
  font-weight: 600;
  margin: 0;
}
/* Inline label variant — label text + info icon on one line. Used for
   rows that need only a tooltip (no mandatory note stack). */
.dss-cell-label--inline[data-v-b1c1fd8f] {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dss-cell-label--inline[data-v-b1c1fd8f] .tee-info-wrap {
  margin-left: 0;
}
/* Stacked label variant — first line holds the label + info icon, second
   line holds the red mandatory-note. Used on the SPS Survey Module row so
   the note reads directly beneath the label rather than in its own box. */
.dss-cell-label--stacked[data-v-b1c1fd8f] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0;
}
.dss-cell-label-line[data-v-b1c1fd8f] {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* InfoTooltip ships with `margin-left: auto` because its primary use is in
   the TEE KPI card where the icon should hug the right edge. Cancel that
   here so the icon reads as part of the label. */
.dss-cell-label-line[data-v-b1c1fd8f] .tee-info-wrap {
  margin-left: 0;
}
.dss-cell-label-note[data-v-b1c1fd8f] {
  font-size: 11.5px;
  font-weight: 500;
  color: #b91c1c;
  line-height: 1.35;
}
.dss-cell-input[data-v-b1c1fd8f] {
  padding: 0 12px;
}
/* Trim the extra vertical padding the shared BaseInput / BaseSelect wrappers
   add so rows keep a consistent 48px height. */
.dss-cell-input[data-v-b1c1fd8f] .bp-form-group {
  margin: 0;
}
.dss-cell-input[data-v-b1c1fd8f] .bp-label {
  display: none;
}
/* Explanatory note under a disabled cell input (Section 1 Region / Market
   is the only user of this today — the value is driven by the OBI-picked
   legal entity via the server-side cascade). Brand-red text so the user's
   eye lands on the "where do I change this?" answer — matches the same
   `#b91c1c` used by `.dss-cell-label-note` elsewhere in the tab. */
.dss-cell-note[data-v-b1c1fd8f] {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 500;
  color: #b91c1c;
  line-height: 1.35;
}

/* PHASE TOTAL columns — DOM order is [USD, FX] but the visual order is
   swapped so the FX (OBI-currency) column sits BEFORE the USD column.
   CSS `order` on grid children reorders them within the row's grid
   template without touching the template markup. `nth-child` selectors
   elsewhere in this stylesheet still target by DOM position, so their
   text-align / padding rules keep working. */
.dss-cell-total[data-v-b1c1fd8f] {
  order: 4;
  text-align: right;
  padding-right: 12px;
  font-size: 13px;
  color: #1a1d35;
  font-weight: 600;
}
.dss-cell-total.dim[data-v-b1c1fd8f] {
  color: #9ca3af;
  font-weight: 400;
}
.dss-cell-total-fx[data-v-b1c1fd8f] {
  order: 3;
  text-align: right;
  padding-right: 12px;
  font-size: 13px;
  color: #1a1d35;
  font-weight: 600;
}
.dss-cell-total-fx.dim[data-v-b1c1fd8f] {
  color: #9ca3af;
  font-weight: 400;
}
/* Header labels — swap the DOM-position 3 (colPhaseTotal, USD) and 4
   (colPhaseTotalFx, FX) so they sit above their new visual columns. */
.dss-col-headers > div[data-v-b1c1fd8f]:nth-child(3) { order: 4;
}
.dss-col-headers > div[data-v-b1c1fd8f]:nth-child(4) { order: 3;
}
.dss-readonly[data-v-b1c1fd8f] {
  padding: 8px 12px;
  font-size: 13px;
  color: #1a3ea6;
  background: #f4f6fb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  min-height: 34px;
  display: flex;
  align-items: center;
}

/* Yes / No pill radios — visual match with OSQ Win Prob / Opportunity Score
   radios so the pattern reads the same across tabs. Hidden native radio +
   styled label; green when Yes, red when No. */
.dss-yn-radios[data-v-b1c1fd8f] {
  display: inline-flex;
  gap: 0.375rem;
}
.dss-yn-radio[data-v-b1c1fd8f] {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 1rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #6b7280;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.dss-yn-radio[data-v-b1c1fd8f]:hover { border-color: #9ca3af; color: #374151;
}
.dss-yn-radio--yes[data-v-b1c1fd8f] {
  border-color: #16a34a;
  background: #f0fdf4;
  color: #15803d;
}
.dss-yn-radio--no[data-v-b1c1fd8f] {
  border-color: #dc2626;
  background: #fff1f2;
  color: #b91c1c;
}
.dss-yn-radio-input[data-v-b1c1fd8f] { display: none;
}
/* Locked variant — used when a Y/N row is gated off (e.g. Q3 when Q2 = No).
   Muted colours + not-allowed cursor make it clear the control is inert. */
.dss-yn-radio--locked[data-v-b1c1fd8f],
.dss-yn-radio--locked[data-v-b1c1fd8f]:hover {
  border-color: #e5e7eb;
  background: #f9fafb;
  color: #9ca3af;
  cursor: not-allowed;
}

/* Section-level disabled state — used when a section's gating Q hasn't been
   answered Yes. Body fades and inputs receive pointer-events:none so the
   section is clearly inert but its header (red or blue) stays legible. */
.dss-section--disabled .ds-section-body[data-v-b1c1fd8f] {
  opacity: 0.55;
  pointer-events: none;
  filter: grayscale(0.2);
}
/* Small hint next to the section title indicating the gating question. */
.dss-section-gate[data-v-b1c1fd8f] {
  font-size: 11px;
  font-weight: 500;
  font-style: italic;
  opacity: 0.9;
  margin-left: 6px;
}

/* Plain numeric text input used for the Assessment duration field. Matches
   the padding / border of other inputs in the tab. */
.dss-plain-input[data-v-b1c1fd8f] {
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-family: inherit;
  color: #1a1d35;
  background: #fff;
  outline: none;
}
.dss-plain-input[data-v-b1c1fd8f]:focus {
  border-color: #1a3ea6;
  box-shadow: 0 0 0 3px rgba(26, 62, 166, 0.10);
}
.dss-plain-input[data-v-b1c1fd8f]:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

/* Custom "Y.M" duration stepper — text input + explicit ▲/▼ buttons.
   Used by Section-4 (implementDuration) and Section-5 (sustainDuration)
   where the fractional part represents MONTHS (0-11 with rollover at
   12). We can't use the native `<input type="number">` spinner because
   JS Numbers collapse `1.10` to `1.1`, so the ".10, .11" states would
   be indistinguishable via keyboard step. The custom stepper works
   against fractional-year storage (see decode/encode helpers in
   <script>) and updates through the form's flat value cleanly. */
.dss-ym-stepper[data-v-b1c1fd8f] {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dss-ym-stepper[data-v-b1c1fd8f]:focus-within {
  border-color: #1a3ea6;
  box-shadow: 0 0 0 3px rgba(26, 62, 166, 0.10);
}
.dss-ym-stepper--disabled[data-v-b1c1fd8f] {
  background: #f3f4f6;
}
.dss-ym-stepper .dss-ym-input[data-v-b1c1fd8f] {
  flex: 1;
  min-height: 32px;
  border: none;
  border-radius: 0;
  padding: 6px 10px;
  outline: none;
  background: transparent;
}
.dss-ym-stepper .dss-ym-input[data-v-b1c1fd8f]:focus {
  box-shadow: none;   /* focus ring lives on the wrapper */
}
.dss-ym-buttons[data-v-b1c1fd8f] {
  display: flex;
  flex-direction: column;
  border-left: 1px solid #e5e7eb;
  width: 22px;
  flex-shrink: 0;
}
.dss-ym-btn[data-v-b1c1fd8f] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: #f9fafb;
  color: #4e5a82;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.dss-ym-btn[data-v-b1c1fd8f]:first-child { border-bottom: 1px solid #e5e7eb;
}
.dss-ym-btn[data-v-b1c1fd8f]:hover:not(:disabled) {
  background: #eef2ff;
  color: #1a3ea6;
}
.dss-ym-btn[data-v-b1c1fd8f]:active:not(:disabled) {
  background: #e0e7ff;
}
.dss-ym-btn[data-v-b1c1fd8f]:disabled {
  cursor: not-allowed;
  color: #c4c9de;
  background: #f3f4f6;
}

/* Currency field — flex row with a $ prefix + a native numeric input inside
   a single bordered container. Mirrors the ObiTab pattern; defined locally
   because scoped styles don't leak across component boundaries. */
.ds-currency-field[data-v-b1c1fd8f] {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #c0c1cb;
  border-radius: 8px;
  background: #fff;
  padding: 0 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-height: 38px;
}
.ds-currency-field[data-v-b1c1fd8f]:focus-within {
  border-color: #da2128;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
}
.ds-currency-prefix[data-v-b1c1fd8f] {
  color: #4e5a82;
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  pointer-events: none;
  flex-shrink: 0;
}
.ds-currency-native[data-v-b1c1fd8f] {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 9px 0;
  font-family: inherit;
  font-size: 13.5px;
  color: #1a1d35;
  text-align: right;
}

/* Readonly variant — non-editable calculated value. Background greys out
   slightly so it reads as inert. */
.dss-currency-readonly[data-v-b1c1fd8f] {
  background: #f4f6fb;
}
.dss-currency-readonly .ds-currency-native[data-v-b1c1fd8f] {
  cursor: default;
}

/* Subtotal row — bold label + bold phase-total value, tinted background so
   the summing row stands apart from the individual line rows above it. */
.dss-row--subtotal[data-v-b1c1fd8f] {
  background: #fbfafc;
  font-weight: 700;
}
.dss-row--subtotal .dss-cell-label[data-v-b1c1fd8f],
.dss-row--subtotal .dss-cell-total[data-v-b1c1fd8f] {
  font-weight: 700;
}
.dss-row--subtotal .dss-cell-input[data-v-b1c1fd8f] {
  color: #9ca3af;
  text-align: center;
}

/* ── Section 7 (Deal Summary) — bold all col 3 values inside this section
   to match the finance-summary read style. */
.dss-section--summary .dss-row .dss-cell-total[data-v-b1c1fd8f] {
  font-weight: 700;
}

/* Highlighted list-price + final-price rows. */
.dss-row--list-price[data-v-b1c1fd8f] {
  background: #f4f6fb;
}
.dss-row--list-price .dss-cell-total[data-v-b1c1fd8f] { font-size: 14px;
}
.dss-row--final-price[data-v-b1c1fd8f] {
  background: #eef4ee;
  border-top: 2px solid #3d5c48;
  border-bottom: 2px solid #3d5c48;
}
.dss-row--final-price .dss-cell-label[data-v-b1c1fd8f],
.dss-row--final-price .dss-cell-total[data-v-b1c1fd8f] {
  color: #14532d;
  font-size: 15px;
  font-weight: 800;
}

/* Percentage input — flex wrap with a % suffix icon that sits inside the
   bordered container next to the input. */
.dss-pct-field[data-v-b1c1fd8f] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  padding: 0 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-height: 34px;
  width: 100%;
}
.dss-pct-field[data-v-b1c1fd8f]:focus-within {
  border-color: #1a3ea6;
  box-shadow: 0 0 0 3px rgba(26, 62, 166, 0.10);
}
.dss-pct-input[data-v-b1c1fd8f] {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 6px 0;
  font-family: inherit;
  font-size: 13px;
  color: #1a1d35;
  text-align: right;
}
.dss-pct-input[data-v-b1c1fd8f]:disabled { color: #9ca3af; cursor: not-allowed;
}
.dss-pct-suffix[data-v-b1c1fd8f] {
  color: #6b7280;
  font-weight: 600;
  font-size: 13px;
  pointer-events: none;
}

/* Approval status chip. */
.dss-approval[data-v-b1c1fd8f] {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.dss-approval--ok[data-v-b1c1fd8f]   { background: #dcfce7; color: #14532d;
}
.dss-approval--warn[data-v-b1c1fd8f] { background: #fef3c7; color: #92400e;
}

/* Whole row de-emphasised when its question is disabled. Combined with the
   red hint below, the state is unmistakable. */
.dss-row--disabled .dss-cell-label[data-v-b1c1fd8f] {
  color: #9ca3af;
}

/* Red hint row shown directly under a gated Y/N question. Uses the same
   4-column grid template as .dss-row (via the wrapper's grid) so the hint
   text sits in the input column, aligned with the radios above. */
.dss-row-hint[data-v-b1c1fd8f] {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 260px 160px 160px;
  padding: 0 16px 8px;
}
.dss-row-hint__body[data-v-b1c1fd8f] {
  grid-column: 2 / span 2;
  font-size: 12px;
  color: #b91c1c;
  padding: 0 12px;
  font-weight: 500;
}
@media (max-width: 900px) {
.dss-row-hint[data-v-b1c1fd8f] {
    grid-template-columns: 1fr;
    padding: 4px 16px 8px;
}
.dss-row-hint__body[data-v-b1c1fd8f] {
    grid-column: auto;
    padding: 0;
}
}
.ds-save-error[data-v-b1c1fd8f] {
  color: #b91c1c;
  font-size: 13px;
  padding: 8px 16px;
}

/* Responsive: on narrow screens collapse to a single column so labels sit
   above inputs and the phase-total cell drops below. */
@media (max-width: 900px) {
.dss-col-headers[data-v-b1c1fd8f] { display: none;
}
.dss-row[data-v-b1c1fd8f] {
    grid-template-columns: 1fr;
    row-gap: 6px;
    align-items: start;
    padding: 12px 16px;
}
.dss-cell-input[data-v-b1c1fd8f], .dss-cell-total[data-v-b1c1fd8f] {
    text-align: left;
    padding: 0;
}
}

.tpv-tab[data-v-30897957] {
  padding: 4px 2px;
}

/* Vendor section: dark blue header with remove button on the right, body
   holds the two-column form. Uses the shared .ds-section-* classes so the
   visual matches every other tab. */
.tpv-vendor[data-v-30897957] {
  margin-bottom: 16px;
}
.tpv-vendor-header[data-v-30897957] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tpv-vendor-title[data-v-30897957] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tpv-remove-btn[data-v-30897957] {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  transition: background 120ms ease;
}
.tpv-remove-btn[data-v-30897957]:hover:not(:disabled) { background: rgba(255, 255, 255, 0.15);
}
.tpv-remove-btn[data-v-30897957]:disabled              { opacity: 0.4; cursor: not-allowed;
}
.tpv-section-body[data-v-30897957] {
  padding: 20px 18px;
}
.tpv-two-col[data-v-30897957] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}
@media (max-width: 640px) {
.tpv-two-col[data-v-30897957] { grid-template-columns: 1fr;
}
}

/* Vendor summary strip — three read-only fields laid out below the
   Vendor Name / Budget row and above the rate-card grid. Collapses to
   a single column on narrow viewports, matching the two-col above. */
.tpv-three-col[data-v-30897957] {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px 24px;
  margin-top: 16px;
}
@media (max-width: 640px) {
.tpv-three-col[data-v-30897957] { grid-template-columns: 1fr;
}
}

/* Status pill (Empty / OK / GAP). Colours are applied to the shared
   BaseInput's underlying <input> via :deep so we don't have to fork the
   component.
   Empty → muted grey fill + centred "—" glyph; matches the platform's
           default read-only field look so a blank vendor doesn't shout
           an unearned "OK".
   OK    → green fill (green-600), white text — mirrors the GAP pill's
           intensity so the two verdicts read as symmetric affirmatives.
   GAP   → red alert fill (same #da2128 tone as the grid's Gap column),
           white text. */
.tpv-status--empty[data-v-30897957] input {
  background: #f1f2f5 !important;
  color: #9098b0 !important;
  font-weight: 600;
  /* Left-aligned to match the sibling read-only fields on the same row
     ("% of budget consumed", "Total costs"). Their "—" glyph sits on
     the left; the Status "—" now does too. */
}
.tpv-status--ok[data-v-30897957] input {
  background: #16a34a !important;
  color: #ffffff !important;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.tpv-status--gap[data-v-30897957] input {
  background: #da2128 !important;
  color: #ffffff !important;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Note under the GAP status — small red hint that tells the user which
   TEE-tab row to reconcile against. Hidden by v-if when there's no gap. */
.tpv-status-note[data-v-30897957] {
  margin-top: 6px;
  font-size: 12px;
  color: #b91c1c;
  line-height: 1.4;
}
.tpv-field[data-v-30897957] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tpv-label[data-v-30897957] {
  font-size: 12px;
  font-weight: 600;
  color: #1a1d35;
}

/* Budget number input — strip the browser's native up/down spin arrows
   per the "no incrementer" spec. */
.tpv-num-input[data-v-30897957] {
  -moz-appearance: textfield;
}
.tpv-num-input[data-v-30897957]::-webkit-outer-spin-button,
.tpv-num-input[data-v-30897957]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Add Vendor button row */
.tpv-add-row[data-v-30897957] {
  display: flex;
  justify-content: flex-start;
  padding: 8px 0 4px;
}
.tpv-add-btn[data-v-30897957] {
  background: #191a37;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease;
}
.tpv-add-btn[data-v-30897957]:hover:not(:disabled) { background: #262957;
}
.tpv-add-btn[data-v-30897957]:disabled             { opacity: 0.5; cursor: not-allowed;
}

/* ═══════════════ Freeze-pane rate card ═══════════════ */

/* Wrapper for the top-scrollbar + main scroll container. Owns the
   OUTER border so both scrollbars visually sit inside a single framed
   block with a clean top border above the top scrollbar and matching
   bottom border below the bottom one. MUST NOT set overflow (any value
   other than visible would trap position:sticky descendants and break
   the frozen-column left-pin inside .tpv-grid-scroll). */
.tpv-grid-block[data-v-30897957] {
  margin-top: 20px;
  border: 1px solid #c5c6c9;
  border-radius: 4px;
  background: #fff;
}

/* Duplicate scrollbar sitting above the header. Its inner div is width-
   matched to the table's scrollWidth via JS (ResizeObserver) so the two
   scrollbars stay in sync. When the vendor's table becomes sticky, this
   element receives the SAME transform as the <thead>, keeping the pair
   stacked as: topscroll | thead | tbody. Solid background covers tbody
   rows behind it when stuck; will-change promotes it to its own
   compositor layer for cheap transform updates. Own borders removed
   now — the wrapper owns the outer frame; a single border-bottom
   remains here to visually divide the topscroll strip from the table
   content. */
.tpv-grid-topscroll[data-v-30897957] {
  overflow-x: auto;
  overflow-y: hidden;
  height: 14px;                                /* ~native scrollbar thickness */
  background: #fff;
  border-bottom: 1px solid #c5c6c9;
  border-top-left-radius:  4px;
  border-top-right-radius: 4px;
  will-change: transform;
  position: relative;
  z-index: 5;                                  /* sits at the same layer as .tpv-grid thead */
}
.tpv-grid-topscroll-inner[data-v-30897957] {
  height: 1px;                                 /* just enough to trigger the scrollbar */
}

/* Main scroll container. No own borders — the wrapper draws the outer
   frame. Rounded bottom corners so the wrapper's border-radius carves
   through cleanly. */
.tpv-grid-scroll[data-v-30897957] {
  overflow-x: auto;
  overflow-y: hidden;
  background: #fff;
  border-bottom-left-radius:  4px;
  border-bottom-right-radius: 4px;
}
.tpv-grid[data-v-30897957] {
  border-collapse: separate;
  border-spacing: 0;
  width: -moz-max-content;
  width: max-content;         /* let columns claim their natural width */
  min-width: 100%;            /* stretch to container if narrower */
  font-size: 13px;
  color: #1a1d35;
}

/* Sticky-positioning the <thead> element gives it a positioned stacking
   context that accepts an explicit z-index (transforms alone create a
   stacking context with z-index:auto, which loses to tbody's sticky
   role-col cells at z-index 2 — so their dropdowns leak through the
   header). Sticky here is functionally a no-op because .tpv-grid-scroll
   isn't a vertical scroll container in practice; the JS-driven transform
   remains the actual pin driver. */
.tpv-grid thead[data-v-30897957] {
  position: sticky;
  top: 0;
  z-index: 5;
  /* Promote to compositor layer so the JS-driven translate3d updates on
     scroll are cheap and independent of tbody repaints — reduces the
     one-frame shake you'd otherwise see while scrolling. */
  will-change: transform;
}

/* Column headers: centered on both axes so a tall (wrapped) header cell
   still shows its label vertically middle-aligned, bold weight 700.
   Border color #c5c6c9 (darker than tbody's #eef0f5) so the header's
   perimeter reads distinctly from the data rows below. */
.tpv-grid thead th[data-v-30897957] {
  background: #f4f6fb;
  color: #1a1d35;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
  padding: 10px;
  border-bottom: 1px solid #c5c6c9;
  border-right: 1px solid #c5c6c9;
}
.tpv-grid tbody th[data-v-30897957],
.tpv-grid tbody td[data-v-30897957] {
  padding: 8px 10px;
  border-bottom: 1px solid #eef0f5;
  border-right: 1px solid #eef0f5;
  white-space: nowrap;
}
.tpv-grid tbody td[data-v-30897957] {
  color: #6b7086;             /* placeholder cells read as inactive */
  text-align: center;
}

/* Cells that host a BaseSelect (Local Currency, etc.) — give the select a
   sensible min-width so it doesn't collapse and let its native styling
   take over the cell's text-align. */
.tpv-grid-cell-select[data-v-30897957] {
  padding: 4px 6px !important;
  min-width: 140px;
  color: #1a1d35;
}
.tpv-grid-cell-select[data-v-30897957] .bp-select {
  min-height: 30px;
}

/* Cells that host a numeric input — tight padding so the input hugs the
   cell, and a modest min-width so all number cells align visually. */
.tpv-grid-cell-num[data-v-30897957] {
  padding: 4px 6px !important;
  min-width: 120px;
  color: #1a1d35;
}
.tpv-grid-cell-num .tpv-num-input[data-v-30897957] {
  width: 100%;
  padding: 5px 8px;
  font-size: 13px;
  text-align: right;
}

/* #days cell — narrower than the LC rate cells, and deliberately does
   NOT hide the native spin buttons (unlike .tpv-num-input which strips
   them) so the user gets ↑↓ arrows for quick +/− stepping. */
.tpv-grid-cell-days[data-v-30897957] {
  padding: 4px 6px !important;
  min-width: 100px;
  color: #1a1d35;
}
.tpv-grid-cell-days .tpv-days-input[data-v-30897957] {
  width: 100%;
  padding: 5px 8px;
  font-size: 13px;
  text-align: right;
}

/* Cells that show static, read-only text (Currency Bill mirror, hard-coded
   USD label). Explicit dark colour so they don't render dim like the
   placeholder `—` cells. */
.tpv-grid-cell-static[data-v-30897957] {
  color: #1a1d35;
  font-weight: 600;
  min-width: 88px;
}

/* Gap column (col 14) — matched rows render a plain dash on the standard
   cell background, mismatched rows fill the whole cell with our red alert
   tone so a scanning eye lands on them immediately. Padding is inherited
   from `.tpv-grid td` so the coloured fill spans edge-to-edge.
   Scoped under `.tpv-grid tbody td` so specificity beats the generic
   `.tpv-grid tbody td` rule that would otherwise reset text colour. */
.tpv-grid tbody td.tpv-grid-cell-match[data-v-30897957] {
  text-align: center;
  color: #6b7280;
}
.tpv-grid tbody td.tpv-grid-cell-gap[data-v-30897957] {
  background: #da2128;
  color: #ffffff;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* (No wrap rule any more — the wide "LE Currency/hour Cost rate LC"
   header was replaced by the two-row header split; each half now lives
   in its own <th>, so a stacked layout comes for free.) */
.tpv-grid tbody tr:last-child th[data-v-30897957],
.tpv-grid tbody tr:last-child td[data-v-30897957] {
  border-bottom: none;
}

/* Freeze the first column — position:sticky keeps it pinned to the left
   edge of the scroll container while everything else scrolls. Requires an
   explicit background so scrolled cells don't bleed through. z-index keeps
   the header <th> above body <th>. */
.tpv-grid-role-col[data-v-30897957] {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #f4f6fb;
  min-width: 180px;
  box-shadow: 2px 0 0 0 #e2e5ee;
  color: #1a1d35;
}
/* Body rows: role names stay left-aligned (readability); header row
   inherits the centered thead th rule above. */
.tpv-grid tbody th.tpv-grid-role-col[data-v-30897957] {
  text-align: left;
  font-weight: 600;
}
/* Header cell of the first column must sit above the body's first-column
   cells during horizontal scroll, so bump its z-index one higher. */
.tpv-grid thead .tpv-grid-role-col[data-v-30897957] {
  z-index: 3;
}

.wr-wrap[data-v-c69fc9f2] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.wr-section-body[data-v-c69fc9f2] {
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.wr-two-col[data-v-c69fc9f2] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}
@media (max-width: 640px) {
.wr-two-col[data-v-c69fc9f2] { grid-template-columns: 1fr;
}
}
.wr-field[data-v-c69fc9f2] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wr-label[data-v-c69fc9f2] {
  font-size: 12px;
  font-weight: 600;
  color: #1a1d35;
}

/* Box 1 helper. */
.wr-helper[data-v-c69fc9f2] {
  font-size: 12.5px;
  color: #4e5a82;
  padding: 8px 10px;
  border-radius: 6px;
  background: #f4f6fb;
}
.wr-helper--warn[data-v-c69fc9f2] {
  color: #b91c1c;
  background: #fee2e2;
}
/* Success/OK tone — teal-forward blue-green palette. Used when the
   Workstream Budget has been derived from VRB-I. Distinct from the
   dealsheet's amber-info and red-warn palettes so it's unambiguously
   "this number is good to trust". */
.wr-helper--ok[data-v-c69fc9f2] {
  color: #115e59;
  background: #ccfbf1;
}

/* Box 1 table. */
.wr-table-scroll[data-v-c69fc9f2] {
  overflow-x: auto;
  border: 1px solid #e2e5ee;
  border-radius: 6px;
  background: #ffffff;
}
.wr-table[data-v-c69fc9f2] {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.wr-table thead th[data-v-c69fc9f2] {
  background: #f4f6fb;
  color: #1a1d35;
  font-weight: 700;
  text-align: center;
  padding: 8px 10px;
  border-bottom: 1px solid #e2e5ee;
  white-space: nowrap;
}
.wr-table tbody td[data-v-c69fc9f2] {
  padding: 8px 10px;
  border-bottom: 1px solid #eef0f5;
  color: #1a1d35;
  white-space: nowrap;
}
.wr-table tbody tr:last-child td[data-v-c69fc9f2] {
  border-bottom: none;
}
.wr-table tbody tr:nth-child(even) td[data-v-c69fc9f2] {
  background: #f7f8fc;
}
.wr-cell-num[data-v-c69fc9f2] {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Left-align opt-in for a specific header cell only — used by the
   Workstream column whose row values render left-aligned by default. */
.wr-th-left[data-v-c69fc9f2] {
  text-align: left !important;
}

/* Box 2 — Resource Planning grid.
   Single-table layout with two sticky columns (Resource Name + Total
   Days) — mirrors the Excel-style freeze-pane pattern used on the TPV
   rate-card grid. The scroll container's `overflow-x: auto` handles
   horizontal overflow when the week strip is wider than available
   space; the table itself uses `min-width: 100%` so it stretches to
   fill the container when the week strip is narrower.
   Fonts, tile widths, current-week accent, and e1..e5 value tints
   match TEE so the two calendars read the same across the app. */
.wr-planning-scroll[data-v-c69fc9f2] {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #e2e5ee;
  border-radius: 6px;
  background: #ffffff;
}
.wr-planning-scroll[data-v-c69fc9f2]::-webkit-scrollbar        { height: 7px;
}
.wr-planning-scroll[data-v-c69fc9f2]::-webkit-scrollbar-track  { background: #f0f1f5;
}
.wr-planning-scroll[data-v-c69fc9f2]::-webkit-scrollbar-thumb  { background: #c8cde0; border-radius: 4px;
}
.wr-planning-tbl[data-v-c69fc9f2] {
  /* Matches TPV's freeze-pane pattern:
       width: max-content  → table takes its natural (col-sum) width
       min-width: 100%     → stretches to fill the container when the
                             natural width is narrower (few weeks).
     No `table-layout: fixed` and no <col> widths — those turned out
     to be unreliable across browsers for this pattern. Instead,
     min-width on individual header/body cells (below) authoritatively
     drives each column's actual rendered width, which keeps the
     sticky columns' `left` offsets aligned with reality. */
  border-collapse: separate;
  border-spacing: 0;
  width: -moz-max-content;
  width: max-content;
  min-width: 100%;
  font-size: 12px;
  color: #1a1d35;
}

/* Header rows — kept at fixed pixel heights so alignment is trivial
   and doesn't depend on content wrapping. */
.wr-planning-mh[data-v-c69fc9f2] {
  background: #eef1f7;
  color: #4e5a82;
  font-weight: 700;
  height: 26px;
  padding: 0 6px;
  text-align: center;
  border-bottom: 1px solid #e2e5ee;
  white-space: nowrap;
}
.wr-planning-fh[data-v-c69fc9f2] {
  background: #f4f6fb;
  color: #1a1d35;
  font-weight: 700;
  height: auto;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #e2e5ee;
  border-right: 1px solid #eef0f5;
  white-space: nowrap;
  vertical-align: middle;
}
.wr-planning-wh[data-v-c69fc9f2] {
  background: #f4f6fb;
  color: #1a1d35;
  font-weight: 700;
  height: 30px;
  padding: 0;
  text-align: center;
  border-bottom: 1px solid #e2e5ee;
  border-right: 1px solid #eef0f5;
  font-size: 11px;
  /* Match .wr-planning-wk's min-width so header + body columns line
     up. Without this, the header cell can auto-grow past 44px on
     wider labels (e.g. "W100●") and desync from the body. */
  min-width: 44px;
}
.wr-planning-wh.cur[data-v-c69fc9f2] { color: #1d4ed8; background: #eff6ff;
}
.wr-planning-dh[data-v-c69fc9f2] {
  height: 22px;
  padding: 0;
  text-align: center;
  color: #6b7086;
  font-size: 10.5px;
  font-weight: 500;
  border-bottom: 1px solid #e2e5ee;
  border-right: 1px solid #eef0f5;
  background: #ffffff;
  min-width: 44px;
}
.wr-planning-dh.cur[data-v-c69fc9f2] { color: #1d4ed8; background: #eff6ff;
}

/* Body cells. */
.wr-planning-row[data-v-c69fc9f2] {
  height: 32px;
}
.wr-planning-td[data-v-c69fc9f2] {
  padding: 6px 10px;
  border-bottom: 1px solid #eef0f5;
  border-right: 1px solid #eef0f5;
  color: #1a1d35;
  white-space: nowrap;
  vertical-align: middle;
  background: #ffffff;
}
.wr-planning-td.center[data-v-c69fc9f2] {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.wr-planning-row:nth-child(even) .wr-planning-td[data-v-c69fc9f2] { background: #f7f8fc;
}
.wr-planning-wk[data-v-c69fc9f2] {
  height: 32px;
  padding: 0;
  text-align: center;
  border-bottom: 1px solid #eef0f5;
  border-right: 1px solid #eef0f5;
  vertical-align: middle;
  color: #1a1d35;
  font-variant-numeric: tabular-nums;
  background: #ffffff;
  /* Fixed min-width per week column — enforced on the cell rather
     than via <col>, which the browser was silently ignoring under
     `width: max-content`. */
  min-width: 44px;
}
.wr-planning-wk.past[data-v-c69fc9f2] { background: #fafbfd; color: #6b7086;
}
.wr-planning-wk.cur[data-v-c69fc9f2]  { background: #eff6ff;
}
/* Zebra stripe for even rows — exclude cells that carry an effort tint
   (.e1..e5) so the higher-specificity zebra selector doesn't shadow the
   .eN background. Without the .eN excludes, an e4/e5 cell on an even row
   would land at #f7f8fc (near-white) background but keep .eN's white
   text colour → invisible value. */
.wr-planning-row:nth-child(even) .wr-planning-wk[data-v-c69fc9f2]:not(.cur):not(.past):not(.e1):not(.e2):not(.e3):not(.e4):not(.e5) { background: #f7f8fc;
}
.wr-planning-wk-val[data-v-c69fc9f2] {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
}

/* Value-driven tint — matches TEE's e1..e5 scale so the two calendars
   read the same. `.cur` / `.past` are set alongside these classes; the
   ordering in the class list (past/cur first, then eN) means CSS
   specificity ties get broken by source-order and eN wins for coloured
   cells while past/cur wins for empty cells. */
.wr-planning-wk.e1[data-v-c69fc9f2] { background: #eef6ff;
}
.wr-planning-wk.e2[data-v-c69fc9f2] { background: #dbeafe;
}
.wr-planning-wk.e3[data-v-c69fc9f2] { background: #bfdbfe;
}
.wr-planning-wk.e4[data-v-c69fc9f2] { background: #93c5fd; color: #ffffff;
}
.wr-planning-wk.e5[data-v-c69fc9f2] { background: #60a5fa; color: #ffffff;
}

/* ── Weekly-effort colour legend (Resources Planning header) ──
   Swatches reuse the SAME hex values as the calendar `.wr-planning-wk.eN`
   rules above so the legend can't drift out of sync visually. */
.wr-planning-legend-field[data-v-c69fc9f2] {
  /* Right-anchor the legend content so it hugs the right edge of its
     column, next to the outer right border of the section. */
  align-items: flex-end;
}
.wr-planning-legend[data-v-c69fc9f2] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid #e2e5ee;
  border-radius: 6px;
  background: #ffffff;
  font-size: 11.5px;
  color: #1a1d35;
}
.wr-planning-legend-item[data-v-c69fc9f2] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.wr-planning-legend-sw[data-v-c69fc9f2] {
  width: 16px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid #d1d5e8;
  flex-shrink: 0;
}
.wr-planning-legend-sw.e1[data-v-c69fc9f2] { background: #eef6ff;
}
.wr-planning-legend-sw.e2[data-v-c69fc9f2] { background: #dbeafe;
}
.wr-planning-legend-sw.e3[data-v-c69fc9f2] { background: #bfdbfe;
}
.wr-planning-legend-sw.e4[data-v-c69fc9f2] { background: #93c5fd;
}
.wr-planning-legend-sw.e5[data-v-c69fc9f2] { background: #60a5fa;
}

/* Totals row — sits at the bottom, no zebra tint, subtle divider up
   top so it reads as a summary section. */
.wr-planning-totals-row .wr-planning-td[data-v-c69fc9f2],
.wr-planning-totals-row .wr-planning-wk[data-v-c69fc9f2] {
  background: #f4f6fb;
  font-weight: 700;
  border-top: 2px solid #d5dae7;
  border-bottom: none;
}

/* Unassigned Resource(s) row — italic name cell + light amber wash so it
   reads as a rolled-up bucket rather than a real named resource. Sits
   just above the totals row (last real row in tbody). */
.wr-planning-row--unassigned .wr-planning-sticky-name[data-v-c69fc9f2] {
  font-style: italic;
  color: #92400e;
}
.wr-planning-row--unassigned .wr-planning-td[data-v-c69fc9f2],
.wr-planning-row--unassigned .wr-planning-wk[data-v-c69fc9f2]:not(.cur):not(.past):not(.e1):not(.e2):not(.e3):not(.e4):not(.e5) {
  background: #fefce8;
}

/* Sticky freeze — first two columns pin to the left edge while the
   week strip scrolls. `left` values must sum with the previous
   sticky column's min-width to stay visually adjacent (260 → 260px). */
.wr-planning-sticky-name[data-v-c69fc9f2] {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 260px;
  max-width: 260px;
  box-shadow: 2px 0 0 0 #e2e5ee;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wr-planning-sticky-total[data-v-c69fc9f2] {
  position: sticky;
  left: 260px;
  z-index: 2;
  min-width: 110px;
  max-width: 110px;
  box-shadow: 2px 0 0 0 #e2e5ee;
}
/* Header row cells that are sticky need higher z-index to sit above
   scrolled body cells during horizontal scroll. */
.wr-planning-tbl thead .wr-planning-sticky-name[data-v-c69fc9f2],
.wr-planning-tbl thead .wr-planning-sticky-total[data-v-c69fc9f2] {
  z-index: 3;
}
.wr-planning-empty[data-v-c69fc9f2] {
  padding: 20px 10px;
  text-align: center;
  color: #9098b0;
  font-style: italic;
  border-bottom: none;
  background: #ffffff;
}

.rsp-pending[data-v-3b1c1a44] {
  margin: 0;
  padding: 16px 4px;
  color: #6b7280;
  font-size: 13px;
  font-style: italic;
}

/* Summary box 3-field row.
   Three equal columns on desktop. Each field stacks its label above the
   value; fields 2 & 3 split their value area into a sum + percentage
   pair. Collapses to a single column on narrow screens to keep numbers
   readable on mobile. */
.rsp-summary-row[data-v-3b1c1a44] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.rsp-summary-field[data-v-3b1c1a44] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* First field (single input) — half-width input so it visually mirrors
   the "input half" of the split-value pair used in fields 2 & 3. */
.rsp-summary-field--half input[data-v-3b1c1a44] {
  width: 50%;
}
.rsp-summary-pair[data-v-3b1c1a44] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: center;
}
.rsp-summary-pct[data-v-3b1c1a44] {
  padding: 6px 8px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: #1a1d35;
}
@media (max-width: 720px) {
.rsp-summary-row[data-v-3b1c1a44] { grid-template-columns: 1fr;
}
}

/* Vertical gap between the 3-field row and the practice-summary table
   in Box 1 — the 3-field row uses `gap:16px` but that only spaces its
   own children; the table sits outside that grid. */
.rsp-summary-table-wrap[data-v-3b1c1a44] {
  margin-top: 16px;
}
/* Slightly taller rows on this table only — the practice-summary rows
   need a bit more breathing room than the compact split-detail rows
   used in the practice boxes below. */
.rsp-summary-table-wrap .rsp-table tbody td[data-v-3b1c1a44] {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Value-entry instruction — persistent red-tone attention pill shown
   above each practice table (ORM / SUST / OPEX) so the user is reminded
   to type the raw Level 1 / Level 2 values, not percentages. Matches
   the TEE tab's red-tone notes (weekly-effort / vendor-pricing) — same
   info icon, "Note —" strong prefix, and soft-red palette so the visual
   language stays consistent across tabs. Still distinct from the
   heavier `.rsp-mismatch` pill (solid red, appears only on validation
   failure) via the softer background + info icon. */
.rsp-value-note[data-v-3b1c1a44] {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  color: #991b1b;
  font-size: 12.5px;
  line-height: 1.45;
}
.rsp-value-note svg[data-v-3b1c1a44] { flex-shrink: 0; margin-top: 1px;
}
.rsp-value-note-body[data-v-3b1c1a44] { min-width: 0;
}
.rsp-value-note-body strong[data-v-3b1c1a44] { display: inline; font-weight: 700; margin-right: 4px; color: #7f1d1d;
}

/* Mismatch warning — inline red notice shown under a practice table
   when its Level 1 value ≠ Level 2 sum. Matches the soft-red pill tone
   used elsewhere for validation messages (WR helper--warn, BaseAlert
   error palette). */
.rsp-mismatch[data-v-3b1c1a44] {
  margin: 0 0 10px;
  padding: 8px 12px;
  background: #fee2e2;
  border: 1px solid #f87171;
  border-radius: 6px;
  color: #b91c1c;
  font-size: 12.5px;
  font-weight: 600;
}

/* "Practice not selected" notice — shown in place of the split table
   when the practice isn't in the OIS selection. Muted amber to signal a
   soft blocker (user can fix by editing OIS), not an error. */
.rsp-not-selected[data-v-3b1c1a44] {
  margin: 0;
  padding: 14px 16px;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
}

/* ORM table — 5-column grid.
   Layout mirrors the wr-table + tle-grid pattern used elsewhere in the
   dealsheet so tables stay visually consistent across every tab. */
.rsp-table-scroll[data-v-3b1c1a44] {
  overflow-x: auto;
  border: 1px solid #e2e5ee;
  border-radius: 6px;
  background: #ffffff;
}
.rsp-table[data-v-3b1c1a44] {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  min-width: 720px;
}
.rsp-table thead th[data-v-3b1c1a44] {
  background: #f4f6fb;
  color: #1a1d35;
  font-weight: 700;
  text-align: center;
  padding: 8px 10px;
  border-bottom: 1px solid #e2e5ee;
  white-space: nowrap;
}
.rsp-th-desc[data-v-3b1c1a44] {
  text-align: left !important;
  min-width: 320px;
}
/* Right-align opt-in for specific header cells only (numeric columns
   whose row values also read right — the header alignment should match
   the visual weight of the numbers below without touching cell align. */
.rsp-th-right[data-v-3b1c1a44] {
  text-align: right !important;
}
.rsp-table tbody td[data-v-3b1c1a44] {
  padding: 6px 10px;
  border-bottom: 1px solid #eef0f5;
  color: #1a1d35;
  white-space: nowrap;
}
.rsp-table tbody tr:last-child td[data-v-3b1c1a44] {
  border-bottom: none;
}
.rsp-cell-desc[data-v-3b1c1a44] {
  text-align: left;
}

/* Number cells — right-aligned tabular-nums for clean column alignment.
   No background tint on inputs — the shared .bp-input styling is used
   as-is so number cells look identical to every other tab in the app. */
.rsp-cell-num[data-v-3b1c1a44] {
  padding: 4px 6px;
  min-width: 130px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rsp-cell-static[data-v-3b1c1a44] {
  text-align: right;
  padding-right: 12px;
  min-width: 90px;
  font-variant-numeric: tabular-nums;
}
.rsp-num-input[data-v-3b1c1a44] {
  width: 100%;
  padding: 5px 8px;
  font-size: 13px;
  text-align: right;
}
/* Readonly variant — matches the .ds-ois-readonly-value styling in
   OisTab.vue so readonly numeric cells across dealsheet tabs share the
   same soft-grey pill treatment. Only affects <input readonly>; plain
   readonly text (spans / <td> cells) is untouched. */
.rsp-num-input[readonly][data-v-3b1c1a44] {
  background: #f0f1f5;
  border-color: #e4e7f0;
  color: #4e5a82;
  font-weight: 600;
}

/* Brand-red label — applies only to the BaseSelect wearing `.tle-label-red`
   so other TLE labels stay default dark grey. */
.tle-label-red[data-v-c7d68b8e] .bp-label {
  color: #da2128;
}

/* Yes / No state tint on the "Is T&L to be invoice back to the client?"
   dropdown. Uses the platform's semantic light-tint pill style — soft
   background, matching border, deep saturated text — instead of a solid
   colour fill, which reads noisy against the red label above and red
   message below. Same palette convention used by BaseAlert and the OSQ
   Win-Prob row-card selected state. */
/* Yes state — paint only the outer .p-select background so the rounded
   corners stay clean. The inner .p-select-label is left transparent so it
   inherits the parent's pink visual; only its text colour is overridden. */
.tle-invoiced-yes[data-v-c7d68b8e] .p-select {
  background: #fee2e2 !important;
  border-color: #f87171 !important;
}
.tle-invoiced-yes[data-v-c7d68b8e] .p-select .p-select-label {
  background: transparent !important;
  color: #b91c1c !important;
}
.tle-invoiced-yes[data-v-c7d68b8e] .p-select .p-select-dropdown svg {
  color: #b91c1c !important;
  stroke: #b91c1c !important;
}

/* No state — same pattern, business-green palette. */
.tle-invoiced-no[data-v-c7d68b8e] .p-select {
  background: #dcfce7 !important;
  border-color: #86efac !important;
}
.tle-invoiced-no[data-v-c7d68b8e] .p-select .p-select-label {
  background: transparent !important;
  color: #166534 !important;
}
.tle-invoiced-no[data-v-c7d68b8e] .p-select .p-select-dropdown svg {
  color: #166534 !important;
  stroke: #166534 !important;
}
.tle-msg-block[data-v-c7d68b8e] { margin-top: 6px;
}
.tle-msg[data-v-c7d68b8e] {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
}
.tle-msg--red-caps[data-v-c7d68b8e] {
  color: #da2128;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.tle-msg--grey[data-v-c7d68b8e] {
  color: #4e5a82;
  font-weight: 500;
}
.tle-msg--red[data-v-c7d68b8e] {
  color: #da2128;
  font-weight: 600;
}

/* Three-column summary row above the resource table. Cards mirror the
   TEE Summary KPI-card style — dashed border marks them as derived (like
   TEE's `kpi-card--calc`). Local class prefix (`tle-kpi-*`) because
   TeeTab's scoped styles don't leak here. */
.tle-summary-row[data-v-c7d68b8e] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #eef1f8;
}
.tle-kpi-card[data-v-c7d68b8e] {
  background: #f8f9fc;
  border: 1px solid #e4e7f0;
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 110px;
}
.tle-kpi-card--calc[data-v-c7d68b8e] { border-style: dashed;
}
.tle-kpi-lbl[data-v-c7d68b8e] {
  font-size: 10px;
  font-weight: 700;
  color: #9098b0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tle-kpi-val[data-v-c7d68b8e] {
  font-size: 16px;
  font-weight: 800;
  color: #1a1d35;
  line-height: 1.1;
}
.tle-kpi-currency[data-v-c7d68b8e] {
  color: #4e5a82;
  margin-right: 4px;
}
@media (max-width: 760px) {
.tle-summary-row[data-v-c7d68b8e] { grid-template-columns: 1fr;
}
}

/* Empty state — same visual tone as TPV / TEE empties. */
.tle-empty[data-v-c7d68b8e] {
  padding: 24px 12px;
  text-align: center;
  color: #6b7280;
  font-size: 13px;
}

/* Horizontally-scrollable 17-column grid. Sticky first column keeps
   Resource Name visible while scrolling right through the transport
   modes. Cells are compact (36px min-height) to keep the grid dense —
   TPV uses the same convention. */
.tle-grid-scroll[data-v-c7d68b8e] {
  overflow-x: auto;
  border: 1px solid #e4e7f0;
  border-radius: 6px;
  background: #fff;
}
.tle-grid[data-v-c7d68b8e] {
  border-collapse: collapse;
  width: -moz-max-content;
  width: max-content;
  min-width: 100%;
  font-size: 12px;
  color: #1a1d35;
}
.tle-grid thead th[data-v-c7d68b8e] {
  position: sticky;
  top: 0;
  background: #f4f6fb;
  color: #4e5a82;
  font-weight: 700;
  font-size: 11px;
  text-align: center;
  padding: 8px 6px;
  border-bottom: 1px solid #d1d5e8;
  white-space: nowrap;
  z-index: 1;
}
.tle-grid tbody th[data-v-c7d68b8e],
.tle-grid tbody td[data-v-c7d68b8e] {
  padding: 6px 6px;
  border-bottom: 1px solid #eef1f8;
  min-height: 36px;
  height: 36px;
  vertical-align: middle;
}
.tle-grid tbody tr:last-child th[data-v-c7d68b8e],
.tle-grid tbody tr:last-child td[data-v-c7d68b8e] { border-bottom: none;
}

/* First column — sticky left. Higher z-index than the sticky header so the
   header still overlays it correctly at the top-left crossing. */
.tle-grid-name-col[data-v-c7d68b8e] {
  position: sticky;
  left: 0;
  background: #fff;
  min-width: 200px;
  max-width: 240px;
  z-index: 2;
  border-right: 1px solid #d1d5e8;
  text-align: left;
  padding-left: 12px;
}
.tle-grid thead .tle-grid-name-col[data-v-c7d68b8e] {
  background: #f4f6fb;
  z-index: 3;
}
.tle-grid-name-cell[data-v-c7d68b8e] {
  font-weight: 600;
  color: #1a1d35;
}

/* Numeric input cells — match the TPV grid pattern: minimum wrapper padding,
   inherit border / background / border-radius / focus ring from the shared
   `.bp-input` (from @dssplus/bizplus-fe-ui). Only fine-tune width, padding,
   font-size and right-alignment so the input fills its cell tidily and
   digits line up cleanly across rows. */
.tle-grid-cell-num[data-v-c7d68b8e] {
  padding: 4px 6px;
  min-width: 120px;
}
.tle-grid-cell-num .tle-num-input[data-v-c7d68b8e] {
  width: 100%;
  padding: 5px 8px;
  font-size: 13px;
  text-align: right;
}

/* Missing-mandatory cell highlight — mirrors the `*` marker on the header
   for the 5 required columns (Flight/Train/Hotel/Meal/Taxi Returns/Nights).
   Applied to the <td> so the red box outlines the whole cell area rather
   than the input alone, matching how OBI's `.bp-input--error` bordering
   reads. Clears the moment the user types any digit (including 0). */
.tle-grid-cell-num--missing .tle-num-input[data-v-c7d68b8e] {
  border-color: #da2128;
  box-shadow: 0 0 0 1px #da2128 inset;
}
.tle-grid-cell-num--missing .tle-num-input[data-v-c7d68b8e]:focus {
  outline: none;
  border-color: #da2128;
  box-shadow: 0 0 0 2px rgba(218, 33, 40, 0.25);
}

/* Pre-table note that appears alongside the red cell highlights. Same brand
   red (#da2128) as the borders + modal error links so the visual language
   stays consistent. Soft pink wash + subtle red left rule frame the message
   without turning the whole box into an alert. */
.tle-mandatory-note[data-v-c7d68b8e] {
  margin: 0 0 12px;
  padding: 8px 12px;
  background: #fdecee;
  border-left: 3px solid #da2128;
  color: #a71b21;
  font-size: 13px;
  line-height: 1.4;
  border-radius: 4px;
}

/* Static (computed) cells — grand-total column + per-transport total
   columns. Light grey wash flags them as read-only / derived at a glance
   and separates them visually from the editable numeric inputs on either
   side. Right-aligned to match the input cells. */
.tle-grid-cell-static[data-v-c7d68b8e] {
  text-align: right;
  padding-right: 12px;
  color: #4e5a82;
  font-weight: 600;
  min-width: 100px;
  background: #f4f6fb;
}

/* Static "Standard DSS+ payment terms" note — persistent red-tone pill
   sitting above the payment-terms input row. Matches the RSP tab's
   `.rsp-value-note` style so the two tabs read as a family (info icon +
   "Note —" strong prefix, soft-red palette). */
.cfc-note[data-v-f22ea96e] {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  padding: 8px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  color: #991b1b;
  font-size: 12.5px;
  line-height: 1.45;
}
.cfc-note svg[data-v-f22ea96e] { flex-shrink: 0; margin-top: 1px;
}
.cfc-note-body[data-v-f22ea96e] { min-width: 0; display: flex; flex-direction: column; gap: 4px;
}
.cfc-note-body strong[data-v-f22ea96e] { display: inline; font-weight: 700; margin-right: 4px; color: #7f1d1d;
}
.cfc-note-line--sub[data-v-f22ea96e] {
  position: relative;
  padding-left: 12px;
}
.cfc-note-line--sub[data-v-f22ea96e]::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #991b1b;
}

/* Contract Details grid — 3-column layout kept for future Payment
   Details fields; col 1 currently holds the payment-terms field. */
.cfc-contract-grid[data-v-f22ea96e] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: end;
}
@media (max-width: 720px) {
.cfc-contract-grid[data-v-f22ea96e] { grid-template-columns: 1fr;
}
}

/* Payment-terms row — BaseInput on the left with its own label above
   the input; the "days" suffix flex-aligned at the bottom so it sits
   next to the input, not the label. */
.cfc-payment-row[data-v-f22ea96e] {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.cfc-num-input[data-v-f22ea96e] {
  flex: 1;
  min-width: 0;
}
.cfc-suffix[data-v-f22ea96e] {
  padding-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #4e5a82;
  white-space: nowrap;
}

/* Conditional Global-CFO-Approval warning pill — heavier solid red-fill
   pill matches the RSP tab's `.rsp-mismatch` style so validation-style
   warnings read consistently across tabs. Only rendered when payment
   terms exceed the active threshold (45 for new customer, else 60). */
.cfc-warning-pill[data-v-f22ea96e] {
  margin: 12px 0 0;
  padding: 8px 12px;
  background: #fee2e2;
  border: 1px solid #f87171;
  border-radius: 6px;
  color: #b91c1c;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}

/* Yes/No question list — visual match for the OSQ Opportunity Score
   sub-section (bordered card, per-row pill radios, green for Yes / red
   for No). Kept as its own cfc-q-* namespace since scoped styles don't
   cross component boundaries. If a third tab ever needs the same list,
   promote to fe-ui. */
.cfc-q-list[data-v-f22ea96e] {
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
}
.cfc-q-item[data-v-f22ea96e] {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.15s;
}
.cfc-q-item[data-v-f22ea96e]:last-child { border-bottom: none;
}
.cfc-q-item[data-v-f22ea96e]:hover      { background: #f9fafb;
}
.cfc-q-label[data-v-f22ea96e] {
  flex: 1;
  font-size: 0.875rem;
  color: #111827;
  line-height: 1.45;
}
.cfc-q-radios[data-v-f22ea96e] {
  flex-shrink: 0;
  display: flex;
  gap: 0.375rem;
}
.cfc-q-radio[data-v-f22ea96e] {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 1rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #6b7280;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.cfc-q-radio[data-v-f22ea96e]:hover { border-color: #9ca3af; color: #374151;
}
.cfc-q-radio--yes[data-v-f22ea96e] {
  border-color: #16a34a;
  background: #f0fdf4;
  color: #15803d;
}
.cfc-q-radio--no[data-v-f22ea96e] {
  border-color: #dc2626;
  background: #fff1f2;
  color: #b91c1c;
}
.cfc-q-radio-input[data-v-f22ea96e] { display: none;
}

/* Inline follow-up sub-panel — appears right below its parent question
   inside the bordered card. Soft grey background matches the row hover
   tone so it reads as a nested detail, not a separate section. */
.cfc-q-followup[data-v-f22ea96e] {
  padding: 0.75rem 1rem 0.85rem;
  background: #f9fafb;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.cfc-q-followup[data-v-f22ea96e]:last-child { border-bottom: none;
}
.cfc-q-followup-label[data-v-f22ea96e] {
  font-size: 0.85rem;
  font-weight: 600;
  color: #374151;
}

/* Dropdown cell on the classification row — mirrors the flex-shrink
   sizing of .cfc-q-radios so the row's left-cell (label) still
   flex-grows and the right-cell stays a comfortable dropdown width. */
.cfc-q-select[data-v-f22ea96e] {
  flex-shrink: 0;
  width: 240px;
}

/* Warning strip — brand-red banner that flows inside the same
   bordered card as the question rows. Keeps the card's outline
   uninterrupted; last-child rule drops the trailing separator when
   this is the final child. */
.cfc-q-strip[data-v-f22ea96e] {
  padding: 0.7rem 1rem;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  border-bottom: 1px solid #f3f4f6;
}
.cfc-q-strip[data-v-f22ea96e]:last-child { border-bottom: none;
}
.cfc-q-strip--warn[data-v-f22ea96e] {
  background: #fee2e2;
  color: #b91c1c;
}
@media (max-width: 640px) {
.cfc-q-item[data-v-f22ea96e]   { flex-direction: column; gap: 0.5rem;
}
.cfc-q-radios[data-v-f22ea96e] { justify-content: flex-start;
}
.cfc-q-select[data-v-f22ea96e] { width: 100%;
}
}

/* ── Invoicing Countries — unified tree picker ─────────────────
   Single PrimeVue TreeSelect replaces the previous 5 per-market
   sub-boxes. Selected picks render as removable chips below,
   grouped by region — one row per region that has any pick.
   Per-region "Other" text inputs stack below the chip list, one
   row per region with the Other sentinel picked. */
.cfc-ic-tree-wrap[data-v-f22ea96e] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 640px;
}
.cfc-ic-tree-label[data-v-f22ea96e] {
  /* Match the `.bp-label` treatment of a BaseInput / BaseSelect
     label — small, uppercase-cued via letter-spacing, bold-ish. */
}
.cfc-ic-tree[data-v-f22ea96e] {
  width: 100%;
}
/* Piercing the PrimeVue tree overlay for cosmetic parity with
   BaseSelect / BaseMultiSelect (same border radius, same soft
   focus ring). :deep required — PrimeVue renders under its own
   scoped attribute. */
.cfc-ic-tree[data-v-f22ea96e] .p-treeselect {
  width: 100%;
  border-radius: 8px;
}
.cfc-ic-tree[data-v-f22ea96e] .p-treeselect-label {
  padding: 9px 12px;
  font-size: 13.5px;
}

/* Region-grouped chip list. One row per region: region label on the
   left, its chips flowing on the right. Wraps naturally on narrow
   screens. */
.cfc-ic-chips-body[data-v-f22ea96e] {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
}
.cfc-ic-chips-row[data-v-f22ea96e] {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.cfc-ic-chips-region[data-v-f22ea96e] {
  flex-shrink: 0;
  min-width: 60px;
  padding-top: 2px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #4e5a82;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cfc-ic-chips[data-v-f22ea96e] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.cfc-ic-chip[data-v-f22ea96e] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 10px;
  background: #ffffff;
  border: 1px solid #d1d5e8;
  border-radius: 12px;
  font-size: 12px;
  color: #1a1d35;
  line-height: 1.4;
}
.cfc-ic-chip--other[data-v-f22ea96e] {
  border-color: #fecaca;
  background: #fef2f2;
  color: #7f1d1d;
}
.cfc-ic-chip-close[data-v-f22ea96e] {
  border: 0;
  background: transparent;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
}
.cfc-ic-chip-close[data-v-f22ea96e]:hover { background: #f3f4f6; color: #1a1d35;
}

/* Per-region "Other" free-text inputs — appear one per region with
   the Other sentinel picked. Row layout matches BaseInput's default
   full-width flow. Brand-red label so the free-text stands out as
   the caller of attention (same treatment used in OSQ Potential
   Competitors). */
.cfc-ic-others[data-v-f22ea96e] {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.85rem;
  max-width: 640px;
}
.cfc-ic-other-row[data-v-f22ea96e] .bp-label {
  color: #da2128;
}

/* CFC follows the OBI pattern — no always-on red-box highlighting for
   mandatory fields. Only the `*` markers show at rest; when the user
   clicks a missing field in the mandatory-errors modal, the parent's
   `scrollToMandatoryField(err.key)` finds the element via its
   `data-mandatory-key` attribute, scrolls it into view, and applies
   the shared `.ds-field-highlight` pulse (defined in
   DealsheetEditView.vue) for a temporary red outline. */

/* ── Financial Items to Consider (advisory content) ────────────
   Static reference block — no inputs. Bold intros followed by
   bullet lists, capped by three tax-clause cards on the shared
   table-header background (#f4f6fb). */
.cfc-fin-body[data-v-f22ea96e] {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.cfc-fin-bold[data-v-f22ea96e] {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #1a1d35;
  line-height: 1.55;
}
/* Normal-weight advisory paragraph — same font-size as bullets, no
   emphasis. Used for the reference-note blocks that flow between the
   bold headings inside the Financial Items box. */
.cfc-fin-normal[data-v-f22ea96e] {
  margin: 0;
  font-size: 12.5px;
  font-weight: 400;
  color: #374151;
  line-height: 1.55;
}
/* Modifier used to insert a slightly larger visual gap ABOVE a normal
   paragraph — flags a "line break" separator between logical sections
   without needing an empty <hr> or spacer element. */
.cfc-fin-normal--divider[data-v-f22ea96e] {
  margin-top: 0.5rem;
}
/* Native list bullets are suppressed by display:flex — we render our
   own small red disc via ::before so each item carries a visible
   marker that matches the section's red-tone header. */
.cfc-fin-bullets[data-v-f22ea96e] {
  margin: 0 0 0 0.4rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 12.5px;
  color: #374151;
  line-height: 1.55;
}
.cfc-fin-bullets li[data-v-f22ea96e] {
  position: relative;
  padding-left: 1.1rem;
}
.cfc-fin-bullets li[data-v-f22ea96e]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #da2128;
}
/* Italic sub-text under the "Example:" bullet — two worked-example
   paragraphs sit indented beneath the bullet, unbulleted and italic
   so they read as an illustration rather than another point. */
.cfc-fin-example[data-v-f22ea96e] {
  margin-top: 0.35rem;
  font-style: italic;
  color: #4b5563;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.cfc-fin-example p[data-v-f22ea96e] { margin: 0;
}

/* Tax clauses — three paragraphs share ONE bordered box with the
   shared table header background so they read as a single reference
   block. Paragraph spacing (gap) provides visual separation between
   clauses without splitting the container into three cards. */
.cfc-fin-clauses[data-v-f22ea96e] {
  margin-top: 0.2rem;
  padding: 0.9rem 1rem;
  background: #f4f6fb;
  border: 1px solid #e2e5ee;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.cfc-fin-clause[data-v-f22ea96e] {
  font-size: 12.5px;
  color: #1a1d35;
  line-height: 1.55;
  white-space: pre-line;
}

/* ── PrimeVue TreeSelect trigger ── */
/* !important on the visual chrome because PrimeVue 4 ships its own
   scoped design-token CSS that outranks unscoped selectors on load
   order alone. */
.p-treeselect {
  width: 100%;
  border: 1px solid #c0c1cb !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  box-shadow: none;
  transition: border-color 0.15s;
}
.p-treeselect:hover:not(.p-disabled) { border-color: #a0a1ab !important;
}
.p-treeselect.p-focus,
.p-treeselect:not(.p-disabled).p-treeselect-open {
  border-color: #da2128 !important;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12) !important;
  outline: none;
}
.p-treeselect .p-treeselect-label {
  padding: 9px 12px;
  font-size: 13.5px;
  color: #1a1d35;
  font-family: inherit;
}
.p-treeselect .p-treeselect-label.p-placeholder { color: #9098b0;
}
.p-treeselect .p-treeselect-dropdown {
  width: 36px;
  color: #6b7db8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-treeselect .p-treeselect-dropdown svg { width: 14px; height: 14px;
}
.p-treeselect.p-disabled { background: #f8f9fc !important;
}
.p-treeselect.p-disabled .p-treeselect-label { color: #9098b0;
}

/* ── PrimeVue TreeSelect overlay (teleported to body) ── */
.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;
}
.p-treeselect-overlay .p-treeselect-header {
  padding: 8px 12px;
  border-bottom: 1px solid #e4e7f0;
  background-color: #ffffff !important;
}
.p-treeselect-overlay .p-treeselect-filter-container { width: 100%;
}
.p-treeselect-overlay .p-treeselect-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-treeselect-overlay .p-treeselect-filter:focus { border-color: #5b6af0;
}
.p-treeselect-overlay .p-tree {
  border: 0;
  padding: 6px 0;
  background-color: #ffffff !important;
}
/* Each tree row uses flex — gap widens the visual space between the
   expand toggle, checkbox and label so the country name reads clearly
   away from the checkbox glyph. */
.p-treeselect-overlay .p-tree-node-content {
  padding: 6px 10px !important;
  gap: 10px !important;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.p-treeselect-overlay .p-tree-node-content:hover  { background-color: #f5f6fb !important;
}
.p-treeselect-overlay .p-tree-node-content.p-focus,
.p-treeselect-overlay .p-tree-node-content.p-tree-node-selected {
  background-color: #eef0fd !important;
  color: #3d4db0 !important;
}
.p-treeselect-overlay .p-tree-node-label {
  font-size: 13.5px !important;
  color: #1a1d35 !important;
  line-height: 1.4 !important;
}
.p-treeselect-overlay .p-tree-node-toggle-button {
  width: 22px;
  height: 22px;
  color: #6b7db8;
}
/* Region parent label reads slightly bolder + uppercase so the child
   country rows visually nest under it. */
.p-treeselect-overlay .p-tree-root > li > .p-tree-node-content > .p-tree-node-label {
  font-weight: 600 !important;
  letter-spacing: 0.03em;
}
/* Indent every level of children so country nodes sit visibly under
   their parent region. PrimeVue 4 uses <ul class="p-tree-node-children">
   for each nested level — padding-left on that container is what shifts
   the rows to the right. */
.p-treeselect-overlay .p-tree-node-children {
  padding-left: 1.5rem !important;
}
.p-treeselect-overlay .p-checkbox-box {
  width: 16px;
  height: 16px;
  border: 1px solid #c0c1cb;
  border-radius: 4px;
  background-color: #ffffff;
}
.p-treeselect-overlay .p-checkbox.p-checkbox-checked .p-checkbox-box,
.p-treeselect-overlay .p-checkbox .p-checkbox-box.p-highlight {
  background-color: #da2128 !important;
  border-color: #da2128 !important;
}
.p-treeselect-overlay .p-checkbox .p-checkbox-icon { color: #ffffff !important;
}
.p-treeselect-overlay .p-treeselect-empty-message {
  padding: 12px 14px !important;
  font-size: 13px !important;
  color: #9098b0 !important;
  background-color: #ffffff !important;
}

/* ═══════ Outer wrapper ═══════ */
.vrbi-wrap[data-v-8d4f8544] {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Border-box everywhere so the row heights we set (var --vrbi-*) match
   exactly across left and right boxes. Without this, a 1px border on
   only one side of a cell would drift its height by 1-2px relative to
   its sibling on the other side of the layout. */
.vrbi-wrap[data-v-8d4f8544] :where(.vrbi-left-head, .vrbi-left-subhead, .vrbi-left-cell,
                  .vrbi-right-header, .vrbi-type-legend, .vrbi-bar-row) {
  box-sizing: border-box;
}

/* ═══════ Top header strip — 3 read-only fields.
   Bottom margin puts breathing room between the header strip and the
   two data boxes that follow, since both live inside the shared
   .ds-section-body which has no built-in gap. */
.vrbi-header[data-v-8d4f8544] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 460px;
  /* margin-bottom removed — spacing now owned by the outer
     `.vrbi-pda-top-strip` grid, which reserves the gap for its whole
     row. Keeping a per-item margin would compound the space. */
}

/* TEE summary KPI strip — appears INSIDE the left box, directly below
   the role table. Uses the same visual pattern as the top header strip
   but sized to fit inside the box (no max-width constraint that leaves
   whitespace to the right). */
.vrbi-tee-summary[data-v-8d4f8544] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
}
/* Inside `.vrbi-boxes`, pin the KPI strip to the bottom of its (stretched)
   box so it row-aligns with the sibling `.vrbi-margin-status-strip` on
   the right. `padding-top: 16px` preserves the visual breathing room
   between the bordered grid above and the strip. */
.vrbi-boxes .vrbi-tee-summary[data-v-8d4f8544] {
  margin-top: auto;
  padding-top: 16px;
}
.vrbi-tee-summary .vrbi-header-row[data-v-8d4f8544] {
  /* Label wider than the top strip so long captions like "Calculated
     resource pricing INR" fit without wrapping. */
  grid-template-columns: minmax(0, 1fr) 160px;
}
/* "Other Costs Assumptions" variant — no leading margin because the
   strip sits at the top of its section-body (no preceding table to
   separate from). */
.vrbi-tee-summary--other-costs[data-v-8d4f8544] {
  margin-top: 0;
}

/* Uppercase label variant — used for "PROJECT PRICE PROPOSED INCLUDING
   OTHER COSTS" in the Other Income section. Keeps the same weight /
   size as neighbours but forces uppercase so the row reads as a header
   inside the strip. */
.vrbi-label-caps[data-v-8d4f8544] {
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Brand-red label — used for "Project margin proposed" per the spec.
   Same weight / size as the other labels, colour swap only. Compound
   selector bumps specificity above `.vrbi-header-label` alone, whose
   `color: #1a1d35` is defined later in the stylesheet and would
   otherwise win the cascade. */
.vrbi-header-label.vrbi-label-red[data-v-8d4f8544] {
  color: #da2128;
}

/* Bold label variant — used for the row 6 header
   "PROJECT PRICE PROPOSED INCLUDING OTHER COSTS". Compound selector
   beats the base `.vrbi-header-label { font-weight: 500 }` regardless of
   source order. */
.vrbi-header-label.vrbi-label-bold[data-v-8d4f8544] {
  font-weight: 700;
}

/* ═══════ "Other Costs Assumptions" 50/50 grid ═══════
   Two equal columns (matching Project Days Analysis's `.vrbi-boxes`
   split) so the vertical divide lines up across all three sections.
     column 1 → LEFT half — nested sub-grid holds label + input
     column 2 → RIGHT half — pill / warning / readonly amount
   Grid rows are auto-sized to their tallest child. Pills placed by
   explicit `grid-row` anchor exactly to the LEFT row they annotate. */
.vrbi-oc-grid[data-v-8d4f8544] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  -moz-column-gap: 20px;
       column-gap: 20px;
  row-gap: 6px;
  align-items: center;
}
/* LEFT-half row wrapper — sub-grid with the label (right-aligned into
   the space) + input (fixed 160px). Same column split as the retired
   `.vrbi-tee-summary .vrbi-header-row` so rows read visually identical
   to the top strip's summary rows. */
.vrbi-oc-row-left[data-v-8d4f8544] {
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  -moz-column-gap: 12px;
       column-gap: 12px;
  align-items: center;
}
/* Row 1 — T&L pill parallel to "T&L expenses INR". */
.vrbi-oc-tl-pill[data-v-8d4f8544] {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  align-self: center;
}
/* Rows 2-5 — handling-fee warning text, vertically centred across the
   4-row block so it reads as an aside attached to the whole cluster. */
.vrbi-oc-warning[data-v-8d4f8544] {
  grid-column: 2;
  grid-row: 2 / span 4;
  align-self: center;
  justify-self: start;
}
/* Row 6 — readonly withholding-tax amount parallel to the "Withholding
   tax rate %" input on the left. Width matches the left-side input. */
.vrbi-wht-amount[data-v-8d4f8544] {
  grid-column: 2;
  grid-row: 6;
  align-self: center;
  justify-self: start;
  width: 160px;
}

/* ═══════ "Vendor Data For Info" 50/50 grid ═══════
   Same split as the other sections so the vertical divide lines up
   across the whole tab. Two LEFT rows (vendor days + vendor costs);
   one RIGHT row containing a readonly percentage + trailing caption. */
.vrbi-vi-grid[data-v-8d4f8544] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  -moz-column-gap: 20px;
       column-gap: 20px;
  row-gap: 6px;
  align-items: center;
}
.vrbi-vi-row-left[data-v-8d4f8544] {
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  -moz-column-gap: 12px;
       column-gap: 12px;
  align-items: center;
}
/* Right-column row 1 — value pill + inline caption text. `justify-self:
   start` hugs the LEFT edge of the right half so the value + caption
   sit close to the divide (matching the pill placement in the sections
   above), not floating out at the far right. */
.vrbi-vi-row-right[data-v-8d4f8544] {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
}
.vrbi-vi-percent-value[data-v-8d4f8544] {
  width: 100px;
  text-align: center;
}
.vrbi-vi-caption[data-v-8d4f8544] {
  font-size: 12.5px;
  color: #1a1d35;
}
/* Red-tint label / caption modifier for the "Vendor Data For Info"
   section's SUMMARY row (the two LEFT labels + RIGHT caption that sit
   above the divider). Uses the brand red so the summary row reads as
   the section's headline figures, distinct from the per-vendor rows
   below which stay in the default navy label colour. Higher specificity
   compound selectors ensure this wins over the base label colour rule
   defined earlier in the sheet. */
.vrbi-header-label.vrbi-vi-red-text[data-v-8d4f8544],
.vrbi-vi-caption.vrbi-vi-red-text[data-v-8d4f8544] {
  color: #da2128;
}

/* ═══════ "Payment Terms" freeze-pane table ═══════
   Mirrors TPV tab's grid pattern: outer wrapper owns the border, a
   horizontally-scrolling container holds the table, and the first
   column is sticky (position: sticky; left: 0) so it stays pinned
   while everything to the right scrolls horizontally.
   `.vrbi-pt-grid-block` MUST NOT set overflow — any value other than
   visible would trap position:sticky descendants and break the pin. */
.vrbi-pt-grid-block[data-v-8d4f8544] {
  border: 1px solid #c5c6c9;
  border-radius: 4px;
  background: #fff;
}
.vrbi-pt-grid-scroll[data-v-8d4f8544] {
  overflow-x: auto;
  overflow-y: hidden;
  background: #fff;
  border-radius: 4px;
}
.vrbi-pt-grid[data-v-8d4f8544] {
  border-collapse: separate;
  border-spacing: 0;
  width: -moz-max-content;
  width: max-content;    /* let columns claim their natural width */
  min-width: 100%;       /* stretch to container if narrower */
  font-size: 13px;
  color: #1a1d35;
}
/* Sticky <thead> so future scroll interactions (vertical, if introduced
   later) don't hide the header. Also gives it a proper stacking context
   so it can sit above the body first-column cells during horizontal
   scroll. Same pattern used by TPV. */
.vrbi-pt-grid thead[data-v-8d4f8544] {
  position: sticky;
  top: 0;
  z-index: 5;
}
.vrbi-pt-grid thead th[data-v-8d4f8544] {
  background: #f4f6fb;
  color: #1a1d35;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
  padding: 10px;
  border-bottom: 1px solid #c5c6c9;
  border-right: 1px solid #c5c6c9;
}
.vrbi-pt-grid tbody th[data-v-8d4f8544],
.vrbi-pt-grid tbody td[data-v-8d4f8544] {
  padding: 6px 8px;
  border-bottom: 1px solid #eef0f5;
  border-right:  1px solid #eef0f5;
  white-space: nowrap;
}
.vrbi-pt-grid thead th[data-v-8d4f8544] {
  /* Trim header padding too so the header column widths follow the
     body widths — otherwise 10px header padding vs 8px body padding
     forces the header cells wider than the body columns and adds
     unnecessary horizontal space. */
  padding: 8px 8px;
}
/* First column ("Week(s)") — pinned to the left of the scroll container
   via position:sticky. Solid background so scrolled cells behind it
   don't bleed through. z-index keeps the header <th> above body <th>. */
.vrbi-pt-week-col[data-v-8d4f8544] {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #f4f6fb;
  min-width: 100px;
  box-shadow: 2px 0 0 0 #e2e5ee;
  color: #1a1d35;
}
.vrbi-pt-grid tbody th.vrbi-pt-week-col[data-v-8d4f8544] {
  text-align: left;
  font-weight: 600;
}
.vrbi-pt-grid thead .vrbi-pt-week-col[data-v-8d4f8544] {
  z-index: 3;
}
/* Two-line week cell: bold "W1" primary + smaller "06/07 – 10/07" range. */
.vrbi-pt-week-primary[data-v-8d4f8544] {
  font-weight: 700;
  font-size: 13px;
}
.vrbi-pt-week-secondary[data-v-8d4f8544] {
  font-size: 11.5px;
  color: #6b7086;
  margin-top: 2px;
}
/* Empty-state row (shown when OIS dates aren't set yet). Centred and
   italicised to signal "nothing to show" without a full graphic. */
.vrbi-pt-empty[data-v-8d4f8544] {
  text-align: center !important;
  font-style: italic;
  color: #6b7086;
  font-weight: 500 !important;
}

/* "Billing vs. crewing" column — right-aligned readonly money values,
   with a fixed min-width so the numbers line up in a clean vertical
   strip regardless of digit count. */
.vrbi-pt-billing-col[data-v-8d4f8544] {
  min-width: 115px;
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}
/* Header cell of the billing column stacks the label above the running
   Σ so the column self-documents ("here's the header + the running
   total"). Kept centered like the other thead cells. */
.vrbi-pt-billing-header-label[data-v-8d4f8544] {
  font-weight: 700;
  font-size: 13px;
}
.vrbi-pt-billing-header-total[data-v-8d4f8544] {
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: #da2128;      /* brand red — headline figure, catches the eye */
}
/* "%" column — narrower than the money column since integer percents
   are short strings. Right-aligned + tabular-nums for clean vertical
   digit alignment. */
.vrbi-pt-pct-col[data-v-8d4f8544] {
  min-width: 55px;
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}
/* "Cumul" column — same money-column width and alignment conventions
   as Billing vs. crewing, since both hold integer currency figures of
   comparable scale. */
.vrbi-pt-cumul-col[data-v-8d4f8544] {
  min-width: 115px;
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}
/* "Cumul %" column — narrow like the "%" column since values are
   short integer percents. */
.vrbi-pt-cumul-pct-col[data-v-8d4f8544] {
  min-width: 70px;
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}
/* Separator column — narrow no-content spacer between the derived
   left-block and the user-input right-block. Filled with the shared
   header background colour (#f4f6fb) on EVERY row (thead + tbody) so
   it reads as one continuous divider strip running the height of the
   table. Side borders dropped so no stray verticals cut through the
   strip; a subtle inner shadow on the right edge marks the boundary
   with the user-input block that follows. */
.vrbi-pt-sep-col[data-v-8d4f8544] {
  min-width: 14px;
  width: 14px;
  max-width: 14px;
  padding: 0 !important;
  background: #f4f6fb !important;
  border-right: 1px solid #c5c6c9 !important;
  border-left:  1px solid #c5c6c9 !important;
}
/* "Crewing Invoicing" column — hosts a per-week text input. Same
   money-column width and alignment conventions as Billing vs. crewing
   so header totals visually align across columns. */
.vrbi-pt-crewing-col[data-v-8d4f8544] {
  min-width: 125px;
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  padding: 4px 6px !important;
}
.vrbi-pt-crewing-input[data-v-8d4f8544] {
  box-sizing: border-box;
  width: 100%;
  min-height: 32px;
  padding: 4px 8px;
  background: #fff;
  border: 1px solid #d1d5e8;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  color: #1a1d35;
  text-align: right;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.vrbi-pt-crewing-input[data-v-8d4f8544]:focus {
  border-color: #da2128;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
}
/* Hide the native number-spinner if any browser sneaks one in for
   inputmode="decimal" — matches the pattern used elsewhere in this
   tab's number-input variants. */
.vrbi-pt-crewing-input[data-v-8d4f8544]::-webkit-outer-spin-button,
.vrbi-pt-crewing-input[data-v-8d4f8544]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.vrbi-pt-crewing-input[data-v-8d4f8544] { -moz-appearance: textfield;
}
/* Match state colouring — applied by :class from crewingMatchClass on
   blur (and on popup open for pre-existing values). Green when the
   value equals the same row's Billing vs. crewing figure, red when
   it's higher or lower. Bold to reinforce the signal against the
   default 13px input weight. */
.vrbi-pt-crewing-input--match[data-v-8d4f8544]    { color: #16a34a; font-weight: 700;
}
.vrbi-pt-crewing-input--mismatch[data-v-8d4f8544] { color: #dc2626; font-weight: 700;
}

/* "Total invoicing" column — same money-column width and alignment as
   Billing / Crewing so header totals align across all three currency
   columns in the table. */
.vrbi-pt-total-inv-col[data-v-8d4f8544] {
  min-width: 125px;
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}

/* Project Days Analysis top strip — 3-column layout above the roles
   table:
     • LEFT   → .vrbi-header (existing dates + weeks rows)
     • CENTER → .vrbi-pda-top-center (blank spacer)
     • RIGHT  → .vrbi-pda-top-right (CTA button + helper note)
   Grid keeps the three columns aligned to a hard 1:1:1 rhythm on wide
   screens; on narrow viewports the media query at the bottom of the
   stylesheet collapses it to a single column so the CTA stacks below
   the date fields. */
.vrbi-pda-top-strip[data-v-8d4f8544] {
  display: grid;
  /* Column ratios tuned to the content each column carries:
       LEFT   1fr   — three date-field rows (widest label + value box)
       CENTER 0.5fr — only holds the fit-content-sized Payment Terms /
                     Upfront payment stack + gap pill; the block itself
                     is only ~412px wide, so it needs far less than an
                     equal third of the strip.
       RIGHT  1.5fr — Payment Terms CTA + multi-line helper note. The
                     reclaimed 0.5fr flows here so the note wraps on
                     ~2 lines instead of stretching to a tall 4-line
                     pill next to the button.
     Total still sums to 3fr so proportions read as a natural 1:0.5:1.5
     rhythm rather than fixed pixel widths that break at odd viewports. */
  grid-template-columns: 1fr 0.5fr 1.5fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 20px;
}

/* Right-column cluster — button on top, helper note directly below.
   `align-items: stretch` so the note picks up the column's width and
   wraps neatly across two lines instead of hugging the button width. */
.vrbi-pda-top-right[data-v-8d4f8544] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Center column cluster.
   Three moving parts working together to keep the label+value pairs
   AND the warning pill visually centered within the middle grid cell:
     1. `justify-self: center` — place the flex container in the
        middle of its grid cell (overrides grid's default stretch).
     2. `width: fit-content`   — collapse the container to its widest
        child so `justify-self` has a compact block to place. Without
        this, the container's block-level width stays at the cell width
        and the content sits pinned to its left edge.
     3. `align-items: center`  — inside the flex-column, centre every
        row (and the pill) on the cross axis, so a shorter row like
        the pill still lines up under the label/value block instead
        of hugging the left. The rows themselves share equal widths
        (via each row's inner grid), so this mostly matters for the
        pill row.
   Compound selector so ONLY the PDA top strip's centre column picks
   this up — the LEFT column's `.vrbi-header` stays left-aligned. */
.vrbi-header.vrbi-pda-top-center[data-v-8d4f8544] {
  justify-self: center;
  align-items:  center;
  width:        -moz-fit-content;
  width:        fit-content;
}

/* Primary CTA button — larger and more prominent than the previous
   header-bar variant so it reads clearly against the section body's
   white background. Icon + label side-by-side; brand-red matches the
   red-section accent used elsewhere on the tab. */
.vrbi-pda-cta-btn[data-v-8d4f8544] {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 0;
  border-radius: 8px;
  background: #da2128;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(218, 33, 40, 0.25);
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.05s;
}
.vrbi-pda-cta-btn[data-v-8d4f8544]:hover  { background: #b81a20;
}
.vrbi-pda-cta-btn[data-v-8d4f8544]:active { transform: translateY(1px);
}
.vrbi-pda-cta-btn[data-v-8d4f8544]:focus-visible {
  outline: 3px solid rgba(218, 33, 40, 0.25);
  outline-offset: 2px;
}
.vrbi-pda-cta-btn[data-v-8d4f8544]:disabled {
  opacity: 0.55;
  cursor: default;
  box-shadow: none;
}
/* Read-only escape hatch — DealsheetEditView applies a global
   `pointer-events: none` on every [role="button"] inside a disabled
   tab-fieldset (blocks custom clickables from firing save-triggering
   handlers). This Payment Terms trigger is safe to keep clickable in
   read-only mode because it only opens a popup that shows the values;
   no save fires from opening.
   `!important` is required because the parent view's `:deep()` rule
   compiles with equivalent or higher specificity under Vue's scoped
   CSS — a non-important override loses. Two selector forms cover both
   the fieldset-disabled AND fieldset-non-disabled paths so hot-reloads
   never leave the button in a stuck non-clickable state. */
.tab-fieldset[disabled][data-v-8d4f8544] [role="button"].vrbi-pda-cta-btn--view,[data-v-8d4f8544] .tab-fieldset[disabled] [role="button"].vrbi-pda-cta-btn--view,[data-v-8d4f8544] [role="button"].vrbi-pda-cta-btn--view {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Helper note below the CTA. Light-grey pill — subtle enough not to
   compete with the button, definite enough to be read at a glance. */
.vrbi-pda-note[data-v-8d4f8544] {
  padding: 8px 12px;
  background: #f4f6fb;
  border: 1px solid #d1d5e8;
  border-radius: 6px;
  font-size: 12.5px;
  color: #1a1d35;
  line-height: 1.45;
}

/* Red-tone warning tag in the top strip's center column — surfaces
   when Σ Crewing Invoicing doesn't reconcile against Proposed
   resource pricing. Palette matches the tab's other red-emphasis
   surfaces (VRB Proposition DoA banner uses the same red-50 / red-
   200 range) but sized as an inline pill so it fits the tight
   three-row stack next to the date fields.
   `align-self: flex-end` right-aligns the pill within the flex-
   column parent — since the parent's width is fit-content (= widest
   .vrbi-header-row = 412px), flex-end puts the pill's right edge
   flush with the row's right edge above (i.e. under the "24" / "0%"
   value box). Reads as visually anchored to the numeric column
   rather than floating loose in the middle. */
.vrbi-pda-warn-tag[data-v-8d4f8544] {
  align-self: flex-end;
  padding: 6px 12px;
  background: #fef2f2;                /* red-50  */
  border: 1px solid #fecaca;          /* red-200 */
  border-left: 3px solid #da2128;     /* brand-red accent stripe */
  border-radius: 6px;
  color: #7f1d1d;                     /* red-900 for AAA contrast */
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.2px;
}

/* Payment Terms modal — body + footer wrappers. `.body` reserves a
   comfortable max-height so the freeze-pane table can scroll within
   the popup without stretching the whole modal off-screen. */
.vrbi-pt-modal-body[data-v-8d4f8544] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 70vh;
  overflow: auto;
}
.vrbi-pt-modal-footer[data-v-8d4f8544] {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid #e2e5ee;
}
/* Full-width horizontal divider at the bottom of the "Vendor Data For
   Info" section. Spans both grid columns so the line runs uninterrupted
   under BOTH the LEFT vendor rows and the RIGHT percentage row. Placed
   after the LEFT box's second row (grid-row: 3), which is also the
   first empty row on the RIGHT — the natural boundary between the
   two boxes' content and any future rows added below. */
.vrbi-vi-divider[data-v-8d4f8544] {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 6px 0 0;
  border: 0;
  border-top: 1px solid #d1d5e8;
}

/* ═══════ "VRB Proposition" 50/50 grid ═══════
   Same 50/50 split so the LEFT/RIGHT divide matches all other sections.
   Only the LEFT half has content today — three readonly derived rows;
   the RIGHT half is reserved for future annotations. */
.vrbi-vp-grid[data-v-8d4f8544] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  -moz-column-gap: 20px;
       column-gap: 20px;
  row-gap: 6px;
  align-items: center;
}
.vrbi-vp-row-left[data-v-8d4f8544] {
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  -moz-column-gap: 12px;
       column-gap: 12px;
  align-items: center;
}
/* Full-width consolidated-price band — mirrors the DSS 360 tab's
   Section 7 "dss+ 360 final price" row (`.dss-row--final-price`).
   Spans the entire parent grid (both 50/50 halves) so the total reads
   as the section's headline figure. Green palette matches the DSS 360
   final-price row so the two "final consolidated price" bands read as
   the same visual pattern across tabs.

   Edge-to-edge trick: `.ds-section-body` (defined in DealsheetEditView)
   applies `padding: 20px 18px` around every section's content. To make
   the green background reach the section's rounded outer border like
   the DSS 360 tab does (that tab zeroes the section-body padding via
   `.dss-section-body`), we use negative horizontal margins to break
   out of the padding, then re-add 18px of internal padding so the
   content sits at the same X-position it was at before. */
.vrbi-vp-row-consolidated[data-v-8d4f8544] {
  grid-column: 1 / -1;
  margin: 8px -18px 0;
  padding: 12px 18px;
  background: #eef4ee;
  border-top:    2px solid #3d5c48;
  border-bottom: 2px solid #3d5c48;
  /* Inner 50/50 grid — same track template and gap as the parent
     `.vrbi-vp-grid` so the LEFT / RIGHT halves land under the
     corresponding halves of the rows above. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  -moz-column-gap: 20px;
       column-gap: 20px;
  align-items: center;
}
/* Each half uses the same inner track template as `.vrbi-vp-row-left`
   (label + 160px value). Applied to both halves so the vertical rules
   between sub-columns align across every row in the section, including
   the empty right half. */
.vrbi-vp-row-consolidated__half[data-v-8d4f8544] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  -moz-column-gap: 12px;
       column-gap: 12px;
  align-items: center;
}
.vrbi-vp-row-consolidated__half--empty[data-v-8d4f8544] {
  visibility: hidden;   /* preserves tracks without rendering anything */
}
/* Emphasised label — caps + bold (kept from the source template) but
   the colour flips from red to the dark-green palette used by the
   DSS 360 final-price row so the band reads as one coherent block. */
.vrbi-vp-row-consolidated .vrbi-header-label[data-v-8d4f8544] {
  color: #14532d;
  font-size: 14px;
  font-weight: 800;
}
/* Advisory note stays within the band — same red-tinted body copy
   isn't right here (the band is green), so retint to a slightly
   softer dark-green so it still reads as secondary text but sits
   inside the palette. Note keeps `align-self: stretch` from the
   `--wide` modifier so the prose sentence wraps across the full LEFT
   half width, but flips text-align back to right so wrapping produces
   right-flush lines that line up with the label above. */
.vrbi-vp-row-consolidated .vrbi-oi-label-note[data-v-8d4f8544] {
  color: #166534;
  text-align: right;
}
/* Value cell — keeps the app-wide readonly grey palette
   (`background: #eeeef5`, border `#d1d5e8`, text `#1a1d35`) so it
   matches every other readonly display field in the tab. Only the
   typography scale (15px + weight 800) is bumped so the value still
   reads as the emphasised headline figure inside the green band. */
.vrbi-vp-row-consolidated .vrbi-header-value[data-v-8d4f8544] {
  font-size: 15px;
  font-weight: 800;
}
/* Right column row 1 — label + readonly percentage value. Sits at the
   LEFT edge of the right half (matching where the status pills below
   sit) rather than stretching across the whole right column. `auto`
   sizes the label to its content so the value stays adjacent, and
   `justify-self: start` keeps the whole cluster flush left. */
.vrbi-vp-row-right[data-v-8d4f8544] {
  grid-column: 2;
  display: grid;
  grid-template-columns: auto 160px;
  -moz-column-gap: 12px;
       column-gap: 12px;
  align-items: center;
  justify-self: start;
}
/* Right column status rows (2 and 3) — hold the OK / below-target pill
   left-aligned within the right half. Same left-align convention used
   for the TEE margin pill just above the "Other Costs" section. */
.vrbi-vp-status[data-v-8d4f8544] {
  grid-column: 2;
  justify-self: start;
  align-self: center;
}
/* Row 4 — DoA approval text spans BOTH columns of the outer grid so
   the wording reads as a single-line advisory below the three rows.
   Amber palette (not brand-red) because the section header is already
   red — a light-red banner blended into that chrome and got lost. The
   amber tone is a universal "attention required" cue, sits at strong
   contrast against both the red header above and the white body, and
   doesn't compete with the section's own colour. Left-stripe accent +
   icon + heavier padding lift it visually so all three DoA outcomes
   (CEO / Global / Regional) — including the most common "Regional"
   line — read as important callouts, not decorative footer text. */
.vrbi-vp-doa[data-v-8d4f8544] {
  grid-column: 1 / -1;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #fef2f2;             /* soft red-50, single tone */
  border: 1px solid #fecaca;       /* red-200 hairline */
  color: #991b1b;                  /* red-800 body copy */
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Leading info-circle glyph — pseudo-element so we don't touch the
   template. Softer "advisory" tone than the previous warning triangle,
   matching the standard info-banner styling used elsewhere in the app. */
.vrbi-vp-doa[data-v-8d4f8544]::before {
  content: 'ⓘ';
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
  color: #b91c1c;                  /* red-700 icon */
}

/* ═══════ "Other Income Assumptions" 50/50 grid ═══════
   Same 50/50 split as `.vrbi-oc-grid` above so the LEFT/RIGHT divide
   lines up with the other sections. Merged pill spans rows 4-5;
   proposed-price pill sits in row 6. */
.vrbi-oi-grid[data-v-8d4f8544] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  -moz-column-gap: 20px;
       column-gap: 20px;
  row-gap: 6px;
  align-items: center;
}
.vrbi-oi-row-left[data-v-8d4f8544] {
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  -moz-column-gap: 12px;
       column-gap: 12px;
  align-items: center;
}
/* Full-width green highlight band for Row 6 (PROJECT PRICE PROPOSED)
   when the dss+ 360 asset is NOT selected — this field then IS the
   final proposal price, so it gets the same edge-to-edge "final
   consolidated price" treatment as `.vrbi-vp-row-consolidated` on the
   VRB Proposition section.

   Edge-to-edge background: `.ds-section-body` has `padding: 20px 18px`;
   negative horizontal margins break the band out of that padding, then
   internal 18px padding re-plants the content at the same X-position.
   Section wrapper's `overflow: hidden` + rounded border clips the
   extended background cleanly at the section edges. */
.vrbi-oi-row-final-highlight[data-v-8d4f8544] {
  grid-column: 1 / -1;
  margin: 8px -18px 0;
  padding: 12px 18px;
  background: #eef4ee;
  border-top:    2px solid #3d5c48;
  border-bottom: 2px solid #3d5c48;
  /* Inner 50/50 grid mirrors the parent `.vrbi-oi-grid` (`1fr 1fr` +
     20px gap) so the LEFT / RIGHT half boundaries land under the
     corresponding halves of the rows above and below. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  -moz-column-gap: 20px;
       column-gap: 20px;
  align-items: center;
}
/* Each half uses the same 2-track template as `.vrbi-oi-row-left`
   (label + 160px value box). Applied to both halves so the value
   column stays right-aligned at the same X as every other value on
   the section, including through the empty RIGHT half. */
.vrbi-oi-row-final-highlight__half[data-v-8d4f8544] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  -moz-column-gap: 12px;
       column-gap: 12px;
  align-items: center;
}
.vrbi-oi-row-final-highlight__half--empty[data-v-8d4f8544] {
  visibility: hidden;   /* preserves grid tracks without painting */
}
/* Emphasised label — caps + bold from the source template, but the
   colour flips to the dark-green palette used by the DSS 360 final
   price row / VRB Proposition consolidated row so all three "final
   consolidated price" bands read as the same visual pattern. */
.vrbi-oi-row-final-highlight .vrbi-header-label[data-v-8d4f8544] {
  color: #14532d;
  font-size: 14px;
  font-weight: 800;
}
/* Advisory note stays under the label — retinted from red to a
   softer dark-green so it sits inside the band's palette. Same
   colour treatment as the VRB Proposition consolidated row.
   Explicit `text-align: right` + `align-self: flex-end` so the note
   hugs the same right edge as the label above it — belt-and-braces
   against any inline / block-width surprises inside the wider LEFT
   half column of the highlighted band. */
.vrbi-oi-row-final-highlight .vrbi-oi-label-note[data-v-8d4f8544] {
  color: #166534;
  align-self: flex-end;
  text-align: right;
}
/* Value cell — keeps the app-wide readonly grey palette
   (`background: #eeeef5`, border `#d1d5e8`, text `#1a1d35`) inherited
   from `.vrbi-header-value` / `.vrbi-num-input`. Only the typography
   scale (15px + weight 800) is bumped so the input value still reads
   as the emphasised headline figure inside the green band. */
.vrbi-oi-row-final-highlight .vrbi-header-value[data-v-8d4f8544],
.vrbi-oi-row-final-highlight .vrbi-num-input[data-v-8d4f8544] {
  font-size: 15px;
  font-weight: 800;
}

/* Label + note stack used only by row 6 ("Project Price Proposed
   Including Other Costs"). Two stacked lines right-aligned inside the
   label column: the label on top, a small red clarification note
   ("Excluding DSS+360") on the line below. No box / no strip — the
   user asked for plain red text. */
.vrbi-oi-label-stack[data-v-8d4f8544] {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.vrbi-oi-label-note[data-v-8d4f8544] {
  font-size: 11px;
  font-weight: 500;
  color: #da2128;
  line-height: 1.3;
  text-align: right;
}
/* Wide variant — used for prose sentences that need to wrap cleanly
   (e.g. the Consolidated Proposal Price advisory note). Stretches
   across the whole label track so the sentence gets the full width
   instead of being pinched against the right edge, and reads
   left-aligned so wrapping doesn't produce ragged prose. */
.vrbi-oi-label-note--wide[data-v-8d4f8544] {
  align-self: stretch;
  text-align: left;
  font-size: 11.5px;
  line-height: 1.35;
}
/* Merged pill — spans rows 4-5 in column 2. `align-self: center` centres
   the pill vertically across both rows, i.e. at the boundary between
   "Calculated Project Price" and "Calculated Project Net Margin". */
.vrbi-oi-pill-merged[data-v-8d4f8544] {
  grid-column: 2;
  grid-row: 4 / span 2;
  align-self: center;
  justify-self: start;
}
/* Proposed-price pill — row 6, column 2. */
.vrbi-oi-pill-proposed[data-v-8d4f8544] {
  grid-column: 2;
  grid-row: 6;
  align-self: center;
  justify-self: start;
}
/* Row 7 advisory — static red-tone text, no background / border.
   Anchored to the "Variation in project price" row so the reader can
   pair the message with the derived value on the left. */
.vrbi-oi-blended-note[data-v-8d4f8544] {
  grid-column: 2;
  grid-row: 7;
  align-self: center;
  justify-self: start;
  color: #da2128;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}

/* Price-per-day pill — bold, brand-navy, sits at the leading edge of
   its grid cell in the "Other Income" section (column 3, rows 4-5 for
   merged; row 6 for the proposed variant). Currency-code suffix is
   baked into the display string so we don't need a separate element. */
.vrbi-price-per-day[data-v-8d4f8544] {
  padding: 6px 14px;
  border-radius: 8px;
  background: #f4f6fb;
  border: 1px solid #d1d5e8;
  font-size: 13px;
  font-weight: 700;
  color: #1a1d35;
  letter-spacing: 0.2px;
}

/* Number input variant of .vrbi-header-value — same box outline but
   with a WHITE background (matches other tabs' editable inputs, unlike
   the surrounding read-only cells which use the grey #eeeef5 tone).
   Compound-class selector `.vrbi-header-value.vrbi-num-input` bumps
   specificity above `.vrbi-header-value` alone — necessary because that
   rule is defined LATER in the stylesheet and would otherwise win the
   background-colour cascade.
   `box-sizing: border-box` + `width: 100%` so the input fills its grid
   cell without overflowing (the .vrbi-header-value siblings use
   content-box, but for editable inputs border-box is the standard
   pattern across the codebase). */
.vrbi-header-value.vrbi-num-input[data-v-8d4f8544] {
  box-sizing: border-box;
  width: 100%;
  min-height: 38px; /* match .vrbi-header-value's total (28 min + 8 pad + 2 border) */
  background: #ffffff;
  border: 1px solid #d1d5e8;
  border-radius: 6px;
  font-family: inherit;
  text-align: center;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  /* type="text" so no spinner appears in Chrome/Safari; the two rules
     below suppress the spinner anyway in case a browser adds one for
     inputmode="decimal" fields. */
  -moz-appearance: textfield;
}
.vrbi-header-value.vrbi-num-input[data-v-8d4f8544]::-webkit-outer-spin-button,
.vrbi-header-value.vrbi-num-input[data-v-8d4f8544]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.vrbi-header-value.vrbi-num-input[data-v-8d4f8544]:focus {
  border-color: #da2128;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
}
.vrbi-header-value.vrbi-num-input[data-v-8d4f8544]:disabled {
  background: #f4f6fb;
  color: #9098b0;
  cursor: not-allowed;
}

/* "T&L to be invoice back to client" pill on the right-side row 1.
   Uses TleTab's exact yes/no palette so the two tabs read as one
   story — red tint when the client is invoiced back, green tint when
   dss+ absorbs the T&L cost. */
.vrbi-tl-pill[data-v-8d4f8544] {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border: 1px solid transparent;
}
.vrbi-tl-pill--yes[data-v-8d4f8544] {
  background: #fee2e2;
  color:      #b91c1c;
  border-color: #f87171;
}
.vrbi-tl-pill--no[data-v-8d4f8544] {
  background: #dcfce7;
  color:      #166534;
  border-color: #86efac;
}

/* Handling-fee warning — uppercase, brand-red, centred inside the
   middle block. Wraps naturally across multiple visual lines within the
   170px block height. */
.vrbi-warning-text[data-v-8d4f8544] {
  color: #da2128;             /* brand red — matches other .cfc-fin-red / ds-required uses */
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.5;
  padding: 4px 8px;
}

/* Wraps a number input + a static "%" suffix on the same row without
   changing the input's grid slot. `width: 100%` on the container makes
   sure it fills the 160px value column so the input's right border
   ends at exactly the same x as the sibling value cells above. Suffix
   sits absolutely-positioned INSIDE the input's padding-right area so
   it doesn't push the box wider or spill outside. */
.vrbi-num-with-suffix[data-v-8d4f8544] {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.vrbi-num-with-suffix .vrbi-num-input[data-v-8d4f8544] {
  /* padding-right leaves room for the "%" character inside the box. */
  padding-right: 24px;
}
.vrbi-num-suffix[data-v-8d4f8544] {
  position: absolute;
  right: 10px;
  font-size: 12.5px;
  color: #1a1d35;
  font-weight: 600;
  pointer-events: none;
}

/* Resource-margin status strip on the RIGHT box. Row heights + gap +
   top margin all match the LEFT `.vrbi-tee-summary` so the middle row
   (holding the pill) aligns exactly with "Calculated resource margin"
   on the left. Only the middle row renders content. */
.vrbi-margin-status-strip[data-v-8d4f8544] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Pin to bottom of the (stretched) right box so the pill rows end at
     the same Y as the sibling `.vrbi-tee-summary` on the left — see the
     `.vrbi-boxes { align-items: stretch }` comment above. `padding-top`
     replaces the former `margin-top: 16px` so the visual gap between
     the bordered grid and the strip is preserved. */
  margin-top: auto;
  padding: 16px 12px 0;
}
.vrbi-margin-status-row[data-v-8d4f8544] {
  /* Fixed height (was min-height) + border-box so this row is EXACTLY
     the same rendered height as `.vrbi-header-value` on the left strip,
     regardless of pill content or subpixel padding drift. Both are 38px
     including padding — the row heights and 6px gap between them then
     produce identical strip layouts on both sides. */
  height: 38px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 0;
}
/* Status pill — centred, coloured by state. Sizing echoes the KPI cards
   TEE uses so the two feel like a coherent family. */
.vrbi-margin-status[data-v-8d4f8544] {
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vrbi-margin-status--ok[data-v-8d4f8544] {
  background: #dcfce7;   /* green-100 */
  color:      #166534;   /* green-800 */
  border: 1px solid #86efac;
}
.vrbi-margin-status--below[data-v-8d4f8544] {
  background: #fef3c7;   /* amber-100 */
  color:      #92400e;   /* amber-800 */
  border: 1px solid #fcd34d;
}
.vrbi-header-row[data-v-8d4f8544] {
  display: grid;
  grid-template-columns: 240px 160px;
  gap: 12px;
  align-items: center;
}
.vrbi-header-label[data-v-8d4f8544] {
  font-size: 12.5px;
  color: #1a1d35;
  font-weight: 500;
  text-align: right;
}
.vrbi-header-value[data-v-8d4f8544] {
  /* Fixed 38px height + border-box so this value cell renders at exactly
     the same height as the sibling `.vrbi-margin-status-row` on the
     right strip. Any subpixel drift from `min-height` vs actual content
     height was breaking the row-by-row pill alignment. */
  height: 38px;
  box-sizing: border-box;
  padding: 4px 10px;
  background: #eeeef5;
  border: 1px solid #d1d5e8;
  border-radius: 6px;
  font-size: 12.5px;
  color: #1a1d35;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
}

/* ═══════ Two boxes side-by-side ═══════
   Shared row-height variables so left box's rows align exactly with
   right box's rows regardless of content inside each cell:
     --vrbi-head-h     — main header row (dark navy title bar)
     --vrbi-subhead-h  — 2nd header row (left: spacer; right: legend)
     --vrbi-row-h      — one data row (one role) */
.vrbi-boxes[data-v-8d4f8544] {
  display: flex;
  gap: 20px;
  /* `stretch` — both boxes grow to the taller sibling's height so the
     KPI strip on the left and the status-pill strip on the right can
     both pin to the bottom (via `margin-top: auto` below) and end at
     the same Y. This closes the row-by-row misalignment where the
     right-side pills drifted below their corresponding left-side rows
     when internal grid heights differed by a few pixels. */
  align-items: stretch;
  flex-wrap: wrap;
  --vrbi-head-h:    44px;
  --vrbi-subhead-h: 56px;
  --vrbi-row-h:     34px;
}
.vrbi-box[data-v-8d4f8544] {
  background: #ffffff;
  border-radius: 10px;
  padding: 0;
  flex: 1 1 380px;
  min-width: 320px;
  /* Flex column so the bottom strip can pin via `margin-top: auto`. */
  display: flex;
  flex-direction: column;
}

/* ═══════ Left box — 4-column × (2 header rows + N data rows) grid ═══════
   Col 1: role name
   Col 2: pyramid LEFT sub-cell (merged across each block via `grid-row: span N`)
   Col 3: pyramid RIGHT sub-cell (per row)
   Col 4: number of days for project margin */
.vrbi-left-grid[data-v-8d4f8544] {
  display: grid;
  grid-template-columns:
    minmax(160px, 1.4fr)
    minmax(50px,  0.5fr)
    minmax(50px,  0.5fr)
    minmax(140px, 1.2fr);
  border: 1px solid #d1d5e8;
  border-radius: 10px;
  overflow: hidden;
}
.vrbi-left-head[data-v-8d4f8544] {
  background: #f4f6fb;
  color: #1a1d35;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 10px 12px;
  height: var(--vrbi-head-h);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid #c5c6c9;
  border-bottom: 1px solid #c5c6c9;
}
/* No border on the last visible header (col 4). The PYRAMID header
   spans cols 2-3, so its own border-right (on col 3's edge) is the
   internal-only divider before NUMBER OF DAYS. */
.vrbi-left-head--last[data-v-8d4f8544] { border-right: none;
}

/* Second header row — matches right box's legend height. */
.vrbi-left-subhead[data-v-8d4f8544] {
  height: var(--vrbi-subhead-h);
  background: #f4f6fb;
  border-right: 1px solid #eeeef5;
  border-bottom: 1px solid #eeeef5;
}
.vrbi-left-subhead--last[data-v-8d4f8544] { border-right: none;
}
.vrbi-left-cell[data-v-8d4f8544] {
  height: var(--vrbi-row-h);
  padding: 6px 12px;
  font-size: 12.5px;
  color: #1a1d35;
  border-top: 1px solid #eeeef5;
  border-right: 1px solid #eeeef5;
  display: flex;
  align-items: center;
  background: #ffffff;
  box-sizing: border-box;
}
.vrbi-left-cell--role[data-v-8d4f8544] {
  font-weight: 500;
  justify-content: flex-start;
  background: #f4f6fb;
}
/* Merged block-level pyramid-LEFT cell. `height: auto` so grid-row: span
   N controls the actual height, not the per-row --vrbi-row-h. White
   background per spec — the block merge is still visually obvious from
   the missing internal borders across the spanned rows. Shows each
   block's share of the margin-days grand total. */
.vrbi-left-cell--pyramid-left[data-v-8d4f8544] {
  height: auto;
  padding: 4px 6px;
  justify-content: center;
  background: #ffffff;
  font-size: 13px;
  font-weight: 700;
  color: #4e5a82;
}
.vrbi-left-cell--pyramid-leadership[data-v-8d4f8544] {
  background: #ffffff;
}
/* Pyramid RIGHT sub-column — per-row cells with a white background so
   the value area reads distinctly from the role/legend off-white tones.
   Shows each role's share (%) of the margin-days grand total. */
.vrbi-left-cell--pyramid-right[data-v-8d4f8544] {
  background: #ffffff;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #4e5a82;
}
/* Days column — last visible column, so no internal right border. White
   background per spec (contrasts against the role name and pyramid-left
   merged block which use the off-white/tinted backgrounds). */
.vrbi-left-cell--days[data-v-8d4f8544] {
  justify-content: center;
  background: #ffffff;
  font-weight: 600;
  border-right: none;
}

/* ── Row colour palettes: management (leadership) vs other roles ──
   Users had trouble telling the two groups apart because internal
   borders on the LEFT box are intentionally muted. Tint the role-name
   cell strongly (bold, dark text on a saturated pastel) and the value
   cells (pyramid-right + days) with the same hue at a paler tint so
   the whole row scans as one band. Same specificity as the base cell
   rules, but declared later — the row modifier wins. */

/* Management (leadership) rows — warm red palette */
.vrbi-left-cell--row-mgmt[data-v-8d4f8544] {
  background: #fee2e2;
  color: #991b1b;
  font-weight: 700;
}
.vrbi-left-cell--row-mgmt-value[data-v-8d4f8544] {
  background: #fef2f2;
  color: #991b1b;
}

/* Other (non-leadership) rows — cool blue palette */
.vrbi-left-cell--row-other[data-v-8d4f8544] {
  background: #dbeafe;
  color: #1e40af;
  font-weight: 700;
}
.vrbi-left-cell--row-other-value[data-v-8d4f8544] {
  background: #eff6ff;
  color: #1e40af;
}

/* ── Footer rows on the LEFT box ──
   Row 1 (footer-spacer): empty divider row that aligns with the right
   box's per-type percentage row. White per spec.
   Row 2 (total-label / total-row / total-value): TOTAL label + grand
   total of the days column. Aligns with the right box's grand-total.
   Also white per spec — visual weight comes from bold typography, not
   from a tinted background. */
.vrbi-left-cell--footer-spacer[data-v-8d4f8544] {
  background: #ffffff;
  border-right: 1px solid #eeeef5;
}
.vrbi-left-cell--total-label[data-v-8d4f8544] {
  background: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 11.5px;
  justify-content: flex-start;
  color: #1a1d35;
}
.vrbi-left-cell--total-row[data-v-8d4f8544] {
  background: #ffffff;
}
.vrbi-left-cell--total-value[data-v-8d4f8544] {
  background: #ffffff;
  font-weight: 700;
  font-size: 13px;
  justify-content: center;
  color: #1a1d35;
  border-right: none;
}

/* ═══════ Right box — header + legend + bar rows ═══════
   Border / radius / overflow live on the INNER `.vrbi-right-grid` (which
   wraps only the bordered table portion) so the margin-status strip
   below it sits OUTSIDE the bordered card. Mirrors the LEFT box's
   `.vrbi-left-grid` + `.vrbi-tee-summary` split.
   Each of the three row types uses the same CSS variable as the left
   box's corresponding row so the two grids stay in perfect step. */
/* `.vrbi-box--right` flex column now inherited from base `.vrbi-box`. */
.vrbi-right-grid[data-v-8d4f8544] {
  display: flex;
  flex-direction: column;
  border: 1px solid #d1d5e8;
  border-radius: 10px;
  overflow: hidden;
}
.vrbi-right-header[data-v-8d4f8544] {
  background: #f4f6fb;
  color: #1a1d35;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 10px 12px;
  text-align: center;
  height: var(--vrbi-head-h);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #c5c6c9;
}
/* Legend row — same grid columns as the data rows below so each chip
   sits directly above its column. No overflow-scroll: the legend
   compresses to fit the column width, with `min-width: 0` letting the
   type label truncate cleanly on narrow layouts. */
.vrbi-type-legend[data-v-8d4f8544] {
  display: grid;
  gap: 0;
  padding: 0;
  background: #f4f6fb;
  border-bottom: 1px solid #eeeef5;
  height: var(--vrbi-subhead-h);
  align-items: center;
}
/* Two-line cell: chip+label on top, column sum on the bottom. */
.vrbi-type-legend-cell[data-v-8d4f8544] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 8px;
  font-size: 12px;
  color: #1a1d35;
  border-right: 1px solid #eeeef5;
  height: 100%;
  min-width: 0;
}
.vrbi-type-legend-cell[data-v-8d4f8544]:last-child { border-right: none;
}
.vrbi-type-legend-label[data-v-8d4f8544] {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.vrbi-type-swatch[data-v-8d4f8544] {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
  flex-shrink: 0;
}
.vrbi-type-label[data-v-8d4f8544] {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vrbi-type-legend-sum[data-v-8d4f8544] {
  font-size: 12.5px;
  font-weight: 700;
  color: #1a1d35;
  line-height: 1;
  /* Reserve consistent height even for blank cells so the row baseline
     stays stable across columns with mixed data. */
  min-height: 14px;
}

/* Data rows — one fixed-width cell per type, populated cells coloured,
   empty cells hatched-blank. Each row is its own CSS grid so the
   `gridTemplateColumns` inline style (set from the component) reliably
   sync's cell widths with the legend row above. */
.vrbi-bars[data-v-8d4f8544] {
  display: flex;
  flex-direction: column;
}
.vrbi-bar-row[data-v-8d4f8544] {
  height: var(--vrbi-row-h);
  display: grid;
  gap: 0;
  border-top: 1px solid #eeeef5;
  background: #ffffff;
  box-sizing: border-box;
}
.vrbi-bar-cell[data-v-8d4f8544] {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #eeeef5;
  padding: 0 4px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
}
.vrbi-bar-cell[data-v-8d4f8544]:last-child { border-right: none;
}
.vrbi-bar-cell--filled[data-v-8d4f8544] {
  color: #ffffff;
}
.vrbi-bar-cell-value[data-v-8d4f8544] {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.vrbi-bar-cell--empty[data-v-8d4f8544] {
  background: repeating-linear-gradient(
    45deg,
    #f4f6fb,
    #f4f6fb 4px,
    #eeeef5 4px,
    #eeeef5 8px
  );
}

/* ── Footer rows on the RIGHT box ──
   Row 1 (percent): white bg per spec — italic centered %, one cell per
   type column. Matches the LEFT box's white footer spacer row.
   Row 2 (grand-total): single merged cell spanning every type column.
   Bold, centered, off-white bg — kept slightly tinted to visually
   emphasise the grand total (LEFT box's matching TOTAL row uses white
   per spec, so the two boxes intentionally diverge here). */
.vrbi-bar-row--percent[data-v-8d4f8544] {
  background: #ffffff;
}
.vrbi-percent-cell[data-v-8d4f8544] {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #eeeef5;
  font-size: 12px;
  font-weight: 600;
  color: #4e5a82;
  font-style: italic;
  padding: 0 4px;
}
.vrbi-percent-cell[data-v-8d4f8544]:last-child { border-right: none;
}
.vrbi-bar-row--grand-total[data-v-8d4f8544] {
  height: var(--vrbi-row-h);
  background: #f4f6fb;
  border-top: 1px solid #eeeef5;
  box-sizing: border-box;
}
.vrbi-grand-total-cell[data-v-8d4f8544] {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #1a1d35;
}

/* ═══════ Mobile — stack boxes vertically ═══════ */
@media (max-width: 900px) {
.vrbi-boxes[data-v-8d4f8544] { flex-direction: column;
}
.vrbi-box[data-v-8d4f8544]   { flex-basis: auto;
}
.vrbi-header-row[data-v-8d4f8544] { grid-template-columns: 1fr 1fr;
}
.vrbi-header-label[data-v-8d4f8544] { text-align: left;
}
  /* Top strip collapses to a single column so the CTA + note stack
     below the date fields instead of squeezing into an unusable
     narrow third-column. The center spacer collapses to zero height. */
.vrbi-pda-top-strip[data-v-8d4f8544]   { grid-template-columns: 1fr; gap: 16px;
}
.vrbi-pda-top-center[data-v-8d4f8544]  { display: none;
}
}

/* Fixed height so the chart is legible; parent controls width via
   the outer .ds-section-body padding. Aspect ratio is disabled on
   the Chart.js side (`maintainAspectRatio: false`) so the canvas
   fills this wrapper exactly. */
.ds-cpo-chart-wrap[data-v-78be7319] {
  position: relative;
  width: 100%;
  height: 320px;
}

.ds-cpo-chart-wrap[data-v-4d2d1b6f] {
  position: relative;
  width: 100%;
  height: 320px;
}

/* Section body override — the shared `.ds-section-body` pads at 20px
   which is right for form grids but leaves the table looking floaty.
   Tighten the vertical padding so the header, table and any future
   summary rows read as one cohesive block. */
.ds-cpo-section-body[data-v-56fd72d1] {
  padding: 14px 18px;
}

/* Empty state when the OIS project dates aren't set yet — friendly
   nudge back to OIS rather than a blank table with a header. */
.ds-cpo-empty[data-v-56fd72d1] {
  padding: 24px 12px;
  text-align: center;
  color: #6b7280;
  font-size: 13px;
}

/* Scroll wrapper so the table can grow past the viewport on narrow
   screens without breaking the section layout. */
.ds-cpo-table-wrap[data-v-56fd72d1] {
  width: 100%;
  overflow-x: auto;
}
.ds-cpo-table[data-v-56fd72d1] {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  color: #111827;
}

/* Header cells — centre-aligned, matching TPV's grid-style borders
   (`.tpv-grid thead th`). Right + bottom borders both #c5c6c9 so the
   header perimeter reads distinctly from tbody's lighter separators. */
.ds-cpo-th[data-v-56fd72d1] {
  padding: 10px 12px;
  background: #f4f6fb;
  color: #4e5a82;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #c5c6c9;
  border-right:  1px solid #c5c6c9;
  white-space: nowrap;
}
/* Drop the right border on the last header cell so the outermost
   edge is drawn by the section wrapper alone — avoids the double-
   line seam that would otherwise appear at the section's right edge. */
.ds-cpo-th[data-v-56fd72d1]:last-child {
  border-right: none;
}
.ds-cpo-th--week[data-v-56fd72d1] {
  width: 88px;
}

/* Body cells — right + bottom borders in the lighter #eef0f5 so
   grid lines are present but don't compete with the header divider.
   Same pattern as `.tpv-grid tbody td`. */
.ds-cpo-td[data-v-56fd72d1] {
  padding: 9px 12px;
  border-bottom: 1px solid #eef0f5;
  border-right:  1px solid #eef0f5;
  vertical-align: middle;
}
.ds-cpo-td[data-v-56fd72d1]:last-child {
  border-right: none;
}
.ds-cpo-td--week[data-v-56fd72d1] {
  font-weight: 600;
  color: #191a37;
  white-space: nowrap;
}
.ds-cpo-td--num[data-v-56fd72d1] {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ds-cpo-td--neg[data-v-56fd72d1] {
  color: #b91c1c;   /* red-700 — signals negative cash weeks at a glance */
}

/* Zebra-stripe on tbody rows so tall week counts stay scannable. */
.ds-cpo-table tbody tr:nth-child(even) .ds-cpo-td[data-v-56fd72d1] {
  background: #fafbfd;
}
.ds-cpo-table tbody tr:last-child .ds-cpo-td[data-v-56fd72d1] {
  border-bottom: none;
}
@media (max-width: 640px) {
.ds-cpo-th[data-v-56fd72d1], .ds-cpo-td[data-v-56fd72d1] { padding: 8px 10px;
}
.ds-cpo-th--week[data-v-56fd72d1]      { width: 64px;
}
}

/* Section body — inherit the shared `.ds-section-body` padding, then
   push a little vertical rhythm between the attendee grid, the
   divider, and the owners grid so the two sub-sections read as
   related-but-distinct blocks. */
.ds-section-body[data-v-b4418e77] {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Divider between attendee grid and owner grid. Matches the module's
   soft-line separator (`.osq-sub-divider`) so it stays subtle. */
.vrba-sub-divider[data-v-b4418e77] {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 4px 0;
}

/* Attendee 3-col grid — inherits `.ds-grid` sizing from the shared
   layout; no override needed beyond the wrapper class for future
   targeted tweaks. */
.vrba-attendee-grid[data-v-b4418e77] {
  /* placeholder for tab-specific tuning later */
}

/* Owners grid — five rows, four columns:
     col 1 (label)             — auto width to fit longest label,
                                 right-aligned so labels sit against
                                 their inputs cleanly.
     col 2 (user input)        — 1fr, BaseInput.
     col 3 (per-row readonly)  — 1fr, BaseInput on ALL five rows.
     col 4 (merged readonly)   — 1fr, one BaseInput spanning rows
                                 3-5 (contributor 1..3). Rows 1 & 2
                                 leave col 4 empty (no cell at all). */
.vrba-owners-grid[data-v-b4418e77] {
  display: grid;
  grid-template-columns: minmax(180px, max-content) 1fr 1fr 1fr;
  gap: 12px 16px;
  align-items: start;
}
/* Explicit `grid-column: 1` — critical for correct row placement.
   Without it, the default row-major auto-flow fills row 1 fully
   (all 4 columns) before moving to row 2, so the 4th DOM item
   (which is meant to start row 2) leaks into row 1's empty col-4
   slot. Pinning labels to col 1 forces each label to start a new
   row: item 1 lands r1c1; item 4 finds col 1 next empty at r2c1;
   item 7 at r3c1; etc. Subsequent input + readonly for each row
   then auto-flow into c2 and c3 of that same row. */
.vrba-owners-label[data-v-b4418e77] {
  grid-column: 1;
  font-size: 13px;
  font-weight: 600;
  color: #4e5a82;
  text-align: right;
  padding-top: 8px;   /* aligns with the input's vertical centre */
  white-space: nowrap;
}
/* Advisory note — sits at r1c3-4 so the text left-edge aligns with
   the per-row readonly column (col 3). The two `.vrba-owners-spacer`
   divs before it fill r1c1 and r1c2 in DOM order, pushing the
   auto-flow cursor into col 3 by the time the note is placed.
   `grid-column: 3 / -1` then spans the remaining two columns.
   Red tone matches the OSQ CRM Win Prob note. */
.vrba-owners-spacer[data-v-b4418e77] {
  /* Invisible placeholder — occupies a grid cell only for layout;
     no visual, no interaction. */
}
.vrba-owners-note[data-v-b4418e77] {
  grid-column: 3 / -1;
  grid-row: 1;
  color: #b91c1c;          /* red-700 */
  font-size: 13px;
  line-height: 1.4;
  padding: 4px 0 6px;
}
.vrba-owners-note strong[data-v-b4418e77] {
  font-weight: 700;
  margin-right: 4px;
}
.vrba-owners-note em[data-v-b4418e77] {
  font-style: italic;
  font-weight: 400;
  color: #b91c1c;
}

/* Merged readonly — sits in column 4 and spans rows 4-6 explicitly.
   Row 1 is now the note; owner data begins at row 2, so the merged
   cell covering contributor 1..3 starts at row 4. Anchoring the
   start line explicitly avoids auto-placement picking a wrong slot.
   `align-self: stretch` fills the full row-span height so the
   field visually matches the three sibling inputs on its left. */
.vrba-owners-merged[data-v-b4418e77] {
  grid-column: 4;
  grid-row: 4 / span 3;
  align-self: stretch;
}
.vrba-owners-merged[data-v-b4418e77] input {
  height: 100%;
  min-height: 96px;
  /* Centre the SUM value horizontally + vertically inside the tall merged
     box and lift its typography so it reads as a headline figure rather
     than a normal readonly input value. Matches the emphasis the user
     asked for in the col-4 merged cell (Owner + Owner 2 + Contrib 1-3). */
  text-align: center;
  font-size: 20px;
  font-weight: 700;
}

/* Mobile — collapse to single column so labels stack above their
   inputs and the merged cell stops row-spanning (each field claims
   its own row for legibility on narrow widths). */
@media (max-width: 640px) {
.vrba-owners-grid[data-v-b4418e77] {
    grid-template-columns: 1fr;
}
.vrba-owners-spacer[data-v-b4418e77] {
    display: none;        /* no need to reserve r1c1/c2 in a single-col layout */
}
.vrba-owners-note[data-v-b4418e77] {
    grid-column: 1;
}
.vrba-owners-label[data-v-b4418e77] {
    text-align: left;
    padding-top: 0;
}
.vrba-owners-merged[data-v-b4418e77] {
    grid-column: 1;
    grid-row: auto;
}
.vrba-owners-merged[data-v-b4418e77] input {
    min-height: unset;
}
}

/* ═══════ Recommended & Approval Limit — 50/50 grid ═══════
   Mirrors VRB-I's `.vrbi-vp-grid` layout so the readonly values on
   the left align vertically with the user-input column on the right.
   LEFT rows have their own two-column layout (label + value box);
   RIGHT rows hold one BaseInput each (rows 2 & 3 only). */
.vrba-approval-grid[data-v-b4418e77] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  -moz-column-gap: 20px;
       column-gap: 20px;
  row-gap: 8px;
  align-items: center;
}
.vrba-approval-row-left[data-v-b4418e77] {
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  -moz-column-gap: 12px;
       column-gap: 12px;
  align-items: center;
}
/* Vertical breathing space above the second cluster of readonly rows
   (T&L / Non-recoverable / Holdover / Extended Travel / Other / WHT).
   Applied only to the FIRST row of that group so the whole group
   still stacks tightly below the gap. Kept as a margin (not padding)
   so the grid track auto-sizes to include it — with explicit
   `grid-row` values on every row, this simply expands row 6's track. */
.vrba-approval-row-left--gap[data-v-b4418e77] {
  margin-top: 20px;
}
/* Same visual break applied to the RIGHT-side input rows so
   left+right of a `--gap`-marked row stay vertically aligned. */
.vrba-approval-row-right--gap[data-v-b4418e77] {
  margin-top: 20px;
}
.vrba-approval-row-right[data-v-b4418e77] {
  grid-column: 2;
  display: grid;
  grid-template-columns: 160px;   /* input matches the LEFT value box width */
  justify-content: start;         /* left-aligned in the right half */
}
/* Hide the native number-input spinner controls on every Approval-limit
   input (Blended Rate / Resource Margin / Project Margin / Payment Terms /
   Upfront payment / #weeks cash position negative). The spinner arrows are
   visual noise on values that are already narrow and easy to type — users
   want the field to read as a plain text-number cell.
     WebKit / Blink → hide the pseudo-elements + zero their margin
     Firefox         → `appearance: textfield` on the input itself
   `:deep()` pierces the shared BaseInput's scoped styles. */
.vrba-approval-row-right[data-v-b4418e77] input[type="number"]::-webkit-outer-spin-button,
.vrba-approval-row-right[data-v-b4418e77] input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.vrba-approval-row-right[data-v-b4418e77] input[type="number"] {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
          appearance: textfield;
}
/* Warning-variant row — used for the handling-fee text alongside the
   T&L expenses readonly. Overrides the 160px input-column so the long
   uppercase message can breathe and wrap naturally. */
.vrba-approval-row-right--warning[data-v-b4418e77] {
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
}
.vrba-warning-text[data-v-b4418e77] {
  color: #da2128;                /* brand red — matches VRB-I .vrbi-warning-text */
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.5;
  padding: 4px 8px;
  display: inline-block;
}
/* Full-width row (Other commercial aspects) — spans the entire
   50/50 outer grid via `grid-column: 1 / -1`. Internally uses a
   two-track layout: col 1 mirrors the LEFT row's label width; col 2
   is a wide textarea that reaches all the way to the right edge of
   the RIGHT half. */
.vrba-approval-row-full[data-v-b4418e77] {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(180px, max-content) minmax(0, 1fr);
  -moz-column-gap: 12px;
       column-gap: 12px;
  align-items: start;
}
.vrba-approval-row-full .vrba-approval-label[data-v-b4418e77] {
  padding-top: 8px;    /* line the label up with the textarea's top */
  white-space: normal;
}
.vrba-approval-row-full[data-v-b4418e77] textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
}
.vrba-approval-label[data-v-b4418e77] {
  font-size: 13px;
  font-weight: 600;
  color: #4e5a82;
  text-align: right;
}
/* Label + secondary-note stack — used on rows that carry a small
   clarifier under the primary label (e.g. "(Excluding dss+ 360)" or
   the Consolidated Proposal Price advisory). Mirrors the VRB-I
   `.vrbi-oi-label-stack` pattern so both tabs read consistently. */
.vrba-approval-label-stack[data-v-b4418e77] {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.vrba-approval-label-note[data-v-b4418e77] {
  font-size: 11px;
  font-weight: 500;
  color: #da2128;
  line-height: 1.3;
  text-align: right;
}
/* Wide variant for prose sentences (Consolidated Proposal Price note).
   Stretches across the label track and reads left-aligned so wrapping
   produces clean prose instead of ragged right-aligned lines. */
.vrba-approval-label-note--wide[data-v-b4418e77] {
  align-self: stretch;
  text-align: left;
  font-size: 11.5px;
  line-height: 1.35;
}
/* Consolidated Proposal Price emphasis — matches the VRB-I VRB
   Proposition treatment: uppercase, bold, red. Wins the specificity
   contest against `.vrba-approval-label` (same 1-class) via source
   order — this rule is declared after the base. */
.vrba-approval-label--consolidated[data-v-b4418e77] {
  text-transform: uppercase;
  font-weight: 700;
  color: #da2128;
  letter-spacing: 0.3px;
}
/* Readonly value cell on the LEFT — renders as `<BaseInput readonly>` so
   height (34px), padding, border, radius, and the readonly grey palette
   all come from the shared `.bp-input` / `.bp-input--readonly` styles.
   BaseInput's class fallthrough puts `.vrba-approval-value` on the outer
   `.bp-form-group`, so we target the inner `<input>` for the overrides
   that make it read as a numeric display: right-aligned, tabular figures,
   heavier weight. Everything else inherits from the shared package. */
.vrba-approval-value .bp-input[data-v-b4418e77] {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #191a37;
}

/* ═══════ Edge-to-edge "final consolidated price" highlight band ═══════
   Used on two rows in this section depending on the OBI dss+ 360 asset
   selection:
     - Row 15 (PROJECT PRICE PROPOSED) — when dss+ 360 is NOT selected,
       this field IS the final proposal price.
     - Row 17 (Consolidated Proposal Price) — when dss+ 360 IS selected,
       this SUM is the final price.
   Mirrors the VRB-I `.vrbi-oi-row-final-highlight` /
   `.vrbi-vp-row-consolidated` recipe so all three "final price" bands
   read as the same visual pattern across tabs.

   Edge-to-edge background: the shared unscoped `.ds-section-body`
   (defined in DealsheetEditView) applies `padding: 20px 18px`. Negative
   horizontal margins break the band out of that padding, then internal
   18px padding re-plants content at its original X. Section wrapper's
   `overflow: hidden` + rounded border clips the extended background
   cleanly at the section edges. */
.vrba-approval-row-final-highlight[data-v-b4418e77] {
  grid-column: 1 / -1;
  margin: 20px -18px 0;
  padding: 12px 18px;
  background: #eef4ee;
  border-top:    2px solid #3d5c48;
  border-bottom: 2px solid #3d5c48;
  /* Inner 50/50 grid mirrors the parent `.vrba-approval-grid` (`1fr 1fr`
     + 20px gap) so the LEFT / RIGHT half boundaries line up with the
     rows above and below. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  -moz-column-gap: 20px;
       column-gap: 20px;
  align-items: center;
}
/* Each half uses the same 2-track template as `.vrba-approval-row-left`
   (label + 160px value). Applied to both halves so the value column
   stays right-aligned at the same X as every other value on the
   section, including through the empty RIGHT half. */
.vrba-approval-row-final-highlight__half[data-v-b4418e77] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  -moz-column-gap: 12px;
       column-gap: 12px;
  align-items: center;
}
.vrba-approval-row-final-highlight__half--empty[data-v-b4418e77] {
  visibility: hidden;   /* preserves grid tracks without painting */
}
/* Label — the caps + bold treatment from `.vrba-approval-label--consolidated`
   is reused, but inside the band the colour flips to the dark-green
   palette matching the DSS 360 final-price row / VRB-I consolidated
   band. This selector has higher specificity than the plain
   `.vrba-approval-label--consolidated { color: #da2128 }` above so it
   wins the cascade even though the modifier class is still applied. */
.vrba-approval-row-final-highlight .vrba-approval-label[data-v-b4418e77] {
  color: #14532d;
  font-size: 14px;
  font-weight: 800;
}
.vrba-approval-row-final-highlight .vrba-approval-label--consolidated[data-v-b4418e77] {
  color: #14532d;   /* override the base modifier's red */
}
/* Advisory note — retinted from red to a softer dark-green so it sits
   inside the band's palette. Explicit right-alignment + flex-end so it
   hugs the same right edge as the label above, even inside the wider
   LEFT-half column produced by the band. */
.vrba-approval-row-final-highlight .vrba-approval-label-note[data-v-b4418e77] {
  color: #166534;
  align-self: flex-end;
  text-align: right;
}
/* Wide-variant note keeps `align-self: stretch` (from the base
   `--wide` modifier) so a long prose sentence wraps across the full
   LEFT-half width, but flips text-align back to right so the wrapped
   lines line up with the label above. */
.vrba-approval-row-final-highlight .vrba-approval-label-note--wide[data-v-b4418e77] {
  color: #166534;
  text-align: right;
}
/* Value cell inside the highlight band — keeps the shared readonly
   `.bp-input` palette (grey bg, dark text) so it matches every other
   readonly display field in the tab. Emphasis is typographic only —
   bumped to 15px / weight 800 to read as the headline figure inside
   the green band. Selector targets the inner `<input>` because
   BaseInput's fallthrough puts `.vrba-approval-value` on the outer
   `.bp-form-group`, not the input itself. */
.vrba-approval-row-final-highlight .vrba-approval-value .bp-input[data-v-b4418e77] {
  color: #191a37;
  font-size: 15px;
  font-weight: 800;
}

/* Column headers ("Recommended" / "Approval limit") — sit at the top
   of the two-half grid. Each is a sub-grid mirroring its row's
   internal columns so the header text lands DIRECTLY over the value
   / input cell below, not over the label column.
     - LEFT header: sub-grid `label 1fr` + `value 160px`; the header
       text sits in the 160px column (col 2), centred to match the
       value box below.
     - RIGHT header: sub-grid `160px`, left-justified in the RIGHT
       half — matches where the BaseInput sits. */
.vrba-approval-header-left[data-v-b4418e77] {
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  -moz-column-gap: 12px;
       column-gap: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid #d1d5e8;
}
.vrba-approval-header-right[data-v-b4418e77] {
  grid-column: 2;
  display: grid;
  grid-template-columns: 160px;
  justify-content: start;
  padding-bottom: 4px;
  border-bottom: 1px solid #d1d5e8;
}
.vrba-approval-header-text[data-v-b4418e77] {
  font-size: 11px;
  font-weight: 700;
  color: #4e5a82;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-align: center;
}

/* Justification row — only rendered when Proposed resource margin
   drops below 60%. Sits on the LEFT side and uses a wider value
   track than the readonly rows above so the textarea has room to
   breathe (rows 2-4 use 160px because they hold small numeric
   boxes; here we let the textarea grow). */
.vrba-approval-row-justify[data-v-b4418e77] {
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 2fr);
  -moz-column-gap: 12px;
       column-gap: 12px;
  align-items: start;
}
.vrba-approval-row-justify .vrba-approval-label[data-v-b4418e77] {
  padding-top: 8px;    /* align with the top of the textarea */
  white-space: normal; /* allow the long "< 60%" label to wrap */
}
/* Red asterisk marker — rendered only when the mandatory-check config
   flags this field as required (i.e. isLowMarginProposal === 'yes').
   Same visual weight/colour used by every other tab's `*` markers so
   the mandatory-field affordance reads consistently across the deal-
   sheet. */
.vrba-required-star[data-v-b4418e77] {
  color: #dc2626;
  font-weight: 700;
  margin-left: 3px;
}

/* Mobile — collapse the 50/50 grid to a single column so the LEFT
   readonly row and its RIGHT input stack vertically per row. */
@media (max-width: 640px) {
.vrba-approval-grid[data-v-b4418e77] {
    grid-template-columns: 1fr;
}
.vrba-approval-row-left[data-v-b4418e77],
  .vrba-approval-row-right[data-v-b4418e77],
  .vrba-approval-header-left[data-v-b4418e77],
  .vrba-approval-header-right[data-v-b4418e77],
  .vrba-approval-row-justify[data-v-b4418e77],
  .vrba-approval-row-full[data-v-b4418e77] {
    grid-column: 1;
    grid-row: auto;
}
.vrba-approval-row-right[data-v-b4418e77],
  .vrba-approval-header-right[data-v-b4418e77],
  .vrba-approval-header-left[data-v-b4418e77],
  .vrba-approval-row-justify[data-v-b4418e77],
  .vrba-approval-row-full[data-v-b4418e77] {
    grid-template-columns: 1fr;
}
.vrba-approval-header-text[data-v-b4418e77] {
    text-align: left;
}
.vrba-approval-label[data-v-b4418e77] {
    text-align: left;
}
}

/* ═══════ VRB-A GO / NO-GO decision ═══════
   Ported from OIS's Go/NoGo section verbatim so the two decision
   blocks share the same visual language. Kept scoped so the
   `.ds-gonogo-*` names don't leak to other tabs that might have
   used similar utility names locally. */

/* Dark-navy header — matches OIS's `.ds-section--dark`. Defined
   locally rather than promoted to a shared style so only tabs
   that opt in get the dark treatment. */
.ds-section--dark .ds-section-header[data-v-b4418e77] {
  background: #0f172a;
}

/* Native date input styled to match BaseInput's chrome so the
   Approved-by search-select + Approved-date input read as a
   matched pair on the meta row. */
.vrba-date-field[data-v-b4418e77] {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.vrba-date-label[data-v-b4418e77] {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}
.vrba-date-input[data-v-b4418e77] {
  height: 34px;
  padding: 0 12px;
  border: 1px solid #c0c1cb;
  border-radius: 8px;
  font-size: 13.5px;
  color: #1a1d35;
  background: #fff;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vrba-date-input[data-v-b4418e77]:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.ds-gonogo-meta-row[data-v-b4418e77] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 24px;
}
.ds-gonogo-grid[data-v-b4418e77] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ds-gonogo-btn[data-v-b4418e77] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px 20px 24px;
  border-radius: 18px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.22s ease;
  font-family: inherit;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  outline: none;
}

/* GO — default */
.ds-gonogo-btn--go[data-v-b4418e77] {
  background: linear-gradient(145deg, #f0fdf4, #dcfce7);
  border-color: #86efac;
  color: #15803d;
}
.ds-gonogo-btn--go[data-v-b4418e77]:hover:not(.ds-gonogo-btn--active) {
  background: linear-gradient(145deg, #dcfce7, #bbf7d0);
  border-color: #4ade80;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(22, 163, 74, 0.18);
}
/* GO — active */
.ds-gonogo-btn--go.ds-gonogo-btn--active[data-v-b4418e77] {
  background: linear-gradient(145deg, #22c55e, #16a34a, #15803d);
  border-color: #166534;
  color: #fff;
  box-shadow: 0 6px 28px rgba(22, 163, 74, 0.45), 0 0 0 4px rgba(22, 163, 74, 0.18);
  transform: translateY(-1px);
}

/* NO GO — default */
.ds-gonogo-btn--nogo[data-v-b4418e77] {
  background: linear-gradient(145deg, #fff1f2, #ffe4e6);
  border-color: #fca5a5;
  color: #b91c1c;
}
.ds-gonogo-btn--nogo[data-v-b4418e77]:hover:not(.ds-gonogo-btn--active) {
  background: linear-gradient(145deg, #ffe4e6, #fecdd3);
  border-color: #f87171;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.18);
}
/* NO GO — active */
.ds-gonogo-btn--nogo.ds-gonogo-btn--active[data-v-b4418e77] {
  background: linear-gradient(145deg, #f87171, #dc2626, #b91c1c);
  border-color: #991b1b;
  color: #fff;
  box-shadow: 0 6px 28px rgba(220, 38, 38, 0.45), 0 0 0 4px rgba(220, 38, 38, 0.18);
  transform: translateY(-1px);
}
.ds-gonogo-icon[data-v-b4418e77] {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.22s ease;
  flex-shrink: 0;
}
.ds-gonogo-btn--go .ds-gonogo-icon[data-v-b4418e77] {
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
}
.ds-gonogo-btn--go.ds-gonogo-btn--active .ds-gonogo-icon[data-v-b4418e77] {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.ds-gonogo-btn--nogo .ds-gonogo-icon[data-v-b4418e77] {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}
.ds-gonogo-btn--nogo.ds-gonogo-btn--active .ds-gonogo-icon[data-v-b4418e77] {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.ds-gonogo-label[data-v-b4418e77] {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1;
}
.ds-gonogo-sublabel[data-v-b4418e77] {
  font-size: 11.5px;
  font-weight: 500;
  opacity: 0.72;
  letter-spacing: 0.2px;
}

/* Notes textarea */
.ds-gonogo-notes[data-v-b4418e77] { margin-top: 20px;
}

/* Reveal transition for the NO-GO notes textarea. Matches OIS's
   `ds-fade` timings so the two decision blocks feel identical. */
.ds-fade-enter-active[data-v-b4418e77] { transition: opacity 0.22s ease, transform 0.22s ease;
}
.ds-fade-leave-active[data-v-b4418e77] { transition: opacity 0.16s ease, transform 0.16s ease;
}
.ds-fade-enter-from[data-v-b4418e77]  { opacity: 0; transform: translateY(-8px);
}
.ds-fade-leave-to[data-v-b4418e77]    { opacity: 0; transform: translateY(-4px);
}
@media (max-width: 640px) {
.ds-gonogo-meta-row[data-v-b4418e77] { grid-template-columns: 1fr;
}
.ds-gonogo-btn[data-v-b4418e77]      { padding: 22px 16px 18px;
}
.ds-gonogo-icon[data-v-b4418e77]     { width: 48px; height: 48px;
}
.ds-gonogo-label[data-v-b4418e77]    { font-size: 17px;
}
}

/* Tighten the shared `.ds-section-body`'s 20px padding — the tall
   vertical headers need horizontal room and the default padding
   makes the table feel cramped on narrow viewports. */
.ds-ctb-section-body[data-v-ccd63514] {
  padding: 14px 18px;
}

/* Horizontal scroll wrapper — the table's own width can exceed the
   card on narrow viewports because the vertical headers each add
   ~50px per column. */
.ctb-table-wrap[data-v-ccd63514] {
  width: 100%;
  overflow-x: auto;
}
.ctb-table[data-v-ccd63514] {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 13px;
  color: #111827;
}

/* Column widths — the instruction column claims the remaining
   width via `auto`. The five user columns each need to fit TWO
   side-by-side rotated text blocks (role label + user name), so
   ~54px per column reserves room for both without wasting space.
   TOTAL only holds one vertical line, so narrower. */
.ctb-col--instruction[data-v-ccd63514] { width: auto;
}
.ctb-col--user[data-v-ccd63514]        { width: 81px;
}
.ctb-col--total[data-v-ccd63514]       { width: 66px;
}

/* Instruction column header — the only horizontal-text header on
   this row. Red tone matches the Excel copy shown to end users.
   Vertically + horizontally centred inside the tall header row
   (the neighbouring vertical-text columns dictate the height). */
.ctb-th-instruction[data-v-ccd63514] {
  padding: 12px 14px;
  background: #f4f6fb;
  border-bottom: 1px solid #c5c6c9;
  border-right:  1px solid #c5c6c9;
  vertical-align: middle;
  text-align: center;
}
.ctb-instruction-line[data-v-ccd63514] {
  color: #b91c1c;         /* red-700 — matches the Excel wording tone */
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.ctb-instruction-line + .ctb-instruction-line[data-v-ccd63514] {
  margin-top: 2px;
}

/* Vertical-text header cell. Fixed height so every column's tall
   text sits along the same vertical run. `vertical-align: bottom`
   pins the text baseline to the bottom edge — after the child
   rotation, the text reads bottom-to-top starting flush with the
   bottom of the header, which is the Excel convention. */
.ctb-th-vertical[data-v-ccd63514] {
  height: 220px;
  padding: 10px 2px;
  background: #f4f6fb;
  border-bottom: 1px solid #c5c6c9;
  border-right:  1px solid #c5c6c9;
  vertical-align: bottom;
  text-align: center;
}
.ctb-th-vertical[data-v-ccd63514]:last-child {
  border-right: none;
}

/* Container inside each vertical header — two rotated text blocks
   arranged side-by-side (label + user name). Flex row with a small
   gap so the two lines are close but distinguishable. `align-items:
   flex-end` pins each block to the BOTTOM of the column, so
   variable-length labels/names all start reading from the same
   baseline (bottom of the header cell) — the Excel convention. */
.ctb-vert-stack[data-v-ccd63514] {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 100%;
}

/* Individual rotated text block. `writing-mode: vertical-rl` +
   `transform: rotate(180deg)` gives Excel's bottom-to-top reading
   direction. `align-self: flex-end` (via the parent's align-items)
   plus these vertical writing rules keep long labels from wrapping
   or getting truncated. */
.ctb-vert-text[data-v-ccd63514] {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.2;
}
.ctb-vert-label[data-v-ccd63514] {
  font-weight: 700;
  color: #191a37;
}
.ctb-vert-value[data-v-ccd63514] {
  font-weight: 500;
  color: #4e5a82;
}

/* TOTAL column — single-line vertical header, bolder + all-caps. */
.ctb-th-vertical--total .ctb-vert-label[data-v-ccd63514] {
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ═══════ Row content (group headers + activity items) ═══════ */

/* Toolbar row — Expand All / Collapse All buttons right-aligned above
   the group rows. Both buttons use BaseButton `navy` (brand dark-blue)
   so a single click affordance covers both actions without the pair
   competing with the Proposed row's amber highlight above. */
.ctb-toolbar-cell[data-v-ccd63514] {
  padding: 12px 14px;
  background: transparent;
  border: none;
}
.ctb-toolbar[data-v-ccd63514] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Group header row (M0, M1, …) — spans all 8 columns via
   `colspan="8"` on the <td>. Muted slate background with a heavier
   bottom border to visually separate it from the item rows below.
   Row is clickable (toggles the group's collapse state); hover +
   focus states signal the affordance. */
.ctb-group-row[data-v-ccd63514]              { cursor: pointer;
}
.ctb-group-row:hover .ctb-group-cell[data-v-ccd63514] { background: #dde2ee;
}
.ctb-group-row[data-v-ccd63514]:focus-visible {
  outline: 2px solid #4b5eb8;
  outline-offset: -2px;
}
.ctb-group-cell[data-v-ccd63514] {
  padding: 8px 14px;
  background: #e9ecf3;
  border-bottom: 1px solid #d1d5e8;
  color: #191a37;
  font-size: 13px;
  font-weight: 700;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
/* Chevron sits before the group label; rotates 90° on expand so it
   points down. Small hit-area padding around the icon so the label
   still reads flush with the group text. */
.ctb-group-chevron[data-v-ccd63514] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  color: #4e5a82;
  transition: transform 0.15s ease;
  vertical-align: -3px;
}
.ctb-group-chevron--open[data-v-ccd63514] { transform: rotate(90deg);
}

/* Activity item rows */
.ctb-item-label[data-v-ccd63514] {
  /* Left-indented so the sub-item text starts flush with the
     "Connect" word above (i.e., after the "M0 - " prefix). 46px =
     group-cell's 14px left-padding + roughly the visual width of
     the "M0 - " prefix at 13px font. Tighten proportionally on
     mobile via the media query below. */
  padding: 8px 14px 8px 46px;
  border-bottom: 1px solid #eef1f7;
  border-right:  1px solid #eef1f7;
  color: #4e5a82;
  font-size: 13px;
  line-height: 1.4;
}
.ctb-item-input-cell[data-v-ccd63514] {
  padding: 4px 4px;
  border-bottom: 1px solid #eef1f7;
  border-right:  1px solid #eef1f7;
  vertical-align: middle;
}

/* Input + "%" suffix — flex row so the % sits snug against the
   right edge of the input, matching the Excel display convention
   ("46%", "35%", …). */
.ctb-input-wrap[data-v-ccd63514] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}
.ctb-input-number[data-v-ccd63514] {
  width: 100%;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  font-size: 12px;
  color: #111827;
  text-align: right;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  /* Firefox spinner hide. */
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
          appearance: textfield;
}
.ctb-input-number[data-v-ccd63514]:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
/* WebKit / Blink spinner hide — the "without incrementer" rule.
   Keeps the input purely numeric-text without up/down arrows. */
.ctb-input-number[data-v-ccd63514]::-webkit-outer-spin-button,
.ctb-input-number[data-v-ccd63514]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ctb-input-suffix[data-v-ccd63514] {
  flex-shrink: 0;
  font-size: 11px;
  color: #6b7280;
  font-weight: 600;
}

/* Row total (col 7) — readonly cell. Filled background so it reads
   as a derived value rather than an editable one. Turns red when
   the row's percentages exceed 100% as a visual warning (the
   instruction line above already tells the user the cap). */
.ctb-item-total[data-v-ccd63514] {
  padding: 8px 8px;
  border-bottom: 1px solid #eef1f7;
  background: #f4f6fb;
  color: #191a37;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.ctb-item-total--over[data-v-ccd63514] {
  background: #fee2e2;
  color: #b91c1c;
}

/* Blank spacer row between the sub-item rows and the summary row —
   pure vertical breathing room, no borders. */
.ctb-spacer-row td[data-v-ccd63514] {
  height: 14px;
  padding: 0;
  border: 0;
  background: transparent;
}
/* 2× spacer — used between the summary rows and the Comments for
   Variance row so the note reads as a distinct section. */
.ctb-spacer-row--lg td[data-v-ccd63514] {
  height: 28px;
}

/* Summary rows (Recommended Contribution + Proposed Contribution) —
   the label cell (col 1) shows the bold uppercase caption right-
   aligned so it visually pairs with the readonly / editable inputs
   starting in col 2. Shared class carries the padding, borders, and
   typography; per-row modifier classes add the row-specific chrome
   (background band for the derived Recommended row; none for the
   user-entered Proposed row). */
.ctb-summary-label[data-v-ccd63514] {
  padding: 8px 14px;
  border-top:    1px solid #d1d5e8;
  border-bottom: 1px solid #eef1f7;
  border-right:  1px solid #eef1f7;
  color: #191a37;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-align: right;
}

/* Recommended row — muted band across the label + input cells so the
   whole row reads as a derived value the user cannot edit. Left
   accent bar in brand slate-blue mirrors the shape of the Proposed
   row's amber bar (visual symmetry) while colour-coding the two
   rows differently: amber = "your input", slate-blue = "reference
   figure". */
.ctb-recommended-label[data-v-ccd63514] {
  background: #f4f6fb;
  border-left: 3px solid #4b5eb8;
}
.ctb-recommended-row .ctb-item-input-cell[data-v-ccd63514] {
  border-top: 1px solid #d1d5e8;
  background: #f4f6fb;
}
.ctb-recommended-total[data-v-ccd63514] {
  border-top: 1px solid #d1d5e8;
}

/* Proposed row — pinned to the top of the table (right after the
   header) as the primary user-input surface for this section. Soft
   amber band across the whole row draws the eye without competing
   with the sub-item inputs below. Top + bottom borders make it read
   as its own strip rather than a continuation of the header. */
.ctb-proposed-label[data-v-ccd63514] {
  background: #fff8e6;
  border-left: 3px solid #f59e0b;
}
.ctb-proposed-row .ctb-item-input-cell[data-v-ccd63514] {
  border-top:    1px solid #f5cf7a;
  border-bottom: 1px solid #f5cf7a;
  background:    #fff8e6;
}
.ctb-proposed-row .ctb-input-number[data-v-ccd63514] {
  background: #ffffff;
  border-color: #f5cf7a;
}
.ctb-proposed-row .ctb-input-number[data-v-ccd63514]:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}
.ctb-proposed-total[data-v-ccd63514] {
  border-top:    1px solid #f5cf7a;
  border-bottom: 1px solid #f5cf7a;
  background:    #fff8e6;
}

/* Comments for Variance row — regular-weight, right-aligned label in
   col 1; the merged cell (colspan 6) holds a BaseTextarea. Top-aligned
   so the label sits flush with the top of the textarea when the
   textarea grows on user input. */
.ctb-comment-label[data-v-ccd63514] {
  padding: 8px 14px;
  border-right:  1px solid #eef1f7;
  border-bottom: 1px solid #eef1f7;
  color: #191a37;
  font-size: 13px;
  text-align: right;
  vertical-align: top;
  white-space: normal;
}
.ctb-comment-cell[data-v-ccd63514] {
  padding: 6px 8px;
  border-bottom: 1px solid #eef1f7;
  vertical-align: top;
}

/* Readonly input styling — muted background + no focus ring so the
   cell reads as a derived value, not editable. */
.ctb-input-readonly[data-v-ccd63514] {
  background: #eef1f7;
  color: #191a37;
  font-weight: 700;
  cursor: default;
}
.ctb-input-readonly[data-v-ccd63514]:focus {
  border-color: #d1d5db;
  box-shadow: none;
}
@media (max-width: 640px) {
.ctb-col--user[data-v-ccd63514]  { width: 69px;
}
.ctb-col--total[data-v-ccd63514] { width: 57px;
}
.ctb-th-vertical[data-v-ccd63514] { height: 180px; padding: 8px 2px;
}
.ctb-vert-text[data-v-ccd63514]  { font-size: 11px;
}
.ctb-vert-stack[data-v-ccd63514] { gap: 3px;
}
.ctb-group-cell[data-v-ccd63514] { padding: 6px 10px;
}
.ctb-item-label[data-v-ccd63514] { padding: 6px 10px 6px 34px;
}
}

/* Slightly tighter section body padding so the filter dropdowns
   have breathing room without pushing the table narrower than it
   needs to be on medium viewports. */
.ds-rcs-section-body[data-v-60665940] {
  padding: 14px 18px;
}
.rcs-table-wrap[data-v-60665940] {
  width: 100%;
  overflow-x: auto;
}
.rcs-table[data-v-60665940] {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  color: #111827;
}

/* Column widths — role/country/type flex, numeric cols fixed so the
   sum columns don't jump around as data changes. */
.rcs-col-role[data-v-60665940]    { width: auto;
}
.rcs-col-country[data-v-60665940] { width: auto;
}
.rcs-col-type[data-v-60665940]    { width: auto;
}
.rcs-col-num[data-v-60665940]     { width: 130px;
}

/* ═══════ Header ═══════ */
.rcs-th[data-v-60665940] {
  padding: 8px 12px;
  background: #eef2fb;
  border-bottom: 1px solid #c9d1e6;
  border-right:  1px solid #dde3f0;
  color: #191a37;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  vertical-align: middle;
}
.rcs-th-num[data-v-60665940] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rcs-th-inner[data-v-60665940] {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rcs-th-label[data-v-60665940] {
  flex: 1;
}
/* Native <select> reskinned to read as a header filter. Small,
   unobtrusive; opens a native picker with the unique values. */
.rcs-filter[data-v-60665940] {
  padding: 2px 4px;
  border: 1px solid #c9d1e6;
  border-radius: 3px;
  background: #fff;
  font-size: 11px;
  color: #191a37;
  min-width: 24px;
  max-width: 100%;
  cursor: pointer;
}
.rcs-filter[data-v-60665940]:focus {
  outline: 2px solid #2563eb33;
  border-color: #2563eb;
}

/* ═══════ Group header row (collapsible) ═══════ */
.rcs-group-row[data-v-60665940] {
  cursor: pointer;
  background: #f4f6fb;
  transition: background 0.1s ease;
}
.rcs-group-row[data-v-60665940]:hover {
  background: #e9ecf3;
}
.rcs-group-role[data-v-60665940] {
  padding: 8px 12px;
  border-bottom: 1px solid #dde3f0;
  border-right:  1px solid #eef1f7;
  font-weight: 700;
  color: #191a37;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rcs-caret[data-v-60665940] {
  display: inline-block;
  width: 12px;
  font-size: 11px;
  color: #4e5a82;
  transition: transform 0.15s ease;
}
.rcs-caret--collapsed[data-v-60665940] {
  transform: rotate(-90deg);
}
.rcs-group-blank[data-v-60665940] {
  padding: 8px 12px;
  border-bottom: 1px solid #dde3f0;
  border-right:  1px solid #eef1f7;
  color: transparent;
}
.rcs-group-num[data-v-60665940] {
  font-weight: 700;
  color: #191a37;
}

/* ═══════ Item (leaf) rows — only shown when parent expanded ═══════ */
.rcs-item-row td[data-v-60665940] {
  padding: 6px 12px;
  border-bottom: 1px solid #eef1f7;
  border-right:  1px solid #eef1f7;
  color: #4e5a82;
  font-size: 12px;
}
.rcs-item-role[data-v-60665940] {
  padding-left: 32px !important;
  color: #4e5a82;
}

/* ═══════ Numeric cells + grand total ═══════ */
.rcs-num[data-v-60665940] {
  padding: 6px 12px;
  border-bottom: 1px solid #eef1f7;
  text-align: right;
  font-variant-numeric: tabular-nums;
  background: transparent;
}
.rcs-total-row td[data-v-60665940] {
  padding: 10px 12px;
  border-top: 2px solid #c9d1e6;
  background: #eef2fb;
  color: #191a37;
  font-weight: 800;
  font-size: 13px;
}
.rcs-total-label[data-v-60665940] {
  text-align: left;
}
.rcs-total-row .rcs-num[data-v-60665940] {
  text-align: right;
}

/* Empty-state row (no rows survived the filter). */
.rcs-empty-row td[data-v-60665940] {
  padding: 20px 12px;
  text-align: center;
  color: #6b7280;
  font-style: italic;
  border-bottom: 1px solid #eef1f7;
}
@media (max-width: 640px) {
.rcs-col-num[data-v-60665940]       { width: 96px;
}
.rcs-th[data-v-60665940]            { padding: 6px 8px; font-size: 11px;
}
.rcs-group-role[data-v-60665940]    { padding: 6px 8px;
}
.rcs-item-role[data-v-60665940]     { padding-left: 24px !important;
}
.rcs-num[data-v-60665940]           { padding: 6px 8px;
}
}

/* BaseAlert's default width is 480px which feels cramped when the field list
   includes "Please Justify" entries prefixed with long parent questions.
   Bump to 600px specifically for this modal via :deep() — leaves other
   BaseAlert usages untouched. */
[data-v-ccf4fad0] .bp-alert { width: 600px;
}
.mand-intro[data-v-ccf4fad0]    { margin: 0 0 12px; color: #4e5a82;
}
/* Cap the list height so the modal never exceeds the viewport — the intro
   text stays visible above and the button row stays visible below. 45vh is
   a comfortable middle ground; the list scrolls internally when long. */
.mand-scroll[data-v-ccf4fad0]   { max-height: 45vh; overflow-y: auto; padding-right: 4px;
}
.mand-group[data-v-ccf4fad0]    { margin-bottom: 16px;
}
.mand-group[data-v-ccf4fad0]:last-child { margin-bottom: 0;
}
.mand-tab-label[data-v-ccf4fad0] {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9098b0;
  margin-bottom: 6px;
}
.mand-list[data-v-ccf4fad0]     { margin: 0; padding-left: 18px; list-style: disc;
}
.mand-list li[data-v-ccf4fad0]  { margin-bottom: 4px;
}
.mand-jump[data-v-ccf4fad0]     {
  background: none;
  border: none;
  color: #da2128;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  text-align: left;
}
.mand-jump[data-v-ccf4fad0]:hover { text-decoration: underline;
}

.ds-section { border: 1px solid #d1d5e8; border-radius: 10px; overflow: hidden; margin-bottom: 16px;
}
.ds-section:last-child { margin-bottom: 0;
}
.ds-section-header {
  padding: 9px 18px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.7px;
  color: #fff; display: flex; align-items: center; gap: 8px;
}
.ds-section--blue .ds-section-header { background: #191a37;
}
.ds-section--red  .ds-section-header { background: #da2128;
}
.ds-section-body { padding: 20px 18px; background: #fff;
}
.ds-grid   { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px 20px;
}
.ds-grid-2 { display: grid; grid-template-columns: 1fr 1fr;     gap: 16px 20px;
}
.ds-grid > *, .ds-grid-2 > * { min-width: 0;
}
.ds-stack { display: flex; flex-direction: column; gap: 16px;
}
.ds-save-error { margin-top: 16px; padding: 10px 14px; border-radius: 8px; background: #fee2e2; color: #b91c1c; font-size: 13px;
}
.ds-tab-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 24px; gap: 12px; text-align: center;
}
.ds-placeholder-title { font-size: 15px; font-weight: 600; color: #4e5a82;
}
.ds-placeholder-sub   { font-size: 13px; color: #9098b0;
}
@media (max-width: 640px) {
.ds-grid, .ds-grid-2 { grid-template-columns: 1fr;
}
}

/* Red `*` marker used on every mandatory field label. Enlarged so it's
   readable even on small (10-12px) section headers where the default
   label-inherited size would be nearly invisible. The line-height:0 keeps
   it from stretching the line box; vertical-align middle sits it on the
   label baseline neatly. */
.bp-required {
  font-size: 16px;
  font-weight: 700;
  line-height: 0;
  vertical-align: middle;
  /* Guarantees breathing room between the label text and the `*` regardless
     of whether the source component included a leading space inside the
     span. BaseSearchSelect renders it with no space, others with " *". */
  margin-inline-start: 4px;
}

/* Mandatory-field highlight — applied for ~2.5s after the user clicks a
   field in the mandatory-fields modal. Global so it cascades through the
   Base component roots inside tab templates.
   Uses a positioned ::after pseudo-element (not outline or box-shadow):
   – outline gets clipped by .ds-card { overflow: clip } when the target
     spans the full card width (e.g. Practice Selection section).
   – inset box-shadow gets painted OVER by opaque children (header + body
     backgrounds inside .ds-section cover the parent's inset shadow).
   A positioned ::after with z-index sits on top of children and can't be
   clipped by ancestor overflow because it's inside the element's border-box. */
.ds-field-highlight {
  position: relative;
}
.ds-field-highlight::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid #da2128;
  border-radius: inherit;
  pointer-events: none;
  z-index: 10;
  animation: ds-field-pulse 0.6s ease-in-out 2;
}
@keyframes ds-field-pulse {
0%, 100% { border-color: #da2128;
}
50%      { border-color: rgba(218, 33, 40, 0.35);
}
}

.ds-page[data-v-40af5122] { padding: 20px;
}
.ds-page-header[data-v-40af5122] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.ds-page-identity[data-v-40af5122] {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.ds-page-icon-box[data-v-40af5122] {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #fff0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ds-page-title[data-v-40af5122] { font-size: 22px; font-weight: 700; color: #1a1d35; margin: 0;
}
.ds-page-sub[data-v-40af5122] { font-size: 13px; color: #6b7db8; margin-top: 3px;
}
.ds-page-actions[data-v-40af5122] { display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.ds-card[data-v-40af5122] {
  overflow: clip; /* clip keeps border-radius visual but does not block position:sticky */
}

/* ── Sticky tab nav + content header ── */
/*
 * `top: 64px` docks the sticky bar just below the shell's fixed TopNav
 * (bizplus-base — position:fixed, top:0, height:64px, z-index:200). Before,
 * `top: 0` made the sticky bar slide UNDER the shell nav because the shell's
 * higher z-index (200 vs our 20) draws over the top portion — the tab bar
 * would disappear and only the content-header peeked out below the nav.
 * With 64px offset, both the BaseTabBar row and the content-header dock
 * together as a single sticky block, right under the shell nav.
 *
 * z-index: 30 (not 20) so this bar always paints above any tab's own
 * sticky-column headers. TEE's left-anchored sticky columns use z-index
 * 20 internally (see TeeTab.vue `.tee-sticky-N`) to beat the header-row
 * date band inside its own stacking context. At the parent (dealsheet)
 * level, with both at 20, DOM order let TEE's sticky Role column paint
 * on top of this bar during horizontal scroll — bar must win. Keep well
 * below shell's z-index 200 so TopNav still covers us at the top edge.
 */
.ds-sticky-bar[data-v-40af5122] {
  position: sticky;
  top: 64px;
  z-index: 30;
  background: #fff;
  box-shadow: 0 2px 8px rgba(25, 26, 55, 0.1);
}

/* ── Step bar ── */
.ds-step-bar[data-v-40af5122] { background: #f8f9fc; border-bottom: 1px solid #e4e7f0;
}
.ds-step-track[data-v-40af5122] { display: flex; align-items: stretch;
}
.ds-step-item[data-v-40af5122] {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 20px 6px 16px; flex: 1; cursor: pointer;
  border-radius: 8px 8px 0 0; transition: background 0.2s;
}
.ds-step--active[data-v-40af5122] {
  background: #fff; border: 1px solid #e4e7f0;
  border-bottom: 3px solid #da2128;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.ds-step--locked[data-v-40af5122] { cursor: not-allowed;
}
.ds-step--locked .ds-step-name[data-v-40af5122] { color: #9098b0;
}
.ds-step-circle[data-v-40af5122] {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0;
  background: #e4e7f0; color: #9098b0;
}
.ds-step--active .ds-step-circle[data-v-40af5122] { background: #da2128; color: #fff;
}
.ds-step--done   .ds-step-circle[data-v-40af5122] { background: #22c55e; color: #fff;
}
.ds-step--na     .ds-step-circle[data-v-40af5122] { background: #9ca3af; color: #fff;
}
.ds-step-text[data-v-40af5122] { flex: 1;
}
.ds-step-label[data-v-40af5122] { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #9098b0;
}
.ds-step--active .ds-step-label[data-v-40af5122] { color: #da2128;
}
.ds-step-name[data-v-40af5122] { font-size: 12px; font-weight: 700; color: #1a1d35;
}
.ds-step-arrow[data-v-40af5122] { color: #c8cde0; font-size: 14px; align-self: center; flex-shrink: 0;
}
.ds-step-badge[data-v-40af5122] {
  font-size: 9px; font-weight: 600; padding: 1px 6px; border-radius: 8px;
  background: rgba(218,33,40,0.10); color: #da2128; white-space: nowrap;
}
.ds-step-badge--locked[data-v-40af5122] { background: #f0f1f5; color: #9098b0;
}
/* Status-driven badge palettes — mirror the circle colour so status
   reads consistently even when the step isn't the active one. */
.ds-step-badge--inProgress[data-v-40af5122] { background: rgba(218,33,40,0.10); color: #da2128;
}
.ds-step-badge--complete[data-v-40af5122]   { background: rgba(34,197,94,0.14);  color: #15803d;
}
.ds-step-badge--na[data-v-40af5122]         { background: #f0f1f5;              color: #6b7280;
}

/* ── Tab nav ── */
.ds-tab-nav[data-v-40af5122] { display: flex; align-items: stretch; border-bottom: 1px solid #e4e7f0; background: #fff;
}
.ds-tab-nav[data-v-40af5122] .bp-tabbar { flex: 1; border-bottom: none;
}
.ds-tab-arrow[data-v-40af5122] {
  flex-shrink: 0; width: 36px;
  border: none; border-bottom: 3px solid transparent;
  background: #fff; color: #6b7db8; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.ds-tab-arrow[data-v-40af5122]:hover { background: #f5f6fb; color: #da2128;
}
.ds-tab-arrow[data-v-40af5122]:disabled { opacity: 0.25; cursor: not-allowed;
}

/* ── Tab content ── */
.ds-tab-content[data-v-40af5122] { padding: 28px 0px;
}
.ds-content-header[data-v-40af5122] { display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: white; border-bottom: #bbbbbb 1px solid; margin-top: 10px;
}

/* Fieldset wrapper on every tab template root — used to blanket-disable
   every native form control inside when the dealsheet is opened readonly.
   Reset default fieldset appearance so it stays invisible; `:deep` pierces
   the scoped-style boundary into each child tab component's template. */
[data-v-40af5122] .tab-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0; /* fieldset defaults to min-content — breaks flex/grid children */
}
/* When the fieldset is disabled, use the default arrow cursor across the
   tab. The `not-allowed` red-circle cursor felt too aggressive as a
   whole-tab treatment; disabled fields still look disabled via their own
   greying, and the read-only pill in the sticky header makes the mode
   explicit. */
[data-v-40af5122] .tab-fieldset[disabled],[data-v-40af5122] .tab-fieldset[disabled] * {
  cursor: default !important;
}
/* Custom clickable divs (Win Prob row cards, GO/NO-GO tiles) and custom
   Base* triggers (PrimeVue's Select/MultiSelect/AutoComplete render as
   `<div>`s, not native form controls, so `fieldset[disabled]` doesn't
   cascade to them). `pointer-events: none` on them under the disabled
   fieldset blocks the trigger click — which in turn prevents PrimeVue's
   overlay dropdown from ever opening (the overlay itself teleports to
   body, so this trigger-side block is the right place to gate it). */
[data-v-40af5122] .tab-fieldset[disabled] [role="radio"],[data-v-40af5122] .tab-fieldset[disabled] [role="button"],[data-v-40af5122] .tab-fieldset[disabled] .ds-gonogo-btn,[data-v-40af5122] .tab-fieldset[disabled] .osq-wp-row-card,[data-v-40af5122] .tab-fieldset[disabled] .osq-score-radio,[data-v-40af5122] .tab-fieldset[disabled] .dss-yn-radio,[data-v-40af5122] .tab-fieldset[disabled] .ds-practice-card--clickable,[data-v-40af5122] .tab-fieldset[disabled] .p-select,[data-v-40af5122] .tab-fieldset[disabled] .p-multiselect,[data-v-40af5122] .tab-fieldset[disabled] .p-autocomplete,[data-v-40af5122] .tab-fieldset[disabled] .bp-search-single-clear,[data-v-40af5122] .tab-fieldset[disabled] .bp-search-single-wrap {
  pointer-events: none;
}
/* Base* triggers should visually look disabled too — soften the tint. */
[data-v-40af5122] .tab-fieldset[disabled] .p-select,[data-v-40af5122] .tab-fieldset[disabled] .p-multiselect,[data-v-40af5122] .tab-fieldset[disabled] .p-autocomplete {
  opacity: 0.75;
  background: #f8f9fc;
}

/* Read-only mode badge — amber pill with lock icon, sits between the tab
   title and the status badge in the sticky content-header row. Visible
   only when the dealsheet was opened for viewing (props.readonly). */
.ds-readonly-badge[data-v-40af5122] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ds-readonly-badge svg[data-v-40af5122] { flex-shrink: 0;
}

/* ── Identity info strip (page header top-right) ── */
.ds-info-strip[data-v-40af5122] {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid #e4e7f0;
  border-radius: 10px;
  overflow: hidden;
}
.ds-info-item[data-v-40af5122] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 18px;
  min-width: 0;
}
.ds-info-sep[data-v-40af5122] {
  width: 1px;
  background: #e4e7f0;
  margin: 8px 0;
  flex-shrink: 0;
}
.ds-info-label[data-v-40af5122] {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9098b0;
  white-space: nowrap;
}
.ds-info-value[data-v-40af5122] {
  font-size: 13px;
  font-weight: 700;
  color: #1a1d35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}
.ds-info-value--id[data-v-40af5122] {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ds-version-badge[data-v-40af5122] {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
  background: #1a1d35;
  color: #fff;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}
.ds-content-title-wrap[data-v-40af5122] {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.ds-content-title[data-v-40af5122] {
  font-size: 16px;
  font-weight: 700;
  color: #1a1d35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-content-subtitle[data-v-40af5122] { font-size: 12px; color: #9098b0; margin-top: 2px;
}

/* Back link in the sticky header — left side. Mirrors the bottom footer back-link semantics. */
/* Layout hook only — visuals come from BaseButton variant="navy" size="sm".
   flex-shrink keeps the button intact when the header title next to it is
   long enough to compress its siblings. */
.ds-back-link[data-v-40af5122] { flex-shrink: 0;
}

/* ── Status badge ── */
.ds-status-badge[data-v-40af5122] {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600;
  background: rgba(250,204,21,0.15); color: #b45309;
}
.ds-status-dot[data-v-40af5122] { width: 6px; height: 6px; border-radius: 50%; background: #f59e0b;
}

/* Status colour modifiers — mirrors listing screen bp-tbl-status colours exactly */
.ds-status-badge--draft[data-v-40af5122]      { background: #f3f4f6; color: #6b7280;
}
.ds-status-badge--draft      .ds-status-dot[data-v-40af5122] { background: #9ca3af;
}
.ds-status-badge--inprogress[data-v-40af5122] { background: #eff6ff; color: #2563eb;
}
.ds-status-badge--inprogress .ds-status-dot[data-v-40af5122] { background: #3b82f6;
}
.ds-status-badge--develop[data-v-40af5122]    { background: #fffbeb; color: #b45309;
}
.ds-status-badge--develop    .ds-status-dot[data-v-40af5122] { background: #f59e0b;
}
.ds-status-badge--proposed[data-v-40af5122]   { background: #f0fdf4; color: #16a34a;
}
.ds-status-badge--proposed   .ds-status-dot[data-v-40af5122] { background: #22c55e;
}
.ds-status-badge--approved[data-v-40af5122]   { background: #f0fdf4; color: #16a34a;
}
.ds-status-badge--approved   .ds-status-dot[data-v-40af5122] { background: #22c55e;
}
.ds-status-badge--completed[data-v-40af5122]  { background: #f0fdf4; color: #16a34a;
}
.ds-status-badge--completed  .ds-status-dot[data-v-40af5122] { background: #22c55e;
}
.ds-status-badge--closed[data-v-40af5122]     { background: #f3f4f6; color: #6b7280;
}
.ds-status-badge--closed     .ds-status-dot[data-v-40af5122] { background: #9ca3af;
}
.ds-status-badge--nogo[data-v-40af5122]       { background: #fff1f2; color: #dc2626;
}
.ds-status-badge--nogo       .ds-status-dot[data-v-40af5122] { background: #ef4444;
}
.ds-status-badge--rejected[data-v-40af5122]   { background: #f3f4f6; color: #6b7280;
}
.ds-status-badge--rejected   .ds-status-dot[data-v-40af5122] { background: #9ca3af;
}

/* ── Auto-save status pill ──
   Visual language mirrors `.ds-status-badge`: same pill shape, 11px/600
   weight so it reads as a sibling of the primary status badge rather
   than fighting it. State variants use muted tones (not primary brand
   colours) — the pill is background feedback, not a call to action.
   Saving uses an infinite spinner animation on the leading dot. */
.ds-autosave-pill[data-v-40af5122] {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600;
  background: #f3f4f6; color: #6b7280;
  transition: background 160ms ease, color 160ms ease;
}
.ds-autosave-pill[data-v-40af5122]::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; display: inline-block;
}
.ds-autosave-pill--saving[data-v-40af5122]  { background: #eff6ff; color: #2563eb;
}
.ds-autosave-pill--saving[data-v-40af5122]::before { animation: dsAutoSavePulse-40af5122 1s ease-in-out infinite;
}
.ds-autosave-pill--saved[data-v-40af5122]   { background: #f0fdf4; color: #16a34a;
}
.ds-autosave-pill--error[data-v-40af5122]   { background: #fff1f2; color: #dc2626;
}
@keyframes dsAutoSavePulse-40af5122 {
0%, 100% { opacity: 1;   transform: scale(1);
}
50%      { opacity: 0.4; transform: scale(0.7);
}
}

/* ── Footer ── */
.ds-footer[data-v-40af5122] {
  display: flex; justify-content: space-between; align-items: center;
}
.ds-footer-left[data-v-40af5122]  { display: flex; gap: 10px; align-items: center;
}
.ds-footer-right[data-v-40af5122] { display: flex; gap: 10px;
}
@media (max-width: 768px) {
.ds-page[data-v-40af5122] { padding: 12px;
}
.ds-tab-content[data-v-40af5122] { padding: 16px;
}
.ds-footer[data-v-40af5122] { flex-direction: column; gap: 12px; padding: 16px;
}
.ds-footer-right[data-v-40af5122] { width: 100%; justify-content: flex-end;
}
.ds-info-strip[data-v-40af5122] { display: none;
}
}

/* Golden Rule button — keeps the same red-primary BaseButton visual as
   Prev/Next but nudged to sit tight against the KPI info strip. No
   width override; button hugs its label. */
.ds-golden-rule-btn[data-v-40af5122] { flex-shrink: 0;
}

/* Golden Rule popup body — FIXED height (not min-height) so the outer
   `.bp-popup-body` never has to scroll. The flex layout below makes the
   intro + table wrapper share this height; `.grr-table-wrap` takes the
   remaining space via `flex: 1` and is the ONLY scrollable region.
   Result: the popup header (BasePopup), intro line, and the table's
   own `<thead>` all stay pinned; only the tbody rows scroll.
   Height math: 90vh dialog target (BasePopup's hard max) − ~53px popup
   header − 40px body padding − small safety margin = ~120px trim, so
   the body settles at `90vh − 120px` and leaves the dialog just under
   its `max-height: 90vh` ceiling. */
.ds-golden-rule-body[data-v-40af5122] {
  height: calc(90vh - 120px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Intro paragraph — one-liner explanation above the table. `flex-shrink: 0`
   keeps its natural height while the sibling `.grr-table-wrap` absorbs any
   remaining vertical space. */
.grr-intro[data-v-40af5122] {
  margin: 0;
  color: #4e5a82;
  font-size: 13px;
  line-height: 1.5;
  flex-shrink: 0;
}

/* Table wrapper — rounded card with horizontal scroll for narrow screens
   and a subtle border so the table sits inside a visual container rather
   than floating on the popup background. */
.grr-table-wrap[data-v-40af5122] {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border: 1px solid #d1d5e8;
  border-radius: 10px;
  background: #ffffff;
}
.grr-table[data-v-40af5122] {
  width: 100%;
  /* Minimum table width preserves horizontal scroll on narrow viewports —
     description column shouldn't shrink below a legible width. */
  min-width: 900px;
  /* Fixed layout so the <colgroup> widths are authoritative — otherwise
     verdict columns 2-5 would auto-widen based on their longest note
     text (column 4's "Booking to follow the project set-up …" was
     stretching wider than 2, 3, 5 before this fix). */
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  color: #1a1d35;
}

/* Column-width declarations for the <colgroup>. Description takes 40 %,
   each of the four verdict columns takes 15 % (= 60 % total). */
.grr-col-desc[data-v-40af5122]    { width: 40%;
}
.grr-col-verdict[data-v-40af5122] { width: 15%;
}

/* Sticky header — dark navy bar with white uppercase caption text.
   `position: sticky` on <th> keeps the header visible while the tbody
   scrolls; z-index sits above the tbody cells. */
.grr-th[data-v-40af5122] {
  background: #1a1d35;
  color: #ffffff;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 12px 14px;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  line-height: 1.35;
  border-right: 1px solid #2a2d4a;
  position: sticky;
  top: 0;
  z-index: 1;
}
.grr-th[data-v-40af5122]:last-child { border-right: none;
}
.grr-th--desc[data-v-40af5122] { text-align: left;
}

/* Body cells — subtle horizontal separator, vertical separator between
   columns for grid readability, and top-aligned so multi-line answers
   read cleanly against long description text. */
.grr-td[data-v-40af5122] {
  padding: 14px 14px;
  border-top: 1px solid #e4e7f0;
  border-right: 1px solid #eeeef5;
  text-align: center;
  vertical-align: top;
  line-height: 1.5;
}
.grr-td[data-v-40af5122]:last-child { border-right: none;
}
.grr-td--desc[data-v-40af5122] {
  text-align: left;
  font-weight: 500;
  color: #1a1d35;
  /* Preserve embedded `\n` line breaks (used by the Quality Assurance Days
     row's bulleted guideline) while still collapsing runs of spaces. */
  white-space: pre-line;
  /* Wrap long content within the fixed 40 % column instead of pushing
     the table wider. `overflow-wrap` breaks over-long unbroken tokens
     (URL-ish strings, etc.) so nothing punches out of the cell. */
  overflow-wrap: break-word;
}
.grr-table tbody tr:nth-child(even) .grr-td[data-v-40af5122] { background: #f8f9fc;
}

/* Yes / No answer pill — coloured badge with the main verdict.
   Green for Yes, red for No. Rounded, bold, tabular width so answers
   line up column-to-column even when the description flexes. */
.grr-answer[data-v-40af5122] {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.35;
  min-width: 46px;
}
.grr-answer--yes[data-v-40af5122] {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}
.grr-answer--no[data-v-40af5122] {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

/* Optional secondary line under a Yes/No — italic muted note used for
   qualifiers like "included as resource cost" or "included in 'other cost'". */
.grr-note[data-v-40af5122] {
  margin-top: 6px;
  font-size: 11.5px;
  color: #4e5a82;
  font-style: italic;
  line-height: 1.4;
}
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.\!container {
  width: 100% !important;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}
:where([data-mfe="dealsheetApp"]) .\!visible {
  visibility: visible !important;
}
:where([data-mfe="dealsheetApp"]) .visible {
  visibility: visible;
}
:where([data-mfe="dealsheetApp"]) .invisible {
  visibility: hidden;
}
:where([data-mfe="dealsheetApp"]) .collapse {
  visibility: collapse;
}
:where([data-mfe="dealsheetApp"]) .static {
  position: static;
}
:where([data-mfe="dealsheetApp"]) .fixed {
  position: fixed;
}
:where([data-mfe="dealsheetApp"]) .absolute {
  position: absolute;
}
:where([data-mfe="dealsheetApp"]) .relative {
  position: relative;
}
:where([data-mfe="dealsheetApp"]) .sticky {
  position: sticky;
}
:where([data-mfe="dealsheetApp"]) .mb-1 {
  margin-bottom: 0.25rem;
}
:where([data-mfe="dealsheetApp"]) .mb-6 {
  margin-bottom: 1.5rem;
}
:where([data-mfe="dealsheetApp"]) .\!block {
  display: block !important;
}
:where([data-mfe="dealsheetApp"]) .block {
  display: block;
}
:where([data-mfe="dealsheetApp"]) .inline {
  display: inline;
}
:where([data-mfe="dealsheetApp"]) .flex {
  display: flex;
}
:where([data-mfe="dealsheetApp"]) .inline-flex {
  display: inline-flex;
}
:where([data-mfe="dealsheetApp"]) .table {
  display: table;
}
:where([data-mfe="dealsheetApp"]) .table-cell {
  display: table-cell;
}
:where([data-mfe="dealsheetApp"]) .table-row {
  display: table-row;
}
:where([data-mfe="dealsheetApp"]) .flow-root {
  display: flow-root;
}
:where([data-mfe="dealsheetApp"]) .\!grid {
  display: grid !important;
}
:where([data-mfe="dealsheetApp"]) .grid {
  display: grid;
}
:where([data-mfe="dealsheetApp"]) .contents {
  display: contents;
}
:where([data-mfe="dealsheetApp"]) .hidden {
  display: none;
}
:where([data-mfe="dealsheetApp"]) .w-full {
  width: 100%;
}
:where([data-mfe="dealsheetApp"]) .flex-shrink {
  flex-shrink: 1;
}
:where([data-mfe="dealsheetApp"]) .shrink {
  flex-shrink: 1;
}
:where([data-mfe="dealsheetApp"]) .grow {
  flex-grow: 1;
}
:where([data-mfe="dealsheetApp"]) .border-collapse {
  border-collapse: collapse;
}
:where([data-mfe="dealsheetApp"]) .transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
:where([data-mfe="dealsheetApp"]) .resize {
  resize: both;
}
:where([data-mfe="dealsheetApp"]) .flex-col {
  flex-direction: column;
}
:where([data-mfe="dealsheetApp"]) .flex-col-reverse {
  flex-direction: column-reverse;
}
:where([data-mfe="dealsheetApp"]) .flex-wrap {
  flex-wrap: wrap;
}
:where([data-mfe="dealsheetApp"]) .items-start {
  align-items: flex-start;
}
:where([data-mfe="dealsheetApp"]) .justify-between {
  justify-content: space-between;
}
:where([data-mfe="dealsheetApp"]) .gap-2 {
  gap: 0.5rem;
}
:where([data-mfe="dealsheetApp"]) .gap-3 {
  gap: 0.75rem;
}
:where([data-mfe="dealsheetApp"]) :is(.space-y-4 > :not([hidden]) ~ :not([hidden])) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
:where([data-mfe="dealsheetApp"]) .overflow-hidden {
  overflow: hidden;
}
:where([data-mfe="dealsheetApp"]) .overflow-scroll {
  overflow: scroll;
}
:where([data-mfe="dealsheetApp"]) .truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where([data-mfe="dealsheetApp"]) .rounded {
  border-radius: 0.25rem;
}
:where([data-mfe="dealsheetApp"]) .border {
  border-width: 1px;
}
:where([data-mfe="dealsheetApp"]) .p-6 {
  padding: 1.5rem;
}
:where([data-mfe="dealsheetApp"]) .px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
:where([data-mfe="dealsheetApp"]) .py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
:where([data-mfe="dealsheetApp"]) .pt-4 {
  padding-top: 1rem;
}
:where([data-mfe="dealsheetApp"]) .text-center {
  text-align: center;
}
:where([data-mfe="dealsheetApp"]) .text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
:where([data-mfe="dealsheetApp"]) .text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
:where([data-mfe="dealsheetApp"]) .font-medium {
  font-weight: 500;
}
:where([data-mfe="dealsheetApp"]) .font-semibold {
  font-weight: 600;
}
:where([data-mfe="dealsheetApp"]) .uppercase {
  text-transform: uppercase;
}
:where([data-mfe="dealsheetApp"]) .lowercase {
  text-transform: lowercase;
}
:where([data-mfe="dealsheetApp"]) .italic {
  font-style: italic;
}
:where([data-mfe="dealsheetApp"]) .tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
:where([data-mfe="dealsheetApp"]) .text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
:where([data-mfe="dealsheetApp"]) .text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
:where([data-mfe="dealsheetApp"]) .text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
:where([data-mfe="dealsheetApp"]) .underline {
  text-decoration-line: underline;
}
:where([data-mfe="dealsheetApp"]) .shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
:where([data-mfe="dealsheetApp"]) .outline {
  outline-style: solid;
}
:where([data-mfe="dealsheetApp"]) .ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
:where([data-mfe="dealsheetApp"]) .blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
:where([data-mfe="dealsheetApp"]) .grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
:where([data-mfe="dealsheetApp"]) .invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
:where([data-mfe="dealsheetApp"]) .filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
:where([data-mfe="dealsheetApp"]) .backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
:where([data-mfe="dealsheetApp"]) .transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
:where([data-mfe="dealsheetApp"]) .ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─────────────────────────────────────────────────────────────────────────
   PrimeVue design-token fallbacks
   The shell uses PrimeVue in unstyled/headless mode so none of the
   --p-* design-token variables are set globally.  @primeuix/styles converts
   dt('x.y') → var(--p-x-y) at runtime; without these values every Dialog
   element (mask, box, header, footer) renders transparent.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* Overlay mask (used by Dialog, Drawer, etc.) */
  --px-mask-background:          rgba(0, 0, 0, 0.5);
  --p-mask-background:           rgba(0, 0, 0, 0.5);
  --p-mask-color:                rgba(255, 255, 255, 0.7);
  --p-mask-transition-duration:  0.2s;

  /* Dialog box */
  --p-dialog-background:         #ffffff;
  --p-dialog-border-color:       #e4e7f0;
  --p-dialog-color:              #1a1d35;
  --p-dialog-border-radius:      12px;
  --p-dialog-shadow:             0 20px 60px -8px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.08);

  /* Dialog header */
  --p-dialog-header-padding:     1.125rem 1.375rem;
  --p-dialog-header-gap:         0.5rem;

  /* Dialog title */
  --p-dialog-title-font-size:    1rem;
  --p-dialog-title-font-weight:  700;

  /* Dialog content */
  --p-dialog-content-padding:    1.25rem 1.375rem;

  /* Dialog footer */
  --p-dialog-footer-padding:     0.75rem 1.375rem;
  --p-dialog-footer-gap:         0.5rem;
}
@media (min-width: 640px) {

  :where([data-mfe="dealsheetApp"]) .sm\:flex-row {
    flex-direction: row;
  }

  :where([data-mfe="dealsheetApp"]) .sm\:items-center {
    align-items: center;
  }

  :where([data-mfe="dealsheetApp"]) .sm\:justify-end {
    justify-content: flex-end;
  }
}

.dsadm-page[data-v-babe16cd] {
  padding: 24px 32px;
  max-width: 1200px;
  margin: 0 auto;
}
.dsadm-header[data-v-babe16cd] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}
.dsadm-header-text[data-v-babe16cd] {
  flex: 1 1 260px;
  min-width: 0;
}
.dsadm-title[data-v-babe16cd] {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: #1a1d35;
}
.dsadm-subtitle[data-v-babe16cd] {
  margin: 0;
  font-size: 13px;
  color: #6b7db8;
}

/* Empty state — appears when TASKS is []. Central column, no interactive
   affordance since there's nothing to click. Replaced by .dsadm-grid once
   real tiles are added. */
.dsadm-empty[data-v-babe16cd] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 24px;
  background: #ffffff;
  border: 1px dashed #d5dae8;
  border-radius: 12px;
  color: #6b7db8;
}
.dsadm-empty-icon[data-v-babe16cd] {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a8b4d8;
}
.dsadm-empty-text[data-v-babe16cd] {
  margin: 0;
  font-size: 14px;
  text-align: center;
}

/* Tile grid — copied metric-for-metric from bizplus-auth SystemAdminTasksView
   so a user moving between the two hubs sees consistent card sizing / hover. */
.dsadm-grid[data-v-babe16cd] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.dsadm-tile[data-v-babe16cd] {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  color: #1a1d35;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  cursor: pointer;
}
.dsadm-tile[data-v-babe16cd]:hover {
  border-color: #da2128;
  box-shadow: 0 4px 12px rgba(218, 33, 40, 0.08);
  transform: translateY(-1px);
}
.dsadm-tile-icon[data-v-babe16cd] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 8px;
  background: #fef2f2;
  color: #da2128;
}
.dsadm-tile-body[data-v-babe16cd] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dsadm-tile-label[data-v-babe16cd] {
  font-size: 14px;
  font-weight: 600;
  color: #1a1d35;
  line-height: 1.3;
}
.dsadm-tile-desc[data-v-babe16cd] {
  font-size: 12px;
  color: #6b7db8;
  line-height: 1.4;
}
.dsadm-tile-chevron[data-v-babe16cd] {
  color: #a8b4d8;
  flex-shrink: 0;
}
.dsadm-tile:hover .dsadm-tile-chevron[data-v-babe16cd] {
  color: #da2128;
}
@media (max-width: 640px) {
.dsadm-page[data-v-babe16cd]   { padding: 16px;
}
.dsadm-title[data-v-babe16cd]  { font-size: 18px;
}
.dsadm-grid[data-v-babe16cd]   { grid-template-columns: 1fr;
}
.dsadm-empty[data-v-babe16cd]  { padding: 40px 16px;
}
}