/* ============================================================
   Sistema Rodo Wall — Telas internas da Administração
   ------------------------------------------------------------
   A casca (menu lateral, cabeçalho) e as janelas vêm de
   css/comum/padrao.css. Aqui ficam as seções do painel.
   ============================================================ */

/* ---------- Seções como cards (padrão .cl-card) ---------- */
#hubAdminScreen .asec.active{
  display:block;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:20px;
}
#hubAdminScreen .asec-hd{margin-bottom:16px;}
#hubAdminScreen .asec-title{color:var(--text);}

/* ---------- Tabelas CRUD mais legíveis ---------- */
#hubAdminScreen .crud-table th{
  color:var(--text2);background:var(--surface2);
  border-bottom:2px solid var(--border2);
  font-size:var(--fs-xs);
}
#hubAdminScreen .crud-table td{border-bottom:1px solid var(--border);color:var(--text);}
#hubAdminScreen .crud-table tbody tr{transition:background var(--t-fast);}
#hubAdminScreen .crud-table tbody tr:hover{background:var(--surface2);}

/* ---------- Botões de ação (CTA azul; mostarda fica na marca) ---------- */
.add-btn{
  background:var(--accent);color:#fff;border:1px solid transparent;
  border-radius:var(--r-sm);
  transition:filter var(--t-fast), transform var(--t-fast);
}
.add-btn:hover{filter:brightness(1.1);}

/* ---------- Cadastro de usuário: múltiplos grupos (checkbox) ---------- */
.mf-grupos-lista{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:10px; border:1px solid var(--border2); border-radius:var(--r-lg);
  background:var(--surface2);
}
.mf-grupo-item{
  display:flex; align-items:center; gap:6px;
  font-size:var(--fs-sm); color:var(--text); cursor:pointer;
  padding:4px 9px; border-radius:var(--r-sm); background:var(--surface);
  border:1px solid var(--border);
}
.mf-grupo-item input{ margin:0; accent-color:var(--accent); }

/* ---------- Foco padronizado dos campos (anel accent) ---------- */
.val-inp:focus,.fi:focus,.fs:focus,.fta:focus,.act-inp:focus,.df-inp:focus,
#hubAdminScreen input:focus,#hubAdminScreen select:focus,
#loginScreen input:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
}

/* ============================================================
   TELA "GRUPOS E PERMISSÕES" — reforma de 18/08/2026
   ------------------------------------------------------------
   Une as antigas telas "Grupos" e "Permissões" numa só: dropdown pra
   escolher o grupo à esquerda, abas do grupo selecionado à direita
   (Grupo / Usuários / Itens de acesso). A escolha era originalmente
   uma LISTA vertical de cards (.grupo-item) — trocada por dropdown
   no mesmo dia, depois que produção real mostrou 13+ grupos: a lista
   empurrava a página inteira pra baixo e escondia o painel da direita
   ao rolar. Reaproveita .grupos-* (13-additions.css, o mesmo
   .grupos-add-field/select usado no formulário de novo grupo) e
   .perms-item*/.perms-cat*/.perms-switch* (16-pad-skin.css) pros
   níveis internos da árvore — só cria o que é NOVO: o layout de 2
   colunas, a tira de abas e o ramo de módulo (linha-raiz da árvore).
   ============================================================ */

/* ---------- Layout de 2 colunas ---------- */
.grp-shell{display:flex;gap:20px;align-items:flex-start;}
.grp-list-col{width:270px;flex-shrink:0;display:flex;flex-direction:column;gap:14px;}
.grp-detail-col{flex:1;min-width:0;}

/* ---------- Cabeçalho do painel direito ---------- */
.grp-detail-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;}

/* ---------- Tira de abas (Grupo / Usuários / Itens de acesso) ---------- */
.grp-tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;border-bottom:1px solid var(--border);}
.grp-tab{
  padding:10px 16px;border:none;border-bottom:2px solid transparent;background:none;
  color:var(--text2);font-weight:600;font-size:var(--fs-sm);cursor:pointer;transition:all var(--t-fast);
}
.grp-tab:hover{color:var(--text);}
.grp-tab.active{color:var(--accent);border-bottom-color:var(--accent);}

/* ---------- Aba "Grupo": formulário de edição ---------- */
.grp-info-form{max-width:360px;}
.grp-info-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}

/* ---------- Aba "Usuários": lista somente-leitura ---------- */
.grp-usuarios-lista{display:flex;flex-direction:column;gap:6px;}
.grp-usuario-item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border);
}
.grp-usuario-nome{font-weight:600;font-size:var(--fs-sm);color:var(--text);}
.grp-usuario-email{font-size:var(--fs-xs);color:var(--text2);}

/* ---------- Aba "Itens de acesso": ramo de módulo (raiz da árvore) ---------- */
.perm-arvore{display:flex;flex-direction:column;gap:12px;margin-bottom:18px;}
.perm-modulo{border:1px solid var(--border2);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;}
.perm-modulo.aberto{border-color:var(--accent);}
.perm-modulo-head{display:flex;align-items:center;gap:12px;padding:14px 16px;}
.perm-modulo-toggle{
  width:24px;height:24px;flex:none;display:flex;align-items:center;justify-content:center;
  border:none;border-radius:var(--r-sm);background:var(--surface2);color:var(--text2);
  font-weight:600;font-size:var(--fs-lg);line-height:1;cursor:pointer;
}
.perm-modulo.aberto .perm-modulo-toggle{background:var(--accent-dim);color:var(--accent);}
.perm-modulo-switch{flex:none;}
.perm-modulo-nome{
  flex:1;font-family:var(--font);font-weight:600;font-size:var(--fs-lg);color:var(--text);
}
.perm-modulo-body{padding:0 16px 16px 52px;display:flex;flex-direction:column;gap:10px;}
.perm-modulo-desc{font-size:var(--fs-xs);color:var(--text2);margin-top:-2px;margin-bottom:2px;line-height:1.4;}

/* ---------- Responsivo ---------- */
@media (max-width:860px){
  .grp-shell{flex-direction:column;}
  .grp-list-col{width:100%;}
  .perm-modulo-body{padding-left:16px;}
}