From f2daac4f9d294d7b60d954eaa0e6f430889c88e3 Mon Sep 17 00:00:00 2001
From: fabiodalez-dev <fabiodalezbackup@gmail.com>
Date: Thu, 25 Jun 2026 11:22:34 +0200
Subject: [PATCH 1/6] fix(mobile-api): align settings page chrome with the
 standard admin settings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Mobile API plugin settings page diverged from every other settings
page: a sticky header bar with an indigo→purple gradient icon box and
indigo/purple accents throughout, instead of the canonical admin chrome
(plain text-3xl heading + flat blue icon, blue accents, .btn-primary).

Now it matches /admin/settings and the sibling plugin settings pages
(api-book-scraper, discogs):
- header: drop the sticky bar + gradient icon, use the text-3xl heading
  with a flat fa-mobile-screen-button text-blue-600 icon and a
  .btn-secondary "Plugin" back link
- recolor every indigo-* accent to blue-* (tabs, toggle, info box,
  selects, focus rings)
- save button → .btn-primary; success/error banners → the canonical
  px-4 py-3 rounded-lg green/red style
---
 storage/plugins/mobile-api/views/settings.php | 76 ++++++++-----------
 1 file changed, 33 insertions(+), 43 deletions(-)

diff --git a/storage/plugins/mobile-api/views/settings.php b/storage/plugins/mobile-api/views/settings.php
index 90db7f0e..2c18bf68 100644
--- a/storage/plugins/mobile-api/views/settings.php
+++ b/storage/plugins/mobile-api/views/settings.php
@@ -84,47 +84,38 @@
 $tabDevicesUrl  = htmlspecialchars(url('/admin/plugins/' . $resolvedId . '/settings') . '?tab=devices', ENT_QUOTES, 'UTF-8');
 ?>
 
-<div class="flex-1 overflow-x-hidden">
+<div class="max-w-4xl mx-auto py-6 px-4">
 
-  <!-- Page Header -->
-  <div class="bg-white/50 backdrop-blur-sm border-b border-gray-200/80 dark:bg-gray-900/50 dark:border-gray-800/80 sticky top-0 z-30">
-    <div class="px-6 py-4">
-      <div class="flex items-center justify-between">
-        <div class="flex items-center space-x-3">
-          <div class="w-8 h-8 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-lg flex items-center justify-center">
-            <i class="fas fa-mobile-screen-button text-white text-sm"></i>
-          </div>
-          <div>
-            <h1 class="text-xl font-bold text-gray-900 dark:text-white">
-              <?= htmlspecialchars(__('Mobile API'), ENT_QUOTES, 'UTF-8') ?>
-            </h1>
-            <p class="text-sm text-gray-500 dark:text-gray-400">
-              <?= htmlspecialchars(__("Abilita l'accesso dell'app mobile a questa biblioteca tramite l'API REST /api/v1."), ENT_QUOTES, 'UTF-8') ?>
-            </p>
-          </div>
-        </div>
-        <a href="<?= $pluginsRoute ?>"
-           class="inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-700 text-white text-sm rounded-lg hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors">
-          <i class="fas fa-arrow-left mr-2"></i>
-          <?= htmlspecialchars(__('Plugin'), ENT_QUOTES, 'UTF-8') ?>
-        </a>
-      </div>
+  <!-- Header -->
+  <div class="mb-6 flex items-start justify-between gap-4">
+    <div>
+      <h1 class="text-3xl font-bold text-gray-900 flex items-center gap-3">
+        <i class="fas fa-mobile-screen-button text-blue-600"></i>
+        <?= htmlspecialchars(__('Mobile API'), ENT_QUOTES, 'UTF-8') ?>
+      </h1>
+      <p class="text-gray-600 mt-2">
+        <?= htmlspecialchars(__("Abilita l'accesso dell'app mobile a questa biblioteca tramite l'API REST /api/v1."), ENT_QUOTES, 'UTF-8') ?>
+      </p>
     </div>
+    <a href="<?= $pluginsRoute ?>" class="btn-secondary whitespace-nowrap">
+      <i class="fas fa-arrow-left mr-2"></i>
+      <?= htmlspecialchars(__('Plugin'), ENT_QUOTES, 'UTF-8') ?>
+    </a>
   </div>
 
-  <div class="p-6 space-y-6">
+  <div class="space-y-6">
 
     <?php if ($successMessage !== ''): ?>
-    <div role="status" aria-live="polite" class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-xl p-4 flex items-center gap-3">
-      <i class="fas fa-check-circle text-green-500" aria-hidden="true"></i>
-      <p class="text-sm text-green-700 dark:text-green-300"><?= htmlspecialchars($successMessage, ENT_QUOTES, 'UTF-8') ?></p>
+    <div role="status" aria-live="polite" class="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg flex items-center gap-2">
+      <i class="fas fa-check-circle" aria-hidden="true"></i>
+      <span class="text-sm"><?= htmlspecialchars($successMessage, ENT_QUOTES, 'UTF-8') ?></span>
     </div>
     <?php endif; ?>
 
     <?php if ($errorMessage !== ''): ?>
-    <div role="alert" aria-live="assertive" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-4 flex items-center gap-3">
-      <i class="fas fa-exclamation-circle text-red-500" aria-hidden="true"></i>
-      <p class="text-sm text-red-700 dark:text-red-300"><?= htmlspecialchars($errorMessage, ENT_QUOTES, 'UTF-8') ?></p>
+    <div role="alert" aria-live="assertive" class="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg flex items-center gap-2">
+      <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
+      <span class="text-sm"><?= htmlspecialchars($errorMessage, ENT_QUOTES, 'UTF-8') ?></span>
     </div>
     <?php endif; ?>
 
@@ -133,14 +124,14 @@ class="inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-700 text-whit
       <nav class="-mb-px flex space-x-6">
         <a href="<?= $tabSettingsUrl ?>"
            class="pb-3 text-sm font-medium border-b-2 transition-colors <?= $activeTab === 'settings'
-             ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400'
+             ? 'border-blue-500 text-blue-600 dark:text-blue-400'
              : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300' ?>">
           <i class="fas fa-sliders mr-1.5"></i>
           <?= htmlspecialchars(__('Impostazioni'), ENT_QUOTES, 'UTF-8') ?>
         </a>
         <a href="<?= $tabDevicesUrl ?>"
            class="pb-3 text-sm font-medium border-b-2 transition-colors <?= $activeTab === 'devices'
-             ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400'
+             ? 'border-blue-500 text-blue-600 dark:text-blue-400'
              : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300' ?>">
           <i class="fas fa-mobile-screen-button mr-1.5"></i>
           <?= htmlspecialchars(__('Dispositivi'), ENT_QUOTES, 'UTF-8') ?>
@@ -157,14 +148,14 @@ class="pb-3 text-sm font-medium border-b-2 transition-colors <?= $activeTab ===
       <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 mb-5">
         <div class="p-5 border-b border-gray-200 dark:border-gray-700">
           <h2 class="text-base font-semibold text-gray-900 dark:text-white flex items-center gap-2">
-            <i class="fas fa-toggle-on text-indigo-500"></i>
+            <i class="fas fa-toggle-on text-blue-500"></i>
             <?= htmlspecialchars(__('Accesso app mobile'), ENT_QUOTES, 'UTF-8') ?>
           </h2>
         </div>
         <div class="p-5">
           <label class="flex items-start gap-3 cursor-pointer">
             <input type="checkbox" name="enabled" value="1" <?= $isEnabled ? 'checked' : '' ?>
-                   class="mt-1 h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                   class="mt-1 h-5 w-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
             <span>
               <span class="block font-medium text-gray-900 dark:text-white">
                 <?= htmlspecialchars(__('Abilita accesso app mobile'), ENT_QUOTES, 'UTF-8') ?>
@@ -176,7 +167,7 @@ class="mt-1 h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-50
           </label>
 
           <?php if ($isEnabled): ?>
-          <div class="mt-4 p-3 bg-indigo-50 dark:bg-indigo-900/20 border border-indigo-200 dark:border-indigo-800 rounded-lg text-sm text-indigo-700 dark:text-indigo-300 flex items-center gap-2">
+          <div class="mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg text-sm text-blue-700 dark:text-blue-300 flex items-center gap-2">
             <i class="fas fa-info-circle"></i>
             <span>
               <?= htmlspecialchars(__('API attiva. Endpoint:'), ENT_QUOTES, 'UTF-8') ?>
@@ -193,7 +184,7 @@ class="underline">/api/v1/docs</a>
       <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 mb-5">
         <div class="p-5 border-b border-gray-200 dark:border-gray-700">
           <h2 class="text-base font-semibold text-gray-900 dark:text-white flex items-center gap-2">
-            <i class="fas fa-bell text-indigo-500"></i>
+            <i class="fas fa-bell text-blue-500"></i>
             <?= htmlspecialchars(__('Notifiche push'), ENT_QUOTES, 'UTF-8') ?>
           </h2>
           <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
@@ -206,7 +197,7 @@ class="underline">/api/v1/docs</a>
               <?= htmlspecialchars(__('Provider push'), ENT_QUOTES, 'UTF-8') ?>
             </label>
             <select id="push_provider" name="push_provider"
-                    class="block w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm focus:border-indigo-500 focus:ring-indigo-500">
+                    class="block w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm focus:border-blue-500 focus:ring-blue-500">
               <option value="unifiedpush" <?= $pushProvider === 'unifiedpush' ? 'selected' : '' ?>>
                 <?= htmlspecialchars(__('UnifiedPush (consigliato, nessuna credenziale centrale)'), ENT_QUOTES, 'UTF-8') ?>
               </option>
@@ -223,7 +214,7 @@ class="block w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray
             <input type="text" id="push_vapid_subject" name="push_vapid_subject"
                    value="<?= htmlspecialchars($vapidSubject, ENT_QUOTES, 'UTF-8') ?>"
                    placeholder="mailto:admin@example.org"
-                   class="block w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm focus:border-indigo-500 focus:ring-indigo-500">
+                   class="block w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm focus:border-blue-500 focus:ring-blue-500">
           </div>
 
           <div>
@@ -232,7 +223,7 @@ class="block w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray
             </label>
             <textarea id="push_fcm_credentials" name="push_fcm_credentials" rows="3"
                       placeholder='{"type":"service_account", ...}'
-                      class="block w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm font-mono focus:border-indigo-500 focus:ring-indigo-500"><?= htmlspecialchars($fcmCredentials, ENT_QUOTES, 'UTF-8') ?></textarea>
+                      class="block w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white text-sm font-mono focus:border-blue-500 focus:ring-blue-500"><?= htmlspecialchars($fcmCredentials, ENT_QUOTES, 'UTF-8') ?></textarea>
             <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
               <?= htmlspecialchars(__('Lascia vuoto per usare solo UnifiedPush / feed in-app.'), ENT_QUOTES, 'UTF-8') ?>
             </p>
@@ -246,9 +237,8 @@ class="block w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray
           <i class="fas fa-lock mr-1"></i>
           <?= htmlspecialchars(__("L'API richiede HTTPS (eccetto loopback in sviluppo)."), ENT_QUOTES, 'UTF-8') ?>
         </p>
-        <button type="submit" name="save_mobile_api_settings" value="1"
-                class="inline-flex items-center gap-2 px-5 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500">
-          <i class="fas fa-save"></i>
+        <button type="submit" name="save_mobile_api_settings" value="1" class="btn-primary">
+          <i class="fas fa-save mr-2"></i>
           <?= htmlspecialchars(__('Salva impostazioni'), ENT_QUOTES, 'UTF-8') ?>
         </button>
       </div>

From 02cd2dbf7de4ec92bdd6eb0d359ffbf366fb1294 Mon Sep 17 00:00:00 2001
From: fabiodalez-dev <fabiodalezbackup@gmail.com>
Date: Thu, 25 Jun 2026 12:54:01 +0200
Subject: [PATCH 2/6] fix(ui): homogeneous blue settings/plugin pages +
 mobile-flat readability
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Color homogeneity — every plugin page now uses the same blue accent as the
core admin chrome (was a mix of blue/purple/indigo):
- discogs + goodlib settings: purple/indigo accents -> blue
- archives, ncip-server, digital-library feature pages: purple/indigo -> blue
- Tailwind now scans storage/plugins/**/views so plugin classes (incl. the
  recolored ones) actually compile instead of relying on app-view overlap

Mobile readability — settings pages (app + plugin) go flat below 640px: no
card chrome, single ~16px gutter, no doubled padding. Implemented with
additive max-sm:! resets on card containers only (forms/inputs/alerts
untouched). The ! (important) is required because vendor.css (Bootstrap)
ships !important .bg-white/.border utilities that otherwise win.

Sitemap clarity (advanced tab): the public URL is now the obvious value to
submit to Google (Copy button + hint); the filesystem path is labelled
server-only. New strings added to all 4 locale files.

Rebuilt public/assets/main.css.
---
 app/Views/settings/advanced-tab.php           |  46 +-
 app/Views/settings/contacts-tab.php           |  10 +-
 app/Views/settings/index.php                  |  24 +-
 app/Views/settings/loans-tab.php              |   8 +-
 app/Views/settings/messages-tab.php           |   2 +-
 app/Views/settings/privacy-tab.php            |  10 +-
 frontend/tailwind.config.js                   |  11 +
 locale/de_DE.json                             |   4 +-
 locale/en_US.json                             |   4 +-
 locale/fr_FR.json                             |   4 +-
 locale/it_IT.json                             |   4 +-
 public/assets/main.css                        | 933 +++++++++++++++++-
 .../api-book-scraper/views/settings.php       |  10 +-
 .../archives/views/activities/form.php        |  20 +-
 .../archives/views/activities/index.php       |   4 +-
 .../archives/views/activities/show.php        |   4 +-
 .../archives/views/authorities/index.php      |   2 +-
 .../archives/views/authorities/show.php       |   4 +-
 storage/plugins/archives/views/index.php      |   2 +-
 .../plugins/archives/views/places/form.php    |  24 +-
 .../plugins/archives/views/places/index.php   |   2 +-
 .../plugins/archives/views/places/show.php    |   4 +-
 storage/plugins/archives/views/search.php     |   6 +-
 storage/plugins/archives/views/show.php       |   4 +-
 .../views/admin-form-fields.php               |  10 +-
 storage/plugins/discogs/views/settings.php    |  14 +-
 storage/plugins/goodlib/views/settings.php    |  10 +-
 storage/plugins/mobile-api/views/settings.php |  10 +-
 .../plugins/ncip-server/views/partners.php    |  14 +-
 .../ncip-server/views/transactions.php        |   2 +-
 30 files changed, 1032 insertions(+), 174 deletions(-)

diff --git a/app/Views/settings/advanced-tab.php b/app/Views/settings/advanced-tab.php
index 0f1ce511..e8567b9c 100644
--- a/app/Views/settings/advanced-tab.php
+++ b/app/Views/settings/advanced-tab.php
@@ -61,7 +61,7 @@
           </div>
         </div>
       </div>
-      <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-3">
+      <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-3 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
         <label for="custom_js_essential" class="block text-sm font-medium text-gray-700"><?= __("Codice JavaScript") ?></label>
         <textarea id="custom_js_essential"
                   name="custom_js_essential"
@@ -102,7 +102,7 @@ class="block w-full rounded-xl border-gray-300 focus:border-gray-500 focus:ring-
           </div>
         </div>
       </div>
-      <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-3">
+      <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-3 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
         <label for="custom_js_analytics" class="block text-sm font-medium text-gray-700"><?= __("Codice JavaScript") ?></label>
         <textarea id="custom_js_analytics"
                   name="custom_js_analytics"
@@ -148,7 +148,7 @@ class="block w-full rounded-xl border-gray-300 focus:border-gray-500 focus:ring-
           </div>
         </div>
       </div>
-      <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-3">
+      <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-3 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
         <label for="custom_js_marketing" class="block text-sm font-medium text-gray-700"><?= __("Codice JavaScript") ?></label>
         <textarea id="custom_js_marketing"
                   name="custom_js_marketing"
@@ -187,7 +187,7 @@ class="block w-full rounded-xl border-gray-300 focus:border-gray-500 focus:ring-
           </div>
         </div>
       </div>
-      <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-3">
+      <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-3 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
         <label for="custom_header_css" class="block text-sm font-medium text-gray-700"><?= __("Codice CSS") ?></label>
         <textarea id="custom_header_css"
                   name="custom_header_css"
@@ -228,7 +228,7 @@ class="block w-full rounded-xl border-gray-300 focus:border-gray-500 focus:ring-
           </div>
         </div>
       </div>
-      <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4">
+      <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
         <div>
           <label class="inline-flex items-center gap-3 cursor-pointer">
             <input type="checkbox"
@@ -287,7 +287,7 @@ class="w-5 h-5 text-gray-900 border-gray-300 rounded focus:ring-gray-500">
           </div>
         </div>
       </div>
-      <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4">
+      <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
         <div>
           <label class="inline-flex items-center gap-3 cursor-pointer">
             <input type="checkbox"
@@ -322,7 +322,7 @@ class="w-5 h-5 text-gray-900 border-gray-300 rounded focus:ring-gray-500">
           </div>
         </div>
       </div>
-      <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4">
+      <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
         <div>
           <label for="days_before_expiry_warning" class="block text-sm font-medium text-gray-700 mb-2">
             <?= __("Giorni di preavviso per scadenza prestito") ?>
@@ -369,7 +369,7 @@ class="block w-32 rounded-xl border-gray-300 focus:border-gray-500 focus:ring-gr
           </div>
         </div>
       </div>
-      <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4">
+      <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
         <div>
           <label for="session_lifetime" class="block text-sm font-medium text-gray-700 mb-2"><?= __("Durata sessione") ?></label>
           <select id="session_lifetime"
@@ -407,7 +407,7 @@ class="block w-full rounded-xl border-gray-300 focus:border-gray-500 focus:ring-
           </div>
         </div>
       </div>
-      <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4">
+      <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
         <div class="flex items-center justify-between">
           <div>
             <span id="llms_txt_enabled_label" class="text-sm font-semibold text-gray-900"><?= __("Abilita llms.txt") ?></span>
@@ -476,7 +476,7 @@ class="toggle-checkbox sr-only">
           </div>
         </div>
       </div>
-      <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4">
+      <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
         <div class="flex items-center justify-between">
           <div>
             <span class="text-sm font-semibold text-gray-900"><?= __("Abilita Modalità Catalogo") ?></span>
@@ -548,7 +548,7 @@ class="toggle-checkbox sr-only">
   ?>
 
   <!-- <?= __("Sitemap XML") ?> Section -->
-  <div class="bg-white border border-gray-200 rounded-2xl overflow-hidden mt-6">
+  <div class="bg-white border border-gray-200 rounded-2xl overflow-hidden mt-6 max-sm:!bg-transparent max-sm:!rounded-none max-sm:!shadow-none max-sm:!border-0">
     <div class="border-b border-gray-200 px-6 py-4">
       <div class="flex items-center gap-3">
         <span class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-gray-100">
@@ -560,21 +560,31 @@ class="toggle-checkbox sr-only">
         </div>
       </div>
     </div>
-    <div class="p-6 space-y-6">
+    <div class="p-6 space-y-6 max-sm:!p-0">
       <!-- Sitemap Info -->
       <div class="space-y-3">
         <div class="flex items-start gap-2 text-sm">
           <i class="fas fa-link text-gray-400 mt-0.5"></i>
-          <div>
+          <div class="min-w-0">
             <span class="text-gray-600"><?= __("URL pubblico:") ?></span>
-            <a href="<?php echo HtmlHelper::e($publicSitemapUrl); ?>" class="text-gray-900 hover:text-black underline ml-2" target="_blank" rel="noopener noreferrer"><?php echo HtmlHelper::e($publicSitemapUrl); ?></a>
+            <a href="<?php echo HtmlHelper::e($publicSitemapUrl); ?>" class="text-gray-900 hover:text-black underline ml-2 break-all" target="_blank" rel="noopener noreferrer"><?php echo HtmlHelper::e($publicSitemapUrl); ?></a>
+            <button type="button"
+                    onclick="copyToClipboard(<?php echo htmlspecialchars(json_encode($publicSitemapUrl, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT), ENT_QUOTES, 'UTF-8'); ?>, this)"
+                    class="inline-flex items-center gap-1 ml-2 px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 text-gray-700 rounded transition-colors">
+              <i class="fas fa-copy"></i> <?= __("Copia") ?>
+            </button>
+            <p class="mt-1 flex items-start gap-1.5 text-xs text-green-700">
+              <i class="fas fa-arrow-right mt-0.5" aria-hidden="true"></i>
+              <span><?= __("Invia questo URL a Google Search Console.") ?></span>
+            </p>
           </div>
         </div>
         <div class="flex items-start gap-2 text-sm">
           <i class="fas fa-file-code text-gray-400 mt-0.5"></i>
-          <div>
+          <div class="min-w-0">
             <span class="text-gray-600"><?= __("Percorso file:") ?></span>
-            <code class="bg-gray-100 px-2 py-1 rounded text-xs ml-2"><?php echo HtmlHelper::e($filesystemPath); ?></code>
+            <code class="bg-gray-100 px-2 py-1 rounded text-xs ml-2 break-all"><?php echo HtmlHelper::e($filesystemPath); ?></code>
+            <p class="mt-1 text-xs text-gray-500"><?= __("Percorso sul server (per cron/CLI) — non inviarlo a Google.") ?></p>
           </div>
         </div>
         <div class="flex items-start gap-2 text-sm">
@@ -681,7 +691,7 @@ class="inline-flex items-center gap-2 px-5 py-3 rounded-xl bg-gray-900 text-whit
     $apiEndpoint = \App\Controllers\SeoController::resolveBaseUrl() . '/api/public/books/search';
   ?>
 
-  <div class="bg-white border border-gray-200 rounded-2xl overflow-hidden mt-6">
+  <div class="bg-white border border-gray-200 rounded-2xl overflow-hidden mt-6 max-sm:!bg-transparent max-sm:!rounded-none max-sm:!shadow-none max-sm:!border-0">
     <div class="border-b border-gray-200 px-6 py-4 cursor-pointer hover:bg-gray-50 transition-colors" onclick="toggleApiSection()">
       <div class="flex items-center justify-between">
         <div class="flex items-center gap-3">
@@ -697,7 +707,7 @@ class="inline-flex items-center gap-2 px-5 py-3 rounded-xl bg-gray-900 text-whit
       </div>
     </div>
 
-    <div id="api-section-content" class="p-6 space-y-6">
+    <div id="api-section-content" class="p-6 space-y-6 max-sm:!p-0">
       <!-- Enable/Disable API -->
       <form action="<?= htmlspecialchars(url('/admin/settings/api/toggle'), ENT_QUOTES, 'UTF-8') ?>" method="post" id="api-toggle-form">
         <input type="hidden" name="csrf_token" value="<?php echo HtmlHelper::e($csrfToken); ?>">
diff --git a/app/Views/settings/contacts-tab.php b/app/Views/settings/contacts-tab.php
index 86f7b797..81849558 100644
--- a/app/Views/settings/contacts-tab.php
+++ b/app/Views/settings/contacts-tab.php
@@ -17,7 +17,7 @@
         </h2>
         <p class="text-sm text-gray-600"><?= __("Personalizza il titolo e il testo introduttivo della pagina contatti") ?></p>
       </div>
-      <div class="bg-gray-50 border border-gray-200 rounded-2xl p-5 space-y-5">
+      <div class="bg-gray-50 border border-gray-200 rounded-2xl p-5 space-y-5 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
         <div>
           <label for="page_title" class="block text-sm font-medium text-gray-700"><?= __("Titolo pagina") ?></label>
           <input type="text"
@@ -47,7 +47,7 @@ class="mt-1 block w-full rounded-xl border-gray-300 focus:border-gray-500 focus:
         </h2>
         <p class="text-sm text-gray-600"><?= __("Email e telefono visibili sulla pagina contatti") ?></p>
       </div>
-      <div class="bg-gray-50 border border-gray-200 rounded-2xl p-5 space-y-5">
+      <div class="bg-gray-50 border border-gray-200 rounded-2xl p-5 space-y-5 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
         <div>
           <label for="contact_email" class="block text-sm font-medium text-gray-700"><?= __("Email di contatto") ?></label>
           <input type="email"
@@ -94,7 +94,7 @@ class="mt-1 block w-full rounded-xl border-gray-300 focus:border-gray-500 focus:
           <strong><?= __("⚠️ Privacy: Le mappe esterne vengono caricate solo se l'utente accetta i cookie Analytics.") ?></strong>
         </p>
       </div>
-      <div class="bg-gray-50 border border-gray-200 rounded-2xl p-5">
+      <div class="bg-gray-50 border border-gray-200 rounded-2xl p-5 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
         <label for="google_maps_embed" class="block text-sm font-medium text-gray-700"><?= __("Codice embed completo") ?></label>
         <textarea id="google_maps_embed"
                   name="google_maps_embed"
@@ -120,7 +120,7 @@ class="mt-1 block w-full rounded-xl border-gray-300 focus:border-gray-500 focus:
         </h2>
         <p class="text-sm text-gray-600"><?= __("Protezione anti-spam per il form contatti") ?></p>
       </div>
-      <div class="bg-gray-50 border border-gray-200 rounded-2xl p-5 space-y-5">
+      <div class="bg-gray-50 border border-gray-200 rounded-2xl p-5 space-y-5 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
         <div>
           <label for="recaptcha_site_key" class="block text-sm font-medium text-gray-700"><?= __("Site Key") ?></label>
           <input type="text"
@@ -155,7 +155,7 @@ class="mt-1 block w-full rounded-xl border-gray-300 focus:border-gray-500 focus:
         </h2>
         <p class="text-sm text-gray-600"><?= __("Testo della checkbox privacy nel form") ?></p>
       </div>
-      <div class="bg-gray-50 border border-gray-200 rounded-2xl p-5">
+      <div class="bg-gray-50 border border-gray-200 rounded-2xl p-5 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
         <label for="privacy_text" class="block text-sm font-medium text-gray-700"><?= __("Testo checkbox") ?></label>
         <textarea id="privacy_text"
                   name="privacy_text"
diff --git a/app/Views/settings/index.php b/app/Views/settings/index.php
index 54a45d29..542b2986 100644
--- a/app/Views/settings/index.php
+++ b/app/Views/settings/index.php
@@ -6,7 +6,7 @@
 $csrfToken = Csrf::ensureToken();
 $activeTab = $activeTab ?? 'general';
 ?>
-<div class="max-w-7xl mx-auto py-6 px-4">
+<div class="max-w-7xl mx-auto py-6 px-4 max-sm:!py-3">
   <div class="mb-8">
     <h1 class="text-3xl font-bold text-gray-900 flex items-center gap-3">
       <span class="inline-flex items-center justify-center w-12 h-12 rounded-2xl bg-gray-100 text-gray-700">
@@ -19,7 +19,7 @@
     </p>
   </div>
 
-  <div class="bg-white rounded-3xl shadow-xl border border-gray-200">
+  <div class="bg-white rounded-3xl shadow-xl border border-gray-200 max-sm:!bg-transparent max-sm:!rounded-none max-sm:!shadow-none max-sm:!border-0">
     <div class="border-b border-gray-200 px-6 py-4 flex flex-wrap gap-3">
       <button type="button" data-settings-tab="general" class="settings-tab <?php echo $activeTab === 'general' ? 'settings-tab-active' : ''; ?>">
         <i class="fas fa-building text-sm mr-2"></i>
@@ -67,7 +67,7 @@
       </button>
     </div>
 
-    <div class="p-6">
+    <div class="p-6 max-sm:!p-0">
       <!-- General Settings -->
       <section data-settings-panel="general" class="settings-panel <?php echo $activeTab === 'general' ? 'block' : 'hidden'; ?>">
         <form action="<?= htmlspecialchars(url('/admin/settings/general'), ENT_QUOTES, 'UTF-8') ?>" method="post" enctype="multipart/form-data" class="space-y-8">
@@ -80,7 +80,7 @@
               </h2>
               <p class="text-sm text-gray-600"><?= __("Imposta il nome mostrato nel backend e il logo utilizzato nel layout.") ?></p>
             </div>
-            <div class="bg-gray-50 border border-gray-200 rounded-2xl p-5 space-y-5">
+            <div class="bg-gray-50 border border-gray-200 rounded-2xl p-5 space-y-5 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
               <div>
                 <label for="app_name" class="block text-sm font-medium text-gray-700"><?= __("Nome applicazione") ?></label>
                 <input type="text"
@@ -138,7 +138,7 @@ class="h-16 object-contain <?php echo $currentLogo === '' ? 'hidden' : ''; ?>">
               </h2>
               <p class="text-sm text-gray-600"><?= __("Personalizza il testo descrittivo e i link ai social media nel footer del sito") ?></p>
             </div>
-            <div class="bg-gray-50 border border-gray-200 rounded-2xl p-5 space-y-5">
+            <div class="bg-gray-50 border border-gray-200 rounded-2xl p-5 space-y-5 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
               <div>
                 <label for="footer_description" class="block text-sm font-medium text-gray-700"><?= __("Descrizione footer") ?></label>
                 <textarea
@@ -241,7 +241,7 @@ class="block w-full rounded-lg border-gray-300 focus:border-gray-500 focus:ring-
               <p class="text-sm text-gray-600"><?= __("Scegli come inviare le email dal sistema. Puoi usare la funzione PHP <code class=\"text-xs bg-gray-100 px-1 py-0.5 rounded\">mail()</code>, PHPMailer o un server SMTP esterno.") ?></p>
             </div>
 
-            <div class="bg-gray-50 border border-gray-200 rounded-2xl p-5 space-y-5">
+            <div class="bg-gray-50 border border-gray-200 rounded-2xl p-5 space-y-5 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
               <div>
                 <label for="mail_driver" class="block text-sm font-medium text-gray-700"><?= __("Metodo di invio") ?></label>
                 <select id="mail_driver" name="mail_driver" class="mt-1 block w-full rounded-xl border-gray-300 focus:border-gray-500 focus:ring-gray-500 text-sm py-3 px-4">
@@ -265,7 +265,7 @@ class="block w-full rounded-lg border-gray-300 focus:border-gray-500 focus:ring-
             </div>
           </div>
 
-          <div id="smtp-settings-card" class="border border-gray-200 rounded-2xl p-5 bg-white">
+          <div id="smtp-settings-card" class="border border-gray-200 rounded-2xl p-5 bg-white max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
             <div class="flex items-center justify-between mb-4">
               <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wide"><?= __("Server SMTP") ?></h3>
               <span class="text-xs text-gray-500"><?= __("Disponibile solo con driver SMTP") ?></span>
@@ -393,7 +393,7 @@ class="block w-full rounded-lg border-gray-300 focus:border-gray-500 focus:ring-
           </div>
 
           <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div class="bg-gray-50 border border-gray-200 rounded-2xl p-6 hover:border-gray-300 transition-colors">
+            <div class="bg-gray-50 border border-gray-200 rounded-2xl p-6 hover:border-gray-300 transition-colors max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
               <div class="flex items-start justify-between gap-4">
                 <div class="flex-1">
                   <div class="flex items-center gap-3 mb-2">
@@ -417,7 +417,7 @@ class="block w-full rounded-lg border-gray-300 focus:border-gray-500 focus:ring-
               </div>
             </div>
 
-            <div class="bg-gray-50 border border-gray-200 rounded-2xl p-6 hover:border-gray-300 transition-colors">
+            <div class="bg-gray-50 border border-gray-200 rounded-2xl p-6 hover:border-gray-300 transition-colors max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
               <div class="flex items-start justify-between gap-4">
                 <div class="flex-1">
                   <div class="flex items-center gap-3 mb-2">
@@ -441,7 +441,7 @@ class="block w-full rounded-lg border-gray-300 focus:border-gray-500 focus:ring-
               </div>
             </div>
 
-            <div class="bg-gray-50 border border-gray-200 rounded-2xl p-6 hover:border-gray-300 transition-colors">
+            <div class="bg-gray-50 border border-gray-200 rounded-2xl p-6 hover:border-gray-300 transition-colors max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
               <div class="flex items-start justify-between gap-4">
                 <div class="flex-1">
                   <div class="flex items-center gap-3 mb-2">
@@ -553,7 +553,7 @@ class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-gray-900 text-whit
               </p>
             </div>
 
-            <div class="bg-gray-50 border border-gray-200 rounded-2xl p-5 space-y-5">
+            <div class="bg-gray-50 border border-gray-200 rounded-2xl p-5 space-y-5 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
               <div>
                 <label for="label_format" class="block text-sm font-medium text-gray-700 mb-3">
                   <?= __("Formato Etichetta") ?>
@@ -643,7 +643,7 @@ class="mt-1 w-4 h-4 aspect-square flex-shrink-0 text-gray-900 focus:ring-gray-50
               </div>
             </div>
 
-            <div class="bg-gray-50 border border-gray-200 rounded-2xl p-5 space-y-4">
+            <div class="bg-gray-50 border border-gray-200 rounded-2xl p-5 space-y-4 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
               <?php
               $enabledProviders = array_filter(array_map('trim', explode(',', (string) \App\Support\ConfigStore::get('sharing.enabled_providers', ''))));
               $allProviders = \App\Support\SharingProviders::all();
diff --git a/app/Views/settings/loans-tab.php b/app/Views/settings/loans-tab.php
index 00678132..ea4bbe64 100644
--- a/app/Views/settings/loans-tab.php
+++ b/app/Views/settings/loans-tab.php
@@ -24,7 +24,7 @@
           </div>
         </div>
       </div>
-      <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4">
+      <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
         <div>
           <label for="loan_duration_days" class="block text-sm font-medium text-gray-700 mb-2">
             <?= __("Durata predefinita prestito (giorni)") ?>
@@ -56,7 +56,7 @@ class="block w-32 rounded-xl border-gray-300 focus:border-gray-500 focus:ring-gr
         </h2>
         <p class="text-sm text-gray-600"><?= __("Numero di giorni che l'utente ha a disposizione per ritirare un prestito approvato prima che scada automaticamente.") ?></p>
       </div>
-      <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4">
+      <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
         <div>
           <label for="pickup_expiry_days" class="block text-sm font-medium text-gray-700 mb-2">
             <?= __("Giorni per il ritiro del prestito approvato") ?>
@@ -88,7 +88,7 @@ class="block w-32 rounded-xl border-gray-300 focus:border-gray-500 focus:ring-gr
         </h2>
         <p class="text-sm text-gray-600"><?= __("Numero massimo di volte che un utente può rinnovare lo stesso prestito.") ?></p>
       </div>
-      <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4">
+      <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
         <div>
           <label for="max_renewals" class="block text-sm font-medium text-gray-700 mb-2">
             <?= __("Numero massimo di rinnovi per prestito") ?>
@@ -128,7 +128,7 @@ class="block w-32 rounded-xl border-gray-300 focus:border-gray-500 focus:ring-gr
           </div>
         </div>
       </div>
-      <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4">
+      <div class="bg-white border border-gray-200 rounded-2xl p-5 space-y-4 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
         <div>
           <label for="max_active_loans_per_user" class="block text-sm font-medium text-gray-700 mb-2">
             <?= __("Numero massimo di prestiti attivi per utente") ?>
diff --git a/app/Views/settings/messages-tab.php b/app/Views/settings/messages-tab.php
index 1ab3d7e2..69445fe4 100644
--- a/app/Views/settings/messages-tab.php
+++ b/app/Views/settings/messages-tab.php
@@ -21,7 +21,7 @@
     </div>
 
     <!-- Messages Table -->
-    <div class="bg-white border border-gray-200 rounded-2xl overflow-hidden">
+    <div class="bg-white border border-gray-200 rounded-2xl overflow-hidden max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
       <div class="overflow-x-auto">
         <table class="w-full">
           <thead class="bg-gray-50 border-b border-gray-200">
diff --git a/app/Views/settings/privacy-tab.php b/app/Views/settings/privacy-tab.php
index d0be48d6..318fa7fd 100644
--- a/app/Views/settings/privacy-tab.php
+++ b/app/Views/settings/privacy-tab.php
@@ -17,7 +17,7 @@
         </h2>
         <p class="text-sm text-gray-600"><?= __("Personalizza il titolo e il contenuto della pagina privacy policy") ?></p>
       </div>
-      <div class="bg-gray-50 border border-gray-200 rounded-2xl p-3 md:p-5 space-y-4 md:space-y-5">
+      <div class="bg-gray-50 border border-gray-200 rounded-2xl p-3 md:p-5 space-y-4 md:space-y-5 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
         <div>
           <label for="privacy_page_title" class="block text-sm font-medium text-gray-700"><?= __("Titolo pagina") ?></label>
           <input type="text"
@@ -47,7 +47,7 @@ class="mt-1 block w-full rounded-xl border-gray-300 focus:border-gray-500 focus:
         </h2>
         <p class="text-sm text-gray-600"><?= __("Contenuto della pagina /cookies accessibile dal banner") ?></p>
       </div>
-      <div class="bg-gray-50 border border-gray-200 rounded-2xl p-3 md:p-5 space-y-4 md:space-y-5">
+      <div class="bg-gray-50 border border-gray-200 rounded-2xl p-3 md:p-5 space-y-4 md:space-y-5 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
         <div>
           <label for="cookie_policy_content" class="block text-sm font-medium text-gray-700"><?= __("Contenuto Cookie Policy") ?></label>
           <textarea id="cookie_policy_content"
@@ -68,7 +68,7 @@ class="mt-1 block w-full rounded-xl border-gray-300 focus:border-gray-500 focus:
         </h2>
         <p class="text-sm text-gray-600"><?= __("Configurazione del banner cookie") ?></p>
       </div>
-      <div class="bg-gray-50 border border-gray-200 rounded-2xl p-3 md:p-5 space-y-4 md:space-y-5">
+      <div class="bg-gray-50 border border-gray-200 rounded-2xl p-3 md:p-5 space-y-4 md:space-y-5 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
         <div class="flex items-center justify-between">
           <label for="cookie_banner_enabled" class="text-sm font-medium text-gray-700"><?= __("Abilita Cookie Banner") ?></label>
           <label class="relative inline-flex items-center cursor-pointer">
@@ -150,7 +150,7 @@ class="mt-1 block w-full rounded-xl border-gray-300 focus:border-gray-500 focus:
         </h2>
         <p class="text-sm text-gray-600"><?= __("Gestisci la visibilità delle categorie di cookie nel banner. I cookie essenziali sono sempre visibili e obbligatori.") ?></p>
       </div>
-      <div class="bg-gray-50 border border-gray-200 rounded-2xl p-3 md:p-5 space-y-4 md:space-y-5">
+      <div class="bg-gray-50 border border-gray-200 rounded-2xl p-3 md:p-5 space-y-4 md:space-y-5 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
         <div class="flex items-center justify-between p-4 bg-white border border-gray-200 rounded-xl">
           <div class="flex-1">
             <label for="show_analytics" class="text-sm font-medium text-gray-900 cursor-pointer flex items-center gap-2">
@@ -226,7 +226,7 @@ class="toggle-checkbox sr-only">
           <?= __("Personalizza i testi mostrati sia nel banner iniziale che nel pannello delle preferenze.") ?>
         </p>
       </div>
-      <div class="bg-gray-50 border border-gray-200 rounded-3xl p-3 md:p-5">
+      <div class="bg-gray-50 border border-gray-200 rounded-3xl p-3 md:p-5 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
         <form action="<?= htmlspecialchars(url('/admin/settings/cookie-banner'), ENT_QUOTES, 'UTF-8') ?>" method="post" class="space-y-6">
           <input type="hidden" name="csrf_token" value="<?php echo HtmlHelper::e($csrfToken); ?>">
 
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index ba0553be..1e1cfbd6 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -4,6 +4,7 @@ const path = require('path');
 module.exports = {
   content: [
     path.join(__dirname, '../app/Views/**/*.php'),  // Absolute path for correct resolution
+    path.join(__dirname, '../storage/plugins/**/views/**/*.php'), // plugin UIs (settings + feature pages)
     path.join(__dirname, '../public/**/*.html')
   ],
   // Safelist classes that are dynamically used or defined in @layer utilities
@@ -11,6 +12,16 @@ module.exports = {
     'aspect-book',
     'aspect-video-custom',
     'aspect-square-custom',
+    // Mobile-flat resets for settings pages. Plugin views (storage/plugins/**)
+    // are NOT in `content` above, so the max-sm: classes they use would never be
+    // generated — safelist guarantees they exist in the compiled CSS.
+    'max-sm:!bg-transparent',
+    'max-sm:!border-0',
+    'max-sm:!rounded-none',
+    'max-sm:!shadow-none',
+    'max-sm:!p-0',
+    'max-sm:!px-0',
+    'max-sm:!py-3',
   ],
   darkMode: 'class',
   theme: {
diff --git a/locale/de_DE.json b/locale/de_DE.json
index 9b960d7c..c17c7fdb 100644
--- a/locale/de_DE.json
+++ b/locale/de_DE.json
@@ -5413,5 +5413,7 @@
   "Impossibile recuperare lo stato del servizio.": "Dienststatus konnte nicht abgerufen werden.",
   "Il file caricato supera il limite di caricamento del server (post_max_size = %s). Aumenta post_max_size e upload_max_filesize nella configurazione PHP del server e riprova. Su hosting con php-fpm o CGI le direttive php_value in .htaccess vengono ignorate: modifica php.ini o la configurazione del pool php-fpm.": "Die hochgeladene Datei überschreitet das Upload-Limit des Servers (post_max_size = %s). Erhöhen Sie post_max_size und upload_max_filesize in der PHP-Konfiguration des Servers und versuchen Sie es erneut. Bei php-fpm- oder CGI-Hosting werden php_value-Direktiven in der .htaccess ignoriert: Bearbeiten Sie php.ini oder die php-fpm-Pool-Konfiguration.",
   "Il file caricato supera il limite di upload del server (upload_max_filesize = %s). Aumenta upload_max_filesize e post_max_size nella configurazione PHP del server e riprova. Su hosting con php-fpm o CGI le direttive php_value in .htaccess vengono ignorate: modifica php.ini o la configurazione del pool php-fpm.": "Die hochgeladene Datei überschreitet das Upload-Limit des Servers (upload_max_filesize = %s). Erhöhen Sie upload_max_filesize und post_max_size in der PHP-Konfiguration des Servers und versuchen Sie es erneut. Bei php-fpm- oder CGI-Hosting werden php_value-Direktiven in der .htaccess ignoriert: Bearbeiten Sie php.ini oder die php-fpm-Pool-Konfiguration.",
-  "Digita almeno 2 lettere per cercare o creare": "Mindestens 2 Buchstaben eingeben, um zu suchen oder zu erstellen"
+  "Digita almeno 2 lettere per cercare o creare": "Mindestens 2 Buchstaben eingeben, um zu suchen oder zu erstellen",
+  "Invia questo URL a Google Search Console.": "Senden Sie diese URL an die Google Search Console.",
+  "Percorso sul server (per cron/CLI) — non inviarlo a Google.": "Pfad auf dem Server (für Cron/CLI) — nicht an Google senden."
 }
diff --git a/locale/en_US.json b/locale/en_US.json
index faec1085..554e5350 100644
--- a/locale/en_US.json
+++ b/locale/en_US.json
@@ -5413,5 +5413,7 @@
   "Impossibile recuperare lo stato del servizio.": "Could not retrieve the service status.",
   "Il file caricato supera il limite di caricamento del server (post_max_size = %s). Aumenta post_max_size e upload_max_filesize nella configurazione PHP del server e riprova. Su hosting con php-fpm o CGI le direttive php_value in .htaccess vengono ignorate: modifica php.ini o la configurazione del pool php-fpm.": "The uploaded file exceeds the server upload limit (post_max_size = %s). Increase post_max_size and upload_max_filesize in the server's PHP configuration and try again. On php-fpm or CGI hosting, php_value directives in .htaccess are ignored: edit php.ini or the php-fpm pool configuration.",
   "Il file caricato supera il limite di upload del server (upload_max_filesize = %s). Aumenta upload_max_filesize e post_max_size nella configurazione PHP del server e riprova. Su hosting con php-fpm o CGI le direttive php_value in .htaccess vengono ignorate: modifica php.ini o la configurazione del pool php-fpm.": "The uploaded file exceeds the server upload limit (upload_max_filesize = %s). Increase upload_max_filesize and post_max_size in the server's PHP configuration and try again. On php-fpm or CGI hosting, php_value directives in .htaccess are ignored: edit php.ini or the php-fpm pool configuration.",
-  "Digita almeno 2 lettere per cercare o creare": "Type at least 2 letters to search or create"
+  "Digita almeno 2 lettere per cercare o creare": "Type at least 2 letters to search or create",
+  "Invia questo URL a Google Search Console.": "Submit this URL to Google Search Console.",
+  "Percorso sul server (per cron/CLI) — non inviarlo a Google.": "Server path (for cron/CLI) — do not submit it to Google."
 }
diff --git a/locale/fr_FR.json b/locale/fr_FR.json
index ab51c949..e4b2054e 100644
--- a/locale/fr_FR.json
+++ b/locale/fr_FR.json
@@ -5413,5 +5413,7 @@
   "Impossibile recuperare lo stato del servizio.": "Impossible de récupérer l'état du service.",
   "Il file caricato supera il limite di caricamento del server (post_max_size = %s). Aumenta post_max_size e upload_max_filesize nella configurazione PHP del server e riprova. Su hosting con php-fpm o CGI le direttive php_value in .htaccess vengono ignorate: modifica php.ini o la configurazione del pool php-fpm.": "Le fichier envoyé dépasse la limite de téléversement du serveur (post_max_size = %s). Augmentez post_max_size et upload_max_filesize dans la configuration PHP du serveur, puis réessayez. Sur un hébergement php-fpm ou CGI, les directives php_value du fichier .htaccess sont ignorées : modifiez php.ini ou la configuration du pool php-fpm.",
   "Il file caricato supera il limite di upload del server (upload_max_filesize = %s). Aumenta upload_max_filesize e post_max_size nella configurazione PHP del server e riprova. Su hosting con php-fpm o CGI le direttive php_value in .htaccess vengono ignorate: modifica php.ini o la configurazione del pool php-fpm.": "Le fichier envoyé dépasse la limite de téléversement du serveur (upload_max_filesize = %s). Augmentez upload_max_filesize et post_max_size dans la configuration PHP du serveur, puis réessayez. Sur un hébergement php-fpm ou CGI, les directives php_value du fichier .htaccess sont ignorées : modifiez php.ini ou la configuration du pool php-fpm.",
-  "Digita almeno 2 lettere per cercare o creare": "Tapez au moins 2 lettres pour rechercher ou créer"
+  "Digita almeno 2 lettere per cercare o creare": "Tapez au moins 2 lettres pour rechercher ou créer",
+  "Invia questo URL a Google Search Console.": "Envoyez cette URL à la Google Search Console.",
+  "Percorso sul server (per cron/CLI) — non inviarlo a Google.": "Chemin sur le serveur (pour cron/CLI) — ne l'envoyez pas à Google."
 }
diff --git a/locale/it_IT.json b/locale/it_IT.json
index 1ca51de9..2be76472 100644
--- a/locale/it_IT.json
+++ b/locale/it_IT.json
@@ -5413,5 +5413,7 @@
   "Impossibile recuperare lo stato del servizio.": "Impossibile recuperare lo stato del servizio.",
   "Il file caricato supera il limite di caricamento del server (post_max_size = %s). Aumenta post_max_size e upload_max_filesize nella configurazione PHP del server e riprova. Su hosting con php-fpm o CGI le direttive php_value in .htaccess vengono ignorate: modifica php.ini o la configurazione del pool php-fpm.": "Il file caricato supera il limite di caricamento del server (post_max_size = %s). Aumenta post_max_size e upload_max_filesize nella configurazione PHP del server e riprova. Su hosting con php-fpm o CGI le direttive php_value in .htaccess vengono ignorate: modifica php.ini o la configurazione del pool php-fpm.",
   "Il file caricato supera il limite di upload del server (upload_max_filesize = %s). Aumenta upload_max_filesize e post_max_size nella configurazione PHP del server e riprova. Su hosting con php-fpm o CGI le direttive php_value in .htaccess vengono ignorate: modifica php.ini o la configurazione del pool php-fpm.": "Il file caricato supera il limite di upload del server (upload_max_filesize = %s). Aumenta upload_max_filesize e post_max_size nella configurazione PHP del server e riprova. Su hosting con php-fpm o CGI le direttive php_value in .htaccess vengono ignorate: modifica php.ini o la configurazione del pool php-fpm.",
-  "Digita almeno 2 lettere per cercare o creare": "Digita almeno 2 lettere per cercare o creare"
+  "Digita almeno 2 lettere per cercare o creare": "Digita almeno 2 lettere per cercare o creare",
+  "Invia questo URL a Google Search Console.": "Invia questo URL a Google Search Console.",
+  "Percorso sul server (per cron/CLI) — non inviarlo a Google.": "Percorso sul server (per cron/CLI) — non inviarlo a Google."
 }
diff --git a/public/assets/main.css b/public/assets/main.css
index 979cb149..6144e611 100644
--- a/public/assets/main.css
+++ b/public/assets/main.css
@@ -3758,6 +3758,15 @@ select {
   --tw-text-opacity: 1;
   color: rgb(153 27 27 / var(--tw-text-opacity, 1));
 }
+.alert-warning {
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
+  --tw-text-opacity: 1;
+  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
+}
 .alert-info {
   border-width: 1px;
   --tw-border-opacity: 1;
@@ -3914,6 +3923,10 @@ select {
   margin-left: auto;
   margin-right: auto;
 }
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -3922,6 +3935,12 @@ select {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+.-mb-px {
+  margin-bottom: -1px;
+}
+.-mt-0\.5 {
+  margin-top: -0.125rem;
+}
 .-mt-2 {
   margin-top: -0.5rem;
 }
@@ -3970,6 +3989,9 @@ select {
 .ml-1 {
   margin-left: 0.25rem;
 }
+.ml-1\.5 {
+  margin-left: 0.375rem;
+}
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -4000,6 +4022,9 @@ select {
 .mr-2 {
   margin-right: 0.5rem;
 }
+.mr-2\.5 {
+  margin-right: 0.625rem;
+}
 .mr-3 {
   margin-right: 0.75rem;
 }
@@ -4087,6 +4112,9 @@ select {
 .contents {
   display: contents;
 }
+.\!hidden {
+  display: none !important;
+}
 .hidden {
   display: none;
 }
@@ -4129,6 +4157,9 @@ select {
 .h-3 {
   height: 0.75rem;
 }
+.h-36 {
+  height: 9rem;
+}
 .h-4 {
   height: 1rem;
 }
@@ -4180,6 +4211,9 @@ select {
 .max-h-48 {
   max-height: 12rem;
 }
+.max-h-60 {
+  max-height: 15rem;
+}
 .max-h-64 {
   max-height: 16rem;
 }
@@ -4285,6 +4319,9 @@ select {
 .min-w-0 {
   min-width: 0px;
 }
+.min-w-\[150px\] {
+  min-width: 150px;
+}
 .min-w-\[200px\] {
   min-width: 200px;
 }
@@ -4303,6 +4340,9 @@ select {
 .max-w-5xl {
   max-width: 64rem;
 }
+.max-w-6xl {
+  max-width: 72rem;
+}
 .max-w-7xl {
   max-width: 80rem;
 }
@@ -4345,6 +4385,9 @@ select {
 .flex-shrink-0 {
   flex-shrink: 0;
 }
+.shrink-0 {
+  flex-shrink: 0;
+}
 .-translate-x-1\/2 {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -4381,6 +4424,9 @@ select {
 .animate-pulse {
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
+.cursor-default {
+  cursor: default;
+}
 .cursor-help {
   cursor: help;
 }
@@ -4393,6 +4439,11 @@ select {
 .cursor-pointer {
   cursor: pointer;
 }
+.select-none {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
 .select-all {
   -webkit-user-select: all;
      -moz-user-select: all;
@@ -4437,6 +4488,9 @@ select {
 .items-center {
   align-items: center;
 }
+.items-baseline {
+  align-items: baseline;
+}
 .items-stretch {
   align-items: stretch;
 }
@@ -4476,6 +4530,14 @@ select {
 .gap-8 {
   gap: 2rem;
 }
+.gap-x-2 {
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+}
+.gap-x-3 {
+  -moz-column-gap: 0.75rem;
+       column-gap: 0.75rem;
+}
 .gap-x-6 {
   -moz-column-gap: 1.5rem;
        column-gap: 1.5rem;
@@ -4484,6 +4546,12 @@ select {
   -moz-column-gap: 2rem;
        column-gap: 2rem;
 }
+.gap-y-1 {
+  row-gap: 0.25rem;
+}
+.gap-y-3 {
+  row-gap: 0.75rem;
+}
 .gap-y-4 {
   row-gap: 1rem;
 }
@@ -4564,6 +4632,9 @@ select {
   --tw-divide-opacity: 1;
   border-color: rgb(226 232 240 / var(--tw-divide-opacity, 1));
 }
+.self-center {
+  align-self: center;
+}
 .overflow-auto {
   overflow: auto;
 }
@@ -4665,9 +4736,6 @@ select {
 .border-dashed {
   border-style: dashed;
 }
-.border-none {
-  border-style: none;
-}
 .border-amber-200 {
   --tw-border-opacity: 1;
   border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
@@ -4691,6 +4759,14 @@ select {
   --tw-border-opacity: 1;
   border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
 }
+.border-blue-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
+}
+.border-blue-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
+}
 .border-blue-600 {
   --tw-border-opacity: 1;
   border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
@@ -4703,6 +4779,14 @@ select {
   --tw-border-opacity: 1;
   border-color: rgb(165 243 252 / var(--tw-border-opacity, 1));
 }
+.border-emerald-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
+}
+.border-emerald-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
+}
 .border-gray-100 {
   --tw-border-opacity: 1;
   border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
@@ -4745,6 +4829,10 @@ select {
   --tw-border-opacity: 1;
   border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
 }
+.border-green-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
+}
 .border-green-700 {
   --tw-border-opacity: 1;
   border-color: rgb(21 128 61 / var(--tw-border-opacity, 1));
@@ -4761,6 +4849,10 @@ select {
   --tw-border-opacity: 1;
   border-color: rgb(254 215 170 / var(--tw-border-opacity, 1));
 }
+.border-orange-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(251 146 60 / var(--tw-border-opacity, 1));
+}
 .border-purple-100 {
   --tw-border-opacity: 1;
   border-color: rgb(243 232 255 / var(--tw-border-opacity, 1));
@@ -4807,9 +4899,13 @@ select {
   --tw-border-opacity: 1;
   border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
 }
-.border-slate-700 {
+.border-teal-100 {
   --tw-border-opacity: 1;
-  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
+  border-color: rgb(204 251 241 / var(--tw-border-opacity, 1));
+}
+.border-teal-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(153 246 228 / var(--tw-border-opacity, 1));
 }
 .border-transparent {
   border-color: transparent;
@@ -4889,6 +4985,10 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(8 145 178 / var(--tw-bg-opacity, 1));
 }
+.bg-emerald-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
+}
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
@@ -4982,6 +5082,10 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
 }
+.bg-pink-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 231 243 / var(--tw-bg-opacity, 1));
+}
 .bg-purple-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
@@ -5029,17 +5133,13 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1));
 }
-.bg-slate-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
-}
-.bg-slate-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
-}
 .bg-slate-900\/20 {
   background-color: rgb(15 23 42 / 0.2);
 }
+.bg-teal-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1));
+}
 .bg-transparent {
   background-color: transparent;
 }
@@ -5089,11 +5189,21 @@ select {
   --tw-gradient-to: rgb(219 234 254 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.from-blue-50 {
+  --tw-gradient-from: #eff6ff var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .from-blue-500 {
   --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.from-emerald-50 {
+  --tw-gradient-from: #ecfdf5 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(236 253 245 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .from-gray-100 {
   --tw-gradient-from: #f3f4f6 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(243 244 246 / 0) var(--tw-gradient-to-position);
@@ -5144,6 +5254,11 @@ select {
   --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.from-teal-50 {
+  --tw-gradient-from: #f0fdfa var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(240 253 250 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .to-amber-200 {
   --tw-gradient-to: #fde68a var(--tw-gradient-to-position);
 }
@@ -5153,9 +5268,18 @@ select {
 .to-blue-200 {
   --tw-gradient-to: #bfdbfe var(--tw-gradient-to-position);
 }
+.to-blue-50 {
+  --tw-gradient-to: #eff6ff var(--tw-gradient-to-position);
+}
 .to-blue-600 {
   --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
 }
+.to-cyan-50 {
+  --tw-gradient-to: #ecfeff var(--tw-gradient-to-position);
+}
+.to-cyan-600 {
+  --tw-gradient-to: #0891b2 var(--tw-gradient-to-position);
+}
 .to-emerald-600 {
   --tw-gradient-to: #059669 var(--tw-gradient-to-position);
 }
@@ -5183,6 +5307,9 @@ select {
 .to-red-600 {
   --tw-gradient-to: #dc2626 var(--tw-gradient-to-position);
 }
+.to-teal-50 {
+  --tw-gradient-to: #f0fdfa var(--tw-gradient-to-position);
+}
 .to-violet-600 {
   --tw-gradient-to: #7c3aed var(--tw-gradient-to-position);
 }
@@ -5209,9 +5336,6 @@ select {
 .p-2 {
   padding: 0.5rem;
 }
-.p-2\.5 {
-  padding: 0.625rem;
-}
 .p-3 {
   padding: 0.75rem;
 }
@@ -5325,6 +5449,9 @@ select {
 .pb-24 {
   padding-bottom: 6rem;
 }
+.pb-3 {
+  padding-bottom: 0.75rem;
+}
 .pb-4 {
   padding-bottom: 1rem;
 }
@@ -5352,6 +5479,9 @@ select {
 .pr-12 {
   padding-right: 3rem;
 }
+.pr-24 {
+  padding-right: 6rem;
+}
 .pr-4 {
   padding-right: 1rem;
 }
@@ -5385,6 +5515,9 @@ select {
 .text-start {
   text-align: start;
 }
+.text-end {
+  text-align: end;
+}
 .align-top {
   vertical-align: top;
 }
@@ -5414,6 +5547,9 @@ select {
   font-size: 3.75rem;
   line-height: 1;
 }
+.text-\[0\.6rem\] {
+  font-size: 0.6rem;
+}
 .text-\[10px\] {
   font-size: 10px;
 }
@@ -5461,6 +5597,9 @@ select {
 .lowercase {
   text-transform: lowercase;
 }
+.normal-case {
+  text-transform: none;
+}
 .italic {
   font-style: italic;
 }
@@ -5479,9 +5618,6 @@ select {
 .tracking-\[0\.3em\] {
   letter-spacing: 0.3em;
 }
-.tracking-tight {
-  letter-spacing: -0.025em;
-}
 .tracking-wide {
   letter-spacing: 0.025em;
 }
@@ -5555,6 +5691,22 @@ select {
   --tw-text-opacity: 1;
   color: rgb(14 116 144 / var(--tw-text-opacity, 1));
 }
+.text-emerald-600 {
+  --tw-text-opacity: 1;
+  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
+}
+.text-emerald-700 {
+  --tw-text-opacity: 1;
+  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
+}
+.text-emerald-800 {
+  --tw-text-opacity: 1;
+  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
+}
+.text-emerald-900 {
+  --tw-text-opacity: 1;
+  color: rgb(6 78 59 / var(--tw-text-opacity, 1));
+}
 .text-gray-300 {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity, 1));
@@ -5658,6 +5810,10 @@ select {
   --tw-text-opacity: 1;
   color: rgb(236 72 153 / var(--tw-text-opacity, 1));
 }
+.text-pink-800 {
+  --tw-text-opacity: 1;
+  color: rgb(157 23 77 / var(--tw-text-opacity, 1));
+}
 .text-purple-500 {
   --tw-text-opacity: 1;
   color: rgb(168 85 247 / var(--tw-text-opacity, 1));
@@ -5714,10 +5870,6 @@ select {
   --tw-text-opacity: 1;
   color: rgb(241 245 249 / var(--tw-text-opacity, 1));
 }
-.text-slate-200 {
-  --tw-text-opacity: 1;
-  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
-}
 .text-slate-400 {
   --tw-text-opacity: 1;
   color: rgb(148 163 184 / var(--tw-text-opacity, 1));
@@ -5730,6 +5882,22 @@ select {
   --tw-text-opacity: 1;
   color: rgb(71 85 105 / var(--tw-text-opacity, 1));
 }
+.text-teal-600 {
+  --tw-text-opacity: 1;
+  color: rgb(13 148 136 / var(--tw-text-opacity, 1));
+}
+.text-teal-700 {
+  --tw-text-opacity: 1;
+  color: rgb(15 118 110 / var(--tw-text-opacity, 1));
+}
+.text-teal-800 {
+  --tw-text-opacity: 1;
+  color: rgb(17 94 89 / var(--tw-text-opacity, 1));
+}
+.text-teal-900 {
+  --tw-text-opacity: 1;
+  color: rgb(19 78 74 / var(--tw-text-opacity, 1));
+}
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -5789,6 +5957,9 @@ select {
 .opacity-50 {
   opacity: 0.5;
 }
+.opacity-60 {
+  opacity: 0.6;
+}
 .opacity-75 {
   opacity: 0.75;
 }
@@ -5827,10 +5998,6 @@ select {
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.outline-none {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
 .outline {
   outline-style: solid;
 }
@@ -6430,6 +6597,513 @@ table.dataTable thead td {
     max-width: 42rem !important; /* 672px */
   }
 }
+@media (min-width: 640px) {
+
+  .sm\:prose {
+    color: var(--tw-prose-body);
+    max-width: 65ch;
+  }
+
+  .sm\:prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+  }
+
+  .sm\:prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    color: var(--tw-prose-lead);
+    font-size: 1.25em;
+    line-height: 1.6;
+    margin-top: 1.2em;
+    margin-bottom: 1.2em;
+  }
+
+  .sm\:prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    color: var(--tw-prose-links);
+    text-decoration: underline;
+    font-weight: 500;
+  }
+
+  .sm\:prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    color: var(--tw-prose-bold);
+    font-weight: 600;
+  }
+
+  .sm\:prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    color: inherit;
+  }
+
+  .sm\:prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    color: inherit;
+  }
+
+  .sm\:prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    color: inherit;
+  }
+
+  .sm\:prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    list-style-type: decimal;
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+    padding-inline-start: 1.625em;
+  }
+
+  .sm\:prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    list-style-type: upper-alpha;
+  }
+
+  .sm\:prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    list-style-type: lower-alpha;
+  }
+
+  .sm\:prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    list-style-type: upper-alpha;
+  }
+
+  .sm\:prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    list-style-type: lower-alpha;
+  }
+
+  .sm\:prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    list-style-type: upper-roman;
+  }
+
+  .sm\:prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    list-style-type: lower-roman;
+  }
+
+  .sm\:prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    list-style-type: upper-roman;
+  }
+
+  .sm\:prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    list-style-type: lower-roman;
+  }
+
+  .sm\:prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    list-style-type: decimal;
+  }
+
+  .sm\:prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    list-style-type: disc;
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+    padding-inline-start: 1.625em;
+  }
+
+  .sm\:prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
+    font-weight: 400;
+    color: var(--tw-prose-counters);
+  }
+
+  .sm\:prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
+    color: var(--tw-prose-bullets);
+  }
+
+  .sm\:prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    color: var(--tw-prose-headings);
+    font-weight: 600;
+    margin-top: 1.25em;
+  }
+
+  .sm\:prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    border-color: var(--tw-prose-hr);
+    border-top-width: 1px;
+    margin-top: 3em;
+    margin-bottom: 3em;
+  }
+
+  .sm\:prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    font-weight: 500;
+    font-style: italic;
+    color: var(--tw-prose-quotes);
+    border-inline-start-width: 0.25rem;
+    border-inline-start-color: var(--tw-prose-quote-borders);
+    quotes: "\201C""\201D""\2018""\2019";
+    margin-top: 1.6em;
+    margin-bottom: 1.6em;
+    padding-inline-start: 1em;
+  }
+
+  .sm\:prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
+    content: open-quote;
+  }
+
+  .sm\:prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
+    content: close-quote;
+  }
+
+  .sm\:prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    color: var(--tw-prose-headings);
+    font-weight: 800;
+    font-size: 2.25em;
+    margin-top: 0;
+    margin-bottom: 0.8888889em;
+    line-height: 1.1111111;
+  }
+
+  .sm\:prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    font-weight: 900;
+    color: inherit;
+  }
+
+  .sm\:prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    color: var(--tw-prose-headings);
+    font-weight: 700;
+    font-size: 1.5em;
+    margin-top: 2em;
+    margin-bottom: 1em;
+    line-height: 1.3333333;
+  }
+
+  .sm\:prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    font-weight: 800;
+    color: inherit;
+  }
+
+  .sm\:prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    color: var(--tw-prose-headings);
+    font-weight: 600;
+    font-size: 1.25em;
+    margin-top: 1.6em;
+    margin-bottom: 0.6em;
+    line-height: 1.6;
+  }
+
+  .sm\:prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    font-weight: 700;
+    color: inherit;
+  }
+
+  .sm\:prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    color: var(--tw-prose-headings);
+    font-weight: 600;
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+    line-height: 1.5;
+  }
+
+  .sm\:prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    font-weight: 700;
+    color: inherit;
+  }
+
+  .sm\:prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+
+  .sm\:prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    display: block;
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+
+  .sm\:prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+
+  .sm\:prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    font-weight: 500;
+    font-family: inherit;
+    color: var(--tw-prose-kbd);
+    box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
+    font-size: 0.875em;
+    border-radius: 0.3125rem;
+    padding-top: 0.1875em;
+    padding-inline-end: 0.375em;
+    padding-bottom: 0.1875em;
+    padding-inline-start: 0.375em;
+  }
+
+  .sm\:prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    color: var(--tw-prose-code);
+    font-weight: 600;
+    font-size: 0.875em;
+  }
+
+  .sm\:prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
+    content: "`";
+  }
+
+  .sm\:prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
+    content: "`";
+  }
+
+  .sm\:prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    color: inherit;
+  }
+
+  .sm\:prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    color: inherit;
+  }
+
+  .sm\:prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    color: inherit;
+    font-size: 0.875em;
+  }
+
+  .sm\:prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    color: inherit;
+    font-size: 0.9em;
+  }
+
+  .sm\:prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    color: inherit;
+  }
+
+  .sm\:prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    color: inherit;
+  }
+
+  .sm\:prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    color: inherit;
+  }
+
+  .sm\:prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    color: var(--tw-prose-pre-code);
+    background-color: var(--tw-prose-pre-bg);
+    overflow-x: auto;
+    font-weight: 400;
+    font-size: 0.875em;
+    line-height: 1.7142857;
+    margin-top: 1.7142857em;
+    margin-bottom: 1.7142857em;
+    border-radius: 0.375rem;
+    padding-top: 0.8571429em;
+    padding-inline-end: 1.1428571em;
+    padding-bottom: 0.8571429em;
+    padding-inline-start: 1.1428571em;
+  }
+
+  .sm\:prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    background-color: transparent;
+    border-width: 0;
+    border-radius: 0;
+    padding: 0;
+    font-weight: inherit;
+    color: inherit;
+    font-size: inherit;
+    font-family: inherit;
+    line-height: inherit;
+  }
+
+  .sm\:prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
+    content: none;
+  }
+
+  .sm\:prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
+    content: none;
+  }
+
+  .sm\:prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    width: 100%;
+    table-layout: auto;
+    margin-top: 2em;
+    margin-bottom: 2em;
+    font-size: 0.875em;
+    line-height: 1.7142857;
+  }
+
+  .sm\:prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    border-bottom-width: 1px;
+    border-bottom-color: var(--tw-prose-th-borders);
+  }
+
+  .sm\:prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    color: var(--tw-prose-headings);
+    font-weight: 600;
+    vertical-align: bottom;
+    padding-inline-end: 0.5714286em;
+    padding-bottom: 0.5714286em;
+    padding-inline-start: 0.5714286em;
+  }
+
+  .sm\:prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    border-bottom-width: 1px;
+    border-bottom-color: var(--tw-prose-td-borders);
+  }
+
+  .sm\:prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    border-bottom-width: 0;
+  }
+
+  .sm\:prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    vertical-align: baseline;
+  }
+
+  .sm\:prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    border-top-width: 1px;
+    border-top-color: var(--tw-prose-th-borders);
+  }
+
+  .sm\:prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    vertical-align: top;
+  }
+
+  .sm\:prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    text-align: start;
+  }
+
+  .sm\:prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .sm\:prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    color: var(--tw-prose-captions);
+    font-size: 0.875em;
+    line-height: 1.4285714;
+    margin-top: 0.8571429em;
+  }
+
+  .sm\:prose {
+    --tw-prose-body: #374151;
+    --tw-prose-headings: #111827;
+    --tw-prose-lead: #4b5563;
+    --tw-prose-links: #111827;
+    --tw-prose-bold: #111827;
+    --tw-prose-counters: #6b7280;
+    --tw-prose-bullets: #d1d5db;
+    --tw-prose-hr: #e5e7eb;
+    --tw-prose-quotes: #111827;
+    --tw-prose-quote-borders: #e5e7eb;
+    --tw-prose-captions: #6b7280;
+    --tw-prose-kbd: #111827;
+    --tw-prose-kbd-shadows: rgb(17 24 39 / 10%);
+    --tw-prose-code: #111827;
+    --tw-prose-pre-code: #e5e7eb;
+    --tw-prose-pre-bg: #1f2937;
+    --tw-prose-th-borders: #d1d5db;
+    --tw-prose-td-borders: #e5e7eb;
+    --tw-prose-invert-body: #d1d5db;
+    --tw-prose-invert-headings: #fff;
+    --tw-prose-invert-lead: #9ca3af;
+    --tw-prose-invert-links: #fff;
+    --tw-prose-invert-bold: #fff;
+    --tw-prose-invert-counters: #9ca3af;
+    --tw-prose-invert-bullets: #4b5563;
+    --tw-prose-invert-hr: #374151;
+    --tw-prose-invert-quotes: #f3f4f6;
+    --tw-prose-invert-quote-borders: #374151;
+    --tw-prose-invert-captions: #9ca3af;
+    --tw-prose-invert-kbd: #fff;
+    --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
+    --tw-prose-invert-code: #fff;
+    --tw-prose-invert-pre-code: #d1d5db;
+    --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
+    --tw-prose-invert-th-borders: #4b5563;
+    --tw-prose-invert-td-borders: #374151;
+    font-size: 1rem;
+    line-height: 1.75;
+  }
+
+  .sm\:prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .sm\:prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+  }
+
+  .sm\:prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    padding-inline-start: 0.375em;
+  }
+
+  .sm\:prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    padding-inline-start: 0.375em;
+  }
+
+  .sm\:prose :where(.sm\:prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    margin-top: 0.75em;
+    margin-bottom: 0.75em;
+  }
+
+  .sm\:prose :where(.sm\:prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    margin-top: 1.25em;
+  }
+
+  .sm\:prose :where(.sm\:prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    margin-bottom: 1.25em;
+  }
+
+  .sm\:prose :where(.sm\:prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    margin-top: 1.25em;
+  }
+
+  .sm\:prose :where(.sm\:prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    margin-bottom: 1.25em;
+  }
+
+  .sm\:prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    margin-top: 0.75em;
+    margin-bottom: 0.75em;
+  }
+
+  .sm\:prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+  }
+
+  .sm\:prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    margin-top: 0.5em;
+    padding-inline-start: 1.625em;
+  }
+
+  .sm\:prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+
+  .sm\:prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+
+  .sm\:prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+
+  .sm\:prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+
+  .sm\:prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    padding-inline-start: 0;
+  }
+
+  .sm\:prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    padding-inline-end: 0;
+  }
+
+  .sm\:prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    padding-top: 0.5714286em;
+    padding-inline-end: 0.5714286em;
+    padding-bottom: 0.5714286em;
+    padding-inline-start: 0.5714286em;
+  }
+
+  .sm\:prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    padding-inline-start: 0;
+  }
+
+  .sm\:prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    padding-inline-end: 0;
+  }
+
+  .sm\:prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+
+  .sm\:prose :where(.sm\:prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+
+  .sm\:prose :where(.sm\:prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+    margin-bottom: 0;
+  }
+}
 @media (min-width: 768px) {
   @media (max-width: 640px) {
     .settings-panel .grid.grid-cols-1.lg\:grid-cols-2.gap-6 > .md\:p-5 {
@@ -6437,6 +7111,60 @@ table.dataTable thead td {
     }
   }
 }
+.file\:mr-3::file-selector-button {
+  margin-right: 0.75rem;
+}
+.file\:rounded::file-selector-button {
+  border-radius: 0.25rem;
+}
+.file\:rounded-lg::file-selector-button {
+  border-radius: 0.5rem;
+}
+.file\:rounded-md::file-selector-button {
+  border-radius: 0.375rem;
+}
+.file\:border-0::file-selector-button {
+  border-width: 0px;
+}
+.file\:bg-blue-50::file-selector-button {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
+}
+.file\:bg-gray-100::file-selector-button {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+.file\:px-3::file-selector-button {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+.file\:px-4::file-selector-button {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.file\:py-2::file-selector-button {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+.file\:text-sm::file-selector-button {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.file\:text-xs::file-selector-button {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+.file\:font-medium::file-selector-button {
+  font-weight: 500;
+}
+.file\:text-blue-700::file-selector-button {
+  --tw-text-opacity: 1;
+  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
+}
+.file\:text-gray-700::file-selector-button {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
+}
 .placeholder\:text-gray-400::-moz-placeholder {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity, 1));
@@ -6523,6 +7251,10 @@ table.dataTable thead td {
   --tw-bg-opacity: 1;
   background-color: rgb(14 116 144 / var(--tw-bg-opacity, 1));
 }
+.hover\:bg-emerald-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
+}
 .hover\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
@@ -6635,6 +7367,10 @@ table.dataTable thead td {
   --tw-bg-opacity: 1;
   background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
 }
+.hover\:bg-teal-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(15 118 110 / var(--tw-bg-opacity, 1));
+}
 .hover\:bg-yellow-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));
@@ -6663,6 +7399,10 @@ table.dataTable thead td {
   --tw-text-opacity: 1;
   color: rgb(30 58 138 / var(--tw-text-opacity, 1));
 }
+.hover\:text-emerald-900:hover {
+  --tw-text-opacity: 1;
+  color: rgb(6 78 59 / var(--tw-text-opacity, 1));
+}
 .hover\:text-gray-600:hover {
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity, 1));
@@ -6703,10 +7443,6 @@ table.dataTable thead td {
   --tw-text-opacity: 1;
   color: rgb(88 28 135 / var(--tw-text-opacity, 1));
 }
-.hover\:text-red-300:hover {
-  --tw-text-opacity: 1;
-  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
-}
 .hover\:text-red-500:hover {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity, 1));
@@ -6738,9 +7474,6 @@ table.dataTable thead td {
 .hover\:underline:hover {
   text-decoration-line: underline;
 }
-.hover\:decoration-gray-600:hover {
-  text-decoration-color: #4b5563;
-}
 .hover\:opacity-80:hover {
   opacity: 0.8;
 }
@@ -6764,6 +7497,17 @@ table.dataTable thead td {
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.hover\:text-primary:hover {
+    color: var(--color-primary);
+  }
+.hover\:file\:bg-blue-100::file-selector-button:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
+}
+.hover\:file\:bg-gray-200::file-selector-button:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
+}
 .focus\:border-black:focus {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
@@ -6869,6 +7613,9 @@ table.dataTable thead td {
 .focus\:ring-offset-2:focus {
   --tw-ring-offset-width: 2px;
 }
+.focus\:border-primary:focus {
+    border-color: var(--color-primary);
+  }
 .disabled\:cursor-not-allowed:disabled {
   cursor: not-allowed;
 }
@@ -6918,6 +7665,14 @@ table.dataTable thead td {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity, 1));
 }
+.group:hover .group-hover\:shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.group:hover .group-hover\:text-primary {
+    color: var(--color-primary);
+  }
 .peer:checked ~ .peer-checked\:translate-x-9 {
   --tw-translate-x: 2.25rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -6994,6 +7749,17 @@ table.dataTable thead td {
   --tw-border-opacity: 1;
   border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
 }
+.dark\:border-teal-700:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(15 118 110 / var(--tw-border-opacity, 1));
+}
+.dark\:border-teal-800:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(17 94 89 / var(--tw-border-opacity, 1));
+}
+.dark\:border-teal-800\/50:is(.dark *) {
+  border-color: rgb(17 94 89 / 0.5);
+}
 .dark\:border-yellow-800:is(.dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(133 77 14 / var(--tw-border-opacity, 1));
@@ -7068,6 +7834,17 @@ table.dataTable thead td {
 .dark\:bg-yellow-900\/20:is(.dark *) {
   background-color: rgb(113 63 18 / 0.2);
 }
+.dark\:bg-yellow-900\/30:is(.dark *) {
+  background-color: rgb(113 63 18 / 0.3);
+}
+.dark\:from-teal-900\/20:is(.dark *) {
+  --tw-gradient-from: rgb(19 78 74 / 0.2) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(19 78 74 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.dark\:to-cyan-900\/20:is(.dark *) {
+  --tw-gradient-to: rgb(22 78 99 / 0.2) var(--tw-gradient-to-position);
+}
 .dark\:text-amber-200:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(253 230 138 / var(--tw-text-opacity, 1));
@@ -7160,6 +7937,22 @@ table.dataTable thead td {
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity, 1));
 }
+.dark\:text-teal-100:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(204 251 241 / var(--tw-text-opacity, 1));
+}
+.dark\:text-teal-200:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(153 246 228 / var(--tw-text-opacity, 1));
+}
+.dark\:text-teal-300:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(94 234 212 / var(--tw-text-opacity, 1));
+}
+.dark\:text-teal-400:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(45 212 191 / var(--tw-text-opacity, 1));
+}
 .dark\:text-white:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -7187,16 +7980,56 @@ table.dataTable thead td {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
 }
+.dark\:hover\:bg-gray-700\/30:hover:is(.dark *) {
+  background-color: rgb(55 65 81 / 0.3);
+}
 .dark\:hover\:bg-green-900\/20:hover:is(.dark *) {
   background-color: rgb(20 83 45 / 0.2);
 }
 .dark\:hover\:bg-purple-900\/20:hover:is(.dark *) {
   background-color: rgb(88 28 135 / 0.2);
 }
+.dark\:hover\:bg-red-900\/40:hover:is(.dark *) {
+  background-color: rgb(127 29 29 / 0.4);
+}
 .dark\:hover\:text-gray-300:hover:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity, 1));
 }
+@media not all and (min-width: 640px) {
+
+  .max-sm\:\!rounded-none {
+    border-radius: 0px !important;
+  }
+
+  .max-sm\:\!border-0 {
+    border-width: 0px !important;
+  }
+
+  .max-sm\:\!bg-transparent {
+    background-color: transparent !important;
+  }
+
+  .max-sm\:\!p-0 {
+    padding: 0px !important;
+  }
+
+  .max-sm\:\!px-0 {
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+  }
+
+  .max-sm\:\!py-3 {
+    padding-top: 0.75rem !important;
+    padding-bottom: 0.75rem !important;
+  }
+
+  .max-sm\:\!shadow-none {
+    --tw-shadow: 0 0 #0000 !important;
+    --tw-shadow-colored: 0 0 #0000 !important;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
+  }
+}
 @media (min-width: 640px) {
 
   .sm\:order-1 {
@@ -7227,6 +8060,10 @@ table.dataTable thead td {
     display: none;
   }
 
+  .sm\:w-1\/3 {
+    width: 33.333333%;
+  }
+
   .sm\:w-56 {
     width: 14rem;
   }
@@ -7267,10 +8104,6 @@ table.dataTable thead td {
     gap: 0.5rem;
   }
 
-  .sm\:p-10 {
-    padding: 2.5rem;
-  }
-
   .sm\:px-2 {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
@@ -7286,16 +8119,6 @@ table.dataTable thead td {
     padding-right: 2rem;
   }
 
-  .sm\:text-4xl {
-    font-size: 2.25rem;
-    line-height: 2.5rem;
-  }
-
-  .sm\:text-base {
-    font-size: 1rem;
-    line-height: 1.5rem;
-  }
-
   .sm\:opacity-0 {
     opacity: 0;
   }
@@ -7407,6 +8230,10 @@ table.dataTable thead td {
     align-items: flex-start;
   }
 
+  .md\:items-end {
+    align-items: flex-end;
+  }
+
   .md\:items-center {
     align-items: center;
   }
@@ -7539,10 +8366,6 @@ table.dataTable thead td {
     justify-content: space-between;
   }
 
-  .lg\:p-12 {
-    padding: 3rem;
-  }
-
   .lg\:px-12 {
     padding-left: 3rem;
     padding-right: 3rem;
@@ -7588,4 +8411,10 @@ table.dataTable thead td {
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
 }
+@media (min-width: 1536px) {
+
+  .\32xl\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
 
diff --git a/storage/plugins/api-book-scraper/views/settings.php b/storage/plugins/api-book-scraper/views/settings.php
index 36ee36f7..3a2559e7 100644
--- a/storage/plugins/api-book-scraper/views/settings.php
+++ b/storage/plugins/api-book-scraper/views/settings.php
@@ -45,7 +45,7 @@
 $csrfToken = \App\Support\Csrf::ensureToken();
 ?>
 
-<div class="max-w-4xl mx-auto py-6 px-4">
+<div class="max-w-4xl mx-auto py-6 px-4 max-sm:!py-3">
     <!-- Header -->
     <div class="mb-6">
         <h1 class="text-3xl font-bold text-gray-900 flex items-center gap-3">
@@ -104,14 +104,14 @@
         <input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($csrfToken); ?>">
 
         <!-- Card Configurazione API -->
-        <div class="bg-white border border-gray-200 rounded-2xl overflow-hidden">
+        <div class="bg-white border border-gray-200 rounded-2xl overflow-hidden max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none">
             <div class="border-b border-gray-200 px-6 py-4">
                 <h2 class="text-lg font-semibold text-gray-900 flex items-center gap-2">
                     <i class="fas fa-cog text-gray-500"></i>
                     Configurazione API
                 </h2>
             </div>
-            <div class="p-6 space-y-5">
+            <div class="p-6 space-y-5 max-sm:!p-0">
                 <!-- API Endpoint -->
                 <div>
                     <label for="api_endpoint" class="block text-sm font-medium text-gray-700 mb-2">
@@ -230,7 +230,7 @@ class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-gray-100 text-gray
     </form>
 
     <!-- Documentazione Rapida -->
-    <div class="mt-8 bg-white border border-gray-200 rounded-2xl overflow-hidden">
+    <div class="mt-8 bg-white border border-gray-200 rounded-2xl overflow-hidden max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none">
         <div class="border-b border-gray-200 px-6 py-4 cursor-pointer hover:bg-gray-50 transition-colors" onclick="toggleSection('quick-docs')">
             <div class="flex items-center justify-between">
                 <h2 class="text-lg font-semibold text-gray-900 flex items-center gap-2">
@@ -240,7 +240,7 @@ class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-gray-100 text-gray
                 <i class="fas fa-chevron-down text-gray-400 transition-transform" id="quick-docs-icon"></i>
             </div>
         </div>
-        <div id="quick-docs-content" class="p-6 space-y-4">
+        <div id="quick-docs-content" class="p-6 space-y-4 max-sm:!p-0">
             <div>
                 <h3 class="text-sm font-semibold text-gray-900 mb-2">1. Formato Richiesta</h3>
                 <div class="bg-gray-900 rounded-lg p-4 text-sm font-mono text-green-400">
diff --git a/storage/plugins/archives/views/activities/form.php b/storage/plugins/archives/views/activities/form.php
index f0ab36f2..22774cfb 100644
--- a/storage/plugins/archives/views/activities/form.php
+++ b/storage/plugins/archives/views/activities/form.php
@@ -66,7 +66,7 @@
             </label>
             <input type="text" id="title" name="title" required maxlength="500"
                    value="<?= $val('title') ?>"
-                   class="mt-1 block w-full rounded-md <?= $err('title') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+                   class="mt-1 block w-full rounded-md <?= $err('title') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-blue-500 focus:ring-blue-500">
             <?php if ($err('title')): ?>
                 <p class="mt-1 text-sm text-red-600"><?= $e($err('title')) ?></p>
             <?php endif; ?>
@@ -75,14 +75,14 @@ class="mt-1 block w-full rounded-md <?= $err('title') ? 'border-red-500' : 'bord
         <div>
             <label for="description" class="form-label"><?= __('Descrizione') ?></label>
             <textarea id="description" name="description" rows="4"
-                      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"><?= $val('description') ?></textarea>
+                      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"><?= $val('description') ?></textarea>
         </div>
 
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div>
                 <label for="activity_type" class="form-label"><?= __('Tipo (ISDF)') ?></label>
                 <select id="activity_type" name="activity_type"
-                        class="mt-1 block w-full rounded-md <?= $err('activity_type') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+                        class="mt-1 block w-full rounded-md <?= $err('activity_type') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-blue-500 focus:ring-blue-500">
                     <?php foreach ($types as $t): ?>
                         <option value="<?= $e($t) ?>" <?= ((string) ($values['activity_type'] ?? '') === $t) ? 'selected' : '' ?>>
                             <?= $e($typeLabel[$t] ?? $t) ?>
@@ -96,7 +96,7 @@ class="mt-1 block w-full rounded-md <?= $err('activity_type') ? 'border-red-500'
             <div>
                 <label for="parent_id" class="form-label"><?= __('Attività padre') ?></label>
                 <select id="parent_id" name="parent_id"
-                        class="mt-1 block w-full rounded-md <?= $err('parent_id') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+                        class="mt-1 block w-full rounded-md <?= $err('parent_id') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-blue-500 focus:ring-blue-500">
                     <option value="">— <?= __('nessuna') ?> —</option>
                     <?php foreach ($parentOpts as $opt): ?>
                         <option value="<?= (int) $opt['id'] ?>" <?= ((int) ($values['parent_id'] ?? 0) === (int) $opt['id']) ? 'selected' : '' ?>>
@@ -115,19 +115,19 @@ class="mt-1 block w-full rounded-md <?= $err('parent_id') ? 'border-red-500' : '
                 <label for="date_start" class="form-label"><?= __('Data di inizio') ?></label>
                 <input type="text" id="date_start" name="date_start" value="<?= $val('date_start') ?>"
                        placeholder="<?= $e(__('AAAA o AAAA-MM-GG')) ?>"
-                       class="mt-1 block w-full rounded-md <?= $err('date_start') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+                       class="mt-1 block w-full rounded-md <?= $err('date_start') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-blue-500 focus:ring-blue-500">
             </div>
             <div>
                 <label for="date_end" class="form-label"><?= __('Data di fine') ?></label>
                 <input type="text" id="date_end" name="date_end" value="<?= $val('date_end') ?>"
                        placeholder="<?= $e(__('AAAA o AAAA-MM-GG')) ?>"
-                       class="mt-1 block w-full rounded-md <?= $err('date_end') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+                       class="mt-1 block w-full rounded-md <?= $err('date_end') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-blue-500 focus:ring-blue-500">
             </div>
             <div class="flex items-end">
                 <label class="inline-flex items-center cursor-pointer">
                     <input type="checkbox" name="is_ongoing" value="1"
                            <?= !empty($values['is_ongoing']) ? 'checked' : '' ?>
-                           class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+                           class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                     <span class="ml-2 text-sm text-gray-700"><?= __('Attività in corso') ?></span>
                 </label>
             </div>
@@ -136,7 +136,7 @@ class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
         <div>
             <label for="agent_id" class="form-label"><?= __('Agente esecutore') ?></label>
             <select id="agent_id" name="agent_id"
-                    class="mt-1 block w-full rounded-md <?= $err('agent_id') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+                    class="mt-1 block w-full rounded-md <?= $err('agent_id') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-blue-500 focus:ring-blue-500">
                 <option value="">— <?= __('nessuno') ?> —</option>
                 <?php foreach ($agentOpts as $opt): ?>
                     <option value="<?= (int) $opt['id'] ?>" <?= ((int) ($values['agent_id'] ?? 0) === (int) $opt['id']) ? 'selected' : '' ?>>
@@ -154,7 +154,7 @@ class="mt-1 block w-full rounded-md <?= $err('agent_id') ? 'border-red-500' : 'b
             <input type="text" id="source_ref" name="source_ref" maxlength="500"
                    value="<?= $val('source_ref') ?>"
                    placeholder="<?= $e(__('es. RD 9 ottobre 1861 n. 250')) ?>"
-                   class="mt-1 block w-full rounded-md <?= $err('source_ref') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+                   class="mt-1 block w-full rounded-md <?= $err('source_ref') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-blue-500 focus:ring-blue-500">
         </div>
 
         <div class="flex items-center justify-between pt-4 border-t">
@@ -162,7 +162,7 @@ class="mt-1 block w-full rounded-md <?= $err('source_ref') ? 'border-red-500' :
                 <?= __('Annulla') ?>
             </a>
             <button type="submit"
-                    class="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded shadow-sm">
+                    class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded shadow-sm">
                 <?= $e($submitLabel) ?>
             </button>
         </div>
diff --git a/storage/plugins/archives/views/activities/index.php b/storage/plugins/archives/views/activities/index.php
index 797569f5..766dc444 100644
--- a/storage/plugins/archives/views/activities/index.php
+++ b/storage/plugins/archives/views/activities/index.php
@@ -25,7 +25,7 @@
     'mandate'     => __('Mandato'),
 ];
 $typeBadge = [
-    'function'    => 'bg-purple-100 text-purple-800',
+    'function'    => 'bg-blue-100 text-blue-800',
     'activity'    => 'bg-blue-100 text-blue-800',
     'transaction' => 'bg-green-100 text-green-800',
     'task'        => 'bg-gray-100 text-gray-800',
@@ -46,7 +46,7 @@
                 </p>
             </div>
             <a href="<?= $e(url('/admin/archives/activities/new')) ?>"
-               class="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded shadow-sm">
+               class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded shadow-sm">
                 <?= __('+ Nuova attività') ?>
             </a>
         </div>
diff --git a/storage/plugins/archives/views/activities/show.php b/storage/plugins/archives/views/activities/show.php
index dec7eaea..407ccc5a 100644
--- a/storage/plugins/archives/views/activities/show.php
+++ b/storage/plugins/archives/views/activities/show.php
@@ -92,7 +92,7 @@
             </div>
             <div class="space-x-2">
                 <a href="<?= $e(url('/admin/archives/activities/' . $id . '/edit')) ?>"
-                   class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded text-sm font-semibold shadow-sm">
+                   class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm font-semibold shadow-sm">
                     <?= __('Modifica') ?>
                 </a>
                 <form id="<?= $e($archivesDeleteActivityId) ?>"
@@ -241,7 +241,7 @@ class="absolute z-10 w-full bg-white border border-gray-200 rounded mt-1 shadow-
                    placeholder="ric:isOrWasRelatedTo"
                    aria-label="<?= $e(__('Predicato RiC-O')) ?>"
                    class="rounded-md border-gray-300">
-            <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded text-sm font-semibold"><?= __('Collega') ?></button>
+            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm font-semibold"><?= __('Collega') ?></button>
         </form>
     </div>
 
diff --git a/storage/plugins/archives/views/authorities/index.php b/storage/plugins/archives/views/authorities/index.php
index 8f8068e8..1db72e75 100644
--- a/storage/plugins/archives/views/authorities/index.php
+++ b/storage/plugins/archives/views/authorities/index.php
@@ -9,7 +9,7 @@
 $e = static fn(mixed $v): string => htmlspecialchars((string) $v, ENT_QUOTES, 'UTF-8');
 
 $typeBadge = [
-    'person'    => 'bg-indigo-100 text-indigo-800',
+    'person'    => 'bg-blue-100 text-blue-800',
     'corporate' => 'bg-amber-100 text-amber-800',
     'family'    => 'bg-pink-100 text-pink-800',
 ];
diff --git a/storage/plugins/archives/views/authorities/show.php b/storage/plugins/archives/views/authorities/show.php
index adc6bf3c..0cbabc75 100644
--- a/storage/plugins/archives/views/authorities/show.php
+++ b/storage/plugins/archives/views/authorities/show.php
@@ -19,7 +19,7 @@
     htmlspecialchars((string) json_encode($x, JSON_UNESCAPED_UNICODE), ENT_QUOTES, 'UTF-8');
 
 $typeBadge = [
-    'person'    => 'bg-indigo-100 text-indigo-800',
+    'person'    => 'bg-blue-100 text-blue-800',
     'corporate' => 'bg-amber-100 text-amber-800',
     'family'    => 'bg-pink-100 text-pink-800',
 ];
@@ -29,7 +29,7 @@
     'family'    => __('Famiglia'),
 ];
 $levelBadge = [
-    'fonds'  => 'bg-purple-100 text-purple-800',
+    'fonds'  => 'bg-blue-100 text-blue-800',
     'series' => 'bg-blue-100 text-blue-800',
     'file'   => 'bg-green-100 text-green-800',
     'item'   => 'bg-gray-100 text-gray-800',
diff --git a/storage/plugins/archives/views/index.php b/storage/plugins/archives/views/index.php
index 4271c9fd..c225e36c 100644
--- a/storage/plugins/archives/views/index.php
+++ b/storage/plugins/archives/views/index.php
@@ -69,7 +69,7 @@
     $renderedIds[$rowId] = true;
     $indent = str_repeat('&nbsp;&nbsp;&nbsp;&nbsp;', $depth);
     $levelBadge = [
-        'fonds'  => 'bg-purple-100 text-purple-800',
+        'fonds'  => 'bg-blue-100 text-blue-800',
         'series' => 'bg-blue-100 text-blue-800',
         'file'   => 'bg-green-100 text-green-800',
         'item'   => 'bg-gray-100 text-gray-800',
diff --git a/storage/plugins/archives/views/places/form.php b/storage/plugins/archives/views/places/form.php
index d5677266..4f41ab6a 100644
--- a/storage/plugins/archives/views/places/form.php
+++ b/storage/plugins/archives/views/places/form.php
@@ -64,7 +64,7 @@
             </label>
             <input type="text" id="name" name="name" required maxlength="500"
                    value="<?= $val('name') ?>"
-                   class="mt-1 block w-full rounded-md <?= $err('name') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+                   class="mt-1 block w-full rounded-md <?= $err('name') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-blue-500 focus:ring-blue-500">
             <?php if ($err('name')): ?>
                 <p class="mt-1 text-sm text-red-600"><?= $e($err('name')) ?></p>
             <?php endif; ?>
@@ -74,7 +74,7 @@ class="mt-1 block w-full rounded-md <?= $err('name') ? 'border-red-500' : 'borde
             <div>
                 <label for="place_type" class="form-label"><?= __('Tipo di luogo') ?></label>
                 <select id="place_type" name="place_type"
-                        class="mt-1 block w-full rounded-md <?= $err('place_type') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+                        class="mt-1 block w-full rounded-md <?= $err('place_type') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-blue-500 focus:ring-blue-500">
                     <?php foreach ($types as $t): ?>
                         <option value="<?= $e($t) ?>" <?= ((string) ($values['place_type'] ?? '') === $t) ? 'selected' : '' ?>>
                             <?= $e($typeLabel[$t] ?? $t) ?>
@@ -88,7 +88,7 @@ class="mt-1 block w-full rounded-md <?= $err('place_type') ? 'border-red-500' :
             <div>
                 <label for="parent_id" class="form-label"><?= __('Luogo padre') ?></label>
                 <select id="parent_id" name="parent_id"
-                        class="mt-1 block w-full rounded-md <?= $err('parent_id') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+                        class="mt-1 block w-full rounded-md <?= $err('parent_id') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-blue-500 focus:ring-blue-500">
                     <option value="">— <?= __('nessuno') ?> —</option>
                     <?php foreach ($parentOpts as $opt): ?>
                         <option value="<?= (int) $opt['id'] ?>" <?= ((int) ($values['parent_id'] ?? 0) === (int) $opt['id']) ? 'selected' : '' ?>>
@@ -107,7 +107,7 @@ class="mt-1 block w-full rounded-md <?= $err('parent_id') ? 'border-red-500' : '
                 <label for="latitude" class="form-label"><?= __('Latitudine') ?></label>
                 <input type="text" id="latitude" name="latitude" value="<?= $val('latitude') ?>"
                        placeholder="37.50213"
-                       class="mt-1 block w-full rounded-md <?= $err('latitude') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+                       class="mt-1 block w-full rounded-md <?= $err('latitude') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-blue-500 focus:ring-blue-500">
                 <?php if ($err('latitude')): ?>
                     <p class="mt-1 text-sm text-red-600"><?= $e($err('latitude')) ?></p>
                 <?php endif; ?>
@@ -116,7 +116,7 @@ class="mt-1 block w-full rounded-md <?= $err('latitude') ? 'border-red-500' : 'b
                 <label for="longitude" class="form-label"><?= __('Longitudine') ?></label>
                 <input type="text" id="longitude" name="longitude" value="<?= $val('longitude') ?>"
                        placeholder="15.08719"
-                       class="mt-1 block w-full rounded-md <?= $err('longitude') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+                       class="mt-1 block w-full rounded-md <?= $err('longitude') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-blue-500 focus:ring-blue-500">
                 <?php if ($err('longitude')): ?>
                     <p class="mt-1 text-sm text-red-600"><?= $e($err('longitude')) ?></p>
                 <?php endif; ?>
@@ -128,7 +128,7 @@ class="mt-1 block w-full rounded-md <?= $err('longitude') ? 'border-red-500' : '
                 <label for="geonames_id" class="form-label"><?= __('Identificativo GeoNames') ?></label>
                 <input type="text" id="geonames_id" name="geonames_id" value="<?= $val('geonames_id') ?>"
                        placeholder="2525068"
-                       class="mt-1 block w-full rounded-md <?= $err('geonames_id') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+                       class="mt-1 block w-full rounded-md <?= $err('geonames_id') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-blue-500 focus:ring-blue-500">
                 <?php if ($err('geonames_id')): ?>
                     <p class="mt-1 text-sm text-red-600"><?= $e($err('geonames_id')) ?></p>
                 <?php endif; ?>
@@ -137,7 +137,7 @@ class="mt-1 block w-full rounded-md <?= $err('geonames_id') ? 'border-red-500' :
                 <label for="wikidata_id" class="form-label"><?= __('Identificativo Wikidata') ?></label>
                 <input type="text" id="wikidata_id" name="wikidata_id" value="<?= $val('wikidata_id') ?>"
                        placeholder="Q40218"
-                       class="mt-1 block w-full rounded-md <?= $err('wikidata_id') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+                       class="mt-1 block w-full rounded-md <?= $err('wikidata_id') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-blue-500 focus:ring-blue-500">
                 <?php if ($err('wikidata_id')): ?>
                     <p class="mt-1 text-sm text-red-600"><?= $e($err('wikidata_id')) ?></p>
                 <?php endif; ?>
@@ -146,7 +146,7 @@ class="mt-1 block w-full rounded-md <?= $err('wikidata_id') ? 'border-red-500' :
                 <label for="tgn_id" class="form-label"><?= __('Identificativo Getty TGN') ?></label>
                 <input type="text" id="tgn_id" name="tgn_id" value="<?= $val('tgn_id') ?>"
                        placeholder="7004329"
-                       class="mt-1 block w-full rounded-md <?= $err('tgn_id') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+                       class="mt-1 block w-full rounded-md <?= $err('tgn_id') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-blue-500 focus:ring-blue-500">
                 <?php if ($err('tgn_id')): ?>
                     <p class="mt-1 text-sm text-red-600"><?= $e($err('tgn_id')) ?></p>
                 <?php endif; ?>
@@ -156,7 +156,7 @@ class="mt-1 block w-full rounded-md <?= $err('tgn_id') ? 'border-red-500' : 'bor
         <div>
             <label for="description" class="form-label"><?= __('Descrizione') ?></label>
             <textarea id="description" name="description" rows="3"
-                      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"><?= $val('description') ?></textarea>
+                      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"><?= $val('description') ?></textarea>
         </div>
 
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -164,7 +164,7 @@ class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indig
                 <label for="date_start" class="form-label"><?= __('Esistente dal') ?></label>
                 <input type="text" id="date_start" name="date_start" value="<?= $val('date_start') ?>"
                        placeholder="<?= $e(__('AAAA o AAAA-MM-GG')) ?>"
-                       class="mt-1 block w-full rounded-md <?= $err('date_start') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+                       class="mt-1 block w-full rounded-md <?= $err('date_start') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-blue-500 focus:ring-blue-500">
                 <?php /* FIX (CR confirm): surface the validation message
                           so the user sees the expected format, not only
                           a red border. Mirrors other field error blocks
@@ -177,7 +177,7 @@ class="mt-1 block w-full rounded-md <?= $err('date_start') ? 'border-red-500' :
                 <label for="date_end" class="form-label"><?= __('Esistente fino al') ?></label>
                 <input type="text" id="date_end" name="date_end" value="<?= $val('date_end') ?>"
                        placeholder="<?= $e(__('AAAA o AAAA-MM-GG')) ?>"
-                       class="mt-1 block w-full rounded-md <?= $err('date_end') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
+                       class="mt-1 block w-full rounded-md <?= $err('date_end') ? 'border-red-500' : 'border-gray-300' ?> shadow-sm focus:border-blue-500 focus:ring-blue-500">
                 <?php if ($err('date_end')): ?>
                     <p class="mt-1 text-sm text-red-600"><?= $e($err('date_end')) ?></p>
                 <?php endif; ?>
@@ -189,7 +189,7 @@ class="mt-1 block w-full rounded-md <?= $err('date_end') ? 'border-red-500' : 'b
                 <?= __('Annulla') ?>
             </a>
             <button type="submit"
-                    class="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded shadow-sm">
+                    class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded shadow-sm">
                 <?= $e($submitLabel) ?>
             </button>
         </div>
diff --git a/storage/plugins/archives/views/places/index.php b/storage/plugins/archives/views/places/index.php
index 5813725e..d82ef4a3 100644
--- a/storage/plugins/archives/views/places/index.php
+++ b/storage/plugins/archives/views/places/index.php
@@ -35,7 +35,7 @@
                 </p>
             </div>
             <a href="<?= $e(url('/admin/archives/places/new')) ?>"
-               class="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded shadow-sm">
+               class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded shadow-sm">
                 <?= __('+ Nuovo luogo') ?>
             </a>
         </div>
diff --git a/storage/plugins/archives/views/places/show.php b/storage/plugins/archives/views/places/show.php
index 37ce10b8..5d13387e 100644
--- a/storage/plugins/archives/views/places/show.php
+++ b/storage/plugins/archives/views/places/show.php
@@ -75,7 +75,7 @@
             </div>
             <div class="space-x-2">
                 <a href="<?= $e(url('/admin/archives/places/' . $id . '/edit')) ?>"
-                   class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded text-sm font-semibold shadow-sm">
+                   class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm font-semibold shadow-sm">
                     <?= __('Modifica') ?>
                 </a>
                 <?php
@@ -212,7 +212,7 @@ class="absolute z-10 w-full bg-white border border-gray-200 rounded mt-1 shadow-
                    placeholder="ric:isOrWasRelatedTo"
                    aria-label="<?= $e(__('Predicato RiC-O')) ?>"
                    class="rounded-md border-gray-300">
-            <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded text-sm font-semibold"><?= __('Collega') ?></button>
+            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm font-semibold"><?= __('Collega') ?></button>
         </form>
     </div>
 
diff --git a/storage/plugins/archives/views/search.php b/storage/plugins/archives/views/search.php
index 44fc669c..c64c4156 100644
--- a/storage/plugins/archives/views/search.php
+++ b/storage/plugins/archives/views/search.php
@@ -10,13 +10,13 @@
 $e = static fn(mixed $v): string => htmlspecialchars((string) $v, ENT_QUOTES, 'UTF-8');
 
 $levelBadge = [
-    'fonds'  => 'bg-purple-100 text-purple-800',
+    'fonds'  => 'bg-blue-100 text-blue-800',
     'series' => 'bg-blue-100 text-blue-800',
     'file'   => 'bg-green-100 text-green-800',
     'item'   => 'bg-gray-100 text-gray-800',
 ];
 $typeBadge = [
-    'person'    => 'bg-indigo-100 text-indigo-800',
+    'person'    => 'bg-blue-100 text-blue-800',
     'corporate' => 'bg-amber-100 text-amber-800',
     'family'    => 'bg-pink-100 text-pink-800',
 ];
@@ -172,7 +172,7 @@ class="btn-primary">
                                 <?php if ($authId > 0): ?>
                                     <span class="text-xs text-gray-400">↔</span>
                                     <a href="<?= $e(url('/admin/archives/authorities/' . $authId)) ?>"
-                                       class="text-xs text-indigo-600 hover:underline">
+                                       class="text-xs text-blue-600 hover:underline">
                                         <?= $e((string) ($row['authorised_form'] ?? '')) ?>
                                     </a>
                                 <?php endif; ?>
diff --git a/storage/plugins/archives/views/show.php b/storage/plugins/archives/views/show.php
index 909f39d4..43a516d2 100644
--- a/storage/plugins/archives/views/show.php
+++ b/storage/plugins/archives/views/show.php
@@ -39,7 +39,7 @@
 }
 
 $levelBadge = [
-    'fonds'  => 'bg-purple-100 text-purple-800',
+    'fonds'  => 'bg-blue-100 text-blue-800',
     'series' => 'bg-blue-100 text-blue-800',
     'file'   => 'bg-green-100 text-green-800',
     'item'   => 'bg-gray-100 text-gray-800',
@@ -397,7 +397,7 @@ class="block w-full text-xs text-gray-500 file:mr-3 file:py-2 file:px-3 file:rou
             </a>
         </div>
 
-        <?php $typeBadge = ['person'=>'bg-indigo-100 text-indigo-800','corporate'=>'bg-amber-100 text-amber-800','family'=>'bg-pink-100 text-pink-800']; ?>
+        <?php $typeBadge = ['person'=>'bg-blue-100 text-blue-800','corporate'=>'bg-amber-100 text-amber-800','family'=>'bg-pink-100 text-pink-800']; ?>
 
         <?php if (empty($linked_authorities)): ?>
             <p class="px-6 py-4 text-sm text-gray-500 italic">
diff --git a/storage/plugins/digital-library/views/admin-form-fields.php b/storage/plugins/digital-library/views/admin-form-fields.php
index 96a9bb8b..8265305d 100644
--- a/storage/plugins/digital-library/views/admin-form-fields.php
+++ b/storage/plugins/digital-library/views/admin-form-fields.php
@@ -12,12 +12,12 @@
 $currentAudioUrl = $book['audio_url'] ?? '';
 ?>
 
-<div class="mt-6 bg-gradient-to-br from-purple-50 to-indigo-50 border-2 border-purple-200 rounded-2xl p-6">
-    <h3 class="text-lg font-bold text-purple-900 mb-4 flex items-center gap-2">
-        <i class="fas fa-file-audio text-purple-600"></i>
+<div class="mt-6 bg-gradient-to-br from-blue-50 to-blue-50 border-2 border-blue-200 rounded-2xl p-6">
+    <h3 class="text-lg font-bold text-blue-900 mb-4 flex items-center gap-2">
+        <i class="fas fa-file-audio text-blue-600"></i>
         <?= __("Contenuti Digitali") ?>
     </h3>
-    <p class="text-sm text-purple-700 mb-4">
+    <p class="text-sm text-blue-700 mb-4">
         <i class="fas fa-info-circle mr-1"></i>
         <?= __("Carica o collega eBook (PDF/ePub) e audiobook (MP3/M4A) per renderli disponibili agli utenti.") ?>
     </p>
@@ -221,7 +221,7 @@ class="btn btn-primary flex items-center justify-center gap-2 w-full md:w-auto">
                 const link = document.createElement('a');
                 link.href = displayLinkUrl;
                 link.target = '_blank';
-                link.className = 'text-xs text-purple-600 hover:underline';
+                link.className = 'text-xs text-blue-600 hover:underline';
                 link.textContent = <?= json_encode(__("Apri file"), JSON_HEX_TAG) ?>;
                 wrapper.appendChild(link);
 
diff --git a/storage/plugins/discogs/views/settings.php b/storage/plugins/discogs/views/settings.php
index afefb17a..5779136c 100644
--- a/storage/plugins/discogs/views/settings.php
+++ b/storage/plugins/discogs/views/settings.php
@@ -42,11 +42,11 @@
 $pluginsRoute = htmlspecialchars(url('/admin/plugins'), ENT_QUOTES, 'UTF-8');
 ?>
 
-<div class="max-w-4xl mx-auto py-6 px-4">
+<div class="max-w-4xl mx-auto py-6 px-4 max-sm:!py-3">
     <!-- Header -->
     <div class="mb-6">
         <h1 class="text-3xl font-bold text-gray-900 flex items-center gap-3">
-            <i class="fas fa-compact-disc text-purple-600"></i>
+            <i class="fas fa-compact-disc text-blue-600"></i>
             Discogs - <?= __("Configurazione") ?>
         </h1>
         <p class="text-gray-600 mt-2">
@@ -89,14 +89,14 @@
         <input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($csrfToken, ENT_QUOTES, 'UTF-8'); ?>">
 
         <!-- Card Configurazione API -->
-        <div class="bg-white border border-gray-200 rounded-2xl overflow-hidden">
+        <div class="bg-white border border-gray-200 rounded-2xl overflow-hidden max-sm:!bg-transparent max-sm:!rounded-none max-sm:!shadow-none max-sm:!border-0">
             <div class="border-b border-gray-200 px-6 py-4">
                 <h2 class="text-lg font-semibold text-gray-900 flex items-center gap-2">
                     <i class="fas fa-key text-gray-500"></i>
                     <?= __("Token di Accesso") ?>
                 </h2>
             </div>
-            <div class="p-6 space-y-5">
+            <div class="p-6 space-y-5 max-sm:!p-0">
                 <!-- API Token -->
                 <div>
                     <label for="api_token" class="block text-sm font-medium text-gray-700 mb-2">
@@ -108,7 +108,7 @@
                                id="api_token"
                                name="api_token"
                                value=""
-                               class="block w-full rounded-xl border-gray-300 focus:border-purple-500 focus:ring-purple-500 text-sm py-3 px-4 font-mono pr-24"
+                               class="block w-full rounded-xl border-gray-300 focus:border-blue-500 focus:ring-blue-500 text-sm py-3 px-4 font-mono pr-24"
                                placeholder="<?= $hasToken ? htmlspecialchars(__('Token configurato — lascia vuoto per mantenere'), ENT_QUOTES, 'UTF-8') : 'DiscogsPersonalAccessToken' ?>">
                         <button type="button"
                                 onclick="togglePasswordVisibility('api_token')"
@@ -123,7 +123,7 @@ class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-7
                     <p class="mt-2 text-xs text-gray-600">
                         <i class="fas fa-external-link-alt mr-1"></i>
                         <?= __("Genera il tuo token su") ?>
-                        <a href="https://www.discogs.com/settings/developers" target="_blank" rel="noopener noreferrer" class="text-purple-600 hover:text-purple-800 underline">
+                        <a href="https://www.discogs.com/settings/developers" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 underline">
                             discogs.com/settings/developers
                         </a>
                     </p>
@@ -140,7 +140,7 @@ class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-7
             <button type="submit"
                     name="save_discogs_settings"
                     value="1"
-                    class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-purple-600 text-white text-sm font-semibold hover:bg-purple-700 transition-colors">
+                    class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-blue-600 text-white text-sm font-semibold hover:bg-blue-700 transition-colors">
                 <i class="fas fa-save"></i>
                 <?= __("Salva Impostazioni") ?>
             </button>
diff --git a/storage/plugins/goodlib/views/settings.php b/storage/plugins/goodlib/views/settings.php
index de85a410..a350d867 100644
--- a/storage/plugins/goodlib/views/settings.php
+++ b/storage/plugins/goodlib/views/settings.php
@@ -38,7 +38,7 @@
             <span class="text-sm font-medium text-gray-700"><?= htmlspecialchars($label, ENT_QUOTES, 'UTF-8') ?></span>
           </div>
           <input type="checkbox" name="<?= htmlspecialchars($key, ENT_QUOTES, 'UTF-8') ?>" value="1" <?= $checked ?>
-                 class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500">
+                 class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
         </label>
       <?php endforeach; ?>
     </div>
@@ -62,7 +62,7 @@ class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500">
           </div>
         </div>
         <input type="checkbox" name="show_frontend" value="1" <?= $settings['show_frontend'] ? 'checked' : '' ?>
-               class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500">
+               class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
       </label>
       <label class="flex items-center justify-between p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors cursor-pointer">
         <div class="flex items-center gap-3">
@@ -75,7 +75,7 @@ class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500">
           </div>
         </div>
         <input type="checkbox" name="show_admin" value="1" <?= $settings['show_admin'] ? 'checked' : '' ?>
-               class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500">
+               class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
       </label>
     </div>
   </div>
@@ -94,7 +94,7 @@ class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500">
                name="anna_domain"
                list="anna_domain_options"
                value="<?= htmlspecialchars($settings['anna_domain'], ENT_QUOTES, 'UTF-8') ?>"
-               class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-indigo-500 focus:border-indigo-500"
+               class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-blue-500 focus:border-blue-500"
                autocomplete="off"
                spellcheck="false"
                maxlength="253">
@@ -111,7 +111,7 @@ class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-ind
                name="zlib_domain"
                list="zlib_domain_options"
                value="<?= htmlspecialchars($settings['zlib_domain'], ENT_QUOTES, 'UTF-8') ?>"
-               class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-indigo-500 focus:border-indigo-500"
+               class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-blue-500 focus:border-blue-500"
                autocomplete="off"
                spellcheck="false"
                maxlength="253">
diff --git a/storage/plugins/mobile-api/views/settings.php b/storage/plugins/mobile-api/views/settings.php
index 2c18bf68..cd9f58e6 100644
--- a/storage/plugins/mobile-api/views/settings.php
+++ b/storage/plugins/mobile-api/views/settings.php
@@ -84,7 +84,7 @@
 $tabDevicesUrl  = htmlspecialchars(url('/admin/plugins/' . $resolvedId . '/settings') . '?tab=devices', ENT_QUOTES, 'UTF-8');
 ?>
 
-<div class="max-w-4xl mx-auto py-6 px-4">
+<div class="max-w-4xl mx-auto py-6 px-4 max-sm:!py-3">
 
   <!-- Header -->
   <div class="mb-6 flex items-start justify-between gap-4">
@@ -145,7 +145,7 @@ class="pb-3 text-sm font-medium border-b-2 transition-colors <?= $activeTab ===
       <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($csrfToken, ENT_QUOTES, 'UTF-8') ?>">
 
       <!-- App access toggle -->
-      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 mb-5">
+      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 mb-5 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
         <div class="p-5 border-b border-gray-200 dark:border-gray-700">
           <h2 class="text-base font-semibold text-gray-900 dark:text-white flex items-center gap-2">
             <i class="fas fa-toggle-on text-blue-500"></i>
@@ -181,7 +181,7 @@ class="underline">/api/v1/docs</a>
       </div>
 
       <!-- Push notifications -->
-      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 mb-5">
+      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 mb-5 max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
         <div class="p-5 border-b border-gray-200 dark:border-gray-700">
           <h2 class="text-base font-semibold text-gray-900 dark:text-white flex items-center gap-2">
             <i class="fas fa-bell text-blue-500"></i>
@@ -232,7 +232,7 @@ class="block w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray
       </div>
 
       <!-- Save row -->
-      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5 flex items-center justify-between">
+      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-5 flex items-center justify-between max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
         <p class="text-xs text-gray-500 dark:text-gray-400">
           <i class="fas fa-lock mr-1"></i>
           <?= htmlspecialchars(__("L'API richiede HTTPS (eccetto loopback in sviluppo)."), ENT_QUOTES, 'UTF-8') ?>
@@ -246,7 +246,7 @@ class="block w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray
 
     <?php else: ?>
     <!-- ── Devices tab ────────────────────────────────────────────────────── -->
-    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
+    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden max-sm:!bg-transparent max-sm:!border-0 max-sm:!rounded-none max-sm:!shadow-none max-sm:!p-0">
       <div class="p-5 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
         <h2 class="text-base font-semibold text-gray-900 dark:text-white flex items-center gap-2">
           <i class="fas fa-mobile-screen-button text-gray-500"></i>
diff --git a/storage/plugins/ncip-server/views/partners.php b/storage/plugins/ncip-server/views/partners.php
index 2ffad5bb..74ad97ae 100644
--- a/storage/plugins/ncip-server/views/partners.php
+++ b/storage/plugins/ncip-server/views/partners.php
@@ -14,7 +14,7 @@
     <div class="px-6 py-4">
       <div class="flex items-center justify-between">
         <div class="flex items-center space-x-3">
-          <div class="w-8 h-8 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-lg flex items-center justify-center">
+          <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center">
             <i class="fas fa-exchange-alt text-white text-sm"></i>
           </div>
           <div>
@@ -51,7 +51,7 @@ class="inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-700 text-whit
     <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
       <div class="p-5 border-b border-gray-200 dark:border-gray-700">
         <h2 class="text-base font-semibold text-gray-900 dark:text-white flex items-center gap-2">
-          <i class="fas fa-plus-circle text-indigo-500"></i>
+          <i class="fas fa-plus-circle text-blue-500"></i>
           <?= __("Aggiungi Partner") ?>
         </h2>
       </div>
@@ -64,7 +64,7 @@ class="inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-700 text-whit
             </label>
             <input type="text" name="name" required maxlength="255"
                    placeholder="<?= __("Es. Biblioteca Nazionale di Roma") ?>"
-                   class="w-full px-3 py-2 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                   class="w-full px-3 py-2 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500">
           </div>
           <div>
             <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
@@ -72,7 +72,7 @@ class="w-full px-3 py-2 text-sm bg-white dark:bg-gray-700 border border-gray-300
             </label>
             <input type="url" name="endpoint_url" required maxlength="500"
                    placeholder="https://biblioteca.example.org/ncip"
-                   class="w-full px-3 py-2 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                   class="w-full px-3 py-2 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500">
           </div>
           <div>
             <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
@@ -80,19 +80,19 @@ class="w-full px-3 py-2 text-sm bg-white dark:bg-gray-700 border border-gray-300
             </label>
             <input type="text" name="isil" maxlength="32"
                    placeholder="IT-XXXXX"
-                   class="w-full px-3 py-2 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                   class="w-full px-3 py-2 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500">
           </div>
           <div>
             <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
               <?= __("Note") ?>
             </label>
             <input type="text" name="notes" maxlength="500"
-                   class="w-full px-3 py-2 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                   class="w-full px-3 py-2 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500">
           </div>
         </div>
         <div class="mt-4">
           <button type="submit"
-                  class="inline-flex items-center px-5 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-lg transition-colors">
+                  class="inline-flex items-center px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors">
             <i class="fas fa-plus mr-2"></i>
             <?= __("Aggiungi Partner") ?>
           </button>
diff --git a/storage/plugins/ncip-server/views/transactions.php b/storage/plugins/ncip-server/views/transactions.php
index 607d6fb5..b7dd9dd0 100644
--- a/storage/plugins/ncip-server/views/transactions.php
+++ b/storage/plugins/ncip-server/views/transactions.php
@@ -79,7 +79,7 @@ class="inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-700 text-whit
                 <?= (int) ($tx['id'] ?? 0) ?>
               </td>
               <td class="px-5 py-3">
-                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300">
+                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
                   <?= htmlspecialchars((string) ($tx['message_type'] ?? ''), ENT_QUOTES, 'UTF-8') ?>
                 </span>
               </td>

From bb299ffea5f5e1744cba86607b8e5347933e2ee0 Mon Sep 17 00:00:00 2001
From: fabiodalez-dev <fabiodalezbackup@gmail.com>
Date: Thu, 25 Jun 2026 13:15:55 +0200
Subject: [PATCH 3/6] =?UTF-8?q?fix(ui):=20unify=20all=20on/off=20toggles?=
 =?UTF-8?q?=20to=20the=20canonical=20gray=E2=86=92dark=20switch?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Every toggle now matches the catalogue-mode reference (gray w-11 h-6 track,
white h-5 w-5 dot, #111827 when on, 20px slide):
- settings API toggle: replaced the oversized OFF/ON black switch (peer +
  custom CSS) with the canonical toggle-checkbox/toggle-bg/toggle-dot markup;
  the generic .toggle-checkbox driver already on the settings page renders it,
  and the form auto-submit on change is preserved
- events visibility toggle: restyled its CSS-only switch from 60x32 green to
  the canonical 44x24 dark dimensions/colors
- bulk-enrich switch: on-state blue → gray-900 (markup + JS), matching the rest

Rebuilt public/assets/main.css.
---
 app/Views/admin/bulk-enrich.php     |  6 +++---
 app/Views/events/index.php          | 25 ++++++++++++------------
 app/Views/settings/advanced-tab.php | 24 ++++-------------------
 public/assets/main.css              | 30 -----------------------------
 4 files changed, 20 insertions(+), 65 deletions(-)

diff --git a/app/Views/admin/bulk-enrich.php b/app/Views/admin/bulk-enrich.php
index c72361ac..2b896cff 100644
--- a/app/Views/admin/bulk-enrich.php
+++ b/app/Views/admin/bulk-enrich.php
@@ -83,7 +83,7 @@
             <p class="text-sm text-gray-600 mb-6"><?= __("Abilita l'arricchimento automatico tramite cron. I libri verranno arricchiti in background a intervalli regolari.") ?></p>
             <div class="flex items-center gap-4">
                 <button type="button" id="toggle-enrichment"
-                    class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 <?= $enabled ? 'bg-blue-600' : 'bg-gray-200' ?>"
+                    class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 <?= $enabled ? 'bg-gray-900' : 'bg-gray-200' ?>"
                     role="switch" aria-checked="<?= $enabled ? 'true' : 'false' ?>"
                     aria-label="<?= htmlspecialchars(__('Arricchimento Automatico'), ENT_QUOTES, 'UTF-8') ?>"
                     aria-labelledby="toggle-label">
@@ -168,14 +168,14 @@ class="inline-flex items-center px-6 py-3 bg-blue-600 text-white rounded-xl hove
 
             if (newState) {
                 btn.classList.remove('bg-gray-200');
-                btn.classList.add('bg-blue-600');
+                btn.classList.add('bg-gray-900');
                 span.classList.remove('translate-x-0');
                 span.classList.add('translate-x-5');
                 label.textContent = <?= json_encode(__("Attivo"), JSON_HEX_TAG) ?>;
                 label.classList.remove('text-gray-500');
                 label.classList.add('text-green-700');
             } else {
-                btn.classList.remove('bg-blue-600');
+                btn.classList.remove('bg-gray-900');
                 btn.classList.add('bg-gray-200');
                 span.classList.remove('translate-x-5');
                 span.classList.add('translate-x-0');
diff --git a/app/Views/events/index.php b/app/Views/events/index.php
index 2517823e..d3c72ef2 100644
--- a/app/Views/events/index.php
+++ b/app/Views/events/index.php
@@ -317,35 +317,36 @@ class="inline-flex items-center gap-2 text-gray-600 hover:text-gray-900 transiti
   /* Toggle Switch Styles */
   .toggle-switch {
     position: relative;
-    width: 60px;
-    height: 32px;
-    background-color: #d1d5db;
+    width: 44px;
+    height: 24px;
+    background-color: #e5e7eb;
     border-radius: 9999px;
     transition: background-color 0.3s ease;
   }
 
   .toggle-checkbox:checked+.toggle-switch {
-    background-color: #10b981;
+    background-color: #111827;
   }
 
   .toggle-slider {
     position: absolute;
-    top: 3px;
-    left: 3px;
-    width: 26px;
-    height: 26px;
+    top: 2px;
+    left: 2px;
+    width: 20px;
+    height: 20px;
     background-color: white;
+    border: 1px solid #d1d5db;
     border-radius: 9999px;
     transition: transform 0.3s ease;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
   }
 
   .toggle-checkbox:checked+.toggle-switch .toggle-slider {
-    transform: translateX(28px);
+    transform: translateX(20px);
   }
 
-  .toggle-checkbox:focus+.toggle-switch {
-    outline: 2px solid #3b82f6;
+  .toggle-checkbox:focus-visible+.toggle-switch {
+    outline: 2px solid #111827;
     outline-offset: 2px;
   }
 </style>
diff --git a/app/Views/settings/advanced-tab.php b/app/Views/settings/advanced-tab.php
index e8567b9c..d0516a6a 100644
--- a/app/Views/settings/advanced-tab.php
+++ b/app/Views/settings/advanced-tab.php
@@ -3,11 +3,6 @@
 /** @var string $csrfToken */
 use App\Support\HtmlHelper;
 ?>
-<style>
-.api-toggle-track .api-toggle-label-on { display: none; }
-.api-toggle-input:checked + .api-toggle-track .api-toggle-label-on { display: flex; }
-.api-toggle-input:checked + .api-toggle-track .api-toggle-label-off { display: none; }
-</style>
 <section data-settings-panel="advanced" class="settings-panel <?php echo $activeTab === 'advanced' ? 'block' : 'hidden'; ?>">
   <form action="<?= htmlspecialchars(url('/admin/settings/advanced'), ENT_QUOTES, 'UTF-8') ?>" method="post" class="space-y-6">
     <input type="hidden" name="csrf_token" value="<?php echo HtmlHelper::e($csrfToken); ?>">
@@ -718,25 +713,14 @@ class="inline-flex items-center gap-2 px-5 py-3 rounded-xl bg-gray-900 text-whit
           </div>
           <label class="relative inline-flex items-center cursor-pointer">
             <input type="checkbox"
+                   id="api_enabled"
                    name="api_enabled"
                    value="1"
                    <?php echo $apiEnabled ? 'checked' : ''; ?>
-                   class="sr-only peer api-toggle-input"
+                   class="toggle-checkbox sr-only"
                    onchange="document.getElementById('api-toggle-form').submit()">
-            <div class="api-toggle-track w-20 h-10 bg-white border-4 border-gray-900 rounded-full peer
-                        peer-checked:bg-gray-900
-                        transition-all duration-300 ease-in-out
-                        relative cursor-pointer
-                        shadow-inner">
-              <span class="absolute top-0.5 left-0.5 w-8 h-8 bg-gray-900 rounded-full
-                           peer-checked:translate-x-9 peer-checked:bg-white
-                           transition-all duration-300 ease-in-out
-                           shadow-lg
-                           flex items-center justify-center text-white text-xs font-bold peer-checked:text-gray-900">
-                <span class="api-toggle-label-off uppercase tracking-wide"><?php echo HtmlHelper::e(__('OFF')); ?></span>
-                <span class="api-toggle-label-on uppercase tracking-wide"><?php echo HtmlHelper::e(__('ON')); ?></span>
-              </span>
-            </div>
+            <div class="toggle-bg w-11 h-6 bg-gray-200 rounded-full transition-colors"></div>
+            <div class="toggle-dot absolute top-[2px] left-[2px] bg-white border border-gray-300 rounded-full h-5 w-5 transition-transform"></div>
           </label>
         </div>
       </form>
diff --git a/public/assets/main.css b/public/assets/main.css
index 6144e611..e374468e 100644
--- a/public/assets/main.css
+++ b/public/assets/main.css
@@ -3827,9 +3827,6 @@ select {
 .left-0 {
   left: 0px;
 }
-.left-0\.5 {
-  left: 0.125rem;
-}
 .left-1\/2 {
   left: 50%;
 }
@@ -3851,9 +3848,6 @@ select {
 .top-0 {
   top: 0px;
 }
-.top-0\.5 {
-  top: 0.125rem;
-}
 .top-1\/2 {
   top: 50%;
 }
@@ -4709,9 +4703,6 @@ select {
 .border-2 {
   border-width: 2px;
 }
-.border-4 {
-  border-width: 4px;
-}
 .border-b {
   border-bottom-width: 1px;
 }
@@ -5973,11 +5964,6 @@ select {
   --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.shadow-inner {
-  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
-  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -7673,22 +7659,6 @@ table.dataTable thead td {
 .group:hover .group-hover\:text-primary {
     color: var(--color-primary);
   }
-.peer:checked ~ .peer-checked\:translate-x-9 {
-  --tw-translate-x: 2.25rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-.peer:checked ~ .peer-checked\:bg-gray-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
-}
-.peer:checked ~ .peer-checked\:bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-}
-.peer:checked ~ .peer-checked\:text-gray-900 {
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
-}
 .dark\:divide-gray-700:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-divide-opacity, 1));

From 50807e86372100a94f64ecdfab1be8c3dbadb470 Mon Sep 17 00:00:00 2001
From: fabiodalez-dev <fabiodalezbackup@gmail.com>
Date: Thu, 25 Jun 2026 14:38:04 +0200
Subject: [PATCH 4/6] fix(ui): unify advanced-tab section headers + add toggles
 E2E regression
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- advanced-tab: convert the two odd-one-out section headers (Sitemap XML, API
  Pubblica) from the icon-in-box + text-lg style to the canonical inline-icon
  text-xl used by every other settings section, so titles match in size and
  share the same left edge on mobile (added max-sm:!px-0/!border-0 so the
  header goes flush like the body). The API section stays collapsible
  (toggleApiSection + chevron preserved)
- new tests/toggles-all.spec.js: turns every restyled toggle ON and asserts it
  reflects ON — shared .toggle-checkbox driver paints the track dark, the API
  toggle auto-submits and persists, privacy toggles persist on save, the events
  visibility toggle flips, and the bulk-enrich AJAX switch flips. Restores each
  toggle so the run is idempotent
---
 app/Views/settings/advanced-tab.php |  34 +++---
 tests/toggles-all.spec.js           | 176 ++++++++++++++++++++++++++++
 2 files changed, 190 insertions(+), 20 deletions(-)
 create mode 100644 tests/toggles-all.spec.js

diff --git a/app/Views/settings/advanced-tab.php b/app/Views/settings/advanced-tab.php
index d0516a6a..3dbe08d7 100644
--- a/app/Views/settings/advanced-tab.php
+++ b/app/Views/settings/advanced-tab.php
@@ -544,16 +544,12 @@ class="toggle-checkbox sr-only">
 
   <!-- <?= __("Sitemap XML") ?> Section -->
   <div class="bg-white border border-gray-200 rounded-2xl overflow-hidden mt-6 max-sm:!bg-transparent max-sm:!rounded-none max-sm:!shadow-none max-sm:!border-0">
-    <div class="border-b border-gray-200 px-6 py-4">
-      <div class="flex items-center gap-3">
-        <span class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-gray-100">
-          <i class="fas fa-sitemap text-gray-600"></i>
-        </span>
-        <div>
-          <h3 class="text-lg font-semibold text-gray-900"><?= __("Sitemap XML") ?></h3>
-          <p class="text-sm text-gray-600 mt-0.5"><?= __("Mappa del sito per i motori di ricerca") ?></p>
-        </div>
-      </div>
+    <div class="border-b border-gray-200 px-6 py-4 max-sm:!px-0 max-sm:!border-0">
+      <h2 class="text-xl font-semibold text-gray-900 flex items-center gap-2">
+        <i class="fas fa-sitemap text-gray-500"></i>
+        <?= __("Sitemap XML") ?>
+      </h2>
+      <p class="text-sm text-gray-600 mt-1"><?= __("Mappa del sito per i motori di ricerca") ?></p>
     </div>
     <div class="p-6 space-y-6 max-sm:!p-0">
       <!-- Sitemap Info -->
@@ -687,16 +683,14 @@ class="inline-flex items-center gap-2 px-5 py-3 rounded-xl bg-gray-900 text-whit
   ?>
 
   <div class="bg-white border border-gray-200 rounded-2xl overflow-hidden mt-6 max-sm:!bg-transparent max-sm:!rounded-none max-sm:!shadow-none max-sm:!border-0">
-    <div class="border-b border-gray-200 px-6 py-4 cursor-pointer hover:bg-gray-50 transition-colors" onclick="toggleApiSection()">
-      <div class="flex items-center justify-between">
-        <div class="flex items-center gap-3">
-          <span class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-gray-100">
-            <i class="fas fa-key text-gray-600"></i>
-          </span>
-          <div>
-            <h3 class="text-lg font-semibold text-gray-900"><?= __("API Pubblica") ?></h3>
-            <p class="text-sm text-gray-600 mt-0.5"><?= __("Gestisci l'accesso all'API per cercare libri via EAN, ISBN e autore") ?></p>
-          </div>
+    <div class="border-b border-gray-200 px-6 py-4 cursor-pointer hover:bg-gray-50 transition-colors max-sm:!px-0 max-sm:!border-0" onclick="toggleApiSection()">
+      <div class="flex items-center justify-between gap-3">
+        <div>
+          <h2 class="text-xl font-semibold text-gray-900 flex items-center gap-2">
+            <i class="fas fa-key text-gray-500"></i>
+            <?= __("API Pubblica") ?>
+          </h2>
+          <p class="text-sm text-gray-600 mt-1"><?= __("Gestisci l'accesso all'API per cercare libri via EAN, ISBN e autore") ?></p>
         </div>
         <i class="fas fa-chevron-down text-gray-400 transition-transform" id="api-section-icon"></i>
       </div>
diff --git a/tests/toggles-all.spec.js b/tests/toggles-all.spec.js
new file mode 100644
index 00000000..07682d47
--- /dev/null
+++ b/tests/toggles-all.spec.js
@@ -0,0 +1,176 @@
+// @ts-check
+// Regression for the toggle restyle (canonical gray→dark .toggle-checkbox switch,
+// the auto-submit API toggle, the events visibility toggle, and the bulk-enrich
+// switch). Turns each toggle ON and asserts it actually reflects the ON state —
+// the shared .toggle-checkbox driver paints the track dark, forms auto-submit,
+// and the AJAX switch flips. Restores every toggle so the run is idempotent.
+const { test, expect } = require('@playwright/test');
+
+const BASE = process.env.E2E_BASE_URL || 'http://localhost:8081';
+const ADMIN_EMAIL = process.env.E2E_ADMIN_EMAIL || '';
+const ADMIN_PASS = process.env.E2E_ADMIN_PASS || '';
+
+const ON_BG = 'rgb(17, 24, 39)';   // #111827 — canonical "on" track colour
+const OFF_BG = 'rgb(229, 231, 235)'; // #e5e7eb — canonical "off" track colour
+
+test.skip(
+  !ADMIN_EMAIL || !ADMIN_PASS,
+  'E2E credentials not configured (set E2E_ADMIN_EMAIL, E2E_ADMIN_PASS)',
+);
+
+/**
+ * Inline background-color the shared driver writes onto a canonical toggle's
+ * track (input's next sibling). Read the inline style, not the computed one:
+ * `transition-colors` animates the computed value over 300ms, so the computed
+ * read lags; the inline value is set synchronously by the driver.
+ */
+async function trackBg(page, id) {
+  return page.evaluate((tid) => {
+    const input = document.getElementById(tid);
+    if (!input || !input.nextElementSibling) return null;
+    return input.nextElementSibling.style.backgroundColor;
+  }, id);
+}
+
+/**
+ * Flip a canonical sr-only .toggle-checkbox. The visible track/dot overlap and
+ * intercept pointer events on a 1px sr-only input, so set `checked` and dispatch
+ * `change` directly — the exact event a real click fires, which the shared
+ * driver (and any onchange handler) listens for.
+ */
+async function setToggle(page, id, on) {
+  const input = page.locator(`#${id}`);
+  if ((await input.isChecked()) !== on) {
+    await input.evaluate((el, val) => {
+      el.checked = val;
+      el.dispatchEvent(new Event('change', { bubbles: true }));
+    }, on);
+  }
+  await expect(input).toBeChecked({ checked: on });
+}
+
+/** Flip a toggle whose onchange auto-submits a form; waits for the navigation. */
+async function flipAndSubmit(page, id, on) {
+  if ((await page.locator(`#${id}`).isChecked()) === on) return;
+  await Promise.all([
+    page.waitForNavigation({ timeout: 15000 }),
+    page.locator(`#${id}`).evaluate((el, val) => {
+      el.checked = val;
+      el.dispatchEvent(new Event('change', { bubbles: true }));
+    }, on),
+  ]);
+}
+
+test.describe.serial('All toggles turn ON after the restyle', () => {
+  /** @type {import('@playwright/test').BrowserContext} */
+  let context;
+  /** @type {import('@playwright/test').Page} */
+  let page;
+
+  test.beforeAll(async ({ browser }) => {
+    context = await browser.newContext();
+    page = await context.newPage();
+    await page.goto(`${BASE}/accedi`);
+    await page.fill('input[name="email"]', ADMIN_EMAIL);
+    await page.fill('input[name="password"]', ADMIN_PASS);
+    await page.locator('button[type="submit"]').click();
+    await page.waitForURL(/admin/, { timeout: 15000 });
+  });
+
+  test.afterAll(async () => {
+    await context.close();
+  });
+
+  // The shared .toggle-checkbox driver: turning a toggle on must paint the track
+  // dark. Verified on every advanced-form toggle WITHOUT submitting (force_https
+  // would redirect the HTTP test to HTTPS). State is reset before leaving.
+  test('Advanced: every .toggle-checkbox reflects ON via the shared driver', async () => {
+    await page.goto(`${BASE}/admin/settings?tab=advanced`);
+    // force_https / private_mode are plain checkboxes, not switch toggles — excluded.
+    const ids = ['llms_txt_enabled', 'catalogue_mode'];
+    for (const id of ids) {
+      const before = await page.locator(`#${id}`).isChecked();
+      await setToggle(page, id, true);
+      expect(await trackBg(page, id)).toBe(ON_BG);
+      await setToggle(page, id, false);
+      expect(await trackBg(page, id)).toBe(OFF_BG);
+      // leave as found
+      if (before) await setToggle(page, id, true);
+    }
+  });
+
+  // The API toggle auto-submits its own form on change and the new state must
+  // survive the reload.
+  test('Advanced: API toggle auto-submits and persists ON', async () => {
+    await page.goto(`${BASE}/admin/settings?tab=advanced`);
+    const wasOn = await page.locator('#api_enabled').isChecked();
+
+    await flipAndSubmit(page, 'api_enabled', true);
+    await page.goto(`${BASE}/admin/settings?tab=advanced`);
+    await expect(page.locator('#api_enabled')).toBeChecked();
+    expect(await trackBg(page, 'api_enabled')).toBe(ON_BG);
+
+    // Restore original state
+    await flipAndSubmit(page, 'api_enabled', wasOn);
+  });
+
+  // Privacy toggles persist via the "Salva Privacy Policy" form submit.
+  test('Privacy: cookie/analytics/marketing toggles persist ON', async () => {
+    await page.goto(`${BASE}/admin/settings?tab=privacy`);
+    const ids = ['cookie_banner_enabled', 'show_analytics', 'show_marketing'];
+    const before = {};
+    for (const id of ids) before[id] = await page.locator(`#${id}`).isChecked();
+
+    for (const id of ids) await setToggle(page, id, true);
+    await page.locator('button[type="submit"]:has-text("Salva Privacy")').first().click();
+    await expect(page.locator('.bg-green-50, .swal2-icon-success').first())
+      .toBeVisible({ timeout: 10000 });
+
+    await page.goto(`${BASE}/admin/settings?tab=privacy`);
+    for (const id of ids) await expect(page.locator(`#${id}`)).toBeChecked();
+
+    // Restore original states
+    for (const id of ids) await setToggle(page, id, before[id]);
+    await page.locator('button[type="submit"]:has-text("Salva Privacy")').first().click();
+    await expect(page.locator('.bg-green-50, .swal2-icon-success').first())
+      .toBeVisible({ timeout: 10000 });
+  });
+
+  // Per-event visibility toggle (auto-submits). Skips when no event exists.
+  test('Events: visibility toggle flips', async () => {
+    await page.goto(`${BASE}/admin/cms/events`);
+    const first = () => page.locator('input.toggle-checkbox').first();
+    if ((await first().count()) === 0) {
+      test.skip(true, 'No events to toggle');
+      return;
+    }
+    const before = await first().isChecked();
+    const flip = () => Promise.all([
+      page.waitForNavigation({ timeout: 15000 }),
+      first().evaluate((el) => {
+        el.checked = !el.checked;
+        el.dispatchEvent(new Event('change', { bubbles: true }));
+      }),
+    ]);
+    await flip();
+    await page.goto(`${BASE}/admin/cms/events`);
+    expect(await first().isChecked()).toBe(!before);
+    await flip(); // restore
+  });
+
+  // Bulk-enrich is a button[role=switch] flipped via AJAX. Skips when absent.
+  test('Bulk-enrich: switch turns ON', async () => {
+    await page.goto(`${BASE}/admin/books/bulk-enrich`);
+    const sw = page.locator('#toggle-enrichment');
+    if ((await sw.count()) === 0) {
+      test.skip(true, 'No bulk-enrich toggle on this page');
+      return;
+    }
+    const wasOn = (await sw.getAttribute('aria-checked')) === 'true';
+    await sw.click();
+    await expect(sw).toHaveAttribute('aria-checked', String(!wasOn), { timeout: 10000 });
+    // Restore
+    await sw.click();
+    await expect(sw).toHaveAttribute('aria-checked', String(wasOn), { timeout: 10000 });
+  });
+});

From c2796c4a89b85972877b31b423084e40eba5fdc8 Mon Sep 17 00:00:00 2001
From: fabiodalez-dev <fabiodalezbackup@gmail.com>
Date: Thu, 25 Jun 2026 15:06:24 +0200
Subject: [PATCH 5/6] fix(mobile): lock body scroll while the mobile
 sidebar/overlay is open

Opening the mobile sidebar showed the overlay but the content behind it (e.g.
the settings page) still scrolled. `overflow:hidden` on <body> alone does not
stop touch-drag scrolling on iOS Safari, so pin the body with position:fixed at
the captured scroll offset while the menu is open, and restore the exact scroll
position on close. Guarded so closes that never locked (desktop, nav-link
clicks) don't jump the page to the top.
---
 app/Views/layout.php | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/app/Views/layout.php b/app/Views/layout.php
index 25da22ff..53620f79 100644
--- a/app/Views/layout.php
+++ b/app/Views/layout.php
@@ -996,19 +996,40 @@ function initializeMobileMenu() {
       const closeMobileMenuButton = document.getElementById('close-mobile-menu');
       const mobileMenuOverlay = document.getElementById('mobile-menu-overlay');
       const sidebar = document.getElementById('sidebar');
+      let scrollLockY = 0;
 
       function openMobileMenu() {
         sidebar.classList.remove('-translate-x-full');
         sidebar.classList.add('translate-x-0');
         mobileMenuOverlay.classList.remove('hidden');
+        // Lock the page behind the overlay. `overflow:hidden` on <body> alone is
+        // not enough on iOS Safari — touch-drag still scrolls the content under
+        // the overlay — so pin the body in place and restore on close.
+        scrollLockY = window.scrollY || document.documentElement.scrollTop || 0;
         document.body.classList.add('overflow-hidden');
+        document.body.style.position = 'fixed';
+        document.body.style.top = `-${scrollLockY}px`;
+        document.body.style.left = '0';
+        document.body.style.right = '0';
+        document.body.style.width = '100%';
       }
 
       function closeMobileMenu() {
         sidebar.classList.add('-translate-x-full');
         sidebar.classList.remove('translate-x-0');
         mobileMenuOverlay.classList.add('hidden');
+        const wasLocked = document.body.style.position === 'fixed';
         document.body.classList.remove('overflow-hidden');
+        document.body.style.position = '';
+        document.body.style.top = '';
+        document.body.style.left = '';
+        document.body.style.right = '';
+        document.body.style.width = '';
+        // Only restore scroll when we actually locked (avoid jumping to top when
+        // close fires on desktop / nav-link clicks where no lock was applied).
+        if (wasLocked) {
+          window.scrollTo(0, scrollLockY);
+        }
       }
 
       if (mobileMenuButton) {

From fb05cc765b7349e5edfa2ab49467f24d1d9944a3 Mon Sep 17 00:00:00 2001
From: fabiodalez-dev <fabiodalezbackup@gmail.com>
Date: Thu, 25 Jun 2026 15:14:16 +0200
Subject: [PATCH 6/6] fix(ui): center the sidebar quick-stats numbers and
 labels

The "Libri"/"Prestiti" stat cards in the sidebar had their number and label
left-aligned; center them inside each column (text-center).
---
 app/Views/layout.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/Views/layout.php b/app/Views/layout.php
index 53620f79..a721fafd 100644
--- a/app/Views/layout.php
+++ b/app/Views/layout.php
@@ -447,12 +447,12 @@ class="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-100 group-hov
             <?= __("Statistiche Rapide") ?>
           </div>
           <div class="grid grid-cols-<?= $isCatalogueMode ? '1' : '2' ?> gap-3 mt-3">
-            <div class="p-3 rounded-lg bg-gray-100 border border-gray-200">
+            <div class="p-3 rounded-lg bg-gray-100 border border-gray-200 text-center">
               <div class="text-2xl font-bold text-gray-900" id="stats-books">-</div>
               <div class="text-xs text-gray-600 font-medium"><?= __("Libri") ?></div>
             </div>
             <?php if (!$isCatalogueMode): ?>
-              <div class="p-3 rounded-lg bg-gray-100 border border-gray-200">
+              <div class="p-3 rounded-lg bg-gray-100 border border-gray-200 text-center">
                 <div class="text-2xl font-bold text-gray-900" id="stats-loans">-</div>
                 <div class="text-xs text-gray-600 font-medium"><?= __("Prestiti") ?></div>
               </div>