/* High-priority overrides for Dash DataTable selection accent and borders */

/* Global accent and selected background */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table {
  --accent: #3B82F6; /* replace hotpink */
  --selected-background: transparent !important;
}

/* Ensure dropdowns inside cells use the same accent */
.dash-spreadsheet .Select-menu-outer,
.dash-spreadsheet .Select-arrow,
.dash-spreadsheet .dash-delete-cell,
.dash-spreadsheet .column-header--edit,
.dash-spreadsheet .column-header--delete {
  --accent: #3B82F6;
}

/* Keep DataTable cell dropdown controls aligned with the app palette. */
.dash-spreadsheet td.dropdown:hover .Select-clear-zone,
.dash-spreadsheet td.dropdown:hover .Select-clear,
.dash-spreadsheet td.dropdown.focused .Select-clear-zone,
.dash-spreadsheet td.dropdown.focused .Select-clear,
.dash-spreadsheet .Select-clear-zone:hover,
.dash-spreadsheet .Select-clear-zone:hover .Select-clear {
  color: #3B82F6 !important;
}

.dash-spreadsheet .Select-menu-outer {
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10) !important;
}

.dash-spreadsheet .Select-option,
.dash-spreadsheet .Select-option.is-selected,
.dash-spreadsheet .Select-option.is-focused {
  color: #333 !important;
  font-weight: 500 !important;
  border-bottom: 1px solid #e5e7eb;
}

.dash-spreadsheet .Select-option:last-child {
  border-bottom: none;
}

.dash-spreadsheet .Select-option.is-selected {
  background-color: #fff !important;
}

.dash-spreadsheet .Select-option.is-focused {
  background-color: #f5f5f5 !important;
}

.dash-spreadsheet .Select--multi .Select-value,
.dash-spreadsheet .Select--multi .Select-value-label {
  color: #333 !important;
}

/* Force left edge/border on selected/focused cells away from pink */
.dash-spreadsheet td.dash-cell.cell--selected,
.dash-spreadsheet td.dash-cell.cell--selected.focused,
.dash-spreadsheet td.dash-cell.focused {
  --accent: #3B82F6 !important; /* Force the accent color variable */
  outline: none !important;
  background-color: transparent !important;
  border: 1px solid #3B82F6 !important;
  box-shadow: inset 0 0 0 1px #3B82F6 !important;
}

.dash-spreadsheet td.dash-cell.cell--selected input,
.dash-spreadsheet td.dash-cell.cell--selected.focused input,
.dash-spreadsheet td.dash-cell.focused input {
  background-color: transparent !important;
}

/* In case some themes draw the left indicator via ::before pseudo-element */
.dash-spreadsheet td.dash-cell.cell--selected::before,
.dash-spreadsheet td.dash-cell.cell--selected.focused::before,
.dash-spreadsheet td.dash-cell.focused::before {
  background-color: #3B82F6 !important;
}