/* Barra de rolagem fina apenas na lista de dispositivos - DESABILITADO */
/*
.DeviceList-scrollbar ::-webkit-scrollbar {
  width: 3px !important;
}
.DeviceList-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #1A237E #fff;
}
*/
/* Fonte padrão Rubik para SweetAlert2 */
.swal2-popup, .swal2-title, .swal2-content, .swal2-html-container, .swal2-confirm, .swal2-cancel, .swal2-actions {
  font-family: 'Rubik', sans-serif !important;
}

/* Font-weight específico para o título */
.swal2-title {
  font-weight: 500 !important;
}

/* Igualar largura dos botões BLOQUEAR e DESBLOQUEAR (versão 2 botões) */
.swal2-confirm,
.swal2-cancel {
  min-width: 150px !important;
  width: 150px !important;
  height: 40px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: 'Rubik', sans-serif !important;
  text-align: center !important;
  vertical-align: middle !important;
  line-height: 1.2 !important;
  border-radius: 6px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

/* Estilos para os novos botões de 3 opções */
.swal2-confirm-btn-custom,
.swal2-deny-btn-custom,
.swal2-cancel-btn-custom {
  min-width: 120px !important;
  width: 120px !important;
  height: 40px !important;
  margin: 0 5px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: 'Rubik', sans-serif !important;
  padding: 10px 15px !important;
  text-align: center !important;
  vertical-align: middle !important;
  line-height: 1.2 !important;
  border-radius: 6px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

/* Estilos específicos para cada botão */
.swal2-confirm-btn-custom {
  background-color: #d33 !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  padding: 0 !important;
}

.swal2-deny-btn-custom {
  background-color: #28a745 !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  padding: 0 !important;
}

.swal2-cancel-btn-custom {
  background-color: #6c757d !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  padding: 0 !important;
}

/* Hover effects */
.swal2-confirm-btn-custom:hover {
  background-color: #bd2130 !important;
}

.swal2-deny-btn-custom:hover {
  background-color: #218838 !important;
}

.swal2-cancel-btn-custom:hover {
  background-color: #5a6268 !important;
}

/* Ajustar o container dos botões para 3 botões */
.swal2-actions-custom {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 20px !important;
  padding: 0 10px !important;
}

/* Ajustar z-index do SweetAlert2 para aparecer acima do mapa */
.swal2-container {
  z-index: 10000 !important;
}

.swal2-popup {
  z-index: 10001 !important;
}

/* Remover fundo branco indesejado - backdrop transparente para todos os SweetAlerts */
.swal2-backdrop-show,
.swal2-backdrop,
.swal2-container {
  background-color: transparent !important;
  background: transparent !important;
}

/* Fundo completamente transparente para toasts de sucesso */
.swal2-toast .swal2-backdrop-show,
.swal2-toast.swal2-backdrop-show {
  background-color: transparent !important;
}

/* Fundo transparente específico para modal de âncora - regras múltiplas */
.swal-anchor-modal .swal2-backdrop-show,
.swal-anchor-modal .swal2-backdrop,
.swal-anchor-modal.swal2-container,
.swal-anchor-modal {
  background-color: transparent !important;
  background: transparent !important;
}

/* Device label styles */
.device-label-btn {
  background: #fff;
  color: #394091;
  border: 2px solid #394091;
  border-radius: 8px;
  font-weight: bold;
  font-size: 15px;
  padding: 2px 12px 2px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  cursor: pointer;
  position: relative;
  top: -8px; /* Sobe o nome do dispositivo um pouco mais */
  transition: top 0.2s;
}
.device-label-btn:active {
  top: -10px;
}
.device-label-arrow {
  display: block;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -8px;
}
/* Scrollbar customizada para a lista de dispositivos */

.DeviceList-scrollbar::-webkit-scrollbar {
  width: 5px !important;    
}
.DeviceList-scrollbar::-webkit-scrollbar-thumb {
  background: #1A237E !important;
  border-radius: 8px !important;
}
.DeviceList-scrollbar {
  /*scrollbar-width: thin !important;*/
  scrollbar-color: #1A237E #FFFFFF !important;
}

/* Esconde qualquer botão de layers do MapLibre sobre o mapa */
.maplibregl-style-switcher,
.maplibregl-style-list,
.maplibregl-ctrl-top-right .maplibregl-ctrl {
  display: none !important;
}

html, body {
  height: 100%;
  overflow-x: hidden; /* Remove barra de rolagem horizontal */
  overflow-y: hidden; /* Remove barra de rolagem vertical */
  /* Removido overflow: hidden para evitar problemas em dropdowns e selects */
}

body {
  margin: 0;
  padding: 0;
}

/* Previne qualquer elemento de causar overflow horizontal */
* {
  box-sizing: border-box;
}

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-x: hidden; /* Remove barra de rolagem horizontal do container principal */
  max-width: 100vw; /* Garante que não exceda a largura da viewport */
}

.maplibregl-ctrl-scale {
  text-align: center !important;
  background: #394091 !important;
  border-radius: 5px !important;
  border: none !important;
  color: #fff !important;
}
div.maplibregl-ctrl-scale span, .maplibregl-ctrl-scale span, .maplibregl-ctrl-scale > span, .maplibregl-ctrl-scale span::after, .maplibregl-ctrl-scale span::before {
  display: block;
  width: 100%;
  text-align: center !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-text-stroke: 0px #fff !important;
  font-size: 1.15em !important;
  font-weight: bold !important;
  text-shadow: 0 1px 2px #222;
}