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,6 +162,12 @@
                 span.p-disabled {
                     color: $gray;
                     opacity: 0.5;
+                    background-color: transparent;
+
+                    &.p-highlight {
+                        color: $gray;
+                        background-color: $white;
+                    }
 
                     &:hover {
                         background-color: transparent;
@@ -160,25 +178,6 @@
     }
 }
 
-// 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 {
-        color: $gray;
-        background-color: $white;
-    }
-
-    &:hover {
-        background-color: transparent;
-    }
-}
-
 .calendar--mobile {
     display: none;