/* Personalizacja strony logowania Authelii optivero (kolory z logo OPT).
   Authelia 4.39+ ma UI na Tailwindzie: kolory ida ze zmiennych motywu (:root / [data-theme=light]),
   wiec nadpisujemy zmienne, a nie klasy. Wstrzykiwany przez authelia-nginx (sub_filter). */
:root, [data-theme=light] {
  --opt-navy: #0f2a44;
  --opt-teal: #00a99d;
  --primary: var(--opt-navy);
  --primary-foreground: #ffffff;
  --ring: var(--opt-teal);
  --info: var(--opt-teal);
  --custom-loading-bar: var(--opt-teal);
  --custom-icon: var(--opt-navy);
  --foreground: #1c2b3a;
  --radius: .6rem;
}

html, body {
  min-height: 100%;
  background: linear-gradient(160deg, #f4f6f9 0%, #dfe6ee 100%) fixed !important;
}

/* Karta z formularzem */
#first-factor-stage > div,
#root [id$="-stage"] > div {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(15, 42, 68, .14);
  padding-top: 1.75rem;
  padding-bottom: 1.25rem;
  border-top: 4px solid var(--opt-teal);
}

/* Logo: szerokie zamiast domyslnej ikony 4rem */
#root img[alt="Logo"] {
  width: 260px !important;
  max-width: 80% !important;
  height: auto !important;
}

/* Naglowek "Zaloguj sie" */
#root h5 {
  color: var(--opt-navy);
  font-weight: 600;
}

/* Przycisk logowania */
#sign-in-button {
  background-color: var(--opt-navy) !important;
  color: #fff !important;
  font-weight: 600;
  letter-spacing: .04em;
  transition: background-color .15s ease-in-out;
}
#sign-in-button:hover {
  background-color: var(--opt-teal) !important;
}

/* Stopka "Powered by Authelia" */
#root a[href*="authelia.com"] { opacity: .6; }