/* =============================================================
   WP Pretty Table — 表格样式
   支持响应式、5 种预设主题、自定义颜色
   ============================================================= */

/* ---------- 响应式容器 ---------- */
.wpt-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5em 0;
  border-radius: 8px;
}

/* ---------- 基础重置 ---------- */
.wpt-table {
  width: 100%;
  border-collapse: collapse;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.55;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
}

.wpt-table th,
.wpt-table td {
  padding: 12px 18px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.wpt-table td {
  white-space: normal;
  word-break: break-word;
}

/* ==========================================
   主题 1：Ocean（深蓝 / 默认）
   ========================================== */
.wpt-theme-ocean thead {
  background: linear-gradient(135deg, #1a6cf5 0%, #0a3fa8 100%);
  color: #fff;
}
.wpt-theme-ocean thead th {
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .82rem;
}
.wpt-theme-ocean tbody tr:nth-child(even) {
  background: #f0f5ff;
}
.wpt-theme-ocean tbody tr:hover {
  background: #dce8ff;
  transition: background .2s;
}
.wpt-theme-ocean td, .wpt-theme-ocean th {
  border: 1px solid #d0ddf7;
}

/* ==========================================
   主题 2：Forest（绿色自然）
   ========================================== */
.wpt-theme-forest thead {
  background: linear-gradient(135deg, #27ae60 0%, #145a32 100%);
  color: #fff;
}
.wpt-theme-forest thead th {
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .82rem;
}
.wpt-theme-forest tbody tr:nth-child(even) {
  background: #f0faf4;
}
.wpt-theme-forest tbody tr:hover {
  background: #d5f0e0;
  transition: background .2s;
}
.wpt-theme-forest td, .wpt-theme-forest th {
  border: 1px solid #b2dfcc;
}

/* ==========================================
   主题 3：Sunset（橙红渐变）
   ========================================== */
.wpt-theme-sunset thead {
  background: linear-gradient(135deg, #f7971e 0%, #d63031 100%);
  color: #fff;
}
.wpt-theme-sunset thead th {
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .82rem;
}
.wpt-theme-sunset tbody tr:nth-child(even) {
  background: #fff5ee;
}
.wpt-theme-sunset tbody tr:hover {
  background: #ffe0cc;
  transition: background .2s;
}
.wpt-theme-sunset td, .wpt-theme-sunset th {
  border: 1px solid #ffd0b0;
}

/* ==========================================
   主题 4：Midnight（深色）
   ========================================== */
.wpt-theme-midnight {
  background: #1e1e2e;
  color: #cdd6f4;
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
}
.wpt-theme-midnight thead {
  background: #181825;
}
.wpt-theme-midnight thead th {
  color: #89b4fa;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .82rem;
}
.wpt-theme-midnight tbody tr:nth-child(even) {
  background: #24243e;
}
.wpt-theme-midnight tbody tr:hover {
  background: #313244;
  transition: background .2s;
}
.wpt-theme-midnight td, .wpt-theme-midnight th {
  border: 1px solid #313244;
}

/* ==========================================
   主题 5：Minimal（极简黑白）
   ========================================== */
.wpt-theme-minimal {
  box-shadow: none;
  border: 2px solid #111;
  border-radius: 0;
}
.wpt-table-wrap:has(.wpt-theme-minimal) {
  border-radius: 0;
}
.wpt-theme-minimal thead {
  background: #111;
  color: #fff;
}
.wpt-theme-minimal thead th {
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .8rem;
}
.wpt-theme-minimal tbody tr:nth-child(even) {
  background: #f5f5f5;
}
.wpt-theme-minimal tbody tr:hover {
  background: #ececec;
  transition: background .2s;
}
.wpt-theme-minimal td, .wpt-theme-minimal th {
  border: 1px solid #ddd;
}

/* ==========================================
   自定义颜色（通过 CSS 变量注入）
   ========================================== */
.wpt-theme-custom thead {
  background: var(--wpt-header-bg, #555);
  color: var(--wpt-header-text, #fff);
}
.wpt-theme-custom thead th {
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .82rem;
}
.wpt-theme-custom tbody tr:nth-child(even) {
  background: var(--wpt-stripe-bg, #f5f5f5);
}
.wpt-theme-custom tbody tr:hover {
  filter: brightness(.96);
  transition: filter .2s;
}
.wpt-theme-custom td, .wpt-theme-custom th {
  border-bottom: 1px solid var(--wpt-border-color, #ddd);
}

/* ==========================================
   响应式：小屏幕卡片模式
   ========================================== */
@media (max-width: 600px) {
  .wpt-table-wrap {
    border-radius: 8px;
  }
  .wpt-table th,
  .wpt-table td {
    padding: 10px 12px;
    font-size: .88rem;
  }

  /* 可选：启用"堆叠"模式，加 .wpt-stack 到 table */
  .wpt-table.wpt-stack thead {
    display: none;
  }
  .wpt-table.wpt-stack tbody tr {
    display: block;
    margin-bottom: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,.1);
  }
  .wpt-table.wpt-stack tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,.07);
    white-space: normal;
  }
  .wpt-table.wpt-stack tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .6;
    margin-right: 1rem;
    flex-shrink: 0;
  }
}