/* ETF pages (module/etf/*): on top of market.css (index, exchange list) or stock.css (detail). Loaded via var_custom_css in Etf. */

/* ---------- /etf ---------- */
.ef-up { color: #12805c; }
.ef-dn { color: #c0392b; }
.ef-note { font-size: 12px; color: var(--mk-muted); margin: 10px 0 0; }
.ef-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.ef-tags li { font-size: 13px; color: var(--mk-ink); background: #f4f6f7; border-radius: 14px; padding: 4px 10px; }
.ef-tags span { color: var(--mk-muted); font-size: 12px; margin-left: 2px; }

/* ---------- /etf/detail/{exchange} ---------- */
/* Many categories: one scrolling row instead of a wall of chips */
.ef-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.ef-filter a { flex-shrink: 0; }
.ef-table .ef-chg { display: block; font-size: 12px; }
.ef-table .up { color: #12805c; }
.ef-table .dn { color: #c0392b; }

/* ---------- /etf/profile/{symbol} ---------- */
.sd-stats dd.ef-hero-up { color: #7ee2b8; }
.sd-stats dd.ef-hero-dn { color: #ffaba1; }

.ef-summary { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; }
.ef-summary li { display: flex; align-items: center; gap: 10px; border: 1px solid var(--sd-line); border-radius: 10px; padding: 10px 12px; font-size: 14px; color: #374151; }
.ef-summary i { flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; background: var(--sd-brand-soft); color: var(--sd-brand); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.ef-summary b { color: var(--sd-ink); }

/* Stacked bar + legend of the asset allocation */
.ef-alloc { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: #eef0f2; }
.ef-alloc i { display: block; height: 100%; }
.ef-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 10px 0 0; padding: 0; font-size: 13px; color: #4b5563; }
.ef-legend li { display: flex; align-items: center; gap: 6px; }
.ef-legend .dot { width: 10px; height: 10px; border-radius: 3px; }
.ef-alloc .c0, .ef-legend .c0 { background: #044d4f; }
.ef-alloc .c1, .ef-legend .c1 { background: #2fa6a0; }
.ef-alloc .c2, .ef-legend .c2 { background: #8fcfcb; }
.ef-alloc .c3, .ef-legend .c3 { background: #f0b357; }
.ef-alloc .c4, .ef-legend .c4 { background: #c7cdd2; }

/* Weight rows: name, bar, percent */
.ef-weights { list-style: none; margin: 0; padding: 0; }
.ef-weights li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 60px; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid #f1f3f5; font-size: 14px; }
.ef-weights li:last-child { border-bottom: 0; }
.ef-weights span { color: var(--sd-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ef-weights i { height: 8px; border-radius: 4px; background: #eef0f2; overflow: hidden; }
.ef-weights i b { display: block; height: 100%; border-radius: 4px; background: var(--sd-brand); }
.ef-weights em { font-style: normal; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--sd-ink); }

.ef-bars { height: 200px; }
.ef-risk { display: flex; gap: 10px; align-items: flex-start; background: var(--sd-brand-soft); border-radius: 10px; padding: 10px 12px; margin: 0; font-size: 14px; color: #374151; }
.ef-risk i { color: var(--sd-brand); font-size: 18px; line-height: 1.3; }
.sd-body .sd-stats dd.up { color: var(--sd-up); }
.sd-body .sd-stats dd.dn { color: var(--sd-down); }

.ef-holdings tbody th small { display: block; font-size: 12px; color: var(--sd-muted); }
.ef-holdings td:nth-child(2), .ef-holdings td:nth-child(3) { text-align: left; white-space: normal; color: #4b5563; }
.ef-holdings thead th:nth-child(2), .ef-holdings thead th:nth-child(3) { text-align: left; }

.ef-peer-num { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.ef-peer-num b { font-size: 13px; }
.ef-peer-num b.up { color: var(--sd-up); }
.ef-peer-num b.dn { color: var(--sd-down); }

@media (max-width: 767px) {
	.ef-summary { grid-template-columns: 1fr; }
	.ef-weights li { grid-template-columns: minmax(0, 1fr) 80px 54px; gap: 8px; }
}