@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <!-- Modern Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb modern-breadcrumb-rejection">
            <li class="breadcrumb-item">
                <a href="{{ route('dashboard') }}" class="breadcrumb-link">
                    <i class="bx bx-home"></i>
                    <span>Dashboard</span>
                </a>
            </li>
            <li class="breadcrumb-item active">
                <i class="bx bx-x-circle"></i>
                <span>Rejections</span>
            </li>
        </ol>
    </nav>

    <!-- Modern Page Header -->
    <div class="page-header-modern mb-4">
        <div class="d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center">
                <div class="header-icon me-3">
                    <i class="bx bx-x-circle"></i>
                </div>
                <div>
                    <h1 class="page-title mb-0">Rejection Management</h1>
                    <p class="page-subtitle mb-0">Track and analyze rejected applications</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Analytics Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card analytics-card border-0">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-1">Total Rejections</h6>
                            <h3 class="mb-0 fw-bold">{{ number_format($analytics['total']) }}</h3>
                        </div>
                        <div class="analytics-icon bg-danger">
                            <i class="bx bx-x-circle"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card analytics-card border-0">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-1">Today</h6>
                            <h3 class="mb-0 fw-bold">{{ number_format($analytics['today']) }}</h3>
                        </div>
                        <div class="analytics-icon bg-warning">
                            <i class="bx bx-calendar-x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card analytics-card border-0">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-1">This Week</h6>
                            <h3 class="mb-0 fw-bold">{{ number_format($analytics['week']) }}</h3>
                        </div>
                        <div class="analytics-icon bg-info">
                            <i class="bx bx-calendar-week"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card analytics-card border-0">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="text-muted mb-1">This Month</h6>
                            <h3 class="mb-0 fw-bold">{{ number_format($analytics['month']) }}</h3>
                        </div>
                        <div class="analytics-icon bg-primary">
                            <i class="bx bx-calendar"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="row mb-4">
        <div class="col-md-6 mb-3">
            <div class="card border-0 shadow-sm chart-card">
                <div class="card-header chart-header-reason">
                    <h5 class="mb-0 text-white">
                        <i class="bx bx-pie-chart-alt-2 me-2"></i>Rejections by Reason
                    </h5>
                </div>
                <div class="card-body p-4">
                    @if($analytics['by_reason']->count() > 0)
                        @foreach($analytics['by_reason'] as $index => $reason)
                            @php
                                $percentage = $analytics['total'] > 0 ? round(($reason->count / $analytics['total'] * 100), 1) : 0;
                                $icons = ['bx-error', 'bx-x-circle', 'bx-block', 'bx-shield-x', 'bx-minus-circle'];
                                $icon = $icons[$index % count($icons)];
                            @endphp
                            <div class="reason-item mb-3">
                                <div class="reason-card">
                                    <div class="d-flex align-items-center justify-content-between mb-2">
                                        <div class="d-flex align-items-center flex-grow-1">
                                            <div class="reason-icon me-3">
                                                <i class="bx {{ $icon }}"></i>
                                            </div>
                                            <div class="flex-grow-1">
                                                <div class="reason-name">{{ ucwords(str_replace('_', ' ', $reason->rejection_reason)) }}</div>
                                            </div>
                                        </div>
                                        <div class="reason-stats">
                                            <span class="count-badge">{{ $reason->count }}</span>
                                            <span class="percentage-text">{{ $percentage }}%</span>
                                        </div>
                                    </div>
                                    <div class="progress reason-progress">
                                        <div class="progress-bar progress-bar-animated" role="progressbar"
                                             style="width: {{ $percentage }}%"
                                             aria-valuenow="{{ $percentage }}" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <p class="text-muted text-center mb-0">No rejection data available</p>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-md-6 mb-3">
            <div class="card border-0 shadow-sm chart-card">
                <div class="card-header chart-header-type">
                    <h5 class="mb-0 text-white">
                        <i class="bx bx-bar-chart-alt-2 me-2"></i>Rejections by Type
                    </h5>
                </div>
                <div class="card-body p-4">
                    @if($analytics['by_type']->count() > 0)
                        @foreach($analytics['by_type'] as $type)
                            @php
                                $percentage = $analytics['total'] > 0 ? round(($type->count / $analytics['total'] * 100), 1) : 0;
                                $typeValue = $type->type ?? 'N/A';
                                $icon = match($typeValue) {
                                    'loan_application' => 'bx-credit-card',
                                    'refund' => 'bx-money',
                                    'share_enquiry' => 'bx-share-alt',
                                    'retirement' => 'bx-user-check',
                                    'withdraw_savings', 'withdraw_deposit' => 'bx-wallet',
                                    'join_membership' => 'bx-user-plus',
                                    'unjoin_membership' => 'bx-user-minus',
                                    default => 'bx-file'
                                };
                            @endphp
                            <div class="type-item mb-3">
                                <div class="type-card">
                                    <div class="d-flex align-items-center justify-content-between mb-2">
                                        <div class="d-flex align-items-center flex-grow-1">
                                            <div class="type-icon me-3">
                                                <i class="bx {{ $icon }}"></i>
                                            </div>
                                            <div class="flex-grow-1">
                                                <div class="type-name">{{ ucwords(str_replace('_', ' ', $typeValue)) }}</div>
                                            </div>
                                        </div>
                                        <div class="type-stats">
                                            <span class="count-badge">{{ $type->count }}</span>
                                            <span class="percentage-text">{{ $percentage }}%</span>
                                        </div>
                                    </div>
                                    <div class="progress type-progress">
                                        <div class="progress-bar progress-bar-animated" role="progressbar"
                                             style="width: {{ $percentage }}%"
                                             aria-valuenow="{{ $percentage }}" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <p class="text-muted text-center mb-0">No type data available</p>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Button -->
    <div class="mb-4">
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#filterModal">
            <i class="bx bx-filter-alt"></i> Filter Rejections
        </button>
    </div>

    <!-- Filter Modal -->
    <div class="modal fade" id="filterModal" tabindex="-1" aria-labelledby="filterModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="filterModalLabel">
                        <i class="bx bx-filter-alt"></i> Filter Rejections
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form method="GET" action="{{ route('rejections.index') }}" id="filterForm">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Search</label>
                                <input type="text" name="search" class="form-control" placeholder="Name, Check Number, Force No..."
                                       value="{{ $search ?? '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Enquiry Type</label>
                                <select name="enquiry_type" class="form-select">
                                    <option value="">All Types</option>
                                    <option value="loan_application" {{ ($enquiryType ?? '') == 'loan_application' ? 'selected' : '' }}>Loan Application</option>
                                    <option value="refund" {{ ($enquiryType ?? '') == 'refund' ? 'selected' : '' }}>Refund</option>
                                    <option value="share_enquiry" {{ ($enquiryType ?? '') == 'share_enquiry' ? 'selected' : '' }}>Share Enquiry</option>
                                    <option value="retirement" {{ ($enquiryType ?? '') == 'retirement' ? 'selected' : '' }}>Retirement</option>
                                    <option value="deduction_add" {{ ($enquiryType ?? '') == 'deduction_add' ? 'selected' : '' }}>Deduction Add</option>
                                    <option value="withdraw_savings" {{ ($enquiryType ?? '') == 'withdraw_savings' ? 'selected' : '' }}>Withdraw Savings</option>
                                    <option value="withdraw_deposit" {{ ($enquiryType ?? '') == 'withdraw_deposit' ? 'selected' : '' }}>Withdraw Deposit</option>
                                    <option value="unjoin_membership" {{ ($enquiryType ?? '') == 'unjoin_membership' ? 'selected' : '' }}>Unjoin Membership</option>
                                    <option value="condolences" {{ ($enquiryType ?? '') == 'condolences' ? 'selected' : '' }}>Condolences</option>
                                    <option value="injured_at_work" {{ ($enquiryType ?? '') == 'injured_at_work' ? 'selected' : '' }}>Injured at Work</option>
                                    <option value="sick_for_30_days" {{ ($enquiryType ?? '') == 'sick_for_30_days' ? 'selected' : '' }}>Sick for 30 Days</option>
                                    <option value="benefit_from_disasters" {{ ($enquiryType ?? '') == 'benefit_from_disasters' ? 'selected' : '' }}>Benefit from Disasters</option>
                                    <option value="join_membership" {{ ($enquiryType ?? '') == 'join_membership' ? 'selected' : '' }}>Join Membership</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Date From</label>
                                <input type="date" name="date_from" class="form-control" value="{{ $dateFrom ?? '' }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Date To</label>
                                <input type="date" name="date_to" class="form-control" value="{{ $dateTo ?? '' }}">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <a href="{{ route('rejections.index') }}" class="btn btn-outline-secondary">
                        <i class="bx bx-reset"></i> Reset
                    </a>
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        <i class="bx bx-x"></i> Close
                    </button>
                    <button type="submit" form="filterForm" class="btn btn-primary">
                        <i class="bx bx-search"></i> Apply Filter
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Rejections Table -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <h5 class="mb-0"><i class="bx bx-list-ul me-2"></i>Rejections List</h5>
            <div class="d-flex align-items-center gap-2">
                <label class="mb-0 me-2">Show:</label>
                <select class="form-select form-select-sm" style="width: auto;" onchange="window.location.href='{{ route('rejections.index') }}?per_page=' + this.value + '&search={{ $search ?? '' }}&enquiry_type={{ $enquiryType ?? '' }}&date_from={{ $dateFrom ?? '' }}&date_to={{ $dateTo ?? '' }}'">
                    <option value="15" {{ $perPage == 15 ? 'selected' : '' }}>15</option>
                    <option value="25" {{ $perPage == 25 ? 'selected' : '' }}>25</option>
                    <option value="50" {{ $perPage == 50 ? 'selected' : '' }}>50</option>
                    <option value="100" {{ $perPage == 100 ? 'selected' : '' }}>100</option>
                </select>
            </div>
        </div>
        <div class="card-body p-0">
            @if($rejections->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                                <th class="text-center" width="50">#</th>
                                <th>Applicant Info</th>
                                <th width="120">Type</th>
                                <th>Location</th>
                                <th width="150">Rejection Reason</th>
                                <th width="200">Details</th>
                                <th width="150">Rejected By</th>
                                <th width="100" class="text-center">Date</th>
                                <th width="100" class="text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($rejections as $index => $rejection)
                                <tr class="rejection-row">
                                    <td class="text-center fw-bold">{{ $rejections->firstItem() + $index }}</td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="user-avatar me-3">
                                                <i class="bx bx-user-circle"></i>
                                            </div>
                                            <div>
                                                <div class="fw-bold text-dark">{{ $rejection->enquiry->full_name ?? 'N/A' }}</div>
                                                <small class="text-muted">
                                                    <i class="bx bx-id-card"></i>
                                                    <span class="badge rounded-pill badge-check-number">
                                                        <i class="bx bx-hash"></i>
                                                        {{ $rejection->enquiry->check_number ?? 'N/A' }}
                                                    </span>
                                                </small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge badge-type">
                                            @php
                                                $type = $rejection->enquiry->type ?? 'N/A';
                                                $icon = match($type) {
                                                    'loan_application' => 'bx-credit-card',
                                                    'refund' => 'bx-money',
                                                    'share_enquiry' => 'bx-share-alt',
                                                    'retirement' => 'bx-user-check',
                                                    'withdraw_savings', 'withdraw_deposit' => 'bx-wallet',
                                                    default => 'bx-file'
                                                };
                                            @endphp
                                            <i class="bx {{ $icon }}"></i>
                                            {{ ucwords(str_replace('_', ' ', $type)) }}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="location-info">
                                            <div><i class="bx bx-map"></i> <strong>{{ $rejection->enquiry->region->name ?? 'N/A' }}</strong></div>
                                            <small class="text-muted"><i class="bx bx-map-pin"></i> {{ $rejection->enquiry->district->name ?? 'N/A' }}</small>
                                            <br>
                                            <small class="text-muted"><i class="bx bx-building"></i> {{ $rejection->enquiry->branch->name ?? 'N/A' }}</small>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge badge-rejection-reason">
                                            <i class="bx bx-error-circle"></i>
                                            {{ ucwords(str_replace('_', ' ', $rejection->rejection_reason)) }}
                                        </span>
                                    </td>
                                    <td>
                                        @if($rejection->rejection_detail)
                                            <div class="detail-text" title="{{ $rejection->rejection_detail }}">
                                                <i class="bx bx-info-circle text-warning"></i>
                                                {{ Str::limit($rejection->rejection_detail, 50) }}
                                            </div>
                                        @else
                                            <span class="text-muted fst-italic">No details provided</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($rejection->rejectedBy)
                                            <div class="rejected-by-info">
                                                <div class="d-flex align-items-center mb-1">
                                                    <i class="bx bx-user text-primary me-2"></i>
                                                    <strong class="text-dark">{{ $rejection->rejectedBy->name }}</strong>
                                                </div>
                                                @if($rejection->rejectedBy->roles->first())
                                                    <span class="badge badge-role">
                                                        <i class="bx bx-shield"></i>
                                                        {{ ucwords(str_replace('_', ' ', $rejection->rejectedBy->roles->first()->name)) }}
                                                    </span>
                                                @endif
                                            </div>
                                        @else
                                            <span class="text-muted fst-italic">N/A</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <div class="date-info">
                                            <div class="fw-bold text-primary">{{ $rejection->created_at->format('d M Y') }}</div>
                                            <small class="text-muted">
                                                <i class="bx bx-time-five"></i> {{ $rejection->created_at->format('H:i') }}
                                            </small>
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        <a href="{{ route('enquiries.show', $rejection->enquiry_id) }}"
                                           class="btn btn-sm btn-gradient-primary" title="View Enquiry">
                                            <i class="bx bx-show"></i> View
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                @if($rejections->hasPages())
                    <div class="pagination-wrapper p-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="text-muted">
                                Showing {{ $rejections->firstItem() }} to {{ $rejections->lastItem() }} of {{ $rejections->total() }} entries
                            </div>
                            <div>
                                {{ $rejections->links('pagination::bootstrap-5') }}
                            </div>
                        </div>
                    </div>
                @endif
            @else
                <div class="empty-state">
                    <i class="bx bx-x-circle"></i>
                    <h4>No Rejections Found</h4>
                    <p>No rejections match your current filters.</p>
                </div>
            @endif
        </div>
    </div>
</div>

@push('styles')
<style>
/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

/* Modern Breadcrumb */
.modern-breadcrumb-rejection {
    background: white;
    padding: 14px 20px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 0;
    border: 1px solid #e5e7eb;
}

.modern-breadcrumb-rejection .breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.modern-breadcrumb-rejection .breadcrumb-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    text-decoration: none;
    transition: color 0.2s;
}

.modern-breadcrumb-rejection .breadcrumb-link:hover {
    color: #dc2626;
}

/* Page Header */
.page-header-modern {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    padding: 36px;
    border-radius: 6px;
    color: white;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.15);
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.6s ease-out 0.2s backwards;
}

.page-header-modern::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.header-icon {
    width: 70px;
    height: 70px;
    background: rgba(255,255,255,0.25);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.page-header-modern:hover .header-icon {
    transform: rotate(10deg) scale(1.1);
    background: rgba(255,255,255,0.3);
}

.page-title {
    font-size: 28px;
    font-weight: 700;
    color: white;
}

.page-subtitle {
    color: rgba(255,255,255,0.9);
    font-size: 14px;
}

/* Analytics Cards */
.analytics-card {
    transition: all 0.3s ease;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    animation: fadeInUp 0.5s ease-out backwards;
}

.analytics-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.analytics-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    transition: transform 0.3s ease;
}

.analytics-card:hover .analytics-icon {
    transform: scale(1.1) rotate(-5deg);
}

/* Filter Card */
.filter-card {
    border: 2px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    animation: fadeInUp 0.5s ease-out 0.3s backwards;
}

.filter-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.filter-card .form-label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.filter-card .form-control,
.filter-card .form-select {
    border-radius: 10px;
    border: 2px solid #e5e7eb;
    padding: 10px 14px;
    transition: all 0.2s ease;
}

.filter-card .form-control:focus,
.filter-card .form-select:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* Table Styling */
.table {
    border-collapse: collapse;
    border-spacing: 0;
}

.table thead th {
    background: #4587D1 !important;
    color: white !important;
    font-weight: 600;
    border: 1px solid #dee2e6 !important;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.table tbody tr {
    transition: all 0.2s ease;
    background: white;
}

.table tbody tr:nth-child(even) {
    background: #f8f9fa;
}

.table tbody tr:hover {
    background: #e3f2fd !important;
    transform: scale(1.01);
}

.table tbody td {
    padding: 0.75rem 1rem !important;
    vertical-align: middle;
    border: 1px solid #dee2e6;
    font-size: 0.875rem;
    color: #495057;
}

.table .btn-sm {
    border-radius: 8px !important;
    font-weight: 600;
    transition: all 0.2s ease;
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: 0.5px;
}

.table .btn-sm:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Modern Badge Improvements */
.badge {
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.3px;
}

/* Check Number Badge - Light Blue */
.badge-check-number {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #2563eb !important;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.badge-check-number:hover {
    background-color: rgba(59, 130, 246, 0.25) !important;
    transform: scale(1.05);
}

.badge-check-number i {
    font-size: 13px;
    margin-right: 3px;
}

/* Type Badge - Blue Tint */
.badge-type {
    background-color: rgba(23, 71, 158, 0.15) !important;
    color: #17479E !important;
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.badge-type:hover {
    background-color: rgba(23, 71, 158, 0.25) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(23, 71, 158, 0.2);
}

.badge-type i {
    font-size: 15px;
}

/* Rejection Reason Badge - Orange/Red Tint */
.badge-rejection-reason {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #dc2626 !important;
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.badge-rejection-reason:hover {
    background-color: rgba(239, 68, 68, 0.25) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.2);
}

.badge-rejection-reason i {
    font-size: 15px;
}

/* Role Badge - Gray Tint */
.badge-role {
    background-color: rgba(107, 114, 128, 0.15) !important;
    color: #4b5563 !important;
    padding: 5px 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.badge-role:hover {
    background-color: rgba(107, 114, 128, 0.25) !important;
    transform: scale(1.05);
}

.badge-role i {
    font-size: 13px;
}

/* Chart Card Styles */
.chart-card {
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.3s ease;
    animation: fadeInUp 0.5s ease-out 0.4s backwards;
}

.chart-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12) !important;
}

/* Rejections by Reason Header - Gradient with site colors */
.chart-header-reason {
    background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%);
    padding: 18px 24px;
    border: none;
}

/* Rejections by Type Header - Different gradient */
.chart-header-type {
    background: linear-gradient(135deg, #87CEEB 0%, #CEEDF5 100%);
    padding: 18px 24px;
    border: none;
}

.chart-header-type h5 {
    color: #17479E !important;
}

/* Reason Item Styles */
.reason-item {
    transition: all 0.3s ease;
}

.reason-card {
    background: linear-gradient(135deg, #fff9f9 0%, #ffffff 100%);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.1);
    transition: all 0.3s ease;
}

.reason-card:hover {
    transform: translateX(8px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    background: linear-gradient(135deg, #fff5f5 0%, #ffffff 100%);
}

.reason-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #dc2626;
    transition: all 0.3s ease;
}

.reason-card:hover .reason-icon {
    transform: rotate(10deg) scale(1.1);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(220, 38, 38, 0.2) 100%);
}

.reason-name {
    font-weight: 700;
    color: #374151;
    font-size: 14px;
}

.reason-stats {
    display: flex;
    align-items: center;
    gap: 10px;
}

.count-badge {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.percentage-text {
    color: #dc2626;
    font-weight: 700;
    font-size: 12px;
    min-width: 45px;
    text-align: right;
}

.reason-progress {
    height: 10px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.1);
    overflow: hidden;
}

.reason-progress .progress-bar {
    background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
    transition: width 1s ease-in-out;
}

/* Type Item Styles */
.type-item {
    transition: all 0.3s ease;
}

.type-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(23, 71, 158, 0.1);
    transition: all 0.3s ease;
}

.type-card:hover {
    transform: translateX(8px);
    box-shadow: 0 6px 20px rgba(23, 71, 158, 0.15);
    border-color: rgba(23, 71, 158, 0.3);
    background: linear-gradient(135deg, #e0f2fe 0%, #ffffff 100%);
}

.type-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, rgba(23, 71, 158, 0.15) 0%, rgba(135, 206, 235, 0.1) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #17479E;
    transition: all 0.3s ease;
}

.type-card:hover .type-icon {
    transform: rotate(-10deg) scale(1.1);
    background: linear-gradient(135deg, rgba(23, 71, 158, 0.25) 0%, rgba(135, 206, 235, 0.2) 100%);
}

.type-name {
    font-weight: 700;
    color: #374151;
    font-size: 14px;
}

.type-stats {
    display: flex;
    align-items: center;
    gap: 10px;
}

.type-card .count-badge {
    background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%);
}

.type-card .percentage-text {
    color: #17479E;
}

.type-progress {
    height: 10px;
    border-radius: 10px;
    background: rgba(23, 71, 158, 0.1);
    overflow: hidden;
}

.type-progress .progress-bar {
    background: linear-gradient(90deg, #17479E 0%, #87CEEB 100%);
    box-shadow: 0 2px 8px rgba(23, 71, 158, 0.4);
    transition: width 1s ease-in-out;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 100px 40px;
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
    border-radius: 20px;
    border: 3px dashed #e5e7eb;
    animation: fadeInUp 0.5s ease-out;
}

.empty-state i {
    font-size: 100px;
    color: #d1d5db;
    margin-bottom: 24px;
    display: inline-block;
    animation: pulse 2s ease-in-out infinite;
}

.empty-state h4 {
    color: #374151;
    margin-bottom: 12px;
    font-size: 24px;
    font-weight: 700;
}

.empty-state p {
    color: #9ca3af;
    font-size: 16px;
}

/* Progress bars */
.progress {
    border-radius: 10px;
    background-color: rgba(0,0,0,0.05);
    height: 8px;
}

.progress-bar {
    border-radius: 10px;
    transition: width 0.6s ease;
}

/* Pagination Styling */
.pagination {
    gap: 8px;
}

.pagination .page-link {
    border-radius: 10px;
    border: 2px solid #e5e7eb;
    color: #dc2626;
    font-weight: 600;
    padding: 8px 16px;
    transition: all 0.2s ease;
}

.pagination .page-link:hover {
    background: #dc2626;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    border-color: #dc2626;
}

/* Enhanced Table Styling */
.rejection-row {
    transition: all 0.3s ease;
}

.rejection-row:hover {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.user-avatar i {
    font-size: 38px;
    color: #3b82f6;
}

.location-info {
    line-height: 1.6;
}

.location-info i {
    color: #6b7280;
}

.detail-text {
    cursor: help;
    padding: 8px;
    background: #fef3c7;
    border-radius: 6px;
    font-size: 0.85rem;
}

.rejected-by-info {
    padding: 5px;
}

.date-info {
    background: #f0f9ff;
    padding: 8px;
    border-radius: 8px;
}

/* Gradient Badges */
.bg-gradient-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
}

.bg-gradient-secondary {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
}

.bg-gradient-info {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
}

.bg-gradient-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
}

.btn-gradient-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: white;
    border: none;
}

.btn-gradient-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}

/* Responsive Improvements */
@media (max-width: 768px) {
    /* Analytics Cards - Already stack via col-md-6 */
    .analytics-card {
        margin-bottom: 1rem;
    }

    .analytics-icon {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    /* Chart Sections - Stack on mobile, full width */
    .chart-card {
        margin-bottom: 1.5rem;
    }

    .chart-header-reason,
    .chart-header-type {
        padding: 14px 18px;
    }

    .chart-header-reason h5,
    .chart-header-type h5 {
        font-size: 16px;
    }

    .chart-card .card-body {
        padding: 1rem !important;
    }

    /* Chart Items Mobile */
    .reason-card,
    .type-card {
        padding: 12px;
    }

    .reason-icon,
    .type-icon {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    .reason-name,
    .type-name {
        font-size: 12px;
    }

    .count-badge {
        padding: 4px 10px;
        font-size: 11px;
    }

    .percentage-text {
        font-size: 11px;
        min-width: 38px;
    }

    .reason-progress,
    .type-progress {
        height: 8px;
    }

    /* Table - Horizontal scroll on mobile */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table {
        min-width: 900px;
    }

    .table thead th,
    .table tbody td {
        padding: 0.5rem !important;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    /* Badges - Smaller on mobile */
    .badge-type,
    .badge-rejection-reason {
        padding: 6px 10px;
        font-size: 10px;
    }

    .badge-type i,
    .badge-rejection-reason i {
        font-size: 12px;
    }

    .badge-check-number {
        padding: 4px 8px;
        font-size: 10px;
    }

    .badge-check-number i {
        font-size: 11px;
    }

    .badge-role {
        padding: 4px 8px;
        font-size: 10px;
    }

    .badge-role i {
        font-size: 11px;
    }

    /* Headers - Smaller font on mobile */
    .page-title {
        font-size: 20px;
    }

    .page-subtitle {
        font-size: 12px;
    }

    .header-icon {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

    .page-header-modern {
        padding: 24px;
    }

    /* Table Elements */
    .user-avatar {
        display: none;
    }

    .location-info small {
        font-size: 0.7rem;
    }

    .detail-text {
        font-size: 0.75rem;
        padding: 6px;
    }

    .date-info {
        padding: 6px;
    }

    /* Filter Modal */
    .modal-dialog {
        margin: 0.5rem;
    }

    /* Pagination */
    .pagination .page-link {
        padding: 6px 12px;
        font-size: 12px;
    }

    .pagination-wrapper {
        flex-direction: column;
        gap: 12px;
    }

    .pagination-wrapper .text-muted {
        font-size: 12px;
        text-align: center;
    }
}

/* Tablet Responsive */
@media (min-width: 769px) and (max-width: 1024px) {
    .analytics-card h3 {
        font-size: 22px;
    }

    .chart-card .card-body {
        padding: 1.5rem !important;
    }

    .reason-icon,
    .type-icon {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    .table thead th,
    .table tbody td {
        padding: 0.6rem !important;
        font-size: 0.8rem;
    }
}
</style>
@endpush
@endsection