/* Budget tab (web app, management) and the Budget card on My venue (venue managers); drawn by budget.js */
.bg-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cds-gap-sm); margin-bottom: var(--cds-gap-md); }
.bg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bg-card { margin-top: var(--cds-gap-md); }
.bg-card > h3, .bg-cardhead h3 { margin-top: 0; }
.bg-cardhead { padding-right: 56px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cds-gap-sm); margin-bottom: var(--cds-gap-sm); }
.bg-gap { margin-top: var(--cds-gap-md); }
.rr .bg-h3b { margin-top: var(--cds-gap-md); }
.rr .bg-h4 { margin: var(--cds-gap-md) 0 var(--cds-gap-xs); font: var(--label, 700 11px/1.3 sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--color-fg-muted); }
#bg-tiles { margin-top: var(--cds-gap-sm); }

/* wide month-by-month tables: plain headers (no sort buttons), the first column stays put while the months scroll */
.rr .bg-wrap { max-height: none; }
.rr .bg-wrap.bg-tall { max-height: 40rem; }
.rr table.bg-wide th { padding: 6px 8px; font: var(--label, 700 11px/1.3 sans-serif); letter-spacing: .06em; text-transform: uppercase; color: var(--color-fg-muted); white-space: nowrap; }
.rr table.bg-wide tbody th { font: inherit; letter-spacing: 0; text-transform: none; color: var(--color-fg); font-weight: 400; text-align: left; position: sticky; left: 0; z-index: 1; background: var(--color-panel); border-bottom: 1px solid var(--color-border-line); min-width: 12rem; }
.rr table.bg-wide thead th:first-child { left: 0; z-index: 2; }
.rr table.bg-wide td { white-space: nowrap; }
.rr table.bg-wide td.bg-how { white-space: normal; min-width: 14rem; color: var(--color-fg-muted); }
.rr table.bg-wide tr.bg-group th { padding-top: 12px; color: var(--color-fg); font-weight: 700; position: static; background: none; }
.rr table.bg-wide tr.bg-strong th, .rr table.bg-wide tr.bg-strong td { font-weight: 700; }
.rr table.bg-wide tr.bg-act th { padding-left: 20px; color: var(--color-fg-muted); font-style: italic; }
.rr table.bg-wide tr.bg-sub th { padding-left: 20px; color: var(--color-fg-muted); }
.rr table.bg-wide td.bg-tot { border-left: 1px solid var(--color-border-line); font-weight: 600; }
.rr table.rr-table .bg-on { background: color-mix(in srgb, var(--rr-highlight, #03AF4B) 9%, transparent); }
.rr table.bg-wide tr.bg-act td.rr-good, .rr table.bg-wide tr.bg-act td.rr-bad { font-weight: 600; }

/* the gap to budget beside a tile's amount */
.rr .rr-tile .bg-delta { font-size: 0.5em; font-weight: 700; letter-spacing: 0; margin-left: 8px; vertical-align: 0.35em; white-space: nowrap; }
/* targets: measure with its basis underneath; free-wrapping tables */
.rr table.bg-wide td.bg-measure { white-space: normal; min-width: 14rem; }
.rr table.bg-wide td .bg-how, .rr table.bg-wide td.bg-how { font-size: 0.92em; color: var(--color-fg-muted); white-space: normal; }
.rr table.bg-wide td.bg-who { white-space: normal; min-width: 8rem; font-weight: 600; }
.rr table.bg-wide td.bg-text { white-space: normal; }
.rr table.bg-free td { white-space: normal; }

/* every assumption, folded away */
.bg-details > summary { cursor: pointer; font: var(--label, 700 11px/1.3 sans-serif); letter-spacing: .08em; text-transform: uppercase; padding: 2px 0; }
.bg-details[open] > summary { margin-bottom: var(--cds-gap-sm); }

@media (max-width: 720px) {
  .rr table.bg-wide tbody th { min-width: 9rem; max-width: 11rem; white-space: normal; }
}