/* One row, always (Alex, 2026-10-29): an ex-shared club's own balance and
   its "before the move" card sit side by side, like the tiles below. */
.viva-header { display: flex; gap: 16px; flex-wrap: nowrap; margin-bottom: 16px; }
.viva-balance { min-width: 260px; display: flex; flex-direction: column; gap: 6px; }
.viva-header > .viva-balance { flex: 1 1 0; min-width: 0; }
.viva-header > .viva-balance small, .viva-header > .viva-balance .mono { overflow-wrap: anywhere; }
.viva-label { color: var(--text-secondary); font-size: 13px; }
.viva-amount { font-size: 28px; font-weight: 700; }
.viva-amount.muted, .muted { color: var(--text-secondary); }
.viva-period label { display: flex; gap: 6px; align-items: center; font-size: 13px; }
/* One row, always: the tiles share the width (Alex, 2026-10-05). */
.viva-totals { display: flex; gap: 12px; flex-wrap: nowrap; margin-bottom: 16px; }
.viva-total { background: var(--color-bg-hover); border-radius: var(--radius-md); padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; min-width: 0; }
.viva-total strong { white-space: nowrap; }
.viva-total span { font-size: 12px; color: var(--text-secondary); }
.viva-total.net strong { color: var(--color-success); }
.viva-courtio-only { margin-bottom: 16px; border-left: 4px solid var(--color-danger); }
/* Row colour = row type (Alex, 2026-10-06): payment plain, refund red,
   withdrawal green, Viva fee / no-money attempt grey. */
.viva-table .viva-refund td { color: var(--color-danger); }
.viva-table .viva-payout td { color: var(--color-success); }
.viva-table .viva-fee td { color: var(--text-secondary); }
.viva-table .viva-pending td { color: var(--text-secondary); }
/* A row that moved no money (declined/abandoned attempt) or a Viva fee is
   dimmed as a whole, so it never reads like a payment (Alex, 2026-10-13). */
.viva-table .viva-pending td,
.viva-table .viva-fee td { opacity: .45; }
.viva-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0 0; font-size: 12px; }
.viva-legend-item::before { content: '●'; margin-right: 5px; }
.viva-legend-refund { color: var(--color-danger); }
.viva-legend-payout { color: var(--color-success); }
.viva-legend-grey { color: var(--text-secondary); opacity: .45; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.viva-quote { display: flex; flex-direction: column; gap: 6px; }
.viva-payouts { margin-bottom: 16px; }
.viva-period { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 4px 0 10px; }
.viva-period-inputs { display: flex; gap: 8px; align-items: center; }
.viva-mode-line { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; font-size: 13px; }
.viva-table .p-datatable-table { table-layout: fixed; }
.viva-table .p-datatable-tbody > tr > td { white-space: nowrap; }
.viva-table td.viva-cell { overflow: hidden; text-overflow: ellipsis; }
.viva-table td.viva-num { text-align: right; }
/* Ten columns on one line: PrimeVue's 1rem cell padding ate a third of the
   row (Alex, 2026-10-06). */
.viva-table.p-datatable .p-datatable-tbody > tr > td, .viva-table.p-datatable .p-datatable-thead > tr > th { padding: 6px 6px; }
.viva-table.p-datatable .p-datatable-tbody > tr > td:first-child, .viva-table.p-datatable .p-datatable-thead > tr > th:first-child { padding-left: 10px; }
/* Headers may wrap ("Viva commission" over two lines) instead of running into
   the neighbour: the columns are percentage-sized and never grow. */
.viva-table .p-datatable-thead > tr > th { white-space: normal; overflow-wrap: anywhere; }
/* Account groups (2026-10-28): the club card and the account card share the
   header; the scope pills sit on the period row; the own cashout amount is
   typed in lei. */
.viva-club-card { border-left: 4px solid var(--color-primary); }
.viva-account-card { border-left: 4px solid var(--color-success); }
.viva-scope { display: flex; gap: 6px; }
.viva-scope .pill { border: 1px solid var(--color-border); background: transparent; border-radius: 999px; padding: 3px 12px; font-size: 12px; cursor: pointer; color: var(--text-secondary); }
.viva-scope .pill-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.viva-amount-input { font-size: 22px; font-weight: 700; width: 100%; margin-top: 4px; }

.viva-ok { display: block; color: var(--color-success); margin-top: 4px; }