@extends('layouts.publicador.layout_novo')

@section('content')

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" />
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.32/dist/sweetalert2.min.css">

    <div class="container my-4 py-3">


        <h4 class="mb-4">
            @choice('labels.usuarios', 0)
            <small class="text-muted">@lang('labels.acoes.pesquisar')</small>
        </h4>

        <div class="pesquisa">
            {!! Form::open([
                'route' => ['publicador.usuarios.index'],
                'method' => 'GET',
                'class' => 'form my-2 mb-4',
                'novalidate' => true,
            ]) !!}
            <div class="row">

                <div class="col-sm-6">
                    <div class="form-group">
                        <div class='input-group'>
                            {{ Form::text('nome', \Request::query('nome'), ['class' => 'form-control form-control-sm', 'placeholder' => __('labels.nome')]) }}
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <div class='input-group'>
                            {{ Form::email('email', \Request::query('email'), ['class' => 'form-control form-control-sm', 'placeholder' => __('labels.email')]) }}
                        </div>
                    </div>
                </div>
                <div class="col-12 text-right">
                    {{ Form::submit(__('labels.acoes.pesquisar'), ['class' => 'btn btn-sm btn-primary mb-3']) }}
                </div>
            </div>
            {!! Form::close() !!}
        </div>




        @if (session('status-success'))
            <div class="alert alert-success text-center" role="alert">
                {{ session('status-success') }}
            </div>
        @endif

        @if (session('status-error'))
            <div class="alert alert-danger text-center" role="alert">
                {{ session('status-error') }}
            </div>
        @endif

        @include('layouts.publicador.aviso_paginacao')


        @can('usuarios_adicionar')
            <div class="w-100 text-right mb-3">
                <a href="{{ route('publicador.usuarios.adicionar') }}" class="btn btn-sm btn-success">@lang('labels.acoes.adicionar')</a>
            </div>
        @endcan
        @unless ($lista->isEmpty())
            <table class="table table-sm table-striped table-bordered table-hover">
                <thead class="thead-default">
                    <tr>
                        <th class="w-25">@lang('labels.nome')</th>
                        <th>@lang('labels.email')</th>
                        <th>@lang('labels.admin')</th>
                        <th class="d-none d-sm-table-cell">@lang('labels.data_cadastro')</th>
                        <th>&nbsp;</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($lista as $c => $item)
                        <tr>
                            <td scope="row" class="w-25">{{ $item->name }}</td>
                            <td>{{ $item->email }}</td>
                            <td>{{ __($item->is_admin ? 'labels.sim' : 'labels.nao') }}</td>
                            <td class="d-none d-sm-table-cell">
                                {{ $item->created_at->format('d/m/Y H:i') }}</td>

                            <td class="text-right" nowrap>
                                <div class="btn-group float-end">
                                    @can('usuarios_alterar')
                                        <a href="{{ route('publicador.usuarios.editar', [$item->id]) }}"
                                            class="btn btn-sm btn-primary" title="@lang('labels.acoes.alterar')">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round">
                                                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
                                                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
                                            </svg>
                                        </a>
                                    @endcan
                                    {{--                                         
                                        <button class="btn btn-sm btn-secondary text-white" 
                                                title="Detalhes" 
                                                data-usuario-id="{{ $item->id }}">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                <circle cx="12" cy="12" r="10" />
                                                <line x1="12" y1="16" x2="12" y2="12" />
                                                <line x1="12" y1="8" x2="12.01" y2="8" />
                                            </svg>
                                        </button> --}}

                                    @can('usuarios_excluir')
                                        <button type="button" class="btn btn-sm btn-danger"
                                            onclick="confirmarExclusao('{{ $item->id }}', '{{ $item->name }}')"
                                            title="@lang('labels.acoes.excluir')">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round">
                                                <path d="M18 6 6 18" />
                                                <path d="m6 6 12 12" />
                                            </svg>
                                        </button>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @endunless


        @include('layouts.publicador.paginacao')


        <style>
            .text-primary {
                color: rgb(2, 80, 137) !important;
            }

            :root {
                --primary-color: #025490;
                --primary-hover: #004494;
                --secondary-color: #6c757d;
                --success-color: #28a745;
                --info-color: #17a2b8;
                --warning-color: #ffc107;
                --danger-color: #dc3545;
                --light-color: #f8f9fa;
                --dark-color: #343a40;
                --header-height: 60px;
                --transition-speed: 0.3s;
            }

            /* Estilos Gerais */
            body {
                background-color: #f8f9fa;
            }

            /* Cards */
            .card {
                border: 1px solid rgba(0, 0, 0, 0.1);
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
                transition: box-shadow var(--transition-speed);
            }

            .card:hover {
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            }

            .card-header {
                background-color: white;
                border-bottom: 1px solid #E5E7EB;
                padding: 1rem 1.25rem;
            }

            .card-header .card-title {
                color: #374151;
                font-size: 1rem;
                font-weight: 600;
                margin: 0;
            }

            /* Formulários */
            .form-control,
            .form-select {
                border: 1px solid rgba(0, 0, 0, 0.1);
                transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
            }

            .form-control:focus,
            .form-select:focus {
                border-color: var(--primary-color);
                box-shadow: 0 0 0 0.2rem rgba(2, 84, 144, 0.25);
            }

            .input-group-text {
                background-color: #f8f9fa;
                border: 1px solid rgba(0, 0, 0, 0.1);
            }

            /* Select2 Personalização */
            .select2-container--bootstrap-5 .select2-selection {
                border: 1px solid rgba(0, 0, 0, 0.1);
                min-height: 38px;
            }

            .select2-container--bootstrap-5 .select2-selection--single {
                padding-top: 4px;
            }

            .select2-container--bootstrap-5.select2-container--focus .select2-selection,
            .select2-container--bootstrap-5.select2-container--open .select2-selection {
                border-color: var(--primary-color);
                box-shadow: 0 0 0 0.2rem rgba(2, 84, 144, 0.25);
            }

            .table-container {
                position: relative;
                max-height: calc(100vh - 400px);
                overflow-y: auto;
            }

            #processosTable {
                position: relative;
                width: 100%;
                margin-bottom: 0;
                border-collapse: separate;
                border-spacing: 0;
            }

            #processosTable thead {
                position: sticky;
                top: 0;
                z-index: 1020;
                background-color: var(--primary-color);
            }


            #processosTable thead th {
                background-color: var(--primary-color);
                color: white;
                padding: 1rem;
                font-weight: 500;
                text-align: left;
                position: sticky;
                top: 0;
            }

            .btn-group {
                z-index: 1010;
            }

            #processosTable td:last-child {
                position: relative;
                z-index: 1010;
            }


            #processosTable thead th::after {
                content: '';
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 2px;
                background-color: rgba(0, 0, 0, 0.1);
            }

            #processosTable tbody tr {
                transition: background-color var(--transition-speed);
            }

            #processosTable tbody tr:hover {
                background-color: rgba(2, 84, 144, 0.05);
            }

            #processosTable td {
                vertical-align: middle;
                border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            }

            /* Células Especiais */
            .unidade-cell,
            .dias-cell,
            .data-cell {
                padding: 0.25rem 0.5rem;
                margin-bottom: 0.25rem;
                background-color: rgba(2, 84, 144, 0.1);
                border-radius: 4px;
                font-size: 0.875rem;
            }

            .unidade-cell:last-child,
            .dias-cell:last-child,
            .data-cell:last-child {
                margin-bottom: 0;
            }

            /* Modal de Detalhes */
            .modal-xl {
                max-width: 1140px;
                margin: 1.75rem auto;
            }

            .modal-content {
                border: none;
                border-radius: 0.75rem;
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            }

            .modal-header {
                background-color: var(--primary-color);
                color: white;
                border-radius: 0.75rem 0.75rem 0 0;
                padding: 1.25rem 2rem;
            }

            .modal-header .btn-close {
                filter: brightness(0) invert(1);
                opacity: 0.8;
                transition: opacity 0.2s;
            }

            .modal-header .btn-close:hover {
                opacity: 1;
            }

            .modal-title {
                font-size: 1.25rem;
                font-weight: 500;
            }

            .modal-body {
                padding: 1.25rem 2rem;
                background-color: #f8f9fa;
            }

            .modal-body .col-md-6 {
                padding: 0 1rem;
            }

            /* Lista de Detalhes do Processo */
            .process-details {
                background: white;
                border-radius: 0.5rem;
                padding: 1.25rem;
                margin: 0;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                display: grid;
                gap: 0.5rem 1rem;
            }

            .process-details dt {
                grid-column: 1;
                margin-bottom: 0.75rem;
                font-weight: 600;
                color: #4B5563;
                margin-bottom: 0.5rem;
                font-size: 0.875rem;
            }

            .process-details dd {
                margin-bottom: 1rem;
                margin-left: 0;
                padding-left: 1rem;
                border-left: 3px solid var(--primary-color);
                color: #6B7280;
                font-size: 0.875rem;
                grid-column: 2;
                margin-bottom: 0.75rem;
            }

            .process-details dd:last-child {
                margin-bottom: 0;
            }

            @media (max-width: 992px) {
                .modal-xl {
                    max-width: 95%;
                    margin: 1rem auto;
                }
            }

            /* Responsividade para telas pequenas */
            @media (max-width: 768px) {
                .modal-body {
                    padding: 1rem;
                }

                .process-details {
                    grid-template-columns: 1fr;
                    gap: 0.25rem;
                }

                .process-details dt {
                    grid-column: 1;
                    margin-bottom: 0.25rem;
                }

                .process-details dd {
                    grid-column: 1;
                    margin-bottom: 1rem;
                }
            }

            /* Cartão de Contrato */
            .contract-card {
                background: white;
                border-radius: 0.5rem;
                padding: 1.25rem;
                margin-bottom: 1rem;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                transition: transform 0.2s;
            }

            .contract-card:hover {
                transform: translateY(-2px);
            }

            .contract-label {
                font-weight: 600;
                color: #4B5563;
                font-size: 0.75rem;
                text-transform: uppercase;
                letter-spacing: 0.025em;
                margin-bottom: 0.25rem;
            }

            .contract-value {
                color: #6B7280;
                font-size: 0.875rem;
            }

            .contract-attachments {
                margin-top: 1rem;
                padding-top: 1rem;
                border-top: 1px solid #E5E7EB;
            }

            /* Tabela de Histórico */
            .history-table {
                max-height: 600px;
                background: white;
                overflow: hidden;
                overflow-y: auto;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            }

            .history-table::-webkit-scrollbar {
                width: 8px;
            }

            .history-table::-webkit-scrollbar-track {
                background: #f1f1f1;
                border-radius: 4px;
            }

            .history-table::-webkit-scrollbar-thumb {
                background: var(--primary-color);
                border-radius: 4px;
            }

            .history-table::-webkit-scrollbar-thumb:hover {
                background: var(--primary-hover);
            }

            #historyTable {
                margin-bottom: 0;
            }

            #historyTable thead th {
                background-color: var(--primary-color);
                color: white;
                font-weight: 500;
                padding: 0.75rem 1rem;
                font-size: 0.875rem;
                border: none;
            }

            #historyTable tbody td {
                padding: 0.75rem 1rem;
                font-size: 0.875rem;
                color: #6B7280;
                border-bottom: 1px solid #E5E7EB;
                vertical-align: middle;
            }

            #historyTable tbody tr:last-child td {
                border-bottom: none;
            }

            #historyTable tbody tr.active-da {
                background-color: rgba(2, 84, 144, 0.05);
            }

            #historyTable tbody tr:hover {
                background-color: rgba(2, 84, 144, 0.02);
            }

            /* Botões */
            .btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 0.5rem;
                padding: 0.5rem 1rem;
                font-weight: 500;
                border-radius: 4px;
                transition: all var(--transition-speed);
            }

            .btn:hover {
                transform: translateY(-1px);
            }

            .btn-group {
                gap: 0.25rem;
            }

            .btn-group .btn {
                border-radius: 4px !important;
            }

            /* Alertas */
            .alert {
                border-radius: 6px;
                border: 1px solid rgba(0, 0, 0, 0.1);
                padding: 1rem;
            }

            .alert svg {
                width: 24px;
                height: 24px;
            }

            /* Scrollbar Personalizada */
            ::-webkit-scrollbar {
                width: 8px;
                height: 8px;
            }

            ::-webkit-scrollbar-track {
                background: #f1f1f1;
                border-radius: 4px;
            }

            ::-webkit-scrollbar-thumb {
                background: var(--primary-color);
                border-radius: 4px;
            }

            ::-webkit-scrollbar-thumb:hover {
                background: var(--primary-hover);
            }

            /* Loading Indicator */
            .loading-overlay {
                background-color: rgba(255, 255, 255, 0.9);
                backdrop-filter: blur(4px);
                border-radius: 0.75rem;
            }

            .spinner {
                width: 40px;
                height: 40px;
                border: 3px solid #E5E7EB;
                border-top-color: var(--primary-color);
                border-radius: 50%;
                animation: spinner 0.8s linear infinite;
            }

            @keyframes spinner {
                to {
                    transform: rotate(360deg);
                }
            }


            .modal-footer {
                background-color: white;
                border-top: 1px solid #E5E7EB;
                border-radius: 0 0 0.75rem 0.75rem;
                padding: 1.25rem 2rem;
            }

            .modal-footer .btn {
                padding: 0.5rem 1.5rem;
                font-weight: 500;
            }

            /* Responsive Adjustments */
            @media (max-width: 768px) {
                .modal-dialog {
                    margin: 0.5rem;
                }

                .process-details dt {
                    float: none;
                    width: auto;
                    text-align: left;
                }

                .process-details dd {
                    margin-left: 0;
                }

                .contract-card {
                    padding: 1rem;
                }
            }

            /* Responsividade */
            @media (max-width: 768px) {
                .btn-group {
                    flex-direction: column;
                }

                .btn-group .btn {
                    width: 100%;
                    margin-bottom: 0.5rem;
                }

                .process-details dt {
                    float: none;
                    text-align: left;
                    width: auto;
                }

                .process-details dd {
                    margin-left: 0;
                    margin-bottom: 1rem;
                }

                .modal-dialog {
                    margin: 0.5rem;
                }

                .table-container {
                    max-height: calc(100vh - 300px);
                }
            }

            /* Animações */
            .fade-enter {
                opacity: 0;
            }

            .fade-enter-active {
                opacity: 1;
                transition: opacity var(--transition-speed);
            }

            .fade-exit {
                opacity: 1;
            }

            .fade-exit-active {
                opacity: 0;
                transition: opacity var(--transition-speed);
            }

            /* Tooltips */
            .tooltip {
                font-size: 0.875rem;
            }

            .tooltip-inner {
                background-color: var(--dark-color);
                border-radius: 4px;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }

            .container-fluid.py-4 {
                padding: 0 !important;
            }
        </style>
        <style>
            /* Variáveis de Cor e Estilo */
            :root {
                --primary-color: #025490;
                --primary-hover: #01407a;
                --secondary-color: #6c757d;
                --success-color: #28a745;
                --info-color: #17a2b8;
                --surface-color: #fff;
                --border-color: rgba(0, 0, 0, 0.1);
                --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
                --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
                --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
                --transition: all 0.2s ease-in-out;
            }

            /* Card Principal */
            .card {
                background: var(--surface-color);
                border: 1px solid var(--border-color);
                border-radius: 0.75rem;
                box-shadow: var(--shadow-sm);
                transition: var(--transition);
                margin-bottom: 1.5rem;

            }

            .card-body {
                padding: 1.25rem;
            }

            .card:hover {
                box-shadow: var(--shadow-md);
            }

            /* Campo de Busca Principal */
            .search-group {
                width: 100%;
                margin: 0 auto;
                box-shadow: var(--shadow-sm);
            }

            .search-group .input-group-text {
                background-color: var(--surface-color);
                color: #6B7280;
                padding: 0.75rem 1.25rem;
                border: 1px solid #e2e8f0;
                border-right: none;
                border-top-left-radius: 0.5rem;
                border-bottom-left-radius: 0.5rem;
            }

            .search-group .form-control {
                height: 54px;
                font-size: 1rem;
                color: #374151;
                border: 1px solid #e2e8f0;
                border-left: none;
                padding: 0.75rem 1.25rem;
                border-top-right-radius: 0.5rem;
                border-bottom-right-radius: 0.5rem;
                transition: var(--transition);
            }

            .search-group .form-control::placeholder {
                color: #9CA3AF;
            }

            .search-group:hover .input-group-text,
            .search-group:hover .form-control {
                border-color: #cbd5e0;
            }

            .search-group .form-control:focus {
                box-shadow: none;
                border-color: var(--primary-color);
            }

            .search-group:focus-within {
                box-shadow: 0 0 0 3px rgba(2, 84, 144, 0.15);
                border-radius: 0.5rem;
            }

            .search-group svg {
                width: 20px;
                height: 20px;
                stroke-width: 2;
            }

            /* Botões */
            .btn {
                height: 40px;
                padding: 0 0.7rem;
                font-size: 0.95rem;
                font-weight: 500;
                display: inline-flex;
                align-items: center;
                gap: 0.625rem;
                transition: var(--transition);
                border-radius: 0.5rem;
                position: relative;
            }

            .btn:active {
                transform: translateY(1px);
            }

            .btn svg {
                width: 20px;
                height: 20px;
                stroke-width: 2;
            }

            /* Variantes de Botões */
            .btn-light {
                background: var(--surface-color);
                border-color: #e2e8f0;
                color: #4B5563;
            }

            .btn-light:hover {
                background: #f9fafb;
                border-color: #cbd5e0;
            }

            .btn-primary {
                background: var(--primary-color);
                border: none;
                color: #ffffff;
            }

            .btn-primary:hover {
                background: var(--primary-hover);
            }

            .btn-success {
                background: var(--success-color);
                border: none;
                color: #ffffff;
            }

            .btn-success:hover {
                background: #218838;
            }

            .btn-info {
                background: var(--info-color);
                border: none;
                color: #ffffff;
            }

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

            /* Badge nos Botões */
            .badge {
                position: absolute;
                top: -8px;
                right: -8px;
                min-width: 22px;
                height: 22px;
                padding: 0 8px;
                font-size: 11px;
                font-weight: 600;
                line-height: 22px;
                border-radius: 11px;
                background: var(--primary-color);
                color: #ffffff;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            }

            /* Layout e Espaçamento */
            .px-6 {
                padding-left: 2.5rem !important;
                padding-right: 2.5rem !important;
            }

            .py-5 {
                padding-top: 2rem !important;
                padding-bottom: 2rem !important;
            }

            /* Container dos Botões */
            .action-buttons {
                display: flex;
                gap: 0.75rem;
                flex-shrink: 0;
            }

            /* Responsividade */
            @media (max-width: 1024px) {
                .search-group {
                    max-width: 100%;
                }

                .btn {
                    padding: 0 1rem;
                }

                .btn-text {
                    display: none;
                }

                .action-buttons {
                    gap: 0.5rem;
                }
            }

            @media (max-width: 768px) {
                .px-6 {
                    padding-left: 1rem !important;
                    padding-right: 1rem !important;
                }

                .py-5 {
                    padding-top: 1.5rem !important;
                    padding-bottom: 1.5rem !important;
                }

                .search-group .form-control {
                    height: 48px;
                }

                .btn {
                    height: 48px;
                    padding: 0 0.75rem;
                }

                .btn svg {
                    width: 18px;
                    height: 18px;
                }
            }

            .offcanvas-backdrop {
                position: fixed;
                top: 0;
                left: 0;
                z-index: 1040;
                width: 100vw;
                height: 100vh;
                background-color: #000;
                pointer-events: auto;
            }

            .offcanvas-backdrop.fade {
                opacity: 0;
                transition: opacity 0.15s linear;
            }

            .offcanvas-backdrop.show {
                opacity: 0.5;
            }

            .offcanvas {
                transition: transform 0.3s ease-in-out;
            }

            body.offcanvas-open {
                overflow: hidden;
                padding-right: 0 !important;
            }

            /* Animação suave para o hover dos elementos */
            .form-control,
            .btn,
            .badge {
                transition: all 0.2s ease-in-out;
            }

            /* Melhorias de Acessibilidade */
            .form-control:focus,
            .btn:focus {
                outline: none;
            }

            .btn:focus-visible {
                box-shadow: 0 0 0 3px rgba(2, 84, 144, 0.4);
            }

            .swal2-small {
                max-width: 500px;
                padding: 1.25rem;
            }

            .swal2-small textarea.form-control {
                height: 80px !important;
                margin-bottom: 1rem;
                width: auto;
            }

            .swal2-container-custom {
                padding: 1rem;
            }

            /* Ajusta o espaçamento do título */
            .swal2-small .swal2-title {
                padding: 0.5rem 0;
                font-size: 1.25rem;
            }

            /* Ajusta o espaçamento do ícone */
            .swal2-small .swal2-icon {
                margin: 0.5rem auto;
            }

            .btn-favorito svg {
                transition: all 0.3s ease;
            }

            .btn-favorito:hover {
                transform: scale(1.1);
            }

            .btn-light.btn-favorito {
                background-color: #f8f9fa;
                border-color: #ddd;
            }

            .btn-warning.btn-favorito {
                background-color: #ffc107;
                border-color: #ffc107;
                color: #000;
            }

            .btn-warning.btn-favorito svg {
                fill: currentColor;
            }

            .aditivo-item {
                transition: all 0.2s ease-in-out;
            }

            .aditivo-item .card {
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                transition: all 0.2s ease-in-out;
            }

            .aditivo-item .card:hover {
                box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
                transform: translateY(-1px);
            }

            .contract-label {
                font-weight: 600;
                color: #495057;
                font-size: 0.875rem;
                padding-bottom: 0.5rem;
                border-bottom: 1px solid #e9ecef;
                margin-bottom: 1rem;
            }

            #situacoesTable thead th {
                position: sticky;
                top: 0;
                background: white;
                z-index: 1;
            }

            .loading-overlay {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(255, 255, 255, 0.8);
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 1000;
            }

            /* Estilo para o modal de situação */
            .bg-gradient-primary {
                background: linear-gradient(45deg, var(--primary-color), #0275d8);
            }

            .modal-content {
                border-radius: 1rem;
                overflow: hidden;
            }

            .card {
                transition: transform 0.2s ease, box-shadow 0.2s ease;
                border-radius: 0.75rem;
            }

            .input-group-text {
                color: #6c757d;
            }

            .form-control:focus {
                box-shadow: none;
                border-color: var(--primary-color);
            }

            .input-group:focus-within {
                box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
                border-radius: 0.375rem;
            }

            .table-hover tbody tr:hover {
                background-color: rgba(2, 84, 144, 0.05);
            }


            .toggle-details {
                position: relative;
                cursor: pointer;
                transition: all 0.3s ease;
            }

            .toggle-details:hover::after {
                content: 'Ver detalhes';
                position: absolute;
                background-color: var(--primary-color);
                color: white;
                padding: 4px 8px;
                border-radius: 4px;
                font-size: 12px;
                white-space: nowrap;
                top: 100%;
                left: 50%;
                transform: translateX(-50%);
                opacity: 0;
                animation: fadeIn 0.2s ease forwards;
                z-index: 1000;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }

            @keyframes fadeIn {
                from {
                    opacity: 0;
                    transform: translate(-50%, -10px);
                }

                to {
                    opacity: 1;
                    transform: translate(-50%, 0);
                }
            }

            .toggle-details:active {
                background-color: rgba(2, 84, 144, 0.1);
            }

            .toggle-details::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 0;
                height: 0;
                background: rgba(2, 84, 144, 0.2);
                border-radius: 50%;
                transform: translate(-50%, -50%);
                transition: all 0.3s ease;
            }

            .toggle-details:active::before {
                width: 100%;
                height: 100%;
                border-radius: 4px;
            }
        </style>
    </div>


@endsection