body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.hidden{display:none}:root,:host{--fa-font-solid:normal 900 1em/1 "Font Awesome 7 Free";--fa-font-regular:normal 400 1em/1 "Font Awesome 7 Free";--fa-font-light:normal 300 1em/1 "Font Awesome 7 Pro";--fa-font-thin:normal 100 1em/1 "Font Awesome 7 Pro";--fa-font-duotone:normal 900 1em/1 "Font Awesome 7 Duotone";--fa-font-duotone-regular:normal 400 1em/1 "Font Awesome 7 Duotone";--fa-font-duotone-light:normal 300 1em/1 "Font Awesome 7 Duotone";--fa-font-duotone-thin:normal 100 1em/1 "Font Awesome 7 Duotone";--fa-font-brands:normal 400 1em/1 "Font Awesome 7 Brands";--fa-font-sharp-solid:normal 900 1em/1 "Font Awesome 7 Sharp";--fa-font-sharp-regular:normal 400 1em/1 "Font Awesome 7 Sharp";--fa-font-sharp-light:normal 300 1em/1 "Font Awesome 7 Sharp";--fa-font-sharp-thin:normal 100 1em/1 "Font Awesome 7 Sharp";--fa-font-sharp-duotone-solid:normal 900 1em/1 "Font Awesome 7 Sharp Duotone";--fa-font-sharp-duotone-regular:normal 400 1em/1 "Font Awesome 7 Sharp Duotone";--fa-font-sharp-duotone-light:normal 300 1em/1 "Font Awesome 7 Sharp Duotone";--fa-font-sharp-duotone-thin:normal 100 1em/1 "Font Awesome 7 Sharp Duotone";--fa-font-slab-regular:normal 400 1em/1 "Font Awesome 7 Slab";--fa-font-slab-press-regular:normal 400 1em/1 "Font Awesome 7 Slab Press";--fa-font-whiteboard-semibold:normal 600 1em/1 "Font Awesome 7 Whiteboard";--fa-font-thumbprint-light:normal 300 1em/1 "Font Awesome 7 Thumbprint";--fa-font-notdog-solid:normal 900 1em/1 "Font Awesome 7 Notdog";--fa-font-notdog-duo-solid:normal 900 1em/1 "Font Awesome 7 Notdog Duo";--fa-font-etch-solid:normal 900 1em/1 "Font Awesome 7 Etch";--fa-font-graphite-thin:normal 100 1em/1 "Font Awesome 7 Graphite";--fa-font-jelly-regular:normal 400 1em/1 "Font Awesome 7 Jelly";--fa-font-jelly-fill-regular:normal 400 1em/1 "Font Awesome 7 Jelly Fill";--fa-font-jelly-duo-regular:normal 400 1em/1 "Font Awesome 7 Jelly Duo";--fa-font-chisel-regular:normal 400 1em/1 "Font Awesome 7 Chisel";--fa-font-utility-semibold:normal 600 1em/1 "Font Awesome 7 Utility";--fa-font-utility-duo-semibold:normal 600 1em/1 "Font Awesome 7 Utility Duo";--fa-font-utility-fill-semibold:normal 600 1em/1 "Font Awesome 7 Utility Fill"}.svg-inline--fa{box-sizing:content-box;display:var(--fa-display,inline-block);vertical-align:-.125em;height:1em;width:var(--fa-width,1.25em);overflow:visible}.svg-inline--fa.fa-2xs{vertical-align:.1em}.svg-inline--fa.fa-xs{vertical-align:0}.svg-inline--fa.fa-sm{vertical-align:-.0714286em}.svg-inline--fa.fa-lg{vertical-align:-.2em}.svg-inline--fa.fa-xl{vertical-align:-.25em}.svg-inline--fa.fa-2xl{vertical-align:-.3125em}.svg-inline--fa.fa-pull-left,.svg-inline--fa .fa-pull-start{float:inline-start;margin-inline-end:var(--fa-pull-margin,.3em)}.svg-inline--fa.fa-pull-right,.svg-inline--fa .fa-pull-end{float:inline-end;margin-inline-start:var(--fa-pull-margin,.3em)}.svg-inline--fa.fa-li{width:var(--fa-li-width,2em);inset-block-start:.25em;inset-inline-start:calc(-1 * var(--fa-li-width,2em))}.fa-layers-counter,.fa-layers-text{text-align:center;display:inline-block;position:absolute}.fa-layers{text-align:center;vertical-align:-.125em;height:1em;width:var(--fa-width,1.25em);display:inline-block;position:relative}.fa-layers .svg-inline--fa{transform-origin:50%;margin:auto;position:absolute;inset:0}.fa-layers-text{transform-origin:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.fa-layers-counter{background-color:var(--fa-counter-background-color,#ff253a);border-radius:var(--fa-counter-border-radius,1em);box-sizing:border-box;color:var(--fa-inverse,#fff);line-height:var(--fa-counter-line-height,1);max-width:var(--fa-counter-max-width,5em);min-width:var(--fa-counter-min-width,1.5em);padding:var(--fa-counter-padding,.25em .5em);right:var(--fa-right,0);text-overflow:ellipsis;top:var(--fa-top,0);transform:scale(var(--fa-counter-scale,.25));transform-origin:100% 0;overflow:hidden}.fa-layers-bottom-right{bottom:var(--fa-bottom,0);right:var(--fa-right,0);transform:scale(var(--fa-layers-scale,.25));transform-origin:100% 100%;top:auto}.fa-layers-bottom-left{bottom:var(--fa-bottom,0);left:var(--fa-left,0);transform:scale(var(--fa-layers-scale,.25));transform-origin:0 100%;top:auto;right:auto}.fa-layers-top-right{top:var(--fa-top,0);right:var(--fa-right,0);transform:scale(var(--fa-layers-scale,.25));transform-origin:100% 0}.fa-layers-top-left{left:var(--fa-left,0);right:auto;top:var(--fa-top,0);transform:scale(var(--fa-layers-scale,.25));transform-origin:0 0}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-2xs{vertical-align:.225em;font-size:.625em;line-height:.1em}.fa-xs{vertical-align:.125em;font-size:.75em;line-height:.0833333em}.fa-sm{vertical-align:.0535715em;font-size:.875em;line-height:.0714286em}.fa-lg{vertical-align:-.075em;font-size:1.25em;line-height:.05em}.fa-xl{vertical-align:-.125em;font-size:1.5em;line-height:.0416667em}.fa-2xl{vertical-align:-.1875em;font-size:2em;line-height:.03125em}.fa-width-auto{--fa-width:auto}.fa-fw,.fa-width-fixed{--fa-width:1.25em}.fa-ul{margin-inline-start:var(--fa-li-margin,2.5em);padding-inline-start:0;list-style-type:none}.fa-ul>li{position:relative}.fa-li{text-align:center;width:var(--fa-li-width,2em);line-height:inherit;position:absolute;inset-inline-start:calc(-1 * var(--fa-li-width,2em))}.fa-border{border-color:var(--fa-border-color,#eee);border-radius:var(--fa-border-radius,.1em);border-style:var(--fa-border-style,solid);border-width:var(--fa-border-width,.0625em);box-sizing:var(--fa-border-box-sizing,content-box);padding:var(--fa-border-padding,.1875em .25em)}.fa-pull-left,.fa-pull-start{float:inline-start;margin-inline-end:var(--fa-pull-margin,.3em)}.fa-pull-right,.fa-pull-end{float:inline-end;margin-inline-start:var(--fa-pull-margin,.3em)}.fa-beat{animation-name:fa-beat;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-bounce{animation-name:fa-bounce;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28, .84, .42, 1))}.fa-fade{animation-name:fa-fade;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4, 0, .6, 1))}.fa-beat-fade{animation-name:fa-beat-fade;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4, 0, .6, 1))}.fa-flip{animation-name:fa-flip;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-shake{animation-name:fa-shake;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin{animation-name:fa-spin;animation-delay:var(--fa-animation-delay,0s);animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,2s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin-reverse{--fa-animation-direction:reverse}.fa-pulse,.fa-spin-pulse{animation-name:fa-spin;animation-direction:var(--fa-animation-direction,normal);animation-duration:var(--fa-animation-duration,1s);animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-timing-function:var(--fa-animation-timing,steps(8))}@media (prefers-reduced-motion:reduce){.fa-beat,.fa-bounce,.fa-fade,.fa-beat-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse{transition:none!important;animation:none!important}}@keyframes fa-beat{0%,90%{transform:scale(1)}45%{transform:scale(var(--fa-beat-scale,1.25))}}@keyframes fa-bounce{0%{transform:scale(1)translateY(0)}10%{transform:scale(var(--fa-bounce-start-scale-x,1.1), var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{transform:scale(var(--fa-bounce-jump-scale-x,.9), var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{transform:scale(var(--fa-bounce-land-scale-x,1.05), var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{transform:scale(1, 1) translateY(var(--fa-bounce-rebound,-.125em))}64%{transform:scale(1)translateY(0)}to{transform:scale(1)translateY(0)}}@keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);transform:scale(1)}50%{opacity:1;transform:scale(var(--fa-beat-fade-scale,1.125))}}@keyframes fa-flip{50%{transform:rotate3d(var(--fa-flip-x,0), var(--fa-flip-y,1), var(--fa-flip-z,0), var(--fa-flip-angle,-180deg))}}@keyframes fa-shake{0%{transform:rotate(-15deg)}4%{transform:rotate(15deg)}8%,24%{transform:rotate(-18deg)}12%,28%{transform:rotate(18deg)}16%{transform:rotate(-22deg)}20%{transform:rotate(22deg)}32%{transform:rotate(-12deg)}36%{transform:rotate(12deg)}40%,to{transform:rotate(0)}}@keyframes fa-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fa-rotate-90{transform:rotate(90deg)}.fa-rotate-180{transform:rotate(180deg)}.fa-rotate-270{transform:rotate(270deg)}.fa-flip-horizontal{transform:scaleX(-1)}.fa-flip-vertical{transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{transform:scale(-1)}.fa-rotate-by{transform:rotate(var(--fa-rotate-angle,0))}.svg-inline--fa .fa-primary{fill:var(--fa-primary-color,currentColor);opacity:var(--fa-primary-opacity,1)}.svg-inline--fa .fa-secondary{fill:var(--fa-secondary-color,currentColor);opacity:var(--fa-secondary-opacity,.4)}.svg-inline--fa.fa-swap-opacity .fa-primary{opacity:var(--fa-secondary-opacity,.4)}.svg-inline--fa.fa-swap-opacity .fa-secondary{opacity:var(--fa-primary-opacity,1)}.svg-inline--fa mask .fa-primary,.svg-inline--fa mask .fa-secondary{fill:#000}.svg-inline--fa.fa-inverse{fill:var(--fa-inverse,#fff)}.fa-stack{vertical-align:middle;width:2.5em;height:2em;line-height:2em;display:inline-block;position:relative}.fa-inverse{color:var(--fa-inverse,#fff)}.svg-inline--fa.fa-stack-1x{--fa-width:1.25em;height:1em;width:var(--fa-width)}.svg-inline--fa.fa-stack-2x{--fa-width:2.5em;height:2em;width:var(--fa-width)}.fa-stack-1x,.fa-stack-2x{z-index:var(--fa-stack-z-index,auto);margin:auto;position:absolute;inset:0}
/*
 * Vetro branding for the Authelia login portal.
 *
 * Appended to Authelia's stylesheet by the brandcss Traefik plugin. Mirrors the
 * portal app (frontend/tailwind.config.js): navy/orange palette, canvas
 * background, square controls, system-ui font.
 *
 * The Vetro logo is served same-origin via Authelia's logo.png asset override
 * (server.asset_path -> /data/logo.png), so no CSP changes are required. This
 * file only resizes that logo and applies the palette.
 */

:root {
  --vetro-navy: #001E46;
  --vetro-midnight: #00122B;
  --vetro-orange: #E17500;
  --vetro-canvas: #D6DBDD;
  --vetro-red: #E14400;
}

/* System UI font across the portal */
body,
.MuiTypography-root,
.MuiButton-root,
.MuiInputBase-root,
.MuiFormLabel-root,
.MuiInputLabel-root {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* Page background = app canvas */
body {
  background: var(--vetro-canvas) !important;
}

/* Vetro wordmark (logo.png asset override) — size it for the wordmark aspect */
img[alt="Logo"] {
  width: 180px !important;
  height: auto !important;
}

/* Title */
.MuiTypography-h5 {
  color: var(--vetro-navy);
  font-weight: 700;
}

/* Second-factor "information" prompt (e.g. the not-yet-registered 2FA screen):
   Authelia renders the circular info icon (FontAwesome .information-icon), the
   method heading (h6) and the descriptive text (body1) in a bright theme blue
   (#5858FF) — recolour all three to navy. The body1/h6 rules are scoped to
   #second-factor-stage so they hit only this prompt, not the settings-screen
   headings; the orange "Gerät registrieren" link is a MuiLink button (not
   body1), so it stays orange. */
.information-icon,
#second-factor-stage .MuiTypography-h6,
#second-factor-stage .MuiTypography-body1 {
  color: var(--vetro-navy) !important;
}

/* Primary button = navy */
.MuiButton-containedPrimary {
  --variant-containedBg: var(--vetro-navy);
  --variant-containedHoverBg: var(--vetro-midnight);
}

/* Contained dialog buttons (e.g. the identity-verification OTC dialog:
   #dialog-verify = Info, #dialog-cancel = Error). MUI ships these in stock
   blue/red, so map them onto the frontend Button variants — a coloured fill
   with white text that transitions on hover (frontend/.../Button.tsx). The
   confirm action is navy → orange on hover, the cancel/destructive action is
   the frontend danger red → navy on hover.

   Hover needs its own rule: MUI's button reads background-color from
   --variant-containedBg, and emotion injects a per-instance hover rule
   (.mui-xxxxx:hover { --variant-containedBg: <palette> }) that re-sets that
   same variable. So we override --variant-containedBg under :hover too — this
   ties emotion's (0,2,0) specificity and wins on source order, since brand.css
   is appended after Authelia's stylesheet. (--variant-containedHoverBg is not
   a variable MUI reads.) */
.MuiButton-containedInfo {
  --variant-containedBg: var(--vetro-navy);
}

.MuiButton-containedError {
  --variant-containedBg: var(--vetro-red);
}


/* Links = orange accent (matches the logo mark) */
.MuiLink-root {
  color: var(--vetro-orange);
}

/* Focused inputs = navy */
.MuiFormLabel-root.Mui-focused {
  color: var(--vetro-navy);
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--vetro-navy);
}

/* Brand primary: replace MUI's default blue (#1976d2) with navy on the
   components that use the primary palette colour — checkboxes, radios,
   switches, icons, text/outlined buttons, progress, tabs. Links are
   intentionally excluded (they stay orange via .MuiLink-root above). */
.MuiCheckbox-root.Mui-checked,
.MuiRadio-root.Mui-checked,
.MuiSwitch-colorPrimary.Mui-checked,
.MuiSvgIcon-colorPrimary,
.MuiIconButton-colorPrimary,
.MuiButton-textPrimary,
.MuiButton-outlinedPrimary,
.MuiCircularProgress-colorPrimary,
.MuiTab-root.Mui-selected,
.MuiToggleButton-root.Mui-selected {
  color: var(--vetro-navy) !important;
}

.MuiButton-outlinedPrimary {
  border-color: var(--vetro-navy) !important;
}

.MuiSwitch-colorPrimary.Mui-checked+.MuiSwitch-track {
  background-color: var(--vetro-navy) !important;
}

.MuiTabs-indicator {
  background-color: var(--vetro-navy) !important;
}

/* Brand secondary: MUI's default secondary is pink (#f50057). Map it to the
   orange accent — used e.g. by the "Abmelden" (#logout-button) text button. */
.MuiButton-textSecondary,
.MuiButton-outlinedSecondary,
.MuiButton-colorSecondary,
.MuiIconButton-colorSecondary,
.MuiSvgIcon-colorSecondary,
.MuiCheckbox-colorSecondary.Mui-checked,
.MuiRadio-colorSecondary.Mui-checked {
  color: var(--vetro-orange) !important;
}

.MuiButton-outlinedSecondary {
  border-color: var(--vetro-orange) !important;
}

/* Relabel ONLY the first-factor login heading to "Portal". The heading and the
   submit button share one i18n key ("Sign in"), so this can't be done in the
   locale files — swap the text via CSS, scoped to the login stage's h5 (the
   only h5 under #first-factor-stage). The submit button keeps its label. */
#first-factor-stage .MuiTypography-h5 {
  font-size: 0 !important;
  /* collapse the original translated text */
}

#first-factor-stage .MuiTypography-h5::after {
  content: "Portal";
  font-size: 1.5rem;
  /* MUI h5 default */
  font-weight: 700;
  color: var(--vetro-navy);
}

/* Hide the Authelia attribution (white-label) */
a[href*="authelia.com"] {
  display: none !important;
}

/* Match the app: form controls have square corners */
.MuiButton-root,
.MuiInputBase-root,
.MuiOutlinedInput-root {
  border-radius: 0 !important;
}

.MuiOutlinedInput-notchedOutline {
  border-radius: 0 !important;
}

/* Hide the language switcher: the portal is German-only. Browser-detected
   English also renders German via the locale overrides in
   config/authelia/assets/locales (en/portal.json ships the German strings). */
#language-button {
  display: none !important;
}

/*
 * Settings screens (Account Settings, 2FA management, etc.). These share this
 * same stylesheet with the login portal but use a different layout: a top
 * MuiAppBar/MuiToolbar and MuiDrawer navigation plus card/paper surfaces. The
 * font, navy primary buttons, and orange links already apply app-wide; the
 * rules below extend the brand to the settings chrome so it roughly matches CI.
 */

/* Top app bar = navy with white contents */
.MuiAppBar-root {
  background-color: var(--vetro-navy) !important;
  color: #fff !important;
}

.MuiAppBar-root .MuiTypography-root,
.MuiAppBar-root .MuiIconButton-root,
.MuiAppBar-root .MuiSvgIcon-root,
.MuiAppBar-root .MuiButton-root {
  color: #fff !important;
}

/* Square corners on surfaces (cards, drawer, menus) to match the square controls */
.MuiPaper-root,
.MuiCard-root,
.MuiDrawer-paper {
  border-radius: 0 !important;
}