/* ToR builder — inline line items.

   Unlike the invoice line-item rows (compact horizontal rows tuned for 40+ items),
   a ToR has a handful of richly-described items, so each is its own nested card
   using the shared .form-grid / .form-field vocabulary from base.css — matching
   the rest of the app's forms. .btn-remove-line-item is the shared base primitive. */
.tor-line-item {
  background: var(--gray-light);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

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

.tor-line-item-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-mid);
}

/* The shared Remove button carries a margin-top to align with inputs in the
   invoice flex-row; in the card header it sits inline, so reset it. */
.tor-line-item-header .btn-remove-line-item {
  margin-top: 0;
}

/* InforEuro conversion link under the cost-rate field — match the teal link
   styling used by the invoice screen's InforEuro hint. */
.tor-line-item .form-hint a {
  color: var(--teal);
  text-decoration: none;
  font-weight: 500;
}

.tor-line-item .form-hint a:hover { text-decoration: underline; }

/* Lifecycle badges beyond the shared open/closed (badges.css). */
.status-draft,
.status-cancelled                         { background: var(--gray-light); color: var(--gray-mid); }
.status-awaiting_first_approval,
.status-awaiting_second_approval,
.status-awaiting_signatures,
.status-awaiting_final_check,
.status-legacy_in_review_team_lead,
.status-legacy_in_review_project_manager  { background: var(--review-bg); color: var(--review); }

/* Transition buttons, tinted with the state they move the approval TO. */
.btn-state-awaiting_first_approval,
.btn-state-awaiting_second_approval,
.btn-state-awaiting_signatures,
.btn-state-awaiting_final_check { background: var(--review-bg); color: var(--review); border-color: var(--review-border); }
.btn-state-awaiting_first_approval:hover,
.btn-state-awaiting_second_approval:hover,
.btn-state-awaiting_signatures:hover,
.btn-state-awaiting_final_check:hover { background: var(--review-bg-hover); }
.btn-state-closed    { background: var(--approved-bg); color: var(--approved); border-color: var(--approved-bg); }
.btn-state-open      { background: var(--info-bg); color: var(--info); border-color: var(--info-bg); }
.btn-state-draft     { background: var(--gray-light); color: var(--gray-mid); border-color: var(--border-input); }
.btn-state-cancelled { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }

.tor-waiting-on { margin: -0.25rem 0 0.75rem; }

.tor-documents { list-style: none; margin: 0.5rem 0; padding: 0; }
.tor-documents li + li { margin-top: 0.35rem; }

/* Binds a help marker to its button: tighter than the .header-actions gap. */
.approval-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* ── Guided creation form (wireframe of 28.08.2026) ─────────────────── */

.approval-form-actions { justify-content: space-between; }

/* Checkbox row — own class: invoices.css uses .check-row for its checker table. */
.approval-check-row { display: flex; align-items: flex-start; gap: 0.5rem; }
.approval-check-row input[type="checkbox"] { width: auto; margin-top: 0.15rem; accent-color: var(--teal); }
.approval-check-row label { font-size: 0.85rem; font-weight: 500; margin: 0; }

/* Read-only project-context blocks (base.css owns .form-readonly). */
.form-readonly--block { display: block; line-height: 1.5; font-size: 0.85rem; }
.form-readonly--prose { white-space: pre-line; }
.form-field .form-field-label { font-size: 0.8rem; font-weight: 500; color: var(--gray-dark); }

/* Inline non-blocking warning, the budget-overflow warning tone. */
.field-warning {
  display: flex; gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  background: var(--warning-bg);
  border-left: 3px solid var(--warning);
  border-radius: 4px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--warning-dark);
}
.field-warning::before { content: "⚠"; flex: none; }

/* Scope-of-work formatting toolbar — types the LightMarkup line conventions. */
.format-bar {
  display: flex; gap: 0.25rem;
  padding: 0.3rem;
  border: 1px solid var(--border-input);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background: var(--surface-muted);
}
.format-bar button {
  border: 1px solid transparent; background: none; border-radius: 3px;
  padding: 0.2rem 0.55rem; font-size: 0.78rem; color: var(--gray-mid);
  cursor: pointer; font-family: inherit;
}
.format-bar button:hover { background: var(--teal-light); color: var(--teal); }
.format-bar + textarea { border-radius: 0 0 4px 4px; }

.approval-copy-scope { margin-left: 0.5rem; }

/* Preview of the flex sentence the generated document prints under the cost
   table (TorPdfService#flex_sentence). */
.flex-sentence {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: var(--teal-light);
  border-left: 3px solid var(--teal);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.flex-sentence-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-dark);
}
.flex-sentence p { font-size: 0.88rem; font-style: italic; color: var(--gray-dark); line-height: 1.5; margin: 0; }
.flex-sentence [data-approval-form-target="flexLines"] { font-weight: 600; font-style: normal; }

.required-mark { color: var(--danger); font-weight: 600; }

/* Month + year selects of the assignment window sit side by side. */
.month-pair { display: flex; gap: 0.4rem; }
.month-pair select { width: auto; flex: 1; }

/* Drafted narrative on the show page — the source of the generated document.
   pre-line keeps the typed line conventions readable without markup. */
.tor-content {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1rem 0 1.25rem;
}
.tor-content-row { display: flex; gap: 1rem; padding: 0.35rem 0; border-bottom: 1px solid var(--divider); }
.tor-content-row:last-child { border-bottom: none; }
.tor-content-label { flex: 0 0 200px; font-size: 0.78rem; font-weight: 600; color: var(--gray-mid); padding-top: 0.1rem; }
.tor-content-value { font-size: 0.85rem; white-space: pre-line; }

/* Page-foot action bar: backward moves left, forward moves right. */
.tor-lifecycle-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--divider);
}
.tor-lifecycle-actions__back,
.tor-lifecycle-actions__forward { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.tor-lifecycle-actions__forward { margin-left: auto; }
.tor-lifecycle-actions form { margin: 0; }
.tor-return-gate { display: inline-flex; }

/* The reviewer's return comment under its .status-history (badges.css) row. */
.tor-status-history-heading { margin-top: 2rem; }
.status-history .tor-return-comment {
  display: block;
  color: var(--gray-mid);
  font-style: italic;
  margin-left: 1rem;
}

/* Missing-evidence flags share the warning tokens (red stays for destructive),
   then the participant list's fallback upload form and per-row block + form. */
.status-badge.status-missing-participant-list,
.status-badge.status-missing-tor-document {
  background: var(--warning-bg);
  color: var(--warning);
}

.tor-participant-list-upload {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.25rem 0 1rem;
}

/* Attached-file line, shared by both ToR slots. A <div> because the parser
   ejects button_to's <form> from a <p>; 1em matches the old <p> spacing. */
.tor-file-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 1em 0;
}

/* The file name — the teal link treatment the approval form's hints use. */
.tor-file-line > span a {
  color: var(--teal);
  text-decoration: none;
  font-weight: 500;
}

.tor-file-line > span a:hover { text-decoration: underline; }

/* Same casing as the status badge (badges.css capitalizes), so a state
   reads identically in the header and in its history row. */
.status-history .tor-status-history-state { text-transform: capitalize; }

.tor-line-participant-list {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}

/* Row-level variant of the shared link picker: tight under the line's label. */
.vendor-expert-link-form.tor-line-expert-link {
  margin-top: 0.35rem;
  max-width: 28rem;
}

.tor-line-participant-upload {
  display: inline-flex;
  align-items: center;
}

/* ToR index — the Labels column lists each child line item's descriptor
   stacked under the ToR's identifier. Reset the default list chrome and keep
   the rows tight. */
.tor-line-item-labels {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tor-line-item-labels li + li {
  margin-top: 0.15rem;
}