/* FuelDash R124 — final visual harmony layer for Dashboard, Search, Favorites and Tankbuch. */
:root {
  --fd-r124-card-dark: var(--fd-r119-card-dark);
  --fd-r124-card-light: var(--fd-r119-card-light);
  --fd-r124-tile-dark: var(--fd-r119-tile-dark);
  --fd-r124-tile-light: var(--fd-r119-tile-light);
  --fd-r124-control-dark: var(--fd-r119-control-dark);
  --fd-r124-control-light: var(--fd-r119-control-light);
  --fd-r124-border-dark: var(--fd-r119-border-dark);
  --fd-r124-border-light: var(--fd-r119-border-light);
  --fd-r124-shadow-dark: var(--fd-r119-card-shadow-dark);
  --fd-r124-shadow-light: var(--fd-r119-card-shadow-light);
  --fd-r124-control-shadow-dark: var(--fd-r119-control-shadow-dark);
  --fd-r124-control-shadow-light: var(--fd-r119-control-shadow-light);
  --fd-r124-radius-card: var(--fd-r119-radius-card);
  --fd-r124-radius-tile: var(--fd-r119-radius-tile);
  --fd-r124-radius-control: var(--fd-r119-radius-control);
  --fd-r124-gap: 16px;
  --fd-r124-control-height: 46px;
}

/* Dashboard: one fully closed outline stays above the clipped map layers. */
html body #app .fd-best {
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid var(--fd-r124-border-dark) !important;
  border-radius: var(--fd-r124-radius-card) !important;
  background-color: transparent !important;
  background-image: var(--fd-r124-card-dark) !important;
  box-shadow: var(--fd-r124-shadow-dark) !important;
}
html body #app .fd-best::before {
  content: "" !important;
  position: absolute !important;
  z-index: 100 !important;
  inset: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid var(--fd-r124-border-dark) !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}
html[data-fd-theme="light"] body #app .fd-best,
html[data-fd-theme="light"] body #app .fd-best::before {
  border-color: var(--fd-r124-border-light) !important;
}
html[data-fd-theme="light"] body #app .fd-best {
  background-image: var(--fd-r124-card-light) !important;
  box-shadow: var(--fd-r124-shadow-light) !important;
}

/* Dashboard content cards now share the measured account/More silhouette. */
html body #app :is(.primary-station-card,.favorites-block) {
  box-sizing: border-box !important;
  border: 1px solid var(--fd-r124-border-dark) !important;
  border-radius: var(--fd-r124-radius-card) !important;
  background-color: transparent !important;
  background-image: var(--fd-r124-card-dark) !important;
  box-shadow: var(--fd-r124-shadow-dark) !important;
  -webkit-backdrop-filter: blur(24px) saturate(126%) !important;
  backdrop-filter: blur(24px) saturate(126%) !important;
}
html[data-fd-theme="light"] body #app :is(.primary-station-card,.favorites-block) {
  border-color: var(--fd-r124-border-light) !important;
  background-image: var(--fd-r124-card-light) !important;
  box-shadow: var(--fd-r124-shadow-light) !important;
}

/* The Tankempfehlung facts are three tiles only — never a rectangular plate behind them. */
html body #app .primary-station-card__facts {
  gap: 10px !important;
  padding: 14px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html body #app .primary-station-card__facts > span,
html body #app .primary-station-card__facts > span + span {
  min-width: 0 !important;
  min-height: 66px !important;
  padding: 12px !important;
  border: 1px solid var(--fd-r124-border-dark) !important;
  border-radius: var(--fd-r124-radius-tile) !important;
  background-color: transparent !important;
  background-image: var(--fd-r124-tile-dark) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.045) !important;
  -webkit-backdrop-filter: blur(18px) saturate(122%) !important;
  backdrop-filter: blur(18px) saturate(122%) !important;
}
html body #app .primary-station-card__facts > span small {
  font-size: 11px !important;
  line-height: 1.25 !important;
}
html body #app .primary-station-card__facts > span b {
  display: block !important;
  margin-top: 6px !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  letter-spacing: -.18px !important;
}
html[data-fd-theme="light"] body #app .primary-station-card__facts > span,
html[data-fd-theme="light"] body #app .primary-station-card__facts > span + span {
  border-color: var(--fd-r124-border-light) !important;
  background-image: var(--fd-r124-tile-light) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 7px 17px rgba(35,35,42,.06) !important;
}

/* Search uses the same compact control height and account-card surface. */
html body #app .search-field {
  min-height: var(--fd-r124-control-height) !important;
  height: var(--fd-r124-control-height) !important;
  padding-inline: 14px !important;
  border: 1px solid var(--fd-r124-border-dark) !important;
  border-radius: var(--fd-r124-radius-control) !important;
  background-color: transparent !important;
  background-image: var(--fd-r124-control-dark) !important;
  box-shadow: var(--fd-r124-control-shadow-dark) !important;
  -webkit-backdrop-filter: blur(20px) saturate(124%) !important;
  backdrop-filter: blur(20px) saturate(124%) !important;
}
html body #app .search-field input {
  font-size: 16px !important;
  font-weight: 500 !important;
}
html[data-fd-theme="light"] body #app .search-field {
  border-color: var(--fd-r124-border-light) !important;
  background-image: var(--fd-r124-control-light) !important;
  box-shadow: var(--fd-r124-control-shadow-light) !important;
}
html body #app :is([data-sort-controls] .station-sort button,.search-availability-filter button) {
  min-height: 42px !important;
  border-radius: var(--fd-r124-radius-control) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}
html body #app .result-list {
  gap: var(--fd-r124-gap) !important;
}
html body #app .result-list .station-result {
  overflow: hidden !important;
  margin: 0 !important;
  border: 1px solid var(--fd-r124-border-dark) !important;
  border-radius: var(--fd-r124-radius-card) !important;
  background-color: transparent !important;
  background-image: var(--fd-r124-card-dark) !important;
  box-shadow: var(--fd-r124-shadow-dark) !important;
  -webkit-backdrop-filter: blur(24px) saturate(126%) !important;
  backdrop-filter: blur(24px) saturate(126%) !important;
}
html[data-fd-theme="light"] body #app .result-list .station-result {
  border-color: var(--fd-r124-border-light) !important;
  background-image: var(--fd-r124-card-light) !important;
  box-shadow: var(--fd-r124-shadow-light) !important;
}

/* Favorites cards use the same card edge, depth and compact content rhythm. */
html body #app .favorites-screen-card {
  overflow: hidden !important;
  border: 1px solid var(--fd-r124-border-dark) !important;
  border-radius: var(--fd-r124-radius-card) !important;
  background-color: transparent !important;
  background-image: var(--fd-r124-card-dark) !important;
  box-shadow: var(--fd-r124-shadow-dark) !important;
  -webkit-backdrop-filter: blur(24px) saturate(126%) !important;
  backdrop-filter: blur(24px) saturate(126%) !important;
}
html[data-fd-theme="light"] body #app .favorites-screen-card {
  border-color: var(--fd-r124-border-light) !important;
  background-image: var(--fd-r124-card-light) !important;
  box-shadow: var(--fd-r124-shadow-light) !important;
}
html body #app :is(.dashboard-favorite-card,.favorites-screen-card) .station-copy strong {
  font-size: 15px !important;
  line-height: 1.2 !important;
  letter-spacing: -.22px !important;
}
html body #app :is(.dashboard-favorite-card,.favorites-screen-card) .station-value strong {
  font-size: 19px !important;
  line-height: 1 !important;
  letter-spacing: -.45px !important;
}

/* Tankbuch: balanced period picker, compact enough for the monthly statistics card. */
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-head {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date {
  width: min(100%, 178px) !important;
  margin: 0 !important;
  justify-items: start !important;
  align-self: flex-end !important;
  gap: 6px !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date > span:first-child {
  color: var(--fd-r119-muted-dark) !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  letter-spacing: .09em !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control {
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 12px 0 39px !important;
  border: 1px solid rgba(255,59,48,.27) !important;
  border-radius: var(--fd-r124-radius-control) !important;
  background: linear-gradient(145deg, rgba(255,59,48,.15), rgba(54,13,16,.30)) !important;
  color: #ffe2df !important;
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 7px 17px rgba(255,59,48,.07) !important;
  -webkit-backdrop-filter: blur(18px) saturate(122%) !important;
  backdrop-filter: blur(18px) saturate(122%) !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control > svg {
  left: 13px !important;
  width: 17px !important;
  height: 17px !important;
  color: #ff8179 !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__label {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -.16px !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control input {
  height: 100% !important;
  min-height: 44px !important;
}
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date > span:first-child {
  color: var(--fd-r119-muted-light) !important;
}
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control {
  border-color: rgba(255,59,48,.23) !important;
  background: linear-gradient(145deg, rgba(255,59,48,.10), rgba(255,255,255,.84)) !important;
  color: #a52d27 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.96), 0 7px 17px rgba(255,59,48,.07) !important;
}
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date__control > svg {
  color: #d34139 !important;
}

@media (max-width: 370px) {
  html body #app .primary-station-card__facts {
    grid-template-columns: 1fr !important;
  }
  html body #app .primary-station-card__facts > span,
  html body #app .primary-station-card__facts > span + span {
    min-height: 58px !important;
  }
  html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date {
    width: min(100%, 172px) !important;
    align-self: flex-start !important;
  }
}