@import url('https://fonts.googleapis.com/css?family=Roboto');

/*  MENU PRINCIPAL */

.MenuPrincipal{
  order: 0; 
  position: fixed;
   width: 190%;
   max-width: 1200px; /* ✅ Largeur maximale */
   /* margin:  0px;  */
   left: 0px;
   height: 160vh;
   margin-left: 0px;
   margin-top: 0px;  
  
   padding: 8px 0px;
   line-height: 0.3;
   /* z-index: 1;  Derrière le formulaire */ 
 
 }
 
 .card{
   width: 187px; /*  LARGEUR du cadre du menu*/
   height: 620px; /* hauteur du cadre du menu*/
   background-color: #1E2B32;
   border-radius: 10px 10px;
 }
 
 .header{
   border-radius: 10px 10px 0px 0px;
   padding: 1px; /* ENTETE DU MENU */
   background-color: #2A3942;
 }
 
 h3{
   color: #FFFFFF;
   font-family: 'Roboto', sans-serif;
   margin-left: 2rem;
 }
 
 .iconM{
   font-size: 8px;
   margin-left: 170px;
   color: #2f89fc;
 }
 
 .icon{
   margin-right: 8px;
 }
 /************** INTERIEUR DU CADRE DU MENU *****/
 .body li{
   transition: 1s all;
   font-family: 'Roboto', sans-serif;
   font-size: 14px; /*'polis du menu'*/
   padding: 10px;
   margin-left: -40px;
   margin-top: 0px;
   color: #fff;
   list-style: none;
   display: block;
   border-top-right-radius: 10px 10px;
   border-bottom-right-radius: 10px 10px;
 }
 
 li:hover{
   transition: 1s all;
   color: #2f89fc;
   background-color: rgba(42, 56, 65, 0.82);
   border-top-right-radius: 10px 10px;
   border-bottom-right-radius: 10px 10px;
   cursor: pointer;
 }
 
 .body > li{
   float: left;
 }
 
 .body li ul{
   background: #1E2B32;
   margin-left: 186px;
   margin-top: -30px;
   display: none;
   /* position: absolute; */
   border-top-right-radius: 15px 15px;
   border-bottom-right-radius: 15px 15px;
 }
 
 
 .body li:hover > ul{
   display: block;
   cursor: pointer;
 }
/*************************/
.menuavec {
 display: flex;
  flex-direction: row;
  /* align-items: flex-start; */
  /* width: 100%; */
}
 
.hidden-cell {
  display: none;
}


.formajout {
  background-color: rgba(255, 255, 255, 0.8); /* Blanc semi-transparent */
  /* padding: 20px; */
  border-radius: 5px;
 position: relative; /*quand les zones de texte se desactive*/
 z-index: 100; 
 display: flex;
  flex-grow: 1;
  width: 100%; 
  max-width: 700px; /* ✅ Évite que ça devienne trop large */
  margin: 8px 280px; /*✅ Centre le formulaire*/
  padding: 12px;
  /* display: block; ❌ Pas besoin de flex ici */
  border: 1px solid #440f01;
  border-radius: 5px;
  box-shadow: 5px 0px 10px rgba(7, 26, 44, 0.5); /*/ effet de l'ombre*/
}
/**********************************************/
/************STYLE DU FORM QUI CONTIENT 4 IMAGES********/ 
.formimage {
  position: relative; /*quand les zones de texte se desactive*/
  z-index: 100; 
  display: flex;
   flex-grow: 1;
 
  width: 100%; 
  height: 500px;
  max-width: 500px; /* ✅ Évite que ça devienne trop large */
  margin: 0px auto; /* ✅ Centre le formulaire */
  
  /* display: block; ❌ Pas besoin de flex ici */
  border: 1px solid #440f01;
  border-radius: 5px;
  box-shadow: 5px 0px 10px rgba(7, 26, 44, 0.5); /*/ effet de l'ombre*/
  justify-content: center; /*Centre horizontalement */
  align-items: center; /*Centre verticalement (si nécessaire) */
  flex-wrap: wrap; /* Permet aux images de passer à la ligne si elles dépassent la largeur */
   gap: 40px; /*Espacement entre les images */
  padding: 10px; /*Ajoute un espace intérieur */ 
  
}

@media screen and (min-width: 768px) {
  .formimage input[type="text"],
  .formimage input[type="email"],
  .formimage input[type="password"],
  .formimage textarea,
  .formimage select {
      pointer-events: auto;
      width: 100%; 
      max-width: 700px;
      padding: 4px;
      /* margin: 2px 0; */
      border: 1px solid #190435;
      border-radius: 5px;
      font-size: 14px;
      transition: all 0.3s ease-in-out;
      box-shadow: 0px 0px 1px rgba(7, 26, 44, 0.5); /*/ effet de l'ombre*/    
      
    /* z-index: 10; */
      /* max-width: 800px; : ✅ Augmente la largeur sur grand écran */
  }
}


.formimage img {
  border: 1px solid #0c485a; /*Ajoute une bordure*/
  transition: border-color 0.3s ease;/* Transition pour la bordure au survol*/

  
  border-radius: 5px;
  box-shadow: 5px 0px 10px rgba(7, 26, 44, 0.5); /*/ effet de l'ombre*/
}

.formimage a:hover img {
  border-color: #007bff; /* Change la couleur de la bordure au survol */
}

/* Optionnel : style pour les liens */
.formimage a {
    text-decoration: none; /* Supprime le soulignement des liens */
}

.formajout img {
  max-width: 350px; /*Ajustez la largeur maximale des images*/
  height: auto; /*Garde les proportions de l'image*/
  
  border: 1px solid #0c485a; /*Ajoute une bordure*/
  transition: border-color 0.3s ease;/* Transition pour la bordure au survol*/

  
  border-radius: 5px;
  box-shadow: 5px 0px 10px rgba(7, 26, 44, 0.5); /*/ effet de l'ombre*/


}
/*************/ le lien sous les images
.image-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none; /* Enlève le soulignement du lien */
  color: inherit; /* Hérite de la couleur du texte parent (si nécessaire) */
}

.image-link img {
  max-width: 100%; /* Permet à l'image de s'adapter à la largeur du conteneur */
  height: auto;
}

.link-text {
  margin-top: 10px; /* Ajoute un espace entre l'image et le texte */
  text-align: center; /* Centre le texte horizontalement */
}

/*********/
body {
  
             
     /* margin: 10px; 
      padding: 0,10; 
    
  
  
  
display: flex; */
    
 /* justify-content: center;     A REVOIR */
/* align-items: center; A REVOIR */
 min-height: 100vh; /*sAssure que le corps occupe toute la hauteur de l'écran */
 /* margin: 10px; /*Supprime les marges par défaut du corps */
}

/*********************************/

/* ✅ Style des champs de saisie */

@media screen and (min-width: 568px) {
    .formajout input[type="text"],
    .formajout input[type="email"],
    .formajout input[type="password"],
    .formajout textarea,
    .formajout select {
        pointer-events: auto;
        width: 90%; 
        /* max-width: 700px; */
        padding: 4px;
        margin: 1px 0;
        border: 1px solid #130825; /* bordure des labels*/
        border-radius: 5px;
        font-size: 14px;
        transition: all 0.3s ease-in-out;
        box-shadow: 0px 0px 1px rgba(7, 26, 44, 0.5); /*/ effet de l'ombre*/    
        
      /* z-index: 10; */
        /* max-width: 800px; : ✅ Augmente la largeur sur grand écran */
    }
  }
  


/* Effet au focus */
.formajout input:focus,
.formajout textarea:focus,
.formajout select:focus {
    /* z-index: 10; */
    border-color: #4889d3;
    box-shadow: 0px 0px 5px rgba(76, 82, 88, 0.5);
    outline: none;
}




/* ✅ Style des labels */
.formajout label {
  display: flex;
    font-weight: bold;
    color: #220157;
    display: block;
    margin-top: 0px;
    font-size: 14px;
}

/* ✅ Style du bouton Envoyer */
.Env-btn {
  padding: 10px 20px;
  background-color: #78b4f8; /* Bleu */
  color: rgb(0, 0, 0);
  border: none;

  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}

/* Effet au survol */
.Env-btn:hover {
    background-color: #03db64; /* Bleu plus foncé */
}

/* ✅ Alignement du bouton Retour */
.btn-container {
  
  display: flex;
  justify-content: space-between;
  text-align: right ; 
    margin-top: 4%;
    gap: 10px; /* Espacement entre le libellé et le champ */

}
/* masque le mot de passe */
.hidden-password {
  display: none;
}

/* style desboutons update et delete par des icones
/* ✅ Style général des icônes */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%; /* Bouton rond */
  text-decoration: none;
  font-size: 12px;
  transition: 0.3s;
}




/* ✅ Style du bouton Update */
.btn-icon.update {
  
  background-color: #007bff; /* Bleu */
  color: white;
}

.btn-icon.update:hover {
  background-color: #0056b3; /* Bleu plus foncé */
}

/* ✅ Style du bouton Delete */
.btn-icon.delete {
  background-color: #dc3545; /* Rouge */
  color: white;
}

.btn-icon.delete:hover {
  background-color: #b52b27; /* Rouge plus foncé */
}

/* ✅ Ajuster la taille des icônes */
.btn-icon i {
  
  font-size: 10px;
}

/* ✅ Style du bouton Retour */
.retour-btn {
  padding: 10px 20px;
  background-color: #78b4f8; /* Rouge */
  color: rgb(0, 0, 0);
  text-decoration: none;
  border-radius: 5px;
  font-size: 14px;
  transition: 0.3s;

}

/* Effet au survol */
.retour-btn:hover {
    background-color: #f54b45; /* Rouge plus foncé */
}
livreursTable {
  margin-left: 220px; /* Espace pour le menu */
  margin-top: 140px;

}

/*****************************************************/

/****************** nouveau style de formulaire ajjout livreur ou n'ya pas de retiour la ligne*/
.ObsField {
  width: 140%; /* Ajuster la largeur avec une marge */
  /* resize: vertical; Permettre le redimensionnement vertical */
    height:80px;      
}



.form-group {
   margin-bottom: 8px; /* Au lieu de la valeur par défaut */
  }

  label {
      margin-bottom: 3%;
      font-size: 16px;
      height:30px;      
      
  }
  
  

  input[type="text"],
  select,
  textarea {
    margin-bottom: 6%;
      padding: 10px;
      font-size: 16px;
      height:30px;      
      width:40px;
  }
 

  .form-group {
    line-height: 1.2;
}
.form-group {
  display: flex;
  align-items: center; /* Pour aligner verticalement */
}

label {
  margin-right: 6px; /* MARGE ENTRE LE LIBELLE ET LA ZONE */
}

input[type="text"].small-field {
  width: 160px;
}

#Obs {
  height: 80px; /* Ajustez la valeur selon vos besoins */
  resize: vertical; /* Permet à l'utilisateur de redimensionner verticalement */
  width: 900px;
}

/********************************************/


/* Appliquer un style général au tableau */
/*****************************************************/
/* Conteneur principal */
.divtableau {
  
  flex-grow: 1;
  margin-left: 170px;
  margin-top: 0px;
  padding: 20px;
  gap: 10px;
  max-height: 90vh;
 
}

/* Table principale */
#livreursTable {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  
}

/* En-tête */
#livreursTable thead {
  background-color: #c9e0e9;
  color: rgb(28, 1, 71);
}

#livreursTable thead, #livreursTable tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

/* Corps du tableau */
#livreursTable tbody {
  overflow: visible;
}

/* Cellules */
#livreursTable th, #livreursTable td {
  border-bottom: 1px solid #ccc; /* Ligne horizontale */
  border-right: none; /* Supprime la bordure verticale */
  word-wrap: break-word;
  white-space: normal;
  text-align: center;
  padding: 8px;
  font-size: 13px;
}

/* Lignes alternées */
#livreursTable tbody tr:nth-child(even) {
  background-color: #f9f9f9; /* Gris clair pour différencier */
}

/* Hover */
#livreursTable tbody tr:hover {
  background-color: #eaeaea;
}

/* Colonne Actions */
.col-action {
  width: 6px;
  min-width: 6px;
  text-align: center;
}

/***************************************/
/* Style des boutons */
#livreursTable button {
  background-color: #4CAF50; /* Vert */
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 5px;
}

#livreursTable button#del {
  background-color: #d9534f; /* Rouge */
}



/*#--------------------- ajout colis*/
.btn-ajout {
  display: inline-block;
  height:18px;
  padding: 6px 12px;
  background-color: #28a745; /* vert ou ce que tu veux */
  color: white;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
}
.btn-ajout:hover {
  background-color: #218838;
}
.boutons-container {
  display: flex; /* ou inline-flex */
  justify-content: flex-end; /* Aligne les boutons à droite */
  margin-left: 10px;
  margin-top: 5px;
  padding: 10px;
  background-color: #fff;
  position: relative;
  z-index: 1;
}
/* bouton ajouter et bon livraison dans liste colis */


.boutons-container2 {
  display : flex; /* ou inline-flex */
  justify-content: flex-start;
  /* position: absolute; ou position: fixed; */
    /* left: 80; */
  /* justify-content: flex-start; Aligne les boutons à droite */
  position: relative; /* ou position: absolute; */
  z-index: 10; /* ou une valeur plus élevée */
  
}

.ajouter-container, .BonLiv {
  display: inline-block;
   /* z-index: 100;  */
  margin-left: 10px; /* Ajoute un espace entre les boutons */
  
}
.ajouter-container {
  text-align: right;
  
}

.BonLiv {
  text-align: left;
}



#ajouter {
  background-color: #4889d3; /* Bleu */
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;

}

#ajouter:hover {
  background-color: #3569a3; /* Bleu plus foncé au survol */
}

#BonLiv {
  background-color: #d89607; /* Bleu */
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;

}


/**       STYLE POUR LE USER CONNECTE **/
/************************/
.image-form {
  display: flex; /* Pour afficher les images côte à côte */
  justify-content: space-around; /* Pour espacer les images */
}

.image-form img {
  width: 400px; /* Largeur des images */
  height: 400px; /* Hauteur des images */
  border: 1px solid #ccc; /* Bordure autour des images */
  cursor: pointer; /* Curseur de la souris en forme de main au survol */
}

/********** STYLE DES code barre*************************/
.form-container {
  position: absolute; /* ← se placer tout en haut à droite */
  top: 0;
  right: 0;
  margin: 10px; /* un peu d'espace du bord */
}

#scan-form {
  background-color: #f9f9f9;
  /* padding: 10px 20px; */
  border-radius: 1px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
}

/* label {
  font-weight: bold;
  margin-bottom: 0px; 
} */

#code_barre_input {
  margin-top: 0px;
  padding: 0px 0px;
  font-size: 12px;
  width: 150px;
  border: 0px solid #ccc;
  /* border-radius: 2px; */
  z-index: 10;
}

/* style sous menu action */
/* Styles pour la colonne d'action */
.col-action {
  position: relative; /* Important pour positionner le menu absolument par rapport à cette colonne */
  text-align: center;
}

/* Styles pour le bouton d'action */
.action-btn {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 4px;
  font-weight: bold;
}

.action-btn:hover {
  background-color: #e0e0e0;
}

/* Styles pour le menu contextuel */
.action-menu {
  display: none; /* Le menu est caché par défaut */
  position: absolute;
  /* Positionnement à gauche du bouton d'action */
  right: 70%; /* Déplace le menu complètement à gauche du parent */
  top: 2; /* Alignement avec le haut du bouton */
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  z-index: 1000; /* Assurez-vous que le menu est au-dessus des autres éléments */
  min-width: 120px; /* Largeur minimale pour les liens */
  padding: 2px 0; /* Un peu de rembourrage interne */
}

/* Styles pour les liens à l'intérieur du menu */
.action-menu a {
  display: block; /* Chaque lien prend toute la largeur */
  /* padding: 4px 8px; */
  text-decoration: none;
  color: #333;
  white-space: nowrap; /* Empêche le texte de se casser sur plusieurs lignes */
}

.action-menu a:hover {
  background-color: #f5f5f5;
  color: #007bff; /* Couleur au survol */
}

/* Afficher le menu quand la classe 'active' est présente */
.action-menu.active {
  display: block;
}

.checkbox-col {
  width: 1%;
  white-space: nowrap;
  text-align: center;
  padding: 0;
}
.checkbox-col input[type="checkbox"] {
  margin: 0;
}

  .scanned-row {
    background-color: #6af58a !important; /* Vert clair */
    transition: background-color 0.3s;
  }
  .messages {
    list-style-type: none;
  }
  
  .message-warning,
  .message-info {
    color: inherit; /* Utilise la couleur par défaut de l'élément */
    background-color: transparent; /* Supprime le fond */
    border: none; /* Supprime la bordure */
    padding: 20px;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000; /* Assure que le message est au-dessus de tout autre contenu */
  }
  
  .message-warning {
    color: orange;
    background-color: rgba(248, 215, 218, 0.8); /* Couleur de fond avec transparence */
  }
  
  .message-info {
    color: blue;
    background-color: rgba(209, 236, 241, 0.8); /* Couleur de fond avec transparence */
  }