/* Vista PC / telefono - OneDrive, Utenti, GestioneUtentiCloud, Statistiche, Home (prefisso vv-).
   Solo le regole proprie di queste pagine: quelle comuni stanno in app.css (ed-*, vt-*, mg-pagina--tel). */

/* ============================================================================
   HOME (Pages/Home.razor)
   Il blocco <style> della pagina ha già gli aggiustamenti da telefono, ma solo per larghezza
   (max-width 575px). Qui li ripeto sotto .vv-home--tel, così scattano anche quando l'utente sceglie la
   vista Telefono su uno schermo largo. Doppia classe: vince sul blocco <style> locale letto dopo.
   Con la vista PC (anche forzata su un telefono) restano solo le regole a 575px della pagina.
   ============================================================================ */
.vv-home.vv-home--tel .home-hero { flex-wrap: wrap; padding: .9rem 1rem; }
.vv-home.vv-home--tel .home-hero-menu { margin-left: auto; }
.vv-home.vv-home--tel .home-hero-menu-btn { min-height: 40px; min-width: 40px; justify-content: center; }
.vv-home.vv-home--tel .home-hero-menu-pop { max-width: calc(100vw - 2rem); }
.vv-home.vv-home--tel .home-hero-menu-item { min-height: 40px; font-size: 16px; }
.vv-home.vv-home--tel .home-hero-menu-item input[type="checkbox"] { width: 20px; height: 20px; }
.vv-home.vv-home--tel .home-card-hide-btn { width: 36px; height: 36px; }
.vv-home.vv-home--tel .home-card-body { padding: .75rem; }

/* Riquadro preferiti */
.vv-home.vv-home--tel .home-tile-grip { font-size: .9rem; padding: 0 .2rem 0 .3rem; }
.vv-home.vv-home--tel .home-tile-link { padding: .5rem .55rem .5rem .15rem; gap: .45rem; align-items: center; }
.vv-home.vv-home--tel .home-tile-icon-wrap { width: 28px; height: 28px; font-size: .85rem; flex-shrink: 0; }
.vv-home.vv-home--tel .home-tile-label {
    font-size: .78rem;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.25;
    word-break: break-word;
}
.vv-home.vv-home--tel .home-tile { align-items: stretch; height: auto; min-height: 48px; }

/* Avvisi (ClientSecret Office 365, licenza) */
.vv-home.vv-home--tel .home-alert-secret { padding: .7rem .85rem; gap: .6rem; }
.vv-home.vv-home--tel .home-alert-secret-icon { width: 38px; height: 38px; font-size: 1.15rem; }
.vv-home.vv-home--tel .home-alert-secret-title { font-size: .88rem; }
.vv-home.vv-home--tel .home-alert-secret-sub { font-size: .76rem; }
.vv-home.vv-home--tel .home-alert-secret-close { width: 40px; height: 40px; }

/* Stati bloccanti (licenza scaduta, utente disattivato, ...) */
.vv-home.vv-home--tel .home-stato-blocco { margin: 1.5rem .5rem; padding: 1.1rem 1.2rem; gap: .75rem; }
.vv-home.vv-home--tel .home-stato-blocco-icon { width: 40px; height: 40px; font-size: 1.2rem; }
.vv-home.vv-home--tel .home-stato-blocco-title { font-size: .95rem; }
.vv-home.vv-home--tel .home-stato-blocco-sub { font-size: .82rem; }

/* ============================================================================
   STATISTICHE (FatturatoAnnuale fa-, FatturatoPeriodo fp-, StatisticheArticoliVenduti sav-)
   Vista telefono: filtri in una colonna con le etichette sopra (le etichette fisse da 80px restano
   solo su PC), controlli alti 40px con font 16px. La classe vv-stat--tel sta sulla sezione dei filtri.
   ============================================================================ */
.vv-stat--tel .fa-field-row,
.vv-stat--tel .fp-field-row,
.vv-stat--tel .sav-field-row {
    flex-direction: column;
    align-items: stretch;
    gap: .3rem;
}
.vv-stat--tel .fa-field-row .fa-label,
.vv-stat--tel .fp-field-row .fp-label,
.vv-stat--tel .sav-field-row .sav-label {
    flex: none;
    margin: .35rem 0 0;
}
.vv-stat--tel .fa-field-row .fa-control,
.vv-stat--tel .fp-field-row .fp-control,
.vv-stat--tel .sav-field-row .sav-control {
    flex: none;
    width: 100%;
}
.vv-stat--tel .fa-field-row .form-control,
.vv-stat--tel .fp-field-row .form-control,
.vv-stat--tel .sav-field-row .form-control,
.vv-stat--tel .fa-field-row .btn,
.vv-stat--tel .fp-field-row .btn,
.vv-stat--tel .sav-field-row .btn {
    min-height: 40px;
    font-size: 16px;
}
.vv-stat--tel .fa-field-row .dxbl-text-edit,
.vv-stat--tel .fp-field-row .dxbl-text-edit,
.vv-stat--tel .sav-field-row .dxbl-text-edit {
    min-height: 40px;
}
.vv-stat--tel .fa-field-row .dxbl-text-edit input,
.vv-stat--tel .fp-field-row .dxbl-text-edit input,
.vv-stat--tel .sav-field-row .dxbl-text-edit input {
    font-size: 16px;
}
/* Bottone Aggiorna: a tutta larghezza sotto i campi */
.vv-stat--tel .fa-field-row .fa-btn-refresh,
.vv-stat--tel .fp-field-row .fp-btn-refresh,
.vv-stat--tel .sav-field-row .sav-btn-refresh {
    justify-content: center;
    min-height: 40px;
    margin-top: .35rem;
}
/* Per valore / Per quantità uno sotto l'altro */
.vv-stat--tel .sav-field-row .sav-radio-group { flex-direction: column; }
.vv-stat--tel .sav-field-row .sav-radio-item { min-height: 40px; }

/* ============================================================================
   UTENTI SECONDARI (Utenti/InvitiUtentiSecondari.razor)
   Tabella su PC, schede su telefono secondo la vista dell'Header (prima: d-md-none, solo larghezza).
   ============================================================================ */
.vv-ius-azioni {
    display: flex;
    gap: .5rem;
    margin-top: .6rem;
}
.vv-ius-azioni .pr-btn {
    flex: 1;
    min-height: 40px;
    justify-content: center;
}
/* Finestra di invito a tutto schermo */
.ius-modal.vv-ius-modal--tel { border-radius: 0; }
.ius-modal.vv-ius-modal--tel .form-control { min-height: 40px; font-size: 16px; }
.ius-modal.vv-ius-modal--tel .ius-btn-cancel,
.ius-modal.vv-ius-modal--tel .ius-btn-confirm { min-height: 40px; font-size: 16px; flex: 1; }
.ius-modal.vv-ius-modal--tel .ius-close-btn { width: 40px; height: 40px; }

/* ============================================================================
   PERMESSI PROGRAMMI (Utenti/ProgrammiPermessi.razor)
   Su telefono la tabella diventa un elenco di righe toccabili (casella + nome + aree).
   ============================================================================ */
.vv-pp--tel .pp-field-row { flex-direction: column; align-items: stretch; gap: .3rem; }
.vv-pp--tel .pp-field-row .pp-label { flex: none; }
.vv-pp--tel .pp-field-row .pp-control--sm { flex: none; width: 100%; }
.vv-pp--tel .pp-field-row .form-select { min-height: 40px; font-size: 16px; }

.vv-pp-lista { display: flex; flex-direction: column; }
.vv-pp-tutti,
.vv-pp-riga {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: .6rem 1rem;
    min-height: 48px;
    border-bottom: 1px solid var(--ab-b-e2e8f5, #e2e8f5);
    cursor: pointer;
}
.vv-pp-tutti {
    background: var(--ab-s-f7f9fc, #f7f9fc);
    font-size: .82rem;
    font-weight: 600;
    color: var(--ab-t-6b7cad, #6b7cad);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.vv-pp-riga--attiva { background: var(--ab-s-f0f7ff, #f0f7ff); }
.vv-pp-lista .pp-check { width: 22px; height: 22px; flex-shrink: 0; }
.vv-pp-testo { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.vv-pp-nome { font-size: 16px; font-weight: 500; color: var(--ab-t-1e2d5a, #1e2d5a); word-break: break-word; }
.vv-pp-aree { display: flex; flex-wrap: wrap; gap: .3rem; }
.vv-pp-aree .pp-flag.vv-pp-area { width: auto; height: auto; padding: .05rem .45rem; font-size: .72rem; font-weight: 600; }
.vv-pp-lista ~ .pp-form-footer .pp-btn-save { width: 100%; justify-content: center; min-height: 44px; font-size: 16px; }

/* ============================================================================
   ONEDRIVE (OneDrive/ElencoOD.razor) - finestra a tutto schermo su telefono (modal-fullscreen)
   ============================================================================ */
.od-modal.vv-od--tel .od-card { border-radius: 0; }
.od-modal.vv-od--tel .od-toolbar { flex-direction: column; align-items: stretch; }
.od-modal.vv-od--tel .od-toolbar-actions { width: 100%; }
.od-modal.vv-od--tel .od-search-wrap { flex: 1; }
.od-modal.vv-od--tel .od-search-input { width: 100%; min-height: 40px; font-size: 16px; }
.od-modal.vv-od--tel .od-nav-btn,
.od-modal.vv-od--tel .od-close-btn { width: 40px; height: 40px; }
.od-modal.vv-od--tel .od-crumb-btn { min-height: 36px; }
.od-modal.vv-od--tel .od-btn { min-height: 40px; justify-content: center; }
.od-modal.vv-od--tel .od-body { max-height: none; }
.od-modal.vv-od--tel .od-item-name { white-space: normal; word-break: break-word; }
.od-modal.vv-od--tel .od-footer { flex-wrap: wrap; }
.od-modal.vv-od--tel .od-footer > .d-flex { width: 100%; }
.od-modal.vv-od--tel .od-footer > .d-flex .od-btn { flex: 1; }

/* ============================================================================
   GESTIONE UTENTI CLOUD (GestioneUtentiCloud/GestioneUtentiMA.razor)
   Su telefono la griglia diventa un elenco a schede (vt-*): qui solo barra, filtri e conferma.
   ============================================================================ */
.ec-page.vv-gu--tel { padding: .5rem; }
.ec-page.vv-gu--tel .ec-header { flex-direction: column; align-items: flex-start; gap: .5rem; padding: .85rem 1rem; }
.ec-page.vv-gu--tel .tb-inner { justify-content: flex-start; padding: .5rem; }
.ec-page.vv-gu--tel .tb-actions { width: 100%; }
.ec-page.vv-gu--tel .tb-btn { min-height: 40px; flex: 1 1 auto; justify-content: center; }
.ec-page.vv-gu--tel .tb-divider { display: none; }
.ec-page.vv-gu--tel .ec-options-row { flex-direction: column; align-items: stretch; gap: 0; }
.ec-page.vv-gu--tel .ec-check { min-height: 40px; font-size: .95rem; }
.ec-page.vv-gu--tel .ec-check input[type="checkbox"] { width: 20px; height: 20px; }
.ec-page.vv-gu--tel .ec-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.ec-page.vv-gu--tel .ec-stat-card { padding: .6rem .7rem; gap: .6rem; }
.ec-page.vv-gu--tel .ec-stat-value { font-size: .95rem; }
.ec-page.vv-gu--tel .ec-card--grid { background: transparent; border: 0; box-shadow: none; overflow: visible; }
.vv-gu-tel .vt-scheda-testa { align-items: center; }
.vv-gu-tel .vt-scheda-azioni .pr-btn { flex: 1; justify-content: center; }
/* Conferma eliminazione a tutto schermo: niente angoli, pulsanti alti */
.gu-modal .modal-fullscreen .gu-card { border-radius: 0; }
.gu-modal .modal-fullscreen .gu-foot-btn { min-height: 44px; flex: 1; font-size: 16px; }

/* InserimentoUtente e SecondoUtente (finestre di GestioneUtentiMA), vista telefono: classe vv-finestra--tel sul .modal */
.vv-finestra--tel .modal-content { border-radius: 0; }
.vv-finestra--tel.vv-finestra--tel .ec-filters-grid,
.vv-finestra--tel.vv-finestra--tel .iu-doc-editor,
.vv-finestra--tel.vv-finestra--tel .su-editor { grid-template-columns: minmax(0, 1fr); }
.vv-finestra--tel .ec-field,
.vv-finestra--tel .ec-field--wide { grid-column: 1 / -1; min-width: 0; }
.vv-finestra--tel .ec-input,
.vv-finestra--tel .form-control,
.vv-finestra--tel .form-select { min-height: 40px; font-size: 16px; width: 100%; }
.vv-finestra--tel .modal-footer { flex-direction: column; align-items: stretch; }
.vv-finestra--tel .modal-footer > button { min-height: 44px; justify-content: center; }
.vv-finestra--tel .iu-doc-grid,
.vv-finestra--tel .su-body .table-responsive { overflow-x: auto; }