/* =====================================================================
   PeopleHub — páginas de autenticação (login, esqueci a senha, redefinir)
   Barra de ferramentas (tema + idioma) e modo escuro.
   Carregada depois de ph-enterprise.css (tokens) e dos estilos da página.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Barra no canto superior direito do painel do formulário
   --------------------------------------------------------------------- */
.auth-toolbar {
    position: absolute;
    top: 20px;
    right: 24px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
}

.auth-theme-toggle {
    position: relative;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #e2e8f0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #475569;
    font-size: 0.95rem;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s, color .15s, box-shadow .15s, transform .15s;
}

.auth-theme-toggle:hover {
    border-color: #f9a430;
    color: #80162c;
    box-shadow: 0 0 0 3px rgba(249, 164, 48, 0.15);
}

.auth-theme-toggle:active { transform: scale(.92); }

/* =====================================================================
   ANIMAÇÕES 3D DO FORMULÁRIO
   Entrada em cascata com rotação em X · luz que segue o rato ·
   emblema que gira ao entrar · foco com elevação · erro com abanão ·
   brilho no botão e estado "a enviar" (ph-auth-scene.js) ·
   transição 3D entre páginas de autenticação (View Transitions).
   Tudo pára com prefers-reduced-motion (regra global em ph-enterprise.css).
   ===================================================================== */
.login-right,
.right-panel {
    isolation: isolate;
    perspective: 1200px;
}

@keyframes auth-rise-3d {
    from { opacity: 0; transform: translate3d(0, 26px, -60px) rotateX(16deg); filter: blur(4px); }
    to   { opacity: 1; transform: none; filter: none; }
}

/* O formulário entra em cascata, a "levantar-se" do fundo */
.login-right > *:not(.auth-toolbar),
.right-panel > *:not(.auth-toolbar) {
    transform-origin: 50% 100%;
    animation: auth-rise-3d .8s var(--ease-out) backwards;
}
.login-right > :nth-child(3), .right-panel > :nth-child(3) { animation-delay: 60ms; }
.login-right > :nth-child(4), .right-panel > :nth-child(4) { animation-delay: 130ms; }
.login-right > :nth-child(5), .right-panel > :nth-child(5) { animation-delay: 200ms; }
.login-right > :nth-child(n+6), .right-panel > :nth-child(n+6) { animation-delay: 270ms; }

/* Dentro do formulário, cada campo entra a seguir ao anterior */
:is(.login-right, .right-panel) form > :not(input) {
    transform-origin: 50% 100%;
    animation: auth-rise-3d .75s var(--ease-out) backwards;
}
:is(.login-right, .right-panel) form > :nth-child(2) { animation-delay: 330ms; }
:is(.login-right, .right-panel) form > :nth-child(3) { animation-delay: 400ms; }
:is(.login-right, .right-panel) form > :nth-child(4) { animation-delay: 470ms; }
:is(.login-right, .right-panel) form > :nth-child(5) { animation-delay: 540ms; }
:is(.login-right, .right-panel) form > :nth-child(n+6) { animation-delay: 610ms; }

/* Luz ambiente que segue o rato (--lx / --ly via JS) */
.login-right::before,
.right-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(520px circle at var(--lx, 50%) var(--ly, 30%), rgba(249, 164, 48, .10), rgba(128, 22, 44, .04) 40%, transparent 70%);
    opacity: 0;
    transition: opacity .5s ease;
}
.login-right.is-lit::before,
.right-panel.is-lit::before { opacity: 1; }

/* Emblema (logo circular): gira em Y ao entrar e depois flutua com um halo a pulsar */
@keyframes auth-emblem-in {
    from { opacity: 0; transform: perspective(600px) rotateY(-200deg) scale(.6); }
    60%  { opacity: 1; }
    to   { opacity: 1; transform: perspective(600px) rotateY(0) scale(1); }
}
@keyframes auth-emblem-float {
    0%, 100% { translate: 0 0; box-shadow: 0 4px 20px rgba(128, 22, 44, .12), 0 0 0 0 rgba(249, 164, 48, .35); }
    50%      { translate: 0 -5px; box-shadow: 0 14px 28px rgba(128, 22, 44, .18), 0 0 0 9px rgba(249, 164, 48, 0); }
}
.auth-emblem {
    animation:
        auth-emblem-in 1.1s var(--ease-out) .1s backwards,
        auth-emblem-float 5s ease-in-out 1.3s infinite;
    transition: transform .6s var(--ease-spring);
}
.auth-emblem:hover { transform: perspective(600px) rotateY(18deg) rotateX(-8deg) scale(1.06); }

/* Campos: elevam-se ao receber o foco */
:is(.login-right, .right-panel) .input-group {
    border-radius: 5px;
    transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
:is(.login-right, .right-panel) .input-group:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 0 0 4px rgba(128, 22, 44, .08), 0 14px 26px -16px rgba(128, 22, 44, .55);
}
@keyframes auth-icon-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.3) rotate(-8deg); }
    100% { transform: scale(1); }
}
:is(.login-right, .right-panel) .input-group:focus-within .input-group-text i {
    animation: auth-icon-pop .45s var(--ease-spring);
}

/* Erro de validação: abanão 3D depois de o formulário entrar */
@keyframes auth-shake {
    0%, 100% { transform: none; }
    20% { transform: perspective(600px) translateX(-6px) rotateY(-6deg); }
    40% { transform: perspective(600px) translateX(5px) rotateY(5deg); }
    60% { transform: perspective(600px) translateX(-3px) rotateY(-3deg); }
    80% { transform: perspective(600px) translateX(2px); }
}
:is(.login-right, .right-panel) .input-group:has(.is-invalid) {
    animation: auth-shake .55s ease-in-out .9s;
}
:is(.login-right, .right-panel) .invalid-feedback {
    animation: ph-rise .4s var(--ease-out) 1s backwards;
}

/* Botão principal: reflexo periódico, profundidade ao carregar e estado "a enviar" */
.btn-login,
.btn-submit {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn-login::after,
.btn-submit::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    z-index: -1;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32), transparent);
    transform: skewX(-20deg);
    animation: auth-sheen 4.5s var(--ease-in-out) 1.6s infinite;
    pointer-events: none;
}
@keyframes auth-sheen {
    0%       { left: -60%; }
    30%, 100% { left: 130%; }
}
.btn-login:active,
.btn-submit:active { transform: perspective(500px) translateZ(-14px) !important; }
.btn-login.is-submitting,
.btn-submit.is-submitting {
    pointer-events: none;
    filter: saturate(.85);
}
.btn-login.is-submitting::after,
.btn-submit.is-submitting::after { animation-duration: 1.1s; animation-delay: 0s; }

/* Botão "Voltar": seta desliza ao passar o rato */
.btn-back i { transition: transform .3s var(--ease-spring); }
.btn-back:hover i { transform: translateX(-4px); }

/* ---------------------------------------------------------------------
   Transição entre páginas de autenticação (login ↔ recuperar ↔ redefinir):
   o painel da marca faz cross-fade e o formulário vira em 3D.
   --------------------------------------------------------------------- */
.login-left,
.left-panel { view-transition-name: auth-brand; }
.login-right,
.right-panel { view-transition-name: auth-form; }

::view-transition-old(auth-form) { animation: auth-vt-out .32s var(--ease-in-out) both; }
::view-transition-new(auth-form) { animation: auth-vt-in .55s var(--ease-out) both; }
::view-transition-old(auth-brand),
::view-transition-new(auth-brand) { animation-duration: .45s; }

@keyframes auth-vt-out {
    to { opacity: 0; transform: perspective(1400px) translateZ(-120px) rotateY(-22deg); filter: blur(3px); }
}
@keyframes auth-vt-in {
    from { opacity: 0; transform: perspective(1400px) translateZ(-120px) rotateY(22deg); }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(auth-form),
    ::view-transition-new(auth-form),
    ::view-transition-old(auth-brand),
    ::view-transition-new(auth-brand) { animation: none; }
    .btn-login::after,
    .btn-submit::after { display: none; }
}

/* =====================================================================
   MODO ESCURO
   ===================================================================== */
html[data-theme="dark"],
html[data-theme="dark"] body { background: var(--ph-bg) !important; }

/* Painel da marca: deixa de ser vermelho sólido, mantém um toque bordô */
html[data-theme="dark"] .login-left,
html[data-theme="dark"] .left-panel {
    background:
        radial-gradient(120% 70% at 0% 0%, rgba(128, 22, 44, .45), transparent 60%),
        linear-gradient(160deg, #2a2230 0%, var(--ph-sidebar-bg) 70%) !important;
    border-right: 1px solid var(--ph-border);
}

/* Painel do formulário */
html[data-theme="dark"] .login-right,
html[data-theme="dark"] .right-panel { background: var(--ph-surface) !important; }

html[data-theme="dark"] .form-title { color: var(--ph-ink) !important; }
html[data-theme="dark"] .form-subtitle { color: var(--ph-ink-faint) !important; }
html[data-theme="dark"] .form-label-custom { color: var(--ph-ink-soft) !important; }

html[data-theme="dark"] .input-group .input-group-text {
    background: var(--ph-surface-2);
    border-color: var(--ph-border);
    color: var(--ph-ink-faint);
}
html[data-theme="dark"] .input-group .form-control {
    background: var(--ph-surface-2);
    border-color: var(--ph-border);
    color: var(--ph-ink);
}
html[data-theme="dark"] .input-group .form-control::placeholder { color: var(--ph-ink-faint); }
/* O anel de foco global do painel (ph-enterprise.css) não se aplica aqui:
   o destaque é feito pela borda do grupo inteiro, como no modo claro */
html[data-theme="dark"] .input-group .form-control:focus {
    border-color: var(--ph-brand-text) !important;
    box-shadow: none !important;
    background: var(--ph-surface-2);
}
html[data-theme="dark"] .input-group:focus-within .input-group-text {
    background: var(--ph-surface-2);
    border-color: var(--ph-brand-text);
    color: var(--ph-brand-text);
}
html[data-theme="dark"] .input-group .form-control.is-invalid { border-color: #f87171 !important; }
html[data-theme="dark"] .input-group:has(.is-invalid) .input-group-text { border-color: #f87171; color: #f87171; }
html[data-theme="dark"] .invalid-feedback { color: #f87171; }

/* Botão de mostrar/ocultar senha: sem fundo próprio; a borda e o fundo vêm do grupo */
html[data-theme="dark"] .input-group:has(.toggle-password-btn) {
    background: var(--ph-surface-2);
    border-color: var(--ph-border);
}
html[data-theme="dark"] .input-group .toggle-password-btn {
    background: transparent;
    color: var(--ph-ink-faint);
}
html[data-theme="dark"] .input-group .toggle-password-btn:hover,
html[data-theme="dark"] .input-group .toggle-password-btn:focus-visible { color: var(--ph-brand-text); }
html[data-theme="dark"] .input-group:has(.toggle-password-btn):focus-within { border-color: var(--ph-brand-text); }
html[data-theme="dark"] .input-group:has(.toggle-password-btn):has(.is-invalid) { border-color: #f87171; }

/* Preenchimento automático do browser (fundo amarelo/branco) */
html[data-theme="dark"] .input-group .form-control:-webkit-autofill {
    -webkit-text-fill-color: var(--ph-ink);
    -webkit-box-shadow: 0 0 0 1000px var(--ph-surface-2) inset !important;
    caret-color: var(--ph-ink);
}

html[data-theme="dark"] .form-check-input { background-color: var(--ph-surface-2); border-color: var(--ph-border-strong); }
html[data-theme="dark"] .form-check-input:checked { background-color: #80162c; border-color: #80162c; }

html[data-theme="dark"] .forgot-link,
html[data-theme="dark"] .footer-note strong { color: var(--ph-brand-text) !important; }
html[data-theme="dark"] .footer-note,
html[data-theme="dark"] .divider-text { color: var(--ph-ink-faint) !important; }

html[data-theme="dark"] .btn-back {
    background: var(--ph-surface-3) !important;
    border-color: var(--ph-border) !important;
    color: var(--ph-ink-soft) !important;
}
html[data-theme="dark"] .btn-back:hover { background: var(--ph-border) !important; color: var(--ph-ink) !important; }

/* Indicador de força da palavra-passe (cor neutra definida via JS → rgb()) */
html[data-theme="dark"] .strength-bar { background: var(--ph-surface-3); }
html[data-theme="dark"] .strength-bar[style*="rgb(226, 232, 240)"] { background: var(--ph-surface-3) !important; }
html[data-theme="dark"] .strength-label { color: var(--ph-ink-faint); }

/* Barra de ferramentas */
html[data-theme="dark"] .auth-theme-toggle {
    background: var(--ph-surface-2);
    border-color: var(--ph-border);
    color: #ffd08a;
}
html[data-theme="dark"] .auth-theme-toggle:hover { border-color: #f9a430; }

/* Logo circular: contorno claro deixa de "brilhar" no escuro */
html[data-theme="dark"] [style*="#f0e8ea" i] { border-color: rgba(245, 160, 177, .3) !important; }

@media (max-width: 575.98px) {
    .auth-toolbar { top: 14px; right: 14px; }
}