[T04] Bulk Flag UNFIT / Dispose

I'm designing a modal dialog for the EMS admin portal — same Spring Boot
+ Angular stack, same visual language as the screens you've designed in
this project (C01, C03, C04, E01, E05, E06). Match modal-width, header
treatment, button placement, and footer toolbar to C04 (the Reassignment
Dialog).

Design **T04 — Bulk Flag UNFIT / Dispose**: a cross-cutting reusable
modal where a tenant admin runs one of two bulk admin actions on a set
of race numbers — flag them UNFIT (mode = `flag-unfit`) or dispose
already-UNFIT numbers to DESTROYED (mode = `dispose`).

The dialog is launched from at least two callers:
- T02 bulk-select toolbar — both modes.
- T03 outcome summary `Dispose these N` shortcut on the
  `DISPOSAL_RECOMMENDED` group — `dispose` mode only.
A future caller is C04's `Damaged` reassignment chain — `flag-unfit`
mode only. The dialog therefore must have NO caller-specific imports;
it receives `{ ids: Long[], mode: 'flag-unfit'|'dispose' }` as a prop
and emits `{ mode, outcomeSummary }` as a result event.

A cross-cutting design rule: any disabled, hidden-by-policy, or limited
affordance MUST surface its reason inline (tooltip on hover, helper
text, empty-state copy). Operators should never have to guess why a
control is unavailable.

A second cross-cutting rule: every full-screen flow and every modal in
this portal includes an "About this screen" / "About this dialog"
panel — for modals, this lives at the top of the dialog body (above
the selection summary). Same pattern as C04 / C05 / E06.

============================================================
Dialog structure (top to bottom)
============================================================

1. Header
   - Title (mode-specific):
     - flag-unfit → "Flag {N} numbers as UNFIT"
     - dispose    → "Dispose {N} UNFIT numbers"
   - Sub-title: count + first three bib numbers + "+M more" (e.g.
     "5 numbers — P3014, P3015, P3018, +2 more").
   - Close (X) top-right.

2. "About this dialog" information panel
   - Collapsible, default expanded on first open per browser, collapse
     state persisted in localStorage.
   - flag-unfit body: short purpose paragraph + bullets explaining what
     UNFIT means: the number is removed from the auto-assignable pool,
     stays with its current holder until physical return, retrievals
     get coordinated separately, and the flag can be cleared by an
     admin if needed.
   - dispose body: dominated by an IRREVERSIBLE WARNING BANNER — bold
     red border, warning icon, copy:

       Disposal is permanent.

       Marking a number DESTROYED is irreversible. The record stays in
       the database for audit and historical results, but the number
       can never be re-issued, paired with a tag, or transitioned to
       any other state. There is no undo and no admin override.

       Use this only after the physical numbers have been disposed of
       (returned to manufacturer, scrapped, or otherwise put beyond
       reuse).

   - For dispose mode ONLY, override the user's collapse preference —
     re-open the panel each time the dialog opens in dispose mode.

3. Selection summary tiles — three inline tiles, mode-specific:
   - flag-unfit:
       Will flag (count) · Already UNFIT (count, skipped) · DESTROYED (count, rejected)
   - dispose:
       Will dispose (count) · Not UNFIT (count, rejected) · Already DESTROYED (count, skipped)

   Tiles are coloured by tone — primary (will act on), neutral (skipped),
   warning (rejected). For dispose mode, the `Will dispose` tile carries
   a small "irreversible" sub-line in red.

   When the rejected tile > 0, render below the tiles a small action row:
       "Remove these {N} from the selection — they can't be {disposed/flagged}."
   with a "Remove rejected items" link button. Clicking it drops the
   rejected ids from the dialog's local working selection and recomputes
   the tile counts. Does NOT mutate the caller's selection until the
   operator confirms the action.

   While the rejected tile > 0 AND the operator has not removed them,
   the primary button is disabled with the tooltip:
   - dispose:    "Only UNFIT numbers can be disposed. Remove non-UNFIT
                  items from the selection or cancel."
   - flag-unfit: "Some selected numbers can't be flagged (already UNFIT
                  or DESTROYED). Remove them from the selection or
                  cancel."

4. Optional "Note (audit log)" text input
   - Free text, single line. Helper: "Adds a note to the audit-log
     entry for every {flagged/disposed} number."

5. Footer toolbar
   - Left: Cancel (secondary) — closes dialog, no API calls. Emits
     `{ cancelled: true }`.
   - Right: primary — mode-specific label:
     - flag-unfit → "Flag {N} as UNFIT"
     - dispose    → "Dispose {N} — irreversible"

============================================================
Submit behaviour
============================================================

flag-unfit mode (single confirmation step):
- Click primary → POST /api/race-numbers/flag-unfit with
  { numberIds, note }.
- Response → modal body replaces the selection-summary section with a
  per-id outcome list grouped by outcome (OK / SKIPPED / REJECTED /
  NOT_FOUND).
- Footer becomes "Done" (single primary).
- Done click → modal closes; emits { mode: 'flag-unfit',
  outcomeSummary: response }.

dispose mode (CONFIRM-TWICE rule — irreversible):
- Click primary → does NOT fire the request yet. Replaces the footer
  toolbar (and ONLY the footer toolbar — selection summary stays
  visible above) with a secondary-confirm row:

    "Are you sure? This will mark {N} numbers DESTROYED. There is no
     undo."

    [No, go back] (secondary, RECEIVES FOCUS)   [Yes — dispose {N}] (primary)

- Default focus is on "No, go back". Pressing Enter does NOT proceed.
- Pressing Esc returns to the prior footer (one Esc = back to first
  primary; two Esc = close dialog, cancelled).
- Click "Yes — dispose {N}" → POST /api/race-numbers/dispose with
  { numberIds, note }.
- Response → same per-id outcome list rendering as flag-unfit.
- Done click → modal closes; emits { mode: 'dispose',
  outcomeSummary: response }.

Failure modes:
- Network failure mid-submit: dialog stays open, primary re-enables,
  inline notice in red above the footer: "Couldn't submit. {error}.
  Try again — your selection is preserved."
- Permission denied (403): modal closes with an error toast on the
  parent screen.

============================================================
Per-id outcome list (response rendering)
============================================================

After the API call returns, the dialog body's selection-summary section
is replaced with a per-id outcome list, grouped by outcome code:

  - OK         — flagged or disposed successfully.
  - SKIPPED    — already in the target state (no-op).
  - REJECTED   — server-side gating rejected the transition (mode
                 mismatch, permission, etc.).
  - NOT_FOUND  — id did not match a RaceNumber record.

Each row inside a group: bib number (bold) + state-before pill + arrow
+ state-after pill (or em-dash for SKIPPED / NOT_FOUND).

============================================================
Output
============================================================

For each of these dialog states:
  - flag-unfit, clean selection (5 rows, all valid)
  - flag-unfit, mixed selection (3 valid, 1 already UNFIT, 1 DESTROYED)
    — primary disabled with tooltip
  - dispose, clean selection (5 UNFIT rows) — first view
  - dispose, clean selection — second confirm row visible
  - dispose, mixed selection (3 UNFIT, 2 IN_STOCK, 1 DESTROYED) —
    primary disabled with tooltip + "Remove rejected items" action
  - response view, mixed outcomes (3 OK, 1 SKIPPED, 1 REJECTED)
  - failure-state inline notice (network error)

Provide:
  - HTML/JSX + matching styles per state.
  - Screen README explaining:
    - The two modes and how the dialog renders mode-specific copy
      throughout (header, banner, tiles, primary label).
    - The confirm-twice rule for dispose and why it does NOT apply to
      flag-unfit.
    - The reusability contract — no caller-specific imports; the
      dialog receives `{ ids, mode }` as a prop and emits
      `{ mode, outcomeSummary }`.
    - Default focus + keyboard behaviour on the secondary confirm
      step (focus on "No, go back"; Enter does not proceed; Esc
      returns to prior view).