refactor: Remove duplicate CSS and use shared patterns in views

- Move DataTable striped rows and hover styling to global primevue-overrides.css
- Add .summary-stats-inline pattern to shared stats.css
- Refactor BankCashRegisterView.vue: CSS reduced from ~210 to 45 lines (78%)
- Refactor TrialBalanceView.vue: CSS reduced from ~100 to 42 lines (58%)
- Remove :deep() violations by using global DataTable overrides
- Update templates to use shared classes (.table-empty, .loading-state, .form-actions)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

reports-app/frontend/src/views/TrialBalanceView.vue

@@ -65,7 +65,7 @@
               </div>
             </div>
 
-            <div class="filters-actions">
+            <div class="form-actions">
               <Button
                 icon="pi pi-filter-slash"
                 label="Resetează Filtre"
@@ -116,14 +116,16 @@
             @sort="onSort"
           >
             <template #empty>
-              <div class="no-data">
-                <i class="pi pi-info-circle"></i>
-                <p>Nu au fost găsite date pentru perioada selectată</p>
+              <div class="table-empty">
+                <i class="pi pi-info-circle table-empty-icon"></i>
+                <p class="table-empty-message">
+                  Nu au fost găsite date pentru perioada selectată
+                </p>
               </div>
             </template>
 
             <template #loading>
-              <div class="loading-table">
+              <div class="loading-state">
                 <ProgressSpinner />
                 <p>Se încarcă balanța de verificare...</p>
               </div>
@@ -615,107 +617,44 @@ watch(
 </script>
 
 <style scoped>
+/* ===== Page-Specific Styles Only ===== */
+/* Uses shared CSS: dashboard.css (.page-header, .page-title, .page-subtitle) */
+/* Uses shared CSS: forms.css (.form-actions) */
+/* Uses shared CSS: tables.css (.table-empty, .loading-state) */
+/* Uses shared CSS: primevue-overrides.css (DataTable striped rows, hover) */
+
+/* Page Container */
 .trial-balance {
   max-width: 1400px;
   margin: 0 auto;
-  padding: 2rem;
-}
-
-.page-header {
-  margin-bottom: 2rem;
-}
-
-.page-title {
-  font-size: 2.5rem;
-  font-weight: 700;
-  color: var(--text-color);
-  margin: 0 0 0.5rem 0;
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.page-subtitle {
-  font-size: 1.1rem;
-  color: var(--text-color-secondary);
-  margin: 0;
+  padding: var(--space-xl);
 }
 
+/* Card Spacing */
 .company-selection-card,
-.filters-card {
-  margin-bottom: 2rem;
+.filters-card,
+.table-card {
+  margin-bottom: var(--space-xl);
 }
 
+/* Search field takes 2 columns in form grid */
 .search-col {
   grid-column: span 2;
 }
 
-.filters-actions {
-  display: flex;
-  gap: 1rem;
-  justify-content: flex-end;
-  padding-top: 1rem;
-  border-top: 1px solid var(--surface-border);
-}
-
-.table-card {
-  margin-bottom: 2rem;
-}
-
-.no-data,
-.loading-table {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 3rem;
-  color: var(--text-color-secondary);
-}
-
-.no-data i,
-.loading-table i {
-  font-size: 2rem;
-  margin-bottom: 0.5rem;
-}
-
+/* Text alignment utility - page specific */
 .text-right {
   text-align: right;
 }
 
-/* Enhanced striped rows with better contrast */
-.table-card :deep(.p-datatable .p-datatable-tbody > tr) {
-  transition: background-color 0.2s ease;
-}
-
-.table-card :deep(.p-datatable .p-datatable-tbody > tr:nth-child(odd)) {
-  background-color: #ffffff;
-}
-
-.table-card :deep(.p-datatable .p-datatable-tbody > tr:nth-child(even)) {
-  background-color: #f8f9fa;
-}
-
-.table-card :deep(.p-datatable .p-datatable-tbody > tr:hover) {
-  background-color: #e3f2fd !important;
-  cursor: pointer;
-}
-
-/* Responsive design */
+/* Responsive */
 @media (max-width: 768px) {
   .trial-balance {
-    padding: 1rem;
-  }
-
-  .page-title {
-    font-size: 2rem;
+    padding: var(--space-md);
   }
 
   .search-col {
     grid-column: span 1;
   }
-
-  .filters-actions {
-    flex-direction: column;
-  }
 }
 </style>