/* ============================================================
   NO OFFSIDE // AUTH TERMINAL  —  Authelia login theme
   Aesthetic: Terminal CLI (phosphor green on black, monospace,
   scanlines, blinking cursor, bracketed / inverted-video buttons)
   Injected same-origin via Caddy (style-src 'self' compliant).
   ============================================================ */

:root {
  --term-bg:      #0a0a0a;
  --term-fg:      #33ff00;
  --term-amber:   #ffb000;
  --term-muted:   #1f521f;
  --term-dim:     #2b7a2b;
  --term-error:   #ff3333;
  --term-glow:    0 0 5px rgba(51, 255, 0, 0.5);
  --term-glow-strong: 0 0 8px rgba(51, 255, 0, 0.65);
  --term-mono: "JetBrains Mono", "Fira Code", "SFMono-Regular", "SF Mono",
               Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ---- Monospace supremacy: every glyph, everywhere ---- */
html, body, #root, input, button, select, textarea,
.MuiTypography-root, .MuiButton-root, .MuiInputBase-root,
.MuiInputLabel-root, .MuiFormControlLabel-root, .MuiLink-root, a, p, span, div, h1, h2, h3, h4, h5, h6 {
  font-family: var(--term-mono) !important;
  letter-spacing: 0.02em;
}

/* ---- The screen ---- */
html, body, #root {
  background: var(--term-bg) !important;
  color: var(--term-fg) !important;
  min-height: 100%;
}
body {
  position: relative;
  overflow-x: hidden;
}

/* Faint phosphor grid + vignette behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(51,255,0,0.06), transparent 60%),
    linear-gradient(rgba(51,255,0,0.035) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, rgba(51,255,0,0.035) 1px, transparent 1px) 0 0 / 34px 100%;
}

/* CRT scanlines overlay (subtle, above content, non-interactive) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.18) 3px,
    rgba(0,0,0,0) 4px
  );
  mix-blend-mode: multiply;
  animation: term-scan 8s linear infinite;
}
@keyframes term-scan {
  from { background-position: 0 0; }
  to   { background-position: 0 100px; }
}

/* Keep the app above the background layers */
#root { position: relative; z-index: 1; }

/* ============================================================
   THE WINDOW  ( .MuiPaper-root = the login card )
   Rendered as a bordered terminal pane with a title bar.
   ============================================================ */
.MuiPaper-root {
  background: rgba(10, 12, 10, 0.92) !important;
  color: var(--term-fg) !important;
  border: 1px solid var(--term-muted) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 0 1px rgba(51,255,0,0.08), 0 0 40px rgba(51,255,0,0.06) !important;
  background-image: none !important;
  position: relative;
  padding-top: 34px !important;
  overflow: visible !important;
}
/* Title bar:  + ---- NO_OFFSIDE // SECURE_LOGIN ---- + */
.MuiPaper-root::before {
  content: "+-- NO_OFFSIDE // SECURE_LOGIN --------------------+";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 26px;
  line-height: 26px;
  padding: 0 10px;
  font-family: var(--term-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--term-bg);
  background: var(--term-fg);
  text-shadow: none;
  overflow: hidden;
  white-space: nowrap;
  text-transform: uppercase;
}
/* Blinking block cursor at the end of the title bar */
.MuiPaper-root::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 10px;
  width: 9px;
  height: 14px;
  background: var(--term-bg);
  animation: term-blink 1s steps(1) infinite;
}
@keyframes term-blink { 50% { opacity: 0; } }

/* ---- Text / headings ---- */
.MuiTypography-root { color: var(--term-fg) !important; text-shadow: var(--term-glow); }
.MuiTypography-h1, .MuiTypography-h2, .MuiTypography-h3,
.MuiTypography-h4, .MuiTypography-h5, .MuiTypography-h6 {
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}
/* Headline gets a leading prompt glyph */
.MuiTypography-h5::before, .MuiTypography-h6::before { content: "> "; color: var(--term-amber); }
.MuiTypography-subtitle1, .MuiTypography-subtitle2, .MuiTypography-body2 {
  color: var(--term-dim) !important;
  text-shadow: none;
}

/* ---- The avatar / lock icon → boxed system glyph ---- */
.MuiAvatar-root {
  background: transparent !important;
  color: var(--term-fg) !important;
  border: 1px solid var(--term-muted) !important;
  border-radius: 0 !important;
  box-shadow: var(--term-glow);
}
.MuiAvatar-root svg { color: var(--term-fg) !important; filter: drop-shadow(var(--term-glow)); }

/* ============================================================
   INPUTS  → prompt-style fields, blinking green caret
   ============================================================ */
.MuiInputBase-root, .MuiOutlinedInput-root {
  background: #050705 !important;
  color: var(--term-fg) !important;
  border-radius: 0 !important;
  caret-color: var(--term-fg);
}
.MuiOutlinedInput-notchedOutline { border: 1px solid var(--term-muted) !important; border-radius: 0 !important; }
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: var(--term-dim) !important; }
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--term-fg) !important;
  border-width: 1px !important;
  box-shadow: 0 0 0 1px rgba(51,255,0,0.35), var(--term-glow);
}
.MuiInputBase-input {
  color: var(--term-fg) !important;
  text-shadow: var(--term-glow);
  font-family: var(--term-mono) !important;
}
.MuiInputBase-input::placeholder { color: var(--term-muted) !important; opacity: 1; }
/* Labels */
.MuiInputLabel-root { color: var(--term-dim) !important; text-transform: uppercase; font-size: 12px !important; letter-spacing: 0.08em; }
.MuiInputLabel-root.Mui-focused { color: var(--term-fg) !important; text-shadow: var(--term-glow); }
/* kill autofill white boxes */
.MuiInputBase-input:-webkit-autofill {
  -webkit-text-fill-color: var(--term-fg) !important;
  -webkit-box-shadow: 0 0 0 1000px #050705 inset !important;
  caret-color: var(--term-fg) !important;
}

/* ============================================================
   BUTTONS  → bracketed, inverted-video on hover
   ============================================================ */
.MuiButton-root {
  border-radius: 0 !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  transition: background 90ms steps(2), color 90ms steps(2) !important;
  box-shadow: none !important;
}
/* Primary / contained → [ LABEL ] outlined, fills on hover */
.MuiButton-contained, .MuiButton-containedPrimary {
  background: transparent !important;
  color: var(--term-fg) !important;
  border: 1px solid var(--term-fg) !important;
  text-shadow: var(--term-glow);
  background-image: none !important;
}
.MuiButton-contained::before { content: "[ "; }
.MuiButton-contained::after  { content: " ]"; }
/* buttons that carry an icon (e.g. passkey) shouldn't get mismatched brackets */
.MuiButton-root:has(.MuiButton-startIcon)::before,
.MuiButton-root:has(.MuiButton-startIcon)::after,
.MuiButton-root:has(svg)::before,
.MuiButton-root:has(svg)::after { content: "" !important; }
.MuiButton-contained:hover, .MuiButton-containedPrimary:hover {
  background: var(--term-fg) !important;   /* inverted video */
  color: var(--term-bg) !important;
  text-shadow: none;
}
.MuiButton-contained:active { transform: translateY(1px); }
/* Text / outlined / secondary buttons */
.MuiButton-text, .MuiButton-outlined {
  color: var(--term-amber) !important;
  border-radius: 0 !important;
  border-color: var(--term-muted) !important;
}
.MuiButton-text:hover, .MuiButton-outlined:hover {
  background: rgba(255,176,0,0.10) !important;
  color: var(--term-amber) !important;
}

/* ---- Checkbox (remember me) ---- */
.MuiCheckbox-root { color: var(--term-muted) !important; border-radius: 0 !important; }
.MuiCheckbox-root.Mui-checked { color: var(--term-fg) !important; }
.MuiFormControlLabel-label { color: var(--term-dim) !important; font-size: 13px !important; }

/* ---- Links ---- */
a, .MuiLink-root {
  color: var(--term-amber) !important;
  text-decoration: none !important;
  text-shadow: 0 0 4px rgba(255,176,0,0.4);
}
a:hover, .MuiLink-root:hover {
  color: var(--term-bg) !important;
  background: var(--term-amber) !important;
  text-shadow: none;
}
a::before, .MuiLink-root::before { content: "~ "; opacity: 0.7; }

/* ---- Alerts / errors ---- */
.MuiAlert-root { border-radius: 0 !important; font-family: var(--term-mono) !important; border: 1px solid currentColor !important; }
.MuiAlert-standardError, .MuiAlert-filledError {
  background: rgba(255,51,51,0.08) !important;
  color: var(--term-error) !important;
}
.MuiAlert-standardError::before { content: "[ERR] "; font-weight: 700; }
.MuiAlert-standardSuccess { background: rgba(51,255,0,0.08) !important; color: var(--term-fg) !important; }
.MuiAlert-standardSuccess::before { content: "[OK] "; font-weight: 700; }

/* ---- Progress / loaders in phosphor green ---- */
.MuiCircularProgress-root, .MuiLinearProgress-root { color: var(--term-fg) !important; }
.MuiLinearProgress-bar { background: var(--term-fg) !important; }

/* ---- Divider ---- */
.MuiDivider-root { border-color: var(--term-muted) !important; }

/* ---- Footer / small print ---- */
.MuiTypography-caption { color: var(--term-muted) !important; text-shadow: none; }

/* ============================================================
   Accessibility: honor reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none !important; }
  .MuiPaper-root::after { animation: none !important; opacity: 1 !important; }
  .MuiButton-root { transition: none !important; }
}

/* ============================================================
   PASSKEY-ONLY MODE
   Hide the username/password first-factor form and keep only the
   "SIGN IN WITH A PASSKEY" button. NOTE: this hides the UI only —
   password auth still works server-side. To restore the password
   form, delete this whole block from the CSS (served no-cache).
   ============================================================ */
/* Hide the password form ONLY while the reveal toggle is unchecked.
   (Not-checked scoping means we never have to restore MUI's own display
   values when it IS revealed — the native form just comes back.) */
body:not(:has(#pw-reveal:checked)) #form-login .MuiGrid-container > .MuiGrid-root:has(#username-textfield),
body:not(:has(#pw-reveal:checked)) #form-login .MuiGrid-container > .MuiGrid-root:has(#password-textfield),
body:not(:has(#pw-reveal:checked)) #form-login .MuiGrid-container > .MuiGrid-root:has(#remember-checkbox),
body:not(:has(#pw-reveal:checked)) #form-login .MuiGrid-container > .MuiGrid-root:has(#sign-in-button),
body:not(:has(#pw-reveal:checked)) #form-login .MuiGrid-container > .MuiGrid-root:has(.MuiDivider-root),
body:not(:has(#pw-reveal:checked)) #form-login .MuiGrid-container > .MuiGrid-root:has(#reset-password-button) {
  display: none !important;
}
/* passkey button is the single primary action by default */
#passkey-sign-in-button { margin-top: 4px !important; }

/* ---- "no passkey — use password" escape hatch (injected via Caddy) ---- */
#pw-reveal { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#pw-reveal-label {
  position: fixed; left: 50%; bottom: 56px; transform: translateX(-50%); z-index: 10000;
  cursor: pointer; white-space: nowrap;
  font-family: var(--term-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--term-amber); border: 1px solid var(--term-muted); border-radius: 0; padding: 9px 13px;
  background: rgba(10, 10, 10, 0.88); text-shadow: 0 0 4px rgba(255, 176, 0, 0.4);
  transition: background 90ms steps(2), color 90ms steps(2), border-color 120ms;
}
#pw-reveal-label:hover { background: var(--term-amber); color: var(--term-bg); border-color: var(--term-amber); text-shadow: none; }
#pw-reveal:focus-visible + #pw-reveal-label { outline: 2px solid var(--term-amber); outline-offset: 2px; }
/* once the password form is revealed, retire the escape hatch itself */
body:has(#pw-reveal:checked) #pw-reveal-label { display: none; }

/* ---- Mobile: keep the pane readable, avoid overflow ---- */
@media (max-width: 560px) {
  .MuiPaper-root::before { font-size: 9px; letter-spacing: 0.03em; }
  .MuiPaper-root { padding-left: 14px !important; padding-right: 14px !important; }
}