/* Slightly reduce content width */

/* Make container-xxl slightly narrower */
.container-xxl {
    max-width: 1260px !important; /* Reduced from 1320px - 60px narrower */
}

@media (max-width: 1399.98px) {
    .container-xxl {
        max-width: 1100px !important; /* Reduced from 1140px - 40px narrower */
    }
}

@media (max-width: 1199.98px) {
    .container-xxl {
        max-width: 940px !important; /* Reduced from 960px - 20px narrower */
    }
}

/* Keep default padding for desktop only */
@media (min-width: 768px) {
    .content-wrapper .container-xxl,
    .layout-navbar.container-xxl {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Fix for laptop screens with visible menu but limited width */
/* Targets: 14" and 15" laptops with 1366px-1450px resolution */
/* Problem: Menu is visible (260px) but screen width causes content to touch edges */
@media (min-width: 1200px) and (max-width: 1450px) {
    /* Reduce content width to create breathing room */
    .content-wrapper .container-xxl {
        max-width: 1050px !important;  /* Reduced from 1100px - creates 56px+ margins */
        padding-left: 2rem !important;   /* Increased from 1.5rem (24px to 32px) */
        padding-right: 2rem !important;  /* Increased from 1.5rem (24px to 32px) */
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Fix navbar overlap issue - Add top spacing to main content area */
/* This prevents the top navbar from hiding breadcrumbs and buttons */
.layout-wrapper .content-wrapper {
    padding-top: 2rem !important; /* Add space between navbar and content */
}

/* More specific selectors for all container types */
.content-wrapper > div[class*="container"] {
    padding-top: 2rem !important;
}

.content-wrapper .container-xxl,
.content-wrapper .container-fluid,
.content-wrapper .container-lg,
.content-wrapper .container-md,
.content-wrapper .container-sm,
.content-wrapper .container {
    padding-top: 2rem !important;
}

/* Ensure all direct children of content-wrapper have top spacing */
.content-wrapper > div:first-child {
    padding-top: 2rem !important;
}

/* For pages that start with row directly inside container */
.content-wrapper .row:first-child {
    margin-top: 2rem !important;
}

/* Adjust for different screen sizes */
@media (max-width: 1199.98px) {
    .layout-wrapper .content-wrapper,
    .content-wrapper > div[class*="container"],
    .content-wrapper > div:first-child {
        padding-top: 1.5rem !important;
    }
    .content-wrapper .row:first-child {
        margin-top: 1.5rem !important;
    }
}

@media (max-width: 767.98px) {
    .layout-wrapper .content-wrapper,
    .content-wrapper > div[class*="container"],
    .content-wrapper > div:first-child {
        padding-top: 1rem !important;
    }
    .content-wrapper .row:first-child {
        margin-top: 1rem !important;
    }
}