/* Layout System */
/* Grid and Flexbox for precise alignment */

/* ===== Container ===== */
.container {
    width: 100%;
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.container-sm {
    max-width: var(--container-lg);
}

.container-xs {
    max-width: var(--container-md);
}

/* ===== Grid System ===== */
.grid {
    display: grid;
    gap: var(--grid-gutter);
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gutter);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gutter);
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gutter);
}

.grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--grid-gutter);
}

.grid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gutter);
}

/* ===== Flexbox System ===== */
.flex {
    display: flex;
}

.flex-inline {
    display: inline-flex;
}

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

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

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

/* ===== Flex Alignment ===== */
.items-start {
    align-items: flex-start;
}

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

.items-end {
    align-items: flex-end;
}

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

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

/* ===== Flex Justification ===== */
.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

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

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

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

/* ===== Flex Gap ===== */
.gap-xs {
    gap: var(--space-xs);
}

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

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

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

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

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

/* ===== Flex Grow/Shrink ===== */
.flex-grow {
    flex-grow: 1;
}

.flex-shrink {
    flex-shrink: 1;
}

.flex-no-shrink {
    flex-shrink: 0;
}

.flex-1 {
    flex: 1 1 0%;
}

.flex-auto {
    flex: 1 1 auto;
}

.flex-none {
    flex: none;
}

/* ===== Positioning ===== */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.top-0 {
    top: 0;
}

.right-0 {
    right: 0;
}

.bottom-0 {
    bottom: 0;
}

.left-0 {
    left: 0;
}

/* ===== Spacing Utilities ===== */
.m-0 { margin: 0; }
.m-auto { margin: auto; }

.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }

.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }

.ml-0 { margin-left: 0; }
.ml-auto { margin-left: auto; }
.ml-xs { margin-left: var(--space-xs); }
.ml-sm { margin-left: var(--space-sm); }
.ml-md { margin-left: var(--space-md); }
.ml-lg { margin-left: var(--space-lg); }
.ml-xl { margin-left: var(--space-xl); }

.mr-0 { margin-right: 0; }
.mr-auto { margin-right: auto; }
.mr-xs { margin-right: var(--space-xs); }
.mr-sm { margin-right: var(--space-sm); }
.mr-md { margin-right: var(--space-md); }
.mr-lg { margin-right: var(--space-lg); }
.mr-xl { margin-right: var(--space-xl); }

.mx-0 { margin-left: 0; margin-right: 0; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-auto { margin-top: auto; margin-bottom: auto; }

.p-0 { padding: 0; }
.pt-0 { padding-top: 0; }
.pt-xs { padding-top: var(--space-xs); }
.pt-sm { padding-top: var(--space-sm); }
.pt-md { padding-top: var(--space-md); }
.pt-lg { padding-top: var(--space-lg); }
.pt-xl { padding-top: var(--space-xl); }
.pt-2xl { padding-top: var(--space-2xl); }
.pt-3xl { padding-top: var(--space-3xl); }

.pb-0 { padding-bottom: 0; }
.pb-xs { padding-bottom: var(--space-xs); }
.pb-sm { padding-bottom: var(--space-sm); }
.pb-md { padding-bottom: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }
.pb-xl { padding-bottom: var(--space-xl); }
.pb-2xl { padding-bottom: var(--space-2xl); }
.pb-3xl { padding-bottom: var(--space-3xl); }

.pl-0 { padding-left: 0; }
.pl-xs { padding-left: var(--space-xs); }
.pl-sm { padding-left: var(--space-sm); }
.pl-md { padding-left: var(--space-md); }
.pl-lg { padding-left: var(--space-lg); }
.pl-xl { padding-left: var(--space-xl); }

.pr-0 { padding-right: 0; }
.pr-xs { padding-right: var(--space-xs); }
.pr-sm { padding-right: var(--space-sm); }
.pr-md { padding-right: var(--space-md); }
.pr-lg { padding-right: var(--space-lg); }
.pr-xl { padding-right: var(--space-xl); }

.px-0 { padding-left: 0; padding-right: 0; }
.py-0 { padding-top: 0; padding-bottom: 0; }
.px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

/* ===== Width Utilities ===== */
.w-full {
    width: 100%;
}

.w-screen {
    width: 100vw;
}

.w-auto {
    width: auto;
}

.w-half {
    width: 50%;
}

.w-third {
    width: 33.333333%;
}

.w-two-thirds {
    width: 66.666667%;
}

.w-quarter {
    width: 25%;
}

.w-three-quarters {
    width: 75%;
}

.max-w-xs {
    max-width: var(--container-xs);
}

.max-w-sm {
    max-width: var(--container-sm);
}

.max-w-md {
    max-width: var(--container-md);
}

.max-w-lg {
    max-width: var(--container-lg);
}

.max-w-xl {
    max-width: var(--container-xl);
}

.max-w-2xl {
    max-width: var(--container-2xl);
}

.max-w-full {
    max-width: 100%;
}

.max-w-none {
    max-width: none;
}

/* ===== Height Utilities ===== */
.h-full {
    height: 100%;
}

.h-screen {
    height: 100vh;
}

.h-auto {
    height: auto;
}

.min-h-screen {
    min-height: 100vh;
}

.min-h-0 {
    min-height: 0;
}

.max-h-full {
    max-height: 100%;
}

.max-h-screen {
    max-height: 100vh;
}

/* ===== Display Utilities ===== */
.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.inline {
    display: inline;
}

.hidden {
    display: none;
}

/* ===== Overflow Utilities ===== */
.overflow-auto {
    overflow: auto;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-visible {
    overflow: visible;
}

.overflow-scroll {
    overflow: scroll;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-y-auto {
    overflow-y: auto;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.overflow-y-hidden {
    overflow-y: hidden;
}

/* ===== Border Radius ===== */
.rounded-none {
    border-radius: var(--radius-none);
}

.rounded-sm {
    border-radius: var(--radius-sm);
}

.rounded {
    border-radius: var(--radius-md);
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.rounded-xl {
    border-radius: var(--radius-xl);
}

.rounded-2xl {
    border-radius: var(--radius-2xl);
}

.rounded-full {
    border-radius: var(--radius-full);
}

/* ===== Box Shadow ===== */
.shadow-none {
    box-shadow: none;
}

.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow {
    box-shadow: var(--shadow-md);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-xl {
    box-shadow: var(--shadow-xl);
}

/* ===== Opacity ===== */
.opacity-0 {
    opacity: var(--opacity-0);
}

.opacity-25 {
    opacity: var(--opacity-25);
}

.opacity-50 {
    opacity: var(--opacity-50);
}

.opacity-75 {
    opacity: var(--opacity-75);
}

.opacity-100 {
    opacity: var(--opacity-100);
}

/* ===== Pointer Events ===== */
.pointer-events-none {
    pointer-events: none;
}

.pointer-events-auto {
    pointer-events: auto;
}

/* ===== Cursor ===== */
.cursor-auto {
    cursor: auto;
}

.cursor-default {
    cursor: default;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-wait {
    cursor: wait;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

/* ===== User Select ===== */
.select-none {
    user-select: none;
}

.select-text {
    user-select: text;
}

.select-all {
    user-select: all;
}

/* ===== Responsive Grid ===== */
@media (max-width: 1024px) {
    .container {
        padding: 0 var(--space-md);
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--grid-gutter-tablet);
    }

    .grid-6 {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--grid-gutter-tablet);
    }

    .grid-12 {
        grid-template-columns: repeat(8, 1fr);
        gap: var(--grid-gutter-tablet);
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 var(--space-md);
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
        gap: var(--grid-gutter-mobile);
    }

    .grid-6 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--grid-gutter-mobile);
    }

    .grid-12 {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--grid-gutter-mobile);
    }

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

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

    .justify-center-mobile {
        justify-content: center;
    }

    .text-center-mobile {
        text-align: center;
    }

    .mx-auto-mobile {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ===== Tablet Grid ===== */
@media (min-width: 768px) and (max-width: 1024px) {
    .grid-2-tablet {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-3-tablet {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ===== Desktop Grid ===== */
@media (min-width: 1024px) {
    .grid-2-desktop {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-3-desktop {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-4-desktop {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===== Visibility Utilities ===== */
@media (max-width: 767px) {
    .hidden-mobile {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hidden-tablet {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .hidden-desktop {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .block-mobile {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .block-desktop {
        display: none !important;
    }
}