/* ================================================================
   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) {
  /* 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;
  /* Edge to edge rows, a hairline between them (#2459, Claude Design 84872ed9) */
  border: 0 !important;
  border-bottom: 1px solid var(--fs-border-default) !important;
}

/* Picked rows: a grey tint with the name in ink (#2459, Claude Design 84872ed9). Being picked is a state, not an
   action, so no Beet: Beet is for the sheet's Done button. */
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 {
  background-color: var(--fs-bg-tertiary) !important;
  background: var(--fs-bg-tertiary) !important;
  color: var(--fs-text-primary) !important;
  font-weight: 600 !important;
  -webkit-text-fill-color: var(--fs-text-primary) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--fs-border-default) !important;
  forced-color-adjust: none;
}

/* NUCLEAR: Option text inside items */
html body .mobile-bottom-sheet .mobile-option-item:not(.selected) .option-text {
  color: var(--fs-text-primary) !important;
  -webkit-text-fill-color: var(--fs-text-primary) !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important; /* the amount line under the label must not be cut (#1795) */
}

/* A food's brand before its name, grey (#1795): the fill above is inherited and paints over `color`, so the brand sets its
   own. A picked row's name is ink too (#2459), so its brand stays grey as well; on the picked tint the faint grey is
   ~3.6:1 in dark, so there it takes the secondary grey (#2461). */
html body .mobile-bottom-sheet .mobile-option-item .option-text .food-brand {
  color: var(--fs-text-faint) !important;
  -webkit-text-fill-color: var(--fs-text-faint) !important;
}

html body .mobile-bottom-sheet .mobile-option-item.selected .option-text .food-brand {
  color: var(--fs-text-secondary) !important;
  -webkit-text-fill-color: var(--fs-text-secondary) !important;
}

/* A food's fixed amount (#2459): ink on its picked row, the secondary grey on its chip. The chip button's own fill is ink
   (the sheet's button rule below), which paints over `color` and reaches the amount, so each sets its own. */
html body .mobile-bottom-sheet .mobile-option-item .option-fixed-amount {
  color: var(--fs-text-primary) !important;
  -webkit-text-fill-color: var(--fs-text-primary) !important;
}

/* A packaged result's amount line: the secondary grey, not the row's ink fill */
html body .mobile-bottom-sheet .mobile-option-item .option-amount {
  color: var(--fs-text-secondary) !important;
  -webkit-text-fill-color: var(--fs-text-secondary) !important;
}

html body .mobile-bottom-sheet .selected-chip .chip-amount {
  color: var(--fs-text-secondary) !important;
  -webkit-text-fill-color: var(--fs-text-secondary) !important;
}

html body .mobile-bottom-sheet .mobile-option-item.selected .option-text {
  color: var(--fs-text-primary) !important;
  -webkit-text-fill-color: var(--fs-text-primary) !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Hover state - slightly darker background. Only where a pointer really hovers: a phone keeps :hover on the last row
   tapped, and an unpicked row in the picked grey would read as still picked (#2459). A picked row keeps its look. */
@media (hover: hover) {
  html body .mobile-bottom-sheet .mobile-option-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/pressed state */
html body .mobile-bottom-sheet .mobile-option-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;
}

/* The picker's field sits a magnifier 40px in, and is grey until typing starts (#2459, Claude Design 84872ed9) */
html body .mobile-bottom-sheet .mobile-search-container .mobile-search-input {
  background-color: var(--fs-bg-secondary) !important;
  padding-left: 40px !important;
}

html body .mobile-bottom-sheet .keyboard-visible .mobile-search-container .mobile-search-input {
  background-color: var(--fs-bg-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;
  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;
}

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

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

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

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. .scan-hero is the custom-food scan
   button (step 1 and the editor's Rescan), Beet with white text and icons (#1641). .cf-delete is the editor's Delete food,
   a red text button that would otherwise read like Cancel (#1085). .scan-bar-link (the scan bar's field names),
   .scan-bar-retake (its outlined Retake photo) and .cf-was-undo (a rescan's "Was 200 · Undo") are text links
   or a transparent outline on a coloured bar (#1794). .ltc-btn and .ltc-link are the low-target confirm's answers and
   text links (#1584), which draw their own outline and brand colour. .mobile-option-item is a food row in the picker
   list, styled at the top of this file: this rule outweighed its picked look, so a picked row drew white on white (#2459).
   .mobile-search-close (the picker's ✕ beside the search field, a grey circle) and .clear-all-button (its text button) draw
   their own look in TomSelectDropdown.razor.css (#2459).
   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):not(.scan-hero):not(.cf-delete):not(
    .scan-bar-link
  ):not(.scan-bar-retake):not(.cf-was-undo):not(.ltc-btn):not(.ltc-link):not(
    .mobile-option-item
  ):not(.mobile-search-close):not(.clear-all-button) {
  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):not(.mobile-option-item) {
  background-color: var(--fs-primary) !important;
  color: var(--fs-text-inverse) !important;
  -webkit-text-fill-color: var(--fs-text-inverse) !important;
}