/* =====================================================================
   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); }

/* O formulário entra com suavidade */
.login-right > *:not(.auth-toolbar),
.right-panel > *:not(.auth-toolbar) {
    animation: ph-rise .55s var(--ease-out) backwards;
}
.login-right > :nth-child(3), .right-panel > :nth-child(3) { animation-delay: 40ms; }
.login-right > :nth-child(4), .right-panel > :nth-child(4) { animation-delay: 80ms; }
.login-right > :nth-child(5), .right-panel > :nth-child(5) { animation-delay: 120ms; }
.login-right > :nth-child(n+6), .right-panel > :nth-child(n+6) { animation-delay: 160ms; }

/* =====================================================================
   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; }
}