/*
 *  auth-modern.css — habillage commun des 5 ecrans d'authentification.
 *
 *  Base : login.css de demoreno.jddev.com (design de reference), repris tel
 *  quel pour que les ecrans 2FA et reinitialisation soient visuellement
 *  identiques a la page de connexion.
 *
 *  Charge UNIQUEMENT par login.php, setup_2fa.php, verify_2fa.php,
 *  reinitialisemdp.php et reinitialiseusermdp.php — jamais globalement,
 *  pour ne pas interferer avec le reste du CRM.
 *
 *  Autonome : polices systeme, aucune dependance a tokens.css ni a un CDN.
 */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Le defilement vertical doit rester possible : les ecrans 2FA et de
       reinitialisation sont plus hauts que la page de connexion (QR code,
       cle de secours, regles de mot de passe) et depassent le viewport sur
       un ecran de portable. */
    overflow-x: hidden;
    overflow-y: auto;
    /* Couleur de repli sous le degrade, qui est en position: fixed. */
    background: #0a1137;
}

/* Modern Animated Background */
.modern-bg-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.modern-bg-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Palette du logo Omega, du plus froid au plus chaud :
       #0a1137 bleu nuit · #116197 bleu · #1a753a vert
       #ac8a14 or       · #db4814 orange · #c12522 rouge
       L'opacite de 0.85 laisse transparaitre l'image de fond. */
    background:
        linear-gradient(135deg,
            rgba( 10,  17,  55, 0.85)   0%,
            rgba( 17,  97, 151, 0.85)  20%,
            rgba( 26, 117,  58, 0.85)  40%,
            rgba(172, 138,  20, 0.85)  60%,
            rgba(219,  72,  20, 0.85)  80%,
            rgba(193,  37,  34, 0.85) 100%),
        url('img/placeholders/backgrounds/login_full_bg.jpg');
    background-size: 400% 400%, cover;
    background-position: 0% 50%, center;
    animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.modern-bg-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.shape-1 {
    width: 300px;
    height: 300px;
    top: -100px;
    left: -100px;
    animation: float 20s ease-in-out infinite;
}

.shape-2 {
    width: 200px;
    height: 200px;
    top: 60%;
    right: -50px;
    animation: float 15s ease-in-out infinite reverse;
}

.shape-3 {
    width: 150px;
    height: 150px;
    bottom: 10%;
    left: 10%;
    animation: float 18s ease-in-out infinite;
}

.shape-4 {
    width: 250px;
    height: 250px;
    top: 20%;
    right: 15%;
    animation: float 22s ease-in-out infinite reverse;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -30px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

/* Modern Login Container */
#modern-login-container {
    /* En flux normal (et non fixed) : le conteneur grandit avec son contenu,
       ce qui rend la page defilable. Le fond, lui, reste en position: fixed
       et ne bouge pas pendant le defilement. */
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 40px 20px;
    box-sizing: border-box;
    z-index: 1;
    animation: containerFadeIn 0.8s ease;
}

@keyframes containerFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 50px 40px;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: cardSlideUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    /* margin auto plutot que align-items: center sur le conteneur : centre la
       carte verticalement tant qu'elle tient dans le viewport, mais laisse le
       haut atteignable au defilement quand elle est plus haute. Avec
       align-items: center, le debordement superieur devient inaccessible. */
    margin: auto;
}

.login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s;
}

.login-card:hover::before {
    left: 100%;
}

@keyframes cardSlideUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Login Header */
.login-header {
    text-align: center;
    margin-bottom: 40px;
}

.logo-wrapper {
    margin-bottom: 25px;
    animation: logoFloat 3s ease-in-out infinite;
    position: relative;
    display: inline-block;
    padding: 10px 30px;
    background: linear-gradient(135deg, #559ad7 0%, #4f9aea 100%);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
}

.logo-wrapper::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #4facfe);
    border-radius: 22px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.logo-wrapper:hover::before {
    opacity: 1;
    animation: rotateBorder 3s linear infinite;
}

@keyframes rotateBorder {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.logo-image {
    width: 200px;
    max-width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 1;
}

.login-title {
    font-size: 32px;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 10px 0;
    animation: titleSlide 0.8s ease 0.2s both;
}

@keyframes titleSlide {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.login-subtitle {
    font-size: 16px;
    color: #718096;
    margin: 0;
    animation: titleSlide 0.8s ease 0.3s both;
}

/* Modern Form Groups */
.modern-form-group {
    margin-bottom: 25px;
    animation: formGroupSlide 0.6s ease both;
}

.modern-form-group:nth-child(2) {
    animation-delay: 0.4s;
}

.modern-form-group:nth-child(3) {
    animation-delay: 0.5s;
}

@keyframes formGroupSlide {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.modern-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 8px;
}

.modern-label i {
    color: #667eea;
    font-size: 16px;
}

.modern-input-wrapper {
    position: relative;
}

.modern-input {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    color: #2d3748;
    transition: all 0.3s ease;
    outline: none;
}

.modern-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    transform: translateY(-2px);
}

.modern-input::placeholder {
    color: #cbd5e0;
}

/* Toggle Password */
.toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #a0aec0;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.toggle-password:hover {
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
}

/* Modern Checkbox */
.modern-form-options {
    margin-bottom: 30px;
    animation: formGroupSlide 0.6s ease 0.6s both;
}

.modern-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.modern-checkbox input[type="checkbox"] {
    display: none;
}

.checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    margin-right: 10px;
    position: relative;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.modern-checkbox input:checked + .checkbox-custom {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
}

.modern-checkbox input:checked + .checkbox-custom::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.checkbox-label {
    font-size: 14px;
    color: #4a5568;
}

/* Modern Submit Button */
.modern-btn-submit {
    width: 100%;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    position: relative;
    overflow: hidden;
    animation: formGroupSlide 0.6s ease 0.7s both;
}

.modern-btn-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.modern-btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.modern-btn-submit:hover::before {
    left: 100%;
}

.modern-btn-submit:active {
    transform: translateY(0);
}

.modern-btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-icon {
    transition: transform 0.3s ease;
}

.modern-btn-submit:hover .btn-icon {
    transform: translateX(4px);
}

/* Error States */
.has-error .modern-input {
    border-color: #f56565;
    animation: shake 0.5s;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

.help-block {
    color: #f56565;
    font-size: 13px;
    margin-top: 6px;
    animation: errorSlide 0.3s ease;
}

@keyframes errorSlide {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 576px) {
    .login-card {
        padding: 40px 30px;
    }
    
    .login-title {
        font-size: 28px;
    }
    
    .logo-image {
        width: 160px;
    }
}

/* =========================================================
   Composants propres aux ecrans 2FA et reinitialisation.
   Ajoutes a la base demoreno, en reprenant ses conventions :
   rayons de 12px, ombres douces, bleu #5d9ee3 comme accent.
   ========================================================= */

/* --- Bandeau d'information / erreur / succes --- */
.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 15px;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 18px;
    border: 1px solid transparent;
}
.auth-alert i { margin-top: 2px; flex: none; }

.auth-alert-error   { background: #fdecea; border-color: #f5c6c2; color: #a03028; }
.auth-alert-warning { background: #fff4e5; border-color: #f5d9ae; color: #8a5300; }
.auth-alert-info    { background: #e8f2fc; border-color: #c2ddf5; color: #1c5a8f; }
.auth-alert-success { background: #e6f6ed; border-color: #b9e3ca; color: #1c6b3e; }

/* --- Lien secondaire (mot de passe oublie, retour connexion) --- */
.auth-link {
    color: #5d9ee3;
    font-size: 13.5px;
    text-decoration: none;
    transition: color .18s ease;
}
.auth-link:hover, .auth-link:focus { color: #3d7fc4; text-decoration: underline; }

.auth-footer-link {
    text-align: center;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #eceff3;
}

/* --- Saisie du code a 6 chiffres --- */
.code-input {
    text-align: center;
    font-size: 30px !important;
    letter-spacing: 12px;
    font-weight: 600;
    padding-left: 12px !important;   /* compense le letter-spacing du dernier caractere */
    font-variant-numeric: tabular-nums;
}
.code-input::placeholder { letter-spacing: 12px; color: #c8cfd8; }

/* --- Etapes de configuration --- */
.setup-steps {
    margin: 0 0 20px;
    padding-left: 20px;
    font-size: 13.5px;
    color: #5a6a7d;
    line-height: 1.7;
}
.setup-steps li { margin-bottom: 5px; }
.setup-steps strong { color: #2c3e50; }

/* --- QR code --- */
.qr-wrapper {
    display: flex;
    justify-content: center;
    padding: 16px;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    margin-bottom: 16px;
}
.qr-wrapper svg { display: block; width: 210px; height: 210px; }

/* --- Cle de secours a saisir manuellement --- */
.secret-box {
    text-align: center;
    background: #f6f8fa;
    border: 1px dashed #cbd4de;
    border-radius: 10px;
    padding: 13px;
    margin-bottom: 16px;
}
.secret-box code {
    display: block;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #2c3e50;
    background: none;
    word-break: break-all;
}
.secret-box p { margin: 7px 0 0; font-size: 12px; color: #7c8a9a; }

/* --- Rappel de l'adresse concernee --- */
.auth-identity {
    text-align: center;
    font-size: 13.5px;
    color: #5a6a7d;
    margin-bottom: 18px;
}
.auth-identity strong { color: #2c3e50; }

/* --- Exigences du mot de passe --- */
.pwd-rules { margin: -6px 0 16px; font-size: 12.5px; color: #7c8a9a; line-height: 1.6; }
.pwd-rules li.ok  { color: #1c6b3e; }
.pwd-rules li.ko  { color: #8a94a0; }

@media (max-width: 480px) {
    .code-input { font-size: 24px !important; letter-spacing: 8px; }
    .qr-wrapper svg { width: 175px; height: 175px; }
}