{# Dashboard widget: Statistics cards (Active Projects, Total Hours, Total Invoices, Outstanding) #}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <div class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 border border-blue-200 dark:border-blue-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-blue-600 dark:text-blue-400 mb-1">{{ _('Active Projects') }}</p>
                <p class="text-3xl font-bold text-blue-900 dark:text-blue-100">{{ total_projects }}</p>
                <p class="text-xs text-blue-600/70 dark:text-blue-400/70 mt-1">{{ _('Total active') }}</p>
            </div>
            <div class="bg-blue-500/10 dark:bg-blue-400/10 p-4 rounded-full">
                <i class="fas fa-folder-open text-blue-600 dark:text-blue-400 text-3xl"></i>
            </div>
        </div>
    </div>
    <div class="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 border border-green-200 dark:border-green-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-green-600 dark:text-green-400 mb-1">{{ _('Total Hours') }}</p>
                <p class="text-3xl font-bold text-green-900 dark:text-green-100">{{ "%.1f"|format(total_hours) }}</p>
                <p class="text-xs text-green-600/70 dark:text-green-400/70 mt-1">{{ _('Hours tracked') }}</p>
            </div>
            <div class="bg-green-500/10 dark:bg-green-400/10 p-4 rounded-full">
                <i class="fas fa-clock text-green-600 dark:text-green-400 text-3xl"></i>
            </div>
        </div>
    </div>
    <div class="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 border border-purple-200 dark:border-purple-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-purple-600 dark:text-purple-400 mb-1">{{ _('Total Invoices') }}</p>
                <p class="text-3xl font-bold text-purple-900 dark:text-purple-100">{{ total_invoices }}</p>
                <p class="text-xs text-purple-600/70 dark:text-purple-400/70 mt-1">{{ _('All invoices') }}</p>
            </div>
            <div class="bg-purple-500/10 dark:bg-purple-400/10 p-4 rounded-full">
                <i class="fas fa-file-invoice text-purple-600 dark:text-purple-400 text-3xl"></i>
            </div>
        </div>
    </div>
    <div class="bg-gradient-to-br from-amber-50 to-amber-100 dark:from-amber-900/20 dark:to-amber-800/20 border border-amber-200 dark:border-amber-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-amber-600 dark:text-amber-400 mb-1">{{ _('Outstanding') }}</p>
                <p class="text-2xl font-bold text-amber-900 dark:text-amber-100">{{ "%.2f"|format(unpaid_invoice_amount) }}</p>
                <p class="text-xs text-amber-600/70 dark:text-amber-400/70 mt-1">{{ invoices[0].currency_code if invoices else 'EUR' }}</p>
            </div>
            <div class="bg-amber-500/10 dark:bg-amber-400/10 p-4 rounded-full">
                <i class="fas fa-exclamation-triangle text-amber-600 dark:text-amber-400 text-3xl"></i>
            </div>
        </div>
    </div>
</div>