/* ============================================================
   Страница входа — templates/login.html. Только токены из tokens.css.
   Рендерится в ветке base.html для неавторизованных (без сайдбара и топбара).
   ============================================================ */

/* flash-сообщения base.html выводит над контентом; на этой странице они показываются под формой
   (login.html рендерит те же сообщения по-русски), поэтому верхние копии скрыты */
.app-content > .alert { display: none; }

.login-page { min-height: calc(100vh - 4.25rem); min-height: calc(100dvh - 4.25rem); display: grid; place-items: center; padding: var(--space-4) 0; }
.login-card {
  width: 100%; max-width: 400px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-3); box-shadow: var(--shadow-2);
  padding: var(--space-6) var(--space-5) var(--space-5);
}
/* логотип — как в сайдбаре (.sidebar .brand .logo в app.css) */
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-5); }
.login-logo {
  width: 40px; height: 40px; flex: none; border-radius: 11px;
  background: linear-gradient(135deg, var(--brand), var(--color-primary-dark));
  color: var(--brand-ink); display: grid; place-items: center; font-size: 1.3rem;
}
.login-brand-text { font-weight: 700; font-size: var(--text-md); color: var(--text-1); line-height: 1.15; white-space: nowrap; }
.login-brand-text small { display: block; font-size: var(--text-xs); font-weight: 500; color: var(--text-3); }
.login-brand .icon-btn { margin-left: auto; }
.login-title { font-size: var(--text-xl); font-weight: 700; margin: 0 0 4px; }
.login-subtitle { color: var(--text-2); font-size: var(--text-sm); margin: 0 0 var(--space-5); }
.login-form .form-control { min-height: 40px; }
.login-password .btn { display: inline-grid; place-items: center; min-width: 42px; color: var(--text-2); }
.login-password .btn[aria-pressed="true"] { color: var(--brand); }
.login-submit { min-height: 40px; font-weight: 600; margin-top: var(--space-2); }
.login-flash { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.login-flash .alert { margin: 0; font-size: var(--text-sm); display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; }
.login-flash .alert .bi { flex: none; margin-top: 2px; }
.login-note {
  margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--border);
  color: var(--text-3); font-size: var(--text-xs); display: flex; gap: 6px; align-items: flex-start; line-height: 1.5;
}
.login-note .bi { flex: none; margin-top: 1px; }

@media (max-width: 575.98px) {
  .login-page { min-height: calc(100vh - 3.5rem); min-height: calc(100dvh - 3.5rem); padding: var(--space-2) 0; }
  .login-card { padding: var(--space-5) var(--space-4); }
}