/* 📄 /assets/css/login.css */

/*
   Ce fichier s'appuie sur et surcharge les styles définis dans
   /assets/css/style.css.
   Il NE DOIT PAS contenir de variables ni de styles généraux déjà définis ailleurs.
*/

/* ------------------------------------------------------------- */
/* 🔐 STYLES SPÉCIFIQUES À LA PAGE CONNEXION (login.php) */
/* ------------------------------------------------------------- */

/* Conteneur principal de la page de connexion */
.login-page.container {
    padding-top: 2rem;
    padding-bottom: 2rem;
    max-width: 500px; /* Largeur optimale pour un formulaire de connexion */
}

/* Carte de connexion */
.login-page .login-card.card {
    background: var(--background-soft);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 25px;
}
.login-page .login-card .card-body {
    padding: 0 !important; /* Le padding est sur le .login-card */
}

/* Titre principal de la page */
.login-page .page-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 2rem; /* Plus d'espace sous le titre */
    text-align: center;
    color: var(--primary);
}
.login-page .page-title .fa-solid {
    margin-right: 0.6rem;
    color: var(--primary);
}

/* Boutons de connexion sociale */
.login-page .login-social .btn {
    font-size: 1rem;
    padding: 0.8rem 1.5rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}
.login-page .login-social .google-btn {
    color: var(--text-main);
    border-color: var(--border-color);
    background-color: transparent;
}
.login-page .login-social .google-btn:hover {
    background-color: var(--background);
    border-color: var(--primary);
    color: var(--primary);
}
.login-page .login-social .facebook-btn {
    color: white;
    background-color: #1877f2; /* Couleur Facebook */
    border-color: #1877f2;
}
.login-page .login-social .facebook-btn:hover {
    background-color: #166fe5;
    border-color: #166fe5;
}
.login-page .login-social .facebook-btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #1877f2 !important;
    border-color: #1877f2 !important;
    color: white !important;
}


/* Séparateur "OU" */
.login-page .divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.login-page .divider::before,
.login-page .divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-color);
}
.login-page .divider:not(:empty)::before {
    margin-right: .5em;
}
.login-page .divider:not(:empty)::after {
    margin-left: .5em;
}


/* Formulaire de connexion */
.login-page .login-form .form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main);
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.login-page .login-form .form-label .fa-solid {
    color: var(--text-muted);
    font-size: 1.1em;
}
.login-page .login-form .form-control {
    border-radius: 10px;
    border-color: var(--border-color);
    background-color: var(--background);
    color: var(--text-main);
    padding: 0.75rem 1rem;
    font-size: 1rem;
    width: 100% !important; /* Force la pleine largeur */
    max-width: 100% !important;
}
.login-page .login-form .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 191, 255, 0.3);
}

/* Lien Mot de passe oublié */
.login-page .forgot-link {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.login-page .forgot-link:hover {
    color: var(--primary);
    text-decoration: underline;
}
.login-page .forgot-link .fa-solid {
    color: var(--text-muted);
}

/* Bouton Se connecter */
.login-page .login-form .btn-primary.btn-lg {
    background-color: var(--primary);
    color: white;
    font-size: 1.2rem;
    padding: 0.9rem 2rem;
    border-radius: 12px;
}
.login-page .login-form .btn-primary.btn-lg:hover {
    background-color: var(--primary-hover);
}


/* Texte d'inscription */
.login-page .registration-text {
    font-size: 0.95rem;
    color: var(--text-main);
}
.login-page .registration-text a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}
.login-page .registration-text a:hover {
    text-decoration: underline;
    color: var(--secondary);
}
.login-page .registration-text a .fa-solid {
    margin-right: 5px;
}


/* NOUVELLES RÈGLES CLÉS : Cacher les éléments de messagerie et de panier si présents */
/* Ces règles sont un filet de sécurité si login.php est inclus dans une page plus grande (ex: une page de messagerie) */
.messenger-container,
.chat-area,
.sidebar,
#reply-box,
#attachment-preview,
.chat-input-area {
    display: none !important;
}


/* ------------------------------------------------------------- */
/* 📱 RESPONSIVE (Ajustements pour les petits écrans - < 768px) */
/* ------------------------------------------------------------- */

@media (max-width: 768px) {
    .login-page.container {
        padding: 1.5rem;
        max-width: 100%;
    }

    .login-page .login-card.card {
        padding: 20px;
        border-radius: 12px;
    }

    .login-page .page-title {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }

    /* Boutons sociaux */
    .login-page .login-social .btn {
        font-size: 0.95rem;
        padding: 0.7rem 1.2rem;
    }

    /* Champs de formulaire */
    .login-page .login-form .form-label {
        font-size: 0.9rem;
    }
    .login-page .login-form .form-control {
        padding: 0.6rem 0.8rem;
        font-size: 0.95rem;
    }

    /* Lien Mot de passe oublié */
    .login-page .forgot-link {
        font-size: 0.85rem;
    }

    /* Bouton Se connecter */
    .login-page .login-form .btn-primary.btn-lg {
        font-size: 1.1rem;
        padding: 0.8rem 1.5rem;
    }

    /* Texte d'inscription */
    .login-page .registration-text {
        font-size: 0.9rem;
    }
}


/* ------------------------------------------------------------- */
/* 🌙 MODE SOMBRE (Adaptation des styles pour dark-theme) */
/* ------------------------------------------------------------- */

.dark-theme .login-page .login-card.card {
    background: var(--background-soft);
    border-color: var(--border-color);
    box-shadow: var(--shadow);
}

.dark-theme .login-page .page-title {
    color: var(--primary);
}
.dark-theme .login-page .page-title .fa-solid {
    color: var(--primary);
}


.dark-theme .login-page .login-social .google-btn {
    color: var(--text-main);
    border-color: var(--border-color);
    background-color: transparent;
}
.dark-theme .login-page .login-social .google-btn:hover {
    background-color: var(--background);
    border-color: var(--primary);
    color: var(--primary);
}
.dark-theme .login-page .login-social .facebook-btn {
    /* Couleur fixe */
}
.dark-theme .login-page .login-social .facebook-btn.disabled {
    /* Couleur fixe */
}


.dark-theme .login-page .divider {
    color: var(--text-muted);
}
.dark-theme .login-page .divider::before,
.dark-theme .login-page .divider::after {
    border-bottom-color: var(--border-color);
}


.dark-theme .login-page .login-form .form-label {
    color: var(--text-main);
}
.dark-theme .login-page .login-form .form-label .fa-solid {
    color: var(--text-muted);
}
.dark-theme .login-page .login-form .form-control {
    border-color: var(--border-color);
    background-color: var(--background);
    color: var(--text-main);
}
.dark-theme .login-page .login-form .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 191, 255, 0.3);
}

.dark-theme .login-page .forgot-link {
    color: var(--text-muted);
}
.dark-theme .login-page .forgot-link:hover {
    color: var(--primary);
}
.dark-theme .login-page .forgot-link .fa-solid {
    color: var(--text-muted);
}

.dark-theme .login-page .login-form .btn-primary.btn-lg {
    background-color: var(--primary);
    color: white;
}
.dark-theme .login-page .login-form .btn-primary.btn-lg:hover {
    background-color: var(--primary-hover);
}


.dark-theme .login-page .registration-text {
    color: var(--text-main);
}
.dark-theme .login-page .registration-text a {
    color: var(--primary);
}
.dark-theme .login-page .registration-text a:hover {
    color: var(--secondary);
}