.top-row {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: row;
    padding: 5px;
    gap: 10px;
}

.gauges-col {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}

.gauges-row {
    margin: 5px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
    height: 100%;
}

.gauge-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gauge-title { font-family: var(--font-mono);    font-size: 10px; fill: var(--text-muted);      letter-spacing: 0.1em; text-transform: uppercase; }
.gauge-pct   { font-family: var(--font-display); font-size: 22px; fill: var(--text-primary);    font-weight: 800; letter-spacing: -0.04em; }
.gauge-sub   { font-family: var(--font-mono);    font-size: 10px; fill: var(--text-secondary); }
.gauge-fill  { transition: stroke-dasharray 0.6s cubic-bezier(0.4, 0, 0.2, 1); }

.gauges-header,
.service-status-header {
    padding: 0.5rem 0.75rem;
}

.service-status-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    & button {
        background: var(--bg-overlay);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-sm);
        padding: 0.3rem 0.75rem;
        color: var(--text-secondary);
        font-family: var(--font-mono);
        font-size: 0.75rem;
        cursor: pointer;
        transition:
            background var(--transition),
            border-color var(--transition),
            color var(--transition);
        &:hover {
            background: var(--accent-dim);
            border-color: var(--accent);
            color: var(--accent);
        }
    }
}

.gauges-header h3,
.service-status-header h3 {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.service-status-div {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.service-status-col {
    margin: 5px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: calc(3 * (50px + 10px)); /* 3 cartes × (hauteur + marges) */
}

.service-card {
    margin: 5px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    box-sizing: border-box;
    transition: border-color var(--transition);
    height: 50px;
    flex-shrink: 0;
}

.service-card:hover {
    border-color: var(--border-light);
}

/* ── Status dot ── */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-muted);
}

.status-dot.active {
    background: #4ade80;
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.5);
}

/* ── Name ── */
.service-name {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-primary);
}

/* ── Button ── */
.service-btn {
    background: var(--bg-overlay);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.75rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    cursor: pointer;
    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition);
}

.service-btn:hover {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
}