@extends('sistema.layout')
@section('titulo', 'Processos')
@section('conteudo')
    <div class="row">
        <div class="col-lg-12 mb-3">
            <div class="pagetitle">
                <h1 class="fw-bold text-dark mb-2">Gestão de Processos</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb small">
                        <li class="breadcrumb-item">
                            <a href="{{ route('dashboard') }}">Dashboard</a>
                        </li>
                        <li class="breadcrumb-item">Arquivos</li>
                        <li class="breadcrumb-item active"><a href="{{ route('processos.index') }}">Processos</a></li>
                    </ol>
                </nav>
            </div>
        </div>

        <!-- Cards de Estatísticas -->
        <div class="col-12 mb-3">
            <div class="row">
                {{-- Total --}}
                <div class="col-lg-4 col-md-6 col-sm-12 mb-2">
                    <a href="{{ route('processos.index') }}">
                        <div class="card py-3 card-hover">
                            <div class="card-body d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-secondary mb-0 fw-semibold">Total de Processos</h6>
                                    <h2 class="fw-bold mb-0">{{ number_format($processos->total(), 0, ',', '.') }}</h2>
                                </div>
                                <div class="bg-default rounded-circle d-flex align-items-center justify-content-center"
                                    style="width:55px; height:55px;">
                                    <i class="fa-solid fa-file-text fa-lg text-white"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-4 col-md-6 col-sm-12 mb-2">
                    <a href="{{ route('processos.index', ['tipo' => 'preventiva']) }}">
                        <div class="card py-3 card-hover">
                            <div class="card-body d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-secondary mb-0 fw-semibold">Fiscalização Preventiva</h6>
                                    <h2 class="fw-bold mb-0">{{ number_format($preventiva ?? 0, 0, ',', '.') }}</h2>
                                </div>
                                <div class="bg-dark rounded-circle d-flex align-items-center justify-content-center"
                                    style="width:55px; height:55px;">
                                    <i class="fa-solid fa-file-text fa-lg text-white"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-4 col-md-6 col-sm-12 mb-2">
                    <a href="{{ route('processos.index', ['tipo' => 'sucessiva']) }}">
                        <div class="card py-3 card-hover">
                            <div class="card-body d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-secondary mb-0 fw-semibold">Fiscalização Sucessiva</h6>
                                    <h2 class="fw-bold mb-0">{{ number_format($sucessiva ?? 0, 0, ',', '.') }}</h2>
                                </div>
                                <div class="bg-dark rounded-circle d-flex align-items-center justify-content-center"
                                    style="width:55px; height:55px;">
                                    <i class="fa-solid fa-file-text fa-lg text-white"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-4 col-md-6 col-sm-12 mb-2">
                    <a href="{{ route('processos.index', ['tipo' => 'concomitante']) }}">
                        <div class="card py-3 card-hover">
                            <div class="card-body d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-secondary mb-0 fw-semibold">Fiscalização Concomitante</h6>
                                    <h2 class="fw-bold mb-0">{{ number_format($concomitante ?? 0, 0, ',', '.') }}</h2>
                                </div>
                                <div class="bg-dark rounded-circle d-flex align-items-center justify-content-center"
                                    style="width:55px; height:55px;">
                                    <i class="fa-solid fa-file-text fa-lg text-white"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-lg-4 col-md-6 col-sm-12 mb-2">
                    <a href="{{ route('processos.index', ['tipo' => 'rf15']) }}">
                        <div class="card py-3 card-hover">
                            <div class="card-body d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-secondary mb-0 fw-semibold">RFS</h6>
                                    <h2 class="fw-bold mb-0">{{ number_format($rf15 ?? 0, 0, ',', '.') }}</h2>
                                </div>
                                <div class="bg-dark rounded-circle d-flex align-items-center justify-content-center"
                                    style="width:55px; height:55px;">
                                    <i class="fa-solid fa-file-text fa-lg text-white"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12 mb-2">
                    <a href="{{ route('processos.index', ['tipo' => 'rf15']) }}">
                        <div class="card py-3 card-hover">
                            <div class="card-body d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="text-secondary mb-0 fw-semibold">Pareceres</h6>
                                    <h2 class="fw-bold mb-0">{{ number_format($parecres ?? 0, 0, ',', '.') }}</h2>
                                </div>
                                <div class="bg-dark rounded-circle d-flex align-items-center justify-content-center"
                                    style="width:55px; height:55px;">
                                    <i class="fa-solid fa-file-text fa-lg text-white"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <div class="col-lg-12">
            <!-- Botões de Ação -->
            <div class="col-lg-12 col-sm-12 d-flex justify-content-lg-end justify-content-start mb-3">
                <a class="btn btn-default-outline me-2" href="#" role="button" id="filterToggle">
                    <i class="fa-solid fa-filter fa-lg me-1"></i> Filtrar
                </a>
                <a class="btn btn-default me-2" href="{{ route('processos.create') }}">
                    <i class="fa-solid fa-plus fa-lg me-1"></i> Novo Processo
                </a>
                <a href="{{ route('processos.export-pdf') }}" class="btn btn-default-outline me-2" target="_blank">
                    <i class="fa-solid fa-file-pdf fa-lg me-1"></i> Exportar PDF
                </a>
            </div>

            <!-- Filtros Avançados (AJUSTADOS CONFORME CONTROLLER) -->
            <div id="filtersSection" class="alert card mb-2 bg-white alert-dismissible fade d-none" role="alert">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h4 class="mb-0"><i class="fa-solid fa-filter me-2"></i>Filtros Avançados</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fechar"></button>
                    </div>

                    <form id="filterForm" method="GET" action="{{ route('processos.index') }}" class="row g-3">
                        <!-- Filtros que REALMENTE existem no controller -->
                        <div class="col-md-3">
                            <label class="form-label small text-muted fw-semibold">Número do Processo</label>
                            <input type="text" class="form-control" name="numero" placeholder="Ex: 001/2024"
                                value="{{ request('numero') }}">
                        </div>

                        <div class="col-md-3">
                            <label class="form-label small text-muted fw-semibold">Ano</label>
                            <select class="form-select" name="ano">
                                <option value="">Todos os anos</option>
                                @for ($year = date('Y'); $year >= 2020; $year--)
                                    <option value="{{ $year }}" {{ request('ano') == $year ? 'selected' : '' }}>
                                        {{ $year }}</option>
                                @endfor
                            </select>
                        </div>

                        <div class="col-md-3">
                            <label class="form-label small text-muted fw-semibold">Entidade</label>
                            <input type="text" class="form-control" name="entidade" placeholder="Nome da entidade"
                                value="{{ request('entidade') }}">
                        </div>

                        <div class="col-md-3">
                            <label class="form-label small text-muted fw-semibold">Tipo de Fiscalização</label>
                            <select class="form-select" name="tipo">
                                <option value="">Todos os tipos</option>
                                <option value="preventiva" {{ request('tipo') == 'preventiva' ? 'selected' : '' }}>
                                    Preventiva</option>
                                <option value="sucessiva" {{ request('tipo') == 'sucessiva' ? 'selected' : '' }}>Sucessiva
                                </option>
                                <option value="concomitante" {{ request('tipo') == 'concomitante' ? 'selected' : '' }}>
                                    Concomitante</option>
                                <option value="rf15" {{ request('tipo') == 'rf15' ? 'selected' : '' }}>RFS</option>
                            </select>
                        </div>

                        <div class="col-md-3">
                            <label class="form-label small text-muted fw-semibold">Data Inicial</label>
                            <input type="date" class="form-control" name="data_inicial"
                                value="{{ request('data_inicial') }}">
                        </div>

                        <div class="col-md-3">
                            <label class="form-label small text-muted fw-semibold">Data Final</label>
                            <input type="date" class="form-control" name="data_final"
                                value="{{ request('data_final') }}">
                        </div>

                        <!-- Botões -->
                        <div class="col-12">
                            <div class="d-flex justify-content-end gap-2">
                                @if (request()->anyFilled(['numero', 'ano', 'entidade', 'tipo', 'data_inicial', 'data_final']))
                                    <a href="{{ route('processos.index') }}" class="btn btn-outline-danger">
                                        <i class="fa-solid fa-times me-1"></i> Limpar Filtros
                                    </a>
                                @endif
                                <button type="submit" class="btn btn-default px-4">
                                    <i class="fa-solid fa-search me-1"></i> Aplicar Filtros
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Mensagens de Sucesso -->
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fa-solid fa-circle-check me-2"></i>
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <!-- Tabela de Processos -->
            <div class="card p-4">
                <div class="card-body">
                    @if ($processos->count() == 0)
                        <div class="text-center p-5">
                            <h1 style="font-size: 4rem !important;"><i class="fa-solid fa-folder-open"></i></h1>
                            <h4>Nenhum processo registado</h4>
                            <p class="text-muted mb-2">
                                Comece criando um novo processo ou ajuste os filtros de busca
                            </p>
                            <a href="{{ route('processos.create') }}" class="btn btn-default">
                                <i class="fa-solid fa-plus me-2"></i>Criar Primeiro Processo
                            </a>
                        </div>
                    @else
                        <table class="table datatable">
                            <thead>
                                <tr>
                                    <th scope="col" width="5%">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="selectAll">
                                        </div>
                                    </th>
                                    <th scope="col">Número/Ano</th>
                                    <th scope="col">Entidade Principal</th>
                                    <th scope="col">Relatores</th>
                                    <th scope="col" width="15%">Data Entrada</th>
                                    <th scope="col" width="10%">Acções</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($processos as $processo)
                                    <tr class="processo-row" data-processo-id="{{ $processo->id }}">
                                        <td>
                                            <div class="form-check">
                                                <input class="form-check-input select-processo" type="checkbox"
                                                    value="{{ $processo->id }}">
                                            </div>
                                        </td>
                                        <td>
                                            <div class="d-flex flex-column">
                                                <span class="fw-semibold">
                                                    {{ $processo->numero }}/{{ $processo->ano }}
                                                </span>
                                                <small class="text-muted">ID: {{ $processo->id }}</small>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="bg-default rounded-circle d-flex align-items-center justify-content-center me-2"
                                                    style="width:36px; height:36px;">
                                                    <i class="fa-solid fa-building text-white"></i>
                                                </div>
                                                <div>
                                                    <span class="d-block fw-medium">
                                                        {{ $processo->entidades->where('pivot.papel', 'principal')->first()->nome ?? '—' }}
                                                    </span>
                                                    <small class="text-muted">
                                                        {{ $processo->tipo_fiscalizacao ?? '—' }}
                                                    </small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="d-flex flex-column">
                                                @php
                                                    // Pega o relator principal (papel = 'principal')
                                                    $relatorPrincipal = $processo->relatores->firstWhere(
                                                        'pivot.papel',
                                                        'principal',
                                                    );
                                                    // Pega os relatores adjuntos (papel = 'adjunto')
                                                    $relatoresAdjuntos = $processo->relatores->where(
                                                        'pivot.papel',
                                                        'adjunto',
                                                    );
                                                @endphp

                                                @if ($relatorPrincipal)
                                                    <div class="d-flex flex-column">

                                                        <span class="fw-semibold"> <i
                                                                class="fa-solid fa-user-check text-success me-1 small"></i>{{ $relatorPrincipal->cargo }}</span>
                                                        <span class="badge bg-success ms-1"
                                                            style="font-size: 9px;">Principal</span>
                                                        @if ($relatorPrincipal->cargo)
                                                            <small
                                                                class="text-muted ms-1">({{ $relatorPrincipal->nome }})</small>
                                                        @endif
                                                    </div>
                                                @else
                                                    <div class="text-muted small">—</div>
                                                @endif

                                                @if ($relatoresAdjuntos->count() > 0)
                                                    <div class="d-flex flex-wrap gap-1 mt-1">
                                                        <i class="fa-solid fa-users text-info me-1 small"></i>
                                                        @foreach ($relatoresAdjuntos as $adjunto)
                                                            <span class="badge bg-info text-dark"
                                                                style="font-size: 10px;"
                                                                title="{{ $adjunto->cargo ?? 'Adjunto' }}">
                                                                {{ $adjunto->nome }}
                                                            </span>
                                                        @endforeach
                                                    </div>
                                                @endif
                                            </div>
                                        </td>
                                        <td>
                                            <div class="d-flex flex-column">
                                                <span class="fw-medium">
                                                    {{ \Carbon\Carbon::parse($processo->data_entrada)->format('d/m/Y') }}
                                                </span>
                                                <small class="text-muted">
                                                    {{ \Carbon\Carbon::parse($processo->created_at)->format('H:i') }}
                                                </small>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="dropdown d-flex justify-content-center">
                                                <button class="btn btn-light" type="button"
                                                    data-bs-toggle="dropdown" aria-expanded="false">
                                                    <i class="fa-solid fa-ellipsis-vertical fa-lg"></i>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a class="dropdown-item"
                                                            href="{{ route('processos.show', $processo->id) }}">
                                                            <i class="fa-solid fa-eye me-2"></i> Visualizar
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item"
                                                            href="{{ route('processos.edit', $processo->id) }}">
                                                            <i class="fa-solid fa-pen-to-square me-2"></i> Editar
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item" href="#"
                                                            data-bs-toggle="modal"
                                                            data-bs-target="#deleteModal{{ $processo->id }}">
                                                            <i class="fa-solid fa-trash me-2"></i> Eliminar
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>

                                    <!-- Modal de Confirmação de Exclusão -->
                                    <div class="modal fade" id="deleteModal{{ $processo->id }}" tabindex="-1"
                                        data-bs-backdrop="static" aria-labelledby="modal" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered">
                                            <div class="modal-content border-0 shadow-lg">
                                                <div class="modal-header align-items-center modal-eliminar">
                                                    <i class="fa-solid fa-trash-can me-2"></i>
                                                    <h5 class="modal-title">Confirmar Exclusão</h5>
                                                    <button type="button" class="btn-close btn-close-white"
                                                        data-bs-dismiss="modal" aria-label="Fechar"></button>
                                                </div>

                                                <form action="{{ route('processos.destroy', $processo->id) }}"
                                                    method="POST">
                                                    @csrf
                                                    @method('DELETE')

                                                    <div class="modal-body text-center py-4">
                                                        <p class="mb-2">Tem certeza que deseja
                                                            <strong>eliminar</strong> o processo
                                                            <strong>"{{ $processo->numero }}/{{ $processo->ano }}"</strong>?
                                                        </p>
                                                        <p class="text-danger">
                                                            <i class="fa-solid fa-triangle-exclamation me-1"></i>
                                                            Esta ação não pode ser desfeita!
                                                        </p>
                                                    </div>

                                                    <div class="modal-footer">
                                                        <button type="submit" class="btn btn-danger px-4">
                                                            <i class="fa-solid fa-trash me-1"></i> Sim, excluir
                                                        </button>
                                                        <button type="button" class="btn btn-secondary px-4"
                                                            data-bs-dismiss="modal">
                                                            <i class="fa-solid fa-xmark me-1"></i> Cancelar
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </tbody>
                        </table>

                        <!-- Rodapé da Tabela -->
                        <div class="card-footer bg-white border-0 px-0 py-3">
                            <div class="row align-items-center">
                                <div class="col-md-6">
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="selectAllFooter">
                                            <label class="form-check-label small text-muted" for="selectAllFooter">
                                                Selecionar todos
                                            </label>
                                        </div>
                                        <div class="vr"></div>
                                        <span class="small text-muted">
                                            Mostrando {{ $processos->firstItem() }} - {{ $processos->lastItem() }}
                                            de {{ $processos->total() }} processos
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        // Toggle Filtros
        document.getElementById('filterToggle')?.addEventListener('click', function(e) {
            e.preventDefault();
            const filtersSection = document.getElementById('filtersSection');
            if (filtersSection) {
                filtersSection.classList.toggle('d-none');
                this.classList.toggle('active');

                if (!filtersSection.classList.contains('d-none')) {
                    this.innerHTML = '<i class="fa-solid fa-filter fa-lg me-1"></i> Ocultar Filtros';
                    filtersSection.classList.add('show');
                } else {
                    this.innerHTML = '<i class="fa-solid fa-filter fa-lg me-1"></i> Filtrar';
                }
            }
        });

        // Seleção em Lote
        document.getElementById('selectAll')?.addEventListener('change', function() {
            const checkboxes = document.querySelectorAll('.select-processo');
            checkboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
        });

        document.getElementById('selectAllFooter')?.addEventListener('change', function() {
            const mainSelect = document.getElementById('selectAll');
            if (mainSelect) {
                mainSelect.checked = this.checked;
            }
            const checkboxes = document.querySelectorAll('.select-processo');
            checkboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
        });

        // Limpar filtros
        document.getElementById('clearFilters')?.addEventListener('click', function() {
            const filters = document.querySelectorAll('#filtersSection input, #filtersSection select');
            filters.forEach(filter => {
                filter.value = '';
            });
        });

        // Navegação por linha (click na linha) - CORRIGIDO
        document.querySelectorAll('.processo-row').forEach(row => {
            row.addEventListener('click', function(e) {
                // Ignora cliques em checkboxes, dropdowns, botões e links
                if (!e.target.closest('input[type="checkbox"]') &&
                    !e.target.closest('.dropdown') &&
                    !e.target.closest('button') &&
                    !e.target.closest('a')) {

                    const processoId = this.dataset.processoId;
                    if (processoId) {
                        window.location.href = '{{ url('arquivos/processos/detalhes') }}/' + processoId;
                    }
                }
            });
        });

        // Inicializar seleção individual
        document.querySelectorAll('.select-processo').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const allCheckboxes = document.querySelectorAll('.select-processo');
                const checkedCheckboxes = document.querySelectorAll('.select-processo:checked');
                const selectAll = document.getElementById('selectAll');
                const selectAllFooter = document.getElementById('selectAllFooter');

                if (selectAll) {
                    selectAll.checked = allCheckboxes.length === checkedCheckboxes.length;
                }
                if (selectAllFooter) {
                    selectAllFooter.checked = allCheckboxes.length === checkedCheckboxes.length;
                }
            });
        });

        // Prevenir propagação do clique nos checkboxes
        document.querySelectorAll('.select-processo').forEach(checkbox => {
            checkbox.addEventListener('click', function(e) {
                e.stopPropagation();
            });
        });

        // Prevenir propagação do clique no dropdown
        document.querySelectorAll('.dropdown').forEach(dropdown => {
            dropdown.addEventListener('click', function(e) {
                e.stopPropagation();
            });
        });

        // Mostrar tooltips
        document.addEventListener('DOMContentLoaded', function() {
            // Inicializar tooltips do Bootstrap se estiver disponível
            if (typeof bootstrap !== 'undefined') {
                const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                tooltipTriggerList.map(function(tooltipTriggerEl) {
                    return new bootstrap.Tooltip(tooltipTriggerEl);
                });
            }
        });

        // Função para mostrar toast (notificação)
        function showToast(message, type = 'success') {
            // Verificar se já existe um container de toasts
            let toastContainer = document.getElementById('toast-container');
            if (!toastContainer) {
                toastContainer = document.createElement('div');
                toastContainer.id = 'toast-container';
                toastContainer.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 99999;
            max-width: 350px;
        `;
                document.body.appendChild(toastContainer);
            }

            // Criar toast
            const toastId = 'toast-' + Date.now();
            const bgColor = type === 'success' ? 'bg-success' : 'bg-danger';
            const icon = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle';

            const toast = document.createElement('div');
            toast.id = toastId;
            toast.className = `toast show ${bgColor} text-white mb-2`;
            toast.style.cssText = `
        min-width: 250px;
        animation: slideIn 0.3s ease-out;
    `;

            toast.innerHTML = `
        <div class="toast-header ${bgColor} text-white border-0">
            <i class="fa-solid ${icon} me-2"></i>
            <strong class="me-auto">${type === 'success' ? 'Sucesso!' : 'Erro!'}</strong>
            <button type="button" class="btn-close btn-close-white" onclick="document.getElementById('${toastId}').remove()"></button>
        </div>
        <div class="toast-body">
            ${message}
        </div>
    `;

            toastContainer.appendChild(toast);

            // Remover toast após 5 segundos
            setTimeout(() => {
                if (document.getElementById(toastId)) {
                    document.getElementById(toastId).remove();
                }
            }, 5000);
        }

        // Adicionar estilo de animação para toast
        const toastStyle = document.createElement('style');
        toastStyle.textContent = `
    @keyframes slideIn {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    .toast {
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .processo-row {
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

    .processo-row:hover {
        background-color: rgba(0, 123, 255, 0.05);
    }
`;
        document.head.appendChild(toastStyle);
    </script>

    <style>
        /* Estilos para a tabela */
        .processo-row {
            cursor: pointer;
        }

        .processo-row:hover {
            background-color: rgba(13, 110, 253, 0.05);
        }

        /* Badges personalizados */
        .badge.text-bg-success {
            background-color: rgba(var(--bs-success-rgb), 0.15) !important;
            color: var(--bs-success) !important;
            border: 1px solid rgba(var(--bs-success-rgb), 0.3);
        }

        .badge.text-bg-warning {
            background-color: rgba(var(--bs-warning-rgb), 0.15) !important;
            color: var(--bs-warning) !important;
            border: 1px solid rgba(var(--bs-warning-rgb), 0.3);
        }

        .badge.text-bg-secondary {
            background-color: rgba(var(--bs-secondary-rgb), 0.15) !important;
            color: var(--bs-secondary) !important;
            border: 1px solid rgba(var(--bs-secondary-rgb), 0.3);
        }

        .badge.text-bg-info {
            background-color: rgba(var(--bs-info-rgb), 0.15) !important;
            color: var(--bs-info) !important;
            border: 1px solid rgba(var(--bs-info-rgb), 0.3);
        }

        .badge.text-bg-default {
            background-color: rgba(var(--bs-default-rgb), 0.15) !important;
            color: var(--bs-default) !important;
            border: 1px solid rgba(var(--bs-default-rgb), 0.3);
        }

        /* Animações para filtros */
        #filtersSection {
            animation: slideDown 0.3s ease;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Ícones de entidade */
        [class^="fa-solid"] {
            font-size: 0.9em;
        }

        /* Formulários de filtro */
        #filterForm .form-control,
        #filterForm .form-select {
            border-radius: 8px;
            border: 1px solid #dee2e6;
            padding: 0.5rem 1rem;
        }

        #filterForm .form-control:focus,
        #filterForm .form-select:focus {
            border-color: var(--bs-default);
            box-shadow: 0 0 0 0.2rem rgba(var(--bs-default-rgb), 0.25);
        }

        /* Alertas */
        .alert.alert-dismissible {
            border-radius: 12px;
            border: none;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }

        .alert-success {
            background-color: rgba(var(--bs-success-rgb), 0.1);
            border-left: 4px solid var(--bs-success);
            color: var(--bs-success);
        }

        .alert-success .btn-close {
            filter: brightness(0) saturate(100%) invert(39%) sepia(55%) saturate(487%) hue-rotate(91deg) brightness(95%) contrast(96%);
        }

        /* Dropdown não propagar clique */
        .dropdown {
            cursor: default;
        }

        .dropdown-menu {
            z-index: 1050;
        }

        .card-hover {
            transition: all 0.25s ease;
            cursor: pointer;
        }

        .card-hover:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
        }
    </style>
@endsection