#434

frontend/src/components/counts/countsTable.css

@@ -18,17 +18,6 @@
   @apply bg-slate-900 text-slate-100;
 }
 
-.counts-grid > tbody > tr > td[data-counts-aggregate]:not([data-counts-selected]) {
-  background-color: #e2e8f0;
-  color: #0f172a;
-  font-weight: 600;
-}
-
-.dark .counts-grid > tbody > tr > td[data-counts-aggregate]:not([data-counts-selected]) {
-  background-color: #334155;
-  color: #f8fafc;
-}
-
 .counts-grid > thead {
   @apply bg-slate-200 text-slate-950;
 }
@@ -55,25 +44,27 @@
   @apply border-l-2 border-slate-300 dark:border-slate-600;
 }
 
-.counts-grid > tbody > tr > td[data-counts-total='subtotal']:not([data-counts-selected]),
-.counts-grid > thead > tr > th[data-counts-total='subtotal'] {
+/* Aggregate kind is semantic; only aggregate rows receive a background. */
+.counts-grid > tbody > tr > td[data-counts-total],
+.counts-grid > thead > tr > th[data-counts-total] {
+  @apply border-l border-l-slate-400 font-semibold dark:border-l-slate-500;
+}
+
+.counts-grid > tbody > tr > td[data-counts-row-total='subtotal']:not([data-counts-selected]) {
   background-color: #e2e8f0;
   color: #0f172a;
   font-weight: 600;
 }
-.counts-grid > tbody > tr > td[data-counts-total='grand_total']:not([data-counts-selected]),
-.counts-grid > thead > tr > th[data-counts-total='grand_total'] {
+.counts-grid > tbody > tr > td[data-counts-row-total='grand_total']:not([data-counts-selected]) {
   background-color: #cbd5e1;
   color: #0f172a;
   font-weight: 700;
 }
-.dark .counts-grid > tbody > tr > td[data-counts-total='subtotal']:not([data-counts-selected]),
-.dark .counts-grid > thead > tr > th[data-counts-total='subtotal'] {
+.dark .counts-grid > tbody > tr > td[data-counts-row-total='subtotal']:not([data-counts-selected]) {
   background-color: #334155;
   color: #f1f5f9;
 }
-.dark .counts-grid > tbody > tr > td[data-counts-total='grand_total']:not([data-counts-selected]),
-.dark .counts-grid > thead > tr > th[data-counts-total='grand_total'] {
+.dark .counts-grid > tbody > tr > td[data-counts-row-total='grand_total']:not([data-counts-selected]) {
   background-color: #475569;
   color: #fff;
 }