/* Mobile Responsive Enhancements for Nexus Learning Platform */

/* Mobile Navigation Enhancements */
@media (max-width: 768px) {
    /* Mobile menu animations */
    #mobile-menu {
        transition: all 0.3s ease-in-out;
        transform: translateY(-10px);
        opacity: 0;
    }
    
    #mobile-menu.show {
        transform: translateY(0);
        opacity: 1;
    }
    
    /* Mobile menu item hover effects */
    #mobile-menu a:hover {
        background-color: rgba(59, 130, 246, 0.1);
        border-radius: 0.5rem;
    }
    
    /* Mobile menu button animation */
    #mobile-menu-button {
        transition: transform 0.2s ease;
    }
    
    #mobile-menu-button:hover {
        transform: scale(1.1);
    }
}

/* Mobile Form Enhancements */
@media (max-width: 768px) {
    /* Form input improvements */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 0.75rem !important;
        border-radius: 0.5rem !important;
    }
    
    /* Form button improvements */
    .btn {
        min-height: 44px; /* Better touch target */
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
        border-radius: 0.5rem !important;
    }
    
    /* Form group spacing */
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    /* Form validation messages */
    .invalid-feedback {
        font-size: 0.875rem;
        margin-top: 0.25rem;
    }
}

/* Mobile Modal Enhancements */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 1rem;
        max-width: calc(100vw - 2rem);
    }
    
    .modal-content {
        border-radius: 0.75rem;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }
    
    .modal-header {
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .modal-body {
        padding: 1.5rem;
    }
    
    .modal-footer {
        padding: 1rem 1.5rem;
        border-top: 1px solid #e5e7eb;
    }
    
    /* Modal close button */
    .btn-close {
        padding: 0.5rem;
        margin: -0.5rem -0.5rem -0.5rem auto;
    }
}

/* Mobile Table Enhancements */
@media (max-width: 768px) {
    .table-responsive {
        border-radius: 0.5rem;
        overflow: hidden;
    }
    
    .table {
        font-size: 0.875rem;
    }
    
    .table th,
    .table td {
        padding: 0.75rem 0.5rem;
    }
    
    /* Stack table on mobile */
    .table-stack-mobile {
        display: block;
    }
    
    .table-stack-mobile thead {
        display: none;
    }
    
    .table-stack-mobile tbody,
    .table-stack-mobile tr,
    .table-stack-mobile td {
        display: block;
        width: 100%;
    }
    
    .table-stack-mobile tr {
        margin-bottom: 1rem;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        padding: 1rem;
    }
    
    .table-stack-mobile td {
        border: none;
        padding: 0.5rem 0;
        text-align: left;
    }
    
    .table-stack-mobile td:before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: #6b7280;
    }
}

/* Mobile Card Enhancements */
@media (max-width: 768px) {
    .card {
        border-radius: 0.75rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }
    
    .card-header {
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .card-body {
        padding: 1.5rem;
    }
    
    .card-footer {
        padding: 1rem 1.5rem;
        border-top: 1px solid #e5e7eb;
    }
    
    /* Card hover effects for mobile */
    .card-hover {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .card-hover:active {
        transform: scale(0.98);
    }
}

/* Mobile Button Enhancements */
@media (max-width: 768px) {
    /* Better touch targets */
    .btn {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Button group improvements */
    .btn-group {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .btn-group .btn {
        flex: 1;
        min-width: auto;
    }
    
    /* Floating action button */
    .btn-floating {
        position: fixed;
        bottom: 2rem;
        right: 2rem;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 1000;
    }
}

/* Mobile Typography Enhancements */
@media (max-width: 768px) {
    /* Responsive text sizes */
    .display-1 { font-size: 2rem; }
    .display-2 { font-size: 1.75rem; }
    .display-3 { font-size: 1.5rem; }
    .display-4 { font-size: 1.25rem; }
    
    /* Mobile-appropriate font sizes */
    h1 { font-size: 1.5rem !important; line-height: 1.3; }
    h2 { font-size: 1.25rem !important; line-height: 1.3; }
    h3 { font-size: 1.125rem !important; line-height: 1.3; }
    h4 { font-size: 1rem !important; line-height: 1.3; }
    h5 { font-size: 0.875rem !important; line-height: 1.3; }
    h6 { font-size: 0.75rem !important; line-height: 1.3; }
    
    /* Body text adjustments */
    p { 
        font-size: 0.875rem !important; 
        line-height: 1.5; 
    }
    
    /* Small text */
    .text-sm { font-size: 0.75rem !important; }
    .text-xs { font-size: 0.625rem !important; }
    
    /* Large text adjustments */
    .text-lg { font-size: 1rem !important; }
    .text-xl { font-size: 1.125rem !important; }
    .text-2xl { font-size: 1.25rem !important; }
    .text-3xl { font-size: 1.5rem !important; }
    .text-4xl { font-size: 1.75rem !important; }
    .text-5xl { font-size: 2rem !important; }
    .text-6xl { font-size: 2.25rem !important; }
    
    /* Button text adjustments */
    .btn { font-size: 0.875rem !important; }
    .btn-lg { font-size: 1rem !important; }
    .btn-sm { font-size: 0.75rem !important; }
    
    /* Form text adjustments */
    label { font-size: 0.875rem !important; }
    input, textarea, select { font-size: 0.875rem !important; }
    
    /* Navigation text adjustments */
    nav a { font-size: 0.875rem !important; }
    nav .text-xl { font-size: 1.125rem !important; }
    
    /* Card text adjustments */
    .card-title { font-size: 1rem !important; }
    .card-text { font-size: 0.875rem !important; }
    
    /* Subject card specific adjustments */
    .subject-card h3 { font-size: 1rem !important; }
    .subject-card p { font-size: 0.75rem !important; }
    .subject-card .text-xl { font-size: 1rem !important; }
    .subject-card .text-sm { font-size: 0.75rem !important; }
    
    /* Dashboard specific adjustments */
    .dashboard h1 { font-size: 1.5rem !important; }
    .dashboard h2 { font-size: 1.25rem !important; }
    .dashboard .text-2xl { font-size: 1.25rem !important; }
    .dashboard .text-xl { font-size: 1.125rem !important; }
    
    /* Study page specific adjustments */
    .study-page h1 { font-size: 1.5rem !important; }
    .study-page h2 { font-size: 1.25rem !important; }
    .study-page .text-3xl { font-size: 1.5rem !important; }
    .study-page .text-xl { font-size: 1rem !important; }
    
    /* Modal text adjustments */
    .modal h3 { font-size: 1.125rem !important; }
    .modal p { font-size: 0.875rem !important; }
    .modal label { font-size: 0.875rem !important; }
    
    /* Text truncation */
    .text-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* Multi-line truncation */
    .text-truncate-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .text-truncate-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* Mobile Spacing Enhancements */
@media (max-width: 768px) {
    /* Responsive spacing */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Section spacing */
    .section {
        padding: 2rem 0;
    }
    
    .section-sm {
        padding: 1rem 0;
    }
    
    .section-lg {
        padding: 3rem 0;
    }
}

/* Mobile Grid Enhancements */
@media (max-width: 768px) {
    /* Auto-fit grid */
    .grid-auto-fit {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
    }
    
    /* Masonry grid */
    .grid-masonry {
        columns: 1;
        column-gap: 1rem;
    }
    
    .grid-masonry > * {
        break-inside: avoid;
        margin-bottom: 1rem;
    }
}

/* Mobile Image Enhancements */
@media (max-width: 768px) {
    /* Responsive images */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Image aspect ratios */
    .aspect-ratio-16-9 {
        aspect-ratio: 16 / 9;
    }
    
    .aspect-ratio-4-3 {
        aspect-ratio: 4 / 3;
    }
    
    .aspect-ratio-1-1 {
        aspect-ratio: 1 / 1;
    }
    
    /* Image lazy loading */
    img[loading="lazy"] {
        opacity: 0;
        transition: opacity 0.3s;
    }
    
    img[loading="lazy"].loaded {
        opacity: 1;
    }
}

/* Mobile Loading States */
@media (max-width: 768px) {
    /* Skeleton loading */
    .skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: skeleton-loading 1.5s infinite;
    }
    
    @keyframes skeleton-loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
    
    /* Loading spinner */
    .spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
}

/* Mobile Accessibility Enhancements */
@media (max-width: 768px) {
    /* Focus indicators */
    *:focus {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }
    
    /* Skip to content link */
    .skip-link {
        position: absolute;
        top: -40px;
        left: 6px;
        background: #000;
        color: white;
        padding: 8px;
        text-decoration: none;
        z-index: 10000;
    }
    
    .skip-link:focus {
        top: 6px;
    }
    
    /* High contrast mode support */
    @media (prefers-contrast: high) {
        .btn {
            border: 2px solid currentColor;
        }
        
        .card {
            border: 2px solid #000;
        }
    }
    
    /* Reduced motion support */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* Mobile Dark Mode Enhancements */
@media (max-width: 768px) {
    .dark-mode .mobile-menu {
        background-color: #1f2937;
        border-color: #374151;
    }
    
    .dark-mode .mobile-menu a {
        color: #d1d5db;
    }
    
    .dark-mode .mobile-menu a:hover {
        background-color: rgba(59, 130, 246, 0.2);
    }
    
    .dark-mode .skeleton {
        background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    }
    
    .dark-mode .spinner {
        border-color: #4b5563;
        border-top-color: #3b82f6;
    }
}

/* Mobile Performance Optimizations */
@media (max-width: 768px) {
    /* Hardware acceleration */
    .transform-gpu {
        transform: translateZ(0);
        backface-visibility: hidden;
        perspective: 1000px;
    }
    
    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }
    
    /* Optimize animations */
    .animate-optimized {
        will-change: transform, opacity;
    }
    
    /* Additional mobile typography utilities */
    .mobile-text-xs { font-size: 0.625rem !important; }
    .mobile-text-sm { font-size: 0.75rem !important; }
    .mobile-text-base { font-size: 0.875rem !important; }
    .mobile-text-lg { font-size: 1rem !important; }
    .mobile-text-xl { font-size: 1.125rem !important; }
    .mobile-text-2xl { font-size: 1.25rem !important; }
    
    /* Mobile heading utilities */
    .mobile-heading-1 { font-size: 1.5rem !important; line-height: 1.3; }
    .mobile-heading-2 { font-size: 1.25rem !important; line-height: 1.3; }
    .mobile-heading-3 { font-size: 1.125rem !important; line-height: 1.3; }
    .mobile-heading-4 { font-size: 1rem !important; line-height: 1.3; }
}

/* Mobile Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-break {
        page-break-before: always;
    }
    
    .print-break-after {
        page-break-after: always;
    }
    
    /* Optimize for printing */
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
}