feat(ui): sidebar icon refresh + unified detail-page headers

Sidebar (user-approved design, docs/superpowers/specs/2026-06-12-sidebar-
icons-design.md): all 31 menu items get unique contextual stroke glyphs in
rounded-square tiles tinted per section (Docházka blue, Kniha jízd teal,
Administrativa amber, Sklad violet, Systém slate; new teal/violet/slate
palette entries with channel tokens in both schemes). Replaces the old set
where 13 items shared a glyph (3x people, 3x sliders, ...) and Faktury was a
dollar sign. Odin stays the only solid + animated tile. Uniqueness pinned by
navdata-icons.test.ts (tsconfig.test.json gains jsx for the .tsx import).

Headers: ProjectDetail and OrderDetail now match the Offer/Invoice shell —
number rendered in secondary color at regular weight next to the bold
entity word, and flexWrap on both left header boxes so the title drops
below Zpět on phones instead of overflowing the viewport (the reported
mobile bug on received orders).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/__tests__/navdata-icons.test.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { isValidElement, type ReactElement } from "react";
+import { menuSections, type MenuItem } from "../admin/ui/navData";
+
+/**
+ * Pins the sidebar icon-refresh contract (2026-06-12 design): every menu
+ * item has a glyph, and no two items share one — duplicated glyphs were the
+ * whole problem the refresh fixed (3× "people", 3× "sliders", …). Odin's
+ * rawIcon (OdinMark, MUI-styled + animated) is exempt from rendering here
+ * but still must exist and stay the ONLY rawIcon.
+ */
+
+const allItems: Array<MenuItem & { section: string }> = menuSections.flatMap(
+  (s) => s.items.map((item) => ({ section: s.label, ...item })),
+);
+
+describe("sidebar nav icons", () => {
+  it("every item has an icon and a section hue", () => {
+    for (const section of menuSections) {
+      expect(section.hue, `section ${section.label}`).toBeTruthy();
+    }
+    for (const item of allItems) {
+      expect(isValidElement(item.icon), `${item.section}/${item.label}`).toBe(
+        true,
+      );
+    }
+  });
+
+  it("Odin is the only rawIcon (its own tile + animation stay unique)", () => {
+    const raw = allItems.filter((i) => i.rawIcon);
+    expect(raw.map((i) => i.label)).toEqual(["Odin"]);
+  });
+
+  it("no two items share a glyph", () => {
+    const rendered = allItems
+      .filter((i) => !i.rawIcon)
+      .map((item) => ({
+        key: `${item.section}/${item.label}`,
+        markup: renderToStaticMarkup(item.icon as ReactElement),
+      }));
+
+    const seen = new Map<string, string>();
+    for (const { key, markup } of rendered) {
+      const dupe = seen.get(markup);
+      expect(dupe, `${key} shares its glyph with ${dupe}`).toBeUndefined();
+      seen.set(markup, key);
+    }
+    expect(seen.size).toBe(rendered.length);
+  });
+});