/* Enhanced Search UI Components - Estilos para componentes de busca melhorados */

/* Modal de busca global */
#enhanced-global-search {
    animation: fadeIn 0.2s ease-out;
}

#enhanced-global-search .modal-content {
    animation: slideDown 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideDown {
    from { 
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Botões de filtro de entidade */
.search-filter-btn {
    @apply px-3 py-1.5 text-sm font-medium rounded-lg transition-all duration-200;
    @apply bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300;
    @apply hover:bg-gray-200 dark:hover:bg-gray-600;
}

.search-filter-btn.active {
    @apply bg-blue-600 text-white shadow-md;
    @apply hover:bg-blue-700;
}

.search-filter-btn i {
    @apply mr-1.5;
}

/* Itens de resultado de busca */
.search-result-item {
    @apply transition-all duration-200;
    @apply border border-transparent;
}

.search-result-item:hover {
    @apply border-blue-200 dark:border-blue-700;
    @apply shadow-sm;
}

.search-result-item.selected {
    @apply bg-blue-50 dark:bg-blue-900/30;
    @apply border-blue-300 dark:border-blue-600;
}

/* Histórico de busca */
.search-history-item {
    @apply transition-colors duration-200;
}

.search-history-item:hover {
    @apply text-blue-600 dark:text-blue-400;
}

/* Teclas de atalho */
.kbd {
    @apply inline-flex items-center px-2 py-1 text-xs font-mono;
    @apply bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300;
    @apply border border-gray-300 dark:border-gray-600 rounded;
    @apply shadow-sm;
}

/* Filtros rápidos */
.quick-filter-btn {
    @apply transition-all duration-200;
    @apply hover:shadow-sm hover:scale-105;
}

.quick-filter-btn:active {
    @apply scale-95;
}

/* Filtros sugeridos */
.suggested-filter-btn {
    @apply transition-all duration-200;
    @apply hover:shadow-sm;
}

.suggested-filter-btn:hover {
    @apply transform translate-x-1;
}

/* Filtros salvos */
.saved-filter-item {
    @apply transition-all duration-200;
}

.saved-filter-item:hover {
    @apply transform -translate-y-0.5;
}

.saved-filter-item .apply-filter-btn,
.saved-filter-item .edit-filter-btn,
.saved-filter-item .delete-filter-btn {
    @apply transition-all duration-200;
    @apply opacity-70 hover:opacity-100;
}

/* Componente de busca avançada */
.advanced-search-panel {
    @apply bg-white dark:bg-gray-800;
    @apply border border-gray-200 dark:border-gray-700;
    @apply rounded-xl shadow-lg;
    @apply p-6;
}

.advanced-search-panel .filter-group {
    @apply space-y-4;
}

.advanced-search-panel .filter-group h3 {
    @apply text-lg font-semibold text-gray-900 dark:text-gray-100;
    @apply border-b border-gray-200 dark:border-gray-700 pb-2;
}

/* Campos de filtro */
.filter-field {
    @apply space-y-2;
}

.filter-field label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300;
}

.filter-field input,
.filter-field select {
    @apply w-full px-3 py-2;
    @apply bg-white dark:bg-gray-900;
    @apply border border-gray-300 dark:border-gray-600;
    @apply rounded-lg;
    @apply focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
    @apply transition-colors duration-200;
}

.filter-field input:focus,
.filter-field select:focus {
    @apply outline-none;
}

/* Tags de filtro ativo */
.active-filter-tag {
    @apply inline-flex items-center gap-2;
    @apply px-3 py-1.5 text-sm;
    @apply bg-blue-100 dark:bg-blue-900;
    @apply text-blue-700 dark:text-blue-300;
    @apply rounded-full;
    @apply transition-all duration-200;
}

.active-filter-tag:hover {
    @apply bg-blue-200 dark:bg-blue-800;
}

.active-filter-tag .remove-btn {
    @apply w-4 h-4 rounded-full;
    @apply bg-blue-200 dark:bg-blue-700;
    @apply text-blue-600 dark:text-blue-300;
    @apply hover:bg-blue-300 dark:hover:bg-blue-600;
    @apply cursor-pointer;
    @apply transition-colors duration-200;
}

/* Contador de resultados */
.results-counter {
    @apply text-sm text-gray-600 dark:text-gray-400;
    @apply bg-gray-100 dark:bg-gray-800;
    @apply px-3 py-1 rounded-full;
}

/* Loading states */
.search-loading {
    @apply animate-pulse;
}

.search-loading .skeleton {
    @apply bg-gray-200 dark:bg-gray-700 rounded;
}

.search-loading .skeleton.h-4 {
    @apply h-4;
}

.search-loading .skeleton.h-6 {
    @apply h-6;
}

.search-loading .skeleton.w-full {
    @apply w-full;
}

.search-loading .skeleton.w-3/4 {
    @apply w-3/4;
}

/* Estados vazios */
.empty-state {
    @apply text-center py-12;
    @apply text-gray-500 dark:text-gray-400;
}

.empty-state i {
    @apply text-4xl mb-4 opacity-50;
}

.empty-state h3 {
    @apply text-lg font-medium mb-2;
}

.empty-state p {
    @apply text-sm;
}

/* Responsividade */
@media (max-width: 640px) {
    #enhanced-global-search .modal-content {
        @apply mx-2 mt-4;
    }
    
    .search-filter-btn {
        @apply text-xs px-2 py-1;
    }
    
    .quick-filter-btn {
        @apply text-xs px-2 py-1;
    }
    
    .advanced-search-panel {
        @apply p-4;
    }
}

/* Animações de entrada */
.fade-in {
    animation: fadeIn 0.3s ease-out;
}

.slide-up {
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Highlight de texto em resultados */
.search-highlight {
    @apply bg-yellow-200 dark:bg-yellow-500/40;
    @apply text-gray-900 dark:text-gray-900;
    @apply px-1 rounded;
    @apply font-medium;
}

/* Badges de tipo */
.type-badge {
    @apply inline-flex items-center;
    @apply px-2 py-0.5 text-xs font-medium;
    @apply rounded-full;
}

.type-badge.aluno {
    @apply bg-blue-100 dark:bg-blue-900;
    @apply text-blue-700 dark:text-blue-300;
}

.type-badge.fato {
    @apply bg-red-100 dark:bg-red-900;
    @apply text-red-700 dark:text-red-300;
}

.type-badge.conduta {
    @apply bg-purple-100 dark:bg-purple-900;
    @apply text-purple-700 dark:text-purple-300;
}

/* Indicadores de status */
.status-indicator {
    @apply w-2 h-2 rounded-full;
}

.status-indicator.active {
    @apply bg-green-500;
}

.status-indicator.pending {
    @apply bg-yellow-500;
}

.status-indicator.inactive {
    @apply bg-gray-400;
}

/* Tooltips para filtros */
.filter-tooltip {
    @apply absolute z-50;
    @apply bg-gray-900 dark:bg-gray-100;
    @apply text-white dark:text-gray-900;
    @apply text-xs px-2 py-1 rounded;
    @apply opacity-0 pointer-events-none;
    @apply transition-opacity duration-200;
}

.filter-tooltip.show {
    @apply opacity-100;
}

/* Separadores visuais */
.search-separator {
    @apply border-t border-gray-200 dark:border-gray-700;
    @apply my-4;
}

/* Botões de ação rápida */
.quick-action-btn {
    @apply inline-flex items-center gap-1;
    @apply px-2 py-1 text-xs;
    @apply bg-gray-100 dark:bg-gray-700;
    @apply text-gray-600 dark:text-gray-300;
    @apply rounded hover:bg-gray-200 dark:hover:bg-gray-600;
    @apply transition-colors duration-200;
}

/* Melhorias de acessibilidade */
.search-result-item:focus,
.quick-filter-btn:focus,
.suggested-filter-btn:focus {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2;
    @apply ring-offset-white dark:ring-offset-gray-800;
}

/* Estados de carregamento específicos */
.search-input-loading::after {
    content: '';
    @apply absolute right-3 top-1/2 -translate-y-1/2;
    @apply w-4 h-4 border-2 border-blue-500 border-t-transparent;
    @apply rounded-full animate-spin;
}

/* Melhorias visuais para dark mode */
@media (prefers-color-scheme: dark) {
    .search-result-item:hover {
        @apply bg-gray-700/50;
    }
    
    .quick-filter-btn:hover {
        @apply shadow-lg shadow-black/20;
    }
}