/* Readable tables everywhere (2026-10-16). Dash DataTable ships a LIGHT stylesheet: a hovered row is painted
   var(--hover) = #fdfdfd, a selected cell gets var(--selected-background) = rgba(255,65,54,.2) as an inline style,
   the text of an edited cell is var(--text-color) = #3c3c3c and the row-selection / delete cells are white. Every
   table of the app has see-through dark cells and light text, so a hovered or clicked row turned white and its
   values disappeared. The variables are redefined ON THE TABLE (DataTable declares them there, so declaring them on
   a parent does nothing) and with !important (its CSS is injected after the /assets files).
   Tokens: text #e8e8e8, muted #9fb3c8, accent amber #f0a030, dark menu #0f171f. Never use bare table / tr / td
   selectors here: the Spherography's Excel grid (.sgx-grid) is white on purpose. */

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table {
  --hover: rgba(240, 160, 48, 0.10) !important;                 /* the hovered row: an amber tint, never white */
  --selected-background: rgba(240, 160, 48, 0.22) !important;   /* the selected / clicked cell */
  --accent: #f0a030 !important;                                 /* the active cell's border */
  --text-color: #e8e8e8 !important;                             /* the text of an edited cell */
  --border: rgba(255, 255, 255, 0.12) !important;
  --muted: #7f93a8 !important;
  --faded-text: rgba(255, 255, 255, 0.05) !important;
  --faded-text-header: #9fb3c8 !important;
  --faded-dropdown: #0f171f !important;
  --background-color-ellipses: rgba(15, 23, 31, 0.95) !important;
}

/* a selected cell keeps its own text colour on the amber tint. DataTable writes the selection as an INLINE style
   with literal values (background rgba(255,65,54,.2), border 1px solid hotpink on the active cell, #d3d3d3 on the
   others), not through the variables: hence !important here. A table's own `#id td.cell--selected` rule with
   !important (Trendlines, Range Option Selling, Portfolio Builder: amber too) still wins by specificity. */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.cell--selected,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.focused {
  background-color: rgba(240, 160, 48, 0.22) !important;
}
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.focused {
  border-color: #f0a030 !important;
}
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.cell--selected:not(.focused) {
  border-color: rgba(240, 160, 48, 0.45) !important;
}
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.focused .dash-cell-value,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.cell--selected .dash-cell-value {
  background-color: transparent !important;
}
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner input.dash-cell-value:not([type=radio]):not([type=checkbox]) {
  color: #f5f5f5 !important; caret-color: #f0a030;
}

/* the row-selection / delete columns and their headers (white / #fafafa by default) */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.dash-select-cell,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.dash-delete-cell {
  background-color: transparent !important; color: #9fb3c8 !important;
}
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-select-header,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-delete-header {
  background-color: rgba(255, 255, 255, 0.06) !important;
}
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.dash-select-cell input,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-select-header input {
  accent-color: #f0a030;
}

/* the filter row: light text on a dark field */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .dash-filter input {
  color: #e8e8e8 !important; background-color: transparent !important;
}
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .dash-filter input::placeholder {
  color: #7f93a8 !important;
}

/* dropdown cells (react-select inside the table): a dark menu like the app's dropdowns */
.dash-table-container .Select-control { background-color: transparent !important; border-color: rgba(255, 255, 255, 0.14) !important; }
.dash-table-container .Select-value-label, .dash-table-container .Select-placeholder,
.dash-table-container .Select-input > input { color: #e8e8e8 !important; }
.dash-table-container .Select-menu-outer { background-color: #0f171f !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; }
.dash-table-container .Select-option { background-color: transparent !important; color: #cfdcea !important; }
.dash-table-container .Select-option.is-focused { background-color: rgba(240, 160, 48, 0.18) !important; color: #fff !important; }
.dash-table-container .Select-option.is-selected { color: #f5d6a3 !important; }

/* header / cell tooltips: dark like the app's own tips */
.dash-tooltip .dash-table-tooltip {
  background-color: #0f171f !important; color: #e8e8e8 !important; border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
.dash-tooltip[data-attr-anchor=top]:after { border-top-color: #0f171f !important; }
.dash-tooltip[data-attr-anchor=top]:before { border-top-color: rgba(255, 255, 255, 0.15) !important; }
.dash-tooltip[data-attr-anchor=bottom]:after { border-bottom-color: #0f171f !important; }
.dash-tooltip[data-attr-anchor=bottom]:before { border-bottom-color: rgba(255, 255, 255, 0.15) !important; }

/* pagination of long tables */
.dash-table-container .previous-next-container { color: #9fb3c8; }
.dash-table-container .previous-next-container button { color: #cfdcea; background: transparent; border: none; }
.dash-table-container .previous-next-container button:disabled { opacity: .35; }
.dash-table-container .page-number input { color: #e8e8e8; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 6px; }

/* Bootstrap tables (none today; dbc.Table would otherwise be white with dark text on hover) */
.table {
  --bs-table-bg: transparent; --bs-table-color: inherit; --bs-table-border-color: rgba(255, 255, 255, 0.10);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03); --bs-table-striped-color: inherit;
  --bs-table-hover-bg: rgba(240, 160, 48, 0.10); --bs-table-hover-color: inherit;
  --bs-table-active-bg: rgba(240, 160, 48, 0.22); --bs-table-active-color: inherit;
}