/*
 * Anmeldeseite (Authelia) im Erscheinungsbild von synetX, Variante „Klar“: helle Karte,
 * Logo oben, Navy für Knöpfe, Cyanblau im Fokus. edge bindet die Datei per sub_filter
 * hinter Authelias eigenem Stylesheet ein (nginx.conf, Server anmeldung.synetx.de) und
 * liefert sie unter /synetx/ aus.
 *
 * Authelia 4.39 baut seine Farben aus CSS-Variablen (Tailwind, shadcn). Diese Datei
 * überschreibt vor allem diese Variablen; die wenigen Selektoren darunter hängen an IDs
 * und Klassen von Authelia und sind nach einem Update von Authelia zu prüfen.
 *
 * Farben aus dem Logo: Navy #072A47, Cyanblau #0096D6.
 */

@font-face {
  font-family: "Raleway";
  src: url("/synetx/raleway.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root,
[data-theme="light"] {
  --synetx-navy: #072a47;
  --synetx-navy-hell: #0d3d63;
  --synetx-cyan: #0096d6;
  --synetx-seite: #f3f6f9;
  --synetx-text-leise: #5b6b7a;

  --background: var(--synetx-seite);
  --foreground: #10202f;
  --card: #ffffff;
  --card-foreground: #10202f;
  --popover: #ffffff;
  --popover-foreground: #10202f;
  --primary: var(--synetx-navy);
  --primary-foreground: #ffffff;
  --secondary: var(--synetx-cyan);
  --secondary-foreground: #ffffff;
  --muted: #eef2f6;
  --muted-foreground: var(--synetx-text-leise);
  --accent: #e8f4fb;
  --accent-foreground: var(--synetx-navy);
  --info: var(--synetx-cyan);
  --border: #dbe3ea;
  --input: #c9d4de;
  --ring: var(--synetx-cyan);
  --radius: 0.5rem;
  --custom-icon: var(--synetx-navy);
  --custom-loading-bar: var(--synetx-cyan);
}

html,
body {
  background: var(--synetx-seite);
}

body,
button,
input,
label {
  font-family: "Raleway", "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "lnum";
}

/* Karte um den Inhalt jeder Stufe (Anmeldung, zweiter Faktor, Abmeldung …). */
[id$="-stage"] > div > .flex-col {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 28px 20px;
  box-shadow: 0 1px 2px rgba(7, 42, 71, 0.06), 0 8px 24px rgba(7, 42, 71, 0.06);
}

/* Logo mit Schriftzug (assets/logo.png). */
img[alt="Logo"] {
  width: 132px !important;
  height: auto;
  margin: 4px auto 6px;
}

h5 {
  color: var(--synetx-navy);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Erste Stufe: statt „Anmelden“ (der Knopf sagt es schon) die Unterzeile aus dem Entwurf. */
#first-factor-stage h5 {
  font-size: 0;
}
#first-factor-stage h5::after {
  content: "Vorführ- und Testumgebungen";
  font-size: 15px;
  font-weight: 500;
  color: var(--synetx-text-leise);
}

/* Eingabefelder: weißer Grund, Fokus in Cyanblau. */
input[data-slot="floating-input"] {
  background: #ffffff;
  border-color: var(--input);
}
input[data-slot="floating-input"]:focus {
  border-color: var(--synetx-cyan);
  box-shadow: 0 0 0 3px rgba(0, 150, 214, 0.22);
}
input[data-slot="floating-input"]:focus + label {
  color: var(--synetx-cyan);
}

/* Knöpfe: ohne Großbuchstaben, Navy, beim Überfahren etwas heller. */
button[data-slot="button"] {
  text-transform: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
button[data-slot="button"][data-variant="default"] {
  height: 44px;
  border-radius: 8px;
}
button[data-slot="button"][data-variant="default"]:hover {
  background: var(--synetx-navy-hell);
}
button[data-slot="button"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 150, 214, 0.35);
}

a {
  color: var(--synetx-cyan);
}

/* Fußzeile unter der Karte: Hinweis vor „Betrieben mit Authelia“. */
[id$="-stage"] > div > .flex-col > div:last-child {
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}
[id$="-stage"] > div > .flex-col > div:last-child::before {
  content: "Nur für berechtigte Personen";
  font-size: 12px;
  color: var(--synetx-text-leise);
}