/*
 * ЕСККС — страница входа и восстановления пароля.
 * Отдельный файл, НЕ проходит через Laravel Mix: правки видны без npm-сборки.
 * Классы с префиксом .auth- не пересекаются со стилями приложения (app.css).
 *
 * 2026-08-13: центрированная карточка вместо полноэкранного двухпанельного
 * макета (по образцу типового Keycloak/ISO login screen) — см. AGENTS.md
 * "Auth pages" для истории обоих вариантов.
 */

:root {
    --auth-ink:       #0E1A24;
    --auth-ink-2:     #16293A;
    --auth-paper:     #FFFFFF;
    --auth-mist:      #F4F7FA;
    --auth-mist-2:    #EAF0F5;
    --auth-line:      #DCE4EC;
    --auth-text:      #1C2733;
    --auth-muted:     #6B7A8C;
    --auth-accent:    #00A3B4;
    --auth-accent-ink:#00707C;
    --auth-danger:    #C0392B;
    --auth-success:   #1E7A4C;
    --auth-radius:    6px;
    --auth-radius-lg: 12px;
}

body.auth * { box-sizing: border-box; }

body.auth {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--auth-text);
    background: linear-gradient(180deg, var(--auth-mist) 0%, var(--auth-mist-2) 100%);
    -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ shell */

.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    padding: 40px 40px 28px;
    background: var(--auth-paper);
    border: 1px solid var(--auth-line);
    border-radius: var(--auth-radius-lg);
    box-shadow: 0 1px 2px rgba(14,26,36,.04), 0 20px 48px -20px rgba(14,26,36,.18);
}

/* ------------------------------------------------------------------ brand */

.auth-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    text-decoration: none;
    color: inherit;
}

.auth-brand-mark {
    flex: none;
    width: 34px;
    height: 34px;
    border: 1.5px solid var(--auth-accent);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    color: var(--auth-accent-ink);
    background: rgba(0,163,180,.08);
}

.auth-brand-text { display: flex; flex-direction: column; }

.auth-brand-name {
    font-family: Manrope, Inter, system-ui, sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.auth-brand-sub { font-size: 12px; color: var(--auth-muted); }

/* ------------------------------------------------------------------- lang */

.auth-lang {
    display: flex;
    justify-content: flex-end;
    gap: 2px;
    margin: -12px 0 4px;
}

.auth-lang a {
    padding: 5px 9px;
    border-radius: 3px;
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--auth-muted);
    text-decoration: none;
}

.auth-lang a:hover { color: var(--auth-text); background: var(--auth-mist); }

.auth-lang a[aria-current="true"] {
    color: var(--auth-accent-ink);
    background: rgba(0,163,180,.1);
    font-weight: 500;
}

.auth-form-wrap { width: 100%; }

.auth-title {
    margin: 0 0 6px;
    font-family: Manrope, Inter, system-ui, sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.auth-subtitle {
    margin: 0 0 26px;
    font-size: 14px;
    color: var(--auth-muted);
}

/* ------------------------------------------------------------------ поля */

/*
 * Статичная подпись над полем, не плавающий label поверх текста.
 *
 * 2026-08-13 (первая попытка): подпись была абсолютно спозиционирована
 * поверх input и уезжала вверх по :not(:placeholder-shown) когда в поле
 * появлялось значение. Для настоящего автозаполнения это чинилось через
 * :-webkit-autofill + auth.js, НО у части сценариев Chrome (превью
 * подсказки менеджера паролей) точки в поле — это визуальный оверлей
 * самого браузера, а не реальное value: DOM ничего не знает о нём, пока
 * пользователь не кликнет и браузер не зафиксирует автозаполнение. Никакой
 * скрипт на странице не может отследить то, чего ещё нет в DOM — поэтому
 * подход с плавающим лейблом в принципе не мог закрыть этот случай.
 * Решение — не гадать о состоянии поля, а всегда показывать подпись
 * сверху (как в референсе ISO/Keycloak, см. AGENTS.md "Auth pages").
 */

.auth-field { margin-bottom: 18px; }

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

.auth-field input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    font: inherit;
    color: var(--auth-text);
    background: var(--auth-mist);
    border: 1px solid var(--auth-line);
    border-radius: var(--auth-radius);
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.auth-field input:focus {
    outline: none;
    background: #fff;
    border-color: var(--auth-accent);
    box-shadow: 0 0 0 3px rgba(0,163,180,.15);
}

.auth-field.has-error label { color: var(--auth-danger); }
.auth-field.has-error input { border-color: var(--auth-danger); background: #FDF3F2; }
.auth-field.has-error input:focus { box-shadow: 0 0 0 3px rgba(192,57,43,.15); }

.auth-error {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--auth-danger);
}

.auth-alert {
    margin-bottom: 20px;
    padding: 12px 14px;
    border-radius: var(--auth-radius);
    font-size: 14px;
    background: rgba(30,122,76,.08);
    border: 1px solid rgba(30,122,76,.25);
    color: var(--auth-success);
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0 24px;
}

.auth-check {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--auth-muted);
    cursor: pointer;
}

.auth-check input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--auth-accent);
}

.auth-link {
    font-size: 14px;
    color: var(--auth-accent-ink);
    text-decoration: none;
}

.auth-link:hover { text-decoration: underline; color: var(--auth-accent-ink); }

.auth-btn {
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: var(--auth-radius);
    background: var(--auth-ink);
    color: #fff;
    font-family: Manrope, Inter, system-ui, sans-serif;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background .15s, transform .06s;
}

.auth-btn:hover { background: var(--auth-ink-2); }
.auth-btn:active { transform: translateY(1px); }
.auth-btn:focus-visible { outline: 3px solid rgba(0,163,180,.5); outline-offset: 2px; }

/* ------------------------------------------------------------------ демо */

.auth-demo {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--auth-line);
}

.auth-demo summary {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    cursor: pointer;
    font-size: 13px;
    color: var(--auth-muted);
}

.auth-demo summary::-webkit-details-marker { display: none; }
.auth-demo summary::before {
    content: "+";
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    color: var(--auth-accent);
}
.auth-demo[open] summary::before { content: "\2013"; }

.auth-demo-body {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--auth-line);
    border-radius: var(--auth-radius);
    background: var(--auth-mist);
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
}

.auth-demo-body span { color: var(--auth-muted); }

.auth-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--auth-line);
    font-size: 12px;
    color: var(--auth-muted);
}

.auth-card-foot a {
    color: var(--auth-muted);
    text-decoration: none;
    border-bottom: 1px solid var(--auth-line);
}

.auth-card-foot a:hover { color: var(--auth-accent-ink); }

/* ------------------------------------------------------------- адаптив */

@media (max-width: 480px) {
    .auth-shell { padding: 20px 12px; }
    .auth-card { padding: 32px 24px 24px; }
    .auth-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}