/* Midnight Dock skin for Authelia (Garcia-Rivera Family Portal) */
html, body, #root {
  min-height: 100% !important;
  background: #0b0f14 !important;
}

body {
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(26, 159, 176, 0.18), transparent 55%),
    radial-gradient(ellipse 60% 40% at 90% 10%, rgba(61, 214, 224, 0.08), transparent 50%),
    radial-gradient(ellipse 50% 60% at 70% 100%, rgba(20, 80, 110, 0.2), transparent 55%),
    linear-gradient(180deg, #0e141c 0%, #0b0f14 100%) !important;
  background-attachment: fixed !important;
  color: #e8eef4 !important;
  font-family: "DM Sans", system-ui, -apple-system, sans-serif !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(61, 214, 224, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 214, 224, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent);
  opacity: 0.5;
}

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

.MuiPaper-root,
.MuiCard-root {
  background: rgba(22, 30, 42, 0.72) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(120, 160, 190, 0.18) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45) !important;
  color: #e8eef4 !important;
}

.MuiTypography-root {
  color: #e8eef4 !important;
}

.MuiTypography-colorTextSecondary,
.MuiFormHelperText-root {
  color: #8a9aab !important;
}

.MuiOutlinedInput-root {
  background: rgba(8, 12, 18, 0.55) !important;
  border-radius: 10px !important;
  color: #e8eef4 !important;
}

.MuiOutlinedInput-notchedOutline {
  border-color: rgba(120, 160, 190, 0.25) !important;
}

.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: rgba(61, 214, 224, 0.65) !important;
}

.MuiInputLabel-root,
.MuiInputLabel-root.Mui-focused {
  color: #8a9aab !important;
}

.MuiButton-containedPrimary,
.MuiButton-contained {
  background: linear-gradient(135deg, #1a9fb0, #3dd6e0) !important;
  color: #0b0f14 !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 24px rgba(61, 214, 224, 0.25) !important;
  text-transform: none !important;
}

.MuiButton-containedPrimary:hover,
.MuiButton-contained:hover {
  filter: brightness(1.08);
}

.MuiButton-text,
.MuiLink-root,
a {
  color: #3dd6e0 !important;
}

.MuiCheckbox-root {
  color: #8a9aab !important;
}
.MuiCheckbox-root.Mui-checked {
  color: #3dd6e0 !important;
}

img[alt="Authelia Logo"],
img[src*="logo"] {
  max-height: 96px !important;
  width: auto !important;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.45));
}