/* ═══════════════════════════════════════════════════════════════
   AUTH PAGES — стили для страниц регистрации, входа, восстановления

   Совместимы с Syncfusion Bootstrap 5 темой.
   Используют CSS-переменные Syncfusion (--bs-*) для автоматической
   поддержки светлой и тёмной тем, а также для согласованности
   с остальными компонентами приложения.

   Структура страниц — split-screen:
   - Левая панель (auth-feature-panel): брендинг, преимущества
   - Правая панель (auth-form-panel): форма ввода

   Для страниц личного кабинета (/Account/Manage/*) шапка, боковое
   меню и его навигация описаны в отдельном файле manage-shell.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── Общий контейнер auth-страницы (split-screen) ── */
.auth-page {
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

/* ── Левая панель — брендинг и список преимуществ ── */
.auth-feature-panel {
    background: linear-gradient(135deg, #0066cc 0%, #004d99 60%, #003366 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #ffffff;
}

.auth-feature-panel h1 {
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.auth-feature-panel .lead {
    font-size: 1rem;
    opacity: 0.9;
    line-height: 1.6;
}

/* Список преимуществ с Syncfusion-иконками */
.auth-feature-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}

.auth-feature-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    opacity: 0.95;
}

.auth-feature-list li .e-icons {
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* ── Правая панель — контейнер формы ── */
.auth-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--bs-body-bg, #ffffff);
}

.auth-form-container {
    width: 100%;
    max-width: 420px;
}

/* ── Бренд (логотип + название) ── */
.auth-brand {
    text-align: center;
    margin-bottom: 1.5rem;
}

.auth-brand h5 {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--bs-body-color);
}

.auth-brand .brand-icon {
    font-size: 1.8rem;
    color: #0066cc;
    margin-bottom: 0.25rem;
}

/* ── Заголовок и подзаголовок формы ── */
.auth-form-title {
    text-align: center;
    margin-bottom: 0.25rem;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--bs-body-color);
}

.auth-form-subtitle {
    text-align: center;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

/* ══════════════════════════════════════════════════════════════════
   Поля ввода — стили, совместимые с Syncfusion e-input / e-textbox.
   Используют Syncfusion цвета фокуса и бордеров для единообразия.
   ══════════════════════════════════════════════════════════════════ */
.auth-field {
    margin-bottom: 1rem;
}

/* Заголовок поля (например, «Email», «Логин», «Тип клиента») — это всегда
   ПРЯМОЙ ребёнок .auth-field. Ограничиваем правило именно прямым потомком,
   потому что внутри .auth-field могут жить вложенные <label> с собственным
   оформлением (например, кликабельные плитки радио-группы выбора типа клиента
   в форме регистрации) — у них display, font-weight и margin задаются их
   собственными классами и не должны переопределяться этим правилом. */
.auth-field > label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--bs-body-color);
}

.auth-field .form-control,
.auth-field input[type="text"],
.auth-field input[type="email"],
.auth-field input[type="password"] {
    width: 100%;
    padding: 0.6rem 0.85rem;
    font-size: 0.95rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    box-sizing: border-box;
}

/* Состояние фокуса — используем Syncfusion-совместимый цвет акцента */
.auth-field .form-control:focus,
.auth-field input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
    outline: none;
}

/* Read-only поле — информационные строки, отображающие текущее значение,
   которое нельзя редактировать (например, «Текущий адрес» на странице смены
   электронной почты). HTML-атрибут readonly сам по себе только снимает каретку
   ввода — визуально такое поле почти неотличимо от обычного, и пользователи
   кликают по нему ожидая ввода.

   Чтобы поле читалось как заблокированное с одного взгляда:
   • плотный серый фон #e9ecef (как у браузерного disabled);
   • приглушённый текст #6c757d — заметно темнее placeholder, но мягче
     обычного body color;
   • cursor: not-allowed — курсор показывает невозможность ввода ещё до клика.

   Цвета зашиты явным HEX вместо var(--bs-secondary-bg) — bootstrap5.css
   Syncfusion в светлой теме держит эту переменную почти белой (#f8f9fa),
   и фон получался неотличим от обычного поля.

   !important нужен, потому что общее правило .auth-field .form-control
   выше задаёт background: var(--bs-body-bg, #fff). Селекторы имеют равную
   специфичность, поэтому без !important побеждает правило, которое идёт
   позже в файле — а это могут оказаться сторонние стили Syncfusion или
   Bootstrap, подключённые после auth-pages.css в App.razor. */
.auth-field .form-control[readonly],
.auth-field input[readonly],
.auth-field .auth-field-readonly,
.auth-field input.auth-field-readonly {
    background-color: #e9ecef !important;
    color: #6c757d !important;
    border-color: #ced4da !important;
    cursor: not-allowed;
    opacity: 1;
    box-shadow: none !important;
}

/* Сбрасываем синюю рамку и тень фокуса для read-only полей.
   При клике в обычное поле выше срабатывает правило .auth-field input:focus,
   которое подсвечивает рамку и даёт мягкий box-shadow — для редактируемого
   поля это правильный сигнал «здесь активный фокус». На read-only тот же
   эффект сбивает с толку: поле выглядит активным, и пользователь начинает
   ждать ввода.

   Перебиваем правила .auth-field input:focus и Syncfusion .e-input:focus
   с помощью !important. Дублируем для :focus-visible, чтобы клавиатурная
   навигация Tab тоже не подсвечивала эти поля яркой рамкой. */
.auth-field .form-control[readonly]:focus,
.auth-field input[readonly]:focus,
.auth-field .auth-field-readonly:focus,
.auth-field input.auth-field-readonly:focus,
.auth-field .form-control[readonly]:focus-visible,
.auth-field input[readonly]:focus-visible,
.auth-field input.auth-field-readonly:focus-visible {
    border-color: #ced4da !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: #e9ecef !important;
}

/* ══════════════════════════════════════════════════════════════════
   Кнопка отправки — стиль, совместимый с Syncfusion e-btn e-primary.
   Использует те же цвета и радиусы, что и SfButton IsPrimary=true.

   Класс применяется и на <button>, и на <a>-ссылках, выглядящих как кнопки
   («Перейти ко входу» после подтверждения email, «Восстановить пароль» на
   InvalidPasswordReset, действия 2FA «Добавить/Настроить/Сбросить аутентификатор»
   и т.д.). Дополнительные правила для варианта <a> вынесены отдельно ниже —
   там же расписана причина их существования и применённая специфичность.
   ══════════════════════════════════════════════════════════════════ */
.auth-submit-btn {
    width: 100%;
    padding: 0.65rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, color 0.15s ease-in-out;
    background-color: #0d6efd;
    color: #ffffff;
    margin-top: 0.5rem;
}

.auth-submit-btn:hover,
.auth-submit-btn:focus,
.auth-submit-btn:focus-visible {
    background-color: #0b5ed7;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    color: #ffffff;
    outline: none;
}

.auth-submit-btn:active {
    background-color: #0a58ca;
    color: #ffffff;
}

.auth-submit-btn:disabled,
.auth-submit-btn[aria-disabled="true"] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ── Отдельные правила для ссылок-кнопок ───────────────────────────────
   Класс .auth-submit-btn применяется не только на <button>, но и на <a>
   (например, «Перейти ко входу» после подтверждения email, «Восстановить
   пароль» на InvalidPasswordReset, действия 2FA в TwoFactorAuthentication).

   <a> по умолчанию подхватывает цвет ссылки сразу из нескольких источников:
   • браузер задаёт собственный синий на :hover/:focus и подчёркивание;
   • Bootstrap reboot выставляет color и hover через --bs-link-color;
   • глобальный app.css дополнительно прописывает «a, .btn-link { color: #006bb7 }».
   Любого из этих источников достаточно, чтобы перебить простой
   .auth-submit-btn (специфичность 0,1,0) — и текст на синем фоне кнопки
   при наведении/фокусе становится синим, то есть нечитаемым.

   Селектор «a.auth-submit-btn» добавляет элементный селектор к классу
   (специфичность 0,1,1) и таким образом перевешивает «a:hover» (0,1,0)
   и «.auth-submit-btn:hover» (0,1,0). Поверх этого ставим !important,
   чтобы гарантированно перебить inline-стили: часть конкретных кнопок
   («Удалить аккаунт», «Отключить 2FA») переопределяет background-color
   через style="" на красный — color там не задаётся, но защита белого
   текста полезна и над красным фоном тоже.

   Правила нацелены ИМЕННО на <a>: <button class="auth-submit-btn"> ими
   не задеты. Это важно для ExternalLoginPicker — там кнопка живёт в
   «прозрачном» варианте с собственным цветом, и подменять его нельзя. */
a.auth-submit-btn,
a.auth-submit-btn:link,
a.auth-submit-btn:visited,
a.auth-submit-btn:hover,
a.auth-submit-btn:focus,
a.auth-submit-btn:focus-visible,
a.auth-submit-btn:active {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ── Разделитель «или» между формой и внешними провайдерами ── */
.auth-divider {
    display: flex;
    align-items: center;
    margin: 1.25rem 0;
    position: relative;
}

.auth-divider hr {
    flex: 1;
    border: none;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    margin: 0;
}

.auth-divider span {
    padding: 0 0.75rem;
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #6c757d);
    background: var(--bs-body-bg, #fff);
    white-space: nowrap;
}

/* ── Ссылки (переход между Login ↔ Register) ── */
.auth-links {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--bs-body-color);
}

.auth-links a {
    color: #0d6efd;
    text-decoration: none;
    font-weight: 500;
}

.auth-links a:hover {
    text-decoration: underline;
}

/* ── Checkbox согласия (условия использования) ── */
.auth-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--bs-body-color);
}

.auth-consent input[type="checkbox"] {
    margin-top: 0.2rem;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    accent-color: #0d6efd;
}

.auth-consent a {
    color: #0d6efd;
    text-decoration: none;
}

.auth-consent a:hover {
    text-decoration: underline;
}

/* ── Checkbox «Запомнить меня» с inline ссылкой «Забыли пароль?» ── */
.auth-remember {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.auth-remember label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    margin: 0;
    font-weight: normal;
}

.auth-remember a {
    color: #0d6efd;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
}

/* ══════════════════════════════════════════════════════════════════
   Honeypot — скрытое поле-ловушка для ботов.
   Визуально невидимо, вынесено за пределы экрана.
   Обычные пользователи не видят и не заполняют это поле;
   боты заполняют его автоматически, что позволяет их обнаружить.
   ══════════════════════════════════════════════════════════════════ */
.auth-hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

/* ══════════════════════════════════════════════════════════════════
   Радио-группа выбора типа клиента в форме регистрации.
   Четыре варианта располагаются в виде сетки: вертикально на узких экранах,
   в две колонки на широких. Полные названия типов (без сокращений), кликабельная
   зона — весь прямоугольник. Нативный радио-инпут визуально скрыт, состояние
   выбора отображается изменением рамки и фона варианта.
   ══════════════════════════════════════════════════════════════════ */
.auth-client-type {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

@media (min-width: 480px) {
    .auth-client-type {
        grid-template-columns: 1fr 1fr;
    }
}

/* Один вариант радио-группы: целиком кликабельный прямоугольник.
   Высота фиксируется через min-height, чтобы все варианты были одинакового
   размера независимо от длины подписи; align-items: center гарантирует, что
   текст всегда по центру по вертикали относительно кружка маркера.

   ВАЖНО: явно дублируем display/font-weight/margin несмотря на то, что выше
   правило .auth-field > label ограничено прямыми потомками — этот label
   тоже живёт внутри .auth-field, и без локального переопределения сторонние
   стили (Bootstrap reboot для form-label, темы Syncfusion) могут переопределить
   compose: display: block, font-weight: 500, нарушив выравнивание плитки. */
.auth-client-type-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    min-height: 2.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.5rem;
    cursor: pointer;
    user-select: none;
    background-color: #fff;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    font-size: 0.9rem;
    font-weight: normal;
    line-height: 1.25;
    margin: 0;
    color: var(--bs-body-color);
}

/* Псевдо-маркер радио: цветной кружок слева от текста.
   Полностью заменяет нативный <input type="radio"> — никаких «квадратов
   вокруг точки» из-за глобальных outline-валидации (см. app.css). */
.auth-client-type-option > input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.05rem;
    height: 1.05rem;
    border: 2px solid #adb5bd;
    border-radius: 50%;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
    background-color: #fff;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    outline: none !important;
}

.auth-client-type-option > input[type="radio"]:checked {
    border-color: #0d6efd;
    background-color: #0d6efd;
    box-shadow: inset 0 0 0 3px #fff;
}

.auth-client-type-option > input[type="radio"]:focus-visible {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.auth-client-type-option > span {
    flex: 1 1 auto;
}

.auth-client-type-option:hover {
    border-color: #86b7fe;
}

.auth-client-type-option:has(input:checked) {
    border-color: #0d6efd;
    background-color: #e7f1ff;
}

/* Поле ИНН в форме регистрации: всегда присутствует в DOM, но видимо
   только при выборе юр.лица. Источник истины — атрибут data-show-when-legal,
   который проставляется сервером при рендере (после POST) и переключается
   inline-скриптом в Register.razor при клике пользователя по радио-группе. */
.auth-field-inn[data-show-when-legal="0"] {
    display: none;
}

.auth-field-inn[data-show-when-legal="1"] {
    display: block;
}

/* ══════════════════════════════════════════════════════════════════
   Статус-сообщения (success / danger).
   Совместимы с Syncfusion SfMessage severity-стилями:
   - auth-status-danger  ≈ MessageSeverity.Error
   - auth-status-success ≈ MessageSeverity.Success
   ══════════════════════════════════════════════════════════════════ */
.auth-status {
    border-radius: 0.375rem;
    padding: 0.65rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.auth-status-danger {
    background-color: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
}

.auth-status-success {
    background-color: #d1e7dd;
    color: #0f5132;
    border: 1px solid #badbcc;
}

/* ── Сообщения валидации ── */
.auth-field .text-danger,
.auth-field .validation-message {
    font-size: 0.8rem;
    margin-top: 0.25rem;
    color: #dc3545;
}

.validation-summary-errors {
    background-color: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
    border-radius: 0.375rem;
    padding: 0.65rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

/* ══════════════════════════════════════════════════════════════════
   Адаптивность — мобильные устройства и планшеты.
   На экранах < 992px панели перестраиваются в одну колонку:
   форма сверху (order-1), брендинг снизу (order-2).
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .auth-feature-panel {
        min-height: auto;
        padding: 2rem 1.5rem;
    }

    .auth-feature-panel h1 {
        font-size: 1.6rem;
    }

    .auth-form-panel {
        padding: 1.5rem 1rem;
    }
}

@media (max-width: 575.98px) {
    .auth-form-container {
        max-width: 100%;
    }
}

/* Стили шапки, боковой панели и навигации личного кабинета вынесены
   в отдельный файл wwwroot/css/manage-shell.css — он подключается из
   App.razor и нужен только в зоне /Account/Manage/*. Здесь оставлены
   мелкие утилиты, общие для нескольких страниц ЛК (см. ниже). */

/* ── Коды восстановления 2FA — моноширинный шрифт ── */
.recovery-code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    padding: 0.15rem 0.4rem;
    background-color: var(--bs-light, #f8f9fa);
    border-radius: 0.25rem;
}

/* ── QR-код 2FA (страница EnableAuthenticator) ── */
.totp-qr-wrapper {
    display: inline-block;
    padding: 0.75rem;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    margin: 0.5rem 0 1rem;
    line-height: 0;
}
.totp-qr-wrapper svg {
    width: 220px;
    height: 220px;
    display: block;
}