/* ================================================================
   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: var(--fs-bg-primary) !important;
  background: var(--fs-bg-primary) !important;
  color: var(--fs-text-primary) !important;
  /* Override system dark mode and WebKit rendering */
  -webkit-text-fill-color: var(--fs-text-primary) !important;
  forced-color-adjust: none;
  border: 1px solid var(--fs-border-default) !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: var(--fs-primary) !important;
  background: var(--fs-primary) !important;
  color: var(--fs-text-inverse) !important;
  font-weight: 600 !important;
  -webkit-text-fill-color: var(--fs-text-inverse) !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: var(--fs-text-primary) !important;
  -webkit-text-fill-color: var(--fs-text-primary) !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: var(--fs-text-inverse) !important;
  -webkit-text-fill-color: var(--fs-text-inverse) !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: var(--fs-text-primary) !important;
  background-color: var(--fs-bg-tertiary) !important;
  -webkit-text-fill-color: var(--fs-text-primary) !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: var(--fs-primary) !important; /* Slightly lighter purple */
  color: var(--fs-text-inverse) !important;
  -webkit-text-fill-color: var(--fs-text-inverse) !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: var(--fs-text-primary) !important;
  background-color: var(--fs-border-default) !important;
  -webkit-text-fill-color: var(--fs-text-primary) !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: var(--fs-text-primary) !important;
  background-color: var(--fs-bg-primary) !important;
  -webkit-text-fill-color: var(--fs-text-primary) !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: var(--fs-text-muted) !important;
  opacity: 1 !important;
}

html body .mobile-bottom-sheet .mobile-search-container .search-icon,
html body .mobile-bottom-sheet .search-container .search-icon {
  color: var(--fs-text-secondary) !important;
}

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

html body .mobile-bottom-sheet .sheet-title {
  color: var(--fs-text-primary) !important;
  -webkit-text-fill-color: var(--fs-text-primary) !important;
}

html body .mobile-bottom-sheet .sheet-close-btn {
  color: var(--fs-text-primary) !important;
  -webkit-text-fill-color: var(--fs-text-primary) !important;
}

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

html body .mobile-bottom-sheet .mobile-actions .action-button.primary {
  background-color: var(--fs-primary) !important;
  color: var(--fs-text-inverse) !important;
  -webkit-text-fill-color: var(--fs-text-inverse) !important;
}

html body .mobile-bottom-sheet .mobile-actions .action-button.secondary {
  background-color: transparent !important;
  color: var(--fs-text-secondary) !important;
  border: 1px solid var(--fs-border-hover) !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: var(--fs-text-primary) !important; /* Dark gray text */
    background-color: var(--fs-bg-primary) !important; /* White background */
    background: var(--fs-bg-primary) !important;
    -webkit-text-fill-color: var(--fs-text-primary) !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: var(--fs-text-primary) !important;
    -webkit-text-fill-color: var(--fs-text-primary) !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: var(--fs-text-primary) !important;
    background-color: var(--fs-bg-tertiary) !important;
    -webkit-text-fill-color: var(--fs-text-primary) !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: var(--fs-text-primary) !important;
    background-color: var(--fs-border-default) !important;
    -webkit-text-fill-color: var(--fs-text-primary) !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: var(--fs-text-inverse) !important;
    background-color: var(--fs-primary) !important; /* Indigo-500 */
    background: var(--fs-primary) !important;
    font-weight: 600 !important;
    -webkit-text-fill-color: var(--fs-text-inverse) !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: var(--fs-text-inverse) !important;
    -webkit-text-fill-color: var(--fs-text-inverse) !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: var(--fs-primary) !important; /* Purple-600 */
    color: var(--fs-text-inverse) !important;
    -webkit-text-fill-color: var(--fs-text-inverse) !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: var(--fs-text-primary) !important;
    background-color: var(--fs-bg-primary) !important;
    border-color: var(--fs-border-default) !important;
    -webkit-text-fill-color: var(--fs-text-primary) !important;
  }

  html
    body
    .mobile-bottom-sheet
    .mobile-search-container
    .mobile-search-input::placeholder,
  html body .mobile-bottom-sheet .search-container .search-input::placeholder {
    color: var(--fs-text-muted) !important;
  }

  html body .mobile-bottom-sheet .mobile-search-container .search-icon,
  html body .mobile-bottom-sheet .search-container .search-icon {
    color: var(--fs-text-secondary) !important;
  }

  /* Sheet header - KEEP DARK TEXT on light background */
  html body .mobile-bottom-sheet .sheet-title {
    color: var(--fs-text-primary) !important;
    -webkit-text-fill-color: var(--fs-text-primary) !important;
  }

  html body .mobile-bottom-sheet .sheet-close-btn {
    color: var(--fs-text-primary) !important;
    -webkit-text-fill-color: var(--fs-text-primary) !important;
  }

  /* Action buttons in dark mode */
  html body .mobile-bottom-sheet .mobile-actions .action-button.primary {
    background-color: var(--fs-primary) !important;
    color: var(--fs-text-inverse) !important;
  }

  html body .mobile-bottom-sheet .mobile-actions .action-button.secondary {
    color: var(--fs-text-body) !important;
    border-color: var(--fs-text-body) !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: var(--fs-bg-primary) !important;
    --on-surface: var(--fs-text-primary) !important;
    --surface-container-high: var(--fs-bg-tertiary) !important;
    --surface-container-highest: var(--fs-border-default) !important;
    --surface-container: var(--fs-bg-hover) !important;
    --surface-container-low: var(--fs-bg-primary) !important;
    --on-surface-variant: var(--fs-text-secondary) !important;
    --outline-variant: var(--fs-border-default) !important;
    --primary: var(--fs-primary) !important;
    --on-primary: var(--fs-bg-primary) !important;
    --primary-container: var(--fs-primary) !important;
    --on-primary-container: var(--fs-bg-primary) !important;
    --secondary-container: var(--fs-primary) !important;
  }
}

/* Also override in light mode to be safe */
html body .mobile-bottom-sheet-list {
  --surface: var(--fs-bg-primary) !important;
  --on-surface: var(--fs-text-primary) !important;
  --surface-container-high: var(--fs-bg-tertiary) !important;
  --surface-container-highest: var(--fs-border-default) !important;
  --surface-container: var(--fs-bg-hover) !important;
  --surface-container-low: var(--fs-bg-primary) !important;
  --on-surface-variant: var(--fs-text-secondary) !important;
  --outline-variant: var(--fs-border-default) !important;
  --primary: var(--fs-primary) !important;
  --on-primary: var(--fs-bg-primary) !important;
  --primary-container: var(--fs-primary) !important;
  --on-primary-container: var(--fs-bg-primary) !important;
  --secondary-container: var(--fs-primary) !important;
}

/* Override MobileBottomSheet dark mode variables too */
@media (prefers-color-scheme: dark) {
  html body .mobile-bottom-sheet {
    --sheet-bg: var(--fs-bg-primary) !important;
    --sheet-text: var(--fs-text-primary) !important;
    --sheet-border: var(--fs-border-default) !important;
    --backdrop-bg: rgba(0, 0, 0, 0.5) !important;
    --handle-color: var(--fs-border-hover) !important;
    --close-btn-hover: var(--fs-bg-tertiary) !important;
    --shadow-color: rgba(0, 0, 0, 0.15) !important;
  }
}

html body .mobile-bottom-sheet {
  --sheet-bg: var(--fs-bg-primary) !important;
  --sheet-text: var(--fs-text-primary) !important;
  --sheet-border: var(--fs-border-default) !important;
  --backdrop-bg: rgba(0, 0, 0, 0.5) !important;
  --handle-color: var(--fs-border-hover) !important;
  --close-btn-hover: var(--fs-bg-tertiary) !important;
  --shadow-color: rgba(0, 0, 0, 0.15) !important;
}

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

/* Override ANY button within mobile sheets.

   The :not() list is the escape hatch for buttons that carry their own identity. The meal size sheet has
   three: .size-sheet-apply is its primary action, which the guest's account button also wears rather than
   owning a class of its own; .size-sheet-step are the − and + controls; and .size-sheet-reset and
   .size-sheet-signin are text links, not button-shaped things. Without the exemption this rule paints all
   of them flat white and the sheet's commit control reads as secondary chrome. Bootstrap buttons (.btn)
   are exempt too, like MudBlazor filled buttons and the custom-food step buttons: they carry their own
   role colour (Retake questionnaire, Delete, Save Foods, Next), #1111. The dark-mode copy below matches.
   Adding another styled button to a bottom sheet means adding it here — nothing beats `html body … !important`. */
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):not(.size-sheet-apply):not(.size-sheet-step):not(
    .size-sheet-reset
  ):not(.size-sheet-signin):not(.scan-slot-action):not(.scan-camera-cta):not(.btn):not(
    .mud-button-filled
  ):not(.btn-continue):not(.btn-cancel):not(.gd-btn) {
  background-color: var(--fs-bg-primary) !important;
  color: var(--fs-text-primary) !important;
  -webkit-text-fill-color: var(--fs-text-primary) !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: var(--fs-primary) !important;
  color: var(--fs-text-inverse) !important;
  -webkit-text-fill-color: var(--fs-text-inverse) !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):not(.size-sheet-apply):not(.size-sheet-step):not(
      .size-sheet-reset
    ):not(.size-sheet-signin):not(.scan-slot-action):not(.scan-camera-cta):not(.btn):not(
      .mud-button-filled
    ):not(.btn-continue):not(.btn-cancel):not(.gd-btn) {
    background-color: var(--fs-bg-primary) !important;
    color: var(--fs-text-primary) !important;
    -webkit-text-fill-color: var(--fs-text-primary) !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: var(--fs-primary) !important;
    color: var(--fs-text-inverse) !important;
    -webkit-text-fill-color: var(--fs-text-inverse) !important;
  }
}