.vr-kpi {
    position: relative;
    /* margin-bottom: 1rem; */
}

.vr-kpi-track {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--vr-kpi-gap, 24px);
    margin: 0;
    padding: 2px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
}

/* The track is the scroll mechanism, not a scrollbar to look at -- the arrows
   and the partially visible next tile already say it scrolls. */
.vr-kpi-track::-webkit-scrollbar {
    display: none;
}

/* Each tile keeps its own markup; only its width and padding are taken over,
   because the Bootstrap column padding would fight the track's gap. */
.vr-kpi-track > [class*="col-"] {
    flex: 0 0 calc(
        (100% - (var(--vr-kpi-per, 4) - 1) * var(--vr-kpi-gap, 24px)) / var(--vr-kpi-per, 4)
    );
    max-width: none;
    width: auto;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
    scroll-snap-align: start;
}


.vr-kpi-nav {
    position: absolute;
    top: 43%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    padding: 0;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 50%;
    background: var(--card-bg, #fff);
    color: var(--heading-color, #111827);

    /* box-shadow: 0 0 0 1px rgba(128, 132, 160, 0.38), 0 2px 8px rgba(16, 24, 40, 0.18); */
    transform: translateY(-50%);
    transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.vr-kpi-nav:hover:not(:disabled) {
    background: var(--primary, #482dc1);
    border-color: var(--primary, #482dc1);
    color: #fff;
}

.vr-kpi-nav:disabled {
    opacity: 0.35;
    cursor: default;
    box-shadow: none;
}

.vr-kpi-nav i {
    font-size: 18px;
    line-height: 1;
}

.vr-kpi-prev {
    left: -14px;
}

.vr-kpi-next {
    right: -14px;
}

/* Nothing to scroll: no arrows, and no reason for the track to behave like a
   scroller either. */
.vr-kpi:not(.is-scrollable) .vr-kpi-nav {
    display: none;
}

/* A hint that the row continues past the right edge — it fades out as the
   track reaches the end. Pointer-events off so it never eats a click on a
   tile underneath. */
.vr-kpi::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 48px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    /* Both stops are the page's own ground, one of them at zero alpha. Fading
       from a hard-coded white would show a pale band in the dark theme. */
    background: linear-gradient(
        to right,
        var(--vr-kpi-fade-from, rgba(255, 255, 255, 0)),
        var(--vr-kpi-fade, #f1f2f4)
    );
}

.vr-kpi.is-scrollable:not(.at-end)::after {
    opacity: 1;
}

/* On a touch screen the swipe is the affordance; arrows would only cover a
   tile. */
@media (hover: none) and (pointer: coarse) {
    .vr-kpi-nav {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .vr-kpi-prev {
        left: -6px;
    }

    .vr-kpi-next {
        right: -6px;
    }
}

@media print {
    .vr-kpi-track {
        overflow: visible;
        flex-wrap: wrap;
    }

    .vr-kpi-nav,
    .vr-kpi::after {
        display: none;
    }
}