/* V108 — layout estrutural único do cabeçalho do Mapa.
   Sem margens negativas, sem medição runtime, sem sobreposição.
   Fluxo: header -> toolbar -> mapa. */

/* O mapa ocupa a viewport; cabeçalho e toolbar participam do fluxo normal. */
.app.map-screen-active{
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  min-height:100dvh!important;
  height:100dvh!important;
  padding-bottom:0!important;
  overflow:hidden!important;
}

/* ===== CABEÇALHO ===== */
.app.map-screen-active > .topbar.halloween-topbar{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  flex:0 0 auto!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  box-sizing:border-box!important;
  background:linear-gradient(180deg,#071725,#061521)!important;
  border-bottom:1px solid rgba(255,255,255,.14)!important;
  box-shadow:none!important;
  overflow:hidden!important;
  z-index:1000!important;
}

#screenTitle.screen-title-hidden{
  display:none!important;
}

/* Desktop: uma linha — logo | indicadores | ações */
@media(min-width:901px){
  .app.map-screen-active > .topbar.halloween-topbar{
    display:grid!important;
    grid-template-columns:minmax(210px,320px) minmax(360px,1fr) auto!important;
    grid-template-areas:"brand metrics actions"!important;
    align-items:center!important;
    gap:10px!important;
    padding:6px 10px 6px 0!important;
  }

  .app.map-screen-active > .topbar.halloween-topbar .halloween-wordmark{
    grid-area:brand!important;
    display:flex!important;
    align-items:center!important;
    min-width:0!important;
    height:84px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  .app.map-screen-active > .topbar.halloween-topbar .halloween-wordmark-img{
    display:block!important;
    width:min(100%,310px)!important;
    height:80px!important;
    max-height:80px!important;
    object-fit:contain!important;
    object-position:left center!important;
    margin:0!important;
    padding:0 0 0 4px!important;
  }

  .app.map-screen-active > .topbar.halloween-topbar .headline-zone{
    grid-area:metrics!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  .app.map-screen-active > .topbar.halloween-topbar .map-header-metrics{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    width:100%!important;
    height:54px!important;
    min-height:54px!important;
    max-height:54px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    overflow:hidden!important;
  }

  .app.map-screen-active > .topbar.halloween-topbar .top-actions{
    grid-area:actions!important;
    display:flex!important;
    align-items:center!important;
    align-self:center!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    gap:8px!important;
  }
}

/* Tablet/mobile: logo + ações na primeira linha; indicadores na segunda. */
@media(max-width:900px){
  .app.map-screen-active > .topbar.halloween-topbar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:
      "brand actions"
      "metrics metrics"!important;
    align-items:center!important;
    gap:0 6px!important;
    padding:3px 6px 0 0!important;
  }

  .app.map-screen-active > .topbar.halloween-topbar .halloween-wordmark{
    grid-area:brand!important;
    display:flex!important;
    align-items:center!important;
    min-width:0!important;
    height:82px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  .app.map-screen-active > .topbar.halloween-topbar .halloween-wordmark-img{
    display:block!important;
    width:min(100%,260px)!important;
    height:78px!important;
    max-height:78px!important;
    object-fit:contain!important;
    object-position:left center!important;
    margin:0!important;
    padding:0 0 0 3px!important;
  }

  .app.map-screen-active > .topbar.halloween-topbar .top-actions{
    grid-area:actions!important;
    display:flex!important;
    align-items:center!important;
    align-self:center!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    gap:7px!important;
  }

  .app.map-screen-active > .topbar.halloween-topbar .headline-zone{
    grid-area:metrics!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  .app.map-screen-active > .topbar.halloween-topbar .map-header-metrics{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    width:100%!important;
    height:52px!important;
    min-height:52px!important;
    max-height:52px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    overflow:hidden!important;
  }
}

/* Indicadores: mesmas dimensões em todas as larguras; conteúdo apenas reduz no mobile. */
.app.map-screen-active > .topbar.halloween-topbar .map-header-metrics > div{
  display:grid!important;
  grid-template-columns:28px minmax(0,auto)!important;
  grid-template-rows:auto auto!important;
  align-content:center!important;
  justify-content:center!important;
  column-gap:7px!important;
  min-width:0!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:3px 8px!important;
  box-sizing:border-box!important;
  border-right:1px solid rgba(255,255,255,.14)!important;
  overflow:hidden!important;
}

.app.map-screen-active > .topbar.halloween-topbar .map-header-metrics > div:last-child{
  border-right:0!important;
}

.app.map-screen-active > .topbar.halloween-topbar .map-header-metrics .metric-icon,
.app.map-screen-active > .topbar.halloween-topbar .map-header-metrics .metric-check{
  grid-row:1/3!important;
  align-self:center!important;
  justify-self:center!important;
  width:28px!important;
  height:28px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:9px!important;
  font-size:1rem!important;
}

.app.map-screen-active > .topbar.halloween-topbar .map-header-metrics b{
  align-self:end!important;
  font-size:.96rem!important;
  line-height:1!important;
  white-space:nowrap!important;
}

.app.map-screen-active > .topbar.halloween-topbar .map-header-metrics small{
  display:block!important;
  align-self:start!important;
  margin-top:2px!important;
  font-size:.46rem!important;
  line-height:1!important;
  white-space:nowrap!important;
  text-transform:uppercase!important;
}

@media(max-width:520px){
  .app.map-screen-active > .topbar.halloween-topbar .halloween-wordmark{
    height:74px!important;
  }
  .app.map-screen-active > .topbar.halloween-topbar .halloween-wordmark-img{
    width:min(100%,230px)!important;
    height:70px!important;
    max-height:70px!important;
  }
  .app.map-screen-active > .topbar.halloween-topbar .map-header-metrics{
    height:50px!important;
    min-height:50px!important;
    max-height:50px!important;
  }
  .app.map-screen-active > .topbar.halloween-topbar .map-header-metrics > div{
    grid-template-columns:24px minmax(0,auto)!important;
    column-gap:5px!important;
    padding:2px 4px!important;
  }
  .app.map-screen-active > .topbar.halloween-topbar .map-header-metrics .metric-icon,
  .app.map-screen-active > .topbar.halloween-topbar .map-header-metrics .metric-check{
    width:24px!important;
    height:24px!important;
    font-size:.86rem!important;
  }
  .app.map-screen-active > .topbar.halloween-topbar .map-header-metrics b{
    font-size:.8rem!important;
  }
  .app.map-screen-active > .topbar.halloween-topbar .map-header-metrics small{
    font-size:.38rem!important;
  }
}

/* ===== CONTEÚDO DO MAPA ===== */
.app.map-screen-active > #screen-map.active{
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  flex:1 1 auto!important;
  min-height:0!important;
  width:100%!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  gap:0!important;
  overflow:hidden!important;
}

/* Toolbar sempre em fluxo normal: jamais absoluta, jamais negativa. */
.app.map-screen-active > #screen-map.active > .map-toolbar{
  position:relative!important;
  inset:auto!important;
  z-index:700!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  flex:0 0 auto!important;
  width:100%!important;
  height:47px!important;
  min-height:47px!important;
  max-height:47px!important;
  margin:0!important;
  padding:5px 8px!important;
  gap:7px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  background:#0a1d2c!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.20)!important;
  border-radius:0!important;
  box-shadow:0 4px 12px rgba(0,0,0,.22)!important;
  backdrop-filter:none!important;
}

/* Anula posicionamentos absolutos legados de filtros/tipo de mapa. */
.app.map-screen-active > #screen-map.active > .map-toolbar .map-filter-bar,
.app.map-screen-active > #screen-map.active > .map-toolbar .map-style-switch{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  transform:none!important;
  margin:0!important;
}

.app.map-screen-active > #screen-map.active > .map-toolbar .map-filter-bar{
  display:flex!important;
  flex:1 1 auto!important;
  flex-wrap:nowrap!important;
  min-width:0!important;
  width:auto!important;
  height:37px!important;
  min-height:37px!important;
  max-height:37px!important;
  padding:0!important;
  gap:6px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  white-space:nowrap!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  scrollbar-width:none!important;
}

.app.map-screen-active > #screen-map.active > .map-toolbar .map-filter-bar::-webkit-scrollbar{
  display:none!important;
}

.app.map-screen-active > #screen-map.active > .map-toolbar .map-filter-bar button{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:max-content!important;
  height:35px!important;
  min-height:35px!important;
  margin:0!important;
  padding:0 13px!important;
  white-space:nowrap!important;
  box-sizing:border-box!important;
  border-radius:18px!important;
}

.app.map-screen-active > #screen-map.active > .map-toolbar .map-style-switch{
  display:flex!important;
  flex:0 0 auto!important;
  flex-wrap:nowrap!important;
  width:auto!important;
  height:37px!important;
  min-height:37px!important;
  max-height:37px!important;
  padding:2px!important;
  gap:2px!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:19px!important;
  box-shadow:0 2px 7px rgba(0,0,0,.18)!important;
  backdrop-filter:none!important;
}

.app.map-screen-active > #screen-map.active > .map-toolbar .map-style-switch button{
  flex:0 0 auto!important;
  width:auto!important;
  height:31px!important;
  min-height:31px!important;
  margin:0!important;
  padding:0 10px!important;
  white-space:nowrap!important;
  border-radius:16px!important;
}

/* Mapa preenche exatamente o espaço restante. */
.app.map-screen-active > #screen-map.active > .map-wrap{
  position:relative!important;
  grid-row:2!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

.app.map-screen-active > #screen-map.active > .map-wrap > #map{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
}

/* Reserva visual para a navegação inferior fixa sem alterar o fluxo header/toolbar. */
.app.map-screen-active > #screen-map.active > .map-wrap{
  padding-bottom:calc(82px + env(safe-area-inset-bottom))!important;
}

@media(max-width:700px){
  .app.map-screen-active > #screen-map.active > .map-toolbar{
    height:43px!important;
    min-height:43px!important;
    max-height:43px!important;
    padding:4px 6px!important;
    gap:5px!important;
  }
  .app.map-screen-active > #screen-map.active > .map-toolbar .map-filter-bar{
    height:35px!important;
    min-height:35px!important;
    max-height:35px!important;
    gap:5px!important;
  }
  .app.map-screen-active > #screen-map.active > .map-toolbar .map-filter-bar button{
    height:33px!important;
    min-height:33px!important;
    padding:0 10px!important;
    font-size:.64rem!important;
  }
  .app.map-screen-active > #screen-map.active > .map-toolbar .map-style-switch{
    height:35px!important;
    min-height:35px!important;
    max-height:35px!important;
  }
  .app.map-screen-active > #screen-map.active > .map-toolbar .map-style-switch button{
    height:29px!important;
    min-height:29px!important;
    padding:0 8px!important;
    font-size:.62rem!important;
  }
  .app.map-screen-active > #screen-map.active > .map-wrap{
    padding-bottom:calc(72px + env(safe-area-inset-bottom))!important;
  }
}