refactor: update UI styles to use new header background color

- Changed background color for various select elements and containers in Users.vue and Videos.vue to use 'bg-header'.
- Updated background color for status and role filters in the admin section.
- Adjusted background colors in Home.vue, QuickActions.vue, and other components to enhance UI consistency.
- Refactored Billing.vue and DomainsDns.vue to align with new design standards.
- Modified settings components to utilize new header color for better visual hierarchy.
- Improved accessibility and visual feedback in the SettingsRow and SettingsSectionCard components.
- Updated authentication middleware to include timestamp cookie for session management.
- Enhanced gRPC client to build internal metadata for service calls.

src/routes/overview/components/Referral.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="rounded-xl border border-gray-300 hover:border-primary hover:shadow-lg text-card-foreground bg-surface">
+    <div class="rounded-xl border border-gray-300 hover:border-primary hover:shadow-lg text-card-foreground bg-header">
         <div class="flex flex-col space-y-1.5 p-6">
             <h3 class="text-lg font-semibold leading-none tracking-tight">{{ t('overview.referral.title') }}</h3>
         </div>
@@ -27,8 +27,8 @@
 </template>
 <script lang="ts" setup>
 import { useAuthStore } from '@/stores/auth';
-import { computed, ref } from 'vue';
 import { useTranslation } from 'i18next-vue';
+import { computed, ref } from 'vue';
 
 const auth = useAuthStore();
 const isCopied = ref(false);