/**
 * Mobile UI Polish & Accessibility Enhancements
 * Version 1.5.19 — "Mobile Perfection" Upgrade
 */

/* ===== Desktop Sidebar Spacing ===== */
@media (min-width: 768px) {
    main {
        padding-right: 112px !important;
    }
}

/* ===== Minimum Touch Target Size (44×44px) ===== */
button, a, .btn, [role="button"], .interactive {
    min-height: 44px;
    min-width: 44px;
}

/* ===== Mobile Layout ===== */
@media (max-width: 767px) {
    /* Top padding to clear WP Admin Bar and give 'breathing room' */
    main.hayaanshufiya-app-main {
        padding-top: calc(1.5rem + env(safe-area-inset-top, 0px)) !important;
        padding-right: 1.25rem !important;
        padding-left: 1.25rem !important;
        padding-bottom: 120px !important; /* Spacing for floating nav */
    }

    /* Floating Bottom Navigation Style */
    nav.fixed.bottom-0 {
        bottom: 20px !important;
        left: 20px !important;
        right: 20px !important;
        background: rgba(255, 255, 255, 0.85) !important;
        backdrop-filter: blur(25px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0, 0, 0, 0.05) !important;
        border-radius: 28px !important;
        height: auto !important;
        padding-bottom: 0 !important; /* Handled by margins */
    }

    .dark nav.fixed.bottom-0 {
        background: rgba(44, 36, 32, 0.85) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    nav.fixed.bottom-0 .grid {
        height: 72px !important;
        padding: 4px !important;
    }

    /* Active State Refinement */
    nav.fixed.bottom-0 .absolute.top-0 {
        top: 0px !important;
        height: 4px !important;
        width: 32px !important;
        background-color: var(--primary) !important;
        border-radius: 0 0 100px 100px !important;
    }

    /* Bento Grid: More breathing room */
    .grid.grid-cols-1 md:grid-cols-12 {
        gap: 1.25rem !important;
    }

    /* Specific Mobile Typography Refinement */
    .dashboard-stat-number {
        font-size: 3.5rem !important;
        letter-spacing: -0.05em;
    }

    .hero-title {
        font-size: 1.75rem !important;
    }

    .hero-welcome-text {
        font-size: 1.5rem !important;
    }

    /* Flashcard Enhancements */
    #flashcard-container {
        padding: 0 0.5rem !important;
        margin-top: 1rem !important;
    }

    #current-flashcard {
        min-height: 360px !important;
    }

    /* Swipe buttons scaling */
    .flashcard-actions {
        margin-top: 2rem !important;
        gap: 1.5rem !important;
    }
}

/* ===== Safe Area Support ===== */
@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 767px) {
        nav.fixed.bottom-0 {
            bottom: calc(15px + env(safe-area-inset-bottom)) !important;
        }
        main.hayaanshufiya-app-main {
            padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
        }
    }
}

/* ===== active touch feedback ===== */
button:active, a:active {
    transform: scale(0.96);
    transition: transform 0.1s ease-out;
}

/* Glass panel enhancements */
.glass-card {
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}