/* =============================================================================
   WP ERP Admin Theme – Login page  (Aquila-inspired dark design)
   Applied to body.login only.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

:root {
    --erp-primary:    #1a73e8;   /* overridden by inline style from PHP */
    --erp-on-primary: #ffffff;
    --login-bg:       #1a1a2e;   /* full-page dark navy background */
    --login-on-bg:    #ffffff;   /* primary text on dark background */
    --login-error:    #ff8a80;   /* error message text */
}

/* ── Full-page layout ─────────────────────────────────────────────────────── */
body.login {
    font-family: 'Google Sans', Roboto, sans-serif !important;
    background:  var(--login-bg) !important;
    color:       var(--login-on-bg);
    margin:      0;
    padding:     0;
    min-height:  100vh;
    display:     flex;
    align-items: center;
    justify-content: center;
    position:    relative;
    overflow:    hidden;
}

/* Decorative background glow circles */
body.login::before,
body.login::after {
    content:       '';
    position:      absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index:       0;
}

body.login::before {
    width:      600px;
    height:     600px;
    top:        -200px;
    right:      -150px;
    background: radial-gradient(circle, color-mix(in srgb, var(--erp-primary) 20%, transparent) 0%, transparent 70%);
}

body.login::after {
    width:      500px;
    height:     500px;
    bottom:     -150px;
    left:       -100px;
    background: radial-gradient(circle, color-mix(in srgb, var(--erp-secondary, #34a853) 12%, transparent) 0%, transparent 70%);
}

/* ── Login container ──────────────────────────────────────────────────────── */
body.login #login {
    width:     100% !important;
    max-width: 400px;
    padding:   0 20px;
    position:  relative;
    z-index:   1;
    top:       auto      !important;
    transform: none      !important;
}

/* ── Logo / branding ──────────────────────────────────────────────────────── */
body.login #login h1 {
    text-align:    center;
    margin-bottom: 24px;
}

body.login #login h1 a {
    background-image: none       !important;
    display:          flex       !important;
    align-items:      center;
    justify-content:  center;
    width:            72px       !important;
    height:           72px       !important;
    border-radius:    50%;
    background:       var(--erp-primary) !important;
    margin:           0 auto 8px;
    font-size:        36px;
    line-height:      1;
    text-decoration:  none;
    box-shadow:       0 4px 20px color-mix(in srgb, var(--erp-primary) 50%, transparent);
    transition:       box-shadow .2s;
}

body.login #login h1 a::before {
    content:   '⚡';
    font-size: 34px;
}

body.login #login h1 a span { display: none; }

body.login #login h1 a:hover {
    box-shadow: 0 6px 28px color-mix(in srgb, var(--erp-primary) 60%, transparent);
}

/* ── Login form card ──────────────────────────────────────────────────────── */
body.login #login #loginform,
body.login #login #lostpasswordform,
body.login #login #registerform {
    background:      rgba(255,255,255,0.06) !important;
    border:          1px solid rgba(255,255,255,0.12) !important;
    border-radius:   20px !important;
    box-shadow:      0 8px 32px rgba(0,0,0,0.40) !important;
    padding:         32px 36px !important;
    backdrop-filter: blur(12px);
}

body.login #login #loginform::before {
    content:       'Sign in';
    display:       block;
    font-size:     22px;
    font-weight:   600;
    color:         var(--login-on-bg);
    text-align:    center;
    margin-bottom: 24px;
}

body.login #login #lostpasswordform::before {
    content:       'Reset Password';
    display:       block;
    font-size:     22px;
    font-weight:   600;
    color:         var(--login-on-bg);
    text-align:    center;
    margin-bottom: 24px;
}

/* ── Labels ───────────────────────────────────────────────────────────────── */
body.login #login label {
    font-size:      12px   !important;
    font-weight:    600    !important;
    color:          rgba(255,255,255,0.60) !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom:  4px;
    display:        block;
}

/* ── Inputs ───────────────────────────────────────────────────────────────── */
body.login #login input[type="text"],
body.login #login input[type="password"],
body.login #login input[type="email"],
body.login #login input.input {
    background:    rgba(255,255,255,0.08) !important;
    border:        1px solid rgba(255,255,255,0.20) !important;
    border-radius: 10px     !important;
    color:         var(--login-on-bg)  !important;
    font-family:   'Google Sans', Roboto, sans-serif !important;
    font-size:     15px     !important;
    padding:       12px 16px !important;
    width:         100%     !important;
    height:        auto     !important;
    margin:        0 0 16px !important;
    box-shadow:    none     !important;
    transition:    border-color .2s, box-shadow .2s !important;
    outline:       none;
}

body.login #login input[type="text"]:focus,
body.login #login input[type="password"]:focus,
body.login #login input[type="email"]:focus,
body.login #login input.input:focus {
    border-color: var(--erp-primary) !important;
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--erp-primary) 30%, transparent) !important;
    background:   rgba(255,255,255,0.12) !important;
}

body.login #login input::placeholder { color: rgba(255,255,255,0.30); }

/* ── Remember me ──────────────────────────────────────────────────────────── */
body.login #login .forgetmenot {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin:      4px 0 20px;
}

body.login #login .forgetmenot label {
    font-size:      13px   !important;
    color:          rgba(255,255,255,0.65) !important;
    text-transform: none   !important;
    letter-spacing: normal !important;
    font-weight:    400    !important;
    margin:         0      !important;
    cursor:         pointer;
}

body.login #login .forgetmenot input[type="checkbox"] {
    accent-color: var(--erp-primary);
    width:  16px;
    height: 16px;
    cursor: pointer;
}

/* ── Submit button ────────────────────────────────────────────────────────── */
body.login #login #wp-submit,
body.login #login input[type="submit"] {
    background:     var(--erp-primary) !important;
    color:          var(--login-on-bg) !important;
    border:         none    !important;
    border-radius:  28px    !important;
    width:          100%    !important;
    padding:        14px 0  !important;
    font-family:    'Google Sans', Roboto, sans-serif !important;
    font-size:      15px    !important;
    font-weight:    600     !important;
    letter-spacing: .04em   !important;
    text-transform: uppercase !important;
    cursor:         pointer  !important;
    height:         auto     !important;
    margin:         0        !important;
    box-shadow:     0 4px 16px color-mix(in srgb, var(--erp-primary) 45%, transparent) !important;
    transition:     box-shadow .2s, transform .1s !important;
    text-shadow:    none !important;
}

body.login #login #wp-submit:hover,
body.login #login input[type="submit"]:hover {
    box-shadow: 0 6px 24px color-mix(in srgb, var(--erp-primary) 55%, transparent) !important;
    transform:  translateY(-1px);
}

body.login #login #wp-submit:active,
body.login #login input[type="submit"]:active {
    transform:  translateY(0);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--erp-primary) 35%, transparent) !important;
}

/* ── Password visibility toggle ──────────────────────────────────────────── */
body.login #login .wp-pwd .button {
    background: transparent !important;
    border:     none        !important;
    color:      rgba(255,255,255,0.50) !important;
    width:      auto        !important;
    padding:    0 8px       !important;
    box-shadow: none        !important;
}

body.login #login .wp-pwd .button:hover {
    color:     var(--login-on-bg) !important;
    transform: none;
}

/* ── Nav links ────────────────────────────────────────────────────────────── */
body.login #nav,
body.login #backtoblog {
    text-align: center;
    padding:    10px 0;
    margin:     0 !important;
}

body.login #nav a,
body.login #backtoblog a {
    color:           rgba(255,255,255,0.55) !important;
    font-size:       13px;
    text-decoration: none !important;
    transition:      color .2s;
}

body.login #nav a:hover,
body.login #backtoblog a:hover {
    color: var(--login-on-bg) !important;
}

/* ── Errors / messages ────────────────────────────────────────────────────── */
body.login #login #login_error {
    background:    rgba(234,67,53,0.15) !important;
    border:        1px solid rgba(234,67,53,0.40) !important;
    border-radius: 10px !important;
    box-shadow:    none !important;
    color:         var(--login-error) !important;
    font-size:     13px;
    margin:        0 0 16px !important;
    padding:       12px 16px !important;
}

body.login #login .message {
    background:    rgba(26,115,232,0.12) !important;
    border:        1px solid rgba(26,115,232,0.30) !important;
    border-radius: 10px !important;
    box-shadow:    none !important;
    color:         rgba(255,255,255,0.80) !important;
    font-size:     13px;
    margin:        0 0 16px !important;
    padding:       12px 16px !important;
}

/* ── Scrollbar ────────────────────────────────────────────────────────────── */
body.login ::-webkit-scrollbar        { width: 8px; }
body.login ::-webkit-scrollbar-track  { background: var(--login-bg); }
body.login ::-webkit-scrollbar-thumb  { background: rgba(255,255,255,0.20); border-radius: 4px; }
body.login ::-webkit-scrollbar-thumb:hover { background: var(--erp-primary); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media screen and (max-width: 500px) {
    body.login #login { padding: 0 12px; }
    body.login #login #loginform,
    body.login #login #lostpasswordform { padding: 24px 20px !important; }
}