Add theme-aware styling for date and time picker icons

The calendar and clock icons in date/time input fields were showing as black regardless of theme, making them hard to see on dark themes.

Changes:
- Add --calendar-picker-filter CSS variable to control icon appearance
- Set filter to none for light themes (keep default black icons)
- Set filter to invert(1) brightness(0.9) for all dark themes
- Apply styling to ::-webkit-calendar-picker-indicator and ::-moz-calendar-picker-indicator
- Cover all dark themes: dark, midnight, charcoal, nord, dracula

The date/time picker icons now properly invert to white/light colors on dark themes while remaining black on light themes.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/styles.css

@@ -40,6 +40,7 @@
     --text-inverse: #ffffff;
     --border-primary: #e9ecef;
     --border-secondary: #dee2e6;
+    --calendar-picker-filter: none; /* Date/time picker icons stay default (black) for light theme */
     --border-light: #f8f9fa;
     --error-color: #dc3545;
     --success-color: #28a745;
@@ -148,7 +149,7 @@ input, select, textarea, button {
 [data-theme="dark"] {
     --primary-color: #374151;
     --primary-gradient: linear-gradient(135deg, #374151 0%, #1f2937 100%);
-    
+
     /* Dark Theme Overrides */
     --background-primary: #111827;
     --background-secondary: #1f2937;
@@ -159,6 +160,7 @@ input, select, textarea, button {
     --border-primary: #374151;
     --border-secondary: #4b5563;
     --border-light: #6b7280;
+    --calendar-picker-filter: invert(1) brightness(0.9); /* Invert calendar/clock icons for dark theme */
     
     /* Modal Colors - Dark */
     --modal-background: #1f2937;
@@ -201,21 +203,25 @@ input, select, textarea, button {
 [data-theme="midnight"] {
     --primary-color: #4c9aff;
     --primary-gradient: linear-gradient(135deg, #0f1419 0%, #151b26 100%);
+    --calendar-picker-filter: invert(1) brightness(0.9);
 }
 
 [data-theme="charcoal"] {
     --primary-color: #4ade80;
     --primary-gradient: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
+    --calendar-picker-filter: invert(1) brightness(0.9);
 }
 
 [data-theme="nord"] {
     --primary-color: #88c0d0;
     --primary-gradient: linear-gradient(135deg, #2e3440 0%, #3b4252 100%);
+    --calendar-picker-filter: invert(1) brightness(0.9);
 }
 
 [data-theme="dracula"] {
     --primary-color: #bd93f9;
     --primary-gradient: linear-gradient(135deg, #282a36 0%, #44475a 100%);
+    --calendar-picker-filter: invert(1) brightness(0.9);
 }* {
     margin: 0;
     padding: 0;
@@ -947,6 +953,22 @@ body {
     cursor: not-allowed;
 }
 
+/* Style date and time picker icons to be theme-aware */
+input[type="date"]::-webkit-calendar-picker-indicator,
+input[type="time"]::-webkit-calendar-picker-indicator,
+input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+    filter: var(--calendar-picker-filter, none);
+    cursor: pointer;
+}
+
+/* Firefox date/time picker icon styling */
+input[type="date"]::-moz-calendar-picker-indicator,
+input[type="time"]::-moz-calendar-picker-indicator,
+input[type="datetime-local"]::-moz-calendar-picker-indicator {
+    filter: var(--calendar-picker-filter, none);
+    cursor: pointer;
+}
+
 .input-with-checkbox {
     display: flex;
     align-items: center;