chore: adiciona hover

src/components/charts/DashboardStatCard.vue

@@ -1,5 +1,9 @@
 <template>
-  <q-card class="stat-card" :class="{ 'stat-card--clickable': clickable }" @click="clickable && emit('click')">
+  <q-card
+    class="stat-card"
+    :class="{ 'stat-card--clickable': clickable }"
+    @click="clickable && emit('click')"
+  >
     <div class="flex justify-between items-start no-wrap">
       <span class="text-subtitle2 card-title">{{ title }}</span>
       <q-icon :name="icon" size="22px" class="card-icon" />
@@ -15,9 +19,11 @@
         :style="customStyle"
         class="stat-badge"
       />
-      <span v-else-if="subtitle" class="text-caption text-foreground card-subtitle">{{
-        subtitle
-      }}</span>
+      <span
+        v-else-if="subtitle"
+        class="text-caption text-foreground card-subtitle"
+        >{{ subtitle }}</span
+      >
     </div>
   </q-card>
 </template>
@@ -34,7 +40,7 @@ defineProps({
   clickable: { type: Boolean, default: false },
 });
 
-const emit = defineEmits(['click']);
+const emit = defineEmits(["click"]);
 </script>
 
 <style scoped lang="scss">
@@ -48,30 +54,33 @@ const emit = defineEmits(['click']);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  transition: background-color 0.2s, color 0.2s;
+  transition:
+    background-color 0.2s,
+    color 0.2s;
 
-  .card-title { color: #1a1a1a; transition: color 0.2s; }
-  .card-icon { color: #1a1a1a; transition: color 0.2s; }
-  .card-value { color: $primary; transition: color 0.2s; }
-  .card-subtitle { transition: color 0.2s; }
+  .card-title {
+    color: #1a1a1a;
+    transition: color 0.2s;
+  }
+  .card-icon {
+    color: #1a1a1a;
+    transition: color 0.2s;
+  }
+  .card-value {
+    color: $primary;
+    transition: color 0.2s;
+  }
+  .card-subtitle {
+    transition: color 0.2s;
+  }
 }
 
 .stat-card--clickable {
   cursor: pointer;
 
   &:hover {
-    background-color: $primary !important;
+    background-color: $terciary !important;
     box-shadow: 0 0 0 1px $primary !important;
-
-    .card-title { color: white; }
-    .card-icon { color: white; }
-    .card-value { color: white; }
-    .card-subtitle { color: rgba(255, 255, 255, 0.85); }
-
-    .stat-badge {
-      background-color: white !important;
-      color: $primary !important;
-    }
   }
 }
 
@@ -91,6 +100,8 @@ const emit = defineEmits(['click']);
   border-radius: 8px;
   width: fit-content;
   color: $primary;
-  transition: background-color 0.2s, color 0.2s;
+  transition:
+    background-color 0.2s,
+    color 0.2s;
 }
 </style>