/**
 * RentConnect Auth Screens - Login & Password Reset Styles
 *
 * This stylesheet relies entirely on the design tokens provided by rentconnect-core
 * through the 'rentconnect-design-system' stylesheet handle.
 * Do NOT redeclare :root tokens here.
 *
 * Colors with no direct Core token equivalent (text on the dark navy
 * background, and error/success notice colors) are kept as literal hex
 * values rather than invented custom properties.
 *
 * @package RentConnect_Auth
 * @version 1.1.0
 */

/* ==========================================================================
   1. Body & Screen Container
   ========================================================================== */

body.login {
    background-color: var(--rc-primary, #0f172a);
    background-image: 
        radial-gradient(circle at 15% 15%, rgba(37, 99, 235, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 85% 85%, rgba(30, 58, 138, 0.12) 0%, transparent 45%);
    background-attachment: fixed;
    background-size: cover;
    font-family: var(--rc-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
    color: var(--rc-text-main, #1e293b);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    padding: 24px 16px;
    box-sizing: border-box;
}

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

/* ==========================================================================
   2. Brand Header & Logo
   ========================================================================== */

.login h1 {
    margin-bottom: 24px;
    text-align: center;
}

.login h1 a {
    background-image: url('../images/logo.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 220px;
    height: 48px;
    margin: 0 auto;
    display: block;
    text-indent: -9999px;
    overflow: hidden;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.login h1 a:hover,
.login h1 a:focus {
    transform: translateY(-1px);
    opacity: 0.95;
    outline: none;
    box-shadow: none;
}

/* ==========================================================================
   3. Card Container (Login, Lost Password, Reset Password)
   ========================================================================== */

.login form {
    background: var(--rc-surface, #ffffff);
    border: 1px solid var(--rc-border, #e2e8f0);
    border-radius: var(--rc-radius-lg, 14px);
    box-shadow: var(--rc-shadow-lg, 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2));
    padding: 32px 28px;
    margin-top: 0;
    font-weight: 400;
}

/* Form labels */
.login label {
    font-size: 13px;
    font-weight: 600;
    color: var(--rc-text-main, #334155);
    margin-bottom: 6px;
    display: block;
}

/* ==========================================================================
   4. Form Input Fields
   ========================================================================== */

.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
    background-color: var(--rc-background, #f8fafc);
    border: 1.5px solid var(--rc-border, #e2e8f0);
    border-radius: var(--rc-radius, 8px);
    color: var(--rc-text-main, #0f172a);
    font-size: 15px;
    padding: 10px 14px;
    height: 44px;
    box-sizing: border-box;
    width: 100%;
    margin-top: 4px;
    margin-bottom: 18px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
    background-color: var(--rc-surface, #ffffff);
    border-color: var(--rc-accent, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
    outline: none;
}

/* Remember me checkbox row */
.login .forgetmenot {
    float: none;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.login .forgetmenot label {
    font-size: 13px;
    font-weight: 500;
    color: var(--rc-text-muted, #475569);
    cursor: pointer;
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.login input[type="checkbox"] {
    border: 1.5px solid var(--rc-border, #cbd5e1);
    border-radius: 4px;
    width: 17px;
    height: 17px;
    margin: 0;
    cursor: pointer;
}

.login input[type="checkbox"]:checked {
    background-color: var(--rc-accent, #2563eb);
    border-color: var(--rc-accent, #2563eb);
}

.login input[type="checkbox"]:focus {
    border-color: var(--rc-accent, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.wp-core-ui .button-primary {
    background: var(--rc-accent, #2563eb) !important;
    border-color: var(--rc-accent, #2563eb) !important;
    color: var(--rc-surface, #ffffff) !important;
    border-radius: var(--rc-radius, 8px) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    height: 44px !important;
    line-height: 42px !important;
    padding: 0 24px !important;
    text-shadow: none !important;
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.25) !important;
    width: 100% !important;
    float: none !important;
    display: block !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease !important;
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
    /* No direct Core "hover accent" token exists; kept as a literal hex. */
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px -2px rgba(37, 99, 235, 0.35) !important;
}

.wp-core-ui .button-primary:active {
    background: #1e40af !important;
    border-color: #1e40af !important;
    transform: translateY(0);
}

.wp-core-ui .button-secondary {
    border-radius: var(--rc-radius, 8px) !important;
    height: 40px !important;
    line-height: 38px !important;
}

/* ==========================================================================
   6. Notices, Messages, and Error Banners
   ========================================================================== */

.login .message,
.login .notice,
.login .success,
.login #login_error {
    border-radius: var(--rc-radius, 8px);
    border-width: 1px;
    border-style: solid;
    padding: 14px 16px;
    margin-bottom: 20px;
    font-size: 13.5px;
    line-height: 1.5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Info notice — no direct Core equivalent, kept as literal hex */
.login .message,
.login .notice-info {
    border-color: rgba(37, 99, 235, 0.3);
    background-color: #eff6ff;
    color: #1e3a8a;
    border-left: 4px solid var(--rc-accent, #2563eb);
}

/* Error notice — no direct Core equivalent, kept as literal hex */
.login #login_error {
    border-color: rgba(239, 68, 68, 0.3);
    background-color: #fef2f2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
}

.login #login_error a {
    color: #b91c1c;
    font-weight: 600;
    text-decoration: underline;
}

/* Success notice — no direct Core equivalent, kept as literal hex */
.login .success,
.login .notice-success {
    border-color: rgba(34, 197, 94, 0.3);
    background-color: #f0fdf4;
    color: #14532d;
    border-left: 4px solid #16a34a;
}

/* ==========================================================================
   7. Navigation Links (Lost password, Back to site)
   ========================================================================== */

.login #nav,
.login #backtoblog {
    font-size: 13px;
    padding: 0 6px;
    margin: 16px 0 0;
    text-align: center;
}

/*
 * These links sit on the dark navy body background, not the white card, so
 * they need to stay light-colored. Core's --rc-text-muted is designed for
 * muted text on LIGHT surfaces and would be unreadable here, so these keep
 * literal light-slate hex values instead of a mismatched token.
 */
.login #nav a,
.login #backtoblog a {
    color: #cbd5e1 !important;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.login #nav a:hover,
.login #nav a:focus,
.login #backtoblog a:hover,
.login #backtoblog a:focus {
    color: var(--rc-surface, #ffffff) !important;
    text-decoration: underline;
}

.login #nav {
    color: #94a3b8;
}

/* Privacy policy link in footer (also on the dark background) */
.login .privacy-policy-page-link {
    text-align: center;
    margin-top: 14px;
}

.login .privacy-policy-page-link a {
    color: #94a3b8 !important;
    font-size: 12px;
}

/* ==========================================================================
   8. Password Visibility Toggle & Strength Meter
   ========================================================================== */

.login .wp-pwd {
    position: relative;
    margin-bottom: 18px;
}

.login .wp-pwd .input {
    margin-bottom: 0;
}

.login .wp-hide-pw {
    position: absolute;
    top: 5px;
    right: 6px;
    height: 34px;
    width: 34px;
    border: none;
    background: transparent;
    color: var(--rc-text-muted, #64748b);
    cursor: pointer;
    border-radius: 6px;
}

.login .wp-hide-pw:hover {
    color: var(--rc-text-main, #1e293b);
}

#pass-strength-result {
    border-radius: var(--rc-radius, 6px);
    margin-top: 8px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

/* ==========================================================================
   9. Front-End Landlord Login Card ([rentconnect_landlord_login] shortcode)
   ========================================================================== */

.rc-landlord-login-card {
    background-color: var(--rc-surface, #ffffff);
    color: var(--rc-text-main, #1e293b);
    border: 1px solid var(--rc-border, #e2e8f0);
    border-radius: var(--rc-radius-lg, 14px);
    box-shadow: var(--rc-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.08));
    padding: 32px;
    max-width: 420px;
    margin: 24px auto;
    font-family: var(--rc-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    box-sizing: border-box;
}

.rc-landlord-login-header {
    margin-bottom: 20px;
    text-align: center;
}

.rc-landlord-login-badge {
    display: inline-block;
    background-color: rgba(37, 99, 235, 0.1);
    color: var(--rc-accent, #2563eb);
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.025em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.rc-landlord-login-title {
    font-family: var(--rc-font-heading, inherit);
    font-size: 22px;
    font-weight: 700;
    color: var(--rc-text-main, #0f172a);
    margin: 0 0 8px 0;
}

.rc-landlord-login-subtitle {
    font-size: 14px;
    color: var(--rc-text-muted, #64748b);
    margin: 0;
    line-height: 1.5;
}

.rc-landlord-login-card form.login-form-rentconnect p {
    margin-bottom: 16px;
}

.rc-landlord-login-card form.login-form-rentconnect label {
    font-size: 13px;
    font-weight: 600;
    color: var(--rc-text-main, #334155);
    margin-bottom: 6px;
    display: block;
}

.rc-landlord-login-card form.login-form-rentconnect input[type="text"],
.rc-landlord-login-card form.login-form-rentconnect input[type="password"] {
    background-color: var(--rc-background, #f8fafc);
    border: 1.5px solid var(--rc-border, #e2e8f0);
    border-radius: var(--rc-radius, 8px);
    color: var(--rc-text-main, #0f172a);
    font-size: 15px;
    padding: 10px 14px;
    height: 44px;
    box-sizing: border-box;
    width: 100%;
}

.rc-landlord-login-card form.login-form-rentconnect input[type="text"]:focus,
.rc-landlord-login-card form.login-form-rentconnect input[type="password"]:focus {
    background-color: var(--rc-surface, #ffffff);
    border-color: var(--rc-accent, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
    outline: none;
}

.rc-landlord-login-card form.login-form-rentconnect input[type="submit"] {
    background: var(--rc-accent, #2563eb);
    border: none;
    color: var(--rc-surface, #ffffff);
    border-radius: var(--rc-radius, 8px);
    font-size: 15px;
    font-weight: 600;
    height: 44px;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.rc-landlord-login-card form.login-form-rentconnect input[type="submit"]:hover {
    background: #1d4ed8;
}

.rc-landlord-login-footer {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--rc-border, #e2e8f0);
    text-align: center;
    font-size: 13px;
    color: var(--rc-text-muted, #64748b);
}

.rc-landlord-login-footer a {
    color: var(--rc-accent, #2563eb);
    text-decoration: none;
    font-weight: 500;
}

.rc-landlord-login-footer a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   10. Shared plain-HTML login form fields (landlord, tenant, admin pages)
   ========================================================================== */
/*
 * Added 2026-09-30 when wp_login_form() was replaced with plain HTML forms
 * submitted via RCLogin.init() (rentconnect-login.js, rentconnect-core).
 * Deliberately NOT scoped under .rc-landlord-login-card or any one page's
 * own card wrapper class, since these same rc-login-* classes are reused
 * identically across all three login pages (landlord, tenant, admin) —
 * tenant's own card wrapper is .rc-tenant-card, a different class, so a
 * scoped selector here would silently fail to style that page.
 */

.rc-login-field {
    margin-bottom: 16px;
}

.rc-login-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--rc-text-main, #334155);
    margin-bottom: 6px;
    display: block;
}

.rc-login-field input[type="text"],
.rc-login-field input[type="password"] {
    background-color: var(--rc-background, #f8fafc);
    border: 1.5px solid var(--rc-border, #e2e8f0);
    border-radius: var(--rc-radius, 8px);
    color: var(--rc-text-main, #0f172a);
    font-size: 15px;
    padding: 10px 14px;
    height: 44px;
    box-sizing: border-box;
    width: 100%;
}

.rc-login-field input[type="text"]:focus,
.rc-login-field input[type="password"]:focus {
    background-color: var(--rc-surface, #ffffff);
    border-color: var(--rc-accent, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
    outline: none;
}

.rc-login-remember {
    margin-bottom: 20px;
}

.rc-login-remember label {
    font-size: 13px;
    font-weight: 500;
    color: var(--rc-text-muted, #475569);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rc-login-remember input[type="checkbox"] {
    border: 1.5px solid var(--rc-border, #cbd5e1);
    border-radius: 4px;
    width: 17px;
    height: 17px;
    margin: 0;
    cursor: pointer;
}

.rc-login-submit {
    margin-bottom: 0;
}

.rc-login-submit button[type="submit"] {
    background: var(--rc-accent, #2563eb);
    border: none;
    color: var(--rc-surface, #ffffff);
    border-radius: var(--rc-radius, 8px);
    font-size: 15px;
    font-weight: 600;
    height: 44px;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.rc-login-submit button[type="submit"]:hover {
    background: #1d4ed8;
}

.rc-login-submit button[type="submit"]:disabled {
    opacity: 0.7;
    cursor: default;
}