/* =========================================================
 * TPMA Summary Table (standalone)
 * 用於 mail-modal / summary-modal 共用的左右欄表格樣式
 * 不依賴其他外掛 CSS
 * ========================================================= */

/* ---------- CSS 變數（避免依賴其他外掛） ---------- */
:root {
  --tpma-primary-color: #2563eb;
  --tpma-primary-hover-color: #1e40af;

  --tpma-secondary-color: #6b7280;
  --tpma-secondary-hover-color: #4b5563;

  --tpma-dark-gray: #374151;
  --tpma-medium-gray: #d1d5db;
  --tpma-light-gray: #f9fafb;

  --tpma-border-color: #d1d5db;
  --tpma-danger-color: #dc2626;
  --tpma-success-color: #16a34a;
}

/* ---------- Summary Table ---------- */

.tpma-summary-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 15px 0;
  font-size: 14px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

.tpma-summary-table th,
.tpma-summary-table td {
  border-bottom: 1px solid var(--tpma-medium-gray);
  padding: 10px 12px;
  vertical-align: top;
}

/* 左欄（標題） */
.tpma-summary-table th {
  background: var(--tpma-dark-gray);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  width: 180px;
  min-width: 180px;
}

/* 右欄（內容 / 編輯區） */
.tpma-summary-table td {
  background: #fff;
  color: #111827;
  line-height: 1.6;
  white-space: normal;
}

/* 偶數列背景 */
.tpma-summary-table tbody tr:nth-child(even) td {
  background: var(--tpma-light-gray);
}

/* hover */
.tpma-summary-table tbody tr:hover td {
  background: #e6f7ff;
}

/* 最後一列去除底線 */
.tpma-summary-table tbody tr:last-child th,
.tpma-summary-table tbody tr:last-child td {
  border-bottom: none;
}

/* ---------- 表格內表單元件 ---------- */

.tpma-summary-table input,
.tpma-summary-table select,
.tpma-summary-table textarea {
  box-sizing: border-box;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid var(--tpma-border-color);
  border-radius: 4px;
}

.tpma-summary-table textarea {
  resize: vertical;
  min-height: 120px;
}

/* ---------- 預覽區 ---------- */

.tpma-mail-preview {
  background: #fefefe;
  border: 1px solid var(--tpma-medium-gray);
  border-radius: 4px;
  padding: 10px;
  min-height: 200px;
  overflow: auto;
}

/* ---------- Buttons（簡版，避免依賴 admin-common） ---------- */

.tpma-btn {
  padding: 8px 16px;
  background: var(--tpma-primary-color);
  color: #fff;
  border-radius: 8px;
  border: 1px solid var(--tpma-primary-color);
  cursor: pointer;
  font-size: 14px;
}

.tpma-btn:hover {
  background: var(--tpma-primary-hover-color);
  border-color: var(--tpma-primary-hover-color);
}

.tpma-btn.secondary {
  background: var(--tpma-secondary-color);
  border-color: var(--tpma-secondary-color);
}

.tpma-btn.secondary:hover {
  background: var(--tpma-secondary-hover-color);
  border-color: var(--tpma-secondary-hover-color);
}

/* ================================
 * Grid Table Adapter for Summary
 * ================================ */

.tpma-grid-table {
  display: block;
}

.tpma-grid-row {
  display: grid;
  grid-template-columns: 180px 1fr;
}

.tpma-grid-th,
.tpma-grid-td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--tpma-medium-gray);
}

/* 左欄（等同 th） */
.tpma-grid-th {
  background: var(--tpma-dark-gray);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}

/* 右欄（等同 td） */
.tpma-grid-td {
  background: #fff;
  color: #111827;
  line-height: 1.6;
}

/* 偶數列 */
.tpma-grid-row:nth-child(even) .tpma-grid-td {
  background: var(--tpma-light-gray);
}

/* hover */
.tpma-grid-row:hover .tpma-grid-td {
  background: #e6f7ff;
}

/* 最後一列 */
.tpma-grid-row:last-child .tpma-grid-th,
.tpma-grid-row:last-child .tpma-grid-td {
  border-bottom: none;
}