/* ================================================================
   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;
  padding-left: 52px !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;
  }
}