/* Cor de fundo com degradê suave */
body {
  background: linear-gradient(to bottom, #e0d281, #97973d); /* Dourado */
  min-height: 100vh;
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* Espaçamento suave entre seções */
.container {
  padding-bottom: 40px;
}

/* Títulos */
h2 {
  font-weight: 600;
  color: #2c3e50;
}

/* Rodapé */
footer, 
footer.bg-marrom-medio {
  font-size: 0.9rem;
  color: #fff; /* Letras brancas */
  background-color: #8a770a;
  border-top: none !important;
}

/* Navbar */
.navbar {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Links da navbar (hover mais suave) */
.navbar-nav .nav-link:hover {
  opacity: 0.85;
}

/* DataTables ajustes visuais */
table.dataTable thead th {
  background-color: #964e10; 
  color: white;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 0.2rem 0.6rem;
  margin: 0 2px;
  border-radius: 5px;
  background-color: #94873c; /* #e9ecef; */
  border: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: #0a8a44; /* #ced4da; */
}

/* Fundo das linhas da tabela */
table.dataTable tbody tr {
  background-color: #8a0a0a; /* Dourado */
}

table.dataTable tbody tr:nth-child(even) {
  background-color: #050505; /* Alternando com cinza claro */
}
  
/* Botões padronizados */
.btn {
  border-radius: 6px;
}

.btn-outline-primary,
.btn-outline-danger {
  transition: all 0.2s ease-in-out;
}

.btn-outline-primary:hover .btn-primary {
  background-color: #0dfda1;
  color: white;
}

.btn-outline-danger:hover {
  background-color: #dc3545;
  color: white;
}

/* Mensagem de erro */
.alert-danger {
  border-left: 5px solid #dc3545;
  background-color: #f8d7da;
  color: #842029;
}

/* Responsividade */
@media (max-width: 768px) {
  h2 {
      font-size: 1.5rem;
  }

  .navbar-brand {
      font-size: 1.1rem;
  }
}
.postit {
  width: 250px;
  padding: 15px;
  margin: 10px;
  float: left;
  border: 1px solid #ccc;
  box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
  border-radius: 8px;
  background: #ffff88;
  transform: rotate(-2deg);
  font-family: 'Comic Sans MS', cursive, sans-serif;
}
.postit.azul { background: #cce5ff; }
.postit.amarelo { background: #fff3cd; }
.postit.vermelho { background: #f8d7da; }

/* Destaque para categorias principais */
.tr-principal {
  font-weight: bold;
  font-size: 1.1em;
  background: linear-gradient(to right, #f9e79f 50%, #ffe082 100%);
  color: #362e01;
}

/* Destaque para SUBTOTAL */
.tr-subtotal {
  font-weight: bold;
  background: #fffde4;
  color: #94873c;
}

/* Destaque para linha de diferença/final */
.tr-diferenca {
  font-weight: bold;
  background: linear-gradient(to left, #e4f9e6 50%, #a5d6a7 100%);
  color: #155724;
  font-size: 1.05em;
}

/* Ajuste para total alinhado à direita */
.td-valor {
  text-align: right;
}
/* Marrom médio para navbar */
.bg-marrom-medio {
  background-color: #964e10 !important; /* Ex: marrom médio */
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show, /* Mantém ativo quando aberto */
.navbar-nav .nav-link:focus {
  background-color: #a07f5d;
  color: #fff !important;
  border-radius: 6px;
}

/* Caixa do submenu */
.navbar .dropdown-menu {
  background-color: #a07f5d;
  border-radius: 8px;
  border: none;
  box-shadow: 0 4px 14px rgba(80, 48, 15, 0.18);
}
/* Letras brancas por padrão no dropdown */
.navbar .dropdown-menu .dropdown-item {
  color: #fff;
  font-weight: normal; /* padrão: sem negrito */
}
/* Hover em cada opção */
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
  background-color: #8c6239;
  color: #fff;
  font-weight: bold;
}
/* Botões de navegação maiores e com cores ajustadas */
.btn-outline-secondary {
    background-color: #6c757d;
    border: none;
    color: #fff;
    margin: 0 10px;
}

.btn-outline-secondary:hover {
    background-color: #5a6268;
    color: #fff;
}

/* Ajuste dos tooltips */
.tooltip {
    opacity: 0.9;
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 0.9rem;
}

#graficoCompras {
    background-color: #ffffff; /* Fundo branco */
    border-radius: 8px;        /* Canto arredondado opcional */
    padding: 10px;             /* Espaço interno opcional */
}