/* Gestão de tenants (admin): barra de organizações no topo, abas pra trocar
   entre o painel de Tenants (filtrado pela organização escolhida, em
   acordeão — cada tenant abre pra mostrar seus usuários e automações) e o
   painel de Administradores, e telinhas de cadastro via <dialog> nativo.

   Antes os dois painéis ficavam empilhados um embaixo do outro dentro de
   um único container com scroll (.admtn-scroll) - Administradores podia
   ficar fora da vista, exigindo rolar a página inteira pra achar. Agora só
   um painel é exibido por vez (trocado pelas abas .admtn-view-tab), e é
   ELE MESMO que ocupa o espaço restante da tela e rola só a lista de
   dentro (acordeão de tenants ou tabela de admins) - o cabeçalho da
   página, a barra de organizações e as abas ficam sempre fixos no topo,
   igual ao padrão já usado em Dados/Execuções/Automações. */

.admtn-views {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.admtn-panel {
  display: none;
  flex-direction: column;
  min-height: 0;
}
.admtn-panel.ativo {
  display: flex;
  flex: 1;
}

.admtn-panel-head { margin-bottom: 14px; flex-shrink: 0; }
.admtn-panel-head--row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.admtn-panel-head h2 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color: var(--text);
  margin: 0 0 3px;
}
.admtn-panel-sub {
  font-size: 12.5px;
  color: var(--text-faint);
}

/* agrupa "Novo usuário" + "Novo tenant" lado a lado no cabeçalho do
   painel de Tenants - único lugar de criação de usuário agora (antes
   existia tambem um botao por tenant dentro do acordeao, ver
   admin_tenants.js/renderTenantBody). */
.admtn-panel-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* checkbox "mostrar inativos" - tenants desativados ficam escondidos da
   lista por padrão (ver renderTenants em admin_tenants.js); esse
   checkbox reexibe eles temporariamente, sem precisar reativar. */
.admtn-check-inativos {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-faint);
  cursor: pointer;
  user-select: none;
  margin-right: 4px;
}
.admtn-check-inativos input { cursor: pointer; }

.admtn-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.admtn-form input,
.admtn-form select {
  flex: 1 1 160px;
  min-width: 140px;
}
.admtn-form .btn { flex-shrink: 0; }

@media (max-width: 768px) {
  .admtn-form { flex-direction: column; align-items: stretch; }
  .admtn-form input,
  .admtn-form select,
  .admtn-form .btn { width: 100%; }
}

/* ---------------- barra de organizações ---------------- */

.admtn-orgbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.admtn-orgbar-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------------- abas de painel: Tenants / Administradores ---------------- */
/* segmented control, mesma família visual do .autom-view-switch (tela de
   Automações) - troca qual .admtn-panel fica visível, ver admin_tenants.js */
.admtn-view-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  margin-bottom: 16px;
  width: fit-content;
  background: var(--bg-inset);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.admtn-view-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  color: var(--text-faint);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.admtn-view-tab:hover { color: var(--text); }
.admtn-view-tab.active {
  background: var(--bg-card);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}

/* pill de organização — mesma família visual do .badge, só que clicável */
.admtn-org-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-full, 999px);
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text-faint);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.admtn-org-pill:hover { background: var(--bg-card-hov); color: var(--text); }
.admtn-org-pill.active {
  background: linear-gradient(180deg, var(--blue-400), var(--blue-600));
  border-color: var(--blue-600);
  color: #fff;
}

/* ---------------- lista de tenants (acordeão) ---------------- */

/* quem rola é ela, não a página (ver comentário no topo do arquivo) */
.admtn-tenant-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px; /* respiro pra barra de rolagem não colar no conteúdo */
}

.admtn-tenant-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
}

.admtn-tenant-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font-family: var(--font-sans);
}
.admtn-tenant-header:hover { background: var(--bg-card-hov); }

.admtn-tenant-name {
  font-weight: var(--fw-semibold);
  font-size: 14px;
}
.admtn-tenant-slug {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
}
.admtn-tenant-header .badge { margin-left: auto; }
.admtn-tenant-chevron {
  width: 16px;
  height: 16px;
  color: var(--text-faint);
  transition: transform .15s;
  flex-shrink: 0;
}
.admtn-tenant-item.aberto .admtn-tenant-chevron { transform: rotate(180deg); }

.admtn-tenant-body {
  border-top: 1px solid var(--border);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.admtn-tenant-item:not(.aberto) .admtn-tenant-body { display: none; }

.admtn-tenant-body-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* Agrupa "+ Empresa" e "desativar/reativar tenant" lado a lado no
   cabeçalho de "Empresas (CNPJ)" - antes o botão de ativo/inativo ficava
   numa linha própria acima, deixando um vão vazio sem necessidade. */
.admtn-tenant-body-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.admtn-tenant-body-head h4 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin: 0;
}

/* Empresas/Automações vinculadas podem passar de dezenas de linhas (ex:
   um tenant "grupo" reunindo várias empresas) - sem isso a tabela cresce
   sem limite e some junto com o resto do acordeão pra baixo, obrigando a
   rolar a lista de tenants inteira só pra ver o resto de UM tenant. Limita
   a altura e dá rolagem própria pra essa tabela, mesmo espírito de
   .dados-tabela-scroll (ver pages/dados.css). */
.admtn-tenant-body-scroll {
  max-height: 260px;
  overflow-y: auto;
}
.admtn-tenant-body-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  /* material padrão (thin), mesma lógica de .dados-tabela-scroll thead th
     (Fase 3, 2026-08-07). */
  background: var(--content-thin-bg);
  backdrop-filter: blur(var(--content-thin-blur));
  -webkit-backdrop-filter: blur(var(--content-thin-blur));
}
/* scroll edge effect via ::after (não box-shadow) - mesmo motivo de
   .dados-tabela-scroll thead th::after em pages/dados.css: box-shadow por
   célula vazava pras laterais e parecia linha dividindo coluna (reportado
   2026-08-07). */
.admtn-tenant-body-scroll thead th::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 6px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.18), transparent);
  pointer-events: none;
}

/* coluna de ações (editar/resetar senha) na tabela da aba Usuários */
.admtn-usuario-acoes {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* botão de ação pequeno (ex: "+ Usuário"/"+ Automação" dentro do acordeão) */
.admtn-btn-mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text-faint);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.admtn-btn-mini:hover {
  background: var(--blue-500, #2F6BFF);
  border-color: var(--blue-500, #2F6BFF);
  color: #fff;
}
.admtn-btn-mini svg { width: 13px; height: 13px; }

/* botões de ação (reset de senha / editar usuário) nas linhas das tabelas
   de usuário - mesmo visual pros dois, só o ícone muda */
.btn-reset-senha,
.btn-editar-usuario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-reset-senha:hover,
.btn-editar-usuario:hover {
  background: var(--blue-500, #2F6BFF);
  border-color: var(--blue-500, #2F6BFF);
  color: #fff;
}

/* ---------------- telinhas de cadastro (<dialog>) ---------------- */

/* Redesign "glass escuro" 2026-08-01 (pedido do usuário, mesmo visual do
   .modal em components/modal.css): fundo translúcido tipo vidro (em vez de
   sólido), cantos bem arredondados, position:relative ancora o botão de
   fechar flutuante (.modal-close--danger, adicionado no HTML de cada
   telinha - ver components/_acessos.html). <dialog> nativo continua cuidando
   sozinho de abrir/fechar/empilhar (showModal/close, ver admin_tenants.js) -
   só o visual do cartão e do ::backdrop mudou. */
.admtn-dialog {
  position: relative;
  border: 1px solid rgba(138, 150, 175, 0.14);
  border-radius: var(--radius-xl);
  padding: 0;
  background: rgba(10, 14, 26, 0.62);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  color: var(--text);
  width: min(420px, 92vw);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.55);
}
[data-theme="light"] .admtn-dialog {
  background: rgba(255, 255, 255, 0.80);
  border: 1px solid rgba(15, 23, 42, 0.10);
}
.admtn-dialog::backdrop {
  /* quase sem escurecimento - o blur forte já dá contraste/profundidade
     (mesmo espírito de .modal-overlay em components/modal.css) */
  background: rgba(5, 8, 16, 0.10);
  backdrop-filter: blur(var(--blur-backdrop));
}
[data-theme="light"] .admtn-dialog::backdrop {
  background: rgba(210, 220, 240, 0.14);
}

.admtn-dialog-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}
.admtn-dialog-form h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin: 0;
  /* espaço pro .modal-close--danger, que agora fica encaixado dentro do
     cartão (top:12px/right:12px) em vez de flutuar pra fora da borda -
     ver components/modal.css. */
  padding-right: 56px;
}
.admtn-dialog-sub {
  font-size: 12.5px;
  color: var(--text-faint);
  margin: -6px 0 0;
}
.admtn-dialog-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  color: var(--text-faint);
}
.admtn-dialog-form input,
.admtn-dialog-form select {
  width: 100%;
}
.admtn-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
/* telinha "Editar usuário": "Desativar/Reativar" fica na ponta oposta
   dos botões Cancelar/Salvar (mesmo elemento .admtn-dialog-actions
   aninhado dentro do externo, so que sem justify-content: flex-end). */
.admtn-dialog-actions--split {
  justify-content: space-between;
}
.admtn-dialog-actions--split .admtn-dialog-actions {
  margin-top: 0;
}

/* ---- telinha "Novo usuário": checklist de tenants (multi-tenant) ---- */

.admtn-dialog-usuario { width: min(460px, 92vw); }

.admtn-usuario-tenants {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admtn-usuario-tenants-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  color: var(--text-faint);
}
.admtn-usuario-tenants-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm, 6px);
  padding: 6px 8px;
}
/* especificidade maior que ".admtn-dialog-form label" (que só define
   flex-direction: column pra label "normal" de campo de formulário) -
   senão essa regra genérica vence e empilha checkbox/nome em vez de
   ficarem lado a lado numa linha só. Ver comentário lá em cima. */
.admtn-usuario-tenants-list label.admtn-usuario-tenant-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  font-size: 13px;
  font-weight: normal;
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.admtn-usuario-tenants-list label.admtn-usuario-tenant-check:last-child {
  border-bottom: none;
}
.admtn-usuario-tenant-check input[type="checkbox"] {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
}
.admtn-usuario-tenant-check span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}