/**
 * Display Utility Classes
 *
 * Replaces inline .style.display = 'none'/'block'/'flex' etc.
 * Usage: Add/remove classes instead of manipulating styles directly
 */

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

/* Hide/Show */
.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

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

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

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

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

/* Convenience aliases for common patterns */
.show {
    display: block !important;
}

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

.hide {
    display: none !important;
}

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

.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border: 3px solid var(--color-gray-300, #dee2e6);
    border-top-color: var(--color-primary, #3498db);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

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

.modal-open {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.modal-closed {
    display: none !important;
}

.overlay-visible {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.overlay-hidden {
    display: none !important;
}

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

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

    .show-mobile {
        display: block !important;
    }

    .show-mobile-flex {
        display: flex !important;
    }
}

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

    .show-desktop {
        display: block !important;
    }

    .show-desktop-flex {
        display: flex !important;
    }
}

/* ========================================
   VISIBILITY (different from display)
   ======================================== */

.invisible {
    visibility: hidden !important;
}

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

/* ========================================
   OPACITY UTILITIES
   ======================================== */

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

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

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

/* ========================================
   POINTER EVENTS
   ======================================== */

.pointer-events-none {
    pointer-events: none !important;
}

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