/* Loading overlay + fade-in shared by the analytics pages (same visual as the
   Call Events / Recordings / Menus overlays).

   - Add .slc-loading-host to the container the overlay should cover, and put a
     .slc-table-loading.d-none div with a spinner inside it. Reload pages toggle it
     via slcReloadOverlay() in quickRangeState.js; AJAX pages toggle it themselves.
   - Add .slc-anim to an element whose content was just replaced to fade it in. */

.slc-loading-host {
    position: relative;
}

.slc-table-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--vz-card-bg-rgb, 255, 255, 255), .48);
    backdrop-filter: blur(1px);
    z-index: 2;
}

[data-bs-theme="dark"] .slc-table-loading,
[data-layout-mode="dark"] .slc-table-loading,
body[data-layout-mode="dark"] .slc-table-loading {
    background: rgba(15, 23, 42, .32);
}

/* For tall hosts (whole-page stats layouts): keep the spinner near the top of the
   viewport instead of centering it halfway down a 2000px column. */
.slc-table-loading--top {
    align-items: flex-start;
    padding-top: 20vh;
}

@keyframes slcFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.slc-anim {
    animation: slcFadeIn .25s ease;
}

@media (prefers-reduced-motion: reduce) {
    .slc-anim {
        animation: none;
    }
}

/* ── Group-panel loading skeleton ────────────────────────────────────────────
   The left-hand grouping panels (Tags, Contacts, Forwarding, Call Events, ...)
   are an empty list container that each page's JS fills only after its data
   fetch returns, so the card rendered as a header above blank space while
   loading. Put <partial name="_GroupPanelSkeleton" /> inside the container:
   it mirrors a real group row (icon, label, count badge) and needs no JS,
   because every panel builds with `container.innerHTML = ...`, which clears
   the placeholder as a side effect. */
.slc-sk {
    display: block;
    /* Velzon does not define Bootstrap's --bs-tertiary-bg/--bs-secondary-bg, so
       those silently fall back to their light literals and the bars render
       near-white on a dark card. Use --vz-* instead: border-color is the base
       tone and --vz-light the shimmer, giving a ~10-point delta in BOTH themes
       (light #e9ebec -> #f3f6f9, dark #32383e -> #282b2e). */
    background: linear-gradient(90deg,
        var(--vz-border-color, #e9ebec) 25%,
        var(--vz-light, #f3f6f9) 50%,
        var(--vz-border-color, #e9ebec) 75%);
    background-size: 200% 100%;
    animation: slc-sk-pulse 1.5s infinite;
    border-radius: .25rem;
}

.slc-sk-icon { width: 1rem; height: 1rem; border-radius: 50%; flex-shrink: 0; }
.slc-sk-line { height: .75rem; }
.slc-sk-pill { width: 1.75rem; height: .95rem; border-radius: .75rem; flex-shrink: 0; }

/* Uneven label widths so the placeholder reads as a list of names rather than
   a stack of identical bars. */
.slc-panel-skeleton .list-group-item:nth-child(1) .slc-sk-line { max-width: 76%; }
.slc-panel-skeleton .list-group-item:nth-child(2) .slc-sk-line { max-width: 56%; }
.slc-panel-skeleton .list-group-item:nth-child(3) .slc-sk-line { max-width: 68%; }
.slc-panel-skeleton .list-group-item:nth-child(4) .slc-sk-line { max-width: 46%; }

@keyframes slc-sk-pulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .slc-sk { animation: none; }
}