/* ═══════════════════════════════════════════════
   zlef.fr design system — Authelia login portal
   Canvas particle system is injected via particles.js
   ═══════════════════════════════════════════════ */

:root {
  --copper:     rgba(157, 174, 80, 1);
  --copper-dim: rgba(157, 174, 80, 0.72);
  --copper-glow:rgba(157, 174, 80, 0.38);
  --bg:         #06060a;
  --card-bg:    rgba(10, 10, 17, 0.90);
  --border:     rgba(255, 255, 255, 0.065);
  --border-hi:  rgba(255, 255, 255, 0.18);
  --text:       rgba(255, 255, 255, 0.88);
  --text-dim:   rgba(255, 255, 255, 0.38);
}

/* ─── Base ─── */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }

body {
  background: var(--bg) !important;
  background-image: none !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ─── Stacking: canvas (z0) → vignette/haze (z0) → form (z1) ─── */
#root {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ─── Top bar ─── */
header.MuiAppBar-root {
  background: rgba(6, 6, 10, 0.72) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 10 !important;
}

.MuiToolbar-root { justify-content: flex-end !important; }

.MuiIconButton-root {
  color: var(--text-dim) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em !important;
  transition: color 0.2s !important;
}
.MuiIconButton-root:hover {
  color: var(--text) !important;
  background: transparent !important;
}

/* ─── Login card ─── */
.MuiContainer-maxWidthXs {
  margin: auto !important;
  padding: 56px 52px !important;
  background: var(--card-bg) !important;
  backdrop-filter: blur(32px) saturate(1.2) !important;
  border: 1px solid var(--border) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 3px !important;
  box-shadow:
    0 0 120px rgba(0, 0, 0, 0.96),
    0 0 0 1px rgba(157, 174, 80, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* ─── Form row spacing ───────────────────────────────────────────────────────
   Authelia uses MuiGrid-grid-xs-12 items with no built-in gap.
   Target: grid container → row-gap; each item → top/bottom padding.
   ─────────────────────────────────────────────────────────────────────────── */
.MuiContainer-maxWidthXs .MuiGrid-root.MuiGrid-container {
  row-gap: 20px !important;
}

.MuiContainer-maxWidthXs .MuiGrid-root.MuiGrid-grid-xs-12 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* Extra breathing: text fields and form controls */
.MuiContainer-maxWidthXs .MuiTextField-root,
.MuiContainer-maxWidthXs .MuiFormControl-root {
  margin-bottom: 4px !important;
}

/* ─── Logo ─── */
/* PNG fallback (shown until logo-inject.js swaps in the SVG) */
img[alt="Logo"],
img[src*="logo"] {
  display: block !important;
  width: 168px !important;
  height: auto !important;
  margin: 0 auto 14px !important;
  animation: logo-float 6s ease-in-out infinite, logo-glow 3s ease-in-out infinite !important;
}

/* Inline SVG injected by logo-inject.js — float+tilt handled by JS RAF loop */
#zlef-logo-svg {
  display: block !important;
  width: 168px !important;
  height: auto !important;
  margin: 0 auto 14px !important;
  overflow: visible !important;
  fill: white !important;
  animation: logo-glow 3s ease-in-out infinite !important;
  will-change: transform !important;
}

svg#UserSvg { opacity: 0.10 !important; transform: scale(0.5) !important; }

@keyframes logo-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-6px); }
}

@keyframes logo-glow {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(157,174,80,0.30))
            drop-shadow(0 0 2px rgba(255,255,255,0.10));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(157,174,80,0.65))
            drop-shadow(0 0 8px rgba(255,255,255,0.20));
  }
}

/* ─── "Sign in" heading ─── */
.MuiTypography-h5 {
  font-weight: 300 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--text-dim) !important;
  font-size: 0.72rem !important;
  margin-bottom: 20px !important;
}

/* ─── Input labels ─── */
.MuiInputLabel-root {
  color: var(--text-dim) !important;
  letter-spacing: 0.04em !important;
  font-size: 0.88rem !important;
}
.MuiInputLabel-root.Mui-focused { color: var(--copper-dim) !important; }

/* ─── Input fields ─── */
.MuiInputBase-root {
  background: rgba(255,255,255,0.025) !important;
  border-radius: 2px !important;
  color: var(--text) !important;
}

.MuiOutlinedInput-notchedOutline {
  border-color: var(--border) !important;
  border-width: 1px !important;
  transition: border-color 0.2s !important;
}
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--border-hi) !important;
}
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--copper-dim) !important;
  border-width: 1px !important;
  box-shadow: 0 0 0 3px rgba(157,174,80,0.09) !important;
}

.MuiInputBase-input {
  color: var(--text) !important;
  caret-color: var(--copper) !important;
  letter-spacing: 0.02em !important;
  padding: 15px 16px !important;
}

/* ─── Password visibility toggle ─── */
.MuiIconButton-edgeEnd {
  color: var(--text-dim) !important;
}
.MuiIconButton-edgeEnd:hover {
  color: var(--text) !important;
  background: transparent !important;
}

/* ─── Remember me ─── */
.MuiCheckbox-root         { color: rgba(255,255,255,0.20) !important; padding: 4px !important; }
.MuiCheckbox-root.Mui-checked { color: var(--copper-dim) !important; }
.MuiFormControlLabel-label {
  color: var(--text-dim) !important;
  font-size: 0.80rem !important;
  letter-spacing: 0.06em !important;
}

/* ─── Sign in button ─── */
.MuiButton-contained.MuiButton-containedPrimary {
  background: rgba(157, 174, 80, 0.84) !important;
  background-image: none !important;
  color: rgba(255,255,255,0.96) !important;
  letter-spacing: 0.22em !important;
  font-weight: 500 !important;
  font-size: 0.70rem !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  border: none !important;
  box-shadow: 0 0 28px var(--copper-glow) !important;
  padding: 14px 24px !important;
  margin-top: 8px !important;
  transition: all 0.22s ease !important;
}
.MuiButton-contained.MuiButton-containedPrimary:hover {
  background: var(--copper) !important;
  box-shadow: 0 0 50px rgba(157,174,80,0.62), 0 4px 20px rgba(0,0,0,0.4) !important;
  transform: translateY(-1px) !important;
}
.MuiButton-contained.MuiButton-containedPrimary:active {
  transform: translateY(0) !important;
  box-shadow: 0 0 20px var(--copper-glow) !important;
}

/* ─── Reset password link ─── */
.MuiLink-root {
  color: rgba(157,174,80,0.55) !important;
  text-decoration: none !important;
  letter-spacing: 0.08em !important;
  font-size: 0.74rem !important;
  transition: color 0.2s !important;
}
.MuiLink-root:hover {
  color: rgba(157,174,80,0.92) !important;
  text-decoration: none !important;
}

/* ─── Typography ─── */
.MuiTypography-root { color: var(--text) !important; }

/* ─── Notifications ─── */
.MuiAlert-root {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--border) !important;
  border-radius: 2px !important;
  font-size: 0.80rem !important;
  letter-spacing: 0.04em !important;
}
.MuiAlert-standardError   { border-color: rgba(220,80,60,0.35) !important; color: rgba(255,150,130,0.9) !important; }
.MuiAlert-standardSuccess { border-color: rgba(111,154,58,0.35) !important;  color: rgba(100,200,130,0.9) !important; }

/* ─── Dividers ─── */
.MuiDivider-root { border-color: var(--border) !important; }

/* ─── TOTP numeric input ─── */
input[inputmode="numeric"] {
  letter-spacing: 0.3em !important;
  text-align: center !important;
  font-size: 1.2rem !important;
}

/* ─── "Powered by Authelia" footer ─── */
#root .MuiGrid-grid-xs-4 {
  flex-basis: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
}
#root a.MuiLink-underlineHover:not(.MuiLink-button) {
  color: rgba(255,255,255,0.18) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.10em !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar        { width: 4px; }
::-webkit-scrollbar-track  { background: var(--bg); }
::-webkit-scrollbar-thumb  { background: rgba(255,255,255,0.10); border-radius: 2px; }