/**
 * Layout Primitives - Admin Interface
 *
 * Mobile-First Grid Layout mit progressiver Verbesserung für Tablet/Desktop.
 */

@layer layout {
    /**
     * Main Admin Layout Grid
     *
     * Mobile: Stacked (header, sidebar, content)
     * Tablet+: Side-by-side (sidebar + header/content)
     */
    .admin-layout {
        display: grid;
        min-height: 100vh;

        /* Mobile Layout (default) */
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "header"
            "sidebar"
            "content";

        /* Tablet+ Layout (768px+) */
        @media (min-width: 768px) {
            grid-template-columns: var(--sidebar-width, var(--spacing-sidebar)) 1fr;
            grid-template-rows: auto 1fr;
            grid-template-areas:
                "sidebar header"
                "sidebar content";
        }

        /* Wide Screen Layout (1440px+) */
        @media (min-width: 1440px) {
            grid-template-columns: var(--sidebar-width, var(--spacing-sidebar-wide)) 1fr;
        }
    }


    /**
     * Sidebar Area - Grid Positioning Only
     * 
     * Note: Detailed sidebar styling is in _sidebar.css component file.
     * This only defines grid positioning for the layout system.
     */
    .admin-sidebar {
        grid-area: sidebar;
    }

    /**
     * Header Area
     * 
     * Note: Detailed header styling is in _header.css component file.
     * This only defines grid positioning and basic layout.
     */
    .admin-header {
        grid-area: header;
    }

    /**
     * Content Area
     * 
     * Note: Detailed content styling is in _content.css component file.
     * This only defines grid positioning.
     */
    .admin-content {
        grid-area: content;
    }

    /**
     * Mobile Menu Overlay
     *
     * Backdrop für off-canvas Sidebar auf Mobile.
     */
    .admin-mobile-overlay {
        display: none;

        @media (max-width: 767px) {
            &[data-mobile-menu-open="true"] {
                display: block;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: oklch(0% 0 0 / 0.5);
                z-index: calc(var(--z-sidebar) - 1);
                backdrop-filter: blur(2px);
            }
        }
    }

    /**
     * Skip Link (Accessibility)
     */
    .admin-skip-link {
        position: absolute;
        top: -999px;
        left: -999px;
        z-index: var(--z-toast);
        padding: var(--spacing-sm) var(--spacing-md);
        background-color: var(--accent-primary);
        color: white;
        text-decoration: none;
        border-radius: var(--radius-md);

        &:focus {
            top: var(--spacing-sm);
            left: var(--spacing-sm);
        }
    }

    /**
     * Container Width Utilities
     */
    .admin-container {
        width: 100%;
        max-width: var(--container-mobile);
        margin: 0 auto;
        padding: 0 var(--spacing-md);

        @media (min-width: 768px) {
            max-width: var(--container-tablet);
        }

        @media (min-width: 1024px) {
            max-width: var(--container-desktop);
        }

        @media (min-width: 1440px) {
            max-width: var(--container-wide);
        }
    }

    .admin-container--narrow {
        max-width: 960px;
    }

    .admin-container--wide {
        max-width: 100%;
    }
}