@extends('layouts.seller')

@section('title', 'Tableau de bord')

@section('content')
<!-- Hero Header -->
<div class="dashboard-hero mb-5">
    <div class="d-flex justify-content-between align-items-start">
        <div class="hero-content">
            <h1 class="display-5 fw-bold mb-2 text-gradient">
                Bonjour, {{ $seller->user->name ?? 'Vendeur' }} 👋
            </h1>
            <p class="text-muted fs-5 mb-0">Bienvenue sur votre espace de vente</p>
        </div>
        <div class="kyc-badge-wrapper">
            @if($seller->kyc_status === 'approved')
            <div class="status-badge verified">
                <i class="bi bi-shield-check me-2"></i>
                <span>Compte Vérifié</span>
            </div>
            @elseif($seller->kyc_status === 'pending')
            <div class="status-badge pending">
                <i class="bi bi-clock-history me-2"></i>
                <span>Vérification en cours</span>
            </div>
            @else
            <a href="{{ route('seller.kyc.index') }}" class="status-badge required text-decoration-none">
                <i class="bi bi-exclamation-triangle me-2"></i>
                <span>Vérification requise</span>
            </a>
            @endif
        </div>
    </div>
</div>

<!-- Statistics Cards -->
<div class="row g-4 mb-5">
    <div class="col-md-6 col-xl-3">
        <div class="modern-stat-card revenue-card">
            <div class="card-icon-wrapper">
                <div class="card-icon success">
                    <i class="bi bi-wallet2"></i>
                </div>
            </div>
            <div class="card-content">
                <p class="stat-label">Solde disponible</p>
                <h2 class="stat-value">{{ number_format($stats['wallet_balance'] ?? $wallet->balance ?? 0, 0, ',', ' ') }}</h2>
                <span class="stat-currency">XOF</span>
            </div>
            @if(($stats['wallet_balance'] ?? $wallet->balance ?? 0) > 0)
            <a href="{{ route('seller.wallet.withdrawals') }}" class="card-trend positive" style="text-decoration: none;">
                <i class="bi bi-cash-stack me-1"></i>
                <span>Retirer</span>
            </a>
            @else
            <div class="card-trend" style="background: rgba(245, 158, 11, 0.15); color: #d97706;">
                <i class="bi bi-info-circle me-1"></i>
                <span>{{ number_format($stats['pending_balance'] ?? 0, 0, ',', ' ') }} en attente</span>
            </div>
            @endif
        </div>
    </div>
    
    <div class="col-md-6 col-xl-3">
        <div class="modern-stat-card orders-card">
            <div class="card-icon-wrapper">
                <div class="card-icon primary">
                    <i class="bi bi-cart-check"></i>
                </div>
            </div>
            <div class="card-content">
                <p class="stat-label">Commandes</p>
                <h2 class="stat-value">{{ $stats['total_orders'] ?? 0 }}</h2>
                <span class="stat-info">
                    <span class="badge-dot warning"></span>
                    {{ $stats['pending_orders'] ?? 0 }} en attente
                </span>
            </div>
        </div>
    </div>
    
    <div class="col-md-6 col-xl-3">
        <div class="modern-stat-card products-card">
            <div class="card-icon-wrapper">
                <div class="card-icon warning">
                    <i class="bi bi-box-seam"></i>
                </div>
            </div>
            <div class="card-content">
                <p class="stat-label">Produits</p>
                <h2 class="stat-value">{{ $stats['total_products'] ?? 0 }}</h2>
                <span class="stat-info">
                    <span class="badge-dot success"></span>
                    {{ $stats['active_products'] ?? 0 }} actifs
                </span>
            </div>
        </div>
    </div>
    
    <div class="col-md-6 col-xl-3">
        <div class="modern-stat-card rating-card">
            <div class="card-icon-wrapper">
                <div class="card-icon info">
                    <i class="bi bi-star-fill"></i>
                </div>
            </div>
            <div class="card-content">
                <p class="stat-label">Note moyenne</p>
                <h2 class="stat-value">{{ number_format($stats['average_rating'] ?? 0, 1) }}</h2>
                <div class="rating-stars">
                    @for($i = 1; $i <= 5; $i++)
                        @if($i <= ($stats['average_rating'] ?? 0))
                            <i class="bi bi-star-fill text-warning"></i>
                        @else
                            <i class="bi bi-star text-muted"></i>
                        @endif
                    @endfor
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Pending Balance Alert -->
@if(($stats['pending_balance'] ?? 0) > 0 && ($stats['wallet_balance'] ?? $wallet->balance ?? 0) == 0)
<div class="alert mb-4" style="background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.05)); border: 1px solid rgba(245, 158, 11, 0.2); border-radius: 16px; padding: 16px 20px;">
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
        <div class="d-flex align-items-center gap-3">
            <div style="width: 48px; height: 48px; border-radius: 12px; background: rgba(245, 158, 11, 0.15); display: flex; align-items: center; justify-content: center;">
                <i class="bi bi-hourglass-split text-warning fs-5"></i>
            </div>
            <div>
                <h6 class="fw-bold mb-1" style="color: #d97706;">{{ number_format($stats['pending_balance'] ?? 0, 0, ',', ' ') }} XOF en attente</h6>
                <p class="mb-0 text-muted" style="font-size: 0.85rem;">Soumettez vos preuves de livraison pour débloquer vos fonds</p>
            </div>
        </div>
        <a href="{{ route('seller.orders.index') }}" class="btn btn-sm" style="background: linear-gradient(135deg, #f59e0b, #d97706); color: white; border-radius: 10px; padding: 8px 20px; font-weight: 600;">
            <i class="bi bi-camera me-1"></i> Soumettre preuves
        </a>
    </div>
</div>
@endif

<!-- Main Content Grid -->
<div class="row g-4">
    <!-- Recent Orders -->
    <div class="col-xl-8">
        <div class="modern-card orders-table-card">
            <div class="card-header-modern">
                <div class="header-content">
                    <div class="header-icon">
                        <i class="bi bi-clock-history"></i>
                    </div>
                    <div>
                        <h5 class="mb-0 fw-bold">Commandes récentes</h5>
                        <p class="text-muted small mb-0">Gérez vos dernières commandes</p>
                    </div>
                </div>
                <a href="{{ route('seller.orders.index') }}" class="btn-link-modern">
                    Voir tout
                    <i class="bi bi-arrow-right ms-2"></i>
                </a>
            </div>
            
            <div class="card-body-modern p-0">
                @if($recentOrders->count() > 0)
                <div class="modern-table-wrapper">
                    <table class="modern-table">
                        <thead>
                            <tr>
                                <th>Commande</th>
                                <th>Client</th>
                                <th>Montant</th>
                                <th>Statut</th>
                                <th>Date</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recentOrders as $order)
                            <tr>
                                <td>
                                    <span class="order-number">#{{ $order->order_number ?? $order->id }}</span>
                                </td>
                                <td>
                                    <div class="customer-info">
                                        <div class="customer-avatar">
                                            {{ substr($order->user->name ?? 'C', 0, 1) }}
                                        </div>
                                        <span>{{ $order->user->name ?? 'Client' }}</span>
                                    </div>
                                </td>
                                <td>
                                    <span class="amount-value">{{ number_format($order->orderItems->sum('seller_amount') ?: $order->total, 0, ',', ' ') }} XOF</span>
                                </td>
                                <td>
                                    @if($order->status === 'pending')
                                    <span class="modern-badge warning">
                                        <span class="badge-dot"></span>
                                        En attente
                                    </span>
                                    @elseif($order->status === 'processing')
                                    <span class="modern-badge info">
                                        <span class="badge-dot"></span>
                                        En cours
                                    </span>
                                    @elseif($order->status === 'shipped')
                                    <span class="modern-badge primary">
                                        <span class="badge-dot"></span>
                                        Expédié
                                    </span>
                                    @elseif($order->status === 'delivered')
                                    <span class="modern-badge success">
                                        <span class="badge-dot"></span>
                                        Livré
                                    </span>
                                    @else
                                    <span class="modern-badge secondary">
                                        <span class="badge-dot"></span>
                                        {{ $order->status }}
                                    </span>
                                    @endif
                                </td>
                                <td>
                                    <span class="date-value">{{ $order->created_at->format('d/m/Y') }}</span>
                                </td>
                                <td>
                                    <a href="{{ route('seller.orders.show', $order) }}" class="btn-icon-modern">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @else
                <div class="empty-state">
                    <div class="empty-icon">
                        <i class="bi bi-inbox"></i>
                    </div>
                    <h6>Aucune commande</h6>
                    <p class="text-muted">Vos commandes apparaîtront ici</p>
                </div>
                @endif
            </div>
        </div>
    </div>
    
    <!-- Sidebar -->
    <div class="col-xl-4">
        <!-- Wallet Card -->
        <div class="modern-card wallet-card mb-4">
            <div class="wallet-header">
                <div class="wallet-icon">
                    <i class="bi bi-wallet2"></i>
                </div>
                <span class="wallet-label">Portefeuille</span>
            </div>
            
            <div class="wallet-balance">
                <h2 class="balance-amount">{{ number_format($wallet->balance ?? 0, 0, ',', ' ') }}</h2>
                <span class="balance-currency">XOF</span>
            </div>
            
            <p class="wallet-subtitle">Solde disponible</p>
            
            <a href="{{ route('seller.wallet.withdrawals') }}" class="btn-wallet-action">
                <i class="bi bi-cash-stack me-2"></i>
                Demander un retrait
            </a>
            
            <div class="wallet-stats">
                <div class="wallet-stat-item">
                    <span class="stat-label-sm">Total gagné</span>
                    <span class="stat-value-sm">{{ number_format($wallet->total_earned ?? 0, 0, ',', ' ') }} XOF</span>
                </div>
            </div>
        </div>

        <!-- Quick Actions Card -->
        <div class="modern-card quick-actions-card">
            <div class="card-header-modern">
                <div class="header-content">
                    <div class="header-icon">
                        <i class="bi bi-lightning-charge-fill"></i>
                    </div>
                    <div>
                        <h6 class="mb-0 fw-bold">Actions rapides</h6>
                    </div>
                </div>
            </div>
            
            <div class="quick-actions-grid">
                <a href="{{ route('seller.products.create') }}" class="quick-action-item">
                    <div class="action-icon primary">
                        <i class="bi bi-plus-circle"></i>
                    </div>
                    <span class="action-label">Ajouter produit</span>
                    <i class="bi bi-arrow-right action-arrow"></i>
                </a>
                
                <a href="{{ route('seller.coupons.create') }}" class="quick-action-item">
                    <div class="action-icon secondary">
                        <i class="bi bi-ticket-perforated"></i>
                    </div>
                    <span class="action-label">Créer coupon</span>
                    <i class="bi bi-arrow-right action-arrow"></i>
                </a>
                
                <a href="{{ route('seller.reviews.index') }}" class="quick-action-item">
                    <div class="action-icon info">
                        <i class="bi bi-star"></i>
                    </div>
                    <span class="action-label">Voir les avis</span>
                    <i class="bi bi-arrow-right action-arrow"></i>
                </a>
                
                <a href="{{ route('seller.products.index') }}" class="quick-action-item">
                    <div class="action-icon warning">
                        <i class="bi bi-box-seam"></i>
                    </div>
                    <span class="action-label">Mes produits</span>
                    <i class="bi bi-arrow-right action-arrow"></i>
                </a>
            </div>
        </div>
    </div>
</div>

<style>
/* Hero Section */
.dashboard-hero {
    padding: 2rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.text-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.kyc-badge-wrapper .status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.status-badge.verified {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.status-badge.pending {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
}

.status-badge.required {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: white;
}

.status-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* Modern Stat Cards */
.modern-stat-card {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
}

.modern-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.modern-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.card-icon-wrapper {
    margin-bottom: 1.5rem;
}

.card-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

.card-icon.success {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
}

.card-icon.primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.card-icon.warning {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
}

.card-icon.info {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
}

.stat-label {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 500;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.25rem;
    line-height: 1;
}

.stat-currency {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 600;
}

.stat-info {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.5rem;
}

.badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.5rem;
    display: inline-block;
}

.badge-dot.warning {
    background: #ffc107;
}

.badge-dot.success {
    background: #28a745;
}

.card-trend {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
}

.card-trend.positive {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.rating-stars {
    margin-top: 0.5rem;
}

.rating-stars i {
    font-size: 0.875rem;
    margin-right: 2px;
}

/* Modern Cards */
.modern-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.05);
    overflow: hidden;
    transition: all 0.3s ease;
}

.modern-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.card-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

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

.header-icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #667eea;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.btn-link-modern {
    color: #667eea;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.btn-link-modern:hover {
    color: #764ba2;
    transform: translateX(5px);
}

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

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

.modern-table thead {
    background: #f8f9fa;
}

.modern-table th {
    padding: 1rem 1.5rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e9ecef;
}

.modern-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s ease;
}

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

.modern-table td {
    padding: 1.25rem 1.5rem;
    vertical-align: middle;
}

.order-number {
    font-weight: 700;
    color: #667eea;
    font-size: 0.875rem;
}

.customer-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.customer-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

.amount-value {
    font-weight: 600;
    color: #1a1a1a;
    font-size: 0.9375rem;
}

.modern-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.modern-badge .badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.modern-badge.warning {
    background: rgba(255, 193, 7, 0.1);
    color: #f57c00;
}

.modern-badge.warning .badge-dot {
    background: #ffc107;
}

.modern-badge.info {
    background: rgba(23, 162, 184, 0.1);
    color: #17a2b8;
}

.modern-badge.info .badge-dot {
    background: #17a2b8;
}

.modern-badge.primary {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
}

.modern-badge.primary .badge-dot {
    background: #667eea;
}

.modern-badge.success {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.modern-badge.success .badge-dot {
    background: #28a745;
}

.modern-badge.secondary {
    background: rgba(108, 117, 125, 0.1);
    color: #6c757d;
}

.modern-badge.secondary .badge-dot {
    background: #6c757d;
}

.date-value {
    color: #6c757d;
    font-size: 0.875rem;
}

.btn-icon-modern {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    color: #667eea;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-icon-modern:hover {
    background: #667eea;
    color: white;
    transform: scale(1.1);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: #6c757d;
}

/* Wallet Card */
.wallet-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem !important;
}

.wallet-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.wallet-icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    backdrop-filter: blur(10px);
}

.wallet-label {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

.wallet-balance {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.balance-amount {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
}

.balance-currency {
    font-size: 1rem;
    font-weight: 600;
    opacity: 0.8;
}

.wallet-subtitle {
    font-size: 0.875rem;
    opacity: 0.8;
    margin-bottom: 1.5rem;
}

.btn-wallet-action {
    width: 100%;
    padding: 1rem;
    border: 2px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.15);
    color: white;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.btn-wallet-action:hover {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.5);
    color: white;
    transform: translateY(-2px);
}

.wallet-stats {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.2);
}

.wallet-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-label-sm {
    font-size: 0.875rem;
    opacity: 0.8;
}

.stat-value-sm {
    font-weight: 700;
    font-size: 0.9375rem;
}

/* Quick Actions */
.quick-actions-grid {
    display: grid;
    gap: 0.75rem;
    padding: 1.5rem;
}

.quick-action-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    background: #f8f9fa;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.quick-action-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #667eea;
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.quick-action-item:hover::before {
    transform: scaleY(1);
}

.quick-action-item:hover {
    background: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateX(5px);
}

.action-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.action-icon.primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.action-icon.secondary {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
}

.action-icon.info {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
}

.action-icon.warning {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: white;
}

.action-label {
    flex: 1;
    font-weight: 600;
    color: #1a1a1a;
    font-size: 0.9375rem;
}

.action-arrow {
    color: #6c757d;
    transition: all 0.3s ease;
}

.quick-action-item:hover .action-arrow {
    color: #667eea;
    transform: translateX(5px);
}

/* Responsive */
@media (max-width: 768px) {
    .dashboard-hero {
        padding: 1rem 0;
    }
    
    .dashboard-hero .d-flex {
        flex-direction: column;
        gap: 1rem;
    }
    
    .text-gradient {
        font-size: 1.75rem;
    }
    
    .modern-stat-card {
        padding: 1.5rem;
    }
    
    .stat-value {
        font-size: 1.5rem;
    }
    
    .card-header-modern {
        padding: 1rem 1.5rem;
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .modern-table th,
    .modern-table td {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
}
</style>
@endsection
