/* Gatus in the design of ucs.h-da.de: colors, type and corners of the website.
   Gatus loads this file before its own styles, hence html:root and !important. */
html:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 13%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 13%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 13%;
  --primary: 212 80% 42%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 97%;
  --secondary-foreground: 0 0% 20%;
  --muted: 0 0% 97%;
  --muted-foreground: 0 0% 32%;
  --accent: 0 0% 97%;
  --accent-foreground: 212 80% 42%;
  --border: 0 0% 84%;
  --input: 0 0% 78%;
  --ring: 212 80% 42%;
  --radius: 3px;
  --ucs-heading: #1f1f1f;
  --ucs-menu: #2c3e50;
  --ucs-up: #2e7d32;
  --ucs-down: #c62828;
  --ucs-pending: #f9a825;
  --ucs-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.11);
}

html:root.dark {
  --background: 231 15% 16%;
  --foreground: 60 30% 96%;
  --card: 231 15% 18%;
  --card-foreground: 60 30% 96%;
  --popover: 231 15% 18%;
  --popover-foreground: 60 30% 96%;
  --primary: 207 89% 86%;
  --primary-foreground: 231 15% 16%;
  --secondary: 231 15% 22%;
  --secondary-foreground: 60 30% 96%;
  --muted: 231 15% 22%;
  --muted-foreground: 231 10% 70%;
  --accent: 231 15% 22%;
  --accent-foreground: 207 89% 86%;
  --border: 232 14% 31%;
  --input: 232 14% 31%;
  --ring: 207 89% 86%;
  --ucs-heading: #f8f8f2;
  --ucs-menu: rgba(255, 255, 255, 0.8);
  --ucs-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  background-color: hsl(var(--background)) !important;
}
.tracking-tight { letter-spacing: normal !important; }

/* Readability: small print a little larger, line height as on the website. */
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
.text-xs { font-size: 0.8125rem !important; line-height: 1.25rem !important; }
.text-sm { font-size: 0.9375rem !important; }
.rounded-full.px-2\.5 { font-size: 0.8125rem !important; font-weight: 600 !important; padding: 0.15rem 0.5rem !important; }

/* Navigation bar as on the website: plain, slight shadow, no frosted glass. */
header {
  background-color: hsl(var(--background)) !important;
  border-bottom: 0 !important;
  box-shadow: var(--ucs-shadow);
  backdrop-filter: none !important;
}
header .w-12.h-12 { width: auto; height: 2.6rem; }
header img { width: auto !important; height: 2.6rem !important; }
:root.dark header img { filter: invert(1); }
header .text-2xl.font-bold { font-size: 1.15rem; font-weight: 400; color: hsl(var(--muted-foreground)); }
header .text-sm.text-muted-foreground { display: none; }
header a.px-3 {
  color: var(--ucs-menu);
  font-weight: 400;
  font-size: 0.95rem;
  border-radius: 0;
  background: none !important;
}
header a.px-3:hover { color: hsl(var(--primary)) !important; }

/* Headings thin, as on the website. */
.text-4xl.font-bold { font-weight: 400; color: var(--ucs-heading); }
.text-xl.font-semibold { font-weight: 400; color: var(--ucs-heading); }

/* Corners: barely rounded, no shadows on cards. */
.rounded, .rounded-sm, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl { border-radius: var(--radius) !important; }
.rounded-full.px-2\.5 { border-radius: var(--radius) !important; }
.shadow-sm, .shadow, .shadow-md, .shadow-lg { box-shadow: none !important; }
/* Full names on the tiles, not cut off. */
h3.truncate, h3 .truncate { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
h3.font-semibold { font-weight: 500 !important; }
/* The group is the section already, not again on every tile. */
h3.font-semibold + .text-muted-foreground { display: none !important; }
/* History bars nearly square. */
.h-6.rounded-sm { border-radius: 1px !important; }
.endpoint-group-header:hover { background-color: hsl(var(--muted)) !important; }

/* Status colors of the previous status page. */
.bg-green-500 { background-color: var(--ucs-up) !important; }
.bg-red-500 { background-color: var(--ucs-down) !important; }
.bg-yellow-500, .bg-orange-500 { background-color: var(--ucs-pending) !important; }
.text-green-500, .text-green-600 { color: var(--ucs-up) !important; }
.text-red-500, .text-red-600 { color: var(--ucs-down) !important; }
.border-l-blue-500 { border-left-color: hsl(var(--primary)) !important; }
.border-blue-500 { border-color: hsl(var(--primary)) !important; }
.text-blue-500, .text-blue-600 { color: hsl(var(--primary)) !important; }
.bg-blue-500 { background-color: hsl(var(--primary)) !important; }

/* No "Powered by" line. */
footer { display: none !important; }

/* Address of a website on its tile, as a link (inserted by ucs-links.js). */
.ucs-link {
  display: inline-block;
  margin-top: 0.15rem;
  font-size: 0.875rem;
  color: hsl(var(--primary));
  text-decoration: none;
}
.ucs-link:hover { text-decoration: underline; }