/* ═══════════════════════════════════════════════════════════════
   Network Monitor v5.0 — Dashboard CSS
   Stat grid, stat cards, color variants, alert list
   ═══════════════════════════════════════════════════════════════ */

/* ── Stat Grid ── */
.S {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 9px;
    margin-bottom: 14px;
}

/* ── Stat Card ── */
.sc {
    background: var(--b1);
    border: 1px solid var(--br0);
    border-radius: var(--r);
    padding: 12px 14px;
    position: relative;
    overflow: hidden;
    transition: all var(--transition);
    cursor: default;
}

.sc:hover {
    border-color: var(--br1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

.sc .v {
    font-family: var(--m);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 2px;
}

.sc .l {
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--t3);
}

/* ── Stat Card Color Variants ── */
.s1 .v { color: var(--cyan); }
.s1 { border-bottom: 2px solid var(--cyan); }
.s1::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--cd), transparent 60%);
    pointer-events: none;
}

.s2 .v { color: var(--blue); }
.s2 { border-bottom: 2px solid var(--blue); }
.s2::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--bd), transparent 60%);
    pointer-events: none;
}

.s3 .v { color: var(--green); }
.s3 { border-bottom: 2px solid var(--green); }
.s3::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--gd), transparent 60%);
    pointer-events: none;
}

.s4 .v { color: var(--pur); }
.s4 { border-bottom: 2px solid var(--pur); }
.s4::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--pd), transparent 60%);
    pointer-events: none;
}

.s5 .v { color: var(--yel); }
.s5 { border-bottom: 2px solid var(--yel); }
.s5::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--yd), transparent 60%);
    pointer-events: none;
}

.s6 .v { color: var(--ora); }
.s6 { border-bottom: 2px solid var(--ora); }
.s6::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--od), transparent 60%);
    pointer-events: none;
}

/* ── Danger State ── */
.s6.dn {
    border-bottom-color: var(--red);
    animation: rp 2s infinite;
    box-shadow: var(--glow-red);
}

.s6.dn .v { color: var(--red); }

.s6.dn::before {
    background: linear-gradient(135deg, var(--rd), transparent 60%);
}

/* ── Flash update — fires when animateValue() detects a change ── */
.v.flash-update {
    animation: flashUpdate .6s var(--ease-expo) forwards;
}

/* ── Staggered SpringIn for stat cards ── */
.S .sc { animation: springIn .4s var(--ease-spring) both; }
.S .sc:nth-child(1) { animation-delay: .00s; }
.S .sc:nth-child(2) { animation-delay: .05s; }
.S .sc:nth-child(3) { animation-delay: .10s; }
.S .sc:nth-child(4) { animation-delay: .15s; }
.S .sc:nth-child(5) { animation-delay: .20s; }
.S .sc:nth-child(6) { animation-delay: .25s; }

/* ── Stat card glow on hover per color ── */
.s1:hover { box-shadow: var(--glow-cyan); }
.s2:hover { box-shadow: var(--glow-blue); }
.s3:hover { box-shadow: var(--glow-green); }
.s4:hover { box-shadow: var(--glow-pur); }
.s5:hover { box-shadow: var(--glow-yel); }
.s6:hover { box-shadow: var(--glow-yel); }

/* ── Alert List ── */
.al {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    max-height: 340px;
    overflow-y: auto;
}

.ald {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--rs);
    background: var(--b2);
    border: 1px solid var(--br0);
    transition: all var(--transition);
    cursor: pointer;
}

.ald:hover {
    border-color: var(--br1);
    background: var(--b3);
}

/* Severity dots */
.ald::before {
    content: '';
    width: 6px;
    height: 6px;
    min-width: 6px;
    border-radius: 50%;
    margin-top: 4px;
    background: var(--t3);
}

.ald.critical::before { background: var(--red); box-shadow: 0 0 6px var(--rd); }
.ald.high::before { background: var(--ora); box-shadow: 0 0 6px var(--od); }
.ald.medium::before { background: var(--yel); }
.ald.low::before { background: var(--green); }

.alb {
    flex: 1;
    min-width: 0;
}

.alt {
    font-size: 10px;
    font-weight: 500;
    color: var(--t1);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ade {
    font-size: 9px;
    color: var(--t3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alm {
    font-size: 8px;
    color: var(--t3);
    font-family: var(--m);
    white-space: nowrap;
    flex-shrink: 0;
}