/* auth.css */

body {
    font-family: var(--font-family);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.auth-container {
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: center;
}

.auth-form-wrapper {
    background-color: var(--bg-secondary);
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 400px;
    border: 1px solid var(--border-primary);
    position: relative;
}

/* [2026-09-17] Смена шага формы внутри карточки (запрос кода → ввод кода и пароля на
   forgot-password.html; вход → MFA / смена пароля на login.html). Раньше формы менялись
   переключением display, карточка скачком меняла высоту. Высоту анимирует JS (AuthMotion.swapForms)
   — он выставляет её в пикселях до и после подмены, а этот класс задаёт сам переход;
   overflow: hidden нужен только на время роста, чтобы входящая форма не выступала за скругление.
   Ref: emil-skills:find-animation-opportunities, строки 1 и 6. Chat: auth-pages-animations-2026-09-17. */
.auth-form-wrapper.is-resizing {
    overflow: hidden;
    transition: height 260ms var(--ease-out);
}

.auth-form-leaving {
    opacity: 0;
    transform: translateX(-8px);
    transition:
        opacity 150ms var(--ease-in),
        transform 150ms var(--ease-in);
    pointer-events: none;
}

.auth-form-entering {
    animation: auth-form-in 200ms var(--ease-out);
}

@keyframes auth-form-in {
    from {
        opacity: 0;
        transform: translateX(8px);
    }
}

/* Header controls (theme only) */
.auth-header-controls {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

/* Theme toggle button */
.theme-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--text-secondary);
    transition:
        color var(--transition-base),
        transform 160ms var(--ease-out);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle-btn:hover {
    color: var(--text-primary);
    background-color: var(--bg-hover);
}

/* [2026-09-17] Отклик на нажатие для служебных кнопок карточки (тема, язык, показ пароля):
   раньше нажатие подтверждалось только сменой цвета на hover, которого нет на тач-экранах.
   Сам transform добавлен в transition каждой кнопки по месту — общее правило здесь
   перебивалось бы их собственными объявлениями ниже по файлу.
   Ref: emil-skills:find-animation-opportunities, строка 4. Chat: auth-pages-animations-2026-09-17. */
.theme-toggle-btn:active,
.language-toggle-btn:active,
.toggle-password:active {
    transform: scale(0.92);
}

.theme-toggle-btn:focus {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

h1 {
    text-align: center;
    font-size: 1.75rem;
    margin-top: 0;
    margin-bottom: 2rem;
    color: var(--text-primary);
}

.input-group {
    margin-bottom: 1.25rem;
    position: relative;
}

.input-group label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    font-weight: var(--font-weight-medium);
}

.input-group input {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    font-family: inherit;
    font-size: 1rem;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    transition:
        background-color var(--transition-base),
        color var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base);
}

/* Override browser autocomplete styles */
.input-group input:-webkit-autofill,
.input-group input:-webkit-autofill:hover,
.input-group input:-webkit-autofill:focus,
.input-group input:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--text-primary);
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px var(--bg-tertiary);
}

/* Отступ справа для поля с кнопкой показа пароля */
.input-group.password-field input {
    padding-right: 2.5rem;
}

/* Скрыть нативную иконку показа пароля браузера (Edge/Chrome) */
.input-group.password-field input::-ms-reveal,
.input-group.password-field input::-ms-clear,
.input-group.password-field input::-webkit-credentials-auto-fill-button {
    display: none !important;
}

.input-group input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Кнопка показа/скрытия пароля */
.toggle-password {
    position: absolute;
    right: 10px;
    bottom: 5px; /* Центрирование: (40px input - 30px button) / 2 = 5px */
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: var(--text-secondary);
    transition:
        color var(--transition-base),
        transform 160ms var(--ease-out);
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-password:hover {
    color: var(--text-primary);
}

.toggle-password:focus {
    outline: none;
}

/* Иконка глаза (SVG) */
.eye-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.auth-btn {
    width: 100%;
    height: 42px;
    background-color: var(--brand-primary);
    color: var(--text-inverse);
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    /* [2026-09-17] К переходу фона добавлены transform (отклик на нажатие) и color
       (метка гаснет, когда на её месте появляется спиннер загрузки). position: relative —
       база для псевдоэлемента спиннера, раньше кнопка была статической.
       Ref: разбор страниц входа навыком emil-skills:find-animation-opportunities, строка 4
       (нет :active) и строка 3 (вход по сети без обратной связи).
       Chat: auth-pages-animations-2026-09-17. */
    position: relative;
    transition:
        background-color var(--transition-base),
        transform 160ms var(--ease-out),
        color 120ms var(--ease-out);
    margin-top: 0.5rem;
}

.auth-btn:hover {
    background-color: var(--brand-primary-hover);
}

.auth-btn:focus {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* [2026-09-17] Обратная связь на нажатие: ни у одной кнопки форм входа её не было —
   на тачскрине нажатие не подтверждалось ничем (hover там не срабатывает).
   Ref: emil-skills:find-animation-opportunities, строка 4. Chat: auth-pages-animations-2026-09-17. */
.auth-btn:active:not(:disabled) {
    transform: scale(0.97);
}

/* [2026-09-17] Состояние загрузки кнопки формы. Раньше вход (auth.js) не показывал ничего,
   пока идёт запрос к сети, а forgot-password.js подменял текст кнопки на англоязычный
   'Sending...' в обход локализации. Теперь метка гаснет, на её месте — кольцо-спиннер;
   ширина кнопки не меняется, слой composited (transform).
   Ref: emil-skills:find-animation-opportunities, строка 3. Chat: auth-pages-animations-2026-09-17. */
.auth-btn.loading {
    color: transparent;
    cursor: wait;
}

.auth-btn::after,
.oauth-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid var(--text-inverse);
    border-top-color: transparent;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms var(--ease-out);
    /* [2026-09-18] Д10: было 800ms — та же величина, что канон, но записанная иначе; через
       токен она перестаёт быть отдельным числом.
       Ref: docs/AUDIT_UI_MOTION_2026-09-17.md Д10. Chat: ui-motion-fixes-2026-09-17. */
    animation: auth-spin var(--spinner-duration) linear infinite;
    animation-play-state: paused;
}

/* У OAuth-кнопок светлый фон и тёмный текст — кольцо берёт их собственный цвет текста,
   иначе на белом фоне спиннер был бы белым по белому. */
.oauth-btn::after {
    border-color: var(--text-primary);
    border-top-color: transparent;
}

.auth-btn.loading::after,
.oauth-btn.loading::after {
    opacity: 1;
    animation-play-state: running;
}

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

/* =================================
   OAuth BUTTONS
   ================================= */

/* Divider with text */
.oauth-divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    color: var(--text-tertiary);
    font-size: 0.85rem;
}

.oauth-divider::before,
.oauth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--border-primary);
}

.oauth-divider span {
    padding: 0 1rem;
    white-space: nowrap;
}

/* OAuth buttons container */
.oauth-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* OAuth button base */
.oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    height: 42px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    /* [2026-09-17] position: relative — база для кольца-спиннера (.oauth-btn::after);
       transform в списке переходов — отклик на нажатие.
       Ref: emil-skills:find-animation-opportunities, строки 3 и 4.
       Chat: auth-pages-animations-2026-09-17. */
    position: relative;
    transition:
        background-color var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base),
        transform 160ms var(--ease-out),
        color 120ms var(--ease-out);
}

.oauth-btn:focus {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.oauth-btn:active:not(:disabled) {
    transform: scale(0.97);
}

.oauth-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* [2026-09-17] Раньше загрузка OAuth показывалась только затемнением до 0.7 — непонятно,
   идёт ли запрос. Метка и логотип провайдера гаснут, по центру крутится кольцо.
   Ref: emil-skills:find-animation-opportunities, строка 3. Chat: auth-pages-animations-2026-09-17. */
.oauth-btn.loading {
    opacity: 0.7;
    color: transparent;
    cursor: wait;
}

.oauth-btn.loading .oauth-icon {
    opacity: 0;
    transition: opacity 120ms var(--ease-out);
}

/* OAuth icon */
.oauth-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Google button */
.oauth-google {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.oauth-google:hover:not(:disabled) {
    background-color: var(--bg-hover);
    border-color: var(--border-secondary);
}

/* Apple button */
.oauth-apple {
    background-color: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
}

.oauth-apple:hover:not(:disabled) {
    background-color: var(--text-secondary);
    border-color: var(--text-secondary);
}

/* Dark theme adjustments for Apple button */
[data-theme='dark'] .oauth-apple {
    background-color: #fff;
    color: #000;
    border-color: #fff;
}

[data-theme='dark'] .oauth-apple:hover:not(:disabled) {
    background-color: #e0e0e0;
    border-color: #e0e0e0;
}

/* Facebook button */
.oauth-facebook {
    background-color: #1877f2;
    color: #fff;
    border-color: #1877f2;
}

.oauth-facebook:hover:not(:disabled) {
    background-color: #166fe5;
    border-color: #166fe5;
}

/* Microsoft button */
.oauth-microsoft {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.oauth-microsoft:hover:not(:disabled) {
    background-color: var(--bg-hover);
    border-color: var(--border-secondary);
}

.redirect-link {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.redirect-link a {
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.redirect-link a:hover {
    text-decoration: underline;
    color: var(--brand-primary-hover);
}

/* Language toggle button (bottom, subtle) */
.language-toggle-btn {
    display: block;
    margin: 1rem auto 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-tertiary);
    transition:
        color var(--transition-base),
        transform 160ms var(--ease-out);
    font-weight: var(--font-weight-normal);
}

.language-toggle-btn:hover {
    color: var(--text-secondary);
}

.language-toggle-btn:focus {
    outline: 1px solid var(--border-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.language-toggle-btn .lang-code {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

/* [2026-09-10] Баннер «сайт в разработке» на странице регистрации: показывается ВСЕГДА
   (в отличие от .error-message/.success-message с display:none до появления текста),
   поэтому отдельный класс, а не переиспользование сообщений формы.
   Ref: указание PO в чате — регистрация закрыта, вход существующих сохранён.
   Chat: easykawa-vps-deploy-landing-2026-09-09. */
.auth-notice {
    margin-top: 1rem;
    padding: 1.25rem;
    border-radius: var(--radius-md);
    background-color: var(--color-info-bg);
    border: 1px solid var(--color-info-light);
    color: var(--text-primary);
    text-align: center;
}

.auth-notice-icon {
    color: var(--color-info);
    font-size: 2rem;
}

.auth-notice-title {
    margin: 0.5rem 0 0.25rem 0;
    font-weight: 600;
}

.auth-notice-text {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.error-message,
.success-message {
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    text-align: center;
    display: none;
    /* [2026-09-17] Раньше блок ошибки/успеха возникал мгновенно (JS переключает display) и
       толчком сдвигал кнопку вниз. Теперь он проявляется за 200 мс со сдвигом 4px.
       Взяты именно keyframes, а не transition + @starting-style: скрытие идёт тем же
       display: none, и при transition display+allow-discrete блок задерживался бы на экране
       ещё 200 мс после очистки. Анимация проигрывается заново при каждом показе, потому что
       обработчики сначала прячут блок, затем показывают снова.
       Ref: emil-skills:find-animation-opportunities, строка 2. Chat: auth-pages-animations-2026-09-17. */
    animation: auth-msg-in 200ms var(--ease-out);
}

@keyframes auth-msg-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

.error-message {
    background-color: var(--color-error-bg);
    color: var(--color-error);
    border: 1px solid var(--color-error-light);
}

/* Error message with action links (account exists case) */
.error-message p {
    margin: 0 0 0.5rem 0;
}

.error-message .error-actions {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-error-light);
}

.error-message .error-actions a {
    color: var(--color-error);
    text-decoration: underline;
    font-weight: 500;
}

.error-message .error-actions a:hover {
    opacity: 0.8;
}

.error-message .error-actions .separator {
    margin: 0 0.5rem;
    opacity: 0.5;
}

.success-message {
    background-color: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid var(--color-success-light);
}

/* MFA code input - smaller placeholder */
#mfa-login-code::placeholder,
#totp-code::placeholder {
    font-size: 0.85rem;
    color: var(--text-tertiary);
}

/* MFA form text - center alignment */
.auth-form-wrapper h2,
.auth-form-wrapper p {
    text-align: center;
}

/* =================================
   DYNAMIC FORM SECTIONS (MFA, Password Change)
   ================================= */

/* Section heading */
.auth-section-title {
    margin-top: 2rem;
}

/* Description text below heading */
.auth-description {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* MFA code input field styling */
.mfa-code-input {
    text-align: center;
    font-size: 1.5rem;
    letter-spacing: 0.5rem;
}

/* Loading state container */
.auth-loading {
    text-align: center;
    padding: 2rem;
}

/* QR code section container */
.auth-qr-container {
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Margin bottom utility */
.auth-mb-1 {
    margin-bottom: 1rem;
}

/* QR code box with white background */
.auth-qr-box {
    display: inline-block;
    padding: 1rem;
    background: white;
    border-radius: 8px;
}

/* Manual entry text styling */
.auth-manual-entry {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Secret code display */
.auth-secret-code {
    user-select: all;
    font-size: 0.75rem;
    word-break: break-all;
    display: inline-block;
    max-width: 100%;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: 4px;
}

/* Error text inline */
.auth-error-text {
    color: var(--color-error);
}

/* =================================
   MICROSOFT ACCOUNT TYPE DROPDOWN
   ================================= */

.microsoft-account-dropdown {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    overflow: hidden;
    /* [2026-09-17] Список «личный / рабочий аккаунт» добавлялся в body и возникал мгновенно,
       без связи с кнопкой, из которой он раскрывается. Теперь раскрывается от верхней кромки
       кнопки и так же складывается обратно (класс is-closing ставит auth.js перед удалением).
       Ref: emil-skills:find-animation-opportunities, строка 5. Chat: auth-pages-animations-2026-09-17. */
    transform-origin: top center;
    animation: auth-dropdown-in 180ms var(--ease-out);
}

.microsoft-account-dropdown.is-closing {
    animation: auth-dropdown-out 120ms var(--ease-in) forwards;
    pointer-events: none;
}

@keyframes auth-dropdown-in {
    from {
        opacity: 0;
        transform: scale(0.97) translateY(-4px);
    }
}

@keyframes auth-dropdown-out {
    to {
        opacity: 0;
        transform: scale(0.97) translateY(-4px);
    }
}

.microsoft-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color var(--transition-base);
}

.microsoft-option:hover {
    background: var(--bg-hover);
}

.microsoft-option:first-child {
    border-bottom: 1px solid var(--border-primary);
}

.microsoft-option-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.microsoft-option-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.microsoft-option-title {
    font-size: 0.9rem;
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.microsoft-option-desc {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* Mobile responsive adjustments */
@media (max-width: 480px) {
    .auth-container {
        padding: 16px;
        padding-bottom: 32px; /* Extra bottom padding */
        align-items: flex-start;
        min-height: 100vh;
        box-sizing: border-box;
    }

    .auth-form-wrapper {
        padding: 1.5rem;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    h1 {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }
}

/* =================================
   REDUCED MOTION
   ================================= */

/* [2026-09-17] Движение не отключается в ноль, а ослабляется: сдвиги и масштаб убираются,
   остаётся затухание, спиннер вращается втрое медленнее (он единственный сигнал, что запрос
   идёт, — убирать его нельзя). Раньше в auth.css блока prefers-reduced-motion не было вовсе.
   Ref: docs/DESIGN_SYSTEM.md §Transitions; emil-skills:find-animation-opportunities.
   Chat: auth-pages-animations-2026-09-17. */

@keyframes auth-fade-in {
    from {
        opacity: 0;
    }
}

@keyframes auth-fade-out {
    to {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-btn:active:not(:disabled),
    .oauth-btn:active:not(:disabled),
    .theme-toggle-btn:active,
    .language-toggle-btn:active,
    .toggle-password:active {
        transform: none;
    }

    .auth-form-wrapper.is-resizing {
        transition: none;
    }

    .auth-form-leaving {
        transform: none;
    }

    .error-message,
    .success-message,
    .auth-form-entering,
    .microsoft-account-dropdown {
        animation-name: auth-fade-in;
    }

    .microsoft-account-dropdown.is-closing {
        animation-name: auth-fade-out;
    }

    .auth-btn::after,
    .oauth-btn::after {
        animation-duration: 2400ms;
    }
}