/* Uvera brand tokens mapped to Gatus design tokens. */
html:root {
  --background: 252 38% 97%;
  --foreground: 258 23% 18%;
  --card: 0 0% 100%;
  --card-foreground: 258 23% 18%;
  --popover: 0 0% 100%;
  --popover-foreground: 258 23% 18%;
  --primary: 249 100% 67%;
  --primary-foreground: 0 0% 100%;
  --secondary: 249 33% 95%;
  --secondary-foreground: 258 23% 18%;
  --muted: 249 33% 95%;
  --muted-foreground: 258 9% 40%;
  --accent: 249 100% 96%;
  --accent-foreground: 258 23% 18%;
  --destructive: 4 71% 49%;
  --destructive-foreground: 0 0% 100%;
  --border: 258 18% 89%;
  --input: 258 18% 89%;
  --ring: 249 100% 67%;
  --radius: 0.75rem;
}

html.dark {
  --background: 258 25% 14%;
  --foreground: 252 38% 97%;
  --card: 258 23% 18%;
  --card-foreground: 252 38% 97%;
  --popover: 258 23% 21%;
  --popover-foreground: 252 38% 97%;
  --primary: 249 100% 75%;
  --primary-foreground: 258 25% 14%;
  --secondary: 258 20% 25%;
  --secondary-foreground: 252 38% 97%;
  --muted: 258 20% 25%;
  --muted-foreground: 258 16% 75%;
  --accent: 258 23% 30%;
  --accent-foreground: 252 38% 97%;
  --destructive: 4 71% 56%;
  --destructive-foreground: 0 0% 100%;
  --border: 258 18% 32%;
  --input: 258 18% 32%;
  --ring: 249 100% 75%;
}

#global {
  min-height: 100vh;
  background: hsl(var(--background));
}

#global header {
  background: rgba(42, 36, 57, 0.97) !important;
  color: #ffffff;
  border-bottom-color: rgba(108, 89, 255, 0.55) !important;
  box-shadow: 0 8px 30px rgba(42, 36, 57, 0.14);
}

#global header img {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

#global header h1 {
  color: #ffffff;
  letter-spacing: -0.02em;
}

#global main .container > .mb-6 > .flex h1 {
  color: hsl(var(--foreground));
  letter-spacing: -0.035em;
}

#global .endpoint-group {
  background: hsl(var(--card));
  border-color: hsl(var(--border)) !important;
  border-radius: 0.875rem !important;
  box-shadow: 0 10px 30px rgba(42, 36, 57, 0.06);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

#global .endpoint-group:hover {
  border-color: rgba(108, 89, 255, 0.45) !important;
  box-shadow: 0 14px 38px rgba(42, 36, 57, 0.1);
  transform: translateY(-1px);
}

#global .endpoint-group-header {
  background: hsl(var(--card)) !important;
  border-bottom-color: hsl(var(--border)) !important;
}

#global input,
#global button[aria-haspopup="true"] {
  border-color: hsl(var(--border)) !important;
  background: hsl(var(--card)) !important;
}

#global input:focus,
#global button:focus-visible {
  border-color: #6c59ff !important;
  box-shadow: 0 0 0 3px rgba(108, 89, 255, 0.2);
}

#global .text-green-600,
#global .text-emerald-600,
#global .text-emerald-800 {
  color: #22a06b !important;
}

#global .text-yellow-500,
#global .text-yellow-600 {
  color: #d99a00 !important;
}

#global .text-orange-500,
#global .text-orange-600 {
  color: #f07818 !important;
}

#global .text-red-500,
#global .text-red-600 {
  color: #d92d20 !important;
}

#global a:not(header a) {
  color: #6c59ff;
}

#global a:not(header a):hover {
  color: #5947e6;
}

#global footer {
  margin-top: 3rem;
  background: #2a2439;
  color: #ffffff;
  border-top: 1px solid rgba(108, 89, 255, 0.45) !important;
}

#global footer .text-muted-foreground {
  color: rgba(255, 255, 255, 0.72) !important;
}

#global footer a {
  color: #9b8fff !important;
}

#settings > div {
  border-color: hsl(var(--border)) !important;
  box-shadow: 0 8px 24px rgba(42, 36, 57, 0.14);
}

@media (max-width: 640px) {
  #global main .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #global main .text-4xl {
    font-size: 2rem;
    line-height: 2.35rem;
  }
}

#global > .relative {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#global main {
  flex: 1 0 auto;
}

#global footer {
  flex-shrink: 0;
}

/* V2 brand polish. */
#global header {
  background: linear-gradient(120deg, #2a2439 0%, #312946 62%, #3b3155 100%) !important;
}

#global header .w-12.h-12 {
  width: 8.75rem !important;
  height: 2.5rem !important;
}

#global header img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  filter: none !important;
  opacity: 1 !important;
}

#global header h1 {
  padding-left: 0.9rem;
  border-left: 1px solid rgba(155, 143, 255, 0.45);
  font-size: 1.05rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.01em;
}

#global .endpoint-group:has(.text-green-600) {
  border-left: 4px solid #22a06b !important;
}

#global .endpoint-group:has(.text-yellow-500),
#global .endpoint-group:has(.text-yellow-600) {
  border-left: 4px solid #d99a00 !important;
}

#global .endpoint-group:has(.text-orange-500),
#global .endpoint-group:has(.text-orange-600) {
  border-left: 4px solid #f07818 !important;
}

#global .endpoint-group:has(.text-red-500),
#global .endpoint-group:has(.text-red-600) {
  border-left: 4px solid #d92d20 !important;
}

#global .endpoint-group-header > .flex:last-child {
  width: 2rem;
  height: 2rem;
  justify-content: center;
  border-radius: 9999px;
}

#global .endpoint-group:has(.text-green-600) .endpoint-group-header > .flex:last-child {
  background: rgba(34, 160, 107, 0.12);
}

#global .endpoint-group:has(.text-yellow-500) .endpoint-group-header > .flex:last-child,
#global .endpoint-group:has(.text-yellow-600) .endpoint-group-header > .flex:last-child {
  background: rgba(217, 154, 0, 0.14);
}

#global .endpoint-group:has(.text-orange-500) .endpoint-group-header > .flex:last-child,
#global .endpoint-group:has(.text-orange-600) .endpoint-group-header > .flex:last-child {
  background: rgba(240, 120, 24, 0.14);
}

#global .endpoint-group:has(.text-red-500) .endpoint-group-header > .flex:last-child,
#global .endpoint-group:has(.text-red-600) .endpoint-group-header > .flex:last-child {
  background: rgba(217, 45, 32, 0.13);
}

#global main .container > .mb-6 > .flex h1::after {
  content: "";
  display: block;
  width: 3rem;
  height: 0.22rem;
  margin-top: 0.75rem;
  border-radius: 9999px;
  background: linear-gradient(90deg, #6c59ff, #9b8fff);
}

#global footer .text-sm {
  font-size: 0 !important;
}

#global footer .text-sm::before {
  content: "Uvera Systems Status · Live service health";
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.72);
}

#global #social {
  display: none !important;
}

@media (max-width: 640px) {
  #global header .w-12.h-12 {
    width: 7rem !important;
    height: 2rem !important;
  }

  #global header h1 {
    font-size: 0.9rem;
    padding-left: 0.65rem;
  }
}