/* =============================================================
   Vectivo — statuspage.css
   ============================================================= */

.status-page {
    padding: 80px 0 96px;
    min-height: 70vh;
}

.status-header {
    text-align: center;
    margin-bottom: 40px;
}
.status-header h1 {
    font-family: var(--font-display);
    font-size: clamp(32px, 5vw, 44px);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--hemelgrijs);
    margin-bottom: 10px;
}
.status-sub {
    color: var(--staal-mid);
    font-size: 16px;
}

/* ── Overall banner ────────────────────────────────────────── */
.overall {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    border-radius: var(--radius-lg, 10px);
    margin-bottom: 40px;
    border: 1px solid;
}
.overall-operational { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.35); }
.overall-degraded    { background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.35); }
.overall-outage      { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.35); }
.overall-maintenance { background: rgba(59, 130, 246, 0.08); border-color: rgba(59, 130, 246, 0.35); }

.overall-dot {
    width: 14px; height: 14px; border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 12px currentColor;
}
.overall-operational .overall-dot { background: #10B981; color: #10B981; }
.overall-degraded .overall-dot    { background: #FBBF24; color: #FBBF24; }
.overall-outage .overall-dot      { background: #EF4444; color: #EF4444; animation: pulse 1.5s infinite; }
.overall-maintenance .overall-dot { background: #3B82F6; color: #3B82F6; }

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: 0.7; }
}

.overall-text { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.overall-text strong { font-size: 16px; color: var(--hemelgrijs); }
.overall-time { font-size: 12px; color: var(--staal-mid); }

/* ── Sections ──────────────────────────────────────────────── */
.status-section { margin-bottom: 40px; }
.status-section h2 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--hemelgrijs);
    margin-bottom: 14px;
    letter-spacing: -0.01em;
}

/* ── Service list ──────────────────────────────────────────── */
.service-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--diep);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg, 10px);
    overflow: hidden;
}
.service-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.service-row:last-child { border-bottom: none; }

.service-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.service-dot-green  { background: #10B981; box-shadow: 0 0 8px rgba(16, 185, 129, 0.5); }
.service-dot-yellow { background: #FBBF24; box-shadow: 0 0 8px rgba(251, 191, 36, 0.5); }
.service-dot-red    { background: #EF4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.5); }
.service-dot-blue   { background: #3B82F6; box-shadow: 0 0 8px rgba(59, 130, 246, 0.5); }

.service-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.service-name { font-weight: 600; color: var(--hemelgrijs); font-size: 14px; }
.service-desc { color: var(--staal-mid); font-size: 12px; }
.service-state { color: var(--staal-mid); font-size: 13px; }

/* ── Incident card ─────────────────────────────────────────── */
.incident {
    background: var(--diep);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left-width: 3px;
    border-radius: var(--radius-lg, 10px);
    padding: 20px;
    margin-bottom: 16px;
}
.incident-minor       { border-left-color: #FBBF24; }
.incident-major       { border-left-color: #EF4444; }
.incident-critical    { border-left-color: #DC2626; }
.incident-maintenance { border-left-color: #3B82F6; }

.incident-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.incident h3 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--hemelgrijs);
    margin: 0;
}
.incident p {
    color: var(--staal-mid);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 8px;
}
.incident-meta {
    font-size: 12px;
    color: var(--staal);
}

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.badge-investigating { background: rgba(251, 191, 36, 0.15); color: #FBBF24; }
.badge-identified    { background: rgba(59, 130, 246, 0.15); color: #3B82F6; }
.badge-monitoring    { background: rgba(168, 85, 247, 0.15); color: #C084FC; }
.badge-resolved      { background: rgba(16, 185, 129, 0.15); color: #10B981; }
.badge-minor         { background: rgba(251, 191, 36, 0.15); color: #FBBF24; }
.badge-major         { background: rgba(239, 68, 68, 0.15); color: #EF4444; }
.badge-critical      { background: rgba(220, 38, 38, 0.15); color: #DC2626; }
.badge-maintenance   { background: rgba(59, 130, 246, 0.15); color: #3B82F6; }

.incident-updates {
    list-style: none;
    padding: 16px 0 0;
    margin: 16px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.incident-updates li {
    display: grid;
    grid-template-columns: 100px auto 1fr;
    gap: 10px;
    align-items: center;
    font-size: 13px;
}
.incident-updates time { color: var(--staal); font-size: 12px; }
.incident-updates p { margin: 0; }

@media (max-width: 540px) {
    .incident-updates li {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* ── Recent list ───────────────────────────────────────────── */
.recent-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.recent-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 14px;
}
.recent-item time {
    color: var(--staal);
    font-size: 13px;
    min-width: 90px;
    flex-shrink: 0;
}
.recent-title {
    flex: 1;
    color: var(--hemelgrijs);
}

.status-footer {
    margin-top: 60px;
    text-align: center;
    color: var(--staal-mid);
    font-size: 13px;
}
.status-footer p { margin-bottom: 8px; }
.status-footer a {
    color: var(--aqua);
    border-bottom: 1px solid rgba(0, 229, 204, 0.3);
}