/* clankers.in background image on the Authelia login portal.
   Served same-origin (auth.clankers.in/clankers-bg.jpg) to satisfy Authelia's
   CSP (default-src 'self'). Cover-fill, centered, scales with the window. */
body {
  background-image: url('/clankers-bg.jpg') !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}
#root {
  background-color: transparent !important;
}

/* ---------------------------------------------------------------------------
   FirstFactor login panel overrides (Authelia v4.39 DOM). :has() against the
   stable #form-login id keeps these scoped to the login view.
   --------------------------------------------------------------------------- */

/* Move the login to the BOTTOM of the viewport. */
#first-factor-stage,
.MuiGrid-container:has(> .MuiContainer-root #form-login) {
  align-items: flex-end !important;
  padding-bottom: 5vh !important;
}

/* Contrast BOX around the login. */
.MuiContainer-root:has(#form-login) {
  max-width: 760px !important;
  background-color: rgba(16, 19, 26, 0.86) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  padding: 22px 26px 18px !important;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(5px) !important;
}

/* Remove the logo/user icon, the "Sign in" title (+ any subtitle), and the
   "Powered by Authelia" brand — i.e. every item in the login Container that
   isn't the form itself. */
.MuiContainer-root:has(#form-login) > .MuiGrid-container > *:not(:has(#form-login)) {
  display: none !important;
}

/* Lay username, password and the sign-in button out LEFT-TO-RIGHT in one row. */
#form-login .MuiGrid-container {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 10px !important;
}
#form-login .MuiGrid-container > .MuiGrid-root {
  flex: 1 1 200px !important;
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Remember-me drops onto its own line, left-aligned UNDER the username field. */
#form-login .MuiGrid-root:has(#remember-checkbox) {
  flex: 0 0 100% !important;
  order: 90 !important;
  justify-content: flex-start !important;
  text-align: left !important;
  margin-top: 2px !important;
}

/* Sign-in button: hugs its content, stretched a little, GREEN, input-height. */
#form-login .MuiGrid-root:has(#sign-in-button) {
  flex: 0 0 auto !important;
}
#sign-in-button {
  height: 56px !important;
  min-width: 150px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  margin: 0 !important;
  background-color: #2e7d32 !important;
  color: #ffffff !important;
}
#sign-in-button:hover {
  background-color: #1b5e20 !important;
}