/* ==========================================================================
   Evolution CRM - sign in

   Loaded ONLY by Views/Shared/Vuexy/_LayoutLogin.cshtml, which serves exactly
   one view (Views/Security/Login.cshtml). Everything here is scoped under
   .ev-login so nothing can leak if that layout is ever reused.

   Tokens (--ev-gold, --ev-ink, --ev-bar, --ev-text ...) come from
   evolution-brand.css, which the layout links first. Every selector in that
   file is a nav, grid or table selector, so none of them reach this page - it
   is linked for the :root block, and to keep the "every layout gets the brand
   stylesheet" rule in CLAUDE.md true.

   Two brand rules travel with this palette and are easy to break:
     - gold always carries DARK type. White on #c9a961 is 2.25:1; the ink
       #1a160c is 8.02:1.
     - the metal bevel gradient is for the MARK only. Buttons take flat gold.

   Asset note: everything this page loads must sit under /Content/ or
   /Scripts/, because those are the only prefixes McpOnlySiteModule allows
   through on the published site.
   ========================================================================== */

/* This page owns the whole viewport, so the dark ground goes on html and body
   as well. Without it a short viewport shows white above and below the shell,
   and the overscroll bounce flashes white. */
html.ev-login-html,
body.ev-login-body {
    background-color: #0d0f12;
}

.ev-login {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2.5rem 1.5rem;
    overflow: hidden;   /* the backdrop layers are oversized on purpose */
    background-color: #0d0f12;
    color: var(--ev-text);
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* --------------------------------------------------------------------------
   Backdrop

   Three stacked layers, all behind the content and none of them clickable:
     1. .ev-login-wash   two soft radial blooms, the warm light in the room
     2. .ev-login-grid   the gold lattice, drifting
     3. .ev-login-lines  the SVG runners, light travelling along a diagonal

   Every animation here moves transform, opacity or stroke-dashoffset. None of
   them animates background-position or a filter, either of which repaints the
   whole viewport every frame on a machine with no GPU compositing.
   -------------------------------------------------------------------------- */
.ev-login-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.ev-login-wash::before,
.ev-login-wash::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    /* A large, very soft gold bloom. Two of them, drifting out of phase, are
       what stop flat graphite from reading as "unstyled dark". */
    background: radial-gradient(circle closest-side,
                rgba(201, 169, 97, 0.16) 0%,
                rgba(201, 169, 97, 0.06) 45%,
                rgba(201, 169, 97, 0) 72%);
    will-change: transform;
}

.ev-login-wash::before {
    width: 78vw;
    height: 78vw;
    top: -26vw;
    left: -20vw;
    animation: ev-drift-a 34s ease-in-out infinite;
}

.ev-login-wash::after {
    width: 62vw;
    height: 62vw;
    right: -18vw;
    bottom: -24vw;
    background: radial-gradient(circle closest-side,
                rgba(201, 169, 97, 0.13) 0%,
                rgba(164, 130, 60, 0.05) 48%,
                rgba(201, 169, 97, 0) 74%);
    animation: ev-drift-b 44s ease-in-out infinite;
}

/* The lattice sits at 45 degrees because the mark does: the logo is two
   interlocking rules on the diagonal, and this is the same geometry pulled
   apart. The layer is 200% of the viewport and travels by transform, so one
   lattice cell of movement loops seamlessly with no repaint. */
.ev-login-grid {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image:
        repeating-linear-gradient(45deg,
            rgba(201, 169, 97, 0) 0 63px,
            rgba(201, 169, 97, 0.085) 63px 64px),
        repeating-linear-gradient(-45deg,
            rgba(201, 169, 97, 0) 0 63px,
            rgba(201, 169, 97, 0.05) 63px 64px);
    /* Fade the lattice out towards the edges so it reads as a field rather
       than as wallpaper the window happened to crop. */
    -webkit-mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 30%, transparent 78%);
    mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 30%, transparent 78%);
    animation: ev-lattice 26s linear infinite;
    will-change: transform;
}

.ev-login-lines {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* A runner is a short dash on a very long dasharray, so what you see is one
   bright segment travelling the line. Each carries a gradient stroke anchored
   in user space, which fades it in and out as it crosses. */
.ev-login-lines .ev-run {
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-dasharray: 150 1750;
    animation: ev-run 9s linear infinite;
    will-change: stroke-dashoffset;
}

.ev-login-lines .ev-run-2 { animation-duration: 13s;   animation-delay: -3s;   stroke-width: 1; }
.ev-login-lines .ev-run-3 { animation-duration: 11s;   animation-delay: -6.5s; }
.ev-login-lines .ev-run-4 { animation-duration: 16s;   animation-delay: -1.5s; stroke-width: 1; }
.ev-login-lines .ev-run-5 { animation-duration: 12.5s; animation-delay: -8s; }
.ev-login-lines .ev-run-6 { animation-duration: 18s;   animation-delay: -4.5s; stroke-width: 1; }

@keyframes ev-run {
    from { stroke-dashoffset: 1900; }
    to   { stroke-dashoffset: 0; }
}

@keyframes ev-lattice {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(90.5px, 0, 0); }  /* one cell on the diagonal */
}

@keyframes ev-drift-a {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(6vw, 4vw, 0) scale(1.08); }
}

@keyframes ev-drift-b {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
    50%      { transform: translate3d(-5vw, -3vw, 0) scale(1); }
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */
.ev-login-shell {
    display: flex;
    align-items: center;
    gap: 4rem;
    width: 100%;
    max-width: 1180px;
}

.ev-login-brand {
    flex: 1 1 52%;
    min-width: 0;
    text-align: center;
}

.ev-login-mark {
    display: block;
    width: 100%;
    max-width: 390px;
    height: auto;
    margin: 0 auto;
    /* The mark is metal, so it takes a warm halo rather than a drop shadow. A
       shadow under a transparent PNG traces the glyph edges and reads as a
       sticker laid on the page. */
    filter: drop-shadow(0 0 46px rgba(201, 169, 97, 0.28));
}

.ev-login-tag {
    margin: 1.75rem auto 0;
    max-width: 380px;
    color: var(--ev-text-dim);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.34em;
    text-transform: uppercase;
}

/* A hairline of gold above the tagline, fading out at both ends. */
.ev-login-tag::before {
    content: "";
    display: block;
    width: 200px;
    height: 1px;
    margin: 0 auto 1.1rem;
    background: linear-gradient(90deg,
                rgba(201, 169, 97, 0) 0%,
                rgba(201, 169, 97, 0.75) 50%,
                rgba(201, 169, 97, 0) 100%);
}

/* --------------------------------------------------------------------------
   Panel
   -------------------------------------------------------------------------- */
.ev-login-panel {
    flex: 0 0 420px;
    max-width: 420px;
    padding: 2.75rem 2.5rem 2.25rem;
    border: 1px solid rgba(201, 169, 97, 0.2);
    border-radius: 14px;
    background: rgba(21, 24, 28, 0.72);
    /* The blur is what makes the lattice read THROUGH the card instead of
       stopping dead at its edge. Where it is unsupported the rgba background
       alone is still legible, so there is no fallback to write. */
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    backdrop-filter: blur(16px) saturate(120%);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ev-login-mark-sm {
    display: none;
    width: 74px;
    height: auto;
    margin: 0 auto 1.5rem;
}

.ev-login-title {
    margin: 0 0 0.35rem;
    color: var(--ev-text);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.ev-login-sub {
    margin: 0 0 1.9rem;
    color: var(--ev-text-dim);
    font-size: 0.9rem;
}

.ev-login-field {
    margin-bottom: 1.15rem;
}

.ev-login-label {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--ev-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* Vuexy's .form-control is a light-theme control (white fill, #d8d6de border),
   so each of these has to be restated rather than tweaked. */
.ev-login .form-control {
    height: auto;
    padding: 0.8rem 1rem;
    border: 1px solid var(--ev-line);
    border-radius: 8px;
    background-color: rgba(13, 15, 18, 0.66);
    color: var(--ev-text);
    font-size: 0.95rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.ev-login .form-control::placeholder {
    color: #5d656e;
}

.ev-login .form-control:focus {
    border-color: var(--ev-gold);
    background-color: rgba(13, 15, 18, 0.85);
    color: var(--ev-text);
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.16);
}

/* Chrome paints an autofilled field pale blue and no property overrides that
   fill - the only lever is an inset shadow large enough to cover the box, plus
   -webkit-text-fill-color for the text it also recolours. The absurd
   transition delay is the standard trick for killing the flash on first paint.
   This one matters here: the screen that prompted this work was showing two
   pale blue fields. */
.ev-login .form-control:-webkit-autofill,
.ev-login .form-control:-webkit-autofill:hover,
.ev-login .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ev-text);
    -webkit-box-shadow: 0 0 0 1000px #14171b inset;
    caret-color: var(--ev-text);
    transition: background-color 600000s 0s, color 600000s 0s;
}

/* The password field and its eye toggle are one control, so the group draws
   the border and both children go transparent inside it. */
.ev-login .input-group.form-password-toggle {
    border: 1px solid var(--ev-line);
    border-radius: 8px;
    background-color: rgba(13, 15, 18, 0.66);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.ev-login .input-group.form-password-toggle:focus-within {
    border-color: var(--ev-gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.16);
}

.ev-login .input-group.form-password-toggle .form-control,
.ev-login .input-group.form-password-toggle .form-control:focus {
    border: 0;
    background-color: transparent;
    box-shadow: none;
}

.ev-login .input-group.form-password-toggle .input-group-text {
    border: 0;
    background-color: transparent;
    color: var(--ev-text-dim);
    padding-right: 1rem;
    transition: color 0.18s ease;
}

.ev-login .input-group.form-password-toggle .input-group-text:hover {
    color: var(--ev-gold);
}

/* Gold carries ink, never white. */
.ev-login .ev-login-submit {
    display: block;
    width: 100%;
    margin-top: 1.6rem;
    padding: 0.85rem 1rem;
    border: 0;
    border-radius: 8px;
    background-color: var(--ev-gold);
    color: var(--ev-ink);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.ev-login .ev-login-submit:hover,
.ev-login .ev-login-submit:focus {
    background-color: #dcc07f;
    color: var(--ev-ink);
    box-shadow: 0 10px 26px rgba(201, 169, 97, 0.26);
    outline: none;
}

.ev-login .ev-login-submit:focus-visible {
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.35);
}

.ev-login .ev-login-submit:active {
    transform: translateY(1px);
}

/* The failed-login message. Vuexy's .alert-danger is a pale pink panel, which
   here would be the brightest thing on the page. */
.ev-login .alert-danger {
    margin-bottom: 1.4rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(234, 84, 85, 0.45);
    border-radius: 8px;
    background-color: rgba(234, 84, 85, 0.12);
    color: #f1a7a7;
    font-size: 0.86rem;
}

.ev-login-version {
    display: block;
    margin-top: 1.4rem;
    color: #7c858f;   /* 4.88:1 on the glass panel; #565e67 was 2.78:1 */
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-align: right;
}

/* --------------------------------------------------------------------------
   Narrow screens - the brand column goes, so the panel carries the mark
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .ev-login-brand {
        display: none;
    }

    .ev-login-shell {
        justify-content: center;
        gap: 0;
    }

    .ev-login-panel {
        flex: 1 1 auto;
        max-width: 420px;
        margin: 0 auto;
    }

    .ev-login-mark-sm {
        display: block;
    }
}

@media (max-width: 575.98px) {
    .ev-login {
        padding: 1.5rem 1rem;
    }

    .ev-login-panel {
        padding: 2rem 1.35rem 1.75rem;
        border-radius: 12px;
    }

    .ev-login-title {
        font-size: 1.4rem;
    }
}

/* --------------------------------------------------------------------------
   Motion

   All of the above is decoration, so all of it stops. The lattice, the blooms
   and the runners stay on screen at their first frame - the page must not go
   blank for someone who asked for less movement.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ev-login-grid,
    .ev-login-wash::before,
    .ev-login-wash::after,
    .ev-login-lines .ev-run {
        animation: none;
    }

    .ev-login-lines .ev-run {
        stroke-dasharray: none;
        opacity: 0.5;
    }

    .ev-login .ev-login-submit:active {
        transform: none;
    }
}