dark mdoe fixes

resources/sass/app.scss

@@ -855,6 +855,110 @@ $fa-font-path:        "/fonts";
             }
         }
     }
+
+    // Show page specific dark mode styles
+    .movie-page {
+        .card-header.bg-white,
+        .bg-white {
+            background-color: #333 !important;
+            color: #e0e0e0;
+        }
+
+        .border {
+            border-color: #444 !important;
+        }
+
+        .border-top-0 {
+            border-top: 0 !important;
+        }
+
+        .rounded-bottom {
+            border-bottom-left-radius: 0.25rem !important;
+            border-bottom-right-radius: 0.25rem !important;
+        }
+
+        // Review cards
+        .review-item {
+            background-color: #2a2a2a;
+            border-color: #444;
+
+            .card-body {
+                color: #e0e0e0;
+            }
+        }
+
+        // Seasons carousel
+        .carousel-control-prev-icon,
+        .carousel-control-next-icon {
+            filter: invert(1);
+        }
+
+        // Movie/show title
+        .movie-title {
+            color: #e0e0e0;
+        }
+
+        // Overview section
+        .overview {
+            h5 {
+                color: #e0e0e0;
+            }
+
+            p {
+                color: #a0a0a0;
+            }
+        }
+
+        // External links buttons
+        .btn-outline-secondary {
+            background-color: transparent;
+            border-color: #444;
+            color: #e0e0e0;
+
+            &:hover {
+                background-color: #444;
+                border-color: #555;
+                color: #fff;
+            }
+        }
+
+        // Watch providers
+        .watch-providers {
+            h6 {
+                color: #a0a0a0 !important;
+            }
+        }
+
+        // Tagline
+        .tagline {
+            color: #a0a0a0 !important;
+        }
+
+        // Livewire components (Similar, Recommended, etc.)
+        div[wire\:id] {
+            background-color: transparent !important;
+
+            .card {
+                background-color: #2a2a2a !important;
+                border-color: #444 !important;
+            }
+
+            .card-body {
+                background-color: #2a2a2a !important;
+                color: #e0e0e0 !important;
+            }
+        }
+
+        // Tab content area
+        .tab-content {
+            background-color: #2a2a2a;
+            border-color: #444 !important;
+        }
+
+        .tab-pane {
+            color: #e0e0e0;
+        }
+    }
 }
 
 body.light-mode{

resources/views/show/show.blade.php

@@ -155,21 +155,43 @@
                     <div class="card-header bg-white">
                         <h5 class="mb-0">Seasons</h5>
                     </div>
-                    <div class="card-body">
+                    <div class="card-body position-relative">
-                        <div class="row">
+                        <div id="seasonsCarousel" class="carousel slide" data-bs-ride="false">
-                            @foreach($seasons as $season)
+                            <div class="carousel-inner">
-                                <div class="col-md-2 mb-3">
+                                @php
-                                    <a href="{{ route('show.season', ['slug' => $show->slug, 'seasonNumber' => $season->season_number]) }}" class="text-decoration-none">
+                                    $chunkedSeasons = $seasons->chunk(6);
-                                        <div class="card h-100 border-0 shadow-sm">
+                                @endphp
-                                            <img src="http://image.tmdb.org/t/p/w342/{{ $season->poster_path }}" alt="{{ $season->name }}" class="card-img-top">
+                                @foreach($chunkedSeasons as $index => $seasonChunk)
-                                            <div class="card-body">
+                                    <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
-                                                <h6 class="card-title">{{ $season->name }}</h6>
+                                        <div class="row">
-                                                <p class="card-text"><small class="text-muted">{{ $season->episode_count }} episodes</small></p>
+                                            @foreach($seasonChunk as $season)
-                                            </div>
+                                                <div class="col-md-2 mb-3">
+                                                    <a href="{{ route('show.season', ['slug' => $show->slug, 'seasonNumber' => $season->season_number]) }}" class="text-decoration-none">
+                                                        <div class="card h-100 border-0 shadow-sm">
+                                                            <img src="http://image.tmdb.org/t/p/w342/{{ $season->poster_path }}" alt="{{ $season->name }}" class="card-img-top">
+                                                            <div class="card-body">
+                                                                <h6 class="card-title">{{ $season->name }}</h6>
+                                                                <p class="card-text"><small class="text-muted">{{ $season->episode_count }} episodes</small></p>
+                                                            </div>
+                                                        </div>
+                                                    </a>
+                                                </div>
+                                            @endforeach
                                         </div>
-                                    </a>
+                                    </div>
-                                </div>
+                                @endforeach
-                            @endforeach
+                            </div>
+
+                            @if($chunkedSeasons->count() > 1)
+                                <button class="carousel-control-prev" type="button" data-bs-target="#seasonsCarousel" data-bs-slide="prev" style="width: 5%; left: -2.5%;">
+                                    <span class="carousel-control-prev-icon bg-dark rounded-circle p-3" aria-hidden="true"></span>
+                                    <span class="visually-hidden">Previous</span>
+                                </button>
+                                <button class="carousel-control-next" type="button" data-bs-target="#seasonsCarousel" data-bs-slide="next" style="width: 5%; right: -2.5%;">
+                                    <span class="carousel-control-next-icon bg-dark rounded-circle p-3" aria-hidden="true"></span>
+                                    <span class="visually-hidden">Next</span>
+                                </button>
+                            @endif
                         </div>
                     </div>
                 </div>