/*
 * skeleton.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Skeleton loading placeholders for dashboard cards and list items.
 * Works with html.light-mode / html.dark-mode theme system.
 *
 * Deploy to : /include/styles/skeleton.css
 * Include in: /views/layout/page_foot.inc
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Shimmer animation ── */
@keyframes shimmer {
    0% {
        background-position: -600px 0;
    }

    100% {
        background-position: 600px 0;
    }
}

/* ── Base skeleton element ── */
.skel {
    border-radius: 6px;
    background-color: rgba(255,255,255,.08);
    background-image: linear-gradient( 90deg, rgba(255,255,255,.04) 0px, rgba(255,255,255,.12) 40px, rgba(255,255,255,.04) 80px );
    background-size: 600px 100%;
    animation: shimmer 1.4s infinite linear;
    display: block;
}

html.light-mode .skel {
    background-color: #e8edf5;
    background-image: linear-gradient( 90deg, #e8edf5 0px, #f4f6fb 40px, #e8edf5 80px );
}

/* ── Skeleton info card (matches .info-card layout) ── */
.skel-card {
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 16px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.06);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

html.light-mode .skel-card {
    background: #f4f6fb;
    border: 1px solid #dde2ee;
}

.skel-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    flex-shrink: 0;
}

.skel-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skel-card__value {
    height: 28px;
    width: 60%;
}

.skel-card__label {
    height: 12px;
    width: 80%;
}

.skel-card__footer {
    height: 36px;
    margin-top: 0;
    border-top: 1px solid rgba(255,255,255,.06);
}

html.light-mode .skel-card__footer {
    border-top-color: #dde2ee;
}