/*
  Feuille de styles pour l’application « Carte des commerciaux ».

  Les choix de couleurs privilégient un contraste élevé pour garantir
  l’accessibilité : vert pour les départements sans commerciaux, rouge pour
  ceux où au moins un commercial est affecté. Les boutons et entrées
  présentent un style simple et cohérent. Le panneau latéral se superpose
  sur la carte et peut être fermé.
*/

body {
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.4;
  color: #222;
  background-color: #f8f8f8;
}

#header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: #ffffff;
  border-bottom: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Logo de la marque placé dans le header */
#brandLogo {
  height: 34px;
  width: auto;
  margin-right: 0.5rem;
}

#header button,
#header input[type="text"] {
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  border: 1px solid #888;
  border-radius: 4px;
  background-color: #f5f5f5;
}

/* Conteneur des options (import/export) */
.options-container {
  position: relative;
  display: inline-block;
}

/* Menu déroulant sous le bouton Options */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.2rem);
  left: 0;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: none;
  flex-direction: column;
  min-width: 160px;
  z-index: 1000;
}

/* Affiche le menu lorsque la classe .show est présente */
.dropdown-menu.show {
  display: flex;
}

.dropdown-menu button {
  background-color: #ffffff;
  border: none;
  padding: 0.4rem 0.8rem;
  text-align: left;
  width: 100%;
  font-size: 0.9rem;
}

.dropdown-menu button:hover,
.dropdown-menu button:focus {
  background-color: #f5f5f5;
  cursor: pointer;
}

/* Contenu de la modale de personnalisation */
.custom-content {
  max-width: 400px;
}

.custom-group {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0.5rem 0;
  font-size: 0.9rem;
}

/* Styles pour le commutateur (mode nuit) */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #1976d2;
}

input:checked + .slider:before {
  transform: translateX(20px);
}

#header button:hover,
#header button:focus {
  background-color: #e0e0e0;
  cursor: pointer;
}

#header input[type="text"] {
  flex: 1 1 200px;
  min-width: 200px;
}

#mapContainer {
  position: relative;
  height: calc(100vh - 56px);
  /* le header mesure environ 56px (padding + police) */
}

#map {
  height: 100%;
  width: 100%;
  z-index: 0;
  /* Sans fond de carte OSM, appliquons une teinte légère pour
     différencier la zone de travail. */
  background-color: #f2f5f9;
}

/* Panneau latéral */
#sidebar {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 280px;
  max-width: 80%;
  background-color: #ffffff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
  padding: 1rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 100;
}

#sidebar.active {
  transform: translateX(0);
}

#closeSidebarBtn {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
  /* Positionner la croix de fermeture en haut à droite du panneau pour
     qu’elle reste cliquable même lorsque le contenu se déplace. */
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1100;
}

#sidebar h2 {
  margin-top: 0;
}

#salesList {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1rem 0;
}

#salesList li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 0;
  border-bottom: 1px solid #eee;
}

#salesList button {
  margin-left: 0.5rem;
  padding: 0.2rem 0.4rem;
  font-size: 0.8rem;
  border: 1px solid #d9534f;
  background-color: #d9534f;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

#salesList button:hover {
  background-color: #c9302c;
}

#addForm {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

#addForm input {
  padding: 0.3rem;
  border: 1px solid #888;
  border-radius: 4px;
}

#addForm button[type="submit"] {
  align-self: flex-start;
  padding: 0.4rem 0.8rem;
  border: 1px solid #5cb85c;
  background-color: #5cb85c;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

#addForm button[type="submit"]:hover {
  background-color: #4cae4c;
}

/* Style pour le groupe recrutement dans le panneau latéral */
.recruitment-group {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

/* Légende de la carte */
.map-legend {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  gap: 0.8rem;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 0.4rem 0.6rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.8rem;
  z-index: 1000;
}
.map-legend span {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.legend-color {
  width: 14px;
  height: 14px;
  display: inline-block;
  border: 1px solid #666;
  border-radius: 2px;
}

/* Style pour les étiquettes de compteur sur la carte */
.leaflet-marker-icon.department-count-label {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #666;
  border-radius: 50%;
  color: #000;
  font-weight: bold;
  text-align: center;
  width: 24px;
  height: 24px;
  line-height: 24px;
  font-size: 0.8rem;
  pointer-events: none;
}

/* Style des infobulles affichant les noms des commerciaux au survol */
.name-tooltip {
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #666;
  color: #000;
  font-size: 0.8rem;
  border-radius: 4px;
  padding: 2px 4px;
}

/* Fenêtre modale pour l’ajout global */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 10000;
}

/* Supprimer l’outline bleu par défaut sur les éléments interactifs de Leaflet
   lorsqu’ils obtiennent le focus (évite un encadrement bleu visible au clic). */
.leaflet-interactive:focus {
  outline: none;
}

/* Infobulle affichant les noms des commerciaux au survol. Le HTML
   (avec <br>) est interprété pour permettre un nom par ligne. */
.name-tooltip {
  background-color: rgba(255, 255, 255, 0.95);
  color: #333;
  border: 1px solid #888;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: pre-line;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.modal.show {
  display: flex;
}
.modal-content {
  background-color: #ffffff;
  padding: 1rem;
  border-radius: 4px;
  min-width: 300px;
  max-width: 90%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.modal-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.modal-actions button {
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  border: 1px solid #888;
  cursor: pointer;
}
.modal-actions button[type="submit"] {
  border-color: #5cb85c;
  background-color: #5cb85c;
  color: #fff;
}
.modal-actions #closeModalBtn {
  border-color: #d9534f;
  background-color: #d9534f;
  color: #fff;
}

/* Style pour le bouton d’export dans la vue d’ensemble */
.modal-actions #exportOverviewBtn {
  border-color: #1976d2;
  background-color: #1976d2;
  color: #fff;
}

/* Mise en surbrillance lors de la recherche */
.highlight {
  stroke: #ffeb3b;
  stroke-width: 3;
}

/* Focus visible pour l’accessibilité */
button:focus,
input:focus {
  outline: 2px solid #1976d2;
  outline-offset: 2px;
}

/* Notification pour les messages temporaires */
.notification {
  position: fixed;
  top: 72px;
  right: 1rem;
  background-color: #4caf50;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2000;
}
.notification.show {
  opacity: 1;
}

/* Contrôles de la vue d’ensemble */
.overview-controls {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.overview-controls select {
  padding: 0.3rem;
  border: 1px solid #888;
  border-radius: 4px;
  font-size: 0.9rem;
}

/* Graphique de répartition dans la vue d’ensemble */
.overview-chart {
  display: flex;
  width: 100%;
  height: 24px;
  margin-bottom: 0.5rem;
  overflow: hidden;
}
.chart-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
}

/* Mode sombre */
body.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}
body.dark-mode #header {
  background-color: #1f1f1f;
  border-bottom: 1px solid #333;
}
body.dark-mode #sidebar {
  background-color: #1f1f1f;
  color: #e0e0e0;
}
body.dark-mode .modal-content {
  background-color: #1f1f1f;
  color: #e0e0e0;
}
body.dark-mode #header button,
body.dark-mode #header input[type="text"] {
  background-color: #2c2c2c;
  border-color: #555;
  color: #e0e0e0;
}
body.dark-mode .search-container button {
  background-color: #2c2c2c;
  border-color: #555;
  color: #e0e0e0;
}
body.dark-mode .search-container button:hover,
body.dark-mode .search-container button:focus {
  background-color: #3c3c3c;
}
body.dark-mode .suggestions-list {
  background-color: #2c2c2c;
  border-color: #555;
  color: #e0e0e0;
}
body.dark-mode .suggestions-list li:hover,
body.dark-mode .suggestions-list li:focus {
  background-color: #3c3c3c;
}
body.dark-mode #overviewTable th,
body.dark-mode #overviewTable td {
  border-color: #444;
}
body.dark-mode #overviewTable th {
  background-color: #2c2c2c;
}
body.dark-mode #overviewTable tr:nth-child(even) {
  background-color: #1f1f1f;
}
body.dark-mode .chart-bar {
  color: #fff;
}
body.dark-mode .notification {
  background-color: #388e3c;
}

/* Conteneur pour la recherche avec suggestions */
.search-container {
  display: flex;
  align-items: center;
  position: relative;
  flex: 1 1 280px;
  min-width: 260px;
}

.search-container input[type="text"] {
  flex: 1;
}

.search-container button {
  margin-left: 0.3rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid #888;
  background-color: #f5f5f5;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
}
.search-container button:hover,
.search-container button:focus {
  background-color: #e0e0e0;
}

/* Liste de suggestions pour la recherche */
.suggestions-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-top: none;
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
}
.suggestions-list li {
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}
.suggestions-list li:hover,
.suggestions-list li:focus {
  background-color: #f0f0f0;
}

/* Bouton de fermeture (croix) dans les modales */
.close-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: #666;
}
.close-btn:hover,
.close-btn:focus {
  color: #000;
}
body.dark-mode .close-btn {
  color: #aaa;
}

/* Contenu personnalisé pour la vue d’ensemble */
/* Contenu de la vue d’ensemble : largeur plus limitée et défilement */
.overview-content {
  max-width: 90%;
  width: 80%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

/* Contenu de la modale de statistiques : taille plus réduite */
.stats-content {
  max-width: 90%;
  width: 60%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}

.overview-summary {
  margin-bottom: 0.5rem;
  font-weight: bold;
}

#overviewTable {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.5rem;
}
#overviewTable th,
#overviewTable td {
  border: 1px solid #ddd;
  padding: 0.4rem 0.6rem;
  text-align: left;
}
#overviewTable th {
  background-color: #f7f7f7;
  cursor: pointer;
}
#overviewTable tr:nth-child(even) {
  background-color: #fafafa;
}