/* ================================================================== */
/* SURCHARGE DU PLUGIN DE LÉGENDE (@watergis/maplibre-gl-legend)      */
/* ================================================================== */
 
/* Le plugin ajoute la case "Only rendered" en dur, sans option de config
   pour la désactiver (vérifié dans son code source dist/maplibre-gl-legend.es.js).
   On la masque donc ici. 
.maplibregl-legend-onlyRendered-checkbox,
.maplibregl-legend-onlyRendered-label {
    display: none !important;
}

/* Pour changer la couleur de la case cochée. 
   Support natif large (Chrome/Edge/Firefox modernes, Safari 15.4+). -- 
.legend-table-td input[type="checkbox"] {
    accent-color: #0d4c69; /* <- changez cette couleur */ /*
    width: 15px;
    height: 15px;
    cursor: pointer;
}
*/

/* ================================================================== */
/* FENÊTRE GÉNÉRALE                                                   */
/* ================================================================== */

/* Supprimer les marges par défaut du navigateur */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* EMPECHE LES BARRES DE DEFILEMENT GENERALES (Sur les bords de la carte) */
    overflow: hidden; 
}

/* La carte doit occuper tout l'écran */
#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

/* ================================================================== */
/* MENU DE SELECTION D'UN FOND DE CARTE (EN BAS à GAUCHE)             */
/* ================================================================== */

/* Style du menu de sélection */
.basemap-container {
    position: absolute;
    bottom: 30px;
    left: 10px;
    z-index: 10;
    background: white;
    padding: 12px;
    border-radius: 4px;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    font-family: sans-serif;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.basemap-container label {
    font-size: 12px;
    font-weight: bold;
    color: #666;
}

/* ================================================================== */
/* LÉGENDE                                                            */
/* ================================================================== */

/* 1. On s'assure que le conteneur du bouton est visible */
.mapboxgl-ctrl-legend-toggler {
    display: block !important;
    visibility: visible !important;
    width: 24px !important;
    height: 24px !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    position: absolute !important;
    right: 5px !important;
    top: 5px !important;
}

/* 2. On dessine l'icône de l'oeil en SVG directement en CSS */
.mapboxgl-ctrl-legend-toggler::before {
    content: '' !important;
    display: block;
    width: 20px;
    height: 20px;
    background-color: #666;
    /* Masque SVG pour l'icône de l'oeil */
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>') no-repeat center;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>') no-repeat center;
}

/* 3. Style quand la couche est masquée (oeil barré ou gris clair) */
.mapboxgl-ctrl-legend-toggler.hidden::before {
    background-color: #ccc;
}

/* 4. On s'assure que le titre de la couche laisse de la place à droite */
.mapboxgl-ctrl-legend-layer {
    position: relative;
    padding-right: 30px !important;
}

/* ================================================================== */
/* BARRE LATÉRALE AFFICHANT LES ATTRIBUTS                             */
/* ================================================================== */

.attributes-sidebar {
    position: absolute;
    top: 0;
    right: -400px; /* Caché par défaut à droite */
    width: 400px;
    height: 100%;
    background: white;
    z-index: 2000; /* Très haut pour être au-dessus des contrôles */
    box-shadow: -2px 0 15px rgba(0,0,0,0.2);
    transition: right 0.3s ease; /* Animation d'ouverture */
    padding: 25px;
    /* Pour gérer le défilement interne proprement */
    overflow-y: auto; /* Permet de défiler si beaucoup d'attributs */
    overflow-x: hidden; /* Empêche le défilement horizontal de la sidebar */
    box-sizing: border-box; /* Important pour que le padding n'ajoute pas de largeur */
}

.attributes-sidebar.open {
    right: 0; /* Affiche le panneau */
}

#close-attributes-sidebar {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
}

/* Titre principal de la couche (ex: Cadastre) */
.sidebar-layer-title {
    background: #2c3e50;
    color: white;
    padding: 10px;
    font-weight: bold;
    margin-top: 15px;
    border-radius: 4px 4px 0 0;
    font-size: 1.1em;
}

/* Titre des catégories (ex: Prix, Localisation) */
.sidebar-category-header {
    background: #ecf0f1;
    color: #2c3e50;
    padding: 5px 10px;
    font-size: 0.9em;
    font-weight: bold;
    border-left: 4px solid #3498db;
    margin-top: 0;
}

/* Tableaux de données */
#attributes-sidebar-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
    background: white;
}

#attributes-sidebar-content th {
    width: 40%;
    text-align: left;
    font-size: 0.85em;
    padding: 6px;
    color: #7f8c8d;
    border-bottom: 1px solid #eee;
}

#attributes-sidebar-content td {
    padding: 6px;
    font-size: 0.9em;
    border-bottom: 1px solid #eee;
}

.no-data {
    color: #bbb;
    font-style: italic;
}