/* Base styles from upstream Traccar — unchanged so the main app
   still has its full-height flex layout. */
html, body { height: 100%; }
body { margin: 0; padding: 0; }
@media (prefers-color-scheme: dark) { body { background: black; } }
.root { display: flex; flex-direction: column; height: 100%; }

/* ── PawSentry login rebrand ────────────────────────────────────
   Per Zlatan 2026-04-23: remove the decorative left sidebar from
   the login screen, centre the form card, put the PawSentry logo
   above it.

   Traccar's LoginLayout wraps everything in a <main> with a
   sidebar div and a Paper form card. We scope every rule below
   with :has(input[type="password"]) so nothing leaks into the
   main app once the user is signed in. */

main:has(input[type="password"]) {
  justify-content: center !important;
  align-items: center !important;
  padding: 24px !important;
  background: #0a0a0a;
  min-height: 100vh;
}

/* Sidebar is the first direct child of <main> that isn't the
   form Paper. Hide it entirely on every breakpoint. */
main:has(input[type="password"]) > div {
  display: none !important;
}

/* Form card (MUI Paper) — keep visible, centre it, limit width. */
main:has(input[type="password"]) > .MuiPaper-root,
main:has(input[type="password"]) form {
  display: block !important;
}
main:has(input[type="password"]) .MuiPaper-root {
  max-width: 420px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 32px 28px !important;
}

/* Drop the PawSentry logo at the top of the form card. */
main:has(input[type="password"]) .MuiPaper-root::before {
  content: '';
  display: block;
  width: 220px;
  height: 90px;
  max-width: 80%;
  margin: 4px auto 24px auto;
  background: url('/logo.svg') no-repeat center;
  background-size: contain;
}