/* ===================================================================
   Period Swiper
   CSS scroll-snap horizontal container for date range panels
   Mobile: swipe between periods (Today / This Week / This Month)
   Desktop: all panels visible side by side
   =================================================================== */

@layer components {
    .period-swiper {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding: 0.5rem 0;

        /* Hide scrollbar but keep scrollable */
        scrollbar-width: none;
        &::-webkit-scrollbar {
            display: none;
        }
    }

    .period-panel {
        flex: 0 0 100%;
        scroll-snap-align: start;
        border-radius: 12px;
        padding: 1.25rem;
        background: var(--card-bg, white);
        border: 1px solid var(--border-color, #ddd);
        min-height: 120px;
    }

    .period-panel-label {
        font-size: var(--text-xs, 0.75rem);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted, #6B7280);
        margin-bottom: 0.5rem;
    }

    .period-panel-value {
        font-size: var(--text-2xl, 1.728rem);
        font-weight: 700;
        color: var(--text-primary, #111827);
    }

    /* Dot indicators (mobile) */
    .period-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        padding: 0.75rem 0;
    }

    .period-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--gray-300, #D1D5DB);
        border: none;
        padding: 0;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.2s ease;

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

        &.is-active {
            background: var(--accent-color, #C62828);
            transform: scale(1.3);
        }
    }

    /* Desktop: show all panels side by side */
    @media (min-width: 769px) {
        .period-swiper {
            overflow-x: visible;
            scroll-snap-type: none;
        }

        .period-panel {
            flex: 1 1 0;
        }

        .period-dots {
            display: none;
        }
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .period-swiper {
            scroll-behavior: auto;
        }

        .period-dot {
            transition: none;
        }
    }
}