Adds highlight support to card component

Introduces a new highlighted prop to enable visual highlighting of cards, useful for indicating selection anchors or drawing attention to specific items.

Applies a subtle box shadow when the card is highlighted to provide clear visual feedback without being intrusive.

Author: itisAliRH

client/src/components/Common/GCard.vue

@@ -176,6 +176,11 @@ interface Props {
      * @default "Last updated"
      */
     updateTimeTitle?: string;
+
+    /** Whether this card is highlighted (for example, as a range selection anchor)
+     * @default false
+     */
+    highlighted?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -207,6 +212,7 @@ const props = withDefaults(defineProps<Props>(), {
     updateTime: "",
     updateTimeIcon: () => faEdit,
     updateTimeTitle: "Last updated",
+    highlighted: false,
 });
 
 /**
@@ -310,7 +316,7 @@ function onKeyDown(event: KeyboardEvent) {
         <div
             :id="`g-card-content-${props.id}`"
             class="g-card-content d-flex flex-column justify-content-between h-100 p-2"
-            :class="contentClass">
+            :class="[{ 'g-card-highlighted': props.highlighted }, contentClass]">
             <slot>
                 <div class="d-flex flex-column flex-gapy-1">
                     <div
@@ -701,6 +707,10 @@ function onKeyDown(event: KeyboardEvent) {
         border-left: 0.25rem solid $brand-primary;
     }
 
+    &.g-card-highlighted .g-card-content {
+        box-shadow: 0 0 0 0.2rem transparentize($brand-primary, 0.75);
+    }
+
     &.g-card-clickable {
         cursor: pointer;