/* Modern Youthful Design Variables */ :root { --primary-color: #0d1117; /* GitHub dark */ --primary-dark: #010409; --primary-light: #21262d; --secondary-color: #2563eb; /* Bright blue */ --secondary-dark: #1d4ed8; --accent-color: #10b981; /* Emerald for energy */ --accent-light: #34d399; --warning-color: #f59e0b; --danger-color: #ef4444; --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; --text-primary: var(--gray-900); --text-secondary: var(--gray-600); --text-muted: var(--gray-500); --background: #ffffff; --surface: var(--gray-50); --border: var(--gray-200); --border-light: var(--gray-100); --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); --font-sans: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', monospace; --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --gradient-accent: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); --gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); } /* Utility Classes */ .hidden { display: none !important; } /* Hide neighborhood fields temporarily */ .ride-location-compact, .neighborhood-marker, .live-ride-neighborhood { display: none; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-sans); background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 50%, #e5e7eb 100%); min-height: 100vh; color: var(--text-primary); line-height: 1.6; font-weight: 400; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-bottom: 120px; } /* WARNING: This container was the root cause of the "invisible full-screen modal" bug. The max-width and flex display constrained child elements even with position: fixed. Full-screen map screens (#leader-screen, #follower-screen, #opportunities-screen) must be placed OUTSIDE this container as direct children of to work properly. */ .container { max-width: 480px; margin: 0 auto; padding: 8px; min-height: 100vh; display: flex; flex-direction: column; position: relative; z-index: 1; } /* Mobile container adjustments */ @media (max-width: 768px) { .container { padding: 4px; max-width: none; } /* Prevent horizontal scrolling on all screens */ body { overflow-x: hidden; } /* Ensure all text and content respects container bounds */ * { max-width: 100%; box-sizing: border-box; } /* Fix any potential text overflow */ .role-title, .role-desc, h1, h2, h3, h4, h5, h6 { word-wrap: break-word; hyphens: auto; } /* Ensure sidebar doesn't cause overflow */ .active-rides-sidebar { min-width: 0; width: 100%; } /* Fix modal positioning on mobile */ .screen.active { min-height: calc(100vh - 140px); /* Account for header (60px) and footer (80px) */ max-height: calc(100vh - 140px); overflow-y: auto; } /* Mobile modal improvements */ .modal-overlay { padding: 10px; padding-top: 5px; padding-bottom: 10px; /* Standard padding, margin-bottom handles the extension */ /* Enable momentum scrolling on iOS */ -webkit-overflow-scrolling: touch; } .modal-content { padding: 20px; margin: 0; margin-bottom: 120px; /* Simple: extend 120px past modal content on mobile */ /* Remove height constraint on mobile - let body padding provide space */ max-height: none; /* Enable momentum scrolling on iOS */ -webkit-overflow-scrolling: touch; } } /* Desktop responsive styles */ @media (min-width: 640px) { .container { max-width: 1200px; padding: 8px; } .card { padding: 32px; box-shadow: var(--shadow-xl); } header h1 { font-size: 2.5rem; } .tagline { font-size: 1.125rem; } /* Desktop role buttons layout */ #role-selection-screen .role-buttons { display: flex !important; flex-direction: row !important; gap: 12px; margin-top: 0; padding: 0; width: 100%; justify-content: center; } .role-button { flex: 1; min-width: 180px; max-width: 250px; padding: 20px; justify-content: center; text-align: center; } /* Desktop catalog layout */ .catalog-content-wrapper { display: flex; gap: 32px; align-items: flex-start; } .catalog-left { flex: 1; min-width: 400px; } .catalog-right { flex: 1; min-width: 400px; } /* Desktop route planning */ .route-planning-desktop { display: flex; gap: 24px; align-items: flex-start; } .route-form-section { flex: 0 0 350px; } .route-map-section { flex: 1; } #route-map, #route-map-leader { height: calc(100vh - 200px); min-height: 600px; } /* Desktop live map */ #live-map { height: 400px; } /* Desktop rides list */ .rides-list { max-height: 500px; } .planned-rides-list { max-height: 600px; } /* Desktop-specific elements */ .desktop-only { display: block; } .mobile-only { display: none; } /* Desktop form adjustments */ .route-form-section .input-group { margin-bottom: 16px; } .route-form-section button[type="submit"] { margin-top: 24px; } /* Desktop follower layout */ .follower-desktop-layout { display: flex; gap: 32px; align-items: flex-start; } .follower-info-section { flex: 0 0 350px; } .follower-map-section { flex: 1; } .follower-map-section #live-map { height: 500px; } /* Better desktop buttons */ .actions { margin-top: 24px; } .actions button { margin-bottom: 12px; } } /* Mobile-specific styles */ @media (max-width: 767px) { .desktop-only { display: none; } .mobile-only { display: block; } .catalog-content-wrapper { display: block; } .route-planning-desktop { display: block; } .follower-desktop-layout { display: block; } .follower-info-section { margin-bottom: 20px; } } .app-header { margin-bottom: 4px; position: relative; z-index: 100; } .header-container { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 7.2px 14.4px; text-align: center; box-shadow: var(--shadow-sm); } .header-container h1 { font-size: 1.25rem; font-weight: 700; margin: 0; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 0.5px; } .header-container .tagline { font-size: calc(0.75rem - 0.5px); color: var(--text-secondary); margin: 0; font-weight: 400; line-height: 1.3; } .tagline strong { color: var(--primary-color); font-weight: 600; } /* Screen Management */ .screen { display: none; } /* Ensure body can scroll when modals are active */ body { overflow-y: auto; } /* Default screen behavior - positioned below header with single scroll */ .screen.active { display: block; position: absolute; top: 80px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1184px; background: var(--background); z-index: 1000; padding: 0; box-sizing: border-box; border-radius: 16px; } /* Mobile modal responsiveness */ @media (max-width: 768px) { .screen.active { top: 60px; left: 0; transform: none; width: 100%; max-width: none; border-radius: 0; margin: 0; padding: 0; } .card { border-radius: 0; margin: 0; min-height: calc(100vh - 60px); } } /* ================================================================================== CRITICAL FIX: FULL-SCREEN MAP SCREEN POSITIONING ================================================================================== These CSS rules are part of the fix for the "invisible modal" bug that was caused by the .container div constraints. The root issue was that these screens were nested inside .container, but these CSS rules provide additional insurance. WHAT THESE RULES DO: - Force position: fixed to break free from any parent positioning contexts - Set full viewport dimensions (100vw x 100vh) - High z-index (2000) to appear above all other content - Flex layout for proper child element sizing - Reset transforms and positioning to ensure full-screen display IMPORTANT: The main fix was moving the HTML elements outside .container (see index.html comments). These CSS rules are defensive programming to prevent similar issues in the future. WHY !important IS USED: - To override the default .screen.active positioning rules - To ensure these styles cannot be accidentally overridden - To provide maximum specificity for these critical full-screen elements Fixed: January 2025 - Part of container escape solution ================================================================================== */ #leader-screen.screen.active, #follower-screen.screen.active { position: fixed !important; display: flex !important; flex-direction: column !important; padding: 0 !important; top: 0 !important; left: 0 !important; transform: none !important; max-width: none !important; width: 100vw !important; height: 100vh !important; z-index: 2000 !important; background: var(--background) !important; } /* Mobile viewport height fix to prevent body background showing through */ @supports (height: 100dvh) { #leader-screen.screen.active, #follower-screen.screen.active { height: 100dvh !important; } } /* Additional mobile-specific fix for iOS Safari */ @media (max-width: 768px) { #leader-screen.screen.active, #follower-screen.screen.active { min-height: 100vh !important; min-height: 100dvh !important; background: var(--background) !important; } /* Ensure child containers also fill properly on mobile */ #leader-screen.screen.active .leader-container, #follower-screen.screen.active .follower-mobile-container { min-height: 100vh !important; min-height: 100dvh !important; background: var(--background) !important; } } /* CHILD ELEMENT SIZING FIXES - Part of the container escape solution These rules ensure that once the screens are properly positioned outside the container, their child elements (containers, maps, etc.) properly expand to fill the full-screen parent. */ /* Ensure child containers work properly in full-screen map screens */ #leader-screen.screen.active .leader-container, #follower-screen.screen.active .follower-mobile-container { flex: 1 !important; display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; } /* Ensure map sections take remaining space */ #leader-screen.screen.active .leader-map-section, #follower-screen.screen.active .follower-map-container { flex: 1 !important; width: 100% !important; height: 100% !important; } /* Ensure actual maps take full space of their containers */ #leader-screen.screen.active .leader-map, #follower-screen.screen.active #live-map { width: 100% !important; height: 100% !important; } /* Ensure screens have relative positioning for back button absolute positioning */ .screen { position: relative; } /* Form styling */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--text-primary); font-size: 0.875rem; } .form-help-text { font-size: 0.8125rem; color: var(--text-secondary); margin-top: 6px; } .form-help-text a { color: var(--primary-color); text-decoration: none; } .form-help-text a:hover { text-decoration: underline; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 1rem; font-family: var(--font-sans); background: var(--surface); color: var(--text-primary); box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .form-group textarea { resize: vertical; min-height: 80px; } .form-row { display: flex; gap: 1rem; } .form-row .form-group { flex: 1; } /* Mobile responsiveness for form rows */ @media (max-width: 768px) { .form-row { flex-direction: column; gap: 0.75rem; } /* Ensure form inputs don't overflow */ .form-group input, .form-group select, .form-group textarea { width: 100%; min-width: 0; box-sizing: border-box; } /* Fix button overflow */ button { max-width: 100%; word-break: break-word; min-height: 44px; /* Touch-friendly minimum size */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1); } /* Ensure tags containers wrap properly */ .tags-container { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; } /* Touch-friendly interactions for all buttons */ button:active { transform: scale(0.98); } .refresh-btn { min-height: 44px; min-width: 44px; } } /* Checkbox styling for demand form */ .checkbox-group { display: flex; flex-direction: row; gap: 8px; } .checkbox-item { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; } .checkbox-item input[type="checkbox"] { width: auto; margin: 0; } .checkbox-item span { font-size: 0.875rem; color: var(--text-primary); } /* Broadcasting tab layout */ .broadcast-layout { display: flex; gap: 2rem; height: 400px; } .broadcast-form-section { flex: 1; min-width: 300px; } .broadcast-map-section { flex: 1; min-width: 400px; } .broadcast-map-section .leader-map { height: 100%; border-radius: 8px; border: 1px solid var(--border-color); } /* Create Ride tab layout */ .create-ride-layout { display: flex; gap: 2rem; align-items: flex-start; } .create-form-section { flex: 1; min-width: 400px; } .create-map-section { flex: 1; min-width: 400px; } /* Mobile responsiveness for Create Ride layout */ @media (max-width: 768px) { .create-ride-layout { flex-direction: column; gap: 1.5rem; } .create-form-section, .create-map-section { min-width: 0; width: 100%; } /* Adjust map height on mobile */ #route-map-leader { height: 300px !important; } /* Mobile responsiveness for Start Broadcasting layout */ .broadcast-layout { flex-direction: column; height: auto; gap: 1.5rem; } .broadcast-form-section, .broadcast-map-section { min-width: 0; width: 100%; } .broadcast-map-section .leader-map { height: 300px; } } /* Role selection screen should not cover the header */ #role-selection-screen.screen.active { position: static; width: 100%; max-width: 1184px; height: auto; background: transparent; z-index: auto; margin: 0 auto; transform: none; left: auto; padding-bottom: 80px; /* Space for footer */ } /* Access code screen - compact inline display */ #access-code-screen.screen.active { position: absolute; top: 80px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; background: var(--background); z-index: 1000; padding: 0; box-sizing: border-box; border-radius: 16px; } #access-code-screen .card { margin: 0; box-shadow: var(--shadow-lg); border-radius: 16px; } .access-code-compact { padding: 1rem; } .code-section { text-align: center; margin-bottom: 1.5rem; } .code-box-compact { background: var(--background-secondary); border: 2px solid var(--primary-color); border-radius: var(--radius-lg); padding: 1rem; margin-bottom: 1rem; } .code-label { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.5rem; font-weight: 500; } .access-code-large { font-size: 2rem; font-weight: 700; font-family: 'Courier New', monospace; color: var(--primary-color); letter-spacing: 0.2em; margin-bottom: 0; } .code-buttons { display: flex; gap: 0.5rem; justify-content: center; } .code-buttons button { flex: 1; max-width: 140px; font-size: 0.875rem; } .ride-info-compact { background: var(--surface); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; text-align: center; } .info-item { margin-bottom: 0rem; } .info-item:last-child { margin-bottom: 0; } .actions-compact { display: flex; gap: 0.75rem; margin-bottom: 1rem; } .actions-compact button { flex: 1; font-size: 0.875rem; } .code-tip { text-align: center; padding: 0.75rem; background: rgba(var(--primary-color-rgb), 0.1); border-radius: var(--radius); color: var(--text-secondary); } /* Full-screen map screens now use combined rule above */ /* Ensure opportunities map container takes full remaining space */ #opportunities-screen .live-map-container { flex: 1; display: flex; flex-direction: column; height: 100vh; } #opportunities-screen .opportunities-map-fullscreen { flex: 1; display: flex; } #opportunities-screen .opportunities-map-fullscreen .full-map { flex: 1; height: 100%; } /* Demand screen map styling */ #demand-start-map, #demand-end-map { height: 300px !important; width: 100% !important; margin-top: 8px; border: 1px solid var(--border-color); border-radius: 8px; } /* Ensure demand form maintains proper layout */ #demand-screen .form-group { display: block; } #demand-screen .days-selector { display: flex; gap: 8px; flex-wrap: wrap; margin: 15px 0; justify-content: flex-start; } /* Fix create ride form layout issues */ #leader-screen .form-group { display: block; margin-bottom: 1rem; } #leader-screen .form-help-text { display: block; width: 100%; margin-top: 0.5rem; font-size: 0.75rem; color: var(--text-muted); } /* Fix form row layout in leader screen */ #leader-screen .form-row { display: flex; gap: 1rem; } #leader-screen .form-row .form-group { flex: 1; } /* Fix route control buttons positioning */ .route-controls { position: static !important; margin-bottom: 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap; } .route-controls button { flex: none; white-space: nowrap; } .card { background: var(--background); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-lg); border: 1px solid var(--border); } h2 { font-size: 21px; font-weight: 500; margin-bottom: 6px; color: var(--text-primary); letter-spacing: -0.01em; } .subtitle { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 18px; } /* Role Selection Buttons */ /* Role Selection Layout */ .button-section { margin-bottom: 30px; } .section-label { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 12px; font-weight: 600; text-align: center; } .role-buttons-row { display: flex; justify-content: center; align-items: center; gap: 15px; max-width: 900px; margin: 0 auto; flex-wrap: wrap; } .role-button { display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 16.2px 14.4px; background: var(--background); border: 2px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; transition: all 0.2s ease; text-align: center; font-family: inherit; text-decoration: none; gap: 12px; } .role-button:hover { border-color: #06d6a0; background: linear-gradient(135deg, #06d6a0 0%, #00b4d8 100%); color: white; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(6, 214, 160, 0.3); } .role-button:hover .role-desc { opacity: 1; } .role-button:active { transform: translateY(0); } .role-button.full-width { width: 100%; max-width: 400px; } .role-icon { font-size: 1.75rem; margin-bottom: 0; display: block; flex-shrink: 0; } .role-content { display: flex; flex-direction: column; flex: 1; } .role-title { font-size: 1rem; font-weight: 500; margin-bottom: 2px; display: block; letter-spacing: -0.01em; } .role-desc { font-size: 0.8125rem; opacity: 0.8; display: block; line-height: 1.3; } /* Forms */ .input-group { margin-bottom: 16px; } .input-group label { display: block; margin-bottom: 6px; font-weight: 500; color: var(--text-primary); font-size: 0.875rem; } .input-group input, .input-group select, .input-group textarea { width: 100%; padding: 10px 14px; border: 2px solid var(--border); border-radius: var(--radius); font-size: 1rem; font-family: inherit; background: var(--background); color: var(--text-primary); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .input-group input:focus, .input-group select:focus, .input-group textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1); } .input-group textarea { resize: vertical; min-height: 70px; } /* Buttons */ button { padding: 10px 20px; border: 1px solid black; font-size: 0.9375rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; text-decoration: none; line-height: 1.4; letter-spacing: -0.01em; } button[type="submit"], button.primary { background: var(--primary-color); color: white; border-color: var(--primary-color); box-shadow: var(--shadow); } button[type="submit"]:hover, button.primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-lg); } button.secondary { background: var(--background); color: var(--text-secondary); border: 2px solid var(--border); } button.secondary:hover { background: var(--gray-50); border-color: var(--gray-300); color: var(--text-primary); } button.danger { background: var(--accent-color); color: white; } button.danger:hover { background: var(--accent-light); transform: translateY(-1px); } button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .selection-button { padding: 12px 8px; border: 1px solid black; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; text-align: center; background: transparent; color: var(--text-primary); white-space: nowrap; position: relative; } .selection-button:hover { background: var(--gray-50); transform: translateY(-1px); } .selection-button.selected { background: var(--primary-color); color: white; border-color: var(--primary-color); } .selection-button.selected:hover { background: var(--primary-dark); border-color: var(--primary-dark); } /* Compact already subscribed section */ .already-subscribed-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-color); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .already-subscribed-text { font-size: 14px; color: var(--text-secondary); font-weight: 500; } .compact-email-input { flex: 1; min-width: 200px; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 14px; } .compact-email-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(var(--primary-color), 0.1); } .compact-btn { padding: 8px 16px; font-size: 14px; min-height: auto; } button:disabled:hover { transform: none; } /* Tabs */ .catalog-tabs { display: flex; margin-bottom: 24px; border-bottom: 2px solid var(--border); background: var(--gray-50); border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; } .tab-btn { padding: 12.6px 21.6px; background: var(--gray-50); border: none; border-bottom: 3px solid transparent; color: var(--text-secondary); font-weight: 600; cursor: pointer; transition: all 0.2s ease; min-height: auto; flex: 1; text-align: center; font-size: 1rem; } .tab-btn:hover { color: var(--text-primary); background: var(--background); transform: translateY(-1px); } .tab-btn.active { color: var(--primary-color); border-bottom-color: var(--primary-color); background: var(--background); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .tab-content { display: none; } .tab-content.active { display: block; } /* Status Indicators */ .status-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; } .status-indicator { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 500; } .status-indicator .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-400); animation: pulse 2s infinite; } .status-indicator.active .dot { background: var(--secondary-color); } .status-indicator.broadcasting .dot { background: var(--secondary-color); animation: blink 1.05s infinite; } .status-indicator.error .dot { background: var(--danger-color); animation: none; } .status-indicator.warning .dot { background: var(--warning-color); animation: pulse 1s infinite; } .status-indicator.connected .dot { background: var(--accent-color); animation: none; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0.3; } } /* Toast notifications */ .toast-container { position: fixed; top: 20px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 8px; max-width: 400px; pointer-events: none; } .toast { background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); padding: 14.4px; box-shadow: var(--shadow-lg); backdrop-filter: blur(8px); pointer-events: auto; transform: translateX(100%); opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); max-width: 100%; word-wrap: break-word; } .toast.show { transform: translateX(0); opacity: 1; } .toast.hide { transform: translateX(100%); opacity: 0; } .toast-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 600; font-size: 0.875rem; } .toast-icon { font-size: 1.2rem; line-height: 1; } .toast-message { font-size: 0.875rem; line-height: 1.4; color: var(--text-secondary); margin: 0; } .toast-close { position: absolute; top: 8px; right: 8px; background: none; border: none; font-size: 1.2rem; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 4px; transition: background-color 0.2s; } .toast-close:hover { background-color: var(--gray-100); } /* Toast types */ .toast.success { border-left: 4px solid var(--accent-color); } .toast.success .toast-header { color: var(--accent-color); } .toast.warning { border-left: 4px solid var(--warning-color); } .toast.warning .toast-header { color: var(--warning-color); } .toast.error { border-left: 4px solid var(--danger-color); } .toast.error .toast-header { color: var(--danger-color); } .toast.info { border-left: 4px solid var(--secondary-color); } .toast.info .toast-header { color: var(--secondary-color); } /* Toast action buttons */ .toast button { transition: all 0.2s; font-weight: 500; } .toast button:hover { transform: translateY(-1px); filter: brightness(1.1); } .toast button:active { transform: translateY(0); } /* Recurring ride modal styles */ .recurring-info { margin: 1rem 0; padding: 0.75rem; background: var(--gray-50); border-radius: 8px; border-left: 4px solid var(--accent-color); } .recurring-badge { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; } .recurring-icon { font-size: 1.1em; } .recurring-text { font-weight: 500; color: var(--text-primary); } .upcoming-dates { margin-top: 0.75rem; } .upcoming-loading, .upcoming-error, .upcoming-none { color: var(--text-secondary); font-size: 0.875rem; font-style: italic; } .upcoming-dates-header { margin-bottom: 0.5rem; font-size: 0.875rem; color: var(--text-primary); } .upcoming-dates-list { display: flex; flex-wrap: wrap; gap: 0.375rem; } .upcoming-date-chip { background: white; border: 1px solid var(--gray-200); border-radius: 12px; padding: 0.25rem 0.5rem; font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; } .upcoming-date-chip:hover { background: var(--gray-50); border-color: var(--accent-color); } /* Mobile responsiveness */ @media (max-width: 480px) { .toast-container { top: 10px; right: 10px; left: 10px; max-width: none; } .toast { margin: 0; } .toast button { font-size: 0.8rem !important; padding: 8px 12px !important; } } /* Demand Form Styles */ .location-picker-map { height: 200px; border-radius: var(--radius); border: 2px solid var(--border); margin-top: 10px; } .days-selector { display: flex; gap: 8px; flex-wrap: wrap; margin: 15px 0; } .day-checkbox { display: flex; align-items: center; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); padding: 8px 12px; cursor: pointer; transition: all 0.2s; } .day-checkbox:hover { border-color: var(--secondary-color); } .day-checkbox input[type="checkbox"] { display: none; } .day-checkbox input[type="checkbox"]:checked + span { color: white !important; font-weight: 600; } .day-checkbox input[type="checkbox"]:checked ~ * { background: var(--secondary-color); color: white !important; } .day-checkbox:has(input:checked) { background: var(--secondary-color); border-color: var(--secondary-color); color: white !important; } .day-checkbox:has(input:checked) span { color: white !important; } .time-selector { margin-top: 20px; } .form-section { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--border); } .form-section:last-of-type { border-bottom: none; } .form-section h3 { color: var(--text-primary); font-size: 1.1rem; margin-bottom: 15px; } /* ETA Display */ .eta-display { position: fixed; top: 80px; right: 20px; background: var(--background); border: 2px solid var(--secondary-color); border-radius: var(--radius-lg); padding: 14.4px; box-shadow: var(--shadow-lg); z-index: 1000; min-width: 150px; } .eta-header { font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; letter-spacing: 0.5px; } .eta-time { font-size: 1.5rem; font-weight: 700; color: var(--secondary-color); margin-bottom: 4px; } .eta-distance { font-size: 0.875rem; color: var(--text-secondary); } .eta-status { font-size: 0.75rem; color: var(--text-muted); font-style: italic; } /* Subtle header tagline */ .bike-emoji { cursor: pointer; transition: transform 0.2s ease; user-select: none; } .bike-emoji:hover { transform: scale(0.9); } .site-title { cursor: pointer; } .tagline-container { margin-top: 4px; text-align: center; } .tagline { font-family: var(--font-sans); font-size: 0.75rem; line-height: 1.4; color: var(--text-secondary); cursor: pointer; transition: all 0.2s ease; display: inline-block; } .tagline:hover { color: var(--text-primary); } .tagline strong { color: var(--primary-color); font-weight: 600; } .tagline-extra { font-family: var(--font-sans); font-size: 0.7rem; line-height: 1.3; color: var(--text-secondary); font-style: italic; margin-top: 2px; opacity: 0; max-height: 0; overflow: hidden; transition: all 0.3s ease; } .tagline-extra.show { opacity: 1; max-height: 30px; } /* Footer Styles */ .app-footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 15px 20px; border-top: 1px solid var(--border); background: var(--background); z-index: 100; /* Lower than modal overlay (9999) */ display: flex !important; justify-content: space-between; align-items: center; visibility: visible !important; } .dev-tag-container { display: flex; align-items: center; } .footer-nav { display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 0.875rem; position: absolute; left: 50%; transform: translateX(-50%); } /* Body placement option for dev tag */ .dev-tag-body { position: fixed; left: 8px; top: 50%; transform: translateY(-50%); z-index: 50; pointer-events: auto; } .dev-tag.rotated { transform: rotate(-90deg); transform-origin: center; white-space: nowrap; } /* Clean footer without dev tag */ .app-footer.clean { justify-content: center; padding: 15px 20px; } .footer-nav.centered { position: static; transform: none; } .footer-btn { background: none; border: none; color: var(--text-secondary); font-size: 0.875rem; padding: 4px 8px; cursor: pointer; transition: color 0.2s ease; font-family: var(--font-sans); min-height: unset; } .footer-btn:hover { color: var(--primary-color); } .footer-separator { color: var(--text-secondary); opacity: 0.5; } .dev-tag { background: #fef3c7; color: #92400e; padding: 3px 8px; border-radius: 12px; font-size: 0.65rem; font-weight: 500; text-decoration: none; border: 1px solid #f3d372; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 4px; } .dev-tag:hover { background: #fde68a; border-color: #f59e0b; color: #78350f; text-decoration: none; } /* Modal Overlay Styles */ .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 9999; align-items: flex-start; /* Allow content to start from top */ justify-content: center; padding: 20px; padding-top: 10px; /* Smaller top padding for more content space */ padding-bottom: 20px; /* Standard padding, margin-bottom handles the extension */ opacity: 0; overflow-y: auto; /* Enable scrolling for the entire overlay */ } .modal-overlay.show { display: flex; animation: modalOverlayFadeIn 0.25s ease-out forwards; } .modal-overlay.closing { animation: modalOverlayFadeOut 0.2s ease-in forwards; } .modal-content { background: var(--background); border-radius: var(--radius); padding: 32px; max-width: 600px; width: 100%; /* Remove height constraint - let body padding-bottom provide space */ max-height: none; margin-bottom: 120px; /* Simple: extend 120px past modal content */ overflow-y: auto; position: relative; box-shadow: var(--shadow-lg); transform: scale(0.95) translateY(8px); opacity: 0; animation: modalContentSlideIn 0.25s ease-out forwards; animation-delay: 0.05s; } .modal-overlay.closing .modal-content { animation: modalContentSlideOut 0.2s ease-in forwards; animation-delay: 0s; } .modal-content-small { max-width: 400px; } .modal-content h2 { margin: 0 0 20px 0; color: var(--text-primary); font-size: 1.5rem; } .modal-content p { margin: 16px 0; line-height: 1.6; color: var(--text-secondary); } .modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 24px; color: var(--text-secondary); cursor: pointer; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s ease; min-height: unset; } .modal-close:hover { background: var(--gray-100); color: var(--text-primary); } /* Contact Links */ .contact-links { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; } .contact-link { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--gray-50); border-radius: var(--radius); text-decoration: none; color: var(--text-primary); transition: all 0.2s ease; } .contact-link:hover { background: var(--gray-100); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .contact-icon { font-size: 1.25rem; } /* Speech Bubble Styles for About/Contact */ .speech-bubble { display: none; position: fixed; bottom: 70px; /* Just above footer */ left: 50%; transform: translateX(-50%); background: var(--background); border: 1px solid var(--border); border-radius: 12px; padding: 20px; max-width: 462px; /* 10% wider bubble */ width: 90vw; z-index: 10001; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); animation: bubbleSlideUpCenter 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .speech-bubble.show { display: block; } .speech-bubble.closing { animation: bubbleSlideDownCenter 0.25s ease-in-out forwards; pointer-events: none; } #about-bubble.closing { animation: bubbleSlideDownAbout 0.25s ease-in-out forwards; } #contact-bubble.closing { animation: bubbleSlideDownContact 0.25s ease-in-out forwards; } /* Speech bubble arrow pointing down to footer */ .speech-bubble::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid var(--background); } .speech-bubble::before { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 9px solid var(--border); z-index: -1; } /* Speech bubble animations - separate for each position */ @keyframes bubbleSlideUpCenter { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } @keyframes bubbleSlideUpAbout { from { opacity: 0; transform: translateX(-80%) translateY(10px); } to { opacity: 1; transform: translateX(-80%) translateY(0); } } @keyframes bubbleSlideUpContact { from { opacity: 0; transform: translateX(-20%) translateY(10px); } to { opacity: 1; transform: translateX(-20%) translateY(0); } } /* Closing animations */ @keyframes bubbleSlideDownCenter { 0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.98); } } @keyframes bubbleSlideDownAbout { 0% { opacity: 1; transform: translateX(-80%) translateY(0) scale(1); } 100% { opacity: 0; transform: translateX(-80%) translateY(8px) scale(0.98); } } @keyframes bubbleSlideDownContact { 0% { opacity: 1; transform: translateX(-20%) translateY(0) scale(1); } 100% { opacity: 0; transform: translateX(-20%) translateY(8px) scale(0.98); } } /* Modal animations */ @keyframes modalOverlayFadeIn { from { opacity: 0; backdrop-filter: blur(0px); } to { opacity: 1; backdrop-filter: blur(4px); } } @keyframes modalOverlayFadeOut { from { opacity: 1; backdrop-filter: blur(4px); } to { opacity: 0; backdrop-filter: blur(0px); } } @keyframes modalContentSlideIn { from { opacity: 0; transform: scale(0.95) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes modalContentSlideOut { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.95) translateY(8px); } } /* Photo gallery animations - smooth and subtle */ @keyframes photoFadeIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } } @keyframes photoSlideLeft { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } } @keyframes photoSlideRight { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } /* Lightbox specific animations */ @keyframes lightboxFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes lightboxSlideLeft { from { transform: translateX(4px); opacity: 0.8; } to { transform: translateX(0); opacity: 1; } } @keyframes lightboxSlideRight { from { transform: translateX(-4px); opacity: 0.8; } to { transform: translateX(0); opacity: 1; } } /* Speech bubble content styling */ .speech-bubble h2 { margin: 0 0 16px 0; font-size: 1.25rem; color: var(--text-primary); font-weight: 600; } .speech-bubble p { margin: 0 0 12px 0; font-size: 0.9rem; line-height: 1.4; color: var(--text-secondary); } .speech-bubble p:last-child { margin-bottom: 0; } /* Photo Gallery Styles */ .photo-gallery { margin-top: 16px; } .photo-gallery-title { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; } .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; /* Explicitly single row for 3x1 */ gap: 4px; margin-bottom: 12px; /* Remove max-height to let photos size naturally */ } .photo-item { aspect-ratio: 1; overflow: hidden; border-radius: 6px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; background: var(--gray-100); opacity: 1; } .photo-item:hover { transform: scale(1.02); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } .photo-item img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s ease; } .photo-item img:hover { opacity: 0.9; } /* Photo Gallery Pagination */ .photo-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; clear: both; /* Ensure pagination appears below grid */ } .pagination-btn { background: none; border: 1px solid var(--border); color: var(--text-secondary); width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; transition: all 0.2s ease; } .pagination-btn:hover:not(:disabled) { border-color: var(--primary-color); color: var(--primary-color); background: rgba(59, 130, 246, 0.05); } .pagination-btn:disabled { opacity: 0.3; cursor: not-allowed; } .pagination-dots { display: flex; gap: 4px; align-items: center; } .pagination-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gray-300); cursor: pointer; transition: background-color 0.2s ease; } .pagination-dot.active { background: var(--primary-color); } .pagination-dot:hover { background: var(--gray-500); } .pagination-info { font-size: 11px; color: var(--text-muted); margin: 0 6px; } /* Lightbox Styles */ .lightbox-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); z-index: 10002; align-items: center; justify-content: center; padding: 20px; } .lightbox-overlay.show { display: flex; } .lightbox-content { position: relative; max-width: 90vw; max-height: 90vh; display: flex; align-items: center; justify-content: center; } .lightbox-image { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); transition: none; backface-visibility: hidden; transform: translateZ(0); } .lightbox-close { position: absolute; top: -40px; right: 0; background: none; border: none; color: white; font-size: 2rem; cursor: pointer; padding: 8px; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease; } .lightbox-close:hover { background: rgba(255, 255, 255, 0.1); } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.5); border: none; color: white; font-size: 1.5rem; cursor: pointer; padding: 12px 16px; border-radius: 4px; transition: background-color 0.2s ease; user-select: none; } .lightbox-nav:hover { background: rgba(0, 0, 0, 0.7); } .lightbox-prev { left: -60px; } .lightbox-next { right: -60px; } .lightbox-counter { position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); color: white; font-size: 0.875rem; background: rgba(0, 0, 0, 0.5); padding: 4px 12px; border-radius: 12px; } /* Mobile lightbox adjustments */ @media (max-width: 768px) { .lightbox-close { top: 20px; right: 20px; background: rgba(0, 0, 0, 0.5); } .lightbox-prev { left: 10px; } .lightbox-next { right: 10px; } .lightbox-counter { bottom: 20px; } .photo-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; } } .speech-bubble .contact-links { margin-top: 16px; gap: 12px; } .speech-bubble .contact-link { padding: 10px 12px; font-size: 0.875rem; border-radius: 8px; } /* Position adjustment for different buttons */ .speech-bubble.about-bubble { transform: translateX(-80%); /* Offset towards About button */ animation: bubbleSlideUpAbout 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .speech-bubble.about-bubble::after { left: 70%; /* Align arrow with About button text */ } .speech-bubble.about-bubble::before { left: 40%; /* Align arrow border with About button text */ } .speech-bubble.contact-bubble { transform: translateX(-20%); /* Offset towards Contact button */ animation: bubbleSlideUpContact 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .speech-bubble.contact-bubble::after { left: 30%; /* Align arrow with Contact button text */ } .speech-bubble.contact-bubble::before { left: 60%; /* Align arrow border with Contact button text */ } /* Mobile responsiveness for speech bubbles */ @media (max-width: 480px) { .speech-bubble { max-width: 280px; width: 85vw; padding: 16px; transform: translateX(-50%); /* Center on mobile regardless of button */ animation: bubbleSlideUpCenter 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .speech-bubble.about-bubble, .speech-bubble.contact-bubble { transform: translateX(-50%); animation: bubbleSlideUpCenter 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .speech-bubble.closing, .speech-bubble.about-bubble.closing, .speech-bubble.contact-bubble.closing { animation: bubbleSlideDownCenter 0.25s ease-in-out forwards; } .speech-bubble h2 { font-size: 1.125rem; } .speech-bubble p { font-size: 0.85rem; } } /* Modern Ride Grid */ .rides-grid { display: grid; gap: 20px; padding: 8px; } .ride-card { background: var(--background); border-radius: var(--radius-lg); padding: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; border: 2px solid transparent; overflow: hidden; position: relative; } .ride-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.15); border-color: var(--primary-color); } .ride-card-header { padding: 18px 21.6px; background: linear-gradient(135deg, var(--gray-50), var(--background)); border-bottom: 1px solid var(--border-light); } .ride-time-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--primary-color); color: white; padding: 6px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .ride-card-title { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; line-height: 1.3; } .ride-neighborhood { display: none; /* Hidden for now */ align-items: center; gap: 4px; color: var(--text-secondary); font-size: 0.875rem; } .ride-card-body { padding: 18px 21.6px; } .ride-description { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.6; margin-bottom: 16px; } .ride-stats-row { display: flex; gap: 24px; padding: 14.4px 0; border-top: 1px solid var(--border-light); } .ride-stat { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; } .ride-stat-icon { font-size: 1.125rem; } .ride-stat-value { font-weight: 600; color: var(--text-primary); } .ride-stat-label { color: var(--text-muted); } .ride-card-footer { padding: 14.4px 21.6px; background: var(--gray-50); display: flex; justify-content: space-between; align-items: center; } .interest-button { display: inline-flex; align-items: center; gap: 8px; padding: 7.2px 14.4px; background: var(--background); border: 2px solid var(--border); border-radius: var(--radius); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .interest-button:hover { background: var(--primary-color); color: white; border-color: var(--primary-color); transform: scale(1.05); } .interest-button.interested { background: var(--primary-color); color: white; border-color: var(--primary-color); } .ride-creator-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--secondary-color); color: white; border-radius: var(--radius); font-size: 0.75rem; font-weight: 600; } /* Info Card (Desktop) */ .info-card { background: var(--background); border-radius: var(--radius-lg); padding: 21.6px; border: 1px solid var(--border); position: sticky; top: 20px; } .info-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .info-icon { font-size: 1.5rem; } .info-card-header h3 { font-size: 1.125rem; font-weight: 600; color: var(--text-primary); margin: 0; } .info-items { display: flex; flex-direction: column; gap: 12px; } .info-item { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; color: var(--text-secondary); } .info-bullet { color: var(--primary-color); font-weight: 600; font-size: 1rem; } /* Empty State */ .empty-rides { text-align: center; padding: 60px 20px; } .empty-icon { font-size: 3rem; margin-bottom: 16px; opacity: 0.5; } .empty-title { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; } .empty-message { color: var(--text-secondary); margin-bottom: 24px; } /* Active Rides List (for tracking) */ .rides-list { display: flex; flex-direction: column; gap: 12px; padding: 8px; } .active-ride-card { background: var(--background); border: 2px solid var(--border); border-radius: var(--radius-lg); padding: 14.4px; cursor: pointer; transition: all 0.2s ease; } .active-ride-card:hover { border-color: var(--primary-color); transform: translateX(4px); box-shadow: var(--shadow-lg); } .active-ride-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 12px; } .active-ride-info { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; color: var(--text-secondary); } .ride-neighborhood { display: none; /* Hidden for now */ align-items: center; gap: 4px; } .ride-updated { color: var(--text-muted); font-size: 0.8rem; } .active-ride-title { font-weight: 600; color: var(--text-primary); } .live-badge, .live-status-badge { background: #1e40af; color: white; font-size: 10px; font-weight: 600; padding: 5px; border-radius: 20px; display: inline-flex; align-items: center; gap: 4px; text-transform: uppercase; } .live-badge::before { content: ''; width: 6px; height: 6px; background: white; border-radius: 50%; animation: pulse 2s infinite; } .live-status-badge.active { background: #ef4444; } .live-status-badge.starting { background: #f59e0b; } .live-status-badge.disconnected { background: #6b7280; opacity: 0.8; } /* Loading States */ .loading-message { padding: 40px; text-align: center; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; gap: 12px; } .spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top: 2px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Map Styles */ #route-map, #route-map-leader { width: 100%; height: 400px; border-radius: var(--radius-lg); border: 1px solid var(--border-light); box-shadow: var(--shadow-lg); overflow: hidden; } #live-map { width: 100%; height: 300px; border-radius: var(--radius-lg); border: 1px solid var(--border-light); box-shadow: var(--shadow-lg); overflow: hidden; } #map-container { position: relative; } .map-controls { position: absolute; top: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 1000; } .map-btn { padding: 10px 14px; background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: var(--radius-lg); font-size: 0.875rem; font-weight: 500; color: var(--text-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.15); min-height: auto; backdrop-filter: blur(10px); transition: all 0.2s ease; } .map-btn:hover { background: rgba(255, 255, 255, 1); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); } /* Route Planning */ .route-section { margin-top: 16px; } .required-label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-primary); font-size: 0.875rem; } .required-label::after { content: " *"; color: var(--accent-color); font-weight: bold; } .route-help-text { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 16px; padding: 12px; background: var(--gray-50); border-radius: var(--radius); border-left: 4px solid var(--primary-color); line-height: 1.4; } .route-help { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 12px; padding: 12px; background: var(--gray-50); border-radius: var(--radius); border-left: 4px solid var(--primary-color); } #route-waypoints-list { margin-top: 12px; max-height: 200px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); } .waypoint-item { padding: 12px; border-bottom: 1px solid var(--border-light); display: flex; justify-content: space-between; align-items: center; } .waypoint-item:last-child { border-bottom: none; } .waypoint-info { flex: 1; } .waypoint-actions { display: flex; gap: 8px; } .waypoint-actions button { padding: 4px 8px; font-size: 0.75rem; min-height: auto; } /* Location Display */ .location-info, .leader-location { background: var(--gray-50); padding: 14.4px; border-radius: var(--radius); margin-bottom: 16px; border: 1px solid var(--border-light); } .location-info p, .leader-location p { margin-bottom: 4px; } .location-info p:last-child, .leader-location p:last-child { margin-bottom: 0; } .last-update { font-size: 0.875rem; color: var(--text-muted); font-family: var(--font-mono); } /* Followers Info */ .followers-info { text-align: center; padding: 14.4px; background: var(--gray-50); border-radius: var(--radius); margin-bottom: 16px; border: 1px solid var(--border-light); } .followers-info p { margin: 0; font-size: 1.125rem; font-weight: 500; color: var(--text-primary); } /* Actions */ .actions { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; } .actions button { width: 100%; } /* Catalog Actions */ .catalog-actions { display: flex; gap: 12px; margin-top: 20px; } .catalog-actions button { flex: 1; } /* Compact Ride Cards */ .ride-card-compact { background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; transition: all 0.14s ease; cursor: pointer; position: relative; overflow: hidden; } .ride-card-compact.has-tag { padding-top: 0.9rem; } .ride-tag-flag { position: absolute; top: 0; left: 0; right: 0; height: 32px; display: flex; align-items: center; padding: 0 14.4px; margin-bottom: 12px; z-index: 1; background: linear-gradient(135deg, var(--flag-color, #1e40af), var(--flag-color, #1e40af)); box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .ride-tag-flag::before { content: ''; position: absolute; right: -12px; top: 0; width: 0; height: 0; border-left: 12px solid; border-left-color: inherit; border-top: 16px solid transparent; border-bottom: 16px solid transparent; filter: brightness(0.9); } .tag-flag-text { color: white; font-size: 0.7rem; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); letter-spacing: 0.05em; text-transform: uppercase; } .ride-card-compact.has-tag { background: linear-gradient(to right, rgba(var(--tag-rgb), 0.05) 0%, rgba(var(--tag-rgb), 0.02) 30%, var(--background) 100%); } .ride-card-compact.has-tag .ride-header-compact { margin-top: 28px; } .ride-card-compact:hover { border-color: var(--primary-color); box-shadow: var(--shadow); transform: translateY(-1px); } .ride-header-compact { margin-bottom: 10px; } .ride-title-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; } .ride-title-compact { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0; flex: 1; line-height: 1.3; } .ride-time-compact { display: flex; align-items: center; gap: 4px; font-size: 0.875rem; color: var(--text-secondary); white-space: nowrap; } .time-icon { font-size: 0.75rem; } .ride-location-compact { font-size: 0.875rem; color: var(--text-secondary); } .ride-footer-compact { display: flex; justify-content: space-between; align-items: center; } .bike-emojis { font-size: 1rem; flex: 1; } .interest-btn-compact { padding: 6px 12px; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.14s ease; min-height: auto; } .interest-btn-compact:hover { background: var(--primary-color); color: white; border-color: var(--primary-color); } .interest-btn-compact.interested { background: var(--primary-color); color: white; border-color: var(--primary-color); } .start-btn-compact { padding: 6px 12px; background: var(--secondary-color); color: white; border: none; border-radius: var(--radius); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.14s ease; margin-left: 8px; min-height: auto; } .start-btn-compact:hover { background: var(--secondary-dark); transform: translateY(-1px); } .past-label { font-size: 0.875rem; color: var(--text-muted); } /* Ride Tags */ .ride-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0.5rem 0; } .ride-tag { background: #1e40af; color: white; font-size: .65rem; font-weight: 600; padding: .35rem; border-radius: 4px; } .ride-notification { margin: 0.75rem 0; padding: 0.75rem; border-radius: var(--radius); border-left: 4px solid; display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; } .ride-notification.route_changed { background-color: #fef3c7; border-color: #f59e0b; color: #92400e; } .ride-notification.cancelled { background-color: #fee2e2; border-color: #ef4444; color: #dc2626; } .ride-notification.needs_leader { background-color: #dbeafe; border-color: #3b82f6; color: #1d4ed8; } .ride-notification.general { background-color: #f3f4f6; border-color: #6b7280; color: #374151; } .notification-icon { font-size: 1rem; flex-shrink: 0; } .notification-message { flex: 1; } .modal-notification { margin-top: 1rem; width: 100%; } /* Custom Leaflet Styles */ .waypoint-marker { background: var(--primary-color); color: white; border-radius: 50%; text-align: center; line-height: 20px; font-weight: 600; font-size: 11px; border: 2px solid white; box-shadow: 0 2px 6px rgba(0,0,0,0.25); } /* Leader marker animation */ .leader-marker { animation: pulse-leader 1.4s infinite; } .leader-marker-subtle { color: #ef4444; font-size: 10px; /* Same size as route line weight (2x) */ font-weight: bold; text-shadow: 0 0 2px rgba(239, 68, 68, 0.6); z-index: 1000; /* Ensure it appears above trail segments */ position: relative; opacity: 0.9; /* Slightly transparent to blend with route */ } /* Subdued styling for usage guides */ .guides-section { border-radius: var(--radius); padding: 16px; margin-top: 16px; width: 100%; margin-left: auto; margin-right: auto; } .guides-label { color: var(--text-secondary); font-size: 14px; margin-bottom: 12px; } .guide-button { background: var(--background) !important; border: 1px solid var(--gray-200) !important; opacity: 0.85; transition: opacity 0.2s ease; } .guide-button:hover { opacity: 1; background: var(--gray-50) !important; } .guide-button .role-title { color: var(--text-secondary) !important; font-weight: 500 !important; transition: color 0.2s ease; } .guide-button:hover .role-title { color: #000000 !important; } .guide-button .role-desc { color: var(--text-muted) !important; } .leader-map-marker { color: #ef4444; font-size: 20px; /* Larger red dot for leader's own map */ font-weight: bold; text-shadow: 0 0 3px rgba(239, 68, 68, 0.6); display: flex; align-items: center; justify-content: center; } .leader-compass-marker { z-index: 1000; position: relative; } .compass-arrow { color: #ef4444; font-size: 20px; font-weight: bold; text-shadow: 0 0 3px rgba(239, 68, 68, 0.6); transition: transform 0.3s ease; transform-origin: center; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; /* Add drop shadow to make triangle appear to hover above trail */ filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); } /* Email Notification Styles */ .checkbox-group { display: flex; flex-direction: column; gap: 8px; } .checkbox-label { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--gray-50); border-radius: 6px; cursor: pointer; transition: background-color 0.2s ease; } .checkbox-label:hover { background: var(--gray-100); } .checkbox-label input[type="checkbox"] { margin: 0; cursor: pointer; } .checkbox-label span { font-size: 14px; user-select: none; } /* Button Selection Groups */ .button-group { display: grid; gap: 2px; max-width: 600px; } /* Region buttons - 2 columns for 2 buttons */ .region-buttons { grid-template-columns: repeat(2, 1fr); } /* Ride type buttons - 4 equal width columns */ .ride-type-buttons { grid-template-columns: repeat(4, 1fr); gap: 3px; justify-content: center; margin: 0 auto; } @media (max-width: 767px) { .ride-type-buttons { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 479px) { .ride-type-buttons { grid-template-columns: 1fr; } } .selection-button { padding: 12px 8px; border: 1px solid black; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; text-align: center; background: transparent; color: var(--text-primary); white-space: nowrap; position: relative; } .selection-button:hover { transform: translateY(-1px); border-color: var(--primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } /* Region Buttons - Black background when active */ .region-button { border-color: #333; } .region-button:hover { border-color: #000; } .region-button.active { background: #000; color: white; border-color: #000; } /* Ride Type Buttons - Individual colors when active */ .ride-type-button { border-color: #666; } .ride-type-button:hover { border-color: #333; } /* Regular Service - Blue colors */ .ride-type-button[data-value="regular-service"] { background: rgba(59, 130, 246, 0.1); border-color: #3b82f6; color: #1e40af; } .ride-type-button[data-value="regular-service"]:hover { background: rgba(59, 130, 246, 0.2); } .ride-type-button[data-value="regular-service"].selected { background: linear-gradient(135deg, rgba(59, 130, 246, 0.8) 0%, rgba(37, 99, 235, 0.6) 100%); color: white; border-color: #3b82f6; } /* Social Ride - Pink colors */ .ride-type-button[data-value="social-ride"] { background: rgba(236, 72, 153, 0.1); border-color: #ec4899; color: #be185d; } .ride-type-button[data-value="social-ride"]:hover { background: rgba(236, 72, 153, 0.2); } .ride-type-button[data-value="social-ride"].selected { background: linear-gradient(135deg, rgba(236, 72, 153, 0.8) 0%, rgba(219, 39, 119, 0.6) 100%); color: white; border-color: #ec4899; } /* Community Ride - Orange colors */ .ride-type-button[data-value="community-ride"] { background: rgba(249, 115, 22, 0.1); border-color: #f97316; color: #c2410c; } .ride-type-button[data-value="community-ride"]:hover { background: rgba(249, 115, 22, 0.2); } .ride-type-button[data-value="community-ride"].selected { background: linear-gradient(135deg, rgba(249, 115, 22, 0.8) 0%, rgba(234, 88, 12, 0.6) 100%); color: white; border-color: #f97316; } /* Special Event - Purple colors */ .ride-type-button[data-value="special-event"] { background: rgba(147, 51, 234, 0.1); border-color: #9333ea; color: #7e22ce; } .ride-type-button[data-value="special-event"]:hover { background: rgba(147, 51, 234, 0.2); } .ride-type-button[data-value="special-event"].selected { background: linear-gradient(135deg, rgba(147, 51, 234, 0.8) 0%, rgba(126, 34, 206, 0.6) 100%); color: white; border-color: #9333ea; } /* Tooltip for ride type buttons */ .ride-type-button::after { content: attr(title); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.9); color: white; padding: 6px 8px; border-radius: 4px; font-size: 11px; white-space: normal; width: max-content; max-width: 200px; text-align: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; margin-bottom: 4px; } .ride-type-button:hover::after { opacity: 1; } /* Radio Button Groups */ .radio-group { display: flex; flex-direction: column; gap: 4px; } .radio-label { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 8px; background: var(--gray-50); border-radius: 4px; transition: background-color 0.2s ease; justify-content: flex-start; width: 100%; } .radio-label:hover { background: var(--gray-100); } .radio-label input[type="radio"] { margin: 0; cursor: pointer; flex-shrink: 0; } .radio-label span { font-size: 14px; user-select: none; } /* Multi-Select Dropdown */ .multi-select-dropdown { position: relative; } .dropdown-toggle { width: 100%; padding: 10px 12px; background: white; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; text-align: left; font-size: 14px; } .dropdown-toggle:hover { border-color: var(--primary); } .dropdown-menu { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid var(--border-color); border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); z-index: 1000; display: none; } .dropdown-menu.show { display: block; } .dropdown-option { display: block; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border-light); } .dropdown-option:hover { background: var(--gray-50); } .dropdown-option:last-child { border-bottom: none; } .dropdown-option input[type="checkbox"] { margin-right: 8px; vertical-align: middle; } .zipcode-tags { display: flex; flex-wrap: wrap; gap: 6px; } .zipcode-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; background: var(--primary-color); color: white; border-radius: 4px; font-size: 12px; } .zipcode-tag button { background: none; border: none; color: white; cursor: pointer; padding: 0; font-size: 16px; line-height: 1; opacity: 0.7; transition: opacity 0.2s; } .zipcode-tag button:hover { opacity: 1; } /* Zipcode Map Markers */ .zipcode-marker { background: none; border: none; } .zipcode-marker-content { background: var(--primary); color: white; padding: 4px 8px; border-radius: 12px; font-size: 0.75rem; font-weight: 500; text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); } /* Zipcode Boundary Labels */ .zipcode-boundary-label { background: none; border: none; pointer-events: none; } .zipcode-boundary-label-content { background: rgba(255, 255, 255, 0.9); color: #0066cc; padding: 2px 6px; border-radius: 8px; font-size: 0.7rem; font-weight: 600; text-align: center; border: 1px solid #0066cc; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .live-ride-marker-red { color: #ef4444; font-size: 20px; font-weight: bold; text-shadow: 0 0 4px rgba(239, 68, 68, 0.8); } .leader-marker-paused { animation: pulse 2s infinite; opacity: 0.7; } @keyframes pulse-leader { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } } /* Route waypoint markers */ .route-waypoint-marker { background: var(--secondary-color); color: white; border-radius: 50%; text-align: center; line-height: 18px; font-weight: 600; font-size: 10px; border: 2px solid white; box-shadow: 0 2px 6px rgba(0,0,0,0.25); } /* Neighborhood markers on map */ .neighborhood-marker { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); } .destination-marker { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); } /* Focused leader marker styles */ .leader-marker-focused { background: transparent; border: none; } .leader-icon-focused { background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); border: 3px solid white; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); animation: pulse-leader 2s infinite; } @keyframes pulse-leader { 0% { box-shadow: 0 4px 12px rgba(0,0,0,0.3); } 50% { box-shadow: 0 4px 20px rgba(30, 64, 175, 0.5); } 100% { box-shadow: 0 4px 12px rgba(0,0,0,0.3); } } /* Access Code Display */ .access-code-display { text-align: center; } .access-code-display h2 { color: var(--secondary-color); margin-bottom: 24px; font-size: 1.75rem; } .code-warning { background: linear-gradient(135deg, #fef3c7, #fde68a); border: 2px solid #f59e0b; border-radius: var(--radius-lg); padding: 20px; margin-bottom: 24px; text-align: center; } .code-warning h3 { color: #92400e; margin-bottom: 8px; font-size: 1.25rem; font-weight: 700; } .code-warning p { color: #92400e; margin: 0; font-weight: 500; } .access-code-box { background: var(--gray-50); border: 3px solid var(--primary-color); border-radius: var(--radius-lg); padding: 21.6px; margin-bottom: 24px; position: relative; } .code-label { font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; } .access-code-value { font-family: var(--font-mono); font-size: 2.5rem; font-weight: 700; color: var(--primary-color); background: white; padding: 14.4px 21.6px; border-radius: var(--radius); border: 2px solid var(--border); margin-bottom: 16px; letter-spacing: 4px; word-break: break-all; user-select: all; } .copy-btn { font-size: 0.875rem; padding: 7.2px 14.4px; min-height: auto; } .email-highlight { position: relative; font-weight: 600; flex: 1; animation: subtle-pulse 3s ease-in-out infinite; } .email-highlight:before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); border-radius: calc(var(--radius) + 2px); z-index: -1; opacity: 0.8; } @keyframes subtle-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(30, 64, 175, 0.4); } 50% { box-shadow: 0 0 0 8px rgba(30, 64, 175, 0.1); } } .code-instructions { text-align: left; background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 24px; } .code-instructions h4 { color: var(--text-primary); margin-bottom: 12px; font-size: 1.125rem; font-weight: 600; } .code-instructions ol { margin: 0; padding-left: 20px; color: var(--text-secondary); } .code-instructions li { margin-bottom: 8px; line-height: 1.5; } .code-instructions li:last-child { margin-bottom: 0; } .code-instructions strong { color: var(--text-primary); font-weight: 600; } .code-instructions em { color: var(--accent-color); font-style: normal; font-weight: 600; } .ride-summary { text-align: left; background: var(--gray-50); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 24px; } .ride-summary h4 { color: var(--text-primary); margin-bottom: 12px; font-size: 1.125rem; font-weight: 600; } .ride-detail-item { display: flex; justify-content: space-between; margin-bottom: 8px; padding: 4px 0; } .ride-detail-item:last-child { margin-bottom: 0; } .ride-detail-item strong { color: var(--text-primary); font-weight: 500; } .ride-detail-item span { color: var(--text-secondary); font-weight: 400; } .code-actions { display: flex; flex-direction: column; gap: 12px; } .code-actions button { width: 100%; } /* Mobile adjustments for access code */ @media (max-width: 480px) { .access-code-value { font-size: 2rem; letter-spacing: 2px; padding: 10.8px 14.4px; } .code-warning { padding: 14.4px; } .access-code-box { padding: 20px; } .code-instructions, .ride-summary { padding: 14.4px; } } /* Responsive Adjustments */ @media (max-width: 480px) { .container { padding: 14.4px; } .card { padding: 20px; } header h1 { font-size: 1.75rem; } .role-button { padding: 18px 14.4px; } .role-icon { font-size: 1.75rem; } .status-header { flex-direction: column; align-items: flex-start; } /* Modal responsive */ .ride-details-layout { grid-template-columns: 1fr; gap: 1rem; } #modal-ride-map { height: 250px; } /* Recurring options responsive */ .recurring-presets { grid-template-columns: 1fr; } } /* Recurring Ride Setup */ .checkbox-label { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: all 0.2s ease; } .checkbox-label:hover { background: var(--gray-100); border-color: var(--secondary-color); } .checkbox-label input[type="checkbox"] { width: 1.25rem; height: 1.25rem; accent-color: var(--secondary-color); } .checkbox-text { font-weight: 500; color: var(--text-primary); } .recurring-options { margin-top: 1rem; padding: 1.35rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .recurring-help { margin: 0 0 1.5rem 0; color: var(--text-secondary); font-size: 0.875rem; text-align: center; } /* Tag Selection Styling */ .field-help { margin: 0 0 12px 0; color: var(--text-secondary); font-size: 0.8rem; font-style: italic; } .tag-selection { display: flex; flex-direction: column; gap: 12px; } .tag-option { border: 2px solid var(--border); border-radius: var(--radius); background: var(--background); transition: all 0.2s ease; } .tag-option:hover { border-color: var(--primary-color); background: var(--surface); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .tag-checkbox { display: flex; flex-direction: column; padding: 12.6px 14.4px; cursor: pointer; user-select: none; gap: 4px; } .tag-checkbox input[type="checkbox"] { display: none; } .tag-name { font-weight: 600; color: var(--text-primary); font-size: 0.9rem; } .tag-description { color: var(--text-secondary); font-size: 0.8rem; line-height: 1.4; } .tag-option input[type="checkbox"]:checked + .tag-checkbox, .tag-checkbox input[type="checkbox"]:checked ~ .tag-name { color: var(--primary-color); } .tag-option:has(input[type="checkbox"]:checked) { border-color: var(--primary-color); background: rgba(30, 64, 175, 0.08); box-shadow: 0 0 0 1px var(--primary-color); transform: scale(1.02); } .tag-option:has(input[type="checkbox"]:checked) .tag-name { color: var(--primary-color); font-weight: 700; } .tag-option:has(input[type="checkbox"]:checked) .tag-description { color: var(--primary-color); opacity: 0.8; } /* Specific tag color styling */ .tag-option[data-tag-id="special-event"]:has(input[type="checkbox"]:checked) { border-color: #f59e0b; background: rgba(245, 158, 11, 0.08); box-shadow: 0 0 0 1px #f59e0b; } .tag-option[data-tag-id="special-event"]:has(input[type="checkbox"]:checked) .tag-name, .tag-option[data-tag-id="special-event"]:has(input[type="checkbox"]:checked) .tag-description { color: #f59e0b; } .tag-option[data-tag-id="social-ride"]:has(input[type="checkbox"]:checked) { border-color: #ec4899; background: rgba(236, 72, 153, 0.08); box-shadow: 0 0 0 1px #ec4899; } .tag-option[data-tag-id="social-ride"]:has(input[type="checkbox"]:checked) .tag-name, .tag-option[data-tag-id="social-ride"]:has(input[type="checkbox"]:checked) .tag-description { color: #ec4899; } .tag-option[data-tag-id="community-ride"]:has(input[type="checkbox"]:checked) { border-color: #10b981; background: rgba(16, 185, 129, 0.08); box-shadow: 0 0 0 1px #10b981; } .tag-option[data-tag-id="community-ride"]:has(input[type="checkbox"]:checked) .tag-name, .tag-option[data-tag-id="community-ride"]:has(input[type="checkbox"]:checked) .tag-description { color: #10b981; } /* Recurring ride calendar styles (for leader form) */ .calendar-container { background: var(--background); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 1rem; max-width: 320px; } .calendar-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; background: var(--gray-50); border-bottom: 1px solid var(--border); } .calendar-nav { background: none; border: none; color: var(--text-primary); cursor: pointer; padding: 0.25rem 0.5rem; border-radius: var(--radius); font-size: 1rem; } .calendar-nav:hover { background: var(--gray-100); } .calendar-month { font-weight: 500; color: var(--text-primary); } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; background: white; /* Make sure it's visible */ border: 1px solid #ccc; /* Add visible border for debugging */ min-height: 200px; /* Ensure minimum height */ } .calendar-day { padding: 0.5rem; text-align: center; cursor: pointer; border: 1px solid #eee; /* Add border for visibility */ background: #fafafa; /* Light background */ min-height: 30px; /* Minimum height */ border-radius: 4px; transition: background-color 0.2s ease; } .calendar-day:hover { background-color: var(--gray-100); } .calendar-day.selected { background-color: var(--primary-color); color: white; } .calendar-day.selected:hover { background-color: var(--primary-color); opacity: 0.9; } .calendar-day.other-month { color: var(--text-muted); cursor: default; } .calendar-day.other-month:hover { background-color: transparent; } .calendar-header { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem; background: var(--surface); border-bottom: 1px solid var(--border); } margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--text-primary); } background: none; border: 1px solid var(--border); border-radius: 4px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); transition: all 0.2s ease; } background: var(--gray-50); border-color: var(--secondary-color); color: var(--secondary-color); } padding: 0.9rem; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; margin-bottom: 0.5rem; } padding: 0.5rem; text-align: center; font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); } display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; } aspect-ratio: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 4px; font-size: 0.875rem; transition: all 0.2s ease; position: relative; } background: var(--gray-50); } color: var(--text-muted); } color: var(--text-muted); cursor: not-allowed; } background: none; } background: var(--secondary-color); color: white; font-weight: 600; } background: var(--primary-color); color: white; font-weight: 600; } background: var(--primary-color); } .selected-dates-preview { background: var(--gray-50); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 1.25rem; } .selected-dates { display: flex; flex-wrap: wrap; gap: 0.5rem; } .selected-date-item { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--primary-color); color: white; border-radius: 6px; font-size: 0.875rem; font-weight: 500; margin: 4px; } .remove-date { background: none; border: none; color: white; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; margin-left: 0.25rem; opacity: 0.8; transition: opacity 0.2s ease; } .remove-date:hover { opacity: 1; } .no-dates-selected { color: var(--text-muted); font-style: italic; font-size: 0.875rem; } .preview-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; color: var(--text-primary); } .preview-icon { font-size: 1.25rem; } .preview-dates { display: flex; flex-direction: column; gap: 0.5rem; } .preview-date { padding: 0.75rem; background: var(--background); border: 1px solid var(--border-light); border-radius: var(--radius); font-size: 0.875rem; color: var(--text-secondary); } .preview-date.first { background: linear-gradient(135deg, var(--accent-color), #f59e0b); color: white; font-weight: 600; } /* Modal Styles */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(15, 23, 42, 0.8); backdrop-filter: blur(4px); /* Always use flexbox centering when modal is displayed */ align-items: center; justify-content: center; opacity: 0; } .modal.show, .modal[style*="display: block"], .modal[style*="display: flex"] { display: flex !important; align-items: center; justify-content: center; animation: modalOverlayFadeIn 0.25s ease-out forwards; } .modal.closing { animation: modalOverlayFadeOut 0.2s ease-in forwards; } .modal-content { background: var(--background); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); width: 90%; max-width: 1000px; max-height: 95vh; /* Increased for more vertical space */ overflow: hidden; display: flex; flex-direction: column; /* Ensure modal content is always centered within viewport */ margin: auto; /* Prevent content from touching edges on very small screens */ min-width: 280px; transform: scale(0.95) translateY(8px); opacity: 0; animation: modalContentSlideIn 0.25s ease-out forwards; animation-delay: 0.05s; } .modal.closing .modal-content { animation: modalContentSlideOut 0.2s ease-in forwards; animation-delay: 0s; } /* Ensure all modals are perfectly centered on small screens */ @media (max-height: 600px) { .modal-content { max-height: 95vh; margin: 2.5vh auto; } } @media (max-width: 480px) { .modal-content { width: 95%; margin: auto; } } /* Redesigned Modal Header */ .modal-header-redesigned { display: flex; justify-content: center; align-items: center; position: relative; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); background: var(--surface); } .modal-title-centered { color: var(--primary-color); font-size: 1.1rem; font-weight: 500; margin: 0; text-align: center; } .modal-ride-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 64px; height: 64px; border-radius: 8px; background-size: cover; background-position: center; border: 2px solid rgba(255,255,255,0.8); box-shadow: 0 2px 8px rgba(0,0,0,0.15); } .modal-header-redesigned .modal-close { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); } /* Legacy modal header for backwards compatibility */ .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.35rem; border-bottom: 1px solid var(--border); background: var(--surface); } .modal-header h2 { color: var(--primary-color); font-size: 1.25rem; font-weight: 600; } .modal-close { background: none; border: none; font-size: 1.5rem; color: var(--text-muted); cursor: pointer; padding: 0.25rem; border-radius: var(--radius); width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; } .modal-close:hover { background: var(--gray-100); color: var(--text-primary); } /* Redesigned Modal Body */ .modal-body-redesigned { flex: 1; overflow-y: auto; padding: 1rem; } .modal-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } .modal-left-panel { background: var(--background-secondary); border-radius: var(--radius); padding: 0.75rem; } .modal-right-panel { background: var(--background-secondary); border-radius: var(--radius); padding: 0.75rem; } .panel-section { margin-bottom: 0.75rem; } .panel-section:last-child { margin-bottom: 0; } .panel-section h3 { font-size: 0.9rem; font-weight: 600; color: var(--primary-color); margin: 0 0 0.5rem 0; } .panel-section .detail-item { margin-bottom: 0.4rem; font-size: 0.85rem; } .panel-section .detail-item:last-child { margin-bottom: 0; } .interest-section { display: flex; flex-direction: column; gap: 0.75rem; } .interest-display { font-size: 0.85rem; } .modal-actions { display: flex; flex-direction: row; gap: 1rem; } .primary-btn, .secondary-btn { padding: 0.5rem 0.75rem; border-radius: var(--radius); border: none; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease; } .primary-btn { background: var(--primary-color); color: white; } .primary-btn:hover { background: var(--primary-dark); } .secondary-btn { background: var(--gray-200); color: var(--text-primary); } .secondary-btn:hover { background: var(--gray-300); } /* Modest Map */ .modal-map-modest { height: 200px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); } .modal-map-modest #modal-ride-map { width: 100%; height: 100%; } /* Legacy modal body for backwards compatibility */ .modal-body { flex: 1; overflow-y: auto; padding: 1.5rem; } .ride-details-mobile-layout { display: flex; flex-direction: column; gap: 1.5rem; } .ride-details-compact-layout { display: flex; flex-direction: column; gap: 1rem; } .ride-info-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .ride-detail-half { margin: 0; } .ride-map-section-mobile { margin: 0 -1.5rem; height: 300px; border-radius: var(--radius); overflow: hidden; } .ride-map-section-mobile #modal-ride-map { width: 100%; height: 100%; } .ride-map-section-compact { margin: 0 -1.5rem; height: 350px; border-radius: var(--radius); overflow: hidden; } .ride-map-section-compact #modal-ride-map { width: 100%; height: 100%; } /* Responsive behavior for redesigned modal */ @media (max-width: 768px) { .modal-panels { grid-template-columns: 1fr; gap: 0.75rem; } .modal-map-modest { height: 180px; } .modal-actions { flex-direction: row; } } /* Upcoming dates styling for redesigned modal */ .modal-left-panel .upcoming-dates { border-top: 1px solid var(--border); padding-top: 0.75rem; } .modal-left-panel .upcoming-list { max-height: 150px; overflow-y: auto; } .modal-left-panel .upcoming-item { background: var(--background-primary); border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: 0.4rem 0.6rem; margin-bottom: 0.3rem; font-size: 0.8rem; } .modal-left-panel .upcoming-item:last-child { margin-bottom: 0; } .modal-left-panel .upcoming-item .upcoming-date { font-weight: 500; color: var(--primary-color); } .modal-left-panel .upcoming-item .upcoming-time { color: var(--text-muted); margin-left: 0.5rem; } /* Legacy responsive behavior for compact modal layout */ @media (max-width: 768px) { .ride-info-row { grid-template-columns: 1fr; gap: 0.75rem; } .ride-map-section-compact { height: 300px; } } .ride-details-layout { display: grid; grid-template-columns: 1fr 400px; gap: 2rem; height: 100%; } .ride-info-section { display: flex; flex-direction: column; gap: 1.5rem; } .ride-detail-group { background: var(--surface); padding: 1.25rem; border-radius: var(--radius); border: 1px solid var(--border); } .ride-detail-group h3 { color: var(--primary-color); font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; } .detail-item { margin-bottom: 0.5rem; line-height: 1.5; } .detail-item strong { color: var(--text-primary); font-weight: 500; } .detail-item span { color: var(--text-secondary); } #modal-description { color: var(--text-secondary); line-height: 1.6; } .ride-map-section { position: relative; } #modal-ride-map { width: 100%; height: 400px; border-radius: var(--radius); border: 1px solid var(--border); } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1.35rem; border-top: 1px solid var(--border); background: var(--surface); } #modal-waypoints-list { margin-top: 0.5rem; } .modal-waypoint-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border-light); font-size: 0.875rem; } .modal-waypoint-item:last-child { border-bottom: none; } .modal-waypoint-number { background: var(--secondary-color); color: white; border-radius: 50%; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; flex-shrink: 0; } .modal-waypoint-start { background: var(--accent-color); } .modal-waypoint-end { background: #ef4444; } .modal-waypoint-details { flex: 1; } .modal-waypoint-name { font-weight: 500; color: var(--text-primary); } .modal-waypoint-coords { color: var(--text-muted); font-size: 0.75rem; } /* Live Map Styles */ .live-map-container { height: calc(100vh - 20px); max-height: calc(100vh - 20px); display: flex; flex-direction: column; background: var(--background); border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; } /* Mobile adjustments for map containers */ @media (max-width: 768px) { .live-map-container { height: calc(100vh - 60px); max-height: calc(100vh - 60px); border-radius: 0; margin: 0; } /* Mobile styling for ride tracking/leading screens (optimized for watchers) */ .header-content h2 { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.25rem 0; } .header-content .subtitle { color: var(--text-secondary); font-size: 0.875rem; margin: 0; display: none; } /* Specific mobile header optimizations for follower screen */ #follower-screen .header-content h2 { font-size: 1rem !important; font-weight: 700; color: var(--text-primary); margin: 0 0 0.25rem 0 !important; } /* Hide subtitle on mobile for follower screen */ #follower-screen .header-content .subtitle { display: none !important; } /* Fix padding for follower screen headers */ #follower-screen .card-header, #follower-screen .screen-header { padding: 0.35rem 1.35rem !important; margin-bottom: 0 !important; } /* Hide back button on follower screen - only Stop Tracking needed */ #follower-screen .back-btn { display: none !important; } /* Make Stop Tracking button fill to bottom with no margin/padding */ #follower-screen .follower-actions { margin: 0 !important; padding: 0 !important; } #follower-screen .stop-tracking-btn-full { margin: 0 !important; padding: 1rem !important; border-radius: 0 !important; } .screen-header { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; } .live-map-header { display: flex; justify-content: space-between; align-items: center; padding: 0.35rem; background: var(--background); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); z-index: 100; } .back-btn { background: var(--secondary-color); border: none; border-radius: var(--radius); padding: 0px 16px; color: white; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; z-index: 10; position: absolute; top: 0; right: 4px; } } .live-map-header { display: flex; justify-content: space-between; align-items: center; padding: 1.35rem; background: var(--background); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); z-index: 100; } .header-content h2 { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.25rem 0; } .header-content .subtitle { color: var(--text-secondary); font-size: 0.875rem; margin: 0; } /* Clickable site title styling */ .site-title-clickable { cursor: pointer; transition: color 0.2s ease; } .site-title-clickable:hover { color: var(--primary-color); text-decoration: none; } /* Waypoints list styling */ .waypoints-list { max-height: 120px; overflow-y: auto; background: var(--background-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; font-size: 0.875rem; } .waypoints-list:empty { display: none; } /* Standardized Back Button Positioning */ .screen-header { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } .back-btn { background: var(--secondary-color); border: none; border-radius: var(--radius); padding: 8px 16px; color: white; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; z-index: 10; position: absolute; top: 20px; right: 20px; } .back-btn:hover { background: var(--secondary-dark); transform: translateY(-1px); } /* Mobile back button positioning */ @media (max-width: 768px) { .back-btn { position: fixed; top: auto; bottom: 1rem; right: 1rem; z-index: 1000; box-shadow: var(--shadow-lg); } .screen-header { padding-right: 0; } } .live-map-content { flex: 1; display: flex; position: relative; } .full-map { flex: 1; /* Take up remaining space after sidebar */ height: 100%; position: relative; z-index: 1; } .active-rides-sidebar { width: 360px; /* Increased from 320px for more breathing room */ background: var(--background); border-left: 1px solid var(--border); display: flex; flex-direction: column; z-index: 10; font-size: 14px; /* Set base font size for sidebar */ } .sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 1.35rem; border-bottom: 1px solid var(--border); background: var(--surface); border-radius: 0 16px 0 0; gap: 12px; } .region-selector { flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-primary); font-size: 0.875rem; font-family: var(--font-sans); min-width: 120px; } .region-selector:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); } .sidebar-header h3 { font-size: 1.125rem; font-weight: 600; color: var(--text-primary); margin: 0; } .refresh-btn { background: none; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.75rem; color: var(--text-secondary); cursor: pointer; font-size: 0.875rem; font-weight: 500; transition: all 0.2s ease; display: flex; align-items: center; gap: 0.5rem; } .refresh-btn:hover { background: var(--gray-100); border-color: var(--secondary-color); color: var(--secondary-color); } /* Active/tap state for refresh buttons */ .refresh-btn:active { background: var(--secondary-color); border-color: var(--secondary-color); color: white; transform: scale(0.98); } .refresh-btn:hover .refresh-icon { transform: rotate(180deg); } .refresh-btn:active .refresh-icon { transform: rotate(180deg) scale(0.9); } .refresh-icon { transition: transform 0.2s ease; } .live-rides-list { flex: 1; overflow-y: auto; padding: 0.9rem; } .rides-section { margin-bottom: 1.5rem; } /* Rides Tabs */ .rides-tabs { margin-bottom: 1.5rem; } .tab-headers { display: flex; background: var(--gray-50); border: 1px solid var(--border); overflow: hidden; } .tab-header { flex: 1; background: none; border: none; padding: 0.75rem 1rem; font-size: 0.9rem; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem; position: relative; } .tab-header:not(:last-child) { border-right: 1px solid var(--border); } .tab-header:hover { background: var(--gray-100); } .tab-header.active { background: var(--background); color: var(--text); border-bottom: 2px solid #21356f; } .tab-contents { background: var(--background); } .tab-content { display: none; } .tab-content.active { display: block; } .tab-content .live-rides-list { border-radius: 0 0 var(--radius) var(--radius); border: 1px solid var(--border); border-top: none; margin: 0; min-height: 100px; max-height: 400px; } /* Status dot for live indicator */ .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; display: inline-block; } .status-dot.hidden { display: none; } .status-dot.blinking { animation: blink 1s infinite; } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0.3; } } .section-header { display: flex; align-items: center; justify-content: space-between; padding: 0.675rem 0.9rem; background: var(--gray-50); border: 1px solid var(--border); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; } .section-header h4 { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--text); } .count-badge { background: var(--primary-color); color: white; padding: 0.25rem 0.5rem; border-radius: 12px; font-size: 0.8rem; font-weight: 600; min-width: 20px; text-align: center; } .rides-section .live-rides-list { border-radius: 0 0 var(--radius) var(--radius); border: 1px solid var(--border); margin: 0; min-height: 100px; max-height: auto; } .live-ride-status { font-size: 0.8rem; font-weight: 600; padding: 0.25rem 0.5rem; border-radius: 12px; white-space: nowrap; } .live-ride-status.active { background: #ef4444; color: white; } .live-ride-status.imminent { background: #f59e0b; color: white; } .live-ride-status.active-recurring, .live-ride-status.active-planned { background: #10b981; color: white; } .recurring-badge { font-size: 0.8rem; background: transparent; color: var(--secondary-color); border: 1px solid var(--secondary-color); padding: 0.25rem 0.5rem; border-radius: 12px; } .empty-rides { text-align: center; padding: 1.8rem 0.9rem; color: var(--text-muted); } .empty-icon { font-size: 2rem; margin-bottom: 0.5rem; } .empty-title { font-weight: 600; margin-bottom: 0.5rem; } .empty-message { font-size: 0.9rem; } .live-ride-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem; margin-bottom: 0.75rem; cursor: pointer; transition: all 0.2s ease; } .live-ride-item:hover { border-color: var(--secondary-color); box-shadow: var(--shadow); transform: translateY(-1px); } .live-ride-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem; } .live-ride-title { font-weight: 600; color: var(--text-primary); } .live-ride-name { font-weight: 600; color: var(--text-primary); font-size: 0.875rem; margin: 0; } .live-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-color); box-shadow: 0 0 0 2px var(--accent-light); } .live-ride-meta { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.4; } .follower-count { font-family: var(--font-mono); font-weight: 500; color: var(--accent-color); } .map-legend { padding: 0.9rem 1.35rem; border-top: 1px solid var(--border); background: var(--surface); } .legend-item { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; font-size: 0.75rem; color: var(--text-secondary); } .legend-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid; } .legend-dot.active { background: var(--accent-color); border-color: var(--accent-light); box-shadow: 0 0 0 2px var(--accent-light); } .legend-dot.route { background: var(--secondary-color); border-color: var(--secondary-dark); } .legend-dot.upcoming { background: #3b82f6; border-color: #2563eb; } /* Live Map Mobile */ @media (max-width: 768px) { .live-map-content { flex-direction: column; } .active-rides-sidebar { width: 100%; height: 40vh; min-height: 200px; max-height: 50vh; border-left: none; border-top: 1px solid var(--border); overflow-y: auto; -webkit-overflow-scrolling: touch; } .full-map { height: 60vh; min-height: 200px; } /* Ensure sidebar content is scrollable */ .live-rides-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0.75rem; } /* Fix sidebar header to not scroll */ .sidebar-header { flex-shrink: 0; position: sticky; top: 0; z-index: 20; } /* Move RLO legend below map on mobile */ .leaflet-control.flow-legend { position: static !important; width: 100% !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; border-top: 1px solid var(--border) !important; background: var(--surface) !important; } .flow-legend { padding: 1rem !important; max-height: 40vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } } /* Demand Heatmap Styles */ .demand-popup { text-align: center; padding: 0.5rem; } .route-demand-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem; margin-bottom: 1rem; transition: all 0.2s ease; } .route-demand-item:hover { border-color: var(--secondary-color); transform: translateY(-1px); box-shadow: var(--shadow); } .route-demand-header { display: flex; align-items: flex-start; gap: 1rem; } .route-demand-count { background: var(--secondary-color); color: white; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.875rem; flex-shrink: 0; } .route-demand-info { flex: 1; } .route-path { margin-bottom: 0.5rem; font-size: 0.875rem; line-height: 1.4; } .route-timing { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.4; } .no-data { text-align: center; padding: 2rem; color: var(--text-muted); font-style: italic; } /* Demand and Create Ride Explanation Sections */ .demand-explanation, .create-ride-intro { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.35rem; margin-bottom: 2rem; } .demand-explanation p, .create-ride-intro p { margin-bottom: 1rem; color: var(--text-secondary); line-height: 1.5; } .opportunities-cta { display: flex; justify-content: center; } .opportunities-cta button { display: inline-flex; align-items: center; gap: 0.5rem; } /* Header Actions Layout */ .header-actions { display: flex; align-items: center; gap: 1rem; } /* Full-screen map for opportunities */ .opportunities-map-fullscreen { flex: 1; display: flex; flex-direction: column; } .opportunities-map-fullscreen .full-map { flex: 1; height: calc(100vh - 120px); min-height: 600px; } /* Flow Visualization Legend */ .leaflet-control.flow-legend { background: rgba(255, 255, 255, 0.95); border: 2px solid var(--border); border-radius: var(--radius); padding: 0.9rem; box-shadow: var(--shadow); backdrop-filter: blur(8px); max-width: 280px; } .flow-legend h4 { margin: 0 0 0.75rem 0; font-size: 0.9rem; font-weight: 600; color: var(--primary-color); border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; } .flow-legend h5 { margin: 1rem 0 0.5rem 0; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); } .legend-section { margin-bottom: 0.75rem; } .legend-item { display: flex; align-items: center; margin-bottom: 0.4rem; font-size: 0.75rem; line-height: 1.3; color: var(--text); } .time-legend-line { width: 20px; height: 2px; margin-right: 8px; border-radius: 1px; flex-shrink: 0; } .volume-legend-line { height: 2px; margin-right: 8px; background: var(--primary-color); border-radius: 1px; flex-shrink: 0; } .volume-legend-line.thin { width: 15px; height: 1px; } .volume-legend-line.medium { width: 20px; height: 2px; } .volume-legend-line.thick { width: 20px; height: 4px; } .pattern-legend-line { width: 20px; height: 2px; margin-right: 8px; background: var(--primary-color); flex-shrink: 0; } background: var(--primary-color); } .pattern-legend-line.weekend { background: var(--primary-color); border-top: 1px dashed var(--primary-color); border-bottom: 1px dashed var(--primary-color); height: 0; border-width: 1px; } .origin-dot { width: 10px; height: 10px; background: #10b981; border: 2px solid white; border-radius: 50%; margin-right: 8px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,0.2); } .dest-square { width: 10px; height: 10px; background: #ef4444; border: 2px solid white; margin-right: 8px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,0.2); } /* Flow Popup Styling */ .flow-popup { font-size: 0.8rem; line-height: 1.4; } .flow-popup .flow-demand-count { font-size: 1.1rem; font-weight: 600; color: var(--primary-color); margin-bottom: 0.5rem; } .flow-popup .flow-route { margin-bottom: 0.5rem; } .flow-popup .flow-timing { font-size: 0.75rem; color: var(--text-secondary); } .flow-popup .flow-timing strong { color: var(--text); } /* Gradient Circle Legend Items */ .gradient-circle { width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; flex-shrink: 0; } .gradient-circle.origin-gradient { background: radial-gradient(circle, #2563eb 0%, rgba(37, 99, 235, 0.3) 70%, transparent 100%); } .gradient-circle.dest-gradient { background: radial-gradient(circle, #ef4444 0%, rgba(239, 68, 68, 0.3) 70%, transparent 100%); } /* Interactive Legend Items */ .legend-item.clickable { cursor: pointer; padding: 4px 6px; border-radius: 4px; transition: all 0.2s ease; border: 1px solid transparent; margin: 2px 0; } .legend-item.clickable:hover { background-color: rgba(0, 0, 0, 0.1); border-color: rgba(0, 0, 0, 0.2); } .legend-item.clickable.active { background-color: rgba(37, 99, 235, 0.1); border-color: rgba(37, 99, 235, 0.3); font-weight: 500; } .legend-item.clickable:not(.active) { opacity: 0.5; background-color: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.1); } .legend-item.clickable:not(.active) span { opacity: 0.4; } .legend-item.clickable:not(.active):hover { opacity: 0.7; background-color: rgba(0, 0, 0, 0.1); } .legend-section h5 { user-select: none; font-size: 0.8rem; margin-bottom: 8px; color: var(--text-secondary); } /* Mobile-optimized Follower Screen */ .follower-mobile-container { display: flex; flex-direction: column; height: 100vh; max-height: 100vh; overflow: hidden; background: var(--background); } .follower-header { flex: 0 0 auto; padding: 4px 0; background: transparent; /* Minimal header for spacing consistency across mobile experience */ } .follower-info { flex: 0 0 auto; padding: 10.8px 14.4px; background: white; border-bottom: 1px solid var(--border); } .eta-info { font-size: 0.875rem; color: var(--text-secondary); margin-top: 8px; display: flex; align-items: center; gap: 8px; } .eta-info span { white-space: nowrap; } .ride-name-title { margin: 0 0 8px 0; font-size: 1.25rem; font-weight: 600; color: var(--text-primary); padding-bottom: 6px; border-bottom: 3px solid var(--secondary-color); } .ride-name-title.community { border-bottom-color: var(--secondary-color); /* Blue for community rides */ } .ride-name-title.reserve { border-bottom-color: var(--accent-color); /* Green for reserve rides */ } .status-bar { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--text-secondary); } .status-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-400); animation: pulse 2s infinite; } .status-bar .dot.active { background: var(--accent-color); } .follower-map-container { flex: 1 1 65%; position: relative; overflow: hidden; } #follower-screen #live-map { height: 100%; width: 100%; } .map-controls-minimal { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); z-index: 1000; } .map-btn-minimal { padding: 7.2px 14.4px; background: white; border: 2px solid var(--primary-color); border-radius: 20px; font-size: 0.875rem; font-weight: 600; color: var(--primary-color); box-shadow: var(--shadow); cursor: pointer; transition: all 0.2s ease; } .map-btn-minimal:hover { background: var(--primary-color); color: white; } .trail-legend { position: absolute; top: 10px; right: 10px; background: white; padding: 8px 12px; border-radius: var(--radius); box-shadow: var(--shadow); z-index: 1000; font-size: 0.75rem; } .trail-legend .legend-item { display: flex; align-items: center; gap: 8px; margin: 4px 0; } .legend-line { width: 20px; height: 3px; border-radius: 2px; } .legend-line.planned { background: repeating-linear-gradient( 90deg, #2563eb, #2563eb 4px, transparent 4px, transparent 8px ); } .legend-line.route-color { background: #3b82f6; /* Default blue - will be dynamically updated */ } .legend-line.actual { background: linear-gradient(90deg, #ef4444 0%, #ffc0cb 100%); } /* Map Legend for Modals */ .map-legend-modal { position: absolute; bottom: 10px; right: 10px; background: rgba(255, 255, 255, 0.95); padding: 8px 12px; border-radius: var(--radius); box-shadow: var(--shadow); z-index: 1000; font-size: 0.75rem; } .map-legend-modal .legend-item { display: flex; align-items: center; gap: 8px; margin: 4px 0; } .legend-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid white; box-shadow: 0 1px 3px rgba(0,0,0,0.3); flex-shrink: 0; } .legend-dot.start-dot { background: #22c55e; /* Green for start */ } .legend-dot.end-dot { background: #ef4444; /* Red for end */ } .follower-actions { flex: 0 0 auto; padding: 10.8px 14.4px; background: white; border-top: 1px solid var(--border); } .stop-tracking-btn-full { width: 100%; padding: 10.8px 21.6px; background: var(--danger-color); color: white; border: none; border-radius: var(--radius); font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .stop-tracking-btn-full:hover { background: #dc2626; transform: translateY(-1px); box-shadow: var(--shadow); } .end-ride-btn-full { width: 100%; padding: 10.8px 21.6px; background: #22c55e; /* Green color for leader */ color: white; border: none; border-radius: var(--radius); font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .end-ride-btn-full:hover { background: #16a34a; /* Darker green on hover */ transform: translateY(-1px); box-shadow: var(--shadow); } /* Desktop adjustments for follower screen */ @media (min-width: 768px) { .follower-mobile-container { max-width: 600px; margin: 0 auto; height: calc(100vh - 32px); margin-top: 16px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); } .ride-name-title { font-size: 1.5rem; } } /* Leader Screen Styles */ .leader-container { display: flex; flex-direction: column; height: 600px; /* Fixed height for modal */ gap: 0; } /* Opportunities Screen Styles */ .opportunities-info { padding: 1rem; background: var(--surface); border-radius: var(--radius); margin-bottom: 1rem; } .ride-ideas-counter { /* Minimal styling - let inline styles take precedence */ } .ride-ideas-counter span { /* Minimal styling - let inline styles take precedence */ } .opportunities-map-container { margin-top: 1rem; height: calc(100vh - 320px); /* Maximized height accounting for all UI elements */ min-height: 450px; /* Ensure good minimum height */ } .opportunities-map-container #opportunities-map { width: 100%; height: 100%; } .leader-status-section { flex: 0 0 25%; padding: 0.75rem; background: var(--background); border-bottom: 2px solid var(--border); display: flex; flex-direction: column; gap: 0.75rem; } .leading-ride-header { background: linear-gradient(135deg, #fef3c7, #fed7aa); border: 2px solid #f59e0b; border-radius: var(--radius-lg); padding: 0.75rem; margin-bottom: 0.25rem; } .leading-ride-header h2 { margin: 0; font-size: 1.1rem; font-weight: 700; color: #92400e; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: nowrap; min-height: 2.5rem; white-space: nowrap; overflow: hidden; } #current-ride-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 100px); /* Reserve space for status indicator */ } .leading-ride-header .status-indicator { display: flex; align-items: center; gap: 0.5rem; } .leader-stats { display: flex; gap: 2rem; flex-wrap: wrap; } .stat-item { display: flex; align-items: center; gap: 0.5rem; } .stat-label { font-weight: 600; color: var(--text-secondary); } .stat-value { font-weight: 700; color: var(--primary-color); font-size: 1.125rem; } .leader-actions { flex: 0 0 auto; padding: 10.8px 14.4px; background: white; border-top: 1px solid var(--border); } .leader-map-section { flex: 1; min-height: 0; /* Important for flex child */ } .leader-map { width: 100%; height: 100%; border-radius: 0; } /* Mobile adjustments for leader screen */ @media (max-width: 767px) { .leader-container { height: calc(100vh - 35px); } .leader-status-section { flex: 0 0 20%; padding: 0.5rem; } .leading-ride-header { padding: 0.5rem; } .leading-ride-header h2 { font-size: 1rem; flex-wrap: nowrap; min-height: 2rem; white-space: nowrap; } #current-ride-name { max-width: calc(100% - 80px); /* Smaller reserve on mobile */ } .leader-stats { gap: 0.75rem; } /* Apply same mobile header optimizations as follower screen */ #leader-screen .header-content h2 { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.25rem 0; } /* Hide subtitle on mobile for leader screen */ #leader-screen .header-content .subtitle { display: none; } /* Position back button at bottom for leader screen */ #leader-screen .back-btn { position: fixed; top: auto; bottom: 1rem; right: 1rem; z-index: 1000; box-shadow: var(--shadow-lg); background: var(--secondary-color); padding: 0px 16px; } /* Remove padding-right from screen header for leader */ #leader-screen .screen-header { padding-right: 0; } /* Remove back button from leader dashboard on mobile */ #leader-screen .back-btn { display: none !important; } } /* Live Ride Actions */ .live-ride-actions { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); } .watch-ride-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.875rem; background: linear-gradient(135deg, #06d6a0 0%, #00b4d8 100%); color: white; border: none; border-radius: var(--radius); font-family: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(6, 214, 160, 0.2); } .watch-ride-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(6, 214, 160, 0.3); background: linear-gradient(135deg, #05c496 0%, #0096c7 100%); } .watch-ride-btn:active { transform: translateY(0); } /* Mobile adjustments for watch button */ @media (max-width: 767px) { .watch-ride-btn { width: 100%; justify-content: center; padding: 0.625rem; } } /* Compact ride card styles */ .live-ride-item.compact { padding: 0.6rem; margin-bottom: 0.5rem; } .compact-ride-name { font-weight: 600; color: var(--text-primary); font-size: 0.9rem; line-height: 1.2; margin-bottom: 0.25rem; } .compact-ride-time { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.2; margin-bottom: 0.25rem; } .compact-ride-status { font-size: 0.75rem; color: var(--text-secondary); font-weight: 500; line-height: 1.2; } .compact-ride-interest { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.2; } .compact-ride-followers { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.2; display: flex; align-items: center; gap: 0.5rem; } .compact-watch-btn { display: flex; align-items: center; justify-content: center; gap: 0.25rem; padding: 0.5rem 1rem; background: linear-gradient(135deg, #ffd60a 0%, #ffc300 100%); color: #1a1a1a; border: none; border-radius: calc(var(--radius) * 0.75); font-family: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(255, 198, 0, 0.2); margin-top: 0.5rem; } .compact-watch-btn.full-width { width: 100%; } .compact-watch-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(255, 198, 0, 0.3); background: linear-gradient(135deg, #ffdc2e 0%, #ffd60a 100%); } .ride-watchers { font-size: 0.75rem; color: var(--text-secondary); font-weight: 500; margin-top: 0.25rem; } /* Share button styling */ .share-btn { position: relative; overflow: hidden; } .share-btn:hover { background: linear-gradient(135deg, #06d6a0 0%, #00b4d8 100%); color: white; border-color: transparent; } .share-btn:disabled { opacity: 0.6; cursor: not-allowed; } /* Instagram Integration Modal */ .instagram-integration-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 10001; backdrop-filter: blur(4px); } .instagram-integration-content { background: var(--surface); border-radius: var(--radius); padding: 1.35rem; max-width: 400px; width: 90%; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); text-align: center; } .instagram-integration-content h3 { margin: 0 0 0.9rem 0; color: var(--text-primary); font-size: 1.3rem; } .instagram-integration-content p { margin: 0 0 1.35rem 0; color: var(--text-secondary); } .instagram-options { display: flex; flex-direction: column; gap: 0.675rem; margin-bottom: 1.35rem; } .instagram-btn { padding: 0.675rem 0.9rem; border: none; border-radius: var(--radius); font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; background: linear-gradient(135deg, #E4405F 0%, #C13584 100%); color: white; box-shadow: 0 2px 8px rgba(228, 64, 95, 0.3); } .instagram-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(228, 64, 95, 0.4); } .instagram-btn.secondary { background: var(--border); color: var(--text-primary); box-shadow: none; } .instagram-btn.secondary:hover { background: var(--text-secondary); color: var(--surface); } .instagram-instructions { padding: 0.9rem; background: var(--background); border-radius: var(--radius); border-left: 3px solid #E4405F; } .instagram-instructions small { color: var(--text-secondary); line-height: 1.4; } .modal-footer { display: flex; gap: 0.5rem; flex-wrap: wrap; } .modal-footer button { flex: 1; min-width: 100px; } @media (max-width: 600px) { .modal-footer { flex-direction: column; } .modal-footer button { width: 100%; } } /* Add Dates Tab Styles */ .add-dates-layout { display: flex; flex-direction: column; gap: 20px; max-width: 600px; margin: 0 auto; } .add-dates-form-section { flex: 1; } .ride-info-preview { background: var(--gray-50); border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin: 16px 0; } .ride-info-preview h4 { margin: 0 0 12px 0; color: var(--text-primary); font-size: 1rem; } .selected-dates-summary { margin-top: 12px; padding: 12px; background: var(--gray-50); border-radius: 6px; font-size: 0.9rem; } .calendar-legend { display: flex; gap: 16px; margin-top: 8px; font-size: 0.8rem; } .legend-item { display: flex; align-items: center; gap: 6px; } .legend-color { width: 12px; height: 12px; border-radius: 2px; border: 1px solid var(--border); } .legend-color.selected { background: var(--secondary-color); } .legend-color.existing { background: var(--gray-300); } /* Calendar day states for add dates */ .calendar-day.existing-date { background: var(--gray-300); color: var(--text-secondary); cursor: not-allowed; } .calendar-day.existing-date:hover { background: var(--gray-300); } /* Collapsible sections */ .collapsible-header { cursor: pointer; user-select: none; } .collapsible-header:hover { background: var(--gray-50); } .section-title { display: flex; align-items: center; gap: 0.5rem; width: 100%; } .section-title h4 { flex: 1; margin: 0; } .collapse-icon { font-size: 0.8rem; transition: transform 0.2s ease; width: 12px; text-align: center; } .section-content { transition: all 0.2s ease; } /* Version Footer */ .version-footer { position: fixed; bottom: 20px; left: 20px; z-index: 1000; pointer-events: none; } .version-number { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); opacity: 0.6; cursor: pointer; pointer-events: auto; padding: 4px 6px; border-radius: 4px; transition: opacity 0.2s ease; } .version-number:hover { opacity: 0.9; background: var(--background-secondary); } @media (max-width: 768px) { .version-footer { bottom: 10px; left: 10px; } .version-number { font-size: 10px; } } /* How to Use Guide Styling */ .guide-content { max-height: 70vh; overflow-y: auto; } .guide-step { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-light); } .guide-step:last-of-type { border-bottom: none; margin-bottom: 1rem; } .guide-step h3 { color: var(--primary-color); margin-bottom: 0.5rem; font-size: 1.1rem; } .guide-step p { margin: 0; line-height: 1.6; color: var(--text-primary); } .guide-tip { background: rgba(var(--primary-color-rgb), 0.1); border: 1px solid rgba(var(--primary-color-rgb), 0.3); border-radius: var(--radius); padding: 1rem; margin-top: 1rem; } .guide-tip strong { color: var(--primary-color); } /* Email Subscription Modal */ .subscription-success-content { padding: 0; } .success-message { text-align: center; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); } .success-message p { margin: 0.5rem 0; color: var(--text-primary); } .success-message strong { color: var(--success-color); font-size: 1.1rem; } .subscription-details { margin: 2rem 0; padding: 1.5rem; background: var(--surface-color); border-radius: var(--radius); border: 1px solid var(--border-color); } .detail-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-light); } .detail-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .detail-item strong { color: var(--text-primary); min-width: 120px; } .detail-item span { color: var(--text-primary); font-weight: 500; text-align: right; flex: 1; } .management-info { margin: 2rem 0; padding: 1.5rem; background: rgba(var(--primary-color-rgb), 0.05); border-radius: var(--radius); border: 1px solid rgba(var(--primary-color-rgb), 0.1); } .management-info p { margin: 0.5rem 0; color: var(--text-primary); } .subscription-link { color: var(--primary-color); text-decoration: none; font-weight: 500; } .subscription-link:hover { text-decoration: underline; } .next-steps { margin-top: 2rem; } .next-steps p { margin-bottom: 1rem; color: var(--text-primary); font-weight: 500; } .next-steps ul { margin: 0; padding-left: 1.5rem; } .next-steps li { margin-bottom: 0.5rem; color: var(--text-primary); line-height: 1.5; } #subscription-success-modal .modal-content { max-width: 600px; width: 90%; } /* Subscription Steps Styling */ .subscription-step { opacity: 1; transform: translateX(0); transition: all 0.3s ease-in-out; } .subscription-step.hidden { display: none; opacity: 0; transform: translateX(20px); } .subscription-step .form-group { display: flex; flex-direction: row; justify-content: center; } .step-header { margin-bottom: 20px; text-align: center; } .step-header h4 { color: var(--primary-color); margin-bottom: 8px; font-size: 1.1em; font-weight: 600; } .step-description { color: var(--text-muted); font-size: 0.9em; margin: 0; } .step-navigation { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; gap: 12px; } .back-step-btn { padding: 8px 16px; background: var(--background-secondary); color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; transition: all 0.2s ease; font-size: 0.9em; } .back-step-btn:hover { background: var(--background-tertiary); color: var(--text-primary); } .continue-btn { border: 1px solid var(--primary-color); } .continue-btn:disabled { opacity: 0.5; cursor: not-allowed; border-color: var(--border-color); } .route-buttons { /* Remove fixed height to prevent nested scrollbar */ flex-direction: column; gap: 0; } .route-button-container { width: 100%; margin-bottom: 8px; } .route-buttons .selection-button { justify-content: flex-start; text-align: left; padding: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; transition: all 0.2s ease; } .route-details { padding: 8px 12px 12px 12px; background: var(--gray-50); border: 1px solid #e5e7eb; border-top: none; border-radius: 0 0 8px 8px; font-size: 11px; color: var(--text-muted); line-height: 1.4; max-height: 0; overflow: hidden; opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateY(-4px); } .route-button-container .route-button.selected + .route-details { max-height: 60px; opacity: 1; transform: translateY(0); margin-top: 0; } .route-button-container .route-button.selected { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; } /* Credits Modal Styles */ .credits-content { max-height: 70vh; overflow-y: auto; padding-right: 10px; } .credits-section { margin-bottom: 1.5rem; } .credits-section:last-child { margin-bottom: 0; } .credits-section h3 { color: var(--primary-color); font-size: 1.1rem; font-weight: 600; margin: 0 0 0.75rem 0; display: flex; align-items: center; gap: 0.5rem; } .credits-section p { margin: 0.5rem 0; line-height: 1.6; color: var(--text-secondary); } .credits-section strong { color: var(--text-primary); font-weight: 600; } .tech-list { list-style: none; padding: 0; margin: 0.75rem 0; } .tech-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--border-light); color: var(--text-secondary); line-height: 1.5; } .tech-list li:last-child { border-bottom: none; } .tech-list strong { color: var(--secondary-color); font-weight: 600; } .credits-footer { text-align: center; margin-top: 2rem; padding: 1rem 0; border-top: 1px solid var(--border-light); } .credits-footer p { color: var(--text-muted); font-size: 0.9rem; margin: 0; } /* Responsive credits modal */ @media (max-width: 768px) { .credits-content { max-height: 80vh; padding-right: 0; } .credits-section { margin-bottom: 1.25rem; } .credits-section h3 { font-size: 1rem; } } .route-time { margin-bottom: 4px; font-weight: 500; color: var(--text-primary); } .route-next { color: var(--primary-color); font-weight: 400; } .loading-message, .info-message { text-align: center; color: var(--text-muted); font-style: italic; padding: 20px; } .loading-message { color: var(--primary-color); } @media (max-width: 768px) { .step-navigation { flex-direction: column-reverse; gap: 8px; } .step-navigation .continue-btn, .step-navigation .back-step-btn { width: 100%; text-align: center; } /* Route buttons height removed for better mobile experience */ } /* Tag Badge Styles */ .ride-tag-badge { display: inline-block; padding: 2px 4px; border-radius: 4px; font-size: 0.65rem; font-weight: 700; margin-left: 0px; text-transform: uppercase; letter-spacing: 0.5px; white-space:nowrap; } /* Tag-specific colors */ .tag-regular-service { background: rgba(30, 64, 175, 0.15); color: #1e40af; border: 1px solid rgba(30, 64, 175, 0.3); } .tag-community-ride { background: rgba(34, 197, 94, 0.15); color: #16a34a; border: 1px solid rgba(34, 197, 94, 0.3); } .tag-special-event { background: rgba(245, 158, 11, 0.15); color: #d97706; border: 1px solid rgba(245, 158, 11, 0.3); } .tag-social-ride { background: rgba(236, 72, 153, 0.15); color: #db2777; border: 1px solid rgba(236, 72, 153, 0.3); } .tag-commuter-train { background: rgba(100, 116, 139, 0.15); color: #475569; border: 1px solid rgba(100, 116, 139, 0.3); } /* Route hover effects */ .route-highlighted { stroke-width: 6 !important; opacity: 1 !important; filter: drop-shadow(0 0 4px rgba(0,0,0,0.3)); cursor: pointer; transition: all 0.3s ease; } .route-dimmed { opacity: 0.3 !important; stroke-width: 3 !important; transition: all 0.3s ease; } /* Enhanced ride item styles */ .live-ride-item.compact { position: relative; transition: all 0.2s ease; } .live-ride-item.compact:hover { background: var(--gray-50); transform: translateX(2px); } .compact-ride-name { display: flex; align-items: center; gap: 8px; font-weight: 600; } .compact-ride-content { display: flex; align-items: stretch; gap: 0.75rem; } .compact-ride-info { flex: 1; display: flex; flex-direction: column; } .compact-ride-icon { width: auto; height: 52px; min-height: 60px; aspect-ratio: 1; border-radius: 6px; object-fit: cover; flex-shrink: 0; } .compact-ride-tags { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-top: 0.25rem; } /* Fun tooltip for ride tag badges */ .ride-tag-badge { position: relative; cursor: pointer; transition: all 0.3s ease; } .ride-tag-badge:hover { transform: scale(1.05); } .ride-tag-badge::before { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-5px); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 8px 12px; border-radius: 8px; font-size: 0.75rem; font-weight: 500; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); z-index: 1000; max-width: 200px; white-space: normal; text-align: center; line-height: 1.3; } .ride-tag-badge:hover::before { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(-10px); } /* Ride item with tags on hover */ .live-ride-item.tag-hover-regular-service { border-left: 3px solid #1e40af; padding-left: 12px; } .live-ride-item.tag-hover-community-ride { border-left: 3px solid #22c55e; padding-left: 12px; } .live-ride-item.tag-hover-special-event { border-left: 3px solid #f59e0b; padding-left: 12px; } .live-ride-item.tag-hover-social-ride { border-left: 3px solid #ec4899; padding-left: 12px; } .live-ride-item.tag-hover-commuter-train { border-left: 3px solid #64748b; padding-left: 12px; } /* Loading button styles */ .loading-spinner { display: inline-block; animation: spin 1s linear infinite; margin-right: 6px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } button.loading { opacity: 0.7; cursor: not-allowed; position: relative; } button.loading .loading-spinner { color: inherit; } /* View Toggle Styles */ margin: 10px 0; padding: 0 10px; } display: flex; background: #f0f0f0; border-radius: 8px; padding: 2px; width: 100%; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); } flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border: none; background: transparent; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; font-size: 14px; color: #666; } background: white; color: #333; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } background: rgba(255,255,255,0.5); } font-size: 16px; } font-weight: 500; } padding: 15px; background: white; border-radius: 8px; margin: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } */ display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; padding: 0 5px; } background: none; border: none; font-size: 24px; cursor: pointer; padding: 5px 10px; border-radius: 6px; color: #666; transition: all 0.2s ease; } background: #f0f0f0; color: #333; } margin: 0; font-size: 18px; font-weight: 600; color: #333; } width: 100%; } display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; margin-bottom: 8px; } text-align: center; padding: 8px 4px; font-size: 12px; font-weight: 600; color: #666; background: #f8f9fa; } display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: #e9ecef; border-radius: 4px; overflow: hidden; } background: white; min-height: 60px; padding: 4px; cursor: pointer; transition: background-color 0.2s ease; position: relative; display: flex; flex-direction: column; align-items: flex-start; } background: #f8f9fa; } background: #e3f2fd; border: 1px solid #2196f3; } color: #ccc; background: #fafafa; } font-size: 12px; font-weight: 500; margin-bottom: 2px; } font-size: 10px; padding: 2px 4px; border-radius: 3px; margin-bottom: 1px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; } animation: pulse 2s infinite; } content: '●'; color: #f44336; font-size: 8px; position: absolute; left: 1px; top: 1px; } background: #e3f2fd; color: #1976d2; border-left: 3px solid #1976d2; } background: #e8f5e8; color: #2e7d32; border-left: 3px solid #4caf50; } background: #fce4ec; color: #c2185b; border-left: 3px solid #e91e63; } background: #fff3e0; color: #f57c00; border-left: 3px solid #ff9800; } background: #f3e5f5; color: #7b1fa2; border-left: 3px solid #9c27b0; } /* Responsive adjustments */ @media (max-width: 768px) { min-height: 45px; padding: 2px; } font-size: 11px; } font-size: 9px; padding: 1px 2px; } font-size: 12px; } } } flex: 1; /* Take remaining space after sidebar, like .full-map */ height: 100%; background: white; position: relative; z-index: 2; /* Above map */ } width: 100%; height: 100%; max-width: none; padding: 0; margin: 0; background: white; border: none; border-radius: 0; box-shadow: none; overflow: visible; display: flex; flex-direction: column; } padding: 20px; display: flex; justify-content: space-between; align-items: center; background: white; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; } flex: 1; display: flex; flex-direction: column; } /* Weekday headers */ display: flex; background: #0a1126; } flex: 1; padding: 12px 8px; text-align: center; font-weight: 600; font-size: 13px; color: #ffffff; border-right: 1px solid #1f2937; } border-right: none; } flex: 1; display: flex; flex-direction: column; } display: flex; flex: 1; border-bottom: 1px solid #e5e7eb; } border-bottom: none; } flex: 1; padding: 8px; border-right: 1px solid #e5e7eb; background: white; display: flex; flex-direction: column; cursor: pointer; transition: background-color 0.2s ease; } border-right: none; } background: #f9fafb; } background: #dbeafe; box-shadow: inset 0 0 0 2px #3b82f6; } font-weight: 600; font-size: 14px; color: #1f2937; margin-bottom: 4px; } font-size: 10px; padding: 2px 4px; border-radius: 2px; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } /* View toggle styles */ .all-rides-view-toggle { display: flex; gap: 4px; background: #f3f4f6; padding: 4px; border-radius: 8px; margin: 10px 0; } .all-rides-toggle-btn { flex: 1; padding: 8px 12px; border: none; background: transparent; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; font-size: 14px; color: #666; display: flex; align-items: center; justify-content: center; gap: 6px; } .all-rides-toggle-btn.active { background: white; color: #333; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .all-rides-toggle-btn:hover:not(.active) { background: rgba(255,255,255,0.5); } /* Ride details button for Add Dates feature */ .ride-name-button { background: var(--primary-color); color: white; border: none; border-radius: 8px; padding: 12px 20px; font-size: 16px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; width: 100%; text-align: center; } .ride-name-button:hover { background: var(--primary-dark); transform: translateY(-1px); } .ride-name-button:active { transform: translateY(0); } /* Day header styling for Add Dates calendar */ .day-header { padding: 0.5rem; text-align: center; font-weight: 600; color: var(--text-secondary); background: var(--gray-50); font-size: 0.875rem; border-bottom: 1px solid var(--gray-200); border: 1px solid #ddd; /* Add visible border */ min-height: 30px; /* Ensure minimum height */ } /* Selected dates display */ .selected-dates-summary { margin-top: 1rem; padding: 1rem; background: var(--gray-50); border-radius: 8px; border: 1px solid var(--gray-200); } .selected-dates-summary h4 { margin: 0 0 0.75rem 0; color: var(--text-primary); font-size: 1rem; } .selected-dates-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .selected-date-chip { background: var(--primary-color); color: white; padding: 0.25rem 0.75rem; border-radius: 1rem; font-size: 0.875rem; font-weight: 500; } /* Add Dates new layout */ .access-code-row { display: flex; gap: 0.75rem; align-items: flex-end; } .access-code-row input { flex: 1; } .access-code-row button { white-space: nowrap; } .add-dates-content { margin-top: 1.5rem; } .add-dates-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2rem; } .calendar-section { /* Left column - calendar */ } .selected-dates-section { /* Right column - selected dates */ } .selected-dates-section label { display: block; margin-bottom: 0.75rem; font-weight: 600; color: var(--text-primary); } .no-dates-selected { color: var(--text-secondary); font-style: italic; padding: 1rem; text-align: center; border: 2px dashed var(--gray-300); border-radius: 8px; } .selected-count { font-weight: 600; color: var(--text-primary); margin-bottom: 0.75rem; } .add-dates-btn { width: 100%; padding: 12px 24px; font-size: 16px; font-weight: 600; } .add-dates-btn:disabled { background: var(--gray-300); color: var(--gray-500); cursor: not-allowed; } /* Responsive design */ @media (max-width: 768px) { .add-dates-grid { grid-template-columns: 1fr; gap: 1rem; } .access-code-row { flex-direction: column; align-items: stretch; } } /* Toast Notifications */ .toast-container { position: fixed; top: 20px; right: 20px; z-index: 10000; display: flex; flex-direction: column; gap: 0.5rem; max-width: 400px; } .toast { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-radius: var(--radius); box-shadow: var(--shadow-lg); font-size: 0.875rem; font-weight: 500; line-height: 1.4; opacity: 0; transform: translateX(100%); transition: all 0.3s ease-in-out; background: white; border: 1px solid var(--border); position: relative; overflow: hidden; } .toast.show { opacity: 1; transform: translateX(0); } .toast.hide { opacity: 0; transform: translateX(100%); } .toast-success { background: #f0fdf4; border-color: #22c55e; color: #15803d; } .toast-success::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #22c55e; } .toast-error { background: #fef2f2; border-color: #ef4444; color: #dc2626; } .toast-error::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #ef4444; } .toast-warning { background: #fffbeb; border-color: #f59e0b; color: #d97706; } .toast-warning::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #f59e0b; } .toast-info { background: #f0f9ff; border-color: #3b82f6; color: #1d4ed8; } .toast-info::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #3b82f6; } .toast-icon { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 16px; } .toast-message { flex: 1; } .toast-close { background: none; border: none; cursor: pointer; padding: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; opacity: 0.5; transition: opacity 0.2s; font-size: 16px; line-height: 1; } .toast-close:hover { opacity: 1; } .toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; background: currentColor; opacity: 0.3; animation: toast-progress 5s linear forwards; } @keyframes toast-progress { from { width: 100%; } to { width: 0%; } } @media (max-width: 640px) { .toast-container { left: 20px; right: 20px; max-width: none; } .toast { transform: translateY(-100%); } .toast.show { transform: translateY(0); } .toast.hide { transform: translateY(-100%); } } /* Upcoming Dates in Modal */ .upcoming-dates { margin-top: 12px; } .upcoming-header { margin-bottom: 8px; } .upcoming-title { font-weight: 600; color: var(--gray-700); font-size: 14px; } .upcoming-list { max-height: 200px; overflow-y: auto; border: 1px solid var(--gray-200); border-radius: 6px; background: var(--gray-50); } .upcoming-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--gray-200); transition: background-color 0.15s ease; } .upcoming-item:last-child { border-bottom: none; } .upcoming-item:hover { background: white; } .upcoming-item.upcoming-next { background: #eff6ff; border-left: 3px solid var(--secondary-color); } .upcoming-date { font-size: 13px; color: var(--gray-700); font-weight: 500; } .upcoming-label { font-size: 11px; color: var(--secondary-color); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .upcoming-more { padding: 8px 12px; text-align: center; font-size: 12px; color: var(--gray-500); font-style: italic; background: #f9fafb; } .upcoming-info, .upcoming-error { padding: 8px 12px; text-align: center; font-size: 13px; color: var(--gray-500); background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 6px; } .upcoming-loading { padding: 8px 12px; text-align: center; font-size: 13px; color: var(--gray-500); background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 6px; } /* Crisp Custom Multiselect Dropdown Styles */ .flow-legend { background: white; padding: 12px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid #e5e7eb; } .flow-legend-header { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; } .flow-legend-icon { font-size: 16px; } .flow-legend-header h4 { margin: 0; font-size: 13px; font-weight: 600; color: #111827; } .filter-container { display: flex; flex-direction: column; gap: 8px; } .custom-multiselect.sleek { position: relative; } .multiselect-display { padding: 8px 10px; background: white; border: 1px solid #d1d5db; border-radius: 6px; cursor: pointer; font-size: 12px; color: #111827; display: flex; align-items: center; gap: 6px; transition: all 0.15s ease; } .multiselect-display:hover { border-color: #9ca3af; background: #f9fafb; } .multiselect-display:active { background: #f3f4f6; transform: scale(0.99); } .display-icon { font-size: 14px; } .display-text { flex: 1; font-weight: 500; } .display-arrow { font-size: 12px; color: #6b7280; transition: transform 0.15s ease; } .multiselect-dropdown { display: none; position: absolute; top: calc(100% + 2px); left: 0; right: 0; background: white; border: 1px solid #d1d5db; border-radius: 6px; z-index: 1000; box-shadow: 0 4px 16px rgba(0,0,0,0.1); overflow: hidden; } .dropdown-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: #f9fafb; border-bottom: 1px solid #e5e7eb; color: #6b7280; font-size: 11px; font-weight: 500; } .clear-all { background: white; border: 1px solid #d1d5db; color: #374151; font-size: 10px; padding: 3px 6px; border-radius: 3px; cursor: pointer; transition: all 0.1s ease; font-weight: 500; } .clear-all:hover { background: #f3f4f6; border-color: #9ca3af; } .clear-all:active { background: #e5e7eb; transform: scale(0.95); } .multiselect-option { padding: 0; cursor: pointer; font-size: 12px; display: flex; align-items: center; border-bottom: 1px solid #f3f4f6; transition: background 0.1s ease; } .multiselect-option:hover { background: #f9fafb; } .multiselect-option:last-child { border-bottom: none; } .multiselect-option input[type="checkbox"] { display: none; } .multiselect-option label { display: flex; align-items: center; padding: 8px 10px; width: 100%; cursor: pointer; position: relative; padding-left: 32px; color: #374151; font-weight: 400; } .multiselect-option label:before { content: ''; position: absolute; left: 10px; width: 14px; height: 14px; border: 1.5px solid #d1d5db; border-radius: 3px; background: white; transition: all 0.1s ease; } .multiselect-option input[type="checkbox"]:checked + label { color: #111827; font-weight: 500; } .multiselect-option input[type="checkbox"]:checked + label:before { background: #4f46e5; border-color: #4f46e5; } .multiselect-option input[type="checkbox"]:checked + label:after { content: '✓'; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: white; font-size: 10px; font-weight: bold; } .multiselect-option:active { background: #e5e7eb; } .legend-info { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #e5e7eb; } .info-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #6b7280; } .info-dot { width: 9px; height: 9px; border-radius: 50%; margin-right: 1.5px; } .info-dot.origin { background: #2563eb; box-shadow: 0 0 4px rgba(37, 99, 235, 0.4); } .info-dot.destination { background: #ef4444; box-shadow: 0 0 4px rgba(239, 68, 68, 0.4); }