/* ────────────────────────────── RESET & GLOBAL ────────────────────────────── */
html, body, #map {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

body {
  margin: 0;
  display: block;
  height: 100vh;
  overflow: hidden;
  background: #1e2a38;
  color: #f0f4f8;
}

/* ────────────────────────────── SIDEBAR ────────────────────────────── */
#sidebar {
  position: fixed;
  top: 0;
  left: 80px;
  height: 100vh;
  width: 320px;
  background-color: #1e2a38;
  color: #f0f4f8;
  padding: 20px 15px;
  box-sizing: border-box;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  user-select: none;
  transition: transform 0.3s ease;
  z-index: 1100;
}

#sidebar.hidden {
  transform: translateX(-100%);
}

#sidebar h1 {
  margin-bottom: 20px;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
}

/* ────────────────────────────── SECTIONS DANS SIDEBAR ────────────────────────────── */
.panel-section {
  background-color: #2a3b4f;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.panel-section h2 {
  font-size: 1.1rem;
  margin: 0 0 10px 0;
  color: #a3d5ff;
  border-bottom: 1px solid #3f5773;
  padding-bottom: 8px;
}

.panel-section label,
.panel-section summary {
  font-size: 0.95rem;
  color: #e0eaf5;
}

.panel-section input {
  width: 100%;
  padding: 6px;
  background-color: #384a60;
  color: white;
  border-radius: 5px;
}

.panel-section details {
  margin-top: 10px;
}

.panel-section button {
  width: 100%;
  background-color: #0d72b9;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  margin-top: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.panel-section button:hover {
  background-color: #0a5c92;
}

/* ────────────────────────────── FORMULAIRES BASE & OVERLAY LAYERS ────────────────────────────── */
#baselayers-form label.base-layer-label,
.overlay-layer-label {
  display: flex;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
  color: #e0eaf5;
  margin-bottom: 8px;
  align-items: center;
  user-select: none;
}

#baselayers-form label:hover,
.overlay-layer-label:hover {
  color: #66baff;
}

.overlay-layer-label input[type="checkbox"],
#baselayers-form input[type="radio"] {
  cursor: pointer;
  accent-color: #276AAB;
  width: 18px;
  height: 18px;
}


/* ────────────────────────────── ICONES DES CALQUES ────────────────────────────── */
.layer-icon {
  text-align: center;
  font-size: 1.3rem;
  margin-right: 8px;
  user-select: none;
}

/* ────────────────────────────── CONTENEUR DE LA CARTE ────────────────────────────── */
#map {
  flex-grow: 1;
  height: 100vh;
  width: 100vw;
  margin: 0;
  transition: none;
  position: relative;
  z-index: 1;
}

/* Curseur en croix lors de la sélection zoom région */
#map.map-cropping-active {
  cursor: crosshair !important;
}

/* ────────────────────────────── SPINNER DE CHARGEMENT ────────────────────────────── */
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid black;
  border-top: 4px solid grey;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ────────────────────────────── DETAILS & TOGGLES ────────────────────────────── */
details summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 5px 0;
  user-select: none;
  color: #e0eaf5;
}

details[open] summary {
  color: #66baff;
}

/* ────────────────────────────── BOUTONS FLOTTANTS SUR LA CARTE (MAP TOOLS) ────────────────────────────── */
#map-tools {
  position: absolute;
  right: 20px;
  top: 40%;
  background-color: #074A8B;
  transform: translateY(-50%);
  padding: 10px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

#map-tools button {
  background: none;
  border: none;
  width: 36px;
  height: 36px;
  padding: 0;
  cursor: pointer;
}

#map-tools button img {
  width: 24px;
  height: 24px;
  filter: invert(100%) brightness(200%);
  transition: transform 0.2s;
}

#map-tools button:hover img {
  transform: scale(1.2);
}

/* ────────────────────────────── BOUTON DE CHANGEMENT DE THEME ────────────────────────────── */
.theme-toggle-btn {
  margin-bottom: 20px;
  padding: 10px;
  font-size: 0.95rem;
  font-weight: bold;
  background-color: #0d72b9;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.theme-toggle-btn:hover {
  background-color: #0a5c92;
}

/* ────────────────────────────── MODE CLAIR (LIGHT MODE) ────────────────────────────── */
body.light-mode {
  background: #f0f2f5;
  color: #222;
}

body.light-mode #sidebar {
  background-color: #fff;
  color: #222;
  box-shadow: 3px 0 10px rgba(0,0,0,0.1);
}

body.light-mode .panel-section {
  background-color: #f5f7fa;
  color: #222;
}

body.light-mode .panel-section h2 {
  color: #004a87;
  border-bottom: 1px solid #ccc;
}

body.light-mode .panel-section label,
body.light-mode .panel-section summary {
  color: #333;
}

body.light-mode .panel-section input {
  background-color: #e6e9ef;
  color: #000;
}

body.light-mode .panel-section button,
body.light-mode .theme-toggle-btn {
  background-color: #0078d4;
}

body.light-mode .panel-section button:hover,
body.light-mode .theme-toggle-btn:hover {
  background-color: #005a9e;
}

body.light-mode #map-tools {
  background-color: #fff;
}

body.light-mode #map-tools button img {
  filter: invert(0%) brightness(0%);
}

body.light-mode #sidebar h1,
body.light-mode #baselayers-form label.base-layer-label,
body.light-mode .overlay-layer-label,
body.light-mode details summary {
  color: #222;
}

body.light-mode details[open] summary {
  color: #0078d4;
}

/* ────────────────────────────── BOUTONS DE PLAGE TEMPORALE ────────────────────────────── */
.time-range-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 8px;
  row-gap: 0;
  margin: 10px 0;
}

.time-btn {
  padding: 6px 10px;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.2s;
  user-select: none;
}

.time-btn.active {
  background-color: #007BFF;
  color: white;
}

/* ────────────────────────────── BOUTON CALENDRIER ────────────────────────────── */
#calendar-button {
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#calendar-button.active {
  background-color: #007BFF;
}

.calendar-icon {
  width: 30px;
  height: 30px;
  filter: brightness(0) invert(1);
}

/* ────────────────────────────── BOUTONS ACTIFS MODE CLAIR (plus sombre) ────────────────────────────── */
body.light-mode .time-btn.active,
body.light-mode #calendar-button.active {
  background-color: #004f87;
  color: white;
}

/* ────────────────────────────── TEXTE DES DATES SÉLECTIONNÉES ────────────────────────────── */
#selected-dates {
  text-align: center;
  font-style: italic;
}

/* ────────────────────────────── CALENDRIER FLATPICKR ────────────────────────────── */
.flatpickr-calendar {
  position: fixed !important;
  bottom: 20px !important;
  left: 82px !important;
  top: auto !important;
  right: auto !important;
  z-index: 9999 !important;
}

/* ────────────────────────────── LABELS DES CALQUES (checkbox + icône + texte) ───────────── */
.overlay-layer-label {
  padding-left: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  font-size: 14px;
  color: #f0f4f8;
  cursor: pointer;
  font-weight: 600;
  user-select: none;
}





/* Bouton show alert dans time range alert */
.alert-time-range-btn {
  cursor: pointer;
  transition: background-color 0.2s;
  user-select: none;
  color: #e0eaf5;
  font-weight: 600;
}

.alert-time-range-btn:hover {
  background-color: #276AAB;
  color: white;
}

body.light-mode .custom-divider {
  border-top: 1px solid #ccc;
}

body.light-mode .custom-section-title {
  color: #004a87;
}

body.light-mode .alert-time-range-btn {
  border-color: #0078d4;
  color: #222;
}

body.light-mode .alert-time-range-btn:hover {
  background-color: #0078d4;
  color: white;
}


/* ────────────────────────────── Legend ──────────────────────────── */

#map {
  position: relative;
}


/* Légende globale */
#map-legend {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 1000;
  padding: 12px;                 /* marge intérieure autour du texte et icônes */
  border-radius: 12px;            /* coins arrondis */
  background: rgba(07,74,149,0.6);  /* fond par défaut (jour/nuit sera géré par body class) */
}

/* Titre de la légende */
#map-legend h4 {
  margin: 0 0 15px 0;   /* espace sous le titre */
  font-weight: bold;    /* texte en gras */
  text-align: center;   /* centré */
}

/* Items de la légende */
#map-legend .legend-item {
  display: flex;         /* icône + texte sur la même ligne */
  align-items: center;   /* centre verticalement icône et texte */
  gap: 8px;              /* espace entre icône et texte */
  margin: 0 0 6px 0;     /* espace entre chaque ligne */
  padding: 0;
}

/* Icônes dans les items */
#map-legend .legend-item img {
  height: 30px;
  width: auto;          /* conserve les proportions */
  object-fit: contain;  /* évite l’étirement */
}

/* Barre de séparation */
#map-legend .legend-separator {
  height: 1px;
  background-color: rgba(255,255,255); /* même couleur que le texte */
  margin: 6px 0;          /* espace au-dessus et en dessous */
}

/* Couleurs selon mode jour/nuit */
body.light-mode #map-legend {
  background: rgba(255,255,255,0.6);
}
body.dark-mode #map-legend {
  background: rgba(07,74,149,0.6);
}

body.light-mode #map-legend .legend-separator {
  background: rgba(0,0,64);
}
body.dark-mode #map-legend .legend-separator {
  background: rgba(255,255,255);
}

#map-legend.hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none; /* pour éviter de cliquer dessus */
  transition: opacity 0.3s ease; /* petit effet smooth optionnel */
}



/* ────────────────────────────── General info display ──────────────────────────── */

#map-header {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  padding: 10px 14px;
  border-radius: 6px;
  z-index: 1000;
  text-align: center;        /* centre le texte dans la boîte */
  pointer-events: none;
  line-height: 1.2em;
  min-width: 220px;          /* optionnel : largeur minimale */
}

#map-header .header-line1 {
  font-weight: bold;
  font-size: 1.1em;          /* plus grande */
  margin-bottom: 6px;
}

#map-header .header-line2 {
  font-weight: normal;
  font-size: 1 em;         /* plus petite */
}

#map-header .header-line3 {
  margin-top: 5px;
  font-weight: normal;
  font-size: 1 em;         /* plus petite */
}
/* Mode par défaut = dark */
body.dark-mode #map-header {
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
}

/* Mode clair */
body.light-mode #map-header {
  background-color: rgba(255, 255, 255, 0.6);
  color: black;
}

#map-header.hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Barre flottante de logos à gauche */
#logo-sidebar {
    position: fixed;       /* reste à gauche même en scroll */
    top: 0;
    left: 0;
    height: 100%;          /* prend toute la hauteur */
    width: 80px;           /* largeur de la barre */
    background-color: rgba(240, 240, 240); /* blanc semi-transparent */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
    box-shadow: 2px 0 5px rgba(0,0,0,0.2); /* léger ombrage */
    z-index: 2000;         /* au-dessus du reste */
    overflow-y: auto;      /* scroll si trop de logos */
}

/* Logos à l'intérieur de la barre */
#logo-sidebar .logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#logo-sidebar .logo-container img {
    width: 50px;           /* taille uniforme des logos */
    height: auto;
    margin: 5px 0;
}

/* ────────────────────────────── Popups Alert MapLibre ────────────────────────────── */

/* Mode par défaut = dark */
.alert-popup {
    font-family: Arial, sans-serif;
    color: #eee;
    padding: 16px 22px 14px 14px; /* padding intérieur */
    width: auto px;
    height: 250px;
    overflow-y: auto;
    line-height: 1.4;
    border-radius: 12px;
    background-color: #1e2a38;
    box-shadow: 0 2px 6px rgba(255,255,255,0.2);
}

/* Supprime style par défaut MapLibre */
.maplibregl-popup-content {
    position: relative !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 12px !important;
    overflow: hidden;
}

.maplibregl-popup {
    border-radius: 12px !important;
}

/* Titre */
.alert-popup h3 {
    color: #ff6b6b;
    margin: 0 0 8px 0;
    padding-bottom: 6px;
    border-bottom: 2px solid #ff6b6b;
    font-size: 16px;
    text-align: center;
}

/* Texte générique */
.alert-popup p {
    margin: 5px 0;
    font-size: 14px;
    font-weight: bold;
    color: #ccc;
}

/* Couleurs spécifiques */
.alert-popup .district { color: #3498db; }
.alert-popup .subdistrict { color: #9b59b6; }
.alert-popup .province { color: #2980b9; }
.alert-popup .reserved { color: #ff4d4d; }
.alert-popup .protected { color: #ff4d4d; }
.alert-popup .position { color: #2ecc71; }
.alert-popup .confidence { color: #f39c12; }

/* Barre de séparation */
.alert-popup .separator {
    border-top: 2px solid #ff6b6b;
    margin: 10px 0;
}

/* Span neutre (valeurs) */
.alert-popup span {
    font-weight: normal;
    color: #ccc;
}

.alert-popup a {
    color: #3498db;
    text-decoration: underline;
}

/* Bouton de fermeture */
.maplibregl-popup-close-button {
    position: absolute !important;
    top: 6px;
    right: 15px;
    z-index: 10;
    background: transparent;
    border: none;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    color: #ccc;
}

.maplibregl-popup-close-button:hover {
    color: #ff4d4d;
}

/* ────────────────────────────── Light Mode ────────────────────────────── */
body.light-mode .alert-popup {
    background-color: #fff;
    color: #333;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

body.light-mode .alert-popup h3 {
    color: #e74c3c;
    border-bottom: 2px solid #e74c3c;
}

body.light-mode .alert-popup p,
body.light-mode .alert-popup span {
    color: #555;
}

/* Couleurs spécifiques */
body.light-mode .alert-popup .district { color: #2980b9; }
body.light-mode .alert-popup .subdistrict { color: #6A00FF; }
body.light-mode .alert-popup .province { color: #000CFF; }
body.light-mode .alert-popup .reserved { color: #FF0010; }
body.light-mode .alert-popup .protected { color: #FF0010; }
body.light-mode .alert-popup .position { color: #27ae60; }
body.light-mode .alert-popup .confidence { color: #e67e22; }

/* Barre de séparation */
body.light-mode .alert-popup .separator {
    border-top: 2px solid #e74c3c;
}

/* Bouton de fermeture */
body.light-mode .maplibregl-popup-close-button {
    color: #444;
}

body.light-mode .maplibregl-popup-close-button:hover {
    color: #e74c3c;
}

/* Scrollbar fine Dark Mode */
/* Scrollbar universelle pour les popups (dark par défaut) */
.alert-popup {
    overflow-y: auto;
    scrollbar-color: #555 #1e2a38;  /* curseur / track */
}

/* Scrollbar Webkit (Chrome, Edge, Safari) */
.alert-popup::-webkit-scrollbar {
    width: 14px;
}

.alert-popup::-webkit-scrollbar-track {
    background: #1e1e1e;
    border-radius: 7px;
}

.alert-popup::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 7px;
}

.alert-popup::-webkit-scrollbar-thumb:hover {
    background-color: #888;
}

/* Scrollbar Light Mode */
body.light-mode .alert-popup {
    scrollbar-color: #555 #fff; /* thumb / track */
}

body.light-mode .alert-popup::-webkit-scrollbar-track {
    background: #fff;          /* fond blanc */
    border-radius: 7px;
}

body.light-mode .alert-popup::-webkit-scrollbar-thumb {
    background-color: #555;    /* même couleur que dark mode */
    border-radius: 7px;
}

body.light-mode .alert-popup::-webkit-scrollbar-thumb:hover {
    background-color: #888;
}

/* style par défaut déjà existant pour overlay-layer-label */

.overlay-sub {
  font-size: 0.9em;   /* texte un peu plus petit */
  margin-left: 24px;  /* décalage vers la droite */
}

.overlay-sub input[type="checkbox"] {
  transform: scale(0.85); /* case à cocher plus petite */
  margin-right: 4px;
}