/**
 * Explorer Page Styles
 * Handles responsive split view, draggable divider, and mobile-first layout
 */

/* ================================
   Global Container & Paper Cleanup
   ================================ */

#explorer-container {
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
}

/* Remove all Paper styling from explorer */
#explorer-container .mantine-Paper-root {
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* ================================
   Mobile Filter Controls Centering
   ================================ */

/* Center filter controls on mobile */
@media (max-width: 1023px) {
    #explorer-container .mantine-Group-root {
        justify-content: center !important;
        flex-wrap: wrap;
    }
}

/* ================================
   Split View Layout
   ================================ */

#explorer-split-container {
    display: flex;
    width: 100%;
    gap: 0;
    min-height: 400px;
    flex: 1 1 auto;
    overflow: hidden;
}

/* Desktop: Fixed height calculation */
@media (min-width: 1280px) {
    #explorer-split-container {
        height: calc(100vh - 350px);
    }
}

/* Mobile: Give explicit height */
@media (max-width: 1023px) {
    #explorer-split-container {
        height: auto;
        flex-direction: column;
    }
}

/* Grid and map containers */
#explorer-grid-container {
    flex: 1 1 40%;
    min-width: 250px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

#explorer-grid-container .mantine-Paper-root {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

#explorer-grid-container .mantine-Stack-root {
    flex: 1 1 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0 !important;
}

#explorer-ag-grid-wrapper {
    flex: 1 1 auto;
    display: flex;
    width: 100%;
    overflow: hidden;
    min-height: 0;
}

#explorer-grid-container .ag-theme-alpine {
    flex: 1 1 100%;
    width: 100%;
    height: 100%;
}

#explorer-map-container {
    flex: 1 1 60%;
    min-width: 250px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: visible;
}

/* Draggable divider */
#explorer-divider {
    width: 8px;
    cursor: col-resize;
    background-color: var(--mantine-color-gray-3);
    flex-shrink: 0;
    transition: background-color 150ms ease;
    user-select: none;
    touch-action: none;
}

#explorer-divider:hover,
#explorer-divider.dragging {
    background-color: var(--mantine-color-blue-5);
    box-shadow: inset 0 0 8px rgba(59, 130, 246, 0.3);
}

/* Paper containers inside flex - fully expand */
#explorer-grid-container .mantine-Paper-root,
#explorer-map-container .mantine-Paper-root {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    width: 100%;
    border: none;
    padding: 0;
    box-shadow: none;
}

#explorer-grid-container .mantine-Stack-root,
#explorer-map-container .mantine-Stack-root {
    flex: 1 1 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* AG Grid container - fill all available space */
#explorer-grid-container .mantine-Stack-root > div:last-child {
    flex: 1 1 100%;
    overflow: hidden;
}

/* Map wrapper inside stack - fill all remaining space */
#explorer-map-container .mantine-Stack-root > #explorer-leaflet-map-wrapper {
    flex: 1 1 100%;
    overflow: hidden;
}

/* AG Grid height adjustment for flex - always fully expanded */
#explorer-grid-container .ag-theme-alpine {
    flex: 1 1 100%;
    min-height: 300px;
    height: 100%;
    width: 100%;
    overflow: auto;
}

/* Map height adjustment for flex - match grid height */
#explorer-leaflet-map-wrapper {
    flex: 1 1 100%;
    position: relative;
    overflow: visible;
    height: 100%;
    width: 100%;
    min-height: 300px;
    padding: 0 !important;
    margin: 0 !important;
}

#explorer-leaflet-map {
    width: 100%;
    height: 100%;
    overflow: visible;
}

#explorer-leaflet-map-wrapper .leaflet-container {
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
}

#explorer-leaflet-map-wrapper .leaflet-pane {
    overflow: visible !important;
}

/* ================================
   Mobile-First Responsive Layout
   ================================ */

/* Mobile: Stack vertically, map FIRST */
@media (max-width: 1023px) {
    #explorer-split-container {
        flex-direction: column;
        height: auto;
        gap: 0;
        flex: 1 1 100%;
    }

    #explorer-map-container {
        order: -1;
        width: 100%;
        height: 60vh;
        min-height: 60vh;
        overflow: visible;
        flex: 0 0 60vh;
    }

    #explorer-grid-container {
        order: 0;
        width: 100%;
        height: auto;
        flex: 1 1 auto;
        min-height: 0;
    }

    #explorer-grid-container .mantine-Paper-root {
        height: auto;
        flex: none;
    }

    #explorer-grid-container .mantine-Stack-root {
        height: auto;
        flex: none;
    }

    #explorer-ag-grid-wrapper {
        flex: 1 1 auto;
        display: flex;
        width: 100%;
        min-height: 600px;
        height: 600px;
    }

    #explorer-grid-container .ag-theme-alpine {
        flex: 1 1 100%;
        width: 100%;
    }

    #explorer-map-container .mantine-Group-root {
        display: none;
    }

    #explorer-divider {
        display: none;
    }
}

/* Tablet: Side-by-side with responsive heights */
@media (min-width: 1024px) and (max-width: 1279px) {
    #explorer-split-container {
        height: calc(100vh - 350px);
        flex-direction: row;
    }

    #explorer-grid-container {
        flex: 0 0 35%;
        order: 0;
        padding: 0 !important;
        margin: 0 !important;
    }

    #explorer-map-container {
        flex: 0 0 65%;
        order: 1;
        overflow: visible;
        padding: 0 !important;
        margin: 0 !important;
    }

    #explorer-divider {
        display: block;
    }
}

/* Desktop: Full split view with draggable divider */
@media (min-width: 1280px) {
    #explorer-split-container {
        height: calc(100vh - 350px);
    }

    #explorer-grid-container {
        flex: 1 1 auto;
    }

    #explorer-map-container {
        flex: 1 1 auto;
    }
}

/* ================================
   Map Layer Toggle Overlay (REMOVED - now in filter panel)
   ================================ */

.leaflet-top.leaflet-left {
    top: 60px;
    left: 10px;
}

.leaflet-control {
    margin: 0;
}

/* ================================
   Mobile Filter Row Adjustments
   ================================ */

@media (max-width: 768px) {
    /* Hide less important filter elements on very small screens */
    #explorer-split-container .mantine-Group-root {
        flex-wrap: wrap;
    }

    /* Stack checkboxes if needed */
    #explorer-split-container .mantine-Checkbox-wrapper {
        flex-shrink: 0;
    }

    /* Hide divider on tablets and phones */
    #explorer-split-container .mantine-Divider-vertical {
        display: none;
    }

    /* Make SegmentedControl responsive */
    #map-style-toggle {
        width: 100%;
    }
}

/* ================================
/* AG Grid styling handled by Mantine ag-theme-alpine */

/* ================================
   Map Container Adjustments
   ================================ */

#explorer-leaflet-map-wrapper {
    width: 100%;
    height: 100%;
}

/* Map header (Fields title + badge) */
#explorer-map-container .mantine-Group-root:first-child {
    padding: 0;
    flex-shrink: 0;
}

/* ================================
   Loading and Transition States
   ================================ */

#explorer-split-container.loading {
    opacity: 0.6;
    pointer-events: none;
}

#explorer-divider.dragging {
    z-index: 1001;
}

/* ================================
   Accessibility
   ================================ */

#explorer-divider:focus {
    outline: 2px solid var(--mantine-color-blue-5);
    outline-offset: -2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    #explorer-divider,
    #explorer-divider:hover {
        transition: none;
    }
}

/* ================================
   Print Styles
   ================================ */

/* Checkbox styling handled entirely by Mantine component props */

@media print {
    #explorer-divider {
        display: none;
    }

    #explorer-split-container {
        height: auto;
        flex-direction: column;
    }
}