/* =========================================================
   Map tab: full-screen on mobile/tablet
   Keeps desktop unchanged while letting the map sit behind
   the fixed lower navigation.
   ========================================================= */

@media (max-width: 1100px) {
  body[data-active-tab="family"] {
    overflow: hidden !important;
  }

  body[data-active-tab="family"] .main-layout {
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body[data-active-tab="family"] #familyTab.app-tab-panel.active,
  body[data-active-tab="family"] #familyTab.active {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 850 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  body[data-active-tab="family"] #familyTab .family-map-only-panel,
  body[data-active-tab="family"] #familyTab .family-panel,
  body[data-active-tab="family"] #familyTab .full-page-panel {
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body[data-active-tab="family"] #familyTab .family-map-only-layout,
  body[data-active-tab="family"] #familyTab .family-content-grid {
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body[data-active-tab="family"] #familyTab .family-map-card-full,
  body[data-active-tab="family"] #familyTab .family-map-card {
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  body[data-active-tab="family"] #familyTab .family-map-card-header {
    display: none !important;
  }

  body[data-active-tab="family"] #familyTab .family-map-preview,
  body[data-active-tab="family"] #familyTab #familyLeafletMap,
  body[data-active-tab="family"] #familyTab .leaflet-container {
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body[data-active-tab="family"] #familyTab .leaflet-control-container {
    z-index: 870 !important;
  }

  body[data-active-tab="family"] .mobile-bottom-nav {
    z-index: 1200 !important;
  }
}