/*
  Login page, modelled on the DMS client's landing page (fa_nuxtjs_dms_client:
  pages/index.vue and components/landing/*). Desktop measurements follow its
  1440x960 design; the values here are its values unless a comment says why not.
  Used only by Views/Shared/_LoginLayout.cshtml and Views/Account/Login.cshtml.

  One difference from DMS: its card holds a single button, ours holds the full
  sign-in form, so the card is about 300px taller. The page is composed to fit
  the window like DMS does, so below 1080px tall the form spacing tightens (see
  the compact rules at the end) and the column scrolls if it still overflows.
*/

/* ---------- Base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: #fff;
}

/* :where() keeps the reset at zero specificity so component margins win */
:where(.lp) :where(h1, h2, p, dl, dd, ul) {
    margin: 0;
    padding: 0;
}

:where(.lp) :where(ul) {
    list-style: none;
}

.lp,
.lp input,
.lp button {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.lp {
    min-height: 100vh;
    background: #fff;
    color: #4a5873;
    font-weight: 400;
}

.lp a:focus,
.lp button:focus {
    outline: none;
}

.lp a:focus-visible,
.lp button:focus-visible {
    outline: 2px solid #2a68cd;
    outline-offset: 2px;
}

.lp a:focus-visible {
    border-radius: 3px;
}

/* ---------- Marketing panel: hidden below 1024px ---------- */
.lp-left {
    display: none;
}

/* ---------- Sign-in column: single centred column by default ---------- */
.lp-right {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 448px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 16px 24px 28px;
}

.lp-right-top {
    display: flex;
    justify-content: flex-end;
}

.lp-gap-top {
    flex: none;
}

.lp-right-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 32px;
}

.lp-logo {
    width: 171px;
    height: auto;
}

.lp--gulf .lp-logo {
    width: auto;
    height: 64px;
}

.lp-product-name {
    margin-top: 10px;
    color: #4a5873;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.lp-card-slot {
    width: 100%;
    margin-top: 36px;
}

.lp-stats-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 12px;
    width: 100%;
    margin-top: 28px;
    padding: 20px;
    border-radius: 16px;
    background: #f5f8fd;
    text-align: center;
}

.lp-stats-card dd,
.lp-stats dd {
    color: #2a68cd;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.lp-stats-card dd {
    font-size: 24px;
    line-height: 30px;
}

.lp-stats-card dt,
.lp-stats dt {
    font-weight: 500;
}

.lp-stats-card dt {
    margin-top: 2px;
    font-size: 13.5px;
    line-height: 20px;
}

.lp-gap-mid {
    display: none;
}

.lp-trusted {
    width: 100%;
    margin-top: 28px;
}

.lp-gap-bottom {
    flex: 1 1 0;
    min-height: 28px;
}

.lp-help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 10px;
    font-size: 14px;
    line-height: 20px;
}

.lp-help svg {
    flex: none;
}

.lp-help a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-left: 2px;
    color: #2a68cd;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lp-help a:hover {
    color: #1f55b0;
}

/* ---------- Language picker ---------- */
.lp-lang {
    position: relative;
}

.lp-lang-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 15px;
    border: 1px solid #e1e7f0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
    color: #0e1a2b;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

.lp-lang-btn:hover {
    border-color: #cbd5e1;
}

.lp-lang-btn span {
    margin-right: 5px;
}

.lp-lang-menu {
    position: absolute;
    right: 0;
    z-index: 30;
    width: 144px;
    margin-top: 4px;
    padding: 4px 0;
    border: 1px solid #e1e7f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
    text-align: left;
}

.lp-lang-menu[hidden] {
    display: none;
}

.lp-lang-option {
    display: block;
    width: 100%;
    min-height: 36px;
    padding: 0 12px;
    border: 0;
    background: none;
    color: #33415a;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.lp-lang-option:hover {
    background: #f8fafc;
}

.lp-lang-option.is-current {
    color: #2a68cd;
    font-weight: 600;
}

/* Touch layouts: 44px targets and 16px text (no iOS zoom) */
@media (max-width: 1023px) {
    .lp-lang-btn {
        font-size: 16px;
    }

    .lp-lang-option {
        min-height: 44px;
        font-size: 16px;
    }
}

/* Phones held sideways: tighten the top so Sign in stays above the fold */
@media (max-width: 1023px) and (max-height: 480px) {
    .lp-right {
        padding-top: 10px;
    }

    .lp-right-body {
        margin-top: 6px;
    }

    .lp-card-slot {
        margin-top: 12px;
    }
}

/* ---------- Desktop: side by side ---------- */
@media (min-width: 1024px) {
    .lp {
        position: relative;
        height: 100vh;
        min-height: 640px;
        overflow: hidden;
    }

    .lp-left {
        position: absolute;
        inset: 0 auto 0 0;
        display: block;
        width: 61.111%;
        background: linear-gradient(135deg, #e4effc 0%, #ecf4fd 50%, #f4f9fe 100%);
        /* Curve fitted to the DMS design's seam */
        clip-path: url('#lp-seam');
    }

    .lp-left-inner {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 118px 0 0 clamp(40px, 5.556vw, 80px);
    }

    .lp-headline {
        color: #0e1a2b;
        font-size: clamp(32px, 4.24vw, 61px);
        font-weight: 800;
        line-height: 1.06;
        letter-spacing: -0.03em;
    }

    .lp-headline span {
        color: #2a68cd;
    }

    .lp-stats {
        display: flex;
        margin-top: 30px;
    }

    .lp-stats > div {
        padding: 0 clamp(14px, 2.26vw, 32.5px);
        border-left: 1px solid #d6deea;
    }

    .lp-stats > div:first-child {
        padding-left: 0;
        border-left: 0;
    }

    .lp-stats dd {
        font-size: 27px;
        line-height: 34px;
    }

    .lp-stats dt {
        margin-top: 3px;
        font-size: 14px;
        line-height: 22px;
    }

    .lp-tiles {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        width: clamp(480px, 43.75vw, 630px);
        margin-top: 40px;
        margin-left: clamp(-37px, -2.57vw, -26px);
        text-align: center;
        cursor: default;
    }

    .lp-tiles li {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .lp-tile-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: #e3ecfb;
    }

    .lp-tile-label {
        min-width: min-content;
        max-width: 82px;
        margin-top: 12px;
        color: #33415a;
        font-size: 13.5px;
        font-weight: 500;
        line-height: 18px;
    }

    .lp-flex-gap {
        flex: 1 1 0;
        min-height: 12px;
    }

    /* 85% of the design size; shrinks further on short windows */
    .lp-illustration {
        flex: none;
        width: min(clamp(408px, 41.9vw, 603px), calc((100vh - 590px) * 2.63));
        margin-left: clamp(-42px, -2.92vw, -20px);
        aspect-ratio: 710 / 270;
    }

    .lp-illustration-svg {
        display: block;
        width: 100%;
        height: auto;
    }

    .lp-copyright {
        flex: none;
        margin: clamp(12px, 4.2vh, 40px) 0 35px;
        color: #5b677d;
        font-size: 12.5px;
        line-height: 18px;
    }

    /* The column scrolls on its own if the form outgrows the window */
    .lp-right {
        position: absolute;
        inset: 0 0 0 59.72%;
        width: auto;
        max-width: none;
        min-height: 0;
        margin: 0;
        padding: 36px clamp(24px, 4.167vw, 60px) 0 0;
        overflow-y: auto;
    }

    .lp-right-top {
        margin-right: 4px;
    }

    .lp-gap-top {
        flex: 30 1 0;
        min-height: 10px;
    }

    .lp-right-body {
        flex: none;
        max-width: 520px;
        margin: 0 auto;
    }

    .lp-card-slot {
        max-width: 480px;
        margin-top: clamp(20px, 4.2vh, 40px);
    }

    .lp-stats-card {
        display: none;
    }

    .lp-gap-mid {
        display: block;
        flex: none;
        height: clamp(24px, 5.8vh, 56px);
    }

    .lp-trusted {
        margin-top: 0;
    }

    .lp-gap-bottom {
        flex: 70 1 0;
        min-height: 12px;
    }

    .lp-help {
        flex: none;
        justify-content: flex-end;
        margin: 0 4px 24px 0;
    }

    /* Gulf tenants: the panel carries the tenant's background image, set by Login.cshtml */
    .lp--gulf .lp-left {
        clip-path: none;
        width: 59.72%;
        background: #f4f9fe;
    }
}

@media (min-width: 1024px) and (max-height: 719px) {
    .lp-illustration {
        display: none;
    }
}

/* Large monitors: scale the whole composition up rather than leaving the
   1440-wide layout small in the corner. */
@media (min-width: 1680px) and (min-height: 1000px) {
    .lp {
        height: calc(100vh / 1.2);
        zoom: 1.2;
    }
}

@media (min-width: 2200px) and (min-height: 1300px) {
    .lp {
        height: calc(100vh / 1.5);
        zoom: 1.5;
    }
}

/* ---------- Certifications strip (not on Gulf) ---------- */
.lp-trusted-label {
    display: flex;
    align-items: center;
    gap: 17px;
    color: #4a5873;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    white-space: nowrap;
}

.lp-trusted-label span {
    flex: 1;
    height: 1px;
    background: #e1e7f0;
}

/*
  The badges have different shapes (two wide wordmarks, one tall ribbon), so each
  gets its own height to look the same visual size. Shown in their own colours,
  as certification marks normally are.
*/
.lp-cert-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 3.2vw, 48px);
    height: 48px;
    margin-top: 20px;
}

.lp-cert-row li {
    display: flex;
    align-items: center;
}

.lp-cert-img {
    display: block;
    width: auto;
}

.lp-cert-img--iso-27001 {
    height: 30px;
}

.lp-cert-img--soc-2-type-2 {
    height: 34px;
}

.lp-cert-img--great-place-to-work {
    height: 48px;
}

/* ---------- Sign-in card (Views/Account/Login.cshtml) ----------
   Title, subtitle, primary button and footer are the DMS card's values. The
   form controls between them have no DMS counterpart and follow its button. */
.login-card {
    width: 100%;
    text-align: left;
}

.login-head {
    text-align: center;
}

.login-title {
    color: #0e1a2b;
    font-size: 30px;
    font-weight: 700;
    line-height: 38px;
    letter-spacing: -0.02em;
}

.login-subtitle {
    margin-top: 10px;
    color: #4a5873;
    font-size: 16px;
    line-height: 24px;
}

.social-buttons-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 28px;
}

.social-buttons-grid form {
    margin: 0;
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid #dfe5ee;
    border-radius: 10px;
    background: #fff;
    color: #33415a;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.social-btn:hover {
    border-color: #c7d2e1;
    background: #f5f8fd;
}

.social-btn svg {
    width: 20px;
    height: 20px;
    flex: none;
}

.divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 20px 0 18px;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: #e6ebf2;
}

.divider-text {
    color: #5b677d;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.login-card #loginForm {
    margin-top: 0;
}

.login-card--no-sso #loginForm {
    margin-top: 28px;
}

.form-group {
    margin-bottom: 16px;
}

.form-label {
    display: block;
    margin-bottom: 6px;
    color: #33415a;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.form-input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #dfe5ee;
    border-radius: 10px;
    background: #fff;
    color: #0e1a2b;
    font-size: 15px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input::placeholder {
    color: #8a96aa;
}

.form-input:focus {
    border-color: #2a68cd;
    outline: none;
    box-shadow: 0 0 0 3px rgb(42 104 205 / 15%);
}

.error-message {
    display: block;
    margin-top: 6px;
    color: #b42318;
    font-size: 13px;
    line-height: 18px;
}

.error-message:empty {
    display: none;
}

.validation-summary {
    margin-bottom: 16px;
    padding: 10px 14px;
    border: 1px solid #fecdca;
    border-radius: 10px;
    background: #fef3f2;
    color: #b42318;
    font-size: 13.5px;
    line-height: 20px;
}

.validation-summary ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.attempts-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 14px;
    border: 1px solid #fde68a;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: 13.5px;
    line-height: 20px;
}

.attempts-warning svg {
    width: 20px;
    height: 20px;
    flex: none;
}

.attempts-warning.critical {
    border-color: #fecdca;
    background: #fef3f2;
    color: #b42318;
}

.g-recaptcha {
    display: flex;
    justify-content: center;
    margin: 4px 0 14px;
}

.submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 56px;
    margin-top: 8px;
    border: 0;
    border-radius: 10px;
    background: #2a68cd;
    box-shadow: 0 10px 24px rgb(42 104 205 / 28%);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.submit-btn:hover {
    background: #1f55b0;
}

.submit-btn svg {
    width: 19px;
    height: 19px;
}

.submit-btn:disabled {
    background: #9aaccc;
    box-shadow: none;
    cursor: not-allowed;
}

.forgot-link {
    display: block;
    margin-top: 14px;
    color: #2a68cd;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
}

.forgot-link:hover {
    color: #1f55b0;
    text-decoration: underline;
}

.login-footer {
    margin-top: 24px;
    text-align: center;
}

.login-access {
    color: #5b677d;
    font-size: 14.5px;
    line-height: 22px;
}

.login-access strong {
    color: #33415a;
    font-weight: 600;
}

.login-terms {
    margin-top: 10px;
    color: #5b677d;
    font-size: 13px;
    line-height: 20px;
    text-wrap: balance;
}

.login-terms a {
    color: #2a68cd;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.login-terms a:hover {
    color: #1f55b0;
}

/* Touch layouts: give the inline links a 44px-tall hit area */
@media (max-width: 1023px), (pointer: coarse) {
    .login-terms a {
        display: inline-block;
        padding: 12px 0;
    }
}

/* ---------- Sign-out pages (Logout.cshtml, LoggedOut.cshtml) ----------
   Same card as sign-in, with an icon above the title and a row of actions. */
.page-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #e3ecfb;
    color: #2a68cd;
}

.page-form {
    margin: 0;
}

.page-actions {
    display: flex;
    gap: 12px;
    margin-top: 28px;
}

/* Equal halves whatever the label lengths; no padding, or the <button>'s default
   padding would make it wider than the link */
.page-actions > * {
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
}

a.submit-btn {
    margin-top: 0;
    text-decoration: none;
}

.page-actions .submit-btn {
    margin-top: 0;
    border: 1px solid transparent; /* same box as the bordered Cancel */
}

.secondary-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    border: 1px solid #dfe5ee;
    border-radius: 10px;
    background: #fff;
    color: #33415a;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.secondary-btn:hover {
    border-color: #c7d2e1;
    background: #f5f8fd;
}

.page-note {
    margin-top: 20px;
    color: #4a5873;
    font-size: 15px;
    line-height: 22px;
    text-align: center;
}

.page-note strong {
    color: #0e1a2b;
    font-weight: 600;
}

.page-link {
    display: block;
    margin-top: 10px;
    color: #2a68cd;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.page-link:hover {
    color: #1f55b0;
    text-decoration: underline;
}

/* Desktop: a real card, the DMS card's padding, radius, border and shadow */
@media (min-width: 1024px) {
    .login-card {
        padding: 52px clamp(20px, 3.1vw, 44px) 34px;
        border: 1px solid #e6ebf2;
        border-radius: 24px;
        background: #fff;
        box-shadow: 0 24px 60px rgb(15 23 42 / 6%), 0 2px 8px rgb(15 23 42 / 3%);
    }

    .login-title {
        font-size: clamp(26px, 2.3vw, 33px);
        line-height: 40px;
    }

    .login-subtitle {
        margin-top: 14px;
        font-size: 17px;
    }

    .submit-btn,
    .secondary-btn {
        height: 60px;
    }

    .login-footer {
        margin-top: 28px;
        padding-top: 24px;
        border-top: 1px solid #e6ebf2;
    }
}

/* Desktop windows under 1080px tall (the full-size form needs about that), or the
   zoomed large-monitor tiers below the same effective height: tighten the form so
   the whole composition
   (logo, card, trusted-by, help line) still fits without scrolling */
@media (min-width: 1024px) and (max-height: 1079px),
    (min-width: 1680px) and (min-height: 1000px) and (max-height: 1295px),
    (min-width: 2200px) and (min-height: 1300px) and (max-height: 1619px) {
    .lp-product-name {
        margin-top: 6px;
    }

    .lp-card-slot {
        margin-top: 16px;
    }

    .lp-gap-mid {
        height: 20px;
    }

    .lp-cert-row {
        margin-top: 14px;
    }

    .lp-help {
        margin-bottom: 8px;
    }

    .login-card {
        padding-top: 20px;
        padding-bottom: 18px;
    }

    .login-title {
        font-size: 28px;
        line-height: 36px;
    }

    .login-subtitle {
        margin-top: 8px;
        font-size: 15px;
        line-height: 22px;
    }

    .social-buttons-grid {
        gap: 8px;
        margin-top: 14px;
    }

    .social-btn {
        height: 40px;
        font-size: 14.5px;
    }

    .divider {
        margin: 12px 0 10px;
    }

    .form-group {
        margin-bottom: 8px;
    }

    .form-label {
        margin-bottom: 5px;
        font-size: 13.5px;
        line-height: 18px;
    }

    .form-input {
        height: 40px;
    }

    .submit-btn {
        height: 50px;
        margin-top: 4px;
        font-size: 16px;
    }

    .secondary-btn {
        height: 50px;
        font-size: 16px;
    }

    .page-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 12px;
    }

    .page-actions {
        margin-top: 20px;
    }

    .forgot-link {
        margin-top: 6px;
    }

    .login-footer {
        margin-top: 12px;
        padding-top: 10px;
    }

    .login-access {
        font-size: 14px;
    }

    .login-terms {
        margin-top: 6px;
    }
}

/* Short desktop windows (the DMS page's own threshold) */
@media (min-width: 1024px) and (max-height: 829px) {
    .lp {
        min-height: 680px;
    }

    .lp-left-inner {
        padding-top: clamp(56px, 11vh, 118px);
    }

    .lp-right {
        padding-top: 18px;
    }

    .lp-copyright {
        margin-bottom: 18px;
    }
}