/* FuelDash R126 — verified visual regression corrections. */
:root {
  --fd-r126-border-dark: var(--fd-r119-border-dark);
  --fd-r126-border-light: var(--fd-r119-border-light);
  --fd-r126-tile-dark: var(--fd-r119-tile-dark);
  --fd-r126-tile-light: var(--fd-r119-tile-light);
  --fd-r126-muted-dark: var(--fd-r119-muted-dark);
  --fd-r126-muted-light: var(--fd-r119-muted-light);
  --fd-r126-red-solid: linear-gradient(145deg, #ff3b30, #d92e26);
  --fd-r126-radius-card: var(--fd-r119-radius-card);
  --fd-r126-radius-tile: var(--fd-r119-radius-tile);
}

/* Günstigste Tankstelle: exactly one even outline, above the map but without a cast shadow. */
html body #app .fd-best {
  isolation: isolate !important;
  overflow: hidden !important;
  clip-path: none !important;
  contain: layout style !important;
  border: 0 !important;
  border-radius: var(--fd-r126-radius-card) !important;
  outline: 0 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.055) !important;
}
html body #app .fd-best::before {
  content: "" !important;
  position: absolute !important;
  z-index: 2000 !important;
  inset: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
  border: 1px solid var(--fd-r126-border-dark) !important;
  border-radius: inherit !important;
  box-shadow: none !important;
  pointer-events: none !important;
}
html body #app .fd-best::after {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
html[data-fd-theme="light"] body #app .fd-best::before {
  border-color: var(--fd-r126-border-light) !important;
}

/* Tankempfehlung: only the three compact tiles remain; no container line above or below them. */
html[data-fd-theme] body #app .primary-station-card__insights > .primary-station-card__facts {
  gap: 8px !important;
  padding: 12px 0 0 !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-fd-theme] body #app .primary-station-card__insights > .primary-station-card__facts::before,
html[data-fd-theme] body #app .primary-station-card__insights > .primary-station-card__facts::after {
  content: none !important;
  display: none !important;
}
html[data-fd-theme] body #app .primary-station-card__facts > span {
  min-height: 58px !important;
  padding: 8px 9px !important;
  border: 1px solid var(--fd-r126-border-dark) !important;
  border-radius: var(--fd-r126-radius-tile) !important;
  background-color: transparent !important;
  background-image: var(--fd-r126-tile-dark) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.04) !important;
  -webkit-backdrop-filter: blur(18px) saturate(122%) !important;
  backdrop-filter: blur(18px) saturate(122%) !important;
}
html[data-fd-theme] body #app .primary-station-card__facts > span small {
  min-height: 0 !important;
  font-size: 9px !important;
  line-height: 1.25 !important;
}
html[data-fd-theme] body #app .primary-station-card__facts > span b {
  margin-top: auto !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
}
html[data-fd-theme="light"] body #app .primary-station-card__facts > span {
  border-color: var(--fd-r126-border-light) !important;
  background-image: var(--fd-r126-tile-light) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98) !important;
}

/* Sort order is one segmented control: only the selected segment is filled. */
html body #app .station-sort {
  display: flex !important;
  gap: 0 !important;
  padding: 4px !important;
  border: 1px solid var(--fd-r126-border-dark) !important;
  border-radius: 18px !important;
  background: rgba(23,23,26,.82) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.055) !important;
}
html body #app .station-sort > button {
  min-height: 42px !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 14px !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: var(--fd-r126-muted-dark) !important;
}
html body #app .station-sort > button.is-active {
  border: 1px solid rgba(255,59,48,.72) !important;
  background-image: var(--fd-r126-red-solid) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.14) !important;
  color: #fff !important;
  text-shadow: none !important;
}
html[data-fd-theme="light"] body #app .station-sort {
  border-color: var(--fd-r126-border-light) !important;
  background: rgba(237,237,242,.92) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98) !important;
}
html[data-fd-theme="light"] body #app .station-sort > button { color: var(--fd-r126-muted-light) !important; }

/* Red remains a flat semantic colour: no bloom, halo or coloured cast shadow anywhere. */
html body #app .detail-price-card.is-selected,
html body #app .chart-range button.is-active,
html body #app .fuel-filter button.is-active,
html body #app .fuel-preference button.is-active,
html body #app .nearby-radius button.is-active,
html body #app .primary-station-action.is-active {
  box-shadow: inset 0 1px rgba(255,255,255,.14) !important;
  text-shadow: none !important;
  filter: none !important;
}
html body #app :is(.map-price-marker.is-selected,.user-location-dot) {
  box-shadow: 0 5px 12px rgba(0,0,0,.32) !important;
  filter: none !important;
}
html body #app :is(.fd-best__price,.fd-best__trend,.price-change,.station-value strong,.detail-price-card strong,.primary-station-card__price) {
  text-shadow: none !important;
}
html body #app .fuel-advice-card::before {
  display: none !important;
  box-shadow: none !important;
  filter: none !important;
}
html body #app :is(
  .comparison-row.is-lowest i b,
  .chart-line,
  .legend-today,
  .search-field svg,
  .station-meta .is-closed::before,
  .favorites-screen-card.is-primary-station
) {
  box-shadow: none !important;
  filter: none !important;
}

/* Tankbuch period selector: compact, evenly spaced and no longer stretched by older rules. */
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 18px !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date {
  width: 148px !important;
  min-width: 148px !important;
  justify-items: start !important;
  align-self: start !important;
  gap: 8px !important;
  margin: 0 !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control {
  width: 148px !important;
  min-width: 148px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 10px 0 34px !important;
  border-radius: 13px !important;
  box-shadow: inset 0 1px rgba(255,255,255,.05) !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__label {
  font-size: 12px !important;
  font-weight: 650 !important;
}

/* The visible build marker is part of Über FuelDash in both themes. */
html body #app .about-build > em {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  color: var(--fd-r126-muted-dark) !important;
  font-size: 11px !important;
  font-style: normal !important;
  line-height: 1.25 !important;
  opacity: 1 !important;
}
html[data-fd-theme="light"] body #app .about-build > em { color: var(--fd-r126-muted-light) !important; }