<!-- State Transition Block - Inline version for DetailBox -->
<div class="st-DetailCard-field" style="padding: 16px 0; border-bottom: 1px solid #e2e8f0;">
  <p class="st-DetailCard-label" style="Margin:0 0 12px 0;font-size:11px;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;line-height:16px;color:#64748b;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;">STATE CHANGE</p>
  <table cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
    <tbody>
      <tr>
        {{#if previousState}}
        <!-- Previous State Badge -->
        <td align="center" valign="middle" style="padding: 0;">
          <span style="display: inline-block; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; background-color: transparent; color: {{previousStateColor}}; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif;">
            {{previousState}}
          </span>
        </td>
        <!-- Arrow -->
        <td align="center" valign="middle" style="padding: 0 12px;">
          <span style="font-size: 20px; color: #94a3b8; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif;">→</span>
        </td>
        {{/if}}
        <!-- Current State Badge -->
        <td align="center" valign="middle" style="padding: 0;">
          <span style="display: inline-block; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; background-color: transparent; color: {{currentStateColor}}; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, sans-serif;">
            {{currentState}}
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<!-- /State Transition Block -->
