/**
 * Styles pour le support Emprise dans geo-map
 * 
 * Classes principales:
 * - .geo-map-field.emprise-enabled : Conteneur avec emprise activée
 * - .emprise-toolbar : Barre d'outils emprise
 * - .emprise-instruction : Message d'instruction
 * - .emprise-status : Statut emprise
 * 
 * États (classes sur .geo-map-field):
 * - .state-initial
 * - .state-editing-marker
 * - .state-marker-defined
 * - .state-editing-emprise
 * - .state-complete
 * - .state-view-only
 * 
 * @version 1.0.0
 */

/* ============================================
   TOOLBAR EMPRISE
   ============================================ */

.emprise-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: linear-gradient(to bottom, #f8f9fa, #f1f3f5);
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 10px;
}

.toolbar-section {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-separator {
    color: #ccc;
    padding: 0 4px;
}

.toolbar-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 80px;
}

.item-header {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85em;
}

.item-label {
    font-weight: 500;
    color: #333;
}

.coordinates-display,
.emprise-info {
    font-size: 0.75em;
    color: #666;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Boutons toolbar */
.emprise-toolbar .btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-size: 0.85em;
}

.emprise-toolbar .btn.active,
.emprise-toolbar .btn.btn-primary {
    box-shadow: 0 0 0 3px rgba(51, 136, 255, 0.25);
}

.emprise-toolbar .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Section actions dessin */
.toolbar-draw-actions {
    margin-left: auto;
    border-left: 1px solid #ddd;
    padding-left: 12px;
}

/* Section confirmer/annuler */
.toolbar-confirm {
    border-left: 1px solid #ddd;
    padding-left: 12px;
}

/* Couleur picker */
.toolbar-color {
    margin-left: auto;
}

.emprise-color-picker {
    width: 32px;
    height: 28px;
    padding: 2px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    background: #fff;
}

.emprise-color-picker:hover {
    border-color: #999;
}

/* ============================================
   INSTRUCTIONS EMPRISE
   ============================================ */

.emprise-instruction {
    padding: 8px 12px;
    background: #e7f3ff;
    border: 1px solid #b8daff;
    border-radius: 4px;
    color: #004085;
}

.emprise-instruction .fas {
    margin-right: 6px;
    color: #17a2b8;
}

/* ============================================
   STATUT EMPRISE
   ============================================ */

.emprise-status {
    font-size: 0.9em;
}

.emprise-status .status-message {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Couleurs selon l'état */
.geo-map-field.state-complete .emprise-status .status-message {
    color: #28a745;
}

.geo-map-field.state-initial .emprise-status .status-message,
.geo-map-field.state-marker-defined .emprise-status .status-message {
    color: #856404;
}

.geo-map-field.state-editing-marker .emprise-status .status-message,
.geo-map-field.state-editing-emprise .emprise-status .status-message {
    color: #17a2b8;
}

/* ============================================
   ÉTATS VISUELS CARTE
   ============================================ */

/* Bordure carte selon état */
.geo-map-field.state-editing-marker .geo-map-container,
.geo-map-field.state-editing-emprise .geo-map-container {
    border-color: #17a2b8;
    border-width: 2px;
}

.geo-map-field.state-complete .geo-map-container {
    border-color: #28a745;
}

/* Curseur en mode édition */
.geo-map-field.state-editing-marker .geo-map-container,
.geo-map-field.state-editing-emprise .geo-map-container {
    cursor: crosshair;
}

.geo-map-field.state-editing-marker .leaflet-container,
.geo-map-field.state-editing-emprise .leaflet-container {
    cursor: crosshair !important;
}

/* ============================================
   BOUTONS ÉTAT ACTIF
   ============================================ */

.geo-map-field.state-editing-marker .btn-edit-marker {
    background-color: #17a2b8;
    border-color: #17a2b8;
    color: #fff;
}

.geo-map-field.state-editing-emprise .btn-edit-emprise {
    background-color: #17a2b8;
    border-color: #17a2b8;
    color: #fff;
}

/* Afficher les boutons de dessin uniquement en mode dessin emprise */
.geo-map-field:not(.state-editing-emprise) .toolbar-draw-actions,
.geo-map-field:not(.state-editing-emprise) .toolbar-confirm {
    display: none !important;
}

.geo-map-field.state-editing-emprise .toolbar-draw-actions,
.geo-map-field.state-editing-emprise .toolbar-confirm {
    display: flex !important;
}

/* Désactiver emprise si pas de coordonnées */
.geo-map-field.state-initial .btn-edit-emprise {
    opacity: 0.5;
    pointer-events: none;
}

/* ============================================
   INFO ROW (mode detail)
   ============================================ */

.geo-map-info .info-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.geo-map-info .info-row + .info-row {
    margin-top: 4px;
}

.geo-map-info .color-swatch {
    flex-shrink: 0;
}

/* ============================================
   ANIMATIONS
   ============================================ */

.emprise-toolbar .btn {
    transition: all 0.2s ease;
}

.geo-map-field .geo-map-container {
    transition: border-color 0.3s ease;
}

/* Pulse pour l'état édition */
.geo-map-field.state-editing-marker .btn-edit-marker,
.geo-map-field.state-editing-emprise .btn-edit-emprise {
    animation: emprise-pulse 2s infinite;
}

@keyframes emprise-pulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(23, 162, 184, 0.25);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(23, 162, 184, 0.15);
    }
}

/* ============================================
   OVERLAY EMPRISE (pendant dessin)
   ============================================ */

.emprise-draw-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    padding: 10px 14px;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    max-width: 260px;
    border-left: 4px solid #17a2b8;
}

.emprise-draw-overlay .overlay-title {
    font-weight: 600;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #333;
}

.emprise-draw-overlay .overlay-title .fas {
    color: #17a2b8;
}

.emprise-draw-overlay .overlay-instructions {
    font-size: 0.85em;
    color: #666;
    line-height: 1.4;
}

.emprise-draw-overlay .overlay-progress {
    margin-top: 6px;
    font-size: 0.8em;
    font-weight: 500;
    color: #17a2b8;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .emprise-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .toolbar-section {
        justify-content: space-between;
        width: 100%;
    }
    
    .toolbar-separator {
        display: none;
    }
    
    .toolbar-draw-actions,
    .toolbar-confirm,
    .toolbar-color {
        margin-left: 0;
        border-left: none;
        padding-left: 0;
        padding-top: 8px;
        border-top: 1px solid #ddd;
    }
    
    .toolbar-item {
        min-width: auto;
    }
    
    .emprise-draw-overlay {
        left: 10px;
        right: 10px;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .emprise-toolbar {
        padding: 8px;
    }
    
    .emprise-toolbar .btn {
        padding: 5px 8px;
        font-size: 0.8em;
    }
    
    .item-label {
        font-size: 0.8em;
    }
    
    .coordinates-display,
    .emprise-info {
        display: none;
    }
}