/* 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(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 1.25rem;
}

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

.receipt-card-label {
  font: var(--md-sys-typescale-title-small);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

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

/* A hint that introduces a whole form (a page-level paragraph, not a field's
   supporting text) needs space before the form's card. */
p.form-hint + :is(form, .form-section) { margin-top: 1rem; }

/* 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(--info-bg);
  border-radius: var(--md-sys-shape-corner-medium);
  font: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  color: var(--info);
}

.form-reminder::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background-color: var(--info);
  -webkit-mask: var(--md-icon-info) center / contain no-repeat;
  mask: var(--md-icon-info) center / contain no-repeat;
}

.form-subhead {
  font: var(--md-sys-typescale-title-small);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
  margin: 1.5rem 0 0.75rem;
}

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

.team-table td select {
  padding: 0.4rem 2.25rem 0.4rem 0.6rem;
  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);
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface-container-lowest);
}

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

.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

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

.form-checkbox .inline-check {
  font: var(--md-sys-typescale-label-large);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  color: var(--md-sys-color-on-surface);
}

.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(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-lowest);
  font: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  transition:
    border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.checkbox-row:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-surface-container-lowest), var(--md-sys-color-on-surface) 8%);
}
.checkbox-row input[type="checkbox"] { margin: 0; }
.checkbox-meta { margin-left: auto; font: var(--md-sys-typescale-body-small); letter-spacing: var(--md-sys-typescale-body-small-tracking); color: var(--md-sys-color-on-surface-variant); }

.form-note { font: var(--md-sys-typescale-body-medium); letter-spacing: var(--md-sys-typescale-body-medium-tracking); color: var(--md-sys-color-on-surface-variant); 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(--md-sys-color-primary);
}

/* Dense outlined error button. */
.btn-remove {
  flex-shrink: 0;
  min-height: 32px;
  padding: 0 0.75rem;
  font: var(--md-sys-typescale-label-large);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  border-radius: var(--md-sys-shape-corner-full);
  border: 1px solid var(--md-sys-color-outline);
  background: transparent;
  color: var(--md-sys-color-error);
  cursor: pointer;
  transition:
    background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.btn-remove:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-error) 8%, transparent);
}

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

/* The picker (a select, or an email field on the team page's invite form) is
   an M3 outlined text field filling the row beside its button. */
.assign-form :is(select, input[type="email"], input[type="text"]) {
  flex: 1;
  min-height: 40px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  font: var(--md-sys-typescale-body-large);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface-container-lowest);
  outline: none;
}

.assign-form :is(input[type="email"], input[type="text"]):focus {
  border-color: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}

.assign-form select {
  flex: 1;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  font: var(--md-sys-typescale-body-large);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-lowest);
  transition:
    border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  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(--md-sys-color-primary);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}

/* Filled button. */
.assign-form input[type="submit"] {
  flex-shrink: 0;
  min-height: 40px;
  padding: 0 1.5rem;
  font: var(--md-sys-typescale-label-large);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  border-radius: var(--md-sys-shape-corner-full);
  border: none;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.assign-form input[type="submit"]:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) 8%);
  box-shadow: var(--md-sys-elevation-level1);
}

/* Cashbook entry comments */
.comments-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
.comment {
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 0.75rem 1rem;
  background: var(--md-sys-color-surface-container-lowest);
}
.comment-header {
  display: flex; gap: 0.75rem; align-items: baseline;
  font: var(--md-sys-typescale-body-small); letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
}
.comment-author { font: var(--md-sys-typescale-title-small); letter-spacing: var(--md-sys-typescale-title-small-tracking); color: var(--md-sys-color-on-surface); }
/* 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(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); padding: 0 0.15rem; border-radius: var(--md-sys-shape-corner-extra-small); }
.comment-replies { margin-top: 0.5rem; padding-left: 1rem; border-left: 1px solid var(--md-sys-color-outline-variant); }
/* 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: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

.cashbook-status-history strong { font-weight: 500; color: var(--md-sys-color-on-surface); }

/* Status-change audit entries: compact one-liners, visually quieter than a
   user comment so the conversation stays the focus. A filled (borderless)
   container rather than the outlined comment card. */
.comment-status-change {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  background: var(--md-sys-color-surface-container-low);
  border-color: transparent;
  font: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
  padding: 0.5rem 1rem;
}
.comment-status-change strong { font-weight: 500; color: var(--md-sys-color-on-surface); }
.comment-status-change em { font-style: normal; font-weight: 500; }
.comment-status-change .comment-timestamp { white-space: nowrap; }
.comment-reply-form summary { cursor: pointer; font: var(--md-sys-typescale-label-large); letter-spacing: var(--md-sys-typescale-label-large-tracking); color: var(--md-sys-color-primary); }
.comment-form { position: relative; margin-top: 0.5rem; }
.comment-form textarea { width: 100%; padding: 0.5rem; border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-extra-small); font: var(--md-sys-typescale-body-large); letter-spacing: var(--md-sys-typescale-body-large-tracking); color: var(--md-sys-color-on-surface); background: var(--md-sys-color-surface-container-lowest); }
.comment-form-actions { margin-top: 0.5rem; }
/* Floating menu surface. */
.mention-suggestions {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--md-sys-color-surface-container); border: none; border-radius: var(--md-sys-shape-corner-extra-small);
  list-style: none; margin: 0; padding: 0.5rem 0; z-index: 10;
  box-shadow: var(--md-sys-elevation-level2);
}
.mention-suggestion { padding: 0.35rem 0.75rem; cursor: pointer; font: var(--md-sys-typescale-body-large); letter-spacing: var(--md-sys-typescale-body-large-tracking); color: var(--md-sys-color-on-surface); }
.mention-suggestion.is-active, .mention-suggestion:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }

/* Collapsible travel-context block on the cashbook form. The summary reads
   like a form-section heading; a chevron rotates on open. */
.travel-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
  font: var(--md-sys-typescale-title-small);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  color: var(--md-sys-color-primary);
}
.travel-disclosure > summary::-webkit-details-marker { display: none; }
.travel-disclosure > summary::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--md-icon-chevron-right) center / contain no-repeat;
  mask: var(--md-icon-chevron-right) center / contain no-repeat;
  transition: transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.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; }

/* M3 menu: container surface, no border, level-2 shadow. */
.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(--md-sys-color-surface-container);
  border: none;
  border-radius: var(--md-sys-shape-corner-extra-small);
  box-shadow: var(--md-sys-elevation-level2);
}

.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: var(--md-sys-typescale-label-large);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  color: var(--md-sys-color-on-surface);
  padding: 0.45rem 0.6rem;
  border-radius: var(--md-sys-shape-corner-extra-small);
  white-space: nowrap;
}

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

.status-menu-item:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }

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

/* 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. Colours are the badge palette in badges.css. */
.data-table tbody tr.row-status-project_lead_verification_requested td:first-child {
  box-shadow: inset 4px 0 0 0 var(--requested);
}
.data-table tbody tr.row-status-accounting_verification_requested td:first-child {
  box-shadow: inset 4px 0 0 0 var(--review);
}
.data-table tbody tr.row-status-verified td:first-child {
  box-shadow: inset 4px 0 0 0 var(--approved);
}
.data-table tbody tr.row-status-donor_invoiced td:first-child {
  box-shadow: inset 4px 0 0 0 var(--md-sys-color-outline);
}

/* ── 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 swaps the outline glyph for the filled one, same pattern as
   the sidebar favourite star (.sidebar-project-fav.is-favorited .icon). */
.entry-flag-btn.is-flagged { color: var(--md-sys-color-error); }
.entry-flag-btn.is-flagged .icon .icon-outline { display: none; }
.entry-flag-btn.is-flagged .icon .icon-filled { display: inline; }

/* Small flag glyph marking flagged rows on the index. */
.cashbook-flag-indicator {
  color: var(--md-sys-color-error);
  vertical-align: -0.15em;
}
.cashbook-flag-indicator .icon {
  width: 0.95rem;
  height: 0.95rem;
}
.cashbook-flag-indicator .icon .icon-outline { display: none; }
.cashbook-flag-indicator .icon .icon-filled { display: inline; }

/* Right side of the entry header: current status badge + "Create new". */
.entry-header-actions {
  display: flex;
  align-items: center;
  /* Status, icon actions and the primary button wrap on a phone rather than
     widening the page. */
  flex-wrap: wrap;
  justify-content: flex-end;
  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(--md-sys-color-outline-variant);
}

.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: var(--md-sys-shape-corner-medium);
  background: var(--warning-bg);
  color: var(--warning-dark);
  font: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  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(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}

.split-attachments-label {
  margin: 0 0 0.5rem;
  font: var(--md-sys-typescale-title-small);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  color: var(--md-sys-color-on-surface);
}

.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: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  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: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--md-sys-color-on-surface);
  white-space: nowrap;
  cursor: pointer;
}
.split-attachment-target input { accent-color: var(--md-sys-color-primary); }


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

.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: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
  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(--md-sys-color-primary);
  outline-offset: 2px;
  border-radius: var(--md-sys-shape-corner-large);
}

/* 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(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
}

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

.locale-switcher-option {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-label-medium);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  cursor: pointer;
}

button.locale-switcher-option:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}

/* Selected segment: secondary container, like an M3 segmented button. */
.locale-switcher-option.is-active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  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: italic var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
}

/* Created / last-updated line at the foot of an entry. */
.entry-timestamps {
  margin-top: 1.5rem;
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
}