/*
 * features/month-mobile-stacked.css
 *
 * Mobile/tablet stacked month view with easy rollback.
 *
 * Goal:
 * - Phones: TWO days per row (as before)
 * - iPads / touch tablets: two-column grid (still "mobile-ish" is OK)
 * - Normal desktop screens: DO NOT apply any of these layout overrides
 *
 * This file intentionally contains ONLY scoped @media rules so nothing leaks to desktop.
 */

/* Phones: two columns, hide weekday header, improve readability */
@media (max-width: 640px) {
    /* Month top action now reuses roster-mobile-events-toolbar styles */
    .month-page,
    .month-grid {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Hide Mon..Sun header on phones */
    .month-header {
        display: none;
    }

    .month-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem; /* generous spacing between days */
        overflow-x: hidden; /* prevent horizontal overflow */
        touch-action: pan-y; /* vertical scroll; allow horizontal gestures */
    }

    /* Show only current month days; hide out-of-month fillers */
    .month-grid .month-cell.is-out {
        display: none;
    }

    /* Day cell readability tweaks (no color changes) */
    .month-cell {
        min-height: 6rem; /* keep comfortable tap area */
        padding: 0.75rem 0.9rem; /* slightly larger padding */
    }

    .month-cell .day-meta {
        font-size: 1rem;
    }

    .month-page .month-grid .mini-shift {
        font-size: 0.95rem; /* slightly larger chip text */
    }

    /* Keep toolbar accessible at top if long lists */
    .month-toolbar {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--surface-bg);
        border-bottom: 1px solid var(--surface-border);
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;

        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem; /* tighter to avoid cramping */
        justify-items: center; /* center groups */
    }

    /* Stack nav buttons vertically and make full-width */
    .month-toolbar .nav {
        display: none; /* hide nav buttons on phones; rely on swipe */
    }

    .month-toolbar .nav a {
        margin-left: 0 !important; /* override inline style in template */
    }

    .month-toolbar .nav .other-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 12rem; /* fixed width for consistency */
        max-width: 90%;
        margin: 0 auto;
    }

    /* Action group (Weekweergave, Push) full-width stacked */
    .month-toolbar > div:last-child {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.4rem;
        justify-items: center;
    }

    .month-toolbar a,
    .month-toolbar button {
        width: 12rem; /* fixed width buttons */
        max-width: 90%;
        margin: 0 auto;
        font-size: 0.85rem; /* smaller text on mobile */
        padding: 0.3rem 0.5rem; /* smaller tap area but still accessible */
        min-height: 36px; /* keep reasonable tap target */
    }
}

/*
 * Tablets / iPads:
 * - We allow the stacked/two-column month here (as requested).
 *
 * IMPORTANT:
 * We intentionally require BOTH:
 *   - coarse pointer (touch devices)
 *   - and a width range typical for tablets
 *
 * This prevents applying the tablet layout to normal desktop screens.
 */
@media (pointer: coarse) and (min-width: 641px) and (max-width: 1024px) {
    .month-page,
    .month-grid {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Keep header hidden on touch tablets too (optional; matches previous intent) */
    .month-header {
        display: none;
    }

    .month-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
        overflow-x: hidden;
        touch-action: pan-y;
    }

    /* Hide out-of-month days on tablets too */
    .month-grid .month-cell.is-out {
        display: none;
    }

    .month-cell {
        min-height: 6rem;
        padding: 0.75rem 0.9rem;
    }

    .month-cell .day-meta {
        font-size: 1rem;
    }

    .month-page .month-grid .mini-shift {
        font-size: 0.95rem;
    }

    .month-toolbar {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--surface-bg);
        border-bottom: 1px solid var(--surface-border);
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;

        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
        justify-items: center;
    }

    /* Tablets: stack toolbar groups to avoid cramping */
    .month-toolbar .nav {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.45rem;
        justify-items: center;
        width: 100%;
    }

    .month-toolbar .nav a {
        margin-left: 0 !important;
    }

    .month-toolbar .nav .other-btn,
    .month-toolbar a,
    .month-toolbar button {
        width: 12rem;
        max-width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 38px;
        font-size: 0.88rem; /* slight reduction on tablets */
    }
}

/* Label flash animation to emphasize month change */
@keyframes monthLabelFlash {
    0% {
        background-color: transparent;
    }
    30% {
        background-color: var(--indigo-100);
    }
    100% {
        background-color: transparent;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .month-label--flash {
        animation: monthLabelFlash 500ms ease-in-out 1;
        border-radius: 6px;
    }
}