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

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

/* The sheet list's Material variables, pinned to the tokens (they flip with dark mode, #1179). Marks on
   the Beet fill (the tick, the no-results button's label) stay white, like all text on Beet. */
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-text) !important; /* the list uses it for text, ticks and outlines */
  --on-primary: var(--fs-text-inverse) !important;
  --primary-container: var(--fs-primary) !important;
  --on-primary-container: var(--fs-text-inverse) !important;
  --secondary-container: var(--fs-primary) !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: var(--fs-sheet-backdrop) !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. The portion sheet (#1005) adds
   .portion-sheet-amount, a food's amount written as text; its Done and food link are .btn. 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.
   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):not(.portion-sheet-amount) {
  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;
}