Enhance styling system with new themes and fix modal theming consistency

- Add 4 new dark themes: Midnight, Charcoal, Nord, Dracula with complete CSS variable definitions
- Create Apple Calendar style with glassmorphism effects and theme-aware design
- Fix Google Calendar style to be theme-aware instead of using hardcoded colors
- Replace hardcoded colors in modal CSS with theme variables for consistent theming
- Add data-style attribute support to document root for style-specific CSS selectors
- Update sidebar dropdowns to include all new theme and style options

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

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

frontend/src/components/sidebar.rs

@@ -20,12 +20,17 @@ pub enum Theme {
     Dark,
     Rose,
     Mint,
+    Midnight,
+    Charcoal,
+    Nord,
+    Dracula,
 }
 
 #[derive(Clone, PartialEq)]
 pub enum Style {
     Default,
     Google,
+    Apple,
 }
 
 impl Theme {
@@ -39,6 +44,10 @@ impl Theme {
             Theme::Dark => "dark",
             Theme::Rose => "rose",
             Theme::Mint => "mint",
+            Theme::Midnight => "midnight",
+            Theme::Charcoal => "charcoal",
+            Theme::Nord => "nord",
+            Theme::Dracula => "dracula",
         }
     }
 
@@ -51,6 +60,10 @@ impl Theme {
             "dark" => Theme::Dark,
             "rose" => Theme::Rose,
             "mint" => Theme::Mint,
+            "midnight" => Theme::Midnight,
+            "charcoal" => Theme::Charcoal,
+            "nord" => Theme::Nord,
+            "dracula" => Theme::Dracula,
             _ => Theme::Default,
         }
     }
@@ -61,12 +74,14 @@ impl Style {
         match self {
             Style::Default => "default",
             Style::Google => "google",
+            Style::Apple => "apple",
         }
     }
 
     pub fn from_value(value: &str) -> Self {
         match value {
             "google" => Style::Google,
+            "apple" => Style::Apple,
             _ => Style::Default,
         }
     }
@@ -76,6 +91,7 @@ impl Style {
         match self {
             Style::Default => None, // No additional stylesheet needed - uses base styles.css
             Style::Google => Some("google.css"), // Trunk copies to root level
+            Style::Apple => Some("apple.css"), // Trunk copies to root level
         }
     }
 }
@@ -426,6 +442,10 @@ pub fn sidebar(props: &SidebarProps) -> Html {
                         <option value="dark" selected={matches!(props.current_theme, Theme::Dark)}>{"Dark"}</option>
                         <option value="rose" selected={matches!(props.current_theme, Theme::Rose)}>{"Rose"}</option>
                         <option value="mint" selected={matches!(props.current_theme, Theme::Mint)}>{"Mint"}</option>
+                        <option value="midnight" selected={matches!(props.current_theme, Theme::Midnight)}>{"Midnight"}</option>
+                        <option value="charcoal" selected={matches!(props.current_theme, Theme::Charcoal)}>{"Charcoal"}</option>
+                        <option value="nord" selected={matches!(props.current_theme, Theme::Nord)}>{"Nord"}</option>
+                        <option value="dracula" selected={matches!(props.current_theme, Theme::Dracula)}>{"Dracula"}</option>
                     </select>
                 </div>
 
@@ -433,6 +453,7 @@ pub fn sidebar(props: &SidebarProps) -> Html {
                     <select class="style-selector-dropdown" onchange={on_style_change}>
                         <option value="default" selected={matches!(props.current_style, Style::Default)}>{"Default"}</option>
                         <option value="google" selected={matches!(props.current_style, Style::Google)}>{"Google Calendar"}</option>
+                        <option value="apple" selected={matches!(props.current_style, Style::Apple)}>{"Apple Calendar"}</option>
                     </select>
                 </div>