/* ==========================================================================
   Login V2 — ERP sign-in (Figma: Master › 🔐 ERP Login V2, frozen 2026-10-13)
   Scope: everything is under `.login-v2`, used only by Views/Account/Login.cshtml.
   The other login variants (AdminLogin, Login4ShowServer, Login4Cloud) keep login.css
   untouched; this file adds nothing outside the `.login-v2` root except the Arimo
   700 face (login.css only registers the 400 face under the `Arimo` family).

   Breakpoints (from the Figma target screens)
     desktop   ≥ 1280   1440 × 900 primary · 1920 × 1080 reference · no surface
     tablet-l  900–1279 1024 × 768 reference · FormSurface, left-aligned
     tablet-p  600–899  834 × 1112 target  · FormSurface centred
     mobile    < 600    390 × 844 target   · FormSurface centred, logo + form only
   ========================================================================== */

@font-face {
    font-family: 'Arimo';
    font-weight: 700;
    src: url('/font/Arimo-Bold.ttf');
}

.login-v2 {
    /* Login-scoped values — Figma tokens (Semantic, ERP Tokens SHOW mode). No global token is defined here. */
    --lv2-canvas: #f4f8f9;        /* Component · color/login/canvas            */
    --lv2-brand: #31a59f;         /* ERP Tokens · color/brand (SHOW)           */
    --lv2-brand-ink: #26807b;     /* ERP Tokens · color/brand-ink (SHOW) — the official CICOM PRO “PRO” colour; the logo asset carries it */
    --lv2-text: #1d2127;          /* color/text/primary                        */
    --lv2-text-secondary: #48505b;/* color/text/secondary                      */
    --lv2-text-muted: #5f6875;    /* color/text/muted                          */
    --lv2-border: #e3e6ea;        /* color/border/default                      */
    --lv2-border-hover: #5f6875;  /* color/border/control-hover                */
    --lv2-focus: #1670c2;         /* color/focus/ring                          */
    --lv2-danger: #c0331f;        /* color/text/danger                         */
    --lv2-cta: #1d2127;           /* Component · color/login/cta               */
    --lv2-cta-hover: #323841;     /* Component · color/login/cta-hover         */
    --lv2-surface-fill: rgba(255, 255, 255, 0.30);
    --lv2-surface-line: rgba(255, 255, 255, 0.60);

    position: relative;
    min-height: 100vh;
    overflow: hidden;             /* the artwork bleeds off three edges */
    background: var(--lv2-canvas);
    color: var(--lv2-text);
    font-family: 'Arimo', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.login-v2 *,
.login-v2 *::before,
.login-v2 *::after {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Artwork — one responsive master (images/login/login-v2-artwork.svg, 1240 square ring).
   Positioned by ring centre + diameter; values interpolate the 1440 and 1920 Figma screens exactly.
   -------------------------------------------------------------------------- */
.lv2-artwork {
    position: absolute;
    z-index: 0;
    width: calc(64.6vw + 186px);          /* 1116 @ 1440 · 1426 @ 1920 */
    height: auto;
    left: calc(93.75vw - 18px);           /* ring centre x: 1332 @ 1440 · 1782 @ 1920 */
    top: calc(16.7vh + 340px);            /* ring centre y: 490 @ 900 · 520 @ 1080 */
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none;
}

/* --------------------------------------------------------------------------
   Pane + column
   -------------------------------------------------------------------------- */
.lv2-pane {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(50% + 144px);             /* column centre 432 @ 1440 (Figma), 552 @ 1920 (Figma 534) */
    min-height: 100vh;
    padding: 48px 24px 80px;              /* 32 px of extra bottom padding = the Figma column sits 16 px above true centre */
}

.lv2-column {
    position: relative;
    width: 400px;
    max-width: 100%;
}

.lv2-surface {                            /* Desktop: no FormSurface */
    width: 100%;
}

.lv2-form {
    display: flex;
    flex-direction: column;
    gap: 64px;                            /* header → fields */
    margin: 0;
}

/* Top: logo · heading · supporting copy */
.lv2-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;                            /* logo → heading */
}

.lv2-logo {
    display: block;
    width: 289.4px;                       /* Brand / Logo / CICOM PRO 448 × 70 at ×0.646 (45.2 high, as before) */
    height: auto;
}

.lv2-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.lv2-headline {
    margin: 0;
    font-family: 'Arimo', Arial, sans-serif;
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--lv2-text-secondary);
    text-align: center;
}

.lv2-supporting {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--lv2-text-muted);
    text-align: center;
}

/* Fields */
.lv2-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lv2-field {
    position: relative;
}

.lv2-input {
    display: block;
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 12px 0 36px;               /* 12 pad · 16 icon · 8 gap */
    border: 1px solid var(--lv2-border);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.70);
    font-family: 'Arimo', Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: var(--lv2-text);
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease;
}

.lv2-field--password .lv2-input {
    padding-right: 40px;
}

/* .login-v2 prefix: the project's bootstrap.css sets input[type="text"]::placeholder to #c2c2c2 */
.login-v2 .lv2-input::-webkit-input-placeholder {
    color: var(--lv2-text-muted);
    opacity: 1;
}

.login-v2 .lv2-input::placeholder {
    color: var(--lv2-text-muted);
    opacity: 1;
}

.lv2-input:hover {
    border-color: var(--lv2-border-hover);
}

.lv2-input:focus,
.lv2-input:focus-visible {
    border-color: var(--lv2-border);
    outline: 2px solid var(--lv2-focus);  /* Control / TextInput · Focus: 2 px ring outside */
    outline-offset: 0;
}

.lv2-icon,
.lv2-toggle {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    color: var(--lv2-text-muted);
}

.lv2-icon {
    left: 12px;
    pointer-events: none;
}

.lv2-icon svg,
.lv2-toggle svg {
    display: block;
    width: 16px;
    height: 16px;
}

.lv2-toggle {
    right: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 0;
}

.lv2-toggle:focus-visible {
    outline: 2px solid var(--lv2-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

.lv2-toggle .lv2-eye { display: none; }
.lv2-toggle.is-visible .lv2-eye { display: block; }
.lv2-toggle.is-visible .lv2-eye-off { display: none; }

/* Options row: Save Account No. · Forgot password? */
.lv2-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
}

.lv2-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    font-size: 13px;
    line-height: 20px;
    color: var(--lv2-text-secondary);
}

.lv2-check input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.lv2-check-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border: 1.5px solid #838c99;          /* color/border/control */
    border-radius: 4px;
    background: #ffffff;
    color: #ffffff;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.lv2-check-box svg {
    display: none;
    width: 14px;
    height: 14px;
}

.lv2-check:hover .lv2-check-box {
    border-color: var(--lv2-border-hover);
    background: #f4f6f8;                  /* color/surface/hover */
}

.lv2-check input:checked + .lv2-check-box {
    border-color: var(--lv2-brand);
    background: var(--lv2-brand);
}

.lv2-check input:checked + .lv2-check-box svg {
    display: block;
}

.lv2-check input:focus-visible + .lv2-check-box {
    outline: 2px solid var(--lv2-focus);
    outline-offset: 2px;
}

.lv2-forgot {
    font-size: 12.5px;
    line-height: 20px;
    color: var(--lv2-text-muted);
    text-decoration: none;
}

.lv2-forgot:hover,
.lv2-forgot:focus {
    color: var(--lv2-text-muted);
    text-decoration: underline;
}

/* Actions: Sign in · server message */
.lv2-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: -24px;                    /* fields → Sign in = 40 (form gap 64 − 24) */
}

.lv2-submit {
    display: block;
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 6px;
    background: var(--lv2-cta);
    font-family: 'Arimo', Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    transition: background 0.15s ease;
}

.lv2-submit:hover {
    background: var(--lv2-cta-hover);
}

.lv2-submit:focus-visible {
    outline: 2px solid var(--lv2-focus);
    outline-offset: 3px;
}

.lv2-message {
    font-size: 13px;
    line-height: 20px;
    color: var(--lv2-danger);
    text-align: center;
}

.lv2-message ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Copyright — hangs 48 px under the column without affecting its centring */
.lv2-copyright {
    position: absolute;
    top: calc(100% + 48px);
    left: 0;
    right: 0;
    margin: 0;
    font-size: 11px;
    line-height: 16px;
    color: var(--lv2-text-muted);
    text-align: center;
}

/* --------------------------------------------------------------------------
   Tablet landscape (1024 × 768 reference): FormSurface, left-aligned; heading only
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
    .lv2-pane {
        width: 100%;
        align-items: flex-start;
        padding: 48px 24px 64px 72px;
    }

    .lv2-column {
        width: 498px;
    }

    .lv2-surface {
        padding: 48px;
        border: 1px solid var(--lv2-surface-line);
        border-radius: 24px;
        background: var(--lv2-surface-fill);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    .lv2-artwork {
        width: 87.2vw;                    /* 893 @ 1024 */
        left: 91.6vw;                     /* centre 938 */
        top: 51.3vh;                      /* centre 394 */
    }

    .lv2-form { gap: 48px; }
    .lv2-actions { margin-top: 0; }       /* fields → Sign in = 48 */
    .lv2-logo { width: 268.8px; }         /* ×0.60 (42 high) */
    .lv2-headline { font-size: 24px; line-height: 32px; }
    .lv2-supporting { display: none; }
}

/* No backdrop-filter support: keep the artwork legible without the blur */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .login-v2 .lv2-surface {
        background: rgba(255, 255, 255, 0.72);
    }
}

/* --------------------------------------------------------------------------
   Tablet portrait (834 × 1112 target): FormSurface centred
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
    .lv2-pane {
        align-items: center;
        padding: 48px 24px 80px;
    }

    .lv2-artwork {
        width: 129.5vw;                   /* 1080 @ 834 */
        left: 82.7vw;                     /* centre 690 */
        top: 54vh;                        /* centre 600 */
    }
}

/* --------------------------------------------------------------------------
   Mobile (390 × 844 target): logo + form only; copyright 44 px from the bottom
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
    .lv2-pane {
        padding: 48px 19px 71px;          /* 23 px extra bottom = the Figma surface sits 11.5 px above true centre (y 206 @ 844) */
    }

    .lv2-column {
        position: static;                 /* copyright then anchors to the pane */
        width: 352px;
    }

    .lv2-surface {
        padding: 32px 24px;
        border-radius: 20px;
    }

    .lv2-artwork {
        width: 205vw;                     /* 800 @ 390 */
        left: 84.6vw;                     /* centre 330 */
        top: 55.7vh;                      /* centre 470 */
    }

    .lv2-form { gap: 32px; }
    .lv2-actions { margin-top: 0; }       /* fields → Sign in = 32 */
    .lv2-logo { width: 246.4px; max-width: 100%; }  /* ×0.55 (38.5 high) */
    .lv2-header { display: none; }

    .lv2-copyright {
        top: auto;
        bottom: 44px;
    }
}

/* --------------------------------------------------------------------------
   Contact Info dialog — opened by "Forgot password?" (Figma FINAL · Option 01 — Clean / Editorial).
   Built on the Bootstrap modal from _LoginLayout (scrim, Esc, backdrop); the Figma Control / Dialog
   values are applied to .modal-content: 360 × 229, padding 24, gap 16, radius 12, shadow 0 4 20 / 12 %.
   Footerless by design — the × is the only close control.
   -------------------------------------------------------------------------- */
.lv2-contact .modal-dialog {
    max-width: 360px;
    margin: 24px auto;
    min-height: calc(100% - 48px);        /* keeps .modal-dialog-centered centred with the 24 px margins */
}

.lv2-contact .modal-content {
    padding: 24px;
    border: 0;
    border-radius: 12px;                  /* radius/xl */
    background: #ffffff;                  /* color/surface/default */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    color: var(--lv2-text);
}

/* Header: title + × (Control / Dialog header, 32 px) */
.lv2-contact-header {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 32px;
}

.lv2-contact-title {
    flex: 1 1 auto;
    margin: 0;
    font-size: 20px;                      /* Type/Title */
    line-height: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--lv2-text-muted);
}

.lv2-contact-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;                          /* Control / IconButton MD Ghost */
    height: 32px;
    flex: 0 0 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--lv2-text-muted);
    cursor: pointer;
}

.lv2-contact-close svg {
    width: 20px;
    height: 20px;
}

.lv2-contact-close:hover {
    background: #f4f6f8;                  /* color/surface/hover */
    color: var(--lv2-text);
}

.lv2-contact-close:focus-visible,
.lv2-contact-copy:focus-visible,
.lv2-contact-value:focus-visible {
    outline: 2px solid var(--lv2-focus);
    outline-offset: 2px;
}

/* Contact panel: canvas tint with the 3 px brand accent */
.lv2-contact-panel {
    margin-top: 16px;
    border-left: 3px solid var(--lv2-brand);   /* color/brand */
    border-radius: 8px;                   /* radius/lg */
    background: var(--lv2-canvas);        /* color/login/canvas */
    overflow: hidden;
}

.lv2-contact-row {
    display: flex;
    align-items: center;
    padding: 12px 10px 12px 14px;
}

.lv2-contact-row + .lv2-contact-row {
    border-top: 1px solid #ffffff;        /* row divider */
}

.lv2-contact-details {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lv2-contact-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 16px;
}

.lv2-contact-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--lv2-brand-ink);          /* SHOW brand colour #26807B */
}

.lv2-contact-label {
    font-size: 12px;                      /* Type/Label */
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lv2-text-muted);
}

.lv2-contact-value-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lv2-contact-value {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;                      /* Type/Subtitle */
    line-height: 24px;
    font-weight: 700;
    color: var(--lv2-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lv2-contact-value:hover,
.lv2-contact-value:focus {
    color: var(--lv2-text);
    text-decoration: underline;
}

.lv2-contact-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;                          /* Control / IconButton SM Ghost */
    height: 24px;
    flex: 0 0 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--lv2-text-muted);
    cursor: pointer;
}

.lv2-contact-copy svg {
    width: 16px;
    height: 16px;
}

.lv2-contact-copy:hover {
    background: var(--lv2-border);
    color: var(--lv2-text);
}

/* Screen-reader confirmation for the copy buttons (no visible UI) */
.lv2-contact-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Mobile: 352 wide = viewport − 2 × 19, the Login V2 mobile FormSurface width */
@media (max-width: 599px) {
    .lv2-contact .modal-dialog {
        width: calc(100% - 38px);
        max-width: none;
    }
}