/* =============================================
   WordPress Login & Logout Page Styles
   ============================================ */

/* Base Styles */
body.login, body.logged-out {
    background-color: var(--background-color);
    font-family: var(--font-family-base);
    display: block;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    position: relative;
    color: var(--text-color);
}

/* Login Container */
#login {
    width: 100%;
    max-width: 400px;
    padding: 0;
    margin: 40px auto 0;
    position: relative;
}

/* Logo Container */
.login h1, .logged-out h1 {
    text-align: center;
    margin: 0 0 30px !important;
    padding: 0 !important;
    height: auto;
}

/* Logo Image */
.login h1 a, .logged-out h1 a {
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 180px !important;
    height: 125px !important;
    display: block !important;
    margin: 0 auto !important;
    text-indent: -9999px !important;
    outline: none !important;
    padding: 0 !important;
}

/* Form Styling */
#loginform {
    background: var(--content-bg) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid var(--primary-color) !important;
    padding: 30px !important;
    margin: 0 auto !important;
    color: var(--text-color);
}

/* Input Fields */
.login input[type="text"],
.login input[type="password"] {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: 4px !important;
    padding: 12px 15px !important;
    font-family: var(--font-family-inputs);
    color: var(--input-text) !important;
    height: auto !important;
    margin-bottom: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus {
    border-color: var(--input-focus-border) !important;
    box-shadow: 0 0 0 2px var(--input-focus-shadow) !important;
    outline: none !important;
}

/* Submit Button */
.wp-core-ui .button-primary {
    background: var(--button-bg) !important;
    border: none !important;
    color: var(--button-text) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    padding: 12px 24px !important;
    height: auto !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    width: 100% !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    text-transform: none !important;
    display: block !important;
}

.wp-core-ui .button-primary:hover {
    background: var(--button-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Bottom Links */
.login #nav,
.login #backtoblog {
    text-align: center !important;
    margin: 20px 0 0 !important;
    padding: 0 !important;
    color: var(--light-text);
}

.login #nav a,
.login #backtoblog a {
    color: var(--primary-color) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    font-size: 14px !important;
}

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

/* Error Messages */
.login .message {
    border-left: 4px solid var(--notice-warning-border) !important;
    background: var(--notice-warning-bg) !important;
    color: var(--notice-warning-text) !important;
}

.login #login_error {
    border-left: 4px solid var(--notice-error-border) !important;
    background: var(--notice-error-bg) !important;
    color: var(--notice-error-text) !important;
}

/* Logout Page Specific */
.logged-out #login {
    margin-top: 40px;
}

.logged-out .message {
    margin-bottom: 20px !important;
    text-align: center;
    border-left: 4px solid var(--notice-success-border) !important;
    background: var(--notice-success-bg) !important;
    color: var(--notice-success-text) !important;
}

/* Responsive Adjustments */
@media (max-width: 480px) {
    #login {
        width: calc(100% - 30px);
    }
    
    .login h1 a {
        width: 150px !important;
        height: 60px !important;
    }
    
    #loginform {
        padding: 25px !important;
    }
    
    body.login, body.logged-out {
        padding: 15px;
    }
}

/* =============================================
   Dark Mode Styles
   ============================================ */
@media (prefers-color-scheme: dark) {
    body.login, body.logged-out {
        background-color: var(--background-color);
        color: var(--text-color);
    }

    #loginform {
        background: var(--content-bg) !important;
        border-color: var(--border-color) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    }

    .login input[type="text"],
    .login input[type="password"] {
        background: var(--input-bg) !important;
        border-color: var(--border-color) !important;
        color: var(--input-text) !important;
    }

    .login #nav,
    .login #backtoblog {
        color: var(--light-text);
    }

    /* Make sure links remain visible in dark mode */
    .login #nav a,
    .login #backtoblog a {
        color: var(--primary-color) !important;
    }

    /* Adjust loading spinner for dark mode */
    .login .spinner {
        border-color: rgba(255, 255, 255, 0.1);
        border-top-color: var(--loading-spinner);
    }

    /* Adjust checkbox for dark mode */
    .login input[type="checkbox"]:focus {
        border-color: var(--input-focus-border);
        box-shadow: 0 0 0 1px var(--input-focus-border);
    }
}