/* mobile-fixes.css - Universal mobile fixes for all pages */

/* ===== RESET EXISTING SPACING FIRST (Prevent double gaps) ===== */
@media (max-width: 768px) {
    /* Reset margins and padding for common elements */
    .dashboard-header,
    header:not(.navbar),
    .page-header,
    .banner:not(.navbar),
    .miel-header,
    .title-container,
    .content-container,
    .main-container {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* ===== MOBILE NAVBAR FIXES (Works on any page) ===== */
@media (max-width: 991px) {
    /* Stack navbar items vertically in dropdown */
    .navbar-collapse {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background-color: white !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
        border-radius: 0 0 10px 10px !important;
        z-index: 1000 !important;
        padding: 15px !important;
        display: none !important; /* Hidden by default */
    }
    
    /* Show navbar when toggler is clicked */
    .navbar-collapse.show {
        display: block !important;
    }
    
    /* Make navbar items stack vertically */
    .navbar-nav {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    /* Style individual nav items for mobile */
    .navbar-nav .nav-item {
        width: 100% !important;
        margin: 5px 0 !important;
    }
    
    .navbar-nav .nav-link {
        padding: 12px 15px !important;
        border-radius: 8px !important;
        text-align: left !important;
        font-size: 1rem !important;
        color: #333 !important;
        background-color: #f8f9fa !important;
        transition: all 0.3s !important;
    }
    
    .navbar-nav .nav-link:hover {
        background-color: #4A90E2 !important;
        color: white !important;
    }
    
    /* Keep the logo visible on left */
    .navbar-brand {
        display: flex !important;
        align-items: center !important;
        margin-right: 0 !important;
    }
    
    /* Show and style the navbar toggler button on right */
    .navbar-toggler {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border: 2px solid #4A90E2 !important;
        border-radius: 8px !important;
        background-color: transparent !important;
        position: relative !important;
        margin-left: auto !important;
    }
    
    /* Style the hamburger icon */
    .navbar-toggler-icon {
        background-image: none !important;
        width: 24px !important;
        height: 24px !important;
        position: relative !important;
    }
    
    /* Create custom hamburger icon */
    .navbar-toggler-icon::before,
    .navbar-toggler-icon::after {
        content: '' !important;
        position: absolute !important;
        width: 24px !important;
        height: 3px !important;
        background-color: #4A90E2 !important;
        border-radius: 2px !important;
        left: 0 !important;
        transition: all 0.3s !important;
    }
    
    .navbar-toggler-icon::before {
        top: 5px !important;
    }
    
    .navbar-toggler-icon::after {
        bottom: 5px !important;
    }
    
    /* Middle line for hamburger */
    .navbar-toggler-icon {
        background-color: #4A90E2 !important;
        height: 3px !important;
        width: 24px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    
    /* Animate hamburger when expanded */
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        background-color: transparent !important;
    }
    
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
        transform: rotate(45deg) !important;
        top: 10px !important;
    }
    
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
        transform: rotate(-45deg) !important;
        bottom: 10px !important;
    }
    
    /* Adjust navbar container for mobile */
    .navbar .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Ensure navbar takes full width on mobile */
    .navbar {
        padding: 10px 0 !important;
    }
}

/* ===== DASHBOARD HEADER & IMAGE FIXES ===== */
@media (max-width: 768px) {
    /* Fix dashboard header container */
    .dashboard-header {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 15px !important;
        margin: 0 auto 25px auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Fix logo container */
    .dashboard-header .logo,
    header .logo:not(.navbar-brand) {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin: 0 auto 20px auto !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }
    
    /* Fix the oversized dashboard images */
    .dashboard-header img,
    header img[alt*="Dashboard"],
    header img[alt*="Teacher"],
    header img[alt*="Student"],
    .dashboard-title-image,
    img[style*="max-width: 550px"] {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto 20px auto !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }
    
    /* Override inline styles on mobile */
    .dashboard-header img[style*="max-width"],
    header img[style*="max-width"] {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }
    
    /* Fix subtitle */
    .dashboard-header .subtitle,
    header .subtitle {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
        margin: 15px auto !important;
        font-size: 1rem !important;
        line-height: 1.4 !important;
        text-align: center !important;
        word-wrap: break-word !important;
    }
    
    /* Fix welcome message */
    .dashboard-header .welcome-message,
    header .welcome-message {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px !important;
        margin: 15px auto !important;
        font-size: 1.1rem !important;
        text-align: center !important;
        background-color: #f8f9fa !important;
        border-radius: 10px !important;
        word-wrap: break-word !important;
    }
}

/* ===== MIEL TITLE BANNER FIXES (For all dashboard pages) ===== */
@media (max-width: 768px) {
    /* Fix for MIEL title banners that exceed screen width */
    .page-title-banner,
    .dashboard-banner,
    .banner-title,
    .title-container,
    h1.text-center,
    .display-4,
    .banner-heading {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px !important;
        margin: 0 auto 25px auto !important;
        text-align: center !important;
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        box-sizing: border-box !important;
    }
    
    /* Specific fix for large MIEL dashboard titles */
    .miel-dashboard-title,
    .teacher-dashboard-title,
    .student-dashboard-title {
        font-size: 1.5rem !important;
        padding: 15px !important;
        margin: 15px auto 25px auto !important;
        max-width: 95% !important;
    }
    
    /* Fix for any container with MIEL branding */
    .miel-header,
    .dashboard-header,
    .page-header {
        width: 100% !important;
        padding: 15px !important;
        margin: 0 auto 25px auto !important;
        overflow: hidden !important;
    }
    
    /* Center and constrain any banner images */
    .miel-banner-container,
    .banner-image-container,
    .title-banner-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
        margin: 0 auto 25px auto !important;
        text-align: center !important;
        overflow: hidden !important;
    }
    
    .miel-banner,
    .banner-img,
    .title-image {
        width: 100% !important;
        height: auto !important;
        max-width: 500px !important;
        margin: 0 auto 20px auto !important;
        display: block !important;
    }
}

/* ===== FORM CENTERING FIXES (For login/registration pages) ===== */
@media (max-width: 768px) {
    /* Center form containers */
    .narrow-form-container,
    .form-container,
    .login-container,
    .register-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: calc(100vh - 150px) !important;
        padding: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Center main cards */
    .main-card,
    .form-card,
    .login-card,
    .card {
        width: 100% !important;
        max-width: 500px !important;
        margin: 0 auto 20px auto !important;
        align-self: center !important;
        padding: 20px !important;
    }
    
    /* Center content containers */
    .content-container,
    .main-container,
    .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
        max-width: 100% !important;
        overflow: hidden !important;
        margin-bottom: 20px !important;
    }
}

/* ===== GENERAL IMAGE FIXES FOR ALL PAGES ===== */
@media (max-width: 768px) {
    /* Fix all header images */
    header img:not(.navbar-brand img),
    .dashboard-header img,
    .page-header img,
    .banner-image {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto 20px auto !important;
        box-sizing: border-box !important;
    }
    
    /* Fix any image with "dashboard" in alt text */
    img[alt*="dashboard"],
    img[alt*="Dashboard"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
        margin-bottom: 20px !important;
        box-sizing: border-box !important;
    }
    
    /* Override any inline styles that might be causing overflow */
    img[style*="max-width"],
    img[style*="width"] {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
        margin-bottom: 20px !important;
    }
    
    /* Fix containers that might be causing overflow */
    header:not(.navbar),
    .dashboard-header,
    .page-header,
    .banner-container {
        overflow: hidden !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 20px !important;
    }
}

/* ===== GENERAL MOBILE OPTIMIZATIONS ===== */
@media (max-width: 768px) {
    /* Make all containers responsive */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        margin-bottom: 20px !important;
    }
    
    /* Add spacing to all rows */
    .row {
        margin-bottom: 20px !important;
    }
    
    /* Add spacing to all columns */
    .col, .col-sm, .col-md, .col-lg, .col-xl {
        margin-bottom: 15px !important;
    }
    
    /* Fix table overflow */
    table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
    }
    
    /* Prevent horizontal scrolling */
    body, html {
        max-width: 100% !important;
        overflow-x: hidden !important;
        position: relative !important;
    }
    
    /* Fix button sizes for touch */
    .btn, button, .top-button {
        min-height: 44px !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }
    
    /* Prevent iOS zoom on inputs */
    input, select, textarea {
        font-size: 16px !important;
        margin-bottom: 15px !important;
    }
    
    /* Ensure all elements stay within bounds */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Add spacing to lists */
    ul, ol {
        margin-bottom: 20px !important;
        padding-left: 20px !important;
    }
    
    /* Add spacing to paragraphs */
    p {
        margin-bottom: 15px !important;
        line-height: 1.5 !important;
    }
}

/* ===== VERTICAL SPACING BETWEEN SECTIONS ===== */
/* This adds gaps ONLY where elements are directly adjacent with little/no spacing */
@media (max-width: 768px) {
    /* Add spacing after title banners when followed by another element */
    .dashboard-header + *:not(.dashboard-header):not(header),
    header + *:not(.dashboard-header):not(header),
    .page-title-banner + *,
    .banner-title + * {
        margin-top: 25px !important;
    }
    
    /* Add spacing between consecutive sections */
    .section + .section,
    .container + .container:not(.navbar .container),
    .card + .card {
        margin-top: 20px !important;
    }
    
    /* Add spacing between form groups */
    .form-group + .form-group {
        margin-top: 20px !important;
    }
    
    /* Add spacing between buttons in a row */
    .btn + .btn:not(.btn-group .btn) {
        margin-left: 0 !important;
        margin-top: 10px !important;
    }
    
    /* Add spacing after navigation */
    .navbar + .container,
    .nav + .content {
        margin-top: 20px !important;
    }
}

/* ===== VERY SMALL SCREENS ===== */
@media (max-width: 480px) {
    /* Form containers */
    .narrow-form-container,
    .form-container {
        padding: 15px 10px !important;
        min-height: calc(100vh - 120px) !important;
    }
    
    /* Cards */
    .main-card,
    .form-card {
        padding: 15px !important;
        margin-bottom: 15px !important;
    }
    
    /* Buttons */
    .btn-login,
    .btn-submit {
        width: 100% !important;
        max-width: none !important;
        margin-bottom: 15px !important;
    }
    
    /* Adjust navbar for very small screens */
    .navbar-brand img {
        width: 150px !important;
    }
    
    .navbar-toggler {
        width: 40px !important;
        height: 40px !important;
    }
    
    /* Make titles even smaller on very small screens */
    .page-title-banner,
    .dashboard-banner,
    h1.text-center,
    .display-4 {
        font-size: 1.5rem !important;
        padding: 15px 10px !important;
        margin-bottom: 20px !important;
    }
    
    /* Fix dashboard images for small screens */
    .dashboard-header img,
    header img[alt*="Dashboard"],
    header img[alt*="Teacher"],
    header img[alt*="Student"] {
        max-width: 95% !important;
        padding: 0 5px !important;
        margin-bottom: 15px !important;
    }
    
    /* Dashboard subtitles */
    .dashboard-header .subtitle,
    header .subtitle {
        font-size: 0.9rem !important;
        padding: 0 10px !important;
        margin: 10px auto !important;
    }
    
    /* Welcome messages */
    .dashboard-header .welcome-message,
    header .welcome-message {
        font-size: 1rem !important;
        padding: 12px !important;
        margin: 10px auto !important;
    }
    
    /* Fix MIEL banner images for small screens */
    .miel-banner,
    .banner-img {
        max-width: 95% !important;
        margin: 0 auto 15px auto !important;
    }
    
    /* Reduce spacing on very small screens */
    .dashboard-header + *,
    header + *,
    .page-header + * {
        margin-top: 20px !important;
    }
    
    .card + .card {
        margin-top: 15px !important;
    }
}

/* ===== DESKTOP STYLING (Keep original) ===== */
@media (min-width: 992px) {
    .navbar-collapse {
        display: flex !important;
    }
    
    /* Hide toggler on desktop */
    .navbar-toggler {
        display: none !important;
    }
    
    /* Original desktop navbar layout */
    .navbar .container {
        padding-left: 300px !important;
        padding-right: 300px !important;
        justify-content: space-between !important;
    }
}

/* ===== EXTRA SAFEGUARD FOR IMAGES ===== */
/* This ensures NO image can exceed screen width */
img {
    max-width: 100% !important;
    height: auto !important;
}

@media (max-width: 768px) {
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

@media (max-width: 768px) {
    .login-page .miel-banner-container {
        margin-bottom: 15px !important;
    }
    
    .login-page .navbar {
        margin-bottom: 15px !important;
    }
    
    .login-page .narrow-form-container {
        min-height: calc(100vh - 120px) !important;
        padding-top: 10px !important;
    }
}

@media (max-width: 480px) {
    .login-page .miel-banner-container {
        margin-bottom: 10px !important;
    }
    
    .login-page .narrow-form-container {
        min-height: calc(100vh - 100px) !important;
    }
}