/* Overrides apply only on mobile; desktop uses the original layout unchanged. */
@media screen and (max-width: 767px) {
    html,
    body,
    #bodyContainer {
        width: 100%;
        height: 100%;
    }

    #divHeader {
        position: relative;
        z-index: 1001;
        height: 118px !important;
        overflow: visible;
    }

    #header {
        height: 50px;
        min-height: 50px;
        background-image: url("../images/WVFT_Banner.png");
        background-size: 1200px 50px;
    }

    #header1,
    #menuTools,
    #tools,
    #overviewMap {
        display: none !important;
    }

    #menuButtonsBar {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        width: 100%;
        min-width: 0;
        height: 68px;
        overflow: visible;
        background: #1a6fb0;
    }

    #viewerTabs {
        display: flex;
        flex: 0 0 100%;
        height: 34px;
        margin: 0 !important;
    }

    #viewerTabs .btn {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        padding-right: 4px;
        padding-left: 4px;
    }

    #menuButtonsBar > .btn-group:nth-of-type(2) {
        display: flex;
        flex: 0 0 100%;
        height: 34px;
        margin: 0 !important;
    }

    #floodLayers,
    #refLayers,
    #baseLayers {
        float: none;
    }

    #floodLayers .dropdown-toggle,
    #refLayers .dropdown-toggle,
    #baseLayers .dropdown-toggle {
        height: 34px;
    }

    #map {
        height: 100vh !important;
        min-height: 100vh;
    }

    #sidePanel {
        top: 118px;
        max-width: 100vw;
        max-height: calc(100vh - 118px);
    }

    #floodInfoPanel {
        max-height: calc(100vh - 118px);
        overflow-y: auto;
    }

    body > .dropdown-menu.dropdown-menu-overlay {
        left: 4px !important;
        max-width: calc(100vw - 8px);
        max-height: calc(100vh - 126px);
        overflow: auto;
    }

    body > .dropdown-menu.dropdown-menu-overlay #floodGallery,
    body > .dropdown-menu.dropdown-menu-overlay #refGallery,
    body > .dropdown-menu.dropdown-menu-overlay #basemapGallery,
    body > .dropdown-menu.dropdown-menu-overlay .esri-basemap-gallery {
        width: calc(100vw - 10px) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 10px) !important;
    }
}

@media screen and (max-width: 480px) {
    #navHeaderLinks {
        display: none;
    }
}
/* Compact mobile search and map footer overrides. */
@media screen and (max-width: 767px) {
    #divHeader {
        height: 152px !important;
    }

    #menuButtonsBar {
        height: 102px;
    }

    #menuTools {
        display: block !important;
        flex: 0 0 100%;
        float: none !important;
        width: 100%;
        height: 34px;
        margin: 0 !important;
        padding: 1px 4px;
        background: #1a6fb0;
    }

    #menuTools > form {
        display: flex;
        float: none;
        width: 100%;
        margin: 0;
        padding: 0 !important;
    }

    #menuTools > form > div:first-child {
        flex: 0 0 92px;
        float: none;
    }

    #searchType {
        width: 92px;
    }

    #search_box {
        flex: 1 1 auto;
        float: none;
        width: auto !important;
        min-width: 0;
    }

    #divUserInput,
    #mainSearchText {
        width: 100% !important;
        min-width: 0;
    }

    #tools,
    #nav_info {
        display: none !important;
    }

    #divZoomSlider {
        display: none !important;
    }

    #scale_bar {
        position: fixed !important;
        left: 8px !important;
        bottom: 4px !important;
        z-index: 1000;
        margin: 0 !important;
    }

    #sidePanel {
        top: 152px;
        max-height: calc(100vh - 152px);
    }

    #floodInfoPanel {
        max-height: calc(100vh - 152px);
    }

    body > .dropdown-menu.dropdown-menu-overlay {
        max-height: calc(100vh - 160px);
    }
}
/* Centered layers and viewport-safe search panels. */
@media screen and (max-width: 767px) {
    #menuButtonsBar > .btn-group:nth-of-type(2) {
        justify-content: center;
    }

    #panelSearch {
        position: absolute !important;
        top: 152px !important;
        right: 4px !important;
        left: 4px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 8px) !important;
        max-height: calc(100vh - 156px) !important;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 2002;
    }

    #panelSearch .panel-collapse,
    #panelSearch .panel-body,
    #parcel_result,
    #coord_result,
    #gnis_result,
    #tabParcelSearch,
    #tabParcelResults {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    #panelSearch .row_style_1,
    #panelSearch .oneline_search {
        width: 100% !important;
        max-width: 100% !important;
    }

    #panelSearch .coord_type {
        width: 40%;
    }

    #panelSearch .coord_right {
        width: 60%;
        max-width: 60%;
    }

    #parcel_search_results,
    #gnis_search_results {
        width: 100% !important;
        max-width: 100% !important;
    }

    .ui-autocomplete {
        right: 4px;
        left: 4px !important;
        width: auto !important;
        max-width: calc(100vw - 8px) !important;
        max-height: 45vh;
        overflow-x: hidden;
        overflow-y: auto;
        box-sizing: border-box;
    }
}
/* Equal-width mobile Layer buttons. */
@media screen and (max-width: 767px) {
    #menuButtonsBar > .btn-group:nth-of-type(2) > #floodLayers,
    #menuButtonsBar > .btn-group:nth-of-type(2) > #refLayers,
    #menuButtonsBar > .btn-group:nth-of-type(2) > #baseLayers {
        flex: 1 1 0;
        width: 0;
    }

    #floodGallery > #floodLayers {
        display: block;
        width: 100% !important;
        min-width: 0;
    }

    #floodLayers > .btn-group,
    #refLayers > .btn-group,
    #baseLayers > .btn-group,
    #floodLayers .dropdown-toggle,
    #refLayers .dropdown-toggle,
    #baseLayers .dropdown-toggle {
        width: 100%;
    }
}
/* Visually separate the mobile Views and Layers groups. */
@media screen and (max-width: 767px) {
    #viewerTabs {
        padding: 2px;
        gap: 1px;
        background: #0b4f7a;
        box-sizing: border-box;
    }

    #menuButtonsBar > .btn-group:nth-of-type(2) {
        padding: 2px;
        gap: 1px;
        background: #527f9f;
        box-shadow: inset 0 2px 0 #ffc926;
        box-sizing: border-box;
    }

    #viewerTabs .btn,
    #floodLayers .dropdown-toggle,
    #refLayers .dropdown-toggle,
    #baseLayers .dropdown-toggle {
        height: 30px;
    }
}
/* Mobile flood-information popup. */
@media screen and (max-width: 767px) {
    #sidePanel {
        right: 4px !important;
        left: 4px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 8px) !important;
        background: transparent;
        z-index: 2000;
    }

    #floodInfoPanel {
        position: relative;
        float: none !important;
        width: 100% !important;
        padding-top: 34px;
        border: 1px solid #555 !important;
        border-radius: 5px;
        background: #fff !important;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
        box-sizing: border-box;
    }

    #floodInfoPanel::before {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 34px;
        padding: 7px 42px 6px 10px;
        content: "Flood Information";
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        line-height: 20px;
        background: #0b4f7a;
        box-sizing: border-box;
    }

    #sidePanel_close {
        position: absolute;
        top: 3px;
        right: 4px;
        z-index: 2;
        float: none !important;
        width: 28px !important;
        height: 28px !important;
        padding: 0 !important;
        color: #fff;
        font-size: 25px;
        line-height: 24px;
        text-align: center;
        background: transparent !important;
        border: 0;
    }

    #sidePanel_close > div {
        display: none !important;
    }

    #sidePanel_close::before {
        content: "\00d7";
    }
}