/* ==========================
 * list-public (page only)
 * 依賴 admin-common.css 提供：:root / tpma-btn / tpma-th-menu / loading-row
 * ========================== */

.tpma-course-list{
  background: var(--tpma-light-gray);
  padding:20px;
}
.tpma-course-list-wrap{ max-width:1100px; }

.tpma-course-list-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.tpma-course-list-header h1{
  font-size:18px;
  margin:0;
  color:var(--tpma-dark-gray);
}
.tpma-status{
  font-size:13px;
  color:var(--tpma-secondary-color);
}

/* 篩選器 */
.tpma-course-filters{
  display:flex;
  gap:10px;
  margin-bottom:20px;
  flex-wrap:wrap;
}
.tpma-filter-item{
  position:relative;
  flex:1;
  min-width:150px;
}

/* list grid 欄位比例（list 專用，不跟 admin grid 混用） */
.tpma-list-grid-layout{
  display:grid;
  grid-template-columns: 1fr 3fr 1fr 1.2fr;
  align-items:center;
  gap:0;
}

/* 模擬表頭 */
.tpma-list-header{
  background:var(--tpma-dark-gray);
  color:#fff;
  font-weight:600;
  text-transform:uppercase;
  font-size:13px;
  padding:12px 16px;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
  box-shadow:0 4px 8px rgba(0,0,0,0.08);
}
.tpma-list-header-item{ padding:5px 0; }

/* 列表容器 */
#tpma-course-list-container{
  display:grid;
  gap:0;
  margin-bottom:20px;
  border-left:1px solid var(--tpma-border-color);
  border-right:1px solid var(--tpma-border-color);
  border-bottom:1px solid var(--tpma-border-color);
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
  overflow:hidden; /* list 的圓角需要裁切；這裡沒有 header dropdown */
}

/* PC：每列像表格 */
.tpma-course-card{
  display:contents;
}
.tpma-course-card:nth-child(even) .tpma-card-summary{ background:var(--tpma-light-gray); }
.tpma-course-card:hover .tpma-card-summary{ background:#e6f7ff; }

.tpma-card-summary{
  padding:12px 16px;
  font-size:14px;
  color:#333;
  border-bottom:1px solid var(--tpma-medium-gray);
}
.tpma-course-card:last-child .tpma-card-summary{ border-bottom:none; }

.tpma-card-summary > div{ padding:0; }
.tpma-card-summary .tpma-course-time{
  font-weight:bold;
  color:var(--tpma-primary-color);
}
.tpma-card-summary .tpma-course-name{
  font-weight:bold;
  font-size:15px;
  color:var(--tpma-dark-gray);
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.tpma-card-summary .tpma-course-lecturer{ color:var(--tpma-secondary-color); }

.tpma-card-summary .tpma-actions{
  text-align:right;
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
.tpma-card-summary .tpma-btn{ margin:0; }

/* 詳細按鈕 */
.tpma-btn-details{
  background:var(--tpma-secondary-color);
  border-color:var(--tpma-secondary-color);
}
.tpma-btn-details:hover{
  background:var(--tpma-secondary-hover-color);
  border-color:var(--tpma-secondary-hover-color);
}

/* 詳細內容 */
.tpma-card-details{
  display:none;
  grid-column:1 / -1;
  padding:20px;
  background:var(--tpma-light-gray);
  border-top:1px solid var(--tpma-border-color);
}
.tpma-course-card.is-open .tpma-card-details{ display:block; }

.tpma-details-header h3{
  font-size:18px;
  margin-top:0;
  margin-bottom:15px;
  color:var(--tpma-dark-gray);
}
.tpma-details-meta > div{
  margin-bottom:8px;
  font-size:14px;
}
.tpma-details-meta strong{ color:var(--tpma-dark-gray); }

.tpma-details-section{ margin-top:20px; }
.tpma-details-section h4{
  font-size:16px;
  margin-bottom:10px;
  color:var(--tpma-dark-gray);
  border-bottom:1px solid var(--tpma-border-color);
  padding-bottom:5px;
}

.tpma-md-content{
  background:#fff;
  border:1px solid var(--tpma-border-color);
  padding:15px;
  border-radius:4px;
  margin-top:10px;
  margin-bottom:15px;
  font-size:14px;
  line-height:1.7;
  color:#333;
}
.tpma-md-content p:last-child{ margin-bottom:0; }

.tpma-details-actions{
  text-align:right;
  margin-top:20px;
}
.tpma-details-actions .tpma-btn{ min-width:120px; }

.tpma-course-tag{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  line-height:1.2;
  border:1px solid transparent;
  white-space:nowrap;
}
.tpma-course-tag.tpma-tag-confirmed{
  color:var(--tpma-success-color);
  background:rgba(40, 167, 69, 0.12);
  border-color:rgba(40, 167, 69, 0.35);
}
.tpma-course-tag.tpma-tag-open{
  color:#8a5b00;
  background:rgba(255, 193, 7, 0.18);
  border-color:rgba(255, 193, 7, 0.45);
}

/* RWD */
@media (max-width: 768px){
  .tpma-course-list{ padding:10px; }
  .tpma-course-filters{ flex-direction:column; }
  .tpma-filter-item{ min-width:unset; width:100%; }
  .tpma-hide-on-mobile-block{ display:none; }

  .tpma-list-header{ display:none; }

  #tpma-course-list-container{
    display:flex;
    flex-direction:column;
    gap:20px;
    border:none;
    border-radius:0;
    overflow:visible;
  }

  .tpma-course-card{
    display:block;
    border:1px solid var(--tpma-border-color);
    box-shadow:0 2px 8px rgba(0,0,0,0.05);
    border-radius:8px;
    background:#fff;
  }

  .tpma-card-summary{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding:20px;
    border-bottom:1px solid var(--tpma-border-color);
  }

  .tpma-card-summary .tpma-actions{
    text-align:left;
    margin-top:10px;
    width:100%;
    justify-content:flex-start;
  }

  .tpma-card-summary .tpma-btn-details{
    margin-left:0;
    width:100%;
    box-sizing:border-box;
  }

  .tpma-card-summary .tpma-btn-reg{ display:none; }

  .tpma-card-details{ padding:15px; }

  .tpma-details-header h3{ font-size:16px; }
  .tpma-details-section h4{ font-size:14px; }
  .tpma-md-content{ padding:10px; font-size:13px; }

  .tpma-details-actions{ text-align:center; }
  .tpma-details-actions .tpma-btn{ width:100%; }

  .tpma-course-time::before{ content:"📅 "; }
  .tpma-course-lecturer::before{ content:"👤 講師："; font-weight:600; }
}