/* zz_custom_final_v11.css */
/* COMPLETELY NEW FILE TO BUST ALL BROWSER CACHES */

:root,
[data-bs-theme="dark"] {
    --bs-body-color: #ffffff !important;
    --bs-btn-color: #ffffff !important;
    --bs-secondary-color: #ffffff !important;
}

body {
    background-color: #1a1a1a !important;
}

/* Force everything in the dropdowns to be white text */
.dash-dropdown *,
.dark-mode-dropdown *,
.Select *,
.Select-value-label,
.Select-placeholder,
[class*="-singleValue"],
[class*="-placeholder"],
button.dash-dropdown,
button.dark-mode-dropdown {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Ensure background is dark for dark theme consistency */
.Select-control, [class*="-control"], .Select-menu-outer, div.dash-dropdown, div.dark-mode-dropdown {
    background-color: #222222 !important;
    border-color: #444444 !important;
}

/* Also ensure the dropdown options (menu items) have dark backgrounds with white text */
.VirtualizedSelectOption, [class*="-option"] {
    background-color: #222222 !important;
    color: #ffffff !important;
}
.VirtualizedSelectOption:hover, [class*="-option"]:hover {
    background-color: #333333 !important;
    color: #ffffff !important;
}

/* Prevent flexbox from squishing dropdowns to 0 width */
.Select, .date-dropdown {
    flex-shrink: 0 !important;
}

/* ========================================
   Loading Status Message Styles
   ======================================== */
.loading-status-msg {
    display: block;
    font-size: 15px;
    padding: 8px 16px;
    margin-bottom: 12px;
    background-color: rgba(22, 160, 133, 0.15) !important;
    border: 1px solid rgba(22, 160, 133, 0.4) !important;
    border-radius: 6px;
    color: #1abc9c !important;
    text-align: center;
    animation: loading-pulse 1.8s infinite ease-in-out;
}

@keyframes loading-pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1.0; }
    100% { opacity: 0.6; }
}

/* Once data has loaded for the first time, hide the loading message permanently */
.loading-status-msg.loaded {
    display: none !important;
}

/* Suppress loading messages and spinners for Options Flow subtab */
.loaded-once-options-flow-tab-content #options-flow-tab-content .loading-status-msg {
    display: none !important;
}
.loaded-once-options-flow-tab-content #options-flow-tab-content .dash-spinner,
.loaded-once-options-flow-tab-content #options-flow-tab-content .dash-default-spinner,
.loaded-once-options-flow-tab-content #options-flow-tab-content ._dash-loading {
    display: none !important;
}
.loaded-once-options-flow-tab-content #options-flow-tab-content [data-dash-is-loading="true"]:not(.loading-status-msg) {
    visibility: visible !important;
    display: block !important;
    opacity: 1 !important;
}

/* Suppress loading messages and spinners for Indices subtab */
.loaded-once-gex-enhanced-tab-content #gex-enhanced-tab-content .loading-status-msg {
    display: none !important;
}
.loaded-once-gex-enhanced-tab-content #gex-enhanced-tab-content .dash-spinner,
.loaded-once-gex-enhanced-tab-content #gex-enhanced-tab-content .dash-default-spinner,
.loaded-once-gex-enhanced-tab-content #gex-enhanced-tab-content ._dash-loading {
    display: none !important;
}
.loaded-once-gex-enhanced-tab-content #gex-enhanced-tab-content [data-dash-is-loading="true"]:not(.loading-status-msg) {
    visibility: visible !important;
    display: block !important;
    opacity: 1 !important;
}

/* Suppress loading messages and spinners for Darkpool subtab unconditionally to prevent slow rendering/lag */
#darkpool-viz-tab-content .loading-status-msg,
#darkpool-loading-status {
    display: none !important;
}
#darkpool-viz-tab-content .dash-spinner,
#darkpool-viz-tab-content .dash-default-spinner,
#darkpool-viz-tab-content ._dash-loading {
    display: none !important;
}
#darkpool-viz-tab-content [data-dash-is-loading="true"]:not(.loading-status-msg) {
    visibility: visible !important;
    display: block !important;
    opacity: 1 !important;
}

/* ========================================
   Has Tweet Checklist Styling Fixes
   ======================================== */
[id*="tweet-filter"] label,
[id*="tweet-filter"] span,
[id*="tweet-filter"] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}

[id*="tweet-filter"],
[id*="tweet-filter"] div,
[id*="tweet-filter"] span,
[id*="tweet-filter"] label,
[id*="tweet-filter"] [class*="-control"]:not(input),
[id*="tweet-filter"] .custom-control,
[id*="tweet-filter"] .form-check {
    background-color: transparent !important;
    background: transparent !important;
    border-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ========================================
   Card and Graph Styling Overrides
   ======================================== */
.card {
    background-color: #222222 !important;
    border: 1px solid #666666 !important;
}

/* Force bg-dark cards to stand out with #222222 background and proper borders */
.card.bg-dark {
    background-color: #222222 !important;
    border: 1px solid #666666 !important;
}

/* Let specific colored border utility classes override the default gray border */
.card.border-info {
    border-color: #00d4ff !important;
}
.card.border-success {
    border-color: #2ecc71 !important;
}
.card.border-danger {
    border-color: #e74c3c !important;
}
.card.border-warning {
    border-color: #f1c40f !important;
}
.card.border-secondary {
    border-color: #555555 !important;
}
.card.bg-transparent {
    background-color: transparent !important;
}
.card.border-0 {
    border: none !important;
}

/* Ensure chart containers stand out slightly and have clean borders if they are not in cards */
.dash-graph:not(.card .dash-graph) {
    border: 1px solid #666666 !important;
    border-radius: 4px;
    background-color: #222222 !important;
    padding: 8px;
}

/* ========================================
   Control Panel & Filter Pane Styles
   ======================================== */
.filter-pane,
.control-panel,
.card.filter-pane,
.card.control-panel {
    background-color: #2b2f3a !important; /* Lighter slate/charcoal blue to stand out from body #1a1a1a */
    border: 1px solid #4f5b66 !important;   /* Defined border for clear distinction */
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Ensure controls inside the filter pane stand out with high contrast */
.filter-pane .Select-control,
.filter-pane [class*="-control"],
.filter-pane div.dash-dropdown,
.filter-pane div.dark-mode-dropdown,
.filter-pane .DateInput_input,
.filter-pane input:not([type="checkbox"]):not([type="radio"]) {
    background-color: #1a1d24 !important;    /* Darker background for contrast inside #2b2f3a */
    border: 1px solid #556270 !important;      /* Distinct visible border */
    color: #ffffff !important;
}

/* Hover highlights for dropdown control borders */
.filter-pane .Select-control:hover,
.filter-pane [class*="-control"]:hover,
.filter-pane div.dash-dropdown:hover,
.filter-pane div.dark-mode-dropdown:hover,
.filter-pane .DateInput_input:hover,
.filter-pane input:not([type="checkbox"]):not([type="radio"]):hover {
    border-color: #00d4ff !important;          /* Premium cyan highlight on hover */
}

/* Ensure dropdown menus inside filter pane match the dark/contrast scheme */
.filter-pane .Select-menu-outer,
.filter-pane [class*="-menu"] {
    background-color: #1a1d24 !important;
    border: 1px solid #556270 !important;
}

.filter-pane .VirtualizedSelectOption,
.filter-pane [class*="-option"] {
    background-color: #1a1d24 !important;
    color: #ffffff !important;
}

.filter-pane .VirtualizedSelectOption:hover,
.filter-pane [class*="-option"]:hover {
    background-color: #3498db !important;      /* Premium blue highlight on option hover */
    color: #ffffff !important;
}

/* Premium styling for Range Sliders (dcc.Slider / rc-slider) inside filter pane */
.filter-pane .rc-slider-rail {
    background-color: #4a5262 !important;      /* Very visible rail background */
    height: 6px !important;
    opacity: 1 !important;
}

.filter-pane .rc-slider-track {
    background-color: #00d4ff !important;      /* Glowing cyan track */
    height: 6px !important;
    opacity: 1 !important;
}

.filter-pane .rc-slider-handle {
    background-color: #1a1d24 !important;
    border: 2px solid #00d4ff !important;      /* Cyan border for handle */
    width: 14px !important;
    height: 14px !important;
    margin-top: -4px !important;
    opacity: 1 !important;
    box-shadow: 0 0 5px rgba(0, 212, 255, 0.5) !important;
}

.filter-pane .rc-slider-handle:hover,
.filter-pane .rc-slider-handle:active {
    border-color: #ffffff !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8) !important;
}

.filter-pane .rc-slider-mark-text {
    color: #a0aec0 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}

/* Force SPX Trade Recommendation to remain fully visible during updates */
#spx-trade-recommendation-container[data-dash-is-loading="true"],
#spx-trade-recommendation-container ._dash-loading {
    visibility: visible !important;
    display: block !important;
    opacity: 1 !important;
}

/* ========================================
   High-Visibility Tab & Selected Tab Styling
   ======================================== */
/* Base tab list container */
.nav-tabs,
.nav-pills {
    border-bottom: 2px solid #334155 !important;
    gap: 4px !important;
    padding-bottom: 2px !important;
}

/* Inactive tab links */
.nav-tabs .nav-link,
.nav-pills .nav-link,
.tab,
[class*="nav-link"] {
    color: #94a3b8 !important;
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
    transition: all 0.15s ease-in-out !important;
    margin-right: 2px !important;
}

/* Hover state for inactive tabs */
.nav-tabs .nav-link:hover:not(.active),
.nav-pills .nav-link:hover:not(.active),
.tab:hover {
    color: #f8fafc !important;
    background-color: #334155 !important;
    border-color: #475569 !important;
}

/* ACTIVE / SELECTED TAB STYLING - Bright cyan border, vibrant background & glowing shadow */
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active,
.nav-link.active,
.tab--selected,
[class*="tab--selected"] {
    color: #ffffff !important;
    background: linear-gradient(180deg, #1e3a8a 0%, #0f172a 100%) !important;
    border: 2px solid #38bdf8 !important;       /* Bright cyan/blue border */
    border-bottom: 3px solid #38bdf8 !important; /* Thick bottom border indicator */
    font-weight: 700 !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    text-shadow: 0 0 8px rgba(56, 189, 248, 0.6) !important;
    transform: translateY(-1px) !important;
}

/* Secondary / Subtabs selected state (inside cards, filter panes, or sub-navigation) */
.card .nav-tabs .nav-link.active,
.filter-pane .nav-tabs .nav-link.active {
    background: linear-gradient(180deg, #0369a1 0%, #0c4a6e 100%) !important;
    border: 2px solid #38bdf8 !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.5) !important;
}

/* ========================================
   Premarket & Global Date Picker Dark Theme
   ======================================== */
html body .SingleDatePicker,
html body .SingleDatePickerInput,
html body .SingleDatePickerInput__withBorder,
html body .SingleDatePickerInput__withBorder_1,
html body .SingleDatePickerInput__with-border,
html body .DateInput,
html body .DateInput_1,
html body .DateInput_input,
html body .DateInput_input_1,
html body .SingleDatePickerInput_calendarIcon,
html body [class*="SingleDatePicker"] *,
html body [class*="DateInput"] * {
    background: #1e293b !important;
    background-color: #1e293b !important;
    color: #38bdf8 !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
}

html body .SingleDatePickerInput,
html body .SingleDatePickerInput__withBorder,
html body [class*="SingleDatePickerInput"] {
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.2s ease-in-out !important;
}

html body .SingleDatePickerInput:hover,
html body .SingleDatePickerInput__withBorder:hover,
html body .DateInput_input__focused {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.5) !important;
}

html body .DateInput_input,
html body [class*="DateInput_input"] {
    border: none !important;
    box-shadow: none !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    letter-spacing: 0.5px !important;
    padding: 4px 10px !important;
    height: 32px !important;
    width: 120px !important;
    cursor: pointer !important;
}

html body .SingleDatePickerInput_calendarIcon,
html body [class*="SingleDatePickerInput_calendarIcon"] {
    padding: 0 8px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

html body .SingleDatePickerInput_calendarIcon svg,
html body [class*="SingleDatePickerInput_calendarIcon"] svg {
    fill: #38bdf8 !important;
    width: 15px !important;
    height: 15px !important;
}

html body .SingleDatePickerInput_clearDate {
    display: none !important;
}

/* Calendar Popup Window Styling */
html body .SingleDatePicker_picker,
html body .DayPicker,
html body .DayPicker_1,
html body .DayPicker__horizontal,
html body .CalendarMonth,
html body .CalendarMonthGrid,
html body .CalendarMonthGrid_1,
html body .CalendarMonth_1 {
    background: #0f172a !important;
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-radius: 12px !important;
    border: 1px solid #334155 !important;
}

html body .SingleDatePicker_picker {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8) !important;
    margin-top: 6px !important;
}

html body .CalendarMonth_caption {
    color: #38bdf8 !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
}

html body .DayPicker_weekHeader_li small {
    color: #94a3b8 !important;
    font-weight: 600 !important;
}

html body .CalendarDay__default {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
    border-radius: 6px !important;
}

html body .CalendarDay__default:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #38bdf8 !important;
}

html body .CalendarDay__selected,
html body .CalendarDay__selected:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    border: 1px solid #38bdf8 !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.5) !important;
    font-weight: 700 !important;
}

html body .CalendarDay__blocked_out_of_range {
    background: #0f172a !important;
    color: #475569 !important;
    border: 1px solid transparent !important;
}

html body .DayPickerNavigation_button__default {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    border-radius: 6px !important;
}

html body .DayPickerNavigation_button__default:hover {
    background: #334155 !important;
    border-color: #38bdf8 !important;
}

html body .DayPickerNavigation_svg__horizontal {
    fill: #38bdf8 !important;
}

/* ========================================
   Premarket Briefing Markdown Styling
   ======================================== */
.premarket-briefing-md h1,
.premarket-briefing-md h2,
.premarket-briefing-md h3 {
    color: #f39c12 !important;
    border-bottom: 1px solid #333;
    padding-bottom: 6px;
    margin-top: 1.2em;
}
.premarket-briefing-md h4,
.premarket-briefing-md h5 {
    color: #e8b84d !important;
}
.premarket-briefing-md strong {
    color: #fff !important;
}
.premarket-briefing-md table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
}
.premarket-briefing-md th {
    background: #1a1a2e !important;
    color: #f39c12 !important;
    border: 1px solid #444 !important;
    padding: 6px 10px;
    text-align: left;
}
.premarket-briefing-md td {
    border: 1px solid #333 !important;
    padding: 5px 10px;
    color: #ccc;
}
.premarket-briefing-md tr:nth-child(even) td {
    background: #141422 !important;
}
.premarket-briefing-md ul,
.premarket-briefing-md ol {
    padding-left: 20px;
}
.premarket-briefing-md li {
    margin-bottom: 4px;
}
.premarket-briefing-md code {
    background: #1a1a2e;
    color: #f39c12;
    padding: 2px 6px;
    border-radius: 3px;
}

/* Earnings logo error fallback */
img.earnings-logo {
    transition: opacity 0.2s;
}
img.earnings-logo[data-failed="true"] {
    display: none !important;
}