/* 看板 › Net / Gross (views/dash/netgross.js). The page shares the PnL page's parts (pnl.css: the figures, the live
   stamp, the card header, the date navigation, the footnotes; charts.css: the panel .pn-*). This file adds the pair
   of panels, the day in four figures, the two tables and their narrow form.
   Net and gross are levels: ink, never green or red. Only a trading PnL has a colour on this page. */

/* ---- the fund now: net and gross side by side from a page 720px wide (each panel 300px and more), one under the
   other below. By the page's own width (the container of pnl.css), so the conversation's side panel follows too. */
.ng-hero[aria-busy="true"] { min-height: 340px; }
.ng-pair { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 6px; }
.ng-panel { min-width: 0; }
.ng-panel + .ng-panel { margin-top: 18px; padding-top: 16px; border-top: var(--hair) solid var(--hairline); }
@container pnl (min-width: 720px) {
  .ng-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ng-panel:first-child { padding-right: 24px; }
  .ng-panel + .ng-panel { margin-top: 0; padding-top: 0; padding-left: 24px; border-top: 0; border-left: var(--hair) solid var(--hairline); }
}
/* the panel's name is what tells the two apart: a step above a figure's label */
.ng-panel > .fig-l { font-size: var(--fs-md); line-height: var(--lh-md); font-weight: 600; }
.ng-hero .fig-v { font-size: var(--fs-large); }
.ng-hero .fig-v .unit { margin-left: 2px; }
.ng-panel .pn-chart { --lc-h: 176px; margin-top: 10px; }
/* (a little taller as the card widens, so a wide curve does not flatten into a strip) */
@container pnl (min-width: 1040px) { .ng-panel .pn-chart { --lc-h: 200px; } }

/* the day in four figures under the curve: where it started, what today's trades did, what today's orders will
   do in full, where that leaves it at the close. Four across down to a panel 280px wide, two by two below. */
.ng-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0 0; padding-top: 12px; border-top: var(--hair) solid var(--hairline); }
.ng-stats > div { display: flex; flex-direction: column; min-width: 0; }
.ng-stats dt { overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 500; color: var(--text-2); white-space: nowrap; }
.ng-stats dd { margin: 1px 0 0; font: 600 var(--fs-title3)/var(--lh-title3) var(--font-display); letter-spacing: var(--track-title); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ng-stats dd.na { color: var(--text-4); }
@container (max-width: 279px) { .ng-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; } }

/* the fund picker in the page header never takes more room than a long name needs; on a phone, where the header's
   controls have a row of their own (shell.css), it takes what the date buttons leave */
.ng-pick { max-width: 200px; }
@media (max-width: 767px) { .page > .dash-h > .dash-h-a > .ng-pick { flex: 1 1 auto; max-width: none; } }

/* ---- the two tables. Their columns come in groups (net, gross, then the rest): a group starts after a wider gap
   and has its name over a rule as wide as the group. */
.ng-card { --ng-side: 18px; }
.ng-t thead th { vertical-align: bottom; }
.ng-t .ng-g th[colspan] { padding-bottom: 0; border-bottom: 0; text-align: center; }
.ng-t .ng-g th[colspan] > span { display: block; padding-bottom: 5px; border-bottom: var(--hair) solid var(--hairline-strong); font-weight: 600; color: var(--text); }
.ng-t thead tr + tr > th { padding-top: 5px; }
.ng-t :is(th, td).ng-s { padding-left: 28px; }
/* (the second header row's first and last cells are not the table's: base.css pads those for a flush card) */
.card.flush .table.ng-t thead tr + tr > th:first-child { padding-left: 28px; }
.card.flush .table.ng-t thead tr + tr > th:last-child { padding-right: 12px; }
.ng-t td.ng-name { font-weight: 600; }
.ng-t td.ng-name > small.muted { margin-left: 5px; font-size: var(--fs-xs); font-weight: 400; }
.ng-t td > b { font-weight: 600; }
/* where it started is context; a change that rounds to nothing is a quiet dash; now is the figure to read */
.ng-t td.ng-start { color: var(--text-2); }
.ng-t td.ng-na { color: var(--text-4); }
.ng-t td.ng-now { font-weight: 600; }
.ng-t td.ng-n { color: var(--text-2); }
/* the fund's own figures under its currencies */
.ng-t tr.ng-total td { font-weight: 600; }
.ng-t tr.ng-total td.ng-start { color: var(--text); }
.ng-t tr:has(+ tr.ng-total) td { border-bottom-color: var(--hairline-strong); }
.ng-t tbody tr.ng-total:hover { background: none; }

/* ---- narrow (a phone, a tablet beside the sidebar, the conversation's side panel): ten columns do not fit, so a
   row becomes a block — the name and its trading PnL, then net and gross side by side under small labels */
.ng-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; padding: 11px var(--ng-side) 12px; border-bottom: var(--hair) solid var(--hairline); }
.ng-rows > .ng-row:last-child { border-bottom-color: transparent; }
.ng-rows + .pnl-foot { border-top: var(--hair) solid var(--hairline); }
.ng-row-h { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.ng-row-h > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ng-row-h > span { flex: none; font-weight: 600; }
.ng-m { display: flex; flex-direction: column; min-width: 0; margin-top: 8px; }
.ng-l { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-3); }
.ng-v { color: var(--text-2); white-space: nowrap; }
.ng-v b { font-weight: 600; color: var(--text); }
.ng-m small { margin-top: 1px; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--text-3); }
.ng-row.clickable { transition: background-color var(--t-fast); }
@media (hover: hover) { .ng-row.clickable:hover { background: var(--bg-hover); } }
.ng-row.selected, .ng-row.selected:hover { background: var(--selection); }
.ng-row.clickable:focus-visible { outline: 2px solid var(--tint); outline-offset: -2px; }

/* the rows' side padding follows the card's: 16px on a phone (base.css) and in a conversation's side panel
   (chat.css), 18px elsewhere */
@media (max-width: 767px) { .ng-card { --ng-side: 16px; } }
@media (min-width: 768px) { .insp-body .ng-card { --ng-side: 16px; } }

/* ---- a narrow page (up to 479px, as in pnl.css) */
@container pnl (max-width: 479px) {
  .ng-panel .pn-chart { --lc-h: 148px; }
  .ng-stats { gap: 8px; }
  .ng-stats dd { font-size: var(--fs-headline); line-height: var(--lh-headline); }
}