/* v2 polish for map detail. Shared rules live in /css/map-detail.css. */

.map-detail-hub,
.map-settings-drawer,
.map-spawn-report-popup-card {
    background: var(--v2-surface-1);
    border-color: var(--v2-border);
    border-radius: var(--v2-radius-lg);
}

/* v1 `.map-detail-page` padding is for classic `.main-content`. Do not inset the v2 shell. */
.v2-main.map-detail-page {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}

.v2-main.map-detail-page.is-fill > .v2-content {
    padding-top: var(--v2-space-2);
    padding-bottom: var(--v2-space-2);
}

.map-detail-hub .map-detail-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    position: static;
    margin: 0;
    padding: 6px 10px;
    background: var(--v2-surface-1);
    border-bottom: 1px solid var(--v2-border);
}

.map-detail-hub .map-detail-back {
    margin: 0;
    padding: 0;
    flex: none;
    font-size: 0.82rem;
    white-space: nowrap;
    color: var(--v2-text-muted);
    text-decoration: none;
}

.map-detail-hub .map-detail-back:hover {
    color: var(--v2-text);
    text-decoration: underline;
}

.map-detail-hub .map-page-tabs {
    margin: 0;
    flex: 1 1 200px;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.map-detail-hub .map-page-tab {
    flex: 0 0 auto;
    max-width: 11.5rem;
    min-width: 0;
    overflow: hidden;
}

.map-detail-hub .map-page-tab img,
.map-detail-hub .map-page-tab-remove,
.map-detail-hub .map-page-add-tile {
    flex-shrink: 0;
}

.map-detail-hub .map-page-tab-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v2-main.map-detail-page .v2-topbar {
    height: auto;
    min-height: var(--v2-topbar-h);
    flex-wrap: wrap;
    row-gap: 6px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.v2-main.map-detail-page .v2-topbar-title {
    flex: 1 1 10rem;
}

.v2-main.map-detail-page .v2-topbar-actions {
    flex: 1 1 auto;
    justify-content: flex-end;
    flex-wrap: wrap;
    min-width: 0;
}

.v2-main.map-detail-page .v2-topbar-actions .map-zoom-row {
    margin: 0;
    gap: 6px;
}

.v2-main.map-detail-page .v2-topbar-actions .map-zoom-row input[type="range"] {
    width: 120px;
    max-width: 28vw;
}

.v2-main.map-detail-page .v2-topbar-actions .map-present-btn {
    flex: none;
}

.map-detail-hub .map-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
}

.v2-main.is-fill .map-detail-hub {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.v2-main.is-fill .map-detail-header,
.v2-main.is-fill .map-page-add-panel {
    flex: none;
}

.v2-main.is-fill .map-detail-layout {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.v2-main.is-fill .map-detail-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.v2-main.is-fill .map-zoom-scroll {
    flex: 1 1 0;
    min-height: 160px;
}

.v2-main.is-fill .map-detail-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.v2-main.is-fill .map-detail-info-panel {
    position: static;
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
}

@media (max-width: 768px) {
    .v2-main.map-detail-page {
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: calc(var(--v2-bottombar-h) + env(safe-area-inset-bottom, 0px));
    }

    .map-detail-hub .map-detail-header {
        margin: 0;
        padding: 6px 8px;
    }
}

@media (max-width: 767px) {
    .map-detail-header {
        flex-direction: row;
        align-items: center;
    }

    .map-page-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 900px) {
    .v2-main.is-fill .map-detail-layout {
        overflow: auto;
    }

    .v2-main.is-fill .map-zoom-scroll {
        flex: 0 0 auto;
        height: min(55vh, 480px);
        min-height: 220px;
    }

    .v2-main.is-fill .map-detail-side,
    .v2-main.is-fill .map-detail-info-panel {
        flex: none;
        overflow: visible;
        max-height: none;
    }
}