/* ============================================
   CSS UTILITY CLASSES
   Common patterns extracted to reduce duplication
   ============================================ */

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

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

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

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

.flex-gap-1 {
    gap: 0.25rem;
}

.flex-gap-2 {
    gap: 0.5rem;
}

.flex-gap-3 {
    gap: 1rem;
}

.flex-gap-4 {
    gap: 1.5rem;
}

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

.radius-sm {
    border-radius: 0.25rem;
}

.radius-md {
    border-radius: 0.5rem;
}

.radius-lg {
    border-radius: 0.75rem;
}

.radius-xl {
    border-radius: 1rem;
}

.radius-2xl {
    border-radius: 1.5rem;
}

.radius-circle {
    border-radius: 50%;
}

.radius-pill {
    border-radius: 50rem;
}

/* === TRANSITION UTILITIES === */

.transition-fast {
    transition: all 0.15s ease-in-out;
}

.transition-base {
    transition: all 0.3s ease-in-out;
}

.transition-slow {
    transition: all 0.5s ease-in-out;
}

.transition-transform {
    transition: transform 0.3s ease-in-out;
}

.transition-opacity {
    transition: opacity 0.3s ease-in-out;
}

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

.shadow-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.shadow-md {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.shadow-xl {
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
}

.shadow-hover {
    transition: box-shadow 0.3s ease;
}

.shadow-hover:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

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

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-balance {
    text-wrap: balance;
}

/* === HOVER EFFECTS === */

.hover-lift {
    transition: transform 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-2px);
}

.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.02);
}

.hover-opacity {
    transition: opacity 0.3s ease;
}

.hover-opacity:hover {
    opacity: 0.8;
}

/* === ASPECT RATIO UTILITIES === */

.aspect-square {
    aspect-ratio: 1 / 1;
}

.aspect-video {
    aspect-ratio: 16 / 9;
}

.aspect-portrait {
    aspect-ratio: 3 / 4;
}

/* === GRADIENT BACKGROUNDS === */

.gradient-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.gradient-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.gradient-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.gradient-info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

/* === OVERLAY UTILITIES === */

.overlay {
    position: relative;
}

.overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.overlay-light::before {
    background: rgba(255, 255, 255, 0.5);
}

.overlay-dark::before {
    background: rgba(0, 0, 0, 0.7);
}

.overlay > * {
    position: relative;
    z-index: 2;
}

/* === SPACING UTILITIES (Extended) === */

.gap-xs {
    gap: 0.25rem;
}

.gap-sm {
    gap: 0.5rem;
}

.gap-md {
    gap: 1rem;
}

.gap-lg {
    gap: 1.5rem;
}

.gap-xl {
    gap: 2rem;
}

/* === RESPONSIVE UTILITIES === */

@media (max-width: 768px) {
    .mobile-stack {
        flex-direction: column;
    }

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

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

    .mobile-hide {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .desktop-only {
        display: block;
    }

    .mobile-only {
        display: none;
    }
}

/* === LOADING STATES === */

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.loading-dots::after {
    content: '';
    animation: dots 1.5s steps(3, end) infinite;
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* === TRUNCATE WITH TOOLTIP === */

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

/* === BADGE UTILITIES === */

.badge-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.badge-md {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

.badge-lg {
    padding: 0.5rem 1rem;
    font-size: 1rem;
}

/* === Z-INDEX SCALE === */

.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-100 { z-index: 100; }
.z-999 { z-index: 999; }
.z-9999 { z-index: 9999; }

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

.cursor-pointer {
    cursor: pointer;
}

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

.cursor-grab {
    cursor: grab;
}

.cursor-grabbing {
    cursor: grabbing;
}