/* Raphiverse Status — mise en page seulement. Couleurs, rayons, ombres et typo viennent de /rv/raphiverse.css (jetons --rv-*). */

/* Correctif local: « .rv-body a » (spécificité 0,1,1) écrase la couleur des liens-boutons et de la marque. */
.rv-body a.rv-btn { color: var(--rv-text); }
.rv-body a.rv-btn--primary { color: var(--rv-on-accent); }
.rv-body a.rv-brand { color: var(--rv-text); }

/* Marque inline: couleurs de la marque via jetons (le SVG source utilise des hex). */
.rv-brand { font-size: var(--rv-text-lg); }
.rv-topbar { flex-wrap: wrap; }

/* Ciel étoilé discret derrière l'en-tête; fond qui s'efface vers la page. */
.sky { position: relative; isolation: isolate; }
.sky::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, var(--rv-bg) 0%, transparent 35%, var(--rv-bg) 100%); }
.sky-inner { padding-block: var(--rv-space-6) var(--rv-space-5); display: grid; gap: var(--rv-space-5); }
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--rv-space-5); }
.hero .rv-h1 { margin-bottom: var(--rv-space-2); }
.lede { margin: 0 0 var(--rv-space-3); max-width: 38rem; }
.lede:last-child { margin-bottom: 0; }

/* Bandeau de synthèse */
.summary { display: grid; grid-template-columns: minmax(0, 1.4fr) auto auto; align-items: center; gap: var(--rv-space-5);
  padding: var(--rv-space-4) var(--rv-space-5); border-radius: var(--rv-radius-lg); box-shadow: var(--rv-shadow-md); }
.summary-main { display: flex; align-items: center; gap: var(--rv-space-4); min-width: 0; }
.summary-title { display: block; font-size: var(--rv-text-lg); font-weight: 700; letter-spacing: -.01em; }
.summary-detail { margin: var(--rv-space-1) 0 0; font-size: var(--rv-text-sm); color: var(--rv-text-muted); }
.summary-counts { display: flex; flex-wrap: wrap; gap: var(--rv-space-2); justify-content: flex-end; }
.summary-meta { display: grid; gap: var(--rv-space-1); justify-items: end; font-size: var(--rv-text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary-meta { color: var(--rv-text-muted); }
.rv-orbit { flex: none; }
.rv-orbit[hidden] { display: none; }

/* Page */
.page { padding-block: var(--rv-space-2) var(--rv-space-6); }
.toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 11rem 13rem; gap: var(--rv-space-4); margin-bottom: var(--rv-space-5); }
.toolbar .rv-input { width: 100%; }

/* Tableau de bord: un seul panneau, une rangée par service */
.board { padding: 0; overflow: hidden; }
.board-list { border-top: 0; }
.board-list > .svc { display: block; padding: var(--rv-space-4) var(--rv-space-5); }
.board-list > .svc:last-child { border-bottom: 0; }
.svc-main { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.7fr) 9rem; gap: var(--rv-space-5); align-items: center; width: 100%; }
.svc-ident { min-width: 0; display: grid; gap: var(--rv-space-1); }
.svc-name { margin: 0; font-size: var(--rv-text-md); font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-host, .svc-description { margin: 0; font-size: var(--rv-text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-state { display: grid; justify-items: end; gap: var(--rv-space-2); }
.svc-open { font-size: var(--rv-text-sm); font-weight: 600; }

.svc-history { min-width: 0; display: grid; gap: var(--rv-space-2); }
.history-bars { display: flex; align-items: stretch; gap: 2px; height: 2rem; }
.history-bar { flex: 1 1 0; min-width: 2px; border-radius: var(--rv-radius-pill); background: var(--rv-ok); }
.history-bar[data-status="degraded"] { background: var(--rv-warn); }
.history-bar[data-status="outage"] { background: var(--rv-danger); }
.history-bar[data-status="unknown"] { background: var(--rv-text-faint); opacity: .45; }
.history-bar:hover { opacity: .75; }
.history-meta { display: flex; justify-content: space-between; gap: var(--rv-space-3); font-size: var(--rv-text-xs); font-variant-numeric: tabular-nums; }
.history-meta .num { min-width: 4.5rem; text-align: left; }

/* Détails des vérifications (page privée) */
.check-details { margin-top: var(--rv-space-3); }
.check-details > summary { display: inline-block; cursor: pointer; font-size: var(--rv-text-sm); font-weight: 600; color: var(--rv-link); }
.check-details > summary:focus-visible { outline: 0; box-shadow: var(--rv-focus-ring); border-radius: var(--rv-radius-sm); }
.detail-history { list-style: none; margin: var(--rv-space-3) 0 0; padding: 0; max-height: 18rem; overflow: auto; }
.detail-history > li { display: grid; grid-template-columns: 8rem minmax(0, 1fr) 9rem 5rem; gap: var(--rv-space-3); align-items: center;
  padding: var(--rv-space-2) 0; border-top: 1px solid var(--rv-border); font-size: var(--rv-text-xs); font-variant-numeric: tabular-nums; }
.detail-history .num { text-align: right; }
.history-state { font-weight: 700; color: var(--rv-danger); }
.detail-history > li[data-status="operational"] .history-state { color: var(--rv-ok); }
.detail-history > li[data-status="degraded"] .history-state { color: var(--rv-warn); }
.detail-history > li[data-status="unknown"] .history-state { color: var(--rv-text-muted); }

/* États: chargement (formes des rangées), erreur */
.sk-name { height: 1rem; width: 55%; }
.sk-line { height: .75rem; width: 80%; }
.sk-bars { height: 2rem; }
.sk-meta { height: .75rem; width: 60%; }
.sk-badge { height: 1.5rem; width: 6.5rem; border-radius: var(--rv-radius-pill); justify-self: end; }
.svc-ident > .rv-skeleton, .svc-history > .rv-skeleton { display: block; }
.notice { display: flex; align-items: center; justify-content: space-between; gap: var(--rv-space-4); padding: var(--rv-space-4) var(--rv-space-5); }
.notice-body { display: grid; gap: var(--rv-space-1); }
.rv-empty .rv-btn { margin-top: var(--rv-space-2); }

.page-footer { display: flex; justify-content: space-between; align-items: baseline; gap: var(--rv-space-5); margin-top: var(--rv-space-6);
  padding-top: var(--rv-space-4); border-top: 1px solid var(--rv-border); font-size: var(--rv-text-xs); }
.page-footer p { margin: 0; }

/* Thème clair: certains jetons de statut n'atteignent pas 4,5:1 en texte sur fond blanc; on les assombrit localement. */
[data-theme="light"] .rv-badge--ok, [data-theme="light"] .detail-history > li[data-status="operational"] .history-state { color: color-mix(in srgb, var(--rv-ok) 70%, var(--rv-ink-950)); }
[data-theme="light"] .rv-badge--warn, [data-theme="light"] .detail-history > li[data-status="degraded"] .history-state { color: color-mix(in srgb, var(--rv-warn) 65%, var(--rv-ink-950)); }

@media (max-width: 900px) {
  .summary { grid-template-columns: 1fr; gap: var(--rv-space-3); }
  .summary-counts { justify-content: flex-start; }
  .summary-meta { justify-items: start; white-space: normal; }
  .svc-main { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ident state" "history history"; gap: var(--rv-space-3) var(--rv-space-4); align-items: start; }
  .svc-ident { grid-area: ident; } .svc-state { grid-area: state; } .svc-history { grid-area: history; }
}
@media (max-width: 600px) {
  .sky-inner { padding-block: var(--rv-space-5) var(--rv-space-4); }
  .hero { flex-direction: column; align-items: stretch; }
  .hero .rv-h1 { font-size: var(--rv-text-xl); }
  .rv-topbar { padding-inline: var(--rv-space-4); }
  .toolbar { grid-template-columns: 1fr 1fr; gap: var(--rv-space-3); }
  .search-field { grid-column: 1 / -1; }
  .board-list > .svc { padding: var(--rv-space-4); }
  .history-meta { flex-wrap: wrap; gap: var(--rv-space-1) var(--rv-space-3); }
  .detail-history > li { grid-template-columns: 5.5rem minmax(0, 1fr) 4rem; }
  .detail-history > li > :nth-child(3) { display: none; }
  .notice { flex-direction: column; align-items: stretch; }
  .page-footer { flex-direction: column; gap: var(--rv-space-3); }
}

/* Le squelette du système (surface sur surface) disparaît dans un panneau: teinte plus marquée, même animation. */
.board .rv-skeleton { background-image: linear-gradient(90deg, var(--rv-surface-hover) 25%, var(--rv-border) 50%, var(--rv-surface-hover) 75%); background-size: 200% 100%; }