/* The index filter bar (.filter-bar, .filter-bar-primary, .toggle-pill,
   .filter-more…) lives in filters.css. */

/* 50 rows a page (up to 1000 via ?per=) read better as one long page than
   through the global viewport cap's inner scrollbar (tables.css). Gated above
   the width where the table stops fitting (min-content ~1380px, plus headroom
   for descriptions longer than the test data's): 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: 1600px) {
  #cashbook_results .data-table-wrap {
    max-height: none;
    overflow: visible;
  }

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

/* ── Cashbook receipt cards ────────────────────────────────── */
.receipts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.receipts-header h3 {
  margin-bottom: 0;
}

.receipts-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.receipt-card {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.25rem;
}

.receipt-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.receipt-card-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-mid);
}

.form-hint {
  font-size: 0.75rem;
  color: var(--gray-mid);
  line-height: 1.4;
}

/* Conditional upload reminder (timesheet / travel proof), revealed by
   upload_reminders_controller when a matching budget line is picked. */
.form-reminder {
  display: flex;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  margin-bottom: 1rem;
  background: var(--teal-light);
  border-left: 3px solid var(--teal);
  border-radius: 4px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--gray-dark);
}

.form-reminder::before {
  content: "ℹ";
  flex: none;
  font-weight: 700;
  color: var(--teal-dark);
}

.form-subhead {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-mid);
  margin: 1.5rem 0 0.75rem;
}

.team-table { margin-bottom: 0.5rem; }

.team-table td select {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border-input);
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--gray-dark);
  font-family: inherit;
  background: var(--white);
}

.team-table .col-action {
  width: 1%;
  white-space: nowrap;
}

.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--gray-mid);
}

.form-checkbox {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.form-checkbox .inline-check {
  font-size: 0.9rem;
  color: var(--gray-dark);
  font-weight: 500;
}

.form-checkbox input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.checkbox-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-muted);
  font-size: 0.9rem;
  color: var(--gray-dark);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.checkbox-row:hover { border-color: var(--teal); background: var(--white); }
.checkbox-row input[type="checkbox"] { margin: 0; }
.checkbox-meta { margin-left: auto; font-size: 0.75rem; color: var(--gray-mid); }

.form-note { font-size: 0.85rem; color: var(--gray-mid); margin: 0; }

.section-header h2 { margin-bottom: 0; }

.list-item-link-block {
  flex: 1;
  text-decoration: none;
  color: inherit;
}

.list-item-link-block:hover .list-item-title {
  color: var(--teal);
}

.btn-remove {
  flex-shrink: 0;
  padding: 0.25rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid var(--danger-border);
  background: transparent;
  color: var(--danger);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}

.btn-remove:hover {
  background: var(--danger);
  color: var(--white);
  border-color: var(--danger);
}

.assign-form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--divider);
}

.assign-form select {
  flex: 1;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-input);
  border-radius: 4px;
  font-size: 0.9rem;
  color: var(--gray-dark);
  font-family: inherit;
  background: var(--white);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  appearance: none;
  background-image: var(--dropdown-arrow);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.25rem;
}

.assign-form select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 153, 153, 0.12);
}

.assign-form input[type="submit"] {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  font-weight: 500;
  border-radius: 4px;
  border: none;
  background: var(--teal);
  color: white;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

.assign-form input[type="submit"]:hover { background: var(--teal-dark); }

/* Cashbook entry comments */
.comments-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
.comment {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  background: var(--white);
}
.comment-header {
  display: flex; gap: 0.75rem; align-items: baseline;
  font-size: 0.85rem; color: var(--gray-mid);
}
.comment-author { font-weight: 600; color: var(--text-strong); }
/* Moderation control sits at the far right of the header. */
.comment-delete { margin-left: auto; }
.comment-delete form { margin: 0; }
.comment-body { margin: 0.4rem 0; white-space: pre-wrap; }
.comment-body .mention { background: var(--warning-bg); padding: 0 0.15rem; border-radius: 3px; }
.comment-replies { margin-top: 0.5rem; padding-left: 1rem; border-left: 2px solid var(--border); }
/* Matches .travel-status-history / .donor-status-history. */
.cashbook-status-history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--gray-mid);
}

.cashbook-status-history strong { color: var(--gray-dark); }

/* Status-change audit entries: compact one-liners, visually quieter than a
   user comment so the conversation stays the focus. */
.comment-status-change {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  background: var(--surface-muted);
  border-style: dashed;
  font-size: 0.85rem;
  color: var(--gray-mid);
  padding: 0.5rem 1rem;
}
.comment-status-change strong { color: var(--text-strong); }
.comment-status-change em { font-style: normal; font-weight: 600; }
.comment-status-change .comment-timestamp { white-space: nowrap; }
.comment-reply-form summary { cursor: pointer; font-size: 0.85rem; color: var(--requested); }
.comment-form { position: relative; margin-top: 0.5rem; }
.comment-form textarea { width: 100%; padding: 0.5rem; border: 1px solid var(--border-input); border-radius: 4px; font-family: inherit; }
.comment-form-actions { margin-top: 0.5rem; }
.mention-suggestions {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--white); border: 1px solid var(--border-input); border-radius: 4px;
  list-style: none; margin: 0; padding: 0.25rem 0; z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.mention-suggestion { padding: 0.35rem 0.75rem; cursor: pointer; }
.mention-suggestion.is-active, .mention-suggestion:hover { background: var(--requested-bg); }

/* Collapsible travel-context block on the cashbook form. The summary reads
   like a form-section heading (uppercase teal); a chevron rotates on open. */
.travel-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
}
.travel-disclosure > summary::-webkit-details-marker { display: none; }
.travel-disclosure > summary::before {
  content: "\25B8"; /* ▸ */
  font-size: 0.9em;
  transition: transform 0.15s ease;
}
.travel-disclosure[open] > summary::before { transform: rotate(90deg); }
.travel-disclosure[open] > summary { margin-bottom: 1.25rem; }

/* ── Cashbook entry status: inline transition menu (index) ─────
   The trigger reuses the .status-badge look (.status-badge colours live in
   badges.css, loaded earlier); the list is an anchored popover toggled by
   status_menu_controller. */
.status-menu { position: relative; display: inline-flex; }

.status-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 0;
  cursor: pointer;
  font-family: inherit; /* not `font: inherit` — that shorthand would reset the
                           .status-badge font-size/weight back to the row's */
}

.status-menu-caret { display: inline-flex; opacity: 0.85; }
.status-menu-caret .icon { width: 1em; height: 1em; stroke-width: 3; }

.status-menu-list {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 20;
  min-width: 14rem;
  display: flex;
  flex-direction: column;
  padding: 0.3rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.status-menu-list[hidden] { display: none; }

/* button_to wraps each item in a <form>; reset and stretch it. */
.status-menu-list form { margin: 0; }

.status-menu-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-strong);
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  white-space: nowrap;
}

.status-menu-item .icon { width: 1em; height: 1em; flex-shrink: 0; }

.status-menu-item:hover { background: var(--teal-light); }

/* Reverts are separated from the forward action above by a thin divider. */
.status-menu-list form:has(.status-menu-item-revert) + form:has(.status-menu-item-revert) { border-top: 0; }
.status-menu-list form:has(.status-menu-item-forward) + form:has(.status-menu-item-revert) {
  border-top: 1px solid var(--border);
  margin-top: 0.2rem;
  padding-top: 0.2rem;
}

/* Each menu item is tinted with the colour of the state it moves the entry TO
   (same palette as the badges in dashboard.css), so the menu doubles as a
   preview of where the entry will land. */
.status-menu-target-project_lead_verification_requested { color: var(--requested); }
.status-menu-target-project_lead_verification_requested:hover { background: var(--requested-bg); }
.status-menu-target-accounting_verification_requested { color: var(--review); }
.status-menu-target-accounting_verification_requested:hover { background: var(--review-bg); }
.status-menu-target-verified { color: var(--approved); }
.status-menu-target-verified:hover { background: var(--approved-bg); }

/* ── Cashbook index table ─────────────────────────────────────── */

/* The index frame wraps the top nav and the page body; frames are
   display:inline by default, which would collapse the layout. */
turbo-frame#cashbook_results {
  display: block;
}

/* Who submitted the entry, as a muted second line under the description. */
.data-table .cell-submitter {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--gray-mid);
}

/* Every row gets a left accent coloured by verification status (blue → orange
   → green along the flow, gray once locked into a donor invoice), so a reviewer
   can scan the queue at a glance. The box-shadow draws the bar without
   shifting cell content. Hexes match the badge palette in badges.css. */
.data-table tbody tr.row-status-project_lead_verification_requested td:first-child {
  box-shadow: inset 3px 0 0 0 var(--requested);
}
.data-table tbody tr.row-status-accounting_verification_requested td:first-child {
  box-shadow: inset 3px 0 0 0 var(--review);
}
.data-table tbody tr.row-status-verified td:first-child {
  box-shadow: inset 3px 0 0 0 var(--approved);
}
.data-table tbody tr.row-status-donor_invoiced td:first-child {
  box-shadow: inset 3px 0 0 0 var(--text-faint);
}

/* ── Cashbook entry show: header layout ───────────────────────── */

/* Title with its edit pencil sitting to the right of it. */
.entry-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.entry-title-row h1 { margin-bottom: 0; }

/* Reviewer's flag toggle next to the pencil/split icons. button_to wraps the
   button in a form; collapse both wrappers so the button sits on the flex row. */
.entry-title-row span[id^="flag_"],
.entry-title-row span[id^="flag_"] form { display: contents; }

/* Flagged state fills the outline glyph, same pattern as the sidebar
   favourite star (.sidebar-project-fav.is-favorited .icon). */
.entry-flag-btn.is-flagged { color: var(--danger); }
.entry-flag-btn.is-flagged .icon { fill: var(--danger); }

/* Small flag glyph marking flagged rows on the index. */
.cashbook-flag-indicator {
  color: var(--danger);
  vertical-align: -0.15em;
}
.cashbook-flag-indicator .icon {
  width: 0.95rem;
  height: 0.95rem;
  fill: var(--danger);
}

/* Right side of the entry header: current status badge + "Create new". */
.entry-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Footer action bar at the bottom of the entry show page: forward transition
   right-aligned as the primary action, revert left-aligned as a muted
   secondary. With no revert the empty left side still pushes the forward
   button right. */
.entry-action-bar {
  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);
}

.entry-action-bar-left,
.entry-action-bar-right {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* State-machine transition buttons on the show page — .btn-state chrome lives
   in badges.css. Each is tinted with the colour of the state it moves the
   entry TO — the same palette as the badges and the index menu items, so the
   whole flow reads in one colour language. The direction arrow (forward /
   U-turn) carries the forward-vs-revert distinction. */
.btn-state-project_lead_verification_requested { background: var(--requested-bg); color: var(--requested); border-color: var(--requested-border); }
.btn-state-project_lead_verification_requested:hover { background: var(--requested-bg-hover); color: var(--requested); }

.btn-state-accounting_verification_requested { background: var(--review-bg); color: var(--review); border-color: var(--review-border); }
.btn-state-accounting_verification_requested:hover { background: var(--review-bg-hover); color: var(--review); }

.btn-state-verified { background: var(--approved-bg); color: var(--approved); border-color: var(--success-border); }
.btn-state-verified:hover { background: var(--approved-bg-hover); color: var(--approved); }

/* ── Split entry: trigger reuses .li-split-btn from invoices.css (in the title
      row, beside the edit pencil); the over-budget banner + wizard extras below.
      The wizard dialog reuses .split-modal from invoices.css. ── */
/* Index budget-line cell: the over-budget chip sits under the label and may
   wrap. Without this its nowrap width sets the column's minimum and pushes the
   table into horizontal scroll, cutting off the right-hand columns. */
.data-table .overflow-chip--stack {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0.2rem 0 0;
  white-space: normal;
}

/* The banner carries the inline "Book on Flexible Remuneration" action:
   text and button sit on one line, wrapping on narrow screens. */
.entry-split-warning {
  margin: 0 0 1.25rem;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  background: var(--pending-bg);
  border: 1px solid var(--gold-soft);
  color: var(--gold-dark);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.entry-split-warning p { margin: 0; }

/* Per-receipt → line assignment, on the split step (cashbook only). One receipt may
   be ticked for several lines; each line must end with a receipt (assigned or uploaded). */
.split-attachments {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--gray-light);
  border-radius: 8px;
}

.split-attachments-label {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-dark);
}

.split-attachments-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.split-attachments-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.split-attachment-name {
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

/* The per-line checkboxes for one receipt — wrap when there are many lines. */
.split-attachment-targets {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem 0.75rem;
}

.split-attachment-target {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: var(--gray-dark);
  white-space: nowrap;
  cursor: pointer;
}
.split-attachment-target input { accent-color: var(--teal); }


/* The cashbook entry show page stacks .dashboard-section cards (Receipts, then
   Discussion). Unlike .form-section, .dashboard-section has no bottom margin, so
   match the same 1.5rem rhythm here to separate the cards. */
.project-show .dashboard-section {
  margin-bottom: 1.5rem;
}

/* "Add receipts" form in the show page's Receipts section: separated from the
   receipts list by a divider, picker rows stacked, the Upload button on its
   own line below them and right-justified. */
.receipts-add-form {
  display: flex;
  flex-direction: column;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--divider);
}

.receipts-add-form .form-field {
  margin: 0 0 0.75rem;
}

.receipts-add-form .btn {
  align-self: flex-end;
}

/* Row-based receipt picker (INT-156): file input + "send to donor" checkbox +
   remove button per row, on the submission form and the show page's add form. */
.receipt-picker-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.receipt-picker-row input[type="file"] {
  flex: 1 1 14rem;
  min-width: 0;
}

.receipt-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--gray-mid);
  white-space: nowrap;
  margin: 0;
}

/* The picker sits in a .form-field, so the shared text-input rule applies here
   too — WebKit honors its width/padding/border on a native checkbox and inflates
   it, pushing the label and controls out of the card. Undo it (cf. .travel-radio). */
.receipt-flag input[type="checkbox"] {
  width: auto;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
}

.receipt-flag--static {
  font-style: italic;
}

/* The inline per-receipt flag form on the show page's receipts list. */
.receipt-flag-form {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Landing target for the donor-invoice blocker links. 5rem clears the sticky
   64px .nav; an outline rather than padding, which would shift the content. */
section#receipts {
  scroll-margin-top: 5rem;
}

section#receipts:target {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Receipt row layout: file name block, then the flag (with its info tip)
   right beside it; the delete button alone on the far right. Overrides the
   dashboard-list-item space-between spread. */
.receipt-item {
  justify-content: flex-start;
  gap: 1.25rem;
}

.receipt-flag-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.receipt-item .receipt-delete {
  margin-left: auto;
}


/* Language switcher (EN/ES/FR) in the cashbook nav. Each option is a button_to,
   so it renders as its own <form>; lay them out as one small segmented control.
   The active locale is a static <span>, the others are submit buttons. */
.locale-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 5px;
}

.locale-switcher form {
  margin: 0;
  display: inline-flex;
}

.locale-switcher-option {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--gray-mid);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  font-family: inherit;
}

button.locale-switcher-option:hover {
  color: var(--teal);
  background: var(--teal-light);
}

.locale-switcher-option.is-active {
  background: var(--teal);
  color: var(--white);
  cursor: default;
}

/* Soft expert warnings: the form banner (amber, .form-lock-warning base from
   budget_lines.css) sits inside the expert form-field, and the show page marks
   a required-but-missing expert. Advisory — the hard stop is at donor billing. */
.expert-missing-warning,
.approval-missing-warning {
  margin: 0.5rem 0 0;
}

.detail-value .expert-missing {
  color: var(--warning-dark);
  font-size: 0.85rem;
  font-style: italic;
}