Use Angular's outlined calendar SVG in the datepicker trigger

PrimeReact ships a solid filled-calendar glyph; Angular's filter calendar
uses a thinner outlined glyph with six "row" tiles drawn in the brand
blue (#418fde). Replace the default icon by hiding PrimeReact's <svg> +
painting `/assets/img/calendar.svg` as a background on
.p-datepicker-trigger, scoped to the three filter-sidebar roots.

Consolidate the per-page .p-datepicker-trigger styling — the three
filter SCSS files each carried their own background/border/color
overrides that kept drifting. Now only the width override lives per
page, everything else is shared in styles/_prime-calendar.scss.

src/features/flights-map/components/FlightsMapStartPage.scss

@@ -303,22 +303,8 @@
   }
 }
 
-// PrimeReact Calendar trigger inside the map filter: Angular renders
-// an outline calendar icon (no background); the PrimeReact default is
-// a filled-blue button. Strip the fill + tone the icon down to the
-// neutral gray so it reads as a glyph rather than a CTA.
-.flights-map-filter .p-calendar.p-calendar-w-btn .p-datepicker-trigger.p-button {
-  background: transparent !important;
-  border: 1px solid colors.$border-input !important;
-  border-left: none !important;
-  color: colors.$light-gray !important;
-  box-shadow: none !important;
-}
-.flights-map-filter .p-calendar.p-calendar-w-btn .p-datepicker-trigger.p-button:hover,
-.flights-map-filter .p-calendar.p-calendar-w-btn .p-datepicker-trigger.p-button:focus {
-  background: rgba(0, 0, 0, 0.04) !important;
-  color: colors.$blue-dark !important;
-}
+// PrimeReact Calendar trigger inside the map filter — styling (background
+// icon, no border, no seam) comes from shared `styles/_prime-calendar.scss`.
 
 // Leaflet city tooltips: text-only with white text-shadow halo, matching
 // Angular's _leaflet-popup.scss treatment.

src/features/online-board/components/OnlineBoardFilter.scss

@@ -351,18 +351,12 @@
     }
   }
 
-  // PrimeReact Calendar button — match Angular's outline icon style
+  // PrimeReact Calendar trigger button width override. Background-image,
+  // border removal, and p-icon hiding live in the shared rule in
+  // `styles/_prime-calendar.scss` so all three filter sidebars look
+  // identical.
   .p-datepicker-trigger {
-    background: transparent !important;
-    border: none !important;
-    color: colors.$gray !important;
     width: 2rem !important;
     padding: 0 !important;
-
-    .p-icon {
-      width: 1rem;
-      height: 1rem;
-      color: colors.$blue;
-    }
   }
 }

src/features/schedule/components/ScheduleStartPage.scss

@@ -331,19 +331,11 @@
     }
   }
 
-  // PrimeReact Calendar button — match Angular's outline icon
+  // PrimeReact Calendar trigger — background/border/icon handled in
+  // shared `styles/_prime-calendar.scss`. Keep only the width override.
   .p-datepicker-trigger {
-    background: transparent !important;
-    border: none !important;
-    color: colors.$gray !important;
     width: 2rem !important;
     padding: 0 !important;
-
-    .p-icon {
-      width: 1rem;
-      height: 1rem;
-      color: colors.$blue;
-    }
   }
 
   // PrimeReact Calendar input — step the font down from the start-page's

src/styles/_prime-calendar.scss

@@ -25,6 +25,22 @@
         padding: 0 $space-l;
     }
 
+    // Swap PrimeReact's default filled-calendar glyph for the outlined
+    // blue calendar used in Angular (`ClientApp/src/assets/img/calendar.svg`,
+    // fill #418fde). Hide the <svg class="p-icon"> PrimeReact injects,
+    // paint the sprite as a background-image on the trigger button.
+    .p-datepicker-trigger {
+        background: transparent url('/assets/img/calendar.svg') no-repeat center center;
+        background-size: 16px 16px;
+        border: none !important;
+        box-shadow: none !important;
+
+        .p-icon,
+        .p-button-icon {
+            display: none !important;
+        }
+    }
+
     &:focus-within {
         border-color: $blue-light;
         box-shadow: 0 0 0 0.2em $focus-shadow;