/* FuelDash R96 — final component-scoped continuity layer. */
:root {
  --fd-r96-dark-bg: #050505;
  --fd-r96-light-bg: #f5f5f7;
  --fd-r96-light-card: rgba(255, 255, 255, 0.96);
  --fd-r96-light-control: #f0f0f3;
  --fd-r96-light-control-hover: #e9e9ed;
  --fd-r96-light-border: #d3d3d9;
  --fd-r96-light-text: #151517;
  --fd-r96-light-muted: #66666d;
  --fd-r96-red: #ff3b30;
  --fd-r96-card-radius: 24px;
  --fd-r96-control-radius: 16px;
  --fd-r96-surface-gap: 16px;
}

html,
body,
#app,
.app-shell {
  min-height: 100%;
  background-color: var(--fd-page-bg, var(--fd-r96-dark-bg)) !important;
}

html[data-fd-theme="dark"],
html[data-fd-theme="dark"] body,
html[data-fd-theme="dark"] #app,
html[data-fd-theme="dark"] .app-shell,
html[data-fd-theme="dark"] .fd-feature-page,
html[data-fd-theme="dark"] .fd-feature-shell,
html[data-fd-theme="dark"] .fd-feature-content {
  background-color: var(--fd-r96-dark-bg) !important;
}

html[data-fd-theme="light"],
html[data-fd-theme="light"] body,
html[data-fd-theme="light"] #app,
html[data-fd-theme="light"] .app-shell,
html[data-fd-theme="light"] .app-content,
html[data-fd-theme="light"] .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-r96-light-bg) !important;
  background-image: none !important;
}

/* Extend the feature background beyond the visual viewport edges. */
.fd-feature-page {
  inset: -1px 0 !important;
  min-height: calc(100dvh + 2px);
  overscroll-behavior: none;
}
.fd-feature-page::before,
.fd-feature-page::after {
  position: fixed;
  z-index: -1;
  left: 0;
  right: 0;
  height: 120px;
  content: "";
  background: inherit;
  pointer-events: none;
}
.fd-feature-page::before { top: -120px; }
.fd-feature-page::after { bottom: -120px; }

.fd-feature-header {
  background: var(--fd-page-bg, var(--fd-r96-dark-bg)) !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
html[data-fd-theme="light"] .fd-feature-header {
  border-bottom: 1px solid rgba(28, 28, 32, 0.08) !important;
}

/* True visually-hidden utility; prevents the month label from widening the layout. */
.fd-feature-page .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Detail view: one visual control family, based on the accepted route button. */
html[data-fd-theme="light"] #app .detail-view :where(
  .primary-station-action,
  .station-route .route-trigger
) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 11px 16px !important;
  border: 1px solid var(--fd-r96-light-border) !important;
  border-radius: 18px !important;
  background: var(--fd-r96-light-control) !important;
  background-image: none !important;
  color: #4f4f56 !important;
  box-shadow: none !important;
  filter: none !important;
}
html[data-fd-theme="light"] #app .detail-view .primary-station-action {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-align: left !important;
}
html[data-fd-theme="light"] #app .detail-view .primary-station-action :where(strong, small) {
  color: #4f4f56 !important;
  text-shadow: none !important;
}
html[data-fd-theme="light"] #app .detail-view .station-route .route-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 680 !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;
}
html[data-fd-theme="light"] #app .detail-view .station-route {
  margin-top: 12px !important;
}
html[data-fd-theme="light"] #app .detail-view :where(.detail-favorite, .detail-header .round-button) {
  border: 1px solid var(--fd-r96-light-border) !important;
  background: var(--fd-r96-light-control) !important;
  background-image: none !important;
  color: #55555c !important;
  box-shadow: none !important;
}

/* Convert the dark tile source into a genuinely light neutral map only in detail view. */
html[data-fd-theme="light"] #app .detail-view .station-mini-map .leaflet-container {
  background: #ececef !important;
}
html[data-fd-theme="light"] #app .detail-view .station-mini-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 .detail-view .station-mini-map :where(.leaflet-control-attribution, .leaflet-control-attribution a) {
  color: #55555d !important;
  background: rgba(255, 255, 255, 0.78) !important;
}

/* Tankbook: one vertical rhythm and no horizontal overflow. */
.fd-feature-page[data-fd-feature-view="tankbook"],
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-shell,
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-content {
  max-width: 100% !important;
  overflow-x: hidden !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-content {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--fd-r96-surface-gap) !important;
  box-sizing: border-box !important;
  padding: 16px 20px calc(34px + env(safe-area-inset-bottom)) !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-content > * {
  flex: 0 0 auto;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.fd-feature-page[data-fd-feature-view="tankbook"] :where(
  .fd-feature-card,
  .fd-tank-history
) {
  overflow: hidden !important;
  border-radius: var(--fd-r96-card-radius) !important;
  padding: 18px !important;
}
html[data-fd-theme="light"] .fd-feature-page[data-fd-feature-view="tankbook"] :where(
  .fd-feature-card,
  .fd-tank-history,
  .fd-tank-summary article,
  .fd-month-grid article,
  .fd-tank-entry
) {
  border: 1px solid var(--fd-r96-light-border) !important;
  background: var(--fd-r96-light-card) !important;
  background-image: none !important;
  box-shadow: 0 8px 24px rgba(20, 20, 24, 0.055) !important;
}

.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-summary {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-summary article {
  min-width: 0 !important;
  min-height: 96px !important;
  padding: 16px !important;
  border-radius: 20px !important;
}

.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-form {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px 12px !important;
  margin-top: 16px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] :where(.fd-field, .fd-field-affix, .fd-tank-extras, .fd-tank-extras > div) {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras {
  grid-column: 1 / -1 !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: 14px 12px !important;
  padding-top: 14px !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"] :where(
  .fd-field input,
  .fd-field select,
  .fd-field textarea,
  .fd-month-picker input,
  .fd-auth-form input
) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  border-radius: var(--fd-r96-control-radius) !important;
  box-shadow: none !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] :where(.fd-field input, .fd-field select, .fd-month-picker input, .fd-auth-form input) {
  min-height: 48px !important;
}
html[data-fd-theme="light"] .fd-feature-page[data-fd-feature-view="tankbook"] :where(
  .fd-field input,
  .fd-field select,
  .fd-field textarea,
  .fd-month-picker input,
  .fd-auth-form input
) {
  border: 1px solid var(--fd-r96-light-border) !important;
  background: #f6f6f8 !important;
  background-image: none !important;
  color: var(--fd-r96-light-text) !important;
}

.fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 12px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-picker {
  display: block !important;
  min-width: 0 !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-picker input {
  width: 132px !important;
  padding: 0 10px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-grid {
  gap: 10px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-grid article {
  border-radius: 16px !important;
}

.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-history__head {
  padding: 0 0 14px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-empty {
  box-sizing: border-box !important;
  width: 100% !important;
  border-radius: 18px !important;
}

.fd-feature-page[data-fd-feature-view="tankbook"] :where(
  .fd-tank-submit,
  .fd-auth-primary,
  .fd-auth-secondary,
  .fd-backup-actions button,
  .fd-account-card > button
) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 12px 14px !important;
  border-radius: var(--fd-r96-control-radius) !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

.fd-feature-page[data-fd-feature-view="tankbook"] .fd-backup-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 16px !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-backup-actions button {
  grid-column: auto !important;
  min-width: 0 !important;
  min-height: 64px !important;
}
html[data-fd-theme="light"] .fd-feature-page[data-fd-feature-view="tankbook"] :where(
  .fd-backup-actions button,
  .fd-account-card > button,
  .fd-auth-secondary
) {
  border: 1px solid var(--fd-r96-light-border) !important;
  background: var(--fd-r96-light-control) !important;
  background-image: none !important;
  color: var(--fd-r96-light-text) !important;
  box-shadow: none !important;
}

.fd-feature-page[data-fd-feature-view="tankbook"] .fd-account-card > button {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 16px !important;
  text-align: left !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-account-card > button > span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-account-card > button > strong {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 26px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  background: rgba(127, 127, 135, 0.1) !important;
  color: var(--fd-r96-light-muted) !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

@media (max-width: 370px) {
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-content {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-form,
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-extras > div,
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-head {
    grid-template-columns: 1fr !important;
  }
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-month-picker input {
    width: 100% !important;
  }
  .fd-feature-page[data-fd-feature-view="tankbook"] .fd-backup-actions {
    grid-template-columns: 1fr !important;
  }
}