/*
 * 0effort.io Cyberpunk Theme for Authelia
 * Colors: Black bg, Cyan (#0ff) accents, Red (#f00) alerts
 */

:root {
  /* Primary colors */
  --color-primary: #0ff;
  --color-primary-dark: #0cc;
  --color-primary-light: #5ff;

  /* Background */
  --color-background: #000;
  --color-surface: #0a0a0a;
  --color-surface-elevated: #141e28;

  /* Text */
  --color-text-primary: #ecfffd;
  --color-text-secondary: #0ff;

  /* Alerts/Errors */
  --color-error: #f00;
  --color-warning: #ff6600;
  --color-success: #0f0;
}

/* Main background - force black on all devices */
html,
body,
#root,
.MuiBox-root,
[class*="MuiContainer"],
[class*="background"],
[style*="background"] {
  background: #000 !important;
  background-color: #000 !important;
}

body {
  font-family: 'Fira Mono', 'Consolas', 'Monaco', monospace !important;
  min-height: 100vh;
}

/* Override any grey/dark theme backgrounds */
div[class*="Mui"] {
  background-color: transparent !important;
}

/* Keep cards with their styled background */
.MuiPaper-root {
  background-color: rgba(20, 30, 40, 0.85) !important;
}

/* Card/Container styling */
.MuiPaper-root,
.MuiCard-root {
  background-color: rgba(20, 30, 40, 0.85) !important;
  border: 1px solid rgba(0, 255, 255, 0.3) !important;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.15), inset 0 0 20px rgba(0, 0, 0, 0.5) !important;
}

/* Primary buttons - cyan glow */
.MuiButton-containedPrimary {
  background: linear-gradient(180deg, #0cc 0%, #099 100%) !important;
  color: #000 !important;
  font-weight: bold !important;
  text-shadow: none !important;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5) !important;
  border: 1px solid #0ff !important;
}

.MuiButton-containedPrimary:hover {
  background: linear-gradient(180deg, #0ff 0%, #0cc 100%) !important;
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.8) !important;
}

/* Text inputs */
.MuiOutlinedInput-root {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

.MuiOutlinedInput-notchedOutline {
  border-color: rgba(0, 255, 255, 0.4) !important;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: #0ff !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #0ff !important;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.3) !important;
}

.MuiInputBase-input {
  color: #ecfffd !important;
  font-family: 'Fira Mono', 'Consolas', monospace !important;
}

.MuiInputLabel-root {
  color: rgba(0, 255, 255, 0.7) !important;
}

.MuiInputLabel-root.Mui-focused {
  color: #0ff !important;
}

/* Links */
a {
  color: #0ff !important;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

a:hover {
  color: #5ff !important;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
}

/* Error messages - red glow */
.MuiAlert-standardError,
.MuiAlert-filledError {
  background-color: rgba(255, 0, 0, 0.15) !important;
  border: 1px solid rgba(255, 0, 0, 0.5) !important;
  color: #f00 !important;
  text-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

/* Success messages - green */
.MuiAlert-standardSuccess,
.MuiAlert-filledSuccess {
  background-color: rgba(0, 255, 0, 0.15) !important;
  border: 1px solid rgba(0, 255, 0, 0.5) !important;
  color: #0f0 !important;
}

/* Typography */
.MuiTypography-root {
  color: #ecfffd !important;
}

.MuiTypography-h1,
.MuiTypography-h2,
.MuiTypography-h3,
.MuiTypography-h4,
.MuiTypography-h5,
.MuiTypography-h6 {
  color: #0ff !important;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
  font-family: 'Fira Mono', 'Consolas', monospace !important;
}

/* Checkboxes and toggles */
.MuiCheckbox-root {
  color: rgba(0, 255, 255, 0.5) !important;
}

.MuiCheckbox-root.Mui-checked {
  color: #0ff !important;
}

/* TOTP input fields */
input[type="tel"],
input[inputmode="numeric"] {
  background-color: rgba(0, 0, 0, 0.8) !important;
  border: 2px solid rgba(0, 255, 255, 0.4) !important;
  color: #0ff !important;
  font-family: 'Fira Mono', monospace !important;
  font-size: 1.5rem !important;
  text-align: center;
}

input[type="tel"]:focus,
input[inputmode="numeric"]:focus {
  border-color: #0ff !important;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5) !important;
  outline: none !important;
}

/* Loading spinner */
.MuiCircularProgress-root {
  color: #0ff !important;
}

/* Dividers */
.MuiDivider-root {
  background-color: rgba(0, 255, 255, 0.2) !important;
}

/* Footer/branding area */
footer,
.MuiTypography-caption {
  color: rgba(0, 255, 255, 0.5) !important;
}

/* Initial glitch on load */
@keyframes glitchOnce {
  0%, 100% {
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
    transform: translate(0);
  }
  20% {
    text-shadow: -3px 0 #f00, 3px 0 #0ff;
    transform: translate(-3px, 0);
  }
  40% {
    text-shadow: 3px 0 #f00, -3px 0 #0ff;
    transform: translate(3px, 1px);
  }
  60% {
    text-shadow: -2px 0 #f00, 2px 0 #0ff;
    transform: translate(-2px, -1px);
  }
  80% {
    text-shadow: 2px 0 #f00, -2px 0 #0ff;
    transform: translate(2px, 0);
  }
}

/* Recurring glitch - fires at end of cycle */
@keyframes glitch1 {
  0%, 96% { text-shadow: 0 0 10px rgba(0, 255, 255, 0.3); transform: translate(0); }
  96.5% { text-shadow: -3px 0 #f00, 3px 0 #0ff; transform: translate(-3px, 0); }
  97% { text-shadow: 3px 0 #f00, -3px 0 #0ff; transform: translate(3px, 1px); }
  97.5% { text-shadow: -2px 0 #f00, 2px 0 #0ff; transform: translate(-2px, -1px); }
  98% { text-shadow: 0 0 10px rgba(0, 255, 255, 0.3); transform: translate(0); }
}

@keyframes glitch2 {
  0%, 94% { text-shadow: 0 0 10px rgba(0, 255, 255, 0.3); transform: translate(0); }
  94.5% { text-shadow: -3px 0 #f00, 3px 0 #0ff; transform: translate(-3px, 0); }
  95% { text-shadow: 3px 0 #f00, -3px 0 #0ff; transform: translate(3px, 1px); }
  95.5% { text-shadow: -2px 0 #f00, 2px 0 #0ff; transform: translate(-2px, -1px); }
  96% { text-shadow: 0 0 10px rgba(0, 255, 255, 0.3); transform: translate(0); }
}

@keyframes glitch3 {
  0%, 92% { text-shadow: 0 0 10px rgba(0, 255, 255, 0.3); transform: translate(0); }
  92.5% { text-shadow: -3px 0 #f00, 3px 0 #0ff; transform: translate(-3px, 0); }
  93% { text-shadow: 3px 0 #f00, -3px 0 #0ff; transform: translate(3px, 1px); }
  93.5% { text-shadow: -2px 0 #f00, 2px 0 #0ff; transform: translate(-2px, -1px); }
  94% { text-shadow: 0 0 10px rgba(0, 255, 255, 0.3); transform: translate(0); }
}

/* Apply glitch to headings - staggered durations create pseudo-random feel */
.MuiTypography-h1,
.MuiTypography-h2,
.MuiTypography-h3,
.MuiTypography-h4,
.MuiTypography-h5,
.MuiTypography-h6 {
  animation:
    glitchOnce 0.2s ease-out 0.5s 1,
    glitch1 4.7s ease-in-out 1s infinite,
    glitch2 6.3s ease-in-out 2.1s infinite,
    glitch3 8.9s ease-in-out 3.4s infinite;
}

/* Animated scanline effect */
@keyframes scanlines {
  0% { transform: translateY(0); }
  100% { transform: translateY(4px); }
}

body::before {
  content: "";
  position: fixed;
  top: -4px;
  left: 0;
  width: 100%;
  height: calc(100% + 4px);
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15) 0px,
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 4px
  );
  animation: scanlines 0.15s linear infinite;
  z-index: 9999;
}