/* Donor Invoicing tab + donor invoice workspace.
   The tab mirrors the Restmittel sheet: budget lines as rows, one column per
   donor invoice (oldest → newest), with a billed-vs-budget summary on top. */

/* ── Tab summary ───────────────────────────────────────────────── */

.donor-invoicing-summary {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.25rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.donor-summary-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.donor-summary-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gray-mid);
}

.donor-summary-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gray-dark);
}

.donor-summary-sub {
  font-size: 0.76rem;
  color: var(--gray-mid);
}

/* ── Restmittel-style grid ─────────────────────────────────────── */

/* Horizontal scroll with the budget-line column pinned, so many billing
   periods stay navigable. */
.donor-invoicing-grid {
  overflow-x: auto;
}

/* The seam is a box-shadow, not a border: this table is border-collapse, where
   borders belong to the table grid and don't follow the sticky offset. */
.donor-invoicing-grid .donor-grid-line-col {
  position: sticky;
  left: 0;
  background: var(--white);
  /* Fixed, so .donor-grid-ob-col can pin at left: 14rem. */
  width: 14rem;
  min-width: 14rem;
  max-width: 14rem;
  z-index: 1;
  box-shadow: 1px 0 0 var(--border);
}

/* A Mixed parent's figures include its sub-lines, so the sub-lines read as
   nested under it, as on the Controlling tab. */
.donor-invoicing-grid .donor-grid-sub-line {
  padding-left: 1.5rem;
}

.donor-grid-sub-marker {
  color: var(--gray-mid);
  margin-right: 0.25rem;
}

.donor-invoicing-grid .donor-grid-ob-col {
  position: sticky;
  left: 14rem;
  background: var(--white);
  min-width: 7rem;
  z-index: 1;
  box-shadow: 1px 0 0 var(--border);
  color: var(--gray-mid);
}

/* Outranks the other sticky headers, which carry z-index 2 from tables.css. */
.donor-invoicing-grid thead .donor-grid-line-col,
.donor-invoicing-grid thead .donor-grid-ob-col {
  background: var(--surface-muted);
  z-index: 3;
}

.donor-invoicing-grid thead .donor-grid-ob-col {
  vertical-align: top;
  text-align: center;
}

/* Fixed widths, so each column pins at a known right offset. */
.donor-invoicing-grid .donor-grid-position {
  position: sticky;
  width: 8rem;
  min-width: 8rem;
  max-width: 8rem;
  background: var(--surface-muted);
  z-index: 1;
  white-space: normal;
}

.donor-invoicing-grid .donor-grid-position--billed-or-paid {
  right: 16rem;
  box-shadow: -1px 0 0 var(--border);
}

.donor-invoicing-grid .donor-grid-position--billable { right: 8rem; }
.donor-invoicing-grid .donor-grid-position--unbilled { right: 0; }

.donor-invoicing-grid thead .donor-grid-position {
  z-index: 3;
  vertical-align: top;
}

/* An opaque cell background hides the row tint from tables.css. */
.donor-invoicing-grid tbody tr:hover .donor-grid-line-col,
.donor-invoicing-grid tbody tr:hover .donor-grid-ob-col {
  background: var(--surface-muted);
}

/* Compound selector: .donor-grid-marker is defined further down. */
.donor-grid-over,
.donor-grid-marker.donor-grid-over {
  color: var(--danger);
}

.donor-invoicing-grid thead .donor-grid-invoice-col {
  min-width: 12rem;
  vertical-align: top;
  text-align: center;
}

/* Light vertical separation between invoice columns, in every row section. */
.donor-invoicing-grid th[data-column-id],
.donor-invoicing-grid td[data-column-id] {
  border-left: 1px solid var(--border);
}

/* The reference number is the way into the invoice — make it read as a link. */
.donor-grid-invoice-col .donor-col-full > a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.donor-grid-invoice-col .donor-col-full > a:hover {
  color: var(--teal-dark);
}

.donor-grid-period {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--gray-mid);
  margin: 0.2rem 0 0.35rem;
}

/* Quick line-item tally under each column's status badge — a glanceable
   "how big is this invoice" read without opening it. */
.donor-grid-line-count {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--gray-mid);
  margin-top: 0.35rem;
}

/* Per-column Hide/Show. A collapsed column shrinks to a slim stub: the header
   shows only the Show button (tooltip carries the reference), body/footer
   cells empty out via display:none on children + zeroed font for text nodes. */
.donor-grid-toggle-btn {
  display: block;
  margin: 0.35rem auto 0;
  padding: 0;
  border: none;
  background: none;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--gray-mid);
  text-decoration: underline;
  cursor: pointer;
}

.donor-grid-toggle-btn:hover { color: var(--gray-dark); }

th .donor-col-show { display: none; }

th.is-collapsed .donor-col-full { display: none; }

th.is-collapsed .donor-col-show {
  display: block;
  margin-top: 0;
}

th.is-collapsed.donor-grid-invoice-col {
  min-width: 0;
  width: 3.5rem;
}

td.is-collapsed {
  font-size: 0;
  line-height: 0;
}

td.is-collapsed > * { display: none; }

/* The billed quantity paired with each EUR cell (unit-billed lines only),
   as spelled-out arithmetic: already-billed (grey) + this invoice (green)
   = new total / budgeted. Consumed-vs-budget at a glance, no head math. */
.donor-grid-qty {
  font-size: 0.75rem;
  margin-top: 0.1rem;
  white-space: nowrap;
}

.donor-grid-qty-context {
  color: var(--text-faint);
}

.donor-grid-qty-current {
  color: var(--teal);
  font-weight: 600;
}

.donor-grid-qty-total {
  color: var(--gray-dark);
  font-weight: 500;
}

.donor-grid-marker {
  font-size: 0.72rem;
  color: var(--gray-mid);
  margin-top: 0.1rem;
  white-space: nowrap;
}

.donor-grid-marker--rejected {
  color: var(--danger);
}

/* ── Lifecycle status badges (palette mirrors badges.css) ───── */

.status-donor-draft              { background: var(--gray-light); color: var(--gray-dark); }
.status-donor-draft_under_review { background: var(--info-bg); color: var(--info); }
.status-donor-rework_draft       { background: var(--review-bg); color: var(--review); }
.status-donor-invoiced           { background: var(--invoiced-bg); color: var(--invoiced); }
.status-donor-rework_invoice     { background: var(--review-bg); color: var(--review); }
.status-donor-paid               { background: var(--approved-bg); color: var(--approved); }
.status-donor-rejected           { background: var(--danger-bg); color: var(--danger); }
.status-donor-corrected          { background: var(--amber-bg); color: var(--amber-dark); }

/* ── New-invoice form: period-overlap confirmation ──────────────── */

/* Deliberately loud: creating a second invoice over the same window is
   usually a mistake, so this reads as a stop sign, not a hint. */
.donor-overlap-warning {
  background: var(--danger-bg);
  border: 2px solid var(--danger);
  border-radius: 8px;
  color: var(--danger);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.donor-overlap-warning ul {
  margin: 0.5rem 0;
  padding-left: 1.2rem;
}

.donor-overlap-warning li { margin-bottom: 0.25rem; }

.donor-overlap-warning a {
  color: var(--danger);
  font-weight: 600;
  text-decoration: underline;
}

.donor-overlap-warning p { margin: 0.5rem 0 0; }

.btn-danger-confirm {
  background: var(--danger);
  border-color: var(--danger);
}

.btn-danger-confirm:hover {
  background: var(--danger-dark);
  border-color: var(--danger-dark);
}

/* ── Show header: edit the billing period ───────────────────────── */

/* Only the .btn-icon box is trimmed — the 2rem square would stretch the meta
   line. Glyph, hover and focus stay identical to every other edit button. */
.donor-period-edit-btn {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.15rem;
  vertical-align: -0.4rem;
}

/* A caution, not a stop sign — the save is always allowed. */
.donor-period-edit-hint {
  background: var(--warning-bg);
  border-left: 3px solid var(--warning);
  border-radius: 4px;
  color: var(--gray-dark);
  font-size: 0.85rem;
  line-height: 1.45;
  margin: 1rem 0 0;
  padding: 0.7rem 0.9rem;
}

.donor-period-edit-hint strong { display: block; color: var(--warning); }

/* ── Lifecycle transition buttons ───────────────────────────────── */

/* Each button is tinted like the TARGET status's badge, with a direction
   glyph (forward arrow / rework U-turn / paid check), so "where does this
   take the invoice" reads at a glance. */
.donor-transition-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1.5px solid currentColor;
}

.donor-transition-btn .icon {
  width: 1em;
  height: 1em;
}

.donor-transition-btn--draft_under_review { background: var(--info-bg); color: var(--info); }
.donor-transition-btn--draft_under_review:hover { background: var(--info-bg-hover); color: var(--info); }

.donor-transition-btn--rework_draft,
.donor-transition-btn--rework_invoice { background: var(--review-bg); color: var(--review); }
.donor-transition-btn--rework_draft:hover,
.donor-transition-btn--rework_invoice:hover { background: var(--review-bg-hover); color: var(--review); }

.donor-transition-btn--invoiced { background: var(--invoiced-bg); color: var(--invoiced); }
.donor-transition-btn--invoiced:hover { background: var(--invoiced-bg-hover); color: var(--invoiced); }

.donor-transition-btn--paid { background: var(--approved-bg); color: var(--approved); }
.donor-transition-btn--paid:hover { background: var(--approved-bg-hover); color: var(--approved); }

/* ── Workspace: section rhythm ─────────────────────────────────── */

/* The workspace stacks its cards (status, line items, pool) directly in the
   page container; give them breathing room so they don't butt edges. */
.donor-invoice-show .dashboard-section {
  margin-bottom: 1.5rem;
}

/* The out-of-period section (relocated to the page bottom, always expanded).
   Styled deliberately MUTED — a grey card with a grey top accent instead of the
   teal-topped primary sections — so it reads as secondary "reference" info that
   won't be actioned most of the time. Scoped under .donor-invoice-show to beat
   the base .dashboard-section rule regardless of stylesheet load order. */
.donor-invoice-show .donor-out-of-period-section {
  background: var(--gray-light);
  border-color: var(--border);
  border-top-color: var(--gray-mid);
}

.donor-invoice-show .donor-out-of-period-section h2 {
  color: var(--gray-mid);
}

/* Cap the list height so a long future backlog scrolls internally instead of
   ballooning the page. */
.donor-out-of-period-scroll {
  max-height: 22rem;
  overflow-y: auto;
}

/* An out-of-period record row: details left, Add right. */
.donor-out-of-period-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* The action column keeps one width whatever the row's text does: without this
   a long description squeezes "Add anyway" into two lines. The details cell
   absorbs the variation instead. */
.donor-out-of-period-item > form {
  flex-shrink: 0;
}

.donor-out-of-period-item > span {
  min-width: 0;
}

.donor-out-of-period-item .btn {
  white-space: nowrap;
}

/* Grey with the rest of this muted card — the default link blue would make
   reference rows shout louder than the billable pool above. */
.donor-out-of-period-item a {
  color: var(--gray-dark);
}

.donor-out-of-period-item a:hover,
.donor-out-of-period-item a:focus-visible {
  color: var(--teal);
}

/* ── Workspace: billable-pool selection (mirrors invoice bulk edit) ── */

[data-controller~="bulk-add"] .data-table tbody tr.is-selected {
  background: var(--teal-light);
}

[data-controller~="bulk-add"] .data-table tbody tr.is-selected td:first-child {
  box-shadow: inset 3px 0 0 var(--teal);
}

/* ── Workspace: line items + corrections ───────────────────────── */

.donor-status-history {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
  color: var(--gray-mid);
}

.donor-status-history li { margin-bottom: 0.3rem; }

.donor-line-item--rejected td { color: var(--text-faint); }
.donor-line-item--rejected .cell-title a { color: var(--text-faint); }

/* Sortable-header styling lives with the shared component in tables.css
   (.data-table th[data-sortable]), shared with the Management project table
   and the controlling tables. */

/* State cell: parent status badge plus an optional Corrected/Rejected
   qualifier, kept on one line until they need to wrap. */
.donor-line-item-state {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

/* Row action buttons: each verb gets its glyph and tint — pencil/blue to
   correct, U-turn/grey to return to the pool, X/red to reject. */
.donor-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1.5px solid currentColor;
}

.donor-action-btn .icon {
  width: 1em;
  height: 1em;
}

.donor-action-btn--correct { background: var(--info-bg); color: var(--info); }
.donor-action-btn--correct:hover { background: var(--info-bg-hover); color: var(--info); }

.donor-action-btn--remove { background: var(--gray-light); color: var(--gray-dark); }
.donor-action-btn--remove:hover { background: var(--border); color: var(--gray-dark); }

.donor-action-btn--reject { background: var(--danger-bg); color: var(--danger); }
.donor-action-btn--reject:hover { background: var(--danger-border); color: var(--danger); }

.donor-action-btn--assign { background: var(--indigo-bg); color: var(--indigo); }
.donor-action-btn--assign:hover { background: var(--indigo-bg-hover); color: var(--indigo-dark); }

/* Pool-row fix-up actions (split, upload-document, change-budget-line, edit) now
   render as bare .btn-icon buttons grouped in the right-hand .col-actions column,
   matching every other data table and the invoice page's split icon. */

/* Advisory amber hint in the re-code modal when the chosen budget line would
   overflow — mirrors the split wizard's overflow warning. */
.donor-fixup-overflow {
  margin: 0.4rem 0 0;
  padding: 0.5rem 0.65rem;
  background: var(--warning-bg);
  color: var(--amber-dark);
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1.35;
}

/* Hundreds of line items read better as one long page than through the global
   viewport cap's inner scrollbar (tables.css). The pool and out-of-period lists
   keep their caps so they don't bury this section. Gated at the width where the
   table stops fitting (min-content ~1020px since the ID and Expert columns,
   measured against a wrap ~170px narrower than the viewport): a wrap scrolls
   in both axes or neither, so below this it still needs the wrap's horizontal
   scrolling. The th rule restores the page-level sticky offset tables.css
   drops for scroll containers. */
@media (min-width: 1200px) {
  #donor_invoice_line_items .data-table-wrap {
    max-height: none;
    overflow: visible;
  }

  #donor_invoice_line_items .data-table-wrap .data-table thead th {
    top: var(--nav-height);
  }
}

/* Row actions (Correct…, Reject…): clicking one swaps the whole button group
   for that action's form IN PLACE on the same line (INT-51). The old design
   floated the form in an absolute popover dropped below the button, which the
   scroll container (.data-table-wrap, overflow:auto) clipped off-screen for
   rows low in the table. Replacing the buttons keeps the form on the visible
   row with no popover and no row growth; clicking outside (popover controller)
   closes it and the buttons return. */
.donor-row-form-details {
  display: inline-block;
}

.donor-row-form-details summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
}

.donor-row-form-details summary::-webkit-details-marker { display: none; }

/* While one action is open, hide every other control in the cell and the open
   control's own summary, so only its form occupies the line. */
.donor-line-items-table .icon-actions:has(.donor-row-form-details[open]) > :not(.donor-row-form-details[open]) {
  display: none;
}

.donor-line-items-table .donor-row-form-details[open] {
  flex: 1 1 auto;
}

.donor-line-items-table .donor-row-form-details[open] > summary {
  display: none;
}

.donor-row-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* Stay on one line in place of the buttons; the reason/number input carries
     the slack (flex 1 1, min-width:0) and shrinks to fit the cell. */
  white-space: nowrap;
}

.donor-row-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-mid);
}

.donor-correction-input {
  width: 6.5rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--border-input);
  border-radius: 6px;
  font-size: 0.85rem;
  text-align: right;
}

/* The cost record's original value, shown beside the input for comparison. */
.donor-row-form-original {
  font-size: 0.75rem;
  color: var(--text-faint);
  white-space: nowrap;
}

/* Custom correction-confirm dialog — replaces the browser confirm with the
   computed impact (income given up, resulting margin). The modal shell is the
   shared .confirm-modal component (modals.css); below are the donor-specific
   pieces layered on top. */

/* Labeled figure rows: label left, number right, losses in red. */
.donor-confirm-figures {
  margin: 0 0 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.donor-confirm-figures > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.5rem 0.85rem;
}

.donor-confirm-figures > div + div {
  border-top: 1px solid var(--divider);
}

.donor-confirm-figures dt {
  color: var(--gray-mid);
  font-size: 0.85rem;
}

.donor-confirm-figures dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.donor-confirm-figures > div.is-loss dd {
  color: var(--danger);
}

.donor-confirm-hint {
  margin: 0;
  padding: 0.6rem 0.85rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--gray-mid);
  background: var(--surface-muted);
  border-left: 3px solid var(--border-input);
  border-radius: 0 6px 6px 0;
}

.confirm-actions .btn-danger-confirm {
  color: var(--white);
  font-weight: 600;
  padding: 0.5rem 1.1rem;
}

.donor-row-form input[type="text"] {
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--border-input);
  border-radius: 6px;
  font-size: 0.85rem;
  flex: 1 1 14rem;
  min-width: 0;
}

/* ── Billable-pool hint (INT-51 #2) ────────────────────────────── */

/* One muted line under the warnings, introducing the verified records in the
   pool tables below. */
.donor-pool-hint {
  margin: 0 0 0.85rem;
  font-size: 0.85rem;
  color: var(--gray-mid);
}

/* Reads as a section lead, not a footnote — teal rule ties it to the heading. */
.donor-pool-hint--intro {
  border-left: 3px solid var(--teal);
  padding: 0.15rem 0 0.15rem 0.75rem;
  margin-bottom: 1rem;
  color: var(--gray-dark);
  line-height: 1.5;
}

.donor-pool-hint--intro strong { color: var(--text-strong); font-weight: 600; }

/* Sits directly above the tables it explains, below the warnings. */
.donor-pool-select-hint { margin: 0 0 0.6rem; }

/* ── Travel claim lines in the pool (INT-152) ──────────────────── */

/* A claim's sub-header band above its billable lines: traveller, trip dates,
   purpose, claim link. Sits inside the same table as the line rows so the
   bulk-add columns keep their alignment. */
.donor-travel-claim-band td {
  background: var(--surface-muted);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-dark);
  border-top: 2px solid var(--border);
}

.donor-travel-claim-purpose {
  font-weight: 400;
  color: var(--gray-mid);
}

/* A trip's date range never breaks mid-range (the en-dash is a tempting
   wrap point in the narrow description column). */
.donor-travel-trip-dates { white-space: nowrap; }

/* ── Stage-aware guidance banner (INT-51 #8) ───────────────────── */

/* Tinted by status so the stage reads at a glance; the accent (left border +
   "Next" line) reuses the .status-donor-* palette so badge and banner agree.
   invoiced is violet (matching its badge), not green — paid is the green
   state, so they stay distinct. */
.donor-guidance-banner {
  margin-bottom: 1.5rem;
  padding: 0.9rem 1.1rem;
  border-radius: 8px;
  border-left: 4px solid var(--donor-accent, var(--text-faint));
}

.donor-guidance-banner--draft              { background: var(--gray-light); --donor-accent: var(--gray-mid); }
.donor-guidance-banner--draft_under_review { background: var(--info-bg); --donor-accent: var(--info); }
.donor-guidance-banner--rework_draft       { background: var(--review-bg); --donor-accent: var(--review); }
.donor-guidance-banner--invoiced           { background: var(--invoiced-bg); --donor-accent: var(--invoiced); }
.donor-guidance-banner--rework_invoice     { background: var(--review-bg); --donor-accent: var(--review); }
.donor-guidance-banner--paid               { background: var(--approved-bg); --donor-accent: var(--approved); }

.donor-guidance-body {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--gray-dark);
}

.donor-guidance-next {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--donor-accent);
}

.donor-guidance-next-label {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.72rem;
  margin-right: 0.3rem;
  opacity: 0.85;
}

/* ── Bottom status section + transition gates (INT-51 #3 / #6 / #7) ── */

/* Footer action bar (see .entry-action-bar, cashbook.css): forward right,
   rework revert left; an empty left side still pushes the forward right. */
.donor-transition-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.donor-transition-actions-left,
.donor-transition-actions-right {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

/* Checklist gate (Mark as Invoiced): rows of label + checkbox, reusing the
   supporting-docs checklist look. Confirm stays disabled until all are ticked
   (handled by transition_confirm_controller). */
.donor-gate-checklist {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.donor-gate-checklist li + li { border-top: 1px solid var(--divider); }

.donor-gate-checklist label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.donor-gate-checklist input[type="checkbox"] {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--teal);
  cursor: pointer;
}

/* Downloads gate (Mark as Draft under review): the two LERF download buttons. */
.donor-gate-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  align-items: center;
}

/* LERF attachments export slot (header actions + downloads gate): button_to
   wraps its button in a <form>, which sits in these flex rows next to plain
   links — strip the form's box so the buttons line up. */
.donor-invoice-show .header-actions form,
.donor-gate-downloads form { margin: 0; }

.lerf-export-meta {
  font-size: 0.75rem;
  color: var(--text-faint);
  white-space: nowrap;
}

.lerf-export-building {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.lerf-export-progress {
  width: 110px;
  accent-color: var(--teal);
}

/* ── Missing required data warning (INT-95) ─────────────────────── */

/* Reuses the amber .lerf-warning box (lerf.css) but as a static banner rather
   than a <details>, so the header isn't a clickable disclosure. */
.donor-data-warning-head {
  cursor: default;
}

.donor-data-warning-dismiss {
  background: none;
  border: none;
  color: var(--gray-mid);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.25rem;
  flex-shrink: 0;
}

.donor-data-warning-dismiss:hover {
  color: var(--gray-dark);
}

/* Flagged line-item rows: subtle amber tint + an inline marker so the user can
   spot which row to remove without re-reading the banner. */
.donor-line-items-table tr.donor-line-item--missing-data > td {
  background: var(--warning-bg);
}

.donor-missing-data-flag {
  color: var(--gold);
  margin-left: 0.35rem;
}

/* ── Lump sum (manual) line items (INT-90) ──────────────────────────────── */

/* The "Lump sum (manual) budget lines" section above the billable pool: each row takes a
   quantity inline and adds a decoupled line item. */
.donor-lump-sum-form {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.donor-lump-sum-qty {
  width: 5rem;
}

/* Pill marking a manual line in the line-items table (on top of .status-badge). */
.donor-lump-sum-badge {
  background: var(--indigo-bg);
  color: var(--indigo);
  margin-left: 0.35rem;
}

.donor-line-item-manual {
  font-weight: 600;
}

/* The assign-cost-records modal: select-all + count toolbar above the list. */
.donor-assign-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--gray-mid);
}

.donor-assign-select-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.donor-assign-select-all input[type="checkbox"] {
  margin: 0;
}

.donor-assign-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  max-height: 18rem;
  overflow-y: auto;
  overflow-x: hidden; /* rows wrap, so a horizontal bar would only be noise */
}

.donor-assign-list li + li {
  border-top: 1px solid var(--divider);
}

/* user-select: none — a shift-click on the row text must toggle the checkbox,
   not select text. See assign_records_controller#armRange. */
.donor-assign-list label {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0;
  cursor: pointer;
  user-select: none;
}

/* Wrap an unspaced description rather than push it under the clipped edge. */
.donor-assign-list label span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Running EUR cost of the ticked rows. */
.confirm-actions .donor-assign-total {
  margin-right: auto;
  align-self: center;
  font-size: 0.85rem;
  color: var(--gray-mid);
  font-variant-numeric: tabular-nums;
}

.donor-assigned-cost {
  font-variant-numeric: tabular-nums;
}

/* The assigned records, collapsed under a summary line. */
.donor-assign-assigned {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--gray-mid);
}

.donor-assign-assigned summary {
  cursor: pointer;
  padding: 0.4rem 0;
  border-top: 1px solid var(--border);
}

.donor-assign-list--assigned {
  margin: 0;
  max-height: 9rem;
}

.donor-assign-assigned-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.5rem;
}

/* Amber "no cost records assigned" notice inside the submit-for-review dialog. */
.donor-confirm-warning {
  background: var(--warning-bg);
  border: 1px solid var(--gold-soft);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  margin: 0.5rem 0 1rem;
  color: var(--gold-dark);
}