@extends('layouts.app')

@section('content')
    <div class="max-w-7xl mx-auto p-6">
        <!-- Enhanced Header Section with Breadcrumb -->
        <div class="mb-8">
            <nav class="flex mb-3" aria-label="{{ trans('benchmark.breadcrumb_navigation') }}">
                <ol class="inline-flex items-center space-x-1 md:space-x-3 text-sm">
                    <li class="inline-flex items-center">
                        <a href="{{ route('home') }}" class="inline-flex items-center text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors">
                            <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z">
                                </path>
                            </svg>
                            {{ trans('benchmark.dashboard') }}
                        </a>
                    </li>
                    <li aria-current="page">
                        <div class="flex items-center">
                            <svg class="w-5 h-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20"
                                xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd"
                                    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span class="ml-1 font-medium text-gray-600 dark:text-gray-300">{{ trans('benchmark.benchmarks') }}</span>
                        </div>
                    </li>
                </ol>
            </nav>
            <h1 class="text-3xl font-semibold text-gray-800 dark:text-gray-100 flex items-center">
                <svg class="w-8 h-8 mr-3 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z">
                    </path>
                </svg>
                {{ trans('benchmark.edit_benchmarks') }}
            </h1>
            <p class="text-gray-600 dark:text-gray-400 mt-2 max-w-3xl">
                {{ trans('benchmark.edit_description') }}
                <span class="inline-flex items-center px-2 py-0.5 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 rounded text-xs font-medium">{{ trans('benchmark.edit') }}</span>
                {{ trans('benchmark.edit_description_2') }}
                <span class="inline-flex items-center px-2 py-0.5 bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 rounded text-xs font-medium">{{ trans('benchmark.save_all') }}</span>
                {{ trans('benchmark.edit_description_3') }}
            </p>
        </div>

        <!-- Improved Notification Area with Animation -->
        <div id="alerts" class="transition-all duration-300 ease-in-out overflow-hidden max-h-0"></div>

        <!-- Benchmark Visualization Chart -->
        <div class="mb-8 bg-white dark:bg-gray-800 shadow-md rounded-lg border border-gray-200 dark:border-gray-700 p-6 transition-colors">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4 flex items-center">
                <svg class="w-6 h-6 mr-2 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z">
                    </path>
                </svg>
                {{ trans('benchmark.benchmark_visualization') }}
            </h2>
            <div class="relative bg-white dark:bg-gray-800 rounded-lg p-4" style="height: 700px;">
                <canvas id="benchmarkChart"></canvas>
            </div>
        </div>

        <!-- Search and Filter -->
        <div class="mb-5 flex flex-col sm:flex-row gap-4 items-end">
            <div class="flex-grow">
                <label for="benchmarkSearch" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ trans('admin.search_keys') }}</label>
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                            fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd"
                                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                                clip-rule="evenodd" />
                        </svg>
                    </div>
                    <input id="benchmarkSearch" type="text"
                        class="block w-full pl-10 sm:text-sm border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400"
                        placeholder="Filter by key name...">
                </div>
            </div>
            <div class="self-end">
                <span id="rowCount" class="text-sm text-gray-600 dark:text-gray-400"></span>
            </div>
        </div>

        <!-- Improved Table Design -->
        <div class="overflow-x-auto bg-white dark:bg-gray-800 shadow-md rounded-lg border border-gray-200 dark:border-gray-700 transition-colors">
            <table id="benchmarksTable" class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead class="bg-gray-50 dark:bg-gray-700">
                    <tr>
                        <th scope="col"
                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">{{ trans('benchmark.key') }}</th>
                        <th scope="col"
                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                            <div class="flex items-center">
                                <span
                                    class="bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 text-xs font-medium px-2 py-0.5 rounded mr-2">{{ trans('benchmark.low') }}</span>
                            </div>
                        </th>
                        <th scope="col"
                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                            <div class="flex items-center">
                                <span
                                    class="bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium px-2 py-0.5 rounded mr-2">{{ trans('benchmark.medium') }}</span>
                            </div>
                        </th>
                        <th scope="col"
                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                            <div class="flex items-center">
                                <span
                                    class="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs font-medium px-2 py-0.5 rounded mr-2">{{ trans('benchmark.high') }}</span>
                            </div>
                        </th>
                        <th scope="col" class="px-6 py-3 relative">
                            <span class="sr-only">{{ trans('benchmark.actions') }}</span>
                        </th>
                    </tr>
                </thead>
                <tbody id="benchmarksBody" class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                    @foreach ($benchmarks as $key => $value)
                        @php
                            $v0 = isset($value[0]) ? $value[0] : '';
                            $v1 = isset($value[1]) ? $value[1] : '';
                            $v2 = isset($value[2]) ? $value[2] : '';
                        @endphp
                        <tr data-key="{{ $key }}"
                            data-translated-name="{!! trans($translationPrefix . '.dimensions.' . $key . '.name') !!}"
                            class="align-middle hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150 ease-in-out"
                            data-changed="false">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900 dark:text-gray-100">{!! trans($translationPrefix . '.dimensions.' . $key . '.name') !!}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="relative">
                                    <input data-col="0" type="number" step="0.01" min="0"
                                        class="w-full sm:w-36 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm bg-gray-50 dark:bg-gray-700 text-black dark:text-gray-100 transition-all duration-200"
                                        value="{{ $v0 }}" disabled data-original="{{ $v0 }}">
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="relative">
                                    <input data-col="1" type="number" step="0.01" min="0"
                                        class="w-full sm:w-36 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm bg-gray-50 dark:bg-gray-700 text-black dark:text-gray-100 transition-all duration-200"
                                        value="{{ $v1 }}" disabled data-original="{{ $v1 }}">
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="relative">
                                    <input data-col="2" type="number" step="0.01" min="0"
                                        class="w-full sm:w-36 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm bg-gray-50 dark:bg-gray-700 text-black dark:text-gray-100 transition-all duration-200"
                                        value="{{ $v2 }}" disabled data-original="{{ $v2 }}">
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right">
                                <div class="flex items-center justify-end space-x-2 min-w-[180px]">
                                    <button data-action="edit"
                                        class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-yellow-500 hover:bg-yellow-600 dark:bg-yellow-600 dark:hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 transition-colors duration-200">
                                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z">
                                            </path>
                                        </svg>
                                        {{ trans('benchmark.edit') }}
                                    </button>
                                    <button data-action="save-row"
                                        class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 opacity-0 pointer-events-none"
                                        disabled>
                                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor"
                                            viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M5 13l4 4L19 7"></path>
                                        </svg>
                                        {{ trans('benchmark.save') }}
                                    </button>
                                </div>
                            </td>
                        </tr>
                        <tr class="bg-red-50 dark:bg-red-900" data-error-for="{{ $key }}" style="display:none">
                            <td colspan="5" class="px-6 py-2 text-sm text-red-700 dark:text-red-300 flex items-center">
                                <svg class="w-5 h-5 mr-2 text-red-500 dark:text-red-400" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                {{ trans('benchmark.invalid_values') }}
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- No Results Message -->
        <div id="noResults" class="hidden mt-4 p-6 text-center bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
            <svg class="w-12 h-12 mx-auto text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <p class="mt-2 text-gray-600 dark:text-gray-300">{{ trans('benchmark.no_matching_benchmarks') }}</p>
            <button id="clearFilter"
                class="mt-3 inline-flex items-center px-3 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                {{ trans('benchmark.clear_filters') }}
            </button>
        </div>

        <!-- Improved Save Button -->
        <div class="mt-6 flex justify-end">
            <button id="saveAll" disabled
                class="group relative inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 dark:bg-green-600 dark:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 opacity-50">
                <svg id="saveIcon" class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4">
                    </path>
                </svg>
                <svg id="loadingIcon" class="hidden w-5 h-5 mr-2 animate-spin" xmlns="http://www.w3.org/2000/svg"
                    fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                        stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor"
                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                    </path>
                </svg>
                {{ trans('admin.save_all') }}
            </button>
        </div>
    </div>

    @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const alerts = document.getElementById('alerts');
                const saveBtn = document.getElementById('saveAll');
                const saveIcon = document.getElementById('saveIcon');
                const loadingIcon = document.getElementById('loadingIcon');
                const benchmarkSearch = document.getElementById('benchmarkSearch');
                const noResults = document.getElementById('noResults');
                const clearFilter = document.getElementById('clearFilter');
                const rowCount = document.getElementById('rowCount');

                // Function to get theme-aware colors
                function getThemeColors() {
                    const isDark = document.documentElement.classList.contains('dark');
                    return {
                        gridColor: isDark ? '#374151' : '#E5E7EB',
                        textColor: isDark ? '#D1D5DB' : '#374151',
                        backgroundColor: isDark ? '#1F2937' : '#FFFFFF'
                    };
                }

                // Initialize Benchmark Chart
                function initializeBenchmarkChart() {
                    const chartElement = document.getElementById('benchmarkChart');
                    if (!chartElement) return;

                    // Collect data from the table
                    const rows = document.querySelectorAll('#benchmarksBody tr[data-key]');
                    const categories = [];
                    const bottomValues = [];
                    const mediumValues = [];
                    const highValues = [];

                    rows.forEach(row => {
                        const key = row.dataset.key;
                        const inputs = row.querySelectorAll('input[data-col]');

                        // Use the same translation as the table (from data attribute)
                        const categoryName = row.dataset.translatedName || key;
                        categories.push(categoryName);

                        // Get the three benchmark values
                        bottomValues.push(parseFloat(inputs[0].value) || 0);
                        mediumValues.push(parseFloat(inputs[1].value) || 0);
                        highValues.push(parseFloat(inputs[2].value) || 0);
                    });

                    const COLOR_BOTTOM = '#DC2626';
                    const COLOR_MEDIUM = '#6E52B5';
                    const COLOR_HIGH = '#10B981';
                    const n = categories.length;
                    const y = Array.from({
                        length: n
                    }, (_, i) => i);

                    function toPoints(arr) {
                        return y.map((yy, i) => ({
                            x: Number(arr[i]),
                            y: yy
                        }));
                    }

                    const themeColors = getThemeColors();

                    benchmarkChart = new Chart(chartElement, {
                        type: 'line',
                        data: {
                            labels: categories,
                            datasets: [{
                                    type: 'line',
                                    label: '{{ trans("benchmark.low") }}',
                                    data: toPoints(bottomValues),
                                    parsing: false,
                                    borderColor: COLOR_BOTTOM,
                                    backgroundColor: COLOR_BOTTOM,
                                    pointRadius: 4,
                                    pointHoverRadius: 6,
                                    tension: 0.2,
                                    fill: false,
                                    order: 1
                                },
                                {
                                    type: 'line',
                                    label: '{{ trans("benchmark.medium") }}',
                                    data: toPoints(mediumValues),
                                    parsing: false,
                                    borderColor: COLOR_MEDIUM,
                                    backgroundColor: COLOR_MEDIUM,
                                    pointRadius: 4,
                                    pointHoverRadius: 6,
                                    tension: 0.2,
                                    fill: false,
                                    order: 2
                                },
                                {
                                    type: 'line',
                                    label: '{{ trans("benchmark.high") }}',
                                    data: toPoints(highValues),
                                    parsing: false,
                                    borderColor: COLOR_HIGH,
                                    backgroundColor: COLOR_HIGH,
                                    pointRadius: 4,
                                    pointHoverRadius: 6,
                                    tension: 0.2,
                                    fill: false,
                                    order: 3
                                }
                            ]
                        },
                        options: {
                            indexAxis: 'y',
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: {
                                    position: 'bottom',
                                    labels: {
                                        usePointStyle: true,
                                        padding: 20,
                                        color: themeColors.textColor
                                    }
                                },
                                title: {
                                    display: true,
                                    text: '{{ trans("benchmark.performance_comparison") }}',
                                    font: {
                                        size: 16
                                    },
                                    color: themeColors.textColor
                                }
                            },
                            scales: {
                                x: {
                                    min: 0,
                                    max: 5,
                                    ticks: {
                                        stepSize: 1,
                                        color: themeColors.textColor
                                    },
                                    title: {
                                        display: true,
                                        text: '{{ trans("benchmark.performance_score") }}',
                                        color: themeColors.textColor
                                    },
                                    grid: {
                                        color: themeColors.gridColor
                                    }
                                },
                                y: {
                                    reverse: false,
                                    ticks: {
                                        maxRotation: 0,
                                        color: themeColors.textColor,
                                        callback: function(value, index) {
                                            // Return full category label (do not truncate)
                                            return this.getLabelForValue(value);
                                        }
                                    },
                                    grid: {
                                        color: themeColors.gridColor
                                    }
                                }
                            }
                        }
                    });
                }

                // Initialize chart on page load
                let benchmarkChart = null;
                initializeBenchmarkChart();

                // Ensure chart theme is updated after initialization
                setTimeout(() => {
                    updateChartTheme();
                }, 100);

                // Function to update chart theme
                function updateChartTheme() {
                    if (!benchmarkChart) {
                        return;
                    }

                    const themeColors = getThemeColors();

                    // Update legend colors
                    if (benchmarkChart.options.plugins.legend && benchmarkChart.options.plugins.legend.labels) {
                        benchmarkChart.options.plugins.legend.labels.color = themeColors.textColor;
                    }
                    if (benchmarkChart.options.plugins.title) {
                        benchmarkChart.options.plugins.title.color = themeColors.textColor;
                    }

                    // Update scale colors
                    if (benchmarkChart.options.scales.x) {
                        benchmarkChart.options.scales.x.ticks.color = themeColors.textColor;
                        benchmarkChart.options.scales.x.title.color = themeColors.textColor;
                        benchmarkChart.options.scales.x.grid.color = themeColors.gridColor;
                    }
                    if (benchmarkChart.options.scales.y) {
                        benchmarkChart.options.scales.y.ticks.color = themeColors.textColor;
                        benchmarkChart.options.scales.y.grid.color = themeColors.gridColor;
                    }

                    benchmarkChart.update('none'); // Use 'none' to prevent animation and make it instant
                }

                // Listen for theme changes
                const observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(mutation) {
                        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                            updateChartTheme();
                        }
                    });
                });

                observer.observe(document.documentElement, {
                    attributes: true,
                    attributeFilter: ['class']
                });

                // Additional theme change detection for various theme switching methods
                let lastTheme = document.documentElement.classList.contains('dark');
                setInterval(() => {
                    const currentTheme = document.documentElement.classList.contains('dark');
                    if (currentTheme !== lastTheme) {
                        lastTheme = currentTheme;
                        updateChartTheme();
                    }
                }, 500); // Check every 500ms

                // Function to update chart when values change
                function updateBenchmarkChart() {
                    if (!benchmarkChart) return;

                    const rows = document.querySelectorAll('#benchmarksBody tr[data-key]:not(.hidden)');
                    const categories = [];
                    const bottomValues = [];
                    const mediumValues = [];
                    const highValues = [];

                    rows.forEach(row => {
                        const key = row.dataset.key;
                        const inputs = row.querySelectorAll('input[data-col]');

                        // Use the same translation as the table (from data attribute)
                        const categoryName = row.dataset.translatedName || key;
                        categories.push(categoryName);

                        bottomValues.push(parseFloat(inputs[0].value) || 0);
                        mediumValues.push(parseFloat(inputs[1].value) || 0);
                        highValues.push(parseFloat(inputs[2].value) || 0);
                    });

                    const n = categories.length;
                    const y = Array.from({
                        length: n
                    }, (_, i) => i);

                    function toPoints(arr) {
                        return y.map((yy, i) => ({
                            x: Number(arr[i]),
                            y: yy
                        }));
                    }

                    // Update chart data
                    benchmarkChart.data.labels = categories;
                    benchmarkChart.data.datasets[0].data = toPoints(bottomValues);
                    benchmarkChart.data.datasets[1].data = toPoints(mediumValues);
                    benchmarkChart.data.datasets[2].data = toPoints(highValues);

                    // Update theme colors before updating chart
                    updateChartTheme();
                    benchmarkChart.update();
                }

                // Update row count
                function updateRowCount() {
                    const totalRows = document.querySelectorAll('#benchmarksBody tr[data-key]').length;
                    const visibleRows = Array.from(document.querySelectorAll('#benchmarksBody tr[data-key]')).filter(
                        tr => !tr.classList.contains('hidden')).length;

                    if (totalRows === visibleRows) {
                        rowCount.textContent = `{{ trans('benchmark.showing_all') }} ${totalRows} {{ trans('benchmark.benchmarks') }}`;
                    } else {
                        rowCount.textContent = `{{ trans('benchmark.showing') }} ${visibleRows} {{ trans('benchmark.of') }} ${totalRows} {{ trans('benchmark.benchmarks') }}`;
                    }
                }

                // Initialize row count
                updateRowCount();

                // Search functionality
                benchmarkSearch.addEventListener('input', function() {
                    const searchTerm = this.value.toLowerCase().trim();
                    const rows = document.querySelectorAll('#benchmarksBody tr[data-key]');
                    let hasVisibleRows = false;

                    rows.forEach(row => {
                        const key = row.dataset.key.toLowerCase();
                        const errorRow = document.querySelector(
                            `[data-error-for="${row.dataset.key}"]`);

                        if (key.includes(searchTerm)) {
                            row.classList.remove('hidden');
                            if (errorRow) errorRow.classList.remove('hidden');
                            hasVisibleRows = true;
                        } else {
                            row.classList.add('hidden');
                            if (errorRow) errorRow.classList.add('hidden');
                        }
                    });

                    // Show/hide no results message
                    if (hasVisibleRows) {
                        noResults.classList.add('hidden');
                    } else {
                        noResults.classList.remove('hidden');
                    }

                    updateRowCount();
                    updateBenchmarkChart();
                });

                // Clear filter button
                clearFilter.addEventListener('click', function() {
                    benchmarkSearch.value = '';
                    const event = new Event('input');
                    benchmarkSearch.dispatchEvent(event);
                    benchmarkSearch.focus();
                });

                // Enhanced notification system
                function showAlert(msg, type = 'success') {
                    if (window && window.notify && typeof window.notify === 'object') {
                        if (type === 'error') window.notify.error(msg);
                        else window.notify.success(msg);
                        return;
                    }

                    // Create a more appealing notification
                    const bgColor = type === 'success' ? 'bg-green-100 border-green-400 text-green-800' :
                        'bg-red-100 border-red-400 text-red-800';
                    const icon = type === 'success' ?
                        '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>' :
                        '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>';

                    alerts.innerHTML = `
            <div class="rounded-md p-4 border ${bgColor} transition-all duration-500 ease-in-out transform translate-y-0 opacity-100 mb-4">
                <div class="flex items-center">
                    <div class="flex-shrink-0 mr-3">
                        ${icon}
                    </div>
                    <div class="text-sm font-medium">
                        ${msg}
                    </div>
                    <button type="button" class="ml-auto -mx-1.5 -my-1.5 rounded-md p-1.5 inline-flex text-gray-500 hover:text-gray-700 focus:outline-none" onclick="this.parentElement.parentElement.remove()">
                        <span class="sr-only">{{ trans('admin.dismiss') }}</span>
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
            </div>
        `;

                    // Show alert with animation
                    alerts.style.maxHeight = '200px';

                    // Automatically dismiss after 5 seconds
                    setTimeout(() => {
                        const notification = alerts.querySelector('div');
                        if (notification) {
                            notification.classList.replace('translate-y-0', '-translate-y-3');
                            notification.classList.replace('opacity-100', 'opacity-0');
                            setTimeout(() => {
                                alerts.innerHTML = '';
                                alerts.style.maxHeight = '0px';
                            }, 300);
                        }
                    }, 5000);
                }

                // Enhanced row styling
                function setRowChanged(tr, changed) {
                    tr.dataset.changed = changed ? 'true' : 'false';
                    if (changed) {
                        tr.classList.add('bg-yellow-50');
                        tr.classList.add('border-l-4');
                        tr.classList.add('border-yellow-400');
                    } else {
                        tr.classList.remove('bg-yellow-50');
                        tr.classList.remove('border-l-4');
                        tr.classList.remove('border-yellow-400');
                    }
                }

                // Improved validation with visual feedback
                function validateRow(tr) {
                    const key = tr.dataset.key;
                    const inputs = tr.querySelectorAll('input[data-col]');
                    let ok = true;

                    inputs.forEach(i => {
                        if (i.value === '' || isNaN(parseFloat(i.value))) {
                            ok = false;
                            i.classList.add('border-red-300', 'ring-red-200');
                        } else {
                            i.classList.remove('border-red-300', 'ring-red-200');
                        }
                    });

                    const errRow = document.querySelector(`[data-error-for="${key}"]`);
                    if (!ok) {
                        errRow.style.display = '';
                        tr.classList.add('border-red-200');
                    } else {
                        errRow.style.display = 'none';
                        tr.classList.remove('border-red-200');
                    }

                    return ok;
                }

                // Updated save state management
                function updateSaveState() {
                    const rows = document.querySelectorAll('#benchmarksBody tr[data-key]:not(.hidden)');
                    let anyChanged = false;
                    let anyInvalid = false;
                    let changedCount = 0;

                    rows.forEach(tr => {
                        if (tr.dataset.changed === 'true') {
                            anyChanged = true;
                            changedCount++;
                        }
                        if (!validateRow(tr)) anyInvalid = true;
                    });

                    if (anyChanged && !anyInvalid) {
                        saveBtn.disabled = false;
                        saveBtn.classList.remove('opacity-50');
                        saveBtn.classList.add('pulse-animation');
                        saveBtn.innerHTML = `
                <svg id="saveIcon" class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"></path>
                </svg>
                <svg id="loadingIcon" class="hidden w-5 h-5 mr-2 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                {{ trans('admin.save_all') }} ({{ '${changedCount}' }})
            `;
                    } else {
                        saveBtn.disabled = true;
                        saveBtn.classList.add('opacity-50');
                        saveBtn.classList.remove('pulse-animation');
                        saveBtn.innerHTML = `
                <svg id="saveIcon" class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"></path>
                </svg>
                <svg id="loadingIcon" class="hidden w-5 h-5 mr-2 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                {{ trans('admin.save_all') }}
            `;
                    }
                }

                // Event delegation for edit/reset buttons with improved UX
                document.getElementById('benchmarksTable').addEventListener('click', function(e) {
                    const btn = e.target.closest('button');
                    if (!btn) return;
                    const action = btn.dataset.action;
                    if (!action) return;
                    const tr = btn.closest('tr[data-key]');
                    if (!tr) return;

                    if (action === 'edit') {
                        const inputs = tr.querySelectorAll('input[data-col]');
                        const editing = !inputs[0].disabled;

                        if (editing) {
                            // Lock
                            inputs.forEach(i => {
                                i.disabled = true;
                                i.classList.remove('bg-white', 'border-blue-300');
                                i.classList.add('bg-gray-50');
                            });
                            btn.innerHTML = `
                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
                    </svg>
                    {{ trans('benchmark.edit') }}
                `;
                            btn.classList.remove('bg-red-500', 'hover:bg-red-600');
                            btn.classList.add('bg-yellow-500', 'hover:bg-yellow-600');
                        } else {
                            // Unlock with visual emphasis
                            inputs.forEach(i => {
                                i.disabled = false;
                                i.classList.remove('bg-gray-50');
                                i.classList.add('bg-white', 'border-blue-300', 'ring-2',
                                    'ring-blue-100');
                            });

                            // Focus first input and select its content
                            inputs[0].focus();
                            inputs[0].select();

                            btn.innerHTML = `
                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                    </svg>
                    {{ trans('benchmark.lock') }}
                `;
                            btn.classList.remove('bg-yellow-500', 'hover:bg-yellow-600');
                            btn.classList.add('bg-red-500', 'hover:bg-red-600');

                            // Add smooth entrance animation to inputs
                            inputs.forEach((input, idx) => {
                                input.style.transition =
                                    'transform 0.2s ease-out, background-color 0.2s ease-out';
                                input.style.transform = 'scale(0.95)';
                                setTimeout(() => {
                                    input.style.transform = 'scale(1)';
                                }, 50 * idx);
                            });
                        }
                    }

                    if (action === 'save-row') {
                        // Save only this row with loading state
                        const key = tr.dataset.key;
                        const inputs = tr.querySelectorAll('input[data-col]');

                        if (!validateRow(tr)) {
                            showAlert('{{ trans("benchmark.row_invalid_values") }}', 'error');
                            // Shake effect on error
                            tr.style.animation = 'shake 0.5s cubic-bezier(.36,.07,.19,.97) both';
                            setTimeout(() => {
                                tr.style.animation = '';
                            }, 500);
                            return;
                        }

                        const vals = Array.from(inputs).map(i => parseFloat(i.value));
                        const tokenMeta = document.querySelector('meta[name="csrf-token"]');
                        const token = tokenMeta ? tokenMeta.getAttribute('content') : '';

                        // Show loading state (no visual change)
                        btn.disabled = true;
                        fetch('{{ $saveUrl }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': token,
                                'Accept': 'application/json'
                            },
                            body: JSON.stringify({
                                benchmarks: {
                                    [key]: vals
                                }
                            })
                        }).then(async resp => {
                            const data = await resp.json().catch(() => ({}));
                            if (!resp.ok) throw data;
                            return data;
                        }).then(json => {
                            // Prefer server-provided notifications. Show a local fallback only if none provided.
                            let serverNotified = false;
                            if (json.notifications && Array.isArray(json.notifications) && json
                                .notifications.length) {
                                serverNotified = true;
                                json.notifications.forEach(n => showAlert(n.message || n.text || '', n
                                    .type || 'success'));
                            }

                            // update originals and lock inputs with success visual feedback
                            inputs.forEach((i, idx) => {
                                i.dataset.original = String((json.benchmarks[key][idx] ?? ''));
                                i.value = json.benchmarks[key][idx];
                                i.disabled = true;
                                i.classList.remove('bg-white', 'border-blue-300', 'ring-2',
                                    'ring-blue-100');
                                i.classList.add('bg-gray-50');

                                // Flash green for success
                                i.classList.add('bg-green-50', 'border-green-300');
                                setTimeout(() => {
                                    i.classList.remove('bg-green-50',
                                        'border-green-300');
                                }, 1000);
                            });

                            tr.dataset.changed = 'false';
                            tr.classList.add('bg-green-50');
                            setTimeout(() => {
                                tr.classList.remove('bg-green-50');
                            }, 1000);

                            const editBtn = tr.querySelector('button[data-action="edit"]');
                            if (editBtn) {
                                const container = editBtn.parentElement; // The flex container
                                const saveButton = tr.querySelector('button[data-action="save-row"]');


                                editBtn.classList.remove('bg-red-500', 'hover:bg-red-600');
                                // restore yellow styling for Edit button
                                editBtn.classList.add('bg-yellow-500', 'hover:bg-yellow-600');

                                editBtn.innerHTML = `
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
                        </svg>
                        Edit
                    `;

                            }

                            // hide save button and reset its content
                            btn.innerHTML = `
                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    {{ trans('benchmark.save') }}
                `;
                            btn.classList.add('opacity-0', 'pointer-events-none');
                            btn.classList.remove('opacity-100', 'pointer-events-auto');
                            btn.disabled = true;

                            updateSaveState();
                            updateBenchmarkChart();

                            if (!serverNotified) {
                                showAlert('{{ trans("benchmark.row_saved_successfully") }}', 'success');
                            }

                        }).catch(err => {
                            btn.disabled = false;

                            let msg = '{{ trans("benchmark.save_failed") }}';
                            if (err && err.errors) msg = Object.entries(err.errors).map(([k, v]) =>
                                `${k}: ${v}`).join('; ');
                            if (err && err.message) msg = err.message;

                            // if server returned notifications, show them
                            if (err && err.notifications && Array.isArray(err.notifications)) {
                                err.notifications.forEach(n => showAlert(n.message || n.text || '', n
                                    .type || 'error'));
                            } else {
                                showAlert(msg, 'error');
                            }

                            // Shake effect on error
                            tr.style.animation = 'shake 0.5s cubic-bezier(.36,.07,.19,.97) both';
                            setTimeout(() => {
                                tr.style.animation = '';
                            }, 500);
                        });
                    }
                });

                // Track changes with improved feedback
                document.querySelectorAll('#benchmarksBody input[data-col]').forEach(input => {
                    input.addEventListener('input', function() {
                        const tr = input.closest('tr[data-key]');
                        const inputs = tr.querySelectorAll('input[data-col]');
                        const changed = Array.from(inputs).some(i => i.value !== (i.dataset.original ??
                            ''));

                        setRowChanged(tr, changed);
                        validateRow(tr);

                        // show/hide per-row save button with animation
                        const saveBtn = tr.querySelector('button[data-action="save-row"]');
                        if (saveBtn) {
                            if (changed && validateRow(tr)) {
                                saveBtn.classList.remove('opacity-0', 'pointer-events-none');
                                saveBtn.classList.add('opacity-100', 'pointer-events-auto');
                                saveBtn.disabled = false;

                                // Subtle animation to draw attention
                                saveBtn.style.animation = 'pulse 2s infinite';
                            } else {
                                saveBtn.classList.add('opacity-0', 'pointer-events-none');
                                saveBtn.classList.remove('opacity-100', 'pointer-events-auto');
                                saveBtn.disabled = true;
                                saveBtn.style.animation = '';
                            }
                        }

                        updateSaveState();
                        updateBenchmarkChart();
                    });

                    // Add visual feedback on focus
                    input.addEventListener('focus', function() {
                        if (!input.disabled) {
                            input.classList.add('ring-2', 'ring-blue-200');
                        }
                    });

                    input.addEventListener('blur', function() {
                        input.classList.remove('ring-2', 'ring-blue-200');
                    });
                });

                // Save all with loading state
                saveBtn.addEventListener('click', function() {
                    if (saveBtn.disabled) return;

                    const rows = document.querySelectorAll('#benchmarksBody tr[data-key]:not(.hidden)');
                    const payload = {};

                    rows.forEach(tr => {
                        if (tr.dataset.changed === 'true') {
                            const key = tr.dataset.key;
                            const vals = Array.from(tr.querySelectorAll('input[data-col]')).map(i =>
                                parseFloat(i.value));
                            payload[key] = vals;
                        }
                    });

                    if (Object.keys(payload).length === 0) {
                        showAlert('{{ trans("benchmark.no_changes_to_save") }}', 'error');
                        return;
                    }

                    // Show loading state
                    saveBtn.disabled = true;
                    saveIcon.classList.add('hidden');
                    loadingIcon.classList.remove('hidden');

                    const tokenMeta = document.querySelector('meta[name="csrf-token"]');
                    const token = tokenMeta ? tokenMeta.getAttribute('content') : '';

                    fetch('{{ $saveUrl }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': token,
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({
                            benchmarks: payload
                        })
                    }).then(async resp => {
                        const data = await resp.json().catch(() => ({}));
                        if (!resp.ok) throw data;
                        return data;
                    }).then(json => {
                        // Reset loading state
                        saveIcon.classList.remove('hidden');
                        loadingIcon.classList.add('hidden');

                        // Prefer server-provided notifications. Show a local fallback only if none provided.
                        let serverNotifiedAll = false;
                        if (json.notifications && Array.isArray(json.notifications) && json
                            .notifications.length) {
                            serverNotifiedAll = true;
                            json.notifications.forEach(n => showAlert(n.message || n.text || '', n
                                .type || 'success'));
                        }

                        // update originals and lock inputs with success visual feedback
                        Object.keys(json.benchmarks || {}).forEach(key => {
                            const tr = document.querySelector(
                                `#benchmarksBody tr[data-key="${key}"]`);
                            if (!tr) return;

                            const inputs = tr.querySelectorAll('input[data-col]');
                            inputs.forEach((i, idx) => {
                                i.dataset.original = String((json.benchmarks[key][
                                    idx
                                ] ?? ''));
                                i.value = json.benchmarks[key][idx];
                                i.disabled = true;
                                i.classList.remove('bg-white', 'border-blue-300',
                                    'ring-2', 'ring-blue-100');
                                i.classList.add('bg-gray-50');

                                // Flash green for success
                                i.classList.add('bg-green-50', 'border-green-300');
                                setTimeout(() => {
                                    i.classList.remove('bg-green-50',
                                        'border-green-300');
                                }, 1000);
                            });

                            tr.dataset.changed = 'false';
                            tr.classList.add('bg-green-50');
                            setTimeout(() => {
                                tr.classList.remove('bg-green-50', 'border-l-4',
                                    'border-yellow-400');
                            }, 1000);

                            const editBtn = tr.querySelector('button[data-action="edit"]');
                            if (editBtn) {
                                editBtn.classList.remove('bg-red-500', 'hover:bg-red-600');
                                editBtn.classList.add('bg-yellow-500', 'hover:bg-yellow-600');
                                editBtn.innerHTML = `
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
                        </svg>
                        {{ trans('benchmark.edit') }}
                    `;
                            }

                            // Hide row save button
                            const rowSaveBtn = tr.querySelector(
                                'button[data-action="save-row"]');
                            if (rowSaveBtn) {
                                rowSaveBtn.classList.add('opacity-0', 'pointer-events-none');
                                rowSaveBtn.classList.remove('opacity-100',
                                    'pointer-events-auto');
                                rowSaveBtn.disabled = true;
                            }
                        });

                        updateSaveState();
                        updateBenchmarkChart();

                        if (!serverNotifiedAll) {
                            showAlert(`${Object.keys(payload).length} {{ trans("benchmark.benchmarks_saved_successfully") }}`,
                                'success');
                        }
                    }).catch(err => {
                        // Reset loading state
                        saveIcon.classList.remove('hidden');
                        loadingIcon.classList.add('hidden');
                        saveBtn.disabled = false;

                        let msg = '{{ trans("benchmark.save_failed") }}';
                        if (err && err.errors) msg = Object.entries(err.errors).map(([k, v]) =>
                            `${k}: ${v}`).join('; ');
                        if (err && err.message) msg = err.message;

                        if (err && err.notifications && Array.isArray(err.notifications)) {
                            err.notifications.forEach(n => showAlert(n.message || n.text || '', n
                                .type || 'error'));
                        } else {
                            showAlert(msg, 'error');
                        }
                    });
                });

                // Add CSS animations
                const style = document.createElement('style');
                style.textContent = `
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
            70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
            100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
        }
        
        .pulse-animation {
            animation: pulse 2s infinite;
        }
        
        /* Add smooth transitions */
        #benchmarksBody tr {
            transition: background-color 0.3s ease, border-color 0.3s ease;
        }
        
        /* Smooth transitions for save buttons */
        button[data-action="save-row"] {
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        
        /* Improve input field styling on hover */
        input:not([disabled]):hover {
            border-color: #93C5FD;
        }
    `;
                document.head.appendChild(style);
            });
        </script>
    @endpush
@endsection