/*
 * License agreement overlay — shared by Login.aspx, PartnerLogin.aspx,
 * EmpAccountSelection.aspx, Kiosk/login.aspx and Login_maintanence.aspx.
 * Spec: docs/superpowers/specs/2026-08-25-license-agreement-redesign-design.md
 *
 * Self-contained by design. It needs theme.css for the --tr-* custom
 * properties and nothing else. tr365-components.css is deliberately NOT a
 * dependency: its global box-sizing and border-width resets would break the
 * ordinary login screens of the four legacy pages that also load this file.
 *
 * Most rules are bare .tr-eula-* class selectors rather than descendants of
 * #divLicensingAgreement. Those names exist nowhere else in the repo, so they
 * are collision-free, but note the specificity: at 0-1-0 they lose to any
 * legacy `#id foo` or `.class element` selector. Markup using these classes
 * must not also carry a legacy class that styles the same properties.
 */

/* TR-2302: force light mode. These pages do not load reset.css, so they miss
   its TR-2464 color-scheme rule and browsers auto-darken native controls. */
:root {
    color-scheme: light;
}

#divLicensingAgreement,
#divLicensingAgreement *,
#divLicensingAgreement *::before,
#divLicensingAgreement *::after {
    box-sizing: border-box;
}

/* ============================================================
   OVERLAY
   `display` is written inline by the code-behind, so it is never
   declared here and this element is never a flex container.
   The `inset` shorthand is avoided: the legacy stylesheets on
   these pages do not tolerate it.
   ============================================================ */
#divLicensingAgreement {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100000;
    overflow-y: auto;
    padding: 48px 20px 32px;
    background-color: var(--tr-color-bg-weak-50, #EEF0F2);
    color: var(--tr-color-text-primary, #171C22);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
}

/* Brand strip across the top, matching .tr-login::before. */
#divLicensingAgreement::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 6px;
    background-color: var(--tr-color-bg-brand-primary-500, #19765F);
}

/* ============================================================
   CARD
   ============================================================ */
.tr-eula-card {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    background-color: var(--tr-color-bg-white-0, #FFFFFF);
    border-radius: var(--tr-radius-radius-16, 16px);
    box-shadow: 0 1px 3px rgba(10, 13, 20, 0.04), 0 8px 24px rgba(10, 13, 20, 0.06);
    overflow: hidden;
}

.tr-eula-header {
    padding: 24px 32px;
    border-bottom: 1px solid var(--tr-color-stroke-weak-50, #EEF0F2);
}

.tr-eula-title {
    margin: 0;
    padding: 0;
    color: var(--tr-color-text-primary, #171C22);
    font-family: 'Inter Display', 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: -0.28px;
    text-align: left;
}

/* ============================================================
   BODY — two columns
   A definite height lets the document pane fill its column.
   ============================================================ */
.tr-eula-body {
    display: flex;
    align-items: stretch;
    height: 620px;
    min-height: 420px;
    max-height: calc(100vh - 220px);
}

/* ---------- Left: the agreement document ---------- */
.tr-eula-doc {
    display: flex;
    flex: 1 1 62%;
    flex-direction: column;
    min-width: 0;
    border-right: 1px solid var(--tr-color-stroke-weak-50, #EEF0F2);
}

/* An iframe is a replaced element, so `width: auto` with left+right insets
   resolves to its intrinsic 300x150 and the insets are ignored (CSS 2.1
   10.3.8). It must be given explicit dimensions. calc() reproduces the
   24px/8px gutters that the insets were meant to provide. */
.tr-eula-doc-scroll {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

#divLicensingAgreement #ifrmLicense {
    position: absolute;
    top: 8px;
    left: 24px;
    display: block;
    width: calc(100% - 32px);
    height: calc(100% - 16px);
    margin: 0;
    border: 0;
    /* License.htm declares no background, so without this the agreement text
       would paint straight onto the card — black on near-black in dark mode.
       The pane is deliberately a white sheet in both themes. */
    background-color: #FFFFFF;
}

/* ---------- Agreement acceptance ---------- */
.tr-eula-accept {
    flex: 0 0 auto;
    padding: 18px 24px;
    border-top: 1px solid var(--tr-color-stroke-weak-50, #EEF0F2);
}

.tr-eula-accept p {
    margin: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* asp:CheckBox decides for itself whether CssClass lands on the <input> or on
   a wrapper <span>, so it is not a reliable hook. Target the element. */
#divAcceptStatement input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0 10px 0 0;
    padding: 0;
    vertical-align: middle;
    border: 1px solid var(--tr-color-stroke-soft-200, #B0BAC5);
    border-radius: var(--tr-radius-radius-4, 4px);
    background-color: var(--tr-color-bg-white-0, #FFFFFF);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

#divAcceptStatement input[type="checkbox"]:checked {
    border-color: var(--tr-color-bg-brand-primary-500, #19765F);
    background-color: var(--tr-color-bg-brand-primary-500, #19765F);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}

#divAcceptStatement input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--tr-color-stroke-brand-primary-500, #19765F);
    outline-offset: 2px;
}

#divAcceptStatement label {
    vertical-align: middle;
    color: var(--tr-color-text-primary, #171C22);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    cursor: pointer;
}

/* ---------- Right: the sign-in panel ---------- */
.tr-eula-panel {
    display: flex;
    flex: 0 0 38%;
    flex-direction: column;
    min-width: 0;
    padding: 32px;
}

.tr-eula-logo {
    margin: 0 0 28px;
    text-align: center;
}

#divLicensingAgreement #licenceLogo {
    width: 190px;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
}

/* ============================================================
   MESSAGE STRIP
   DisplayMessage_License() writes display:block inline, which beats any
   rule here — so this is never a flex container and the icon is a
   background image, exactly as .tr-login-alert does it.
   ============================================================ */
#divMsgLicenseAgreementPwd {
    margin: 0 0 20px;
    padding: 14px 16px 14px 46px;
    border-radius: var(--tr-radius-radius-10, 10px);
    background-color: var(--tr-color-state-error-lighter, #FFEBEC);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23E93544' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 16px 15px;
    background-size: 20px 20px;
    color: var(--tr-color-foundation-status-red-600, #E93544);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 20px;
}

#divMsgLicenseAgreementPwd p {
    margin: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* ============================================================
   FORM
   ============================================================ */
.tr-eula-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

.tr-eula-field {
    margin: 0 0 20px;
}

.tr-eula-label {
    display: block;
    margin: 0 0 6px;
    color: var(--tr-color-text-primary, #171C22);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.084px;
}

/* Read-only display of the role the user is signing in as. Not an input:
   the value is fixed by the login attempt that triggered this panel. */
.tr-eula-role {
    display: block;
    height: 40px;
    padding: 9px 12px;
    overflow: hidden;
    border: 1px solid var(--tr-color-stroke-softer-100, #CAD0D8);
    border-radius: var(--tr-radius-radius-10, 10px);
    background-color: var(--tr-color-bg-white-0, #FFFFFF);
    box-shadow: 0 1px 2px rgba(10, 13, 20, 0.03);
    color: var(--tr-color-text-tertiary, #76869A);
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: default;
}

.tr-eula-control {
    position: relative;
}

.tr-eula-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    color: var(--tr-color-icon-tertiary, #76869A);
    pointer-events: none;
}

.tr-eula-input {
    display: block;
    width: 100%;
    height: 40px;
    padding: 9px 12px 9px 40px;
    border: 1px solid var(--tr-color-stroke-softer-100, #CAD0D8);
    border-radius: var(--tr-radius-radius-10, 10px);
    background-color: var(--tr-color-bg-white-0, #FFFFFF);
    box-shadow: 0 1px 2px rgba(10, 13, 20, 0.03);
    color: var(--tr-color-text-primary, #171C22);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tr-eula-input::placeholder {
    color: var(--tr-color-text-tertiary, #76869A);
}

.tr-eula-input:hover {
    border-color: var(--tr-color-stroke-soft-200, #B0BAC5);
}

.tr-eula-input:focus {
    border-color: var(--tr-color-stroke-brand-primary-500, #19765F);
    box-shadow: 0 0 0 3px rgba(25, 118, 95, 0.16);
}

.tr-eula-input-password {
    padding-right: 44px;
}

/* ---------- Password visibility toggle ---------- */
.tr-eula-eye {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tr-color-icon-tertiary, #76869A);
    line-height: 0;
    cursor: pointer;
}

.tr-eula-eye svg {
    width: 20px;
    height: 20px;
}

.tr-eula-eye .tr-eula-eye-hide {
    display: none;
}

.tr-eula-eye.is-revealed .tr-eula-eye-show {
    display: none;
}

.tr-eula-eye.is-revealed .tr-eula-eye-hide {
    display: inline;
}

.tr-eula-eye:focus-visible {
    outline: 2px solid var(--tr-color-stroke-brand-primary-500, #19765F);
    outline-offset: 2px;
    border-radius: var(--tr-radius-radius-4, 4px);
}

/* ---------- Submit ---------- */
/* margin-top:auto pins the button to the bottom of the panel, level with the
   acceptance checkbox in the opposite column. */
.tr-eula-submit {
    margin-top: auto;
    padding-top: 24px;
}

.tr-eula-btn {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--tr-radius-radius-10, 10px);
    background-color: var(--tr-color-bg-brand-primary-500, #19765F);
    color: var(--tr-color-static-static-white, #FFFFFF);
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.tr-eula-btn:hover {
    background-color: var(--tr-color-bg-brand-primary-strong-700, #125443);
}

.tr-eula-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--tr-color-foundation-brand-primary-200, #95C0B5);
}

/* ============================================================
   FOOTER
   ============================================================ */
.tr-eula-footer {
    max-width: 1160px;
    margin: 32px auto 0;
    color: var(--tr-color-text-disabled, #8C9AAB);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
}

/* ============================================================
   NARROW VIEWPORTS
   Columns stack; the document pane takes a fixed height so it
   does not collapse to nothing.
   ============================================================ */
@media (max-width: 900px) {
    #divLicensingAgreement {
        padding: 32px 16px 24px;
    }

    .tr-eula-body {
        flex-direction: column;
        height: auto;
        min-height: 0;
        max-height: none;
    }

    .tr-eula-doc {
        flex: none;
        border-right: 0;
        border-bottom: 1px solid var(--tr-color-stroke-weak-50, #EEF0F2);
    }

    .tr-eula-doc-scroll {
        flex: none;
        height: 320px;
    }

    #divLicensingAgreement #ifrmLicense {
        left: 16px;
        width: calc(100% - 32px);
    }

    .tr-eula-panel {
        flex: none;
        padding: 24px 20px;
    }

    .tr-eula-header {
        padding: 20px;
    }

    .tr-eula-title {
        font-size: 22px;
        line-height: 30px;
    }
}

/* ============================================================
   DARK MODE CORRECTIONS
   Two colours above resolve to unreadable combinations on a dark
   card, because the tokens involved are identical in theme.css's
   light and dark blocks and therefore never flip. These are the
   minimum overrides needed. `.dark` is applied to the root element,
   so a descendant selector reaches into the panel.
   ============================================================ */

/* --tr-color-foundation-status-red-600 is #E93544 in BOTH theme blocks,
   while --tr-color-state-error-lighter flips from #FFEBEC to #FB3748.
   Left alone the strip paints #E93544 text on #FB3748 — a contrast ratio
   of about 1.1:1, i.e. an apparently blank red bar. The icon stroke is
   baked into the data URI and has to be swapped with it. */
.dark #divMsgLicenseAgreementPwd {
    background-color: rgba(208, 37, 51, 0.20);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23FF97A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
    color: var(--tr-color-foundation-status-red-300, #FF97A0);
}

/* .tr-eula-input sets outline:none, so the box-shadow ring is the only
   focus affordance. A 16%-alpha green is all but invisible against the
   dark card, which would leave keyboard users with no focus indicator. */
.dark .tr-eula-input:focus {
    box-shadow: 0 0 0 3px rgba(71, 145, 127, 0.40);
}

/* The logo is a dark wordmark on transparency and vanishes against the dark
   card. A white plate is the only fix that is safe for every logo: the src is
   swapped at runtime for arbitrary client and partner logos, so neither a
   pre-inverted asset nor filter: invert() is viable.
   content-box keeps the image itself at 190px; without it the panel's global
   border-box would shrink the logo by the padding in dark mode only. */
.dark #divLicensingAgreement #licenceLogo {
    box-sizing: content-box;
    padding: 10px 14px;
    border-radius: var(--tr-radius-radius-8, 8px);
    background-color: var(--tr-color-static-static-white, #FFFFFF);
}