/* auth-card (auth-card.ejs): the dark sign-in page and its card. Every selector starts with .auth-card; the page
   class goes on <body>. Only layout, spacing, radii and colour — the app's typography is untouched (no typeface
   overrides). Colours are this component's own custom properties; the brand and danger colours are Bootstrap's. */
.auth-card-page, .auth-card {
    --auth-card-page: var(--bs-dark, #212529);   /* the shell's fill (topbar, sidebar, modal header) */
    --auth-card-shadow: rgba(10, 6, 24, .45);
    --auth-card-line: var(--theme-line);
    --auth-card-field: var(--theme-tint);
    --auth-card-muted: #6c757d;
    --auth-card-link: var(--theme-link);
    --auth-card-footer-ink: rgba(255,255,255,.68);   /* = --modal-app-ink-soft: muted text on the shell's fill */
}

/* Page: a solid eMed-dark ground with the card centred (the layoutAuthentication shell from styles.css). */
.auth-card-page { background: var(--auth-card-page); }
.auth-card-page #layoutAuthentication_content { display: flex; flex-direction: column; }
.auth-card-page main { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.auth-card-page footer { background: transparent; }
.auth-card-copy { color: var(--auth-card-footer-ink); }   /* the footer line (login, locked) */

/* Card */
.auth-card { width: 100%; max-width: 420px; border-radius: 16px; box-shadow: 0 30px 80px var(--auth-card-shadow); }
.auth-card .auth-card-body { padding: 0 2.5rem 2.25rem; }
.auth-card-brand { --emed-logo-size: 24px; display: flex; justify-content: center; padding: 2.75rem 1.5rem 1.5rem; }
.auth-card-brand-img { height: 40px; width: auto; }
.auth-card-brand--title { flex-direction: column; align-items: center; text-align: center; }
.auth-card-title { margin: 0; font-size: 1.5rem; }
.auth-card-sub { color: var(--auth-card-muted); text-align: center; margin: 0 0 1.5rem; }
.auth-card-brand--title .auth-card-sub { margin: .5rem 0 0; }

/* Fields and buttons */
.auth-card .form-control { border-color: var(--auth-card-line); border-radius: 10px; background-color: var(--auth-card-field); }
.auth-card .form-control:focus { border-color: var(--theme-primary); background-color: #fff; box-shadow: 0 0 0 .25rem rgba(var(--theme-primary-rgb), .15); }
/* Wrong username/password (401): red fields — declared after the rules above so it wins over them. */
.auth-card .form-control.is-invalid { border-color: var(--bs-danger); background-color: #fff; }
.auth-card .form-control.is-invalid:focus { box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .15); }
.auth-card .btn { border-radius: 10px; }
.auth-card .btn-primary { padding-top: .6rem; padding-bottom: .6rem; }

/* Small pieces the sign-in steps need. */
.auth-card-qr { max-width: 200px; }
.auth-card .auth-card-code { text-transform: uppercase; }
.auth-card-codes { font-size: 14px; }
.auth-card-done-icon { font-size: 40px; }

/* Password strength (change-password.ejs): the page's script sets the fill's width (--auth-card-meter) and the tier
   class — values as they were in that page's own <style>. */
.auth-card-meter { height: 4px; border-radius: 2px; background: #e9ecef; overflow: hidden; margin-top: 4px; }
.auth-card-meter-fill { height: 100%; width: var(--auth-card-meter, 0%); transition: width .2s, background-color .2s; }
.auth-card-meter--weak .auth-card-meter-fill { background-color: #dc3545; }
.auth-card-meter--fair .auth-card-meter-fill { background-color: #ffc107; }
.auth-card-meter--strong .auth-card-meter-fill { background-color: #198754; }

/* Notice: a strip along the bottom of the card. Two lines on desktop — a .notice-line measures ~357px at .875rem,
   and the strip leaves 360px beside the icon. */
.auth-card-notice { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 16px 16px 18px; background: var(--auth-card-field); border-top: 1px solid var(--auth-card-line); border-radius: 0 0 16px 16px; color: var(--auth-card-muted); font-size: .875rem; line-height: 1.5; }
.auth-card-notice[hidden] { display: none; }
.auth-card-notice svg { flex-shrink: 0; color: var(--theme-primary); }
.auth-card-notice .notice-line { white-space: nowrap; }
.auth-card-notice a { color: var(--auth-card-link); font-weight: 500; text-decoration: none; }
.auth-card-notice a:hover, .auth-card-notice a:focus-visible { text-decoration: underline; }

@media (max-width: 440px) {
    .auth-card-notice .notice-line { white-space: normal; }
}
@media (max-width: 400px) {
    .auth-card-brand { padding: 2rem 1rem 1.25rem; }
    .auth-card-brand { --emed-logo-size: 19px; }
    .auth-card .auth-card-body { padding: 0 1.25rem 1.5rem; }
}
@media (max-width: 330px) {
    .auth-card-brand { --emed-logo-size: 16px; }
}