/*cambio colore di default di bootstrap*/
    :root, body {
        --bs-primary-rgb: 32, 150, 212 !important; /* red bean kumbe */
        --bs-border-radius-pill: 0.5rem !important; /* esempio più arrotondato */
    }

    .bg-dark {
    background-color: #fff !important;
    }

    /**/

    /* disabilita selezione testo su tutto il body */
    body{
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    /* disabilita selezione testo su a e button */
    a, button {
        -webkit-touch-callout: none; /* iOS */
        touch-action: manipulation;  /* evita zoom e gesture inutili */
      }

    /* abilita selezione in select */

      select {
        -webkit-user-select: auto !important;
        -ms-user-select: auto !important;
        user-select: auto !important;
        -webkit-touch-callout: default !important;
        touch-action: auto !important;
      }

      .small{
        font-size: 12px !important;
      }
      
      

      .nocapo {
        white-space: nowrap;
      }



    .rounded-top-large {
        border-top-left-radius: 0.5rem;   /* circa 16px */
        border-top-right-radius: 0.5rem;
        }
        .rounded-bottom-large {
        border-bottom-left-radius: 0.5rem;   /* circa 16px */
        border-bottom-right-radius: 0.5rem;
        }

@keyframes slideIn {
    from {
        transform: translateX(-50%) translateY(100px);
        opacity: 0;
    }

    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}



    .text-white {
        color: #000 !important;
    }
.drag-handle {
    width: 50px;
    height: 5px;
    background: #333;
    border-radius: 10px;
    margin-top: 5px;
    margin-bottom: 15px;
}

.navbar-brand span {
    line-height: 11px;
    margin-bottom: 6px;
}


.navbar-brand small {
    font-size: 11px;
    line-height: 11px;
}

#languageSelector, #languageSelector select{
    font-size: 12px;
}

#azioniMappa{
background-color: #fff;
}

#azioniMappa button {
    /*
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #333;
    border: 1px solid #555;
    */
  all: unset; /* reset completo */
  display: inline-block;
  cursor: pointer;
}

#azioniMappa button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #999;
    color: #000;
  }
 
.red-bean-back{
    background-color:rgb(32, 150, 212) !important;
}

#azioniMappa .nav-item:hover {
    background-color: #fff;
    transition: background-color 0.3s ease;
  }

  #azioniMappa small {
    font-size: 11px;
  }
  #azioniMappa .nav-item {
    flex: 1;
  min-width: 0; /* evita overflow testo lungo */
  }

#top-menu{
    max-width: 400px; 
    color: #000;  
}
#top-menu small{
    color: #000 !important;  
}

#pannello {
    touch-action: none;
    /* Migliora gestione gesture */
    max-height: calc(100vh - 100px);
    max-width: 400px;
    /* 60px ad esempio per lasciare spazio sopra */
    overflow: hidden;
    /* Evitiamo che l'intero pannello scrolli, solo il contenuto interno deve farlo */
}

#listaSegnalazioni,
#segnalazioneForm {
    overflow-y: auto;
    max-height: calc(100vh - 200px);
    /* Un po' meno del pannello per tener conto di titolo, pulsante chiudi ecc. */
    padding-right: 8px;
    /* Opzionale: migliora l'aspetto della scrollbar */
}

#listaSegnalazioni::-webkit-scrollbar,
#segnalazioneForm::-webkit-scrollbar {
    width: 6px;
}

.blur-all {
filter: blur(4px);
transition: filter 0.3s ease;
will-change: filter;
transform: translateZ(0);
}



body,
#pannello{
    background-color: #fff !important;
    color: #000;
}

.btn,
.form-control,
.form-select,
.form-control:focus,
.form-select:focus {
    background-color: #fff !important;
    color: #000;
    border-color: rgb(202 202 202);
}

.btn.btn-warning {
    background-color: rgb(32, 150, 212) !important;
    color: #f0f0f0;
    border-color: none;
}

.btn-close {
    filter: invert(0);
}

.drag-handle {
    background: #666 !important;
}



#listaSegnalazioni::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

#apriLista:focus i {
    color: #000;
    /* eredita il colore normale */
}



#iconStatus {
    font-weight: 900;
    /* Tentativo di aumentare il peso */
    text-shadow: 0 0 1px currentColor, 0 0 1px currentColor;
    line-height: 0;
}



.form-check-input{
   border: var(--bs-border-width, 1px) solid #6c757d !important; 
}


.custom-select-wrapper {
position: relative;
display: inline-block;

}

.custom-select-wrapper select {
border: none !important;
background-color: transparent !important; /* Opzionale, se vuoi uno sfondo pulito */
color: #000;
padding-right: 1.8rem;
box-shadow: none !important;
cursor: pointer;
}

.custom-select-wrapper .bi-chevron-down {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: #000;
display: none;
}

.form-control::placeholder {
color: #666;
opacity: 0.8; /* Importante per Firefox */
}

.form-label {
    margin-bottom: .5rem;
    font-weight: 600;
}


.crosshair-marker {
font-size: 16px;
top: 0;
left: 0;
position: absolute;
transform: translate(-50%, -50%); /* Centra l'icona */
color: #007bff; /* blu GPS */
text-shadow: 0 0 6px rgba(0, 123, 255, 0.6), 0 0 12px rgba(0, 123, 255, 0.4);
animation: pulse 1.5s ease-in-out infinite;
z-index: 9999;
}



@keyframes pulse {
    0% {
      text-shadow: 0 0 2px rgba(0, 123, 255, 0.4);
    }
    50% {
      text-shadow: 0 0 20px rgba(0, 123, 255, 0.9), 0 0 40px rgba(0, 123, 255, 0.5);
    }
    100% {
      text-shadow: 0 0 2px rgba(0, 123, 255, 0.4);
    }
  }

.pin-marker {
    font-size: 32px;
    top: 0;
    left: 0;
    position: absolute;
    transform: translate(-50%, -50%); /* Centra l'icona */
    color: red; 
    z-index: 9999;
    }

    .leaflet-top {
        top: 48px !important;
    }

.mic-pulse {
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  animation: pulse 1s infinite;
  display: inline-block;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.5); opacity: 0.4; }
  100% { transform: scale(1); opacity: 0.8; }
}

.leaflet-control-attribution.leaflet-control a{
    display:none !important;
}

.kumbe{
    z-index: 999;
    background: #fff;
    text-decoration: none;
    opacity: 0.8;
    padding: 0px 4px;
    margin-left: -88px !important;
    border-radius: 4px 4px 0 0;
}

    .zindex-tooltip{
z-index: 1000;
    }
 #layerGuida{
    margin-bottom: 150px;
}
#layerToggleBtn{
    margin-bottom: 100px;
}
#layerToggleBtn .btn, #layerGuida .btn{
aspect-ratio: 1 / 1;
border:none;
}

    #layerPanel{
    margin-bottom: 152px;
}
  #layerPanel button {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 4px;
    
  }
  #layerPanel button.active {
    font-weight: bold;
    background-color: #0d6efd;
    color: black;
  }

  #modalZoom, #modalGuida {
z-index: 2055 !important; /* sopra gli offcanvas (1045) e altri layer */
position: fixed !important;
}

#modalGuida .modal-dialog{
    max-width: 400px;
  margin: auto;
}

.modal-backdrop {
    z-index: 2050 !important;
}

.carousel-indicators button {
    background-color: #000 !important; /* colore dei pallini */
    opacity: 0.5; /* opacità per un effetto più soft */
}

#fileInfo.flex {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bg-custom, .btn.btn-warning.bg-custom{
    background-color:#ffd200 !important;
    color:#000 !important;
}

.carousel-item h5{
  padding-top:3px;
}