/* ===== UX-MAP (final, corrigé++ ) ===== */

/* ---------- Layout par défaut (hors modale) : côte à côte en flex ---------- */
.ux-map-row {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
    gap: 12px !important;
    align-items: stretch !important;
    align-content: start !important;
    min-height: 260px !important;
}
.ux-map {
    width: 100% !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Canvas carte */
.ux-map-canvas {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 160px !important;
    height: 100% !important;
    min-height: 260px !important;
    overflow: hidden !important;
    background: #f6f6f6 !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* Leaflet occupe 100% du canvas */
.ux-map-canvas .leaflet-container,
.ux-map-row .leaflet-container,
.ux-map .leaflet-container,
.leaflet-container {
    width: 100% !important;
    height: 100% !important;
    min-height: 160px !important;
    display: block !important;
    box-sizing: border-box !important;
}
.leaflet-tile {
    image-rendering: auto;
    display: block;
    will-change: transform;
}
.leaflet-pane,
.leaflet-layer {
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.leaflet-container {
    background: #f6f6f6 !important;
}

/* Colonne des champs (hors modale) */
.ux-map-fields {
    flex: 0 0 360px !important;
    min-width: 260px !important;
    background: #fff !important;
    padding: 0.6rem !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    align-self: stretch !important;
    position: relative !important;
    z-index: 2 !important;
}
.ux-map-fields > * {
    margin-top: 0 !important;
}

/* Action sous le bloc (toujours sous la map + champs) */
.item-actions {
    margin-top: 0.5rem !important;
    text-align: right !important;
}

/* ================= MODALE : 2 colonnes stables (carte | champs) ================= */
.modal .modal-dialog.modal-lg {
    max-width: 1200px;
}

@media (min-width: 720px) {
    .modal .ux-map-row,
    .modal .marker-item {
        display: grid !important;
        grid-template-columns: minmax(520px, 1fr) 360px !important; /* carte min 520 | champs 360 */
        grid-template-areas:
            "map fields"
            "actions actions" !important; /* bouton sous les 2 colonnes */
        gap: 12px !important;
        align-items: stretch !important;
        min-height: 360px !important;
    }

    .modal .ux-map {
        grid-area: map !important;
    }
    .modal .ux-map,
    .modal .ux-map-canvas {
        min-width: 520px !important;
        height: 100% !important;
        min-height: 360px !important;
        max-height: calc(100vh - 220px) !important;
    }

    .modal .ux-map-canvas .leaflet-container {
        width: 100% !important;
        height: 100% !important;
    }

    .modal .ux-map-fields {
        grid-area: fields !important;
        width: 360px !important;
        min-width: 360px !important;
        max-width: 360px !important;
        height: 100% !important;
        align-self: stretch !important;
        overflow: auto !important;
        background: #fff !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 3 !important;
    }

    .modal .item-actions {
        grid-area: actions !important;
        margin-top: 0.25rem !important;
        text-align: right !important;
    }
}

/* < 720px : on empile (carte puis champs) proprement, actions dessous */
@media (max-width: 719px) {
    .modal .ux-map-row,
    .modal .marker-item {
        display: block !important;
    }
    .modal .ux-map-canvas {
        min-height: 240px !important;
    }
    .modal .ux-map-fields {
        width: 100% !important;
        height: auto !important;
    }
    .modal .item-actions {
        text-align: right !important;
    }
}

/* ================= Lignes ajoutées (collection) – mêmes règles hors modale ================= */
.marker-item {
    display: flex !important;
    gap: 12px !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0.5rem 0 !important;
    min-height: 260px !important;
}
.marker-item .ux-map-canvas {
    flex: 1 1 auto !important;
    width: auto !important;
    height: 100% !important;
    min-width: 420px !important;
    min-height: 260px !important;
    max-width: none !important;
    overflow: hidden !important;
    background: #f6f6f6 !important;
    border-radius: 6px !important;
}
.marker-item .ux-map-canvas .leaflet-container {
    width: 100% !important;
    height: 100% !important;
}
.marker-item .ux-map-fields {
    flex: 0 0 360px !important;
    min-width: 260px !important;
    margin: 0 !important;
    padding: 0.6rem !important;
    border-radius: 6px !important;
    background: #fff !important;
    align-self: stretch !important;
    z-index: 2 !important;
}

/* ================= Sûreté ================= */
.ux-map-row > * {
    box-sizing: border-box !important;
}