Wo sind hier Probleme, die die Hervorhebung der ungelesenen Nachrichten stören?
<template x-for="(item, id) in mails" :key="id">
		<!-- mail item start -->
		<div x-data="{ isStarred: false }" class="flex cursor-pointer items-center border-b border-gray-200 px-4 py-4 hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-white/[0.03]">
		  <div class="flex w-3/5 items-center sm:w-1/5">
			<label :for="'checkbox-' + id" class="cursor-pointer select-none">
			  <span class="relative">
				<!-- id korrekt binden -->
				<input type="checkbox" :id="'checkbox-' + id" class="tableCheckbox sr-only" @change="toggleItem(id)" :checked="itemsChecked[id]">
				<span class="box mr-3 flex h-4 w-4 items-center justify-center rounded-sm border border-gray-300 bg-transparent text-white dark:border-gray-700">
				  <!-- classes von itemsChecked mit korrektem variablennamen binden -->
				  <span :class="itemsChecked[id] ? 'opacity-100' : 'opacity-0'">
					<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
					  <path d="M10 3L4.5 8.5L2 6" stroke="white" stroke-width="1.6666" stroke-linecap="round" stroke-linejoin="round" />
					</svg>
				  </span>
				</span>
			  </span>
			</label>
	  
			<div class="flex items-center">
			  <span class="pr-3 text-gray-400" @click="isStarred = !isStarred">
				<!-- Stern SVG: Sichtbarkeit per class -->
				<svg class="fill-current" :class="isStarred ? 'hidden' : 'block'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
				  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.99993 2.375C10.2854 2.375 10.5461 2.53707 10.6725 2.79308L12.7318 6.96563L17.3365 7.63473C17.619 7.67578 17.8537 7.87367 17.9419 8.14517C18.0301 8.41668 17.9565 8.71473 17.7521 8.914L14.4201 12.1619L15.2067 16.748C15.255 17.0293 15.1393 17.3137 14.9083 17.4815C14.6774 17.6493 14.3712 17.6714 14.1185 17.5386L9.99993 15.3733L5.88137 17.5386C5.62869 17.6714 5.32249 17.6493 5.09153 17.4815C4.86057 17.3137 4.7449 17.0293 4.79316 16.748L5.57974 12.1619L2.24775 8.914C2.04332 8.71473 1.96975 8.41668 2.05797 8.14517C2.14619 7.87367 2.3809 7.67578 2.66341 7.63473L7.2681 6.96563L9.32738 2.79308C9.45373 2.53707 9.71445 2.375 9.99993 2.375ZM9.99993 4.81966L8.4387 7.98306C8.32946 8.20442 8.11828 8.35785 7.874 8.39334L4.38298 8.90062L6.90911 11.363C7.08587 11.5353 7.16653 11.7835 7.1248 12.0268L6.52847 15.5037L9.65093 13.8622C9.86942 13.7473 10.1304 13.7473 10.3489 13.8622L13.4714 15.5037L12.8751 12.0268C12.8333 11.7835 12.914 11.5353 13.0908 11.363L15.6169 8.90062L12.1259 8.39334C11.8816 8.35785 11.6704 8.20442 11.5612 7.98306L9.99993 4.81966Z" fill="" />
				</svg>
	  
				<svg :class="isStarred ? 'block' : 'hidden'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
				  <path d="M9.99991 3.125L12.2337 7.65114L17.2286 8.37694L13.6142 11.9L14.4675 16.8747L9.99991 14.526L5.53235 16.8747L6.38558 11.9L2.77124 8.37694L7.76613 7.65114L9.99991 3.125Z" fill="#FDB022" />
				</svg>
			  </span>
			  <span x-mod>
			  <span class="truncate text-sm text-gray-700 dark:text-gray-400" x-text="item.sender"></span>
			</div>
		  </div>
	  
		  <div class="flex w-1/5 items-center gap-3 sm:w-3/5">
	        <a :href="item.link">
			<p class="truncate text-sm text-gray-500 dark:text-gray-400" :class="item.isUnread == 'true' ? 'text-red-500 animate-pulse' :''" x-text="item.subject"></p>
	  
			<span
			  x-show="item.badge"
			  class="hidden rounded-full px-2 py-0.5 text-theme-xs font-medium sm:inline-block"
			  {{-- :class="item.badge === 'Important' ? 'text-error-700 dark:text-error-500 bg-error-50 dark:bg-error-500/15' : item.badge === 'Social' ? 'text-success-700 dark:text-success-500 bg-success-50 dark:bg-success-500/15' : item.badge === 'Promotional' ? 'text-brand-500 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/15' : ''" --}}
			  :style="{
				color: getTextColor(item.badgeColor),
				'background-color': getBgColor(item.badgeColor)
			  }"
			  class="rounded-full px-2 py-0.5 text-theme-xs font-medium sm:inline-block"
			  x-text="item.badge"
			></span></A>
		  </div>
	  
		  <div class="w-1/5">
			<span class="block text-right text-theme-xs text-gray-400" x-text="item.time"></span>
		  </div>
		</div>
		<!-- mail item end -->
	  </template>
	  <!-- ====== Inbox List End -->

<div class="sticky bottom-0 flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 dark:border-gray-800 dark:bg-[#171f2f]">
<p class="text-sm text-gray-500 dark:text-gray-400">Showing 1 of 159</p>
<div class="flex items-center justify-end gap-2">
<button class="flex h-8 w-8 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-500 hover:bg-gray-50 dark:border-gray-800 dark:bg-white/[0.03] dark:text-gray-400 dark:hover:bg-white/[0.03]">
<svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M12.7083 5L7.5 10.2083L12.7083 15.4167" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
<button class="flex h-8 w-8 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-500 hover:bg-gray-50 dark:border-gray-800 dark:bg-white/[0.03] dark:text-gray-400 dark:hover:bg-white/[0.03]">
<svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M7.29167 15.8335L12.5 10.6252L7.29167 5.41683" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
</div>
</div>
</div>

<script>function mailApp() {
	return {
		allChecked: false,
		mails: [
			@foreach($messages as $message)
			{
				sender: {!! json_encode($message->user->name) !!},
				subject: {!! json_encode($message->subject) !!},
				time: {!! json_encode($message->created_at->diffForHumans()) !!},
				badge: {!! json_encode($message->messagetopic?->messagetopic_name ?? '') !!},
				badgeColor: {!! json_encode($message->messagetopic?->color ?? '') !!},
				id: {{ $message->message_id }},
				link: {!! json_encode(route('messages.details', $message->message_id)) !!},
				isUnread: {{ $message->is_unread ? 'true' : 'false' }}
			}@if(!$loop->last),@endif
			@endforeach
		],
itemsChecked: [],

isDarkMode() {
      return document.documentElement.classList.contains('dark');
    },

    getTextColor(color) {
      if ((color.toLowerCase() === '#000000' || color.toLowerCase() ==='rgb(0, 0, 0)') && this.isDarkMode()) {
        return '#ffffff'; // Weißer Text bei Schwarz im Dark Mode
      }
      return color;
    },

    getBgColor(color) {
      if ((color.toLowerCase() === '#000000' || color.toLowerCase() ==='rgb(0, 0, 0)') && this.isDarkMode()) {
        return '#ffffff40'; // halbtransparent weiss im Dark Mode
      }
      return color + '40';
    },

toggleAll() {
this.allChecked = !this.allChecked;
this.itemsChecked = this.mails.map(() => this.allChecked);
},
toggleItem(index) {
this.itemsChecked[index] = !this.itemsChecked[index];
},
init() {
this.itemsChecked = this.mails.map(() => false);
},
};
}
</script>
<!-- Inbox Mailbox End -->
	  </div>
	</div>
  </div>