From 676e91fd668a49132426e86a59ea0d97a3316989 Mon Sep 17 00:00:00 2001
From: sky121113 <sky121113@gmail.com>
Date: Mon, 18 May 2026 15:04:31 +0800
Subject: [PATCH] style: optimize flatpickr calendar styling, input dimensions,
 and icon alignment

---
 resources/css/app.css                         | 19 ++++++++++++++++++-
 .../admin/analysis/product-reports.blade.php  | 10 ++++------
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 50017be..ebd0975 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -356,6 +356,23 @@
         color: #cbd5e1 !important;
     }
 
+    /* Standardize Flatpickr Date Range Continuity & Custom Borders */
+    .flatpickr-day.inRange {
+        border-radius: 0 !important;
+    }
+
+    .flatpickr-day.startRange {
+        border-radius: 12px 0 0 12px !important;
+    }
+
+    .flatpickr-day.endRange {
+        border-radius: 0 12px 12px 0 !important;
+    }
+
+    .flatpickr-day.startRange.endRange {
+        border-radius: 12px !important;
+    }
+
     .flatpickr-day.prevMonthDay, 
     .flatpickr-day.nextMonthDay {
         color: #cbd5e1 !important;
@@ -412,7 +429,7 @@
     }
 
     .dark .flatpickr-weekday {
-        color: #475569 !important;
+        color: #94a3b8 !important;
     }
 
     .flatpickr-months .flatpickr-month {
diff --git a/resources/views/admin/analysis/product-reports.blade.php b/resources/views/admin/analysis/product-reports.blade.php
index ffe5477..3a37153 100644
--- a/resources/views/admin/analysis/product-reports.blade.php
+++ b/resources/views/admin/analysis/product-reports.blade.php
@@ -125,15 +125,13 @@
             <!-- Filter Controls Form -->
             <div class="flex flex-col sm:flex-row sm:items-center gap-3 w-full xl:w-auto xl:flex-1 xl:justify-end relative">
                 <!-- Date Range (Flatpickr) -->
-                <div class="w-full sm:w-72 relative focus-within:z-[30]">
+                <div class="w-full sm:w-80 relative focus-within:z-[50]">
                     <div class="relative group">
-                        <span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10 text-slate-400">
-                            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z" />
-                            </svg>
+                        <span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10 text-slate-400 group-focus-within:text-cyan-500 transition-colors">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
                         </span>
                         <input type="text" x-ref="dateInput" readonly
-                               class="luxury-input py-3 pl-12 pr-6 block w-full text-sm font-bold cursor-pointer"
+                               class="luxury-input py-2.5 pl-12 pr-6 block w-full text-sm font-bold cursor-pointer"
                                placeholder="{{ __('Date Range') }}">
                     </div>
                 </div>