/* Страница статуса сервисов /status (AD-594).
 * Карточная вёрстка в стиле SkyForge: сводный баннер + компоненты по разделам
 * с цветным индикатором (зелёный/жёлтый/красный/серый) и аптаймом. Namespace
 * .sp-* — чтобы не пересекаться с существующими .status-* (быстрый статус борта).
 * Цвета — из официальных токенов (tokens.css: --sf-green/orange/red-500). */

.sp-wrap { padding-bottom: var(--sf-space-12, 48px); }

/* ── Сводный баннер ─────────────────────────────────────────────────────── */
.sp-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-radius: var(--sf-radius-md, 16px);
  border: 1px solid var(--border);
  background: var(--surface);
  margin: 24px 0;
}
.sp-banner__dot {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .06);
}
.sp-banner__text { display: flex; flex-direction: column; gap: 3px; }
.sp-banner__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: .5px;
}
.sp-banner__updated { color: var(--muted); font-size: 13px; }

.sp-banner--operational { border-color: rgba(22, 156, 98, .5); }
.sp-banner--operational .sp-banner__dot { background: var(--sf-green-500, #169c62); }
.sp-banner--degraded { border-color: rgba(255, 138, 0, .5); }
.sp-banner--degraded .sp-banner__dot { background: var(--sf-orange-500, #ff8a00); }
.sp-banner--major { border-color: rgba(228, 67, 67, .55); }
.sp-banner--major .sp-banner__dot { background: var(--sf-red-500, #e44343); }

/* ── Разделы и карточки компонентов ─────────────────────────────────────── */
.sp-group { margin: 28px 0; }
.sp-group__title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
}
.sp-grid { display: grid; gap: 12px; }

.sp-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--sf-radius-sm, 10px);
  background: var(--surface);
}
.sp-card__dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.sp-card__name { flex: 1 1 auto; font-weight: 700; }
.sp-card__uptime {
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sp-card__status {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
}

/* Состояния компонента: цвет точки + подписи статуса. */
.sp--operational .sp-card__dot { background: var(--sf-green-500, #169c62); }
.sp--operational .sp-card__status { color: var(--sf-green-500, #169c62); }
.sp--degraded .sp-card__dot { background: var(--sf-orange-500, #ff8a00); }
.sp--degraded .sp-card__status { color: var(--sf-orange-500, #ff8a00); }
.sp--down .sp-card__dot { background: var(--sf-red-500, #e44343); }
.sp--down .sp-card__status { color: var(--sf-red-500, #e44343); }
.sp--unknown .sp-card__dot { background: var(--sf-gray-700, #66768b); }
.sp--unknown .sp-card__status { color: var(--sf-gray-700, #66768b); }

/* ── Легенда ────────────────────────────────────────────────────────────── */
.sp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
}
.sp-legend__item { display: inline-flex; align-items: center; gap: 8px; }
.sp-legend__dot { width: 10px; height: 10px; border-radius: 50%; }
.sp-legend__dot.sp--operational { background: var(--sf-green-500, #169c62); }
.sp-legend__dot.sp--degraded { background: var(--sf-orange-500, #ff8a00); }
.sp-legend__dot.sp--down { background: var(--sf-red-500, #e44343); }
.sp-legend__dot.sp--unknown { background: var(--sf-gray-700, #66768b); }

@media (max-width: 620px) {
  .sp-banner { flex-wrap: wrap; }
  .sp-card { flex-wrap: wrap; }
  .sp-card__uptime { order: 3; width: 100%; padding-left: 26px; }
}