/*
 * Login page — sign-in panel and page chrome.
 * Spec: docs/superpowers/specs/2026-08-20-login-page-redesign-design.md
 *
 * Loads after styles-login.css, slimselect.css, theme.css and
 * tr365-components.css, and wins on source order. Adds only what the shared
 * component library lacks; it does not restate borders, focus, hover or error
 * styling that tr365-components.css already owns.
 *
 * The .ss-* rules are deliberately unscoped: SlimSelect appends its dropdown
 * panel to document.body, outside the .tr-login wrapper. This file is loaded
 * by Login.aspx alone, so unscoped rules cannot leak to another page.
 */

/* 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;
}

/* ============================================================
   PAGE CHROME
   styles-login.css is shared by ten pages and must not be edited,
   so its body rules are neutralised here instead.
   ============================================================ */
html,
body {
    height: auto;
    margin: 0;
    padding: 0;
}

body {
    background-image: none;
    background-color: var(--tr-color-bg-weak-50, #EEF0F2);
    color: var(--tr-color-text-primary, #171C22);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 20px;
}

.tr-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 48px 20px;
    box-sizing: border-box;
}

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

/* ---------- Card ---------- */
.tr-login-card {
    width: 100%;
    max-width: 420px;
    padding: var(--tr-spacing-spacing-40, 40px);
    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);
    box-sizing: border-box;
}

.tr-login-logo {
    margin: 0 0 var(--tr-spacing-spacing-32, 32px);
    text-align: center;
}

.tr-login-logo img {
    width: 190px;
    max-width: 100%;
    height: auto;
}

/* reset.css is not loaded on this page, so h1 and p keep their UA margins. */
.tr-login-heading {
    margin-bottom: var(--tr-spacing-spacing-24, 24px);
}

.tr-login-title {
    margin: 0 0 var(--tr-spacing-spacing-6, 6px);
}

.tr-login-subtitle {
    margin: 0;
    color: var(--tr-color-text-secondary, #4C5F75);
}

/* ---------- Footer ---------- */
.tr-login-footer {
    margin-top: var(--tr-spacing-spacing-32, 32px);
    text-align: center;
    color: var(--tr-color-text-disabled, #8C9AAB);
}

/* ============================================================
   ERROR ALERT
   DisplayMessage() in the code-behind writes style="display:block"
   inline, which beats any display declared here. The icon is therefore
   a background image, not a flex child.
   ============================================================ */
.tr-login-alert {
    /* Defensive default. DisplayMessage() and login.js both write display
       inline, which beats this, so the box only ever shows with a message. */
    display: none;
    margin-bottom: var(--tr-spacing-spacing-20, 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;
}

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

/* ============================================================
   FIELDS
   ============================================================ */
.tr-login-field {
    margin-bottom: var(--tr-spacing-spacing-20, 20px);
}

.tr-login-label {
    display: block;
    margin-bottom: var(--tr-spacing-spacing-6, 6px);
}

.tr-login-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--tr-spacing-spacing-6, 6px);
}

.tr-login-label-row .tr-login-label {
    margin-bottom: 0;
}

.tr-login-forgot {
    color: var(--tr-color-text-brand-primary, #19765F);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
}

.tr-login-forgot:hover {
    text-decoration: underline;
}

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

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

/* Taller than .tr-input-md: a login form, not a dense in-app grid. */
.tr-login-input {
    height: 40px;
    padding: 9px 12px 9px 40px;
    border-radius: var(--tr-radius-radius-10, 10px);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 20px;
}

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

/* The component default greys the field on hover; the mockups keep it white. */
.tr-login .tr-input:hover {
    background-color: var(--tr-color-bg-white-0, #FFFFFF);
    border-color: var(--tr-color-stroke-soft-200, #B0BAC5);
    box-shadow: 0 1px 2px rgba(10, 13, 20, 0.03);
}

/* The component default focus ring is neutral; the mockups show brand green. */
.tr-login .tr-input:focus {
    border-color: var(--tr-color-stroke-brand-primary-500, #19765F);
    box-shadow: 0 0 0 3px rgba(25, 118, 95, 0.16);
}

/* Same specificity as the green rule above, so these MUST stay below it in
   source order or an invalid field would show a green ring. */
.tr-login .tr-input-error,
.tr-login .tr-input-error:hover {
    border-color: var(--tr-color-stroke-brand-error-700, #D02533);
    box-shadow: none;
}

.tr-login .tr-input-error:focus {
    border-color: var(--tr-color-stroke-brand-error-700, #D02533);
    box-shadow: 0 0 0 3px rgba(208, 37, 51, 0.16);
}

/* ---------- Password visibility toggle ---------- */
.tr-login-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);
    cursor: pointer;
    line-height: 0;
}

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

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

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

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

.tr-login-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
   ============================================================ */
.tr-login-submit {
    position: relative;
    margin-top: var(--tr-spacing-spacing-24, 24px);
}

.tr-login-btn {
    width: 100%;
    height: 44px;
    border-radius: var(--tr-radius-radius-10, 10px);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    gap: var(--tr-spacing-spacing-8, 8px);
}

/* Stays in the DOM as the form's default button so Enter-key implicit
   submission still reaches it. display:none can drop it from that role. */
.tr-login-hidden-submit {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.tr-login-spinner {
    display: none;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.is-submitting .tr-login-spinner {
    display: block;
    animation: tr-login-spin 0.7s linear infinite;
}

@keyframes tr-login-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Blocks a second click without the [disabled] attribute, which
   tr-btn[disabled] would render at 50% opacity. */
.is-submitting .tr-login-btn {
    pointer-events: none;
}

/* Indeterminate sweep: a full postback offers no real progress figure. */
.tr-login-progress {
    position: relative;
    display: none;
    height: 4px;
    margin-top: var(--tr-spacing-spacing-12, 12px);
    border-radius: var(--tr-radius-radius-full, 9999px);
    background-color: var(--tr-color-bg-weak-50, #EEF0F2);
    overflow: hidden;
}

.is-submitting .tr-login-progress {
    display: block;
}

.tr-login-progress span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 40%;
    border-radius: var(--tr-radius-radius-full, 9999px);
    background-color: var(--tr-color-bg-brand-primary-500, #19765F);
    animation: tr-login-sweep 1.2s ease-in-out infinite;
}

@keyframes tr-login-sweep {
    0% {
        left: -40%;
    }
    100% {
        left: 100%;
    }
}

/* Visual only. Never set [disabled] on these inputs — a disabled control is
   omitted from the postback and the login would silently fail. */
.is-submitting .tr-login-input {
    background-color: var(--tr-color-bg-weak-50, #EEF0F2);
    color: var(--tr-color-text-disabled, #8C9AAB);
}

.is-submitting .tr-login-control,
.is-submitting .ss-main {
    pointer-events: none;
}

/* A focus ring on a greyed-out field reads as still-interactive. */
.is-submitting .tr-input:focus {
    border-color: var(--tr-color-stroke-softer-100, #CAD0D8);
    box-shadow: none;
}

.tr-login-unlock {
    display: inline-block;
    margin-top: var(--tr-spacing-spacing-16, 16px);
    color: var(--tr-color-text-brand-primary, #19765F);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.tr-login-unlock:hover {
    text-decoration: underline;
}

/* ============================================================
   ROLE DROPDOWN
   The .ss-* theme lives in tr365-components.css; only metrics and the
   mockup's rounded rows plus selected checkmark are added here.
   !important appears only where the component file already uses it.
   ============================================================ */
.ss-main {
    height: 40px !important;
    border-radius: var(--tr-radius-radius-10, 10px) !important;
    font-size: 14px !important;
}

.ss-main:focus-within,
.ss-main.ss-open-below,
.ss-main.ss-open-above {
    border-color: var(--tr-color-stroke-brand-primary-500, #19765F) !important;
    box-shadow: 0 0 0 3px rgba(25, 118, 95, 0.16) !important;
}

.ss-main .ss-values .ss-single {
    padding: 0 var(--tr-spacing-spacing-12, 12px) !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

.ss-content {
    padding: var(--tr-spacing-spacing-6, 6px);
    border-radius: var(--tr-radius-radius-12, 12px) !important;
}

.ss-content .ss-list .ss-option {
    margin: 2px 0;
    padding: 10px 12px !important;
    border-radius: var(--tr-radius-radius-8, 8px);
    font-size: 14px !important;
    line-height: 20px !important;
}

/* slimselect.css puts `border-left: 5px solid var(--ss-primary-color)` on
   `.ss-option:hover:not(.ss-disabled)`. The theme in tr365-components.css
   overrides only background-color there, so the library's #5897FB bar
   survived — and with the global border-box it also shoved the label 5px
   right on hover. The grey fill is the whole hover affordance we want.
   Matching the library's specificity is enough; login.css loads later. */
.ss-content .ss-list .ss-option:hover,
.ss-content .ss-list .ss-option:hover:not(.ss-disabled) {
    border-left: 0;
}

.ss-content .ss-list .ss-option.ss-selected {
    position: relative;
    padding-right: 40px !important;
}

.ss-content .ss-list .ss-option.ss-selected::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23125443' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 16px 16px;
}

/* ============================================================
   LEGACY PANEL GUARDS
   tr365-components.css sets box-sizing:border-box globally and this
   file restyles body typography. styles-login.css was written against
   content-box and OpenSans, so both are re-asserted inside the panels
   this redesign does not touch.
   ============================================================ */
#divResetPassword,
#divResetPassword *,
#divLostPassword,
#divLostPassword *,
#divAttestationTC,
#divAttestationTC * {
    box-sizing: content-box;
}

#divResetPassword,
#divLostPassword {
    font-family: 'OpenSansRegular', Verdana, sans-serif;
    font-size: 12px;
    line-height: 18px;
    color: #b7b7b7;
}

/* .new-pass-text and .confirm-pass-text are position:absolute and used to
   anchor to #login-box, which this redesign removes. */
#loginResetPass {
    position: relative;
}

/* The reset panel keeps its legacy look but now sits inside the new card,
   whose content box is 340px. Its fixed widths were tuned for the old
   446px chrome and would otherwise overhang the card by ~68px. */
#divResetPassword {
    float: none;
    width: 100%;
}

#loginResetPass {
    width: 100%;
    max-width: 100%;
}

#divResetPassword .newpassword,
#divResetPassword .confirmpassword {
    width: 74%;
    max-width: 74%;
}

/* styles-login.css floats both the title block and the h4 inside it, so the
   block collapsed to height:0 and "Create your new password" was painted
   underneath the reset box. Unfloat both. Scoped to #divResetPassword so the
   licensing panel's own .lost-password-content keeps its layout. */
#divResetPassword .lost-password-content {
    float: none;
    width: 100%;
}

#divResetPassword .lost-password-content h4 {
    float: none;
}

/* ============================================================
   NARROW VIEWPORTS
   ============================================================ */
@media (max-width: 480px) {
    .tr-login {
        padding: 32px 16px;
    }

    .tr-login-card {
        padding: var(--tr-spacing-spacing-24, 24px) var(--tr-spacing-spacing-20, 20px);
    }

    .tr-login-logo img {
        width: 160px;
    }
}