/* Ajustes visuais do Inspector sobre o tema Jazzmin/AdminLTE — deixa a sidebar e os
   cards com uma leitura mais profissional/organizada, sem depender de customizar
   os templates do Jazzmin diretamente. */

/* --- Fonte JetBrains Mono, vendorizada localmente (mesmo espírito do Chart.js/
   DataTables — sem depender de CDN externo). Usada no tema "Signal" abaixo. --- */
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-400.3fb54ef45e30.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-500.ba99f79490ff.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-600.dba84cb55691.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-700.b9c90042b2e0.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Paleta de marca — inspirada em signal-devops.dashboardpack.com/dashboard
   (cores extraídas via getComputedStyle da referência real). */
:root {
  --signal-green: #00954f;
  --signal-green-hover: #007a41;
  --signal-green-dark: #05100b;
  --signal-green-text: #00a55d;
  --signal-bg: #f4f8f6;
  --signal-border: #dde3e0;
  --signal-heading: #0a0e0c;
  --signal-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Variáveis do tema padrão do admin do Django (admin/css/base.css) —
     usadas por CSS vendorizado que a gente não escreveu (ex:
     admin/css/autocomplete.css, o CSS do widget select2 dos campos
     `autocomplete_fields`) mas nunca ficam definidas nesse projeto porque o
     Jazzmin substitui o `base.css` inteiro pelo tema dele e não redefine
     essas variáveis. Sem isso, `var(--border-color)`/`var(--body-bg)` etc
     resolvem pra nada — o combobox do select2 fica sem borda/fundo (some
     visualmente). Mapeadas pra paleta Signal em vez dos valores cinza
     padrão do Django, pra ficar consistente com o resto do tema. */
  --primary: var(--signal-green);
  --primary-fg: #fff;
  --body-fg: #454b57;
  --body-bg: #fff;
  --body-quiet-color: #8890a0;
  --border-color: var(--signal-border);
  --error-fg: #ba2121;
  --darkened-bg: #f8f8f8;
  --selected-bg: rgba(0, 149, 79, 0.08);
}

/* --- Sidebar: conceito inspirado em eyris-react.themenate.net/apps/sales/dashboard
   (fundo claro, item ativo como cartão branco flutuante com tarja verde à esquerda,
   cabeçalhos de seção discretos em caixa alta, submenu com linha-guia vertical) —
   mantendo a cor verde da marca (Signal) no lugar do azul da referência.

   Importante: o Jazzmin 3.x usa a estrutura do AdminLTE4 (`.app-sidebar`, id
   `#jazzy-sidebar` — não `.main-sidebar`/`.nav-sidebar` do AdminLTE3, que não
   existem nesta versão) e o próprio template força `data-bs-theme="dark"` na tag
   <aside>. Isso faz o AdminLTE pintar o menu a partir de um conjunto de CSS custom
   properties `--lte-sidebar-*` reescritas para valores escuros por
   `[data-bs-theme=dark] .app-sidebar` — então não adianta sobrescrever cor/fundo
   direto nos links (a especificidade do tema escuro ganha). A forma correta é
   redefinir essas mesmas variáveis aqui, escopadas em `#jazzy-sidebar` (um ID
   sempre vence um seletor baseado em classe/atributo, não importa a ordem). */
#jazzy-sidebar {
  background-color: var(--signal-bg) !important;
  border-right: 1px solid var(--signal-border);
  /* Antes disso, a sidebar era a ÚNICA área do admin fora da fonte de marca
     (JetBrains Mono) — os cards de indicadores já usavam, o menu não, o que
     deixava a UI com "duas caras" diferentes (achado real 2026-09-30). Todo
     texto/ícone da sidebar herda daqui pra baixo. */
  font-family: var(--signal-mono);
  --lte-sidebar-color: #454b57;
  --lte-sidebar-hover-color: var(--signal-heading);
  --lte-sidebar-hover-bg: rgba(0, 149, 79, 0.08);
  --lte-sidebar-active-color: var(--signal-green-text);
  --lte-sidebar-menu-active-bg: #ffffff;
  --lte-sidebar-menu-active-color: var(--signal-green-text);
  --lte-sidebar-submenu-bg: transparent;
  --lte-sidebar-submenu-color: #5b6472;
  --lte-sidebar-submenu-hover-color: var(--signal-heading);
  --lte-sidebar-submenu-hover-bg: rgba(0, 149, 79, 0.08);
  --lte-sidebar-submenu-active-color: var(--signal-green-text);
  --lte-sidebar-submenu-active-bg: #ffffff;
  --lte-sidebar-header-color: #9aa5a0;
}

#jazzy-sidebar .sidebar-brand {
  border-bottom: 1px solid var(--signal-border);
}

#jazzy-sidebar .brand-text {
  color: var(--signal-heading) !important;
  font-weight: 700;
}

#jazzy-sidebar .nav-header {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.9rem 1rem 0.35rem;
}

#jazzy-sidebar .nav-item > .nav-link {
  border-radius: 8px;
  margin: 1px 8px;
  padding: 0.5rem 0.75rem 0.5rem calc(0.75rem + 3px);
  width: auto;
  border-left: 3px solid transparent;
}

/* Ícone por app (ver JAZZMIN_SETTINGS["icons"] em inspector/settings.py) —
   sem uma cor/tamanho consistentes aqui, cada Font Awesome renderiza no
   cinza padrão do AdminLTE, sem nenhuma relação visual com o resto da marca
   (verde). Esmaecido por padrão, acende verde igual ao texto em hover/ativo —
   o mesmo tratamento que uma sidebar "premium" de referência usa pra guiar
   o olho sem gritar o tempo todo. */
#jazzy-sidebar .nav-icon {
  width: 1.4rem;
  text-align: center;
  color: #9aa5a0;
  font-size: 0.92rem;
  transition: color 0.15s ease;
}

#jazzy-sidebar .nav-item > .nav-link:hover .nav-icon,
#jazzy-sidebar .nav-item > .nav-link.active .nav-icon,
#jazzy-sidebar .nav-item.menu-open > .nav-link .nav-icon {
  color: var(--signal-green-text);
}

#jazzy-sidebar .nav-arrow {
  color: #c3cac6;
  font-size: 0.72rem;
}

/* Avatar do usuário: sem `JAZZMIN_SETTINGS["user_avatar"]` configurado, o
   Jazzmin cai num ícone genérico com a classe `fa-inverse` (branco, pensado
   pra sidebar ESCURA padrão do AdminLTE) — invisível numa sidebar clara feito
   a nossa (achado real 2026-09-30: aparecia como um círculo em branco, vazio).
   Repinta pro verde da marca em vez de tentar configurar um avatar de
   verdade (este projeto não tem foto de perfil pra colaborador/usuário). */
#jazzy-sidebar .user-panel .image i.user-profile {
  color: var(--signal-green);
  font-size: 2.1rem;
}

#jazzy-sidebar .user-panel .info a,
#jazzy-sidebar .user-panel .info span {
  color: var(--signal-heading) !important;
  font-weight: 600;
  font-size: 0.88rem;
}

/* Tarja verde à esquerda + sombra leve no item ativo — o "cartão flutuante" da
   referência. Cor de fundo/texto já vêm das variáveis acima; só a tarja e a
   sombra precisam de uma regra própria (não fazem parte do sistema de variáveis
   do AdminLTE). */
#jazzy-sidebar .nav-item > .nav-link.active {
  border-left: 3px solid var(--signal-green);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
  font-weight: 600;
}

/* Linha-guia vertical ligando os itens do submenu, como no submenu "Sales" da
   referência — sem ela os itens indentados ficam soltos, sem noção de hierarquia. */
#jazzy-sidebar .nav-treeview {
  margin-left: 22px;
  border-left: 1px solid var(--signal-border);
  padding-left: 6px;
}

#jazzy-sidebar .nav-treeview > .nav-item > .nav-link {
  margin-left: 0;
  padding-left: calc(0.75rem + 3px - 6px);
  font-size: 0.86rem;
}

/* AdminLTE trunca TODO `.nav-link p` com reticências por padrão
   (`overflow:hidden;text-overflow:ellipsis;white-space:nowrap`, vendorizado
   em adminlte.min.css) — certo pro item de app recolhido (que já vem cortado
   em 21 caracteres pelo próprio template do Jazzmin antes disso), mas cruel
   pros itens de submenu, cujo nome nunca é cortado no servidor: nomes como
   "Indicadores — Visão Geral"/"Indicadores — BookStack" (`custom_links` em
   JAZZMIN_SETTINGS) viravam "Indicadores — Visão …"/"Indicadores — BookS…"
   sem necessidade — achado real 2026-09-30. Deixa quebrar em 2 linhas em vez
   de cortar; a largura fixa da sidebar (~250px do AdminLTE) já garante que
   uma segunda linha nunca estoura o layout. */
#jazzy-sidebar .nav-treeview .nav-link p {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.25;
}

/* --- Cards (usado no dashboard/indicadores e nas telas do admin) --- */
.card {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.card-header {
  background-color: rgba(0, 0, 0, 0.015);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.92rem;
}

/* --- Topo ---
   O tema Bootswatch "flatly" + a opção `navbar` (JAZZMIN_UI_TWEAKS) = "navbar-dark"
   fazem o Bootstrap definir `--bs-navbar-color`/`--bs-navbar-brand-color` etc como
   branco (`.navbar-dark { --bs-navbar-color: #fff; ... }`, pensado pra um fundo
   escuro) — mas o fundo real do topo é claro (`bg-body`, `--bs-body-bg: #fff` no
   flatly). Resultado: o botão de menu (hamburger), o link "Indicadores" e o ícone
   de usuário ficam brancos sobre fundo branco, ou seja, invisíveis. Redefinindo as
   mesmas variáveis do Bootstrap aqui, escopadas em `#jazzy-navbar`, sem precisar
   trocar a classe `navbar-dark` no template (mesma lógica do `#jazzy-sidebar`
   acima, que já faz isso pras variáveis `--lte-sidebar-*`). */
#jazzy-navbar {
  --bs-navbar-color: var(--signal-heading);
  --bs-navbar-hover-color: var(--signal-green-text);
  --bs-navbar-active-color: var(--signal-green-text);
  --bs-navbar-disabled-color: rgba(10, 14, 12, 0.3);
  --bs-navbar-brand-color: var(--signal-heading);
  --bs-navbar-brand-hover-color: var(--signal-green-text);
  --bs-navbar-toggler-border-color: var(--signal-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Rodapé ("Jazzmin version X.Y.Z") — vem hardcoded em `admin/base.html` do
   Jazzmin (`{% get_jazzmin_version %}` dentro do próprio `{% block footer %}`,
   sem nenhuma flag em JAZZMIN_SETTINGS pra desligar). Não dá pra sobrescrever
   só essa linha sem duplicar o `admin/base.html` inteiro do Jazzmin num
   `templates/admin/base.html` nosso — e isso não daria nem pra fazer via
   `{% extends %}`, já que `templates/` do projeto tem prioridade sobre os
   templates de qualquer app (ver TEMPLATES em inspector/settings.py), então um
   `admin/base.html` nosso viraria a ÚNICA resolução desse nome e um
   `{% extends "admin/base.html" %}` dentro dele entraria em recursão infinita.
   Mesma solução já usada pro link do logo da sidebar (ver `admin_loading.js`):
   escondido via CSS em vez de reescrever o template inteiro. `!important`
   necessário pra vencer as classes utilitárias `d-none d-sm-inline` do
   Bootstrap, que já vêm com `!important` embutido. */
.app-footer .float-end {
  display: none !important;
}

/* --- Gráficos do painel de indicadores: altura fixa e controlada, em vez de
   deixar o Chart.js esticar o canvas pelo aspect-ratio padrão --- */
.chart-box {
  position: relative;
  height: 230px;
  width: 100%;
}

.chart-box-sm {
  height: 200px;
}

.chart-box-donut {
  height: 230px;
  max-width: 320px;
  margin: 0 auto;
}

.chart-box-wide {
  height: 260px;
}

/* --- Overlay de loading ao navegar (ver admin_loading.js) --- */
#admin-loading-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(255, 255, 255, 0.7);
  align-items: center;
  justify-content: center;
}

#admin-loading-overlay.is-active {
  display: flex;
}

#admin-loading-overlay .admin-loading-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid rgba(0, 149, 79, 0.2);
  border-top-color: var(--signal-green);
  border-radius: 50%;
  animation: admin-loading-spin 0.7s linear infinite;
}

@keyframes admin-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Tela de espera da geração assíncrona de sugestão (2026-10-16, ver
   templates/admin/agents/generationjob/status.html) — mesmo visual do
   spinner acima, mas um elemento normal da página (não um overlay fixo por
   cima de tudo), porque aqui ELE é o conteúdo principal da tela. */
.signal-job-spinner {
  width: 48px;
  height: 48px;
  border: 5px solid rgba(0, 149, 79, 0.2);
  border-top-color: var(--signal-green);
  border-radius: 50%;
  animation: admin-loading-spin 0.8s linear infinite;
  margin: 0 auto 1.25rem;
}

.signal-job-status-card {
  text-align: center;
  padding: 3rem 1.5rem;
}

.signal-job-status-text {
  color: var(--signal-heading);
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 0.35rem;
}

.signal-job-status-hint {
  color: #8890a0;
  font-size: 0.85rem;
  margin: 0;
}

/* Texto rotativo de etapas durante "running" (generation_job_status.js) —
   transição suave entre frases em vez de trocar abruptamente, pra reforçar
   a sensação de "algo está acontecendo" mesmo sendo cosmético. */
@keyframes signal-job-step-fade {
  0% { opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; }
}

[data-job-running-text] {
  animation: signal-job-step-fade 4s ease-in-out infinite;
}

/* --- DataTables: estilo inspirado no AdminDek (demo.dashboardpack.com/admindek-html)
   — cabeçalho discreto em caixa alta, linhas mais espaçadas, paginação em bolhas
   redondas com destaque sólido na página atual, em vez do visual padrão do
   plugin. Classes `dt-*`/`page-item`/`page-link` vêm do próprio DataTables +
   adaptador Bootstrap5 (ver dataTables.bootstrap5.min.js), não são nossas. */
.dt-container {
  font-size: 0.875rem;
  /* Cartão cinza envolvendo busca/paginação/tabela — estilo
     preview.colorlib.com/theme/bootstrap/css-table-15 (linhas como cartões
     brancos flutuantes sobre um fundo neutro, em vez de um grid convencional). */
  background: var(--signal-bg);
  border: 1px solid var(--signal-border);
  border-radius: 10px;
  padding: 0.85rem;
}

.dt-container .dt-length .form-select,
.dt-container .dt-search .form-control {
  border-radius: 8px;
  border-color: rgba(0, 0, 0, 0.1);
}

.dt-container .dt-search .form-control {
  min-width: 220px;
}

/* `border-spacing` cria o espaçamento entre as linhas — precisa de
   `border-collapse: separate` (o padrão do Bootstrap é `collapse`), senão as
   linhas ficam coladas e o efeito de "cartão" flutuante some. */
table.dataTable {
  border-collapse: separate;
  border-spacing: 0 8px;
}

/* Antes o cabeçalho não tinha fundo/borda própria — só texto discreto direto
   sobre o cinza do `.dt-container`, a mesma cor do "vão" entre as linhas. Com
   badges coloridos nas colunas (fonte/tipo/projeto/etc.), ficou fácil o olho
   confundir onde o cabeçalho termina e a primeira linha de dado começa. A
   barra de fundo + borda inferior abaixo criam uma separação clara sem
   recorrer a cor forte — só contraste neutro (cinza) entre cabeçalho e dado. */
table.dataTable > thead {
  background: #eef1f4;
}

table.dataTable > thead > tr > th {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #5b6472;
  border-bottom: 2px solid var(--signal-border) !important;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

table.dataTable > thead > tr > th:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  padding-left: 1rem;
}

table.dataTable > thead > tr > th:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  padding-right: 1rem;
}

/* Linha de grade bem suave entre colunas — só o suficiente pra guiar o olho
   na leitura de uma linha com várias colunas, sem voltar a parecer uma
   tabela "quadriculada" tradicional (o efeito de cartão flutuante continua
   valendo, essa borda é só vertical, entre colunas). */
table.dataTable > thead > tr > th:not(:last-child),
table.dataTable > tbody > tr > td:not(:last-child) {
  border-right: 1px solid var(--signal-border);
}

table.dataTable > tbody > tr {
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

table.dataTable > tbody > tr > td {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  vertical-align: middle;
  color: #454b57;
  border-top: none;
  border-bottom: none;
}

table.dataTable > tbody > tr > td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  padding-left: 1rem;
}

table.dataTable > tbody > tr > td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  padding-right: 1rem;
}

table.dataTable.table-hover > tbody > tr:hover {
  background-color: rgba(0, 149, 79, 0.07);
  box-shadow: 0 2px 6px rgba(0, 149, 79, 0.14);
}

.dt-container .dt-info {
  color: #8890a0;
  font-size: 0.82rem;
  padding-left: 0.25rem;
}

/* Paginação em botões retangulares com borda — estilo signal-devops.dashboardpack.com
   (página atual com preenchimento sólido escuro), em vez das bolhas redondas
   usadas antes. */
.dt-container .pagination {
  gap: 4px;
}

.dt-container .pagination .page-link {
  border: 1px solid var(--signal-border);
  border-radius: 6px !important;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #454b57;
  background: #fff;
}

.dt-container .pagination .page-link:hover {
  border-color: var(--signal-green);
  color: var(--signal-green);
}

.dt-container .pagination .page-item.active .page-link {
  background: var(--signal-green-dark);
  border-color: var(--signal-green-dark);
  color: #fff;
  box-shadow: none;
}

.dt-container .pagination .page-item.disabled .page-link {
  color: #c7cbd4;
  background: #fff;
  border-color: var(--signal-border);
}

/* --- Datatables profissionais (qualquer tabela `.js-datatable` do projeto) ---
   Nasceu na timeline de interações do perfil do colaborador (tabela crua vira
   ilegível quando há centenas de linhas) e foi generalizado pra toda tabela do
   dashboard: badges coloridos em vez de texto puro em colunas categóricas,
   contador no cabeçalho do card, e um toolbar de filtro/limpeza reaproveitável
   via classes `.js-dt-filter`/`.js-dt-filter-clear` (ver `datatables_init.js`)
   em vez de reescrever o wiring em cada template. */
.signal-table-count {
  font-size: 0.8rem;
  font-weight: 600;
  color: #8890a0;
  background: var(--signal-bg);
  border: 1px solid var(--signal-border);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
}

.signal-dt-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.9rem;
  padding: 0.75rem 0.9rem;
  background: var(--signal-bg);
  border: 1px solid var(--signal-border);
  border-radius: 10px;
}

.signal-dt-filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.signal-dt-filter-group label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #8890a0;
  margin-bottom: 0;
}

.signal-dt-filter-group select {
  min-width: 220px;
}

.signal-when {
  font-family: var(--signal-mono);
  font-size: 0.82rem;
  color: #454b57;
  white-space: nowrap;
}

.signal-cell-subtext {
  font-size: 0.78rem;
  color: #8890a0;
  margin-top: 0.15rem;
}

/* Badge base — mesmo padrão "pílula" leve (fundo claro + texto colorido) em
   qualquer coluna categórica (Sistema/Ação/Estado/Tipo/...). `data-source`/
   `data-category` (abaixo) são paletas específicas da timeline; `data-tone`
   é a paleta genérica (verde/azul/vermelho/âmbar/roxo/cinza/teal) usada em
   todas as outras tabelas — não precisa de CSS novo por página, só escolher
   o tom certo no template. */
.signal-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  background: #eef1f4;
  color: #5b6472;
}

.signal-badge i {
  font-size: 0.75rem;
}

.signal-badge--source[data-source="redmine"] { background: rgba(220, 38, 38, 0.1); color: #b91c1c; }
.signal-badge--source[data-source="github"] { background: rgba(36, 41, 47, 0.09); color: #24292f; }
.signal-badge--source[data-source="bookstack"] { background: rgba(14, 165, 233, 0.12); color: #0369a1; }
.signal-badge--source[data-source="google_workspace"] { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.signal-badge--source[data-source="microsoft365"] { background: rgba(37, 100, 207, 0.12); color: #1d4ed8; }
.signal-badge--source[data-source="markey_ponto"] { background: rgba(139, 92, 246, 0.12); color: #6d28d9; }
.signal-badge--source[data-source="chatwoot"] { background: rgba(20, 184, 166, 0.14); color: #0f766e; }

.signal-badge--type[data-category="work"] { background: rgba(0, 149, 79, 0.12); color: #05713f; }
.signal-badge--type[data-category="note"] { background: rgba(99, 102, 241, 0.12); color: #4338ca; }
.signal-badge--type[data-category="time"] { background: rgba(217, 119, 6, 0.14); color: #92400e; }
.signal-badge--type[data-category="comms"] { background: rgba(2, 132, 199, 0.12); color: #0369a1; }
.signal-badge--type[data-category="resolution"] { background: rgba(13, 148, 136, 0.14); color: #0f766e; }
.signal-badge--type[data-category="share"] { background: rgba(217, 70, 239, 0.12); color: #a21caf; }
.signal-badge--type[data-category="risk"] { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }

.signal-badge[data-tone="green"] { background: rgba(0, 149, 79, 0.12); color: #05713f; }
.signal-badge[data-tone="blue"] { background: rgba(2, 132, 199, 0.12); color: #0369a1; }
.signal-badge[data-tone="red"] { background: rgba(220, 38, 38, 0.1); color: #b91c1c; }
.signal-badge[data-tone="amber"] { background: rgba(217, 119, 6, 0.14); color: #92400e; }
.signal-badge[data-tone="purple"] { background: rgba(139, 92, 246, 0.12); color: #6d28d9; }
.signal-badge[data-tone="teal"] { background: rgba(13, 148, 136, 0.14); color: #0f766e; }
.signal-badge[data-tone="gray"] { background: #eef1f4; color: #5b6472; }

/* --- Badge "hasheado" (nome de projeto/repositório) ---
   Nasceu na tabela "Tickets/PRs por sistema emissor" pra colorir o nome do
   projeto e é reaproveitado em qualquer coluna com um valor dinâmico e sem
   lista fixa (projeto do Redmine/GitHub, repositório do GitHub, etc.) — em
   vez de cadastrar cor manualmente, um hash estável do nome/label (`_project_hue()`
   em `reports/aggregation.py`, `_repo_hue()` em `dashboard/github_metrics.py`)
   escolhe sempre a mesma cor pro mesmo valor (`data-hue`, 0 a 6). Paleta
   deliberadamente diferente da paleta semântica (`data-tone` verde/vermelho/
   âmbar já usada pra sucesso/perigo/alerta noutras colunas) — aqui a cor não
   significa nada, só ajuda o olho a agrupar linhas do mesmo valor na coluna.
   `data-hue="0"` é o tom neutro, usado pro fallback ("Sem projeto identificado"
   e afins). */
.signal-badge--hashed {
  gap: 0.35rem;
}

.signal-badge--hashed[data-hue="0"] { background: #eef1f4; color: #475569; }
.signal-badge--hashed[data-hue="1"] { background: rgba(99, 102, 241, 0.12); color: #4338ca; }
.signal-badge--hashed[data-hue="2"] { background: rgba(139, 92, 246, 0.12); color: #6d28d9; }
.signal-badge--hashed[data-hue="3"] { background: rgba(217, 70, 239, 0.12); color: #a21caf; }
.signal-badge--hashed[data-hue="4"] { background: rgba(6, 182, 212, 0.14); color: #0e7490; }
.signal-badge--hashed[data-hue="5"] { background: rgba(13, 148, 136, 0.14); color: #0f766e; }
.signal-badge--hashed[data-hue="6"] { background: rgba(2, 132, 199, 0.12); color: #0369a1; }

/* --- Célula "Ticket/PR": número + título claramente separados ---
   Antes o número virava só o começo do link ("#284 — Protocolo..."), sem
   contraste algum com o título — lendo rápido, as duas informações se
   misturavam numa coisa só. O número agora é uma pílula monoespaçada
   destacada; o título continua com a cor de link normal, só sem sublinhado
   até o hover. */
.signal-ticket-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  text-decoration: none;
}

.signal-ticket-id {
  font-family: var(--signal-mono);
  font-weight: 700;
  font-size: 0.76rem;
  color: #05713f;
  background: rgba(0, 149, 79, 0.12);
  border-radius: 6px;
  padding: 0.15rem 0.45rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.signal-ticket-title {
  color: #216e39;
}

.signal-ticket-cell:hover .signal-ticket-title {
  text-decoration: underline;
}

/* --- Helper por coluna: mesmo ícone "?" com tooltip já usado nos cabeçalhos
   de card, só que dentro do próprio <th> — explica o que aquela coluna
   específica significa sem precisar de uma legenda separada fora da tabela. */
table.dataTable > thead > tr > th .signal-help-icon {
  margin-left: 0.35rem;
  font-size: 0.7rem;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  cursor: help;
}

/* --- Tema "Signal DevOps" (signal-devops.dashboardpack.com/dashboard) ---
   Escopado por baixo de `.signal-dashboard` (wrapper adicionado no `content`
   dos 5 templates de dashboard) de propósito: fonte monoespaçada e o redesenho
   de cards/badges/botões abaixo só valem para essas páginas, não para as telas
   padrão de cadastro/edição do Django Admin (que não foram desenhadas para
   esse visual e têm mais risco de quebrar com uma fonte tão condensada). */
.signal-dashboard,
.signal-dashboard input,
.signal-dashboard select,
.signal-dashboard textarea,
.signal-dashboard button,
.signal-dashboard .btn {
  font-family: var(--signal-mono);
}

.signal-dashboard {
  background: var(--signal-bg);
  padding: 1.25rem;
  margin: -1rem -1rem 0;
  border-radius: 10px;
}

.signal-dashboard h1,
.signal-dashboard h2,
.signal-dashboard h3,
.signal-dashboard h4 {
  font-weight: 700;
  color: var(--signal-heading);
  letter-spacing: -0.01em;
}

.signal-dashboard .card {
  border: 1px solid var(--signal-border);
  border-radius: 10px;
  box-shadow: none;
}

.signal-dashboard .card-header {
  background: transparent;
  border-bottom: 1px solid var(--signal-border);
  font-weight: 600;
  font-size: 0.85rem;
}

.signal-dashboard a {
  color: var(--signal-green);
}

.signal-dashboard code {
  font-family: var(--signal-mono);
  background: #eef4f1;
  border: 1px solid var(--signal-border);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  color: var(--signal-heading);
}

/* Badges em pill sólido, como os status "Online"/"Success"/"Active" da
   referência — cada variante semântica ganha uma cor cheia (não outline). */
.signal-dashboard .badge {
  border-radius: 999px;
  font-weight: 500;
  padding: 0.32em 0.75em;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.signal-dashboard .badge-success {
  background: var(--signal-green);
  color: #fff;
}

.signal-dashboard .badge-info {
  background: #0ea5e9;
  color: #fff;
}

.signal-dashboard .badge-danger {
  background: #ef4444;
  color: #fff;
}

.signal-dashboard .badge-secondary,
.signal-dashboard .badge-light {
  background: #eef0f2;
  color: #5b6472;
}

/* Botões: verde sólido como cor primária/de ação (ex: "Aprovar e enviar",
   período selecionado), no lugar do azul/indigo padrão do Bootstrap/AdminLTE. */
.signal-dashboard .btn-primary,
.signal-dashboard .btn-success,
.signal-dashboard .btn-dark {
  background-color: var(--signal-green);
  border-color: var(--signal-green);
  color: #fff;
}

.signal-dashboard .btn-primary:hover,
.signal-dashboard .btn-success:hover,
.signal-dashboard .btn-dark:hover {
  background-color: var(--signal-green-hover);
  border-color: var(--signal-green-hover);
  color: #fff;
}

.signal-dashboard .btn-outline-primary,
.signal-dashboard .btn-outline-dark {
  color: var(--signal-green);
  border-color: var(--signal-green);
  background: transparent;
}

.signal-dashboard .btn-outline-primary:hover,
.signal-dashboard .btn-outline-dark:hover {
  background: var(--signal-green);
  border-color: var(--signal-green);
  color: #fff;
}

/* KPI/estatística no topo dos dashboards — números grandes em mono-bold. */
.signal-dashboard .card h3,
.signal-dashboard .card h4 {
  font-weight: 700;
  color: var(--signal-heading);
}

/* --- Painel de KPIs configuráveis (dashboard.models.KPIDefinition) ---
   Rótulo discreto em caixa alta ("eyebrow", mesmo estilo do cabeçalho das
   DataTables) separando visualmente o painel de destaque da fileira de
   contagens existente ("Detalhes") — é essa separação que evita o painel
   novo competir com o resto da página em vez de complementar. */
.signal-section-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8890a0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.signal-kpi-card {
  border: 1px solid var(--signal-border);
  border-radius: 14px;
  box-shadow: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.signal-kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 149, 79, 0.1);
  color: var(--signal-green);
  font-size: 1rem;
  margin-bottom: 0.9rem;
}

/* Ícone de ajuda (?) usado em qualquer card/tile dos dashboards — não só nos
   KPIs configuráveis, mas nas fileiras de contagem, gráficos e tabelas
   (tooltip inicializado globalmente por admin_loading.js). Discreto por
   padrão, só destaca a cor no hover, pra não competir visualmente com o resto
   do card. */
.signal-help-icon {
  color: #c7cbd4;
  font-size: 0.85rem;
  cursor: help;
  margin-left: 0.35rem;
}

.signal-help-icon:hover {
  color: var(--signal-green);
}

/* Nos cabeçalhos de card (title + ajuda na mesma linha), alinha o ícone com o
   texto em vez de deixá-lo grudado no fim da linha quando o título quebra. */
.card-header .signal-help-icon {
  float: right;
  margin-top: 0.2rem;
}

.signal-kpi-value {
  font-family: var(--signal-mono);
  font-weight: 700;
  font-size: 1.9rem;
  color: var(--signal-heading);
  line-height: 1.1;
}

/* KPI sem dado suficiente no período (`has_data=False`) — o card continua
   aparecendo, mas o "—" fica em cor neutra/mais leve, pra não ser confundido
   com um valor real (ex: um "0" de verdade). */
.signal-kpi-value-empty {
  font-weight: 500;
  color: #c7cbd4;
}

.signal-kpi-unit {
  font-family: var(--signal-mono);
  font-weight: 500;
  font-size: 0.85rem;
  color: #8890a0;
}

.signal-kpi-title {
  margin-top: 0.3rem;
  font-weight: 600;
  font-size: 0.88rem;
  color: #454b57;
}

.signal-kpi-hint {
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: #8890a0;
}

/* Cards de destaque cross-fonte no /dashboard/ — os mesmos cards do painel por
   fonte, mas clicáveis (linkam pro dashboard daquela fonte específica). */
.signal-kpi-card-link:hover {
  box-shadow: 0 8px 20px -8px rgba(5, 16, 11, 0.18);
  transform: translateY(-1px);
  border-color: var(--signal-green);
}

.signal-kpi-card-link:hover .signal-kpi-hint {
  color: var(--signal-green-text);
}

/* --- Tela de login premium (split-screen) ---
   Duas colunas: painel de marca à esquerda (fundo claro com leve tingimento
   verde + logo real do SAPO + destaques do produto) e painel de formulário à
   direita (cartão branco flutuante). Estrutura HTML em
   templates/registration/base.html + templates/admin/login.html — aqui só o
   visual. Escopado por `body.login-page` de propósito: essas regras não devem
   vazar pra nenhuma outra tela do admin.
   Paleta própria (`--sapo-*`), extraída por amostragem de pixel da logomarca
   real (dashboard/static/dashboard/img/sapo-icon.png) em vez de reaproveitar
   o `--signal-green` genérico do resto do dashboard — deliberadamente
   desacoplado, pra essa tela poder ficar fiel à marca sem afetar nada fora
   dela. Claro de propósito (primeira versão usava um painel escuro em
   degradê e ficou pesada demais para uma tela de login) — o preto/verde
   profundo da logo fica só no "selo" do ícone, que é o elemento pequeno e
   pontual onde essa cor pertence, não no fundo inteiro da tela. */
:root {
  --sapo-green: #17a673;
  --sapo-green-bright: #22c48a;
  --sapo-green-deep: #0d7a52;
  --sapo-green-soft: rgba(23, 166, 115, 0.14);
  --sapo-bg-brand: #f0faf5;
}

body.login-page {
  margin: 0;
  background: #fff;
}

.inspector-auth-shell {
  width: 100%;
  min-height: 100vh;
  display: flex;
}

/* Painel de marca: fundo claro com tingimento verde suave + dois brilhos
   radiais discretos, mais a silhueta do sapo ampliada e quase invisível ao
   fundo (`.inspector-auth-brand-watermark`) — o tipo de camada extra que
   separa um formulário "cru" de uma tela de login com cara de produto pago,
   sem pesar a paleta. Escondido em telas pequenas (ver `d-none d-lg-flex` no
   template) para não competir com o formulário no mobile. */
.inspector-auth-brand {
  flex: 1 1 48%;
  position: relative;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  padding: 4rem 3.5rem;
  background:
    radial-gradient(circle at 12% 10%, rgba(23, 166, 115, 0.16) 0%, rgba(23, 166, 115, 0) 45%),
    radial-gradient(circle at 92% 100%, rgba(23, 166, 115, 0.12) 0%, rgba(23, 166, 115, 0) 42%),
    linear-gradient(160deg, var(--sapo-bg-brand) 0%, #e7f6ee 55%, #eef8f3 100%);
  color: var(--signal-heading);
  border-right: 1px solid var(--signal-border);
}

/* Grade de pontos bem discreta sobre o gradiente — textura, não decoração
   chamativa (opacidade baixa de propósito). */
.inspector-auth-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(13, 26, 32, 0.09) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.5;
  pointer-events: none;
}

/* Silhueta do sapo (só a mancha verde, olhos recortados — ver
   dashboard/static/dashboard/img/sapo-mark.png, gerado a partir da logo real
   isolando os pixels verdes) gigante e quase transparente no canto — a marca
   "assina" o fundo sem competir com o texto por cima. */
.inspector-auth-brand-watermark {
  position: absolute;
  right: -12%;
  bottom: -16%;
  width: 62%;
  max-width: 480px;
  opacity: 0.1;
  pointer-events: none;
  transform: rotate(-6deg);
}

.inspector-auth-brand-watermark img {
  width: 100%;
  display: block;
}

.inspector-auth-brand-inner {
  position: relative;
  z-index: 1;
  max-width: 440px;
}

/* "Selo" do ícone: a mesma logomarca (fundo escuro + sapo verde) usada como
   app icon, só que flutuando sobre o painel com sombra — como um tile de
   ícone premium, não um bloco de texto genérico. É o único lugar da tela que
   herda o preto/verde profundo original da logo, de propósito: um acento
   pontual, não o fundo inteiro. */
.inspector-auth-mark-tile {
  width: 68px;
  height: 68px;
  margin-bottom: 2.25rem;
  border-radius: 18px;
  box-shadow:
    0 16px 32px -14px rgba(13, 26, 32, 0.35),
    0 0 0 1px rgba(13, 26, 32, 0.06),
    0 0 20px 0 rgba(23, 166, 115, 0.2);
}

.inspector-auth-mark {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  display: block;
}

.inspector-auth-mark-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sapo-green-soft);
  border: 1px solid rgba(23, 166, 115, 0.3);
  font-family: var(--signal-mono);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--sapo-green-deep);
}

.inspector-auth-brand-title {
  font-family: var(--signal-mono);
  font-weight: 700;
  font-size: 2.5rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.85rem;
  color: var(--signal-heading);
}

/* Tagline em versalete espaçado, ecoando o lockup oficial da logomarca
   ("SISTEMA DE ACOMPANHAMENTO DE PRODUTIVIDADE OPERACIONAL" sob o wordmark
   SAPO) em vez de texto corrido comum. */
.inspector-auth-brand-tagline {
  font-family: var(--signal-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sapo-green-deep);
  margin: 0 0 2.75rem;
  line-height: 1.7;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--signal-border);
}

.inspector-auth-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.inspector-auth-feature-list li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.9rem;
  color: #33413c;
  line-height: 1.4;
}

.inspector-auth-feature-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(23, 166, 115, 0.3);
  color: var(--sapo-green-deep);
  font-size: 0.85rem;
}

.inspector-auth-brand-footer {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 3rem;
  font-family: var(--signal-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #7c8b84;
}

.inspector-auth-brand-footer-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sapo-green);
  box-shadow: 0 0 8px 1px rgba(23, 166, 115, 0.45);
}

/* Painel do formulário: fundo branco puro, cartão flutuante centralizado —
   sombra generosa em vez da borda fina usada no resto do admin, porque aqui o
   cartão é o único elemento da tela e precisa "flutuar" sobre o fundo. */
.inspector-auth-form-panel {
  flex: 1 1 52%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  background: #fff;
}

.inspector-auth-form-panel .login-box {
  width: 100%;
  max-width: 380px;
}

.inspector-auth-form-panel .login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  margin-bottom: 1.75rem;
  font-family: var(--signal-mono);
  font-size: 1.3rem;
  color: var(--signal-heading);
}

.inspector-auth-mark-sm {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  box-shadow: 0 10px 20px -8px rgba(10, 20, 24, 0.35);
}

.inspector-auth-mark-sm.inspector-auth-mark-fallback {
  background: var(--sapo-green-soft);
  border: 1px solid rgba(23, 166, 115, 0.3);
  color: var(--sapo-green-deep);
}

/* Fio de gradiente na marca do sapo no topo do cartão — um detalhe de acabamento
   comum em UI premium (o cartão "flutuando" ganha uma borda de cor da marca em
   vez de só sombra neutra). */
.login-card {
  position: relative;
  border: 1px solid var(--signal-border);
  border-radius: 20px;
  box-shadow: 0 32px 64px -20px rgba(10, 20, 24, 0.28);
  overflow: hidden;
}

.login-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sapo-green) 0%, var(--sapo-green-bright) 50%, var(--sapo-green) 100%);
}

.login-card-body {
  padding: 2.75rem 2.25rem 2.25rem;
}

.inspector-auth-form-header {
  margin-bottom: 1.85rem;
}

.inspector-auth-form-title {
  font-family: var(--signal-mono);
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--signal-heading);
  margin: 0 0 0.4rem;
}

.inspector-auth-form-subtitle {
  font-size: 0.88rem;
  color: #6b7280;
  margin: 0;
}

.inspector-auth-form .input-group-text {
  background: #fff;
  border-color: var(--signal-border);
  border-right: none;
  color: var(--sapo-green);
  width: 46px;
  justify-content: center;
}

.inspector-auth-form .input-group:focus-within .input-group-text {
  border-color: var(--sapo-green);
}

.inspector-auth-form .form-control {
  border-color: var(--signal-border);
  border-left: none;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.inspector-auth-form .form-control:focus {
  border-color: var(--sapo-green);
  box-shadow: none;
}

.inspector-auth-submit {
  background: linear-gradient(135deg, var(--sapo-green) 0%, var(--sapo-green-bright) 100%);
  border: none;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  box-shadow: 0 10px 22px -8px rgba(23, 166, 115, 0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.inspector-auth-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -8px rgba(23, 166, 115, 0.65);
}

.inspector-auth-link {
  font-size: 0.85rem;
  color: var(--sapo-green);
}

.inspector-auth-link:hover {
  color: var(--sapo-green-bright);
}

/* Assinatura discreta abaixo do cartão — pequeno ícone + wordmark, o mesmo
   lockup usado na logomarca oficial, reforçando a marca mais uma vez sem
   disputar atenção com o formulário. */
.inspector-auth-form-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 1.75rem 0 0;
  font-family: var(--signal-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #9aa3a0;
}

.inspector-auth-form-footer img {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

/* --- Tela inicial (core/views.py::home, "/" e "/admin/") ---
   Ao contrário da primeira versão, esta fica DENTRO do layout normal do admin
   (estende admin/base_site.html, igual a qualquer dashboard) — sidebar/menu do
   Jazzmin continuam visíveis, os cards aparecem no espaço de conteúdo
   (`.app-main` > `#main`). Dá pra navegar pelos cards ou pelo menu, à escolha. */
.inspector-home-intro {
  max-width: 880px;
  margin: 1rem auto 2.5rem;
  text-align: center;
}

.inspector-home-content {
  max-width: 1000px;
  margin: 0 auto;
}

.inspector-home-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.25rem;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--signal-green-dark);
  color: #fff;
  font-family: var(--signal-mono);
  font-weight: 700;
  font-size: 1.1rem;
}

.inspector-home-title {
  font-family: var(--signal-mono);
  font-weight: 700;
  font-size: 2rem;
  color: var(--signal-heading);
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

.inspector-home-tagline {
  color: #6b7280;
  font-size: 1rem;
  margin: 0 0 2.5rem;
}

.inspector-home-section {
  margin-bottom: 2.5rem;
}

.inspector-home-section:last-child {
  margin-bottom: 0;
}

.inspector-home-section-title {
  font-family: var(--signal-mono);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8890a0;
  margin: 0 0 1rem;
}

.inspector-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
  text-align: left;
}

/* Seção "Agentes de IA" (2026-10-19, a pedido do usuário: "uma cor
   diferente" em vez de dividir a tela em duas perguntando qual dashboard
   — decisão explícita: uma tela só, cards de agente só com acento visual
   próprio) — roxo/índigo, deliberadamente diferente do verde usado em
   TODO o resto do sistema (fontes de dado/produtividade), porque é uma
   categoria de informação diferente: acompanhamento de trabalho de um
   agente de IA, não indicador de produtividade de equipe. */
.inspector-home-card--agents .inspector-home-card-icon {
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
}

.inspector-home-card--agents .inspector-home-card-cta {
  color: #6366f1;
}

.inspector-home-card--agents:hover {
  border-color: #6366f1;
  box-shadow: 0 16px 32px -16px rgba(49, 46, 129, 0.22);
}

.inspector-home-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--signal-border);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.inspector-home-card:hover {
  box-shadow: 0 16px 32px -16px rgba(5, 16, 11, 0.16);
  transform: translateY(-2px);
  border-color: var(--signal-green);
  color: inherit;
}

.inspector-home-card-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(0, 149, 79, 0.12);
  color: var(--signal-green);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25em 0.65em;
  border-radius: 999px;
}

.inspector-home-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 149, 79, 0.1);
  color: var(--signal-green);
  font-size: 1.15rem;
  margin-bottom: 1rem;
}

.inspector-home-card-title {
  font-family: var(--signal-mono);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--signal-heading);
  margin-bottom: 0.4rem;
}

.inspector-home-card-desc {
  font-size: 0.85rem;
  color: #6b7280;
  line-height: 1.5;
  margin: 0 0 1rem;
  flex-grow: 1;
}

.inspector-home-card-cta {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--signal-green);
}

.inspector-home-card-cta i {
  margin-left: 0.3rem;
  transition: transform 0.15s ease;
}

.inspector-home-card:hover .inspector-home-card-cta i {
  transform: translateX(3px);
}

/* --- Changelist "premium" do admin (templates/admin/<app>/<model>/change_list.html) ---
   Componente reutilizável pra qualquer changelist com template dedicado (o
   primeiro foi Activity, `templates/admin/integrations/activity/change_list.html`;
   Collaborator segue o mesmo padrão) — cada template estende `admin/base_site.html`
   direto (não o `change_list.html` do Jazzmin) e adiciona a classe
   `signal-admin-premium` no `{% block bodyclass %}`, pra essas regras nunca
   vazarem pra changelists sem template próprio. Os pedaços reaproveitados das
   tags nativas do Django (date_hierarchy/result_list/pagination/admin_actions)
   ainda têm as MESMAS classes de sempre por dentro — só o que os envolve (o
   `.signal-admin-*` abaixo) é novo. */
body.signal-admin-premium .app-content {
  background: var(--signal-bg);
}

.signal-admin-page {
  width: 100%;
  padding: 0 0.5rem;
}

.signal-admin-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Botões de ação no cabeçalho — "Adicionar" (change_list_object_tools, só
   aparece se o model aceitar cadastro) na changelist, ou "History"/"View on
   site" (change_form_object_tools) no change_form — sempre empurrados pro
   fim da linha do cabeçalho. Os botões do change_form_object_tools vêm com
   `w-100` (pensados pra empilhar na barra lateral do change_form padrão do
   Jazzmin) — aqui neutralizamos isso pra ficarem lado a lado, do tamanho do
   próprio texto. */
.signal-admin-header-tools {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
}

.signal-admin-header-tools .btn {
  border-radius: 8px;
  width: auto !important;
}

.signal-admin-header-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 149, 79, 0.1);
  color: var(--signal-green);
  font-size: 1.2rem;
  flex-shrink: 0;
}

.signal-admin-title {
  font-family: var(--signal-mono);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--signal-heading);
  letter-spacing: -0.01em;
  margin: 0;
}

.signal-admin-subtitle {
  color: #6b7280;
  font-size: 0.88rem;
  margin: 0.2rem 0 0;
}

.signal-admin-stats {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.signal-admin-stat {
  background: #fff;
  border: 1px solid var(--signal-border);
  border-radius: 12px;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.signal-admin-stat-value {
  font-family: var(--signal-mono);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--signal-heading);
}

.signal-admin-stat-muted .signal-admin-stat-value {
  color: #8890a0;
}

.signal-admin-stat-danger .signal-admin-stat-value {
  color: #dc4747;
}

/* Tabela de tickets do dashboard de acompanhamento do agente (2026-10-17,
   ver agents/static/agents/js/agent_dashboard.js) — `table-layout: fixed`
   com largura por coluna fixa no <thead> do template é o que garante as
   DUAS instâncias Redmine (hoje), com conteúdo completamente diferente,
   renderizarem com a MESMA largura de coluna — sem isso, cada tabela
   calculava a própria largura a partir do próprio conteúdo (achado real:
   as duas tabelas ficavam visualmente inconsistentes entre si). A coluna
   Ticket (`#12345`) nunca quebra linha (`.text-nowrap` na própria célula,
   ver o `render` da coluna no JS) — é sempre curta, só precisa de espaço
   suficiente reservado, nunca comprimida pelo texto mais longo da coluna
   "Descrição" ao lado. */
.signal-agent-tickets-table {
  table-layout: fixed;
  width: 100%;
}

.signal-agent-tickets-table td,
.signal-agent-tickets-table th {
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.65rem 0.85rem;
  vertical-align: middle;
}

.signal-agent-tickets-table td.text-nowrap,
.signal-agent-tickets-table th:first-child {
  white-space: nowrap;
}

/* Filtros escondidos por padrão (2026-10-17, a pedido do usuário) — usa o
   `.collapse` nativo do Bootstrap 5 (já carregado globalmente pelo Jazzmin,
   ver agents/static/agents/js/agent_dashboard.js), então o único CSS
   próprio necessário aqui é o layout do painel em si e a seta que gira
   conforme o Bootstrap alterna `aria-expanded` no botão. */
.signal-ticket-filters {
  margin-bottom: 0.9rem;
}

.signal-ticket-filters-toggle .fa-chevron-down {
  transition: transform 0.15s ease;
}

.signal-ticket-filters-toggle[aria-expanded="true"] .fa-chevron-down {
  transform: rotate(180deg);
}

.signal-ticket-filters-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 0.75rem;
  padding: 0.9rem 1rem;
  background: var(--signal-bg);
  border: 1px solid var(--signal-border);
  border-radius: 10px;
}

.signal-ticket-filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 200px;
}

.signal-ticket-filter-field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--signal-heading);
}

.signal-ticket-filter-checkbox {
  display: flex;
  align-items: center;
  padding-bottom: 0.4rem;
}

.signal-ticket-filter-actions {
  display: flex;
  gap: 0.5rem;
  padding-bottom: 0.1rem;
}

/* Linha expansível de ticket (2026-10-19, a pedido do usuário: "clicarmos
   na row, expandiria uma div com mais detalhes... pra não poluir muito o
   datatable") — ver agents/static/agents/js/agent_dashboard.js, API
   `row().child()` nativa do DataTables. */
.signal-agent-tickets-table tbody tr {
  cursor: pointer;
}

.signal-agent-tickets-table tbody tr.signal-ticket-detail-row {
  cursor: default;
  background: var(--signal-bg);
}

.signal-row-toggle-icon {
  display: inline-block;
  width: 0.9em;
  color: #8890a0;
  font-size: 0.75em;
  transition: transform 0.15s ease;
}

.signal-row-expanded .signal-row-toggle-icon {
  transform: rotate(90deg);
}

/* Linha expansível "premium" (2026-10-19, terceira rodada — "vamos deixar
   um layout premium") — mesma linguagem visual de `.signal-form-section-
   header` (ícone circular + título, ver templates/admin/collaborators/
   collaborator/change_form.html) reaproveitada aqui, pra ficar consistente
   com o resto da família "signal" em vez de um bloco de texto cru. Usada
   tanto pela listagem de TicketSuggestion (`ticket_suggestion_row_detail.js`,
   o pedido original desta tela) quanto pelo dashboard do agente
   (`agent_dashboard.js`, que usa um subconjunto destas classes — por isso
   `.signal-ticket-detail-header*`/`.signal-ticket-detail-suggestion-header`
   só existem na versão nova, sem quebrar a mais simples do dashboard). */
@keyframes signal-ticket-detail-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.signal-ticket-detail {
  padding: 1.25rem 1.5rem;
  animation: signal-ticket-detail-fade-in 0.18s ease;
}

.signal-ticket-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--signal-border);
}

.signal-ticket-detail-header-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 149, 79, 0.1);
  color: var(--signal-green);
  font-size: 1rem;
}

.signal-ticket-detail-header-text {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.signal-ticket-detail-header-text .badge {
  align-self: flex-start;
}

.signal-ticket-detail-actions {
  margin-bottom: 1.1rem;
}

/* Selo de vínculo entre Redmines (2026-10-27) — reaproveita o mesmo roxo/
   índigo já usado em .signal-form-explainer/.inspector-home-card--agents,
   pra manter esse tom reservado pra "informação de sistema", nunca
   confundido com o verde de marca ou o vermelho de erro. */
.signal-cross-link-icon {
  color: #6366f1;
  font-size: 0.72em;
  margin-left: 0.3rem;
}

.signal-cross-link-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  background: #eef0fd;
  border: 1px solid #d6d9f7;
  border-radius: 8px;
  font-size: 0.82rem;
  color: #3a3f55;
}

.signal-cross-link-badge i.fa-link {
  color: #6366f1;
}

.signal-cross-link-badge a {
  font-weight: 600;
}

.signal-ticket-detail-title {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--signal-heading);
  margin: 0;
}

.signal-ticket-detail-description {
  white-space: pre-wrap;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #454b57;
  max-height: 220px;
  overflow-y: auto;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 1px solid var(--signal-border);
  border-radius: 10px;
}

.signal-ticket-detail-suggestion {
  margin-top: 1.1rem;
}

.signal-ticket-detail-section {
  margin-top: 0.25rem;
}

.signal-ticket-detail-suggestion-title,
.signal-ticket-detail-suggestion-header,
.signal-ticket-detail-section-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--signal-green);
  margin: 0 0 0.6rem;
}

.signal-ticket-detail-suggestion-text {
  white-space: pre-wrap;
  font-size: 0.87rem;
  line-height: 1.65;
  color: #333a45;
  max-height: 320px;
  overflow-y: auto;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid var(--signal-border);
  border-left: 3px solid var(--signal-green);
  border-radius: 0 10px 10px 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.signal-admin-stat-label {
  font-size: 0.78rem;
  color: #8890a0;
}

.signal-admin-section {
  margin-bottom: 1.25rem;
}

/* Hierarquia de datas (date_hierarchy = "occurred_at", vinda de
   {% date_hierarchy cl %} — mesmo HTML de sempre, `.date-hierarchy .btn`). */
.signal-admin-page .date-hierarchy.btn-group {
  gap: 0.35rem;
  flex-wrap: wrap;
}

.signal-admin-page .date-hierarchy .btn {
  border-radius: 8px !important;
  border: 1px solid var(--signal-border);
  font-size: 0.82rem;
}

.signal-admin-page .date-hierarchy .btn.active,
.signal-admin-page .date-hierarchy .btn-primary {
  background-color: var(--signal-green);
  border-color: var(--signal-green);
  color: #fff;
}

.signal-admin-page .date-hierarchy .btn-secondary {
  background: #fff;
  color: #454b57;
}

/* Filtros em pills (dado vem de core/templatetags/admin_extras.py::filter_choices,
   visual 100% nosso — sem depender do select2/dropdown do Jazzmin). */
.signal-admin-filters {
  background: #fff;
  border: 1px solid var(--signal-border);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.signal-admin-filter-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.signal-admin-filter-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8890a0;
  min-width: 90px;
}

.signal-admin-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.signal-admin-pill {
  display: inline-block;
  padding: 0.3em 0.85em;
  border-radius: 999px;
  border: 1px solid var(--signal-border);
  font-size: 0.8rem;
  color: #454b57;
  text-decoration: none;
  background: #fff;
  transition: all 0.15s ease;
}

.signal-admin-pill:hover {
  border-color: var(--signal-green);
  color: var(--signal-green);
  text-decoration: none;
}

.signal-admin-pill-active {
  background: var(--signal-green);
  border-color: var(--signal-green);
  color: #fff;
}

.signal-admin-pill-active:hover {
  color: #fff;
}

/* Busca */
.signal-admin-search {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.signal-admin-search form {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}

.signal-admin-search-box {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #fff;
  border: 1px solid var(--signal-border);
  border-radius: 10px;
  padding: 0.5rem 1rem;
}

.signal-admin-search-box i {
  color: #8890a0;
  font-size: 0.85rem;
}

.signal-admin-search-box input {
  border: none;
  outline: none;
  flex-grow: 1;
  font-size: 0.9rem;
  background: transparent;
}

.signal-admin-search-btn {
  background-color: var(--signal-green);
  border-color: var(--signal-green);
  color: #fff;
  border-radius: 10px;
  padding: 0.5rem 1.25rem;
  font-weight: 600;
}

.signal-admin-search-btn:hover {
  background-color: var(--signal-green-hover);
  border-color: var(--signal-green-hover);
  color: #fff;
}

/* `{% admin_actions %}` (Jazzmin's admin/actions.html) — sem estilo próprio
   no Jazzmin, renderizava como um <select> cru de navegador + botão colado
   em cima, destoando do resto da tela "premium" em volta (achado real
   revisando /models/agents/ticketsuggestion/, 2026-10-28). */
.signal-admin-actions {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--signal-border);
}

.signal-admin-actions .actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.signal-admin-actions .actions label {
  margin: 0;
}

.signal-admin-actions select {
  border: 1px solid var(--signal-border);
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  background: #fff;
  color: var(--signal-heading);
  min-width: 240px;
}

.signal-admin-actions .btn {
  border-radius: 8px !important;
  margin: 0 !important;
  font-size: 0.82rem;
  padding: 0.4rem 0.9rem;
}

.signal-admin-actions .action-counter {
  color: #8890a0;
  font-size: 0.82rem;
}

/* Badges da listagem (status/envio) — mesma família visual de
   `.signal-dashboard .badge` (pill sólido, cor da marca), mas escopado pro
   changelist do admin. A variante "soft" (fundo claro, texto colorido) é só
   pro badge de ENVIO — usar a mesma cor sólida do badge de STATUS (os dois
   "bg-success" do Bootstrap) fazia as duas colunas parecerem repetidas à
   primeira vista; a versão "soft" marca claramente que é um sinal
   secundário/de confirmação, não o status principal da linha. */
.signal-admin-table-card .badge {
  border-radius: 999px;
  font-weight: 500;
  padding: 0.34em 0.75em;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.signal-admin-table-card .badge.bg-success {
  background-color: var(--signal-green) !important;
  color: #fff;
}

.signal-admin-table-card .badge.bg-danger {
  background-color: #dc4747 !important;
  color: #fff;
}

.signal-admin-table-card .badge.bg-secondary {
  background-color: #eef0f2 !important;
  color: #5b6472;
}

.signal-admin-table-card .badge-soft-success {
  background-color: rgba(0, 149, 79, 0.12);
  color: var(--signal-green-dark);
  border: 1px solid rgba(0, 149, 79, 0.3);
}

/* "Aguardando envio" (achado real, 2026-10-15: `bg-warning text-dark` do
   Bootstrap/Jazzmin neste tema rendeu texto cinza sobre fundo laranja,
   contraste ruim/difícil de ler) — mesma família "soft" do badge de
   "Enviada" acima, só com a cor âmbar já usada noutros badges do projeto
   (`.signal-badge--type[data-category="time"]`) em vez de laranja sólido. */
.signal-admin-table-card .badge-soft-warning {
  background-color: rgba(217, 119, 6, 0.14);
  color: #92400e;
  border: 1px solid rgba(217, 119, 6, 0.3);
}

/* Tabela de resultados ({% result_list cl %} — mesmo HTML de sempre,
   #result_list.table.table-striped dentro de um .card). Mesmo efeito de
   "linhas como cartões flutuantes" já usado nas DataTables dos dashboards. */
.signal-admin-table-card .card {
  border: 1px solid var(--signal-border);
  border-radius: 14px;
  box-shadow: none;
  margin-bottom: 0;
}

.signal-admin-table-card #result_list {
  border-collapse: separate;
  border-spacing: 0 8px;
  font-size: 0.875rem;
}

/* Cabeçalho (2026-10-28, a pedido do usuário: "precisamos deixar mais
   destacado") — antes era texto cinza-claro (`#8890a0`) sobre fundo
   transparente, sem nenhuma separação visual do corpo da tabela além do
   espaçamento entre linhas; fácil de confundir com uma linha de dado comum
   num scroll rápido. Agora é uma faixa própria: fundo levemente tingido
   (`--signal-bg`, a mesma cor de fundo da página — contrasta com o branco
   das linhas do corpo), texto na cor de título (não mais cinza apagado) e
   uma borda inferior verde sólida de 2px — efeito "aba de painel" (cantos
   arredondados só em cima, bem reto embaixo contra a linha verde), não o
   "cartão flutuante" das linhas de dado (ver comentário logo abaixo). */
.signal-admin-table-card #result_list thead th {
  text-transform: uppercase;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--signal-heading);
  background: var(--signal-bg);
  border-bottom: 2px solid var(--signal-green) !important;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.signal-admin-table-card #result_list thead th:not(:last-child) {
  border-right: 1px solid var(--signal-border);
}

.signal-admin-table-card #result_list thead th:first-child {
  border-top-left-radius: 8px;
  padding-left: 1rem;
}

.signal-admin-table-card #result_list thead th:last-child {
  border-top-right-radius: 8px;
}

.signal-admin-table-card #result_list thead th a {
  color: var(--signal-heading);
}

/* Neutraliza o zebra-stripe do Bootstrap (`.table-striped`) — a separação
   entre linhas já vem do espaçamento + sombra, não de listras. Precisa zerar
   `--bs-table-bg-type` especificamente (não `--bs-table-accent-bg`): nesta
   versão do Bootstrap 5, a cor da linha usa a cadeia de fallback
   `var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)))`
   — `.table-striped` define `--bs-table-bg-type` direto, então ele nunca
   chega a olhar pro `--bs-table-accent-bg`. */
.signal-admin-table-card #result_list.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: initial;
}

.signal-admin-table-card #result_list tbody tr {
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.signal-admin-table-card #result_list tbody tr:hover {
  background-color: rgba(0, 149, 79, 0.06);
}

/* Linha expansível (2026-10-19, ver agents/static/agents/js/
   ticket_suggestion_row_detail.js) — toda linha com gatilho
   `.js-ticket-detail-data` fica clicável; a linha de detalhe em si (inserida
   logo depois) não é — nunca ganha o hover verde nem o cursor de clique. */
.signal-admin-table-card #result_list tbody tr:has(.js-ticket-detail-data) {
  cursor: pointer;
}

.signal-admin-table-card #result_list tbody tr.signal-ticket-detail-row {
  cursor: default;
  background: var(--signal-bg);
  box-shadow: none;
}

.signal-admin-table-card #result_list tbody tr.signal-ticket-detail-row:hover {
  background-color: var(--signal-bg);
}

.signal-admin-table-card #result_list tbody tr.signal-ticket-detail-row td {
  border-right: none;
}

.signal-admin-table-card #result_list tbody td,
.signal-admin-table-card #result_list tbody th {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  vertical-align: middle;
  color: #454b57;
  border-top: none;
  border-bottom: none;
}

.signal-admin-table-card #result_list tbody td:not(:last-child),
.signal-admin-table-card #result_list tbody th:not(:last-child) {
  border-right: 1px solid var(--signal-border);
}

.signal-admin-table-card #result_list tbody tr td:first-child,
.signal-admin-table-card #result_list tbody tr th:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  padding-left: 1rem;
}

/* Coluna de checkbox (seleção em massa) — o cabeçalho vem com a classe
   `djn-checkbox-select-all` (Jazzmin troca a classe original
   `action-checkbox-column` dentro do seu próprio
   admin/change_list_results.html — ver templatetags/jazzmin.py::header_class)
   enquanto a célula de cada linha continua com `action-checkbox` (essa parte
   ainda vem direto de `django.contrib.admin.templatetags.admin_list`). Como
   os dois tinham largura/padding diferentes por padrão, o checkbox do
   cabeçalho ficava fora do eixo dos checkboxes das linhas — aqui fixamos os
   dois na mesma largura/padding e centralizamos o input em ambos. */
.signal-admin-table-card #result_list .djn-checkbox-select-all,
.signal-admin-table-card #result_list .action-checkbox {
  width: 2.25rem;
  padding-left: 1rem !important;
  padding-right: 0 !important;
  text-align: center;
}

.signal-admin-table-card #result_list .djn-checkbox-select-all input,
.signal-admin-table-card #result_list .action-checkbox input {
  margin: 0;
  vertical-align: middle;
}

.signal-admin-table-card #result_list tbody tr td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  padding-right: 1rem;
}

/* Paginação ({% pagination cl %} — mesmo HTML de sempre) — mesmo estilo de
   botão retangular com borda já usado nas DataTables dos dashboards. */
.signal-admin-pagination {
  margin-top: 1rem;
}

.signal-admin-pagination .pagination .page-link,
.signal-admin-pagination .pagination a {
  border: 1px solid var(--signal-border);
  border-radius: 6px !important;
  color: #454b57;
}

.signal-admin-pagination .pagination .page-item.active .page-link,
.signal-admin-pagination .pagination a.active {
  background: var(--signal-green-dark);
  border-color: var(--signal-green-dark);
  color: #fff;
}

.signal-admin-pagination .dataTables_info {
  color: #8890a0;
  font-size: 0.82rem;
}

/* --- Change_form "premium" (templates/admin/<app>/<model>/change_form.html) ---
   Mesma família do change_list "premium" acima — o primeiro foi Collaborator,
   `templates/admin/collaborators/collaborator/change_form.html`. A moldura
   (header/card/rodapé de ações) é nossa; o conteúdo de dentro do
   `.signal-admin-form-card` continua sendo o HTML de sempre do Django/Jazzmin
   (fieldsets, os 3 inlines de identidade, autocomplete do `manager`) — só
   ganha um reset de espaçamento pra não competir com o `.card` que o Jazzmin
   já desenha por dentro (fieldset.html/tabular.html continuam com suas
   próprias classes `.card`/`.table`, agora dentro do nosso container). */
.signal-admin-form-errors {
  background: #fdf0f0;
  border: 1px solid #f0b8b8;
  border-radius: 12px;
  padding: 0.9rem 1.25rem;
  margin-bottom: 1.25rem;
  color: #9c3a3a;
}

.signal-admin-form-errors-title {
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.signal-admin-form-errors ul {
  margin: 0;
  padding-left: 1.1rem;
}

.signal-admin-form-card {
  background: #fff;
  border: 1px solid var(--signal-border);
  border-radius: 14px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

/* Fieldset "solto" (sem inline) dentro do card principal — Jazzmin's
   fieldset.html só cria um `.card` próprio quando `card=True` é passado (caso
   dos inlines, no `single.html`); o fieldset "General" do próprio model vem
   sem esse wrapper, então zeramos a margem que ele teria por padrão. */
.signal-admin-form-card > .form-group:first-child {
  margin-top: 0;
}

/* Cards dos inlines (Redmine/GitHub/BookStack identity) — mesmo raio/borda
   do resto do painel, com um respiro entre eles. */
.signal-admin-form-card .card {
  border: 1px solid var(--signal-border);
  border-radius: 12px;
  box-shadow: none;
  margin-top: 1.25rem;
}

.signal-admin-form-card .card:first-child {
  margin-top: 1.5rem;
}

.signal-admin-form-card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--signal-border);
  font-weight: 600;
  color: var(--signal-heading);
}

.signal-admin-form-card table.table {
  margin-bottom: 0;
}

.signal-admin-form-submit {
  background: #fff;
  border: 1px solid var(--signal-border);
  border-radius: 14px;
  padding: 1rem 1.25rem;
}

/* --- Inlines / campos relacionados: base compartilhada ---
   Ao contrário do resto deste arquivo, as regras abaixo NÃO são escopadas em
   `.signal-admin-*` de propósito — valem pra QUALQUER change_form do admin,
   inclusive os ~10 models que ainda não têm um `templates/admin/<app>/<model>/
   change_form.html` próprio (RedmineInstance, GitHubConfig, BookStackConfig,
   GoogleWorkspaceConfig, MarkeyPontoConfig, KPIDefinition, KnowledgeEntry,
   APIKey, SMTPConfig, LLMProviderConfig, EmbeddingConfig...). Esse arquivo CSS
   já carrega em toda página que estende `admin/base_site.html` (é o
   `custom_css` do JAZZMIN_SETTINGS) — ou seja, em toda tela do admin, com ou
   sem template dedicado — então dá pra melhorar todas de uma vez só aqui.

   Jazzmin só encapsula um inline num `.card`/`.card-header` quando o
   ModelAdmin do model "pai" define `fieldsets` (ver `has_fieldsets` em
   `jazzmin/includes/single.html`) — nenhum dos nossos ModelAdmins com inlines
   define isso hoje, então o inline sai cru: só um `<h6>` solto + uma
   `table.table.table-hover` do Bootstrap, sem respiro nem moldura (era esse o
   contraste visível em .../collaborators/collaborator/<id>/change/, entre o
   cabeçalho custom no topo e as seções de identidade logo abaixo). As regras
   seguintes estilizam a estrutura real do HTML do inline
   (`.js-inline-admin-formset`/`.tabular`/`fieldset.module`) direto, cobrindo
   os dois casos — com ou sem `.card` do Jazzmin por fora — em vez de depender
   de `fieldsets` estar configurado em cada admin.py. */

/* Título do inline quando NÃO vem encapsulado num `.card` (o `<h6>` solto
   antes do grupo, ver `jazzmin/includes/single.html`) — vira uma seção com
   tipografia e espaçamento iguais ao resto do painel, em caixa alta como os
   cabeçalhos de tabela do DataTables. */
h6:has(+ .js-inline-admin-formset) {
  font-family: var(--signal-mono);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--signal-heading);
  margin: 1.75rem 0 0.6rem;
}

.js-inline-admin-formset + h6:has(+ .js-inline-admin-formset) {
  margin-top: 2rem;
}

/* Moldura do grupo em si — mesma receita de cartão usada no resto do painel
   (raio/borda de `.signal-admin-form-card`), aplicada direto no
   `fieldset.module` pra funcionar independente de já existir ou não um
   `.card` por fora. */
.js-inline-admin-formset .tabular.inline-related fieldset.module {
  border: 1px solid var(--signal-border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

/* Caso já exista um `.card` por fora (model com `fieldsets` configurado): a
   moldura externa já resolve, então a interna só duplicaria borda — reseta
   pra não empilhar "cartão dentro de cartão". */
.card-body .js-inline-admin-formset .tabular.inline-related fieldset.module {
  border: none;
  border-radius: 0;
}

.js-inline-admin-formset .tabular.inline-related table {
  margin-bottom: 0;
}

.js-inline-admin-formset .tabular.inline-related table thead th {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #8890a0;
  background: var(--signal-bg);
  border-bottom: 1px solid var(--signal-border);
  padding: 0.6rem 0.75rem;
  white-space: nowrap;
}

.js-inline-admin-formset .tabular.inline-related table tbody td {
  padding: 0.5rem 0.75rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--signal-border);
}

.js-inline-admin-formset .tabular.inline-related table tbody tr:last-child td {
  border-bottom: none;
}

.js-inline-admin-formset .tabular.inline-related table tbody tr:hover {
  background: var(--signal-bg);
}

/* Coluna "original" — ícones de editar/ver a linha já salva (lápis/olho) ou o
   "+" verde da linha vazia de adicionar — viram um botão discreto de 26px em
   vez de ícones soltos coladinhos ao texto. */
.js-inline-admin-formset .tabular.inline-related td.original {
  width: 1%;
  white-space: nowrap;
}

.js-inline-admin-formset .tabular.inline-related td.original a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  color: #8890a0;
}

.js-inline-admin-formset .tabular.inline-related td.original a:hover {
  background: var(--signal-bg);
  color: var(--signal-heading);
}

.js-inline-admin-formset .tabular.inline-related td.original i.text-success {
  color: var(--signal-green) !important;
}

/* Linha "add another" (injetada via JS, `admin/js/inlines.js`) — texto verde
   da marca com respiro e fundo levemente destacado, em vez do link cru colado
   na borda da tabela. */
.js-inline-admin-formset .tabular.inline-related tr.add-row td {
  padding: 0.6rem 0.75rem;
  background: var(--signal-bg);
  border-bottom: none;
}

.js-inline-admin-formset .tabular.inline-related tr.add-row a {
  color: var(--signal-green-text);
  font-weight: 600;
  font-size: 0.85rem;
}

.js-inline-admin-formset .tabular.inline-related td.delete {
  text-align: center;
}

.js-inline-admin-formset .tabular.inline-related td.delete input {
  margin: 0;
}

/* --- Campos de formulário desenhados à mão ---
   Usado quando um change_form sobrescreve `signal_form_fields` (ver
   templates/admin/signal/change_form_base.html) com HTML próprio em vez do
   loop genérico de fieldset — cada campo é renderizado individualmente
   (`{{ f.<campo> }}`) dentro de um `.signal-form-field`, agrupados em
   `.signal-form-section`. Os widgets em si (input/select/checkbox) continuam
   sendo os mesmos do Django/Jazzmin (classes `vTextField`/`vCheckboxLabel`
   etc.) — só o layout ao redor é nosso. Ver
   templates/admin/collaborators/collaborator/change_form.html pro primeiro
   uso. */
.signal-form-section {
  margin-bottom: 1.75rem;
}

.signal-form-section:last-child {
  margin-bottom: 0;
}

.signal-form-section-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--signal-border);
}

.signal-form-section-header i {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 149, 79, 0.1);
  color: var(--signal-green);
  font-size: 0.9rem;
}

.signal-form-section-header h2 {
  font-family: var(--signal-mono);
  font-weight: 700;
  font-size: 1rem;
  color: var(--signal-heading);
  margin: 0 0 0.15rem;
}

.signal-form-section-header p {
  font-size: 0.85rem;
  color: #8890a0;
  margin: 0;
}

.signal-form-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.1rem 1.25rem;
}

.signal-form-field {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.signal-form-field-half {
  grid-column: span 3;
}

.signal-form-field-wide {
  grid-column: span 6;
}

.signal-form-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--signal-heading);
}

/* Tela de revisão de uma TicketSuggestion (2026-10-19, a pedido do usuário:
   "página analisada com frequência... deve ser agradável ler") — três
   mudanças: (1) os fatos curtos (agente/ticket/criada em) viram uma tira
   compacta de uma linha, não uma grade de campos; (2) o texto da IA em si
   ganha tipografia de leitura de verdade (linha mais alta, largura
   confortável) em vez do mesmo tamanho pequeno de todo o resto da tela;
   (3) o que é só evidência de apoio (fontes consultadas, custo, memória,
   envio) fica escondido por padrão num <details> nativo — sem JS — igual
   ao "Ver texto extraído" de um anexo já usado nesta mesma tela, só que
   pra uma seção inteira agora. */
.signal-ticket-identity-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--signal-border);
  font-size: 0.85rem;
  color: #454b57;
}

.signal-ticket-identity-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.signal-ticket-identity-item i {
  color: var(--signal-green);
  font-size: 0.8rem;
}

.signal-suggestion-reading-text {
  white-space: pre-wrap;
  font-size: 0.96rem;
  line-height: 1.75;
  color: #2b3038;
  padding: 1.25rem 1.4rem;
  background: #fff;
  border: 1px solid var(--signal-border);
  border-left: 3px solid var(--signal-green);
  border-radius: 0 12px 12px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Qualquer texto livre (humano ou IA) exibido como somente leitura num
   campo "wide" — "Resposta final" já enviada, "Instrução adicional usada"
   (2026-10-19, a pedido do usuário: "hoje está corrido e ficou feio") —
   antes virava um `<p>`/`<div style="...">` cru sem `white-space: pre-wrap`
   em pelo menos um desses casos, nunca quebrando linha onde o texto
   original quebrava. */
.signal-form-readonly-text {
  white-space: pre-wrap;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #333a45;
  padding: 0.85rem 1rem;
  background: var(--signal-bg);
  border: 1px solid var(--signal-border);
  border-radius: 8px;
}

.signal-form-section-action {
  background: var(--signal-bg);
  border: 1px solid var(--signal-border);
  border-left: 3px solid var(--signal-green);
  border-radius: 10px;
  padding: 1.25rem 1.5rem 1.5rem;
}

.signal-details-section {
  margin-bottom: 1.75rem;
}

.signal-details-section:last-child {
  margin-bottom: 0;
}

.signal-details-section summary {
  cursor: pointer;
  list-style: none;
}

.signal-details-section summary::-webkit-details-marker {
  display: none;
}

.signal-details-section summary .signal-form-section-header {
  align-items: center;
}

.signal-details-chevron {
  margin-left: auto;
  flex: 0 0 auto;
  color: #8890a0;
  transition: transform 0.15s ease;
}

.signal-details-section[open] .signal-details-chevron {
  transform: rotate(180deg);
}

.signal-form-field.has-errors input,
.signal-form-field.has-errors select,
.signal-form-field.has-errors textarea {
  border-color: #c25a5a !important;
}

.signal-form-field ul.errorlist {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #c25a5a;
  font-size: 0.78rem;
}

.signal-form-help {
  margin: 0;
  font-size: 0.78rem;
  color: #8890a0;
}

@media (max-width: 640px) {
  .signal-form-grid {
    grid-template-columns: 1fr;
  }

  .signal-form-field,
  .signal-form-field-half,
  .signal-form-field-wide {
    grid-column: span 1;
  }
}

/* Preferências booleanas como linha de "toggle" (título + descrição à
   esquerda, switch à direita) em vez do checkbox cru + label do Django —
   a `<label>` envolve o próprio input, então clicar em qualquer parte da
   linha já marca/desmarca. */
.signal-form-toggles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (max-width: 640px) {
  .signal-form-toggles {
    grid-template-columns: 1fr;
  }
}

.signal-form-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--signal-border);
  border-radius: 10px;
  cursor: pointer;
}

.signal-form-toggle:hover {
  background: var(--signal-bg);
}

.signal-form-toggle-title {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--signal-heading);
}

.signal-form-toggle-desc {
  display: block;
  font-size: 0.78rem;
  color: #8890a0;
  margin-top: 0.15rem;
}

/* Caixa explicativa pra "o que esse campo realmente faz no sistema" — tom
   diferente de verde (ação)/vermelho (erro) de propósito, pra não competir
   visualmente com eles; reaproveita o roxo/índigo já usado no card
   "Agentes de IA" da tela inicial (ver .inspector-home-card--agents em vez
   de inventar uma cor nova). Usada em auth/user/change_form.html (2026-10-23,
   a pedido do usuário: explicar "equipe"/"superusuário" em termos concretos
   do projeto, não só o help_text genérico do Django). */
.signal-form-explainer {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 1rem 1.15rem;
  background: #eef0fd;
  border: 1px solid #d6d9f7;
  border-left: 3px solid #6366f1;
  border-radius: 0 10px 10px 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #3a3f55;
}

.signal-form-explainer i {
  flex: 0 0 auto;
  color: #6366f1;
  font-size: 0.95rem;
  margin-top: 0.15rem;
}

.signal-form-explainer strong {
  color: var(--signal-heading);
}

.signal-form-explainer ul {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.signal-form-explainer code {
  background: rgba(99, 102, 241, 0.12);
  color: #4338ca;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  font-family: var(--signal-mono);
  font-size: 0.76rem;
}

.signal-form-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 40px;
  height: 22px;
  margin: 0;
  border-radius: 999px;
  background: #d7dde0;
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease;
}

.signal-form-toggle input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}

.signal-form-toggle input[type="checkbox"]:checked {
  background: var(--signal-green);
}

.signal-form-toggle input[type="checkbox"]:checked::before {
  transform: translateX(18px);
}

/* Utilitários de número (2026-10-17) — algarismos tabulares (não "dançam"
   de largura entre linhas de uma tabela/lista de valores) e fonte mono pra
   identificadores técnicos (nome de modelo de LLM etc.), reutilizável em
   qualquer tela, não só a central de custo abaixo. */
.num {
  font-variant-numeric: tabular-nums;
}

.mono {
  font-family: var(--signal-mono);
  font-size: 0.85em;
}

/* Dashboard da central de custo de LLM (2026-10-17, ver
   templates/admin/llmservices/llmusagelog/change_list.html) — KPIs com
   comparativo %/sparkline, gráfico de tendência e composição por origem/
   provedor/modelo, tudo em SVG desenhado à mão (sem biblioteca de gráfico
   nova, mesma disciplina de "sem dependência externa" do resto do
   projeto). Pensado pra ser reutilizável por outra tela que precise do
   mesmo tipo de card no futuro — nomes genéricos (`signal-cost-*`), não
   amarrados ao model `LLMUsageLog`. */
.signal-cost-dashboard {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 1.5rem;
}

.signal-cost-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 900px) {
  .signal-cost-kpi-grid,
  .signal-cost-trend-grid {
    grid-template-columns: 1fr;
  }
}

.signal-cost-kpi-card,
.signal-cost-chart-card {
  background: #fff;
  border: 1px solid var(--signal-border);
  border-radius: 12px;
  padding: 16px 18px;
}

.signal-cost-kpi-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.signal-cost-kpi-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 8px;
}

.signal-cost-kpi-value {
  font-family: var(--signal-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--signal-heading);
  letter-spacing: -0.01em;
}

.signal-cost-sparkline {
  overflow: visible;
  flex-shrink: 0;
}

.signal-cost-kpi-delta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.signal-cost-delta-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
}

.signal-cost-delta-up {
  background: #ecfdf3;
  color: #067a46;
}

.signal-cost-delta-down {
  background: #fef2f2;
  color: #b42318;
}

.signal-cost-delta-neutral {
  background: #f3f4f6;
  color: #4b5563;
}

.signal-cost-kpi-caption {
  font-size: 11.5px;
  color: #9aa1ac;
}

.signal-cost-kpi-n {
  margin-top: 6px;
  font-size: 10.5px;
  color: #c1c6cf;
}

.signal-cost-trend-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

.signal-cost-chart-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--signal-heading);
}

.signal-cost-chart-subtitle {
  font-size: 11.5px;
  color: #9aa1ac;
  margin-top: 2px;
}

.signal-cost-trend-svg {
  width: 100%;
  height: 150px;
  margin-top: 10px;
}

.signal-cost-chart-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #aeb4c0;
  margin-top: 2px;
}

.signal-cost-stacked-bar {
  display: flex;
  width: 100%;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  margin-top: 16px;
}

.signal-cost-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.signal-cost-legend-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.signal-cost-legend-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #374151;
}

.signal-cost-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}

.signal-cost-legend-value {
  font-weight: 700;
  color: var(--signal-heading);
}

.signal-cost-legend-pct {
  color: #9aa1ac;
  font-weight: 500;
}

.signal-cost-bar-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.signal-cost-bar-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 5px;
}

.signal-cost-bar-header span:first-child {
  font-weight: 600;
  color: var(--signal-heading);
}

.signal-cost-bar-header .num {
  font-weight: 700;
  color: var(--signal-heading);
}

.signal-cost-bar-track {
  width: 100%;
  height: 8px;
  background: #eef0f3;
  border-radius: 4px;
  overflow: hidden;
}

.signal-cost-bar-fill {
  height: 100%;
  border-radius: 4px;
}

.signal-cost-empty {
  margin-top: 16px;
  font-size: 12.5px;
  color: #9aa1ac;
}