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%;
}

@media print {
  * {
    height: auto !important;
    overflow: visible !important;
  }
}

/* ===== LOGIN - Personalização ===== */
/* Coloque sua imagem em: opt/traccar/web/login-bg.jpg */

/* Sidebar com logo — cor sólida, sem imagem de fundo */
main[class*="-root"] [class*="-sidebar"] {
  background-color: #000000 !important;
}

/* Imagem de fundo apenas na área de login (lado direito) */
main[class*="-root"] > [class*="-paper"] {
  position: relative;
  background-color: transparent !important;
  background-image: url('/login-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: none !important;
}

/* Overlay escuro só sobre a imagem da área de login */
main[class*="-root"] > [class*="-paper"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 0;
}

main[class*="-root"] > [class*="-paper"] > * {
  position: relative;
  z-index: 1;
}

/* ===== Card do formulário (glassmorphism) ===== */
main[class*="-root"] [class*="-form"] {
  width: 100%;
}

main[class*="-root"] [class*="-container"] {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 32px 28px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* Labels Email / Senha — centralizados acima do campo */
main[class*="-root"] [class*="-container"] .MuiTextField-root {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

main[class*="-root"] [class*="-container"] .MuiInputLabel-root {
  position: relative !important;
  transform: none !important;
  text-align: center;
  width: 100%;
  max-width: 100%;
  margin-bottom: 8px;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: rgba(255, 255, 255, 0.9) !important;
}

main[class*="-root"] [class*="-container"] .MuiInputLabel-shrink {
  transform: none !important;
}

main[class*="-root"] [class*="-container"] .MuiInputLabel-outlined {
  transform: none !important;
  top: 0 !important;
  left: 0 !important;
}

main[class*="-root"] [class*="-container"] .MuiInputLabel-outlined.MuiInputLabel-shrink {
  transform: none !important;
}

main[class*="-root"] [class*="-container"] .MuiOutlinedInput-notchedOutline legend {
  max-width: 0.01px;
  padding: 0;
}

main[class*="-root"] [class*="-container"] .MuiInputLabel-asterisk {
  display: none;
}

/* Campos Email / Senha */
main[class*="-root"] [class*="-container"] .MuiOutlinedInput-root {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 12px;
}

main[class*="-root"] [class*="-container"] .MuiOutlinedInput-input {
  padding: 12px 14px;
}

main[class*="-root"] [class*="-container"] .MuiOutlinedInput-root fieldset {
  border-color: rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px;
  top: 0;
}

main[class*="-root"] [class*="-container"] .MuiOutlinedInput-root:hover fieldset {
  border-color: rgba(255, 255, 255, 0.4) !important;
}

main[class*="-root"] [class*="-container"] .MuiOutlinedInput-root.Mui-focused fieldset {
  border-color: rgba(255, 255, 255, 0.65) !important;
  border-width: 2px !important;
}

main[class*="-root"] [class*="-container"] label.Mui-focused {
  color: #ffffff !important;
}

main[class*="-root"] [class*="-container"] .MuiInputBase-input {
  color: #ffffff;
  text-align: left;
}

main[class*="-root"] [class*="-container"] .MuiInputBase-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
  text-align: left;
}

/* Botão Entrar */
main[class*="-root"] [class*="-container"] button[type="submit"] {
  background: linear-gradient(135deg, #1a237e, #283593) !important;
  color: #ffffff !important;
  border-radius: 12px;
  padding: 12px 0 !important;
  font-size: 1rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 16px rgba(26, 35, 126, 0.45);
  margin-top: 4px;
}

main[class*="-root"] [class*="-container"] button[type="submit"]:hover {
  background: linear-gradient(135deg, #283593, #3949ab) !important;
  box-shadow: 0 6px 20px rgba(26, 35, 126, 0.55);
}

main[class*="-root"] [class*="-container"] button[type="submit"]:disabled {
  background: rgba(0, 0, 0, 0.3) !important;
  color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: none;
}

/* Seletor de idioma (canto superior) */
main[class*="-root"] [class*="-options"] .MuiOutlinedInput-root {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Ocultar botão QR Code */
main[class*="-root"] [class*="-options"] .MuiIconButton-root {
  display: none !important;
}

/* Links abaixo do card */
main[class*="-root"] [class*="-extraContainer"] a {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 500;
  text-decoration: none;
}

main[class*="-root"] [class*="-extraContainer"] a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}