/* M5-6: overview section/title/empty class presentation is owned by public/ui/trades.css.
 * Protected-ID stock-card compatibility below remains here until a dedicated functional-contract migration.
 */

/*
 * 桌面個股卡共用同一套身份／行情骨架：
 * - 目前持股：名稱｜市值、代號｜成本、持股＋均價同列、現價＋今日漲跌
 * - 歷史個股：名稱｜已清倉、代號、現價＋今日漲跌、交易紀錄
 *
 * 卡片寬度仍由 trades-style.css 原本的 280px minimum 控制；
 * 不為了容納資訊拉寬、不縮字、不省略核心金融數值。
 */
@media (min-width: 701px) {
  :is(#cardsBlock, #historicalStocksPanelInner) .trade-card .tc-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  :is(#cardsBlock, #historicalStocksPanelInner) .trade-card .tc-info {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: baseline;
    row-gap: 3px;
  }

  /* 名稱 / 代號都是純文字，可安全拆成兩列；Dynamic Number 不離開自己的 host。 */
  :is(#cardsBlock, #historicalStocksPanelInner) .trade-card .tc-name-row {
    display: contents;
  }

  :is(#cardsBlock, #historicalStocksPanelInner) .trade-card .tc-stock-name {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :is(#cardsBlock, #historicalStocksPanelInner) .trade-card .tc-stock-code {
    grid-column: 1;
    grid-row: 2;
    align-self: baseline;
    white-space: nowrap;
  }

  :is(#cardsBlock, #historicalStocksPanelInner) .trade-card .tc-value {
    flex: 0 0 auto;
    min-width: max-content;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
  }

  /* 持股 / 均價以輕量單行資訊呈現：標籤弱、數值強，不額外加框或 pill。 */
  #cardsBlock .trade-card .tc-holding-line {
    display: flex;
    align-items: baseline;
    gap: 18px;
    width: 100%;
    min-width: 0;
    margin-top: 7px;
    white-space: nowrap;
  }

  #cardsBlock .trade-card .tc-holding-item {
    min-width: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
  }

  #cardsBlock .trade-card .tc-holding-label {
    flex: 0 0 auto;
    color: var(--hint);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.3;
  }

  #cardsBlock .trade-card .tc-holding-value {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    min-width: 0;
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
  }

  #cardsBlock .trade-card > .tc-holding-empty {
    margin-top: 7px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  :is(#cardsBlock, #historicalStocksPanelInner) .trade-card > .tc-price-row {
    min-width: 0;
    margin-top: 7px;
  }

  /* 歷史卡不再顯示已清倉後沒有意義的 0 市值 / 0 成本 / 0 持股 / 0 報酬。 */
  #historicalStocksPanelInner .historical-stock-card .tc-meta,
  #historicalStocksPanelInner .historical-stock-card .tc-market,
  #historicalStocksPanelInner .historical-stock-card .tc-cost,
  #historicalStocksPanelInner .historical-stock-card .tc-return {
    display: none;
  }

  #historicalStocksPanelInner .historical-stock-card .tc-historical-status {
    color: var(--sub);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
  }

  #historicalStocksPanelInner .historical-stock-card .tc-historical-bottom {
    justify-content: flex-end;
  }

  #historicalStocksPanelInner .historical-stock-card .tc-hist-count {
    margin-left: auto;
  }

  /* 日漲跌幅固定用括號呈現，例如 ▼ 10.00 (0.41%)。 */
  :is(#cardsBlock, #historicalStocksPanelInner) .trade-card .tc-change-pct::before {
    content: "(";
  }

  :is(#cardsBlock, #historicalStocksPanelInner) .trade-card .tc-change-pct::after {
    content: ")";
  }
}

@media (max-width: 700px) {
  /* 行動版沿用同一資訊語言，但維持手機可讀字級與原本卡片骨架。 */
  #cardsBlock .trade-card .tc-holding-line {
    display: flex;
    align-items: baseline;
    gap: 16px;
    min-width: 0;
    margin-top: 1px;
    white-space: nowrap;
  }

  #cardsBlock .trade-card .tc-holding-item {
    min-width: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
  }

  #cardsBlock .trade-card .tc-holding-label {
    flex: 0 0 auto;
    color: var(--hint);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
  }

  #cardsBlock .trade-card .tc-holding-value {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    min-width: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
  }
}