/* ============================================================================
   EXPLORER PAGE - Layout & Viewport Height
   ============================================================================
   Handles explorer page container sizing, flex layout, and height calculations
   for map, tabs, panels, and content areas
*/

/* ──────────────────────────────────────────────────────
   EXPLORER - Container & Viewport Layout
   ────────────────────────────────────────────────────– */

/* Explorer-specific: main page container with auto-height and scrolling */
.explorer-page {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: calc(100dvh - 90px);
}

/* Tabs root fills remaining space */
.explorer-page > .mantine-Tabs-root {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-height: none;
}

/* Active panel fills remaining tab space */
.explorer-page .mantine-Tabs-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: visible;
  width: 100%;
}

/* Map & table Paper fills its panel */
.explorer-page .mantine-Tabs-panel > .mantine-Paper-root {
  flex: 1;
  max-height: none;
  display: flex;
  flex-direction: column;
}

/* KPI subtabs: fill panel and make content scroll */
.explorer-page .mantine-Tabs-panel > .mantine-Tabs-root {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-height: none;
}

.explorer-page .mantine-Tabs-panel > .mantine-Tabs-root > .mantine-Tabs-list {
  flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────
   EXPLORER - Map & Table Heights
   ────────────────────────────────────────────────────– */

/* Specific sizing for map and table content - viewport + 300px */
.explorer-page .leaflet-container,
.explorer-page #explorer-map-container,
.explorer-page .ag-theme-alpine {
  height: calc(100dvh - 90px) !important;
  min-height: calc(100dvh - 90px) !important;
  width: 100% !important;
}

/* Mobile responsive: viewport-based height on small screens */
@media (max-width: 768px) {
  .explorer-page .leaflet-container,
  .explorer-page #explorer-map-container,
  .explorer-page .ag-theme-alpine {
    height: 80vh !important;
    min-height: 400px !important;
  }
}

/* Leaflet pseudo-fullscreen (iOS fallback — no native Fullscreen API) */
.leaflet-pseudo-fullscreen {
  position: fixed !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 99999 !important;
}

/* ──────────────────────────────────────────────────────
   EXPLORER - KPI Content Layout
   ────────────────────────────────────────────────────– */

.explorer-page #explorer-kpi-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* KPI content children should not stretch */
.explorer-page #explorer-kpi-content > * {
  height: auto !important;
  flex: none !important;
}

/* Mobile: prevent KPI cards from stretching */
@media screen and (max-width: 768px) {
  .explorer-page #explorer-kpi-content > .mantine-SimpleGrid-root > .mantine-Card-root {
    height: auto !important;
    min-height: auto !important;
    align-self: start !important;
  }

  .explorer-page .mantine-SimpleGrid-root {
    align-content: flex-start !important;
  }
  
  /* KPI content should scroll, not stretch cards */
  .explorer-page #explorer-kpi-content {
    flex: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* KPI content children should not stretch on mobile */
  .explorer-page #explorer-kpi-content > * {
    height: auto !important;
    flex: none !important;
    min-height: auto !important;
  }
}

/* ──────────────────────────────────────────────────────
   EXPLORER - Table (AG Grid) Layout
   ────────────────────────────────────────────────────– */

/* Paper Stack for table: flex container for Group + AgGrid */
.explorer-page .mantine-Tabs-panel > .mantine-Paper-root > .mantine-Stack-root {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Group with Columns/Export buttons doesn't shrink */
.explorer-page .mantine-Tabs-panel > .mantine-Paper-root > .mantine-Stack-root > .mantine-Group-root {
  flex-shrink: 0;
}

/* AgGrid wrapper fills its Stack parent */
.explorer-page .ag-theme-alpine {
  flex: 1;
  min-height: 0;
  overflow: hidden !important;
}

/* AG Grid body viewport needs explicit constraints */
.explorer-page .ag-root-wrapper {
  height: 100%;
  overflow: hidden;
}

.explorer-page .ag-body-viewport {
  min-height: 0;
}

/* Force AgGrid internals to show even if initially empty */
.explorer-page .ag-root-wrapper,
.explorer-page .ag-root-wrapper-body {
  height: 100% !important;
  min-height: 400px !important;
}

/* AG Grid paging panel - responsive layout */
.explorer-page .ag-paging-panel {
  height: auto;
  flex-wrap: wrap-reverse;
  row-gap: 1rem;
  padding: 0.25rem;
  align-items: center;
  justify-content: flex-end;
}

@media screen and (max-width: 768px) {
  .explorer-page .ag-paging-panel {
    justify-content: center;
  }
}

/* ──────────────────────────────────────────────────────
   EXPLORER - Tabs Layout (Mobile Responsive)
   ────────────────────────────────────────────────────– */

/* All explorer tabs: horizontal scroll on mobile */
@media screen and (max-width: 768px) {
  /* Main tabs (Map / Table / KPI) */
  .explorer-page .mantine-Tabs-list {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0 !important;
  }
  .explorer-page .mantine-Tabs-list::-webkit-scrollbar {
    display: none;
  }
  .explorer-page .mantine-Tabs-list .mantine-Tabs-tab {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 12px;
    padding: 6px 10px;
  }

  /* Mobile-specific panel sizing */
  .explorer-page .mantine-Tabs-panel {
    min-height: 600px !important;
    overflow: visible !important;
  }

  /* Override global project-card rules that bleed into explorer */
  .explorer-page .mantine-SimpleGrid-root .mantine-Paper-root {
    min-height: auto !important;
    justify-content: flex-start !important;
    margin-bottom: 0 !important;
  }
  .explorer-page .mantine-SimpleGrid-root .mantine-Card-root {
    height: auto !important;
    min-height: auto !important;
    align-self: start !important;
    margin-bottom: 0 !important;
  }

  /* Main tabs: smaller on mobile */
  .explorer-page > .mantine-Tabs-root > .mantine-Tabs-list .mantine-Tabs-tab {
    font-size: 12px;
    padding: 6px 10px;
  }
}

/* Mobile: title and text responsiveness */
@media screen and (max-width: 768px) {
  .explorer-page .mantine-Title-root {
    font-size: 16px !important;
  }
  .explorer-page .mantine-Text-root[data-c="dimmed"] {
    font-size: 11px !important;
  }

  /* KPI stat cards: tighter layout */
  .explorer-page .mantine-Card-root {
    padding: 10px !important;
    height: auto !important;
  }
  .explorer-page .mantine-Card-root .mantine-Text-root[data-fw="700"] {
    font-size: 16px !important;
  }
  
  /* KPI SimpleGrid should not stretch cards height */
  .explorer-page .mantine-SimpleGrid-root {
    align-items: flex-start !important;
  }
}