/*
 * HOMOLOGAÇÃO — correções pontuais de layout das telas existentes (checkup de 30/10/2026, capturas em
 * /opt/converze/homologacao/capturas-20261030/). Carregado por ÚLTIMO; não muda a identidade visual, só corrige o que estava errado.
 * html[data-hml-rota] é marcado pelo auto-hml-api-oficial.js com o caminho atual.
 */

/* Usuários: "Excluir" e o selo do papel apareciam cortados com "…" (regra de reticências em todas as células, com body:has(...) —
   o seletor abaixo repete o atributo para ganhar na especificidade). */
html[data-hml-rota="/usuarios"][data-hml-rota] main.main-content table tbody tr td:last-child,
html[data-hml-rota="/usuarios"][data-hml-rota] main.main-content table tbody tr td:nth-child(3),
html[data-hml-rota="/usuarios"][data-hml-rota] main.main-content table tbody tr td:nth-child(4) {
  overflow: visible !important;
  text-overflow: clip !important;
}
html[data-hml-rota="/usuarios"][data-hml-rota] main.main-content div.p-6 table thead tr th:nth-child(6):last-child,
html[data-hml-rota="/usuarios"][data-hml-rota] main.main-content div.p-6 table tbody tr td:nth-child(6):last-child { min-width: 170px !important; width: 170px !important; }
html[data-hml-rota="/usuarios"][data-hml-rota] main.main-content table tbody tr td:last-child button + button { margin-left: 12px !important; }

/* Contatos (celular): o bloco dos botões herdava margin-left de 16px do espaçamento do pai e ainda ocupava 100% → passava 16px da tela. */
@media (max-width: 767px) {
  html[data-hml-rota="/contatos"][data-hml-rota] main header div.flex.items-center.space-x-4 > div.space-x-2.border-l {
    margin-left: 0 !important; padding-left: 0 !important; border-left: 0 !important; width: 100% !important; max-width: 100% !important;
  }
}

/* Modais de tela cheia (ex.: Gerenciar Categorias) ficavam parcialmente atrás do menu lateral. */
div.fixed.inset-0.z-50 { z-index: 10050 !important; }
/* Gerenciar Categorias: coluna de ações espremida (Editar/Excluir quebrando e cortados). */
html[data-hml-rota="/contatos"] body:has(nav.sidebar-navigation a[href="/contatos"].bg-white) .fixed.inset-0.z-50 .bg-white.max-w-5xl table[role="table"] th:nth-child(5),
html[data-hml-rota="/contatos"] body:has(nav.sidebar-navigation a[href="/contatos"].bg-white) .fixed.inset-0.z-50 .bg-white.max-w-5xl table[role="table"] td:nth-child(5) { width: 17% !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
html[data-hml-rota="/contatos"] body:has(nav.sidebar-navigation a[href="/contatos"].bg-white) .fixed.inset-0.z-50 .bg-white.max-w-5xl table[role="table"] td:nth-child(6) > div { flex-wrap: nowrap !important; gap: 6px !important; justify-content: flex-end !important; }

/* Conexões (celular): nome longo da sessão + selos estouravam a largura. */
html[data-hml-rota="/whatsapp"] main .flex.items-center.gap-3.mb-2 { flex-wrap: wrap !important; row-gap: 6px !important; }
html[data-hml-rota="/whatsapp"] main h4 { overflow-wrap: anywhere !important; min-width: 0 !important; }

/* Super Admin: abas cortadas em 1280 e no celular → quebram linha; título embaixo do botão do menu no celular. */
@media (max-width: 1400px) {
  html[data-hml-rota^="/super-admin"][data-hml-rota] main nav.-mb-px {
    display: flex !important; flex-wrap: wrap !important; min-width: 0 !important; width: 100% !important; row-gap: 6px !important; column-gap: 8px !important;
  }
  html[data-hml-rota^="/super-admin"][data-hml-rota] main nav.-mb-px > * { margin-left: 0 !important; margin-right: 0 !important; white-space: nowrap !important; }
}
html[data-hml-rota^="/super-admin"] main table th,
html[data-hml-rota^="/super-admin"] main table td { padding-left: 14px !important; padding-right: 14px !important; }
@media (max-width: 767px) {
  html[data-hml-rota^="/super-admin"] main h1 { padding-left: 56px !important; }
  html[data-hml-rota^="/super-admin"] main h1 + p { padding-left: 56px !important; }
}
/* Celular: a regra do sistema transforma as abas numa faixa com rolagem lateral (nomes cortados na borda) → quebram linha. */
@media (max-width: 1400px) {
  html[data-hml-rota^="/super-admin"] body:has(nav.sidebar-navigation a[href="/super-admin"].bg-white) div.p-8:has(> div.border-b.border-gray-200.mb-8 > nav) > div.border-b.border-gray-200.mb-8 > nav {
    display: flex !important; flex-wrap: wrap !important; gap: 6px !important;
  }
  html[data-hml-rota^="/super-admin"] main div.border-b.border-gray-200.mb-8 { overflow: visible !important; }
}
/* Gerenciar Categorias: o botão "limpar contatos" ficava numa linha própria embaixo de Editar/Excluir → mesma linha. */
html[data-hml-rota="/contatos"] body:has(nav.sidebar-navigation a[href="/contatos"].bg-white) .fixed.inset-0.z-50 .bg-white.max-w-5xl table[role="table"] th:nth-child(1) { width: 24% !important; }
html[data-hml-rota="/contatos"] body:has(nav.sidebar-navigation a[href="/contatos"].bg-white) .fixed.inset-0.z-50 .bg-white.max-w-5xl table[role="table"] th:nth-child(2) { width: 6% !important; }
html[data-hml-rota="/contatos"] body:has(nav.sidebar-navigation a[href="/contatos"].bg-white) .fixed.inset-0.z-50 .bg-white.max-w-5xl table[role="table"] th:nth-child(3) { width: 16% !important; }
html[data-hml-rota="/contatos"] body:has(nav.sidebar-navigation a[href="/contatos"].bg-white) .fixed.inset-0.z-50 .bg-white.max-w-5xl table[role="table"] th:nth-child(4) { width: 12% !important; }
html[data-hml-rota="/contatos"] body:has(nav.sidebar-navigation a[href="/contatos"].bg-white) .fixed.inset-0.z-50 .bg-white.max-w-5xl table[role="table"] th:nth-child(5) { width: 16% !important; }
html[data-hml-rota="/contatos"] body:has(nav.sidebar-navigation a[href="/contatos"].bg-white) .fixed.inset-0.z-50 .bg-white.max-w-5xl table[role="table"] th:nth-child(6) { width: 26% !important; }
html[data-hml-rota="/contatos"] body:has(nav.sidebar-navigation a[href="/contatos"].bg-white) .fixed.inset-0.z-50 .bg-white.max-w-5xl table[role="table"] td:nth-child(6) { white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; }
html[data-hml-rota="/contatos"] body:has(nav.sidebar-navigation a[href="/contatos"].bg-white) .fixed.inset-0.z-50 .bg-white.max-w-5xl table[role="table"] td:nth-child(6) > div { display: inline-flex !important; vertical-align: middle !important; width: auto !important; }
html[data-hml-rota="/contatos"] body:has(nav.sidebar-navigation a[href="/contatos"].bg-white) .fixed.inset-0.z-50 .bg-white.max-w-5xl table[role="table"] td:nth-child(6) > .clear-contacts-wrap { margin: 0 0 0 6px !important; }