:root {
  --tg-primary: #00b0c7;
  --tg-primary-dark: #008aa0;
  --tg-bg: #f5fafc;
  --tg-surface: #ffffff;
  --tg-text: #0f172a;
  --tg-muted: #475569;
  --tg-border: #dbeafe;
  --tg-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
}

[data-theme='light'], [data-bs-theme='light'], .theme-light, body.light {
  --tg-primary: #00b0c7;
  --tg-primary-dark: #008aa0;
  --tg-bg: #f5fafc;
  --tg-surface: #ffffff;
  --tg-text: #0f172a;
  --tg-muted: #475569;
  --tg-border: #dbeafe;
  --tg-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
}

/* Support both gatus theme toggle and OS preference fallback. */
[data-theme='dark'], [data-bs-theme='dark'], .theme-dark, body.dark {
  --tg-bg: #0b1220;
  --tg-surface: #111a2b;
  --tg-text: #e2e8f0;
  --tg-muted: #94a3b8;
  --tg-border: #1f3254;
  --tg-shadow: 0 12px 28px rgba(2, 6, 23, 0.45);
  --tg-primary: #23cde0;
  --tg-primary-dark: #18adc0;
}

body {
  background: var(--tg-bg) !important;
  color: var(--tg-text) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}

html, body, #app, .app, .main, main {
  background-color: var(--tg-bg) !important;
  color: var(--tg-text) !important;
}

[data-theme='dark'], [data-bs-theme='dark'], .theme-dark, body.dark {
  --bs-body-bg: var(--tg-bg);
  --bs-body-color: var(--tg-text);
  --bs-card-bg: var(--tg-surface);
  --bs-border-color: var(--tg-border);
  color-scheme: dark;
}

.header, .app-header, .navbar {
  border-bottom: 1px solid var(--tg-border) !important;
  background: var(--tg-surface) !important;
}

.navbar-brand, .brand, .logo {
  gap: 0.5rem !important;
}

.navbar-brand img, .logo img, .app-header img {
  max-height: 36px !important;
  width: auto !important;
}

/* Hide fallback text brand labels so the header is logo-first. */
.navbar-brand span, .navbar-brand strong, .brand-title, .app-header__title, .logo-text, .header-title {
  display: none !important;
}

.container, .card, .panel {
  background: var(--tg-surface) !important;
  border: 1px solid var(--tg-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--tg-shadow) !important;
}

.heading, h1, h2, h3 {
  color: var(--tg-text) !important;
}

.subtitle, .description, p {
  color: var(--tg-muted) !important;
}

.btn, button, .button, .btn-primary, a[role='button'] {
  background: var(--tg-primary) !important;
  border-color: var(--tg-primary) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.btn:hover, button:hover, .button:hover, .btn-primary:hover, a[role='button']:hover {
  background: var(--tg-primary-dark) !important;
  border-color: var(--tg-primary-dark) !important;
}

a {
  color: var(--tg-primary-dark) !important;
}

.status-success {
  color: #16a34a !important;
}

.status-failure {
  color: #dc2626 !important;
}