/* LOGIN ONLY: force PNG above Traccar overlays */
body:has(form)::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("/umbrella-login-hero.png") center center / 100% 100% no-repeat !important;
  z-index: 999999 !important;
  pointer-events: none !important;
}

/* Put actual login form above PNG */
body:has(form) form {
  position: fixed !important;
  left: 50% !important;
  top: 61% !important;
  transform: translate(-50%, -50%) !important;
  width: 430px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  z-index: 1000000 !important;
}

/* Remove Traccar blue panel and branding */
body:has(form) main > div:first-child,
body:has(form) #root > div > div:first-child,
body:has(form) [class*="branding"],
body:has(form) img[alt*="Traccar"],
body:has(form) main svg:first-child {
  display: none !important;
}

/* Make layout transparent */
body:has(form),
body:has(form) html,
body:has(form) #root,
body:has(form) main,
body:has(form) main > div,
body:has(form) #root > div,
body:has(form) #root > div > div {
  background: transparent !important;
}

/* Inputs/buttons */
body:has(form) .MuiOutlinedInput-root,
body:has(form) .MuiInputBase-root {
  background: rgba(0,0,0,.72) !important;
  color: white !important;
  border-radius: 10px !important;
}

body:has(form) .MuiOutlinedInput-notchedOutline {
  border-color: rgba(255,0,0,.85) !important;
}

body:has(form) .MuiInputLabel-root,
body:has(form) .MuiFormLabel-root,
body:has(form) .MuiInputBase-input,
body:has(form) .MuiTypography-root,
body:has(form) .MuiSvgIcon-root {
  color: white !important;
}

body:has(form) .MuiButton-contained {
  background: linear-gradient(90deg, #ff001f, #ff6b78) !important;
  color: white !important;
  font-weight: 900 !important;
  border-radius: 10px !important;
  box-shadow: 0 0 22px rgba(255,0,0,.55) !important;
}

body:has(form) * {
  transition: none !important;
  animation: none !important;
}

/* Mobile login background */
@media (max-width: 768px) {
  body:has(form)::before {
    background-image: url("/umbrella-login-hero.png") !important;
    background-size: cover !important;
    background-position: center top !important;
  }

  body:has(form) form {
    width: min(88vw, 390px) !important;
    top: 60% !important;
  }
}

/* Tall/narrow phones */
@media (max-width: 480px) {
  body:has(form)::before {
    background-size: auto 100% !important;
    background-position: center center !important;
  }

  body:has(form) form {
    width: 86vw !important;
    top: 62% !important;
  }
}

/* Mobile cleanup */
@media (max-width: 768px) {

  /* Show more of the logo/background */
  body:has(form)::before {
    background-size: contain !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-color: #050505 !important;
  }

  /* Move form slightly lower */
  body:has(form) form {
    top: 64% !important;
    width: 88vw !important;
    max-width: 430px !important;
  }

  /* Hide duplicate bottom text */
  form::before,
  form::after {
    display: none !important;
    content: none !important;
  }

  /* Hide any duplicated typography */
  .MuiTypography-root {
    text-shadow: none !important;
  }
}

/* Extra small phones */
@media (max-width: 480px) {

  body:has(form)::before {
    background-size: 100% auto !important;
    background-position: center top !important;
  }

  body:has(form) form {
    top: 66% !important;
  }
}