/* Dark (default) — CRM tokens; system fonts (no gatus-brand sidecar) */
html.dark {
  --ng-bg: #111111;
  --ng-surface: #1a1a1a;
  --ng-elevated: #222222;
  --ng-border: #2e2e2e;
  --ng-text: #ffffff;
  --ng-muted: #a3a3a3;
  --ng-accent: #14efef;
  --ng-accent-fg: #111111;
  --background: 0 0% 6.7%;
  --foreground: 0 0% 100%;
  --card: 0 0% 10.2%;
  --card-foreground: 0 0% 100%;
  --muted: 0 0% 13.3%;
  --muted-foreground: 0 0% 64%;
  --border: 0 0% 18%;
  --primary: 180 86% 51%;
  --primary-foreground: 0 0% 7%;
  --secondary: 0 0% 13.3%;
  --secondary-foreground: 0 0% 100%;
  --accent: 0 0% 13.3%;
  --accent-foreground: 0 0% 100%;
  --popover: 0 0% 10.2%;
  --popover-foreground: 0 0% 100%;
  --ring: 180 86% 51%;
  color-scheme: dark;
}

/* Light — CRM light surfaces */
html:not(.dark) {
  --ng-bg: #f7f7f7;
  --ng-surface: #ffffff;
  --ng-elevated: #f0f0f0;
  --ng-border: #e5e5e5;
  --ng-text: #111111;
  --ng-muted: #6b6b6b;
  --ng-accent: #0dbdbd;
  --ng-accent-fg: #111111;
  --background: 0 0% 97%;
  --foreground: 0 0% 7%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 7%;
  --muted: 0 0% 94%;
  --muted-foreground: 0 0% 42%;
  --border: 0 0% 90%;
  --primary: 180 86% 40%;
  --primary-foreground: 0 0% 7%;
  --secondary: 0 0% 94%;
  --secondary-foreground: 0 0% 7%;
  --accent: 0 0% 94%;
  --accent-foreground: 0 0% 7%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 7%;
  --ring: 180 86% 40%;
  color-scheme: light;
}

html, body, #app, button, input, select {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}

html, body {
  height: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  background: var(--ng-bg) !important;
  color: var(--ng-text) !important;
}

#app {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--ng-bg) !important;
  color: var(--ng-text) !important;
}

#app > div {
  flex: 1 1 auto !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
}

.bg-background,
.min-h-screen {
  background-color: var(--ng-bg) !important;
}

.min-h-screen {
  min-height: 100vh !important;
}

html.dark body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(800px 360px at 10% -5%, rgba(20, 239, 239, 0.08), transparent 60%),
    radial-gradient(640px 320px at 95% 0%, rgba(255, 226, 82, 0.05), transparent 55%);
}

html:not(.dark) body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(800px 360px at 10% -5%, rgba(20, 239, 239, 0.10), transparent 60%),
    radial-gradient(640px 320px at 95% 0%, rgba(255, 226, 82, 0.08), transparent 55%);
}

#app > * {
  position: relative;
  z-index: 1;
}

header {
  border-bottom: 1px solid var(--ng-border) !important;
  background: var(--ng-bg) !important;
}

header img {
  display: none !important;
}

a[href="https://crm.netgrade.de"]:not(:has(img)) {
  background: var(--ng-accent) !important;
  color: var(--ng-accent-fg) !important;
  border: none !important;
  font-weight: 600 !important;
  padding: 0.55rem 1.1rem !important;
  border-radius: 0.75rem !important;
  text-decoration: none !important;
}

a[href="https://crm.netgrade.de"]:not(:has(img)):hover {
  filter: brightness(0.93);
}

.bg-card,
.bg-muted {
  background-color: var(--ng-surface) !important;
}

.rounded-lg.border,
.rounded-lg.border.bg-card {
  border-radius: 1rem !important;
  border-color: var(--ng-border) !important;
  background: var(--ng-surface) !important;
  box-shadow: none !important;
}

.bg-green-400,
.bg-green-500,
.bg-green-600,
.bg-emerald-400,
.bg-emerald-500 {
  background-color: var(--ng-accent) !important;
  color: var(--ng-accent-fg) !important;
}

.text-green-400,
.text-green-500,
.text-emerald-500,
.text-emerald-600 {
  color: var(--ng-accent) !important;
}

.border-green-500,
.border-emerald-500 {
  border-color: var(--ng-accent) !important;
}

input, select {
  background-color: var(--ng-elevated) !important;
  border-color: var(--ng-border) !important;
  color: var(--ng-text) !important;
  border-radius: 0.75rem !important;
}

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

/* Theme + refresh visible; keep CRM styling on the pill */
#settings {
  display: block !important;
}
#settings > div {
  background: var(--ng-surface) !important;
  border-color: var(--ng-border) !important;
}

.border-t.mt-auto {
  display: none !important;
  border: none !important;
}

.text-sm.text-muted-foreground.text-center {
  display: none !important;
}
a[href*="gatus.io"],
a[href*="github.com/TwiN/gatus"] {
  display: none !important;
}