/* ========================================
   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 Tooltips - Completely Hidden
   ======================================== */
.rc-tooltip,
.rc-tooltip *,
.rc-slider-tooltip,
.rc-slider-tooltip *,
.rc-tooltip-inner,
.rc-tooltip-inner *,
.rc-slider-tooltip-inner,
.rc-slider-tooltip-inner *,
[class*="rc-tooltip"],
[class*="rc-tooltip"] * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}



/* Hide Dash RangeSlider side input boxes (.dash-range-slider-input) */
.dash-range-slider-input,
.dash-range-slider-min-input,
.dash-range-slider-max-input,
.dash-slider-container input,
#gex-history-time-slider input {
    display: none !important;
}

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

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

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

html body .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;
}



/* 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
   ======================================== */
#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;
}

#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;
}

/* Active Navbar Link Highlighting */
/* ========================================
   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;
}



/* 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;
}

/* Active Navbar Link Highlighting */
.nav-link-custom.active {
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.4) !important;
    border-bottom: 2px solid #00f2fe !important;
    font-weight: 800 !important;
    color: #ffffff !important;
}

/* Ensure all cells in Twitter and 0DTE tables are vertically centered and aligned */
#tweets-table td,
#top-tweets-table td,
#tweets-heatseeker-table td,
#tweets-0dte-table td,
#tweets-0dte-table-clone td,
.dash-spreadsheet td {
    vertical-align: middle !important;
}

#tweets-table td[data-dash-column="Footprint"],
#tweets-table td[data-dash-column="Sentiment"],
#tweets-heatseeker-table td[data-dash-column="Sentiment"],
#tweets-0dte-table td[data-dash-column="Footprint"],
#tweets-0dte-table td[data-dash-column="Sentiment"],
#tweets-0dte-table-clone td[data-dash-column="Footprint"],
#tweets-0dte-table-clone td[data-dash-column="Sentiment"],
#top-tweets-table td[data-dash-column="Footprint"],
#top-tweets-table td[data-dash-column="Sentiment"] {
    vertical-align: middle !important;
    text-align: center !important;
    white-space: pre-line !important;
    line-height: 1.25 !important;
    font-size: 0.85rem !important;
}

/* ========================================
   0DTE & Twitter Live Feed Media Image (Large Preview)
   ======================================== */
#tweets-table td[data-dash-column="Image"] img,
#tweets-table td.column-1 img,
#top-tweets-table td[data-dash-column="Image"] img,
#top-tweets-table td.column-1 img,
#tweets-0dte-table td[data-dash-column="Image"] img,
#tweets-0dte-table td.column-1 img,
#tweets-0dte-table-clone td[data-dash-column="Image"] img,
#tweets-0dte-table-clone td.column-1 img,
.dash-spreadsheet td[data-dash-column="Image"] img {
    height: auto !important;
    max-height: 250px !important;
    max-width: 100% !important;
    min-width: 180px !important;
    border-radius: 6px !important;
    border: 1px solid #333 !important;
    cursor: pointer !important;
    display: block !important;
    margin: 0 auto !important;
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

#tweets-table td[data-dash-column="Image"] img:hover,
#tweets-table td.column-1 img:hover,
#top-tweets-table td[data-dash-column="Image"] img:hover,
#top-tweets-table td.column-1 img:hover,
#tweets-0dte-table td[data-dash-column="Image"] img:hover,
#tweets-0dte-table td.column-1 img:hover,
#tweets-0dte-table-clone td[data-dash-column="Image"] img:hover,
#tweets-0dte-table-clone td.column-1 img:hover,
.dash-spreadsheet td[data-dash-column="Image"] img:hover {
    transform: scale(1.03) !important;
    border-color: #1da1f2 !important;
    box-shadow: 0 0 12px rgba(29, 161, 242, 0.6) !important;
}

/* ========================================
   Author Profile Avatar in Info Column (Small & Circular)
   ======================================== */
#tweets-table td[data-dash-column="Info"] img,
#tweets-table td.column-0 img,
#top-tweets-table td[data-dash-column="Info"] img,
#top-tweets-table td.column-0 img,
#tweets-0dte-table td[data-dash-column="Info"] img,
#tweets-0dte-table td.column-0 img,
#tweets-0dte-table-clone td[data-dash-column="Info"] img,
#tweets-0dte-table-clone td.column-0 img,
.dash-spreadsheet td[data-dash-column="Info"] img,
.dash-spreadsheet td.column-0 img,
.dash-spreadsheet td img[src*="unavatar.io"],
.dash-spreadsheet td img[src*="profile_images"],
.dash-cell-value img[src*="unavatar.io"],
.dash-cell-value img[src*="profile_images"],
.dash-cell img[src*="unavatar.io"],
.dash-cell img[src*="profile_images"],
img[src*="unavatar.io"] {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: inline-block !important;
    vertical-align: -6px !important;
    margin-right: 6px !important;
    border: 1.5px solid #1da1f2 !important;
    box-shadow: 0 0 4px rgba(29, 161, 242, 0.4) !important;
    transition: transform 0.15s ease-in-out !important;
}

#tweets-table td[data-dash-column="Info"] img:hover,
#tweets-table td.column-0 img:hover,
#top-tweets-table td[data-dash-column="Info"] img:hover,
#top-tweets-table td.column-0 img:hover,
#tweets-0dte-table td[data-dash-column="Info"] img:hover,
#tweets-0dte-table td.column-0 img:hover,
#tweets-0dte-table-clone td[data-dash-column="Info"] img:hover,
#tweets-0dte-table-clone td.column-0 img:hover,
.dash-spreadsheet td[data-dash-column="Info"] img:hover,
.dash-spreadsheet td.column-0 img:hover,
.dash-spreadsheet td img[src*="unavatar.io"]:hover,
.dash-spreadsheet td img[src*="profile_images"]:hover,
.dash-cell img[src*="unavatar.io"]:hover,
.dash-cell img[src*="profile_images"]:hover,
img[src*="unavatar.io"]:hover {
    transform: scale(1.2) !important;
    border-color: #00d2ff !important;
    box-shadow: 0 0 8px rgba(0, 210, 255, 0.8) !important;
}

/* ========================================
   Interactive Clickable Author & Ticker Links in Info Column
   ======================================== */
#tweets-table td[data-dash-column="Info"] a,
#top-tweets-table td[data-dash-column="Info"] a,
#tweets-0dte-table td[data-dash-column="Info"] a,
#tweets-0dte-table-clone td[data-dash-column="Info"] a,
.dash-spreadsheet td[data-dash-column="Info"] a {
    text-decoration: none !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
}

#tweets-table td[data-dash-column="Info"] a[href*="#author="],
#top-tweets-table td[data-dash-column="Info"] a[href*="#author="],
#tweets-0dte-table td[data-dash-column="Info"] a[href*="#author="],
#tweets-0dte-table-clone td[data-dash-column="Info"] a[href*="#author="],
.dash-spreadsheet td[data-dash-column="Info"] a[href*="#author="] {
    color: #f0b90b !important; /* Gold */
}
#tweets-table td[data-dash-column="Info"] a[href*="#author="]:hover,
#top-tweets-table td[data-dash-column="Info"] a[href*="#author="]:hover,
#tweets-0dte-table td[data-dash-column="Info"] a[href*="#author="]:hover,
#tweets-0dte-table-clone td[data-dash-column="Info"] a[href*="#author="]:hover,
.dash-spreadsheet td[data-dash-column="Info"] a[href*="#author="]:hover {
    color: #ffd166 !important;
    text-decoration: underline !important;
}

#tweets-table td[data-dash-column="Info"] a[href*="#ticker="],
#top-tweets-table td[data-dash-column="Info"] a[href*="#ticker="],
#tweets-0dte-table td[data-dash-column="Info"] a[href*="#ticker="],
#tweets-0dte-table-clone td[data-dash-column="Info"] a[href*="#ticker="],
.dash-spreadsheet td[data-dash-column="Info"] a[href*="#ticker="] {
    color: #00e5ff !important; /* Cyan badge */
    background: rgba(0, 229, 255, 0.12) !important;
    padding: 1px 5px !important;
    border-radius: 3px !important;
    border: 1px solid rgba(0, 229, 255, 0.3) !important;
    margin: 1px 2px !important;
    display: inline-block !important;
    font-size: 0.92em !important;
}
#tweets-table td[data-dash-column="Info"] a[href*="#ticker="]:hover,
#top-tweets-table td[data-dash-column="Info"] a[href*="#ticker="]:hover,
#tweets-0dte-table td[data-dash-column="Info"] a[href*="#ticker="]:hover,
#tweets-0dte-table-clone td[data-dash-column="Info"] a[href*="#ticker="]:hover,
.dash-spreadsheet td[data-dash-column="Info"] a[href*="#ticker="]:hover {
    color: #ffffff !important;
    background: rgba(0, 229, 255, 0.45) !important;
    border-color: #00e5ff !important;
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.6) !important;
    text-decoration: none !important;
}

/* ========================================
   Top Tweets Expert Dropdown Filter with Avatars
   ======================================== */
#top-tweets-expert-filter {
    position: relative !important;
    z-index: 1050 !important;
}

#top-tweets-expert-filter .Select-control {
    background-color: #1e222d !important;
    border: 1px solid #363c4e !important;
    border-radius: 4px !important;
    height: 36px !important;
    color: #fff !important;
    cursor: pointer !important;
}

#top-tweets-expert-filter .Select-value {
    line-height: 34px !important;
    padding-left: 8px !important;
}

#top-tweets-expert-filter .Select-value-label,
#top-tweets-expert-filter .Select-placeholder {
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    line-height: 34px !important;
}

#top-tweets-expert-filter .Select-menu-outer {
    background-color: #1e222d !important;
    border: 1px solid #363c4e !important;
    border-radius: 4px !important;
    z-index: 99999 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.85) !important;
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 2px !important;
}

#top-tweets-expert-filter .Select-menu {
    background-color: #1e222d !important;
    max-height: 240px !important;
    overflow-y: auto !important;
}

#top-tweets-expert-filter .Select-option {
    background-color: #1e222d !important;
    color: #d1d4dc !important;
    display: flex !important;
    align-items: center !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid #2a2e39 !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}

#top-tweets-expert-filter .Select-option:hover,
#top-tweets-expert-filter .Select-option.is-focused {
    background-color: #2a2e39 !important;
    color: #00e5ff !important;
}

#top-tweets-expert-filter .Select-option.is-selected {
    background-color: #132a40 !important;
    color: #00e5ff !important;
    font-weight: bold !important;
}

#top-tweets-expert-filter .Select-arrow-zone {
    padding-right: 8px !important;
}

#top-tweets-expert-filter .Select-arrow {
    border-color: #888 transparent transparent !important;
}

/* ==============================================================
   EXECUTIVE COMMAND CENTER (Overview Tab)
   ============================================================== */
.command-center-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.command-center-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.launch-module-btn:hover {
    background-color: #1e293b !important;
    border-color: #00e5ff !important;
    color: #00e5ff !important;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.3) !important;
}

.custom-accordion .accordion-button {
    background-color: #111827 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
}

.custom-accordion .accordion-button:not(.collapsed) {
    background-color: #161f33 !important;
    color: #00f2fe !important;
    box-shadow: none !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.custom-accordion .accordion-body {
    background-color: #0d111a !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top: none !important;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    padding: 16px 20px !important;
}

/* ======================================================
   Plotly High-Contrast Dark-Mode Hover Tooltips
   ====================================================== */
.js-plotly-plot .hoverlayer g.hovertext > path {
    fill: #182232 !important;
    stroke: #475569 !important;
}

/* Ensure unified hover legend swatches and points keep their trace colors */
.js-plotly-plot .hoverlayer .legendsymbols path,
.js-plotly-plot .hoverlayer .legendpoints path {
    fill: unset !important;
    stroke: unset !important;
}

.js-plotly-plot .hoverlayer text {
    fill: #ffffff !important;
    font-weight: 500 !important;
}

.js-plotly-plot .hoverlayer .hovertext text {
    fill: #ffffff !important;
}