/**
 * Comprehensive Mobile Responsive Styles for iLearnZed Platform
 * 
 * This file ensures all pages are fully responsive on mobile devices
 * without breaking desktop layouts.
 * 
 * Breakpoints:
 * - 768px: Mobile & small tablets
 * - 480px: Small phones
 * - 320px: Very small phones
 */

/* ============================================
   PWA MOBILE DETECTION - Force mobile view in PWA
   ============================================ */

/* Detect PWA mode and force mobile view */
@media (display-mode: standalone) {
    html, body {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* Force mobile layout in PWA on mobile devices */
    @media (max-width: 992px) {
        html, body {
            font-size: 16px !important;
        }
    }
}

/* Force mobile view for devices with mobile classes */
html.is-mobile-device,
html.mobile-forced,
html.pwa-mobile,
body.is-mobile-device,
body.mobile-forced,
body.pwa-mobile {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

html.is-mobile-device *,
html.mobile-forced *,
html.pwa-mobile *,
body.is-mobile-device *,
body.mobile-forced *,
body.pwa-mobile * {
    box-sizing: border-box;
}

/* ============================================
   GLOBAL MOBILE FIXES - PREVENT HORIZONTAL SCROLL
   ============================================ */

@media (max-width: 768px) {
    /* Prevent horizontal scrolling */
    html, body {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        position: relative !important;
    }
    
    /* Force containers to full width */
    .container,
    .container-fluid,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ============================================
   NAVBAR & NAVIGATION - MOBILE OPTIMIZATION
   ============================================ */

@media (max-width: 768px) {
    /* Navbar adjustments */
    .navbar,
    .custom-navbar {
        padding: 0.5rem 1rem !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    .navbar-brand {
        font-size: 1.25rem !important;
        max-width: 70% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Mobile menu toggle */
    .navbar-toggler {
        padding: 0.5rem !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border: none !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 8px !important;
    }
    
    /* Collapsed navbar menu */
    .navbar-collapse {
        margin-top: 1rem !important;
        padding: 0.5rem 0 !important;
    }
    
    .navbar-nav {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 1rem !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Stack navbar buttons */
    .navbar-nav .btn {
        width: 100% !important;
        margin: 0.5rem 0 !important;
        text-align: center !important;
    }
    
    /* Dropdown menus full width */
    .dropdown-menu {
        width: 100% !important;
        max-width: 100% !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin-top: 0.5rem !important;
    }
}

/* ============================================
   LAYOUT - SINGLE COLUMN ON MOBILE
   ============================================ */

@media (max-width: 768px) {
    /* Exception: Study Plans Grid - 2 columns on mobile using FLEXBOX - MUST COME AFTER GENERAL RULES */
    .study-plans-grid,
    .row.study-plans-grid,
    .row.g-4.study-plans-grid,
    div.row.g-4.study-plans-grid,
    .row:has(.study-plan-col),
    div.row.study-plans-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Override the general column rule - HIGHEST SPECIFICITY - CALCULATE 50% MINUS HALF THE GAP */
    .study-plans-grid > .study-plan-col,
    .study-plans-grid > .col-md-6.study-plan-col,
    .study-plans-grid > .col-lg-4.study-plan-col,
    .study-plans-grid > .col-md-6.col-lg-4.study-plan-col,
    .study-plans-grid > .col-md-6,
    .study-plans-grid > .col-lg-4,
    .study-plans-grid > .col-md-6.col-lg-4,
    .row.study-plans-grid > .study-plan-col,
    .row.g-4.study-plans-grid > .study-plan-col,
    .row.g-4.study-plans-grid > .col-md-6.col-lg-4.study-plan-col,
    .row.g-4.study-plans-grid > .col-md-6.col-lg-4,
    .row.g-4.study-plans-grid > [class*="col-"].study-plan-col,
    div.study-plans-grid > div.study-plan-col,
    div.study-plans-grid > div[class*="col-"].study-plan-col,
    .study-plans-grid > *,
    .row.study-plans-grid > *,
    .row.g-4.study-plans-grid > *,
    .row.g-4.study-plans-grid > .col-md-6.col-lg-4.study-plan-col {
        width: calc((100% - 0.75rem) / 2) !important;
        max-width: calc((100% - 0.75rem) / 2) !important;
        min-width: 0 !important;
        flex: 0 0 calc((100% - 0.75rem) / 2) !important;
        flex-basis: calc((100% - 0.75rem) / 2) !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure cards inside grid items take full width */
    .study-plans-grid .study-plan-card,
    .row.study-plans-grid .study-plan-card,
    .row.g-4.study-plans-grid .study-plan-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 20px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        min-width: 0 !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    
    /* Grid layouts to single column - except resource library, courses grid, dashboard grids, study plans, AI tutors, and study groups */
    [class*="grid"]:not(.resources-grid):not([class*="resources-grid"]):not(.courses-grid):not([class*="courses-grid"]):not(.stats-grid):not(.quick-actions-grid):not(.action-cards-grid):not(.course-grid):not(.study-plans-grid-custom):not([class*="study-plans-grid"]):not(.subjects-grid):not(.groups-grid) {
        grid-template-columns: 1fr !important;
        display: grid !important;
    }
    
    /* Exception: AI Tutors Subjects Grid - 2 columns on mobile */
    .subjects-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        display: grid !important;
        gap: 1rem !important;
    }
    
    /* Exception: Study Groups Grid - 2 columns on mobile */
    .groups-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        display: grid !important;
        gap: 1rem !important;
    }
    
    /* Exception: Study Plans Custom Grid - 2 columns on mobile */
    .study-plans-grid-custom {
        grid-template-columns: repeat(2, 1fr) !important;
        display: grid !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }
    
    /* Exception: Resource library should use two columns on mobile */
    .resources-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        display: grid !important;
    }
    
    /* Exception: Courses grid - 2 columns on mobile (maintain grid) */
    .courses-grid,
    div.courses-grid,
    .courses-page .courses-grid,
    .courses-content .courses-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        display: grid !important;
        gap: 0.75rem !important; /* Optimized gap for mobile */
    }
    
    /* Ensure course cards work in two-column layout - optimized for mobile */
    .courses-grid .course-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        box-sizing: border-box !important;
    }
    
    /* Optimize course card image for 2-column mobile */
    .courses-grid .course-card .card-image {
        height: 140px !important;
        min-height: 140px !important;
        overflow: hidden !important; /* Keep overflow hidden for images */
    }
    
    /* Optimize course card body for 2-column mobile */
    .courses-grid .course-card .card-body {
        padding: 0.75rem !important;
    }
    
    /* Optimize course card title for 2-column mobile */
    .courses-grid .course-card .card-title {
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Optimize course card buttons for 2-column mobile */
    .courses-grid .course-card .btn-view,
    .courses-grid .course-card .btn-enroll {
        font-size: 0.7rem !important;
        padding: 0.5rem 0.5rem !important;
        min-height: 36px !important;
    }
    
    /* Sidebars stack below content */
    .sidebar,
    .sidebar-left,
    .sidebar-right,
    aside {
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        margin-top: 1.5rem !important;
    }
}

/* ============================================
   CARDS & CONTAINERS
   ============================================ */

@media (max-width: 768px) {
    /* Full width cards */
    .card,
    .modern-card,
    .course-card,
    .post-card,
    .dashboard-card,
    .stat-card,
    .earnings-card,
    .summary-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Reduce card padding */
    .card-body,
    .card-header,
    .card-footer {
        padding: 1rem !important;
    }
    
    /* Dashboard containers - keep single column for flex containers */
    .dashboard-container {
        width: 100% !important;
        padding: 1rem !important;
    }
    
    .dashboard-stats,
    .stat-cards,
    .earnings-cards {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 1rem !important;
    }
    
    /* Dashboard grids - two columns on mobile */
    .stats-grid,
    .quick-actions-grid,
    .action-cards-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }
    
    .stat-card,
    .action-card,
    .earnings-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Courses grid - two columns on mobile (exception) - REMOVED DUPLICATE */
}

/* ============================================
   IMAGES - RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    img,
    .img-fluid,
    .post-image,
    .course-image,
    .avatar {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        width: 100% !important;
        object-fit: contain !important;
    }
    
    /* Profile pictures should maintain their size and circular shape */
    .profile-pic,
    .teacher-avatar.profile-pic,
    .teacher-profile-link .profile-pic,
    .teacher-name-link .profile-pic {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
        object-fit: cover !important;
        border-radius: 50% !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-shrink: 0 !important;
    }
    
    /* Video containers */
    .video-container,
    .embed-responsive,
    .embed-responsive-item {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        padding-bottom: 56.25% !important; /* 16:9 aspect ratio */
        position: relative !important;
        overflow: hidden !important;
    }
    
    .video-container iframe,
    .video-container video,
    .embed-responsive iframe,
    .embed-responsive video {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* ============================================
   BUTTONS - TOUCH FRIENDLY
   ============================================ */

@media (max-width: 768px) {
    /* All buttons minimum touch target */
    button,
    .btn,
    a.btn,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .btn-primary,
    .btn-secondary,
    .btn-modern,
    .btn-primary-modern {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(0, 166, 81, 0.2) !important;
    }
    
    /* Full width buttons on mobile */
    .btn-group {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .btn-group .btn {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
        border-radius: 8px !important;
    }
    
    /* Stack action buttons */
    .btn-toolbar,
    .action-buttons,
    .form-actions {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .btn-toolbar .btn,
    .action-buttons .btn,
    .form-actions .btn {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
}

/* ============================================
   FORMS - MOBILE OPTIMIZED
   ============================================ */

@media (max-width: 768px) {
    /* Form containers */
    .form-container,
    .content-form,
    .course-form,
    .module-form {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem !important;
        margin: 0 !important;
    }
    
    /* Form groups */
    .form-group,
    .form-field-wrapper,
    .mb-3 {
        margin-bottom: 1.25rem !important;
    }
    
    /* Form controls */
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    input[type="number"],
    input[type="tel"],
    input[type="search"],
    textarea,
    select {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important; /* Prevents iOS zoom */
        min-height: 44px !important;
        padding: 0.75rem !important;
        border-radius: 8px !important;
        touch-action: manipulation !important;
    }
    
    /* Textareas */
    textarea {
        min-height: 120px !important;
        resize: vertical !important;
    }
    
    /* Form labels */
    .form-label,
    label {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
    }
    
    /* Input groups */
    .input-group {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .input-group .form-control,
    .input-group .form-select {
        border-radius: 8px !important;
        margin-bottom: 0.5rem !important;
    }
    
    .input-group-text {
        border-radius: 8px !important;
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Checkboxes and radios */
    .form-check {
        margin-bottom: 1rem !important;
        padding-left: 2rem !important;
    }
    
    .form-check-input {
        min-width: 20px !important;
        min-height: 20px !important;
        margin-top: 0.25rem !important;
    }
    
    .form-check-label {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        padding-left: 0.5rem !important;
    }
}

/* ============================================
   TABLES - MOBILE FRIENDLY
   ============================================ */

@media (max-width: 768px) {
    /* Table wrapper */
    .table-responsive,
    .table-wrapper {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
    }
    
    /* Tables */
    table,
    .table {
        width: 100% !important;
        font-size: 0.875rem !important;
        min-width: 600px !important; /* Prevent squishing */
    }
    
    /* Stack table cells on very small screens */
    @media (max-width: 480px) {
        .table-mobile-stack {
            display: block !important;
        }
        
        .table-mobile-stack thead {
            display: none !important;
        }
        
        .table-mobile-stack tbody,
        .table-mobile-stack tr,
        .table-mobile-stack td {
            display: block !important;
            width: 100% !important;
        }
        
        .table-mobile-stack tr {
            border: 1px solid #dee2e6 !important;
            margin-bottom: 1rem !important;
            border-radius: 8px !important;
            padding: 0.5rem !important;
        }
        
        .table-mobile-stack td {
            text-align: left !important;
            padding: 0.75rem 0.5rem !important;
            border: none !important;
            border-bottom: 1px solid #f0f0f0 !important;
        }
        
        .table-mobile-stack td:last-child {
            border-bottom: none !important;
        }
        
        .table-mobile-stack td:before {
            content: attr(data-label) ": " !important;
            font-weight: 600 !important;
            display: inline-block !important;
            width: 40% !important;
            color: #6c757d !important;
        }
    }
}

/* ============================================
   TYPOGRAPHY - READABLE ON MOBILE
   ============================================ */

@media (max-width: 768px) {
    /* Headings */
    h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.875rem !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.75rem !important;
    }
    
    h4 {
        font-size: 1.125rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.75rem !important;
    }
    
    h5 {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0.5rem !important;
    }
    
    h6 {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Body text */
    body,
    p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
    
    /* Small text */
    small,
    .small {
        font-size: 0.875rem !important;
    }
    
    /* Reduce margins */
    .mb-4 {
        margin-bottom: 1rem !important;
    }
    
    .mb-5 {
        margin-bottom: 1.5rem !important;
    }
    
    .mt-4 {
        margin-top: 1rem !important;
    }
    
    .mt-5 {
        margin-top: 1.5rem !important;
    }
    
    .py-4 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    .py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* ============================================
   MODALS - MOBILE OPTIMIZED
   ============================================ */

@media (max-width: 768px) {
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
        width: calc(100% - 1rem) !important;
    }
    
    .modal-content {
        border-radius: 12px !important;
        max-height: calc(100vh - 1rem) !important;
        overflow-y: auto !important;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1rem !important;
    }
    
    .modal-title {
        font-size: 1.25rem !important;
    }
    
    .modal-close,
    .close {
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 1.5rem !important;
    }
}

/* ============================================
   DASHBOARDS - MOBILE LAYOUT
   ============================================ */

@media (max-width: 768px) {
    .dashboard-container {
        padding: 1rem !important;
    }
    
    .dashboard-header {
        flex-direction: column !important;
        padding: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .welcome-message h1 {
        font-size: 1.75rem !important;
    }
    
    /* Dashboard grids - two columns on mobile */
    .stats-grid,
    .quick-actions-grid,
    .action-cards-grid,
    .course-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    
    /* Dashboard course cards optimization */
    .course-grid .course-card {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 580px !important; /* Maintain fixed height */
        min-height: 580px !important;
        max-height: 580px !important;
    }
    
    /* Course actions buttons - mobile optimization */
    .course-grid .course-actions {
        flex-direction: row !important; /* Keep buttons side-by-side */
        gap: 0.4rem !important; /* Reduced gap */
        flex-wrap: nowrap !important;
        margin-top: 0.4rem !important;
    }
    
    .course-grid .btn-modern {
        padding: 0.5rem 0.5rem !important; /* Reduced padding */
        font-size: 0.7rem !important; /* Smaller font */
        min-height: 36px !important; /* Smaller but touchable */
        gap: 0.25rem !important; /* Reduced icon gap */
        flex: 1 !important; /* Equal width */
        white-space: nowrap !important; /* Prevent wrapping */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .course-grid .btn-modern i {
        font-size: 0.7rem !important; /* Smaller icons */
        flex-shrink: 0 !important; /* Prevent icon shrinking */
    }
    
    .stat-card,
    .action-card,
    .earnings-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 0 !important;
        padding: 1rem !important;
    }
    
    /* Stat card content optimization for mobile */
    .stat-card .stat-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.25rem !important;
    }
    
    .stat-card .stat-value {
        font-size: 1.5rem !important;
    }
    
    .stat-card .stat-label {
        font-size: 0.75rem !important;
    }
    
    /* Action card optimization for mobile */
    .action-card {
        min-height: 120px !important;
        padding: 1rem !important;
    }
    
    .action-card .action-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.25rem !important;
    }
    
    .action-card .action-title {
        font-size: 0.9rem !important;
    }
    
    .action-card .action-description {
        font-size: 0.75rem !important;
    }
    
    /* Flex-based dashboard containers stay single column */
    
    /* Dashboard header mobile optimization */
    .dashboard-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
        padding: 1.25rem !important;
    }
    
    .welcome-message h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .welcome-message p {
        font-size: 0.9rem !important;
        word-wrap: break-word !important;
    }
    
    .date-display {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Dashboard grid mobile - single column for better readability */
    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Course cards in dashboard - single column on mobile */
    .dashboard-container .course-card,
    .dashboard-container .course-grid .course-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 1rem !important;
    }
    
    /* Text overflow prevention in dashboard */
    .dashboard-container * {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .dashboard-container h1,
    .dashboard-container h2,
    .dashboard-container h3,
    .dashboard-container h4 {
        hyphens: auto !important;
        line-height: 1.3 !important;
    }
    
    /* Tables - make responsive */
    .table-responsive,
    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    table thead {
        display: none !important;
    }
    
    table tbody,
    table tr {
        display: block !important;
        width: 100% !important;
    }
    
    table td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0.75rem !important;
        border-bottom: 1px solid #e5e7eb !important;
        text-align: left !important;
    }
    
    table td::before {
        content: attr(data-label) !important;
        font-weight: 600 !important;
        margin-right: 1rem !important;
        flex-shrink: 0 !important;
        color: var(--gray, #64748B) !important;
    }
    
    /* Alternative: Keep table structure but make scrollable */
    .table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
    }
    
    .table-wrapper table {
        min-width: 600px !important;
    }
    
    /* Forms mobile optimization */
    .form-group {
        margin-bottom: 1rem !important;
    }
    
    .form-control,
    .form-select,
    textarea.form-control {
        width: 100% !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 0.75rem !important;
        border-radius: 8px !important;
    }
    
    /* Labels and form text */
    .form-label,
    label {
        font-size: 0.9rem !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
        word-wrap: break-word !important;
    }
    
    /* Input groups */
    .input-group {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .input-group .form-control,
    .input-group .form-select {
        border-radius: 8px !important;
        margin-bottom: 0.5rem !important;
    }
    
    .input-group-text {
        border-radius: 8px !important;
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Navigation mobile fixes */
    .navbar-nav {
        width: 100% !important;
    }
    
    .navbar-nav .nav-link {
        padding: 0.875rem 1rem !important;
        text-align: left !important;
        width: 100% !important;
        word-wrap: break-word !important;
    }
    
    /* Dropdown menus full width on mobile */
    .dropdown-menu {
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        transform: none !important;
        border: none !important;
        box-shadow: none !important;
        margin-top: 0.5rem !important;
    }
    
    /* Badges and tags */
    .badge,
    .tag {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
        word-wrap: break-word !important;
        display: inline-block !important;
        max-width: 100% !important;
        padding: 16px 20px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        min-width: 0 !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    
    /* Progress bars */
    .progress {
        height: 1rem !important;
        font-size: 0.75rem !important;
    }
    
    .progress-bar {
        font-size: 0.7rem !important;
        padding: 0.125rem 0.5rem !important;
    }
    
    /* Alerts and messages */
    .alert {
        padding: 1rem !important;
        font-size: 0.9rem !important;
        word-wrap: break-word !important;
        margin-bottom: 1rem !important;
    }
    
    /* Pagination */
    .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.25rem !important;
    }
    
    .page-link {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0.5rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Breadcrumbs */
    .breadcrumb {
        flex-wrap: wrap !important;
        font-size: 0.85rem !important;
        padding: 0.75rem 0 !important;
    }
    
    .breadcrumb-item {
        word-wrap: break-word !important;
    }
    
    /* Tabs mobile */
    .nav-tabs {
        flex-wrap: wrap !important;
        border-bottom: 2px solid #e5e7eb !important;
    }
    
    .nav-tabs .nav-link {
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
        min-width: 44px !important;
        min-height: 44px !important;
        word-wrap: break-word !important;
    }
    
    /* Accordion mobile */
    .accordion-item {
        margin-bottom: 0.5rem !important;
    }
    
    .accordion-button {
        padding: 1rem !important;
        font-size: 0.95rem !important;
        min-height: 44px !important;
        word-wrap: break-word !important;
    }
    
    .accordion-body {
        padding: 1rem !important;
        font-size: 0.9rem !important;
    }
    
    /* List groups */
    .list-group-item {
        padding: 1rem !important;
        font-size: 0.9rem !important;
        word-wrap: break-word !important;
    }
    
    /* Tooltips and popovers - disable on mobile for better UX */
    .tooltip,
    .popover {
        display: none !important;
    }
    
    /* Charts and graphs - make responsive */
    .chart-container,
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Code blocks */
    pre,
    code {
        font-size: 0.8rem !important;
        word-wrap: break-word !important;
        overflow-x: auto !important;
        max-width: 100% !important;
        padding: 16px 20px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        min-width: 0 !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    
    /* Blockquotes */
    blockquote {
        font-size: 0.9rem !important;
        padding: 1rem !important;
        margin: 1rem 0 !important;
        word-wrap: break-word !important;
    }
    
    /* Images in content */
    .content img,
    .post-content img,
    .course-content img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 1rem auto !important;
    }
    
    /* Video containers */
    .video-container,
    iframe[src*="youtube"],
    iframe[src*="vimeo"] {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9 !important;
    }
    
    /* Search bars */
    .search-bar,
    .search-input {
        width: 100% !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    /* Filter sections */
    .filter-section,
    .sidebar-filters {
        width: 100% !important;
        margin-bottom: 1rem !important;
        padding: 1rem !important;
    }
    
    /* Action buttons in cards */
    .card-actions,
    .item-actions {
        flex-direction: column !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }
    
    .card-actions .btn,
    .item-actions .btn {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Empty states */
    .empty-state {
        padding: 2rem 1rem !important;
        text-align: center !important;
    }
    
    .empty-state img,
    .empty-state .icon {
        max-width: 120px !important;
        margin: 0 auto 1rem !important;
    }
    
    .empty-state h3 {
        font-size: 1.25rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .empty-state p {
        font-size: 0.9rem !important;
        word-wrap: break-word !important;
    }
    .dashboard-stats,
    .stat-cards {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    /* Legacy action cards containers */
    .action-cards,
    .quick-actions {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    
    /* Section header - justify alignment on mobile */
    .section-header {
        flex-direction: row !important; /* Keep horizontal layout */
        justify-content: space-between !important; /* Justify alignment */
        align-items: center !important;
        gap: 0.75rem !important;
        flex-wrap: wrap !important; /* Allow wrapping if needed */
    }
    
    .section-title-wrapper {
        flex: 1 !important; /* Take available space */
        min-width: 0 !important; /* Allow shrinking */
    }
    
    .view-all-link {
        flex-shrink: 0 !important; /* Prevent shrinking */
        white-space: nowrap !important; /* Keep text on one line */
    }
}

/* Small phones - keep 2 columns but reduce spacing */
@media (max-width: 480px) {
    /* Smaller profile pictures on very small phones */
    .profile-pic,
    .teacher-avatar.profile-pic,
    .teacher-profile-link .profile-pic,
    .teacher-name-link .profile-pic {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Study Plans Grid - 2 columns on small phones */
    .study-plans-grid,
    .row.study-plans-grid,
    .row.g-4.study-plans-grid {
        gap: 0.5rem !important;
    }
    
    /* Study Plans Custom Grid - 2 columns on small phones */
    .study-plans-grid-custom {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    .study-plans-grid > .study-plan-col,
    .study-plans-grid > .col-md-6.study-plan-col,
    .study-plans-grid > .col-lg-4.study-plan-col,
    .study-plans-grid > .col-md-6.col-lg-4.study-plan-col,
    .study-plans-grid > .col-md-6,
    .study-plans-grid > .col-lg-4,
    .study-plans-grid > .col-md-6.col-lg-4,
    .row.study-plans-grid > .study-plan-col,
    .row.g-4.study-plans-grid > .study-plan-col,
    .row.g-4.study-plans-grid > .col-md-6.col-lg-4,
    .row.g-4.study-plans-grid > [class*="col-"],
    .study-plans-grid > *,
    .row.g-4.study-plans-grid > * {
        width: calc((100% - 0.5rem) / 2) !important;
        max-width: calc((100% - 0.5rem) / 2) !important;
        flex: 0 0 calc((100% - 0.5rem) / 2) !important;
        flex-basis: calc((100% - 0.5rem) / 2) !important;
        box-sizing: border-box !important;
    }
    
    .stats-grid,
    .quick-actions-grid,
    .action-cards-grid,
    .course-grid {
        gap: 0.625rem !important;
    }
    
    /* Further optimize course action buttons on small phones */
    .course-grid .course-actions {
        gap: 0.3rem !important; /* Even smaller gap */
        margin-top: 0.3rem !important;
    }
    
    .course-grid .btn-modern {
        padding: 0.45rem 0.4rem !important; /* Even smaller padding */
        font-size: 0.65rem !important; /* Smaller font */
        min-height: 34px !important; /* Slightly smaller */
    }
    
    .course-grid .btn-modern i {
        font-size: 0.65rem !important; /* Smaller icons */
    }
    
    .stat-card,
    .action-card,
    .earnings-card {
        padding: 0.875rem !important;
    }
    
    .stat-card .stat-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.1rem !important;
    }
    
    .stat-card .stat-value {
        font-size: 1.25rem !important;
    }
    
    .stat-card .stat-label {
        font-size: 0.7rem !important;
    }
    
    .action-card {
        min-height: 110px !important;
        padding: 0.875rem !important;
    }
    
    .action-card .action-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.1rem !important;
    }
    
    .action-card .action-title {
        font-size: 0.85rem !important;
    }
    
    .action-card .action-description {
        font-size: 0.7rem !important;
    }
}

/* ============================================
   NEWSFEED - MOBILE OPTIMIZATION
   ============================================ */

@media (max-width: 768px) {
    .newsfeed-container {
        padding: 0.5rem !important;
    }
    
    .newsfeed-main {
        display: block !important;
        grid-template-columns: 1fr !important;
    }
    
    .feed-center {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 20px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        min-width: 0 !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    
    .post-card {
        margin-bottom: 1rem !important;
        padding: 1rem !important;
        border-radius: 12px !important;
    }
    
    /* Post actions - allow single line layout (overridden by newsfeed-specific styles) */
    .post-actions:not(.newsfeed-post-actions) {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    .post-actions:not(.newsfeed-post-actions) button {
        flex: 1 !important;
        min-width: calc(50% - 0.25rem) !important;
    }
    
    /* Sidebars hidden or stacked */
    .sidebar-left,
    .sidebar-right {
        width: 100% !important;
        position: relative !important;
        margin-top: 1.5rem !important;
    }
}

/* ============================================
   COURSE PAGES - MOBILE LAYOUT
   ============================================ */

@media (max-width: 768px) {
    .course-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    /* Courses grid - 2 columns on mobile */
    .courses-grid,
    div.courses-grid,
    .courses-page .courses-grid,
    .courses-content .courses-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.5rem !important; /* Smaller gap for mobile */
    }
    
    .courses-grid .course-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 0 !important;
        height: auto !important; /* Auto height to show all content */
        min-height: 500px !important; /* Minimum height for consistency */
    }
    
    /* Homepage featured courses - single column on mobile for better readability */
    .home-page .courses-grid,
    .home-page div.courses-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
    
    .home-page .course-card {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
    
    .home-page .course-card h3,
    .home-page .course-card .course-desc,
    .home-page .course-card .teacher-name {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    .course-detail-header {
        flex-direction: column !important;
        padding: 1rem !important;
    }
    
    .module-list {
        padding: 0.5rem !important;
    }
    
    .module-item {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
}

/* ============================================
   PARTNERS SECTION - MOBILE OPTIMIZATION
   ============================================ */

@media (max-width: 768px) {
    /* Homepage partners grid - 2x2 layout on mobile */
    .home-page .partners-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        max-width: 100% !important;
        padding: 0 10px !important;
        justify-items: stretch !important;
    }
    
    .home-page .partner-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 20px 16px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .home-page .partner-card img {
        width: 80px !important;
        height: 80px !important;
        margin-bottom: 12px !important;
        flex-shrink: 0 !important;
    }
    
    .home-page .partner-card h3 {
        font-size: 1rem !important;
        margin-bottom: 4px !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        text-align: center !important;
    }
    
    .home-page .partner-card span {
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    .home-page .partners-grid {
        gap: 10px !important;
        padding: 0 8px !important;
    }
    
    .home-page .partner-card {
        padding: 16px 12px !important;
    }
    
    .home-page .partner-card img {
        width: 70px !important;
        height: 70px !important;
        margin-bottom: 10px !important;
    }
    
    .home-page .partner-card h3 {
        font-size: 0.9rem !important;
    }
    
    .home-page .partner-card span {
        font-size: 0.75rem !important;
    }
}

/* ============================================
   FORMS & QUIZZES - MOBILE
   ============================================ */

@media (max-width: 768px) {
    .quiz-container,
    .module-container {
        padding: 1rem !important;
    }
    
    .quiz-question {
        font-size: 1.125rem !important;
        margin-bottom: 1.5rem !important;
        padding: 1rem !important;
    }
    
    .quiz-option,
    .quiz-answer {
        padding: 1rem !important;
        margin-bottom: 0.75rem !important;
        min-height: 60px !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    .quiz-actions {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .quiz-actions .btn {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
}

/* ============================================
   LIVE CLASSES - MOBILE
   ============================================ */

@media (max-width: 768px) {
    .meet-container,
    .live-class-container {
        flex-direction: column !important;
        padding: 0.5rem !important;
    }
    
    .video-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
    
    .controls-bar {
        flex-wrap: wrap !important;
        padding: 0.5rem !important;
        gap: 0.5rem !important;
    }
    
    .control-button {
        min-width: 48px !important;
        min-height: 48px !important;
        font-size: 1.25rem !important;
        flex: 1 !important;
    }
    
    .meet-sidebar {
        width: 100% !important;
        max-height: 50vh !important;
        margin-top: 1rem !important;
    }
}

/* ============================================
   MESSAGING & CHAT - MOBILE
   ============================================ */

@media (max-width: 768px) {
    .message-container,
    .chat-container {
        flex-direction: column !important;
        height: auto !important;
        min-height: calc(100vh - 120px) !important;
    }
    
    .message-list,
    .chat-list {
        width: 100% !important;
        max-height: 40vh !important;
    }
    
    .message-thread,
    .chat-thread {
        width: 100% !important;
        max-height: 50vh !important;
    }
    
    .message-input,
    .chat-input {
        width: 100% !important;
        padding: 0.75rem !important;
    }
}

/* ============================================
   HERO SECTIONS - MOBILE
   ============================================ */

@media (max-width: 768px) {
    .hero {
        min-height: auto !important;
        padding: 3rem 1rem !important;
        text-align: center !important;
    }
    
    .hero h1 {
        font-size: 2rem !important;
        margin-bottom: 1rem !important;
    }
    
    .hero p {
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .hero .btn {
        width: 100% !important;
        max-width: 300px !important;
        margin: 0.5rem auto !important;
    }
}

/* ============================================
   FOOTER - MOBILE
   ============================================ */

@media (max-width: 768px) {
    footer {
        padding: 1rem !important;
        text-align: center !important;
    }
    
    footer .row {
        flex-direction: column !important;
    }
    
    footer .col {
        margin-bottom: 1rem !important;
    }
    
    footer ul {
        list-style: none !important;
        padding: 0 !important;
    }
    
    footer li {
        margin-bottom: 0.5rem !important;
    }
    
    /* Fix social media links - prevent overflow */
    footer .col-12.col-md-3 {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    footer .col-12.col-md-3 ul {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    footer .col-12.col-md-3 li {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    footer .col-12.col-md-3 li a {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }
    
    footer .col-12.col-md-3 li a i {
        flex-shrink: 0 !important;
        width: 20px !important;
        text-align: center !important;
    }
}

/* ============================================
   SMALL PHONES (480px and below)
   ============================================ */

@media (max-width: 480px) {
    /* Even smaller padding */
    .container,
    .container-fluid {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Smaller headings */
    h1 {
        font-size: 1.5rem !important;
    }
    
    h2 {
        font-size: 1.25rem !important;
    }
    
    h3 {
        font-size: 1.125rem !important;
    }
    
    /* Tighter spacing */
    .card-body {
        padding: 0.75rem !important;
    }
    
    .btn {
        padding: 0.625rem 1.25rem !important;
        font-size: 0.9375rem !important;
    }
    
    /* Smaller navbar */
    .navbar-brand {
        font-size: 1.125rem !important;
    }
    
    /* Compact forms */
    .form-control,
    input,
    textarea,
    select {
        padding: 0.625rem !important;
        font-size: 16px !important;
    }
}

/* ============================================
   VERY SMALL PHONES (320px)
   ============================================ */

@media (max-width: 320px) {
    /* Minimal padding */
    .container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* Compact everything */
    .card-body {
        padding: 0.5rem !important;
    }
    
    .btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    h1 {
        font-size: 1.25rem !important;
    }
    
    h2 {
        font-size: 1.125rem !important;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Hide on mobile */
@media (max-width: 768px) {
    .hide-mobile,
    .d-none.d-md-block,
    .d-none.d-md-flex,
    .d-none.d-lg-block,
    .d-none.d-lg-flex {
        display: none !important;
    }
}

/* Show only on mobile */
.show-mobile {
    display: none !important;
}

@media (max-width: 768px) {
    .show-mobile,
    .d-md-none,
    .d-lg-none {
        display: block !important;
    }
}

/* Full width on mobile */
@media (max-width: 768px) {
    .full-width-mobile {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ============================================
   ACCESSIBILITY & PERFORMANCE
   ============================================ */

@media (max-width: 768px) {
    /* Larger focus indicators for touch */
    *:focus {
        outline: 3px solid rgba(0, 166, 81, 0.5) !important;
        outline-offset: 2px !important;
    }
    
    /* Smooth scrolling */
    html {
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Reduce animations for performance */
    *,
    *::before,
    *::after {
        animation-duration: 0.2s !important;
        transition-duration: 0.2s !important;
    }
    
    /* Disable hover effects on touch devices */
    @media (hover: none) {
        .btn:hover,
        .card:hover,
        .nav-link:hover {
            transform: none !important;
            box-shadow: none !important;
        }
    }
}

/* ============================================
   FIXES FOR COMMON ISSUES
   ============================================ */

/* Prevent text overflow */
@media (max-width: 768px) {
    * {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Prevent horizontal scroll from long words */
    p, span, div, h1, h2, h3, h4, h5, h6 {
        word-break: break-word !important;
    }
}

/* Homepage button centering fix */
@media (max-width: 767px) {
    .home-page .hero-container,
    .home-page .cta-container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .home-page .btn-primary-home,
    .home-page .btn-secondary-home,
    .home-page .btn-white,
    .home-page .btn-outline-white {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 20px !important;
        white-space: nowrap !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        overflow: visible !important;
        position: relative !important;
    }
    
    .home-page .btn-primary-home .btn-text,
    .home-page .btn-secondary-home .btn-text,
    .home-page .btn-white .btn-text,
    .home-page .btn-outline-white .btn-text {
        flex: 0 0 auto !important;
        overflow: visible !important;
        white-space: nowrap !important;
        text-align: center !important;
    }
    
    .home-page .btn-primary-home i,
    .home-page .btn-secondary-home i,
    .home-page .btn-white i,
    .home-page .btn-outline-white i {
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        width: auto !important;
    }
    
    .home-page .hero-buttons,
    .home-page .cta-buttons {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        gap: 12px !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
    }
}

/* Extra small screens (≤375px) - iPhone SE and similar */
@media (max-width: 375px) {
    .home-page .hero-container,
    .home-page .cta-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    .home-page .btn-primary-home,
    .home-page .btn-secondary-home,
    .home-page .btn-white,
    .home-page .btn-outline-white {
        padding: 14px 16px !important;
        font-size: 0.95rem !important;
        gap: 6px !important;
    }
    
    .home-page .btn-primary-home i,
    .home-page .btn-secondary-home i,
    .home-page .btn-white i,
    .home-page .btn-outline-white i {
        margin-left: 6px !important;
        font-size: 0.9rem !important;
    }
}

/* Fix fixed elements on mobile – do NOT force main navbar to relative; it must stay fixed at top */
@media (max-width: 991.98px) {
    .fixed-top:not(body > .navbar):not(.ilearnzed-navbar),
    .sticky-top:not(body > .navbar):not(.ilearnzed-navbar) {
        position: relative !important;
    }
    
    /* Main navbar: fixed at top, unscrollable, always visible – only content below scrolls */
    body > .navbar,
    .ilearnzed-navbar.navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1050 !important;
        flex-shrink: 0 !important;
        overflow: visible !important;
    }
    body {
        padding-top: calc(60px + env(safe-area-inset-top, 0)) !important;
    }
    footer.fixed-bottom {
        position: fixed !important;
    }
}

@media (max-width: 575.98px) {
    body {
        padding-top: calc(56px + env(safe-area-inset-top, 0)) !important;
    }
}

/* ============================================
   COMPREHENSIVE LOGGED-IN VIEWS MOBILE OPTIMIZATION
   ============================================ */

@media (max-width: 768px) {
    /* Dashboard header mobile optimization */
    .dashboard-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
        padding: 1.25rem !important;
    }
    
    .welcome-message h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .welcome-message p {
        font-size: 0.9rem !important;
        word-wrap: break-word !important;
    }
    
    .date-display {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Dashboard grid mobile - single column for better readability */
    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Text overflow prevention in dashboard */
    .dashboard-container * {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .dashboard-container h1,
    .dashboard-container h2,
    .dashboard-container h3,
    .dashboard-container h4 {
        hyphens: auto !important;
        line-height: 1.3 !important;
    }
    
    /* Tables - make responsive with horizontal scroll */
    .table-responsive,
    .table-wrapper {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .table-responsive table,
    .table-wrapper table {
        min-width: 600px !important;
        width: 100% !important;
    }
    
    /* Forms mobile optimization */
    .form-group {
        margin-bottom: 1rem !important;
    }
    
    .form-control,
    .form-select,
    textarea.form-control {
        width: 100% !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 0.75rem !important;
        border-radius: 8px !important;
    }
    
    /* Labels and form text */
    .form-label,
    label {
        font-size: 0.9rem !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
        word-wrap: break-word !important;
    }
    
    /* Input groups */
    .input-group {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .input-group .form-control,
    .input-group .form-select {
        border-radius: 8px !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Navigation mobile fixes */
    .navbar-nav .nav-link {
        word-wrap: break-word !important;
    }
    
    /* Badges and tags */
    .badge,
    .tag {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
        word-wrap: break-word !important;
        display: inline-block !important;
        max-width: 100% !important;
        padding: 16px 20px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        min-width: 0 !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    
    /* Progress bars */
    .progress {
        height: 1rem !important;
        font-size: 0.75rem !important;
    }
    
    /* Alerts and messages */
    .alert {
        padding: 1rem !important;
        font-size: 0.9rem !important;
        word-wrap: break-word !important;
        margin-bottom: 1rem !important;
    }
    
    /* Pagination */
    .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.25rem !important;
    }
    
    .page-link {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0.5rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Tabs mobile */
    .nav-tabs {
        flex-wrap: wrap !important;
    }
    
    .nav-tabs .nav-link {
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
        min-width: 44px !important;
        min-height: 44px !important;
        word-wrap: break-word !important;
    }
    
    /* Card headers with actions */
    .card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }
    
    .card-header .card-title {
        width: 100% !important;
        word-wrap: break-word !important;
    }
    
    .card-header .card-actions {
        width: 100% !important;
        justify-content: flex-start !important;
    }
    
    /* Action buttons in cards */
    .card-actions,
    .item-actions {
        flex-direction: column !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }
    
    .card-actions .btn,
    .item-actions .btn {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Images in content */
    .content img,
    .post-content img,
    .course-content img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 1rem auto !important;
    }
    
    /* Video containers */
    .video-container,
    iframe[src*="youtube"],
    iframe[src*="vimeo"] {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9 !important;
    }
    
    /* Search bars */
    .search-bar,
    .search-input {
        width: 100% !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    /* Checkboxes and radios - larger touch targets */
    input[type="checkbox"],
    input[type="radio"] {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
    }
    
    label:has(input[type="checkbox"]),
    label:has(input[type="radio"]) {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        padding: 0.5rem !important;
        min-height: 44px !important;
    }
    
    /* Text areas */
    textarea {
        width: 100% !important;
        min-height: 120px !important;
        font-size: 16px !important;
        padding: 0.75rem !important;
    }
    
    /* Date pickers */
    .date-picker,
    input[type="date"],
    input[type="datetime-local"] {
        width: 100% !important;
        font-size: 16px !important;
    }
    
    /* File inputs */
    input[type="file"] {
        width: 100% !important;
        font-size: 16px !important;
    }
    
    /* Profile sections */
    .profile-section {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .profile-header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    .profile-avatar {
        margin-bottom: 1rem !important;
    }
    
    /* Notification items */
    .notification-item {
        padding: 1rem !important;
        word-wrap: break-word !important;
    }
    
    /* Course list items */
    .course-list-item {
        flex-direction: column !important;
        padding: 1rem !important;
    }
    
    .course-list-item .course-info {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }
    
    .course-list-item .course-actions {
        width: 100% !important;
        flex-direction: column !important;
    }
    
    /* Empty states */
    .empty-state {
        padding: 2rem 1rem !important;
        text-align: center !important;
    }
    
    .empty-state h3 {
        font-size: 1.25rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .empty-state p {
        font-size: 0.9rem !important;
        word-wrap: break-word !important;
    }
}

/* ============================================
   BUG_6_GLOBAL_MOBILE_FOUNDATIONS - CRITICAL RESET
   ============================================ */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative !important;
        writing-mode: horizontal-tb !important;
        -webkit-text-size-adjust: 100%;
        touch-action: manipulation;
    }
    * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
        writing-mode: horizontal-tb !important;
    }
    .row, .grid, [class*=" grid\], [class*=\row\] {
 display: flex !important;
 flex-direction: column !important;
 width: 100% !important;
 margin-left: 0 !important;
 margin-right: 0 !important;
 padding-left: 0 !important;
 padding-right: 0 !important;
 }
 .container, .container-fluid {
 padding-left: 15px !important;
 padding-right: 15px !important;
 width: 100% !important;
 }
}