/* ==========================================================================
   UpTenUp — Pages d'authentification (login, register, forgot, reset)
   Utilise les tokens du design system. Importer APRÈS design-tokens.css
   et components.css.
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--up-font-sans);
    background: linear-gradient(
        135deg,
        var(--up-accent-strong) 0%,
        var(--up-accent) 50%,
        color-mix(in srgb, var(--up-accent) 75%, white) 100%
    );
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--up-space-5);
    color: var(--up-ink-900);
}

/* Décor court (lignes + balles) — repris des pages auth d'origine,
   mais centralisé une seule fois. */
body::before, body::after {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none; z-index: 0;
    transform: perspective(800px) rotateX(25deg) scale(1.3);
    transform-origin: center 60%;
}
body::before {
    background:
        linear-gradient(90deg, transparent 48%, rgba(255,255,255,0.15) 49%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.15) 51%, transparent 52%),
        linear-gradient(180deg, transparent 15%, rgba(255,255,255,0.12) 15.5%, rgba(255,255,255,0.15) 16%, rgba(255,255,255,0.12) 16.5%, transparent 17%, transparent 83%, rgba(255,255,255,0.12) 83.5%, rgba(255,255,255,0.15) 84%, rgba(255,255,255,0.12) 84.5%, transparent 85%),
        linear-gradient(180deg, transparent 49%, rgba(255,255,255,0.1) 49.5%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.1) 50.5%, transparent 51%);
}
body::after {
    background:
        radial-gradient(circle at 52% 17%, rgba(200,255,100,0.25) 0, rgba(200,255,100,0.15) 4px, transparent 6px),
        radial-gradient(circle at 8.8% 50%, rgba(200,255,100,0.25) 0, rgba(200,255,100,0.15) 4px, transparent 6px),
        radial-gradient(circle at 91.2% 49%, rgba(200,255,100,0.25) 0, rgba(200,255,100,0.15) 4px, transparent 6px),
        radial-gradient(circle at 49% 84.2%, rgba(200,255,100,0.25) 0, rgba(200,255,100,0.15) 4px, transparent 6px);
}

.auth-card,
.login-container,
.register-container,
.forgot-container,
.reset-container,
.container {
    position: relative;
    z-index: 1;
    background: var(--up-white);
    border-radius: var(--up-radius-xl);
    box-shadow: var(--up-shadow-lg);
    padding: var(--up-space-10);
    width: 100%;
    max-width: 420px;
    border: 1px solid var(--up-ink-200);
}

.logo { text-align: center; margin-bottom: var(--up-space-8); }
.logo h1 {
    font-size: var(--up-fs-3xl);
    color: var(--up-accent);
    margin-bottom: var(--up-space-1);
    font-weight: var(--up-fw-bold);
}
.logo p {
    color: var(--up-ink-700);
    font-size: var(--up-fs-md);
}

.form-group { margin-bottom: var(--up-space-5); }
.form-group label {
    display: block;
    margin-bottom: var(--up-space-2);
    color: var(--up-ink-800);
    font-weight: var(--up-fw-medium);
    font-size: var(--up-fs-sm);
}
.form-group input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--up-ink-300);
    border-radius: var(--up-radius-md);
    font-size: var(--up-fs-md);
    font-family: var(--up-font-sans);
    color: var(--up-ink-900);
    background: var(--up-white);
    transition:
        border-color var(--up-dur-base) var(--up-ease),
        box-shadow var(--up-dur-base) var(--up-ease);
}
.form-group input:focus {
    outline: none;
    border-color: var(--up-accent);
    box-shadow: var(--up-shadow-focus);
}
.form-group small {
    display: block;
    margin-top: var(--up-space-1);
    color: var(--up-ink-700);
    font-size: var(--up-fs-xs);
}

.submit-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--up-accent-strong), var(--up-accent));
    color: var(--up-white);
    border: none;
    border-radius: var(--up-radius-md);
    font-size: var(--up-fs-lg);
    font-weight: var(--up-fw-semibold);
    cursor: pointer;
    min-height: var(--up-tap-min);
    transition:
        transform var(--up-dur-fast) var(--up-ease),
        box-shadow var(--up-dur-base) var(--up-ease),
        filter var(--up-dur-base) var(--up-ease);
}
.submit-btn:hover { transform: translateY(-2px); box-shadow: var(--up-shadow-md); filter: brightness(1.05); }
.submit-btn:active { transform: translateY(0); }

.links {
    text-align: center;
    margin-top: var(--up-space-6);
    padding-top: var(--up-space-6);
    border-top: 1px solid var(--up-ink-200);
    color: var(--up-ink-800);
    font-size: var(--up-fs-sm);
}
.links a {
    color: var(--up-accent-strong);
    text-decoration: none;
    font-weight: var(--up-fw-semibold);
}
.links a:hover { text-decoration: underline; }
.links p + p { margin-top: var(--up-space-3); }

.flash-messages { margin-bottom: var(--up-space-5); }
.flash {
    padding: 12px 16px;
    border-radius: var(--up-radius-md);
    margin-bottom: var(--up-space-3);
    font-size: var(--up-fs-sm);
    font-weight: var(--up-fw-medium);
    border: 1px solid transparent;
}
.flash.error   { background: var(--up-danger-bg);  color: var(--up-danger);  border-color: color-mix(in srgb, var(--up-danger) 30%, transparent); }
.flash.success { background: var(--up-success-bg); color: var(--up-success); border-color: color-mix(in srgb, var(--up-success) 30%, transparent); }
.flash.info    { background: var(--up-info-bg);    color: var(--up-info);    border-color: color-mix(in srgb, var(--up-info) 30%, transparent); }

@media (max-width: 480px) {
    .auth-card,
    .login-container, .register-container,
    .forgot-container, .reset-container, .container {
        padding: var(--up-space-6);
        border-radius: var(--up-radius-lg);
    }
    .logo h1 { font-size: var(--up-fs-2xl); }
}

/* ---------- Bascule clair / sombre / auto ----------
   Bouton flottant en haut à droite des pages publiques. */
.theme-toggle {
    position: fixed;
    top: var(--up-space-4);
    right: var(--up-space-4);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: var(--up-space-2);
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-family: var(--up-font-sans);
    font-size: var(--up-fs-sm);
    font-weight: var(--up-fw-medium);
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:
        background var(--up-dur-base) var(--up-ease),
        transform var(--up-dur-fast) var(--up-ease);
    min-height: 36px;
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.28); transform: translateY(-1px); }
.theme-toggle:active { transform: translateY(0); }
.theme-toggle [data-theme-icon] { font-size: 16px; line-height: 1; }
.theme-toggle [data-theme-label] { line-height: 1; }

/* ---------- Mode sombre pour les pages publiques ----------
   Deux déclencheurs :
   - Choix explicite de l'utilisateur via le bouton (body[data-theme="dark"]).
   - Préférence système si aucun choix explicite n'est posé
     (@media prefers-color-scheme + body sans data-theme).
   Le bouton "auto" retire l'attribut data-theme pour réactiver la 2e voie. */
body[data-theme="dark"] {
    background: linear-gradient(
        135deg,
        #2a1208 0%,
        #4a2310 45%,
        #161a2c 100%
    );
    color: var(--up-ink-900);
}
body[data-theme="dark"]::before {
    background:
        linear-gradient(90deg, transparent 48%, rgba(255,255,255,0.08) 49%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.08) 51%, transparent 52%),
        linear-gradient(180deg, transparent 15%, rgba(255,255,255,0.06) 15.5%, rgba(255,255,255,0.08) 16%, rgba(255,255,255,0.06) 16.5%, transparent 17%, transparent 83%, rgba(255,255,255,0.06) 83.5%, rgba(255,255,255,0.08) 84%, rgba(255,255,255,0.06) 84.5%, transparent 85%),
        linear-gradient(180deg, transparent 49%, rgba(255,255,255,0.05) 49.5%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.05) 50.5%, transparent 51%);
}
body[data-theme="dark"]::after {
    background:
        radial-gradient(circle at 52% 17%, rgba(200,255,100,0.18) 0, rgba(200,255,100,0.10) 4px, transparent 6px),
        radial-gradient(circle at 8.8% 50%, rgba(200,255,100,0.18) 0, rgba(200,255,100,0.10) 4px, transparent 6px),
        radial-gradient(circle at 91.2% 49%, rgba(200,255,100,0.18) 0, rgba(200,255,100,0.10) 4px, transparent 6px),
        radial-gradient(circle at 49% 84.2%, rgba(200,255,100,0.18) 0, rgba(200,255,100,0.10) 4px, transparent 6px);
}
body[data-theme="dark"] .auth-card,
body[data-theme="dark"] .login-container,
body[data-theme="dark"] .register-container,
body[data-theme="dark"] .forgot-container,
body[data-theme="dark"] .reset-container,
body[data-theme="dark"] .container {
    background: var(--up-ink-100);
    border-color: var(--up-ink-300);
    color: var(--up-ink-900);
}
body[data-theme="dark"] .logo h1 { color: var(--up-accent); }
body[data-theme="dark"] .logo p { color: var(--up-ink-700); }
body[data-theme="dark"] .form-group label { color: var(--up-ink-800); }
body[data-theme="dark"] .form-group input {
    background: var(--up-ink-50);
    color: var(--up-ink-900);
    border-color: var(--up-ink-300);
}
body[data-theme="dark"] .form-group input::placeholder { color: var(--up-ink-500); }
body[data-theme="dark"] .form-group small { color: var(--up-ink-700); }
body[data-theme="dark"] .links {
    color: var(--up-ink-800);
    border-top-color: var(--up-ink-300);
}
body[data-theme="dark"] .links a { color: var(--up-accent); }
body[data-theme="dark"] .info-text { color: var(--up-ink-800); }
body[data-theme="dark"] .email-display {
    background: var(--up-ink-50);
    color: var(--up-ink-900);
    border-color: var(--up-ink-300);
}

@media (prefers-color-scheme: dark) {
    body:not([data-theme="light"]):not([data-theme="dark"]) {
        background: linear-gradient(
            135deg,
            #2a1208 0%,
            #4a2310 45%,
            #161a2c 100%
        );
        color: var(--up-ink-900);
    }
    body:not([data-theme="light"]):not([data-theme="dark"])::before {
        background:
            linear-gradient(90deg, transparent 48%, rgba(255,255,255,0.08) 49%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.08) 51%, transparent 52%),
            linear-gradient(180deg, transparent 15%, rgba(255,255,255,0.06) 15.5%, rgba(255,255,255,0.08) 16%, rgba(255,255,255,0.06) 16.5%, transparent 17%, transparent 83%, rgba(255,255,255,0.06) 83.5%, rgba(255,255,255,0.08) 84%, rgba(255,255,255,0.06) 84.5%, transparent 85%),
            linear-gradient(180deg, transparent 49%, rgba(255,255,255,0.05) 49.5%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.05) 50.5%, transparent 51%);
    }
    body:not([data-theme="light"]):not([data-theme="dark"])::after {
        background:
            radial-gradient(circle at 52% 17%, rgba(200,255,100,0.18) 0, rgba(200,255,100,0.10) 4px, transparent 6px),
            radial-gradient(circle at 8.8% 50%, rgba(200,255,100,0.18) 0, rgba(200,255,100,0.10) 4px, transparent 6px),
            radial-gradient(circle at 91.2% 49%, rgba(200,255,100,0.18) 0, rgba(200,255,100,0.10) 4px, transparent 6px),
            radial-gradient(circle at 49% 84.2%, rgba(200,255,100,0.18) 0, rgba(200,255,100,0.10) 4px, transparent 6px);
    }
    body:not([data-theme="light"]):not([data-theme="dark"]) .auth-card,
    body:not([data-theme="light"]):not([data-theme="dark"]) .login-container,
    body:not([data-theme="light"]):not([data-theme="dark"]) .register-container,
    body:not([data-theme="light"]):not([data-theme="dark"]) .forgot-container,
    body:not([data-theme="light"]):not([data-theme="dark"]) .reset-container,
    body:not([data-theme="light"]):not([data-theme="dark"]) .container {
        background: var(--up-ink-100);
        border-color: var(--up-ink-300);
        color: var(--up-ink-900);
    }
    body:not([data-theme="light"]):not([data-theme="dark"]) .logo h1 { color: var(--up-accent); }
    body:not([data-theme="light"]):not([data-theme="dark"]) .logo p { color: var(--up-ink-700); }
    body:not([data-theme="light"]):not([data-theme="dark"]) .form-group label { color: var(--up-ink-800); }
    body:not([data-theme="light"]):not([data-theme="dark"]) .form-group input {
        background: var(--up-ink-50);
        color: var(--up-ink-900);
        border-color: var(--up-ink-300);
    }
    body:not([data-theme="light"]):not([data-theme="dark"]) .form-group input::placeholder { color: var(--up-ink-500); }
    body:not([data-theme="light"]):not([data-theme="dark"]) .form-group small { color: var(--up-ink-700); }
    body:not([data-theme="light"]):not([data-theme="dark"]) .links {
        color: var(--up-ink-800);
        border-top-color: var(--up-ink-300);
    }
    body:not([data-theme="light"]):not([data-theme="dark"]) .links a { color: var(--up-accent); }
    body:not([data-theme="light"]):not([data-theme="dark"]) .info-text { color: var(--up-ink-800); }
    body:not([data-theme="light"]):not([data-theme="dark"]) .email-display {
        background: var(--up-ink-50);
        color: var(--up-ink-900);
        border-color: var(--up-ink-300);
    }
}