{{-- Card Mobile para item financeiro --}}
@php
    if (in_array($item->pagamento_situacao, ['sucesso','isento','bolsa','bolsista']))
        $cardBg = 'bg-emerald-50/50 dark:bg-emerald-900/10';
    elseif (in_array($item->pagamento_situacao, ['em-atraso','vencido']))
        $cardBg = 'bg-red-50/50 dark:bg-red-900/10';
    else
        $cardBg = '';
    $hasTx = $item->transacoes && $item->transacoes->count() > 0;
@endphp

<div class="{{ $cardBg }}">
    <div class="px-5 py-4">
        {{-- Cabeçalho: tipo + badge --}}
        <div class="flex items-start justify-between mb-2">
            <div class="min-w-0">
                <p class="text-sm font-medium text-gray-900 dark:text-white uppercase truncate">
                    <span class="cursor-pointer hover:underline decoration-gray-300 dark:decoration-gray-600 underline-offset-2"
                          @click="abrirDetalhe($el)"
                          @include('livewire.aluno.partials._financeiro-data-attrs', ['item' => $item])>
                        {{ $item->codigo ?? '' }}{{ $item->codigo ? ' - ' : '' }}@if ($item->financeiro_tipo == 'pagamento-matricula')Matrícula @elseif ($item->financeiro_tipo == 'pagamento-mensalidade')Mensalidade @else{{ $item->descricao ?? '--' }}@endif
                    </span>
                    <span class="text-gray-400 dark:text-gray-500 font-normal">· Nº {{ $item->matricula->matricula_num ?? '--' }}</span>
                </p>
                <p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5 truncate">
                    {{ $item->matricula->curso->nome ?? '' }}@if($item->matricula->turma) · {{ $item->matricula->turma->turma_nome ?? $item->matricula->turma->turma_codigo ?? '' }}@endif
                </p>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                    Cód. {{ $item->codigo ?? '--' }}
                    @if($hasTx)
                        <span class="text-gray-300 dark:text-gray-600">· {{ $item->transacoes->count() }} transação(ões)</span>
                    @endif
                </p>
            </div>
            <div class="shrink-0 ml-2">
                @include('livewire.aluno.partials._financeiro-badge', ['situacao' => $item->pagamento_situacao])
            </div>
        </div>

    {{-- Detalhes em grid --}}
    <div class="grid grid-cols-2 gap-x-4 gap-y-2 text-xs mt-3">
        <div>
            <span class="block text-gray-400 dark:text-gray-500">Vencimento</span>
            <span class="text-gray-700 dark:text-gray-300 uppercase">{{ dataData($item->vencimento_data ?? '--') }}</span>
        </div>
        <div class="text-right">
            <span class="block text-gray-400 dark:text-gray-500">Valor</span>
            <span class="text-sm font-bold text-gray-900 dark:text-white">{{ convertMoney($item->vencimento_valor ?? 0, 'R$') }}</span>
        </div>
        @if ($item->pagamento_data)
            <div>
                <span class="block text-gray-400 dark:text-gray-500">Pago em</span>
                <span class="text-gray-700 dark:text-gray-300 uppercase">{{ dataData($item->pagamento_data) }}</span>
            </div>
            <div class="text-right">
                <span class="block text-gray-400 dark:text-gray-500">Valor pago</span>
                <span class="text-sm font-semibold text-emerald-600 dark:text-emerald-400">{{ convertMoney($item->pagamento_valor ?? 0, 'R$') }}</span>
            </div>
        @endif
        @if (($item->vencimento_valor_desconto ?? 0) > 0)
            <div>
                <span class="block text-gray-400 dark:text-gray-500">Desconto</span>
                <span class="text-gray-700 dark:text-gray-300">{{ convertMoney($item->vencimento_valor_desconto, 'R$') }}</span>
            </div>
        @endif
        @if ($item->pagamento_forma && in_array($item->pagamento_situacao, ['sucesso','isento','bolsa','bolsista']))
            <div class="text-right">
                <span class="block text-gray-400 dark:text-gray-500">Forma</span>
                <span class="text-gray-700 dark:text-gray-300 uppercase">{{ $item->pagamento_forma }}</span>
            </div>
        @endif
    </div>

    {{-- Botão de ação (mobile) --}}
    @if (in_array($item->pagamento_situacao, ['agendado','em-atraso','vencido']))
        <div class="mt-3">
            @if (dataCarbon($item->vencimento_data, 'Ymd') > now()->format('Ymd'))
                <a href="{{ route('pagamentos', ['matriculaId' => $item->matricula_id, 'financeiroId' => $item->id, 'sandbox' => (isAdminPep() ? 'sandbox' : null)]) }}?from=financeiro"
                   class="block w-full text-center px-4 py-2 rounded-lg text-xs font-bold bg-blue-600 text-white hover:bg-blue-700 transition-colors">
                    ANTECIPAR PAGAMENTO
                </a>
            @else
                <a href="{{ route('pagamentos', ['matriculaId' => $item->matricula_id, 'financeiroId' => $item->id, 'sandbox' => (isAdminPep() ? 'sandbox' : null)]) }}?from=financeiro"
                   class="block w-full text-center px-4 py-2 rounded-lg text-xs font-bold bg-red-600 text-white hover:bg-red-700 transition-colors">
                    PAGAR AGORA
                </a>
            @endif
        </div>
    @elseif (in_array($item->pagamento_situacao, ['boleto-gerado','pix-gerado','aguardando','aguardando-pagamento','erro-credtcard','pagamento-matricula-aguardando','pendente','processando','iniciada']))
        <div class="mt-3">
            <a href="{{ route('pagamentos', ['matriculaId' => $item->matricula_id, 'financeiroId' => $item->id, 'sandbox' => (isAdminPep() ? 'sandbox' : null)]) }}?from=financeiro"
               class="block w-full text-center px-4 py-2 rounded-lg text-xs font-bold bg-amber-600 text-white hover:bg-amber-700 transition-colors">
                EXIBIR
            </a>
        </div>
    @endif
    </div>
</div>