/* Synthkode chrome overlay for self-hosted Reactive Resume (login, dashboard, builder). */
:root {
  color-scheme: dark;
}

html.dark,
html.dark body {
  background-color: #050505 !important;
}

html.dark body {
  color: #f4f4f5;
}

/* App shell near-black instead of warm gray-green. */
html.dark [class*="bg-background"],
html.dark [data-slot="sidebar"],
html.dark header {
  background-color: #050505 !important;
}

html.dark [class*="border-border"] {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Primary actions: restrained zinc instead of mint green. */
html.dark button[class*="bg-primary"],
html.dark a[class*="bg-primary"] {
  background-color: #fafafa !important;
  color: #050505 !important;
}

html.dark button[class*="text-primary"] {
  color: #e4e4e7 !important;
}

/* Sidebar / header wordmark: hide Rx artwork, show Synthkode text. */
a[href="/"] img {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
}

a[href="/"] {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  min-height: 2rem;
  font-size: 0 !important;
  line-height: 1 !important;
}

a[href="/"]::after {
  content: "Synthkode";
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fafafa;
  text-transform: none;
}

/* Auth pages: centered logo block */
form ~ div a[href="/"]::after,
[class*="auth"] a[href="/"]::after {
  font-size: 1.125rem;
}

.initial-loader__logo-light,
.initial-loader__logo-dark {
  opacity: 0 !important;
}

.initial-loader::after {
  content: "Synthkode";
  display: block;
  margin-top: 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #fafafa;
}