/* Status-Seite: Kacheln + Gesamtbanner. Bewusst schlicht und im
 * Material-Theme-Duktus (nutzt dessen CSS-Variablen fuer Dark-Mode). */
.status-overall {
  padding: 0.9rem 1.2rem;
  border-radius: 0.3rem;
  font-weight: 700;
  margin: 1rem 0 1.5rem;
}
.status-overall.status-up { background: #e6f6ec; color: #14683c; }
.status-overall.status-degraded { background: #fdecea; color: #96281e; }
.status-overall.status-unknown { background: var(--md-code-bg-color, #f5f5f5); color: var(--md-default-fg-color--light, #666); }

.status-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.status-tile {
  padding: 0.9rem 1rem;
  border: 1px solid var(--md-default-fg-color--lightest, #e0e0e0);
  border-radius: 0.3rem;
}
.status-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
/* Balken-Leiste: 96 Striche, flex fuellt die Kachelbreite */
.status-bars { display: flex; gap: 2px; height: 28px; align-items: stretch; }
.status-bar { flex: 1; min-width: 2px; border-radius: 1px; background: #e0e0e0; }
.status-bar-up { background: #1f9d55; }
.status-bar-down { background: #d3392b; }
.status-bar-empty { background: var(--md-default-fg-color--lightest, #e3e3e3); }
.status-foot { margin-top: 0.45rem; font-size: 0.72rem; color: var(--md-default-fg-color--light, #777); }
.status-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.status-tile.status-up .status-dot { background: #1f9d55; }
.status-tile.status-down .status-dot { background: #d3392b; }
.status-tile.status-unknown .status-dot { background: #9e9e9e; }
.status-name { font-weight: 600; flex: 1; }
.status-state { font-size: 0.8rem; color: var(--md-default-fg-color--light, #666); }
.status-tile.status-down .status-state { color: #96281e; font-weight: 700; }
.status-updated { font-size: 0.75rem; color: var(--md-default-fg-color--light, #888); }