/* ═══════════════════════════════════════════════════════════════════
   MOBILE PADDING OPTIMIZATION - Aggressive reduction on phones
   This file optimizes inline padding styles for mobile devices
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Reduce container and div padding on tablets */
    div[style*="padding: 0 20px"],
    div[style*="padding: 20px"],
    div[style*="padding: 1.5rem"],
    div[style*="padding: 1rem"],
    section[style*="padding"],
    article[style*="padding"] {
        padding: 0.75rem !important;
    }
    
    /* Form elements padding reduction */
    input[style*="padding"],
    select[style*="padding"],
    textarea[style*="padding"] {
        padding: 0.55rem !important;
    }
}

@media (max-width: 576px) {
    /* Aggressive padding reduction on small phones */
    div[style*="padding: 0 20px"],
    div[style*="padding: 20px"],
    div[style*="padding: 1.5rem"],
    div[style*="padding: 1rem"],
    div[style*="padding: 0.75rem"],
    .d-lg-none[style*="padding"],
    section[style*="padding"],
    article[style*="padding"] {
        padding: 0.5rem !important;
    }
    
    /* Form controls on mobile */
    input[style*="padding: 0.75rem"],
    select[style*="padding: 0.75rem"],
    textarea[style*="padding: 0.75rem"] {
        padding: 0.45rem !important;
    }
    
    /* Badge and inline span padding */
    span[style*="padding: 0.35rem"],
    span[style*="padding: 0.5rem"],
    span[style*="padding: 0.75rem"] {
        padding: 0.25rem 0.4rem !important;
    }
    
    /* Reduce gaps in flex containers */
    div[style*="gap: 1rem"],
    div[style*="gap: 1.5rem"] {
        gap: 0.5rem !important;
    }
}

@media (max-width: 480px) {
    /* Minimal padding on very small screens */
    div[style*="padding: 0 20px"],
    div[style*="padding: 20px"],
    div[style*="padding: 1.5rem"],
    div[style*="padding: 1rem"],
    div[style*="padding: 0.75rem"],
    .d-lg-none[style*="padding"],
    section[style*="padding"],
    article[style*="padding"],
    [style*="margin-bottom: 1rem"],
    [style*="margin-top: 1rem"] {
        padding: 0.35rem !important;
        margin-bottom: 0.5rem !important;
        margin-top: 0.5rem !important;
    }
    
    /* Form controls extreme mobile optimization */
    input[style*="padding"],
    select[style*="padding"],
    textarea[style*="padding"] {
        padding: 0.35rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Minimal gaps */
    div[style*="gap"],
    [style*="gap:"] {
        gap: 0.25rem !important;
    }
}

@media (max-width: 360px) {
    /* Ultra-small screens - extreme optimization */
    div[style*="padding"],
    section[style*="padding"],
    article[style*="padding"],
    [style*="margin"] {
        padding: 0.25rem !important;
        margin: 0.25rem !important;
    }
    
    /* Form controls on tiny screens */
    input[style*="padding"],
    select[style*="padding"],
    textarea[style*="padding"] {
        padding: 0.3rem !important;
        font-size: 0.85rem !important;
    }
}

/* Additional optimization: Reduce margin spacing on mobile */
@media (max-width: 576px) {
    /* Reduce margins in list items and cards */
    .d-lg-none,
    .d-md-none {
        margin: 0.25rem 0 !important;
    }
    
    /* Optimize table view on mobile */
    table {
        margin: 0 !important;
    }
    
    /* Reduce heading margins on mobile */
    h1, h2, h3, h4, h5, h6 {
        margin-bottom: 0.5rem !important;
    }
    
    /* Optimize paragraph spacing */
    p {
        margin-bottom: 0.5rem !important;
    }
}

/* Ensure proper spacing for specific high-padding elements */
@media (max-width: 576px) {
    /* Admin dashboard specific optimizations */
    .admin-card,
    .admin-page,
    .dashboard-page {
        margin-bottom: 0.75rem !important;
    }
    
    /* Course cards spacing */
    .course-card {
        margin-bottom: 0.75rem !important;
    }
    
    /* Mobile card adjustments */
    .card {
        margin-bottom: 0.5rem !important;
    }
}