/*
 * Bridge between the Bootstrap (dbc) theme and Dash's non-bootstrap components
 * + inline styles in our own Python layout code.
 *
 * Strategy: drive every override from Bootstrap CSS custom properties
 *   --bs-body-bg, --bs-body-color, --bs-secondary-bg, --bs-border-color, etc.
 * These variables swap automatically when bootswatch swaps LUX ↔ CYBORG, so
 * one stylesheet covers both themes.
 *
 * Inline styles in Python set via `style={...}` have high specificity; we
 * beat them with `!important`.
 */

/* ---------- App shell / sidebar ---------- */

#app-sidebar {
  background-color: var(--bs-body-bg) !important;
  border-right-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

#app-sidebar a,
#app-sidebar a:link,
#app-sidebar a:visited {
  color: var(--bs-body-color) !important;
  background-color: var(--bs-secondary-bg) !important;
  border-color: transparent !important;
}
#app-sidebar a:hover {
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-emphasis-color, var(--bs-body-color)) !important;
  text-decoration: none !important;
}

/* Sign Out link keeps its "danger" hue via dbc variable. */
#sidebar-signout-link,
#sidebar-signout-link:link,
#sidebar-signout-link:visited {
  color: var(--bs-danger) !important;
  background: transparent !important;
  border-color: var(--bs-danger-border-subtle, var(--bs-border-color)) !important;
}
#sidebar-signout-link:hover {
  background-color: var(--bs-danger-bg-subtle, var(--bs-tertiary-bg)) !important;
}

/* Sidebar hr */
#app-sidebar hr {
  border-top-color: var(--bs-border-color) !important;
}

/* ---------- Agent page tab strip ---------- */

/* Container (has inline borderBottom #e0e0e0) */
[id="agent-tab-overview"],
[id="agent-tab-chart"],
[id="agent-tab-orders"],
[id="agent-tab-brain"],
[id="agent-tab-signals"],
[id="agent-tab-accuracy"] {
  color: var(--bs-body-color);
}
/* Tab strip is an unnamed div — target via its inline style fingerprint */
#app-main-content > div > div > div[style*="borderBottom"] {
  border-bottom-color: var(--bs-border-color) !important;
}

#app-main-content a[href^="/agents/"][href$="/overview"],
#app-main-content a[href^="/agents/"][href$="/chart"],
#app-main-content a[href^="/agents/"][href$="/orders"],
#app-main-content a[href^="/agents/"][href$="/brain"],
#app-main-content a[href^="/agents/"][href$="/signals"],
#app-main-content a[href^="/agents/"][href$="/accuracy"] {
  color: var(--bs-body-color) !important;
}

/* ---------- Native html.Table (Overview routing, dashboard, etc.) ---------- */

#app-main-content table,
#app-main-content thead,
#app-main-content tbody,
#app-main-content tr,
#app-main-content td,
#app-main-content th {
  background-color: transparent !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}
#app-main-content thead th {
  background-color: var(--bs-secondary-bg) !important;
}
#app-main-content tbody tr:hover {
  background-color: var(--bs-tertiary-bg) !important;
}

/* ---------- Dashboard agent cards (inline #e0e0e0 border) ---------- */

[id^="dashboard-agent-"] {
  border-color: var(--bs-border-color) !important;
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color) !important;
}

/* ---------- Charts KPI pills (inline pastel greens/reds) ---------- */

#charts-kpi-summary > div,
[id="agent-chart-kpi"] > div,
#charts-kpi-summary h4,
[id="agent-chart-kpi"] h4 {
  color: var(--bs-body-color) !important;
}
#charts-kpi-summary span[style*="e8f5e9"],
[id="agent-chart-kpi"] span[style*="e8f5e9"] {
  background-color: var(--bs-success-bg-subtle, rgba(25, 135, 84, 0.15)) !important;
  color: var(--bs-success-text-emphasis, var(--bs-success)) !important;
}
#charts-kpi-summary span[style*="ffebee"],
[id="agent-chart-kpi"] span[style*="ffebee"] {
  background-color: var(--bs-danger-bg-subtle, rgba(220, 53, 69, 0.15)) !important;
  color: var(--bs-danger-text-emphasis, var(--bs-danger)) !important;
}
#charts-kpi-summary span[style*="e3f2fd"],
[id="agent-chart-kpi"] span[style*="e3f2fd"] {
  background-color: var(--bs-info-bg-subtle, rgba(13, 202, 240, 0.15)) !important;
  color: var(--bs-info-text-emphasis, var(--bs-info)) !important;
}

/* ---------- Login form ---------- */

#login-email,
#login-password {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border: 1px solid var(--bs-border-color) !important;
}
#login-btn {
  background-color: var(--bs-primary) !important;
  color: var(--bs-light, #fff) !important;
  border-color: var(--bs-primary) !important;
}
#google-login-link {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

/* ---------- Dash dash_table.DataTable (Orders, Accuracy) ---------- */

.dash-spreadsheet-container,
.dash-spreadsheet,
.dash-spreadsheet-inner,
.dash-spreadsheet-inner table {
  background-color: transparent !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}
.dash-header,
.dash-spreadsheet-inner thead th,
.dash-spreadsheet-inner thead td {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}
.dash-cell,
.dash-cell-value,
.dash-spreadsheet-inner td {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}
.dash-cell input {
  background-color: transparent !important;
  color: var(--bs-body-color) !important;
  border-color: transparent !important;
}
.dash-cell.focused,
.dash-cell.dash-cell--selected {
  background-color: var(--bs-tertiary-bg) !important;
}
.previous-next-container,
.previous-next-container button,
.previous-next-container input,
.current-page,
.last-page {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}
/* DataTable dropdown-cell presentation */
.dash-cell .Select-control,
.dash-cell .Select-menu-outer {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}

/* ---------- react-select (dcc.Dropdown) ---------- */

.dash-dropdown .Select-control,
.Select-control {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}
.Select-placeholder {
  color: var(--bs-secondary-color, var(--bs-body-color)) !important;
}
.Select-value-label,
.Select-value,
.Select--single > .Select-control .Select-value-label {
  color: var(--bs-body-color) !important;
}
.Select-input > input {
  color: var(--bs-body-color) !important;
  background: transparent !important;
}
.Select-menu-outer,
.Select-menu,
.VirtualizedSelectOption {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}
.Select-option {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}
.Select-option.is-focused,
.VirtualizedSelectFocusedOption {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-emphasis-color, var(--bs-body-color)) !important;
}
.Select-option.is-selected {
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-emphasis-color, var(--bs-body-color)) !important;
}
.Select-arrow {
  border-top-color: var(--bs-body-color) !important;
}
.Select.is-focused:not(.is-open) > .Select-control {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* ---------- react-dates (dcc.DatePickerRange / dcc.DatePickerSingle) ---------- */

.DateInput,
.DateRangePickerInput,
.SingleDatePickerInput {
  background-color: var(--bs-body-bg) !important;
  border-color: var(--bs-border-color) !important;
}
.DateInput_input {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}
.DateInput_input__focused {
  border-bottom-color: var(--bs-primary) !important;
}
.DateRangePickerInput_arrow_svg,
.DateRangePickerInput_arrow path,
.DateInput_fang {
  fill: var(--bs-body-color) !important;
}

.DateRangePicker_picker,
.SingleDatePicker_picker,
.DayPicker,
.DayPicker_transitionContainer {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}
.CalendarMonthGrid,
.CalendarMonth,
.CalendarMonth_caption,
.DayPicker_weekHeader,
.DayPicker_weekHeader_li {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}
.CalendarDay__default {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}
.CalendarDay__default:hover {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-emphasis-color, var(--bs-body-color)) !important;
  border-color: var(--bs-border-color) !important;
}
.CalendarDay__selected,
.CalendarDay__selected:active,
.CalendarDay__selected:hover,
.CalendarDay__selected_start,
.CalendarDay__selected_end {
  background-color: var(--bs-primary) !important;
  color: var(--bs-light, #fff) !important;
  border-color: var(--bs-primary) !important;
}
.CalendarDay__hovered_span,
.CalendarDay__selected_span {
  background-color: rgba(var(--bs-primary-rgb), 0.25) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}
.CalendarDay__blocked_out_of_range,
.CalendarDay__blocked_out_of_range:hover {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-secondary-color, var(--bs-body-color)) !important;
  opacity: 0.5 !important;
}
.DayPickerNavigation_button,
.DayPickerNavigation_button__default {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color) !important;
}
.DayPickerNavigation_svg__horizontal {
  fill: var(--bs-body-color) !important;
}

/* ---------- Native inputs / textareas (non-bootstrap) ----------
 * dcc.Input / dcc.Textarea render as bare <input>/<textarea> with no
 * .form-control class, so bootswatch never themes them. We force the
 * theme via CSS vars + !important (a bare <input> also loses to browser
 * user-agent background). Exclude dash_table cells and buttons.
 */
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not(.dash-cell input),
select,
textarea,
.form-control {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: var(--bs-border-radius, 0.375rem) !important;
}
input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
  outline: 0 !important;
}
input::placeholder,
textarea::placeholder {
  color: var(--bs-secondary-color, var(--bs-body-color)) !important;
  opacity: 0.65 !important;
}

/* Checkbox / radio keep native look but border tint follows theme */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--bs-primary);
}

/* Number input spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  background-color: var(--bs-secondary-bg) !important;
  opacity: 1 !important;
}

/* ---------- Brain DAG editor boxes (inline #e5e5e5 borders) ---------- */

#dag-graph,
#dag-node-editor,
#dag-catalog-dropdown {
  color: var(--bs-body-color);
}
#app-main-content div[style*="1px solid #e5e5e5"] {
  border-color: var(--bs-border-color) !important;
  background-color: var(--bs-secondary-bg) !important;
}
#app-main-content div[style*="1px solid #e0e0e0"] {
  border-color: var(--bs-border-color) !important;
}

/* ---------- Plotly: transparent so the bootstrap bg shows through ---------- */
/* (Python side still sets plot_bgcolor="white"; we mask it here, and the
    matching Python change in this PR sets rgba(0,0,0,0) so there's no gap.) */

.js-plotly-plot .plot-container,
.js-plotly-plot .svg-container,
.js-plotly-plot .main-svg {
  background-color: transparent !important;
}
.modebar,
.modebar-container {
  background-color: transparent !important;
}

/* ---------- DataTable: allow text selection / copy ----------
 * dash_table renders virtualized cells with `user-select: none` baked into
 * the wrapper. The Python prop style_cell.userSelect=text only reaches the
 * inner div; the outer `.dash-cell` still blocks selection on click. Force
 * it on every layer so highlighting + Ctrl-C work.
 */
.dash-spreadsheet-container,
.dash-spreadsheet-container .dash-spreadsheet-inner,
.dash-spreadsheet-container .dash-cell,
.dash-spreadsheet-container .dash-cell *,
.dash-spreadsheet-container .dash-header,
.dash-spreadsheet-container .dash-header * {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
}