/* =============================================================================
   WEC Platform — authentication pages skin.
   Layered on top of Authenticator/style.css to bring the login / account pages
   in line with the platform look. Pure restyle: no markup changes.
   ============================================================================= */

:root {
    --auth-primary:#2563eb; --auth-primary-hover:#1d4ed8;
    --auth-bg:#eef3f7; --auth-surface:#ffffff;
    --auth-border:#e2e8f0; --auth-border-strong:#cbd5e1;
    --auth-text:#0f172a; --auth-muted:#64748b;
    --auth-radius:16px; --auth-radius-sm:10px;
    --auth-shadow:0 16px 40px rgba(15,23,42,.14);
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

body {
    margin:0;
    min-height:100vh;
    display:flex; align-items:center; justify-content:center;
    padding:24px;
    background:
        radial-gradient(1200px 500px at 80% -10%, rgba(37,99,235,.10), transparent),
        var(--auth-bg) !important;
    font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif !important;
    color:var(--auth-text);
}

/* Card */
.formWrapper {
    position:relative;
    width:100%; max-width:420px;
    min-height:0 !important; height:auto !important;
    display:block !important;
    margin:0 !important;
    background:var(--auth-surface) !important;
    border:1px solid var(--auth-border);
    border-radius:var(--auth-radius);
    box-shadow:var(--auth-shadow);
    padding:32px 28px !important;
    overflow:hidden;
}
/* brand accent strip */
.formWrapper::before {
    content:""; position:absolute; left:0; right:0; top:0; height:4px;
    background:linear-gradient(90deg,#2563eb,#16a34a);
}

.formWrapper form { width:100%; }

.formWrapper h1 {
    margin:6px 0 20px;
    font-size:1.6rem; font-weight:800; color:var(--auth-text);
    text-align:left;
}

.inputblock { margin-bottom:16px; text-align:left; }
.inputblock label {
    display:block; margin-bottom:6px;
    font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
    color:var(--auth-muted);
}
.inputblock input,
.formWrapper input[type=text],
.formWrapper input[type=email],
.formWrapper input[type=password] {
    width:100%; box-sizing:border-box;
    padding:11px 13px;
    font-size:.95rem; font-family:inherit;
    color:var(--auth-text); background:var(--auth-surface);
    border:1px solid var(--auth-border-strong); border-radius:var(--auth-radius-sm);
    transition:border-color .18s ease, box-shadow .18s ease;
}
.inputblock input:focus,
.formWrapper input:focus {
    outline:none; border-color:var(--auth-primary);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--auth-primary) 28%,transparent);
}

.formWrapper .btn,
.formWrapper button[type=submit] {
    display:inline-flex; align-items:center; justify-content:center;
    min-height:44px; padding:11px 20px; width:100%;
    border:0; border-radius:var(--auth-radius-sm);
    background:var(--auth-primary) !important; color:#fff !important;
    font-family:inherit; font-weight:800; font-size:.95rem; cursor:pointer;
    transition:filter .18s ease;
}
.formWrapper .btn:hover,
.formWrapper button[type=submit]:hover { filter:brightness(.95); }

.errorcontainer:not(:empty) {
    margin-bottom:14px; padding:10px 12px;
    background:#fef2f2; color:#dc2626;
    border:1px solid #fecaca; border-radius:var(--auth-radius-sm);
    font-size:.85rem; text-align:left;
}

/* Drop the decorative waves — the card is self-contained now. */
.formWrapper .wave { display:none !important; }

/* Secondary links (e.g. forgot password / register) */
.formWrapper a { color:var(--auth-primary); font-weight:700; text-decoration:none; }
.formWrapper a:hover { text-decoration:underline; }