/* ─── status.css ─────────────────────────────────────────────────────────────
   Server status page styles.
   ─────────────────────────────────────────────────────────────────────────── */

.status-hero {
  padding:     calc(var(--nav-h) + 2.5rem) 0 2.5rem;
  border-bottom: 1px solid var(--border);
}

/* ─── Overall banner ─────────────────────────────────────────────────────────*/
.status-banner {
  display:       flex;
  align-items:   center;
  gap:           0.75rem;
  padding:       1rem 1.5rem;
  border-radius: var(--radius);
  font-size:     1.05rem;
  margin-bottom: 2rem;
}
.status-banner--ok    { background: rgba(0,229,176,0.1); border: 1px solid rgba(0,229,176,0.25); }
.status-banner--issue { background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.25); }

.status-dot {
  width:         12px;
  height:        12px;
  border-radius: 50%;
  flex-shrink:   0;
}
.status-dot--ok    { background: var(--accent2); box-shadow: 0 0 8px var(--accent2); animation: pulse 2s infinite; }
.status-dot--issue { background: #f59e0b; box-shadow: 0 0 8px #f59e0b; animation: pulse 1s infinite; }

/* ─── Service cards ──────────────────────────────────────────────────────────*/
#status-services {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1.25rem;
  margin-bottom:         3rem;
}
.status-card        { padding: 1.5rem; }
.status-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.status-svc-name    { font-weight: 700; font-size: 1rem; }
.status-pill {
  display:       flex;
  align-items:   center;
  gap:           0.4rem;
  padding:       0.25rem 0.75rem;
  border-radius: 50px;
  font-size:     0.8rem;
  font-weight:   600;
}
.status-pill--ok    { background: rgba(0,229,176,0.12); color: var(--accent2); }
.status-pill--issue { background: rgba(245,158,11,0.12); color: #f59e0b; }
.status-dot-sm      { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.status-uptime  { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; color: var(--text-muted); }
.uptime-value   { font-weight: 800; font-size: 1.1rem; }
.uptime--good   { color: var(--accent2); }
.uptime--warn   { color: #f59e0b; }
.uptime--bad    { color: #ff4444; }

@media (max-width: 768px) { #status-services { grid-template-columns: 1fr; } }

/* ─── 90-day history ─────────────────────────────────────────────────────────*/
.uptime-history-wrap { margin-bottom: 3rem; }
.uptime-history-wrap h3 { margin-bottom: 0.5rem; }
.uptime-legend {
  display:   flex;
  gap:       1.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.legend-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--text-muted); }
.legend-dot  { width: 10px; height: 10px; border-radius: 2px; }

#uptime-bars {
  display:   flex;
  gap:       2px;
  height:    40px;
  align-items: stretch;
}
.uptime-bar {
  flex:          1;
  border-radius: 2px;
  cursor:        default;
  transition:    opacity 0.2s;
}
.uptime-bar:hover { opacity: 0.75; }
.bar--ok   { background: var(--accent2); }
.bar--warn { background: #f59e0b; }
.bar--down { background: #ff4444; }

.uptime-labels {
  display:         flex;
  justify-content: space-between;
  margin-top:      0.4rem;
  font-size:       0.75rem;
  color:           var(--text-muted);
}

/* ─── Incident log ───────────────────────────────────────────────────────────*/
.incident-log        { max-width: 780px; display: flex; flex-direction: column; gap: 1rem; }
.incident-item       { padding: 1.25rem 1.5rem; border-left: 3px solid var(--border); }
.incident-item.resolved   { border-left-color: var(--accent2); }
.incident-item.active-inc { border-left-color: #f59e0b; animation: pulse-border 2s infinite; }
@keyframes pulse-border { 0%,100% { border-left-color: #f59e0b; } 50% { border-left-color: #ff4d6d; } }
.incident-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.incident-title  { font-weight: 600; font-size: 0.98rem; }
.incident-badge  { padding: 0.2rem 0.65rem; border-radius: 50px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.badge-resolved  { background: rgba(0,229,176,0.12);  color: var(--accent2); }
.badge-active    { background: rgba(245,158,11,0.12);  color: #f59e0b; }
.badge-major     { background: rgba(255,77,109,0.12);  color: #ff4d6d; }
.badge-critical  { background: rgba(255,77,109,0.2);   color: #ff2040; }
.incident-meta   { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.4rem; }
.incident-svc    { font-size: 0.78rem; color: var(--accent); font-weight: 500; }
.incident-date   { font-size: 0.78rem; color: var(--text-muted); }
.incident-desc   { font-size: 0.88rem; margin-top: 0.65rem; line-height: 1.6; }
.incident-none   { text-align: center; color: var(--text-muted); padding: 2.5rem; font-size: 0.9rem; background: var(--surface); border-radius: var(--radius); }

/* Incident update timeline */
.incident-updates     { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.incident-update      { display: grid; grid-template-columns: 90px 1fr; gap: 0.75rem; align-items: baseline; }
.update-time          { font-size: 0.72rem; color: var(--accent); font-family: monospace; font-weight: 600; }
.update-msg           { font-size: 0.82rem; color: var(--text-muted); }

/* Filter buttons */
.inc-filter-btn {
  padding:       0.4rem 1rem;
  border-radius: 50px;
  border:        1px solid var(--border);
  background:    var(--surface2);
  color:         var(--text-muted);
  font-size:     0.8rem;
  font-weight:   600;
  cursor:        pointer;
  transition:    all 0.2s;
}
.inc-filter-btn:hover  { border-color: var(--accent); color: var(--text); }
.inc-filter-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ─── Meta / last checked ────────────────────────────────────────────────────*/
#status-last-checked { font-size: 0.82rem; color: var(--text-muted); margin-top: 1rem; text-align: right; }