/* ============================================================================
   assets/css/auth.css — стили страницы входа (login.php)

   Оформление собрано на дизайн-системе сайта, а не на собственной палитре:
   значения взяты из assets/css/header.css (шапка, фон страницы) и
   assets/css/admin-tools.css (карточка, поля, кнопки, сообщения):

     #efebe6  — фон страницы            (header.css: body)
     #fdfaf3  — кремовая поверхность    (.header-top, карточки)
     #f6f1e9  — подложка полей и вторичных кнопок
     #e3d6c5  — тёплый нейтральный акцент
     #0f3b36  — тёмно-зелёный: текст и основной акцент
     #14524b  — hover акцента
     #46605b  — вторичный текст, #6b7a76 — приглушённый
     rgba(15,59,54,.12) / .22 — границы
     #9b2c22  — ошибка (#f7e7e3 подложка)
     #1f6b45  — успех (#e6f2ea подложка)
     0 10px 30px rgba(15,23,42,.10) — тень карточки
     радиусы 18px / 12px
     шрифт system-ui, -apple-system, "Segoe UI", Arial, sans-serif

   Имена классов совпадают с общими компонентами сайта
   (.field, .field-label, .input, .btn, .btn-primary, .btn-block,
   .msg-stack, .msg, .msg-error, .msg-info) — страница выглядит и ведёт
   себя как остальные страницы проекта.

   Файл самостоятельный (не требует admin-tools.css), без сторонних
   библиотек и внешних шрифтов. Все правила, кроме body.auth-page,
   ограничены префиксом .auth-* или лежат внутри .auth-card, поэтому
   ничего на других страницах не меняют.
   ========================================================================== */

/* --- Токены сайта на странице входа ------------------------------------- */

body.auth-page {
    --bg:           #efebe6;
    --surface:      #fdfaf3;
    --surface-soft: #f6f1e9;
    --surface-warm: #e3d6c5;
    --ink:          #0f3b36;
    --ink-hover:    #14524b;
    --ink-soft:     #46605b;
    --muted:        #6b7a76;
    --line:         rgba(15, 59, 54, 0.12);
    --line-strong:  rgba(15, 59, 54, 0.22);
    --danger:       #9b2c22;
    --danger-soft:  #f7e7e3;
    --ok:           #1f6b45;
    --ok-soft:      #e6f2ea;
    --shadow:       0 10px 30px rgba(15, 23, 42, 0.10);
    --shadow-sm:    0 4px 14px rgba(15, 23, 42, 0.06);
    --radius:       18px;
    --radius-sm:    12px;

    min-height: 100vh;
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: rgba(15, 59, 54, 0.12);
}

/* --- Каркас страницы ---------------------------------------------------- */

.auth-main {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 40px 16px 24px;
}

.auth-card {
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 32px 34px 28px;
}

/* --- Шапка карточки ----------------------------------------------------- */

.auth-eyebrow {
    margin: 0 0 10px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.auth-title {
    margin: 0 0 8px;
    text-align: center;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--ink);
}

.auth-sub {
    margin: 0 0 22px;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted);
}

/* --- Поля формы: как .field / .input на остальных страницах ------------- */

.field { margin-bottom: 16px; }

.field-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.input {
    display: block;
    width: 100%;
    padding: 13px 15px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.2;
    color: var(--ink);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.input::placeholder { color: rgba(15, 59, 54, 0.35); }
.input:hover { border-color: var(--line-strong); }
.input:focus {
    background: #ffffff;
    border-color: var(--ink);
    box-shadow: 0 0 0 4px rgba(15, 59, 54, 0.12);
}
.input:disabled {
    background: var(--surface-warm);
    color: var(--muted);
    cursor: not-allowed;
}

/* --- Кнопки: те же размеры и состояния, что у .btn на сайте ------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    color: var(--ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}

.btn:hover { background: #efe6d9; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(15, 59, 54, 0.18); }

.btn-block { width: 100%; }

.btn-primary {
    background: var(--ink);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 59, 54, 0.22);
}
.btn-primary:hover { background: var(--ink-hover); color: #ffffff; }
.btn-primary:active { background: var(--ink); }
.btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(15, 59, 54, 0.22); }
.btn-primary:disabled,
.btn-primary.is-loading:disabled {
    background: #d9cfca;
    color: #ffffff;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* Основная кнопка шага — «Получить код» / «Войти» */
.auth-submit {
    margin-top: 4px;
    padding: 15px 22px;
    font-size: 16px;
    font-weight: 700;
}

/* Индикатор ожидания внутри кнопки */
.btn .spinner {
    display: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    animation: auth-spin 0.7s linear infinite;
}
.btn.is-loading .spinner { display: inline-block; }
.btn.is-loading:disabled { cursor: progress; }

@keyframes auth-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .btn .spinner { animation: none; }
}

/* --- Сообщения: те же плашки, что в проекте ----------------------------- */

.msg-stack {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.msg {
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    line-height: 1.5;
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink);
    background: var(--surface-soft);
    color: var(--ink);
}

.msg-error {
    background: var(--danger-soft);
    border-color: rgba(155, 44, 34, 0.25);
    border-left-color: var(--danger);
    color: #6d1d15;
    font-weight: 600;
}

.msg-info {
    background: #f3efe7;
    border-left-color: var(--surface-warm);
}

.msg-ok {
    background: var(--ok-soft);
    border-color: rgba(31, 107, 69, 0.22);
    border-left-color: var(--ok);
    color: #14502f;
}

/* --- Шаг ввода кода ----------------------------------------------------- */

.auth-note {
    margin: 0 0 16px;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted);
    word-break: break-word;
}

.code-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 18px;
}

.code-box {
    width: 46px;
    height: 54px;
    padding: 0;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    text-align: center;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.code-box:hover { border-color: var(--line-strong); }
.code-box:focus {
    background: #ffffff;
    border-color: var(--ink);
    box-shadow: 0 0 0 4px rgba(15, 59, 54, 0.12);
}

/* Повторная отправка кода — текстовая кнопка */
.auth-resend-form {
    margin-top: 12px;
    text-align: center;
}

.auth-resend {
    display: inline-block;
    padding: 9px 14px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.auth-resend:hover:not(:disabled) {
    color: var(--ink);
    background: var(--surface-soft);
}

.auth-resend:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(15, 59, 54, 0.12);
}

.auth-resend:disabled {
    color: rgba(15, 59, 54, 0.35);
    cursor: not-allowed;
}

/* --- Подвал карточки ---------------------------------------------------- */

.auth-card-foot {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    text-align: center;
    font-size: 13px;
    line-height: 1.7;
    color: var(--muted);
}

.auth-card-foot a,
.auth-card-foot a:link,
.auth-card-foot a:visited {
    color: var(--ink-soft);
    text-decoration: none;
}

.auth-card-foot a:hover,
.auth-card-foot a:active {
    color: var(--ink);
    text-decoration: underline;
}

.auth-card-foot a:focus-visible {
    outline: none;
    border-radius: 6px;
    box-shadow: 0 0 0 4px rgba(15, 59, 54, 0.12);
}

.auth-card-foot .auth-foot-row + .auth-foot-row { margin-top: 6px; }

/* --- Адаптивность: те же брейкпоинты, что у остальных страниц ----------- */

@media (max-width: 640px) {
    .auth-main { padding: 22px 12px 16px; }
    .auth-card { padding: 24px 18px 22px; border-radius: 14px; }
    .auth-title { font-size: 21px; }
    .auth-sub { margin-bottom: 18px; }
    .code-row { gap: 6px; }
    .code-box { width: 42px; height: 50px; font-size: 20px; }
}

@media (max-width: 380px) {
    .code-box { width: 36px; height: 46px; font-size: 18px; }
    .auth-submit { padding: 14px 16px; }
}