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/components/app/AppDialog.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import XIcon from '@/components/icons/XIcon.vue';
 import { cn } from '@/lib/utils';
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useTranslation } from 'i18next-vue';
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
 // Ensure client-side only rendering to avoid hydration mismatch
 const isMounted = ref(false);
@@ -75,7 +75,7 @@ onBeforeUnmount(() => {
 
         <!-- Panel -->
         <div class="absolute inset-0 flex items-center justify-center p-4">
-          <div :class="cn('w-full bg-surface border border-border rounded-lg shadow-lg overflow-hidden', maxWidthClass)">
+          <div :class="cn('w-full bg-header border border-border rounded-lg shadow-lg overflow-hidden', maxWidthClass)">
             <!-- Header slot -->
             <div v-if="$slots.header" class="px-5 py-4 border-b border-border">
               <slot name="header" :close="close" />