From 34eec8b069c289b48a4c9123db9d09e194064901 Mon Sep 17 00:00:00 2001
From: DariusIII <dkrisan@gmail.com>
Date: Fri, 6 Mar 2026 15:41:54 +0100
Subject: [PATCH] Improve the looks of movie page

---
 resources/css/csp-safe.css                    | 62 +++++++++++++++++++
 resources/views/details/index.blade.php       | 19 +++---
 .../movies/partials/movie-card.blade.php      | 16 ++---
 resources/views/movies/trending.blade.php     | 10 +--
 .../views/movies/viewmoviefull.blade.php      | 10 +--
 resources/views/series/viewseries.blade.php   | 28 ++++-----
 6 files changed, 103 insertions(+), 42 deletions(-)

diff --git a/resources/css/csp-safe.css b/resources/css/csp-safe.css
index b41accb76..af37d7478 100644
--- a/resources/css/csp-safe.css
+++ b/resources/css/csp-safe.css
@@ -947,3 +947,65 @@ code.api-token::-webkit-scrollbar-thumb:hover {
     padding: 0;
 }
 
+/* ------------------------------------------------------------------ */
+/* Detail pages: shared card and image shadows                        */
+/* ------------------------------------------------------------------ */
+
+.release-detail-page {
+    @apply shadow-md;
+}
+
+.release-detail-page .surface-panel-alt,
+.release-detail-page .detail-password-card,
+.release-detail-page .detail-file-list,
+.release-detail-page .detail-info-sidebar,
+.release-detail-page .detail-empty-comments {
+    @apply shadow-sm;
+}
+
+.release-detail-page .detail-comment-card {
+    @apply shadow-sm hover:shadow-md transition-shadow duration-300;
+}
+
+.release-detail-page .detail-cover-image {
+    @apply rounded-xl shadow-xl;
+}
+
+.release-detail-page .detail-gallery-image {
+    @apply shadow-md hover:shadow-lg transition-shadow duration-300;
+}
+
+.movie-detail-page {
+    @apply shadow-md;
+}
+
+.movie-detail-page .movie-detail-poster {
+    @apply rounded-xl shadow-xl;
+}
+
+.movie-detail-page .movie-detail-trailer {
+    @apply overflow-hidden rounded-xl shadow-lg;
+}
+
+.movie-detail-page .movie-release-card {
+    @apply shadow-sm hover:shadow-md transition-shadow duration-300;
+}
+
+.series-detail-page {
+    @apply shadow-md;
+}
+
+.series-detail-page .series-main-card,
+.series-detail-page .series-episodes-card {
+    @apply shadow-md;
+}
+
+.series-detail-page .series-stat-card,
+.series-detail-page .series-episode-card {
+    @apply shadow-sm hover:shadow-md transition-shadow duration-300;
+}
+
+.series-detail-page .series-detail-poster {
+    @apply rounded-xl shadow-xl transition-shadow duration-300;
+}
+
diff --git a/resources/views/details/index.blade.php b/resources/views/details/index.blade.php
index f96aeab0f..8aa30ace5 100644
--- a/resources/views/details/index.blade.php
+++ b/resources/views/details/index.blade.php
@@ -5,7 +5,7 @@
 @endpush
 
 @section('content')
-<div class="surface-panel rounded-xl shadow-sm p-6">
+<div class="release-detail-page surface-panel rounded-xl shadow-sm p-6">
     <div class="mb-6">
         <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Release Details</h1>
         <nav class="text-sm text-gray-600 dark:text-gray-400">
@@ -25,8 +25,7 @@
                     <div class="shrink-0">
                         <img src="{{ getReleaseCover($release) }}"
                              alt="{{ $release->searchname }}"
-                             class="w-48 h-72 object-cover rounded-lg shadow-md max-w-[192px] max-h-[288px]"
-                             class="rounded-lg shadow-lg object-cover w-3xl h-288"
+                             class="detail-cover-image w-48 h-72 object-cover max-w-[192px] max-h-[288px]"
                              data-fallback-src="{{ asset('assets/images/no-cover.png') }}">
                     </div>
 
@@ -100,7 +99,7 @@
                                 <div class="block cursor-pointer image-modal-trigger" data-image-url="{{ url('/covers/preview/' . $release->guid . '_thumb.jpg') }}" data-image-title="Preview Image">
                                     <img src="{{ url('/covers/preview/' . $release->guid . '_thumb.jpg') }}"
                                          alt="Preview"
-                                         class="w-full h-auto rounded-lg shadow-md hover:shadow-lg transition"
+                                         class="detail-gallery-image w-full h-auto rounded-lg"
                                          loading="lazy">
                                 </div>
                                 <p class="text-xs text-gray-500 mt-1 text-center">Preview</p>
@@ -113,7 +112,7 @@
                                 <div class="block cursor-pointer image-modal-trigger" data-image-url="{{ url('/covers/sample/' . $release->guid . '_thumb.jpg') }}" data-image-title="Sample Image">
                                     <img src="{{ url('/covers/sample/' . $release->guid . '_thumb.jpg') }}"
                                          alt="Sample"
-                                         class="w-full h-auto rounded-lg shadow-md hover:shadow-lg transition"
+                                         class="detail-gallery-image w-full h-auto rounded-lg"
                                          loading="lazy">
                                 </div>
                                 <p class="text-xs text-gray-500 mt-1 text-center">Sample</p>
@@ -679,7 +678,7 @@
 
             <!-- Password Information -->
             @if(isset($release->passwordstatus) && $release->passwordstatus > 0)
-                <div class="bg-linear-to-r from-red-50 to-orange-50 dark:from-red-900 dark:to-orange-900 rounded-lg p-6 border border-red-100 dark:border-red-800">
+                <div class="detail-password-card bg-linear-to-r from-red-50 to-orange-50 dark:from-red-900 dark:to-orange-900 rounded-lg p-6 border border-red-100 dark:border-red-800">
                     <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
                         <i class="fas fa-lock mr-2 text-red-600 dark:text-red-400"></i> Password Protected Release
                     </h3>
@@ -918,7 +917,7 @@
             @if(isset($files) && count($files) > 0)
                 <div>
                     <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">Files ({{ count($files) }})</h3>
-                    <div class="surface-panel-alt rounded-lg overflow-hidden border">
+                    <div class="detail-file-list surface-panel-alt rounded-lg overflow-hidden border">
                         <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                             <thead class="surface-panel-alt">
                                 <tr>
@@ -1007,7 +1006,7 @@
                 @if(isset($comments) && count($comments) > 0)
                     <div class="space-y-4">
                         @foreach($comments as $comment)
-                            <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 transition">
+                            <div class="detail-comment-card bg-gray-50 dark:bg-gray-900 rounded-lg p-4 border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 transition">
                                 <div class="flex items-start justify-between mb-3">
                                     <div class="flex items-center">
                                         <div class="w-10 h-10 bg-primary-600 dark:bg-primary-700 rounded-full flex items-center justify-center text-white font-bold mr-3 shadow-sm">
@@ -1027,7 +1026,7 @@
                         @endforeach
                     </div>
                 @else
-                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-8 border border-gray-200 dark:border-gray-700 text-center">
+                    <div class="detail-empty-comments bg-gray-50 dark:bg-gray-900 rounded-lg p-8 border border-gray-200 dark:border-gray-700 text-center">
                         <i class="fas fa-comments text-4xl text-gray-400 dark:text-gray-600 mb-3"></i>
                         <p class="text-gray-500 dark:text-gray-400">No comments yet. Be the first to comment!</p>
                     </div>
@@ -1037,7 +1036,7 @@
 
         <!-- Sidebar -->
         <div class="lg:col-span-1">
-            <div class="surface-panel-alt rounded-lg p-4 sticky top-4 border">
+            <div class="detail-info-sidebar surface-panel-alt rounded-lg p-4 sticky top-4 border">
                 <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Information</h3>
                 <dl class="space-y-3">
                     <div>
diff --git a/resources/views/movies/partials/movie-card.blade.php b/resources/views/movies/partials/movie-card.blade.php
index 3e1b8bed0..b92a73f2e 100644
--- a/resources/views/movies/partials/movie-card.blade.php
+++ b/resources/views/movies/partials/movie-card.blade.php
@@ -14,19 +14,19 @@
     $guid = !empty($releases) ? $releases[0]->guid : null;
 @endphp
 
-<div class="surface-panel border rounded-xl overflow-hidden hover:shadow-xl transition-shadow duration-300">
+<div class="surface-panel border rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
     <div class="flex flex-row">
         {{-- Movie Poster --}}
-        <div class="shrink-0">
+        <div class="shrink-0 p-4">
             @if($guid)
                 <a href="{{ url('/details/' . $guid) }}" class="block">
                     @if(isset($result->cover) && $result->cover)
                         <img src="{{ $result->cover }}"
                              alt="{{ $result->title }}"
-                             class="object-cover movie-cover"
+                             class="object-cover movie-cover rounded-lg shadow-lg"
                              loading="lazy">
                     @else
-                        <div class="bg-gray-200 dark:bg-gray-700 flex items-center justify-center movie-cover">
+                        <div class="bg-gray-200 dark:bg-gray-700 flex items-center justify-center movie-cover rounded-lg shadow-lg">
                             <i class="fas fa-film text-gray-400 text-3xl"></i>
                         </div>
                     @endif
@@ -35,10 +35,10 @@
                 @if(isset($result->cover) && $result->cover)
                     <img src="{{ $result->cover }}"
                          alt="{{ $result->title }}"
-                         class="object-cover movie-cover"
+                         class="object-cover movie-cover rounded-lg shadow-lg"
                          loading="lazy">
                 @else
-                    <div class="bg-gray-200 dark:bg-gray-700 flex items-center justify-center movie-cover">
+                    <div class="bg-gray-200 dark:bg-gray-700 flex items-center justify-center movie-cover rounded-lg shadow-lg">
                         <i class="fas fa-film text-gray-400 text-3xl"></i>
                     </div>
                 @endif
@@ -46,7 +46,7 @@
         </div>
 
         {{-- Movie Details --}}
-        <div class="flex-1 p-4 min-w-0">
+        <div class="flex-1 py-4 pr-4 min-w-0">
             {{-- Title --}}
             <div class="flex justify-between items-start mb-2">
                 <div class="flex-1 min-w-0">
@@ -138,7 +138,7 @@
                     <div class="space-y-3">
                         @foreach($releases as $index => $release)
                             @if(($release->searchname ?? null) && ($release->guid ?? null))
-                                <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-3 border border-gray-200 dark:border-gray-700">
+                                <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-3 border border-gray-200 dark:border-gray-700 shadow-sm">
                                     <div class="release-card-container">
                                         <div class="release-info-wrapper">
                                             {{-- Release Name --}}
diff --git a/resources/views/movies/trending.blade.php b/resources/views/movies/trending.blade.php
index 66d87ccca..75ace6611 100644
--- a/resources/views/movies/trending.blade.php
+++ b/resources/views/movies/trending.blade.php
@@ -35,7 +35,7 @@
         <div class="px-6 py-6">
             <div class="grid grid-cols-1 gap-6">
                 @foreach($trendingMovies as $index => $movie)
-                    <div class="surface-panel border rounded-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
+                    <div class="surface-panel relative border rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300">
                         <div class="flex flex-col md:flex-row">
                             <!-- Rank Badge -->
                             <div class="absolute top-4 left-4 z-10">
@@ -46,12 +46,12 @@
                             </div>
 
                             <!-- Movie Poster -->
-                            <div class="shrink-0 relative">
+                            <div class="shrink-0 relative p-4">
                                 <a href="{{ route('movie.view', ['imdbid' => $movie->imdbid]) }}" class="block">
                                     @if($movie->cover)
-                                        <img src="{{ $movie->cover }}" alt="{{ $movie->title }}" class="w-full md:w-64 h-96 object-cover">
+                                        <img src="{{ $movie->cover }}" alt="{{ $movie->title }}" class="w-full md:w-64 h-96 object-cover rounded-xl shadow-xl">
                                     @else
-                                        <div class="w-full md:w-64 h-96 bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
+                                        <div class="w-full md:w-64 h-96 bg-gray-200 dark:bg-gray-700 flex items-center justify-center rounded-xl shadow-xl">
                                             <i class="fas fa-film text-gray-400 text-5xl"></i>
                                         </div>
                                     @endif
@@ -63,7 +63,7 @@
                             </div>
 
                             <!-- Movie Details -->
-                            <div class="flex-1 p-6 ml-0 md:ml-4">
+                            <div class="flex-1 py-6 pr-6 min-w-0">
                                 <div class="flex flex-col h-full">
                                     <!-- Title and Info -->
                                     <div class="flex-1">
diff --git a/resources/views/movies/viewmoviefull.blade.php b/resources/views/movies/viewmoviefull.blade.php
index 4f2451121..ba669d027 100644
--- a/resources/views/movies/viewmoviefull.blade.php
+++ b/resources/views/movies/viewmoviefull.blade.php
@@ -1,7 +1,7 @@
 @extends('layouts.main')
 
 @section('content')
-<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm">
+<div class="movie-detail-page bg-white dark:bg-gray-800 rounded-xl shadow-sm">
     <x-breadcrumb :items="[
         ['label' => 'Home', 'url' => url($site['home_link'] ?? '/'), 'icon' => 'fas fa-home'],
         ['label' => 'Movies', 'url' => route('Movies')],
@@ -14,9 +14,9 @@
                 <!-- Movie Poster -->
                 <div class="lg:col-span-1">
                     @if(!empty($movie['cover'] ?? null))
-                        <img src="{{ $movie['cover'] }}" alt="{{ $movie['title'] ?? 'Movie' }}" class="w-full rounded-lg shadow-lg">
+                        <img src="{{ $movie['cover'] }}" alt="{{ $movie['title'] ?? 'Movie' }}" class="movie-detail-poster w-full rounded-lg">
                     @else
-                        <div class="w-full h-96 bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
+                        <div class="movie-detail-poster w-full h-96 bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
                             <i class="fas fa-film text-gray-400 text-6xl"></i>
                         </div>
                     @endif
@@ -115,7 +115,7 @@
                     @if(!empty($movie['trailer'] ?? null))
                         <div class="mb-6">
                             <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Trailer</h2>
-                            <div class="aspect-video">
+                            <div class="movie-detail-trailer aspect-video">
                                 {!! $movie['trailer'] !!}
                             </div>
                         </div>
@@ -180,7 +180,7 @@
 
                     <div class="space-y-3" id="releases-container">
                         @foreach($releases as $release)
-                            <div class="release-item bg-gray-50 dark:bg-gray-900 rounded-lg p-4 border border-gray-200 dark:border-gray-700 hover:shadow-md transition" data-release-name="{{ strtolower($release->searchname) }}">
+                            <div class="movie-release-card release-item bg-gray-50 dark:bg-gray-900 rounded-lg p-4 border border-gray-200 dark:border-gray-700" data-release-name="{{ strtolower($release->searchname) }}">
                                 <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-3">
                                     <div class="flex-1 min-w-0">
                                         <a href="{{ url('/details/' . $release->guid) }}" class="text-base text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:text-blue-400 font-medium block truncate" title="{{ $release->searchname }}">
diff --git a/resources/views/series/viewseries.blade.php b/resources/views/series/viewseries.blade.php
index f5387bd28..40de36f73 100644
--- a/resources/views/series/viewseries.blade.php
+++ b/resources/views/series/viewseries.blade.php
@@ -1,7 +1,7 @@
 @extends('layouts.main')
 
 @section('content')
-<div class="surface-panel rounded-xl shadow-sm">
+<div class="series-detail-page surface-panel rounded-xl shadow-sm">
     <!-- Breadcrumb -->
     <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
         <nav aria-label="breadcrumb">
@@ -22,7 +22,7 @@
             </div>
         @else
             <!-- Series Info Card -->
-            <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm mb-4">
+            <div class="series-main-card bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm mb-4">
                 <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600">
                     <h5 class="text-xl font-bold text-gray-800 dark:text-white">
                         <i class="fa fa-tv mr-2 text-indigo-600 dark:text-indigo-400"></i>{{ $seriestitles ?? '' }}
@@ -35,31 +35,31 @@
                     <!-- Series Stats -->
                     <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">
                         @if(!empty($show['started']))
-                            <div class="bg-linear-to-br from-blue-50 to-blue-100 rounded-lg p-4 border border-blue-200">
+                            <div class="series-stat-card bg-linear-to-br from-blue-50 to-blue-100 rounded-lg p-4 border border-blue-200">
                                 <div class="text-xs font-semibold text-blue-600 dark:text-blue-400 uppercase mb-1">Series Started</div>
                                 <div class="text-lg font-bold text-blue-900">
                                     {{ \Carbon\Carbon::parse($show['started'])->format('M d, Y') }}
                                 </div>
                             </div>
                         @endif
-                        <div class="bg-linear-to-br from-purple-50 to-purple-100 rounded-lg p-4 border border-purple-200">
+                        <div class="series-stat-card bg-linear-to-br from-purple-50 to-purple-100 rounded-lg p-4 border border-purple-200">
                             <div class="text-xs font-semibold text-purple-600 uppercase mb-1">Total Seasons Aired</div>
                             <div class="text-lg font-bold text-purple-900">{{ $totalSeasonsAired ?? 0 }}</div>
                         </div>
-                        <div class="bg-linear-to-br from-pink-50 to-pink-100 rounded-lg p-4 border border-pink-200">
+                        <div class="series-stat-card bg-linear-to-br from-pink-50 to-pink-100 rounded-lg p-4 border border-pink-200">
                             <div class="text-xs font-semibold text-pink-600 uppercase mb-1">Seasons Available</div>
                             <div class="text-lg font-bold text-pink-900">{{ $totalSeasonsAvailable ?? 0 }}</div>
                         </div>
-                        <div class="bg-linear-to-br from-indigo-50 to-indigo-100 rounded-lg p-4 border border-indigo-200">
+                        <div class="series-stat-card bg-linear-to-br from-indigo-50 to-indigo-100 rounded-lg p-4 border border-indigo-200">
                             <div class="text-xs font-semibold text-indigo-600 uppercase mb-1">Total Episodes Aired</div>
                             <div class="text-lg font-bold text-indigo-900">{{ $totalEpisodesAired ?? 0 }}</div>
                         </div>
-                        <div class="bg-linear-to-br from-violet-50 to-violet-100 rounded-lg p-4 border border-violet-200">
+                        <div class="series-stat-card bg-linear-to-br from-violet-50 to-violet-100 rounded-lg p-4 border border-violet-200">
                             <div class="text-xs font-semibold text-violet-600 uppercase mb-1">Episodes Available</div>
                             <div class="text-lg font-bold text-violet-900">{{ $episodeCount ?? 0 }}</div>
                         </div>
                         @if(!empty($firstEpisodeAired))
-                            <div class="bg-linear-to-br from-teal-50 to-teal-100 rounded-lg p-4 border border-teal-200">
+                            <div class="series-stat-card bg-linear-to-br from-teal-50 to-teal-100 rounded-lg p-4 border border-teal-200">
                                 <div class="text-xs font-semibold text-teal-600 uppercase mb-1">First Episode Aired</div>
                                 <div class="text-sm font-bold text-teal-900">
                                     {{ $firstEpisodeAired->format('M d, Y') }}
@@ -67,7 +67,7 @@
                             </div>
                         @endif
                         @if(!empty($lastEpisodeAired))
-                            <div class="bg-linear-to-br from-orange-50 to-orange-100 rounded-lg p-4 border border-orange-200">
+                            <div class="series-stat-card bg-linear-to-br from-orange-50 to-orange-100 rounded-lg p-4 border border-orange-200">
                                 <div class="text-xs font-semibold text-orange-600 uppercase mb-1">Last Episode Aired</div>
                                 <div class="text-sm font-bold text-orange-900">
                                     {{ $lastEpisodeAired->format('M d, Y') }}
@@ -75,7 +75,7 @@
                             </div>
                         @endif
                         @if(!empty($seriescountry))
-                            <div class="bg-linear-to-br from-green-50 to-green-100 rounded-lg p-4 border border-green-200">
+                            <div class="series-stat-card bg-linear-to-br from-green-50 to-green-100 rounded-lg p-4 border border-green-200">
                                 <div class="text-xs font-semibold text-green-600 uppercase mb-1">Country</div>
                                 <div class="text-lg font-bold text-green-900">{{ strtoupper($seriescountry) }}</div>
                             </div>
@@ -91,7 +91,7 @@
                             <div class="grid grid-cols-1 lg:grid-cols-4 gap-4">
                                 @if(!empty($show['image']) && $show['image'] != 0)
                                     <div class="lg:col-span-1">
-                                        <img class="w-full h-auto rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300"
+                                        <img class="series-detail-poster w-full h-auto rounded-lg"
                                              alt="{{ $seriestitles ?? '' }} Poster"
                                              src="{{ url('/covers/tvshows/' . $show['id'] . '.jpg') }}"/>
                                     </div>
@@ -200,7 +200,7 @@
             <!-- Episodes by Season - Tabbed Interface -->
             @if(!empty($seasons))
                 <form id="nzb_multi_operations_form" method="get" x-data="releaseMultiOps">
-                <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm" x-data="seasonSwitcher">
+                <div class="series-episodes-card bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm" x-data="seasonSwitcher">
                     <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600">
                         <div class="flex items-center justify-between">
                             <h5 class="text-lg font-semibold text-gray-800 dark:text-white">
@@ -259,7 +259,7 @@
                                         </h6>
                                         <div class="space-y-2">
                                             @foreach($releases as $release)
-                                                <div class="flex items-center gap-3 bg-gray-50 dark:bg-gray-900 rounded p-3 hover:bg-gray-100">
+                                                <div class="series-episode-card flex items-center gap-3 bg-gray-50 dark:bg-gray-900 rounded-lg p-3 hover:bg-gray-100 dark:hover:bg-gray-800">
                                                     <div class="shrink-0">
                                                         <input type="checkbox" class="chkRelease rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700" name="release[]" value="{{ $release->guid }}" @change="onCheckboxChange()">
                                                     </div>
@@ -331,7 +331,7 @@
                 </div>
             @endif
             @if(!empty($pagination['per_page']) && $pagination['per_page'] > 0 && ($pagination['total_pages'] ?? 1) > 1)
-                <div class="mt-6 flex items-center justify-between bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+                <div class="series-stat-card mt-6 flex items-center justify-between bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                     <div class="text-sm text-gray-600 dark:text-gray-300">
                         Page {{ $pagination['current_page'] }} of {{ $pagination['total_pages'] }}
                         <span class="ml-2 text-xs text-gray-500">({{ number_format($pagination['total_rows']) }} total releases)</span>