/* ============================================================
   Bryzora Status Page v2 — Theme Stylesheet
   ============================================================ */

/* ── Design Tokens (Light) ────────────────────────────────── */
:root {
  /* Layout */
  --sp-max-width: 860px;
  --sp-gap: 16px;
  --sp-gap-sm: 8px;
  --sp-radius: 16px;
  --sp-radius-sm: 10px;
  --sp-radius-xs: 6px;

  /* Surfaces */
  --sp-bg: #f1f5f9;
  --sp-surface: #ffffff;
  --sp-surface-alt: #f8fafc;
  --sp-border: #dbe3ef;
  --sp-shadow: 0 10px 24px rgba(15,23,42,.06);

  /* Text */
  --sp-text: #0f172a;
  --sp-text-muted: #64748b;

  /* Status Colors */
  --sp-operational: #10b981;
  --sp-degraded: #f59e0b;
  --sp-down: #ef4444;
  --sp-maintenance: #2563eb;

  /* Hero backgrounds */
  --sp-hero-bg-ok: color-mix(in srgb, var(--sp-operational) 8%, var(--sp-surface));
  --sp-hero-bg-degraded: color-mix(in srgb, var(--sp-degraded) 8%, var(--sp-surface));
  --sp-hero-bg-down: color-mix(in srgb, var(--sp-down) 8%, var(--sp-surface));
  --sp-hero-border-ok: color-mix(in srgb, var(--sp-operational) 25%, var(--sp-border));
  --sp-hero-border-degraded: color-mix(in srgb, var(--sp-degraded) 25%, var(--sp-border));
  --sp-hero-border-down: color-mix(in srgb, var(--sp-down) 25%, var(--sp-border));

  /* Uptime grid */
  --sp-badge-size: 14px;
  --sp-badge-gap: 3px;
  --sp-badge-radius: 3px;

  /* Timeline */
  --sp-timeline-line: var(--sp-border);
  --sp-timeline-dot: 10px;

  /* Transitions */
  --sp-transition: 0.2s ease;
}

/* ── Design Tokens (Dark) ─────────────────────────────────── */
[data-theme-style="dark"] {
  --sp-bg: #0f172a;
  --sp-surface: #1e293b;
  --sp-surface-alt: #334155;
  --sp-border: #475569;
  --sp-shadow: 0 14px 28px rgba(0,0,0,.35);
  --sp-text: #e2e8f0;
  --sp-text-muted: #94a3b8;
  --sp-operational: #34d399;
  --sp-degraded: #fbbf24;
  --sp-down: #f87171;
  --sp-maintenance: #60a5fa;
}

/* ── Layout Container ─────────────────────────────────────── */
.sp-wrap {
  max-width: var(--sp-max-width);
  margin: 0 auto;
  padding: 0 var(--sp-gap);
}

.sp-section {
  margin-bottom: 24px;
}

/* ── SECTION 1: Hero Status Block ─────────────────────────── */
.sp-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 32px;
  border-radius: var(--sp-radius);
  border: 1px solid var(--sp-hero-border-ok);
  background: var(--sp-hero-bg-ok);
  box-shadow: var(--sp-shadow);
  transition: background var(--sp-transition), border-color var(--sp-transition);
}

.sp-hero--degraded {
  background: var(--sp-hero-bg-degraded);
  border-color: var(--sp-hero-border-degraded);
}

.sp-hero--down {
  background: var(--sp-hero-bg-down);
  border-color: var(--sp-hero-border-down);
}

.sp-hero__icon {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-hero__icon svg {
  width: 48px;
  height: 48px;
  position: relative;
  z-index: 1;
}

.sp-hero--operational .sp-hero__icon svg { color: var(--sp-operational); }
.sp-hero--degraded .sp-hero__icon svg { color: var(--sp-degraded); }
.sp-hero--down .sp-hero__icon svg { color: var(--sp-down); }

.sp-hero__body {
  flex: 1;
  min-width: 0;
}

.sp-hero__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--sp-text);
  margin: 0 0 4px;
  line-height: 1.3;
}

.sp-hero__meta {
  font-size: 13px;
  color: var(--sp-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.sp-hero__desc {
  font-size: 14px;
  color: var(--sp-text-muted);
  margin-top: 8px;
}

/* ── SECTION 2: Summary Strip ─────────────────────────────── */
.sp-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: var(--sp-gap-sm);
}

.sp-summary__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  box-shadow: var(--sp-shadow);
  transition: transform var(--sp-transition), box-shadow var(--sp-transition);
}

.sp-summary__item:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
}

.sp-summary__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.sp-summary__icon--total { background: color-mix(in srgb, var(--sp-maintenance) 12%, var(--sp-surface)); color: var(--sp-maintenance); }
.sp-summary__icon--ok    { background: color-mix(in srgb, var(--sp-operational) 12%, var(--sp-surface)); color: var(--sp-operational); }
.sp-summary__icon--warn  { background: color-mix(in srgb, var(--sp-degraded) 12%, var(--sp-surface)); color: var(--sp-degraded); }
.sp-summary__icon--down  { background: color-mix(in srgb, var(--sp-down) 12%, var(--sp-surface)); color: var(--sp-down); }
.sp-summary__icon--speed { background: color-mix(in srgb, #8b5cf6 12%, var(--sp-surface)); color: #8b5cf6; }
.sp-summary__icon--incident { background: color-mix(in srgb, var(--sp-down) 12%, var(--sp-surface)); color: var(--sp-down); }

.sp-summary__data {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.sp-summary__value {
  font-size: 18px;
  font-weight: 700;
  color: var(--sp-text);
  line-height: 1.2;
}

.sp-summary__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--sp-text-muted);
  margin-top: 2px;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ── SECTION 3: Active Incidents ──────────────────────────── */
.sp-incidents-active {
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap-sm);
}

.sp-incident-card {
  padding: 16px 20px;
  background: color-mix(in srgb, var(--sp-down) 5%, var(--sp-surface));
  border: 1px solid color-mix(in srgb, var(--sp-down) 20%, var(--sp-border));
  border-radius: var(--sp-radius-sm);
  box-shadow: var(--sp-shadow);
}

.sp-incident-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.sp-incident-card__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sp-incident-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sp-down);
  flex-shrink: 0;
  animation: sp-pulse-dot 2s infinite;
}

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

.sp-incident-card__name {
  font-weight: 600;
  font-size: 15px;
  color: var(--sp-text);
}

.sp-incident-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 20px;
  background: color-mix(in srgb, var(--sp-down) 15%, var(--sp-surface));
  color: var(--sp-down);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sp-incident-card__meta {
  font-size: 13px;
  color: var(--sp-text-muted);
  margin-top: 8px;
}

.sp-incident-card__details {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--sp-border);
  font-size: 13px;
  color: var(--sp-text-muted);
}

.sp-no-incidents {
  font-size: 14px;
  color: var(--sp-text-muted);
  padding: 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp-no-incidents::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sp-operational);
}

/* ── SECTION 4: Services / Components ─────────────────────── */
.sp-services__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.sp-services__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--sp-text);
}

.sp-services__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp-view-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-xs);
  overflow: hidden;
  padding: 0;
}

.sp-view-toggle__btn {
  border: none;
  background: transparent;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sp-text-muted);
  cursor: pointer;
  transition: background var(--sp-transition), color var(--sp-transition);
}

.sp-view-toggle__btn:hover {
  background: var(--sp-surface-alt);
}

.sp-view-toggle__btn--active {
  background: var(--sp-surface-alt);
  color: var(--sp-text);
}

.sp-services__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap-sm);
}

/* Service Card */
.sp-service {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  box-shadow: var(--sp-shadow);
  overflow: hidden;
  transition: transform var(--sp-transition), box-shadow var(--sp-transition);
}

.sp-service:hover {
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
}

.sp-service__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  gap: 12px;
  cursor: pointer;
  transition: background var(--sp-transition);
}

.sp-service__row:hover {
  background: var(--sp-surface-alt);
}

.sp-service__left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.sp-service__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sp-service__dot--ok { background: var(--sp-operational); }
.sp-service__dot--down { background: var(--sp-down); }

.sp-service__name {
  font-weight: 600;
  font-size: 14px;
  color: var(--sp-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-service__name:hover {
  color: var(--sp-text);
  text-decoration: underline;
}

.sp-service__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sp-service__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--sp-radius-xs);
  background: var(--sp-surface-alt);
  border: 1px solid var(--sp-border);
  color: var(--sp-text-muted);
}

.sp-service__badge--uptime-ok   { color: var(--sp-operational); border-color: color-mix(in srgb, var(--sp-operational) 25%, var(--sp-border)); background: color-mix(in srgb, var(--sp-operational) 8%, var(--sp-surface)); }
.sp-service__badge--uptime-warn { color: var(--sp-degraded);    border-color: color-mix(in srgb, var(--sp-degraded)   25%, var(--sp-border)); background: color-mix(in srgb, var(--sp-degraded)   8%, var(--sp-surface)); }
.sp-service__badge--uptime-bad  { color: var(--sp-down);        border-color: color-mix(in srgb, var(--sp-down)       25%, var(--sp-border)); background: color-mix(in srgb, var(--sp-down)       8%, var(--sp-surface)); }

.sp-service__chevron {
  width: 16px;
  height: 16px;
  color: var(--sp-text-muted);
  transition: transform var(--sp-transition);
  flex-shrink: 0;
}

.sp-service.is-expanded .sp-service__chevron {
  transform: rotate(180deg);
}

/* Service Detail Panel */
.sp-service__detail {
  display: none;
  padding: 0 18px 16px;
  border-top: 1px solid var(--sp-border);
}

.sp-service.is-expanded .sp-service__detail,
.sp-detailed .sp-service__detail {
  display: block;
}

/* Uptime Bar Grid (inside detail) */
.sp-uptime-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-badge-gap);
  padding-top: 14px;
}

.sp-uptime-grid__badge {
  width: var(--sp-badge-size);
  height: var(--sp-badge-size);
  min-width: var(--sp-badge-size);
  min-height: var(--sp-badge-size);
  border-radius: var(--sp-badge-radius);
  transition: opacity var(--sp-transition);
  cursor: default;
}

.sp-uptime-grid__badge:hover {
  opacity: 0.75;
}

.sp-uptime-grid__badge--ok   { background: var(--sp-operational); }
.sp-uptime-grid__badge--down { background: var(--sp-down); }

/* ── SECTION 5: Incident History Timeline ─────────────────── */
.sp-timeline {
  position: relative;
  padding-left: 28px;
}

.sp-timeline::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--sp-timeline-line);
}

.sp-timeline__date-group {
  margin-bottom: 20px;
}

.sp-timeline__date {
  font-size: 13px;
  font-weight: 700;
  color: var(--sp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  position: relative;
}

.sp-timeline__item {
  position: relative;
  margin-bottom: 14px;
  padding: 14px 16px;
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-xs);
  box-shadow: var(--sp-shadow);
}

.sp-timeline__item::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 18px;
  width: var(--sp-timeline-dot);
  height: var(--sp-timeline-dot);
  border-radius: 50%;
  border: 2px solid var(--sp-border);
  background: var(--sp-surface);
}

.sp-timeline__item--resolved::before {
  border-color: var(--sp-operational);
  background: color-mix(in srgb, var(--sp-operational) 30%, var(--sp-surface));
}

.sp-timeline__item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.sp-timeline__item-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--sp-text);
}

.sp-timeline__item-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sp-timeline__item-status--resolved {
  background: color-mix(in srgb, var(--sp-operational) 12%, var(--sp-surface));
  color: var(--sp-operational);
}

.sp-timeline__item-status--active {
  background: color-mix(in srgb, var(--sp-down) 12%, var(--sp-surface));
  color: var(--sp-down);
}

.sp-timeline__item-meta {
  font-size: 12px;
  color: var(--sp-text-muted);
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.sp-timeline__item-details {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--sp-border);
  font-size: 13px;
  color: var(--sp-text-muted);
}

.sp-timeline__empty {
  font-size: 14px;
  color: var(--sp-text-muted);
  padding: 12px 0;
}

/* ── SECTION 7: Performance Footer Info ───────────────────── */
.sp-footer-info {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 16px 0;
  font-size: 12px;
  color: var(--sp-text-muted);
}

.sp-footer-info__item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.sp-footer-info__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sp-operational);
  animation: sp-pulse-dot 3s infinite;
}

/* ── Section Header (reusable) ────────────────────────────── */
.sp-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--sp-text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp-section-title__icon {
  width: 18px;
  height: 18px;
  color: var(--sp-text-muted);
}

/* ── Skeleton Loading ─────────────────────────────────────── */
.sp-skeleton {
  background: linear-gradient(90deg, var(--sp-surface-alt) 25%, var(--sp-surface) 50%, var(--sp-surface-alt) 75%);
  background-size: 200% 100%;
  animation: sp-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--sp-radius-xs);
}

.sp-skeleton--hero {
  height: 100px;
  border-radius: var(--sp-radius);
  margin-bottom: 24px;
}

.sp-skeleton--strip {
  height: 64px;
  border-radius: var(--sp-radius-sm);
}

.sp-skeleton--card {
  height: 52px;
  border-radius: var(--sp-radius-sm);
  margin-bottom: var(--sp-gap-sm);
}

@keyframes sp-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .sp-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
  }

  .sp-hero__icon {
    width: 44px;
    height: 44px;
  }

  .sp-hero__icon svg {
    width: 38px;
    height: 38px;
  }

  .sp-hero__title {
    font-size: 18px;
  }

  .sp-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .sp-summary__item {
    padding: 10px 12px;
    gap: 8px;
  }

  .sp-summary__icon {
    width: 30px;
    height: 30px;
    font-size: 14px;
    border-radius: 8px;
  }

  .sp-summary__value {
    font-size: 15px;
  }

  .sp-summary__label {
    font-size: 10px;
    letter-spacing: 0.4px;
  }

  .sp-service__row {
    padding: 12px 14px;
  }

  .sp-service__right {
    gap: 6px;
  }

  .sp-service__badge {
    font-size: 11px;
    padding: 2px 7px;
  }

  .sp-timeline {
    padding-left: 22px;
  }

  .sp-timeline__item {
    padding: 12px;
  }

  .sp-incident-card {
    padding: 12px 14px;
  }
}

@media (max-width: 479.98px) {
  .sp-summary {
    grid-template-columns: 1fr;
  }

  .sp-service__right .sp-service__badge:not(:first-child) {
    display: none;
  }
}

/* ── Utility: Collapse Toggle ─────────────────────────────── */
.sp-collapse {
  display: none;
}

.sp-collapse.show {
  display: block;
}

.sp-collapse-toggle {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--sp-text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.sp-collapse-toggle:hover {
  color: var(--sp-text);
}