/* MelonIA Chat — Console
   Ajustes residuais sobre Bootstrap 5.3.3

   =============================================================================
   COR DE DESTAQUE DO SISTEMA: violeta #667eea (IA / chat)
   Substitui o ciano padrão do Bootstrap na família .text-info / .bg-info /
   .border-info / .btn-outline-info.
   Padrão idêntico ao FileSync/MailSync/MelonIA — centraliza o override aqui
   e evita modificar cada template individualmente.

   Hover/active = #5a67d8 (10 % mais escuro).
   .bg-info usa texto branco (#fff) para atender WCAG AA em fundo violeta.
   ============================================================================= */

.text-info {
  color: #667eea !important;
}

.bg-info {
  background-color: #667eea !important;
  color: #fff !important;
}

.border-info {
  border-color: #667eea !important;
}

.btn-outline-info {
  --bs-btn-color:               #667eea;
  --bs-btn-border-color:        #667eea;
  --bs-btn-hover-bg:            #667eea;
  --bs-btn-hover-border-color:  #667eea;
  --bs-btn-hover-color:         #fff;
  --bs-btn-active-bg:           #5a67d8;
  --bs-btn-active-border-color: #5a67d8;
  --bs-btn-active-color:        #fff;
  --bs-btn-focus-shadow-rgb:    102, 126, 234;
}

/* Variante sólida — mesma escala de cor do outline acima (hover 10% mais
   escuro #5a67d8, active mais 15% #4c56c8) via CSS vars do próprio
   Bootstrap (sem !important). */
.btn-info {
  --bs-btn-color:                 #fff;
  --bs-btn-bg:                    #667eea;
  --bs-btn-border-color:          #667eea;
  --bs-btn-hover-color:           #fff;
  --bs-btn-hover-bg:              #5a67d8;
  --bs-btn-hover-border-color:    #5a67d8;
  --bs-btn-active-color:          #fff;
  --bs-btn-active-bg:             #4c56c8;
  --bs-btn-active-border-color:   #4c56c8;
  --bs-btn-disabled-color:        #fff;
  --bs-btn-disabled-bg:           #667eea;
  --bs-btn-disabled-border-color: #667eea;
  --bs-btn-focus-shadow-rgb:      102, 126, 234;
}

/* .text-bg-info (utilitário combinado do Bootstrap — cor de texto + fundo
   juntos, ex.: badges) — mesma cor de marca e texto branco de .bg-info. */
.text-bg-info {
  color: #fff !important;
  background-color: #667eea !important;
}

/* =============================================================================
   .text-warning — contraste AA sobre fundo claro.
   O amarelo padrão do Bootstrap (#ffc107) dá ~1,6:1 sobre branco — ilegível
   como texto. #664d03 (warning-text-emphasis do próprio Bootstrap 5.3) dá
   ~8:1 sobre #fff. NÃO usar para background (.bg-warning continua escura,
   texto sobre ela usa text-dark no restante do console).
   ============================================================================= */
.text-warning {
  color: #664d03 !important;
}

/* =============================================================================
   .link-hover-info — link que herda a cor do texto ao redor (não azul de
   link padrão), sublinhado para sinalizar que é clicável, e assume a cor
   de marca (#667eea) no hover/foco. Usado em sessions.html e nas tabelas do dashboard/custos.
   ============================================================================= */
.link-hover-info {
  color: inherit;
  text-decoration: underline;
}

.link-hover-info:hover,
.link-hover-info:focus-visible {
  color: #667eea;
}

/* =============================================================================
   Navbar escura — badge de status do backend (contraste AA).
   Fundo mais escuro que o navbar (#343a40) + texto claro (#e9ecef) ≈ 9,7:1.
   ============================================================================= */
.console-status-badge {
  background-color: #343a40;
  color: #e9ecef;
  padding: .15rem .55rem;
  border-radius: 1rem;
}

/* =============================================================================
   Espaçamento horizontal dos itens de navbar em telas médias+, e a correção
   de transbordo horizontal de 1.1.8.

   Oito itens (Dashboard/Aplicações/Sessões/Custos/Auditoria/Máquina/Cache/
   Config, 1.1.7) + status à direita (badge/usuário/Sair): o Bootstrap só
   mostra a barra horizontal a partir de "lg" (navbar-expand-lg) — abaixo
   disso o menu vira lista vertical no collapse, sempre legível.

   A régua de padding abaixo (era ≥1200px antes da correção) tinha sido
   ajustada de olho para "parecer que cabia" — e não cabia: medido com
   Playwright, em 1280px (largura de notebook muito comum) os oito itens +
   status somavam ~40px A MAIS que a viewport, e `.container-fluid`/
   `#mainNav` do Bootstrap são `flex-wrap: nowrap` por padrão — o excesso
   não "encolhe" sozinho, ele TRANSBORDA para fora da tela e arrasta a
   PÁGINA INTEIRA (não só a navbar) para rolar de lado — sintoma idêntico
   em TODA tela do console, porque a navbar é comum a todas via base.html.
   Dois ajustes, medidos de novo depois de cada um (nunca só "parece
   melhor"):

   1. O padding "confortável" (0.8rem/1rem) só entra a partir de 1400px, não
      mais 1200px — sobra menos texto para caber entre 1200–1399px, faixa
      onde antes vazava.
   2. `#mainNav` pode quebrar em duas linhas DENTRO da navbar (nunca mais em
      rolagem da página) a partir de "lg". Com o ajuste 1 acima, a quebra só
      acontece de fato entre 992–1279px (tablets/janelas estreitas) — a
      partir de 1280px (medido: 1280, 1366, 1440, 1920 — as larguras de
      desktop mais comuns) os itens cabem numa linha só, visual idêntico ao
      de antes da correção. Sem essa rede de segurança, qualquer largura
      nova (item de menu a mais, nome de usuário longo, fonte diferente)
      voltaria a transbordar a página inteira em vez de só quebrar a linha.
   ============================================================================= */

@media (min-width: 992px) {
  .nav-console {
    gap: 0;
  }
  .nav-console .nav-link {
    padding-left:  0.55rem !important;
    padding-right: 0.55rem !important;
    font-size: .92rem;
    white-space: nowrap;
  }
}

@media (min-width: 1400px) {
  .nav-console .nav-link {
    padding-left:  0.8rem !important;
    padding-right: 0.8rem !important;
    font-size: 1rem;
  }
}

@media (min-width: 992px) {
  #mainNav {
    flex-wrap: wrap;
    row-gap: .35rem;
  }
  #mainNav > .d-flex.align-items-center.gap-2 {
    margin-left: auto;
  }
}

/* =============================================================================
   Cabeçalho de seção — padrão único usado em todas as seções do dashboard.
   h6.section-title: texto pequeno, maiúsculas, espaçado, borda inferior.
   ============================================================================= */

.section-title {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #6c757d;              /* text-muted */
  padding-bottom: .5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #dee2e6;
}

/* =============================================================================
   Stat cards em linha única — cards totalizadores e mini-cards de KPI.
   Layout: [ícone] [número] [título] em uma única linha horizontal, com
   padding vertical reduzido. Cores e ícones de cada card continuam definidos
   pelas classes bi-*/text-* no template — este bloco só cuida do arranjo.
   ============================================================================= */

.stat-card-body {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem .9rem;
}

.stat-card-body .stat-icon {
  flex-shrink: 0;
}

.stat-card-body .stat-number {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.stat-card-body .stat-label {
  min-width: 0;
  color: #6c757d;              /* text-muted */
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-card-body .stat-label .stat-sub {
  font-weight: 400;
  opacity: .7;
}

@media (max-width: 575.98px) {
  .stat-card-body .stat-label {
    white-space: normal;
    text-overflow: initial;
    overflow: visible;
  }
}

/* =============================================================================
   Colunas com largura semântica para tabelas de dados
   ============================================================================= */

.col-user   { min-width: 140px; }
.col-ts     { width: 160px; }

/* Números alinhados em tabelas (contagens, custos, tokens). */
.tabular {
  font-variant-numeric: tabular-nums;
}

/* Chave de API exibida uma única vez (modal de aplicações). */
.senha-gerada {
  font-family: var(--bs-font-monospace);
  font-size: 1.05rem;
  letter-spacing: .04em;
  user-select: all;
}

/* Textarea do editor de .env / instruções extras. */
.editor-textarea {
  font-size: .8rem;
  resize: vertical;
}

/* =============================================================================
   Navegação — indicador de página atual (1.1.7).
   O navbar-dark padrão do Bootstrap já deixa o link ativo branco; um traço
   inferior torna a página atual identificável não só pela cor (contraste AA
   mantido — o traço usa a mesma cor de marca do resto do console).
   ============================================================================= */
.nav-console .nav-link {
  position: relative;
  border-bottom: 2px solid transparent;
}

.nav-console .nav-link.active {
  border-bottom-color: #667eea;
}

/* =============================================================================
   Foco visível (acessibilidade) — reforça o anel de foco padrão do Bootstrap
   em elementos que não são form-control (links de tabela, ações de ícone),
   para navegação por teclado nunca ficar "perdida" na tela.
   ============================================================================= */
.link-hover-info:focus-visible,
.nav-console .nav-link:focus-visible,
.btn:focus-visible {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}

/* =============================================================================
   Valor indisponível (1.1.7) — MESMO estilo em toda tela para "não consegui
   medir" (disco, limiter, arquivos de uma sessão…): itálico, cor neutra
   (idêntica a .text-muted), NUNCA a cor de aviso/erro — indisponível não é
   "algo deu errado com o sistema", é "esta medição específica falhou", e não
   pode se confundir visualmente com zero nem com falha grave. Ver CLAUDE.md
   regra 13 (ausência não vira zero) — este é o equivalente visual da regra.
   ============================================================================= */
.valor-indisponivel {
  color: #6c757d;
  font-style: italic;
}

/* =============================================================================
   Cards de estatística com link (stat_card href) — affordance de clique sem
   depender só da cor: leve elevação e a borda assume a cor de marca no hover,
   sinalizando "isto leva a algum lugar" antes mesmo do cursor virar ponteiro.
   ============================================================================= */
a:has(.stat-card-body) {
  display: block;
  transition: transform .12s ease, box-shadow .12s ease;
}

a:has(.stat-card-body):hover,
a:has(.stat-card-body):focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .08);
}

/* =============================================================================
   Máquina (1.1.8) — os três escopos (host / container / processo) NUNCA podem
   se confundir visualmente: cada card ganha uma tarja de cor no topo E o
   próprio ícone do cabeçalho assume essa cor (em vez do violeta padrão do
   console) — a separação fica óbvia sem precisar de legenda à parte.
   Cores são só identidade de escopo, não estado — não é semáforo de "risco".
   ============================================================================= */
.scope-card {
  border-top: 4px solid var(--scope-color, #adb5bd);
}

.scope-host      { --scope-color: #0d6efd; }
.scope-container { --scope-color: #667eea; }
.scope-processo  { --scope-color: #6c757d; }

.scope-card > .card-header .text-info {
  color: var(--scope-color, #667eea) !important;
}

/* Barra comparativa "valor contra o teto dele" — neutra (cor do próprio
   escopo), sem limiar de alerta: só mostra a proporção, nunca "perigoso/ok".
   Ausência (valor ou teto desconhecido, ou sem teto definido) = sem barra,
   nunca barra em 0%, que se leria como "não está usando nada". */
.metric-bar {
  height: 6px;
  border-radius: 3px;
  background-color: #e9ecef;
  overflow: hidden;
  margin-top: .3rem;
}

.metric-bar > span {
  display: block;
  height: 100%;
  background-color: var(--scope-color, #667eea);
  border-radius: 3px;
}

.metric-bar-pct {
  font-size: .72rem;
  color: #6c757d;
  text-align: right;
  margin-top: .1rem;
}

/* Contador de evento (oom_kill, memory.events.max/high, cpu.stat.nr_throttled)
   — regra do dono: destaque visual só quando o contador bateu de fato
   (valor != 0), nunca por limiar nosso ("ficando perigoso"). Em zero o
   número é só mais um dado neutro; diferente de zero é um FATO que já
   aconteceu, e por isso ganha cor + ícone (não é previsão, é histórico). */
.event-counter.is-hit {
  color: #842029;
  font-weight: 700;
}

/* =============================================================================
   Cache (1.1.8) — duas naturezas que não podem parecer a mesma coisa:
   dado REAL do cliente (sessões do CLI, com texto, apagável) x medição
   interna do próprio gateway (config/disco/versão do CLI, só idade e
   invalidação, nunca "apagável" como dado). Cor + rótulo textual juntos
   (não só cor, para não depender de percepção de cor).
   ============================================================================= */
.card-dado-real {
  border-top: 4px solid #b45309;
}

.card-cache-interno {
  border-top: 4px solid #6c757d;
}

.badge-natureza-dado {
  background-color: #fff3e0;
  color: #7c4a03;
  border: 1px solid #f0dcb0;
  font-weight: 600;
}

.badge-natureza-cache {
  background-color: #f1f3f5;
  color: #495057;
  border: 1px solid #dee2e6;
  font-weight: 600;
}

/* Grupo de órfãos por aplicação de origem — indentação visual sob o
   checkbox "selecionar grupo", para o vínculo arquivo→aplicação ficar
   claro mesmo com várias aplicações na mesma tela. */
.orfao-grupo {
  border: 1px solid #e9ecef;
  border-radius: .375rem;
  padding: .6rem .75rem;
}

.orfao-grupo + .orfao-grupo {
  margin-top: .6rem;
}

.orfao-grupo-tabela {
  margin-left: 1.6rem;
}