/* 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(--md-sys-color-surface-container-low);
  border: none;
  border-radius: var(--md-sys-shape-corner-medium);
  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: var(--md-sys-typescale-title-small);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

/* 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 primary link
   styling used by the invoice screen's InforEuro hint. */
.tor-line-item .form-hint a {
  color: var(--md-sys-color-primary);
  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(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); }
.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: transparent; }
.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: transparent; }
.btn-state-open      { background: var(--info-bg); color: var(--info); border-color: transparent; }
.btn-state-draft     { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); border-color: transparent; }
.btn-state-cancelled { background: var(--danger-bg); color: var(--danger-dark); border-color: transparent; }

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


/* 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(--md-sys-color-primary); }
.approval-check-row label { font: var(--md-sys-typescale-body-medium); letter-spacing: var(--md-sys-typescale-body-medium-tracking); margin: 0; }

/* Read-only project-context blocks (base.css owns .form-readonly). */
.form-readonly--block { display: block; font: var(--md-sys-typescale-body-medium); letter-spacing: var(--md-sys-typescale-body-medium-tracking); }
.form-readonly--prose { white-space: pre-line; }
.form-field .form-field-label { font: var(--md-sys-typescale-label-large); letter-spacing: var(--md-sys-typescale-label-large-tracking); color: var(--md-sys-color-on-surface); }

/* 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-radius: var(--md-sys-shape-corner-small);
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--warning-dark);
}
.field-warning::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--md-icon-warning) center / contain no-repeat;
  mask: var(--md-icon-warning) center / contain no-repeat;
}

/* Scope-of-work formatting toolbar — types the LightMarkup line conventions. */
.format-bar {
  display: flex; gap: 0.25rem;
  padding: 0.3rem;
  border: 1px solid var(--md-sys-color-outline);
  border-bottom: none;
  border-radius: var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0 0;
  background: var(--md-sys-color-surface-container-low);
}
.format-bar button {
  border: none; background: none; border-radius: var(--md-sys-shape-corner-full);
  padding: 0.2rem 0.65rem; font: var(--md-sys-typescale-label-medium);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}
.format-bar button:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
  color: var(--md-sys-color-on-surface);
}
.format-bar + textarea { border-radius: 0 0 var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small); }

.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(--md-sys-color-secondary-container);
  border-radius: var(--md-sys-shape-corner-medium);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.flex-sentence-label {
  font: var(--md-sys-typescale-label-medium);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--md-sys-color-on-secondary-container);
}
.flex-sentence p { font: var(--md-sys-typescale-body-medium); letter-spacing: var(--md-sys-typescale-body-medium-tracking); font-style: italic; color: var(--md-sys-color-on-secondary-container); margin: 0; }
.flex-sentence [data-approval-form-target="flexLines"] { font-weight: 500; font-style: normal; }

.required-mark { color: var(--md-sys-color-error); font-weight: 500; }

/* 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(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  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(--md-sys-color-outline-variant); }
.tor-content-row:last-child { border-bottom: none; }
.tor-content-label { flex: 0 0 200px; font: var(--md-sys-typescale-title-small); letter-spacing: var(--md-sys-typescale-title-small-tracking); color: var(--md-sys-color-on-surface-variant); padding-top: 0.1rem; }
.tor-content-value { font: var(--md-sys-typescale-body-medium); letter-spacing: var(--md-sys-typescale-body-medium-tracking); 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(--md-sys-color-outline-variant);
}
.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(--md-sys-color-on-surface-variant);
  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-dark);
}

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

/* "Upload signed document(s) — takes the approval live" is a sentence, wider
   than a phone: the one button label allowed to wrap, so it can't push the
   page sideways. */
@media (max-width: 600px) {
  .tor-lifecycle-actions .tor-participant-list-upload .btn { white-space: normal; }
}

/* 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 primary link treatment the approval form's hints use. */
.tor-file-line > span a {
  color: var(--md-sys-color-primary);
  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;
}