/* FuelDash R140 — final component audit: actions, inputs and selected states. */
:root {
  --fd-r140-red: #ff3b30;
  --fd-r140-neutral-dark: linear-gradient(145deg, rgba(27,27,31,.88), rgba(8,8,11,.96));
  --fd-r140-neutral-light: linear-gradient(145deg, rgba(255,255,255,.96), rgba(235,235,240,.80));
  --fd-r140-neutral-border-dark: #2c2c31;
  --fd-r140-neutral-border-light: rgba(35,35,40,.16);
  --fd-r140-neutral-shadow-dark: inset 0 1px rgba(255,255,255,.09), 0 10px 24px rgba(0,0,0,.38);
  --fd-r140-neutral-shadow-light: inset 0 1px rgba(255,255,255,.98), 0 9px 22px rgba(35,35,42,.11);
  --fd-r140-input-dark: linear-gradient(145deg, rgba(45,45,50,.88), rgba(31,31,36,.90));
  --fd-r140-input-light: linear-gradient(145deg, rgba(255,255,255,.98), rgba(235,235,240,.92));
  --fd-r140-input-border-dark: rgba(255,255,255,.10);
  --fd-r140-input-border-light: rgba(35,35,40,.14);
}

/* Neutral actions all resolve to the Profile/Reload material. */
html body #app :is(
  .round-button,
  .refresh-pill,
  .map-location-button,
  .route-trigger,
  .route-options a,
  .fd-live-location-button,
  .primary-station-action:not(.is-active),
  .detail-price-card:not(.is-selected),
  .fuel-preference button:not(.is-active),
  .nearby-radius button:not(.is-active)
),
html body .fd-feature-page :is(
  .fd-feature-back,
  .fd-app-reload,
  .fd-auth-secondary,
  .fd-backup-actions button,
  .fd-account-card__action,
  .fd-theme-choice:not(.is-selected)
),
html body .fd-account-sheet :is(.fd-account-sheet__close,.fd-auth-secondary),
html body .fd-alert-modal :is(.fd-alert-close,.fd-alert-test) {
  border-color: var(--fd-r140-neutral-border-dark) !important;
  background-color: transparent !important;
  background-image: var(--fd-r140-neutral-dark) !important;
  box-shadow: var(--fd-r140-neutral-shadow-dark) !important;
  color: #f7f7f8 !important;
  -webkit-backdrop-filter: blur(28px) saturate(125%) !important;
  backdrop-filter: blur(28px) saturate(125%) !important;
}

html[data-fd-theme="light"] body #app :is(
  .round-button,
  .refresh-pill,
  .map-location-button,
  .route-trigger,
  .route-options a,
  .fd-live-location-button,
  .primary-station-action:not(.is-active),
  .detail-price-card:not(.is-selected),
  .fuel-preference button:not(.is-active),
  .nearby-radius button:not(.is-active)
),
html[data-fd-theme="light"] body .fd-feature-page :is(
  .fd-feature-back,
  .fd-app-reload,
  .fd-auth-secondary,
  .fd-backup-actions button,
  .fd-account-card__action,
  .fd-theme-choice:not(.is-selected)
),
html[data-fd-theme="light"] body .fd-account-sheet :is(.fd-account-sheet__close,.fd-auth-secondary),
html[data-fd-theme="light"] body .fd-alert-modal :is(.fd-alert-close,.fd-alert-test) {
  border-color: var(--fd-r140-neutral-border-light) !important;
  background-image: var(--fd-r140-neutral-light) !important;
  box-shadow: var(--fd-r140-neutral-shadow-light) !important;
  color: #303036 !important;
}

/* Segmented ranges are one parent control, not a row of standalone glass tiles. */
html body #app :is(.chart-range,.station-sort,.fuel-tab-bar) {
  border-color: var(--fd-r140-neutral-border-dark) !important;
  background-color: transparent !important;
  background-image: var(--fd-r140-neutral-dark) !important;
  box-shadow: var(--fd-r140-neutral-shadow-dark) !important;
}
html body #app :is(.chart-range,.station-sort,.fuel-tab-bar) > button:not(.is-active) {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
html[data-fd-theme="light"] body #app :is(.chart-range,.station-sort,.fuel-tab-bar) {
  border-color: var(--fd-r140-neutral-border-light) !important;
  background-image: var(--fd-r140-neutral-light) !important;
  box-shadow: var(--fd-r140-neutral-shadow-light) !important;
}

/* The Profile password field is the reference for every editable text/select/time field. */
html body .fd-feature-page :is(.fd-field input,.fd-field select,.fd-field textarea,.fd-auth-form input,.fd-account-card__password input),
html body .fd-account-sheet .fd-auth-form input,
html body .fd-alert-modal .fd-alert-row :is(select,input[type="time"],input[type="number"]),
html body #app .search-field {
  box-sizing: border-box !important;
  border-color: var(--fd-r140-input-border-dark) !important;
  background-color: transparent !important;
  background-image: var(--fd-r140-input-dark) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.045) !important;
  color: #f7f7f8 !important;
  -webkit-backdrop-filter: blur(18px) saturate(122%) !important;
  backdrop-filter: blur(18px) saturate(122%) !important;
}
html[data-fd-theme="light"] body .fd-feature-page :is(.fd-field input,.fd-field select,.fd-field textarea,.fd-auth-form input,.fd-account-card__password input),
html[data-fd-theme="light"] body .fd-account-sheet .fd-auth-form input,
html[data-fd-theme="light"] body .fd-alert-modal .fd-alert-row :is(select,input[type="time"],input[type="number"]),
html[data-fd-theme="light"] body #app .search-field {
  border-color: var(--fd-r140-input-border-light) !important;
  background-image: var(--fd-r140-input-light) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98) !important;
  color: #303036 !important;
}
html body .fd-feature-page :is(.fd-field input,.fd-field select,.fd-field textarea,.fd-auth-form input,.fd-account-card__password input):focus,
html body .fd-account-sheet .fd-auth-form input:focus,
html body .fd-alert-modal .fd-alert-row :is(select,input[type="time"],input[type="number"]):focus,
html body #app .search-field:focus-within {
  border-color: var(--fd-r140-red) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.045) !important;
  outline: none !important;
}
html body .fd-feature-page :is(.fd-field input,.fd-field select,.fd-field textarea,.fd-auth-form input,.fd-account-card__password input)::placeholder,
html body .fd-account-sheet .fd-auth-form input::placeholder,
html body .fd-alert-modal .fd-alert-row :is(select,input[type="time"],input[type="number"])::placeholder {
  color: currentColor !important;
  opacity: .46 !important;
}

/* The period is a selected date action, intentionally distinct from a free-text field. */
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control {
  border-color: var(--fd-r140-red) !important;
  background-color: var(--fd-r140-red) !important;
  background-image: none !important;
  box-shadow: inset 0 1px rgba(255,255,255,.14) !important;
  color: #fff !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control :is(svg,.fd-statistics-date__label,input) {
  color: #fff !important;
}

/* Selected actions share the standard red without a red halo. */
html body :is(
  .fd-feature-page .fd-auth-primary,
  .fd-feature-page .fd-tank-submit,
  .fd-account-sheet .fd-auth-primary,
  .fd-alert-modal .fd-alert-enable,
  #app .station-sort > button.is-active,
  #app .fuel-preference button.is-active,
  #app .nearby-radius button.is-active,
  #app .chart-range button.is-active,
  #app .detail-price-card.is-selected,
  #app .primary-station-action.is-active
) {
  border-color: var(--fd-r140-red) !important;
  background-color: var(--fd-r140-red) !important;
  background-image: none !important;
  box-shadow: inset 0 1px rgba(255,255,255,.14) !important;
  color: #fff !important;
}
html body .fd-feature-page .fd-theme-choice.is-selected {
  border-color: var(--fd-r140-red) !important;
  box-shadow: inset 0 0 0 1px rgba(255,59,48,.28) !important;
}