@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&family=Anybody:wght@600;700;800&display=swap');

/* Light mode (default). No !important here: :root is only ever
   overridden by :root.dark below, which is more specific. */
html:root {
  --uf-orange: #FA4616;
  --uf-blue: #0021A5;
  --uf-dark-blue: #002657;
  --uf-gator: #22884C;
  --uf-bottlebrush: #D32737;
  --uf-alachua: #F2A900;
  --uf-grey-11: #343741;
  --uf-grey-3: #C7C9C8;

  --background: 0 0% 100%;
  --foreground: 227 11% 21%;      /* Cool Grey 11 */
  --card: 0 0% 100%;
  --card-foreground: 227 11% 21%;
  --popover: 0 0% 100%;
  --popover-foreground: 227 11% 21%;
  --primary: 228 100% 32%;        /* Core Blue */
  --primary-foreground: 0 0% 100%;
  --secondary: 210 9% 92%;
  --secondary-foreground: 213 100% 17%;
  --muted: 210 9% 95%;
  --muted-foreground: 227 11% 40%;
  --accent: 14 96% 54%;           /* Core Orange */
  --accent-foreground: 0 0% 100%;
  --destructive: 354 69% 49%;     /* Bottlebrush */
  --destructive-foreground: 0 0% 100%;
  --border: 195 3% 79%;           /* Cool Grey 3 */
  --input: 195 3% 79%;
  --ring: 228 100% 32%;
  --radius: 0.375rem;
}

/* Dark mode: UF Dark Blue ground per the brand's dark-mode guidance.
   Core Orange becomes the accent since Core Blue lacks contrast on
   a dark field; link colour lightens for AA compliance. */
html:root.dark {
  --background: 213 100% 9%;      /* Dark Blue #002657 deepened */
  --foreground: 210 20% 96%;
  --card: 213 90% 12%;
  --card-foreground: 210 20% 96%;
  --popover: 213 90% 12%;
  --popover-foreground: 210 20% 96%;
  --primary: 14 96% 54%;          /* Core Orange leads in dark */
  --primary-foreground: 0 0% 100%;
  --secondary: 213 60% 18%;
  --secondary-foreground: 210 20% 96%;
  --muted: 213 60% 16%;
  --muted-foreground: 210 16% 72%;
  --accent: 14 96% 54%;
  --accent-foreground: 0 0% 100%;
  --destructive: 354 69% 55%;
  --destructive-foreground: 0 0% 100%;
  --border: 213 45% 22%;
  --input: 213 45% 22%;
  --ring: 14 96% 54%;
}

body {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* Anybody is the UF display face — headings only, per brand guidance. */
h1, h2, .text-xl, .text-2xl, .text-3xl {
  font-family: 'Anybody', 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

code, pre, .font-mono {
  font-family: 'IBM Plex Mono', Consolas, Monaco, monospace;
}

/* UF orange accent bar across the top of the page. */
body::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--uf-orange) 0%, var(--uf-alachua) 100%);
}

/* Header logo sizing — source image is a 2084px square. */
img[src*="NavGAI"] {
  height: 44px;
  width: auto;
  object-fit: contain;
}

/* Status indicators mapped to UF brand equivalents.
   Gatus uses Tailwind green/red/yellow utilities for health state. */
.bg-green-400, .bg-green-500, .bg-green-700 {
  background-color: var(--uf-gator) !important;
}
.bg-red-400, .bg-red-500, .bg-red-600, .bg-red-700 {
  background-color: var(--uf-bottlebrush) !important;
}
.bg-yellow-400, .bg-yellow-500 {
  background-color: var(--uf-alachua) !important;
}
.text-green-500, .text-green-600 { color: var(--uf-gator) !important; }
.border-green-500, .border-green-600 { border-color: var(--uf-gator) !important; }
.border-red-500, .border-red-600 { border-color: var(--uf-bottlebrush) !important; }
.border-yellow-500 { border-color: var(--uf-alachua) !important; }

/* Gatus sorts groups alphabetically (Home.vue combinedGroups) with no
   config hook, which puts "Models" above "Services". Reorder visually
   with flexbox instead of renaming the groups, so the group name stays
   clean on the endpoint cards and in storage keys.
   Alphabetical order is: 1=Models, 2=Services. */
.space-y-6:has(> .endpoint-group) {
  display: flex;
  flex-direction: column;
}
.endpoint-group:nth-of-type(1) { order: 2; }  /* Models  -> below */
.endpoint-group:nth-of-type(2) { order: 1; }  /* Services -> top  */
/* space-y-* margins collapse under flex; restore the gap. */
.space-y-6:has(> .endpoint-group) > .endpoint-group + .endpoint-group {
  margin-top: 0;
}
.space-y-6:has(> .endpoint-group) {
  gap: 1.5rem;
}

a { color: var(--uf-blue); }
a:hover { color: var(--uf-orange); }
/* Core Blue fails AA on the dark ground; use Alachua/orange instead. */
html:root.dark a { color: var(--uf-alachua); }
html:root.dark a:hover { color: var(--uf-orange); }

/* The header title sits inside the ui.link anchor, so it inherits the
   link colour. Keep it plain foreground in both modes. */
header h1, header a h1, a h1 {
  color: hsl(var(--foreground));
}
html:root.dark header h1,
html:root.dark header a h1,
html:root.dark a h1 {
  color: hsl(var(--foreground));
}

/* Hide the "Powered by Gatus" credit and the Gatus GitHub social icon.
   Gatus exposes no config for either. The credit's wrapper div has no
   unique class, so :has() selects the line containing the link;
   hiding only the <a> would leave a dangling "Powered by". */
footer div:has(> a[href*="gatus.io"]) {
  display: none;
}
footer #social {
  display: none;
}
/* Collapse the now-empty footer so it does not leave a bare rule. */
footer {
  border-top: none;
}