/* static/css/card.css */
:root {
  --color-bg: #ffffff;
  --color-primary: #3498db;
  --color-border: #e0e0e0;
  --color-text: #333333;
  --color-title: #2c3e50;
  --color-content: #555555;
  --color-active-link: red;
  --color_button: #007bff;
  --radius: 12px;
  --shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/*包住這個卡片的容器無邊框、無 padding*/
.no-container-padding {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* 全站套用盒模型設定，讓所有元素包含 padding 和 border 在寬高內 */
/* 確保 .card 的寬度和高度設定，不會因為 padding/border 多出額外尺寸 */
*,
*::before,
*::after {
  box-sizing: border-box; /*寬度包含 padding 和 border，比較容易控制整體尺寸*/
}

/* 🔖 卡片基本樣式 */
.card {
  min-height: 200px;          /* 如果你要保留卡片的最小高度 */
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 15px;
  color: var(--color-text);
  font-family: "Noto Sans TC", sans-serif;
  transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

/* ✨ 卡片內容內距（讓 .no-padding 可分離控制） */
.card-body {
  padding: 20px;
}

/* ✅ 讓卡片置中顯示（區塊元素） 讓卡片水平置中在頁面或欄位中 */
.card-center {
  margin-left: auto;
  margin-right: auto;
}

/*同時上下置中，在外層加這個 .card-wrapper*/
.card-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* 視需要指定高度 */
}

/* 🔁 支援 flex 比例排版 */
.card-flex {
  display: flex;
  align-items: stretch;
}

/*flex-row為左右排列*/
.flex-row {
  flex-direction: row;
}

/*flex-column （預設）為上下排列*/
.flex-column {
  flex-direction: column;
}

/* 🧲 滑鼠懸浮效果：放大與陰影加強 */
/* 卡片懸浮時，同步放大圖片 */
.card:hover .card-img {
  transform: scale(1.02);
  box-shadow: var(--shadow-hover);
}

/* 🎯 卡片標題 */
.card-title {
  color: var(--color-title);
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 10px;
}

/* 📜 卡片內文 */
.card-content {
  color: var(--color-content);
  font-size: 1rem;
  line-height: 1.6;
}

/* 🌓 深色模式樣式 */
.card-dark {
  --color-bg: #1e1e1e;
  --color-border: #444;
  --color-text: #dddddd;
  --color-title: #ffffff;
  --color-content: #bbbbbb;
}

.card-image {
  margin-bottom: 15px;
  text-align: center;
}

/* ⬛️ 當圖片設定為 full_width 時，圖片容器撐滿卡片寬度 */
.card-image-full {
  width: 100%;
  margin-bottom: 0;  /* 避免圖片與內容之間多餘空隙 */
  display: block;
}

/* 🖼️ 圖片樣式：支援圓角與動畫 */
.card-img {
  width: 100%; 
  object-fit: cover;
  border-radius: var(--radius);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 🧲 卡片懸浮時，圖片跟著放大（主控制） */
.card:hover .card-img {
  transform: scale(1.02);
  box-shadow: var(--shadow-hover);
}

/* ✅ 若圖片有連結（點整張卡片）時，顯示手型 */
.img-clickable {
  cursor: pointer;
}

/* ✅ hover 放大效果（由 hover=True 控制） */
.img-hover:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-hover);
}

/* 懸浮時圖片放大(備援：圖片 hover 動畫) */
.card-img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* 📏 自訂尺寸圖片（由 JS 設定 width/height） 
JS 在 DOMContentLoaded 時會用 img.dataset.width/height 實際設置。 */
.custom-size {
  width: auto; /* 預設由 JS 設定寬度 */
  height: auto;
}


/* 🧱 多欄排版容器 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

/*支援整張卡片可點擊（當傳入 url）
讓整張卡片有點擊感，滑鼠變手型。*/
.card[onclick] {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.card[onclick]:hover {
  transform: scale(1.01);
}


/* 🎨 主題色：藍色背景 */
.theme-primary {
    background-color: #f9f9f9 /* #e3f2fd; */
}

/* ⚠️ 主題色：黃色背景 */
.theme-warning {
    background-color: #fff3cd;
}


/* 🔘 卡片內按鈕 */
.card-button {
    display: inline-block;
    padding: 8px 16px;
    background-color: var(--color_button);
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;   
    transition: background-color 0.3s ease, transform 0.2s ease; /*縮放或光影*/
}

.card-button:hover {
    background-color: #0056b3;
    transform: scale(1.03);
}


/* 取消邊框 */
.no-border {
    border: none !important;
}

/* 取消卡片 hover 放大效果 */
/* 🧩 停用卡片整體 hover 效果（例如在某些不想要動畫的情境） */
.no-hover:hover {
    transform: none !important;
    box-shadow: var(--shadow); /* 保留原始陰影 */
}

.no-hover:hover .card-img {
    transform: none !important;
    box-shadow: none !important;
}


/* 🧩 選擇性：取消卡片內距，內容撐滿整個卡片寬度 */
.no-padding {
  padding: 0 !important;
}

/* 🧩 若卡片使用 no-padding，取消底部圓角（避免圓角留白） */
.no-padding .card-img {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/*✅ 修正圖片超出圓角問題 確保無論圖片是否有誤差，不會超出卡片底部圓角的邊界*/
.no-padding .card-image {
  overflow: hidden;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}


/* Modal 燈箱樣式 */
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  padding-top: 60px;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
  margin: auto;
  display: block;
  max-width: 80%;
  max-height: 80vh;
  border-radius: var(--radius);
}

.modal-close {
  position: absolute;
  top: 30px;
  right: 35px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1000;
}

.modal-close:hover {
  color: #ccc;
}


.earnings-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 0.9em;
}

.earnings-table th, .earnings-table td {
    border: 1px solid #ccc;
    padding: 8px 12px;
    text-align: center;
}

.earnings-table th {
    background-color: #4d8ca2;
    color: white;
}

.btn-download {
    display: inline-block;
    border: 1px solid #4d8ca2;
    border-radius: 8px;
    padding: 5px 10px;
    text-decoration: none;
    color: #4d8ca2;
    margin-right: 5px;
    font-size: 0.8em;
}

.btn-download:hover {
    background-color: #4d8ca2;
    color: white;
}