/* xolution.ch — Branding fuer das Authelia-Portal (auth.xolution.ch)
 *
 * Wird von NPM (proxy_host 16, Advanced-Box) per sub_filter in die Seite
 * injiziert und unter /branding/custom.css same-origin ausgeliefert —
 * Authelias CSP erlaubt style-src 'self'.
 *
 * ACHTUNG: Kein Authelia-Feature. Die Selektoren haengen an stabilen IDs
 * (#first-factor-stage, #sign-in-button — vergeben in FirstFactorForm/
 * LoginLayout) und an MUI-Klassen. Ein Authelia-Update kann das brechen;
 * dann sieht das Portal wieder nach Standard-'dark' aus, funktioniert aber.
 * Voraussetzung: theme: 'dark' in configuration.yml (helle Schrift).
 */

body {
  min-height: 100vh;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(6, 182, 212, .34), transparent 60%),
    radial-gradient(800px 520px at 110% 110%, rgba(59, 130, 246, .30), transparent 55%),
    linear-gradient(160deg, #0b1b33 0%, #0d2342 55%, #07172c 100%) !important;
  background-attachment: fixed !important;
}

/* Die Karte: LoginLayout rendert <Grid id="...-stage"> > <Container maxWidth="xs"> */
#root .MuiContainer-root {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .42);
  padding-top: 22px;
  padding-bottom: 22px;
}

/* Anmelden-Button im Markenverlauf */
#sign-in-button {
  background-image: linear-gradient(135deg, #06b6d4, #3b82f6);
  box-shadow: 0 6px 18px rgba(6, 182, 212, .28);
}

#sign-in-button:hover {
  background-image: linear-gradient(135deg, #22d3ee, #60a5fa);
}