@charset "UTF-8";

/* ==========================================================================
   [PK自訂樣式]
   PK-Style.css - 共用樣式元件
   此檔案包含多個頁面共用的樣式規則，避免重複定義
   使用頁面：pk-classificationt, pk-dw, pk-qa, pk-dealer, pk-wiseman, pk-wisemanContent
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Design Tokens (CSS Variables)
   -------------------------------------------------------------------------- */
:root {
  /* Brand Colors */
  --pk-primary: #005752;
  --pk-primary-hover: #004440;
  --pk-primary-light: rgba(0, 87, 82, 0.1);
  --pk-secondary: #008c78;
  
  /* State Colors */
  --pk-success: #5cb85c;
  --pk-info: #5bc0de;
  --pk-warning: #f0ad4e;
  --pk-danger: #d9534f;
  
  /* Text Colors */
  --pk-text-main: #333333;
  --pk-text-secondary: #666666;
  --pk-text-muted: #999999;
  --pk-text-light: #ffffff;
  
  /* Border & Background */
  --pk-border: #dddddd;
  --pk-border-light: #f0f0f0;
  --pk-bg-light: #f9f9f9;
  --pk-bg-white: #ffffff;
  
  /* Spacing & Layout */
  --pk-radius: 4px;
  --pk-radius-lg: 8px;
  --pk-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
  --pk-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* --------------------------------------------------------------------------
   1. Breadcrumb（麵包屑導航）
   使用於：所有頁面
   -------------------------------------------------------------------------- */
.breadcrumb {
  margin: 0;
  padding: 30px 0;
  font: 1em "微軟正黑體", "新細明體", futuramedium, "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1em;
  background: none;
}

.breadcrumb > li {
  display: inline-block;
}

.breadcrumb > li + li:before {
  padding: 0 5px;
  font-family: "bootstrap-icons";
  content: "\f285";
  font-size: 0.75em;
  color: var(--pk-text-muted);
}

.breadcrumb-link {
  text-decoration: none;
  color: var(--pk-text-muted);
  transition: color 0.2s;
}

.breadcrumb-link:hover {
  color: var(--pk-primary);
}

.breadcrumb-active {
  color: var(--pk-text-main);
}

/* --------------------------------------------------------------------------
   2. Pagination（分頁導航）
   使用於：分類頁、下載中心、問答列表等
   -------------------------------------------------------------------------- */
.pagination {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 12px 0;
  text-align: right;
  font: 0.9em "微軟正黑體", "新細明體", futuramedium, "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1em;
}

@media (min-width: 1200px) {
  .pagination {
    justify-content: flex-end;
  }
}

.pagination-icon {
  font-style: normal;
  transform: scaleY(1.5);
}

.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  line-height: 30px;
  margin: 0 3px;
  padding: 0;
  letter-spacing: -1;
  border: 1px solid var(--pk-primary);
  border-radius: 50%;
  color: var(--pk-primary);
  text-decoration: none;
  transition: all 0.2s;
}

.pagination-btn:hover, 
.pagination-btn:active, 
.pagination-btn-active {
  background: var(--pk-primary);
  border: 1px solid var(--pk-primary);
  color: var(--pk-text-light) !important;
}

/* --------------------------------------------------------------------------
   2.1 Data Grid（查詢 + 表格 + 分頁）
   使用於：後台查詢列表頁（StopOffer、ChangeItem、Demo）
   -------------------------------------------------------------------------- */
.pk-data-grid {
  border: 1px solid #d9e2e1;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 87, 82, 0.08);
  overflow: hidden;
  margin-bottom: 28px;
}

.pk-data-grid-search {
  padding: 10px 14px;
  border-bottom: 1px solid #e7eded;
  background: linear-gradient(180deg, #f5fbfa 0%, #fdfefe 100%);
}

.pk-data-grid-title {
  color: #2f4d49;
  font-weight: 600;
  margin-bottom: 6px;
  display: inline-block;
}

.pk-data-grid-search .pk-toolbar {
  margin-bottom: 0;
  padding: 4px 0 0;
  gap: 8px;
}

.pk-data-grid-search .pk-search-inline {
  max-width: 420px;
  width: 100%;
}

.pk-data-grid-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.pk-data-grid-filters .checkbox-inline {
  margin-left: 6px;
  padding-top: 0;
  color: #4b6460;
}

.pk-data-grid-filters .pk-form-control,
.pk-data-grid-filters .form-control {
  min-width: 190px;
}

.pk-data-grid-search .form-group {
  margin-right: 8px;
  margin-bottom: 4px;
}

.pk-data-grid-search .form-control {
  border-radius: 6px;
  border-color: #cfdedc;
  min-width: 180px;
}

.pk-data-grid-toolbar {
  padding: 12px 16px;
  border-bottom: 1px solid #e7eded;
  background: #fbfdfd;
}

.pk-data-grid-toolbar .btn {
  margin-left: 6px;
}

.pk-data-grid-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pk-data-grid-table .table {
  margin-bottom: 0;
  width: 100%;
}

.pk-data-grid-table .table > thead > tr > th {
  border-top: 0;
  border-bottom: 2px solid #c7d9d6;
  background: #f0f7f6;
  color: #2f4d49;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}

.pk-data-grid-table .table > tbody > tr > td {
  vertical-align: middle;
}

.pk-data-grid-table .table > tbody > tr:hover > td {
  background: #f7fbfb;
}

.pk-data-grid-actions .btn,
.pk-data-grid-actions [class^="pk-btn-"],
.pk-data-grid-actions [class*=" pk-btn-"] {
  margin-right: 4px;
  margin-bottom: 4px;
}

.pk-data-grid-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid #e7eded;
  background: #fbfdfd;
  flex-wrap: wrap;
}

.pk-data-grid-footer .pagination {
  margin: 0;
  padding: 0;
}

.pk-data-grid-empty {
  padding: 44px 20px;
  text-align: center;
  color: #6d7f7c;
}

@media (max-width: 767px) {
  .pk-data-grid-search .pk-search-inline {
    max-width: 100%;
  }

  .pk-data-grid-filters {
    align-items: flex-start;
    gap: 8px;
  }

  .pk-data-grid-search .form-group {
    display: block;
    margin-right: 0;
  }

  .pk-data-grid-search .form-control {
    width: 100%;
    min-width: 0;
  }

  .pk-data-grid-toolbar .text-right {
    text-align: left;
    margin-top: 8px;
  }

  .pk-data-grid-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --------------------------------------------------------------------------
   3. Classification Container（分類容器）
   使用於：分類相關頁面的通用容器
   -------------------------------------------------------------------------- */
.classification {
  padding: 0;
  font-family: "微軟正黑體", "新細明體", futuramedium, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* 在 #pkdv 容器內的 breadcrumb 和 pagination 樣式覆寫 */
#pkdv .breadcrumb {
  margin: 0;
  padding: 30px 0;
  font: 1em "微軟正黑體", "新細明體", futuramedium, "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1em;
  background: none;
}

#pkdv .breadcrumb > li {
  display: inline-block;
}

#pkdv ol.breadcrumb > li + li:before {
  padding: 0 5px;
  font-family: "bootstrap-icons";
  content: "\f285";
  font-size: 0.75em;
  color: var(--pk-text-muted);
}

#pkdv .breadcrumb-link {
  text-decoration: none;
  color: var(--pk-text-muted);
}

#pkdv .breadcrumb-active {
  color: var(--pk-text-main);
}

#pkdv .pagination {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 12px 0;
  text-align: right;
  font: 0.9em "微軟正黑體", "新細明體", futuramedium, "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1em;
}

@media (min-width: 1200px) {
  #pkdv .pagination {
    justify-content: flex-end;
  }
}

#pkdv .pagination-icon {
  font-style: normal;
  transform: scaleY(1.5);
}

#pkdv .pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  line-height: 30px;
  margin: 0 3px;
  padding: 0;
  letter-spacing: -1;
  border: 1px solid var(--pk-primary);
  border-radius: 50%;
  color: var(--pk-primary);
  text-decoration: none;
}

#pkdv .pagination-btn:hover, 
#pkdv .pagination-btn:active, 
#pkdv .pagination-btn-active {
  background: var(--pk-primary);
  border: 1px solid var(--pk-primary);
  color: var(--pk-text-light);
}

/* --------------------------------------------------------------------------
   4. Common Buttons（通用按鈕樣式）
   使用於：全站通用按鈕元件
   -------------------------------------------------------------------------- */

/* 基礎按鈕樣式 Base Button Style */
[class^="pk-btn-"], [class*=" pk-btn-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  font-family: "微軟正黑體", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-decoration: none !important;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  border-radius: var(--pk-radius);
  transition: all 0.2s ease-in-out;
  box-sizing: border-box;
  outline: none;
}

/* 按鈕內的圖示間距 */
[class^="pk-btn-"] .pk-icon,
[class*=" pk-btn-"] .pk-icon,
[class^="pk-btn-"] .fa,
[class*=" pk-btn-"] .fa,
[class^="pk-btn-"] .glyphicon,
[class*=" pk-btn-"] .glyphicon {
  margin-right: 8px;
  font-size: 1.1em;
}

[class^="pk-btn-"] .pk-icon:last-child,
[class*=" pk-btn-"] .pk-icon:last-child {
  margin-right: 0;
  margin-left: 8px;
}

/* 主要按鈕 - 綠色漸層 (Pill Shape) */
.pk-btn-primary {
  color: var(--pk-text-light) !important;
  background: linear-gradient(135deg, var(--pk-secondary) 0%, var(--pk-primary) 100%);
  border: 1px solid transparent;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(0, 87, 82, 0.3);
}

.pk-btn-primary:hover,
.pk-btn-primary:focus {
  color: var(--pk-text-light) !important;
  background: linear-gradient(135deg, #007a69 0%, #004440 100%);
  box-shadow: 0 6px 20px rgba(0, 87, 82, 0.4);
  transform: translateY(-1px);
}

.pk-btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(0, 87, 82, 0.3);
}

.pk-btn-primary:disabled {
  background: #ccc;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* 次要按鈕 - 白底綠框 (Pill Shape) */
.pk-btn-secondary {
  color: var(--pk-primary) !important;
  background-color: var(--pk-bg-white);
  border: 2px solid var(--pk-primary);
  border-radius: 50px;
}

.pk-btn-secondary:hover,
.pk-btn-secondary:focus {
  color: var(--pk-text-light) !important;
  background-color: var(--pk-primary);
  box-shadow: 0 4px 15px rgba(0, 87, 82, 0.2);
}

.pk-btn-secondary:active {
  box-shadow: 0 2px 8px rgba(0, 87, 82, 0.2);
}

/* 成功按鈕 - 綠色 */
.pk-btn-success {
  color: var(--pk-text-light) !important;
  background-color: var(--pk-success);
  border-color: var(--pk-success);
  border-radius: 6px;
}

.pk-btn-success:hover,
.pk-btn-success:focus {
  background-color: #4cae4c;
  border-color: #4cae4c;
  box-shadow: 0 2px 8px rgba(92, 184, 92, 0.3);
}

/* 資訊按鈕 - 藍色 */
.pk-btn-info {
  color: var(--pk-text-light) !important;
  background-color: var(--pk-info);
  border-color: var(--pk-info);
  border-radius: 6px;
}

.pk-btn-info:hover,
.pk-btn-info:focus {
  background-color: #46b8da;
  border-color: #46b8da;
  box-shadow: 0 2px 8px rgba(91, 192, 222, 0.3);
}

/* 警告按鈕 - 黃色 */
.pk-btn-warning {
  color: var(--pk-text-light) !important;
  background-color: var(--pk-warning);
  border-color: var(--pk-warning);
  border-radius: 6px;
}

.pk-btn-warning:hover,
.pk-btn-warning:focus {
  background-color: #eea236;
  border-color: #eea236;
  box-shadow: 0 2px 8px rgba(240, 173, 78, 0.3);
}

/* 危險按鈕 - 紅色 */
.pk-btn-danger {
  color: var(--pk-text-light) !important;
  background-color: var(--pk-danger);
  border-color: var(--pk-danger);
  border-radius: 6px;
}

.pk-btn-danger:hover,
.pk-btn-danger:focus {
  background-color: #d43f3a;
  border-color: #d43f3a;
  box-shadow: 0 2px 8px rgba(217, 83, 79, 0.3);
}

/* 淺色按鈕 - 淺灰 */
.pk-btn-light {
  color: var(--pk-text-main) !important;
  background-color: #f8f9fa;
  border-color: var(--pk-border);
  border-radius: 6px;
}

.pk-btn-light:hover,
.pk-btn-light:focus {
  background-color: #e2e6ea;
  border-color: #dae0e5;
}

/* 尺寸變化 */
.pk-btn-lg {
  padding: 12px 32px;
  font-size: 18px;
}

.pk-btn-sm {
  padding: 6px 16px;
  font-size: 14px;
}

.pk-btn-xs {
  padding: 4px 10px;
  font-size: 12px;
}

/* 區塊按鈕 */
.pk-btn-block {
  display: flex;
  width: 100%;
}

/* 按鈕群組 */
.pk-btn-group {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.pk-btn-group .pk-btn-light.active {
  color: #fff !important;
  background-color: var(--pk-primary);
  border-color: var(--pk-primary);
}

.pk-btn-group .pk-btn-light.active:hover,
.pk-btn-group .pk-btn-light.active:focus {
  background-color: var(--pk-primary-hover);
  border-color: var(--pk-primary-hover);
}

/* 圖示按鈕（僅圖示無文字） */
.pk-btn-icon {
  width: 40px;
  height: 40px;
  padding: 0 !important;
  border-radius: 50%;
  font-size: 18px;
}

.pk-btn-icon.pk-btn-sm {
  width: 32px;
  height: 32px;
  font-size: 14px;
}

.pk-btn-icon.pk-btn-lg {
  width: 50px;
  height: 50px;
  font-size: 22px;
}

.pk-btn-icon .pk-icon,
.pk-btn-icon .fa,
.pk-btn-icon .glyphicon {
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   5. SVG Icons（自定義 SVG 圖示）
   使用於：按鈕、連結等需要圖示的元件
   -------------------------------------------------------------------------- */

/* SVG 圖示基礎樣式 - 使用 Mask 技術以支援 currentColor */
.pk-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  background-color: currentColor; /* 圖示顏色跟隨文字顏色 */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  flex-shrink: 0;
}

.pk-icon-lg {
  width: 20px;
  height: 20px;
}

.pk-icon-sm {
  width: 14px;
  height: 14px;
}

/* 常用圖示 SVG 定義 (使用 mask-image) */

/* 勾選圖示 */
.pk-icon-check {
  -webkit-mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
  mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
}

/* 關閉/刪除圖示 */
.pk-icon-close {
  -webkit-mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/%3E%3C/svg%3E');
  mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/%3E%3C/svg%3E');
}

/* 資訊圖示 */
.pk-icon-info {
  -webkit-mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Ccircle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/%3E%3Cpath d="M12 16V12M12 8H12.01" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/%3E%3C/svg%3E');
  mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Ccircle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/%3E%3Cpath d="M12 16V12M12 8H12.01" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/%3E%3C/svg%3E');
}

/* 搜尋圖示 */
.pk-icon-search {
  -webkit-mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Ccircle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"/%3E%3Cpath d="M20 20L16.5 16.5" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/%3E%3C/svg%3E');
  mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Ccircle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2"/%3E%3Cpath d="M20 20L16.5 16.5" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/%3E%3C/svg%3E');
}

/* 垃圾桶圖示 */
.pk-icon-trash {
  -webkit-mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M3 6H21M8 6V4C8 3.44772 8.44772 3 9 3H15C15.5523 3 16 3.44772 16 4V6M19 6V20C19 20.5523 18.5523 21 18 21H6C5.44772 21 5 20.5523 5 20V6H19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
  mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M3 6H21M8 6V4C8 3.44772 8.44772 3 9 3H15C15.5523 3 16 3.44772 16 4V6M19 6V20C19 20.5523 18.5523 21 18 21H6C5.44772 21 5 20.5523 5 20V6H19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
}

/* 編輯圖示 */
.pk-icon-edit {
  -webkit-mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M11 4H4C3.44772 4 3 4.44772 3 5V20C3 20.5523 3.44772 21 4 21H19C19.5523 21 20 20.5523 20 20V13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/%3E%3Cpath d="M18.5 2.5C19.3284 1.67157 20.6716 1.67157 21.5 2.5C22.3284 3.32843 22.3284 4.67157 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
  mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M11 4H4C3.44772 4 3 4.44772 3 5V20C3 20.5523 3.44772 21 4 21H19C19.5523 21 20 20.5523 20 20V13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/%3E%3Cpath d="M18.5 2.5C19.3284 1.67157 20.6716 1.67157 21.5 2.5C22.3284 3.32843 22.3284 4.67157 21.5 5.5L12 15L8 16L9 12L18.5 2.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
}

/* 加號圖示 */
.pk-icon-plus {
  -webkit-mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/%3E%3C/svg%3E');
  mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/%3E%3C/svg%3E');
}

/* 減號圖示 */
.pk-icon-minus {
  -webkit-mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M5 12H19" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/%3E%3C/svg%3E');
  mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M5 12H19" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/%3E%3C/svg%3E');
}

/* 下載圖示 */
.pk-icon-download {
  -webkit-mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M21 15V19C21 19.5523 20.5523 20 20 20H4C3.44772 20 3 19.5523 3 19V15M7 10L12 15M12 15L17 10M12 15V3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
  mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M21 15V19C21 19.5523 20.5523 20 20 20H4C3.44772 20 3 19.5523 3 19V15M7 10L12 15M12 15L17 10M12 15V3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
}

/* 上傳圖示 */
.pk-icon-upload {
  -webkit-mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M21 15V19C21 19.5523 20.5523 20 20 20H4C3.44772 20 3 19.5523 3 19V15M17 8L12 3M12 3L7 8M12 3V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
  mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M21 15V19C21 19.5523 20.5523 20 20 20H4C3.44772 20 3 19.5523 3 19V15M17 8L12 3M12 3L7 8M12 3V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
}

/* 外部連結圖示 */
.pk-icon-external {
  -webkit-mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M18 13V19C18 19.5523 17.5523 20 17 20H5C4.44772 20 4 19.5523 4 19V7C4 6.44772 4.44772 6 5 6H11M15 3H21M21 3V9M21 3L10 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
  mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M18 13V19C18 19.5523 17.5523 20 17 20H5C4.44772 20 4 19.5523 4 19V7C4 6.44772 4.44772 6 5 6H11M15 3H21M21 3V9M21 3L10 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
}

/* 箭頭向右圖示 */
.pk-icon-arrow-right {
  -webkit-mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
  mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
}

/* 箭頭向左圖示 */
.pk-icon-arrow-left {
  -webkit-mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M19 12H5M5 12L12 19M5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
  mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M19 12H5M5 12L12 19M5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
}

/* 警告圖示 */
.pk-icon-warning {
  -webkit-mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M12 9V13M12 17H12.01M10.29 3.86L1.82 18C1.64537 18.3024 1.55296 18.6453 1.55199 18.9945C1.55101 19.3437 1.64151 19.6871 1.81445 19.9905C1.98738 20.2939 2.23675 20.5467 2.53773 20.7239C2.83871 20.9011 3.18082 20.9962 3.53 21H20.47C20.8192 20.9962 21.1613 20.9011 21.4623 20.7239C21.7633 20.5467 22.0126 20.2939 22.1856 19.9905C22.3585 19.6871 22.449 19.3437 22.448 18.9945C22.447 18.6453 22.3546 18.3024 22.18 18L13.71 3.86C13.5317 3.56611 13.2807 3.32312 12.9812 3.15448C12.6817 2.98585 12.3437 2.89725 12 2.89725C11.6563 2.89725 11.3183 2.98585 11.0188 3.15448C10.7193 3.32312 10.4683 3.56611 10.29 3.86Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
  mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M12 9V13M12 17H12.01M10.29 3.86L1.82 18C1.64537 18.3024 1.55296 18.6453 1.55199 18.9945C1.55101 19.3437 1.64151 19.6871 1.81445 19.9905C1.98738 20.2939 2.23675 20.5467 2.53773 20.7239C2.83871 20.9011 3.18082 20.9962 3.53 21H20.47C20.8192 20.9962 21.1613 20.9011 21.4623 20.7239C21.7633 20.5467 22.0126 20.2939 22.1856 19.9905C22.3585 19.6871 22.449 19.3437 22.448 18.9945C22.447 18.6453 22.3546 18.3024 22.18 18L13.71 3.86C13.5317 3.56611 13.2807 3.32312 12.9812 3.15448C12.6817 2.98585 12.3437 2.89725 12 2.89725C11.6563 2.89725 11.3183 2.98585 11.0188 3.15448C10.7193 3.32312 10.4683 3.56611 10.29 3.86Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
}

/* 設定圖示 */
.pk-icon-settings {
  -webkit-mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
}

/* --------------------------------------------------------------------------
   7. Typography & Elements
   -------------------------------------------------------------------------- */

/* Lists - Default style for content lists (without classes) */
ul:not([class]), ol:not([class]) {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 25px;
}

ul:not([class]) {
  list-style-type: disc;
}

ol:not([class]) {
  list-style-type: decimal;
}

/* Apply to list items within these lists */
ul:not([class]) li, ol:not([class]) li {
  display: list-item;
  margin-bottom: 5px;
  list-style: inherit;
}

ul ul, ol ul, ul ol, ol ol {
  margin-bottom: 0;
}

/* Description Lists */
dl {
  margin-top: 0;
  margin-bottom: 20px;
}

dt {
  font-weight: 700;
  margin-bottom: 5px;
}

dd {
  margin-left: 0;
  margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   8. Global Components
   -------------------------------------------------------------------------- */

/* Search Bar (Used in DW, QA) */
.dw-search-container {
    max-width: 800px;
    margin: 0 auto 50px;
    padding: 0 15px;
}

.dw-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    overflow: hidden;
}

.dw-search-wrapper:hover {
    box-shadow: 0 6px 30px rgba(0,0,0,0.12);
}

.dw-search-wrapper:focus-within {
    box-shadow: 0 4px 20px rgba(37, 108, 83, 0.2);
    border: 2px solid var(--pk-primary);
}

.dw-search-icon {
    position: absolute;
    left: 25px;
    color: #999;
    pointer-events: none;
    z-index: 2;
}

.dw-search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 18px 25px 18px 60px;
    font-size: 16px;
    background: transparent;
    width: 100%;
}

.dw-search-input::placeholder {
    color: #aaa;
}

.dw-search-btn {
    background: var(--pk-primary);
    color: #fff;
    border: none;
    padding: 18px 35px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.dw-search-btn:hover {
    background: var(--pk-primary-hover);
}

@media (max-width: 768px) {
    .dw-search-wrapper {
        border-radius: 12px;
    }
    
    .dw-search-input {
        font-size: 14px;
        padding: 15px 20px 15px 50px;
    }
    
    .dw-search-icon {
        left: 18px;
        width: 18px;
        height: 18px;
    }
    
    .dw-search-btn {
        padding: 15px 25px;
        font-size: 14px;
    }
}

/* --------------------------------------------------------------------------
   9. Bootstrap Fixes & Modernization
   -------------------------------------------------------------------------- */

/* Table Modernization */
.table {
  margin-bottom: 20px;
  background-color: transparent;
  border-spacing: 0;
  border-collapse: collapse;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 12px 15px;
  line-height: 1.5;
  vertical-align: middle;
  border-top: 1px solid var(--pk-border-light);
  color: var(--pk-text-main);
}

.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid var(--pk-primary);
  font-weight: 600;
  color: var(--pk-primary);
  background-color: rgba(0, 87, 82, 0.02);
}

.table-bordered {
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius);
  overflow: hidden;
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid var(--pk-border);
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--pk-bg-light);
}

.table-hover > tbody > tr:hover {
  background-color: rgba(0, 87, 82, 0.05);
}

/* --------------------------------------------------------------------------
   6.1 Table Extensions（表格擴充）
   [PK自訂樣式]
   參考 Fomantic-UI Table 設計，提供尺寸、密度、狀態、佈局等擴充

   尺寸（Size）：
   <table class="table pk-table-sm">   — 小
   <table class="table">               — 中（預設）
   <table class="table pk-table-lg">   — 大

   密度（Density）：
   <table class="table pk-table-compact">   — 緊湊
   <table class="table pk-table-padded">    — 寬鬆

   行狀態（Row State）：
   <tr class="pk-row-positive">  — 正面/成功
   <tr class="pk-row-negative">  — 負面/錯誤
   <tr class="pk-row-warning">   — 警告
   <tr class="pk-row-active">    — 選中/焦點
   <tr class="pk-row-disabled">  — 停用

   佈局（Layout）：
   <table class="table pk-table-fixed">       — 等寬欄位
   <table class="table pk-table-collapsing">  — 內容自適寬度
   <table class="table pk-table-singleline">  — 單行不換行
   <table class="table pk-table-selectable">  — 可選取（cursor pointer）
   <table class="table pk-table-basic">       — 簡潔無框線
   <table class="table pk-table-definition">  — 定義型（首欄加強）
   -------------------------------------------------------------------------- */

/* --- 尺寸（Size） --- */
.pk-table-sm > thead > tr > th,
.pk-table-sm > tbody > tr > th,
.pk-table-sm > tfoot > tr > th,
.pk-table-sm > thead > tr > td,
.pk-table-sm > tbody > tr > td,
.pk-table-sm > tfoot > tr > td {
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.4;
}

.pk-table-lg > thead > tr > th,
.pk-table-lg > tbody > tr > th,
.pk-table-lg > tfoot > tr > th,
.pk-table-lg > thead > tr > td,
.pk-table-lg > tbody > tr > td,
.pk-table-lg > tfoot > tr > td {
  padding: 16px 20px;
  font-size: 16px;
  line-height: 1.6;
}

/* --- 密度（Density） --- */
.pk-table-compact > thead > tr > th,
.pk-table-compact > tbody > tr > th,
.pk-table-compact > tfoot > tr > th,
.pk-table-compact > thead > tr > td,
.pk-table-compact > tbody > tr > td,
.pk-table-compact > tfoot > tr > td {
  padding: 4px 6px;
}

.pk-table-padded > thead > tr > th,
.pk-table-padded > tbody > tr > th,
.pk-table-padded > tfoot > tr > th,
.pk-table-padded > thead > tr > td,
.pk-table-padded > tbody > tr > td,
.pk-table-padded > tfoot > tr > td {
  padding: 20px 24px;
}

/* --- 行狀態（Row State） --- */
.pk-row-positive,
.pk-row-positive > td {
  background-color: #f3faf3 !important;
  color: #2c662d !important;
}

.pk-row-negative,
.pk-row-negative > td {
  background-color: #fdf0f0 !important;
  color: #9f3a38 !important;
}

.pk-row-warning,
.pk-row-warning > td {
  background-color: #fffcf0 !important;
  color: #856404 !important;
}

.pk-row-active,
.pk-row-active > td {
  background-color: rgba(0, 87, 82, 0.08) !important;
}

.pk-row-disabled,
.pk-row-disabled > td {
  pointer-events: none;
  opacity: 0.45;
}

/* 儲存格狀態 */
td.pk-cell-positive { background-color: #f3faf3 !important; color: #2c662d !important; }
td.pk-cell-negative { background-color: #fdf0f0 !important; color: #9f3a38 !important; }
td.pk-cell-warning  { background-color: #fffcf0 !important; color: #856404 !important; }

/* --- 佈局（Layout） --- */
.pk-table-fixed {
  table-layout: fixed;
}

.pk-table-collapsing {
  width: auto !important;
}

.pk-table-singleline > tbody > tr > td,
.pk-table-singleline > thead > tr > th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pk-table-selectable > tbody > tr {
  cursor: pointer;
  transition: background-color 0.15s;
}

.pk-table-selectable > tbody > tr:hover {
  background-color: rgba(0, 87, 82, 0.08) !important;
}

/* --- 簡潔表格（Basic） --- */
.pk-table-basic {
  border: none !important;
}

.pk-table-basic > thead > tr > th {
  background-color: transparent;
  border-bottom: 1px solid var(--pk-border);
  border-top: none;
}

.pk-table-basic > tbody > tr > td {
  border: none;
  border-bottom: 1px solid var(--pk-border-light);
}

.pk-table-basic > tbody > tr:last-child > td {
  border-bottom: none;
}

/* --- 定義型表格（Definition） --- */
.pk-table-definition > thead > tr > th:first-child {
  background-color: transparent;
  border-bottom-color: var(--pk-border);
  font-weight: 400;
}

.pk-table-definition > tbody > tr > td:first-child {
  background-color: var(--pk-bg-light);
  font-weight: 600;
  color: var(--pk-text-main);
  border-right: 1px solid var(--pk-border);
}

/* Page Header Modernization */
.page-header {
  padding-bottom: 15px;
  margin: 20px 0 30px;
  border-bottom: 1px solid var(--pk-border);
  position: relative;
}

.page-header:after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 60px;
  height: 3px;
  background-color: var(--pk-primary);
}

.page-header > h1, 
.page-header > h2, 
.page-header > h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: 600;
  color: var(--pk-text-main);
}

.page-header > h1 { font-size: 36px; }
.page-header > h2 { font-size: 30px; }
.page-header > h3 { font-size: 24px; }

.page-header small {
  font-size: 65%;
  font-weight: 400;
  color: var(--pk-text-muted);
  margin-left: 15px;
}

/* Alert Modernization */
.alert {
  padding: 15px 20px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: var(--pk-radius-lg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.alert-info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}

.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.alert > .pk-icon {
  margin-right: 10px;
  font-size: 1.2em;
  vertical-align: text-bottom;
}

/* Label Modernization */
.label {
  display: inline-block;
  padding: 0.4em 1em;
  font-size: 85%;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 100px;
  letter-spacing: 0.5px;
}
.label-default { background-color: var(--pk-text-muted); }
.label-primary { background-color: var(--pk-primary); }
.label-success { background-color: var(--pk-success); }
.label-info {    background-color: var(--pk-info); }
.label-warning { background-color: var(--pk-warning); }
.label-danger {  background-color: var(--pk-danger); }

/* Badge Modernization */
.badge {
  display: inline-block;
  min-width: 10px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-color: var(--pk-text-muted);
  border-radius: 10px;
}

/* Badge in Buttons */
[class^="pk-btn-"] .badge,
[class*=" pk-btn-"] .badge {
    margin-left: 8px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Well Modernization -> Card-like */
.well {
  min-height: 20px;
  padding: 20px;
  margin-bottom: 20px;
  background-color: var(--pk-bg-light);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-lg);
  box-shadow: none;
}
.well-lg { padding: 30px; }
.well-sm { padding: 15px; }

/* Panel & Accordion Modernization */
.panel-group .panel {
  margin-bottom: 15px;
  overflow: hidden;
}

.panel {
  margin-bottom: 25px;
  background-color: #fff;
  border: 1px solid var(--pk-border-light);
  border-radius: var(--pk-radius-lg);
  box-shadow: var(--pk-shadow);
  transition: box-shadow 0.3s ease;
}

.panel:hover {
  box-shadow: var(--pk-shadow-hover);
}

.panel-body { 
  padding: 25px; 
  background-color: var(--pk-bg-white);
}

.panel-body p {
    margin: 0 0 15px;
    line-height: 1.6;
}

.panel-body p:last-child {
    margin-bottom: 0;
}

/* Panel Heading (Interactive) */
.panel-heading {
  padding: 15px 25px; /* Default padding */
  border-bottom: 1px solid var(--pk-border-light);
  border-top-left-radius: var(--pk-radius-lg);
  border-top-right-radius: var(--pk-radius-lg);
  background-color: #fff;
  transition: background-color 0.3s ease;
  position: relative;
}

/* Standard Panel Title (Non-Accordion) */
.panel-heading > .panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--pk-text-main);
}

/* Accordion Toggle Link */
.accordion-toggle {
    display: block;
    padding: 15px 25px;
    margin: -15px -25px; /* Negative margin to fill parent */
    color: var(--pk-primary);
    text-decoration: none !important;
    transition: color 0.3s ease;
    position: relative;
}

.accordion-toggle:hover {
    color: var(--pk-primary-hover);
    background-color: rgba(0,0,0,0.02);
}

/* Active State (Expanded) */
.panel-heading.active {
    background-color: var(--pk-primary);
    border-bottom-color: var(--pk-primary);
}

.panel-heading.active .panel-title,
.panel-heading.active .accordion-toggle {
    color: #fff !important;
}

/* Accordion Indicator (+/-) */
.panel-group .panel-heading .accordion-toggle::after {
    content: '+';
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
}

.panel-group .panel-heading.active .accordion-toggle::after {
    content: '−'; /* Minus sign */
}

/* Panel Collapse Animation */
.panel-collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.panel-collapse.in {
    max-height: 5000px; /* Large enough value */
}

.panel-footer {
  padding: 15px 25px;
  background-color: var(--pk-bg-light);
  border-top: 1px solid var(--pk-border-light);
  border-bottom-right-radius: var(--pk-radius-lg);
  border-bottom-left-radius: var(--pk-radius-lg);
}

.panel-default { border-color: var(--pk-border-light); }
.panel-primary { border-color: var(--pk-primary); }
.panel-info { border-color: var(--pk-info); }

/* Responsive Adjustments for Accordion */
@media (max-width: 768px) {
    .accordion-toggle {
        padding: 16px 45px 16px 15px;
        font-size: 16px;
    }
    
    .panel-group .panel-heading .accordion-toggle::after {
        right: 15px;
        font-size: 18px;
    }
    
    .panel-body {
        padding: 20px 15px;
    }
}

@media (max-width: 480px) {
    .accordion-toggle {
        padding: 14px 40px 14px 12px;
        font-size: 15px;
    }
}

/* List Group Modernization */
.list-group {
  padding-left: 0;
  margin-bottom: 20px;
  border-radius: var(--pk-radius-lg);
  box-shadow: var(--pk-shadow);
}

.list-group-item {
  position: relative;
  display: block;
  padding: 15px 20px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid var(--pk-border-light);
  transition: background-color 0.2s;
}

.list-group-item:first-child {
  border-top-left-radius: var(--pk-radius-lg);
  border-top-right-radius: var(--pk-radius-lg);
}

.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: var(--pk-radius-lg);
  border-bottom-left-radius: var(--pk-radius-lg);
}

.list-group-item:hover {
  background-color: var(--pk-bg-light);
  text-decoration: none;
}

/* Close Icon */
.close {
  float: right;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: var(--pk-text-main);
  text-shadow: none;
  opacity: .5;
  transition: opacity 0.2s;
}
.close:hover, .close:focus {
  color: var(--pk-text-main);
  text-decoration: none;
  cursor: pointer;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   10. Card Component（卡片元件，取代 BS3 panel）
   [PK自訂樣式]
   使用於：內容區塊、表單容器、資訊面板
   結構：.pk-card > .pk-card-header + .pk-card-body + .pk-card-footer

   範例 HTML：
   <div class="pk-card">
     <div class="pk-card-header"><h4 class="pk-card-title">標題</h4></div>
     <div class="pk-card-body">內容</div>
     <div class="pk-card-footer text-right">按鈕區</div>
   </div>
   -------------------------------------------------------------------------- */

.pk-card {
  background-color: var(--pk-bg-white);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius);
  margin-bottom: 20px;
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.pk-card-header {
  padding: 10px 15px;
  border-bottom: 1px solid var(--pk-border);
  background-color: var(--pk-bg-light);
  border-radius: var(--pk-radius) var(--pk-radius) 0 0;
}
.pk-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--pk-text-main);
}
.pk-card-body {
  padding: 15px;
}
.pk-card-footer {
  padding: 10px 15px;
  border-top: 1px solid var(--pk-border);
  background-color: var(--pk-bg-light);
  border-radius: 0 0 var(--pk-radius) var(--pk-radius);
}

/* Card 變體 */
.pk-card-primary {
  border-color: var(--pk-primary);
}
.pk-card-primary > .pk-card-header {
  background-color: var(--pk-primary);
  border-color: var(--pk-primary);
  color: #fff;
}
.pk-card-primary > .pk-card-header .pk-card-title {
  color: #fff;
}

.pk-card-info {
  border-color: var(--pk-info);
}
.pk-card-info > .pk-card-header {
  background-color: var(--pk-info);
  border-color: var(--pk-info);
  color: #fff;
}
.pk-card-info > .pk-card-header .pk-card-title {
  color: #fff;
}

.pk-card-success {
  border-color: var(--pk-success);
}
.pk-card-success > .pk-card-header {
  background-color: var(--pk-success);
  border-color: var(--pk-success);
  color: #fff;
}
.pk-card-success > .pk-card-header .pk-card-title {
  color: #fff;
}

.pk-card-warning {
  border-color: var(--pk-warning);
}
.pk-card-warning > .pk-card-header {
  background-color: var(--pk-warning);
  border-color: var(--pk-warning);
  color: #fff;
}
.pk-card-warning > .pk-card-header .pk-card-title {
  color: #fff;
}

.pk-card-danger {
  border-color: var(--pk-danger);
}
.pk-card-danger > .pk-card-header {
  background-color: var(--pk-danger);
  border-color: var(--pk-danger);
  color: #fff;
}
.pk-card-danger > .pk-card-header .pk-card-title {
  color: #fff;
}

/* --------------------------------------------------------------------------
   11. Toolbar & Inline Search（工具列 & 內嵌搜尋列）
   使用於：列表頁面的搜尋 + 操作按鈕組合
   結構：.pk-toolbar > .pk-search-inline + .pk-toolbar-actions

   範例 HTML：
   <div class="pk-toolbar">
     <div class="pk-search-inline">
       <input type="text" class="pk-search-inline-input" placeholder="搜尋...">
       <button class="pk-search-inline-btn"><i class="pk-icon pk-icon-search"></i></button>
     </div>
     <div class="pk-toolbar-actions">
       <a class="pk-btn-info pk-btn-sm">按鈕</a>
     </div>
   </div>
   -------------------------------------------------------------------------- */

/* 工具列容器 */
.pk-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 15px 0;
}

/* 垂直置中對齊 */
.pk-toolbar-center {
  justify-content: center;
}

/* 工具列右側操作區 */
.pk-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* [PK自訂樣式][Instruction]
   僅允許調整含 [PK自訂樣式] 註解的 CSS 檔案或區塊，避免誤改既有基礎樣式。 */
/* 查詢條件列（EO/List 與公版列表共用） */
.pk-condition-toolbar {
  gap: 10px;
}

.pk-condition-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}

.pk-condition-inline-break {
  flex-basis: 100%;
  width: 100%;
}

.pk-condition-select.pk-form-control,
.pk-condition-select.form-control {
  height: 32px;
  min-width: 130px;
  padding: 4px 10px;
  font-size: 12px;
}

.pk-condition-search {
  max-width: 320px;
}

.pk-condition-input {
  font-size: 12px !important;
  line-height: 1.2;
}

.pk-condition-input::placeholder {
  font-size: 12px;
}

.pk-condition-toolbar .pk-toolbar-actions {
  margin-left: auto;
}

/* 內嵌搜尋列 - 輸入框與按鈕連體 */
.pk-search-inline {
  display: inline-flex;
  align-items: stretch;
  max-width: 360px;
  width: 100%;
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  background: var(--pk-bg-white);
}

.pk-search-inline:focus-within {
  border-color: var(--pk-primary);
  box-shadow: 0 0 0 3px var(--pk-primary-light);
}

/* 搜尋輸入框 */
.pk-search-inline-input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 6px 12px;
  font-size: 14px;
  color: var(--pk-text-main);
  background: transparent;
  border: none;
  outline: none;
}

.pk-search-inline-input::placeholder {
  color: var(--pk-text-muted);
}

/* 搜尋按鈕 */
.pk-search-inline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  height: 38px;
  padding: 0;
  background: var(--pk-primary);
  color: var(--pk-text-light);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.pk-search-inline-btn:hover {
  background: var(--pk-primary-hover);
}

.pk-search-inline-btn .pk-icon {
  width: 16px;
  height: 16px;
}

/* 大尺寸搜尋列 */
.pk-search-inline-lg {
  max-width: 480px;
  border-radius: var(--pk-radius-lg);
}

.pk-search-inline-lg .pk-search-inline-input {
  height: 46px;
  padding: 8px 16px;
  font-size: 16px;
}

.pk-search-inline-lg .pk-search-inline-btn {
  width: 52px;
  min-width: 52px;
  height: 46px;
}

/* 小尺寸搜尋列 */
.pk-search-inline-sm {
  max-width: 280px;
}

.pk-search-inline-sm .pk-search-inline-input {
  height: 32px;
  padding: 4px 10px;
  font-size: 13px;
}

.pk-search-inline-sm .pk-search-inline-btn {
  width: 36px;
  min-width: 36px;
  height: 32px;
}

/* 圓角膠囊版本 */
.pk-search-inline-pill {
  border-radius: 50px;
}

.pk-search-inline-pill .pk-search-inline-btn {
  border-radius: 0 50px 50px 0;
}

/* 響應式 */
@media (max-width: 768px) {
  .pk-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .pk-condition-inline {
    width: 100%;
    flex-wrap: wrap;
  }

  .pk-condition-toolbar .pk-toolbar-actions {
    margin-left: 0;
    justify-content: flex-start;
  }

  .pk-search-inline {
    max-width: 100%;
  }

  .pk-toolbar-actions {
    justify-content: flex-end;
  }
}

/* --------------------------------------------------------------------------
   11. Text Utilities（文字工具類別）
   使用於：快速套用文字顏色與對齊
   -------------------------------------------------------------------------- */

/* 文字顏色 */
.pk-text-primary   { color: var(--pk-primary) !important; }
.pk-text-secondary  { color: var(--pk-text-secondary) !important; }
.pk-text-success   { color: var(--pk-success) !important; }
.pk-text-info      { color: var(--pk-info) !important; }
.pk-text-warning   { color: var(--pk-warning) !important; }
.pk-text-danger    { color: var(--pk-danger) !important; }
.pk-text-muted     { color: var(--pk-text-muted) !important; }
.pk-text-white     { color: var(--pk-text-light) !important; }

/* 連結顏色 */
.pk-link-primary   { color: var(--pk-primary) !important; }
.pk-link-secondary  { color: var(--pk-secondary) !important; }
.pk-link-success   { color: var(--pk-success) !important; }
.pk-link-info      { color: var(--pk-info) !important; }
.pk-link-warning   { color: var(--pk-warning) !important; }
.pk-link-danger    { color: var(--pk-danger) !important; }
.pk-link-muted     { color: var(--pk-text-muted) !important; }
.pk-link-dark      { color: var(--pk-text-main) !important; }

.pk-link-primary:hover   { color: var(--pk-primary-hover) !important; }
.pk-link-secondary:hover  { color: var(--pk-primary) !important; }
.pk-link-success:hover   { color: #449d44 !important; }
.pk-link-info:hover      { color: #31b0d5 !important; }
.pk-link-warning:hover   { color: #ec971f !important; }
.pk-link-danger:hover    { color: #c9302c !important; }
.pk-link-muted:hover     { color: var(--pk-text-secondary) !important; }
.pk-link-dark:hover      { color: var(--pk-primary) !important; }

.pk-link-primary,
.pk-link-secondary,
.pk-link-success,
.pk-link-info,
.pk-link-warning,
.pk-link-danger,
.pk-link-muted,
.pk-link-dark {
  text-decoration: none;
  transition: color 0.2s;
}

.pk-link-primary:hover,
.pk-link-secondary:hover,
.pk-link-success:hover,
.pk-link-info:hover,
.pk-link-warning:hover,
.pk-link-danger:hover,
.pk-link-muted:hover,
.pk-link-dark:hover {
  text-decoration: underline;
}

/* 文字對齊 */
.pk-text-left      { text-align: left !important; }
.pk-text-center    { text-align: center !important; }
.pk-text-right     { text-align: right !important; }

/* 文字粗細 */
.pk-text-bold      { font-weight: 700 !important; }
.pk-text-semibold  { font-weight: 600 !important; }
.pk-text-normal    { font-weight: 400 !important; }
.pk-text-light     { font-weight: 300 !important; }

/* 文字大小 */
.pk-text-xs        { font-size: 10px !important; }
.pk-text-sm        { font-size: 12px !important; }
.pk-text-base      { font-size: 14px !important; }
.pk-text-lg        { font-size: 16px !important; }
.pk-text-xl        { font-size: 22px !important; }
.pk-text-2xl       { font-size: 28px !important; }

/* 文字截斷（單行省略號） */
.pk-text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 多行截斷（2行） */
.pk-text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 多行截斷（3行） */
.pk-text-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 文字不換行 */
.pk-text-nowrap    { white-space: nowrap !important; }

/* 文字換行 */
.pk-text-break     { word-wrap: break-word !important; word-break: break-word !important; }

/* --------------------------------------------------------------------------
   11.5 Badge Component（標籤元件，取代 BS3 label/badge）
   [PK自訂樣式]
   使用於：狀態標籤、分類標記、步驟指示

   範例 HTML：
   <span class="pk-badge pk-badge-primary">Step 1</span>
   <span class="pk-badge pk-badge-success">完成</span>
   -------------------------------------------------------------------------- */

.pk-badge {
  display: inline-block;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 3px;
  background-color: var(--pk-text-muted);
}

.pk-badge-primary   { background-color: var(--pk-primary); }
.pk-badge-secondary { background-color: var(--pk-text-secondary); }
.pk-badge-success   { background-color: var(--pk-success); }
.pk-badge-info      { background-color: var(--pk-info); }
.pk-badge-warning   { background-color: var(--pk-warning); color: #333; }
.pk-badge-danger    { background-color: var(--pk-danger); }
.pk-badge-light     { background-color: var(--pk-bg-light); color: var(--pk-text-main); }

/* --------------------------------------------------------------------------
   12. Spacing Utilities（間距工具類別）
   使用於：快速調整元素的 margin / padding
   格式：pk-{m|p}{t|b|l|r|x|y}-{0|1|2|3|4|5}
   -------------------------------------------------------------------------- */

/* Margin Top */
.pk-mt-0 { margin-top: 0 !important; }
.pk-mt-1 { margin-top: 5px !important; }
.pk-mt-2 { margin-top: 10px !important; }
.pk-mt-3 { margin-top: 15px !important; }
.pk-mt-4 { margin-top: 20px !important; }
.pk-mt-5 { margin-top: 30px !important; }

/* Margin Bottom */
.pk-mb-0 { margin-bottom: 0 !important; }
.pk-mb-1 { margin-bottom: 5px !important; }
.pk-mb-2 { margin-bottom: 10px !important; }
.pk-mb-3 { margin-bottom: 15px !important; }
.pk-mb-4 { margin-bottom: 20px !important; }
.pk-mb-5 { margin-bottom: 30px !important; }

/* Margin Left */
.pk-ml-0 { margin-left: 0 !important; }
.pk-ml-1 { margin-left: 5px !important; }
.pk-ml-2 { margin-left: 10px !important; }
.pk-ml-3 { margin-left: 15px !important; }
.pk-ml-4 { margin-left: 20px !important; }

/* Margin Right */
.pk-mr-0 { margin-right: 0 !important; }
.pk-mr-1 { margin-right: 5px !important; }
.pk-mr-2 { margin-right: 10px !important; }
.pk-mr-3 { margin-right: 15px !important; }
.pk-mr-4 { margin-right: 20px !important; }

/* Margin X (Left + Right) */
.pk-mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Margin Y (Top + Bottom) */
.pk-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.pk-my-2 { margin-top: 10px !important; margin-bottom: 10px !important; }
.pk-my-3 { margin-top: 15px !important; margin-bottom: 15px !important; }
.pk-my-4 { margin-top: 20px !important; margin-bottom: 20px !important; }
.pk-my-5 { margin-top: 30px !important; margin-bottom: 30px !important; }

/* Padding Top */
.pk-pt-0 { padding-top: 0 !important; }
.pk-pt-1 { padding-top: 5px !important; }
.pk-pt-2 { padding-top: 10px !important; }
.pk-pt-3 { padding-top: 15px !important; }
.pk-pt-4 { padding-top: 20px !important; }
.pk-pt-5 { padding-top: 30px !important; }

/* Padding Bottom */
.pk-pb-0 { padding-bottom: 0 !important; }
.pk-pb-1 { padding-bottom: 5px !important; }
.pk-pb-2 { padding-bottom: 10px !important; }
.pk-pb-3 { padding-bottom: 15px !important; }
.pk-pb-4 { padding-bottom: 20px !important; }
.pk-pb-5 { padding-bottom: 30px !important; }

/* Padding X */
.pk-px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.pk-px-2 { padding-left: 10px !important; padding-right: 10px !important; }
.pk-px-3 { padding-left: 15px !important; padding-right: 15px !important; }
.pk-px-4 { padding-left: 20px !important; padding-right: 20px !important; }

/* Padding Y */
.pk-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.pk-py-2 { padding-top: 10px !important; padding-bottom: 10px !important; }
.pk-py-3 { padding-top: 15px !important; padding-bottom: 15px !important; }
.pk-py-4 { padding-top: 20px !important; padding-bottom: 20px !important; }

/* Padding All */
.pk-p-0 { padding: 0 !important; }
.pk-p-2 { padding: 10px !important; }
.pk-p-3 { padding: 15px !important; }
.pk-p-4 { padding: 20px !important; }

/* --------------------------------------------------------------------------
   13. Display & Flex Utilities（顯示 & Flex 工具類別）
   -------------------------------------------------------------------------- */

/* Display */
.pk-d-none          { display: none !important; }
.pk-d-block         { display: block !important; }
.pk-d-inline        { display: inline !important; }
.pk-d-inline-block  { display: inline-block !important; }
.pk-d-flex          { display: flex !important; }
.pk-d-inline-flex   { display: inline-flex !important; }

/* Flex Direction */
.pk-flex-row         { flex-direction: row !important; }
.pk-flex-column      { flex-direction: column !important; }

/* Flex Justify */
.pk-justify-start    { justify-content: flex-start !important; }
.pk-justify-center   { justify-content: center !important; }
.pk-justify-end      { justify-content: flex-end !important; }
.pk-justify-between  { justify-content: space-between !important; }
.pk-justify-around   { justify-content: space-around !important; }

/* Flex Align */
.pk-align-start      { align-items: flex-start !important; }
.pk-align-center     { align-items: center !important; }
.pk-align-end        { align-items: flex-end !important; }
.pk-align-stretch    { align-items: stretch !important; }

/* Flex Wrap & Gap */
.pk-flex-wrap        { flex-wrap: wrap !important; }
.pk-flex-nowrap      { flex-wrap: nowrap !important; }
.pk-gap-1            { gap: 5px !important; }
.pk-gap-2            { gap: 10px !important; }
.pk-gap-3            { gap: 15px !important; }
.pk-gap-4            { gap: 20px !important; }

/* Flex Grow / Shrink */
.pk-flex-1           { flex: 1 !important; }
.pk-flex-auto        { flex: auto !important; }
.pk-flex-none        { flex: none !important; }

/* --------------------------------------------------------------------------
   14. Background Utilities（背景工具類別）
   -------------------------------------------------------------------------- */
.pk-bg-primary    { background-color: var(--pk-primary) !important; color: #fff !important; }
.pk-bg-success    { background-color: var(--pk-success) !important; color: #fff !important; }
.pk-bg-info       { background-color: var(--pk-info) !important; color: #fff !important; }
.pk-bg-warning    { background-color: var(--pk-warning) !important; color: #fff !important; }
.pk-bg-danger     { background-color: var(--pk-danger) !important; color: #fff !important; }
.pk-bg-light      { background-color: var(--pk-bg-light) !important; }
.pk-bg-white      { background-color: var(--pk-bg-white) !important; }

/* --------------------------------------------------------------------------
   15. Border Utilities（邊框工具類別）
   -------------------------------------------------------------------------- */
.pk-border         { border: 1px solid var(--pk-border) !important; }
.pk-border-top     { border-top: 1px solid var(--pk-border) !important; }
.pk-border-bottom  { border-bottom: 1px solid var(--pk-border) !important; }
.pk-border-left    { border-left: 1px solid var(--pk-border) !important; }
.pk-border-right   { border-right: 1px solid var(--pk-border) !important; }
.pk-border-0       { border: 0 !important; }

.pk-rounded        { border-radius: var(--pk-radius) !important; }
.pk-rounded-lg     { border-radius: var(--pk-radius-lg) !important; }
.pk-rounded-pill   { border-radius: 50px !important; }
.pk-rounded-circle { border-radius: 50% !important; }
.pk-rounded-0      { border-radius: 0 !important; }

/* --------------------------------------------------------------------------
   16. Divider / Separator（分隔線）
   -------------------------------------------------------------------------- */
.pk-divider {
  height: 1px;
  background-color: var(--pk-border);
  margin: 20px 0;
  border: none;
}

.pk-divider-dashed {
  height: 0;
  border: none;
  border-top: 1px dashed var(--pk-border);
  margin: 20px 0;
}

/* 帶文字的分隔線 */
.pk-divider-text {
  display: flex;
  align-items: center;
  margin: 20px 0;
  color: var(--pk-text-muted);
  font-size: 14px;
}

.pk-divider-text::before,
.pk-divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--pk-border);
}

.pk-divider-text::before { margin-right: 15px; }
.pk-divider-text::after  { margin-left: 15px; }

/* --------------------------------------------------------------------------
   17. Status Indicator（狀態指示器）
   -------------------------------------------------------------------------- */
.pk-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
}

.pk-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pk-status-dot-success { background-color: var(--pk-success); }
.pk-status-dot-danger  { background-color: var(--pk-danger); }
.pk-status-dot-warning { background-color: var(--pk-warning); }
.pk-status-dot-info    { background-color: var(--pk-info); }
.pk-status-dot-muted   { background-color: var(--pk-text-muted); }

/* 帶脈衝動畫的狀態點 */
.pk-status-dot-pulse {
  position: relative;
}

.pk-status-dot-pulse::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: inherit;
  animation: pk-pulse 2s ease-in-out infinite;
}

@keyframes pk-pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(2.5); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}

/* --------------------------------------------------------------------------
   18. Thumbnail / Image Utilities（縮圖 / 圖片工具）
   -------------------------------------------------------------------------- */
.pk-img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

.pk-img-rounded {
  border-radius: var(--pk-radius-lg);
}

.pk-img-circle {
  border-radius: 50%;
}

.pk-img-thumbnail {
  padding: 4px;
  background-color: var(--pk-bg-white);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius);
  transition: box-shadow 0.2s;
}

.pk-img-thumbnail:hover {
  box-shadow: var(--pk-shadow-hover);
}

/* Avatar 頭像 */
.pk-avatar {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--pk-bg-light);
  border: 2px solid var(--pk-border);
}

.pk-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pk-avatar-sm { width: 32px; height: 32px; }
.pk-avatar-lg { width: 56px; height: 56px; }
.pk-avatar-xl { width: 80px; height: 80px; }

/* --------------------------------------------------------------------------
   19. Shadow Utilities（陰影工具類別）
   -------------------------------------------------------------------------- */
.pk-shadow-none   { box-shadow: none !important; }
.pk-shadow-sm     { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important; }
.pk-shadow        { box-shadow: var(--pk-shadow) !important; }
.pk-shadow-lg     { box-shadow: var(--pk-shadow-hover) !important; }

/* --------------------------------------------------------------------------
   20. Visibility & Overflow（可見性 & 溢出）
   -------------------------------------------------------------------------- */
.pk-visible        { visibility: visible !important; }
.pk-invisible      { visibility: hidden !important; }
.pk-overflow-hidden { overflow: hidden !important; }
.pk-overflow-auto   { overflow: auto !important; }

/* --------------------------------------------------------------------------
   21. Width & Height Helpers（寬高輔助）
   -------------------------------------------------------------------------- */
.pk-w-100  { width: 100% !important; }
.pk-w-auto { width: auto !important; }
.pk-h-100  { height: 100% !important; }
.pk-h-auto { height: auto !important; }

/* --------------------------------------------------------------------------
   22. Cursor Helpers
   -------------------------------------------------------------------------- */
.pk-cursor-pointer   { cursor: pointer !important; }
.pk-cursor-default   { cursor: default !important; }
.pk-cursor-not-allowed { cursor: not-allowed !important; }

/* --------------------------------------------------------------------------
   23. Float & Clearfix
   -------------------------------------------------------------------------- */
.pk-float-left   { float: left !important; }
.pk-float-right  { float: right !important; }
.pk-float-none   { float: none !important; }
.pk-clearfix::after {
  display: block;
  content: "";
  clear: both;
}

/* --------------------------------------------------------------------------
   24. Responsive Visibility（響應式顯示/隱藏）
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .pk-hidden-xs { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .pk-hidden-sm { display: none !important; }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .pk-hidden-md { display: none !important; }
}

@media (min-width: 1200px) {
  .pk-hidden-lg { display: none !important; }
}

@media (max-width: 767px) {
  .pk-visible-xs { display: block !important; }
}

@media (min-width: 768px) {
  .pk-visible-xs { display: none !important; }
}

/* --------------------------------------------------------------------------
   25. Progress Bar（進度條）
   -------------------------------------------------------------------------- */
.pk-progress {
  height: 8px;
  background-color: var(--pk-border-light);
  border-radius: 50px;
  overflow: hidden;
  margin-bottom: 15px;
}

.pk-progress-bar {
  height: 100%;
  background: linear-gradient(135deg, var(--pk-secondary) 0%, var(--pk-primary) 100%);
  border-radius: 50px;
  transition: width 0.6s ease;
}

.pk-progress-bar-success { background: var(--pk-success); }
.pk-progress-bar-info    { background: var(--pk-info); }
.pk-progress-bar-warning { background: var(--pk-warning); }
.pk-progress-bar-danger  { background: var(--pk-danger); }

.pk-progress-lg { height: 14px; }
.pk-progress-sm { height: 4px; }

/* 動態等待進度條（條紋滑動） */
.pk-progress-animated {
  height: 2rem;
  border-radius: 0.25rem;
}
.pk-progress-bar-animated {
  background-color: var(--pk-success);
  background-image: linear-gradient(
    45deg,
    rgba(255,255,255,.3) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255,255,255,.3) 50%,
    rgba(255,255,255,.3) 75%,
    transparent 75%,
    transparent
  );
  background-size: 2rem 2rem;
  animation: pk-progress-stripes 1s linear infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  letter-spacing: 2px;
  border-radius: inherit;
}
.pk-progress-bar-animated::after {
  content: "處理中，請稍候...";
}
@keyframes pk-progress-stripes {
  from { background-position: 2rem 0; }
  to   { background-position: 0 0; }
}

/* --------------------------------------------------------------------------
   26. Tooltip Indicator（提示標記）
   -------------------------------------------------------------------------- */
.pk-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--pk-text-muted);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: help;
  vertical-align: middle;
  margin-left: 4px;
}

.pk-tip::after {
  content: '?';
}

/* --------------------------------------------------------------------------
   27. Developer Template Helpers（Developer 範本輔助樣式）
   [PK自訂樣式]
   -------------------------------------------------------------------------- */
.pk-page-root {
  padding-top: 0;
}

/* 與舊版頁面一致：內容若緊接 pkHeader，依斷點保留對應的 header offset。 */
#pkdv .pkHeader + .pk-page-root {
  padding-top: 122px;
}

@media (min-width: 768px) {
  #pkdv .pkHeader + .pk-page-root {
    padding-top: 120px;
  }
}

@media (min-width: 1200px) {
  #pkdv .pkHeader + .pk-page-root {
    padding-top: 148px;
  }
}

.pk-template-page {
  padding-top: 16px;
  padding-bottom: 24px;
}

.pk-template-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid #d7e7e4;
  border-radius: 10px;
  background: linear-gradient(180deg, #f4fbfa 0%, #ffffff 100%);
}

.pk-template-title {
  margin: 0;
  color: #1f4642;
  font-size: 26px;
  font-weight: 700;
}

.pk-template-subtitle {
  margin: 6px 0 0;
  color: #5f7672;
  font-size: 14px;
}

.pk-template-actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pk-template-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none !important;
}

.pk-template-card {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.pk-template-card:hover {
  box-shadow: 0 8px 18px rgba(0, 87, 82, 0.12);
  transform: translateY(-1px);
}

.pk-template-list > li {
  margin-bottom: 8px;
}

.pk-template-list > li:last-child {
  margin-bottom: 0;
}

/* 欄位間距：避免 row 內 col 緊貼 */
.pk-row-gap {
  margin-left: -8px;
  margin-right: -8px;
}

.pk-row-gap > [class*="col-"] {
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom: 12px;
}

@media (max-width: 767px) {
  .pk-template-header {
    flex-direction: column;
    align-items: stretch;
  }

  .pk-template-title {
    font-size: 22px;
  }

  .pk-row-gap {
    margin-left: -6px;
    margin-right: -6px;
  }

  .pk-row-gap > [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
    margin-bottom: 10px;
  }
}

/* --------------------------------------------------------------------------
   28. 產品頁手機版固定底部購買列
   [PK自訂樣式]
   -------------------------------------------------------------------------- */
#pkdv .pk-mobile-buy-bar {
  display: none;
}

@media (max-width: 991px) {
  #pkdv .pk-mobile-buy-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1020;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
  }

  #pkdv .pk-mobile-buy-bar.pk-hidden {
    display: none;
  }

  #pkdv .pk-mobile-buy-btn {
    flex: 1;
  }
}

/* --------------------------------------------------------------------------
   29. 產品頁 Tags 關鍵字排版
   [PK自訂樣式]
   -------------------------------------------------------------------------- */
#pkdv .productDescription-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
}

#pkdv .productDescription-keywords-item {
  display: inline-block;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   30. Tag 標籤元件（pk-tag）
   [PK自訂樣式]

   輕量文字標籤，適用於分類、關鍵字、狀態提示等場景。
   支援 <span> 與 <a>，<a> 時自帶 hover 效果。

   範例 HTML：
   <span class="pk-tag">預設</span>
   <span class="pk-tag pk-tag-primary">Primary</span>
   <a href="#" class="pk-tag pk-tag-info">可點擊</a>

   搭配容器使用（自動間距）：
   <div class="pk-tag-list">
     <span class="pk-tag pk-tag-success">Tag1</span>
     <span class="pk-tag pk-tag-warning">Tag2</span>
   </div>
   -------------------------------------------------------------------------- */
.pk-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pk-tag {
  display: inline-block;
  padding: 4px 10px;
  background: #f5f5f5;
  color: #555;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid #e0e0e0;
  text-decoration: none;
  line-height: 1.4;
}

a.pk-tag,
a.pk-tag:visited {
  text-decoration: none;
}

a.pk-tag:hover,
a.pk-tag:focus {
  text-decoration: none;
  filter: brightness(0.92);
  outline: none;
}

a.pk-tag:active {
  filter: brightness(0.85);
}

/* --- 色彩變體（#pkdv a 優先權覆蓋 pk-layout.css） --- */
.pk-tag-primary,
#pkdv a.pk-tag-primary,
#pkdv a.pk-tag-primary:visited,
#pkdv a.pk-tag-primary:hover {
  background: rgba(0, 87, 82, 0.08);
  color: var(--pk-primary);
  border-color: rgba(0, 87, 82, 0.25);
}

.pk-tag-success,
#pkdv a.pk-tag-success,
#pkdv a.pk-tag-success:visited,
#pkdv a.pk-tag-success:hover {
  background: #f0f9f0;
  color: #3d8b3d;
  border-color: #c8e6c8;
}

.pk-tag-info,
#pkdv a.pk-tag-info,
#pkdv a.pk-tag-info:visited,
#pkdv a.pk-tag-info:hover {
  background: #edf7fc;
  color: #31708f;
  border-color: #bce8f1;
}

.pk-tag-warning,
#pkdv a.pk-tag-warning,
#pkdv a.pk-tag-warning:visited,
#pkdv a.pk-tag-warning:hover {
  background: #fef8ec;
  color: #8a6d3b;
  border-color: #faebcc;
}

.pk-tag-danger,
#pkdv a.pk-tag-danger,
#pkdv a.pk-tag-danger:visited,
#pkdv a.pk-tag-danger:hover {
  background: #fdf2f2;
  color: #a94442;
  border-color: #f2d0ce;
}

.pk-tag-light,
#pkdv a.pk-tag-light,
#pkdv a.pk-tag-light:visited,
#pkdv a.pk-tag-light:hover {
  background: #fafafa;
  color: #666;
  border-color: #e8e8e8;
}

/* --------------------------------------------------------------------------
   31. Developer Portal 入口頁
   [PK自訂樣式]
   -------------------------------------------------------------------------- */

/* 頁頭品牌條 */
.pk-devportal-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  margin-bottom: 20px;
  border-radius: var(--pk-radius-lg);
  background: linear-gradient(135deg, #005752 0%, #007a6f 60%, #008c78 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.pk-devportal-hero::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 180px;
  height: 180px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  pointer-events: none;
}

.pk-devportal-hero::after {
  content: '';
  position: absolute;
  bottom: -50px;
  right: 80px;
  width: 120px;
  height: 120px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 50%;
  pointer-events: none;
}

.pk-devportal-hero-body {
  position: relative;
  z-index: 1;
}

.pk-devportal-hero-title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.2px;
}

.pk-devportal-hero-sub {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

.pk-devportal-hero-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.pk-devportal-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--pk-radius);
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.12);
  color: #fff !important;
  text-decoration: none !important;
  transition: background 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}

.pk-devportal-hero-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.65);
  text-decoration: none !important;
}

/* 統計列 */
.pk-devportal-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.pk-devportal-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--pk-bg-white);
  border: 1px solid var(--pk-border-light);
  border-radius: var(--pk-radius-lg);
  flex: 1;
  min-width: 140px;
}

.pk-devportal-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--pk-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

.pk-devportal-stat-icon-primary {
  background: rgba(0, 87, 82, 0.1);
  color: var(--pk-primary);
}

.pk-devportal-stat-icon-info {
  background: rgba(91, 192, 222, 0.15);
  color: #31708f;
}

.pk-devportal-stat-icon-success {
  background: rgba(92, 184, 92, 0.15);
  color: #3d8b3d;
}

.pk-devportal-stat-body {}

.pk-devportal-stat-val {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--pk-text-main);
  line-height: 1.2;
}

.pk-devportal-stat-label {
  display: block;
  font-size: 11px;
  color: var(--pk-text-muted);
  margin-top: 1px;
}

/* 搜尋區 */
.pk-devportal-search-wrap {
  padding: 16px 20px;
  margin-bottom: 20px;
  background: var(--pk-bg-white);
  border: 1px solid var(--pk-border-light);
  border-radius: var(--pk-radius-lg);
}

.pk-devportal-search-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pk-devportal-search-count {
  font-size: 12px;
  color: var(--pk-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.pk-devportal-search-count strong {
  color: var(--pk-primary);
  font-weight: 700;
}

/* 分類卡片 */
.pk-devportal-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
}

.pk-devportal-group-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.pk-devportal-group-icon-form {
  background: rgba(0, 87, 82, 0.1);
  color: var(--pk-primary);
}

.pk-devportal-group-icon-list {
  background: rgba(91, 192, 222, 0.15);
  color: #31708f;
}

.pk-devportal-group-icon-component {
  background: rgba(92, 184, 92, 0.15);
  color: #3d8b3d;
}

.pk-devportal-group-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--pk-text-main);
  margin: 0;
  flex: 1;
}

.pk-devportal-group-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--pk-bg-light);
  color: var(--pk-text-muted);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--pk-border-light);
}

/* 範本項目列表 */
.pk-devportal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--pk-border-light);
}

.pk-devportal-item {
  border-bottom: 1px solid var(--pk-border-light);
  transition: background 0.15s ease;
}

.pk-devportal-item:last-child {
  border-bottom: none;
}

.pk-devportal-item:hover {
  background: var(--pk-bg-light);
}

.pk-devportal-item-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  text-decoration: none !important;
  color: var(--pk-text-main) !important;
}

.pk-devportal-item-link:hover {
  color: var(--pk-primary) !important;
}

.pk-devportal-item-arrow {
  margin-left: auto;
  font-size: 11px;
  color: var(--pk-text-muted);
  flex-shrink: 0;
  transition: transform 0.15s ease, color 0.15s ease;
}

.pk-devportal-item:hover .pk-devportal-item-arrow {
  transform: translateX(2px);
  color: var(--pk-primary);
}

.pk-devportal-item-body {
  flex: 1;
  min-width: 0;
}

.pk-devportal-item-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.pk-devportal-item-desc {
  display: block;
  font-size: 11px;
  color: var(--pk-text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pk-devportal-item-icon {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  background: var(--pk-bg-light);
  color: var(--pk-text-secondary);
  border: 1px solid var(--pk-border-light);
}

/* 空搜尋結果提示 */
.pk-devportal-empty {
  display: none;
  padding: 32px 16px;
  text-align: center;
  color: var(--pk-text-muted);
  font-size: 13px;
}

.pk-devportal-empty.visible {
  display: block;
}

@media (max-width: 767px) {
  .pk-devportal-hero {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }

  .pk-devportal-hero-actions {
    flex-wrap: wrap;
  }

  .pk-devportal-hero-title {
    font-size: 18px;
  }

  .pk-devportal-stats {
    gap: 8px;
  }

  .pk-devportal-stat {
    min-width: 120px;
  }
}