/**
 * Skeleton Loading Styles
 * Placeholder animations that show content structure while loading
 */

/* Base skeleton animation */
.skeleton {
    background: linear-gradient(90deg, #e9ecef 25%, #dee2e6 50%, #e9ecef 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

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

/* Skeleton text line */
.skeleton-text {
    height: 1rem;
    width: 100%;
    margin-bottom: 0.5rem;
}

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

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

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

/* Skeleton table row */
.skeleton-row {
    display: table-row;
}

.skeleton-row td {
    padding: 0.75rem;
    vertical-align: middle;
}

.skeleton-cell {
    height: 1.25rem;
    border-radius: 4px;
}

/* Different widths for variety */
.skeleton-cell.w-75 { width: 75%; }
.skeleton-cell.w-50 { width: 50%; }
.skeleton-cell.w-25 { width: 25%; }

/* Skeleton card */
.skeleton-card {
    padding: 1rem;
}

.skeleton-card-img {
    height: 120px;
    width: 100%;
    margin-bottom: 1rem;
    border-radius: 8px;
}

.skeleton-card-title {
    height: 1.5rem;
    width: 70%;
    margin-bottom: 0.75rem;
}

.skeleton-card-text {
    height: 1rem;
    width: 90%;
    margin-bottom: 0.5rem;
}

/* Skeleton badge */
.skeleton-badge {
    display: inline-block;
    height: 1.25rem;
    width: 3rem;
    border-radius: 4px;
}

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

/* Dashboard table skeleton - matches 4-column layout */
.skeleton-dashboard-row td:nth-child(1) .skeleton-cell { width: 85%; }
.skeleton-dashboard-row td:nth-child(2) .skeleton-cell { width: 40%; margin: 0 auto; }
.skeleton-dashboard-row td:nth-child(3) .skeleton-cell { width: 40%; margin: 0 auto; }
.skeleton-dashboard-row td:nth-child(4) .skeleton-cell { width: 40%; margin: 0 auto; }

/* Materials table skeleton - matches 7-column layout */
.skeleton-materials-row td:nth-child(1) .skeleton-cell { width: 90%; }
.skeleton-materials-row td:nth-child(2) .skeleton-cell { width: 70%; }
.skeleton-materials-row td:nth-child(3) .skeleton-cell { width: 80%; }
.skeleton-materials-row td:nth-child(4) .skeleton-cell { width: 60%; }
.skeleton-materials-row td:nth-child(5) .skeleton-cell { width: 50%; margin: 0 auto; }
.skeleton-materials-row td:nth-child(6) .skeleton-cell { width: 50%; margin: 0 auto; }
.skeleton-materials-row td:nth-child(7) .skeleton-cell { width: 60%; margin: 0 auto; }

/* Manufacturing card skeleton */
.skeleton-build-card {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.skeleton-build-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.skeleton-build-img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    margin-right: 1rem;
}

.skeleton-build-info {
    flex: 1;
}

.skeleton-build-title {
    height: 1.25rem;
    width: 70%;
    margin-bottom: 0.5rem;
}

.skeleton-build-subtitle {
    height: 1rem;
    width: 50%;
}

.skeleton-build-stats {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.skeleton-build-stat {
    height: 2rem;
    flex: 1;
    border-radius: 4px;
}

/* Container for skeleton loading state */
.skeleton-container {
    opacity: 1;
    transition: opacity 0.2s ease-out;
}

.skeleton-container.fade-out {
    opacity: 0;
}