/*
 * login.css — MERGE Login Page
 * Scope  : Login page only (Layout = null, standalone page)
 * Depends: trellint.css  — all --t-* brand tokens come from there
 *
 * Copied verbatim from ReportWebModernApp (src\ReportWeb.Web\wwwroot\css\login.css)
 * so the MERGE login page matches ReportWeb's look exactly. Structural classes
 * specific to ReportWeb's marketing hero (.rw-nav, .rw-copy, .rw-links,
 * footer.rw-footer, #changeLanguage) are kept for parity but are unused/hidden
 * on the MERGE login view.
 */


/* ═══════════════════════════════════════════════════════════════
   PAGE SHELL
   ═══════════════════════════════════════════════════════════════ */
html { height: 100%; }

html,
html body {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--t-font) !important;
}

html body {
    background-color: var(--t-raisin) !important;
    color: var(--t-ui-text) !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}


/* ═══════════════════════════════════════════════════════════════
   NAV  (hidden on login — preserved for markup completeness)
   ═══════════════════════════════════════════════════════════════ */
.rw-nav { display: none !important; }

.rw-nav__inner {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.rw-nav__logo {
    display: block !important;
    height: 24px !important;
    width: auto !important;
}


/* ═══════════════════════════════════════════════════════════════
   HERO  (full-height dark backdrop)
   ═══════════════════════════════════════════════════════════════ */
.rw-hero {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    background: var(--t-raisin) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(24px, 4vh, 56px) clamp(16px, 3vw, 32px) !important;
    position: relative !important;
    overflow: visible !important;
}

.rw-hero__arc {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    pointer-events: none !important;
    opacity: 0.10 !important;
    z-index: 0 !important;
}

/* Marketing copy panel — hidden, card is centred instead */
.rw-copy { display: none !important; }

/* Grid becomes a transparent pass-through so card inherits hero centering */
.rw-hero__grid { display: contents; }


/* ═══════════════════════════════════════════════════════════════
   LOGIN CARD  (outer shell)
   ═══════════════════════════════════════════════════════════════ */
#login-card {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 480px !important;
    border-radius: var(--t-radius-lg) !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    scrollbar-width: none !important;
}

#login-card::-webkit-scrollbar { display: none !important; }


/* ═══════════════════════════════════════════════════════════════
   CARD HEADER
   ═══════════════════════════════════════════════════════════════ */
#login-header {
    background: var(--t-dark-plum) !important;
    border-top-left-radius: var(--t-radius-lg);
    border-top-right-radius: var(--t-radius-lg);
    padding: var(--t-space-lg) var(--t-content-pad) var(--t-space-md) !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--t-space-sm) !important;
    flex-shrink: 0 !important;
    border: none !important;
}

#login-logo {
    display: block !important;
    height: 22px !important;
    width: auto !important;
    flex-shrink: 0 !important;
}

#login-header-divider {
    width: 1px !important;
    height: 36px !important;
    background: var(--t-ui-divider) !important;
    margin: 0 var(--t-space-sm) !important;
    flex-shrink: 0 !important;
}

#login-app-name {
    font-family: var(--t-font) !important;
    font-size: 0.82rem !important;
    font-weight: 400 !important;
    color: rgba(249, 246, 239, 0.75) !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

#login-badge {
    margin-left: auto !important;
    font-family: var(--t-font) !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    background: var(--t-lime) !important;
    color: var(--t-dark-plum) !important;
    padding: 4px 11px !important;
    border-radius: var(--t-radius-pill) !important;
    white-space: nowrap !important;
    display: inline-block !important;
}


/* ═══════════════════════════════════════════════════════════════
   CARD BODY
   ═══════════════════════════════════════════════════════════════ */
#login-body {
    background: var(--t-cream);
    border-bottom-left-radius: var(--t-radius-lg);
    border-bottom-right-radius: var(--t-radius-lg);
    padding: var(--t-space-xl) var(--t-content-pad) var(--t-space-md) !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
}

#login-body::-webkit-scrollbar { display: none !important; }


/* ═══════════════════════════════════════════════════════════════
   TITLE & SUBTITLE
   ═══════════════════════════════════════════════════════════════ */
#login-title {
    font-family: var(--t-font) !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    color: var(--t-raisin) !important;
    margin: 0 0 var(--t-space-xs) !important;
    padding: 0 !important;
    line-height: 1.15 !important;
}

#login-subtitle {
    font-size: 12px !important;
    color: var(--t-medium-gray) !important;
    margin: 0 0 var(--t-space-lg) !important;
    padding: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════
   FORM FIELDS
   ═══════════════════════════════════════════════════════════════ */
.login-field { margin-bottom: var(--t-space-md) !important; }

.login-label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--t-medium-gray) !important;
    margin-bottom: var(--t-space-sm) !important;
}

.login-input {
    width: 100% !important;
    height: var(--t-space-2xl) !important;
    border: 1px solid var(--t-ui-border) !important;
    border-radius: var(--t-radius-md) !important;
    padding: var(--t-space-sm) var(--t-space-md) !important;
    font-size: 14px !important;
    background: var(--t-ui-input-bg) !important;
    color: var(--t-ui-text) !important;
    font-family: var(--t-font) !important;
    outline: none !important;
    transition: border-color 0.12s, box-shadow 0.12s !important;
    box-sizing: border-box !important;
}

.login-input:focus {
    border-color: var(--t-lime) !important;
    box-shadow: 0 0 0 3px rgba(206, 239, 149, 0.30) !important;
    background: var(--t-ui-page-bg) !important;
}

.login-input::placeholder { color: var(--t-ui-placeholder, #A899A0) !important; }


/* ═══════════════════════════════════════════════════════════════
   PRIMARY "SIGN IN" BUTTON
   ═══════════════════════════════════════════════════════════════ */
#login-btn {
    width: 100% !important;
    background: var(--t-ui-primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--t-radius-sm) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    padding: var(--t-space-md) var(--t-space-lg) !important;
    cursor: pointer !important;
    margin-top: var(--t-space-sm) !important;
    margin-bottom: 12px !important;
    font-family: var(--t-font) !important;
    transition: opacity 0.12s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: var(--t-space-2xl) !important;
}

#login-btn:hover { opacity: 0.88 !important; }

#login-btn:focus {
    outline: 2px solid var(--t-lime) !important;
    outline-offset: 2px !important;
}


/* ═══════════════════════════════════════════════════════════════
   "OR" DIVIDER
   ═══════════════════════════════════════════════════════════════ */
#login-divider {
    display: flex !important;
    align-items: center !important;
    gap: var(--t-space-md) !important;
    margin: var(--t-space-md) 0 !important;
}

#login-divider::before,
#login-divider::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: var(--t-ui-border) !important;
}

#login-divider span {
    font-family: var(--t-font) !important;
    font-size: 12px !important;
    color: var(--t-medium-gray) !important;
    letter-spacing: 0.08em !important;
}


/* ═══════════════════════════════════════════════════════════════
   SSO BUTTON
   ═══════════════════════════════════════════════════════════════ */
#login-sso-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    background: transparent !important;
    color: var(--t-ui-primary) !important;
    border: 1px solid var(--t-ui-primary) !important;
    border-radius: var(--t-radius-sm) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    padding: var(--t-space-md) var(--t-space-lg) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    font-family: var(--t-font) !important;
    transition: background 0.12s, color 0.12s !important;
    box-sizing: border-box !important;
}

#login-sso-btn:hover {
    background: var(--t-ui-primary) !important;
    color: #ffffff !important;
}

#login-sso-btn:focus {
    outline: 2px solid var(--t-lime) !important;
    outline-offset: 2px !important;
}

.login-sso-icon {
    height: 18px !important;
    width: auto !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
    margin-bottom: 2px !important;
}


/* ═══════════════════════════════════════════════════════════════
   ERROR AREA
   ═══════════════════════════════════════════════════════════════ */
#login-error-area { min-height: 0; }

#login-error {
    display: block !important;
    background-color: var(--t-status-fail-bg) !important;
    border: 1px solid var(--t-status-fail-border) !important;
    border-radius: var(--t-radius-sm) !important;
    padding: var(--t-space-sm) var(--t-space-md) !important;
    color: var(--t-status-fail-text) !important;
    font-size: 14px !important;
    margin-top: var(--t-space-md) !important;
    margin-bottom: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════
   SUBMIT SPINNER
   ═══════════════════════════════════════════════════════════════ */
.login-btn-spinner {
    display: inline-block;
    width: var(--t-space-md);
    height: var(--t-space-md);
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: login-spin 0.7s linear infinite;
}

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


/* ═══════════════════════════════════════════════════════════════
   LOADER  (shown during AJAX login request)
   ═══════════════════════════════════════════════════════════════ */
.lds-ellipsis {
    display: none;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 2px 0 4px !important;
}

.lds-ellipsis div {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: var(--t-lime) !important;
    position: static !important;
    animation: rwPulse 1.1s infinite !important;
}

.lds-ellipsis div:nth-child(2) { animation-delay: .15s !important; }
.lds-ellipsis div:nth-child(3) { animation-delay: .30s !important; }
.lds-ellipsis div:nth-child(4) { animation-delay: .45s !important; }

@keyframes rwPulse {
    0%, 80%, 100% { transform: scale(.5); opacity: .25; }
    40%           { transform: scale(1);  opacity: 1;   }
}


/* ═══════════════════════════════════════════════════════════════
   VALIDATION ERRORS  (field-level spans)
   Note: the login-error banner uses .t-alert.t-alert-error from trellint.css
   ═══════════════════════════════════════════════════════════════ */
#login-body .text-danger,
#login-body span.text-danger {
    font-family: var(--t-font) !important;
    font-size: 0.78rem !important;
    color: var(--t-status-fail-text) !important;
    margin-top: 3px !important;
    display: none;
}


/* ═══════════════════════════════════════════════════════════════
   LOGIN ERROR BANNER  (per Artifacts/AlertLabel.png)
   Fully rounded box with a soft border on all sides, replacing the
   default left-accent-bar style of .t-alert-error from trellint.css
   ═══════════════════════════════════════════════════════════════ */
#login-error-area .t-alert-error {
    border: 1px solid #F5C6CB;
    border-radius: 10px;
}


/* ═══════════════════════════════════════════════════════════════
   LINKS ROW  (forgot password — hidden per design)
   ═══════════════════════════════════════════════════════════════ */
.rw-links { display: none !important; }

.rw-links a {
    font-family: var(--t-font) !important;
    font-size: 0.82rem !important;
    color: var(--t-ui-primary) !important;
    text-decoration: none !important;
}

.rw-links a:hover { text-decoration: underline !important; }


/* ═══════════════════════════════════════════════════════════════
   OR SEPARATOR
   ═══════════════════════════════════════════════════════════════ */
.rw-sep {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
}

.rw-sep::before,
.rw-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--t-ui-border);
}

.rw-sep span {
    font-family: var(--t-font);
    font-size: 0.8rem;
    color: var(--t-ui-muted);
}


/* ═══════════════════════════════════════════════════════════════
   BOOTSTRAP MODAL OVERRIDES  (Change Password / Save Email modals)
   Resets Bootstrap defaults to Trellint brand tokens.
   ═══════════════════════════════════════════════════════════════ */
.modal-content {
    border-radius: var(--t-radius-lg) !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: var(--t-shadow-modal) !important;
}

.modal-content .card-header {
    background: var(--t-ui-primary) !important;
    border: none !important;
    border-radius: var(--t-radius-lg) var(--t-radius-lg) 0 0 !important;
    padding: 16px 20px !important;
    position: static !important;
}

.modal-content .card-header h4 {
    color: #ffffff !important;
    font-family: var(--t-font) !important;
    font-weight: 700 !important;
    margin: 0 !important;
    font-size: 1.05rem !important;
}

.modal-content .card-body {
    background: var(--t-cream) !important;
    padding: 24px 28px !important;
}

.modal-content .form-label {
    font-family: var(--t-font) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--t-ui-text) !important;
}


/* ═══════════════════════════════════════════════════════════════
   SSO-ONLY MODE  (DisplayGenericLogin = false)
   Renders the SSO button as the sole primary action.
   ═══════════════════════════════════════════════════════════════ */
#login-sso-btn.login-sso-btn--standalone {
    background: var(--t-ui-primary) !important;
    color: #ffffff !important;
    border: none !important;
    margin-top: var(--t-space-sm) !important;
}

#login-sso-btn.login-sso-btn--standalone:hover {
    opacity: 0.88 !important;
    background: var(--t-ui-primary) !important;
    color: #ffffff !important;
}

.modal-content .form-control {
    background: var(--t-ui-input-bg) !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    color: var(--t-ui-text) !important;
    font-family: var(--t-font) !important;
    font-size: 0.9rem !important;
    padding: 10px 13px !important;
    height: auto !important;
    box-shadow: none !important;
}

.modal-content .form-control:focus {
    border-color: var(--t-lime) !important;
    box-shadow: 0 0 0 3px rgba(206, 239, 149, 0.30) !important;
    background: #ffffff !important;
}

.modal-content .btn-primary {
    background: var(--t-ui-primary) !important;
    border-color: var(--t-ui-primary) !important;
    border-radius: var(--t-radius-sm) !important;
    font-family: var(--t-font) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    padding: 10px 22px !important;
    transition: opacity 0.12s !important;
}

.modal-content .btn-primary:hover { opacity: 0.88 !important; }

.modal-content a.small,
.modal-content .small {
    font-family: var(--t-font) !important;
    font-size: 0.85rem !important;
    color: var(--t-ui-primary) !important;
    text-decoration: none !important;
}

.modal-content a.small:hover { text-decoration: underline !important; }

.modal-content .text-message {
    display: block !important;
    font-family: var(--t-font) !important;
    font-size: 0.875rem !important;
    color: var(--t-ui-text) !important;
    margin-bottom: 6px !important;
}


/* ═══════════════════════════════════════════════════════════════
   FOOTER  (hidden — trellint logo / copyright)
   ═══════════════════════════════════════════════════════════════ */
footer.rw-footer { display: none !important; }

.rw-footer__copy,
.rw-footer__copy a {
    font-family: var(--t-font) !important;
    font-size: 11px !important;
    color: var(--t-dark-plum) !important;
    text-decoration: none !important;
    margin: 0 !important;
}

.rw-footer__copy a:hover { color: var(--t-ui-primary) !important; }

.rw-footer__logo {
    height: 28px !important;
    width: 134px !important;
    display: block !important;
    flex-shrink: 0 !important;
    max-width: none !important;
}

#changeLanguage { display: none !important; }


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ≥1024px  desktop — 100vh lock, card vertically centred
   <1024px  tablet  — natural scroll
   <768px   mobile  — reduced padding
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
    html body {
        height: 100vh !important;
        overflow: hidden !important;
    }

    .rw-hero { height: 100vh !important; }

    #login-card { max-height: calc(100vh - clamp(48px, 8vh, 112px)) !important; }
}

@media (min-width: 1024px) and (max-height: 700px) {
    #login-subtitle { display: none !important; }
    #login-body .login-field { margin-bottom: 12px !important; }
    #login-body { padding: 20px 22px 18px !important; }
}

@media (max-width: 767px) {
    html body {
        height: auto !important;
        overflow-y: auto !important;
    }

    .rw-hero {
        align-items: flex-start !important;
        padding: 24px 16px 32px !important;
    }

    #login-card { max-height: none !important; }
}

@media (max-width: 479px) {
    .rw-nav { padding: 0 14px !important; }

    .rw-hero { padding: 16px 12px 24px !important; }

    #login-header {
        padding: 12px 16px !important;
        gap: 10px !important;
    }

    #login-header-divider { height: 22px !important; }

    #login-body { padding: 20px 16px !important; }

    #login-title { font-size: 1.45rem !important; }

    footer.rw-footer {
        height: auto !important;
        min-height: 0 !important;
        padding: 10px 14px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
}