.counts-grid > tbody > tr > td {
  @apply h-6;
}

.counts-summary > tbody > tr > td,
.counts-summary > thead > tr > th {
  padding: 0.5rem 0.75rem;
}

.counts-grid > tbody > tr > td[data-counts-text] {
  position: relative;
  outline: 1px solid #64748b;
  outline-offset: -1px;
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
  cursor: text;
}

.dark .counts-grid > tbody > tr > td[data-counts-text] {
  outline-color: #94a3b8;
}

.counts-text-caret {
  position: absolute;
  width: 1px;
  background-color: currentColor;
  pointer-events: none;
  user-select: none;
  animation: counts-caret-blink 1s step-end infinite;
}

@keyframes counts-caret-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .counts-text-caret { animation: none; }
}

.counts-grid > tbody > tr:nth-child(odd) > td:not([data-counts-selected]) {
  @apply bg-white text-slate-900;
}

.counts-grid > tbody > tr:nth-child(even) > td:not([data-counts-selected]) {
  @apply bg-slate-50 text-slate-900;
}

.dark .counts-grid > tbody > tr:nth-child(odd) > td:not([data-counts-selected]) {
  @apply bg-slate-950 text-slate-100;
}

.dark .counts-grid > tbody > tr:nth-child(even) > td:not([data-counts-selected]) {
  @apply bg-slate-900 text-slate-100;
}

.counts-grid > thead {
  @apply bg-slate-200 text-slate-950;
}

.counts-grid > thead > tr > th {
  @apply border-b border-r border-slate-300 bg-slate-200 text-slate-950;
}

.dark .counts-grid > thead,
.dark .counts-grid > thead > tr > th {
  @apply border-slate-600 bg-slate-800 text-slate-50;
}

.counts-grid > tbody > tr > td {
  @apply border-r border-slate-200 dark:border-slate-700;
  -webkit-touch-callout: none;
}

.counts-grid > tbody > tr > td:has(> .counts-nested) {
  padding: 8px 12px;
}

.counts-nested .counts-grid > thead > tr > th,
.counts-nested .counts-grid > tbody > tr > td {
  padding: 8px 12px;
}

.counts-nested {
  @apply border-l-2 border-slate-300 dark:border-slate-600;
}

/* 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-row-total='grand_total']:not([data-counts-selected]) {
  background-color: #cbd5e1;
  color: #0f172a;
  font-weight: 700;
}
.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-row-total='grand_total']:not([data-counts-selected]) {
  background-color: #475569;
  color: #fff;
}