/* Tank-App App-Shell v1 */

:root {
  --map-collapsed-height: clamp(155px, 21dvh, 205px);
  --search-sheet-top: 42dvh;
  --search-compact-map-height: 180px;
}

.search-controls.below-map-controls {
  position: relative;
  top: auto;
  z-index: 620;
  padding: 8px 12px 10px;
  background: var(--bg);
}

.search-controls.below-map-controls .primary-toolbar {
  grid-template-columns: 48px minmax(0, 1fr) 48px;
}

.search-composite {
  min-width: 0;
  height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  border: 1px solid #2d2d32;
  border-radius: 24px;
  background: #1c1c1f;
  overflow: hidden;
}

.search-composite .search-field-button {
  min-width: 0;
  width: 100%;
  height: 46px;
  border: 0;
  border-radius: 23px;
  background: transparent;
  padding: 0 12px;
}

.search-composite #quickFilterButton,
#quickFilterButton,
#quickFilterSheet {
  display: none !important;
}

.filter-toolbar.fuel-only-toolbar,
.filter-toolbar.sort-moved-out,
.filter-toolbar.fuel-only-toolbar.sort-moved-out {
  grid-template-columns: minmax(0, 1fr) !important;
}

.filter-toolbar.fuel-only-toolbar .pill-select { width: 100%; }

.search-open-only-row {
  margin: 4px 0 12px;
  padding: 0 2px;
  border-top: 0;
  border-bottom: 1px solid #34343a;
}

.sheet-header button[data-close] {
  min-width: 64px;
  font-weight: 650;
}

.detail-overlay {
  z-index: 5000 !important;
  isolation: isolate;
}
.detail-overlay .detail-panel { z-index: 5001; isolation: isolate; }
body.detail-open .bottom-nav { z-index: 5100; }

.alert-remove {
  display: grid;
  place-items: center;
  padding: 0;
  color: #fff;
  background: #ff453a;
  font-size: 0;
  line-height: 1;
  cursor: pointer;
}
.alert-remove::before { content: none !important; }
.alert-remove svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.4;
  fill: none;
}

.alert-fuel-row .alert-threshold,
.alert-fuel-row .alert-stepper,
.alert-fuel-row .alert-stepper *,
.alert-fuel-row .alert-remove {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  touch-action: manipulation;
}
.alert-fuel-row .alert-threshold { cursor: default; }

.route-add { display: none !important; }
.route-row-actions { align-items: center; }
.route-row-actions .route-start-button {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 19px;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}
.route-row-actions .route-delete-icon {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 19px;
  display: grid;
  place-items: center;
  color: #fff;
}
.route-row-actions .route-delete-icon svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.back-button {
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 0;
}
.back-button svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
}

#searchOverlay:not(.route-search-mode) {
  inset: var(--search-sheet-top) 0 0;
  background: transparent;
  z-index: 1800;
  overflow: visible;
}
#searchOverlay:not(.route-search-mode) .full-panel {
  min-height: 0;
  height: 100%;
  max-height: 100%;
  border-radius: 28px 28px 0 0;
  padding: 22px 16px calc(24px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 34px rgba(0,0,0,.55);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#searchOverlay:not(.route-search-mode) .full-panel::before {
  content: "";
  display: block;
  width: 92px;
  height: 5px;
  margin: -10px auto 12px;
  border-radius: 4px;
  background: #a5a5ab;
  opacity: .8;
}
#searchOverlay.route-search-mode { inset: 0; }
#searchOverlay.route-search-mode .full-panel { min-height: 100dvh; border-radius: 0; }
#searchOverlay .history-section,
#searchOverlay .provider-note,
#rememberCurrentSearchButton { display: none !important; }

body.modal-scroll-locked { overscroll-behavior: none; }
.sheet-overlay { overscroll-behavior: contain; touch-action: auto; }
.sheet-overlay .sheet-panel,
#searchOverlay .full-panel {
  touch-action: pan-y;
  overscroll-behavior: contain;
}
body:not(.modal-scroll-locked) { touch-action: auto; }

.map-section { will-change: height; }
.map-section.map-collapsible {
  position: sticky;
  top: 0;
  z-index: 760;
  transition: height .22s ease;
}
.map-section.map-collapsible.map-collapsed { height: var(--map-collapsed-height); }
.map-section.search-map-compact {
  height: var(--search-compact-map-height) !important;
  min-height: var(--search-compact-map-height) !important;
  max-height: var(--search-compact-map-height) !important;
  transition: height .2s ease, min-height .2s ease, max-height .2s ease;
}
#searchOverlay.search-overlay-compact:not(.route-search-mode) { inset: var(--search-sheet-top) 0 0 !important; }

.results-heading.sticky-results-heading {
  position: sticky;
  top: var(--map-collapsed-height);
  z-index: 740;
  align-items: center;
  background: rgba(21,21,24,.97);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
body:not(.map-scroll-collapsed) .results-heading.sticky-results-heading {
  position: relative;
  top: auto;
}
.results-heading-without-map-button { justify-content: flex-start; }
.results-heading.results-heading-with-sort {
  justify-content: space-between !important;
  align-items: center;
  gap: 12px;
}
.results-heading.results-heading-with-sort > div:first-child { min-width: 0; }
.results-sort-toggle {
  flex: 0 0 auto;
  min-width: 92px;
  height: 40px;
  margin-left: auto;
}
.results-sort-toggle button { min-width: 40px; font-size: 1rem; }
.search-composite .segmented-control.results-sort-toggle { display: none; }

.bottom-nav.bottom-nav-edge {
  bottom: 0;
  width: min(760px, 100%);
  min-height: calc(78px + env(safe-area-inset-bottom));
  height: auto;
  padding: 5px 5px calc(5px + env(safe-area-inset-bottom));
  border-radius: 30px 30px 0 0;
}
.app-shell.bottom-nav-safe-content { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
.station-list { scroll-padding-bottom: calc(112px + env(safe-area-inset-bottom)); }

#brandFilterSheet,
#brandFilterSheet .sheet-panel,
#brandFilterSheet .sheet-panel.tall,
#brandFilterSheet #brandOptions {
  max-width: 100vw;
  overflow-x: hidden !important;
}
#brandFilterSheet .sheet-panel { width: 100%; left: 0; right: 0; }
#brandFilterSheet .filter-title-row { display: block; }
#brandFilterSheet .filter-title-row > button { display: none !important; }
.brand-bulk-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 8px 0 18px;
}
.brand-bulk-actions button {
  min-height: 44px;
  border: 1px solid #3d3d45;
  border-radius: 14px;
  background: #29292f;
  color: #27a7ff;
  padding: 8px 12px;
  text-align: center;
  font-weight: 650;
}
#brandFilterSheet .brand-grid {
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
#brandFilterSheet .brand-choice {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  grid-template-columns: 42px minmax(0, 1fr) 28px;
  align-items: center;
}
#brandFilterSheet .brand-choice > span:nth-child(2) {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.2;
}
#brandFilterSheet .brand-choice input { justify-self: end; flex: 0 0 auto; }

.test-notification-button { margin-top: 10px; }
.detail-fuel-row:has(.detail-fuel-note:empty) .detail-fuel-note { display: none; }

/* iOS/PWA interaction and viewport stability */
html,
body,
.app-shell,
.app-view,
.settings-card,
.station-alert-station,
.station-alert-rule,
.bottom-nav,
button,
a,
label,
input,
select,
textarea,
[role="button"] {
  touch-action: manipulation !important;
}

.sheet-overlay,
.sheet-overlay .sheet-panel,
#searchOverlay .full-panel,
#dataSourceOverlay .info-panel {
  touch-action: pan-y !important;
}

.bottom-nav,
.bottom-nav.bottom-nav-edge {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 0 !important;
  margin: 0 !important;
  transform: translate3d(-50%, 0, 0) !important;
  -webkit-transform: translate3d(-50%, 0, 0) !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  z-index: 900 !important;
}

body.detail-open .bottom-nav,
body.detail-open .bottom-nav.bottom-nav-edge {
  z-index: 5100 !important;
}

.leaflet-control-zoom a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.leaflet-control-zoom a > .ui-icon-solid { margin: auto !important; }

#dataSourceOverlay .info-panel {
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

@media (min-width: 680px) {
  #brandFilterSheet .brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  :root { --map-collapsed-height: clamp(145px, 20dvh, 185px); }
  .search-controls.below-map-controls { padding-left: 8px; padding-right: 8px; }
  .search-composite .search-field-button { padding-left: 10px; gap: 7px; }
  .search-composite .search-field-button span { font-size: .95rem; }
  #searchOverlay:not(.route-search-mode) .full-panel { padding-left: 14px; padding-right: 14px; }
  #brandFilterSheet .sheet-panel.tall { padding-left: 14px; padding-right: 14px; }
  #brandFilterSheet .brand-grid { gap: 9px; }
  #brandFilterSheet .brand-choice {
    min-height: 76px;
    padding: 8px;
    gap: 7px;
    grid-template-columns: 40px minmax(0, 1fr) 24px;
  }
  .results-heading.results-heading-with-sort { padding-right: 14px; }
  .results-sort-toggle { min-width: 88px; height: 38px; }
  .bottom-nav.bottom-nav-edge {
    width: 100%;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
  .route-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .route-row-actions { justify-content: flex-end; }
}