/* ═══════════════════════════════════════════════════════════
   FLOI Corp — Authelia Custom Theme  (MUI v5 + TSS-React)
   Injected via nginx sub_filter @ /__floi/custom.css
   ═══════════════════════════════════════════════════════════ */

:root {
  --accent:       #2dd4bf;
  --accent-dim:   #0d9488;
  --accent-glow:  rgba(45, 212, 191, 0.16);
  --surface:      #0e1c2a;
  --surface-in:   #0a1520;
  --border:       rgba(45, 212, 191, 0.18);
  --border-hover: rgba(45, 212, 191, 0.45);
  --border-focus: rgba(45, 212, 191, 0.75);
  --text-1:       #dde6f0;
  --text-2:       #8ca0b3;
  --text-muted:   #4e6378;
  --danger:       #f87171;
  --radius:       10px;
}

/* ── Page background ─────────────────────────── */
html, body, #root {
  background-color: #080e16 !important;
  background-image:
    linear-gradient(rgba(45, 212, 191, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 212, 191, 0.035) 1px, transparent 1px) !important;
  background-size: 44px 44px !important;
  min-height: 100vh;
}

/* Radial glow behind card */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse 60% 50% at 50% 50%,
    rgba(13, 148, 136, 0.08) 0%,
    transparent 70%
  );
}

/* ── Login container (the "card") ────────────── */
/* MuiContainer-maxWidthXs is the login box wrapper */
.MuiContainer-maxWidthXs {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow:
    0 0 0 1px rgba(45, 212, 191, 0.04),
    0 8px 40px rgba(0, 0, 0, 0.65),
    0 0 80px rgba(45, 212, 191, 0.05) !important;
  padding: 2rem 2.25rem 2.25rem !important;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* Animated top-edge accent line */
.MuiContainer-maxWidthXs::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent-dim) 30%,
    var(--accent) 50%,
    var(--accent-dim) 70%,
    transparent 100%
  );
  opacity: 0.7;
  border-radius: 14px 14px 0 0;
}

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

.MuiTypography-h5,
.MuiTypography-h6 {
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: var(--text-1) !important;
}

.MuiTypography-body1,
.MuiTypography-body2,
.MuiTypography-subtitle1,
.MuiTypography-subtitle2 {
  color: var(--text-2) !important;
}

.MuiTypography-caption {
  color: var(--text-muted) !important;
  letter-spacing: 0.04em !important;
}

/* ── Input fields ────────────────────────────── */
.MuiOutlinedInput-root {
  background-color: var(--surface-in) !important;
  border-radius: 8px !important;
  transition: box-shadow 0.2s ease !important;
}

/* The outline border — was invisible before */
.MuiOutlinedInput-notchedOutline {
  border-color: rgba(45, 212, 191, 0.55) !important;
  border-width: 1px !important;
  transition: border-color 0.2s ease !important;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: rgba(45, 212, 191, 0.75) !important;
}

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

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

/* Input text */
.MuiInputBase-input {
  color: var(--text-1) !important;
  caret-color: var(--accent) !important;
  font-size: 0.9375rem !important;
}

/* Placeholder */
.MuiInputBase-input::placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}

/* Autofill */
.MuiInputBase-input:-webkit-autofill,
.MuiInputBase-input:-webkit-autofill:hover,
.MuiInputBase-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px var(--surface-in) inset !important;
  -webkit-text-fill-color: var(--text-1) !important;
  caret-color: var(--accent) !important;
}

/* Floating label */
.MuiInputLabel-root {
  color: var(--text-2) !important;
  font-size: 0.9rem !important;
}

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

.MuiInputLabel-shrink {
  color: var(--accent) !important;
  font-weight: 500 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* Error state label */
.MuiInputLabel-root.Mui-error {
  color: var(--danger) !important;
}

/* Password visibility icon */
.MuiInputAdornment-root .MuiIconButton-root {
  color: var(--text-muted) !important;
  transition: color 0.15s, background-color 0.15s !important;
}

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

/* ── Helper / error text ─────────────────────── */
.MuiFormHelperText-root {
  color: var(--text-muted) !important;
  font-size: 0.78rem !important;
}

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

.MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline {
  border-color: rgba(248, 113, 113, 0.6) !important;
}

/* ── Primary button (ANMELDEN) ───────────────── */
.MuiButton-containedPrimary {
  background: linear-gradient(135deg, var(--accent-dim) 0%, var(--accent) 100%) !important;
  color: #071118 !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(45, 212, 191, 0.3) !important;
  padding: 10px 24px !important;
  transition: box-shadow 0.2s, transform 0.15s !important;
  position: relative;
  overflow: hidden;
}

.MuiButton-containedPrimary::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: btnShine 3s ease-in-out infinite;
}

@keyframes btnShine {
  0%   { left: -80%; }
  40%  { left: 140%; }
  100% { left: 140%; }
}

.MuiButton-containedPrimary:hover {
  background: linear-gradient(135deg, #0f9f90 0%, #38e8d3 100%) !important;
  box-shadow: 0 6px 22px rgba(45, 212, 191, 0.45) !important;
  transform: translateY(-1px) !important;
}

.MuiButton-containedPrimary:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(45, 212, 191, 0.25) !important;
}

/* ── Text / outlined buttons ─────────────────── */
.MuiButton-text,
.MuiButton-outlined {
  color: var(--accent) !important;
  border-color: rgba(45, 212, 191, 0.75) !important;
  border-radius: 8px !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.05em !important;
}

.MuiButton-text:hover,
.MuiButton-outlined:hover {
  background-color: var(--accent-glow) !important;
  border-color: var(--accent) !important;
}

/* ── Checkbox ────────────────────────────────── */
.MuiCheckbox-root {
  color: var(--text-muted) !important;
}

.MuiCheckbox-root.Mui-checked {
  color: var(--accent) !important;
}

.MuiFormControlLabel-label {
  color: var(--text-2) !important;
  font-size: 0.875rem !important;
}

/* ── Links ───────────────────────────────────── */
a, .MuiLink-root {
  color: var(--accent) !important;
  text-decoration: none !important;
  font-family: inherit !important;
  font-size: inherit !important;
  transition: color 0.15s !important;
}

a:hover, .MuiLink-root:hover {
  color: #5eead4 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* ── Alerts ──────────────────────────────────── */
.MuiAlert-root {
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  font-size: 0.875rem !important;
}

.MuiAlert-standardError,
.MuiAlert-filledError   { background: rgba(248,113,113,0.12) !important; color: #fca5a5 !important; }
.MuiAlert-standardWarning,
.MuiAlert-filledWarning { background: rgba(251,191,36,0.1)  !important; color: #fcd34d !important; }
.MuiAlert-standardSuccess,
.MuiAlert-filledSuccess { background: rgba(52,211,153,0.1)  !important; color: #6ee7b7 !important; }
.MuiAlert-standardInfo,
.MuiAlert-filledInfo    { background: var(--accent-glow)    !important; color: var(--accent) !important; }

/* ── Dividers ────────────────────────────────── */
.MuiDivider-root {
  border-color: rgba(45, 212, 191, 0.12) !important;
}

/* ── Logo / avatar ───────────────────────────── */
.MuiAvatar-root {
  background-color: rgba(45,212,191,0.08) !important;
  border: 1.5px solid rgba(45,212,191,0.3) !important;
  box-shadow: 0 0 18px rgba(45,212,191,0.12) !important;
}

img[alt*="logo"], img[src*="logo"] {
  filter: drop-shadow(0 0 10px rgba(45,212,191,0.45)) !important;
}

/* ── OTP digit inputs ────────────────────────── */
input[inputmode="numeric"],
input[type="number"] {
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.25em !important;
  text-align: center !important;
  color: var(--accent) !important;
}

/* ── Scrollbar ───────────────────────────────── */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(45,212,191,0.25);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(45,212,191,0.45);
}

/* ── Selection ───────────────────────────────── */
::selection {
  background: rgba(45,212,191,0.25);
  color: #dde6f0;
}

/* ── Specificity overrides for MUI fieldset border ── */
fieldset.MuiOutlinedInput-notchedOutline {
  border: 1.5px solid rgba(45, 212, 191, 0.55) !important;
  transition: border-color 0.2s ease !important;
}

.MuiOutlinedInput-root:hover fieldset.MuiOutlinedInput-notchedOutline {
  border-color: rgba(45, 212, 191, 0.8) !important;
}

.MuiOutlinedInput-root.Mui-focused fieldset.MuiOutlinedInput-notchedOutline {
  border-color: #2dd4bf !important;
  border-width: 2px !important;
}

/* Card background stronger contrast */
.MuiContainer-maxWidthXs {
  background-color: #0e1c2a !important;
  box-shadow:
    0 0 0 1.5px rgba(45, 212, 191, 0.2),
    0 12px 48px rgba(0,0,0,0.7),
    0 0 60px rgba(45, 212, 191, 0.06) !important;
}