:root{
  --tpma-primary-color:#007BFF;
  --tpma-primary-hover-color:#0056b3;
  --tpma-secondary-color:#6c757d;
  --tpma-secondary-hover-color:#5a6268;
  --tpma-success-color:#28a745;
  --tpma-danger-color:#dc3545;
  --tpma-danger-hover-color:#c82333;
  --tpma-warning-color:#ffc107;
  --tpma-info-color:#17a2b8;
  --tpma-light-gray:#f8f9fa;
  --tpma-medium-gray:#e9ecef;
  --tpma-dark-gray:#343a40;
  --tpma-border-color:#ced4da;
}

/* ===== 基礎外框（admin） ===== */
.tpma-wrap{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:14px;
  max-width:1200px;
  margin:20px auto;
  padding:20px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.05);
}
body{ background:#f4f6f9; }

/* ===== Buttons ===== */
.tpma-btn{
  padding:8px 16px;
  font-size:14px;
  cursor:pointer;
  margin:0 6px 6px 0;
  border-radius:8px;
  border:1px solid var(--tpma-primary-color);
  background:var(--tpma-primary-color);
  color:#fff;
  transition:background-color .2s ease,border-color .2s ease,transform .1s ease,box-shadow .2s ease;
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
}
.tpma-btn:hover{
  background:var(--tpma-primary-hover-color);
  border-color:var(--tpma-primary-hover-color);
  transform:translateY(-1px);
  box-shadow:0 4px 8px rgba(0,0,0,0.15);
}
.tpma-btn:active{
  transform:translateY(0);
  box-shadow:0 1px 2px rgba(0,0,0,0.1);
}
.tpma-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.tpma-btn-secondary,.tpma-btn.secondary{
  background:var(--tpma-secondary-color);
  border-color:var(--tpma-secondary-color);
  color:#fff;
}
.tpma-btn-secondary:hover,.tpma-btn.secondary:hover{
  background:var(--tpma-medium-gray);
  border-color:var(--tpma-secondary-hover-color);
  color:var(--tpma-secondary-hover-color);
}
.tpma-btn-danger,.tpma-btn.danger{
  background:var(--tpma-danger-color);
  border-color:var(--tpma-danger-color);
  color:#fff;
}
.tpma-btn-danger:hover,.tpma-btn.danger:hover{
  background:var(--tpma-danger-hover-color);
  border-color:var(--tpma-danger-hover-color);
}

/* ===== Filter rows (admin) ===== */
.tpma-filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:20px;
  align-items:center;
  padding:15px;
  background:var(--tpma-light-gray);
  border:1px solid var(--tpma-medium-gray);
  border-radius:8px;
  box-shadow:0 2px 5px rgba(0,0,0,0.05);
}
.tpma-filter-row input[type="text"],
.tpma-filter-row input[type="date"],
.tpma-filter-row input[type="number"],
.tpma-filter-row select{
  padding:10px 12px;
  font-size:14px;
  border:1px solid var(--tpma-border-color);
  border-radius:4px;
  box-sizing:border-box;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.tpma-filter-row input[type="text"]:focus,
.tpma-filter-row input[type="date"]:focus,
.tpma-filter-row input[type="number"]:focus,
.tpma-filter-row select:focus{
  border-color:var(--tpma-primary-color);
  box-shadow:0 0 0 .2rem rgba(0,123,255,.25);
  outline:none;
}
.tpma-filter-row input[type="text"]{ flex-grow:1; min-width:200px; }

/* ===== Header dropdown menus (shared: admin + list) ===== */
.tpma-th-inner{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:space-between;
}
.tpma-th-title{ white-space:nowrap; }
.tpma-th-menu-btn{
  border:1px solid var(--tpma-border-color);
  background:#fff;
  cursor:pointer;
  font-size:12px;
  padding:4px 6px;
  border-radius:4px;
  line-height:1.2;
  color:var(--tpma-secondary-color);
  transition:background-color .2s ease,border-color .2s ease;
}
.tpma-th-menu-btn:hover{ background:var(--tpma-medium-gray); }
.tpma-th-menu-btn.tpma-filter-active{
  background:var(--tpma-primary-color);
  border-color:var(--tpma-primary-color);
  color:#fff;
}
.tpma-th-menu{
  position:absolute;
  top:100%;
  left:0;
  background:#fff;
  border:1px solid #adb5bd;
  padding:15px;
  z-index:100;
  min-width:260px;
  display:none;
  box-shadow:0 6px 18px rgba(0,0,0,.2);
  border-radius:5px;
  white-space:normal;
}
.tpma-th-menu.open{ display:block; }
.tpma-th-menu h4{
  margin:0 0 10px;
  font-size:14px;
  color:var(--tpma-dark-gray);
  font-weight:600;
}
.tpma-th-menu .tpma-menu-section{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--tpma-medium-gray);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.tpma-th-menu .tpma-menu-section:first-child{
  margin-top:0;
  padding-top:0;
  border-top:none;
}
.tpma-th-menu label{
  display:flex;
  align-items:center;
  font-size:13px;
  margin:0;
  padding:6px 8px;
  border-radius:4px;
  cursor:pointer;
  transition:background-color .15s ease;
  flex-wrap:wrap;
}
.tpma-th-menu label:hover{ background:var(--tpma-light-gray); }
.tpma-th-menu input[type="date"],
.tpma-th-menu input[type="text"],
.tpma-th-menu select{
  box-sizing:border-box;
  font-size:13px;
  padding:6px 8px;
  border:1px solid var(--tpma-border-color);
  border-radius:4px;
  width:100%;
  margin-top:4px;
}
.tpma-th-menu-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:10px;
}
.tpma-th-menu-actions .tpma-btn{
  flex:1;
  min-width:0;
  margin:0;
}

/* ===== Shared helper UI ===== */
.tpma-loading-row,
.tpma-empty-row{
  text-align:center;
  color:var(--tpma-secondary-color);
  padding:15px;
}
.tpma-error{ color:var(--tpma-danger-color); font-size:12px; margin-top:4px; }
.tpma-invalid{ border-color:var(--tpma-danger-color)!important; background:#fff5f5; }
.tpma-seq-col{ text-align:right; width:40px; }

/* Universal cell wrapper */
.tpma-cell-wrap{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  word-break:break-all;
  line-height:1.4;
  min-height:24px;
  padding:0;
}

/* ===== Status pills (shared) ===== */
.tpma-status-icons{
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-start;
}
.tpma-status-pill{
  display:inline-block;
  padding:2px 8px;
  border-radius:12px;
  font-size:11px;
  line-height:1.2;
  white-space:nowrap;
  border:1px solid transparent;
  font-weight:500;
}
.tpma-status-pill-g1-pending   { background:#fff3cd; border-color:#ffeeba; color:#856404; }
.tpma-status-pill-g1-verifying { background:#ffe6b3; border-color:#ffcc80; color:#856404; }
.tpma-status-pill-g1-paid      { background:#d4edda; border-color:#c3e6cb; color:#155724; }
.tpma-status-pill-g1-cert      { background:#d1ecf1; border-color:#bee5eb; color:#0c5460; }
.tpma-status-pill-g1-completed { background:#e2e3e5; border-color:#d6d8db; color:#383d41; }
.tpma-status-pill-g1-cancelled { background:#f8d7da; border-color:#f5c6cb; color:#721c24; }

.tpma-status-pill-g2-pending { background:#f0f0f0; border-color:#d6d8db; color:#383d41; }
.tpma-status-pill-g2-opened  { background:#e2f0ff; border-color:#b3d4ff; color:#004085; }
.tpma-status-pill-g2-sent    { background:#d4edda; border-color:#c3e6cb; color:#155724; }

.tpma-status-pill-g3-notyet { background:#fff3cd; border-color:#ffeeba; color:#856404; }
.tpma-status-pill-g3-done   { background:#d4edda; border-color:#c3e6cb; color:#155724; }

#tpma-btn-clear-status-all,
#tpma-btn-clear-payment-status{
  margin-top:8px;
  width:100%;
  box-sizing:border-box;
}

/* ===== Pagination (admin) ===== */
.tpma-pagination{
  margin-top:20px;
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:flex-end;
  font-size:14px;
}
.tpma-pagination-info{ white-space:nowrap; color:var(--tpma-dark-gray); }
.tpma-pagination .tpma-btn{ padding:6px 14px; font-size:14px; margin:0; }

/* ===== Modal (admin) ===== */
.tpma-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  display:none;
  z-index:9998;
  opacity:0;
  transition:opacity .3s ease;
}
.tpma-modal-backdrop.open{
  display:block;
  opacity:1;
  width:100%;
}
.tpma-modal{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(.95);
  background:#fff;
  border-radius:8px;
  box-shadow:0 8px 25px rgba(0,0,0,.3);
  width:90%;
  height:85%;
  z-index:9999;
  display:flex;
  flex-direction:column;
  opacity:0;
  transition:opacity .3s ease,transform .3s ease;
}
.tpma-modal.open{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
.tpma-modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 20px;
  background:var(--tpma-primary-color);
  color:#fff;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
}
.tpma-modal-header h3{ margin:0; font-size:18px; font-weight:600; }
.tpma-modal-close-btn{
  background:none;
  border:none;
  color:#fff;
  font-size:24px;
  cursor:pointer;
  line-height:1;
  padding:0;
  transition:color .2s ease;
}
.tpma-modal-close-btn:hover{ color:rgba(255,255,255,.8); }
.tpma-modal-content{
  padding:20px;
  flex-grow:1;
  overflow-y:auto;
}
.tpma-modal-content label{
  display:block;
  margin-top:12px;
  margin-bottom:4px;
  font-weight:600;
  color:var(--tpma-dark-gray);
}
.tpma-modal-content input[type="text"],
.tpma-modal-content input[type="number"],
.tpma-modal-content textarea,
.tpma-modal-content select{
  width:100%;
  padding:10px 12px;
  box-sizing:border-box;
  font-size:14px;
  border:1px solid var(--tpma-border-color);
  border-radius:4px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.tpma-modal-content input:focus,
.tpma-modal-content textarea:focus,
.tpma-modal-content select:focus{
  border-color:var(--tpma-primary-color);
  box-shadow:0 0 0 .2rem rgba(0,123,255,.25);
  outline:none;
}
.tpma-modal-footer{
  padding:15px 20px;
  border-top:1px solid var(--tpma-medium-gray);
  text-align:right;
  background:var(--tpma-light-gray);
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
}
.tpma-modal-footer .tpma-btn{ margin-left:10px; }

/* =========================================================
 * Shared Grid Table (admin only)
 * - scope 限定在 .tpma-course-grid / .tpma-reg-grid
 * ========================================================= */
.tpma-course-grid,
.tpma-reg-grid,
.tpma-list-grid{
  width:100%;
  margin-top:20px;
  border-radius:8px;
  box-shadow:0 4px 8px rgba(0,0,0,0.08);
  overflow:visible; /* dropdown 不被裁切 */
  background:#fff;
}

.tpma-course-grid-header,
.tpma-reg-grid-header,
.tpma-reg-list-header{
  background:var(--tpma-dark-gray);
  color:#fff;
  font-size:16px;
  font-weight:600;
  text-transform:uppercase;
  border-bottom:1px solid var(--tpma-medium-gray);
  border-top-left-radius:8px;
  border-top-right-radius:8px;
}

/* th/cell */
.tpma-course-grid .tpma-course-grid-th,
.tpma-reg-grid .tpma-reg-grid-th,
.tpma-list-grid .tpma-list-grid-th{
  padding:10px 8px;
  border-right:1px solid rgba(255,255,255,0.08);
  position:relative;
  display:flex;
  align-items:center;
  min-height:44px;
  justify-content:space-between;
}
.tpma-course-grid .tpma-course-grid-th:last-child,
.tpma-reg-grid .tpma-reg-grid-th:last-child,
.tpma-list-grid .tpma-list-grid-th:last-child{ 
  border-right:none;
 }

.tpma-course-grid .tpma-course-grid-body,
.tpma-reg-grid .tpma-reg-grid-body{ background:#fff; }

/* cards */
.tpma-course-grid .tpma-course-card,
.tpma-reg-grid .tpma-reg-card{
  border-bottom:1px solid var(--tpma-medium-gray);
}
.tpma-course-grid .tpma-course-card:nth-child(even) .tpma-course-card-summary,
.tpma-reg-grid .tpma-reg-card:nth-child(even) .tpma-reg-card-summary{
  background:var(--tpma-light-gray);
}
.tpma-course-grid .tpma-course-card:hover .tpma-course-card-summary,
.tpma-reg-grid .tpma-reg-card:hover .tpma-reg-card-summary{
  background:#e6f7ff;
}

.tpma-course-grid .tpma-course-card-summary,
.tpma-reg-grid .tpma-reg-card-summary{ padding:0; }

.tpma-course-grid .tpma-course-cell,
.tpma-reg-grid .tpma-reg-cell{
  padding:10px 8px;
  display:flex;
  align-items:center;
  min-height:44px;
}

.tpma-course-grid .tpma-course-card-details,
.tpma-reg-grid .tpma-reg-card-details{
  display:none;
  padding:12px 10px 16px;
  background:#fff;
}
.tpma-course-grid .tpma-course-card-details.open,
.tpma-reg-grid .tpma-reg-card-details.open{ display:block; }

/* RWD (admin grid) */
@media (max-width: 900px){
  .tpma-course-grid-header,
  .tpma-reg-grid-header,
  .tpma-reg-list-header{ display:none; }

  .tpma-course-grid .tpma-course-card-summary,
  .tpma-reg-grid .tpma-reg-card-summary{
    display:flex !important;
    flex-direction:column;
  }

  .tpma-course-grid .tpma-course-cell,
  .tpma-reg-grid .tpma-reg-cell{
    align-items:flex-start;
    gap:10px;
    padding:12px 12px;
    min-height:auto;
    border-bottom:1px dashed var(--tpma-medium-gray);
  }
  .tpma-course-grid .tpma-course-card-summary .tpma-course-cell:last-child,
  .tpma-reg-grid .tpma-reg-card-summary .tpma-reg-cell:last-child{ border-bottom:none; }

  .tpma-course-grid .tpma-course-card-summary .tpma-course-cell::before,
  .tpma-reg-grid .tpma-reg-card-summary .tpma-reg-cell::before{
    flex:0 0 96px;
    font-weight:700;
    color:var(--tpma-secondary-color);
    line-height:1.4;
  }

  /* course labels */
  .tpma-course-grid .tpma-course-card-summary .tpma-course-cell:nth-child(1)::before{ content:"代碼"; }
  .tpma-course-grid .tpma-course-card-summary .tpma-course-cell:nth-child(2)::before{ content:"課程"; }
  .tpma-course-grid .tpma-course-card-summary .tpma-course-cell:nth-child(3)::before{ content:"講師"; }
  .tpma-course-grid .tpma-course-card-summary .tpma-course-cell:nth-child(4)::before{ content:"類別"; }
  .tpma-course-grid .tpma-course-card-summary .tpma-course-cell:nth-child(5)::before{ content:"操作"; }

  /* reg labels */
  .tpma-reg-grid .tpma-reg-card-summary .tpma-reg-cell:nth-child(1)::before{ content:"選取"; }
  .tpma-reg-grid .tpma-reg-card-summary .tpma-reg-cell:nth-child(2)::before{ content:"序號"; }
  .tpma-reg-grid .tpma-reg-card-summary .tpma-reg-cell:nth-child(3)::before{ content:"報名編號"; }
  .tpma-reg-grid .tpma-reg-card-summary .tpma-reg-cell:nth-child(4)::before{ content:"課程/場次"; }
  .tpma-reg-grid .tpma-reg-card-summary .tpma-reg-cell:nth-child(5)::before{ content:"公司"; }
  .tpma-reg-grid .tpma-reg-card-summary .tpma-reg-cell:nth-child(6)::before{ content:"承辦人"; }
  .tpma-reg-grid .tpma-reg-card-summary .tpma-reg-cell:nth-child(7)::before{ content:"Email"; }
  .tpma-reg-grid .tpma-reg-card-summary .tpma-reg-cell:nth-child(8)::before{ content:"狀態"; }
  .tpma-reg-grid .tpma-reg-card-summary .tpma-reg-cell:nth-child(9)::before{ content:"操作"; }

  .tpma-course-grid .tpma-course-card-summary .tpma-course-cell:nth-child(5) .tpma-btn,
  .tpma-reg-grid .tpma-reg-card-summary .tpma-reg-cell:nth-child(9) .tpma-btn{
    width:100%;
    box-sizing:border-box;
    justify-content:center;
  }
}


/* ===============================
 * Tailwind utility fallbacks
 *（render.js 仍在使用，去 Tailwind 後需補上）
 * =============================== */
.flex{display:flex;}
.items-center{align-items:center;}
.justify-end{justify-content:flex-end;}
.flex-grow{flex:1 1 auto;}

.gap-2{gap:0.5rem;}
.gap-3{gap:0.75rem;}

.mt-4{margin-top:1rem;}
.mb-4{margin-bottom:1rem;}

.pb-2{padding-bottom:0.5rem;}

.border-b{border-bottom:1px solid var(--tpma-medium-gray);}

.text-xl{font-size:1.25rem; line-height:1.75rem;}
.font-semibold{font-weight:600;}

.col-span-full{grid-column:1 / -1;}


/* 修復 Grid 模式下的詳情面板樣式 */

/* 1. 確保詳情容器有足夠的內距 */
.tpma-reg-card-details, 
.tpma-course-card-details {
    padding: 20px !important;
    background-color: #fcfcfc !important; /* 淺灰色底色區分區塊 */
    border-top: 2px solid var(--tpma-primary-color) !important;
}

/* 2. 標題樣式 */
.tpma-reg-detail-container h2 {
    color: var(--tpma-dark-gray);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--tpma-medium-gray);
}

/* 3. 詳情區塊卡片化 (Grid 設定) */
.tpma-reg-detail-section {
    background-color: #ffffff !important;
    border: 1px solid var(--tpma-border-color) !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    
    /* 這裡處理 Grid 佈局 */
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; 
    gap: 20px !important;
}

/* 4. 欄位標籤樣式 */
.tpma-detail-field {
    display: flex;
    flex-direction: column;
}

.tpma-detail-field label {
    font-weight: 700 !important;
    color: var(--tpma-secondary-color) !important;
    margin-bottom: 6px !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 5. 數值樣式 */
.tpma-detail-field .value {
    padding: 8px 0;
    border-bottom: 1px dashed var(--tpma-medium-gray);
    color: #333;
    font-size: 14px;
    word-break: break-all;
    line-height: 1.6;
}

/* 6. 處理跨欄位的項目 (如課程簡介、大綱) */
.col-span-full {
    grid-column: 1 / -1 !important;
}

/* 7. 針對清單樣式的優化 (大綱、日期) */
.tpma-outline-view ol, 
.tpma-course-dates ul {
    margin: 8px 0 0 20px;
    padding: 0;
}

.tpma-outline-view li, 
.tpma-course-dates li {
    margin-bottom: 5px;
    color: #444;
}

/* 8. 按鈕區塊樣式 */
.tpma-reg-detail-actions {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--tpma-medium-gray);
    display: flex;
    justify-content: flex-end;
}