@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/auth/on-fonts/plex-400.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/auth/on-fonts/plex-500.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/auth/on-fonts/plex-600.ttf') format('truetype')}
/* ON authentication · Daylight
 * Presentation only. The official Authelia application owns every control,
 * request, error, redirect and authentication state. Inject on the ON host only.
 * IBM Plex Sans is served locally by the ON edge; system fonts are the fallback.
 */
:root {
  --on-paper: #f5f4f0;
  --on-sheet: #ffffff;
  --on-sunk: #eeece7;
  --on-rule: #dfdcd4;
  --on-field: #8a857b;
  --on-ink: #12181e;
  --on-ink-2: #3c4954;
  --on-ink-3: #5f6a74;
  --on-error: #a72a33;
  --on-error-surface: #fbf0f0;
  --on-warning: #74521c;
  --on-warning-surface: #f8f2e5;
  --on-success: #206343;
  --on-success-surface: #eff6f0;
  --on-sans: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --on-lift: 0 1px 2px rgba(18, 24, 30, .05), 0 12px 24px -16px rgba(18, 24, 30, .34);
  color-scheme: light;
}

html,
body,
#root {
  background: var(--on-paper) !important;
  color: var(--on-ink);
  font-family: var(--on-sans) !important;
  -webkit-font-smoothing: antialiased;
}

body { margin: 0; }
.MuiTypography-root,
.MuiButtonBase-root,
.MuiInputBase-root,
.MuiInputLabel-root,
.MuiFormLabel-root,
.MuiFormControlLabel-label,
.MuiAlert-root,
.MuiLink-root,
.MuiMenuItem-root,
.MuiListItemText-primary,
.MuiListItemText-secondary,
.MuiTableCell-root,
.MuiTooltip-tooltip {
  font-family: var(--on-sans) !important;
}

/* These are public MUI component classes, not generated Emotion hashes.
 * The stylesheet is injected only into the ON portal. Every real route keeps
 * its translated content and controls, including dialogs rendered in a portal. */
.MuiPaper-root {
  color: var(--on-ink) !important;
  background-color: var(--on-sheet) !important;
  background-image: none !important;
}
.MuiPaper-outlined { border-color: var(--on-rule) !important; }
.MuiDivider-root { border-color: var(--on-rule) !important; color: var(--on-ink-3); }
.MuiTypography-h4,
.MuiTypography-h5,
.MuiTypography-h6,
.MuiDialogTitle-root {
  color: var(--on-ink);
  font-weight: 600 !important;
  letter-spacing: -.008em !important;
}
.MuiTypography-h4 { font-size: 22px !important; line-height: 1.35 !important; }
.MuiTypography-h6 { font-size: 15px !important; line-height: 1.45 !important; }
.MuiLink-root {
  color: var(--on-ink-2) !important;
  text-decoration-color: var(--on-field) !important;
  text-underline-offset: 3px;
}
.MuiLink-root:hover { color: var(--on-ink) !important; }
.MuiIconButton-root,
.MuiSvgIcon-colorPrimary,
.MuiSvgIcon-colorSecondary { color: var(--on-ink-2) !important; }
.MuiSvgIcon-colorError { color: var(--on-error) !important; }
.MuiIconButton-root:hover { background-color: var(--on-sunk) !important; }
.MuiIconButton-root.Mui-disabled { color: var(--on-field) !important; }
.MuiCircularProgress-root { color: var(--on-ink-2) !important; }
.MuiButton-root .MuiCircularProgress-root { color: currentColor !important; }
.MuiLinearProgress-root { background-color: var(--on-sunk) !important; }
.MuiLinearProgress-bar { background-color: var(--on-ink-2) !important; }
/* Authelia's initial loader is react-spinners ScaleLoader, not a MUI progress
 * component. Its library-owned animation name is stable in the pinned build;
 * recolour only its bars, leaving the loader and its animation intact. */
span[style*="ScaleLoader-scale"] { background-color: var(--on-ink-2) !important; }

/* The existing top bar stays in document flow. Its language, settings and
 * account controls remain visible, reachable and independently labelled. */
.MuiAppBar-root {
  background: transparent !important;
  color: var(--on-ink) !important;
  box-shadow: none !important;
}
.MuiAppBar-root .MuiToolbar-root { min-height: 64px; }
.MuiAppBar-root .MuiIconButton-root { color: var(--on-ink-2) !important; }
/* Settings uses its own layout, without the authentication sheet. Add its ON
 * identifier beside the native title, not a second brand above a login card. */
.MuiAppBar-root #settings-menu + .MuiTypography-h6::before {
  content: 'ON';
  display: inline-block;
  margin-right: 18px;
  padding-left: 26px;
  background: url('/auth/on-daylight-mark.svg') left center / 17px 17px no-repeat;
  font: 600 15px/20px var(--on-sans);
  color: var(--on-ink);
}

/* LoginLayout and MinimalLayout both put the stage immediately after the
 * AppBar. The shared structure covers first factor, second factor, signed-in,
 * sign-out, password reset and consent without a growing list of route IDs. */
.MuiAppBar-root + .MuiGrid-container {
  min-height: calc(100vh - 80px) !important;
  min-height: calc(100svh - 80px) !important;
  box-sizing: border-box;
  padding: 24px 16px 40px;
  text-align: left !important;
}

.MuiAppBar-root + .MuiGrid-container > .MuiContainer-root {
  width: 100%;
  max-width: 420px !important;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 22px 22px 20px !important;
  background: var(--on-sheet);
  border: 1px solid var(--on-rule);
  border-radius: 12px;
  box-shadow: var(--on-lift);
}

/* This icon is decorative; no control or authentication information is hidden.
 * Keep the real h5 text, including its translation, rather than replacing it. */
.MuiAppBar-root + .MuiGrid-container > .MuiContainer-root #UserSvg { display: none; }
.MuiAppBar-root + .MuiGrid-container > .MuiContainer-root .MuiTypography-h5 {
  margin: 0 0 6px !important;
  color: var(--on-ink);
  font-size: 17.5px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: -.008em !important;
}
.MuiAppBar-root + .MuiGrid-container > .MuiContainer-root::before {
  content: 'ON factory cockpit';
  display: block;
  box-sizing: border-box;
  min-height: 20px;
  margin: 0 0 18px;
  padding-left: 29px;
  color: var(--on-ink);
  font: 600 15px/20px var(--on-sans);
  letter-spacing: -.006em;
  background: url('/auth/on-daylight-mark.svg') left center / 19px 19px no-repeat;
}

/* No forced narrow sheet for the consent screen's wider native layout. */
.MuiAppBar-root + .MuiGrid-container > .MuiContainer-maxWidthSm {
  max-width: 600px !important;
}

#first-factor-stage #form-login { display: block; width: 100%; }
.MuiFormControl-root { min-width: 0; }
.MuiOutlinedInput-root {
  min-height: 44px;
  color: var(--on-ink) !important;
  background: var(--on-sheet) !important;
  border-radius: 9px !important;
  font-size: 13.5px !important;
  transition: box-shadow 120ms ease;
}
.MuiOutlinedInput-notchedOutline {
  border-color: var(--on-field) !important;
  transition: border-color 120ms ease;
}
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--on-ink) !important;
}
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border: 2px solid var(--on-ink) !important;
}
.MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline {
  border: 2px solid var(--on-error) !important;
}
.MuiInputLabel-root { color: var(--on-ink-2) !important; font-size: 13.5px; }
.MuiFormLabel-root.Mui-focused { color: var(--on-ink-2) !important; }
.MuiInputLabel-root.Mui-error,
.MuiFormLabel-root.Mui-error,
.MuiFormHelperText-root.Mui-error { color: var(--on-error) !important; }
.MuiFormHelperText-root { font: 400 12px/1.5 var(--on-sans); }
.MuiInput-underline::after,
.MuiFilledInput-underline::after { border-bottom-color: var(--on-ink) !important; }
#first-factor-stage .MuiInputLabel-root:not(.MuiInputLabel-shrink) {
  transform: translate(12px, 13px) scale(1);
}
#first-factor-stage .MuiInputLabel-root.MuiInputLabel-shrink {
  transform: translate(12px, -9px) scale(.85);
}
#first-factor-stage #username-textfield,
#first-factor-stage #password-textfield {
  box-sizing: border-box;
  min-height: 44px;
  padding: 11px 12px;
  font-size: 13.5px;
  line-height: 20px;
}
#first-factor-stage #password-textfield { padding-right: 0; }
.MuiInputAdornment-root .MuiIconButton-root {
  min-width: 44px;
  min-height: 44px;
  color: var(--on-ink-2);
}

.MuiButton-root {
  min-height: 44px;
  padding: 9px 16px;
  border-radius: 9px !important;
  box-shadow: none !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.4;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.MuiButton-contained,
#first-factor-stage #sign-in-button {
  border: 1px solid var(--on-ink);
  background: var(--on-ink) !important;
  color: #ffffff !important;
}
.MuiButton-contained:hover,
#first-factor-stage #sign-in-button:hover { background: var(--on-ink-2) !important; }
.MuiButton-outlined {
  border-color: var(--on-field) !important;
  background: var(--on-sheet) !important;
  color: var(--on-ink) !important;
}
.MuiButton-text { color: var(--on-ink-2) !important; }
.MuiButton-outlined:hover,
.MuiButton-text:hover { background: var(--on-sunk) !important; }
.MuiButton-containedError {
  background: var(--on-error) !important;
  border-color: var(--on-error) !important;
}
.MuiButton-outlinedError,
.MuiButton-textError { color: var(--on-error) !important; }
.MuiButton-root.Mui-disabled,
#first-factor-stage #sign-in-button.Mui-disabled {
  border-color: var(--on-rule);
  background: var(--on-sunk) !important;
  color: var(--on-ink-3) !important;
}
#first-factor-stage #passkey-sign-in-button {
  min-height: 44px;
  border: 1px solid var(--on-field);
  border-radius: 9px;
  color: var(--on-ink) !important;
  background: var(--on-sheet) !important;
  box-shadow: none !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
#first-factor-stage #passkey-sign-in-button:hover { background: var(--on-sunk) !important; }
#first-factor-stage #passkey-sign-in-button svg { fill: currentColor; }
#first-factor-stage #passkey-sign-in-button.Mui-disabled {
  background: var(--on-sunk) !important;
  color: var(--on-ink-3) !important;
  border-color: var(--on-rule);
}

/* Keep password visibility, passkeys, remember-me, reset links and alerts.
 * Only their typography/surface follows Daylight; their behaviour is untouched. */
#first-factor-stage .MuiFormControlLabel-label { font-size: 13px; color: var(--on-ink-2); }
.MuiCheckbox-root,
.MuiRadio-root,
.MuiSwitch-switchBase.Mui-checked { color: var(--on-ink-2) !important; }
.MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track { background-color: var(--on-ink-2) !important; }
.MuiCheckbox-root.Mui-disabled,
.MuiRadio-root.Mui-disabled { color: var(--on-field) !important; }
#first-factor-stage .MuiLink-root { color: var(--on-ink-2) !important; font-size: 12.5px; }
#first-factor-stage .MuiLink-root:hover { color: var(--on-ink) !important; }
.MuiAlert-root {
  border: 1px solid var(--on-rule);
  border-radius: 9px;
  box-shadow: none !important;
  font-size: 13px;
  line-height: 1.5;
}
.MuiAlert-root .MuiAlert-icon { color: inherit !important; }
.MuiAlert-root.MuiAlert-colorError {
  color: var(--on-error) !important;
  background-color: var(--on-error-surface) !important;
  border-color: var(--on-error) !important;
}
.MuiAlert-root.MuiAlert-colorWarning {
  color: var(--on-warning) !important;
  background-color: var(--on-warning-surface) !important;
  border-color: var(--on-warning) !important;
}
.MuiAlert-root.MuiAlert-colorSuccess {
  color: var(--on-success) !important;
  background-color: var(--on-success-surface) !important;
  border-color: var(--on-success) !important;
}
.MuiAlert-root.MuiAlert-colorInfo {
  color: var(--on-ink-2) !important;
  background-color: var(--on-sunk) !important;
}
.MuiSnackbarContent-root {
  color: var(--on-sheet) !important;
  background-color: var(--on-ink) !important;
}
.MuiDialog-paper,
.MuiMenu-paper,
.MuiPopover-paper {
  border: 1px solid var(--on-rule);
  border-radius: 12px !important;
  box-shadow: var(--on-lift) !important;
}
.MuiDrawer-paper { border-color: var(--on-rule) !important; }
.MuiMenuItem-root,
.MuiListItemButton-root { color: var(--on-ink-2) !important; }
.MuiMenuItem-root:hover,
.MuiListItemButton-root:hover,
.MuiMenuItem-root.Mui-selected,
.MuiListItemButton-root.Mui-selected {
  color: var(--on-ink) !important;
  background-color: var(--on-sunk) !important;
}
.MuiListItemIcon-root { color: inherit !important; min-width: 36px; }
.MuiTab-root { color: var(--on-ink-3) !important; text-transform: none !important; }
.MuiTab-root.Mui-selected { color: var(--on-ink) !important; }
.MuiTabs-indicator { background-color: var(--on-ink) !important; }
.MuiTooltip-tooltip {
  background: var(--on-ink) !important;
  color: var(--on-sheet) !important;
  font-size: 12px;
}
.MuiTooltip-arrow { color: var(--on-ink) !important; }
.MuiTableCell-root { border-color: var(--on-rule) !important; }
.MuiTableCell-head { color: var(--on-ink-2) !important; font-weight: 600; }
.MuiChip-colorPrimary,
.MuiChip-colorSecondary { color: var(--on-ink) !important; background: var(--on-sunk) !important; }
.MuiPaginationItem-root.Mui-selected { color: var(--on-sheet) !important; background: var(--on-ink) !important; }

button:focus-visible,
a:focus-visible,
input[type='checkbox']:focus-visible,
.MuiButtonBase-root.Mui-focusVisible {
  outline: 2px solid var(--on-ink) !important;
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .MuiAppBar-root + .MuiGrid-container { padding: 16px 16px 32px; }
  .MuiAppBar-root + .MuiGrid-container > .MuiContainer-root { padding: 22px 18px 20px !important; }
  .MuiDialog-paper { margin: 16px !important; max-width: calc(100% - 32px) !important; }
  #second-factor-stage .MuiContainer-root > .MuiGrid-container > .MuiGrid-root > .MuiGrid-container > .MuiBox-root {
    min-width: 0 !important;
    padding: 20px 12px !important;
  }
}
@media (max-height: 600px) {
  .MuiAppBar-root + .MuiGrid-container { align-items: flex-start; padding-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
@media (forced-colors: active) {
  .MuiAppBar-root + .MuiGrid-container > .MuiContainer-root { border-color: CanvasText; box-shadow: none; }
  .MuiButton-contained { border-color: ButtonText; }
  button:focus-visible, a:focus-visible, .MuiButtonBase-root.Mui-focusVisible {
    outline-color: Highlight !important;
  }
}