/* =============================================================================
   GERENCIAR EQUIPE — tabela de membros (usada na modal e na página cheia)
   Adicione este arquivo em /css/equipe.css e enfileire (ver instruções no chat),
   ou cole o conteúdo no final do sistema.css existente.
   ============================================================================= */

.qa-tabela-equipe-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    margin-bottom: 24px;
}

.qa-tabela-equipe {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px; /* evita esmagar colunas em telas médias; abaixo disso vira cartão (ver media query) */
    font-size: 14px;
}

.qa-tabela-equipe thead th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    color: var(--text-muted, #64748b);
    background: var(--surface-2, #f8fafc);
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    white-space: nowrap;
}

.qa-tabela-equipe tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color, #eef1f5);
    vertical-align: middle;
}

.qa-tabela-equipe tbody tr:last-child td {
    border-bottom: none;
}

.qa-tabela-equipe tbody tr:hover {
    background: var(--surface-2, #f8fafc);
}

.qa-membro-nome {
    font-weight: 600;
    color: var(--text-strong, #1e2937);
}

/* Formulários inline dentro das células (perfil / setor) não devem quebrar layout */
.qa-form-inline {
    margin: 0;
    display: inline-flex;
}

.qa-select-papel,
.qa-input-setor {
    width: 100%;
    min-width: 140px;
    padding: 7px 10px;
    font-size: 13px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 7px;
    background: #fff;
    color: var(--text-strong, #1e2937);
}

.qa-select-papel:focus,
.qa-input-setor:focus {
    outline: none;
    border-color: var(--primary-color, #6d28d9);
    box-shadow: 0 0 0 3px rgba(109, 40, 217, .12);
}

.qa-papel-vinculo {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted, #64748b);
    margin-top: 1px;
}

.qa-th-acoes,
.qa-td-acoes {
    text-align: right;
    white-space: nowrap;
}

.qa-link-remover {
    color: #dc2626;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 7px;
    transition: background .15s ease;
}

.qa-link-remover:hover {
    background: rgba(220, 38, 38, .08);
    text-decoration: none;
}

/* Empilha em telas pequenas: cada linha vira um "cartão" com rótulos */
@media (max-width: 640px) {
    .qa-tabela-equipe-wrap { border: none; overflow: visible; }
    .qa-tabela-equipe, .qa-tabela-equipe thead, .qa-tabela-equipe tbody,
    .qa-tabela-equipe tr, .qa-tabela-equipe td { display: block; width: 100%; min-width: 0; }
    .qa-tabela-equipe thead { display: none; }
    .qa-tabela-equipe tbody tr {
        border: 1px solid var(--border-color, #e2e8f0);
        border-radius: 10px;
        padding: 12px 14px;
        margin-bottom: 12px;
        background: #fff;
    }
    .qa-tabela-equipe tbody td {
        border-bottom: none;
        padding: 6px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .qa-tabela-equipe tbody td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .04em;
        font-weight: 700;
        color: var(--text-muted, #64748b);
        flex-shrink: 0;
    }
    .qa-td-acoes { justify-content: flex-end; }
}

/* =============================================================================
   PÁGINA CHEIA "EQUIPE" (page-equipe.php) — só o essencial de layout,
   herda cores/tipografia do sistema.css/global.css já carregado.
   ============================================================================= */

.qa-pagina-equipe {
    max-width: 1600px;
    margin: 0 auto;
    padding: 32px 30px 60px;
}

.qa-pagina-equipe-header {
    margin-bottom: 28px;
}

.qa-pagina-equipe-header h1 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    margin: 0 0 8px;
    color: var(--text-strong, #1e2937);
}

.qa-pagina-equipe-subtitulo {
    color: var(--text-muted, #64748b);
    font-size: 14px;
    margin: 0;
    max-width: 680px;
}

.qa-pagina-equipe-secao {
    background: #fff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 24px;
}

.qa-pagina-equipe-secao h2 {
    font-size: 16px;
    margin: 0 0 16px;
    color: var(--text-strong, #1e2937);
}

.qa-pagina-equipe-secao .qa-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
}

.qa-pagina-equipe-secao .qa-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-strong, #1e2937);
}

.qa-pagina-equipe-secao .qa-form input,
.qa-pagina-equipe-secao .qa-form select {
    font-weight: 400;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    font-size: 14px;
}

.qa-pagina-equipe-secao .qa-form .qa-form-note {
    grid-column: 1 / -1;
    margin: 0;
}

.qa-pagina-equipe-secao .qa-btn-primary {
    grid-column: 1 / -1;
    justify-self: start;
}

@media (max-width: 640px) {
    .qa-pagina-equipe-secao .qa-form { grid-template-columns: 1fr; }
}

/* =============================================================================
   COMPONENTES QUE FALTAVAM (botão, alertas, nota do formulário) — essas
   classes eram estilizadas por um CSS que só carregava junto da modal no
   dashboard; a página /equipe precisa delas por conta própria.
   ============================================================================= */

.qa-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border: none;
    border-radius: 9px;
    background: var(--primary, #3f502e);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, transform .05s ease;
}

.qa-btn-primary:hover {
    background: var(--primary-hover, #354426);
}

.qa-btn-primary:active {
    transform: translateY(1px);
}

.qa-btn-primary--violet {
    background: #6d28d9;
}

.qa-btn-primary--violet:hover {
    background: #5b21b6;
}

.qa-form-note {
    font-size: 12.5px;
    color: var(--text-muted, #64748b);
    margin: 0 0 4px;
}

.qa-form-note-inline {
    font-weight: 400;
    color: var(--text-muted, #64748b);
    font-size: 12px;
}

.qa-alert {
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
    font-size: 13.5px;
}

.qa-alert p {
    margin: 6px 0 0;
}

.qa-alert--success {
    background: var(--success-bg, #ecfdf5);
    color: #166534;
    border: 1px solid rgba(16, 185, 129, .25);
}

.qa-alert--error {
    background: var(--danger-bg, #fff1f2);
    color: #9f1239;
    border: 1px solid rgba(244, 63, 94, .25);
}

.qa-alert-senha {
    display: inline-block;
    margin-top: 6px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid rgba(16, 185, 129, .3);
    border-radius: 6px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .03em;
}

/* Botão "+ Adicionar à Equipe" fica ao lado do card de convite na modal
   antiga (.qa-card) — mantido aqui também, caso a modal ainda seja usada
   em algum lugar do dashboard. */
.qa-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.qa-card:hover {
    border-color: #6d28d9;
    background: rgba(109, 40, 217, .03);
}

.qa-card-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(109, 40, 217, .1);
    color: #6d28d9;
    font-size: 16px;
}

.qa-card-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.qa-card-text strong { font-size: 14px; color: var(--text-strong, #1e2937); }
.qa-card-text small { font-size: 12.5px; color: var(--text-muted, #64748b); }
.qa-card-arrow { color: var(--text-muted, #64748b); }

/* =============================================================================
   USUÁRIOS DO SISTEMA (visão global, admin do site) — badges e links de ação
   ============================================================================= */

.qa-pagina-equipe-secao h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Destaque visual por tipo de seção: cada "escritório" (empresa) vira um
   cartão com borda/faixa colorida e respiro maior entre um e outro; a seção
   do administrador do site (plataforma) fica visualmente distinta, mais
   discreta, pra não competir com as empresas. */
.qa-pagina-equipe-secao {
    margin-bottom: 28px;
    border-width: 1px;
    border-left-width: 4px;
    transition: box-shadow .15s ease;
}

.qa-secao-empresa {
    border-left-color: var(--primary, #3f502e);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}

.qa-secao-empresa:hover {
    box-shadow: 0 4px 14px rgba(16, 24, 40, .07);
}

.qa-secao-plataforma {
    border-left-color: #94a3b8;
    background: var(--surface-2, #f8fafc);
}

.qa-secao-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 14px;
    flex-shrink: 0;
}

.qa-secao-empresa .qa-secao-icone {
    background: var(--primary-soft, rgba(63,80,46,.1));
    color: var(--primary, #3f502e);
}

.qa-secao-plataforma .qa-secao-icone {
    background: rgba(148, 163, 184, .18);
    color: #64748b;
}

.qa-badge-dono {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--primary, #3f502e);
    background: var(--primary-soft, rgba(63,80,46,.08));
    padding: 3px 9px;
    border-radius: 20px;
}

.qa-secao-plataforma .qa-badge-dono {
    color: #475569;
    background: rgba(148, 163, 184, .18);
}

.qa-badge-suspenso {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #9f1239;
    background: var(--danger-bg, #fff1f2);
    padding: 3px 9px;
    border-radius: 20px;
}

.qa-badge-suspenso--sm {
    display: inline-block;
    margin-left: 8px;
    font-size: 10px;
    padding: 2px 7px;
}

.qa-badge-vitalicio {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #92400e;
    background: #fef3c7;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}

.qa-badge-vitalicio--sm {
    display: inline-block;
    margin-left: 8px;
    font-size: 10px;
    padding: 2px 7px;
}

/* Status do 2FA na linha do usuário: bloqueado (cinza), liberado (âmbar), ativo (verde) */
.qa-badge-2fa {
    display: inline-block;
    margin-left: 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #475569;
    background: #f1f5f9;
    padding: 2px 7px;
    border-radius: 20px;
    white-space: nowrap;
}

.qa-badge-2fa--liberado {
    color: #92400e;
    background: #fef3c7;
}

.qa-badge-2fa--ativo {
    color: #166534;
    background: var(--success-bg, #ecfdf5);
}

.qa-link-acao {
    color: var(--text-muted, #64748b);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 7px;
    margin-right: 4px;
    transition: background .15s ease;
}

.qa-link-acao:hover {
    background: var(--surface-2, #f8fafc);
    text-decoration: none;
}

.qa-link-acao--sucesso {
    color: #166534;
}

.qa-link-acao--sucesso:hover {
    background: var(--success-bg, #ecfdf5);
}

/* =============================================================================
   MODAL "EDITAR USUÁRIO" (tela Usuários do Sistema) — self-contido, não
   depende de nenhum outro CSS de modal que já exista no tema.
   ============================================================================= */

dialog.qa-editar-dialog {
    border: none;
    border-radius: 14px;
    padding: 28px;
    width: 92%;
    max-width: 440px;
    box-shadow: var(--shadow-lg, 0 12px 28px rgba(16,24,40,.18));
}

dialog.qa-editar-dialog::backdrop {
    background: rgba(15, 23, 42, .55);
}

dialog.qa-editar-dialog .qa-modal-close-form {
    display: flex;
    justify-content: flex-end;
    margin: -8px -8px 0 0;
}

dialog.qa-editar-dialog .qa-modal-close-form button {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted, #64748b);
    padding: 4px 8px;
}

dialog.qa-editar-dialog .qa-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    margin: 0 0 18px;
    color: var(--text-strong, #1e2937);
}

dialog.qa-editar-dialog form.qa-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 14px !important;
    width: 100%;
    margin: 0;
}

dialog.qa-editar-dialog form.qa-form label {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100%;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-strong, #1e2937);
}

dialog.qa-editar-dialog form.qa-form input,
dialog.qa-editar-dialog form.qa-form select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-weight: 400;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    font-size: 14px;
}

dialog.qa-editar-dialog .qa-btn-primary {
    justify-content: center;
    margin-top: 4px;
}

/* Checkboxes de senha (gerar automaticamente / enviar por e-mail) — o grid
   de 1 coluna acima (com !important) empurrava o checkbox pra cima do texto
   em vez de alinhar lado a lado. Sobrescrevendo só pros labels que têm
   checkbox dentro. */
dialog.qa-editar-dialog form.qa-form label:has(input[type="checkbox"]) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 400;
}

dialog.qa-editar-dialog form.qa-form label:has(input[type="checkbox"]) input[type="checkbox"] {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
}

/* Bloco "Dados do usuário" (somente leitura) no topo da modal */
.qa-dados-usuario {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    background: var(--surface-2, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 4px;
}

.qa-dados-usuario dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    color: var(--text-muted, #64748b);
    margin: 0 0 2px;
}

.qa-dados-usuario dd {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-strong, #1e2937);
}

.qa-dados-usuario dd.qa-dados-usuario-full {
    grid-column: 1 / -1;
}

@media (max-width: 480px) {
    .qa-dados-usuario { grid-template-columns: 1fr; }
}

.qa-link-acao {
    background: none;
    border: none;
    font-family: inherit;
}