/* FuelDash R97 — final scoped Lightmode polish. Darkmode remains untouched. */
:root {
  --fd-r97-page-bg: #f5f5f7;
  --fd-r97-surface: #ffffff;
  --fd-r97-control: #f0f0f3;
  --fd-r97-control-border: #d4d4da;
  --fd-r97-divider: #d8d8dd;
  --fd-r97-text: #171719;
  --fd-r97-muted: #74747b;
  --fd-r97-red: #ff3b30;
}

/* One uninterrupted page surface, including overscroll and the area behind navigation. */
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-r97-page-bg) !important;
  background-image: none !important;
}

html[data-fd-theme="light"] body,
html[data-fd-theme="light"] #app,
html[data-fd-theme="light"] #app .app-shell {
  min-height: 100dvh !important;
}

html[data-fd-theme="light"] body::before,
html[data-fd-theme="light"] body::after,
html[data-fd-theme="light"] #app::before,
html[data-fd-theme="light"] #app::after,
html[data-fd-theme="light"] #app .app-shell::before,
html[data-fd-theme="light"] #app .app-shell::after,
html[data-fd-theme="light"] #app .app-content::before,
html[data-fd-theme="light"] #app .app-content::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;
}

/* Safari's fixed glass navigation must not create a rectangular haze behind itself. */
html[data-fd-theme="light"] #app .fuel-tab-bar {
  border-color: var(--fd-r97-control-border) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* One secondary-control family. Route is intentionally flatter than R96. */
html[data-fd-theme="light"] #app :where(
  .detail-view .primary-station-action,
  .detail-view .station-route .route-trigger,
  .detail-view .refresh-pill,
  .detail-view .map-location-button,
  .detail-view .round-button
) {
  box-sizing: border-box !important;
  min-height: 44px !important;
  padding: 9px 14px !important;
  border: 1px solid var(--fd-r97-control-border) !important;
  border-radius: 16px !important;
  background: var(--fd-r97-control) !important;
  background-image: none !important;
  color: #505057 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-fd-theme="light"] #app .detail-view .primary-station-action {
  width: 100% !important;
}

html[data-fd-theme="light"] #app .detail-view .primary-station-action :where(strong, small) {
  color: #505057 !important;
  text-shadow: none !important;
}

html[data-fd-theme="light"] #app .detail-view .station-route {
  margin-top: 10px !important;
}

html[data-fd-theme="light"] #app .detail-view :where(.station-route, .route-chooser) {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* All inactive segmented controls use the same neutral fill; selected stays red. */
html[data-fd-theme="light"] #app :where(
  .fuel-preference,
  .nearby-radius,
  .fuel-filter,
  .station-sort,
  .favorites-filter,
  .favorite-filter,
  .chart-range
) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

html[data-fd-theme="light"] #app .chart-range {
  gap: 4px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
}

html[data-fd-theme="light"] #app :where(
  .fuel-preference,
  .nearby-radius,
  .fuel-filter,
  .station-sort,
  .favorites-filter,
  .favorite-filter,
  .chart-range
) button {
  border: 1px solid var(--fd-r97-control-border) !important;
  background: var(--fd-r97-control) !important;
  background-image: none !important;
  color: #505057 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-fd-theme="light"] #app :where(
  .fuel-preference,
  .nearby-radius,
  .fuel-filter,
  .station-sort,
  .favorites-filter,
  .favorite-filter,
  .chart-range
) button:is(.is-active, [aria-pressed="true"], [aria-selected="true"]) {
  border-color: var(--fd-r97-red) !important;
  background: var(--fd-r97-red) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Recommendation facts and chart readout are calm information surfaces, not floating buttons. */
html[data-fd-theme="light"] #app .primary-station-card__facts > span,
html[data-fd-theme="light"] #app .chart-selection-readout {
  border: 1px solid var(--fd-r97-control-border) !important;
  background: var(--fd-r97-control) !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-fd-theme="light"] #app .primary-station-card__facts > span :where(small, b) {
  text-shadow: none !important;
}

html[data-fd-theme="light"] #app .primary-station-card__facts > span small {
  color: var(--fd-r97-muted) !important;
}

html[data-fd-theme="light"] #app .primary-station-card__facts > span b {
  color: var(--fd-r97-text) !important;
}

html[data-fd-theme="light"] #app .detail-advice-card,
html[data-fd-theme="light"] #app .detail-chart {
  box-shadow: none !important;
}

/* Search and detail maps share the same genuinely light neutral tile treatment. */
html[data-fd-theme="light"] #app :where(
  [data-search-map] .fuel-map,
  .station-mini-map .fuel-map,
  .detail-map .fuel-map
) .leaflet-container {
  background: #ececef !important;
}

html[data-fd-theme="light"] #app :where(
  [data-search-map] .fuel-map,
  .station-mini-map .fuel-map,
  .detail-map .fuel-map
) .leaflet-tile-pane {
  filter: invert(0.92) grayscale(1) saturate(0.12) brightness(1.14) contrast(0.78) !important;
}

html[data-fd-theme="light"] #app [data-search-map] .fuel-map {
  border-color: var(--fd-r97-control-border) !important;
  background: #ececef !important;
  box-shadow: none !important;
}

/* Opening hours are plain copy, never a gray plate over the status. */
html[data-fd-theme="light"] #app .station-opening-hours,
html[data-fd-theme="light"] #app .station-opening-hours > span {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html[data-fd-theme="light"] #app .station-opening-hours :where(b, em) {
  color: #626269 !important;
  text-shadow: none !important;
}

/* Price divider and both timestamps use one quiet hierarchy. */
html[data-fd-theme="light"] #app .detail-freshness {
  border-top: 1px solid var(--fd-r97-divider) !important;
}

html[data-fd-theme="light"] #app .freshness-copy,
html[data-fd-theme="light"] #app .freshness-copy span,
html[data-fd-theme="light"] #app .freshness-copy [data-valid-since],
html[data-fd-theme="light"] #app .freshness-copy [data-fetched-at] {
  color: var(--fd-r97-muted) !important;
  text-shadow: none !important;
}

/* Dashboard hero: retain the map, remove the heavy dark/glass veil. */
html[data-fd-theme="light"] #app .hero-card-wrap {
  border-color: var(--fd-r97-control-border) !important;
  background: #ececef !important;
  box-shadow: 0 4px 14px rgba(30, 30, 36, 0.05) !important;
}

html[data-fd-theme="light"] #app .hero-map-layer {
  opacity: 0.9 !important;
  filter: none !important;
}

html[data-fd-theme="light"] #app .hero-map-layer::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}

html[data-fd-theme="light"] #app .hero-map-layer .fuel-map {
  border: 0 !important;
  background: #ececef !important;
  box-shadow: none !important;
}

html[data-fd-theme="light"] #app .hero-map-layer .leaflet-tile-pane {
  filter: invert(0.92) grayscale(1) saturate(0.12) brightness(1.14) contrast(0.78) !important;
}

html[data-fd-theme="light"] #app .price-hero {
  border-color: rgba(28, 28, 32, 0.1) !important;
  background: rgba(255, 255, 255, 0.28) !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Match the legacy detail specificity so the compact height wins the important cascade. */
html[data-fd-theme="light"] #app .detail-view .primary-station-action,
html[data-fd-theme="light"] #app .detail-view .station-route .route-trigger {
  min-height: 44px !important;
}

/* Equalize search and detail tile treatment at the same specificity as R96. */
html[data-fd-theme="light"] #app [data-search-map] .fuel-map .leaflet-tile-pane,
html[data-fd-theme="light"] #app .detail-view .station-mini-map .leaflet-tile-pane,
html[data-fd-theme="light"] #app .detail-view .detail-map .leaflet-tile-pane {
  filter: invert(0.92) grayscale(1) saturate(0.12) brightness(1.14) contrast(0.78) !important;
}