/* Look of the Authelia login portal (auth.pasituominen.net).
   authelia-portal.conf adds this to the page. Authelia's page is built with MUI, so the
   selectors use MUI's class names and Authelia's element ids; !important beats MUI's own styles. */

:root {
  --portal-bg: #12141a;
  --portal-card: rgba(26, 30, 38, 0.86);
  --portal-field: #1a1e26;
  --portal-border: rgba(255, 255, 255, 0.14);
  --portal-text: #f2f4f8;
  --portal-muted: rgba(242, 244, 248, 0.65);
  --portal-accent: #4f8cff;
  --portal-accent-2: #7b5cff;
}

body {
  background:
    radial-gradient(1100px 600px at 10% 0%, rgba(79, 140, 255, 0.28), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(123, 92, 255, 0.22), transparent 55%),
    var(--portal-bg) !important;
  background-attachment: fixed !important;
}

/* The login box becomes a card */
.MuiContainer-maxWidthXs {
  background: var(--portal-card);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 32px 28px 24px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

/* Labels sit above the fields instead of floating on the border, so they never overlap the text */
.MuiTextField-root .MuiInputLabel-root {
  position: static !important;
  transform: none !important;
  max-width: none !important;
  text-align: left;
  margin: 0 0 6px 2px;
  font-size: 0.85rem !important;
  color: var(--portal-muted) !important;
}
.MuiTextField-root .MuiInputLabel-root.Mui-focused {
  color: var(--portal-accent) !important;
}
.MuiTextField-root .MuiInputLabel-root.Mui-error {
  color: #ff6b6b !important;
}
.MuiFormLabel-asterisk {
  display: none;
}

/* Fields: no gap in the border for the label */
.MuiOutlinedInput-root {
  background: var(--portal-field);
  border-radius: 12px !important;
}
.MuiOutlinedInput-notchedOutline {
  top: 0 !important;
  border-color: var(--portal-border) !important;
  border-radius: 12px !important;
}
.MuiOutlinedInput-notchedOutline legend {
  display: none !important;
}
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: rgba(255, 255, 255, 0.3) !important;
}
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--portal-accent) !important;
  box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.2);
}
.MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline {
  border-color: #ff6b6b !important;
}
.MuiOutlinedInput-input {
  color: var(--portal-text) !important;
}

/* No blue autofill background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px var(--portal-field) inset !important;
  -webkit-text-fill-color: var(--portal-text) !important;
  caret-color: var(--portal-text);
  border-radius: 12px;
}

/* Sign-in button */
#sign-in-button {
  margin-top: 4px;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  text-transform: none !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, var(--portal-accent), var(--portal-accent-2)) !important;
  box-shadow: 0 10px 24px rgba(79, 140, 255, 0.3) !important;
}
#sign-in-button:hover {
  filter: brightness(1.1);
}
#sign-in-button.Mui-disabled {
  opacity: 0.6;
}

/* Smaller, quieter reset link */
#reset-password-button {
  font-size: 0.9rem !important;
  text-decoration: none !important;
}
#reset-password-button:hover {
  text-decoration: underline !important;
}

@media (max-width: 480px) {
  .MuiContainer-maxWidthXs {
    padding: 24px 18px 18px !important;
    border-radius: 16px;
  }
}