/* =============================================================================
   Desktop Layout Tokens (Epic 17 — Desktop Optimization)
   Responsive desktop breakpoints: Small (1024-1279), Standard (1280-1599), Large (1600+).
   Uses --layout-* namespace. Load after 3beez-tokens.css, before component CSS.
   ============================================================================= */

/* ── Base desktop layout tokens ───────────────────────────────────────────── */
:root {
    --layout-nav-width: 280px;
    --layout-nav-collapsed-width: 72px;
    --layout-header-height: 64px;
    --layout-content-max-width-text: 72ch;
    --layout-section-spacing: 32px;
    --layout-gutter: 40px; /* FigmaMake: md:px-[40px] on content + header */
}

/* ── 2-column grid: nav + content ─────────────────────────────────────────── */
@media (min-width: 1024px) {
    .app-shell {
        display: grid;
        grid-template-columns: auto 1fr;
        min-height: 100vh;
        height: 100vh;
        overflow: hidden;
    }

    /* Navigation sticky (full viewport height) */
    .app-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        flex-shrink: 0;
        z-index: 10;
    }

    /* Header sticky within content area */
    .app-header-cluster {
        position: sticky;
        top: 0;
        z-index: 5;
        background-color: var(--x-color-background);
        height: var(--layout-header-height);
    }

    /* Content area: full width with consistent gutter (FigmaMake: no max-width) */
    .app-content {
        width: 100%;
        padding: 0 var(--layout-gutter) var(--layout-gutter);
    }

    /* Text line length max for readability */
    .app-content p,
    .app-content li,
    .app-content .text-readable {
        max-width: var(--layout-content-max-width-text);
    }

    /* Section spacing */
    .app-content > section,
    .app-content > .dashboard-row-grid {
        margin-bottom: var(--layout-section-spacing);
    }
}

/* ── Desktop Small (1024-1279px) ──────────────────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1279px) {
    :root {
        --layout-nav-width: 240px;
        --layout-section-spacing: 24px;
        --layout-gutter: 24px;
    }
}

/* ── Desktop Standard (1280-1599px) ───────────────────────────────────────── */
@media (min-width: 1280px) and (max-width: 1599px) {
    :root {
        --layout-nav-width: 280px;
    }
}

/* ── Desktop Large (1600px+) ──────────────────────────────────────────────── */
@media (min-width: 1600px) {
    :root {
        --layout-nav-width: 320px;
    }
}