/* Mobile Container Padding Reduction Fix */
/* Aggressively reduces left/right padding on mobile devices for better space utilization */

/* ============================================
   MOBILE DEVICES (up to 576px)
   ============================================ */
@media (max-width: 575.98px) {
    /* Override Bootstrap default container padding */
    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container,
    .container-fluid {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Target all layout wrapper variations */
    .layout-wrapper .container-xxl,
    .layout-wrapper .container-xl,
    .layout-wrapper .container-lg,
    .layout-wrapper .container-md,
    .layout-wrapper .container-sm,
    .layout-wrapper .container,
    .layout-wrapper .container-fluid {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Target content wrapper specifically */
    .content-wrapper .container-xxl,
    .content-wrapper .container-xl,
    .content-wrapper .container-lg,
    .content-wrapper .container-md,
    .content-wrapper .container-sm,
    .content-wrapper .container,
    .content-wrapper .container-fluid {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Target layout-page variations */
    .layout-page .container-xxl,
    .layout-page .container-xl,
    .layout-page .container-lg,
    .layout-page .container-md,
    .layout-page .container-sm,
    .layout-page .container,
    .layout-page .container-fluid {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Maximum specificity overrides */
    html body .container-xxl,
    html body .container-xl,
    html body .container-lg,
    html body .container-md,
    html body .container-sm,
    html body .container,
    html body .container-fluid {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    html body .layout-wrapper .container-xxl,
    html body .layout-page .container-xxl,
    html body .content-wrapper .container-xxl {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Override navbar container padding */
    .layout-navbar.container-xxl,
    html body .layout-navbar.container-xxl {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Specific fix for flex-grow containers */
    .container-xxl.flex-grow-1,
    .container-xxl.flex-grow-1.container-p-y,
    html body .container-xxl.flex-grow-1.container-p-y {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Adjust Bootstrap row negative margins to match reduced padding */
    .container-xxl > .row,
    .container-xl > .row,
    .container-lg > .row,
    .container-md > .row,
    .container-sm > .row,
    .container > .row,
    .container-fluid > .row {
        margin-left: -0.4rem !important;
        margin-right: -0.4rem !important;
    }

    /* Adjust column padding accordingly */
    .row > [class*="col-"],
    .row > [class^="col-"] {
        padding-left: 0.4rem !important;
        padding-right: 0.4rem !important;
    }

    /* Override any card container spacing */
    .card {
        margin-bottom: 0.8rem !important;
    }
}

/* ============================================
   SMALL TABLETS (576px to 767.98px)
   ============================================ */
@media (min-width: 576px) and (max-width: 767.98px) {
    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container,
    .container-fluid {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .content-wrapper .container-xxl,
    .layout-wrapper .container-xxl,
    .layout-page .container-xxl {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    html body .container-xxl,
    html body .content-wrapper .container-xxl {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .row {
        margin-left: -0.6rem !important;
        margin-right: -0.6rem !important;
    }

    .row > [class*="col-"] {
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
    }
}

/* ============================================
   TABLETS (768px to 991.98px)
   ============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .content-wrapper .container-xxl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ============================================
   DESKTOP (992px and above)
   Keep existing 1.5rem padding from content-width-adjustment.css
   ============================================ */