/* Layout Utilities */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-4);
}

/* Canonical 24-column dashboard grid for large and medium layouts */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns-desktop), minmax(0, 1fr));
    gap: var(--grid-gap-default);
    padding: var(--grid-padding-default);
    width: 100%;
}

.dashboard-grid > * {
    min-width: 0;
}

[class*="col-span-"],
[class*="col-start-"],
[class*="col-end-"],
[class*="col-offset-"],
[class*="offset-"] {
    grid-column-start: var(--col-start, auto);
    grid-column-end: var(--col-end, span var(--col-span, 1));
}

/* Column Span Utilities */
.col-span-1 { --col-span: 1; }
.col-span-2 { --col-span: 2; }
.col-span-3 { --col-span: 3; }
.col-span-4 { --col-span: 4; }
.col-span-5 { --col-span: 5; }
.col-span-6 { --col-span: 6; }
.col-span-7 { --col-span: 7; }
.col-span-8 { --col-span: 8; }
.col-span-9 { --col-span: 9; }
.col-span-10 { --col-span: 10; }
.col-span-11 { --col-span: 11; }
.col-span-12 { --col-span: 12; }
.col-span-13 { --col-span: 13; }
.col-span-14 { --col-span: 14; }
.col-span-15 { --col-span: 15; }
.col-span-16 { --col-span: 16; }
.col-span-17 { --col-span: 17; }
.col-span-18 { --col-span: 18; }
.col-span-19 { --col-span: 19; }
.col-span-20 { --col-span: 20; }
.col-span-21 { --col-span: 21; }
.col-span-22 { --col-span: 22; }
.col-span-23 { --col-span: 23; }
.col-span-24 { --col-span: 24; }

/* Column Offset Utilities */
.col-offset-0, .offset-0 { --col-start: auto; }
.col-offset-1, .offset-1 { --col-start: 2; }
.col-offset-2, .offset-2 { --col-start: 3; }
.col-offset-3, .offset-3 { --col-start: 4; }
.col-offset-4, .offset-4 { --col-start: 5; }
.col-offset-5, .offset-5 { --col-start: 6; }
.col-offset-6, .offset-6 { --col-start: 7; }
.col-offset-7, .offset-7 { --col-start: 8; }
.col-offset-8, .offset-8 { --col-start: 9; }
.col-offset-9, .offset-9 { --col-start: 10; }
.col-offset-10, .offset-10 { --col-start: 11; }
.col-offset-11, .offset-11 { --col-start: 12; }
.col-offset-12, .offset-12 { --col-start: 13; }
.col-offset-13, .offset-13 { --col-start: 14; }
.col-offset-14, .offset-14 { --col-start: 15; }
.col-offset-15, .offset-15 { --col-start: 16; }
.col-offset-16, .offset-16 { --col-start: 17; }
.col-offset-17, .offset-17 { --col-start: 18; }
.col-offset-18, .offset-18 { --col-start: 19; }
.col-offset-19, .offset-19 { --col-start: 20; }
.col-offset-20, .offset-20 { --col-start: 21; }
.col-offset-21, .offset-21 { --col-start: 22; }
.col-offset-22, .offset-22 { --col-start: 23; }
.col-offset-23, .offset-23 { --col-start: 24; }

/* Column Start Utilities */
.col-start-auto { --col-start: auto; }
.col-start-1 { --col-start: 1; }
.col-start-2 { --col-start: 2; }
.col-start-3 { --col-start: 3; }
.col-start-4 { --col-start: 4; }
.col-start-5 { --col-start: 5; }
.col-start-6 { --col-start: 6; }
.col-start-7 { --col-start: 7; }
.col-start-8 { --col-start: 8; }
.col-start-9 { --col-start: 9; }
.col-start-10 { --col-start: 10; }
.col-start-11 { --col-start: 11; }
.col-start-12 { --col-start: 12; }
.col-start-13 { --col-start: 13; }
.col-start-14 { --col-start: 14; }
.col-start-15 { --col-start: 15; }
.col-start-16 { --col-start: 16; }
.col-start-17 { --col-start: 17; }
.col-start-18 { --col-start: 18; }
.col-start-19 { --col-start: 19; }
.col-start-20 { --col-start: 20; }
.col-start-21 { --col-start: 21; }
.col-start-22 { --col-start: 22; }
.col-start-23 { --col-start: 23; }
.col-start-24 { --col-start: 24; }

/* Column End Utilities */
.col-end-auto { --col-end: auto; }
.col-end-1 { --col-end: 1; }
.col-end-2 { --col-end: 2; }
.col-end-3 { --col-end: 3; }
.col-end-4 { --col-end: 4; }
.col-end-5 { --col-end: 5; }
.col-end-6 { --col-end: 6; }
.col-end-7 { --col-end: 7; }
.col-end-8 { --col-end: 8; }
.col-end-9 { --col-end: 9; }
.col-end-10 { --col-end: 10; }
.col-end-11 { --col-end: 11; }
.col-end-12 { --col-end: 12; }
.col-end-13 { --col-end: 13; }
.col-end-14 { --col-end: 14; }
.col-end-15 { --col-end: 15; }
.col-end-16 { --col-end: 16; }
.col-end-17 { --col-end: 17; }
.col-end-18 { --col-end: 18; }
.col-end-19 { --col-end: 19; }
.col-end-20 { --col-end: 20; }
.col-end-21 { --col-end: 21; }
.col-end-22 { --col-end: 22; }
.col-end-23 { --col-end: 23; }
.col-end-24 { --col-end: 24; }
.col-end-25 { --col-end: 25; }

/* Responsive grid configuration */
@media (max-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: repeat(var(--grid-columns-tablet), minmax(0, 1fr));
    }
}

/* Medium breakpoint variants */
@media (min-width: 601px) and (max-width: 1024px) {
    .md\:col-span-1, .md-col-span-1 { --col-span: 1; }
    .md\:col-span-2, .md-col-span-2 { --col-span: 2; }
    .md\:col-span-3, .md-col-span-3 { --col-span: 3; }
    .md\:col-span-4, .md-col-span-4 { --col-span: 4; }
    .md\:col-span-5, .md-col-span-5 { --col-span: 5; }
    .md\:col-span-6, .md-col-span-6 { --col-span: 6; }
    .md\:col-span-7, .md-col-span-7 { --col-span: 7; }
    .md\:col-span-8, .md-col-span-8 { --col-span: 8; }
    .md\:col-span-9, .md-col-span-9 { --col-span: 9; }
    .md\:col-span-10, .md-col-span-10 { --col-span: 10; }
    .md\:col-span-11, .md-col-span-11 { --col-span: 11; }
    .md\:col-span-12, .md-col-span-12 { --col-span: 12; }
    .md\:col-span-13, .md-col-span-13 { --col-span: 13; }
    .md\:col-span-14, .md-col-span-14 { --col-span: 14; }
    .md\:col-span-15, .md-col-span-15 { --col-span: 15; }
    .md\:col-span-16, .md-col-span-16 { --col-span: 16; }
    .md\:col-span-17, .md-col-span-17 { --col-span: 17; }
    .md\:col-span-18, .md-col-span-18 { --col-span: 18; }
    .md\:col-span-19, .md-col-span-19 { --col-span: 19; }
    .md\:col-span-20, .md-col-span-20 { --col-span: 20; }
    .md\:col-span-21, .md-col-span-21 { --col-span: 21; }
    .md\:col-span-22, .md-col-span-22 { --col-span: 22; }
    .md\:col-span-23, .md-col-span-23 { --col-span: 23; }
    .md\:col-span-24, .md-col-span-24 { --col-span: 24; }

    .md\:col-offset-0, .md-col-offset-0, .md\:offset-0, .md-offset-0 { --col-start: auto; }
    .md\:col-offset-1, .md-col-offset-1, .md\:offset-1, .md-offset-1 { --col-start: 2; }
    .md\:col-offset-2, .md-col-offset-2, .md\:offset-2, .md-offset-2 { --col-start: 3; }
    .md\:col-offset-3, .md-col-offset-3, .md\:offset-3, .md-offset-3 { --col-start: 4; }
    .md\:col-offset-4, .md-col-offset-4, .md\:offset-4, .md-offset-4 { --col-start: 5; }
    .md\:col-offset-5, .md-col-offset-5, .md\:offset-5, .md-offset-5 { --col-start: 6; }
    .md\:col-offset-6, .md-col-offset-6, .md\:offset-6, .md-offset-6 { --col-start: 7; }
    .md\:col-offset-7, .md-col-offset-7, .md\:offset-7, .md-offset-7 { --col-start: 8; }
    .md\:col-offset-8, .md-col-offset-8, .md\:offset-8, .md-offset-8 { --col-start: 9; }
    .md\:col-offset-9, .md-col-offset-9, .md\:offset-9, .md-offset-9 { --col-start: 10; }
    .md\:col-offset-10, .md-col-offset-10, .md\:offset-10, .md-offset-10 { --col-start: 11; }
    .md\:col-offset-11, .md-col-offset-11, .md\:offset-11, .md-offset-11 { --col-start: 12; }
    .md\:col-offset-12, .md-col-offset-12, .md\:offset-12, .md-offset-12 { --col-start: 13; }
    .md\:col-offset-13, .md-col-offset-13, .md\:offset-13, .md-offset-13 { --col-start: 14; }
    .md\:col-offset-14, .md-col-offset-14, .md\:offset-14, .md-offset-14 { --col-start: 15; }
    .md\:col-offset-15, .md-col-offset-15, .md\:offset-15, .md-offset-15 { --col-start: 16; }
    .md\:col-offset-16, .md-col-offset-16, .md\:offset-16, .md-offset-16 { --col-start: 17; }
    .md\:col-offset-17, .md-col-offset-17, .md\:offset-17, .md-offset-17 { --col-start: 18; }
    .md\:col-offset-18, .md-col-offset-18, .md\:offset-18, .md-offset-18 { --col-start: 19; }
    .md\:col-offset-19, .md-col-offset-19, .md\:offset-19, .md-offset-19 { --col-start: 20; }
    .md\:col-offset-20, .md-col-offset-20, .md\:offset-20, .md-offset-20 { --col-start: 21; }
    .md\:col-offset-21, .md-col-offset-21, .md\:offset-21, .md-offset-21 { --col-start: 22; }
    .md\:col-offset-22, .md-col-offset-22, .md\:offset-22, .md-offset-22 { --col-start: 23; }
    .md\:col-offset-23, .md-col-offset-23, .md\:offset-23, .md-offset-23 { --col-start: 24; }

    .md\:col-start-auto, .md-col-start-auto { --col-start: auto; }
    .md\:col-start-1, .md-col-start-1 { --col-start: 1; }
    .md\:col-start-2, .md-col-start-2 { --col-start: 2; }
    .md\:col-start-3, .md-col-start-3 { --col-start: 3; }
    .md\:col-start-4, .md-col-start-4 { --col-start: 4; }
    .md\:col-start-5, .md-col-start-5 { --col-start: 5; }
    .md\:col-start-6, .md-col-start-6 { --col-start: 6; }
    .md\:col-start-7, .md-col-start-7 { --col-start: 7; }
    .md\:col-start-8, .md-col-start-8 { --col-start: 8; }
    .md\:col-start-9, .md-col-start-9 { --col-start: 9; }
    .md\:col-start-10, .md-col-start-10 { --col-start: 10; }
    .md\:col-start-11, .md-col-start-11 { --col-start: 11; }
    .md\:col-start-12, .md-col-start-12 { --col-start: 12; }
    .md\:col-start-13, .md-col-start-13 { --col-start: 13; }
    .md\:col-start-14, .md-col-start-14 { --col-start: 14; }
    .md\:col-start-15, .md-col-start-15 { --col-start: 15; }
    .md\:col-start-16, .md-col-start-16 { --col-start: 16; }
    .md\:col-start-17, .md-col-start-17 { --col-start: 17; }
    .md\:col-start-18, .md-col-start-18 { --col-start: 18; }
    .md\:col-start-19, .md-col-start-19 { --col-start: 19; }
    .md\:col-start-20, .md-col-start-20 { --col-start: 20; }
    .md\:col-start-21, .md-col-start-21 { --col-start: 21; }
    .md\:col-start-22, .md-col-start-22 { --col-start: 22; }
    .md\:col-start-23, .md-col-start-23 { --col-start: 23; }
    .md\:col-start-24, .md-col-start-24 { --col-start: 24; }

    .md\:col-end-auto, .md-col-end-auto { --col-end: auto; }
    .md\:col-end-1, .md-col-end-1 { --col-end: 1; }
    .md\:col-end-2, .md-col-end-2 { --col-end: 2; }
    .md\:col-end-3, .md-col-end-3 { --col-end: 3; }
    .md\:col-end-4, .md-col-end-4 { --col-end: 4; }
    .md\:col-end-5, .md-col-end-5 { --col-end: 5; }
    .md\:col-end-6, .md-col-end-6 { --col-end: 6; }
    .md\:col-end-7, .md-col-end-7 { --col-end: 7; }
    .md\:col-end-8, .md-col-end-8 { --col-end: 8; }
    .md\:col-end-9, .md-col-end-9 { --col-end: 9; }
    .md\:col-end-10, .md-col-end-10 { --col-end: 10; }
    .md\:col-end-11, .md-col-end-11 { --col-end: 11; }
    .md\:col-end-12, .md-col-end-12 { --col-end: 12; }
    .md\:col-end-13, .md-col-end-13 { --col-end: 13; }
    .md\:col-end-14, .md-col-end-14 { --col-end: 14; }
    .md\:col-end-15, .md-col-end-15 { --col-end: 15; }
    .md\:col-end-16, .md-col-end-16 { --col-end: 16; }
    .md\:col-end-17, .md-col-end-17 { --col-end: 17; }
    .md\:col-end-18, .md-col-end-18 { --col-end: 18; }
    .md\:col-end-19, .md-col-end-19 { --col-end: 19; }
    .md\:col-end-20, .md-col-end-20 { --col-end: 20; }
    .md\:col-end-21, .md-col-end-21 { --col-end: 21; }
    .md\:col-end-22, .md-col-end-22 { --col-end: 22; }
    .md\:col-end-23, .md-col-end-23 { --col-end: 23; }
    .md\:col-end-24, .md-col-end-24 { --col-end: 24; }
    .md\:col-end-25, .md-col-end-25 { --col-end: 25; }
}

/* Large breakpoint variants */
@media (min-width: 1025px) {
    .lg\:col-span-1, .lg-col-span-1 { --col-span: 1; }
    .lg\:col-span-2, .lg-col-span-2 { --col-span: 2; }
    .lg\:col-span-3, .lg-col-span-3 { --col-span: 3; }
    .lg\:col-span-4, .lg-col-span-4 { --col-span: 4; }
    .lg\:col-span-5, .lg-col-span-5 { --col-span: 5; }
    .lg\:col-span-6, .lg-col-span-6 { --col-span: 6; }
    .lg\:col-span-7, .lg-col-span-7 { --col-span: 7; }
    .lg\:col-span-8, .lg-col-span-8 { --col-span: 8; }
    .lg\:col-span-9, .lg-col-span-9 { --col-span: 9; }
    .lg\:col-span-10, .lg-col-span-10 { --col-span: 10; }
    .lg\:col-span-11, .lg-col-span-11 { --col-span: 11; }
    .lg\:col-span-12, .lg-col-span-12 { --col-span: 12; }
    .lg\:col-span-13, .lg-col-span-13 { --col-span: 13; }
    .lg\:col-span-14, .lg-col-span-14 { --col-span: 14; }
    .lg\:col-span-15, .lg-col-span-15 { --col-span: 15; }
    .lg\:col-span-16, .lg-col-span-16 { --col-span: 16; }
    .lg\:col-span-17, .lg-col-span-17 { --col-span: 17; }
    .lg\:col-span-18, .lg-col-span-18 { --col-span: 18; }
    .lg\:col-span-19, .lg-col-span-19 { --col-span: 19; }
    .lg\:col-span-20, .lg-col-span-20 { --col-span: 20; }
    .lg\:col-span-21, .lg-col-span-21 { --col-span: 21; }
    .lg\:col-span-22, .lg-col-span-22 { --col-span: 22; }
    .lg\:col-span-23, .lg-col-span-23 { --col-span: 23; }
    .lg\:col-span-24, .lg-col-span-24 { --col-span: 24; }

    .lg\:col-offset-0, .lg-col-offset-0, .lg\:offset-0, .lg-offset-0 { --col-start: auto; }
    .lg\:col-offset-1, .lg-col-offset-1, .lg\:offset-1, .lg-offset-1 { --col-start: 2; }
    .lg\:col-offset-2, .lg-col-offset-2, .lg\:offset-2, .lg-offset-2 { --col-start: 3; }
    .lg\:col-offset-3, .lg-col-offset-3, .lg\:offset-3, .lg-offset-3 { --col-start: 4; }
    .lg\:col-offset-4, .lg-col-offset-4, .lg\:offset-4, .lg-offset-4 { --col-start: 5; }
    .lg\:col-offset-5, .lg-col-offset-5, .lg\:offset-5, .lg-offset-5 { --col-start: 6; }
    .lg\:col-offset-6, .lg-col-offset-6, .lg\:offset-6, .lg-offset-6 { --col-start: 7; }
    .lg\:col-offset-7, .lg-col-offset-7, .lg\:offset-7, .lg-offset-7 { --col-start: 8; }
    .lg\:col-offset-8, .lg-col-offset-8, .lg\:offset-8, .lg-offset-8 { --col-start: 9; }
    .lg\:col-offset-9, .lg-col-offset-9, .lg\:offset-9, .lg-offset-9 { --col-start: 10; }
    .lg\:col-offset-10, .lg-col-offset-10, .lg\:offset-10, .lg-offset-10 { --col-start: 11; }
    .lg\:col-offset-11, .lg-col-offset-11, .lg\:offset-11, .lg-offset-11 { --col-start: 12; }
    .lg\:col-offset-12, .lg-col-offset-12, .lg\:offset-12, .lg-offset-12 { --col-start: 13; }
    .lg\:col-offset-13, .lg-col-offset-13, .lg\:offset-13, .lg-offset-13 { --col-start: 14; }
    .lg\:col-offset-14, .lg-col-offset-14, .lg\:offset-14, .lg-offset-14 { --col-start: 15; }
    .lg\:col-offset-15, .lg-col-offset-15, .lg\:offset-15, .lg-offset-15 { --col-start: 16; }
    .lg\:col-offset-16, .lg-col-offset-16, .lg\:offset-16, .lg-offset-16 { --col-start: 17; }
    .lg\:col-offset-17, .lg-col-offset-17, .lg\:offset-17, .lg-offset-17 { --col-start: 18; }
    .lg\:col-offset-18, .lg-col-offset-18, .lg\:offset-18, .lg-offset-18 { --col-start: 19; }
    .lg\:col-offset-19, .lg-col-offset-19, .lg\:offset-19, .lg-offset-19 { --col-start: 20; }
    .lg\:col-offset-20, .lg-col-offset-20, .lg\:offset-20, .lg-offset-20 { --col-start: 21; }
    .lg\:col-offset-21, .lg-col-offset-21, .lg\:offset-21, .lg-offset-21 { --col-start: 22; }
    .lg\:col-offset-22, .lg-col-offset-22, .lg\:offset-22, .lg-offset-22 { --col-start: 23; }
    .lg\:col-offset-23, .lg-col-offset-23, .lg\:offset-23, .lg-offset-23 { --col-start: 24; }

    .lg\:col-start-auto, .lg-col-start-auto { --col-start: auto; }
    .lg\:col-start-1, .lg-col-start-1 { --col-start: 1; }
    .lg\:col-start-2, .lg-col-start-2 { --col-start: 2; }
    .lg\:col-start-3, .lg-col-start-3 { --col-start: 3; }
    .lg\:col-start-4, .lg-col-start-4 { --col-start: 4; }
    .lg\:col-start-5, .lg-col-start-5 { --col-start: 5; }
    .lg\:col-start-6, .lg-col-start-6 { --col-start: 6; }
    .lg\:col-start-7, .lg-col-start-7 { --col-start: 7; }
    .lg\:col-start-8, .lg-col-start-8 { --col-start: 8; }
    .lg\:col-start-9, .lg-col-start-9 { --col-start: 9; }
    .lg\:col-start-10, .lg-col-start-10 { --col-start: 10; }
    .lg\:col-start-11, .lg-col-start-11 { --col-start: 11; }
    .lg\:col-start-12, .lg-col-start-12 { --col-start: 12; }
    .lg\:col-start-13, .lg-col-start-13 { --col-start: 13; }
    .lg\:col-start-14, .lg-col-start-14 { --col-start: 14; }
    .lg\:col-start-15, .lg-col-start-15 { --col-start: 15; }
    .lg\:col-start-16, .lg-col-start-16 { --col-start: 16; }
    .lg\:col-start-17, .lg-col-start-17 { --col-start: 17; }
    .lg\:col-start-18, .lg-col-start-18 { --col-start: 18; }
    .lg\:col-start-19, .lg-col-start-19 { --col-start: 19; }
    .lg\:col-start-20, .lg-col-start-20 { --col-start: 20; }
    .lg\:col-start-21, .lg-col-start-21 { --col-start: 21; }
    .lg\:col-start-22, .lg-col-start-22 { --col-start: 22; }
    .lg\:col-start-23, .lg-col-start-23 { --col-start: 23; }
    .lg\:col-start-24, .lg-col-start-24 { --col-start: 24; }

    .lg\:col-end-auto, .lg-col-end-auto { --col-end: auto; }
    .lg\:col-end-1, .lg-col-end-1 { --col-end: 1; }
    .lg\:col-end-2, .lg-col-end-2 { --col-end: 2; }
    .lg\:col-end-3, .lg-col-end-3 { --col-end: 3; }
    .lg\:col-end-4, .lg-col-end-4 { --col-end: 4; }
    .lg\:col-end-5, .lg-col-end-5 { --col-end: 5; }
    .lg\:col-end-6, .lg-col-end-6 { --col-end: 6; }
    .lg\:col-end-7, .lg-col-end-7 { --col-end: 7; }
    .lg\:col-end-8, .lg-col-end-8 { --col-end: 8; }
    .lg\:col-end-9, .lg-col-end-9 { --col-end: 9; }
    .lg\:col-end-10, .lg-col-end-10 { --col-end: 10; }
    .lg\:col-end-11, .lg-col-end-11 { --col-end: 11; }
    .lg\:col-end-12, .lg-col-end-12 { --col-end: 12; }
    .lg\:col-end-13, .lg-col-end-13 { --col-end: 13; }
    .lg\:col-end-14, .lg-col-end-14 { --col-end: 14; }
    .lg\:col-end-15, .lg-col-end-15 { --col-end: 15; }
    .lg\:col-end-16, .lg-col-end-16 { --col-end: 16; }
    .lg\:col-end-17, .lg-col-end-17 { --col-end: 17; }
    .lg\:col-end-18, .lg-col-end-18 { --col-end: 18; }
    .lg\:col-end-19, .lg-col-end-19 { --col-end: 19; }
    .lg\:col-end-20, .lg-col-end-20 { --col-end: 20; }
    .lg\:col-end-21, .lg-col-end-21 { --col-end: 21; }
    .lg\:col-end-22, .lg-col-end-22 { --col-end: 22; }
    .lg\:col-end-23, .lg-col-end-23 { --col-end: 23; }
    .lg\:col-end-24, .lg-col-end-24 { --col-end: 24; }
    .lg\:col-end-25, .lg-col-end-25 { --col-end: 25; }
}

@media (max-width: 600px) {
    .dashboard-grid {
        grid-template-columns: repeat(var(--grid-columns-mobile), minmax(0, 1fr));
    }

    [class*="col-span-"] {
        --col-span: 1;
    }

    [class*="col-start-"],
    [class*="col-offset-"],
    [class*="offset-"] {
        --col-start: auto;
    }

    [class*="col-end-"] {
        --col-end: span 1;
    }
}

/* Flex Utilities */
.flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-2 {
    gap: var(--space-2);
}

.gap-4 {
    gap: var(--space-4);
}