/* Travel-cost submitter surface (INT-147): invitation signup pages and the
   submitter landing page. Shares the project-show / dashboard primitives from
   base.css and projects.css; only signup-specific tweaks live here. */

.travel-signup {
  max-width: 34rem;
}

.travel-signup-intro {
  margin: 0.5rem 0 1.5rem;
  color: var(--gray-mid);
}

.travel-signup-form .form-field {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.travel-signup-form input[disabled] {
  background: var(--gray-light);
  color: var(--gray-mid);
}

/* --- Claim workspace (INT-148): section nav, cost lines, documents, review --- */

.travel-section-nav {
  display: flex;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}

.travel-section-step {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--gray-mid);
  text-decoration: none;
  font-weight: 600;
}

.travel-section-step:hover { color: var(--teal); }

/* Transition arrows between the steps. */
.travel-section-step + .travel-section-step::before {
  content: "→";
  color: var(--text-faint);
  font-weight: 400;
  margin-right: 1rem;
}

.travel-section-step.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* Reachable but not done yet: Review & Submit stays grey until the claim is
   actually submitted. */
.travel-section-step.is-pending { color: var(--gray-mid); }
.travel-section-step.is-pending .travel-section-num { background: var(--text-faint); }

.travel-section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  font-size: 0.8rem;
}

.travel-flow-hint {
  color: var(--gray-mid);
  margin-bottom: 1rem;
}

/* The advance lives in a native <details> so it ships collapsed with no JS. */
.travel-advance summary {
  cursor: pointer;
  list-style: revert;
}

/* The advance disclosure's label is an inline <h3> — correct rank there (its
   sibling section headings are h3) and it inherits the section-label look from
   the shared .form-section h3 rule. */
.travel-advance summary h3 {
  display: inline;
}

/* Forces a field to start a fresh grid row (the trip form's travel-start
   field, so start + end sit together instead of start closing row one). */
.form-field--new-row {
  grid-column: 1;
}

/* Nudge shown while the travel dates differ from the saved values — the new
   total and cost-line re-check only happen on save. */
.travel-dates-dirty {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  background: var(--warning-bg);
  border: 1px solid var(--gold-bright);
  color: var(--gold-dark);
  font-size: 0.85rem;
}

/* The trip save button while the dates are dirty (travel_duration_controller
   toggles it with the reminder): matching amber ring so the required action
   is visible even when the reminder has scrolled away. */
.btn-needs-save {
  box-shadow: 0 0 0 3px var(--gold-bright);
}

/* Meal deductions collapse like the travel advance — rarely used, so out of the
   way until opened. Grey summary (the ::marker arrow inherits it) around a teal
   section-style label, mirroring the travel-advance disclosure. */
.travel-meal-deduction > summary {
  cursor: pointer;
  color: var(--gray-dark);
  margin-bottom: 0.5rem;
}

/* A span, not a heading (the line form's title is an <h4>, so a heading here
   would invert the outline). Keep these declarations in sync with
   .form-section h3 (invoices.css) — same section-label recipe, 0.1em = 1.2px. */
.travel-meal-deduction-label {
  color: var(--teal);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

/* Shared "one or the other" guidance sits under the summary — it governs both
   the percent and amount fields, so it introduces the pair rather than hanging
   off one of them. */
.travel-meal-deduction-hint {
  margin-bottom: 0.75rem;
}

/* Live both-fields nudge — same amber as the other inline field warnings. */
.travel-meal-both-warning {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--warning-dark);
}

/* Costs step: one table + add button per section (the legacy sheet's three
   blocks). Each section is a titled block with its own editor frame. */
.travel-cost-group {
  margin-bottom: 1.75rem;
}

.travel-cost-group > h4 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: var(--gray-dark);
}

.travel-cost-group .travel-group-empty {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
}

/* Excel-style group bands in the review summary table (the legacy sheet's
   1. tickets / 2. accommodation & per diem / 3. other sections). */
.travel-line-group-row th {
  background: var(--gray-light);
  color: var(--gray-dark);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.35rem 1rem;
}

.travel-lines-table .travel-line-detail {
  display: block;
  color: var(--gray-mid);
}

.travel-docs-ok { color: var(--success); }
.travel-docs-missing { color: var(--warning-dark); }

.travel-list-actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  white-space: nowrap;
}

/* Everything "Save trip details" saves is one visibly grouped scope: the
   white trip/bank/advance cards sit on a faintly tinted, bordered panel that
   ends at the save button. */
#trip form {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-muted);
  padding: 1.25rem 1.25rem 1rem;
  margin-bottom: 1.5rem;
}

/* Save button (and its hint) sit at the panel's right edge. */
#trip .form-actions {
  justify-content: flex-end;
}

.travel-save-next-hint {
  display: block;
  margin-top: 0.4rem;
  text-align: right;
}

/* Air around the empty-state hint and the add button inside the costs card. */
.travel-costs-section > p {
  margin: 1rem 0;
}

/* Guidance callout at the top of the costs card — teal, not warning: guidance,
   not a problem. */
.travel-receipt-guidance {
  padding: 0.75rem 1rem;
  background: var(--teal-light);
  border-left: 3px solid var(--teal);
  border-radius: 6px;
  color: var(--teal-dark);
  font-size: 0.9rem;
}

.travel-receipt-guidance strong { display: block; margin-bottom: 0.15rem; }

.travel-line-form {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  margin-top: 1rem;
  /* The .form-grid auto-fills the card's full width with ghost columns —
     keep the pop-open editor compact instead of sprawling. */
  max-width: 46rem;
}

.travel-line-form h4 {
  margin-bottom: 0.75rem;
}

/* The shape/rate field groups are fieldsets for semantics only — strip the
   browser's default groove border and inset padding (spacing comes from the
   vertical-rhythm rule below, not the fieldset). */
.travel-line-form fieldset.form-grid {
  border: none;
  padding: 0;
}

/* Vertical rhythm: one consistent gap before each field group, so a label
   binds tightly to its OWN input (.form-field's own 0.3rem gap) and each row
   reads as separated. Adjacent margins collapse, so the subtitle's bottom
   margin and the first group's top margin merge into a single gap. */
.travel-line-form .form-field { gap: 0.3rem; }

.travel-line-form > .form-field,
.travel-line-form > fieldset,
.travel-line-form > .travel-manual-rate,
.travel-line-form > .travel-proof-section,
.travel-line-form > .travel-proof-rule {
  margin-top: 1.35rem;
}

/* ── Label hierarchy: three tiers ──────────────────────────────
   1) Section heading (.travel-proof-section legend) stays bold + primary.
   2) Field labels AND document sub-labels (.form-label) share one tier:
      regular weight, secondary colour, ~13px — so the bold section heading
      clearly owns the upload labels beneath it. */
.travel-line-form .form-field label,
.travel-line-form .form-label {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--gray-mid);
}

.travel-line-subtitle {
  color: var(--gray-mid);
  font-size: 0.85rem;
  margin: -0.5rem 0 1rem;
}

/* Kind select with its leading category heroicon. */
.travel-kind-select {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.travel-kind-icon {
  flex: none;
  display: inline-flex;
  color: var(--gray-mid);
}

.travel-kind-icon .icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Kind icon + label in the costs and review tables. */
.travel-kind-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.travel-kind-cell .icon {
  width: 1rem;
  height: 1rem;
  color: var(--gray-mid);
  flex: none;
}

/* Amount + currency joined into one control. */
.travel-amount-currency {
  display: flex;
}

.travel-amount-currency input {
  flex: 1;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

.travel-amount-currency .travel-currency-mount select {
  width: auto;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Live EUR-conversion line under the amount. */
.travel-rate-preview {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  background: var(--requested-bg);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: var(--requested);
}

.travel-quiet-link {
  font-size: 0.8rem;
  color: var(--gray-mid);
  text-decoration: underline;
  white-space: nowrap;
}

.travel-manual-rate {
  margin-top: 0.5rem;
}

/* ── Guided proof slots ─────────────────────────────────────── */

.travel-proof-section {
  border: none;
  padding: 0;
  /* Top gap owned by the vertical-rhythm rule. */
  margin: 0;
}

/* Tier-1 label: bold, primary text colour — owns the sub-labels beneath it. */
.travel-proof-section legend {
  font-weight: 600;
  color: var(--gray-dark);
  padding: 0;
}

/* Proof section nested inside a money fieldset (per-diem timesheet) — the
   vertical-rhythm rule only reaches direct children of the form. */
.travel-proof-section--inline {
  margin-top: 0.75rem;
}

.travel-proof-counter {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--gray-mid);
  margin-left: 0.5rem;
}

.travel-proof-rule {
  color: var(--gray-mid);
  font-size: 0.85rem;
  margin: 0.25rem 0 0.5rem;
}

.travel-doc-slot {
  margin: 0;
}

/* A generous gap between document-type slots (boarding pass → proof of
   purchase); the swap link stays inside the boarding-pass group, tight under
   its dropzone. */
.travel-proof-slot + .travel-proof-slot {
  margin-top: 1.75rem;
}

.travel-swap-link {
  display: inline-block;
  margin-top: 0.4rem;
}

.travel-doc-slot-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

/* The document-type header — a step below the section heading, but clearly
   bolder/bigger than the plain field labels. */
.travel-doc-slot-head .form-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray-dark);
}

.travel-required-badge,
.travel-optional-badge,
.travel-added-badge {
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
}

.travel-required-badge {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Muted cue for welcome-but-not-enforced slots (proof of purchase). */
.travel-optional-badge {
  background: var(--gray-light);
  color: var(--gray-mid);
}

/* Green "Added" cue once the slot holds a file (replaces "Required"). */
.travel-added-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: var(--success-bg);
  color: var(--success-dark);
}

.travel-added-badge .icon {
  width: 0.85rem;
  height: 0.85rem;
  stroke-width: 2.5;
}

.travel-drop-zone {
  position: relative;
  display: block;
  border: 1.5px dashed var(--border-input);
  border-radius: 8px;
  padding: 0.55rem 1rem;
  cursor: pointer;
  text-align: center;
  color: var(--gray-mid);
  font-size: 0.85rem;
}

.travel-drop-zone.is-dragover {
  border-color: var(--teal);
  background: var(--success-bg);
}

.travel-drop-empty small {
  display: block;
}

/* Attached items — one green row per file or reused pick, stacked above the
   dropzone while the slot still has room (the zone hides at the cap). */
.travel-slot-items {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

/* Over-cap notice — shown in place of the native bubble, which can't display
   once the dropzone (the input's ancestor) hides at the cap. */
.travel-slot-cap-note {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  color: var(--danger);
}

.travel-drop-filled {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  border: 1.5px solid var(--success);
  border-radius: 8px;
  background: var(--success-bg);
  padding: 0.55rem 0.75rem 0.55rem 1rem;
  color: var(--success-dark);
  font-size: 0.85rem;
}

.travel-drop-filled-name { min-width: 0; overflow-wrap: anywhere; }

.travel-slot-remove {
  flex: none;
}

/* The real file input stays for the picker dialog and form submit; the
   styled zone is its label. */
.travel-slot-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ── Reuse-an-uploaded-document list (per proof section) ─────── */
/* Set off from the dropzone above as a distinct "or reuse" area on a faintly
   tinted, rounded panel. */
.travel-reuse {
  margin-top: 0.85rem;
  padding: 0.75rem;
  background: var(--surface-muted);
  border: 1px solid var(--divider);
  border-radius: 8px;
}

/* Centered "or" divider with flanking rules — signals the reuse list is an
   alternative to the dropzone, not an addition to it. */
.travel-reuse-heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gray-mid);
  margin: 0 0 0.6rem;
}

.travel-reuse-heading::before,
.travel-reuse-heading::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--border);
}

.travel-reuse-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  color: var(--teal);
  text-decoration: underline;
}

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

/* Each row is an "Attach" action — picking it fills the slot and the whole
   list hides, so the raw checkbox is visually removed and the row reads as a
   single affordance. */
.travel-reuse-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

.travel-reuse-row:hover { border-color: var(--teal); background: var(--success-bg); }

.travel-reuse-check {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  clip: rect(0 0 0 0);
}

.travel-reuse-file {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.travel-reuse-name { font-size: 0.9rem; color: var(--gray-dark); overflow-wrap: anywhere; }
.travel-reuse-meta { font-size: 0.75rem; color: var(--gray-mid); }

.travel-reuse-attach {
  flex: none;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--teal);
}

.travel-form-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.25rem 0 0.5rem;
}

/* One radio per row, circle aligned to the first text line. */
.travel-radio {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0.3rem 0 0;
  font-size: 0.9rem;
}

.travel-document-kind {
  color: var(--gray-mid);
  font-size: 0.85em;
}

.travel-documents-pool ul {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.travel-documents-pool li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Trash sits at the row's right edge. delete_button wraps its button in a
   form.button_to, and that form is the li's flex child, so the margin lands
   there — not on the .travel-document-remove button inside it. */
.travel-documents-pool li > form.button_to { margin-left: auto; }

.travel-document-unlinked { background: var(--warning-bg); border-radius: 4px; padding: 0.2rem 0.4rem; }
.travel-document-warning { color: var(--warning-dark); font-size: 0.85em; }
.travel-document-links { color: var(--gray-mid); font-size: 0.85em; }

.travel-review-checklist {
  background: var(--warning-bg);
  border: 1px solid var(--gold-bright);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
}

.travel-review-checklist ul { margin: 0.4rem 0 0 1.1rem; }

/* The accommodation-basis radios group under a fieldset/legend for screen
   readers; visually it stays a plain form field. */
.travel-basis-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  /* Full grid row — squeezed into one column, the radio labels wrap badly. */
  grid-column: 1 / -1;
}

/* The shared width:100% input rule stretches radio circles — undo it. */
.travel-radio input[type="radio"] {
  width: auto;
  flex: none;
}

/* The legend plays the form label (a real legend for screen readers). */
.travel-basis-fieldset legend {
  padding: 0;
  margin-bottom: 0.25rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--gray-dark);
}

.travel-line-total {
  display: block;
  font-weight: 600;
  margin: 0.25rem 0 1rem;
}

/* Live total preview gone negative: the meal deduction exceeds rate × days. */
.travel-line-total--negative { color: var(--danger); }

/* Post-submit edits: the claim changed after the declaration was confirmed. */
.travel-reconfirm-notice {
  background: var(--warning-bg);
  border: 1px solid var(--gold-bright);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  color: var(--gold-dark);
  margin: 1rem 0;
}

/* The declaration is the page's only required checkbox, but the browser's
   "please check this box" bubble doesn't say which box it means — so the
   declaration gets its own bordered panel. --invalid is toggled by
   travel_declaration_controller.js when a submit attempt leaves it unchecked. */
.travel-declaration {
  margin: 1rem 0 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

.travel-declaration--invalid {
  border-color: var(--danger-border);
  background: var(--danger-bg);
}

.travel-declaration label {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}

.travel-summary-trip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.travel-summary-trip dt {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--gray-mid);
}

/* Values on the app's 0.9rem table/input scale — dd otherwise renders at the
   16px body size and dwarfs everything around it. */
.travel-summary-trip dd {
  font-size: 0.9rem;
  margin: 0.1rem 0 0;
}

/* The shared .data-table rules pad thead/tbody only; the totals live in
   tfoot and rendered unpadded at body size. */
.travel-summary-lines tfoot td {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  color: var(--gray-dark);
}

.travel-summary-net td { border-top: 2px solid var(--border); }

.travel-status-draft { background: var(--gray-light); color: var(--gray-dark); }
.travel-status-submitted { background: var(--requested-bg); color: var(--requested); }
.travel-status-changed { background: var(--warning-bg); color: var(--warning-dark); }

/* --- Review lifecycle (INT-151) --- */

/* Claim statuses: review = purple (active PM work), changes requested =
   amber (submitter's move), approved/rejected = settled green/red. */
.travel-status-in_review { background: var(--invoiced-bg); color: var(--invoiced); }
.travel-status-changes_requested { background: var(--warning-bg); color: var(--warning-dark); }
.travel-status-approved { background: var(--success-bg); color: var(--success); }
.travel-status-rejected { background: var(--danger-bg); color: var(--danger); }

/* Per-line verdict badges (same palette as their claim-level counterparts). */
.travel-line-status-pending { background: var(--gray-light); color: var(--gray-dark); }
.travel-line-status-approved { background: var(--success-bg); color: var(--success); }
.travel-line-status-rejected { background: var(--danger-bg); color: var(--danger); }
.travel-line-status-needs_correction { background: var(--warning-bg); color: var(--warning-dark); }

/* The reviewer's note shown to the submitter under a returned line. */
.travel-review-note {
  display: block;
  margin-top: 0.25rem;
  color: var(--warning-dark);
  font-size: 0.85rem;
}

/* Matches .donor-status-history / .statement-status-history. */
.travel-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);
}

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

/* Waiting age under the submitted timestamp in the reviewer's register. */
.travel-waiting-age {
  display: block;
  color: var(--gray-mid);
  font-size: 0.8rem;
}

/* Changes-requested banner on the submitter's workspace. Same cream warning
   palette as the app-wide warning box (.lerf-warning) so warnings look alike
   everywhere. */
.travel-changes-banner {
  background: var(--warning-bg);
  border: 1px solid var(--gold-bright);
  border-left: 4px solid var(--gold);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}
.travel-changes-banner strong { display: block; margin-bottom: 0.15rem; }

/* --- PM review page --- */

/* Documents inside the claim-details card: same sub-heading tier as the
   cost-line group headings, separated from the trip facts above. */
.travel-review-details .travel-documents-pool {
  margin-top: 1.25rem;
}

.travel-documents-pool h4 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  color: var(--gray-dark);
}

/* Claim money facts pinned to the bottom of the details card, as an inline
   row of stat pairs (the live approved-so-far figure lives in the footer,
   which re-renders with every verdict). */
.travel-review-claim-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.travel-review-claim-totals dt {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--gray-mid);
}

.travel-review-claim-totals dd {
  margin: 0.1rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.travel-review-documents {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
}
/* Flex: the detach ✕ is a form.button_to, which would otherwise break the
   filename onto its own line. Must WRAP — unwrapped, the row's min-content
   sets the Documents column width and pushes the table past its container. */
.travel-review-documents li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin: 0.1rem 0;
}

/* The evidence gap under a line's Documents cell. */
.travel-review-evidence-gap { margin: 0.3rem 0 0; }

/* The pool's "document limit reached" note, in place of the upload form. */
.travel-review-doc-locked {
  margin: 0.3rem 0 0;
  color: var(--gray-mid);
  font-size: 0.8rem;
}

/* In the documents pool, not a table cell, so it lays out as an ordinary row
   with no width cap. */
.travel-review-doc-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  font-size: 0.85rem;
}

/* Capped, unlike the pool's upload above, because it sits in a table cell: the
   review table's wrap doesn't scroll horizontally (see the
   .travel-review-lines override below), so anything wider than the Documents
   column pushes the whole table out of its card. min-width: 0 is what clears
   .filter-select's 160px floor — max-width alone does not. */
.travel-review-doc-attach {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.4rem;
  max-width: 10rem;
  font-size: 0.8rem;
}

.travel-review-doc-attach > * { min-width: 0; }
.travel-review-doc-attach .filter-select { width: 100%; min-width: 0; font-size: 0.8rem; }

.travel-review-doc-upload .filter-select { font-size: 0.85rem; }

.travel-document-activity-action { font-weight: 600; }
.travel-document-activity-line { color: var(--gray-mid); }

/* Review tables grow tall (every line carries a verdict row), so the global
   .data-table-wrap viewport cap (tables.css) gave them an inner scrollbar —
   and even uncapped, the verdict rows' info-tip bubbles (hidden via
   visibility, so they still occupy overflow space below the last row) minted
   a phantom one. The review page doesn't need per-table scrolling at all:
   the page scrolls, not the table (INT review feedback, 16 Jul 2026). */
.travel-review-lines .data-table-wrap {
  max-height: none;
  overflow: visible;
}

/* With the wrap no longer scrolling, tables.css's `.data-table-wrap .data-table
   thead th { top: 0 }` would pin these headers behind the sticky nav; restore
   the page-scrolling default (tables.css sticky headers). */
.travel-review-lines .data-table-wrap .data-table thead th {
  top: var(--nav-height);
}

/* The verdict row hangs off its line's info row: no top border, light wash. */
.travel-review-verdict-row td {
  border-top: none;
  background: var(--surface-muted);
  padding: 0.5rem 1rem 0.75rem;
}

/* One cost line + its verdict controls = one tbody. The global .data-table
   rules drew a border INSIDE each item (info row's border-bottom) but none
   between items (last-row border stripped per tbody), so a grey verdict block
   sat flush against the NEXT line's row and read as belonging to it (INT
   review feedback, 16 Jul 2026). Flip that: seamless within an item, a
   visible boundary between items — and no row hover, which painted the next
   line the same grey as the verdict wash (these rows aren't links). */
.travel-review-table tbody tr:first-child td {
  border-bottom: none;
}
.travel-review-table tbody + tbody tr:first-child td {
  border-top: 1px solid var(--border);
}
.travel-review-table tbody tr:hover {
  background: transparent;
}

.travel-verdict-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.travel-verdict-choice {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.25rem;
  font-size: 0.9rem;
}
.travel-verdict-choice label { display: inline-flex; align-items: center; gap: 0.35rem; }

.travel-verdict-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--gray-dark);
}
.travel-verdict-fields label { display: flex; flex-direction: column; gap: 0.2rem; }
/* The verdict toggles fields via the hidden attribute; the display:flex above
   would silently beat the UA's [hidden] rule without this. */
.travel-verdict-fields[hidden],
.travel-verdict-fields label[hidden] { display: none; }
.travel-verdict-fields select { max-width: 16rem; }
/* The allocated row's locked budget-line select renders a single option and
   would shrink-wrap — hold it at the active selects' width so the row
   layout matches the other verdict rows. */
.travel-verdict-fields select:disabled { width: 16rem; }
/* Select and input intrinsic heights differ by ~1px, which shows as a misaligned
   top edge in this bottom-aligned row. Must stay a min-height floor above both:
   a fixed height clips when a browser minimum font size overrides the rem. */
.travel-verdict-fields select,
.travel-verdict-fields input[type="number"] { min-height: 2.25rem; }
/* Spinner buttons have no counterpart on the selects, so they make the quantity
   box read as a foreign control in the row (same call as .opening-input). */
.travel-verdict-fields input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.travel-verdict-fields input[type="number"]::-webkit-outer-spin-button,
.travel-verdict-fields input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Full-width so the note always wraps onto its own row below the coding
   selects (the container is flex-wrap). The save button follows on the row
   after it. */
.travel-verdict-note { flex-basis: 100%; }

/* Same input chrome as .budget-line-inline — a bare <textarea> outside
   .form-field otherwise falls back to the browser's monospace default. */
.travel-verdict-note textarea {
  width: 100%;
  resize: vertical;
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border-input);
  border-radius: 4px;
}

.travel-verdict-note textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 153, 153, 0.12);
}

.travel-verdict-readonly {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--gray-dark);
}

/* Flexible Remuneration state under the verdict form (INT-152): teal badge
   naming the pricing line + the Unallocate control. */
.travel-verdict-allocation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.travel-allocation-badge {
  background: rgba(0, 153, 153, 0.12);
  color: var(--teal);
  /* Override .status-badge's capitalize — the badge quotes the pricing
     line's label, which must keep its own casing. */
  text-transform: none;
}
.travel-review-attribution { color: var(--text-faint); }

.travel-review-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.travel-review-progress { margin: 0; color: var(--gray-dark); }

/* The footer is a wrapping flex row; the blockers take a full line of their
   own above the progress line and the completion button. */
.travel-review-footer .travel-review-checklist {
  flex-basis: 100%;
  margin: 0 0 0.25rem;
}