/* ============================================================
   Majors Group Dashboard — custom CSS overrides
   Loaded automatically by Dash from the assets/ folder.
   ============================================================ */

/* DatePickerRange — force black text on white background so dates
   are readable. Default Dash/react-dates styling shows light grey
   text which is invisible on the dark-mode dashboard. */
.DateInput,
.DateInput_input,
.DateInput_input_1 {
    background-color: #ffffff !important;
    color: #000000 !important;
    font-weight: 500 !important;
}

/* The arrow / separator between start and end inputs */
.DateRangePickerInput_arrow_svg {
    fill: #000000 !important;
}

/* The whole DateRangePickerInput wrapper — keep white so text is on
   white background, not the dark card */
.DateRangePickerInput {
    background-color: #ffffff !important;
    border: 1px solid #334155 !important;
    border-radius: 4px !important;
}

/* ============================================================
   Dropdown styling — dashboard uses dark theme, so dropdowns need
   LIGHT text on the dark control background, NOT black.
   Targets both legacy react-select v1 (.Select-*) and Dash 3.x's
   BEM-style react-select v5 (.Select__*) so it works regardless
   of Dash version.
   ============================================================ */

/* --- The dropdown control box (the "input" the user clicks) --- */
.Select-control,
.Select__control {
    background-color: #1e293b !important;     /* dashboard card colour */
    border: 1px solid #334155 !important;
    box-shadow: none !important;
}
.Select__control--is-focused {
    border-color: #22d3ee !important;
}

/* --- Selected single value, placeholder, and search input --- */
.Select-value-label,
.Select-input > input,
.Select-placeholder,
.Select__single-value,
.Select__placeholder,
.Select__input-container,
.Select__input-container input {
    color: #f1f5f9 !important;                /* light text on dark bg */
}
/* Placeholder text slightly muted */
.Select__placeholder,
.Select-placeholder {
    color: #94a3b8 !important;
}

/* --- Dropdown menu panel (when you click to open) ---
   react-select v5 uses Emotion CSS-in-JS with high specificity, so we
   need very specific selectors here. Doubling class names increases
   specificity without adding `!important` arms races. */
div.Select__menu,
div.Select-menu-outer {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
}
div.Select__menu-list,
.Select__menu .Select__menu-list {
    background-color: #1e293b !important;
    padding: 4px 0 !important;
}

/* Option rows: high-specificity to beat Emotion's runtime styles */
.Select__menu .Select__option,
div.Select__option,
.Select-menu .Select-option {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    cursor: pointer !important;
    padding: 8px 12px !important;
}

/* Hover row */
.Select__menu .Select__option--is-focused,
div.Select__option--is-focused,
.Select-menu .Select-option.is-focused {
    background-color: #334155 !important;
    color: #ffffff !important;
}

/* Currently-selected option (the one you picked previously) */
.Select__menu .Select__option--is-selected,
div.Select__option--is-selected,
.Select-menu .Select-option.is-selected {
    background-color: #22d3ee !important;
    color: #0f172a !important;
}

/* Disabled options (rare but cover anyway) */
.Select__menu .Select__option--is-disabled,
div.Select__option--is-disabled {
    color: #64748b !important;
    cursor: not-allowed !important;
}

/* "No options" / "Loading" message */
.Select__menu-notice,
.Select__menu-notice--no-options,
.Select__menu-notice--loading {
    color: #94a3b8 !important;
    background-color: #1e293b !important;
}

/* --- Indicator separator + arrow --- */
.Select__indicator-separator {
    background-color: #334155 !important;
}
.Select__indicator,
.Select__dropdown-indicator {
    color: #94a3b8 !important;
}
.Select__indicator:hover {
    color: #f1f5f9 !important;
}

/* --- Multi-select chips --- */
.Select--multi .Select-value,
.Select__multi-value {
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #f1f5f9 !important;
}
.Select--multi .Select-value-label,
.Select__multi-value__label {
    color: #f1f5f9 !important;
}
.Select--multi .Select-value-icon,
.Select__multi-value__remove {
    color: #f1f5f9 !important;
}
.Select__multi-value__remove:hover {
    background-color: #ef4444 !important;
    color: #ffffff !important;
}

/* ============================================================
   Tab nav — streamlined hover state + tight spacing
   ============================================================ */
.tab-parent .tab {
    transition: color 0.15s ease, border-color 0.15s ease;
}
.tab-parent .tab:hover:not(.tab--selected) {
    color: #f1f5f9 !important;
    border-bottom: 2px solid rgba(34, 211, 238, 0.4) !important;
}
.tab-parent ::-webkit-scrollbar {
    height: 4px;
}
.tab-parent ::-webkit-scrollbar-thumb {
    background: rgba(34, 211, 238, 0.3);
    border-radius: 2px;
}

/* ============================================================
   Quick-switch pill buttons (Products tab category multi-select)
   Works for both dcc.RadioItems (radio) and dcc.Checklist (checkbox).
   ============================================================ */
.cat-pill .form-check {
    display: inline-block;
    margin-right: 0;
}
.cat-pill input[type="radio"],
.cat-pill input[type="checkbox"] {
    display: none;
}
.cat-pill label {
    padding: 6px 14px;
    margin-right: 6px;
    margin-bottom: 6px;
    background-color: #1e293b;
    color: #94a3b8;
    border: 1px solid #334155;
    border-radius: 16px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    user-select: none;
    transition: all 0.15s ease;
    display: inline-block;
}
.cat-pill label:hover {
    color: #f1f5f9;
    border-color: #22d3ee;
}
.cat-pill input[type="radio"]:checked + label,
.cat-pill input[type="checkbox"]:checked + label {
    background-color: #22d3ee;
    color: #0f172a;
    border-color: #22d3ee;
}