/* Identity area (login, password recovery and change, account pages). Depends on easylims-theme.css tokens.
   Pages that set ViewData["IdentityShell"] (Login, ForgotPassword, ResetPassword, Manage/UpdatePassword) draw the rail +
   panel + readout below; the other account pages (Manage/*) keep the Bootstrap container on the paper ground. */
body.el-identity { min-height: 100vh; padding: 0 !important; min-width: 0 !important; background: var(--el-ground); }
.el-identity .form-control, .el-identity .form-select { min-height: 44px; border-radius: var(--el-radius); }
.el-identity .form-control:focus, .el-identity .form-select:focus {
  border-color: var(--el-text); box-shadow: none; outline: 2px solid var(--el-text); outline-offset: 1px; }
.el-identity .btn { min-height: 44px; }
.el-identity .field-validation-error { display: block; color: var(--el-danger) !important; font-family: var(--el-font); }
.el-identity .validation-summary-errors { margin: 0 0 12px; padding: 8px 12px; background: var(--el-danger-bg);
  color: var(--el-danger) !important; border-radius: var(--el-radius); font-family: var(--el-font); }
.el-identity .validation-summary-errors ul { margin: 0; padding: 0; list-style: none; }
.el-identity .validation-sign, .el-identity .validation-message { color: var(--el-danger) !important; }
/* fields on the login and password pages: label above, left-aligned */
.el-identity .el-login-field { text-align: left; }
.el-identity .el-login-field label { display: block; margin: 0 0 4px; color: var(--el-text); font-weight: 600; font-size: 14px; }
/* links on the login and password pages (forgot password, register, back to login) */
.el-identity .el-login-links { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px 16px; margin-top: 12px; }
.el-identity .el-login-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--el-link); font-size: 14px; }
.el-identity .el-login-links a:hover { color: var(--el-link-hover); }
.el-identity .el-login-links a:focus-visible { outline: 2px solid var(--el-text); outline-offset: 2px; border-radius: 6px; }

/* ---------------------------------------------------------------------------------------------------------------
   Login (ViewData["IdentityShell"]): the app's dark rail continues onto the threshold, the form sits flat on
   the bench, and the installation reads out in mono beside it. No floating card, no split background.
   --------------------------------------------------------------------------------------------------------------- */
.el-login { min-height: 100vh; display: grid; grid-template-columns: var(--el-rail-width) minmax(0, 1fr); }
.el-login-rail { background: var(--el-rail); display: flex; flex-direction: column; align-items: center; padding: 14px 0; }
.el-login-mark { width: 32px; height: 34px; margin-top: 6px; }
/* the bench of the login wears the hero gradient of easymedical.ro; the form stays a white card on it */
.el-login-bench { display: flex; align-items: center; justify-content: center; padding: 48px 40px; background: var(--el-hero); }
.el-login-grid { width: 100%; max-width: 940px; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 64px; align-items: center; }

.el-login-panel { background: var(--el-surface); box-shadow: var(--el-shadow-card); border: 1px solid var(--el-border); border-radius: var(--el-radius-lg); padding: 32px 32px 20px; }
.el-identity .el-login-title { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--el-heading); }
.el-identity .el-login-sub { margin: 4px 0 24px; font-size: 16px; font-weight: 600; color: var(--el-muted); }
.el-login-alert { margin: 0 0 20px; padding: 10px 14px; border-radius: var(--el-radius); background: var(--el-danger-bg);
  color: var(--el-danger); font-weight: 600; white-space: pre-line; }
.el-login-errors.validation-summary-errors { margin: 0 0 16px; padding: 10px 14px; border-radius: var(--el-radius);
  background: var(--el-danger-bg); color: var(--el-danger); font-weight: 600; }
.el-login-errors ul { margin: 0; padding: 0; list-style: none; }
.el-login-errors.validation-summary-valid { display: none; }
.el-identity .el-login-hint { margin: 0 0 16px; color: var(--el-muted); font-size: 14px; line-height: 1.5; }

.el-identity .el-login-form .form-control, .el-identity .el-login-form .form-select {
  width: 100%; min-height: 44px; margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--el-border); border-radius: var(--el-radius);
  background-color: var(--el-surface); color: var(--el-text); font-family: var(--el-font); font-size: 16px; }
.el-identity .el-login-form .form-control:disabled { background-color: var(--el-ground); color: var(--el-muted); }
.el-identity .el-login-form .form-control:focus, .el-identity .el-login-form .form-select:focus {
  border-color: var(--el-text); box-shadow: none; outline: 2px solid var(--el-text); outline-offset: 1px; }
.el-identity .el-login-form .field-validation-error { margin: -12px 0 14px; }
.el-identity .el-login-code { font-family: var(--el-mono); font-size: 20px; letter-spacing: 0.2em; }

.el-login-submit, .el-login-alt { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: 8px;
  padding: 10px 16px; border-radius: var(--el-radius); font-family: var(--el-font); font-size: 16px; cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease; }
.el-login-submit { border: 1px solid var(--el-accent); background: var(--el-accent); color: var(--el-on-accent); font-weight: 700; }
.el-login-submit:hover { border-color: var(--el-accent-hover); background: var(--el-accent-hover); }
.el-login-alt { border: 1px solid var(--el-border); background: var(--el-surface); color: var(--el-text); font-weight: 600; }
.el-login-alt:hover { background: var(--el-border-soft); }
.el-login-submit:focus-visible, .el-login-alt:focus-visible { outline: 3px solid var(--el-text); outline-offset: 2px; }
/* every other button of the identity pages (2FA, recovery code): the app's button focus (C56, DESIGN.md Buttons) */
.el-identity .btn { --bs-btn-focus-box-shadow: 0 0 0 2px var(--el-surface); }
.el-identity .btn:focus-visible { outline: 3px solid var(--el-text); outline-offset: 2px; }

.el-login-readout { color: var(--el-on-hero); }
.el-identity .el-login-client { margin: 0 0 8px; font-size: 24px; font-weight: 800; line-height: 1.2; color: var(--el-on-hero); }
.el-identity .el-login-pitch { margin: 0 0 28px; max-width: 30ch; font-size: 20px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: var(--el-on-hero); }
.el-readout { margin: 0; border-top: 1px solid rgb(255 255 255 / 25%); }
.el-readout > div { display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: 16px; align-items: baseline; padding: 10px 0;
  border-bottom: 1px solid rgb(255 255 255 / 15%); }
.el-readout dt { color: var(--el-on-hero-muted); font-size: 13px; font-weight: 700; }
.el-readout dd { margin: 0; font-size: 14px; }
.el-readout dd.el-mono { font-family: var(--el-mono); font-variant-numeric: tabular-nums; }

/* tablets: the readout goes under the form */
@media (max-width: 991.98px) {
  .el-login-grid { grid-template-columns: minmax(0, 480px); justify-content: center; gap: 32px; }
  .el-login-readout { order: 2; }
}
/* phones: the rail becomes a top bar, as in the app */
@media (max-width: 767.98px) {
  .el-login { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .el-login-rail { flex-direction: row; padding: 8px 16px; }
  .el-login-mark { width: 20px; height: 36px; margin-top: 0; }
  .el-login-bench { align-items: flex-start; padding: 24px 16px 40px; }
  .el-login-panel { padding: 24px 20px 16px; }
  .el-identity .el-login-pitch { margin-bottom: 20px; font-size: 18px; }
}

/* language selector in the login readout (the shared _SelectLanguagePartial: a form posting to /SelectLanguage) */
.el-readout-language form { margin: 0; }
.el-readout-language select { min-height: 36px; max-width: 100%; padding: 4px 32px 4px 10px; border: 1px solid var(--el-border);
  border-radius: var(--el-radius); background-color: var(--el-surface); color: var(--el-text); font-family: var(--el-mono); font-size: 14px; cursor: pointer; }
.el-readout-language select:focus-visible { outline: 2px solid var(--el-text); outline-offset: 1px; }
@media (pointer: coarse) { .el-readout-language select { min-height: 44px; } }