/* knowledge.css — 知識資產庫「內容項目」列表（v39）
   core/contentItemView.js 產生對應 markup。共用 base.css 的 var(--*) token
   與 edm.css 的色階（.edm-good/.edm-ok/.edm-low/.edm-na）與 KPI 卡（.edm-kpi*）。

   注意：utilities.css 是手工維護的 Tailwind 子集且產生器不在 repo，
   未定義的 utility class 會靜默失效，故本頁版面一律寫在此檔，不新增 utility class。 */

/* ── 基準說明列（KPI 卡下方）── */
.kb-baseline-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 8px 12px; margin-bottom: 20px;
  background: var(--muted); border: 1px solid var(--card-border); border-radius: var(--radius-sm);
}
.kb-baseline-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.kb-baseline-lbl {
  font-size: 11px; font-weight: 700; color: var(--muted-foreground);
  letter-spacing: .04em; margin-right: 2px;
}
.kb-baseline-note, .kb-baseline-warn { font-size: 11px; line-height: 1.6; }
.kb-baseline-note { color: var(--muted-foreground); }
.kb-baseline-note b { color: var(--foreground); font-weight: 700; }
.kb-baseline-warn { color: #B45309; font-weight: 600; }
.kb-baseline-warn b { font-weight: 700; }

/* ── 專案卡片 ── */
.kb-card {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius-lg); box-shadow: 0 1px 4px rgba(0,0,0,.04);
  margin-bottom: 12px; overflow: hidden;
}

.kb-card-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 10px 16px; background: var(--muted); border-bottom: 1px solid var(--card-border);
}
.kb-proj-name {
  font-size: 13px; font-weight: 600; color: var(--foreground);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 200px;
}
.kb-card-counts { font-size: 11px; color: var(--muted-foreground); white-space: nowrap; margin-left: auto; }

/* 卡片主體：該專案最新一封 EDM 的成效 */
.kb-hero {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 420px;
  gap: 16px; align-items: center; padding: 14px 16px;
  cursor: pointer; transition: background-color .15s;
}
.kb-hero:hover { background: var(--muted-hover); }
.kb-hero-empty { display: block; padding: 16px; cursor: default; }
.kb-hero-empty:hover { background: transparent; }
.kb-hero-main { min-width: 0; }
.kb-hero-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }

.kb-batch-hint {
  font-size: 10px; padding: 1px 7px; border-radius: var(--radius-full);
  background: #FEF3C7; color: #B45309; font-weight: 600; white-space: nowrap;
}

.kb-thumb {
  width: 96px; height: 72px; border-radius: var(--radius-sm);
  background: var(--muted); border: 1px solid var(--card-border);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
/* EDM 網頁版是長圖，object-position: top 讓縮圖顯示主視覺而非中段內文 */
.kb-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.kb-thumb-empty, .kb-thumb-ph { font-size: 24px; color: var(--border-strong); }
.kb-thumb-big { width: 100% !important; height: 240px !important; }

.kb-title {
  font-size: 14px; font-weight: 600; color: var(--foreground); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kb-seg { font-size: 11px; color: var(--primary-hover); font-weight: 600; margin-top: 2px; }
.kb-summary {
  font-size: 12px; color: var(--muted-foreground); line-height: 1.55; margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kb-row-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.kb-date { font-size: 11px; color: var(--muted-foreground); margin-left: auto; white-space: nowrap; }

/* ── 收合區塊（其他 EDM／素材）── */
.kb-folds { border-top: 1px solid var(--card-border); }
.kb-fold {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 8px 16px; background: none; border: 0; border-top: 1px solid var(--muted);
  font-size: 12px; color: var(--muted-foreground); cursor: pointer; text-align: left;
}
.kb-folds > .kb-fold:first-child { border-top: 0; }
.kb-fold:hover { background: var(--muted-hover); color: var(--foreground); }
.kb-fold-caret { font-size: 10px; }
.kb-fold-label { font-weight: 600; }
.kb-fold-body { background: var(--muted); }

.kb-sub-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  padding: 8px 16px; border-top: 1px solid var(--card-border);
  font-size: 12px; color: var(--muted-foreground); cursor: pointer;
}
.kb-sub-row:hover { background: var(--muted-hover); }
.kb-sub-name {
  font-weight: 600; color: var(--foreground); flex: 1 1 180px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kb-sub-date, .kb-sub-stat { white-space: nowrap; }
.kb-sub-stat b { font-weight: 700; }
.kb-sub-link { color: var(--primary); white-space: nowrap; }
.kb-sub-link:hover { text-decoration: underline; }

/* ── 徽章與 chip ── */
.kb-badge {
  font-size: 10px; font-weight: 700; padding: 2px 7px;
  border-radius: var(--radius-full); white-space: nowrap;
}
.kb-badge-edm    { background: #EDE9FE; color: #6D28D9; }
.kb-badge-design { background: #F3E8FF; color: #7E22CE; }
.kb-badge-video  { background: #DBEAFE; color: #1D4ED8; }

.kb-chip {
  font-size: 11px; padding: 1px 8px; border-radius: var(--radius-full);
  background: var(--muted); color: var(--muted-foreground);
  border: 1px solid var(--card-border); white-space: nowrap;
}
.kb-chip-proj {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600;
  background: var(--primary-soft); color: var(--primary-hover); border-color: transparent; cursor: pointer;
}
.kb-chip-proj:hover { border-color: var(--primary); }
.kb-chip-unmatched { background: #FEF3C7; color: #B45309; border-color: transparent; }
.kb-chip-tag { background: var(--card); }

/* ── 指標三格 ── */
.kb-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kb-metrics-none { display: flex; align-items: center; }
.kb-nometric { font-size: 11px; color: var(--muted-foreground); font-style: italic; }

.kb-metric {
  background: var(--muted); border: 1px solid var(--card-border);
  border-radius: var(--radius-sm); padding: 7px 9px; text-align: center;
}
.kb-metric-lbl { font-size: 10px; color: var(--muted-foreground); letter-spacing: .02em; }
.kb-metric-val { font-size: 17px; font-weight: 700; color: var(--foreground); line-height: 1.25; margin-top: 1px; }
.kb-metric-val b { font-weight: 700; }
.kb-metric .edm-bar { width: 100%; margin-top: 4px; }
.kb-metric-foot { margin-top: 3px; min-height: 14px; }

/* ── 落差（百分點）── */
.kb-delta { font-size: 10px; font-weight: 700; white-space: nowrap; }
.kb-delta-up   { color: var(--success); }
.kb-delta-down { color: var(--danger); }
.kb-delta-flat { color: var(--muted-foreground); font-weight: 600; }
.kb-delta-dim  { color: var(--muted-foreground); }
.kb-delta-na   { color: var(--border-strong); }

/* ── 右側抽屜（沿用 #modal overlay，只改定位與尺寸）── */
#modal.modal-drawer { align-items: stretch; justify-content: flex-end; padding: 0; }
#modal.modal-drawer > #modal-box {
  max-width: 540px; width: 100%; height: 100vh; max-height: 100vh;
  border-radius: 0; overflow-y: auto;
}

.kb-drawer-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; background: var(--card); border-bottom: 1px solid var(--card-border);
}
.kb-drawer-close {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font-size: 16px; color: var(--muted-foreground); padding: 2px 6px; border-radius: var(--radius-sm);
}
.kb-drawer-close:hover { background: var(--muted); color: var(--foreground); }
.kb-drawer-body { padding: 16px 18px 32px; }
.kb-drawer-thumb { margin-bottom: 12px; }
.kb-drawer-title { font-size: 16px; font-weight: 700; color: var(--foreground); line-height: 1.45; margin: 0; }
.kb-drawer-sub { font-size: 12px; color: var(--muted-foreground); margin-top: 4px; }
.kb-drawer-raw {
  font-size: 10px; color: var(--muted-foreground); margin-top: 6px;
  word-break: break-all; line-height: 1.5; opacity: .75;
}
.kb-drawer-ai {
  background: var(--primary-soft); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-top: 12px;
}
.kb-drawer-ai-title { font-size: 11px; font-weight: 700; color: var(--primary-hover); margin-bottom: 4px; }
.kb-drawer-ai p { font-size: 12px; color: var(--foreground); line-height: 1.7; margin: 0; }
.kb-drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* 同專案 EDM 比較表 */
.kb-sib { width: 100%; border-collapse: collapse; font-size: 11px; }
.kb-sib th {
  text-align: left; font-weight: 600; color: var(--muted-foreground);
  padding: 4px 6px; border-bottom: 1px solid var(--border);
}
.kb-sib td { padding: 5px 6px; border-bottom: 1px solid var(--muted); }
.kb-sib td:first-child {
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--foreground);
}
.kb-sib th:not(:first-child), .kb-sib td:not(:first-child) { text-align: right; white-space: nowrap; }
.kb-sib-cur { background: var(--primary-soft); }
.kb-sib-cur td:first-child { font-weight: 700; }

/* ── 窄畫面：指標移到第二行整列 ── */
@media (max-width: 1100px) {
  .kb-row { grid-template-columns: 80px minmax(0, 1fr); }
  .kb-thumb { width: 80px; height: 60px; }
  .kb-metrics, .kb-metrics-none { grid-column: 1 / -1; }
  .kb-date { margin-left: 0; }
}
@media (max-width: 560px) {
  .kb-metrics { grid-template-columns: 1fr; }
  #modal.modal-drawer > #modal-box { max-width: 100%; }
}