/* ============================================================
   Sistema Rodo Wall — Skin do Painel de Administração
   ------------------------------------------------------------
   Redesenho do #hubAdminScreen na linguagem visual do módulo
   Checklist (a referência do sistema): sidebar fixa à esquerda
   com indicador border-left, cards de 12px, acento azul
   interativo (--accent) e mostarda reservado à marca.

   Também unifica os MODAIS do sistema (.modal e .tools-modal)
   no padrão do .cl-modal do Checklist, e padroniza o estado de
   FOCO dos campos (anel accent-glow) em todo o sistema.

   Carregado por último no index.html — vence conflitos com os
   estilos legados de 03-shell/11-admin/13-additions.
   ============================================================ */

/* ---------- LAYOUT: sidebar + coluna principal ---------- */
.adm-side{
  width:232px;flex-shrink:0;display:flex;flex-direction:column;
  background:var(--surface);border-right:1px solid var(--border);
}
.adm-main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;}

/* ---------- Sidebar: marca ---------- */
.adm-side-logo{
  padding:18px;border-bottom:1px solid var(--border);
  background:var(--topbar-bg);
}
.adm-side-logo .tb-brand{border-left:2px solid var(--mustard);padding-left:12px;gap:3px;}
.adm-side-logo .tb-name{font-size:16px;}
.adm-side-logo .tb-sub{color:var(--topbar-text-dim);font-size:9px;}

/* ---------- Sidebar: navegação ---------- */
.adm-side-nav{flex:1;overflow-y:auto;padding:10px 0;display:flex;flex-direction:column;}
.adm-side-nav .an{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:11px 18px;border:none;background:none;
  border-left:3px solid transparent;border-radius:0;
  color:var(--text2);font-size:13px;font-weight:500;text-align:left;
  cursor:pointer;transition:all var(--t-fast);
}
.adm-side-nav .an:hover{background:var(--surface2);border-left-color:var(--border2);color:var(--text);}
.adm-side-nav .an.active{
  background:var(--accent-dim);border-left-color:var(--accent);
  color:var(--text);font-weight:600;
}
.adm-side-nav .an.active .adm-ic{color:var(--accent);}
.adm-side-nav .an span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.adm-ic{width:16px;height:16px;flex-shrink:0;}

.adm-side-sep{height:1px;background:var(--border);margin:10px 14px;}
.adm-side-nav .adm-tools .adm-ic{color:var(--mustard);}

/* ---------- Sidebar: rodapé (voltar aos módulos) ---------- */
.adm-side-foot{padding:14px;border-top:1px solid var(--border);}
.adm-side-foot .hub-back-btn{
  width:100%;justify-content:center;display:flex;align-items:center;gap:6px;
  background:var(--surface2);border:1px solid var(--border2);color:var(--text2);
}
.adm-side-foot .hub-back-btn:hover{border-color:var(--accent);color:var(--accent2);background:var(--accent-dim);}

/* ---------- Topbar fina da coluna principal ---------- */
.adm-topbar{
  display:flex;align-items:center;gap:12px;
  padding:0 24px;height:56px;flex-shrink:0;
  background:var(--topbar-bg);border-bottom:1px solid var(--topbar-border);
}
.adm-sec-title{
  font-family:'Rajdhani',sans-serif;font-size:19px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--topbar-text);
}
.adm-sec-title::before{content:"";display:inline-block;width:4px;height:16px;background:var(--accent);border-radius:2px;margin-right:10px;vertical-align:-2px;}
.adm-topbar .user-pill{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:var(--topbar-text);}

/* ---------- Seções como cards (padrão .cl-card) ---------- */
#hubAdminScreen .asec.active{
  display:block;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;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:10.5px;letter-spacing:.8px;text-transform:uppercase;
}
#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:8px;box-shadow:0 4px 14px var(--accent-glow);
  transition:filter var(--t-fast), transform var(--t-fast);
}
.add-btn:hover{filter:brightness(1.1);}

/* ============================================================
   MODAIS UNIFICADOS — padrão .cl-modal do Checklist
   ============================================================ */
.modal{
  width:min(460px,94vw);border-radius:14px;
  border:1px solid var(--border2);box-shadow:var(--elev-lg);
}
.modal-title{
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:19px;
  letter-spacing:1px;text-transform:uppercase;color:var(--text);
}
.mbtn.p{background:var(--accent);color:#fff;box-shadow:0 4px 14px var(--accent-glow);}
.mbtn.p:hover{filter:brightness(1.1);}
.tools-modal{border-radius:14px;border:1px solid var(--border2);box-shadow:var(--elev-lg);}

/* ---------- 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:10px;
  background:var(--surface2);
}
.mf-grupo-item{
  display:flex; align-items:center; gap:6px;
  font-size:13px; color:var(--text); cursor:pointer;
  padding:4px 9px; border-radius:7px; background:var(--surface);
  border:1px solid var(--border);
}
.mf-grupo-item input{ margin:0; accent-color:var(--accent); }

/* ---------- Foco padronizado dos campos (anel accent) ---------- */
.mfg input:focus,.mfg select:focus,.mfg textarea:focus,
.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);
}

/* ============================================================
   RESPONSIVO — sidebar vira barra horizontal rolável (≤860px),
   mesma técnica do módulo Checklist.
   ============================================================ */
@media (max-width:860px){
  #hubAdminScreen{flex-direction:column !important;}
  .adm-side{
    width:100%;flex-direction:column;border-right:none;
    border-bottom:1px solid var(--border);
  }
  /* Marca + botão Módulos dividem uma linha compacta no topo */
  .adm-side-logo{
    padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  }
  .adm-side-nav{
    flex-direction:row;overflow-x:auto;overflow-y:hidden;
    padding:0;-webkit-overflow-scrolling:touch;
  }
  .adm-side-nav .an{
    width:auto;flex-shrink:0;white-space:nowrap;
    padding:10px 14px;border-left:none;border-bottom:3px solid transparent;
  }
  .adm-side-nav .an:hover{border-left:none;border-bottom-color:var(--border2);}
  .adm-side-nav .an.active{border-left:none;border-bottom-color:var(--accent);}
  .adm-side-sep{display:none;}
  /* Rodapé vira uma faixa fina com o botão Módulos (caminho de volta) */
  .adm-side-foot{padding:8px 14px;border-top:1px solid var(--border);}
  .adm-side-foot .hub-back-btn{width:auto;padding:6px 14px;}
  .adm-topbar{padding:0 14px;height:48px;}
}

/* ============================================================
   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:13px;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:9px;background:var(--surface);border:1px solid var(--border);
}
.grp-usuario-nome{font-weight:600;font-size:13px;color:var(--text);}
.grp-usuario-email{font-size:12px;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:12px;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:7px;background:var(--surface2);color:var(--text2);
  font-weight:700;font-size:16px;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:'Rajdhani',sans-serif;font-weight:700;font-size:16px;
  letter-spacing:.6px;text-transform:uppercase;color:var(--text);
}
.perm-modulo-body{padding:0 16px 16px 52px;display:flex;flex-direction:column;gap:10px;}
.perm-modulo-desc{font-size:12px;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;}
}