/* ============================================================
   Automations Intelligenz — Friday HUD Login
   Wird per nginx-Sidecar in die Authelia-Portalseite injiziert.
   Alle Farben als Theme-Variablen, nichts hartkodiert.
   ============================================================ */
:root{
  --ai-bg:      #070b10;
  --ai-panel:   rgba(10,16,22,.55);
  --ai-green:   #21d07a;
  --ai-blue:    #348cf0;
  --ai-line:    rgba(33,208,122,.22);
  --ai-text:    #e9f2f6;
  --ai-dim:     #8aa0ab;
  --ai-sans:    'Rajdhani', system-ui, sans-serif;
  --ai-mono:    'Share Tech Mono', ui-monospace, monospace;
}
html, body{
  background:
    radial-gradient(1100px 620px at 50% -8%,  rgba(33,208,122,.10), transparent 60%),
    radial-gradient(900px 520px at 50% 118%,  rgba(52,140,240,.12), transparent 60%),
    var(--ai-bg) !important;
  color: var(--ai-text) !important;
  font-family: var(--ai-sans) !important;
}
#root, #root > .MuiBox-root{ background: transparent !important; }

#ai-bg{ position: fixed; inset: 0; width:100vw; height:100vh; z-index:0; pointer-events:none; display:block; }
.MuiContainer-root, .MuiGrid-root{ position: relative; z-index: 1; }

.MuiContainer-maxWidthXs{
  background: var(--ai-panel) !important;
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid var(--ai-line);
  border-radius: 16px;
  padding: 40px 34px 30px !important;
  margin-top: 6vh;
  box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.02) inset, 0 0 60px rgba(33,208,122,.06);
  position: relative; z-index: 1; overflow: visible;
}
.MuiContainer-maxWidthXs::before, .MuiContainer-maxWidthXs::after{
  content:''; position:absolute; width:26px; height:26px; pointer-events:none;
}
.MuiContainer-maxWidthXs::before{ top:-1px; left:-1px; border-top:2px solid var(--ai-green); border-left:2px solid var(--ai-green); border-top-left-radius:16px; }
.MuiContainer-maxWidthXs::after{ bottom:-1px; right:-1px; border-bottom:2px solid var(--ai-blue); border-right:2px solid var(--ai-blue); border-bottom-right-radius:16px; }

img[alt="Logo"], .MuiAvatar-root img{ filter: drop-shadow(0 0 14px rgba(33,208,122,.35)); }

.MuiTypography-h5{
  font-family: var(--ai-sans) !important; font-weight:600 !important;
  letter-spacing:.06em !important; text-transform:uppercase; font-size:26px !important;
  color: var(--ai-text) !important; position:relative; margin-bottom:8px !important;
}
.MuiTypography-h5::before{
  content:'\25C8  SECURE ACCESS \00B7 AUTOMATIONS INTELLIGENZ'; display:block;
  font-family: var(--ai-mono) !important; font-size:10.5px; letter-spacing:.26em; text-transform:none;
  font-weight:400; color: var(--ai-green); opacity:.85; margin-bottom:14px;
}
.MuiTypography-h5::after{
  content:''; display:block; width:44px; height:2px; margin:12px auto 0;
  background: linear-gradient(90deg, var(--ai-green), var(--ai-blue)); border-radius:2px;
}

.MuiInputLabel-root{ color: var(--ai-dim) !important; font-family: var(--ai-sans) !important; letter-spacing:.02em; }
.MuiInputLabel-root.Mui-focused{ color: var(--ai-green) !important; }
.MuiOutlinedInput-root, .MuiFilledInput-root{ background: rgba(255,255,255,.035) !important; border-radius:10px !important; color: var(--ai-text) !important; }
.MuiOutlinedInput-root input, .MuiFilledInput-root input{ color: var(--ai-text) !important; font-family: var(--ai-sans) !important; letter-spacing:.02em; }
.MuiOutlinedInput-notchedOutline{ border-color: var(--ai-line) !important; transition: border-color .15s ease; }
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline{ border-color: rgba(33,208,122,.45) !important; }
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline{ border-color: var(--ai-green) !important; border-width:1.5px !important; box-shadow:0 0 0 3px rgba(33,208,122,.12); }
.MuiIconButton-root{ color: var(--ai-dim) !important; }
.MuiIconButton-root:hover{ color: var(--ai-green) !important; }

.MuiCheckbox-root{ color: var(--ai-dim) !important; }
.MuiCheckbox-root.Mui-checked{ color: var(--ai-green) !important; }
.MuiFormControlLabel-label{ color: var(--ai-dim) !important; font-family: var(--ai-sans) !important; }

.MuiButton-containedPrimary{
  background: linear-gradient(90deg, var(--ai-green), var(--ai-blue)) !important;
  color:#05130c !important; font-family: var(--ai-sans) !important;
  font-weight:700 !important; letter-spacing:.14em !important; text-transform:uppercase;
  border:0 !important; border-radius:10px !important; height:46px; font-size:15px !important;
  box-shadow:0 8px 26px rgba(33,208,122,.28) !important; transition:filter .15s ease, transform .05s ease;
}
.MuiButton-containedPrimary:hover{ filter:brightness(1.08); box-shadow:0 10px 30px rgba(33,208,122,.38) !important; }
.MuiButton-containedPrimary:active{ transform:translateY(1px); }

.MuiButton-text, a.MuiTypography-root, .MuiLink-root{ color: var(--ai-green) !important; font-family: var(--ai-sans) !important; }
.MuiButton-text:hover{ background: rgba(33,208,122,.08) !important; }
a[href*="authelia.com"]{ color: var(--ai-dim) !important; opacity:.5; font-size:11px; font-family: var(--ai-mono) !important; letter-spacing:.12em; }

.MuiAppBar-root, header.MuiPaper-root{ background: transparent !important; box-shadow:none !important; }
header .MuiIconButton-root{ color: var(--ai-dim) !important; border:1px solid var(--ai-line); border-radius:9px; padding:5px 10px; }
header .MuiIconButton-root:hover{ color: var(--ai-green) !important; border-color: rgba(33,208,122,.5); }

::selection{ background: rgba(33,208,122,.28); }
::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-thumb{ background: rgba(33,208,122,.25); border-radius:8px; }
.MuiCircularProgress-root{ color: var(--ai-green) !important; }
a[href*="authelia.com"]{display:none !important;}