From f9b43588df147f003744c0d3483c815a857ef5a1 Mon Sep 17 00:00:00 2001
From: Ben <ben@upskillhvac.com>
Date: Mon, 18 Aug 2025 20:23:21 -0300
Subject: [PATCH] feat: Complete event edit page styling to match registration
 form
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Redesigned event edit form to match registration page styling patterns
- Added professional card-based layout with proper shadows and borders
- Implemented consistent color scheme using HVAC brand colors (#0274be)
- Added proper spacing, typography, and form field styling
- Improved responsive design for mobile devices
- Enhanced form sections with dashed underlines and proper hierarchy
- Styled buttons to match registration page (primary/secondary)
- Added proper focus states and transitions for accessibility
- Implemented CSS custom properties for consistent theming
- Added print styles and reduced motion support

Event edit page now has polished, professional appearance matching other trainer pages.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 assets/css/hvac-event-edit-custom.css | 423 +++++++++++++++++---------
 1 file changed, 283 insertions(+), 140 deletions(-)

diff --git a/assets/css/hvac-event-edit-custom.css b/assets/css/hvac-event-edit-custom.css
index 83ec95bd..5ead760e 100644
--- a/assets/css/hvac-event-edit-custom.css
+++ b/assets/css/hvac-event-edit-custom.css
@@ -1,29 +1,37 @@
 /**
  * HVAC Custom Event Edit Form Styles
- * Matches the styling patterns of other trainer pages
+ * Matches the registration page styling patterns
+ * 
+ * @version 2.0.0
  */
 
 /* 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-xs: 0.25rem;
+    --hvac-spacing-sm: 0.5rem;
+    --hvac-spacing-md: 1rem;
+    --hvac-spacing-lg: 1.5rem;
+    --hvac-spacing-xl: 2rem;
     
     /* Colors */
-    --hvac-primary: #0073aa;
-    --hvac-primary-dark: #005a87;
+    --hvac-primary: #0274be;
+    --hvac-primary-dark: #025a93;
+    --hvac-primary-light: #e6f3fb;
+    --hvac-secondary-dark: #3a3f44;
     --hvac-text: #333333;
-    --hvac-border: #dddddd;
-    --hvac-border-light: #eeeeee;
+    --hvac-text-light: #757575;
+    --hvac-border: #e0e0e0;
+    --hvac-border-light: #f0f0f0;
+    --hvac-error: #d63638;
+    --hvac-success: #46b450;
     
     /* Shadows */
-    --hvac-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    --hvac-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);
+    --hvac-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    --hvac-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.1);
+    
+    /* Border Radius */
+    --hvac-border-radius: 4px;
 }
 
 /* Fix navigation bar z-index issue */
@@ -42,58 +50,97 @@
     padding: 15px 0;
 }
 
-/* Main container - match other trainer pages width */
-.hvac-event-edit-page .container {
+/* Main wrapper - matches registration page */
+.hvac-event-edit-wrapper {
     max-width: 1200px;
     margin: 0 auto;
-    padding: 0 20px;
+    padding: 2rem;
+    padding: var(--hvac-spacing-xl) var(--hvac-spacing-md);
+    background-color: #f9fafb;
 }
 
-/* Event edit wrapper - increase width to match dashboard */
-.hvac-event-edit-wrapper {
-    max-width: 100%;
+/* Form container - card style like registration */
+.hvac-event-form {
+    max-width: 800px;
     margin: 0 auto;
-    padding: 30px 0;
+    padding: 2rem;
+    padding: var(--hvac-spacing-xl);
+    background-color: white;
+    border-radius: 4px;
+    border-radius: var(--hvac-border-radius);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--hvac-shadow-lg);
+    border: 1px solid #e0e0e0;
+    border: 1px solid var(--hvac-border);
 }
 
-/* Form sections */
+/* Page title styling - matches registration header */
+.hvac-event-edit-wrapper h1.entry-title {
+    text-align: center;
+    color: #0274be;
+    color: var(--hvac-primary);
+    font-size: 1.8rem;
+    margin-bottom: 0.5rem;
+    margin-bottom: var(--hvac-spacing-sm);
+    font-weight: 700;
+}
+
+/* Form sections - matches registration sections */
 .hvac-form-section {
-    background: #fff;
-    border: 1px solid var(--hvac-border-light);
-    border-radius: 8px;
-    padding: 25px;
-    margin-bottom: 25px;
-    box-shadow: var(--hvac-shadow);
+    margin-bottom: 2rem;
+    margin-bottom: var(--hvac-spacing-xl);
+    padding-bottom: 1.5rem;
+    padding-bottom: var(--hvac-spacing-lg);
+    border-bottom: 1px solid #f0f0f0;
+    border-bottom: 1px solid var(--hvac-border-light);
 }
 
+.hvac-form-section:last-child {
+    margin-bottom: 0;
+    padding-bottom: 0;
+    border-bottom: none;
+}
+
+/* Section headings */
 .hvac-form-section h2 {
-    margin: 0 0 20px 0;
-    padding-bottom: 15px;
-    border-bottom: 2px solid var(--hvac-border-light);
-    font-size: 20px;
-    color: var(--hvac-text);
+    color: #3a3f44;
+    color: var(--hvac-secondary-dark);
+    margin-bottom: 1rem;
+    margin-bottom: var(--hvac-spacing-md);
+    font-size: 1.3rem;
     font-weight: 600;
+    padding-bottom: 0.5rem;
+    padding-bottom: var(--hvac-spacing-sm);
+    border-bottom: 1px dashed #f0f0f0;
+    border-bottom: 1px dashed var(--hvac-border-light);
 }
 
 /* Form rows */
 .hvac-form-row {
-    margin-bottom: 20px;
+    margin-bottom: 1rem;
+    margin-bottom: var(--hvac-spacing-md);
 }
 
+/* Labels - matches registration */
 .hvac-form-row label {
     display: block;
-    margin-bottom: 8px;
+    margin-bottom: 0.5rem;
+    margin-bottom: var(--hvac-spacing-sm);
     font-weight: 600;
-    color: #555;
-    font-size: 14px;
+    color: #333333;
+    color: var(--hvac-text);
+    font-size: 0.95rem;
 }
 
 .hvac-form-row label.required::after {
     content: ' *';
     color: #d63638;
+    color: var(--hvac-error);
+    margin-left: 0.25rem;
+    margin-left: var(--hvac-spacing-xs);
 }
 
-/* Form inputs */
+/* Form inputs - matches registration styling */
 .hvac-form-row input[type="text"],
 .hvac-form-row input[type="email"],
 .hvac-form-row input[type="url"],
@@ -103,179 +150,300 @@
 .hvac-form-row textarea,
 .hvac-form-row select {
     width: 100%;
-    padding: 10px 12px;
+    padding: 0.85rem;
+    border: 1px solid #e0e0e0;
     border: 1px solid var(--hvac-border);
     border-radius: 4px;
-    font-size: 14px;
-    transition: border-color 0.2s;
+    border-radius: var(--hvac-border-radius);
+    font-size: 1rem;
+    background-color: #f9fafb;
+    transition: border-color 0.2s, box-shadow 0.2s;
+    -webkit-transition: border-color 0.2s, box-shadow 0.2s;
 }
 
 .hvac-form-row input:focus,
 .hvac-form-row textarea:focus,
 .hvac-form-row select:focus {
-    outline: none;
+    border-color: #0274be;
     border-color: var(--hvac-primary);
-    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);
+    outline: none;
+    box-shadow: 0 0 0 3px #e6f3fb;
+    box-shadow: 0 0 0 3px var(--hvac-primary-light);
+    background-color: white;
+}
+
+/* Textarea specific */
+.hvac-form-row textarea {
+    min-height: 120px;
+    resize: vertical;
+}
+
+/* Select dropdown styling */
+.hvac-form-row select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.75rem center;
+    background-size: 16px 12px;
+    padding-right: 2.5rem;
 }
 
 /* Two column layout */
-.hvac-row-half {
+.hvac-row-half,
+.form-row-half {
     display: flex;
-    gap: 20px;
+    gap: 1rem;
 }
 
-.hvac-row-half .hvac-col {
+.hvac-row-half > div,
+.hvac-row-half .hvac-col,
+.form-row-half > div {
     flex: 1;
 }
 
 /* Checkboxes */
 .hvac-checkbox-label {
     display: inline-block;
-    margin-right: 20px;
-    margin-bottom: 10px;
+    margin-right: 1.5rem;
+    margin-bottom: 0.75rem;
     font-weight: normal;
     cursor: pointer;
-    font-size: 14px;
+    font-size: 0.95rem;
 }
 
 .hvac-checkbox-label input[type="checkbox"] {
-    margin-right: 6px;
+    margin-right: 0.5rem;
     vertical-align: middle;
+    width: auto;
+}
+
+/* Checkbox group */
+.hvac-checkbox-group {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 0.75rem;
 }
 
 /* Input group (for currency) */
 .hvac-input-group {
     display: flex;
-    align-items: center;
+    align-items: stretch;
 }
 
 .hvac-input-prefix {
-    padding: 10px 12px;
+    padding: 0.85rem;
     background: #f5f5f5;
+    border: 1px solid #e0e0e0;
     border: 1px solid var(--hvac-border);
     border-right: none;
     border-radius: 4px 0 0 4px;
     font-weight: 600;
+    display: flex;
+    align-items: center;
 }
 
 .hvac-input-group input {
     border-radius: 0 4px 4px 0 !important;
+    flex: 1;
 }
 
-/* Form actions */
+/* Form actions - matches registration submit section */
 .hvac-form-actions {
-    display: flex;
-    gap: 15px;
-    padding-top: 30px;
-    border-top: 2px solid var(--hvac-border-light);
-    margin-top: 30px;
+    margin-top: 2rem;
+    margin-top: var(--hvac-spacing-xl);
+    text-align: center;
+    padding-top: 1.5rem;
+    padding-top: var(--hvac-spacing-lg);
+    border-top: 1px solid #f0f0f0;
+    border-top: 1px solid var(--hvac-border-light);
 }
 
-/* Buttons */
+/* Buttons - matches registration styling */
 .hvac-button {
-    padding: 12px 24px;
+    display: inline-block;
+    padding: 0.85rem 2.5rem;
     border: none;
     border-radius: 4px;
-    font-size: 14px;
+    border-radius: var(--hvac-border-radius);
+    font-size: 1.1rem;
     font-weight: 600;
     cursor: pointer;
     text-decoration: none;
-    display: inline-block;
-    transition: all 0.2s;
+    text-align: center;
+    transition: all 0.3s ease;
+    -webkit-transition: all 0.3s ease;
+    margin: 0 0.5rem;
 }
 
 .hvac-button-primary {
-    background: var(--hvac-primary);
+    background-color: #0274be;
+    background-color: var(--hvac-primary);
     color: white;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--hvac-shadow);
 }
 
 .hvac-button-primary:hover {
-    background: var(--hvac-primary-dark);
-    transform: translateY(-1px);
+    background-color: #025a93;
+    background-color: var(--hvac-primary-dark);
+    transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
 }
 
 .hvac-button-secondary {
-    background: #f0f0f1;
+    background-color: #f5f5f5;
+    color: #333333;
     color: var(--hvac-text);
+    border: 1px solid #e0e0e0;
+    border: 1px solid var(--hvac-border);
 }
 
 .hvac-button-secondary:hover {
-    background: #e0e0e1;
+    background-color: #ebebeb;
+    color: #333333;
     color: var(--hvac-text);
 }
 
-/* Success notice */
+/* Success/Error notices */
 .hvac-notice {
-    padding: 15px 20px;
-    margin-bottom: 25px;
-    border-left: 4px solid;
-    background: #fff;
+    padding: 1rem;
+    margin-bottom: 1.5rem;
     border-radius: 4px;
+    border-radius: var(--hvac-border-radius);
 }
 
 .hvac-notice-success {
-    border-color: #46b450;
-    background: #ecf7ed;
+    background-color: #ecf7ed;
+    border: 1px solid #46b450;
+    border-left: 4px solid #46b450;
+    border-left: 4px solid var(--hvac-success);
 }
 
-.hvac-notice p {
+.hvac-notice-success p {
+    color: #46b450;
+    color: var(--hvac-success);
+    margin: 0;
+    font-weight: 500;
+}
+
+.hvac-notice-error {
+    background-color: #fee;
+    border: 1px solid #fcc;
+    border-left: 4px solid #d63638;
+    border-left: 4px solid var(--hvac-error);
+}
+
+.hvac-notice-error p {
+    color: #d63638;
+    color: var(--hvac-error);
     margin: 0;
     font-weight: 500;
 }
 
 /* WordPress editor overrides */
 .hvac-form-row .wp-editor-wrap {
+    border: 1px solid #e0e0e0;
     border: 1px solid var(--hvac-border);
     border-radius: 4px;
+    border-radius: var(--hvac-border-radius);
     overflow: hidden;
+    background-color: #f9fafb;
 }
 
 .hvac-form-row .wp-editor-container {
     border: none;
+    background-color: white;
+}
+
+.hvac-form-row .wp-editor-area {
+    background-color: white;
+}
+
+/* Venue and Organizer field groups */
+.hvac-venue-fields,
+.hvac-organizer-fields {
+    margin-top: 1rem;
+    margin-top: var(--hvac-spacing-md);
+    padding-top: 1rem;
+    padding-top: var(--hvac-spacing-md);
+    border-top: 1px dashed #f0f0f0;
+    border-top: 1px dashed var(--hvac-border-light);
+}
+
+/* Field help text */
+.field-help {
+    margin-top: 0.25rem;
+    margin-top: var(--hvac-spacing-xs);
+    font-size: 0.85rem;
+    color: #757575;
+    color: var(--hvac-text-light);
 }
 
 /* Responsive adjustments */
-@media (max-width: 768px) {
-    .hvac-event-edit-page .container {
-        padding: 0 15px;
+@media screen and (max-width: 768px) {
+    .hvac-event-edit-wrapper {
+        padding: 20px !important;
+        margin: 0 !important;
+        max-width: none !important;
+        width: 100% !important;
+        box-sizing: border-box !important;
     }
     
-    .hvac-form-section {
-        padding: 20px;
-        margin-bottom: 20px;
+    .hvac-event-form {
+        padding: 1.5rem;
+        border-radius: 0;
+        box-shadow: none;
     }
     
-    .hvac-row-half {
+    .hvac-row-half,
+    .form-row-half {
         flex-direction: column;
         gap: 0;
     }
     
+    .hvac-checkbox-group {
+        grid-template-columns: 1fr;
+    }
+    
     .hvac-checkbox-label {
         display: block;
-        margin-bottom: 12px;
+        margin-bottom: 0.75rem;
     }
     
     .hvac-form-actions {
-        flex-direction: column;
+        padding: 1rem 0;
     }
     
     .hvac-button {
         width: 100%;
-        text-align: center;
+        margin: 0.5rem 0;
+        padding: 1rem;
     }
 }
 
-@media (max-width: 480px) {
-    .hvac-form-section {
-        padding: 15px;
-        border-radius: 0;
-        border-left: 0;
-        border-right: 0;
+@media screen and (max-width: 480px) {
+    .hvac-event-edit-wrapper {
+        padding: 15px !important;
+    }
+    
+    .hvac-event-form {
+        padding: 1.25rem;
     }
     
     .hvac-form-section h2 {
-        font-size: 18px;
+        font-size: 1.1rem;
+    }
+}
+
+@media screen and (max-width: 375px) {
+    .hvac-event-edit-wrapper {
+        padding: 12px !important;
+    }
+    
+    .hvac-event-form {
+        padding: 1rem;
     }
 }
 
@@ -293,56 +461,31 @@
     z-index: 50;
 }
 
-/* Venue and Organizer field groups */
-.hvac-venue-fields,
-.hvac-organizer-fields {
-    margin-top: 20px;
-    padding-top: 20px;
-    border-top: 1px solid var(--hvac-border-light);
-}
-
-/* Category checkboxes grid */
-.hvac-checkbox-group {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 10px;
-}
-
-@media (max-width: 768px) {
-    .hvac-checkbox-group {
-        grid-template-columns: 1fr;
+/* Reduce motion support */
+@media (prefers-reduced-motion: reduce) {
+    .hvac-button,
+    .hvac-form-row input,
+    .hvac-form-row textarea,
+    .hvac-form-row select {
+        transition: none !important;
     }
 }
 
-/* Page title styling */
-.hvac-event-edit-wrapper h1.entry-title {
-    font-size: 28px;
-    color: var(--hvac-text);
-    margin-bottom: 25px;
-    font-weight: 600;
-}
-
-/* Ensure full width on larger screens */
-@media (min-width: 1400px) {
-    .hvac-event-edit-page .container {
-        max-width: 1320px;
+/* Print styles */
+@media print {
+    .hvac-trainer-menu-wrapper,
+    .hvac-breadcrumbs,
+    .hvac-form-actions {
+        display: none !important;
     }
-}
-
-/* Fix z-index layering with site navigation */
-.hvac-event-edit-page > * {
-    position: relative;
-}
-
-.hvac-event-edit-page .hvac-trainer-menu-wrapper {
-    margin-top: 0;
-    padding-top: 20px;
-}
-
-/* Ensure navigation doesn't get hidden */
-@media (max-width: 921px) {
-    .hvac-event-edit-page .hvac-trainer-menu-wrapper {
-        position: relative;
-        z-index: 1000;
+    
+    .hvac-event-edit-wrapper {
+        padding: 0;
+        background: white;
+    }
+    
+    .hvac-event-form {
+        box-shadow: none;
+        border: none;
     }
 }
\ No newline at end of file