/* Responsive layout.
   Loaded after the inline <style> blocks in index.html so these rules win.
   "Compact" = viewport ≤ 768px, whether a phone or a narrowed desktop window. */

/* ── Page frame: header / map / footer stack that always fills the viewport ── */
body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh; /* excludes mobile browser toolbars */
}

.header,
.footer,
.mobile-footer {
    flex: none;
}

.main-container {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

/* ── Header: title shrinks with an ellipsis instead of pushing controls off-screen ── */
.header .row {
    flex-wrap: nowrap;
}

.header .row > .col-auto:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

/* Map-type buttons and layer checkboxes stay right-aligned however many checkboxes there are;
   beyond 60% of the header width the checkboxes wrap onto another line instead of squeezing the title */
.header .row > .col-auto:last-child {
    flex: none;
    max-width: 60%;
}

.header .row > .col-auto:last-child,
.province-layer-toggle {
    text-align: right;
}

.header .map-controls .map-type-btn:last-child {
    margin-right: 0;
}

/* Desktop: one header row — layer checkboxes, then the map-type control pinned rightmost.
   Extra checkboxes wrap inside their own box, to the left of the control. */
@media (min-width: 769px) {
    .header .row > .col-auto:last-child {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
    }

    .header .map-controls {
        order: 2;
        flex: none;
    }

    .province-layer-toggle {
        order: 1;
        min-width: 0;
    }

    .search-expanded-content {
        min-width: 260px !important;
    }
}

.header h1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Filter buttons: anchored to the map's top-right corner ── */
.search-container {
    top: 4px;
    right: 20px;
    bottom: auto;
    left: auto;
}

/* ── Footer: a slim 24px ribbon; side columns keep their text, the long middle note truncates ── */
.footer {
    padding: 0 !important;
}

.footer .row {
    flex-wrap: nowrap;
    min-height: 24px !important;
}

.footer p {
    line-height: 24px !important;
}

.footer .row > .col-3 {
    flex: none;
    width: auto;
}

.footer .row > .col-6 {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    justify-content: center;
    text-align: center !important;
}

/* ── Compact layout ── */
@media (max-width: 768px) {

    .header .container-fluid {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Full title, wrapped rather than cut off, with the logo always shown (not nowrap+ellipsis,
       which clipped "Hydropower Projects Map - Nepal" against the header's right-hand controls). */
    .header h1 {
        font-size: 13px !important;
        white-space: normal !important;
        overflow: visible !important;
        line-height: 1.25 !important;
    }

    .header h1 svg {
        display: inline-block !important;
    }

    .header .row {
        gap: 6px !important;
    }

    .map-type-btn {
        margin: 0 1px;
    }

    .header .map-controls {
        margin-bottom: 5px;
    }

    /* Mobile footer sits in the page flow instead of floating over the map */
    .mobile-footer {
        display: flex !important;
        position: static !important;
        height: 18px !important;
    }

    /* Filter buttons: top-right of the map, panels open to the left */
    .search-container {
        top: 8px !important;
        right: 8px !important;
        bottom: auto !important;
        left: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .search-row-layout {
        padding-top: 5px !important;
    }

    .search-button[data-search="river"],
    .search-button[data-search="protectedarea"],
    .search-button[data-search="basin"] {
        margin-top: 0 !important;
    }

    .search-expanded-content {
        left: auto !important;
        right: 100% !important;
        margin-left: 0 !important;
        margin-right: 6px !important;
        width: 240px !important;
        min-width: 0 !important;
        max-width: calc(100vw - 80px) !important;
    }

    /* Legend: bottom-left, clear of the zoom control and the filter buttons */
    .legend {
        top: auto !important;
        bottom: 8px !important;
        left: 8px !important;
        right: auto !important;
        max-width: calc(100vw - 80px) !important;
        max-height: calc(100% - 96px) !important;
        overflow-y: auto !important;
    }

    .legend.minimized {
        width: auto !important;
        min-width: 0 !important;
        max-height: none !important;
    }

    /* Project details panel (styles injected at runtime) */
    .project-panel {
        top: 64px !important;
        width: calc(100vw - 16px) !important;
        max-width: 350px !important;
        min-width: 0 !important;
        max-height: calc(100dvh - 110px) !important;
    }

    .project-panel.show {
        right: 8px !important;
    }
}

/* Very small phones: shrink the title and logo a little further rather than dropping the logo */
@media (max-width: 380px) {
    .header h1 {
        font-size: 11.5px !important;
    }

    .header h1 svg {
        height: 1.1em !important;
        margin-right: 5px !important;
    }
}

/* Short viewports (landscape phones, short windows): tighter filter buttons */
@media (max-height: 500px) {
    .search-row-layout {
        gap: 3px !important;
        padding: 3px !important;
    }

    .search-row-layout .search-button {
        height: 32px !important;
    }
}