/* ========================================= */
/* RESPONSIVIDADE (MENU HAMBÚRGUER & NAVBAR)  */
/* ----------------------------------------- */
/* Portado/adaptado de dev-inmap-front-master */
/* para a estrutura do Geoportal Peruíbe.     */
/* Depende das variaveis --millenio-* definidas */
/* em css/main/layoutOverrides.css (:root).   */
/* ========================================= */

/* Botao Hamburguer */
.navbar-toggle-mobile {
  display: none;
  background: none;
  border: none;
  color: var(--millenio-black);
  font-size: var(--millenio-font-2xl);
  padding: 15px;
  cursor: pointer;
  position: absolute;
  right: 15px;
  top: 5px;
  z-index: 6000 !important;
}

/* Container do Menu Lateral (off-canvas a direita) */
.mobile-menu-container {
  position: fixed;
  top: 0;
  right: -300px;
  width: 280px;
  height: 100%;
  background-color: var(--millenio-white);
  z-index: 9999;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
  transition: right 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mobile-menu-container.open {
  right: 0;
}

.mobile-menu-header {
  background-color: #587DA9;
  color: var(--millenio-white);
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-menu-header .brand-text {
  font-weight: bold;
  font-size: var(--millenio-font-lg);
  color: var(--millenio-white);
}

.close-mobile-menu {
  background: none;
  border: none;
  color: var(--millenio-white);
  font-size: var(--millenio-font-xl);
  cursor: pointer;
}

.mobile-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  overflow-y: auto;
}

.mobile-menu-item {
  padding: 15px 20px;
  border-bottom: 1px solid var(--millenio-gray-lighter);
  cursor: pointer;
  color: var(--millenio-text-dark);
  font-size: var(--millenio-font-sm);
  transition: background-color 0.2s;
}

.mobile-menu-item:hover {
  background-color: #f5f5f5;
}

.mobile-menu-item i {
  margin-right: 10px;
  width: 20px;
  text-align: center;
  color: #587DA9;
}

.mobile-menu-divider {
  height: 10px;
  background-color: #f0f0f0;
  border-top: 1px solid var(--millenio-gray-border);
  border-bottom: 1px solid var(--millenio-gray-border);
}

.mobile-menu-section-title {
  padding: 10px 20px;
  background-color: var(--millenio-gray-light);
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--millenio-black);
  text-transform: uppercase;
  border-bottom: 1px solid var(--millenio-gray-lighter);
}

/* Overlay escuro atras do menu */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  display: none;
}

.mobile-menu-overlay.open {
  display: block;
}

/* Painel flutuante da Pesquisa Rapida (reusa a busca existente do navbar) */
/* Acionado pela classe body.mobile-search-open (ver layoutOverrides.css). */
.mobile-search-panel-backdrop {
  display: none;
}

/* =========================================================== */
/* MEDIA QUERIES                                               */
/* =========================================================== */

@media (max-width: 1360px) {
  /* Garante que o cabecalho ocupe a linha toda */
  .navbar-header {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1rem 3rem !important;
  }

  /* Mostra o Hamburguer */
  .navbar-toggle-mobile {
    display: block !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    float: none !important;
    margin: 0 !important;
    background: transparent;
    border: none;
    color: var(--millenio-black);
    padding: 10px;
    line-height: 1;
  }

  .navbar-toggle-mobile i {
    font-size: 3rem !important;
  }

  /* 1. Esconde a Toolbar da esquerda (#navbarTop) */
  #navbarTop,
  #navbarTop > li {
    display: none !important;
  }

  /* 2. Esconde os itens da Toolbar da direita (busca, usuario, etc.) */
  .navbar-top-links.pull-right > li {
    display: none !important;
  }

  /* 3. Esconde a barra de edicao do Peruibe explicitamente */
  #editingToolbar,
  #editingToolbar * {
    display: none !important;
  }

  /* 4. Esconde o seletor de grupo (combo-box) no desktop reduzido/mobile */
  #combo-box-container,
  #dropdown-teste {
    display: none !important;
  }

  /* 5. Altura do Navbar & remocao de bordas */
  #navbar,
  #navbar-container,
  .navbar-content,
  .navbar-header {
    min-height: 55px;
    height: 55px;
    box-shadow: none !important;
    border-bottom: none !important;
    border: none !important;
    background-color: var(--millenio-white);
  }

  #navbar-container {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Remove pseudo-elementos do clearfix do Bootstrap dentro do flex */
  .navbar-header::before,
  .navbar-header::after {
    display: none !important;
    content: none !important;
  }

  .navbar-brand {
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
    float: none !important;
    width: auto !important;
  }

  .navbar-brand img {
    margin-right: 10px !important;
    margin-top: 0 !important;
  }

  /* 6. Correcao de espacamento "fantasma" do tema Nifty (>=768px) */
  #container.mainnav-in .navbar-brand,
  #container.mainnav-lg .navbar-brand,
  .navbar-brand,
  .brand-title {
    width: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #navbar .brand-title {
    padding: 0 !important;
    width: auto !important;
  }

  /* PESQUISA RAPIDA: quando aberta, revela a caixa de busca web existente   */
  /* como painel flutuante logo abaixo do navbar (reusa #txtGoogleAutoComplete) */
  body.mobile-search-open .navbar-top-links.pull-right > li.pesquisa-box {
    display: block !important;
    position: fixed !important;
    top: 55px;
    left: 0;
    right: 0;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    background-color: var(--millenio-white);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    z-index: 9000;
  }

  body.mobile-search-open .navbar-top-links.pull-right > li.pesquisa-box .searchbox2 {
    width: 100% !important;
  }
}

@media (max-width: 768px) {
  .navbar-top-links .dropdown-menu {
    left: auto !important;
  }
}

/* Oculta o footer (versao + "Informe um problema") em telas pequenas */
/* e reposiciona as coordenadas para 7rem (sem o footer nao precisa de 11rem) */
@media (max-width: 1360px) {
  #footer {
    display: none !important;
  }

  body:not(.leaflet--printing) .leaflet-bottom {
    bottom: 7rem !important;
  }

  /* Em mobile o sidepanel direito sobrepoe o mapa inteiro.
     Cancela o deslocamento de right:420px do leaflet-sidepanel.css
     para o botao de camadas nao sair da tela — o painel ja o cobre naturalmente. */
  .leaflet-anim-control-container.right-opened .leaflet-right,
  .leaflet-anim-control-container.right-closed .leaflet-right {
    right: 0 !important;
    transition: none !important;
  }
}