/* ========================================================================
   ABAN — DESKTOP LAYOUT OVERRIDES
   Applies only to desktop-class viewports (>= 1200px).
   Desktop-specific rules are isolated here so tablet/mobile remain intact.
   ======================================================================== */

/* Main action bar: dynamic 5/6-button grid after removal of daily-data action. */
.action-buttons {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)) !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
}

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

.action-buttons .custom-btn i {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    display: inline-grid !important;
    place-items: center !important;
    margin: 0 !important;
}

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

/* Map controls: zoom upper-left; search immediately to its right. */
.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: 340px !important;
    min-width: 0 !important;
    max-width: 340px !important;
    margin: 0 !important;
    z-index: 1002 !important;
    box-sizing: border-box !important;
}

/* Desktop layer selector: compact labelled trigger at upper-right.
   The standard list remains unchanged after expansion. */
.leaflet-top.leaflet-right .leaflet-control-layers,
.leaflet-control-layers {
    min-width: 0 !important;
    width: auto !important;
    max-width: 290px !important;
    margin-top: 10px !important;
    margin-right: 10px !important;
    clear: both !important;
}

.leaflet-control-layers:not(.leaflet-control-layers-expanded) {
    display: flex !important;
    flex-direction: row !important;
    direction: rtl !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: rgba(255,255,255,.97) !important;
    border-radius: 11px !important;
}

.leaflet-control-layers:not(.leaflet-control-layers-expanded) .leaflet-control-layers-toggle {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
}

.aban-layer-control-title {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 0 10px 0 12px !important;
    border: 0 !important;
    border-right: 1px solid rgba(90,116,134,.16) !important;
    background: transparent !important;
    color: #314b5c !important;
    font-family: inherit !important;
    font-size: .92rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

.leaflet-control-layers-expanded .aban-layer-control-title {
    display: none !important;
}

.leaflet-control-layers-expanded {
    width: 270px !important;
    min-width: 244px !important;
    max-width: 290px !important;
}

/* When the point forecast opens, JS moves the legend to the opposite bottom
   corner. Keep its compact trigger clear of the popup. */
.aban-map-legend {
    max-width: 176px !important;
}


/* ========================================================================
   2026-09-29 final desktop polish
   - reserve clear top/bottom corridors for map controls and legend;
   - keep popup vertically scrollable instead of moving the legend;
   - give the custom-point action extra width while keeping all labels clean.
   ======================================================================== */

.action-buttons {
    grid-template-columns: .82fr .92fr 1.34fr 1.08fr 1fr .90fr !important;
    gap: 8px !important;
}

.action-buttons .custom-btn,
.action-buttons #customPointBtn,
.action-buttons #floodAreaBtn {
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 7px 7px !important;
    gap: 5px !important;
    overflow: hidden !important;
}

.action-buttons .custom-btn i,
.action-buttons #customPointBtn i,
.action-buttons #floodAreaBtn i {
    width: 27px !important;
    height: 27px !important;
    flex: 0 0 27px !important;
    font-size: .88rem !important;
}

.action-buttons .custom-btn span,
.action-buttons #customPointBtn span,
.action-buttons #floodAreaBtn span {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-inline: 1px !important;
    font-size: .77rem !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}

/* If force-update is not rendered, rebalance the five remaining actions. */
@supports selector(.action-buttons:has(*)) {
    .action-buttons:not(:has(#updateDataBtn)) {
        grid-template-columns: .88fr .98fr 1.38fr 1.06fr .92fr !important;
    }
}

/* Keep the forecast sheet clear of zoom/search/layers above and the
   rainfall/discharge legend below. The content area already owns vertical
   scrolling, so no information is lost. */
.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% - 170px) !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;
    overscroll-behavior: contain !important;
}

/* ABAN v1.7.0: expanded grouped raster/vector catalogue. */
.leaflet-control-layers-expanded {
    width: 305px !important;
    min-width: 285px !important;
    max-width: 320px !important;
}