/* Reports (S46): O-33 at /dashboard/reports and A-12 at /admin/report. Both are tables of numbers, so the whole
   stylesheet is one prefix (bh-rp-) and both pages share the month bar, the tables and the download line. The cards,
   banners and buttons are the design system's. */

/* The month bar: Previous, the month, Next. On a phone it wraps to two lines rather than squeezing the heading. */
.bh-rp-months { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.bh-rp-month { flex: 1 1 auto; margin: 0; color: var(--ink-1); font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--weight-bold); text-align: center; }
.bh-rp-nonext { flex: none; }

/* A month with nothing in it */
.bh-rp-empty { display: grid; gap: var(--space-3); justify-items: start; }
.bh-rp-empty > * { margin: 0; }
.bh-rp-empty-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* One apartment (O-33) and the month's totals */
.bh-rp-card, .bh-rp-totals { display: grid; gap: var(--space-4); min-width: 0; }
.bh-rp-head { display: grid; gap: var(--space-1); }
.bh-rp-head > * { margin: 0; }

/* The big figures of a card: occupancy, and revenue for an Owner. A Manager's card has the one figure. */
.bh-rp-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); margin: 0; }
.bh-rp-figures > div { display: grid; gap: var(--space-1); padding: var(--space-3); border-radius: var(--radius-control); background: var(--sunken); }
.bh-rp-figures dt { color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-rp-figures dd { margin: 0; font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.bh-rp-figures dd.bh-small { font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-regular); }

/* Paid out, the fee and the commissions: smaller than the figures, in a row of their own */
.bh-rp-money { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-2) var(--space-3); margin: 0; }
.bh-rp-money > div { display: grid; gap: 2px; }
.bh-rp-money dt { color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-rp-money dd { margin: 0; font-weight: var(--weight-bold); overflow-wrap: anywhere; }

/* The tables: sources per apartment (O-33), currencies (O-33's totals) and the lines of the month (A-12). Numbers are
   right-aligned so a column of amounts reads down; the first column is the name. A wide table scrolls sideways. */
.bh-rp-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); line-height: var(--leading-small); }
.bh-rp-table caption { margin-bottom: var(--space-2); text-align: left; }
.bh-rp-table th, .bh-rp-table td { padding: var(--space-2); border-bottom: 1px solid var(--line); text-align: right; overflow-wrap: anywhere; }
.bh-rp-table th:first-child, .bh-rp-table td:first-child { text-align: left; }
.bh-rp-table thead th { color: var(--ink-2); font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-bold); }
.bh-rp-table tbody th, .bh-rp-table tfoot th { color: var(--ink-1); font-weight: var(--weight-regular); }
.bh-rp-table tfoot th, .bh-rp-table tfoot td { font-weight: var(--weight-bold); border-bottom: 0; }
.bh-rp-table tbody tr:last-child th, .bh-rp-table tbody tr:last-child td { border-bottom: 0; }
.bh-rp-table tfoot td, .bh-rp-table tfoot th { border-top: 1px solid var(--border-input); }

.bh-rp-download { margin: 0; }
.bh-rp-how { display: grid; gap: var(--space-2); color: var(--ink-2); }
.bh-rp-how > * { margin: 0; }