/* =====================================================================
 *  Anmeldeseite im Look des Smart-Reality-Dashboards.
 *
 *  Caddy haengt diese Datei in jede HTML-Antwort von auth.smwd.at ein
 *  (generate.py, portal_route). Authelia selbst bleibt unveraendert.
 *
 *  Farben laufen ueber Authelias eigene Theme-Variablen - das uebersteht
 *  Updates deutlich besser als ueberschriebene Tailwind-Klassen. Nur Karte,
 *  Markenblock und Feinschliff haengen an der Seitenstruktur; geht dort nach
 *  einem Update etwas verloren, bleibt die Seite benutzbar, nur schlichter.
 * ===================================================================== */

@font-face {
  font-family: "Inter";
  src: url("/_p/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/_p/jetbrains-mono.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* --- Farben: dunkel (Standard des Dashboards) --- */
:root,
[data-theme] {
  --background: #0a0e14 !important;
  --foreground: #e6edf6 !important;
  --card: #111823 !important;
  --card-foreground: #e6edf6 !important;
  --popover: #111823 !important;
  --popover-foreground: #e6edf6 !important;
  --primary: #60a5fa !important;
  --primary-foreground: #0a0e14 !important;
  --secondary: #8b5cf6 !important;
  --secondary-foreground: #ffffff !important;
  --muted: #16202d !important;
  --muted-foreground: #8fa3bc !important;
  --accent: #16202d !important;
  --accent-foreground: #e6edf6 !important;
  --destructive: #ef4444 !important;
  --destructive-foreground: #ffffff !important;
  --success: #22c55e !important;
  --warning: #f59e0b !important;
  --info: #06b6d4 !important;
  --border: rgba(148, 163, 184, 0.16) !important;
  --input: rgba(148, 163, 184, 0.24) !important;
  --ring: #60a5fa !important;
  --radius: 0.75rem !important;
  --custom-icon: #e6edf6 !important;
  --custom-loading-bar: #60a5fa !important;

  --srr-glow: rgba(59, 130, 246, 0.16);
  --srr-glow-2: rgba(139, 92, 246, 0.12);
  --srr-field: rgba(255, 255, 255, 0.03);
  --srr-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

/* --- Farben: hell, wenn das Geraet hell eingestellt ist --- */
@media (prefers-color-scheme: light) {
  :root,
  [data-theme] {
    --background: #f4f6fa !important;
    --foreground: #0f172a !important;
    --card: #ffffff !important;
    --card-foreground: #0f172a !important;
    --popover: #ffffff !important;
    --popover-foreground: #0f172a !important;
    --primary: #3b82f6 !important;
    --primary-foreground: #ffffff !important;
    --muted: #eef2f7 !important;
    --muted-foreground: #5b6b82 !important;
    --accent: #eef2f7 !important;
    --accent-foreground: #0f172a !important;
    --border: rgba(15, 23, 42, 0.1) !important;
    --input: rgba(15, 23, 42, 0.18) !important;
    --ring: #3b82f6 !important;
    --custom-icon: #0f172a !important;
    --custom-loading-bar: #3b82f6 !important;

    --srr-glow: rgba(59, 130, 246, 0.1);
    --srr-glow-2: rgba(139, 92, 246, 0.08);
    --srr-field: #ffffff;
    --srr-shadow: 0 24px 60px -28px rgba(15, 23, 42, 0.25);
    color-scheme: light;
  }
}

/* --- Grundflaeche --- */
html,
body {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif !important;
  letter-spacing: -0.005em;
}
body {
  background:
    radial-gradient(900px 500px at 15% -10%, var(--srr-glow), transparent 60%),
    radial-gradient(700px 500px at 110% 110%, var(--srr-glow-2), transparent 60%),
    var(--background) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

/* --- Kein Hinweis auf die Software dahinter --- */
a[href*="authelia.com"],
div:has(> a[href*="authelia.com"]) {
  display: none !important;
}

/* --- Sprachwahl oben rechts: dezent --- */
#language-button {
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  border-radius: 999px;
}

/* --- Die Karte: jede Stufe (Anmelden, 2FA, Einstellungen ...) --- */
[id$="-stage"] {
  min-height: calc(100vh - 72px) !important;
  padding: 16px;
  box-sizing: border-box;
}
[id$="-stage"] > div {
  max-width: 400px !important;
  padding: 32px !important;
  box-sizing: border-box;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--srr-shadow);
  text-align: left;
}
@media (max-width: 480px) {
  [id$="-stage"] > div {
    padding: 24px !important;
  }
}

/*
 * Markenblock statt Avatar-Symbol: Kachel wie im Dashboard-Kopf, daneben
 * "Smart-Reality" und darunter "CONTROL CENTER". Beide Zeilen stehen im
 * selben ::after; ::first-line macht die erste davon zum Titel.
 */
[id$="-stage"] > div > div > div.p-2:first-child {
  display: flow-root;
  padding: 0 0 4px !important;
  text-align: left;
  font-family: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.6;
  color: var(--muted-foreground);
}
[id$="-stage"] > div > div > div.p-2:first-child > svg {
  display: none !important;
}
[id$="-stage"] > div > div > div.p-2:first-child::before {
  content: "";
  float: left;
  width: 42px;
  height: 42px;
  margin-right: 14px;
  border-radius: 11px;
  background: url("/_p/logo.svg") center / cover no-repeat;
  box-shadow: 0 8px 20px -8px rgba(59, 130, 246, 0.6);
}
[id$="-stage"] > div > div > div.p-2:first-child::after {
  content: "Smart-Reality\A CONTROL CENTER";
  white-space: pre;
  display: block;
  padding-top: 1px;
}
[id$="-stage"] > div > div > div.p-2:first-child::first-line {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--foreground);
}

/* Ueberschrift der Stufe ("Anmelden", "Hallo stefan" ...) */
[id$="-stage"] h5 {
  margin: 22px 0 2px;
  text-align: left;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: var(--foreground);
}

/* --- Eingabefelder --- */
[id$="-stage"] input[data-slot="floating-input"],
[id$="-stage"] input:not([type="checkbox"]):not([type="hidden"]) {
  border-radius: 10px !important;
  background: var(--srr-field) !important;
  font-size: 0.9375rem !important;
}
[id$="-stage"] input[data-slot="floating-input"] + label {
  color: var(--muted-foreground);
}
[id$="-stage"] input[data-slot="floating-input"]:focus + label {
  color: var(--primary);
}

/* --- Schaltflaechen: wie die "contained"-Buttons im Dashboard --- */
[id$="-stage"] button[data-slot="button"] {
  text-transform: none !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
}
[id$="-stage"] button[data-slot="button"][data-variant="default"] {
  height: 44px !important;
}
#sign-in-button {
  background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px -12px rgba(59, 130, 246, 0.8);
}
#sign-in-button:hover {
  filter: brightness(1.08);
}

/* --- Checkbox-Beschriftung etwas zurueckhaltender --- */
[id$="-stage"] label[for="remember-checkbox"] {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--muted-foreground);
}

/* Links in der Karte (z. B. "Abmelden", "Andere Methode") */
[id$="-stage"] a,
[id$="-stage"] button[data-variant="link"] {
  color: var(--primary);
}

/* =====================================================================
 *  Zweiter Faktor
 * ===================================================================== */

/* "Abmelden | Verfahren": wie Textbuttons im Dashboard */
[id$="-stage"] button[data-variant="ghost"] {
  color: var(--primary) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.875rem !important;
}
[id$="-stage"] button[data-variant="ghost"]:hover {
  background: color-mix(in oklab, var(--primary) 10%, transparent) !important;
}

/* Kasten der gewaehlten Methode. Authelia gibt ihm min-width 300px - auf
 * einem Telefon ragt er damit aus der Karte. */
[id$="-stage"] div.rounded-\[10px\].border {
  min-width: 0 !important;
  padding: 20px !important;
  border-radius: 12px !important;
  background: color-mix(in oklab, var(--foreground) 2%, transparent);
  text-align: center;
}
[id$="-stage"] h6 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin-bottom: 12px;
}

/* Feste 200px Hoehe im Original: laengere Texte laufen dort ueber den Link. */
#\32 fa-container {
  height: auto !important;
  min-height: 160px;
  margin-bottom: 12px;
}
/* Authelia faerbt diese Hinweise fest #5858ff */
[id$="-stage"] .text-\[\#5858ff\] {
  color: var(--muted-foreground) !important;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 2px 0;
}
#register-link {
  font-weight: 600;
  font-size: 0.9375rem !important;
}

/* =====================================================================
 *  Einstellungen (Geraete registrieren) und Dialoge
 * ===================================================================== */

/* Kein Grossbuchstaben-Geschrei - im Dashboard auch nicht. */
button.uppercase {
  text-transform: none !important;
  letter-spacing: 0 !important;
}
button[data-slot="button"],
button[data-slot="tooltip-trigger"] {
  border-radius: 10px !important;
  font-weight: 600 !important;
}

/* Kopfleiste: Kartenflaeche statt knalliger Primaerfarbe, mit Markenkachel */
nav.bg-primary {
  background: color-mix(in oklab, var(--card) 85%, transparent) !important;
  color: var(--foreground) !important;
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
nav.bg-primary h6 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}
nav.bg-primary h6::before {
  content: "";
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  background: url("/_p/logo.svg") center / cover no-repeat;
}

/* Inhalt: auf dem Telefon mit Rand, am Desktop schmal und mittig */
nav.bg-primary ~ main {
  padding: 76px 16px 24px !important;
  max-width: 720px;
  margin: 0 auto;
  box-sizing: border-box;
}
[data-slot="card"] {
  border-radius: 16px !important;
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
  box-shadow: var(--srr-shadow) !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
[data-slot="card"] h5 {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
}

/* Dialoge (Identitaetspruefung, QR-Code ...) */
[data-slot="dialog-content"] {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: var(--srr-shadow) !important;
}
[data-slot="dialog-title"] {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

/* Allgemeine Eingabefelder (Einmal-Code, Bezeichnungen ...) */
input[data-slot="input"] {
  border-radius: 10px !important;
  background: var(--srr-field) !important;
}
#one-time-code {
  font-family: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1.125rem !important;
  letter-spacing: 0.2em;
  text-align: center;
}

/* Menue-Symbol in der Kopfleiste war auf die alte Primaerfarbe abgestimmt */
nav.bg-primary button {
  color: var(--foreground) !important;
}

/* Hauptaktion im Dialog hervorheben, wie der Anmelde-Button */
#dialog-next:not(:disabled) {
  background: linear-gradient(135deg, #3b82f6, #6366f1) !important;
  color: #ffffff !important;
  min-width: 140px;
}

/* QR-Code: weisse Ruhezone, volle Deckkraft - Scanner danken es */
[data-slot="dialog-content"] svg.bg-white {
  border-radius: 12px;
  padding: 12px !important;
  opacity: 1 !important;
  filter: none !important;
}
[data-slot="dialog-content"] svg.bg-white {
  background: #ffffff !important;
}