/* FuelDash R100 — R98 visual baseline with isolated functional repairs. */
:root {
  --fd-r100-red: #ff3b30;
  --fd-r100-light-page: #f5f5f7;
  --fd-r100-light-surface: #ffffff;
  --fd-r100-light-control: #f0f0f3;
  --fd-r100-light-border: #d4d4da;
  --fd-r100-light-text: #171719;
  --fd-r100-light-muted: #74747b;
  --fd-r100-dark-page: #050505;
  --fd-r100-dark-surface: rgba(20,20,22,.94);
  --fd-r100-dark-control: rgba(255,255,255,.075);
  --fd-r100-dark-border: rgba(255,255,255,.11);
  --fd-r100-dark-text: #f7f7f8;
  --fd-r100-dark-muted: #99999f;
}

/* Preserve the uninterrupted R98 page background and remove generated veils only. */
html[data-fd-theme="light"],
html[data-fd-theme="light"] body,
html[data-fd-theme="light"] #app,
html[data-fd-theme="light"] #app .app-shell,
html[data-fd-theme="light"] #app .app-content,
html[data-fd-theme="light"] #app .detail-view,
html[data-fd-theme="light"] .fd-feature-page,
html[data-fd-theme="light"] .fd-feature-shell,
html[data-fd-theme="light"] .fd-feature-content {
  background-color: var(--fd-r100-light-page) !important;
  background-image: none !important;
}
html[data-fd-theme="light"] :where(body,#app,.app-shell,.app-content,.fd-feature-page)::before,
html[data-fd-theme="light"] :where(body,#app,.app-shell,.app-content,.fd-feature-page)::after,
html[data-fd-theme="light"] #app .fuel-tab-bar::before,
html[data-fd-theme="light"] #app .fuel-tab-bar::after {
  content: none !important;
  display: none !important;
}

/* R98 dashboard map, tempered slightly so it is readable but not washed out. */
html[data-fd-theme="light"] #app .fd-best {
  border-color: var(--fd-r100-light-border) !important;
  background: #e9e9ed !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
html[data-fd-theme="light"] #app .fd-best__map {
  background: #e9e9ed !important;
  opacity: 1 !important;
  filter: none !important;
}
html[data-fd-theme="light"] #app .fd-best__map .leaflet-container { background: #e9e9ed !important; }
html[data-fd-theme="light"] #app .fd-best__map .leaflet-tile-pane {
  filter: invert(.88) grayscale(1) saturate(.16) brightness(1.04) contrast(.86) !important;
}
html[data-fd-theme="light"] #app .fd-best::after {
  display: block !important;
  content: "" !important;
  background: linear-gradient(90deg,rgba(255,255,255,.58) 0%,rgba(255,255,255,.34) 54%,rgba(255,255,255,.06) 100%) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Remove button/fact glows without flattening the R98 cards themselves. */
#app :where(
  .primary-station-card__facts > span,
  .chart-selection-readout,
  .chart-range button,
  .station-sort button,
  .fuel-preference button,
  .nearby-radius button,
  .fuel-filter button,
  .favorites-filter button,
  .favorite-filter button,
  .detail-view .primary-station-action,
  .detail-view .station-route .route-trigger,
  .refresh-pill
),
.fd-feature-page :where(
  .fd-tank-submit,
  .fd-backup-actions button,
  .fd-account-card > button,
  .fd-auth-primary,
  .fd-auth-secondary
) {
  box-shadow: none !important;
  filter: none !important;
}

/* One back/close control family, matching the original circular R89 control. */
#app .brand-header .round-button.detail-close,
.fd-feature-back,
.fd-alert-close,
.fd-account-sheet__panel > header > button {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 48px !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
#app .brand-header .round-button.detail-close svg,
.fd-feature-back svg {
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
html[data-fd-theme="light"] #app .brand-header .round-button.detail-close,
html[data-fd-theme="light"] .fd-feature-back,
html[data-fd-theme="light"] .fd-alert-close,
html[data-fd-theme="light"] .fd-account-sheet__panel > header > button {
  border: 1px solid var(--fd-r100-light-border) !important;
  background: var(--fd-r100-light-control) !important;
  color: #505057 !important;
}
html[data-fd-theme="dark"] #app .brand-header .round-button.detail-close,
html[data-fd-theme="dark"] .fd-feature-back,
html[data-fd-theme="dark"] .fd-alert-close,
html[data-fd-theme="dark"] .fd-account-sheet__panel > header > button {
  border: 1px solid var(--fd-r100-dark-border) !important;
  background: var(--fd-r100-dark-control) !important;
  color: var(--fd-r100-dark-text) !important;
}

/* Tankbook: no phantom row or oversized gap after “Weitere Angaben”. */
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-form {
  gap: 12px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras summary {
  display: flex !important;
  align-items: center !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 2px !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  cursor: pointer !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras > div {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 12px !important;
  padding-top: 12px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras .fd-field:last-child { grid-column: 1 / -1 !important; }
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-form-status:empty { display: none !important; }
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-form-status:not(:empty) {
  grid-column: 1 / -1 !important;
  min-height: 0 !important;
  margin: 0 !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-submit { margin: 0 !important; }

/* Price alerts: neutral when unselected, red only after an explicit check. */
.fd-alert-modal input[type="checkbox"] {
  box-sizing: border-box !important;
  flex: 0 0 23px !important;
  width: 23px !important;
  min-width: 23px !important;
  height: 23px !important;
  min-height: 23px !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  border: 1px solid var(--fd-r100-dark-border) !important;
  border-radius: 7px !important;
  outline: none !important;
  background: var(--fd-r100-dark-control) !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.fd-alert-modal input[type="checkbox"]::after {
  display: block !important;
  width: 7px !important;
  height: 12px !important;
  margin: 3px auto 0 !important;
  content: "" !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  opacity: 0 !important;
  transform: rotate(45deg) !important;
}
.fd-alert-modal input[type="checkbox"]:checked {
  border-color: var(--fd-r100-red) !important;
  background: var(--fd-r100-red) !important;
}
.fd-alert-modal input[type="checkbox"]:checked::after { opacity: 1 !important; }
html[data-fd-theme="light"] .fd-alert-modal input[type="checkbox"] {
  border-color: var(--fd-r100-light-border) !important;
  background: var(--fd-r100-light-control) !important;
}
html[data-fd-theme="light"] .fd-alert-modal input[type="checkbox"]:checked {
  border-color: var(--fd-r100-red) !important;
  background: var(--fd-r100-red) !important;
}
.fd-alert-modal .fd-alert-station:has(input:not(:checked)),
.fd-alert-modal .fd-alert-row:has(input:not(:checked)) {
  box-shadow: none !important;
}

/* Recovery code: compact, readable and every control has visible state. */
.fd-recovery-sheet .fd-account-sheet__panel {
  width: min(calc(100vw - 24px),520px) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  padding: 20px !important;
  border-radius: 24px !important;
  overflow-x: hidden !important;
}
.fd-recovery-sheet .fd-account-sheet__panel > header {
  margin: -20px -20px 0 !important;
  padding: 20px 20px 12px !important;
}
.fd-recovery-sheet .fd-account-sheet__panel > p {
  margin: 12px 0 0 !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}
.fd-recovery-code {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 14px 0 0 !important;
  padding: 13px 12px !important;
  border-radius: 14px !important;
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace !important;
  font-size: clamp(14px,3.8vw,19px) !important;
  line-height: 1.35 !important;
  text-align: center !important;
  letter-spacing: .02em !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
.fd-recovery-sheet :where(.fd-auth-primary,.fd-auth-secondary) {
  width: 100% !important;
  min-height: 48px !important;
  margin: 10px 0 0 !important;
  padding: 11px 14px !important;
  border-radius: 15px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}
.fd-recovery-confirm {
  display: grid !important;
  grid-template-columns: 23px minmax(0,1fr) !important;
  align-items: start !important;
  gap: 10px !important;
  margin: 12px 0 0 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}
.fd-recovery-confirm input[type="checkbox"] {
  box-sizing: border-box !important;
  width: 23px !important;
  height: 23px !important;
  margin: 0 !important;
  border-radius: 7px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.fd-recovery-confirm input[type="checkbox"]::after {
  display: block !important;
  width: 7px !important;
  height: 12px !important;
  margin: 3px auto 0 !important;
  content: "" !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  opacity: 0 !important;
  transform: rotate(45deg) !important;
}
.fd-recovery-confirm input[type="checkbox"]:checked {
  border-color: var(--fd-r100-red) !important;
  background: var(--fd-r100-red) !important;
}
.fd-recovery-confirm input[type="checkbox"]:checked::after { opacity: 1 !important; }
.fd-recovery-sheet .fd-auth-primary:disabled {
  border-color: transparent !important;
  background: rgba(127,127,135,.22) !important;
  color: rgba(127,127,135,.85) !important;
  opacity: 1 !important;
}
.fd-recovery-sheet [data-fd-recovery-status] {
  min-height: 0 !important;
  margin: 8px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}
.fd-recovery-sheet [data-fd-recovery-status]:empty { display: none !important; }

html[data-fd-theme="light"] .fd-recovery-sheet .fd-account-sheet__panel {
  border-color: var(--fd-r100-light-border) !important;
  background: var(--fd-r100-light-surface) !important;
  color: var(--fd-r100-light-text) !important;
  box-shadow: 0 14px 36px rgba(24,24,28,.16) !important;
}
html[data-fd-theme="light"] .fd-recovery-sheet .fd-account-sheet__panel > header { background: var(--fd-r100-light-surface) !important; }
html[data-fd-theme="light"] .fd-recovery-code,
html[data-fd-theme="light"] .fd-recovery-confirm input[type="checkbox"] {
  border: 1px solid var(--fd-r100-light-border) !important;
  background: var(--fd-r100-light-control) !important;
  color: var(--fd-r100-light-text) !important;
}
html[data-fd-theme="dark"] .fd-recovery-code,
html[data-fd-theme="dark"] .fd-recovery-confirm input[type="checkbox"] {
  border: 1px solid var(--fd-r100-dark-border) !important;
  background: var(--fd-r100-dark-control) !important;
  color: var(--fd-r100-dark-text) !important;
}
html[data-fd-theme="light"] .fd-recovery-confirm input[type="checkbox"]:checked,
html[data-fd-theme="dark"] .fd-recovery-confirm input[type="checkbox"]:checked {
  border-color: var(--fd-r100-red) !important;
  background: var(--fd-r100-red) !important;
}

@media (max-width: 360px) {
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras > div { grid-template-columns: minmax(0,1fr) !important; }
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras .fd-field:last-child { grid-column: auto !important; }
  .fd-recovery-sheet .fd-account-sheet__panel { padding: 16px !important; }
  .fd-recovery-sheet .fd-account-sheet__panel > header { margin: -16px -16px 0 !important; padding: 16px 16px 10px !important; }
}