/* ============================================================================
   refino.css — Fase 2: eleva os componentes REAIS do portal à linguagem visual
   do Módulo Financeiro JMonte, consumindo tokens. Carrega POR ÚLTIMO.

   Filosofia (a mesma do financeiro): refinar as classes que o app já usa, para
   telas novas herdarem de graça — sem trocar markup nem introduzir um .btn rival.
   Tudo via var(--token) → dark mode flui sozinho. Cor só com significado.
   Fonte da verdade: /app/financeiro-portal/design-export/
   ========================================================================== */

/* ----------------------------------------------------------------------------
   BOTÕES — primário = navy preenchido (assinatura), com brilho interno + sombra
   navy. .btn base do portal continua ghost (secundário).
   ---------------------------------------------------------------------------- */
.btn{ border-radius:var(--r-md); box-shadow:var(--sh-1); }
.btn:active{ transform:translateY(1px); }

.btn-primary{
  background:var(--brand-500); border-color:transparent; color:var(--text-on-brand);
  /* literal navy-tinted: igual ao .btn do design-export */
  box-shadow:0 1px 2px rgba(21,41,77,.32),inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-primary:hover{
  background:var(--brand-600); border-color:transparent; color:var(--text-on-brand);
  box-shadow:0 3px 10px rgba(21,41,77,.34),inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-success{ background:var(--success); border-color:transparent; color:#fff; }
.btn-success:hover{ background:var(--success-fg); color:#fff; }
.btn-danger{ background:transparent; border-color:var(--danger); color:var(--danger); }
.btn-danger:hover{ background:var(--danger); color:#fff; }
.btn-sm{ border-radius:var(--r-sm); }

/* botão "Entrar" do login herda a assinatura navy */
.caixa-login button{
  border-radius:var(--r-md);
  box-shadow:0 1px 2px rgba(21,41,77,.32),inset 0 1px 0 rgba(255,255,255,.16);
}
.caixa-login button:hover{
  box-shadow:0 3px 10px rgba(21,41,77,.34),inset 0 1px 0 rgba(255,255,255,.16);
}

/* ----------------------------------------------------------------------------
   INPUTS — anel de foco navy (em vez do azul antigo)
   ---------------------------------------------------------------------------- */
.caixa-login input{ border-radius:var(--r-md); }
.caixa-login input:focus,
form input:focus, form select:focus, form textarea:focus{
  outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px var(--brand-100);
}

/* ----------------------------------------------------------------------------
   SIDEBAR — item ativo: gradiente navy + barra lateral (assinatura do shell)
   (a sidebar é sempre navy — único lugar onde brand-escuro em texto é OK)
   ---------------------------------------------------------------------------- */
.sidebar-nav a{ position:relative; }
.sidebar-nav a.ativo{
  background:linear-gradient(90deg, rgba(255,255,255,.20), rgba(255,255,255,.08));
}
.sidebar-nav a.ativo::before{
  content:''; position:absolute; left:0; top:6px; bottom:6px; width:3px;
  border-radius:0 3px 3px 0; background:#fff;
}

/* ----------------------------------------------------------------------------
   TABELAS — header em token + REALCE DE LINHA no hover (não se perder na linha).
   Substitui os hardcodes claros do style.css em claro E escuro.
   ---------------------------------------------------------------------------- */
table.tabela thead th,
.matriz-perm thead th{ background:var(--surface-2); }
table.tabela tbody tr:hover,
.matriz-perm tbody tr:hover{ background:var(--brand-50); }
/* números alinham em coluna */
table.tabela td{ font-variant-numeric:tabular-nums; }

/* ----------------------------------------------------------------------------
   BADGES / STATUS — cor SEMPRE pareada com ícone (acessibilidade), texto -fg
   p/ contraste sobre fundo pálido. Ícones = glyph vetorial, nunca emoji.
   ---------------------------------------------------------------------------- */
.badge.ativo{ color:var(--success-fg); }
.badge.ativo::before{ content:'\2713'; font-weight:800; font-size:10px; margin-right:4px; }
.badge.inativo::before{ content:'\2298'; font-size:10px; margin-right:4px; }
.badge.senha-temp{ color:var(--warning-fg); }
.badge.senha-temp::before{ content:'\25D0'; font-size:10px; margin-right:3px; }
.badge-papel.backoffice2{ color:var(--success-fg); }

/* caixa de senha gerada: título com contraste */
.box-senha .titulo{ color:var(--warning-fg); }

/* ----------------------------------------------------------------------------
   CARDS — reforço leve da elevação (o grosso já vem do bridge via tokens)
   ---------------------------------------------------------------------------- */
.kpi-card{ border-radius:var(--r-lg); }
.kpi-card:hover{ box-shadow:var(--sh-2); }
.kpi-valor{ font-variant-numeric:tabular-nums; }

/* ----------------------------------------------------------------------------
   SAÚDE DO SERVIDOR (/admin/sistema) — cards de métricas gerados por
   public/js/sistema.js. Antes pintados com hex inline (manchas claras no dark);
   agora 100% via token. Cor só com significado: verde/âmbar/vermelho conforme
   limiar de uso, aplicado por modificador .is-ok / .is-warn / .is-danger.
   ---------------------------------------------------------------------------- */
.sis-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; }
/* em telas estreitas (~380px) força coluna única — sem overflow horizontal */
@media (max-width:420px){ .sis-grid{ grid-template-columns:1fr; } }

.sis-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:0.9rem 1rem; box-shadow:var(--sh-1);
}
.sis-card-titulo{ font-size:0.78rem; color:var(--text-muted); font-weight:700; margin-bottom:0.65rem; }

/* linha "valor grande + legenda" */
.sis-row{ display:flex; align-items:baseline; justify-content:space-between; }
.sis-pct{ font-size:1.3rem; font-variant-numeric:tabular-nums; }
.sis-sub{ font-size:0.78rem; color:var(--text-muted); }
.sis-foot{ font-size:0.75rem; color:var(--text-muted); }
.sis-livre{ color:var(--success-fg); }

/* barra de progresso (largura via style inline; cor via .is-*) */
.sis-barra{ height:8px; background:var(--surface-sunken); border-radius:4px; overflow:hidden; margin:0.55rem 0 0.45rem; }
.sis-barra-fill{ height:100%; transition:width 0.3s ease; }

/* semântica de cor partilhada por % e barra */
.sis-pct.is-ok{ color:var(--success-fg); }
.sis-pct.is-warn{ color:var(--warning-fg); }
.sis-pct.is-danger{ color:var(--danger-fg); }
.sis-barra-fill.is-ok{ background:var(--success); }
.sis-barra-fill.is-warn{ background:var(--warning); }
.sis-barra-fill.is-danger{ background:var(--danger); }

/* grelha rótulo/valor (uptime, processo) */
.sis-dl{ display:grid; grid-template-columns:1fr 1fr; gap:0.5rem 0.75rem; font-size:0.82rem; }
.sis-dt{ color:var(--text-muted); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.04em; font-weight:600; margin-bottom:0.15rem; }
.sis-dd{ color:var(--text); }
.sis-dl-foot{ grid-column:1/-1; margin-top:0.2rem; padding-top:0.5rem; border-top:1px solid var(--border); color:var(--text-muted); font-size:0.75rem; }
/* grelha de loads da CPU (1/5/15min) */
.sis-loads{ font-size:0.75rem; color:var(--text-muted); display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.3rem; }

/* detalhe "App: tamanho" no rodapé do card de disco */
.sis-detalhe{ margin-top:0.65rem; padding-top:0.55rem; border-top:1px solid var(--border); font-size:0.72rem; color:var(--text-muted); }

/* aviso embutido (swap desativado) */
.sis-aviso{
  background:var(--warning-bg); border:1px solid var(--warning); border-radius:6px;
  padding:0.5rem 0.65rem; font-size:0.8rem; color:var(--warning-fg);
}

/* erro embutido num card */
.sis-erro{ color:var(--danger-fg); font-size:0.85rem; }
/* caixa de erro do carregar() (falha de fetch) */
.sis-erro-box{
  padding:1.5rem; background:var(--danger-bg); border:1px solid var(--danger);
  border-radius:10px; color:var(--danger-fg); font-size:0.9rem;
}

/* banner de "pontos de atenção" — âmbar (warn) ou vermelho (danger) */
.sis-banner{ margin-top:1rem; border:1px solid; border-radius:10px; padding:0.85rem 1rem; font-size:0.85rem; }
.sis-banner.is-warn{ background:var(--warning-bg); border-color:var(--warning); color:var(--warning-fg); }
.sis-banner.is-danger{ background:var(--danger-bg); border-color:var(--danger); color:var(--danger-fg); }
.sis-banner-lista{ margin:0.35rem 0 0; padding-left:1.25rem; line-height:1.55; }