/*
 * Doxsona Admin Theme — login-theme.css
 * Applies the Doxsona HCP Engagement Tracker identity to the WordPress login page.
 * All values flow from --doxsona-* CSS variables set by the plugin.
 *
 * v1.1 — QA pass fixes:
 *   F1  Brand header unified into the form card (one visual unit)
 *   F2  Login block vertically centered in viewport
 *   F3  Container widened from WP default 320px → 420px
 *   F4  Browser autofill background override
 *   F5  Subtitle text wrapping fixed
 */

/* ── Page — flex column, vertically centered ────────────────────────────── */

body.login {
    background:      var(--doxsona-bg-page) !important;
    font-family:     var(--doxsona-font) !important;
    display:         flex !important;
    flex-direction:  column !important;
    align-items:     center !important;
    justify-content: center !important;
    min-height:      100vh !important;
    padding:         24px !important;
    box-sizing:      border-box !important;
    margin:          0 !important;
}

/* ── Login container — F3: widen, remove default padding ───────────────── */

body.login #login {
    width:     100% !important;
    max-width: 420px !important;
    padding:   0 !important;
    margin:    0 auto !important;
}

/* Hide the default WP h1/logo element — our brand header replaces it */
body.login #login h1 {
    display: none !important;
}

/* ── Brand header — F1: top half of the unified card ───────────────────── */

body.login .login-brand-header {
    background:    var(--doxsona-bg-surface) !important;
    border:        1px solid var(--doxsona-border) !important;
    border-bottom: 1px solid var(--doxsona-border-light) !important;
    border-radius: 12px 12px 0 0 !important;
    box-shadow:    0 2px 12px rgba(15,23,42,0.08) !important;
    text-align:    center !important;
    padding:       28px 28px 22px !important;
    margin-bottom: 0 !important;
}

/* ── Form — F1: bottom half of the unified card ─────────────────────────── */

body.login #loginform,
body.login #lostpasswordform,
body.login #registerform {
    background:    var(--doxsona-bg-surface) !important;
    border:        1px solid var(--doxsona-border) !important;
    border-radius: 12px !important;
    box-shadow:    0 2px 12px rgba(15,23,42,0.08) !important;
    padding:       24px 28px 28px !important;
    margin-top:    0 !important;
}

/*
 * When our brand header is present (it's always directly before the form),
 * strip the top border + radius so both blocks merge into one card.
 * The ~ combinator matches any following sibling, so it works even if the
 * hidden h1 sits between .login-brand-header and the form.
 */
body.login .login-brand-header ~ #loginform,
body.login .login-brand-header ~ #lostpasswordform,
body.login .login-brand-header ~ #registerform {
    border-top:    none !important;
    border-radius: 0 0 12px 12px !important;
}

/* ── Labels ─────────────────────────────────────────────────────────────── */

body.login label {
    font-family: var(--doxsona-font) !important;
    font-size:   14px !important;
    font-weight: 500 !important;
    color:       var(--doxsona-text-primary) !important;
}

/* ── Inputs ─────────────────────────────────────────────────────────────── */

body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
    font-family:   var(--doxsona-font) !important;
    font-size:     14px !important;
    color:         var(--doxsona-text-primary) !important;
    border:        1px solid var(--doxsona-border) !important;
    border-radius: 7px !important;
    background:    var(--doxsona-bg-page) !important;
    padding:       10px 12px !important;
    width:         100% !important;
    box-shadow:    none !important;
    transition:    border-color 0.15s, box-shadow 0.15s !important;
    box-sizing:    border-box !important;
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus {
    border-color: var(--doxsona-primary) !important;
    box-shadow:   0 0 0 2px var(--doxsona-focus-ring) !important;
    outline:      none !important;
    background:   var(--doxsona-bg-surface) !important;
}

/* F4 — Override browser autofill background (blue tint) ─────────────────── */

body.login input[type="text"]:-webkit-autofill,
body.login input[type="password"]:-webkit-autofill,
body.login input[type="email"]:-webkit-autofill {
    -webkit-box-shadow:      0 0 0 1000px var(--doxsona-bg-page) inset !important;
    -webkit-text-fill-color: var(--doxsona-text-primary) !important;
    transition:              background-color 5000s ease-in-out 0s !important;
}

body.login input[type="text"]:-webkit-autofill:focus,
body.login input[type="password"]:-webkit-autofill:focus,
body.login input[type="email"]:-webkit-autofill:focus {
    -webkit-box-shadow:      0 0 0 1000px var(--doxsona-bg-surface) inset,
                             0 0 0 2px var(--doxsona-focus-ring) !important;
    -webkit-text-fill-color: var(--doxsona-text-primary) !important;
}

/* ── Submit button ──────────────────────────────────────────────────────── */

body.login .button-primary,
body.login input[type="submit"] {
    background:    var(--doxsona-primary) !important;
    border-color:  var(--doxsona-primary) !important;
    color:         #fff !important;
    font-family:   var(--doxsona-font) !important;
    font-size:     14px !important;
    font-weight:   600 !important;
    border-radius: 8px !important;
    padding:       10px 0 !important;
    width:         100% !important;
    height:        auto !important;
    text-shadow:   none !important;
    box-shadow:    none !important;
    transition:    background 0.15s, border-color 0.15s !important;
}

body.login .button-primary:hover,
body.login input[type="submit"]:hover {
    background:   var(--doxsona-primary-hover) !important;
    border-color: var(--doxsona-primary-hover) !important;
}

body.login .button-primary:focus,
body.login input[type="submit"]:focus {
    box-shadow: 0 0 0 2px var(--doxsona-focus-ring) !important;
}

/* ── "Back to site" and "Lost password" links ───────────────────────────── */

body.login #nav,
body.login #backtoblog {
    margin-top: 16px !important;
}

body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a {
    font-family:     var(--doxsona-font) !important;
    font-size:       13px !important;
    color:           var(--doxsona-text-secondary) !important;
    text-decoration: none !important;
    transition:      color 0.15s !important;
}

body.login #nav a:hover,
body.login #backtoblog a:hover {
    color:           var(--doxsona-primary) !important;
    text-decoration: underline !important;
}

/* ── "Remember me" checkbox ─────────────────────────────────────────────── */

body.login #rememberme {
    accent-color: var(--doxsona-primary) !important;
}

body.login .forgetmenot label {
    font-size:   13px !important;
    color:       var(--doxsona-text-secondary) !important;
    font-weight: 400 !important;
}

/* ── Login error message ────────────────────────────────────────────────── */

body.login #login_error {
    border-left:   4px solid var(--doxsona-error) !important;
    background:    var(--doxsona-error-bg) !important;
    border-radius: 6px !important;
    font-family:   var(--doxsona-font) !important;
    font-size:     13px !important;
    color:         var(--doxsona-pill-red-fg, #a82d22) !important;
    padding:       10px 14px !important;
    margin-bottom: 12px !important;
}

body.login #login_error a {
    color: var(--doxsona-error) !important;
}

/* ── Login message (success / info) ────────────────────────────────────── */

body.login .message,
body.login .success {
    border-left:   4px solid var(--doxsona-success) !important;
    background:    var(--doxsona-success-bg) !important;
    border-radius: 6px !important;
    font-family:   var(--doxsona-font) !important;
    font-size:     13px !important;
    color:         var(--doxsona-pill-green-fg, #0a6c47) !important;
    padding:       10px 14px !important;
    margin-bottom: 12px !important;
}

/*
 * When a notice/message appears BETWEEN .login-brand-header and #loginform
 * (e.g. "You are now logged out."), it breaks the unified card visual.
 * Strip its own card styling and merge it seamlessly into the card flow.
 */
body.login .login-brand-header ~ .message,
body.login .login-brand-header ~ .success {
    border-left:   4px solid var(--doxsona-success) !important;
    border-right:  1px solid var(--doxsona-border) !important;
    border-top:    none !important;
    border-bottom: 1px solid var(--doxsona-border-light) !important;
    border-radius: 0 !important;
    margin:        0 !important;
    padding:       10px 28px !important;
    background:    var(--doxsona-success-bg) !important;
    color:         var(--doxsona-pill-green-fg, #0a6c47) !important;
    box-shadow:    0 2px 12px rgba(15,23,42,0.08) !important;
}

/* ── Custom branding header elements ────────────────────────────────────── */

body.login .login-brand-row {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             10px !important;
    margin-bottom:   8px !important;
}

body.login .login-brand-row img {
    height: 32px !important;
    width:  auto !important;
}

body.login .login-brand-badge {
    background:    var(--doxsona-success-bg) !important;
    color:         var(--doxsona-pill-green-fg, #0a6c47) !important;
    border:        1px solid var(--doxsona-primary) !important;
    font-family:   var(--doxsona-font) !important;
    font-size:     12px !important;
    font-weight:   600 !important;
    padding:       4px 10px !important;
    border-radius: 6px !important;
    white-space:   nowrap !important;
}

/* F5 — Fix subtitle text truncation ────────────────────────────────────── */

body.login .login-brand-subtitle {
    font-family: var(--doxsona-font) !important;
    font-size:   12px !important;
    color:       var(--doxsona-text-muted) !important;
    margin:      6px 0 0 !important;
    white-space: normal !important;
    word-break:  break-word !important;
    line-height: 1.4 !important;
}

/* ── Privacy policy link ────────────────────────────────────────────────── */

body.login .privacy-policy-page-link {
    font-family: var(--doxsona-font) !important;
    font-size:   12px !important;
    color:       var(--doxsona-text-muted) !important;
    margin-top:  12px !important;
    text-align:  center !important;
}