/** * 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; } }