/**
 * Popover Component - Admin Interface
 *
 * Native Popover API für Dropdown-Menüs und Overlays.
 * Baseline 2025: Popover API ist Baseline Newly available.
 *
 * Features:
 * - Native Browser-Support (kein JavaScript nötig für Basis-Funktionalität)
 * - Automatisches Focus-Management
 * - ESC-Key Support (native)
 * - Backdrop-Click Support (native)
 * - View Transition Integration für Popover-Transitions
 */

@layer components {
    /**
     * Popover Base
     */
    [popover] {
        position: fixed;
        inset: 0;
        width: fit-content;
        height: fit-content;
        margin: auto;
        border: 1px solid var(--border-light);
        border-radius: var(--radius-md);
        background-color: var(--content-bg);
        box-shadow: var(--shadow-lg);
        padding: var(--spacing-sm);
        z-index: var(--z-popover);
        color: var(--content-text);

        /* Hide by default (popover API handles visibility) */
        &:not(:popover-open) {
            display: none;
        }

        /* View Transition für Popover-Öffnen/Schließen */
        &::backdrop {
            background-color: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(2px);
            transition: opacity var(--transition-base), backdrop-filter var(--transition-base);
        }
    }

    /**
     * Admin Popover Styles
     */
    .admin-popover {
        min-width: 200px;
        max-width: 320px;
        padding: var(--spacing-xs) 0;
        background-color: var(--content-bg);
        border: 1px solid var(--border-light);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        overflow: hidden;

        /* Positionierung */
        &--bottom-start {
            top: auto;
            bottom: 0;
            left: 0;
            right: auto;
        }

        &--bottom-end {
            top: auto;
            bottom: 0;
            left: auto;
            right: 0;
        }

        &--top-start {
            top: 0;
            bottom: auto;
            left: 0;
            right: auto;
        }

        &--top-end {
            top: 0;
            bottom: auto;
            left: auto;
            right: 0;
        }
    }

    /**
     * Popover Content (Menu Lists)
     */
    .admin-popover ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .admin-popover li {
        margin: 0;
    }

    /**
     * Popover Links/Buttons
     */
    .admin-popover a,
    .admin-popover button {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        width: 100%;
        padding: var(--spacing-xs) var(--spacing-md);
        border: none;
        background: transparent;
        color: var(--content-text);
        text-decoration: none;
        font-size: var(--font-size-sm);
        cursor: pointer;
        transition: background-color var(--transition-base);

        &:hover,
        &:focus {
            background-color: var(--hover-overlay);
            outline: none;
        }

        &:focus-visible {
            outline: 2px solid var(--focus-ring);
            outline-offset: -2px;
        }
    }

    /**
     * Popover Divider
     */
    .admin-popover hr {
        margin: var(--spacing-xs) 0;
        border: none;
        border-top: 1px solid var(--border-light);
    }

    /**
     * Popover Animation (View Transitions)
     */
    @view-transition {
        navigation: auto;
    }

    @view-transition-group(popover) {
        animation-duration: var(--transition-base);
        animation-timing-function: ease-in-out;
    }

    /**
     * Dark Theme Optimizations
     */
    @media (prefers-color-scheme: dark) {
        [popover] {
            background-color: var(--content-bg);
            border-color: var(--border-light);
            box-shadow: var(--shadow-lg);

            &::backdrop {
                background-color: rgba(0, 0, 0, 0.5);
            }
        }

        .admin-popover a:hover,
        .admin-popover button:hover {
            background-color: oklch(from var(--content-bg) calc(l + 0.08) c h);
        }
    }
}