/**
 * iFlux Block Templates — SoT giao diện block (map Design Sandbox §15).
 * Chỉ dùng design tokens (--ix-*, --color-*, --ifx-*). Không hardcode hex/rgba.
 */

/* ── TPL-SHELL-CARD / TPL-SHELL-SIDEBAR — canonical shell ── */
.ifx-block,
.ifx-mkt-card,
.ifx-flow-card,
.ifx-mkt-sidebar-widget,
.ifx-mkt-liq-block,
.ifx-com-overview,
.ifx-com-breadth-sidebar {
  background: var(--ix-bg-card);
  border: 1px solid var(--ix-border);
  border-radius: var(--ix-radius-lg);
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.ifx-mkt-sidebar-widget,
.ifx-com-breadth-sidebar,
.ifx-mkt-card,
.ifx-flow-card,
.ifx-mkt-liq-block {
  display: flex;
  flex-direction: column;
}

.ifx-block-head,
.ifx-block__head,
.ifx-mkt-card__head,
.ifx-flow-card__head,
.ifx-mkt-sidebar-widget__head,
.ifx-mkt-liq-block__head,
.ifx-com-overview__head,
.ifx-com-breadth-sidebar__head {
  padding: var(--ifx-inset-widget);
  border-bottom: 1px solid var(--ix-border);
}

/* Breadth sidebar — tiêu đề dùng .ifx-block-head (SoT), head legacy alias */
.ifx-com-breadth-sidebar > .ifx-block-head {
  flex-shrink: 0;
}
.ifx-com-breadth-sidebar > .ifx-block__desc {
  padding: 0 var(--ifx-inset-widget);
  margin: 0;
  border-bottom: 1px solid var(--ix-border);
}
.ifx-com-breadth-sidebar > .ifx-mkt-sidebar-widget__body {
  flex: 1;
  min-width: 0;
}

.ifx-block-head > h3 {
  margin: 0;
}

.ifx-block__body,
.ifx-mkt-card__body,
.ifx-flow-card__body,
.ifx-mkt-sidebar-widget__body,
.ifx-com-overview__body,
.ifx-mkt-liq-block__body {
  padding: var(--ifx-inset-widget);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.ifx-mkt-liq-block__desc {
  margin: 0;
  padding: 0 var(--ifx-space-16);
  font-size: var(--ifx-font-size-12);
  color: var(--ix-text-muted);
  line-height: 1.55;
  border-bottom: 1px solid var(--ix-border);
}

.ifx-block__foot,
.ifx-mkt-card__foot,
.ifx-flow-card__foot {
  padding: var(--ifx-inset-widget);
  border-top: 1px solid var(--ix-border);
}

.ifx-block__desc,
.ifx-flow-card__sub,
.ifx-mkt-section__sub,
.ifx-wgt-block__desc {
  margin: 0;
  font-size: var(--ifx-font-size-14);
  color: var(--ix-text-muted);
  line-height: 1.5;
}

.ifx-block--sidebar .ifx-block-head,
.ifx-block--sidebar .ifx-block__head {
  font-size: var(--ifx-font-size-14);
  font-weight: var(--ifx-font-weight-semibold);
  color: var(--ix-text-primary);
}

/* ── TPL-BREADTH — stat grid + ratio ── */
.ifx-breadth-block { min-width: 0; }

.ifx-breadth-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ifx-space-16);
}
.ifx-breadth-visual--6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ifx-inline-md);
}

.ifx-breadth-stat {
  text-align: center;
  padding: var(--ifx-space-16) 10px;
  border-radius: var(--ix-radius-lg);
  border: 1px solid var(--ix-border);
}
.ifx-breadth-stat.is-total { background: var(--ifx-alpha-white-4); }
.ifx-breadth-stat.is-up { background: var(--ix-success-soft); }
.ifx-breadth-stat.is-down { background: var(--ix-danger-soft); }
.ifx-breadth-stat.is-ref { background: var(--ix-warning-soft); }
.ifx-breadth-stat.is-ceiling { background: var(--ifx-market-ceiling-soft); }
.ifx-breadth-stat.is-floor { background: var(--ifx-market-floor-soft); }

.ifx-breadth-stat__num {
  font-size: var(--ifx-font-size-28);
  font-weight: 800;
  font-family: var(--ifx-font-mono);
  line-height: 1.1;
}
.ifx-breadth-visual--6 .ifx-breadth-stat__num { font-size: var(--ifx-font-size-24); }

.ifx-breadth-stat__label {
  font-size: var(--ifx-font-size-10);
  color: var(--ix-text-muted);
  margin-top: 6px;
  line-height: 1.25;
}

.ifx-breadth-stat.is-total .ifx-breadth-stat__num { color: var(--ix-text-primary); }
.ifx-breadth-stat.is-up .ifx-breadth-stat__num { color: var(--ix-success); }
.ifx-breadth-stat.is-down .ifx-breadth-stat__num { color: var(--ix-danger); }
.ifx-breadth-stat.is-ref .ifx-breadth-stat__num { color: var(--ix-warning); }
.ifx-breadth-stat.is-ceiling .ifx-breadth-stat__num { color: var(--ifx-market-ceiling); }
.ifx-breadth-stat.is-floor .ifx-breadth-stat__num { color: var(--ifx-market-floor); }

.ifx-breadth-ratio {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin-top: var(--ifx-space-12);
  background: var(--ix-bg-input);
}
.ifx-breadth-ratio__up { background: var(--ix-success); }
.ifx-breadth-ratio__down { background: var(--ix-danger); }

/* ── TPL-TREEMAP — heat / cap tiles ── */
.ifx-treemap { position: relative; width: 100%; }

.ifx-treemap-tile,
.ifx-mkt-heat-tile,
.ifx-cap-tile {
  position: absolute;
  box-sizing: border-box;
}

.ifx-treemap-tile__link,
.ifx-mkt-heat-tile__link,
.ifx-cap-tile__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: var(--ix-radius);
  text-decoration: none;
  padding: 6px;
  box-sizing: border-box;
  text-align: center;
  gap: var(--ifx-space-4);
  transition: filter var(--ifx-duration-fast), transform var(--ifx-duration-fast);
}
.ifx-treemap-tile__link:hover,
.ifx-mkt-heat-tile__link:hover,
.ifx-cap-tile__link:hover {
  filter: brightness(1.08);
  transform: scale(1.01);
}

.ifx-treemap-tile__link.is-up,
.ifx-mkt-heat-tile__link.is-up,
.ifx-cap-tile__link.is-up {
  background: var(--ifx-market-up);
  color: var(--color-text-on-success);
}
.ifx-treemap-tile__link.is-down,
.ifx-mkt-heat-tile__link.is-down,
.ifx-cap-tile__link.is-down {
  background: var(--ifx-market-down);
  color: var(--color-text-on-danger);
}
.ifx-treemap-tile__link.is-ref,
.ifx-mkt-heat-tile__link.is-ref,
.ifx-cap-tile__link.is-ref {
  background: var(--ifx-market-ref);
  color: var(--color-text-on-warning);
}
.ifx-treemap-tile__link.is-ceiling,
.ifx-cap-tile__link.is-ceiling {
  background: var(--ifx-market-ceiling);
  color: var(--color-text-on-primary);
}
.ifx-treemap-tile__link.is-floor,
.ifx-cap-tile__link.is-floor {
  background: var(--ifx-market-floor);
  color: var(--color-text-on-info);
}

.ifx-treemap-tile__name,
.ifx-mkt-heat-tile__name,
.ifx-cap-tile__name {
  font-size: var(--ifx-font-size-12);
  font-weight: var(--ifx-font-weight-semibold);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ifx-treemap-tile__perf,
.ifx-mkt-heat-tile__perf,
.ifx-cap-tile__perf {
  font-size: var(--ifx-font-size-10);
  font-weight: var(--ifx-font-weight-bold);
  font-family: var(--ifx-font-mono);
}

/* ── TPL-WGT-HEAD — inner widget title ── */
.ifx-wgt-block__head {
  margin-bottom: var(--ifx-space-8);
}
.ifx-wgt-block__title {
  margin: 0;
}

/* ── Market direction utilities (text / border only) ── */
.is-up { color: var(--ix-success); }
.is-down { color: var(--ix-danger); }
.is-ref { color: var(--ix-warning); }
.is-flat { color: var(--ix-text-muted); }
.is-ceiling { color: var(--ifx-market-ceiling); }
.is-floor { color: var(--ifx-market-floor); }

/* ── TPL-RANK-BAR — horizontal rank list ── */
.ifx-rank-bar__head,
.ifx-mkt-rank-head {
  display: grid;
  grid-template-columns: 28px minmax(100px, 140px) minmax(0, 1fr) minmax(72px, 88px);
  gap: var(--ifx-inline-md);
  padding: 0 4px 8px;
  font-size: var(--ifx-font-size-10);
  font-weight: var(--ifx-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ix-text-muted);
}
.ifx-rank-bar__head span:nth-child(2),
.ifx-mkt-rank-head span:nth-child(2) { grid-column: 2; }
.ifx-rank-bar__head span:nth-child(3),
.ifx-mkt-rank-head span:nth-child(3) { grid-column: 3 / span 2; text-align: right; }

.ifx-rank-bar__list,
.ifx-mkt-rank-list {
  display: flex;
  flex-direction: column;
  gap: var(--ifx-inline-md);
}

.ifx-rank-bar__row,
.ifx-mkt-rank-row {
  display: grid;
  grid-template-columns: 28px minmax(100px, 140px) minmax(0, 1fr) minmax(72px, 88px);
  align-items: center;
  gap: var(--ifx-inline-md);
}

.ifx-rank-bar__idx,
.ifx-mkt-rank-idx {
  font-size: var(--ifx-font-size-12);
  font-weight: var(--ifx-font-weight-bold);
  color: var(--ix-text-muted);
  text-align: center;
}

.ifx-rank-bar__name,
.ifx-mkt-rank-name {
  font-size: var(--ifx-font-size-14);
  font-weight: var(--ifx-font-weight-semibold);
  color: var(--ix-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ifx-rank-bar__track,
.ifx-mkt-rank-bar-track {
  height: 10px;
  background: var(--ix-accent-soft);
  border-radius: 5px;
  overflow: hidden;
}

.ifx-rank-bar__fill,
.ifx-mkt-rank-bar {
  height: 100%;
  border-radius: 5px;
  min-width: 4px;
  transition: width var(--ifx-duration-normal) ease;
}
.ifx-rank-bar__fill.is-up,
.ifx-mkt-rank-bar.is-up {
  background: linear-gradient(90deg, var(--ix-success-soft), var(--ix-success));
}
.ifx-rank-bar__fill.is-down,
.ifx-mkt-rank-bar.is-down {
  background: linear-gradient(90deg, var(--ix-danger-soft), var(--ix-danger));
}
.ifx-rank-bar__fill.is-flat,
.ifx-mkt-rank-bar.is-flat { background: var(--ix-text-muted); }

.ifx-rank-bar__val,
.ifx-mkt-rank-val {
  font-size: var(--ifx-font-size-14);
  font-weight: var(--ifx-font-weight-bold);
  font-family: var(--ifx-font-mono);
  text-align: right;
}
.ifx-rank-bar__val.is-up,
.ifx-mkt-rank-val.is-up { color: var(--ix-success); }
.ifx-rank-bar__val.is-down,
.ifx-mkt-rank-val.is-down { color: var(--ix-danger); }
.ifx-rank-bar__val.is-flat,
.ifx-mkt-rank-val.is-flat { color: var(--ix-text-muted); }

/* ── TPL-FLOW-SPLIT — symmetric net-flow ── */
.ifx-flow-split-block { min-width: 0; }

.ifx-flow-split__head {
  display: grid;
  grid-template-columns: 1fr minmax(52px, 88px) minmax(52px, 88px) 1fr;
  gap: var(--ifx-space-8);
  margin-bottom: 10px;
  font-size: var(--ifx-font-size-10);
  font-weight: var(--ifx-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ix-text-muted);
}
.ifx-flow-split__col-h--buy { text-align: right; }
.ifx-flow-split__col-h--tick-buy { text-align: right; }
.ifx-flow-split__col-h--tick-sell { text-align: left; }
.ifx-flow-split__col-h--sell { text-align: left; }
.ifx-flow-split__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.ifx-flow-split__dot.is-buy { background: var(--ifx-flow-in); }
.ifx-flow-split__dot.is-sell { background: var(--ifx-flow-out); }

.ifx-flow-split__row {
  display: grid;
  grid-template-columns: 1fr minmax(52px, 88px) minmax(52px, 88px) 1fr;
  gap: var(--ifx-space-8);
  align-items: center;
  min-height: 34px;
  margin-bottom: var(--ifx-space-8);
}
.ifx-flow-split__row:hover {
  background: var(--ix-accent-soft);
  border-radius: var(--ix-radius);
}

.ifx-flow-split__buy,
.ifx-flow-split__sell {
  display: flex;
  align-items: center;
  min-height: 28px;
}
.ifx-flow-split__buy { justify-content: flex-end; }
.ifx-flow-split__sell { justify-content: flex-start; }

.ifx-flow-split__bar {
  position: relative;
  height: 22px;
  min-width: 36px;
  max-width: 100%;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.ifx-flow-split__bar--buy {
  background: var(--ifx-market-up-soft);
  justify-content: flex-end;
}
.ifx-flow-split__bar--sell {
  background: var(--ifx-market-down-soft);
  justify-content: flex-start;
}
.ifx-flow-split__val {
  font-size: var(--ifx-font-size-10);
  font-weight: var(--ifx-font-weight-bold);
  padding: 0 6px;
  white-space: nowrap;
}
.ifx-flow-split__bar--buy .ifx-flow-split__val { color: var(--ifx-flow-in); }
.ifx-flow-split__bar--sell .ifx-flow-split__val { color: var(--ifx-flow-out); }

.ifx-flow-split__ticker {
  display: block;
  font-size: var(--ifx-font-size-12);
  font-weight: var(--ifx-font-weight-semibold);
  color: var(--ix-text-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ifx-flow-split__ticker--buy { text-align: right; padding-right: 2px; }
.ifx-flow-split__ticker--sell { text-align: left; padding-left: 2px; }
.ifx-flow-split__ticker:hover { color: var(--ix-accent); }
.ifx-flow-split__ticker--empty {
  color: var(--ix-text-muted);
  font-weight: var(--ifx-font-weight-regular);
}

/* ── TPL-INDEX-GRID — exchange mini cards ── */
.ifx-index-grid,
.ifx-com-ex-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ifx-inline-md);
}

.ifx-index-card,
.ifx-com-ex-card {
  background: var(--ix-bg-body);
  border: 1px solid var(--ix-border);
  border-radius: var(--ix-radius);
  padding: var(--ifx-space-12) 14px;
}

.ifx-index-card__name,
.ifx-com-ex-card__name {
  font-size: var(--ifx-font-size-10);
  color: var(--ix-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--ifx-space-4);
}

.ifx-index-card__val,
.ifx-com-ex-card__val {
  font-size: var(--ifx-font-size-18);
  font-weight: var(--ifx-font-weight-bold);
  font-family: var(--ifx-font-mono);
  color: var(--ix-text-primary);
  line-height: 1.2;
}

.ifx-index-card__chg,
.ifx-com-ex-card__chg {
  font-size: var(--ifx-font-size-12);
  font-weight: var(--ifx-font-weight-semibold);
  margin-top: var(--ifx-space-4);
  font-family: var(--ifx-font-mono);
}
.ifx-index-card__chg.is-up,
.ifx-com-ex-card__chg.is-up { color: var(--ix-success); }
.ifx-index-card__chg.is-down,
.ifx-com-ex-card__chg.is-down { color: var(--ix-danger); }

/* Chart series stroke — dùng trong SVG Top 10 */
.ix-top10-market__line[data-series="1"] { stroke: var(--ifx-color-chart-1); }
.ix-top10-market__line[data-series="2"] { stroke: var(--ifx-color-chart-2); }
.ix-top10-market__line[data-series="3"] { stroke: var(--ifx-color-chart-3); }
.ix-top10-market__line[data-series="4"] { stroke: var(--ifx-color-chart-4); }
.ix-top10-market__line[data-series="5"] { stroke: var(--ifx-color-chart-5); }
.ix-top10-market__line[data-series="6"] { stroke: var(--ifx-color-chart-6); }
.ix-top10-market__line[data-series="7"] { stroke: var(--ifx-color-chart-7); }
.ix-top10-market__line[data-series="8"] { stroke: var(--ifx-color-chart-8); }
.ix-top10-market__line[data-series="9"] { stroke: var(--ifx-color-chart-9); }
.ix-top10-market__line[data-series="10"] { stroke: var(--ifx-color-chart-10); }

.ix-top10-market__legend-dot[data-series="1"] { background: var(--ifx-color-chart-1); }
.ix-top10-market__legend-dot[data-series="2"] { background: var(--ifx-color-chart-2); }
.ix-top10-market__legend-dot[data-series="3"] { background: var(--ifx-color-chart-3); }
.ix-top10-market__legend-dot[data-series="4"] { background: var(--ifx-color-chart-4); }
.ix-top10-market__legend-dot[data-series="5"] { background: var(--ifx-color-chart-5); }
.ix-top10-market__legend-dot[data-series="6"] { background: var(--ifx-color-chart-6); }
.ix-top10-market__legend-dot[data-series="7"] { background: var(--ifx-color-chart-7); }
.ix-top10-market__legend-dot[data-series="8"] { background: var(--ifx-color-chart-8); }
.ix-top10-market__legend-dot[data-series="9"] { background: var(--ifx-color-chart-9); }
.ix-top10-market__legend-dot[data-series="10"] { background: var(--ifx-color-chart-10); }

/* ── TPL-LIST-ROW — stock / entity row ── */
.ifx-list-row,
.ifx-stock-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(0, auto) 72px 64px 64px;
  align-items: center;
  gap: var(--ifx-inline-sm) 8px;
  min-height: 44px;
  padding: 10px 12px;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}
.ifx-stock-row__ticker {
  font-size: var(--ifx-font-size-14);
  font-weight: var(--ifx-font-weight-bold);
  color: var(--ix-text-primary);
}
.ifx-stock-row__name {
  font-size: var(--ifx-font-size-14);
  color: var(--ix-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ifx-stock-row__price,
.ifx-stock-row__chg,
.ifx-stock-row__vol {
  font-family: var(--ifx-font-mono);
  text-align: right;
}
.ifx-stock-row__price { font-size: var(--ifx-font-size-16); font-weight: var(--ifx-font-weight-bold); }
.ifx-stock-row__chg { font-size: var(--ifx-font-size-14); font-weight: var(--ifx-font-weight-semibold); }
.ifx-stock-row__vol { font-size: var(--ifx-font-size-12); color: var(--ix-text-muted); }
.ifx-stock-row.is-up .ifx-stock-row__price,
.ifx-stock-row.is-up .ifx-stock-row__chg { color: var(--ix-success); }
.ifx-stock-row.is-down .ifx-stock-row__price,
.ifx-stock-row.is-down .ifx-stock-row__chg { color: var(--ix-danger); }

/* ── TPL-FEED-CARD — community post ── */
.ifx-feed-card,
.ifx-com-post {
  display: flex;
  flex-direction: column;
  background: var(--ix-bg-card);
  border: 1px solid var(--ix-border);
  border-radius: var(--ix-radius-lg);
  overflow: hidden;
  transition: transform var(--ifx-duration-fast), box-shadow var(--ifx-duration-fast), border-color var(--ifx-duration-fast);
}
.ifx-feed-card:hover,
.ifx-com-post:hover {
  transform: translateY(-2px);
  box-shadow: var(--ifx-shadow-topnav);
  border-color: var(--ix-accent);
}
.ifx-com-card {
  background: var(--ix-bg-card);
  border: 1px solid var(--ix-border);
  border-radius: var(--ix-radius-lg);
  padding: var(--ifx-space-16) 18px;
  transition: border-color var(--ifx-duration-fast), box-shadow var(--ifx-duration-fast);
}
.ifx-com-card:hover {
  border-color: var(--ix-accent);
  box-shadow: var(--ifx-shadow-topnav);
}
.ifx-com-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ix-accent-soft);
  color: var(--ix-accent);
  font-weight: var(--ifx-font-weight-bold);
  font-size: var(--ifx-font-size-14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ifx-com-post__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--ix-bg-hover);
  overflow: hidden;
  position: relative;
}
.ifx-com-post__thumb-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ix-accent-soft), var(--ix-info-soft));
}
.ifx-com-post__thumb-fallback i {
  font-size: 42px;
  color: var(--ix-text-muted);
  opacity: 0.35;
}