/* Utility Classes */

/* Spacing */
/* Margins */
.m-0 { margin: 0; }
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }
.m-xxl { margin: var(--space-xxl); }

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

.my-0 { margin-top: 0; margin-bottom: 0; }
.my-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
.my-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
.my-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
.my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
.my-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }
.my-xxl { margin-top: var(--space-xxl); margin-bottom: var(--space-xxl); }

.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-xxl { margin-top: var(--space-xxl); }

.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-xxl { margin-bottom: var(--space-xxl); }

.ml-0 { margin-left: 0; }
.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); }
.ml-xxl { margin-left: var(--space-xxl); }

.mr-0 { margin-right: 0; }
.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); }
.mr-xxl { margin-right: var(--space-xxl); }

/* Paddings */
.p-0 { padding: 0; }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-xxl { padding: var(--space-xxl); }

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

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

.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-xxl { padding-top: var(--space-xxl); }

.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-xxl { padding-bottom: var(--space-xxl); }

.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); }
.pl-xxl { padding-left: var(--space-xxl); }

.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); }
.pr-xxl { padding-right: var(--space-xxl); }

/* Gap utility for flex/grid containers */
.gap-0 { gap: 0; }
.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-xxl { gap: var(--space-xxl); }

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

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

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

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

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

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

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

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

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

/* Text Decoration */
.no-underline { text-decoration: none; }
.underline { text-decoration: underline; }

/* Text Color */
.text-main {
    color: var(--theme-color-primary);
}

.text-secondary {
    color: var(--theme-color-secondary);
}

.text-accent {
    color: var(--theme-color-accent);
}

.text-neutral {
    color: var(--theme-color-neutral);
}

.text-danger {
    color: var(--theme-color-accent); /* Or map to a specific danger color if defined in client.css */
}

.text-light {
    color: #FFFFFF; /* Or a specific --theme-text-light if defined in client.css */
}

.text-dark {
    color: #000000; /* Or a specific --theme-text-dark if defined in client.css */
}

.text-subcolor-2 {
    color: var(--theme-color-secondary); /* Legacy, map to semantic */
}
.text-subcolor-3 {
    color: var(--theme-color-accent); /* Legacy, map to semantic */
}
.text-subcolor-4 {
    color: var(--theme-color-accent); /* Legacy, map to semantic (or specific danger color) */
}
.text-subcolor-5 {
    color: var(--theme-color-neutral); /* Legacy, map to semantic */
}

/* Background Color */
.bg-main {
    background-color: var(--theme-color-primary);
}
.bg-secondary {
    background-color: var(--theme-color-secondary);
}
.bg-accent {
    background-color: var(--theme-color-accent);
}
.bg-transparent {
    background-color: transparent;
}

/* Borders */
.border {
    border: 1px solid var(--theme-color-neutral); /* Or a specific border color from client.css */
}

.border-main {
    border: 1px solid var(--theme-color-primary);
}

.rounded {
    border-radius: var(--border-radius-sm); /* Use variable */
}

.rounded-lg {
    border-radius: var(--border-radius-lg); /* Use variable */
}

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

.no-border {
    border: none;
}

/* Visibility */
/* .hidden class removed as it's defined in main.css */

.visible {
    display: block;
}

.invisible {
    visibility: hidden;
}

/* Screen Reader Only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Width and Height */
.w-100 {
    width: 100%;
}

.w-auto {
    width: auto;
}

.h-auto {
    height: auto;
}

.h-100 {
    height: 100%;
}

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

.position-absolute {
    position: absolute;
}

.position-fixed {
    position: fixed;
}

.top-0 {
    top: 0;
}

.bottom-0 {
    bottom: 0;
}

.left-0 {
    left: 0;
}

.right-0 {
    right: 0;
}

/* Shadows */
.shadow-sm {
    box-shadow: var(--theme-shadow-sm);
}

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

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

/* Z-Index */
.z-1 {
    z-index: 1; /* Consider defining z-index scale in :root if used extensively */
}

.z-10 {
    z-index: 10;
}
.z-20 {
    z-index: 20;
}

.z-50 {
    z-index: 50;
}

/* Transitions */
.transition {
    transition: var(--transition);
}

.transition-fast {
    transition: all 0.15s var(--transition-timing-function);
}

.transition-slow {
    transition: all 0.5s var(--transition-timing-function);
}

/* Overflow */
.overflow-hidden {
    overflow: hidden;
}

.overflow-scroll {
    overflow: scroll;
}

.overflow-auto {
    overflow: auto;
}

/* Custom Positioning Utilities */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}