/* 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;
  /* A white outlined card, same as Controlling's summary strip. */
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}

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

.donor-summary-label {
  font: var(--md-sys-typescale-label-medium);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

.donor-summary-value {
  font: var(--md-sys-typescale-title-large);
  letter-spacing: var(--md-sys-typescale-title-large-tracking);
  color: var(--md-sys-color-on-surface);
  font-variant-numeric: tabular-nums;
}

.donor-summary-sub {
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

/* ── 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(--md-sys-color-surface-container-lowest);
  /* 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(--md-sys-color-outline-variant);
}

/* 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(--md-sys-color-on-surface-variant);
  margin-right: 0.25rem;
}

.donor-invoicing-grid .donor-grid-ob-col {
  position: sticky;
  left: 14rem;
  background: var(--md-sys-color-surface-container-lowest);
  min-width: 7rem;
  z-index: 1;
  box-shadow: 1px 0 0 var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
}

/* 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(--md-sys-color-surface-container-low);
  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. 9.5rem fits
   "Billed or paid" and "Billable" with their info icons on one line inside
   the cell padding; "Unbilled line budget" takes two. */
.donor-invoicing-grid .donor-grid-position {
  position: sticky;
  width: 9.5rem;
  min-width: 9.5rem;
  max-width: 9.5rem;
  background: var(--md-sys-color-surface-container-low);
  z-index: 1;
  white-space: normal;
}

.donor-invoicing-grid .donor-grid-position--billed-or-paid {
  right: 19rem;
  box-shadow: -1px 0 0 var(--md-sys-color-outline-variant);
}

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

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

/* Every header cell top-aligned, like the invoice columns' stacked heads. */
.donor-invoicing-grid thead th { vertical-align: top; }

/* A heading's last word with its info icon: one unit, so the marker never wraps
   onto a line of its own. */
.donor-grid-heading-end { white-space: nowrap; }

/* Pinned, the budget-line, Before-app and three figure columns take ~860px.
   On a narrower screen that leaves the invoice columns little or no room
   between them, so there only the budget line stays put and the rest
   scrolls with the invoices; on a phone nothing is pinned. */
@media (max-width: 1279px) {
  .donor-invoicing-grid .donor-grid-ob-col,
  .donor-invoicing-grid .donor-grid-position { position: static; }
}
@media (max-width: 600px) {
  .donor-invoicing-grid .donor-grid-line-col { position: static; }
}

/* 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(--md-sys-color-surface-container-low);
}

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

.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(--md-sys-color-outline-variant);
}

/* 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(--md-sys-color-primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.donor-grid-invoice-col .donor-col-full > a:hover {
  color: var(--md-sys-color-on-primary-container);
}

.donor-grid-period {
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
  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: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
  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: var(--md-sys-typescale-label-small);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: underline;
  cursor: pointer;
}

.donor-grid-toggle-btn:hover { color: var(--md-sys-color-primary); }

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: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  margin-top: 0.1rem;
  white-space: nowrap;
}

.donor-grid-qty-context {
  color: var(--md-sys-color-outline);
}

.donor-grid-qty-current {
  color: var(--md-sys-color-primary);
  font-weight: 500;
}

.donor-grid-qty-total {
  color: var(--md-sys-color-on-surface);
  font-weight: 500;
}

.donor-grid-marker {
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 0.1rem;
  white-space: nowrap;
}

.donor-grid-marker--rejected {
  color: var(--md-sys-color-error);
}

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

.status-donor-draft              { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); }
.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 — an error
   container with a full error outline. */
.donor-overlap-warning {
  background: var(--md-sys-color-error-container);
  border: 2px solid var(--md-sys-color-error);
  border-radius: var(--md-sys-shape-corner-medium);
  color: var(--md-sys-color-on-error-container);
  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(--md-sys-color-on-error-container);
  font-weight: 500;
  text-decoration: underline;
}

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

/* ── 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-radius: var(--md-sys-shape-corner-medium);
  color: var(--warning-dark);
  font: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
}

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

/* ── 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: 1px solid transparent;
}

.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 filled, borderless card instead of the
   outlined 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(--md-sys-color-surface-container);
  border-color: transparent;
}

.donor-invoice-show .donor-out-of-period-section h2 {
  color: var(--md-sys-color-on-surface-variant);
}

/* 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(--md-sys-color-on-surface);
}

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

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

[data-controller~="bulk-add"] .data-table tbody tr.is-selected {
  background: var(--md-sys-color-secondary-container);
}

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

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

.donor-status-history {
  list-style: none;
  margin: 0;
  padding: 0;
  font: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

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

.donor-line-item--rejected td { color: var(--md-sys-color-outline); }
.donor-line-item--rejected .cell-title a { color: var(--md-sys-color-outline); }

/* 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: 1px solid transparent;
}

.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(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); }
.donor-action-btn--remove:hover { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); }

.donor-action-btn--reject { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.donor-action-btn--reject:hover { background: color-mix(in srgb, var(--md-sys-color-error-container), var(--md-sys-color-on-error-container) 8%); color: var(--md-sys-color-on-error-container); }

.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: var(--md-sys-shape-corner-small);
  font: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}
/* assignment_overflow_controller writes the text, so CSS draws the icon. */
.donor-fixup-overflow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 0.25rem;
  vertical-align: -4px;
  background-color: currentColor;
  -webkit-mask: var(--md-icon-warning) center / contain no-repeat;
  mask: var(--md-icon-warning) center / contain no-repeat;
}

/* 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. 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: var(--md-sys-typescale-label-medium);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

/* Dense inline outlined text field (shared with .donor-row-form input[type="text"]). */
.donor-correction-input {
  width: 6.5rem;
  padding: 0.3rem 0.5rem;
  min-height: 32px;
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  font: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  text-align: right;
}

.donor-correction-input:hover,
.donor-row-form input[type="text"]:hover {
  border-color: var(--md-sys-color-on-surface);
}

.donor-correction-input:focus,
.donor-row-form input[type="text"]:focus {
  outline: none;
  border-color: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}

/* The cost record's original value, shown beside the input for comparison. */
.donor-row-form-original {
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--md-sys-color-outline);
  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(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  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(--md-sys-color-outline-variant);
}

.donor-confirm-figures dt {
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}

.donor-confirm-figures dd {
  margin: 0;
  font: var(--md-sys-typescale-title-small);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  color: var(--md-sys-color-on-surface);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

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

.donor-confirm-hint {
  margin: 0;
  padding: 0.75rem 1rem;
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
  background: var(--md-sys-color-surface-container-highest);
  border-radius: var(--md-sys-shape-corner-small);
}

/* Shares its outlined-field chrome with .donor-correction-input above. */
.donor-row-form input[type="text"] {
  padding: 0.3rem 0.5rem;
  min-height: 32px;
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  font: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  flex: 1 1 14rem;
  min-width: 0;
}

/* ── Billable-pool hint ────────────────────────────── */

/* One muted line under the warnings, introducing the verified records in the
   pool tables below. */
.donor-pool-hint {
  margin: 0 0 0.85rem;
  font: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

/* Reads as a section lead, not a footnote — body-large in the primary text colour. */
.donor-pool-hint--intro {
  margin-bottom: 1rem;
  font: var(--md-sys-typescale-body-large);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  color: var(--md-sys-color-on-surface);
}

.donor-pool-hint--intro strong { color: var(--md-sys-color-on-surface); font-weight: 500; }

/* 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 ──────────────────── */

/* 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(--md-sys-color-surface-container-low);
  font: var(--md-sys-typescale-title-small);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  color: var(--md-sys-color-on-surface);
  border-top: 2px solid var(--md-sys-color-outline-variant);
}

.donor-travel-claim-purpose {
  font-weight: 400;
  color: var(--md-sys-color-on-surface-variant);
}

/* 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 ───────────────────── */

/* Tinted by status so the stage reads at a glance; the container fill and the
   accent ("Next" line) reuse 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: 1rem 1.25rem;
  border-radius: var(--md-sys-shape-corner-medium);
}

.donor-guidance-banner--draft              { background: var(--md-sys-color-surface-container-high); --donor-accent: var(--md-sys-color-on-surface-variant); }
.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: var(--md-sys-typescale-body-large);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  color: var(--md-sys-color-on-surface);
}

.donor-guidance-next {
  margin: 0.5rem 0 0;
  font: var(--md-sys-typescale-title-small);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  color: var(--donor-accent);
}

.donor-guidance-next-label {
  margin-right: 0.3rem;
  opacity: 0.85;
}

/* ── Bottom status section + transition gates ── */

/* 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(--md-sys-color-outline-variant);
}

.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(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  overflow: hidden;
}

.donor-gate-checklist li + li { border-top: 1px solid var(--md-sys-color-outline-variant); }

.donor-gate-checklist label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  font: var(--md-sys-typescale-body-large);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
}

.donor-gate-checklist label:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}

.donor-gate-checklist input[type="checkbox"] {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--md-sys-color-primary);
  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: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--md-sys-color-outline);
  white-space: nowrap;
}

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

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

/* ── Missing required data warning ─────────────────────── */

/* 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;
}

/* An M3 icon button (.btn-icon); its 40px circle overhangs the summary's
   padding rather than growing the banner. */
.donor-data-warning-dismiss {
  flex-shrink: 0;
  margin: -0.5rem -0.5rem -0.5rem 0;
}
.donor-data-warning-dismiss:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}

/* 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 {
  display: inline-flex;
  vertical-align: -0.2em;
  color: var(--gold);
  margin-left: 0.35rem;
  cursor: help;
}
.donor-missing-data-flag .icon { width: 16px; height: 16px; vertical-align: 0; }

/* ── Lump sum (manual) line items ──────────────────────────────── */

/* 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: 500;
}

/* 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(--md-sys-color-outline-variant);
  font: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

.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(--md-sys-color-outline-variant);
}

/* 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: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
  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: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

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

.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-radius: var(--md-sys-shape-corner-medium);
  padding: 0.75rem 1rem;
  margin: 0.5rem 0 1rem;
  color: var(--warning-dark);
  font: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}