/* login.css — экран входа (двух-панельный, дизайн-ревизия ТЗ).
   Общий для on-prem и SaaS; различия по режиму — в самих шаблонах
   (login.html — логин+пароль+PIN; saas_login.html — организация+демо+регистрация).
   P2.1: инлайн-<style> убран из шаблонов входа в этот файл. На токенах →
   светлая/тёмная тема работают автоматически. */

* { box-sizing: border-box; }
html, body { height: 100%; }
body.login-page {
    margin: 0;
    font-family: var(--font-sans, 'Inter', 'Segoe UI', sans-serif);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

.login { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }

/* ── Брендовая панель ───────────────────────────────────────────────────── */
.brand-panel {
    position: relative; overflow: hidden; color: #fff;
    background: var(--sidebar-bg);
    display: flex; flex-direction: column; justify-content: space-between; padding: 48px;
}
.brand-panel::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 80% at 50% -10%,
        color-mix(in srgb, var(--accent) 26%, transparent), transparent 55%);
}
.bp-top { position: relative; display: flex; align-items: center; gap: 11px; }
.bp-logo {
    width: 38px; height: 38px; flex-shrink: 0;
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
}

/* ── Анимированный лого «Контроль-Q» (рисуется штрихом при загрузке) ────── */
.qmark { display: block; overflow: visible; }
.qmark .ring   { --len: 95; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 95; stroke-dashoffset: 0; }
.qmark .handle { --len: 17; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 17; stroke-dashoffset: 0; }
.qmark .tick   { --len: 26; fill: none; stroke: var(--accent); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26; stroke-dashoffset: 0; }
/* Покой — отрисовано (offset:0). Вход рисует штрих (both: до задержки скрыт). */
.qmark .ring   { animation: qmark-draw .62s cubic-bezier(.2,.6,.2,1) .14s both; }
.qmark .handle { animation: qmark-draw .34s cubic-bezier(.2,.6,.2,1) .70s both; }
.qmark .tick   { animation: qmark-draw .47s cubic-bezier(.2,.6,.2,1) .94s both; }
@keyframes qmark-draw { from { stroke-dashoffset: var(--len, 95); } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .qmark .ring, .qmark .handle, .qmark .tick { animation: none; stroke-dashoffset: 0; }
}
.bp-top .wm { font-size: 1.15rem; font-weight: 700; letter-spacing: .01em; color: #fff; text-decoration: none; }
/* Лого + надпись центрируем относительно центра тёмной панели (дизайн-макет). */
.bp-center { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.bp-headline { font-size: 2.6rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin: 0; max-width: 16ch; }
.bp-sub { font-size: 1.0625rem; color: rgba(255,255,255,.62); margin: 0; max-width: 40ch; line-height: 1.55; }
.bp-foot { position: relative; display: flex; gap: 22px; font-size: .8125rem; color: rgba(255,255,255,.5); }
.bp-foot b { color: rgba(255,255,255,.82); font-weight: 600; display: block; font-size: .9375rem; margin-bottom: 2px; }

/* ── Панель формы ───────────────────────────────────────────────────────── */
.form-panel { position: relative; display: flex; align-items: center; justify-content: center; padding: 48px; }
.form-card { width: 100%; max-width: 372px; animation: fadeInUp 380ms cubic-bezier(0.22, 1, 0.36, 1) both; }

.fc-pill {
    display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-2xs); font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; color: var(--accent-strong); background: var(--accent-soft);
    padding: 4px 10px; border-radius: var(--r-full); margin: 0 auto 20px; width: max-content;
}
/* Заголовок формы центрируем по правой панели (дизайн-макет); поля — без изменений. */
.fc-h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.025em; margin: 0 0 7px; color: var(--ink); text-align: center; }
.fc-lede { font-size: var(--text-md); color: var(--ink-2); margin: 0 0 28px; text-align: center; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--ink-2); margin-bottom: 7px; }
.inp-wrap { position: relative; display: flex; align-items: center; }
.inp-wrap > i.lead { position: absolute; left: 13px; color: var(--ink-3); font-size: 1rem; pointer-events: none; }
.inp {
    width: 100%; font-family: inherit; font-size: var(--text-md); color: var(--ink); background: var(--surface);
    border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 11px 13px 11px 40px; outline: none;
    transition: border-color var(--m-fast), box-shadow var(--m-fast);
}
.inp::placeholder { color: var(--ink-3); }
.inp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.inp-wrap .toggle {
    position: absolute; right: 11px; color: var(--ink-3); cursor: pointer; padding: 4px;
    background: none; border: none; display: flex; align-items: center;
}
.inp-wrap .toggle:hover { color: var(--ink); }

.row-between { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; gap: 12px; }
.lnk { font-size: var(--text-sm); color: var(--accent); font-weight: 500; text-decoration: none; }
.lnk:hover { color: var(--accent-strong); }

.btn-submit {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: inherit; font-size: var(--text-md); font-weight: 600; color: var(--on-accent); background: var(--accent);
    border: none; border-radius: var(--r-sm); padding: 12px; cursor: pointer; min-height: 46px;
    transition: background var(--m-fast), box-shadow var(--m-fast), transform var(--m-fast);
}
.btn-submit:hover { background: var(--accent-hover, var(--accent-strong)); box-shadow: 0 2px 12px var(--accent-glow, transparent); }
.btn-submit:active { transform: translateY(1px); }
.btn-submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.fc-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--ink-3); font-size: var(--text-sm); }
.fc-divider::before, .fc-divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }

.fc-foot { margin-top: 24px; font-size: var(--text-sm); color: var(--ink-3); text-align: center; }
.fc-foot + .fc-foot { margin-top: 8px; }

/* Бейдж организации (SaaS, когда тенант уже известен) */
.org-badge {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 11px 14px; margin-bottom: 18px;
}
.org-badge-label { font-size: var(--text-2xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.org-badge-name { font-weight: 600; color: var(--ink); font-size: var(--text-md); }
.org-badge-name i { color: var(--accent-strong); margin-right: .3rem; }
.org-change { color: var(--ink-3); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.org-change:hover { color: var(--accent-strong); }

/* Флеш-сообщения */
.login-alert {
    display: flex; align-items: center; gap: 8px;
    background: var(--bad-soft); border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent);
    color: var(--bad); border-radius: var(--r-sm);
    font-size: var(--text-sm); padding: 10px 13px; margin-bottom: 18px;
}

/* Ссылка «на главную» (SaaS) */
.back-link {
    position: fixed; top: 16px; left: 20px; z-index: 10;
    color: var(--ink-3); font-size: var(--text-sm); text-decoration: none;
    display: flex; align-items: center; gap: .35rem; transition: color var(--m-fast);
}
.back-link:hover { color: var(--ink); }

@media (max-width: 880px) {
    .login { grid-template-columns: 1fr; }
    .brand-panel { display: none; }
    .form-panel { padding: 32px 22px; }
}

/* Большой центральный лого-qmark на бренд-панели (дизайн-макет) */
.bp-logo-xl { display: block; color: #fff; opacity: .98; line-height: 0; margin: 0 auto 6px; }
.bp-logo-xl .qmark { width: 132px; height: 132px; }
@media (max-height: 620px) { .bp-logo-xl { display: none; } }

/* Чекбокс «Запомнить меня» */
.row-between .chk { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--ink-2); cursor: pointer; user-select: none; }
.row-between .chk input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }