Migliora IspezionePage e form scheda (design review impeccable)

Ispezione: - Stato sync visibile: badge per-scheda (Da inviare/Inviato) e contatore "N da inviare" per reparto (nuovo SchedaSyncHelper) - Completamento: progresso reale nell'overlay + spunta di successo; NON completa se una scheda fallisce (resta editabile, schede "Da inviare") - Export reparto/completamento blindati: conferma + guardia anti doppio-tap, try/finally che libera sempre l'overlay - Accento corallo unico per l'azione "invia"; target di tocco >=44px; empty state; solo il primo pannello espanso di default - Tasto "Invia" nascosto sulle schede gia inviate - Messaggio d'errore comprensibile in campo (dettaglio tecnico nei log) - Fix OnSchedaModified (index >= 0) Aspetto card: - SchedaCard e InspectionCard: superficie Carta + hairline border + ombra morbida (nuovo token --card-box-shadow); pagina con tinta Grigio Campo - SchedaCard compattata Form scheda (ModalFormScheda): - Tasto Salva/Aggiorna full-width - Fix "Suggerisci note descrittive": la nota selezionata ora viene inserita nel campo (metodo async sul thread UI + OnAfterChangeValue) StatusEnum: etichette in sentence-case Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-08 16:39:20 +02:00
parent 9f4088eff3
commit c454474f49
13 changed files with 647 additions and 152 deletions
@@ -0,0 +1,98 @@
+---
+target: IspezionePage
+total_score: 18
+p0_count: 1
+p1_count: 3
+timestamp: 2026-07-08T13-15-08Z
+slug: steup-shared-components-pages-ispezionepage-razor
+---
+# Critique: IspezionePage
+
+Method: dual-agent (A: design-review · B: detector+evidence). Browser visualization SKIPPED (MAUI Blazor Hybrid / WASM requires app build + auth + runtime state; no static HTML or dev server to inject into).
+
+## Design Health Score
+
+| # | Heuristic | Score | Key Issue |
+|---|-----------|-------|-----------|
+| 1 | Visibility of System Status | 1 | SchedaCard never shows local-only vs already-sent (`ActivityId`); "offline è la verità" is invisible on its central screen |
+| 2 | Match System / Real World | 3 | Clean Italian, correct `sched{a/e}` pluralization; but online "+" is icon-only, unlabelled |
+| 3 | User Control and Freedom | 1 | ExportReparto and Completa push to server irreversibly, no undo; export has no confirm |
+| 4 | Consistency and Standards | 1 | MudBlazor default color rainbow (Warning/Success/Info/Error) violates single-accent; MudFab is both tiny icon and wide labelled button |
+| 5 | Error Prevention | 2 | Completa & Delete confirmed; Export has no confirm and no double-tap guard |
+| 6 | Recognition Rather Than Recall | 2 | No per-scheda sync badge → user must remember which reparti were exported |
+| 7 | Flexibility and Efficiency | 2 | Three overlapping sync paths (per-scheda / per-reparto / Completa), unclear which supersedes |
+| 8 | Aesthetic and Minimalist Design | 2 | Multi-color FAB clusters + info chips add chroma noise |
+| 9 | Error Recovery | 2 | OnError surfaces raw `e.Message` (+ Console.WriteLine) — technical, not field-friendly |
+| 10 | Help and Documentation | 2 | No empty state — empty SchedeGrouped renders a blank body |
+| **Total** | | **18/40** | **Poor — major UX work before it delivers its promise** |
+
+## Anti-Patterns Verdict
+
+**LLM assessment:** No gradients/glass/eyebrows/side-stripes. The tell is subtler: the screen wears MudBlazor's default demo palette. Actions form a semantic rainbow — Warning(orange)=Add, Success(green)=Export, Info(blue)=Edit, Error(red)=Delete — none overridden in MudTheme (only Primary/Secondary/Tertiary/TextPrimary are set). DESIGN.md's loudest rule (La Regola dell'Unico Accento — coral #ec4c41 as the sole action color) appears nowhere on the action surface. Reads as "component-library defaults, lightly arranged" — the enterprise-Blazor flavor of AI slop.
+
+**Deterministic scan:** detect.mjs clean (exit 0, 0 findings) on IspezionePage.razor and on InspectionCard + SchedaCard. No false positives. The scanner targets HTML/CSS slop patterns; the real defects here are semantic (color roles, state visibility) which it structurally cannot see — so the LLM review carries this critique.
+
+**Visual overlays:** none — browser visualization not applicable to this target.
+
+## Overall Impression
+
+The bones are good — reparto grouping with live counts, restrained rounded surfaces, honest completion-confirm copy — but the screen fails at the one thing the product exists for: making sync/offline state unambiguous. A rilevatore cannot glance at this screen and know what is still trapped on the phone. On top of that, the signature coral accent is absent from every action, replaced by library-default colors. Biggest single opportunity: make per-scheda sync state visible and route all actions through the single coral accent.
+
+## What's Working
+
+1. **Completion-confirm copy** is plain, honest, consequence-first — the "conferme che prevengono l'errore" principle done right.
+2. **Reparto grouping with live count chips** + correct Italian pluralization — thoughtful, task-shaped IA.
+3. **Restrained surface design** (1em panels, 20px cards, tonal #f5f5f5, flat-by-default) respects the "taccuino da campo" north star.
+
+## Priority Issues
+
+**[P0] Sync state is invisible on SchedaCard / the whole screen** — violates "Offline è la verità" (#1 principle)
+- Why: nothing distinguishes a locally-saved scheda from one on the server (`ActivityId`); no reparto "X da inviare" signal. The core product promise breaks exactly where it matters.
+- Fix: persistent per-scheda status badge (Locale / Da inviare / Inviato) — coral for needs-action, success green for inviato; reparto-level unsent counter.
+- Command: /impeccable clarify
+
+**[P1] Kill the MudBlazor color rainbow; restore the single accent** — violates Regola dell'Unico Accento
+- Why: coral never appears on actions; "Add" literally looks like a warning; reads as default slop and destroys the accent's meaning.
+- Fix: coral (Primary) for the single primary action per context; demote secondary actions to neutral/text; reserve red strictly for Delete.
+- Command: /impeccable colorize
+
+**[P1] Export reparto is irreversible, unconfirmed, and double-tap-able**
+- Why: fires on FAB tap with no confirmation; overlay mounts a frame late, so a fast gloved double-tap can re-send the batch → duplicate server activities.
+- Fix: confirm dialog matching Completa; disable/guard the FAB the instant it's tapped, not on next render.
+- Command: /impeccable harden
+
+**[P1] Primary actions sit in panel headers, not at thumb reach** — violates "Il pollice comanda"
+- Why: Add/Export FABs live in TitleContent at the top of a scrolling list; Size.Small FABs ≈40px (under 44px); Delete sits ~1rem from Export.
+- Fix: move primary create to bottom-right custom-mudfab; enforce ≥44px; separate Delete from Export (spacing or overflow menu).
+- Command: /impeccable layout
+
+**[P2] Opaque blocking wait + no success payoff at completion**
+- Why: Completa loop shows a featureless full-screen spinner through save→upload-photos→complete with zero progress; SpinnerOverlay's built-in success-checkmark is never wired here — the emotional peak has no reassurance.
+- Fix: step progress ("Invio scheda 3/7 · foto 2/4"); trigger the existing success animation on completion.
+- Command: /impeccable animate
+
+**[P3] All panels Expanded="true" + no empty state**
+- Why: every reparto expands by default (scroll purgatory for many reparti); an empty inspection renders blank.
+- Fix: expand only the first (or none) with counts visible; add empty state ("Nessuna scheda — tocca + per iniziare").
+- Command: /impeccable distill
+
+## Persona Red Flags
+
+- **Casey (distracted mobile):** unlabelled orange "+" online; three different sync verbs; nothing shows what's already sent → taps Export twice or completes without exporting.
+- **Sam (accessibility):** Size.Small FABs under 44px; meaning by color alone across a Warning/Info/Success/Error rainbow (color-blind users can't tell Add from Delete by hue); `info-subtitle` (gray-default) and `info-inspection-text` (text-secondary) muted gray violate the sun-contrast rule and likely fail AA.
+- **Riley (stress tester):** double-tap Export → duplicate records; errors surface as raw exception strings; 40 schede across 8 reparti all expanded → scroll purgatory.
+- **Marco the rilevatore (gloved, offline, sunlight):** offline, the Export FAB silently disappears with no "why"; the Add FAB stays enabled here yet the same action is Disabled in NavMenu (contradictory); in bright sun he cannot tell which schede are still trapped on the device — the exact fear the app exists to remove.
+
+## Minor Observations
+
+- InspectionCard runs an artificial `await Task.Delay(250)` before showing store data — a deliberate stall on a screen whose principle is "feedback immediato".
+- scheda action cluster is center-justified — harder to acquire one-handed than edge-anchored.
+- OnError keeps a `Console.WriteLine(e.Message)` beside the logger — dev residue.
+- Photo/QR chips in SchedaCard add visual weight but aren't tappable.
+
+## Questions to Consider
+
+- If a rilevatore can't glance at this screen and instantly know what's still only on the phone, does the app deliver its single promise?
+- Why do three separate "send" affordances exist (per-scheda, per-reparto, complete)? Could one honest sync model with clear per-item state replace all three?
+- The success-checkmark animation was built but never wired here — cut or forgotten? Which is worse?
+- If coral is "the color of action" but every action button is orange/green/blue, what is coral the color of on this screen?
@@ -0,0 +1,89 @@
+---
+target: IspezionePage
+total_score: 34
+p0_count: 0
+p1_count: 1
+timestamp: 2026-07-08T13-44-46Z
+slug: steup-shared-components-pages-ispezionepage-razor
+---
+# Critique: IspezionePage (re-run post-fix)
+
+Method: dual-agent (A: design-review · B: detector+evidence). Browser visualization SKIPPED (MAUI Blazor Hybrid / WASM requires app build + auth + runtime state).
+
+## Design Health Score
+
+| # | Heuristic | Score | Key Issue |
+|---|-----------|-------|-----------|
+| 1 | Visibility of System Status | 4 | Per-scheda sync badge + reparto "da inviare" counter + granular completion progress + success checkmark |
+| 2 | Match System / Real World | 3 | Italian & readable, but status shown ALL-CAPS and scheda title is a raw ActivityTypeId code |
+| 3 | User Control and Freedom | 3 | Confirmations everywhere; no abort during long upload (sends irreversible by nature) |
+| 4 | Consistency and Standards | 3 | coral=send now consistent; undermined by off-palette amber status chip |
+| 5 | Error Prevention | 4 | Export confirms + double-tap guards; completion confirmed + _isBusy guard |
+| 6 | Recognition Rather Than Recall | 4 | Grouped by reparto, counters, icons, labels |
+| 7 | Flexibility and Efficiency | 3 | Three send paths (scheda/reparto/concludi) powerful but diffuse |
+| 8 | Aesthetic and Minimalist | 3 | Clean; one expanded panel still stacks several action types |
+| 9 | Error Recovery | 4 | OnError copy reassuring, tech detail to logs |
+| 10 | Help and Documentation | 3 | Good empty-state; no hint why send buttons vanish offline |
+| **Total** | | **34/40** | **Strong / ship-worthy with targeted fixes** |
+
+## Anti-Patterns Verdict
+
+**LLM assessment:** Largely free of AI slop; reads as a genuine field tool. Single-Accent Rule now respected on the action surface — coral is consistently "the send action" (per-scheda Invia, panel Esporta reparto, "da inviare" counter), neutral gray for non-send actions, red reserved for delete. SchedaSyncHelper encodes coral=azione-richiesta / green=fatto. No gradients/glass/side-stripes/identical-grid. One genuine rainbow leak remains: StatusEnumHelper.GetColor() paints the InspectionCard status chip Color.Warning (amber) for InCorso/Verifica — amber is not in the SteUP palette and competes with coral. Status labels are ALL-CAPS (violates Regola del Peso, non del Maiuscolo).
+
+**Deterministic scan:** detect.mjs clean (exit 0) on IspezionePage.razor, SchedaCard.razor, SpinnerOverlay.razor. CSS scan: 3 advisory design-system-radius findings, all in SpinnerOverlay.razor.css (border-radius 100px/2px) — all confirmed false positives (icon geometry of the animated success-checkmark: arc masks + rounded line caps), not surface radii.
+
+**Visual overlays:** none — browser visualization not applicable to this target.
+
+## Overall Impression
+
+Big jump from the first pass (18→34). The screen now delivers its core promise: sync state is unambiguous per-scheda and per-reparto, the completion moment is reassuring (real progress + success checkmark), destructive/irreversible sends are confirmed and double-tap-guarded, and the single coral accent finally means "send." The remaining issues are a real data-integrity bug in the completion loop and a few palette/copy nits — no longer structural.
+
+## What's Working
+
+1. SchedaSyncHelper sync-state system — per-scheda coral "Da inviare" / green "Inviato" badges (icon+text, not color-only) + reparto CountDaInviare() counter. The Offline-è-la-verità principle made concrete.
+2. Completion progress + confirmation choreography — SetProgress messages, success checkmark with 1.8s dwell, irreversibility confirm guarded by _isBusy.
+3. Guarded, reassuring exports — ExportReparto confirms, guards double-tap, keeps work local on failure with human copy, logs the stack trace.
+
+## Priority Issues (remaining)
+
+**[P1] Silent scheda skip on completion still shows success**
+- What: In HandleCompleteInspection, `if (apiResponse == null) continue;` skips a scheda that failed to save, yet the loop still calls CompleteInspection, sets Completata, and shows "Ispezione inviata".
+- Why: The inspection becomes non-editable while one or more schede never reached the server — exactly the data loss PRODUCT.md exists to prevent.
+- Fix: track failed schede; if any failed, do NOT complete — surface "N schede non inviate, riprova" and keep them "Da inviare". Complete only when all succeed.
+- Command: /impeccable harden
+
+**[P2] Off-palette amber status chip**
+- What: StatusEnumHelper.GetColor() returns Color.Warning (amber) for InCorso/Verifica (InspectionCard status chip).
+- Why: Amber isn't in the DESIGN.md palette; a second attention color dilutes coral (Regola dell'Unico Accento).
+- Fix: map InCorso/Verifica to Color.Default (neutral) or navy Secondary; keep green Completata, red Annullata.
+- Command: /impeccable colorize
+
+**[P3] ALL-CAPS status labels**
+- What: ConvertToHumanReadable returns "IN CORSO", "COMPLETATA".
+- Why: Violates Regola del Peso, non del Maiuscolo.
+- Fix: sentence case ("In corso", "Completata"); rely on the chip's 700 weight.
+
+**[P3] Scheda title is a raw code**
+- What: `<b>@Scheda.ActivityTypeId</b>` as the card headline.
+- Why: forces decoding an internal identifier in the field.
+- Fix: show a human descrizione, fall back to the code only if none.
+
+## Minor Observations
+
+- OnSchedaModified uses `if (index > 0)` — skips index 0, so modifying the FIRST scheda in SchedeList won't replace it in-list (likely a `>= 0` bug). Pre-existing; now also on the post-export refresh path.
+- Sync model collapsed to two states (DaInviare/Inviato) vs the three-state brief (Locale/Da inviare/Inviato) — acceptable, but "local draft" vs "ready to send" no longer distinguished.
+- InspectionCard still has an artificial `await Task.Delay(250)` skeleton delay — fights "feedback immediato".
+- InspectionCard address (info-subtitle, gray-darker, weight 600) is still gray, not ink — mild sun-legibility compromise (verify AA); verify amber-on-white too.
+- Offline, all send buttons disappear with no "torna online per inviare" hint — badges show "da inviare" but no next step.
+
+## Persona Red Flags (delta)
+
+- Casey (mobile): RESOLVED — FABs Size.Medium (≥44px), flex-wrap. Remaining: per-reparto actions sit in panel TitleContent (top of expanded panel), drifting from the thumb zone on long lists.
+- Sam (accessibility): RESOLVED — aria-labels on FABs; sync state icon+text not color-only. Remaining: ALL-CAPS status; verify amber-on-white and gray-darker address hit AA.
+- Marco (gloved/offline/sun): RESOLVED — sync visibility + reparto counter answer "what hasn't gone yet." Remaining: offline the send buttons vanish with no explanation; address text still gray not ink.
+
+## Questions to Consider
+
+- If completion continues past a failed scheda and still locks the inspection, how does Marco discover which scheda didn't make it once editing is disabled?
+- Should the total "da inviare" roll up onto the InspectionCard header, visible before expanding any reparto?
+- Three send paths (per-scheda, per-reparto, global concludi) — does that dilute the single primary task? Could per-reparto export be the one canonical action?
@@ -3,22 +3,37 @@
 <MudOverlay Visible="VisibleOverlay" LightBackground="true">
    @if (SuccessAnimation)
    {
-        <div class="success-checkmark">
-            <div class="check-icon">
-                <span class="icon-line line-tip"></span>
-                <span class="icon-line line-long"></span>
-                <div class="icon-circle"></div>
-                <div class="icon-fix"></div>
+        <div class="overlay-content">
+            <div class="success-checkmark">
+                <div class="check-icon">
+                    <span class="icon-line line-tip"></span>
+                    <span class="icon-line line-long"></span>
+                    <div class="icon-circle"></div>
+                    <div class="icon-fix"></div>
+                </div>
            </div>
+            @if (!string.IsNullOrWhiteSpace(Message))
+            {
+                <p class="overlay-message">@Message</p>
+            }
        </div>
    }
    else
    {
-        <SpinnerLayout/>
+        <div class="overlay-content">
+            <SpinnerLayout/>
+            @if (!string.IsNullOrWhiteSpace(Message))
+            {
+                <p class="overlay-message">@Message</p>
+            }
+        </div>
    }
 </MudOverlay>

@code {
    [Parameter] public required bool SuccessAnimation { get; set; }
    [Parameter] public required bool VisibleOverlay { get; set; }
+
+    /// Testo opzionale mostrato sotto lo spinner/spunta (es. "Invio scheda 3 di 7…").
+    [Parameter] public string? Message { get; set; }
 }
@@ -1,9 +1,37 @@
+.overlay-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+    padding: 0 2rem;
+    text-align: center;
+}
+
+.overlay-message {
+    margin: 0;
+    max-width: 30ch;
+    font-weight: 700;
+    font-size: 1.05rem;
+    line-height: 1.4;
+    /* Inchiostro su fondo chiaro dell'overlay: leggibile anche al sole */
+    color: var(--mud-palette-text-primary);
+}
+
 .success-checkmark {
    width: 80px;
    height: 80px;
    margin: 0 auto;
 }

+/* Reduced motion: mostra la spunta di successo statica, senza coreografia */
+@media (prefers-reduced-motion: reduce) {
+    .success-checkmark .check-icon::after,
+    .icon-line.line-tip,
+    .icon-line.line-long {
+        animation: none !important;
+    }
+}
+
 .success-checkmark .check-icon {
    width: 80px;
    height: 80px;
@@ -3,6 +3,7 @@
@using SteUp.Shared.Components.Layout
@using SteUp.Shared.Components.Layout.Overlay
@using SteUp.Shared.Components.SingleElements.Card
+@using SteUp.Shared.Components.SingleElements.MessageBox
@using SteUp.Shared.Core.Dto
@using SteUp.Shared.Core.Entities
@using SteUp.Shared.Core.Enum
@@ -28,36 +29,47 @@
    @if (!SchedeGrouped.IsNullOrEmpty())
    {
        <MudExpansionPanels MultiExpansion="true">
+            @{
+                var panelIndex = 0;
+            }
            @foreach (var group in SchedeGrouped)
            {
-                <MudExpansionPanel Class="expansion-panel" Expanded="true" Text="@group.Key.Descrizione">
+                var isFirstPanel = panelIndex == 0;
+                panelIndex++;
+                <MudExpansionPanel Class="expansion-panel" Expanded="isFirstPanel" Text="@group.Key.Descrizione">
                    <TitleContent>
+                        @{
+                            var daInviare = group.Value.CountDaInviare();
+                        }
                        <div class="header-scheda-group">
                            <div class="title">
                                <MudText Typo="Typo.h6"><b>@group.Key.Descrizione</b></MudText>
                                <MudChip T="string" Size="Size.Small" Color="Color.Default">
                                    @($"{group.Value.Count} sched{(group.Value.Count == 1 ? "a" : "e")}")
                                </MudChip>
+                                @if (daInviare > 0)
+                                {
+                                    <MudChip T="string" Size="Size.Small" Variant="Variant.Filled"
+                                             Color="Color.Primary" Icon="@Icons.Material.Rounded.PhonelinkOff">
+                                        @($"{daInviare} da inviare")
+                                    </MudChip>
+                                }
                            </div>
                            @if (SteupDataService.InspectionPageState.Ispezione.Stato != StatusEnum.Completata)
                            {
                                <div class="action-scheda-group">
-                                    @if (NetworkService.IsNetworkAvailable())
-                                    {
-                                        <MudFab StartIcon="@Icons.Material.Rounded.Add"
-                                                Color="Color.Warning" Size="Size.Small"
-                                                OnClick="@(() => CreateNewScheda(group.Key))"/>
+                                    <MudFab StartIcon="@Icons.Material.Rounded.Add"
+                                            Color="Color.Default" Size="Size.Medium"
+                                            Disabled="!NetworkService.IsNetworkAvailable()"
+                                            aria-label="@($"Nuova scheda su {group.Key.Descrizione}")"
+                                            OnClick="@(() => CreateNewScheda(group.Key))"/>

-                                        <MudFab StartIcon="@Icons.Material.Rounded.CloudSync" Label="Esporta reparto"
-                                                Color="Color.Success" Size="Size.Small"
-                                                OnClick="@(() => ExportReparto(group.Key))"/>
-                                    }
-                                    else
+                                    @if (NetworkService.IsNetworkAvailable() && daInviare > 0)
                                    {
-                                        <MudFab StartIcon="@Icons.Material.Rounded.Add"
-                                                Label="@($"Nuova scheda su {group.Key.Descrizione}")"
-                                                Color="Color.Warning" Size="Size.Medium"
-                                                OnClick="@(() => CreateNewScheda(group.Key))"/>
+                                        <MudFab StartIcon="@Icons.Material.Rounded.CloudUpload" Label="Esporta reparto"
+                                                Color="Color.Primary" Size="Size.Medium"
+                                                aria-label="@($"Esporta il reparto {group.Key.Descrizione} al server")"
+                                                OnClick="@(() => ExportReparto(group.Key))"/>
                                    }
                                </div>
                            }
@@ -75,15 +87,35 @@
            }
        </MudExpansionPanels>
    }
+    else
+    {
+        <div class="empty-state">
+            <MudIcon Icon="@Icons.Material.Rounded.AssignmentLate" Class="empty-state-icon" Size="Size.Large"/>
+            <p class="empty-state-title">Nessuna scheda ancora</p>
+            @if (SteupDataService.InspectionPageState.Ispezione.Stato != StatusEnum.Completata)
+            {
+                <p class="empty-state-text">
+                    Tocca <b>+</b> in basso per creare la prima scheda di questa ispezione.
+                </p>
+            }
+        </div>
+    }
 </div>

-<SpinnerOverlay VisibleOverlay="VisibleOverlay"/>
+<SpinnerOverlay VisibleOverlay="VisibleOverlay" SuccessAnimation="_success" Message="@_progressMessage"/>
+<ConfirmMessageBox @ref="_exportRepartoBox" NoText="Annulla" YesText="Esporta" YesColor="Color.Primary"
+                   Message="Le schede di questo reparto verranno inviate al server. Procedere?"/>

@code {
    private List<Scheda> SchedeList { get; set; } = [];
    private Dictionary<JtbFasiDto, List<Scheda>> SchedeGrouped { get; set; } = [];

    private bool VisibleOverlay { get; set; }
+    private bool _isBusy;
+    private bool _success;
+    private string? _progressMessage;
+
+    private ConfirmMessageBox _exportRepartoBox = null!;

    protected override void OnInitialized()
    {
@@ -110,6 +142,10 @@

    private async void HandleCompleteInspection()
    {
+        // Guardia anti doppio-invio: il completamento è irreversibile.
+        if (_isBusy) return;
+        _isBusy = true;
+
        try
        {
            await InvokeAsync(() =>
@@ -120,8 +156,16 @@

            var ispezione = SteupDataService.InspectionPageState.Ispezione;

-            foreach (var scheda in ispezione.Schede.Where(x => x.ActivityId == null))
+            var daInviare = ispezione.Schede.Where(x => x.ActivityId == null).ToList();
+            var totale = daInviare.Count;
+            var indice = 0;
+            var fallite = 0;
+
+            foreach (var scheda in daInviare)
            {
+                indice++;
+                await SetProgress($"Invio scheda {indice} di {totale}…");
+
                var apiResponse = await IntegrySteupService.SaveScheda(
                    new SaveRequestDto
                    {
@@ -138,7 +182,12 @@
                    }
                );

-                if (apiResponse == null) continue;
+                // Fallita: resta "Da inviare". Non completeremo l'ispezione finché tutte non sono arrivate.
+                if (apiResponse == null)
+                {
+                    fallite++;
+                    continue;
+                }

                scheda.ActivityId = apiResponse.ActivityIdScheda;
                await IspezioniService.UpdateSchedaAsync(scheda);
@@ -149,20 +198,47 @@
                    ispezione.Rilevatore,
                    apiResponse.ActivityIdIspezione
                );
-                
+
                if (scheda.ImageNames == null) continue;
-                
+
                var fileList = (await FileManager.GetInspectionFiles(ispezione, scheda.ImageNames))?
                    .Where(x => x.ToUpload).ToList();

                if (fileList == null) continue;

+                var totFoto = fileList.Count;
+                var indiceFoto = 0;
+
                foreach (var file in fileList)
                {
+                    indiceFoto++;
+                    await SetProgress($"Scheda {indice}/{totale} · foto {indiceFoto}/{totFoto}…");
                    await IntegrySteupService.UploadFile(scheda.ActivityId!, file.FileBytes!, file.Name!);
                }
            }

+            // Integrità dati: se anche una sola scheda non è arrivata al server, NON completare.
+            // L'ispezione resta editabile e le schede fallite restano "Da inviare".
+            if (fallite > 0)
+            {
+                await InvokeAsync(() =>
+                {
+                    _progressMessage = null;
+                    StateHasChanged();
+                });
+
+                LoadSchede(); // rinfresca i badge: riuscite → "Inviato", fallite → restano "Da inviare"
+
+                await Dialog.ShowWarning(
+                    fallite == 1
+                        ? "1 scheda non è stata inviata e resta salvata sul dispositivo. Controlla la connessione e riprova prima di concludere l'ispezione."
+                        : $"{fallite} schede non sono state inviate e restano salvate sul dispositivo. Controlla la connessione e riprova prima di concludere l'ispezione."
+                );
+                return;
+            }
+
+            await SetProgress("Completamento ispezione…");
+
            await IntegrySteupService.CompleteInspection(ispezione.ActivityId!);
            await IspezioniService.UpdateStatoIspezioneAsync(
                ispezione.CodMdep,
@@ -170,29 +246,42 @@
                ispezione.Rilevatore,
                StatusEnum.Completata
            );
-            
+
            SteupDataService.InspectionPageState.Ispezione.Stato = StatusEnum.Completata;

+            // Riscontro al momento più importante: la spunta di successo prima di chiudere l'overlay.
            await InvokeAsync(() =>
            {
-                VisibleOverlay = false;
+                _progressMessage = "Ispezione inviata";
+                _success = true;
                StateHasChanged();
            });
+            await Task.Delay(1800);
        }
        catch (Exception e)
        {
-            Console.WriteLine(e.Message);
-
+            OnError(e, e.Message);
+        }
+        finally
+        {
+            _isBusy = false;
+            _success = false;
+            _progressMessage = null;
            await InvokeAsync(() =>
            {
                VisibleOverlay = false;
                StateHasChanged();
            });
-
-            OnError(e, e.Message);
        }
    }

+    private Task SetProgress(string message) =>
+        InvokeAsync(() =>
+        {
+            _progressMessage = message;
+            StateHasChanged();
+        });
+
    private void GroupSchede()
    {
        SchedeGrouped = SchedeList
@@ -207,7 +296,7 @@
    private void OnSchedaModified(Scheda obj)
    {
        var index = SchedeList.FindIndex(x => x.Id.Equals(obj.Id));
-        if (index > 0) SchedeList[index] = obj;
+        if (index >= 0) SchedeList[index] = obj;

        GroupSchede();
        StateHasChanged();
@@ -234,66 +323,83 @@

    private async Task ExportReparto(JtbFasiDto jtbFasi)
    {
+        // Guardia anti doppio-tap: un secondo tocco durante l'invio non ri-esporta il batch.
+        if (_isBusy) return;
+
+        var confirmed = await _exportRepartoBox.ShowAsync();
+        if (confirmed is not true) return;
+
+        _isBusy = true;
        VisibleOverlay = true;
        StateHasChanged();

-        var ispezione = SteupDataService.InspectionPageState.Ispezione;
-
-        var saveRequest = SchedeGrouped[jtbFasi].ConvertAll(x =>
+        try
        {
-            return new SaveRequestDto
+            var ispezione = SteupDataService.InspectionPageState.Ispezione;
+
+            var saveRequest = SchedeGrouped[jtbFasi].ConvertAll(x =>
            {
-                LocalIdScheda = x.Id,
-                ActivityTypeId = x.ActivityTypeId,
-                CodJfas = x.CodJfas,
-                CodMdep = ispezione.CodMdep,
-                DataCreazione = ispezione.Data,
-                Note = x.Note,
-                PersonaRif = x.Responsabile,
-                Barcodes = x.Articoli.ConvertAll(y => y.Barcode),
-                Scandeza = (ScadenzaEnum)x.Scadenza,
-                ParentActivityId = x.Ispezione?.ActivityId
-            };
-        });
+                return new SaveRequestDto
+                {
+                    LocalIdScheda = x.Id,
+                    ActivityTypeId = x.ActivityTypeId,
+                    CodJfas = x.CodJfas,
+                    CodMdep = ispezione.CodMdep,
+                    DataCreazione = ispezione.Data,
+                    Note = x.Note,
+                    PersonaRif = x.Responsabile,
+                    Barcodes = x.Articoli.ConvertAll(y => y.Barcode),
+                    Scandeza = (ScadenzaEnum)x.Scadenza,
+                    ParentActivityId = x.Ispezione?.ActivityId
+                };
+            });

-        var apiResponse = await IntegrySteupService.SaveMultipleSchede(saveRequest);
+            var apiResponse = await IntegrySteupService.SaveMultipleSchede(saveRequest);

-        if (apiResponse != null)
-        {
-            SteupDataService.InspectionPageState.Ispezione.ActivityId = apiResponse.ActivityIdIspezione;
-
-            await IspezioniService.UpdateActivityIdIspezioneAsync(ispezione.CodMdep, ispezione.Data,
-                UserSession.User.Username, apiResponse.ActivityIdIspezione
-            );
-
-            if (apiResponse.ActivityIdSchedaList.IsNullOrEmpty()) return;
-
-            foreach (var scheda in SchedeGrouped[jtbFasi])
+            if (apiResponse != null)
            {
-                scheda.ActivityId = apiResponse.ActivityIdScheda;
-                await IspezioniService.UpdateActivityIdSchedaAsync(scheda.Id, scheda.ActivityId);
+                SteupDataService.InspectionPageState.Ispezione.ActivityId = apiResponse.ActivityIdIspezione;

-                var activityId = apiResponse.ActivityIdSchedaList!.Find(x =>
-                    x.LocalId != null && x.LocalId == scheda.Id
-                )?.ActivityId;
+                await IspezioniService.UpdateActivityIdIspezioneAsync(ispezione.CodMdep, ispezione.Data,
+                    UserSession.User.Username, apiResponse.ActivityIdIspezione
+                );

-                if (activityId == null) return;
+                if (!apiResponse.ActivityIdSchedaList.IsNullOrEmpty())
+                {
+                    foreach (var scheda in SchedeGrouped[jtbFasi])
+                    {
+                        var activityId = apiResponse.ActivityIdSchedaList!.Find(x =>
+                            x.LocalId != null && x.LocalId == scheda.Id
+                        )?.ActivityId;

-                scheda.ActivityId = activityId;
-                await IspezioniService.UpdateActivityIdSchedaAsync(scheda.Id, scheda.ActivityId);
+                        if (activityId == null) continue;
+
+                        scheda.ActivityId = activityId;
+                        await IspezioniService.UpdateActivityIdSchedaAsync(scheda.Id, scheda.ActivityId);
+                    }
+                }
            }
        }
-
-        VisibleOverlay = false;
-        StateHasChanged();
+        catch (Exception e)
+        {
+            OnError(e, e.Message);
+        }
+        finally
+        {
+            _isBusy = false;
+            VisibleOverlay = false;
+            StateHasChanged();
+        }
    }

-    private void OnError(Exception?  e, string? errorMessage)
+    private void OnError(Exception? e, string? technicalMessage)
    {
-        if (e != null) Logger.LogError(e, errorMessage);
-        if (errorMessage == null) return;
+        // Il dettaglio tecnico va nei log, non davanti al rilevatore in campo.
+        if (e != null) Logger.LogError(e, technicalMessage);

-        _ = Dialog.ShowError(errorMessage);
+        _ = Dialog.ShowError(
+            "Invio non riuscito. Il lavoro resta salvato sul dispositivo: controlla la connessione e riprova."
+        );
    }

    void IDisposable.Dispose()
@@ -1,4 +1,9 @@
-.ispezione ::deep .expansion-panel .mud-expand-panel-content {
+/* Tinta di fondo tenue: le card e i pannelli bianchi (Carta) risaltano sul Grigio Campo */
+.ispezione {
+    background-color: var(--light-card-background);
+}
+
+.ispezione ::deep .expansion-panel .mud-expand-panel-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
@@ -7,5 +12,36 @@
 .action-scheda-group {
    display: flex;
    align-items: center;
-    justify-content: space-around;
+    justify-content: flex-end;
+    gap: .75rem;
+}
+
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: .75rem;
+    margin-top: 3rem;
+    padding: 0 1.5rem;
+}
+
+.empty-state .empty-state-icon {
+    color: var(--mud-palette-primary);
+    opacity: .85;
+}
+
+.empty-state .empty-state-title {
+    margin: 0;
+    font-weight: 800;
+    font-size: 1.25rem;
+    color: var(--mud-palette-text-primary);
+}
+
+.empty-state .empty-state-text {
+    margin: 0;
+    max-width: 34ch;
+    font-weight: 600;
+    line-height: 1.5;
+    color: var(--mud-palette-gray-darker);
 }
@@ -1,8 +1,10 @@
 .container-primary-info {
-    /*background: var(--light-card-background);*/
    width: 100%;
    margin-bottom: 2rem;
    border-radius: 20px;
+    background: var(--mud-palette-surface);
+    border: 1px solid var(--card-border-color);
+    box-shadow: var(--card-box-shadow);
 }

 .container-primary-info.no-margin {
@@ -42,7 +44,8 @@
 }

 .info-subtitle {
-    color: var(--mud-palette-gray-default);
+    /* gray-darker (non gray-default) per superare il contrasto AA e restare leggibile al sole */
+    color: var(--mud-palette-gray-darker);
    font-size: medium;
    font-weight: 600;
    line-height: normal;
@@ -14,9 +14,19 @@
 <div class="scheda-card">
    <div class="scheda-body-section">
        <div class="title-section">
-            <MudText Class="scheda-title" Typo="Typo.subtitle1">
-                <b>@Scheda.ActivityTypeId</b>
-            </MudText>
+            <div class="scheda-title-group">
+                <MudText Class="scheda-title" Typo="Typo.subtitle1">
+                    <b>@Scheda.ActivityTypeId</b>
+                </MudText>
+
+                @{
+                    var syncState = Scheda.GetSyncState();
+                }
+                <MudChip T="string" Class="sync-badge" Icon="@syncState.GetIcon()"
+                         Size="Size.Small" Variant="Variant.Filled" Color="@syncState.GetColor()">
+                    @syncState.ToLabel()
+                </MudChip>
+            </div>

            <div class="sub-info-section">
                <MudChip T="string" Icon="@Icons.Material.Rounded.PhotoCamera" Size="Size.Small" Color="Color.Default">
@@ -31,29 +41,26 @@
        <div class="scheda-card-action">
            @if (Ispezione.Stato != StatusEnum.Completata)
            {
-                if (NetworkService.IsNetworkAvailable())
+                <div class="action-secondary">
+                    <MudFab Color="Color.Default" Size="Size.Medium" StartIcon="@Icons.Material.Rounded.Edit"
+                            aria-label="Modifica scheda" OnClick="@UpdateScheda"/>
+                    <MudFab Color="Color.Error" Size="Size.Medium" StartIcon="@Icons.Material.Rounded.Delete"
+                            aria-label="Elimina scheda" OnClick="@DeleteScheda"/>
+                </div>
+                @if (NetworkService.IsNetworkAvailable() && syncState == SyncState.DaInviare)
                {
-                    <MudFab Color="Color.Info" Size="Size.Small" StartIcon="@Icons.Material.Rounded.Edit"
-                            OnClick="@UpdateScheda"/>
-                    <MudFab Color="Color.Error" Size="Size.Small" StartIcon="@Icons.Material.Rounded.Delete"
-                            OnClick="@DeleteScheda"/>
-                    <MudFab Color="Color.Success" Size="Size.Small" StartIcon="@Icons.Material.Rounded.CloudSync"
-                            OnClick="@ExportScheda"/>
-                }
-                else
-                {
-                    <MudFab Color="Color.Info" Size="Size.Small" StartIcon="@Icons.Material.Rounded.Edit"
-                            OnClick="@UpdateScheda"/>
-                    <MudFab Color="Color.Error" Size="Size.Small" StartIcon="@Icons.Material.Rounded.Delete"
-                            OnClick="@DeleteScheda"/>
+                    <MudFab Color="Color.Primary" Size="Size.Medium" StartIcon="@Icons.Material.Rounded.CloudUpload"
+                            Label="Invia" aria-label="Invia scheda al server" OnClick="@ExportScheda"/>
                }
            }
            else
            {
-                <MudFab Color="Color.Info" Size="Size.Small" StartIcon="@Icons.Material.Rounded.RemoveRedEye"
-                        OnClick="@ViewScheda"/>
-                <MudFab Color="Color.Success" Size="Size.Small" StartIcon="@Icons.Material.Rounded.CloudSync"
-                        OnClick="@ExportImg"/>
+                <div class="action-secondary">
+                    <MudFab Color="Color.Default" Size="Size.Medium" StartIcon="@Icons.Material.Rounded.RemoveRedEye"
+                            aria-label="Visualizza scheda" OnClick="@ViewScheda"/>
+                </div>
+                <MudFab Color="Color.Primary" Size="Size.Medium" StartIcon="@Icons.Material.Rounded.CloudUpload"
+                        Label="Invia foto" aria-label="Invia foto al server" OnClick="@ExportImg"/>
            }
        </div>
    </div>
@@ -112,52 +119,74 @@

    private async Task ExportScheda()
    {
+        // Guardia anti doppio-tap: invio irreversibile al server.
+        if (VisibleOverlay) return;
+
        VisibleOverlay = true;
        StateHasChanged();

-        var apiResponse = await IntegrySteupService.SaveScheda(
-            new SaveRequestDto
-            {
-                LocalIdScheda = Scheda.Id,
-                ActivityTypeId = Scheda.ActivityTypeId,
-                CodJfas = Scheda.CodJfas,
-                CodMdep = Ispezione.CodMdep,
-                DataCreazione = Ispezione.Data,
-                Note = Scheda.Note,
-                PersonaRif = Scheda.Responsabile,
-                Barcodes = Scheda.Articoli.ConvertAll(x => x.Barcode),
-                Scandeza = (ScadenzaEnum)Scheda.Scadenza,
-                ParentActivityId = Scheda.Ispezione?.ActivityId
-            }
-        );
-
-        if (apiResponse != null)
+        try
        {
-            Scheda.ActivityId = apiResponse.ActivityIdScheda;
-            SteupDataService.InspectionPageState.Ispezione.ActivityId = apiResponse.ActivityIdIspezione;
-
-            await IspezioniService.UpdateActivityIdIspezioneAsync(Ispezione.CodMdep, Ispezione.Data,
-                UserSession.User.Username, apiResponse.ActivityIdIspezione
+            var apiResponse = await IntegrySteupService.SaveScheda(
+                new SaveRequestDto
+                {
+                    LocalIdScheda = Scheda.Id,
+                    ActivityTypeId = Scheda.ActivityTypeId,
+                    CodJfas = Scheda.CodJfas,
+                    CodMdep = Ispezione.CodMdep,
+                    DataCreazione = Ispezione.Data,
+                    Note = Scheda.Note,
+                    PersonaRif = Scheda.Responsabile,
+                    Barcodes = Scheda.Articoli.ConvertAll(x => x.Barcode),
+                    Scandeza = (ScadenzaEnum)Scheda.Scadenza,
+                    ParentActivityId = Scheda.Ispezione?.ActivityId
+                }
            );
-            await IspezioniService.UpdateActivityIdSchedaAsync(Scheda.Id, Scheda.ActivityId);
-        }

-        VisibleOverlay = false;
-        StateHasChanged();
+            if (apiResponse != null)
+            {
+                Scheda.ActivityId = apiResponse.ActivityIdScheda;
+                SteupDataService.InspectionPageState.Ispezione.ActivityId = apiResponse.ActivityIdIspezione;
+
+                await IspezioniService.UpdateActivityIdIspezioneAsync(Ispezione.CodMdep, Ispezione.Data,
+                    UserSession.User.Username, apiResponse.ActivityIdIspezione
+                );
+                await IspezioniService.UpdateActivityIdSchedaAsync(Scheda.Id, Scheda.ActivityId);
+
+                // Notifica il genitore così il contatore "da inviare" del reparto si aggiorna.
+                await OnSchedaModified.InvokeAsync(Scheda);
+            }
+        }
+        finally
+        {
+            VisibleOverlay = false;
+            StateHasChanged();
+        }
    }

    private async Task ExportImg()
    {
-        if (Scheda.ImageNames == null) return;
+        if (VisibleOverlay || Scheda.ImageNames == null) return;

-        var fileList = (await FileManager.GetInspectionFiles(Ispezione, Scheda.ImageNames))?
-            .Where(x => x.ToUpload).ToList();
+        VisibleOverlay = true;
+        StateHasChanged();

-        if (fileList == null) return;
-
-        foreach (var file in fileList)
+        try
        {
-            await IntegrySteupService.UploadFile(Scheda.ActivityId!, file.FileBytes!, file.Name!);
+            var fileList = (await FileManager.GetInspectionFiles(Ispezione, Scheda.ImageNames))?
+                .Where(x => x.ToUpload).ToList();
+
+            if (fileList == null) return;
+
+            foreach (var file in fileList)
+            {
+                await IntegrySteupService.UploadFile(Scheda.ActivityId!, file.FileBytes!, file.Name!);
+            }
+        }
+        finally
+        {
+            VisibleOverlay = false;
+            StateHasChanged();
        }
    }
 }
@@ -1,23 +1,48 @@
 .scheda-card{
-    padding: .75rem 1.25rem;
-    background-color: var(--light-card-background);
+    padding: .55rem .85rem;
+    background-color: var(--mud-palette-surface);
+    border: 1px solid var(--card-border-color);
    border-radius: 1em;
+    box-shadow: var(--card-box-shadow);
 }

 .scheda-body-section{
    display: flex;
    flex-direction: column;
-    gap: 1rem;
+    gap: .5rem;
 }

 .title-section{
    display: flex;
    align-items: center;
    justify-content: space-between;
+    gap: .5rem;
+}
+
+.scheda-title-group{
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: .15rem;
+    min-width: 0;
+}
+
+.sync-badge{
+    margin: 0;
 }

 .scheda-card-action{
    display: flex;
-    gap: 1rem;
-    justify-content: center;
+    gap: .5rem;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+/* Azioni secondarie (modifica/elimina) raggruppate e ancorate a sinistra;
+   l'azione primaria "Invia" (corallo) resta separata e a portata di pollice a destra. */
+.action-secondary{
+    display: flex;
+    gap: .5rem;
+    align-items: center;
 }
@@ -187,7 +187,7 @@
                @if (!LabelSave.IsNullOrEmpty())
                {
                    <div class="container-button">
-                        <MudButton OnClick="@Save" Color="Color.Primary" Variant="Variant.Filled">
+                        <MudButton OnClick="@Save" Color="Color.Primary" Variant="Variant.Filled" FullWidth="true">
                            @LabelSave
                        </MudButton>
                    </div>
@@ -626,7 +626,7 @@

    #endregion

-    private void SuggestActivityDescription()
+    private async Task SuggestActivityDescription()
    {
        if (Scheda.ActivityTypeId == null)
        {
@@ -637,18 +637,25 @@
        VisibleOverlay = true;
        StateHasChanged();

-        _ = Task.Run(async () =>
+        try
        {
            var activityDescriptions = await IntegryApiService.SuggestActivityDescription(Scheda.ActivityTypeId);

            var modal = await Dialog.OpenSuggestActivityDescription(activityDescriptions);

-            if (modal is { Canceled: false, Data: not null })
-                Scheda.Note = modal.Data!.ToString();
-
+            if (modal is { Canceled: false, Data: string descrizione } && !string.IsNullOrWhiteSpace(descrizione))
+            {
+                Scheda.Note = descrizione;
+                // Mostra la nota selezionata nel campo e aggiorna lo stato (dirty → Salva/Aggiorna),
+                // come farebbe l'input manuale dell'utente.
+                OnAfterChangeValue();
+            }
+        }
+        finally
+        {
            VisibleOverlay = false;
-            await InvokeAsync(StateHasChanged);
-        });
+            StateHasChanged();
+        }
    }

    #region Scanner
@@ -0,0 +1,56 @@
+using MudBlazor;
+using SteUp.Shared.Core.Entities;
+
+namespace SteUp.Shared.Core.Helpers;
+
+/// <summary>
+/// Stato di sincronizzazione di una scheda rispetto al server Integry.
+/// Principio "Offline è la verità": il rilevatore deve sempre vedere cosa è
+/// ancora solo sul dispositivo e cosa è già arrivato al server.
+/// </summary>
+public enum SyncState
+{
+    /// Salvata solo in locale, non ancora inviata al server.
+    DaInviare = 0,
+
+    /// Inviata al server (ha un ActivityId).
+    Inviato = 1
+}
+
+public static class SchedaSyncHelper
+{
+    public static SyncState GetSyncState(this Scheda scheda) =>
+        string.IsNullOrEmpty(scheda.ActivityId) ? SyncState.DaInviare : SyncState.Inviato;
+
+    public static string ToLabel(this SyncState state) =>
+        state switch
+        {
+            SyncState.DaInviare => "Da inviare",
+            SyncState.Inviato => "Inviato",
+            _ => string.Empty
+        };
+
+    /// <summary>
+    /// Colore del badge. Corallo (Primary) = azione richiesta (da inviare);
+    /// verde (Success) = fatto (inviato). Rispetta la Regola dell'Unico Accento.
+    /// </summary>
+    public static Color GetColor(this SyncState state) =>
+        state switch
+        {
+            SyncState.DaInviare => Color.Primary,
+            SyncState.Inviato => Color.Success,
+            _ => Color.Default
+        };
+
+    public static string GetIcon(this SyncState state) =>
+        state switch
+        {
+            SyncState.DaInviare => Icons.Material.Rounded.PhonelinkOff,
+            SyncState.Inviato => Icons.Material.Rounded.CloudDone,
+            _ => string.Empty
+        };
+
+    /// Numero di schede non ancora inviate in una lista.
+    public static int CountDaInviare(this IEnumerable<Scheda> schede) =>
+        schede.Count(s => s.GetSyncState() == SyncState.DaInviare);
+}
@@ -7,12 +7,13 @@ public static class StatusEnumHelper
 {
    public static string ConvertToHumanReadable(this StatusEnum enumValue)
    {
+        // Sentence-case: l'enfasi la dà il peso del chip, non il maiuscolo (Regola del Peso, non del Maiuscolo).
        return enumValue switch
        {
-            StatusEnum.InCorso => "IN CORSO",
-            StatusEnum.Completata => "COMPLETATA",
-            StatusEnum.Verifica => "VERIFICA",
-            StatusEnum.Annullata => "ANNULLATA",
+            StatusEnum.InCorso => "In corso",
+            StatusEnum.Completata => "Completata",
+            StatusEnum.Verifica => "Verifica",
+            StatusEnum.Annullata => "Annullata",
            _ => throw new ArgumentOutOfRangeException(nameof(enumValue), enumValue, null)
        };
    }
@@ -5,6 +5,8 @@
    /*Utility*/
    --exception-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
    --custom-box-shadow: 1px 2px 5px var(--gray-for-shadow);
+    /* Ombra morbida a due livelli, tinta col navy del brand: stacca le card dallo sfondo senza pesare */
+    --card-box-shadow: 0 1px 2px rgba(0, 35, 57, 0.08), 0 6px 16px rgba(0, 35, 57, 0.10);
    --mud-default-borderradius: 20px !important;
    --m-page-x: 1rem;
    --mh-header: 4rem;