/* ========================================================================
   ABAN — TABLET LAYOUT OVERRIDES
   Applies only to tablet-class viewports (576px–1199.98px).
   Tablet-specific rules are isolated here so desktop/mobile remain intact.
   ======================================================================== */

/* Six (or five) actions fit cleanly without horizontal clipping. */
.action-buttons {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
}

.action-buttons .custom-btn,
.action-buttons #customPointBtn,
.action-buttons #floodAreaBtn {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 52px !important;
    height: auto !important;
    padding: 7px 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    overflow: hidden !important;
}

.action-buttons .custom-btn i {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    margin: 0 !important;
}

.action-buttons .custom-btn span,
.action-buttons #customPointBtn span,
.action-buttons #floodAreaBtn span {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    line-height: 1.28 !important;
    text-align: center !important;
    font-size: .78rem !important;
}

.action-buttons #customPointBtn,
.action-buttons #floodAreaBtn {
    grid-column: auto !important;
    flex: none !important;
}

/* Map controls: zoom, then search on the upper-left. */
.leaflet-top.leaflet-left .leaflet-control-zoom {
    margin-top: 10px !important;
    margin-left: 10px !important;
    margin-right: 0 !important;
}

.map-stage > .aban-map-search,
.leaflet-container .aban-map-search {
    position: absolute !important;
    top: 10px !important;
    left: 58px !important;
    right: auto !important;
    width: clamp(190px, 38vw, 300px) !important;
    min-width: 0 !important;
    max-width: 300px !important;
    margin: 0 !important;
    z-index: 1002 !important;
    box-sizing: border-box !important;
}

/* Tablet keeps the compact icon-only layer trigger. */
.aban-layer-control-title { display: none !important; }

.leaflet-top.leaflet-right .leaflet-control-layers,
.leaflet-control-layers {
    min-width: 0 !important;
    width: auto !important;
    max-width: 260px !important;
    margin-top: 10px !important;
    margin-right: 10px !important;
    clear: both !important;
}

.leaflet-control-layers-expanded {
    width: min(244px, calc(100vw - 24px)) !important;
    min-width: min(220px, calc(100vw - 24px)) !important;
    max-width: 244px !important;
}

.aban-map-search-input {
    font-size: .79rem !important;
}

/* Point popup and legend get separate horizontal corridors. JS moves the
   legend to the corner opposite the popup; these widths prevent residual
   overlap even near the 576px tablet boundary. */
.aban-map-forecast-popup {
    width: min(400px, calc(100% - 190px)) !important;
    max-width: 400px !important;
}

.aban-map-forecast-popup.dock-left {
    left: 44px !important;
    right: auto !important;
}

.aban-map-forecast-popup.dock-right {
    right: 44px !important;
    left: auto !important;
}

.aban-map-legend {
    min-width: 118px !important;
    max-width: 136px !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
}

@media (max-width: 700px) {
    .map-stage > .aban-map-search,
    .leaflet-container .aban-map-search {
        width: clamp(180px, 36vw, 235px) !important;
        max-width: 235px !important;
    }

    .aban-map-forecast-popup {
        width: min(376px, calc(100% - 184px)) !important;
    }

    .aban-map-legend {
        max-width: 128px !important;
    }
}


/* ========================================================================
   2026-09-29 final tablet polish
   Popup stays inside a dedicated vertical corridor; legend remains at its
   normal bottom-right position and the popup body scrolls independently.
   ======================================================================== */
.aban-map-forecast-popup,
.aban-map-forecast-popup.dock-left,
.aban-map-forecast-popup.dock-right {
    top: 50% !important;
    bottom: auto !important;
    max-height: calc(100% - 150px) !important;
    transform: translateY(-50%) scale(.985) !important;
}

.aban-map-forecast-popup.is-open {
    transform: translateY(-50%) scale(1) !important;
}

.aban-map-forecast-popup-content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
}

/* A little extra separation from top controls at compact tablet heights. */
@media (max-height: 700px) {
    .aban-map-forecast-popup,
    .aban-map-forecast-popup.dock-left,
    .aban-map-forecast-popup.dock-right {
        max-height: calc(100% - 138px) !important;
    }
}

/* ABAN v1.7.0: grouped raster/vector catalogue remains scrollable on tablets. */
.leaflet-control-layers-expanded {
    width: min(280px, calc(100vw - 24px)) !important;
    min-width: min(245px, calc(100vw - 24px)) !important;
    max-width: 280px !important;
}
.leaflet-control-layers-list { max-height: 62vh !important; }