/* =================================
    1. RESET, TIPOGRAFIA E GERAIS
   ================================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: #f4f4f4;
  color: #333;
  line-height: 1.5;
  font-size: 16px;
}

/* =================================
    2. TOPBAR E DROPDOWN -- SEÇÃO CORRIGIDA --
   ================================= */
.topbar {
  background: #6a1b9a;
  padding: 10px 20px;
  position: fixed;
  inset: 0 0 auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0,0,0,.1);
}
.topbar a, .topbar .dropbtn {
  color: #fff;
  text-decoration: none;
  margin-right: 15px;
  font-weight: bold;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s;
}
.topbar a:hover, .topbar .dropbtn:hover {
  background-color: #8e24aa;
}
.welcome-user {
    color: #fff;
    margin-right: 15px;
}

/* Container do item de menu (ex: "Administração") */
.dropdown {
    position: relative; /* ESSENCIAL: Cria o contexto para o menu flutuar */
    display: inline-block;
}

/* O menu suspenso em si */

.dropdown-content {
    /* ADICIONADO: Esconde o menu por padrão */
    display: none;
    /* ADICIONADO: Faz o menu flutuar sobre a página */
    position: absolute; 
    
    /* Estilos visuais */
    background-color: #f9f9f9;
    min-width: 240px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 0 0 5px 5px;
    z-index: 1;

    /* Lógica de rolagem que você queria */
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    
    /* LINHA REMOVIDA DAQUI: overflow-x: hidden; */
}

/* Links dentro do menu suspenso */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    margin: 0;
    text-align: left;
}

/* Efeito hover nos links */
.dropdown-content a:hover {
    background-color: #f1f1f1;
}

/* Mostra o menu suspenso ao passar o mouse sobre o container */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Estilização da barra de rolagem (opcional, mas recomendado) */
.dropdown-content::-webkit-scrollbar {
    width: 8px;
}
.dropdown-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.dropdown-content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}
.dropdown-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}


/* =================================
    3. CONTEÚDO PRINCIPAL
   ================================= */
.conteudo {
  margin: 80px auto 40px; /* Margem superior para compensar a topbar fixa */
  width: 100%;
  max-width: 900px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,.1);
}
h1, h2, h3 {
  color: #6a1b9a;
  margin-bottom: 20px;
  text-align: center;
}
hr {
    border: 0;
    height: 1px;
    background: #e0e0e0;
    margin: 20px 0;
}

/* =================================
    4. BOTÕES
   ================================= */
button, input[type="submit"], .button-link {
  display: inline-block;
  padding: 12px 20px;
  background: #7e57c2;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s;
}
button:hover, input[type="submit"]:hover, .button-link:hover {
  background: #673ab7;
}

/* =================================
    5. FORMULÁRIOS
   ================================= */
.form-group {
  margin-bottom: 16px;
}
.form-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 6px;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group input[type="time"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}
.form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap;
}
fieldset {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}
legend {
    padding: 0 10px;
    font-weight: bold;
    color: #6a1b9a;
    font-size: 1.2em;
}

/* =================================
    6. TABELAS
   ================================= */
.table-wrapper {
  margin-top: 20px;
  width: 100%;
  overflow-x: auto; /* Permite rolar a tabela horizontalmente se necessário */
  -webkit-overflow-scrolling: touch; /* Melhora a rolagem em iOS */
}
table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
th, td {
  padding: 12px;
  border: 1px solid #ddd;
  text-align: left;
  white-space: nowrap; /* Evita que o texto quebre, facilitando a rolagem */
}
th {
  background: #ede7f6;
  color: #5e35b1;
  font-weight: bold;
}
tr:nth-child(even) {
    background-color: #f9f9f9;
}
td a {
    text-decoration: none;
    margin-right: 8px;
    font-size: 1.2em;
}

/* =================================
    7. DASHBOARD (CARDS, GRÁFICOS, KPIs)
   ================================= */
.painel-opcoes, .kpi-container, .charts-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}
.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,.05);
  flex: 1 1 150px; /* Permite que os cards cresçam e diminuam */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px;
  font-weight: bold;
  color: #6a1b9a;
  text-align: center;
  min-height: 100px;
  transition: transform .2s, box-shadow .2s;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,.08);
}
.card strong {
    font-size: 1.5em;
    margin-top: 5px;
}
.chart-container {
    flex: 1 1 400px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,.1);
    min-width: 300px; /* Garante que o gráfico não fique muito espremido */
}
.kpi {
    background: #f3e5f5;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    flex: 1 1 150px;
}
.kpi-title { font-size: 0.9em; color: #6a1b9a; }
.kpi-value { font-size: 1.8em; font-weight: bold; color: #4a148c; }

/* =================================
    8. LOGIN
   ================================= */
.login-container {
  max-width: 380px;
  margin: 100px auto;
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,.05);
}
.login-form label { display: block; margin-bottom: 6px; font-weight: bold; }
.login-form input { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; }
.login-form button { width: 100%; }

/* =================================
    9. MENSAGENS DE ERRO/SUCESSO
   ================================= */
.erro, .sucesso {
  color: #fff;
  padding: 12px 15px;
  margin-bottom: 20px;
  border-radius: 4px;
  text-align: center;
}
.erro { background-color: #c62828; }
.sucesso { background-color: #2e7d32; }


/* =================================
    10. RESPONSIVIDADE (MEDIA QUERIES)
   ================================= */

/* Ajustes para telas de até 768px (tablets e celulares) */
@media (max-width: 768px) {
  .topbar {
    position: static; /* A barra deixa de ser fixa e passa a rolar com a página */
    flex-direction: column;
    align-items: stretch; /* Itens se esticam para preencher a largura */
    gap: 10px;
  }
  .topbar .welcome-user, .topbar .dropdown {
    text-align: center;
    margin: 0;
  }

  .conteudo {
    margin: 20px auto; /* Reduz margem, pois a topbar não é mais fixa */
    border-radius: 0;
    box-shadow: none;
  }
  
  .form-actions {
    flex-direction: column;
  }
  .form-actions button, .form-actions .button-link {
    width: 100%;
  }

  .painel-opcoes, .kpi-container, .charts-grid {
    flex-direction: column;
  }
  
  th, td {
      /* Texto pode quebrar para melhor visualização em telas pequenas */
      white-space: normal; 
  }
}

/* =================================
    11. ESTILOS DE VISUALIZAÇÃO DE FICHA
   ================================= */
.info-list-view {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Espaço entre os itens da lista */
}

.info-item-stacked {
    padding: 10px;
    background-color: #fafafa;
    border-left: 3px solid #007bff; /* Uma barra de destaque na cor primária */
    line-height: 1.6;
    display: flex;
    flex-wrap: wrap; /* Permite que o texto quebre a linha se for muito longo */
}

.info-item-stacked strong {
    font-weight: 600;
    color: #333;
    margin-right: 8px; /* Espaço entre o rótulo e o valor */
}

.info-item-stacked span {
    color: #555;
}