/* ========================================
   Stocks Analyzer - Global Dark Theme
   ======================================== */

/* Override Bootstrap Darkly CSS variables for white text */
:root,
[data-bs-theme="dark"] {
    --bs-body-color: #ffffff !important;
    --bs-btn-color: #ffffff !important;
    --bs-secondary-color: #ffffff !important;
    --bs-btn-bg: #222 !important;
}

body {
    background-color: #1a1a1a;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* Force all button elements (Dash dropdowns) to white text */
button {
    color: #ffffff !important;
}

/* ========================================
   GEX History Date Dropdown - Dark Theme
   ======================================== */

/* Main dropdown container */
#gex-history-date-dropdown .Select-control {
    background-color: #222 !important;
    border-color: #ccc !important;
}

/* Selected value and input text */
#gex-history-date-dropdown .Select-value-label,
#gex-history-date-dropdown .Select-input input,
#gex-history-date-dropdown .Select-value {
    color: #ffffff !important;
}

#gex-history-date-dropdown .Select-placeholder {
    color: #666 !important;
}

/* Dropdown menu */
#gex-history-date-dropdown .Select-menu-outer {
    background-color: #222 !important;
    border-color: #ccc !important;
}

/* Dropdown options */
#gex-history-date-dropdown .VirtualizedSelectOption {
    background-color: #222 !important;
    color: #ffffff !important;
}

#gex-history-date-dropdown .VirtualizedSelectOption:hover,
#gex-history-date-dropdown .VirtualizedSelectFocusedOption {
    background-color: #222 !important;
    color: #ffffff !important;
}

/* Alternative selectors for different Dash versions */
#gex-history-date-dropdown .Select-input>input {
    color: #ffffff !important;
}

#gex-history-date-dropdown .Select-option {
    background-color: #222 !important;
    color: #ffffff !important;
}

#gex-history-date-dropdown .Select-option.is-focused {
    background-color: #222 !important;
    color: #ffffff !important;
}

/* Single value display (when dropdown is closed) */
#gex-history-date-dropdown .Select-value-label {
    color: #ffffff !important;
}

/* Arrow indicator */
#gex-history-date-dropdown .Select-arrow-zone {
    color: #ffffff !important;
}

/* ========================================
   Alerts Date Dropdown - Dark Theme
   ======================================== */

/* Main dropdown container */
#alerts-date-dropdown .Select-control {
    background-color: #222 !important;
    border-color: #ccc !important;
}

/* Selected value and input text */
#alerts-date-dropdown .Select-value-label,
#alerts-date-dropdown .Select-input input,
#alerts-date-dropdown .Select-value {
    color: #ffffff !important;
}

#alerts-date-dropdown .Select-placeholder {
    color: #666 !important;
}

/* Dropdown menu */
#alerts-date-dropdown .Select-menu-outer {
    background-color: #222 !important;
    border-color: #ccc !important;
}

/* Dropdown options */
#alerts-date-dropdown .VirtualizedSelectOption {
    background-color: #222 !important;
    color: #ffffff !important;
}

#alerts-date-dropdown .VirtualizedSelectOption:hover,
#alerts-date-dropdown .VirtualizedSelectFocusedOption {
    background-color: #222 !important;
    color: #ffffff !important;
}

/* Alternative selectors for different Dash versions */
#alerts-date-dropdown .Select-input>input {
    color: #ffffff !important;
}

#alerts-date-dropdown .Select-option {
    background-color: #222 !important;
    color: #ffffff !important;
}

#alerts-date-dropdown .Select-option.is-focused {
    background-color: #222 !important;
    color: #ffffff !important;
}

/* Single value display (when dropdown is closed) */
#alerts-date-dropdown .Select-value-label {
    color: #ffffff !important;
}

/* Arrow indicator */
#alerts-date-dropdown .Select-arrow-zone {
    color: #ffffff !important;
}

/* ========================================
   Ticker Analysis Dropdown - Dark Theme
   ======================================== */

/* Main dropdown container */
#ticker-analysis-dropdown .Select-control {
    background-color: #222 !important;
    border-color: #ccc !important;
}

/* Selected value and input text */
#ticker-analysis-dropdown .Select-value-label,
#ticker-analysis-dropdown .Select-input input,
#ticker-analysis-dropdown .Select-value {
    color: #ffffff !important;
}

#ticker-analysis-dropdown .Select-placeholder {
    color: #666 !important;
}

/* Dropdown menu */
#ticker-analysis-dropdown .Select-menu-outer {
    background-color: #222 !important;
    border-color: #ccc !important;
}

/* Dropdown options */
#ticker-analysis-dropdown .VirtualizedSelectOption {
    background-color: #222 !important;
    color: #ffffff !important;
}

#ticker-analysis-dropdown .VirtualizedSelectOption:hover,
#ticker-analysis-dropdown .VirtualizedSelectFocusedOption {
    background-color: #222 !important;
    color: #ffffff !important;
}

/* Alternative selectors for different Dash versions */
#ticker-analysis-dropdown .Select-input>input {
    color: #ffffff !important;
}

#ticker-analysis-dropdown .Select-option {
    background-color: #222 !important;
    color: #ffffff !important;
}

#ticker-analysis-dropdown .Select-option.is-focused {
    background-color: #222 !important;
    color: #ffffff !important;
}

/* Single value display (when dropdown is closed) */
#ticker-analysis-dropdown .Select-value-label {
    color: #ffffff !important;
}

/* Arrow indicator */
#ticker-analysis-dropdown .Select-arrow-zone {
    color: #ffffff !important;
}

/* Modern Dash dropdown styling (react-select v5+) */
#ticker-analysis-dropdown .css-13cymwt-control,
#ticker-analysis-dropdown .css-t3ipsp-control,
#ticker-analysis-dropdown [class*="-control"] {
    background-color: #222 !important;
    border-color: #ccc !important;
}

#ticker-analysis-dropdown .css-1dimb5e-singleValue,
#ticker-analysis-dropdown [class*="-singleValue"] {
    color: #ffffff !important;
}

#ticker-analysis-dropdown .css-1nmdiq5-menu,
#ticker-analysis-dropdown [class*="-menu"] {
    background-color: #222 !important;
    border-color: #ccc !important;
}

#ticker-analysis-dropdown .css-d7l1ni-option,
#ticker-analysis-dropdown .css-tr4s17-option,
#ticker-analysis-dropdown [class*="-option"] {
    background-color: #222 !important;
    color: #ffffff !important;
}

#ticker-analysis-dropdown .css-d7l1ni-option:hover,
#ticker-analysis-dropdown .css-10wo9uf-option,
#ticker-analysis-dropdown [class*="-option"]:hover {
    background-color: #222 !important;
    color: #ffffff !important;
}

#ticker-analysis-dropdown .css-1jqq78o-placeholder,
#ticker-analysis-dropdown [class*="-placeholder"] {
    color: #666 !important;
}

#ticker-analysis-dropdown input {
    color: #ffffff !important;
    text-transform: uppercase !important;
}

#ticker-search input {
    text-transform: uppercase !important;
}

/* Make the clear (X) icon on ticker-search more prominent */
#ticker-search [class*="clearIndicator"],
#ticker-search .Select-clear-zone {
    color: #ff6b6b !important;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer !important;
    padding: 0 8px !important;
    font-size: 18px !important;
}

#ticker-search [class*="clearIndicator"]:hover,
#ticker-search .Select-clear-zone:hover {
    color: #ff4444 !important;
}

#ticker-search [class*="clearIndicator"] svg,
#ticker-search .Select-clear-zone svg {
    fill: #ff6b6b !important;
    width: 16px !important;
    height: 16px !important;
}

#ticker-search [class*="clearIndicator"]:hover svg,
#ticker-search .Select-clear-zone:hover svg {
    fill: #ff4444 !important;
}

/* ========================================
   Darkpool Date Pickers - Matching Style
   ======================================== */

/* Container styling for date pickers */
#dp-viz-start-date,
#dp-viz-end-date {
    display: inline-block;
    vertical-align: middle;
}

/* Input field styling - Force visible width and colors */
#dp-viz-start-date .DateInput_input,
#dp-viz-end-date .DateInput_input {
    background-color: #222 !important;
    color: #ffffff !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    height: 38px !important;
    /* Increased slightly */
    width: 110px !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

#dp-viz-start-date .DateInput_input:focus,
#dp-viz-end-date .DateInput_input:focus {
    border-color: #3498db !important;
    outline: none !important;
}

/* Calendar icon button */
#dp-viz-start-date .SingleDatePickerInput_calendarIcon,
#dp-viz-end-date .SingleDatePickerInput_calendarIcon {
    padding: 5px !important;
}

/* Calendar icon color */
#dp-viz-start-date .SingleDatePickerInput_calendarIcon svg,
#dp-viz-end-date .SingleDatePickerInput_calendarIcon svg {
    fill: #000 !important;
}

/* Container wrapper - Ensure transparent so input is visible */
#dp-viz-start-date .SingleDatePickerInput,
#dp-viz-end-date .SingleDatePickerInput {
    background-color: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
}

/* DateInput container - Width must fit the input */
#dp-viz-start-date .DateInput,
#dp-viz-end-date .DateInput {
    background-color: transparent !important;
    width: 110px !important;
    display: block !important;
}

/* ========================================
   BULLDOZER CSS (Build 22.2)
   Aggressive fixes for stubborn white elements
   ======================================== */

/* 0. UTILITY: DARK MODE DROPDOWN */
.dark-mode-dropdown,
[class*="dark-mode-dropdown"] {
    background-color: #222 !important;
    color: #ffffff !important;
}

/* Force uppercase for all ticker search inputs */
/* Force uppercase for all ticker search inputs - NUCLEAR OPTION */
#ticker-search input,
#ticker-analysis-dropdown input,
#interest-ticker-dropdown input,
#dp-viz-ticker-dropdown input,
.dark-mode-dropdown input,
.Select-input input,
.Select-control input,
div[class*="Select"] input,
input[role="combobox"],
input[aria-autocomplete="list"],
.dash-dropdown input[type="text"] {
    text-transform: uppercase !important;
}

.dark-mode-dropdown input,
.dark-mode-dropdown .Select-control,
.dark-mode-dropdown .DateInput_input {
    background-color: #222 !important;
    color: #ffffff !important;
    border-color: #ccc !important;
}

/* 1. GLOBAL INPUT/DROPDOWN FORCE DARK */
.Select-control,
.Select-menu-outer,
.dash-dropdown,
input:not([type="checkbox"]):not([type="radio"]),
.DateInput_input,
.DateInput_input__focused,
.DateInput_input_1,
.SingleDatePickerInput,
.SingleDatePickerInput__with-border,
.DateInput,
[class*="SingleDatePickerInput"],
[class*="DateInput"],
[class*="-control"],
[class*="-menu"] {
    background-color: #222 !important;
    background: #222 !important;
    color: #ffffff !important;
    border-color: #444 !important;
}

/* Fix text inside inputs */
.Select-value-label,
.Select-placeholder,
.Select-input input,
.Select-clear-zone,
.Select-clear,
.Select-arrow-zone,
.Select-arrow,
[class*="-singleValue"],
[class*="-placeholder"],
[class*="-indicatorContainer"],
[class*="-indicatorSeparator"],
[class*="-loadingIndicator"],
[class*="-IndicatorsContainer"] {
    color: #ffffff !important;
}

/* Ensure placeholders are explicitly white */
::placeholder,
.Select-placeholder,
[class*="-placeholder"] {
    color: #ffffff !important;
    opacity: 0.8 !important;
}

/* Force white color on SVG icons (arrows, clear icons) */
.Select-clear-zone svg,
.Select-arrow-zone svg,
[class*="-indicatorContainer"] svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* Hover states */
.Select-option:hover,
[class*="-option"]:hover {
    background-color: #222 !important;
    color: #ffffff !important;
}

/* 4. NUCLEAR DROPDOWN ICON FIXES */
[class*="-indicatorContainer"],
[class*="-clear-zone"],
[class*="-arrow-zone"],
.Select-arrow-zone,
.Select-clear-zone,
[class*="-indicatorSeparator"] {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Deep target all SVGs inside indicators */
[class*="-indicatorContainer"] svg,
[class*="-clear-zone"] svg,
[class*="-arrow-zone"] svg,
.Select-arrow-zone svg,
.Select-clear-zone svg,
.Select-arrow,
.Select-clear {
    fill: #ffffff !important;
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Target the dropdown arrow specifically in some Dash versions */
.Select-arrow {
    border-top-color: #ffffff !important;
}

.is-open>.Select-control>.Select-arrow-zone>.Select-arrow {
    border-bottom-color: #ffffff !important;
}

/* ========================================
   Slider Tooltip - Always Visible & Bright
   ======================================== */
.rc-slider-tooltip-inner,
.rc-slider-tooltip-inner *,
[class*="rc-slider-tooltip-inner"],
[class*="rc-slider-tooltip-inner"] * {
    background-color: #000000 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    padding: 2px 6px !important;
    min-width: 24px !important;
    text-align: center !important;
    border-radius: 4px !important;
    border: 1px solid #00d4ff !important;
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.6) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Override any nuclear white-box/black-text rules specifically for slider tooltips */
.rc-slider-tooltip div,
.rc-slider-tooltip span,
.rc-slider-tooltip b,
.rc-slider-tooltip p {
    background-color: transparent !important;
    color: #ffffff !important;
}

.rc-slider-tooltip-arrow,
.rc-slider-tooltip-arrow::before {
    border-top-color: #00d4ff !important;
}

/* 3. SLIDER HANDLES & MARKS */
.rc-slider-handle {
    background-color: #3498db !important;
    border: 2px solid #3498db !important;
    opacity: 1 !important;
}

.rc-slider-rail {
    background-color: #444 !important;
    height: 6px !important;
}

.rc-slider-track {
    background-color: #3498db !important;
    height: 6px !important;
}

.rc-slider-mark-text {
    color: #ffffff !important;
    opacity: 0.9 !important;
}

/* ========================================
   NUCLEAR: Force white text on ALL Dash dropdown descendants
   Dash renders dropdowns as <button> with nested <span> tags.
   This catches every single nested element regardless of class.
   ======================================== */
.dash-dropdown *,
.dash-dropdown span,
.dash-dropdown button,
.dash-dropdown div,
.dark-mode-dropdown *,
.dark-mode-dropdown span,
.dark-mode-dropdown button,
.dark-mode-dropdown div {
    color: #ffffff !important;
}

/* Also target by ID for specific dropdowns */
#dp-viz-ticker-dropdown *,
#dp-viz-start-date *,
#dp-viz-end-date *,
#dp-viz-timezone-selector *,
#dp-viz-min-notional *,
#dp-viz-phantom-vol *,
#ticker-analysis-dropdown *,
#analysis-start-date *,
#analysis-end-date *,
#interest-date-dropdown *,
#interest-ticker-dropdown *,
#alerts-date-dropdown *,
#gex-history-date-dropdown *,
#alerts-sort-dropdown *,
#ticker-search * {
    color: #ffffff !important;
}

/* Dropdown menu items - ensure visible on hover */
.dash-dropdown .VirtualizedSelectOption,
.dash-dropdown [class*="-option"] {
    color: #ffffff !important;
    background-color: #222 !important;
}

.dash-dropdown .VirtualizedSelectOption:hover,
.dash-dropdown [class*="-option"]:hover {
    background-color: #3498db !important;
    color: #ffffff !important;
}

/* ========================================
   ULTRA-SPECIFIC: Target button.dash-dropdown directly
   Bootstrap Darkly sets muted colors on <button> elements.
   These rules have maximum specificity to override Bootstrap.
   ======================================== */
button.dash-dropdown,
button.dash-dropdown span,
button.dash-dropdown span span,
button.dash-dropdown span span span,
button.dash-dropdown span span span span,
button.dark-mode-dropdown,
button.dark-mode-dropdown span,
button.dark-mode-dropdown span span,
button.dark-mode-dropdown span span span,
button.dark-mode-dropdown span span span span {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Target by ID with descendant specificity */
button#dp-viz-ticker-dropdown,
button#dp-viz-ticker-dropdown span,
button#dp-viz-start-date,
button#dp-viz-start-date span,
button#dp-viz-end-date,
button#dp-viz-end-date span,
button#dp-viz-timezone-selector,
button#dp-viz-timezone-selector span,
button#dp-viz-min-notional,
button#dp-viz-min-notional span,
button#dp-viz-phantom-vol,
button#dp-viz-phantom-vol span,
button#ticker-analysis-dropdown,
button#ticker-analysis-dropdown span,
button#analysis-start-date,
button#analysis-start-date span,
button#analysis-end-date,
button#analysis-end-date span,
button#dte-selector,
button#dte-selector span,
button#timezone-selector,
button#timezone-selector span,
button#feed-row-limit,
button#feed-row-limit span,
button#interest-date-dropdown,
button#interest-date-dropdown span,
button#interest-ticker-dropdown,
button#interest-ticker-dropdown span,
button#alerts-date-dropdown,
button#alerts-date-dropdown span,
button#alerts-sort-dropdown,
button#alerts-sort-dropdown span,
button#gex-history-date-dropdown,
button#gex-history-date-dropdown span {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Also cover div-based dropdowns (some Dash versions use div not button) */
div.dash-dropdown span,
div.dark-mode-dropdown span,
.dash-dropdown > span,
.dash-dropdown > span > span,
.dash-dropdown > span > span > span,
.dash-dropdown > span > span > span > span {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* ========================================
   Has Tweet Checklist Styling
   ======================================== */
.text-white.small input[type="checkbox"] {
    accent-color: #00d4ff;
    cursor: pointer;
    width: 14px;
    height: 14px;
}

.text-white.small label {
    cursor: pointer;
    color: #ccc !important;
}

/* ========================================
   DataTable Pagination - Dark Mode
   ======================================== */
.dash-table-container .previous-next-container button,
.dash-table-container .previous-next-container .page-number {
    background-color: #333 !important;
    color: #ffffff !important;
    border: 1px solid #555 !important;
}

.dash-table-container .previous-next-container button:hover {
    background-color: #444 !important;
}

.dash-table-container .previous-next-container .current-page-container input {
    background-color: #333 !important;
    color: #ffffff !important;
    border: 1px solid #555 !important;
}

/* Also target the page number input and surrounding elements */
.dash-table-container .previous-next-container input[type="number"],
.dash-table-container .previous-next-container input {
    background-color: #333 !important;
    color: #ffffff !important;
    border: 1px solid #555 !important;
    -webkit-appearance: none;
}

/* Page count text (e.g. "/ 2") */
.dash-table-container .previous-next-container span {
    color: #ffffff !important;
}

/* Override any nuclear white-box rules for pagination */
.dash-table-container .previous-next-container * {
    background-color: transparent !important;
    color: #ffffff !important;
}

.dash-table-container .previous-next-container button {
    background-color: #333 !important;
}

.dash-table-container .previous-next-container input {
    background-color: #333 !important;
}

/* ========================================
   GEX Profile Ticker Generator Styling
   ======================================== */
#gex-gen-ticker {
    background-color: #222 !important;
    color: #ffffff !important;
    border: 1px solid #555 !important;
}

#gex-gen-ticker::placeholder {
    color: #888 !important;
}

/* ========================================
   Layout Shift Prevention (0-DTE tab)
   Prevents page jumping when interval callbacks
   replace container children every 10 seconds.
   ======================================== */

/* Isolate reflows within each feed container */
#consolidated-flow-feed,
#darkpool-alerts-feed {
    contain: layout style;
    overflow-anchor: none;
}

#spx-trade-recommendation-container {
    contain: layout size style;
    overflow-anchor: none;
}

#gexbot-enhanced-container {
    contain: layout style;
    overflow-anchor: none;
}

/* ========================================
   Loading state: show message while callback processes
   Dash sets data-dash-is-loading="true" on components
   ======================================== */
#ai-darkpool-container[data-dash-is-loading="true"] > *,
#ai-big-dp-container[data-dash-is-loading="true"] > *,
#ai-net-gex-change-container[data-dash-is-loading="true"] > * {
    display: none !important;
}

#ai-darkpool-container[data-dash-is-loading="true"]::before,
#ai-big-dp-container[data-dash-is-loading="true"]::before,
#ai-net-gex-change-container[data-dash-is-loading="true"]::before {
    content: "⏳ Preparing data...";
    color: #ffc107;
    font-size: 16px;
    padding: 40px 12px;
    display: block;
    font-style: italic;
    text-align: center;
    font-weight: 500;
}

/* Dropdown 'No options found' searching and customization */
[data-dash-is-loading="true"] .Select-no-results,
[data-dash-is-loading="true"] .react-select__menu-notice--no-options {
    visibility: hidden;
    position: relative;
    height: 40px;
}

[data-dash-is-loading="true"] .Select-no-results::after,
[data-dash-is-loading="true"] .react-select__menu-notice--no-options::after {
    content: "Searching...";
    visibility: visible;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: #f1c40f !important;
    font-weight: bold;
    font-style: italic;
    font-size: 0.9rem;
}

/* ========================================
   Custom Loading Overlay with Text
   ======================================== */

.loading-overlay {
    position: relative;
    min-height: 150px;
}

.loading-overlay ._dash-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loading-overlay ._dash-loading-spinner::after {
    content: "Preparing data... Please wait";
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    margin-top: 15px;
    background: rgba(0, 0, 0, 0.75);
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid #333;
    white-space: nowrap;
}

/* ========================================
   Tweets Table Image Thumbnail Styling
   ======================================== */
#tweets-table .dash-cell img,
#top-tweets-table .dash-cell img,
.dash-spreadsheet td div.dash-cell-value img,
.dash-spreadsheet td img {
    height: 34px !important;
    max-width: 60px !important;
    border-radius: 4px !important;
    object-fit: cover !important;
    cursor: pointer !important;
    border: 1px solid #1da1f2 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

#tweets-table .dash-cell img:hover,
#top-tweets-table .dash-cell img:hover,
.dash-spreadsheet td div.dash-cell-value img:hover {
    transform: scale(1.2) !important;
    box-shadow: 0 0 10px rgba(29, 161, 242, 0.8) !important;
    border-color: #00d2ff !important;
}