/**
 * BSERI — Canonical login page styles.
 *
 * Single source of truth for the design of every login screen across
 * the main site, the blog admin, the trainer portal and the four
 * quiz admin terminals. Per BRAND-GUIDELINES.md §7.1 ("canonical values
 * live in assets/css/"), no login page should carry its own duplicate
 * <style> block for layout — only its page-specific copy.
 *
 * Selectors use a BEM-prefixed namespace (`bseri-login`, `bseri-login__*`)
 * so they never collide with the legacy `.login-container` / `.form-control`
 * rules in sub-property stylesheets (BVQ, ISACA, Quiz-Managment-System,
 * wipro).
 *
 * Token contract:
 *   - All colors via var(--color-*) defined in bseri-colors.css
 *   - All fonts via var(--font-family-*) defined in bseri-fonts.css
 *   - Pages SHOULD include components/bseri-tokens-fallback.php so tokens
 *     remain defined even if the external token CSS fails to load.
 *
 * Variants:
 *   .bseri-login--admin     → master-admin terminals (BVQ / ISACA / QMS /
 *                              wipro): darker top accent, more austere tone.
 *
 * Brand references mapped to rules:
 *   §2.1 Primary blue            → .bseri-login__btn, top accent
 *   §2.6 Surfaces & borders      → card border, input border
 *   §3.2 Type scale              → heading 22–26px Montserrat 700
 *   §4.1 Primary CTA             → button spec (bg, hover, focus ring)
 *   §4.5 Form field              → label / input / focus border
 *   §5   Accessibility           → visible labels, 3px focus ring, color+icon
 */

/* ─── Body wrapper ──────────────────────────────────────────────────────── */
body.bseri-login-page {
    font-family: var(--font-family-body, "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    color: var(--color-text, #0f172a);
    background-color: var(--color-bg-muted, #eef1f8);
    background-image:
        radial-gradient(ellipse 60% 50% at 0% 0%, rgba(28, 68, 132, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse 70% 60% at 100% 100%, rgba(195, 203, 228, 0.55) 0%, transparent 60%);
    background-attachment: fixed;
    margin: 0;
    padding: 24px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── Layout ───────────────────────────────────────────────────────────── */
.bseri-login {
    width: 100%;
    max-width: 420px;
}

.bseri-login__card {
    position: relative;
    background-color: var(--color-bg, #ffffff);
    border: 1px solid var(--color-border, #c3cbe4);
    border-radius: 14px;
    box-shadow:
        0 12px 40px rgba(28, 68, 132, 0.10),
        0 2px 6px rgba(28, 68, 132, 0.05);
    padding: 36px 36px 28px;
    overflow: hidden;
    animation: bseri-login-slide-up 0.4s ease-out;
}

.bseri-login__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--color-primary, #1c4484) 0%,
        var(--color-primary-light, #5363d6) 100%
    );
}

@keyframes bseri-login-slide-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes bseri-login-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ─── Header (logo + title + subtitle) ─────────────────────────────────── */
.bseri-login__header {
    text-align: center;
    margin-bottom: 24px;
}

.bseri-login__logo {
    width: 120px;
    height: auto;
    margin-bottom: 18px;
}

.bseri-login__logo--mark {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background-color: var(--color-primary, #1c4484);
    color: var(--color-text-inverse, #ffffff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 30px;
    line-height: 1;
}

.bseri-login__title {
    font-family: var(--font-family-sans, "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text-heading, #1e293b);
    letter-spacing: -0.01em;
    margin: 0 0 4px;
}

.bseri-login__subtitle {
    font-family: var(--font-family-body, "Fira Sans", sans-serif);
    color: var(--color-text-muted, #64748b);
    font-size: 13.5px;
    font-weight: 400;
    margin: 0;
}

/* ─── Alerts (success / error) ─────────────────────────────────────────── */
.bseri-login__alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-family: var(--font-family-body, "Fira Sans", sans-serif);
    font-size: 13px;
    line-height: 1.45;
    animation: bseri-login-fade-in 0.2s ease-out;
}

.bseri-login__alert .bi {
    font-size: 16px;
    flex-shrink: 0;
    line-height: 1.3;
}

.bseri-login__alert--success {
    background-color: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.bseri-login__alert--error {
    background-color: #fef2f2;
    color: #7f1d1d;
    border: 1px solid #fecaca;
}

/* ─── Form ─────────────────────────────────────────────────────────────── */
.bseri-login__form {
    margin-bottom: 22px;
}

.bseri-login__field {
    margin-bottom: 14px;
}

.bseri-login__label {
    display: block;
    font-family: var(--font-family-body, "Fira Sans", sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-heading, #1e293b);
    margin-bottom: 6px;
}

.bseri-login__input-wrap {
    position: relative;
}

.bseri-login__input-wrap input {
    width: 100%;
    padding: 11px 14px 11px 42px;
    border: 1.5px solid var(--color-border, #c3cbe4);
    border-radius: 8px;
    font-family: var(--font-family-body, "Fira Sans", sans-serif);
    font-size: 14px;
    background-color: var(--color-bg, #ffffff);
    color: var(--color-text, #0f172a);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

/* When no icon is used, restore standard left padding */
.bseri-login__input-wrap--plain input {
    padding-left: 14px;
}

.bseri-login__input-wrap input::placeholder {
    color: var(--color-text-subtle, #94a3b8);
}

.bseri-login__input-wrap input:hover {
    border-color: var(--color-border-dark, #9aaad3);
}

.bseri-login__input-wrap input:focus {
    outline: none;
    border-color: var(--color-primary, #1c4484);
    box-shadow: 0 0 0 3px rgba(28, 68, 132, 0.14);
}

.bseri-login__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-subtle, #94a3b8);
    font-size: 16px;
    line-height: 1;
    pointer-events: none;
}

/* ─── Submit button (BRAND-GUIDELINES §4.1 primary CTA) ───────────────── */
.bseri-login__btn {
    width: 100%;
    padding: 13px 16px;
    margin-top: 6px;
    background-color: var(--color-primary, #1c4484);
    color: #ffffff;
    border: 1px solid var(--color-primary, #1c4484);
    border-radius: 8px;
    font-family: var(--font-family-sans, "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.bseri-login__btn:hover {
    background-color: var(--color-primary-hover, #163666);
    border-color: var(--color-primary-hover, #163666);
}

.bseri-login__btn:active {
    transform: translateY(1px);
}

.bseri-login__btn:focus-visible {
    outline: 3px solid var(--color-primary-lighter, #6fb6e4);
    outline-offset: 2px;
}

/* ─── Footer ───────────────────────────────────────────────────────────── */
.bseri-login__footer {
    text-align: center;
    padding-top: 20px;
    margin-top: 4px;
    border-top: 1px solid var(--color-border, #c3cbe4);
}

.bseri-login__footer p {
    margin: 0;
    color: var(--color-text-muted, #64748b);
    font-family: var(--font-family-body, "Fira Sans", sans-serif);
    font-size: 12px;
    line-height: 1.5;
}

/* ─── Master-admin variant (BVQ / ISACA / QMS / wipro terminals) ──────── */
/*
 * These pages are deliberately more austere than the user-facing login.
 * The top accent uses --color-primary-dark, the heading sits in primary
 * blue (not the softer text-heading slate), and the card carries a faint
 * "Master Administration" eyebrow when set in markup. The blue button is
 * unchanged — replacing the off-brand hardcoded #333 grey button that
 * older versions of these pages used.
 */
.bseri-login__card--admin::before {
    background: linear-gradient(
        90deg,
        var(--color-primary-dark, #112a4f) 0%,
        var(--color-primary, #1c4484) 100%
    );
    height: 5px;
}

.bseri-login__eyebrow {
    display: block;
    font-family: var(--font-family-sans, "Montserrat", sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary, #1c4484);
    margin-bottom: 8px;
}

/* ─── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    body.bseri-login-page { padding: 16px; }
    .bseri-login__card { padding: 28px 22px 22px; }
    .bseri-login__title { font-size: 20px; }
    .bseri-login__logo { width: 100px; margin-bottom: 14px; }
    .bseri-login__logo--mark { width: 56px; height: 56px; font-size: 26px; }
}