/**
 * Responsive Breakpoints - Admin Interface
 *
 * Mobile-First breakpoint system with semantic naming.
 * Verwendet Custom Media Queries für bessere Wiederverwendbarkeit.
 */

@layer admin-settings {
    /**
     * Breakpoint Tokens
     *
     * Mobile-First Approach:
     * - Mobile: 0px - 767px (default, keine media query nötig)
     * - Tablet: 768px - 1023px
     * - Desktop: 1024px - 1439px
     * - Wide: 1440px+
     */
    :root {
        /* Breakpoint Values */
        --admin-breakpoint-tablet: 768px;
        --admin-breakpoint-desktop: 1024px;
        --admin-breakpoint-wide: 1440px;

        /* Container Max Widths per Breakpoint */
        --admin-container-mobile: 100%;
        --admin-container-tablet: 720px;
        --admin-container-desktop: 960px;
        --admin-container-wide: 1400px;

        /* Sidebar Widths per Breakpoint */
        --admin-sidebar-width-mobile: 100%;
        --admin-sidebar-width-tablet: 250px;
        --admin-sidebar-width-desktop: 250px;
        --admin-sidebar-width-wide: 280px;

        /* Header Heights per Breakpoint */
        --admin-header-height-mobile: 3.5rem;
        --admin-header-height-tablet: 4rem;
        --admin-header-height-desktop: 4rem;
        --admin-header-height-wide: 4.5rem;
    }
}

/**
 * Custom Media Queries
 *
 * Verwendung in anderen CSS-Dateien:
 * @media (min-width: 768px) { ... }
 * @media (min-width: 1024px) { ... }
 * @media (min-width: 1440px) { ... }
 */

/* Tablet and up (768px+) */
@custom-media --admin-tablet (min-width: 768px);

/* Desktop and up (1024px+) */
@custom-media --admin-desktop (min-width: 1024px);

/* Wide screens (1440px+) */
@custom-media --admin-wide (min-width: 1440px);

/* Mobile only (max 767px) */
@custom-media --admin-mobile-only (max-width: 767px);

/* Tablet only (768px - 1023px) */
@custom-media --admin-tablet-only (min-width: 768px) and (max-width: 1023px);

/* Desktop only (1024px - 1439px) */
@custom-media --admin-desktop-only (min-width: 1024px) and (max-width: 1439px);

/**
 * Orientation Queries
 */
@custom-media --admin-landscape (orientation: landscape);
@custom-media --admin-portrait (orientation: portrait);

/**
 * Touch Device Detection
 */
@custom-media --admin-touch (hover: none) and (pointer: coarse);

/**
 * Reduced Motion Preference
 */
@custom-media --admin-reduced-motion (prefers-reduced-motion: reduce);

/**
 * High Contrast Preference
 */
@custom-media --admin-high-contrast (prefers-contrast: more);