@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

* { box-sizing: border-box; }
body { margin: 0; font-family: 'Outfit', sans-serif; background: #12141f; }

/* ── Dash dropdown dark theme — legacy (react-select v1) ───────────────────── */
.Select-control {
    background-color: #161827 !important;
    border-color: #2d3148 !important;
    color: #e8eaf6 !important;
}
.Select-menu-outer {
    background: #1e2130 !important;
    border: 1px solid #2d3148 !important;
    z-index: 9999 !important;
}
.Select-option {
    background: #1e2130 !important;
    color: #e8eaf6 !important;
}
.Select-option:hover,
.Select-option.is-focused {
    background: #2d3148 !important;
    color: #ffffff !important;
}
.Select-option.is-selected {
    background: #3d4270 !important;
    color: #ffffff !important;
}
.Select-value-label { color: #e8eaf6 !important; }
.Select-placeholder { color: #4a5275 !important; }
.Select-input > input { color: #e8eaf6 !important; background: transparent !important; }
.Select-arrow { border-color: #7c85a8 transparent transparent !important; }
.Select-clear { color: #7c85a8 !important; }
.Select-multi-value-wrapper { gap: 4px; }
.Select--multi .Select-value {
    background: #2d3148 !important;
    border-color: #3d4270 !important;
    color: #e8eaf6 !important;
    border-radius: 6px !important;
}
.Select--multi .Select-value-icon {
    border-right-color: #3d4270 !important;
    color: #7c85a8 !important;
}
.Select--multi .Select-value-icon:hover { color: #f87171 !important; background: transparent !important; }

/* ── Dash dropdown dark theme — modern (react-select v5 / Dash 2.x) ────────── */
.VirtualizedSelectOption,
.VirtualizedSelectFocusedOption {
    background: #1e2130 !important;
    color: #e8eaf6 !important;
}
.VirtualizedSelectFocusedOption {
    background: #2d3148 !important;
}
.VirtualizedSelectSelectedOption {
    background: #3d4270 !important;
    color: #ffffff !important;
}

/* Target Dash's actual rendered dropdown menu and options */
.dash-dropdown .dropdown-container,
.dash-dropdown [class*="menu"],
.dash-dropdown [class*="MenuList"],
.dash-dropdown [class*="menu-list"] {
    background-color: #1e2130 !important;
    border: 1px solid #2d3148 !important;
}
.dash-dropdown [class*="option"],
.dash-dropdown [class*="Option"] {
    background-color: #1e2130 !important;
    color: #e8eaf6 !important;
}
.dash-dropdown [class*="option"]:hover,
.dash-dropdown [class*="option"]:active,
.dash-dropdown [class*="option"]:focus,
.dash-dropdown [class*="is-focused"],
.dash-dropdown [class*="isFocused"] {
    background-color: #2d3148 !important;
    color: #ffffff !important;
}
.dash-dropdown [class*="is-selected"],
.dash-dropdown [class*="isSelected"] {
    background-color: #3d4270 !important;
    color: #ffffff !important;
}
.dash-dropdown [class*="control"] {
    background-color: #161827 !important;
    border-color: #2d3148 !important;
    color: #e8eaf6 !important;
}
.dash-dropdown [class*="singleValue"],
.dash-dropdown [class*="placeholder"] {
    color: #e8eaf6 !important;
}
.dash-dropdown [class*="placeholder"] {
    color: #4a5275 !important;
}
.dash-dropdown [class*="Input"] input {
    color: #e8eaf6 !important;
}
.dash-dropdown [class*="multiValue"] {
    background: #2d3148 !important;
    border-radius: 6px !important;
}
.dash-dropdown [class*="multiValue"] [class*="label"],
.dash-dropdown [class*="MultiValueLabel"] {
    color: #e8eaf6 !important;
}
.dash-dropdown [class*="IndicatorSeparator"],
.dash-dropdown [class*="indicatorSeparator"] {
    background-color: #2d3148 !important;
}
.dash-dropdown [class*="DropdownIndicator"],
.dash-dropdown [class*="dropdownIndicator"] {
    color: #7c85a8 !important;
}

/* Nuclear fallback — catch any unstyled option text in the dropdown */
div[id$="-dropdown"] * { color: #e8eaf6; }
div[id$="-dropdown"] input { color: #e8eaf6 !important; }

/* ── Dash table filter inputs ───────────────────────────────────────────────── */
.dash-filter input {
    color: #c7d0f0 !important;
    background: transparent !important;
}

/* ── Checklist labels ───────────────────────────────────────────────────────── */
.dash-checklist label { color: #c7d0f0; cursor: pointer; }

/* ── Markdown links in table ────────────────────────────────────────────────── */
.dash-cell a {
    color: #818cf8 !important;
    text-decoration: none;
}
.dash-cell a:hover { color: #a5b4fc !important; text-decoration: underline; }

/* ── Pagination ─────────────────────────────────────────────────────────────── */
.previous-page, .next-page, .last-page, .first-page, .page-number {
    color: #c7d0f0 !important;
    background: #1e2130 !important;
    border-color: #2d3148 !important;
}
.page-number.current { background: #2d3148 !important; }