/* ============================================================
   skeleton.css - SKELETON LOADING
   ============================================================ */

/* ============================================================
   SKELETON CONTAINER
   ============================================================ */
.skeleton-container {
    position: relative;
    min-height: 200px;
    transition: opacity var(--transition);
}

    .skeleton-container .skeleton-overlay {
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: var(--z-base);
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-4);
        border-radius: inherit;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition);
    }

    /* Overlay visible state - toggled via JS class */
    .skeleton-container .skeleton-overlay--visible {
        display: flex;
        opacity: 1;
        pointer-events: auto;
    }

    .skeleton-container.loading .skeleton-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .skeleton-container.loading .skeleton-content {
        opacity: 0.3;
        pointer-events: none;
    }

/* ============================================================
   SKELETON LOADER
   ============================================================ */
.skeleton-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6);
}

    .skeleton-loader .spinner {
        width: 40px;
        height: 40px;
        border: 4px solid var(--color-border);
        border-top-color: var(--color-primary);
        border-radius: var(--radius-full);
        animation: skeleton-spin 0.8s linear infinite;
    }

    .skeleton-loader .loading-text {
        color: var(--color-text-muted);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
    }

    .skeleton-loader .loading-progress {
        width: 200px;
        height: 4px;
        background: var(--color-border);
        border-radius: 4px;
        overflow: hidden;
    }

        .skeleton-loader .loading-progress .progress-bar {
            height: 100%;
            width: 0%;
            background: var(--color-primary);
            border-radius: 4px;
            transition: width var(--transition);
            animation: skeleton-progress 1.5s ease-in-out infinite;
        }

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

@keyframes skeleton-progress {
    0% {
        width: 0%;
    }

    50% {
        width: 70%;
    }

    100% {
        width: 100%;
    }
}

/* ============================================================
   SKELETON STATE
   ============================================================ */
.skeleton-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6);
    text-align: center;
}

    .skeleton-state .state-icon {
        font-size: 3rem;
        opacity: 0.5;
    }

    .skeleton-state .state-title {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text);
    }

    .skeleton-state .state-message {
        color: var(--color-text-muted);
        font-size: var(--font-size-sm);
        max-width: 400px;
    }

    .skeleton-state .state-action {
        margin-top: var(--space-2);
    }

/* ============================================================
   SKELETON STATE ICON COLORS
   ============================================================ */
.state-icon--loading i {
    color: var(--color-primary);
}

.state-icon--success i {
    color: var(--color-success);
}

.state-icon--empty i {
    color: var(--color-text-muted);
}

.state-icon--error i {
    color: var(--color-danger);
}

/* ============================================================
   SKELETON LINES
   ============================================================ */
.skeleton-lines {
    padding: var(--space-4);
}

.skeleton-line {
    height: 12px;
    background: var(--color-border);
    border-radius: 4px;
    margin-bottom: var(--space-2);
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

    .skeleton-line:last-child {
        margin-bottom: 0;
    }

    .skeleton-line.short {
        width: 40%;
    }

    .skeleton-line.medium {
        width: 70%;
    }

    .skeleton-line.long {
        width: 100%;
    }

    .skeleton-line.rounded {
        border-radius: 20px;
    }

@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ============================================================
   SKELETON CARD
   ============================================================ */
.skeleton-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    background: var(--color-surface);
}

    .skeleton-card .skeleton-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: var(--space-4);
    }

        .skeleton-card .skeleton-header .skeleton-line {
            flex: 1;
            margin-right: var(--space-2);
        }

            .skeleton-card .skeleton-header .skeleton-line:last-child {
                margin-right: 0;
                flex: 0.3;
            }

    .skeleton-card .skeleton-body .skeleton-line {
        margin-bottom: var(--space-2);
    }

/* ============================================================
   SKELETON TABLE
   ============================================================ */
.skeleton-table {
    width: 100%;
    border-collapse: collapse;
}

    .skeleton-table th,
    .skeleton-table td {
        padding: var(--space-2);
        border-bottom: 1px solid var(--color-border);
    }

    .skeleton-table .skeleton-line {
        margin-bottom: 0;
        height: 16px;
    }

/* ============================================================
   SKELETON FORM
   ============================================================ */
.skeleton-form .skeleton-field {
    margin-bottom: var(--space-4);
}

    .skeleton-form .skeleton-field .skeleton-line {
        height: 14px;
        margin-bottom: var(--space-2);
    }

    .skeleton-form .skeleton-field .skeleton-input {
        height: 38px;
        background: var(--color-border);
        border-radius: var(--radius-sm);
        animation: skeleton-pulse 1.5s ease-in-out infinite;
    }

/* ============================================================
   SKELETON DETAILS
   ============================================================ */
.skeleton-details .skeleton-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 575.98px) {
    .skeleton-details .skeleton-row {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .skeleton-state .state-icon {
        font-size: 2.5rem;
    }

    .skeleton-loader .spinner {
        width: 32px;
        height: 32px;
    }

    .skeleton-loader .loading-progress {
        width: 160px;
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .skeleton-loader .spinner {
        animation-duration: 2s;
    }

    .skeleton-loader .loading-progress .progress-bar {
        animation-duration: 3s;
    }

    .skeleton-line {
        animation-duration: 3s;
    }

    @keyframes skeleton-spin {
        to {
            transform: rotate(0deg);
        }
    }

    @keyframes skeleton-progress {
        0% {
            width: 0%;
        }

        100% {
            width: 100%;
        }
    }
}