++ fix permessi e mobile portrait

resources/css/app.css

@@ -101,3 +101,68 @@
     0%, 100% { opacity: 1; }
     50% { opacity: 0.7; }
 }
+
+/* ─── Responsive list tables ───────────────────────────────────────────────
+   Under 640px (a phone held in portrait; rotate to landscape and the width
+   grows past the breakpoint, restoring the normal table) every table with the
+   `table-cards` class reflows: the header is hidden and each row becomes a
+   card, with each cell shown as "LABEL … value" (the label comes from the
+   cell's data-label attribute). Cells with no data-label (the actions column,
+   marked `.cell-actions`) span the row full width. */
+@media (max-width: 640px) {
+    table.table-cards,
+    table.table-cards tbody {
+        display: block;
+        width: 100%;
+    }
+    table.table-cards thead {
+        display: none;
+    }
+    table.table-cards tr {
+        display: block;
+        border: 1px solid #e5e7eb;
+        border-radius: 10px;
+        margin-bottom: 12px;
+        padding: 4px 2px;
+        background: #fff;
+    }
+    /* zebra striping would fight the card borders */
+    table.table-cards.table-striped tbody tr:nth-child(even) {
+        background: #fff;
+    }
+    table.table-cards td {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        width: 100%;
+        text-align: right;
+        padding: 6px 12px;
+        border: none !important;
+    }
+    table.table-cards td[data-label]::before {
+        content: attr(data-label);
+        flex: 0 0 auto;
+        margin-right: auto;
+        text-align: left;
+        font-size: 11px;
+        font-weight: 600;
+        color: #6b7280;
+        text-transform: uppercase;
+        letter-spacing: .3px;
+    }
+    /* Actions row: full width, buttons wrapped to the right */
+    table.table-cards td.cell-actions {
+        justify-content: flex-end;
+        flex-wrap: wrap;
+        margin-top: 2px;
+        padding-top: 10px;
+        border-top: 1px solid #f3f4f6 !important;
+    }
+    /* Cells spanning all columns (empty state, inline edit form) stay full
+       width and block, so their inner layout isn't squeezed by the flex row. */
+    table.table-cards td[colspan] {
+        display: block;
+        text-align: center;
+    }
+}