@extends('layouts.dashboard.superadminapp')

@section('title', 'Sales RFQ List')

@section('content')

<!-- Toast Notification -->
<div id="toast-notification" class="toast-notification">
    <i class="fas fa-check-circle toast-icon"></i>
    <span id="toast-message"></span>
</div>

<!-- Modern Page Header -->
<div class="modern-page-header">
    <div class="header-content">
        <div class="header-left">
            <div class="icon-wrapper" style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);">
                <i class="fas fa-file-alt"></i>
            </div>
            <div class="header-text">
                <h1>Sales RFQ List</h1>
                <p class="header-breadcrumb">
                    <i class="fas fa-home"></i>
                    <span>Sales BOM</span>
                    <i class="fas fa-chevron-right"></i>
                    <span>RFQ</span>
                    <i class="fas fa-chevron-right"></i>
                    <span class="active">List</span>
                </p>
            </div>
        </div>
        <div class="header-right">
            <div class="header-info-item">
                <i class="fas fa-calendar-alt"></i>
                <span id="display-date"></span>
            </div>
            <div class="header-info-item">
                <i class="fas fa-clock"></i>
                <span id="display-time"></span>
            </div>
        </div>
    </div>
</div>

<!-- KPI Summary Cards -->
<div class="kpi-row">
    <div class="kpi-card total">
        <div class="kpi-content">
            <div class="kpi-info">
                <div class="kpi-label">Total RFQs</div>
                <div class="kpi-value">{{ $rfqs->count() }}</div>
            </div>
            <div class="kpi-icon">
                <i class="fas fa-file-alt"></i>
            </div>
        </div>
    </div>
    <div class="kpi-card pending">
        <div class="kpi-content">
            <div class="kpi-info">
                <div class="kpi-label">Pending</div>
                <div class="kpi-value">{{ $rfqs->where('status', 'pending')->count() }}</div>
            </div>
            <div class="kpi-icon">
                <i class="fas fa-clock"></i>
            </div>
        </div>
    </div>
    <div class="kpi-card approved">
        <div class="kpi-content">
            <div class="kpi-info">
                <div class="kpi-label">Approved</div>
                <div class="kpi-value">{{ $rfqs->where('status', 'approved')->count() }}</div>
            </div>
            <div class="kpi-icon">
                <i class="fas fa-check-circle"></i>
            </div>
        </div>
    </div>
    <div class="kpi-card rejected">
        <div class="kpi-content">
            <div class="kpi-info">
                <div class="kpi-label">Rejected</div>
                <div class="kpi-value">{{ $rfqs->where('status', 'rejected')->count() }}</div>
            </div>
            <div class="kpi-icon">
                <i class="fas fa-times-circle"></i>
            </div>
        </div>
    </div>
</div>

<!-- Quick Actions -->
<div class="quick-actions-card">
    <div class="quick-actions-content">
        <div class="quick-actions-title">
            <i class="fas fa-bolt"></i>
            Quick Actions
        </div>
        <div class="quick-actions-buttons">
            <a href="{{ route('superadmin.salesbom.rfq.rfq') }}" class="btn-quick-action primary">
                <i class="fas fa-plus"></i>
                New RFQ
            </a>
            <a href="{{ route('superadmin.salesbom.quotation.quotationdetails') }}" class="btn-quick-action success">
                <i class="fas fa-file-invoice"></i>
                Quotations
            </a>
            <a href="{{ route('superadmin.customer.customerlist') }}" class="btn-quick-action info">
                <i class="fas fa-users"></i>
                Customers
            </a>
        </div>
    </div>
</div>

<!-- Table Card -->
<div class="section-card">
    <div class="section-header" style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);">
        <div class="section-header-content">
            <i class="fas fa-table"></i>
            <h2>RFQ Data</h2>
        </div>
        <a href="{{ route('superadmin.salesbom.rfq.rfq') }}" class="btn-header-action">
            <i class="fas fa-plus"></i>
            Add RFQ
        </a>
    </div>
    <div class="section-body">
        <div class="table-responsive">
            <table class="modern-table" id="rfqTable">
                <thead>
                    <tr>
                        <th style="width: 5%;">#</th>
                        <th style="width: 15%;">RFQ No</th>
                        <th style="width: 12%;">Date</th>
                        <th style="width: 25%;">Customer</th>
                        <th style="width: 12%;">Part No</th>
                        <th style="width: 10%;">Quantity</th>
                        <th style="width: 10%;">Status</th>
                        <th style="width: 16%;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($rfqs as $index => $rfq)
                        <tr id="row-{{ $rfq->id }}">
                            <td>{{ $index + 1 }}</td>
                            <td><strong class="text-purple">{{ $rfq->rfq_no }}</strong></td>
                            <td>{{ \Carbon\Carbon::parse($rfq->rfq_date)->format('d-m-Y') }}</td>
                            <td>
                                <span title="{{ $rfq->customerInfo ? $rfq->customerInfo->company : '-' }}">
                                    {{ $rfq->customerInfo ? Str::limit($rfq->customerInfo->company, 30) : '-' }}
                                </span>
                            </td>
                            <td>{{ $rfq->part_no ?: '-' }}</td>
                            <td>{{ $rfq->quantity }} {{ $rfq->uom }}</td>
                            <td>
                                @if($rfq->status == 'approved')
                                    <span class="status-badge approved">
                                        <i class="fas fa-check-circle"></i>
                                        Approved
                                    </span>
                                @elseif($rfq->status == 'rejected')
                                    <span class="status-badge rejected">
                                        <i class="fas fa-times-circle"></i>
                                        Rejected
                                    </span>
                                @else
                                    <span class="status-badge pending">
                                        <i class="fas fa-clock"></i>
                                        Pending
                                    </span>
                                @endif
                            </td>
                            <td>
                                <div class="action-buttons">
                                    <a href="{{ route('superadmin.salesbom.rfq.view', $rfq->id) }}"
                                        class="btn-action view" title="View">
                                        <i class="fa fa-eye"></i>
                                    </a>
                                    <a href="{{ route('superadmin.salesbom.rfq.edit', $rfq->id) }}"
                                        class="btn-action edit" title="Edit">
                                        <i class="fa fa-edit"></i>
                                    </a>
                                    @if ($rfq->status === 'pending')
                                        <button class="btn-action approve approve-btn"
                                            data-id="{{ $rfq->id }}" data-no="{{ $rfq->rfq_no }}" title="Approve">
                                            <i class="fa fa-check"></i>
                                        </button>
                                        <button class="btn-action reject reject-btn"
                                            data-id="{{ $rfq->id }}" data-no="{{ $rfq->rfq_no }}" title="Reject">
                                            <i class="fa fa-times"></i>
                                        </button>
                                    @endif
                                    <button class="btn-action delete delete-btn"
                                        data-id="{{ $rfq->id }}" data-no="{{ $rfq->rfq_no }}" title="Delete">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header" style="background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle"></i>
                    Delete RFQ
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this RFQ?</p>
                <p class="text-purple"><strong id="deleteItemNo"></strong></p>
                <p class="text-muted small">This action cannot be undone. All related files will also be deleted.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn-modal-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn-modal-danger" id="confirmDeleteBtn">
                    <span class="spinner-border spinner-border-sm d-none"></span>
                    <span class="btn-text">Delete</span>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Approve Modal -->
<div class="modal fade" id="approveModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">
                <h5 class="modal-title">
                    <i class="fas fa-check-circle"></i>
                    Approve RFQ
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to approve this RFQ?</p>
                <p class="text-success"><strong id="approveItemNo"></strong></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn-modal-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn-modal-success" id="confirmApproveBtn">
                    <span class="spinner-border spinner-border-sm d-none"></span>
                    <span class="btn-text">Approve</span>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Reject Modal -->
<div class="modal fade" id="rejectModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header" style="background: linear-gradient(135deg, #64748b 0%, #475569 100%);">
                <h5 class="modal-title">
                    <i class="fas fa-times-circle"></i>
                    Reject RFQ
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to reject this RFQ?</p>
                <p class="text-danger"><strong id="rejectItemNo"></strong></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn-modal-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn-modal-danger" id="confirmRejectBtn">
                    <span class="spinner-border spinner-border-sm d-none"></span>
                    <span class="btn-text">Reject</span>
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Display Live Date and Time
    function updateDateTime() {
        const now = new Date();
        const dateOptions = { year: 'numeric', month: 'short', day: 'numeric' };
        const timeOptions = { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true };

        document.getElementById('display-date').textContent = now.toLocaleDateString('en-US', dateOptions);
        document.getElementById('display-time').textContent = now.toLocaleTimeString('en-US', timeOptions);
    }
    updateDateTime();
    setInterval(updateDateTime, 1000);

    // Toast Notification Function
    function showToast(message, type = 'success') {
        const toast = document.getElementById('toast-notification');
        const toastMessage = document.getElementById('toast-message');
        const toastIcon = toast.querySelector('.toast-icon');

        toastMessage.textContent = message;

        if (type === 'error') {
            toast.style.background = 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)';
            toastIcon.className = 'fas fa-exclamation-circle toast-icon';
        } else {
            toast.style.background = 'linear-gradient(135deg, #10b981 0%, #059669 100%)';
            toastIcon.className = 'fas fa-check-circle toast-icon';
        }

        toast.classList.add('show');

        setTimeout(() => {
            toast.classList.remove('show');
        }, 4000);
    }

    // Initialize DataTable
    var table = $('#rfqTable').DataTable({
        dom: 'Bfrtip',
        buttons: [
            { extend: 'copy', className: 'dt-button', text: '<i class="fas fa-copy"></i> Copy' },
            { extend: 'csv', className: 'dt-button', text: '<i class="fas fa-file-csv"></i> CSV' },
            { extend: 'excel', className: 'dt-button', text: '<i class="fas fa-file-excel"></i> Excel' },
            { extend: 'pdf', className: 'dt-button', text: '<i class="fas fa-file-pdf"></i> PDF' },
            { extend: 'print', className: 'dt-button', text: '<i class="fas fa-print"></i> Print' }
        ],
        pageLength: 10,
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
        order: [[1, 'desc']],
        autoWidth: false,
        columnDefs: [
            { orderable: false, targets: [7] }
        ],
        language: {
            emptyTable: '<div class="empty-state"><i class="fas fa-inbox"></i><p>No RFQs found</p></div>',
            search: '',
            searchPlaceholder: 'Search RFQs...'
        }
    });

    // Delete RFQ
    var deleteId = null;
    $(document).on('click', '.delete-btn', function() {
        deleteId = $(this).data('id');
        $('#deleteItemNo').text($(this).data('no'));
        $('#deleteModal').modal('show');
    });

    $('#confirmDeleteBtn').on('click', function() {
        if (!deleteId) return;

        var $btn = $(this);
        var $spinner = $btn.find('.spinner-border');
        var $text = $btn.find('.btn-text');

        $btn.prop('disabled', true);
        $spinner.removeClass('d-none');
        $text.text('Deleting...');

        $.ajax({
            url: '{{ url("superadmin/sales/rfq") }}/' + deleteId,
            type: 'DELETE',
            data: { '_token': '{{ csrf_token() }}' },
            success: function(response) {
                $('#deleteModal').modal('hide');
                table.row('#row-' + deleteId).remove().draw(false);
                showToast(response.message || 'RFQ deleted successfully!', 'success');
            },
            error: function(xhr) {
                showToast(xhr.responseJSON?.message || 'Could not delete RFQ.', 'error');
            },
            complete: function() {
                $btn.prop('disabled', false);
                $spinner.addClass('d-none');
                $text.text('Delete');
                deleteId = null;
            }
        });
    });

    // Approve RFQ
    var approveId = null;
    $(document).on('click', '.approve-btn', function() {
        approveId = $(this).data('id');
        $('#approveItemNo').text($(this).data('no'));
        $('#approveModal').modal('show');
    });

    $('#confirmApproveBtn').on('click', function() {
        if (!approveId) return;

        var $btn = $(this);
        var $spinner = $btn.find('.spinner-border');
        var $text = $btn.find('.btn-text');

        $btn.prop('disabled', true);
        $spinner.removeClass('d-none');
        $text.text('Approving...');

        $.post('{{ url("superadmin/sales/rfq") }}/' + approveId + '/approve', {
            _token: '{{ csrf_token() }}'
        }, function(response) {
            $('#approveModal').modal('hide');
            showToast(response.message || 'RFQ approved successfully!', 'success');
            setTimeout(function() { location.reload(); }, 1000);
        }).fail(function() {
            showToast('Approval failed.', 'error');
        }).always(function() {
            $btn.prop('disabled', false);
            $spinner.addClass('d-none');
            $text.text('Approve');
            approveId = null;
        });
    });

    // Reject RFQ
    var rejectId = null;
    $(document).on('click', '.reject-btn', function() {
        rejectId = $(this).data('id');
        $('#rejectItemNo').text($(this).data('no'));
        $('#rejectModal').modal('show');
    });

    $('#confirmRejectBtn').on('click', function() {
        if (!rejectId) return;

        var $btn = $(this);
        var $spinner = $btn.find('.spinner-border');
        var $text = $btn.find('.btn-text');

        $btn.prop('disabled', true);
        $spinner.removeClass('d-none');
        $text.text('Rejecting...');

        $.post('{{ url("superadmin/sales/rfq") }}/' + rejectId + '/reject', {
            _token: '{{ csrf_token() }}'
        }, function(response) {
            $('#rejectModal').modal('hide');
            showToast(response.message || 'RFQ rejected!', 'success');
            setTimeout(function() { location.reload(); }, 1000);
        }).fail(function() {
            showToast('Rejection failed.', 'error');
        }).always(function() {
            $btn.prop('disabled', false);
            $spinner.addClass('d-none');
            $text.text('Reject');
            rejectId = null;
        });
    });
});
</script>

<style>
/* Toast Notification */
.toast-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    display: none;
    align-items: center;
    gap: 0.75rem;
    z-index: 10000;
    min-width: 300px;
    animation: slideIn 0.3s ease-out;
}

.toast-notification.show {
    display: flex;
}

.toast-icon {
    font-size: 1.5rem;
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Modern Page Header */
.modern-page-header {
    background: linear-gradient(135deg, #ffffff 0%, #f5f3ff 100%);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.1);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.75rem;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.header-text h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.25rem 0;
}

.header-breadcrumb {
    color: #64748b;
    font-size: 0.875rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-breadcrumb .active {
    color: #8b5cf6;
    font-weight: 600;
}

.header-right {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.header-info-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #475569;
    font-size: 0.9rem;
}

.header-info-item i {
    color: #8b5cf6;
    font-size: 1.1rem;
}

/* KPI Cards */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.kpi-card {
    border-radius: 16px;
    padding: 1.5rem;
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

.kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.kpi-card.total {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.kpi-card.pending {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.kpi-card.approved {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.kpi-card.rejected {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.kpi-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kpi-label {
    font-size: 0.875rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.kpi-value {
    font-size: 2rem;
    font-weight: 700;
}

.kpi-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

/* Quick Actions */
.quick-actions-card {
    background: linear-gradient(135deg, #ffffff 0%, #f5f3ff 100%);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.1);
}

.quick-actions-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.quick-actions-title {
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quick-actions-title i {
    color: #8b5cf6;
}

.quick-actions-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-quick-action {
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.btn-quick-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: white;
}

.btn-quick-action.primary {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.btn-quick-action.success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.btn-quick-action.info {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

/* Section Card */
.section-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
    overflow: hidden;
    border: 1px solid rgba(139, 92, 246, 0.1);
}

.section-header {
    padding: 1.25rem 1.5rem;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-header-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-header-content i {
    font-size: 1.5rem;
}

.section-header-content h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.btn-header-action {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.btn-header-action:hover {
    background: rgba(255, 255, 255, 0.3);
    color: white;
}

.section-body {
    padding: 1.5rem;
}

/* Modern Table */
.table-responsive {
    overflow-x: auto;
}

.modern-table {
    width: 100%;
    border-collapse: collapse;
}

.modern-table thead {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.modern-table thead th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.85rem;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.modern-table tbody tr {
    border-bottom: 1px solid #e2e8f0;
    transition: background 0.2s;
}

.modern-table tbody tr:hover {
    background: #f8fafc;
}

.modern-table tbody td {
    padding: 1rem;
    vertical-align: middle;
    color: #475569;
    font-size: 0.9rem;
}

.text-purple {
    color: #8b5cf6;
    font-weight: 600;
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.pending {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
}

.status-badge.approved {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
}

.status-badge.rejected {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.btn-action {
    padding: 0.375rem 0.625rem;
    border-radius: 6px;
    border: none;
    color: white;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: white;
}

.btn-action.view {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.btn-action.edit {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.btn-action.approve {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.btn-action.reject {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

.btn-action.delete {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

/* DataTable Enhancements */
.dt-buttons {
    margin-bottom: 1rem;
}

.dt-button {
    background: white !important;
    border: 2px solid #e2e8f0 !important;
    color: #475569 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    margin-right: 0.5rem !important;
    transition: all 0.2s !important;
}

.dt-button:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    border-color: transparent !important;
    color: white !important;
    transform: translateY(-2px);
}

.dataTables_filter input {
    border: 2px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
    transition: all 0.2s;
}

.dataTables_filter input:focus {
    outline: none !important;
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
}

.dataTables_info {
    color: #64748b;
    font-size: 0.875rem;
}

.dataTables_paginate .paginate_button {
    padding: 0.375rem 0.75rem !important;
    border-radius: 6px !important;
    margin: 0 0.25rem !important;
}

.dataTables_paginate .paginate_button.current {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    border-color: transparent !important;
    color: white !important;
}

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #94a3b8;
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.empty-state p {
    font-size: 1.1rem;
    margin: 0;
}

/* Modal Styling */
.modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.modal-header {
    color: white;
    padding: 1.25rem 1.5rem;
    border: none;
}

.modal-header .modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-header .close {
    color: white;
    opacity: 0.8;
    text-shadow: none;
    font-size: 1.5rem;
}

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

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.btn-modal-secondary {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    color: white;
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-modal-secondary:hover {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    transform: translateY(-2px);
}

.btn-modal-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-modal-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-2px);
}

.btn-modal-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-modal-success:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-right {
        width: 100%;
        justify-content: space-between;
    }

    .kpi-row {
        grid-template-columns: 1fr;
    }

    .quick-actions-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .quick-actions-buttons {
        width: 100%;
    }

    .btn-quick-action {
        flex: 1;
        justify-content: center;
    }
}
</style>
@endpush