/* public/css/forms.css */

/* --- Styles des Liens dans les formulaires --- */
form label a, form label a:link, form label a:visited {
    color: #81ecec;
}
form label a:hover, form label a:focus {
    color: #00cec9;
    text-decoration: underline;
}
form label a:active {
    color: #00b894;
}

/* --- Styles de base des formulaires --- */
form div { /* Groupes de formulaire */
    margin-bottom: 18px;
}

form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500; /* Un peu moins gras */
    color: #b2bec3; /* Gris plus clair pour les labels */
}

/* Cibler spécifiquement les labels des checkboxes pour le style GDPR */
form label[for="gdpr_accept"] {
    display: flex; /* Pour aligner la case et le texte */
    align-items: center;
    font-weight: normal; /* Pas besoin de gras pour ce label */
    color: #dfe6e9;
}
form input[type="checkbox"]#gdpr_accept {
    width: auto; /* Rétablir la largeur auto pour les checkboxes */
    margin-right: 8px;
}

form input[type="text"],
form input[type="password"],
form input[type="email"],
form select {
    width: 100%; /* Le box-sizing: border-box gère le padding/bordure */
    padding: 10px;
    border: 1px solid #525d60;
    border-radius: 4px;
    background-color: #2d3436;
    color: #dfe6e9;
    font-size: 1em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

form input[type="text"]:focus,
form input[type="password"]:focus,
form input[type="email"]:focus,
form select:focus {
    outline: none;
    border-color: #2ecc71;
    box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.2); /* Effet de halo au focus */
}

/* --- Boutons génériques et de soumission --- */
form button[type="submit"],
.button-link { /* Classe générique pour les liens stylés comme des boutons */
    background-color: #2ecc71 !important;
    /*color: #212628; --- */
	color: #fff;/* --- */
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.1s ease;
}

form button[type="submit"]:hover,
.button-link:hover {
    background-color: #27ae60 !important;
}
form button[type="submit"]:active, /* Effet au clic */
.button-link:active {
    transform: translateY(1px);
}

/* --- Variantes de Boutons --- */
.button-link-danger {
    /* Hérite des propriétés de .button-link si les deux classes sont appliquées */
    /* Si utilisé seul, copier les propriétés de .button-link et surcharger */
    padding: 10px 20px; /* Assurez-vous que ces valeurs sont consistantes ou désirées */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease, color 0.3s ease;

    background-color: #e74c3c; /* Rouge */
    color: white;
}
.button-link-danger:hover {
    background-color: #c0392b; /* Rouge plus foncé */
    color: white;
}

.button-link-secondary {
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold; /* Maintenir la cohérence ou ajuster */
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;

    background-color: #525d60;
    color: #dfe6e9;
    border: 1px solid #636e72; /* Peut être 'transparent' ou hérité si pas de bordure par défaut */
}
.button-link-secondary:hover {
    background-color: #636e72;
    color: #ffffff;
    border-color: #81ecec;
}

/* --- Style pour l'icône de visualisation du mot de passe --- */
.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-wrapper input[type="password"],
.password-wrapper input[type="text"] { /* Quand on le change en texte */
    width: 100%; /* S'assure qu'il prend la largeur, même avec flex */
    padding-right: 40px; /* Laisse de la place pour l'icône à droite */
}

.password-toggle-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #bdc3c7;
    user-select: none;
    transition: color 0.2s ease;
}
.password-toggle-icon:hover {
    color: #2ecc71;
}

/* --- Textes d'aide et règles de mot de passe --- */
.form-text-helper {
    font-size: 0.85em;
    color: #b2bec3;
    margin-top: 5px;
    padding-left: 5px;
}
.form-text-helper ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-top: 5px;
    margin-bottom: 0;
}
.form-text-helper li {
    margin-bottom: 3px;
}

.password-rules-dynamic {
    font-size: 0.85em;
    color: #b2bec3;
    margin-top: 8px;
}
.password-rules-dynamic p { /* Titre avant la liste des règles */
    margin-bottom: 8px;
    font-weight: bold;
}
.policy-criteria-list {
    list-style-type: none;
    padding-left: 0;
    margin-top: 5px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 5px 15px;
}
.password-rules-dynamic li {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}
.password-rules-dynamic li .policy-icon {
    font-size: 16px;
    margin-right: 5px;
    color: #7f8c8d;
    transition: color 0.3s ease;
    flex-shrink: 0;
}
.password-rules-dynamic li.valid .policy-icon {
    content: 'check_circle'; /* JS devra gérer le changement de l'icône textuelle si vous utilisez Material Symbols */
    color: #2ecc71;
    font-variation-settings: 'FILL' 1;
}
.password-rules-dynamic li.valid .policy-text {
    color: #2ecc71;
}
.password-rules-dynamic li.invalid .policy-icon {
    content: 'cancel'; /* JS devra gérer le changement de l'icône textuelle */
    color: #e74c3c;
}
.password-rules-dynamic li.invalid .policy-text {
    color: #e74c3c;
}

/* --- Messages d'erreur de formulaire --- */
.form-text-error {
    display: block;
    font-size: 0.85em;
    color: #e74c3c;
    margin-top: 5px;
}

form input.input-error { /* Classe à ajouter via JS en cas d'erreur */
    border-color: #e74c3c !important; /* Important pour s'assurer qu'il écrase le focus */
    box-shadow: 0 0 5px rgba(231, 76, 60, 0.5);
}