/**
 * Ajustes próprios que não cabem em extensoes.css por serem específicos de
 * UMA tela ou grupo de telas, não de um componente reusável: matriz de
 * permissões, densidade dos controles do Bootstrap, kanban, mensagens
 * flash. Carrega por último — ver a cascata em cada layout (fonts →
 * bootstrap.min.css → fontawesome → extensoes.css → painel.css) — então
 * tudo aqui vence por ordem de origem.
 *
 * Os TOKENS (:root) moraram aqui antes e foram para extensoes.css: é a
 * única das duas folhas que os quatro layouts carregam, incluindo
 * erro.php, que não pode depender de nada que possa ter causado o erro.
 * `painel.css` continua de fora do layout de erro de propósito.
 */

:root {
  --gestor-primaria: #667eea;
  --gestor-secundaria: #764ba2;
}

/* Marca da aplicação, usada no dashboard (Sistema/Painel/views/inicio.php). */
.bg-gestor-gradiente {
  background: linear-gradient(135deg, var(--gestor-primaria) 0%, var(--gestor-secundaria) 100%);
}

/* --- Matriz de permissões ---------------------------------------------------
 * Larga e alta: cabeçalho e coluna do módulo ficam fixos para não se
 * perder de vista qual linha/coluna se está marcando. */
.matriz-permissoes { max-height: 65vh; overflow: auto; }
.matriz-permissoes thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-surface); }
.matriz-permissoes tbody th { position: sticky; left: 0; z-index: 1; background: var(--bg-surface); }
.matriz-permissoes .linha-modulo > * { background: var(--bg-surface-secondary); }
.matriz-permissoes .nivel-1 { padding-left: 1.5rem; }
.matriz-permissoes .nivel-2 { padding-left: 3rem; }
.matriz-permissoes .nivel-3 { padding-left: 4.5rem; }

/* --- Formulários -------------------------------------------------------- */
.campo-obrigatorio::after { content: " *"; color: var(--red); }

/* --- Densidade dos controles -------------------------------------------
 * Painel de muitos cadastros: cabe mais linha de tabela e mais campo de
 * formulário na mesma altura sem cortar a leitura. Afeta só os controles
 * de TAMANHO PADRÃO — quem já usa -sm não muda. */
.form-control,
.form-select,
.input-group-text {
  padding: .375rem .75rem;
  font-size: .8125rem;
}
.form-select { padding-right: 2.25rem; background-position: right .75rem center; }
.form-label,
.form-check-label { font-size: .8125rem; }
.form-label { margin-bottom: .25rem; }
.table > :not(caption) > * > * { padding: .5rem .75rem; font-size: .8125rem; }

/* --- Largura dos campos --------------------------------------------------
 * .form-control/.form-select são width:100% por padrão — a coluna do grid
 * decide quanto o campo ocupa. O que não faz sentido esticar até a borda
 * do card, mesmo numa coluna larga, são os tipos com teto de tamanho
 * natural: teclado numérico, data, hora. */
input[type="date"],
input[type="month"],
input[type="time"],
input[type="number"] {
  max-width: 11rem;
}

/* --- Quadro kanban -------------------------------------------------------
 * A coluna inteira é zona de soltura, mesmo vazia. */
.kanban-column-body { min-height: 3rem; }
.kanban-card.arrastando { opacity: .5; }

/* --- Mensagens flash ------------------------------------------------------
 * Sobrepostas ao conteúdo, centralizadas no topo (position: fixed) — um
 * alerta aparecendo ou o temporizador removendo ele (painel.js) não
 * empurra o que vem depois na página.
 *
 * Correção de legibilidade: a versão anterior pintava o fundo com
 * var(--*-lt) — que em extensoes.css vale rgba(cor, 0.5)/(0.6 no escuro),
 * uma cor VIVA translúcida, não um tom claro — sobre um elemento
 * position:fixed, então o conteúdo da página por baixo atravessava o
 * texto. A cor do texto também era hex cravado (#1a8a32 e companhia),
 * presa ao claro mesmo com o fundo mudando de opacidade no escuro. Duas
 * causas empilhadas, o mesmo defeito nos dois temas.
 *
 * A correção usa tokens NOVOS e OPACOS, só para este componente — não
 * mexe em --*-lt (usado por badge/estatística/aba ativa em toda a tela;
 * corrigir a raiz mudaria a aparência do painel inteiro, fora do escopo
 * deste ajuste). Fundo = a mesma superfície de um card (var(--bg-surface),
 * sempre opaca nos dois temas), faixa lateral colorida + ícone coloridos
 * pela SEVERIDADE, texto sempre var(--text) — nunca hex — e box-shadow
 * para separar a camada flutuante do conteúdo. */
.alertas-flash {
  position: fixed;
  top: 1rem;
  left: 50%;
  z-index: 1080;
  width: 100%;
  max-width: 32rem;
  padding: 0 1rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.alertas-flash .alert {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--alert-accent);
  box-shadow: var(--shadow-card);
  color: var(--text);
  transition: opacity .4s ease;
}
.alertas-flash .alert.saindo { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .alertas-flash .alert { transition: none; }
}
/* Só o ícone da MENSAGEM (dentro do .d-flex de flash.php), nunca o do
 * .btn-close: o "x" usa currentColor (extensoes.css) para ficar neutro,
 * herdando var(--text) do .alert acima — um seletor genérico ".icon"
 * pintaria os dois com a cor de severidade, close incluído. */
.alertas-flash .alert > .d-flex > .icon { color: var(--alert-accent); }
.alertas-flash .alert-success { --alert-accent: var(--green); }
.alertas-flash .alert-danger  { --alert-accent: var(--red); }
.alertas-flash .alert-warning { --alert-accent: var(--yellow); }
.alertas-flash .alert-info    { --alert-accent: var(--blue); }