/* 梅侍 cs-bot 後台 樣式（規格 §7.1）
 *
 * 🔴 ⛔ 本檔**不是**從 plumate-ad-system/dashboard/css/style.css 照抄的。
 *    我開檔逐條看過那支 348 行，裡面有大量綁 ad-system 專有結構的規則：
 *      .obj-badge/.obj-awareness/.obj-traffic/.obj-engagement/.obj-conversion（投廣目標）
 *      .ad-cell/.ad-name/.ad-adset/.ad-campaign（廣告三層欄）
 *      .dr-bar/.dr-select/.dr-custom/.dr-input/.dr-sep/.dr-btn/.dr-display（日期區間器）
 *      #alert-banner/.alert-*（止損警報橫幅，含 snooze/resolve 按鈕）
 *      .change-pwd-btn（首次登入改密碼 modal，本後台刻意不做）
 *      .dot/.dot-good/.dot-watch/.dot-bad、.filter-btn、.status-group、.kpi-change
 *    ⇒ 全部搬過來＝搬一堆永遠不會被用到、卻會誤導下一棒的死樣式。
 *    本檔只沿用「品牌色票 ＋ header/nav/card/table 這幾個泛用原件」，其餘自己寫。
 */

:root {
  --amber:      #C8960C;
  --plum-pink:  #E8A4B8;
  --dark-green: #2D5016;
  --cream:      #F9F6F0;
  --gray:       #6B7280;
  --border:     #E5E7EB;
  --ok:         #10B981;
  --warn:       #F59E0B;
  --bad:        #EF4444;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang TC', sans-serif;
  background: var(--cream);
  color: #1F2937;
  line-height: 1.5;
}

/* ---- Header / Nav ---- */
.header {
  background: var(--dark-green); color: #fff;
  padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.header h1 { font-size: 1.05rem; font-weight: 700; }
.header .meta { font-size: 0.78rem; opacity: 0.85; }

.nav {
  background: #fff; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 0; overflow-x: auto;
}
.nav a {
  padding: 10px 18px; text-decoration: none; color: var(--gray);
  font-size: 0.86rem; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.nav a:hover, .nav a.active { color: var(--dark-green); border-bottom-color: var(--amber); }
.nav .spacer { margin-left: auto; }

.btn {
  padding: 7px 14px; border-radius: 8px; border: 1px solid var(--border);
  background: #fff; color: #374151; font-size: 0.83rem; cursor: pointer;
}
.btn:hover { border-color: var(--dark-green); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--dark-green); color: #fff; border-color: var(--dark-green); }
.btn-danger  { background: var(--bad); color: #fff; border-color: var(--bad); }

.container { max-width: 1160px; margin: 0 auto; padding: 16px 20px 48px; }

/* ---- 🔴 §7.2.1 總燈號：一屏最上方、最醒目的那一條 ---- */
.banner {
  border-radius: 12px; padding: 16px 20px; margin-bottom: 14px;
  border: 2px solid transparent;
}
.banner-title { font-size: 1.5rem; font-weight: 800; letter-spacing: 0.02em; }
.banner-sub { font-size: 0.85rem; margin-top: 4px; opacity: 0.9; }
.banner-red   { background: #FEE2E2; border-color: var(--bad); color: #7F1D1D; }
.banner-green { background: #D1FAE5; border-color: var(--ok);  color: #065F46; }
/* 🔴 C-2：有「本次判不了」的規則時用琥珀。⛔ 它不是第六條紅燈，
   紅的定義仍是 R-1∨R-2∨R-3∨R-4∨R-6，這只是 render 層對 unknowns 的呈現。 */
.banner-amber { background: #FEF3C7; border-color: var(--warn); color: #78350F; }
.banner-list { margin: 10px 0 0 20px; font-size: 0.9rem; }
.banner-list li { margin-bottom: 6px; }
.banner-unknown {
  margin-top: 12px; padding: 10px 12px; border-radius: 8px;
  background: #FEF3C7; color: #78350F; font-size: 0.82rem;
}
.banner-unknown ul { margin: 6px 0 0 18px; }

/* ---- 卡片 ---- */
.card {
  background: #fff; border-radius: 12px; padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.kpi-row {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 10px; margin-bottom: 10px;
}
.kpi-row .card { padding: 12px 14px; }
.kpi-row .label { font-size: 0.72rem; color: var(--gray); margin-bottom: 4px; }
.kpi-row .value { font-size: 1.5rem; font-weight: 700; color: #111827; }
.row-title {
  font-size: 0.82rem; font-weight: 700; color: var(--gray);
  margin: 4px 0 6px;
}

.section { margin-top: 22px; }
.section > h2 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---- 表格 ---- */
table.mini, table.list { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
table.mini th, table.list th {
  text-align: left; padding: 8px 10px; font-size: 0.72rem; color: var(--gray);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.mini td, table.list td {
  padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top;
}
td.num, td.code { white-space: nowrap; font-variant-numeric: tabular-nums; }

.pill {
  display: inline-block; padding: 1px 9px; border-radius: 10px;
  font-size: 0.74rem; font-weight: 700;
}
.st-red     { background: #FEE2E2; color: #991B1B; }
.st-ok      { background: #D1FAE5; color: #065F46; }
.st-unknown { background: #FEF3C7; color: #92400E; }
.st-red-text { color: #991B1B; font-weight: 600; }
.st-ok-text  { color: #065F46; font-weight: 600; }

.muted { color: var(--gray); font-size: 0.8rem; }
.fineprint { color: var(--gray); font-size: 0.76rem; margin-top: 8px; }
.fineprint li { margin-left: 18px; margin-bottom: 3px; }

.notice {
  background: #FEF3C7; color: #78350F; border-radius: 8px;
  padding: 9px 12px; font-size: 0.82rem; margin-bottom: 12px;
}
.notice-pii { background: #FEE2E2; color: #7F1D1D; font-weight: 600; }
/* L-3：讀取失敗／截斷專用。與 .notice-pii 分開，⛔ 不共用個資提示的 class。 */
.notice-error { background: #FEE2E2; color: #7F1D1D; font-weight: 600; border: 1px solid #FCA5A5; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.filters input, .filters select {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 0.85rem; color: #374151;
}
.filters label { font-size: 0.8rem; color: var(--gray); }

.msg { white-space: pre-wrap; word-break: break-word; max-width: 620px; }

@media (max-width: 900px) {
  .kpi-row { grid-template-columns: repeat(3, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
}