/*
 * Single source of truth for the LoginIdentity pages (login, signup, connect,
 * MFA, password request/reset, account/platform select) AND for the switch-account popup in
 * the logged-in area. Loaded by Common/LoginIdentityLayout.tpl and by Common/AppsLayout.tpl,
 * so the two surfaces cannot drift apart.
 *
 * BECAUSE IT ALSO LOADS INSIDE THE PORTAL, nothing here may style the application at large.
 * Everything is either a .li-* class, nested inside .li-page, or hung off body.li-body - which
 * only Common/LoginIdentityLayout.tpl sets. The exceptions are deliberate: :root (the popup
 * needs the custom properties), the * box-sizing reset (Bootstrap already sets exactly that),
 * the flex utilities (no portal stylesheet defines them), and the #login-identity-accounts block
 * at the foot of this file, which is scoped to a single table on a single portal page.
 *
 * Layout: full-viewport split - an empty light-grey panel on the left, the content column
 * on white at the right. Typography inherits the site webfont (Roboto, google-fonts.css).
 * One accent colour across both platforms: the unified TradeTracker ID login is
 * deliberately not merchant/affiliate branded.
 */

.li-root,
.li-modal {
    --li-info-primary: #4e91ce;
    --li-text-primary: #333333;
    --li-text-primary-inverse: #ffffff;
    --li-text-secondary: #999999;
    --li-text-negative-primary: #e52d12;
    --li-border-primary: #dfdfdf;
    --li-bg-neutral-primary: #f0f0f0;
    --li-bg-neutral-secondary: #ffffff;
    --li-bg-neutral-tertiary: #f7f7f7;
    --li-bg-neutral-senary: #ebebeb;
    --li-bg-neutral-inverse-primary: #333333;
    --li-bg-neutral-inverse-secondary: #1e1e1e;
    --li-bg-negative-quateary: #ef3c231a;
    --li-bg-info-quateary: #4795dc1a;
    --li-content-width: 544px;
    --li-header-height: 136px;
    --li-spacing: 0.4rem;

    .flex {
        display: flex;
    }

    .flex-col {
        flex-direction: column;
    }

    .items-center {
        align-items: center;
    }

    .gap-2 {
        gap: calc(var(--li-spacing) * 2);
    }
    .gap-4 {
        gap: calc(var(--li-spacing) * 4);
    }
}
.li-root {
    font-size: 10px;

    * {
        box-sizing: border-box;
    }

    /* Scoped: this file loads in the portal too, where the application owns <body>. */
    body {
        margin: 0;
        background: var(--li-bg-neutral-secondary);
        color: var(--li-text-primary);
        font-size: 1.6rem;
        font-family:
            "Roboto",
            -apple-system,
            "Segoe UI",
            Helvetica,
            Arial,
            sans-serif;
    }
}

/* ---------- page frame ---------- */

.li-page {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 100vh;

    @media (max-width: 1020px) {
        grid-template-columns: 1fr;
    }

    header {
        padding-top: calc(var(--li-spacing) * 16);
        display: flex;
        justify-content: center;
        position: relative;
    }

    main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: calc(var(--li-spacing) * 6) calc(var(--li-spacing) * 8);
        width: 100%;
        max-width: var(--li-content-width);
        margin: 0 auto;
    }

    footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: calc(var(--li-spacing) * 2);
        text-align: center;
        padding-bottom: calc(var(--li-spacing) * 6);
        font-size: 1.4rem;
    }

    a {
        color: var(--li-info-primary);
        text-decoration: underline;

        &:hover {
            text-decoration: none;
        }
    }
}

.li-aside {
    background: #dddddd80;
    display: flex;
    justify-content: center;
    align-items: center;

    @media (max-width: 1020px) {
        display: none;
    }
}

.li-main {
    display: grid;
    grid-template-rows: var(--li-header-height) auto var(--li-header-height);
}

.li-logo {
    display: block;
    align-self: flex-start;

    img {
        display: block;
        width: auto;
        height: 48px;
    }
}

.li-title {
    text-align: center;
    font-size: 3.8rem;
    line-height: 4.6rem;
    font-weight: 700;
    margin: 0;
    color: var(--li-text-primary);
}

.li-sub {
    text-align: center;
    font-size: 2rem;
    line-height: 2.8rem;
    color: var(--li-text-secondary);
    margin: calc(var(--li-spacing) * 3) 0 calc(var(--li-spacing) * 8);
}

.li-sub--small {
    font-size: 1.2rem;
    line-height: 1.7rem;
}

.li-subtitle {
    text-align: center;
    font-size: 2.4rem;
    line-height: 3rem;
    font-weight: 600;
    color: var(--li-text-primary);
    margin: calc(var(--li-spacing) * 3) 0 calc(var(--li-spacing) * 8);
}

.li-field-group {
    display: flex;
    flex-direction: column;
    gap: calc(var(--li-spacing) * 6);
}
.li-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--li-spacing) * 2);

    &[data-feedback="error"] {
        .li-input {
            border-color: var(--li-text-negative-primary);
        }
    }

    &.li-field--checkbox {
        flex-direction: row;
        align-items: center;

        label {
            margin: 0;
            font-weight: 400;
            font-size: 1.6rem;
            line-height: 2.2rem;
        }

        input[type="checkbox"] {
            width: calc(var(--li-spacing) * 5);
            height: calc(var(--li-spacing) * 5);
            margin: 0;
            border-radius: 4px;
        }
    }
}
.li-label {
    font-weight: 500;
    margin: 0;
    font-size: 1.8rem;
    line-height: 2.2rem;
}

/* ---------- controls ---------- */

.li-input {
    width: 100%;
    padding: calc(var(--li-spacing) * 2) calc(var(--li-spacing) * 4);
    font-size: 1.6rem;
    line-height: 2.2rem;
    font-family: inherit;
    border: 1px solid var(--li-border-primary);
    border-radius: 8px;
    height: calc(var(--li-spacing) * 10);
    color: inherit;
    background-color: var(--li-bg-neutral-secondary);

    &::placeholder {
        color: var(--li-text-secondary);
    }

    &:focus {
        outline: none;
        border-color: var(--li-info-primary);
    }
}

.li-select2 {
    /* width: 100%;
    padding: calc(var(--li-spacing) * 3) calc(var(--li-spacing) * 3.5);
    font-size: 1rem;
    border: 1px solid var(--li-border-primary);
    border-radius: 6px;
    background: var(--li-bg-neutral-secondary);
    color: var(--li-text-primary); */
    margin: 0;

    .select2-choice {
        height: calc(var(--li-spacing) * 10);
        border: 1px solid var(--li-border-primary);
        border-radius: 8px;
        font-size: 1.6rem;
        line-height: 2.2rem;
        color: var(--li-text-primary);

        > .select2-chosen {
            padding: calc(var(--li-spacing) * 2) calc(var(--li-spacing) * 4);
        }
    }
}

/* Question-mark icon beside the email label, with its help text as a hover popover: the copy
   used to live in a title="" attribute, which cannot be styled and reads as a browser tooltip. */
.li-tooltip {
    line-height: 0;
    position: relative;
    display: inline-flex;
}

/* Off-screen until it takes focus, then the first thing on the page. */
.li-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: calc(var(--li-spacing) * 3) calc(var(--li-spacing) * 4);
    background: var(--li-bg-neutral-inverse-primary);
    color: var(--li-text-primary-inverse);
}

.li-skip:focus {
    left: calc(var(--li-spacing) * 2);
    top: calc(var(--li-spacing) * 2);
}

#li-main:focus {
    outline: none;
}

.li-tooltip-trigger {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    cursor: help;
}

.li-tooltip-content {
    /* Opens ABOVE the icon, as in the design: below it would cover the input being explained. */
    position: absolute;
    bottom: calc(100% + var(--li-spacing) * 2);
    left: 50%;
    z-index: 10;
    width: 230px;
    padding: calc(var(--li-spacing) * 4);
    border-radius: 8px;
    background: var(--li-bg-neutral-inverse-primary);
    color: var(--li-text-primary-inverse);
    text-align: left;
    line-height: 1.375rem;

    /* visibility as well as opacity: opacity alone leaves it hoverable and screen-reader
       visible while invisible. */
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.15s ease-in-out,
        visibility 0.15s ease-in-out;

    strong {
        display: block;
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: calc(var(--li-spacing) * 1);
    }

    p {
        margin: 0;
        font-size: 0.875rem;
        font-weight: 400;
    }
}

/* focus-visible, not focus: a mouse click on the icon should not pin the tooltip open. */
.li-tooltip:hover .li-tooltip-content,
.li-tooltip:has(:focus-visible) .li-tooltip-content,
.li-tooltip.is-open .li-tooltip-content {
    opacity: 1;
    visibility: visible;
}

/* Esc closes it until the pointer or focus leaves; the override must beat the :has() rule above. */
.li-tooltip[data-dismissed] .li-tooltip-content {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Fills the gap above the icon so the pointer can travel onto the popover without closing it. */
.li-tooltip-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(var(--li-spacing) * 2);
}

/* One-time-code entry (MFA) reads better spaced out. */
.li-code {
    letter-spacing: 3px;
}

.li-row {
    display: flex;
    align-items: center;
    margin-top: calc(var(--li-spacing) * 4);

    a {
        margin-left: auto;
    }
}

.li-btn,
a.li-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(var(--li-spacing) * 12);
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 2.2rem;
    font-weight: 500;
    font-family: inherit;
    background-color: var(--li-bg-neutral-inverse-primary);
    color: var(--li-text-primary-inverse);
    border: none;
    border-radius: 10px;
    padding: calc(var(--li-spacing) * 3) calc(var(--li-spacing) * 4);
    transition: background-color 0.2s ease-in-out;
    text-decoration: none;
    outline: none;

    form & {
        margin-top: calc(var(--li-spacing) * 8);
    }
    form & + & {
        margin-top: calc(var(--li-spacing) * 2);
    }

    &:hover {
        background-color: var(--li-bg-neutral-inverse-secondary);
        text-decoration: none;
    }
}

.li-btn--outline,
a.li-btn--outline {
    background-color: transparent;
    color: var(--li-text-primary);
    border: 1px solid var(--li-text-primary);

    &:hover {
        background-color: var(--li-bg-neutral-primary);
    }
}

/* Secondary sign-in options, two per row, set well apart from the primary login button. */
.li-social {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--li-spacing) * 4);
    margin-top: calc(var(--li-spacing) * 10);
}

.li-btn[aria-disabled="true"],
a.li-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.li-btn-icon {
    flex-shrink: 0;
    width: calc(var(--li-spacing) * 5);
    height: calc(var(--li-spacing) * 5);
    margin-right: calc(var(--li-spacing) * 2);
    fill: currentColor;
}

.li-link,
a.li-link {
    color: var(--li-info-primary);
    text-decoration: underline;
    font-size: 1.6rem;
    line-height: 2.2rem;
    outline: none;

    &:hover {
        text-decoration: none;
    }
}

.li-additional-action {
    text-align: center;
    margin-top: calc(var(--li-spacing) * 6);
}

/* The flex gap spaces the stacked blocks, so the paragraph's own margins would double it. */
.li-additional-action.flex-col .li-sub {
    margin: 0;
}

/* Platform choice tile: icon pinned left, label optically centred on the card. */
.li-option,
a.li-option {
    color: var(--li-text-primary);
    text-decoration: none;
    position: relative;
    display: flex;
    align-items: center;
    padding: calc(var(--li-spacing) * 4);
    border-radius: 12px;
    background: var(--li-bg-neutral-secondary);
    text-align: center;
    box-shadow: 0px 0px 12.2px 0px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease-in-out;
    outline: none;

    &:hover {
        box-shadow: 0px 0px 12.2px 0px rgba(0, 0, 0, 0.3);
    }
}

.li-option-icon {
    width: calc(var(--li-spacing) * 12);
    height: calc(var(--li-spacing) * 12);
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
        display: block;
        width: calc(var(--li-spacing) * 8);
        height: calc(var(--li-spacing) * 8);
    }

    &.li-option-icon--advertiser {
        background: #feece9;
    }
    &.li-option-icon--publisher {
        background: #4795dc1a;
    }
    &.li-option-icon--agency {
        background: #fffaee;
    }
    &.li-option-icon--corporate {
        background: #73b72b1a;
    }
}

.li-option-label {
    margin: 0 auto;
    transform: translateX(calc(var(--li-spacing) * -6));
    font-size: 1.8rem;
    line-height: 2.2rem;
    font-weight: 500;
}

/* ---------- messages ---------- */
.li-notice {
    text-align: center;
    color: #2e7d57;
    background: #e4f1ea;
    border-radius: 6px;
    padding: 10px;
    margin: 0 0 16px;
}

.li-error {
    color: var(--li-text-negative-primary);
}

/* Scoped: ".alert" is a Bootstrap class the whole portal uses. These rules are for the login
   pages' own alerts, which all live inside .li-page. */
.li-page .alert {
    padding: calc(var(--li-spacing) * 3);
    margin: calc(var(--li-spacing) * 8) 0;
    border-radius: 10px;
    font-size: 1.6rem;
    line-height: 2.2rem;
    border-width: 1px;
    border-style: solid;

    .alert-title {
        font-weight: 700;
    }

    .alert-description {
        a {
            color: var(--li-text-primary);
        }
    }

    &.alert--error {
        background-color: var(--li-bg-negative-quateary);
        border-color: var(--li-text-negative-primary);
    }

    &.alert--info {
        background-color: var(--li-bg-info-quateary);
        border-color: var(--li-info-primary);
    }
}

/* ---------- switch-account popup (logged-in area) ---------- */
/*
 * Bootstrap modal in Customer/Common/SwitchAccountModal.tpl. Only what the popup genuinely
 * adds lives here: the platform tiles reuse .li-option / .li-option-icon / .li-option-label
 * above rather than carrying a second copy, which is how the popup picked up the redesigned
 * tiles for free.
 *
 * These rules sit outside .li-page on purpose - the popup renders inside the portal chrome,
 * not the login frame - so every one of them is scoped by .li-modal or a .li-modal-* class.
 */
.li-modal .modal-dialog {
    max-width: var(--li-content-width);
}

.li-modal .modal-content {
    border: none;
    border-radius: 28px;
    box-shadow: none;
}

.li-modal .modal-body {
    padding: calc(var(--li-spacing) * 12) calc(var(--li-spacing) * 8);
}

/* Panes and the per-platform blocks are toggled by the hidden attribute, against Bootstrap's
   own display rules - hence the override. */
.li-modal [hidden] {
    display: none !important;
}

.li-modal-close {
    font-size: 26px;
    opacity: 0.4;
    position: absolute;
    top: calc(var(--li-spacing) * 4);
    right: calc(var(--li-spacing) * 4);
}

/* Shown in place of an empty dropdown when the chosen platform has no accounts. */
.li-empty {
    text-align: center;
    color: var(--li-text-secondary);
    font-size: 1.6rem;
    line-height: 2.2rem;
}

/* ---------- connect pane ---------- */
.li-accounts {
    background-color: var(--li-bg-neutral-tertiary);
    border-radius: 10px;
    max-height: 280px;
    padding: calc(var(--li-spacing) * 4);
    overflow-y: auto;

    hr {
        border-color: var(--li-border-primary);
        margin-top: calc(var(--li-spacing) * 4);
        margin-bottom: calc(var(--li-spacing) * 4);
    }
}

.li-account-platform {
    font-size: 1.6rem;
    line-height: 2.2rem;
    font-weight: 500;
    color: var(--li-text-secondary);
    gap: calc(var(--li-spacing) * 2);
    padding-left: calc(var(--li-spacing) * 3);
    padding-bottom: calc(var(--li-spacing) * 2);
    display: flex;
    align-items: center;
    text-transform: uppercase;

    span {
        display: block;
        width: calc(var(--li-spacing) * 3);
        height: calc(var(--li-spacing) * 3);
        border-radius: 50%;
    }

    &.li-account-platform--advertiser {
        span {
            background-color: var(--li-text-negative-primary);
        }
    }
    &.li-account-platform--publisher {
        span {
            background-color: var(--li-info-primary);
        }
    }
    &.li-account-platform--agency {
        span {
            background-color: #fec551;
        }
    }
    &.li-account-platform--corporate {
        span {
            background-color: #5a9819;
        }
    }
}
/* A connected account, offered as "click to log in". */
.li-account {
    display: flex;
    align-items: center;
    gap: calc(var(--li-spacing) * 4);
    width: 100%;
    padding: calc(var(--li-spacing) * 3);
    background-color: var(--li-bg-neutral-tertiary);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 400;
    color: var(--li-text-primary);
    font-size: 1.6rem;
    line-height: 2.2rem;
    border: none;
    transition: background-color 0.2s ease-in-out;

    &:hover {
        background-color: var(--li-bg-neutral-senary);
        font-weight: 500;

        .li-account-action {
            display: flex;
        }
    }
}

.li-account-img {
    border-radius: 4px;
    overflow: hidden;
    img,
    svg {
        display: block;
        width: calc(var(--li-spacing) * 10);
        height: calc(var(--li-spacing) * 10);
    }
}

.li-account-action {
    font-weight: 400;
    margin-left: auto;
    gap: calc(var(--li-spacing) * 2);
    display: none;
    align-items: center;
}

/* "or" rule between the connected accounts and the credential form. */
.li-divider {
    position: relative;
    text-align: center;

    &:before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        border-top: 1px solid var(--li-border-primary);
    }

    span {
        position: relative;
        padding: 0 calc(var(--li-spacing) * 4);
        background: var(--li-bg-neutral-secondary);
        color: var(--li-text-primary);
        font-size: 1.6rem;
        line-height: 2.2rem;
    }
}

/*
 * The connected-accounts table on account/loginIdentity. bootstrap-theme.css bottom-aligns every
 * .table cell in the portal, which drops the short values to the foot of a row whose customer
 * cell carries a second line. The ID keeps the correction off every other grid.
 */
#login-identity-accounts > tbody > tr > td {
    vertical-align: top;
}

#login-identity-accounts .help-block {
    margin: 0;
}

/* A .btn in a table cell brings its own border, padding, 14px type and middle alignment; the row
   wants the disconnect control to read as one more cell value. */
#login-identity-accounts .btn-link {
    border: 0;
    padding: 0;
    font-size: inherit;
    vertical-align: baseline;
}

/* Sign-out control on the identity screens (LoginIdentityLayout.tpl). A button rather than a
   link because ending a session on GET is something any page can trigger, so the browser default
   chrome has to be stripped back to read as the .li-link beside it. */
.li-signout {
    text-align: center;
    margin-bottom: 3px;
}

.li-signout-btn {
    background: none;
    border: 0;
    padding: 0;
    color: var(--li-info-primary);
    text-decoration: underline;
    font-family: inherit;
    font-size: 1.28rem;
    line-height: 1.76rem;
    cursor: pointer;

    &:hover {
        text-decoration: none;
    }
}

/* Two-step method labels stay rounded rectangles on every portal; the merchant theme rounds .label into an ellipse. */
.li-two-step-methods .label {
    border-radius: 0.25em;
}

.li-phone {
    width: 100%;
    font-size: 1.6rem;
}

.li-help {
    position: absolute;
    top: calc(var(--li-spacing) * 4);
    right: calc(var(--li-spacing) * 4);

    .li-btn {
        width: fit-content;
        font-size: 1.6rem;
        line-height: 2.2rem;
        padding: calc(var(--li-spacing) * 2) calc(var(--li-spacing) * 3);
        height: calc(var(--li-spacing) * 10);

        svg {
            width: calc(var(--li-spacing) * 4);
            height: calc(var(--li-spacing) * 4);
        }
    }
}