/* ── Status Page ── */
.page-content { padding-top: 100px; padding-bottom: 80px; min-height: 100vh; }

.status-header {
  text-align: center; margin-bottom: 48px;
}

.status-overall {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 32px; background: var(--dark-2);
  border: 1px solid var(--dark-4); border-radius: 50px;
  font-size: 1.2rem; font-weight: 600; color: var(--white);
  margin-bottom: 12px;
}

.status-dot {
  width: 12px; height: 12px; border-radius: 50%;
}
.dot-operational { background: var(--green); box-shadow: 0 0 10px rgba(16, 185, 129, 0.5); }
.dot-degraded { background: var(--orange); box-shadow: 0 0 10px rgba(245, 158, 11, 0.5); }
.dot-outage { background: var(--red); box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); }
.dot-maintenance { background: var(--blue); box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); }
.dot-loading { background: var(--text-dim); animation: pulse 1.5s infinite; }

@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.status-updated { color: var(--text-dimmer); font-size: 0.85rem; }

/* ── Services List ── */
.services-list {
  background: var(--dark-2); border: 1px solid var(--dark-4);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 48px;
}

.service-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid var(--dark-4);
  transition: background 0.2s;
}
.service-row:last-child { border-bottom: none; }
.service-row:hover { background: var(--dark-3); }

.service-info h3 { font-size: 1rem; color: var(--white); margin-bottom: 2px; }
.service-info p { font-size: 0.82rem; color: var(--text-dimmer); }

.service-status {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 16px; border-radius: 50px; font-size: 0.82rem; font-weight: 600;
}
.status-operational { background: rgba(16, 185, 129, 0.1); color: var(--green); }
.status-degraded { background: rgba(245, 158, 11, 0.1); color: var(--orange); }
.status-outage { background: rgba(239, 68, 68, 0.1); color: var(--red); }
.status-maintenance { background: rgba(59, 130, 246, 0.1); color: var(--blue); }

/* ── Incidents ── */
.incidents-section { margin-bottom: 48px; }
.incidents-section h2 {
  font-size: 1.3rem; color: var(--white); margin-bottom: 20px;
  padding-bottom: 12px; border-bottom: 1px solid var(--dark-4);
}

.incident-card {
  background: var(--dark-2); border: 1px solid var(--dark-4);
  border-radius: var(--radius); padding: 24px 28px;
  margin-bottom: 16px;
}

.incident-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.incident-header h3 { font-size: 1.05rem; color: var(--white); }

.incident-severity {
  padding: 4px 12px; border-radius: 50px; font-size: 0.75rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
}
.severity-minor { background: rgba(245, 158, 11, 0.1); color: var(--orange); }
.severity-major { background: rgba(239, 68, 68, 0.1); color: var(--red); }
.severity-critical { background: rgba(239, 68, 68, 0.2); color: #ff6b6b; }

.incident-meta { font-size: 0.82rem; color: var(--text-dimmer); margin-bottom: 12px; }
.incident-desc { font-size: 0.92rem; color: var(--text-dim); margin-bottom: 16px; }

.incident-updates { border-left: 2px solid var(--dark-4); padding-left: 16px; }
.incident-update { margin-bottom: 12px; }
.incident-update:last-child { margin-bottom: 0; }
.incident-update-time { font-size: 0.78rem; color: var(--text-dimmer); }
.incident-update-msg { font-size: 0.88rem; color: var(--text-dim); }
.incident-update-status { font-size: 0.75rem; font-weight: 600; color: var(--cyan); text-transform: uppercase; }

.no-incidents { color: var(--text-dimmer); font-size: 0.92rem; padding: 20px 0; }

/* ── Skeleton ── */
.loading-skeleton { padding: 20px 28px; }
.skeleton-row {
  height: 48px; background: var(--dark-3); border-radius: 8px;
  margin-bottom: 12px; animation: pulse 1.5s infinite;
}

@media (max-width: 768px) {
  .service-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .incident-header { flex-direction: column; align-items: flex-start; gap: 8px; }
}