/**
 * Mobile skin: Karte, Reisen, Trip-Planer (html[data-shell="mobile"]).
 * Ergänzt css/map.css + css/tracker.css. Nur Optik/Layout, keine Struktur.
 */

/* ---------- Karte: Filterleiste als scrollbare Chip-Zeile ---------- */

html[data-shell="mobile"] body[data-page="map"] {
  --map-filter-height: 56px;
  padding-bottom: 0;
}

html[data-shell="mobile"] .map-filters {
  height: var(--map-filter-height);
  overflow: visible;
}

html[data-shell="mobile"] .map-filters-inner {
  --map-filter-fs: 0.9rem;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0.4rem;
  height: 100%;
  padding: 0 max(0.75rem, env(safe-area-inset-right, 0px)) 0 max(0.75rem, env(safe-area-inset-left, 0px));
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline: 0.75rem;
}

html[data-shell="mobile"] .map-filters-inner::-webkit-scrollbar {
  display: none;
}

html[data-shell="mobile"] .map-filters-inner > * {
  flex-shrink: 0;
}

html[data-shell="mobile"] .map-filter-search {
  flex: 0 0 min(58vw, 15rem);
  min-width: 10rem;
}

html[data-shell="mobile"] .map-filter-input,
html[data-shell="mobile"] .map-filter-select,
html[data-shell="mobile"] .map-filter-trigger,
html[data-shell="mobile"] .map-filters-inner .map-park-card-demo-toggle-btn.btn {
  height: 40px;
  min-height: 40px;
  border-radius: 999px;
  padding: 0 0.85rem;
  font-size: 0.9rem;
}

html[data-shell="mobile"] .map-filter-input {
  font-size: 1rem; /* kein iOS-Zoom */
}

html[data-shell="mobile"] .map-filter-select {
  min-width: 0;
  max-width: 11rem;
}

html[data-shell="mobile"] .map-filter-trigger {
  min-width: 0;
}

html[data-shell="mobile"] .map-filter-count {
  margin-left: 0;
  padding-left: 0.25rem;
  font-size: 0.8rem;
}

/* Dropdowns/Vorschläge aus dem Scroll-Container lösen: fixed unter der Leiste */
html[data-shell="mobile"] .map-filter-menu,
html[data-shell="mobile"] .map-filter-suggest {
  position: fixed;
  top: calc(var(--header-total-height) + var(--map-filter-height) + 6px);
  left: max(0.75rem, env(safe-area-inset-left, 0px));
  right: max(0.75rem, env(safe-area-inset-right, 0px));
  min-width: 0;
  max-height: min(50dvh, 380px);
  z-index: 1200;
}

html[data-shell="mobile"] .map-filter-option,
html[data-shell="mobile"] .map-filter-suggest-item {
  min-height: 2.75rem;
  padding: 0.55rem 0.7rem;
  font-size: 0.95rem;
}

html[data-shell="mobile"] .map-filter-option input[type="checkbox"],
html[data-shell="mobile"] .map-filter-option input[type="radio"] {
  width: 1.2rem;
  height: 1.2rem;
}

/* ---------- Kartenfläche ---------- */

html[data-shell="mobile"] .map-page {
  height: calc(100dvh - var(--header-total-height) - var(--map-filter-height) - var(--mobile-tabbar-total));
  min-height: 0;
}

html[data-shell="mobile"] .map-hint {
  top: 0.6rem;
  left: 0.6rem;
  right: 0.6rem;
  max-width: none;
  font-size: 0.78rem;
  padding: 0.4rem 0.65rem;
  text-align: center;
}

/* Leaflet-Controls: Daumen-tauglich */
html[data-shell="mobile"] .leaflet-touch .leaflet-bar a,
html[data-shell="mobile"] .leaflet-bar a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 1.25rem;
}

html[data-shell="mobile"] .leaflet-touch .leaflet-control-layers-toggle,
html[data-shell="mobile"] .leaflet-control-layers-toggle {
  width: 40px;
  height: 40px;
}

html[data-shell="mobile"] .leaflet-bottom.leaflet-left {
  margin-bottom: 3.5rem; /* über der eingeklappten Sidebar-Pille */
}

html[data-shell="mobile"] .leaflet-control-attribution {
  font-size: 0.62rem;
  max-width: 42vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-shell="mobile"] .leaflet-container.park-basemap-google .leaflet-control-attribution {
  max-width: min(62vw, 16rem);
  margin: 0 !important;
}

html[data-shell="mobile"] #parks-map.park-basemap-google .leaflet-bottom.leaflet-right {
  padding-right: 1.9rem;
  gap: 0.3rem;
}

html[data-shell="mobile"] .park-basemap-switcher__btn {
  font-size: 0.6rem;
  padding: 0.26rem 0.26rem 0.3rem;
  min-width: 3.35rem;
}

html[data-shell="mobile"] .park-basemap-switcher__preview {
  width: 3.15rem;
  height: 2.15rem;
}

html[data-shell="mobile"] .map-bookmark-pin {
  min-width: 2.5rem;
  min-height: 2.5rem;
}

/* ---------- Sidebar als Bottom-Sheet ---------- */

html[data-shell="mobile"] #map-sidebar.leaflet-sidebar {
  position: absolute;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: 60dvh;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: none;
  box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.32);
  transition: none;
}

/* Eingeklappt: kleine Pille unten rechts mit den drei Tabs */
html[data-shell="mobile"] #map-sidebar.leaflet-sidebar.collapsed {
  left: auto !important;
  right: 0.6rem !important;
  bottom: 0.6rem !important;
  width: auto !important;
  max-height: none;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  overflow: hidden;
}

html[data-shell="mobile"] #map-sidebar .leaflet-sidebar-tabs {
  flex: 0 0 auto;
  width: 100% !important;
  height: auto !important;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
}

html[data-shell="mobile"] #map-sidebar.collapsed .leaflet-sidebar-tabs {
  border-bottom: none;
  background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
}

html[data-shell="mobile"] #map-sidebar.leaflet-sidebar-right .leaflet-sidebar-tabs {
  border-left: none;
  border-right: none;
}

/* Grip über den Tabs (nur ausgeklappt) */
html[data-shell="mobile"] #map-sidebar:not(.collapsed) .leaflet-sidebar-tabs::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 4px;
  margin: 0.4rem auto 0;
  border-radius: 2px;
  background: color-mix(in srgb, var(--text-muted) 55%, transparent);
}

html[data-shell="mobile"] #map-sidebar .leaflet-sidebar-tabs > ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100% !important;
  height: auto !important;
  margin: 0;
  padding: 0;
  list-style: none;
}

html[data-shell="mobile"] #map-sidebar .leaflet-sidebar-tabs > ul > li {
  flex: 1 1 0;
  height: 48px;
  min-width: 48px;
}

html[data-shell="mobile"] #map-sidebar.collapsed .leaflet-sidebar-tabs > ul > li {
  flex: 0 0 48px;
  width: 48px;
  min-width: 48px;
}

html[data-shell="mobile"] #map-sidebar .leaflet-sidebar-content {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(60dvh - 48px - 0.75rem);
  width: 100% !important;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

html[data-shell="mobile"] #map-sidebar .leaflet-sidebar-header {
  padding: 0 1rem;
  padding-right: 3rem;
  position: relative;
}

html[data-shell="mobile"] #map-sidebar .leaflet-sidebar-close,
html[data-shell="mobile"] #map-sidebar.leaflet-sidebar-right .leaflet-sidebar-close,
html[data-shell="mobile"] #map-sidebar.leaflet-sidebar-left .leaflet-sidebar-close {
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  width: 44px;
  height: 44px;
}

/* Offenes Sheet: Leaflet-Controls am unteren Rand ausblenden (liegen sonst unter dem Sheet) */
html[data-shell="mobile"] .map-canvas:has(#map-sidebar:not(.collapsed)) .leaflet-bottom {
  display: none;
}

html[data-shell="mobile"] #map-sidebar .map-sidebar-close-icon {
  transform: rotate(90deg); /* Pfeil zeigt nach unten: Sheet schließen */
}

html[data-shell="mobile"] #map-sidebar #map-trips-panel {
  font-size: 1rem;
  padding: 0.75rem 0.85rem calc(1rem + env(safe-area-inset-bottom, 0px));
}

html[data-shell="mobile"] #map-sidebar #park-panel,
html[data-shell="mobile"] #map-sidebar #map-bookmarks-panel {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

html[data-shell="mobile"] #map-sidebar .park-infographic-body .park-actions .btn,
html[data-shell="mobile"] #map-sidebar #map-trips-panel .btn,
html[data-shell="mobile"] #map-sidebar #map-bookmarks-panel .btn-sm {
  min-height: 44px;
}

html[data-shell="mobile"] .map-trip-play {
  width: 2.75rem;
  height: 2.75rem;
}

html[data-shell="mobile"] .map-trip-playback {
  left: max(0.65rem, env(safe-area-inset-left, 0px));
  right: max(0.65rem, env(safe-area-inset-right, 0px));
  top: auto;
  bottom: calc(var(--mobile-tabbar-total, 60px) + 5.25rem);
  width: auto;
  max-width: none;
}

html[data-shell="mobile"] .map-trip-playback-info {
  max-height: min(24rem, calc(100dvh - var(--header-total-height, 4rem) - var(--map-filter-height, 52px) - var(--mobile-tabbar-total, 60px) - 9rem));
}

html[data-shell="mobile"] .map-trip-playback-title {
  font-size: 1.4rem;
}

html[data-shell="mobile"] .map-trip-playback-kicker {
  font-size: 0.88rem;
}

html[data-shell="mobile"] .map-trip-playback-meta {
  font-size: 0.98rem;
}

html[data-shell="mobile"] .map-trip-playback-note {
  font-size: 0.95rem;
}

html[data-shell="mobile"] .map-trip-playback.has-trip-playback-media {
  width: calc(100% - 1rem);
  left: 0.5rem;
  right: 0.5rem;
}

html[data-shell="mobile"] .map-trip-playback-photo {
  width: min(78vw, 18rem);
  max-height: min(36vh, 16rem);
}

html[data-shell="mobile"] .map-trip-playback-media:has(.map-trip-playback-photo:only-child) .map-trip-playback-photo {
  width: 100%;
  max-height: min(40vh, 18rem);
}

html[data-shell="mobile"] .trip-stop-image-item {
  width: 4rem;
  height: 4rem;
}

/* ---------- Reisen (trips.html) ---------- */

html[data-shell="mobile"] .tracker-grid-trips {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

html[data-shell="mobile"] .trips-split-handle {
  display: none;
}

html[data-shell="mobile"] body[data-page="trips"] .tracker-grid-trips > .tracker-panel:first-child {
  min-width: 0;
  max-width: none;
}

html[data-shell="mobile"] .trips-map {
  height: 50dvh;
  min-height: 50dvh;
}

html[data-shell="mobile"] .trips-help-btn {
  width: 2.5rem;
  height: 2.5rem;
}

html[data-shell="mobile"] .trips-editor-head {
  flex-wrap: wrap;
}

html[data-shell="mobile"] .trip-stop-handle {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.6rem;
  gap: 4px;
}

html[data-shell="mobile"] .trip-saved-expand,
html[data-shell="mobile"] .trip-note-expand {
  width: 2.5rem;
  height: 2.5rem;
}

html[data-shell="mobile"] .trip-note-popover--tablet {
  width: min(100vw - 1rem, 52rem);
  max-height: 92vh;
  padding: 0.85rem;
}

html[data-shell="mobile"] .trip-note-popover--tablet .write-tablet-editor,
html[data-shell="mobile"] .trip-note-popover--tablet .trip-note-popover-input {
  min-height: min(58vh, 20rem);
}

html[data-shell="mobile"] .trip-saved-card input[type="checkbox"] {
  width: 1.35rem;
  height: 1.35rem;
}

html[data-shell="mobile"] .trip-stop-item {
  gap: 0.4rem;
}

html[data-shell="mobile"] .trip-stop-item .btn-sm,
html[data-shell="mobile"] .trip-stop-extra-row .btn {
  min-height: 44px;
  height: auto;
}

html[data-shell="mobile"] .trip-stop-edit-row .trip-stop-date-field {
  max-width: none;
}

html[data-shell="mobile"] .trip-park-search-row,
html[data-shell="mobile"] .trip-stop-extra-row {
  grid-template-columns: 1fr;
}

/* ---------- Trip-Planer (trip-planner.html) ---------- */

html[data-shell="mobile"] body[data-page="planner"] .tracker-grid-2 {
  grid-template-columns: 1fr;
}

html[data-shell="mobile"] body[data-page="planner"] #planner-map {
  height: min(60dvh, 480px) !important; /* Inline-Höhe 480px überschreiben */
  min-height: 18rem;
}

html[data-shell="mobile"] body[data-page="planner"] .tracker-form label {
  flex: 1 1 calc(50% - 0.5rem);
  min-width: 8.5rem;
}

html[data-shell="mobile"] body[data-page="planner"] .tracker-form .btn {
  flex: 1 1 100%;
  min-height: 44px;
}