html, body {
   font-family: verdana, arial, sans-serif;
   font-size: 10px;
   height: 100%;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   overflow: hidden;       /* no scroll bar */
}

header {
   position: relative;
   z-index: 1000;
   background-color: black;
   width: 100%;
}

header a, .menu {
   border: 0px solid white;
   padding: 4px 8px;
   font-size: 14px;
   font-weight: bold;
   text-decoration: none;
   background-color: black;
   color: white;
   width: 90px;
   display: inline-block;
   text-align: left;
}

/* popups over all other Leaflet */
.leaflet-popup-pane {
    z-index: 10000 !important;
}
#wind-layer {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 300; /* lower than .leaflet-popup-pane (700) */
}

#cadenas {
   color: lightgray;
}

.menu-link {
   border: 0px solid white;
   padding: 4px 8px;
   font-size: 14px;
   font-weight: bold;
   text-decoration: none;
   background-color: black;
   color: white;
   width: 100%;
   display: inline-block;
   text-align: left;
}

header a:hover, .menu:hover {
   background-color: #ddd;
   color: white;
}

.dropdownRight { /* for connexion */
   position: absolute;
   right: 0px;
   display: inline-block;
}

.dropdown {
   position: relative;
   display: inline-block;
}

.dropdown-content  {
   display: none;
   position: absolute;
   background-color: white;
   min-width: 100px;
   box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
   z-index: 1;
}

.dropdown-content a {
   display: block;
   padding: 4px 8px;
   text-decoration: none;
   color: white;
}

.dropdown-content a:hover, .menu-link:hover {
   background-color: #ddd;
}

.dropdown:hover .dropdown-content {
   display: block;
}

.container {
   display: flex;
   flex-direction: column;
   height: 100vh;
}

.btn {
   border: none;
   padding: 5px 5px;
   margin: 5px;
   margin-bottom: 30px; 
   width: 40px;
   height: 40px;
   font-size: 18px;
   cursor: pointer;
   border-radius: 50%;
   background-color: orange;
   color: white;
   transition: 0.3s;
}
.btn:hover {
   background-color: black;
}
.btn:active {
   transform: scale(0.95);
}
.btn i {
   margin-right: 5px;
}

.footer {
   /*position: fixed;*/
   bottom: 0;
   width: 100%;
   background-color: #333;
   color: white;
   padding: 10px 20px;
   text-align: left;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 14px;
   position: relative;
   z-index: 1000;
}
.footer .left {
   display: flex;
   align-items: center;
   gap: 10px;
}
.footer .right {
   display: flex;
   align-items: center;
   gap: 25px;
}
#coords {
   display: inline-block;
   margin-right: 30px;
}
.footer i {
   margin-right: 5px;
}
/* Pour slider et boite à cocher isochrone */
.isocContainer {
   margin-left: 50px; 
   /*margin-right: 50px; /* Ajoute un espace à droite */
   /* display: flex;*/
   align-items: center;
   gap: 10px; /* Espacement entre les éléments */
}

/* Changer la couleur du slider */
input[type="range"] {
   /*accent-color: #444; *//* Gris foncé */
   accent-color: orange; /* Gris foncé */
}

#infoTime {
   margin-left: 50px; 
   font-size: 18px;
   margin-bottom: 30px; 
   font-family: Courier;
}

.poi-delete-button {
    background: none;
    border: none;
    padding: 0;
    margin-left: 6px;
    font-size: 16px;
    cursor: pointer;
    vertical-align: middle;
}

.poi-delete-button:hover {
    color: red;
}

#windy {
   flex: 1 1 auto;
   position: relative;        /* important for z-index */
   z-index: 0;                /* lesse than header/footer */
   background-color: #d0e7ff; /* blue sea*/
   position: relative;        /* Useful for Windy map*/
}

/* Masquer la timeline + son player */
#windy.no-timeline #bottom, #windy.no-timeline .progress-bar {
   display: none !important;
}

#tools {
   height: 50px;
   display: flex;
   align-items: center;
}

#infoRoute {
   font-size:16px; 
   display: inline; /* ou flex si besoin */
   /*width: 100%;*/
   white-space: nowrap; /* Empêche les retours à la ligne */
   overflow: hidden; /* Masque le débordement */
   text-overflow: ellipsis; /* Ajoute "..." si trop long */
}

#coords {
   font-size:12px;
   width: 150px; 
}

#context-menu {
   position: absolute;
   background: #2c2c2c; /* gris très foncé */
   border: 1px solid #444;
   padding: 6px;
   box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
   z-index: 1000;
   border-radius: 4px;
}

.context-button {
   display: flex;
   align-items: center;
   background: transparent;
   border: 1px solid #555;
   color: #f0f0f0;
   padding: 6px 10px;
   margin: 2px 0;
   width: 240px;
   text-align: left;
   cursor: pointer;
   gap: 8px;
   border-radius: 3px;
}

.context-button:hover {
   background-color: #3a3a3a;
}

.color-dot {
   display: inline-block;
   width: 12px;
   height: 12px;
   border-radius: 50%;
   flex-shrink: 0;
}

select {
   background-color: white;
   color: black;
}

/* Changer la couleur de l'option sélectionnée dans la liste */
select:focus option:checked {
   background-color: #ddd;
   color: white;
}

/* Spinner*/
.spinner {
   width: 60px;
   height: 60px;
   border-width: 8px;
   border-style: solid;
   border-color: rgba(243, 243, 243, 0.6);
   border-top-color: #3498db;
   border-radius: 50%;
   animation: spin 1s linear infinite;
   /* En bonus : le centrer */
   margin: 50px auto;
   display: block;
}

/* Animation du spinner */
@keyframes spin {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}

/* Overlay du spinner qui recouvre la carte */
.spinner-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.2); /* Fond noir avec faible opacité */
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
   display: none; /* Caché par défaut */
}

/*--------------------------------------------------------------------------------------*/
/* for polarChoose dialog select box */
.swal-wide {
   width: 550px !important; /* Largeur fixe */
   max-width: 100vw !important; /* Évite un dépassement sur petits écrans */
   overflow: hidden !important; /* Supprime le débordement */
}

/* Conteneur principal pour éviter le débordement */
.swal2-html-container {
   max-width: 100% !important; /* Empêche un élargissement inutile */
   overflow-x: hidden !important; /* Supprime le scroll horizontal */
   padding: 10px 0 !important; /* Évite un padding excessif qui causerait un débordement */
}

/* Réduction de la largeur du menu déroulant */
.swal2-select {
   width: 95% !important; /* Réduit uniquement le select */
   max-width: 300px !important; /* Empêche l'expansion */
   font-size: 16px;
   white-space: nowrap; /* Garde les noms sur une seule ligne */
   text-overflow: ellipsis; /* Coupe proprement les noms trop longs */
   display: block;
   margin: 0 auto; /* Centre le select dans la boîte */
}

/* Suppression de la barre de scroll globale */
.swal2-popup {
   overflow-x: hidden !important; /* Bloque toute tentative de scroll horizontal */
}

/* Style du bouton de validation */
.swal2-confirm {
   background-color: orange !important;
   border-color: black !important;
}

/* for displayComp () Swal box */
.comp-table {
   width: 100%;
   border-collapse: collapse;
}

.comp-table th, .comp-table td {
   padding: 8px;
   border: 1px solid #ddd;
   text-align: center;
}

.comp-table thead {
   background-color: #f2f2f2;
}

/* For import competitor */
.swal2-html-container table {
   border-collapse: collapse;
   margin: auto;
   width: 100%;
   font-size: 13px;
   table-layout: auto;
}

.swal2-html-container th, .swal2-html-container td {
   border: 1px solid #ccc;
   padding: 4px 6px;
   text-align: center;
}

.swal2-html-container thead {
   background-color: #f0f0f0;
   font-weight: bold;
}

/* for feedback */
.swal2-custom-table {
   width: 100%;
   border-collapse: collapse;
   margin: 1em 0;
   border: none;
}

.swal2-feedback-custom-table td {
   padding: 0.5em;
   vertical-align: top;
   border: none;
}

.swal2-feedback-label {
   font-weight: bold;
   white-space: nowrap;
   padding-right: 0.5em;
   color: #333;
   width: 25%;
}

.swal2-feedback-input,
.swal2-feedback-textarea {
   width: 100%;
   box-sizing: border-box;
   padding: 0.6em 0.75em;
   border: 1px solid #ccc;
   border-radius: 8px;
   font-size: 1em;
   font-family: inherit;
   transition: border-color 0.3s ease;
}

.swal2-feedback-input:focus,
.swal2-feedback-textarea:focus {
   border-color: #3085d6;
   outline: none;
}

.swal2-feedback-textarea {
   resize: vertical;
   min-height: 100px;
}

/* for AIS moving */
@keyframes blink {
   0%, 100% {
      opacity: 1;
      transform: scale(1) rotate(var(--cog));
   }
   50% {
      opacity: 0.4;
      transform: scale(1.2) rotate(var(--cog));
   }
}
.ais-moving {
   animation: blink 1.2s infinite;
}
/* for marks (virtual Regatta) */
.leaflet-marker-icon.mark-emoji {
   font-size: 22px;
   line-height: 22px;
   text-align: center;
}

/* for showInitMessage r3util */
.swal-init-cancel {
   background-color: orange !important;
   color: white !important;
 }
.swal-init-confirm {
   background: none !important;
   border:none;
   color: inherit !important;
   box-shadow: none !important;
}

/* for isodesc representation */
.iso-desc-icon {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #777;
   opacity: 0.6;       /* discret */
}

.warning-blink {
   background: rgba(255, 152, 0, 0.15);
   color: #ff9800;
   padding: 3px 8px;
   border-radius: 6px;
   font-weight: bold;
   animation: blinkWarning 1.2s infinite;
}

@keyframes blinkWarning {
   0%, 100% { opacity: 1; }
   50%      { opacity: 0.4; }
}