/* =========================================================
   SURCHARGES CSS LIZMAP – Parc national de La Réunion
   Auteur : Myriam Moustaid
   Dernière mise à jour : 19/11/2025.
   Objectif : personnalisation ergonomique et graphique de l'interface Lizmap (stage 2025)
   ========================================================= */



/* Permet d'avoir du texte en blanc pour respecter le contraste avec le fond vert foncé. 
Pour un certain niveau de police, notamment le nom des outils sur le panneau de gauche. */
#dock-tabs > li > a, 
#right-dock-tabs > li > a, 
#bottom-dock-tabs > li > a {
  color: rgb(255, 255, 255);
}



/* Boutons de la barre de navigation Lizmap que l'on retrouve en haut à droite avec les zoom et autres outils. 
Les boutons sont par défaut bleues.
Ici, on les passe en vert foncé, et un vert un peu plus clair au survol (:hover signifie survol). */
#navbar .btn {
    background-color: #0e4c2d !important;   /* Vert foncé */
    border: 1px solid #0e4c2d !important;
    color: white !important;
}
#navbar .btn:hover {
    background-color: #146b3a !important;   /* Vert plus clair */
    border-color: #146b3a !important;
    color: #fff !important;
    opacity: 0.9;
}



/*Le premier bloc définit la couleur générale des boutons d'actions Lizmap (lancer / arrêter une action).
Le deuxième bloc affine le style lorsque l'utilisateur survole un bouton actif :
il supprime le dégradé et l’ombre du texte imposés par Bootstrap, et empêche le survol sur les boutons désactivés. */
.btn.action-run-button,
.btn.action-deactivate-button,
.div.action-buttons button:hover,
.btn.action-run-button:hover,
.btn.action-deactivate-button:hover {
    background-color: #4d7a4d;
    color: var(--color-contrasted-text) !important;
}
div.action-buttons button:hover:not([disabled]) {
    background-color: #4d7a4d;
    background-image: linear-gradient(to bottom, #4d7a4d, #4d7a4d);
    color: white;
    text-shadow: none;
}



/*Couleurs des boutons en vert (zoomer, exporter, réinitialiser du mode filtre, lancer le tutoriel au début ...)*/
.btn.btn-primary,
.modal-footer > button.btn.btn-default {
  background-color: #4d7a4d77 !important;
}

.btn.btn-primary:hover,
.modal-footer > button.btn.btn-default:hover  {
  background-color: rgb(48, 94, 65) !important;
}




/*Couleurs des boutons Formulaire et Editer la géométrie du mode édition.
hover et focus, même couleur au survol et si l'état est actif, c'est à dire qu'on est sur ce mode là 
sinon couleur plus claire pour le mode pas choisi et contraste avec le survol */
.edition-tabs .nav-pills > li.active > a,
.edition-tabs .nav-pills > .active > a,
.edition-tabs .nav-pills > li > a  {
    background-color: rgba(48, 94, 65, 0.56);
    color: var(--color-contrasted-text) !important;
}
.edition-tabs .nav-pills > li > a:hover,
.edition-tabs .nav-pills > .active > a:hover,
.edition-tabs .nav-pills > .active > a:focus {
    background-color: #0e4c2d;
    color: var(--color-contrasted-text) !important;
}


/* Couleurs des boutons à gauche de Filtrer, les fleches pour plier et déplier les couches */
#switcher-layers-actions button
{
  background-color: #ffffff !important;
}
#switcher-layers-actions button:hover
{
  border-color: #16441e;
  background-color: rgba(158, 187, 169, 0.912) !important;
  border-radius: 2px;
}


/* PANNEAU DU MODE EDITION */


/* Gestion des marges du mode édition que les box ne dépassent pas et s'adaptent à l'espace disponible. 
Alignement et centrage du texte 
Taille des titres de l'édition, en grand et centré à gauche sur une ligne.*/
#dock .form-horizontal .controls {
  margin-left: 0px;
  margin-right: 0px;
  min-width: 100px;
  min-height: 35px;
}
#dock .form-horizontal .control-label, 
div.modal .form-horizontal .control-label {
  width: 90px;
  -webkit-hyphens: auto;
  font-size: 12px;
  hyphens: auto;
  font-family: Arial, sans-serif;
  text-align: left;
  float: inherit;
}
#dock .form-horizontal .control-label, div.modal .form-horizontal .control-label {
  display: inline-block !important;  /* évite le retour à la ligne */
  width: auto !important;            /* largeur auto */
  white-space: nowrap;               /* pas de coupure forcée */
  font-size: 14px !important;        /* taille de police */
  font-weight: bold;                  /* gras  */
  vertical-align: middle;            /* bien aligné avec la case */
  margin-right: 10px;                /* petit espace si plusieurs labels */
}



/* Titres de section du mode édition, exemple : Données à valider (terrain) */
#edition-form-container h3 {
  color: #222;
  font-size: 14px;
  border-bottom: 1px solid #006231;
}

/* Conteneur général du formulaire d'édition. 
Avoir un fond blanc */
#edition div.tab-pane {
  background-color: #f4f7f5;
  color: #000;
  border: 1px solid #006231; 
  font-family: Arial, sans-serif;
}


/* Rend les titres des parties du formulaire d'édition,
selon ce que l'on a fait sur QGIS dans formulaire d'attributs
en blocs vert foncé avec écriture blanche
et les rend interactifs, au clic */
#edition-form-container .accordion-bound {
  background-color: #174f2f;
  color: white;
  border-radius: 4px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  max-width: 100%;
}
/* Apporte aux blocs décrits précédemment un chevron
qui permet de montrer que le bloc est fermé */
legend .chevron {
  display: inline-block;
  margin-left: 8px;
  border: solid #fcfcfc;
  border-width: 0 2px 2px 0;
  padding: 4px;
  transform: rotate(0deg);
  transition: transform 0.2s;
}
/* Apporte aux blocs décrits précédemment un chevron
qui permet de montrer que le bloc est ouvert */
legend .chevron.open {
  transform: rotate(90deg);
}


/* Style du bouton Ajouter du mode édition */
a#edition-draw.btn.btn-small {
  background-color: #ffffff !important;  /* fond clair */
  color: #217346 !important;             /* texte vert du Parc national */
  border: 2px solid #217346 !important;  /* bordure bien visible */
  font-weight: bold;
  border-radius: 5px;
  padding: 6px 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: background-color 0.3s;
}
a#edition-draw.btn.btn-small:hover {
  background-color: #e6f0ec !important; /* effet hover doux */
  color: #000 !important;
}


/* Boutons pour fermer le panneau de gauche et de droite (flèche tournée vers l'extérieur)
fond blanc et survol vert */
#dock-close,
#right-dock-close {
  background-color: #ffffff !important;
}
#dock-close:hover,
#right-dock-close:hover {
  background-color: #427259 !important;
  color: var(--color-contrasted-text) !important;
}


/* Les fonds blancs des blocs de couches et fonds de carte par exemple*/
#toolbar div.menu-content, 
#menu div.menu-content, 
#dock div.menu-content, 
#sub-dock div.menu-content,  
#right-dock div.menu-content, 
div.modal div.menu-content, 
#bottom-dock div.bottom-content {
    background-color: #ffffff;
}

/* Les couleurs du texte selon les contrastes (couleur de fond), noir ou blanc en fonction) */
#edition-form-container h3,
#sub-dock h3, 
#right-dock h3, 
#right-dock a, 
#mini-dock h3, 
#edition-point-coord-form-group h3,
#global_legend.tab-pane.active h3 .text {
    color: #000 !important;
}
#toolbar h3, 
#menu h3, 
#dock h3
div.modal h3, 
.dock-subtitle,
#filter.tab-pane.active h3 .text,
#switcher-baselayer.baselayer h3 .text
 {
    color: #f5f5f5;
}

/* Pour que mles boutons Fermer soient orange */
#hide-sub-dock,
.btn.btn-danger, 
.btn-bottomdock-clear,
.btn.btn-danger:focus{
  background-color: #fd8c62 !important;
}


/* STYLE DU TUTORIEL*/

.shepherd-button {
    background-color: rgb(48, 94, 65) !important; /* Bleu lisible */
    color: white !important; /* Texte en blanc */
    border: none;
    padding: 6px 12px;
    margin: 5px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    opacity: 1 !important; /* Corrige les éventuelles opacités */
    transition: background-color 0.2s;
}

.shepherd-button:hover {
    background-color: rgb(48, 94, 65) !important;
}

.shepherd-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 6px;
    border-top: 1px solid #ddd;
}

.shepherd-cancel-icon {
    color: rgb(48, 94, 65) !important; 
}



/* Change le texte au survol du lien Administration */
.dashboard-item:hover .hidden-phone {
  color: #000 !important;
}

/* Texte utilisateur (nom) devient noir au survol */
.user.dropdown:hover .hidden-phone {
  color: #000 !important;
}

/* Change le texte  du lien Administration */
.dashboard-item .hidden-phone {
  color: #f7f5f5 !important;
}

/* Texte utilisateur (nom)  */
.user.dropdown .hidden-phone {
  color: #f9f4f4 !important;
}


/* Table attributaire */

button.btn-open-attribute-layer:hover {
  background-color: rgb(14, 76, 45) !important; /* Un peu plus foncé au hover */
}

button.btn-open-attribute-layer {
  background-color: rgb(14, 76, 45) !important; /* Vert plus lumineux */
  color: #ffffff !important; /* Blanc pur pour fort contraste */
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  transition: background-color 0.3s ease;
}

#attributeLayers-tabs > li.active > a, #attributeLayers-tabs > li > a:hover {
    border: 1px solid transparent;
    border-radius: 5px;
    background-color: rgb(14, 76, 45);
    color: var(--color-contrasted-text);
}



/* Faire les petits boutons d'édition du popup */
.feature-toolbar .btn {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #ccc;
    margin: 2px;
}
.feature-toolbar .btn:hover {
    background-color: #0c3c0f7d !important; /* léger fond vert clair au survol */
    border-color: rgb(17, 19, 17) !important;
}



/* Réglages opacité des couches */
/* Boutons d'opacité : état par défaut */
.btn-opacity-layer {
    color: #333 !important;
    background-color: #f5f5f5 !important;
    border: 1px solid #ddd !important;
    margin: 2px;
    font-weight: normal;
    padding: 4px 8px;
    border-radius: 4px;
    text-shadow: none !important;
}

/* Survol avant clic : gris foncé */
.btn-opacity-layer:hover {
    background-color: #999 !important;
    color: white !important;
}

/* État actif : vert clair */
a.btn.btn-opacity-layer.active {
    background-color: #4d7a4d !important;  
    color: white !important;
    border-color: #4d7a4d !important;
}

/* Style de base (obligatoire)*/
button.btn.link.layer-info {
    background-color: #f5f5f5 !important; /* fond clair */
    color: #333 !important;               /* texte foncé */
    border: 1px solid #ccc !important;
    border-radius: 4px;
    padding: 5px 10px;
    font-weight: normal;
    box-shadow: none;
    text-shadow: none;
    transition: background-color 0.2s;
}



/*LEGENDE */


/* Zone interne contenant l’image */
#my-legend-items-container {
  overflow: hidden !important;  /* Supprime le scroll horizontal et vertical */
  padding: 0 !important;
}

/* Image de la légende */
#my-legend-items-container img {
  display: block;
  height: auto !important;
  max-width: none !important;
  border: none;
}

/* Enlève toute marge inutile autour de la légende */
.my-legend-container {
  margin: 0 !important;
  padding: 0 !important;
}


/* Appliquer une taille de police cohérente à toute la légende */
#global_legend,
#my-legend-items-container,
#my-legend-items-container * {
  font-size: 13px !important;  /* Ajuste selon tes préférences */
  line-height: 1.4em;
  font-family: Arial, sans-serif;
}


/* Container global de la légende */
#global_legend {
  max-width: 400px !important;  /* Largeur étendue */
  min-width: 300px;
  padding: 10px;
}



/* le slide du mode filtrer lorsqu'il y a des dates */
.ui-slider.ui-slider-horizontal .ui-slider-range {
  background-color: #064608 !important;
  border: 1px solid #3b553b !important;
  color:rgb(14, 76, 45) !important;
}

.ui-slider.ui-slider-horizontal .ui-slider-handle {
  background-color: #fff !important;
  border: 2px solid #49684a !important;
  color:#0c3b0f !important;
  border-radius: 20% !important;
  width: 0.5em !important;
  height: 0.5em !important;
  margin-left: 0em !important;
  margin-top: 0em !important;
}

.ui-slider.ui-slider-horizontal {
  background-color: #ffffff !important;
  border-radius: 4px !important;
}



/* === EN-TÊTE avec le titre en blanc, sans fond, et l'image sur le serveur qui ressemble à la Charte graphique === */
#header {
  background-color: #2b2b2b00;
  background-image : url(/index.php/view/media/getMedia?repository=03reglementations&project=manifestation&path=..%2Fmedia%2Fthemes%2Fdefault%2Fcss%2F/img/fond.jpg);
  color : #FBFBFB; 
  text-decoration: none;
  background-repeat: none;
}

#title {
  top: 50%;
  transform: translateY(-50%);
  text-decoration: none;
  width: 700px !important;
  max-width: 700px;
  margin: 0 auto;
  display: block; 
}

/* TITRE DES STATS */
#dataviz .text {
    color: rgb(27, 26, 26) !important;
}

#dataviz.tab-pane.active {
  background-color: #ffffff; /* gris clair */
}



/* nettoyer le pop up quand il n'y a pas de valeurs */
.control-has-empty-value {
  display: none !important;
}

#mapmenu li.projects.nav-dock {
    display: none !important;
}


#tabform.tab-pane.active {
    max-height: 80vh;   /* hauteur max par rapport à la fenêtre */
    overflow-y: auto;   /* barre de défilement verticale */
    overflow-x: hidden; /* pas de scroll horizontal */
    padding: 5px 10px;  /* garde tes espacements */
}



#filter.tab-pane.active {
  max-height: 80vh;   /* ou 85vh selon la hauteur dispo sous ton bandeau */
  overflow-y: auto;   /* ajoute la barre de défilement verticale */
  overflow-x: hidden; /* empêche le scroll horizontal */
  padding-right: 5px; /* un peu d'espace pour ne pas couper le contenu */
}


/* =========================================================
   🌿 Personnalisation du menu mobile Lizmap
   ========================================================= */
/* === Ajustements spécifiques mobiles === */
@media screen and (max-device-width: 640px) {


  /* 1️⃣ Fond du menu latéral uniquement en mode mobile */
  #content.mobile #mapmenu {
    background-color: #1b5e20; /* vert foncé */
    border-radius: 0 8px 8px 0;
    z-index: 2000 !important; /* en dessous du bouton */
  }

  /* 2️⃣ Liste principale du menu mobile */
  #content.mobile #mapmenu .nav.nav-list {
    background-color: #0b3f0f; /* vert encore plus foncé */
    padding: 10px;
    border: none;
  }

  /* 3️⃣ Chaque bouton du menu */
  #mapmenu .nav.nav-list li {
    background-color: transparent; /* fond transparent */
    margin: 6px 0;
    border-radius: 6px;
    transition: background-color 0.3s ease;
  }


  /* 5️⃣ Texte et icônes */
  #mapmenu .nav.nav-list li a {
    color: white !important;
    font-weight: 500;
    display: flex;
    align-items: center;
  }

  /* =========================================================
    Bouton menu (menuToggle)
    ========================================================= */

  /* 6️⃣ Bouton menu toujours visible et cliquable */
  #menuToggle {
    position: absolute !important; /* se détache du flux Lizmap */
    top: 75vh;                 /* distance depuis le haut */
    left: 30px;                /* distance depuis le bord gauche */
    z-index: 9999 !important;  /* reste au-dessus du menu et de la carte */
    background-color: #2e7d32; /* vert foncé */
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  /* 7️⃣ Quand le menu est ouvert (Lizmap ajoute la classe .opened) */
  #menuToggle.opened {
    background-color: #388e3c; /* vert plus clair */
  }

  /* 8️⃣ Les trois barres du hamburger */
  #menuToggle span {
    background-color: white;
    display: block;
    height: 4px;
    width: 25px;
    margin: 4px 0;
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  /* =========================================================
    ✅ Fin du style personnalisé
    ========================================================= */

  /* Conteneur principal du navbar */
  lizmap-navbar#navbar {
    right: 5px;                 /* rapproché du bord droit */
    top: 70px;                  /* décale un peu pour éviter le header */
    transform: scale(0.8);      /* réduit légèrement la taille globale */
    transform-origin: top right;
    z-index: 500 !important;    /* sous les popups, mais au-dessus de la carte */
  }

  /* Boutons de la barre */
  lizmap-navbar#navbar button {
    width: 36px !important;
    height: 36px !important;
    margin: 4px 0 !important;
    font-size: 14px !important;
    line-height: 36px !important;
    border-radius: 6px;
  }

  /* Curseur du zoom (slider) */
  lizmap-navbar#navbar .slider {
    height: 60px !important;
    width: 6px !important;
    margin: 6px auto !important;
  }

}


/*dialog wait*/
.liz-dialog-wait {
    background: #F6F6F6;
    border: 1px solid #606060;
    min-width: 200px;
    max-width: 300px;   
  }
  

  .liz-dialog-wait .ui-dialog-titlebar{
    background: #215135;
    color : #FBFBFB;
  }
  .liz-dialog-wait .ui-dialog-titlebar-close{
    display:none;
  }
  .ui-widget-overlay {
    opacity : 0.8;
    background : black;
  }

  #loading {
    background-image: url(/index.php/view/media/getMedia?repository=03reglementations&project=manifestation&path=..%2Fmedia%2Fthemes%2Fdefault%2Fcss%2F/img/chargement.gif);
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
  }

  /* Loader GIF central pour toutes les actions */
#lizmap-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url(/index.php/view/media/getMedia?repository=03reglementations&project=manifestation&path=..%2Fmedia%2Fthemes%2Fdefault%2Fcss%2F/img/action.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100px 100px;
    z-index: 9999;
    pointer-events: none;
    display: none;
}


  .liz-dialog-wait .ui-dialog-content {
    word-wrap: break-word;   /* Coupe les mots longs */
    white-space: normal;     /* Permet le retour à la ligne */
    text-align: center;      /* Centrer le texte si tu veux */
    padding: 5px;           /* Un peu d'air autour du texte */
    box-sizing: border-box;  /* Inclut le padding dans la largeur */
}
.liz-dialog-wait .ui-dialog-title {
  white-space: normal;       /* Permet le retour à la ligne */
  word-wrap: break-word;     /* Coupe si besoin */
  text-align: center;        /* Centré si tu préfères */
  padding: 0.3em;            /* Un peu d'air */
  max-width: 100%;           /* Respecte la largeur du conteneur */
}


/* permet de cacher les barres verticales du dock */
#dock-content {
  overflow-y: hidden !important; 
}
#dock {
  border-right: none !important;
}



/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 641px) and (max-device-width: 1400px){
  
  /* 6️⃣ Bouton menu toujours visible et cliquable */
  #menuToggle {
    background-color: #0f3c12; 
  }

    #menuToggle.opened {
    background-color: #0f3c12; 
  }
  
  /* 1️⃣ Fond du menu latéral uniquement en mode mobile */
  #content #mapmenu {
    background-color: #0f3c12; /* vert foncé */
    border-radius: 0 8px 8px 0;
    z-index: 2000 !important; /* en dessous du bouton */
  }

  /* 2️⃣ Liste principale du menu mobile */
  #content #mapmenu .nav.nav-list {
    background-color: #0f3c12; /* vert encore plus foncé */
    padding: 10px;
    border: none;
  }

  @media (pointer: coarse) {
    #mapmenu > div > ul li {
        background: #557245;
        border-radius: 6px;
        margin-top: 10px;
        padding-left: 15px;
    }
}
}