/* ============================================
   SKYTEE STATUS — styles spécifiques (au-dessus de skytee-design.css)
   ============================================ */

.status-shell {
  display: block;
  min-height: 100vh;
}
.status-shell .main {
  margin: 0 auto;
  padding: var(--space-7) var(--space-5);
}

.status-footer {
  font-size: 0.82rem;
  padding-bottom: var(--space-6);
}

/* ====== Donuts ====== */
.donut-card { display: flex; flex-direction: column; align-items: center; }
.donut-wrap { position: relative; width: 160px; height: 160px; margin: var(--space-3) auto 0; }
.donut { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-track { fill: none; stroke: var(--cream-deep); stroke-width: 10; }
.donut-value {
  fill: none; stroke: var(--green); stroke-width: 10; stroke-linecap: round;
  stroke-dasharray: 326.7; stroke-dashoffset: 326.7;
  transition: stroke-dashoffset .6s ease, stroke .3s;
}
.donut-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-numbers); font-size: 1.6rem; color: var(--black);
}

/* ====== Service cards ====== */
.service-card { display: flex; flex-direction: column; gap: var(--space-3); }
.service-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.service-name { font-weight: 500; }
.service-meta { font-size: 0.8rem; color: var(--gray-mid); display: flex; justify-content: space-between; gap: var(--space-3); }

.bars-24h { display: flex; gap: 2px; align-items: flex-end; height: 28px; margin-top: var(--space-2); }
.bar {
  flex: 1; min-width: 3px; height: 100%;
  background: var(--cream-deep);
  border-radius: 2px;
}
.bar.up { background: var(--success); }
.bar.incident { background: var(--warning); }
.bar.down { background: var(--danger); }
.bar.pending { background: var(--gray-mid); opacity: .4; }

.icons-7d { display: flex; gap: 6px; margin-top: var(--space-2); }
.icon-day { width: 14px; height: 14px; border-radius: 4px; background: var(--cream-deep); }
.icon-day.up { background: var(--success); }
.icon-day.incident { background: var(--warning); }
.icon-day.down { background: var(--danger); }
.icon-day.pending { background: var(--gray-mid); opacity: .4; }

@media (max-width: 760px) {
  .status-shell .main { padding: var(--space-5) var(--space-4); }
  .grid-2 { grid-template-columns: 1fr; }
}