/* ==========================================================================
   auth-shell.css — the sign-in shell's card: the centred login wrapper, the
   card, its logo and header, the sign-in button and the mobile step.
   --------------------------------------------------------------------------
   WHAT IT OWNS: `.login-wrapper`, `.login-card` (+ the `fadeSlideUp`
   keyframes), `.login-header`, `.login-logo`, `.btn-login` (+ :hover / :focus /
   :disabled), and one ≤767px media block.

   CARRIERS: the sign-in views rendered on `_AuthLayout` (`Views\Auth\Login`,
   `Views\User\ForgetPassword`). It is linked ONCE, from
   `Views\Shared\_AuthMeta.cshtml` — never per view.

   DEPENDENCIES — LOAD-BEARING
     · It reads the `--primary` token family from `lib-v2\css\app-base.css`
       (`--card-radius`, `--shadow-md`, `--primary`, `--primary-dark`,
       `--transition`). `_AuthMeta` links `app-base.css` immediately BEFORE
       this sheet; if either token resolves empty the card silently loses its
       radius and shadow, so keep the two links together and in that order.
     · Both sheets sit at the END of `_AuthMeta`, after every other sheet
       except `responsive.css`. `app-base.css` owns the body font there;
       moving the pair earlier hands the font to whatever sheet then comes
       last.

   KNOWN LIMITATION
     · `.btn-login` is painted by THIS sheet on the sign-in shell: `_AuthMeta`
       links no `components\button.css`, so the `--primary` gold fill declared
       below is what renders. Whether the sign-in button should instead follow
       the application's one button design (white face, gold-700 border) is an
       open design question; the declarations stand as written until it is
       decided.
   ========================================================================== */

.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.login-card {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: var(--card-radius);
    padding: 2.5rem 2rem 2rem;
    box-shadow: var(--shadow-md);
    animation: fadeSlideUp .35s ease both;
}

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.login-header { text-align: center; margin-bottom: 1.75rem; }
.login-logo {
    height: 64px;
    margin-bottom: .75rem;
    width: 100%; /* keep aspect ratio */
    max-width: 100%; /* prevent overflow */
    object-fit: contain; /* ensure full logo is visible */
    display: block;
}

.btn-login {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary-dark);
    padding: 5px 1rem;
    border-radius: 6px;
    transition: background var(--transition), box-shadow var(--transition);
}
.btn-login:hover  { background: var(--primary-dark); color: #fff; }
.btn-login:focus  { box-shadow: 0 0 0 .25rem rgba(207,181,59,.4); }
.btn-login:disabled { opacity: .7; cursor: not-allowed; }

/* Mobile ≤767 */
@media (max-width: 767px) {

    .login-card { padding: 1.75rem 1.25rem 1.5rem; }
}