/* Overview and Broker P&L tabs (sk-books, 14 Nov 2026): view-overview.js (ov-*) and view-broker.js (bp-*), plus a few pieces both
   use (vw-*). Built on the shared classes of books.css. Phone first (360-430 px), no horizontal page scroll: wide tables (.vw-wide,
   8-9 money columns) stay as stacked cards up to 1023 px and get real columns (with their header row) from 1024 px. */

/* ---------- shared by both tabs ---------- */
.amount.zero { color: var(--muted); }
.vw-cell { display: inline-block; min-width: 0; }
.vw-cell small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 600; white-space: normal; }
.vw-more { display: flex; justify-content: center; padding-top: 2px; }
.table tr.selected td { background: var(--blue-soft); }
/* books.css styles every span in a .stat as its small label; an amount inside a tile's value keeps the value's size and its colour. */
.stat b .amount { display: inline; color: var(--ink); font-size: inherit; font-weight: inherit; letter-spacing: 0; }
.stat b .amount.positive { color: var(--green); }
.stat b .amount.negative { color: var(--red); }
.stat b .amount.zero { color: var(--muted); }
/* "Moved inside broker" (insideHtml): one line per part (amount + in / out), right-aligned where the figure is. */
.vw-inside { display: block; }
.vw-inside small, .ov-item dd .vw-inside small, .vw-cell .vw-inside small { display: inline; margin-left: 3px; color: var(--muted); font-size: 11px; font-weight: 650; }

/* Wide tables: cards below 1024 px (two columns of cells on a tablet), real columns from 1024 px. */
@media (max-width: 1023px) {
  .table.vw-wide thead { display: none; }
  .table.vw-wide, .table.vw-wide tbody, .table.vw-wide tr, .table.vw-wide td { display: block; width: 100%; }
  .table.vw-wide tr { padding: 8px 10px; margin-bottom: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
  .table.vw-wide tr.selected { background: var(--blue-soft); border-color: #c6d4ea; }
  .table.vw-wide tr.selected td { background: transparent; }
  .table.vw-wide td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; border: 0; text-align: right; }
  .table.vw-wide td::before { content: attr(data-label); flex: none; color: var(--muted); font-size: 11.5px; font-weight: 750; text-align: left; }
  .table.vw-wide td[data-label=""]::before { content: none; }
  .table.vw-wide td.lead { display: block; text-align: left; font-weight: 750; }
  .table.vw-wide td.lead::before { content: none; }
  .table.vw-wide .num, .table.vw-wide .nowrap { text-align: right; }
}
@media (min-width: 560px) and (max-width: 1023px) {
  .table.vw-wide tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .table.vw-wide td.lead, .table.vw-wide td[data-label=""] { grid-column: 1 / -1; }
}
/* In card form a multi-part cell keeps its parts together on the right. */
@media (max-width: 719px) {
  .table .vw-cell { text-align: right; }
}
@media (max-width: 1023px) {
  .table.vw-wide .vw-cell { text-align: right; }
  .table.vw-wide td.lead .vw-cell { text-align: left; }
}

/* ---------- Overview ---------- */
.ov-owners { display: grid; gap: 12px; min-width: 0; }
.ov-owner { align-content: start; }
.ov-net { display: grid; gap: 2px; padding: 12px 14px; background: var(--soft); border: 1px solid var(--line); border-radius: 10px; }
.ov-net span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ov-net b { font-size: 26px; line-height: 1.15; }
.ov-net em { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 600; }
.ov-groups { display: grid; gap: 14px; min-width: 0; }
.ov-group { min-width: 0; }
.ov-group h3 { margin: 0 0 4px; color: #5a78b0; font-size: 10.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.ov-list { display: grid; margin: 0; }
.ov-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid #edf1f7; }
.ov-item:last-child { border-bottom: 0; }
.ov-item dt { min-width: 0; color: #34476a; font-size: 13px; font-weight: 650; }
.ov-item dt small { color: var(--muted); font-size: 11px; font-weight: 600; }
.ov-item dd { flex: none; margin: 0; text-align: right; font-weight: 750; }
.ov-item dd small { display: block; color: var(--muted); font-size: 11px; font-weight: 600; }
.ov-hint { margin-top: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.ov-warn { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ov-warn .btn { flex: none; }
.ov-recon .stat.ov-open { background: var(--amber-soft); border-color: #f1d39b; }
.ov-recon .stat.ov-open b { color: var(--amber); }
.ov-steps { display: grid; gap: 8px; margin: 0; padding-left: 20px; color: #34476a; }
.ov-steps li { padding-left: 2px; }

@media (min-width: 720px) {
  .ov-owners { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }   /* 2 or 3 owners side by side */
  .ov-owner.wide { grid-column: 1 / -1; }
  .ov-owner.wide .ov-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .ov-owner.wide .ov-net { width: fit-content; min-width: 260px; }
  .ov-net b { font-size: 28px; }
}
@media (min-width: 1100px) {
  .ov-owner.combined.wide .ov-groups { column-gap: 40px; }
}

/* ---------- Broker P&L ---------- */
.bp-chips .chip small { display: inline; }
.bp-none { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.bp-net { background: #fff; border-color: #c6d4ea; }
.bp-small { font-size: 12px; font-weight: 600; }
.bp-sub { margin-top: 4px; font-size: 14px; }
.bp-sub small { color: var(--muted); font-weight: 700; }

/* A text-looking button (account names in the per-account table). */
.bp-link { padding: 0; color: var(--blue); background: none; border: 0; font-weight: 800; text-align: left; text-decoration: underline; text-decoration-color: #b9c8e0; text-underline-offset: 3px; }
.bp-link[aria-pressed="true"] { text-decoration-color: var(--blue); }

/* Day rows and their lines. */
.bp-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 0; color: var(--ink); background: none; border: 0; font-weight: 800; text-align: left; }
.bp-caret { flex: none; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid #5a78b0; transition: transform .12s; }
.bp-day.open .bp-caret { transform: rotate(90deg); }
.bp-name { font-weight: 700; }
.bp-day .vw-cell .pill { margin-top: 3px; }
.bp-detail { padding: 0 8px 10px; background: var(--soft); }
.bp-day.open td { border-bottom-color: transparent; background: var(--soft); }

.bp-lines { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.bp-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text text" "amount type"; align-items: center; gap: 6px 12px; padding: 9px 2px; border-bottom: 1px solid #e6ecf4; }
.bp-line:last-child { border-bottom: 0; }
.bp-line.saving { opacity: .6; }
.bp-line-text { grid-area: text; min-width: 0; }
.bp-line-text span { display: block; font-weight: 650; }
.bp-line-text small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.bp-line-amount { grid-area: amount; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-weight: 750; }
.bp-line-amount small { margin-left: 5px; color: var(--muted); font-size: 11px; font-weight: 650; }
.bp-line-type { grid-area: type; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.bp-line.untyped .bp-line-text span { color: var(--amber); }
.bp-detail .bp-line { padding-left: 6px; padding-right: 6px; }
.bp-untyped .bp-lines { margin-top: -4px; }

/* The type pill is the select itself (colours from .pill[data-kind] in books.css). */
.bp-type { position: relative; display: inline-flex; }
.bp-type::after { content: ""; position: absolute; top: 50%; right: 10px; width: 0; height: 0; margin-top: -2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; pointer-events: none; opacity: .7; }
.bp-kind { appearance: none; -webkit-appearance: none; min-height: 32px; max-width: 100%; padding: 5px 26px 5px 11px; font-size: 12.5px; cursor: pointer; }
.bp-kind:disabled { cursor: progress; }
.bp-kind option { color: var(--ink); background: #fff; font-weight: 600; }

/* Manual rows. */
.bp-form .field { align-content: start; }
.bp-form .bad { margin: 0; }
.bp-form-actions { align-items: center; }
.bp-manual.editing .bp-form { padding: 12px; background: var(--blue-soft); border: 1px solid #c6d4ea; border-radius: 10px; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 2px #b8323226; }
.bp-note { overflow-wrap: anywhere; }
.bp-actions-cell .vw-cell { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.table td.bp-actions-cell { text-align: right; white-space: nowrap; }

@media (max-width: 719px) {
  /* Day table in card form: the four figures sit two by two; the open day and its lines read as one card. */
  .table.bp-day-table tr.bp-day { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .table.bp-day-table tr.bp-day td.lead, .table.bp-day-table tr.bp-day td:nth-child(2) { grid-column: 1 / -1; }
  .table.bp-day-table tr.bp-day.open { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; background: var(--soft); }
  .table.bp-day-table tr.bp-day.open td { background: transparent; }
  .table.bp-day-table tr.bp-detail-row { margin-top: -1px; padding: 0 10px 4px; background: var(--soft); border-top: 1px dashed var(--line); border-top-left-radius: 0; border-top-right-radius: 0; }
  .table.bp-day-table td.bp-detail { display: block; padding: 0; text-align: left; background: transparent; }
  .table.bp-day-table td.bp-detail::before { content: none; }
  .table.bp-day-table .bp-detail .bp-line { padding-left: 0; padding-right: 0; }
}
@media (max-width: 1023px) {
  .table.vw-wide td.bp-actions-cell { justify-content: flex-end; padding-top: 6px; }
  .table.vw-wide td.bp-note { text-align: right; }
}
@media (min-width: 720px) {
  .bp-line { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "text amount type"; }
  .bp-line-amount { justify-content: flex-end; text-align: right; }
  .bp-detail { padding: 0 14px 10px 30px; }
}
@media (min-width: 1000px) {
  .bp-totals { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .bp-totals.with-inside { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* 8 tiles: two rows of four */
  .bp-totals .stat b { font-size: 15px; }
  .bp-totals .stat.big b { font-size: 18px; }
}