/* ============================================================
   通用表格響應式框架 (table-rwd.css) - 玻璃擬態進化版
   ============================================================ */

@media (max-width: 768px) {
  * { box-sizing: border-box; }

  .card-table-container {
    margin: 15px 8px !important;
    padding: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .card-table {
    display: table !important;
    width: 100% !important;
    border-collapse: collapse !important;
  }

  /* 模式 2: .rwd-card (每一行轉為獨立玻璃卡片) */
  .card-table.rwd-card { display: block !important; }
  .card-table.rwd-card thead { display: none !important; }
  .card-table.rwd-card tbody,
  .card-table.rwd-card tr { display: block !important; width: 100% !important; }
  
  .card-table.rwd-card tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    margin-bottom: 20px !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 16px !important;
    background: var(--card-bg) !important;
    backdrop-filter: blur(10px);
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  }

  .card-table.rwd-card tr:hover {
    border-color: var(--primary-blue) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
  }

  .card-table.rwd-card td {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px !important;
    font-size: 14px !important;
    border: none !important;
    border-bottom: 1px solid var(--border-separator) !important;
    color: var(--text-muted) !important;
  }

  [data-theme="light"] .card-table.rwd-card td {
    color: var(--text-main) !important;
  }

  .card-table.rwd-card td::before,
  .card-table.rwd-stack td::before {
    content: attr(data-label);
    font-weight: bold;
    color: var(--primary-blue); /* 亮藍標籤 */
    margin-right: 15px;
  }

  /* 第一格：卡片標題 */
  .card-table.rwd-card td:first-child {
    grid-column: 1 / 3 !important;
    background: var(--tag-date-bg) !important;
    color: var(--tag-text-color) !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    padding: 14px 10px !important;
    justify-content: center;
    text-align: center !important;
    border-bottom: 1px solid var(--border-separator) !important;
  }
  .card-table.rwd-card td:first-child::before { display: none; }

  /* 模式 5: .rwd-stack (簡單垂直堆疊) */
  .card-table.rwd-stack { display: block !important; }
  .card-table.rwd-stack thead { display: none !important; }
  .card-table.rwd-stack tbody,
  .card-table.rwd-stack tr { display: block !important; width: 100% !important; }
  
  .card-table.rwd-stack tr {
    margin-bottom: 15px !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px !important;
    background: var(--card-bg) !important;
    backdrop-filter: blur(10px);
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  }

  .card-table.rwd-stack tr:hover {
    border-color: var(--primary-blue) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  }

  .card-table.rwd-stack td {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    width: 100% !important;
    padding: 12px 15px !important;
    border: none !important;
    border-bottom: 1px solid var(--border-separator) !important;
    color: var(--text-muted) !important;
  }

  [data-theme="light"] .card-table.rwd-stack td {
    color: var(--text-main) !important;
  }

  .card-table.rwd-stack td:first-child {
    background: rgba(77, 163, 255, 0.15) !important;
    color: var(--primary-blue) !important;
    font-weight: bold !important;
    justify-content: center;
    border-bottom: 1px solid var(--border-separator) !important;
  }
  .card-table.rwd-stack td:first-child::before { display: none; }

  /* 白天模式：手機卡片改用實色背景，避免與頁面底色混在一起 */
  [data-theme="light"] .card-table.rwd-card tr,
  [data-theme="light"] .card-table.rwd-stack tr {
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
  }

  [data-theme="light"] .card-table.rwd-card tr:hover,
  [data-theme="light"] .card-table.rwd-stack tr:hover {
    background: #ffffff !important;
    border-color: rgba(0, 102, 204, 0.4) !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.16);
  }

  [data-theme="light"] .card-table.rwd-card td:first-child {
    border-bottom-color: rgba(0, 102, 204, 0.2) !important;
  }

  [data-theme="light"] .card-table.rwd-stack td:first-child {
    background: rgba(0, 102, 204, 0.1) !important;
  }
}