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

@layer admin-objects {
    /**
     * 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(--admin-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(--admin-sidebar-width-wide) 1fr;
        }
    }

    /**
     * Sidebar Area
     */
    .admin-sidebar {
        grid-area: sidebar;
        background-color: var(--admin-sidebar-bg);
        color: var(--admin-sidebar-text);

        /* Mobile: Hidden by default, shown via toggle */
        @media (max-width: 767px) {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            width: var(--admin-sidebar-width-mobile);
            max-width: 280px;
            transform: translateX(-100%);
            transition: transform var(--admin-transition-base);
            z-index: var(--admin-z-sidebar);
            overflow-y: auto;

            /* Mobile Menu Open State */
            &[data-mobile-menu-open="true"] {
                transform: translateX(0);
            }
        }

        /* Tablet+: Always visible */
        @media (min-width: 768px) {
            position: sticky;
            top: 0;
            height: 100vh;
            overflow-y: auto;
            border-right: 1px solid var(--admin-sidebar-border);
        }
    }

    /**
     * Header Area
     */
    .admin-header {
        grid-area: header;
        background-color: var(--admin-header-bg);
        color: var(--admin-header-text);
        border-bottom: 1px solid var(--admin-header-border);
        padding: var(--admin-spacing-md) var(--admin-spacing-content-padding);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--admin-spacing-md);

        /* Mobile */
        min-height: var(--admin-header-height-mobile);

        /* Tablet+ */
        @media (min-width: 768px) {
            min-height: var(--admin-header-height-tablet);
            position: sticky;
            top: 0;
            z-index: var(--admin-z-header);
        }

        /* Wide */
        @media (min-width: 1440px) {
            min-height: var(--admin-header-height-wide);
        }
    }

    /**
     * Content Area
     */
    .admin-content {
        grid-area: content;
        background-color: var(--admin-content-bg);
        padding: var(--admin-spacing-content-padding);
        overflow-x: hidden;

        /* Wide: Center content with max-width */
        @media (min-width: 1440px) {
            max-width: var(--admin-spacing-content-max-width);
            margin: 0 auto;
            width: 100%;
        }
    }

    /**
     * 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(--admin-z-sidebar) - 1);
                backdrop-filter: blur(2px);
            }
        }
    }

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

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

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

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

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

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

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

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