/* RevolutionX branding for the Authelia portal.
 *
 * Tokens taken from revolutionx.tech directly (computed styles, not guesswork):
 *
 *   page            #080911
 *   brand gradient  #3939ff -> #5ff2ac @49% -> #9cf2d1
 *   field           #141327 on a #1f2c3a border, 8px radius
 *   primary CTA     white pill, black text, 200px radius
 *   secondary CTA   rgba(47,37,85,.42) on a #2c1f3a border, same pill
 *   type            Inter, 600 for headings
 *
 * Authelia has NO supported hook for custom CSS -- `asset_path` overrides only
 * favicon.ico, logo.png and locales -- so nginx injects this file as a
 * same-origin <link>. Authelia's CSP (`style-src 'self' 'nonce-...'`, with no
 * 'unsafe-inline') blocks an injected <style> block, which is why the older
 * sub_filter recipes stopped working at 4.39. Same-origin assets are fine, so
 * the font and the logo are served from this origin too -- nothing here needs
 * the CSP relaxed.
 *
 * THIS FILE ASSUMES `theme: 'dark'` IN configuration.yml. The brand is dark-only
 * (the wordmark is solid white and the glows need a dark ground), so the portal
 * is pinned to dark rather than following the OS. If that setting is ever
 * reverted to `auto`, a light-mode visitor gets MUI's dark-on-light text over
 * this dark background and the page becomes unreadable. The two go together.
 *
 * Rules of engagement, unchanged from the first version and still the point:
 * COSMETIC ONLY -- nothing that positions or hides an element a person has to
 * click. This vhost is the front door to every service on the box, so a stale
 * selector after an Authelia upgrade must degrade to a plain-looking portal,
 * never an unusable one. Prefer Authelia's own IDs (#sign-in-button,
 * #username-textfield, [id$="-stage"]); never target `mui-ik1sxq` style classes,
 * which are emotion build hashes that change every release.
 */

@font-face {
  font-family: 'InterMoon';
  /* Self-hosted: `default-src 'self'` covers font-src, so Google Fonts would be
   * blocked outright. This is the latin subset of Inter variable, one file for
   * the whole 400-700 range. */
  src: url('/moon-theme.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --rx-bg:      #080911;
  --rx-card:    rgba(14, 15, 28, 0.72);
  --rx-field:   #141327;
  --rx-line:    #1f2c3a;
  --rx-edge:    rgba(255, 255, 255, 0.09);
  --rx-fg:      #ffffff;
  --rx-mut:     rgba(255, 255, 255, 0.55);
  --rx-blue:    #3939ff;
  --rx-mint:    #5ff2ac;
  --rx-pale:    #9cf2d1;
  --rx-grad:    linear-gradient(90deg, #3939ff, #5ff2ac 49%, #9cf2d1);
  --rx-font:    'InterMoon', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---- the glows ---------------------------------------------------------- */
/* Painted as background layers on <body> rather than a positioned pseudo
 * element. A ::before would need a z-index and a stacking context on #root to
 * stay behind the form -- layout risk, on the one page that must never break.
 * A background always paints behind content by definition, so this is the same
 * effect with none of that exposure. `fixed` keeps them still while a tall
 * stage (the WebAuthn prompt) scrolls. */
body {
  background-color: var(--rx-bg) !important;
  background-image:
    radial-gradient(42rem 30rem at 10% 2%,  rgba(57, 57, 255, 0.30), transparent 68%),
    radial-gradient(36rem 26rem at 90% 8%,  rgba(95, 242, 172, 0.14), transparent 68%),
    radial-gradient(46rem 34rem at 62% 96%, rgba(57, 57, 255, 0.16), transparent 70%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  color: var(--rx-fg) !important;
}

/* MUI hard-codes Roboto on nearly every text node, so Inter has to be
 * reasserted broadly rather than inherited. The stack falls back to system-ui
 * if the woff2 ever 404s. */
body,
.MuiTypography-root, .MuiButton-root, .MuiInputBase-root,
.MuiFormLabel-root, .MuiFormControlLabel-root, .MuiLink-root, .MuiAlert-root {
  font-family: var(--rx-font) !important;
}

/* ---- the card ----------------------------------------------------------- */
/* Translucent so the glows read through it, with a hairline of the brand
 * gradient across the top. One selector covers first-factor, second-factor and
 * both reset-password steps. */
[id$="-stage"] > .MuiContainer-root {
  position: relative;
  /* `visible`, not `hidden`: the wordmark is positioned above the card's top
   * edge and would be clipped away otherwise. The gradient hairline is inset
   * from the corners instead of relying on overflow to clip it. */
  overflow: visible;
  /* Room above the card for the wordmark to sit in. */
  margin-top: 4.5rem;
  background: var(--rx-card);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  border: 1px solid var(--rx-edge);
  border-radius: 16px;
  padding: 2.25rem 1.75rem 1.75rem;
  box-shadow: 0 24px 70px -24px rgba(0, 0, 0, 0.9);
}
[id$="-stage"] > .MuiContainer-root::before {
  content: '';
  position: absolute;
  /* Inset by the corner radius so the hairline stops short of the curve --
   * with overflow visible there is nothing to clip it, and a full-width line
   * would overhang the rounded corners. */
  top: 0; left: 16px; right: 16px;
  height: 1px;
  background: var(--rx-grad);
}

/* ---- the wordmark ------------------------------------------------------- */
/* Authelia's decorative avatar is turned into a box carrying the RevolutionX
 * wordmark, rather than hidden and replaced. Its own <path> is what gets
 * dropped, so the element -- and therefore the layout around it -- stays put.
 * SVG on purpose: it stays crisp at any density, which a rasterised logo.png
 * through `asset_path` would not. */
/* Lifted OUT of the card and centred above it. Taking it out of flow (rather
 * than nudging it with margins) means the card's internal spacing collapses on
 * its own -- the heading simply becomes the first item -- instead of needing
 * the padding retuned to compensate.
 *
 * Positioning a decorative element is the one deviation from "cosmetic only",
 * and it degrades safely: if a future Authelia renames this element, none of
 * these rules match, `path { display:none }` stops applying too, and the stock
 * avatar returns to its normal place inside the card. Nothing becomes unusable. */
#UserSvg {
  position: absolute;
  bottom: calc(100% + 1.6rem);
  left: 50%;
  transform: translateX(-50%);
  width: 190px !important;
  height: 34px !important;
  background: url('/moon-theme-logo.svg') center / contain no-repeat;
  opacity: 0.96;
}
#UserSvg path { display: none; }

/* ---- headings ----------------------------------------------------------- */
[id$="-stage"] .MuiTypography-h5 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--rx-fg);
}

/* ---- fields ------------------------------------------------------------- */
.MuiOutlinedInput-root {
  border-radius: 8px;
  background: var(--rx-field);
  font-size: 0.95rem;
}
.MuiOutlinedInput-notchedOutline { border-color: var(--rx-line) !important; }
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: rgba(95, 242, 172, 0.45) !important;
}
/* Focus is the one place the brand blue appears on a control -- a coloured ring
 * rather than MUI's heavier 2px outline. */
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-width: 1px !important;
  border-color: var(--rx-blue) !important;
  box-shadow: 0 0 0 3px rgba(57, 57, 255, 0.22);
}
.MuiInputBase-input { color: var(--rx-fg) !important; }
.MuiFormLabel-root { color: var(--rx-mut) !important; font-size: 0.95rem; }
.MuiFormLabel-root.Mui-focused { color: var(--rx-pale) !important; }
.MuiIconButton-root { color: var(--rx-mut) !important; }

/* ---- buttons ------------------------------------------------------------ */
/* The site's primary CTA is a white pill with black text; the secondary is a
 * dark translucent pill with a border. Authelia's sign-in/reset map onto the
 * first and cancel onto the second. */
.MuiButton-containedPrimary {
  background: var(--rx-fg) !important;
  color: #000 !important;
  border-radius: 200px;
  box-shadow: none !important;
  text-transform: none;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0;
  padding: 0.55rem 1.25rem;
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.MuiButton-containedPrimary:hover {
  background: var(--rx-fg) !important;
  box-shadow: 0 0 28px -4px rgba(95, 242, 172, 0.45);
}

/* Reset and Cancel carry byte-identical MUI classes -- both are
 * `containedPrimary` -- so the id is the only thing that tells them apart.
 * Without this the reset page shows two equally loud white pills. */
#cancel-button,
button[id*="cancel"] {
  background: rgba(47, 37, 85, 0.42) !important;
  color: var(--rx-fg) !important;
  border: 2px solid #2c1f3a;
  box-shadow: none !important;
}
#cancel-button:hover,
button[id*="cancel"]:hover {
  background: rgba(47, 37, 85, 0.62) !important;
  border-color: #3a2a4d;
  box-shadow: none !important;
}

/* ---- secondary actions and chrome --------------------------------------- */
#reset-password-button,
.MuiButton-text {
  color: var(--rx-mut) !important;
  /* MUI already makes text buttons transparent; stated explicitly so the rule
   * does not depend on that staying true, and so the control never renders as
   * a filled box against the card. */
  background: transparent !important;
  text-transform: none;
  font-weight: 500;
}
#reset-password-button:hover { color: var(--rx-pale) !important; background: transparent !important; }

.MuiCheckbox-root { color: var(--rx-mut) !important; }
.MuiCheckbox-root.Mui-checked { color: var(--rx-mint) !important; }
.MuiFormControlLabel-label { color: var(--rx-mut) !important; font-size: 0.88rem; }

#language-button { color: var(--rx-mut) !important; }

.MuiLink-root { color: var(--rx-mut) !important; }
.MuiLink-root:hover { color: var(--rx-pale) !important; }

/* ---- the Authelia credit ------------------------------------------------ */
/* Hidden, at the owner's direction. Authelia is Apache-2.0, which carries NO
 * user-interface attribution requirement: sections 4(c) and 4(d) govern
 * retaining notices when you DISTRIBUTE the work or a derivative of it, and
 * running it behind your own reverse proxy is neither. So this is a choice
 * rather than a legal question.
 *
 * Matched on the href, NOT on `.MuiLink-root`. The second-factor and settings
 * stages render their own links with that same class -- method switchers, a
 * logout link -- and a class-wide rule here would hide controls people need.
 *
 * The first rule always applies; the :has() one additionally removes the empty
 * grid row the hidden anchor would otherwise leave behind. If :has() is ever
 * unavailable the credit still goes, just with a little dead space.
 *
 * TO SHOW IT BELOW THE CARD INSTEAD, replace both rules with:
 *   [id$="-stage"] .MuiGrid-container > .MuiGrid-root:has(a[href*="authelia.com"]) {
 *     position: absolute; top: calc(100% + 1rem); left: 0; right: 0;
 *     display: flex; justify-content: center;
 *   }
 */
[id$="-stage"] a.MuiLink-root[href*="authelia.com"] { display: none; }
[id$="-stage"] .MuiGrid-container > .MuiGrid-root:has(a[href*="authelia.com"]) {
  display: none;
}

/* =========================================================================
 * The settings pages (/settings, /settings/security,
 * /settings/two-factor-authentication)
 *
 * These are NOT covered by the `[id$="-stage"]` rules above -- SettingsLayout
 * has no stage element at all. It is an AppBar + SwipeableDrawer + a
 * `Paper variant="outlined"` content panel, so without this block the settings
 * pages inherit the glows, Inter and the control styling but keep MUI's stock
 * chrome: a BLUE app bar across the top and blue/red drawer icons.
 *
 * Stable hooks here are `#settings-menu` (the hamburger) and
 * `#settings-menu-{overview,security,twofactor,close}` on the nav items.
 * ========================================================================= */

/* The app bar. Scoped to `colorPrimary` on purpose: the login portal's app bar
 * is `colorTransparent` and holds the language picker, and a rule on
 * `.MuiAppBar-root` would restyle that too. */
.MuiAppBar-colorPrimary {
  background: rgba(8, 9, 17, 0.72) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rx-edge);
  box-shadow: none !important;
  background-image: none !important;
  color: var(--rx-fg) !important;
}
#settings-menu { color: var(--rx-fg) !important; }

/* The drawer. `.MuiDrawer-paper` is the sliding surface itself; the backdrop
 * behind it is darkened so the glows do not read through the overlay. */
.MuiDrawer-paper {
  background: #0d0e1a !important;
  background-image: none !important;
  border-right: 1px solid var(--rx-edge) !important;
  color: var(--rx-fg) !important;
}
.MuiDrawer-root .MuiBackdrop-root { background-color: rgba(4, 4, 10, 0.72); }
.MuiDrawer-paper .MuiTypography-h6 { font-weight: 600; letter-spacing: -0.01em; }
.MuiDivider-root { border-color: var(--rx-edge) !important; }

/* Nav items. MUI ships these square and full-bleed; insetting and rounding
 * them matches the pill language used everywhere else in this theme. */
.MuiListItemButton-root {
  border-radius: 10px;
  margin: 2px 8px;
}
.MuiListItemButton-root:hover { background: rgba(255, 255, 255, 0.05) !important; }
.MuiListItemButton-root.Mui-selected {
  background: rgba(57, 57, 255, 0.18) !important;
  box-shadow: inset 2px 0 0 var(--rx-mint);
}
.MuiListItemButton-root.Mui-selected:hover { background: rgba(57, 57, 255, 0.26) !important; }
.MuiListItemText-primary { font-size: 0.92rem; }

/* The nav icons are `color="primary"` (MUI blue) and, for Close, `color="error"`
 * (MUI red). Both are overridden -- an off-palette blue and red either side of a
 * brand-coloured selection state is the single loudest thing on the page. */
.MuiListItemIcon-root { min-width: 40px; }
.MuiListItemIcon-root .MuiSvgIcon-root { color: var(--rx-mut) !important; }
.Mui-selected .MuiListItemIcon-root .MuiSvgIcon-root { color: var(--rx-mint) !important; }

/* The content panel. Same surface as the login card, including the gradient
 * hairline, so the two halves of the portal read as one product.
 * `.MuiPaper-outlined` is settings-specific: the app bar is a Paper too, but an
 * elevation one, and the login card is a Container rather than a Paper. */
.MuiPaper-outlined {
  position: relative;
  overflow: hidden;
  background: var(--rx-card) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  border: 1px solid var(--rx-edge) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 70px -24px rgba(0, 0, 0, 0.9);
  color: var(--rx-fg) !important;
}
.MuiPaper-outlined::before {
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 1px;
  background: var(--rx-grad);
}
.MuiPaper-outlined .MuiTypography-h4 {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}