/* ============================================================
   FinToolbox — Market Cap & Momentum Tracker (tool-specific)
   Global styles (.card, .tbl, .chip, .btn, .tag, .input …) live in
   /css/styles.css. This file adds the table layout + score badges +
   trend chips + mobile horizontal scroll.
   ============================================================ */

/* ---------- Disclaimer ---------- */
.mc-disclaimer {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--yellow) 8%, var(--card));
  border: 1px solid color-mix(in srgb, var(--yellow) 30%, transparent);
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.55;
  margin-top: 16px;
}
.mc-disclaimer b { color: var(--text); font-weight: 700; }
.mc-disclaimer-icon { flex: 0 0 auto; font-size: 18px; line-height: 1; }

/* ---------- Controls ---------- */
.mc-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 14px 18px;
  align-items: center;
  margin: 18px 0;
}
.mc-search { display: flex; }
.mc-search .input {
  /* Mirrors .fld .input from /css/styles.css. The search field lives outside
     any .fld wrapper, so the global rules don't reach it — without these
     overrides the browser default white background bleeds through dark mode. */
  width: 100%;
  min-width: 220px;
  height: 38px;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  color: var(--text);
  font-size: 13px;
  transition: border-color 0.12s, background 0.12s;
}
.mc-search .input::placeholder { color: var(--text-4); }
.mc-search .input:focus {
  outline: none;
  border-color: var(--green-dim);
  background: var(--bg-elev);
}

/* Filter groups stack vertically: tiny uppercase label on top, chip row
   below. The earlier layout placed label + chips on the same row, which
   crowded the wider Category row once Hide-Stablecoins joined. */
.mc-chip-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.mc-chip-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  font-weight: 600;
}
.mc-chips { gap: 6px; flex-wrap: wrap; }
.mc-meta {
  grid-column: 1 / -1;
  font-size: 11.5px;
  color: var(--text-3);
}

/* Score ceiling tell — a soft outline ring on the badge itself when the
   score caps at 100. The reason ("100 is the maximum possible reading") is
   exposed via the `title` tooltip on the same span. No standalone label so
   the cell can never overflow into its neighbour. */
.mc-score.is-cap {
  outline: 1px solid color-mix(in srgb, var(--green) 55%, transparent);
  outline-offset: 1px;
  cursor: help;
}
@media (max-width: 920px) {
  .mc-controls { grid-template-columns: 1fr; }
}

/* ---------- Table ---------- */
.mc-card { padding: 0; overflow: hidden; }
.mc-tbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.mc-tbl {
  width: 100%;
  min-width: 1100px;
  border-collapse: collapse;
  font-size: 13px;
  /* table-layout:fixed locks column widths to the values declared on the
     first row (thead). Without this, sorting brings rows with wider values
     ("$0.00012345", "−129.10%") into view and the browser recomputes column
     widths cell-by-cell — even though min-width was set. Fixed layout makes
     the declared widths authoritative, so sorting never shifts columns. */
  table-layout: fixed;
}
.mc-tbl thead th {
  position: sticky;
  top: 0;
  background: var(--card-hi);
  z-index: 1;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
  user-select: none;
}
.mc-tbl thead th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mc-tbl thead th[data-sort]:hover { color: var(--text); }
.mc-tbl thead th.sort-asc::after  { content: ' ▲'; color: var(--green); }
.mc-tbl thead th.sort-desc::after { content: ' ▼'; color: var(--green); }
.mc-tbl thead th .info {
  font-size: 11px; color: var(--text-3); margin-left: 4px;
  cursor: help;
}

/* Anti-layout-shift: under table-layout:fixed, the widths declared on the
   first row are authoritative. Setting them on each thead th anchors every
   column so sorting / new row content can never reflow the table.
   Column order (10 total):
     1 rank · 2 name · 3 price · 4 24h · 5 30d · 6 200d · 7 1y
     8 momentum · 9 trend · 10 details */
.mc-tbl thead th[data-sort="rank"]            { width:  56px; }
.mc-tbl thead th[data-sort="name"]            { width: 220px; }
.mc-tbl thead th[data-sort="current_price"]   { width: 130px; }
.mc-tbl thead th[data-sort="change_24h"]      { width: 100px; }
.mc-tbl thead th[data-sort="change_30d"]      { width: 100px; }
.mc-tbl thead th[data-sort="change_200d"]     { width: 100px; }
.mc-tbl thead th[data-sort="change_1y"]       { width: 100px; }
.mc-tbl thead th[data-sort="momentum_score"]  { width: 110px; }
.mc-tbl thead th[data-sort="trend_label"]     { width: 150px; }
/* Last column ("Details") has no data-sort. Target by position. */
.mc-tbl thead th:nth-child(10)                { width: 154px; }

/* With table-layout:fixed the browser truncates overflow by default. Any
   string longer than its column (the trend chip, the coin name, the Details
   button label) must declare its own truncation strategy — most stay short
   so ellipsis is a safety net, not a regular state. */
.mc-tbl tbody td { overflow: hidden; text-overflow: ellipsis; }

.mc-tbl tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
  white-space: nowrap;
}
.mc-tbl tbody tr:last-child td { border-bottom: 0; }
.mc-tbl tbody tr:hover td { background: var(--card-hi); }
.mc-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.mc-tbl td.green { color: var(--green); font-weight: 600; }
.mc-tbl td.red { color: var(--red); font-weight: 600; }
.mc-tbl .muted { color: var(--text-3); }
.mc-mono { font-family: var(--mono); }

.mc-rank { color: var(--text-3); font-weight: 600; width: 1%; }

.mc-name-cell { display: flex; align-items: center; gap: 10px; min-width: 200px; white-space: nowrap; }
.mc-coin-img { width: 22px; height: 22px; border-radius: 50%; background: var(--card-hi); flex-shrink: 0; }
.mc-coin-placeholder {
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; color: var(--text-3);
}
.mc-name { display: flex; flex-direction: column; line-height: 1.2; }
.mc-name b { color: var(--text); font-weight: 600; }
.mc-name span.muted { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Momentum score badge ---------- */
.mc-score {
  display: inline-block;
  min-width: 44px;
  padding: 3px 9px;
  border-radius: 6px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12.5px;
  text-align: center;
  border: 1px solid transparent;
}
.mc-score.green {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 14%, transparent);
  border-color: color-mix(in srgb, var(--green) 30%, transparent);
}
.mc-score.yellow {
  color: var(--yellow);
  background: color-mix(in srgb, var(--yellow) 14%, transparent);
  border-color: color-mix(in srgb, var(--yellow) 30%, transparent);
}
.mc-score.red {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 14%, transparent);
  border-color: color-mix(in srgb, var(--red) 30%, transparent);
}
.mc-score.muted { color: var(--text-3); background: transparent; border-color: var(--line-soft); }

/* ---------- Trend chip ---------- */
.mc-trend {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.mc-trend.up { color: var(--green); }
.mc-trend.down { color: var(--red); }
.mc-trend.stable { color: var(--yellow); }
.mc-trend.muted { color: var(--text-3); }

/* ---------- Empty / loading state ---------- */
.mc-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-3);
  font-size: 13px;
}

/* ---------- Pager ---------- */
.mc-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}
.mc-pageinfo { font-size: 12px; color: var(--text-3); min-width: 200px; text-align: center; }

@media (max-width: 720px) {
  .mc-disclaimer { font-size: 12px; padding: 12px 14px; }
}