Apply schedule datepicker popup styles

src/styles/_prime-calendar.scss

@@ -50,7 +50,11 @@
 // Adapted from Angular p-calendar element selector to class-based selectors for PrimeReact
 .p-calendar {
     cursor: pointer;
+}
 
+// PrimeReact appends the datepicker panel to the document body, so popup
+// styles must target the overlay itself, not the input wrapper.
+body .p-datepicker {
     .p-datepicker-header {
         .p-datepicker-prev {
             background-image: url('/assets/img/arrow-left.svg');
@@ -60,6 +64,10 @@
             span {
                 display: none;
             }
+
+            .p-icon {
+                display: none;
+            }
         }
 
         .p-datepicker-title {
@@ -85,6 +93,10 @@
             span {
                 display: none;
             }
+
+            .p-icon {
+                display: none;
+            }
         }
 
         .p-datepicker-prev,
@@ -150,23 +162,6 @@
                 span.p-disabled {
                     color: $gray;
                     opacity: 0.5;
-
-                    &:hover {
-                        background-color: transparent;
-                    }
-                }
-            }
-        }
-    }
-}
-
-// PrimeReact appends the datepicker panel to the document body, so popup
-// cells are not descendants of `.p-calendar`. Keep disabled operating days
-// visibly unavailable in the actual popup, including dates that are inside the
-// selected range and therefore also receive `p-highlight`.
-body .p-datepicker table td > span.p-disabled {
-    color: $gray;
-    opacity: 0.5;
                     background-color: transparent;
 
                     &.p-highlight {
@@ -178,6 +173,10 @@ body .p-datepicker table td > span.p-disabled {
                         background-color: transparent;
                     }
                 }
+            }
+        }
+    }
+}
 
 .calendar--mobile {
     display: none;