/* ---------- DatePickerRange & Calendar Styling ---------- */

/* Main input boxes for DatePickerRange and SingleDatePicker */
.DateRangePickerInput,
.SingleDatePickerInput {
  background-color: #343a40 !important;
  color: white !important;
  border: none !important;
}

/* Date text inside the input boxes */
.DateInput_input {
  background-color: #343a40 !important;
  color: white !important;
  border: 1px solid #495057 !important;
}

/* Calendar popup container */
.DateRangePicker_picker,
.SingleDatePicker_picker {
  background-color: #343a40 !important;
  color: white !important;
  border: 1px solid #495057 !important;
}

/* Calendar month background */
.CalendarMonth {
  background-color: #343a40 !important;
  color: white !important;
}

/* Individual days in the calendar */
.CalendarDay__default {
  background: #343a40 !important;
  color: #ffffff !important;
  border: 1px solid #495057 !important;
}

/* Hover and selected states for days */
.CalendarDay__default:hover {
  background: #495057 !important;  /* Slightly lighter hover color */
  color: #ffffff !important;
}
.CalendarDay__selected,
.CalendarDay__selected:hover {
  background: #007bff !important;  /* Example: Bootstrap primary color */
  color: white !important;
}

/* Overall calendar container and navigation */
.DayPicker {
  background-color: #343a40 !important;
  color: white !important;
}
.CalendarMonth_caption strong {
  color: white !important;
}
.DayPickerNavigation_button {
  background-color: #343a40 !important;
  color: white !important;
  border: none !important;
}
/* Make the DatePickerRange arrow white */
.DateRangePickerInput_arrow_svg,
.DateRangePickerInput_arrow_svg_1,
.DateRangePickerInput_arrow_svg path {
  fill: white !important;
}

/* ---------- Dropdown Styling (for dark-dropdown class) ---------- */

/* Dropdown control (unexpanded state) */
.dark-dropdown .Select-control,
.dark-dropdown .css-1pahdxg-control {
  background-color: #343a40 !important;
  color: white !important;
  border: 1px solid #495057 !important;
}

/* Placeholder text for dropdowns */
.dark-dropdown .css-14el2xx-placeholder {
  color: #ced4da !important;  /* A lighter gray for placeholders */
}

/* Selected value (single-value) */
.dark-dropdown .Select-single-value,
.dark-dropdown .css-1uccc91-singleValue {
  color: white !important;
  background-color: #343a40 !important;
}

/* Multi-select chips */
.dark-dropdown .Select-multi-value,
.dark-dropdown .css-1rhbuit-multiValue {
  background-color: #495057 !important;
  color: white !important;
}
.dark-dropdown .Select-multi-value__label,
.dark-dropdown .css-1rhbuit-multiValue__label {
  color: white !important;
}
.dark-dropdown .Select-multi-value__remove:hover,
.dark-dropdown .css-1rhbuit-multiValue__remove:hover {
  background-color: #343a40 !important;
  color: white !important;
}

/* Dropdown menu (expanded state) */
.dark-dropdown .Select-menu-outer,
.dark-dropdown .css-26l3qy-menu {
  background-color: #343a40 !important;
  color: white !important;
}
.dark-dropdown .Select-option,
.dark-dropdown .css-1n7v3ny-option {
  background-color: #343a40 !important;
  color: white !important;
}
.dark-dropdown .Select-option:hover,
.dark-dropdown .css-1n7v3ny-option:hover,
.dark-dropdown .Select-option:focus,
.dark-dropdown .css-1n7v3ny-option:focus {
  background-color: #495057 !important;
  color: white !important;
}
.Select-value-label {
  color: white !important;
}
/* ---------- Remove visible borders from DatePicker inputs ---------- */

/* For the DateRangePickerInput container that has a border */
.DateRangePickerInput__withBorder {
  border: 1px solid #343a40 !important;
}

/* For the calendar popup that uses a border */
.DayPicker__withBorder {
  border: 1px solid #343a40 !important;
}

/* Optionally, if any DateInput elements still show a border, override them */
.DateInput_input {
  border: 1px solid #343a40 !important;
}

/* assets/custom.css */

/* assets/custom.css */

.my-news-acc .accordion-button:not(.collapsed) {
  background-color: #1E1F23;  /* your dark charcoal color */
  color: #FFFFFF;             /* keep the text white for contrast */
}

.my-news-acc .accordion-button:focus {
  box-shadow: none;
}

/* --- DARK DATEPICKERS (scoped) --- */
.dark-date .DateRangePickerInput,
.dark-date .SingleDatePickerInput {
  background-color: #111 !important;
  color: #fff !important;
  border: 1px solid #2b2b2b !important;
}
.dark-date .DateInput_input {
  background-color: #111 !important;
  color: #fff !important;
  border: 1px solid #2b2b2b !important;
}
.dark-date .DateRangePicker_picker,
.dark-date .SingleDatePicker_picker,
.dark-date .DayPicker,
.dark-date .CalendarMonth {
  background-color: #111 !important;
  color: #fff !important;
  border-color: #2b2b2b !important;
}
.dark-date .CalendarDay__default {
  background-color: #111 !important;
  color: #fff !important;
  border: 1px solid #2b2b2b !important;
}
.dark-date .CalendarDay__default:hover { background-color: #1b1b1b !important; }
.dark-date .CalendarDay__selected,
.dark-date .CalendarDay__selected:hover { background: #0d6efd !important; color: #fff !important; }
.dark-date .DayPickerNavigation_button { background-color: #111 !important; color: #fff !important; border: none !important; }
.dark-date .DateRangePickerInput_arrow_svg,
.dark-date .DateRangePickerInput_arrow_svg path { fill: #fff !important; }

/* --- DARK DROPDOWNS (works with both legacy and emotion classes) --- */
.dark-dropdown .Select-control,
.dark-dropdown .VirtualizedSelectFocusedOption,               /* legacy */
.dark-dropdown .Select-menu-outer,
.dark-dropdown [class*="control"],                            /* emotion */
.dark-dropdown [class*="-control"],
.dark-dropdown [class*="-menu"] {
  background-color: #111 !important;
  color: #fff !important;
  border-color: #2b2b2b !important;
}

.dark-dropdown .Select-placeholder,
.dark-dropdown .Select--single > .Select-control .Select-value,
.dark-dropdown .Select-value-label,
.dark-dropdown [class*="-placeholder"],
.dark-dropdown [class*="-singleValue"] {
  color: #e6e6e6 !important;
}

.dark-dropdown .Select-multi-value,
.dark-dropdown .Select-multi-value__label,
.dark-dropdown .Select-multi-value__remove,
.dark-dropdown [class*="-multiValue"],
.dark-dropdown [class*="-multiValue__label"],
.dark-dropdown [class*="-multiValue__remove"] {
  background-color: #1b1b1b !important;
  color: #fff !important;
}

.dark-dropdown .Select-option,
.dark-dropdown [class*="-option"] {
  background-color: #111 !important;
  color: #fff !important;
}
.dark-dropdown .Select-option:hover,
.dark-dropdown [class*="-option"]:hover,
.dark-dropdown [class*="-option"][aria-selected="true"] {
  background-color: #1b1b1b !important;
  color: #fff !important;
}

/* make the dropdown input itself dark */
.dark-dropdown input[type="text"] {
  background-color: #111 !important;
  color: #fff !important;
}

/* optional: darken the toolbar row behind controls */
.tt-toolbar {
  background: #1a1a1a;
  padding: 6px 10px;
  border-radius: 6px;
}
/* OPTIONAL in assets/custom.css */
.charts-area .card { background:#1a1a1a; }
.charts-area .card-body { padding: 8px 12px; }
.js-plotly-plot .modebar { background: transparent !important; }
/* force white typing color in the tokenizing input */
.dark-dropdown .Select-input > input,
.dark-dropdown [class*="-input"] input {
  color: #fff !important;
  caret-color: #fff !important;
}

/* optional: ensure placeholder is lighter gray */
.dark-dropdown .Select-placeholder,
.dark-dropdown [class*="-placeholder"] {
  color: #ced4da !important;
}

/* sticky totals for summary table */
.tbl-wrap {
  position: relative;
}
.tbl-total {
  position: sticky;
  bottom: 0;
  background: #111;            /* match dark theme */
  border-top: 1px solid #2b2b2b;
  padding: 8px 10px;
  z-index: 2;
}

/* Position sort icons next to column text in DataTables */
/* Make all header cells use flexbox */
#summary_tbl th.dash-header > div {
  display: flex !important;
  align-items: center !important;
}

/* For right-aligned numeric columns: group sort icon and text together, align both to the right */
#summary_tbl th.dash-header:not([data-dash-column="Date"]):not([data-dash-column="Symbol"]) > div {
  flex-direction: row-reverse !important;
  justify-content: flex-end !important;
}

/* Position sort icon right before the text for right-aligned columns */
#summary_tbl th.dash-header:not([data-dash-column="Date"]):not([data-dash-column="Symbol"]) .sort {
  order: 1 !important;
  margin-right: 4px !important;
  margin-left: 0 !important;
}

#summary_tbl th.dash-header:not([data-dash-column="Date"]):not([data-dash-column="Symbol"]) .column-header-name {
  order: 2 !important;
  text-align: right !important;
}

/* For left-aligned columns (Date, Symbol): text then sort icon, both aligned left */
#summary_tbl th[data-dash-column="Date"] > div,
#summary_tbl th[data-dash-column="Symbol"] > div {
  flex-direction: row !important;
  justify-content: flex-start !important;
}

/* Position sort icon right after the text for left-aligned columns */
#summary_tbl th[data-dash-column="Date"] .sort,
#summary_tbl th[data-dash-column="Symbol"] .sort {
  order: 2 !important;
  margin-left: 4px !important;
  margin-right: 0 !important;
}

#summary_tbl th[data-dash-column="Date"] .column-header-name,
#summary_tbl th[data-dash-column="Symbol"] .column-header-name {
  order: 1 !important;
  text-align: left !important;
}

/* Style sort icons */
#summary_tbl .dash-header .sort {
  opacity: 0.85 !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
}

/* ============================================================================
   WOLFGANG WAY ALERT MESSAGE - PURPLE COLOR
   ============================================================================
   IMPORTANT: The alert message color (e.g., "Loaded Test_Input_111125.csv (1.82 MB)")
   MUST ALWAYS be purple (#7b2cbf). Do NOT change this color.
   This applies to all alert states: info, success, warning, danger, etc.
   ============================================================================ */

/* Purple alert message - MUST ALWAYS be purple (#7b2cbf) - DO NOT CHANGE */
#ww-pnl-msg.ww-purple-alert,
#ww-pnl-msg.alert-info,
#ww-pnl-msg.alert-success,
#ww-pnl-msg.alert-secondary,
#ww-pnl-msg.alert-warning,
#ww-pnl-msg.alert-danger {
  background-color: #7b2cbf !important;
  border-color: #7b2cbf !important;
  color: white !important;
}

/* Ensure purple color is maintained in all alert states */
.ww-purple-alert.alert,
.ww-purple-alert.alert-info,
.ww-purple-alert.alert-success,
.ww-purple-alert.alert-secondary,
.ww-purple-alert.alert-warning,
.ww-purple-alert.alert-danger {
  background-color: #7b2cbf !important;
  border-color: #7b2cbf !important;
  color: white !important;
}