/* ==========================================================================
   Authelia — Vercel-style theme
   auth.rosie.city

   Inter is referenced first in the stack but is not served (CSP is
   `style-src 'self'`, which blocks Google Fonts). It renders as Inter only on
   machines that have it installed locally; everyone else gets the system UI
   font. To serve it for real, drop InterVariable.woff2 at /fonts/ and
   uncomment the @font-face below.
   ========================================================================== */

/*
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/InterVariable.woff2') format('woff2');
}
*/

:root {
  --bg:            #000000;
  --bg-subtle:     #0e0e0e;
  --bg-elevated:   #0a0a0a;
  --fg:            #ffffff;
  --fg-muted:      #a1a1a1;
  --fg-faint:      #6e6e6e;
  --border:        #262626;
  --border-hover:  #404040;
  --accent:        #0070f3;
  --danger:        #ff4d4f;
  --danger-bg:     rgba(255, 77, 79, 0.10);

  --radius:        6px;
  --radius-lg:     12px;

  /* --- Vertical rhythm -------------------------------------------------
     Spacing is driven by `gap` on flex columns, never by margins on the
     children. MUI stacks margins, negative margins and grid padding on top
     of each other, which is what produced gaps of 43 / 19 / 16 / 36 / 16px
     where a single scale was intended. Children are zeroed; only these
     three numbers decide the layout. */
  --gap-row:       18px;  /* between rows inside the form */
  --gap-section:   24px;  /* title -> form */
  --label-space:   22px;  /* reserved above each field for its label */
  --footer-h:      56px;

  /* --- Type scale ---------------------------------------------------- */
  --text-title:    20px;
  --text-body:     14px;
  --text-label:    13px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:           #ffffff;
    --bg-subtle:    #fafafa;
    --bg-elevated:  #ffffff;
    --fg:           #000000;
    --fg-muted:     #666666;
    --fg-faint:     #8f8f8f;
    --border:       #eaeaea;
    --border-hover: #a3a3a3;
    --danger:       #e00000;
    --danger-bg:    rgba(224, 0, 0, 0.06);
  }
}

/* ==========================================================================
   1. De-Material
   ========================================================================== */

.MuiPaper-root {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--fg) !important;
}

.MuiTouchRipple-root,
.MuiTouchRipple-ripple,
.MuiTouchRipple-child { display: none !important; }

.MuiButton-root::before,
.MuiButton-root::after,
.MuiIconButton-root::before,
.MuiIconButton-root::after { display: none !important; }

.MuiAppBar-root {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  flex: 0 0 auto !important;
}

/* The Toolbar ships with align-items:flex-start, which pinned the language
   button to the very top of the 56px bar (it sat at y0–28, not y14–42).
   That's the "too far up" — it was never the icon inside it. */
.MuiAppBar-root .MuiToolbar-root {
  min-height: var(--footer-h) !important;
  height: var(--footer-h) !important;
  align-items: center !important;
  padding: 0 18px !important;
}

/* ==========================================================================
   2. Page frame
   #root is a flex column, but its only real child is a MuiBox shipping as
   display:block, so height never propagated to the stage. Chain made flex
   end-to-end; footer clearance lives on the stage padding, not #root.
   ========================================================================== */

html {
  background-color: var(--bg) !important;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--bg) !important;
  color: var(--fg) !important;
  font-family: var(--font) !important;
  font-size: var(--text-body);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

#root {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex !important;
  flex-direction: column !important;
  background-color: var(--bg) !important;
}

#root > .MuiBox-root:not(.hidden) {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

/* Every stage (login, 2FA, consent, …) is a Grid container holding the card */
.MuiGrid-container:has(> .MuiContainer-maxWidthXs) {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 24px 16px calc(var(--footer-h) + 28px) !important;
  box-sizing: border-box !important;
}

.MuiTypography-root,
input, button, select, textarea,
.MuiInputBase-input { font-family: var(--font) !important; }

::selection { background: var(--accent); color: #fff; }

/* ==========================================================================
   3. Pre-load screen
   Authelia boots behind a react-spinners ScaleLoader — five 4x35px white
   bars, animated. Replaced with the plain "Loading" text alone.
   ========================================================================== */

#root > .MuiBox-root > .MuiGrid-container > .MuiGrid-root > .MuiBox-root > span {
  display: none !important;
}

#root > .MuiBox-root:not(.hidden) > .MuiGrid-container:not(:has(.MuiContainer-maxWidthXs)) {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  width: 100% !important;
}

#root > .MuiBox-root > .MuiGrid-container > .MuiGrid-root > .MuiBox-root > .MuiTypography-root {
  font-size: var(--text-body) !important;
  font-weight: 400 !important;
  color: var(--fg-muted) !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

/* ==========================================================================
   4. The card
   ========================================================================== */

.MuiContainer-root.MuiContainer-maxWidthXs {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 30px 28px !important;
  margin: 0 auto !important;
  max-width: 384px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (prefers-color-scheme: light) {
  .MuiContainer-root.MuiContainer-maxWidthXs {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05) !important;
  }
}

/* The stock header glyph — a big circular clip-art person. Gone. */
#UserSvg { display: none !important; }

/* --- The two stacks that own all vertical spacing --------------------- */

/* Outer: title -> form */
.MuiContainer-maxWidthXs > .MuiGrid-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: var(--gap-section) !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Inner: one row per field / control */
#form-login > .MuiGrid-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: var(--gap-row) !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Every child of either stack is zeroed — gap alone decides spacing */
.MuiContainer-maxWidthXs > .MuiGrid-container > .MuiGrid-root,
#form-login > .MuiGrid-container > .MuiGrid-root {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex-basis: auto !important;
  min-width: 0 !important;
}

/* #form-login is itself a .MuiFormControl-root — it must not take the
   label padding that real fields get in §6. */
#form-login {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  display: block !important;
}

/* A little extra air before the primary action */
.MuiGrid-root:has(> #sign-in-button) { margin-top: 6px !important; }

/* ==========================================================================
   5. Typography
   ========================================================================== */

.MuiTypography-h4,
.MuiTypography-h5,
.MuiTypography-h6 {
  font-size: var(--text-title) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
  color: var(--fg) !important;
  margin: 0 !important;
  text-align: center;
}

.MuiTypography-body1 {
  font-size: var(--text-body) !important;
  line-height: 1.55 !important;
  color: var(--fg-muted) !important;
  letter-spacing: -0.01em !important;
}

.MuiTypography-body2,
.MuiTypography-caption {
  font-size: var(--text-label) !important;
  color: var(--fg-faint) !important;
}

/* ==========================================================================
   6. Inputs

   The label used to be translated up and out of the control's box, so it
   overflowed into whatever sat above and its spacing depended on margins
   colliding. Instead the control reserves --label-space as padding and the
   label sits at top:0 inside it. Nothing overflows, and `gap` in §4 controls
   the distance between rows exactly.
   ========================================================================== */

.MuiFormControl-root,
.MuiTextField-root {
  margin: 0 !important;
  padding-top: var(--label-space) !important;
  width: 100% !important;
  position: relative !important;
}

.MuiInputLabel-root,
.MuiInputLabel-outlined,
.MuiInputLabel-root.MuiInputLabel-shrink,
.MuiInputLabel-root.Mui-focused {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  transition: color 0.15s ease !important;
  font-size: var(--text-label) !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  letter-spacing: -0.01em !important;
  color: var(--fg-muted) !important;
  max-width: none !important;
  pointer-events: none;
}

.MuiInputLabel-root.Mui-focused { color: var(--fg) !important; }
.MuiInputLabel-root.Mui-error   { color: var(--danger) !important; }

.MuiFormLabel-asterisk,
.MuiInputLabel-asterisk { display: none !important; }

.MuiOutlinedInput-notchedOutline legend {
  display: none !important;
  max-width: 0 !important;
  width: 0 !important;
}

.MuiOutlinedInput-root {
  border-radius: var(--radius) !important;
  background-color: var(--bg) !important;
  font-size: var(--text-body) !important;
  transition: box-shadow 0.15s ease !important;
}

.MuiOutlinedInput-notchedOutline {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  top: 0 !important;
  transition: border-color 0.15s ease !important;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--border-hover) !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--accent) !important;
  border-width: 1px !important;
}

.MuiOutlinedInput-root.Mui-focused {
  box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.22) !important;
}

.MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline {
  border-color: var(--danger) !important;
}

.MuiOutlinedInput-root.Mui-error.Mui-focused {
  box-shadow: 0 0 0 3px var(--danger-bg) !important;
}

.MuiOutlinedInput-input,
.MuiInputBase-input {
  padding: 10px 12px !important;
  height: 20px !important;
  color: var(--fg) !important;
  font-size: var(--text-body) !important;
  letter-spacing: -0.01em !important;
}

.MuiInputBase-input::placeholder { color: var(--fg-faint) !important; opacity: 1; }

.MuiInputBase-input:-webkit-autofill,
.MuiInputBase-input:-webkit-autofill:hover,
.MuiInputBase-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fg) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset !important;
  caret-color: var(--fg);
  transition: background-color 9999s ease-in-out 0s;
}

.MuiInputAdornment-root { margin-left: 0 !important; }

.MuiInputAdornment-root .MuiIconButton-root {
  color: var(--fg-faint) !important;
  padding: 6px !important;
  margin-right: 3px !important;
  border-radius: 4px !important;
}

.MuiInputAdornment-root .MuiIconButton-root:hover {
  color: var(--fg) !important;
  background-color: transparent !important;
}

.MuiInputAdornment-root .MuiSvgIcon-root { font-size: 18px !important; }

.MuiFormHelperText-root {
  font-family: var(--font) !important;
  font-size: 12px !important;
  margin: 6px 0 0 !important;
  color: var(--fg-faint) !important;
}

.MuiFormHelperText-root.Mui-error { color: var(--danger) !important; }

/* ==========================================================================
   7. Buttons
   ========================================================================== */

.MuiButton-root {
  font-family: var(--font) !important;
  font-size: var(--text-body) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, opacity 0.15s ease !important;
}

.MuiButton-contained,
.MuiButton-containedPrimary {
  background-color: var(--fg) !important;
  color: var(--bg) !important;
  border: 1px solid var(--fg) !important;
}

.MuiButton-contained:hover,
.MuiButton-containedPrimary:hover {
  background-color: var(--fg) !important;
  opacity: 0.84;
  box-shadow: none !important;
}

.MuiButton-outlined,
.MuiButton-outlinedPrimary,
.MuiButton-outlinedSecondary {
  background-color: transparent !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
}

.MuiButton-outlined:hover {
  background-color: transparent !important;
  border-color: var(--fg) !important;
}

.MuiButton-text { color: var(--fg-muted) !important; background: transparent !important; }
.MuiButton-text:hover { color: var(--fg) !important; background-color: var(--bg-subtle) !important; }

.MuiButton-contained.Mui-disabled {
  opacity: 0.45 !important;
  color: var(--bg) !important;
  background-color: var(--fg) !important;
}

.MuiButton-outlined.Mui-disabled,
.MuiButton-text.Mui-disabled { opacity: 0.45 !important; }

.MuiButton-fullWidth { width: 100% !important; }

.MuiIconButton-root {
  color: var(--fg-muted) !important;
  border-radius: var(--radius) !important;
  transition: color 0.15s ease, background-color 0.15s ease !important;
}

.MuiIconButton-root:hover { color: var(--fg) !important; background-color: var(--bg-subtle) !important; }

/* --- Language switcher ------------------------------------------------
   The globe inherits MUI's 24px fontSizeMedium next to 13px text. 16px was
   too far the other way; 20px keeps it legible while still reading as one
   control with the label. */
#language-button {
  gap: 8px !important;
  padding: 6px 10px !important;
  font-size: var(--text-label) !important;
  line-height: 1 !important;
  align-items: center !important;
}

#language-button .MuiSvgIcon-root,
#language-button .MuiSvgIcon-fontSizeMedium {
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  flex: 0 0 auto !important;
}

#language-button .MuiTypography-root {
  font-size: var(--text-label) !important;
  line-height: 20px !important;
  color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   8. The loader on the sign-in button
   MUI draws the spinner in currentColor (white-on-white on the inverted
   button) and lays it out inline, which pads the button and shoves the label
   sideways. Pinned dead centre, label faded out, width unchanged.
   ========================================================================== */

#sign-in-button,
.MuiButton-root.MuiLoadingButton-root,
.MuiButton-root:has(> .MuiCircularProgress-root) { position: relative !important; }

.MuiLoadingButton-root.MuiLoadingButton-loading,
.MuiButton-root:has(> .MuiCircularProgress-root) {
  color: transparent !important;
  padding: 0 14px !important;
}

.MuiLoadingButton-loadingIndicator,
.MuiLoadingButton-loadingIndicatorStart,
.MuiLoadingButton-loadingIndicatorEnd,
.MuiButton-root > .MuiCircularProgress-root {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}

.MuiButton-contained .MuiCircularProgress-root,
.MuiButton-contained .MuiLoadingButton-loadingIndicator,
.MuiLoadingButton-root.MuiButton-contained .MuiCircularProgress-svg {
  color: var(--bg) !important;
}

.MuiButton-outlined .MuiCircularProgress-root,
.MuiButton-text .MuiCircularProgress-root { color: var(--fg) !important; }

.MuiButton-root .MuiCircularProgress-root { width: 16px !important; height: 16px !important; }

.MuiCircularProgress-circle { stroke-width: 4 !important; stroke-linecap: round !important; }
.MuiCircularProgress-root { color: var(--fg) !important; }

.MuiLinearProgress-root {
  height: 3px !important;
  border-radius: 999px !important;
  background-color: var(--border) !important;
}

.MuiLinearProgress-bar { background-color: var(--fg) !important; border-radius: 999px !important; }

/* ==========================================================================
   9. Links + "Reset password?"
   ========================================================================== */

.MuiLink-root, a {
  color: var(--fg-muted) !important;
  text-decoration: none !important;
  font-size: var(--text-label) !important;
  font-weight: 500 !important;
  transition: color 0.15s ease !important;
}

.MuiLink-root:hover, a:hover { color: var(--fg) !important; text-decoration: none !important; }

.MuiLink-button {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  cursor: pointer;
}

/* Its row is display:flex + justify-content:flex-end, which is why it sat
   hard right and text-align did nothing to it. */
.MuiGrid-root:has(> #reset-password-button) {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

#reset-password-button { color: var(--fg-faint) !important; line-height: 1.4 !important; }
#reset-password-button:hover { color: var(--fg) !important; }

/* ==========================================================================
   10. "Remember me"
   MUI pads the control itself, so the square sat ~6px right of the field
   edge. The negative margin cancels that padding and lines it up flush.
   ========================================================================== */

.MuiGrid-root:has(> .MuiFormControlLabel-root) {
  display: flex !important;
  align-items: center !important;
}

.MuiFormControlLabel-root {
  margin-left: -7px !important;
  margin-right: 0 !important;
  gap: 2px;
}

.MuiFormControlLabel-label {
  font-family: var(--font) !important;
  font-size: var(--text-label) !important;
  line-height: 16px !important;
  color: var(--fg-muted) !important;
  letter-spacing: -0.01em !important;
  user-select: none;
}

.MuiCheckbox-root {
  padding: 6px !important;
  color: var(--border-hover) !important;
  border-radius: 4px !important;
}

.MuiCheckbox-root:hover { background-color: transparent !important; color: var(--fg-muted) !important; }
.MuiCheckbox-root.Mui-checked { color: var(--accent) !important; }
.MuiCheckbox-root .MuiSvgIcon-root { font-size: 18px !important; }

/* ==========================================================================
   11. Footer — "rosie.city / authelia"
   Authelia's "Powered by Authelia" node is already an <a> to authelia.com,
   so it IS the footer: relabelled, lifted out of the card, pinned to the
   bottom. Real link, still opens in a new tab, attribution kept.

   MUI puts an explicit width:33.33% on the grid cell, which beat left:0 /
   right:0 and left the bar shrink-wrapped to a third of the page — that's
   why it looked left-aligned. width:auto is what lets it stretch.
   ========================================================================== */

/* Fallback: the authenticated page renders no anchors at all, so the link
   above doesn't exist there and the footer would simply vanish. This draws
   the same bar from <body> instead, and steps aside on any page where the
   real link is present. (CSS can't manufacture a link, so "authelia" is
   plain text on those pages rather than clickable.) */
body::after {
  content: 'rosie.city  /  authelia';
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--footer-h);
  background-color: var(--bg);
  color: var(--fg-faint);
  font-family: var(--font);
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  pointer-events: none;
}

body:has(a.MuiLink-root[href*='authelia'])::after { display: none !important; }

.MuiGrid-root:has(> a.MuiLink-root[href*='authelia']) {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  max-width: none !important;
  flex-basis: auto !important;
  z-index: 1200;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px;
  height: var(--footer-h);
  padding: 0 16px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background-color: var(--bg);
  font-size: var(--text-label);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.MuiGrid-root:has(> a.MuiLink-root[href*='authelia'])::before {
  content: 'rosie.city';
  order: 0;
  color: var(--fg-muted);
}

.MuiGrid-root:has(> a.MuiLink-root[href*='authelia'])::after {
  content: '/';
  order: 1;
  color: var(--border-hover);
}

.MuiGrid-root:has(> a.MuiLink-root[href*='authelia']) > a.MuiLink-root {
  order: 2;
  font-size: 0 !important;
  line-height: 1 !important;
  color: var(--fg-faint) !important;
}

.MuiGrid-root:has(> a.MuiLink-root[href*='authelia']) > a.MuiLink-root::after {
  content: 'authelia';
  font-size: var(--text-label);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.MuiGrid-root:has(> a.MuiLink-root[href*='authelia']) > a.MuiLink-root:hover {
  color: var(--fg) !important;
}

.MuiGrid-container:has(> .MuiGrid-root > a.MuiLink-root[href*='authelia']) {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   12. Menus + popovers
   The consent-list styling in §13 was also matching .MuiMenu-list, drawing a
   second bordered box inside the language popover with a 16px margin band.
   Menu lists are reset here and excluded there.
   ========================================================================== */

.MuiDialog-paper,
.MuiMenu-paper,
.MuiPopover-paper {
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
  background-image: none !important;
  max-height: min(60vh, 420px) !important;
}

.MuiMenu-list,
.MuiMenu-paper .MuiList-root,
.MuiPopover-paper .MuiList-root {
  border: 0 !important;
  background-color: transparent !important;
  margin: 0 !important;
  padding: 5px !important;
  border-radius: 0 !important;
}

.MuiMenuItem-root {
  font-family: var(--font) !important;
  font-size: var(--text-label) !important;
  line-height: 1.4 !important;
  border-radius: 4px !important;
  margin: 1px 0 !important;
  min-height: 32px !important;
  padding: 6px 10px !important;
  color: var(--fg-muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* The chevron on Filipino / português / 中文 — MUI's ExpandMore, which opens
   each language's regional variants (fil-PH, pt-BR, zh-CN …).

   Hide it by STRUCTURE, not by the emotion hash. `.mui-q7mezt` is shared by
   every MUI icon on the site — the language globe, the password-reveal eye,
   and the Remember-me checkbox glyph all carry it, so hiding that class
   hides those too. It's also regenerated whenever Authelia bumps MUI, so it
   silently stops matching on upgrade. This selector reaches only icons that
   are direct children of a menu item.

   To restore the chevron as a sized affordance instead of hiding it, swap
   `display: none` for the four commented properties below. */
.MuiMenuItem-root > .MuiSvgIcon-root {
  display: none !important;

  /* font-size: 16px !important;
     width: 16px !important;
     height: 16px !important;
     margin-left: auto !important;
     color: var(--fg-faint) !important; */
}

.MuiMenuItem-root:hover {
  background-color: var(--bg-subtle) !important;
  color: var(--fg) !important;
}

.MuiMenuItem-root.Mui-selected,
.MuiMenuItem-root.Mui-selected:hover {
  background-color: var(--bg-subtle) !important;
  color: var(--fg) !important;
  font-weight: 500 !important;
}

/* A 60-language list needs a scrollbar that isn't an eyesore */
.MuiMenu-paper,
.MuiPopover-paper {
  scrollbar-width: thin;
  scrollbar-color: var(--border-hover) transparent;
}

.MuiMenu-paper::-webkit-scrollbar,
.MuiPopover-paper::-webkit-scrollbar { width: 10px; }

.MuiMenu-paper::-webkit-scrollbar-track,
.MuiPopover-paper::-webkit-scrollbar-track { background: transparent; }

.MuiMenu-paper::-webkit-scrollbar-thumb,
.MuiPopover-paper::-webkit-scrollbar-thumb {
  background-color: var(--border-hover);
  border-radius: 999px;
  border: 3px solid var(--bg-elevated);
}

.MuiBackdrop-root { background-color: rgba(0, 0, 0, 0.5) !important; }
.MuiDivider-root  { border-color: var(--border) !important; }

/* ==========================================================================
   13. Consent / OpenID decision screen
   ========================================================================== */

/* Scoped to the auth card. Left unscoped, this panel styling also landed on
   the language popover's list and on the settings sidebar nav, drawing a
   bordered box inside each. */
.MuiContainer-maxWidthXs .MuiList-root:not(.MuiMenu-list) {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background-color: var(--bg-subtle) !important;
  margin: 0 !important;
  padding: 6px !important;
  width: 100%;
  box-sizing: border-box;
}

.MuiListItem-root,
.MuiListItemButton-root {
  border-radius: 4px !important;
  padding: 7px 10px !important;
  background: transparent !important;
}

.MuiListItemIcon-root { color: var(--fg-faint) !important; min-width: 28px !important; }
.MuiListItemIcon-root .MuiSvgIcon-root { font-size: 17px !important; }

.MuiListItemText-primary,
.MuiListItemText-root .MuiTypography-root {
  font-size: var(--text-label) !important;
  color: var(--fg-muted) !important;
  letter-spacing: -0.01em !important;
}

.MuiChip-root {
  border-radius: var(--radius) !important;
  font-family: var(--font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  height: 26px !important;
  background-color: var(--bg-subtle) !important;
  border: 1px solid var(--border) !important;
  color: var(--fg) !important;
}

/* The real ids, confirmed from the live DOM — #accept-button/#deny-button
   never existed on this page, so none of the rules meant for these two
   buttons were ever applying. That's the actual cause of three separate
   complaints: Deny falling through to the same filled-black style as
   Accept, and the row overflowing the card by 8px because MUI's
   `MuiGrid-spacing-xs-1` negative margins on the row were never reset. */
.MuiGrid-container.MuiGrid-spacing-xs-1 {
  margin: 0 !important;
  width: 100% !important;
  gap: 10px !important;
}

.MuiGrid-container.MuiGrid-spacing-xs-1 > .MuiGrid-root {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  flex: 1 1 0 !important;
  width: auto !important;
}

/* MUI wraps each button in an extra <span> (a Tooltip/Grow anchor) that was
   absolutely-ish sized independent of the button and contributing to the
   overflow. Made a plain full-width wrapper instead. */
.MuiGrid-container.MuiGrid-spacing-xs-1 > .MuiGrid-root > span {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

#openid-consent-accept,
#openid-consent-deny {
  width: 100% !important;
}

/* Accept stays the primary inverted-fill button (§7's default). Deny is
   visually secondary — a request you can decline shouldn't compete equally
   with the one you're expected to take. */
#openid-consent-deny.MuiButton-containedSecondary {
  background-color: transparent !important;
  color: var(--fg-muted) !important;
  border: 1px solid var(--border) !important;
}

#openid-consent-deny.MuiButton-containedSecondary:hover {
  background-color: var(--bg-subtle) !important;
  border-color: var(--border-hover) !important;
  color: var(--fg) !important;
  opacity: 1 !important;
}

/* The empty <ul> the consent stage renders between the scope list and the
   buttons whenever there's nothing further to show — it was still picking
   up the list-panel border/background from §13 and rendering as a stray
   14px sliver with no content. */
.MuiContainer-maxWidthXs .MuiList-root:empty {
  display: none !important;
}

/* --- Client identity + Logout / Switch User row ----------------------- */
.MuiGrid-container.MuiGrid-direction-xs-column > .MuiGrid-root:has(> .MuiBox-root > p:first-child) {
  text-align: center !important;
}

.MuiGrid-container.MuiGrid-direction-xs-column .MuiTypography-body1 {
  font-size: var(--text-body) !important;
  color: var(--fg-muted) !important;
}

/* Client name reads as a small heading, not body text */
.MuiGrid-root:has(> .MuiBox-root > p.MuiTypography-body1:only-child) p {
  font-size: var(--text-body) !important;
  font-weight: 600 !important;
  color: var(--fg) !important;
  letter-spacing: -0.01em !important;
}

/* #logout-button is reused verbatim by the standalone authenticated page
   (§15), which has its own rules for it further down. Same id, two
   different pages, so a bare `#logout-button` selector here would win or
   lose the cascade against §15 by file order alone rather than by which
   page is actually loaded. Scoped to "the Logout that sits next to a
   Switch User button" — true only on the consent page. */
#logout-button:has(+ #switch-user-button),
#switch-user-button {
  font-size: var(--text-label) !important;
  color: var(--fg-muted) !important;
  min-height: 32px !important;
  padding: 0 10px !important;
}

#logout-button:has(+ #switch-user-button):hover,
#switch-user-button:hover {
  color: var(--fg) !important;
  background-color: var(--bg-subtle) !important;
}

/* Centre the Logout / Switch User row */
.MuiGrid-root:has(> #logout-button:has(+ #switch-user-button)) {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 2px !important;
}

/* ==========================================================================
   14. Alerts + tooltips
   ========================================================================== */

.MuiAlert-root {
  font-family: var(--font) !important;
  font-size: var(--text-label) !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  padding: 8px 12px !important;
  align-items: center !important;
}

.MuiAlert-standardError,
.MuiAlert-filledError {
  background-color: var(--danger-bg) !important;
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}

.MuiAlert-standardSuccess,
.MuiAlert-standardInfo {
  background-color: rgba(0, 112, 243, 0.08) !important;
  border-color: rgba(0, 112, 243, 0.35) !important;
  color: var(--accent) !important;
}

.MuiAlert-icon { margin-right: 8px !important; padding: 0 !important; }

.MuiSnackbarContent-root {
  background-color: var(--fg) !important;
  color: var(--bg) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  font-family: var(--font) !important;
  font-size: var(--text-label) !important;
}

.MuiTooltip-tooltip {
  font-family: var(--font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  background-color: var(--fg) !important;
  color: var(--bg) !important;
  border-radius: 4px !important;
  padding: 5px 8px !important;
}

.MuiTooltip-arrow { color: var(--fg) !important; }

/* ==========================================================================
   15. Authenticated page

   Structure here is a nested column Grid that §4's two stacks don't reach,
   so it gets the same treatment: flex column, gap-driven, children zeroed.
   ========================================================================== */

.MuiContainer-maxWidthXs .MuiGrid-container.MuiGrid-direction-xs-column {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: var(--gap-row) !important;
  margin: 0 !important;
  width: 100% !important;
}

.MuiContainer-maxWidthXs .MuiGrid-container.MuiGrid-direction-xs-column > .MuiGrid-root {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex-basis: auto !important;
}

/* --- The status panel -------------------------------------------------
   Shipped with a hardcoded 1px solid #d6d6d6 border — near-white, and the
   loudest thing on the page. */
.MuiGrid-root:has(> .MuiBox-root > .MuiBox-root > .success-icon) {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background-color: var(--bg-subtle) !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  text-align: center;
}

.MuiBox-root:has(> .success-icon) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  margin-bottom: 12px !important;
}

/* Font Awesome, not MUI — fa-circle-check at fa-4x (64px) in a hardcoded
   rgb(0,128,0). Scaled down and recoloured to something that sits in the
   palette instead of shouting out of it. */
.success-icon,
svg.svg-inline--fa.fa-circle-check {
  width: 36px !important;
  height: 36px !important;
  color: #16a34a !important;
  font-size: 36px !important;
}

@media (prefers-color-scheme: dark) {
  .success-icon,
  svg.svg-inline--fa.fa-circle-check { color: #22c55e !important; }
}

.MuiGrid-root:has(> .MuiBox-root > .MuiBox-root > .success-icon) .MuiTypography-root {
  font-size: var(--text-label) !important;
  font-weight: 500 !important;
  color: var(--fg-muted) !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

/* --- Logout ----------------------------------------------------------
   Was a bare text button, indistinguishable from a caption. Given a real
   secondary-button shape without competing with a primary action. */
#logout-button {
  display: inline-flex !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background-color: transparent !important;
  color: var(--fg-muted) !important;
  font-size: var(--text-label) !important;
  font-weight: 500 !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  width: auto !important;
}

#logout-button:hover {
  border-color: var(--border-hover) !important;
  background-color: var(--bg-subtle) !important;
  color: var(--fg) !important;
}

/* Its grid row is a block — centre the button within it */
.MuiGrid-root:has(> #logout-button) {
  display: flex !important;
  justify-content: center !important;
}

/* --- Account button (top right) --------------------------------------
   The avatar shipped as #757575 on #303030 — grey text on grey, which is
   both illegible and the only circle left in the design. */
#account-menu {
  padding: 0 !important;
  border-radius: 8px !important;
  background-color: transparent !important;
}

#account-menu .MuiAvatar-root {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background-color: var(--bg-subtle) !important;
  border: 1px solid var(--border) !important;
  color: var(--fg-muted) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  transition: border-color 0.15s ease, color 0.15s ease,
              background-color 0.15s ease !important;
}

#account-menu:hover .MuiAvatar-root {
  border-color: var(--border-hover) !important;
  background-color: var(--bg-elevated) !important;
  color: var(--fg) !important;
}

#account-menu:focus-visible .MuiAvatar-root {
  border-color: var(--accent) !important;
}

/* ==========================================================================
   16. Logged-in / settings views
   ========================================================================== */

.MuiTableCell-root {
  font-family: var(--font) !important;
  font-size: var(--text-label) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--fg) !important;
  padding: 10px 12px !important;
}

.MuiTableCell-head {
  font-weight: 500 !important;
  font-size: 12px !important;
  color: var(--fg-faint) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.MuiTableRow-root:last-child .MuiTableCell-root { border-bottom: 0 !important; }

.MuiDrawer-paper {
  background-color: var(--bg) !important;
  border-right: 1px solid var(--border) !important;
}

code, pre {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
               'Liberation Mono', monospace !important;
  font-size: var(--text-label) !important;
  background-color: var(--bg-subtle) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  padding: 2px 5px !important;
}

/* ==========================================================================
   17. Settings — chrome, sidebar, panels
   ========================================================================== */

/* --- Top bar ---------------------------------------------------------- */
.MuiAppBar-root .MuiToolbar-root > .MuiTypography-h6 {
  font-size: 15px !important;
  font-weight: 600 !important;
  text-align: left !important;
  flex: 1 1 auto !important;
  margin-left: 6px !important;
  letter-spacing: -0.015em !important;
}

#settings-menu { margin-left: 0 !important; }
#settings-menu .MuiSvgIcon-root { font-size: 20px !important; }

/* main already sits below a 64px Toolbar spacer; the container was adding
   another 64px of padding on top of it. */
main > .MuiContainer-root { padding-top: 0 !important; }

main > .MuiToolbar-root { min-height: 56px !important; height: 56px !important; }

/* --- Sidebar ---------------------------------------------------------- */
.MuiDrawer-paper {
  width: 258px !important;
  background-color: var(--bg-elevated) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: none !important;
  background-image: none !important;
}

.MuiDrawer-paper > .MuiBox-root {
  padding: 14px 12px !important;
  box-sizing: border-box;
  width: 100% !important;
}

/* Drawer header */
.MuiDrawer-paper .MuiTypography-h6 {
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--fg-faint) !important;
  text-align: left !important;
  padding: 4px 10px 10px !important;
}

.MuiDrawer-paper .MuiDivider-root {
  border-color: var(--border) !important;
  margin: 0 0 8px !important;
}

/* The nav list itself carries no chrome — the drawer is the surface */
.MuiDrawer-paper .MuiList-root {
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* MUI wraps each row in a ListItem *and* a ListItemButton, stacking two sets
   of padding — 56px tall rows for 13px of text. The wrapper is flattened. */
.MuiDrawer-paper .MuiListItem-root {
  padding: 0 !important;
  margin: 0 0 2px !important;
  width: 100% !important;
  display: block !important;
}

.MuiDrawer-paper .MuiListItemButton-root {
  min-height: 36px !important;
  padding: 7px 10px !important;
  border-radius: var(--radius) !important;
  gap: 10px !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.MuiDrawer-paper .MuiListItemButton-root:hover {
  background-color: var(--bg-subtle) !important;
}

.MuiDrawer-paper .MuiListItemButton-root.Mui-selected,
.MuiDrawer-paper .MuiListItemButton-root.Mui-selected:hover {
  background-color: var(--bg-subtle) !important;
}

.MuiDrawer-paper .MuiListItemButton-root.Mui-selected .MuiListItemText-primary {
  color: var(--fg) !important;
  font-weight: 500 !important;
}

.MuiDrawer-paper .MuiListItemIcon-root {
  min-width: 0 !important;
  width: 18px !important;
  flex: 0 0 18px !important;
  color: var(--fg-faint) !important;
}

/* Every nav icon shipped in Material palette primary blue (#1976d2), and
   Close in Material error red (#f44336) — four saturated colours in a
   monochrome design. Muted to inherit the row's state instead. */
.MuiDrawer-paper .MuiListItemIcon-root .MuiSvgIcon-root,
.MuiDrawer-paper .MuiSvgIcon-colorPrimary,
.MuiDrawer-paper .MuiSvgIcon-colorError {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  color: var(--fg-faint) !important;
}

.MuiDrawer-paper .MuiListItemButton-root:hover .MuiSvgIcon-root,
.MuiDrawer-paper .MuiListItemButton-root.Mui-selected .MuiSvgIcon-root {
  color: var(--fg-muted) !important;
}

.MuiDrawer-paper .MuiListItemText-root { margin: 0 !important; }

.MuiDrawer-paper .MuiListItemText-primary {
  font-family: var(--font) !important;
  font-size: var(--text-label) !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  color: var(--fg-muted) !important;
  letter-spacing: -0.01em !important;
}

/* "Close" is a dismiss action, not a destination — set apart from the nav */
#settings-menu-close { margin-top: 6px !important; }

/* --- Content panels --------------------------------------------------- */

/* §1 strips every Paper; outlined Papers are real cards and get it back */
main .MuiPaper-outlined,
main .MuiPaper-elevation1 {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  background-color: var(--bg-elevated) !important;
  box-shadow: none !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 560px !important;
}

main .MuiPaper-root .MuiTypography-h4 {
  font-size: 19px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
  margin: 0 0 8px !important;
}

main .MuiPaper-root .MuiTypography-body1 {
  font-size: var(--text-body) !important;
  line-height: 1.6 !important;
  color: var(--fg-muted) !important;
  text-align: left !important;
  margin: 0 0 6px !important;
}

/* --- Security: the read-only account rows ----------------------------- */
/* Shipped at 1px solid #757575 — mid-grey, heavier than any real border in
   the design, on boxes only 192px wide inside a 654px column. */
main .MuiStack-root .MuiBox-root[class*='mui-'] {
  border-color: var(--border) !important;
}

main .MuiStack-root > .MuiBox-root {
  width: 100% !important;
  padding: 0 !important;
}

main .MuiStack-root > .MuiBox-root > .MuiBox-root {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background-color: var(--bg-subtle) !important;
  padding: 10px 12px !important;
  margin-bottom: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

main .MuiStack-root .MuiTypography-body1 {
  font-size: var(--text-label) !important;
  color: var(--fg-muted) !important;
  margin: 0 !important;
}

#change-password-button { width: 100% !important; margin-top: 4px !important; }

/* --- Two-factor empty state ------------------------------------------- */
/* Rendered as a 20px/600 heading, which reads as a page title announcing a
   problem. It's an empty state — demoted to body text. */
main .MuiPaper-elevation1 > .MuiTypography-h6 {
  font-size: var(--text-body) !important;
  font-weight: 400 !important;
  color: var(--fg-muted) !important;
  text-align: center !important;
  line-height: 1.6 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

main .MuiPaper-elevation1 { padding: 28px 24px !important; }

/* ==========================================================================
   18. Copy fixes  (English only)

   Scoped to html[lang^='en'] so the other 60 locales keep their own strings
   — a bare rule here would overwrite every translation with English.

   CAVEAT: the original text stays in the DOM and screen readers may announce
   both it and the replacement. The correct fix is Authelia's locale override
   (drop a `locales/en/portal.json` into your assets directory and edit the
   strings there); this is a stopgap that keeps everything in one CSS file.
   Delete this whole section if you'd rather do it properly.
   ========================================================================== */

/* "This is the user settings area at the present time it's very minimal but
   will include new features in the near future" — one run-on sentence with a
   comma splice and no punctuation between the clauses. */
html[lang^='en'] main .MuiPaper-root p.MuiTypography-body1:nth-of-type(1) {
  font-size: 0 !important;
  line-height: 0 !important;
}

html[lang^='en'] main .MuiPaper-root p.MuiTypography-body1:nth-of-type(1)::after {
  content: 'Manage your account and how you sign in. This area is minimal for now — more options are on the way.';
  display: block;
  font-size: var(--text-body);
  line-height: 1.6;
  letter-spacing: -0.01em;
}

/* "To view the currently available options select the menu icon at the top
   left" — instruction buried behind a subordinate clause. */
html[lang^='en'] main .MuiPaper-root p.MuiTypography-body1:nth-of-type(2) {
  font-size: 0 !important;
  line-height: 0 !important;
}

html[lang^='en'] main .MuiPaper-root p.MuiTypography-body1:nth-of-type(2)::after {
  content: 'Open the menu at the top left to see what’s available.';
  display: block;
  font-size: var(--text-body);
  line-height: 1.6;
  letter-spacing: -0.01em;
}

/* "There are no protected applications that require a second factor method"
   — passive, and "second factor method" is jargon doubled up. */
html[lang^='en'] main .MuiPaper-elevation1 > .MuiTypography-h6 {
  font-size: 0 !important;
  line-height: 0 !important;
}

html[lang^='en'] main .MuiPaper-elevation1 > .MuiTypography-h6::after {
  content: 'No applications require two-factor authentication yet.';
  display: block;
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--fg-muted);
}

/* ==========================================================================
   19. Responsive
   ========================================================================== */

@media (max-width: 600px) {
  .MuiGrid-container:has(> .MuiContainer-maxWidthXs) {
    padding: 16px 16px calc(var(--footer-h) + 16px) !important;
  }

  .MuiContainer-root.MuiContainer-maxWidthXs {
    padding: 26px 20px !important;
    max-width: none !important;
    border-radius: 10px !important;
  }

  /* Comfortable tap targets */
  .MuiButton-root { min-height: 42px !important; }
  .MuiInputAdornment-root .MuiIconButton-root { padding: 8px !important; }

  .MuiMenu-paper,
  .MuiPopover-paper { max-height: 55vh !important; }

  /* Sidebar shouldn't eat the whole narrow viewport */
  .MuiDrawer-paper { width: min(80vw, 258px) !important; }

  main { padding: 16px !important; }
  main .MuiPaper-outlined,
  main .MuiPaper-elevation1 { padding: 20px !important; }
}

/* Landscape phones: unpin the footer so it can never cover the form */
@media (max-height: 560px) {
  .MuiGrid-root:has(> a.MuiLink-root[href*='authelia']) {
    position: static !important;
    height: 48px;
  }

  .MuiGrid-container:has(> .MuiContainer-maxWidthXs) {
    padding: 16px 0 !important;
  }
}

@media (max-width: 360px) {
  .MuiContainer-root.MuiContainer-maxWidthXs { padding: 22px 16px !important; }
  .MuiGrid-container:has(> .MuiContainer-maxWidthXs) {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ==========================================================================
   20. Accessibility
   ========================================================================== */

.MuiButtonBase-root:focus-visible,
.MuiLink-root:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  /* A spinner frozen on frame one is broken, not calm — keep it turning */
  .MuiCircularProgress-root,
  .MuiCircularProgress-svg,
  .MuiCircularProgress-circle,
  .MuiLinearProgress-bar,
  .MuiLinearProgress-bar1Indeterminate,
  .MuiLinearProgress-bar2Indeterminate {
    animation-duration: 2s !important;
    animation-iteration-count: infinite !important;
  }
}