/* =====================================================================
   Ajustes visuais proprios (complementam o Pico.css).
   Comentarios em portugues explicando cada bloco.
   ===================================================================== */

/* ---------------------------------------------------------------------
   CORES DA MARCA GRF (aplicadas ao tema do Pico.css)
   #324598 (azul escuro) = cor principal
   #118DFF (azul)         = destaque
   #19B4BE (verde-agua)   = destaque
   --------------------------------------------------------------------- */
:root {
  --grf-azul-escuro: #324598;
  --grf-azul: #118DFF;
  --grf-verde: #19B4BE;

  /* Sobrescreve as cores principais do Pico (botoes, links, foco). */
  --pico-primary: #324598;
  --pico-primary-background: #324598;
  --pico-primary-hover-background: #283a7e;
  --pico-primary-border: #324598;
  --pico-primary-hover-border: #283a7e;
  --pico-primary-inverse: #ffffff;
  --pico-primary-focus: rgba(17, 141, 255, 0.35);
}

/* Esconde qualquer elemento que tenha a classe "hidden". Usamos isso no
   JavaScript para mostrar/esconder telas e formularios. */
.hidden { display: none !important; }

/* Caixa de login centralizada na tela. */
#tela-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.login-card { width: 100%; max-width: 420px; }

/* Barra de navegacao do topo: fundo azul da marca, itens alinhados. */
.topo {
  background: var(--grf-azul-escuro);
  margin-bottom: 1.5rem;
  padding: 0.5rem 1.2rem;
}
.topo strong { color: #fff; }
.topo .menu { gap: 0.25rem; flex-wrap: wrap; align-items: center; }
.nav-link { padding: 0.4rem 0.7rem; border-radius: 6px; color: #dbe3ff; }
.nav-link:hover { color: #fff; }
/* Destaca o item de menu atualmente selecionado com o azul de destaque. */
.nav-link.ativo { background: var(--grf-azul); color: #fff; }
/* Link "Sair" claro para aparecer sobre o fundo azul. */
#btn-sair { color: #ffffff; opacity: 0.85; }

/* Logos da GRF. */
.logo-topo { height: 56px; width: auto; display: block; background:#fff; padding:4px 10px; border-radius:8px; }
.logo-login { display: block; max-width: 190px; margin: 0 auto 1rem; }

/* Cartoes com os numeros principais do dashboard (KPIs). */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.kpi {
  text-align: center;
  padding: 1.2rem 1rem;
  margin: 0;
  color: #fff;
  border-radius: 10px;
}
.kpi-1 { background: var(--grf-azul-escuro); }
.kpi-2 { background: var(--grf-azul); }
.kpi-3 { background: var(--grf-verde); }
.kpi-4 { background: #283a7e; }
.kpi-num { display: block; font-size: 2.2rem; font-weight: 700; line-height: 1; }
.kpi-lbl { display: block; margin-top: 0.4rem; font-size: 0.9rem; opacity: 0.95; }

/* Caixa dos graficos com altura FIXA. Sem isso o Chart.js cresce sem parar
   e o grafico fica gigante. O grafico preenche a caixa (300px de altura). */
.chart-box { position: relative; height: 300px; width: 100%; }
.chart-box canvas { max-height: 300px; }

/* Cabecalho de cada painel (titulo + botao) lado a lado. */
.cabecalho-painel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Botoes de acao do formulario lado a lado. */
.acoes-form { display: flex; gap: 0.5rem; }
.acoes-form button { width: auto; }

/* Checkbox "Ativo" alinhado verticalmente com os outros campos. */
.check-ativo { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.8rem; }

/* Mensagens de erro (login e geral). */
.erro, .msg.erro { color: var(--pico-del-color, #b3261e); }
.msg.ok { color: #1a7f37; }
.msg { padding: 0.6rem 0.9rem; border-radius: 6px; background: var(--pico-card-background-color); }

/* Texto de "nenhum registro". */
.vazio { color: var(--pico-muted-color); font-style: italic; }

/* Caixa do formulario de troca de senha (nao ocupar a tela toda). */
.card-senha { max-width: 440px; }

/* Linha de estoque em alerta (saldo negativo ou abaixo do minimo). */
.alerta-estoque td { color: #ff6b6b; }
.alerta-estoque strong { color: #ff6b6b; }

/* Checkbox "voltou ao estoque" na devolucao. */
.check-retorna { display: flex; align-items: center; gap: 0.5rem; }

/* Botao de excluir (acao destrutiva) em vermelho. */
.btn-excluir { color: #ff6b6b; border-color: #ff6b6b; }

/* Texto de dica menor e discreto. */
.dica { font-size: 0.85rem; color: var(--pico-muted-color); margin-top: -0.4rem; }

/* Linha de adicionar item nos catalogos (campos + botao numa linha). */
.linha-add { display: flex; gap: 0.5rem; align-items: end; flex-wrap: wrap; }
.linha-add input { margin-bottom: 0; }
.linha-add button { width: auto; }

/* Botoes pequenos dentro das tabelas (editar/excluir). */
.btn-mini {
  width: auto;
  padding: 0.2rem 0.6rem;
  font-size: 0.8rem;
  margin: 0;
}

/* Lista de catalogos mais limpa. */
#lista-tipos, #lista-motivos { list-style: none; padding: 0; }
#lista-tipos li, #lista-motivos li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--pico-muted-border-color);
}