/**
 * Skeleton Loading States
 *
 * Beautiful skeleton screens for better perceived performance
 * during data loading
 */

/* Base skeleton animation */
@keyframes skeleton-pulse {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes skeleton-shimmer {
    0% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.6;
    }
}

/* Skeleton base class */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-secondary, #f0f0f0) 0%,
        var(--bg-tertiary, #e0e0e0) 50%,
        var(--bg-secondary, #f0f0f0) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: var(--radius-md, 6px);
    cursor: wait;
    pointer-events: none;
}

/* Dark mode support */
@media (prefers-color-scheme: DISABLED-dark) {
    .skeleton {
        background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0.05) 100%
        );
    }
}

/* Text skeletons */
.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
    width: 100%;
}

.skeleton-text-sm {
    height: 0.875em;
}

.skeleton-text-lg {
    height: 1.25em;
}

.skeleton-text-short {
    width: 60%;
}

.skeleton-text-medium {
    width: 80%;
}

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

/* Title skeleton */
.skeleton-title {
    height: 2em;
    width: 40%;
    margin-bottom: 1em;
    border-radius: var(--radius-lg, 8px);
}

/* Avatar skeleton */
.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.skeleton-avatar-sm {
    width: 32px;
    height: 32px;
}

.skeleton-avatar-lg {
    width: 64px;
    height: 64px;
}

/* Image skeleton */
.skeleton-image {
    width: 100%;
    height: 200px;
    border-radius: var(--radius-lg, 8px);
}

.skeleton-image-sm {
    height: 120px;
}

.skeleton-image-lg {
    height: 300px;
}

/* Card skeleton */
.skeleton-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl, 12px);
    padding: var(--spacing-6, 24px);
    margin-bottom: var(--spacing-4, 16px);
}

.skeleton-card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3, 12px);
    margin-bottom: var(--spacing-4, 16px);
}

.skeleton-card-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2, 8px);
}

/* Table skeleton */
.skeleton-table {
    width: 100%;
}

.skeleton-table-row {
    display: grid;
    gap: var(--spacing-3, 12px);
    padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
    border-bottom: 1px solid var(--border-primary);
}

.skeleton-table-row-7-cols {
    grid-template-columns: repeat(7, 1fr);
}

.skeleton-table-row-5-cols {
    grid-template-columns: repeat(5, 1fr);
}

.skeleton-table-row-4-cols {
    grid-template-columns: repeat(4, 1fr);
}

.skeleton-table-row-3-cols {
    grid-template-columns: repeat(3, 1fr);
}

.skeleton-table-cell {
    height: 1.2em;
    border-radius: var(--radius-sm, 4px);
}

/* Stat card skeleton */
.skeleton-stat-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2, 8px);
}

.skeleton-stat-label {
    height: 0.875em;
    width: 60%;
    border-radius: var(--radius-sm, 4px);
}

.skeleton-stat-value {
    height: 2em;
    width: 40%;
    border-radius: var(--radius-md, 6px);
}

.skeleton-stat-change {
    height: 0.75em;
    width: 30%;
    border-radius: var(--radius-sm, 4px);
}

/* Button skeleton */
.skeleton-button {
    height: 40px;
    width: 120px;
    border-radius: var(--radius-lg, 8px);
}

.skeleton-button-sm {
    height: 32px;
    width: 80px;
}

.skeleton-button-lg {
    height: 48px;
    width: 160px;
}

/* Input skeleton */
.skeleton-input {
    height: 40px;
    border-radius: var(--radius-md, 6px);
}

/* Chart skeleton */
.skeleton-chart {
    height: 300px;
    border-radius: var(--radius-lg, 8px);
}

.skeleton-chart-sm {
    height: 200px;
}

.skeleton-chart-lg {
    height: 400px;
}

/* List skeleton */
.skeleton-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3, 12px);
}

.skeleton-list-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3, 12px);
    padding: var(--spacing-3, 12px);
    border-radius: var(--radius-md, 6px);
    background: var(--bg-secondary);
}

.skeleton-list-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2, 8px);
}

/* Grid skeleton */
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-6, 24px);
}

/* Dashboard specific skeletons */
.skeleton-dashboard-stat {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl, 12px);
    padding: var(--spacing-6, 24px);
}

.skeleton-dashboard-chart {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl, 12px);
    padding: var(--spacing-6, 24px);
}

/* Form skeleton */
.skeleton-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4, 16px);
}

.skeleton-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2, 8px);
}

.skeleton-form-label {
    height: 0.875em;
    width: 30%;
    border-radius: var(--radius-sm, 4px);
}

/* Modal skeleton */
.skeleton-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6, 24px);
}

.skeleton-modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4, 16px);
}

/* Breadcrumb skeleton */
.skeleton-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--spacing-2, 8px);
    margin-bottom: var(--spacing-4, 16px);
}

.skeleton-breadcrumb-item {
    height: 1em;
    width: 80px;
    border-radius: var(--radius-sm, 4px);
}

/* Badge skeleton */
.skeleton-badge {
    height: 1.5em;
    width: 60px;
    border-radius: var(--radius-full, 9999px);
}

/* Progress bar skeleton */
.skeleton-progress {
    height: 8px;
    border-radius: var(--radius-full, 9999px);
    overflow: hidden;
    background: var(--bg-tertiary);
}

.skeleton-progress-bar {
    height: 100%;
    width: 60%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

/* Circle skeleton */
.skeleton-circle {
    border-radius: 50%;
}

.skeleton-circle-sm {
    width: 24px;
    height: 24px;
}

.skeleton-circle-md {
    width: 40px;
    height: 40px;
}

.skeleton-circle-lg {
    width: 64px;
    height: 64px;
}

/* Utility classes */
.skeleton-container {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4, 16px);
}

.skeleton-hide {
    display: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .skeleton-grid {
        grid-template-columns: 1fr;
    }

    .skeleton-table-row {
        grid-template-columns: 1fr;
        gap: var(--spacing-2, 8px);
    }
}

/* Print styles */
@media print {
    .skeleton,
    .skeleton-card,
    .skeleton-table,
    .skeleton-dashboard-stat,
    .skeleton-dashboard-chart {
        display: none !important;
    }
}

/* Accessibility */
.skeleton[aria-hidden="false"] {
    position: relative;
}

.skeleton[aria-hidden="false"]::after {
    content: attr(aria-label);
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: skeleton-shimmer 3s ease-in-out infinite;
    }
}