/* ===========================================================
   天鴻商行 — 統一表格樣式 (Unified Table System v1.0)
   適用於：.rtable / .custom-table.rtable / .site-table.rtable
           .price-table.rtable / .birds-nest-table.rtable
           .connect-compare-table.rtable
   原則：深色表頭、斑馬紋、數字右對齊、sticky header、
         清晰 hover、手機兩欄卡片佈局、caption 顯示
   =========================================================== */

/* ---- Wrapper ---- */
.rtable-wrap {
  position: relative;
  border-radius: 14px;
  max-width: 100%;
  margin: 2rem 0;
}

/* ---- Desktop base ---- */
table.rtable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.5rem 0;
  background-color: #ffffff;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
  border: 1px solid #e5e7eb;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* 若表格在 rtable-wrap 內，陰影改由 wrapper 承載以避免 sticky header 裁切 */
.rtable-wrap > table.rtable {
  box-shadow: none;
  border: 1px solid #e5e7eb;
}

/* ---- Caption ---- */
table.rtable > caption {
  caption-side: top;
  text-align: left;
  font-family: 'PingFang TC','Microsoft JhengHei','Heiti TC','PMingLiU','Arial',serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #1e293b;
  padding: 0 0 0.85rem 2px;
  line-height: 1.5;
  caption-side: top;
}
table.rtable > caption.sr-only {
  /* 保留 sr-only 不顯示 */
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---- Header (深色 + sticky) ---- */
table.rtable > thead > tr > th {
  background-color: #1e293b;
  color: #fff7ed;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  text-align: left;
  padding: 0.95rem 1.25rem;
  white-space: nowrap;
  border-bottom: 2px solid #0f172a;
  vertical-align: middle;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* ---- Body cells (放大 padding 與字體) ---- */
table.rtable > tbody > tr > th,
table.rtable > tbody > tr > td {
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid #eef2f7;
  font-size: 1rem;
  line-height: 1.65;
  vertical-align: top;
  color: #334155;
  text-align: left;
}
table.rtable > tbody > tr:last-child > th,
table.rtable > tbody > tr:last-child > td {
  border-bottom: 0;
}

/* 強調第一欄為「行標題」 */
table.rtable > tbody > tr > td:first-child {
  color: #0f172a;
  font-weight: 600;
}

/* ---- Zebra striping (斑馬紋) ---- */
table.rtable > tbody > tr:nth-child(even) {
  background-color: #fafafa;
}
table.rtable > tbody > tr:nth-child(odd) {
  background-color: #ffffff;
}

/* ---- Hover (品牌淡橙) ---- */
table.rtable > tbody > tr:hover {
  background-color: #fff7ed;
  transition: background-color 0.2s ease;
}

/* ---- 數字欄位右對齊 (自動偵測) ----
   凡 data-label 含 $/HKD/USD/RMB/價格/金額/行情/區間/參考
   或 class 含 num/price，皆自動右對齊並 tabular-nums */
table.rtable td.num,
table.rtable th.num,
table.rtable td.price,
table.rtable th.price,
table.rtable td[data-label*="$"],
table.rtable td[data-label*="HKD"],
table.rtable td[data-label*="USD"],
table.rtable td[data-label*="RMB"],
table.rtable td[data-label*="行情"],
table.rtable td[data-label*="金額"],
table.rtable td[data-label*="區間"],
table.rtable td[data-label*="參考"],
table.rtable td[data-label*="價格"],
table.rtable td[data-label*="回收價"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  white-space: nowrap;
  letter-spacing: 0.01em;
}
table.rtable > thead > tr > th.num,
table.rtable > thead > tr > th.price {
  text-align: right;
}

/* ---- 趨勢 Badge (非色盲可辨) ----
   目前舊標記：<span class="text-red-600 font-bold">↗ 抗跌</span>
                <span class="text-secondary-600 font-bold">↘ 回調</span>
                <span class="text-gray-600 font-bold">→ 平穩</span>
   將自動升級為 pill badge。 */
table.rtable td span.font-bold {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  line-height: 1.35;
  border: 1px solid currentColor;
  font-weight: 700;
  white-space: nowrap;
}
/* 漲 = 綠 */
table.rtable td span.font-bold.text-red-600,
table.rtable td span.font-bold.text-green-600,
table.rtable td span.font-bold.text-emerald-600 {
  color: #047857;
  background-color: #d1fae5;
  border-color: rgba(4, 120, 87, 0.25);
}
/* 跌 = 紅 (secondary 橘色在此站表跌勢) */
table.rtable td span.font-bold.text-secondary-600,
table.rtable td span.font-bold.text-orange-600,
table.rtable td span.font-bold.text-rose-600 {
  color: #b91c1c;
  background-color: #fee2e2;
  border-color: rgba(185, 28, 28, 0.25);
}
/* 平穩 = 灰 */
table.rtable td span.font-bold.text-gray-600,
table.rtable td span.font-bold.text-slate-600,
table.rtable td span.font-bold.text-neutral-600 {
  color: #475569;
  background-color: #f1f5f9;
  border-color: rgba(71, 85, 105, 0.25);
}
/* 警示 = 琥珀 */
table.rtable td span.font-bold.text-amber-600,
table.rtable td span.font-bold.text-yellow-600 {
  color: #b45309;
  background-color: #fef3c7;
  border-color: rgba(180, 83, 9, 0.25);
}

/* 可主動標註的 trend class（推薦新頁面使用）*/
table.rtable .trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  border: 1px solid transparent;
  line-height: 1.35;
  white-space: nowrap;
}
table.rtable .trend-up    { color:#047857; background:#d1fae5; border-color:rgba(4,120,87,.25); }
table.rtable .trend-down  { color:#b91c1c; background:#fee2e2; border-color:rgba(185,28,28,.25); }
table.rtable .trend-flat  { color:#475569; background:#f1f5f9; border-color:rgba(71,85,105,.25); }
table.rtable .trend-warn  { color:#b45309; background:#fef3c7; border-color:rgba(180,83,9,.25); }

/* ---- 兼容：.custom-table 舊樣式（繼承 rtable） ---- */
.custom-table.rtable,
.site-table.rtable,
.price-table.rtable,
.connect-compare-table.rtable,
.birds-nest-table.rtable {
  /* 所有屬性已由 table.rtable 規則覆蓋 */
}

/* ===========================================================
   Mobile 佈局 (<= 768px)
   - thead 隱藏
   - 每列變成一張卡片
   - 第一格當卡片標題（深色）
   - 其他格採「標籤左 / 值右」兩欄 flex 佈局
   =========================================================== */
@media (max-width: 768px) {
  .rtable-wrap {
    overflow: visible !important;
    box-shadow: none;
    border: 0;
    background: transparent;
  }
  table.rtable {
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 1.25rem 0 !important;
  }
  table.rtable > caption {
    font-size: 1rem;
    padding: 0 2px 0.6rem;
  }
  table.rtable > thead {
    display: none !important;
  }
  table.rtable > tbody,
  table.rtable > tbody > tr,
  table.rtable > tbody > tr > td,
  table.rtable > tbody > tr > th {
    display: block !important;
    width: 100% !important;
  }
  table.rtable > tbody > tr {
    margin: 0 0 14px 0 !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
  }
  table.rtable > tbody > tr:nth-child(even),
  table.rtable > tbody > tr:nth-child(odd) {
    background: #ffffff !important;
  }
  table.rtable > tbody > tr:hover {
    background: #ffffff !important;
  }

  /* 一般儲存格：兩欄 flex 佈局 */
  table.rtable > tbody > tr > td,
  table.rtable > tbody > tr > th {
    padding: 11px 14px !important;
    border: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 12px !important;
    font-size: 0.95rem !important;
    text-align: right !important;
  }
  table.rtable > tbody > tr > td + td,
  table.rtable > tbody > tr > th + td,
  table.rtable > tbody > tr > td + th {
    border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
  }

  /* 第一格 = 卡片標題（深色 banner） */
  table.rtable > tbody > tr > td:first-child,
  table.rtable > tbody > tr > th:first-child {
    display: block !important;
    background: #1e293b !important;
    color: #fff7ed !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 12px 14px !important;
    text-align: left !important;
    border-top: 0 !important;
  }
  table.rtable > tbody > tr > td:first-child::before,
  table.rtable > tbody > tr > th:first-child::before {
    display: none !important;
  }
  /* 標題內若有粗體字，維持米白色 */
  table.rtable > tbody > tr > td:first-child strong,
  table.rtable > tbody > tr > th:first-child strong {
    color: #fff7ed !important;
  }

  /* 標籤（由 data-label 產生） */
  table.rtable > tbody > tr > td::before,
  table.rtable > tbody > tr > th::before {
    content: attr(data-label);
    display: inline-block;
    font-size: 0.78rem;
    line-height: 1.25;
    opacity: 0.7;
    font-weight: 600;
    color: #475569;
    flex: 0 0 auto;
    margin-right: 8px;
    text-align: left;
    max-width: 45%;
  }
  table.rtable > tbody > tr > td[data-label=""]::before,
  table.rtable > tbody > tr > th[data-label=""]::before {
    display: none !important;
  }

  /* Mobile 下 sticky header 關閉（因為 thead 已隱藏） */
  table.rtable > thead > tr > th {
    position: static !important;
  }

  /* 數字欄位手機維持右對齊（從整體右對齊繼承，無需額外規則） */
  /* Badge 手機適當縮小 */
  table.rtable td span.font-bold,
  table.rtable .trend {
    font-size: 0.78rem;
    padding: 2px 8px;
  }
}

/* 極小螢幕（<= 380px）再微調 */
@media (max-width: 380px) {
  table.rtable > tbody > tr > td,
  table.rtable > tbody > tr > th {
    padding: 10px 12px !important;
    font-size: 0.9rem !important;
  }
  table.rtable > tbody > tr > td::before,
  table.rtable > tbody > tr > th::before {
    font-size: 0.72rem;
  }
}