/* arquivo assets/css/styles.css */
/* Estilo geral */
.rartsk-task-manager {
    font-family: Arial, sans-serif;
    margin: 20px;
}


/* 5.0 */
/* Botões de Ação */
button {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.mark-complete {
    background-color: #28a745;
    color: white;
}

.mark-complete:hover {
    background-color: #218838;
}



/* Estilo para o botão de prioridade */
.change-priority {
    background-color: #fff;
    border: 1px solid #ccc;
    color: black;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

/* Estilo para o botão de prioridade desabilitado */
.change-priority.disabled {
    background-color: #f0f0f0; /* Fundo cinza claro */
    border-color: #ccc; /* Borda cinza */
    color: gray; /* Texto cinza */
    cursor: not-allowed; /* Cursor de não permitido */
    pointer-events: none; /* Desativa eventos de clique */
}



/* Estilos para prioridades */
.priority-1 {
    background-color: green;
    color: white;
    border: none;
    padding: 2px 8px;
    border-radius: 8px;
    cursor: pointer;
}
/* Estilos para prioridades */
.priority-1:hover {
		 border: 1px solid yellow;
    border-radius: 8px;

}
.priority-2 {
    background-color: yellow;
    color: black;
    border: none;
    padding: 2px 8px;
    border-radius: 8px;
    cursor: pointer;
}
/* Estilos para prioridades */
.priority-2:hover {
	 border: 1px solid red;
    border-radius: 8px;
}
.priority-3 {
    background-color: red;
    color: white;
    border: none;
    padding: 2px 8px;
    border-radius: 8px;
    cursor: pointer;
}
/* Estilos para prioridades */
.priority-3:hover {
		 border: 1px solid green;
    border-radius: 8px;

}

/* Estilo para status */
/* Estilo para o ícone de conclusão */
.mark-complete-icon {
    margin-left: 8px; /* Espaçamento entre o status e o ícone */
    color: gray; /* Cor padrão do ícone */
    font-size: 16px; /* Tamanho do ícone */
    cursor: pointer; /* Cursor de clique */
	border-color: green;
}

.mark-complete-hover {
    margin-left: 8px; /* Espaçamento entre o status e o ícone */
    color: green; /* Cor padrão do ícone */
    font-size: 16px; /* Tamanho do ícone */
    cursor: pointer; /* Cursor de clique */
	border-color: green;
}

/* Estilo para o ícone desabilitado */
.mark-complete-icon.disabled {
    color: green; /* Cor cinza para ícone desabilitado */
    cursor: not-allowed; /* Cursor de não permitido */
    pointer-events: none; /* Desativa eventos de clique */
}

/* Estilo para o ícone desabilitado */
.mark-complete-icon.hidden {
    display: none; /* some o icone*/
    cursor: not-allowed; /* Cursor de não permitido */
    pointer-events: none; /* Desativa eventos de clique */
}



/* Estilo para o ícone desabilitado */
.mark-cancel-icon.hidden {
    display: none; /* some o icone*/
    cursor: not-allowed; /* Cursor de não permitido */
    pointer-events: none; /* Desativa eventos de clique */
}
/* Estilo para a linha concluída */
.completed-row {
    background-color: #f0f0f0; /* Fundo cinza claro */
    color: gray; /* Texto cinza */
}

/* Estilo para o ícone de conclusão */
.mark-cancel-icon {
    margin-left: 8px; /* Espaçamento entre o status e o ícone */
    color: gray; /* Cor padrão do ícone */
    font-size: 16px; /* Tamanho do ícone */
    cursor: pointer; /* Cursor de clique */
	border-color: green;
}
.mark-cancel-hover {
    margin-left: 8px; /* Espaçamento entre o status e o ícone */
    color: black; /* Cor padrão do ícone */
    font-size: 16px; /* Tamanho do ícone */
    cursor: pointer; /* Cursor de clique */
	border-color: green;
}
/* Estilo para o ícone desabilitado */
.mark-cancel-icon.disabled {
    color: black; /* Cor cinza para ícone desabilitado */
    cursor: not-allowed; /* Cursor de não permitido */
    pointer-events: none; /* Desativa eventos de clique */
}

/* Estilo para a coluna de responsáveis */
.responsibles {
    font-size: 14px;
    color: #333;
}

.completed-row .responsibles {
    color: gray; /* Texto cinza para linhas concluídas */
}


/* Estilo para as colunas de datas */
th:nth-child(7), td:nth-child(7),
th:nth-child(8), td:nth-child(8) {
    text-align: center; /* Centraliza o texto */
    width: 150px; /* Largura fixa */
}

.completed-row th:nth-child(7),
.completed-row td:nth-child(7),
.completed-row th:nth-child(8),
.completed-row td:nth-child(8) {
    color: gray; /* Texto cinza para linhas concluídas */
}


/* Estilo para a célula do ID com ícone de seta para baixo*/
/* Estilo para a célula do ID */
.task-id-cell {
    height: 100%; /* Garante que a célula ocupe toda a altura da linha */
    vertical-align: middle; /* Alinha o conteúdo verticalmente no centro */
    white-space: nowrap; /* Evita quebra de linha */
}

/* Estilo para o ícone de seta */
.toggle-description-icon {
    display: inline-block;
    vertical-align: middle; /* Alinha o ícone ao meio */
    cursor: pointer;
    color: #0073aa;
    font-size: 14px;
    margin-right: 8px; /* Espaço entre o ícone e o ID */
    transition: transform 0.3s ease; /* Animação suave ao girar o ícone */
}

/* Altera o ícone quando a descrição está visível */
.toggle-description-icon.expanded {
    transform: rotate(180deg); /* Gira o ícone para cima (▲) */
}

/* Estilo para o ID */
.task-id {
    display: inline-block;
    vertical-align: middle; /* Alinha o ID ao meio */
    font-weight: bold;
    color: #333;
}

.link:hover {
    cursor: pointer; /* Cursor de clique */
}

/* Estilo para o conteúdo dentro do editor WYSIWYG */
body {
    line-height: 1.2; /* Reduz o espaçamento entre as linhas */
}

p {
    margin: 0; /* Remove margens das tags <p> */
    line-height: 1.2; /* Reduz o espaçamento entre as linhas */
}

br {
    display: block; /* Garante que as quebras de linha sejam renderizadas corretamente */
    content: ""; /* Evita espaços extras */
}
/* Estilo para listas no editor WYSIWYG */
ul, ol {
    margin: 0; /* Remove margens externas */
    padding-left: 20px; /* Adiciona um espaçamento à esquerda para os bullets/números */
    line-height: 1; /* Define o espaçamento entre os itens da lista */
}

li {
    margin: 0; /* Remove margens dos itens da lista */
    padding: 0; /* Remove espaçamentos internos */
    line-height: 1; /* Define o espaçamento entre as linhas dentro dos itens */
}
/* Estilo para o campo de descrição no frontend */
.description-row p {
    margin: 0; /* Remove margens das tags <p> */
    line-height: 1.2; /* Reduz o espaçamento entre as linhas */
}

.description-row br {
    display: block; /* Garante que as quebras de linha sejam renderizadas corretamente */
    content: ""; /* Evita espaços extras */
}

/******************************************************** Estilo da página ********************************************************/


/* Estilo para o container principal */
#content-wrap {
    max-width: 100%; /* Remove a largura máxima padrão */
    padding: 20px; /* Adiciona espaçamento interno */
    margin: 0 auto; /* Centraliza o conteúdo */
}

/* Estilo para a tabela */
.rartsk-task-manager table {
    width: 96%; /* Faz a tabela ocupar toda a largura disponível */
    border-collapse: collapse; /* Remove espaços entre as células */
    table-layout: fixed; /* Garante que as colunas tenham larguras fixas */
    margin: 0 auto; /* Centraliza a tabela */
}

/* Estilo para as células da tabela */
.rartsk-task-manager table th,
.rartsk-task-manager table td {
	    text-transform: none !important; /* Sobrescreve qualquer regra anterior */
    padding: 4px 6px; /* Espaçamento interno das células */
    text-align: left; /* Alinha o texto à esquerda */
   /* white-space: nowrap; /* Evita que o texto quebre em várias linhas */
   /* overflow: hidden; /* Esconde o conteúdo que excede a largura */
   /* text-overflow: ellipsis; /* Adiciona reticências (...) ao conteúdo truncado */
    border: 1px solid #ddd; /* Borda das células */
}

/* Estilo para cabeçalhos da tabela */
.rartsk-task-manager table th {
    background-color: #f9f9f9; /* Fundo claro para os cabeçalhos */
    font-weight: bold; /* Texto em negrito */
}

/* Estilo para a rolagem horizontal */
.rartsk-task-manager {
    overflow-x: auto; /* Adiciona rolagem horizontal se necessário */
    width: 100%; /* Garante que o wrapper ocupe toda a largura */
}

/* Estilo para linhas concluídas */
.completed-row {
    background-color: #f0f0f0; /* Fundo cinza claro */
    color: gray; /* Texto cinza */
}

/* Estilo específico para colunas menores (ex.: ID) */
.rartsk-task-manager table th:nth-child(1),
.rartsk-task-manager table td:nth-child(1) {
    width: 60px; /* Largura máxima para a coluna de ID */
}

/* Estilo específico para colunas menores (ex.: ID) */
.rartsk-task-manager table th:nth-child(2),
.rartsk-task-manager table td:nth-child(2) {
    width: 400px; /* Largura fixa para a coluna */
    white-space: nowrap; /* Impede quebra de linha */
    overflow: hidden; /* Esconde o conteúdo que excede a largura */
    text-overflow: ellipsis; /* Adiciona reticências (...) ao conteúdo truncado */
}

/* Estilo específico para colunas menores (ex.: ID) */
.rartsk-task-manager table th:nth-child(3),
.rartsk-task-manager table td:nth-child(3) {
    width: 130px; /* Largura fixa para a coluna */
    white-space: nowrap; /* Impede quebra de linha */
    overflow: hidden; /* Esconde o conteúdo que excede a largura */
    text-overflow: ellipsis; /* Adiciona reticências (...) ao conteúdo truncado */
}

/* Estilo específico para colunas menores (ex.: ID) */
.rartsk-task-manager table th:nth-child(4),
.rartsk-task-manager table td:nth-child(4) {
    width: 180px; /* Largura fixa para a coluna */
    white-space: nowrap; /* Impede quebra de linha */
    overflow: hidden; /* Esconde o conteúdo que excede a largura */
    text-overflow: ellipsis; /* Adiciona reticências (...) ao conteúdo truncado */
}


/* Estilo específico para colunas menores (ex.: ID) */
.rartsk-task-manager table th:nth-child(5),
.rartsk-task-manager table td:nth-child(5) {
    width: 130px; /* Largura fixa para a coluna */
    white-space: nowrap; /* Impede quebra de linha */
    overflow: hidden; /* Esconde o conteúdo que excede a largura */
    text-overflow: ellipsis; /* Adiciona reticências (...) ao conteúdo truncado */
}

/* Estilo específico para colunas menores (ex.: ID) */
.rartsk-task-manager table th:nth-child(6),
.rartsk-task-manager table td:nth-child(6) {
    width: 130px; /* Largura fixa para a coluna */
    white-space: nowrap; /* Impede quebra de linha */
    overflow: hidden; /* Esconde o conteúdo que excede a largura */
    text-overflow: ellipsis; /* Adiciona reticências (...) ao conteúdo truncado */
}

/* Estilo específico para colunas menores (ex.: ID) */
.rartsk-task-manager table th:nth-child(7),
.rartsk-task-manager table td:nth-child(7) {
    width: 130px; /* Largura fixa para a coluna */
    white-space: nowrap; /* Impede quebra de linha */
    overflow: hidden; /* Esconde o conteúdo que excede a largura */
    text-overflow: ellipsis; /* Adiciona reticências (...) ao conteúdo truncado */
}

/* Estilo específico para colunas menores (ex.: ID) */
.rartsk-task-manager table th:nth-child(8),
.rartsk-task-manager table td:nth-child(8) {
    width: 130px; /* Largura fixa para a coluna */
    white-space: nowrap; /* Impede quebra de linha */
    overflow: hidden; /* Esconde o conteúdo que excede a largura */
    text-overflow: ellipsis; /* Adiciona reticências (...) ao conteúdo truncado */
}

/* Estilo específico para colunas menores (ex.: ID) */
.rartsk-task-manager table th:nth-child(9),
.rartsk-task-manager table td:nth-child(9) {
    width: 200px; /* Largura fixa para a coluna */
  
}


/* Estilo para a tabela tasks-table */
.rartsk-task-manager #tasks-table {
    width: 98%; /* Garante que a tabela ocupe toda a largura disponível */
    border-collapse: collapse; /* Remove espaços entre as células */
    /*table-layout: auto; /* Permite que o navegador ajuste as colunas ao conteúdo */
}

/* Estilo para as células */
.rartsk-task-manager #tasks-table th,
.rartsk-task-manager #tasks-table td {
    padding: 2px; /* Espaçamento interno das células */
    text-align: left; /* Alinha o texto à esquerda */
    /*white-space: nowrap; /* Evita quebra de linha no conteúdo */
    overflow: hidden; /* Esconde o conteúdo que excede a largura */
    text-overflow: ellipsis; /* Adiciona reticências (...) ao conteúdo truncado */
}

/* Estilo para destacar a linha ao passar o mouse */
.rartsk-task-manager table tr:hover {
    background-color: #dfe8e8; /* Cor de fundo cinza claro */
}
/****************************************************************************************************************/
/********************************************** Add-task-modal ***********************************************/
/* 2.0 begin*/
/* Estilo para a modal */
.modal {
    display: none;
    position: fixed;
    z-index: 150;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: #fff;
    margin: 2% auto;
    padding: 20px;
    border-radius: 8px;
    width: 96%; /* Aumenta a largura do modal */
    max-width: 96%; /* Ocupa até 90% da largura da tela */
	max-height: 90%; /* Ocupa até 90% da largura da tela */
		height: 90%; /* Ocupa até 90% da largura da tela */

    position: relative;
    overflow-y: auto; /* Permite rolagem se o conteúdo for muito grande */
} 


/* Layout do contêiner principal */
.modal-container {
    display: flex;
    flex-direction: column; /* Alinha os elementos verticalmente */
    gap: 5px; /* Espaçamento entre as colunas e o botão */
    height: 100%; /* Garante que o contêiner ocupe toda a altura disponível */
}

/* Estilo para desativar o scroll da página */
body.modal-open {
    overflow: hidden;
    position: fixed; /* Impede que a página role */
    width: 100%; /* Garante que a largura não mude */
}

/* Layout geral das colunas */
.form-columns {
    display: flex; /* Ativa o layout flexível */
    gap: 1px; /* Espaçamento entre as colunas */
	    flex: 1; /* As colunas ocupam todo o espaço disponível */
    height: 100%;
    align-items: stretch; /* Garante que todas as colunas tenham a mesma altura */
}

/* Estilo das colunas */
.column {
    flex: 1; /* Distribui espaço igualmente entre as colunas */
    padding: 10px;
 margin-top:1px;

    overflow-y: auto; /* Permite rolagem se o conteúdo for grande */
}

/* Coluna 1: Descrição */
.column-desc {
    flex: 2; /* Largura inicial */
}

/* Coluna 2: Meio */
.column-mid {
    flex: 1; /* Largura inicial */
}

/* Coluna 3: Cotações */
.column-quote {
    flex: 3; /* Largura inicial */
    overflow-y: auto; /* Permite rolagem se o conteúdo for grande */
	    max-height: 100%;
}

/* Botão de seta */
.toggle-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    margin-left: -10px; /* Ajusta a posição da seta */
    align-self: center; /* Centraliza verticalmente */
}
.column.bordered {
    border: 1px solid #e0e0e0; /* Contorno cinza claro */
    border-radius: 8px;
    padding: 15px;
}

/* Estilo para o ícone de remoção */
.remove-icon {
    text-align: center; /* Centraliza o ícone na célula */
    cursor: pointer; /* Altera o cursor para indicar que é clicável */
}

.remove-icon .remove-item-row-btn {
    color: white; /* Escurece o ícone ao passar o mouse */
	    background-color: #f02b2b;

    font-size: 12px; /* Tamanho do ícone */
}

.remove-icon .remove-item-row-btn:hover {
    color: white; /* Escurece o ícone ao passar o mouse */
    background-color: #b01919;

}
/* Tabela de Orçamentos */
/* Estilo para a terceira coluna */
#quotes-column {
    display: flex;
    flex-direction: column;
    padding: 15px;
    border-radius: 8px;
}


/* Estilo para as tabelas */
#quotes-table,
#quote-items-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 5px;
}

/* Estilo para cabeçalhos e células das tabelas */
#quotes-table th,
#quotes-table td,
#quote-items-table th,
#quote-items-table td {
	    white-space: nowrap; /* Impede quebra de linha */
    padding: 6px; /* Espaçamento interno reduzido para linhas mais finas */
    text-align: left; /* Alinhamento à esquerda */
    font-size: 12px; /* Tamanho de fonte consistente */
}

/* Estilo para cabeçalhos das tabelas */
#quotes-table th,
#quote-items-table th {
    background-color: #f9f9f9; /* Fundo claro para cabeçalhos */
    font-weight: bold; /* Texto em negrito */
}

/* Estilo para a linha selecionada (apenas na tabela #quotes-table) */
#quotes-table tbody tr.selected-row {
    background-color: #f0f8ff; /* Azul claro */
    font-weight: bold; /* Destaca o texto */
}

/* Hover para melhorar a interação (apenas na tabela #quotes-table) */
#quotes-table tbody tr:hover {
    background-color: #f9f9f9; /* Fundo claro ao passar o mouse */
}

/* Estilo para centralizar o conteúdo da célula cost-history */
#quote-items-table td.cost-history {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    height: 50px !important;
	    border: none !important;
    padding: 8px !important;
    background-color: transparent !important;
    white-space: nowrap !important;
	cursor:pointer;
}

#quote-items-table td.cost-current {
   width: 100px;
}

/* Agrupamento de campos */
.form-group {
	border-top:  1px solid #ccc;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
padding-top:10px;
	gap: 20px; /* Reduzir o espaçamento entre o label e o input */

}
.form-group label {
    flex: 1;
    font-weight: bold;
    margin-right: 5px;
}
.form-group input {
    flex: 3.5;
}



/* Scroll na área de conteúdo */
.scrollable-content {
    flex: 1; /* Ocupa todo o espaço disponível */
    overflow-y: auto; /* Habilita o scroll vertical */
    max-height: 535px; /* Altura máxima antes de ativar o scroll */
    margin-bottom: 1px; /* Espaço entre o conteúdo e os botões */
}


/* Formulário de Adicionar Cotação */
#add-quote-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 5px;
}


/* Botões */
/* Estilo para o grupo de botões */
.button-group {
    display: flex;
    gap: 10px; /* Espaçamento entre os botões */
    align-items: center; /* Alinha os botões verticalmente */
    margin-top: 15px; /* Espaçamento acima do grupo de botões */
}

/* Estilo para o botão "+" */
#add-item-row-btn {
    background-color: #28a745;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

#add-item-row-btn:hover {
    background-color: #218838;
}

/* Estilo para o botão "Salvar" */
#save-quote-btn {
    background-color: #007bff;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

#save-quote-btn:hover {
    background-color: #0056b3;
}

/* Estilo para o botão "Cancelar" */
#cancel-quote-btn {
    background-color: #6c757d;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

#cancel-quote-btn:hover {
    background-color: #5a6268;
}


/* 2.0 end*/
.close-modal, .close-history-modal {
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 24px;
    cursor: pointer;
}


.form-column input,
.form-column select,
.form-column textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.date-field {
    position: relative;
}

.calendar-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #aaa;
}

/* Estilo para o editor WYSIWYG */
#wp-task-description-wrap {
    height: auto; /* Permite que o editor cresça conforme necessário */
}

#task-description_ifr {
    min-height: 300px; /* Define uma altura mínima para o iframe do editor */
}

/* Estilo para os campos de data */
.datepicker {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fff; /* Certifique-se de que o fundo seja branco */
    color: #333; /* Certifique-se de que o texto seja visível */
    cursor: pointer; /* Altera o cursor para indicar que é clicável */
}

.datepicker[readonly] {
    background-color: #fff; /* Garante que o fundo permaneça branco mesmo se readonly */
    color: #333; /* Mantém o texto visível */
    opacity: 1; /* Remove qualquer transparência que possa estar aplicada */
}
/**************************************************************************************************/

/* 3.0 */
/* Estilo para a lista suspensa de sugestões */
.product-suggestions, .supplier-suggestions {
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    max-height: 150px;
    overflow-y: auto;
    z-index: 150;
    width: 430px;
    box-sizing: border-box;
}

.product-suggestions li, .supplier-suggestions li {
    padding: 8px;
    cursor: pointer;
    list-style: none;
    border-bottom: 1px solid #eee;
}

.product-suggestions li:hover, .supplier-suggestions li:hover{
    background-color: #f0f8ff;
}
/* */
/* Estilo para o modal */
#history-modal {
    display: none;
    position: fixed;
    z-index: 200;
    left: 50px; /* Posiciona o modal à esquerda */
    top: 50px;
    width: 45%; /* Largura fixa */
    height: auto;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 8px;
    overflow-y: auto;
    max-height: 90vh;
}

#history-modal .modal-content {
	    width: 100%; /* Largura fixa */

    background-color: #fff;
    padding: 1px;
    border-radius: 8px;
}

#history-modal table {
    width: 100%;
    border-collapse: collapse;
}

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

#history-modal th {
    background-color: #f9f9f9;
    font-weight: bold;
}

/*4.0 - habilitar desabilitar aprovado/reprovado */
/* Estilo para botões desabilitados */
.mark-approved-icon.disabled,
.mark-rejected-icon.disabled {
    color: gray; /* Cor cinza para indicar que está desabilitado */
    cursor: not-allowed; /* Cursor de não permitido */
    pointer-events: none; /* Desativa eventos de clique */
}

/* Estilo para botões habilitados */
.mark-approved-icon,
.mark-rejected-icon {
    color: green; /* Cor padrão para botão aprovado */
    cursor: pointer; /* Cursor de clique */
    pointer-events: auto; /* Habilita eventos de clique */
}
/*--- fim 4.0 --*/
/* 6.0 Kanban */
/* Botão de alternância de visão */
.view-toggle-button {
    margin-bottom: 0px;
    text-align: right;
}

#toggle-view-btn {
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
}



/* Novo filtro */




.filter-input {
	width: 80%;	
 flex: 1; /* O campo ocupa o espaço disponível */
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box; /* Inclui padding e borda na largura total */
}

/* Exibe o ícone apenas quando o campo de filtro não está vazio */
.filter-input:not(:placeholder-shown) + .clear-filter-icon,
#filter-start-date[value]:not([value=""]) + .clear-filter-icon,
#filter-end-date[value]:not([value=""]) + .clear-filter-icon {
    display: inline-block;

}

#filter-status:not(:placeholder-shown) + .clear-filter-icon {
    display: inline-block;

}

/* Estilo padrão para os ícones de filtro */
.status-filter-icon {
    margin-left: 8px; /* Espaçamento entre o campo de filtro e os ícones */
    font-size: 16px; /* Tamanho dos ícones */
    cursor: pointer; /* Cursor de clique */
    transition: color 0.3s ease; /* Transição suave para a cor */
}









.complete-filter-icon {
    color: green; /* Cor verde para o ícone de concluir */
}

.cancel-filter-icon {
    color: black; /* Cor preta para o ícone de cancelar */
}

/* Estado inativo (cinza) */
.status-filter-icon.inactive {
    color: gray; /* Cor cinza para ícones inativos */
    cursor: pointer; /* Mantém o cursor como "pointer" para permitir cliques */
}

.filter-input {
	width: 90%;
}

/* Container principal dos filtros */
.filters-container {
    flex-wrap: wrap; /* Permite que os filtros quebrem para a próxima linha se necessário */
    gap: 2px; /* Espaçamento entre os filtros */
    margin-bottom: 10px; /* Espaçamento abaixo dos filtros */
    background-color: #f9f9f9; /* Fundo claro para destacar os filtros */
    border: 1px solid #ddd; /* Borda para separar os filtros da tabela */
    border-radius: 8px; /* Bordas arredondadas */
    min-width: 1500px;
   
    padding: 5px;
	margin-top: 5px; /* Reduz a margem superior */
}


/* Linha de filtros */
.filter-row {
    display: flex;
    gap: 10px;
    width: 100%;
}
/* Célula de filtro individual */
.filter-cell {
    display: flex;
    flex-direction: column; /* Empilha os elementos verticalmente */
    align-items: center; /* Centraliza verticalmente os elementos */
    gap: 5px; /* Espaçamento entre os elementos */
    width: 100%; /* Ocupa a largura total disponível */
}


/* Rótulos dos filtros */
.filter-cell label {
    font-size: 12px;
    color: #666; /* Cor cinza para o rótulo */
    font-weight: bold;
    text-align: left; /* Alinha o texto à esquerda */
}

/* Ícones de limpeza */
.clear-filter-icon {
    display: none; /* Oculto inicialmente */
    color: #aaa;
    cursor: pointer;
    font-size: 16px;
    margin-left: 5px; /* Espaçamento à esquerda */

}

/* Hover nos ícones de limpeza */
.clear-filter-icon:hover {
    color: #ff4d4d; /* Vermelho suave ao passar o mouse */
}

/* Grupo de input + ícone */
.input-icon-group {
    display: flex;
    align-items: center; /* Centraliza verticalmente o input e o ícone */
    gap: 5px; /* Espaçamento entre o input e o ícone */
    width: 100%; /* Ocupa a largura total disponível */
}

/* Contêiner do filtro de status */
.status-filter-container {
    display: flex; /* Habilita Flexbox */
    align-items: center; /* Alinha verticalmente os itens */
    gap: 5px; /* Espaçamento entre os elementos */
}

/* Larguras específicas com base no data-column-index */
.filter-cell[data-column-index="0"] {
    width: 70px; /* Largura pequena */
}

.filter-cell[data-column-index="1"] {
    width: 400px; /* Largura média */
}

.filter-cell[data-column-index="2"] {
    width: 200px; /* Largura grande */
}

.filter-cell[data-column-index="3"] {
    width: 200px; /* Largura personalizada para Prioridade */
}

.filter-cell[data-column-index="4"] {
    width: 180px; /* Largura pequena */
}

.filter-cell[data-column-index="5"] {
    width: 200px; /* Largura média */
}

.filter-cell[data-column-index="6"] {
    width: 150px; /* Largura grande */
}

.filter-cell[data-column-index="7"] {
    width: 150px; /* Largura personalizada para Prioridade */
}
.filter-cell[data-column-index="8"] {
    width: 300px; /* Largura personalizada para Prioridade */
}



/* Estilo para o contêiner dos botões */
.activity-menu {
    display: flex;
    justify-content: space-between; /* Alinha um botão à esquerda e outro à direita */
    align-items: center; /* Centraliza verticalmente os botões */
    margin-bottom: 5px; /* Espaçamento abaixo dos botões */
}