@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    @include('components.search')
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-xl-6 col-sm-6 mb-xl-0 mb-4">
                <div class="card cursor-pointer" onclick="window.location.href='{{ url('/boards') }}'">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Boards</p>
                                    <h5 class="text-lg font-weight-bolder">{{ $total_boards ?? 0 }}</h5>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-primary shadow-primary text-center rounded-circle">
                                    <i class="fas fa-columns text-lg opacity-10 text-white" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-sm-6 mb-xl-0 mb-4">
                <div class="card cursor-pointer" onclick="window.location.href='{{ url('/boards') }}'">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Cards</p>
                                    <h5 class="text-lg font-weight-bolder">{{ $total_cards ?? 0 }}</h5>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-success shadow-success text-center rounded-circle">
                                    <i class="fas fa-sticky-note text-lg opacity-10 text-white" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4 col-sm-6 mb-xl-0 mb-4">
                @if ($overdue_cards > 0 && isset($most_urgent_card))
                    <div class="card cursor-pointer"
                        onclick="window.location.href='{{ url('/boards/show/' . $most_urgent_card->board->id) }}'">
                    @else
                        <div class="card">
                @endif
            </div>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col-lg-7 mb-lg-0 mb-4">
            <div class="card z-index-2 h-100">
                <div class="card-header pb-0 pt-3 bg-transparent">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="text-capitalize mb-0">
                            <i class="fas fa-chart-bar text-primary me-2"></i>
                            Total Cards berdasarkan List
                        </h6>
                        <div class="dropdown">
                            <button class="btn btn-sm btn-outline-primary dropdown-toggle mb-0" type="button"
                                id="chartFilterDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fas fa-filter me-1"></i>
                                <span id="current-board-title">
                                    @if (isset($all_boards) && $all_boards->count() > 0)
                                        {{ $all_boards->first()->title }}
                                    @else
                                        Semua board
                                    @endif
                                </span>
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="chartFilterDropdown">
                                @if (isset($all_boards))
                                    @foreach ($all_boards as $board)
                                        <li><a class="dropdown-item" href="javascript:void(0)"
                                                onclick="filterChart('{{ $board->id }}', '{{ $board->title }}')">
                                                <i class="fas fa-columns me-2"></i>{{ $board->title }}
                                            </a></li>
                                    @endforeach
                                @endif
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="card-body p-3">
                    <div class="chart">
                        <div id="chart-bars" style="width: 100%; height: 420px;"></div>
                    </div>
                    <!-- Chart Statistics -->
                    <div class="row mt-3 mb-2">
                        <div class="col-12">
                            <div id="chart-stats" class="d-flex justify-content-center align-items-center flex-wrap gap-3"
                                style="display: none;">
                                <div class="stat-item">
                                    <span class="stat-label">Total Lists:</span>
                                    <span class="stat-value" id="total-lists">0</span>
                                </div>
                                <div class="stat-divider">|</div>
                                <div class="stat-item">
                                    <span class="stat-label">Total Cards:</span>
                                    <span class="stat-value" id="total-cards-chart">0</span>
                                </div>
                                <div class="stat-divider">|</div>
                                <div class="stat-item">
                                    <span class="stat-label">Lists Aktif:</span>
                                    <span class="stat-value" id="active-lists">0</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="col-lg-5">
            <div class="card h-100" style="display: flex; flex-direction: column;">
                <div class="card-header pb-0 p-3 mt-1" style="flex-shrink: 0;">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="mx-2 mb-0">
                            <i class="fas fa-history text-primary me-2"></i>
                            Aktivitas Terbaru
                        </h6>
                    </div>
                </div>
                <div class="card-body p-3"
                    style="flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column;">
                    <div class="list-group list-group-flush">
                        @if (isset($recent_activities) && $recent_activities->count() > 0)
                            @foreach ($recent_activities as $activity)
                                <div class="list-group-item border-0 px-2 py-2 activity-item-enhanced"
                                    style="margin: 0 4px; border-radius: 8px;">
                                    <div class="d-flex align-items-start">
                                        <div class="me-2 flex-shrink-0">
                                            @switch($activity->action)
                                                @case('card_created')
                                                    <div class="icon-wrapper-enhanced"
                                                        style="background: linear-gradient(135deg, #28a745 0%, #218838 100%);">
                                                        <i class="fas fa-plus text-white"></i>
                                                    </div>
                                                @break

                                                @case('comment_added')
                                                    <div class="icon-wrapper-enhanced"
                                                        style="background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%);">
                                                        <i class="fas fa-comment text-white"></i>
                                                    </div>
                                                @break

                                                @case('card_moved')
                                                    <div class="icon-wrapper-enhanced"
                                                        style="background: linear-gradient(135deg, #fd7e14 0%, #e8590c 100%);">
                                                        <i class="fas fa-arrows-alt text-white"></i>
                                                    </div>
                                                @break

                                                @case('card_updated')
                                                    <div class="icon-wrapper-enhanced"
                                                        style="background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);">
                                                        <i class="fas fa-edit text-white"></i>
                                                    </div>
                                                @break

                                                @case('list_created')
                                                    <div class="icon-wrapper-enhanced"
                                                        style="background: linear-gradient(135deg, #20c997 0%, #1baa80 100%);">
                                                        <i class="fas fa-list text-white"></i>
                                                    </div>
                                                @break

                                                @case('list_updated')
                                                    <div class="icon-wrapper-enhanced"
                                                        style="background: linear-gradient(135deg, #20c997 0%, #1baa80 100%);">
                                                        <i class="fas fa-list-ul text-white"></i>
                                                    </div>
                                                @break

                                                @case('list_deleted')
                                                    <div class="icon-wrapper-enhanced"
                                                        style="background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);">
                                                        <i class="fas fa-trash text-white"></i>
                                                    </div>
                                                @break

                                                @case('board_created')
                                                    <div class="icon-wrapper-enhanced"
                                                        style="background: linear-gradient(135deg, #007bff 0%, #0069d9 100%);">
                                                        <i class="fas fa-columns text-white"></i>
                                                    </div>
                                                @break

                                                @case('board_updated')
                                                    <div class="icon-wrapper-enhanced"
                                                        style="background: linear-gradient(135deg, #007bff 0%, #0069d9 100%);">
                                                        <i class="fas fa-tasks text-white"></i>
                                                    </div>
                                                @break

                                                @case('board_archived')
                                                    <div class="icon-wrapper-enhanced"
                                                        style="background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);">
                                                        <i class="fas fa-archive text-white"></i>
                                                    </div>
                                                @break

                                                @case('attachment_added')
                                                    <div class="icon-wrapper-enhanced"
                                                        style="background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);">
                                                        <i class="fas fa-paperclip text-white"></i>
                                                    </div>
                                                @break

                                                @default
                                                    <div class="icon-wrapper-enhanced"
                                                        style="background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);">
                                                        <i class="fas fa-bell text-white"></i>
                                                    </div>
                                            @endswitch
                                        </div>
                                        <div class="flex-grow-1 min-width-0">
                                            <div class="d-flex justify-content-between align-items-center mb-1">
                                                <h6 class="mb-0 text-truncate"
                                                    style="font-size: 0.8rem; font-weight: 700; color: #2d3748;">
                                                    {{ \App\Helpers\NotificationHelper::getDisplayName($activity->actor) }}
                                                </h6>
                                                <span class="badge flex-shrink-0 ms-2"
                                                    style="background: #e9ecef; color: #6c757d; font-size: 0.65rem; padding: 3px 6px; font-weight: 600; border-radius: 6px;">
                                                    {{ $activity->created_at->diffForHumans() }}
                                                </span>
                                            </div>
                                            <p class="mb-0 text-truncate"
                                                style="font-size: 0.78rem; color: #718096; line-height: 1.4;">
                                                {!! \App\Helpers\NotificationHelper::formatDescription(
                                                    $activity->description ?? ucfirst(str_replace('_', ' ', $activity->action)),
                                                    $activity->actor,
                                                ) !!}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <div class="list-group-item border-0 px-0 py-4 text-center" style="margin: 0 8px;">
                                <div class="d-flex flex-column align-items-center">
                                    <div class="mb-3"
                                        style="width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, #17a2b8 0%, #138496 100%); display: flex; align-items: center; justify-content: center;">
                                        <i class="fas fa-clipboard-list text-white" style="font-size: 1.5rem;"></i>
                                    </div>
                                    <div>
                                        <h6 class="mb-1" style="font-size: 0.9rem; font-weight: 700; color: #2d3748;">
                                            Tidak ada aktivitas</h6>
                                        <p class="mb-0" style="font-size: 0.8rem; color: #718096;">Mulai gunakan board
                                            untuk melihat aktivitas di sini</p>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col-12">
            <div class="card" style="border-radius: 1rem; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-0 p-3 mt-1 mb-3"
                    style="background: white; border-bottom: 2px solid rgba(23, 162, 184, 0.1);">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="mx-2 mb-0"
                            style="font-weight: 700; font-size: 1.1rem; letter-spacing: 0.3px; color: #2d3748;">
                            <i class="fas fa-user-circle me-2" style="color: #17a2b8; font-size: 1.2rem;"></i>
                            Kartu Saya
                        </h6>
                    </div>
                </div>
                <div class="table-responsive" style="padding: 0 1rem;">
                    <table class="table align-items-center mb-2 modern-table">
                        <thead>
                            <tr
                                style="background: linear-gradient(135deg, rgba(23, 162, 184, 0.08) 0%, rgba(19, 132, 150, 0.08) 100%); border-radius: 8px;">
                                <th class="text-uppercase text-xxs font-weight-bolder ps-3"
                                    style="color: #17a2b8; letter-spacing: 0.5px; padding: 1rem 0.75rem;">
                                    <i class="fas fa-file-alt me-1"></i> NAMA
                                </th>
                                <th class="text-uppercase text-xxs font-weight-bolder ps-2"
                                    style="color: #17a2b8; letter-spacing: 0.5px; padding: 1rem 0.75rem;">
                                    <i class="fas fa-columns me-1"></i> BOARD
                                </th>
                                <th class="text-center text-uppercase text-xxs font-weight-bolder"
                                    style="color: #17a2b8; letter-spacing: 0.5px; padding: 1rem 0.75rem;">
                                    <i class="fas fa-list me-1"></i> LIST
                                </th>
                                <th class="text-center text-uppercase text-xxs font-weight-bolder"
                                    style="color: #17a2b8; letter-spacing: 0.5px; padding: 1rem 0.75rem;">
                                    <i class="fas fa-calendar-alt me-1"></i> DEADLINE
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @if (isset($user_cards) && $user_cards->count() > 0)
                                @foreach ($user_cards as $card)
                                    <tr data-board-id="{{ $card->board ? $card->board->id : '' }}"
                                        class="clickable-row-enhanced cursor-pointer"
                                        onclick="openCardModal({{ $card->id }}, {{ $card->board ? $card->board->id : 'null' }})"
                                        style="border-bottom: 1px solid rgba(23, 162, 184, 0.08); transition: all 0.3s ease;">
                                        <td style="padding: 1rem 0.75rem;">
                                            <div class="d-flex px-2 py-1 align-items-center">
                                                <div class="me-2"
                                                    style="width: 4px; height: 32px; background: linear-gradient(135deg, #17a2b8 0%, #138496 100%); border-radius: 4px;">
                                                </div>
                                                <div class="d-flex flex-column justify-content-center">
                                                    <h6 class="mb-0"
                                                        style="font-size: 0.875rem; font-weight: 600; color: #2d3748; line-height: 1.5;">
                                                        {{ $card->title }}</h6>
                                                </div>
                                            </div>
                                        </td>
                                        <td style="padding: 1rem 0.75rem;">
                                            <p class="text-xs font-weight-bold mb-0" style="color: #718096;">
                                                {{ $card->board ? $card->board->title : 'No Board' }}</p>
                                        </td>
                                        <td class="align-middle text-center" style="padding: 1rem 0.75rem;">
                                            @if ($card->list)
                                                <span class="badge-teal-pill">
                                                    {{ strtoupper($card->list->title) }}
                                                </span>
                                            @else
                                                <span class="badge-teal-pill">
                                                    TIDAK ADA LIST
                                                </span>
                                            @endif
                                        </td>
                                        <td class="align-middle text-center" style="padding: 1rem 0.75rem;">
                                            @if ($card->due_date)
                                                @php
                                                    $dueDate = \Carbon\Carbon::parse($card->due_date);
                                                    $isOverdue = $dueDate->isPast();
                                                @endphp
                                                <div
                                                    style="display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 8px; background: {{ $isOverdue ? 'linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%)' : 'linear-gradient(135deg, rgba(23, 162, 184, 0.1) 0%, rgba(19, 132, 150, 0.1) 100%)' }};">
                                                    <i class="fas fa-calendar-day me-2"
                                                        style="font-size: 0.7rem; color: {{ $isOverdue ? '#fff' : '#17a2b8' }};"></i>
                                                    <span
                                                        style="font-size: 0.75rem; font-weight: 600; color: {{ $isOverdue ? '#fff' : '#2d3748' }};">
                                                        {{ $dueDate->format('d M Y') }}
                                                    </span>
                                                    @if ($isOverdue)
                                                        <i class="fas fa-exclamation-triangle ms-2"
                                                            style="font-size: 0.7rem; color: #fff;"></i>
                                                    @endif
                                                </div>
                                            @else
                                                <span class="text-muted text-xs" style="color: #adb5bd;">Tidak ada
                                                    deadline</span>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="4" class="text-center py-5">
                                        <div class="text-muted">
                                            <div class="icon-wrapper bg-gradient-light mb-3 mx-auto"
                                                style="width: 60px; height: 60px; font-size: 24px;">
                                                <i class="fas fa-clipboard-list"></i>
                                            </div>
                                            <h6 class="mt-3 mb-2 text-muted">Tidak ada kartu ditemukan</h6>
                                            <small>Mulai buat kartu untuk melihatnya di sini</small>
                                        </div>
                                    </td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection

{{-- Include card modal for viewing cards --}}
@include('pages.boards.modals.view-card')

@push('css')
    <style>
        /* Style for bold text in activity descriptions */
        .activity-item-enhanced strong {
            color: #2c3e50;
            font-weight: 700;
        }
    </style>
@endpush

@push('js')
    <!-- ECharts Library -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script>
        var myChart;
        var currentBoardId = null; // Track current board ID

        // Chart data from backend
        const chartData = @json($chart_data ?? []);
        const allBoards = @json($all_boards ?? []);

        // Function to get current board ID
        function getCurrentBoardId() {
            return currentBoardId;
        }

        function createChart(boardId = null) {
            let labels, chartValues;

            if (!boardId && allBoards.length > 0) {
                boardId = allBoards[0].id;
            }

            // Set current board ID
            currentBoardId = boardId;

            console.log('Creating chart for board ID:', boardId);
            console.log('Available chart data:', chartData);
            console.log('All boards:', allBoards);

            // Check if we have any data at all
            if (Object.keys(chartData).length === 0) {
                console.warn('No chart data available');
                const chartDom = document.getElementById('chart-bars');
                if (chartDom) {
                    chartDom.innerHTML =
                        '<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #7b809a;">' +
                        '<i class="fas fa-chart-bar fa-3x mb-3" style="opacity: 0.3;"></i>' +
                        '<p style="font-size: 16px; margin: 0;">Tidak ada data board tersedia</p>' +
                        '<small style="color: #adb5bd; margin-top: 8px;">Buat board untuk melihat chart</small>' +
                        '</div>';
                }
                return;
            }

            if (chartData[boardId]) {
                const boardData = chartData[boardId].data;
                labels = Object.keys(boardData);
                chartValues = Object.values(boardData);
                console.log('Chart labels:', labels);
                console.log('Chart values:', chartValues);

                // Check if board has any lists
                if (labels.length === 0 || chartValues.every(v => v === 0)) {
                    console.warn('Board has no lists or cards');
                    const chartDom = document.getElementById('chart-bars');
                    if (chartDom) {
                        chartDom.innerHTML =
                            '<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #7b809a;">' +
                            '<i class="fas fa-list fa-3x mb-3" style="opacity: 0.3;"></i>' +
                            '<p style="font-size: 16px; margin: 0;">Tidak ada list</p>' +
                            '<small style="color: #adb5bd; margin-top: 8px;">Tambahkan list dan kartu untuk melihat chart</small>' +
                            '</div>';
                    }
                    return;
                }
            } else {
                labels = ["No Data"];
                chartValues = [0];
                console.warn('No chart data found for board ID:', boardId);
            }

            // Dispose previous chart if exists
            if (myChart) {
                myChart.dispose();
            }

            // Initialize ECharts
            var chartDom = document.getElementById('chart-bars');

            if (!chartDom) {
                console.error('Chart container not found!');
                return;
            }

            myChart = echarts.init(chartDom);
            console.log('ECharts instance created:', myChart);

            // Generate colors for each list
            const colors = [
                "#ff6b6b", "#4ecdc4", "#ffd93d", "#6BCF7F", "#a29bfe",
                "#fd79a8", "#fdcb6e", "#74b9ff", "#e17055", "#00b894"
            ];

            // Get board title for display
            const boardTitle = chartData[boardId] ? chartData[boardId].title : 'Board';

            // Create series for each list (one series per list)
            // Each series will have data only for its corresponding list
            const seriesList = labels.map((label, index) => {
                // Create data array where only the current list has a value, others are 0
                const seriesData = labels.map((l, i) => i === index ? chartValues[index] : 0);

                return {
                    type: 'bar',
                    barMaxWidth: 50,
                    name: label,
                    data: seriesData,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: colors[index % colors.length]
                            },
                            {
                                offset: 1,
                                color: colors[index % colors.length] + 'DD'
                            }
                        ]),
                        borderRadius: [8, 8, 0, 0],
                        shadowBlur: 8,
                        shadowOffsetY: 3,
                        shadowColor: 'rgba(0, 0, 0, 0.15)'
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 15,
                            shadowOffsetX: 0,
                            shadowOffsetY: 5,
                            shadowColor: 'rgba(0, 0, 0, 0.25)',
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false // Disable label on hover to avoid clutter
                        }
                    },
                    stack: 'total', // Stack bars on same position
                    animationDuration: 1000,
                    animationEasing: 'elasticOut',
                    animationDelay: function(idx) {
                        return idx * 80;
                    }
                };
            });

            // ECharts option with dataset approach
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        shadowStyle: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    },
                    formatter: function(params) {
                        if (params.length === 0) return '';

                        let tooltipContent = '<div style="padding: 10px;">';
                        tooltipContent +=
                            '<strong style="font-size: 14px; color: #344767; display: block; margin-bottom: 10px;">📊 Card Distribution</strong>';

                        // Filter and show only series with values
                        const validParams = params.filter(param => param.value > 0);

                        validParams.forEach(param => {
                            tooltipContent +=
                                '<div style="margin: 6px 0; display: flex; align-items: center; justify-content: space-between;">';
                            tooltipContent += '<span style="display: flex; align-items: center;">';
                            tooltipContent +=
                                '<span style="display:inline-block; width: 12px; height: 12px; border-radius: 50%; background:' +
                                param.color + '; margin-right: 8px;"></span>';
                            tooltipContent += '<span style="color: #7b809a; font-size: 13px;">' + param
                                .seriesName + '</span>';
                            tooltipContent += '</span>';
                            tooltipContent +=
                                '<strong style="color: #344767; margin-left: 15px; font-size: 14px;">' +
                                param.value + ' cards</strong>';
                            tooltipContent += '</div>';
                        });

                        if (validParams.length === 0) {
                            tooltipContent +=
                                '<div style="color: #999; font-style: italic; text-align: center; padding: 10px 0;">No cards in this list</div>';
                        }

                        tooltipContent +=
                            '<div style="margin-top: 10px; padding-top: 8px; border-top: 1px solid #e9ecef; color: #999; font-size: 11px; text-align: center;">👆 Double-click chart to open board</div>';
                        tooltipContent += '</div>';

                        return tooltipContent;
                    },
                    backgroundColor: 'rgba(255, 255, 255, 0.98)',
                    borderColor: '#e9ecef',
                    borderWidth: 2,
                    padding: 15,
                    textStyle: {
                        color: '#344767',
                        fontSize: 13
                    },
                    extraCssText: 'box-shadow: 0 6px 30px rgba(0,0,0,0.2); border-radius: 10px;'
                },
                legend: {
                    data: labels,
                    bottom: 10,
                    left: 'center',
                    orient: 'horizontal',
                    itemGap: 4, // Very minimal gap between buttons (mepet)
                    padding: [12, 30, 12, 30],
                    width: '85%', // Larger width to show 5 buttons
                    backgroundColor: 'rgba(255, 255, 255, 0.98)',
                    borderRadius: 30,
                    borderColor: 'rgba(23, 162, 184, 0.2)',
                    borderWidth: 2,
                    shadowBlur: 20,
                    shadowColor: 'rgba(0, 0, 0, 0.12)',
                    shadowOffsetY: 5,
                    icon: 'none', // No icon, using rich text background instead
                    selectedMode: 'multiple',
                    type: labels.length > 5 ? 'scroll' : 'plain', // Enable scroll when more than 5 items
                    pageButtonPosition: 'end', // Position page buttons at the end
                    pageButtonItemGap: 8,
                    pageButtonGap: 15,
                    pageFormatter: '{current}/{total}',
                    pageIcons: {
                        horizontal: ['path://M12,0 L0,6 L12,12', 'path://M0,0 L12,6 L0,12']
                    },
                    pageIconColor: '#17a2b8',
                    pageIconInactiveColor: '#d0d0d0',
                    pageIconSize: 18,
                    pageTextStyle: {
                        color: '#17a2b8',
                        fontSize: 13,
                        fontWeight: 'bold'
                    },
                    animation: true,
                    animationDurationUpdate: 800,
                    selector: [{
                            type: 'all',
                            title: '✓ All'
                        },
                        {
                            type: 'inverse',
                            title: '⇄ Toggle'
                        }
                    ],
                    selectorLabel: {
                        fontSize: 11,
                        color: '#17a2b8',
                        fontWeight: 'bold',
                        borderRadius: 18,
                        padding: [5, 12],
                        backgroundColor: 'rgba(23, 162, 184, 0.12)',
                        borderColor: 'rgba(23, 162, 184, 0.3)',
                        borderWidth: 1
                    },
                    selectorButtonGap: 8,
                    selectorPosition: 'end',
                    formatter: function(name) {
                        // Get the index to determine color
                        const index = labels.indexOf(name);
                        const displayName = name.length > 12 ? name.substring(0, 12) + '...' : name;
                        // Return name with rich text style that includes background
                        return '{btn' + index + '|' + displayName + '}';
                    },
                    textStyle: {
                        // Create rich text styles for each legend item with their respective colors
                        rich: (function() {
                            const richStyles = {};
                            labels.forEach((label, index) => {
                                richStyles['btn' + index] = {
                                    fontSize: 12,
                                    color: '#fff',
                                    fontWeight: '600',
                                    fontFamily: 'Open Sans',
                                    backgroundColor: colors[index % colors.length],
                                    borderRadius: 16,
                                    padding: [5, 14, 5, 14], // Very compact padding
                                    align: 'center',
                                    height: 26
                                };
                            });
                            return richStyles;
                        })()
                    },
                    inactiveColor: '#bdc3c7',
                    inactiveBorderColor: '#ecf0f1',
                    tooltip: {
                        show: true,
                        formatter: function(params) {
                            // Show full name in tooltip
                            return '<div style="text-align: center;"><strong style="font-size: 13px;">' + params
                                .name +
                                '</strong><br/><span style="font-size: 11px; color: #17a2b8;">Click to toggle</span></div>';
                        },
                        backgroundColor: 'rgba(52, 71, 103, 0.98)',
                        textStyle: {
                            color: '#fff',
                            fontSize: 12
                        },
                        padding: [10, 15],
                        borderRadius: 8,
                        extraCssText: 'box-shadow: 0 4px 15px rgba(0,0,0,0.3);'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    top: '5%',
                    bottom: labels.length > 5 ? '145px' : '125px', // More space for pagination
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: labels,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        color: '#7b809a',
                        fontSize: 12,
                        fontFamily: 'Open Sans',
                        fontWeight: '500',
                        margin: 15,
                        interval: 0,
                        rotate: labels.length > 5 ? 30 : 0
                    },
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    minInterval: 1,
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#e9ecef',
                            width: 1
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#7b809a',
                        fontSize: 12,
                        fontFamily: 'Open Sans',
                        formatter: '{value}'
                    }
                },
                series: seriesList
            };

            // Set colors for each series in legend
            option.color = colors.slice(0, labels.length);

            console.log('Setting chart option:', option);
            console.log('Series list:', seriesList);
            console.log('Legend type:', labels.length > 4 ? 'scroll' : 'plain');
            console.log('Total lists:', labels.length);
            console.log('Legend config:', option.legend);

            // Set option and click event
            try {
                myChart.setOption(option, true); // true = notMerge for clean render
                console.log('Chart rendered successfully!');

                // Log pagination info if applicable
                if (labels.length > 4) {
                    console.log('✨ Legend pagination enabled - Use arrows to navigate');
                    console.log('📊 Items per page calculated automatically by ECharts');
                }
            } catch (error) {
                console.error('Error setting chart option:', error);
                return;
            }

            // Handle double-click event to navigate to board
            myChart.on('dblclick', function(params) {
                if (params.componentType === 'series') {
                    const boardId = getCurrentBoardId();
                    if (boardId) {
                        console.log('Double-click detected - Navigating to board:', boardId);
                        window.location.href = `{{ url('boards/show') }}/${boardId}`;
                    }
                }
            });

            // Update statistics
            updateChartStats(labels, chartValues, labels);

            // Handle legend select changed with animation
            myChart.on('legendselectchanged', function(params) {
                // Add visual feedback
                const legendName = params.name;
                const isSelected = params.selected[legendName];

                // Optional: Show toast notification
                const action = isSelected ? 'shown' : 'hidden';
                console.log(`List "${legendName}" is now ${action}`);

                // Count active lists and calculate visible cards
                const activeLists = Object.values(params.selected).filter(v => v).length;
                let visibleCards = 0;

                labels.forEach((label, index) => {
                    if (params.selected[label]) {
                        visibleCards += chartValues[index];
                    }
                });

                // Update statistics
                document.getElementById('active-lists').textContent = activeLists;
                document.getElementById('total-cards-chart').textContent = visibleCards;

                // Add pulse animation to stats
                const statsContainer = document.getElementById('chart-stats');
                if (statsContainer) {
                    statsContainer.style.animation = 'none';
                    setTimeout(() => {
                        statsContainer.style.animation = 'pulse 0.5s ease-in-out';
                    }, 10);
                }

                // Update chart with smooth animation
                myChart.setOption({
                    series: seriesList.map((series, index) => ({
                        ...series,
                        animationDuration: 500,
                        animationEasing: 'cubicInOut'
                    }))
                });
            });

            // Add hover effect on bars (removed the problematic legendToggleSelect)
            myChart.on('mouseover', function(params) {
                if (params.componentType === 'series') {
                    // Just highlight the bar, don't toggle legend
                    myChart.dispatchAction({
                        type: 'highlight',
                        seriesIndex: params.seriesIndex,
                        dataIndex: params.dataIndex
                    });
                }
            });

            myChart.on('mouseout', function(params) {
                if (params.componentType === 'series') {
                    myChart.dispatchAction({
                        type: 'downplay',
                        seriesIndex: params.seriesIndex,
                        dataIndex: params.dataIndex
                    });
                }
            });

            // Handle legend scroll (pagination)
            if (labels.length > 5) {
                myChart.on('legendscroll', function(params) {
                    console.log('🔄 Legend scrolled - Current scroll index:', params.scrollDataIndex);
                });
            }

            // Make chart responsive
            const resizeObserver = new ResizeObserver(() => {
                if (myChart) {
                    myChart.resize();
                }
            });

            resizeObserver.observe(chartDom);

            window.addEventListener('resize', function() {
                if (myChart) {
                    myChart.resize();
                }
            });
        }

        // Function to update chart statistics
        function updateChartStats(labels, values, activeLegends) {
            const statsContainer = document.getElementById('chart-stats');
            const totalListsEl = document.getElementById('total-lists');
            const totalCardsEl = document.getElementById('total-cards-chart');
            const activeListsEl = document.getElementById('active-lists');

            if (statsContainer && totalListsEl && totalCardsEl && activeListsEl) {
                statsContainer.style.display = 'flex';

                const totalLists = labels.length;
                const totalCards = values.reduce((a, b) => a + b, 0);
                const activeLists = activeLegends ? activeLegends.length : totalLists;

                totalListsEl.textContent = totalLists;
                totalCardsEl.textContent = totalCards;
                activeListsEl.textContent = activeLists;

                console.log('Stats updated - Lists:', totalLists, 'Cards:', totalCards, 'Active:', activeLists);
            } else {
                console.warn('Chart stats elements not found');
            }
        }

        // Filter chart function
        function filterChart(boardId, boardTitle) {
            // If boardTitle not provided, find it from allBoards
            if (!boardTitle) {
                const board = allBoards.find(b => b.id == boardId);
                boardTitle = board ? board.title : 'Unknown Board';
            }

            // Update dropdown text with icon
            const currentBoardTitle = document.getElementById('current-board-title');
            if (currentBoardTitle) {
                currentBoardTitle.textContent = boardTitle;
            }

            // Add loading animation
            const chartDom = document.getElementById('chart-bars');
            if (chartDom) {
                chartDom.style.opacity = '0.5';
                chartDom.style.transition = 'opacity 0.3s ease';
            }

            // Create chart with slight delay for smooth transition
            setTimeout(() => {
                createChart(boardId);
                if (chartDom) {
                    chartDom.style.opacity = '1';
                }
            }, 150);
        }

        // Filter cards function
        function filterCards(boardId) {
            const board = allBoards.find(b => b.id == boardId);
            const boardTitle = board ? board.title : 'All Boards';

            document.getElementById('cardsFilterDropdown').textContent = boardTitle;

            // Show/hide table rows based on board filter
            const tableRows = document.querySelectorAll('tbody tr[data-board-id]');

            tableRows.forEach(row => {
                const rowBoardId = row.getAttribute('data-board-id');

                if (boardId === 'all' || rowBoardId === boardId.toString()) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });

            console.log('Filtering cards by board:', boardId);
        }

        // Function to open card modal - Navigate to board first, then open modal
        function openCardModal(cardId, boardId) {
            console.log('openCardModal called with:', {
                cardId,
                boardId
            });
            // Navigate to specific board page with auto_open_card parameter
            if (boardId && boardId !== null && boardId !== 'null') {
                const url = `{{ url('boards/show') }}/${boardId}?auto_open_card=${cardId}`;
                console.log('Redirecting to:', url);
                window.location.href = url;
            } else {
                console.log('No boardId, redirecting to boards list');
                window.location.href = `{{ url('boards') }}?auto_open_card=${cardId}`;
            }
        }

        // Function to open card modal from dashboard using API
        function openCardModalFromDashboard(cardId) {
            // Check if modal exists
            const modalElement = document.getElementById('viewCardModal');
            if (!modalElement) {
                console.error('Card modal not found');
                navigateToBoard(cardId);
                return;
            }

            const modal = new bootstrap.Modal(modalElement);

            // Store current card ID globally
            window.currentCardId = cardId;

            // Show the modal first
            modalElement.setAttribute('data-card-id', cardId);
            modalElement.setAttribute('data-load-success', 'false');
            modal.show();

            // Show loading state
            const loadingEl = document.getElementById('cardModalLoading');
            const contentEl = document.getElementById('cardModalContent');

            if (loadingEl) loadingEl.classList.remove('d-none');
            if (contentEl) contentEl.classList.add('loading');

            // Reset form fields safely
            const userEl = document.getElementById('cardUser');
            const titleEl = document.getElementById('cardTitle');
            const createdEl = document.getElementById('cardCreatedAt');
            const dueEl = document.getElementById('cardDueDate');

            if (userEl) userEl.textContent = '';
            if (titleEl) titleEl.value = '';
            if (createdEl) createdEl.value = '';
            if (dueEl) dueEl.value = '';

            // Fetch card data from our new API endpoint
            fetch(`{{ url('/api/cards') }}/${cardId}`, {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Content-Type': 'application/json',
                    }
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.success) {
                        const card = data.card;

                        // Store card data globally
                        window.currentCardData = card;
                        window.currentCardCanEdit = card.can_edit;
                        window.currentUserId = data.current_user_id;

                        // Update modal with card data
                        populateCardModal(card);

                        // Hide loading state
                        if (loadingEl) loadingEl.classList.add('d-none');
                        if (contentEl) contentEl.classList.remove('loading');
                        modalElement.setAttribute('data-load-success', 'true');

                    } else {
                        throw new Error(data.message || 'Failed to load card data');
                    }
                })
                .catch(error => {
                    console.error('Error loading card:', error);
                    // Hide loading and close modal
                    if (loadingEl) loadingEl.classList.add('d-none');
                    modal.hide();

                    // Show error message or fallback to navigation
                    alert('Unable to load card details. Redirecting to board...');
                    navigateToBoard(cardId);
                });
        }

        // Function to populate modal with card data
        function populateCardModal(card) {
            // Update basic card info
            document.getElementById('cardUser').textContent = card.list.board.title;
            document.getElementById('cardTitle').value = card.title;
            document.getElementById('cardCreatedAt').value = card.created_at ? new Date(card.created_at).toISOString()
                .split('T')[0] : '';
            document.getElementById('cardDueDate').value = card.due_date || '';

            // Update priority
            const priorityElement = document.getElementById('cardPriority');
            if (priorityElement) {
                priorityElement.textContent = card.priority_text;
                priorityElement.style.background = card.priority_color;
            }

            // Update modal title
            document.getElementById('viewCardModalLabel').textContent = `${card.title} - ${card.list.title}`;

            // Set description if function exists
            if (typeof window.showViewCardDescription === 'function') {
                window.showViewCardDescription(card.description || '', card.can_edit);
            } else {
                // Simple fallback for description
                const descElement = document.getElementById('cardDescription');
                if (descElement) {
                    descElement.value = card.description || '';
                }
            }

            // Safely handle member rendering
            try {
                if (typeof window.viewCardSelectedMembers !== 'undefined') {
                    window.viewCardSelectedMembers.length = 0;
                    if (card.users && Array.isArray(card.users)) {
                        card.users.forEach(user => {
                            window.viewCardSelectedMembers.push({
                                id: user.id,
                                name: user.name,
                                username: user.username,
                                email: user.email,
                                image: user.image
                            });
                        });
                    }

                    if (typeof window.renderViewCardSelectedMembers === 'function') {
                        window.renderViewCardSelectedMembers();
                    }
                    if (typeof window.updateViewCardMemberHiddenInput === 'function') {
                        window.updateViewCardMemberHiddenInput();
                    }
                }
            } catch (e) {
                console.log('Member rendering functions not available:', e);
            }

            // Safely handle attachments
            try {
                if (typeof window.viewCardAttachments !== 'undefined') {
                    window.viewCardAttachments = Array.isArray(card.attachments) ? card.attachments : [];
                }
                if (typeof window.renderViewCardAttachments === 'function') {
                    window.renderViewCardAttachments();
                }
            } catch (e) {
                console.log('Attachment rendering functions not available:', e);
            }
        }

        // Helper function to navigate to board with card
        function navigateToBoard(cardId) {
            const cardRow = document.querySelector(`tr[onclick*="${cardId}"]`);
            const boardId = cardRow ? cardRow.getAttribute('data-board-id') : null;

            console.log('Card ID:', cardId);
            console.log('Board ID:', boardId);
            console.log('Card Row:', cardRow);

            if (boardId) {
                const targetUrl = `{{ url('boards/show') }}/${boardId}?card=${cardId}`;
                console.log('Navigating to:', targetUrl);
                window.location.href = targetUrl;
            } else {
                console.error('Board ID not found for card:', cardId);
            }
        }

        // Initialize chart on page load
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM loaded, checking ECharts...');

            // Check if ECharts is loaded
            if (typeof echarts === 'undefined') {
                console.error('ECharts library not loaded!');
                const chartContainer = document.getElementById('chart-bars');
                if (chartContainer) {
                    chartContainer.innerHTML =
                        '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #dc3545;"><i class="fas fa-exclamation-triangle me-2"></i> ECharts library failed to load</div>';
                }
                return;
            }

            console.log('ECharts version:', echarts.version);
            console.log('Chart data available:', Object.keys(chartData).length, 'boards');

            createChart();

            // Initialize tooltips
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });

            // Add click animation to activity items
            const activityItems = document.querySelectorAll('.activity-item');
            activityItems.forEach(item => {
                item.addEventListener('click', function() {
                    this.style.transform = 'scale(0.98)';
                    setTimeout(() => {
                        this.style.transform = '';
                    }, 150);
                });
            });

            // Add hover effect to icon wrappers
            const iconWrappers = document.querySelectorAll('.icon-wrapper');
            iconWrappers.forEach(wrapper => {
                wrapper.addEventListener('mouseenter', function() {
                    this.style.transform = 'scale(1.1) rotate(5deg)';
                });

                wrapper.addEventListener('mouseleave', function() {
                    this.style.transform = 'scale(1) rotate(0deg)';
                });
            });

            // Ensure modal is properly initialized
            const viewCardModal = document.getElementById('viewCardModal');
            if (viewCardModal) {
                // Reset modal state on hide
                viewCardModal.addEventListener('hidden.bs.modal', function() {
                    // Reset loading state
                    document.getElementById('cardModalLoading').classList.add('d-none');
                    document.getElementById('cardModalContent').classList.remove('loading');

                    // Clear global variables
                    window.currentCardId = null;
                    window.currentCardData = null;
                });
            }
        });
    </script>

    <style>
        #chart-bars {
            cursor: pointer;
            transition: all 0.3s ease;
        }

        /* ECharts custom styling */
        #chart-bars canvas {
            cursor: pointer !important;
        }

        /* Chart container styling */
        #chart-bars {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(248, 249, 250, 0.5) 100%);
            border-radius: 10px;
            padding: 15px 5px;
        }

        /* Legend styling improvements */
        .chart {
            position: relative;
        }

        /* ECharts legend custom hover effects */
        #chart-bars div[class*="echarts"] {
            transition: all 0.3s ease;
        }

        /* Custom styling for legend items */
        [class*="legend"] {
            animation: fadeInUp 0.6s ease-out;
        }

        @keyframes legendPulse {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }
        }

        /* Legend button hover animation */
        #chart-bars .echarts-legend-item:hover {
            animation: legendPulse 0.5s ease-in-out;
        }

        /* Legend pagination buttons styling */
        .echarts-legend-scroll-btn {
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .echarts-legend-scroll-btn:hover {
            opacity: 0.8;
            transform: scale(1.1);
        }

        /* Make legend more compact on smaller screens */
        @media (max-width: 768px) {
            #chart-bars {
                height: 380px !important;
            }
        }

        /* Custom styling for legend pagination */
        #chart-bars canvas {
            transition: all 0.3s ease;
        }

        /* Smooth animation for legend items */
        .echarts-legend-item {
            transition: all 0.3s ease-in-out;
        }

        /* Highlight active page indicator */
        .echarts-legend-page-text {
            font-weight: 600 !important;
            color: #17a2b8 !important;
        }

        /* Style for pagination arrows */
        svg[class*="echarts"] path[d*="M12,0"],
        svg[class*="echarts"] path[d*="M0,0"] {
            fill: #17a2b8 !important;
            transition: all 0.3s ease;
        }

        /* Arrow hover effect */
        svg[class*="echarts"]:hover path[d*="M12,0"],
        svg[class*="echarts"]:hover path[d*="M0,0"] {
            fill: #138496 !important;
            opacity: 0.8;
        }

        /* Style legend items as colored button pills */
        .echarts-legend-item {
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }

        .echarts-legend-item:hover {
            transform: translateY(-2px);
            filter: brightness(1.1);
        }

        /* Make legend icon larger and rounded like buttons */
        .echarts-legend-item rect {
            rx: 14 !important;
            ry: 14 !important;
            stroke: none !important;
        }

        /* Position text OVER the colored button */
        .echarts-legend-item text {
            font-weight: 600 !important;
            fill: #fff !important;
            font-size: 13px !important;
            pointer-events: none;
        }

        /* Smooth transition for legend interactions */
        .echarts-legend-item * {
            transition: all 0.3s ease;
        }

        /* Hide inactive legend items properly */
        .echarts-legend-item[data-selected="false"] rect {
            opacity: 0.3 !important;
        }

        .echarts-legend-item[data-selected="false"] text {
            opacity: 0.5 !important;
        }

        /* Chart statistics styling */
        #chart-stats {
            padding: 14px 25px;
            background: linear-gradient(135deg, rgba(23, 162, 184, 0.08) 0%, rgba(23, 162, 184, 0.03) 100%);
            border-radius: 15px;
            border: 2px solid rgba(23, 162, 184, 0.15);
            animation: fadeIn 0.5s ease-out;
            box-shadow: 0 2px 10px rgba(23, 162, 184, 0.08);
            transition: all 0.3s ease;
        }

        #chart-stats:hover {
            box-shadow: 0 4px 20px rgba(23, 162, 184, 0.15);
            transform: translateY(-2px);
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes pulse {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.02);
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .stat-item {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .stat-label {
            font-size: 12px;
            color: #7b809a;
            font-weight: 500;
        }

        .stat-value {
            font-size: 16px;
            color: #fff;
            font-weight: bold;
            padding: 4px 14px;
            background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
            border-radius: 10px;
            min-width: 35px;
            text-align: center;
            box-shadow: 0 3px 8px rgba(23, 162, 184, 0.3);
            transition: all 0.3s ease;
            display: inline-block;
        }

        .stat-value:hover {
            transform: scale(1.1);
            box-shadow: 0 5px 15px rgba(23, 162, 184, 0.4);
        }

        .stat-divider {
            color: #dee2e6;
            font-weight: 300;
            font-size: 18px;
        }

        .gap-3 {
            gap: 1rem !important;
        }

        .card-link {
            transition: all 0.3s ease;
        }

        .card-link:hover {
            color: #17a2b8 !important;
            text-decoration: underline !important;
        }

        .clickable-row {
            transition: all 0.3s ease;
        }

        .clickable-row:hover {
            background-color: rgba(23, 162, 184, 0.1) !important;
        }

        .clickable-row:hover td {
            color: #17a2b8;
        }

        /* Recent Activity Styles - Enhanced */
        .icon-wrapper-enhanced {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            flex-shrink: 0;
        }

        .activity-item-enhanced {
            border-radius: 8px;
            position: relative;
            transition: background-color 0.2s ease;
        }

        .activity-item-enhanced:hover {
            background-color: rgba(23, 162, 184, 0.04);
        }

        .list-group-item:not(:last-child) {
            border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        }

        .activity-item-enhanced+.activity-item-enhanced {
            margin-top: 2px;
        }

        /* Animation for activity items */
        @keyframes fadeInSlide {
            from {
                opacity: 0;
                transform: translateY(8px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .activity-item-enhanced {
            animation: fadeInSlide 0.3s ease;
        }

        .activity-item-enhanced:nth-child(1) {
            animation-delay: 0.05s;
        }

        .activity-item-enhanced:nth-child(2) {
            animation-delay: 0.1s;
        }

        .activity-item-enhanced:nth-child(3) {
            animation-delay: 0.15s;
        }

        .activity-item-enhanced:nth-child(4) {
            animation-delay: 0.2s;
        }

        .activity-item-enhanced:nth-child(5) {
            animation-delay: 0.25s;
        }

        @keyframes pulseEmpty {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.03);
            }
        }

        /* My Cards Table Styles - Enhanced */
        .modern-table {
            border-collapse: separate;
            border-spacing: 0;
        }

        .modern-table thead tr {
            border-radius: 8px;
        }

        .modern-table thead th:first-child {
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }

        .modern-table thead th:last-child {
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
        }

        .clickable-row-enhanced {
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            position: relative;
        }

        .clickable-row-enhanced:hover {
            background: linear-gradient(135deg, rgba(23, 162, 184, 0.05) 0%, rgba(19, 132, 150, 0.05) 100%);
            box-shadow: 0 4px 15px rgba(23, 162, 184, 0.15);
        }

        .clickable-row-enhanced:hover td:first-child>div>div:first-child {
            transform: scaleY(1.2);
            box-shadow: 0 0 10px rgba(23, 162, 184, 0.5);
        }

        .badge-teal-pill {
            display: inline-flex;
            align-items: center;
            padding: 5px 14px;
            background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
            color: white;
            border-radius: 20px;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
            transition: all 0.3s ease;
        }

        .badge-teal-pill:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 18px rgba(23, 162, 184, 0.4);
        }

        /* Dropdown improvements */
        .dropdown-item {
            transition: all 0.3s ease;
        }

        .dropdown-item:hover {
            background-color: rgba(23, 162, 184, 0.1) !important;
            transform: translateX(5px);
        }

        .dropdown-item i {
            transition: color 0.3s ease;
        }

        .dropdown-item:hover i {
            color: #17a2b8;
        }

        /* Card header improvements */
        .card-header h6 i {
            font-size: 1rem;
        }

        /* Button improvements */
        .btn-outline-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 15px rgba(23, 162, 184, 0.3);
        }

        /* Custom Scrollbar for Recent Activity */
        .card-body::-webkit-scrollbar {
            width: 6px;
        }

        .card-body::-webkit-scrollbar-track {
            background: rgba(23, 162, 184, 0.05);
            border-radius: 10px;
        }

        .card-body::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
            border-radius: 10px;
            transition: all 0.3s ease;
        }

        .card-body::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, #138496 0%, #0f6674 100%);
            box-shadow: 0 0 10px rgba(23, 162, 184, 0.5);
        }

        /* Modal z-index fix for dashboard */
        #viewCardModal {
            z-index: 1055 !important;
        }

        #viewCardModal .modal-backdrop {
            z-index: 1050 !important;
        }

        /* Loading state improvements */
        #cardModalContent.loading {
            opacity: 0.6;
            pointer-events: none;
        }
    </style>
@endpush