/* assets/css/auth_forms.css ou à ajouter dans style.css */

.form-auth {
    max-width: 500px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.form-auth h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #333;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #555;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box; /* Important */
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus {
    border-color: #4A7C85; /* Votre couleur principale */
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(74, 124, 133, 0.25); /* Ombre de focus assortie */
}

.btn-submit { /* S'applique au bouton de soumission des formulaires */
    display: block;
    width: 100%;
    padding: 0.9rem 1.5rem;
    background-color: #4A7C85; /* Votre couleur principale */
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-transform: uppercase;
}

.btn-submit:hover {
    background-color: #3c636b; /* Couleur principale foncée */
}

.form-auth p {
    text-align: center;
    margin-top: 1.5rem;
}

.form-auth p a {
    color: #4A7C85;
    text-decoration: none;
    font-weight: 600;
}

.form-auth p a:hover {
    text-decoration: underline;
}

.btn-logout { /* Style pour le bouton déconnexion sur espace_client.php */
    display: inline-block;
    padding: 0.7rem 1.2rem;
    background-color: #dc3545; /* Rouge pour déconnexion */
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.btn-logout:hover {
    background-color: #c82333; /* Rouge plus foncé */
}


/* Style pour les onglets */
.tabs {
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}

.tab-link {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  border-bottom: 3px solid transparent; /* Pour l'indicateur actif */
}

.tab-link:hover {
  background-color: #f1f1f1;
}

.tab-link.active {
  background-color: #e7e7e7;
  color: #333; /* Ou votre couleur principale */
  border-bottom: 3px solid #4A7C85; /* Votre couleur principale */
}

.tab-content {
  display: none; /* Caché par défaut, géré par JS */
  padding: 20px 0;
  border-top: none;
}

/* Style pour le tableau de l'historique */
.repair-history-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 0.9em;
}

.repair-history-table th,
.repair-history-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}

.repair-history-table th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.repair-history-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.repair-history-table tbody tr:hover {
  background-color: #f1f1f1;
}

.repair-history-table a {
    color: #4A7C85; /* Votre couleur principale */
    text-decoration: none;
}
.repair-history-table a:hover {
    text-decoration: underline;
}

.error-message {
  color: red;
  padding: 10px;
  border: 1px solid red;
  background-color: #ffebeb;
  border-radius: 4px;
}

/* Styles pour la section profil (à ajouter au CSS existant) */
.profile-details p {
  margin-bottom: 0.8rem;
  line-height: 1.6;
}

.profile-details strong {
  color: #333; /* Ou votre couleur de texte principale */
  min-width: 150px; /* Pour un alignement si vous mettez en display:inline-block ou flex */
  display: inline-block; /* Optionnel, pour aligner les labels */
}

.profile-details address {
  margin-left: 150px; /* Si vous utilisez inline-block pour strong */
  font-style: normal;
  margin-bottom: 0.8rem;
}

/* Ajustement pour l'affichage de l'erreur dans l'onglet historique
   si le client n'est pas trouvé, pour éviter la redondance */
#historique-reparations .error-message:first-child {
    /* On peut décider de cacher ce message si un message similaire
       est déjà dans l'onglet profil, ou le styliser différemment.
       La logique PHP actuelle essaie de ne pas répéter le message "client non trouvé".
    */
}

/* Style pour le tableau des factures */
.invoices-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 0.9em;
}

.invoices-table th,
.invoices-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}

.invoices-table th {
  background-color: #f2f2f2;
  font-weight: bold;
}

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

.invoices-table tbody tr:hover {
  background-color: #f1f1f1;
}

.btn-download-invoice {
    display: inline-flex; /* Pour aligner icône et texte */
    align-items: center;
    padding: 0.5rem 0.8rem;
    background-color: #007bff; /* Bleu pour téléchargement */
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-download-invoice i.fas {
    margin-right: 5px;
}

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