feat(ui): make app header full-width and move Doctor into header controls

- Drop the fixed max-width on .header-container so the header spans the
  viewport while the card grid keeps its own content width
- Keep header icon click targets at 32px at all breakpoints and add
  role/tabindex/aria-label plus Enter/Space activation
- Relocate the Doctor trigger from the page toolbar to the header icon
  group (also available on the statistics page and in the hamburger
  menu), removing the now-unused .doctor-trigger styles

static/css/components/header.css

@@ -12,7 +12,7 @@
 }
 
 .header-container {
-  max-width: 1400px;
+  max-width: none;
   margin: 0 auto;
   padding: 0 15px;
   display: flex;
@@ -38,19 +38,6 @@
   flex-shrink: 0;
 }
 
-/* Responsive header container for larger screens */
-@media (min-width: 2150px) {
-  .header-container {
-    max-width: 1800px;
-  }
-}
-
-@media (min-width: 3000px) {
-  .header-container {
-    max-width: 2400px;
-  }
-}
-
 /* Logo and title styling */
 .header-branding {
   display: flex;
@@ -356,6 +343,27 @@
   transform: translateY(-2px);
 }
 
+/* Doctor trigger in the header: accent-tinted icon with the status badge
+   pinned to the corner like the other header badges. */
+.header-controls .doctor-toggle i {
+  color: var(--lora-accent);
+}
+
+.header-controls .doctor-toggle:hover i {
+  color: inherit;
+}
+
+.header-controls .doctor-status-badge {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  font-size: 10px;
+  border: 2px solid var(--card-bg);
+}
+
 .theme-toggle {
   position: relative;
 }
@@ -716,11 +724,6 @@
   .header-controls {
     gap: 6px;
   }
-
-  .header-controls > div {
-    width: 30px;
-    height: 30px;
-  }
 }
 
 /* Responsive: Hide nav icons at 1100px to save space */

static/css/components/modal/doctor-modal.css

@@ -1,13 +1,3 @@
-.doctor-trigger {
-    min-width: 120px;
-    position: relative;
-    border-color: color-mix(in srgb, var(--lora-accent) 24%, var(--border-color));
-}
-
-.doctor-trigger i {
-    color: var(--lora-accent);
-}
-
 .doctor-status-badge {
     display: inline-flex;
     align-items: center;
@@ -247,15 +237,6 @@
 }
 
 @media (max-width: 760px) {
-    .doctor-trigger {
-        min-width: auto;
-        padding-inline: 10px;
-    }
-
-    .doctor-trigger span:not(.doctor-status-badge) {
-        display: none;
-    }
-
     .doctor-hero,
     .doctor-footer {
         flex-direction: column;