/* ==========================================================================
   ESTILOS GLOBAIS
   ========================================================================== */

   body {
    background-color: #F0F2F5 !important; /* Branco Creme */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    color: #343a40;
    line-height: 1.6;
    font-size: 16px;
    /* Garante que a página não role horizontalmente em telas pequenas */
    overflow-x: hidden;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-weight: 500; 
    color: #2C3E50; 
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }
  
  /* Remove outline padrão do Bootstrap no foco */
  .btn:focus, .btn:active:focus, .btn.active:focus,
  .form-control:focus, .form-select:focus {
    box-shadow: none !important;
  }
  
  /* ==========================================================================
     ESTILOS DE COMPONENTES ESPECÍFICOS (DESKTOP)
     ========================================================================== */
  
  /* Efeito de hover para os cards regionais */
  .card-regional-hover-effect:hover {
    transform: translateY(-4px); 
    box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important; 
  }
  
  /* Estilos para DatePickerRange Discreto */
  .date-picker-discrete-pages .DateInput_input, 
  .date-picker-discrete-pages .DateInput_input__focused {
    font-size: 0.8rem !important; padding: 5px 8px !important; border-radius: 4px !important; height: auto !important; line-height: normal !important; text-align: center; 
  }
  .date-picker-discrete-pages .SingleDatePickerInput__withBorder {
    border-radius: 4px !important; border: 1px solid #ced4da !important; background-color: #fff !important; 
  }
  .date-picker-discrete-pages .DateRangePickerInput_arrow_svg {
    height: 14px !important; width: 14px !important; margin: 0 6px !important; fill: #495057 !important; 
  }
  .DateRangePicker_picker { 
    z-index: 1060 !important; 
  }
  
  /* Estilos do Painel Retrátil (Mapa Vereadores - Desktop) */
  .collapsible-control-panel-container {
      position: absolute;
      top: 15px;
      left: 15px;
      z-index: 1001; /* Garante que fique sobre o mapa */
  }
  
  /* O botão de abrir/fechar do painel flutuante (ícone de filtro) */
  .control-panel-toggle-button {
      display: none; /* Escondido no desktop por padrão */
  }
  
  /* O painel de filtros em si */
  .collapsible-control-panel {
      width: 340px; 
      max-height: calc(100vh - 100px); /* Altura máxima para não cobrir a navbar e o fundo */
      overflow-y: auto;
      transition: transform 0.3s ease-in-out; 
      transform: translateX(0); /* Estado inicial: visível */
      background-color: rgba(255, 255, 255, 0.97); 
      backdrop-filter: blur(4px); 
      border-radius: 8px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  }
  
  /* Estilo para os ícones de imagem no mapa leaflet */
  .marker-icon-style {
      border-radius: 50%;
      border: 2px solid white;
      box-shadow: 0 2px 5px rgba(0,0,0,0.4);
      object-fit: cover;
  }
  
  
  /* ==========================================================================
     ESTILOS RESPONSIVOS PARA MOBILE (Telas menores que 992px)
     ========================================================================== */
  @media (max-width: 991.98px) {
  
    /* --- Navbar Responsiva (sem alterações) --- */
    .navbar-collapse.collapse.show {
      background-color: #132238; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 0.5rem; padding-bottom: 0.5rem; box-shadow: 0 4px 8px rgba(0,0,0,0.3); position: absolute; top: 100%; left: 0; right: 0; z-index: 1050;
    }
    .navbar-collapse .navbar-nav .nav-item {
      width: 100%; 
    }
    .navbar-collapse .navbar-nav .nav-link {
      text-align: left; color: rgba(255, 255, 255, 0.85) !important; padding: 0.85rem 1.5rem !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0 !important; 
    }
    .navbar-collapse .navbar-nav .nav-item:last-child .nav-link {
      border-bottom: none; 
    }
    .navbar-collapse .navbar-nav .nav-link:hover,
    .navbar-collapse .navbar-nav .nav-link.active {
      background-color: rgba(255, 255, 255, 0.12) !important; color: #FFFFFF !important;
    }
  
    /* --- AJUSTES PARA O MAPA DE VEREADORES EM MOBILE --- */
  
    /* Botão flutuante para ABRIR o painel */
    .control-panel-toggle-button {
      display: flex !important; /* Torna o botão visível */
      align-items: center;
      justify-content: center;
      position: fixed;
      top: 70px; /* Abaixo da navbar */
      right: 15px;
      z-index: 1002;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      padding: 0;
      font-size: 1.1rem;
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
  
    /* O painel de filtros no mobile começa escondido */
    .collapsible-control-panel {
      position: fixed;
      width: 100% !important;
      height: 100% !important;
      max-height: 100% !important;
      top: 0;
      left: 0;
      border-radius: 0;
      z-index: 1010; 
      transform: translateX(-100%); /* Começa escondido à esquerda */
    }
  
    /* Classe para mostrar o painel no mobile */
    .collapsible-control-panel.open-mobile {
      transform: translateX(0) !important;
    }
  }

  /* Adicionado para ajustar o layout da página Overview */
.overview-details-title {
  margin-top: -10px !important; /* Move o título "Detalhes por Serviço" para baixo */
}