/* ============================================================
   SSQ Admin Status Indicators
   Canonical dot + bar-segment utilities for admin pages.
   All red/amber/green/green-amber status visuals route through here.
   Tokens live in SSQ_AdminTokens.css.

   Class shape:
     .ssq-status-dot[.is-lg].is-{red|amber|green|green-amber|loading}
     .ssq-status-bar-seg.is-{red|amber|green|green-amber}

   Existing class names in this codebase (.ss-dot-*, .nav-status-dot,
   .traffic-light, .ssq-keycheck-seg-*, .parameter-status .status-dot)
   are aliased to these utilities in their owning page CSS files so
   no HTML/JS rename sweep is required.
   ============================================================ */

/* ── Dot ───────────────────────────────────────────────────── */
.ssq-status-dot {
    --ssq-status-dot-size: 12px;
    display: inline-block;
    width: var(--ssq-status-dot-size);
    height: var(--ssq-status-dot-size);
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--ssq-admin-border);
    transition: background-color 0.25s ease, transform 0.2s ease;
}

.ssq-status-dot.is-red         { background: var(--ssq-admin-error); }
.ssq-status-dot.is-amber       { background: var(--ssq-admin-warning); }
.ssq-status-dot.is-green       { background: var(--ssq-admin-success); }
.ssq-status-dot.is-green-amber { background: var(--ssq-admin-status-green-amber-wedge); }
.ssq-status-dot.is-loading {
    background: var(--ssq-admin-status-loading-bg);
    animation: ssq-status-dot-pulse 2s ease-in-out infinite;
}

@keyframes ssq-status-dot-pulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 0.9; }
}

/* Large + ringed + glossy variant (provider lights, variant cards).
   currentColor drives the ring so modifier classes can set it once. */
.ssq-status-dot.is-lg {
    --ssq-status-dot-size: 16px;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: 2px solid currentColor;
    cursor: pointer;
}

.ssq-status-dot.is-lg.is-red    { color: var(--ssq-admin-status-ring-error); }
.ssq-status-dot.is-lg.is-amber  { color: var(--ssq-admin-status-ring-warning); }
.ssq-status-dot.is-lg.is-green  { color: var(--ssq-admin-status-ring-success); }
.ssq-status-dot.is-lg.is-green-amber {
    color: var(--ssq-admin-status-ring-success);
    border-right-color: var(--ssq-admin-status-ring-warning);
    border-bottom-color: var(--ssq-admin-status-ring-warning);
}
.ssq-status-dot.is-lg.is-loading { color: var(--ssq-admin-status-loading-border); }

.ssq-status-dot.is-lg:hover { transform: scale(1.1); }

.ssq-status-dot.is-lg::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    pointer-events: none;
}

.ssq-status-dot.is-lg.is-loading::after { display: none; }

/* ── Bar segment ───────────────────────────────────────────── */
.ssq-status-bar-seg {
    height: 100%;
    transition: width 0.25s ease;
}

.ssq-status-bar-seg.is-red         { background: var(--ssq-admin-error); }
.ssq-status-bar-seg.is-amber       { background: var(--ssq-admin-warning); }
.ssq-status-bar-seg.is-green       { background: var(--ssq-admin-success); }
.ssq-status-bar-seg.is-green-amber { background: var(--ssq-admin-status-green-amber-hatch); }

/* ── Legacy aliases — keep until call sites migrate ───────────────── */

/* .status-indicator wrapper — used on Client Backend LandingPage variant cards
   and Pg1_2_0 ThirdPartyAPISetup provider rows. */
.status-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.status-label {
    font-weight: 500;
    color: var(--ssq-admin-text-sub);
    font-size: 0.875rem;
    margin-right: 0.25rem;
}

/* .traffic-light — large ringed glossy status dot. Equivalent to
   .ssq-status-dot.is-lg but keeps the legacy class name in use across
   Pg1_2_0_ThirdPartyAPISetup.html and variant-card markup. */
.traffic-light {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.traffic-light:hover {
    transform: scale(1.1);
}

.traffic-light.amber {
    background: var(--ssq-admin-warning);
    border: 2px solid var(--ssq-admin-status-ring-warning);
}

.traffic-light.green {
    background: var(--ssq-admin-success);
    border: 2px solid var(--ssq-admin-status-ring-success);
}

.traffic-light.red {
    background: var(--ssq-admin-error);
    border: 2px solid var(--ssq-admin-status-ring-error);
}

.traffic-light.green-amber {
    background: var(--ssq-admin-status-green-amber-wedge);
    border: 2px solid var(--ssq-admin-status-ring-success);
    border-right-color: var(--ssq-admin-status-ring-warning);
    border-bottom-color: var(--ssq-admin-status-ring-warning);
}

.traffic-light.loading {
    background: var(--ssq-admin-status-loading-bg);
    border: 2px solid var(--ssq-admin-status-loading-border);
    /* Flex-center for the optional .loading-spinner child (Pg1_2_0). */
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ssq-status-dot-pulse 2s ease-in-out infinite;
}

.traffic-light::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    pointer-events: none;
}

.traffic-light.loading::after { display: none; }