/* Mobile-Specific Enhancements for Course Navigation */

/* Prevent zoom on form inputs for iOS */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    select,
    textarea,
    input[type="text"],
    input[type="password"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="date"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input[type="number"],
    input[type="email"],
    input[type="url"],
    input[type="search"],
    input[type="tel"],
    input[type="color"] {
        font-size: 16px !important;
    }
}

/* Touch-friendly interactive elements */
@media (max-width: 768px) {
    /* Ensure all clickable elements are at least 44px tall */
    .glass-btn,
    .selection-dropdown,
    .file-item,
    .header-link,
    .close-viewer,
    button {
        min-height: 44px;
        touch-action: manipulation; /* Improves touch responsiveness */
    }
    
    /* Add visual feedback for touch interactions */
    .file-item:active,
    .glass-btn:active,
    .header-link:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
    
    /* Improve scrolling on mobile */
    .left-sidebar,
    .right-pane,
    .file-list {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    
    /* Mobile-friendly spacing */
    .main-content {
        gap: 0;
    }
    
    .left-sidebar {
        padding: 1rem;
        max-height: 50vh; /* Limit height on mobile */
        overflow-y: auto;
    }
    
    /* Sticky header on mobile */
    .modern-header {
        position: sticky;
        top: 0;
        z-index: 1000;
    }
    
    /* Optimize iframe viewing on mobile */
    .iframe-container {
        height: calc(100vh - 200px);
        min-height: 400px;
    }
    
    .iframe-content-wrapper {
        height: 100%;
    }
    
    .iframe-content-wrapper iframe {
        height: 100%;
        border-radius: 0 0 12px 12px;
    }
    
    /* Mobile navigation improvements */
    .selection-row {
        gap: 1.25rem;
    }
    
    .selection-group {
        position: relative;
    }
    
    /* Add loading states for mobile */
    .selection-dropdown:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
    
    /* Improve breadcrumb readability on mobile */
    .breadcrumb {
        line-height: 1.6;
        word-break: break-word;
    }
    
    /* Mobile-specific welcome message */
    .welcome-message {
        text-align: center;
        padding: 2rem 1rem;
    }
    
    /* Optimize loading screen for mobile */
    .initial-loading-screen {
        padding: 1rem;
    }
    
    .loading-content {
        max-width: 90%;
    }
    
    .loading-title {
        font-size: 1.5rem;
    }
    
    .loading-subtitle {
        font-size: 1rem;
    }
    
    .loading-progress {
        width: 250px;
        max-width: 90%;
    }
    
    /* Iframe header buttons mobile improvements */
    .iframe-header-buttons {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .open-new-tab-btn,
    .close-viewer {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 14px;
        border-radius: 6px;
        touch-action: manipulation;
    }
    
    .open-new-tab-btn:active,
    .close-viewer:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }
    
    /* File item buttons mobile improvements */
    .file-item {
        padding: 16px 12px;
        min-height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .file-item-content {
        flex: 1;
        margin-right: 10px;
    }
    
    .file-item-buttons {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
    }
    
    .file-open-btn {
        min-height: 36px;
        padding: 8px 10px;
        font-size: 12px;
        border-radius: 4px;
        white-space: nowrap;
        touch-action: manipulation;
    }
    
    .file-open-btn:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }
    
    /* Ensure buttons don't break layout on very small screens */
    @media (max-width: 480px) {
        .iframe-header {
            padding: 12px 16px;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .iframe-header-buttons {
            gap: 6px;
        }
        
        .open-new-tab-btn,
        .close-viewer {
            font-size: 12px;
            padding: 8px 10px;
        }
        
        .file-open-btn {
            font-size: 10px;
            padding: 6px 8px;
            min-height: 32px;
        }
    }
}

/* Smaller mobile devices */
@media (max-width: 480px) {
    .left-sidebar {
        padding: 0.75rem;
        max-height: 40vh;
    }
    
    .iframe-container {
        height: calc(100vh - 150px);
        margin: 0.25rem;
    }
    
    .selection-row {
        gap: 1rem;
    }
    
    .welcome-message {
        padding: 1.5rem 0.75rem;
    }
    
    .loading-title {
        font-size: 1.25rem;
    }
    
    .loading-progress {
        width: 200px;
    }
}

/* Landscape orientation for mobile devices */
@media (max-width: 768px) and (orientation: landscape) {
    .left-sidebar {
        max-height: 70vh;
    }
    
    .iframe-container {
        height: calc(100vh - 120px);
    }
    
    .welcome-message {
        padding: 1rem;
    }
    
    .welcome-message h2 {
        font-size: 1.5rem;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .glass-card,
    .glass-btn,
    .selection-dropdown {
        border-width: 0.5px;
    }
}

/* Dark mode adjustments for mobile */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
    .selection-dropdown option {
        background: rgba(26, 26, 46, 0.98);
        color: white;
    }
}

/* Accessibility improvements for mobile */
@media (max-width: 768px) {
    /* Improve focus states for keyboard navigation */
    .glass-btn:focus,
    .selection-dropdown:focus,
    .file-item:focus {
        outline: 2px solid var(--accent-color);
        outline-offset: 2px;
    }
    
    /* Ensure text is readable */
    .selection-label,
    .file-name,
    .breadcrumb {
        font-weight: 600;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    }
    
    /* Improve contrast for better readability */
    .file-path {
        opacity: 0.9;
        font-weight: 500;
    }
}

/* Safe area adjustments for devices with notches */
@supports (padding: max(0px)) {
    .modern-header {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
    
    .left-sidebar {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
}