/* ============================================
   OBSIDIAN Design System — Authelia Portal
   Nexus Growth © 2026
   ============================================ */

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

/* === ROOT TOKENS === */
:root {
  --bg-primary: #000000;
  --bg-secondary: #050506;
  --bg-card: #0A0A0A;
  --bg-elevated: #111111;
  --bg-surface: rgba(20,20,30,0.5);
  --brand: #FF6B00;
  --brand-light: #FF8533;
  --brand-dark: #CC5500;
  --brand-glow: rgba(255,107,0,0.5);
  --brand-muted: rgba(255,107,0,0.15);
  --text-primary: #f0f0f5;
  --text-secondary: #A0A0B0;
  --text-muted: #606070;
  --border: rgba(255,107,0,0.15);
  --border-hover: rgba(255,107,0,0.3);
  --border-active: rgba(255,107,0,0.5);
  --success: #00FF88;
  --warning: #FFD600;
  --danger: #FF2D2D;
  --info: #00BFFF;
  --glow-sm: 0 0 10px rgba(255,107,0,0.3);
  --glow-md: 0 0 20px rgba(255,107,0,0.4);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --font-display: "Plus Jakarta Sans", sans-serif;
  --font-body: "DM Sans", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --shadow-2: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-3: 0 8px 30px rgba(0,0,0,0.5);
}

/* === BACKGROUND === */
body, html {
  background: var(--bg-primary) !important;
  font-family: var(--font-body) !important;
  color: var(--text-primary) !important;
}

/* Animated gradient orbs background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 600px 600px at 80% 10%, rgba(255,107,0,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 400px 400px at 15% 85%, rgba(204,85,0,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 300px 300px at 50% 50%, rgba(255,149,0,0.04) 0%, transparent 70%);
  animation: orbPulse 12s ease-in-out infinite alternate;
}

@keyframes orbPulse {
  0% { opacity: 1; }
  100% { opacity: 0.6; }
}

/* Subtle grid overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(255,107,0,0.02) 59px, rgba(255,107,0,0.02) 60px),
    repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(255,107,0,0.02) 59px, rgba(255,107,0,0.02) 60px);
}

#root {
  position: relative;
  z-index: 1;
}

/* === MUI OVERRIDES — PAPER / CARD === */
.MuiPaper-root {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-3) !important;
  backdrop-filter: blur(12px);
}

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6,
.MuiTypography-h1, .MuiTypography-h2, .MuiTypography-h3,
.MuiTypography-h4, .MuiTypography-h5, .MuiTypography-h6 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}

.MuiTypography-root {
  font-family: var(--font-body) !important;
}

.MuiTypography-body1, .MuiTypography-body2 {
  color: var(--text-secondary) !important;
}

.MuiTypography-caption {
  color: var(--text-muted) !important;
  font-family: var(--font-mono) !important;
}

/* === INPUTS === */
.MuiInputBase-root,
.MuiOutlinedInput-root,
.MuiFilledInput-root {
  background: var(--bg-elevated) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body) !important;
  color: var(--text-primary) !important;
  transition: all 0.2s ease !important;
}

.MuiOutlinedInput-notchedOutline {
  border-color: rgba(255,255,255,0.06) !important;
  transition: all 0.2s ease !important;
}

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

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

.MuiInputLabel-root {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
}

.MuiInputLabel-root.Mui-focused {
  color: var(--brand) !important;
}

/* === BUTTONS — PRIMARY === */
.MuiButton-containedPrimary,
button[type="submit"].MuiButton-containedPrimary {
  background: linear-gradient(135deg, #FF5500, #FF6B00, #FF8533) !important;
  color: #000 !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--glow-sm) !important;
  letter-spacing: 0 !important;
  transition: all 0.25s ease !important;
}

.MuiButton-containedPrimary:hover {
  box-shadow: var(--glow-md) !important;
  transform: translateY(-1px);
}

/* === BUTTONS — SECONDARY/TEXT === */
.MuiButton-text, .MuiButton-outlined {
  color: var(--brand) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  border-radius: var(--radius-md) !important;
}

.MuiButton-outlined {
  border-color: var(--brand) !important;
}

.MuiButton-text:hover, .MuiButton-outlined:hover {
  background: var(--brand-muted) !important;
}

/* === LINKS === */
a, .MuiLink-root {
  color: var(--brand-light) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

a:hover, .MuiLink-root:hover {
  color: var(--brand) !important;
}

/* === CHECKBOX / SWITCH === */
.MuiCheckbox-root.Mui-checked,
.MuiSwitch-switchBase.Mui-checked {
  color: var(--brand) !important;
}

.MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track {
  background-color: var(--brand-dark) !important;
}

/* === ICONS === */
.MuiSvgIcon-root {
  color: var(--text-secondary) !important;
}

.MuiSvgIcon-colorPrimary {
  color: var(--brand) !important;
}

/* === ALERTS === */
.MuiAlert-root {
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body) !important;
  border-left: 3px solid !important;
}

.MuiAlert-standardError {
  background: rgba(255,45,45,0.05) !important;
  border-left-color: var(--danger) !important;
  color: var(--danger) !important;
}

.MuiAlert-standardSuccess {
  background: rgba(0,255,136,0.05) !important;
  border-left-color: var(--success) !important;
  color: var(--success) !important;
}

.MuiAlert-standardWarning {
  background: rgba(255,214,0,0.05) !important;
  border-left-color: var(--warning) !important;
  color: var(--warning) !important;
}

.MuiAlert-standardInfo {
  background: rgba(0,191,255,0.05) !important;
  border-left-color: var(--info) !important;
  color: var(--info) !important;
}

/* === SNACKBAR === */
.MuiSnackbarContent-root {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-md) !important;
}

/* === LOGO AREA — NEXUS BRANDING === */
img[src*="logo"], img[alt*="logo"], img[alt*="Logo"] {
  filter: hue-rotate(0deg) brightness(1.1);
}

/* === AUTHELIA TITLE === */
#root > div > div > div > h1,
#root h6.MuiTypography-h6 {
  background: linear-gradient(135deg, #FF5500, #FF6A00 40%, #FF9500 70%, #FFBA00) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
}

/* === LOADING / PROGRESS === */
.MuiCircularProgress-root,
.MuiLinearProgress-root {
  color: var(--brand) !important;
}

.MuiLinearProgress-bar {
  background: linear-gradient(90deg, var(--brand-dark), var(--brand), var(--brand-light)) !important;
}

/* === TOTP / 2FA INPUT === */
input[type="tel"], input[inputmode="numeric"] {
  background: var(--bg-elevated) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-mono) !important;
  font-size: 1.5rem !important;
  text-align: center !important;
}

input[type="tel"]:focus, input[inputmode="numeric"]:focus {
  border-color: var(--brand) !important;
  box-shadow: var(--glow-sm) !important;
  outline: none !important;
}

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

/* === FOOTER TEXT === */
.MuiTypography-subtitle2,
[class*="powered"] {
  color: var(--text-muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
}

/* === SCROLLBAR === */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--brand-dark);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--brand);
}

/* === SMOOTH TRANSITIONS === */
* {
  transition-property: background-color, border-color, color, box-shadow, transform;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}

/* Fix: dont break animations */
@keyframes orbPulse {
  0% { opacity: 1; }
  100% { opacity: 0.6; }
}