/* ===========================
   SIMPLE MOBILE CARD PADDING FIX
   Clean, minimal approach
   =========================== */

/* Mobile card improvements - clean and simple */
@media screen and (max-width: 768px) {
    /* Override the viewport width header on mobile */
    .main-header {
        width: 100% !important;
        margin-left: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* Fix main content layout */
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }
    
    /* Better card spacing */
    .card {
        margin-bottom: 1.5rem !important;
    }
    
    /* Fix internal padding without breaking layout */
    .card .card-body {
        padding: 1.75rem !important;
    }
    
    /* Ensure text doesn't touch edges */
    .card .card-body small,
    .card .card-body .text-muted {
        padding: 0.5rem 0.25rem !important;
        margin: 0.5rem 0 0 0 !important;
    }
    
    /* Clean metric display */
    .card .metric-value,
    .card h3 {
        margin-bottom: 0.75rem !important;
    }
    
    .card .metric-label,
    .card p:not(.text-muted) {
        margin-bottom: 0.75rem !important;
    }
}

/* Smaller screens need less padding */
@media screen and (max-width: 576px) {
    .card .card-body {
        padding: 1.5rem !important;
    }
}

@media screen and (max-width: 480px) {
    .card .card-body {
        padding: 1.25rem !important;
    }
}