Implement tabbed calendar management modal with improved styling

- Replace separate Create Calendar and External Calendar modals with unified tabbed interface
- Redesign modal styling with less rounded corners and cleaner appearance
- Significantly increase padding throughout modal components for better spacing
- Fix CSS variable self-references (control-padding, standard-transition)
- Improve button styling with better padding (0.875rem 2rem) and colors
- Enhance form elements with generous padding (1rem) and improved focus states
- Redesign tab bar with segmented control appearance and proper active states
- Update context menus with modern glassmorphism styling and smooth animations
- Consolidate calendar management functionality into single reusable component

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

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

frontend/src/app.rs

@@ -1,6 +1,6 @@
 use crate::components::{
-    CalendarContextMenu, ContextMenu, CreateCalendarModal, CreateEventModal, DeleteAction,
+    CalendarContextMenu, CalendarManagementModal, ContextMenu, CreateEventModal, DeleteAction,
-    EditAction, EventContextMenu, EventModal, EventCreationData, ExternalCalendarModal, 
+    EditAction, EventContextMenu, EventModal, EventCreationData,  
     MobileWarningModal, RouteHandler, Sidebar, Theme, ViewMode,
 };
 use crate::components::mobile_warning_modal::is_mobile_device;
@@ -95,7 +95,7 @@ pub fn App() -> Html {
 
     let user_info = use_state(|| -> Option<UserInfo> { None });
     let color_picker_open = use_state(|| -> Option<String> { None });
-    let create_modal_open = use_state(|| false);
+    let calendar_management_modal_open = use_state(|| false);
     let context_menu_open = use_state(|| false);
     let context_menu_pos = use_state(|| (0i32, 0i32));
     let context_menu_calendar_path = use_state(|| -> Option<String> { None });
@@ -121,7 +121,6 @@ pub fn App() -> Html {
     
     // Mobile warning state
     let mobile_warning_open = use_state(|| is_mobile_device());
-    let external_calendar_modal_open = use_state(|| false);
     let refresh_interval = use_state(|| -> Option<Interval> { None });
 
     // Calendar view state - load from localStorage if available
@@ -1168,13 +1167,9 @@ pub fn App() -> Html {
                                 <Sidebar
                                     user_info={(*user_info).clone()}
                                     on_logout={on_logout}
-                                    on_create_calendar={Callback::from({
+                                    on_add_calendar={Callback::from({
-                                        let create_modal_open = create_modal_open.clone();
+                                        let calendar_management_modal_open = calendar_management_modal_open.clone();
-                                        move |_| create_modal_open.set(true)
+                                        move |_| calendar_management_modal_open.set(true)
-                                    })}
-                                    on_create_external_calendar={Callback::from({
-                                        let external_calendar_modal_open = external_calendar_modal_open.clone();
-                                        move |_| external_calendar_modal_open.set(true)
                                     })}
                                     external_calendars={(*external_calendars).clone()}
                                     on_external_calendar_toggle={Callback::from({
@@ -1386,20 +1381,20 @@ pub fn App() -> Html {
                     }
                 }
 
-                <CreateCalendarModal
+                <CalendarManagementModal
-                    is_open={*create_modal_open}
+                    is_open={*calendar_management_modal_open}
                     on_close={Callback::from({
-                        let create_modal_open = create_modal_open.clone();
+                        let calendar_management_modal_open = calendar_management_modal_open.clone();
-                        move |_| create_modal_open.set(false)
+                        move |_| calendar_management_modal_open.set(false)
                     })}
-                    on_create={Callback::from({
+                    on_create_calendar={Callback::from({
                         let auth_token = auth_token.clone();
                         let refresh_calendars = refresh_calendars.clone();
-                        let create_modal_open = create_modal_open.clone();
+                        let calendar_management_modal_open = calendar_management_modal_open.clone();
                         move |(name, description, color): (String, Option<String>, Option<String>)| {
                             if let Some(token) = (*auth_token).clone() {
                                 let refresh_calendars = refresh_calendars.clone();
-                                let create_modal_open = create_modal_open.clone();
+                                let calendar_management_modal_open = calendar_management_modal_open.clone();
 
                                 wasm_bindgen_futures::spawn_local(async move {
                                     let calendar_service = CalendarService::new();
@@ -1418,17 +1413,41 @@ pub fn App() -> Html {
                                         Ok(_) => {
                                             web_sys::console::log_1(&"Calendar created successfully!".into());
                                             refresh_calendars.emit(());
-                                            create_modal_open.set(false);
+                                            calendar_management_modal_open.set(false);
                                         }
                                         Err(err) => {
                                             web_sys::console::log_1(&format!("Failed to create calendar: {}", err).into());
-                                            create_modal_open.set(false);
+                                            calendar_management_modal_open.set(false);
                                         }
                                     }
                                 });
                             }
                         }
                     })}
+                    on_external_success={Callback::from({
+                        let external_calendars = external_calendars.clone();
+                        let calendar_management_modal_open = calendar_management_modal_open.clone();
+                        move |new_id: i32| {
+                            // Refresh external calendars list
+                            let external_calendars = external_calendars.clone();
+                            let calendar_management_modal_open = calendar_management_modal_open.clone();
+
+                            wasm_bindgen_futures::spawn_local(async move {
+                                let calendar_service = CalendarService::new();
+                                match CalendarService::get_external_calendars().await {
+                                    Ok(calendars) => {
+                                        external_calendars.set(calendars);
+                                        calendar_management_modal_open.set(false);
+                                        web_sys::console::log_1(&format!("External calendar {} added successfully!", new_id).into());
+                                    }
+                                    Err(err) => {
+                                        web_sys::console::error_1(&format!("Failed to refresh external calendars: {}", err).into());
+                                        calendar_management_modal_open.set(false);
+                                    }
+                                }
+                            });
+                        }
+                    })}
                     available_colors={available_colors.iter().map(|c| c.to_string()).collect::<Vec<_>>()}
                 />
 
@@ -1623,58 +1642,6 @@ pub fn App() -> Html {
                     available_calendars={user_info.as_ref().map(|ui| ui.calendars.clone()).unwrap_or_default()}
                 />
 
-                <ExternalCalendarModal
-                    is_open={*external_calendar_modal_open}
-                    on_close={Callback::from({
-                        let external_calendar_modal_open = external_calendar_modal_open.clone();
-                        move |_| external_calendar_modal_open.set(false)
-                    })}
-                    on_success={Callback::from({
-                        let external_calendars = external_calendars.clone();
-                        let external_calendar_events = external_calendar_events.clone();
-                        move |new_calendar_id: i32| {
-                            let external_calendars = external_calendars.clone();
-                            let external_calendar_events = external_calendar_events.clone();
-                            wasm_bindgen_futures::spawn_local(async move {
-                                // First, refresh the calendar list to get the new calendar
-                                match CalendarService::get_external_calendars().await {
-                                    Ok(calendars) => {
-                                        external_calendars.set(calendars.clone());
-                                        
-                                        // Then immediately fetch events for the new calendar if it's visible
-                                        if let Some(new_calendar) = calendars.iter().find(|c| c.id == new_calendar_id) {
-                                            if new_calendar.is_visible {
-                                                match CalendarService::fetch_external_calendar_events(new_calendar_id).await {
-                                                    Ok(mut events) => {
-                                                        // Set calendar_path for color matching
-                                                        for event in &mut events {
-                                                            event.calendar_path = Some(format!("external_{}", new_calendar_id));
-                                                        }
-                                                        
-                                                        // Add the new calendar's events to existing events
-                                                        let mut all_events = (*external_calendar_events).clone();
-                                                        all_events.extend(events);
-                                                        external_calendar_events.set(all_events);
-                                                    }
-                                                    Err(e) => {
-                                                        web_sys::console::log_1(
-                                                            &format!("Failed to fetch events for new calendar {}: {}", new_calendar_id, e).into(),
-                                                        );
-                                                    }
-                                                }
-                                            }
-                                        }
-                                    }
-                                    Err(err) => {
-                                        web_sys::console::log_1(
-                                            &format!("Failed to refresh calendars after creation: {}", err).into(),
-                                        );
-                                    }
-                                }
-                            });
-                        }
-                    })}
-                />
 
                 <EventModal
                     event={if *view_event_modal_open { (*view_event_modal_event).clone() } else { None }}

frontend/src/components/calendar_management_modal.rs

@@ -0,0 +1,401 @@
+use yew::prelude::*;
+use web_sys::HtmlInputElement;
+use wasm_bindgen::JsCast;
+use crate::services::calendar_service::CalendarService;
+
+#[derive(Clone, PartialEq)]
+pub enum CalendarTab {
+    Create,
+    External,
+}
+
+#[derive(Properties, PartialEq)]
+pub struct CalendarManagementModalProps {
+    pub is_open: bool,
+    pub on_close: Callback<()>,
+    pub on_create_calendar: Callback<(String, Option<String>, Option<String>)>, // name, description, color
+    pub on_external_success: Callback<i32>, // Pass the newly created external calendar ID
+    pub available_colors: Vec<String>,
+}
+
+#[function_component(CalendarManagementModal)]
+pub fn calendar_management_modal(props: &CalendarManagementModalProps) -> Html {
+    let active_tab = use_state(|| CalendarTab::Create);
+    
+    // Create Calendar state
+    let calendar_name = use_state(|| String::new());
+    let description = use_state(|| String::new());
+    let selected_color = use_state(|| None::<String>);
+    let create_error_message = use_state(|| None::<String>);
+    let is_creating = use_state(|| false);
+    
+    // External Calendar state
+    let external_name_ref = use_node_ref();
+    let external_url_ref = use_node_ref();
+    let external_color_ref = use_node_ref();
+    let external_is_loading = use_state(|| false);
+    let external_error_message = use_state(|| None::<String>);
+
+    // Reset state when modal opens
+    use_effect_with(props.is_open, {
+        let calendar_name = calendar_name.clone();
+        let description = description.clone();
+        let selected_color = selected_color.clone();
+        let create_error_message = create_error_message.clone();
+        let is_creating = is_creating.clone();
+        let external_is_loading = external_is_loading.clone();
+        let external_error_message = external_error_message.clone();
+        let active_tab = active_tab.clone();
+        
+        move |is_open| {
+            if *is_open {
+                // Reset all state when modal opens
+                calendar_name.set(String::new());
+                description.set(String::new());
+                selected_color.set(None);
+                create_error_message.set(None);
+                is_creating.set(false);
+                external_is_loading.set(false);
+                external_error_message.set(None);
+                active_tab.set(CalendarTab::Create);
+            }
+        }
+    });
+
+    let on_tab_click = {
+        let active_tab = active_tab.clone();
+        Callback::from(move |tab: CalendarTab| {
+            active_tab.set(tab);
+        })
+    };
+
+    let on_backdrop_click = {
+        let on_close = props.on_close.clone();
+        Callback::from(move |e: MouseEvent| {
+            if let Some(target) = e.target() {
+                let element = target.dyn_into::<web_sys::Element>().unwrap();
+                if element.class_list().contains("modal-backdrop") {
+                    on_close.emit(());
+                }
+            }
+        })
+    };
+
+    // Create Calendar handlers
+    let on_name_change = {
+        let calendar_name = calendar_name.clone();
+        Callback::from(move |e: InputEvent| {
+            let input: HtmlInputElement = e.target_unchecked_into();
+            calendar_name.set(input.value());
+        })
+    };
+
+    let on_description_change = {
+        let description = description.clone();
+        Callback::from(move |e: InputEvent| {
+            let input: web_sys::HtmlTextAreaElement = e.target_unchecked_into();
+            description.set(input.value());
+        })
+    };
+
+    let on_color_select = {
+        let selected_color = selected_color.clone();
+        Callback::from(move |color: String| {
+            selected_color.set(Some(color));
+        })
+    };
+
+    let on_create_submit = {
+        let calendar_name = calendar_name.clone();
+        let description = description.clone();
+        let selected_color = selected_color.clone();
+        let create_error_message = create_error_message.clone();
+        let is_creating = is_creating.clone();
+        let on_create_calendar = props.on_create_calendar.clone();
+
+        Callback::from(move |e: SubmitEvent| {
+            e.prevent_default();
+
+            let name = (*calendar_name).trim();
+            if name.is_empty() {
+                create_error_message.set(Some("Calendar name is required".to_string()));
+                return;
+            }
+
+            is_creating.set(true);
+            create_error_message.set(None);
+
+            let desc = if description.is_empty() {
+                None
+            } else {
+                Some((*description).clone())
+            };
+
+            on_create_calendar.emit((name.to_string(), desc, (*selected_color).clone()));
+        })
+    };
+
+    // External Calendar handlers
+    let on_external_submit = {
+        let external_name_ref = external_name_ref.clone();
+        let external_url_ref = external_url_ref.clone();
+        let external_color_ref = external_color_ref.clone();
+        let external_is_loading = external_is_loading.clone();
+        let external_error_message = external_error_message.clone();
+        let on_close = props.on_close.clone();
+        let on_external_success = props.on_external_success.clone();
+
+        Callback::from(move |e: SubmitEvent| {
+            e.prevent_default();
+            
+            let name = external_name_ref
+                .cast::<HtmlInputElement>()
+                .map(|input| input.value())
+                .unwrap_or_default()
+                .trim()
+                .to_string();
+            
+            let url = external_url_ref
+                .cast::<HtmlInputElement>()
+                .map(|input| input.value())
+                .unwrap_or_default()
+                .trim()
+                .to_string();
+                
+            let color = external_color_ref
+                .cast::<HtmlInputElement>()
+                .map(|input| input.value())
+                .unwrap_or_else(|| "#4285f4".to_string());
+
+            if name.is_empty() || url.is_empty() {
+                external_error_message.set(Some("Name and URL are required".to_string()));
+                return;
+            }
+
+            external_is_loading.set(true);
+            external_error_message.set(None);
+
+            let external_is_loading = external_is_loading.clone();
+            let external_error_message = external_error_message.clone();
+            let on_close = on_close.clone();
+            let on_external_success = on_external_success.clone();
+
+            wasm_bindgen_futures::spawn_local(async move {
+                let calendar_service = CalendarService::new();
+                
+                match CalendarService::create_external_calendar(&name, &url, &color).await {
+                    Ok(calendar) => {
+                        external_is_loading.set(false);
+                        on_close.emit(());
+                        on_external_success.emit(calendar.id);
+                    }
+                    Err(e) => {
+                        external_is_loading.set(false);
+                        external_error_message.set(Some(format!("Failed to add calendar: {}", e)));
+                    }
+                }
+            });
+        })
+    };
+
+    if !props.is_open {
+        return html! {};
+    }
+
+    html! {
+        <div class="modal-backdrop" onclick={on_backdrop_click}>
+            <div class="modal-content calendar-management-modal">
+                <div class="modal-header">
+                    <h2>{"Add Calendar"}</h2>
+                    <button class="modal-close" onclick={
+                        let on_close = props.on_close.clone();
+                        Callback::from(move |_: MouseEvent| on_close.emit(()))
+                    }>{"×"}</button>
+                </div>
+                
+                <div class="calendar-management-tabs">
+                    <button 
+                        class={if *active_tab == CalendarTab::Create { "tab-button active" } else { "tab-button" }}
+                        onclick={
+                            let on_tab_click = on_tab_click.clone();
+                            Callback::from(move |_: MouseEvent| on_tab_click.emit(CalendarTab::Create))
+                        }
+                    >
+                        {"Create Calendar"}
+                    </button>
+                    <button 
+                        class={if *active_tab == CalendarTab::External { "tab-button active" } else { "tab-button" }}
+                        onclick={
+                            let on_tab_click = on_tab_click.clone();
+                            Callback::from(move |_: MouseEvent| on_tab_click.emit(CalendarTab::External))
+                        }
+                    >
+                        {"Add External"}
+                    </button>
+                </div>
+
+                <div class="modal-body">
+                    {
+                        match *active_tab {
+                            CalendarTab::Create => html! {
+                                <form onsubmit={on_create_submit}>
+                                    <div class="form-group">
+                                        <label for="calendar-name">{"Calendar Name"}</label>
+                                        <input
+                                            type="text"
+                                            id="calendar-name"
+                                            value={(*calendar_name).clone()}
+                                            oninput={on_name_change}
+                                            placeholder="Enter calendar name"
+                                            disabled={*is_creating}
+                                        />
+                                    </div>
+
+                                    <div class="form-group">
+                                        <label for="calendar-description">{"Description (optional)"}</label>
+                                        <textarea
+                                            id="calendar-description"
+                                            value={(*description).clone()}
+                                            oninput={on_description_change}
+                                            placeholder="Enter calendar description"
+                                            disabled={*is_creating}
+                                        />
+                                    </div>
+
+                                    <div class="form-group">
+                                        <label>{"Calendar Color"}</label>
+                                        <div class="color-picker">
+                                            {
+                                                props.available_colors.iter().map(|color| {
+                                                    let is_selected = selected_color.as_ref() == Some(color);
+                                                    let color_clone = color.clone();
+                                                    let on_color_select = on_color_select.clone();
+                                                    
+                                                    html! {
+                                                        <div
+                                                            key={color.clone()}
+                                                            class={if is_selected { "color-option selected" } else { "color-option" }}
+                                                            style={format!("background-color: {}", color)}
+                                                            onclick={Callback::from(move |_: MouseEvent| {
+                                                                on_color_select.emit(color_clone.clone());
+                                                            })}
+                                                        />
+                                                    }
+                                                }).collect::<Html>()
+                                            }
+                                        </div>
+                                    </div>
+
+                                    {
+                                        if let Some(ref error) = *create_error_message {
+                                            html! {
+                                                <div class="error-message">
+                                                    {error}
+                                                </div>
+                                            }
+                                        } else {
+                                            html! {}
+                                        }
+                                    }
+
+                                    <div class="modal-footer">
+                                        <button 
+                                            type="button" 
+                                            class="cancel-button" 
+                                            onclick={
+                                                let on_close = props.on_close.clone();
+                                                Callback::from(move |_: MouseEvent| on_close.emit(()))
+                                            }
+                                            disabled={*is_creating}
+                                        >
+                                            {"Cancel"}
+                                        </button>
+                                        <button 
+                                            type="submit" 
+                                            class="create-button" 
+                                            disabled={*is_creating}
+                                        >
+                                            {if *is_creating { "Creating..." } else { "Create Calendar" }}
+                                        </button>
+                                    </div>
+                                </form>
+                            },
+                            CalendarTab::External => html! {
+                                <form onsubmit={on_external_submit}>
+                                    <div class="form-group">
+                                        <label for="external-name">{"Calendar Name"}</label>
+                                        <input
+                                            type="text"
+                                            id="external-name"
+                                            ref={external_name_ref.clone()}
+                                            placeholder="Enter calendar name"
+                                            disabled={*external_is_loading}
+                                        />
+                                    </div>
+
+                                    <div class="form-group">
+                                        <label for="external-url">{"Calendar URL"}</label>
+                                        <input
+                                            type="url"
+                                            id="external-url"
+                                            ref={external_url_ref.clone()}
+                                            placeholder="https://example.com/calendar.ics"
+                                            disabled={*external_is_loading}
+                                        />
+                                        <small class="help-text">
+                                            {"Enter the ICS/CalDAV URL for your external calendar"}
+                                        </small>
+                                    </div>
+
+                                    <div class="form-group">
+                                        <label for="external-color">{"Calendar Color"}</label>
+                                        <input
+                                            type="color"
+                                            id="external-color"
+                                            ref={external_color_ref.clone()}
+                                            value="#4285f4"
+                                            disabled={*external_is_loading}
+                                        />
+                                    </div>
+
+                                    {
+                                        if let Some(ref error) = *external_error_message {
+                                            html! {
+                                                <div class="error-message">
+                                                    {error}
+                                                </div>
+                                            }
+                                        } else {
+                                            html! {}
+                                        }
+                                    }
+
+                                    <div class="modal-footer">
+                                        <button 
+                                            type="button" 
+                                            class="cancel-button" 
+                                            onclick={
+                                                let on_close = props.on_close.clone();
+                                                Callback::from(move |_: MouseEvent| on_close.emit(()))
+                                            }
+                                            disabled={*external_is_loading}
+                                        >
+                                            {"Cancel"}
+                                        </button>
+                                        <button 
+                                            type="submit" 
+                                            class="create-button" 
+                                            disabled={*external_is_loading}
+                                        >
+                                            {if *external_is_loading { "Adding..." } else { "Add Calendar" }}
+                                        </button>
+                                    </div>
+                                </form>
+                            }
+                        }
+                    }
+                </div>
+            </div>
+        </div>
+    }
+}

frontend/src/components/mod.rs

@@ -1,5 +1,6 @@
 pub mod calendar;
 pub mod calendar_context_menu;
+pub mod calendar_management_modal;
 pub mod calendar_header;
 pub mod calendar_list_item;
 pub mod context_menu;
@@ -19,16 +20,15 @@ pub mod week_view;
 
 pub use calendar::Calendar;
 pub use calendar_context_menu::CalendarContextMenu;
+pub use calendar_management_modal::CalendarManagementModal;
 pub use calendar_header::CalendarHeader;
 pub use calendar_list_item::CalendarListItem;
 pub use context_menu::ContextMenu;
-pub use create_calendar_modal::CreateCalendarModal;
 pub use create_event_modal::CreateEventModal;
 // Re-export event form types for backwards compatibility
 pub use event_form::EventCreationData;
 pub use event_context_menu::{DeleteAction, EditAction, EventContextMenu};
 pub use event_modal::EventModal;
-pub use external_calendar_modal::ExternalCalendarModal;
 pub use login::Login;
 pub use mobile_warning_modal::MobileWarningModal;
 pub use month_view::MonthView;

frontend/src/components/sidebar.rs

@@ -100,8 +100,7 @@ impl Default for ViewMode {
 pub struct SidebarProps {
     pub user_info: Option<UserInfo>,
     pub on_logout: Callback<()>,
-    pub on_create_calendar: Callback<()>,
+    pub on_add_calendar: Callback<()>,
-    pub on_create_external_calendar: Callback<()>,
     pub external_calendars: Vec<ExternalCalendar>,
     pub on_external_calendar_toggle: Callback<i32>,
     pub on_external_calendar_delete: Callback<i32>,
@@ -357,12 +356,8 @@ pub fn sidebar(props: &SidebarProps) -> Html {
             </div>
             
             <div class="sidebar-footer">
-                <button onclick={props.on_create_calendar.reform(|_| ())} class="create-calendar-button">
+                <button onclick={props.on_add_calendar.reform(|_| ())} class="add-calendar-button">
-                    {"+ Create Calendar"}
+                    {"+ Add Calendar"}
-                </button>
-                
-                <button onclick={props.on_create_external_calendar.reform(|_| ())} class="create-external-calendar-button">
-                    {"+ Add External Calendar"}
                 </button>
 
                 <div class="view-selector">

frontend/styles.css

@@ -33,12 +33,12 @@
     
     /* Standard Control Dimensions */
     --control-height: 40px;
-    --control-padding: var(--control-padding);
+    --control-padding: 0.875rem;
     --control-padding-sm: 0.5rem;
     --control-margin: 1rem;
     
     /* Common Transition */
-    --standard-transition: var(--standard-transition);
+    --standard-transition: all 0.2s ease;
 }
 
 body {
@@ -265,14 +265,14 @@ body {
     top: 100%;
     left: 0;
     background: white;
-    border-radius: var(--border-radius-medium);
+    border-radius: 4px;
-    padding: 8px;
+    padding: 1rem;
     box-shadow: 0 4px 12px rgba(0,0,0,0.15);
     z-index: 1000;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
-    gap: 6px;
+    gap: 0.75rem;
-    min-width: 120px;
+    min-width: 160px;
     border: 1px solid rgba(0,0,0,0.1);
 }
 
@@ -1178,6 +1178,103 @@ body {
     background: var(--primary-color, #5a6fd8);
 }
 
+/* Calendar Management Modal */
+.calendar-management-modal {
+    max-width: 600px;
+    width: 90%;
+}
+
+.calendar-management-modal .modal-header {
+    padding: 2rem 2.5rem 0;
+    border-bottom: none;
+    background: white;
+}
+
+.calendar-management-modal .modal-body {
+    padding: 0 2.5rem 2.5rem;
+}
+
+.calendar-management-tabs {
+    display: flex;
+    margin: 1.5rem 0 0 0;
+    background: #f9fafb;
+    border: 1px solid #e5e7eb;
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.tab-button {
+    flex: 1;
+    background: transparent;
+    border: none;
+    border-right: 1px solid #e5e7eb;
+    padding: 1.25rem 2rem;
+    cursor: pointer;
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: #6b7280;
+    transition: all 0.15s ease;
+    position: relative;
+    text-align: center;
+}
+
+.tab-button:last-child {
+    border-right: none;
+}
+
+.tab-button:hover {
+    background: #f3f4f6;
+    color: #374151;
+}
+
+.tab-button.active {
+    background: white;
+    color: #2563eb;
+    box-shadow: inset 0 -2px 0 #2563eb,
+                0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.calendar-management-modal .modal-body form {
+    padding-top: 1rem;
+}
+
+/* Generic modal footer for calendar management */
+.calendar-management-modal .modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 1rem;
+    padding: 2rem 2.5rem;
+    border-top: 1px solid #e5e7eb;
+    background: #fafafa;
+    margin: 0 -2.5rem -2.5rem;
+}
+
+/* Add Calendar Button */
+.add-calendar-button {
+    background: var(--glass-bg-light);
+    border: 1px solid var(--glass-border-light);
+    color: white;
+    padding: var(--control-padding) 1rem;
+    border-radius: var(--border-radius-medium);
+    cursor: pointer;
+    transition: var(--standard-transition);
+    margin-bottom: var(--control-margin);
+    font-size: 0.9rem;
+    font-weight: 500;
+    backdrop-filter: blur(10px);
+    width: 100%;
+}
+
+.add-calendar-button:hover {
+    background: var(--glass-bg-lighter);
+    border-color: rgba(255, 255, 255, 0.5);
+    transform: translateY(-1px);
+}
+
+.add-calendar-button:active {
+    transform: translateY(0);
+}
+
 
 .weekday-header {
     background: #f8f9fa;
@@ -1372,14 +1469,16 @@ body {
 
 .modal-content {
     background: white;
-    border-radius: 12px;
+    border-radius: 6px;
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12), 
+                0 8px 16px rgba(0, 0, 0, 0.08),
+                0 0 0 1px rgba(0, 0, 0, 0.04);
     max-width: 900px;
     width: 95%;
     max-height: 85vh;
     overflow-y: auto;
     position: relative;
-    animation: modalAppear 0.2s ease-out;
+    animation: modalAppear 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 @keyframes modalAppear {
@@ -1397,8 +1496,9 @@ body {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 2rem 3rem 1.5rem;
+    padding: 2rem 2.5rem;
-    border-bottom: 1px solid #e9ecef;
+    border-bottom: 1px solid #e5e7eb;
+    background: #fafafa;
 }
 
 .modal-header h3 {
@@ -1599,33 +1699,34 @@ body {
 }
 
 .form-group {
-    margin-bottom: 1.5rem;
+    margin-bottom: 2rem;
 }
 
 .form-group label {
     display: block;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.75rem;
-    color: #495057;
+    color: #374151;
-    font-weight: 500;
+    font-weight: 600;
-    font-size: 0.9rem;
+    font-size: 0.95rem;
 }
 
 .form-group input,
 .form-group textarea {
     width: 100%;
-    padding: var(--control-padding);
+    padding: 1rem;
-    border: 1px solid #ced4da;
+    border: 1px solid #d1d5db;
-    border-radius: var(--border-radius-medium);
+    border-radius: 4px;
-    font-size: 1rem;
+    font-size: 0.95rem;
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
     font-family: inherit;
+    line-height: 1.5;
 }
 
 .form-group input:focus,
 .form-group textarea:focus {
     outline: none;
-    border-color: #667eea;
+    border-color: #2563eb;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
 }
 
 .form-group input:disabled,
@@ -1692,34 +1793,42 @@ body {
 
 .cancel-button,
 .create-button {
-    padding: var(--control-padding) 1.5rem;
+    padding: 0.875rem 2rem;
-    border-radius: var(--border-radius-medium);
+    border-radius: 4px;
-    font-size: 1rem;
+    font-size: 0.95rem;
-    font-weight: 500;
+    font-weight: 600;
     cursor: pointer;
-    transition: var(--standard-transition);
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     border: none;
+    min-width: 120px;
+    text-align: center;
 }
 
 .cancel-button {
     background: #f8f9fa;
-    color: #6c757d;
+    color: #374151;
-    border: 1px solid #ced4da;
+    border: 1px solid #d1d5db;
 }
 
 .cancel-button:hover:not(:disabled) {
-    background: #e9ecef;
+    background: #f3f4f6;
-    color: #495057;
+    color: #111827;
+    border-color: #9ca3af;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
 }
 
 .create-button {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: #2563eb;
     color: white;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 .create-button:hover:not(:disabled) {
+    background: #1d4ed8;
     transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2),
+                0 4px 8px rgba(0, 0, 0, 0.08);
 }
 
 .cancel-button:disabled,
@@ -1743,18 +1852,22 @@ body {
 /* Context Menu */
 .context-menu {
     background: white;
-    border: 1px solid #e9ecef;
+    border: 1px solid rgba(0, 0, 0, 0.08);
-    border-radius: var(--border-radius-medium);
+    border-radius: 12px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 
-    min-width: 160px;
+                0 4px 8px rgba(0, 0, 0, 0.08),
+                0 0 0 1px rgba(255, 255, 255, 0.5) inset;
+    min-width: 180px;
     overflow: hidden;
-    animation: contextMenuSlideIn 0.15s ease;
+    animation: contextMenuSlideIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
 }
 
 @keyframes contextMenuSlideIn {
     from {
         opacity: 0;
-        transform: scale(0.95) translateY(-5px);
+        transform: scale(0.92) translateY(-8px);
     }
     to {
         opacity: 1;
@@ -1765,33 +1878,51 @@ body {
 .context-menu-item {
     display: flex;
     align-items: center;
-    padding: var(--control-padding) 1rem;
+    padding: 0.75rem 1.25rem;
-    color: #495057;
+    color: #374151;
     cursor: pointer;
-    transition: background-color 0.2s ease;
+    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-    font-size: 0.9rem;
+    font-size: 0.875rem;
+    font-weight: 500;
     border: none;
     background: none;
     width: 100%;
     text-align: left;
+    position: relative;
+}
+
+.context-menu-item:first-child {
+    margin-top: 0.25rem;
+}
+
+.context-menu-item:last-child {
+    margin-bottom: 0.25rem;
 }
 
 .context-menu-item:hover {
-    background-color: #f8f9fa;
+    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+    color: #1f2937;
+    transform: translateX(2px);
 }
 
 .context-menu-delete {
-    color: #dc3545;
+    color: #dc2626;
 }
 
 .context-menu-delete:hover {
-    background-color: #f8f9fa;
+    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
-    color: #dc3545;
+    color: #b91c1c;
 }
 
 .context-menu-icon {
-    margin-right: 0.5rem;
+    margin-right: 0.75rem;
     font-size: 1rem;
+    opacity: 0.7;
+    transition: opacity 0.15s ease;
+}
+
+.context-menu-item:hover .context-menu-icon {
+    opacity: 1;
 }
 
 /* Prevent text selection on context menu items */