@font-face {
  font-family: Helvetica;
  src: url(https://doccape.de/fonts/Helvetica.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Futura Condensed";
  src: url(https://doccape.de/fonts/Futura-Condensed-Medium.ttf) format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Light theme (html without .dark — Gatus theme toggle) */
:root,
:root:not(.dark) {
  --dc-brand: #1d395f;
  --dc-bg: #f9fafb;
  --dc-surface: #ffffff;
  --dc-surface-muted: #f1f5f9;
  --dc-text: #1d395f;
  --dc-text-muted: #1d395f;
  --dc-border: #e2e8f0;
  --dc-shadow: rgba(29, 57, 95, 0.08);
  --dc-healthy: #01b574;
  --dc-unhealthy: #ee5d50;
  --dc-header-bg: #111827;
  --dc-header-text: #ffffff;
  --background: 210 20% 98% !important;
  --foreground: 214 53% 24% !important;
  --card: 0 0% 100% !important;
  --card-foreground: 214 53% 24% !important;
  --popover: 0 0% 100% !important;
  --popover-foreground: 214 53% 24% !important;
  --primary: 214 53% 24% !important;
  --primary-foreground: 210 40% 98% !important;
  --secondary: 210 40% 96% !important;
  --secondary-foreground: 214 53% 24% !important;
  --muted: 210 40% 96% !important;
  --muted-foreground: 215 16% 47% !important;
  --accent: 210 40% 96% !important;
  --accent-foreground: 214 53% 24% !important;
  --border: 214 32% 91% !important;
  --input: 214 32% 91% !important;
  --ring: 214 53% 24% !important;
}

/* Dark theme (html.dark — Gatus theme toggle) */
:root.dark {
  --dc-brand: #86abe3;
  --dc-bg: #1f2937;
  --dc-surface: #374151;
  --dc-surface-muted: #111827;
  --dc-text: #e2e8f0;
  --dc-text-muted: #94a3b8;
  --dc-border: #374151;
  --dc-shadow: rgba(0, 0, 0, 0.25);
  --dc-healthy: #01b574;
  --dc-unhealthy: #ee5d50;
  --dc-header-bg: #111827;
  --dc-header-text: #ffffff;
  --background: 215 28% 17% !important;
  --foreground: 214 32% 91% !important;
  --card: 221 39% 11% !important;
  --card-foreground: 214 32% 91% !important;
  --popover: 221 39% 11% !important;
  --popover-foreground: 214 32% 91% !important;
  --primary: 214 32% 91% !important;
  --primary-foreground: 221 39% 11% !important;
  --secondary: 217 19% 27% !important;
  --secondary-foreground: 214 32% 91% !important;
  --muted: 217 19% 27% !important;
  --muted-foreground: 215 20% 65% !important;
  --accent: 217 19% 27% !important;
  --accent-foreground: 214 32% 91% !important;
  --border: 217 19% 27% !important;
  --input: 217 19% 27% !important;
  --ring: 215 20% 65% !important;
}

html,
body,
#global,
#global.bg-background,
.dashboard-container,
.dashboard-container.bg-background {
  background-color: var(--dc-bg) !important;
  color: var(--dc-text) !important;
}

.bg-background {
  background-color: hsl(var(--background)) !important;
}

.bg-card {
  background-color: hsl(var(--card)) !important;
}

.text-foreground {
  color: hsl(var(--foreground)) !important;
}

.text-muted-foreground {
  color: hsl(var(--muted-foreground)) !important;
}

.border,
.border-b,
.border-input {
  border-color: hsl(var(--border)) !important;
}

#global {
  font-family: Helvetica, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

#global h1,
#global h2,
#global h3,
#global h4,
#global h5,
#global h6,
.dashboard-container h1,
.dashboard-container h2 {
  font-family: "Futura Condensed", Helvetica, system-ui, sans-serif;
  font-weight: 500;
  color: var(--dc-text) !important;
  letter-spacing: 0.01em;
}

header,
nav {
  background-color: var(--dc-header-bg) !important;
  border-bottom: 1px solid var(--dc-border) !important;
}
#global header h1 {
  color: #ffffff !important;
}

.dashboard-container p,
.dashboard-container span {
  color: var(--dc-text-muted);
}

/* Search/filter bar: match endpoint card header tone per theme */
.dashboard-container .rounded-lg.border.bg-card {
  background-color: var(--dc-surface-muted) !important;
}

:root:not(.dark) .dashboard-container .rounded-lg.border.bg-card {
  background-color: var(--dc-surface) !important;
}

.endpoint,
.endpoint-group,
.announcement-container {
  background-color: var(--dc-surface) !important;
  border: 1px solid var(--dc-border) !important;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px var(--dc-shadow);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.endpoint:hover,
.endpoint-group:hover {
  border-color: color-mix(in srgb, var(--dc-brand) 35%, var(--dc-border)) !important;
  box-shadow: 0 4px 12px var(--dc-shadow);
}

.endpoint-header,
.endpoint-group-header,
.announcement-header {
  background-color: var(--dc-surface-muted) !important;
  border-bottom: 1px solid var(--dc-border) !important;
  color: var(--dc-text) !important;
  border-radius: 0.75rem 0.75rem 0 0;
}

.endpoint-content,
.endpoint-group-content,
.announcement-content {
  background-color: var(--dc-surface) !important;
  color: var(--dc-text) !important;
}

input[type="search"],
input[type="text"],
select {
  background-color: var(--dc-surface) !important;
  border: 1px solid var(--dc-border) !important;
  border-radius: 0.5rem !important;
  color: var(--dc-text) !important;
}

input[type="search"]:focus,
input[type="text"]:focus,
select:focus {
  border-color: var(--dc-brand) !important;
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dc-brand) 20%, transparent);
}

.badge,
[class*="badge"] {
  border-radius: 9999px;
  font-weight: 500;
}

.badge-success,
[class*="success"] {
  background-color: color-mix(in srgb, var(--dc-healthy) 18%, transparent) !important;
  color: var(--dc-healthy) !important;
  border: 1px solid color-mix(in srgb, var(--dc-healthy) 35%, transparent);
}

.badge-danger,
[class*="danger"],
[class*="failed"] {
  background-color: color-mix(in srgb, var(--dc-unhealthy) 18%, transparent) !important;
  color: var(--dc-unhealthy) !important;
  border: 1px solid color-mix(in srgb, var(--dc-unhealthy) 35%, transparent);
}

a {
  color: var(--dc-brand);
}

a:hover {
  color: color-mix(in srgb, var(--dc-brand) 80%, #ffffff);
}

:root:not(.dark) a:hover {
  color: color-mix(in srgb, var(--dc-brand) 80%, #000000);
}