From 78db2cc00f57af9a154af182cc21d3c4ce416b34 Mon Sep 17 00:00:00 2001 From: Connor Johnstone Date: Thu, 11 Sep 2025 18:53:40 -0400 Subject: [PATCH] Fix print preview paper dimensions and cleanup redundant CSS files MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Change print preview to landscape orientation (11" x 8.5") - Fix paper div to render at exact 1056x816 pixels - Add 48px padding (0.5 inches) directly to paper div - Remove CSS file redundancy: deleted styles.css.backup, styles/base.css, styles/default.css - Improve modal sizing to accommodate paper dimensions 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- frontend/print-preview.css | 16 +- frontend/styles.css.backup | 3501 ---------------------------------- frontend/styles/base.css | 51 - frontend/styles/default.css | 3511 ----------------------------------- 4 files changed, 9 insertions(+), 7070 deletions(-) delete mode 100644 frontend/styles.css.backup delete mode 100644 frontend/styles/base.css delete mode 100644 frontend/styles/default.css diff --git a/frontend/print-preview.css b/frontend/print-preview.css index 38136b2..59932a9 100644 --- a/frontend/print-preview.css +++ b/frontend/print-preview.css @@ -6,8 +6,8 @@ .print-preview-modal { width: 90vw; max-width: 1200px; - height: 80vh; - max-height: none; + height: auto; /* Let modal size itself based on content */ + max-height: 90vh; /* But don't exceed viewport */ margin: 5vh auto; } @@ -131,7 +131,7 @@ display: flex; justify-content: center; align-items: flex-start; - overflow: hidden; + overflow: auto; /* Allow scrolling if paper is larger than container */ background: #f5f5f5; border-radius: 8px; padding: 2rem; @@ -147,15 +147,17 @@ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border-radius: 2px; /* transform: scale() is now applied dynamically via inline style */ - width: 11in; /* Actual letter width */ - min-height: 8.5in; /* Letter height */ + width: 1056px; /* 11in at 96 DPI - LANDSCAPE width */ + height: 816px; /* 8.5in at 96 DPI - LANDSCAPE height */ + padding: 48px; /* 0.5 inches at 96 DPI */ + box-sizing: border-box; /* Include padding in dimensions */ overflow: hidden; position: relative; margin: 0 auto; + flex-shrink: 0; /* Don't shrink in flex container */ } .print-preview-content { - padding: 1rem; height: 100%; overflow: hidden; } @@ -1171,4 +1173,4 @@ .print-preview-paper[data-start-hour="8"][data-end-hour="20"]:has(.time-slot.quarter-mode) .time-labels, .print-preview-paper[data-start-hour="8"][data-end-hour="20"]:has(.time-slot.quarter-mode) .week-days-grid, .print-preview-paper[data-start-hour="7"][data-end-hour="19"]:has(.time-slot.quarter-mode) .time-labels, -.print-preview-paper[data-start-hour="7"][data-end-hour="19"]:has(.time-slot.quarter-mode) .week-days-grid { min-height: 1530px !important; } \ No newline at end of file +.print-preview-paper[data-start-hour="7"][data-end-hour="19"]:has(.time-slot.quarter-mode) .week-days-grid { min-height: 1530px !important; } diff --git a/frontend/styles.css.backup b/frontend/styles.css.backup deleted file mode 100644 index c4f437a..0000000 --- a/frontend/styles.css.backup +++ /dev/null @@ -1,3501 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background-color: #f8f9fa; - color: #333; - line-height: 1.6; -} - -.app { - min-height: 100vh; - display: flex; - flex-direction: row; -} - -.login-layout { - min-height: 100vh; - display: flex; - flex-direction: column; - width: 100%; -} - -/* Sidebar Styles */ -.app-sidebar { - width: 280px; - min-height: 100vh; - background: linear-gradient(180deg, #667eea 0%, #764ba2 100%); - color: white; - display: flex; - flex-direction: column; - box-shadow: 2px 0 8px rgba(0,0,0,0.1); - position: fixed; - left: 0; - top: 0; - z-index: 100; -} - -.sidebar-header { - padding: 2rem 1.5rem 1.5rem; - border-bottom: 1px solid rgba(255,255,255,0.2); -} - -.sidebar-header h1 { - margin: 0 0 1rem 0; - font-size: 1.8rem; - font-weight: 600; - text-align: center; -} - -.user-info { - text-align: center; - margin-bottom: 0.5rem; -} - -.user-info .username { - font-size: 1.1rem; - font-weight: 600; - color: white; - margin-bottom: 0.25rem; -} - -.user-info .server-url { - font-size: 0.8rem; - color: rgba(255,255,255,0.7); - word-break: break-all; - line-height: 1.2; -} - -.user-info.loading { - font-size: 0.9rem; - color: rgba(255,255,255,0.6); - font-style: italic; -} - -.sidebar-nav { - padding: 1rem; - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.sidebar-nav .nav-link { - color: white; - text-decoration: none; - padding: 0.75rem 1rem; - border-radius: 8px; - transition: all 0.2s; - font-weight: 500; - display: flex; - align-items: center; -} - -.sidebar-nav .nav-link:hover { - background-color: rgba(255,255,255,0.15); - transform: translateX(4px); -} - -.sidebar-nav .nav-link.active { - background-color: rgba(255,255,255,0.2); - box-shadow: 0 2px 4px rgba(0,0,0,0.1); -} - -.calendar-list { - flex: 1; - padding: 1rem; - border-top: 1px solid rgba(255,255,255,0.1); -} - -.calendar-list h3 { - color: white; - font-size: 1rem; - font-weight: 600; - margin: 0 0 1rem 0; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.calendar-list ul { - list-style: none; - margin: 0; - padding: 0; - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.calendar-list li { - display: flex; - align-items: center; - padding: 0.5rem 0.75rem; - background: rgba(255,255,255,0.1); - border-radius: 6px; - transition: all 0.2s; - cursor: pointer; - gap: 0.75rem; -} - -.calendar-list li:hover { - background: rgba(255,255,255,0.15); - transform: translateX(2px); -} - -.calendar-color { - width: 16px; - height: 16px; - border-radius: 50%; - flex-shrink: 0; - border: 2px solid rgba(255,255,255,0.3); - transition: all 0.2s; - cursor: pointer; - position: relative; -} - -.calendar-list li:hover .calendar-color { - border-color: rgba(255,255,255,0.6); - transform: scale(1.1); -} - -.color-picker { - position: absolute; - top: 100%; - left: 0; - background: white; - border-radius: 8px; - padding: 8px; - box-shadow: 0 4px 12px rgba(0,0,0,0.15); - z-index: 1000; - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 6px; - min-width: 120px; - border: 1px solid rgba(0,0,0,0.1); -} - -.color-option { - width: 20px; - height: 20px; - border-radius: 50%; - border: 2px solid rgba(0,0,0,0.1); - cursor: pointer; - transition: all 0.2s; -} - -.color-option:hover { - transform: scale(1.2); - border-color: rgba(0,0,0,0.3); -} - -.color-option.selected { - border-color: #333; - border-width: 3px; - transform: scale(1.1); -} - -.color-picker-overlay { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 999; -} - -.calendar-name { - color: white; - font-size: 0.9rem; - font-weight: 500; - flex: 1; -} - -.no-calendars { - padding: 1rem; - text-align: center; - color: rgba(255,255,255,0.6); - font-size: 0.9rem; - font-style: italic; - border-top: 1px solid rgba(255,255,255,0.1); -} - -.sidebar-footer { - padding: 1rem; - border-top: 1px solid rgba(255,255,255,0.1); -} - -.app-main { - flex: 1; - margin-left: 280px; - padding: 2rem; - max-width: calc(100% - 280px); - width: calc(100% - 280px); - box-sizing: border-box; -} - -/* Authentication Forms */ -.login-container, .register-container { - display: flex; - justify-content: center; - align-items: center; - min-height: 60vh; -} - -.login-form, .register-form { - background: white; - padding: 2rem; - border-radius: 8px; - box-shadow: 0 4px 6px rgba(0,0,0,0.1); - width: 100%; - max-width: 400px; -} - -.login-form h2, .register-form h2 { - text-align: center; - margin-bottom: 2rem; - color: #333; -} - -.form-group { - margin-bottom: 1.5rem; -} - -.form-group label { - display: block; - margin-bottom: 0.5rem; - font-weight: 500; - color: #555; -} - -.form-group input { - width: 100%; - padding: 0.75rem; - border: 1px solid #ddd; - border-radius: 4px; - font-size: 1rem; - transition: border-color 0.2s; -} - -.form-group input:focus { - outline: none; - border-color: #667eea; - box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2); -} - -.form-group input:disabled { - background-color: #f5f5f5; - cursor: not-allowed; -} - -.remember-checkbox { - display: flex; - align-items: center; - gap: 0.375rem; - margin-top: 0.375rem; - opacity: 0.7; -} - -.remember-checkbox input[type="checkbox"] { - width: auto; - margin: 0; - cursor: pointer; - transform: scale(0.85); -} - -.remember-checkbox label { - margin: 0; - font-size: 0.75rem; - color: #888; - cursor: pointer; - user-select: none; - font-weight: 400; -} - -.login-button, .register-button { - width: 100%; - padding: 0.75rem; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - border: none; - border-radius: 4px; - font-size: 1rem; - font-weight: 500; - cursor: pointer; - transition: transform 0.2s, box-shadow 0.2s; -} - -.login-button:hover, .register-button:hover { - transform: translateY(-1px); - box-shadow: 0 4px 8px rgba(0,0,0,0.2); -} - -.login-button:disabled, .register-button:disabled { - background: #ccc; - transform: none; - cursor: not-allowed; -} - -.error-message { - background-color: #f8d7da; - color: #721c24; - padding: 0.75rem; - border-radius: 4px; - margin-bottom: 1rem; - border: 1px solid #f5c6cb; -} - -.auth-links { - text-align: center; - margin-top: 2rem; - color: #666; -} - -.auth-links a { - color: #667eea; - text-decoration: none; -} - -.auth-links a:hover { - text-decoration: underline; -} - -.logout-button { - background: rgba(255,255,255,0.1); - border: 1px solid rgba(255,255,255,0.2); - color: white; - padding: 0.75rem 1rem; - border-radius: 8px; - cursor: pointer; - transition: all 0.2s; - font-weight: 500; - width: 100%; -} - -.logout-button:hover { - background: rgba(255,255,255,0.2); - transform: translateY(-1px); -} - -/* Calendar View */ -.calendar-view { - height: calc(100vh - 4rem); /* Full height minus main padding */ - display: flex; - flex-direction: column; -} - -.calendar-loading, .calendar-error { - display: flex; - align-items: center; - justify-content: center; - height: 100%; - background: white; - border-radius: 12px; - box-shadow: 0 4px 16px rgba(0,0,0,0.1); -} - -.calendar-loading p { - font-size: 1.2rem; - color: #666; -} - -.calendar-error p { - font-size: 1.2rem; - color: #d32f2f; -} - -/* Calendar Component */ -.calendar { - background: var(--calendar-bg, white); - border-radius: 12px; - box-shadow: 0 4px 16px rgba(0,0,0,0.1); - overflow: hidden; - flex: 1; - display: flex; - flex-direction: column; -} - -.calendar-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 1.5rem 2rem; - background: var(--header-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%)); - color: var(--header-text, white); -} - -.month-year { - font-size: 1.8rem; - font-weight: 600; - margin: 0; - position: absolute; - left: 50%; - transform: translateX(-50%); -} - -.header-left { - display: flex; - align-items: center; - gap: 8px; -} - -.header-right { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.time-increment-button { - background: rgba(255,255,255,0.2); - border: none; - color: white; - font-size: 14px; - font-weight: bold; - width: 40px; - height: 40px; - border-radius: 50%; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: background-color 0.2s; -} - -.time-increment-button:hover { - background: rgba(255,255,255,0.3); -} - -.nav-button { - background: rgba(255,255,255,0.2); - border: none; - color: white; - font-size: 1.5rem; - font-weight: bold; - width: 40px; - height: 40px; - border-radius: 50%; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: background-color 0.2s; -} - -.nav-button:hover { - background: rgba(255,255,255,0.3); -} - -.today-button { - background: rgba(255,255,255,0.2); - border: none; - color: white; - font-size: 0.9rem; - font-weight: 500; - padding: 0.5rem 1rem; - border-radius: 20px; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: background-color 0.2s; -} - -.today-button:hover { - background: rgba(255,255,255,0.3); -} - -.calendar-grid { - display: grid; - grid-template-columns: repeat(7, 1fr); - grid-template-rows: auto repeat(6, 1fr); - flex: 1; - background: var(--calendar-bg, white); - gap: 0; -} - -/* Week View Container */ -.week-view-container { - display: flex; - flex-direction: column; - height: 100%; - background: var(--calendar-bg, white); -} - -/* Week Header */ -.week-header { - display: grid; - grid-template-columns: 80px repeat(7, 1fr); - background: var(--weekday-header-bg, #f8f9fa); - border-bottom: 2px solid var(--time-label-border, #e9ecef); - position: sticky; - top: 0; - z-index: 10; -} - -.time-gutter { - background: var(--time-label-bg, #f8f9fa); - border-right: 1px solid var(--time-label-border, #e9ecef); -} - -.week-day-header { - padding: 1rem; - text-align: center; - border-right: 1px solid var(--time-label-border, #e9ecef); - background: var(--weekday-header-bg, #f8f9fa); - color: var(--weekday-header-text, inherit); -} - -.week-day-header.today { - background: var(--calendar-today-bg, #e3f2fd); - color: var(--calendar-today-text, #1976d2); -} - -.weekday-name { - font-size: 0.9rem; - font-weight: 600; - color: var(--weekday-header-text, #666); - text-transform: uppercase; - letter-spacing: 0.5px; - margin-bottom: 0.25rem; -} - -.week-day-header .day-number { - font-size: 1.5rem; - font-weight: 700; -} - -.week-day-header.today .weekday-name { - color: var(--calendar-today-text, #1976d2); -} - -/* Week Content */ -.week-content { - flex: 1; - overflow-y: auto; - overflow-x: hidden; -} - -.time-grid { - display: grid; - grid-template-columns: 80px 1fr; - min-height: 100%; -} - -/* Time Labels */ -.time-labels { - background: var(--time-label-bg, #f8f9fa); - border-right: 1px solid var(--time-label-border, #e9ecef); - position: sticky; - left: 0; - z-index: 5; -} - -.time-label { - height: 60px; - display: flex; - align-items: flex-start; - justify-content: center; - padding-top: 0.5rem; - font-size: 0.75rem; - color: var(--time-label-text, #666); - border-bottom: 1px solid var(--calendar-border, #f0f0f0); - font-weight: 500; -} - -.time-label.final-boundary { - height: 60px; /* Keep same height but this marks the end boundary */ - border-bottom: 2px solid #e9ecef; /* Stronger border to show day end */ - color: #999; /* Lighter color to indicate it's the boundary */ - font-size: 0.7rem; -} - -/* Week Days Grid */ -.week-days-grid { - display: grid; - grid-template-columns: repeat(7, 1fr); -} - -.week-day-column { - position: relative; - border-right: 1px solid var(--time-label-border, #e9ecef); - min-height: 1500px; /* 25 time labels × 60px = 1500px total */ -} - -.week-day-column:last-child { - border-right: none; -} - -.week-day-column.today { - background: var(--calendar-day-hover, #fafffe); -} - -/* Time Slots */ -.time-slot { - height: 60px; - border-bottom: 1px solid var(--calendar-border, #f0f0f0); - position: relative; - pointer-events: none; /* Don't capture mouse events */ -} - -.time-slot-half { - height: 30px; - border-bottom: 1px dotted var(--calendar-border, #f5f5f5); - pointer-events: none; /* Don't capture mouse events */ -} - -.time-slot-half:last-child { - border-bottom: none; -} - -.time-slot.boundary-slot { - height: 60px; /* Match the final time label height */ - border-bottom: 2px solid #e9ecef; /* Strong border to match final boundary */ - background: rgba(0,0,0,0.02); /* Slightly different background to indicate boundary */ - pointer-events: none; /* Don't capture mouse events */ -} - -/* Events Container */ -.events-container { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - pointer-events: none; /* Container doesn't capture, but children (events) do */ -} - -/* Week Events */ -.week-event { - position: absolute !important; - left: 4px; - right: 4px; - min-height: 20px; - background: #3B82F6; - color: white; - padding: 2px 6px; - border-radius: 4px; - font-size: 0.75rem; - line-height: 1.3; - cursor: pointer; - pointer-events: auto; - z-index: 3; - border: 1px solid rgba(255,255,255,0.2); - text-shadow: 0 1px 1px rgba(0,0,0,0.3); - font-weight: 500; - box-shadow: 0 1px 3px rgba(0,0,0,0.1); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.week-event:hover { - filter: brightness(1.1); - z-index: 4; - box-shadow: 0 2px 6px rgba(0,0,0,0.15); -} - -.week-event.refreshing { - animation: pulse 1.5s ease-in-out infinite alternate; - border-color: #ff9800; -} - -/* Temporary event box during drag creation */ -.temp-event-box { - position: absolute; - left: 4px; - right: 4px; - background: rgba(59, 130, 246, 0.3); - border: 2px dashed rgba(59, 130, 246, 0.8); - border-radius: 4px; - color: rgba(59, 130, 246, 0.9); - font-size: 0.75rem; - font-weight: 600; - padding: 4px 6px; - display: flex; - align-items: center; - justify-content: center; - pointer-events: none; - z-index: 6; /* Higher than events */ - text-align: center; - user-select: none; -} - -/* Moving event during drag */ -.temp-event-box.moving-event { - background: inherit; /* Use the event's actual color */ - border: 2px solid rgba(255, 255, 255, 0.8); - color: white; - flex-direction: column; - align-items: flex-start; - justify-content: flex-start; - text-align: left; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); - transform: scale(1.02); -} - -.temp-event-box.moving-event .event-title { - font-weight: 600; - margin-bottom: 2px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 100%; -} - -.temp-event-box.moving-event .event-time { - font-size: 0.65rem; - opacity: 0.9; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 100%; -} - -/* Resizing event during drag */ -.temp-event-box.resizing-event { - background: inherit; - border: 2px solid rgba(255, 255, 255, 0.9); - color: white; - flex-direction: column; - align-items: flex-start; - justify-content: flex-start; - text-align: left; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); - transform: scale(1.01); -} - -.temp-event-box.resizing-event .event-title { - font-weight: 600; - margin-bottom: 2px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 100%; -} - -.temp-event-box.resizing-event .event-time { - font-size: 0.65rem; - opacity: 0.9; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 100%; -} - -/* Event resize zones and handles */ -/* Remove position: relative to allow absolute positioning for correct event placement */ - -.week-event .event-content { - padding: 2px; - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - pointer-events: auto; - z-index: 5; - position: relative; -} - -/* Left-click drag handles */ -.resize-handle { - position: absolute; - left: 0; - right: 0; - height: 4px; - background: transparent; - cursor: ns-resize; - z-index: 10; - transition: background-color 0.2s; -} - -.resize-handle-top { - top: 0; - border-top: 2px solid transparent; -} - -.resize-handle-bottom { - bottom: 0; - border-bottom: 2px solid transparent; -} - -.week-event:hover .resize-handle { - background: rgba(255, 255, 255, 0.3); -} - -.week-event:hover .resize-handle-top { - border-top-color: rgba(255, 255, 255, 0.8); -} - -.week-event:hover .resize-handle-bottom { - border-bottom-color: rgba(255, 255, 255, 0.8); -} - -.resize-handle:hover { - background: rgba(255, 255, 255, 0.5) !important; - border-color: rgba(255, 255, 255, 1) !important; -} - - -.week-event .event-title { - font-weight: 600; - margin-bottom: 2px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.week-event .event-time { - font-size: 0.65rem; - opacity: 0.9; - font-weight: 400; -} - -.week-event.all-day { - opacity: 0.9; - border-left: 4px solid rgba(255,255,255,0.5); - font-style: italic; - background: linear-gradient(135deg, var(--event-color, #3B82F6), rgba(255,255,255,0.1)) !important; -} - -/* Legacy Week Grid (for backward compatibility) */ -.week-grid { - display: grid; - grid-template-columns: repeat(7, 1fr); - grid-template-rows: auto 1fr; - flex: 1; - background: var(--calendar-bg, white); -} - -.week-view .calendar-day { - height: 100%; /* Make week view days stretch to full height of their grid cell */ -} - -.weekday-header { - background: #f8f9fa; - padding: 1rem; - text-align: center; - font-weight: 600; - color: #666; - border-bottom: 1px solid #e9ecef; - font-size: 0.9rem; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.calendar-day { - border: 1px solid var(--calendar-border, #f0f0f0); - padding: 0.75rem; - display: flex; - flex-direction: column; - cursor: pointer; - transition: background-color 0.2s; - position: relative; - overflow: hidden; - background: var(--calendar-day-bg, white); -} - -.calendar-day:hover { - background-color: var(--calendar-day-hover, #f8f9ff); -} - -.calendar-day.current-month { - background: var(--calendar-day-bg, white); -} - -.calendar-day.prev-month, -.calendar-day.next-month { - background: var(--calendar-day-prev-next, #fafafa); - color: var(--calendar-day-prev-next-text, #ccc); -} - -.calendar-day.today { - background: var(--calendar-today-bg, #e3f2fd); - border: 2px solid var(--calendar-today-border, #2196f3); -} - -.calendar-day.has-events { - background: var(--calendar-has-events-bg, #fff3e0); -} - -.calendar-day.today.has-events { - background: var(--calendar-today-bg, #e1f5fe); -} - -.calendar-day.selected { - background: var(--calendar-selected-bg, #e8f5e8); - border: 2px solid var(--calendar-selected-border, #4caf50); - box-shadow: 0 0 8px rgba(76, 175, 80, 0.3); -} - -.calendar-day.selected.has-events { - background: var(--calendar-selected-bg, #f1f8e9); -} - -.calendar-day.selected.today { - background: var(--calendar-selected-bg, #e0f2f1); - border: 2px solid var(--calendar-selected-border, #4caf50); -} - -.calendar-day.selected .day-number { - color: var(--calendar-selected-text, #2e7d32); - font-weight: 700; -} - -.day-number { - font-weight: 600; - font-size: 1.1rem; - margin-bottom: 0.5rem; -} - -.calendar-day.today .day-number { - color: var(--calendar-today-text, #1976d2); -} - -.day-events { - flex: 1; - display: flex; - flex-direction: column; - gap: 2px; - overflow: hidden; -} - -.event-indicators { - flex: 1; - display: flex; - flex-direction: column; - gap: 2px; -} - -.more-events-indicator { - font-size: 0.7rem; - color: #666; - font-weight: 500; - padding: 2px 4px; - text-align: center; - background: #f5f5f5; - border-radius: 3px; - cursor: pointer; - transition: background-color 0.2s; -} - -.more-events-indicator:hover { - background: #e0e0e0; -} - -.event-box { - /* Background color will be set inline via style attribute */ - color: white; - padding: 2px 4px; - border-radius: 3px; - font-size: 0.7rem; - line-height: 1.2; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - cursor: pointer; - transition: all 0.2s ease; - border: 1px solid rgba(255,255,255,0.2); - text-shadow: 0 1px 1px rgba(0,0,0,0.3); - font-weight: 500; - box-shadow: 0 1px 2px rgba(0,0,0,0.1); - position: relative; -} - -.event-box:hover { - filter: brightness(1.15); - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(0,0,0,0.15); -} - -.event-box.refreshing { - animation: pulse 1.5s ease-in-out infinite alternate; - border-color: #ff9800; -} - -.event-box.refreshing::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(255, 152, 0, 0.3); - pointer-events: none; -} - -@keyframes pulse { - 0% { - opacity: 0.7; - } - 100% { - opacity: 1; - } -} - -.event-dot { - background: #ff9800; - height: 6px; - border-radius: 3px; - margin-bottom: 1px; -} - -.more-events { - font-size: 0.7rem; - color: #666; - margin-top: 2px; - font-weight: 500; -} - -/* Event Modal Styles */ -.modal-backdrop { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.5); - display: flex; - align-items: center; - justify-content: center; - z-index: 1000; - backdrop-filter: blur(2px); -} - -.modal-content { - background: white; - border-radius: 12px; - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); - max-width: 900px; - width: 95%; - max-height: 85vh; - overflow-y: auto; - position: relative; - animation: modalAppear 0.2s ease-out; -} - -@keyframes modalAppear { - from { - opacity: 0; - transform: scale(0.9) translateY(-20px); - } - to { - opacity: 1; - transform: scale(1) translateY(0); - } -} - -.modal-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 2rem 3rem 1.5rem; - border-bottom: 1px solid #e9ecef; -} - -.modal-header h3 { - margin: 0; - color: #333; - font-size: 1.4rem; - font-weight: 600; -} - -.modal-close { - background: none; - border: none; - font-size: 1.8rem; - color: #999; - cursor: pointer; - padding: 0; - width: 30px; - height: 30px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.2s; - line-height: 1; -} - -.modal-close:hover { - background: #f8f9fa; - color: #666; - transform: scale(1.1); -} - -.modal-body { - padding: 0.25rem 1.0rem 0rem; -} - -.event-detail { - display: grid; - grid-template-columns: 100px 1fr; - gap: 1rem; - margin-bottom: 1rem; - align-items: start; -} - -.event-detail strong { - color: #555; - font-weight: 600; - font-size: 0.9rem; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.event-detail span { - color: #333; - font-size: 1rem; - line-height: 1.5; - word-break: break-word; -} - -/* Responsive Design */ -@media (max-width: 768px) { - .app-sidebar { - width: 100%; - height: auto; - min-height: unset; - position: relative; - flex-direction: row; - padding: 1rem; - } - - .sidebar-header { - padding: 0; - border-bottom: none; - border-right: 1px solid rgba(255,255,255,0.2); - margin-right: 1rem; - } - - .sidebar-header h1 { - font-size: 1.4rem; - text-align: left; - margin: 0; - } - - .user-info { - display: none; /* Hide user info on mobile to save space */ - } - - .sidebar-nav { - flex-direction: row; - padding: 0; - align-items: center; - gap: 1rem; - flex: 1; - } - - .sidebar-nav .nav-link { - padding: 0.5rem 0.75rem; - font-size: 0.9rem; - } - - .logout-button { - margin: 0; - padding: 0.5rem 0.75rem; - font-size: 0.9rem; - width: auto; - } - - .calendar-list { - display: none; /* Hide calendar list on mobile */ - } - - .sidebar-footer { - padding: 0; - border-top: none; - } - - .view-selector { - margin-bottom: 0.5rem; - } - - .view-selector-dropdown { - padding: 0.5rem 0.75rem; - font-size: 0.8rem; - } - - .app-main { - margin-left: 0; - max-width: 100%; - width: 100%; - padding: 1rem; - } - - .calendar-header { - padding: 1rem; - } - - .month-year { - font-size: 1.4rem; - } - - .nav-button { - width: 35px; - height: 35px; - font-size: 1.2rem; - } - - .today-button { - font-size: 0.8rem; - padding: 0.4rem 0.8rem; - } - - .weekday-header { - padding: 0.5rem; - font-size: 0.8rem; - } - - .calendar-day { - min-height: 70px; - padding: 0.5rem; - } - - .day-number { - font-size: 1rem; - } - - .calendar-view { - height: calc(100vh - 8rem); - } -} - -@media (max-width: 480px) { - .calendar-day { - min-height: 60px; - padding: 0.25rem; - } - - .weekday-header { - padding: 0.5rem 0.25rem; - } - - .day-number { - font-size: 0.9rem; - } -} - -/* Mobile adjustments for modal */ -@media (max-width: 768px) { - .modal-content { - margin: 1rem; - width: calc(100% - 2rem); - } - - .modal-header, .modal-body { - padding: 1.5rem 2rem; - } - - .event-detail { - grid-template-columns: 80px 1fr; - gap: 0.75rem; - margin-bottom: 0.75rem; - } - - .event-detail strong { - font-size: 0.8rem; - } - - .event-detail span { - font-size: 0.9rem; - } - - .login-form, .register-form { - padding: 1.5rem; - } -} - -/* Create Calendar Button */ -.create-calendar-button { - background: rgba(255, 255, 255, 0.2); - border: 1px solid rgba(255, 255, 255, 0.3); - color: white; - padding: 0.75rem 1rem; - border-radius: 8px; - cursor: pointer; - transition: all 0.2s ease; - margin-bottom: 1rem; - font-size: 0.9rem; - font-weight: 500; - backdrop-filter: blur(10px); - width: 100%; -} - -.create-calendar-button:hover { - background: rgba(255, 255, 255, 0.3); - border-color: rgba(255, 255, 255, 0.5); - transform: translateY(-1px); -} - -.create-calendar-button:active { - transform: translateY(0); -} - -/* View Selector */ -.view-selector { - margin-bottom: 1rem; -} - -.view-selector-dropdown { - width: 100%; - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); - color: white; - padding: 0.75rem 1rem; - border-radius: 8px; - font-size: 0.9rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; - backdrop-filter: blur(10px); -} - -.view-selector-dropdown:hover { - background: rgba(255, 255, 255, 0.2); - border-color: rgba(255, 255, 255, 0.3); -} - -.view-selector-dropdown:focus { - outline: none; - background: rgba(255, 255, 255, 0.2); - border-color: rgba(255, 255, 255, 0.4); - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1); -} - -.view-selector-dropdown option { - background: #2a2a2a; - color: white; - padding: 0.5rem; -} - -/* Create Calendar Modal */ -.modal-backdrop { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.5); - backdrop-filter: blur(4px); - display: flex; - align-items: center; - justify-content: center; - z-index: 1000; - padding: 2rem; -} - -.create-calendar-modal { - background: white; - border-radius: 12px; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); - max-width: 500px; - width: 100%; - max-height: 90vh; - overflow-y: auto; - animation: modalSlideIn 0.3s ease; -} - -@keyframes modalSlideIn { - from { - opacity: 0; - transform: scale(0.9) translateY(-20px); - } - to { - opacity: 1; - transform: scale(1) translateY(0); - } -} - -.create-calendar-modal .modal-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 2rem 2rem 1rem; - border-bottom: 1px solid #e9ecef; -} - -.create-calendar-modal .modal-header h2 { - margin: 0; - color: #495057; - font-size: 1.5rem; - font-weight: 600; -} - -.close-button { - background: none; - border: none; - font-size: 1.5rem; - color: #6c757d; - cursor: pointer; - padding: 0.25rem; - line-height: 1; - border-radius: 4px; - transition: all 0.2s ease; -} - -.close-button:hover { - color: #495057; - background: #f8f9fa; -} - -.create-calendar-modal .modal-body { - padding: 1.5rem 2rem 2rem; -} - -.form-group { - margin-bottom: 1.5rem; -} - -.form-group label { - display: block; - margin-bottom: 0.5rem; - color: #495057; - font-weight: 500; - font-size: 0.9rem; -} - -.form-group input, -.form-group textarea { - width: 100%; - padding: 0.75rem; - border: 1px solid #ced4da; - border-radius: 8px; - font-size: 1rem; - transition: border-color 0.2s ease, box-shadow 0.2s ease; - font-family: inherit; -} - -.form-group input:focus, -.form-group textarea:focus { - outline: none; - border-color: #667eea; - box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); -} - -.form-group input:disabled, -.form-group textarea:disabled { - background-color: #f8f9fa; - color: #6c757d; - cursor: not-allowed; -} - -.color-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 0.75rem; - margin: 0.75rem 0; -} - -.color-option { - width: 40px; - height: 40px; - border: 3px solid transparent; - border-radius: 8px; - cursor: pointer; - transition: all 0.2s ease; - position: relative; -} - -.color-option:hover { - transform: scale(1.1); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); -} - -.color-option.selected { - border-color: #495057; - transform: scale(1.1); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); -} - -.color-option.selected::after { - content: '✓'; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: white; - font-weight: bold; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); -} - -.color-help-text { - font-size: 0.8rem; - color: #6c757d; - margin-top: 0.5rem; - margin-bottom: 0; -} - -.modal-actions { - display: flex; - justify-content: flex-end; - gap: 1rem; - margin-top: 2rem; - padding-top: 1.5rem; - border-top: 1px solid #e9ecef; -} - -.cancel-button, -.create-button { - padding: 0.75rem 1.5rem; - border-radius: 8px; - font-size: 1rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; - border: none; -} - -.cancel-button { - background: #f8f9fa; - color: #6c757d; - border: 1px solid #ced4da; -} - -.cancel-button:hover:not(:disabled) { - background: #e9ecef; - color: #495057; -} - -.create-button { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; -} - -.create-button:hover:not(:disabled) { - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); -} - -.cancel-button:disabled, -.create-button:disabled { - opacity: 0.6; - cursor: not-allowed; - transform: none !important; -} - -.error-message { - background: #f8d7da; - color: #721c24; - padding: 0.75rem 1rem; - border: 1px solid #f5c6cb; - border-radius: 6px; - margin-bottom: 1rem; - font-size: 0.9rem; -} - -/* Mobile adjustments for create calendar modal */ -@media (max-width: 768px) { - .modal-backdrop { - padding: 1rem; - } - - .create-calendar-modal { - max-height: 95vh; - } - - .create-calendar-modal .modal-header, - .create-calendar-modal .modal-body { - padding-left: 1.5rem; - padding-right: 1.5rem; - } - - .color-grid { - grid-template-columns: repeat(4, 1fr); - gap: 0.5rem; - } - - .color-option { - width: 35px; - height: 35px; - } - - .modal-actions { - flex-direction: column; - gap: 0.75rem; - } - - .cancel-button, - .create-button { - width: 100%; - text-align: center; - } -} - -/* Context Menu */ -.context-menu { - background: white; - border: 1px solid #e9ecef; - border-radius: 8px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); - min-width: 160px; - overflow: hidden; - animation: contextMenuSlideIn 0.15s ease; -} - -@keyframes contextMenuSlideIn { - from { - opacity: 0; - transform: scale(0.95) translateY(-5px); - } - to { - opacity: 1; - transform: scale(1) translateY(0); - } -} - -.context-menu-item { - display: flex; - align-items: center; - padding: 0.75rem 1rem; - color: #495057; - cursor: pointer; - transition: background-color 0.2s ease; - font-size: 0.9rem; - border: none; - background: none; - width: 100%; - text-align: left; -} - -.context-menu-item:hover { - background-color: #f8f9fa; -} - -.context-menu-delete { - color: #dc3545; -} - -.context-menu-delete:hover { - background-color: #f8f9fa; - color: #dc3545; -} - -.context-menu-icon { - margin-right: 0.5rem; - font-size: 1rem; -} - -/* Prevent text selection on context menu items */ -.context-menu-item { - user-select: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; -} - -/* Event Creation Modal Styles */ -.create-event-modal { - min-width: 750px; - max-width: 900px; - width: 95%; -} - -.create-event-modal .modal-body { - max-height: 60vh; - overflow-y: auto; -} - -.create-event-modal .form-group { - margin-bottom: 1.5rem; -} - -.create-event-modal .form-group label { - display: block; - margin-bottom: 0.5rem; - color: #495057; - font-weight: 500; - font-size: 0.9rem; -} - -.create-event-modal .form-input { - width: 100%; - padding: 0.75rem; - border: 1px solid #ced4da; - border-radius: 8px; - font-size: 1rem; - transition: border-color 0.2s ease, box-shadow 0.2s ease; - font-family: inherit; - box-sizing: border-box; -} - -.create-event-modal .form-input:focus { - outline: none; - border-color: #667eea; - box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); -} - -/* Checkbox specific styling override */ -.create-event-modal input[type="checkbox"] { - width: auto; - display: inline-block; - margin-right: 0.5rem; - vertical-align: middle; -} - -.create-event-modal .form-row { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1rem; -} - -.create-event-modal .modal-footer { - display: flex; - justify-content: flex-end; - gap: 1rem; - padding: 1.5rem 2rem; - border-top: 1px solid #e9ecef; - background: #f8f9fa; -} - -/* Button Styles */ -.btn { - padding: 0.75rem 1.5rem; - border-radius: 8px; - font-size: 1rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; - border: none; - text-align: center; - text-decoration: none; - display: inline-block; - line-height: 1.5; - user-select: none; -} - -.btn:disabled { - opacity: 0.6; - cursor: not-allowed; - transform: none !important; -} - -.btn-secondary { - background: #f8f9fa; - color: #6c757d; - border: 1px solid #ced4da; -} - -.btn-secondary:hover:not(:disabled) { - background: #e9ecef; - color: #495057; - border-color: #adb5bd; -} - -.btn-primary { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - border: 1px solid transparent; -} - -.btn-primary:hover:not(:disabled) { - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); -} - -/* Weekday selection styles */ -.weekday-selection { - display: flex; - gap: 0.5rem; - flex-wrap: wrap; - margin-top: 0.5rem; -} - -.weekday-checkbox { - display: flex; - align-items: center; - cursor: pointer; - padding: 0.5rem 0.75rem; - border: 1px solid #ced4da; - border-radius: 6px; - background: white; - transition: all 0.2s ease; - user-select: none; - min-width: 3rem; - justify-content: center; -} - -.weekday-checkbox:hover { - border-color: #667eea; - background: #f8f9ff; -} - -.weekday-checkbox input[type="checkbox"] { - display: none; -} - -.weekday-checkbox input[type="checkbox"]:checked + .weekday-label { - color: white; -} - -.weekday-checkbox:has(input[type="checkbox"]:checked) { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-color: #667eea; - color: white; -} - -.weekday-label { - font-size: 0.85rem; - font-weight: 500; - color: #495057; - transition: color 0.2s ease; -} - -/* Mobile adjustments for event creation modal */ -@media (max-width: 768px) { - .create-event-modal .form-row { - grid-template-columns: 1fr; - gap: 1rem; - } - - .create-event-modal .modal-footer { - flex-direction: column; - gap: 0.75rem; - padding: 1rem 1.5rem; - } - - .create-event-modal .btn { - width: 100%; - } - - .weekday-selection { - gap: 0.25rem; - } - - .weekday-checkbox { - min-width: 2.5rem; - padding: 0.4rem 0.6rem; - } -} - -/* Recurring Edit Modal */ -.recurring-edit-modal { - max-width: 500px; - width: 95%; -} - -.recurring-edit-options { - display: flex; - flex-direction: column; - gap: 1rem; - margin: 1.5rem 0; -} - -.recurring-option { - background: white; - border: 2px solid #e9ecef; - color: #495057; - padding: 1rem; - text-align: left; - border-radius: 8px; - cursor: pointer; - transition: all 0.2s ease; -} - -.recurring-option:hover { - border-color: #667eea; - background: #f8f9ff; - color: #495057; - transform: none; - box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15); -} - -.recurring-option .option-title { - font-size: 1rem; - font-weight: 600; - margin-bottom: 0.5rem; - color: #333; -} - -.recurring-option .option-description { - font-size: 0.9rem; - color: #666; - line-height: 1.4; -} - -/* Mobile adjustments for recurring edit modal */ -@media (max-width: 768px) { - .recurring-edit-modal { - margin: 1rem; - width: calc(100% - 2rem); - } - - .recurring-option { - padding: 0.75rem; - } - - .recurring-option .option-title { - font-size: 0.9rem; - } - - .recurring-option .option-description { - font-size: 0.8rem; - } -} - -/* Tabbed Modal Interface Styles */ -.tab-navigation { - display: flex; - border-bottom: 2px solid #e9ecef; - margin-bottom: 1.5rem; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - scrollbar-width: none; - -ms-overflow-style: none; -} - -.tab-navigation::-webkit-scrollbar { - display: none; -} - -.tab-button { - background: none; - border: none; - padding: 0.75rem 1rem; - cursor: pointer; - font-size: 0.85rem; - font-weight: 500; - color: #6c757d; - transition: all 0.2s ease; - border-bottom: 3px solid transparent; - white-space: nowrap; - display: flex; - align-items: center; - gap: 0.5rem; - min-width: max-content; -} - -.tab-button:hover { - color: #495057; - background: #f8f9fa; -} - -.tab-button.active { - color: #667eea; - border-bottom-color: #667eea; - background: #f8f9ff; -} - -.tab-content { - min-height: 300px; - max-height: 50vh; - overflow-y: auto; - padding: 1rem 2rem 2rem 2rem; -} - -.tab-panel { - animation: fadeIn 0.2s ease-in-out; -} - -@keyframes fadeIn { - from { - opacity: 0; - transform: translateY(10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -/* Mobile adjustments for tabbed interface */ -@media (max-width: 768px) { - .tab-navigation { - gap: 0; - margin-bottom: 1rem; - } - - .tab-button { - padding: 0.5rem 0.75rem; - font-size: 0.8rem; - flex: 1; - justify-content: center; - min-width: unset; - } - - .tab-content { - min-height: 250px; - max-height: 45vh; - padding: 1rem 1.5rem 1.5rem 1.5rem; - } -} - -/* Form Help Text and Advanced Info Styles */ -.form-help-text { - font-size: 0.8rem; - color: #6c757d; - margin-top: 0.25rem; - margin-bottom: 0; - line-height: 1.4; - font-style: italic; -} - -.advanced-info { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1.5rem; -} - -.advanced-info h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.advanced-info ul { - margin: 0 0 0.75rem 0; - padding-left: 1.2rem; - list-style-type: disc; -} - -.advanced-info li { - font-size: 0.85rem; - color: #6c757d; - line-height: 1.4; - margin-bottom: 0.25rem; -} - -.advanced-info .form-help-text { - margin-top: 0.5rem; - margin-bottom: 0; - border-top: 1px solid #e9ecef; - padding-top: 0.5rem; -} - -/* Theme compatibility for advanced info */ -[data-theme="dark"] .advanced-info { - background: #2a2a2a; - border-color: #444444; -} - -[data-theme="dark"] .advanced-info h5 { - color: #e0e0e0; -} - -[data-theme="dark"] .advanced-info li { - color: #b0b0b0; -} - -[data-theme="dark"] .advanced-info .form-help-text { - border-color: #444444; -} - -/* People Tab Styles */ -.people-info { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1.5rem; -} - -.people-info h5, -.people-info h6 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.people-info h6 { - font-size: 0.8rem; - margin-top: 1rem; - margin-bottom: 0.5rem; -} - -.people-validation { - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid #e9ecef; -} - -.attendee-roles-preview { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1rem; -} - -.attendee-roles-preview h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.role-examples { - display: flex; - flex-direction: column; - gap: 0.5rem; - margin-bottom: 1rem; -} - -.role-item { - display: flex; - align-items: flex-start; - gap: 0.5rem; - padding: 0.5rem; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; -} - -.role-item strong { - color: #495057; - font-size: 0.85rem; - font-weight: 600; - min-width: 140px; - flex-shrink: 0; -} - -.role-item span { - color: #6c757d; - font-size: 0.85rem; - line-height: 1.3; -} - -/* Theme compatibility for people info */ -[data-theme="dark"] .people-info, -[data-theme="dark"] .attendee-roles-preview { - background: #2a2a2a; - border-color: #444444; -} - -[data-theme="dark"] .people-info h5, -[data-theme="dark"] .people-info h6, -[data-theme="dark"] .attendee-roles-preview h5 { - color: #e0e0e0; -} - -[data-theme="dark"] .people-validation { - border-color: #444444; -} - -[data-theme="dark"] .role-item { - background: #1f1f1f; - border-color: #444444; -} - -[data-theme="dark"] .role-item strong { - color: #e0e0e0; -} - -[data-theme="dark"] .role-item span { - color: #b0b0b0; -} - -/* Mobile adjustments for people tab */ -@media (max-width: 768px) { - .role-item { - flex-direction: column; - gap: 0.25rem; - } - - .role-item strong { - min-width: unset; - } -} - -/* Categories Tab Styles */ -.categories-suggestions { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1.5rem; -} - -.categories-suggestions h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.category-tags { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - margin-bottom: 0.75rem; -} - -.category-tag { - background: white; - border: 1px solid #667eea; - color: #667eea; - padding: 0.4rem 0.8rem; - border-radius: 20px; - font-size: 0.8rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; -} - -.category-tag:hover { - background: #667eea; - color: white; - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2); -} - -.categories-info { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1rem; -} - -.categories-info h5, -.categories-info h6 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.categories-info h6 { - font-size: 0.8rem; - margin-top: 1rem; - margin-bottom: 0.5rem; -} - -.resources-section { - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid #e9ecef; -} - -.resource-features { - display: flex; - flex-direction: column; - gap: 0.5rem; - margin-top: 0.75rem; -} - -.feature-item { - display: flex; - align-items: flex-start; - gap: 0.5rem; - padding: 0.5rem; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; -} - -.feature-item strong { - color: #495057; - font-size: 0.85rem; - font-weight: 600; - min-width: 140px; - flex-shrink: 0; -} - -.feature-item span { - color: #6c757d; - font-size: 0.85rem; - line-height: 1.3; -} - -.quick-actions { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1rem; -} - -.quick-actions h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.action-buttons { - display: flex; - gap: 0.5rem; - margin-bottom: 0.5rem; -} - -.action-btn { - background: #dc3545; - border: 1px solid #dc3545; - color: white; - padding: 0.5rem 1rem; - border-radius: 6px; - font-size: 0.85rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; -} - -.action-btn:hover { - background: #c82333; - border-color: #bd2130; - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2); -} - -/* Theme compatibility for categories */ -[data-theme="dark"] .categories-suggestions, -[data-theme="dark"] .categories-info, -[data-theme="dark"] .quick-actions { - background: #2a2a2a; - border-color: #444444; -} - -[data-theme="dark"] .categories-suggestions h5, -[data-theme="dark"] .categories-info h5, -[data-theme="dark"] .categories-info h6, -[data-theme="dark"] .quick-actions h5 { - color: #e0e0e0; -} - -[data-theme="dark"] .category-tag { - background: #1f1f1f; - border-color: #667eea; - color: #667eea; -} - -[data-theme="dark"] .category-tag:hover { - background: #667eea; - color: white; -} - -[data-theme="dark"] .feature-item { - background: #1f1f1f; - border-color: #444444; -} - -[data-theme="dark"] .feature-item strong { - color: #e0e0e0; -} - -[data-theme="dark"] .feature-item span { - color: #b0b0b0; -} - -[data-theme="dark"] .resources-section { - border-color: #444444; -} - -/* Mobile adjustments for categories tab */ -@media (max-width: 768px) { - .category-tags { - gap: 0.25rem; - } - - .category-tag { - padding: 0.3rem 0.6rem; - font-size: 0.75rem; - } - - .feature-item { - flex-direction: column; - gap: 0.25rem; - } - - .feature-item strong { - min-width: unset; - } - - .action-buttons { - flex-direction: column; - } -} - -/* Location Tab Styles */ -.location-suggestions { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1.5rem; -} - -.location-suggestions h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.location-tags { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - margin-bottom: 0.75rem; -} - -.location-tag { - background: white; - border: 1px solid #28a745; - color: #28a745; - padding: 0.4rem 0.8rem; - border-radius: 20px; - font-size: 0.8rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; -} - -.location-tag:hover { - background: #28a745; - color: white; - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2); -} - -.location-info { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1rem; -} - -.location-info h5, -.location-info h6 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.location-info h6 { - font-size: 0.8rem; - margin-top: 1rem; - margin-bottom: 0.5rem; -} - -.geo-section { - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid #e9ecef; -} - -.geo-features { - display: flex; - flex-direction: column; - gap: 0.5rem; - margin-top: 0.75rem; -} - -.geo-item { - display: flex; - align-items: flex-start; - gap: 0.5rem; - padding: 0.5rem; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; -} - -.geo-item strong { - color: #495057; - font-size: 0.85rem; - font-weight: 600; - min-width: 120px; - flex-shrink: 0; -} - -.geo-item span { - color: #6c757d; - font-size: 0.85rem; - line-height: 1.3; -} - -.location-types { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1rem; -} - -.location-types h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.type-examples { - display: flex; - flex-direction: column; - gap: 1rem; - margin-bottom: 1rem; -} - -.type-category { - padding: 0.75rem; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; -} - -.type-category strong { - display: block; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - margin-bottom: 0.5rem; -} - -.type-category ul { - margin: 0; - padding-left: 1.2rem; - list-style-type: disc; -} - -.type-category li { - color: #6c757d; - font-size: 0.85rem; - line-height: 1.4; - margin-bottom: 0.25rem; - font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace; - background: #f8f9fa; - padding: 0.2rem 0.4rem; - border-radius: 3px; -} - -.action-btn.secondary { - background: #6c757d; - border-color: #6c757d; -} - -.action-btn.secondary:hover { - background: #5a6268; - border-color: #545b62; - box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2); -} - -/* Theme compatibility for location */ -[data-theme="dark"] .location-suggestions, -[data-theme="dark"] .location-info, -[data-theme="dark"] .location-types { - background: #2a2a2a; - border-color: #444444; -} - -[data-theme="dark"] .location-suggestions h5, -[data-theme="dark"] .location-info h5, -[data-theme="dark"] .location-info h6, -[data-theme="dark"] .location-types h5 { - color: #e0e0e0; -} - -[data-theme="dark"] .location-tag { - background: #1f1f1f; - border-color: #28a745; - color: #28a745; -} - -[data-theme="dark"] .location-tag:hover { - background: #28a745; - color: white; -} - -[data-theme="dark"] .geo-item, -[data-theme="dark"] .type-category { - background: #1f1f1f; - border-color: #444444; -} - -[data-theme="dark"] .geo-item strong, -[data-theme="dark"] .type-category strong { - color: #e0e0e0; -} - -[data-theme="dark"] .geo-item span { - color: #b0b0b0; -} - -[data-theme="dark"] .type-category li { - color: #b0b0b0; - background: #2a2a2a; -} - -[data-theme="dark"] .geo-section { - border-color: #444444; -} - -/* Mobile adjustments for location tab */ -@media (max-width: 768px) { - .location-tags { - gap: 0.25rem; - } - - .location-tag { - padding: 0.3rem 0.6rem; - font-size: 0.75rem; - } - - .geo-item { - flex-direction: column; - gap: 0.25rem; - } - - .geo-item strong { - min-width: unset; - } - - .type-examples { - gap: 0.75rem; - } - - .type-category { - padding: 0.5rem; - } - - .type-category li { - font-size: 0.8rem; - } -} - -/* Reminders & Attachments Tab Styles */ -.reminder-types { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1.5rem; -} - -.reminder-types h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.alarm-examples { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 0.75rem; - margin-bottom: 0.75rem; -} - -.alarm-type { - padding: 0.75rem; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; - text-align: center; -} - -.alarm-type strong { - display: block; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - margin-bottom: 0.5rem; -} - -.alarm-type p { - color: #6c757d; - font-size: 0.8rem; - margin: 0; - line-height: 1.3; -} - -.reminder-info { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1rem; -} - -.reminder-info h5, -.reminder-info h6 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.reminder-info h6 { - font-size: 0.8rem; - margin-top: 1rem; - margin-bottom: 0.5rem; -} - -.attachments-section { - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid #e9ecef; -} - -.attachment-features { - display: flex; - flex-direction: column; - gap: 0.5rem; - margin-top: 0.75rem; -} - -.attachment-type { - display: flex; - align-items: flex-start; - gap: 0.5rem; - padding: 0.5rem; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; -} - -.attachment-type strong { - color: #495057; - font-size: 0.85rem; - font-weight: 600; - min-width: 120px; - flex-shrink: 0; -} - -.attachment-type span { - color: #6c757d; - font-size: 0.85rem; - line-height: 1.3; -} - -.reminder-patterns { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1rem; -} - -.reminder-patterns h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.pattern-examples { - display: flex; - flex-direction: column; - gap: 0.5rem; - margin-bottom: 0.75rem; -} - -.pattern-item { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; -} - -.pattern-item strong { - color: #495057; - font-size: 0.85rem; - font-weight: 600; - min-width: 100px; - flex-shrink: 0; -} - -.pattern-item span { - color: #6c757d; - font-size: 0.85rem; - line-height: 1.3; -} - -.action-btn.tertiary { - background: #17a2b8; - border-color: #17a2b8; - color: white; -} - -.action-btn.tertiary:hover { - background: #138496; - border-color: #117a8b; - box-shadow: 0 2px 4px rgba(23, 162, 184, 0.2); -} - -.completion-status { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - border-radius: 8px; - padding: 1.5rem; - margin-top: 2rem; - text-align: center; -} - -.completion-status h5 { - margin: 0 0 0.75rem 0; - font-size: 1.1rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.completion-status p { - margin: 0 0 1rem 0; - opacity: 0.9; - line-height: 1.5; -} - -.feature-summary { - background: rgba(255, 255, 255, 0.1); - border-radius: 6px; - padding: 1rem; - margin-top: 1rem; -} - -.summary-row { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.5rem 0; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); -} - -.summary-row:last-child { - border-bottom: none; -} - -.tab-name { - font-weight: 600; - font-size: 0.9rem; -} - -.tab-desc { - font-size: 0.8rem; - opacity: 0.8; - text-align: right; - max-width: 60%; -} - -/* Theme compatibility for reminders */ -[data-theme="dark"] .reminder-types, -[data-theme="dark"] .reminder-info, -[data-theme="dark"] .reminder-patterns { - background: #2a2a2a; - border-color: #444444; -} - -[data-theme="dark"] .reminder-types h5, -[data-theme="dark"] .reminder-info h5, -[data-theme="dark"] .reminder-info h6, -[data-theme="dark"] .reminder-patterns h5 { - color: #e0e0e0; -} - -[data-theme="dark"] .alarm-type, -[data-theme="dark"] .attachment-type, -[data-theme="dark"] .pattern-item { - background: #1f1f1f; - border-color: #444444; -} - -[data-theme="dark"] .alarm-type strong, -[data-theme="dark"] .attachment-type strong, -[data-theme="dark"] .pattern-item strong { - color: #e0e0e0; -} - -[data-theme="dark"] .alarm-type p, -[data-theme="dark"] .attachment-type span, -[data-theme="dark"] .pattern-item span { - color: #b0b0b0; -} - -[data-theme="dark"] .attachments-section { - border-color: #444444; -} - -/* Mobile adjustments for reminders tab */ -@media (max-width: 768px) { - .alarm-examples { - grid-template-columns: 1fr; - gap: 0.5rem; - } - - .alarm-type { - padding: 0.5rem; - } - - .attachment-type, - .pattern-item { - flex-direction: column; - gap: 0.25rem; - align-items: flex-start; - } - - .attachment-type strong, - .pattern-item strong { - min-width: unset; - } - - .summary-row { - flex-direction: column; - align-items: flex-start; - gap: 0.25rem; - } - - .tab-desc { - text-align: left; - max-width: 100%; - } - - .completion-status { - padding: 1rem; - } - - .completion-status h5 { - font-size: 1rem; - } -} - -/* Theme Selector Styles */ -.theme-selector { - margin-bottom: 1rem; -} - -.theme-selector-dropdown { - width: 100%; - padding: 0.5rem; - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 6px; - color: white; - font-size: 0.85rem; - cursor: pointer; - transition: all 0.2s ease; -} - -.theme-selector-dropdown:hover { - background: rgba(255, 255, 255, 0.15); - border-color: rgba(255, 255, 255, 0.3); -} - -.theme-selector-dropdown:focus { - outline: none; - background: rgba(255, 255, 255, 0.2); - border-color: rgba(255, 255, 255, 0.4); -} - -.theme-selector-dropdown option { - background: #333; - color: white; - padding: 0.5rem; -} - -/* Theme Definitions */ -:root { - /* Default Theme */ - --primary-gradient: linear-gradient(180deg, #667eea 0%, #764ba2 100%); - --primary-bg: #f8f9fa; - --primary-text: #333; - --sidebar-bg: linear-gradient(180deg, #667eea 0%, #764ba2 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - --header-text: white; - --card-bg: white; - --border-color: #e9ecef; - --accent-color: #667eea; - --calendar-bg: white; - --calendar-border: #f0f0f0; - --calendar-day-bg: white; - --calendar-day-hover: #f8f9ff; - --calendar-day-prev-next: #fafafa; - --calendar-day-prev-next-text: #ccc; - --calendar-today-bg: #e3f2fd; - --calendar-today-border: #2196f3; - --calendar-today-text: #1976d2; - --calendar-selected-bg: #e8f5e8; - --calendar-selected-border: #4caf50; - --calendar-selected-text: #2e7d32; - --calendar-has-events-bg: #fff3e0; - --weekday-header-bg: #f8f9fa; - --weekday-header-text: #666; - --time-label-bg: #f8f9fa; - --time-label-text: #666; - --time-label-border: #e9ecef; - --event-colors: #3B82F6, #10B981, #F59E0B, #EF4444, #8B5CF6, #06B6D4, #84CC16, #F97316, #EC4899, #6366F1, #14B8A6, #F3B806, #8B5A2B, #6B7280, #DC2626, #7C3AED; -} - -/* Ocean Theme */ -[data-theme="ocean"] { - --primary-gradient: linear-gradient(180deg, #2196F3 0%, #0277BD 100%); - --primary-bg: #e3f2fd; - --primary-text: #0d47a1; - --sidebar-bg: linear-gradient(180deg, #2196F3 0%, #0277BD 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #2196F3 0%, #0277BD 100%); - --header-text: white; - --card-bg: #ffffff; - --border-color: #bbdefb; - --accent-color: #2196F3; - --calendar-bg: #ffffff; - --calendar-border: #bbdefb; - --calendar-day-bg: #ffffff; - --calendar-day-hover: #e1f5fe; - --calendar-day-prev-next: #f3f8ff; - --calendar-day-prev-next-text: #90caf9; - --calendar-today-bg: #b3e5fc; - --calendar-today-border: #0277BD; - --calendar-today-text: #01579b; - --calendar-selected-bg: #e0f7fa; - --calendar-selected-border: #00acc1; - --calendar-selected-text: #00695c; - --calendar-has-events-bg: #fff8e1; - --weekday-header-bg: #e3f2fd; - --weekday-header-text: #0d47a1; - --time-label-bg: #e3f2fd; - --time-label-text: #0d47a1; - --time-label-border: #bbdefb; - --event-colors: #2196F3, #03DAC6, #FF9800, #F44336, #9C27B0, #00BCD4, #8BC34A, #FF5722, #E91E63, #3F51B5, #009688, #FFC107, #607D8B, #795548, #E53935, #673AB7; -} - -[data-theme="ocean"] body { - background-color: var(--primary-bg); - color: var(--primary-text); -} - -[data-theme="ocean"] .app-sidebar { - background: var(--sidebar-bg); -} - -/* Forest Theme */ -[data-theme="forest"] { - --primary-gradient: linear-gradient(180deg, #4CAF50 0%, #2E7D32 100%); - --primary-bg: #e8f5e8; - --primary-text: #1b5e20; - --sidebar-bg: linear-gradient(180deg, #4CAF50 0%, #2E7D32 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%); - --header-text: white; - --card-bg: #ffffff; - --border-color: #c8e6c9; - --accent-color: #4CAF50; - --calendar-bg: #ffffff; - --calendar-border: #c8e6c9; - --calendar-day-bg: #ffffff; - --calendar-day-hover: #f1f8e9; - --calendar-day-prev-next: #f9fbe7; - --calendar-day-prev-next-text: #a5d6a7; - --calendar-today-bg: #c8e6c9; - --calendar-today-border: #2E7D32; - --calendar-today-text: #1b5e20; - --calendar-selected-bg: #e8f5e8; - --calendar-selected-border: #388e3c; - --calendar-selected-text: #2e7d32; - --calendar-has-events-bg: #fff3e0; - --weekday-header-bg: #e8f5e8; - --weekday-header-text: #1b5e20; - --time-label-bg: #e8f5e8; - --time-label-text: #1b5e20; - --time-label-border: #c8e6c9; - --event-colors: #4CAF50, #8BC34A, #FF9800, #FF5722, #9C27B0, #03DAC6, #CDDC39, #FF6F00, #E91E63, #3F51B5, #009688, #FFC107, #795548, #607D8B, #F44336, #673AB7; -} - -[data-theme="forest"] body { - background-color: var(--primary-bg); - color: var(--primary-text); -} - -[data-theme="forest"] .app-sidebar { - background: var(--sidebar-bg); -} - -/* Sunset Theme */ -[data-theme="sunset"] { - --primary-gradient: linear-gradient(180deg, #FF9800 0%, #F57C00 100%); - --primary-bg: #fff3e0; - --primary-text: #e65100; - --sidebar-bg: linear-gradient(180deg, #FF9800 0%, #F57C00 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #FF9800 0%, #F57C00 100%); - --header-text: white; - --card-bg: #ffffff; - --border-color: #ffcc02; - --accent-color: #FF9800; - --calendar-bg: #ffffff; - --calendar-border: #ffe0b2; - --calendar-day-bg: #ffffff; - --calendar-day-hover: #fff8e1; - --calendar-day-prev-next: #fffde7; - --calendar-day-prev-next-text: #ffcc02; - --calendar-today-bg: #ffe0b2; - --calendar-today-border: #F57C00; - --calendar-today-text: #e65100; - --calendar-selected-bg: #fff3e0; - --calendar-selected-border: #ff8f00; - --calendar-selected-text: #ff6f00; - --calendar-has-events-bg: #f3e5f5; - --weekday-header-bg: #fff3e0; - --weekday-header-text: #e65100; - --time-label-bg: #fff3e0; - --time-label-text: #e65100; - --time-label-border: #ffe0b2; - --event-colors: #FF9800, #FF5722, #F44336, #E91E63, #9C27B0, #673AB7, #3F51B5, #2196F3, #03DAC6, #009688, #4CAF50, #8BC34A, #CDDC39, #FFC107, #FF6F00, #795548; -} - -[data-theme="sunset"] body { - background-color: var(--primary-bg); - color: var(--primary-text); -} - -[data-theme="sunset"] .app-sidebar { - background: var(--sidebar-bg); -} - -/* Purple Theme */ -[data-theme="purple"] { - --primary-gradient: linear-gradient(180deg, #9C27B0 0%, #6A1B9A 100%); - --primary-bg: #f3e5f5; - --primary-text: #4a148c; - --sidebar-bg: linear-gradient(180deg, #9C27B0 0%, #6A1B9A 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #9C27B0 0%, #6A1B9A 100%); - --header-text: white; - --card-bg: #ffffff; - --border-color: #ce93d8; - --accent-color: #9C27B0; - --calendar-bg: #ffffff; - --calendar-border: #ce93d8; - --calendar-day-bg: #ffffff; - --calendar-day-hover: #f8e9fc; - --calendar-day-prev-next: #fce4ec; - --calendar-day-prev-next-text: #ce93d8; - --calendar-today-bg: #e1bee7; - --calendar-today-border: #6A1B9A; - --calendar-today-text: #4a148c; - --calendar-selected-bg: #f3e5f5; - --calendar-selected-border: #8e24aa; - --calendar-selected-text: #6a1b9a; - --calendar-has-events-bg: #fff3e0; - --weekday-header-bg: #f3e5f5; - --weekday-header-text: #4a148c; - --time-label-bg: #f3e5f5; - --time-label-text: #4a148c; - --time-label-border: #ce93d8; - --event-colors: #9C27B0, #673AB7, #3F51B5, #2196F3, #03DAC6, #009688, #4CAF50, #8BC34A, #CDDC39, #FFC107, #FF9800, #FF5722, #F44336, #E91E63, #795548, #607D8B; -} - -[data-theme="purple"] body { - background-color: var(--primary-bg); - color: var(--primary-text); -} - -[data-theme="purple"] .app-sidebar { - background: var(--sidebar-bg); -} - -/* Dark Theme */ -[data-theme="dark"] { - --primary-gradient: linear-gradient(180deg, #424242 0%, #212121 100%); - --primary-bg: #121212; - --primary-text: #ffffff; - --sidebar-bg: linear-gradient(180deg, #424242 0%, #212121 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #424242 0%, #212121 100%); - --header-text: white; - --card-bg: #1e1e1e; - --border-color: #333333; - --accent-color: #666666; - --calendar-bg: #1f1f1f; - --calendar-border: #333333; - --calendar-day-bg: #1f1f1f; - --calendar-day-hover: #2a2a2a; - --calendar-day-prev-next: #1a1a1a; - --calendar-day-prev-next-text: #555; - --calendar-today-bg: #2d2d2d; - --calendar-today-border: #bb86fc; - --calendar-today-text: #bb86fc; - --calendar-selected-bg: #2a2a2a; - --calendar-selected-border: #bb86fc; - --calendar-selected-text: #bb86fc; - --calendar-has-events-bg: #272727; - --weekday-header-bg: #1a1a1a; - --weekday-header-text: #e0e0e0; - --time-label-bg: #1a1a1a; - --time-label-text: #e0e0e0; - --time-label-border: #333333; - --event-colors: #bb86fc, #03dac6, #cf6679, #ff9800, #4caf50, #2196f3, #9c27b0, #f44336, #795548, #607d8b, #e91e63, #3f51b5, #009688, #8bc34a, #ffc107, #ff5722; -} - -[data-theme="dark"] body { - background-color: var(--primary-bg); - color: var(--primary-text); -} - -[data-theme="dark"] .app-sidebar { - background: var(--sidebar-bg); -} - -[data-theme="dark"] .app-main { - background-color: var(--primary-bg); -} - -[data-theme="dark"] .calendar-day { - background: var(--card-bg); - border-color: var(--border-color); - color: var(--primary-text); -} - -/* Rose Theme */ -[data-theme="rose"] { - --primary-gradient: linear-gradient(180deg, #E91E63 0%, #AD1457 100%); - --primary-bg: #fce4ec; - --primary-text: #880e4f; - --sidebar-bg: linear-gradient(180deg, #E91E63 0%, #AD1457 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #E91E63 0%, #AD1457 100%); - --header-text: white; - --card-bg: #ffffff; - --border-color: #f8bbd9; - --accent-color: #E91E63; - --calendar-bg: #ffffff; - --calendar-border: #f8bbd9; - --calendar-day-bg: #ffffff; - --calendar-day-hover: #fdf2f8; - --calendar-day-prev-next: #fef7ff; - --calendar-day-prev-next-text: #f8bbd9; - --calendar-today-bg: #f48fb1; - --calendar-today-border: #AD1457; - --calendar-today-text: #880e4f; - --calendar-selected-bg: #fce4ec; - --calendar-selected-border: #c2185b; - --calendar-selected-text: #ad1457; - --calendar-has-events-bg: #fff3e0; - --weekday-header-bg: #fce4ec; - --weekday-header-text: #880e4f; - --time-label-bg: #fce4ec; - --time-label-text: #880e4f; - --time-label-border: #f8bbd9; - --event-colors: #E91E63, #9C27B0, #673AB7, #3F51B5, #2196F3, #03DAC6, #009688, #4CAF50, #8BC34A, #CDDC39, #FFC107, #FF9800, #FF5722, #F44336, #795548, #607D8B; -} - -[data-theme="rose"] body { - background-color: var(--primary-bg); - color: var(--primary-text); -} - -[data-theme="rose"] .app-sidebar { - background: var(--sidebar-bg); -} - -/* Mint Theme */ -[data-theme="mint"] { - --primary-gradient: linear-gradient(180deg, #26A69A 0%, #00695C 100%); - --primary-bg: #e0f2f1; - --primary-text: #004d40; - --sidebar-bg: linear-gradient(180deg, #26A69A 0%, #00695C 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #26A69A 0%, #00695C 100%); - --header-text: white; - --card-bg: #ffffff; - --border-color: #b2dfdb; - --accent-color: #26A69A; - --calendar-bg: #ffffff; - --calendar-border: #b2dfdb; - --calendar-day-bg: #ffffff; - --calendar-day-hover: #f0fdfc; - --calendar-day-prev-next: #f7ffff; - --calendar-day-prev-next-text: #b2dfdb; - --calendar-today-bg: #b2dfdb; - --calendar-today-border: #00695C; - --calendar-today-text: #004d40; - --calendar-selected-bg: #e0f2f1; - --calendar-selected-border: #00897b; - --calendar-selected-text: #00695c; - --calendar-has-events-bg: #fff3e0; - --weekday-header-bg: #e0f2f1; - --weekday-header-text: #004d40; - --time-label-bg: #e0f2f1; - --time-label-text: #004d40; - --time-label-border: #b2dfdb; - --event-colors: #26A69A, #009688, #4CAF50, #8BC34A, #CDDC39, #FFC107, #FF9800, #FF5722, #F44336, #E91E63, #9C27B0, #673AB7, #3F51B5, #2196F3, #795548, #607D8B; -} - -[data-theme="mint"] body { - background-color: var(--primary-bg); - color: var(--primary-text); -} - -[data-theme="mint"] .app-sidebar { - background: var(--sidebar-bg); -} - -/* Recurrence Options Styling */ -.recurrence-options { - margin-top: 1.5rem; - padding: 1rem; - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; -} - -.interval-input { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.interval-input input { - width: 80px; - flex-shrink: 0; -} - -.interval-unit { - color: #6c757d; - font-size: 0.9rem; -} - -.end-options { - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -.end-option { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.end-option .radio-label { - display: flex; - align-items: center; - gap: 0.25rem; - margin-right: 0.5rem; - white-space: nowrap; - cursor: pointer; -} - -.end-option input[type="date"], -.end-option input[type="number"] { - width: 120px; -} - -.count-input { - width: 80px !important; -} - -.count-unit { - color: #6c757d; - font-size: 0.9rem; -} - -.monthly-options { - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -.monthly-option { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.monthly-option .radio-label { - display: flex; - align-items: center; - gap: 0.25rem; - margin-right: 0.5rem; - white-space: nowrap; - cursor: pointer; -} - -.day-input { - width: 80px !important; -} - -.yearly-months { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 0.5rem; - margin-top: 0.5rem; -} - -.month-checkbox { - display: flex; - align-items: center; - gap: 0.25rem; - padding: 0.25rem 0.5rem; - border: 1px solid #e9ecef; - border-radius: 4px; - cursor: pointer; - transition: all 0.2s ease; -} - -.month-checkbox:hover { - background-color: #f8f9fa; - border-color: #ced4da; -} - -.month-checkbox input[type="checkbox"] { - width: auto !important; - margin: 0 !important; -} - -.month-label { - font-size: 0.9rem; - user-select: none; -} - -/* Radio button styling */ -.radio-label input[type="radio"] { - width: auto !important; - margin: 0 !important; - margin-right: 0.25rem !important; -} - -/* Mobile responsive adjustments */ -@media (max-width: 768px) { - .end-options { - gap: 0.5rem; - } - - .end-option { - flex-direction: column; - align-items: flex-start; - gap: 0.25rem; - } - - .monthly-option { - flex-direction: column; - align-items: flex-start; - gap: 0.25rem; - } - - .yearly-months { - grid-template-columns: repeat(2, 1fr); - } -} diff --git a/frontend/styles/base.css b/frontend/styles/base.css deleted file mode 100644 index 9652909..0000000 --- a/frontend/styles/base.css +++ /dev/null @@ -1,51 +0,0 @@ -/* Base Styles - Always Loaded */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background-color: #f8f9fa; - color: #333; - line-height: 1.6; -} - -.app { - min-height: 100vh; - display: flex; - flex-direction: row; -} - -.login-layout { - min-height: 100vh; - display: flex; - flex-direction: column; - width: 100%; -} - -/* Base Layout */ -.main-content { - flex: 1; - margin-left: 280px; - overflow-x: hidden; -} - -/* Basic Form Elements */ -input, select, textarea, button { - font-family: inherit; -} - -/* Utility Classes */ -.loading { - opacity: 0.7; -} - -.error { - color: #dc3545; -} - -.success { - color: #28a745; -} \ No newline at end of file diff --git a/frontend/styles/default.css b/frontend/styles/default.css deleted file mode 100644 index 00fea31..0000000 --- a/frontend/styles/default.css +++ /dev/null @@ -1,3511 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background-color: #f8f9fa; - color: #333; - line-height: 1.6; -} - -.app { - min-height: 100vh; - display: flex; - flex-direction: row; -} - -.login-layout { - min-height: 100vh; - display: flex; - flex-direction: column; - width: 100%; -} - -/* Sidebar Styles */ -.app-sidebar { - width: 280px; - min-height: 100vh; - background: linear-gradient(180deg, #667eea 0%, #764ba2 100%); - color: white; - display: flex; - flex-direction: column; - box-shadow: 2px 0 8px rgba(0,0,0,0.1); - position: fixed; - left: 0; - top: 0; - z-index: 100; -} - -.sidebar-header { - padding: 2rem 1.5rem 1.5rem; - border-bottom: 1px solid rgba(255,255,255,0.2); -} - -.sidebar-header h1 { - margin: 0 0 1rem 0; - font-size: 1.8rem; - font-weight: 600; - text-align: center; -} - -.user-info { - text-align: center; - margin-bottom: 0.5rem; -} - -.user-info .username { - font-size: 1.1rem; - font-weight: 600; - color: white; - margin-bottom: 0.25rem; -} - -.user-info .server-url { - font-size: 0.8rem; - color: rgba(255,255,255,0.7); - word-break: break-all; - line-height: 1.2; -} - -.user-info.loading { - font-size: 0.9rem; - color: rgba(255,255,255,0.6); - font-style: italic; -} - -.sidebar-nav { - padding: 1rem; - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.sidebar-nav .nav-link { - color: white; - text-decoration: none; - padding: 0.75rem 1rem; - border-radius: 8px; - transition: all 0.2s; - font-weight: 500; - display: flex; - align-items: center; -} - -.sidebar-nav .nav-link:hover { - background-color: rgba(255,255,255,0.15); - transform: translateX(4px); -} - -.sidebar-nav .nav-link.active { - background-color: rgba(255,255,255,0.2); - box-shadow: 0 2px 4px rgba(0,0,0,0.1); -} - -.calendar-list { - flex: 1; - padding: 1rem; - border-top: 1px solid rgba(255,255,255,0.1); -} - -.calendar-list h3 { - color: white; - font-size: 1rem; - font-weight: 600; - margin: 0 0 1rem 0; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.calendar-list ul { - list-style: none; - margin: 0; - padding: 0; - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.calendar-list li { - display: flex; - align-items: center; - padding: 0.5rem 0.75rem; - background: rgba(255,255,255,0.1); - border-radius: 6px; - transition: all 0.2s; - cursor: pointer; - gap: 0.75rem; -} - -.calendar-list li:hover { - background: rgba(255,255,255,0.15); - transform: translateX(2px); -} - -.calendar-color { - width: 16px; - height: 16px; - border-radius: 50%; - flex-shrink: 0; - border: 2px solid rgba(255,255,255,0.3); - transition: all 0.2s; - cursor: pointer; - position: relative; -} - -.calendar-list li:hover .calendar-color { - border-color: rgba(255,255,255,0.6); - transform: scale(1.1); -} - -.color-picker { - position: absolute; - top: 100%; - left: 0; - background: white; - border-radius: 8px; - padding: 8px; - box-shadow: 0 4px 12px rgba(0,0,0,0.15); - z-index: 1000; - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 6px; - min-width: 120px; - border: 1px solid rgba(0,0,0,0.1); -} - -.color-option { - width: 20px; - height: 20px; - border-radius: 50%; - border: 2px solid rgba(0,0,0,0.1); - cursor: pointer; - transition: all 0.2s; -} - -.color-option:hover { - transform: scale(1.2); - border-color: rgba(0,0,0,0.3); -} - -.color-option.selected { - border-color: #333; - border-width: 3px; - transform: scale(1.1); -} - -.color-picker-overlay { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 999; -} - -.calendar-name { - color: white; - font-size: 0.9rem; - font-weight: 500; - flex: 1; -} - -.no-calendars { - padding: 1rem; - text-align: center; - color: rgba(255,255,255,0.6); - font-size: 0.9rem; - font-style: italic; - border-top: 1px solid rgba(255,255,255,0.1); -} - -.sidebar-footer { - padding: 1rem; - border-top: 1px solid rgba(255,255,255,0.1); -} - -.app-main { - flex: 1; - margin-left: 280px; - padding: 2rem; - max-width: calc(100% - 280px); - width: calc(100% - 280px); - box-sizing: border-box; -} - -/* Authentication Forms */ -.login-container, .register-container { - display: flex; - justify-content: center; - align-items: center; - min-height: 60vh; -} - -.login-form, .register-form { - background: white; - padding: 2rem; - border-radius: 8px; - box-shadow: 0 4px 6px rgba(0,0,0,0.1); - width: 100%; - max-width: 400px; -} - -.login-form h2, .register-form h2 { - text-align: center; - margin-bottom: 2rem; - color: #333; -} - -.form-group { - margin-bottom: 1.5rem; -} - -.form-group label { - display: block; - margin-bottom: 0.5rem; - font-weight: 500; - color: #555; -} - -.form-group input { - width: 100%; - padding: 0.75rem; - border: 1px solid #ddd; - border-radius: 4px; - font-size: 1rem; - transition: border-color 0.2s; -} - -.form-group input:focus { - outline: none; - border-color: #667eea; - box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2); -} - -.form-group input:disabled { - background-color: #f5f5f5; - cursor: not-allowed; -} - -.remember-checkbox { - display: flex; - align-items: center; - gap: 0.375rem; - margin-top: 0.375rem; - opacity: 0.7; -} - -.remember-checkbox input[type="checkbox"] { - width: auto; - margin: 0; - cursor: pointer; - transform: scale(0.85); -} - -.remember-checkbox label { - margin: 0; - font-size: 0.75rem; - color: #888; - cursor: pointer; - user-select: none; - font-weight: 400; -} - -.login-button, .register-button { - width: 100%; - padding: 0.75rem; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - border: none; - border-radius: 4px; - font-size: 1rem; - font-weight: 500; - cursor: pointer; - transition: transform 0.2s, box-shadow 0.2s; -} - -.login-button:hover, .register-button:hover { - transform: translateY(-1px); - box-shadow: 0 4px 8px rgba(0,0,0,0.2); -} - -.login-button:disabled, .register-button:disabled { - background: #ccc; - transform: none; - cursor: not-allowed; -} - -.error-message { - background-color: #f8d7da; - color: #721c24; - padding: 0.75rem; - border-radius: 4px; - margin-bottom: 1rem; - border: 1px solid #f5c6cb; -} - -.auth-links { - text-align: center; - margin-top: 2rem; - color: #666; -} - -.auth-links a { - color: #667eea; - text-decoration: none; -} - -.auth-links a:hover { - text-decoration: underline; -} - -.logout-button { - background: rgba(255,255,255,0.1); - border: 1px solid rgba(255,255,255,0.2); - color: white; - padding: 0.75rem 1rem; - border-radius: 8px; - cursor: pointer; - transition: all 0.2s; - font-weight: 500; - width: 100%; -} - -.logout-button:hover { - background: rgba(255,255,255,0.2); - transform: translateY(-1px); -} - -/* Calendar View */ -.calendar-view { - height: calc(100vh - 4rem); /* Full height minus main padding */ - display: flex; - flex-direction: column; -} - -.calendar-loading, .calendar-error { - display: flex; - align-items: center; - justify-content: center; - height: 100%; - background: white; - border-radius: 12px; - box-shadow: 0 4px 16px rgba(0,0,0,0.1); -} - -.calendar-loading p { - font-size: 1.2rem; - color: #666; -} - -.calendar-error p { - font-size: 1.2rem; - color: #d32f2f; -} - -/* Calendar Component */ -.calendar { - background: var(--calendar-bg, white); - border-radius: 12px; - box-shadow: 0 4px 16px rgba(0,0,0,0.1); - overflow: hidden; - flex: 1; - display: flex; - flex-direction: column; -} - -.calendar-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 1.5rem 2rem; - background: var(--header-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%)); - color: var(--header-text, white); -} - -.month-year { - font-size: 1.8rem; - font-weight: 600; - margin: 0; - position: absolute; - left: 50%; - transform: translateX(-50%); -} - -.header-left { - display: flex; - align-items: center; - gap: 8px; -} - -.header-right { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.time-increment-button { - background: rgba(255,255,255,0.2); - border: none; - color: white; - font-size: 14px; - font-weight: bold; - width: 40px; - height: 40px; - border-radius: 50%; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: background-color 0.2s; -} - -.time-increment-button:hover { - background: rgba(255,255,255,0.3); -} - -.nav-button { - background: rgba(255,255,255,0.2); - border: none; - color: white; - font-size: 1.5rem; - font-weight: bold; - width: 40px; - height: 40px; - border-radius: 50%; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: background-color 0.2s; -} - -.nav-button:hover { - background: rgba(255,255,255,0.3); -} - -.today-button { - background: rgba(255,255,255,0.2); - border: none; - color: white; - font-size: 0.9rem; - font-weight: 500; - padding: 0.5rem 1rem; - border-radius: 20px; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: background-color 0.2s; -} - -.today-button:hover { - background: rgba(255,255,255,0.3); -} - -.calendar-grid { - display: grid; - grid-template-columns: repeat(7, 1fr); - grid-template-rows: auto repeat(6, 1fr); - flex: 1; - background: var(--calendar-bg, white); - gap: 0; -} - -/* Week View Container */ -.week-view-container { - display: flex; - flex-direction: column; - height: 100%; - background: var(--calendar-bg, white); -} - -/* Week Header */ -.week-header { - display: grid; - grid-template-columns: 80px repeat(7, 1fr); - background: var(--weekday-header-bg, #f8f9fa); - border-bottom: 2px solid var(--time-label-border, #e9ecef); - position: sticky; - top: 0; - z-index: 10; -} - -.time-gutter { - background: var(--time-label-bg, #f8f9fa); - border-right: 1px solid var(--time-label-border, #e9ecef); -} - -.week-day-header { - padding: 1rem; - text-align: center; - border-right: 1px solid var(--time-label-border, #e9ecef); - background: var(--weekday-header-bg, #f8f9fa); - color: var(--weekday-header-text, inherit); -} - -.week-day-header.today { - background: var(--calendar-today-bg, #e3f2fd); - color: var(--calendar-today-text, #1976d2); -} - -.weekday-name { - font-size: 0.9rem; - font-weight: 600; - color: var(--weekday-header-text, #666); - text-transform: uppercase; - letter-spacing: 0.5px; - margin-bottom: 0.25rem; -} - -.week-day-header .day-number { - font-size: 1.5rem; - font-weight: 700; -} - -.week-day-header.today .weekday-name { - color: var(--calendar-today-text, #1976d2); -} - -/* Week Content */ -.week-content { - flex: 1; - overflow-y: auto; - overflow-x: hidden; -} - -.time-grid { - display: grid; - grid-template-columns: 80px 1fr; - min-height: 100%; -} - -/* Time Labels */ -.time-labels { - background: var(--time-label-bg, #f8f9fa); - border-right: 1px solid var(--time-label-border, #e9ecef); - position: sticky; - left: 0; - z-index: 5; -} - -.time-label { - height: 60px; - display: flex; - align-items: flex-start; - justify-content: center; - padding-top: 0.5rem; - font-size: 0.75rem; - color: var(--time-label-text, #666); - border-bottom: 1px solid var(--calendar-border, #f0f0f0); - font-weight: 500; -} - -.time-label.final-boundary { - height: 60px; /* Keep same height but this marks the end boundary */ - border-bottom: 2px solid #e9ecef; /* Stronger border to show day end */ - color: #999; /* Lighter color to indicate it's the boundary */ - font-size: 0.7rem; -} - -/* Week Days Grid */ -.week-days-grid { - display: grid; - grid-template-columns: repeat(7, 1fr); -} - -.week-day-column { - position: relative; - border-right: 1px solid var(--time-label-border, #e9ecef); - min-height: 1500px; /* 25 time labels × 60px = 1500px total */ -} - -.week-day-column:last-child { - border-right: none; -} - -.week-day-column.today { - background: var(--calendar-day-hover, #fafffe); -} - -/* Time Slots */ -.time-slot { - height: 60px; - border-bottom: 1px solid var(--calendar-border, #f0f0f0); - position: relative; - pointer-events: none; /* Don't capture mouse events */ -} - -.time-slot-half { - height: 30px; - border-bottom: 1px dotted var(--calendar-border, #f5f5f5); - pointer-events: none; /* Don't capture mouse events */ -} - -.time-slot-half:last-child { - border-bottom: none; -} - -.time-slot-quarter { - height: 30px; - border-bottom: 1px dotted var(--calendar-border-light, #f8f8f8); - pointer-events: none; /* Don't capture mouse events */ -} - -.time-slot-quarter:last-child { - border-bottom: none; -} - -.time-slot.boundary-slot { - height: 60px; /* Match the final time label height */ - border-bottom: 2px solid #e9ecef; /* Strong border to match final boundary */ - background: rgba(0,0,0,0.02); /* Slightly different background to indicate boundary */ - pointer-events: none; /* Don't capture mouse events */ -} - -/* Events Container */ -.events-container { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - pointer-events: none; /* Container doesn't capture, but children (events) do */ -} - -/* Week Events */ -.week-event { - position: absolute !important; - left: 4px; - right: 4px; - min-height: 20px; - background: #3B82F6; - color: white; - padding: 2px 6px; - border-radius: 4px; - font-size: 0.75rem; - line-height: 1.3; - cursor: pointer; - pointer-events: auto; - z-index: 3; - border: 1px solid rgba(255,255,255,0.2); - text-shadow: 0 1px 1px rgba(0,0,0,0.3); - font-weight: 500; - box-shadow: 0 1px 3px rgba(0,0,0,0.1); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.week-event:hover { - filter: brightness(1.1); - z-index: 4; - box-shadow: 0 2px 6px rgba(0,0,0,0.15); -} - -.week-event.refreshing { - animation: pulse 1.5s ease-in-out infinite alternate; - border-color: #ff9800; -} - -/* Temporary event box during drag creation */ -.temp-event-box { - position: absolute; - left: 4px; - right: 4px; - background: rgba(59, 130, 246, 0.3); - border: 2px dashed rgba(59, 130, 246, 0.8); - border-radius: 4px; - color: rgba(59, 130, 246, 0.9); - font-size: 0.75rem; - font-weight: 600; - padding: 4px 6px; - display: flex; - align-items: center; - justify-content: center; - pointer-events: none; - z-index: 6; /* Higher than events */ - text-align: center; - user-select: none; -} - -/* Moving event during drag */ -.temp-event-box.moving-event { - background: inherit; /* Use the event's actual color */ - border: 2px solid rgba(255, 255, 255, 0.8); - color: white; - flex-direction: column; - align-items: flex-start; - justify-content: flex-start; - text-align: left; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); - transform: scale(1.02); -} - -.temp-event-box.moving-event .event-title { - font-weight: 600; - margin-bottom: 2px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 100%; -} - -.temp-event-box.moving-event .event-time { - font-size: 0.65rem; - opacity: 0.9; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 100%; -} - -/* Resizing event during drag */ -.temp-event-box.resizing-event { - background: inherit; - border: 2px solid rgba(255, 255, 255, 0.9); - color: white; - flex-direction: column; - align-items: flex-start; - justify-content: flex-start; - text-align: left; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); - transform: scale(1.01); -} - -.temp-event-box.resizing-event .event-title { - font-weight: 600; - margin-bottom: 2px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 100%; -} - -.temp-event-box.resizing-event .event-time { - font-size: 0.65rem; - opacity: 0.9; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 100%; -} - -/* Event resize zones and handles */ -/* Remove position: relative to allow absolute positioning for correct event placement */ - -.week-event .event-content { - padding: 2px; - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - pointer-events: auto; - z-index: 5; - position: relative; -} - -/* Left-click drag handles */ -.resize-handle { - position: absolute; - left: 0; - right: 0; - height: 4px; - background: transparent; - cursor: ns-resize; - z-index: 10; - transition: background-color 0.2s; -} - -.resize-handle-top { - top: 0; - border-top: 2px solid transparent; -} - -.resize-handle-bottom { - bottom: 0; - border-bottom: 2px solid transparent; -} - -.week-event:hover .resize-handle { - background: rgba(255, 255, 255, 0.3); -} - -.week-event:hover .resize-handle-top { - border-top-color: rgba(255, 255, 255, 0.8); -} - -.week-event:hover .resize-handle-bottom { - border-bottom-color: rgba(255, 255, 255, 0.8); -} - -.resize-handle:hover { - background: rgba(255, 255, 255, 0.5) !important; - border-color: rgba(255, 255, 255, 1) !important; -} - - -.week-event .event-title { - font-weight: 600; - margin-bottom: 2px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.week-event .event-time { - font-size: 0.65rem; - opacity: 0.9; - font-weight: 400; -} - -.week-event.all-day { - opacity: 0.9; - border-left: 4px solid rgba(255,255,255,0.5); - font-style: italic; - background: linear-gradient(135deg, var(--event-color, #3B82F6), rgba(255,255,255,0.1)) !important; -} - -/* Legacy Week Grid (for backward compatibility) */ -.week-grid { - display: grid; - grid-template-columns: repeat(7, 1fr); - grid-template-rows: auto 1fr; - flex: 1; - background: var(--calendar-bg, white); -} - -.week-view .calendar-day { - height: 100%; /* Make week view days stretch to full height of their grid cell */ -} - -.weekday-header { - background: #f8f9fa; - padding: 1rem; - text-align: center; - font-weight: 600; - color: #666; - border-bottom: 1px solid #e9ecef; - font-size: 0.9rem; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.calendar-day { - border: 1px solid var(--calendar-border, #f0f0f0); - padding: 0.75rem; - display: flex; - flex-direction: column; - cursor: pointer; - transition: background-color 0.2s; - position: relative; - overflow: hidden; - background: var(--calendar-day-bg, white); -} - -.calendar-day:hover { - background-color: var(--calendar-day-hover, #f8f9ff); -} - -.calendar-day.current-month { - background: var(--calendar-day-bg, white); -} - -.calendar-day.prev-month, -.calendar-day.next-month { - background: var(--calendar-day-prev-next, #fafafa); - color: var(--calendar-day-prev-next-text, #ccc); -} - -.calendar-day.today { - background: var(--calendar-today-bg, #e3f2fd); - border: 2px solid var(--calendar-today-border, #2196f3); -} - -.calendar-day.has-events { - background: var(--calendar-has-events-bg, #fff3e0); -} - -.calendar-day.today.has-events { - background: var(--calendar-today-bg, #e1f5fe); -} - -.calendar-day.selected { - background: var(--calendar-selected-bg, #e8f5e8); - border: 2px solid var(--calendar-selected-border, #4caf50); - box-shadow: 0 0 8px rgba(76, 175, 80, 0.3); -} - -.calendar-day.selected.has-events { - background: var(--calendar-selected-bg, #f1f8e9); -} - -.calendar-day.selected.today { - background: var(--calendar-selected-bg, #e0f2f1); - border: 2px solid var(--calendar-selected-border, #4caf50); -} - -.calendar-day.selected .day-number { - color: var(--calendar-selected-text, #2e7d32); - font-weight: 700; -} - -.day-number { - font-weight: 600; - font-size: 1.1rem; - margin-bottom: 0.5rem; -} - -.calendar-day.today .day-number { - color: var(--calendar-today-text, #1976d2); -} - -.day-events { - flex: 1; - display: flex; - flex-direction: column; - gap: 2px; - overflow: hidden; -} - -.event-indicators { - flex: 1; - display: flex; - flex-direction: column; - gap: 2px; -} - -.more-events-indicator { - font-size: 0.7rem; - color: #666; - font-weight: 500; - padding: 2px 4px; - text-align: center; - background: #f5f5f5; - border-radius: 3px; - cursor: pointer; - transition: background-color 0.2s; -} - -.more-events-indicator:hover { - background: #e0e0e0; -} - -.event-box { - /* Background color will be set inline via style attribute */ - color: white; - padding: 2px 4px; - border-radius: 3px; - font-size: 0.7rem; - line-height: 1.2; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - cursor: pointer; - transition: all 0.2s ease; - border: 1px solid rgba(255,255,255,0.2); - text-shadow: 0 1px 1px rgba(0,0,0,0.3); - font-weight: 500; - box-shadow: 0 1px 2px rgba(0,0,0,0.1); - position: relative; -} - -.event-box:hover { - filter: brightness(1.15); - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(0,0,0,0.15); -} - -.event-box.refreshing { - animation: pulse 1.5s ease-in-out infinite alternate; - border-color: #ff9800; -} - -.event-box.refreshing::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(255, 152, 0, 0.3); - pointer-events: none; -} - -@keyframes pulse { - 0% { - opacity: 0.7; - } - 100% { - opacity: 1; - } -} - -.event-dot { - background: #ff9800; - height: 6px; - border-radius: 3px; - margin-bottom: 1px; -} - -.more-events { - font-size: 0.7rem; - color: #666; - margin-top: 2px; - font-weight: 500; -} - -/* Event Modal Styles */ -.modal-backdrop { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.5); - display: flex; - align-items: center; - justify-content: center; - z-index: 1000; - backdrop-filter: blur(2px); -} - -.modal-content { - background: white; - border-radius: 12px; - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); - max-width: 900px; - width: 95%; - max-height: 85vh; - overflow-y: auto; - position: relative; - animation: modalAppear 0.2s ease-out; -} - -@keyframes modalAppear { - from { - opacity: 0; - transform: scale(0.9) translateY(-20px); - } - to { - opacity: 1; - transform: scale(1) translateY(0); - } -} - -.modal-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 2rem 3rem 1.5rem; - border-bottom: 1px solid #e9ecef; -} - -.modal-header h3 { - margin: 0; - color: #333; - font-size: 1.4rem; - font-weight: 600; -} - -.modal-close { - background: none; - border: none; - font-size: 1.8rem; - color: #999; - cursor: pointer; - padding: 0; - width: 30px; - height: 30px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.2s; - line-height: 1; -} - -.modal-close:hover { - background: #f8f9fa; - color: #666; - transform: scale(1.1); -} - -.modal-body { - padding: 0.25rem 1.0rem 0rem; -} - -.event-detail { - display: grid; - grid-template-columns: 100px 1fr; - gap: 1rem; - margin-bottom: 1rem; - align-items: start; -} - -.event-detail strong { - color: #555; - font-weight: 600; - font-size: 0.9rem; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.event-detail span { - color: #333; - font-size: 1rem; - line-height: 1.5; - word-break: break-word; -} - -/* Responsive Design */ -@media (max-width: 768px) { - .app-sidebar { - width: 100%; - height: auto; - min-height: unset; - position: relative; - flex-direction: row; - padding: 1rem; - } - - .sidebar-header { - padding: 0; - border-bottom: none; - border-right: 1px solid rgba(255,255,255,0.2); - margin-right: 1rem; - } - - .sidebar-header h1 { - font-size: 1.4rem; - text-align: left; - margin: 0; - } - - .user-info { - display: none; /* Hide user info on mobile to save space */ - } - - .sidebar-nav { - flex-direction: row; - padding: 0; - align-items: center; - gap: 1rem; - flex: 1; - } - - .sidebar-nav .nav-link { - padding: 0.5rem 0.75rem; - font-size: 0.9rem; - } - - .logout-button { - margin: 0; - padding: 0.5rem 0.75rem; - font-size: 0.9rem; - width: auto; - } - - .calendar-list { - display: none; /* Hide calendar list on mobile */ - } - - .sidebar-footer { - padding: 0; - border-top: none; - } - - .view-selector { - margin-bottom: 0.5rem; - } - - .view-selector-dropdown { - padding: 0.5rem 0.75rem; - font-size: 0.8rem; - } - - .app-main { - margin-left: 0; - max-width: 100%; - width: 100%; - padding: 1rem; - } - - .calendar-header { - padding: 1rem; - } - - .month-year { - font-size: 1.4rem; - } - - .nav-button { - width: 35px; - height: 35px; - font-size: 1.2rem; - } - - .today-button { - font-size: 0.8rem; - padding: 0.4rem 0.8rem; - } - - .weekday-header { - padding: 0.5rem; - font-size: 0.8rem; - } - - .calendar-day { - min-height: 70px; - padding: 0.5rem; - } - - .day-number { - font-size: 1rem; - } - - .calendar-view { - height: calc(100vh - 8rem); - } -} - -@media (max-width: 480px) { - .calendar-day { - min-height: 60px; - padding: 0.25rem; - } - - .weekday-header { - padding: 0.5rem 0.25rem; - } - - .day-number { - font-size: 0.9rem; - } -} - -/* Mobile adjustments for modal */ -@media (max-width: 768px) { - .modal-content { - margin: 1rem; - width: calc(100% - 2rem); - } - - .modal-header, .modal-body { - padding: 1.5rem 2rem; - } - - .event-detail { - grid-template-columns: 80px 1fr; - gap: 0.75rem; - margin-bottom: 0.75rem; - } - - .event-detail strong { - font-size: 0.8rem; - } - - .event-detail span { - font-size: 0.9rem; - } - - .login-form, .register-form { - padding: 1.5rem; - } -} - -/* Create Calendar Button */ -.create-calendar-button { - background: rgba(255, 255, 255, 0.2); - border: 1px solid rgba(255, 255, 255, 0.3); - color: white; - padding: 0.75rem 1rem; - border-radius: 8px; - cursor: pointer; - transition: all 0.2s ease; - margin-bottom: 1rem; - font-size: 0.9rem; - font-weight: 500; - backdrop-filter: blur(10px); - width: 100%; -} - -.create-calendar-button:hover { - background: rgba(255, 255, 255, 0.3); - border-color: rgba(255, 255, 255, 0.5); - transform: translateY(-1px); -} - -.create-calendar-button:active { - transform: translateY(0); -} - -/* View Selector */ -.view-selector { - margin-bottom: 1rem; -} - -.view-selector-dropdown { - width: 100%; - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); - color: white; - padding: 0.75rem 1rem; - border-radius: 8px; - font-size: 0.9rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; - backdrop-filter: blur(10px); -} - -.view-selector-dropdown:hover { - background: rgba(255, 255, 255, 0.2); - border-color: rgba(255, 255, 255, 0.3); -} - -.view-selector-dropdown:focus { - outline: none; - background: rgba(255, 255, 255, 0.2); - border-color: rgba(255, 255, 255, 0.4); - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1); -} - -.view-selector-dropdown option { - background: #2a2a2a; - color: white; - padding: 0.5rem; -} - -/* Create Calendar Modal */ -.modal-backdrop { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.5); - backdrop-filter: blur(4px); - display: flex; - align-items: center; - justify-content: center; - z-index: 1000; - padding: 2rem; -} - -.create-calendar-modal { - background: white; - border-radius: 12px; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); - max-width: 500px; - width: 100%; - max-height: 90vh; - overflow-y: auto; - animation: modalSlideIn 0.3s ease; -} - -@keyframes modalSlideIn { - from { - opacity: 0; - transform: scale(0.9) translateY(-20px); - } - to { - opacity: 1; - transform: scale(1) translateY(0); - } -} - -.create-calendar-modal .modal-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 2rem 2rem 1rem; - border-bottom: 1px solid #e9ecef; -} - -.create-calendar-modal .modal-header h2 { - margin: 0; - color: #495057; - font-size: 1.5rem; - font-weight: 600; -} - -.close-button { - background: none; - border: none; - font-size: 1.5rem; - color: #6c757d; - cursor: pointer; - padding: 0.25rem; - line-height: 1; - border-radius: 4px; - transition: all 0.2s ease; -} - -.close-button:hover { - color: #495057; - background: #f8f9fa; -} - -.create-calendar-modal .modal-body { - padding: 1.5rem 2rem 2rem; -} - -.form-group { - margin-bottom: 1.5rem; -} - -.form-group label { - display: block; - margin-bottom: 0.5rem; - color: #495057; - font-weight: 500; - font-size: 0.9rem; -} - -.form-group input, -.form-group textarea { - width: 100%; - padding: 0.75rem; - border: 1px solid #ced4da; - border-radius: 8px; - font-size: 1rem; - transition: border-color 0.2s ease, box-shadow 0.2s ease; - font-family: inherit; -} - -.form-group input:focus, -.form-group textarea:focus { - outline: none; - border-color: #667eea; - box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); -} - -.form-group input:disabled, -.form-group textarea:disabled { - background-color: #f8f9fa; - color: #6c757d; - cursor: not-allowed; -} - -.color-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 0.75rem; - margin: 0.75rem 0; -} - -.color-option { - width: 40px; - height: 40px; - border: 3px solid transparent; - border-radius: 8px; - cursor: pointer; - transition: all 0.2s ease; - position: relative; -} - -.color-option:hover { - transform: scale(1.1); - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); -} - -.color-option.selected { - border-color: #495057; - transform: scale(1.1); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); -} - -.color-option.selected::after { - content: '✓'; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: white; - font-weight: bold; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); -} - -.color-help-text { - font-size: 0.8rem; - color: #6c757d; - margin-top: 0.5rem; - margin-bottom: 0; -} - -.modal-actions { - display: flex; - justify-content: flex-end; - gap: 1rem; - margin-top: 2rem; - padding-top: 1.5rem; - border-top: 1px solid #e9ecef; -} - -.cancel-button, -.create-button { - padding: 0.75rem 1.5rem; - border-radius: 8px; - font-size: 1rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; - border: none; -} - -.cancel-button { - background: #f8f9fa; - color: #6c757d; - border: 1px solid #ced4da; -} - -.cancel-button:hover:not(:disabled) { - background: #e9ecef; - color: #495057; -} - -.create-button { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; -} - -.create-button:hover:not(:disabled) { - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); -} - -.cancel-button:disabled, -.create-button:disabled { - opacity: 0.6; - cursor: not-allowed; - transform: none !important; -} - -.error-message { - background: #f8d7da; - color: #721c24; - padding: 0.75rem 1rem; - border: 1px solid #f5c6cb; - border-radius: 6px; - margin-bottom: 1rem; - font-size: 0.9rem; -} - -/* Mobile adjustments for create calendar modal */ -@media (max-width: 768px) { - .modal-backdrop { - padding: 1rem; - } - - .create-calendar-modal { - max-height: 95vh; - } - - .create-calendar-modal .modal-header, - .create-calendar-modal .modal-body { - padding-left: 1.5rem; - padding-right: 1.5rem; - } - - .color-grid { - grid-template-columns: repeat(4, 1fr); - gap: 0.5rem; - } - - .color-option { - width: 35px; - height: 35px; - } - - .modal-actions { - flex-direction: column; - gap: 0.75rem; - } - - .cancel-button, - .create-button { - width: 100%; - text-align: center; - } -} - -/* Context Menu */ -.context-menu { - background: white; - border: 1px solid #e9ecef; - border-radius: 8px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); - min-width: 160px; - overflow: hidden; - animation: contextMenuSlideIn 0.15s ease; -} - -@keyframes contextMenuSlideIn { - from { - opacity: 0; - transform: scale(0.95) translateY(-5px); - } - to { - opacity: 1; - transform: scale(1) translateY(0); - } -} - -.context-menu-item { - display: flex; - align-items: center; - padding: 0.75rem 1rem; - color: #495057; - cursor: pointer; - transition: background-color 0.2s ease; - font-size: 0.9rem; - border: none; - background: none; - width: 100%; - text-align: left; -} - -.context-menu-item:hover { - background-color: #f8f9fa; -} - -.context-menu-delete { - color: #dc3545; -} - -.context-menu-delete:hover { - background-color: #f8f9fa; - color: #dc3545; -} - -.context-menu-icon { - margin-right: 0.5rem; - font-size: 1rem; -} - -/* Prevent text selection on context menu items */ -.context-menu-item { - user-select: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; -} - -/* Event Creation Modal Styles */ -.create-event-modal { - min-width: 750px; - max-width: 900px; - width: 95%; -} - -.create-event-modal .modal-body { - max-height: 60vh; - overflow-y: auto; -} - -.create-event-modal .form-group { - margin-bottom: 1.5rem; -} - -.create-event-modal .form-group label { - display: block; - margin-bottom: 0.5rem; - color: #495057; - font-weight: 500; - font-size: 0.9rem; -} - -.create-event-modal .form-input { - width: 100%; - padding: 0.75rem; - border: 1px solid #ced4da; - border-radius: 8px; - font-size: 1rem; - transition: border-color 0.2s ease, box-shadow 0.2s ease; - font-family: inherit; - box-sizing: border-box; -} - -.create-event-modal .form-input:focus { - outline: none; - border-color: #667eea; - box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); -} - -/* Checkbox specific styling override */ -.create-event-modal input[type="checkbox"] { - width: auto; - display: inline-block; - margin-right: 0.5rem; - vertical-align: middle; -} - -.create-event-modal .form-row { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 1rem; -} - -.create-event-modal .modal-footer { - display: flex; - justify-content: flex-end; - gap: 1rem; - padding: 1.5rem 2rem; - border-top: 1px solid #e9ecef; - background: #f8f9fa; -} - -/* Button Styles */ -.btn { - padding: 0.75rem 1.5rem; - border-radius: 8px; - font-size: 1rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; - border: none; - text-align: center; - text-decoration: none; - display: inline-block; - line-height: 1.5; - user-select: none; -} - -.btn:disabled { - opacity: 0.6; - cursor: not-allowed; - transform: none !important; -} - -.btn-secondary { - background: #f8f9fa; - color: #6c757d; - border: 1px solid #ced4da; -} - -.btn-secondary:hover:not(:disabled) { - background: #e9ecef; - color: #495057; - border-color: #adb5bd; -} - -.btn-primary { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - border: 1px solid transparent; -} - -.btn-primary:hover:not(:disabled) { - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); -} - -/* Weekday selection styles */ -.weekday-selection { - display: flex; - gap: 0.5rem; - flex-wrap: wrap; - margin-top: 0.5rem; -} - -.weekday-checkbox { - display: flex; - align-items: center; - cursor: pointer; - padding: 0.5rem 0.75rem; - border: 1px solid #ced4da; - border-radius: 6px; - background: white; - transition: all 0.2s ease; - user-select: none; - min-width: 3rem; - justify-content: center; -} - -.weekday-checkbox:hover { - border-color: #667eea; - background: #f8f9ff; -} - -.weekday-checkbox input[type="checkbox"] { - display: none; -} - -.weekday-checkbox input[type="checkbox"]:checked + .weekday-label { - color: white; -} - -.weekday-checkbox:has(input[type="checkbox"]:checked) { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - border-color: #667eea; - color: white; -} - -.weekday-label { - font-size: 0.85rem; - font-weight: 500; - color: #495057; - transition: color 0.2s ease; -} - -/* Mobile adjustments for event creation modal */ -@media (max-width: 768px) { - .create-event-modal .form-row { - grid-template-columns: 1fr; - gap: 1rem; - } - - .create-event-modal .modal-footer { - flex-direction: column; - gap: 0.75rem; - padding: 1rem 1.5rem; - } - - .create-event-modal .btn { - width: 100%; - } - - .weekday-selection { - gap: 0.25rem; - } - - .weekday-checkbox { - min-width: 2.5rem; - padding: 0.4rem 0.6rem; - } -} - -/* Recurring Edit Modal */ -.recurring-edit-modal { - max-width: 500px; - width: 95%; -} - -.recurring-edit-options { - display: flex; - flex-direction: column; - gap: 1rem; - margin: 1.5rem 0; -} - -.recurring-option { - background: white; - border: 2px solid #e9ecef; - color: #495057; - padding: 1rem; - text-align: left; - border-radius: 8px; - cursor: pointer; - transition: all 0.2s ease; -} - -.recurring-option:hover { - border-color: #667eea; - background: #f8f9ff; - color: #495057; - transform: none; - box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15); -} - -.recurring-option .option-title { - font-size: 1rem; - font-weight: 600; - margin-bottom: 0.5rem; - color: #333; -} - -.recurring-option .option-description { - font-size: 0.9rem; - color: #666; - line-height: 1.4; -} - -/* Mobile adjustments for recurring edit modal */ -@media (max-width: 768px) { - .recurring-edit-modal { - margin: 1rem; - width: calc(100% - 2rem); - } - - .recurring-option { - padding: 0.75rem; - } - - .recurring-option .option-title { - font-size: 0.9rem; - } - - .recurring-option .option-description { - font-size: 0.8rem; - } -} - -/* Tabbed Modal Interface Styles */ -.tab-navigation { - display: flex; - border-bottom: 2px solid #e9ecef; - margin-bottom: 1.5rem; - overflow-x: auto; - -webkit-overflow-scrolling: touch; - scrollbar-width: none; - -ms-overflow-style: none; -} - -.tab-navigation::-webkit-scrollbar { - display: none; -} - -.tab-button { - background: none; - border: none; - padding: 0.75rem 1rem; - cursor: pointer; - font-size: 0.85rem; - font-weight: 500; - color: #6c757d; - transition: all 0.2s ease; - border-bottom: 3px solid transparent; - white-space: nowrap; - display: flex; - align-items: center; - gap: 0.5rem; - min-width: max-content; -} - -.tab-button:hover { - color: #495057; - background: #f8f9fa; -} - -.tab-button.active { - color: #667eea; - border-bottom-color: #667eea; - background: #f8f9ff; -} - -.tab-content { - min-height: 300px; - max-height: 50vh; - overflow-y: auto; - padding: 1rem 2rem 2rem 2rem; -} - -.tab-panel { - animation: fadeIn 0.2s ease-in-out; -} - -@keyframes fadeIn { - from { - opacity: 0; - transform: translateY(10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -/* Mobile adjustments for tabbed interface */ -@media (max-width: 768px) { - .tab-navigation { - gap: 0; - margin-bottom: 1rem; - } - - .tab-button { - padding: 0.5rem 0.75rem; - font-size: 0.8rem; - flex: 1; - justify-content: center; - min-width: unset; - } - - .tab-content { - min-height: 250px; - max-height: 45vh; - padding: 1rem 1.5rem 1.5rem 1.5rem; - } -} - -/* Form Help Text and Advanced Info Styles */ -.form-help-text { - font-size: 0.8rem; - color: #6c757d; - margin-top: 0.25rem; - margin-bottom: 0; - line-height: 1.4; - font-style: italic; -} - -.advanced-info { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1.5rem; -} - -.advanced-info h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.advanced-info ul { - margin: 0 0 0.75rem 0; - padding-left: 1.2rem; - list-style-type: disc; -} - -.advanced-info li { - font-size: 0.85rem; - color: #6c757d; - line-height: 1.4; - margin-bottom: 0.25rem; -} - -.advanced-info .form-help-text { - margin-top: 0.5rem; - margin-bottom: 0; - border-top: 1px solid #e9ecef; - padding-top: 0.5rem; -} - -/* Theme compatibility for advanced info */ -[data-theme="dark"] .advanced-info { - background: #2a2a2a; - border-color: #444444; -} - -[data-theme="dark"] .advanced-info h5 { - color: #e0e0e0; -} - -[data-theme="dark"] .advanced-info li { - color: #b0b0b0; -} - -[data-theme="dark"] .advanced-info .form-help-text { - border-color: #444444; -} - -/* People Tab Styles */ -.people-info { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1.5rem; -} - -.people-info h5, -.people-info h6 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.people-info h6 { - font-size: 0.8rem; - margin-top: 1rem; - margin-bottom: 0.5rem; -} - -.people-validation { - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid #e9ecef; -} - -.attendee-roles-preview { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1rem; -} - -.attendee-roles-preview h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.role-examples { - display: flex; - flex-direction: column; - gap: 0.5rem; - margin-bottom: 1rem; -} - -.role-item { - display: flex; - align-items: flex-start; - gap: 0.5rem; - padding: 0.5rem; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; -} - -.role-item strong { - color: #495057; - font-size: 0.85rem; - font-weight: 600; - min-width: 140px; - flex-shrink: 0; -} - -.role-item span { - color: #6c757d; - font-size: 0.85rem; - line-height: 1.3; -} - -/* Theme compatibility for people info */ -[data-theme="dark"] .people-info, -[data-theme="dark"] .attendee-roles-preview { - background: #2a2a2a; - border-color: #444444; -} - -[data-theme="dark"] .people-info h5, -[data-theme="dark"] .people-info h6, -[data-theme="dark"] .attendee-roles-preview h5 { - color: #e0e0e0; -} - -[data-theme="dark"] .people-validation { - border-color: #444444; -} - -[data-theme="dark"] .role-item { - background: #1f1f1f; - border-color: #444444; -} - -[data-theme="dark"] .role-item strong { - color: #e0e0e0; -} - -[data-theme="dark"] .role-item span { - color: #b0b0b0; -} - -/* Mobile adjustments for people tab */ -@media (max-width: 768px) { - .role-item { - flex-direction: column; - gap: 0.25rem; - } - - .role-item strong { - min-width: unset; - } -} - -/* Categories Tab Styles */ -.categories-suggestions { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1.5rem; -} - -.categories-suggestions h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.category-tags { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - margin-bottom: 0.75rem; -} - -.category-tag { - background: white; - border: 1px solid #667eea; - color: #667eea; - padding: 0.4rem 0.8rem; - border-radius: 20px; - font-size: 0.8rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; -} - -.category-tag:hover { - background: #667eea; - color: white; - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2); -} - -.categories-info { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1rem; -} - -.categories-info h5, -.categories-info h6 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.categories-info h6 { - font-size: 0.8rem; - margin-top: 1rem; - margin-bottom: 0.5rem; -} - -.resources-section { - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid #e9ecef; -} - -.resource-features { - display: flex; - flex-direction: column; - gap: 0.5rem; - margin-top: 0.75rem; -} - -.feature-item { - display: flex; - align-items: flex-start; - gap: 0.5rem; - padding: 0.5rem; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; -} - -.feature-item strong { - color: #495057; - font-size: 0.85rem; - font-weight: 600; - min-width: 140px; - flex-shrink: 0; -} - -.feature-item span { - color: #6c757d; - font-size: 0.85rem; - line-height: 1.3; -} - -.quick-actions { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1rem; -} - -.quick-actions h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.action-buttons { - display: flex; - gap: 0.5rem; - margin-bottom: 0.5rem; -} - -.action-btn { - background: #dc3545; - border: 1px solid #dc3545; - color: white; - padding: 0.5rem 1rem; - border-radius: 6px; - font-size: 0.85rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; -} - -.action-btn:hover { - background: #c82333; - border-color: #bd2130; - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2); -} - -/* Theme compatibility for categories */ -[data-theme="dark"] .categories-suggestions, -[data-theme="dark"] .categories-info, -[data-theme="dark"] .quick-actions { - background: #2a2a2a; - border-color: #444444; -} - -[data-theme="dark"] .categories-suggestions h5, -[data-theme="dark"] .categories-info h5, -[data-theme="dark"] .categories-info h6, -[data-theme="dark"] .quick-actions h5 { - color: #e0e0e0; -} - -[data-theme="dark"] .category-tag { - background: #1f1f1f; - border-color: #667eea; - color: #667eea; -} - -[data-theme="dark"] .category-tag:hover { - background: #667eea; - color: white; -} - -[data-theme="dark"] .feature-item { - background: #1f1f1f; - border-color: #444444; -} - -[data-theme="dark"] .feature-item strong { - color: #e0e0e0; -} - -[data-theme="dark"] .feature-item span { - color: #b0b0b0; -} - -[data-theme="dark"] .resources-section { - border-color: #444444; -} - -/* Mobile adjustments for categories tab */ -@media (max-width: 768px) { - .category-tags { - gap: 0.25rem; - } - - .category-tag { - padding: 0.3rem 0.6rem; - font-size: 0.75rem; - } - - .feature-item { - flex-direction: column; - gap: 0.25rem; - } - - .feature-item strong { - min-width: unset; - } - - .action-buttons { - flex-direction: column; - } -} - -/* Location Tab Styles */ -.location-suggestions { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1.5rem; -} - -.location-suggestions h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.location-tags { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - margin-bottom: 0.75rem; -} - -.location-tag { - background: white; - border: 1px solid #28a745; - color: #28a745; - padding: 0.4rem 0.8rem; - border-radius: 20px; - font-size: 0.8rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; -} - -.location-tag:hover { - background: #28a745; - color: white; - transform: translateY(-1px); - box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2); -} - -.location-info { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1rem; -} - -.location-info h5, -.location-info h6 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.location-info h6 { - font-size: 0.8rem; - margin-top: 1rem; - margin-bottom: 0.5rem; -} - -.geo-section { - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid #e9ecef; -} - -.geo-features { - display: flex; - flex-direction: column; - gap: 0.5rem; - margin-top: 0.75rem; -} - -.geo-item { - display: flex; - align-items: flex-start; - gap: 0.5rem; - padding: 0.5rem; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; -} - -.geo-item strong { - color: #495057; - font-size: 0.85rem; - font-weight: 600; - min-width: 120px; - flex-shrink: 0; -} - -.geo-item span { - color: #6c757d; - font-size: 0.85rem; - line-height: 1.3; -} - -.location-types { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1rem; -} - -.location-types h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.type-examples { - display: flex; - flex-direction: column; - gap: 1rem; - margin-bottom: 1rem; -} - -.type-category { - padding: 0.75rem; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; -} - -.type-category strong { - display: block; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - margin-bottom: 0.5rem; -} - -.type-category ul { - margin: 0; - padding-left: 1.2rem; - list-style-type: disc; -} - -.type-category li { - color: #6c757d; - font-size: 0.85rem; - line-height: 1.4; - margin-bottom: 0.25rem; - font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace; - background: #f8f9fa; - padding: 0.2rem 0.4rem; - border-radius: 3px; -} - -.action-btn.secondary { - background: #6c757d; - border-color: #6c757d; -} - -.action-btn.secondary:hover { - background: #5a6268; - border-color: #545b62; - box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2); -} - -/* Theme compatibility for location */ -[data-theme="dark"] .location-suggestions, -[data-theme="dark"] .location-info, -[data-theme="dark"] .location-types { - background: #2a2a2a; - border-color: #444444; -} - -[data-theme="dark"] .location-suggestions h5, -[data-theme="dark"] .location-info h5, -[data-theme="dark"] .location-info h6, -[data-theme="dark"] .location-types h5 { - color: #e0e0e0; -} - -[data-theme="dark"] .location-tag { - background: #1f1f1f; - border-color: #28a745; - color: #28a745; -} - -[data-theme="dark"] .location-tag:hover { - background: #28a745; - color: white; -} - -[data-theme="dark"] .geo-item, -[data-theme="dark"] .type-category { - background: #1f1f1f; - border-color: #444444; -} - -[data-theme="dark"] .geo-item strong, -[data-theme="dark"] .type-category strong { - color: #e0e0e0; -} - -[data-theme="dark"] .geo-item span { - color: #b0b0b0; -} - -[data-theme="dark"] .type-category li { - color: #b0b0b0; - background: #2a2a2a; -} - -[data-theme="dark"] .geo-section { - border-color: #444444; -} - -/* Mobile adjustments for location tab */ -@media (max-width: 768px) { - .location-tags { - gap: 0.25rem; - } - - .location-tag { - padding: 0.3rem 0.6rem; - font-size: 0.75rem; - } - - .geo-item { - flex-direction: column; - gap: 0.25rem; - } - - .geo-item strong { - min-width: unset; - } - - .type-examples { - gap: 0.75rem; - } - - .type-category { - padding: 0.5rem; - } - - .type-category li { - font-size: 0.8rem; - } -} - -/* Reminders & Attachments Tab Styles */ -.reminder-types { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1.5rem; -} - -.reminder-types h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.alarm-examples { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 0.75rem; - margin-bottom: 0.75rem; -} - -.alarm-type { - padding: 0.75rem; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; - text-align: center; -} - -.alarm-type strong { - display: block; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - margin-bottom: 0.5rem; -} - -.alarm-type p { - color: #6c757d; - font-size: 0.8rem; - margin: 0; - line-height: 1.3; -} - -.reminder-info { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1rem; -} - -.reminder-info h5, -.reminder-info h6 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.reminder-info h6 { - font-size: 0.8rem; - margin-top: 1rem; - margin-bottom: 0.5rem; -} - -.attachments-section { - margin-top: 1rem; - padding-top: 1rem; - border-top: 1px solid #e9ecef; -} - -.attachment-features { - display: flex; - flex-direction: column; - gap: 0.5rem; - margin-top: 0.75rem; -} - -.attachment-type { - display: flex; - align-items: flex-start; - gap: 0.5rem; - padding: 0.5rem; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; -} - -.attachment-type strong { - color: #495057; - font-size: 0.85rem; - font-weight: 600; - min-width: 120px; - flex-shrink: 0; -} - -.attachment-type span { - color: #6c757d; - font-size: 0.85rem; - line-height: 1.3; -} - -.reminder-patterns { - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; - padding: 1rem; - margin-top: 1rem; -} - -.reminder-patterns h5 { - margin: 0 0 0.75rem 0; - color: #495057; - font-size: 0.9rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.pattern-examples { - display: flex; - flex-direction: column; - gap: 0.5rem; - margin-bottom: 0.75rem; -} - -.pattern-item { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem; - background: white; - border-radius: 6px; - border: 1px solid #e9ecef; -} - -.pattern-item strong { - color: #495057; - font-size: 0.85rem; - font-weight: 600; - min-width: 100px; - flex-shrink: 0; -} - -.pattern-item span { - color: #6c757d; - font-size: 0.85rem; - line-height: 1.3; -} - -.action-btn.tertiary { - background: #17a2b8; - border-color: #17a2b8; - color: white; -} - -.action-btn.tertiary:hover { - background: #138496; - border-color: #117a8b; - box-shadow: 0 2px 4px rgba(23, 162, 184, 0.2); -} - -.completion-status { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - border-radius: 8px; - padding: 1.5rem; - margin-top: 2rem; - text-align: center; -} - -.completion-status h5 { - margin: 0 0 0.75rem 0; - font-size: 1.1rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.completion-status p { - margin: 0 0 1rem 0; - opacity: 0.9; - line-height: 1.5; -} - -.feature-summary { - background: rgba(255, 255, 255, 0.1); - border-radius: 6px; - padding: 1rem; - margin-top: 1rem; -} - -.summary-row { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.5rem 0; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); -} - -.summary-row:last-child { - border-bottom: none; -} - -.tab-name { - font-weight: 600; - font-size: 0.9rem; -} - -.tab-desc { - font-size: 0.8rem; - opacity: 0.8; - text-align: right; - max-width: 60%; -} - -/* Theme compatibility for reminders */ -[data-theme="dark"] .reminder-types, -[data-theme="dark"] .reminder-info, -[data-theme="dark"] .reminder-patterns { - background: #2a2a2a; - border-color: #444444; -} - -[data-theme="dark"] .reminder-types h5, -[data-theme="dark"] .reminder-info h5, -[data-theme="dark"] .reminder-info h6, -[data-theme="dark"] .reminder-patterns h5 { - color: #e0e0e0; -} - -[data-theme="dark"] .alarm-type, -[data-theme="dark"] .attachment-type, -[data-theme="dark"] .pattern-item { - background: #1f1f1f; - border-color: #444444; -} - -[data-theme="dark"] .alarm-type strong, -[data-theme="dark"] .attachment-type strong, -[data-theme="dark"] .pattern-item strong { - color: #e0e0e0; -} - -[data-theme="dark"] .alarm-type p, -[data-theme="dark"] .attachment-type span, -[data-theme="dark"] .pattern-item span { - color: #b0b0b0; -} - -[data-theme="dark"] .attachments-section { - border-color: #444444; -} - -/* Mobile adjustments for reminders tab */ -@media (max-width: 768px) { - .alarm-examples { - grid-template-columns: 1fr; - gap: 0.5rem; - } - - .alarm-type { - padding: 0.5rem; - } - - .attachment-type, - .pattern-item { - flex-direction: column; - gap: 0.25rem; - align-items: flex-start; - } - - .attachment-type strong, - .pattern-item strong { - min-width: unset; - } - - .summary-row { - flex-direction: column; - align-items: flex-start; - gap: 0.25rem; - } - - .tab-desc { - text-align: left; - max-width: 100%; - } - - .completion-status { - padding: 1rem; - } - - .completion-status h5 { - font-size: 1rem; - } -} - -/* Theme Selector Styles */ -.theme-selector { - margin-bottom: 1rem; -} - -.theme-selector-dropdown { - width: 100%; - padding: 0.5rem; - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 6px; - color: white; - font-size: 0.85rem; - cursor: pointer; - transition: all 0.2s ease; -} - -.theme-selector-dropdown:hover { - background: rgba(255, 255, 255, 0.15); - border-color: rgba(255, 255, 255, 0.3); -} - -.theme-selector-dropdown:focus { - outline: none; - background: rgba(255, 255, 255, 0.2); - border-color: rgba(255, 255, 255, 0.4); -} - -.theme-selector-dropdown option { - background: #333; - color: white; - padding: 0.5rem; -} - -/* Theme Definitions */ -:root { - /* Default Theme */ - --primary-gradient: linear-gradient(180deg, #667eea 0%, #764ba2 100%); - --primary-bg: #f8f9fa; - --primary-text: #333; - --sidebar-bg: linear-gradient(180deg, #667eea 0%, #764ba2 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - --header-text: white; - --card-bg: white; - --border-color: #e9ecef; - --accent-color: #667eea; - --calendar-bg: white; - --calendar-border: #f0f0f0; - --calendar-day-bg: white; - --calendar-day-hover: #f8f9ff; - --calendar-day-prev-next: #fafafa; - --calendar-day-prev-next-text: #ccc; - --calendar-today-bg: #e3f2fd; - --calendar-today-border: #2196f3; - --calendar-today-text: #1976d2; - --calendar-selected-bg: #e8f5e8; - --calendar-selected-border: #4caf50; - --calendar-selected-text: #2e7d32; - --calendar-has-events-bg: #fff3e0; - --weekday-header-bg: #f8f9fa; - --weekday-header-text: #666; - --time-label-bg: #f8f9fa; - --time-label-text: #666; - --time-label-border: #e9ecef; - --event-colors: #3B82F6, #10B981, #F59E0B, #EF4444, #8B5CF6, #06B6D4, #84CC16, #F97316, #EC4899, #6366F1, #14B8A6, #F3B806, #8B5A2B, #6B7280, #DC2626, #7C3AED; -} - -/* Ocean Theme */ -[data-theme="ocean"] { - --primary-gradient: linear-gradient(180deg, #2196F3 0%, #0277BD 100%); - --primary-bg: #e3f2fd; - --primary-text: #0d47a1; - --sidebar-bg: linear-gradient(180deg, #2196F3 0%, #0277BD 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #2196F3 0%, #0277BD 100%); - --header-text: white; - --card-bg: #ffffff; - --border-color: #bbdefb; - --accent-color: #2196F3; - --calendar-bg: #ffffff; - --calendar-border: #bbdefb; - --calendar-day-bg: #ffffff; - --calendar-day-hover: #e1f5fe; - --calendar-day-prev-next: #f3f8ff; - --calendar-day-prev-next-text: #90caf9; - --calendar-today-bg: #b3e5fc; - --calendar-today-border: #0277BD; - --calendar-today-text: #01579b; - --calendar-selected-bg: #e0f7fa; - --calendar-selected-border: #00acc1; - --calendar-selected-text: #00695c; - --calendar-has-events-bg: #fff8e1; - --weekday-header-bg: #e3f2fd; - --weekday-header-text: #0d47a1; - --time-label-bg: #e3f2fd; - --time-label-text: #0d47a1; - --time-label-border: #bbdefb; - --event-colors: #2196F3, #03DAC6, #FF9800, #F44336, #9C27B0, #00BCD4, #8BC34A, #FF5722, #E91E63, #3F51B5, #009688, #FFC107, #607D8B, #795548, #E53935, #673AB7; -} - -[data-theme="ocean"] body { - background-color: var(--primary-bg); - color: var(--primary-text); -} - -[data-theme="ocean"] .app-sidebar { - background: var(--sidebar-bg); -} - -/* Forest Theme */ -[data-theme="forest"] { - --primary-gradient: linear-gradient(180deg, #4CAF50 0%, #2E7D32 100%); - --primary-bg: #e8f5e8; - --primary-text: #1b5e20; - --sidebar-bg: linear-gradient(180deg, #4CAF50 0%, #2E7D32 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%); - --header-text: white; - --card-bg: #ffffff; - --border-color: #c8e6c9; - --accent-color: #4CAF50; - --calendar-bg: #ffffff; - --calendar-border: #c8e6c9; - --calendar-day-bg: #ffffff; - --calendar-day-hover: #f1f8e9; - --calendar-day-prev-next: #f9fbe7; - --calendar-day-prev-next-text: #a5d6a7; - --calendar-today-bg: #c8e6c9; - --calendar-today-border: #2E7D32; - --calendar-today-text: #1b5e20; - --calendar-selected-bg: #e8f5e8; - --calendar-selected-border: #388e3c; - --calendar-selected-text: #2e7d32; - --calendar-has-events-bg: #fff3e0; - --weekday-header-bg: #e8f5e8; - --weekday-header-text: #1b5e20; - --time-label-bg: #e8f5e8; - --time-label-text: #1b5e20; - --time-label-border: #c8e6c9; - --event-colors: #4CAF50, #8BC34A, #FF9800, #FF5722, #9C27B0, #03DAC6, #CDDC39, #FF6F00, #E91E63, #3F51B5, #009688, #FFC107, #795548, #607D8B, #F44336, #673AB7; -} - -[data-theme="forest"] body { - background-color: var(--primary-bg); - color: var(--primary-text); -} - -[data-theme="forest"] .app-sidebar { - background: var(--sidebar-bg); -} - -/* Sunset Theme */ -[data-theme="sunset"] { - --primary-gradient: linear-gradient(180deg, #FF9800 0%, #F57C00 100%); - --primary-bg: #fff3e0; - --primary-text: #e65100; - --sidebar-bg: linear-gradient(180deg, #FF9800 0%, #F57C00 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #FF9800 0%, #F57C00 100%); - --header-text: white; - --card-bg: #ffffff; - --border-color: #ffcc02; - --accent-color: #FF9800; - --calendar-bg: #ffffff; - --calendar-border: #ffe0b2; - --calendar-day-bg: #ffffff; - --calendar-day-hover: #fff8e1; - --calendar-day-prev-next: #fffde7; - --calendar-day-prev-next-text: #ffcc02; - --calendar-today-bg: #ffe0b2; - --calendar-today-border: #F57C00; - --calendar-today-text: #e65100; - --calendar-selected-bg: #fff3e0; - --calendar-selected-border: #ff8f00; - --calendar-selected-text: #ff6f00; - --calendar-has-events-bg: #f3e5f5; - --weekday-header-bg: #fff3e0; - --weekday-header-text: #e65100; - --time-label-bg: #fff3e0; - --time-label-text: #e65100; - --time-label-border: #ffe0b2; - --event-colors: #FF9800, #FF5722, #F44336, #E91E63, #9C27B0, #673AB7, #3F51B5, #2196F3, #03DAC6, #009688, #4CAF50, #8BC34A, #CDDC39, #FFC107, #FF6F00, #795548; -} - -[data-theme="sunset"] body { - background-color: var(--primary-bg); - color: var(--primary-text); -} - -[data-theme="sunset"] .app-sidebar { - background: var(--sidebar-bg); -} - -/* Purple Theme */ -[data-theme="purple"] { - --primary-gradient: linear-gradient(180deg, #9C27B0 0%, #6A1B9A 100%); - --primary-bg: #f3e5f5; - --primary-text: #4a148c; - --sidebar-bg: linear-gradient(180deg, #9C27B0 0%, #6A1B9A 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #9C27B0 0%, #6A1B9A 100%); - --header-text: white; - --card-bg: #ffffff; - --border-color: #ce93d8; - --accent-color: #9C27B0; - --calendar-bg: #ffffff; - --calendar-border: #ce93d8; - --calendar-day-bg: #ffffff; - --calendar-day-hover: #f8e9fc; - --calendar-day-prev-next: #fce4ec; - --calendar-day-prev-next-text: #ce93d8; - --calendar-today-bg: #e1bee7; - --calendar-today-border: #6A1B9A; - --calendar-today-text: #4a148c; - --calendar-selected-bg: #f3e5f5; - --calendar-selected-border: #8e24aa; - --calendar-selected-text: #6a1b9a; - --calendar-has-events-bg: #fff3e0; - --weekday-header-bg: #f3e5f5; - --weekday-header-text: #4a148c; - --time-label-bg: #f3e5f5; - --time-label-text: #4a148c; - --time-label-border: #ce93d8; - --event-colors: #9C27B0, #673AB7, #3F51B5, #2196F3, #03DAC6, #009688, #4CAF50, #8BC34A, #CDDC39, #FFC107, #FF9800, #FF5722, #F44336, #E91E63, #795548, #607D8B; -} - -[data-theme="purple"] body { - background-color: var(--primary-bg); - color: var(--primary-text); -} - -[data-theme="purple"] .app-sidebar { - background: var(--sidebar-bg); -} - -/* Dark Theme */ -[data-theme="dark"] { - --primary-gradient: linear-gradient(180deg, #424242 0%, #212121 100%); - --primary-bg: #121212; - --primary-text: #ffffff; - --sidebar-bg: linear-gradient(180deg, #424242 0%, #212121 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #424242 0%, #212121 100%); - --header-text: white; - --card-bg: #1e1e1e; - --border-color: #333333; - --accent-color: #666666; - --calendar-bg: #1f1f1f; - --calendar-border: #333333; - --calendar-day-bg: #1f1f1f; - --calendar-day-hover: #2a2a2a; - --calendar-day-prev-next: #1a1a1a; - --calendar-day-prev-next-text: #555; - --calendar-today-bg: #2d2d2d; - --calendar-today-border: #bb86fc; - --calendar-today-text: #bb86fc; - --calendar-selected-bg: #2a2a2a; - --calendar-selected-border: #bb86fc; - --calendar-selected-text: #bb86fc; - --calendar-has-events-bg: #272727; - --weekday-header-bg: #1a1a1a; - --weekday-header-text: #e0e0e0; - --time-label-bg: #1a1a1a; - --time-label-text: #e0e0e0; - --time-label-border: #333333; - --event-colors: #bb86fc, #03dac6, #cf6679, #ff9800, #4caf50, #2196f3, #9c27b0, #f44336, #795548, #607d8b, #e91e63, #3f51b5, #009688, #8bc34a, #ffc107, #ff5722; -} - -[data-theme="dark"] body { - background-color: var(--primary-bg); - color: var(--primary-text); -} - -[data-theme="dark"] .app-sidebar { - background: var(--sidebar-bg); -} - -[data-theme="dark"] .app-main { - background-color: var(--primary-bg); -} - -[data-theme="dark"] .calendar-day { - background: var(--card-bg); - border-color: var(--border-color); - color: var(--primary-text); -} - -/* Rose Theme */ -[data-theme="rose"] { - --primary-gradient: linear-gradient(180deg, #E91E63 0%, #AD1457 100%); - --primary-bg: #fce4ec; - --primary-text: #880e4f; - --sidebar-bg: linear-gradient(180deg, #E91E63 0%, #AD1457 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #E91E63 0%, #AD1457 100%); - --header-text: white; - --card-bg: #ffffff; - --border-color: #f8bbd9; - --accent-color: #E91E63; - --calendar-bg: #ffffff; - --calendar-border: #f8bbd9; - --calendar-day-bg: #ffffff; - --calendar-day-hover: #fdf2f8; - --calendar-day-prev-next: #fef7ff; - --calendar-day-prev-next-text: #f8bbd9; - --calendar-today-bg: #f48fb1; - --calendar-today-border: #AD1457; - --calendar-today-text: #880e4f; - --calendar-selected-bg: #fce4ec; - --calendar-selected-border: #c2185b; - --calendar-selected-text: #ad1457; - --calendar-has-events-bg: #fff3e0; - --weekday-header-bg: #fce4ec; - --weekday-header-text: #880e4f; - --time-label-bg: #fce4ec; - --time-label-text: #880e4f; - --time-label-border: #f8bbd9; - --event-colors: #E91E63, #9C27B0, #673AB7, #3F51B5, #2196F3, #03DAC6, #009688, #4CAF50, #8BC34A, #CDDC39, #FFC107, #FF9800, #FF5722, #F44336, #795548, #607D8B; -} - -[data-theme="rose"] body { - background-color: var(--primary-bg); - color: var(--primary-text); -} - -[data-theme="rose"] .app-sidebar { - background: var(--sidebar-bg); -} - -/* Mint Theme */ -[data-theme="mint"] { - --primary-gradient: linear-gradient(180deg, #26A69A 0%, #00695C 100%); - --primary-bg: #e0f2f1; - --primary-text: #004d40; - --sidebar-bg: linear-gradient(180deg, #26A69A 0%, #00695C 100%); - --sidebar-text: white; - --header-bg: linear-gradient(135deg, #26A69A 0%, #00695C 100%); - --header-text: white; - --card-bg: #ffffff; - --border-color: #b2dfdb; - --accent-color: #26A69A; - --calendar-bg: #ffffff; - --calendar-border: #b2dfdb; - --calendar-day-bg: #ffffff; - --calendar-day-hover: #f0fdfc; - --calendar-day-prev-next: #f7ffff; - --calendar-day-prev-next-text: #b2dfdb; - --calendar-today-bg: #b2dfdb; - --calendar-today-border: #00695C; - --calendar-today-text: #004d40; - --calendar-selected-bg: #e0f2f1; - --calendar-selected-border: #00897b; - --calendar-selected-text: #00695c; - --calendar-has-events-bg: #fff3e0; - --weekday-header-bg: #e0f2f1; - --weekday-header-text: #004d40; - --time-label-bg: #e0f2f1; - --time-label-text: #004d40; - --time-label-border: #b2dfdb; - --event-colors: #26A69A, #009688, #4CAF50, #8BC34A, #CDDC39, #FFC107, #FF9800, #FF5722, #F44336, #E91E63, #9C27B0, #673AB7, #3F51B5, #2196F3, #795548, #607D8B; -} - -[data-theme="mint"] body { - background-color: var(--primary-bg); - color: var(--primary-text); -} - -[data-theme="mint"] .app-sidebar { - background: var(--sidebar-bg); -} - -/* Recurrence Options Styling */ -.recurrence-options { - margin-top: 1.5rem; - padding: 1rem; - background: #f8f9fa; - border: 1px solid #e9ecef; - border-radius: 8px; -} - -.interval-input { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.interval-input input { - width: 80px; - flex-shrink: 0; -} - -.interval-unit { - color: #6c757d; - font-size: 0.9rem; -} - -.end-options { - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -.end-option { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.end-option .radio-label { - display: flex; - align-items: center; - gap: 0.25rem; - margin-right: 0.5rem; - white-space: nowrap; - cursor: pointer; -} - -.end-option input[type="date"], -.end-option input[type="number"] { - width: 120px; -} - -.count-input { - width: 80px !important; -} - -.count-unit { - color: #6c757d; - font-size: 0.9rem; -} - -.monthly-options { - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -.monthly-option { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.monthly-option .radio-label { - display: flex; - align-items: center; - gap: 0.25rem; - margin-right: 0.5rem; - white-space: nowrap; - cursor: pointer; -} - -.day-input { - width: 80px !important; -} - -.yearly-months { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 0.5rem; - margin-top: 0.5rem; -} - -.month-checkbox { - display: flex; - align-items: center; - gap: 0.25rem; - padding: 0.25rem 0.5rem; - border: 1px solid #e9ecef; - border-radius: 4px; - cursor: pointer; - transition: all 0.2s ease; -} - -.month-checkbox:hover { - background-color: #f8f9fa; - border-color: #ced4da; -} - -.month-checkbox input[type="checkbox"] { - width: auto !important; - margin: 0 !important; -} - -.month-label { - font-size: 0.9rem; - user-select: none; -} - -/* Radio button styling */ -.radio-label input[type="radio"] { - width: auto !important; - margin: 0 !important; - margin-right: 0.25rem !important; -} - -/* Mobile responsive adjustments */ -@media (max-width: 768px) { - .end-options { - gap: 0.5rem; - } - - .end-option { - flex-direction: column; - align-items: flex-start; - gap: 0.25rem; - } - - .monthly-option { - flex-direction: column; - align-items: flex-start; - gap: 0.25rem; - } - - .yearly-months { - grid-template-columns: repeat(2, 1fr); - } -}