/**
 * Operativa ERP - Custom Login Page
 * Matchar systemets design med samma färger och typografi
 */

/* Bakgrund */
body.login {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Logo/Header */
.login h1 a {
    background-image: url('../images/logo-white.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 280px;
    height: 80px;
    margin-bottom: 20px;
    /* Fallback om ingen logo finns */
    text-indent: 0;
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: -0.5px;
}

/* Om ingen logo-bild finns, visa text */
.login h1 a:empty::after {
    content: 'Operativa ERP';
}

/* Login-formulär container */
.login form {
    background: #ffffff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    padding: 32px 40px;
    margin-top: 0;
}

#loginform {
    margin: 0;
}

/* Wrapper */
#login {
    width: 100%;
    max-width: 400px;
    padding: 20px;
}

/* Labels */
.login form .input,
.login input[type="text"],
.login input[type="password"] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 15px;
    color: #1e293b;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

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

.login label {
    color: #475569;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    display: block;
}

/* Inloggningsknapp */
.login .button-primary,
#wp-submit {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    height: auto;
    text-shadow: none;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.login .button-primary:hover,
#wp-submit:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
    transform: translateY(-1px);
}

.login .button-primary:focus,
#wp-submit:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3), 0 4px 12px rgba(37, 99, 235, 0.3);
    outline: none;
}

.login .button-primary:active,
#wp-submit:active {
    transform: translateY(0);
}

/* "Kom ihåg mig" checkbox */
.login .forgetmenot {
    margin-top: 16px;
}

.login .forgetmenot label {
    color: #64748b;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.login input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
    margin: 0;
}

.login input[type="checkbox"]:checked {
    background-color: #2563eb;
    border-color: #2563eb;
}

/* Submit-rad */
.login .submit {
    margin-top: 24px;
}

/* Felmeddelanden */
.login #login_error,
.login .message,
.login .success {
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 14px;
    border-left-width: 4px;
}

.login #login_error {
    background: #fef2f2;
    border-color: #ef4444;
    color: #991b1b;
}

.login .message {
    background: #f0f9ff;
    border-color: #2563eb;
    color: #1e40af;
}

.login .success {
    background: #f0fdf4;
    border-color: #22c55e;
    color: #166534;
}

/* Länkar under formuläret */
.login #nav,
.login #backtoblog {
    text-align: center;
    margin-top: 20px;
}

.login #nav a,
.login #backtoblog a {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.login #nav a:hover,
.login #backtoblog a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Dölj "Tillbaka till site" om vi vill */
/* .login #backtoblog { display: none; } */

/* Privacy policy länk */
.login .privacy-policy-page-link {
    text-align: center;
    margin-top: 16px;
}

.login .privacy-policy-page-link a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

/* Language switcher (WP 5.9+) — dold i v1.
   Operativa är intern och körs på svenska; WP:s standard-väljare matchar
   inte designen. Formuläret finns kvar i HTML men döljs via CSS. */
.login .language-switcher,
.login #language-switcher,
.login .wp-language-switcher,
.login .language-switcher-locales,
.login form#language-switcher,
.login p.language-switcher {
    display: none !important;
}

/* Password visibility toggle */
.login .wp-pwd {
    position: relative;
}

.login .wp-pwd .button.wp-hide-pw {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #64748b;
    padding: 4px 8px;
    cursor: pointer;
}

.login .wp-pwd .button.wp-hide-pw:hover {
    color: #2563eb;
}

/* Remove WordPress branding */
.login #login_error a,
.login .message a {
    color: #2563eb;
}

/* Responsive */
@media screen and (max-width: 480px) {
    #login {
        padding: 16px;
    }

    .login form {
        padding: 24px;
    }

    .login h1 a {
        width: 200px;
        height: 60px;
        font-size: 24px;
    }
}

/* Dark mode support (matches system) */
@media (prefers-color-scheme: dark) {
    .login form {
        background: #1e293b;
    }

    .login form .input,
    .login input[type="text"],
    .login input[type="password"] {
        background: #0f172a;
        border-color: #374151;
        color: #f1f5f9;
    }

    .login form .input:focus,
    .login input[type="text"]:focus,
    .login input[type="password"]:focus {
        background: #111827;
        border-color: #3b82f6;
    }

    .login label {
        color: #94a3b8;
    }

    .login .forgetmenot label {
        color: #94a3b8;
    }

    .login input[type="checkbox"] {
        border-color: #4b5563;
        background: #0f172a;
    }

    .login #login_error {
        background: rgba(239, 68, 68, 0.1);
        color: #fca5a5;
    }

    .login .message {
        background: rgba(59, 130, 246, 0.1);
        color: #93c5fd;
    }
}