- aggiornato Card service, e CGridTableRec.

src/components/CGridTableRec/CGridTableRec.scss

@@ -1,3 +1,18 @@
+// ========================================
+// BASE STYLES
+// ========================================
+$primary-color: #1976d2;
+$border-radius: 10px;
+$transition-speed: 0.3s;
+$mobile-breakpoint: 768px;
+
+$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
+$shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08);
+$shadow-hover: 0 4px 12px rgba(25, 118, 210, 0.15);
+
+// ========================================
+// TABLE STYLES
+// ========================================
 .colmodif {
   cursor: pointer;
 }
@@ -10,7 +25,7 @@
 .tdclass,
 .trclass {
   min-height: 20px !important;
-  margin-top: 5px;
+  margin-top: 3px;
 }
 
 .q-table td {
@@ -41,85 +56,175 @@
 
 .riduci_pad {
   min-height: 30px;
-  padding: 4px 8px !important;
+  padding: 3px 6px !important;
 }
 
-
 .q-table__top {
   padding-top: 0 !important;
 }
 
+// ========================================
+// DIALOG & LAYOUT
+// ========================================
 .right-align-dialog .q-dialog {
   right: 0;
-  /* Allinea a destra */
   left: auto;
-  /* Disabilita l'allineamento a sinistra */
   margin: 0;
-  /* Rimuovi qualsiasi margine */
 }
 
-
 .flexible-width {
   flex: 1;
-  /* permette al componente di espandersi */
   max-width: 500px;
-  /* larghezza massima di 600px */
 }
 
-.hint_search{
+.hint_search {
   color: gray;
 }
 
-.clOrizzontal{
+// ========================================
+// CAROUSEL STYLES - MODERNIZZATI
+// ========================================
+.q-carousel__slide {
+  padding: 5px !important;
 
-}
-.q-carousel__slide{
-  padding: 8px !important;
+  @media (max-width: $mobile-breakpoint) {
+    padding: 3px !important;
+  }
 }
 
 .carousel-scroll-container {
-  overflow-y: auto; /* Permette lo scrolling verticale */
-}
+  overflow-y: auto;
+  max-height: calc(100vh - 120px);
+  
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+    
+    &:hover {
+      background: rgba(0, 0, 0, 0.3);
+    }
+  }
 
-.modern-grid-toolbar {
-  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
-  color: white;
-  padding: 12px 16px;
-  min-height: 52px;
-  border-radius: 12px 12px 0 0;
-
-  @media (max-width: 768px) {
-    padding: 5px 12px;
-    min-height: 48px;
+  @media (max-width: $mobile-breakpoint) {
+    max-height: calc(100vh - 100px);
   }
 }
 
+// ========================================
+// TOOLBAR MODERNO
+// ========================================
+.modern-grid-toolbar {
+  background: linear-gradient(135deg, $primary-color 0%, #1565c0 100%);
+  color: white;
+  padding: 10px 14px;
+  min-height: 50px;
+  border-radius: $border-radius $border-radius 0 0;
+  box-shadow: $shadow-sm;
+
+  @media (max-width: $mobile-breakpoint) {
+    padding: 8px 12px;
+    min-height: 46px;
+  }
+}
+
+// ========================================
+// BUTTON MODERNO
+// ========================================
 .modern-add-btn {
-  padding: 8px 20px;
+  padding: 6px 18px;
   font-weight: 600;
-  transition: all 0.3s;
+  transition: all $transition-speed;
+  box-shadow: $shadow-sm;
 
   &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
+    transform: translateY(-1px);
+    box-shadow: $shadow-hover;
   }
-  @media (max-width: 768px) {
-    padding: 4px 20px;
+
+  @media (max-width: $mobile-breakpoint) {
+    padding: 5px 16px;
   }
 }
 
+// ========================================
+// INFINITE SCROLL
+// ========================================
+// ========================================
+// GRID LAYOUT PER CARD
+// ========================================
 .q-infinite-scroll {
-  padding: 8px;
-  gap: 10px;
+  padding: 6px;
+  gap: 8px;
   
-  @media (max-width: 768px) {
-    padding: 6px;
-    gap: 8px;
+  // Desktop: layout a griglia 2 colonne
+  @media (min-width: $mobile-breakpoint + 1) {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+    padding: 8px;
+  }
+  
+  // Desktop large: 3 colonne per schermi molto larghi
+  @media (min-width: 1400px) {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+  }
+  
+  // Mobile: colonna singola
+  @media (max-width: $mobile-breakpoint) {
+    display: flex;
+    flex-direction: column;
+    padding: 5px;
+    gap: 6px;
   }
 }
 
+// ========================================
+// DIALOG CARDS
+// ========================================
 .q-dialog {
   :deep(.modern-card) {
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
+    border-radius: $border-radius;
   }
+}
+
+// ========================================
+// FIXED TOGGLE
+// ========================================
+.fixed-toggle {
+  position: fixed;
+  top: 70px;
+  right: 12px;
+  z-index: 1000;
+  box-shadow: $shadow-md;
+  border-radius: 20px;
+  background: white;
+  padding: 4px 8px;
+
+  @media (max-width: $mobile-breakpoint) {
+    top: 65px;
+    right: 10px;
+    padding: 3px 6px;
+  }
+}
+.grid-card-item {
+  width: 100%;
+  
+  @media (max-width: $mobile-breakpoint) {
+    width: 100%;
+  }
+}
+
+.fill-all-width {
+  width: 100%;
 }

src/components/CGridTableRec/CGridTableRec.vue

@@ -499,6 +499,7 @@
             v-for="(rec, indexrow) in serverData"
             :key="indexrow"
             :name="indexrow"
+            class="grid-card-item"
           >
             <CMyRecCard
               :table="tablesel"