/* 
   1) Conteneur #my-client-area
   - On cible #my-client-area .classe pour plus de spécificité
*/
#my-client-area {
  font-family: 'Wonka', sans-serif; /* Police principale */
}

/* Barre de recherche */
#my-client-area .my-clients-search-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem; /* Espace entre la barre et le tableau */
}

/* Champ input */
#my-client-area .my-clients-search-input {
  width: 300px !important;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
}

/* Bouton de recherche, avec icône loupe en pseudo-élément */
#my-client-area .my-clients-search-button {
  position: relative;
  padding: 0.5rem 0.8rem;
  background-color: #6aa84f; /* Vert */
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

/* Icône loupe avant le texte (Unicode) */
#my-client-area .my-clients-search-button::before {
  content: "🔍";
  display: inline-block;
  margin-right: 0.4rem;
}

/* Survol du bouton */
#my-client-area .my-clients-search-button:hover {
  background-color: #8cc66d;
}

/* 
   2) Tableau 
   - Aucune bordure sauf horizontales en gris béton ciré avec opacité
*/
#my-client-area .my-clients-table {
  width: 100%;
  border-collapse: collapse;
  border: none;
  font-size: 1rem;
  color: #333;
  /* La police Wonka est déjà définie sur le conteneur #my-client-area */
}

/* En-têtes : ligne horizontale */
#my-client-area .my-clients-table thead th {
  text-align: left;
  padding: 0.75rem;
  background-color: #f7f7f7;
  font-family: Wonka !important;
  font-weight: 600;
  border-bottom: 1px solid rgba(170, 170, 170, 0.5); /* Gris béton ciré avec opacité */
}

/* Cellules : ligne horizontale fine */
#my-client-area .my-clients-table tbody td {
  padding: 0.75rem;
  border-bottom: 1px solid rgba(170, 170, 170, 0.5);
  color: black;
}

/* 
   3) Photo de profil
   - Cercles, placeholders
*/
#my-client-area .my-clients-photo {
  width: 48px; 
  height: 48px; 
  object-fit: cover; 
  border-radius: 50%;
}
#my-client-area .my-clients-photo-placeholder {
  width: 48px; 
  height: 48px; 
  background: #ccc; 
  border-radius: 50%;
}

/*
   4) Statut d'abonnement avec point coloré plus gros
*/
#my-client-area .my-clients-status-dot {
  font-size: 1.4rem; 
  font-family: Wonka;
  margin-right: 0.5rem; 
  vertical-align: middle;
}

/* Couleurs selon le statut */
#my-client-area .my-clients-status-dot.status-green {   color: green; }
#my-client-area .my-clients-status-dot.status-red {     color: red; }
#my-client-area .my-clients-status-dot.status-orange {  color: orange; }
#my-client-area .my-clients-status-dot.status-grey {    color: #999; }

/* Lien Nom Complet en noir (et sans soulignement) */
#my-client-area .my-clients-table tbody td a {
    font-family: Wonka !important;
    color: #000 !important; 
    text-decoration: none;
}