@extends('layouts.app')

@section('title', session('locale', 'en') === 'fr' ? 'Tableau de bord' : 'My Dashboard')
@section('page-title', session('locale', 'en') === 'fr' ? 'Mes produits' : 'My Products')

@section('content')
@php
    $lang = session('locale', 'en');

    $t = [
        'en' => [
            'dashboard' => 'Dashboard',
            'total' => 'Total Products',
            'available' => 'Active',
            'sold' => 'Sold',
            'expired' => 'Expired',
            'value' => 'Total Value',
            'views' => 'Views',
            'seller' => 'SELLER PANEL',
            'add_title' => 'Create a New Listing',
            'add_text' => 'Publish a product or service and reach more customers.',
            'add_btn' => '+ Add Product',
            'my_products' => 'My Products',
            'manage' => 'Manage, renew and track all your listings.',
            'no_category' => 'No category',
            'size' => 'Size',
            'no_description' => 'No description added.',
            'edit' => 'Edit',
            'delete' => 'Delete',
            'confirm' => 'Are you sure you want to delete this product?',
            'empty' => 'No products yet',
            'empty_text' => 'Create your first listing to get started.',
            'days_left' => 'days left',
            'expired_label' => 'Expired',
            'renew' => 'Renew Listing',
            'view_listing' => 'View',
            'status' => 'Status',
            'active_until' => 'Active until',
            'not_available' => 'Not available',
            'email_stats' => 'Email My Statistics',
            'email_stats_hint' => 'Receive a professional performance report by email.',
            'performance' => 'Performance Overview',
            'top_listings' => 'Top Listings by Views',
            'total_views' => 'Total Views',
            'average_views' => 'Average Views',
            'active_rate' => 'Active Rate',
            'seller_report' => 'Seller Report',
        ],
        'fr' => [
            'dashboard' => 'Tableau de bord',
            'total' => 'Total des produits',
            'available' => 'Actifs',
            'sold' => 'Vendus',
            'expired' => 'Expirés',
            'value' => 'Valeur totale',
            'views' => 'Vues',
            'seller' => 'PANNEAU VENDEUR',
            'add_title' => 'Créer une nouvelle annonce',
            'add_text' => 'Publiez un produit ou un service et rejoignez plus de clients.',
            'add_btn' => '+ Ajouter un produit', 
            'my_products' => 'Mes produits',
            'manage' => 'Gérez, renouvelez et suivez toutes vos annonces.',
            'no_category' => 'Aucune catégorie',
            'size' => 'Taille',
            'no_description' => 'Aucune description ajoutée.',
            'edit' => 'Modifier',
            'delete' => 'Supprimer',
            'confirm' => 'Voulez-vous vraiment supprimer ce produit ?',
            'empty' => 'Aucun produit',
            'empty_text' => 'Créez votre première annonce pour commencer.',
            'days_left' => 'jours restants',
            'expired_label' => 'Expirée',
            'renew' => 'Renouveler l’annonce',
            'view_listing' => 'Voir',
            'status' => 'Statut',
            'active_until' => 'Active jusqu’au',
            'not_available' => 'Non disponible',
            'email_stats' => 'Envoyer mes statistiques par courriel',
            'email_stats_hint' => 'Recevez un rapport professionnel de performance par courriel.',
            'performance' => 'Aperçu des performances',
            'top_listings' => 'Meilleures annonces par vues',
            'total_views' => 'Vues totales',
            'average_views' => 'Vues moyennes',
            'active_rate' => 'Taux actif',
            'seller_report' => 'Rapport vendeur',
        ],
    ];

    $tr = $t[$lang] ?? $t['en'];

    $productCollection = collect($products ?? []);

    $expiredProductsCount = $productCollection->filter(function ($product) {
        return !$product->is_active
            || !$product->expires_at
            || now()->greaterThanOrEqualTo($product->expires_at);
    })->count();

    $soldProductsCount = $productCollection->filter(function ($product) {
        return strtolower($product->status ?? 'available') === 'sold';
    })->count();

    $activeProductsCount = $productCollection->filter(function ($product) {
        $expiresAt = $product->expires_at ? \Carbon\Carbon::parse($product->expires_at) : null;
        return $product->is_active
            && $expiresAt
            && now()->lessThan($expiresAt)
            && strtolower($product->status ?? 'available') !== 'sold';
    })->count();

    $totalViewsCount = (int) $productCollection->sum('views');
    $averageViewsCount = $productCollection->count() ? round($totalViewsCount / max(1, $productCollection->count())) : 0;
    $activeRate = $productCollection->count() ? round(($activeProductsCount / max(1, $productCollection->count())) * 100) : 0;
    $maxViews = max(1, (int) $productCollection->max('views'));
    $topProducts = $productCollection->sortByDesc(fn ($product) => (int) ($product->views ?? 0))->take(5);
@endphp

<div class="dashboard-wrapper">

    @if(session('success'))
        <div class="success-alert">{{ session('success') }}</div>
    @endif

    <section class="dashboard-hero">
        <div>
            <span class="hero-badge">{{ $tr['seller'] }}</span>
            <h1>{{ $tr['dashboard'] }}</h1>
            <p>{{ $tr['manage'] }}</p>
        </div>

        <div class="hero-actions">
            <a href="{{ route('product.create') }}" class="hero-add-button">{{ $tr['add_btn'] }}</a>

            @if(\Illuminate\Support\Facades\Route::has('dashboard.email-stats'))
                <form method="POST" action="{{ route('dashboard.email-stats') }}">
                    @csrf
                    <button type="submit" class="hero-email-button">✉️ {{ $tr['email_stats'] }}</button>
                </form>
            @else
                <button type="button" class="hero-email-button disabled" disabled>✉️ {{ $tr['email_stats'] }}</button>
            @endif
        </div>
    </section>

    <section class="stats-grid">
        <article class="stat-card">
            <div class="stat-icon blue">📦</div>
            <div>
                <p>{{ $tr['total'] }}</p>
                <h2>{{ $totalProducts ?? $productCollection->count() }}</h2>
            </div>
        </article>

        <article class="stat-card">
            <div class="stat-icon green">✓</div>
            <div>
                <p>{{ $tr['available'] }}</p>
                <h2>{{ $availableProducts ?? $activeProductsCount }}</h2>
            </div>
        </article>

        <article class="stat-card">
            <div class="stat-icon red">⏳</div>
            <div>
                <p>{{ $tr['expired'] }}</p>
                <h2>
                    {{ $expiredProductsCount }}
                </h2>
            </div>
        </article>

        <article class="stat-card">
            <div class="stat-icon purple">💰</div>
            <div>
                <p>{{ $tr['value'] }}</p>
                <h2>${{ number_format($totalValue ?? 0, 2) }}</h2>
            </div>
        </article>

        <article class="stat-card">
            <div class="stat-icon cyan">👁</div>
            <div>
                <p>{{ $tr['total_views'] }}</p>
                <h2>{{ number_format($totalViewsCount) }}</h2>
            </div>
        </article>

        <article class="stat-card">
            <div class="stat-icon amber">📊</div>
            <div>
                <p>{{ $tr['average_views'] }}</p>
                <h2>{{ number_format($averageViewsCount) }}</h2>
            </div>
        </article>
    </section>

    <section class="analytics-panel">
        <div class="analytics-header">
            <div>
                <span class="panel-kicker">{{ $tr['seller_report'] }}</span>
                <h2>{{ $tr['performance'] }}</h2>
                <p>{{ $tr['email_stats_hint'] }}</p>
            </div>

            @if(\Illuminate\Support\Facades\Route::has('dashboard.email-stats'))
                <form method="POST" action="{{ route('dashboard.email-stats') }}">
                    @csrf
                    <button type="submit" class="analytics-email-button">✉️ {{ $tr['email_stats'] }}</button>
                </form>
            @else
                <button type="button" class="analytics-email-button disabled" disabled>✉️ {{ $tr['email_stats'] }}</button>
            @endif
        </div>

        <div class="analytics-grid">
            <article class="donut-card">
                <div class="donut-chart" style="--active: {{ min(100, max(0, $activeRate)) }};"><span>{{ $activeRate }}%</span></div>
                <div>
                    <h3>{{ $tr['active_rate'] }}</h3>
                    <p>{{ $activeProductsCount }} {{ $tr['available'] }} · {{ $expiredProductsCount }} {{ $tr['expired'] }} · {{ $soldProductsCount }} {{ $tr['sold'] }}</p>
                </div>
            </article>

            <article class="bars-card">
                <div class="bars-header">
                    <h3>{{ $tr['top_listings'] }}</h3>
                    <span>{{ number_format($totalViewsCount) }} {{ $tr['views'] }}</span>
                </div>
                <div class="performance-list">
                    @forelse($topProducts as $topProduct)
                        @php
                            $viewCount = (int) ($topProduct->views ?? 0);
                            $barWidth = max(4, round(($viewCount / $maxViews) * 100));
                        @endphp
                        <div class="performance-row">
                            <div class="performance-title"><strong>{{ \Illuminate\Support\Str::limit($topProduct->title, 32) }}</strong><span>{{ number_format($viewCount) }} {{ $tr['views'] }}</span></div>
                            <div class="performance-bar"><span style="width: {{ $barWidth }}%;"></span></div>
                        </div>
                    @empty
                        <div class="performance-empty">{{ $tr['empty_text'] }}</div>
                    @endforelse
                </div>
            </article>
        </div>
    </section>

    <section class="products-panel">
        <header class="panel-header"> 
            <div>
                <span class="panel-kicker">{{ $tr['seller'] }}</span>
                <h2>{{ $tr['my_products'] }}</h2>
                <p>{{ $tr['manage'] }}</p>
            </div> 

            <a href="{{ route('product.create') }}" class="panel-add-button">
                {{ $tr['add_btn'] }}
            </a>
        </header>

        <div class="products-grid">
            @forelse($products as $product)
                @php
                    $images = is_array($product->images)
                        ? $product->images
                        : json_decode($product->images ?? '[]', true);

                    $images = is_array($images) ? $images : [];
                    $firstImage = $images[0] ?? null;

                    $imageUrl = null;
                    if ($firstImage) {
                        $normalizedImage = str_replace('\\', '/', trim($firstImage));
                        if (\Illuminate\Support\Str::startsWith($normalizedImage, ['http://', 'https://', '//'])) {
                            $imageUrl = $normalizedImage;
                        } else {
                            $imageUrl = asset('storage/' . ltrim($normalizedImage, '/'));
                        }
                    }

                    $expiresAt = $product->expires_at
                        ? \Carbon\Carbon::parse($product->expires_at)
                        : null;

                    $daysLeft = $expiresAt
                        ? (int) ceil(now()->diffInHours($expiresAt, false) / 24)
                        : 0;

                    $isExpired =
                        !$product->is_active
                        || !$expiresAt
                        || now()->greaterThanOrEqualTo($expiresAt);

                    $displayPrice = $product->discount_price ?: $product->price;

                    $cleanDescription = trim(
                        preg_replace(
                            '/\s+/',
                            ' ',
                            strip_tags($product->description ?? '')
                        )
                    );
                @endphp

                <article class="product-card {{ $isExpired ? 'expired-card' : '' }}">
                    <div class="product-image">
                        @if($imageUrl)
                            <img
                                src="{{ $imageUrl }}"
                                alt="{{ $product->title }}"
                                loading="lazy"
                                decoding="async"
                                onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
                            >
                            <div class="no-image image-fallback" style="display:none;">📷</div>
                        @else
                            <div class="no-image">📷</div>
                        @endif

                        <div class="image-overlay"></div>

                        @if($isExpired)
                            <span class="timer-badge danger">
                                ⛔ {{ $tr['expired_label'] }}
                            </span>
                        @else
                            <span class="timer-badge {{ $daysLeft <= 5 ? 'danger' : '' }}">
                                ⏳ {{ max(0, $daysLeft) }} {{ $tr['days_left'] }}
                            </span>
                        @endif

                        <span class="status-badge {{ $product->status === 'sold' ? 'sold' : ($isExpired ? 'expired' : 'available') }}">
                            @if($product->status === 'sold')
                                {{ $tr['sold'] }}
                            @elseif($isExpired)
                                {{ $tr['expired_label'] }}
                            @else
                                {{ $tr['available'] }}
                            @endif
                        </span>
                    </div>

                    <div class="product-body">
                        <div class="product-heading">
                            <div>
                                <span class="category-label">
                                    {{ $product->category ?: $tr['no_category'] }}
                                </span>

                                <h3>{{ $product->title }}</h3>
                            </div>

                            <strong class="product-price">
                                ${{ number_format($displayPrice, 2) }}
                            </strong>
                        </div>

                        <div class="product-meta">
                            <span>👁 {{ number_format($product->views ?? 0) }} {{ $tr['views'] }}</span>

                            @if($product->size)
                                <span>📏 {{ $tr['size'] }}: {{ $product->size }}</span>
                            @endif
                        </div>

                        <p class="description">
                            {{ $cleanDescription
                                ? \Illuminate\Support\Str::limit($cleanDescription, 115)
                                : $tr['no_description'] }}
                        </p>

                        <div class="expiry-info {{ $isExpired ? 'expired' : '' }}">
                            <span>{{ $tr['active_until'] }}</span>
                            <strong>
                                {{ $expiresAt
                                    ? \Carbon\Carbon::parse($expiresAt)->format('M d, Y')
                                    : $tr['not_available'] }}
                            </strong>
                        </div>

                        <div class="action-row">
                            @if($isExpired)
                                <a
                                    href="{{ route('products.renew', ['product' => $product->id]) }}"
                                    class="renew-btn"
                                >
                                    💳 {{ $tr['renew'] }}
                                </a>
                            @else
                                <a
                                    href="{{ route('product.edit', $product->id) }}"
                                    class="edit-btn"
                                >
                                    ✏️ {{ $tr['edit'] }}
                                </a>
                            @endif

                            @if(\Illuminate\Support\Facades\Route::has('product.show'))
                                <a
                                    href="{{ route('single_product', ['id' => $product->id]) }}"
                                    class="view-btn"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                >
                                    👁 {{ $tr['view_listing'] }}
                                </a>    
                            @endif

                            <form
                                method="POST"
                                action="{{ route('product.destroy', $product->id) }}"
                                onsubmit="return confirm(@js($tr['confirm']))"
                            >
                                @csrf
                                @method('DELETE')

                                <button type="submit" class="delete-btn" title="{{ $tr['delete'] }}">
                                    🗑
                                </button>
                            </form>
                        </div>
                    </div>
                </article>
            @empty
                <div class="empty-box">
                    <div class="empty-icon">📦</div>
                    <h3>{{ $tr['empty'] }}</h3>
                    <p>{{ $tr['empty_text'] }}</p>
                    <a href="{{ route('product.create') }}">
                        {{ $tr['add_btn'] }}
                    </a>
                </div>
            @endforelse
        </div>
    </section>
</div>

<style>
    /* ============================================================
   FIX HORIZONTAL SCROLL
   ============================================================ */

html,
body {
    max-width: 100%;
    overflow-x: hidden !important;
}

.dashboard-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.dashboard-wrapper *,
.dashboard-wrapper *::before,
.dashboard-wrapper *::after {
    box-sizing: border-box;
}


/* Prevent grid children from forcing the page wider */

.stats-grid,
.analytics-grid,
.products-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.stat-card,
.analytics-panel,
.products-panel,
.donut-card,
.bars-card,
.product-card {
    min-width: 0;
    max-width: 100%;
}


/* Analytics */

.analytics-header {
    min-width: 0;
}

.analytics-header > div {
    min-width: 0;
}

.bars-card {
    overflow: hidden;
}

.performance-list,
.performance-row,
.performance-title {
    min-width: 0;
    max-width: 100%;
}

.performance-title strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Product content */

.product-heading {
    min-width: 0;
}

.product-heading > div {
    min-width: 0;
}

.product-heading h3 {
    max-width: 100%;
    overflow-wrap: anywhere;
}


/* Buttons */

.hero-actions {
    max-width: 100%;
}

.hero-email-button,
.hero-add-button,
.analytics-email-button,
.panel-add-button {
    max-width: 100%;
}


/* IMPORTANT FOR DASHBOARD INSIDE SIDEBAR LAYOUT */

main,
.main-content,
.content-wrapper,
.dashboard-content {
    min-width: 0 !important;
    max-width: 100% !important;
}


/* TABLET */

@media (max-width: 1350px) {

    .stats-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


/* MOBILE */

@media (max-width: 900px) {

    .analytics-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-hero {
        width: 100%;
    }

}


/* VERY SMALL */

@media (max-width: 650px) {

    .stats-grid,
    .products-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-wrapper {
        padding-left: 0;
        padding-right: 0;
    }

}
    *{box-sizing:border-box}
    :root{--ink:#07111f;--muted:#64748b;--primary:#5b5cf0;--primary2:#7c3aed;--border:rgba(148,163,184,.22);--shadow:0 22px 62px rgba(15,23,42,.10);--hover:0 34px 82px rgba(15,23,42,.16)}
    .dashboard-wrapper{position:relative;isolation:isolate;width:100%;max-width:1500px;margin:0 auto;padding-bottom:50px}.dashboard-wrapper:before,.dashboard-wrapper:after{position:absolute;z-index:-2;width:460px;height:460px;border-radius:50%;content:"";filter:blur(95px);pointer-events:none}.dashboard-wrapper:before{top:-120px;right:-130px;background:rgba(99,102,241,.10)}.dashboard-wrapper:after{top:520px;left:-180px;background:rgba(236,72,153,.07)}
    .success-alert{margin-bottom:18px;padding:15px 18px;border-radius:16px;background:#dcfce7;color:#166534;font-weight:900}
    .dashboard-hero{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:220px;margin-bottom:26px;padding:38px;border:1px solid rgba(255,255,255,.13);border-radius:34px;background:radial-gradient(circle at 12% 15%,rgba(99,102,241,.42),transparent 30%),radial-gradient(circle at 87% 82%,rgba(236,72,153,.27),transparent 28%),linear-gradient(135deg,#08111f,#1e1b4b 54%,#4f46e5);color:white;box-shadow:0 28px 78px rgba(30,27,75,.28),inset 0 1px 0 rgba(255,255,255,.1);animation:dashIn .75s cubic-bezier(.2,.8,.2,1) both}.dashboard-hero:before{position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:38px 38px;content:"";mask-image:linear-gradient(to right,#000,rgba(0,0,0,.28));pointer-events:none}.dashboard-hero>*{position:relative;z-index:2}.hero-badge,.panel-kicker{display:inline-flex;padding:7px 13px;border-radius:999px;font-size:11px;font-weight:950;letter-spacing:.08em}.hero-badge{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.10);color:#e0e7ff;backdrop-filter:blur(12px)}.dashboard-hero h1{margin:15px 0 8px;font-size:clamp(38px,5vw,58px);font-weight:950;letter-spacing:-.055em}.dashboard-hero p{max-width:670px;margin:0;color:#c7d2fe;font-size:15px;font-weight:650;line-height:1.7}.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.hero-actions form{margin:0}.hero-add-button,.hero-email-button,.analytics-email-button,.panel-add-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 21px;border:0;border-radius:16px;text-decoration:none;font:inherit;font-size:13px;font-weight:950;white-space:nowrap;cursor:pointer;transition:.23s}.hero-add-button{background:white;color:#111827;box-shadow:0 18px 42px rgba(2,6,23,.25)}.hero-email-button{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.11);color:white;backdrop-filter:blur(14px)}.disabled{opacity:.56!important;cursor:not-allowed!important}.hero-add-button:hover,.hero-email-button:hover,.panel-add-button:hover,.analytics-email-button:hover{transform:translateY(-3px)}
    .stats-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;margin-bottom:26px}.stat-card{position:relative;overflow:hidden;display:flex;align-items:center;gap:15px;min-width:0;padding:21px;border:1px solid rgba(226,232,240,.9);border-radius:24px;background:rgba(255,255,255,.86);box-shadow:0 18px 46px rgba(15,23,42,.07);backdrop-filter:blur(12px);transition:.25s}.stat-card:hover{border-color:rgba(99,102,241,.22);transform:translateY(-5px);box-shadow:var(--hover)}.stat-icon{display:flex;align-items:center;justify-content:center;flex:0 0 52px;width:52px;height:52px;border-radius:18px;font-size:22px;font-weight:950}.stat-icon.blue{background:#dbeafe;color:#1d4ed8}.stat-icon.green{background:#dcfce7;color:#15803d}.stat-icon.red{background:#fee2e2;color:#b91c1c}.stat-icon.purple{background:#ede9fe;color:#6d28d9}.stat-icon.cyan{background:#cffafe;color:#0e7490}.stat-icon.amber{background:#fef3c7;color:#b45309}.stat-card p{margin:0;color:var(--muted);font-size:12px;font-weight:900}.stat-card h2{margin:5px 0 0;color:var(--ink);font-size:27px;font-weight:950;overflow-wrap:anywhere}
    .analytics-panel,.products-panel{position:relative;overflow:hidden;margin-bottom:26px;padding:28px;border:1px solid rgba(226,232,240,.9);border-radius:32px;background:radial-gradient(circle at top right,rgba(99,102,241,.045),transparent 35%),rgba(255,255,255,.9);box-shadow:var(--shadow);backdrop-filter:blur(14px)}.analytics-header,.panel-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:23px;border-bottom:1px solid #e2e8f0}.analytics-header form{margin:0}.panel-kicker{background:#eef2ff;color:var(--primary)}.analytics-header h2,.panel-header h2{margin:10px 0 5px;color:var(--ink);font-size:30px;font-weight:950;letter-spacing:-.035em}.analytics-header p,.panel-header p{margin:0;color:var(--muted);font-weight:650;line-height:1.55}.analytics-email-button,.panel-add-button{background:#0f172a;color:white;box-shadow:0 12px 28px rgba(15,23,42,.16)}.analytics-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:22px;margin-top:25px}.donut-card,.bars-card{padding:24px;border:1px solid #e2e8f0;border-radius:26px;background:white;box-shadow:0 15px 38px rgba(15,23,42,.055)}.donut-card{display:flex;align-items:center;gap:22px}.donut-chart{--size:132px;width:var(--size);height:var(--size);flex:0 0 var(--size);display:grid;place-items:center;border-radius:50%;background:conic-gradient(var(--primary) calc(var(--active)*1%),#e2e8f0 0);box-shadow:inset 0 0 0 12px white,0 16px 36px rgba(79,70,229,.16)}.donut-chart span{display:grid;place-items:center;width:90px;height:90px;border-radius:50%;background:white;color:var(--primary);font-size:24px;font-weight:950}.donut-card h3,.bars-card h3{margin:0;color:var(--ink);font-size:20px;font-weight:950}.donut-card p{margin:8px 0 0;color:var(--muted);font-size:13px;font-weight:700;line-height:1.6}.bars-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.bars-header span{display:inline-flex;padding:8px 11px;border-radius:999px;background:#eef2ff;color:#4f46e5;font-size:11px;font-weight:950}.performance-list{display:grid;gap:15px}.performance-title{display:flex;justify-content:space-between;gap:14px;margin-bottom:7px;color:var(--ink);font-size:12px}.performance-title strong{overflow:hidden;min-width:0;text-overflow:ellipsis;white-space:nowrap;font-weight:900}.performance-title span{flex:0 0 auto;color:var(--muted);font-weight:850}.performance-bar{overflow:hidden;height:11px;border-radius:999px;background:#eef2ff}.performance-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4f46e5,#7c3aed,#ec4899);box-shadow:0 5px 18px rgba(79,70,229,.22)}.performance-empty{padding:18px;border-radius:18px;background:#f8fafc;color:var(--muted);text-align:center;font-weight:800}
    .products-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:26px}.product-card{position:relative;overflow:hidden;min-width:0;border:1px solid #e2e8f0;border-radius:26px;background:white;box-shadow:0 16px 42px rgba(15,23,42,.06);transition:.28s}.product-card:hover{border-color:rgba(99,102,241,.24);transform:translateY(-7px);box-shadow:var(--hover)}.expired-card{border-color:#fecaca}.product-image{position:relative;overflow:hidden;height:250px;background:#f1f5f9}.product-image img{display:block;width:100%;height:100%;object-fit:cover;transition:.45s}.product-card:hover .product-image img{transform:scale(1.06)}.image-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(15,23,42,.05),transparent 55%,rgba(15,23,42,.32));pointer-events:none}.no-image{display:flex;align-items:center;justify-content:center;height:100%;color:#94a3b8;font-size:48px}.timer-badge,.status-badge{position:absolute;z-index:3;top:13px;display:inline-flex;align-items:center;padding:8px 12px;border:1px solid rgba(255,255,255,.45);border-radius:999px;font-size:11px;font-weight:950;box-shadow:0 8px 20px rgba(15,23,42,.10);backdrop-filter:blur(10px)}.timer-badge{left:13px;background:rgba(238,242,255,.94);color:var(--primary)}.timer-badge.danger{background:rgba(254,226,226,.96);color:#b91c1c}.status-badge{right:13px}.status-badge.available{background:rgba(220,252,231,.96);color:#15803d}.status-badge.sold{background:rgba(254,226,226,.96);color:#b91c1c}.status-badge.expired{background:rgba(15,23,42,.88);color:white}.product-body{padding:20px}.product-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.category-label{display:inline-block;margin-bottom:7px;color:var(--primary);font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.06em}.product-heading h3{margin:0;color:var(--ink);font-size:19px;font-weight:950;line-height:1.3;overflow-wrap:anywhere}.product-price{flex:0 0 auto;color:transparent;background:linear-gradient(120deg,#4f46e5,#7c3aed);-webkit-background-clip:text;background-clip:text;font-size:21px;font-weight:950}.product-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:13px}.product-meta span{display:inline-flex;padding:7px 10px;border-radius:999px;background:#f8fafc;color:#475569;font-size:11px;font-weight:850}.description{min-height:46px;margin:14px 0 0;color:var(--muted);font-size:13px;font-weight:650;line-height:1.65}.expiry-info{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:15px;padding:11px 12px;border:1px solid #dbeafe;border-radius:14px;background:#eff6ff;color:#1e40af;font-size:11px;font-weight:850}.expiry-info.expired{border-color:#fecaca;background:#fef2f2;color:#b91c1c}.action-row{display:flex;align-items:stretch;gap:9px;margin-top:17px}.action-row form{display:flex;margin:0}.edit-btn,.renew-btn,.view-btn,.delete-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 14px;border:0;border-radius:14px;text-decoration:none;font:inherit;font-size:12px;font-weight:950;cursor:pointer;transition:.2s}.edit-btn{flex:1;background:#0f172a;color:white;box-shadow:0 10px 24px rgba(15,23,42,.14)}.renew-btn{flex:1;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:white;box-shadow:0 10px 22px rgba(79,70,229,.22)}.view-btn{background:#eef2ff;color:var(--primary)}.delete-btn{width:44px;padding:0;background:#fee2e2;color:#dc2626}.edit-btn:hover,.renew-btn:hover,.view-btn:hover,.delete-btn:hover{transform:translateY(-2px)}.empty-box{grid-column:1/-1;padding:65px 20px;text-align:center}.empty-icon{font-size:55px}.empty-box h3{margin:15px 0 8px;color:var(--ink);font-size:29px;font-weight:950}.empty-box p{margin:0;color:var(--muted);font-weight:650}.empty-box a{display:inline-flex;margin-top:18px;padding:13px 20px;border-radius:15px;background:var(--primary);color:white;text-decoration:none;font-weight:950}@keyframes dashIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
    @media(max-width:1350px){.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:1200px){.products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.analytics-grid{grid-template-columns:1fr}}@media(max-width:900px){.dashboard-hero,.analytics-header,.panel-header{align-items:stretch;flex-direction:column}.hero-actions,.hero-add-button,.hero-email-button,.analytics-email-button,.panel-add-button,.analytics-header form{width:100%}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.dashboard-hero{padding:26px 20px;border-radius:26px}.dashboard-hero h1{font-size:40px}.stats-grid,.products-grid{grid-template-columns:1fr}.analytics-panel,.products-panel{padding:17px;border-radius:24px}.donut-card{align-items:flex-start;flex-direction:column}.product-image{height:295px}.product-heading{flex-direction:column}.action-row{flex-wrap:wrap}.edit-btn,.renew-btn{flex-basis:100%}.view-btn{flex:1}}
</style>
@endsection