/* ===== 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,.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:.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:.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:.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:.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; }