/*
  Wainga · Authelia Custom Theme
  Place at: /home/sunil-jeurkar/authelia/config/assets/custom.css
  Then add to configuration.yml:
    server:
      asset_path: /config/assets
  Then restart: docker restart authelia
*/

/* ── Base reset ──────────────────────────────────────────────── */
:root {
  --brand-1: #0ea5e9;
  --brand-2: #14b8a6;
  --brand-3: #2563eb;
}

html, body {
  background: #05080f !important;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
}

/* ── Animated background gradient ─────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%, rgba(14,165,233,.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(37,99,235,.15) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 60% 10%, rgba(20,184,166,.1) 0%, transparent 50%),
    linear-gradient(180deg, #05080f 0%, #080d1a 100%);
  pointer-events: none;
}

/* Grid overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: gridDrift 40s linear infinite;
  pointer-events: none;
}

@keyframes gridDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 48px 48px; }
}

/* ── Root app container ─────────────────────────────────────────── */
#root, #app {
  position: relative;
  z-index: 1;
}

/* ── Card / Paper ────────────────────────────────────────────────── */
.MuiPaper-root,
[class*="MuiPaper"],
[class*="makeStyles-paper"],
[class*="jss"] {
  background: rgba(20, 32, 58, 0.97) !important;
  backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 20px !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.6) !important;
  animation: cardIn .65s cubic-bezier(.22,1,.36,1) both;
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* ── Global text fallback — force all app text to be light ───────── */
/* Authelia sets data-theme="light" on body which makes MUI use dark text.
   We override all text inside #root with high-specificity !important rule. */
#root * {
  color: #e2e8f0 !important;
}

/* Extra specificity for light-theme body */
body[data-theme="light"] #root * {
  color: #e2e8f0 !important;
}

/* ── Typography ──────────────────────────────────────────────────── */
.MuiTypography-root,
.MuiTypography-h5,
.MuiTypography-h6,
.MuiTypography-body1,
.MuiTypography-body2,
.MuiTypography-subtitle1,
.MuiTypography-subtitle2 {
  color: #f1f5f9 !important;
}

.MuiTypography-colorTextSecondary {
  color: rgba(255,255,255,.65) !important;
}

/* ── User avatar icon ────────────────────────────────────────────── */
.MuiAvatar-root {
  background: linear-gradient(135deg, rgba(14,165,233,.2), rgba(37,99,235,.2)) !important;
  border: 2px solid rgba(14,165,233,.3) !important;
}

.MuiAvatar-root svg,
.MuiAvatar-root .MuiSvgIcon-root {
  fill: #7dd3fc !important;
}

/* ── Inputs ──────────────────────────────────────────────────────── */
.MuiInputBase-root,
.MuiOutlinedInput-root,
.MuiFilledInput-root {
  background: rgba(255,255,255,.05) !important;
  border-radius: 10px !important;
  color: #f1f5f9 !important;
  transition: background .2s, box-shadow .2s !important;
}

.MuiInputBase-input,
.MuiOutlinedInput-input {
  color: #f1f5f9 !important;
  caret-color: #0ea5e9 !important;
}

.MuiInputBase-input::placeholder {
  color: rgba(255,255,255,.3) !important;
  opacity: 1 !important;
}

/* Input border */
.MuiOutlinedInput-notchedOutline {
  border-color: rgba(255,255,255,.1) !important;
  border-radius: 10px !important;
  transition: border-color .2s !important;
}

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

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #0ea5e9 !important;
  box-shadow: 0 0 0 3px rgba(14,165,233,.15) !important;
}

/* Label */
.MuiInputLabel-root,
.MuiFormLabel-root {
  color: rgba(255,255,255,.45) !important;
}

.MuiInputLabel-root.Mui-focused,
.MuiFormLabel-root.Mui-focused {
  color: #0ea5e9 !important;
}

/* Input adornment icons */
.MuiInputAdornment-root .MuiSvgIcon-root {
  fill: rgba(255,255,255,.35) !important;
  transition: fill .2s;
}

.MuiOutlinedInput-root.Mui-focused .MuiInputAdornment-root .MuiSvgIcon-root {
  fill: #0ea5e9 !important;
}

/* ── Checkboxes ──────────────────────────────────────────────────── */
.MuiCheckbox-root {
  color: rgba(255,255,255,.3) !important;
}

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

.MuiFormControlLabel-label {
  color: rgba(255,255,255,.55) !important;
  font-size: .875rem !important;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.MuiButton-containedPrimary,
.MuiButton-contained {
  background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  font-size: .925rem !important;
  padding: .72rem 1.5rem !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
  transition: opacity .2s, transform .15s, box-shadow .2s !important;
}

.MuiButton-containedPrimary::before,
.MuiButton-contained::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .2s;
}

.MuiButton-containedPrimary:hover,
.MuiButton-contained:hover {
  opacity: .92 !important;
  box-shadow: 0 8px 24px rgba(14,165,233,.3) !important;
}

.MuiButton-containedPrimary:hover::before,
.MuiButton-contained:hover::before {
  opacity: 1;
}

.MuiButton-containedPrimary:active,
.MuiButton-contained:active {
  transform: scale(.98) !important;
}

/* Accept / Deny buttons on consent page */
.MuiButton-containedSecondary {
  background: linear-gradient(135deg, rgba(239,68,68,.8) 0%, #dc2626 100%) !important;
  color: #fff !important;
  border-radius: 10px !important;
  text-transform: none !important;
  font-weight: 600 !important;
  font-size: .925rem !important;
}

/* Outlined buttons */
.MuiButton-outlined,
.MuiButton-outlinedPrimary {
  border: 1px solid rgba(255,255,255,.15) !important;
  color: rgba(255,255,255,.7) !important;
  border-radius: 10px !important;
  text-transform: none !important;
  background: rgba(255,255,255,.04) !important;
  transition: all .2s !important;
}

.MuiButton-outlined:hover,
.MuiButton-outlinedPrimary:hover {
  border-color: rgba(255,255,255,.3) !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}

/* ── Links ───────────────────────────────────────────────────────── */
a, .MuiLink-root {
  color: #38bdf8 !important;
  text-decoration: none !important;
  transition: color .2s !important;
}

a:hover, .MuiLink-root:hover {
  color: #7dd3fc !important;
}

/* ── Dividers ────────────────────────────────────────────────────── */
.MuiDivider-root {
  border-color: rgba(255,255,255,.08) !important;
}

/* ── Strip white backgrounds from Box containers ─────────────────── */
.MuiBox-root {
  background: transparent !important;
}

/* ── Consent page permissions list ──────────────────────────────── */
.MuiList-root {
  background: rgba(255,255,255,.06) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}

.MuiList-root .MuiListItem-root {
  border-radius: 8px !important;
  margin: 2px 0 !important;
  transition: background .2s !important;
}

.MuiList-root .MuiListItem-root:hover {
  background: rgba(255,255,255,.08) !important;
}

.MuiListItemIcon-root .MuiSvgIcon-root {
  fill: #0ea5e9 !important;
}

.MuiListItemText-primary,
.MuiListItemText-primary * {
  color: #f1f5f9 !important;
  font-size: .9rem !important;
}

.MuiListItemText-secondary,
.MuiListItemText-secondary * {
  color: rgba(255,255,255,.65) !important;
  font-size: .8rem !important;
}

/* Catch-all for any span/p inside list items */
.MuiList-root span,
.MuiList-root p {
  color: #e2e8f0 !important;
}

/* ── App name on consent page ────────────────────────────────────── */
.MuiTypography-h5,
.MuiTypography-h6 {
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}

/* ── Snackbar / alerts ───────────────────────────────────────────── */
.MuiAlert-root {
  border-radius: 8px !important;
  font-size: .84rem !important;
}

.MuiAlert-filledError,
.MuiAlert-standardError {
  background: rgba(239,68,68,.12) !important;
  border: 1px solid rgba(239,68,68,.3) !important;
  color: #fca5a5 !important;
}

.MuiAlert-filledWarning,
.MuiAlert-standardWarning {
  background: rgba(251,191,36,.1) !important;
  border: 1px solid rgba(251,191,36,.3) !important;
  color: #fde68a !important;
}

.MuiAlert-filledSuccess,
.MuiAlert-standardSuccess {
  background: rgba(34,197,94,.1) !important;
  border: 1px solid rgba(34,197,94,.3) !important;
  color: #86efac !important;
}

.MuiAlert-filledInfo,
.MuiAlert-standardInfo {
  background: rgba(14,165,233,.1) !important;
  border: 1px solid rgba(14,165,233,.3) !important;
  color: #7dd3fc !important;
}

/* Alert icon colors */
.MuiAlert-icon .MuiSvgIcon-root { fill: currentColor !important; }

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

/* ── Password strength bar ───────────────────────────────────────── */
.MuiLinearProgress-root {
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
}

.MuiLinearProgress-bar {
  background: linear-gradient(90deg, #0ea5e9, #14b8a6) !important;
  border-radius: 999px !important;
}

/* ── Wainga branding watermark (bottom of card) ──────────────────── */
#root::after {
  content: 'Secured by Wainga';
  display: block;
  text-align: center;
  font-size: .7rem;
  color: rgba(255,255,255,.2);
  margin-top: 1rem;
  letter-spacing: .04em;
}

/* ── Powered by Authelia footer ──────────────────────────────────── */
footer, .footer, [class*="footer"],
.MuiTypography-caption {
  color: rgba(255,255,255,.25) !important;
  font-size: .72rem !important;
}