/* ── 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 {
  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;
}
.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 {
  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 {
  padding: 9px 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%;
  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 {
  padding: 9px 12px;
  font-size: 13.5px;
  color: #1a1d35;
  font-family: inherit;
}
.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: center;
  justify-content: center;
  width: 68px;
  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 ── */
.bp-search-multi .p-autocomplete-loader {
  color: #4e5a82;
}

/* ── 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 {
  width: 100%;
  padding: 9px 32px 9px 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;
}

.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-2303cca3] {
  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-2303cca3] {
  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-2303cca3] {
  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-2303cca3] {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ds-cm-title[data-v-2303cca3] {
  font-size: 15px;
  font-weight: 700;
  color: #1a1d35;
  line-height: 1.25;
}
.ds-cm-subtitle[data-v-2303cca3] {
  font-size: 12px;
  color: #7b84a3;
  line-height: 1.4;
}
.ds-cm-close[data-v-2303cca3] {
  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-2303cca3]:hover {
  background: #eff4ff;
}

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

/* ── Single panel ── */
.ds-cm-panel[data-v-2303cca3] {
  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-2303cca3] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Panel icon ── */
.ds-cm-panel-icon[data-v-2303cca3] {
  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-2303cca3] {
  background: #eff4ff;
  color: #2563eb;
}
.ds-cm-panel-icon--red[data-v-2303cca3] {
  background: #fff0f0;
  color: #da2128;
}

/* ── Panel heading ── */
.ds-cm-panel-title[data-v-2303cca3] {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
}
.ds-cm-panel-title--blue[data-v-2303cca3] { color: #2563eb;
}
.ds-cm-panel-title--red[data-v-2303cca3]  { color: #da2128;
}
.ds-cm-panel-desc[data-v-2303cca3] {
  font-size: 11px;
  color: #9098b0;
  line-height: 1.45;
  margin-bottom: 4px;
}
.ds-cm-panel-help[data-v-2303cca3] {
  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-2303cca3] {
  background: #fff5f5;
  border-left-color: #da2128;
}

/* ── Duplicate alert (inline, per panel) ── */
.ds-cm-dup-alert[data-v-2303cca3] {
  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-2303cca3] {
  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-2303cca3] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

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

/* ── Note ── */
.ds-cm-note[data-v-2303cca3] {
  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-2303cca3] {
  font-size: 13px;
  flex-shrink: 0;
  line-height: 1.5;
}
.ds-cm-note-text[data-v-2303cca3] {
  font-size: 11px;
  color: #7c5e10;
  line-height: 1.5;
}

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

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

/* ── Separator ── */
.ds-cm-sep[data-v-2303cca3] {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 44px;
  padding: 28px 0;
}
.ds-cm-sep-line[data-v-2303cca3] {
  flex: 1;
  width: 1px;
  background: #d0d4e4;
}
.ds-cm-sep-or[data-v-2303cca3] {
  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-2303cca3],
.ds-cm-fade-leave-active[data-v-2303cca3] {
  transition: opacity 0.2s ease;
}
.ds-cm-fade-enter-active .ds-cm-dialog[data-v-2303cca3],
.ds-cm-fade-leave-active .ds-cm-dialog[data-v-2303cca3] {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.ds-cm-fade-enter-from[data-v-2303cca3],
.ds-cm-fade-leave-to[data-v-2303cca3] {
  opacity: 0;
}
.ds-cm-fade-enter-from .ds-cm-dialog[data-v-2303cca3],
.ds-cm-fade-leave-to .ds-cm-dialog[data-v-2303cca3] {
  transform: scale(0.96) translateY(-8px);
  opacity: 0;
}

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

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

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

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

/* ── Step 2 manage list ── */
.ds-manage-list[data-v-0f7bd3ea] {
  border: 1px solid #e4e7f0;
  border-radius: 10px;
  background: #fff;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}
.ds-manage-empty[data-v-0f7bd3ea] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
  color: #6b7db8;
  font-size: 13px;
}
.ds-manage-row[data-v-0f7bd3ea] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background 0.15s;
}
.ds-manage-row[data-v-0f7bd3ea]:hover { background: #f5f6fb;
}
.ds-manage-avatar[data-v-0f7bd3ea] {
  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-0f7bd3ea] { flex: 1; min-width: 0;
}
.ds-manage-name[data-v-0f7bd3ea] {
  font-size: 13.5px;
  font-weight: 600;
  color: #1a1d35;
  line-height: 1.2;
}
.ds-manage-email[data-v-0f7bd3ea] {
  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-0f7bd3ea] { width: 130px; flex-shrink: 0;
}
.ds-manage-perm[data-v-0f7bd3ea] .bp-form-group { margin: 0;
}
.ds-manage-remove[data-v-0f7bd3ea] {
  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-0f7bd3ea]:hover {
  background: #da2128;
  color: #fff;
}

/* ── Share note (Step 1) ── */
.ds-share-note[data-v-0f7bd3ea] {
  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-0f7bd3ea] {
  flex-shrink: 0;
  margin-top: 1px;
}

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

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

/* ── Page header ── */
.dsv-header[data-v-dcdcb09e] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.dsv-actions-bar[data-v-dcdcb09e] {
  display: flex;
  justify-content: flex-end;
}
.dsv-header-identity[data-v-dcdcb09e] {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.dsv-icon-box[data-v-dcdcb09e] {
  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-dcdcb09e] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dsv-title[data-v-dcdcb09e] {
  font-size: 20px;
  font-weight: 700;
  color: #1a1d35;
  margin: 0;
}
.dsv-subtitle[data-v-dcdcb09e] {
  font-size: 13px;
  color: #6b7db8;
  margin: 0;
}



/* ── Filter grid ── */
.dsv-filter-field--wide[data-v-dcdcb09e] { grid-column: span 2;
}
.dsv-filter-field .bp-label[data-v-dcdcb09e] { font-size: 11px; font-weight: 700; margin-bottom: 1px;
}
.dsv-filter-field .bp-form-group[data-v-dcdcb09e] { gap: 5px;
}


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

/* ── Deal ID + version badge ── */
.dsv-deal-cell[data-v-dcdcb09e] {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.dsv-deal-id-stack[data-v-dcdcb09e] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dsv-deal-id[data-v-dcdcb09e] {
  display: block;
  font-weight: 700;
  color: #1a1d35;
}
.dsv-version-badge[data-v-dcdcb09e] {
  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-dcdcb09e] {
  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-dcdcb09e]: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-dcdcb09e]:active:not(:disabled) {
  background: #e0e7ff;
  box-shadow: 0 1px 2px rgba(15, 17, 40, 0.06);
}
.dsv-more-btn--disabled[data-v-dcdcb09e],
.dsv-more-btn[data-v-dcdcb09e]: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-dcdcb09e] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding-right: 5px;
}

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

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


/* ── Win % bar ── */
.dsv-winbar[data-v-dcdcb09e] { display: flex; align-items: center; gap: 5px;
}
.dsv-winbar-track[data-v-dcdcb09e] {
  flex: 1;
  height: 7px;
  background: #e9eaf2;
  border-radius: 99px;
  overflow: hidden;
  min-width: 28px;
}
.dsv-winbar-fill[data-v-dcdcb09e] { height: 100%; border-radius: 99px; transition: width 0.3s ease;
}
.dsv-winbar-fill--green[data-v-dcdcb09e] { background: #22c55e;
}
.dsv-winbar-fill--red[data-v-dcdcb09e]   { background: #da2128;
}
.dsv-winbar-label[data-v-dcdcb09e] {
  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-dcdcb09e] {
  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-dcdcb09e]:hover {
  background:     #f5f6fb;
  border-color:   #b0b7d8;
  color:          #1a1d35;
}
.dsv-copy-btn[data-v-dcdcb09e]:disabled {
  opacity: 0.45;
  cursor:  not-allowed;
}

/* ── Child row version badge — outlined grey style ── */
[data-v-dcdcb09e] .bp-tbl-row--child .dsv-version-badge {
  background: transparent;
  border: 1px solid #9098b0;
  color: #9098b0;
}

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

/* ── Status badges ── */
.bp-tbl-status[data-v-dcdcb09e] {
  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-dcdcb09e] {
  width:        6px;
  height:       6px;
  border-radius: 50%;
  flex-shrink:  0;
}
/* InProgress — blue */
.bp-tbl-status--inprogress[data-v-dcdcb09e] {
  background: #eff6ff;
  color:      #2563eb;
}
.bp-tbl-status--inprogress .bp-tbl-status-dot[data-v-dcdcb09e] { background: #3b82f6;
}
/* Develop — amber */
.bp-tbl-status--develop[data-v-dcdcb09e] {
  background: #fffbeb;
  color:      #b45309;
}
.bp-tbl-status--develop .bp-tbl-status-dot[data-v-dcdcb09e] { background: #f59e0b;
}
/* Proposed — green */
.bp-tbl-status--proposed[data-v-dcdcb09e] {
  background: #f0fdf4;
  color:      #16a34a;
}
.bp-tbl-status--proposed .bp-tbl-status-dot[data-v-dcdcb09e] { background: #22c55e;
}
/* NoGo — red */
.bp-tbl-status--nogo[data-v-dcdcb09e] {
  background: #fff1f2;
  color:      #dc2626;
}
.bp-tbl-status--nogo .bp-tbl-status-dot[data-v-dcdcb09e] { background: #ef4444;
}
/* Rejected — grey */
.bp-tbl-status--rejected[data-v-dcdcb09e] {
  background: #f3f4f6;
  color:      #6b7280;
}
.bp-tbl-status--rejected .bp-tbl-status-dot[data-v-dcdcb09e] { background: #9ca3af;
}

/* ── Add New button ── */
.dsv-new-btn[data-v-dcdcb09e] {
  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-dcdcb09e]:hover { background: #b91c22 !important; border-color: #b91c22 !important;
}

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

/* ── KPI card ── */
.dsv-kpi-card[data-v-dcdcb09e] {
  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-dcdcb09e] {
  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-dcdcb09e] {
  width: 1px;
  background: #e4e7f0;
  flex-shrink: 0;
}
.dsv-kpi-stat[data-v-dcdcb09e] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 12px 18px;
}
.dsv-kpi-numbers[data-v-dcdcb09e] {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.dsv-kpi-count[data-v-dcdcb09e] {
  font-size: 22px;
  font-weight: 800;
  color: #1a1d35;
  line-height: 1;
}
.dsv-kpi-rev[data-v-dcdcb09e] {
  font-size: 14px;
  font-weight: 700;
  color: #da2128;
}
.dsv-kpi-label[data-v-dcdcb09e] {
  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-dcdcb09e] { padding: 16px 16px 24px;
}
.dsv-kpi-card[data-v-dcdcb09e] { width: 100%;
}
.dsv-kpi-year[data-v-dcdcb09e] { padding: 12px 14px; font-size: 18px; min-width: 60px;
}
.dsv-kpi-stat[data-v-dcdcb09e] { padding: 10px 14px;
}
}

.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;
}

/* Prevent long CRM user labels from expanding the select width */
[data-v-59145ce8] .p-select-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-placeholder[data-v-59145ce8] { 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-59145ce8] {
  margin: 4px 0 0;
  padding: 10px 14px;
  background: #fee2e2;
  color: #b91c1c;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* 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-59145ce8] {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  padding: 12px 14px;
  color: #92400e;
}
.obi-work-inclusion-header[data-v-59145ce8] {
  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-59145ce8] { flex-shrink: 0;
}
.obi-work-inclusion-grid[data-v-59145ce8] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.obi-wi-tile[data-v-59145ce8] {
  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-59145ce8] {
  color: #b45309;
  flex-shrink: 0;
}
.obi-wi-tile-label[data-v-59145ce8] {
  font-size: 12px;
  font-weight: 600;
  color: #78350f;
  line-height: 1.3;
}

/* 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-59145ce8] {
  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-59145ce8]:focus-within {
  border-color: #da2128;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
}
.ds-currency-prefix[data-v-59145ce8] {
  color: #4e5a82;
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  pointer-events: none;
  flex-shrink: 0;
}
.ds-currency-native[data-v-59145ce8] {
  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-59145ce8]::-webkit-outer-spin-button,
.ds-currency-native[data-v-59145ce8]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── Add account popup body ── */
.ds-add-account-body[data-v-59145ce8] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ds-add-account-footer[data-v-59145ce8] {
  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-59145ce8] {
  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-59145ce8]  { flex-shrink: 0; margin-top: 1px;
}
.ds-add-crm-note span[data-v-59145ce8] { min-width: 0;
}

/* ── Practice selection ── */
.ds-practice-grid[data-v-59145ce8] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ds-practice-card[data-v-59145ce8] {
  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-59145ce8]:hover {
  border-color: #aab0cc;
  background: #f0f2fb;
  box-shadow: 0 3px 10px rgba(25,26,55,0.09);
}
.ds-practice-check[data-v-59145ce8] {
  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-59145ce8] { border-color: #da2128; background: #da2128;
}
.ds-practice-icon[data-v-59145ce8] {
  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-59145ce8] { background: #fee2e2; color: #da2128;
}
.ds-practice-code[data-v-59145ce8] { font-size: 13px; font-weight: 800; color: #4e5a82; letter-spacing: 0.4px; margin-top: 2px;
}
.ds-practice-card--on .ds-practice-code[data-v-59145ce8] { color: #da2128;
}
.ds-practice-name[data-v-59145ce8] { font-size: 10.5px; color: #9098b0; line-height: 1.35;
}
.ds-practice-card--on .ds-practice-name[data-v-59145ce8] { color: #b05560;
}
.ds-practice-loading[data-v-59145ce8] { font-size: 12px; color: #9098b0; padding: 16px 0; text-align: center;
}
@media (max-width: 640px)  {
.ds-practice-grid[data-v-59145ce8] { grid-template-columns: repeat(2, 1fr); max-width: 100%;
}
}

/* ── dss+ Assets ── */
.ds-asset-trigger[data-v-59145ce8] { max-width: 480px;
}
.ds-asset-reveal[data-v-59145ce8] {
  margin-top: 18px;
  padding: 16px 16px 10px;
  background: #f8f9fc;
  border: 1px solid #e4e7f0;
  border-radius: 10px;
}
.ds-asset-grid-header[data-v-59145ce8] { font-size: 12.5px; color: #4e5a82; line-height: 1.55; margin-bottom: 14px;
}
.ds-asset-legend[data-v-59145ce8] { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; flex-wrap: wrap;
}
.ds-asset-legend-item[data-v-59145ce8] { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #9098b0; font-weight: 500;
}
.ds-asset-legend-icon[data-v-59145ce8] { 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-59145ce8] { background: #fff0f0; border: 1px solid #f5c6c6; color: #da2128;
}
.ds-asset-legend-item--url .ds-asset-legend-icon[data-v-59145ce8] { background: #eff6ff; border: 1px solid #bcd0f7; color: #2563eb;
}
.ds-asset-loading[data-v-59145ce8] { font-size: 12px; color: #9098b0; padding: 12px 0; text-align: center;
}
.ds-asset-grid[data-v-59145ce8] { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 24px;
}
.ds-asset-row[data-v-59145ce8] {
  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-59145ce8]:hover { background: #eef0f8;
}
.ds-asset-row--checked[data-v-59145ce8] { background: #fff5f5;
}
.ds-asset-check[data-v-59145ce8] {
  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-59145ce8] { border-color: #da2128; background: #da2128;
}
.ds-asset-label[data-v-59145ce8] { flex: 1; font-size: 12.5px; color: #4e5a82; line-height: 1.3; min-width: 0;
}
.ds-asset-row--checked .ds-asset-label[data-v-59145ce8] { color: #da2128; font-weight: 600;
}
.ds-asset-link[data-v-59145ce8] {
  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-59145ce8]:hover { background: #fff0f0; color: #da2128; border-color: #f5c6c6;
}
.ds-asset-link--url[data-v-59145ce8]:hover { background: #eff6ff; color: #2563eb; border-color: #bcd0f7;
}
.ds-asset-link--empty[data-v-59145ce8] { border-color: transparent; background: transparent;
}
.ds-asset-extra-info[data-v-59145ce8] {
  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-59145ce8] { font-size: 13px; line-height: 1.5; color: #4e5a82; margin: 0;
}
.ds-asset-extra-line--red[data-v-59145ce8]  { color: #da2128;
}
.ds-asset-extra-line--bold[data-v-59145ce8] { font-weight: 800;
}
.ds-asset-extra-line--gray[data-v-59145ce8] { color: #9098b0;
}
.ds-asset-extra-link[data-v-59145ce8] { color: #da2128; font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
}
.ds-asset-extra-link[data-v-59145ce8]:hover { color: #b01820;
}
@media (max-width: 640px) {
.ds-asset-grid[data-v-59145ce8] { grid-template-columns: 1fr;
}
}

/* ── Key Milestone Dates ── */
.ds-ms-timeline[data-v-59145ce8] { display: flex; align-items: flex-start; overflow-x: auto; padding: 4px 0;
}
.ds-ms-card[data-v-59145ce8] { display: flex; flex-direction: column; align-items: center; min-width: 100px; flex: 1;
}
.ds-ms-connector[data-v-59145ce8] {
  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-59145ce8] { background: #191a37;
}
.ds-ms-badge[data-v-59145ce8] {
  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-59145ce8] { background: #191a37; color: #fff; box-shadow: 0 2px 6px rgba(25,26,55,0.22);
}
.ds-ms-body[data-v-59145ce8] { width: 100%; display: flex; flex-direction: column; align-items: center;
}
.ds-ms-name[data-v-59145ce8] {
  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-59145ce8] { width: 100%; display: flex; flex-direction: column; gap: 4px; padding: 0 3px; box-sizing: border-box;
}
.ds-ms-date-input[data-v-59145ce8] {
  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-59145ce8]:focus { border-color: #c8b800;
}
.ds-ms-ind-label[data-v-59145ce8] { font-size: 9.5px; font-weight: 600; color: #9098b0; font-style: italic; text-align: center; margin-top: 1px;
}
.ds-ms-ind-input[data-v-59145ce8] {
  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-59145ce8] {
  background: #191a37;
  color: #fff;
  border-color: #191a37;
}
.ds-ms-ind-input--filled[data-v-59145ce8]::-webkit-calendar-picker-indicator { filter: invert(1);
}
@media (max-width: 640px) {
.ds-ms-timeline[data-v-59145ce8] { flex-direction: column; align-items: stretch; overflow-x: visible; position: relative;
}
.ds-ms-timeline[data-v-59145ce8]::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-59145ce8] { display: none;
}
.ds-ms-card[data-v-59145ce8] { 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-59145ce8]:last-child { margin-bottom: 0;
}
.ds-ms-badge[data-v-59145ce8] { box-shadow: 0 0 0 4px #fff; flex-shrink: 0;
}
.ds-ms-body[data-v-59145ce8] { align-items: flex-start; flex: 1;
}
.ds-ms-name[data-v-59145ce8] { margin: 2px 0 6px; min-height: unset; text-align: left; padding: 0;
}
.ds-ms-date-wrap[data-v-59145ce8] { flex-direction: column; padding: 0; align-items: stretch; gap: 5px;
}
.ds-ms-date-input[data-v-59145ce8], .ds-ms-ind-input[data-v-59145ce8] { text-align: left;
}
}

/* ── NCDD / KYC ── */
.ds-kyc-list[data-v-477aaa9b] { 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-477aaa9b] { display: flow-root;
}
.ds-kyc-row[data-v-477aaa9b] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  flex-wrap: wrap;
}
.ds-kyc-question[data-v-477aaa9b] {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  color: #1a1d35;
  line-height: 1.5;
  font-weight: 500;
}
.ds-kyc-radios[data-v-477aaa9b] {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.ds-kyc-radio[data-v-477aaa9b] {
  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-477aaa9b]:hover { border-color: #9ca3af;
}
.ds-kyc-radio--yes[data-v-477aaa9b] { border-color: #16a34a; background: #f0fdf4;
}
.ds-kyc-radio--no[data-v-477aaa9b]  { border-color: #dc2626; background: #fff1f2;
}
.ds-kyc-radio-input[data-v-477aaa9b] { display: none;
}
.ds-kyc-radio-label[data-v-477aaa9b] {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #6b7280;
  transition: color 0.15s;
}
.ds-kyc-radio--yes .ds-kyc-radio-label[data-v-477aaa9b] { color: #15803d;
}
.ds-kyc-radio--no  .ds-kyc-radio-label[data-v-477aaa9b] { color: #b91c1c;
}
.ds-kyc-radio--active .ds-kyc-radio-label[data-v-477aaa9b] { color: #fff;
}
.ds-kyc-note[data-v-477aaa9b] {
  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-477aaa9b] { padding-bottom: 12px;
}
.ds-kyc-freetext[data-v-477aaa9b] { padding: 14px 0;
}
.ds-kyc-divider[data-v-477aaa9b] { height: 1px; background: #e4e7f0;
}
@media (max-width: 640px) {
.ds-kyc-row[data-v-477aaa9b] { flex-direction: column; align-items: flex-start; gap: 10px;
}
.ds-kyc-radios[data-v-477aaa9b] { width: 100%;
}
.ds-kyc-radio[data-v-477aaa9b] { 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-2c5c8697] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}
@media (max-width: 900px) {
.osq-loc-body[data-v-2c5c8697] { 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-2c5c8697] {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
}
.osq-sub-box-header[data-v-2c5c8697] {
  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-2c5c8697] {
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* ── On-site delivery sub-section ── */
.osq-sub-divider[data-v-2c5c8697] {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 0.25rem 0;
}
.osq-sub-header[data-v-2c5c8697] {
  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-2c5c8697],
.osq-loc-row[data-v-2c5c8697] {
  display: grid;
  grid-template-columns: 170px 1fr 1fr 32px;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.osq-loc-col-head[data-v-2c5c8697] {
  font-size: 0.75rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.osq-loc-col-other[data-v-2c5c8697] { padding-left: 0;
}
.osq-loc-col-btn[data-v-2c5c8697],
.osq-loc-btn-placeholder[data-v-2c5c8697] { width: 32px;
}
.osq-loc-label[data-v-2c5c8697] {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  line-height: 1.3;
}
.osq-loc-other-input[data-v-2c5c8697] {
  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-2c5c8697]:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.osq-loc-remove-btn[data-v-2c5c8697] {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fee2e2;
  color: #dc2626;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}
.osq-loc-remove-btn[data-v-2c5c8697]:hover { background: #fecaca;
}
.osq-loc-additional-header[data-v-2c5c8697] {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #6b7280;
  margin-top: 0.25rem;
}
.osq-loc-add-btn[data-v-2c5c8697] {
  align-self: flex-start;
  padding: 0.375rem 0.875rem;
  background: #f0f9ff;
  color: #0369a1;
  border: 1px dashed #7dd3fc;
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 500;
  margin-top: 0.25rem;
}
.osq-loc-add-btn[data-v-2c5c8697]:hover { background: #e0f2fe; border-color: #38bdf8;
}
@media (max-width: 640px) {
.osq-loc-headers[data-v-2c5c8697] { display: none;
}
.osq-loc-row[data-v-2c5c8697] {
    grid-template-columns: 1fr 32px;
    grid-template-rows: auto auto auto;
}
.osq-loc-row .osq-loc-label[data-v-2c5c8697]      { grid-column: 1 / -1;
}
.osq-loc-row[data-v-2c5c8697] .bp-select   { grid-column: 1;
}
.osq-loc-row .osq-loc-other-input[data-v-2c5c8697] { grid-column: 1;
}
.osq-loc-row .osq-loc-remove-btn[data-v-2c5c8697]  { grid-column: 2; grid-row: 2;
}
.osq-loc-row .osq-loc-btn-placeholder[data-v-2c5c8697] { display: none;
}
}

/* ── Opportunity Score ── */
.osq-score-list[data-v-2c5c8697] {
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
}
.osq-score-item[data-v-2c5c8697] {
  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-2c5c8697]:last-child { border-bottom: none;
}
.osq-score-item[data-v-2c5c8697]:hover { background: #f9fafb;
}
.osq-score-item-left[data-v-2c5c8697] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.osq-score-item-label[data-v-2c5c8697] {
  font-size: 0.875rem;
  color: #111827;
  line-height: 1.45;
}
.osq-score-item-question[data-v-2c5c8697] {
  font-size: 0.8rem;
  color: #da2128;
  line-height: 1.4;
}
.osq-score-item-right[data-v-2c5c8697] {
  flex-shrink: 0;
}
.osq-score-radios[data-v-2c5c8697] {
  display: flex;
  gap: 0.375rem;
}
.osq-score-radio[data-v-2c5c8697] {
  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-2c5c8697]:hover { border-color: #9ca3af; color: #374151;
}
.osq-score-radio--yes[data-v-2c5c8697] {
  border-color: #16a34a;
  background: #f0fdf4;
  color: #15803d;
}
.osq-score-radio--no[data-v-2c5c8697] {
  border-color: #dc2626;
  background: #fff1f2;
  color: #b91c1c;
}
.osq-score-radio-input[data-v-2c5c8697] { display: none;
}
.osq-score-footer[data-v-2c5c8697] {
  margin-top: 1rem;
  padding-top: 0.75rem;
}
.osq-score-result-row[data-v-2c5c8697] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}
.osq-score-result-label[data-v-2c5c8697] {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  text-align: right;
}
.osq-score-result-value[data-v-2c5c8697] {
  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-2c5c8697] { flex-direction: column; gap: 0.5rem;
}
.osq-score-radios[data-v-2c5c8697] { justify-content: flex-start;
}
}

/* ── Win Probability ── */
.osq-wp-groups[data-v-2c5c8697] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.osq-wp-group[data-v-2c5c8697] {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
}
.osq-wp-group-header[data-v-2c5c8697] {
  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-2c5c8697] {
  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-2c5c8697] {
  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-2c5c8697]:last-child { border-bottom: none;
}
.osq-wp-row-card[data-v-2c5c8697]:hover:not(.osq-wp-row-card--selected) {
  background: #f9fafb;
}
.osq-wp-row-card[data-v-2c5c8697]:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px #86efac;
}
.osq-wp-row-card--selected[data-v-2c5c8697] {
  background: #f0fdf4;
  border-left-color: #22c55e;
}
.osq-wp-row-card-label[data-v-2c5c8697] {
  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-2c5c8697] {
  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-2c5c8697] {
  border-color: #86efac;
  color: #16a34a;
}
.osq-wp-select-btn--selected[data-v-2c5c8697] {
  background: #22c55e;
  border-color: #16a34a;
  color: #fff;
}
.osq-score-result-value--neutral[data-v-2c5c8697] {
  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-2c5c8697] {
  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-2c5c8697] {
  font-weight: 700;
  color: #1a1d35;
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}
.osq-wp-guidelines__list[data-v-2c5c8697] {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.osq-wp-guidelines__item[data-v-2c5c8697] {
  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-2c5c8697]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.osq-wp-guidelines__item--good[data-v-2c5c8697]::before       { background: #16a34a;
}
.osq-wp-guidelines__item--borderline[data-v-2c5c8697]::before { background: #f59e0b;
}
.osq-wp-guidelines__item--weak[data-v-2c5c8697]::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-2c5c8697] {
  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-2c5c8697] {
  flex-shrink: 0;
  color: #da2128;                         /* brand red for the icon */
}
.osq-crm-winprob-note__text[data-v-2c5c8697] {
  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-2c5c8697] {
  font-weight: 700;
  color: #b91c1c;
}
.osq-wp-sub-result[data-v-2c5c8697] {
  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-2c5c8697] {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
}
.osq-potential-competitors .osq-wp-group-header[data-v-2c5c8697] {
  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-2c5c8697] {
  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-2c5c8697] { 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-2c5c8697] .bp-label {
  color: #da2128;
}

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

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

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

/* Read-only OBI field display */
.ds-ois-readonly-field[data-v-4a9833be] {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ds-ois-readonly-label[data-v-4a9833be] {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}
.ds-ois-readonly-value[data-v-4a9833be] {
  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-4a9833be] {
  font-weight: 700;
  color: #1a1d35;
  margin-right: 6px;
}

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

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

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

/* Header */
.ds-ois-th[data-v-4a9833be] {
  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-4a9833be]  { width: 160px;
}
.ds-ois-th--name[data-v-4a9833be]  { min-width: 200px;
}
.ds-ois-th--hours[data-v-4a9833be] { width: 130px;
}
.ds-ois-th--date[data-v-4a9833be]  { width: 180px;
}
.ds-ois-th--del[data-v-4a9833be]   { width: 48px;
}

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

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

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

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

/* Date input */
.ds-ois-date-input[data-v-4a9833be] {
  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-4a9833be]: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-4a9833be] {
  font-size: 11px;
  color: #b91c1c;
  line-height: 1.35;
}

/* Delete button */
.ds-ois-delete-btn[data-v-4a9833be] {
  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-4a9833be]:hover:not(:disabled) { background: #fef2f2;
}
.ds-ois-delete-btn[data-v-4a9833be]:disabled { opacity: 0.35; cursor: not-allowed;
}

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

/* ── Practice Split ── */
.ds-split-loading[data-v-4a9833be] {
  font-size: 12px;
  color: #9098b0;
  padding: 16px 0;
  text-align: center;
}
.ds-split-none[data-v-4a9833be] {
  font-size: 13px;
  color: #9098b0;
  padding: 20px 0 8px;
  font-style: italic;
}
.ds-split-grid[data-v-4a9833be] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ds-practice-card[data-v-4a9833be] {
  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-4a9833be] { opacity: 0.55;
}
.ds-practice-card--on[data-v-4a9833be] { border-color: #f5c6c6; background: #fff8f8;
}
.ds-practice-card--clickable[data-v-4a9833be] { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
.ds-practice-card--clickable[data-v-4a9833be]:hover { border-color: #f5c6c6;
}
.ds-practice-card--clickable.ds-practice-card--inactive[data-v-4a9833be]:hover { opacity: 0.8;
}
.ds-practice-check[data-v-4a9833be] {
  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-4a9833be] { border-color: #da2128; background: #da2128;
}
.ds-practice-icon[data-v-4a9833be] {
  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-4a9833be] { background: #fee2e2; color: #da2128;
}
.ds-practice-code[data-v-4a9833be] { font-size: 13px; font-weight: 800; color: #4e5a82; letter-spacing: 0.4px; margin-top: 2px;
}
.ds-practice-card--on .ds-practice-code[data-v-4a9833be] { color: #da2128;
}
.ds-practice-name[data-v-4a9833be] { font-size: 10.5px; color: #9098b0; line-height: 1.35;
}
.ds-practice-card--on .ds-practice-name[data-v-4a9833be] { 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-4a9833be] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  width: 100%;
}
.ds-split-label[data-v-4a9833be] {
  font-size: 11.5px;
  font-weight: 600;
  color: #4e5a82;
  align-self: flex-start;
}
.ds-split-input-row[data-v-4a9833be] {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
}
.ds-split-input[data-v-4a9833be] {
  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-4a9833be]:focus { border-color: #da2128; box-shadow: 0 0 0 2px rgba(218, 33, 40, 0.1);
}
.ds-split-pct[data-v-4a9833be] { font-size: 13px; font-weight: 600; color: #6b7280; flex-shrink: 0;
}
.ds-split-footer[data-v-4a9833be] {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1.5px dashed #e4e7f0;
}
.ds-split-total-row[data-v-4a9833be] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.ds-split-total-label[data-v-4a9833be] { font-size: 13px; font-weight: 600; color: #4e5a82;
}
.ds-split-total-input-wrap[data-v-4a9833be] { display: flex; align-items: center; gap: 5px;
}
.ds-split-input--total[data-v-4a9833be] {
  width: 72px;
  background: #f0f1f5;
  cursor: not-allowed;
  font-weight: 800;
  color: #1a1d35;
  border-color: #e4e7f0;
}
.ds-split-input--total[data-v-4a9833be]:focus { border-color: #e4e7f0; box-shadow: none;
}
.ds-split-warning[data-v-4a9833be] {
  margin-top: 8px;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: #dc2626;
}

/* ── GO / NO-GO DECISION ── */
.ds-gonogo-meta-row[data-v-4a9833be] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 24px;
}
.ds-gonogo-grid[data-v-4a9833be] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ds-gonogo-btn[data-v-4a9833be] {
  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-4a9833be] {
  background: linear-gradient(145deg, #f0fdf4, #dcfce7);
  border-color: #86efac;
  color: #15803d;
}
.ds-gonogo-btn--go[data-v-4a9833be]: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-4a9833be] {
  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-4a9833be] {
  background: linear-gradient(145deg, #fff1f2, #ffe4e6);
  border-color: #fca5a5;
  color: #b91c1c;
}
.ds-gonogo-btn--nogo[data-v-4a9833be]: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-4a9833be] {
  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-4a9833be] {
  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-4a9833be] {
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
}
.ds-gonogo-btn--go.ds-gonogo-btn--active .ds-gonogo-icon[data-v-4a9833be] {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.ds-gonogo-btn--nogo .ds-gonogo-icon[data-v-4a9833be] {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}
.ds-gonogo-btn--nogo.ds-gonogo-btn--active .ds-gonogo-icon[data-v-4a9833be] {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.ds-gonogo-label[data-v-4a9833be] {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1;
}
.ds-gonogo-sublabel[data-v-4a9833be] {
  font-size: 11.5px;
  font-weight: 500;
  opacity: 0.72;
  letter-spacing: 0.2px;
}

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

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

.tee-info-wrap[data-v-5a03bc76] {
  position: relative;
  display: inline-flex;
  margin-left: auto;
  vertical-align: middle;
  cursor: help;
  outline: none;
}
.tee-info-icn[data-v-5a03bc76]                        { color: #da2128;
}
.tee-info-wrap:hover      .tee-info-icn[data-v-5a03bc76],
.tee-info-wrap:focus-visible .tee-info-icn[data-v-5a03bc76] { 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-wrap[data-v-d529fde3] { display: flex; flex-direction: column; gap: 0;
}

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

/* ── KPI panel ── */
.tee-kpi-body[data-v-d529fde3] { display: flex; gap: 10px; flex-wrap: wrap;
}
.kpi-card[data-v-d529fde3] { background: #f8f9fc; border: 1px solid #e4e7f0; border-radius: 10px; padding: 10px 14px; min-width: 110px;
}
.kpi-lbl[data-v-d529fde3] { 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-d529fde3] { 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-d529fde3] {
  font-size: 13px;
  font-weight: 700;
  color: #4e5a82;
  margin-right: 4px;
}
.kpi-val--date[data-v-d529fde3] { font-size: 13px; font-weight: 600; color: #1a1d35;
}
.kpi-val--blue[data-v-d529fde3] { color: #2563eb;
}
.kpi-val--pending[data-v-d529fde3] { color: #c8cde0;
}
.kpi-card--calc[data-v-d529fde3] { 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-d529fde3]   { background: #dcfce7; border-color: #86efac;
}
.kpi-card--status-warn[data-v-d529fde3] { background: #fef3c7; border-color: #fde68a;
}
.kpi-card--status-ok   .kpi-val--status[data-v-d529fde3] { color: #166534;
}
.kpi-card--status-warn .kpi-val--status[data-v-d529fde3] { color: #92400e;
}
.kpi-val--status[data-v-d529fde3] { 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-d529fde3],
.tee-info-wrap:focus-within .tee-info-tip[data-v-d529fde3] { visibility: visible; opacity: 1;
}

/* ── Toolbar ── */
.tee-toolbar[data-v-d529fde3] { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}
.tee-toolbar-left[data-v-d529fde3]  { flex: 1; min-width: 200px; max-width: 300px;
}
.tee-toolbar-right[data-v-d529fde3] { display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.tee-pm-select[data-v-d529fde3] { width: 100%;
}
@media (max-width: 640px) {
.tee-toolbar-left[data-v-d529fde3]  { max-width: 100%; width: 100%;
}
.tee-toolbar-right[data-v-d529fde3] { width: 100%; justify-content: flex-end;
}
}
.tee-btn-primary[data-v-d529fde3] { 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-d529fde3]:hover { background: #23254a;
}
.tee-btn-ghost[data-v-d529fde3] { 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-d529fde3]:hover { border-color: #da2128; color: #da2128;
}

/* ── Section banners ── */
.tee-banners[data-v-d529fde3] { display: flex;
}
.tee-banner-res[data-v-d529fde3] { flex-shrink: 0; padding: 5px 12px; background: #191a37; border-radius: 8px 0 0 0; display: flex; align-items: center; gap: 7px;
}
.tee-banner-handle-spacer[data-v-d529fde3] { width: 8px; background: #b8bdd0; flex-shrink: 0;
}
.tee-banner-wee[data-v-d529fde3] { flex: 1; padding: 5px 12px; background: #0f4c75; border-radius: 0 8px 0 0; display: flex; align-items: center; gap: 7px; min-width: 0;
}
.banner-txt[data-v-d529fde3] { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: rgba(255,255,255,0.85); white-space: nowrap;
}
.banner-sub[data-v-d529fde3] { font-size: 10px; color: rgba(255,255,255,0.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Grid outer ── */
.tee-grid-outer[data-v-d529fde3] { display: flex; border: 1px solid #d1d5e8; border-top: none; overflow: hidden;
}

/* ── Frozen panel ── */
.tee-frozen-panel[data-v-d529fde3] { flex-shrink: 0; overflow-x: auto; overflow-y: hidden; background: #fff; position: relative; z-index: 2;
}
.tee-frozen-panel[data-v-d529fde3]::-webkit-scrollbar { height: 7px;
}
.tee-frozen-panel[data-v-d529fde3]::-webkit-scrollbar-track { background: #f0f1f5;
}
.tee-frozen-panel[data-v-d529fde3]::-webkit-scrollbar-thumb { background: #c8cde0; border-radius: 4px;
}

/* ── Resize handle ── */
.tee-resize-handle[data-v-d529fde3] { flex-shrink: 0; width: 8px; background: #b8bdd0; cursor: col-resize; position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; transition: background 0.15s; -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
.tee-resize-handle[data-v-d529fde3]:hover { background: #6b7db8;
}
.tee-resize-handle.tee-resizing[data-v-d529fde3] { background: #da2128 !important;
}
.tee-resize-grip[data-v-d529fde3] { display: flex; flex-direction: column; gap: 3px; pointer-events: none;
}
.tee-resize-grip span[data-v-d529fde3] { display: block; width: 2px; height: 2px; border-radius: 50%; background: rgba(255,255,255,0.8);
}
.tee-resize-tip[data-v-d529fde3] { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #191a37; color: #fff; white-space: nowrap; padding: 5px 9px; border-radius: 5px; pointer-events: none; opacity: 0; transition: opacity 0.15s; text-align: center;
}
.tee-resize-tip-w[data-v-d529fde3] { font-size: 11px; font-weight: 700;
}
.tee-resize-tip-h[data-v-d529fde3] { font-size: 10px; font-weight: 500; color: rgba(255,255,255,0.75); margin-top: 2px;
}
.tee-resize-handle:hover .tee-resize-tip[data-v-d529fde3],
.tee-resize-handle.tee-resizing .tee-resize-tip[data-v-d529fde3] { opacity: 1;
}

/* 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-d529fde3] {
  margin: 0 0 10px;
  padding: 12px 16px 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
}
.tee-notes-header[data-v-d529fde3] {
  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-d529fde3] { flex-shrink: 0;
}
.tee-notes-title[data-v-d529fde3] {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.tee-notes-list[data-v-d529fde3] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tee-notes-item[data-v-d529fde3] {
  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-d529fde3]::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.tee-notes-item--tip[data-v-d529fde3]  { color: #1e3a8a;
}
.tee-notes-item--tip[data-v-d529fde3]::before  { background: #1e3a8a;
}
.tee-notes-item--warn[data-v-d529fde3] { color: #991b1b;
}
.tee-notes-item--warn[data-v-d529fde3]::before { background: #b91c1c;
}

/* Inline edit-icon glyph in the popup-fields bullet — matches the
   pencil icon shown on each Role List row so the user knows exactly
   which icon to click. */
.tee-notes-edit-icon[data-v-d529fde3] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0 4px;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  background: #ffffff;
  color: #1e3a8a;
  vertical-align: middle;
}

/* ── Scroll panel ── */
.tee-scroll[data-v-d529fde3] { flex: 1; overflow-x: auto; overflow-y: hidden; min-width: 0;
}
.tee-scroll[data-v-d529fde3]::-webkit-scrollbar { height: 7px;
}
.tee-scroll[data-v-d529fde3]::-webkit-scrollbar-track { background: #f0f1f5;
}
.tee-scroll[data-v-d529fde3]::-webkit-scrollbar-thumb { background: #c8cde0; border-radius: 4px;
}

/* ── Tables ── */
.tee-tbl[data-v-d529fde3] { border-collapse: separate; border-spacing: 0; table-layout: fixed;
}

/* Frozen header */
.tee-fh[data-v-d529fde3] { background: #f5f6fa; font-size: 10.5px; font-weight: 700; color: #4e5a82; text-align: left; padding: 4px 7px; white-space: normal; line-height: 1.25; word-break: break-word; border-right: 1px solid #e4e7f0; border-bottom: 1px solid #d1d5e8; height: 36px; vertical-align: middle;
}
.tee-fh.center[data-v-d529fde3] { text-align: center;
}
.tee-fh.right[data-v-d529fde3]  { text-align: right;
}

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

/* Frozen data cells */
.tee-fd[data-v-d529fde3] { 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; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
.tee-fd.center[data-v-d529fde3] { text-align: center;
}
.tee-fd.right[data-v-d529fde3]  { text-align: right;
}

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

/* BaseSelect inside frozen table cells */
.tee-fd--bs[data-v-d529fde3] { padding: 0 !important; overflow: visible;
}

/* 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. */
.tee-fd--name[data-v-d529fde3] { padding: 6px 8px; font-size: 11.5px; color: #1a1d35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tee-cell-name[data-v-d529fde3] { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.tee-cell-name--placeholder[data-v-d529fde3] { color: #c8cde0; font-style: italic; font-weight: 600; letter-spacing: 0.3px;
}
[data-v-d529fde3] .tee-cell-bs { width: 100%;
}
[data-v-d529fde3] .tee-cell-bs .bp-form-group { margin: 0;
}
[data-v-d529fde3] .tee-cell-bs .bp-label { display: none;
}
[data-v-d529fde3] .tee-cell-bs .bp-select.p-select { border: none; border-radius: 0; background: transparent; box-shadow: none !important;
}
[data-v-d529fde3] .tee-cell-bs .bp-select.p-select:hover:not(.p-disabled) { background: #fffbeb;
}
[data-v-d529fde3] .tee-cell-bs .bp-select.p-select.p-focus { border-color: transparent; box-shadow: none !important;
}
[data-v-d529fde3] .tee-cell-bs .bp-select .p-select-label { font-size: 11px; font-weight: 600; color: #1a1d35; padding: 9px 2px; line-height: 1;
}
[data-v-d529fde3] .tee-cell-bs .bp-select .p-select-label.p-placeholder { font-weight: 400; color: #c8cde0;
}
[data-v-d529fde3] .tee-cell-bs .bp-select .p-select-dropdown { display: none;
}

/* BaseSearchSelect (Preferred Resource) — strip visible border / background so
   it visually matches the borderless BaseSelects and native inputs in this
   row. Keep the built-in search icon and clear (×) icon fully visible — they
   sit as absolute-positioned siblings of the input, so hiding the input's own
   border doesn't remove them. Compact padding + smaller font align with the
   other row cells. */
[data-v-d529fde3] .tee-cell-bs .bp-search-single .p-autocomplete-input {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
  font-size: 11px;
  font-weight: 600;
  color: #1a1d35;
  /* Right padding keeps ~26px of clearance for the icon/× button on that side. */
  padding: 9px 26px 9px 4px;
  line-height: 1;
}
[data-v-d529fde3] .tee-cell-bs .bp-search-single .p-autocomplete-input:hover { background: #fffbeb;
}
[data-v-d529fde3] .tee-cell-bs .bp-search-single .p-autocomplete-input:focus { background: #fffbeb; box-shadow: none;
}
[data-v-d529fde3] .tee-cell-bs .bp-search-single .p-autocomplete-input::-moz-placeholder {
  color: #c8cde0;
  font-weight: 400;
}
[data-v-d529fde3] .tee-cell-bs .bp-search-single .p-autocomplete-input::placeholder {
  color: #c8cde0;
  font-weight: 400;
}
/* Icons sit at right:8-10px on top of the input — shift them a hair right so
   they sit flush against the cell edge like the placeholder icons do on
   sibling BaseSelects. */
[data-v-d529fde3] .tee-cell-bs .bp-search-single-icon  { right: 4px;
}
[data-v-d529fde3] .tee-cell-bs .bp-search-single-clear { right: 2px;
}

/* Row hover */
.tee-row:nth-child(even) .tee-fd[data-v-d529fde3] { background: #fafbfd;
}
.tee-row:hover .tee-fd[data-v-d529fde3], .tee-row.hovered .tee-fd[data-v-d529fde3] { background: #eef2ff !important;
}
.tee-wk-row:hover .tee-wk[data-v-d529fde3], .tee-wk-row.hovered .tee-wk[data-v-d529fde3] { background: #f4f6ff !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. */

/* Delete button toggle */
.row-num[data-v-d529fde3] { font-size: 11.5px; font-weight: 600; color: #9098b0; display: block;
}
.row-del[data-v-d529fde3] { display: none; background: transparent; border: none; color: #f87171; cursor: pointer; width: 22px; height: 22px; border-radius: 4px; align-items: center; justify-content: center; font-family: inherit;
}
.row-del[data-v-d529fde3]:hover { background: #fef2f2; color: #dc2626;
}
.tee-row:hover .row-num[data-v-d529fde3], .tee-row.hovered .row-num[data-v-d529fde3] { display: none;
}
.tee-row:hover .row-del[data-v-d529fde3], .tee-row.hovered .row-del[data-v-d529fde3] { display: inline-flex;
}

/* Edit button */
.tee-fd--edit-btn[data-v-d529fde3] { padding: 0 !important; text-align: center; vertical-align: middle;
}
.row-edit[data-v-d529fde3] {
  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-edit[data-v-d529fde3]:hover { background: #eef2ff; color: #4f46e5;
}

/* Rate colours */
.rate-low[data-v-d529fde3] { color: #da2128 !important; font-weight: 700;
}
.rate-ok[data-v-d529fde3]  { color: #16a34a !important; font-weight: 700;
}

/* Weekly header cells */
.tee-mh[data-v-d529fde3] { 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-d529fde3] { 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-d529fde3] { background: #dbeafe; color: #1d4ed8;
}
.tee-dh[data-v-d529fde3] { 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-d529fde3] { background: #dbeafe; color: #1d4ed8;
}

/* Effort cells */
.tee-wk[data-v-d529fde3] { 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;
}
.tee-wk.cur[data-v-d529fde3]  { background: #eff6ff;
}
.tee-wk.past[data-v-d529fde3] { background: #fafbfd;
}
.tee-eff-inp[data-v-d529fde3] { 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-d529fde3]:focus { background: #fffbeb; box-shadow: inset 0 0 0 2px #f59e0b;
}
.tee-eff-inp[data-v-d529fde3]::-moz-placeholder { color: #d1d5e8; font-weight: 400; font-size: 12px;
}
.tee-eff-inp[data-v-d529fde3]::placeholder { color: #d1d5e8; font-weight: 400; font-size: 12px;
}

/* Heat-map — text colour only, no background */
.e1 .tee-eff-inp[data-v-d529fde3] { color: #3b82f6;
}
.e2 .tee-eff-inp[data-v-d529fde3] { color: #2563eb;
}
.e3 .tee-eff-inp[data-v-d529fde3] { color: #1d4ed8;
}
.e4 .tee-eff-inp[data-v-d529fde3] { color: #1e40af;
}
.e5 .tee-eff-inp[data-v-d529fde3] { 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-d529fde3]                        { background: #fee2e2 !important;
}
.tee-wk.e-over .tee-eff-inp[data-v-d529fde3]           { color: #b91c1c;
}
.tee-wk-row:hover .tee-wk.e-over[data-v-d529fde3],
.tee-wk-row.hovered .tee-wk.e-over[data-v-d529fde3]    { background: #fecaca !important;
}

/* Totals row */
.tee-totals-row .tee-fd[data-v-d529fde3] { background: #f0f4fa !important; font-weight: 700; font-size: 12px; border-top: 2px solid #c8cde0;
}
.tee-totals-row .tee-wk[data-v-d529fde3] { 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-d529fde3] {
  background: #fafbfd;
  height: 126px;
  text-align: center;
  vertical-align: middle;
  color: #da2128;
  font-size: 12.5px;
  font-style: italic;
  border-bottom: 1px solid #f0f2f8;
}
/* Scrollable-panel variant — left-aligned with the text pinned to the visible
   left edge via position:sticky, so the message stays in view no matter how
   far the user has scrolled horizontally. */
.tee-empty-row .tee-empty-cell--scroll[data-v-d529fde3] {
  text-align: left;
  padding: 0;
}
.tee-empty-cell-text[data-v-d529fde3] {
  display: inline-block;
  position: sticky;
  left: 0;
  padding-left: 14px;
}
.tee-totals-row .tee-wk.cur[data-v-d529fde3] { background: #dbeafe !important; color: #1d4ed8;
}
.tot-num[data-v-d529fde3] { font-size: 11.5px; font-weight: 700; color: #1a1d35;
}
.tee-save-error[data-v-d529fde3] { 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-d529fde3] {
  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-d529fde3] { 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-d529fde3] { display: flex; flex-direction: column;
}
.tee-modal-cd-header[data-v-d529fde3] {
  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-d529fde3] { display: flex; flex-direction: column;
}
.tee-modal-name-header[data-v-d529fde3] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.tee-modal-tbd-check[data-v-d529fde3] {
  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-d529fde3] {
  margin: 0;
  width: 14px;
  height: 14px;
  accent-color: #da2128;
  cursor: pointer;
}
.tee-modal-remote-check[data-v-d529fde3] {
  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-d529fde3] {
  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-d529fde3] {
  cursor: not-allowed;
  color: #6b7280;
}
.tee-modal-remote-check--disabled input[type="checkbox"][data-v-d529fde3] {
  cursor: not-allowed;
}
.tee-modal-remote-check input[type="checkbox"][data-v-d529fde3]: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-d529fde3] .p-select.p-disabled,
.tee-fd--bs[data-v-d529fde3] .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-d529fde3] .p-select.p-disabled .p-select-label,
.tee-fd--bs[data-v-d529fde3] .p-select.p-disabled .p-select-label {
  color: #9ca3af;
  cursor: not-allowed;
}
.tee-modal-country-delivery[data-v-d529fde3] .p-select.p-disabled .p-select-dropdown,
.tee-fd--bs[data-v-d529fde3] .p-select.p-disabled .p-select-dropdown {
  color: #9ca3af;
  cursor: not-allowed;
}

/* Resource details: 2-column grid */
.tee-modal-form[data-v-d529fde3] { display: grid; grid-template-columns: 1fr 1fr; -moz-column-gap: 20px; column-gap: 20px; row-gap: 0;
}
.tee-modal-form[data-v-d529fde3] .bp-form-group { margin-bottom: 10px;
}
.tee-modal-span2[data-v-d529fde3] { grid-column: 1 / -1;
}

/* 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-d529fde3] {
  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-d529fde3]: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-d529fde3] {
  background: #f8f9fc;
}
.tee-currency-prefix[data-v-d529fde3] {
  color: #4e5a82;
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  pointer-events: none;
  flex-shrink: 0;
}
.tee-currency-native[data-v-d529fde3] {
  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-d529fde3]::-webkit-outer-spin-button,
.tee-currency-native[data-v-d529fde3]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.tee-currency-native[readonly][data-v-d529fde3] {
  cursor: default;
  color: #1a1d35;
}

/* Weekly effort: full-width at bottom */
.tee-modal-effort[data-v-d529fde3] { display: flex; flex-direction: column; gap: 8px; background: #f8f9fc; border: 1px solid #e4e7f0; border-radius: 10px; padding: 14px;
}
.tee-modal-effort-hdr[data-v-d529fde3] { 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-d529fde3] { 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-d529fde3] { overflow-x: auto; overflow-y: visible; display: flex; gap: 10px; padding-bottom: 6px; padding-top: 10px;
}
.tee-modal-effort-scroll[data-v-d529fde3]::-webkit-scrollbar { height: 6px;
}
.tee-modal-effort-scroll[data-v-d529fde3]::-webkit-scrollbar-track { background: #eaecf4; border-radius: 4px;
}
.tee-modal-effort-scroll[data-v-d529fde3]::-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-d529fde3] {
  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-d529fde3] { flex-shrink: 0;
}
.tee-modal-month-hdr[data-v-d529fde3] { 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-d529fde3] { display: flex; gap: 3px;
}
.tee-week-tile[data-v-d529fde3] { 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-d529fde3] { border-color: #93c5fd; background: #eff6ff;
}
.tee-week-tile.tile-past[data-v-d529fde3] { background: #fafbfd; opacity: 0.75;
}
.tile-wlbl[data-v-d529fde3] { font-size: 11px; font-weight: 700; color: #4e5a82; padding: 5px 2px 2px; line-height: 1;
}
.tile-date[data-v-d529fde3] { font-size: 10px; color: #9098b0; padding-bottom: 4px; line-height: 1;
}
.tile-inp[data-v-d529fde3] { 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-d529fde3] { border-top-color: #93c5fd;
}
.tile-inp[data-v-d529fde3]:focus { background: #fffbeb;
}
.tile-inp[data-v-d529fde3]::-moz-placeholder { color: #d1d5e8; font-weight: 400; font-size: 11px;
}
.tile-inp[data-v-d529fde3]::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-d529fde3]                 { background: #fee2e2;
}
.tee-week-tile.tile-over .tile-inp[data-v-d529fde3]       { 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-d529fde3] {
  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-d529fde3] { padding-top: 4px;
}
.tee-modal-footer[data-v-d529fde3] { display: flex; align-items: center; justify-content: flex-end; width: 100%; gap: 12px;
}
.footer-total-lbl[data-v-d529fde3] { font-size: 11px; font-weight: 600; color: #9098b0; text-transform: uppercase; letter-spacing: 0.5px;
}
.footer-total-val[data-v-d529fde3] { font-size: 20px; font-weight: 800; color: #1a1d35;
}
.tee-modal-footer-actions[data-v-d529fde3] { display: flex; gap: 8px;
}

/* ── Preferred Skills trigger (scoped — reaches component root) ── */
.tee-skill-section[data-v-d529fde3] { position: relative; display: flex; flex-direction: column; gap: 6px;
}
.tee-skill-label[data-v-d529fde3]   { font-size: 12px; font-weight: 600; color: #374151; letter-spacing: 0.1px;
}
.tee-skill-tree[data-v-d529fde3]    { width: 100%;
}
[data-v-d529fde3] .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-d529fde3] .tee-skill-tree.p-treeselect:hover { border-color: #9098b0;
}
[data-v-d529fde3] .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-d529fde3] .tee-skill-tree .p-treeselect-label-container { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden;
}
[data-v-d529fde3] .tee-skill-tree .p-treeselect-label { width: 100%; padding: 0; display: flex; align-items: center;
}
[data-v-d529fde3] .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-d529fde3] { 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-d529fde3] {
  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-d529fde3] { color: #4f46e5; flex-shrink: 0;
}

/* Table cell skill badge — compact, no margin */
.tee-fd--skill[data-v-d529fde3] { 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-d529fde3] { text-align: center; font-weight: 700; color: #4e5a82;
}
.tee-fd--skill-count .tee-skill-none[data-v-d529fde3] { font-weight: 400; color: #9098b0;
}
.tee-skill-badge--cell[data-v-d529fde3] {
  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-d529fde3] { 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;
}

.dss-tab[data-v-11dbf87e] {
  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-11dbf87e] {
  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-11dbf87e]:nth-child(2) { text-align: left;  padding-left: 12px;
}
.dss-col-headers > div[data-v-11dbf87e]:nth-child(3) { text-align: right; padding-right: 12px;
}
.dss-col-headers > div[data-v-11dbf87e]: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-11dbf87e] {
  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-11dbf87e] {
  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-11dbf87e]:last-child { border-bottom: none;
}
.dss-cell-label[data-v-11dbf87e] {
  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-11dbf87e] {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dss-cell-label--inline[data-v-11dbf87e] .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-11dbf87e] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0;
}
.dss-cell-label-line[data-v-11dbf87e] {
  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-11dbf87e] .tee-info-wrap {
  margin-left: 0;
}
.dss-cell-label-note[data-v-11dbf87e] {
  font-size: 11.5px;
  font-weight: 500;
  color: #b91c1c;
  line-height: 1.35;
}
.dss-cell-input[data-v-11dbf87e] {
  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-11dbf87e] .bp-form-group {
  margin: 0;
}
.dss-cell-input[data-v-11dbf87e] .bp-label {
  display: none;
}
.dss-cell-total[data-v-11dbf87e] {
  text-align: right;
  padding-right: 12px;
  font-size: 13px;
  color: #1a1d35;
  font-weight: 600;
}
.dss-cell-total.dim[data-v-11dbf87e] {
  color: #9ca3af;
  font-weight: 400;
}
/* 4th column — mirrors .dss-cell-total for the OBI-currency conversion.
   Rendered on every row (dim placeholder or value) so the grid stays aligned. */
.dss-cell-total-fx[data-v-11dbf87e] {
  text-align: right;
  padding-right: 12px;
  font-size: 13px;
  color: #1a1d35;
  font-weight: 600;
}
.dss-cell-total-fx.dim[data-v-11dbf87e] {
  color: #9ca3af;
  font-weight: 400;
}
.dss-readonly[data-v-11dbf87e] {
  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-11dbf87e] {
  display: inline-flex;
  gap: 0.375rem;
}
.dss-yn-radio[data-v-11dbf87e] {
  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-11dbf87e]:hover { border-color: #9ca3af; color: #374151;
}
.dss-yn-radio--yes[data-v-11dbf87e] {
  border-color: #16a34a;
  background: #f0fdf4;
  color: #15803d;
}
.dss-yn-radio--no[data-v-11dbf87e] {
  border-color: #dc2626;
  background: #fff1f2;
  color: #b91c1c;
}
.dss-yn-radio-input[data-v-11dbf87e] { 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-11dbf87e],
.dss-yn-radio--locked[data-v-11dbf87e]: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-11dbf87e] {
  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-11dbf87e] {
  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-11dbf87e] {
  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-11dbf87e]:focus {
  border-color: #1a3ea6;
  box-shadow: 0 0 0 3px rgba(26, 62, 166, 0.10);
}
.dss-plain-input[data-v-11dbf87e]:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

/* 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-11dbf87e] {
  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-11dbf87e]:focus-within {
  border-color: #da2128;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
}
.ds-currency-prefix[data-v-11dbf87e] {
  color: #4e5a82;
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  pointer-events: none;
  flex-shrink: 0;
}
.ds-currency-native[data-v-11dbf87e] {
  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-11dbf87e] {
  background: #f4f6fb;
}
.dss-currency-readonly .ds-currency-native[data-v-11dbf87e] {
  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-11dbf87e] {
  background: #fbfafc;
  font-weight: 700;
}
.dss-row--subtotal .dss-cell-label[data-v-11dbf87e],
.dss-row--subtotal .dss-cell-total[data-v-11dbf87e] {
  font-weight: 700;
}
.dss-row--subtotal .dss-cell-input[data-v-11dbf87e] {
  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-11dbf87e] {
  font-weight: 700;
}

/* Highlighted list-price + final-price rows. */
.dss-row--list-price[data-v-11dbf87e] {
  background: #f4f6fb;
}
.dss-row--list-price .dss-cell-total[data-v-11dbf87e] { font-size: 14px;
}
.dss-row--final-price[data-v-11dbf87e] {
  background: #eef4ee;
  border-top: 2px solid #3d5c48;
  border-bottom: 2px solid #3d5c48;
}
.dss-row--final-price .dss-cell-label[data-v-11dbf87e],
.dss-row--final-price .dss-cell-total[data-v-11dbf87e] {
  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-11dbf87e] {
  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-11dbf87e]:focus-within {
  border-color: #1a3ea6;
  box-shadow: 0 0 0 3px rgba(26, 62, 166, 0.10);
}
.dss-pct-input[data-v-11dbf87e] {
  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-11dbf87e]:disabled { color: #9ca3af; cursor: not-allowed;
}
.dss-pct-suffix[data-v-11dbf87e] {
  color: #6b7280;
  font-weight: 600;
  font-size: 13px;
  pointer-events: none;
}

/* Approval status chip. */
.dss-approval[data-v-11dbf87e] {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.dss-approval--ok[data-v-11dbf87e]   { background: #dcfce7; color: #14532d;
}
.dss-approval--warn[data-v-11dbf87e] { 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-11dbf87e] {
  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-11dbf87e] {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 260px 160px 160px;
  padding: 0 16px 8px;
}
.dss-row-hint__body[data-v-11dbf87e] {
  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-11dbf87e] {
    grid-template-columns: 1fr;
    padding: 4px 16px 8px;
}
.dss-row-hint__body[data-v-11dbf87e] {
    grid-column: auto;
    padding: 0;
}
}
.ds-save-error[data-v-11dbf87e] {
  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-11dbf87e] { display: none;
}
.dss-row[data-v-11dbf87e] {
    grid-template-columns: 1fr;
    row-gap: 6px;
    align-items: start;
    padding: 12px 16px;
}
.dss-cell-input[data-v-11dbf87e], .dss-cell-total[data-v-11dbf87e] {
    text-align: left;
    padding: 0;
}
}

.tpv-tab[data-v-cef76998] {
  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-cef76998] {
  margin-bottom: 16px;
}
.tpv-vendor-header[data-v-cef76998] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tpv-vendor-title[data-v-cef76998] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tpv-remove-btn[data-v-cef76998] {
  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-cef76998]:hover:not(:disabled) { background: rgba(255, 255, 255, 0.15);
}
.tpv-remove-btn[data-v-cef76998]:disabled              { opacity: 0.4; cursor: not-allowed;
}
.tpv-section-body[data-v-cef76998] {
  padding: 20px 18px;
}
.tpv-two-col[data-v-cef76998] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}
@media (max-width: 640px) {
.tpv-two-col[data-v-cef76998] { 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-cef76998] {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px 24px;
  margin-top: 16px;
}
@media (max-width: 640px) {
.tpv-three-col[data-v-cef76998] { 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-cef76998] 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-cef76998] input {
  background: #16a34a !important;
  color: #ffffff !important;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.tpv-status--gap[data-v-cef76998] 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-cef76998] {
  margin-top: 6px;
  font-size: 12px;
  color: #b91c1c;
  line-height: 1.4;
}
.tpv-field[data-v-cef76998] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tpv-label[data-v-cef76998] {
  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-cef76998] {
  -moz-appearance: textfield;
}
.tpv-num-input[data-v-cef76998]::-webkit-outer-spin-button,
.tpv-num-input[data-v-cef76998]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Add Vendor button row */
.tpv-add-row[data-v-cef76998] {
  display: flex;
  justify-content: flex-start;
  padding: 8px 0 4px;
}
.tpv-add-btn[data-v-cef76998] {
  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-cef76998]:hover:not(:disabled) { background: #262957;
}
.tpv-add-btn[data-v-cef76998]: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-cef76998] {
  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-cef76998] {
  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-cef76998] {
  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-cef76998] {
  overflow-x: auto;
  overflow-y: hidden;
  background: #fff;
  border-bottom-left-radius:  4px;
  border-bottom-right-radius: 4px;
}
.tpv-grid[data-v-cef76998] {
  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-cef76998] {
  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-cef76998] {
  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-cef76998],
.tpv-grid tbody td[data-v-cef76998] {
  padding: 8px 10px;
  border-bottom: 1px solid #eef0f5;
  border-right: 1px solid #eef0f5;
  white-space: nowrap;
}
.tpv-grid tbody td[data-v-cef76998] {
  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-cef76998] {
  padding: 4px 6px !important;
  min-width: 140px;
  color: #1a1d35;
}
.tpv-grid-cell-select[data-v-cef76998] .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-cef76998] {
  padding: 4px 6px !important;
  min-width: 120px;
  color: #1a1d35;
}
.tpv-grid-cell-num .tpv-num-input[data-v-cef76998] {
  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-cef76998] {
  padding: 4px 6px !important;
  min-width: 100px;
  color: #1a1d35;
}
.tpv-grid-cell-days .tpv-days-input[data-v-cef76998] {
  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-cef76998] {
  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-cef76998] {
  text-align: center;
  color: #6b7280;
}
.tpv-grid tbody td.tpv-grid-cell-gap[data-v-cef76998] {
  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-cef76998],
.tpv-grid tbody tr:last-child td[data-v-cef76998] {
  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-cef76998] {
  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-cef76998] {
  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-cef76998] {
  z-index: 3;
}

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

/* Box 1 helper. */
.wr-helper[data-v-fd112c22] {
  font-size: 12.5px;
  color: #4e5a82;
  padding: 8px 10px;
  border-radius: 6px;
  background: #f4f6fb;
}
.wr-helper--warn[data-v-fd112c22] {
  color: #b91c1c;
  background: #fee2e2;
}

/* Box 1 table. */
.wr-table-scroll[data-v-fd112c22] {
  overflow-x: auto;
  border: 1px solid #e2e5ee;
  border-radius: 6px;
  background: #ffffff;
}
.wr-table[data-v-fd112c22] {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.wr-table thead th[data-v-fd112c22] {
  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-fd112c22] {
  padding: 8px 10px;
  border-bottom: 1px solid #eef0f5;
  color: #1a1d35;
  white-space: nowrap;
}
.wr-table tbody tr:last-child td[data-v-fd112c22] {
  border-bottom: none;
}
.wr-table tbody tr:nth-child(even) td[data-v-fd112c22] {
  background: #f7f8fc;
}
.wr-cell-num[data-v-fd112c22] {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Box 2 — Resource Planning grid.
   Single-table layout with two sticky columns (Resource Name + Total
   Days) — mirrors the Excel-style freeze-pane pattern used on the TPV
   rate-card grid. The scroll container's `overflow-x: auto` handles
   horizontal overflow when the week strip is wider than available
   space; the table itself uses `min-width: 100%` so it stretches to
   fill the container when the week strip is narrower.
   Fonts, tile widths, current-week accent, and e1..e5 value tints
   match TEE so the two calendars read the same across the app. */
.wr-planning-scroll[data-v-fd112c22] {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #e2e5ee;
  border-radius: 6px;
  background: #ffffff;
}
.wr-planning-scroll[data-v-fd112c22]::-webkit-scrollbar        { height: 7px;
}
.wr-planning-scroll[data-v-fd112c22]::-webkit-scrollbar-track  { background: #f0f1f5;
}
.wr-planning-scroll[data-v-fd112c22]::-webkit-scrollbar-thumb  { background: #c8cde0; border-radius: 4px;
}
.wr-planning-tbl[data-v-fd112c22] {
  /* 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-fd112c22] {
  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-fd112c22] {
  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-fd112c22] {
  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-fd112c22] { color: #1d4ed8; background: #eff6ff;
}
.wr-planning-dh[data-v-fd112c22] {
  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-fd112c22] { color: #1d4ed8; background: #eff6ff;
}

/* Body cells. */
.wr-planning-row[data-v-fd112c22] {
  height: 32px;
}
.wr-planning-td[data-v-fd112c22] {
  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-fd112c22] {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.wr-planning-row:nth-child(even) .wr-planning-td[data-v-fd112c22] { background: #f7f8fc;
}
.wr-planning-wk[data-v-fd112c22] {
  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-fd112c22] { background: #fafbfd; color: #6b7086;
}
.wr-planning-wk.cur[data-v-fd112c22]  { 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-fd112c22]:not(.cur):not(.past):not(.e1):not(.e2):not(.e3):not(.e4):not(.e5) { background: #f7f8fc;
}
.wr-planning-wk-val[data-v-fd112c22] {
  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-fd112c22] { background: #eef6ff;
}
.wr-planning-wk.e2[data-v-fd112c22] { background: #dbeafe;
}
.wr-planning-wk.e3[data-v-fd112c22] { background: #bfdbfe;
}
.wr-planning-wk.e4[data-v-fd112c22] { background: #93c5fd; color: #ffffff;
}
.wr-planning-wk.e5[data-v-fd112c22] { background: #60a5fa; color: #ffffff;
}

/* Totals row — sits at the bottom, no zebra tint, subtle divider up
   top so it reads as a summary section. */
.wr-planning-totals-row .wr-planning-td[data-v-fd112c22],
.wr-planning-totals-row .wr-planning-wk[data-v-fd112c22] {
  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-fd112c22] {
  font-style: italic;
  color: #92400e;
}
.wr-planning-row--unassigned .wr-planning-td[data-v-fd112c22],
.wr-planning-row--unassigned .wr-planning-wk[data-v-fd112c22]: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-fd112c22] {
  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-fd112c22] {
  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-fd112c22],
.wr-planning-tbl thead .wr-planning-sticky-total[data-v-fd112c22] {
  z-index: 3;
}
.wr-planning-empty[data-v-fd112c22] {
  padding: 20px 10px;
  text-align: center;
  color: #9098b0;
  font-style: italic;
  border-bottom: none;
  background: #ffffff;
}

.rsp-pending[data-v-d02fbf6d] {
  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-d02fbf6d] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.rsp-summary-field[data-v-d02fbf6d] {
  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-d02fbf6d] {
  width: 50%;
}
.rsp-summary-pair[data-v-d02fbf6d] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: center;
}
.rsp-summary-pct[data-v-d02fbf6d] {
  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-d02fbf6d] { 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-d02fbf6d] {
  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-d02fbf6d] {
  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-d02fbf6d] {
  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-d02fbf6d] { flex-shrink: 0; margin-top: 1px;
}
.rsp-value-note-body[data-v-d02fbf6d] { min-width: 0;
}
.rsp-value-note-body strong[data-v-d02fbf6d] { 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-d02fbf6d] {
  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-d02fbf6d] {
  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-d02fbf6d] {
  overflow-x: auto;
  border: 1px solid #e2e5ee;
  border-radius: 6px;
  background: #ffffff;
}
.rsp-table[data-v-d02fbf6d] {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  min-width: 720px;
}
.rsp-table thead th[data-v-d02fbf6d] {
  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-d02fbf6d] {
  text-align: left !important;
  min-width: 320px;
}
.rsp-table tbody td[data-v-d02fbf6d] {
  padding: 6px 10px;
  border-bottom: 1px solid #eef0f5;
  color: #1a1d35;
  white-space: nowrap;
}
.rsp-table tbody tr:last-child td[data-v-d02fbf6d] {
  border-bottom: none;
}
.rsp-cell-desc[data-v-d02fbf6d] {
  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-d02fbf6d] {
  padding: 4px 6px;
  min-width: 130px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rsp-cell-static[data-v-d02fbf6d] {
  text-align: right;
  padding-right: 12px;
  min-width: 90px;
  font-variant-numeric: tabular-nums;
}
.rsp-num-input[data-v-d02fbf6d] {
  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-d02fbf6d] {
  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-39ec8d35] .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-39ec8d35] .p-select {
  background: #fee2e2 !important;
  border-color: #f87171 !important;
}
.tle-invoiced-yes[data-v-39ec8d35] .p-select .p-select-label {
  background: transparent !important;
  color: #b91c1c !important;
}
.tle-invoiced-yes[data-v-39ec8d35] .p-select .p-select-dropdown svg {
  color: #b91c1c !important;
  stroke: #b91c1c !important;
}

/* No state — same pattern, business-green palette. */
.tle-invoiced-no[data-v-39ec8d35] .p-select {
  background: #dcfce7 !important;
  border-color: #86efac !important;
}
.tle-invoiced-no[data-v-39ec8d35] .p-select .p-select-label {
  background: transparent !important;
  color: #166534 !important;
}
.tle-invoiced-no[data-v-39ec8d35] .p-select .p-select-dropdown svg {
  color: #166534 !important;
  stroke: #166534 !important;
}
.tle-msg-block[data-v-39ec8d35] { margin-top: 6px;
}
.tle-msg[data-v-39ec8d35] {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
}
.tle-msg--red-caps[data-v-39ec8d35] {
  color: #da2128;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.tle-msg--grey[data-v-39ec8d35] {
  color: #4e5a82;
  font-weight: 500;
}
.tle-msg--red[data-v-39ec8d35] {
  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-39ec8d35] {
  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-39ec8d35] {
  background: #f8f9fc;
  border: 1px solid #e4e7f0;
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 110px;
}
.tle-kpi-card--calc[data-v-39ec8d35] { border-style: dashed;
}
.tle-kpi-lbl[data-v-39ec8d35] {
  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-39ec8d35] {
  font-size: 16px;
  font-weight: 800;
  color: #1a1d35;
  line-height: 1.1;
}
.tle-kpi-currency[data-v-39ec8d35] {
  color: #4e5a82;
  margin-right: 4px;
}
@media (max-width: 760px) {
.tle-summary-row[data-v-39ec8d35] { grid-template-columns: 1fr;
}
}

/* Empty state — same visual tone as TPV / TEE empties. */
.tle-empty[data-v-39ec8d35] {
  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-39ec8d35] {
  overflow-x: auto;
  border: 1px solid #e4e7f0;
  border-radius: 6px;
  background: #fff;
}
.tle-grid[data-v-39ec8d35] {
  border-collapse: collapse;
  width: -moz-max-content;
  width: max-content;
  min-width: 100%;
  font-size: 12px;
  color: #1a1d35;
}
.tle-grid thead th[data-v-39ec8d35] {
  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-39ec8d35],
.tle-grid tbody td[data-v-39ec8d35] {
  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-39ec8d35],
.tle-grid tbody tr:last-child td[data-v-39ec8d35] { 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-39ec8d35] {
  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-39ec8d35] {
  background: #f4f6fb;
  z-index: 3;
}
.tle-grid-name-cell[data-v-39ec8d35] {
  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-39ec8d35] {
  padding: 4px 6px;
  min-width: 120px;
}
.tle-grid-cell-num .tle-num-input[data-v-39ec8d35] {
  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-39ec8d35] {
  border-color: #da2128;
  box-shadow: 0 0 0 1px #da2128 inset;
}
.tle-grid-cell-num--missing .tle-num-input[data-v-39ec8d35]: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-39ec8d35] {
  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-39ec8d35] {
  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-2205e693] {
  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-2205e693] { flex-shrink: 0; margin-top: 1px;
}
.cfc-note-body[data-v-2205e693] { min-width: 0; display: flex; flex-direction: column; gap: 4px;
}
.cfc-note-body strong[data-v-2205e693] { display: inline; font-weight: 700; margin-right: 4px; color: #7f1d1d;
}
.cfc-note-line--sub[data-v-2205e693] {
  position: relative;
  padding-left: 12px;
}
.cfc-note-line--sub[data-v-2205e693]::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-2205e693] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: end;
}
@media (max-width: 720px) {
.cfc-contract-grid[data-v-2205e693] { 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-2205e693] {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.cfc-num-input[data-v-2205e693] {
  flex: 1;
  min-width: 0;
}
.cfc-suffix[data-v-2205e693] {
  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-2205e693] {
  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-2205e693] {
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
}
.cfc-q-item[data-v-2205e693] {
  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-2205e693]:last-child { border-bottom: none;
}
.cfc-q-item[data-v-2205e693]:hover      { background: #f9fafb;
}
.cfc-q-label[data-v-2205e693] {
  flex: 1;
  font-size: 0.875rem;
  color: #111827;
  line-height: 1.45;
}
.cfc-q-radios[data-v-2205e693] {
  flex-shrink: 0;
  display: flex;
  gap: 0.375rem;
}
.cfc-q-radio[data-v-2205e693] {
  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-2205e693]:hover { border-color: #9ca3af; color: #374151;
}
.cfc-q-radio--yes[data-v-2205e693] {
  border-color: #16a34a;
  background: #f0fdf4;
  color: #15803d;
}
.cfc-q-radio--no[data-v-2205e693] {
  border-color: #dc2626;
  background: #fff1f2;
  color: #b91c1c;
}
.cfc-q-radio-input[data-v-2205e693] { 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-2205e693] {
  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-2205e693]:last-child { border-bottom: none;
}
.cfc-q-followup-label[data-v-2205e693] {
  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-2205e693] {
  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-2205e693] {
  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-2205e693]:last-child { border-bottom: none;
}
.cfc-q-strip--warn[data-v-2205e693] {
  background: #fee2e2;
  color: #b91c1c;
}
@media (max-width: 640px) {
.cfc-q-item[data-v-2205e693]   { flex-direction: column; gap: 0.5rem;
}
.cfc-q-radios[data-v-2205e693] { justify-content: flex-start;
}
.cfc-q-select[data-v-2205e693] { width: 100%;
}
}

/* ── Invoicing Countries — per-market sub-boxes ────────────────
   One bordered card per market, laid out on a 3-column grid so all
   five markets fit in two rows (WCENA / TMEA / AP on row 1, LA / USC
   on row 2). Cells stretch to the tallest in each row via grid's
   default align-self so boxes stay level even when one has the "Other"
   free-text input open and others don't. Collapses to 2 then 1 column
   on narrower screens. */
.cfc-ic-body[data-v-2205e693] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 960px) {
.cfc-ic-body[data-v-2205e693] { grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.cfc-ic-body[data-v-2205e693] { grid-template-columns: 1fr;
}
}
.cfc-ic-box[data-v-2205e693] {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
}
.cfc-ic-header[data-v-2205e693] {
  padding: 0.55rem 0.875rem;
  background: #f3f4f6;
  font-size: 0.8rem;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #e5e7eb;
}
.cfc-ic-content[data-v-2205e693] {
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
/* Brand-red label on the "Other" free-text input for visual
   distinction, matching the same treatment used in OSQ Potential
   Competitors. `:deep` pierces the BaseInput scoped boundary. */
.cfc-ic-other[data-v-2205e693] .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-2205e693] {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.cfc-fin-bold[data-v-2205e693] {
  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-2205e693] {
  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-2205e693] {
  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-2205e693] {
  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-2205e693] {
  position: relative;
  padding-left: 1.1rem;
}
.cfc-fin-bullets li[data-v-2205e693]::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-2205e693] {
  margin-top: 0.35rem;
  font-style: italic;
  color: #4b5563;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.cfc-fin-example p[data-v-2205e693] { 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-2205e693] {
  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-2205e693] {
  font-size: 12.5px;
  color: #1a1d35;
  line-height: 1.55;
  white-space: pre-line;
}

/* ═══════ Outer wrapper ═══════ */
.vrbi-wrap[data-v-c9d2306e] {
  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-c9d2306e] :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-c9d2306e] {
  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-c9d2306e] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
}
.vrbi-tee-summary .vrbi-header-row[data-v-c9d2306e] {
  /* 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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
}
.vrbi-vi-percent-value[data-v-c9d2306e] {
  width: 100px;
  text-align: center;
}
.vrbi-vi-caption[data-v-c9d2306e] {
  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-c9d2306e],
.vrbi-vi-caption.vrbi-vi-red-text[data-v-c9d2306e] {
  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-c9d2306e] {
  border: 1px solid #c5c6c9;
  border-radius: 4px;
  background: #fff;
}
.vrbi-pt-grid-scroll[data-v-c9d2306e] {
  overflow-x: auto;
  overflow-y: hidden;
  background: #fff;
  border-radius: 4px;
}
.vrbi-pt-grid[data-v-c9d2306e] {
  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-c9d2306e] {
  position: sticky;
  top: 0;
  z-index: 5;
}
.vrbi-pt-grid thead th[data-v-c9d2306e] {
  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-c9d2306e],
.vrbi-pt-grid tbody td[data-v-c9d2306e] {
  padding: 6px 8px;
  border-bottom: 1px solid #eef0f5;
  border-right:  1px solid #eef0f5;
  white-space: nowrap;
}
.vrbi-pt-grid thead th[data-v-c9d2306e] {
  /* 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-c9d2306e] {
  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-c9d2306e] {
  text-align: left;
  font-weight: 600;
}
.vrbi-pt-grid thead .vrbi-pt-week-col[data-v-c9d2306e] {
  z-index: 3;
}
/* Two-line week cell: bold "W1" primary + smaller "06/07 – 10/07" range. */
.vrbi-pt-week-primary[data-v-c9d2306e] {
  font-weight: 700;
  font-size: 13px;
}
.vrbi-pt-week-secondary[data-v-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  font-weight: 700;
  font-size: 13px;
}
.vrbi-pt-billing-header-total[data-v-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  min-width: 125px;
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  padding: 4px 6px !important;
}
.vrbi-pt-crewing-input[data-v-c9d2306e] {
  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-c9d2306e]: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-c9d2306e]::-webkit-outer-spin-button,
.vrbi-pt-crewing-input[data-v-c9d2306e]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.vrbi-pt-crewing-input[data-v-c9d2306e] { -moz-appearance: textfield;
}

/* "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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e]:hover  { background: #b81a20;
}
.vrbi-pda-cta-btn[data-v-c9d2306e]:active { transform: translateY(1px);
}
.vrbi-pda-cta-btn[data-v-c9d2306e]:focus-visible {
  outline: 3px solid rgba(218, 33, 40, 0.25);
  outline-offset: 2px;
}
.vrbi-pda-cta-btn[data-v-c9d2306e]:disabled {
  opacity: 0.55;
  cursor: default;
  box-shadow: none;
}

/* 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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 70vh;
  overflow: auto;
}
.vrbi-pt-modal-footer[data-v-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  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 — 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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  grid-column: 1 / -1;
  margin-top: 14px;
  padding: 14px 18px 14px 20px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); /* red-50 → red-100 */
  border: 1px solid #fecaca;                                     /* red-200 */
  border-left: 4px solid #da2128;                                /* brand-red accent stripe */
  color: #7f1d1d;                                                /* red-900 for AAA contrast */
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 6px rgba(127, 29, 29, 0.08);
}
/* Leading "important" glyph — pseudo-element so we don't touch the
   template. Filled red glyph reads as a formal notice without the
   noise of a full icon component. */
.vrbi-vp-doa[data-v-c9d2306e]::before {
  content: '⚠';
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
  color: #da2128;
}

/* ═══════ "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-c9d2306e] {
  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-c9d2306e] {
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  -moz-column-gap: 12px;
       column-gap: 12px;
  align-items: center;
}
/* 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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e]::-webkit-outer-spin-button,
.vrbi-header-value.vrbi-num-input[data-v-c9d2306e]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.vrbi-header-value.vrbi-num-input[data-v-c9d2306e]:focus {
  border-color: #da2128;
  box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.12);
}
.vrbi-header-value.vrbi-num-input[data-v-c9d2306e]: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-c9d2306e] {
  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-c9d2306e] {
  background: #fee2e2;
  color:      #b91c1c;
  border-color: #f87171;
}
.vrbi-tl-pill--no[data-v-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.vrbi-num-with-suffix .vrbi-num-input[data-v-c9d2306e] {
  /* padding-right leaves room for the "%" character inside the box. */
  padding-right: 24px;
}
.vrbi-num-suffix[data-v-c9d2306e] {
  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-c9d2306e] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
  padding: 0 12px;
}
.vrbi-margin-status-row[data-v-c9d2306e] {
  /* Total row height must equal the LEFT box's value-cell height so pills
     line up with their corresponding left-row centers. Left value cell:
       min-height 28px + 4px+4px padding + 1px+1px border = 38px
     Right row (no border) matches with 30px min-height + 4px+4px padding
     = 38px. The border-less row also uses box-sizing content-box so the
     padding stacks on top of min-height, matching the left cell exactly. */
  min-height: 30px;
  display: flex;
  align-items: center;
  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-c9d2306e] {
  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-c9d2306e] {
  background: #dcfce7;   /* green-100 */
  color:      #166534;   /* green-800 */
  border: 1px solid #86efac;
}
.vrbi-margin-status--below[data-v-c9d2306e] {
  background: #fef3c7;   /* amber-100 */
  color:      #92400e;   /* amber-800 */
  border: 1px solid #fcd34d;
}
.vrbi-header-row[data-v-c9d2306e] {
  display: grid;
  grid-template-columns: 240px 160px;
  gap: 12px;
  align-items: center;
}
.vrbi-header-label[data-v-c9d2306e] {
  font-size: 12.5px;
  color: #1a1d35;
  font-weight: 500;
  text-align: right;
}
.vrbi-header-value[data-v-c9d2306e] {
  min-height: 28px;
  padding: 4px 10px;
  background: #eeeef5;
  border: 1px solid #d1d5e8;
  border-radius: 6px;
  font-size: 12.5px;
  color: #1a1d35;
  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-c9d2306e] {
  display: flex;
  gap: 20px;
  /* `flex-start` (was `stretch`) so the RIGHT box doesn't visually
     stretch when the LEFT box grows taller with its TEE KPI strip. Row
     alignment inside the tables comes from shared CSS variables below,
     not from equal box heights. */
  align-items: flex-start;
  flex-wrap: wrap;
  --vrbi-head-h:    44px;
  --vrbi-subhead-h: 56px;
  --vrbi-row-h:     34px;
}
.vrbi-box[data-v-c9d2306e] {
  background: #ffffff;
  border-radius: 10px;
  padding: 0;
  flex: 1 1 380px;
  min-width: 320px;
}

/* ═══════ 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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] { border-right: none;
}

/* Second header row — matches right box's legend height. */
.vrbi-left-subhead[data-v-c9d2306e] {
  height: var(--vrbi-subhead-h);
  background: #f4f6fb;
  border-right: 1px solid #eeeef5;
  border-bottom: 1px solid #eeeef5;
}
.vrbi-left-subhead--last[data-v-c9d2306e] { border-right: none;
}
.vrbi-left-cell[data-v-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  justify-content: center;
  background: #ffffff;
  font-weight: 600;
  border-right: none;
}

/* ── 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-c9d2306e] {
  background: #ffffff;
  border-right: 1px solid #eeeef5;
}
.vrbi-left-cell--total-label[data-v-c9d2306e] {
  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-c9d2306e] {
  background: #ffffff;
}
.vrbi-left-cell--total-value[data-v-c9d2306e] {
  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[data-v-c9d2306e] {
  display: flex;
  flex-direction: column;
}
.vrbi-right-grid[data-v-c9d2306e] {
  display: flex;
  flex-direction: column;
  border: 1px solid #d1d5e8;
  border-radius: 10px;
  overflow: hidden;
}
.vrbi-right-header[data-v-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e]:last-child { border-right: none;
}
.vrbi-type-legend-label[data-v-c9d2306e] {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.vrbi-type-swatch[data-v-c9d2306e] {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
  flex-shrink: 0;
}
.vrbi-type-label[data-v-c9d2306e] {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vrbi-type-legend-sum[data-v-c9d2306e] {
  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-c9d2306e] {
  display: flex;
  flex-direction: column;
}
.vrbi-bar-row[data-v-c9d2306e] {
  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-c9d2306e] {
  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-c9d2306e]:last-child { border-right: none;
}
.vrbi-bar-cell--filled[data-v-c9d2306e] {
  color: #ffffff;
}
.vrbi-bar-cell-value[data-v-c9d2306e] {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.vrbi-bar-cell--empty[data-v-c9d2306e] {
  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-c9d2306e] {
  background: #ffffff;
}
.vrbi-percent-cell[data-v-c9d2306e] {
  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-c9d2306e]:last-child { border-right: none;
}
.vrbi-bar-row--grand-total[data-v-c9d2306e] {
  height: var(--vrbi-row-h);
  background: #f4f6fb;
  border-top: 1px solid #eeeef5;
  box-sizing: border-box;
}
.vrbi-grand-total-cell[data-v-c9d2306e] {
  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-c9d2306e] { flex-direction: column;
}
.vrbi-box[data-v-c9d2306e]   { flex-basis: auto;
}
.vrbi-header-row[data-v-c9d2306e] { grid-template-columns: 1fr 1fr;
}
.vrbi-header-label[data-v-c9d2306e] { 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-c9d2306e]   { grid-template-columns: 1fr; gap: 16px;
}
.vrbi-pda-top-center[data-v-c9d2306e]  { 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-c4d1d487] {
  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-ace43757] {
  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-ace43757] {
  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-ace43757] {
  /* 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-ace43757] {
  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-ace43757] {
  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-ace43757] {
  /* Invisible placeholder — occupies a grid cell only for layout;
     no visual, no interaction. */
}
.vrba-owners-note[data-v-ace43757] {
  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-ace43757] {
  font-weight: 700;
  margin-right: 4px;
}
.vrba-owners-note em[data-v-ace43757] {
  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-ace43757] {
  grid-column: 4;
  grid-row: 4 / span 3;
  align-self: stretch;
}
.vrba-owners-merged[data-v-ace43757] 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-ace43757] {
    grid-template-columns: 1fr;
}
.vrba-owners-spacer[data-v-ace43757] {
    display: none;        /* no need to reserve r1c1/c2 in a single-col layout */
}
.vrba-owners-note[data-v-ace43757] {
    grid-column: 1;
}
.vrba-owners-label[data-v-ace43757] {
    text-align: left;
    padding-top: 0;
}
.vrba-owners-merged[data-v-ace43757] {
    grid-column: 1;
    grid-row: auto;
}
.vrba-owners-merged[data-v-ace43757] 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-ace43757] {
  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-ace43757] {
  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-ace43757] {
  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-ace43757] {
  margin-top: 20px;
}
.vrba-approval-row-right[data-v-ace43757] {
  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-ace43757] input[type="number"]::-webkit-outer-spin-button,
.vrba-approval-row-right[data-v-ace43757] input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.vrba-approval-row-right[data-v-ace43757] input[type="number"] {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
          appearance: textfield;
}
/* 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-ace43757] {
  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-ace43757] {
  padding-top: 8px;    /* line the label up with the textarea's top */
  white-space: normal;
}
.vrba-approval-row-full[data-v-ace43757] textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
}
.vrba-approval-label[data-v-ace43757] {
  font-size: 13px;
  font-weight: 600;
  color: #4e5a82;
  text-align: right;
}
/* Value box on the LEFT — soft-grey background, right-aligned number,
   matching the read-only display style used in VRB-I header values
   (`.vrbi-header-value`). Height fixed so all three rows line up. */
.vrba-approval-value[data-v-ace43757] {
  padding: 8px 12px;
  min-height: 36px;
  background: #f4f6fb;
  border: 1px solid #d1d5e8;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #191a37;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 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-ace43757] {
  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-ace43757] {
  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-ace43757] {
  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-ace43757] {
  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-ace43757] {
  padding-top: 8px;    /* align with the top of the textarea */
  white-space: normal; /* allow the long "< 60%" label to wrap */
}

/* 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-ace43757] {
    grid-template-columns: 1fr;
}
.vrba-approval-row-left[data-v-ace43757],
  .vrba-approval-row-right[data-v-ace43757],
  .vrba-approval-header-left[data-v-ace43757],
  .vrba-approval-header-right[data-v-ace43757],
  .vrba-approval-row-justify[data-v-ace43757],
  .vrba-approval-row-full[data-v-ace43757] {
    grid-column: 1;
    grid-row: auto;
}
.vrba-approval-row-right[data-v-ace43757],
  .vrba-approval-header-right[data-v-ace43757],
  .vrba-approval-header-left[data-v-ace43757],
  .vrba-approval-row-justify[data-v-ace43757],
  .vrba-approval-row-full[data-v-ace43757] {
    grid-template-columns: 1fr;
}
.vrba-approval-header-text[data-v-ace43757] {
    text-align: left;
}
.vrba-approval-label[data-v-ace43757] {
    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-ace43757] {
  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-ace43757] {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.vrba-date-label[data-v-ace43757] {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}
.vrba-date-input[data-v-ace43757] {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  color: #111827;
  background: #fff;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vrba-date-input[data-v-ace43757]:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.ds-gonogo-meta-row[data-v-ace43757] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 24px;
}
.ds-gonogo-grid[data-v-ace43757] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ds-gonogo-btn[data-v-ace43757] {
  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-ace43757] {
  background: linear-gradient(145deg, #f0fdf4, #dcfce7);
  border-color: #86efac;
  color: #15803d;
}
.ds-gonogo-btn--go[data-v-ace43757]: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-ace43757] {
  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-ace43757] {
  background: linear-gradient(145deg, #fff1f2, #ffe4e6);
  border-color: #fca5a5;
  color: #b91c1c;
}
.ds-gonogo-btn--nogo[data-v-ace43757]: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-ace43757] {
  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-ace43757] {
  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-ace43757] {
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
}
.ds-gonogo-btn--go.ds-gonogo-btn--active .ds-gonogo-icon[data-v-ace43757] {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.ds-gonogo-btn--nogo .ds-gonogo-icon[data-v-ace43757] {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}
.ds-gonogo-btn--nogo.ds-gonogo-btn--active .ds-gonogo-icon[data-v-ace43757] {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.ds-gonogo-label[data-v-ace43757] {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1;
}
.ds-gonogo-sublabel[data-v-ace43757] {
  font-size: 11.5px;
  font-weight: 500;
  opacity: 0.72;
  letter-spacing: 0.2px;
}

/* Notes textarea */
.ds-gonogo-notes[data-v-ace43757] { 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-ace43757] { transition: opacity 0.22s ease, transform 0.22s ease;
}
.ds-fade-leave-active[data-v-ace43757] { transition: opacity 0.16s ease, transform 0.16s ease;
}
.ds-fade-enter-from[data-v-ace43757]  { opacity: 0; transform: translateY(-8px);
}
.ds-fade-leave-to[data-v-ace43757]    { opacity: 0; transform: translateY(-4px);
}
@media (max-width: 640px) {
.ds-gonogo-meta-row[data-v-ace43757] { grid-template-columns: 1fr;
}
.ds-gonogo-btn[data-v-ace43757]      { padding: 22px 16px 18px;
}
.ds-gonogo-icon[data-v-ace43757]     { width: 48px; height: 48px;
}
.ds-gonogo-label[data-v-ace43757]    { 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-a160d087] {
  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-a160d087] {
  width: 100%;
  overflow-x: auto;
}
.ctb-table[data-v-a160d087] {
  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-a160d087] { width: auto;
}
.ctb-col--user[data-v-a160d087]        { width: 81px;
}
.ctb-col--total[data-v-a160d087]       { 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-a160d087] {
  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-a160d087] {
  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-a160d087] {
  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-a160d087] {
  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-a160d087]: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-a160d087] {
  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-a160d087] {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.2;
}
.ctb-vert-label[data-v-a160d087] {
  font-weight: 700;
  color: #191a37;
}
.ctb-vert-value[data-v-a160d087] {
  font-weight: 500;
  color: #4e5a82;
}

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

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

/* Group header row (M0, M1, …) — spans all 7 columns via
   `colspan="7"` on the <td>. Muted slate background with a heavier
   bottom border to visually separate it from the item rows below. */
.ctb-group-cell[data-v-a160d087] {
  padding: 8px 14px;
  background: #e9ecf3;
  border-bottom: 1px solid #d1d5e8;
  color: #191a37;
  font-size: 13px;
  font-weight: 700;
}

/* Activity item rows */
.ctb-item-label[data-v-a160d087] {
  /* 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-a160d087] {
  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-a160d087] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}
.ctb-input-number[data-v-a160d087] {
  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-a160d087]: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-a160d087]::-webkit-outer-spin-button,
.ctb-input-number[data-v-a160d087]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ctb-input-suffix[data-v-a160d087] {
  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-a160d087] {
  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-a160d087] {
  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-a160d087] {
  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-a160d087] {
  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-a160d087] {
  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. */
.ctb-recommended-label[data-v-a160d087] {
  background: #f4f6fb;
}
.ctb-recommended-row .ctb-item-input-cell[data-v-a160d087] {
  border-top: 1px solid #d1d5e8;
  background: #f4f6fb;
}
.ctb-recommended-total[data-v-a160d087] {
  border-top: 1px solid #d1d5e8;
}

/* Proposed row — editable inputs on plain white, top border only so
   the row reads as separate from the Recommended row above. */
.ctb-proposed-row .ctb-item-input-cell[data-v-a160d087] {
  border-top: 1px solid #d1d5e8;
}
.ctb-proposed-total[data-v-a160d087] {
  border-top: 1px solid #d1d5e8;
}

/* 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-a160d087] {
  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-a160d087] {
  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-a160d087] {
  background: #eef1f7;
  color: #191a37;
  font-weight: 700;
  cursor: default;
}
.ctb-input-readonly[data-v-a160d087]:focus {
  border-color: #d1d5db;
  box-shadow: none;
}
@media (max-width: 640px) {
.ctb-col--user[data-v-a160d087]  { width: 69px;
}
.ctb-col--total[data-v-a160d087] { width: 57px;
}
.ctb-th-vertical[data-v-a160d087] { height: 180px; padding: 8px 2px;
}
.ctb-vert-text[data-v-a160d087]  { font-size: 11px;
}
.ctb-vert-stack[data-v-a160d087] { gap: 3px;
}
.ctb-group-cell[data-v-a160d087] { padding: 6px 10px;
}
.ctb-item-label[data-v-a160d087] { 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-175d2acd] .bp-alert { width: 600px;
}
.mand-intro[data-v-175d2acd]    { 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-175d2acd]   { max-height: 45vh; overflow-y: auto; padding-right: 4px;
}
.mand-group[data-v-175d2acd]    { margin-bottom: 16px;
}
.mand-group[data-v-175d2acd]:last-child { margin-bottom: 0;
}
.mand-tab-label[data-v-175d2acd] {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9098b0;
  margin-bottom: 6px;
}
.mand-list[data-v-175d2acd]     { margin: 0; padding-left: 18px; list-style: disc;
}
.mand-list li[data-v-175d2acd]  { margin-bottom: 4px;
}
.mand-jump[data-v-175d2acd]     {
  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-175d2acd]: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-04e15080] { padding: 20px;
}
.ds-page-header[data-v-04e15080] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.ds-page-identity[data-v-04e15080] {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.ds-page-icon-box[data-v-04e15080] {
  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-04e15080] { font-size: 22px; font-weight: 700; color: #1a1d35; margin: 0;
}
.ds-page-sub[data-v-04e15080] { font-size: 13px; color: #6b7db8; margin-top: 3px;
}
.ds-page-actions[data-v-04e15080] { display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.ds-card[data-v-04e15080] {
  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.
 */
.ds-sticky-bar[data-v-04e15080] {
  position: sticky;
  top: 64px;
  z-index: 20;
  background: #fff;
  box-shadow: 0 2px 8px rgba(25, 26, 55, 0.1);
}

/* ── Step bar ── */
.ds-step-bar[data-v-04e15080] { background: #f8f9fc; border-bottom: 1px solid #e4e7f0;
}
.ds-step-track[data-v-04e15080] { display: flex; align-items: stretch;
}
.ds-step-item[data-v-04e15080] {
  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-04e15080] {
  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-04e15080] { cursor: not-allowed;
}
.ds-step--locked .ds-step-name[data-v-04e15080] { color: #9098b0;
}
.ds-step-circle[data-v-04e15080] {
  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-04e15080] { background: #da2128; color: #fff;
}
.ds-step--done   .ds-step-circle[data-v-04e15080] { background: #22c55e; color: #fff;
}
.ds-step-text[data-v-04e15080] { flex: 1;
}
.ds-step-label[data-v-04e15080] { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #9098b0;
}
.ds-step--active .ds-step-label[data-v-04e15080] { color: #da2128;
}
.ds-step-name[data-v-04e15080] { font-size: 12px; font-weight: 700; color: #1a1d35;
}
.ds-step-arrow[data-v-04e15080] { color: #c8cde0; font-size: 14px; align-self: center; flex-shrink: 0;
}
.ds-step-badge[data-v-04e15080] {
  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-04e15080] { background: #f0f1f5; color: #9098b0;
}

/* ── Tab nav ── */
.ds-tab-nav[data-v-04e15080] { display: flex; align-items: stretch; border-bottom: 1px solid #e4e7f0; background: #fff;
}
.ds-tab-nav[data-v-04e15080] .bp-tabbar { flex: 1; border-bottom: none;
}
.ds-tab-arrow[data-v-04e15080] {
  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-04e15080]:hover { background: #f5f6fb; color: #da2128;
}
.ds-tab-arrow[data-v-04e15080]:disabled { opacity: 0.25; cursor: not-allowed;
}

/* ── Tab content ── */
.ds-tab-content[data-v-04e15080] { padding: 28px 0px;
}
.ds-content-header[data-v-04e15080] { 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-04e15080] .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-04e15080] .tab-fieldset[disabled],[data-v-04e15080] .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-04e15080] .tab-fieldset[disabled] [role="radio"],[data-v-04e15080] .tab-fieldset[disabled] [role="button"],[data-v-04e15080] .tab-fieldset[disabled] .ds-gonogo-btn,[data-v-04e15080] .tab-fieldset[disabled] .osq-wp-row-card,[data-v-04e15080] .tab-fieldset[disabled] .osq-score-radio,[data-v-04e15080] .tab-fieldset[disabled] .dss-yn-radio,[data-v-04e15080] .tab-fieldset[disabled] .ds-practice-card--clickable,[data-v-04e15080] .tab-fieldset[disabled] .p-select,[data-v-04e15080] .tab-fieldset[disabled] .p-multiselect,[data-v-04e15080] .tab-fieldset[disabled] .p-autocomplete,[data-v-04e15080] .tab-fieldset[disabled] .bp-search-single-clear,[data-v-04e15080] .tab-fieldset[disabled] .bp-search-single-wrap {
  pointer-events: none;
}
/* Base* triggers should visually look disabled too — soften the tint. */
[data-v-04e15080] .tab-fieldset[disabled] .p-select,[data-v-04e15080] .tab-fieldset[disabled] .p-multiselect,[data-v-04e15080] .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-04e15080] {
  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-04e15080] { flex-shrink: 0;
}

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

/* ── Status badge ── */
.ds-status-badge[data-v-04e15080] {
  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-04e15080] { 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-04e15080]      { background: #f3f4f6; color: #6b7280;
}
.ds-status-badge--draft      .ds-status-dot[data-v-04e15080] { background: #9ca3af;
}
.ds-status-badge--inprogress[data-v-04e15080] { background: #eff6ff; color: #2563eb;
}
.ds-status-badge--inprogress .ds-status-dot[data-v-04e15080] { background: #3b82f6;
}
.ds-status-badge--develop[data-v-04e15080]    { background: #fffbeb; color: #b45309;
}
.ds-status-badge--develop    .ds-status-dot[data-v-04e15080] { background: #f59e0b;
}
.ds-status-badge--proposed[data-v-04e15080]   { background: #f0fdf4; color: #16a34a;
}
.ds-status-badge--proposed   .ds-status-dot[data-v-04e15080] { background: #22c55e;
}
.ds-status-badge--approved[data-v-04e15080]   { background: #f0fdf4; color: #16a34a;
}
.ds-status-badge--approved   .ds-status-dot[data-v-04e15080] { background: #22c55e;
}
.ds-status-badge--completed[data-v-04e15080]  { background: #f0fdf4; color: #16a34a;
}
.ds-status-badge--completed  .ds-status-dot[data-v-04e15080] { background: #22c55e;
}
.ds-status-badge--closed[data-v-04e15080]     { background: #f3f4f6; color: #6b7280;
}
.ds-status-badge--closed     .ds-status-dot[data-v-04e15080] { background: #9ca3af;
}
.ds-status-badge--nogo[data-v-04e15080]       { background: #fff1f2; color: #dc2626;
}
.ds-status-badge--nogo       .ds-status-dot[data-v-04e15080] { background: #ef4444;
}
.ds-status-badge--rejected[data-v-04e15080]   { background: #f3f4f6; color: #6b7280;
}
.ds-status-badge--rejected   .ds-status-dot[data-v-04e15080] { background: #9ca3af;
}

/* ── Footer ── */
.ds-footer[data-v-04e15080] {
  display: flex; justify-content: space-between; align-items: center;
}
.ds-footer-left[data-v-04e15080]  { display: flex; gap: 10px; align-items: center;
}
.ds-footer-right[data-v-04e15080] { display: flex; gap: 10px;
}
@media (max-width: 768px) {
.ds-page[data-v-04e15080] { padding: 12px;
}
.ds-tab-content[data-v-04e15080] { padding: 16px;
}
.ds-footer[data-v-04e15080] { flex-direction: column; gap: 12px; padding: 16px;
}
.ds-footer-right[data-v-04e15080] { width: 100%; justify-content: flex-end;
}
.ds-info-strip[data-v-04e15080] { 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-04e15080] { 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-04e15080] {
  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-04e15080] {
  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-04e15080] {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border: 1px solid #d1d5e8;
  border-radius: 10px;
  background: #ffffff;
}
.grr-table[data-v-04e15080] {
  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-04e15080]    { width: 40%;
}
.grr-col-verdict[data-v-04e15080] { 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-04e15080] {
  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-04e15080]:last-child { border-right: none;
}
.grr-th--desc[data-v-04e15080] { 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-04e15080] {
  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-04e15080]:last-child { border-right: none;
}
.grr-td--desc[data-v-04e15080] {
  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-04e15080] { 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-04e15080] {
  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-04e15080] {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}
.grr-answer--no[data-v-04e15080] {
  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-04e15080] {
  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%;
}
@media (min-width: 640px) {

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

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

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

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

  .container {
    max-width: 1536px;
  }
}
:where([data-mfe="dealsheetApp"]) .\!visible {
  visibility: visible !important;
}
:where([data-mfe="dealsheetApp"]) .visible {
  visibility: visible;
}
:where([data-mfe="dealsheetApp"]) .invisible {
  visibility: hidden;
}
:where([data-mfe="dealsheetApp"]) .collapse {
  visibility: collapse;
}
:where([data-mfe="dealsheetApp"]) .static {
  position: static;
}
:where([data-mfe="dealsheetApp"]) .fixed {
  position: fixed;
}
:where([data-mfe="dealsheetApp"]) .absolute {
  position: absolute;
}
:where([data-mfe="dealsheetApp"]) .relative {
  position: relative;
}
:where([data-mfe="dealsheetApp"]) .sticky {
  position: sticky;
}
:where([data-mfe="dealsheetApp"]) .mb-1 {
  margin-bottom: 0.25rem;
}
:where([data-mfe="dealsheetApp"]) .mb-6 {
  margin-bottom: 1.5rem;
}
:where([data-mfe="dealsheetApp"]) .\!block {
  display: block !important;
}
:where([data-mfe="dealsheetApp"]) .block {
  display: block;
}
:where([data-mfe="dealsheetApp"]) .inline {
  display: inline;
}
:where([data-mfe="dealsheetApp"]) .flex {
  display: flex;
}
:where([data-mfe="dealsheetApp"]) .inline-flex {
  display: inline-flex;
}
:where([data-mfe="dealsheetApp"]) .table {
  display: table;
}
:where([data-mfe="dealsheetApp"]) .flow-root {
  display: flow-root;
}
:where([data-mfe="dealsheetApp"]) .grid {
  display: grid;
}
:where([data-mfe="dealsheetApp"]) .hidden {
  display: none;
}
:where([data-mfe="dealsheetApp"]) .w-full {
  width: 100%;
}
:where([data-mfe="dealsheetApp"]) .flex-shrink {
  flex-shrink: 1;
}
:where([data-mfe="dealsheetApp"]) .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-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"]) .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;
  }
}