/* Login page: centred card on a soft background, with a blurred brand-coloured glow under the card
   (same soft, layered shadow language as the backend tables). */
body.login-page {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: radial-gradient(1200px 520px at 55% -8%, #dfeaf7 0%, rgba(223, 234, 247, 0) 70%), #f3f6fa;
    background-attachment: fixed;
    font-family: 'Varela Round', sans-serif;
    color: #2b3a4a;
}
body.login-page * { font-family: 'Varela Round', sans-serif; }

.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    box-sizing: border-box;
}

.login-card {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: #fff;
    border: 1px solid #dde3ea;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(31, 58, 90, .06), 0 20px 36px -14px rgba(66, 139, 202, .45);
}
.login-band { padding: 28px 24px 6px; text-align: center; }
.login-band .brand-logo { display: inline-block; height: 42px; width: auto; vertical-align: middle; }

.login-card .form-signin { max-width: none; margin: 0; padding: 18px 24px 22px; }

.login-card .form-group { margin-bottom: 12px; }
.login-card label { font-weight: normal; color: #5b6b7c; font-size: 12.5px; margin-bottom: 4px; }
.login-card .checkbox label { font-size: 13.5px; color: #2b3a4a; cursor: pointer; }
.login-card .checkbox { margin: 2px 0 14px; }

.login-card .form-signin .form-control,
.login-card .form-signin input[type="text"],
.login-card .form-signin input[type="password"] {
    height: 42px;
    margin: 0;
    padding: 8px 12px;
    font-size: 16px;               /* >=16px: iOS does not zoom on focus */
    border: 1px solid #cfd8e3;
    border-radius: 8px;
    box-shadow: none;
    background: #fbfcfe;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.login-card .form-signin .form-control:focus {
    border-color: #428bca;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(66, 139, 202, .18);
}

.login-card .btn-primary {
    height: 44px;
    border-radius: 8px;
    border: 1px solid #3470ab;
    background-image: linear-gradient(180deg, #4a8fd0, #3a78b8);
    background-color: #3a78b8;
    box-shadow: 0 1px 3px rgba(58, 120, 184, .35);
    font-size: 15px;
    cursor: pointer;
}
.login-card .btn-primary:hover, .login-card .btn-primary:focus { background-image: linear-gradient(180deg, #5a9ad6, #3f82c4); }
.login-card .btn-primary:active { background-image: none; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .2); }

.login-error { border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; font-size: 13.5px; }

/* Phone: full-width page (no card), blue band on top and the form centred in the space below */
@media (max-width: 480px) {
    body.login-page { background: #fff; }
    .login-shell { padding: 0; align-items: stretch; }
    .login-card { display: flex; flex-direction: column; max-width: none; min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
    .login-band { padding: 32px 20px 4px; }
    .login-card .form-signin { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 16px 22px 40px; }
}