:root {
    --bs-primary: #ffd700;
    --bs-primary-rgb: 255, 215, 0;
    --bs-secondary: #2d2d2d;
    --bs-link-color: #ffd700;
    --bs-link-hover-color: #ffeb3b;
  }
  
  .btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #f8e963fb;
    --bs-btn-hover-border-color: #ffeb3b;
    --bs-btn-active-bg: #ffc107;
    --bs-btn-active-border-color: #ffc107;
    color: #000 !important;
  }
  
  .btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-hover-color: #000;
  }
  
  .nav-tabs .nav-link.active {
    background-color: rgba(255,215,0,0.1);
    border-color: var(--bs-primary);
  }
  
  .navbar-brand img {
    height: 40px;
    margin-right: 10px;
    filter: brightness(0) invert(89%) sepia(99%) saturate(7496%) hue-rotate(358deg) brightness(107%) contrast(101%);
  }
  
  .sidebar {
    width: 240px;
    background: linear-gradient(90deg, #ff8507, #9382ff);
    color: white;
    height: auto;
    position: relative;
    overflow: hidden;
  }
  
  .project-card {
    transition: transform 0.2s;
    border-left: 4px solid var(--bs-primary) !important;
    color: inherit;
  }
  
  .project-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(255,215,0,0.1);
  }
  
  .nav-link.active {
    background: rgba(255,215,0,0.15) !important;
    border-radius: 6px;
  }
  
  .badge {
    --bs-badge-color: #fff;
  }
  
  [data-theme="dark"] .project-card {
    color: #fff !important;
  }
  
  [data-theme="dark"] .btn i,
  [data-theme="dark"] .nav-link i,
  [data-theme="dark"] .card i {
    color: #fff !important;
  }
  
  .settings-tabs .nav-link {
    color: #000 !important;
  }
  
  .settings-tabs .nav-link.active {
    background-color: rgba(0,0,0,0.1) !important;
    color: #000 !important;
  }
  
  @media (max-width: 768px) {
    .sidebar {
      width: 100%;
      height: auto;
    }
    
    .main-content {
      margin-top: 20px;
    }
  }
  
  .content-section .nav-link {
    --bs-nav-link-color: #000;
    --bs-nav-link-hover-color: #666;
    border-radius: 4px;
    padding: 8px 12px;
  }
  
  .content-section .nav-link:not(.active) {
    transition: all 0.3s ease;
  }
  
  .content-section .nav-link:hover:not(.active) {
    background-color: #f8e963b4 !important;
    color: #000 !important;
    transform: translateX(3px);
  }
  
  .content-section .nav-link.active {
    background-color: #f8e963b4 !important;
    color: #000 !important;
    border-bottom: 2px solid var(--bs-primary);
    transform: none !important;
  }
  
  .sidebar .nav-link {
    --bs-nav-link-color: rgba(255,255,255,0.7);
    --bs-nav-link-hover-color: #fff;
  }
  
  .btn-new-project i {
    transition: transform 0.3s ease;
  }
  
  .btn-new-project:hover i {
    transform: scale(1.1);
  }
  
  .sidebar .d-flex.align-items-center {
    width: 240px;
    margin-left: -12px;
    margin-right: -12px;
  }
  
  .sidebar img {
    width: 240px !important;
    height: 240px !important;
    object-fit: contain;
  }
  
  @media (max-width: 768px) {
    .sidebar img {
      width: 180px !important;
      height: 180px !important;
      margin: 0 auto;
      display: block;
    }
  }
  
  a.nav-link {
    color: black;
  }
  
  #newProjectModal .modal-content {
    border: 2px solid var(--bs-primary);
  }
  
  #newProjectModal .nav-tabs {
    border-bottom: 2px solid #dee2e6;
  }
  
  #newProjectModal .nav-link.active {
    border-color: var(--bs-primary);
  }
  
  .input-group-text {
    background-color: var(--bs-primary);
    color: #000;
  }
  
  .main-content {
    transition: opacity 0.3s ease;
  }
  
  .sidebar .nav-link.active {
    background-color: rgba(255,215,0,0.15) !important;
    border: 2px solid var(--bs-primary);
    border-radius: 6px;
  }
  
  #config-content .settings-tabs .nav-link.active {
    background-color: rgba(0,0,0,0.1) !important;
    color: #000 !important;
  }


  /* Ajustes para o modal de consumo */
#cons-container input[type="number"] {
  min-width: 100px;
}

/* Validação de formulário */
.was-validated input:invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220,53,69,.25);
}

.was-validated input:valid {
  border-color: #198754;
  box-shadow: 0 0 0 0.25rem rgba(25,135,84,.25);
}

/* Estilos para configurações */
.color-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 10px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.color-option:hover {
  background-color: rgba(0,0,0,0.05);
}

.color-option.selected {
  background-color: rgba(0,0,0,0.1);
  box-shadow: 0 0 0 2px var(--bs-primary);
}

.color-preview {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: 5px;
  border: 2px solid #ddd;
}

.avatar-placeholder {
  width: 80px;
  height: 80px;
  background-color: #f0f0f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.avatar-placeholder i {
  font-size: 40px;
  color: #aaa;
}

/* Ajustes para abas de configurações */
#configTabs .nav-link {
  color: #fff;
  border-radius: 0;
  padding: 0.5rem 1rem;
  border: none;
  margin-right: 2px;
}

#configTabs .nav-link.active {
  background-color: #fff;
  color: var(--bs-secondary);
  border-top: 3px solid var(--bs-primary);
}

#configTabs .nav-link:hover:not(.active) {
  background-color: rgba(255,255,255,0.1);
}

/* Responsividade para configurações */
@media (max-width: 768px) {
  .color-option {
    padding: 5px;
  }
  
  .color-preview {
    width: 30px;
    height: 30px;
  }
  
  #configTabs .nav-link {
    padding: 0.3rem 0.5rem;
    font-size: 0.9rem;
  }
}

/* Estilos para o mapa e alertas */
.map-alert,
.map-status {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  max-width: calc(100% - 20px);
}

.map-status {
  background-color: rgba(255, 255, 255, 0.95);
  border-color: #17a2b8;
  color: #0c5460;
  text-align: center;
  padding: 8px;
}

.map-loading {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: var(--bs-primary);
  color: #333;
  text-align: center;
  padding: 8px;
}

#map {
  position: relative;
  overflow: hidden;
  width: 100% !important;
  height: 400px !important;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
}

#map .ol-zoom {
  top: unset;
  bottom: 10px;
  left: 10px;
}

#map .ol-attribution {
  bottom: 5px;
  right: 5px;
  font-size: 10px;
}

/* Correção para o mapa dentro do modal */
.modal #map {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Garantir que os controles do OpenLayers sejam exibidos corretamente */
.ol-control {
  position: absolute;
  background-color: rgba(255,255,255,0.4);
  border-radius: 4px;
  padding: 2px;
}

.ol-control button {
  display: block;
  margin: 1px;
  padding: 0;
  color: white;
  font-size: 1.14em;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  height: 1.375em;
  width: 1.375em;
  line-height: .4em;
  background-color: rgba(0,60,136,0.5);
  border: none;
  border-radius: 2px;
}

.ol-control button:hover,
.ol-control button:focus {
  background-color: rgba(0,60,136,0.7);
}

/* Animação para o marcador */
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.ol-layer .ol-marker {
  animation: pulse 1.5s infinite;
}

/* Tooltip para coordenadas */
.map-tooltip {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: rgba(255,255,255,0.8);
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  z-index: 1000;
}

#pdfPreview {
  width: 100%;
  overflow-x: auto;
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 5px;
}

#pdfCanvas {
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  background-color: white;
  margin: 0 auto;
}

#downloadPdfBtn {
    width: 100%;
  }

/* Estilo dos botões Connect/Ortho: borda preta, fundo branco e inversão quando ativos */
#btn-connect-mode, #btn-ortho-mode, #btn-group, #btn-ungroup, #btn-line-color, #btn-guides-toggle {
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
  margin-right: 10px;
}
.input-group .input-group-text {
 background-color: #fff;
 color: #000;
 border: 1px solid #000;
}


.form-control #input-group{
 background-color: #fff;
 color: #000;
 border: 1px solid #000;
 margin-right: 10px;
}


#btn-connect-mode:hover, #btn-ortho-mode:hover {
  background-color: #f8f9fa;
}
#btn-connect-mode.active, #btn-ortho-mode.active {
  background-color: #ffbc00;
  color: #fff;
  border-color: #ffbc00;
}
#btn-connect-mode i, #btn-ortho-mode i {
  color: inherit !important;
}
.modal-dialog.modal-xxl {
  max-width: min(96vw, 1400px);
}
@media (max-width: 992px) {
  .modal-dialog.modal-xxl {
    max-width: 98vw;
  }
}

/* SweetAlert2: ocupar 100% da largura da tela */
.swal2-container {
  padding: 0 !important;
}

.swal2-popup.swal2-fullwidth {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box;
}

.swal2-title,
.swal2-html-container,
.swal2-actions {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
/* SweetAlert largura total para tabelas do CRESESB */
.swal2-popup.swal2-fullwidth {
  width: 100% !important;
  max-width: 100vw !important;
  padding: 1rem !important;
}
.swal2-popup.swal2-fullwidth .swal2-html-container {
  width: 100% !important;
}
.swal2-popup.swal2-fullwidth .table-responsive {
  width: 100% !important;
}