/* ==========================================================================
   Estilos Específicos da Seção e Pop-up de Feedbacks
   ========================================================================== */

/* Define o tamanho do pop-up de Novo Feedback */
#popupNovoFeedback .popup-content {
    max-width: 600px; 
    max-height: 90vh;
}

/* Centraliza a coluna de ações da tabela principal de feedbacks */
#feedbacks .coluna-acoes {
    text-align: center;
}

/* ==========================================================================
   Layout do Formulário de Cadastro (Grid)
   ========================================================================== */

#popupNovoFeedback #formFeedback {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 15px 20px; 
}

#popupNovoFeedback #formFeedback .form-group.full-width,
#popupNovoFeedback #formFeedback .form-buttons.full-width {
    grid-column: 1 / -1; 
}

/* ==========================================================================
   Estilos da Checkbox "Anônimo"
   ========================================================================== */

#popupNovoFeedback #formFeedback .sem-registro {
    display: flex;
    align-items: center; 
    gap: 8px; 
    padding-top: 5px;
    cursor: pointer;
    margin-bottom: 0; 
    grid-column: 1 / -1; 
}
#popupNovoFeedback #formFeedback .sem-registro input[type="checkbox"] {
    width: auto; 
    height: auto;
    flex-shrink: 0; 
    cursor: pointer;
    margin: 0; 
    padding: 0; 
}
#popupNovoFeedback #formFeedback .sem-registro label {
    font-weight: normal;
    font-size: 0.9rem;
    color: var(--cor-texto-secundario);
    cursor: pointer;
    margin: 0; 
    padding: 0;
    display: inline; 
    line-height: 1;  
}

/* ==========================================================================
   Estilos dos Botões do Formulário
   ========================================================================== */

#popupNovoFeedback #confirmarFeedback {
    background-color: var(--cor-sucesso);
    color: #ffffff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background-color 0.2s ease;
}
#popupNovoFeedback #confirmarFeedback:hover {
    background-color: #27ae60; 
}
#popupNovoFeedback #cancelarFeedback {
    background-color: var(--cor-erro); 
    color: #ffffff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background-color 0.2s ease;
    margin-right: 10px; 
}
#popupNovoFeedback #cancelarFeedback:hover {
    background-color: #c0392b; 
}

/* ==========================================================================
   Correção Visual para Campos de Busca (Tom Select)
   ========================================================================== */

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

/* ==========================================================================
   Layout do Container de Filtro
   ========================================================================== */

#feedbacks #feedback-search-container {
    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);
}
#feedbacks .search-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
#feedbacks #feedback-search-container .search-group:nth-of-type(1) { grid-column: span 4; } /* Avaliado */
#feedbacks #feedback-search-container .search-group:nth-of-type(2) { grid-column: span 4; } /* Avaliador */
#feedbacks #feedback-search-container .search-group:nth-of-type(3) { grid-column: span 4; } /* Tipo */

#feedbacks .search-group input,
#feedbacks .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%;
}
#feedbacks .search-group input:focus,
#feedbacks .search-group select:focus {
    border-color: var(--cor-destaque);
}
#feedbacks .button-group {
    display: flex;
    gap: 10px;
    grid-column: 10 / -1; 
    justify-self: end; 
}

/* ==========================================================================
   Estilos da Paginação
   ========================================================================== */

#feedbacks .table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px;
    background-color: var(--cor-fundo-container);
    border-top: 1px solid var(--cor-borda);
    border-radius: 0 0 5px 5px; 
}
#feedbacks .items-per-page {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--cor-texto-secundario);
}
#feedbacks .items-per-page select {
    padding: 5px;
    border-radius: 4px;
    border: 1px solid var(--cor-borda);
    background-color: #fff;
}
#feedbacks .pagination-controls {
    display: flex;
    gap: 5px;
}
#feedbacks .pagination-controls .page-btn {
    border: 1px solid var(--cor-borda);
    background-color: #fff;
    color: var(--cor-destaque);
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    font-weight: 600;
}
#feedbacks .pagination-controls .page-btn:hover {
    background-color: #f0f0f0;
}
#feedbacks .pagination-controls .page-btn.active {
    background-color: var(--cor-destaque);
    color: #fff;
    border-color: var(--cor-destaque);
}

/* =================================================== */
/* ESTILOS PARA ORDENAÇÃO DA TABELA (Design Unificado #1a237e) */
/* =================================================== */

/* 1. BARRA AZUL SÓLIDA */
#feedbacks #tabela-feedbacks 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 */
#feedbacks #tabela-feedbacks thead tr:hover {
    background-color: #1a237e !important; 
}

/* 2. CÉLULA PADRÃO (Sem Mouse) */
#feedbacks #tabela-feedbacks 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) */
#feedbacks #tabela-feedbacks th[data-column] {
    cursor: pointer; 
}

/* 4. EFEITO HOVER (Com Mouse) - Fundo Branco, Letra Azul */
#feedbacks #tabela-feedbacks 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 */
#feedbacks #tabela-feedbacks th.sort-asc,
#feedbacks #tabela-feedbacks th.sort-desc {
    background-color: #1a237e; 
    color: #ffffff;
    font-weight: 800;
    border-bottom: 3px solid #ffffff; 
}

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

/* 6. ÍCONES (Setinhas) - Ajustado para Boxicons (<i>) */
#feedbacks #tabela-feedbacks 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 */
#feedbacks #tabela-feedbacks th[data-column]:hover i {
    opacity: 1;
    color: #1a237e !important; 
}

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

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