/* ===================================================================
   Skeleton loaders — shimmer placeholder while loading
   =================================================================== */

.skel {
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(0, 0, 0, 0.12) 50%,
        rgba(0, 0, 0, 0.05) 100%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.2s ease-in-out infinite;
    border-radius: 6px;
}

:root[data-theme="dark"] .skel {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.04) 100%);
    background-size: 200% 100%;
}

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

.skel-line {
    height: 14px;
    width: 100%;
    margin: 4px 0;
}

.skel-circle {
    border-radius: 50%;
}

.skel-w-50 { width: 50%; }
.skel-w-60 { width: 60%; }
.skel-w-70 { width: 70%; }
.skel-h-30 { height: 30px; }

/* ===== Table skeleton ===== */
.skel-table {
    background: var(--c-surface);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: var(--shadow-card);
}

.skel-row {
    display: grid;
    grid-template-columns: repeat(var(--cols, 5), 1fr);
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--c-border);
}

.skel-row:last-child {
    border-bottom: 0;
}

.skel-row-header .skel-line {
    height: 18px;
    opacity: 0.6;
}

.skel-row > .skel-line {
    margin: 0;
}

/* ===== Card skeleton ===== */
.skel-cards {
    display: grid;
    gap: 14px;
}

.skel-card {
    background: var(--c-surface);
    padding: 16px;
    border-radius: 12px;
    box-shadow: var(--shadow-card);
}

/* ===== Lines (for text) ===== */
.skel-lines {
    padding: 12px;
}