/*
 * Bootstrap Extension for Large Screens
 * Extends Bootstrap's responsive breakpoints and container widths for modern high-resolution displays
 * 
 * New breakpoints:
 * - xxxl: 1920px (Full HD and above)
 * - xxxxl: 2560px (QHD/2K and above)
 * - xxxxxl: 2880px (Retina 5K and above)
 */

/* ============================================
   Extended Breakpoints - Container Max Widths
   ============================================ */

/* xxxl breakpoint: 1920px and up */
@media (min-width: 1920px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl,
    .container-xxxl {
        max-width: 1800px;
    }
}

/* xxxxl breakpoint: 2560px and up */
@media (min-width: 2560px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl,
    .container-xxxl,
    .container-xxxxl {
        max-width: 2400px;
    }
}

/* xxxxxl breakpoint: 2880px and up */
@media (min-width: 2880px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl,
    .container-xxxl,
    .container-xxxxl,
    .container-xxxxxl {
        max-width: 2700px;
    }
}

/* ============================================
   New Container Classes
   ============================================ */

.container-xxxl,
.container-xxxxl,
.container-xxxxxl {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}

/* xxxl container - activates at 1920px */
@media (min-width: 1920px) {
    .container-xxxl {
        max-width: 1800px;
    }
}

/* xxxxl container - activates at 2560px */
@media (min-width: 2560px) {
    .container-xxxxl {
        max-width: 2400px;
    }
}

/* xxxxxl container - activates at 2880px */
@media (min-width: 2880px) {
    .container-xxxxxl {
        max-width: 2700px;
    }
}

/* ============================================
   Extended Grid Column Classes
   ============================================ */

/* xxxl breakpoint columns */
@media (min-width: 1920px) {
    .col-xxxl {
        flex: 1 0 0%;
    }
    .col-xxxl-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-xxxl-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-xxxl-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-xxxl-3 { flex: 0 0 auto; width: 25%; }
    .col-xxxl-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-xxxl-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-xxxl-6 { flex: 0 0 auto; width: 50%; }
    .col-xxxl-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-xxxl-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-xxxl-9 { flex: 0 0 auto; width: 75%; }
    .col-xxxl-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-xxxl-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-xxxl-12 { flex: 0 0 auto; width: 100%; }

    /* Offset classes */
    .offset-xxxl-0 { margin-left: 0; }
    .offset-xxxl-1 { margin-left: 8.33333333%; }
    .offset-xxxl-2 { margin-left: 16.66666667%; }
    .offset-xxxl-3 { margin-left: 25%; }
    .offset-xxxl-4 { margin-left: 33.33333333%; }
    .offset-xxxl-5 { margin-left: 41.66666667%; }
    .offset-xxxl-6 { margin-left: 50%; }
    .offset-xxxl-7 { margin-left: 58.33333333%; }
    .offset-xxxl-8 { margin-left: 66.66666667%; }
    .offset-xxxl-9 { margin-left: 75%; }
    .offset-xxxl-10 { margin-left: 83.33333333%; }
    .offset-xxxl-11 { margin-left: 91.66666667%; }

    /* Order classes */
    .order-xxxl-first { order: -1; }
    .order-xxxl-last { order: 13; }
    .order-xxxl-0 { order: 0; }
    .order-xxxl-1 { order: 1; }
    .order-xxxl-2 { order: 2; }
    .order-xxxl-3 { order: 3; }
    .order-xxxl-4 { order: 4; }
    .order-xxxl-5 { order: 5; }
}

/* xxxxl breakpoint columns */
@media (min-width: 2560px) {
    .col-xxxxl {
        flex: 1 0 0%;
    }
    .col-xxxxl-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-xxxxl-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-xxxxl-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-xxxxl-3 { flex: 0 0 auto; width: 25%; }
    .col-xxxxl-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-xxxxl-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-xxxxl-6 { flex: 0 0 auto; width: 50%; }
    .col-xxxxl-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-xxxxl-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-xxxxl-9 { flex: 0 0 auto; width: 75%; }
    .col-xxxxl-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-xxxxl-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-xxxxl-12 { flex: 0 0 auto; width: 100%; }

    /* Offset classes */
    .offset-xxxxl-0 { margin-left: 0; }
    .offset-xxxxl-1 { margin-left: 8.33333333%; }
    .offset-xxxxl-2 { margin-left: 16.66666667%; }
    .offset-xxxxl-3 { margin-left: 25%; }
    .offset-xxxxl-4 { margin-left: 33.33333333%; }
    .offset-xxxxl-5 { margin-left: 41.66666667%; }
    .offset-xxxxl-6 { margin-left: 50%; }
    .offset-xxxxl-7 { margin-left: 58.33333333%; }
    .offset-xxxxl-8 { margin-left: 66.66666667%; }
    .offset-xxxxl-9 { margin-left: 75%; }
    .offset-xxxxl-10 { margin-left: 83.33333333%; }
    .offset-xxxxl-11 { margin-left: 91.66666667%; }

    /* Order classes */
    .order-xxxxl-first { order: -1; }
    .order-xxxxl-last { order: 13; }
    .order-xxxxl-0 { order: 0; }
    .order-xxxxl-1 { order: 1; }
    .order-xxxxl-2 { order: 2; }
    .order-xxxxl-3 { order: 3; }
    .order-xxxxl-4 { order: 4; }
    .order-xxxxl-5 { order: 5; }
}

/* xxxxxl breakpoint columns */
@media (min-width: 2880px) {
    .col-xxxxxl {
        flex: 1 0 0%;
    }
    .col-xxxxxl-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-xxxxxl-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-xxxxxl-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-xxxxxl-3 { flex: 0 0 auto; width: 25%; }
    .col-xxxxxl-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-xxxxxl-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-xxxxxl-6 { flex: 0 0 auto; width: 50%; }
    .col-xxxxxl-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-xxxxxl-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-xxxxxl-9 { flex: 0 0 auto; width: 75%; }
    .col-xxxxxl-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-xxxxxl-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-xxxxxl-12 { flex: 0 0 auto; width: 100%; }

    /* Offset classes */
    .offset-xxxxxl-0 { margin-left: 0; }
    .offset-xxxxxl-1 { margin-left: 8.33333333%; }
    .offset-xxxxxl-2 { margin-left: 16.66666667%; }
    .offset-xxxxxl-3 { margin-left: 25%; }
    .offset-xxxxxl-4 { margin-left: 33.33333333%; }
    .offset-xxxxxl-5 { margin-left: 41.66666667%; }
    .offset-xxxxxl-6 { margin-left: 50%; }
    .offset-xxxxxl-7 { margin-left: 58.33333333%; }
    .offset-xxxxxl-8 { margin-left: 66.66666667%; }
    .offset-xxxxxl-9 { margin-left: 75%; }
    .offset-xxxxxl-10 { margin-left: 83.33333333%; }
    .offset-xxxxxl-11 { margin-left: 91.66666667%; }

    /* Order classes */
    .order-xxxxxl-first { order: -1; }
    .order-xxxxxl-last { order: 13; }
    .order-xxxxxl-0 { order: 0; }
    .order-xxxxxl-1 { order: 1; }
    .order-xxxxxl-2 { order: 2; }
    .order-xxxxxl-3 { order: 3; }
    .order-xxxxxl-4 { order: 4; }
    .order-xxxxxl-5 { order: 5; }
}

/* ============================================
   Extended Display Utilities
   ============================================ */

@media (min-width: 1920px) {
    .d-xxxl-inline { display: inline !important; }
    .d-xxxl-inline-block { display: inline-block !important; }
    .d-xxxl-block { display: block !important; }
    .d-xxxl-grid { display: grid !important; }
    .d-xxxl-inline-grid { display: inline-grid !important; }
    .d-xxxl-table { display: table !important; }
    .d-xxxl-table-row { display: table-row !important; }
    .d-xxxl-table-cell { display: table-cell !important; }
    .d-xxxl-flex { display: flex !important; }
    .d-xxxl-inline-flex { display: inline-flex !important; }
    .d-xxxl-none { display: none !important; }
}

@media (min-width: 2560px) {
    .d-xxxxl-inline { display: inline !important; }
    .d-xxxxl-inline-block { display: inline-block !important; }
    .d-xxxxl-block { display: block !important; }
    .d-xxxxl-grid { display: grid !important; }
    .d-xxxxl-inline-grid { display: inline-grid !important; }
    .d-xxxxl-table { display: table !important; }
    .d-xxxxl-table-row { display: table-row !important; }
    .d-xxxxl-table-cell { display: table-cell !important; }
    .d-xxxxl-flex { display: flex !important; }
    .d-xxxxl-inline-flex { display: inline-flex !important; }
    .d-xxxxl-none { display: none !important; }
}

@media (min-width: 2880px) {
    .d-xxxxxl-inline { display: inline !important; }
    .d-xxxxxl-inline-block { display: inline-block !important; }
    .d-xxxxxl-block { display: block !important; }
    .d-xxxxxl-grid { display: grid !important; }
    .d-xxxxxl-inline-grid { display: inline-grid !important; }
    .d-xxxxxl-table { display: table !important; }
    .d-xxxxxl-table-row { display: table-row !important; }
    .d-xxxxxl-table-cell { display: table-cell !important; }
    .d-xxxxxl-flex { display: flex !important; }
    .d-xxxxxl-inline-flex { display: inline-flex !important; }
    .d-xxxxxl-none { display: none !important; }
}

/* ============================================
   Extended Flex Utilities
   ============================================ */

@media (min-width: 1920px) {
    .flex-xxxl-fill { flex: 1 1 auto !important; }
    .flex-xxxl-row { flex-direction: row !important; }
    .flex-xxxl-column { flex-direction: column !important; }
    .flex-xxxl-row-reverse { flex-direction: row-reverse !important; }
    .flex-xxxl-column-reverse { flex-direction: column-reverse !important; }
    .flex-xxxl-grow-0 { flex-grow: 0 !important; }
    .flex-xxxl-grow-1 { flex-grow: 1 !important; }
    .flex-xxxl-shrink-0 { flex-shrink: 0 !important; }
    .flex-xxxl-shrink-1 { flex-shrink: 1 !important; }
    .flex-xxxl-wrap { flex-wrap: wrap !important; }
    .flex-xxxl-nowrap { flex-wrap: nowrap !important; }
    .flex-xxxl-wrap-reverse { flex-wrap: wrap-reverse !important; }
    .justify-content-xxxl-start { justify-content: flex-start !important; }
    .justify-content-xxxl-end { justify-content: flex-end !important; }
    .justify-content-xxxl-center { justify-content: center !important; }
    .justify-content-xxxl-between { justify-content: space-between !important; }
    .justify-content-xxxl-around { justify-content: space-around !important; }
    .justify-content-xxxl-evenly { justify-content: space-evenly !important; }
    .align-items-xxxl-start { align-items: flex-start !important; }
    .align-items-xxxl-end { align-items: flex-end !important; }
    .align-items-xxxl-center { align-items: center !important; }
    .align-items-xxxl-baseline { align-items: baseline !important; }
    .align-items-xxxl-stretch { align-items: stretch !important; }
    .align-content-xxxl-start { align-content: flex-start !important; }
    .align-content-xxxl-end { align-content: flex-end !important; }
    .align-content-xxxl-center { align-content: center !important; }
    .align-content-xxxl-between { align-content: space-between !important; }
    .align-content-xxxl-around { align-content: space-around !important; }
    .align-content-xxxl-stretch { align-content: stretch !important; }
    .align-self-xxxl-auto { align-self: auto !important; }
    .align-self-xxxl-start { align-self: flex-start !important; }
    .align-self-xxxl-end { align-self: flex-end !important; }
    .align-self-xxxl-center { align-self: center !important; }
    .align-self-xxxl-baseline { align-self: baseline !important; }
    .align-self-xxxl-stretch { align-self: stretch !important; }
}

@media (min-width: 2560px) {
    .flex-xxxxl-fill { flex: 1 1 auto !important; }
    .flex-xxxxl-row { flex-direction: row !important; }
    .flex-xxxxl-column { flex-direction: column !important; }
    .flex-xxxxl-row-reverse { flex-direction: row-reverse !important; }
    .flex-xxxxl-column-reverse { flex-direction: column-reverse !important; }
    .flex-xxxxl-grow-0 { flex-grow: 0 !important; }
    .flex-xxxxl-grow-1 { flex-grow: 1 !important; }
    .flex-xxxxl-shrink-0 { flex-shrink: 0 !important; }
    .flex-xxxxl-shrink-1 { flex-shrink: 1 !important; }
    .flex-xxxxl-wrap { flex-wrap: wrap !important; }
    .flex-xxxxl-nowrap { flex-wrap: nowrap !important; }
    .flex-xxxxl-wrap-reverse { flex-wrap: wrap-reverse !important; }
    .justify-content-xxxxl-start { justify-content: flex-start !important; }
    .justify-content-xxxxl-end { justify-content: flex-end !important; }
    .justify-content-xxxxl-center { justify-content: center !important; }
    .justify-content-xxxxl-between { justify-content: space-between !important; }
    .justify-content-xxxxl-around { justify-content: space-around !important; }
    .justify-content-xxxxl-evenly { justify-content: space-evenly !important; }
    .align-items-xxxxl-start { align-items: flex-start !important; }
    .align-items-xxxxl-end { align-items: flex-end !important; }
    .align-items-xxxxl-center { align-items: center !important; }
    .align-items-xxxxl-baseline { align-items: baseline !important; }
    .align-items-xxxxl-stretch { align-items: stretch !important; }
    .align-content-xxxxl-start { align-content: flex-start !important; }
    .align-content-xxxxl-end { align-content: flex-end !important; }
    .align-content-xxxxl-center { align-content: center !important; }
    .align-content-xxxxl-between { align-content: space-between !important; }
    .align-content-xxxxl-around { align-content: space-around !important; }
    .align-content-xxxxl-stretch { align-content: stretch !important; }
    .align-self-xxxxl-auto { align-self: auto !important; }
    .align-self-xxxxl-start { align-self: flex-start !important; }
    .align-self-xxxxl-end { align-self: flex-end !important; }
    .align-self-xxxxl-center { align-self: center !important; }
    .align-self-xxxxl-baseline { align-self: baseline !important; }
    .align-self-xxxxl-stretch { align-self: stretch !important; }
}

@media (min-width: 2880px) {
    .flex-xxxxxl-fill { flex: 1 1 auto !important; }
    .flex-xxxxxl-row { flex-direction: row !important; }
    .flex-xxxxxl-column { flex-direction: column !important; }
    .flex-xxxxxl-row-reverse { flex-direction: row-reverse !important; }
    .flex-xxxxxl-column-reverse { flex-direction: column-reverse !important; }
    .flex-xxxxxl-grow-0 { flex-grow: 0 !important; }
    .flex-xxxxxl-grow-1 { flex-grow: 1 !important; }
    .flex-xxxxxl-shrink-0 { flex-shrink: 0 !important; }
    .flex-xxxxxl-shrink-1 { flex-shrink: 1 !important; }
    .flex-xxxxxl-wrap { flex-wrap: wrap !important; }
    .flex-xxxxxl-nowrap { flex-wrap: nowrap !important; }
    .flex-xxxxxl-wrap-reverse { flex-wrap: wrap-reverse !important; }
    .justify-content-xxxxxl-start { justify-content: flex-start !important; }
    .justify-content-xxxxxl-end { justify-content: flex-end !important; }
    .justify-content-xxxxxl-center { justify-content: center !important; }
    .justify-content-xxxxxl-between { justify-content: space-between !important; }
    .justify-content-xxxxxl-around { justify-content: space-around !important; }
    .justify-content-xxxxxl-evenly { justify-content: space-evenly !important; }
    .align-items-xxxxxl-start { align-items: flex-start !important; }
    .align-items-xxxxxl-end { align-items: flex-end !important; }
    .align-items-xxxxxl-center { align-items: center !important; }
    .align-items-xxxxxl-baseline { align-items: baseline !important; }
    .align-items-xxxxxl-stretch { align-items: stretch !important; }
    .align-content-xxxxxl-start { align-content: flex-start !important; }
    .align-content-xxxxxl-end { align-content: flex-end !important; }
    .align-content-xxxxxl-center { align-content: center !important; }
    .align-content-xxxxxl-between { align-content: space-between !important; }
    .align-content-xxxxxl-around { align-content: space-around !important; }
    .align-content-xxxxxl-stretch { align-content: stretch !important; }
    .align-self-xxxxxl-auto { align-self: auto !important; }
    .align-self-xxxxxl-start { align-self: flex-start !important; }
    .align-self-xxxxxl-end { align-self: flex-end !important; }
    .align-self-xxxxxl-center { align-self: center !important; }
    .align-self-xxxxxl-baseline { align-self: baseline !important; }
    .align-self-xxxxxl-stretch { align-self: stretch !important; }
}

/* ============================================
   Extended Gap Utilities
   ============================================ */

@media (min-width: 1920px) {
    .gap-xxxl-0 { gap: 0 !important; }
    .gap-xxxl-1 { gap: 0.25rem !important; }
    .gap-xxxl-2 { gap: 0.5rem !important; }
    .gap-xxxl-3 { gap: 1rem !important; }
    .gap-xxxl-4 { gap: 1.5rem !important; }
    .gap-xxxl-5 { gap: 3rem !important; }
    .row-gap-xxxl-0 { row-gap: 0 !important; }
    .row-gap-xxxl-1 { row-gap: 0.25rem !important; }
    .row-gap-xxxl-2 { row-gap: 0.5rem !important; }
    .row-gap-xxxl-3 { row-gap: 1rem !important; }
    .row-gap-xxxl-4 { row-gap: 1.5rem !important; }
    .row-gap-xxxl-5 { row-gap: 3rem !important; }
    .column-gap-xxxl-0 { column-gap: 0 !important; }
    .column-gap-xxxl-1 { column-gap: 0.25rem !important; }
    .column-gap-xxxl-2 { column-gap: 0.5rem !important; }
    .column-gap-xxxl-3 { column-gap: 1rem !important; }
    .column-gap-xxxl-4 { column-gap: 1.5rem !important; }
    .column-gap-xxxl-5 { column-gap: 3rem !important; }
}

@media (min-width: 2560px) {
    .gap-xxxxl-0 { gap: 0 !important; }
    .gap-xxxxl-1 { gap: 0.25rem !important; }
    .gap-xxxxl-2 { gap: 0.5rem !important; }
    .gap-xxxxl-3 { gap: 1rem !important; }
    .gap-xxxxl-4 { gap: 1.5rem !important; }
    .gap-xxxxl-5 { gap: 3rem !important; }
    .row-gap-xxxxl-0 { row-gap: 0 !important; }
    .row-gap-xxxxl-1 { row-gap: 0.25rem !important; }
    .row-gap-xxxxl-2 { row-gap: 0.5rem !important; }
    .row-gap-xxxxl-3 { row-gap: 1rem !important; }
    .row-gap-xxxxl-4 { row-gap: 1.5rem !important; }
    .row-gap-xxxxl-5 { row-gap: 3rem !important; }
    .column-gap-xxxxl-0 { column-gap: 0 !important; }
    .column-gap-xxxxl-1 { column-gap: 0.25rem !important; }
    .column-gap-xxxxl-2 { column-gap: 0.5rem !important; }
    .column-gap-xxxxl-3 { column-gap: 1rem !important; }
    .column-gap-xxxxl-4 { column-gap: 1.5rem !important; }
    .column-gap-xxxxl-5 { column-gap: 3rem !important; }
}

@media (min-width: 2880px) {
    .gap-xxxxxl-0 { gap: 0 !important; }
    .gap-xxxxxl-1 { gap: 0.25rem !important; }
    .gap-xxxxxl-2 { gap: 0.5rem !important; }
    .gap-xxxxxl-3 { gap: 1rem !important; }
    .gap-xxxxxl-4 { gap: 1.5rem !important; }
    .gap-xxxxxl-5 { gap: 3rem !important; }
    .row-gap-xxxxxl-0 { row-gap: 0 !important; }
    .row-gap-xxxxxl-1 { row-gap: 0.25rem !important; }
    .row-gap-xxxxxl-2 { row-gap: 0.5rem !important; }
    .row-gap-xxxxxl-3 { row-gap: 1rem !important; }
    .row-gap-xxxxxl-4 { row-gap: 1.5rem !important; }
    .row-gap-xxxxxl-5 { row-gap: 3rem !important; }
    .column-gap-xxxxxl-0 { column-gap: 0 !important; }
    .column-gap-xxxxxl-1 { column-gap: 0.25rem !important; }
    .column-gap-xxxxxl-2 { column-gap: 0.5rem !important; }
    .column-gap-xxxxxl-3 { column-gap: 1rem !important; }
    .column-gap-xxxxxl-4 { column-gap: 1.5rem !important; }
    .column-gap-xxxxxl-5 { column-gap: 3rem !important; }
}

/* ============================================
   Extended Text Alignment Utilities
   ============================================ */

@media (min-width: 1920px) {
    .text-xxxl-start { text-align: left !important; }
    .text-xxxl-end { text-align: right !important; }
    .text-xxxl-center { text-align: center !important; }
}

@media (min-width: 2560px) {
    .text-xxxxl-start { text-align: left !important; }
    .text-xxxxl-end { text-align: right !important; }
    .text-xxxxl-center { text-align: center !important; }
}

@media (min-width: 2880px) {
    .text-xxxxxl-start { text-align: left !important; }
    .text-xxxxxl-end { text-align: right !important; }
    .text-xxxxxl-center { text-align: center !important; }
}

/* ============================================
   Extended Margin/Padding Utilities
   ============================================ */

@media (min-width: 1920px) {
    /* Margin */
    .m-xxxl-0 { margin: 0 !important; }
    .m-xxxl-1 { margin: 0.25rem !important; }
    .m-xxxl-2 { margin: 0.5rem !important; }
    .m-xxxl-3 { margin: 1rem !important; }
    .m-xxxl-4 { margin: 1.5rem !important; }
    .m-xxxl-5 { margin: 3rem !important; }
    .m-xxxl-auto { margin: auto !important; }
    .mx-xxxl-0 { margin-right: 0 !important; margin-left: 0 !important; }
    .mx-xxxl-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; }
    .mx-xxxl-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; }
    .mx-xxxl-3 { margin-right: 1rem !important; margin-left: 1rem !important; }
    .mx-xxxl-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; }
    .mx-xxxl-5 { margin-right: 3rem !important; margin-left: 3rem !important; }
    .mx-xxxl-auto { margin-right: auto !important; margin-left: auto !important; }
    .my-xxxl-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
    .my-xxxl-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
    .my-xxxl-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
    .my-xxxl-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
    .my-xxxl-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
    .my-xxxl-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
    .my-xxxl-auto { margin-top: auto !important; margin-bottom: auto !important; }
    .mt-xxxl-0 { margin-top: 0 !important; }
    .mt-xxxl-1 { margin-top: 0.25rem !important; }
    .mt-xxxl-2 { margin-top: 0.5rem !important; }
    .mt-xxxl-3 { margin-top: 1rem !important; }
    .mt-xxxl-4 { margin-top: 1.5rem !important; }
    .mt-xxxl-5 { margin-top: 3rem !important; }
    .mt-xxxl-auto { margin-top: auto !important; }
    .me-xxxl-0 { margin-right: 0 !important; }
    .me-xxxl-1 { margin-right: 0.25rem !important; }
    .me-xxxl-2 { margin-right: 0.5rem !important; }
    .me-xxxl-3 { margin-right: 1rem !important; }
    .me-xxxl-4 { margin-right: 1.5rem !important; }
    .me-xxxl-5 { margin-right: 3rem !important; }
    .me-xxxl-auto { margin-right: auto !important; }
    .mb-xxxl-0 { margin-bottom: 0 !important; }
    .mb-xxxl-1 { margin-bottom: 0.25rem !important; }
    .mb-xxxl-2 { margin-bottom: 0.5rem !important; }
    .mb-xxxl-3 { margin-bottom: 1rem !important; }
    .mb-xxxl-4 { margin-bottom: 1.5rem !important; }
    .mb-xxxl-5 { margin-bottom: 3rem !important; }
    .mb-xxxl-auto { margin-bottom: auto !important; }
    .ms-xxxl-0 { margin-left: 0 !important; }
    .ms-xxxl-1 { margin-left: 0.25rem !important; }
    .ms-xxxl-2 { margin-left: 0.5rem !important; }
    .ms-xxxl-3 { margin-left: 1rem !important; }
    .ms-xxxl-4 { margin-left: 1.5rem !important; }
    .ms-xxxl-5 { margin-left: 3rem !important; }
    .ms-xxxl-auto { margin-left: auto !important; }
    /* Padding */
    .p-xxxl-0 { padding: 0 !important; }
    .p-xxxl-1 { padding: 0.25rem !important; }
    .p-xxxl-2 { padding: 0.5rem !important; }
    .p-xxxl-3 { padding: 1rem !important; }
    .p-xxxl-4 { padding: 1.5rem !important; }
    .p-xxxl-5 { padding: 3rem !important; }
    .px-xxxl-0 { padding-right: 0 !important; padding-left: 0 !important; }
    .px-xxxl-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
    .px-xxxl-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
    .px-xxxl-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
    .px-xxxl-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
    .px-xxxl-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
    .py-xxxl-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
    .py-xxxl-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
    .py-xxxl-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .py-xxxl-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    .py-xxxl-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .py-xxxl-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    .pt-xxxl-0 { padding-top: 0 !important; }
    .pt-xxxl-1 { padding-top: 0.25rem !important; }
    .pt-xxxl-2 { padding-top: 0.5rem !important; }
    .pt-xxxl-3 { padding-top: 1rem !important; }
    .pt-xxxl-4 { padding-top: 1.5rem !important; }
    .pt-xxxl-5 { padding-top: 3rem !important; }
    .pe-xxxl-0 { padding-right: 0 !important; }
    .pe-xxxl-1 { padding-right: 0.25rem !important; }
    .pe-xxxl-2 { padding-right: 0.5rem !important; }
    .pe-xxxl-3 { padding-right: 1rem !important; }
    .pe-xxxl-4 { padding-right: 1.5rem !important; }
    .pe-xxxl-5 { padding-right: 3rem !important; }
    .pb-xxxl-0 { padding-bottom: 0 !important; }
    .pb-xxxl-1 { padding-bottom: 0.25rem !important; }
    .pb-xxxl-2 { padding-bottom: 0.5rem !important; }
    .pb-xxxl-3 { padding-bottom: 1rem !important; }
    .pb-xxxl-4 { padding-bottom: 1.5rem !important; }
    .pb-xxxl-5 { padding-bottom: 3rem !important; }
    .ps-xxxl-0 { padding-left: 0 !important; }
    .ps-xxxl-1 { padding-left: 0.25rem !important; }
    .ps-xxxl-2 { padding-left: 0.5rem !important; }
    .ps-xxxl-3 { padding-left: 1rem !important; }
    .ps-xxxl-4 { padding-left: 1.5rem !important; }
    .ps-xxxl-5 { padding-left: 3rem !important; }
}

@media (min-width: 2560px) {
    /* Margin */
    .m-xxxxl-0 { margin: 0 !important; }
    .m-xxxxl-1 { margin: 0.25rem !important; }
    .m-xxxxl-2 { margin: 0.5rem !important; }
    .m-xxxxl-3 { margin: 1rem !important; }
    .m-xxxxl-4 { margin: 1.5rem !important; }
    .m-xxxxl-5 { margin: 3rem !important; }
    .m-xxxxl-auto { margin: auto !important; }
    .mx-xxxxl-0 { margin-right: 0 !important; margin-left: 0 !important; }
    .mx-xxxxl-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; }
    .mx-xxxxl-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; }
    .mx-xxxxl-3 { margin-right: 1rem !important; margin-left: 1rem !important; }
    .mx-xxxxl-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; }
    .mx-xxxxl-5 { margin-right: 3rem !important; margin-left: 3rem !important; }
    .mx-xxxxl-auto { margin-right: auto !important; margin-left: auto !important; }
    .my-xxxxl-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
    .my-xxxxl-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
    .my-xxxxl-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
    .my-xxxxl-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
    .my-xxxxl-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
    .my-xxxxl-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
    .my-xxxxl-auto { margin-top: auto !important; margin-bottom: auto !important; }
    .mt-xxxxl-0 { margin-top: 0 !important; }
    .mt-xxxxl-1 { margin-top: 0.25rem !important; }
    .mt-xxxxl-2 { margin-top: 0.5rem !important; }
    .mt-xxxxl-3 { margin-top: 1rem !important; }
    .mt-xxxxl-4 { margin-top: 1.5rem !important; }
    .mt-xxxxl-5 { margin-top: 3rem !important; }
    .mt-xxxxl-auto { margin-top: auto !important; }
    .me-xxxxl-0 { margin-right: 0 !important; }
    .me-xxxxl-1 { margin-right: 0.25rem !important; }
    .me-xxxxl-2 { margin-right: 0.5rem !important; }
    .me-xxxxl-3 { margin-right: 1rem !important; }
    .me-xxxxl-4 { margin-right: 1.5rem !important; }
    .me-xxxxl-5 { margin-right: 3rem !important; }
    .me-xxxxl-auto { margin-right: auto !important; }
    .mb-xxxxl-0 { margin-bottom: 0 !important; }
    .mb-xxxxl-1 { margin-bottom: 0.25rem !important; }
    .mb-xxxxl-2 { margin-bottom: 0.5rem !important; }
    .mb-xxxxl-3 { margin-bottom: 1rem !important; }
    .mb-xxxxl-4 { margin-bottom: 1.5rem !important; }
    .mb-xxxxl-5 { margin-bottom: 3rem !important; }
    .mb-xxxxl-auto { margin-bottom: auto !important; }
    .ms-xxxxl-0 { margin-left: 0 !important; }
    .ms-xxxxl-1 { margin-left: 0.25rem !important; }
    .ms-xxxxl-2 { margin-left: 0.5rem !important; }
    .ms-xxxxl-3 { margin-left: 1rem !important; }
    .ms-xxxxl-4 { margin-left: 1.5rem !important; }
    .ms-xxxxl-5 { margin-left: 3rem !important; }
    .ms-xxxxl-auto { margin-left: auto !important; }
    /* Padding */
    .p-xxxxl-0 { padding: 0 !important; }
    .p-xxxxl-1 { padding: 0.25rem !important; }
    .p-xxxxl-2 { padding: 0.5rem !important; }
    .p-xxxxl-3 { padding: 1rem !important; }
    .p-xxxxl-4 { padding: 1.5rem !important; }
    .p-xxxxl-5 { padding: 3rem !important; }
    .px-xxxxl-0 { padding-right: 0 !important; padding-left: 0 !important; }
    .px-xxxxl-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
    .px-xxxxl-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
    .px-xxxxl-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
    .px-xxxxl-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
    .px-xxxxl-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
    .py-xxxxl-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
    .py-xxxxl-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
    .py-xxxxl-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .py-xxxxl-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    .py-xxxxl-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .py-xxxxl-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    .pt-xxxxl-0 { padding-top: 0 !important; }
    .pt-xxxxl-1 { padding-top: 0.25rem !important; }
    .pt-xxxxl-2 { padding-top: 0.5rem !important; }
    .pt-xxxxl-3 { padding-top: 1rem !important; }
    .pt-xxxxl-4 { padding-top: 1.5rem !important; }
    .pt-xxxxl-5 { padding-top: 3rem !important; }
    .pe-xxxxl-0 { padding-right: 0 !important; }
    .pe-xxxxl-1 { padding-right: 0.25rem !important; }
    .pe-xxxxl-2 { padding-right: 0.5rem !important; }
    .pe-xxxxl-3 { padding-right: 1rem !important; }
    .pe-xxxxl-4 { padding-right: 1.5rem !important; }
    .pe-xxxxl-5 { padding-right: 3rem !important; }
    .pb-xxxxl-0 { padding-bottom: 0 !important; }
    .pb-xxxxl-1 { padding-bottom: 0.25rem !important; }
    .pb-xxxxl-2 { padding-bottom: 0.5rem !important; }
    .pb-xxxxl-3 { padding-bottom: 1rem !important; }
    .pb-xxxxl-4 { padding-bottom: 1.5rem !important; }
    .pb-xxxxl-5 { padding-bottom: 3rem !important; }
    .ps-xxxxl-0 { padding-left: 0 !important; }
    .ps-xxxxl-1 { padding-left: 0.25rem !important; }
    .ps-xxxxl-2 { padding-left: 0.5rem !important; }
    .ps-xxxxl-3 { padding-left: 1rem !important; }
    .ps-xxxxl-4 { padding-left: 1.5rem !important; }
    .ps-xxxxl-5 { padding-left: 3rem !important; }
}

@media (min-width: 2880px) {
    /* Margin */
    .m-xxxxxl-0 { margin: 0 !important; }
    .m-xxxxxl-1 { margin: 0.25rem !important; }
    .m-xxxxxl-2 { margin: 0.5rem !important; }
    .m-xxxxxl-3 { margin: 1rem !important; }
    .m-xxxxxl-4 { margin: 1.5rem !important; }
    .m-xxxxxl-5 { margin: 3rem !important; }
    .m-xxxxxl-auto { margin: auto !important; }
    .mx-xxxxxl-0 { margin-right: 0 !important; margin-left: 0 !important; }
    .mx-xxxxxl-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; }
    .mx-xxxxxl-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; }
    .mx-xxxxxl-3 { margin-right: 1rem !important; margin-left: 1rem !important; }
    .mx-xxxxxl-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; }
    .mx-xxxxxl-5 { margin-right: 3rem !important; margin-left: 3rem !important; }
    .mx-xxxxxl-auto { margin-right: auto !important; margin-left: auto !important; }
    .my-xxxxxl-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
    .my-xxxxxl-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
    .my-xxxxxl-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
    .my-xxxxxl-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
    .my-xxxxxl-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
    .my-xxxxxl-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
    .my-xxxxxl-auto { margin-top: auto !important; margin-bottom: auto !important; }
    .mt-xxxxxl-0 { margin-top: 0 !important; }
    .mt-xxxxxl-1 { margin-top: 0.25rem !important; }
    .mt-xxxxxl-2 { margin-top: 0.5rem !important; }
    .mt-xxxxxl-3 { margin-top: 1rem !important; }
    .mt-xxxxxl-4 { margin-top: 1.5rem !important; }
    .mt-xxxxxl-5 { margin-top: 3rem !important; }
    .mt-xxxxxl-auto { margin-top: auto !important; }
    .me-xxxxxl-0 { margin-right: 0 !important; }
    .me-xxxxxl-1 { margin-right: 0.25rem !important; }
    .me-xxxxxl-2 { margin-right: 0.5rem !important; }
    .me-xxxxxl-3 { margin-right: 1rem !important; }
    .me-xxxxxl-4 { margin-right: 1.5rem !important; }
    .me-xxxxxl-5 { margin-right: 3rem !important; }
    .me-xxxxxl-auto { margin-right: auto !important; }
    .mb-xxxxxl-0 { margin-bottom: 0 !important; }
    .mb-xxxxxl-1 { margin-bottom: 0.25rem !important; }
    .mb-xxxxxl-2 { margin-bottom: 0.5rem !important; }
    .mb-xxxxxl-3 { margin-bottom: 1rem !important; }
    .mb-xxxxxl-4 { margin-bottom: 1.5rem !important; }
    .mb-xxxxxl-5 { margin-bottom: 3rem !important; }
    .mb-xxxxxl-auto { margin-bottom: auto !important; }
    .ms-xxxxxl-0 { margin-left: 0 !important; }
    .ms-xxxxxl-1 { margin-left: 0.25rem !important; }
    .ms-xxxxxl-2 { margin-left: 0.5rem !important; }
    .ms-xxxxxl-3 { margin-left: 1rem !important; }
    .ms-xxxxxl-4 { margin-left: 1.5rem !important; }
    .ms-xxxxxl-5 { margin-left: 3rem !important; }
    .ms-xxxxxl-auto { margin-left: auto !important; }
    /* Padding */
    .p-xxxxxl-0 { padding: 0 !important; }
    .p-xxxxxl-1 { padding: 0.25rem !important; }
    .p-xxxxxl-2 { padding: 0.5rem !important; }
    .p-xxxxxl-3 { padding: 1rem !important; }
    .p-xxxxxl-4 { padding: 1.5rem !important; }
    .p-xxxxxl-5 { padding: 3rem !important; }
    .px-xxxxxl-0 { padding-right: 0 !important; padding-left: 0 !important; }
    .px-xxxxxl-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
    .px-xxxxxl-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
    .px-xxxxxl-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
    .px-xxxxxl-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
    .px-xxxxxl-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
    .py-xxxxxl-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
    .py-xxxxxl-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
    .py-xxxxxl-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .py-xxxxxl-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    .py-xxxxxl-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .py-xxxxxl-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    .pt-xxxxxl-0 { padding-top: 0 !important; }
    .pt-xxxxxl-1 { padding-top: 0.25rem !important; }
    .pt-xxxxxl-2 { padding-top: 0.5rem !important; }
    .pt-xxxxxl-3 { padding-top: 1rem !important; }
    .pt-xxxxxl-4 { padding-top: 1.5rem !important; }
    .pt-xxxxxl-5 { padding-top: 3rem !important; }
    .pe-xxxxxl-0 { padding-right: 0 !important; }
    .pe-xxxxxl-1 { padding-right: 0.25rem !important; }
    .pe-xxxxxl-2 { padding-right: 0.5rem !important; }
    .pe-xxxxxl-3 { padding-right: 1rem !important; }
    .pe-xxxxxl-4 { padding-right: 1.5rem !important; }
    .pe-xxxxxl-5 { padding-right: 3rem !important; }
    .pb-xxxxxl-0 { padding-bottom: 0 !important; }
    .pb-xxxxxl-1 { padding-bottom: 0.25rem !important; }
    .pb-xxxxxl-2 { padding-bottom: 0.5rem !important; }
    .pb-xxxxxl-3 { padding-bottom: 1rem !important; }
    .pb-xxxxxl-4 { padding-bottom: 1.5rem !important; }
    .pb-xxxxxl-5 { padding-bottom: 3rem !important; }
    .ps-xxxxxl-0 { padding-left: 0 !important; }
    .ps-xxxxxl-1 { padding-left: 0.25rem !important; }
    .ps-xxxxxl-2 { padding-left: 0.5rem !important; }
    .ps-xxxxxl-3 { padding-left: 1rem !important; }
    .ps-xxxxxl-4 { padding-left: 1.5rem !important; }
    .ps-xxxxxl-5 { padding-left: 3rem !important; }
}

/* ============================================
   Extended Width/Height Utilities
   ============================================ */

@media (min-width: 1920px) {
    .w-xxxl-25 { width: 25% !important; }
    .w-xxxl-50 { width: 50% !important; }
    .w-xxxl-75 { width: 75% !important; }
    .w-xxxl-100 { width: 100% !important; }
    .w-xxxl-auto { width: auto !important; }
    .h-xxxl-25 { height: 25% !important; }
    .h-xxxl-50 { height: 50% !important; }
    .h-xxxl-75 { height: 75% !important; }
    .h-xxxl-100 { height: 100% !important; }
    .h-xxxl-auto { height: auto !important; }
}

@media (min-width: 2560px) {
    .w-xxxxl-25 { width: 25% !important; }
    .w-xxxxl-50 { width: 50% !important; }
    .w-xxxxl-75 { width: 75% !important; }
    .w-xxxxl-100 { width: 100% !important; }
    .w-xxxxl-auto { width: auto !important; }
    .h-xxxxl-25 { height: 25% !important; }
    .h-xxxxl-50 { height: 50% !important; }
    .h-xxxxl-75 { height: 75% !important; }
    .h-xxxxl-100 { height: 100% !important; }
    .h-xxxxl-auto { height: auto !important; }
}

@media (min-width: 2880px) {
    .w-xxxxxl-25 { width: 25% !important; }
    .w-xxxxxl-50 { width: 50% !important; }
    .w-xxxxxl-75 { width: 75% !important; }
    .w-xxxxxl-100 { width: 100% !important; }
    .w-xxxxxl-auto { width: auto !important; }
    .h-xxxxxl-25 { height: 25% !important; }
    .h-xxxxxl-50 { height: 50% !important; }
    .h-xxxxxl-75 { height: 75% !important; }
    .h-xxxxxl-100 { height: 100% !important; }
    .h-xxxxxl-auto { height: auto !important; }
}

/* ============================================
   Extended Page Container
   ============================================ */

.page-container {
    padding: 30px;
    max-width: 1400px;
    margin: 0 auto;
}

@media (min-width: 1920px) {
    .page-container {
        max-width: 1800px;
        padding: 40px;
    }
}

@media (min-width: 2560px) {
    .page-container {
        max-width: 2400px;
        padding: 50px;
    }
}

@media (min-width: 2880px) {
    .page-container {
        max-width: 2700px;
        padding: 60px;
    }
}

@media (max-width: 768px) {
    .page-container {
        padding: 20px 15px;
    }
}

@media (max-width: 576px) {
    .page-container {
        padding: 15px 10px;
    }
}

/* ============================================
   Dashboard Container & Grid Layout
   ============================================ */

.dashboard-container {
    padding: 2rem 3rem;
    max-width: 100%;
    margin: 0 auto;
    min-height: calc(100vh - 200px);
}

@media (min-width: 2560px) {
    .dashboard-container {
        padding: 2.5rem 4rem;
    }
}

@media (min-width: 3840px) {
    .dashboard-container {
        padding: 3rem 6rem;
    }
}

@media (max-width: 1400px) {
    .dashboard-container {
        padding: 1.5rem 2rem;
    }
}

@media (max-width: 992px) {
    .dashboard-container {
        padding: 1rem;
    }
}

@media (max-width: 576px) {
    .dashboard-container {
        padding: 0.75rem;
    }
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(280px, auto);
    gap: 2rem;
    padding: 1rem 0;
}

@media (min-width: 1920px) {
    .dashboard-grid {
        grid-auto-rows: minmax(320px, auto);
        gap: 2.5rem;
    }
}

@media (min-width: 2560px) {
    .dashboard-grid {
        grid-auto-rows: minmax(380px, auto);
        gap: 3rem;
    }
}

@media (min-width: 3840px) {
    .dashboard-grid {
        grid-auto-rows: minmax(450px, auto);
        gap: 3.5rem;
    }
}

@media (max-width: 1400px) {
    .dashboard-grid {
        gap: 1.5rem;
        grid-auto-rows: minmax(240px, auto);
    }
}

@media (max-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 992px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        grid-auto-rows: minmax(200px, auto);
    }
}

@media (max-width: 576px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }
}

/* ============================================
   Dashboard Card Grid Spans (Bootstrap-like)
   ============================================ */

.dashboard-card.card-hero {
    grid-column: span 7;
    grid-row: span 2;
    min-height: 500px;
}

.dashboard-card.card-sidebar {
    grid-column: span 5;
    grid-row: span 2;
}

.dashboard-card.card-wide {
    grid-column: span 6;
}

.dashboard-card.card-medium {
    grid-column: span 4;
}

.dashboard-card.card-small {
    grid-column: span 3;
}

.dashboard-card.card-full {
    grid-column: span 12;
}

.dashboard-card.card-tall {
    grid-row: span 2;
}

/* Extra large screens (1920px+) */
@media (min-width: 1920px) {
    .dashboard-card.card-hero {
        grid-column: span 7;
        min-height: 580px;
    }
    .dashboard-card.card-sidebar {
        grid-column: span 5;
    }
    .dashboard-card.card-medium {
        grid-column: span 4;
    }
}

/* QHD screens (2560px+) */
@media (min-width: 2560px) {
    .dashboard-card.card-hero {
        grid-column: span 6;
        min-height: 650px;
    }
    .dashboard-card.card-sidebar {
        grid-column: span 6;
    }
    .dashboard-card.card-wide {
        grid-column: span 6;
    }
    .dashboard-card.card-medium {
        grid-column: span 4;
    }
}

/* 4K screens (3840px+) */
@media (min-width: 3840px) {
    .dashboard-card.card-hero {
        grid-column: span 5;
        min-height: 750px;
    }
    .dashboard-card.card-sidebar {
        grid-column: span 4;
    }
    .dashboard-card.card-wide {
        grid-column: span 4;
    }
    .dashboard-card.card-medium {
        grid-column: span 3;
    }
    .dashboard-card.card-full {
        grid-column: span 12;
    }
}

/* Large desktop (1600px and below) */
@media (max-width: 1600px) {
    .dashboard-card.card-hero {
        grid-column: span 8;
    }
    .dashboard-card.card-sidebar {
        grid-column: span 4;
    }
}

/* Standard desktop (1400px and below) */
@media (max-width: 1400px) {
    .dashboard-card.card-hero {
        grid-column: span 12;
        grid-row: span 1;
        min-height: auto;
    }
    .dashboard-card.card-sidebar {
        grid-column: span 6;
        grid-row: span 1;
    }
    .dashboard-card.card-wide {
        grid-column: span 6;
    }
    .dashboard-card.card-medium {
        grid-column: span 6;
    }
    .dashboard-card.card-small {
        grid-column: span 4;
    }
}

/* Tablet landscape (1200px and below) */
@media (max-width: 1200px) {
    .dashboard-card.card-hero,
    .dashboard-card.card-full {
        grid-column: span 6;
    }
    .dashboard-card.card-sidebar,
    .dashboard-card.card-wide {
        grid-column: span 6;
    }
    .dashboard-card.card-medium,
    .dashboard-card.card-small {
        grid-column: span 3;
    }
}

/* Tablet portrait (992px and below) */
@media (max-width: 992px) {
    .dashboard-card.card-hero,
    .dashboard-card.card-sidebar,
    .dashboard-card.card-wide,
    .dashboard-card.card-medium,
    .dashboard-card.card-small,
    .dashboard-card.card-full {
        grid-column: span 2;
        grid-row: span 1;
    }
    .dashboard-card.card-medium,
    .dashboard-card.card-small {
        grid-column: span 1;
    }
}

/* Mobile (576px and below) */
@media (max-width: 576px) {
    .dashboard-card.card-hero,
    .dashboard-card.card-sidebar,
    .dashboard-card.card-wide,
    .dashboard-card.card-medium,
    .dashboard-card.card-small,
    .dashboard-card.card-full {
        grid-column: span 1;
    }
}

/* ============================================
   Services Dashboard Grid Layout
   ============================================ */

.services-dashboard {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: 100%;
}

.services-group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    width: fit-content;
}

@media (min-width: 1400px) {
    .services-group-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1920px) {
    .services-dashboard {
        gap: 4rem;
    }
    .services-group-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 2rem;
    }
}

@media (min-width: 2560px) {
    .services-group-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 2.5rem;
    }
}

@media (min-width: 2880px) {
    .services-group-grid {
        grid-template-columns: repeat(7, 1fr);
        gap: 3rem;
    }
}

@media (min-width: 3840px) {
    .services-group-grid {
        grid-template-columns: repeat(8, 1fr);
        gap: 3.5rem;
    }
}

/* ============================================
   Row/Column Min-Width Overrides
   ============================================ */

.row .col-md-4 {
    min-width: 250px;
}

.row .col-md-6 {
    min-width: 450px;
}

.card-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}