/* ===================================================================
   Native Popover Filter Component
   Uses the popover attribute for light-dismiss, top-layer rendering
   =================================================================== */

@layer components {
    .filter-trigger {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        border: 1px solid var(--border-color, #ddd);
        border-radius: 8px;
        background: var(--surface-color, white);
        color: var(--text-primary, #111827);
        font-size: var(--text-sm, 0.875rem);
        font-weight: 500;
        cursor: pointer;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;

        &:hover {
            border-color: var(--primary-color, #5D4037);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        }

        &:focus-visible {
            outline: 2px solid var(--accent-color, #C62828);
            outline-offset: 2px;
        }

        /* Chevron indicator */
        &::after {
            content: '';
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 5px solid currentColor;
            opacity: 0.6;
            transition: transform 0.2s ease;
        }
    }

    .filter-trigger--active {
        border-color: var(--accent-color, #C62828);
        background: var(--status-error-bg, #fde8e8);
        color: var(--accent-color, #C62828);
    }

    .filter-popover {
        border: none;
        border-radius: 12px;
        padding: 0;
        background: var(--surface-color, white);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
        min-width: 220px;
        max-height: 360px;
        overflow: hidden;

        /* Entry animation */
        opacity: 0;
        translate: 0 -8px;
        transition:
            opacity 0.2s ease,
            translate 0.2s ease,
            display 0.2s allow-discrete,
            overlay 0.2s allow-discrete;

        &:popover-open {
            opacity: 1;
            translate: 0 0;
        }

        @starting-style {
            &:popover-open {
                opacity: 0;
                translate: 0 -8px;
            }
        }
    }

    .filter-popover-header {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-color, #ddd);
        font-weight: 600;
        font-size: var(--text-sm, 0.875rem);
        color: var(--text-secondary, #374151);
    }

    .filter-popover-list {
        list-style: none;
        margin: 0;
        padding: 0.25rem 0;
        max-height: 280px;
        overflow-y: auto;
    }

    .filter-option {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.625rem 1rem;
        border: none;
        background: none;
        color: var(--text-primary, #111827);
        font-size: var(--text-sm, 0.875rem);
        cursor: pointer;
        text-align: left;
        transition: background 0.1s ease;

        &:hover {
            background: var(--gray-50, #F9FAFB);
        }

        &:focus-visible {
            outline: 2px solid var(--accent-color, #C62828);
            outline-offset: -2px;
        }
    }

    .filter-option--selected {
        color: var(--accent-color, #C62828);
        font-weight: 600;

        /* Checkmark indicator */
        &::before {
            content: '\2713';
            font-weight: 700;
        }
    }

    .filter-option:not(.filter-option--selected)::before {
        content: '';
        width: 1em;
    }

    /* Mobile adjustments */
    @media (max-width: 768px) {
        .filter-popover {
            min-width: 280px;
        }

        .filter-option {
            padding: 0.75rem 1rem;
            /* WCAG touch target */
            min-height: 44px;
        }
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .filter-popover {
            transition: none;
        }
    }
}