/* Reaproveita tokens/componentes ja definidos em suporte.css (importado antes deste
   arquivo no <head> de admin.html): .btn-primary, .btn-secondary, .support-empty-state,
   .support-status-badge. Aqui so o layout de abas + tabelas, especifico do painel admin. */

@import url(../settings/_fonts.css);
@import url(../settings/_colors.css);

body {
  min-height: 100dvh;
  margin: 0;
  background: var(--lavender-mist);
  color: var(--black);
  font-family: var(--montserrat);
}

.admin-page {
  width: 100%;
  box-sizing: border-box;
  padding: 2rem 3vw 3rem;
  margin: 0 auto;
}

.admin-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.admin-header h1 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  font-family: var(--montserrat);
}

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.admin-tab {
  border: none;
  background: var(--white);
  color: var(--gray);
  font-family: var(--montserrat);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-md, 10px);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.admin-tab:hover {
  background: var(--lavander-veil);
}

.admin-tab.is-active {
  background: var(--eletric-indigo-solid);
  color: #fff;
}

/* #admin-content e cada .admin-section-block sao itens de container flex (o proprio
   #admin-content e item de .user-screen.is-active, ver profile.css; cada
   .admin-section-block e item de .admin-panel logo abaixo) — sem min-width:0, o minimo
   automatico do flexbox usa o conteudo intrinseco de quem nao quebra linha (tabelas com
   th { white-space:nowrap }) e se recusa a encolher, empurrando o card inteiro (nao so a
   tabela) pra fora da tela em vez de deixar .admin-table-wrap { overflow-x:auto } conter o
   scroll sozinho. Mesmo principio do minmax(0, 1fr) em .user-workspace (profile.css). */
#admin-content {
  min-width: 0;
}

.admin-panel {
  display: none;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.admin-panel.is-active {
  display: flex;
}

.admin-section-block {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  min-width: 0;
}

.admin-section-block h2 {
  margin: 0 0 1rem;
  font-size: 1.05rem;
}

.admin-search-bar {
  display: flex;
  gap: 0.6rem;
}

.admin-search-bar input {
  flex: 1;
  border: none;
  border-radius: var(--radius-md, 10px);
  background: var(--white);
  color: var(--black);
  font-family: var(--montserrat);
  font-size: 0.9rem;
  padding: 0.65rem 0.85rem;
}

.admin-search-bar input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--eletric-indigo) 15%, transparent);
}

/* Filtro da aba Auditoria: quebra linha em telas estreitas e o checkbox de
   "incluir visualizacoes" nao herda o estilo do campo de texto. */
.admin-audit-filter {
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0.8rem;
}

.admin-audit-views-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--montserrat);
  font-size: 0.85rem;
  white-space: nowrap;
}

.admin-search-bar .admin-audit-views-toggle input {
  flex: none;
  width: auto;
  padding: 0;
}

/* Lista de usuarios: linhas em largura total do container pai (.admin-panel), sem a
   antiga coluna lateral fixa de 320px — clicar numa linha abre o modal padrao da
   plataforma (showCustomModal, ver admin/main.js) em vez de um painel de detalhe inline. */
.admin-users-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  /* Mesma altura maxima + scroll interno das listas paginadas do suporte
     (.support-tickets__list em suporte.css) — lista longa nao empurra o
     resto do layout pra baixo indefinidamente. */
  max-height: 74vh;
  overflow-y: auto;
}

/* No celular, uma caixa com scroll interno proprio dentro de uma pagina que ja rola sozinha
   e um "scroll trap" classico — o dedo do usuario fica preso rolando so a lista em vez da
   pagina. Sem o teto de altura, a lista flui com o resto da pagina (ainda paginada via
   "Carregar mais", ver admin/AdminPanelController.js), que e o comportamento certo numa tela
   onde nao ha necessidade de manter sidebar+conteudo visiveis ao mesmo tempo. */
@media (max-width: 480px) {
  .admin-users-list-wrap {
    max-height: none;
    overflow-y: visible;
  }
}

.admin-users-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
}

.admin-users-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
  background: var(--white);
  border-radius: var(--radius-md, 10px);
  padding: 0.75rem 1rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.admin-users-list li:hover,
.admin-users-list li.is-active {
  border-color: var(--eletric-indigo);
}

.admin-users-list li strong {
  font-size: 0.9rem;
}

.admin-users-list li span {
  font-size: 0.78rem;
  color: var(--gray);
  white-space: nowrap;
}

/* Coluna esquerda (email + meta) cresce, o "abrir" (chevron) fica fixo a direita — mesmo
   principio de linha de tabela clicavel usado noutras listas do site. */
.admin-users-list li .admin-users-list__info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  overflow: hidden;
}

.admin-users-list li .admin-users-list__info strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-users-list li .admin-users-list__chevron {
  flex-shrink: 0;
  color: var(--gray);
  font-size: 1.1rem;
}

.admin-users-list__empty {
  color: var(--gray);
  font-size: 0.85rem;
  padding: 0.5rem;
}

/* ---- Conteudo do modal de usuario (bodyHtml de showCustomModal, ver admin/main.js) ----
   O card/padding/fundo ja vem do proprio modal (#simulaked-global-modal em modal.css) —
   aqui so a tipografia/espacamento interno do conteudo.
   Linha de badges de status logo abaixo do titulo (email) do modal — leitura rapida de
   plano/assinatura/situacao da conta antes de qualquer texto, reaproveitando os mesmos
   tokens de cor ja usados nos badges de status de ticket (.support-status-badge). */
.admin-user-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}

.admin-user-detail h3 {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
}

.admin-user-detail__grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0.5rem 1rem;
  margin: 0 0 1.25rem;
  max-width: 26rem;
}

/* Rotulo (dt) e valor (dd) tinham quase o mesmo peso visual — cinza 600/0.82rem contra o
   texto padrao do modal (var(--black), que no tema escuro resolve pra #F1F1F1 quase branco)
   sem weight/size proprios, entao o rotulo (mais escuro mas em negrito) e o valor (mais claro
   mas peso normal) acabavam se equivalendo em destaque (ver img/component-view.png). Agora o
   rotulo vira claramente uma legenda pequena/uppercase/espacada, e o valor fica maior e mais
   pesado — a hierarquia titulo->informacao fica visivel a distancia, sem mexer na estrutura
   de 2 colunas. align-self:start realinha o rotulo ao topo quando ele quebra em 2 linhas
   (ex. "Agente de suporte (legado)") enquanto o valor continua numa linha so. */
.admin-user-detail__grid dt {
  color: var(--gray);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  align-self: start;
  padding-top: 0.15rem;
}

/* Chip de fundo no valor — mesmo truque de color-mix sobre var(--black) ja usado em
   .admin-grant-role-form acima (ver comentario la): --black e a variavel de "tinta" do
   texto, que o tema escuro inverte pra clara, entao um overlay relativo a ela sempre
   clareia no escuro e escurece no claro, contrastando com o fundo do card nos dois temas
   sem precisar de uma cor fixa. display:inline-block+width:fit-content faz a caixinha
   abracar so o texto do valor (nao a coluna 1fr inteira), max-width:100% trava o caso de
   um valor mais longo que a coluna (ex. "Sim em 08/09/2026, 09:42"). */
.admin-user-detail__grid dd {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  background: color-mix(in srgb, var(--black) 8%, transparent);
  border-radius: var(--radius-8, 8px);
  padding: 0.2rem 0.55rem;
}

/* Cada secao (Roles, Zona de risco) como um bloco proprio com fundo sutil — em vez de um
   texto corrido, fica claro onde uma acao termina e a proxima comeca. Padding enxuto de
   proposito: a altura "alta demais" antes disso nao era o padding, era
   #simulaked-global-modal button (modal.css, ver comentario abaixo) inflando os botoes
   internos com o padding/font grandes do botao generico do modal. */
.admin-user-section {
  background: var(--lavender-mist);
  border-radius: var(--radius-md, 10px);
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.75rem;
}

.admin-roles-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.admin-roles-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: color-mix(in srgb, var(--eletric-indigo) 12%, transparent);
  border-radius: 999px;
  padding: 0.2rem 0.25rem 0.2rem 0.6rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--eletric-indigo);
}

/* #simulaked-global-modal button (modal.css) mira em QUALQUER <button> dentro do modal
   com um estilo generico grande (gradiente, padding var(--space-3) var(--space-6), font
   700 1rem) — especificidade (1,0,1) por causa do ID, que vence qualquer selector de
   classe sozinho (0,1,0). Era exatamente isso inflando o "x" de revogar e os botoes da
   zona de risco pra um tamanho de botao primario inteiro. Mesmo prefixo com
   #simulaked-global-modal que .modal-resend-link ja usa ali pra resolver o mesmo problema. */
#simulaked-global-modal .admin-roles-list__revoke {
  border: none;
  background: color-mix(in srgb, var(--eletric-indigo) 18%, transparent);
  color: var(--eletric-indigo);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  min-width: 0;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  font-size: 0.62rem;
  font-weight: 400;
  flex-shrink: 0;
}

#simulaked-global-modal .admin-roles-list__revoke:hover {
  background: #b42318;
  color: #fff;
}

.admin-roles-list__empty {
  color: var(--gray);
  font-size: 0.85rem;
}

/* Fundo proprio (oposto ao --lavender-mist da secao "Roles" ao redor) — sinaliza que
   dropdown+botao sao um subcomponente ("adicionar role") dentro do bloco de Roles, nao
   soltos direto no mesmo fundo da secao. */
.admin-grant-role-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  margin-top: 0.6rem;
  /* flex e display:flex sao block-level por padrao, entao sem isso o subcomponente
     esticava pra largura toda da secao "Roles" (que ocupa o modal inteiro) mesmo o
     dropdown+botao juntos sendo bem mais estreitos — sobrava um vazio enorme dentro do
     proprio fundo escuro do subcomponente (ver img/roles.png). fit-content faz a caixa
     abracar exatamente o tamanho do dropdown+botao; max-width:100% e so uma trava pro
     caso raro do conteudo (ex. rotulo de role bem longo) ser maior que o card pai. No
     mobile (media query abaixo) volta pra 100% de proposito, ja que la dropdown e botao
     quebram em linhas separadas e devem ocupar a largura toda. */
  width: fit-content;
  max-width: 100%;
  /* color-mix em vez de var(--white): no tema escuro --white (~#121212) fica quase
     identico ao --lavender-mist (~#1e1e1e) da secao ao redor, os dois muito escuros —
     o "subcomponente" ficava sem nenhum contraste visivel. Um overlay relativo a --black
     sempre clareia no escuro e escurece no claro, entao contrasta nos dois temas. */
  background: color-mix(in srgb, var(--black) 6%, transparent);
  border-radius: var(--radius-md, 10px);
  padding: 0.4rem;
}

/* #simulaked-global-modal button (modal.css) mira em QUALQUER <button> dentro do modal —
   este botao especificamente NUNCA tinha ganho o prefixo por ID que os outros botoes do
   modal ja tem (ver .admin-btn-danger/.admin-icon-btn acima), entao ficava com o padding
   grande (var(--space-3) var(--space-6)) e font 700 1rem do botao generico do modal. Isso
   ja foi corrigido pro tamanho compacto dos outros botoes do modal, mas o flex:1 1 auto
   incondicional trocou um problema por outro: numa tela larga, com o dropdown ocupando so
   ~9rem, o botao virava um bloco gigante esticado ate a borda direita do modal (ver
   img/rules-comp.png) — desproporcional perto de um dropdown pequeno. flex:0 1 auto aqui
   deixa o botao no tamanho natural do proprio texto/padding (como os outros botoes do
   modal); soh cresce pra preencher a linha no mobile (ver @media abaixo), onde ele quebra
   pra propria linha (herda o wrap do form acima) e faz sentido ocupar a largura toda. */
#simulaked-global-modal .admin-grant-role-form > button[type="submit"] {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0.4rem 0.85rem;
  font-family: var(--montserrat);
  font-weight: 600;
  font-size: 0.8rem;
}

/* Dropdown padronizado da plataforma (.simulaked-dropdown, ver shared/js/dropdown.js e
   _dropdown.css) no lugar do <select> nativo, dimensionado pra caber ao lado do botao
   "Conceder role". Causa raiz confirmada via Playwright (o botao SEMPRE esteve grudado no
   dropdown, "gap" de so 8px) — o dropdown renderizava a 320px (20rem, o max-width padrao
   do componente base) porque ".simulaked-dropdown" e ".admin-role-select" tem a MESMA
   especificidade (uma classe cada); em empate, quem carrega por ULTIMO no <head> vence,
   e _dropdown.css estava depois de admin.css. Corrigido a ordem dos <link> em admin.html,
   e o seletor aqui vira duas classes (especificidade maior) pra nao depender de ordem de
   novo se algum dia mudar. flex:0 0 auto ignora o "width:100%" herdado do componente base
   (pensado pra formularios de pagina inteira, vira flex-basis:100% como item flex aqui). */
.simulaked-dropdown.admin-role-select {
  flex: 0 0 auto;
  width: auto;
  max-width: 9rem;
}

/* #simulaked-global-modal button (modal.css) mira em QUALQUER <button> dentro do modal —
   sem este prefixo por ID, o gatilho do dropdown tambem virava um botao grande de
   gradiente (mesmo problema documentado em .admin-roles-list__revoke mais acima). */
#simulaked-global-modal .admin-role-select .simulaked-dropdown__button {
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--alabaster-gray);
  background: var(--lavender-mist);
  font: 500 0.82rem var(--montserrat);
  color: var(--black);
}

.admin-role-select .simulaked-dropdown__label {
  font-size: 0.82rem;
  font-weight: 500;
}

.admin-role-select .simulaked-dropdown__icon {
  width: 0.9rem;
  height: 0.9rem;
  min-width: 0.9rem;
  min-height: 0.9rem;
}

/* O <ul> de opcoes do dropdown e portado pra dentro de #simulaked-dropdown-portal (fora do
   modal, ver ensureDropdownPortalRoot em shared/js/dropdown.js), e ESSE elemento (nao o
   <ul>) e quem importa aqui: ele tem position:absolute + z-index:100000 fixados inline via
   JS, e isso cria o PROPRIO contexto de empilhamento do portal. Um descendente nao escapa
   do contexto de empilhamento do ancestral — dar z-index alto so no <ul> (tentativa
   anterior) nao adiantava, porque ele continuava preso dentro do teto de 100000 do portal,
   que perde pro overlay do modal (#simulaked-global-modal-overlay, z-index:110000 em
   modal.css) na hora de pintar. Precisa subir o z-index do PROPRIO portal. !important
   necessario pra vencer o z-index inline aplicado via JS (confirmado com Playwright:
   document.elementFromPoint no centro do menu aberto retornava conteudo do modal por
   tras, nao uma opcao do dropdown). */
#simulaked-dropdown-portal {
  z-index: 120000 !important;
}

/* Zona de risco: separada visualmente do resto do modal (fundo com leve tom de aviso, nao
   so mais um bloco cinza igual a secao de Roles) — a acao de desabilitar/reabilitar login
   e a unica deste modal com efeito imediato sobre o acesso do usuario, entao precisa se
   destacar das outras (que so leem dados ou concedem/revogam permissao). */
.admin-danger-zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: color-mix(in srgb, #b42318 6%, transparent);
  border: 1px solid color-mix(in srgb, #b42318 18%, transparent);
  border-radius: var(--radius-md, 10px);
  padding: 0.65rem 0.9rem;
}

.admin-danger-zone__text strong {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 0.15rem;
}

.admin-danger-zone__note {
  margin: 0;
  font-size: 0.78rem;
  color: var(--gray);
}

/* Mesmo motivo do #simulaked-global-modal .admin-roles-list__revoke acima — sem o prefixo
   por ID, #simulaked-global-modal button (modal.css) vencia e inflava estes dois botoes
   pro tamanho de botao primario inteiro do modal. */
#simulaked-global-modal .admin-btn-danger,
#simulaked-global-modal .admin-btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 1px solid transparent;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-md, 10px);
  font-family: var(--montserrat);
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.18s ease;
}

#simulaked-global-modal .admin-btn-danger {
  background: color-mix(in srgb, #b42318 12%, transparent);
  color: #b42318;
  border-color: color-mix(in srgb, #b42318 30%, transparent);
}

#simulaked-global-modal .admin-btn-danger:hover {
  background: #b42318;
  color: #fff;
}

#simulaked-global-modal .admin-btn-success {
  background: color-mix(in srgb, #15803d 12%, transparent);
  color: #15803d;
  border-color: color-mix(in srgb, #15803d 30%, transparent);
}

#simulaked-global-modal .admin-btn-success:hover {
  background: #15803d;
  color: #fff;
}

[data-theme="dark"] .admin-btn-danger { color: #ff8a75; }
[data-theme="dark"] .admin-btn-success { color: #4ade80; }

/* Mesmo problema de especificidade documentado em suporte.css (.support-empty-state[hidden])
   — .admin-btn-danger/.admin-btn-success declaram "display" incondicional, entao precisam
   do proprio override pra "hidden" continuar escondendo de verdade. */
#simulaked-global-modal .admin-btn-danger[hidden],
#simulaked-global-modal .admin-btn-success[hidden] {
  display: none !important;
}

.admin-grant-role-form select {
  border: none;
  border-radius: var(--radius-md, 10px);
  background: var(--lavender-mist);
  color: var(--black);
  font-family: var(--montserrat);
  font-size: 0.85rem;
  padding: 0.5rem 0.7rem;
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.admin-table th {
  text-align: left;
  color: var(--gray);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--alabaster-gray);
  white-space: nowrap;
}

.admin-table td {
  padding: 0.6rem;
  border-bottom: 1px solid var(--alabaster-gray);
  vertical-align: top;
}

.admin-table td.admin-table__message {
  max-width: 320px;
  white-space: pre-wrap;
  word-break: break-word;
}

.admin-table__empty td {
  color: var(--gray);
  text-align: center;
  padding: 1rem;
}

/* Botao "ver informacoes completas" (icone book-text) ao lado dos badges de resumo — mesmo
   motivo do prefixo por ID documentado em .admin-btn-danger/.admin-roles-list__revoke acima:
   #simulaked-global-modal button (modal.css) venceria e infla qualquer <button> sem isso. */
#simulaked-global-modal .admin-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid var(--alabaster-gray);
  border-radius: var(--radius-md, 10px);
  background: var(--white);
  color: var(--gray);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

#simulaked-global-modal .admin-icon-btn:hover {
  background: var(--eletric-indigo-solid);
  color: #fff;
}

/* Botao "book-text" funciona como toggle Resumo <-> Completo (ver setFullInfoVisible em
   admin/main.js) — aria-pressed="true" reflete visualmente o estado "Completo" ativo,
   reaproveitando a mesma cor solida do :hover acima em vez de um segundo tema de cor so
   pro estado pressionado. */
#simulaked-global-modal .admin-icon-btn[aria-pressed="true"] {
  background: var(--eletric-indigo-solid);
  color: #fff;
}

.admin-icon-btn .lucide-icon {
  width: 1rem;
  height: 1rem;
}

.admin-user-detail__loading,
.admin-user-detail__empty {
  color: var(--gray);
  font-size: 0.85rem;
  margin: 0;
}

.admin-user-detail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
}

.admin-user-detail__list li {
  display: flex;
  flex-direction: column;
}

/* Secoes com botao de excluir/revogar (ver .admin-item-delete/renderDeletableListItems em
   admin/main.js) envolvem o conteudo num .admin-user-detail__list-item-body — so nesse caso
   o <li> vira row (conteudo + botao lado a lado). Secoes somente-leitura (tickets de
   suporte, disputas de cobranca) nunca tem esse wrapper, entao continuam em column, layout
   identico ao de antes pra elas — :has() em vez de uma classe extra no <li> porque a
   condicao e "tem o wrapper dentro", nao um estado do proprio <li>. */
.admin-user-detail__list li:has(.admin-user-detail__list-item-body) {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.admin-user-detail__list-item-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.admin-user-detail__muted {
  color: var(--gray);
  font-size: 0.75rem;
}

.admin-user-detail__subheading {
  margin: 0.75rem 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Aba "Completo" (ver buildFullInfoAccordionHtml/wireFullInfoAccordion em admin/main.js):
   um <details> nativo por secao, fechado por padrao — cada um so busca a propria secao na
   API na primeira vez que abre. list-style/marker removidos nas duas formas (spec atual +
   fallback WebKit) porque o indicador de expandir/fechar aqui e o chevron lucide rotacionado,
   nao o triangulo nativo do navegador. */
.admin-accordion-item {
  background: var(--lavender-mist);
  border-radius: var(--radius-md, 10px);
  margin-bottom: 0.5rem;
}

.admin-accordion-item summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.admin-accordion-item summary::marker,
.admin-accordion-item summary::-webkit-details-marker {
  display: none;
}

.admin-accordion-item summary .lucide-icon {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.admin-accordion-item[open] summary .lucide-icon {
  transform: rotate(90deg);
}

.admin-accordion-body {
  padding: 0 0.9rem 0.85rem;
}

/* Mesmo breakpoint que #simulaked-global-modal usa pra virar layout mobile (720px, ver
   modal.css) — abaixo disso o modal fica quase full-width (min(100vw - 24px, 700px)) com
   overflow:auto nos dois eixos, entao qualquer bloco interno mais largo que isso vira scroll
   horizontal/corte em vez de simplesmente quebrar linha (era exatamente essa combinacao que
   cortava "Resumo"/"Completo" e empurrava "Conceder role" pra fora do card — ver
   img/modal-res.png e img/modal-res2.png). As duas colunas fixas (140px + 1fr) de
   .admin-user-detail__grid tambem sao apertadas demais numa tela pequena — rotulo e valor
   ficam bem mais legiveis empilhados em vez de espremidos lado a lado. */
@media (max-width: 720px) {
  .admin-user-detail__grid {
    grid-template-columns: 1fr;
    gap: 0.15rem 0;
    max-width: none;
  }

  .admin-user-detail__grid dt {
    margin-top: 0.4rem;
  }

  .admin-user-detail__grid dt:first-child {
    margin-top: 0;
  }

  /* Contrapartida do width:fit-content da regra base (acima) — no mobile o dropdown e o
     botao quebram em linhas separadas (flex-wrap:wrap), entao o subcomponente deve ocupar
     a largura toda do card, nao abracar o conteudo. */
  .admin-grant-role-form {
    width: 100%;
  }

  /* Dropdown "Selecionar role" full-width quando quebra pra propria linha (herda o
     flex-wrap:wrap do .admin-grant-role-form) — sem isso ele ficava com max-width:9rem fixo
     numa linha sozinho, estreito e desalinhado do botao "Conceder role" full-width abaixo. */
  .simulaked-dropdown.admin-role-select {
    flex: 1 1 auto;
    max-width: none;
  }

  /* So aqui (linha propria, ver comentario da regra base acima) faz sentido o botao
     esticar pra largura toda — no desktop ele fica ao lado do dropdown, compacto. */
  #simulaked-global-modal .admin-grant-role-form > button[type="submit"] {
    flex: 1 1 auto;
  }
}

/* ---- Edicao da aba "Completo" (Conta/Parcerias/Aparencia + conceder/revogar +
   excluir item pontual) — ver EDITABLE_SECTION_FORMS/SECTION_EDIT_CONFIG em admin/main.js */

/* Linha com o botao-lapis alinhado a direita, acima do conteudo de cada secao editavel. */
.admin-section-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.4rem;
}

/* Painel proprio (mesmo overlay ja usado em .admin-grant-role-form logo acima) em vez de
   sentar direto no fundo --lavender-mist do accordion — causa raiz do formulario "invisivel"
   reportado (ver img/melhorar-ui.png): input com background:var(--lavender-mist) direto
   sobre um container que JA E --lavender-mist tem contraste zero entre os dois, sobra so o
   texto flutuando sem caixa nenhuma ao redor. Com esse overlay mais escuro por baixo, o
   --lavender-mist dos proprios campos (mais claro que o overlay) finalmente aparece como
   caixa de verdade — exatamente a mesma relacao de cores que ja funciona no dropdown/select
   escondido de .admin-grant-role-form.
   Um campo por linha (ver img/component.png) — a versao em grid/lado-a-lado juntava campos
   sem relacao entre si (XP do lado de Tema) numa mesma linha, confuso de escanear. */
.admin-section-edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: color-mix(in srgb, var(--black) 6%, transparent);
  border-radius: var(--radius-md, 10px);
  padding: 0.75rem;
  margin-top: 0.4rem;
}

.admin-section-edit-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray);
}

.admin-section-edit-form label.admin-form-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
}

.admin-section-edit-form input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--eletric-indigo);
  cursor: pointer;
}

/* Tema/Idioma/Status usam o dropdown customizado da plataforma agora (ver
   renderCustomSelect/initFormDropdowns em admin/main.js) — o <select> nativo por baixo fica
   .visually-hidden (aplicado pelo proprio initDropdown), entao so os inputs de texto/numero/
   data precisam de estilo aqui. */
.admin-section-edit-form input[type="text"],
.admin-section-edit-form input[type="number"],
.admin-section-edit-form input[type="email"],
.admin-section-edit-form input[type="datetime-local"] {
  width: 100%;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 10px);
  background: var(--lavender-mist);
  color: var(--black);
  font-family: var(--montserrat);
  font-size: 0.85rem;
  font-weight: 400;
  padding: 0.5rem 0.7rem;
  transition: border-color 0.15s ease;
}

.admin-section-edit-form input:focus-visible {
  outline: none;
  border-color: var(--eletric-indigo);
}

/* Mesmo dropdown customizado ja usado em "Conceder role" (.admin-role-select acima), so que
   aqui ocupa a linha inteira do formulario (largura igual aos outros campos, ver
   img/dropdown-max.png) em vez do max-width:9rem de la — Roles fica numa linha horizontal ao
   lado de um botao, aqui e um campo de formulario sozinho, um por linha. O componente base
   (.simulaked-dropdown em _dropdown.css) trava em max-width:20rem por padrao — sem remover
   isso aqui tambem, o width:100% sozinho nao adianta, o max-width continua clampando. */
.simulaked-dropdown.admin-edit-select {
  width: 100%;
  max-width: none;
}

/* Mesmo motivo de especificidade documentado em .admin-role-select acima
   (#simulaked-global-modal button venceria .simulaked-dropdown__button sozinho) — sem esse
   prefixo o gatilho do dropdown de Tema/Idioma/Status virava um botao generico grande do
   modal, igual ja acontecia com o de Roles antes de ganhar esse mesmo tratamento. */
#simulaked-global-modal .admin-edit-select .simulaked-dropdown__button {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--alabaster-gray);
  background: var(--lavender-mist);
  font: 400 0.85rem var(--montserrat);
  color: var(--black);
}

.admin-edit-select .simulaked-dropdown__label {
  font-size: 0.85rem;
  font-weight: 400;
}

.admin-edit-select .simulaked-dropdown__icon {
  width: 0.9rem;
  height: 0.9rem;
  min-width: 0.9rem;
  min-height: 0.9rem;
}

.admin-form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.2rem;
}

/* Mesmo motivo de especificidade documentado em .admin-grant-role-form acima
   (#simulaked-global-modal button vence .btn-primary/.btn-secondary sozinhos) — sem isso
   Salvar/Cancelar viravam botoes genericos grandes do modal dentro de um form pequeno. */
#simulaked-global-modal .admin-form-actions button {
  padding: 0.4rem 0.85rem;
  font-family: var(--montserrat);
  font-weight: 600;
  font-size: 0.8rem;
}

/* Inputs dos mini-formularios de conceder (conquista/item da loja), lado a lado com o
   botao "Conceder" dentro de .admin-grant-role-form (reaproveitado, ver comentario original
   dessa classe acima). */
.admin-inline-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  border-radius: var(--radius-md, 10px);
  background: var(--lavender-mist);
  color: var(--black);
  font-family: var(--montserrat);
  font-size: 0.85rem;
  padding: 0.5rem 0.7rem;
}

.admin-inline-input--sm {
  flex: 0 0 6rem;
}

/* Acao de mao unica ("confirmar email manualmente") dentro do <dd>, nao um botao — visual
   de link pra nao competir com o botao-lapis pela atencao numa acao rara/pontual. */
#simulaked-global-modal .admin-inline-action {
  padding: 0;
  border: none;
  background: none;
  color: var(--eletric-indigo);
  font: 600 0.8rem var(--montserrat);
  text-decoration: underline;
  cursor: pointer;
}


/* ---- Spec 006: abas novas do Painel da equipe (controllers/admin/*Tab.js) ---- */

/* Titulo do bloco com acao a direita (Atualizar / Nova resposta / Novo cupom). */
.admin-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.admin-block-header h2 {
  margin: 0;
}

.admin-section-block h3 {
  margin: 1.25rem 0 0.6rem;
  font-size: 0.92rem;
}

/* Filtros por status reaproveitam .support-admin__filter (suporte.css). */
.admin-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

/* Cartoes de item (pedido de parceria, resposta pronta). */
.admin-card-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.admin-card {
  background: var(--lavender-mist);
  border-radius: var(--radius-md, 10px);
  padding: 1rem;
  min-width: 0;
}

.admin-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.admin-card__header > div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.admin-card__grid {
  max-width: none;
  margin-bottom: 0.75rem;
}

.admin-card__grid dd {
  white-space: pre-wrap;
  word-break: break-word;
}

.admin-card__text {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.admin-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Acao em linha de tabela, com cara de link (nao compete com o conteudo). */
.admin-link-btn {
  padding: 0;
  border: none;
  background: none;
  color: var(--eletric-indigo);
  font: 600 0.8rem var(--montserrat);
  text-decoration: underline;
  cursor: pointer;
  margin-right: 0.6rem;
}

.admin-link-btn:hover {
  color: var(--eletric-indigo-solid-hover);
}

.admin-table__actions {
  white-space: nowrap;
}

/* Metricas: grade de indicadores + split (planos | barras). */
.admin-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.admin-metric {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: var(--lavender-mist);
  border-radius: var(--radius-md, 10px);
  padding: 0.85rem 1rem;
}

.admin-metric__label {
  color: var(--gray);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-metric__value {
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.admin-metric__note {
  color: var(--gray);
  font-size: 0.75rem;
}

.admin-metrics-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 1.5rem;
  margin-bottom: 0.75rem;
}

.admin-metrics-split h3 {
  margin-top: 0;
}

@media (max-width: 720px) {
  .admin-metrics-split {
    grid-template-columns: 1fr;
  }
}

/* Grafico de barras simples: uma serie, uma cor, valor escrito sobre cada barra. */
.admin-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 10rem;
}

.admin-bars__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  height: 100%;
  min-width: 0;
}

.admin-bars__bar {
  width: 100%;
  max-width: 2.5rem;
  background: var(--eletric-indigo);
  border-radius: 6px 6px 2px 2px;
}

.admin-bars__value {
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.admin-bars__label {
  color: var(--gray);
  font-size: 0.7rem;
}

/* Modal de usuario: linha de botoes compactos (Cobranca, Dados cadastrais). Mesmo prefixo
   por ID dos outros botoes do modal (#simulaked-global-modal button em modal.css venceria). */
.admin-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

#simulaked-global-modal .admin-chip-btn {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--alabaster-gray);
  border-radius: 999px;
  background: var(--white);
  color: var(--black);
  font: 600 0.78rem var(--montserrat);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

#simulaked-global-modal .admin-chip-btn:hover:not(:disabled) {
  background: var(--eletric-indigo-solid);
  color: #fff;
}

#simulaked-global-modal .admin-chip-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Formularios em modal (showFormModal em admin/adminUi.js) e formularios da aba Site:
   select/textarea/date ganham o mesmo visual dos inputs de .admin-section-edit-form. */
.admin-section-edit-form select,
.admin-section-edit-form textarea,
.admin-section-edit-form input[type="date"] {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 10px);
  background: var(--lavender-mist);
  color: var(--black);
  font-family: var(--montserrat);
  font-size: 0.85rem;
  font-weight: 400;
  padding: 0.5rem 0.7rem;
}

.admin-section-edit-form textarea {
  resize: vertical;
}

.admin-section-edit-form select:focus-visible,
.admin-section-edit-form textarea:focus-visible {
  outline: none;
  border-color: var(--eletric-indigo);
}

.admin-form-modal__intro {
  margin: 0;
  font-size: 0.85rem;
  color: var(--black);
}

.admin-form-modal__hint {
  margin-top: -0.4rem;
  color: var(--gray);
  font-size: 0.72rem;
}