/* ── App Layout ─────────────────────────────────────────────
   Mobile-first: header top, main middle, sidebar bottom.
   Desktop (≥1024px): sidebar left column, header + main right.
───────────────────────────────────────────────────────── */

.app-layout {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.app-main {
    order: 1;
    flex: 1;
    width: 100%;
    max-width: 1920px;
}

@media (min-width: 1024px) {
    .app-layout {
        display: grid;
        grid-template-columns: var(--sidebar-width) 1fr;
        grid-template-rows: var(--header-height) 1fr;
        min-height: 100dvh;
    }

    .app-header {
        order: unset;
        grid-column: 2;
        grid-row: 1;
    }

    .app-main {
        order: unset;
        grid-column: 2;
        grid-row: 2;
    }
}