/* RastreOW v444 - Responsividade global da plataforma web administrativa */

/* Regras seguras em qualquer tamanho */
html,body{max-width:100%;}
*,*::before,*::after{box-sizing:border-box;}
.card,.form-grid,.table-wrap,.page-head,.actions,form{min-width:0;max-width:100%;}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;}
img,svg,canvas{max-width:100%;}

@media (max-width:1024px){
  .page-head{gap:14px!important;flex-wrap:wrap!important;align-items:flex-start!important;}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .form-grid>*{min-width:0!important;}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .table-wrap table{min-width:720px;}
}

@media (max-width:720px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
  body{overflow-x:hidden!important;}

  /* Área de conteúdo */
  main,.main,.content,.page-content,.container,.wrapper,.shell{min-width:0!important;max-width:100%!important;}
  .content,.page-content,main{padding-left:12px!important;padding-right:12px!important;}

  /* Títulos e cabeçalho de página */
  .page-head{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important;margin-bottom:14px!important;}
  .page-head>div{min-width:0!important;width:100%!important;}
  .page-head h1,.page-head h2{font-size:24px!important;line-height:1.15!important;overflow-wrap:anywhere;}
  .page-head p{font-size:13px!important;line-height:1.45!important;margin-top:5px!important;}
  .page-head>.btn,.page-head>a.btn,.page-head>.mini-btn,.page-head>a.mini-btn{width:100%!important;justify-content:center!important;text-align:center!important;}

  /* Cards */
  .card{width:100%!important;padding:16px!important;border-radius:16px!important;overflow:visible;}
  .card[style*="padding:0"]{padding:0!important;overflow:hidden!important;}
  .card h2,.card h3{overflow-wrap:anywhere;}

  /* FORMULÁRIOS: principal correção para o problema mostrado */
  .form-grid,
  form .form-grid,
  form [class*="form-grid"],
  form [style*="grid-template-columns"]{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:14px!important;
    width:100%!important;
  }
  .form-grid>*,form .form-grid>*,form [style*="grid-template-columns"]>*{
    grid-column:1/-1!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  form label{min-width:0!important;max-width:100%!important;overflow-wrap:anywhere;}
  form label>.input,form label>input:not([type="checkbox"]):not([type="radio"]),form label>select,form label>textarea{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin-top:7px!important;
  }
  .input,
  input[type="text"],input[type="email"],input[type="password"],input[type="tel"],input[type="number"],input[type="search"],input[type="date"],input[type="time"],input[type="datetime-local"],select,textarea{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:48px!important;
    font-size:16px!important;
    line-height:1.25!important;
    padding-left:13px!important;
    padding-right:13px!important;
  }
  textarea{min-height:110px!important;resize:vertical;}
  input[type="date"],input[type="time"],input[type="datetime-local"]{appearance:auto;}
  input[type="checkbox"],input[type="radio"]{width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;vertical-align:middle;}

  /* Botões e áreas de ação - alvos confortáveis para toque */
  button,.btn,.mini-btn,input[type="submit"],input[type="button"]{min-height:44px;touch-action:manipulation;}
  .actions,.form-actions,.toolbar,.filters,.filter-bar,.top-actions,.bulk-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:9px!important;
    align-items:stretch!important;
    max-width:100%!important;
  }
  .actions>.btn,.actions>.mini-btn,.actions>button,
  .form-actions>.btn,.form-actions>button,
  .filters>.btn,.filters>button,.filter-bar>.btn,.filter-bar>button{
    flex:1 1 100%!important;
    width:100%!important;
    justify-content:center!important;
    text-align:center!important;
  }

  /* Tabelas: nunca espremer colunas até ficarem inutilizáveis */
  .table-wrap{width:100%!important;overflow-x:auto!important;padding-bottom:4px!important;scrollbar-width:thin;}
  .table-wrap table{width:max-content!important;min-width:680px!important;max-width:none!important;}
  .table-wrap th,.table-wrap td{white-space:nowrap;vertical-align:middle;}
  .table-wrap td .btn,.table-wrap td .mini-btn{min-height:40px;white-space:nowrap;}

  /* Navegações secundárias / abas */
  .tabs,.subtabs,.nav-tabs,.report-nav,.submenu,.subnav{
    max-width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .tabs,.subtabs,.nav-tabs,.report-nav,.subnav{flex-wrap:nowrap!important;}
  .tabs>* ,.subtabs>* ,.nav-tabs>* ,.report-nav>* ,.subnav>*{flex:0 0 auto;}

  /* Dashboards e estatísticas */
  .stats,.dashboard-grid,.metrics,.metric-grid,.summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .stat,.metric{min-width:0!important;overflow-wrap:anywhere;}

  /* Mapas usados pela plataforma */
  #map,#hm,#fm,#dm,#mapa,[id$="-map"],[id$="Map"]{
    width:100%!important;
    max-width:100%!important;
    height:58vh!important;
    min-height:340px!important;
    max-height:560px!important;
  }
  .leaflet-container{max-width:100%!important;}
  .leaflet-popup-content{max-width:calc(100vw - 90px)!important;overflow-wrap:anywhere;}

  /* Modais e diálogos */
  .modal-content,.dialog,.dialog-content,.popup-card{
    width:calc(100vw - 24px)!important;
    max-width:calc(100vw - 24px)!important;
    max-height:88vh!important;
    overflow:auto!important;
    margin:12px auto!important;
  }

  /* Evita elementos rígidos saindo da tela */
  pre,code{max-width:100%;overflow-x:auto;}
  [style*="width:"][style*="px"]{max-width:100%;}
}

@media (max-width:440px){
  .content,.page-content,main{padding-left:10px!important;padding-right:10px!important;}
  .card{padding:14px!important;border-radius:14px!important;}
  .page-head h1,.page-head h2{font-size:22px!important;}
  .stats,.dashboard-grid,.metrics,.metric-grid,.summary-grid{grid-template-columns:minmax(0,1fr)!important;}
  .table-wrap table{min-width:620px!important;}
}

/* Paisagem de celular: prioriza espaço vertical sem voltar a espremer campos */
@media (max-width:920px) and (orientation:landscape){
  #map,#hm,#fm,#dm,#mapa,[id$="-map"],[id$="Map"]{height:72vh!important;min-height:280px!important;}
}


/* ============================================================
   RastreOW v445 - MAPA/MENU MOBILE
   ============================================================ */
@media (max-width:1024px){
  /*
   * O Leaflet cria panes com z-index próprio. Mantemos toda a árvore do mapa
   * dentro de um contexto de empilhamento baixo para que o menu administrativo
   * SEMPRE fique acima do mapa, markers, popups e controles.
   */
  .leaflet-container{
    position:relative!important;
    z-index:0!important;
    isolation:isolate!important;
  }

  /* Menu lateral/drawer sempre soberano no mobile. */
  body .sidebar,
  body aside.sidebar,
  body .side-menu,
  body .side-nav,
  body .mobile-menu,
  body .mobile-nav,
  body .drawer,
  body [data-sidebar]{
    z-index:2147483000!important;
  }

  body .sidebar,
  body aside.sidebar,
  body .side-menu,
  body .side-nav,
  body .mobile-menu,
  body .drawer{
    position:fixed!important;
  }

  /* Cabeçalho/hambúrguer também não pode ficar abaixo do Leaflet. */
  body .topbar,
  body .top-bar,
  body .mobile-header,
  body .header,
  body .menu-toggle,
  body .sidebar-toggle,
  body .hamburger{
    position:relative;
    z-index:2147483100!important;
  }

  /* Backdrops conhecidos ficam abaixo do menu e acima de todo o conteúdo. */
  body .sidebar-overlay,
  body .menu-overlay,
  body .mobile-overlay,
  body .drawer-backdrop,
  body .backdrop{
    z-index:2147482900!important;
  }
}

@media (max-width:720px){
  /*
   * Tela /mapa.php:
   * lista e mapa deixam de disputar a mesma área. A lista fica em bloco próprio
   * acima do mapa, sem cards escondidos atrás do Leaflet.
   */
  .split{
    display:flex!important;
    flex-direction:column!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    gap:12px!important;
    overflow:visible!important;
  }

  .split>.vehicle-list{
    order:1!important;
    position:relative!important;
    z-index:10!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    max-height:44vh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
    padding:14px!important;
    background:#fff!important;
  }

  .split>.vehicle-list #q,
  .split>.vehicle-list .input{
    position:sticky;
    top:0;
    z-index:3;
    background:#fff!important;
  }

  .split>.vehicle-list #list{
    position:relative!important;
    z-index:2!important;
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
    margin-top:10px!important;
  }

  .split>.vehicle-list .vehicle-item{
    position:relative!important;
    z-index:1!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:12px 11px!important;
    border-radius:12px!important;
    overflow:hidden!important;
    overflow-wrap:anywhere!important;
    background:#f8f8f8!important;
    cursor:pointer!important;
  }

  .split>#map,
  .split>.map{
    order:2!important;
    position:relative!important;
    z-index:0!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:56vh!important;
    min-height:360px!important;
    margin:0!important;
    clear:both!important;
  }
}


/* ============================================================
   RastreOW v449 - SOMENTE AJUSTE DE MAPA MOBILE
   Base restaurada integralmente da v445.
   Não altera menu, sidebar, setas, ícones ou lógica de recolhimento.
   ============================================================ */
@media (max-width:1024px){

  /* Containers de mapa nunca podem ultrapassar a área útil da página. */
  #map,
  #hm,
  .map,
  .leaflet-container{
    box-sizing:border-box!important;
    max-width:100%!important;
    min-width:0!important;
  }

  /* Tela Mapa: mantém lista e mapa dentro da largura disponível. */
  .split{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }

  .split > #map,
  .split > .map{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }

  /* Histórico: mapa ocupa somente o card/área disponível. */
  #hm{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }

  /* Leaflet não cria largura mínima que empurre a página. */
  .leaflet-map-pane,
  .leaflet-tile-pane,
  .leaflet-overlay-pane,
  .leaflet-marker-pane,
  .leaflet-popup-pane{
    max-width:none!important;
  }
}

@media (max-width:720px){
  /* Alturas proporcionais e utilizáveis no celular. */
  .split > #map,
  .split > .map{
    height:56vh!important;
    min-height:360px!important;
  }

  #hm{
    height:56vh!important;
    min-height:360px!important;
  }
}


/* ============================================================
   RastreOW v451 - MENU MOBILE ÚNICO E TOTALMENTE OCULTÁVEL
   ============================================================ */
@media (max-width:1024px){
  body.rw451-ready .rw451-sidebar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    z-index:2147483000!important;
    width:min(86vw,430px)!important;
    max-width:min(86vw,430px)!important;
    min-width:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    transition:transform .18s ease!important;
    will-change:transform!important;
  }

  body.rw451-ready:not(.rw451-open) .rw451-sidebar{
    transform:translate3d(-105%,0,0)!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  body.rw451-ready.rw451-open .rw451-sidebar{
    transform:translate3d(0,0,0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  .rw451-hidden-old-control{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  .rw451-toggle{
    position:fixed!important;
    top:calc(env(safe-area-inset-top,0px) + 14px)!important;
    left:16px!important;
    z-index:2147483200!important;
    width:48px!important;
    height:48px!important;
    border:1px solid rgba(0,0,0,.10)!important;
    border-radius:13px!important;
    background:#fff!important;
    color:#111!important;
    box-shadow:0 3px 14px rgba(0,0,0,.16)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    margin:0!important;
    font-size:29px!important;
    line-height:1!important;
    cursor:pointer!important;
    -webkit-tap-highlight-color:transparent!important;
  }

  body.rw451-open .rw451-toggle{
    background:#25282d!important;
    color:#fff!important;
    border-color:rgba(255,255,255,.16)!important;
  }

  .rw451-backdrop{
    position:fixed!important;
    inset:0!important;
    z-index:2147482900!important;
    display:none!important;
    border:0!important;
    padding:0!important;
    margin:0!important;
    background:rgba(0,0,0,.38)!important;
  }

  body.rw451-open .rw451-backdrop{
    display:block!important;
  }

  .leaflet-container{
    position:relative!important;
    z-index:0!important;
    isolation:isolate!important;
  }
}

@media (min-width:1025px){
  .rw451-toggle,
  .rw451-backdrop{
    display:none!important;
  }
}


/* ============================================================
   RastreOW v452 - REMOVE CONTROLES SOLTOS DO RODAPÉ
   ============================================================ */
@media (max-width:1024px){

  /* Resíduos de v450/v451 não devem existir visualmente em nenhuma tela. */
  .rw450-menu-button,
  .rw450-menu-backdrop,
  .rw451-toggle,
  .rw451-backdrop{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  .rw452-old-collapse{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  body.rw452-ready .rw452-sidebar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    z-index:2147483000!important;
    width:min(86vw,430px)!important;
    max-width:min(86vw,430px)!important;
    min-width:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    transition:transform .18s ease!important;
  }

  body.rw452-ready:not(.rw452-open) .rw452-sidebar{
    transform:translate3d(-105%,0,0)!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  body.rw452-ready.rw452-open .rw452-sidebar{
    transform:translate3d(0,0,0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  /*
   * O botão agora pertence ao cabeçalho/topo.
   * Nada de position:fixed no canto inferior esquerdo.
   */
  .rw452-top-toggle{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    z-index:2147483200!important;
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    flex:0 0 48px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0 12px 0 0!important;
    padding:0!important;
    border:0!important;
    border-radius:12px!important;
    background:transparent!important;
    color:#111!important;
    box-shadow:none!important;
    font-size:29px!important;
    line-height:1!important;
  }

  .rw452-backdrop{
    position:fixed!important;
    inset:0!important;
    z-index:2147482900!important;
    display:none!important;
    border:0!important;
    margin:0!important;
    padding:0!important;
    background:rgba(0,0,0,.38)!important;
  }

  body.rw452-open .rw452-backdrop{
    display:block!important;
  }

  .leaflet-container{
    z-index:0!important;
    isolation:isolate!important;
  }
}

@media (min-width:1025px){
  .rw452-backdrop{
    display:none!important;
  }
}


/* ============================================================
   RastreOW v453 - RESTAURA ESTILO DO MENU v451 SEM BUG INFERIOR
   ============================================================ */
@media (max-width:1024px){

  /* remove completamente resíduos de versões anteriores */
  .rw450-menu-button,
  .rw450-menu-backdrop,
  .rw451-toggle,
  .rw451-backdrop,
  .rw452-top-toggle,
  .rw452-backdrop,
  .rw453-old-control{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  body.rw453-ready .rw453-sidebar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    z-index:2147483000!important;
    width:min(86vw,430px)!important;
    max-width:min(86vw,430px)!important;
    min-width:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    transition:transform .18s ease!important;
    will-change:transform!important;
  }

  body.rw453-ready:not(.rw453-open) .rw453-sidebar{
    transform:translate3d(-105%,0,0)!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  body.rw453-ready.rw453-open .rw453-sidebar{
    transform:translate3d(0,0,0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  /*
   * Host fallback fica SEMPRE no topo.
   * Nunca participa do fluxo vertical da página.
   */
  .rw453-menu-host{
    position:fixed!important;
    left:16px!important;
    top:calc(env(safe-area-inset-top,0px) + 14px)!important;
    z-index:2147483190!important;
    width:48px!important;
    height:48px!important;
    pointer-events:none!important;
  }

  /*
   * Visual aprovado: botão branco arredondado com 3 traços arredondados.
   * Quando inserido em header, permanece relativo ao cabeçalho.
   */
  .rw453-toggle{
    position:relative!important;
    inset:auto!important;
    z-index:2147483200!important;
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    flex:0 0 48px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    margin:0 12px 0 0!important;
    border:1px solid rgba(0,0,0,.08)!important;
    border-radius:14px!important;
    background:#fff!important;
    color:#111!important;
    box-shadow:0 3px 14px rgba(0,0,0,.12)!important;
    cursor:pointer!important;
    pointer-events:auto!important;
    -webkit-tap-highlight-color:transparent!important;
  }

  .rw453-menu-host .rw453-toggle{
    position:absolute!important;
    left:0!important;
    top:0!important;
    margin:0!important;
  }

  .rw453-hamburger{
    width:24px!important;
    height:18px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-between!important;
    pointer-events:none!important;
  }

  .rw453-hamburger i{
    display:block!important;
    width:24px!important;
    height:3px!important;
    margin:0!important;
    border:0!important;
    border-radius:999px!important;
    background:#111!important;
    transition:transform .18s ease,opacity .18s ease!important;
  }

  /*
   * Ao abrir, mantém o mesmo botão arredondado;
   * os traços viram X sem trocar de componente.
   */
  .rw453-toggle.is-open .rw453-hamburger{
    justify-content:center!important;
    gap:0!important;
  }

  .rw453-toggle.is-open .rw453-hamburger i:nth-child(1){
    transform:translateY(3px) rotate(45deg)!important;
  }

  .rw453-toggle.is-open .rw453-hamburger i:nth-child(2){
    opacity:0!important;
  }

  .rw453-toggle.is-open .rw453-hamburger i:nth-child(3){
    transform:translateY(-3px) rotate(-45deg)!important;
  }

  .rw453-backdrop{
    position:fixed!important;
    inset:0!important;
    z-index:2147482900!important;
    display:none!important;
    border:0!important;
    padding:0!important;
    margin:0!important;
    background:rgba(0,0,0,.38)!important;
  }

  body.rw453-open .rw453-backdrop{
    display:block!important;
  }

  .leaflet-container{
    position:relative!important;
    z-index:0!important;
    isolation:isolate!important;
  }
}

@media (min-width:1025px){
  .rw453-toggle,
  .rw453-backdrop,
  .rw453-menu-host{
    display:none!important;
  }
}