/* FuelDash R125 — detail parity and final display-mode corrections. */
:root {
  --fd-r125-page-dark: var(--fd-r119-page-dark, #050505);
  --fd-r125-page-light: var(--fd-r119-page-light, #f5f5f7);
  --fd-r125-card-dark: var(--fd-r119-card-dark);
  --fd-r125-card-light: var(--fd-r119-card-light);
  --fd-r125-tile-dark: var(--fd-r119-tile-dark);
  --fd-r125-tile-light: var(--fd-r119-tile-light);
  --fd-r125-border-dark: var(--fd-r119-border-dark);
  --fd-r125-border-light: var(--fd-r119-border-light);
  --fd-r125-card-shadow-dark: var(--fd-r119-card-shadow-dark);
  --fd-r125-card-shadow-light: var(--fd-r119-card-shadow-light);
  --fd-r125-red-glass: var(--fd-r119-red-glass);
  --fd-r125-red-glass-light: var(--fd-r119-red-glass-light);
  --fd-r125-radius-card: var(--fd-r119-radius-card);
  --fd-r125-radius-tile: var(--fd-r119-radius-tile);
  --fd-r125-radius-control: var(--fd-r119-radius-control);
  --fd-r125-text-dark: var(--fd-r119-text-dark);
  --fd-r125-text-light: var(--fd-r119-text-light);
  --fd-r125-muted-dark: var(--fd-r119-muted-dark);
  --fd-r125-muted-light: var(--fd-r119-muted-light);
}

/* Detail view: use the same top-level surface, radius and spacing as account/More. */
html body #app .detail-view {
  display: grid !important;
  gap: 16px !important;
}
html body #app .detail-view :is(
  .detail-card,
  .station-detail-card,
  .detail-prices,
  .detail-advice-card,
  .detail-chart
) {
  box-sizing: border-box !important;
  margin: 0 !important;
  border: 1px solid var(--fd-r125-border-dark) !important;
  border-radius: var(--fd-r125-radius-card) !important;
  background-color: transparent !important;
  background-image: var(--fd-r125-card-dark) !important;
  box-shadow: var(--fd-r125-card-shadow-dark) !important;
  -webkit-backdrop-filter: blur(24px) saturate(126%) !important;
  backdrop-filter: blur(24px) saturate(126%) !important;
  color: var(--fd-r125-text-dark) !important;
}
html[data-fd-theme="light"] body #app .detail-view :is(
  .detail-card,
  .station-detail-card,
  .detail-prices,
  .detail-advice-card,
  .detail-chart
) {
  border-color: var(--fd-r125-border-light) !important;
  background-image: var(--fd-r125-card-light) !important;
  box-shadow: var(--fd-r125-card-shadow-light) !important;
  color: var(--fd-r125-text-light) !important;
}

/* No rectangular wrapper is allowed around the three recommendation fact tiles. */
html[data-fd-theme] body #app .primary-station-card .primary-station-card__facts,
html[data-fd-theme] body #app .detail-advice-card .primary-station-card__facts {
  outline: 0 !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-fd-theme] body #app .primary-station-card .primary-station-card__facts::before,
html[data-fd-theme] body #app .primary-station-card .primary-station-card__facts::after,
html[data-fd-theme] body #app .detail-advice-card .primary-station-card__facts::before,
html[data-fd-theme] body #app .detail-advice-card .primary-station-card__facts::after {
  content: none !important;
  display: none !important;
}
html[data-fd-theme] body #app .detail-advice-card .primary-station-card__insights {
  outline: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-fd-theme] body #app :is(.primary-station-card,.detail-advice-card) .primary-station-card__facts > span {
  border: 1px solid var(--fd-r125-border-dark) !important;
  border-radius: var(--fd-r125-radius-tile) !important;
  background-color: transparent !important;
  background-image: var(--fd-r125-tile-dark) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.045) !important;
}
html[data-fd-theme="light"] body #app :is(.primary-station-card,.detail-advice-card) .primary-station-card__facts > span {
  border-color: var(--fd-r125-border-light) !important;
  background-image: var(--fd-r125-tile-light) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 7px 17px rgba(35,35,42,.06) !important;
}

/* Selected fuel is a semantic red selection in every theme. */
html body #app .detail-price-grid .detail-price-card.is-selected {
  border-color: rgba(255,59,48,.74) !important;
  background-color: transparent !important;
  background-image: var(--fd-r125-red-glass) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 10px 24px rgba(255,59,48,.14) !important;
  -webkit-backdrop-filter: blur(20px) saturate(135%) !important;
  backdrop-filter: blur(20px) saturate(135%) !important;
  color: #fff !important;
}
html body #app .detail-price-grid .detail-price-card.is-selected :is(span,strong,small) {
  color: #fff !important;
}
html[data-fd-theme="light"] body #app .detail-price-grid .detail-price-card.is-selected {
  border-color: rgba(255,59,48,.70) !important;
  background-image: var(--fd-r125-red-glass-light) !important;
  color: #fff !important;
}

/* Empfohlen / Preis / Entfernung is one segmented control, not three separate cards. */
html body #app .station-sort button:not(.is-active) {
  border: 0 !important;
  border-color: transparent !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-r125-muted-dark) !important;
}
html[data-fd-theme="light"] body #app .station-sort button:not(.is-active) {
  border-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--fd-r125-muted-light) !important;
}

/* Favorites empty state: normal site typography with breathing room inside the note card. */
html body #app [data-sort-controls] + .result-list > .empty-state {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 18px !important;
  color: var(--fd-r125-muted-dark) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  letter-spacing: -.08px !important;
}
html[data-fd-theme="light"] body #app [data-sort-controls] + .result-list > .empty-state {
  color: var(--fd-r125-muted-light) !important;
}

/* Tankbuch: one continuous scroller and one uninterrupted theme surface. */
html body .fd-feature-page[data-fd-feature-view="tankbook"] {
  inset: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: none !important;
  border: 0 !important;
  outline: 0 !important;
  background-color: var(--fd-r125-page-dark) !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-overflow-scrolling: touch !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-shell {
  width: min(100%, 480px) !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 0 calc(28px + env(safe-area-inset-bottom)) !important;
  overflow: visible !important;
  border: 0 !important;
  outline: 0 !important;
  background-color: var(--fd-r125-page-dark) !important;
  background-image: none !important;
  box-shadow: none !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] :is(.fd-feature-header,.fd-feature-content) {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-content {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"]::before,
html body .fd-feature-page[data-fd-feature-view="tankbook"]::after,
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-shell::before,
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-shell::after {
  content: none !important;
  display: none !important;
}
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="tankbook"],
html[data-fd-theme="light"] body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-shell {
  background-color: var(--fd-r125-page-light) !important;
}

/* Period control: an even title → label → control rhythm without squeezing. */
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-head {
  column-gap: 14px !important;
  row-gap: 18px !important;
  align-items: flex-start !important;
}
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-statistics-date {
  width: min(100%, 178px) !important;
  align-self: flex-start !important;
  justify-items: start !important;
  gap: 9px !important;
  margin: 0 !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;
}

@media (max-width: 520px) {
  html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-head {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    row-gap: 18px !important;
  }
}

@media (max-width: 370px) {
  html body #app :is(.primary-station-card,.detail-advice-card) .primary-station-card__facts {
    grid-template-columns: 1fr !important;
  }
}