/* dropdown.css */

.Select-control {
  background-color: #151515 !important;
  color: #eaeaea !important;
  border-color: #3a3a3a !important;
}
.Select-placeholder { color: #000000 !important; }
.Select-value-label { color: #eaeaea !important; }
.Select-input > input { color: #eaeaea !important; }

.Select-menu-outer,
.Select-menu {
  background-color: #151515 !important;
  border-color: #3a3a3a !important;
}

.Select-option {
  background-color: #151515 !important;
  color: #eaeaea !important;
}
.Select-option.is-focused {
  background-color: #232323 !important;
  color: #ffffff !important;
}
.Select-option.is-selected {
  background-color: #2e2e2e !important;
  color: #ffffff !important;
}

.VirtualizedSelectOption {
  background-color: #151515 !important;
  color: #eaeaea !important;
}
.VirtualizedSelectFocusedOption {
  background-color: #232323 !important;
  color: #ffffff !important;
}

/* Keep the app from scrolling sideways anywhere */
html, body {
  overflow-x: hidden;
}

/* Let flex columns shrink instead of forcing overflow */
.section-col {
  min-width: 0 !important;
}

/* Make plotly graphs respect container width */
.fullwidth-graph {
  width: 100% !important;
  max-width: 100% !important;
}

/* Datatables: never exceed container, scroll inside if needed */
.dt-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
}

/* ==== FULL-BLEED PAGE (no gutters anywhere) ==== */
html, body, #react-entry-point, #_dash-app-content {
  height: 100%;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
}

/* Kill common container gutters/max-widths some layouts add */
.container, .row, .col, .tab-container, .tab-content, .tab-pane {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* If inline styles set a fixed maxWidth / centered margin, override them */
[style*="max-width"] { max-width: 100% !important; }
[style*="margin: 0 auto"] { margin: 0 !important; }

/* Tabs and graph wrappers should span full width */
#tabs, #tabs > div { width: 100% !important; }
.dash-graph, .js-plotly-plot, .plotly-graph-div {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==== DATATABLE READABILITY (no horizontal scroll; clear borders) ==== */
.dash-table-container, .dash-spreadsheet-container, .dt-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dash-spreadsheet td, .dash-spreadsheet th {
  border: 1px solid #333 !important;   /* visible grid */
}

.dash-spreadsheet td div {
  white-space: pre-wrap !important;     /* wrap long text */
  overflow-wrap: anywhere !important;
  line-height: 1.3;
}

/* Optional column sizing by id (only if your columns use these ids) */
/* .dash-spreadsheet td[column_id="Text"] { width: 45% !important; } */

/* ==== CONFIRMATION MESSAGE (✅ Selected …) ==== */
#cat-selection-msg,
#phys-selection-msg,
#cmp-left-selection-msg,
#cmp-right-selection-msg {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* ==== OPTIONAL: utility class if you want to hide blocks via callbacks ==== */
.hidden { display: none !important; }