/* ==========================================================================
   pradox.de branding override for Authelia login page
   Injected into auth.pradox.de via nginx sub_filter.
   Design tokens mirror /home/pradox/projects/misc/pradox.de/assets/css/main.css
   ========================================================================== */

/* === Self-hosted terminal font === */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/branding/fonts/JetBrainsMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/branding/fonts/JetBrainsMono-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/branding/fonts/JetBrainsMono-Bold.woff2') format('woff2');
}

:root {
  --pradox-bg: #0a0a0a;
  --pradox-bg-elev: #111113;
  --pradox-bg-elev-2: #161618;
  --pradox-border: rgba(255, 255, 255, 0.08);
  --pradox-border-strong: rgba(255, 255, 255, 0.16);
  --pradox-text: #f5f5f4;
  --pradox-text-muted: #a1a1aa;
  --pradox-accent: #facc15;
  --pradox-accent-soft: #fde047;
  --pradox-accent-glow: rgba(250, 204, 21, 0.18);
}

/* Body — solid dark base, gradient hint, font stack */
html, body {
  background: var(--pradox-bg) !important;
  color: var(--pradox-text);
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
}

/* Force JetBrains Mono on every text-bearing element MUI emits — covers
   inputs, buttons, labels, headings. */
input, button, textarea, select, label,
.MuiTypography-root, [class*="MuiTypography-root"],
.MuiInputBase-root, [class*="MuiInputBase-root"],
.MuiButton-root,    [class*="MuiButton-root"],
.MuiInputLabel-root,[class*="MuiInputLabel-root"],
.MuiFormLabel-root, [class*="MuiFormLabel-root"] {
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace !important;
  letter-spacing: -0.005em;
}

body {
  background:
    radial-gradient(1200px 800px at 70% -10%, rgba(250, 204, 21, 0.08), transparent 60%),
    radial-gradient(900px 600px at 0% 30%, rgba(250, 204, 21, 0.04), transparent 70%),
    var(--pradox-bg) !important;
  min-height: 100vh;
}

/* Neural-bg canvas — sits behind everything */
#pradox-neural-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

#root {
  position: relative;
  z-index: 1;
}

/* Brand header — pradox identity, mirrors pradox.de site-header.
   Bar layout: blurred dark surface, logo + wordmark left, fixed at top.
   The bar itself ignores pointer events so it doesn't shadow the login
   card; only the inner brand link receives pointer events (clickable). */
.pradox-brand-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: color-mix(in oklab, var(--pradox-bg) 75%, transparent);
  border-bottom: 1px solid var(--pradox-border);
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pradox-text);
  pointer-events: none;
}
.pradox-brand-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--pradox-text);
  text-decoration: none;
  pointer-events: auto;
}
.pradox-brand-header .brand:hover { color: var(--pradox-text); text-decoration: none; }
.pradox-brand-header .mark {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--pradox-accent);
  color: #111;
  border-radius: 8px;
  font-weight: 800;
  font-size: 17px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 6px 18px var(--pradox-accent-glow);
  animation: pradox-breathe 4s ease-in-out infinite;
}
.pradox-brand-header .mark img {
  display: block;
  width: 20px;
  height: 20px;
}

/* Subtle breathing pulse on the brand mark — yellow glow expand/contract */
@keyframes pradox-breathe {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.3),
      0 6px 18px rgba(250, 204, 21, 0.18);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.3),
      0 8px 28px rgba(250, 204, 21, 0.36);
    transform: scale(1.04);
  }
}

/* === SVG border-trace overlays for inputs and the sign-in button === */

/* The wrapper holds an SVG that overlays the host element. The SVG path is a
   rounded rectangle drawn around the host. dashoffset == dasharray hides it,
   transition to 0 reveals it (clockwise from top-left).
   NOTE: We use data-attributes instead of classes because Authelia is React
   and emotion replaces className on every re-render — data-* survives. */
[data-pradox-trace="1"] {
  position: relative;
}
.pradox-trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}
.pradox-trace path {
  fill: none;
  stroke: var(--pradox-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--pradox-tracelen, 1000);
  stroke-dashoffset: var(--pradox-tracelen, 1000);
  transition: stroke-dashoffset 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-pradox-active="1"] .pradox-trace path {
  stroke-dashoffset: 0;
}

/* On the yellow Sign-in button the default yellow trace would disappear.
   Use a contrast stroke (dark) and slightly thicker line for visibility. */
button[class*="MuiButton-contained"] .pradox-trace path {
  stroke: rgba(17, 17, 17, 0.85);
  stroke-width: 2.5;
}

/* Soften MUI's own focus ring so it doesn't fight the SVG trace. */
[data-pradox-trace="1"][class*="MuiOutlinedInput-root"].Mui-focused [class*="MuiOutlinedInput-notchedOutline"] {
  border-color: rgba(250, 204, 21, 0.25) !important;
  border-width: 1px !important;
}

/* MUI's notched outline punches a hole for the floating label, but our SVG
   trace is a continuous rectangle — so the label visually crosses the yellow
   line. Give the label a solid background that matches the page so the line
   appears interrupted behind it. Only kicks in when the label has floated up
   (Mui-shrink class) — when the label is still inline as placeholder, it
   stays transparent. */
[class*="MuiInputLabel-root"][class*="MuiInputLabel-shrink"],
[class*="MuiFormLabel-root"][class*="MuiFormLabel-filled"],
[class*="MuiInputLabel-outlined"][class*="MuiInputLabel-shrink"] {
  background-color: var(--pradox-bg) !important;
  padding: 0 6px !important;
  border-radius: 4px;
  z-index: 3;  /* sit above the SVG trace */
}

/* === Sign-in button: loading-state spinner === */

button[data-pradox-loading="1"] {
  position: relative;
  pointer-events: none;
}
button[data-pradox-loading="1"] > * {
  visibility: hidden;
}
button[data-pradox-loading="1"]::after {
  content: '';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* Animated pradox-eye loader — SMIL animations live inside the SVG file. */
  background-image: url("/branding/loader.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 32px 32px;
  visibility: visible;
}
.pradox-brand-header .name {
  font-size: 16px;
}
.pradox-brand-header .name .dot {
  color: var(--pradox-accent);
}

/* Authelia uses MUI: try to bend its theme variables to yellow accent.
   These cover MUI v5 emotion CSS-variables if present, else no-op. */
:root {
  --mui-palette-primary-main: var(--pradox-accent);
  --mui-palette-primary-light: var(--pradox-accent-soft);
  --mui-palette-primary-dark: #ca9b08;
  --mui-palette-primary-contrastText: #111;
  --mui-palette-secondary-main: var(--pradox-accent);
}

/* MUI Paper / Card — make it match the dark surface scheme */
.MuiPaper-root,
.MuiPaper-elevation,
[class*="MuiPaper-root"] {
  background-color: var(--pradox-bg-elev) !important;
  background-image: none !important;
  border: 1px solid var(--pradox-border) !important;
  border-radius: 14px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 8px 24px rgba(0, 0, 0, 0.5) !important;
  color: var(--pradox-text) !important;
}

/* Buttons — yellow on dark */
.MuiButton-root,
[class*="MuiButton-root"] {
  border-radius: 10px !important;
  text-transform: none !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
.MuiButton-contained,
.MuiButton-containedPrimary,
[class*="MuiButton-contained"] {
  background-color: var(--pradox-accent) !important;
  color: #111 !important;
  box-shadow: 0 6px 18px var(--pradox-accent-glow) !important;
}
.MuiButton-contained:hover,
[class*="MuiButton-contained"]:hover {
  background-color: var(--pradox-accent-soft) !important;
  box-shadow: 0 10px 26px rgba(250, 204, 21, 0.28) !important;
}
.MuiButton-outlined,
[class*="MuiButton-outlined"] {
  color: var(--pradox-text) !important;
  border-color: var(--pradox-border-strong) !important;
}

/* Inputs — dark with subtle border, yellow focus ring */
.MuiOutlinedInput-root,
[class*="MuiOutlinedInput-root"] {
  background-color: rgba(255, 255, 255, 0.03) !important;
  color: var(--pradox-text) !important;
  border-radius: 10px !important;
}
.MuiOutlinedInput-notchedOutline,
[class*="MuiOutlinedInput-notchedOutline"] {
  border-color: var(--pradox-border) !important;
}
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline,
[class*="MuiOutlinedInput-root"]:hover [class*="MuiOutlinedInput-notchedOutline"] {
  border-color: var(--pradox-border-strong) !important;
}
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline,
[class*="MuiOutlinedInput-root"].Mui-focused [class*="MuiOutlinedInput-notchedOutline"] {
  border-color: var(--pradox-accent) !important;
  border-width: 2px !important;
}
.MuiInputLabel-root,
[class*="MuiInputLabel-root"] {
  color: var(--pradox-text-muted) !important;
}
.MuiInputLabel-root.Mui-focused,
[class*="MuiInputLabel-root"].Mui-focused {
  color: var(--pradox-accent) !important;
}

/* Links */
a, .MuiLink-root, [class*="MuiLink-root"] {
  color: var(--pradox-accent) !important;
  text-decoration: none;
}
a:hover, .MuiLink-root:hover, [class*="MuiLink-root"]:hover {
  color: var(--pradox-accent-soft) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Selection */
::selection { background: var(--pradox-accent); color: #111; }

/* Scrollbars */
* { scrollbar-color: var(--pradox-border-strong) transparent; }

/* === Hide Authelia chrome we don't want ===
   These selectors target Authelia v4.39.15. The hash classes (mui-…, tss-…)
   may change on Authelia frontend rebuilds — re-derive via DevTools then. */

/* Avatar/lock SVG above "Sign in": first grid item in the form's outer grid
   that contains a top-level <svg>. Uses :has() (Baseline 2023+). */
[class*="MuiGrid-container"] > [class*="MuiGrid-grid-xs-12"]:first-child:has(> svg) {
  display: none !important;
}

/* "Powered by Authelia" link — tss-react gives footer links a *-links suffix */
a[class*="MuiLink-root"][class*="-links"] {
  display: none !important;
}

/* Authelia's own MuiAppBar (top toolbar with the language switcher).
   We supply our own pradox brand header above it, so hide Authelia's bar.
   MuiAppBar-root is a stable MUI-base class — no hash suffix. */
header[class*="MuiAppBar-root"] {
  display: none !important;
}

/* Restore brand link colors against the global a {color: accent} rule.
   The brand wordmark must read white with a single yellow accent on the
   dot — without this override the global a-rule paints everything yellow. */
.pradox-brand-header .brand,
.pradox-brand-header .brand:hover,
.pradox-brand-header .brand:visited,
.pradox-brand-header .brand:focus,
.pradox-brand-header .brand .name {
  color: var(--pradox-text) !important;
  text-decoration: none !important;
}
.pradox-brand-header .brand .dot {
  color: var(--pradox-accent) !important;
}

/* Replace Authelia's MuiCircularProgress with the animated pradox-eye loader.
   Authelia renders this on initial mount (splash), during 2FA step
   transitions, and any generic loading state. We hide MUI's stroke-arc and
   paint our SMIL-animated logo on top. MuiCircularProgress-root is a stable
   MUI base class — no hash. The inner <svg> is hidden via direct child rule
   so we don't accidentally hit our own pradox-trace overlays. */
[class*="MuiCircularProgress-root"] {
  position: relative !important;
  /* loader-light: yellow paths — visible on the dark body background where
     Authelia mounts its initial splash and inter-step transitions. The
     darker variant lives at /branding/loader.svg and is used inside the
     yellow Sign-in button (see button[data-pradox-loading] rule above). */
  background-image: url('/branding/loader-light.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: transparent !important;
}
[class*="MuiCircularProgress-root"] > svg {
  visibility: hidden;
}

/* Authelia also uses MuiLinearProgress (the thin loading bar — typically
   top of the page during initial mount or step transitions). Replace its
   entire visual with our pradox-eye loader, centered. We force the host to
   a sensible block height so the loader has room to render; child track
   and bar are hidden so MUI's animated bar doesn't show through. */
[class*="MuiLinearProgress-root"] {
  background: transparent !important;
  background-image: url('/branding/loader-light.svg') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 64px 64px !important;
  height: 72px !important;
  min-height: 72px !important;
  border: 0 !important;
  overflow: visible !important;
}
[class*="MuiLinearProgress-root"] > [class*="MuiLinearProgress-bar"],
[class*="MuiLinearProgress-root"] > [class*="MuiLinearProgress-dashed"] {
  display: none !important;
}

/* Authelia's actual loading indicator: react-spinners ScaleLoader — five
   vertical bars that scale-pulse vertically. It uses inline styles (no
   classes), but the animation property carries a stable "ScaleLoader_..."
   prefix from createAnimation("ScaleLoader", ...) in the bundle. We match
   the inner bars via [style*="ScaleLoader"] and the wrapping <span> via
   :has(). The wrapper gets the pradox eye loader as background image,
   the inner bars are hidden. */
span[style*="ScaleLoader"] {
  visibility: hidden !important;
}
span:has(> span[style*="ScaleLoader"]) {
  display: inline-block !important;
  width: 96px !important;
  height: 96px !important;
  background-image: url('/branding/loader-light.svg') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  vertical-align: middle !important;
}

/* No global prefers-reduced-motion override here — our animations (trace
   draw, breathing pulse) are subtle and non-vestibular. The neural-bg
   canvas has its own reduced-motion handling inside pradox-bg.js: it
   renders a static frame and stops the rAF loop. */

/* === Footer — mirrors pradox.de site-footer ===
   Fixed at the bottom edge so the centered MUI login card stays visually
   anchored between header and footer. The legal links target the apex
   pradox.de site (pradox.de/de/imprint.html etc.). */
.pradox-site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 16px 24px;
  border-top: 1px solid var(--pradox-border);
  background: color-mix(in oklab, var(--pradox-bg) 92%, black);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}
.pradox-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #71717a;
  font-size: 0.85rem;
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}
.pradox-footer-inner p { margin: 0; }
.pradox-footer-inner nav { pointer-events: auto; }
.pradox-footer-inner a {
  color: var(--pradox-text-muted) !important;
  text-decoration: none;
}
.pradox-footer-inner a:hover,
.pradox-footer-inner a:focus-visible {
  color: var(--pradox-accent) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* On narrow screens, give the login card breathing room from the bars. */
@media (max-width: 640px) {
  .pradox-brand-header { padding: 12px 16px; }
  .pradox-site-footer { padding: 12px 16px; }
  .pradox-footer-inner { font-size: 0.78rem; gap: 8px; }
}