/*
 * Vertragsseite: additions on top of the order-show layout it reuses
 * (hero, meta sidebar, ledger). Only what the Vertrag needs beyond the
 * Rechnung - version cards, history states, muted meta text.
 */

@layer components {
  .order-meta__muted {
    color: var(--color-text-muted);
  }

  .order-show__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    margin-block: 0 var(--space-sm);
    color: var(--color-text-secondary);
  }

  .contract-version-card {
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-elevated, transparent);
  }

  .contract-version-card + .contract-version-card {
    margin-block-start: var(--space-sm);
  }

  .contract-version-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-block-end: var(--space-xs);
  }

  .contract-version-card__facts {
    margin: 0;
    color: var(--color-text-secondary);
  }

  .contract-version-card__actions {
    display: flex;
    gap: var(--space-xs);
    margin-block-start: var(--space-sm);
  }

  .contract-version-hint {
    margin-block: var(--space-sm) 0;
    padding: var(--space-sm) var(--space-md);
    border-inline-start: 3px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-elevated, transparent);
    color: var(--color-text-secondary);
  }

  .contract-version-hint--warning {
    border-inline-start-color: var(--color-accent, #f4ff4d);
    color: var(--color-text);
  }

  .contract-history__row--cancelled td {
    color: var(--color-text-muted);
  }

  .contract-history__row--cancelled td:not(.contract-history__status) {
    text-decoration: line-through;
  }

  .contract-history__status {
    line-height: 1.5;
  }
}

/*
 * Überführungsformular: the chain of older Rechnungen as a checkbox list
 * with gap markers between non-adjacent Leistungszeiträume.
 */
@layer components {
  .admin-form__static {
    margin: 0;
    padding-block: var(--space-xs);
  }

  .contract-transfer__chain {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .contract-transfer__link + .contract-transfer__link {
    margin-block-start: var(--space-xs);
  }

  .contract-transfer__gap {
    margin-block: var(--space-xs);
    padding-inline-start: var(--space-md);
    border-inline-start: 3px dashed var(--color-accent, #f4ff4d);
    color: var(--color-text-muted);
    font-size: 0.9em;
  }
}

/*
 * Diff-Bestätigung der Folgerechnung: predecessor and draft side by side,
 * changed rows highlighted, removed positions struck through.
 */
@layer components {
  .invoice-diff__summary {
    margin-block: 0 var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-inline-start: 3px solid var(--color-accent, #f4ff4d);
    border-radius: var(--radius-md);
    background: var(--color-surface-elevated, transparent);
  }

  .invoice-diff th[scope="row"] {
    text-align: start;
    font-weight: 500;
  }

  .invoice-diff__section th {
    padding-block-start: var(--space-md);
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.04em;
  }

  .invoice-diff__row--changed td:last-child,
  .invoice-diff__row--added td:last-child {
    font-weight: 600;
    color: var(--color-accent, #f4ff4d);
  }

  .invoice-diff__old {
    text-decoration: line-through;
    color: var(--color-text-muted);
  }

  .invoice-diff__placeholder {
    color: var(--color-text-muted);
    font-style: italic;
  }
}