/* Ivanhoe — Skeleton-loading placeholders.
   Gebruik: <div class="skeleton skeleton-row"></div> in Razor view
   waar binnen <noscript> of <template>-tags die enkel gerenderd
   worden zolang de echte data nog niet binnen is. */

.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-light, #f1f5f9) 25%,
        var(--border, #e5e7eb) 50%,
        var(--bg-light, #f1f5f9) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--r-md, 8px);
    color: transparent;
    user-select: none;
    pointer-events: none;
}
.skeleton::before { content: '\00a0'; } /* fallback fill */

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

@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; background: var(--bg-light, #f1f5f9); }
}

/* Voorgevormde skeleton-units */
.skeleton-text     { height: 14px; width: 100%; margin: 4px 0; }
.skeleton-text-sm  { height: 11px; width: 60%; margin: 3px 0; }
.skeleton-title    { height: 22px; width: 70%; margin: 8px 0 12px; }
.skeleton-circle   { border-radius: 50%; }
.skeleton-avatar-sm{ width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.skeleton-avatar-md{ width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.skeleton-pill     { height: 20px; width: 60px; border-radius: 99px; }
.skeleton-card     {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
}
.skeleton-row {
    display: flex; gap: 12px; align-items: center;
    padding: 10px 14px; border-bottom: 1px solid var(--border, #e5e7eb);
}
.skeleton-row .col   { flex: 1; min-width: 0; }
.skeleton-stat       {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 14px;
    height: 88px;
}

/* `data-skeleton-show`-attribuut: zichtbaar maken EN echte content verbergen
   wanneer ViewBag/Model nog leeg is. Razor-views gebruiken dit als markup-flag. */
[data-skeleton="show"] .skeleton-only { display: block; }
[data-skeleton="show"] .skeleton-hide { display: none; }
[data-skeleton="hide"] .skeleton-only { display: none; }
[data-skeleton="hide"] .skeleton-hide { display: block; }

html[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.04) 75%);
    background-size: 200% 100%;
}