/* Login page styles — uses design tokens from variables.css */
/* --base-unit: 0.5rem (8px). All spacing = calc(var(--base-unit) * N) */

.login-body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: var(--surface-neutral-base);
}

.login-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: calc(var(--base-unit) * 3);                       /* 1.5rem / 24px */
}

.login-box-container {
    background-color: var(--surface-neutral-light);
    border-radius: calc(var(--base-unit) * 1.5);               /* 0.75rem / 12px */
    width: 100%;
    max-width: calc(var(--base-unit) * 60);                    /* 30rem / 480px */
    border: calc(var(--base-unit) * 0.125) solid var(--stroke-neutral-base); /* 1px */
    overflow: hidden;
}

.login-box-inner {
    padding: calc(var(--base-unit) * 5) calc(var(--base-unit) * 5) calc(var(--base-unit) * 4);
    /* 2.5rem 2.5rem 2rem / 40px 40px 32px */
}

.login-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: calc(var(--base-unit) * 2);                   /* 1rem / 16px */
    padding-bottom: var(--base-unit);                           /* 0.5rem / 8px */
}

.login-logo {
    height: calc(var(--base-unit) * 8.75);                     /* 4.375rem / 70px */
    object-fit: contain;
}

.login-heading {
    text-align: center;
    font-size: calc(var(--base-unit) * 2.5);                   /* 1.25rem / 20px */
    font-weight: 600;
    color: var(--content-neutral-dark);
    padding: calc(var(--base-unit) * 1.5) 0 var(--base-unit);  /* 12px 0 8px */
}

.login-subtitle {
    text-align: center;
    font-size: calc(var(--base-unit) * 1.75);                  /* 0.875rem / 14px */
    color: var(--content-neutral-light);
    margin-bottom: calc(var(--base-unit) * 2);                 /* 1rem / 16px */
}

/* Page title variant — 24px / 700 per design system Section 5.1 */
.login-page-title {
    text-align: center;
    font-size: calc(var(--base-unit) * 3);                     /* 1.5rem / 24px */
    font-weight: 700;
    color: var(--content-neutral-dark);
    margin: 0;
    padding: calc(var(--base-unit) * 1.5) 0 var(--base-unit);  /* 12px 0 8px */
}

/* Body text on login layout — 14px / 400 per design system Section 5.1 */
.login-body-text {
    text-align: center;
    font-size: calc(var(--base-unit) * 1.75);                  /* 0.875rem / 14px */
    font-weight: 400;
    color: var(--content-neutral-semi-dark);
    margin: 0 0 calc(var(--base-unit) * 2);                    /* 0 0 16px */
    line-height: calc(var(--base-unit) * 2.75);                /* 1.375rem / 22px */
}

/* ---- Classic Bridge page: pixel-matched to manager screenshot ---- */
/* Page-scoped — design rules waived for this page per stakeholder request.
   Uses Inter font (loaded in the view) to match the screenshot's typography exactly. */

.login-box-container:has(.login-bridge-inner) {
    max-width: 26rem;                                          /* 416px */
    border: none;
    border-radius: 1.5rem;                                     /* 24px */
    box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.08),
                0 0.125rem 0.5rem rgba(0, 0, 0, 0.04);
    background-color: #ffffff;
}

.login-bridge-inner {
    /* Inter applied here so heading, body, button, and footer all inherit it. */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 2.5rem 2.5rem 2.25rem;                            /* 40px 40px 36px */
    text-align: center;
}

.login-bridge-logo-block {
    margin-bottom: 2rem;                                       /* 32px */
}

.login-bridge-logo {
    height: 3.25rem;                                           /* 52px */
    object-fit: contain;
}

.login-bridge-welcome-block {
    margin: 0 0 2rem;                                          /* 32px */
}

.login-bridge-title {
    font-family: inherit;                                      /* Inter from .login-bridge-inner */
    font-size: 1.75rem;                                        /* 28px — matches screenshot scale */
    font-weight: 700;                                          /* Bold, NOT extra-bold */
    color: #0f172a;                                            /* near-pure black, very slight cool tint */
    margin: 0 0 1rem;                                          /* 16px */
    line-height: 1.3;                                          /* natural — no squeeze */
    letter-spacing: 0;                                         /* no tracking — Inter handles it */
}

.login-bridge-subtitle {
    font-family: inherit;
    font-size: 1rem;                                           /* 16px */
    font-weight: 400;
    color: #6b7280;                                            /* medium grey — matches screenshot */
    line-height: 1.55;
    margin: 0;
    padding: 0 0.25rem;
}

.login-bridge-cta-block {
    margin-bottom: 1.75rem;                                    /* 28px */
}

/* Button — overrides default sky-button to match screenshot. */
.login-bridge-cta-block .btn {
    font-family: inherit;
    height: 3.25rem;                                           /* 52px */
    min-height: 3.25rem;
    line-height: 3.25rem;
    border-radius: 0.875rem;                                   /* 14px — softer, more rounded */
    font-size: 1.0625rem;                                      /* 17px */
    font-weight: 600;
    padding: 0 1.5rem;
    background-color: #2563eb;                                 /* vivid royal blue per screenshot */
    border-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 0.125rem 0.5rem rgba(37, 99, 235, 0.18);
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.login-bridge-cta-block .btn:hover {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
    box-shadow: 0 0.25rem 0.75rem rgba(37, 99, 235, 0.25);
}

.login-bridge-cta-block .btn:active {
    background-color: #1e40af;
    border-color: #1e40af;
    transform: translateY(1px);
}

/* Bridge footer — page-scoped, matches screenshot. */
.login-bridge-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;                                               /* 8px between text and logo */
    margin: 0;
    padding: 0;
}

.login-bridge-footer-text {
    font-family: inherit;
    font-size: 0.8125rem;                                      /* 13px */
    font-weight: 600;                                          /* slightly lighter than 700 — matches screenshot */
    line-height: 1;
    color: #9ca3af;
    letter-spacing: 0.02em;
}

.login-bridge-footer-logo {
    height: 1.5rem;                                            /* 24px */
    object-fit: contain;
}

.login-form .form-label {
    font-size: calc(var(--base-unit) * 1.75);                  /* 0.875rem / 14px */
    font-weight: 600;
    color: var(--content-neutral-semi-dark);
    margin-bottom: calc(var(--base-unit) * 0.75);              /* 0.375rem / 6px */
}

.login-form .form-control {
    border-radius: var(--base-unit);                            /* 0.5rem / 8px */
    border: calc(var(--base-unit) * 0.125) solid var(--stroke-neutral-base); /* 1px */
    padding: calc(var(--base-unit) * 1.25) calc(var(--base-unit) * 1.75);
    /* 0.625rem 0.875rem / 10px 14px */
    font-size: calc(var(--base-unit) * 1.875);                 /* 0.9375rem / 15px */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.login-form .form-control:focus {
    border-color: var(--primary-base);
    box-shadow: 0 0 0 calc(var(--base-unit) * 0.25) var(--primary-20); /* 2px */
}

.login-form .btn-primary {
    background-color: var(--surface-brand-primary-semi-dark);
    border-color: var(--surface-brand-primary-semi-dark);
    border-radius: var(--base-unit);                            /* 0.5rem / 8px */
    padding: calc(var(--base-unit) * 1.25) calc(var(--base-unit) * 2);
    /* 0.625rem 1rem / 10px 16px */
    font-size: calc(var(--base-unit) * 1.875);                 /* 0.9375rem / 15px */
    font-weight: 600;
    transition: background-color 0.2s ease-in-out;
}

.login-form .btn-primary:hover {
    background-color: var(--surface-brand-primary-dark);
    border-color: var(--surface-brand-primary-dark);
}

.login-form .btn-primary:active {
    background-color: var(--primary-90);
    border-color: var(--primary-90);
}

.login-form .btn-primary:disabled {
    background-color: var(--surface-brand-primary-semi-dark);
    border-color: var(--surface-brand-primary-semi-dark);
    opacity: 0.65;
}

.login-forgot-link {
    color: var(--content-brand-primary-base);
    font-size: calc(var(--base-unit) * 1.75);                  /* 0.875rem / 14px */
    text-decoration: none;
    font-weight: 600;
}

.login-forgot-link:hover {
    color: var(--content-brand-primary-dark);
    text-decoration: underline;
}

.login-powered-by {
    display: flex;
    padding: calc(var(--base-unit) * 2) 0 calc(var(--base-unit) * 3.5);
    /* 1rem 0 1.75rem / 16px 0 28px */
    align-items: center;
    justify-content: center;
}

.login-powered-by-text {
    font-size: calc(var(--base-unit) * 1.5);                   /* 0.75rem / 12px */
    font-weight: 700;
    line-height: calc(var(--base-unit) * 2.5);                 /* 1.25rem / 20px */
    color: var(--content-neutral-light);
    padding-right: var(--base-unit);                            /* 0.5rem / 8px */
}

.login-powered-by-logo {
    height: calc(var(--base-unit) * 3.25);                     /* 1.625rem / 26px */
    object-fit: contain;
}

.login-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--base-unit) * 4.5);                       /* 2.25rem / 36px */
    height: calc(var(--base-unit) * 4.5);                      /* 2.25rem / 36px */
    border-radius: 50%;
    border: none;
    background-color: transparent;
    color: var(--content-neutral-semi-dark);
    cursor: pointer;
    transition: background-color 0.15s;
    padding: 0;
}

.login-back-btn:hover {
    background-color: var(--surface-neutral-base);
}

.login-back-btn svg {
    width: calc(var(--base-unit) * 2.5);                       /* 1.25rem / 20px */
    height: calc(var(--base-unit) * 2.5);                      /* 1.25rem / 20px */
}

.login-header-row {
    display: flex;
    align-items: center;
    gap: calc(var(--base-unit) * 1.5);                         /* 0.75rem / 12px */
    padding: calc(var(--base-unit) * 1.5) 0 calc(var(--base-unit) * 0.5);
    /* 0.75rem 0 0.25rem / 12px 0 4px */
}

/* Alert styles */
.login-form .alert {
    border-radius: var(--base-unit);                            /* 0.5rem / 8px */
    font-size: calc(var(--base-unit) * 1.75);                  /* 0.875rem / 14px */
    border: none;
}

.login-form .alert-success {
    background-color: var(--success-10);
    color: var(--success-80);
}

.login-form .alert-danger {
    background-color: var(--danger-10);
    color: var(--danger-80);
}

/* Responsive adjustments */
@media (max-width: 36rem) {
    .login-page {
        padding: calc(var(--base-unit) * 2);                   /* 1rem / 16px */
    }

    .login-box-container {
        border-radius: var(--base-unit);                        /* 0.5rem / 8px */
    }

    .login-box-inner {
        padding: calc(var(--base-unit) * 3.5) calc(var(--base-unit) * 2.5) calc(var(--base-unit) * 2.5);
        /* 1.75rem 1.25rem 1.25rem / 28px 20px 20px */
    }
}