fix(helpdesk): fix card coloring, dialog structure, search alignment

- Remove role=button from cards (caused Core button styling). Keep
  tabindex + keydown for keyboard access.
- Restructure dialog to Core pattern: dialog > article.app-dialog-lg
  > header > .close (uses Core close icon and positioning).
- Stack search input below segment control, left-aligned, full width
  up to 20rem.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

modules/helpdesk/pages/helpdesk/risk-radar/index(default).phtml

@@ -118,12 +118,14 @@ $periodLabels = [
         <div id="radar-cards" class="helpdesk-risk-radar-grid"></div>
       </div>
 
-      <dialog id="radar-detail-dialog" class="app-dialog-lg" aria-labelledby="radar-detail-title">
-        <div class="app-dialog-header">
-          <h2 id="radar-detail-title"></h2>
-          <button type="button" class="app-dialog-close" aria-label="<?php e(t('Close')); ?>">&times;</button>
-        </div>
-        <div id="radar-detail-body" class="app-dialog-body"></div>
+      <dialog id="radar-detail-dialog" aria-labelledby="radar-detail-title">
+        <article class="app-dialog-lg">
+          <header>
+            <h2 id="radar-detail-title"></h2>
+            <button type="button" class="close" aria-label="<?php e(t('Close')); ?>"></button>
+          </header>
+          <div id="radar-detail-body"></div>
+        </article>
       </dialog>
     </div>
   </section>

modules/helpdesk/web/css/helpdesk.css

@@ -523,15 +523,14 @@
   /* --- Risk Radar --- */
   .helpdesk-risk-radar-toolbar {
     display: flex;
-    align-items: center;
-    gap: calc(var(--app-spacing) * 0.75);
-    flex-wrap: wrap;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: calc(var(--app-spacing) * 0.5);
     margin-bottom: calc(var(--app-spacing) * 0.75);
   }
 
   .helpdesk-risk-radar-search {
-    flex: 1;
-    min-width: 12rem;
+    width: 100%;
     max-width: 20rem;
   }
 

modules/helpdesk/web/js/helpdesk-risk-radar.js

@@ -20,7 +20,7 @@ if (container) {
   const dialog = document.getElementById('radar-detail-dialog');
   const dialogTitle = document.getElementById('radar-detail-title');
   const dialogBody = document.getElementById('radar-detail-body');
-  const dialogClose = dialog ? dialog.querySelector('.app-dialog-close') : null;
+  const dialogClose = dialog ? dialog.querySelector('.close') : null;
 
   let currentPeriod = 90;
   let lastData = null;
@@ -130,7 +130,6 @@ if (container) {
 
     // Click/keyboard to open detail
     card.tabIndex = 0;
-    card.setAttribute('role', 'button');
     card.addEventListener('click', () => openDetail(customer));
     card.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openDetail(customer); } });