/** * HVAC Organizers Styles * * @package HVAC_Community_Events * @version 2.0.0 */ /* Page Layout */ .hvac-organizers-list, .hvac-organizer-manage { max-width: 1200px; margin: 0 auto; padding: 2rem; } /* Page Header */ .hvac-page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid #e0e0e0; } .hvac-page-header h1 { margin: 0; color: #0274be; font-size: 2rem; } /* Breadcrumb */ .hvac-breadcrumb { margin-bottom: 1.5rem; color: #666; font-size: 0.9rem; } .hvac-breadcrumb a { color: #0274be; text-decoration: none; } .hvac-breadcrumb a:hover { text-decoration: underline; } /* Filters */ .hvac-organizers-filters { background-color: #f5f5f5; padding: 1.5rem; border-radius: 8px; margin-bottom: 2rem; } .hvac-filter-form { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .hvac-filter-row { display: flex; gap: 1rem; width: 100%; } .hvac-filter-group { flex: 1; min-width: 200px; } .hvac-filter-group input { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; } /* Table */ .hvac-organizers-table-wrapper { overflow-x: auto; margin-bottom: 2rem; } .hvac-organizers-table { width: 100%; border-collapse: collapse; background-color: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .hvac-organizers-table th { background-color: #f8f9fa; padding: 1rem; text-align: left; font-weight: 600; color: #333; border-bottom: 2px solid #e0e0e0; } .hvac-organizers-table td { padding: 1rem; border-bottom: 1px solid #e0e0e0; vertical-align: middle; } .hvac-organizers-table tbody tr:hover { background-color: #f8f9fa; } .hvac-no-results { text-align: center; color: #666; font-style: italic; padding: 3rem !important; } /* Logo Styles */ .hvac-org-logo { width: 60px; } .hvac-org-logo img { width: 50px; height: 50px; object-fit: cover; border-radius: 4px; } .hvac-logo-placeholder { width: 50px; height: 50px; background-color: #0274be; color: white; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 600; border-radius: 4px; } .hvac-logo-placeholder-large { width: 200px; height: 200px; background-color: #f0f0f0; color: #999; display: flex; align-items: center; justify-content: center; font-size: 1rem; border-radius: 8px; border: 2px dashed #ddd; } /* Logo Upload */ .hvac-org-logo-upload { display: flex; align-items: flex-start; gap: 2rem; } .hvac-current-logo img { max-width: 200px; max-height: 200px; object-fit: contain; border-radius: 8px; border: 1px solid #e0e0e0; } .hvac-logo-actions { display: flex; flex-direction: column; gap: 1rem; } .hvac-help-text { color: #666; font-size: 0.875rem; margin-top: 0.5rem; } /* Buttons */ .hvac-button { display: inline-block; padding: 0.75rem 1.5rem; border: none; border-radius: 4px; font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.3s ease; } .hvac-button-primary { background-color: #0274be; color: white; } .hvac-button-primary:hover { background-color: #005fa3; } .hvac-button-secondary { background-color: #6c757d; color: white; } .hvac-button-secondary:hover { background-color: #5a6268; } .hvac-button-danger { background-color: #dc3545; color: white; } .hvac-button-danger:hover { background-color: #c82333; } .hvac-button-danger-outline { background-color: transparent; color: #dc3545; border: 1px solid #dc3545; } .hvac-button-danger-outline:hover { background-color: #dc3545; color: white; } .hvac-button-small { padding: 0.5rem 1rem; font-size: 0.875rem; } .hvac-text-muted { color: #6c757d; font-style: italic; } /* Pagination */ .hvac-pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2rem; } .hvac-pagination a, .hvac-pagination span { padding: 0.5rem 1rem; border: 1px solid #ddd; border-radius: 4px; text-decoration: none; color: #333; } .hvac-pagination a:hover { background-color: #f5f5f5; } .hvac-pagination .current { background-color: #0274be; color: white; border-color: #0274be; } /* Form Styles */ .hvac-form { background-color: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .hvac-form-section { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid #e0e0e0; } .hvac-form-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .hvac-form-section h3 { margin-bottom: 1.5rem; color: #333; font-size: 1.25rem; } .hvac-form-row { margin-bottom: 1.5rem; } .hvac-form-row label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: #333; } .hvac-form-row input, .hvac-form-row select, .hvac-form-row textarea { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; } .hvac-form-row input:focus, .hvac-form-row select:focus, .hvac-form-row textarea:focus { outline: none; border-color: #0274be; box-shadow: 0 0 0 3px rgba(2, 116, 190, 0.1); } .hvac-form-row-half { display: flex; gap: 1rem; } .hvac-form-row-half > div { flex: 1; } .hvac-form-actions { display: flex; gap: 1rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #e0e0e0; } .hvac-form-actions .hvac-button-danger { margin-left: auto; } /* Messages */ .hvac-message { padding: 1rem 1.5rem; border-radius: 4px; margin-bottom: 1.5rem; font-weight: 500; } .hvac-message-success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .hvac-message-error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } /* Form Error Styles */ .hvac-form-error { border-color: #dc3545 !important; } .hvac-error-message { display: block; color: #dc3545; font-size: 0.875rem; margin-top: 0.25rem; } /* Responsive */ @media (max-width: 768px) { .hvac-organizers-list, .hvac-organizer-manage { padding: 1rem; } .hvac-page-header { flex-direction: column; align-items: flex-start; gap: 1rem; } .hvac-filter-row { flex-direction: column; } .hvac-filter-group { width: 100%; } .hvac-form-row-half { flex-direction: column; } .hvac-form-actions { flex-wrap: wrap; } .hvac-form-actions .hvac-button-danger { margin-left: 0; width: 100%; } .hvac-organizers-table { font-size: 0.875rem; } .hvac-organizers-table th, .hvac-organizers-table td { padding: 0.5rem; } .hvac-org-logo-upload { flex-direction: column; align-items: center; } .hvac-logo-actions { width: 100%; align-items: stretch; } }