refactor(helpdesk): reuse segment-control pattern for team period selector

Replace custom button-based period selector with the existing
helpdesk-segment-control radio+label pattern used in the controlling
dashboard. Removes duplicate CSS and ensures visual consistency.

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

modules/helpdesk/pages/helpdesk/team/index(default).phtml

@@ -37,13 +37,10 @@ $periodLabels = [
     require templatePath('partials/app-flash.phtml');
     ?>
 
-    <div class="helpdesk-team-period-selector">
+    <div class="helpdesk-segment-control" id="team-period-selector">
       <?php foreach ($periods as $p): ?>
-        <button type="button"
-                class="helpdesk-team-period-button<?php if ($p === 90): ?> active<?php endif; ?>"
-                data-period="<?php e($p); ?>"
-                aria-pressed="<?php e($p === 90 ? 'true' : 'false'); ?>"
-        ><?php e($periodLabels[$p]); ?></button>
+        <input type="radio" name="team-period" id="team-period-<?php e($p); ?>" value="<?php e($p); ?>"<?php if ($p === 90): ?> checked<?php endif; ?>>
+        <label for="team-period-<?php e($p); ?>"><?php e($periodLabels[$p]); ?></label>
       <?php endforeach; ?>
     </div>
 

modules/helpdesk/web/css/helpdesk.css

@@ -127,28 +127,6 @@
   }
 
   /* Team workload dashboard */
-  .helpdesk-team-period-selector {
-    display: inline-flex;
-    gap: calc(var(--app-spacing) * 0.25);
-    margin-bottom: calc(var(--app-spacing) * 0.75);
-  }
-
-  .helpdesk-team-period-button {
-    padding: calc(var(--app-spacing) * 0.25) calc(var(--app-spacing) * 0.6);
-    font-size: var(--text-sm, 0.875rem);
-    border: var(--app-border-width) solid var(--app-muted-border-color);
-    background: var(--app-background-color);
-    color: var(--app-color);
-    cursor: pointer;
-    transition: background-color 0.15s ease, border-color 0.15s ease;
-  }
-
-  .helpdesk-team-period-button.active {
-    background: var(--app-primary);
-    border-color: var(--app-primary);
-    color: var(--app-primary-inverse);
-  }
-
   .helpdesk-team-table {
     width: 100%;
     margin-top: calc(var(--app-spacing) * 0.75);

modules/helpdesk/web/js/helpdesk-team.js

@@ -13,7 +13,7 @@ if (container) {
   const elContent = document.getElementById('team-content');
   const elBody = document.getElementById('team-table-body');
   const elRefresh = container.querySelector('button[name="team-refresh"]');
-  const periodButtons = container.querySelectorAll('.helpdesk-team-period-button');
+  const periodSelector = document.getElementById('team-period-selector');
 
   let currentPeriod = 90;
 
@@ -97,17 +97,13 @@ if (container) {
     }
   }
 
-  for (const button of periodButtons) {
-    button.addEventListener('click', () => {
-      const period = parseInt(button.dataset.period, 10);
-      if (period === currentPeriod) return;
+  if (periodSelector) {
+    periodSelector.addEventListener('change', (e) => {
+      const radio = e.target.closest('input[name="team-period"]');
+      if (!radio) return;
+      const period = parseInt(radio.value, 10);
+      if (!period || period === currentPeriod) return;
       currentPeriod = period;
-
-      for (const b of periodButtons) {
-        b.classList.toggle('active', b === button);
-        b.setAttribute('aria-pressed', b === button ? 'true' : 'false');
-      }
-
       fetchData();
     });
   }