/* Loading is contained in the history table; existing records remain in memory. */
#refresh-label { font-size: inherit; }
#history-table-wrap { position: relative; }
#history-table-wrap.is-loading { min-height: 288px; }
#history-table-wrap.is-loading tbody { opacity: .22; }
.history-loading {
  position: absolute; inset: 42px 0 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 9px; padding: 25px 25px 22px; background: var(--card);
  color: var(--ink); text-align: center;
}
.is-refreshing .history-loading { background: rgba(255, 254, 249, .92); justify-content: center; }
.history-loading strong { font-size: 13px; font-weight: 600; letter-spacing: .4px; }
.history-loading p { font-size: 11px; line-height: 1.7; margin: 0; color: var(--muted); }
.loading-spinner {
  display: block; width: 27px; height: 27px; margin-bottom: 3px;
  border: 2px solid #dde5d5; border-top-color: var(--green); border-radius: 50%;
  animation: history-spin .8s linear infinite;
}
.loading-skeleton { width: 100%; max-width: 550px; display: grid; gap: 18px; margin-top: 14px; }
.skeleton-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 55px 60px; gap: 20px; align-items: center; }
.skeleton-row span {
  height: 9px; display: block; border-radius: 5px;
  background: linear-gradient(100deg, #e9eddf 20%, #f6f8ee 45%, #e9eddf 70%);
  background-size: 220% 100%; animation: history-shimmer 1.5s ease-in-out infinite;
}
.skeleton-row:nth-child(2) span:nth-child(2) { width: 76%; }
.skeleton-row:nth-child(3) span:nth-child(2) { width: 88%; }
.history-is-loading #refresh-icon { animation: history-spin 1s linear infinite; }
#search:disabled, #person-filter:disabled { cursor: wait; opacity: .65; }
@keyframes history-spin { to { transform: rotate(360deg); } }
@keyframes history-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (max-width: 540px) {
  .history-loading { padding: 24px 17px 20px; }
  .history-loading p { font-size: 12px; }
  .skeleton-row { grid-template-columns: 35px minmax(0, 1fr) 38px 42px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .loading-spinner, .history-is-loading #refresh-icon, .skeleton-row span { animation: none; }
}