/**
 * Styles pour les flèches sur la carte
 */

/* Variables pour les styles des flèches */
:root {
    --arrow-default-color: #3a8a3d;
    --arrow-default-weight: 3;
    --arrow-default-opacity: 1;
    --arrow-default-curvature: 0.5;
    
    --arrow-enclosure-color: #3a8a3d;
    --arrow-enclosure-weight: 3;
    --arrow-enclosure-opacity: 1;
    --arrow-enclosure-curvature: 0.5;
}

/* Styles par défaut des flèches */
.arrow-default {
    color: var(--arrow-default-color);
    weight: var(--arrow-default-weight);
    opacity: var(--arrow-default-opacity);
    curvature: var(--arrow-default-curvature);
}

/* Styles pour les flèches dans les enceintes */
.arrow-in-enclosure {
    color: var(--arrow-enclosure-color);
    weight: var(--arrow-enclosure-weight);
    opacity: var(--arrow-enclosure-opacity);
    curvature: var(--arrow-enclosure-curvature);
}

/* Styles pour le modal de configuration des flèches */
#arrowModal .modal-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

#arrowModal .modal-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

#arrowModal .form-group {
    margin-bottom: 1rem;
}

#arrowModal .form-control-range {
    width: 100%;
}

/* Styles pour la prévisualisation des flèches */
.arrow-preview-container {
    height: 100px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}

.arrow-preview {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Styles pour les boutons du modal */
#delete-arrow-btn {
    background-color: #dc3545;
    color: white;
    border: none;
}

#delete-arrow-btn:hover {
    background-color: #c82333;
}

#save-arrow-btn {
    background-color: #28a745;
    color: white;
    border: none;
}

#save-arrow-btn:hover {
    background-color: #218838;
}

/* Styles pour les pointes de flèche */
.leaflet-arrow-head {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 16px solid #3a8a3d; /* Couleur par défaut, sera remplacée par JavaScript */
    transform-origin: center bottom;
    z-index: 1000;
}

/* Styles pour les pointes de flèche */
.arrow-head-icon {
    z-index: 1000 !important; /* S'assurer que les pointes de flèche sont au-dessus des autres éléments */
    pointer-events: none; /* Permettre aux clics de passer à travers la pointe de flèche */
}

/* Style pour les flèches */
.leaflet-interactive {
    cursor: pointer !important; /* S'assurer que le curseur est un pointeur sur les flèches */
}

/* Style pour mettre en évidence les flèches au survol */
.arrow-hover {
    stroke-width: 5px !important; /* Augmenter l'épaisseur au survol */
    transition: stroke-width 0.2s ease; /* Animation fluide */
}