/* Login page (/account/login) — "Grand Lobby" art direction.
   Background (canvas CSS): navy base, warm lamp-light glow behind the card, thin art-deco lattice; vignette on
   the wrapper. Card: dark frosted glass with a champagne hairline, serif greeting, uppercase eyebrow.
   Form controls live in login-form-controls.css; the submit/success overlay in login-overlay.css.
   Linked globally from _Index.cshtml, so EVERY rule is scoped under .eims-login* to stay inert elsewhere. */
/* ---------- Full-viewport background (canvas drawn by login-background-engine.js on top of these layers).
   The warm "bokeh" glows are static CSS gradients on purpose: painted once, zero per-frame GPU cost. ---------- */
.eims-login-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: #10244A;
    background-image:
        radial-gradient(1000px 680px at 50% 18%, rgba(201, 169, 97, 0.32), rgba(201, 169, 97, 0) 62%),  /* lobby lamp glow */
        radial-gradient(180px 180px at 12% 18%, rgba(255, 222, 160, 0.14), transparent 70%),             /* static bokeh */
        radial-gradient(260px 260px at 88% 12%, rgba(255, 222, 160, 0.10), transparent 70%),
        radial-gradient(120px 120px at 80% 84%, rgba(255, 222, 160, 0.12), transparent 70%),
        radial-gradient(90px 90px at 22% 66%, rgba(255, 222, 160, 0.10), transparent 70%),
        radial-gradient(60px 60px at 40% 90%, rgba(255, 222, 160, 0.16), transparent 70%),
        repeating-linear-gradient(45deg, rgba(201, 169, 97, 0.09) 0 1px, transparent 1px 72px),        /* art-deco lattice */
        repeating-linear-gradient(-45deg, rgba(201, 169, 97, 0.09) 0 1px, transparent 1px 72px),
        radial-gradient(1200px 800px at 50% 110%, #1A3870, #10244A 70%);
}

/* ---------- Page wrapper: centers the card, owns the palette tokens, adds the vignette ---------- */
.eims-login {
    --eims-red: #ED1C24;
    --eims-red-dark: #C8161D;
    --eims-navy: #10244A;
    --eims-gold: #C9A961;
    --eims-gold-soft: rgba(201, 169, 97, 0.35);
    --eims-ink: #ffffff;
    --eims-ink-muted: rgba(255, 255, 255, 0.6);
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    color: var(--eims-ink);
}

.eims-login::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, transparent 45%, rgba(0, 0, 0, 0.38));
}

/* ---------- Card: dark frosted glass ---------- */
.eims-login-card {
    position: relative;
    z-index: 1;
    width: 440px;
    max-width: 100%;
    padding: 44px 44px 36px;
    border-radius: 18px;
    box-sizing: border-box;
    background: rgba(18, 38, 80, 0.5);
    /* 8px, not 18: the blur is recomputed every canvas frame, cost grows with radius (front-desk iGPUs). */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--eims-gold-soft);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .eims-login-card { background: rgba(18, 38, 80, 0.92); }
}

/* Lite mode (weak hardware, auto-detected by the engine or forced with ?lite=1): no live blur at all. */
.eims-lite .eims-login-card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(18, 38, 80, 0.9);
}

/* Champagne hairline with a small diamond, like a menu-card ornament. */
.eims-login-ornament {
    position: relative;
    width: 72px;
    height: 1px;
    margin: 0 auto 22px;
    background: linear-gradient(90deg, transparent, var(--eims-gold), transparent);
}

.eims-login-ornament::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -3px;
    width: 7px;
    height: 7px;
    transform: translateX(-50%) rotate(45deg);
    background: var(--eims-gold);
}

/* CSS wordmark (the only eIMS logo asset is a white-background JPG, unusable on dark glass). */
.eims-login-wordmark {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 6px;
    line-height: 1;
}

.eims-login-wordmark .eims-wm-e { color: var(--eims-red); font-weight: 700; font-size: 30px; }
.eims-login-wordmark .eims-wm-ims { color: #7D8CF2; font-weight: 700; font-size: 30px; letter-spacing: -0.02em; }
.eims-login-wordmark .eims-wm-biz { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 24px; letter-spacing: 0.03em; }

.eims-login-title {
    margin: 18px 0 6px;
    font-family: Georgia, "Times New Roman", serif;   /* system serif: no vendored web font */
    font-weight: 400;
    font-size: 36px;
    line-height: 1.05;
    letter-spacing: 0.01em;
    text-align: center;
    color: var(--eims-ink);
}

.eims-login-subtitle {
    margin: 0 0 30px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-align: center;
    color: var(--eims-ink-muted);
}

/* ---------- Footer ---------- */
.eims-login-footer {
    margin-top: 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.58);
}

/* ---------- Language switcher (reserved for plan 260621-2007 phase-03; markup still commented) ---------- */
.eims-login-lang {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    margin-bottom: 8px;
}

.eims-lang-option {
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--eims-ink-muted);
    border: 1px solid rgba(255, 255, 255, 0.25);
    user-select: none;
}

.eims-lang-option.eims-lang-active {
    color: var(--eims-navy);
    background: var(--eims-gold);
    border-color: var(--eims-gold);
}

/* ---------- Small screens ---------- */
@media only screen and (max-width: 480px) {
    .eims-login-card { width: 92%; padding: 32px 22px 26px; }
    .eims-login-title { font-size: 30px; }
}