/* RastreYou Login Overlay para Traccar
   Mantém o login real do Traccar funcionando e aplica apenas visual personalizado.
*/

:root {
  --ry-gold: #f5c329;
  --ry-gold-2: #c58a0b;
  --ry-black: #050505;
  --ry-white: #ffffff;
  --ry-muted: rgba(255, 255, 255, .72);
}

/* Classe colocada pelo JS somente na rota /login */
body.rastreyou-login-page {
  background:
    linear-gradient(100deg, rgba(0,0,0,.50), rgba(0,0,0,.22), rgba(0,0,0,.62)),
    url("/assets/login-bg-desktop.png") center center / cover no-repeat fixed !important;
  color: var(--ry-white) !important;
}

@media (max-width: 768px) {
  body.rastreyou-login-page {
    background:
      linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.18), rgba(0,0,0,.62)),
      url("/assets/login-bg-mobile.png") center center / cover no-repeat fixed !important;
  }
}

body.rastreyou-login-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 68% 48%, rgba(245,195,41,.12), transparent 24%),
    radial-gradient(circle at 52% 50%, rgba(245,195,41,.07), transparent 18%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.16));
}

/* Remove o painel claro/lavanda e força a página a ficar transparente por cima do background */
body.rastreyou-login-page #root,
body.rastreyou-login-page .root {
  background: transparent !important;
}

body.rastreyou-login-page [class*="MuiBox-root"],
body.rastreyou-login-page [class*="MuiContainer-root"],
body.rastreyou-login-page [class*="MuiGrid-root"],
body.rastreyou-login-page main,
body.rastreyou-login-page section {
  background-color: transparent !important;
}

/* Esconde marca visual antiga do Traccar na tela de login */
body.rastreyou-login-page img[alt="logo"],
body.rastreyou-login-page img[src*="logo"],
body.rastreyou-login-page .MuiAvatar-root {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Logo oficial RastreYou no topo do login */
body.rastreyou-login-page::after {
  content: "";
  position: fixed;
  top: calc(50% - 315px);
  left: 50%;
  transform: translateX(-50%);
  width: 118px;
  height: 118px;
  z-index: 15;
  background: url("/assets/logo-rastreyou.webp") center / contain no-repeat;
  filter: drop-shadow(0 0 18px rgba(245,195,41,.28));
  pointer-events: none;
}

/* Localiza o formulário real do Traccar: sobe para o card visual */
body.rastreyou-login-page form {
  position: relative !important;
  z-index: 12 !important;
  width: min(100%, 380px) !important;
  margin: 0 auto !important;
  padding: 165px 28px 30px !important;
  border-radius: 30px !important;
  background: linear-gradient(180deg, rgba(8,8,8,.42), rgba(8,8,8,.62)) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.52), 0 0 46px rgba(245,195,41,.10) !important;
  border: 1px solid rgba(245,195,41,.36) !important;
}

/* Título visual dentro do card, sem mexer na lógica do Traccar */
body.rastreyou-login-page form::before {
  content: "Área do Cliente RastreYou";
  position: absolute;
  top: 122px;
  left: 20px;
  right: 20px;
  text-align: center;
  color: #ffffff;
  font-size: 1.35rem;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -.035em;
}

body.rastreyou-login-page form::after {
  content: "Acesse sua plataforma de rastreamento.";
  position: absolute;
  top: 154px;
  left: 20px;
  right: 20px;
  text-align: center;
  color: rgba(255,255,255,.68);
  font-size: .90rem;
  line-height: 1.35;
}

/* Campos MUI do Traccar */
body.rastreyou-login-page .MuiFormControl-root,
body.rastreyou-login-page .MuiTextField-root {
  width: 100% !important;
  margin-bottom: 16px !important;
}

body.rastreyou-login-page .MuiInputBase-root,
body.rastreyou-login-page .MuiOutlinedInput-root {
  min-height: 62px !important;
  border-radius: 18px !important;
  color: #ffffff !important;
  background: rgba(0,0,0,.34) !important;
  overflow: hidden !important;
  box-shadow: 0 0 0 1px rgba(245,195,41,.30) inset !important;
}

body.rastreyou-login-page .MuiOutlinedInput-notchedOutline {
  border-color: rgba(245,195,41,.55) !important;
  border-width: 1px !important;
}

body.rastreyou-login-page .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: rgba(245,195,41,.85) !important;
}

body.rastreyou-login-page .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--ry-gold) !important;
  border-width: 1px !important;
  box-shadow: 0 0 24px rgba(245,195,41,.12) !important;
}

body.rastreyou-login-page .MuiInputLabel-root {
  color: var(--ry-gold) !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
}

body.rastreyou-login-page input {
  color: #ffffff !important;
  font-weight: 700 !important;
}

body.rastreyou-login-page input::placeholder {
  color: rgba(255,255,255,.34) !important;
}

/* Botão real de login */
body.rastreyou-login-page form button[type="submit"],
body.rastreyou-login-page form .MuiButton-root {
  min-height: 56px !important;
  width: 100% !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--ry-gold), var(--ry-gold-2)) !important;
  color: #090909 !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  letter-spacing: .05em !important;
  box-shadow: 0 18px 42px rgba(245,195,41,.24) !important;
  border: none !important;
  overflow: hidden !important;
}

/* Esconde elementos soltos muito evidentes do layout antigo, sem afetar QR/language se existirem */
body.rastreyou-login-page h1,
body.rastreyou-login-page h2,
body.rastreyou-login-page h3 {
  color: #ffffff !important;
}

/* Mobile */
@media (max-width: 768px) {
  body.rastreyou-login-page {
    overflow-y: auto !important;
  }

  body.rastreyou-login-page::after {
    top: 86px;
    width: 96px;
    height: 96px;
  }

  body.rastreyou-login-page form {
    width: min(100%, 390px) !important;
    padding: 150px 22px 24px !important;
    margin-top: 30px !important;
  }

  body.rastreyou-login-page form::before {
    top: 112px;
    font-size: 1.18rem;
  }

  body.rastreyou-login-page form::after {
    top: 140px;
    font-size: .82rem;
  }
}
/* =========================
   CORREÇÃO: MOSTRAR O LOGIN REAL E ESCONDER SÓ A COLUNA ANTIGA
   ========================= */

body.rastreyou-login-page #root,
body.rastreyou-login-page .root {
    opacity: 1 !important;
    pointer-events: auto !important;
    user-select: auto !important;
    position: relative !important;
    z-index: 10 !important;
    background: transparent !important;
}

/* Deixa o container principal transparente e centralizado */
body.rastreyou-login-page #root > div {
    min-height: 100vh !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Esconde a primeira coluna visual do login antigo, onde aparece o Traccar */
body.rastreyou-login-page #root > div > div:first-child {
    display: none !important;
}

/* Remove fundos claros/lavanda restantes */
body.rastreyou-login-page #root > div > div,
body.rastreyou-login-page #root main,
body.rastreyou-login-page #root section {
    background: transparent !important;
}
/* ==========================================
   ESCONDE A SIDEBAR NATIVA DO TRACCAR
   ========================================== */
body.rastreyou-login-page .muiltr-171v8oy-sidebar {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Caso o Traccar reserve espaço para a sidebar */
body.rastreyou-login-page #root > div {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: transparent !important;
}

/* Remove qualquer sobra visual da coluna da esquerda */
body.rastreyou-login-page #root > div > div:first-child {
    display: none !important;
}

/* Garante que o conteúdo principal ocupe tudo */
body.rastreyou-login-page #root > div > div:last-child {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    background: transparent !important;
}

/* Remove qualquer fundo lavanda/claro */
body.rastreyou-login-page [class*="sidebar"],
body.rastreyou-login-page [class*="Sidebar"] {
    display: none !important;
}
/* =====================================================
   AJUSTE FINAL RASTREYOU - FUNDO, CARD E CAMPOS
   ===================================================== */

/* Força o background correto a aparecer */
body.rastreyou-login-page {
    background:
        linear-gradient(100deg, rgba(0,0,0,.42), rgba(0,0,0,.18), rgba(0,0,0,.58)),
        url("/assets/login-bg-desktop.png") center center / cover no-repeat fixed !important;
}

/* Mobile */
@media (max-width: 768px) {
    body.rastreyou-login-page {
        background:
            linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.22), rgba(0,0,0,.70)),
            url("/assets/login-bg-mobile.png") center center / cover no-repeat fixed !important;
    }
}

/* Remove a camada preta/cinza que o Traccar joga por cima */
body.rastreyou-login-page #root,
body.rastreyou-login-page .root,
body.rastreyou-login-page #root > div,
body.rastreyou-login-page #root > div > div,
body.rastreyou-login-page main,
body.rastreyou-login-page section,
body.rastreyou-login-page [class*="MuiBox-root"],
body.rastreyou-login-page [class*="MuiGrid-root"],
body.rastreyou-login-page [class*="MuiContainer-root"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* Card principal mais premium */
body.rastreyou-login-page form {
    margin-top: 15px !important;
    padding-top: 155px !important;
    background: linear-gradient(180deg, rgba(5,5,5,.52), rgba(5,5,5,.74)) !important;
    border: 1px solid rgba(245,195,41,.42) !important;
    box-shadow:
        0 28px 90px rgba(0,0,0,.62),
        0 0 55px rgba(245,195,41,.13) !important;
}

/* Título */
body.rastreyou-login-page form::before {
    top: 112px !important;
    font-size: 1.35rem !important;
}

/* Subtítulo: joga um pouco para baixo para não bater no Email */
body.rastreyou-login-page form::after {
    top: 142px !important;
    font-size: .88rem !important;
    color: rgba(255,255,255,.65) !important;
}

/* Dá mais espaço acima do primeiro campo */
body.rastreyou-login-page form .MuiFormControl-root:first-of-type,
body.rastreyou-login-page form .MuiTextField-root:first-of-type {
    margin-top: 28px !important;
}

/* Campos com fundo mais escuro e efeito dourado */
body.rastreyou-login-page .MuiInputBase-root,
body.rastreyou-login-page .MuiOutlinedInput-root {
    position: relative !important;
    background: rgba(0,0,0,.58) !important;
    border-radius: 18px !important;
    box-shadow:
        0 0 0 1px rgba(245,195,41,.30) inset,
        0 0 18px rgba(245,195,41,.06) !important;
}

/* Borda dourada */
body.rastreyou-login-page .MuiOutlinedInput-notchedOutline {
    border-color: rgba(245,195,41,.72) !important;
}

/* Efeito de foco */
body.rastreyou-login-page .MuiOutlinedInput-root.Mui-focused {
    box-shadow:
        0 0 0 1px rgba(245,195,41,.78) inset,
        0 0 25px rgba(245,195,41,.18) !important;
}

/* Label mais limpo */
body.rastreyou-login-page .MuiInputLabel-root {
    color: var(--ry-gold) !important;
    font-weight: 900 !important;
    background: rgba(5,5,5,.85) !important;
    padding: 0 6px !important;
    border-radius: 8px !important;
}

/* Corrige label quando sobe */
body.rastreyou-login-page .MuiInputLabel-shrink {
    transform: translate(14px, -8px) scale(.82) !important;
}

/* Botão com brilho mais forte */
body.rastreyou-login-page form button[type="submit"],
body.rastreyou-login-page form .MuiButton-root {
    position: relative !important;
    overflow: hidden !important;
    box-shadow:
        0 18px 42px rgba(245,195,41,.28),
        0 0 28px rgba(245,195,41,.14) !important;
}

/* Brilho passando no botão */
body.rastreyou-login-page form button[type="submit"]::after,
body.rastreyou-login-page form .MuiButton-root::after {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-18deg);
    animation: ryButtonGlow 3s ease-in-out infinite;
}

@keyframes ryButtonGlow {
    0%, 35% {
        left: -80%;
    }
    70%, 100% {
        left: 120%;
    }
}