:root {
  --bg: #14161a;
  --fg: #e6e6e6;
  --muted: #8a8f98;
  --up: #2ecc71;
  --down: #e74c3c;
  --partial: #f39c12;
  --unknown: #3a3f47;
  --card-bg: #1c1f24;
  --border: #2a2e35;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  padding: 2rem 1rem;
}

header h1 {
  margin: 0 0 0.25rem 0;
  font-size: 1.5rem;
  text-align: center;
}

.generated {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 2rem 0;
  text-align: center;
}

main {
  max-width: 900px;
  margin: 0 auto;
}

.overall-banner {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.4rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
}

.overall-light {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
}

.overall-message {
  font-size: 1.25rem;
  font-weight: 700;
}

.overall-up {
  background: rgba(46, 204, 113, 0.1);
  border-color: var(--up);
}

.overall-up .overall-light {
  background: var(--up);
  box-shadow: 0 0 14px var(--up);
}

/* "partial" means at least one monitor is genuinely, confirmedly down
   (not merely stale or pending its first check) -- red, same as a total
   outage, since a milder orange undersold how urgent a confirmed problem
   actually is. Staleness and pending-first-check get the original,
   milder orange instead -- see .overall-stale/.overall-pending below. */
.overall-partial {
  background: rgba(231, 76, 60, 0.1);
  border-color: var(--down);
}

.overall-partial .overall-light {
  background: var(--down);
  box-shadow: 0 0 14px var(--down);
}

.overall-stale {
  background: rgba(243, 156, 18, 0.1);
  border-color: var(--partial);
}

.overall-stale .overall-light {
  background: var(--partial);
  box-shadow: 0 0 14px var(--partial);
}

.overall-pending {
  background: rgba(243, 156, 18, 0.1);
  border-color: var(--partial);
}

.overall-pending .overall-light {
  background: var(--partial);
  box-shadow: 0 0 14px var(--partial);
}

/* "error" means at least one monitor's own database read failed --
   the monitoring system itself having a problem, not a confirmed
   service outage, so the same milder orange as stale/pending rather
   than the red partial/down get -- see internal/overall.Status's own
   doc for the full reasoning on why this is deliberately not red at
   the overall-banner level even though the affected monitor's own row
   is (see .status-error/.day-error above). */
.overall-error {
  background: rgba(243, 156, 18, 0.1);
  border-color: var(--partial);
}

.overall-error .overall-light {
  background: var(--partial);
  box-shadow: 0 0 14px var(--partial);
}

.overall-down {
  background: rgba(231, 76, 60, 0.1);
  border-color: var(--down);
}

.overall-down .overall-light {
  background: var(--down);
  box-shadow: 0 0 14px var(--down);
}

.monitor {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.monitor-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.monitor-header h2 {
  font-size: 1.05rem;
  margin: 0;
  flex: 1;
  font-weight: 600;
}

.uptime-pct {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.9rem;
  text-transform: uppercase;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.status-up {
  background: var(--up);
}

.status-down {
  background: var(--down);
}

.status-error {
  background: var(--down);
}

.status-unknown {
  background: var(--unknown);
}

.bar-graph {
  display: flex;
  gap: 2px;
  margin-top: 0.75rem;
  height: 28px;
}

.day {
  flex: 1;
  border-radius: 2px;
  background: var(--unknown);
}

/* On narrow viewports (phones in portrait -- landscape is wide enough
   that the normal proportional-fill layout above still looks fine),
   giving every day bar a fixed minimum width instead of letting flex:1
   squeeze all of them down to a sliver keeps individual bars actually
   visible. The bar-graph overflows and clips as a result -- anchoring
   to the right and hiding the overflow means it's specifically the
   OLDEST days (off the left edge) that get cropped away, keeping the
   most recent ones (the ones you actually care about) visible. This
   naturally adapts to whatever width is actually available rather than
   hardcoding a fixed number of days to show. */
@media (max-width: 600px) {
  .bar-graph {
    overflow: hidden;
    justify-content: flex-end;
  }

  .day {
    flex: 0 0 6px;
  }
}

.day-up {
  background: var(--up);
}

.day-down {
  background: var(--down);
}

.day-partial {
  background: var(--partial);
}

.day-unknown {
  background: var(--unknown);
}

/* Visually identical to .day-unknown (hachre wants this to stay gray) --
   a distinct class purely so the tooltip's JS can tell "genuinely no
   data recorded that day" apart from "this monitor is currently stale,
   which is why today's bucket looks this way" and label each correctly.
   See templates/dashboard.html's own setContent(). */
.day-stale {
  background: var(--unknown);
}

/* Same red as .day-down, deliberately -- a database read failure for
   this monitor needs to be unmissable, not a dimmer or distinct shade
   that could be overlooked among the other bars. The "database error"
   text and the status dot are what actually disambiguate it from a real
   outage; the color itself is intentionally just as loud. */
.day-error {
  background: var(--down);
}

.day-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.7rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--fg);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.day-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.day-tooltip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.day-tooltip-dot-up {
  background: var(--up);
}

.day-tooltip-dot-down {
  background: var(--down);
}

.day-tooltip-dot-partial {
  background: var(--partial);
}

.day-tooltip-dot-unknown {
  background: var(--unknown);
}

.day-tooltip-dot-stale {
  background: var(--unknown);
}

.day-tooltip-dot-error {
  background: var(--down);
}

.detail {
  margin: 0.6rem 0 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.empty {
  text-align: center;
  color: var(--muted);
}