/** * HVAC Dashboard & Management CSS Bundle */ /* === hvac-dashboard.css === */ /* Reduced Motion Support Added - 2025-07-23 */ /* Vendor Prefixes Added - 2025-07-23 */ /* * HVAC Trainer Dashboard Styles - Enhanced Version * * Styles specific to the trainer dashboard page. */ /* CSS Custom Properties / Variables */ :root { /* Spacing */ --hvac-spacing-1: 0.25rem; --hvac-spacing-2: 0.5rem; --hvac-spacing-3: 0.75rem; --hvac-spacing-4: 1rem; --hvac-spacing-5: 1.5rem; --hvac-spacing-6: 2rem; --hvac-spacing-8: 3rem; --hvac-spacing-sm: 0.5rem; --hvac-spacing-md: 1rem; --hvac-spacing-lg: 1.5rem; --hvac-spacing-xl: 2rem; /* Border Radius */ --hvac-radius-sm: 4px; --hvac-radius-md: 8px; --hvac-radius-lg: 12px; --hvac-radius-full: 9999px; --hvac-border-radius: 8px; /* Colors */ --hvac-theme-primary: #0073aa; --hvac-theme-primary-dark: #005a87; --hvac-theme-text: #333333; --hvac-primary: #0073aa; --hvac-secondary: #666666; --hvac-text: #333333; --hvac-border: #dddddd; --hvac-border-light: #eeeeee; /* Shadows */ --hvac-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); --hvac-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1); } /* Dashboard Container */ .hvac-dashboard { padding: 1.5rem; /* IE fallback */ padding: var(--hvac-spacing-lg); background-color: #f9f9f9; -webkit-border-radius: 4px; border-radius: 4px; border-radius: 4px; /* IE fallback */ -webkit-border-radius: var(--hvac-border-radius); } /* Dashboard Mobile Padding Fixes */ @media screen and (max-width: 768px) { .hvac-dashboard { padding: 20px !important; /* Generous mobile padding */ margin: 0 !important; border-radius: 0 !important; /* Remove border radius on mobile for full-width look */ background-color: #f9f9f9; } /* Ensure dashboard content has proper spacing */ .hvac-dashboard-content, .hvac-dashboard-stats, .hvac-dashboard-events { padding: 0 !important; /* Remove extra padding since container already has it */ margin-bottom: 20px !important; } } @media screen and (max-width: 480px) { .hvac-dashboard { padding: 15px !important; /* Slightly less but still comfortable */ } } @media screen and (max-width: 375px) { .hvac-dashboard { padding: 12px !important; /* Minimum comfortable padding */ } } /* Header */ .hvac-dashboard-header { margin-bottom: 2em; padding-bottom: 1em; border-bottom: 1px solid #e0e0e0; /* IE fallback */ border-bottom: 1px solid var(--hvac-border); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .hvac-dashboard-header h1 { margin: 0 0 0.5rem 0; /* IE fallback */ margin: 0 0 var(--hvac-spacing-sm) 0; color: #333333; /* IE fallback */ color: var(--hvac-text); font-size: 1.8rem; font-weight: 600; } .hvac-dashboard-nav { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0.5rem; /* IE fallback */ gap: var(--hvac-spacing-sm); -ms-flex-wrap: wrap; flex-wrap: wrap; } .hvac-dashboard-nav a { margin: 0; min-width: 120px; text-align: center; } /* Stats Section */ .hvac-dashboard-stats { margin-bottom: 2rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-xl); } .hvac-dashboard-stats h2 { margin-top: 0; margin-bottom: 1rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-md); font-size: 1.4rem; color: #333333; /* IE fallback */ color: var(--hvac-text); padding-bottom: 0.5rem; /* IE fallback */ padding-bottom: var(--hvac-spacing-sm); border-bottom: 1px solid #f0f0f0; /* IE fallback */ border-bottom: 1px solid var(--hvac-border-light); } /* Row layout for stats */ .hvac-stats-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: -10px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .hvac-stat-col { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 160px; padding: 10px; margin-bottom: 0.5rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-sm); } .hvac-stat-card { border: 1px solid #e0e0e0; /* IE fallback */ border: 1px solid var(--hvac-border); border-radius: 4px; /* IE fallback */ border-radius: var(--hvac-border-radius); padding: 1.5rem; /* IE fallback */ padding: var(--hvac-spacing-lg); background: white; text-align: center; width: 100%; flex-grow: 1; height: 100%; -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* IE fallback */ -webkit-box-shadow: var(--hvac-shadow); box-shadow: var(--hvac-shadow); -webkit-transition: transform 0.2s, box-shadow 0.2s; transition: transform 0.2s, box-shadow 0.2s; } .hvac-stat-card:hover { -webkit-transform: translateY(-2px); -ms-transform: translateY(-2px); transform: translateY(-2px); -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* IE fallback */ -webkit-box-shadow: var(--hvac-shadow-lg); box-shadow: var(--hvac-shadow-lg); } .hvac-stat-card h3 { margin-top: 0; margin-bottom: 0.5rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-sm); font-size: 1.1em; color: #54595f; /* IE fallback */ color: var(--hvac-secondary); font-weight: 600; } .hvac-stat-card p { font-size: 2.2em; margin: 0.2em 0; font-weight: 700; line-height: 1.2; color: #0274be; /* IE fallback */ color: var(--hvac-primary); } .hvac-stat-card small { display: block; margin-top: 0.5rem; /* IE fallback */ margin-top: var(--hvac-spacing-sm); font-size: 0.85em; color: #757575; /* IE fallback */ color: var(--hvac-text-light); } /* Events Section */ .hvac-dashboard-events { background: white; border-radius: 4px; /* IE fallback */ border-radius: var(--hvac-border-radius); padding: 1.5rem; /* IE fallback */ padding: var(--hvac-spacing-lg); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* IE fallback */ box-shadow: var(--hvac-shadow); margin-bottom: 2rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-xl); } .hvac-dashboard-events h2 { margin-top: 0; margin-bottom: 1rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-md); font-size: 1.4rem; color: #333333; /* IE fallback */ color: var(--hvac-text); padding-bottom: 0.5rem; /* IE fallback */ padding-bottom: var(--hvac-spacing-sm); border-bottom: 1px solid #f0f0f0; /* IE fallback */ border-bottom: 1px solid var(--hvac-border-light); } /* Event Filters */ .hvac-event-filters { margin-bottom: 1.5rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-lg); padding: 1rem; /* IE fallback */ padding: var(--hvac-spacing-md); background-color: #f0f0f1; /* IE fallback */ background-color: var(--hvac-secondary-light); border-radius: 4px; /* IE fallback */ border-radius: var(--hvac-border-radius); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 0.5rem; /* IE fallback */ gap: var(--hvac-spacing-sm); } .hvac-event-filters span { margin-right: 1rem; /* IE fallback */ margin-right: var(--hvac-spacing-md); font-weight: 600; color: #3a3f44; /* IE fallback */ color: var(--hvac-secondary-dark); } .hvac-filter { padding: 0.5rem 1rem !important; margin: 0 !important; } .hvac-filter-active { background-color: #0274be; /* IE fallback */ background-color: var(--hvac-primary) !important; color: white !important; } /* Events Table */ .hvac-events-table-wrapper { overflow-x: auto; position: relative; min-height: 100px; border: 1px solid #e0e0e0; /* IE fallback */ border: 1px solid var(--hvac-border); border-radius: 4px; /* IE fallback */ border-radius: var(--hvac-border-radius); } .events-table { width: 100%; border-collapse: collapse; } .events-table th { background-color: #f8f9fa; color: #3a3f44; /* IE fallback */ color: var(--hvac-secondary-dark); padding: 1rem; /* IE fallback */ padding: var(--hvac-spacing-md); font-weight: 600; text-align: left; border-bottom: 2px solid #e0e0e0; /* IE fallback */ border-bottom: 2px solid var(--hvac-border); } .events-table td { padding: 1rem; /* IE fallback */ padding: var(--hvac-spacing-md); border-bottom: 1px solid #f0f0f0; /* IE fallback */ border-bottom: 1px solid var(--hvac-border-light); vertical-align: middle; } .events-table tbody tr:hover { background-color: #e6f3fb; /* IE fallback */ background-color: var(--hvac-primary-light); } .events-table .column-actions { white-space: nowrap; } .events-table .column-actions a { margin-right: 0.5rem; /* IE fallback */ margin-right: var(--hvac-spacing-sm); color: #0274be; /* IE fallback */ color: var(--hvac-primary); text-decoration: none; font-weight: 500; } .events-table .column-actions a:hover { text-decoration: underline; } /* Status indicators */ .status-indicator { display: inline-block; padding: 0.25rem 0.5rem; -webkit-border-radius: 12px; border-radius: 12px; font-size: 0.85em; font-weight: 500; text-align: center; } .status-published { background-color: #e8f5e9; color: #2e7d32; } .status-draft { background-color: #eceff1; color: #546e7a; } .status-pending { background-color: #fff3e0; color: #ef6c00; } /* Loading indicator */ .hvac-loading { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.8); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: bold; padding: 20px; z-index: 10; -webkit-animation: fadeIn 0.3s ease-in-out; animation: fadeIn 0.3s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Error message */ .hvac-error { color: #d63638; /* IE fallback */ color: var(--hvac-error); padding: 1rem; /* IE fallback */ padding: var(--hvac-spacing-md); border: 1px solid #ffb8bb; background-color: #ffebe9; /* IE fallback */ background-color: var(--hvac-error-light); margin: 1rem; /* IE fallback */ margin: var(--hvac-spacing-md) 0; border-radius: 4px; /* IE fallback */ border-radius: var(--hvac-border-radius); } /* Responsive adjustments */ /* Reduced Motion Support Added - WCAG 2.1 Accessibility */ /* Respects user preference for reduced motion to prevent vestibular disorders */ @media (prefers-reduced-motion: reduce) { /* Disable all animations and transitions globally */ *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } /* Remove specific transform animations */ .hvac-animate-fade-in, .hvac-animate-scale-up, .hvac-animate-pulse, .hvac-animate-slide-in-right, .hvac-animate-slide-in-left, .hvac-animate-slide-in-bottom { animation: none !important; opacity: 1 !important; transform: none !important; } /* Disable hover transformations */ .hvac-card:hover, .hvac-stat-card:hover, .hvac-event-stat-card:hover, .hvac-button:hover, .hvac-email-submit:hover { transform: none !important; animation: none !important; } /* Keep essential visual feedback but remove motion */ .hvac-card:hover, .hvac-stat-card:hover, .hvac-event-stat-card:hover { border-color: var(--hvac-primary, #0274be) !important; box-shadow: 0 0 0 2px rgba(2, 116, 190, 0.2) !important; } /* Disable loading spinner animation but keep visibility */ .hvac-loading::after { animation: none !important; border-radius: 50% !important; border: 2px solid rgba(0, 0, 0, 0.2) !important; border-top-color: #333 !important; } /* Disable focus pulse animation */ .hvac-button:focus, .hvac-email-submit:focus, .hvac-content button[type="submit"]:focus { animation: none !important; } /* Ensure smooth scrolling is disabled */ html { scroll-behavior: auto !important; } /* Disable CSS Grid/Flexbox animations if any */ .hvac-dashboard-stats .hvac-stat-card:nth-child(n), .hvac-event-summary-stats .hvac-event-stat-card:nth-child(n) { animation: none !important; opacity: 1 !important; } } /* Provide alternative visual feedback for reduced motion users */ @media (prefers-reduced-motion: reduce) { /* Enhanced border feedback instead of transform */ .hvac-content button:hover, .hvac-content input[type="submit"]:hover, .hvac-content a:hover { outline: 2px solid var(--hvac-primary, #0274be) !important; outline-offset: 2px !important; } /* Enhanced color changes for interactive elements */ .hvac-attendee-item:hover { background-color: var(--hvac-primary-light, #e6f3fb) !important; border-left: 4px solid var(--hvac-primary, #0274be) !important; } /* Static loading indicator */ .hvac-loading { opacity: 0.7 !important; } .hvac-loading::after { content: "Loading..." !important; display: inline-block !important; font-size: 12px !important; color: #666 !important; border: none !important; background: none !important; border-radius: 0 !important; width: auto !important; height: auto !important; position: static !important; margin-left: 8px !important; } } @media (max-width: 768px) { .hvac-dashboard-header { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .hvac-dashboard-nav { margin-top: 1rem; /* IE fallback */ margin-top: var(--hvac-spacing-md); width: 100%; } .hvac-dashboard-nav a { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: unset; } .hvac-stat-col { min-width: 140px; flex-basis: calc(50% - 20px); } .hvac-event-filters { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .hvac-event-filters span { margin-bottom: 0.5rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-sm); } .hvac-filter { width: 100%; text-align: center; } } @media (max-width: 480px) { .hvac-stat-col { flex-basis: 100%; } } /* =================================== Master Dashboard Specific Styles =================================== */ /* Dashboard Sections */ .dashboard-section { background: #fff; border-radius: 8px; /* IE fallback */ -webkit-border-radius: var(--hvac-radius-md); border-radius: var(--hvac-radius-md); padding: 2rem; /* IE fallback */ padding: var(--hvac-spacing-6); margin-bottom: 2rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-6); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .section-title { font-size: 1.5rem; font-weight: 600; color: #333333; /* IE fallback */ color: var(--hvac-theme-text); margin-bottom: 1rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-4); padding-bottom: 0.75rem; /* IE fallback */ padding-bottom: var(--hvac-spacing-3); border-bottom: 2px solid #e5e7eb; } /* Events Filters */ .events-filters { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 0.75rem; /* IE fallback */ gap: var(--hvac-spacing-3); -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; margin-bottom: 1rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-4); padding: 1rem; /* IE fallback */ padding: var(--hvac-spacing-4); background: #f9fafb; border-radius: 8px; /* IE fallback */ border-radius: var(--hvac-radius-md); } .filter-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.25rem; /* IE fallback */ gap: var(--hvac-spacing-1); } .filter-group label { font-size: 0.875rem; font-weight: 500; color: #333333; /* IE fallback */ color: var(--hvac-theme-text); } .filter-group input, .filter-group select { padding: 0.5rem; /* IE fallback */ padding: var(--hvac-spacing-2) var(--hvac-spacing-3); border: 1px solid #d1d5db; border-radius: 4px; /* IE fallback */ -webkit-border-radius: var(--hvac-radius-sm); border-radius: var(--hvac-radius-sm); font-size: 0.875rem; min-width: 150px; } .filter-group input:focus, .filter-group select:focus { outline: none; border-color: #0073aa; /* IE fallback */ border-color: var(--hvac-theme-primary); -webkit-box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1); box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1); } /* Trainers Table */ .trainers-table-container { overflow-x: auto; margin-top: 1rem; /* IE fallback */ margin-top: var(--hvac-spacing-4); } .trainers-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; } .trainers-table thead { background: #f9fafb; } .trainers-table th { padding: 0.75rem; /* IE fallback */ padding: var(--hvac-spacing-3) var(--hvac-spacing-4); text-align: left; font-weight: 600; color: #333333; /* IE fallback */ color: var(--hvac-theme-text); border-bottom: 2px solid #e5e7eb; white-space: nowrap; } .trainers-table td { padding: 0.75rem; /* IE fallback */ padding: var(--hvac-spacing-3) var(--hvac-spacing-4); border-bottom: 1px solid #f3f4f6; } .trainers-table tbody tr:hover { background: #f9fafb; } .trainers-table .trainer-name { font-weight: 500; } .trainers-table .number { text-align: center; } .trainers-table .revenue { text-align: right; font-weight: 500; color: #059669; } /* Events Table Container */ .events-table-container { margin-top: 1rem; /* IE fallback */ margin-top: var(--hvac-spacing-4); } /* Status Badge */ .status-badge { display: inline-block; padding: 0.25rem; /* IE fallback */ padding: var(--hvac-spacing-1) var(--hvac-spacing-2); -webkit-border-radius: var(--hvac-radius-full); border-radius: var(--hvac-radius-full); font-size: 0.75rem; font-weight: 500; text-transform: uppercase; } .status-badge.status-publish { background: #dcfce7; color: #166534; } .status-badge.status-future { background: #dbeafe; color: #1e40af; } .status-badge.status-draft { background: #f3f4f6; color: #6b7280; } .status-badge.status-pending { background: #fef3c7; color: #92400e; } .status-badge.status-private { background: #fce7f3; color: #9f1239; } /* Pagination */ .pagination-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 2rem; /* IE fallback */ margin-top: var(--hvac-spacing-6); padding-top: 1rem; /* IE fallback */ padding-top: var(--hvac-spacing-4); border-top: 1px solid #e5e7eb; } .pagination-info { color: #333333; /* IE fallback */ color: var(--hvac-theme-text); font-size: 0.875rem; } .pagination-controls { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0.5rem; /* IE fallback */ gap: var(--hvac-spacing-2); } .pagination-btn { padding: 0.5rem; /* IE fallback */ padding: var(--hvac-spacing-2) var(--hvac-spacing-3); border: 1px solid #d1d5db; background: #fff; color: #333333; /* IE fallback */ color: var(--hvac-theme-text); border-radius: 4px; /* IE fallback */ border-radius: var(--hvac-radius-sm); font-size: 0.875rem; cursor: pointer; -webkit-transition: all 0.2s; transition: all 0.2s; } .pagination-btn:hover { background: #f9fafb; border-color: #0073aa; /* IE fallback */ border-color: var(--hvac-theme-primary); } .pagination-btn.active { background: #0073aa; /* IE fallback */ background: var(--hvac-theme-primary); color: #fff; border-color: #0073aa; /* IE fallback */ border-color: var(--hvac-theme-primary); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Loading States */ .loading-placeholder { text-align: center; padding: 3rem; /* IE fallback */ padding: var(--hvac-spacing-8); color: #6b7280; font-size: 1rem; } .loading-placeholder::before { content: ''; display: inline-block; width: 20px; height: 20px; margin-right: 0.5rem; /* IE fallback */ margin-right: var(--hvac-spacing-2); border: 2px solid #e5e7eb; border-top-color: #0073aa; /* IE fallback */ border-top-color: var(--hvac-theme-primary); -webkit-border-radius: 50%; border-radius: 50%; -webkit-animation: hvac-spin 1s linear infinite; animation: hvac-spin 1s linear infinite; } /* Button Styles */ .btn { display: inline-block; padding: 0.5rem; /* IE fallback */ padding: var(--hvac-spacing-2) var(--hvac-spacing-4); border-radius: 4px; /* IE fallback */ border-radius: var(--hvac-radius-sm); font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: all 0.2s; cursor: pointer; border: none; } .btn-primary { background: #0073aa; /* IE fallback */ background: var(--hvac-theme-primary); color: #fff; } .btn-primary:hover { background: #005a87; /* IE fallback */ background: var(--hvac-theme-primary-dark); } .btn-secondary { background: #6b7280; color: #fff; } .btn-secondary:hover { background: #4b5563; } .btn-small { padding: 0.25rem; /* IE fallback */ padding: var(--hvac-spacing-1) var(--hvac-spacing-2); font-size: 0.75rem; } /* No Data Message */ .no-data-message { text-align: center; padding: 3rem; /* IE fallback */ padding: var(--hvac-spacing-8); color: #6b7280; } .no-data-message p { margin: 0; font-size: 1rem; } /* Error Message */ .error-message { background: #fee; border: 1px solid #fcc; color: #c33; padding: 1rem; /* IE fallback */ padding: var(--hvac-spacing-4); border-radius: 4px; /* IE fallback */ border-radius: var(--hvac-radius-sm); text-align: center; } /* Responsive Design for Master Dashboard */ @media (max-width: 768px) { .events-filters { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .filter-group { width: 100%; } .filter-group input, .filter-group select { width: 100%; } .pagination-container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.75rem; /* IE fallback */ gap: var(--hvac-spacing-3); text-align: center; } .trainers-table { font-size: 0.875rem; } .trainers-table th, .trainers-table td { padding: 0.5rem; /* IE fallback */ padding: var(--hvac-spacing-2); } } /* Focus Management Styles - WCAG 2.1 Compliance */ /* Added for keyboard accessibility and screen reader support */ /* Button Focus Styles */ .hvac-button:focus, .hvac-content .button:focus, .hvac-content button:focus, .hvac-content input[type="submit"]:focus, .hvac-email-submit:focus, .hvac-filter-submit:focus, .hvac-certificate-actions button:focus, .hvac-certificate-actions a:focus { outline: 2px solid #005fcc; outline-offset: 2px; -webkit-box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2); box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2); border-radius: 4px; } /* Input Focus Styles */ .hvac-form-input:focus, .hvac-content input[type="text"]:focus, .hvac-content input[type="email"]:focus, .hvac-content input[type="password"]:focus, .hvac-content input[type="url"]:focus, .hvac-content textarea:focus, .hvac-content select:focus, .hvac-email-form-row input:focus, .hvac-email-form-row textarea:focus, .hvac-filter-group input:focus, .hvac-filter-group select:focus { outline: 2px solid #005fcc; outline-offset: 2px; border-color: #005fcc; box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2); } /* Link Focus Styles */ .hvac-content a:focus, .hvac-event-link:focus, .hvac-certificate-link:focus, .hvac-attendee-profile-icon:focus, .hvac-dashboard-nav a:focus, .hvac-email-navigation a:focus { outline: 2px solid #005fcc; outline-offset: 2px; text-decoration: underline; background-color: rgba(0, 95, 204, 0.1); -webkit-border-radius: 2px; border-radius: 2px; } /* Interactive Element Focus Styles */ .hvac-attendee-checkbox:focus, .hvac-select-all-container input[type="checkbox"]:focus, .hvac-modal-close:focus, .hvac-certificate-table tr:focus { outline: 2px solid #005fcc; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2); } /* High Contrast Mode Support */ @media (prefers-contrast: high) { .hvac-content *:focus { outline: 3px solid #000000; outline-offset: 2px; background-color: #ffff00; color: #000000; } } /* Focus-visible polyfill support */ /* Reset focus for mouse users while preserving keyboard accessibility */ .js-focus-visible:focus:not(.focus-visible) { outline: none; -webkit-box-shadow: none; box-shadow: none; } /* Ensure focus is visible for keyboard users */ .js-focus-visible .focus-visible { outline: 2px solid #005fcc; outline-offset: 2px; } /* Feature Detection Support */ @supports not (display: flex) { .hvac-content [class*="flex"] { display: table-cell; vertical-align: middle; } } @supports not (display: grid) { .hvac-content [class*="grid"] { display: block; overflow: hidden; } .hvac-content [class*="grid"] > * { float: left; width: 50%; } } /* ========================================================================== Event Edit Form Fixes ========================================================================== */ /* Ensure event form fields have proper styling */ .tribe-community-events-form .hvac-fixed-field { border: 2px solid #4CAF50 !important; box-shadow: 0 0 5px rgba(76, 175, 80, 0.3) !important; } .tribe-community-events-form .hvac-fixed-field:focus { border-color: #45a049 !important; box-shadow: 0 0 8px rgba(76, 175, 80, 0.5) !important; } /* Fix notification styling */ .hvac-fix-notification { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; display: flex; align-items: center; gap: 8px; } .hvac-fix-notification .hvac-fix-icon { font-weight: bold; font-size: 16px; } /* Improve event form layout */ .hvac-event-manage-wrapper .tribe-community-events-form { background: #ffffff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin: 20px 0; } .hvac-event-manage-wrapper .tribe-community-events-form .tribe-community-events-form-title input, .hvac-event-manage-wrapper .tribe-community-events-form input[name="post_title"] { font-size: 18px; font-weight: 600; padding: 12px; border: 2px solid #e1e5e9; border-radius: 4px; width: 100%; transition: border-color 0.2s ease; } .hvac-event-manage-wrapper .tribe-community-events-form .tribe-community-events-form-title input:focus, .hvac-event-manage-wrapper .tribe-community-events-form input[name="post_title"]:focus { border-color: #0073aa; outline: none; box-shadow: 0 0 0 1px #0073aa; } /* Style the description field */ .hvac-event-manage-wrapper .tribe-community-events-form .tribe-community-events-form-content textarea, .hvac-event-manage-wrapper .tribe-community-events-form textarea[name="post_content"], .hvac-event-manage-wrapper .tribe-community-events-form .wp-editor-area { border: 2px solid #e1e5e9; border-radius: 4px; padding: 12px; transition: border-color 0.2s ease; } .hvac-event-manage-wrapper .tribe-community-events-form .tribe-community-events-form-content textarea:focus, .hvac-event-manage-wrapper .tribe-community-events-form textarea[name="post_content"]:focus, .hvac-event-manage-wrapper .tribe-community-events-form .wp-editor-area:focus { border-color: #0073aa; outline: none; box-shadow: 0 0 0 1px #0073aa; } /* === hvac-dashboard-enhanced.css === */ /** * HVAC Dashboard Enhanced Styles * * Styles for the enhanced dashboard with filters, search, and pagination */ /* Table Controls Container */ .hvac-table-controls { margin-bottom: 1.5rem; background: #f8f9fa; padding: 1rem; border-radius: 8px; border: 1px solid #e5e7eb; } /* Search Controls */ .hvac-search-controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .hvac-search-group { flex: 1; min-width: 200px; } .hvac-search-group label { display: block; margin-bottom: 0.25rem; font-weight: 600; color: #333; font-size: 0.875rem; } .hvac-search-group input[type="text"], .hvac-search-group input[type="date"], .hvac-search-group select { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 4px; font-size: 0.875rem; background: white; transition: border-color 0.2s; } .hvac-search-group input[type="text"]:focus, .hvac-search-group input[type="date"]:focus, .hvac-search-group select:focus { outline: none; border-color: #0073aa; box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1); } /* Search Buttons */ .hvac-search-buttons { display: flex; gap: 0.5rem; align-items: flex-end; } .hvac-btn-search, .hvac-btn-reset { padding: 0.5rem 1rem; border: none; border-radius: 4px; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .hvac-btn-search { background: #0073aa; color: white; } .hvac-btn-search:hover { background: #005a87; } .hvac-btn-reset { background: #6b7280; color: white; } .hvac-btn-reset:hover { background: #4b5563; } /* Enhanced Table Styles */ .hvac-enhanced-table { width: 100%; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .hvac-enhanced-table thead { background: #f9fafb; } .hvac-enhanced-table th { padding: 0.75rem 1rem; text-align: left; font-weight: 600; color: #374151; border-bottom: 1px solid #e5e7eb; font-size: 0.875rem; } .hvac-enhanced-table th.sortable { cursor: pointer; user-select: none; position: relative; padding-right: 2rem; } .hvac-enhanced-table th.sortable:hover { background: #f3f4f6; } .hvac-enhanced-table th.sortable::after { content: "↕"; position: absolute; right: 0.75rem; opacity: 0.3; } .hvac-enhanced-table th.sort-asc::after { content: "↑"; opacity: 1; } .hvac-enhanced-table th.sort-desc::after { content: "↓"; opacity: 1; } .hvac-enhanced-table td { padding: 0.75rem 1rem; border-bottom: 1px solid #f3f4f6; } .hvac-enhanced-table tbody tr:hover { background: #f9fafb; } .hvac-enhanced-table tbody tr:last-child td { border-bottom: none; } /* Event Status Badges */ .hvac-event-status { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; } .hvac-event-status.status-upcoming { background: #dbeafe; color: #1e40af; } .hvac-event-status.status-active { background: #dcfce7; color: #166534; } .hvac-event-status.status-completed { background: #f3f4f6; color: #6b7280; } .hvac-event-status.status-cancelled { background: #fee2e2; color: #991b1b; } /* Action Buttons */ .hvac-table-actions { display: flex; gap: 0.5rem; } .hvac-btn-action { padding: 0.25rem 0.75rem; border: 1px solid #d1d5db; background: white; border-radius: 4px; font-size: 0.75rem; font-weight: 500; color: #374151; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .hvac-btn-action:hover { background: #f9fafb; border-color: #0073aa; color: #0073aa; } .hvac-btn-action.primary { background: #0073aa; color: white; border-color: #0073aa; } .hvac-btn-action.primary:hover { background: #005a87; border-color: #005a87; } /* Pagination Enhanced */ .hvac-pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; } .hvac-pagination-info { color: #6b7280; font-size: 0.875rem; } .hvac-pagination-info strong { color: #374151; } .hvac-pagination-controls { display: flex; gap: 0.25rem; } .hvac-page-btn { padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; background: white; border-radius: 4px; font-size: 0.875rem; color: #374151; cursor: pointer; transition: all 0.2s; min-width: 2.5rem; text-align: center; } .hvac-page-btn:hover:not(:disabled) { background: #f9fafb; border-color: #0073aa; color: #0073aa; } .hvac-page-btn.active { background: #0073aa; color: white; border-color: #0073aa; } .hvac-page-btn:disabled { opacity: 0.5; cursor: not-allowed; } .hvac-page-ellipsis { padding: 0.5rem 0.25rem; color: #6b7280; } /* Loading State */ .hvac-table-loading { position: relative; min-height: 200px; } .hvac-table-loading::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center; z-index: 10; } .hvac-loading-spinner { width: 40px; height: 40px; border: 3px solid #e5e7eb; border-top-color: #0073aa; border-radius: 50%; animation: hvac-spin 1s linear infinite; } @keyframes hvac-spin { to { transform: rotate(360deg); } } /* Empty State */ .hvac-empty-state { text-align: center; padding: 3rem; color: #6b7280; } .hvac-empty-state-icon { font-size: 3rem; opacity: 0.3; margin-bottom: 1rem; } .hvac-empty-state-title { font-size: 1.125rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem; } .hvac-empty-state-description { font-size: 0.875rem; } /* Mobile Responsive */ @media (max-width: 768px) { .hvac-search-controls { flex-direction: column; } .hvac-search-group { width: 100%; } .hvac-search-buttons { width: 100%; justify-content: stretch; } .hvac-btn-search, .hvac-btn-reset { flex: 1; } .hvac-enhanced-table { font-size: 0.875rem; } .hvac-enhanced-table th, .hvac-enhanced-table td { padding: 0.5rem; } .hvac-table-actions { flex-direction: column; } .hvac-pagination { flex-direction: column; gap: 1rem; text-align: center; } .hvac-enhanced-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Print Styles */ @media print { .hvac-table-controls, .hvac-pagination, .hvac-table-actions { display: none; } .hvac-enhanced-table { box-shadow: none; border: 1px solid #000; } .hvac-enhanced-table th, .hvac-enhanced-table td { border: 1px solid #000; } } /* === hvac-event-manage.css === */ /** * HVAC Event Management Styles * Styles for The Events Calendar Community event creation/editing form */ /* Main page wrapper - removed duplicate, using .hvac-event-manage-wrapper instead */ .hvac-event-manage-wrapper { max-width: 1200px; margin: 0 auto; padding: 20px; width: 100%; box-sizing: border-box; } /* Navigation header from HVAC plugin */ .hvac-event-manage-wrapper .hvac-dashboard-header { background: #ffffff; padding: 1.5rem; margin-bottom: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; width: 100%; box-sizing: border-box; } .hvac-event-manage-wrapper .hvac-dashboard-header h1.entry-title { margin: 0; font-size: 2rem; color: #333333; font-weight: 600; line-height: 1.2; } /* Main content container from The Events Calendar */ .hvac-event-manage-wrapper .tribe-community-events-content, .hvac-event-manage-wrapper #tribe-community-events { background: #ffffff; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); width: 100%; box-sizing: border-box; } /* Remove default tribe styles that conflict */ .hvac-event-manage-wrapper .tribe-community-events { padding: 0; margin: 0; background: transparent; max-width: none; width: 100%; } /* Form sections */ .hvac-event-manage-wrapper .tribe-section { margin-bottom: 1.5rem; padding: 1.5rem; background: #f9f9f9; border-radius: 4px; border: 1px solid #e5e7eb; } /* Form labels */ .hvac-event-manage-wrapper .tribe-events-community-details label, .hvac-event-manage-wrapper .tribe-section label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: #333333; font-size: 0.875rem; } /* Input fields */ .hvac-event-manage-wrapper .tribe-events-community-details input[type="text"], .hvac-event-manage-wrapper .tribe-events-community-details input[type="email"], .hvac-event-manage-wrapper .tribe-events-community-details input[type="url"], .hvac-event-manage-wrapper .tribe-events-community-details input[type="number"], .hvac-event-manage-wrapper .tribe-events-community-details input[type="date"], .hvac-event-manage-wrapper .tribe-events-community-details input[type="time"], .hvac-event-manage-wrapper .tribe-events-community-details select, .hvac-event-manage-wrapper .tribe-events-community-details textarea { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #dddddd; border-radius: 4px; font-size: 0.875rem; line-height: 1.5; transition: all 0.2s ease; background: #ffffff; box-sizing: border-box; } /* Focus states */ .tribe-events-community-details input:focus, .tribe-events-community-details select:focus, .tribe-events-community-details textarea:focus { outline: none; border-color: var(--hvac-primary, #0073aa); box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1); } /* Event title field - make it stand out */ #EventTitle, input[name="post_title"] { font-size: 1.125rem !important; font-weight: 500; padding: var(--hvac-spacing-3, 0.75rem) !important; } /* Form sections headings */ .tribe-section h3, .tribe-events-community-section-title { margin: 0 0 var(--hvac-spacing-md, 1rem); font-size: 1.25rem; color: var(--hvac-text, #333333); } /* Submit button */ .tribe-events-community-footer { margin-top: var(--hvac-spacing-xl, 2rem); padding-top: var(--hvac-spacing-lg, 1.5rem); border-top: 1px solid var(--hvac-border, #e5e7eb); } .tribe-events-community-footer input[type="submit"], .tribe-button.tribe-button-primary { background: var(--hvac-primary, #0073aa); color: #ffffff; padding: var(--hvac-spacing-3, 0.75rem) var(--hvac-spacing-5, 1.5rem); border: none; border-radius: var(--hvac-radius-sm, 4px); font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; display: inline-block; text-decoration: none; } .tribe-events-community-footer input[type="submit"]:hover, .tribe-button.tribe-button-primary:hover { background: var(--hvac-primary-dark, #005a87); transform: translateY(-1px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } /* Secondary buttons */ .tribe-button-secondary { background: #f3f4f6; color: var(--hvac-text, #333333); padding: var(--hvac-spacing-3, 0.75rem) var(--hvac-spacing-5, 1.5rem); border: 1px solid var(--hvac-border, #e5e7eb); border-radius: var(--hvac-radius-sm, 4px); font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: inline-block; text-decoration: none; margin-left: var(--hvac-spacing-sm, 0.75rem); } .tribe-button-secondary:hover { background: #e5e7eb; border-color: #d1d5db; } /* Error and success messages */ .tribe-events-community-notice, .tribe-events-notices { padding: var(--hvac-spacing-md, 1rem); margin-bottom: var(--hvac-spacing-lg, 1.5rem); border-radius: var(--hvac-radius-sm, 6px); border-left: 4px solid; } .tribe-events-community-notice.tribe-events-community-error, .tribe-events-notices.tribe-events-notices-error { background: #fef2f2; border-color: #ef4444; color: #991b1b; } .tribe-events-community-notice.tribe-events-community-success, .tribe-events-notices.tribe-events-notices-success { background: #f0fdf4; border-color: #10b981; color: #166534; } /* Date picker adjustments */ .ui-datepicker { font-size: 0.875rem; } .ui-datepicker-trigger { margin-left: var(--hvac-spacing-xs, 0.5rem); cursor: pointer; } /* TinyMCE editor */ .wp-editor-wrap { border: 1px solid var(--hvac-border, #dddddd); border-radius: var(--hvac-radius-sm, 4px); overflow: hidden; } .wp-editor-area { width: 100% !important; min-height: 300px; font-family: inherit; } /* Required field indicators */ .required { color: #ef4444; font-weight: bold; } /* Override theme constraints to ensure proper layout */ .hvac-event-manage-wrapper { /* Force full width within container */ width: 100% !important; max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; padding: 20px !important; box-sizing: border-box !important; } /* Ensure the ast-container doesn't constrain our layout */ .ast-container .hvac-event-manage-wrapper { padding-left: 20px !important; padding-right: 20px !important; } /* Fix navigation buttons */ .hvac-event-manage-wrapper .hvac-dashboard-nav .ast-button { padding: 0.75rem 1.5rem; border-radius: 4px; font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: all 0.2s ease; display: inline-block; line-height: 1; border: 1px solid transparent; } .hvac-event-manage-wrapper .hvac-dashboard-nav .ast-button-secondary { background: #f3f4f6; color: #374151; border-color: #e5e7eb; } .hvac-event-manage-wrapper .hvac-dashboard-nav .ast-button-secondary:hover { background: #e5e7eb; color: #1f2937; border-color: #d1d5db; transform: translateY(-1px); } /* Hide any duplicate page titles from theme */ body.page-id-5344 .entry-header { display: none !important; } /* Ensure tribe forms don't have extra spacing */ .hvac-event-manage-wrapper form.tribe-events-community-form { margin: 0; padding: 0; } /* Fix any theme-added padding/margins */ body.page-id-5344 #primary { padding: 0; } body.page-id-5344 .site-content { padding-top: 2rem; padding-bottom: 2rem; } /* Responsive adjustments */ @media (max-width: 768px) { .hvac-event-manage-wrapper { padding: 1rem !important; } .hvac-event-manage-wrapper .hvac-dashboard-header { flex-direction: column; align-items: flex-start; } .hvac-event-manage-wrapper .hvac-dashboard-nav { width: 100%; margin-top: 1rem; } .hvac-event-manage-wrapper .hvac-dashboard-nav .ast-button { display: block; width: 100%; margin-bottom: 0.75rem; text-align: center; } .hvac-event-manage-wrapper .tribe-community-events-content, .hvac-event-manage-wrapper #tribe-community-events { padding: 1rem; } .hvac-event-manage-wrapper .tribe-events-community-footer { display: flex; flex-direction: column; gap: 0.75rem; } .hvac-event-manage-wrapper .tribe-button-secondary { margin-left: 0; width: 100%; text-align: center; } } /* === hvac-event-summary.css === */ /* Reduced Motion Support Added - 2025-07-23 */ /* Vendor Prefixes Added - 2025-07-23 */ /** * Enhanced Styles for the HVAC Community Events Single Event Summary Template * * @version 2.0.0 */ /* Main Container */ .hvac-event-summary-wrapper { max-width: 1200px; margin: 0 auto; padding: 2rem; /* IE fallback */ padding: var(--hvac-spacing-xl) var(--hvac-spacing-md); /* Page Header */ .hvac-event-summary-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 2rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-xl); -ms-flex-wrap: wrap; border-bottom: 1px solid #e0e0e0; /* IE fallback */ border-bottom: 1px solid var(--hvac-border); padding-bottom: 1rem; /* IE fallback */ padding-bottom: var(--hvac-spacing-md); .hvac-event-summary-title h1 { margin: 0 0 0.5rem 0; /* IE fallback */ margin: 0 0 var(--hvac-spacing-sm) 0; color: #333333; /* IE fallback */ color: var(--hvac-text); font-size: 1.8rem; font-weight: 600; .hvac-event-summary-title .event-date { color: #757575; /* IE fallback */ color: var(--hvac-text-light); font-size: 1.1rem; font-weight: 500; .hvac-event-summary-actions { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0.5rem; /* IE fallback */ gap: var(--hvac-spacing-sm); -ms-flex-wrap: wrap; .hvac-event-summary-actions a { min-width: 120px; text-align: center; /* Quick Stats Cards */ .hvac-event-summary-stats { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; gap: 1rem; /* IE fallback */ gap: var(--hvac-spacing-md); margin-bottom: 2rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-xl); .hvac-event-stat-card { -webkit-box-flex: 1; -ms-flex: 1; min-width: 180px; background-color: white; -webkit-border-radius: 4px; border-radius: 4px; border-radius: 4px; border-radius: 4px; /* IE fallback */ -webkit-border-radius: var(--hvac-border-radius); -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* IE fallback */ -webkit-box-shadow: var(--hvac-shadow); box-shadow: var(--hvac-shadow); padding: 1.5rem; /* IE fallback */ padding: var(--hvac-spacing-lg); text-align: center; border: 1px solid #f0f0f0; /* IE fallback */ border: 1px solid var(--hvac-border-light); -webkit-transition: transform 0.2s, box-shadow 0.2s; .hvac-event-stat-card:hover { -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* IE fallback */ -webkit-box-shadow: var(--hvac-shadow-lg); .hvac-event-stat-card h3 { margin: 0 0 0.5rem 0; /* IE fallback */ margin: 0 0 var(--hvac-spacing-sm) 0; font-size: 1rem; color: #757575; /* IE fallback */ color: var(--hvac-text-light); font-weight: 600; .hvac-event-stat-card .stat-value { font-size: 2.2rem; font-weight: 700; color: #0274be; /* IE fallback */ color: var(--hvac-primary); line-height: 1.2; margin-bottom: 0.5rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-sm); .hvac-event-stat-card .stat-subtext { font-size: 0.85rem; color: #757575; /* IE fallback */ color: var(--hvac-text-light); /* Event Details Section */ .hvac-event-summary-details { margin-bottom: 2rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-xl); padding: 2rem; /* IE fallback */ padding: var(--hvac-spacing-xl); border: 1px solid #e0e0e0; /* IE fallback */ border: 1px solid var(--hvac-border); border-radius: 4px; /* IE fallback */ border-radius: var(--hvac-border-radius); background-color: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* IE fallback */ box-shadow: var(--hvac-shadow); .hvac-event-summary-details h2 { margin-top: 0; margin-bottom: 1.5rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-lg); font-size: 1.4rem; color: #333333; /* IE fallback */ color: var(--hvac-text); padding-bottom: 0.5rem; /* IE fallback */ padding-bottom: var(--hvac-spacing-sm); border-bottom: 1px solid #f0f0f0; /* IE fallback */ border-bottom: 1px solid var(--hvac-border-light); .hvac-event-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; /* IE fallback */ gap: var(--hvac-spacing-lg); margin-bottom: 1.5rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-lg); .hvac-event-detail-item h3 { margin-top: 0; margin-bottom: 0.5rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-sm); font-size: 1.1rem; color: #54595f; /* IE fallback */ color: var(--hvac-secondary); font-weight: 600; .hvac-event-detail-item p { color: #333333; /* IE fallback */ color: var(--hvac-text); margin: 0; line-height: 1.5; .hvac-event-description { margin-top: 1.5rem; /* IE fallback */ margin-top: var(--hvac-spacing-lg); padding-top: 1.5rem; /* IE fallback */ padding-top: var(--hvac-spacing-lg); border-top: 1px dashed #e0e0e0; /* IE fallback */ border-top: 1px dashed var(--hvac-border); .hvac-event-description h3 { margin-top: 0; margin-bottom: 1rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-md); font-size: 1.2rem; color: #333333; /* IE fallback */ color: var(--hvac-text); /* Attendees Section */ .hvac-event-summary-attendees { margin-bottom: 2rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-xl); padding: 2rem; /* IE fallback */ padding: var(--hvac-spacing-xl); border: 1px solid #e0e0e0; /* IE fallback */ border: 1px solid var(--hvac-border); border-radius: 4px; /* IE fallback */ border-radius: var(--hvac-border-radius); background-color: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* IE fallback */ box-shadow: var(--hvac-shadow); .hvac-event-summary-attendees h2 { margin-top: 0; margin-bottom: 1.5rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-lg); font-size: 1.4rem; color: #333333; /* IE fallback */ color: var(--hvac-text); padding-bottom: 0.5rem; /* IE fallback */ padding-bottom: var(--hvac-spacing-sm); border-bottom: 1px solid #f0f0f0; /* IE fallback */ border-bottom: 1px solid var(--hvac-border-light); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; .hvac-attendee-count { display: inline-block; padding: 0.3rem 0.8rem; background-color: #e6f3fb; /* IE fallback */ background-color: var(--hvac-primary-light); color: #0274be; /* IE fallback */ color: var(--hvac-primary); border-radius: 4px; /* IE fallback */ border-radius: var(--hvac-border-radius); font-size: 0.9rem; font-weight: 600; /* Table Styling */ .hvac-transactions-table-wrapper { overflow-x: auto; border: 1px solid #e0e0e0; /* IE fallback */ border: 1px solid var(--hvac-border); border-radius: 4px; /* IE fallback */ border-radius: var(--hvac-border-radius); .hvac-transactions-table { width: 100%; border-collapse: collapse; .hvac-transactions-table th { background-color: #f8f9fa; color: #3a3f44; /* IE fallback */ color: var(--hvac-secondary-dark); padding: 1rem; /* IE fallback */ padding: var(--hvac-spacing-md); font-weight: 600; text-align: left; border-bottom: 2px solid #e0e0e0; /* IE fallback */ border-bottom: 2px solid var(--hvac-border); .hvac-transactions-table td { padding: 1rem; /* IE fallback */ padding: var(--hvac-spacing-md); border-bottom: 1px solid #f0f0f0; /* IE fallback */ border-bottom: 1px solid var(--hvac-border-light); vertical-align: middle; .hvac-transactions-table tbody tr:hover { background-color: #e6f3fb; /* IE fallback */ background-color: var(--hvac-primary-light); .hvac-transactions-table .attendee-name { font-weight: 600; color: #333333; /* IE fallback */ color: var(--hvac-text); .hvac-transactions-table .ticket-type { display: inline-block; padding: 0.25rem 0.5rem; background-color: #f0f0f1; /* IE fallback */ background-color: var(--hvac-secondary-light); color: #3a3f44; /* IE fallback */ color: var(--hvac-secondary-dark); -webkit-border-radius: 12px; font-size: 0.75rem; /* Revenue & Transactions Section */ .hvac-event-summary-transactions { margin-bottom: 2rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-xl); padding: 2rem; /* IE fallback */ padding: var(--hvac-spacing-xl); border: 1px solid #e0e0e0; /* IE fallback */ border: 1px solid var(--hvac-border); border-radius: 4px; /* IE fallback */ border-radius: var(--hvac-border-radius); background-color: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* IE fallback */ box-shadow: var(--hvac-shadow); .hvac-event-summary-transactions h2 { margin-top: 0; margin-bottom: 1.5rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-lg); font-size: 1.4rem; color: #333333; /* IE fallback */ color: var(--hvac-text); padding-bottom: 0.5rem; /* IE fallback */ padding-bottom: var(--hvac-spacing-sm); border-bottom: 1px solid #f0f0f0; /* IE fallback */ border-bottom: 1px solid var(--hvac-border-light); .hvac-revenue-summary { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; gap: 1rem; /* IE fallback */ gap: var(--hvac-spacing-md); margin-bottom: 1.5rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-lg); padding: 1rem; /* IE fallback */ padding: var(--hvac-spacing-md); background-color: #e6f3fb; /* IE fallback */ background-color: var(--hvac-primary-light); border-radius: 4px; /* IE fallback */ border-radius: var(--hvac-border-radius); .hvac-revenue-item { -webkit-box-flex: 1; -ms-flex: 1; min-width: 180px; text-align: center; .hvac-revenue-item h3 { margin: 0 0 0.25rem 0; /* IE fallback */ margin: 0 0 var(--hvac-spacing-xs) 0; font-size: 0.9rem; color: #757575; /* IE fallback */ color: var(--hvac-text-light); font-weight: 600; .hvac-revenue-item .revenue-value { font-size: 1.5rem; font-weight: 700; color: #0274be; /* IE fallback */ color: var(--hvac-primary); /* No Attendees Message */ .hvac-no-attendees { padding: 1.5rem; /* IE fallback */ padding: var(--hvac-spacing-lg); background-color: #f0f0f1; /* IE fallback */ background-color: var(--hvac-secondary-light); border-radius: 4px; /* IE fallback */ border-radius: var(--hvac-border-radius); text-align: center; color: #3a3f44; /* IE fallback */ color: var(--hvac-secondary-dark); font-weight: 500; /* Certificate Actions */ .hvac-cert-action { display: inline-block; margin-left: 5px; padding: 3px 8px; border-radius: 4px; font-size: 0.75rem; text-decoration: none; color: #ffffff; background-color: var(--hvac-primary, #0073aa); -webkit-transition: background-color 0.2s ease; .hvac-cert-action:hover { background-color: var(--hvac-primary-dark, #005a87); color: #ffffff; text-decoration: none; .hvac-view-certificate { background-color: var(--hvac-secondary, #6c757d); .hvac-view-certificate:hover { background-color: var(--hvac-secondary-dark, #495057); .hvac-email-certificate { background-color: var(--hvac-primary, #0073aa); .hvac-email-certificate:hover { background-color: var(--hvac-primary-dark, #005a87); .hvac-revoke-certificate { background-color: var(--hvac-danger, #dc3545); .hvac-revoke-certificate:hover { background-color: var(--hvac-danger-dark, #bd2130); /* Certificate Modal */ .hvac-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); .hvac-modal-content { background-color: #fefefe; margin: 5% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 900px; -webkit-border-radius: var(--hvac-border-radius, 4px); -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); position: relative; .hvac-modal-close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; position: absolute; top: 10px; right: 15px; .hvac-modal-close:hover, .hvac-modal-close:focus { color: #000; text-decoration: none; .hvac-modal-body { padding: 10px 0; min-height: 200px; .hvac-loading { text-align: center; padding: 20px; font-style: italic; color: #666; .hvac-error { color: #dc3545; padding: 10px; text-align: center; background-color: #f8d7da; border-radius: 4px; margin: 10px 0; /* Responsive Adjustments */ /* Reduced Motion Support Added - WCAG 2.1 Accessibility */ /* Respects user preference for reduced motion to prevent vestibular disorders */ @media (prefers-reduced-motion: reduce) { /* Disable all animations and transitions globally */ *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; /* Remove specific transform animations */ .hvac-animate-fade-in, .hvac-animate-scale-up, .hvac-animate-pulse, .hvac-animate-slide-in-right, .hvac-animate-slide-in-left, .hvac-animate-slide-in-bottom { animation: none !important; opacity: 1 !important; transform: none !important; /* Disable hover transformations */ .hvac-card:hover, .hvac-stat-card:hover, .hvac-event-stat-card:hover, .hvac-button:hover, .hvac-email-submit:hover { transform: none !important; animation: none !important; /* Keep essential visual feedback but remove motion */ .hvac-card:hover, .hvac-stat-card:hover, .hvac-event-stat-card:hover { border-color: var(--hvac-primary, #0274be) !important; box-shadow: 0 0 0 2px rgba(2, 116, 190, 0.2) !important; /* Disable loading spinner animation but keep visibility */ .hvac-loading::after { animation: none !important; border-radius: 50% !important; border: 2px solid rgba(0, 0, 0, 0.2) !important; border-top-color: #333 !important; /* Disable focus pulse animation */ .hvac-button:focus, .hvac-email-submit:focus, .hvac-content button[type="submit"]:focus { animation: none !important; /* Ensure smooth scrolling is disabled */ html { scroll-behavior: auto !important; /* Disable CSS Grid/Flexbox animations if any */ .hvac-dashboard-stats .hvac-stat-card:nth-child(n), .hvac-event-summary-stats .hvac-event-stat-card: nth-child(n) { animation: none !important; opacity: 1 !important; /* Provide alternative visual feedback for reduced motion users */ @media (prefers-reduced-motion: reduce) { /* Enhanced border feedback instead of transform */ .hvac-content button:hover, .hvac-content input[type="submit"]:hover, .hvac-content a:hover { outline: 2px solid var(--hvac-primary, #0274be) !important; outline-offset: 2px !important; /* Enhanced color changes for interactive elements */ .hvac-attendee-item:hover { background-color: var(--hvac-primary-light, #e6f3fb) !important; border-left: 4px solid var(--hvac-primary, #0274be) !important; /* Static loading indicator */ .hvac-loading { opacity: 0.7 !important; .hvac-loading::after { content: "Loading..." !important; display: inline-block !important; font-size: 12px !important; color: #666 !important; border: none !important; background: none !important; border-radius: 0 !important; width: auto !important; height: auto !important; position: static !important; margin-left: 8px !important; @media (max-width: 768px) { .hvac-event-summary-header { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; .hvac-event-summary-actions { margin-top: 1rem; /* IE fallback */ margin-top: var(--hvac-spacing-md); width: 100%; .hvac-event-summary-actions a { -webkit-box-flex: 1; -ms-flex: 1; min-width: unset; .hvac-event-summary-details, .hvac-event-summary-attendees, .hvac-event-summary-transactions { padding: 1rem; /* IE fallback */ padding: var(--hvac-spacing-md); .hvac-event-detail-grid { grid-template-columns: 1fr; gap: 1rem; /* IE fallback */ gap: var(--hvac-spacing-md); .hvac-revenue-item { flex-basis: calc(50% - 1rem); /* IE fallback */ flex-basis: calc(50% - var(--hvac-spacing-md)); @media (max-width: 480px) { .hvac-event-summary-title h1 { font-size: 1.5rem; .hvac-event-stat-card { flex-basis: 100%; .hvac-revenue-item { flex-basis: 100%; margin-bottom: 0.5rem; /* IE fallback */ margin-bottom: var(--hvac-spacing-sm); .hvac-event-summary-attendees h2 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; .hvac-attendee-count { margin-top: 0.25rem; /* IE fallback */ margin-top: var(--hvac-spacing-xs); /* Focus Management Styles - WCAG 2.1 Compliance */ /* Added for keyboard accessibility and screen reader support */ /* Button Focus Styles */ .hvac-button:focus, .hvac-content .button:focus, .hvac-content button:focus, .hvac-content input[type="submit"]:focus, .hvac-email-submit:focus, .hvac-filter-submit:focus, .hvac-certificate-actions button:focus, .hvac-certificate-actions a:focus { outline: 2px solid #005fcc; outline-offset: 2px; -webkit-box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2); box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2); border-radius: 4px; /* Input Focus Styles */ .hvac-form-input:focus, .hvac-content input[type="text"]:focus, .hvac-content input[type="email"]:focus, .hvac-content input[type="password"]:focus, .hvac-content input[type="url"]:focus, .hvac-content textarea:focus, .hvac-content select:focus, .hvac-email-form-row input:focus, .hvac-email-form-row textarea:focus, .hvac-filter-group input:focus, .hvac-filter-group select:focus { outline: 2px solid #005fcc; outline-offset: 2px; border-color: #005fcc; box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2); /* Link Focus Styles */ .hvac-content a:focus, .hvac-event-link:focus, .hvac-certificate-link:focus, .hvac-attendee-profile-icon:focus, .hvac-dashboard-nav a:focus, .hvac-email-navigation a:focus { outline: 2px solid #005fcc; outline-offset: 2px; text-decoration: underline; background-color: rgba(0, 95, 204, 0.1); -webkit-border-radius: 2px; /* Interactive Element Focus Styles */ .hvac-attendee-checkbox:focus, .hvac-select-all-container input[type="checkbox"]:focus, .hvac-modal-close:focus, .hvac-certificate-table tr:focus { outline: 2px solid #005fcc; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.2); /* High Contrast Mode Support */ @media (prefers-contrast: high) { .hvac-content *:focus { outline: 3px solid #000000; outline-offset: 2px; background-color: #ffff00; color: #000000; /* Focus-visible polyfill support */ /* Reset focus for mouse users while preserving keyboard accessibility */ .js-focus-visible:focus:not(.focus-visible) { outline: none; -webkit-box-shadow: none; /* Ensure focus is visible for keyboard users */ .js-focus-visible .focus-visible { outline: 2px solid #005fcc; outline-offset: 2px; /* CSS Grid Fallbacks for IE */ .hvac-stats-row, .hvac-dashboard-stats, .hvac-certificate-stats { display: -ms-grid; -ms-grid-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Progressive enhancement for modern browsers */ @supports (display: grid) { .hvac-stats-row, .hvac-dashboard-stats, .hvac-certificate-stats { display: grid; /* Feature Detection Support */ @supports not (display: flex) { .hvac-content [class*="flex"] { display: table-cell; vertical-align: middle; @supports not (display: grid) { .hvac-content [class*="grid"] { display: block; overflow: hidden; .hvac-content [class*="grid"] > * { float: left; width: 50%; } /* === hvac-trainer-navigation.css === */ /** * HVAC Trainer Navigation Styles * * @package HVAC_Community_Events * @version 2.0.0 */ /* Navigation Container */ .hvac-trainer-nav { background-color: #f8f9fa; border-bottom: 2px solid #e0e0e0; position: relative; z-index: 100; } /* Horizontal Navigation */ .hvac-trainer-nav-horizontal .hvac-nav-menu { display: flex; list-style: none; margin: 0; padding: 0; max-width: 1200px; margin: 0 auto; } .hvac-trainer-nav-horizontal .hvac-nav-item { position: relative; } .hvac-trainer-nav-horizontal .hvac-nav-link { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 1.25rem; color: #333; text-decoration: none; font-weight: 500; transition: all 0.3s ease; white-space: nowrap; } .hvac-trainer-nav-horizontal .hvac-nav-link:hover { background-color: #e9ecef; color: #0274be; } .hvac-trainer-nav-horizontal .hvac-nav-active > .hvac-nav-link { background-color: #0274be; color: white; } /* Vertical Navigation */ .hvac-trainer-nav-vertical { width: 260px; background-color: #fff; border-right: 1px solid #e0e0e0; min-height: 100vh; } .hvac-trainer-nav-vertical .hvac-nav-menu { list-style: none; margin: 0; padding: 0; } .hvac-trainer-nav-vertical .hvac-nav-item { border-bottom: 1px solid #f0f0f0; } .hvac-trainer-nav-vertical .hvac-nav-link { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.5rem; color: #333; text-decoration: none; font-weight: 500; transition: all 0.3s ease; } .hvac-trainer-nav-vertical .hvac-nav-link:hover { background-color: #f8f9fa; color: #0274be; padding-left: 2rem; } .hvac-trainer-nav-vertical .hvac-nav-active > .hvac-nav-link { background-color: #e3f2fd; color: #0274be; border-left: 4px solid #0274be; } /* Icons */ .hvac-nav-link .dashicons { font-size: 20px; width: 20px; height: 20px; } .hvac-nav-arrow { margin-left: auto; font-size: 14px !important; transition: transform 0.3s ease; } .hvac-nav-has-submenu:hover .hvac-nav-arrow, .hvac-nav-has-submenu.hvac-nav-open .hvac-nav-arrow { transform: rotate(180deg); } /* Submenu */ .hvac-nav-submenu { list-style: none; margin: 0; padding: 0; background-color: white; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); min-width: 200px; display: none; } /* Horizontal Submenu */ .hvac-trainer-nav-horizontal .hvac-nav-submenu { position: absolute; top: 100%; left: 0; border: 1px solid #e0e0e0; border-radius: 0 0 4px 4px; } .hvac-trainer-nav-horizontal .hvac-nav-has-submenu:hover .hvac-nav-submenu, .hvac-trainer-nav-horizontal[data-submenu="always"] .hvac-nav-submenu { display: block; } /* Vertical Submenu */ .hvac-trainer-nav-vertical .hvac-nav-submenu { position: static; box-shadow: none; background-color: #f8f9fa; } .hvac-trainer-nav-vertical .hvac-nav-has-submenu:hover .hvac-nav-submenu, .hvac-trainer-nav-vertical .hvac-nav-has-submenu.hvac-nav-open .hvac-nav-submenu, .hvac-trainer-nav-vertical[data-submenu="always"] .hvac-nav-submenu { display: block; } /* Submenu Items */ .hvac-nav-subitem { border-bottom: 1px solid #f0f0f0; } .hvac-nav-subitem:last-child { border-bottom: none; } .hvac-nav-sublink { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; color: #666; text-decoration: none; font-size: 0.9rem; transition: all 0.3s ease; } .hvac-trainer-nav-vertical .hvac-nav-sublink { padding-left: 3rem; } .hvac-nav-sublink:hover { background-color: #f8f9fa; color: #0274be; } .hvac-nav-subitem.hvac-nav-active .hvac-nav-sublink { color: #0274be; font-weight: 600; } /* Mobile Navigation */ .hvac-nav-mobile-toggle { display: none; background: none; border: none; padding: 0.5rem; cursor: pointer; } .hvac-nav-toggle-icon { display: block; width: 24px; height: 2px; background-color: #333; position: relative; transition: background-color 0.3s ease; } .hvac-nav-toggle-icon::before, .hvac-nav-toggle-icon::after { content: ''; display: block; width: 24px; height: 2px; background-color: #333; position: absolute; left: 0; transition: transform 0.3s ease; } .hvac-nav-toggle-icon::before { top: -8px; } .hvac-nav-toggle-icon::after { top: 8px; } .hvac-nav-mobile-open .hvac-nav-toggle-icon { background-color: transparent; } .hvac-nav-mobile-open .hvac-nav-toggle-icon::before { transform: rotate(45deg) translateY(8px); } .hvac-nav-mobile-open .hvac-nav-toggle-icon::after { transform: rotate(-45deg) translateY(-8px); } /* Responsive */ @media (max-width: 768px) { .hvac-nav-mobile-toggle { display: block; position: absolute; top: 1rem; right: 1rem; z-index: 101; } .hvac-trainer-nav-horizontal .hvac-nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background-color: white; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .hvac-nav-mobile-open .hvac-nav-menu { display: flex; } .hvac-trainer-nav-horizontal .hvac-nav-link { padding: 1rem 1.5rem; border-bottom: 1px solid #f0f0f0; } .hvac-trainer-nav-horizontal .hvac-nav-submenu { position: static; width: 100%; box-shadow: none; background-color: #f8f9fa; border: none; border-radius: 0; } .hvac-trainer-nav-horizontal .hvac-nav-sublink { padding-left: 3rem; } .hvac-trainer-nav-vertical { position: fixed; top: 0; left: -260px; height: 100vh; transition: left 0.3s ease; z-index: 1000; } .hvac-nav-mobile-open .hvac-trainer-nav-vertical { left: 0; } } /* Integration with existing styles */ .hvac-page-wrapper { padding-top: 0; } .hvac-trainer-nav + .hvac-page-wrapper { padding-top: 2rem; } /* Active state improvements */ .hvac-nav-active > .hvac-nav-link .dashicons { color: inherit; } /* Accessibility */ .hvac-nav-link:focus, .hvac-nav-sublink:focus { outline: 2px solid #0274be; outline-offset: 2px; } /* Loading state */ .hvac-nav-loading { opacity: 0.6; pointer-events: none; } /* Dropdown animation */ @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .hvac-nav-submenu { animation: slideDown 0.3s ease; } /* Click behavior for submenu */ .hvac-trainer-nav[data-submenu="click"] .hvac-nav-has-submenu:hover .hvac-nav-submenu { display: none; } .hvac-trainer-nav[data-submenu="click"] .hvac-nav-has-submenu.hvac-nav-open .hvac-nav-submenu { display: block; }