/* DiceFables – Authelia Theme */
@import url('https://fonts.googleapis.com/css?family=Droid+Serif:400,700');
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700&display=swap');

/* ── Background ──────────────────────────────────────────── */
html, body {
  font-family: 'Rubik', sans-serif !important;
  background-color: #0e0e12 !important;
  background-image:
linear-gradient(180deg, rgba(14, 14, 18, 0.78) 0%, rgba(14, 14, 18, 0.88) 100%),
    url('/bg.jpg') !important;
  background-size: cover !important;
  background-position: center top !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
}

#root > div {
  background: transparent !important;
}

/* ── App bar / header ────────────────────────────────────── */
.MuiAppBar-root {
  background: #0e0e12 !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(100, 60, 150, 0.12) !important;
}

/* ── Login card (container > paper only, not the header) ─── */
.MuiContainer-root .MuiPaper-root,
.MuiContainer-root .MuiCard-root {
  background-color: #18181e !important;
  border: 1px solid rgba(110, 65, 160, 0.22) !important;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.55) !important;
  border-radius: 12px !important;
}

/* ── Typography ──────────────────────────────────────────── */
.MuiTypography-root {
  color: #d0d0e0 !important;
  font-family: 'Rubik', sans-serif !important;
}

.MuiTypography-h1, .MuiTypography-h2, .MuiTypography-h3,
.MuiTypography-h4, .MuiTypography-h5, .MuiTypography-h6,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Droid Serif', serif !important;
  color: #b090cc !important;
}

/* ── Inputs ──────────────────────────────────────────────── */
.MuiInputBase-root {
  color: #d0d0e0 !important;
  font-family: 'Rubik', sans-serif !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-radius: 8px !important;
}

.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
  border-color: rgba(110, 65, 160, 0.28) !important;
}

.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: rgba(110, 65, 160, 0.55) !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #7733bb !important;
  box-shadow: 0 0 0 2px rgba(119, 51, 187, 0.15) !important;
}

.MuiInputLabel-root {
  color: #888899 !important;
  font-family: 'Rubik', sans-serif !important;
}

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

.MuiInputBase-input {
  color: #d0d0e0 !important;
  caret-color: #8844cc !important;
}

.MuiInputAdornment-root .MuiSvgIcon-root {
  color: #666677 !important;
}

/* ── Primary button ──────────────────────────────────────── */
.MuiButton-containedPrimary {
  background: linear-gradient(135deg, #4a1a88 0%, #7733bb 100%) !important;
  color: #f0e8ff !important;
  font-family: 'Rubik', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.8px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 12px rgba(80, 30, 140, 0.4) !important;
  transition: all 0.2s ease !important;
}

.MuiButton-containedPrimary:hover {
  background: linear-gradient(135deg, #5a228a 0%, #8844cc 100%) !important;
  box-shadow: 0 4px 18px rgba(100, 40, 170, 0.5) !important;
  transform: translateY(-1px) !important;
}

/* ── Text buttons & links ────────────────────────────────── */
.MuiButton-text,
.MuiButton-textPrimary {
  color: #8866aa !important;
  font-family: 'Rubik', sans-serif !important;
}

.MuiButton-text:hover,
.MuiButton-textPrimary:hover {
  color: #aa88cc !important;
  background-color: rgba(100, 50, 150, 0.08) !important;
}

a, .MuiLink-root {
  color: #8866aa !important;
}

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

/* ── Checkbox ────────────────────────────────────────────── */
.MuiCheckbox-root {
  color: #555566 !important;
}

.MuiCheckbox-colorPrimary.Mui-checked,
.MuiCheckbox-root.Mui-checked {
  color: #7733bb !important;
}

/* ── Alerts ──────────────────────────────────────────────── */
.MuiAlert-standardError {
  background-color: rgba(60, 10, 20, 0.7) !important;
  border: 1px solid rgba(160, 40, 60, 0.4) !important;
  color: #ffaabc !important;
}

.MuiAlert-standardSuccess {
  background-color: rgba(10, 40, 20, 0.7) !important;
  border: 1px solid rgba(40, 120, 60, 0.4) !important;
  color: #88ffbb !important;
}

/* ── Dividers ────────────────────────────────────────────── */
.MuiDivider-root {
  border-color: rgba(100, 60, 150, 0.15) !important;
}


/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0e0e12; }
::-webkit-scrollbar-thumb { background: #2a1a3e; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4a2a6e; }