/**
 * Grid System - Admin Interface
 *
 * Flexible Grid-System für Content-Layouts.
 */

@layer admin-objects {
    /**
     * Basic Grid
     */
    .admin-grid {
        display: grid;
        gap: var(--admin-spacing-md);

        /* Default: 1 column (mobile) */
        grid-template-columns: 1fr;

        /* Tablet+: Auto-fit with min 250px columns */
        @media (min-width: 768px) {
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        }
    }

    /**
     * Grid Variants
     */
    .admin-grid--2-col {
        @media (min-width: 768px) {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .admin-grid--3-col {
        @media (min-width: 768px) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (min-width: 1024px) {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .admin-grid--4-col {
        @media (min-width: 768px) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (min-width: 1024px) {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    /**
     * Gap Variants
     */
    .admin-grid--gap-sm {
        gap: var(--admin-spacing-sm);
    }

    .admin-grid--gap-lg {
        gap: var(--admin-spacing-lg);
    }

    .admin-grid--gap-xl {
        gap: var(--admin-spacing-xl);
    }

    /**
     * Sidebar Layout (2-column with sidebar)
     */
    .admin-grid--sidebar {
        @media (min-width: 1024px) {
            grid-template-columns: 300px 1fr;
            gap: var(--admin-spacing-xl);
        }
    }

    .admin-grid--sidebar-right {
        @media (min-width: 1024px) {
            grid-template-columns: 1fr 300px;
            gap: var(--admin-spacing-xl);
        }
    }

    /**
     * Stack
     *
     * Vertical spacing utility.
     */
    .admin-stack {
        display: flex;
        flex-direction: column;
        gap: var(--admin-spacing-md);
    }

    .admin-stack--sm {
        gap: var(--admin-spacing-sm);
    }

    .admin-stack--lg {
        gap: var(--admin-spacing-lg);
    }

    .admin-stack--xl {
        gap: var(--admin-spacing-xl);
    }

    /**
     * Cluster
     *
     * Horizontal spacing utility with wrap.
     */
    .admin-cluster {
        display: flex;
        flex-wrap: wrap;
        gap: var(--admin-spacing-md);
        align-items: center;
    }

    .admin-cluster--sm {
        gap: var(--admin-spacing-sm);
    }

    .admin-cluster--lg {
        gap: var(--admin-spacing-lg);
    }

    .admin-cluster--justify-between {
        justify-content: space-between;
    }

    .admin-cluster--justify-end {
        justify-content: flex-end;
    }
}