#section-categoria {
  display: flex;
  min-height: 100%;
  flex: 1;
  align-items: center;
  flex-direction: column;
}

h1 {
  margin-top: 40px;
  margin-bottom: 20px;
}

h2 {
  margin: 0;
  color: #334666;
  text-align: center;
}

table {
  width: 70%;
}

td,
th {
  padding: 7px 5px;
}

tbody tr:last-child td:first-child {
  border-bottom-left-radius: 0px;
}
tbody tr:last-child td:last-child {
  border-bottom-right-radius: 0px;
}

button {
  padding: 5px 20px;
  width: fit-content;
}

/* Cores para as linhas da tabela de categorias */
.linha-entrada td {
  background-color: #f0fff4; /* Verde claro */
}

.linha-saida td {
  background-color: #ffe8e8; /* Vermelho/rosa claro */
}

/* Estilo para as novas células de ação */
.td-acao {
  text-align: center;
  vertical-align: middle;
}

/* Estilo genérico para os botões de ação (Regra combinada) */
.ocultar-categoria,
.excluir-categoria,
.btn-editar-icone,
.icone-categoria {
  /* <-- ADICIONE APENAS ESTA LINHA */
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.icone-wrapper {
  display: flex; /* Usar 'flex' em vez de 'inline-flex' */
  align-items: center;
  justify-content: center;
  width: 100%;
  top: 0;
  left: 0;
}

.ocultar-categoria img,
.excluir-categoria img {
  height: 20px;
  width: 20px;
}

/* Estilo para o botão de excluir quando está desativado */
.excluir-categoria:disabled {
  cursor: not-allowed;
}

.excluir-categoria:disabled img {
  opacity: 0.4;
}

/* Garante que os inputs e selects fiquem transparentes para mostrar a cor da linha */
tbody tr select,
tbody tr .input-nome-categoria {
  background-color: transparent;
  width: fit-content;
}

/* Melhora o efeito visual ao passar o rato por cima de uma linha */
tbody tr:hover td {
  background-color: #e9ecef !important;
}

/* Estilo para o input de nome de categoria */
.input-nome-categoria {
  all: unset;
  box-sizing: border-box; /* Garante que padding não aumente o tamanho */
  padding: 5px;
  text-align: center;
  width: 100%; /* Ocupa 100% da célula */
  max-width: 100%; /* Impede que o input ultrapasse o tamanho da célula */
}

/* Define uma largura menor para a coluna NOME (a segunda) */
th:nth-child(2),
td:nth-child(2) {
  width: 30%;
  max-width: 150px; /* Adiciona uma largura máxima para telas maiores */
}

/* Estilo para a célula do botão Adicionar */
.td-adicionar {
  vertical-align: middle;
  text-align: center;
}

#btn-adicionar {
  width: 80%; /* Ocupa a maior parte da célula */
  padding: 8px 16px; /* Ajusta o padding do botão */
  font-size: 14px;
}

/* Estilos para os ícones na tabela */
.icone-categoria {
  height: 24px;
  width: 24px;
  opacity: 0.7;
}

.btn-editar-icone {
  all: unset;
  cursor: pointer;
  display: inline-flex;
}

.btn-editar-icone img {
  height: 24px;
  width: 24px;
  transition: transform 0.2s ease;
}

.btn-editar-icone:hover img {
  transform: scale(1.2);
}

/* Estilos para o botão de escolher ícone no rodapé */
/*
  SOLUÇÃO DEFINITIVA:
  Esta regra aplica-se tanto ao wrapper da imagem (no tbody)
  quanto ao botão (no tfoot), forçando a centralização do seu conteúdo.
*/
.icone-wrapper,
#btn-escolher-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Garante que o botão em si não tenha estilos estranhos */
/* --- SOLUÇÃO FINAL E À PROVA DE BALA PARA O ÍCONE DO TFOOT --- */

/* 1. Prepara a célula da tabela para ser o "mapa" da nossa posição. */
tfoot .td-acao {
  position: relative;
}

/* 2. Arranca o botão do fluxo normal e o posiciona no centro exato do "mapa". */
#btn-escolher-icone {
  all: unset;
  cursor: pointer;
  display: flex; /* Apenas para garantir que a imagem interna se comporte bem */

  /* A MÁGICA: */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#img-novo-icone {
  height: 24px;
  width: 24px;
}

/* Estilos para o Modal de Ícones */
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-container.hidden {
  display: none;
}

.modal-content {
  background-color: #f1f1f1;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 500px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#add-modal-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.modal-content .form-group {
  width: 100%;
}

.modal-content button {
  font-size: 16px;
  padding-inline: 10px;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  border: none;
  background: none;
  color: #334666;
}

#grid-icones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 15px;
  max-height: 400px;
  overflow-y: auto;
  padding: 10px;
}

.btn-selecionar-icone {
  all: unset;
  cursor: pointer;
  padding: 10px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s ease;
}

.btn-selecionar-icone:hover {
  background-color: #c1cbd7;
}

.btn-selecionar-icone img {
  height: 40px;
  width: 40px;
}

/* Regra genérica para inputs e selects (mantida como no seu original) */
select,
input {
  border: none;
  margin: 0;
  padding: 0;
  height: fit-content;
  box-shadow: none;
  background-color: white;
  text-align: center;
}

tfoot select,
tfoot input {
  width: fit-content;
}

tbody input,
tbody select {
  width: 100%;
  box-sizing: border-box;
}

option {
  color: #334666;
  background-color: #f1f1f1;
}

#corpo-tabela-categorias .input-nome-categoria {
  margin: 0;
  padding: 5px; /* Um padding menor para campos de tabela */
  width: 100%;
  box-sizing: border-box; /* Essencial para o padding não aumentar a largura */
}

#input-nova-categoria {
  width: 100%;
  height: fit-content;
}

#btn-adicionar {
  padding: 3px 0;
}

.td-adicionar {
  padding: 0;
}

/* ============================================= */
/* === RESPONSIVIDADE PARA EDIÇÃO EM MODAL ===   */
/* ============================================= */

/* Começa escondido em todas as telas */
.btn-edit-mobile {
  display: none;
}

.nome-categoria-mobile {
  display: none;
}

.mobile-add-row {
  display: none;
}

/* Estilos para os campos do novo modal */
.form-group {
  display: flex;
  flex-direction: column;
  width: 80%;
  margin-bottom: 15px;
}
.form-group label {
  margin-bottom: 5px;
  font-weight: 500;
}
.full-width-input {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
}
.modal-actions {
  margin-top: 20px;
  width: 80%;
}
#btn-salvar-modal {
  width: 100%;
}

/* ============================================= */
/* === RESPONSIVIDADE PARA BOTÕES DO RODAPÉ ===  */
/* ============================================= */

/* Por defeito (desktop), esconde o botão "+ Adicionar" do mobile */
.mobile-only-btn {
  display: none;
  width: fit-content;
}

/* Container dos botões */
.footer-buttons-container {
  display: flex;
  justify-content: center; /* Centraliza os botões em desktop */
  gap: 15px; /* Espaço entre os botões */
}

/* Quando a tela for menor que 768px (tablets e telemóveis) */
@media (max-width: 768px) {
  table {
    width: 90%;
  }
  td,
  th {
    padding: 10px 2px;
  }

  /* Transforma o container para ocupar o espaço todo */
  .footer-buttons-container {
    justify-content: space-around;
  }

  /* Mostra o botão "+ Adicionar" do mobile */
  .mobile-only-btn {
    display: block; /* Ou inline-block */
    min-width: 30%; /* Ocupa quase metade do espaço */
  }

  /* Faz o botão "Exibir Ocultados" ocupar a outra metade */
  #btn-toggle-ocultos {
    min-width: 30%;
  }

  /* Esconde o botão "Salvar Alterações" do desktop */
  .desktop-only-btn {
    display: none;
  }

  /* Em mobile, esconde a linha de adicionar do desktop */
  .desktop-add-row {
    display: none;
  }

  /* E mostra a linha de adicionar do mobile */
  .mobile-add-row {
    display: table-row; /* 'display' correto para uma linha de tabela */
  }

  /* 1. Esconde as colunas de "Tipo" e "Classificação" */
  .col-tipo,
  .col-classificacao {
    display: none;
  }

  /* 2. Na última coluna, esconde o botão de excluir (desktop) */
  .col-acoes .excluir-categoria {
    display: none;
  }

  /* 3. E mostra o botão de editar (mobile) */
  .col-acoes .btn-edit-mobile {
    display: inline-flex; /* ou flex */
  }

  .btn-edit-mobile {
    padding: 0;
  }

  /* 4. Renomeia o cabeçalho da última coluna para "Editar" */
  .col-acoes {
    font-size: 0; /* Esconde o texto original "Excluir" */
  }
  thead .col-acoes::after {
    content: "Editar";
    font-size: 16px; /* Restaura o tamanho do texto (ajuste se necessário) */
  }

  /* 5. Esconde o botão de salvar geral, já que a edição é via modal */
  #btn-salvar {
    display: none;
  }
}

@media (max-width: 688px) {
  td,
  th {
    padding: 10px 2px;
    font-weight: 600;
  }
}

@media (max-width: 500px) {
  td,
  th {
    font-weight: 600;
  }

  #btn-adicionar {
    width: 100%;
    font-size: 14px;
  }

  table,
  input,
  select,
  button {
    font-size: 14px;
  }

  .icone-categoria,
  .btn-editar-icone img,
  #img-novo-icone {
    height: 20px;
    width: 20px;
  }
}