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

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