@php
    $url = $_SERVER['HTTP_HOST'];
@endphp
<style rel="stylesheet">
    .highlighted-document {
        border: 2px solid red;
        animation: pulse-shadow 0.9s ease-out 3;
    }

    @keyframes pulse-shadow {
        0% {
            box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.5);
        }

        100% {
            box-shadow: 0 0 0 6px rgba(255, 0, 0, 0);
        }
    }

    .panel-body .col-sm-12,
    .panel-body .col-md-7 {
        border: none !important;
        margin: 0 !important;
    }
</style>
<div class="panel panel-default">
    <div class="panel-heading" style="text-align: center; font-size: 15px;" data-document-id="{{ $document->id }}">
        <span class="panel-title text-uppercase">
            <span class="panel-title text-uppercase">
                <label class="pull-right">
                    {{-- chama modal de box --}}
                    <i class="fa fa-info-circle" aria-hidden="true" onclick="getDocumentBoxId('{{ $document->id }}')"
                        style="cursor: pointer;"></i>
                </label>
                <label class="pull-left">
                    <i class="fa fa-file" style="margin-right: 5px;"></i>
                    @if (
                        @$document->document_type &&
                            is_object($document->document_type) &&
                            property_exists($document->document_type, 'name'))
                        {!! Str::limit($document->document_type->name, 14, '...') !!}
                    @endif

                    @if ($document->number)
                        @if (Auth::user()->roleHasPermission('document.editnumero'))
                            {{ Str::limit($document->document_type->name, 14, '...') }}
                            <a href="javascript:void(0)" id="numberEdit{{ $document->id }}"
                                onclick="alteraNumero('{{ $document->id }}');">
                                {!! $document->number . '/' . $document->getYear($document->date) !!}
                            </a>
                        @else
                            {{ Str::limit($document->document_type->name, 14, '...') }}
                            <span style="color: #37BC9B">
                                {!! $document->number . '/' . $document->getYear($document->date) !!}
                            </span>
                        @endif
                    @else
                        {!! Str::limit($document->document_type->name, 14, '...') !!}
                    @endif
                </label>

                <label>
                    <span>
                        {!! $document->date !!}
                    </span>
                </label>
            </span>
        </span>
    </div>

    <div class="panel-body">
        <div style="padding: 0; font-size: 13px;">
            <div class="col-sm-12" style="padding: 0">
                <div class="col-md-7" style="display: flex; padding: 0;">
                    <span class="text-uppercase">
                        <label>
                            <i class="fa fa-user"></i>
                            @if ($document->owner)
                                {!! $document->owner->short_name !!}
                            @else
                            @endif <br>
                        </label>
                    </span>
                </div>
                @php
                    $inPauta = \App\Models\MeetingPauta::where('document_id', $document->id)->exists();
                    $pautaStatus = $document->getPautaStatus();
                @endphp

                @if (!$inPauta)
                    <div style="display:flex;">
                        @shield('document.read')
                            <label for="lido_{{ $document->id }}">
                                Lido:
                                <input id="lido_{{ $document->id }}" type="checkbox"
                                    onclick="changeRead('{{ $document->id }}')" {{ $document->read ? 'checked' : '' }}>
                            </label>
                        @endshield
                        @shield('document.approved')
                            <span style="margin-left: 10px;">
                                <label style="font-weight: normal;">
                                    Aprovado:
                                    <input onchange="changeApproved('{{ $document->id }}')" type="checkbox"
                                        {{ $document->approved ? 'checked' : '' }}>
                                </label>
                            </span>
                        @endshield
                    </div>
                @else
                    <span style="margin-left: 10px;">
                        <label style="font-weight: normal; color:#218838">
                            <i class="fa fa-check-circle" aria-hidden="true"></i>
                            {{ $pautaStatus['label'] }}
                        </label>
                    </span>
                @endif

                <button class="btn tooltip-custom btn-sm" data-toggle="modal" data-target="#modalScanner"
                    data-id="{{ $document->id }}">
                    <i class="fa fa-print" aria-hidden="true"></i>
                    <span class="tooltip-text">Scanner</span>
                </button>
                <br>
                <br>

                <span>
                    <label>
                        <strong>Número:</strong>
                        <span id="tdnumber{{ $document->id }}">
                            @if ($document->number === 0)
                                -
                            @elseif($document->number !== 0)
                                @if (Auth::user()->roleHasPermission('document.editnumero'))
                                    <a href="javascript:void(0)" id="numberEdit{{ $document->id }}"
                                        onclick="alteraNumero('{{ $document->id }}');">
                                        {!! $document->number !!}{!! '/' . $document->getYear($document->date) !!}
                                    </a>
                                @else
                                    <span style="color: #37BC9B">
                                        {!! $document->number . '/' . $document->getYear($document->date) !!}
                                    </span>
                                @endif
                            @else
                                @if (Auth::user()->roleHasPermission('document.editnumero'))
                                    <span style="color: #37BC9B">
                                        {!! $document->number !!}{!! '/' . $document->getYear($document->date) !!}
                                    </span>
                                @endif
                            @endif
                        </span>
                    </label>
                </span>
                <br>
                <span>
                    <label>
                        <strong>Protocolo: </strong>
                        <span id="tdprotocol{{ $document->id }}">
                            @if (!$document->document_protocol && !Auth::user()->roleHasPermission('document.createProtocolNumber'))
                            @elseif (!$document->document_protocol && Auth::user()->roleHasPermission('document.createProtocolNumber'))
                                <button type="button" class='btn btn-default btn-xs btn-protocol'
                                    value="{!! $document->id !!}">
                                    <i class="glyphicon glyphicon-folder-open"></i>
                                </button>
                            @else
                                @if (Auth::user()->roleHasPermission('document.editprotocol'))
                                    <a href="javascript:void(0)" id='linkProtocolo{{ $document->id }}'
                                        onclick="alteraProtocolo(
                                            '{!! $document->id !!}',
                                            '{!! $document->document_protocol->number !!}',
                                            '{{ date('d/m/Y H:i:s', strtotime($document->document_protocol->created_at)) }}'
                                            );">
                                        @if ($document->document_protocol)
                                            {{ $document->document_protocol->number }}
                                        @endif
                                    </a>
                                @else
                                    <span style="color: rgb(55, 62, 188)">
                                        @if ($document->document_protocol)
                                            {{ $document->document_protocol->number }}
                                        @endif
                                    </span>
                                @endif
                            @endif
                        </span>
                    </label>
                    <span>
                        {{-- <label>
                            <strong>Nº Processo: </strong>
                            @if ($document->nr_process_ano)
                                <a href="javascript:void(0)" onclick="editProcess('{!! $document->id !!}')">
                                    {!! str_replace(['\\', '[', ']', '"'], '', $document->nr_process_ano) !!}
                                </a>
                            @else
                                <button type="button" class='btn btn-default btn-xs btn-process'
                                    value="{!! $document->id !!}">
                                    <i class="glyphicon glyphicon-folder-open"></i>
                                </button>
                            @endif
                        </label> --}}
                    </span>
                </span>
                @if (!isset($document->location_name))
                    <label>
                        <br /> <strong>Geolocalização:
                        </strong><span>{{ $document->location_name ?? 'Não informada Geolocalização adicione uma nova localização' }}</span>
                    </label>
                @endif
            </div>


            <div class="row" style="margin-bottom: 15px; border-top: 1px solid #eee; padding-top: 4px;">
                <div class="col-md-12">
                    <strong>Ementa:</strong>
                    <div
                        style="margin-top: 5px; padding: 10px; background: #f9f9f9; border-radius: 4px; min-height: 60px;">
                        @if ($document->resume === '')
                        @else
                            <div class="resume">
                                @if (strlen($document->resume) >= 100)
                                    {!! substr(strip_tags($document->resume), 0, strrpos(substr(strip_tags($document->resume), 0, 100), ' ')) .
                                        '...' !!}
                                @else
                                    {!! strip_tags($document->resume) !!}
                                @endif
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <div class="col-sm-12" style="padding: 0">
                <span>
                    <label>
                        <strong>Data Tram:</strong>
                        <span>
                            @if (count($document->processingDocument) === 0)
                            @else
                                {!! $document->processingDocument->first()->processing_document_date !!}
                            @endif
                        </span>
                    </label>
                </span>
                @php
                    if (count($document->processingDocument) === 0) {
                        $status = 'Em elaboração';
                        $class = 'badge-elaboracao';
                    } else {
                        $statusName = '';
                        $status = $statusName . ($document->document_protocol ? 'Protocolado' : 'Em elaboração');

                        switch ($statusName) {
                            case 'Aprovado':
                                $class = 'badge-aprovado';
                                break;
                            case 'Rejeitado':
                                $class = 'badge-rejeitado';
                                break;
                            default:
                                $class = $document->document_protocol ? 'badge-protocolado' : 'badge-aberto';
                        }
                    }

                    $pendingSigners = $document->pendingSigners()->get();
                    $signedSigners = $document->signedSigners()->get();

                @endphp
                <div style="margin-bottom: 10px">
                    <span class="d-flex justify-content-center align-items-center mt-2">
                        <span class="d-flex justify-content-start align-items-center mt-2">
                            <strong>Status:</strong>
                            <span class="badge {{ $class }} ms-2">
                                {{ $status }}
                            </span>
                        </span>
                    </span>
                </div>
                <div style="margin-bottom: 10px">
                    <strong>Destinatário:</strong>
                    @if (count($document->processingDocument) === 0)
                        <strong>Não possui tramitação</strong>
                    @else
                        <span class="d-flex justify-content-start align-items-center mt-2">
                            <span class="badge badge-info ms-2">
                                {!! \App\Models\Destination::where('id', $document->processingDocument->first()->destination->id)->pluck('name')->first() !!}
                            </span>
                        </span>
                    @endif
                </div>
                <div style="margin-bottom: 10px">
                    <span class="d-flex justify-content-start align-items-center mt-2">
                        <strong>Assinaturas:</strong>
                        @if ($pendingSigners->isNotEmpty())
                            <span class="badge badge-danger text-dark" data-bs-toggle="tooltip"
                                title="{{ $pendingSigners->pluck('name')->join(', ') }}">
                                {{ $pendingSigners->count() }} assinatura(s) pendente(s)
                            </span>
                        @elseif($signedSigners->isNotEmpty())
                            <span class="badge badge-success">Documento assinado</span>
                        @elseif($signedSigners->isEmpty())
                            <span class="badge badge-info">Não possui solicitação de assinatura</span>
                        @endif
                    </span>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal scanner --}}
    <div id="modalScanner" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Scanner</h4>
                </div>
                <div class="modal-body">

                    <form id="formScannerCard">
                        <input type="hidden" id="document-scanner-id" name="document_id" value="">

                        @csrf
                        <div class="form-group col-sm-12">
                            <h1> Digitalização de documentos </h1>

                            <div style="text-align:center;" id="server_response"></div>
                            <div class="form-group col-md-6">
                                {!! Form::label('filename', 'Nome:') !!}
                                {!! Form::text('filename', null, ['class' => 'form-control']) !!}
                            </div>

                            {!! Form::label('digitalizar', 'Clique no botão para iniciar: ') !!}
                            {!! Form::button('Abrir Scan', [
                                'type' => 'button',
                                'class' => 'btn btn-lixo',
                                'onclick' => 'scanToPdfWithThumbnails();',
                            ]) !!}

                            {!! Form::button('Enviar', [
                                'type' => 'submit',
                                'class' => 'btn btn-primary',
                            ]) !!}


                        </div>
                    </form>

                </div>
                <div class="clearfix" style="padding:0;"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal"
                        onclick="">Fechar</button>
                </div>
            </div>
        </div>
    </div>

    {{-- TESTE AQUI PLMDS PLMDS PLMDS PLMDS PLMDS PLMDS  --}}
    <div class="panel-footer">
        {!! Form::open(['route' => ['documents.destroy', $document->id], 'method' => 'delete']) !!}
        <div class="btn-group-footer action" id="tdoptions{{ $document->id }}">

            @shield('list.signers')
                @if ($document->document_protocol()->exists())
                    @if ($signedSigners->isNotEmpty())
                        <a href="{!! route('signature.pdf.download', [$document->id]) !!}" target="_blank"
                            class="btn btn-success btn-sm rounded-pill icon-btn shadow-sm"
                            title="Download documento assinado">
                            <i class="fas fa-download"></i>
                        </a>
                    @else
                        <a href="{!! route('documents.signature', [$document->id]) !!}" target="_blank"
                            class="btn btn-sign btn-sm rounded-pill icon-btn shadow-sm" title="Assinar">
                            <i class="fas fa-lock"></i>
                        </a>
                    @endif
                @else
                    <span class="btn btn-primary btn-sm rounded-pill icon-btn shadow-sm" title="Assinar" disabled>
                        <i class="fas fa-lock"></i>
                    </span>
                @endif
            @endshield

            @shield('documents.show')
                <a href="{!! route('documents.details', [$document->id]) !!}" class="btn btn-file btn-sm rounded-pill icon-btn shadow-sm"
                    onclick="setLastAccessed('{{ $document->id }}')" title="Gerar PDF">
                    <i class="far fa-eye"></i>
                </a>
            @endshield

            @if (
                ($document->read > 0 && $document->approved > 0 && Auth::user()->can_request_executive_not_root) ||
                    Auth::user()->hasRole('root'))
                <a onclick="answer({{ $document }})"
                    class="btn btn-info-footer btn-sm rounded-pill icon-btn shadow-sm" title="Responder">
                    <i class="fas fa-paper-plane"></i>
                </a>
            @endif

            @if (!Auth::user()->can_request_executive_not_root || Auth::user()->hasRole('root'))
                @shield('documents.advices')
                    <a href="{!! route('documents.advices', [$document->id]) !!}" class="btn btn-dark btn-sm rounded-pill icon-btn shadow-sm"
                        title="Tramitação">
                        <i class="fas fa-list-alt"></i>
                    </a>
                @endshield

                @shield('documents.edit')
                    <a href="{!! route('documents.attachament', [$document->id]) !!}" class="btn btn-anexo btn-sm rounded-pill icon-btn shadow-sm"
                        onclick="setLastAccessed('{{ $document->id }}')" title="Anexar Arquivo">
                        <i class="fas fa-paperclip"></i>
                    </a>
                @endshield

                @shield('documents.advices')
                    <a href="{!! route('documents.legal-option', [$document->id]) !!}" class="btn btn-parecer btn-sm rounded-pill icon-btn shadow-sm"
                        title="Pareceres">
                        <i class="fas fa-clipboard"></i>
                    </a>
                @endshield
                @shield('documents.edit')
                    @php
                        $isRoot = Auth::user()->sector_id === 1;
                        $hasPendingSigners = $document->pendingSigners()->exists();
                        $isSigned = $document->signedSigners()->exists();
                        $isProtocolado = $document->document_protocol;

                        $podeEditar = (!$isProtocolado && !$hasPendingSigners && !$isSigned) || ($isRoot && !$isSigned);

                        $tooltip = $podeEditar ? 'Editar' : 'Documento já protocolado ou com assinatura pendente';
                    @endphp

                    @if ($podeEditar)
                        <a href="{{ route('documents.edit', [$document->id]) }}"
                            class="btn btn-editar btn-sm rounded-pill icon-btn shadow-sm" title="{{ $tooltip }}"
                            onclick="event.preventDefault(); setLastAccessedAndRedirect('{{ route('documents.edit', [$document->id]) }}', '{{ $document->id }}')">
                            <i class="fas fa-edit"></i>
                        </a>
                    @else
                        <span class="btn btn-editar btn-sm rounded-pill icon-btn disabled shadow-sm"
                            title="{{ $tooltip }}" aria-disabled="true" tabindex="-1">
                            <i class="fas fa-edit"></i>
                        </span>
                    @endif
                @endshield

                @shield('documents.delete')
                    @php
                        $isUsed = \App\Models\MeetingPauta::where('document_id', $document->id)->exists();
                        $podeExcluir = (!$isProtocolado && !$hasPendingSigners && !$isSigned && !$isUsed) || $isRoot;

                    @endphp
                    <input id="id_document" type="text" value="{{ $document->id }}" hidden>
                    @if ($podeExcluir)
                        <a @popper(REMOVER)>
                            {!! Form::button('<i class="fas fa-trash"></i>', [
                                'type' => 'submit',
                                'class' => 'btn btn-lixo btn-sm icon-btn',
                                'onclick' => 'sweet(event)',
                            ]) !!}
                        </a>
                    @else
                        <a @popper('NÃO PODE REMOVER')>
                            {!! Form::button('<i class="fas fa-trash"></i>', [
                                'type' => 'button',
                                'class' => 'btn btn-lixo btn-sm icon-btn disabled',
                                'disabled' => 'disabled',
                            ]) !!}
                        </a>
                    @endif
                @endshield
            @endif
        </div>

        <div class="clearfix"></div>
        {!! Form::close() !!}
    </div>
</div>

@include('documents.modal_boxes')


<script>
    function sweet(e) {
        var url = `/documents/` + documentId;

        var data = {
            '_token': '{{ csrf_token() }}'
        };

        sweetDelete(e, url, data)
    }


    $('label').css('font-weight', 'normal');

    document.addEventListener('DOMContentLoaded', function() {
        const lastDocId = localStorage.getItem('last_accessed_document');

        document.querySelectorAll('.panel-heading').forEach(panel => {
            const panelDocId = panel.getAttribute('data-document-id');

            if (panelDocId === lastDocId) {
                panel.classList.add('highlighted-document');

                setTimeout(() => {
                    panel.scrollIntoView({
                        behavior: 'smooth',
                        block: 'center'
                    });
                }, 100);

                localStorage.removeItem('last_accessed_document');
            }
        });
    });
</script>


<script src="{!! asset('chosen_v1.8.7/chosen.jquery.js') !!}" type="text/javascript"></script>
<script>
    function setLastAccessedAndRedirect(url, documentId) {
        setLastAccessed(documentId);


        setTimeout(function() {
            window.location.href = url;
        }, 150);
    }

    function searchPost() {

        const url = '/documents/table/search';

        const data = {
            _token: '{{ csrf_token() }}',
            ocr: $('#flexCheckDefault').val(),
            owner_id: $('#assemblymanSelect').val(),
            document_type_id: $('#multiple-select-clear-field').val(),
            first_doc_num: $('#first_num').val(),
            second_doc_num: $('#second_num').val(),
            first_ord_num: $('#first_ord_num').val(),
            second_ord_num: $('#second_ord_num').val(),
            startDate: $('#start-date').val(),
            endDate: $('#end-date').val()
        }


        $.ajax({
            url: url,
            data: data,
            method: "GET",
            dataType: "json"
        }).success((data) => {
            console.log(data)
        });

    }

    let document_id = 0;

    function getIdocumentTopassScanner(id) {
        document_id = id;
    }

    function getDocumentBoxId(id) {

        fetch(`/api/documents/${id}/boxes`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Erro ao carregar dados do documento.');
                }
                return response.json();
            })
            .then(data => {
                console.log(data);
                $('#modal-info-old-card').modal('show');
                document.querySelector('#modal-info-old-card .list-group .list-group-item:nth-child(2) div')
                    .innerText =
                    `Local: ${data.location}`;
                document.querySelector('#modal-info-old-card .list-group .list-group-item:nth-child(3) div')
                    .innerText =
                    `Prateleira: ${data.shelf}`;
                document.querySelector('#modal-info-old-card .list-group .list-group-item:nth-child(4) div')
                    .innerText =
                    `Gaveta: ${data.drawer}`;
                document.querySelector('#modal-info-old-card .list-group .list-group-item:nth-child(5) div')
                    .innerText =
                    `Caixa: ${data.box}`;
                document.querySelector('#modal-info-old-card .list-group .list-group-item:nth-child(6) div')
                    .innerText =
                    `Data Tramitação: ${data.date}`;
                document.querySelector('#modal-info-old-card .list-group .list-group-item:nth-child(7) div')
                    .innerText =
                    `Status: ${data.status}`;
                document.querySelector('#modal-info-old-card .list-group .list-group-item:nth-child(8) div')
                    .innerText =
                    `Destinatário: ${data.recipient}`;
            })
    }


    function getIdDocument(id) {
        document_id = id

        const url = `/toggle/get/documents/${id}`;

        const data = {
            _token: '{{ csrf_token() }}'
        }
        $('#titleDocument').html('');
        $('#protocolDocument').html('');
        $('#numberDocument').html('');
        $('#numberProcess').html('');
        $('#dateDocument').html('');

        $.ajax({
            url: url,
            data: data,
            method: "GET",
            dataType: "json"
        }).success((data) => {
            document_id = data.id

            $('#document_id_edit').val('');
            $('#date_protocol_edit').val('');
            $('#protocol_date_edit').val('');

            if (data.protocol != 0) {
                $('#is-not-protocoled').hide();
                $('#is-protocoled').show();

                $('#document_id_edit').val(document_id);
                $('#date_protocol_edit').val(data.date_protocol);
                $('#protocol_date_edit').val(data.date_protocol);

            } else {
                $('#is-protocoled').hide();
                $('#is-not-protocoled').show();
            }

            $('#titleDocument').html('');
            $('#protocolDocument').html('');
            $('#numberDocument').html('');
            $('#numberProcess').html('');
            $('#dateDocument').html('');

            $('#titleDocument').prepend(data.title);
            $('#numberDocument').prepend('Número: ' + data.number);
            $('#protocolDocument').prepend('Protocolo: ' + data.protocol);
            $('#numberProcess').prepend('Nº Processo: ' + data.process);
            $('#dateDocument').prepend('Data: ' + data.date);
        });
    }

    function formatdata(data) {
        return data.map(doc => {
            return {
                title: doc.title
            }
        })
    }

    $(document).ready(function() {
        $(".documentChosen").chosen({
            disable_search_threshold: 10,
            no_results_text: "Nada encontrado!",
        });
        $('#document_type_id').on('change', function() {
            updateDocumentInputs();
        });
    });

    $(function() {
        $('.datetimepicker6').datetimepicker({
            defaultDate: '',
            locale: 'pt-br',
            format: 'DD/MM/YYYY',
            widgetPositioning: {
                horizontal: 'left',
                vertical: 'bottom'
            }
        });
    });

    function limparURLERecarregar() {
        window.location = '/documents/table/show';
    }

    function changeViewDocuments(param) {
        var url = '/toggle/change/view/documents/' + param;

        $.ajax({
            url: url,
            method: "GET",
            dataType: "json"
        }).success((data) => {
            //
        })
    }


    var changeRead = function(id) {
        var url = '/documents-read/' + id + '/toggle';
        $.ajax({
            method: "GET",
            url: url,
            dataType: "json"
        }).success(function(result, textStatus, jqXHR) {
            // console.log(result);
        });
    }

    var changeApproved = function(id) {
        var url = '/documents-approved/' + id + '/toggle';
        $.ajax({
            method: "GET",
            url: url,
            dataType: "json"
        }).success(function(result, textStatus, jqXHR) {
            //console.log(result);
        });
    }

    $('#show-id-entidade').hide()
    $('#show-id-people').hide()

    $('#multiple-select-clear-field').on('change', function() {
        mouseOutModels();
    });

    function mouseOutModels() {
        var id = $('#multiple-select-clear-field').val();


        if (!id) {
            console.log('Nenhum valor selecionado');
            return;
        }

        var url = '/documents/models/get/active/inputs';
        var data = {
            'id': id,
            '_token': '{{ csrf_token() }}'
        };

        $.ajax({
            url: url,
            data: data,
            method: 'GET'
        }).done(function(data) {
            var result = JSON.parse(data);

            $('#show-id-entidade').hide();
            $('#show-id-people').hide();

            console.log(result);
            if (result[0]) {
                var id_entidade = result[0].id_entidade;
                var id_people = result[0].id_people;

                if (id_entidade == 1) {
                    $('#show-id-entidade').show();
                }
                if (id_people == 1) {
                    $('#show-id-people').show();
                }
            } else {
                console.log('não possui inputs vinculados a esse modelo');
            }
        }).fail(function(jqXHR, textStatus, errorThrown) {
            console.log("Erro na requisição: " + textStatus);
        });
    }
</script>
<style>
    .icon-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        color: #fff;
        font-size: 15px;
        margin: 0 3px;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        text-decoration: none;
        border: none;
        cursor: pointer;
    }

    .icon-btn i {
        transition: transform 0.2s ease;
    }

    .icon-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    .icon-btn:hover i {
        transform: scale(1.2);
    }

    .btn-file {
        background-color: #007bff;
        /* Azul */
        color: #fff;
    }

    .btn-info-footer {
        background-color: #17a2b8;
        color: #fff;
    }

    .btn-anexo {
        background-color: #6f42c1;
        color: #fff;
    }

    .btn-editar {
        background-color: #1a4d27;
        color: #fff;
    }

    .btn-sign {
        background-color: #1b3c85;
        color: #fff;
    }

    .btn-sign:hover {
        color: #fff !important;
    }

    .btn-download {
        background-color: #178b30;
        color: #fff;
    }

    .btn-download:hover {
        color: #fff !important;
    }


    .btn-dark {
        background-color: #343a40;
        color: #fff;
    }

    .btn-parecer {
        background-color: #ffc107;
        color: #fff;
    }

    .btn-lixo {
        background-color: #f44336;
        color: #fff;
    }

    .btn-file:hover {
        background-color: #0069d9;
        color: white;
    }

    .btn-info-footer:hover {
        background-color: #138496;
        color: white;
    }

    .btn-anexo:hover {
        background-color: #5a32a3;
        color: white;
    }

    .btn-editar:hover {
        background-color: #218838;
        color: white;
    }

    .btn-dark:hover {
        background-color: #23272b;
        color: white;
    }

    .btn-parecer:hover {
        background-color: #e0a800;
        color: white;
    }

    .btn-lixo:hover {
        background-color: #d32f2f;
        color: white;
    }


    .icon-btn i {
        transform: scale(1.2);
        font-size: 1.5rem;
    }

    .badge-elaboracao {
        background-color: #6c757d;
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
    }

    .badge-protocolado {
        background-color: #007bff;
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
    }

    .badge-aberto {
        background-color: #fd7e14;
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
    }

    .badge-aprovado {
        background-color: #28a745;
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
    }

    .badge-rejeitado {
        background-color: #dc3545;
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
    }

    .badge-info {
        background-color: #17a2b8;
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
    }

    .badge-success {
        background-color: #28a745;
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
    }

    .badge-danger {
        background-color: #dc3545;
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
    }
</style>