/* Modern UI Utilities - Additional Classes */

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

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

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

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

.space-x-2 > * + * {
    margin-left: 8px !important;
}

.gap-2 {
    gap: 8px !important;
}

/* Spacing Utilities */
.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.px-8 {
    padding-left: 32px !important;
    padding-right: 32px !important;
}

.py-4 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

.mb-12 {
    margin-bottom: 48px !important;
}

/* Border Radius */
.rounded-md {
    border-radius: 6px !important;
}

.rounded-lg {
    border-radius: 8px !important;
}

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

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

/* Hover Effects */
.hover\\:shadow-xl:hover {
    box-shadow: var(--shadow-xl) !important;
}

.hover\\:scale-105:hover {
    transform: scale(1.05) !important;
}

/* Transform */
.transform {
    transform: translateZ(0) !important;
}

/* Transition */
.transition-all {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.duration-300 {
    transition-duration: 0.3s !important;
}

/* Background Gradients */
.bg-gradient-to-r {
    background-image: var(--primary-gradient) !important;
}

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

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

/* Whitespace */
.whitespace-nowrap {
    white-space: nowrap !important;
}

/* Position */
.relative {
    position: relative !important;
}

.z-10 {
    z-index: 10 !important;
}

/* Width & Height */
.h-11 {
    height: 44px !important;
}

.h-10 {
    height: 40px !important;
}

/* Focus Visible */
.focus-visible\\:outline-none:focus-visible {
    outline: none !important;
}

.focus-visible\\:ring-2:focus-visible {
    box-shadow: 0 0 0 2px var(--primary-color) !important;
}

/* Disabled States */
.disabled\\:pointer-events-none:disabled {
    pointer-events: none !important;
}

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

/* SVG Utilities */
[class*="svg"] {
    pointer-events: none !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}