/*
 * Pattern mobile-specific. Densita' touch, full-height layout, safe-area.
 * Vedi docs/ui-guidelines.md sezione 8.
 */

.mobile-shell {
    display: flex;
    flex-direction: column;
    /* Altezza CAPpata al viewport (non min-height): così è la .mobile-body interna a
       scrollare e gli header sticky restano in cima, invece di far scorrere l'intera
       pagina e sovrapporre il contenuto all'header. */
    height: 100vh;
    height: 100dvh;
    background: var(--app-bg);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobile-shell-blank { background: var(--app-bg); }

.mobile-shell-main .mobile-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--app-space-4);
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0));
}

/* Pagine interne con header sticky: lo scroller ESTERNO non ha padding. Così
   l'header (.mobile-header) parte a filo della topbar ed è a tutta larghezza, e
   il contenuto — scrollando — passa pulito SOTTO l'header invece di intravedersi
   nella banda di padding sopra di esso (alcuni browser ancorano lo sticky al
   content-box, cioè rispettano il padding-top, lasciando quella banda).
   Il padding del contenuto lo fornisce il .mobile-body INTERNO della pagina.
   Le pagine senza header (es. Home) tengono il padding della regola qui sopra. */
.mobile-shell-main > .mobile-body:has(> .mobile-header) {
    padding: 0;
}

/* Topbar */
.mobile-topbar {
    position: sticky;
    top: 0;
    /* Sopra gli header di pagina (z-index 10): da questa revisione la topbar OSPITA il menu
       utente, che dev'essere disegnato sopra l'header della pagina sottostante. */
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--app-space-4);
    padding-top: max(var(--app-space-4), env(safe-area-inset-top));
    background: linear-gradient(135deg, var(--app-brand-primary), var(--app-brand-primary-hover));
    color: var(--app-brand-primary-fg);
    box-shadow: var(--app-shadow);
}
.mobile-topbar-greeting { display: flex; flex-direction: column; line-height: 1.2; }
.mobile-topbar-hello { font-size: var(--app-fs-sm); opacity: 0.85; }
.mobile-topbar-name { font-size: var(--app-fs-h3); font-weight: var(--app-fw-semibold); }
/* Trigger del menu account. Era 36x36 (la dimensione nuda dell'avatar): il target più piccolo
   della shell, contro i 48x48 minimi di progetto (ui-guidelines §8.4). Diventando l'unica via
   ad account e logout, il target va portato al minimo. */
.mobile-topbar-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--app-space-1);
    min-width: 48px;
    min-height: 48px;
    background: none;
    border: none;
    border-radius: var(--app-radius-pill);
    padding: var(--app-space-1);
    cursor: pointer;
    color: inherit;
}
.mobile-topbar-chevron { font-size: var(--app-fs-sm); opacity: 0.85; }

.mobile-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--app-radius-pill);
    background: rgba(255, 255, 255, 0.18);
    color: var(--app-brand-primary-fg);
    font-size: var(--app-fs-body);
    font-weight: var(--app-fw-semibold);
}

/* User menu dropdown */
/* Vive nello stacking context della topbar (z-index 30), sotto il menu (z-index 1): resta fixed
   e copre tutto il viewport — sticky non crea containing block per fixed — ma così il tap fuori
   dal menu chiude anche quando cade sulla topbar stessa, non solo sul contenuto sottostante. */
.mobile-usermenu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
}
/* Ancorato alla topbar, non al viewport. Prima era `fixed; top: 72px`, un numero che presumeva
   l'altezza della topbar: con `padding-top: max(space-4, env(safe-area-inset-top))` su iPhone con
   notch in standalone la topbar misura ~99px e il menu si disegnava SOPRA saluto e avatar.
   La topbar è sticky, quindi è già containing block: `absolute; top: 100%` non ha numeri da
   mantenere. z-index locale allo stacking context della topbar. */
.mobile-usermenu {
    position: absolute;
    top: 100%;
    right: var(--app-space-4);
    z-index: 1;
    min-width: 200px;
    background: var(--app-surface);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-lg);
    padding: var(--app-space-2) 0;
    color: var(--app-text);
}
.mobile-usermenu-item {
    display: flex;
    align-items: center;
    gap: var(--app-space-3);
    width: 100%;
    padding: var(--app-space-3) var(--app-space-4);
    background: none;
    border: none;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    font-size: var(--app-fs-base);
    text-align: left;
}
.mobile-usermenu-item:active { background: var(--app-surface-alt); }
.mobile-usermenu-item-danger { color: var(--app-danger); }
.mobile-usermenu-item i { font-size: var(--app-fs-h3); }

/* Header pagine interne: barra sticky a tutta larghezza, a filo della topbar.
   Lo scroller delle pagine con header non ha padding (vedi regola sopra), quindi
   l'header parte a filo e occupa tutta la larghezza senza margini negativi.
   Niente safe-area sul padding-top: la topbar copre già la notch, l'header non è
   mai a filo schermo. */
.mobile-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    gap: var(--app-space-2);
    padding: var(--app-space-3) var(--app-space-4);
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border);
}
.mobile-header-title {
    margin: 0;
    font-size: var(--app-fs-h3);
    font-weight: var(--app-fw-semibold);
    text-align: center;
}
.mobile-header-back, .mobile-header-spacer {
    width: 40px; height: 40px;
    background: none;
    border: none;
    border-radius: var(--app-radius-pill);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--app-text);
    font-size: var(--app-fs-h2);
}
.mobile-header-back:active { background: var(--app-surface-alt); }
.mobile-header-actions { justify-self: end; }

/* Bottom nav */
.mobile-bottomnav {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    background: var(--app-surface);
    border-top: 1px solid var(--app-border);
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}
.mobile-bottomnav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--app-space-2) 0;
    color: var(--app-text-muted);
    text-decoration: none;
    font-size: var(--app-fs-sm);
    min-height: 56px;
}
.mobile-bottomnav-item i { font-size: var(--app-fs-h3); }
.mobile-bottomnav-item.active { color: var(--app-brand-primary); font-weight: var(--app-fw-semibold); }
/* Segnale NON cromatico della voce attiva: il brand (#e51943, 4,61:1) e il muted (#6c757d,
   4,69:1) hanno luminanza praticamente identica, quindi distinguere l'attiva dal solo colore
   sarebbe discriminazione di sola tinta (WCAG 1.4.1); l'unico altro segnale era il font-weight
   su testo da 11px. */
.mobile-bottomnav-item.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--app-brand-primary);
}
.mobile-bottomnav-item.disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; }
/* L'outline nativo dello UA si TIENE (il browser ne garantisce il contrasto su qualsiasi fondo)
   e il box-shadow fa solo da alone di brand. Sopprimerlo lasciava come unico segnale un anello
   al 45% di opacità: composto vale ~1,15:1 sul bianco della barra e ~1,29:1 sul rosso della
   topbar, contro il 3:1 di WCAG 1.4.11 — e il trigger dell'account è l'unica via a logout e
   cambio password, quindi un focus impercettibile lì è bloccante da tastiera. */
.mobile-bottomnav-item:focus-visible,
.mobile-topbar-menu:focus-visible {
    outline-offset: 2px;
    box-shadow: var(--app-shadow-focus);
}

/* Card */
.mobile-card {
    background: var(--app-surface);
    border-radius: var(--app-radius-xl);
    box-shadow: var(--app-shadow-sm);
    padding: var(--app-space-4);
    margin-bottom: var(--app-space-3);
}

/* Big button (touch target >= 48px) */
.big-btn {
    width: 100%;
    min-height: 48px;
    border-radius: var(--app-radius-lg);
    border: none;
    padding: 0 var(--app-space-4);
    font-size: var(--app-fs-h3);
    font-weight: var(--app-fw-semibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--app-space-2);
    transition: background-color var(--app-transition), box-shadow var(--app-transition);
}
.big-btn:disabled { opacity: 0.55; cursor: not-allowed; }
/* Pulsanti impilati: stessa spaziatura verticale delle card (niente <br> manuali). */
.big-btn + .big-btn { margin-top: var(--app-space-3); }
.big-btn-primary {
    background: var(--app-brand-primary);
    color: var(--app-brand-primary-fg);
}
.big-btn-primary:not(:disabled):active { background: var(--app-brand-primary-hover); }
.big-btn-outline {
    background: transparent;
    color: var(--app-brand-primary);
    border: 1.5px solid var(--app-brand-primary);
}
.big-btn-danger {
    background: var(--app-danger);
    color: var(--app-danger-fg);
}
.big-btn-danger:not(:disabled):active { background: var(--app-danger-hover); }
.big-btn-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: mobile-spin 700ms linear infinite;
}

/* StatusMessage */
.mobile-status {
    display: flex;
    align-items: center;
    gap: var(--app-space-2);
    padding: var(--app-space-3);
    border-radius: var(--app-radius-lg);
    margin-bottom: var(--app-space-3);
    font-size: var(--app-fs-base);
}
.mobile-status-success { background: var(--app-success-bg); color: var(--app-success); }
.mobile-status-error   { background: var(--app-danger-bg); color: var(--app-danger); }
.mobile-status-warning { background: var(--app-warning-bg); color: var(--app-warning-fg); }
.mobile-status-info    { background: var(--app-info-bg); color: var(--app-info); }
.mobile-status-dismiss {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: var(--app-fs-h2);
}

/* EmptyState */
.mobile-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--app-space-6);
    gap: var(--app-space-2);
}
.mobile-empty-icon { font-size: var(--app-fs-display); color: var(--app-text-subtle); }
.mobile-empty-title { font-size: var(--app-fs-h3); font-weight: var(--app-fw-semibold); }
.mobile-empty-desc { font-size: var(--app-fs-body); color: var(--app-text-muted); }

/* LoadingState */
.mobile-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--app-space-3);
    padding: var(--app-space-6);
    color: var(--app-text-muted);
}
/* Attesa del ripristino sessione al boot: tiene il posto del Router, che non e'
   ancora montato. Riempie il viewport perche' non c'e' nessuna shell attorno. */
.mobile-splash {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
}
.mobile-loading-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--app-divider);
    border-top-color: var(--app-brand-primary);
    border-radius: 50%;
    animation: mobile-spin 700ms linear infinite;
}

@keyframes mobile-spin { to { transform: rotate(360deg); } }

/* Form base */
.mobile-form-group { margin-bottom: var(--app-space-3); }
.mobile-form-label {
    display: block;
    font-size: var(--app-fs-body-sm);
    font-weight: var(--app-fw-medium);
    color: var(--app-text-muted);
    margin-bottom: var(--app-space-1);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.mobile-form-input {
    width: 100%;
    min-height: 44px;
    padding: 0 var(--app-space-3);
    font-size: var(--app-fs-h4);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    color: var(--app-text);
}
.mobile-form-input:focus { border-color: var(--app-brand-primary); }

/* Pattern auth (.auth-page, .auth-card, .field, .auth-button, ...) e i
   design tokens sono in SinergicaHR.WebAssets, condivisi con il BackOffice.
   Vedi _content/SinergicaHR.WebAssets/css/auth.css + theme.css. */

/* Servizio non disponibile */
.mobile-error-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--app-space-8) var(--app-space-6);
    background: linear-gradient(135deg, #fff5f5 0%, #ffeaea 100%);
}
.mobile-error-icon {
    width: 72px;
    height: 72px;
    background: var(--app-surface);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--app-danger);
    box-shadow: var(--app-shadow-md);
    margin-bottom: var(--app-space-5);
}
.mobile-error-title { font-size: var(--app-fs-h2); font-weight: var(--app-fw-semibold); color: var(--app-danger); margin: 0 0 var(--app-space-2); }
.mobile-error-desc { font-size: var(--app-fs-base); color: var(--app-text); line-height: 1.5; margin-bottom: var(--app-space-5); max-width: 360px; }
.mobile-error-hints {
    background: var(--app-surface);
    border-radius: var(--app-radius-xl);
    padding: var(--app-space-4);
    width: 100%;
    max-width: 320px;
    box-shadow: var(--app-shadow);
    margin-bottom: var(--app-space-5);
    text-align: left;
}
.mobile-error-hints-title {
    font-size: var(--app-fs-xs);
    color: var(--app-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--app-fw-semibold);
    margin-bottom: var(--app-space-2);
}
.mobile-error-hints ul { margin: 0; padding-left: var(--app-space-5); color: var(--app-text); font-size: var(--app-fs-body); line-height: 1.6; }
.mobile-error-footer { color: var(--app-text-muted); font-size: var(--app-fs-xs); margin-top: var(--app-space-6); }

/* Lista di sezioni tappabili (pagina /altro). Righe piatte con divisore, non bottoni: sono
   navigazione, e in questa codebase .big-btn significa «compi l'azione». */
.mobile-navlist { display: flex; flex-direction: column; }
.mobile-navlist-item {
    display: flex;
    align-items: center;
    gap: var(--app-space-3);
    min-height: 56px;
    padding: var(--app-space-3) 0;
    border-bottom: 1px solid var(--app-divider);
    color: var(--app-text);
    text-decoration: none;
    font-size: var(--app-fs-base);
}
.mobile-navlist-item:last-child { border-bottom: none; }
.mobile-navlist-item:active { background: var(--app-surface-alt); }
.mobile-navlist-item:focus-visible { outline-offset: 2px; box-shadow: var(--app-shadow-focus); }
.mobile-navlist-item > i:first-child { font-size: var(--app-fs-h3); color: var(--app-brand-primary); }
.mobile-navlist-label { flex: 1 1 auto; }
.mobile-navlist-chevron { color: var(--app-text-muted); }

/* Utilities */
.mobile-stack-2 > * + * { margin-top: var(--app-space-2); }
.mobile-stack-3 > * + * { margin-top: var(--app-space-3); }
.mobile-stack-4 > * + * { margin-top: var(--app-space-4); }
.mobile-text-center { text-align: center; }
.mobile-text-muted { color: var(--app-text-muted); }
.mobile-text-sm { font-size: var(--app-fs-body-sm); }
/* Titolo visibile ai soli screen reader (h1 della home per FocusOnNavigate). Nel progetto non
   esisteva alcuna classe screen-reader-only. */
.mobile-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ====================== P7.5 Presenze ====================== */

/* Segmented control (chip modalità di lavoro) */
.mobile-segmented { display: flex; gap: var(--app-space-2); }
.mobile-segmented-item {
    flex: 1 1 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    padding: var(--app-space-2);
    border: 1.5px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    background: var(--app-surface);
    color: var(--app-text-muted);
    font-size: var(--app-fs-sm);
    font-weight: var(--app-fw-medium);
    cursor: pointer;
}
.mobile-segmented-item i { font-size: var(--app-fs-h3); }
.mobile-segmented-item.active {
    border-color: var(--app-brand-primary);
    background: var(--app-brand-primary);
    color: var(--app-brand-primary-fg);
}

/* Dialog modale (es. conferma GPS "timbra comunque") */
.mobile-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--app-space-4);
    padding-bottom: calc(var(--app-space-4) + env(safe-area-inset-bottom, 0));
}
.mobile-dialog {
    width: 100%;
    max-width: 480px;
    background: var(--app-surface);
    border-radius: var(--app-radius-xl);
    box-shadow: var(--app-shadow-lg);
    padding: var(--app-space-5);
}
.mobile-dialog-title { font-size: var(--app-fs-h3); font-weight: var(--app-fw-semibold); margin-bottom: var(--app-space-2); }
.mobile-dialog-message { font-size: var(--app-fs-base); color: var(--app-text-muted); margin: 0 0 var(--app-space-4); line-height: 1.5; }
.mobile-dialog-actions { display: flex; flex-direction: column; gap: var(--app-space-2); margin-top: var(--app-space-4); }

/* Indicatore GPS */
.mobile-gps { display: inline-flex; align-items: center; gap: var(--app-space-1); font-size: var(--app-fs-body-sm); font-weight: var(--app-fw-medium); }
.mobile-gps-ok { color: var(--app-success); }
.mobile-gps-warn { color: var(--app-warning-fg); }

/* Timer cronometro */
.mobile-timer { text-align: center; padding: var(--app-space-5) 0; }
.mobile-timer-value {
    font-size: 3rem;
    font-weight: var(--app-fw-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: var(--app-text);
}
.mobile-timer-label { font-size: var(--app-fs-body); color: var(--app-text-muted); }

/* Righe dettaglio / lista (sede, modalità, sessioni del giorno) */
.mobile-detail-row {
    display: flex;
    justify-content: space-between;
    gap: var(--app-space-3);
    padding: var(--app-space-2) 0;
    border-bottom: 1px solid var(--app-divider);
    font-size: var(--app-fs-base);
}
.mobile-detail-row:last-child { border-bottom: none; }
.mobile-detail-label { color: var(--app-text-muted); }
.mobile-detail-value { font-weight: var(--app-fw-medium); text-align: right; }

/* Badge di stato richieste (MieRichieste + widget home; P13.6 — prima mancavano) */
.mobile-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--app-radius-sm);
    border: 1px solid transparent;
    font-size: var(--app-fs-sm);
    font-weight: var(--app-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.mobile-badge.ok { background: var(--app-success-bg); color: var(--app-success-fg); border-color: var(--app-success-border); }
.mobile-badge.attesa { background: var(--app-warning-bg); color: var(--app-warning-fg); border-color: var(--app-warning-border); }
.mobile-badge.neutro { background: var(--app-bg); color: var(--app-text-muted); border-color: var(--app-border); }
.mobile-badge.errore { background: var(--app-danger-bg); color: var(--app-danger); border-color: var(--app-danger-border); }

/* Header di card con link contestuale (widget home, P13.6) */
.mobile-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--app-space-3);
    margin-bottom: var(--app-space-3);
}
.mobile-card-title { font-size: var(--app-fs-base); font-weight: var(--app-fw-semibold); }
.mobile-card-link { font-size: var(--app-fs-body-sm); color: var(--app-brand-primary); text-decoration: none; white-space: nowrap; }

/* Widget saldi in home (wireframe 09, P13.6) */
.mobile-saldi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: var(--app-space-2);
    text-align: center;
}
.mobile-saldo-valore { font-size: var(--app-fs-h2); font-weight: var(--app-fw-semibold); color: var(--app-brand-primary); }
.mobile-saldo-label { font-size: var(--app-fs-sm); color: var(--app-text-muted); }

/* Banner di aggiornamento della PWA (js/app-update.js). Sta sopra la bottom nav
   invece di coprirla: la risorsa deve poter continuare a navigare anche se non
   aggiorna subito. Sulle pagine senza nav (login) resta comunque leggibile. */
.app-update-banner {
    position: fixed;
    left: var(--app-space-4);
    right: var(--app-space-4);
    bottom: calc(64px + env(safe-area-inset-bottom, 0) + var(--app-space-3));
    z-index: 40;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--app-space-3);

    padding: var(--app-space-3) var(--app-space-4);
    background: var(--app-info-bg);
    border: 1px solid var(--app-info-border);
    border-radius: var(--app-radius);
    color: var(--app-info-fg);
}
.app-update-banner-text { font-size: var(--app-fs-body); }
.app-update-banner-action {
    flex: none;
    padding: var(--app-space-2) var(--app-space-4);
    background: var(--app-info);
    border: 1px solid var(--app-info);
    border-radius: var(--app-radius-sm);
    color: #ffffff;
    font-size: var(--app-fs-body);
    font-weight: var(--app-fw-semibold);
    cursor: pointer;
}
.app-update-banner-action:disabled { opacity: 0.6; cursor: default; }

/* ============================================================================
   Anteprima allegato (AnteprimaAllegato, P19)
   A piena pagina: sul telefono una finestrella non serve a nulla.
   ============================================================================ */
.mobile-anteprima-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: stretch;
    justify-content: center;
}
.mobile-anteprima {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--app-surface);
    padding: var(--app-space-3);
    padding-top: calc(var(--app-space-3) + env(safe-area-inset-top, 0));
    padding-bottom: calc(var(--app-space-3) + env(safe-area-inset-bottom, 0));
    gap: var(--app-space-3);
}
.mobile-anteprima-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--app-space-2);
}
.mobile-anteprima-nome {
    font-weight: var(--app-fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-anteprima-chiudi {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: var(--app-text);
    font-size: var(--app-fs-h3);
}
.mobile-anteprima-viewport {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    background: var(--app-surface-alt);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    overflow: auto;
}
.mobile-anteprima-immagine {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.mobile-anteprima-documento {
    width: 100%;
    height: 100%;
    border: 0;
}
.mobile-anteprima-azioni {
    display: flex;
    flex-direction: column;
    gap: var(--app-space-2);
}
.mobile-anteprima-navigazione {
    display: flex;
    align-items: center;
    gap: var(--app-space-2);
}
.mobile-anteprima-navigazione .big-btn { flex: 1 1 0; }
.mobile-anteprima-contatore {
    flex: 0 0 auto;
    color: var(--app-text-muted);
    font-variant-numeric: tabular-nums;
    min-width: 4em;
    text-align: center;
}

/* Coppia di campi affiancati (es. anno + mese del riepilogo note spese, P21) */
.mobile-form-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--app-space-3);
}

/* Vista a righe compatte, alternativa alle schede (P21): una nota per riga, due linee di
   testo. Tocco pieno sulla riga e focus visibile: la riga è un button, non un div. */
.mobile-rowlist {
    background: var(--app-surface);
    border-radius: var(--app-radius-xl);
    box-shadow: var(--app-shadow-sm);
    margin-bottom: var(--app-space-3);
    overflow: hidden;
}
.mobile-rowlist-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--app-space-3);
    min-height: 56px;
    padding: var(--app-space-3) var(--app-space-4);
    border: 0;
    border-bottom: 1px solid var(--app-divider);
    background: none;
    color: var(--app-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.mobile-rowlist-item:last-child { border-bottom: none; }
.mobile-rowlist-item:active { background: var(--app-bg); }
.mobile-rowlist-main { min-width: 0; }
.mobile-rowlist-titolo {
    display: block;
    font-weight: var(--app-fw-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-rowlist-meta {
    display: block;
    font-size: var(--app-fs-sm);
    color: var(--app-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-rowlist-coda {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.mobile-rowlist-importo { font-weight: var(--app-fw-semibold); font-variant-numeric: tabular-nums; }