@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --didico-bg: #050811;
  --didico-bg-gradient: radial-gradient(ellipse at 50% 10%, #0d1e38 0%, #050811 75%);
  --didico-card: rgba(10, 16, 31, 0.86);
  --didico-cyan: #00e5ff;
  --didico-cyan-glow: rgba(0, 229, 255, 0.45);
  --didico-cyan-light: #38bdf8;
  --didico-blue: #0284c7;
  --didico-border: rgba(0, 229, 255, 0.28);
  --didico-text: #f8fafc;
  --didico-text-muted: #94a3b8;
}

* {
  box-sizing: border-box;
}

html, body {
  background: var(--didico-bg-gradient) !important;
  background-attachment: fixed !important;
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  color: var(--didico-text) !important;
  min-height: 100vh !important;
  margin: 0;
  padding: 0;
}

/* Background Ambient Glow */
body::before {
  content: '';
  position: fixed;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.12) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

/* Glassmorphism Card Container */
.MuiPaper-root, 
div[class*='MuiPaper-root'], 
.MuiCard-root, 
div[class*='Card-root'] {
  background: var(--didico-card) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid var(--didico-border) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.9), 0 0 35px 0 rgba(0, 229, 255, 0.14) !important;
  padding: 24px !important;
  position: relative;
  z-index: 1;
}

/* Logo and Header */
img[alt*='Authelia'], 
img[src*='logo'], 
.MuiAvatar-root img, 
img[alt*='logo'], 
svg[class*='logo'] {
  max-height: 100px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 16px rgba(0, 229, 255, 0.55)) !important;
  margin-top: 6px !important;
  margin-bottom: 12px !important;
  transition: transform 0.3s ease, filter 0.3s ease;
}

img[alt*='Authelia']:hover, 
img[src*='logo']:hover {
  transform: scale(1.03);
  filter: drop-shadow(0 0 22px rgba(0, 229, 255, 0.75)) !important;
}

/* Form Inputs */
.MuiOutlinedInput-root, 
input, 
.MuiInputBase-root {
  background: rgba(5, 8, 17, 0.8) !important;
  border-radius: 12px !important;
  color: #f8fafc !important;
  font-family: inherit !important;
  transition: all 0.25s ease !important;
}

.MuiOutlinedInput-notchedOutline {
  border-color: rgba(0, 229, 255, 0.22) !important;
  border-width: 1px !important;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: rgba(0, 229, 255, 0.55) !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--didico-cyan) !important;
  border-width: 1.5px !important;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.4) !important;
}

.MuiInputLabel-root, 
.MuiFormLabel-root {
  color: var(--didico-text-muted) !important;
  font-family: inherit !important;
}

.MuiInputLabel-root.Mui-focused {
  color: var(--didico-cyan) !important;
  font-weight: 600 !important;
}

/* Submit & Action Buttons */
.MuiButton-contained, 
button[type='submit'], 
.MuiButton-containedPrimary {
  background: linear-gradient(135deg, #00e5ff 0%, #0284c7 100%) !important;
  color: #050811 !important;
  font-family: inherit !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.6px !important;
  border-radius: 12px !important;
  border: none !important;
  padding: 12px 24px !important;
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.45) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-transform: uppercase !important;
}

.MuiButton-contained:hover, 
button[type='submit']:hover,
.MuiButton-containedPrimary:hover {
  background: linear-gradient(135deg, #38bdf8 0%, #00e5ff 100%) !important;
  box-shadow: 0 0 30px rgba(0, 229, 255, 0.8) !important;
  transform: translateY(-2px) !important;
}

/* Secondary Buttons */
.MuiButton-outlined {
  border-color: var(--didico-border) !important;
  color: var(--didico-cyan) !important;
  border-radius: 12px !important;
}

.MuiButton-outlined:hover {
  border-color: var(--didico-cyan) !important;
  background: rgba(0, 229, 255, 0.08) !important;
}

/* Checkboxes and Toggles */
.MuiCheckbox-root {
  color: var(--didico-text-muted) !important;
}

.MuiCheckbox-root.Mui-checked,
.MuiCheckbox-colorPrimary.Mui-checked {
  color: var(--didico-cyan) !important;
}

/* Typography & Headings */
h1, h2, h3, h4, h5, h6, 
.MuiTypography-h4, 
.MuiTypography-h5, 
.MuiTypography-h6 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
}

/* Links */
a, 
.MuiTypography-root a,
.MuiLink-root {
  color: var(--didico-cyan) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  font-weight: 500;
}

a:hover, 
.MuiTypography-root a:hover,
.MuiLink-root:hover {
  color: var(--didico-cyan-light) !important;
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.6) !important;
}

/* Footer / Metadata */
.MuiTypography-caption, 
.MuiTypography-body2 {
  color: var(--didico-text-muted) !important;
  font-size: 0.85rem !important;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #050811;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 255, 0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--didico-cyan);
}