/* ═══════════════════════════════════════════════════════════════
   dashboard-pro.css — 專業交易儀表板樣式層（V60+）

   載入於 style.css 之後，覆寫/強化關鍵視覺元件：
     - 左側導航：層級清楚、active 指示條、分組分隔線
     - 頂部 header：更緊湊、狀態條
     - Panels：層次分明、頭部資訊更完整
     - Tables：專業交易表格（數字靠右、monospace、badge 標準化）
     - Badges：統一買/賣/強度/狀態徽章系統
     - 系統思考面板：儀表板式陣列、分數 meter
     - 優化紀錄：決策徽章、顏色對應
     - 文件頁（版本歷史）：沿用 vdoc 風格
═══════════════════════════════════════════════════════════════ */

/* ── 1. 深化色彩系統 ──────────────────────────────────── */
:root {
  /* 新增層次感色調 */
  --bg-base:      #0a0e14;       /* 更深的底色 */
  --bg-panel:     #12171f;       /* 面板 */
  --bg-panel-2:   #1a2029;       /* 面板內層 */
  --bg-card:      #1e242e;       /* 卡片 */
  --bg-card-hi:   #262d38;       /* hover */
  --bg-row:       #171c24;
  --bg-row-alt:   #1a1f28;
  --border:       #2a3241;
  --border-soft:  #222936;
  --border-strong:#3a4356;

  --text-prime:   #e8edf5;
  --text-sec:     #b8c1cf;
  --text-mute:    #ffffff;     /* V185: 改純白 */
  --text-dim:     #ffffff;     /* V184: 改白色 */

  --accent:       #5aa7ff;
  --accent-2:     #7c6bff;
  --accent-strip: linear-gradient(180deg, #5aa7ff, #7c6bff);

  --green:        #26d07c;
  --green-soft:   rgba(38,208,124,.12);
  --green-strong: #19a45f;

  --red:          #ff5c5c;
  --red-soft:     rgba(255,92,92,.12);
  --red-strong:   #e63946;

  --yellow:       #ffb020;
  --yellow-soft:  rgba(255,176,32,.14);

  --purple:       #b191ff;
  --purple-soft:  rgba(177,145,255,.12);

  --shadow-sm:    0 2px 6px rgba(0,0,0,.3);
  --shadow:       0 4px 14px rgba(0,0,0,.4);
  --shadow-lg:    0 8px 24px rgba(0,0,0,.5);

  --font-num:     'JetBrains Mono', 'SF Mono', 'Fira Code', Consolas, monospace;
}

html, body { background: var(--bg-base); color: var(--text-prime); }

/* ── 2. Header 再精修 ─────────────────────────────────── */
.header {
  background: linear-gradient(180deg, #141a23 0%, #12171f 100%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,.02);
}
.header__brand {
  font-weight: 700;
  letter-spacing: .3px;
}
.header__brand-icon {
  background: var(--accent-strip);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── 3. 左側導航精修 ──────────────────────────────────── */
.sidebar {
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  padding: 10px 0 20px;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }

.nav-section {
  padding: 14px 18px 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  position: relative;
}
.nav-section::after {
  content: "";
  position: absolute;
  left: 18px; right: 16px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--border-soft), transparent);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px 9px 18px;
  margin: 1px 10px;
  color: var(--text-sec);
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background .14s, color .14s, transform .1s;
  position: relative;
  letter-spacing: .2px;
  border-left: 2px solid transparent;
}
.nav-item:hover {
  background: var(--bg-card);
  color: var(--text-prime);
}
.nav-item.active {
  background: linear-gradient(90deg, rgba(90,167,255,.14) 0%, rgba(90,167,255,.04) 100%);
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 600;
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: -10px; top: 50%;
  width: 3px; height: 22px;
  background: var(--accent-strip);
  border-radius: 0 3px 3px 0;
  transform: translateY(-50%);
  box-shadow: 0 0 12px rgba(90,167,255,.5);
}
.nav-item__icon {
  font-size: 15px;
  width: 20px;
  text-align: center;
  filter: grayscale(.15);
  flex-shrink: 0;
}
.nav-item.active .nav-item__icon { filter: none; }

/* nav 右側 badge（可有可無） */
.nav-badge {
  margin-left: auto;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--bg-card-hi);
  color: var(--text-mute);
  font-weight: 700;
  font-family: var(--font-num);
}
.nav-item.active .nav-badge { background: rgba(90,167,255,.2); color: var(--accent); }

/* ── 4. Main 區更緊湊、層次更明顯 ──────────────────────── */
.main {
  padding: 20px 24px 32px;
  gap: 18px;
}
.page-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.2px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}
.page-title::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 22px;
  background: var(--accent-strip);
  border-radius: 2px;
}
.page-subtitle {
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: .2px;
}

/* ── 5. Stat Card（統計卡）升級 ───────────────────────── */
.stat-card {
  background: linear-gradient(160deg, var(--bg-card) 0%, var(--bg-row) 100%);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  transition: border-color .18s, transform .1s;
}
.stat-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--border-strong);
  transition: background .18s;
}
.stat-card:hover {
  border-color: var(--border-strong);
}
.stat-card:hover::before { background: var(--accent); }
.stat-card__label {
  font-size: 10.5px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 1.1px;
  font-weight: 700;
  margin-bottom: 8px;
}
.stat-card__value {
  font-size: 23px;
  font-weight: 700;
  font-family: var(--font-num);
  letter-spacing: -.8px;
  color: var(--text-prime);
  line-height: 1.2;
}
.stat-card__value.accent { color: var(--accent); }
.stat-card__sub {
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 6px;
  font-weight: 500;
}
.stat-card__change {
  font-size: 13px;
  font-weight: 700;
  margin-top: 5px;
  font-family: var(--font-num);
}

/* ── 6. Panel 強化層次 ────────────────────────────────── */
.panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.panel__header {
  padding: 13px 18px;
  background: var(--bg-panel-2);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;
}
.panel__header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel__icon {
  font-size: 15px;
  opacity: .9;
}

/* ── 7. Tables 專業交易表格 ───────────────────────────── */
table {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
thead th {
  background: var(--bg-panel);
  color: var(--text-mute);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
}
tbody tr {
  border-bottom: 1px solid var(--border-soft);
  transition: background .12s;
}
tbody tr:hover { background: var(--bg-card-hi); }
tbody tr:nth-child(even) { background: rgba(255,255,255,.012); }
tbody tr:nth-child(even):hover { background: var(--bg-card-hi); }
td {
  padding: 11px 14px;
  font-size: 12.5px;
  color: var(--text-sec);
  vertical-align: middle;
}
/* 數字右對齊 + 等寬 */
td.num, th.num,
td[data-type="num"], th[data-type="num"] {
  text-align: right;
  font-family: var(--font-num);
  color: var(--text-prime);
}
.td-mono { font-family: var(--font-num); font-size: 12px; }

/* ── 8. Badge 統一系統 ────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  border-radius: 10px;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge--buy,  .badge--bull, .badge--commit  { background: var(--green-soft); color: var(--green); border-color: rgba(38,208,124,.3); }
.badge--sell, .badge--bear, .badge--revert  { background: var(--red-soft);   color: var(--red);   border-color: rgba(255,92,92,.3); }
.badge--hold, .badge--neutral, .badge--idle { background: rgba(125,134,150,.12); color: var(--text-mute); border-color: rgba(125,134,150,.25); }
.badge--warning, .badge--hotfix            { background: var(--yellow-soft); color: var(--yellow); border-color: rgba(255,176,32,.3); }
.badge--info, .badge--baseline             { background: rgba(90,167,255,.12); color: var(--accent); border-color: rgba(90,167,255,.3); }
.badge--strong                             { background: linear-gradient(135deg, var(--green-soft), rgba(38,208,124,.25)); color: var(--green); font-weight: 800; border-color: rgba(38,208,124,.45); }
.badge--moderate                           { background: var(--green-soft); color: var(--green); border-color: rgba(38,208,124,.3); }
.badge--weak                               { background: rgba(125,134,150,.15); color: var(--text-mute); border-color: rgba(125,134,150,.3); }
.badge--purple                             { background: var(--purple-soft); color: var(--purple); border-color: rgba(177,145,255,.3); }

.badge-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: 4px;
}
.badge-dot--live {
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(38,208,124,.6);
  animation: pulseDot 1.6s infinite;
}
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(38,208,124,.55); }
  70% { box-shadow: 0 0 0 6px rgba(38,208,124,0); }
  100% { box-shadow: 0 0 0 0 rgba(38,208,124,0); }
}

/* ── 9. 系統思考狀態面板（儀表板風格）─────────────────── */
#thinking-panel {
  background: linear-gradient(135deg, rgba(90,167,255,.06) 0%, rgba(124,107,255,.06) 100%) !important;
  border: 1px solid rgba(90,167,255,.25) !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  box-shadow: var(--shadow-sm);
  position: relative;
}
#thinking-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(90,167,255,.04) 0%, transparent 50%);
  border-radius: inherit;
  pointer-events: none;
}
#thinking-phase-badge {
  font-family: var(--font-num);
}
#thinking-symbol {
  letter-spacing: -.3px;
}
#thinking-bias.bias-bull { color: var(--green) !important; }
#thinking-bias.bias-bear { color: var(--red) !important; }
#thinking-bias.bias-neutral { color: var(--text-mute) !important; }
.reason-chip {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-sec) !important;
  padding: 5px 11px !important;
  font-size: 11.5px !important;
  border-radius: 14px !important;
  transition: border-color .15s;
  font-weight: 500;
}
.reason-chip:hover {
  border-color: var(--accent) !important;
  color: var(--text-prime) !important;
}

/* 思考分數橫條 meter */
.think-meter {
  display: block;
  width: 100%;
  height: 4px;
  background: var(--bg-row);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
  position: relative;
}
.think-meter__fill {
  height: 100%;
  background: var(--accent);
  transition: width .3s ease;
}
.think-meter--bull .think-meter__fill { background: var(--green); }
.think-meter--bear .think-meter__fill { background: var(--red); }

/* ── 10. 優化紀錄頁 ──────────────────────────────────── */
#best-params-panel {
  background: linear-gradient(135deg, rgba(38,208,124,.07), rgba(90,167,255,.06)) !important;
  border: 1px solid rgba(38,208,124,.25) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-sm);
}
#best-stability-badge {
  font-family: var(--font-num);
  font-size: 11.5px !important;
  background: rgba(38,208,124,.18) !important;
  border: 1px solid rgba(38,208,124,.4);
}

/* 優化輪次列：依決策類型加左邊框顏色 */
tr.opt-row--commit td:first-child { border-left: 3px solid var(--green); }
tr.opt-row--revert td:first-child { border-left: 3px solid var(--red); opacity: .72; }
tr.opt-row--baseline td:first-child { border-left: 3px solid var(--accent); }
tr.opt-row--no_tweak td:first-child { border-left: 3px solid var(--text-dim); opacity: .55; }

/* 優化頁 KPI 摘要 */
.opt-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.opt-kpi {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  position: relative;
}
.opt-kpi__label {
  font-size: 10px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  margin-bottom: 6px;
}
.opt-kpi__value {
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-num);
  letter-spacing: -.5px;
}
.opt-kpi__sub {
  font-size: 11px;
  color: var(--text-mute);
  margin-top: 3px;
}
.opt-kpi--green .opt-kpi__value { color: var(--green); }
.opt-kpi--red   .opt-kpi__value { color: var(--red); }
.opt-kpi--accent .opt-kpi__value { color: var(--accent); }
.opt-kpi--warn  .opt-kpi__value { color: var(--yellow); }

/* ── 11. 交易明細表格（trades）──────────────────────── */
td.trade-type-buy  { color: var(--green); font-weight: 700; }
td.trade-type-sell { color: var(--red);   font-weight: 700; }
td.trade-pnl-pos   { color: var(--green); font-weight: 700; font-family: var(--font-num); text-align: right; }
td.trade-pnl-neg   { color: var(--red);   font-weight: 700; font-family: var(--font-num); text-align: right; }
td.trade-pnl-zero  { color: var(--text-mute); font-family: var(--font-num); text-align: right; }

/* buy/sell 圖示側條 */
.trade-arrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
}
.trade-arrow--buy  { background: var(--green-soft); color: var(--green); }
.trade-arrow--sell { background: var(--red-soft);   color: var(--red); }
.trade-arrow::before {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
}
.trade-arrow--buy::before  { content: "▲"; }
.trade-arrow--sell::before { content: "▼"; }

/* ── 12. 按鈕重樣式 ──────────────────────────────────── */
.btn-sym {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-sec);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all .14s;
  letter-spacing: .2px;
}
.btn-sym:hover {
  background: var(--bg-card-hi);
  border-color: var(--border-strong);
  color: var(--text-prime);
}
.btn-sym:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.btn-resume {
  background: linear-gradient(135deg, var(--green-soft), rgba(38,208,124,.22));
  border: 1px solid rgba(38,208,124,.4);
  color: var(--green);
  padding: 7px 16px;
  font-weight: 700;
  font-size: 12.5px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .14s;
  letter-spacing: .3px;
}
.btn-resume:hover {
  background: linear-gradient(135deg, rgba(38,208,124,.22), rgba(38,208,124,.35));
  box-shadow: 0 0 0 3px rgba(38,208,124,.12);
}
.btn-resume:disabled { opacity: .5; cursor: not-allowed; }
.btn-stop {
  background: var(--red-soft);
  border: 1px solid rgba(255,92,92,.4);
  color: var(--red);
  font-weight: 700;
  border-radius: 6px;
  transition: all .14s;
}
.btn-stop:hover {
  background: rgba(255,92,92,.22);
  box-shadow: 0 0 0 3px rgba(255,92,92,.12);
}

/* V211 一鍵手動備份按鈕 */
.btn-backup {
  background: rgba(99,179,255,.14);
  border: 1px solid rgba(99,179,255,.4);
  color: #63b3ff;
  font-weight: 700;
  border-radius: 6px;
  padding: 6px 12px;
  margin-right: 6px;
  cursor: pointer;
  transition: all .14s;
}
.btn-backup:hover {
  background: rgba(99,179,255,.22);
  box-shadow: 0 0 0 3px rgba(99,179,255,.12);
}
.btn-backup:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.btn-backup.is-running {
  background: rgba(255,193,7,.22);
  border-color: rgba(255,193,7,.5);
  color: #ffc107;
  animation: backupPulse 1.4s infinite;
}
@keyframes backupPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* V220 即時台北時鐘 */
.taipei-clock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(99,179,255,.10);
  border: 1px solid rgba(99,179,255,.35);
  border-radius: 6px;
  font-family: var(--font-num, 'Roboto Mono', monospace);
  font-size: 13px;
  color: #b3d9ff;
  margin: 0 12px;
  letter-spacing: 0.5px;
  user-select: none;
}
.taipei-clock__icon {
  font-size: 14px;
}
.taipei-clock__time {
  font-weight: 700;
  color: #d4ebff;
  min-width: 156px;
  text-align: center;
}
.taipei-clock__tz {
  font-size: 10px;
  color: #7fa8d6;
  font-weight: 600;
}

/* ── 13. 空資料 / 載入中樣式 ────────────────────────── */
.no-data {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-dim);
  font-size: 13px;
  font-style: italic;
}
.no-data::before {
  content: "○";
  display: block;
  font-size: 28px;
  margin-bottom: 6px;
  opacity: .4;
  font-style: normal;
}

/* ── 14. Scroll bar 全站統一 ─────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-panel); }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ── 15. Modal 強化 ─────────────────────────────────── */
.trade-reason-overlay.active {
  backdrop-filter: blur(3px);
  background: rgba(0,0,0,.72);
}
.trade-reason-modal {
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  border-radius: 12px;
}
.trade-reason-modal__header {
  background: var(--bg-panel-2);
  border-bottom: 1px solid var(--border);
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 700;
}
.trade-reason-modal__close {
  background: transparent;
  border: 1px solid transparent;
  padding: 4px 10px;
  border-radius: 5px;
  transition: all .14s;
}
.trade-reason-modal__close:hover {
  background: var(--red-soft);
  color: var(--red);
  border-color: rgba(255,92,92,.3);
}

/* ── 16. 分數視覺化：0-100 橫條 ─────────────────────── */
.score-bar {
  display: inline-block;
  width: 60px;
  height: 6px;
  background: var(--bg-row);
  border-radius: 3px;
  overflow: hidden;
  vertical-align: middle;
  margin-left: 6px;
  position: relative;
}
.score-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--red), var(--yellow), var(--green));
  transition: width .3s ease;
}

/* ── 17. 頁面頂部 action bar ────────────────────────── */
.page-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ── 18. 橫線分隔 ───────────────────────────────────── */
.hr-soft {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-soft) 15%, var(--border-soft) 85%, transparent);
  margin: 18px 0;
  border: none;
}

/* ── 19. Tooltip 統一 ───────────────────────────────── */
[title] { cursor: help; }

/* ── 20. 改善 footer 版權資訊（若有）─────────────────── */
.main > :last-child { padding-bottom: 20px; }

/* ── 21. AI Provider Badge（V74+：標示 AI 來源）────── */
.ai-provider-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 10px;
  padding: 3px 9px 3px 6px;
  background: linear-gradient(135deg, rgba(217, 119, 87, 0.14), rgba(217, 119, 87, 0.08));
  border: 1px solid rgba(217, 119, 87, 0.35);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  color: #e7a389;
  letter-spacing: 0.2px;
  transition: all .15s;
  cursor: help;
  white-space: nowrap;
}
.ai-provider-badge:hover {
  background: linear-gradient(135deg, rgba(217, 119, 87, 0.22), rgba(217, 119, 87, 0.12));
  border-color: rgba(217, 119, 87, 0.6);
  color: #f0b89a;
  transform: translateY(-1px);
}
.ai-provider-badge__logo {
  display: inline-flex;
  align-items: center;
  color: #d97757;           /* Anthropic 品牌橘 */
  filter: drop-shadow(0 0 3px rgba(217, 119, 87, 0.4));
}
.ai-provider-badge__text {
  font-family: var(--font-num);
  font-size: 10.5px;
}

/* 小尺寸版（用於表格單列 / inline 顯示）*/
.ai-provider-badge--sm {
  padding: 1px 6px 1px 4px;
  font-size: 9.5px;
  margin-left: 6px;
  gap: 3px;
}
.ai-provider-badge--sm .ai-provider-badge__logo svg {
  width: 10px; height: 10px;
}
.ai-provider-badge--sm .ai-provider-badge__text {
  font-size: 9px;
}

/* 可點擊版本（連到官網說明）*/
a.ai-provider-badge { text-decoration: none; }
a.ai-provider-badge:hover { text-decoration: none; }