/* Mobile-Specific CSS Optimizations */

/* ============================================
   Touch Target Sizes (WCAG 2.1 Compliance)
   ============================================ */

@media (max-width: 768px) {
    /* Ensure minimum 44px touch targets for accessibility */
    button,
    .mud-button-root,
    a.mud-button,
    .mud-nav-link,
    .mud-list-item,
    .mud-menu-item,
    .mud-chip,
    input[type="checkbox"],
    input[type="radio"],
    .mud-checkbox,
    .mud-radio {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Increase button padding for better touch targets */
    .mud-button-root {
        padding: 12px 24px;
    }
    
    .mud-button-size-small {
        padding: 10px 20px;
        min-height: 40px;
    }
    
    .mud-button-size-large {
        padding: 14px 28px;
        min-height: 48px;
    }
    
    /* Increase spacing between touch targets */
    .mud-button + .mud-button {
        margin-left: 8px;
    }
    
    /* Ensure list items are touch-friendly */
    .mud-list-item {
        padding: 12px 16px;
    }
    
    /* Ensure navigation links are touch-friendly */
    .mud-nav-link {
        padding: 12px 16px;
    }
    
    /* Checkbox and radio button sizing */
    .mud-checkbox,
    .mud-radio {
        padding: 8px;
    }
    
    input[type="checkbox"],
    input[type="radio"] {
        width: 44px;
        height: 44px;
        margin: 0;
    }
}

/* ============================================
   Touch Feedback
   ============================================ */

@media (max-width: 768px) {
    /* Enhanced touch feedback for buttons */
    .mud-button-root:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
    
    /* Touch feedback for list items */
    .mud-list-item:active {
        background-color: rgba(0, 0, 0, 0.08);
        transition: background-color 0.1s ease;
    }
    
    /* Touch feedback for navigation links */
    .mud-nav-link:active {
        background-color: rgba(0, 0, 0, 0.08);
        transition: background-color 0.1s ease;
    }
    
    /* Remove tap highlight on iOS */
    * {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }
}

/* ============================================
   Scrolling Optimization
   ============================================ */

@media (max-width: 768px) {
    html {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }
    
    body {
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        position: relative;
    }
    
    .mud-main-content {
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
    }
    
    /* Prevent horizontal scroll */
    * {
        max-width: 100%;
    }
    
    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }
}

/* ============================================
   Form Input Optimization
   ============================================ */

@media (max-width: 768px) {
    /* Larger input fields for mobile */
    .mud-input-control {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .mud-input {
        min-height: 48px;
        padding: 12px 16px;
    }
    
    /* Better spacing for form fields */
    .mud-input-control {
        margin-bottom: 16px;
    }
    
    /* Mobile-friendly validation messages */
    .mud-input-error {
        font-size: 0.875rem;
        margin-top: 0.25rem;
        line-height: 1.4;
    }
    
    .mud-input-helper-text {
        font-size: 0.75rem;
        margin-top: 0.25rem;
        line-height: 1.4;
    }
    
    /* Better error display positioning */
    .mud-input-error-text {
        display: block;
        margin-top: 4px;
        padding: 4px 8px;
        background-color: rgba(244, 67, 54, 0.1);
        border-radius: 4px;
    }
    
    /* Full-width buttons on mobile */
    .mud-button-full-width {
        width: 100%;
    }
}

/* ============================================
   Typography Optimization
   ============================================ */

@media (max-width: 768px) {
    /* Ensure readable font sizes */
    body {
        font-size: 16px;
        line-height: 1.5;
    }
    
    /* Adjust heading sizes for mobile */
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
}

/* ============================================
   Layout Optimizations
   ============================================ */

@media (max-width: 768px) {
    /* Better spacing on mobile */
    .mud-container {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    /* Stack cards vertically on mobile */
    .mud-grid-item {
        margin-bottom: 16px;
    }
    
    /* Full-width cards on mobile */
    .mud-card {
        width: 100%;
        margin-bottom: 16px;
    }
    
    /* Optimize drawer for mobile */
    .mud-drawer {
        width: 280px;
    }
    
    /* Better app bar on mobile */
    .mud-appbar {
        padding: 8px 16px;
    }
}

/* ============================================
   Prevent Zoom on Input Focus (iOS)
   ============================================ */

@media (max-width: 768px) {
    /* Ensure font size is at least 16px to prevent zoom on iOS */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ============================================
   Swipe Gesture Visual Feedback
   ============================================ */

.swipeable {
    position: relative;
    overflow: hidden;
}

.swipeable.swiping {
    transition: transform 0.2s ease;
}

/* ============================================
   Loading States
   ============================================ */

@media (max-width: 768px) {
    /* Larger loading indicators on mobile */
    .mud-progress-circular {
        width: 48px;
        height: 48px;
    }
    
    .mud-progress-linear {
        height: 4px;
    }
}

/* ============================================
   Modal/Dialog Optimizations
   ============================================ */

@media (max-width: 768px) {
    /* Full-screen modals on mobile */
    .mud-dialog {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    .mud-dialog-container {
        padding: 0 !important;
    }
}

/* ============================================
   Utility Classes
   ============================================ */

@media (max-width: 768px) {
    /* Hide on mobile */
    .hide-mobile {
        display: none !important;
    }
    
    /* Show only on mobile */
    .show-mobile {
        display: block !important;
    }
    
    /* Full width on mobile */
    .full-width-mobile {
        width: 100% !important;
    }
    
    /* Stack on mobile */
    .stack-mobile {
        flex-direction: column !important;
    }
}