/* AgencyDock — Gestaltungsschicht über der Authelia-Anmeldemaske (4.39.x).
   Reines CSS, wird nach dem App-CSS geladen. Hängt an drei Dingen, die Authelia
   stabil hält: den shadcn-Variablen (--primary, --radius …), den Element-IDs
   (#…-stage, #sign-in-button …) und zwei Layout-Klassen. Fällt davon nach einem
   Update etwas weg, erscheint dort wieder die Standardmaske — die Anmeldung
   selbst bleibt unberührt.
   Tokens: AgencyDock Design System (agencydock-brand/brand-tokens.css).
   CSP der Seite erlaubt nur 'self' — deshalb keine data:-Bilder, alles unter /brand/. */

/* Marken-Schrift der Wortmarke: Anzeige-Schrift für »Howdy!« und die Überschrift. */
@font-face {
  font-family: 'Space Grotesk';
  src: url('/brand/fonts/SpaceGrotesk.ttf') format('truetype');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/brand/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root,
[data-theme="light"] {
  --ad-blue: #2F6BFF;
  --ad-blue-600: #1F54E6;
  --ad-blue-700: #173FB3;
  --ad-cloud: #F4F7FE;
  --ad-line: #E1E6F0;
  --ad-line-strong: #CDD4E2;
  --ad-ink: #11182B;
  --ad-ink-2: #4C5466;
  --ad-muted: #6B7489;
  --ad-midnight: #0B1124;
  --ad-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ad-quay: clamp(340px, 41.666vw, 760px);

  /* Authelias eigene Variablen — alles, was sie benutzt, folgt dem Kit. */
  --background: var(--ad-cloud);
  --foreground: var(--ad-ink);
  --card: #FFFFFF;
  --card-foreground: var(--ad-ink);
  --popover: #FFFFFF;
  --popover-foreground: var(--ad-ink);
  --primary: var(--ad-blue);
  --primary-foreground: #FFFFFF;
  --secondary: #6D5BF0;
  --secondary-foreground: #FFFFFF;
  --muted: #EDF0F7;
  --muted-foreground: var(--ad-muted);
  --accent: #E6EEFF;
  --accent-foreground: var(--ad-ink);
  --border: var(--ad-line);
  --input: var(--ad-line-strong);
  --ring: var(--ad-blue);
  --destructive: #F04438;
  --success: #12B76A;
  --warning: #F79009;
  --info: #16C7F2;
  --divider: var(--ad-line);
  --custom-icon: var(--ad-ink);
  --custom-loading-bar: var(--ad-blue);
  --radius: 0.875rem;
}

html, body {
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { background: var(--ad-cloud); color: var(--ad-ink); }

/* ---------- Kai: Midnight-Fläche mit dem Zeichen, wie auf der Tool-Auswahl ----------
   Nur auf den Anmelde-Stufen (Anmeldung, zweiter Faktor, Passwort zurücksetzen) —
   erkennbar am Element mit der ID »…-stage«. Einstellungen und Zustimmung behalten
   ihr eigenes Layout und bekommen nur Schrift, Farben und Rundungen. */

html:has(#root div[id$="-stage"])::before {
  content: '';
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--ad-quay);
  background-color: var(--ad-midnight);
  background-image: url('/brand/img/mark-gradient.svg');
  background-repeat: no-repeat;
  background-size: calc(2 * var(--ad-quay)) auto;
  background-position: calc(-0.18 * var(--ad-quay)) calc(160vh - 2 * var(--ad-quay));
}

html:has(#root div[id$="-stage"]) body::before {
  content: '';
  position: fixed;
  top: 36px;
  left: 48px;
  width: 164px;
  height: 44px;
  background: url('/brand/img/logo-dark.svg') left center / contain no-repeat;
}

html:has(#root div[id$="-stage"]) body::after {
  content: 'Howdy!';
  position: fixed;
  left: 48px;
  top: calc(36px + 44px + clamp(48px, 11vh, 128px));
  width: calc(var(--ad-quay) - 96px);
  color: #FFFFFF;
  font-family: 'Space Grotesk', 'Geist', system-ui, sans-serif;
  font-size: clamp(2.75rem, 4.6vw, 4.5rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

html:has(#root div[id$="-stage"]) #root::before {
  content: 'Eine Anmeldung für alle Werkzeuge.';
  position: fixed;
  left: 48px;
  top: calc(36px + 44px + clamp(48px, 11vh, 128px) + clamp(2.75rem, 4.6vw, 4.5rem) * 1.02 + 20px);
  width: min(30ch, calc(var(--ad-quay) - 96px));
  color: #C2C9D9;
  font-size: 1rem;
  line-height: 1.55;
}

/* ---------- Hafen: Formularseite ---------- */

html:has(#root div[id$="-stage"]) #root > div:not(.hidden) { margin-left: var(--ad-quay); }

#root div[id$="-stage"],
#root #authenticated-view {
  min-height: 100dvh;
  margin-top: -72px;          /* die Kopfzeile mit dem Sprachknopf liegt darüber */
  padding: 96px 24px;
  text-align: left;
}

/* Doppelrand-Karte: weißer Kern, äußere Schale als Ring. */
#root div[id$="-stage"] > div {
  max-width: 440px;
  padding: 40px 40px 32px;
  border-radius: 22px;
  background: #FFFFFF;
  box-shadow:
    0 0 0 8px rgba(17, 24, 43, 0.035),
    0 0 0 9px rgba(17, 24, 43, 0.05),
    0 32px 70px -30px rgba(17, 24, 43, 0.30);
  animation: ad-arrive 900ms var(--ad-ease) 160ms both;
}

/* Das kleine Zeichen über dem Formular entfällt — die Marke steht links. */
#root div[id$="-stage"] img { display: none; }

#root div[id$="-stage"] h5 {
  margin: 0 0 4px;
  font-family: 'Space Grotesk', 'Geist', system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-align: left;
}

/* Felder */
#root input:not([type="checkbox"]):not([type="radio"]) {
  border-radius: 14px;
  border-color: var(--ad-line-strong);
  background: #FFFFFF;
  font-size: 1rem;
  transition: border-color 300ms var(--ad-ease), box-shadow 300ms var(--ad-ease);
}
#root input:not([type="checkbox"]):not([type="radio"]):hover { border-color: #9AA3B7; }
#root input:not([type="checkbox"]):not([type="radio"]):focus {
  border-color: var(--ad-blue);
  box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.18);
  outline: none;
}
#root input[type="checkbox"] { accent-color: var(--ad-blue); }

/* Schaltflächen: Pille, normale Schreibung statt Versalien */
#root button[type="submit"],
#root #sign-in-button,
#root #passkey-sign-in-button,
#root #reset-button,
#root #cancel-button {
  min-height: 52px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  transition: background-color 400ms var(--ad-ease), border-color 400ms var(--ad-ease), transform 400ms var(--ad-ease), box-shadow 400ms var(--ad-ease);
}
#root #sign-in-button,
#root button[type="submit"] {
  background: var(--ad-blue);
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 24px -12px rgba(47, 107, 255, 0.7);
}
#root #sign-in-button:hover,
#root button[type="submit"]:hover { background: var(--ad-blue-600); }
#root #sign-in-button:active,
#root button[type="submit"]:active,
#root #passkey-sign-in-button:active { transform: scale(0.98); }

/* Passkey ist der zweite Weg, nicht der zweite Hauptknopf. */
#root #passkey-sign-in-button,
#root #cancel-button {
  background: #FFFFFF;
  color: var(--ad-ink);
  box-shadow: inset 0 0 0 1px var(--ad-line-strong);
}
#root #passkey-sign-in-button:hover,
#root #cancel-button:hover {
  background: var(--ad-cloud);
  box-shadow: inset 0 0 0 1px #9AA3B7;
}

#root #reset-password-button,
#root #methods-button {
  color: var(--ad-blue);
  font-size: 0.9375rem;
  font-weight: 500;
  text-transform: none;
}

#root button:focus-visible,
#root a:focus-visible {
  outline: 2px solid var(--ad-blue);
  outline-offset: 3px;
}

/* Trenner »ODER« leise und in normaler Schreibung */
#root #form-login .relative.flex.items-center span,
#root #form-login .relative.flex.items-center p {
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: lowercase;
  color: var(--ad-muted);
}

#root #language-button { min-width: 44px; min-height: 44px; justify-content: center; color: var(--ad-ink-2); font-size: 0.9375rem; }

/* ---------- Bewegung ---------- */

@keyframes ad-arrive {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #root div[id$="-stage"] > div { animation: none; }
  #root button, #root input { transition: none; }
}

/* ---------- Schmal: Kai wird zum Kopfband ---------- */

@media (max-width: 860px) {
  html:has(#root div[id$="-stage"])::before {
    inset: 0 0 auto 0;
    width: auto;
    height: 116px;
    background-size: 300px auto;
    background-position: right -150px top -40px;
  }
  html:has(#root div[id$="-stage"]) body::before { top: 36px; left: 20px; width: 140px; height: 38px; }
  html:has(#root div[id$="-stage"]) body::after,
  html:has(#root div[id$="-stage"]) #root::before { content: none; }

  html:has(#root div[id$="-stage"]) #root > div:not(.hidden) { margin-left: 0; }
  html:has(#root div[id$="-stage"]) #root header { position: relative; z-index: 1; }
  html:has(#root div[id$="-stage"]) #root #language-button { color: #FFFFFF; }

  #root div[id$="-stage"],
  #root #authenticated-view {
    min-height: calc(100dvh - 116px);
    margin-top: 44px;
    padding: 44px 16px 48px;
    align-items: flex-start;
  }
  #root div[id$="-stage"] > div { padding: 28px 22px 24px; }
  #root div[id$="-stage"] h5 { font-size: 1.75rem; }
}