/* ================================================================
   LOTUSGUILD TERMINAL DESIGN SYSTEM v1.2
   Authelia Portal — custom.css
   Aesthetic: Anduril × Hacker Terminal
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&display=swap');

/* ----------------------------------------------------------------
   Design tokens (mirrors base.css)
   ---------------------------------------------------------------- */
:root {
  --bg-primary:          #030508;
  --bg-secondary:        #060c14;
  --bg-tertiary:         #0d1520;
  --bg-card:             #07101a;
  --bg-terminal:         #010304;

  --accent-orange:       #FF6B00;
  --accent-orange-bright:#FF8C2B;
  --accent-orange-dim:   rgba(255,107,0,0.12);
  --accent-orange-border:rgba(255,107,0,0.35);

  --accent-cyan:         #00D4FF;
  --accent-cyan-bright:  #33DFFF;
  --accent-cyan-dim:     rgba(0,212,255,0.10);
  --accent-cyan-border:  rgba(0,212,255,0.22);

  --accent-green:        #00FF88;
  --accent-green-dim:    rgba(0,255,136,0.10);
  --accent-green-border: rgba(0,255,136,0.22);

  --accent-red:          #FF2D55;
  --accent-red-dim:      rgba(255,45,85,0.12);

  --text-primary:        #c4d9ee;
  --text-secondary:      #7fa3bf;
  --text-muted:          #3e607a;

  --border-color:        rgba(0,212,255,0.16);
  --border-color-hi:     #00D4FF;
  --border-color-dim:    rgba(0,212,255,0.07);

  --glow-orange:         0 0 6px #FF6B00, 0 0 16px rgba(255,107,0,0.55);
  --glow-orange-intense: 0 0 8px #FF6B00, 0 0 22px #FF6B00, 0 0 40px rgba(255,107,0,0.45);
  --glow-cyan:           0 0 6px #00D4FF, 0 0 16px rgba(0,212,255,0.45);
  --glow-cyan-intense:   0 0 8px #00D4FF, 0 0 22px #00D4FF, 0 0 38px rgba(0,212,255,0.35);
  --glow-green:          0 0 6px #00FF88, 0 0 16px rgba(0,255,136,0.45);
  --glow-red:            0 0 6px #FF2D55, 0 0 16px rgba(255,45,85,0.45);

  --box-glow-orange:     0 0 18px rgba(255,107,0,0.22),  0 0 36px rgba(255,107,0,0.08);
  --box-glow-cyan:       0 0 18px rgba(0,212,255,0.18),  0 0 36px rgba(0,212,255,0.06);
  --box-glow-red:        0 0 18px rgba(255,45,85,0.22),  0 0 36px rgba(255,45,85,0.08);

  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
  --corner-cut: 10px;
  --transition-fast: all 0.12s ease;
}

/* ----------------------------------------------------------------
   Reset overrides & base
   ---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box !important;
}

/* ----------------------------------------------------------------
   Body — dot-grid tactical background
   ---------------------------------------------------------------- */
body {
  background-color: var(--bg-primary) !important;
  background-image: radial-gradient(circle, rgba(0,212,255,0.055) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
  font-family: var(--font-mono) !important;
  color: var(--text-primary) !important;
  min-height: 100vh;
}

/* Scanlines overlay */
body::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.07) 0px,
    rgba(0,0,0,0.07) 1px,
    transparent 1px,
    transparent 3px
  ) !important;
  pointer-events: none !important;
  z-index: 9999 !important;
}

/* Corner vignette */
body::after {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(0,0,0,0.60) 100%
  ) !important;
  pointer-events: none !important;
  z-index: 9998 !important;
}

/* ----------------------------------------------------------------
   All text / typography
   ---------------------------------------------------------------- */
.MuiTypography-root,
.MuiInputBase-input,
.MuiFormLabel-root,
.MuiFormHelperText-root,
label, p, span, div {
  font-family: var(--font-mono) !important;
  color: var(--text-primary) !important;
}

/* Heading — page title / section headers */
h1, h2, h3, h4, h5, h6,
.MuiTypography-h5,
.MuiTypography-h6 {
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  color: var(--accent-orange) !important;
  text-shadow: var(--glow-orange) !important;
}

/* ----------------------------------------------------------------
   Main card / paper — angular clip-path + cyan border
   ---------------------------------------------------------------- */
.MuiCard-root,
.MuiPaper-root {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  box-shadow: var(--box-glow-cyan), 0 8px 32px rgba(0,0,0,0.6) !important;
  clip-path: polygon(
    0 0,
    calc(100% - var(--corner-cut)) 0,
    100% var(--corner-cut),
    100% 100%,
    var(--corner-cut) 100%,
    0 calc(100% - var(--corner-cut))
  ) !important;
  position: relative !important;
  transition: var(--transition-fast) !important;
}

/* Top-right corner accent triangle */
.MuiCard-root::before,
.MuiPaper-root::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-width: 0 var(--corner-cut) var(--corner-cut) 0 !important;
  border-color: transparent var(--accent-cyan) transparent transparent !important;
  opacity: 0.5 !important;
  z-index: 1 !important;
}

/* ----------------------------------------------------------------
   Logo
   ---------------------------------------------------------------- */
img[alt="Authelia"] {
  image-rendering: crisp-edges !important;
  filter: drop-shadow(0 0 12px rgba(0,212,255,0.4)) !important;
  transition: filter 0.25s ease !important;
}
img[alt="Authelia"]:hover {
  filter: drop-shadow(0 0 18px rgba(255,107,0,0.5)) !important;
}

/* ----------------------------------------------------------------
   Input fields
   ---------------------------------------------------------------- */
.MuiOutlinedInput-root {
  background: var(--bg-terminal) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%) !important;
}

.MuiOutlinedInput-notchedOutline {
  border-color: var(--border-color) !important;
  border-radius: 0 !important;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--accent-cyan-border) !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--accent-cyan) !important;
  box-shadow: var(--box-glow-cyan) !important;
}

.MuiInputBase-input {
  color: var(--text-primary) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.8rem !important;
  caret-color: var(--accent-cyan) !important;
}

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

/* Labels */
.MuiInputLabel-root,
.MuiFormLabel-root {
  color: var(--text-secondary) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
}

.MuiInputLabel-root.Mui-focused,
.MuiFormLabel-root.Mui-focused {
  color: var(--accent-cyan) !important;
  text-shadow: var(--glow-cyan) !important;
}

/* Helper / error text */
.MuiFormHelperText-root {
  font-family: var(--font-mono) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.05em !important;
  color: var(--text-muted) !important;
}

.MuiFormHelperText-root.Mui-error {
  color: var(--accent-red) !important;
  text-shadow: var(--glow-red) !important;
}

/* ----------------------------------------------------------------
   Primary button — Anduril Orange
   ---------------------------------------------------------------- */
.MuiButton-containedPrimary,
.MuiButton-contained {
  background: transparent !important;
  color: var(--accent-orange) !important;
  border: 1px solid var(--accent-orange-border) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  box-shadow: none !important;
  clip-path: polygon(
    0 0,
    calc(100% - 7px) 0,
    100% 7px,
    100% 100%,
    7px 100%,
    0 calc(100% - 7px)
  ) !important;
  transition: var(--transition-fast) !important;
  padding: 0.5rem 1.2rem !important;
}

.MuiButton-containedPrimary:hover,
.MuiButton-contained:hover {
  background: var(--accent-orange-dim) !important;
  border-color: var(--accent-orange) !important;
  color: var(--accent-orange-bright) !important;
  box-shadow: var(--box-glow-orange) !important;
  text-shadow: var(--glow-orange) !important;
}

.MuiButton-containedPrimary:active,
.MuiButton-contained:active {
  transform: translateY(1px) !important;
}

/* ----------------------------------------------------------------
   Text / outlined buttons — Cyan
   ---------------------------------------------------------------- */
.MuiButton-text,
.MuiButton-textPrimary,
.MuiButton-outlined,
.MuiButton-outlinedPrimary {
  color: var(--accent-cyan) !important;
  border-color: var(--accent-cyan-border) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  border-radius: 0 !important;
  transition: var(--transition-fast) !important;
}

.MuiButton-text:hover,
.MuiButton-textPrimary:hover {
  background: var(--accent-cyan-dim) !important;
  color: var(--accent-cyan-bright) !important;
  text-shadow: var(--glow-cyan) !important;
}

/* ----------------------------------------------------------------
   Links
   ---------------------------------------------------------------- */
a {
  color: var(--accent-cyan) !important;
  font-family: var(--font-mono) !important;
  text-decoration: none !important;
  transition: var(--transition-fast) !important;
}
a:hover {
  color: var(--accent-orange) !important;
  text-shadow: var(--glow-orange) !important;
}

/* ----------------------------------------------------------------
   Checkbox / Switch
   ---------------------------------------------------------------- */
.MuiCheckbox-root {
  color: var(--border-color) !important;
}
.MuiCheckbox-root.Mui-checked {
  color: var(--accent-cyan) !important;
}
.MuiCheckbox-root.Mui-checked svg {
  filter: drop-shadow(0 0 4px rgba(0,212,255,0.6)) !important;
}

.MuiSwitch-switchBase.Mui-checked {
  color: var(--accent-cyan) !important;
}
.MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track {
  background-color: var(--accent-cyan) !important;
  opacity: 0.5 !important;
}
.MuiSwitch-track {
  background-color: var(--text-muted) !important;
}

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

/* ----------------------------------------------------------------
   Alert banners
   ---------------------------------------------------------------- */
.MuiAlert-root {
  font-family: var(--font-mono) !important;
  font-size: 0.75rem !important;
  border-radius: 0 !important;
  border-left: 3px solid currentColor !important;
  background: var(--bg-secondary) !important;
  clip-path: none !important;
}

.MuiAlert-standardError,
.MuiAlert-filledError {
  color: var(--accent-red) !important;
  background: rgba(255,45,85,0.07) !important;
  border-color: var(--accent-red) !important;
}

.MuiAlert-standardSuccess,
.MuiAlert-filledSuccess {
  color: var(--accent-green) !important;
  background: var(--accent-green-dim) !important;
  border-color: var(--accent-green) !important;
}

.MuiAlert-standardInfo,
.MuiAlert-filledInfo {
  color: var(--accent-cyan) !important;
  background: var(--accent-cyan-dim) !important;
  border-color: var(--accent-cyan) !important;
}

.MuiAlert-standardWarning,
.MuiAlert-filledWarning {
  color: var(--accent-orange) !important;
  background: var(--accent-orange-dim) !important;
  border-color: var(--accent-orange) !important;
}

/* Alert icon color matching */
.MuiAlert-icon {
  color: inherit !important;
}

/* ----------------------------------------------------------------
   Select dropdowns
   ---------------------------------------------------------------- */
.MuiSelect-select {
  font-family: var(--font-mono) !important;
  color: var(--text-primary) !important;
}

.MuiMenu-paper,
.MuiPopover-paper {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  color: var(--text-primary) !important;
}

.MuiMenuItem-root {
  font-family: var(--font-mono) !important;
  font-size: 0.78rem !important;
  color: var(--text-primary) !important;
}

.MuiMenuItem-root:hover {
  background: var(--accent-cyan-dim) !important;
  color: var(--accent-cyan) !important;
}

.MuiMenuItem-root.Mui-selected {
  background: rgba(0,212,255,0.08) !important;
  color: var(--accent-cyan) !important;
}

/* ----------------------------------------------------------------
   OTP / Code input boxes
   ---------------------------------------------------------------- */
input[type="tel"],
input[type="number"] {
  font-family: var(--font-mono) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--accent-cyan) !important;
  text-shadow: var(--glow-cyan) !important;
  letter-spacing: 0.15em !important;
  text-align: center !important;
  caret-color: var(--accent-orange) !important;
}

/* ----------------------------------------------------------------
   Custom scrollbar
   ---------------------------------------------------------------- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-cyan);
  box-shadow: var(--glow-cyan);
}

/* ----------------------------------------------------------------
   Focus-visible ring
   ---------------------------------------------------------------- */
*:focus-visible {
  outline: 2px solid var(--accent-cyan) !important;
  outline-offset: 2px !important;
  box-shadow: var(--box-glow-cyan) !important;
}

/* ----------------------------------------------------------------
   Stepper / wizard steps (2FA flow)
   ---------------------------------------------------------------- */
.MuiStepLabel-label {
  font-family: var(--font-mono) !important;
  font-size: 0.68rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--text-muted) !important;
}

.MuiStepLabel-label.Mui-active {
  color: var(--accent-orange) !important;
  text-shadow: var(--glow-orange) !important;
  font-weight: 700 !important;
}

.MuiStepLabel-label.Mui-completed {
  color: var(--accent-green) !important;
  font-weight: 700 !important;
}

.MuiStepIcon-root {
  color: var(--border-color) !important;
}
.MuiStepIcon-root.Mui-active {
  color: var(--accent-orange) !important;
  filter: drop-shadow(0 0 6px rgba(255,107,0,0.6)) !important;
}
.MuiStepIcon-root.Mui-completed {
  color: var(--accent-green) !important;
  filter: drop-shadow(0 0 6px rgba(0,255,136,0.5)) !important;
}

.MuiStepConnector-line {
  border-color: var(--border-color-dim) !important;
}

/* ----------------------------------------------------------------
   Linear progress bar (loading)
   ---------------------------------------------------------------- */
.MuiLinearProgress-root {
  background: var(--bg-secondary) !important;
  border-radius: 0 !important;
  height: 3px !important;
}
.MuiLinearProgress-bar {
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-orange)) !important;
  box-shadow: 0 0 8px rgba(0,212,255,0.5) !important;
}

/* ----------------------------------------------------------------
   Circular progress (loading spinner)
   ---------------------------------------------------------------- */
.MuiCircularProgress-root {
  color: var(--accent-cyan) !important;
}

/* ----------------------------------------------------------------
   Tooltip
   ---------------------------------------------------------------- */
.MuiTooltip-tooltip {
  font-family: var(--font-mono) !important;
  font-size: 0.65rem !important;
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  color: var(--text-primary) !important;
}

/* ----------------------------------------------------------------
   Cursor blink on focused inputs
   ---------------------------------------------------------------- */
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.MuiOutlinedInput-root.Mui-focused .MuiInputBase-input {
  animation: none !important; /* caret-color handles it */
}

/* ----------------------------------------------------------------
   Branding footer watermark
   ---------------------------------------------------------------- */
#root::after {
  content: 'LOTUSGUILD SECURE PORTAL // AUTH.LOTUSGUILD.ORG';
  display: block;
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
  opacity: 0.6;
}