/* Keyword.com brand theme for the Gatus status page.
 *
 * Gatus v5.36 is shadcn-flavoured Tailwind, so almost everything is reachable
 * by re-declaring its HSL custom properties. Two constraints shape this file:
 *
 *  1. custom.css is linked BEFORE app.css, so equal-specificity rules lose.
 *     `:root` is raised to `html:root` to win. The health colours are the only
 *     part of the page Gatus hardcodes (green-500/red-500, no variable behind
 *     them), so those need !important.
 *  2. Everything the page RENDERS must come with no external request — it is
 *     what people load when our other origins are down. Hence a system font
 *     stack and an inlined logo rather than a webfont or a hosted image. The
 *     one exception is ui.favicon, which Gatus will not accept as a data URI
 *     (see its comment above); a tab icon is not part of the render.
 *
 * Colours are the design-system semantic tokens from
 * frontend/src/root/styles/tokens.css, converted to HSL triplets.
 */

html:root {
  --background: 0 0% 100%;
  --foreground: 210 15.2% 18%; /* content-primary #272e35 */
  --card: 0 0% 100%;
  --card-foreground: 210 15.2% 18%;
  --popover: 0 0% 100%;
  --popover-foreground: 210 15.2% 18%;
  --primary: 207.9 100% 42.5%; /* brand #0074d9 */
  --primary-foreground: 0 0% 100%;
  --secondary: 210 20% 96.5%;
  --secondary-foreground: 210 15.2% 18%;
  --muted: 210 20% 96.5%;
  --muted-foreground: 215 12.4% 38%; /* content-secondary #555f6d */
  --accent: 207.9 100% 96%;
  --accent-foreground: 207.9 100% 30%;
  --destructive: 0 58.2% 48.8%; /* negative #c53434 */
  --destructive-foreground: 0 0% 100%;
  --border: 214 20% 89%;
  --input: 214 20% 89%;
  --ring: 207.9 100% 42.5%;
  --radius: 0.5rem;

  /* Health state, kept as variables so the dark theme redefines the value
   * rather than the rule — a `html.dark .bg-green-500` override would have to
   * out-specify the base rule, and both carry !important. */
  --kw-positive: 150.3 62.1% 30%; /* positive #1d7c4d */
  --kw-positive-hover: 150.3 62.1% 22%;
  --kw-positive-dot: 150.3 55% 40%;
  --kw-negative: 0 58.2% 48.8%; /* negative #c53434 */
  --kw-negative-hover: 0 58.2% 38%;
  --kw-link: 207.9 100% 42.5%;
  --kw-link-hover: 207.9 100% 33%;
}

/* Dark mode is tinted with the logo navy (#3b425b, hue 227) rather than
 * Tailwind's default cool slate, so it reads as ours and not as stock shadcn.
 * The health colours are lifted: #1d7c4d is tuned for white and reads nearly
 * black on the dark surface. */
html.dark:root {
  --background: 227 22% 11%;
  --foreground: 210 20% 96%;
  --card: 227 20% 15%;
  --card-foreground: 210 20% 96%;
  --popover: 227 20% 15%;
  --popover-foreground: 210 20% 96%;
  --primary: 208 90% 62%;
  --primary-foreground: 227 30% 10%;
  --secondary: 227 16% 21%;
  --secondary-foreground: 210 20% 96%;
  --muted: 227 16% 21%;
  --muted-foreground: 215 15% 68%;
  --accent: 227 18% 24%;
  --accent-foreground: 208 90% 72%;
  --destructive: 0 62% 55%;
  --destructive-foreground: 0 0% 100%;
  --border: 227 15% 24%;
  --input: 227 15% 24%;
  --ring: 208 90% 62%;

  --kw-positive: 150.3 52% 38%;
  --kw-positive-hover: 150.3 52% 30%;
  --kw-positive-dot: 150.3 48% 46%;
  --kw-negative: 0 62% 55%;
  --kw-negative-hover: 0 62% 45%;
  --kw-link: 208 90% 66%;
  --kw-link-hover: 208 90% 76%;
}

html body {
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

.bg-green-500 {
  background-color: hsl(var(--kw-positive)) !important;
}
.bg-green-400 {
  background-color: hsl(var(--kw-positive-dot)) !important;
}
.hover\:bg-green-700:hover {
  background-color: hsl(var(--kw-positive-hover)) !important;
}
.bg-red-500 {
  background-color: hsl(var(--kw-negative)) !important;
}
.hover\:bg-red-700:hover {
  background-color: hsl(var(--kw-negative-hover)) !important;
}
.text-emerald-800 {
  color: hsl(var(--kw-link)) !important;
}
.hover\:text-emerald-600:hover {
  color: hsl(var(--kw-link-hover)) !important;
}

header h1 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Components are display-only. The name is a router link to /endpoints/{key},
 * a per-check detail view with no audience on a public page, and the uptime
 * bars carry a pointer cursor while doing nothing on click. pointer-events is
 * the only lever custom-css has over a JS handler; the cost is that the nine
 * names can no longer be text-selected. Filter, sort and theme are <button>s
 * without .cursor-pointer, so they keep working. Bars stay hoverable — that is
 * what surfaces the per-check tooltip. */
span.cursor-pointer {
  pointer-events: none;
  cursor: default;
}

.rounded-sm.cursor-pointer {
  cursor: default;
}

/* Gatus pins a link to its own GitHub repo bottom-right of every page
 * (components/Social.vue, a fixed-position #social div). This is our
 * customer-facing status page, so a floating octocat to an unrelated repo
 * is noise. The "Powered by Gatus" footer link stays — that is the
 * project's attribution, and removing it is not ours to do.
 *
 * Targeted by id: the anchor itself carries only a scoped data-v-* hash,
 * which is regenerated on every upstream build and would silently stop
 * matching after a version bump. */
#social {
  display: none;
}

/* Let long component names wrap instead of truncating. Gatus puts Tailwind's
 * `truncate` on both the card title <h3> and the name <span> inside it, which
 * clipped "Ranking updates – On-demand" to "Ranking updates – On-de…" at the
 * three-column card width. Both need releasing — clearing only one leaves the
 * other clipping. The compound selector matches just the nine card titles. */
span.cursor-pointer.truncate,
.font-semibold.tracking-tight.truncate {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}