/* ===================================================================== */
/* VARIABLES CSS - CENTRALISATION DES VALEURS */
/* ===================================================================== */
:root {
  /* Largeurs standardisées */
  --legend-width: 123px;
  --filter-width: 110px;
  --species-width: 200px;
  --container-min: 120px;
  --container-max: 220px;
  --results-min: 300px;
  --results-max: 400px;
  --results-content-max: 350px;
  --mobile-max: 280px;
  --mobile-filter-max: 250px;
  
  /* Couleurs */
  --border-color: #ccc;
  --focus-color: #7ae95c;
  --bg-semi: rgba(255, 255, 255, 0.5); /* opacité bordure des DIV */
  --text-color: #000;
  --bg-white: #fff;
  --logo-bg: #D4D4D4;
  --select-bg: rgba(255, 255, 255, 0.5); /* opacité select des DIV */
  
  /* Espacements */
  --gap-small: 3px;
  --gap-medium: 5px;
  --gap-large: 10px;
  --padding-small: 3px;
  --padding-medium: 5px;
  
  /* Typographie */
  --font-family: Arial, sans-serif;
  --font-size-small: 10px;
  --font-size-normal: 11px;
}

/* ===================================================================== */
/* CLASSES UTILITAIRES */
/* ===================================================================== */
.box-border { box-sizing: border-box; }
.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.no-drag {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

/* ===================================================================== */
/* CONTENEURS PRINCIPAUX */
/* ===================================================================== */

/* Style pour le conteneur leaflet-control-group */
.leaflet-control-group {
  position: absolute;
  top: 5px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-medium);
}

/* Style pour le conteneur global des icones */
.icon-container {
  position: absolute;
  top: 80px;
  left: 10px;
  width: 32px;
  height: 280px;
  z-index: 1000;
}

/* Conteneur global pour les logos */
#global-logo-container {
  position: absolute;
  bottom: 75px;
  left: 5px;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.logo {
  background-color: var(--logo-bg);
  border: 1px solid black;
  width: 40px;
  height: 40px;
  object-fit: contain;
  padding: var(--padding-small);
}

/* Conteneur global pour les sélecteurs */
#global-selector-container {
  position: absolute;
  top: 13px;
  left: 50px;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 0px;
  pointer-events: auto;
  width: auto;
  min-width: var(--container-min);
  max-width: var(--container-max);
}

/* Styles communs à l'ensemble des panels */
#global-selector-container > div {
  background-color: var(--bg-semi);
  padding: var(--gap-medium);
  border-radius: var(--gap-medium);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  font-family: var(--font-family);
  font-size: var(--font-size-normal);
  color: var(--text-color);
  margin-bottom: var(--gap-small);
  display: none;
  width: auto;
  min-width: var(--container-min);
  max-width: var(--container-max);
}

/* ===================================================================== */
/* LÉGENDE - LARGEUR FIXE ET NON-SÉLECTIONNABLE */
/* ===================================================================== */

/* Toutes les règles de légende regroupées */
#selector-legend,
.legend-protected,
.with-results #selector-legend,
#global-selector-container:has(#selector-table-results[style*="block"]) #selector-legend {
  width: var(--legend-width) !important;
  min-width: var(--legend-width) !important;
  max-width: var(--legend-width) !important;
}

/* Propriétés spécifiques de la légende */
#selector-legend,
.legend-protected {
  box-sizing: border-box !important;
}

/* Non-sélection pour la légende */
#selector-legend,
.legend-protected {
  @extend .no-select;
  @extend .no-drag;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  -khtml-user-drag: none !important;
  -moz-user-drag: none !important;
  -o-user-drag: none !important;
  user-drag: none !important;
}

/* Éléments enfants de la légende */
#selector-legend *,
.legend-protected * {
  max-width: 100%;
  box-sizing: border-box;
  -webkit-user-select: inherit;
  -moz-user-select: inherit;
  -ms-user-select: inherit;
  user-select: inherit;
  -webkit-user-drag: inherit;
  -khtml-user-drag: inherit;
  -moz-user-drag: inherit;
  -o-user-drag: inherit;
  user-drag: inherit;
  outline: none;
}

/* Sélection transparente pour la légende */
#selector-legend::selection,
#selector-legend *::selection,
#selector-legend::-moz-selection,
#selector-legend *::-moz-selection {
  background: transparent;
}

/* ===================================================================== */
/* ÉLÉMENTS DE FORMULAIRE */
/* ===================================================================== */

/* Labels */
#global-selector-container label {
  margin-right: var(--gap-medium);
  font-weight: bold;
}

/* Listes déroulantes - style de base */
#global-selector-container select {
  padding: var(--gap-medium);
  font-size: var(--font-size-small);
  color: var(--text-color);
  background-color: var(--select-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--gap-small);
  outline: none;
  width: var(--filter-width);
}

/* Liste déroulante spécifique pour les espèces */
#selector-container4 select {
  width: var(--species-width);
}

/* ===================================================================== */
/* BOUTONS D'IMPRESSION */
/* ===================================================================== */

.container-buttons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--gap-medium);
}

.container-buttons button {
  font-family: var(--font-family);
  font-size: var(--font-size-normal);
  text-align: center;
  background-color: var(--bg-semi);
  color: var(--text-color);
  padding: var(--padding-small);
  border: 1px solid var(--border-color);
  border-radius: var(--gap-medium);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.container-buttons button:hover {
  background-color: var(--focus-color);
}

/* ===================================================================== */
/* FILTRES - STYLES COMMUNS */
/* ===================================================================== */

/* Conteneurs de filtres - styles partagés */
.arbotag-filter-container,
.espece-filter-container {
  margin-bottom: var(--gap-medium);
  box-sizing: border-box;
}

.arbotag-filter-container {
  width: var(--filter-width);
}

.espece-filter-container {
  width: 100%;
}

/* Inputs de filtres - styles partagés */
.arbotag-filter-input,
.espece-filter-input {
  width: 100%;
  padding: 2px var(--gap-medium);
  font-size: var(--font-size-small);
  border: 1px solid var(--border-color);
  border-radius: var(--gap-small);
  box-sizing: border-box;
  margin: 0;
  outline: none;
  background-color: var(--bg-white);
  color: var(--text-color);
}

.arbotag-filter-input:focus,
.espece-filter-input:focus {
  border-color: var(--focus-color);
  background-color: #f9f9f9;
}

/* ===================================================================== */
/* ADAPTATIONS AVEC RÉSULTATS */
/* ===================================================================== */

/* Conteneur avec résultats */
#global-selector-container.with-results {
  width: auto !important;
  min-width: var(--results-min) !important;
  max-width: var(--results-max) !important;
}

/* Selects avec résultats (sauf légende) */
#global-selector-container.with-results select:not(#selector-legend select) {
  width: 100% !important;
  max-width: var(--results-content-max) !important;
  min-width: var(--filter-width) !important;
  box-sizing: border-box;
}

/* Espèces avec résultats */
#global-selector-container.with-results #selector-container4 select {
  min-width: var(--species-width) !important;
}

/* Filtres avec résultats */
#global-selector-container.with-results .arbotag-filter-container {
  width: 100% !important;
  max-width: var(--results-content-max) !important;
  min-width: var(--filter-width) !important;
}

#global-selector-container.with-results .espece-filter-container {
  width: 100% !important;
  max-width: var(--results-content-max) !important;
  min-width: var(--species-width) !important;
}

#global-selector-container.with-results .arbotag-filter-input,
#global-selector-container.with-results .espece-filter-input {
  width: 100% !important;
  box-sizing: border-box;
}

/* Panneaux avec résultats (sauf légende) */
#global-selector-container.with-results > div:not(#selector-legend) {
  width: 100% !important;
  min-width: var(--mobile-max) !important;
  max-width: var(--results-content-max) !important;
  box-sizing: border-box;
}

/* Panneau de résultats spécifique */
#global-selector-container.with-results #selector-table-results {
  width: 100%;
  min-width: var(--results-min);
  max-width: var(--results-content-max);
}

/* ===================================================================== */
/* SUPPORT NAVIGATEURS MODERNES */
/* ===================================================================== */

@supports selector(:has(*)) {
  #global-selector-container:has(#selector-table-results[style*="block"]) {
    min-width: var(--results-min);
    max-width: var(--results-max);
  }
  
  #global-selector-container:has(#selector-table-results[style*="block"]) select:not(#selector-legend select) {
    width: 100% !important;
    max-width: var(--results-content-max) !important;
    min-width: var(--filter-width) !important;
    box-sizing: border-box;
  }
  
  #global-selector-container:has(#selector-table-results[style*="block"]) #selector-container4 select {
    min-width: var(--species-width) !important;
  }
  
  #global-selector-container:has(#selector-table-results[style*="block"]) .arbotag-filter-container,
  #global-selector-container:has(#selector-table-results[style*="block"]) .espece-filter-container {
    width: 100% !important;
    max-width: var(--results-content-max) !important;
  }
  
  #global-selector-container:has(#selector-table-results[style*="block"]) .arbotag-filter-input,
  #global-selector-container:has(#selector-table-results[style*="block"]) .espece-filter-input {
    width: 100% !important;
    box-sizing: border-box;
  }
}

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

@media (max-width: 768px) {
  #global-selector-container.with-results {
    max-width: var(--mobile-max);
  }
  
  /* La légende garde sa largeur sur mobile */
  #selector-legend {
    width: var(--legend-width) !important;
    min-width: var(--legend-width) !important;
    max-width: var(--legend-width) !important;
  }
  
  #global-selector-container.with-results select:not(#selector-legend select),
  #global-selector-container.with-results .arbotag-filter-container,
  #global-selector-container.with-results .espece-filter-container {
    max-width: var(--mobile-filter-max);
  }
}

/* ===================================================================== */
/* RÈGLES D'IMPRESSION */
/* ===================================================================== */

@media print {
  .icon-container,
  #global-logo-container,
  #global-selector-container {
    display: none !important;
  }
}