Refactor tooltip styles for goal progress to improve clarity and consistency

src/views/dashboards/departmentDashboard/modules/goals/DepartmentGoals.vue

@@ -418,7 +418,7 @@ const getGoalApplicableDaysInPeriod = (goal, fromDate, toDate) => {
                             class="goal-progress-tooltip"
                           >
                             <template v-slot:content>
-                              <div>
+                              <div class="goal-tooltip-content">
                                 <!-- Progress in selected timeframe for this department -->
                                 <div class="divider mt-0">Valgt tidsramme</div>
                                 <!-- Departmental progress and then % with 2 decimal places -->
@@ -551,26 +551,35 @@ const getGoalApplicableDaysInPeriod = (goal, fromDate, toDate) => {
 </style>
 
 <style>
-.goal-progress-tooltip .tooltip-content {
+.goal-tooltip-content {
   min-width: 280px;
   max-width: 340px;
   padding: 0.9rem 1rem;
   border-radius: 10px;
   background: #ffffff;
-  color: #363636;
-  border: 1px solid #e8e8e8;
+  color: #1f2937;
+  border: 1px solid #dfe3e8;
   box-shadow: 0 12px 28px rgba(10, 10, 10, 0.14);
 }
 
-.goal-progress-tooltip .tooltip-content .divider {
-  color: #7a7a7a;
+.goal-tooltip-content .divider {
+  color: #6b7280;
 }
 
-.goal-progress-tooltip .tooltip-content .has-text-white {
-  color: #363636 !important;
+.goal-tooltip-content .has-text-white {
+  color: #111827 !important;
 }
 
-.goal-progress-tooltip .tooltip-content .has-text-grey {
-  color: #7a7a7a !important;
+.goal-tooltip-content .has-text-grey {
+  color: #4b5563 !important;
+}
+
+.goal-tooltip-content .has-text-warning {
+  color: #b7791f !important;
+}
+
+.goal-tooltip-content strong,
+.goal-tooltip-content span {
+  color: inherit;
 }
 </style>