/*
 * Своих значений токенов у страницы входа нет и быть не может.
 *
 * Здесь стоял блок вида «--card: var(--ui-surface-card)», а в ui-tokens.css
 * ровно наоборот — «--ui-surface-card: var(--card)». Такая пара замыкается
 * сама на себя, и по правилам CSS ОБА свойства становятся недействительными:
 * фон карточки, цвет текста и обводка полей превращались в ничто. Отсюда и
 * жалоба владельца 01.09.2026 «полей ввода не видно» — рамки не было вовсе,
 * потому что `border: 1px solid var(--field-border, var(--border))` с
 * недействительным цветом отбрасывает объявление целиком.
 *
 * Все нужные имена — --bg, --card, --text, --muted, --border, --accent,
 * --font-sans — объявлены литералами в ui-tokens.css, который страница
 * подключает первым. Повторять их здесь незачем.
 */

* { box-sizing: border-box; margin: 0; padding: 0; }

/*
 * Фон входа — тот же повторяющийся рисунок деталей, что и во всём приложении
 * (app-base.css): цвет подложки, размер плитки и наложение совпадают, чтобы
 * вход и приложение выглядели одним местом. Файл берётся тот же самый —
 * второй копии рисунка здесь нет.
 */
body {
  background-color: #e2eaf3;
  background-image: url("../images/app-parts-pattern.webp");
  background-blend-mode: multiply;
  background-position: 0 0;
  background-repeat: repeat;
  background-size: 460px 460px;
  background-attachment: fixed;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
}

button, input, select, textarea { font-family: inherit; }

/*
 * Обводка и тень — те же, что у карточки таблицы приложения (.tk-card):
 * вход и рабочие экраны стоят на одном фоне, и карточка обязана лежать на нём
 * одинаково (требование владельца 01.09.2026). Значения берутся токенами, а не
 * повторяются числами: поменяется карточка таблицы — поменяется и эта.
 */
.login-card {
  background: var(--card);
  border: 1px solid var(--ui-border-panel);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-panel);
  width: 380px;
  max-width: 92vw;
  padding: 36px 32px;
}

.login-logo { text-align: center; margin-bottom: 28px; }
.login-logo h1 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/*
 * Плашка знака повторяет favicon: белый штрих на синем квадрате. Раньше знак
 * стоял голубым штрихом прямо на белой карточке и терялся рядом с крупным
 * названием.
 */
.login-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--ui-text-inverse);
}
.login-badge svg { display: block; }

/*
 * Поля входа. Обводка полей приложения (--field-border) — это светлый
 * --ui-border, разбавленный ещё вдвое: он рассчитан на серый фон страницы,
 * где поле отделяет собственная белизна. На белой карточке входа отделять
 * нечем, и поля пропадали совсем — оставались подписи над пустотой
 * (замечание владельца 01.09.2026). Правится ручками самого кита, а не
 * перебиванием его правил: так поле остаётся одним компонентом с полями
 * приложения и не разъедется с ними при следующей правке кита.
 */
.login-form {
  --field-border: var(--ui-border-strong);
  --field-focus-border-color: var(--accent);
  --field-focus-ring: 0 0 0 3px var(--ui-focus-ring);
  --field-height: 44px;
  --field-radius: 8px;
  --field-padding-x: 14px;
}
.login-form { display: flex; flex-direction: column; gap: var(--form-stack-gap); }
.btn-primary {
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--ui-text-inverse);
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease;
}
.btn-primary:hover { background: var(--ui-text-accent); }
.btn-primary:focus-visible { outline: 3px solid var(--ui-focus-ring); outline-offset: 2px; }
.error-msg {
  background: var(--ui-danger-surface-soft);
  color: var(--danger);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: .85rem;
  margin-bottom: 16px;
}
.footer { text-align: center; margin-top: 20px; font-size: .78rem; color: var(--muted); }

@media (max-width: 768px) {
  body {
    min-height: 100dvh;
    align-items: stretch;
    padding: max(20px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  .login-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: none;
    min-height: calc(100dvh - 40px);
    padding: 28px 20px;
  }
  .login-logo { margin-bottom: 24px; }
  .login-logo h1 { font-size: 1.2rem; }
  .field-kit-native-control { min-height: 44px; border-radius: 8px; font-size: 16px; }
  .btn-primary { font-size: 14px; }
  .error-msg, .footer { font-size: var(--ui-font-size-secondary-min, 13px); line-height: 1.45; }
}