/* Status page — Synapse Sales
   Componentes e estilos específicos da status page, complementando style.css. */

/* Restaurar cursor nativo — o style.css principal força `cursor: none` pro
   custom cursor JS que vive no main.js do site principal; status page
   não carrega main.js, então sem este reset o cursor some. */
*, *::before, *::after { cursor: auto; }
a, button, [role="button"] { cursor: pointer; }

.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  box-shadow: 0 0 12px currentColor;
}

.status-operational {
  background: #22C55E;
  color: #22C55E;
  animation: pulse-dot 2s ease-in-out infinite;
}

.status-degraded {
  background: #F59E0B;
  color: #F59E0B;
  animation: pulse-dot 1.4s ease-in-out infinite;
}

.status-down {
  background: #EF4444;
  color: #EF4444;
  animation: pulse-dot 0.9s ease-in-out infinite;
}

.status-paused {
  background: #6B7280;
  color: #6B7280;
}

.status-pending {
  background: #6B7280;
  color: #6B7280;
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Aliases para os status dos monitors individuais (admin) — UR retorna
   códigos `up`/`seems_down` em cada monitor, enquanto o público agrega
   pra `operational`/`degraded`. */
.status-up {
  background: #22C55E;
  color: #22C55E;
  animation: pulse-dot 2s ease-in-out infinite;
}

.status-seems_down {
  background: #F59E0B;
  color: #F59E0B;
  animation: pulse-dot 1.4s ease-in-out infinite;
}

.client-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem 1.25rem;
  align-items: center;
}

.status-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
  display: inline-block;
}

.status-pill.pill-operational,
.status-pill.pill-up { color: #22C55E; background: rgba(34, 197, 94, .08); }

.status-pill.pill-degraded,
.status-pill.pill-seems_down { color: #F59E0B; background: rgba(245, 158, 11, .08); }

.status-pill.pill-down { color: #EF4444; background: rgba(239, 68, 68, .1); }
.status-pill.pill-paused { color: #6B7280; background: rgba(107, 114, 128, .1); }
.status-pill.pill-pending { color: #6B7280; background: rgba(107, 114, 128, .08); }

/* Admin-only: detail row */
.monitor-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .75rem 1rem;
  padding: .75rem 0;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.monitor-row:first-child {
  border-top: none;
}

.uptime-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}

.uptime-grid > div {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 6px;
  padding: 6px 8px;
}

.uptime-grid .label {
  display: block;
  color: rgba(234, 239, 244, .4);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 9px;
  margin-bottom: 2px;
}

.uptime-grid .value {
  color: #EAEFF4;
  font-weight: 500;
}