diff --git a/assets/css/custom.css b/assets/css/custom.css
index 3c3c68b..10e624c 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -390,3 +390,282 @@ details summary::-webkit-details-marker { display: none; }
 .table-sm th, .table-sm td {
   padding: 0.5rem 0.75rem !important;
 }
+
+
+/* Dashboard-only bright preview */
+body.theme-preview-sunset {
+  background:
+    radial-gradient(circle at top left, rgba(255, 122, 0, 0.18), transparent 26%),
+    radial-gradient(circle at top right, rgba(0, 209, 178, 0.15), transparent 22%),
+    linear-gradient(180deg, #192132 0%, #111827 45%, #0f1724 100%);
+}
+
+body.theme-preview-sunset #sidebar-wrapper {
+  background:
+    linear-gradient(180deg, rgba(255, 122, 0, 0.16), transparent 22%),
+    linear-gradient(215deg, #1b2433 0%, #111827 100%);
+  border-right: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+body.theme-preview-sunset .sidebar-heading {
+  background: rgba(255, 255, 255, 0.03);
+  border-bottom: 1px solid rgba(255,255,255,0.08);
+  color: #f9fafb;
+}
+
+body.theme-preview-sunset #sidebar-wrapper .text-white,
+body.theme-preview-sunset #sidebar-wrapper .text-white-50,
+body.theme-preview-sunset #sidebar-wrapper .sidebar-heading span,
+body.theme-preview-sunset #sidebar-wrapper .fw-semibold {
+  color: #f9fafb !important;
+}
+
+body.theme-preview-sunset #sidebar-wrapper .list-group-item {
+  color: rgba(249, 250, 251, 0.72);
+}
+
+body.theme-preview-sunset #sidebar-wrapper .list-group-item:hover,
+body.theme-preview-sunset #sidebar-wrapper .list-group-item.active {
+  background: linear-gradient(135deg, rgba(255, 122, 0, 0.18), rgba(0, 209, 178, 0.14));
+  color: #ffffff;
+  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
+}
+
+body.theme-preview-sunset #sidebar-wrapper .list-group-item:hover i,
+body.theme-preview-sunset #sidebar-wrapper .list-group-item.active i {
+  color: #ffd166;
+}
+
+body.theme-preview-sunset .top-navbar {
+  background: rgba(17, 24, 39, 0.82);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
+}
+
+body.theme-preview-sunset .top-navbar h4,
+body.theme-preview-sunset .top-navbar .dropdown-toggle,
+body.theme-preview-sunset .top-navbar .btn {
+  color: #f9fafb;
+}
+
+body.theme-preview-sunset .top-navbar .btn-outline-success,
+body.theme-preview-sunset .top-navbar .btn-outline-primary,
+body.theme-preview-sunset .top-navbar .btn-light {
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
+body.theme-preview-sunset .dashboard-sunset-sample {
+  position: relative;
+  z-index: 1;
+}
+
+body.theme-preview-sunset .dashboard-hero {
+  position: relative;
+  background:
+    radial-gradient(circle at top right, rgba(255, 122, 0, 0.28), transparent 30%),
+    radial-gradient(circle at bottom left, rgba(0, 209, 178, 0.2), transparent 28%),
+    linear-gradient(135deg, rgba(27, 36, 51, 0.98) 0%, rgba(17, 24, 39, 0.98) 100%);
+  color: #f9fafb;
+  border: 1px solid rgba(255, 255, 255, 0.08) !important;
+  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
+}
+
+body.theme-preview-sunset .dashboard-hero::before,
+body.theme-preview-sunset .dashboard-hero::after {
+  content: '';
+  position: absolute;
+  border-radius: 999px;
+  pointer-events: none;
+}
+
+body.theme-preview-sunset .dashboard-hero::before {
+  width: 220px;
+  height: 220px;
+  right: -50px;
+  top: -50px;
+  background: radial-gradient(circle, rgba(255, 122, 0, 0.34), rgba(255, 122, 0, 0));
+}
+
+body.theme-preview-sunset .dashboard-hero::after {
+  width: 240px;
+  height: 240px;
+  left: -70px;
+  bottom: -80px;
+  background: radial-gradient(circle, rgba(0, 209, 178, 0.22), rgba(0, 209, 178, 0));
+}
+
+body.theme-preview-sunset .dashboard-kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.55rem 0.9rem;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 209, 102, 0.22);
+  color: #ffd166;
+  font-size: 0.85rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+body.theme-preview-sunset .dashboard-hero-title {
+  color: #f9fafb;
+  font-size: clamp(2rem, 4vw, 3.2rem);
+  line-height: 1.05;
+  max-width: 13ch;
+}
+
+body.theme-preview-sunset .dashboard-hero-copy {
+  color: rgba(249, 250, 251, 0.74);
+  font-size: 1rem;
+  max-width: 64ch;
+}
+
+body.theme-preview-sunset .dashboard-hero-panel {
+  padding: 1.25rem;
+  border-radius: 1.5rem;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 40px rgba(0, 0, 0, 0.16);
+}
+
+body.theme-preview-sunset .dashboard-chip-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.8rem;
+}
+
+body.theme-preview-sunset .dashboard-chip {
+  display: inline-flex;
+  justify-content: center;
+  padding: 0.75rem 0.9rem;
+  border-radius: 1rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: #111827;
+}
+
+body.theme-preview-sunset .dashboard-chip--orange { background: #ffb36b; }
+body.theme-preview-sunset .dashboard-chip--teal { background: #7ce9d7; }
+body.theme-preview-sunset .dashboard-chip--gold { background: #ffd166; }
+body.theme-preview-sunset .dashboard-chip--rose { background: #ff9aae; }
+
+body.theme-preview-sunset .dashboard-hero-meta {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.9rem;
+}
+
+body.theme-preview-sunset .dashboard-hero-meta small {
+  display: block;
+  color: rgba(249, 250, 251, 0.58);
+  margin-bottom: 0.25rem;
+}
+
+body.theme-preview-sunset .dashboard-hero-meta strong {
+  color: #f9fafb;
+  font-size: 1rem;
+}
+
+body.theme-preview-sunset .dashboard-sunset-sample .card {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(27, 36, 51, 0.94);
+  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
+}
+
+body.theme-preview-sunset .dashboard-sunset-sample .card-header,
+body.theme-preview-sunset .dashboard-sunset-sample .card-body,
+body.theme-preview-sunset .dashboard-sunset-sample .table td,
+body.theme-preview-sunset .dashboard-sunset-sample .table th,
+body.theme-preview-sunset .dashboard-sunset-sample .text-muted,
+body.theme-preview-sunset .dashboard-sunset-sample .small {
+  color: rgba(249, 250, 251, 0.72) !important;
+}
+
+body.theme-preview-sunset .dashboard-sunset-sample .card-header {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+body.theme-preview-sunset .dashboard-sunset-sample .table th {
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(249, 250, 251, 0.64) !important;
+  border-bottom-color: rgba(255, 255, 255, 0.08);
+}
+
+body.theme-preview-sunset .dashboard-sunset-sample .table td {
+  border-bottom-color: rgba(255, 255, 255, 0.06);
+}
+
+body.theme-preview-sunset .dashboard-sunset-sample .table-hover tbody tr:hover {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+body.theme-preview-sunset .dashboard-sunset-sample .dashboard-stat-card {
+  overflow: hidden;
+  position: relative;
+  color: #ffffff;
+}
+
+body.theme-preview-sunset .dashboard-sunset-sample .dashboard-stat-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.03));
+  opacity: 0.92;
+}
+
+body.theme-preview-sunset .dashboard-sunset-sample .dashboard-stat-card > .card-body {
+  position: relative;
+  z-index: 1;
+}
+
+body.theme-preview-sunset .dashboard-sunset-sample .dashboard-stat-card--cyan {
+  background: linear-gradient(135deg, #ff7a00 0%, #ff9d42 100%);
+}
+
+body.theme-preview-sunset .dashboard-sunset-sample .dashboard-stat-card--coral {
+  background: linear-gradient(135deg, #00d1b2 0%, #1ee4c8 100%);
+}
+
+body.theme-preview-sunset .dashboard-sunset-sample .dashboard-stat-card--lime {
+  background: linear-gradient(135deg, #ffd166 0%, #ffdf95 100%);
+  color: #1b2433;
+}
+
+body.theme-preview-sunset .dashboard-sunset-sample .dashboard-stat-card--gold {
+  background: linear-gradient(135deg, #ff4d6d 0%, #ff7f95 100%);
+}
+
+body.theme-preview-sunset .dashboard-sunset-sample .display-6,
+body.theme-preview-sunset .dashboard-sunset-sample h5,
+body.theme-preview-sunset .dashboard-sunset-sample h6 {
+  color: inherit;
+}
+
+body.theme-preview-sunset .dashboard-sunset-sample .btn-primary {
+  background: linear-gradient(135deg, #ff7a00 0%, #ff9440 100%);
+  border: none;
+  box-shadow: 0 14px 28px rgba(255, 122, 0, 0.22);
+}
+
+body.theme-preview-sunset .dashboard-sunset-sample .btn-light {
+  background: rgba(255,255,255,0.08);
+  border-color: rgba(255,255,255,0.12);
+  color: #f9fafb;
+}
+
+body.theme-preview-sunset .dashboard-sunset-sample .badge {
+  border-radius: 999px;
+}
+
+@media (max-width: 991.98px) {
+  body.theme-preview-sunset {
+    background: linear-gradient(180deg, #1b2433 0%, #111827 60%, #0f1724 100%);
+  }
+
+  body.theme-preview-sunset .dashboard-hero-title {
+    max-width: none;
+  }
+}
diff --git a/includes/header.php b/includes/header.php
index c281d73..2a1c9c4 100644
--- a/includes/header.php
+++ b/includes/header.php
@@ -12,6 +12,7 @@ $assetVersion = date('YmdHi');
 
 // Determine if we are on a public page (like login)
 $isPublic = !empty($forcePublic) || !isset($user) || !$user;
+$bodyClasses = trim(($isPublic ? 'auth-body ' : '') . ($bodyClass ?? ''));
 ?>
 <!doctype html>
 <html lang="<?= h(current_lang()) ?>" dir="<?= is_rtl() ? 'rtl' : 'ltr' ?>">
@@ -45,7 +46,7 @@ $isPublic = !empty($forcePublic) || !isset($user) || !$user;
   <link rel="stylesheet" href="assets/css/custom.css?v=<?= h($assetVersion) ?>">
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 </head>
-<body class="<?= $isPublic ? 'auth-body' : '' ?>">
+<body class="<?= h($bodyClasses) ?>">
 
 <?php if ($isPublic): ?>
   <!-- Public Layout for Login -->
diff --git a/index.php b/index.php
index fc10ed6..47d9439 100644
--- a/index.php
+++ b/index.php
@@ -3,6 +3,7 @@ require_once __DIR__ . '/includes/app.php';
 $user = require_auth();
 $pageTitle = tr('لوحة التحكم', 'Dashboard');
 $activeNav = 'dashboard';
+$bodyClass = 'theme-preview-sunset';
 $dbError = null;
 $metrics = ['today_sales' => 0, 'today_revenue' => 0.0, 'pos_count' => 0, 'normal_count' => 0, 'recent' => []];
 $reportMetrics = ['branch_totals' => [], 'payment_totals' => [], 'product_totals' => []];
@@ -48,10 +49,46 @@ require __DIR__ . '/includes/header.php';
   <div class="alert alert-danger mb-4"><i class="bi bi-exclamation-triangle me-2"></i><?= h(tr('تعذر تحميل بيانات قاعدة البيانات حالياً:', 'Database data could not be loaded right now:')) ?> <?= h($dbError) ?></div>
 <?php endif; ?>
 
+<div class="dashboard-sunset-sample">
+  <section class="dashboard-hero card border-0 overflow-hidden mb-4">
+    <div class="card-body p-4 p-lg-5">
+      <div class="row align-items-center g-4">
+        <div class="col-xl-8">
+          <span class="dashboard-kicker">
+            <i class="bi bi-stars"></i>
+            <?= h(tr('معاينة الهوية الرسمية الجديدة', 'Official style preview')) ?>
+          </span>
+          <h1 class="dashboard-hero-title mt-3 mb-3"><?= h(tr('لوحة تحكم بلمسة غروب أكثر تميزاً للإدارة اليومية', 'A more distinctive sunset-style dashboard for daily operations')) ?></h1>
+          <p class="dashboard-hero-copy mb-0"><?= h(tr('هذه ما تزال مجرد معاينة على لوحة التحكم فقط، ولكن الآن باتجاه Sunset Contrast بدرجات برتقالية ودافئة مع لمسات تركواز وذهبية. إذا أعجبك الشكل سأطبّق نفس الهوية على الشريط الجانبي والجداول والنماذج وباقي الصفحات.', 'This is still a dashboard-only preview, but now in the Sunset Contrast direction with warm orange, teal, gold, and rose accents. If you like it, I can extend the same identity to the sidebar, tables, forms, and the rest of the app.')) ?></p>
+        </div>
+        <div class="col-xl-4">
+          <div class="dashboard-hero-panel">
+            <div class="dashboard-chip-grid">
+              <span class="dashboard-chip dashboard-chip--orange">Sunset Orange</span>
+              <span class="dashboard-chip dashboard-chip--teal">Teal</span>
+              <span class="dashboard-chip dashboard-chip--gold">Gold</span>
+              <span class="dashboard-chip dashboard-chip--rose">Rose</span>
+            </div>
+            <div class="dashboard-hero-meta mt-4">
+              <div>
+                <small><?= h(tr('النمط', 'Style')) ?></small>
+                <strong>Sunset Contrast</strong>
+              </div>
+              <div>
+                <small><?= h(tr('النطاق', 'Scope')) ?></small>
+                <strong><?= h(tr('الصفحة الرئيسية فقط', 'Dashboard only')) ?></strong>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
 <!-- Metrics Row -->
 <div class="row g-4 mb-4">
   <div class="col-sm-6 col-xl-3">
-    <div class="card text-white bg-primary h-100" style=" background: linear-gradient(135deg, #0d6efd 0%, #0043a8 100%);">
+    <div class="card dashboard-stat-card dashboard-stat-card--cyan h-100 border-0">
       <div class="card-body d-flex flex-column justify-content-between">
         <div class="d-flex justify-content-between align-items-start mb-3">
           <h6 class="text-white-50 text-uppercase mb-0 fw-bold"><?= h(tr('مبيعات اليوم', 'Today sales')) ?></h6>
@@ -63,7 +100,7 @@ require __DIR__ . '/includes/header.php';
   </div>
   
   <div class="col-sm-6 col-xl-3">
-    <div class="card text-white bg-success h-100" style=" background: linear-gradient(135deg, #198754 0%, #0f5132 100%);">
+    <div class="card dashboard-stat-card dashboard-stat-card--coral h-100 border-0">
       <div class="card-body d-flex flex-column justify-content-between">
         <div class="d-flex justify-content-between align-items-start mb-3">
           <h6 class="text-white-50 text-uppercase mb-0 fw-bold"><?= h(tr('إيراد اليوم', 'Today revenue')) ?></h6>
@@ -75,7 +112,7 @@ require __DIR__ . '/includes/header.php';
   </div>
 
   <div class="col-sm-6 col-xl-3">
-    <div class="card text-white bg-info h-100" style=" background: linear-gradient(135deg, #0dcaf0 0%, #087990 100%);">
+    <div class="card dashboard-stat-card dashboard-stat-card--lime h-100 border-0">
       <div class="card-body d-flex flex-column justify-content-between">
         <div class="d-flex justify-content-between align-items-start mb-3">
           <h6 class="text-white-50 text-uppercase mb-0 fw-bold">POS</h6>
@@ -87,7 +124,7 @@ require __DIR__ . '/includes/header.php';
   </div>
 
   <div class="col-sm-6 col-xl-3">
-    <div class="card text-white bg-warning h-100" style=" background: linear-gradient(135deg, #ffc107 0%, #b38600 100%);">
+    <div class="card dashboard-stat-card dashboard-stat-card--gold h-100 border-0">
       <div class="card-body d-flex flex-column justify-content-between">
         <div class="d-flex justify-content-between align-items-start mb-3">
           <h6 class="text-white-50 text-uppercase mb-0 fw-bold"><?= h(tr('فاتورة', 'Invoice')) ?></h6>
@@ -297,6 +334,8 @@ require __DIR__ . '/includes/header.php';
   </div>
 </div>
 
+</div>
+
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <script>
 document.addEventListener('DOMContentLoaded', function() {
@@ -309,11 +348,11 @@ document.addEventListener('DOMContentLoaded', function() {
             datasets: [{
                 data: <?= json_encode($branchData) ?>,
                 backgroundColor: [
-                    'rgba(13, 110, 253, 0.8)', 
-                    'rgba(25, 135, 84, 0.8)', 
-                    'rgba(13, 202, 240, 0.8)', 
-                    'rgba(255, 193, 7, 0.8)', 
-                    'rgba(220, 53, 69, 0.8)'
+                    'rgba(255, 122, 0, 0.88)', 
+                    'rgba(0, 209, 178, 0.88)', 
+                    'rgba(255, 209, 102, 0.88)', 
+                    'rgba(255, 77, 109, 0.86)', 
+                    'rgba(125, 145, 175, 0.82)'
                 ],
                 borderWidth: 2,
                 borderColor: '#ffffff',
@@ -325,9 +364,9 @@ document.addEventListener('DOMContentLoaded', function() {
             maintainAspectRatio: false,
             cutout: '65%',
             plugins: {
-                legend: { position: 'bottom', labels: { usePointStyle: true, padding: 20 } },
+                legend: { position: 'bottom', labels: { color: '#667085', usePointStyle: true, padding: 20 } },
                 tooltip: { 
-                    backgroundColor: 'rgba(0,0,0,0.8)',
+                    backgroundColor: 'rgba(28, 36, 52, 0.94)',
                     padding: 12,
                     callbacks: {
                         label: function(context) {
@@ -346,8 +385,8 @@ document.addEventListener('DOMContentLoaded', function() {
     
     // Create gradient for bars
     let gradient = productsCtx.createLinearGradient(0, 0, 0, 300);
-    gradient.addColorStop(0, 'rgba(13, 110, 253, 0.9)');
-    gradient.addColorStop(1, 'rgba(13, 110, 253, 0.2)');
+    gradient.addColorStop(0, 'rgba(255, 122, 0, 0.95)');
+    gradient.addColorStop(1, 'rgba(0, 209, 178, 0.2)');
 
     new Chart(productsCtx, {
         type: 'bar',
@@ -357,7 +396,7 @@ document.addEventListener('DOMContentLoaded', function() {
                 label: '<?= h(tr("الكمية المباعة", "Qty Sold")) ?>',
                 data: <?= json_encode($productData) ?>,
                 backgroundColor: gradient,
-                borderColor: '#0d6efd',
+                borderColor: '#FF7A00',
                 borderWidth: 1,
                 borderRadius: 6,
                 barPercentage: 0.6
@@ -369,7 +408,7 @@ document.addEventListener('DOMContentLoaded', function() {
             plugins: {
                 legend: { display: false },
                 tooltip: {
-                    backgroundColor: 'rgba(0,0,0,0.8)',
+                    backgroundColor: 'rgba(28, 36, 52, 0.94)',
                     padding: 12
                 }
             },
@@ -377,10 +416,12 @@ document.addEventListener('DOMContentLoaded', function() {
                 y: { 
                     beginAtZero: true, 
                     ticks: { precision: 0 },
-                    grid: { borderDash: [5, 5], color: '#f0f0f0' }
+                    grid: { borderDash: [5, 5], color: 'rgba(148, 163, 184, 0.14)' },
+                    ticks: { color: '#667085' }
                 },
                 x: {
-                    grid: { display: false }
+                    grid: { display: false },
+                    ticks: { color: '#98A2B3' }
                 }
             }
         }
@@ -391,8 +432,8 @@ document.addEventListener('DOMContentLoaded', function() {
     
     // Create gradient for line chart area
     let gradientMonthly = monthlyCtx.createLinearGradient(0, 0, 0, 350);
-    gradientMonthly.addColorStop(0, 'rgba(25, 135, 84, 0.4)');
-    gradientMonthly.addColorStop(1, 'rgba(25, 135, 84, 0.0)');
+    gradientMonthly.addColorStop(0, 'rgba(255, 209, 102, 0.32)');
+    gradientMonthly.addColorStop(1, 'rgba(255, 122, 0, 0.04)');
 
     new Chart(monthlyCtx, {
         type: 'line',
@@ -402,10 +443,10 @@ document.addEventListener('DOMContentLoaded', function() {
                 label: '<?= h(tr("إجمالي المبيعات", "Total Sales")) ?>',
                 data: <?= json_encode($monthlyData) ?>,
                 backgroundColor: gradientMonthly,
-                borderColor: '#198754',
+                borderColor: '#FFD166',
                 borderWidth: 3,
                 pointBackgroundColor: '#ffffff',
-                pointBorderColor: '#198754',
+                pointBorderColor: '#FF7A00',
                 pointBorderWidth: 2,
                 pointRadius: 4,
                 pointHoverRadius: 6,
@@ -419,7 +460,7 @@ document.addEventListener('DOMContentLoaded', function() {
             plugins: {
                 legend: { display: false },
                 tooltip: {
-                    backgroundColor: 'rgba(0,0,0,0.8)',
+                    backgroundColor: 'rgba(28, 36, 52, 0.94)',
                     padding: 12,
                     callbacks: {
                         label: function(context) {
@@ -432,10 +473,12 @@ document.addEventListener('DOMContentLoaded', function() {
             scales: {
                 y: { 
                     beginAtZero: true, 
-                    grid: { borderDash: [5, 5], color: '#f0f0f0' }
+                    grid: { borderDash: [5, 5], color: 'rgba(148, 163, 184, 0.14)' },
+                    ticks: { color: '#667085' }
                 },
                 x: {
-                    grid: { display: false }
+                    grid: { display: false },
+                    ticks: { color: '#98A2B3' }
                 }
             }
         }