body {font-family: sans-serif; background-color: #f5f5f5; color: #333; margin: 0; padding: 0; padding-bottom: 80px; /* ou altura do seu footer */}

header { background-color: #004aad; color: white; padding: 1rem; display: flex; justify-content: space-between; align-items: center; }

.login-box { width: 300px; margin: 100px auto; padding: 2rem; background: white; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); text-align: center; }

.login-box input { width: 100%; padding: 0.5rem; margin: 0.5rem 0; }

button {background: #004aad; color: white; padding: 0.6rem; border: none; border-radius: 5px; cursor: pointer; }

/* Dark mode */
body.dark {background-color: #121212;color: #eee;}

body.dark header { background-color: #0d47a1; }

body.dark .login-box { background: #1e1e1e; color: #eee; }

.topo { background-color: #004aad; color: white; padding: 1rem; display: flex; justify-content: space-between; align-items: center; }

.usuario-logado { display: flex; align-items: center; gap: 1rem; }

.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid white; }

.menu { display: flex; gap: 1rem; }

.menu a { color: white; text-decoration: none; font-weight: bold; }

.menu a:hover {text-decoration: underline; }

.form-box {background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.08); display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; }

.form-row { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }

.form-row label, .form-box > label { flex: 1; min-width: 200px; display: flex; flex-direction: column; font-size: 0.95rem; }

input, select, textarea { padding: 0.5rem; border: 1px solid #ccc; border-radius: 5px; font-size: 1rem; }

button { align-self: flex-start; padding: 0.7rem 1.5rem; background: #004aad; color: white; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; transition: background 0.2s; }

button:hover { background: #00388f;}

body.dark .form-box {background: #1c1c1c;}

body.dark input, body.dark textarea, body.dark select {background-color: #2a2a2a; color: #eee; border: 1px solid #444;}

/* Links de ação (Editar, Excluir, Limpar etc.) */
a.link-acao {
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
}

a.link-editar {  color: #1976d2;}

a.link-editar:hover {  background-color: #1976d2;  color: #fff;}

a.link-excluir {  color: #d32f2f;}

a.link-excluir:hover {  background-color: #d32f2f;  color: #fff;}

a.link-limpar {  color: #6a1b9a;}

a.link-limpar:hover {  background-color: #6a1b9a;  color: #fff;}

.menu-principal {list-style: none; display: flex; gap: 1rem; align-items: center;}

.menu-principal li {  position: relative;}

.menu-principal a {
  text-decoration: none;
  color: inherit;
  padding: 0.5rem 0.75rem;
  display: inline-block;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #004aad;
  color: white;
  border: 1px solid #ccc;
  min-width: 150px;
  z-index: 999;
}

body[data-tema="escuro"] .dropdown-menu { background: #1e1e1e; border: 1px solid #444;}

.dropdown-menu li {  display: block;}

.dropdown:hover .dropdown-menu {  display: block;}

.mensagem-erro {
  color: #fff;
  background-color: #d9534f;
  padding: 10px;
  border-radius: 4px;
  margin-top: 1rem;
}

.mensagem-sucesso {
  background-color: #d4edda;
  color: #155724;
  padding: 0.8rem;
  border: 1px solid #c3e6cb;
  border-radius: 5px;
  margin: 1rem 0;
  font-weight: bold;
}

body.dark .mensagem-sucesso { background-color: #2e4a33; color: #d4edda; border-color: #406a52;}

/* Tabela bonita */
.tabela-usuarios {
  width: 100%;
  max-width: 850px;
  margin: 2rem auto 5rem auto; /* cima, direita/esquerda, baixo */
  border-collapse: collapse;
}

.tabela-usuarios th,
.tabela-usuarios td {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  text-align: left;
}

.tabela-usuarios th {  background-color: #eee; color: #222;}

.status-ativo {  color: green;  font-weight: bold;}

.status-inativo {  color: red;  font-weight: bold;}

/* Botões de ação */
.btn-editar {  color: #007bff;  text-decoration: none;}
.btn-editar:hover {  text-decoration: underline;}

.btn-desativar {  color: #d9534f;  text-decoration: none;}
.btn-desativar:hover {  text-decoration: underline;}

.btn-ativar {  color: #28a745;  text-decoration: none;}
.btn-ativar:hover {  text-decoration: underline;}

/* Rodapé */
.rodape {
  text-align: center;
  padding: 5px;
  font-size: 0.9rem;
  color: #999;
  background-color: #f4f4f4;
  border-top: 1px solid #ddd;
  position: fixed;
  bottom: 0;
  width: 100%;
}

/* Modo escuro para o rodapé e tabela */
body[data-tema="escuro"] .tabela-usuarios th { background-color: #222; color: #ccc;}

body[data-tema="escuro"] .tabela-usuarios td { border-color: #444; color: #eee;}

body[data-tema="escuro"] .rodape {
  background-color: #111;
  color: #888;
  border-top: 1px solid #333;
}

@media (max-width: 600px) {.form-row { flex-direction: column; }
  .tabela-usuarios { font-size: 0.9rem;}

  .menu { flex-direction: column; gap: 0.5rem;}
}

body { transition: background-color 0.3s, color 0.3s;}

body.dark, body[data-tema="escuro"] { transition: background-color 0.3s, color 0.3s;}

.verde { color: green; font-weight: bold; }
.amarelo { color: orange; font-weight: bold; }
.vermelho { color: red; font-weight: bold; }

.card-dashboard {
  margin-top: 2rem;
  padding: 1rem;
  background: var(--bg-card, #fff);
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.08);
}

body.dark .card-dashboard { background: #1e1e1e;}

.tabela-relatorio { width: 100%; border-collapse: collapse; font-size: 0.9rem;}

.tabela-relatorio thead { background-color: #222;}

.tabela-relatorio th,
.tabela-relatorio td { padding: 8px; text-align: left; white-space: nowrap;}

@media (max-width: 768px) {
  .tabela-relatorio td,
  .tabela-relatorio th { font-size: 0.75rem; padding: 6px; }

  .acoes { display: flex; flex-direction: column; gap: 4px;}
}

@media (max-width: 600px) {.btn-exportar { display: none;}}

.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6); /* fundo escuro translúcido */
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  padding: 2rem;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
}

/* Estilos em modo escuro */
body.dark .modal-content { background-color: #1e1e1e; color: #f1f1f1;}

body.dark textarea,
body.dark input,
body.dark button {
  background-color: #2a2a2a;
  color: #fff;
  border: 1px solid #444;
}

.empenho-card {
  background-color: #222;
  padding: 1.5rem;
  border-radius: 10px;
  margin-bottom: 1.5rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  color: #fff;
}

body.light .empenho-card { background-color: #f9f9f9; color: #000;}

.empenho-card p { margin: 0.3rem 0;}

.acoes-empenho { margin-top: 1rem; display: flex; gap: 1rem;}

.btn-link {
  padding: 0.4rem 0.8rem;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  font-size: 0.9rem;
  transition: background-color 0.2s;
}

.btn-link.editar { background-color: #4caf50; color: white;}

.btn-link.editar:hover { background-color: #388e3c;}

.btn-link.excluir { background-color: #f44336; color: white;}

.btn-link.excluir:hover { background-color: #d32f2f;}

.btn-link.voltar { background-color: #4169e1; color: white;}

.btn-link.voltar:hover { background-color: #87cefa;}

.btn-link.detalhes { background-color: #bdb76b; color: white;}

.btn-link.detalhes:hover { background-color: #b8860b;}

.btn-link.empenhos { background-color: #ff8c00; color: white;}

.btn-link.empenhos:hover { background-color: #ffa500;}

.btn-link.salvar { background-color: #ffdab9; color: black; text}

.btn-link.salvar:hover { background-color: #ffe4b5; }

.input-arquivo { display: none;}

.btn-custom-file {
  display: inline-block;
  padding: 8px 16px;
  background-color: #3f51b5;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.btn-custom-file:hover { background-color: #2c3e91;}

.nome-arquivo { margin-left: 1rem; font-style: italic; color: #ccc;}

 .btn-perigo { background-color: #e53935; color: white; border: none; padding: 0.5rem 1rem; cursor: pointer; }