/* Matrix Theme for Authelia — phosphor green on black */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

/* ── Global reset ────────────────────────────────────────────── */
*, *::before, *::after {
  font-family: 'Share Tech Mono', 'Courier New', monospace !important;
  letter-spacing: 0.04em;
}

body {
  background: #000 !important;
  color: #00ff41 !important;
}

/* Scanline overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 255, 65, 0.03) 2px,
    rgba(0, 255, 65, 0.03) 4px
  );
}

/* ── Background / layout ─────────────────────────────────────── */
#root,
.MuiContainer-root,
div[class*="makeStyles-root"],
div[class*="jss"] {
  background: #000 !important;
}

/* ── Cards / Paper ───────────────────────────────────────────── */
.MuiPaper-root {
  background: #0a0a0a !important;
  border: 1px solid #00ff41 !important;
  box-shadow:
    0 0 8px rgba(0, 255, 65, 0.4),
    0 0 24px rgba(0, 255, 65, 0.15),
    inset 0 0 12px rgba(0, 255, 65, 0.05) !important;
  color: #00ff41 !important;
  border-radius: 0 !important;
}

/* ── Typography ──────────────────────────────────────────────── */
.MuiTypography-root,
h1, h2, h3, h4, h5, h6, p, span, label {
  color: #00ff41 !important;
}

.MuiTypography-h5,
.MuiTypography-h6 {
  text-shadow: 0 0 10px rgba(0, 255, 65, 0.7) !important;
  text-transform: uppercase !important;
}

/* ── Text inputs ─────────────────────────────────────────────── */
.MuiOutlinedInput-root {
  background: #000 !important;
  border-radius: 0 !important;
  color: #00ff41 !important;
}

.MuiOutlinedInput-notchedOutline {
  border-color: #004d14 !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: #00b32d !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #00ff41 !important;
  box-shadow: 0 0 8px rgba(0, 255, 65, 0.5) !important;
}

.MuiInputBase-input {
  color: #00ff41 !important;
  caret-color: #00ff41 !important;
}

/* Placeholder text */
.MuiInputBase-input::placeholder {
  color: #006622 !important;
  opacity: 1 !important;
}

/* Label */
.MuiInputLabel-root {
  color: #008822 !important;
}
.MuiInputLabel-root.Mui-focused {
  color: #00ff41 !important;
  text-shadow: 0 0 6px rgba(0, 255, 65, 0.6) !important;
}

/* ── WebKit autofill override (kills yellow flash) ───────────── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #000 inset !important;
  -webkit-text-fill-color: #00ff41 !important;
  caret-color: #00ff41 !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.MuiButton-contained,
.MuiButton-containedPrimary {
  background: transparent !important;
  border: 1px solid #00ff41 !important;
  color: #00ff41 !important;
  border-radius: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  box-shadow: 0 0 6px rgba(0, 255, 65, 0.3) !important;
  transition: box-shadow 0.2s, background 0.2s !important;
}

.MuiButton-contained:hover,
.MuiButton-containedPrimary:hover {
  background: rgba(0, 255, 65, 0.08) !important;
  box-shadow:
    0 0 12px rgba(0, 255, 65, 0.7),
    0 0 28px rgba(0, 255, 65, 0.3) !important;
}

.MuiButton-contained:disabled {
  border-color: #003a0f !important;
  color: #003a0f !important;
  box-shadow: none !important;
}

.MuiButton-text,
.MuiButton-outlined {
  color: #00cc34 !important;
  border-color: #00cc34 !important;
  border-radius: 0 !important;
}

.MuiButton-text:hover,
.MuiButton-outlined:hover {
  color: #00ff41 !important;
  border-color: #00ff41 !important;
  background: rgba(0, 255, 65, 0.06) !important;
}

/* ── Icon buttons (visibility toggle, etc.) ──────────────────── */
.MuiIconButton-root {
  color: #00aa2a !important;
}
.MuiIconButton-root:hover {
  color: #00ff41 !important;
  background: rgba(0, 255, 65, 0.08) !important;
}

/* ── Checkboxes & switches ───────────────────────────────────── */
.MuiCheckbox-root,
.MuiSwitch-root {
  color: #00ff41 !important;
}
.MuiCheckbox-root.Mui-checked,
.MuiSwitch-track {
  color: #00ff41 !important;
}
.MuiSwitch-thumb {
  background-color: #00ff41 !important;
}

/* ── Links ───────────────────────────────────────────────────── */
a, a:visited {
  color: #00cc34 !important;
  text-decoration: none !important;
}
a:hover {
  color: #00ff41 !important;
  text-shadow: 0 0 6px rgba(0, 255, 65, 0.6) !important;
}

/* ── Dividers ────────────────────────────────────────────────── */
.MuiDivider-root {
  border-color: #003a0f !important;
}

/* ── Alerts / notifications ──────────────────────────────────── */
.MuiAlert-root {
  background: #0a0f0a !important;
  border: 1px solid #00ff41 !important;
  color: #00ff41 !important;
  border-radius: 0 !important;
}
.MuiAlert-icon {
  color: #00ff41 !important;
}

/* ── Circular progress spinner ───────────────────────────────── */
.MuiCircularProgress-root {
  color: #00ff41 !important;
}

/* ── Tooltips ────────────────────────────────────────────────── */
.MuiTooltip-tooltip {
  background: #0a0a0a !important;
  border: 1px solid #00ff41 !important;
  color: #00ff41 !important;
  border-radius: 0 !important;
  font-size: 0.75rem !important;
}

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: #000;
}
::-webkit-scrollbar-thumb {
  background: #00ff41;
}
::-webkit-scrollbar-thumb:hover {
  background: #00cc34;
}

/* ── MUI Select / dropdown ───────────────────────────────────── */
.MuiSelect-root,
.MuiMenuItem-root {
  background: #000 !important;
  color: #00ff41 !important;
}
.MuiMenu-paper {
  background: #0a0a0a !important;
  border: 1px solid #00ff41 !important;
  border-radius: 0 !important;
}
.MuiMenuItem-root:hover {
  background: rgba(0, 255, 65, 0.1) !important;
}

/* ── Tabs (e.g., passkey / password toggle) ──────────────────── */
.MuiTab-root {
  color: #006622 !important;
  text-transform: uppercase !important;
}
.MuiTab-root.Mui-selected {
  color: #00ff41 !important;
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.6) !important;
}
.MuiTabs-indicator {
  background-color: #00ff41 !important;
  box-shadow: 0 0 6px rgba(0, 255, 65, 0.7) !important;
}

/* ── Chip (2FA badge, etc.) ──────────────────────────────────── */
.MuiChip-root {
  background: transparent !important;
  border: 1px solid #00ff41 !important;
  color: #00ff41 !important;
  border-radius: 0 !important;
}