/* ============================================
   LOADING STATES AND SKELETON SCREENS
   ============================================ */

/* Image Loading States */
.image-loading {
    opacity: 0; transition: opacity 0.3s ease; }

.image-loaded {
    animation: fadeIn 0.3s ease; }

.image-error {
    filter: grayscale(100%); }

/* Image Skeleton Placeholder */
.image-skeleton {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.05) 25%,
        rgba(0, 0, 0, 0.1) 50%,
        rgba(0, 0, 0, 0.05) 75%
    ); background-size: 200% 100%; border-radius: inherit; }

body.dark-mode .image-skeleton {
        90deg,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 75%
    ); }

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0; }
}

/* Content Skeleton */
.content-skeleton {
    padding: 20px; }

.skeleton-line {
        90deg,
        rgba(0, 0, 0, 0.05) 25%,
        rgba(0, 0, 0, 0.1) 50%,
        rgba(0, 0, 0, 0.05) 75%
    ); margin-bottom: 10px; }

body.dark-mode .skeleton-line {
        90deg,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 75%
    ); }

/* Page Loading State */
.page-loading {
    overflow: hidden; }

.page-loading::before {
    content: ''; z-index: 9999; }

.page-loaded::before {
    pointer-events: none; }

/* Loading Spinner */
.loading-spinner {
    display: inline-block; border: 3px solid rgba(0, 0, 0, 0.1); border-top-color: var(--primary-color, #0d6efd); }

@keyframes spin {
    to {
        transform: rotate(360deg); }
}

/* Loading Button State */
button.loading,
a.loading {
    color: transparent !important; }

/* Content Loading State */
.content-loading {
    min-height: 200px; }