/**
 * twLOINC 全站表格／區塊空狀態（對齊 mappingTable.jsp）
 * 用法：<div class="empty-state empty-state--compact">…</div>
 * JS：TwEmptyState.tableRow(colspan, message, { variant: 'empty'|'loading'|'error' })
 *
 * 載入動畫：Uiverse.io by andrew-manzyk（雲端上傳）
 */

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #747A6F;
}

.empty-state--compact {
  padding: 40px 16px;
}

.empty-state i {
  display: block;
  font-size: 4rem;
  margin-bottom: 20px;
  opacity: 0.5;
  line-height: 1;
}

.empty-state p,
.empty-state .empty-state__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

/* ── 雲端 loader（Uiverse.io by andrew-manzyk） ── */
.tw-cloud-loader {
  --tw-cloud-color: #3F9170;
  --tw-arrows-color: #A2CABA;
  --tw-cloud-time: 1s;
  --tw-cloud-size: 52px;
  display: block;
  width: var(--tw-cloud-size);
  height: var(--tw-cloud-size);
  margin: 0 auto 14px;
  line-height: 0;
}

.empty-state--compact .tw-cloud-loader,
.tw-loading-panel .tw-cloud-loader {
  --tw-cloud-size: 44px;
  margin-bottom: 10px;
}

.tw-cloud-loader--sm {
  --tw-cloud-size: 40px;
  margin-bottom: 8px;
}

.tw-cloud-loader--lg {
  --tw-cloud-size: 56px;
  margin-bottom: 12px;
}

.sa-loading-box .tw-cloud-loader,
.task-list-loading .tw-cloud-loader {
  --tw-cloud-size: 48px;
}

.tw-loading-panel {
  margin-left: auto;
  margin-right: auto;
}

.loading-row td,
.loading-spinner,
.loading-records,
.ac-loading,
.task-list-loading,
.nlm-detail-loading {
  text-align: center;
  color: #747A6F;
}

.loading-row td .tw-loading-panel,
.loading-spinner .tw-loading-panel,
.loading-records .tw-loading-panel {
  padding-top: 8px;
  padding-bottom: 8px;
}

.ac-loading .tw-cloud-loader,
.empty .tw-cloud-loader,
.mq-empty .tw-cloud-loader {
  margin-bottom: 10px;
}

.loading-spinner i.fi-rr-spinner,
.loading-records i.fi-rr-spinner,
.loading-records i.fi-rr-spinner-alt,
.task-list-loading i.fi-rr-spinner,
.sa-loading-box .sa-spinner {
  display: none !important;
}

.tw-cloud-loader svg {
  width: 100%;
  height: 100%;
  display: block;
}

.tw-cloud-loader svg > rect {
  fill: var(--tw-cloud-color);
}

.tw-cloud-loader svg > g {
  transform-origin: 50% 72.8938%;
  fill: var(--tw-arrows-color);
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.35));
  animation: tw-cloud-rotation var(--tw-cloud-time) linear infinite;
}

.tw-cloud-loader [data-tw-cloud-shapes] g g circle {
  animation: tw-cloud-blob calc(var(--tw-cloud-time) * 2) linear infinite;
}

.tw-cloud-loader [data-tw-cloud-shapes] g g circle:nth-child(2) {
  animation-delay: calc((var(--tw-cloud-time) * 2) / -3);
}

.tw-cloud-loader [data-tw-cloud-shapes] g g circle:nth-child(3) {
  animation-delay: calc((var(--tw-cloud-time) * 2) / -1.5);
}

.tw-cloud-loader [data-tw-cloud-lines] g line {
  stroke-width: 5;
  transform-origin: 50% 50%;
  rotate: -65deg;
  animation: tw-cloud-lines calc(var(--tw-cloud-time) / 1.33) linear infinite;
}

@keyframes tw-cloud-rotation {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

@keyframes tw-cloud-lines {
  0% { transform: translateY(-10px); }
  100% { transform: translateY(8px); }
}

@keyframes tw-cloud-blob {
  0% { cx: 20; cy: 60; r: 15; }
  50% { cx: 50; cy: 45; r: 20; }
  100% { cx: 80; cy: 60; r: 15; }
}

.empty-state--loading i.fi-rr-spinner {
  display: none;
}

.empty-state--error {
  color: #dc3545;
}

.empty-state--error i {
  opacity: 0.8;
}

.empty-state-block {
  text-align: center;
  padding: 60px 20px;
  color: #747A6F;
}

.empty-state-block.empty-state--compact {
  padding: 40px 16px;
}