/* New-gen login page styles. Builds on general.css (shared .btn/.btn-primary
   and the navy/orange palette). Same layout as the Investor Portal login:
   a single centered card on the light-gray page. The operator system message
   renders BELOW that card — `.login-sysnotice` at the end of this file. It was
   a band in the shared footer until 2026-09-02 (ClickUp 868m069pv). */

.login-body {
    background: var(--page-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* std-deviation — THE LOGIN TEST BANNER KEEPS ITS OWN PALETTE, DELIBERATELY.
   The app has three environment markers and this is the loudest: the footer's
   `.qa-test-banner` (amber on near-black, app_footer.css) and the shared
   `.qa-only` control marker (brand orange, general.css) are both quiet on
   purpose — they annotate a page a developer already knows they are on. This one
   answers a different question, once, before anybody has typed a password: am I
   about to sign in to the TEST system? 40px yellow-on-red is unmissable at a
   glance and unmistakable for chrome, and being a different colour from the other
   two markers is the point rather than an oversight. Do NOT converge it onto
   `.qa-test-banner` or `.qa-only`; a control marker is not a full-bleed
   environment banner, and neither of the quiet palettes would survive being
   scaled to a slab. The GATE is shared — app_is_qa_url(), see login_view.php. */
.login-qa-banner {
    text-align: center;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 14px 20px;
    background: #ffeb00;
    color: #d10000;
    text-transform: uppercase;
}

.login-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}

.login-card {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    padding: 32px 30px 28px;
    border-top: 4px solid var(--navy);
}

.login-logo {
    text-align: center;
    margin-bottom: 18px;
}
.login-logo img {
    max-height: 64px;
    max-width: 100%;
}

.login-title {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #1d1d1b;
    margin: 0 0 4px;
}
.login-subtitle {
    text-align: center;
    font-size: 14px;
    color: #777;
    margin: 0 0 22px;
}

.login-message {
    border-radius: 6px;
    padding: 11px 14px;
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 18px;
    border: 1px solid transparent;
}
.login-message--error {
    background: #fdecea;
    color: #b3261e;
    border-color: #f5c6cb;
}
.login-message--info {
    background: #e8f1fb;
    color: var(--navy);
    border-color: #bcd6f0;
}

.login-field {
    margin-bottom: 16px;
}
.login-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}
.login-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    font-size: 15px;
    border: 1px solid #cfcfcf;
    border-radius: 6px;
    background: #fff;
    color: #222;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.login-input:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(15, 52, 96, 0.12);
}

.login-password-wrap {
    position: relative;
}
.login-password-wrap .login-input {
    padding-right: 44px;
}
.login-password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #888;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.login-password-toggle:hover { color: var(--navy); }

.login-actions {
    margin-top: 22px;
}
.login-submit {
    width: 100%;
    justify-content: center;
    padding: 12px 14px;
    font-size: 15px;
    border-radius: 6px;
}
.login-submit[disabled] {
    opacity: 0.65;
    cursor: default;
}
/* Spinner shown inside the submit button while the form is posting (added by
   login.js on submit). Reuses the shared `spin` keyframes from general.css;
   white on the navy primary button, spaced from the label by the .btn gap. */
.login-submit .btn-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.login-links {
    margin-top: 18px;
    text-align: center;
    font-size: 13px;
}
.login-links a {
    color: var(--navy);
    text-decoration: none;
}
.login-links a:hover {
    text-decoration: underline;
}

/* ---- Operator SYSTEM NOTICE, login skin ----
   The panel below the sign-in card (ClickUp 868m069pv, 2026-09-02; it was a band
   in the shared footer before that). Markup is the shared partial
   views/general/app_system_notice.php, so this is the SAME
   `.callout-banner--info` + `.app-sysnotice` component every portal screen gets
   — these rules only scale it to the login mockup's larger metrics and undo the
   two portal-only details. (On the portal that component is now the panel of a
   FLOATING DOCK in the bottom-right corner — ClickUp 868m1j9kz, 2026-09-04 —
   so do not go looking for a matching in-flow band to keep in step with. The
   login panel deliberately stays in flow: signed out, the notice is the point.)

   Why a skin rather than a second component: the ticket asks for a "distinct
   login-page appearance" while staying "visually aligned with the overall
   application UI", and one signed-out page is not a reason to own a second blue
   panel that then drifts from the shared one. general.css loads BEFORE login.css
   on this page, so these single-class rules win on source order at equal
   specificity — do not raise them to !important.

   WIDTH. The mockup's notice is wider than its card (714 over 590). This login's
   card is 400px, so the same proportion lands at 480px — the notice reads as its
   own panel rather than a second card, without touching the card itself (the
   ticket forbids changing anything else on this page). */
.login-sysnotice {
    width: 100%;
    max-width: 480px;
    margin: 26px 0 0;
    /* No close control here, so the right side needs no clearance. */
    padding: 20px 24px 22px;
    gap: 18px;
    box-shadow: 0 8px 24px rgba(40, 95, 150, 0.05);
}
.login-sysnotice .app-sysnotice-icon {
    width: 40px;
    height: 40px;
}
.login-sysnotice .app-sysnotice-icon svg {
    width: 22px;
    height: 22px;
}
.login-sysnotice .callout-banner-label {
    font-size: 12.5px;
    letter-spacing: 1.3px;
    margin-bottom: 6px;
}
.login-sysnotice .app-sysnotice-text {
    font-size: 14.5px;
    line-height: 1.55;
}

@media (max-width: 480px) {
    .login-card { padding: 24px 20px; }
    /* std-deviation - the phone size of the same deliberate banner; see the
       reason on the base rule above. Still unmissable at 28px. */
    .login-qa-banner { font-size: 28px; }
    .login-sysnotice { padding: 16px 18px 18px; gap: 14px; }
    .login-sysnotice .app-sysnotice-icon { width: 34px; height: 34px; }
    .login-sysnotice .app-sysnotice-icon svg { width: 19px; height: 19px; }
    .login-sysnotice .app-sysnotice-text { font-size: 13.5px; }
}