/* AnyAgent status page theme.
   Palette + type from packages/design-tokens (#030213 ink, #7c3aed violet,
   #6366f1 indigo, #f5f5f7 surface, Sora) and the mailer's _layout backdrop, so
   this reads as the same product as the console and our transactional email.

   Keyed on Gatus's `.dark` CLASS, not prefers-color-scheme. Gatus ships its own
   theme toggle (bottom-left) that does classList.add/remove("dark") and persists
   the choice in localStorage. A media-query theme ignores that toggle, so a
   visitor who switched to light got Gatus's light chrome with our dark cards.
   Gatus seeds the class from the OS preference itself, so keying off the class
   alone follows the system default AND the manual override. */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap');

:root {
  --aa-violet: #7c3aed;
  --aa-indigo: #6366f1;
  --aa-surface: #f5f5f7;
  --aa-card: #ffffff;
  --aa-head: rgba(255, 255, 255, 0.72);
  --aa-line: rgba(3, 2, 19, 0.09);
  --aa-text: #030213;
  --aa-muted: rgba(3, 2, 19, 0.52);
  --aa-faint: rgba(3, 2, 19, 0.34);
  --aa-up: #10b981;
  --aa-down: #ef4444;
  --aa-glow-1: rgba(124, 58, 237, 0.13);
  --aa-glow-2: rgba(99, 102, 241, 0.09);
  --aa-shadow: 0 1px 2px rgba(3, 2, 19, 0.04), 0 18px 40px -22px rgba(3, 2, 19, 0.22);
  --aa-chip: rgba(3, 2, 19, 0.045);
}

.dark {
  --aa-surface: #08070f;
  --aa-card: #100f1a;
  --aa-head: rgba(255, 255, 255, 0.04);
  --aa-line: rgba(255, 255, 255, 0.075);
  --aa-text: #f7f7fa;
  --aa-muted: rgba(255, 255, 255, 0.54);
  --aa-faint: rgba(255, 255, 255, 0.34);
  --aa-glow-1: rgba(124, 58, 237, 0.30);
  --aa-glow-2: rgba(99, 102, 241, 0.16);
  --aa-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 22px 50px -26px rgba(0, 0, 0, 0.9);
  --aa-chip: rgba(255, 255, 255, 0.055);
}

html, body, #app, #app * {
  font-family: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

html, body, .dark body, body.dark\:bg-gray-900 {
  background-color: var(--aa-surface) !important;
  background-image:
    radial-gradient(900px 420px at 50% -8%, var(--aa-glow-1) 0%, transparent 70%),
    radial-gradient(700px 340px at 88% 4%, var(--aa-glow-2) 0%, transparent 65%) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  color: var(--aa-text) !important;
  -webkit-font-smoothing: antialiased;
}

#app > div, #app > div > div {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  max-width: 58rem !important;
  margin-inline: auto !important;
}
#app { padding: 3.5rem 1.25rem 4rem !important; }

/* Masthead — Gatus lays this out as a flex row (title left, logo right) and
   restructuring it into a centred lockup only constrained the heading and wrapped
   the title. Style it in place instead. */
#app img {
  height: 38px !important;
  width: auto !important;
  max-height: 38px !important;
}
.dark #app img { filter: invert(1) brightness(1.9) !important; }
#app h1 {
  font-size: 2rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  color: var(--aa-text) !important;
  margin: 0 !important;
}

/* Groups ------------------------------------------------------------------
   Gatus renders the group header and its endpoint list as SIBLINGS, with a
   25.6px gap between them and Tailwind's slate `dark:bg-gray-800` on the
   header. That reads as a detached box hovering above an unrelated card, and
   is why earlier attempts to style ".endpoint-group > div:first-child" did
   nothing: the box IS .endpoint-group, and the title is an <h5>, not a div.
   Join the two into a single card with the group name as a quiet label row. */
.endpoint-group {
  background-color: var(--aa-card) !important;
  border: 1px solid var(--aa-line) !important;
  border-bottom: none !important;
  border-radius: 14px 14px 0 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.endpoint-group h5 {
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--aa-muted) !important;
  padding: 0.9rem 1.15rem !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--aa-line) !important;
}
/* The group's health tick must stay legible — it is the one glanceable signal. */
.endpoint-group h5 .float-right,
.endpoint-group h5 svg { opacity: 1 !important; width: 1.15rem !important; }
.endpoint-group-arrow { color: var(--aa-faint) !important; font-size: 0.7rem !important; }

.endpoint-group-content {
  background-color: var(--aa-card) !important;
  border: 1px solid var(--aa-line) !important;
  border-top: none !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: var(--aa-shadow) !important;
  overflow: hidden !important;
  margin-bottom: 1.75rem !important;
}
.endpoint {
  background-color: transparent !important;
  border-bottom: 1px solid var(--aa-line) !important;
  padding: 1.05rem 1.25rem !important;
  transition: background-color 140ms ease;
}
.endpoint:last-child { border-bottom: none !important; }
.endpoint:hover { background-color: color-mix(in srgb, var(--aa-violet) 5%, transparent) !important; }

/* Endpoint names are anchors in Gatus — they must read as text, not links. */
.endpoint a, .endpoint a:hover, .endpoint .font-bold, .endpoint .font-semibold {
  color: var(--aa-text) !important;
  font-weight: 600 !important;
  font-size: 0.97rem !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
}
.endpoint .text-gray-500, .endpoint .text-sm, .status-time-ago {
  color: var(--aa-muted) !important;
  font-weight: 400 !important;
  font-size: 0.8rem !important;
}
/* Response time reads as a measurement, not a headline. */
.endpoint .float-right {
  color: var(--aa-faint) !important;
  font-size: 0.76rem !important;
  font-variant-numeric: tabular-nums;
  background-color: var(--aa-chip);
  padding: 2px 8px !important;
  border-radius: 999px !important;
}

/* Status bars ------------------------------------------------------------- */
.status-over-time { gap: 3px !important; margin: 0.6rem 0 0.45rem 0 !important; }
.status {
  border-radius: 3px !important;
  min-width: 8px !important;
  height: 26px !important;
  border: none !important;
  transition: transform 120ms ease, filter 120ms ease;
}
.status:hover { transform: scaleY(1.12); filter: brightness(1.12); }
.status-success { background-color: var(--aa-up) !important; }
.status-failure { background-color: var(--aa-down) !important; }
/* Slots with no data yet: present but recessive, so the row keeps its rhythm
   instead of collapsing into ragged whitespace. */
.status:not(.status-success):not(.status-failure) {
  background-color: var(--aa-chip) !important;
}

/* Chrome ------------------------------------------------------------------ */
#app > div > a, footer a { color: var(--aa-violet) !important; text-decoration: none; }
#app > div > a:hover, footer a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--aa-violet) !important; outline-offset: 3px; }
/* Gatus's own footer mark — kept (it is their work) but not competing. */
#app svg, .fixed svg { opacity: 0.35 !important; }
.fixed select, .fixed button {
  background-color: var(--aa-card) !important;
  border: 1px solid var(--aa-line) !important;
  border-radius: 8px !important;
  color: var(--aa-muted) !important;
  font-size: 0.75rem !important;
}

@media (max-width: 640px) {
  #app { padding: 2.25rem 0.9rem 3rem !important; }
  #app h1 { font-size: 1.55rem !important; }
  .status { height: 22px !important; }
}