/* mantas_hai / Hermes AI Agent — premium cybertech Authelia skin
   Stable across password + MFA/TOTP views. No inline secrets. */

:root {
  color-scheme: dark;
  --h-bg: #020403;
  --h-panel: rgba(6, 12, 10, .88);
  --h-panel-2: rgba(9, 18, 15, .94);
  --h-edge: rgba(118, 185, 0, .55);
  --h-edge-soft: rgba(118, 185, 0, .22);
  --h-green: #76b900;
  --h-lime: #b9ff38;
  --h-cyan: #2ee8ff;
  --h-text: #f5fff1;
  --h-muted: #a8b9a6;
  --h-danger: #ff5f7a;
}

html,
body,
#root {
  min-height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  background: var(--h-bg) !important;
  color: var(--h-text) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body {
  position: relative !important;
  overflow-x: hidden !important;
  isolation: isolate !important;
}

/* Stable premium background: separate layers so MFA cards never inherit blur/scale. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2,4,3,.92) 0%, rgba(2,4,3,.50) 48%, rgba(2,4,3,.90) 100%),
    linear-gradient(180deg, rgba(2,4,3,.18) 0%, rgba(2,4,3,.78) 72%, #020403 100%),
    url('/premium-assets/hermes-cyberpunk-city.jpg') center center / cover no-repeat,
    radial-gradient(circle at 20% 18%, rgba(118,185,0,.32), transparent 34%),
    radial-gradient(circle at 82% 16%, rgba(46,232,255,.22), transparent 31%),
    #020403;
  transform: translateZ(0);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(118,185,0,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118,185,0,.10) 1px, transparent 1px),
    radial-gradient(circle at 50% 46%, transparent 0 28%, rgba(0,0,0,.28) 66%, rgba(0,0,0,.70) 100%);
  background-size: 46px 46px, 46px 46px, auto;
  opacity: .62;
  mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* Top brand strip */
#root::before {
  content: "HERMES AI AGENT  //  SECURE MFA ACCESS";
  position: fixed;
  top: 22px;
  left: clamp(18px, 4vw, 44px);
  z-index: 5;
  color: var(--h-lime);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(118,185,0,.90), 0 0 38px rgba(46,232,255,.18);
  pointer-events: none;
}

#root::after {
  content: "AI / IT / CYBERTECH";
  position: fixed;
  right: clamp(18px, 4vw, 44px);
  bottom: 24px;
  z-index: 5;
  color: rgba(245,255,241,.62);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  pointer-events: none;
}

main {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 82px 18px 54px !important;
  box-sizing: border-box !important;
}

/* Authelia root layout: full viewport only, no panel styling here. */
.MuiBox-root.authelia-0 {
  width: 100% !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 82px 18px 54px !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

/* Real auth card: the visible login/MFA grid inside Authelia's container. */
.MuiBox-root.authelia-0 > .MuiGrid2-container > .MuiContainer-root > .MuiGrid2-container {
  width: min(100%, 430px) !important;
  padding: clamp(28px, 4vw, 40px) !important;
  margin: 0 auto !important;
  background:
    linear-gradient(180deg, rgba(12, 22, 17, .94), rgba(3, 7, 5, .88)) !important;
  border: 1px solid var(--h-edge) !important;
  border-top: 2px solid var(--h-lime) !important;
  border-radius: 22px !important;
  box-shadow:
    0 0 0 1px rgba(185,255,56,.08) inset,
    0 34px 110px rgba(0,0,0,.78),
    0 0 55px rgba(118,185,0,.22),
    0 0 90px rgba(46,232,255,.08) !important;
  backdrop-filter: blur(12px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.16) !important;
  overflow: hidden !important;
}

.MuiBox-root.authelia-0 > .MuiGrid2-container > .MuiContainer-root > .MuiGrid2-container::before {
  content: "NVIDIA GREENLINE × HERMES";
  display: block;
  width: 100%;
  margin: 0 0 18px;
  color: var(--h-lime);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .20em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 0 18px rgba(118,185,0,.72);
}

/* Logo area */
img[src*="logo"],
img[alt*="Authelia"],
img[alt*="logo" i] {
  max-width: min(210px, 58vw) !important;
  height: auto !important;
  filter: drop-shadow(0 0 18px rgba(118,185,0,.50)) drop-shadow(0 0 30px rgba(46,232,255,.16)) !important;
}

h1, h2, h3, h4, h5, h6,
[class*="MuiTypography-h"] {
  color: #ffffff !important;
  font-weight: 950 !important;
  letter-spacing: -.035em !important;
  text-shadow: 0 0 30px rgba(118,185,0,.34) !important;
}

p,
label,
span,
div,
[class*="MuiTypography-root"] {
  color: inherit;
}

[class*="MuiTypography-body"],
[class*="MuiFormLabel-root"],
[class*="MuiInputLabel-root"] {
  color: var(--h-muted) !important;
}

a, a:visited {
  color: var(--h-lime) !important;
  text-decoration-color: rgba(185,255,56,.65) !important;
}
a:hover { color: var(--h-cyan) !important; }

form {
  position: relative !important;
  max-width: 100% !important;
}

/* Inputs, including MFA/TOTP numeric code boxes. */
[class*="MuiInputBase-root"],
[class*="MuiOutlinedInput-root"] {
  color: var(--h-text) !important;
  background: rgba(0, 0, 0, .42) !important;
  border-radius: 14px !important;
}

input,
textarea {
  color: var(--h-text) !important;
  caret-color: var(--h-lime) !important;
}

input::placeholder { color: rgba(220,255,206,.52) !important; }

[class*="MuiOutlinedInput-notchedOutline"] {
  border-color: rgba(118,185,0,.46) !important;
}

[class*="Mui-focused"] [class*="MuiOutlinedInput-notchedOutline"],
[class*="MuiOutlinedInput-root"]:hover [class*="MuiOutlinedInput-notchedOutline"] {
  border-color: var(--h-lime) !important;
  box-shadow: 0 0 0 3px rgba(118,185,0,.14), 0 0 22px rgba(118,185,0,.25) !important;
}

/* Authelia MFA code fields often render as short numeric inputs. Make them crisp, not washed out. */
input[inputmode="numeric"],
input[type="tel"],
input[autocomplete="one-time-code"] {
  min-height: 50px !important;
  text-align: center !important;
  font-size: clamp(20px, 4.8vw, 28px) !important;
  font-weight: 900 !important;
  letter-spacing: .18em !important;
  background: rgba(2, 8, 5, .78) !important;
  border-radius: 14px !important;
  text-shadow: 0 0 14px rgba(185,255,56,.28) !important;
}

/* Buttons */
button,
[class*="MuiButton-root"] {
  border-radius: 14px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

[class*="MuiButton-contained"],
button[type="submit"] {
  color: #031003 !important;
  background: linear-gradient(135deg, var(--h-lime) 0%, var(--h-green) 62%, #4f9a00 100%) !important;
  border: 1px solid rgba(185,255,56,.96) !important;
  box-shadow: 0 0 28px rgba(118,185,0,.38), 0 10px 30px rgba(0,0,0,.56) !important;
}

[class*="MuiButton-contained"]:hover,
button[type="submit"]:hover {
  transform: translateY(-1px) !important;
  filter: saturate(1.08) brightness(1.04) !important;
  box-shadow: 0 0 42px rgba(185,255,56,.50), 0 14px 42px rgba(0,0,0,.66) !important;
}

[class*="MuiButton-outlined"],
[class*="MuiButton-text"] {
  color: var(--h-lime) !important;
  border-color: rgba(118,185,0,.66) !important;
  background: rgba(0,0,0,.20) !important;
}

svg,
[class*="MuiSvgIcon-root"],
[class*="MuiCircularProgress-root"],
[class*="MuiCheckbox-root"],
[class*="MuiRadio-root"] {
  color: var(--h-lime) !important;
}

/* Alerts / errors */
[class*="MuiAlert-root"] {
  background: rgba(30, 8, 12, .88) !important;
  border: 1px solid rgba(255,95,122,.48) !important;
  color: #fff0f3 !important;
  border-radius: 14px !important;
}

/* Dialogs and popovers */
[class*="MuiDialog-paper"],
[class*="MuiPopover-paper"],
[class*="MuiMenu-paper"] {
  background: var(--h-panel-2) !important;
  border: 1px solid rgba(118,185,0,.45) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.80), 0 0 44px rgba(118,185,0,.16) !important;
}

/* Prevent MFA transition screens from looking stretched/washed out. */
[class*="MuiBox-root"] {
  max-width: 100%;
}

[class*="MuiContainer-root"] > [class*="MuiBox-root"] {
  width: min(100%, 460px) !important;
}

/* Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(118,185,0,.70) rgba(0,0,0,.26);
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: rgba(0,0,0,.26); }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--h-lime), var(--h-green));
  border-radius: 999px;
}

@media (max-width: 720px) {
  #root::before {
    top: 14px;
    left: 14px;
    right: 14px;
    font-size: 9px;
    letter-spacing: .16em;
    text-align: center;
  }
  #root::after { display: none; }
  main {
    padding: 58px 12px 28px !important;
    align-items: center !important;
  }
  .MuiBox-root.authelia-0 {
    padding: 58px 12px 28px !important;
  }
  .MuiBox-root.authelia-0 > .MuiGrid2-container > .MuiContainer-root > .MuiGrid2-container {
    border-radius: 18px !important;
    padding: 22px 18px !important;
    backdrop-filter: blur(10px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.12) !important;
  }
  .MuiBox-root.authelia-0 > .MuiGrid2-container > .MuiContainer-root > .MuiGrid2-container::before {
    font-size: 9px;
    letter-spacing: .14em;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* MFA / TOTP method screen fix: keep internal method boxes compact.
   Previous broad Container/Grid rules made this area full-height. */
.MuiBox-root.authelia-0 .MuiContainer-root,
.MuiBox-root.authelia-0 .MuiContainer-root [class*="MuiGrid2-root"] {
  min-height: 0 !important;
}

.MuiBox-root.authelia-0 .MuiContainer-root [class*="MuiGrid2-root"] {
  max-height: none !important;
}

/* Inner MFA method cards / selectable OTP panels */
.MuiBox-root.authelia-0 [role="button"],
.MuiBox-root.authelia-0 [class*="MuiListItem"],
.MuiBox-root.authelia-0 [class*="MuiCard-root"],
.MuiBox-root.authelia-0 [class*="MuiPaper-root"] {
  min-height: 0 !important;
}

.MuiBox-root.authelia-0 [class*="MuiPaper-root"] {
  background: rgba(2, 8, 5, .58) !important;
  border: 1px solid rgba(185,255,56,.38) !important;
  border-radius: 16px !important;
  box-shadow: 0 0 20px rgba(118,185,0,.12) !important;
}

.MuiBox-root.authelia-0 [class*="MuiList-root"],
.MuiBox-root.authelia-0 [class*="MuiListItem-root"] {
  background: transparent !important;
}

.MuiBox-root.authelia-0 [class*="MuiListItem-root"] {
  padding: 14px 16px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(185,255,56,.28) !important;
  margin: 10px 0 !important;
}

.MuiBox-root.authelia-0 [class*="MuiListItemText-root"] span,
.MuiBox-root.authelia-0 [class*="MuiListItemText-root"] p {
  color: var(--h-text) !important;
  text-shadow: none !important;
}


/* Keep Authelia top AppBar/header invisible; do not style it like an MFA card. */
.MuiBox-root.authelia-0 [class*="MuiAppBar-root"],
.MuiBox-root.authelia-0 header[class*="MuiPaper-root"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.MuiBox-root.authelia-0 [class*="MuiAppBar-root"]::before,
.MuiBox-root.authelia-0 header[class*="MuiPaper-root"]::before {
  content: none !important;
  display: none !important;
}