/* Patch 2026-08-02
   1) Pencarian berada tepat di atas lima menu analisis.
   2) Dock tablet/mobile memakai dua baris agar tidak bertindihan.
   3) Gaya pemilihan DEM manual langsung pada peta. */

@media (min-width: 1025px) {
    .mobile-search-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        position: fixed !important;
        z-index: 1985 !important;
        left: calc(18px + env(safe-area-inset-left, 0px)) !important;
        right: auto !important;
        bottom: calc(148px + env(safe-area-inset-bottom, 0px)) !important;
        width: 286px !important;
        min-width: 286px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 16px !important;
        border: 1px solid rgba(148, 163, 184, .34) !important;
        border-radius: 15px !important;
        color: #075985 !important;
        background: rgba(255, 255, 255, .97) !important;
        box-shadow: 0 12px 30px rgba(15, 23, 42, .17), inset 0 1px 0 rgba(255,255,255,.9) !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        font: 850 12px/1 Inter, system-ui, sans-serif !important;
    }

    .mobile-search-toggle::before,
    .mobile-search-toggle::after {
        content: none !important;
    }

    body.search-open .mobile-search-toggle {
        color: #fff !important;
        border-color: transparent !important;
        background: linear-gradient(135deg, #0369a1, #0891b2) !important;
    }

    .analysis-icon-rail {
        left: calc(18px + env(safe-area-inset-left, 0px)) !important;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .quick-search {
        top: auto !important;
        left: calc(18px + env(safe-area-inset-left, 0px)) !important;
        right: auto !important;
        bottom: calc(204px + env(safe-area-inset-bottom, 0px)) !important;
        width: min(420px, calc(100vw - 36px)) !important;
        max-height: calc(100dvh - 228px) !important;
    }
}

@media (max-width: 1024px) {
    :root {
        --ui-dock-height: 118px !important;
        --ui-dock-space: calc(var(--ui-dock-height) + var(--ui-safe-bottom) + 10px) !important;
        --ui-panel-bottom: var(--ui-dock-space) !important;
    }

    .responsive-menu-dock {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        grid-template-rows: 43px 50px !important;
        align-items: stretch !important;
        gap: 6px !important;
        min-height: var(--ui-dock-height) !important;
        overflow: visible !important;
    }

    .responsive-menu-button[data-menu="search"] {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 43px !important;
        justify-self: stretch !important;
    }

    .responsive-menu-button:not([data-menu="search"]) {
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 50px !important;
        padding: 6px !important;
        gap: 0 !important;
    }

    .responsive-menu-button:not([data-menu="search"]) > span:not(.rui-icon) {
        display: none !important;
    }

    .responsive-menu-button:not([data-menu="search"]) .rui-icon {
        width: 31px !important;
        height: 31px !important;
        flex: 0 0 31px !important;
        font-size: 15px !important;
    }
}

@media (max-width: 480px) {
    .responsive-menu-dock {
        left: calc(5px + var(--ui-safe-left)) !important;
        right: calc(5px + var(--ui-safe-right)) !important;
        padding: 6px !important;
        gap: 4px !important;
    }

    .responsive-menu-button:not([data-menu="search"]) {
        border-radius: 11px !important;
    }
}

body.dem-map-select-mode #map,
body.dem-map-select-mode .leaflet-container {
    cursor: crosshair !important;
}

#demExportMapPickButton.is-active {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #d97706, #ea580c) !important;
}

.dem-map-select-banner {
    position: fixed;
    z-index: 2050;
    top: calc(88px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: min(560px, calc(100vw - 24px));
    padding: 11px 48px 11px 15px;
    border: 1px solid rgba(14, 116, 144, .28);
    border-radius: 15px;
    color: #0f172a;
    background: rgba(255,255,255,.97);
    box-shadow: 0 16px 38px rgba(15,23,42,.22);
    font: 750 12px/1.35 Inter, system-ui, sans-serif;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.dem-map-select-banner button {
    position: absolute;
    right: 8px;
    top: 7px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: #dc2626;
    font-weight: 900;
    cursor: pointer;
}

.dem-footprint-tooltip {
    border: 0 !important;
    border-radius: 9px !important;
    color: #fff !important;
    background: rgba(15, 23, 42, .94) !important;
    box-shadow: 0 8px 22px rgba(15,23,42,.25) !important;
    font: 750 11px/1.25 Inter, system-ui, sans-serif !important;
}

.dem-footprint-tooltip::before {
    border-top-color: rgba(15, 23, 42, .94) !important;
}