/* Arquivo: public/CSS/colaboradores.css (VERSÃO FINAL - DESIGN UNIFICADO) */

/* ==========================================================================
   Estilos Específicos do Pop-up e Trilha de Etapas
   ========================================================================== */

/* Define o tamanho máximo do pop-up de Novo/Editar Colaborador */
#popupNovoColaborador .popup-content {
    max-width: 70vw; 
    max-height: 90vh; 
}

/* Container principal da trilha de etapas (progress tracker) */
#popupNovoColaborador .linha-do-tempo {
    display: flex; 
    align-items: flex-start;
    justify-content: space-between; 
    position: relative; 
    margin-bottom: 30px;
    width: 100%;
}

/* Cada passo individual (círculo + texto) */
#popupNovoColaborador .etapa-linha {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    color: var(--cor-texto-secundario);
    text-align: center;
    position: relative;
    width: 20%; 
    font-size: 0.8rem;
    overflow-wrap: break-word;
}

/* A LINHA DE CONEXÃO GERADA DINAMICAMENTE POR CADA PASSO */
#popupNovoColaborador .etapa-linha::after {
    content: '';
    position: absolute;
    top: 15px; 
    left: 50%; 
    width: 100%;
    height: 4px;
    background-color: #e0e0e0; 
}

/* Esconde a linha que sai do ÚLTIMO passo */
#popupNovoColaborador .etapa-linha:last-child::after {
    display: none;
}

/* COLORE A LINHA DE VERDE QUANDO O PASSO ESTÁ CONCLUÍDO */
#popupNovoColaborador .etapa-linha.concluida::after {
    background-color: var(--cor-sucesso);
}

/* O círculo com o número do passo */
#popupNovoColaborador .etapa-numero {
    width: 30px;
    height: 30px;
    background-color: #e0e0e0; 
    border-radius: 50%; 
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    font-weight: 600;
    color: #fff; 
    border: 2px solid #e0e0e0;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    position: relative; 
    z-index: 1; 
}

/* Estilo para um passo CONCLUÍDO */
#popupNovoColaborador .etapa-linha.concluida .etapa-numero {
    background-color: var(--cor-sucesso);
    border-color: var(--cor-sucesso);
    color: #fff;
}
#popupNovoColaborador .etapa-linha.concluida {
    color: var(--cor-texto-principal);
}

/* Estilo para o passo ATIVO (atual) */
#popupNovoColaborador .etapa-linha.ativa .etapa-numero {
    background-color: var(--cor-destaque);
    border-color: var(--cor-destaque);
    color: #fff;
}
#popupNovoColaborador .etapa-linha.ativa {
    color: var(--cor-destaque);
    font-weight: bold;
}

/* ==========================================================================
   Layout do Formulário de Cadastro (Todas as Etapas)
   ========================================================================== */

#popupNovoColaborador #formColaborador,
#popupNovoColaborador #formEnderecoColaborador,
#popupNovoColaborador #formContatoColaborador,
#popupNovoColaborador #formDocumentosColaborador,
#popupNovoColaborador #formContratuaisColaborador {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 15px 20px; 
}

#popupNovoColaborador #formColaborador .full-width,
#popupNovoColaborador #formEnderecoColaborador .full-width,
#popupNovoColaborador #formContatoColaborador .full-width,
#popupNovoColaborador #formDocumentosColaborador .full-width,
#popupNovoColaborador #formContratuaisColaborador .full-width {
    grid-column: 1 / -1; 
}

/* Regra para alinhar a etiqueta e a checkbox do "Sem Registro" */
#popupNovoColaborador .label-com-checkbox {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    width: 100%;
}

#popupNovoColaborador .sem-registro {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--cor-texto-secundario);
    font-weight: normal; 
    white-space: nowrap; 
}
#popupNovoColaborador .sem-registro label { order: 1; }
#popupNovoColaborador .sem-registro input { order: 2; }


/* ==========================================================================
   Layout dos Containers de Filtro e Busca na Tela Principal
   ========================================================================== */

#employees #search-container-filtros {
    padding: 10px 20px;
    margin-bottom: -10px; 
}

#employees .filtro-card {
    display: inline-flex; 
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #ffc107; 
    border-radius: 8px;
    background-color: #fffbeb;
    cursor: pointer;
    transition: all 0.3s ease;
    gap: 10px;
}
#employees .filtro-card .filtro-texto {
    white-space: nowrap;
}
#employees .filtro-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: #ff9800;
}
#employees .filtro-card.ativa {
    background-color: #e8f0fe; 
    border-color: #1a73e8;
}
#employees .filtro-card i { font-size: 24px; color: #ff9800; }
#employees .filtro-card.ativa i { color: #1a73e8; }
#employees .filtro-card.ativa strong { color: #1a73e8; }

#employees #search-container-campos {
    display: grid;
    grid-template-columns: repeat(12, 1fr); 
    align-items: end; 
    gap: 15px;
    margin-bottom: 20px;
    padding: 20px;
    background-color: var(--cor-fundo-container);
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

#employees .search-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

#employees #search-container-campos .search-group:nth-of-type(1) { grid-column: span 5; } /* Nome */
#employees #search-container-campos .search-group:nth-of-type(2) { grid-column: span 3; } /* Cargo */
#employees #search-container-campos .search-group:nth-of-type(3) { grid-column: span 4; } /* Departamento */
#employees #search-container-campos .search-group:nth-of-type(4) { grid-column: span 3; } /* CPF */
#employees #search-container-campos .search-group:nth-of-type(5) { grid-column: span 3; } /* Status */

#employees .search-group input,
#employees .search-group select {
    padding: 8px;
    border: 1px solid var(--cor-borda);
    border-radius: 4px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.3s;
    width: 100%;
}

#employees .search-group input:focus,
#employees .search-group select:focus {
    border-color: var(--cor-destaque);
}

#employees .button-group {
    display: flex;
    gap: 10px;
    grid-column: 10 / -1; 
    justify-self: end; 
}

/* ============================================== */
/* Correção Visual Tom Select (Pop-up Colaborador)*/
/* ============================================== */

#popupNovoColaborador .ts-control {
    background-color: #ffffff !important;
}
#popupNovoColaborador .ts-dropdown {
    background-color: #ffffff;
    border: 1px solid #d0d0d0; 
}
#popupNovoColaborador .ts-dropdown .option {
    color: #333333;
}
#popupNovoColaborador .ts-dropdown .option.active,
#popupNovoColaborador .ts-dropdown .option:hover {
    background-color: #f5f5f5;
    color: #000000;
}

/* =================================================== */
/* ESTILOS DE ORDENAÇÃO (Design Unificado #1a237e)     */
/* =================================================== */

/* 1. BARRA AZUL SÓLIDA */
#employees #tabela-colaboradores thead tr {
    background-color: #1a237e !important; /* Azul Escuro Padrão */
    border: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Previne hover na linha inteira */
#employees #tabela-colaboradores thead tr:hover {
    background-color: #1a237e !important; 
}

/* 2. CÉLULA PADRÃO (Sem Mouse) */
#employees #tabela-colaboradores th {
    background-color: #1a237e; 
    color: #ffffff;            /* Letra Branca */
    
    user-select: none;
    position: relative;
    padding: 12px 10px;
    cursor: default; 
    border: none;
    
    transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
}

/* 3. Colunas ordenáveis (data-column) */
#employees #tabela-colaboradores th[data-column] {
    cursor: pointer; 
}

/* 4. EFEITO HOVER (Com Mouse) - Fundo Branco, Letra Azul */
#employees #tabela-colaboradores th[data-column]:hover {
    background-color: #ffffff !important; 
    color: #1a237e !important;            
    border-radius: 4px 4px 0 0;
}

/* 5. COLUNA ATIVA (Já Ordenada) - Fundo Azul, Borda Branca */
#employees #tabela-colaboradores th.sort-asc,
#employees #tabela-colaboradores th.sort-desc {
    background-color: #1a237e; 
    color: #ffffff;
    font-weight: 800;
    border-bottom: 3px solid #ffffff; 
}

/* Se passar o mouse na coluna ativa */
#employees #tabela-colaboradores th.sort-asc:hover,
#employees #tabela-colaboradores th.sort-desc:hover {
    background-color: #ffffff !important;
    color: #1a237e !important;
    border-bottom: 3px solid #1a237e;
}

/* 6. ÍCONES (Setinhas) - Ajustado para Boxicons (<i>) */
#employees #tabela-colaboradores th i {
    font-size: 14px;
    margin-left: 6px;
    vertical-align: middle;
    color: rgba(255, 255, 255, 0.5); /* Branco transparente */
    transition: all 0.1s;
}

/* Hover: Ícone fica Azul */
#employees #tabela-colaboradores th[data-column]:hover i {
    opacity: 1;
    color: #1a237e !important; 
}

/* Ativo: Ícone fica Branco Sólido */
#employees #tabela-colaboradores th.sort-asc i,
#employees #tabela-colaboradores th.sort-desc i {
    color: #ffffff;
    opacity: 1;
}

/* Ativo + Hover: Ícone fica Azul */
#employees #tabela-colaboradores th.sort-asc:hover i,
#employees #tabela-colaboradores th.sort-desc:hover i {
    color: #1a237e !important;
}

/* =================================================== */
/* CORREÇÃO DOS BOTÕES (Para não quebrar texto)        */
/* =================================================== */

/* Garante que os botões de ação nunca quebrem o texto */
#employees .button-group button {
    white-space: nowrap; 
    min-width: fit-content; 
    padding: 8px 16px; 
}

/* Ajuste específico para o botão "Novo Colaborador" */
#employees #btn-novo-colaborador {
    font-weight: 600;
}

/* Ajuste Responsivo */
@media (max-width: 1200px) {
    #employees .button-group {
        grid-column: 1 / -1; 
        justify-content: flex-end; 
        margin-top: 10px;
    }
}