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