/*
 * auth.css — styles for the unauthenticated pages (login, install).
 *
 * Task 8-D — extracts the polished login-page chrome out of inline heredocs
 * and centralises it here. Loaded AFTER app.css via views/layouts/blank.php
 * so the rules below override the legacy `.auth-card` / `.auth-logo` block
 * in app.css §"Auth pages".
 *
 * Layout contract:
 *   <body class="auth-shell">
 *     <div class="auth-page">          ← full-viewport gradient + flex-center
 *       <div class="auth-card">         ← bordered card with shadow
 *         <header class="auth-card__header">
 *           <div class="auth-card__logo">…icon…</div>
 *           <h1 class="auth-card__title">App Name</h1>
 *           <p class="auth-card__subtitle">…subtitle…</p>
 *         </header>
 *         <form class="auth-form form-layout" …>
 *           <div class="form-field">…</div>          ← v4.10.3: FormField prefixIcon
 *              (.form-field__control/.form-field__prefix — общий примитив
 *               app.css; локальный overlay-блок ведущих иконок удалён —
 *               его позиционирование ломалось на label+input высоте)
 *           …
 *           <div class="auth-form__options">
 *             <label class="auth-form__remember"><input type="checkbox">…</label>
 *           </div>
 *           <div class="form-actions">
 *             <button class="btn btn--primary btn--block">…</button>
 *           </div>
 *         </form>
 *         <footer class="auth-card__footer">…version + copyright…</footer>
 *       </div>
 *     </div>
 *
 * All colors via var(--color-*) (Task 5-D theming system) so dark-mode
 * overrides in components.css §1 flow through automatically.
 *
 * NB: the install wizard (views/install/form.php) still uses the legacy
 * `.auth-logo` block from app.css — those rules are NOT removed here.
 * Only the `.auth-card`/`.auth-form` rules are strengthened; install
 * pages inherit the new card chrome (slightly stronger shadow, var()-based
 * radius) without breaking.
 */

/* === §1 Auth page shell ===
 * One page background only. The previous layout had a flex `.auth-shell`
 * containing a shrink-to-content `.auth-page`, which produced a narrow inner
 * background strip on wide screens. The shell owns the viewport background;
 * `.auth-page` is now a full-width transparent layout container. */
.auth-shell {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    color: var(--color-text);
}

.auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    flex: 1 1 auto;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    padding: clamp(20px, 4vw, 48px);
    background: transparent;
}

/* === §2 Auth card === */
.auth-card {
    width: min(100%, 440px);
    max-width: 440px;
    box-sizing: border-box;
    margin: 0 auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 14px 35px rgb(15 23 42 / 0.08), 0 3px 10px rgb(15 23 42 / 0.05);
    padding: clamp(28px, 4vw, 40px);
}

/* === §3 Card header (logo + title + subtitle) === */
.auth-card__header {
    text-align: center;
    margin-bottom: 2rem;
}
.auth-card__logo {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.75rem;
    background: var(--color-primary);
    color: var(--color-primary-fg);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-card__logo svg {
    width: 1.5rem;
    height: 1.5rem;
}
.auth-card__title {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--color-text);
    margin: 0;
}
.auth-card__subtitle {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--color-text-muted);
    margin: 0.4rem 0 0;
}

/* === §4 Card footer (version + copyright) === */
.auth-card__footer {
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-text-subtle);
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

/* === §5 Form layout overrides (inside .auth-card) === */
.auth-form {
    width: 100%;
    max-width: none;
    margin: 0;
    text-align: left;
}
.auth-form .form-field { margin-bottom: 1.25rem; }
.auth-form .form-input {
    min-height: 44px;
    height: 44px;
    font-size: 16px;
}
.auth-form .btn {
    width: 100%;
    max-width: none;
    min-height: 46px;
    height: 46px;
    padding: 0 16px;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
}


/* v4.10.3: §6 «Icon input group» УДАЛЁН (гард LoginFormWiringTest запрещает
 * его литерал) — ведущая
 * иконка переехала в общий примитив FormField prefixIcon +
 * .form-field__control/.form-field__prefix (app.css, рядом с .form-input).
 * Причина: иконка позиционировалась от высоты label+input и съезжала на
 * рамку input при любой нестандартной высоте (дефект со скриншота владельца,
 * мобильный Chrome). Общий примитив центрируется от box input'а и работает
 * для любой формы, не только логина. */

/* === §7 Form options row (remember-me + secondary link) === */
.auth-form__options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 1.25rem;
    min-height: 22px;
    font-size: 0.8125rem;
}
.auth-form__remember {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-text-muted);
    cursor: pointer;
    user-select: none;
}
.auth-form__remember input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-primary);
    cursor: pointer;
}
.auth-form__forgot {
    color: var(--color-primary);
    text-decoration: none;
}
.auth-form__forgot:hover {
    text-decoration: underline;
}

/* === §8 Form errors block === */
.auth-form__errors {
    margin-bottom: 1.25rem;
}

/* Info-notice над формой входа (причина принудительного логаута, v4.9.3) */
.auth-form__notices {
    margin-bottom: 1.25rem;
}

.auth-form__notices .alert {
    margin: 0;
}

/* === §9 Mobile === */
@media (max-width: 600px) {
    .auth-page {
        place-items: start center;
        padding: 16px;
    }

    .auth-card {
        width: 100%;
        max-width: 440px;
        margin-top: max(0px, 4vh);
        padding: 28px 22px;
        border-radius: var(--radius-lg);
    }

    .auth-card__header {
        margin-bottom: 1.5rem;
    }

    .auth-card__title {
        font-size: 1.35rem;
    }

    .auth-form .form-input {
        min-height: 44px;
        height: 44px;
    }

    .auth-form .btn {
        min-height: 48px;
        height: 48px;
    }
}

@media (max-width: 380px) {
    .auth-page {
        padding: 12px;
    }

    .auth-card {
        margin-top: 0;
        padding: 24px 18px;
    }

    .auth-card__logo {
        width: 46px;
        height: 46px;
    }

    .auth-card__title {
        font-size: 1.25rem;
    }
}

/* =========================================================================
   §10 Login page polish (Task 17-D)
   =========================================================================
   Two polish additions on top of §3 (auth-card__logo) + §6 (input-group):

   1. Logo hover animation — when the user hovers the .auth-card, the logo
      gently scales (1.05×) + rotates (-5deg) for a friendly micro-interaction.
      Disabled under prefers-reduced-motion (motion-sensitive users see a
      static logo).

   2. Input-group icon — vertical centring moved from §6's `bottom: 0.55rem`
      heuristic to a true `top: 50%` + translateY(-50%) so the icon stays
      perfectly centred regardless of the input's height (the heuristic
      assumed a 38px input; the new layout works for any height). The icon
      SVG is also bumped from 1rem to 1.125rem to better match the input
      text size (1rem) for visual balance.

   Existing rules from §3 + §6 are preserved (no duplicate property
   declarations — only the overrides below).
   ========================================================================= */
.auth-card__logo {
    transition: transform 300ms ease;
}
.auth-card:hover .auth-card__logo {
    transform: scale(1.05) rotate(-5deg);
}

/* §10 polish: правило центрирования иконки (`top: 50%` поверх `bottom:
 * 0.55rem`) удалено вместе с §6 — теперь это .form-field__prefix (app.css). */

@media (prefers-reduced-motion: reduce) {
    .auth-card:hover .auth-card__logo { transform: none; }
}

/* === §10 bulk-round v4.2 — login page polish (focus glow + hierarchy) === */

/*
 * VLM-аудит входной QA-волны: «flat» форма — нет отклика на фокус ввода,
 * заголовок визуально слабее полей. Здесь: акцентный ring на фокусе,
 * усиленная типографика заголовка, микро-анимации лого/кнопки, breathing
 * room для футера. Все цвета — через var(--color-*) (тёмная тема §1
 * components.css подхватывается автоматически).
 */


/* Плавная подсветка иконки при фокусе — общий контракт
 * .form-field__control:focus-within .form-field__prefix (app.css). */

/* Заголовок: крупнее, плотнее, с мягким трекингом — визуальный якорь. */
.auth-card__title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

/* Логотип: лёгкий подъём на hover — карточка «живая». */
.auth-card__logo {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    box-shadow: 0 6px 16px -6px var(--color-primary-soft, rgba(15, 118, 110, 0.45));
}
.auth-card__logo:hover {
    transform: translateY(-2px) scale(1.03);
}

/* Основная кнопка: градиент + press-механика. */
.auth-form .btn--primary {
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary) 100%);
    box-shadow: 0 6px 14px -6px var(--color-primary-soft, rgba(15, 118, 110, 0.5));
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, filter 0.12s ease-out;
}
.auth-form .btn--primary:hover {
    filter: brightness(1.05);
    box-shadow: 0 8px 18px -6px var(--color-primary-soft, rgba(15, 118, 110, 0.55));
}
.auth-form .btn--primary:active {
    transform: translateY(1px);
    box-shadow: 0 4px 10px -6px var(--color-primary-soft, rgba(15, 118, 110, 0.4));
}

/* Карточка: появление при загрузке (мягкий fade-up). */
@keyframes auth-card-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.auth-card {
    animation: auth-card-in 0.3s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .auth-card,
    .auth-card__logo,
    .auth-form .btn--primary {
        animation: none;
        transition: none;
    }
}

/* === §10 bulk-round v4.2 — END === */


/* === v4.10.11 — 16px mobile input contract ===
 * iOS Safari does not auto-zoom when editable controls use at least 16px.
 * Login fields follow the same typography and border contract as CRM forms.
 */
.auth-form input:not([type="checkbox"]):not([type="radio"]),
.auth-form select,
.auth-form textarea {
    font-size: var(--form-control-font-size);
    border-width: 1px;
}



/* === v4.10.11 — END === */