chore: update dependencies and enhance datetime picker styling

- Updated `multer` to version 2.1.0 and `@vitejs/plugin-react` to version 4.7.0 in package.json.
- Updated `vite` to version 6.4.1.
- Enhanced CSS for various themes to include `color-scheme` and `--picker-icon-filter` properties for better datetime picker integration.
- Refactored Calendar component to include styled datetime picker with icons for start and end time inputs.
- Improved timezone display for better user experience.

src/index.css

@@ -6,6 +6,8 @@
   /* ===== DEFAULT LIGHT ===== */
   :root,
   [data-theme="light"] {
+    color-scheme: light;
+    --picker-icon-filter: none;
     --bg-primary: #ffffff;
     --bg-secondary: #f8fafc;
     --bg-tertiary: #f1f5f9;
@@ -32,6 +34,8 @@
 
   /* ===== DEFAULT DARK ===== */
   [data-theme="dark"] {
+    color-scheme: dark;
+    --picker-icon-filter: invert(0.8);
     --bg-primary: #0f172a;
     --bg-secondary: #1e293b;
     --bg-tertiary: #334155;
@@ -58,6 +62,8 @@
 
   /* ===== DRACULA ===== */
   [data-theme="dracula"] {
+    color-scheme: dark;
+    --picker-icon-filter: invert(0.8);
     --bg-primary: #282a36;
     --bg-secondary: #44475a;
     --bg-tertiary: #383a4c;
@@ -84,6 +90,8 @@
 
   /* ===== CATPPUCCIN MOCHA ===== */
   [data-theme="mocha"] {
+    color-scheme: dark;
+    --picker-icon-filter: invert(0.8);
     --bg-primary: #1e1e2e;
     --bg-secondary: #313244;
     --bg-tertiary: #45475a;
@@ -110,6 +118,8 @@
 
   /* ===== CATPPUCCIN LATTE (Light) ===== */
   [data-theme="latte"] {
+    color-scheme: light;
+    --picker-icon-filter: none;
     --bg-primary: #eff1f5;
     --bg-secondary: #e6e9ef;
     --bg-tertiary: #dce0e8;
@@ -136,6 +146,8 @@
 
   /* ===== NORD ===== */
   [data-theme="nord"] {
+    color-scheme: dark;
+    --picker-icon-filter: invert(0.8);
     --bg-primary: #2e3440;
     --bg-secondary: #3b4252;
     --bg-tertiary: #434c5e;
@@ -162,6 +174,8 @@
 
   /* ===== TOKYO NIGHT ===== */
   [data-theme="tokyo-night"] {
+    color-scheme: dark;
+    --picker-icon-filter: invert(0.8);
     --bg-primary: #1a1b26;
     --bg-secondary: #24283b;
     --bg-tertiary: #2f3349;
@@ -188,6 +202,8 @@
 
   /* ===== GRUVBOX DARK ===== */
   [data-theme="gruvbox-dark"] {
+    color-scheme: dark;
+    --picker-icon-filter: invert(0.8);
     --bg-primary: #282828;
     --bg-secondary: #3c3836;
     --bg-tertiary: #504945;
@@ -214,6 +230,8 @@
 
   /* ===== GRUVBOX LIGHT ===== */
   [data-theme="gruvbox-light"] {
+    color-scheme: light;
+    --picker-icon-filter: none;
     --bg-primary: #fbf1c7;
     --bg-secondary: #ebdbb2;
     --bg-tertiary: #d5c4a1;
@@ -240,6 +258,8 @@
 
   /* ===== ROSE PINE ===== */
   [data-theme="rose-pine"] {
+    color-scheme: dark;
+    --picker-icon-filter: invert(0.8);
     --bg-primary: #191724;
     --bg-secondary: #1f1d2e;
     --bg-tertiary: #26233a;
@@ -266,6 +286,8 @@
 
   /* ===== ROSE PINE DAWN (Light) ===== */
   [data-theme="rose-pine-dawn"] {
+    color-scheme: light;
+    --picker-icon-filter: none;
     --bg-primary: #faf4ed;
     --bg-secondary: #fffaf3;
     --bg-tertiary: #f2e9e1;
@@ -292,6 +314,8 @@
 
   /* ===== SOLARIZED DARK ===== */
   [data-theme="solarized-dark"] {
+    color-scheme: dark;
+    --picker-icon-filter: invert(0.8);
     --bg-primary: #002b36;
     --bg-secondary: #073642;
     --bg-tertiary: #0a4050;
@@ -318,6 +342,8 @@
 
   /* ===== SOLARIZED LIGHT ===== */
   [data-theme="solarized-light"] {
+    color-scheme: light;
+    --picker-icon-filter: none;
     --bg-primary: #fdf6e3;
     --bg-secondary: #eee8d5;
     --bg-tertiary: #e4ddc8;
@@ -344,6 +370,8 @@
 
   /* ===== ONE DARK ===== */
   [data-theme="one-dark"] {
+    color-scheme: dark;
+    --picker-icon-filter: invert(0.8);
     --bg-primary: #282c34;
     --bg-secondary: #2c313a;
     --bg-tertiary: #353b45;
@@ -370,6 +398,8 @@
 
   /* ===== GITHUB DARK ===== */
   [data-theme="github-dark"] {
+    color-scheme: dark;
+    --picker-icon-filter: invert(0.8);
     --bg-primary: #0d1117;
     --bg-secondary: #161b22;
     --bg-tertiary: #21262d;
@@ -416,6 +446,8 @@
 
   /* ===== SCRUNKLY.CAT DARK ===== */
   [data-theme="scrunkly-cat"] {
+    color-scheme: dark;
+    --picker-icon-filter: invert(0.8);
     --bg-primary: #161924;
     --bg-secondary: #161924;
     --bg-tertiary: #1b2130;
@@ -442,6 +474,8 @@
 
     /* ===== RED MODULAR LIGHT ===== */
   [data-theme="red-modular-light"] {
+    color-scheme: light;
+    --picker-icon-filter: none;
     --bg-primary: #ffffff;
     --bg-secondary: #f8fafc;
     --bg-tertiary: #f1f5f9;
@@ -468,6 +502,8 @@
 
   /* ===== EVERFOREST DARK ===== */
   [data-theme="everforest-dark"] {
+    color-scheme: dark;
+    --picker-icon-filter: invert(0.8);
     --bg-primary: #2d353b;
     --bg-secondary: #343f44;
     --bg-tertiary: #3d484d;
@@ -494,6 +530,8 @@
 
   /* ===== EVERFOREST LIGHT ===== */
   [data-theme="everforest-light"] {
+    color-scheme: light;
+    --picker-icon-filter: none;
     --bg-primary: #fdf6e3;
     --bg-secondary: #f4f0d9;
     --bg-tertiary: #eae4ca;
@@ -520,6 +558,8 @@
 
   /* ===== KANAGAWA ===== */
   [data-theme="kanagawa"] {
+    color-scheme: dark;
+    --picker-icon-filter: invert(0.8);
     --bg-primary: #1f1f28;
     --bg-secondary: #2a2a37;
     --bg-tertiary: #363646;
@@ -546,6 +586,8 @@
 
   /* ===== AYU DARK ===== */
   [data-theme="ayu-dark"] {
+    color-scheme: dark;
+    --picker-icon-filter: invert(0.8);
     --bg-primary: #0d1017;
     --bg-secondary: #131721;
     --bg-tertiary: #1a212e;
@@ -572,6 +614,8 @@
 
   /* ===== MOONLIGHT ===== */
   [data-theme="moonlight"] {
+    color-scheme: dark;
+    --picker-icon-filter: invert(0.8);
     --bg-primary: #212337;
     --bg-secondary: #2b2d3f;
     --bg-tertiary: #353750;
@@ -598,6 +642,8 @@
 
   /* ===== CYBERPUNK ===== */
   [data-theme="cyberpunk"] {
+    color-scheme: dark;
+    --picker-icon-filter: invert(0.8);
     --bg-primary: #0a0a0f;
     --bg-secondary: #0e0e1a;
     --bg-tertiary: #141428;
@@ -668,6 +714,39 @@
     transition-all duration-200;
   }
 
+  /* ── Styled date/time picker wrapper ── */
+  .datetime-picker {
+    @apply relative;
+  }
+
+  .datetime-picker .datetime-icon {
+    @apply absolute left-3.5 top-1/2 -translate-y-1/2 pointer-events-none text-th-text-s z-10;
+  }
+
+  .datetime-picker input[type="datetime-local"],
+  .datetime-picker input[type="date"],
+  .datetime-picker input[type="time"] {
+    @apply w-full pl-11 pr-3 py-2.5 rounded-lg
+    bg-th-input text-th-text
+    border border-th-input-b
+    focus:outline-none focus:ring-2 focus:ring-th-ring focus:border-transparent
+    transition-all duration-200;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .datetime-picker input::-webkit-calendar-picker-indicator {
+    cursor: pointer;
+    border-radius: 4px;
+    padding: 4px;
+    opacity: 0.6;
+    transition: opacity 0.15s;
+    filter: var(--picker-icon-filter, none);
+  }
+
+  .datetime-picker input::-webkit-calendar-picker-indicator:hover {
+    opacity: 1;
+  }
+
   .card {
     @apply bg-th-card rounded-xl border border-th-border
     shadow-th transition-all duration-200;

src/pages/Calendar.jsx

@@ -535,28 +535,33 @@ export default function Calendar() {
             <div className="grid grid-cols-2 gap-4">
               <div>
                 <label className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.startTime')} *</label>
-                <input
-                  type="datetime-local"
-                  value={form.start_time}
-                  onChange={e => setForm({ ...form, start_time: e.target.value })}
-                  className="input-field"
-                  required
-                />
+                <div className="datetime-picker">
+                  <CalendarIcon size={16} className="datetime-icon" />
+                  <input
+                    type="datetime-local"
+                    value={form.start_time}
+                    onChange={e => setForm({ ...form, start_time: e.target.value })}
+                    required
+                  />
+                </div>
               </div>
               <div>
                 <label className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.endTime')} *</label>
-                <input
-                  type="datetime-local"
-                  value={form.end_time}
-                  onChange={e => setForm({ ...form, end_time: e.target.value })}
-                  className="input-field"
-                  required
-                />
+                <div className="datetime-picker">
+                  <Clock size={16} className="datetime-icon" />
+                  <input
+                    type="datetime-local"
+                    value={form.end_time}
+                    onChange={e => setForm({ ...form, end_time: e.target.value })}
+                    required
+                  />
+                </div>
               </div>
             </div>
-            <p className="text-xs text-th-text-s -mt-2">
-              {t('calendar.timezone')}: {getLocalTimezone()}
-            </p>
+            <div className="flex items-center gap-1.5 -mt-2 text-xs text-th-text-s">
+              <Globe size={12} className="flex-shrink-0" />
+              <span>{getLocalTimezone()}</span>
+            </div>
 
             <div>
               <label className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.linkedRoom')}</label>
@@ -609,7 +614,10 @@ export default function Calendar() {
               <span>
                 {new Date(showDetail.start_time).toLocaleString()} - {new Date(showDetail.end_time).toLocaleString()}
               </span>
-              <span className="text-xs opacity-70">({getLocalTimezone()})</span>
+            </div>
+            <div className="flex items-center gap-1.5 text-xs text-th-text-s opacity-70 -mt-2">
+              <Globe size={12} />
+              <span>{getLocalTimezone()}</span>
             </div>
 
             {showDetail.description && (