/* ── table-shell.css: schema-driven table architecture ───────────────
   Used by: A股ETF监控 (cn-monitor)
   Other pages will migrate here after cn-monitor is stable.
   ──────────────────────────────────────────────────────────────────── */

/* Outer wrapper: fills available width, hides overflow so the scroll
   container is the sole scrolling surface */
.table-shell {
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px;
}

/* Scroll container: horizontal-only scroll, rounded border */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: calc(100vh - 260px);
  min-height: 120px;
}

.table-scroll::-webkit-scrollbar { height: 8px; width: 8px; }
.table-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,.06); border-radius: 999px; }
.table-scroll::-webkit-scrollbar-thumb { background: rgba(156,163,175,.45); border-radius: 999px; }
.table-scroll::-webkit-scrollbar-thumb:hover { background: rgba(156,163,175,.65); }

/* Core table: colgroup drives all column widths; content must NOT
   break the column grid */
.portfolio-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: max-content;
  min-width: 100%;
}

/* th / td: both strictly left-aligned so header and body stay in sync */
.portfolio-table th,
.portfolio-table td {
  box-sizing: border-box;
  text-align: left;
  vertical-align: middle;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  /* No text-overflow ellipsis on td: child elements control their own overflow */
}

/* Sticky header inside the scroll container */
.portfolio-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.portfolio-table th {
  position: relative; /* anchor for rt-col-resizer handle */
  height: 48px;
  font-size: 13px;
  font-weight: 700;
  color: #DBEAFE;
  background: #25283D;
  border-bottom: 2px solid rgba(255,255,255,.13);
  white-space: nowrap;
  user-select: none;
  letter-spacing: .03em;
}

.portfolio-table td {
  height: 104px;
  font-size: 14px;
  color: var(--text);
  /* No individual column gets a different background — every td is transparent */
  background: transparent;
}

.portfolio-table tbody tr:last-child td {
  border-bottom: none;
}

/* Hover: entire row brightens uniformly — no single-column deep background */
.portfolio-table tbody tr:hover td {
  background: rgba(255,255,255,.07);
}
.portfolio-table tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 rgba(96,165,250,.65);
}

/* ── Category pill (used in cn-monitor 分类 column) ── */
.portfolio-table .cn-category-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  /* Must not truncate — column width (185px) is sized to fit the longest label */
  white-space: nowrap;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}