/* Garante que a tabela mantenha o layout fixo ao editar */
#table-container table {
  table-layout: fixed;
}
#table-container th,
#table-container td:not(:last-child) {
  min-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#region Tabela responsiva e usabilidade
/* Espaço extra para garantir visualização da última linha mesmo com rolagem lateral em telas pequenas */
#table-container {
  padding-bottom: clamp(1.2rem, 3vw, 2.2rem);
  overflow-x: auto;
}

/* Ajustes para telas pequenas (mobile) */
@media (max-width: 640px) {
  #table-container {
    max-height: 60vh;
    min-width: 320px;
    padding-bottom: clamp(1.8rem, 5vw, 2.8rem);
    overflow-x: auto;
  }
  #table-container table {
    min-width: 420px;
  }
}
/* ===== Fonte e layout base ===== */
body {
  font-family: 'Syne', sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  color: #111827;
  transition: background 0.5s ease-in-out, color 0.3s ease-in-out;
}

/* ===== Inputs e botões ===== */
input, select, button {
  font-family: inherit;
}

/* Transição suave em botões */
button {
  transition: all 0.2s ease-in-out;
}

/* ===== Scrollbar customizada para #table-container ===== */
#table-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#table-container::-webkit-scrollbar-track {
  background: transparent;
}

#table-container::-webkit-scrollbar-thumb {
  background-color: #6c5ce7; 
  border-radius: 4px;
}

#table-container::-webkit-scrollbar-thumb:hover {
  background-color: #4e3dc9;
}

/* Firefox: scrollbar customizada */
#table-container {
  scrollbar-width: thin;
  scrollbar-color: #6c5ce7 transparent;
}

/* ===== Mensagens e feedback ===== */
#form-message {
  transition: all 0.3s ease-in-out;
  font-weight: 500;
}

/* ===== Responsividade da tabela ===== */
#table-container {
  overflow-x: auto;
  max-height: 60vh; /* limita altura máxima */
}

/* Small screens: ajustes finos para tabela e botões */
@media (max-width: 640px) {
  table {
    font-size: 0.85rem;
  }

  #table-container {
    max-height: 50vh;
  }

  #table-container td, #table-container th {
    padding: 0.25rem 0.5rem;
  }

  #table-container button {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }

  /* Botão de alternância de tema (dark/light) */
  #theme-toggle {
    width: 3.5rem;  /* 14 * 0.25rem */
    height: 2rem;   /* 8 * 0.25rem */
    padding: 0;
    flex-shrink: 0;
    position: relative;
    }

  /* Indicador circular do botão de tema */
    #toggle-indicator {
    width: 1.5rem;   /* tamanho do círculo */
    height: 1.5rem;
    top: 0.250rem;   /* posição vertical dentro do botão */
    left: 0.250rem;  /* posição horizontal inicial */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-in-out, background-color 0.3s ease;
    }

  /* Ícone do botão de tema */
  #toggle-icon {
    font-size: 0.75rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Em modo dark, indicador desliza para direita */
    .dark #toggle-indicator {
    transform: translateX(1.5rem); /* distancia igual à largura do indicador + padding */
    }
}

/* Ajuste de ícone em telas grandes */
@media (min-width: 1024px) {
  #toggle-icon {
    font-size: 0.95rem;
  }
}

/* ===== Animações do toast (notificação) ===== */
@keyframes toast-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes toast-out {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(20px); opacity: 0; }
}

/* Classes de animação controladas via JavaScript */
#toast.show {
  animation: toast-in 300ms cubic-bezier(.2,.9,.2,1) forwards;
}
#toast.hide {
  animation: toast-out 220ms cubic-bezier(.2,.9,.2,1) forwards;
}

/* Variações visuais do toast por tipo de mensagem */
#toast.toast-success { background: #4e3dc9; border-color: #212121; }
#toast.toast-danger  { background: #4e3dc9; border-color: #212121; }
#toast.toast-info    { background: #4e3dc9; border-color: #212121; }