/* ====== 卡片外觀 ====== */

.card-panel {
  border-radius: 10px;
  border: 1px solid #e1e1e1;
  background: #fff;
  box-shadow: 0 5px 10px rgba(0,0,0,0.12);
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* hover 浮起效果 */
.card-panel:hover {
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
  transform: translateY(-6px);
  border-color: #ccc;
}

/* 卡片容器（每列等高） */
.card-col {
  display: flex;
}
.card-col > .panel {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 讓每列自動等高 */
.card-col {
  display: flex;
  align-items: stretch;
  padding: 0 8px 16px;
}

/* 卡片內文 */
.card-panel .panel-body {
  padding: 15px;
  flex: 1;   /* 撐滿剩餘空間 */
}
.card-content {
  margin-top: 10px;
  font-size: 13px;
  color: #444;
  flex-grow: 1;
}

/* 員工照片樣式 */
.emp-photo {
  border-radius: 5%;
  border: 1px solid #ccc;
  width: 100px;
  height: 100px;
  object-fit: cover;
}

/* 卡片標題或名字字體 */
.card-panel .fw-semibold {
  font-weight: 600;
  font-size: 14px;
  color: #222;
}

/* ====== footer 工具列 ====== */
.panel-footer.toolbar {
  background: #f5f5f5;         /* 灰底 */
  border-top: 1px solid #e6e6e6;
  padding: 6px 10px;
  text-align: right;             /* 靠右對齊 */
  width:100%;
}

/* 工具按鈕 */
.panel-footer.toolbar a,
.panel-footer.toolbar button {
  display: inline-block;
  margin-left: 8px;
  line-height: 1;
  vertical-align: middle;
}

/* 工具圖示 */
.panel-footer.toolbar img {
  height: 18px;
  width: auto;
  opacity: .85;
  transition: opacity 0.2s ease;
}
.panel-footer.toolbar img:hover {
  opacity: 1;
}



/* 列：flex 容器 */
.row.card-list{
  display:flex; flex-wrap:wrap; align-items:stretch;
  margin-left:-10px; margin-right:-10px;
}

/* 欄：預設手機 1 欄（100%） */
.card-list .card-col{
  padding:0 10px 16px;
  display:flex;
  flex:0 0 100%;
  max-width:100%;
}

/* ≥768px：每列 2 張 */
@media (min-width:768px){
  .card-list .card-col{ flex:0 0 50%; max-width:50%; }
}

/* ≥992px：每列 4 張 */
@media (min-width:992px){
  .card-list .card-col{ flex:0 0 33%; max-width:33%; }
}

/* 讓 panel 等高，footer 貼底 */
.card-list .card-col > .panel{ flex:1; display:flex; flex-direction:column; }




/* ====== 細節修飾 ====== */

/* 名字與文字 */
.card-head p {
  margin-bottom: 5px;
}

/* 清單樣式微調 */
.card-head ul {
  padding-left: 18px;
  margin-bottom: 0;
}
/* 右側圖示容器 */
.position-relative {
  position: relative;
}

/* 當右上角有標章或圖示時 */
.position-relative .status-badge {
  position: absolute;
  top: 5px;
  right: 8px;
  background: #dc3545;
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: bold;
}

.score-80 {
  font: 900 60px/1 "Segoe UI", Arial, sans-serif;
  color:#3669f5;                         /* 主色(玫紅) */
  position: relative;
  text-shadow:
    0 12px 22px rgba(0,0,0,.28),         /* 外部柔影 */
    0 2px 0 #0b0b0b,                     /* 立體邊緣1 */
    0 4px 0 #0a0a0a,                     /* 立體邊緣2 */
    0 6px 0 #c4bcbe;                     /* 立體邊緣3 */
}
.score-70 {
  font: 900 60px/1 "Segoe UI", Arial, sans-serif;
  color:#737374;                         /* 主色(玫紅) */
  position: relative;
  text-shadow:
    0 12px 22px rgba(0,0,0,.28),         /* 外部柔影 */
    0 2px 0 #0b0b0b,                     /* 立體邊緣1 */
    0 4px 0 #0a0a0a,                     /* 立體邊緣2 */
    0 6px 0 #c4bcbe;                     /* 立體邊緣3 */
}
.score-60 {
  font: 900 60px/1 "Segoe UI", Arial, sans-serif;
  color:#ec3838;                         /* 主色(玫紅) */
  position: relative;
  text-shadow:
    0 12px 22px rgba(0,0,0,.28),         /* 外部柔影 */
    0 2px 0 #0b0b0b,                     /* 立體邊緣1 */
    0 4px 0 #0a0a0a,                     /* 立體邊緣2 */
    0 6px 0 #c4bcbe;                     /* 立體邊緣3 */
}

/* 預設用 flex 等高 */
.row.card-list {
  margin: 0 -8px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}