/* ================================================================
   Mobile Dropdown Text Visibility Fix
   Resolves invisible text caused by CSS framework conflicts
   VERSION 5 - NUCLEAR OPTION with maximum specificity
   ================================================================ */

/* ----------------------------------------------------------------
   CRITICAL FIX: Override Blazor scoped CSS and Bootstrap
   ---------------------------------------------------------------- */

/* NUCLEAR SELECTORS - Maximum specificity to override EVERYTHING */
html body .mobile-bottom-sheet .mobile-selection-list .mobile-options-list .mobile-option-item:not(.selected),
html body .mobile-bottom-sheet .mobile-selection-list .mobile-options-list button.mobile-option-item:not(.selected),
html body div.mobile-bottom-sheet div.mobile-selection-list div.mobile-options-list button.mobile-option-item:not(.selected),
html body .mobile-bottom-sheet .mobile-bottom-sheet-list .list-container .list-item:not(.selected),
html body .mobile-bottom-sheet .mobile-bottom-sheet-list .list-container button.list-item:not(.selected),
html body div.mobile-bottom-sheet div.mobile-bottom-sheet-list div.list-container button.list-item:not(.selected) {
    /* CRITICAL: Force white background on unselected items ALWAYS */
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    color: #1F2937 !important;
    /* Override system dark mode and WebKit rendering */
    -webkit-text-fill-color: #1F2937 !important;
    forced-color-adjust: none;
    border: 1px solid #E5E7EB !important;
}

/* NUCLEAR: Selected items - bright indigo with white text */
html body .mobile-bottom-sheet .mobile-selection-list .mobile-options-list .mobile-option-item.selected,
html body .mobile-bottom-sheet .mobile-selection-list .mobile-options-list button.mobile-option-item.selected,
html body div.mobile-bottom-sheet div.mobile-selection-list div.mobile-options-list button.mobile-option-item.selected,
html body .mobile-bottom-sheet .mobile-bottom-sheet-list .list-container .list-item.selected,
html body .mobile-bottom-sheet .mobile-bottom-sheet-list .list-container button.list-item.selected,
html body div.mobile-bottom-sheet div.mobile-bottom-sheet-list div.list-container button.list-item.selected {
    /* CRITICAL: Force indigo background with white text for selected */
    background-color: #6366F1 !important;
    background: #6366F1 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    -webkit-text-fill-color: #FFFFFF !important;
    forced-color-adjust: none;
}

/* NUCLEAR: Option text inside items */
html body .mobile-bottom-sheet .mobile-option-item:not(.selected) .option-text,
html body .mobile-bottom-sheet .list-item:not(.selected) .list-item-text {
    color: #1F2937 !important;
    -webkit-text-fill-color: #1F2937 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline !important;
}

html body .mobile-bottom-sheet .mobile-option-item.selected .option-text,
html body .mobile-bottom-sheet .list-item.selected .list-item-text {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline !important;
}

/* Hover state - slightly darker background */
html body .mobile-bottom-sheet .mobile-option-item:not(.selected):hover,
html body .mobile-bottom-sheet .list-item:not(.selected):hover {
    color: #1F2937 !important;
    background-color: #F3F4F6 !important;
    -webkit-text-fill-color: #1F2937 !important;
}

/* Selected hover state */
html body .mobile-bottom-sheet .mobile-option-item.selected:hover,
html body .mobile-bottom-sheet .list-item.selected:hover {
    background-color: #7C3AED !important;  /* Slightly lighter purple */
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Active/pressed state */
html body .mobile-bottom-sheet .mobile-option-item:not(.selected):active,
html body .mobile-bottom-sheet .list-item:not(.selected):active {
    color: #1F2937 !important;
    background-color: #E5E7EB !important;
    -webkit-text-fill-color: #1F2937 !important;
}

/* ----------------------------------------------------------------
   Search Input Fix
   ---------------------------------------------------------------- */

html body .mobile-bottom-sheet .mobile-search-container .mobile-search-input,
html body .mobile-bottom-sheet .search-container .search-input {
    color: #1F2937 !important;
    background-color: #FFFFFF !important;
    -webkit-text-fill-color: #1F2937 !important;
}

html body .mobile-bottom-sheet .mobile-search-container .mobile-search-input::placeholder,
html body .mobile-bottom-sheet .search-container .search-input::placeholder {
    color: #9CA3AF !important;
    opacity: 1 !important;
}

html body .mobile-bottom-sheet .mobile-search-container .search-icon,
html body .mobile-bottom-sheet .search-container .search-icon {
    color: #6B7280 !important;
}

/* ----------------------------------------------------------------
   Sheet Header & Title
   ---------------------------------------------------------------- */

html body .mobile-bottom-sheet .sheet-title {
    color: #1F2937 !important;
    -webkit-text-fill-color: #1F2937 !important;
}

html body .mobile-bottom-sheet .sheet-close-btn {
    color: #1F2937 !important;
    -webkit-text-fill-color: #1F2937 !important;
}

/* ----------------------------------------------------------------
   Action Buttons
   ---------------------------------------------------------------- */

html body .mobile-bottom-sheet .mobile-actions .action-button.primary {
    background-color: #6366F1 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

html body .mobile-bottom-sheet .mobile-actions .action-button.secondary {
    background-color: transparent !important;
    color: #6B7280 !important;
    border: 1px solid #D1D5DB !important;
}

/* ----------------------------------------------------------------
   Dark Mode Support - DISABLED FOR MOBILE SHEETS
   ----------------------------------------------------------------
   CRITICAL: Mobile bottom sheets should ALWAYS use light backgrounds
   regardless of system dark mode preference. This prevents invisible text.
   ---------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    /* FORCE LIGHT MODE FOR MOBILE SHEETS - System dark mode should NOT apply */
    html body .mobile-bottom-sheet .mobile-selection-list .mobile-options-list .mobile-option-item:not(.selected),
    html body .mobile-bottom-sheet .mobile-selection-list .mobile-options-list button.mobile-option-item:not(.selected),
    html body .mobile-bottom-sheet .mobile-bottom-sheet-list .list-container .list-item:not(.selected),
    html body .mobile-bottom-sheet .mobile-bottom-sheet-list .list-container button.list-item:not(.selected) {
        color: #1F2937 !important;  /* Dark gray text */
        background-color: #FFFFFF !important;  /* White background */
        background: #FFFFFF !important;
        -webkit-text-fill-color: #1F2937 !important;
        forced-color-adjust: none;
    }

    /* Option text MUST be dark even in system dark mode */
    html body .mobile-bottom-sheet .mobile-option-item:not(.selected) .option-text,
    html body .mobile-bottom-sheet .list-item:not(.selected) .list-item-text {
        color: #1F2937 !important;
        -webkit-text-fill-color: #1F2937 !important;
    }

    /* Hover state - KEEP LIGHT MODE COLORS */
    html body .mobile-bottom-sheet .mobile-option-item:not(.selected):hover,
    html body .mobile-bottom-sheet .list-item:not(.selected):hover {
        color: #1F2937 !important;
        background-color: #F3F4F6 !important;
        -webkit-text-fill-color: #1F2937 !important;
    }

    /* Active state - KEEP LIGHT MODE COLORS */
    html body .mobile-bottom-sheet .mobile-option-item:not(.selected):active,
    html body .mobile-bottom-sheet .list-item:not(.selected):active {
        color: #1F2937 !important;
        background-color: #E5E7EB !important;
        -webkit-text-fill-color: #1F2937 !important;
    }

    /* Selected state - ALWAYS use high contrast colors */
    html body .mobile-bottom-sheet .mobile-option-item.selected,
    html body .mobile-bottom-sheet .list-item.selected {
        color: #FFFFFF !important;
        background-color: #6366F1 !important;  /* Indigo-500 */
        background: #6366F1 !important;
        font-weight: 600 !important;
        -webkit-text-fill-color: #FFFFFF !important;
    }

    /* Selected item text MUST be white */
    html body .mobile-bottom-sheet .mobile-option-item.selected .option-text,
    html body .mobile-bottom-sheet .list-item.selected .list-item-text {
        color: #FFFFFF !important;
        -webkit-text-fill-color: #FFFFFF !important;
    }

    /* Selected state hover */
    html body .mobile-bottom-sheet .mobile-option-item.selected:hover,
    html body .mobile-bottom-sheet .list-item.selected:hover {
        background-color: #7C3AED !important;  /* Purple-600 */
        color: #FFFFFF !important;
        -webkit-text-fill-color: #FFFFFF !important;
    }

    /* Search input - KEEP LIGHT MODE for consistency */
    html body .mobile-bottom-sheet .mobile-search-container .mobile-search-input,
    html body .mobile-bottom-sheet .search-container .search-input {
        color: #1F2937 !important;
        background-color: #FFFFFF !important;
        border-color: #E5E7EB !important;
        -webkit-text-fill-color: #1F2937 !important;
    }

    html body .mobile-bottom-sheet .mobile-search-container .mobile-search-input::placeholder,
    html body .mobile-bottom-sheet .search-container .search-input::placeholder {
        color: #9CA3AF !important;
    }

    html body .mobile-bottom-sheet .mobile-search-container .search-icon,
    html body .mobile-bottom-sheet .search-container .search-icon {
        color: #6B7280 !important;
    }

    /* Sheet header - KEEP DARK TEXT on light background */
    html body .mobile-bottom-sheet .sheet-title {
        color: #1F2937 !important;
        -webkit-text-fill-color: #1F2937 !important;
    }

    html body .mobile-bottom-sheet .sheet-close-btn {
        color: #1F2937 !important;
        -webkit-text-fill-color: #1F2937 !important;
    }

    /* Action buttons in dark mode */
    html body .mobile-bottom-sheet .mobile-actions .action-button.primary {
        background-color: #6366F1 !important;
        color: #FFFFFF !important;
    }

    html body .mobile-bottom-sheet .mobile-actions .action-button.secondary {
        color: #D1D5DB !important;
        border-color: #4B5563 !important;
    }
}

/* ----------------------------------------------------------------
   High Contrast Mode Support
   ---------------------------------------------------------------- */

@media (prefers-contrast: high) {
    html body .mobile-bottom-sheet .mobile-option-item,
    html body .mobile-bottom-sheet .list-item {
        border: 2px solid currentColor !important;
    }

    html body .mobile-bottom-sheet .mobile-option-item.selected,
    html body .mobile-bottom-sheet .list-item.selected {
        outline: 3px solid currentColor !important;
        outline-offset: -3px;
    }
}

/* ----------------------------------------------------------------
   Override Blazor Scoped CSS Variables (MobileBottomSheetList)
   CRITICAL: This is what was causing dark backgrounds!
   ---------------------------------------------------------------- */

/* Force override of Material Design 3 dark mode CSS variables */
@media (prefers-color-scheme: dark) {
    /* Override the scoped CSS custom properties */
    html body .mobile-bottom-sheet-list {
        --surface: #FFFFFF !important;
        --on-surface: #1F2937 !important;
        --surface-container-high: #F3F4F6 !important;
        --surface-container-highest: #E5E7EB !important;
        --surface-container: #F9FAFB !important;
        --surface-container-low: #FFFFFF !important;
        --on-surface-variant: #6B7280 !important;
        --outline-variant: #E5E7EB !important;
        --primary: #6366F1 !important;
        --on-primary: #FFFFFF !important;
        --primary-container: #6366F1 !important;
        --on-primary-container: #FFFFFF !important;
        --secondary-container: #6366F1 !important;
    }
}

/* Also override in light mode to be safe */
html body .mobile-bottom-sheet-list {
    --surface: #FFFFFF !important;
    --on-surface: #1F2937 !important;
    --surface-container-high: #F3F4F6 !important;
    --surface-container-highest: #E5E7EB !important;
    --surface-container: #F9FAFB !important;
    --surface-container-low: #FFFFFF !important;
    --on-surface-variant: #6B7280 !important;
    --outline-variant: #E5E7EB !important;
    --primary: #6366F1 !important;
    --on-primary: #FFFFFF !important;
    --primary-container: #6366F1 !important;
    --on-primary-container: #FFFFFF !important;
    --secondary-container: #6366F1 !important;
}

/* Override MobileBottomSheet dark mode variables too */
@media (prefers-color-scheme: dark) {
    html body .mobile-bottom-sheet {
        --sheet-bg: #FFFFFF !important;
        --sheet-text: #1F2937 !important;
        --sheet-border: #E5E7EB !important;
        --backdrop-bg: rgba(0, 0, 0, 0.5) !important;
        --handle-color: #D1D5DB !important;
        --close-btn-hover: #F3F4F6 !important;
        --shadow-color: rgba(0, 0, 0, 0.15) !important;
    }
}

html body .mobile-bottom-sheet {
    --sheet-bg: #FFFFFF !important;
    --sheet-text: #1F2937 !important;
    --sheet-border: #E5E7EB !important;
    --backdrop-bg: rgba(0, 0, 0, 0.5) !important;
    --handle-color: #D1D5DB !important;
    --close-btn-hover: #F3F4F6 !important;
    --shadow-color: rgba(0, 0, 0, 0.15) !important;
}

/* ----------------------------------------------------------------
   ADDITIONAL NUCLEAR OVERRIDES - Target every possible selector
   ---------------------------------------------------------------- */

/* Override ANY button within mobile sheets */
html body .mobile-bottom-sheet button:not(.sheet-close-btn):not(.action-button):not(.clear-search-btn):not(.clear-selection-btn):not(.no-results-action) {
    background-color: #FFFFFF !important;
    color: #1F2937 !important;
    -webkit-text-fill-color: #1F2937 !important;
}

html body .mobile-bottom-sheet button.selected:not(.sheet-close-btn):not(.action-button):not(.clear-search-btn):not(.clear-selection-btn) {
    background-color: #6366F1 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Override in dark mode too */
@media (prefers-color-scheme: dark) {
    html body .mobile-bottom-sheet button:not(.sheet-close-btn):not(.action-button):not(.clear-search-btn):not(.clear-selection-btn):not(.no-results-action) {
        background-color: #FFFFFF !important;
        color: #1F2937 !important;
        -webkit-text-fill-color: #1F2937 !important;
    }

    html body .mobile-bottom-sheet button.selected:not(.sheet-close-btn):not(.action-button):not(.clear-search-btn):not(.clear-selection-btn) {
        background-color: #6366F1 !important;
        color: #FFFFFF !important;
        -webkit-text-fill-color: #FFFFFF !important;
    }
}