/*
 * Frame of a back office page — Figma "Back office" (4683:631).
 *
 * Two columns: the navigation rail on the left, and a column holding the top bar and the content.
 * The rail is the scrolling reference of the screen — it stays put while the content scrolls under
 * it, which is why the frame is a row and not the single column the portal uses.
 *
 * The geometry of the maquette, read on the 1920px canvas: a 380px rail, then 16px of gutter around
 * the top bar, then a content block whose text starts 40px from the rail. So the column carries the
 * 16px and the content block the remaining 24px, and no vertical gap separates the two — the
 * content frame of the maquette starts exactly where the top bar ends.
 */

.mo-admin {
    background-color: var(--mo-surface-default-white);
}

.mo-admin__frame {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

/* Column of the top bar and the content. `min-width: 0` lets a wide table scroll inside it
 * instead of stretching the frame and pushing the rail off-screen. */
.mo-admin__column {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    padding: var(--mo-spacing-xs);
}

.mo-admin__content {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    gap: var(--mo-spacing-md);
    padding: var(--mo-spacing-sm);
}

@media (min-width: 1440px) {
    .mo-admin__frame {
        flex-direction: row;
    }
}