/* ========================================
   UTILITY CLASSES
   Functional helper classes for common patterns
   ======================================== */

/* ========================================
   DISPLAY UTILITIES
   ======================================== */

.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

.d-inline {
    display: inline !important;
}

.d-inline-block {
    display: inline-block !important;
}

.d-flex {
    display: flex !important;
}

.d-inline-flex {
    display: inline-flex !important;
}

.d-grid {
    display: grid !important;
}

/* ========================================
   FLEXBOX UTILITIES
   ======================================== */

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

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

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

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

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

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

.flex-none {
    flex: none !important;
}

.justify-start {
    justify-content: flex-start !important;
}

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

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

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

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

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

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

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

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

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

/* ========================================
   SPACING UTILITIES
   ======================================== */

/* Margin */
.m-0 { margin: 0 !important; }
.m-xs { margin: var(--spacing-xs) !important; }
.m-sm { margin: var(--spacing-sm) !important; }
.m-md { margin: var(--spacing-md) !important; }
.m-lg { margin: var(--spacing-lg) !important; }
.m-xl { margin: var(--spacing-xl) !important; }
.m-2xl { margin: var(--spacing-2xl) !important; }
.m-auto { margin: auto !important; }

/* Margin Top */
.mt-0 { margin-top: 0 !important; }
.mt-xs { margin-top: var(--spacing-xs) !important; }
.mt-sm { margin-top: var(--spacing-sm) !important; }
.mt-md { margin-top: var(--spacing-md) !important; }
.mt-lg { margin-top: var(--spacing-lg) !important; }
.mt-xl { margin-top: var(--spacing-xl) !important; }
.mt-2xl { margin-top: var(--spacing-2xl) !important; }
.mt-auto { margin-top: auto !important; }

/* Margin Bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-xs { margin-bottom: var(--spacing-xs) !important; }
.mb-sm { margin-bottom: var(--spacing-sm) !important; }
.mb-md { margin-bottom: var(--spacing-md) !important; }
.mb-lg { margin-bottom: var(--spacing-lg) !important; }
.mb-xl { margin-bottom: var(--spacing-xl) !important; }
.mb-2xl { margin-bottom: var(--spacing-2xl) !important; }
.mb-auto { margin-bottom: auto !important; }

/* Margin Left */
.ml-0 { margin-left: 0 !important; }
.ml-xs { margin-left: var(--spacing-xs) !important; }
.ml-sm { margin-left: var(--spacing-sm) !important; }
.ml-md { margin-left: var(--spacing-md) !important; }
.ml-lg { margin-left: var(--spacing-lg) !important; }
.ml-xl { margin-left: var(--spacing-xl) !important; }
.ml-2xl { margin-left: var(--spacing-2xl) !important; }
.ml-auto { margin-left: auto !important; }

/* Margin Right */
.mr-0 { margin-right: 0 !important; }
.mr-xs { margin-right: var(--spacing-xs) !important; }
.mr-sm { margin-right: var(--spacing-sm) !important; }
.mr-md { margin-right: var(--spacing-md) !important; }
.mr-lg { margin-right: var(--spacing-lg) !important; }
.mr-xl { margin-right: var(--spacing-xl) !important; }
.mr-2xl { margin-right: var(--spacing-2xl) !important; }
.mr-auto { margin-right: auto !important; }

/* Padding */
.p-0 { padding: 0 !important; }
.p-xs { padding: var(--spacing-xs) !important; }
.p-sm { padding: var(--spacing-sm) !important; }
.p-md { padding: var(--spacing-md) !important; }
.p-lg { padding: var(--spacing-lg) !important; }
.p-xl { padding: var(--spacing-xl) !important; }
.p-2xl { padding: var(--spacing-2xl) !important; }

/* Padding Top */
.pt-0 { padding-top: 0 !important; }
.pt-xs { padding-top: var(--spacing-xs) !important; }
.pt-sm { padding-top: var(--spacing-sm) !important; }
.pt-md { padding-top: var(--spacing-md) !important; }
.pt-lg { padding-top: var(--spacing-lg) !important; }
.pt-xl { padding-top: var(--spacing-xl) !important; }
.pt-2xl { padding-top: var(--spacing-2xl) !important; }

/* Padding Bottom */
.pb-0 { padding-bottom: 0 !important; }
.pb-xs { padding-bottom: var(--spacing-xs) !important; }
.pb-sm { padding-bottom: var(--spacing-sm) !important; }
.pb-md { padding-bottom: var(--spacing-md) !important; }
.pb-lg { padding-bottom: var(--spacing-lg) !important; }
.pb-xl { padding-bottom: var(--spacing-xl) !important; }
.pb-2xl { padding-bottom: var(--spacing-2xl) !important; }

/* Gap (for flex/grid containers) */
.gap-xs { gap: var(--spacing-xs) !important; }
.gap-sm { gap: var(--spacing-sm) !important; }
.gap-md { gap: var(--spacing-md) !important; }
.gap-lg { gap: var(--spacing-lg) !important; }
.gap-xl { gap: var(--spacing-xl) !important; }
.gap-2xl { gap: var(--spacing-2xl) !important; }

/* ========================================
   TEXT UTILITIES
   ======================================== */

.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.text-justify {
    text-align: justify !important;
}

.text-xs {
    font-size: var(--font-size-xs) !important;
}

.text-sm {
    font-size: var(--font-size-sm) !important;
}

.text-base {
    font-size: var(--font-size-base) !important;
}

.text-md {
    font-size: var(--font-size-md) !important;
}

.text-lg {
    font-size: var(--font-size-lg) !important;
}

.text-xl {
    font-size: var(--font-size-xl) !important;
}

.font-normal {
    font-weight: var(--font-weight-normal) !important;
}

.font-medium {
    font-weight: var(--font-weight-medium) !important;
}

.font-semibold {
    font-weight: var(--font-weight-semibold) !important;
}

.font-bold {
    font-weight: var(--font-weight-bold) !important;
}

.text-uppercase {
    text-transform: uppercase !important;
}

.text-lowercase {
    text-transform: lowercase !important;
}

.text-capitalize {
    text-transform: capitalize !important;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Text Colors */
.text-primary {
    color: var(--text-primary) !important;
}

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

.text-muted {
    color: var(--text-muted) !important;
}

.text-success {
    color: var(--color-success) !important;
}

.text-warning {
    color: var(--color-warning) !important;
}

.text-error {
    color: var(--color-error) !important;
}

.text-info {
    color: var(--color-info) !important;
}

/* ========================================
   BORDER UTILITIES
   ======================================== */

.border {
    border: 1px solid var(--border-color) !important;
}

.border-0 {
    border: 0 !important;
}

.border-t {
    border-top: 1px solid var(--border-color) !important;
}

.border-r {
    border-right: 1px solid var(--border-color) !important;
}

.border-b {
    border-bottom: 1px solid var(--border-color) !important;
}

.border-l {
    border-left: 1px solid var(--border-color) !important;
}

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

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

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

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

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

.rounded-none {
    border-radius: 0 !important;
}

/* ========================================
   SHADOW UTILITIES
   ======================================== */

.shadow-none {
    box-shadow: none !important;
}

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

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

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

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

/* ========================================
   OVERFLOW UTILITIES
   ======================================== */

.overflow-auto {
    overflow: auto !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

.overflow-visible {
    overflow: visible !important;
}

.overflow-scroll {
    overflow: scroll !important;
}

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

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

/* ========================================
   POSITION UTILITIES
   ======================================== */

.relative {
    position: relative !important;
}

.absolute {
    position: absolute !important;
}

.fixed {
    position: fixed !important;
}

.sticky {
    position: sticky !important;
}

/* ========================================
   WIDTH & HEIGHT UTILITIES
   ======================================== */

.w-full {
    width: 100% !important;
}

.w-auto {
    width: auto !important;
}

.h-full {
    height: 100% !important;
}

.h-auto {
    height: auto !important;
}

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

/* ========================================
   VISIBILITY UTILITIES
   ======================================== */

.visible {
    visibility: visible !important;
}

.invisible {
    visibility: hidden !important;
}

.opacity-0 {
    opacity: 0 !important;
}

.opacity-50 {
    opacity: 0.5 !important;
}

.opacity-100 {
    opacity: 1 !important;
}

/* ========================================
   CURSOR UTILITIES
   ======================================== */

.cursor-pointer {
    cursor: pointer !important;
}

.cursor-default {
    cursor: default !important;
}

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

/* ========================================
   USER SELECT UTILITIES
   ======================================== */

.select-none {
    user-select: none !important;
}

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

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