/* ==========================================================================
   ADD Niombato — Page de connexion brandée (light + dark)
   ========================================================================== */

/* Tokens (réutilisés de admin.css mais redéfinis ici car wp-login est isolé) */
:root,
:root[data-theme="light"] {
    --add-leaf:   oklch(0.56 0.14 142);
    --add-sun:    oklch(0.78 0.16 76);
    --add-earth:  oklch(0.38 0.13 35);
    --add-paper:  oklch(0.97 0.012 85);
    --bg:         oklch(0.97 0.012 85);
    --surface:    oklch(1 0 0);
    --text:       oklch(0.18 0.012 85);
    --text-muted: oklch(0.45 0.008 85);
    --border:     oklch(0.86 0.012 85);
    --focus-ring: oklch(0.78 0.16 76 / 0.5);
    --shadow:     0 12px 40px oklch(0 0 0 / 0.08);
    color-scheme: light;
}
:root[data-theme="dark"] {
    --add-leaf:   oklch(0.68 0.14 142);
    --add-sun:    oklch(0.82 0.16 76);
    --add-earth:  oklch(0.62 0.15 35);
    --bg:         oklch(0.13 0.012 85);
    --surface:    oklch(0.20 0.012 85);
    --text:       oklch(0.96 0.012 85);
    --text-muted: oklch(0.75 0.012 85);
    --border:     oklch(0.30 0.012 85);
    --focus-ring: oklch(0.82 0.16 76 / 0.6);
    --shadow:     0 12px 40px oklch(0 0 0 / 0.5);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        --add-leaf:   oklch(0.68 0.14 142);
        --add-sun:    oklch(0.82 0.16 76);
        --add-earth:  oklch(0.62 0.15 35);
        --bg:         oklch(0.13 0.012 85);
        --surface:    oklch(0.20 0.012 85);
        --text:       oklch(0.96 0.012 85);
        --text-muted: oklch(0.75 0.012 85);
        --border:     oklch(0.30 0.012 85);
        --shadow:     0 12px 40px oklch(0 0 0 / 0.5);
        color-scheme: dark;
    }
}

body.login {
    background: var(--bg) !important;
    color: var(--text) !important;
    font-family: "Inter", system-ui, -apple-system, sans-serif !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 1rem;
    background-image:
        radial-gradient(ellipse at top right, oklch(from var(--add-sun) calc(l) c h / 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at bottom left, oklch(from var(--add-leaf) calc(l) c h / 0.10) 0%, transparent 50%);
}

#login {
    width: 100%;
    max-width: 380px;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Logo en haut ───────────────────────────────────────────── */
.login h1 a,
.login #login_error + h1 a {
    background-image: url("../images/logo-admin-stacked.svg") !important;
    background-size: 160px auto !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 100% !important;
    height: 84px !important;
    margin-bottom: 1.25rem !important;
    text-indent: -9999px;
    transition: filter 0.3s;
}
:root[data-theme="dark"] .login h1 a,
:root[data-theme="auto"] .login h1 a {
    filter: brightness(1.05);
}
@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .login h1 a { filter: brightness(1.05); }
}

/* ── Carte formulaire ───────────────────────────────────────── */
#loginform,
#registerform,
#lostpasswordform,
#resetpassform {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow) !important;
    padding: 2rem 1.75rem 1.5rem !important;
    margin-top: 0 !important;
}

.login form .input,
.login input[type=text],
.login input[type=password],
.login input[type=email] {
    background: var(--bg) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    padding: 0.75rem 0.9rem !important;
    font-size: 16px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-weight: 400 !important;
    box-shadow: none !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.login form .input:focus,
.login input:focus {
    border-color: var(--add-earth) !important;
    box-shadow: 0 0 0 3px var(--focus-ring) !important;
    outline: none !important;
}
.login label {
    color: var(--text) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.4rem !important;
    display: block;
}

/* Force la lisibilité — certaines règles WP par défaut ré-écrivent en blanc */
.login form,
.login form *:not(button):not(.button) {
    color: var(--text);
}

/* Mot de passe — bouton afficher/masquer */
.login .password-input-wrapper {
    position: relative;
}
.login .button.wp-hide-pw {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--text-muted) !important;
    height: auto !important;
}
.login .button.wp-hide-pw:hover {
    color: var(--text) !important;
}
.login .button.wp-hide-pw .dashicons {
    color: inherit !important;
}

/* "Remember me" */
.login .forgetmenot {
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important;
}
.login .forgetmenot label {
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    font-size: 0.86rem !important;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Bouton Connexion principal */
.login .submit,
.login p.submit {
    margin-top: 1.25rem !important;
}
.wp-core-ui .button-primary {
    background: var(--add-earth) !important;
    color: var(--add-paper) !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.02em !important;
    padding: 0.85rem 1.5rem !important;
    height: auto !important;
    line-height: 1.2 !important;
    width: 100% !important;
    text-align: center;
    text-shadow: none !important;
    box-shadow: 0 2px 12px oklch(from var(--add-earth) calc(l) c h / 0.3) !important;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.wp-core-ui .button-primary:hover {
    background: oklch(from var(--add-earth) calc(l - 0.05) c h) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px oklch(from var(--add-earth) calc(l) c h / 0.4) !important;
}
.wp-core-ui .button-primary:focus {
    box-shadow: 0 0 0 3px var(--focus-ring), 0 6px 20px oklch(from var(--add-earth) calc(l) c h / 0.4) !important;
    outline: none !important;
}

/* Liens sous le formulaire */
#nav,
#backtoblog {
    text-align: center !important;
    margin: 1rem 0 !important;
    padding: 0 !important;
}
#nav a,
#backtoblog a {
    color: var(--text-muted) !important;
    font-size: 0.85rem !important;
    text-decoration: none !important;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
#nav a:hover,
#backtoblog a:hover {
    color: var(--add-earth) !important;
    background: oklch(from var(--add-earth) calc(l) c h / 0.06);
}

/* Notifications (erreur, succès, info) */
.login .message,
.login #login_error,
.login .notice {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-left-width: 3px !important;
    border-radius: 6px !important;
    padding: 0.85rem 1rem !important;
    margin-bottom: 1rem !important;
    box-shadow: var(--shadow);
}
.login #login_error {
    border-left-color: var(--add-earth) !important;
    color: var(--text) !important;
}
.login .message,
.login .notice-info {
    border-left-color: var(--add-leaf) !important;
}
.login .notice-warning {
    border-left-color: var(--add-sun) !important;
}

/* Privacy policy link */
.privacy-policy-page-link {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.8rem;
}
.privacy-policy-page-link a {
    color: var(--text-muted) !important;
    text-decoration: none;
}
.privacy-policy-page-link a:hover {
    color: var(--text) !important;
    text-decoration: underline;
}

/* Language switcher (multi-site) */
.login .language-switcher {
    text-align: center;
    margin-top: 1rem;
}
.login .language-switcher select {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.4rem 0.6rem;
}

/* Toggle dark/light flottant en haut à droite */
.oms-login-theme-toggle {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 100;
    width: 44px;
    height: 44px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text);
    transition: transform 0.2s ease, background 0.15s, color 0.15s;
}
.oms-login-theme-toggle:hover {
    transform: scale(1.1) rotate(20deg);
    color: var(--add-sun);
    background: var(--surface);
}
.oms-login-theme-toggle:focus-visible {
    outline: 2px solid var(--add-sun);
    outline-offset: 3px;
}
.oms-login-theme-toggle svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}
.oms-login-theme-toggle .icon-sun { display: none; }
.oms-login-theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .oms-login-theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .oms-login-theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .oms-login-theme-toggle .icon-sun { display: block; }
    :root[data-theme="auto"] .oms-login-theme-toggle .icon-moon { display: none; }
}

/* Petit footer informationnel sous le form */
.oms-login-footer {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-family: "Fraunces", serif;
    font-style: italic;
}

/* Mobile */
@media (max-width: 480px) {
    body.login { padding: 0.5rem; }
    #login { padding: 1rem 0 !important; }
    .oms-login-theme-toggle { top: 0.75rem; right: 0.75rem; width: 40px; height: 40px; }
}