@font-face { font-family: "Anton"; src: url("/collr/anton.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/collr/archivo.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/collr/jetbrains-mono.ttf") format("truetype"); font-display: swap; }
:root, html, html.dark, .dark {
  --background: 0 0% 4% !important; --foreground: 36 8% 90% !important;
  --card: 0 0% 7% !important; --card-foreground: 36 8% 90% !important;
  --popover: 0 0% 7% !important; --popover-foreground: 36 8% 90% !important;
  --primary: 358 66% 45% !important; --primary-foreground: 0 0% 100% !important;
  --secondary: 0 0% 9% !important; --secondary-foreground: 36 8% 90% !important;
  --muted: 0 0% 9% !important; --muted-foreground: 219 6% 57% !important;
  --accent: 0 0% 9% !important; --accent-foreground: 36 8% 90% !important;
  --destructive: 357 100% 64% !important; --destructive-foreground: 0 0% 100% !important;
  --border: 0 0% 18% !important; --input: 0 0% 18% !important; --ring: 358 100% 68% !important;
  --radius: 0rem !important;
}
body, #global { background: #0a0a0a !important; font-family: "Archivo", ui-sans-serif, system-ui, sans-serif; }
/* The hazard stripe Collr's pages and emails open with. */
#global::before { content: ""; display: block; height: 8px; background: repeating-linear-gradient(45deg, #c1272d 0 12px, #0a0a0a 12px 24px); }
[class*="rounded"] { border-radius: 0 !important; }
header { background: #0a0a0a !important; backdrop-filter: none !important; }
h1 { font-family: "Anton", "Archivo Narrow", system-ui, sans-serif !important; text-transform: uppercase; letter-spacing: 0.02em; font-weight: 400 !important; }
h3, .endpoint h3 { font-family: "Archivo", system-ui, sans-serif; }
label, .text-xs, [title="Average response time"], input::placeholder { font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.04em; }
.endpoint { box-shadow: none !important; transform: none !important; }
.endpoint:hover { border-color: #c1272d !important; }
/* Status chips and history: Collr green up, Collr red down, square. */
.bg-green-500, .bg-green-400 { background-color: #4cd964 !important; }
.bg-red-500, .bg-red-400 { background-color: #c1272d !important; }
.rounded-full.border.bg-green-500 { background-color: rgba(76, 217, 100, 0.15) !important; color: #4cd964 !important; }
.rounded-full.border.bg-red-500 { background-color: rgba(255, 71, 87, 0.15) !important; color: #ff5c62 !important; }
footer a { color: #8a8f98 !important; }
a[href*="github.com"] { display: none !important; }
/* "All systems operational": Gatus has no summary, so the page makes one.
   :has() looks for any status chip that is not the healthy green one and
   turns the banner red. It sits between the heading and the filters. */
.dashboard-container .container > .mb-6 { display: flex; flex-direction: column; }
.dashboard-container .container > .mb-6 > :last-child { order: 2; }
.dashboard-container .container > .mb-6::after {
  order: 1; content: "\2714\00a0 All systems operational";
  display: block; margin: 0 0 24px; padding: 22px 24px;
  background: #111111; border: 1px solid #2f2f2f; border-left: 4px solid #4cd964;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700;
  font-size: 20px; letter-spacing: 0.1em; text-transform: uppercase; color: #4cd964;
}
.dashboard-container:has(.endpoint .rounded-full.border:not(.bg-green-500)) .container > .mb-6::after {
  content: "\26A0\00a0 Something is down"; color: #ff5c62; border-left-color: #c1272d;
}
.rounded-full.border { font-family: "JetBrains Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.1em; }
a { color: #ff5c62; }
/* Empty history slots, and the light-mode greys Gatus uses for them. */
.bg-gray-200, .bg-gray-300, .dark\:bg-gray-700 { background-color: #2f2f2f !important; }