@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Reset básico e corpo */
body {
  background-color: #f0f0f0;
  font-family: "Roboto";
  min-height: 100vh;
  margin: 0;
  padding-top: 60px; /* para header fixo */
}

/* Estilo do cabeçalho */
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #86b162;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  z-index: 9999;
}

main {
  padding: 20px;
  max-width: 1200px;
  /* height: calc(100vh - 60px); /* altura total menos o cabeçalho */
  margin: 0 auto;
  flex: 1; /* ocupa o espaço restante do container principal */
}

.main-container {
  width: 100%;
  max-width: 850px;       /* Limita a largura em telas grandes */
  min-height: calc(100vh - 80px); /* Altura mínima, considerando o header fixo (ajuste se for 60px + espaçamento extra) */
  margin: 20px auto 40px auto;  /* Centralizado e com espaçamento */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background-color: #f3f8dde5;
  padding: 20px 30px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}


h3 {
  font-size: 1.5em;
  margin-bottom: 25px;
  color: #333;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"] {
  border: solid 1px #c7d4bd;
}

select,
textarea {
  border: solid 1px #c7d4bd;
  background-color: #fff;
}

.form-control:focus {
  border-color: #86b162 !important;
  outline: none !important;
  box-shadow: 0 0 0 0.2rem rgba(134, 177, 98, 0.2) !important;
}

.form-select:focus {
  border-color: #86b162 !important;
  outline: none !important;
  box-shadow: 0 0 0 0.2rem rgba(134, 177, 98, 0.2) !important;
}

.is-invalid {
  border-color: #d9534f !important;
  box-shadow: 0 0 0 0.2rem rgba(217, 83, 79, 0.25) !important;
}

.invalid-feedback {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #d9534f;
}

/* Estilo do logo */
.logo {
  display: flex;
  align-items: center;
}

.logo-img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.logo-text {
  font-size: 1.5em;
  font-weight: bold;
  color: #fff;
}

/* Estilo do menu */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

nav ul li {
  margin: 0 15px;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}

nav ul li a:hover {
  color: #d4e6b5;
}

/* Estilo do conteúdo principal */

/* Estilo de rodapé */

footer {
  position: absolute;
  width: 100%;
  background-color: #86b162;
  color: #fff;
  text-align: center;
  padding: 10px 0;
  position: relative;
  bottom: 0;
  left: 0;
}

footer p {
  margin: 0;
  font-size: 0.9em;
}

/* Estilo de mensagens de alerta */
.alert {
  padding: 15px;
  margin: 20px 0;
  border-radius: 5px;
}

.alert-success {
  background-color: #d4edda;
  color: #155724;
}

.alert-error {
  background-color: #f8d7da;
  color: #721c24;
}

.alert-warning {
  background-color: #fff3cd;
  color: #856404;
}

/* Estilo de tabelas */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14px;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

thead {
  background-color: #86b162 ;
  font-weight: bold;
}

th {
  text-align: center;
}

td {
  background-color: #fff;
  text-align: center;
}

table td:nth-child(2) {
  text-align: left;
}

/*


.error-message {
  color: #d9534f;
  font-size: 0.9em;
  margin-top: -10px;
  margin-bottom: 10px;
}


.success-message {
  color: #5cb85c;
  font-size: 0.9em;
  margin-top: -10px;
  margin-bottom: 10px;
}

*/

.alert {
  padding: 15px;
  margin: 20px 0;
  border-radius: 5px;
}

.alert-success {
  background-color: #d4edda;
  color: #155724;
}

.alert-error {
  background-color: #f8d7da;
  color: #721c24;
}

.alert-warning {
  background-color: #fff3cd;
  color: #856404;
}



/* Estilo de links */
a {
  color: #86b162;
  text-decoration: none;
  transition: color 0.3s;
}

a:hover {
  color: #74a14c;
}

/* Estilo de imagens */
img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

/* Estilo de listas */
ul, ol {
  padding-left: 20px;
  margin: 10px 0;
}

li {
  margin-bottom: 5px;
}

/* Cards com paleta verde (já fornecido) */
.card {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

/* Títulos */
.card h2 {
  font-size: 1.5em;
  margin-bottom: 10px;
}

/* Parágrafos */
.card p {
  font-size: 1em;
  color: #555;
}

/* Ícones */
.icon {
  width: 24px;
  height: 24px;
  fill: #86b162;
  transition: fill 0.3s;
}

.icon:hover {
  fill: #74a14c;
}

/* Grid do Dashboard */
.dashboard-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* Responsividade simples */
.dashboard-grid .card {
  flex: 1 1 300px;
}

.btn {
    margin-right: 5px;
}

button {
  margin-right: 5px;
  border: none;
}

/* Botões personalizados */
.custom-btn-verde {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 12px;
  background-color: #557a46;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: transform 0.2s;
}

.custom-btn-verde:hover {
  background-color: #466c3c;
  transform: scale(1.05);
  color: #fff;
}

.custom-btn-verde:active {
  background-color: #3b5a32;
}

.custom-btn-verde:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(85, 122, 70, 0.5);
}

.custom-btn-vermelho {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 12px;
  background-color: #c0392b;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: transform 0.2s;
}

.custom-btn-vermelho:hover {
  background-color: #a93226;
    transform: scale(1.05);
    color: #fff;
}

.custom-btn-vermelho:active {
  background-color: #922b21;
}

.custom-btn-vermelho:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.5);
}

.custom-btn-azul {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 12px;
  background-color: #2980b9;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: transform 0.2s;
}

.custom-btn-azul:hover {
  background-color: #2471a3;
}

.custom-btn-azul:active {
  background-color: #1f618d;
}

.custom-btn-azul:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(41, 128, 185, 0.5);
}

.custom-btn-cinza {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 12px;
  background-color: #7f8c8d;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: transform 0.2s;
}

.custom-btn-cinza:hover {
  background-color: #95a5a6;
    transform: scale(1.05);
    color: #fff;
}

.custom-btn-cinza:active {
  background-color: #85929e;
}

.custom-btn-cinza:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(127, 140, 141, 0.5);
}

.custon-btn-amarelo {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 12px;
  background-color: #f1c40f;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: transform 0.2s;
}

.custom-btn-amarelo:hover {
  background-color: #f39c12;
}

.custom-btn-amarelo:active {
  background-color: #e67e22;
}

.custom-btn-amarelo:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(241, 196, 15, 0.5);
}

.custom-btn-dark {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 12px;
  background-color: #2c3e50;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: transform 0.2s;
}

.custom-btn-dark:hover {
  background-color: #34495e;
}

.custom-btn-dark:active {
  background-color: #1a252f;
}

.custom-btn-dark:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(44, 62, 80, 0.5);
}


/* Estilo de tabelas responsivas */
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  th, td {
    display: block;
    text-align: right;
  }

  th {
    position: relative;
    padding-left: 50%;
  }

  th::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    font-weight: bold;
  }
}

@media (min-width: 1600px) {
  .main-container {
    max-width: 950px;
  }
}