/* Shared product KPI geometry; colors come from the enclosing theme. */
.dashboard-kpi-card {
    border-radius: var(--gs-radius-panel);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 10.85rem;
    padding: 1rem;
    z-index: 1;
}

.dashboard-kpi-card:hover,
.dashboard-kpi-card:focus-within {
    z-index: 4;
}

.dashboard-kpi-card .stat-value {
    font-size: 2.15rem;
}

.dashboard-kpi-content {
    align-items: center;
    display: grid;
    flex: 1;
    gap: 0.95rem;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 0;
    position: relative;
}

/* Keep ring details above the later action, including the legacy stat-card cascade. */
.dashboard-kpi-card > .dashboard-kpi-content {
    z-index: 3;
}

.dashboard-kpi-copy {
    min-width: 0;
}

.dashboard-kpi-ring {
    --kpi-ring-size: 8.55rem;
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    display: grid;
    flex: 0 0 var(--kpi-ring-size);
    height: var(--kpi-ring-size);
    justify-items: center;
    margin: 0;
    padding: 0;
    position: relative;
    width: var(--kpi-ring-size);
}

.dashboard-kpi-ring::before {
    background:
        radial-gradient(circle at 50% 50%, rgba(var(--gs-primary-rgb), 0.04), transparent 58%),
        rgba(var(--gs-primary-rgb), 0.025);
    border-radius: 50%;
    box-shadow:
        0 0 1.05rem rgba(var(--gs-primary-rgb), 0.13),
        0 0 2.1rem rgba(var(--gs-primary-rgb), 0.065);
    content: "";
    inset: 0.42rem;
    position: absolute;
}

.dashboard-kpi-ring-svg {
    height: 100%;
    overflow: visible;
    position: relative;
    transform: rotate(-90deg);
    width: 100%;
    z-index: 1;
}

.dashboard-kpi-ring-track,
.dashboard-kpi-ring-value {
    fill: none;
    stroke-width: 7;
}

.dashboard-kpi-ring-track {
    stroke: rgba(255, 255, 255, 0.18);
}

.dashboard-kpi-ring-value {
    filter:
        drop-shadow(0 0 0.32rem rgba(var(--gs-primary-rgb), 0.5))
        drop-shadow(0 0 0.72rem rgba(var(--gs-primary-rgb), 0.22));
    stroke: var(--gs-primary);
    stroke-dasharray: var(--kpi-ring-dash, 0) 314.16;
    stroke-linecap: round;
    opacity: var(--kpi-ring-opacity, 1);
    transition: filter 0.18s ease, stroke-dasharray 0.22s ease;
}

.dashboard-kpi-ring-center {
    align-items: center;
    background:
        radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.05), transparent 3.6rem),
        radial-gradient(circle at 50% 85%, rgba(var(--gs-primary-rgb), 0.05), transparent 3.1rem),
        rgba(6, 7, 8, 0.62);
    border: 1px solid rgba(var(--gs-primary-rgb), 0.08);
    border-radius: 50%;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 -0.9rem 1.8rem rgba(var(--gs-primary-rgb), 0.022);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    height: 5.95rem;
    justify-content: center;
    left: 50%;
    line-height: 1;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 5.95rem;
    z-index: 2;
}

.dashboard-kpi-ring-center strong {
    color: var(--gs-text);
    display: block;
    font-size: clamp(1.55rem, 2.45vw, 2.35rem);
    font-weight: 950;
    letter-spacing: 0;
    line-height: 0.95;
    max-width: 5.35rem;
    overflow-wrap: normal;
    text-shadow: 0 4px 14px rgba(0, 0, 0, 0.56);
    white-space: nowrap;
}