/* =========================================
   etf-detail.css — ETF 詳情頁(etf/{symbol}.html)
   依賴 main.css 的設計 token
   ========================================= */

.etf-detail { padding: var(--space-8) 0 var(--section-gap-mobile); }

.etf-crumb { font-size: var(--font-size-sm); color: var(--color-text-light); margin-bottom: var(--space-4); }
.etf-crumb a { color: var(--color-secondary); text-decoration: none; }
.etf-crumb a:hover { text-decoration: underline; }

/* ── Header ─────────────────────────────────────────────── */
.etf-head {
  background: linear-gradient(180deg, var(--color-surface-container-high) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-sm);
}
.etf-head__id { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); }
.etf-head__sym {
  font-size: var(--font-size-2xl); font-weight: 700; font-variant-numeric: tabular-nums;
  color: #fff; background: var(--color-primary);
  padding: 2px 12px; border-radius: var(--radius-md);
}
.etf-head__name { font-size: var(--font-size-2xl); font-weight: 700; color: var(--color-on-surface); }

.etf-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); }
.etf-stat { display: flex; flex-direction: column; gap: 2px; }
.etf-stat__label { font-size: var(--font-size-xs); color: var(--color-text-light); }
.etf-stat__val { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-on-surface); font-variant-numeric: tabular-nums; }

/* ── Sections ───────────────────────────────────────────── */
.etf-section { margin-bottom: var(--space-8); }
.etf-section__title {
  font-size: var(--font-size-xl); font-weight: 700; color: var(--color-on-surface);
  margin-bottom: var(--space-4); padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-primary);
  display: flex; align-items: baseline; gap: var(--space-2);
}
.etf-section__hint { font-size: var(--font-size-xs); font-weight: 500; color: var(--color-text-light); }

/* Basic facts — definition list grid */
.etf-facts {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--color-border);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden;
}
.etf-fact { display: flex; justify-content: space-between; gap: var(--space-4); background: var(--color-surface); padding: var(--space-3) var(--space-4); }
.etf-fact dt { color: var(--color-text-light); font-size: var(--font-size-sm); flex: 0 0 auto; }
.etf-fact dd { color: var(--color-on-surface); font-size: var(--font-size-sm); font-weight: 500; text-align: right; }
.etf-fact dd a { color: var(--color-secondary); text-decoration: none; }
.etf-cat { display: inline-flex; align-items: center; gap: 5px; }
.etf-cat .dot { width: 8px; height: 8px; border-radius: 50%; }

/* Tables (perf / dividends / holdings) */
.etf-table-wrap {
  overflow-x: auto; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.etf-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.etf-table thead th {
  text-align: left; font-weight: 600; color: var(--color-on-surface-variant);
  background: var(--color-surface-low); padding: var(--space-3) var(--space-4);
  white-space: nowrap; border-bottom: 1px solid var(--color-border-medium);
}
.etf-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.etf-table tbody tr:last-child td { border-bottom: none; }
.etf-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.etf-table .muted { color: var(--color-text-light); }

.etf-perf td:first-child { color: var(--color-on-surface-variant); }
.etf-perf__since td { border-top: 1px solid var(--color-border-medium); font-weight: 600; }

.up { color: #E53935; font-weight: 600; }    /* 台股慣例:紅漲 */
.down { color: #43A047; font-weight: 600; }   /* 綠跌 */
.muted { color: var(--color-text-light); }

.etf-chips-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.etf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--radius-full);
  background: var(--color-surface-container); font-size: var(--font-size-sm); color: var(--color-on-surface-variant);
}
.etf-chip b { color: var(--color-on-surface); }

/* Holdings weight bars */
.etf-holdings .etf-hold__sym { font-weight: 700; font-variant-numeric: tabular-nums; }
.etf-hold__barcell { width: 40%; }
.etf-hold__bar { display: block; height: 8px; border-radius: var(--radius-full); background: var(--color-secondary); }

.etf-note, .etf-disclaimer { font-size: var(--font-size-xs); color: var(--color-text-light); line-height: 1.7; margin-top: var(--space-3); }
.etf-disclaimer { margin-top: var(--space-8); padding: var(--space-4) var(--space-6); background: var(--color-surface-container); border-radius: var(--radius-lg); }
.etf-empty { padding: var(--space-6); text-align: center; color: var(--color-text-light); font-size: var(--font-size-sm); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 720px) {
  .etf-stats { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
  .etf-facts { grid-template-columns: 1fr; }
  .etf-head__name { font-size: var(--font-size-xl); }
}