/* ─────────────────────────────────────────────────────────────────────────
   ZeppSso.css — Estilos da seção de SSO na tela de login (GenIndex.cshtml).

   Tema-agnóstico de propósito: estes estilos valem para qualquer empresa.
   A cor de destaque (active tab / brand) é injetada via inline-style
   `--zepp-brand: <hex>;` no container `.zepp-sso-tabs`, vindo do
   `Model.MainColor` do servidor. Não há overrides por sufixo de tema.
   ───────────────────────────────────────────────────────────────────────── */

/* ─── Botões de provedor (Microsoft / Google) ──────────────────────────── */
.zepp-sso-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.zepp-sso-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    background: #fff;
    color: #3c4043;
    /* Sem font-family explícita — herda a fonte do Zepp (OpenSans-Regular via ZeppCSS),
       mantendo coerência visual com o resto da tela de login. */
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.zepp-sso-button:hover {
    background: #f7f7f7;
    text-decoration: none;
    color: #3c4043;
}

.zepp-sso-button:focus,
.zepp-sso-button:active {
    outline: none;
    box-shadow: 0 0 0 2px rgba(60, 64, 67, 0.15);
}

.zepp-sso-button img {
    flex: 0 0 auto;
}

/* Variante "primary" — usada como ação principal (corporate-only, aba do
   layout de abas). Botão mais alto, fonte ligeiramente maior. */
.zepp-sso-button--primary {
    height: 52px;
    font-size: 15px;
}

/* Modificadores por provedor — aplicam a fonte oficial de cada marca.
   Microsoft usa Segoe UI Semibold (fonte corporativa MS, padrão dos lockups
   "Sign in with Microsoft"); Google exige Roboto Medium na sua diretriz de
   "Sign in with Google". Os modificadores se aplicam a botões em ambos os
   layouts (Direction 01 e Direction 05). */
.zepp-sso-button--microsoft {
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
}

.zepp-sso-button--google {
    font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
    font-weight: 500;
}

/* ─── Divisor "OU CONTINUE COM ..." ───────────────────────────────────── */
.zepp-sso-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 12px;
    color: #9a9a9a;
    /* font-family herdada do Zepp. */
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.zepp-sso-divider__rule {
    flex: 1;
    height: 1px;
    background: #e5e5e5;
}

.zepp-sso-divider__label {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ─── Abas (Senha / Microsoft / Google) — Direction 05 ─────────────────── */
.zepp-sso-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-bottom: 1px solid #e5e5e5;
}

.zepp-sso-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 8px;
    margin-bottom: -1px; /* sobrepor a linha inferior do container */
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #888;
    /* font-family herdada do Zepp. */
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.zepp-sso-tab:hover {
    color: #555;
}

.zepp-sso-tab.is-active {
    color: var(--zepp-brand, #1a1a1a);
    border-bottom-color: var(--zepp-brand, #1a1a1a);
    font-weight: 600;
}

.zepp-sso-tab img {
    flex: 0 0 auto;
}

/* Tabs — mesma lógica dos botões: cada provedor traz sua própria fonte para
   o rótulo. Não mexemos no font-weight aqui (o estado is-active continua
   passando de 500 para 600 normalmente, garantindo o destaque consistente). */
.zepp-sso-tab--microsoft {
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.zepp-sso-tab--google {
    font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
}

.zepp-sso-tab-body {
    /* Visibilidade inicial controlada via JS (.zepp-sso-tab data-default-tab).
       Antes do JS rodar, mostramos por padrão para evitar "piscar oculto" —
       o JS ativa apenas o body correspondente à aba padrão em seguida. */
}

/* ─── Dica auxiliar (corporate-only / texto de redirecionamento) ───────── */
.zepp-sso-hint {
    margin: 12px 0 0;
    color: #888;
    /* font-family herdada do Zepp. */
    font-size: 13px;
    font-weight: 400;
    text-align: center;
    line-height: 1.5;
}

.zepp-sso-hint a {
    color: inherit;
    text-decoration: underline;
}

/* ─── Link "Trocar conta X" ─────────────────────────────────────────────
   Aciona o mesmo fluxo OAuth do botão principal, mas com prompt=select_account
   para que o IdP mostre o chooser em vez de re-autenticar silenciosamente.

   Os pais .zepp-sso-buttons e .zepp-sso-tab-body têm gap: 10px entre itens
   flex. Os margins abaixo *combinam* com esse gap:
   - margin-top: -4px  → fica grudado no botão acima (gap efetivo ~6px)
   - margin-bottom: 8px → empurra para longe do próximo provedor/rodapé
                          (gap efetivo ~18px) */
.zepp-sso-switch {
    display: block;
    margin: -4px 0 8px;
    color: #888;
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    text-decoration: underline;
    /* Aplicado em <button> dentro do <form> SSO — zera o chrome default do
       button para manter o look de link sublinhado. */
    background: none;
    border: 0;
    padding: 0;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
}

.zepp-sso-switch:hover {
    color: #555;
}

/* Wrapper dos botões SSO: cada botão (provider primary + link "Trocar conta")
   é embrulhado em um <form method="POST"> para que os parâmetros (provider,
   company, returnUrl, prompt) viajem no body, não na URL. O form em si não
   tem estilo visível — só precisa não introduzir margens ou width tortos. */
.zepp-sso-form {
    margin: 0;
    width: 100%;
    display: block;
}