/* ============================================================ APP FM CONECTA — PAINEL ADMIN (#/admin/convites e #/admin/representantes) Só pra staff (nível 5) e líder regional (nível 4). Consome as variáveis de tokens.css, igual ao resto do app. Toda classe NOVA usa o prefixo "admin-" — nenhuma classe já existente (card, btn, auth-*, tag-soon...) é redefinida aqui, só reaproveitada como está. Mobile-first: legível a partir de 390px; sidebar fixa some a partir de 1024px. ============================================================ */ /* ---------- Ajustes de layout quando o admin está aberto (body.is-admin) ---------- O integrador é quem adiciona/remove a classe is-admin no e cuida da navegação principal (tab-bar); aqui só ficam as DUAS regras que o admin exige: esconder a tab-bar de baixo e liberar mais largura pro painel no desktop. */ body.is-admin .tab-bar { display: none; } @media (min-width: 1024px) { body.is-admin .app-shell { max-width: 1180px; border-inline: none; box-shadow: none; } } /* Em telas muito largas, a moldura de 1180px deixava uma faixa vazia grande dos dois lados e o painel parecia "encolhido" à esquerda. Aqui a moldura acompanha a tela, dando mais densidade ao conteúdo (padrão de painel admin), sem perder o respiro. */ @media (min-width: 1440px) { body.is-admin .app-shell { max-width: 1320px; } } /* ============================================================ SHELL DO ADMIN — nav própria (Convites / Representantes) + conteúdo ============================================================ */ .admin-shell { display: flex; flex-direction: column; flex: 1; min-height: 0; } .admin-nav { flex: none; display: flex; gap: var(--sp-2); padding: 0 var(--sp-5) var(--sp-4); } .admin-nav-item { flex: 1; /* min-width:0 é o que autoriza o item a encolher abaixo do tamanho do conteúdo. Sem isso, `flex:1` não segura: o item cresce até caber o texto e empurra a linha inteira pra fora da tela. */ min-width: 0; display: flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 44px; padding: 10px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); transition: all var(--t-fast) var(--ease); } /* Celular: com a 3ª aba (Avisos, da Rodada B) os rótulos lado a lado não cabem em 390px — "Representantes" sozinho pedia 161px dos ~111px disponíveis por item, e a PÁGINA inteira ganhava scroll horizontal. Empilhar ícone sobre texto (o mesmo formato da tab bar de baixo, já familiar) faz os três caberem sem cortar palavra nem esconder aba. */ @media (max-width: 559px) { .admin-nav { padding-inline: var(--sp-4); } .admin-nav-item { flex-direction: column; gap: 4px; padding: 8px 6px; font-size: var(--fs-xs); line-height: 1.15; text-align: center; } } .admin-nav-item:hover { border-color: var(--border-strong); color: var(--text-2); } .admin-nav-item.is-active { color: var(--text); border-color: transparent; background: var(--grad-brand); box-shadow: 0 4px 16px -6px var(--glow-magenta); } .admin-nav-item .icon { width: 18px; height: 18px; } .admin-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); padding: 0 var(--sp-5) var(--sp-8); } @media (min-width: 1024px) { .admin-shell { flex-direction: row; gap: var(--sp-5); align-items: flex-start; } .admin-nav { flex-direction: column; width: 210px; flex: none; position: sticky; top: calc(var(--sp-5) + 56px); padding: var(--sp-5) 0 0 var(--sp-5); } .admin-nav-item { justify-content: flex-start; } .admin-content { padding: var(--sp-5) var(--sp-5) var(--sp-8) 0; } } /* ============================================================ FORMULÁRIO "NOVO CONVITE" ============================================================ */ .admin-form { gap: var(--sp-4); } .admin-form-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); } @media (min-width: 560px) { .admin-form-grid { grid-template-columns: 1fr 1fr; } /* Regional ocupa a linha inteira: o nome da regional é o texto mais longo do formulário e, numa coluna de meia-largura, o