sticky action button on topbar

public/userarea/imported.php

@@ -1411,6 +1411,61 @@ $gridMeta = [
             background: #fff;
         }
 
+        /* Card-header azioni sticky sotto la topbar */
+        :root {
+            --actions-top: 0px;
+            /* posizione verticale barra azioni: abbassa/alza questo */
+            --actions-height: 58px;
+            /* altezza reale del card-header azioni */
+        }
+
+        .card-header.sticky-actions {
+            position: sticky;
+            top: var(--actions-top);
+            z-index: 40;
+            background: #fff;
+        }
+
+        /* La barra di scroll superiore segue sempre il card-header sticky */
+        .top-scrollbar {
+            top: calc(var(--actions-top) + var(--actions-height)) !important;
+        }
+
+        /* Tastino toggle sticky */
+        .sticky-toggle-btn {
+            border: 1px solid #ced4da;
+            background: #fff;
+            color: #adb5bd;
+            transition: all .15s;
+        }
+
+        .sticky-toggle-btn:hover {
+            background: #f1f3f5;
+            color: #6c757d;
+        }
+
+        .sticky-toggle-btn.active {
+            background: #0d6efd;
+            border-color: #0d6efd;
+            color: #fff;
+        }
+
+        .sticky-toggle-btn.active:hover {
+            background: #0b5ed7;
+            color: #fff;
+        }
+
+        /* Icona ruotata quando sbloccato (puntina "storta") */
+        .sticky-toggle-btn:not(.active) i {
+            transform: rotate(45deg);
+        }
+
+        /* Quando la classe è tolta dal card-header, non è più sticky */
+        .card-header.actions-unpinned {
+            position: static !important;
+            top: auto !important;
+        }
+
         <?php if (isset($mainFieldMappings) && count($mainFieldMappings) >= 2): ?>.grid-top .grid-cell:nth-child(3) {
             position: sticky !important;
             left: 360px;
@@ -1514,8 +1569,9 @@ $gridMeta = [
                     </div>
                 <?php endif; ?>
                 <div class="card radius-10">
-                    <div class="card-header">
+                    <div class="card-header sticky-actions">
                         <div class="d-flex align-items-center" style="min-height: 42px; gap: 12px;">
+                            <button type="button" id="toggleStickyBtn" class="btn btn-sm sticky-toggle-btn active" style="flex-shrink:0;" title="Blocca/sblocca barra azioni"><i class="fas fa-thumbtack"></i></button>
                             <a href="#" class="btn btn-outline-danger btn-sm export-all-lims-btn" style="flex-shrink:0;"><i class="fas fa-upload"></i> Export All</a>
                             <a href="#" class="btn btn-outline-success btn-sm save-all-btn" style="flex-shrink:0;"><i class="fas fa-save"></i> Save All</a>
                             <button type="button" class="btn btn-outline-success btn-sm" id="addRowBtn" style="flex-shrink:0;"><i class="fas fa-plus"></i> Add Row</button>
@@ -1877,6 +1933,21 @@ $gridMeta = [
             }, 1000);
         })();
     </script>
+    <script>
+        (function() {
+            const btn = document.getElementById('toggleStickyBtn');
+            const cardHeader = document.querySelector('.card-header.sticky-actions');
+            if (!btn || !cardHeader) return;
+
+            btn.addEventListener('click', function() {
+                const pinned = btn.classList.toggle('active');
+                cardHeader.classList.toggle('actions-unpinned', !pinned);
+                btn.title = pinned ?
+                    'Sblocca barra azioni' :
+                    'Blocca barra azioni';
+            });
+        })();
+    </script>
 </body>
 
 </html>