.table-scroll tbody tr > td:first-child[data-timer-state] {
  --row-timer-color: #64748b;
  --row-timer-soft: rgba(100, 116, 139, 0.14);

  color: var(--row-timer-color) !important;
  font-weight: 800 !important;

  background:
    linear-gradient(
      135deg,
      var(--row-timer-soft),
      rgba(255, 255, 255, 0.02)
    ) !important;

  box-shadow:
    inset 3px 0 0 var(--row-timer-color),
    inset 0 0 0 1px var(--row-timer-soft) !important;

  transition:
    color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.table-scroll tbody tr > td:first-child[data-timer-state="safe"] {
  --row-timer-color: #22c55e;
  --row-timer-soft: rgba(34, 197, 94, 0.15);
}

.table-scroll tbody tr > td:first-child[data-timer-state="warning"] {
  --row-timer-color: #f59e0b;
  --row-timer-soft: rgba(245, 158, 11, 0.16);
}

.table-scroll tbody tr > td:first-child[data-timer-state="danger"],
.table-scroll tbody tr > td:first-child[data-timer-state="expired"] {
  --row-timer-color: #ef4444;
  --row-timer-soft: rgba(239, 68, 68, 0.17);
}

.table-scroll tbody tr > td:first-child[data-timer-state="expired"] {
  animation: mo-expired-row-number-flash 1s ease-in-out infinite;
}

@keyframes mo-expired-row-number-flash {
  0%,
  100% {
    color: #fecaca;
    background: rgba(239, 68, 68, 0.12);
    box-shadow:
      inset 3px 0 0 #ef4444,
      inset 0 0 0 1px rgba(239, 68, 68, 0.18),
      0 0 0 rgba(239, 68, 68, 0);
  }

  50% {
    color: #ffffff;
    background: rgba(239, 68, 68, 0.42);
    box-shadow:
      inset 3px 0 0 #f87171,
      inset 0 0 0 1px rgba(248, 113, 113, 0.65),
      0 0 16px rgba(239, 68, 68, 0.48);
  }
}

@media (prefers-reduced-motion: reduce) {
  .table-scroll tbody tr > td:first-child[data-timer-state="expired"] {
    animation: none;
    color: #ffffff !important;
    background: rgba(239, 68, 68, 0.32) !important;
  }
}

.table-scroll tbody tr > td:first-child[data-timer-state="expired"] {
  color: #ffffff !important;
  background: rgba(239, 68, 68, 0.24) !important;
  animation: mo-expired-number-blink 0.8s steps(1, end) infinite !important;
}

@keyframes mo-expired-number-blink {
  0%,
  49% {
    color: #ffffff;
    text-shadow:
      0 0 5px #ffffff,
      0 0 12px #ef4444;
  }

  50%,
  100% {
    color: transparent;
    text-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .table-scroll tbody tr > td:first-child[data-timer-state="expired"] {
    animation: mo-expired-number-blink 0.8s steps(1, end) infinite !important;
  }
}