/* Dashboard - two-panel layout */

.dashboard {
    display: grid;
    grid-template-columns: var(--list-left-width, 1fr) var(--list-right-width, 1fr);
    height: 100vh;
    overflow: hidden;
}

/* 40/60 split - static, 500px minimum on the left.
   Used by single-task pages (signin, account) that omit .drag-divider. */
.dashboard.split-60 {
    grid-template-columns: minmax(500px, 2fr) 3fr;
}

/* Hide body scrollbar when dashboard is active */
body:has(.dashboard) {
    overflow: hidden;
}

/* Prevent text selection while dragging */
.dashboard.resizing {
    user-select: none;
    cursor: col-resize;
}

.dashboard.resizing .drag-divider {
    opacity: 1;
    background: #0078d4;
}

/* Left panel */
.dashboard-left {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100vh;
    container-type: inline-size;
    container-name: city-list;
}

/* Top bar - fixed at top of left panel */
.dashboard-left .top-bar {
    flex-shrink: 0;
}

/* Content - scrollable area below top bar. Scrollbar styling comes from
   .thin-scroll (applied in HTML). */
.dashboard-left .content {
    flex: 1;
    overflow-y: scroll;
    overflow-x: hidden;
}

/* Right panel - no panel-level scroll. Widgets mounted inside must manage
   their own scrolling on a header+content structure. */
.dashboard-right {
    position: relative;
    container-type: size;
    container-name: city-panel;
    height: 100vh;
    /* border-left: 1px solid #e0e0e0; */
}

/* Draggable divider - overlays left edge of right panel */
.drag-divider {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 10px;
    cursor: col-resize;
    background: transparent;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s;
}

.drag-divider:hover,
.drag-divider.dragging {
    opacity: 1;
    background: #0078d4;
}

/* Cover image - fills panel, crops to fit */
.dashboard .cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ─── Mobile: single-panel view, page-level scroll ─────────────
   Only applies when data-view is set (i.e. the actual dashboard
   widget). Other .dashboard pages - signin, account, etc. - are
   untouched. The list/detail switch is driven by the global menu
   bar at the top, so only that one bar's height is reserved.

   On mobile we drop the per-panel scroll containers and let the
   body scroll naturally - one long page instead of a header pinned
   above an internally-scrolling list, which is the expected pattern
   for thumb-driven browsing. */
@media (max-width: 900px) {
    /* Lift the desktop body lock so the page can scroll. The lock only matters
       when the dashboard's panels own their own scroll. */
    body:has(.dashboard[data-view]) {
        overflow: visible;
    }

    .dashboard[data-view] {
        grid-template-columns: 1fr;
        height: auto;
        min-height: calc(100dvh - var(--mobile-nav-height, 80px));
        margin-top: var(--mobile-nav-height, 80px);
        overflow: visible;
    }

    .dashboard[data-view] .dashboard-left,
    .dashboard[data-view] .dashboard-right {
        height: auto;
        overflow: visible;
    }

    /* container-type: size on the right panel pins it to its containing block's
       height. With page-scroll we want it to grow with its child, so drop the
       size container (no rules currently query city-panel anyway). */
    .dashboard[data-view] .dashboard-right {
        container-type: normal;
    }

    /* Inner scroll container becomes a passthrough - content flows into the page.
       clip-path replaces the desktop overflow: hidden at the top only: the brick
       layout in cities.css lifts the first card row by -100%/etc. of its own
       height, and without clipping that row would paint over the filter title
       and sets widget above. The negative bottom inset keeps the page scroll
       working - cards extending below still render. */
    .dashboard[data-view] .dashboard-left .content {
        overflow: visible;
        flex: none;
        clip-path: inset(0 0 -100vh 0);
    }

    .dashboard[data-view="list"] .dashboard-right {
        display: none;
    }

    .dashboard[data-view="city"] .dashboard-left {
        display: none;
    }

    .dashboard[data-view] .drag-divider {
        display: none;
    }

    /* split-60 pages (signin, account) have no data-view toggle - just collapse
       to the left panel and hide the right image column. */
    .dashboard.split-60 {
        grid-template-columns: 1fr;
    }

    .dashboard.split-60 .dashboard-right {
        display: none;
    }
}