/* Styles spécifiques pour le tableau des CLIENT */
.table-container {
    margin: 0; /* Supprime l'espacement externe */
    padding: 0; /* Supprime l'espacement interne */
    width: 100%; /* Utilise toute la largeur de l'écran */
    overflow-x: auto; /* Permet le défilement horizontal si nécessaire */
    max-height: 600px; /* Hauteur maximale du conteneur */
    overflow-y: auto; /* Barre de défilement verticale */
    border: 1px solid #ddd; /* Bordure esthétique */
}

.table-container thead {
    position: sticky; /* En-tête fixe */
    top: 0;
    z-index: 1; /* Assure que l'en-tête reste au-dessus du contenu */
}

/* Style général pour le tableau */
.table-container table {
    width: 100%; /* Le tableau occupe toute la largeur du conteneur */
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    font-size: 14px;
    background-color: #f9f9f9;
    border: 1px solid #ddd; /* Bordure légère */
}

/* En-tête du tableau */
.table-container table th {
    background-color: #2c3e50; /* Bleu nuit */
    color: #ffffff;
    text-align: left;
    padding: 8px;
    border: 1px solid #ddd;
    font-size: 12px;
}

/* Cellules du tableau */
.table-container table td {
    padding: 6px;
    border: 1px solid #ddd;
    text-align: left;
    word-wrap: break-word; /* Permet de couper les mots longs si nécessaire */
    white-space: normal; /* Autoriser les sauts de ligne */
}

/* Lignes alternées */
.table-container table tbody tr:nth-child(odd) {
    background-color: #f2f2f2;
}

.table-container table tbody tr:nth-child(even) {
    background-color: #ffffff;
}

/* Survol des lignes */
.table-container table tbody tr:hover {
    background-color: #d9edf7;
    transition: background-color 0.3s ease;
}

/* Style uniquement pour les boutons dans le tableau */
.btn-table {
    padding: 4px 8px;
    font-size: 12px;
    background-color: #0566c7;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-table:hover {
    background-color: #1a252f; /* Couleur légèrement plus foncée au survol */
}


/* Responsivité : ajuster les colonnes pour les petits écrans */
@media (max-width: 768px) {
    .table-container table th,
    .table-container table td {
        font-size: 10px; /* Réduction supplémentaire pour les petits écrans */
        padding: 4px;
    }

    .btn-table {
        font-size: 9px;
        padding: 3px 6px;
    }
}

/* Styles spécifiques pour le tableau des commerciaux ______________________________________________________________________*/

/* Liens d'action dans les cellules */
.commercial-table .delete-link {
    color: #610000; /* Rouge pour le lien */
    text-decoration: none;
    font-weight: bold;
    padding: 5px 10px;
    border: 1px solid #830000;
    border-radius: 4px; /* Coins arrondis */
    background-color: transparent;
    transition: all 0.3s ease;
}

.commercial-table .delete-link:hover {
    background-color: #9c2525; /* Rouge en arrière-plan au survol */
    color: white; /* Texte blanc */
}

.commercial-table .edit-link {
    color: #0a1f36; /* Rouge pour le lien */
    text-decoration: none;
    font-weight: bold;
    padding: 5px 10px;
    border: 1px solid #21395e;
    border-radius: 4px; /* Coins arrondis */
    background-color: transparent;
    transition: all 0.3s ease;
}

.commercial-table .edit-link:hover {
    background-color: #0d466d; /* Rouge en arrière-plan au survol */
    color: white; /* Texte blanc */
}


/* CSS FORMULAIRE REGISTRATION _________________________________________________________________________________*/
/* Champs de saisie (input, select) en blanc */
.custom-form input[type="text"],
.custom-form input[type="email"],
.custom-form input[type="tel"],
.custom-form select {
    background-color: #fff; /* Fond blanc */
    border: 1px solid #ccc; /* Bordure grise */
    color: #1a252f;

}

/* Champs de saisie au survol */
.custom-form input[type="text"]:focus,
.custom-form input[type="email"]:focus,
.custom-form input[type="tel"]:focus,
.custom-form select:focus {
    border-color: #3498db; /* Bordure bleue au focus */
    outline: none; /* Supprimer le contour par défaut */
    background-color: #f1f1f1; /* Légère couleur de fond au focus */
}

/* Champs de saisie avec texte en place (placeholder) */
.custom-form input::placeholder,
.custom-form select::placeholder {
    color: #999; /* Couleur gris clair pour le placeholder */
}

#client-registration-form {
    margin: 20px 30px; /* Petite marge en haut/bas, plus grande sur les côtés */
    padding: 20px; /* Espacement interne */
    border: 2px solid #0073aa; /* Bordure avec une couleur élégante */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Effet ombre */
    background-color: #f9f9f9; /* Couleur de fond douce */
    width: calc(100% - 60px); /* Pleine largeur moins la marge totale (30px de chaque côté) */
    box-sizing: border-box; /* Inclut la bordure et le padding dans la largeur totale */
}

#commercial-registration-form {
    margin: 20px 30px; /* Petite marge en haut/bas, plus grande sur les côtés */
    padding: 20px; /* Espacement interne */
    border: 2px solid #0073aa; /* Bordure avec une couleur élégante */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Effet ombre */
    background-color: #f9f9f9; /* Couleur de fond douce */
    width: calc(100% - 60px); /* Pleine largeur moins la marge totale (30px de chaque côté) */
    box-sizing: border-box; /* Inclut la bordure et le padding dans la largeur totale */
}