/* Identidade Snake na tela do Authelia (lldap/SPEC-sso.md). Injetado pelo nginx antes de </head>;
   servido do próprio domínio de login, que é o que a CSP do Authelia aceita (style-src 'self').
   Cores e fonte iguais às do GLPI (glpi/plugins/customtheme) e do Portal. */
:root {
    --snake-azul: #3C50E0;
    --snake-azul-escuro: #2F3FB8;
    --snake-fundo: #f5f6fa;
    --snake-texto: #1a1a1a;
    --snake-borda: #e8e8e8;
}
html, body, #root, .MuiTypography-root, .MuiInputBase-root, .MuiFormLabel-root, .MuiButton-root {
    font-family: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}
body { background: var(--snake-fundo) !important; color: var(--snake-texto); }

/* Cartão branco em volta do formulário */
#root form, #root .MuiContainer-root .MuiGrid-container:has(form) {
    background: #fff;
}
#root .MuiContainer-maxWidthXs {
    background: #fff;
    border: 1px solid var(--snake-borda);
    border-radius: 14px;
    padding: 32px 28px 24px !important;
    margin-top: 8vh;
    box-shadow: 0 8px 30px rgba(26, 26, 26, .06);
}
/* Logo maior (o padrão é um avatar de 64 px) */
#root img[alt="Logo"], #root img[src*="logo.png"] {
    width: auto !important;
    height: 110px !important;
    max-width: 100%;
}

.MuiButton-containedPrimary {
    background: var(--snake-azul) !important;
    color: #fff !important;
    text-transform: none !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.MuiButton-containedPrimary:hover { background: var(--snake-azul-escuro) !important; }
.MuiButton-text, .MuiButton-outlinedPrimary { color: var(--snake-azul) !important; text-transform: none !important; }

.MuiOutlinedInput-root { border-radius: 8px !important; }
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--snake-azul) !important; }
.MuiFormLabel-root.Mui-focused, .MuiInputLabel-root.Mui-focused { color: var(--snake-azul) !important; }
.MuiCheckbox-root.Mui-checked, .MuiRadio-root.Mui-checked { color: var(--snake-azul) !important; }
.MuiCircularProgress-root, .MuiLinearProgress-bar { color: var(--snake-azul) !important; }
a, .MuiLink-root { color: var(--snake-azul) !important; }

/* Sem seletor de idioma (só português) e sem o rodapé "Desenvolvido por" */
#language-button, [id^="language"], #root a[href*="authelia.com"] { display: none !important; }
#root a[href*="authelia.com"] ~ *, #root .MuiTypography-root:has(> a[href*="authelia.com"]) { display: none !important; }

/* Celular: margem lateral de 16 px */
@media (max-width: 480px) {
    #root .MuiContainer-maxWidthXs { width: calc(100% - 32px) !important; margin-left: 16px !important; margin-right: 16px !important; padding: 24px 18px 18px !important; }
}

/* Rodapé "Desenvolvido por UppyCode" (injetado pelo nginx antes de </body>), como no Chat */
.snake-rodape {
    position: fixed; left: 0; right: 0; bottom: 16px;
    text-align: center; font-size: 13px; color: #737373;
    font-family: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.snake-rodape a { color: var(--snake-azul) !important; font-weight: 600; text-decoration: none; }
.snake-rodape a:hover { text-decoration: underline; }

/* ─── Layout em duas colunas (modelo da tela de login única, 06/11/2026) ───────────────────
   Só vale com html.snake-login, que o js/snake-login.js põe ao montar o painel; sem o script
   fica o cartão centralizado acima. Esquerda: formulário em fundo branco. Direita: painel azul
   com ilustração, frase e atalhos Portal · GLPI · Chat · Drive (o destino do rd fica destacado). */
html.snake-login body { background: #fff !important; display: flex; flex-direction: column; min-height: 100vh; }
html.snake-login #root { order: 1; }
html.snake-login .snake-painel { order: 2; }
html.snake-login .snake-rodape { order: 3; }

html.snake-login #root .MuiContainer-maxWidthXs {
    border: 0 !important; box-shadow: none !important; background: transparent !important;
    margin-top: 0 !important; max-width: 440px !important;
}
html.snake-login #root [id$="-stage"] { min-height: 100vh; align-items: center; align-content: center; justify-content: center; }
html.snake-login #root img[alt="Logo"], html.snake-login #root img[src*="logo.png"] { height: 84px !important; margin-bottom: 8px; }

/* Título "Faça seu login" + destino ("para entrar na Central de Atendimento (GLPI)") */
html.snake-login #first-factor-stage h5 { font-size: 0 !important; line-height: 0 !important; margin: 4px 0 20px !important; }
html.snake-login #first-factor-stage h5::before {
    content: var(--snake-titulo); display: block; line-height: 1.25;
    font-size: 30px; font-weight: 700; color: #1C2434;
}
html.snake-login #first-factor-stage h5::after {
    content: var(--snake-subtitulo); display: block; line-height: 1.4; margin-top: 6px;
    font-size: 15px; font-weight: 400; color: #64748B;
}

.snake-painel {
    background: var(--snake-azul); color: #fff;
    display: flex; align-items: center; justify-content: center;
    padding: 40px 32px; box-sizing: border-box;
    font-family: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.snake-painel-miolo { width: 100%; max-width: 520px; text-align: center; }
.snake-ilustracao { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto 28px; }
.snake-frase { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.35; }
.snake-frase-sub { margin: 8px 0 28px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .82); }
.snake-sistemas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
a.snake-sistema {
    display: block; padding: 11px 6px; border: 2px solid rgba(255, 255, 255, .85); border-radius: 8px;
    color: #fff !important; font-size: 15px; font-weight: 600; text-decoration: none; text-align: center;
    transition: background-color .15s;
}
a.snake-sistema:hover { background: rgba(255, 255, 255, .14); }
a.snake-sistema:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
a.snake-sistema.ativo { background: #fff; color: var(--snake-azul) !important; border-color: #fff; }

html.snake-login .snake-rodape { position: static; padding: 16px; background: #fff; }

/* Telas largas: formulário à esquerda, painel fixo à direita */
@media (min-width: 960px) {
    html.snake-login #root { width: 50%; }
    html.snake-login .snake-painel { position: fixed; top: 0; right: 0; bottom: 0; width: 50%; }
    html.snake-login .snake-rodape { position: fixed; left: 0; right: 50%; bottom: 0; }
}
/* Celular: painel abaixo do formulário, ilustração menor, atalhos em 2 colunas */
@media (max-width: 959px) {
    html.snake-login #root [id$="-stage"] { min-height: auto; padding: 32px 0; }
    .snake-ilustracao { max-width: 260px; }
    .snake-sistemas { grid-template-columns: repeat(2, 1fr); }
}