/* Páginas de cadastro (Unidades, Usuários, Empresas, Acessos). A folha entra em todas as páginas
   pelo _Layout, então o que qualquer página usa continua morando no site.css: aqui ficam só a forma
   da página e a da tabela com coluna de ações. O trio da linha (menu ⋯, painel, confirmação) é
   compartilhado e está no site.css. */
/* A trilha minmax(0,1fr) é a mesma rede das outras grades do projeto: numa grade de coluna única com
   trilha "auto", o nome de uma unidade que não quebra empurra a coluna da página inteira e o celular
   ganha rolagem horizontal. */
.management-page { display:grid; grid-template-columns:minmax(0,1fr); gap:28px; max-width:1200px; }
.management-page h1, .management-page h3 { margin-bottom:8px; }
/* A tabela é table-layout:fixed a 100% e empilha abaixo de 1023 px, então nunca rola na horizontal:
   por isso o invólucro é o .table-wrap-flow (site.css), que não recorta o que o ⋯, o painel e a
   confirmação abrem para fora da última linha. */
.management-table { table-layout:fixed; }
.management-table td { font-size:.875rem; font-weight:400; }
/* A coluna de ações carrega o ⋯ de 44 px E o gatilho de texto ao lado dele — "Abrir" em /Companies,
   "Desativar" em /Users e em /PlatformUsers. Medido nas capturas de 1440 px com os 116 px de antes:
   os dois não cabiam lado a lado, o gatilho caía para a linha de baixo e cada linha da tabela ficava
   ~40 px mais alta, com o rótulo pendurado sozinho à direita. 168 px é o ⋯ mais o gatilho mais os
   32 px de recuo da célula. Abaixo de 1023 px a tabela empilha e a largura volta a ser automática. */
.management-table th:last-child { width:168px; }
/* Sem script os <summary> irmãos do menu ⋯ continuam na tela (o site.css só os esconde com a casca
   marcada) e `button,.button{white-space:nowrap}` não os deixa quebrar: na coluna presa em 168 px o
   maior deles ("Alterar permissão ou unidade", 203 px) transbordava para a ESQUERDA — a .row-actions
   é justify-content:flex-end — e pintava sobre a célula "Acesso", com a linha passando de 73 px para
   193 px. Medido a 1440 px com javaScriptEnabled:false: 51 px de sobreposição antes, 0 depois e a
   linha de volta aos 73 px, porque a coluna cresce e os quatro controles cabem lado a lado. Abaixo de
   1023 px a tabela empilha e nada disto vale: o documento continua com a largura da janela. */
.app-shell:not(.shell-enhanced) .management-table { table-layout:auto; }
.app-shell:not(.shell-enhanced) .management-table th:last-child { width:auto; }
/* A tabela é table-layout:fixed: sem largura declarada, cada coluna recebe a mesma fatia, e uma
   coluna de contagem — que carrega um dígito — fica tão larga quanto o nome da unidade ou da
   empresa. Reservar a largura das colunas numéricas devolve o espaço para a primeira, que é o
   título da linha. Abaixo de 1023 px o <thead> some e a tabela empilha, então a largura não vale. */
.management-table th.num { width:132px; }
.management-table td.num { font-variant-numeric:tabular-nums; }
/* O fundo do cabeçalho quadraria os cantos do cartão, que agora não recorta. */
.management-table thead th:first-child { border-top-left-radius:var(--radius); }
.management-table thead th:last-child { border-top-right-radius:var(--radius); }
.management-name { display:inline-flex; align-items:center; min-height:44px; color:var(--text); font-weight:700; font-size:.95rem; line-height:1.4; text-decoration:none; }
.management-name:hover { color:var(--accent-text); text-decoration:underline; }
@media(max-width:1023px) { .management-table th:last-child { width:auto; } }