/* ==========================================================================
   TABLET / MOBILE OVERRIDES – touch-friendly per tutti i moduli vtiger
   Escluso: Communications (usa .comm-page, gestito in Communications.css)
            Accounts (gestito in Accounts.css / Accounts.js)
   ========================================================================== */


/* ==========================================================================
   0. MENU MOBILE – voci visibili solo su desktop
   ========================================================================== */
/* Listview FAB – bottone + rotondo fisso in basso a destra (mobile) */
#vt-listview-fab {
    position: fixed;
    bottom: 28px;
    right: 24px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #fff;
    border: none;
    font-size: 22px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    cursor: pointer;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s, transform 0.2s;
    opacity: 0.6;
}
#vt-listview-fab:active {
    transform: scale(0.92);
    opacity: 0.85;
}

@media (max-width: 1279px) {
    /* Font base leggermente più grande su mobile */
    body {
        font-size: 16px !important;
    }

    /* Rimuove la scrollbar verticale sul pannello di ricerca globale (anche durante animazione) */
    #search-links-container.navbar-collapse,
    #search-links-container.navbar-collapse.in,
    #search-links-container.collapsing {
        overflow: hidden !important;
        overflow-y: hidden !important;
    }

    /* Nel dropdown azioni modulo (⋮) mostra solo il bottone Aggiungi */
    #appnavcontent ul.navbar-nav > li:not(:first-child) {
        display: none !important;
    }
    #appnavcontent ul.navbar-nav {
        float: none !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
    #appnavcontent ul.navbar-nav > li:first-child {
        float: none !important;
    }

    /* Nasconde "EmailTemplates" dal menu laterale mobile */
    #app-menu ul[oldtitle="Email Templates"],
    #app-menu li:has(a[href*="module=EmailTemplates"]) {
        display: none !important;
    }

    /* Nasconde "Documenti" dal menu laterale mobile */
    #app-menu .menu-item.app-item-misc[data-default-url*="module=Documents"] {
        display: none !important;
    }
    /* Nasconde "Mail Manager" dal menu laterale mobile */
    #app-menu .menu-item.app-item-misc[data-default-url*="module=MailManager"] {
        display: none !important;
    }
    /* Nasconde "Impostazioni" (dropdown-compact con app-item-misc) dal menu laterale mobile */
    #app-menu .app-modules-dropdown-container.dropdown-compact {
        display: none !important;
    }

    /* Nasconde la tab "TOOLS" dal menu laterale mobile */
    #app-menu [data-app-name="TOOLS"],
    #app-menu .app-modules-dropdown-container:has([data-app-name="TOOLS"]) {
        display: none !important;
    }

    /* Nasconde "Riordina le schede" nella dashboard */
    li:has(a.reArrangeTabs) {
        display: none !important;
    }

    /* Nasconde "Mini Lista" nella dashboard */
    li:has(a[data-name="MiniList"]) {
        display: none !important;
    }

    /* Nasconde icona Report dalla navbar */
    #navbar li:has(a.fa-bar-chart) {
        display: none !important;
    }

    /* Nasconde i bottoni freccia precedente/successivo nella detail view */
    #detailViewPreviousRecordButton,
    #detailViewNextRecordButton {
        display: none !important;
    }

    /* -----------------------------------------------------------------------
       DETAIL VIEW – TAB NAVIGATION
    ----------------------------------------------------------------------- */

    /* Barra tab principali sempre visibile sotto il pannello ⋯ */
    .related-tabs .vt-primary-tabs {
        display: flex;
        list-style: none;
        margin: 8px 0 0 0;
        padding: 0 8px;
        border-bottom: 2px solid #e0e4ea;
        background: #fff;
        gap: 4px;
    }
    .related-tabs .vt-primary-tabs li a {
        display: block;
        padding: 8px 14px;
        font-size: 13px;
        font-weight: 600;
        color: #555;
        text-decoration: none;
        border-bottom: 3px solid transparent;
        margin-bottom: -2px;
        white-space: nowrap;
    }
    .related-tabs .vt-primary-tabs li.active a {
        color: #333;
        border-bottom-color: #555;
    }

    /* Le tab primarie vengono rimosse dalla griglia via JS ($.remove()) */

    /* -----------------------------------------------------------------------
       PANNELLO ⋯ – griglia di icone
       Azzera tutti i padding/margin di Bootstrap (.navbar-collapse: padding 15px)
       e vtiger (.related-tabs ul: padding-left 10px, .nav-tabs > li: float+margin)
    ----------------------------------------------------------------------- */

    /* Azzera padding Bootstrap su .navbar-collapse e vtiger su .related-tabs ul */
    #nav-tabs {
        padding: 8px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        border-top: 1px solid #e0e4ea !important;
        background: #fff !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.10) !important;
        box-sizing: border-box !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /* La lista: flex grid, azzera border-bottom Bootstrap e margin/padding */
    #nav-tabs .nav-tabs {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-bottom: none !important;
        align-items: flex-start !important;
        list-style: none !important;
        height: auto !important;
    }

    /* Ogni box: dimensione fissa, reset float e margin Bootstrap/vtiger */
    #nav-tabs .nav-tabs > .tab-item,
    #nav-tabs .nav-tabs > .vt-more-flat {
        float: none !important;
        display: block !important;
        flex: 0 0 62px !important;
        width: 62px !important;
        height: 68px !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        border: 1px solid #e0e4ea !important;
        border-radius: 6px !important;
        background: #f7f9fc !important;
        box-sizing: border-box !important;
        position: static !important;
        text-align: center !important;
    }

    /* Link: flex colonna centrata, icona sopra + label sotto */
    #nav-tabs .nav-tabs > .tab-item > a,
    #nav-tabs .nav-tabs > .vt-more-flat > a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        padding: 4px 2px !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 6px !important;
        font-size: 20px !important;
        color: #555 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        line-height: 1 !important;
        gap: 3px !important;
    }
    /* Etichetta testo sotto l'icona */
    #nav-tabs .nav-tabs > .tab-item > a .vt-tab-label,
    #nav-tabs .nav-tabs > .vt-more-flat > a .vt-tab-label {
        font-size: 8px !important;
        line-height: 1.1 !important;
        color: #666 !important;
        text-align: center !important;
        word-break: break-all !important;
        max-width: 100% !important;
        display: block !important;
        font-weight: 500 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.2px !important;
    }

    #nav-tabs .nav-tabs > .tab-item.active,
    #nav-tabs .nav-tabs > .vt-more-flat.active,
    .related-tabs #nav-tabs .nav-tabs > .tab-item.active,
    .related-tabs #nav-tabs .nav-tabs > .vt-more-flat.active {
        background: #f7f9fc !important;
        border: 1px solid #e0e4ea !important;
        border-bottom: 3px solid var(--vtcard-accent, #3d9ec9) !important;
        margin-bottom: 0 !important;
    }
    #nav-tabs .nav-tabs > .tab-item.active > a,
    #nav-tabs .nav-tabs > .vt-more-flat.active > a {
        color: inherit !important;
    }

    /* Nascondi testo, label */
    #nav-tabs .nav-tabs > .tab-item .tab-label,
    #nav-tabs .nav-tabs > .vt-more-flat .tab-label,
    #nav-tabs .nav-tabs > .tab-item .content,
    #nav-tabs .nav-tabs > .vt-more-flat .content {
        display: none !important;
    }

    /* Badge contatore record: posizionato in alto a destra sul blocchetto */
    #nav-tabs .nav-tabs > .tab-item > a,
    #nav-tabs .nav-tabs > .vt-more-flat > a {
        position: relative !important;
    }
    #nav-tabs .nav-tabs > .tab-item .numberCircle,
    #nav-tabs .nav-tabs > .vt-more-flat .numberCircle {
        position: absolute !important;
        top: 3px !important;
        right: 3px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        font-size: 9px !important;
        padding: 1px 3px !important;
        line-height: 14px !important;
        border-radius: 8px !important;
        margin: 0 !important;
    }

    /* .tab-icon: flex centrato, azzera display:inline-block e max-width:85% di vtiger */
    #nav-tabs .nav-tabs > .tab-item .tab-icon,
    #nav-tabs .nav-tabs > .vt-more-flat .tab-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        float: none !important;
        font-size: 26px !important;
        vertical-align: middle !important;
        overflow: hidden !important;
    }
    #nav-tabs .nav-tabs > .tab-item .tab-icon i,
    #nav-tabs .nav-tabs > .vt-more-flat .tab-icon i {
        font-size: 26px !important;
        line-height: 1 !important;
    }

    /* .custom-module: solo testo, niente sfondo/dimensioni fisse vtiger */
    #nav-tabs .nav-tabs > .tab-item .custom-module,
    #nav-tabs .nav-tabs > .vt-more-flat .custom-module {
        font-size: 16px !important;
        font-weight: 700 !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        line-height: 1 !important;
        background: none !important;
        color: inherit !important;
        border-radius: 0 !important;
        padding: 0 !important;
        display: inline !important;
    }

    /* textOverflowEllipsis vtiger: annulla overflow:hidden e white-space:nowrap */
    #nav-tabs .nav-tabs > .tab-item .textOverflowEllipsis,
    #nav-tabs .nav-tabs > .vt-more-flat .textOverflowEllipsis {
        overflow: visible !important;
        white-space: normal !important;
        text-overflow: clip !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
    }

    /* Nascondi il dropdown "Ulteriori" originale (contenuto appiattito da JS) */
    #nav-tabs .related-tab-more-element {
        display: none !important;
    }

    /* Nasconde il bottone "Aggiungi tag" nella detail view */
    #addTagContainer {
        display: none !important;
    }

    /* -----------------------------------------------------------------------
       MODALI – adattamento mobile
       Struttura vtiger #overlayPage:
         #overlayPage (position:fixed, width:100%, max-height via inline JS)
           └── .data
                └── .fc-overlay-modal.modal-content
                     ├── .overlayHeader / .modal-header
                     └── .modal-body (max-height via inline JS)
    ----------------------------------------------------------------------- */

    /* #overlayPage: rimuove il max-height inline di vtiger, si adatta al contenuto */
    #overlayPage .modal-body,
    #overlayPage .data > .modal-content > .modal-body {
        overflow-y: visible !important;
        max-height: none !important;
    }

    /* Drag & Drop: nasconde l'intera area, il bottone viene spostato da JS */
    #dragandrophandler {
        display: none !important;
    }
    /* Bottone upload estratto da JS: stile compatto */
    .vt-mobile-upload-btn {
        margin-bottom: 10px !important;
    }
    /* Rimuovi padding/margin extra dai container wrapping */
    .uploadview-content,
    .uploadcontrols {
        padding: 0 !important;
        margin: 0 !important;
    }
    /* Il contenuto dentro le modali vtiger non deve sforare in larghezza */
    #overlayPage .modal-content {
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Form Documents (e simili): annulla larghezza fissa hardcoded nel template */
    .modelContainer {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .modelContainer .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* massEditTable: trasforma la tabella in layout verticale (label sopra, valore sotto) */
    .massEditTable,
    .massEditTable tbody,
    .massEditTable tr {
        display: block !important;
        width: 100% !important;
    }
    .massEditTable tr {
        margin-bottom: 0 !important;
    }
    .massEditTable td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        float: none !important;
        padding: 0 4px !important;
        border: none !important;
        margin: 0 !important;
    }
    .massEditTable td.fieldLabel {
        text-align: left !important;
        padding-top: 10px !important;
        padding-bottom: 2px !important;
        color: #888 !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }
    .massEditTable td.fieldValue {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .massEditTable td.fieldValue input,
    .massEditTable td.fieldValue select,
    .massEditTable td.fieldValue textarea {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    /* label pull-right → torna a sinistra */
    .massEditTable td.fieldLabel label,
    .massEditTable td.fieldLabel .pull-right {
        float: none !important;
        text-align: left !important;
        display: inline !important;
    }
    /* Input firstname full width dopo che la select salutation è nascosta */
    input[name="firstname"] {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Nasconde la select salutationtype con tutti i metodi possibili */
    select.vt-salutation-select {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        pointer-events: none !important;
    }

    /* Modali Bootstrap standard con .modal-dialog (es. #overlayPageContent,
       EmailPreview, ecc.) */
    .modal-dialog,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-sm {
        width: auto !important;
        max-width: calc(100vw - 20px) !important;
        margin: 10px auto !important;
        box-sizing: border-box !important;
    }
    .modal-content {
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    .modal-body {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px !important;
    }
    .modal-header {
        flex-shrink: 0 !important;
        padding: 8px 12px !important;
    }
    .modal-footer {
        flex-shrink: 0 !important;
        padding: 8px 12px !important;
    }
    /* Input e select full-width nelle modali */
    .modal-body .form-control,
    .modal-body input[type="text"],
    .modal-body input[type="email"],
    .modal-body select,
    .modal-body textarea {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
    }
    /* Colonne Bootstrap nelle modali → full width */
    .modal-body .col-lg-1, .modal-body .col-lg-2,
    .modal-body .col-lg-3, .modal-body .col-lg-4,
    .modal-body .col-lg-5, .modal-body .col-lg-6,
    .modal-body .col-lg-7, .modal-body .col-lg-8,
    .modal-body .col-lg-9, .modal-body .col-lg-10,
    .modal-body .col-lg-11, .modal-body .col-lg-12 {
        width: 100% !important;
        float: none !important;
    }
    /* Row nelle modali → niente margini negativi che causano overflow */
    .modal-body .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Tabelle nelle modali → scroll orizzontale se necessario */
    .modal-body table {
        max-width: 100% !important;
    }
    .modal-body .table-responsive,
    .modal-body > table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* -----------------------------------------------------------------------
       EMAIL – ComposeEmail mobile
    ----------------------------------------------------------------------- */

    /* Tutte le righe .row dentro la modale email → layout verticale */
    #composeEmailContainer .modal-body .row {
        margin: 0 !important;
    }
    #composeEmailContainer .modal-body .row > [class*="col-"] {
        display: block !important;
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
    }
    /* Label (col-lg-2): compatta, stile etichetta grigia */
    #composeEmailContainer .modal-body .col-lg-2 > span,
    #composeEmailContainer .modal-body .col-lg-2 > label {
        display: block !important;
        font-size: 11px !important;
        color: #999 !important;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 2px !important;
        margin-top: 6px !important;
    }
    /* Col-lg-2 vuote (spacer) → nascondi */
    #composeEmailContainer .modal-body .col-lg-2:empty,
    #composeEmailContainer .modal-body .col-lg-4:empty {
        display: none !important;
    }
    /* Input/select full-width */
    #composeEmailContainer .modal-body input[type="text"],
    #composeEmailContainer .modal-body input[type="email"],
    #composeEmailContainer .modal-body select,
    #composeEmailContainer .modal-body textarea {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Riga campo "A": nasconde tutta la div con select modulo + X + cerca */
    #composeEmailContainer .toEmailField .col-lg-4.input-group {
        display: none !important;
    }
    /* Bottoni allegato: nasconde Sfoglia CRM e Seleziona Modello Email */
    #composeEmailContainer .brownseInCrm,
    #composeEmailContainer .insertTemplate,
    #browseCrm,
    #selectEmailTemplate {
        display: none !important;
    }
    #composeEmailContainer .attachment input[type="file"] {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Aggiungi CC/BCC → link inline compatti */
    #composeEmailContainer #ccLink,
    #composeEmailContainer #bccLink {
        font-size: 12px !important;
        margin-top: 4px !important;
        display: inline-block !important;
    }
    /* Firma: riga compatta */
    #composeEmailContainer .modal-body .row:has(input[name="signature"]) {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-top: 6px !important;
        margin-bottom: 4px !important;
    }
    #composeEmailContainer .modal-body .row:has(input[name="signature"]) .col-lg-2,
    #composeEmailContainer .modal-body .row:has(input[name="signature"]) .col-lg-9 {
        width: auto !important;
        display: inline-block !important;
        padding: 0 !important;
    }
    /* Toolbar CKEditor: nasconde righe extra, lascia solo le essenziali */
    #composeEmailContainer .cke_toolbox .cke_toolbar_break ~ .cke_toolbar,
    #composeEmailContainer .cke_toolbox .cke_toolbar:nth-child(n+8) {
        display: none !important;
    }
    #composeEmailContainer .cke_top {
        padding: 2px !important;
    }
    /* Textarea editor: altezza contenuta */
    #composeEmailContainer .templateContent {
        margin-top: 4px !important;
    }
    #composeEmailContainer textarea#description {
        width: 100% !important;
        box-sizing: border-box !important;
        height: 150px !important;
    }

    /* -----------------------------------------------------------------------
       CALENDARIO – QuickCreate mobile
    ----------------------------------------------------------------------- */

    /* Blocco date: impila i tre col-sm (data-inizio / "a" / data-fine) verticalmente */
    .calendarQuickCreateContent .row .col-sm-12 {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
    }
    .calendarQuickCreateContent .row .col-sm-5,
    .calendarQuickCreateContent .row .col-sm-1 {
        width: 100% !important;
        left: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    /* "a" → etichetta inline compatta, non su riga intera */
    .calendarQuickCreateContent .row .col-sm-1 {
        line-height: 1.4 !important;
        font-size: 11px !important;
        color: #999 !important;
        padding: 2px 0 !important;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    /* Riduci padding/margin extra del container quickCreate */
    .quickCreateContent {
        padding-top: 4px !important;
        margin-top: 0 !important;
    }
    .calendarQuickCreateContent .container-fluid.paddingTop15 {
        padding-top: 4px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Rimuovi margin-left hardcoded sul campo Oggetto */
    .calendarQuickCreateContent > div > div[style*="margin-left"] {
        margin-left: 0 !important;
        width: 100% !important;
    }
    /* Datepicker/timepicker nella QuickCreate: non tagliare il popup */
    .calendarQuickCreateContent .modal-body,
    .calendarQuickCreateContent .modal-content,
    #overlayPage .calendarQuickCreateContent {
        overflow: visible !important;
    }
    /* Il datepicker Bootstrap: z-index sopra modale, sempre verso il basso */
    .datepicker { z-index: 99999 !important; }
    .ui-timepicker-wrapper { z-index: 99999 !important; }

    /* -----------------------------------------------------------------------
       EDIT VIEW – select2 e input mobile
    ----------------------------------------------------------------------- */

    /* select2: nasconde il widget custom e mostra la select nativa (full-width, no JS) */
    .editView .select2-container,
    .recordEditView .select2-container {
        display: none !important;
    }
    /* Nasconde anche il dropdown aperto (select2-drop) che può rimanere visibile */
    .editView .select2-drop,
    .recordEditView .select2-drop,
    .select2-drop.select2-drop-active {
        display: none !important;
    }
    .editView select.select2-offscreen,
    .recordEditView select.select2-offscreen {
        position: static !important;
        clip: auto !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
        padding: 6px 8px !important;
        border: 1px solid #ccc !important;
        border-radius: 4px !important;
        background: #fff !important;
        display: block !important;
    }
    /* Campo Agenti (MultiOwner): limita altezza native multiple select */
    .editView select.select2-offscreen[multiple],
    .recordEditView select.select2-offscreen[multiple] {
        height: 120px !important;
        overflow-y: auto !important;
    }
    /* -----------------------------------------------------------------------
       EDIT VIEW – campo reference (uitype10): bottoni x / cerca / crea
    ----------------------------------------------------------------------- */
    .referencefield-wrapper .input-group {
        display: flex !important;
        align-items: stretch !important;
        flex-wrap: nowrap !important;
    }
    /* Input testo del campo reference */
    .referencefield-wrapper .input-group input.autoComplete {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        height: 44px !important;
        font-size: 15px !important;
        padding: 0 10px !important;
        border-radius: 4px 0 0 4px !important;
        border: 1px solid #ccc !important;
        border-right: none !important;
        box-sizing: border-box !important;
    }
    /* Link "x" per svuotare la selezione */
    .referencefield-wrapper a.clearReferenceSelection {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border: 1px solid #ccc !important;
        border-left: none !important;
        border-right: none !important;
        background: #f5f5f5 !important;
        color: #666 !important;
        font-size: 16px !important;
        font-weight: bold !important;
        text-decoration: none !important;
        line-height: 1 !important;
    }
    .referencefield-wrapper a.clearReferenceSelection:active {
        background: #e0e0e0 !important;
    }
    /* Bottoni cerca (🔍) e crea (+) */
    .referencefield-wrapper .input-group-addon.relatedPopup,
    .referencefield-wrapper .input-group-addon.createReferenceRecord {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 48px !important;
        height: 44px !important;
        padding: 0 !important;
        border: 1px solid #ccc !important;
        border-left: none !important;
        background: #f5f5f5 !important;
        cursor: pointer !important;
        font-size: 18px !important;
        color: #555 !important;
    }
    .referencefield-wrapper .input-group-addon.relatedPopup {
        border-radius: 0 !important;
    }
    .referencefield-wrapper .input-group-addon.createReferenceRecord {
        border-radius: 0 4px 4px 0 !important;
    }
    .referencefield-wrapper .input-group-addon.relatedPopup:active,
    .referencefield-wrapper .input-group-addon.createReferenceRecord:active {
        background: #e0e0e0 !important;
    }
    /* Icone dentro i bottoni */
    .referencefield-wrapper .input-group-addon i.fa {
        font-size: 18px !important;
        pointer-events: none !important;
    }

    /* Checkbox nell'editView: sovrascrive min-width:100% del tema */
    .fieldBlockContainer > table.table > tbody > tr > td.checkBoxType {
        min-width: 0 !important;
        width: auto !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }
    td.checkBoxType input[type="checkbox"] {
        -webkit-appearance: checkbox !important;
        appearance: checkbox !important;
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        clip: auto !important;
        display: inline-block !important;
        margin: 0 !important;
        outline: none !important;
        box-shadow: none !important;
    }
    /* Evita zoom iOS/Android su focus (font-size >= 16px previene lo zoom) */
    .editView input[type="text"],
    .editView input[type="email"],
    .editView input[type="number"],
    .editView input[type="tel"],
    .editView input[type="search"],
    .editView select,
    .editView textarea,
    .recordEditView input[type="text"],
    .recordEditView input[type="email"],
    .recordEditView input[type="number"],
    .recordEditView input[type="tel"],
    .recordEditView input[type="search"],
    .recordEditView select,
    .recordEditView textarea,
    .select2-input,
    .select2-search input {
        font-size: 16px !important;
    }

    /* -----------------------------------------------------------------------
       DETAIL VIEW HEADER – recordBasicInfo compatto
    ----------------------------------------------------------------------- */
    .detailview-header .recordBasicInfo > .info-row,
    .record-header .recordBasicInfo > .info-row {
        margin-bottom: 0 !important;
        line-height: 1.3 !important;
    }
    .record-header .recordBasicInfo .info-row.row {
        padding-top: 1px !important;
        padding-bottom: 1px !important;
    }
    .record-header .recordBasicInfo .col-lg-7.fieldLabel {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
    }
    .record-header .recordBasicInfo h4 {
        height: auto !important;
        margin-bottom: 2px !important;
    }

    /* -----------------------------------------------------------------------
       DASHBOARD WIDGET – layout mobile
    ----------------------------------------------------------------------- */
    /* Rimuove lo scroll interno ai widget (mCustomScrollbar imposta height fissa) */
    .dashboardWidgetContent.mCustomScrollbar,
    .dashboardWidgetContent .mCustomScrollBox,
    .dashboardWidgetContent .mCSB_container_wrapper,
    .dashboardWidgetContent .mCSB_container {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        position: static !important;
    }
    .dashboardWidgetContent .mCSB_scrollTools {
        display: none !important;
    }
    /* Bottoni azioni footer widget: più grandi e spaziati */
    .widgeticons.dashBoardWidgetFooter {
        padding-bottom: 40px !important;
    }
    .dashBoardWidgetFooter .footerIcons a[name="dfilter"] {
        display: none !important;
    }
    .dashBoardWidgetFooter .footerIcons {
        display: flex !important;
        gap: 28px !important;
        align-items: center !important;
        padding: 10px 18px 22px 18px !important;
    }
    .dashBoardWidgetFooter .footerIcons a {
        font-size: 23px !important;
        line-height: 1 !important;
        display: inline-block !important;
    }

    /* -----------------------------------------------------------------------
       TAB AGGIORNAMENTI – layout mobile
    ----------------------------------------------------------------------- */

    /* Nasconde la scritta "X giorni fa" */
    .updates_timeline > li .update_time {
        display: none !important;
    }

    /* Reimposta il layout: elimina il posizionamento assoluto basato sulla colonna sinistra */
    .updates_timeline > li {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid #f0f2f5 !important;
        min-height: 0 !important;
    }
    .updates_timeline > li:last-child {
        border-bottom: none !important;
    }

    /* Icona a sinistra, dimensioni fisse */
    .updates_timeline > li .update_icon {
        position: static !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        width: 32px !important;
        height: 32px !important;
        line-height: 32px !important;
        border-radius: 50% !important;
    }

    /* Info a destra, occupa lo spazio restante */
    .updates_timeline > li .update_info {
        position: static !important;
        top: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 1 !important;
        line-height: 1.3 !important;
    }

    /* Nome utente + data sulla stessa riga / stessa area */
    .updates_timeline > li .update_info h5 {
        margin: 0 0 4px !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    /* Data iniettata da JS sotto il nome */
    .updates_timeline > li .vt-update-date {
        display: block;
        font-size: 11px;
        color: #999;
        margin-bottom: 4px;
    }

    /* Contenuto modifiche */
    .updates_timeline > li .updateInfoContainer {
        font-size: 12px !important;
        margin-bottom: 2px !important;
    }

    /* Rimuovi la linea verticale della timeline (mal posizionata senza colonna sinistra) */
    .updates_timeline:before {
        display: none !important;
    }

    /* Detail view – vista Dettagli: compatta padding, rimuovi tratteggio */
    #detailView td.fieldLabel {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        font-size: 11px !important;
        opacity: 0.7;
    }
    #detailView td.fieldValue {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        border-bottom: 1px solid #eee !important;
        font-size: 13px !important;
    }
    #detailView td.fieldValue > span:first-child {
        border-bottom: none !important;
    }
    .detailViewContainer .block {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .detailViewContainer .block hr {
        margin: 6px 0 !important;
    }
    .detailViewContainer .block h4.textOverflowEllipsis,
    .detailViewContainer .block h4.maxWidth50 {
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        max-width: 100% !important;
        width: auto !important;
    }

    /* Detail view – Summary: compatta padding e line-height */
    .summaryView {
        padding: 8px 10px !important;
        margin-bottom: 6px !important;
    }
    .summaryView .summaryViewHeader,
    .summaryWidgetContainer .widget_header {
        margin-bottom: 4px !important;
    }
    .summaryView .summaryViewHeader {
        display: none !important;
    }
    .summaryView .summaryViewFields {
        line-height: 1.2 !important;
    }
    .summaryView .summaryViewEntries td {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        vertical-align: middle !important;
    }
    .summaryView .fieldLabel {
        padding-right: 10px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
    }
    .summaryView .fieldValue {
        line-height: 1.2 !important;
    }
    .summaryView .fieldValue .value {
        font-size: 13px !important;
        line-height: 1.2 !important;
    }
    .summaryWidgetContainer {
        padding: 8px 10px !important;
        margin-bottom: 6px !important;
    }
    .summaryWidgetContainer .widget_contents {
        margin-top: 6px !important;
    }

    /* Detail view – tutti i bottoni allineati a sinistra */
    .detailViewButtoncontainer {
        width: 100% !important;
    }
    .detailViewButtoncontainer .btn-toolbar {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        float: none !important;
        width: 100% !important;
    }
    .detailViewButtoncontainer .btn-toolbar .btn-group:first-child {
        display: flex !important;
    }

    /* Nel dropdown "Ulteriori": mostra solo Elimina e Duplica */
    .detailViewButtoncontainer .dropdown-menu li {
        display: none !important;
    }
    .detailViewButtoncontainer .dropdown-menu li:has(a[href*="deleteRecord"]),
    .detailViewButtoncontainer .dropdown-menu li:has(a[href*="isDuplicate"]) {
        display: block !important;
    }

    /* -----------------------------------------------------------------------
       POPUP uitype10 – layout a card su mobile
    ----------------------------------------------------------------------- */
    /* Nasconde la tabella originale e il custom scrollbar mCustomScrollbar
       Solo se c'è la listViewEntriesTable (non nel QuickCreate form) */
    #popupPageContainer:has(.listViewEntriesTable) .popupEntriesDiv,
    #popupPageContainer:has(.listViewEntriesTable) .contents-topscroll,
    #popupPageContainer:has(.listViewEntriesTable) .listViewActions {
        display: none !important;
    }
    /* Azzera il padding del modal-body e delle colonne bootstrap nel popup lista */
    .modal-content:has(#popupPageContainer .listViewEntriesTable) .modal-body {
        padding: 0 !important;
        overflow: hidden !important;
    }
    #popupPageContainer:has(.listViewEntriesTable),
    #popupPageContainer:has(.listViewEntriesTable) > .col-sm-12,
    #popupPageContainer:has(.listViewEntriesTable) > .col-md-12,
    #popupPageContainer:has(.listViewEntriesTable) #popupContents {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }
    /* Barra ricerca popup */
    .vt-popup-search-bar {
        display: flex;
        gap: 8px;
        padding: 8px;
        background: #f5f5f5;
        border-bottom: 1px solid #ddd;
    }
    .vt-popup-search-bar input {
        flex: 1;
        padding: 8px 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
        outline: none;
    }
    .vt-popup-search-bar button {
        padding: 8px 14px;
        font-size: 14px;
        border: none;
        border-radius: 4px;
        background: #5cb85c;
        color: #fff;
        cursor: pointer;
    }
    /* Lista card */
    .vt-popup-cards {
        list-style: none;
        margin: 0;
        padding: 4px 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        max-height: 55vh;
    }
    .vt-popup-cards li {
        padding: 10px 14px;
        border-bottom: 1px solid #eee;
        cursor: pointer;
        line-height: 1.4;
    }
    .vt-popup-cards li:active {
        background: #e8f4fd;
    }
    .vt-popup-card-primary {
        font-weight: 600;
        font-size: 15px;
        color: #222;
    }
    .vt-popup-card-secondary {
        font-size: 12px;
        color: #777;
        margin-top: 2px;
    }
    /* Paginazione popup */
    .vt-popup-pagination {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 14px;
        border-top: 1px solid #ddd;
        background: #f5f5f5;
        font-size: 13px;
    }
    .vt-popup-pagination button {
        padding: 6px 14px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background: #fff;
        cursor: pointer;
        font-size: 14px;
    }
    .vt-popup-pagination button:disabled {
        opacity: 0.4;
        cursor: default;
    }
    .vt-popup-pagination {
        margin-bottom: 12px;
    }
    /* Vuoto / loading */
    .vt-popup-empty {
        padding: 20px;
        text-align: center;
        color: #999;
        font-size: 14px;
    }
}


/* ==========================================================================
   1. TABLET (768-1279px) – navbar toggle, dropdown azioni, miglioramenti touch
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1279px) {

    /* ---- BARRA AZIONI MODULO: forza comportamento mobile Bootstrap ---- */
    .module-action-bar .navbar-toggle {
        display: block !important;
        float: right;
        margin-top: 6px;
        margin-right: 6px;
    }
    #appnavcontent:not(.in) {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    #appnavcontent.in {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        position: absolute;
        right: 0;
        top: 43px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        z-index: 1100;
        min-width: 0;
        width: auto;
        max-width: 220px;
        overflow: hidden;
        padding: 6px 0;
    }
    #appnavcontent.in ul.navbar-nav { float: none !important; margin: 0; }
    #appnavcontent.in ul.navbar-nav > li { float: none; }
    #appnavcontent.in ul.navbar-nav > li .btn {
        width: 100%; text-align: left; border: none; border-radius: 0;
        padding: 8px 16px; background: transparent; box-shadow: none;
    }
    #appnavcontent.in ul.navbar-nav > li .btn:hover { background: #f5f5f5; }
    #appnavcontent.in ul.navbar-nav > li .settingsIcon { padding: 4px 0; }
    #appnavcontent.in ul.navbar-nav > li .dropdown-menu {
        position: static; float: none; box-shadow: none; border: none; padding: 0 0 0 16px;
    }

    /* ---- LIST VIEW: scroll orizzontale ---- */
    body:not(.comm-page) .listViewPageDiv .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Righe più alte e touch-friendly */
    body:not(.comm-page) #listview-table .listViewEntries > td {
        padding-top: 10px;
        padding-bottom: 10px;
        vertical-align: middle;
    }

    /* ---- DETAIL VIEW: colonna unica ---- */
    .detailViewContainer .col-md-9 { width: 100%; float: none; }
    .detailViewContainer .col-md-3 { width: 100%; float: none; }

    /* ---- EDIT VIEW: input più spaziosi ---- */
    body:not(.comm-page) .editViewPageDiv .form-control { font-size: 15px; padding: 8px 10px; }
    body:not(.comm-page) .editViewPageDiv .btn { min-height: 40px; }

}


/* ==========================================================================
   2. MOBILE (< 768px) – touch targets e sidebar (moduli senza card JS)
   ========================================================================== */
@media (max-width: 767px) {

    /* ---- DETAIL VIEW: colonne sidebar → piena larghezza ---- */
    .detailViewContainer .col-md-9,
    .detailViewContainer .col-md-3 { width: 100% !important; float: none !important; }

    /* ---- DETAIL VIEW: campi impilati (label sopra valore) ---- */
    body:not(.comm-page) .detailViewContainer .detailview-table tr { display: flex; flex-direction: column; }
    body:not(.comm-page) .detailViewContainer .fieldLabel {
        width: 100% !important;
        display: block;
        padding-bottom: 2px;
        padding-top: 10px;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: #888;
        border: none;
    }
    body:not(.comm-page) .detailViewContainer .fieldValue {
        width: 100% !important;
        display: block;
        padding-top: 2px;
        padding-bottom: 8px;
        font-size: 14px;
        border: none;
        border-bottom: 1px solid #f2f3f4;
    }
    body:not(.comm-page) .detailViewContainer .blockData { padding: 0 10px; }
    body:not(.comm-page) .detailViewContainer .block { margin-bottom: 16px; }

    /* ---- EDIT VIEW: label sopra input, controlli full-width ---- */
    body:not(.comm-page) .editViewPageDiv .fieldBlockContainer table tr {
        display: flex;
        flex-direction: column;
    }
    body:not(.comm-page) .editViewPageDiv .fieldLabel {
        width: 100% !important;
        display: block;
        padding-bottom: 4px;
        padding-top: 10px;
        font-size: 12px;
        font-weight: 600;
    }
    body:not(.comm-page) .editViewPageDiv .fieldValue {
        width: 100% !important;
        display: block;
        padding-bottom: 10px;
    }
    body:not(.comm-page) .editViewPageDiv .fieldValue .form-control,
    body:not(.comm-page) .editViewPageDiv .fieldValue .inputElement,
    body:not(.comm-page) .editViewPageDiv .fieldValue select {
        width: 100% !important;
        font-size: 15px;
        padding: 8px 10px;
    }
    body:not(.comm-page) .editViewPageDiv .fieldValue .input-group { width: 100%; }
    /* Footer fisso editview: rimuove sidebar border e rende pill centrato */
    .modal-overlay-footer {
        border-left: none !important;
        background: rgba(255,255,255,0.96) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        height: auto !important;
        padding: 12px 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        box-shadow: 0 -2px 12px rgba(0,0,0,0.10) !important;
    }
    body:not(.comm-page) .editViewPageDiv .saveButton,
    .modal-overlay-footer .saveButton {
        width: auto !important;
        min-width: 140px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 48px !important;
        padding: 0 36px !important;
        border-radius: 24px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        letter-spacing: 0.3px !important;
        box-shadow: 0 3px 10px rgba(60,184,120,0.30) !important;
        border: none !important;
        margin: 0 !important;
    }
    body:not(.comm-page) .editViewPageDiv .cancelLink,
    .modal-overlay-footer .cancelLink {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 48px !important;
        padding: 0 24px !important;
        border-radius: 24px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #888 !important;
        text-decoration: none !important;
        background: transparent !important;
        margin: 0 !important;
        width: auto !important;
    }

    /* -----------------------------------------------------------------------
       BOOTBOX – dialog alert/confirm mobile
    ----------------------------------------------------------------------- */
    .bootbox.modal .modal-dialog {
        width: auto !important;
        max-width: calc(100vw - 32px) !important;
        margin: 20px auto !important;
        left: 0 !important;
        right: 0 !important;
    }
    .bootbox.modal .modal-content {
        border-radius: 14px !important;
        overflow: hidden !important;
    }
    .bootbox.modal .modal-body {
        font-size: 15px !important;
        padding: 20px 20px 8px !important;
        line-height: 1.5 !important;
    }
    .bootbox.modal .modal-footer {
        display: flex !important;
        flex-direction: row-reverse !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 12px 20px 20px !important;
        border-top: none !important;
        background: transparent !important;
    }
    .bootbox.modal .modal-footer .btn {
        flex: 1 1 auto !important;
        max-width: 160px !important;
        height: 44px !important;
        border-radius: 22px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        box-shadow: none !important;
        min-height: 0 !important;
    }
    .bootbox.modal .modal-footer .btn-primary {
        box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    }

    /* -----------------------------------------------------------------------
       BOOTSTRAP-NOTIFY – notifiche popup centrate su mobile
    ----------------------------------------------------------------------- */
    [data-notify="container"].vt-notification {
        position: fixed !important;
        top: 70px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: calc(100vw - 32px) !important;
        max-width: 420px !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
        z-index: 10010 !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        /* Azzera l'offset inline impostato da bootstrap-notify */
        margin: 0 !important;
    }
    [data-notify="container"].vt-notification .notificationHeader {
        display: flex !important;
        align-items: center !important;
        flex-direction: row !important;
        gap: 10px !important;
        width: 100% !important;
    }
    /* Icona a sinistra */
    [data-notify="container"].vt-notification .notificationHeader [data-notify="icon"] {
        flex-shrink: 0 !important;
        font-size: 20px !important;
    }
    /* Testo titolo che occupa lo spazio centrale */
    [data-notify="container"].vt-notification .notificationHeader [data-notify="title"] {
        flex: 1 1 auto !important;
        text-align: left !important;
        font-size: 14px !important;
    }
    /* × chiusura a destra */
    [data-notify="container"].vt-notification .close {
        flex-shrink: 0 !important;
        float: none !important;
        margin: 0 !important;
        font-size: 20px !important;
        line-height: 1 !important;
        order: 99 !important;
    }
    /* Messaggio sotto l'header */
    [data-notify="container"].vt-notification [data-notify="message"] {
        margin-top: 4px !important;
        font-size: 13px !important;
    }

    /* ---- GENERALE ---- */
    body:not(.comm-page) .btn { min-height: 38px; }
    body:not(.comm-page) .module-breadcrumb h4 { font-size: 14px; }

}


/* Pulsanti navigazione pagine (Precedente/Seguente): centrati su mobile */
@media (max-width: 1279px) {
    .listViewActions {
        text-align: center !important;
        float: none !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 8px 0 !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .listViewActions .btn-group {
        float: none !important;
    }
    .listViewActions .pageNumbers {
        position: static !important;
        float: none !important;
    }
}

/* ==========================================================================
   3. GENERIC MOBILE CARD LAYOUT (< 1280px)
      Attivato da JS su .vtlist-mobile-active (tutti i moduli tranne
      Accounts, Communications, CommunicationMessageTypes)
   ========================================================================== */

/* Bottoni/elementi nascosti su desktop, visibili solo quando attivo */
.vt-sticky-bar,
.vt-sticky-placeholder,
.vt-sidebar-toggle,
.vt-toggle-row,
.vt-search-input,
.vt-infinite-spinner {
    display: none;
}


@media (max-width: 1279px) {

    /* -----------------------------------------------------------------------
       BARRA FISSA (sticky bar)
    ----------------------------------------------------------------------- */

    .vtlist-mobile-active .vt-sticky-bar {
        display: block;
        position: fixed;
        top: 84px;
        left: 0;
        right: 0;
        z-index: 100;
        background: #fff;
        border-bottom: 1px solid #dde3ec;
        padding-bottom: 8px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.07);
        overflow: visible;
    }

    .vtlist-mobile-active .vt-sticky-placeholder {
        display: block;
    }

    /* Toggle button – position:relative per ancorare la sidebar come overlay */
    .vtlist-mobile-active .vt-toggle-row {
        display: block;
        width: 100%;
        margin: 0;
        position: relative;
    }

    .vtlist-mobile-active .vt-sidebar-toggle.sidebar-is-open {
        pointer-events: none;
    }

    .vtlist-mobile-active .vt-sidebar-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: calc(100% - 16px);
        margin: 8px 8px 0;
        padding: 10px 14px;
        background: #f4f6f9;
        border: 1px solid #dde3ec;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        color: #333;
        cursor: pointer;
        text-align: left;
    }
    .vtlist-mobile-active .vt-sidebar-toggle .fa-chevron-right,
    .vtlist-mobile-active .vt-sidebar-toggle .fa-chevron-down {
        margin-left: auto;
        font-size: 12px;
        color: #888;
    }

    /* Campo di ricerca */
    .vtlist-mobile-active .vt-search-input {
        display: block;
        width: calc(100% - 16px);
        margin: 6px 8px 0;
        padding: 9px 12px;
        border: 1px solid #dde3ec;
        border-radius: 6px;
        font-size: 16px;
        background: #f4f6f9;
        outline: none;
        -webkit-appearance: none;
        box-sizing: border-box;
    }
    .vtlist-mobile-active .vt-search-input:focus {
        border-color: var(--vtcard-accent, #3d9ec9);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(61,158,201,0.15);
    }

    /* -----------------------------------------------------------------------
       SIDEBAR COLLASSABILE
    ----------------------------------------------------------------------- */

    .vtlist-mobile-active #sidebar-essentials {
        overflow: hidden;
        max-height: 0;
        transition: none;
        opacity: 0;
        padding: 0 !important;
        width: 100% !important;
        float: none !important;
        /* overlay: fisso sotto la sticky bar tramite top calcolato via JS */
        position: fixed !important;
        left: 0;
        right: 0;
        z-index: 1050;
        border: none !important;
        background: transparent !important;
    }

    .vtlist-mobile-active #sidebar-essentials.vt-tools-open {
        max-height: 60vh;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        opacity: 1;
        padding: 0 !important;
        background: #fff !important;
        border: 1px solid #dde3ec !important;
        border-top: none !important;
        box-shadow: 0 8px 20px rgba(0,0,0,0.13);
    }
    .vtlist-mobile-active #sidebar-essentials.vt-tools-open .sidebar-container,
    .vtlist-mobile-active #sidebar-essentials.vt-tools-open .menu-scroller,
    .vtlist-mobile-active #sidebar-essentials.vt-tools-open .list-menu-content,
    .vtlist-mobile-active #sidebar-essentials.vt-tools-open .mCustomScrollBox,
    .vtlist-mobile-active #sidebar-essentials.vt-tools-open .mCSB_container {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        position: static !important;
    }
    .vtlist-mobile-active #sidebar-essentials.vt-tools-open .mCSB_scrollTools {
        display: none !important;
    }

    /* Sidebar aperta – layout compatto */
    .vtlist-mobile-active #sidebar-essentials .sidebar-container {
        padding: 8px 14px 10px !important;
    }
    .vtlist-mobile-active #sidebar-essentials .sidebar-header {
        padding: 0 !important;
        margin: 6px 0 4px !important;
        min-height: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    .vtlist-mobile-active #sidebar-essentials .sidebar-header h5,
    .vtlist-mobile-active #sidebar-essentials .sidebar-header .h5,
    .vtlist-mobile-active #sidebar-essentials h5.lists-header,
    .vtlist-mobile-active #sidebar-essentials h6.lists-header {
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #aaa !important;
        margin: 0 !important;
        line-height: 1 !important;
    }
    /* Tasto + crea lista — piccola icona accent */
    .vtlist-mobile-active #sidebar-essentials #createFilter {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        font-size: 0 !important;
        height: auto !important;
        line-height: 1 !important;
        color: var(--vtcard-accent, #3d9ec9) !important;
    }
    .vtlist-mobile-active #sidebar-essentials #createFilter::before {
        content: '\f055';
        font-family: FontAwesome;
        font-size: 18px;
        color: var(--vtcard-accent, #3d9ec9);
    }
    .vtlist-mobile-active #sidebar-essentials hr {
        margin: 4px 0 6px !important;
        border-color: #eee !important;
    }
    .vtlist-mobile-active #sidebar-essentials .search-list,
    .vtlist-mobile-active #sidebar-essentials input[type="text"],
    .vtlist-mobile-active #sidebar-essentials input[type="search"] {
        width: 100% !important;
        padding: 8px 12px !important;
        font-size: 16px !important;
        border: none !important;
        border-bottom: 1px solid #e0e0e0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
        margin-bottom: 6px !important;
        outline: none !important;
        -webkit-appearance: none;
    }
    .vtlist-mobile-active #sidebar-essentials .lists-menu {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    .vtlist-mobile-active #sidebar-essentials .lists-menu li,
    .vtlist-mobile-active #sidebar-essentials .lists-menu li[style] {
        position: relative !important;
        font-size: 15px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-bottom: 1px solid #f2f2f2 !important;
    }
    .vtlist-mobile-active #sidebar-essentials .lists-menu li:last-child {
        border-bottom: none !important;
    }
    .vtlist-mobile-active #sidebar-essentials .lists-menu li a.filterName {
        display: block !important;
        padding: 10px 28px 10px 2px !important;
        color: #333 !important;
        text-decoration: none !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .vtlist-mobile-active #sidebar-essentials .lists-menu li.active a.filterName {
        color: var(--vtcard-accent, #3d9ec9) !important;
        font-weight: 600 !important;
    }
    .vtlist-mobile-active #sidebar-essentials .lists-menu .fa-angle-down {
        font-size: 14px !important;
        color: #ccc !important;
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
    }
    .vtlist-mobile-active #sidebar-essentials .menu-scroller {
        max-height: none !important;
        overflow-y: visible !important;
    }
    .vtlist-mobile-active #sidebar-essentials .toggleFilterSize {
        font-size: 14px !important;
        color: var(--vtcard-accent, #3d9ec9) !important;
        padding: 6px 0 !important;
        display: block !important;
    }

    /* -----------------------------------------------------------------------
       GRID ESCAPE – libera la lista dalla griglia vtiger
    ----------------------------------------------------------------------- */

    .vtlist-mobile-active #listViewContent,
    .vtlist-mobile-active .listViewPageDiv,
    .vtlist-mobile-active .content-area {
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Rimuovi perfect-scrollbar e i suoi vincoli di altezza */
    .vtlist-mobile-active .ps-container,
    .vtlist-mobile-active .ps {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        position: static !important;
    }
    .vtlist-mobile-active .ps__rail-y,
    .vtlist-mobile-active .ps__rail-x {
        display: none !important;
    }

    /* Wrapper tabella: niente bordi/sfondo di griglia */
    .vtlist-mobile-active #table-content,
    .vtlist-mobile-active #listedit {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    /* Toolbar azioni massive – nascosta su mobile */
    .vtlist-mobile-active #listview-actions {
        display: none !important;
    }

    /* TAG container – nascosto su mobile */
    .vtlist-mobile-active #listViewTagContainer,
    .vtlist-mobile-active #listViewTagContainer ~ * {
        display: none !important;
    }

    /* Nascondi barra scroller orizzontale e freccia toggle pannello */
    .vtlist-mobile-active #scroller_wrapper,
    .vtlist-mobile-active .essentials-toggle {
        display: none !important;
    }

    /* -----------------------------------------------------------------------
       LAYOUT A CARD
    ----------------------------------------------------------------------- */

    /* La tabella: contenitore block */
    .vtlist-mobile-active #listview-table {
        display: block !important;
        width: 100% !important;
        border: none !important;
        border-collapse: separate !important;
        background: transparent !important;
        margin-bottom: 0 !important;
    }

    /* Nascondi intestazione e righe non-dati */
    .vtlist-mobile-active #listview-table thead,
    .vtlist-mobile-active .listViewContentHeader,
    .vtlist-mobile-active .listViewSearchContainer,
    .vtlist-mobile-active .floatThead-container,
    .vtlist-mobile-active .floatThead-wrapper thead,
    .vtlist-mobile-active tr.listViewContentHeader,
    .vtlist-mobile-active tr.searchRow {
        display: none !important;
    }

    .vtlist-mobile-active #listview-table tbody {
        display: block !important;
    }

    .vtlist-mobile-active #listview-table tr:not(.listViewEntries):not(.emptyRecordsDiv) {
        display: none !important;
    }

    /* Riga "nessun record" – visibile e centrata */
    .vtlist-mobile-active #listview-table tr.emptyRecordsDiv {
        display: block !important;
        text-align: center;
        padding: 32px 16px;
        color: #888;
        font-size: 14px;
    }
    .vtlist-mobile-active #listview-table tr.emptyRecordsDiv td {
        display: block !important;
        border: none !important;
        padding: 0 !important;
    }
    .vtlist-mobile-active #listview-table tr.emptyRecordsDiv .emptyRecordsContent {
        font-size: 14px;
        color: #888;
    }

    /* touch-action: pan-y sull'intera catena ancestori per scroll nativo */
    .vtlist-mobile-active,
    .vtlist-mobile-active #listViewContent,
    .vtlist-mobile-active .listViewPageDiv,
    .vtlist-mobile-active #table-content,
    .vtlist-mobile-active #listedit,
    .vtlist-mobile-active #listview-table,
    .vtlist-mobile-active #listview-table tbody,
    .vtlist-mobile-active #listview-table tr.listViewEntries,
    .vtlist-mobile-active #listview-table tr.listViewEntries td {
        touch-action: pan-y !important;
    }

    /* Ogni riga → card con bordino sinistro colorato (colore via CSS custom property) */
    .vtlist-mobile-active #listview-table tr.listViewEntries {
        display: block !important;
        background-color: #ffffff !important;
        border: 1px solid #dde3ec !important;
        border-left: 4px solid var(--vtcard-accent, #3d9ec9) !important;
        border-radius: 6px;
        margin: 8px;
        padding: 4px 12px 10px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    }

    /* Ogni cella → riga */
    .vtlist-mobile-active #listview-table td {
        display: flex !important;
        align-items: baseline;
        gap: 8px;
        border: none !important;
        border-top: none !important;
        padding: 4px 0 !important;
        font-size: 13px;
        line-height: 1.4;
        border-bottom: 1px solid #f0f2f5 !important;
        width: 100% !important;
    }
    .vtlist-mobile-active #listview-table td:last-child {
        border-bottom: none !important;
    }

    /* Celle valore: nascoste di default, rivelate da JS con vtcard-show */
    .vtlist-mobile-active #listview-table td.listViewEntryValue {
        display: none !important;
    }
    .vtlist-mobile-active #listview-table td.listViewEntryValue.vtcard-show {
        display: block !important;
        padding: 2px 0 !important;
    }
    /* Valore – tutta la larghezza, no troncamento */
    .vtlist-mobile-active #listview-table td.listViewEntryValue.vtcard-show .fieldValue {
        display: block !important;
        width: 100% !important;
        word-break: break-word !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* Primo campo visibile → grassetto */
    .vtlist-mobile-active #listview-table td.vtcard-primary .fieldValue {
        font-weight: 600;
        font-size: 14px;
    }

    /* Link nelle card: testo normale */
    .vtlist-mobile-active #listview-table td.listViewEntryValue .fieldValue a,
    .vtlist-mobile-active #listview-table td.listViewEntryValue .fieldValue a:hover,
    .vtlist-mobile-active #listview-table td.listViewEntryValue .fieldValue a:visited {
        color: inherit !important;
        text-decoration: none !important;
    }

    /* Nascondi colonna azioni (checkbox + dropdown) */
    .vtlist-mobile-active #listview-table td.listViewRecordActions {
        display: none !important;
    }

    /* Nascondi riga totali (background verde inline) */
    .vtlist-mobile-active #listview-table tr.listViewEntries[style*="a2f567"] {
        display: none !important;
    }

    /* Nascondi card senza campi visibili */
    .vtlist-mobile-active #listview-table tr.listViewEntries.vtcard-row-empty {
        display: none !important;
    }

    /* Hover card */
    .vtlist-mobile-active #listview-table tr.listViewEntries:hover {
        background-color: #f9fbfc !important;
    }

    /* Spinner infinite scroll */
    .vt-infinite-spinner {
        display: block;
        text-align: center;
        padding: 16px 0 8px;
        font-size: 22px;
        color: var(--vtcard-accent, #3d9ec9);
    }

}

/* ==========================================================================
   RELATED LIST – card layout mobile
   ========================================================================== */

/* Nasconde subito griglia related (evita flash) finché JS non applica le card.
   Funziona come vtcard-preload ma tramite classe CSS permanente sul .relatedContainer */
@media (max-width: 1279px) {
    .relatedContainer:not(.vtrelated-mobile-active) #listview-table thead,
    .relatedContainer:not(.vtrelated-mobile-active) #listview-table td.related-list-actions,
    .relatedContainer:not(.vtrelated-mobile-active) #listview-table tr.searchRow {
        visibility: hidden !important;
    }
    .relatedContainer:not(.vtrelated-mobile-active) #listview-table tr.listViewEntries td {
        border: none !important;
        padding: 0 !important;
        line-height: 0.1 !important;
        overflow: hidden !important;
        max-height: 0 !important;
        opacity: 0 !important;
    }
    .relatedContainer:not(.vtrelated-mobile-active) #listview-table tr.listViewEntries {
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }
}

@media (max-width: 1279px) {

    /* Nascondi intestazione e ricerca */
    .vtrelated-mobile-active #listview-table thead {
        display: none !important;
    }

    /* Tabella → blocco, tbody → blocco */
    .vtrelated-mobile-active #listview-table,
    .vtrelated-mobile-active #listview-table tbody {
        display: block !important;
        width: 100% !important;
        border: none !important;
    }

    /* Ogni riga → card */
    .vtrelated-mobile-active #listview-table tr.listViewEntries {
        display: block !important;
        background-color: #ffffff !important;
        border: 1px solid #dde3ec !important;
        border-left: 4px solid var(--vtcard-accent, #3d9ec9) !important;
        border-radius: 6px !important;
        margin: 8px 4px !important;
        padding: 4px 12px 10px !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible !important;
    }

    /* Ogni cella → griglia label | valore */
    .vtrelated-mobile-active #listview-table td.relatedListEntryValues {
        display: none !important;
    }
    .vtrelated-mobile-active #listview-table td.relatedListEntryValues.vtcard-show {
        display: grid !important;
        grid-template-columns: 140px 1fr !important;
        align-items: baseline !important;
        gap: 0 8px !important;
        border: none !important;
        border-bottom: 1px solid #f0f2f5 !important;
        padding: 4px 0 !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
        width: 100% !important;
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible !important;
    }
    .vtrelated-mobile-active #listview-table td.relatedListEntryValues.vtcard-show:last-child {
        border-bottom: none !important;
    }

    /* Label via ::before — colonna 1 */
    .vtrelated-mobile-active #listview-table td.relatedListEntryValues.vtcard-show[data-label]::before {
        content: attr(data-label) !important;
        font-size: 13px !important;
        color: #999 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        align-self: baseline !important;
    }

    /* Valore — colonna 2, sempre allineato a sinistra */
    .vtrelated-mobile-active #listview-table td.relatedListEntryValues .value,
    .vtrelated-mobile-active #listview-table td.relatedListEntryValues .value span,
    .vtrelated-mobile-active #listview-table td.relatedListEntryValues[align] {
        text-align: left !important;
        grid-column: 2 !important;
    }

    /* Prima cella valore → grassetto */
    .vtrelated-mobile-active #listview-table td.vtcard-primary .value {
        font-weight: 600;
        font-size: 16px;
    }

    /* Link nelle card: testo normale */
    .vtrelated-mobile-active #listview-table td .value a {
        color: inherit !important;
        text-decoration: none !important;
    }

    /* Nascondi colonna azioni (matita/cestino) */
    .vtrelated-mobile-active #listview-table td.related-list-actions {
        display: none !important;
    }

    /* Riga totali */
    .vtrelated-mobile-active #listview-table tr.listViewEntries[style*="a2f567"] {
        border-left-color: #a2f567 !important;
    }

    /* Hover */
    .vtrelated-mobile-active #listview-table tr.listViewEntries:hover {
        background-color: #f9fbfc !important;
    }
    .vt-related-empty {
        text-align: center;
        color: #999;
        font-size: 13px;
        padding: 16px 0;
    }

    /* -----------------------------------------------------------------------
       RELATED HEADER – bottoni azione mobile
    ----------------------------------------------------------------------- */
    .relatedContainer .relatedHeader {
        background: transparent;
        border-radius: 0;
        padding: 6px 0 8px !important;
        margin-bottom: 4px;
    }
    .relatedContainer .relatedHeader .btn-toolbar.row {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        margin: 0;
        gap: 6px;
    }
    /* Colonna con i bottoni azione (ha anche classe btn-toolbar) */
    .relatedContainer .relatedHeader .col-lg-6.btn-toolbar {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin: 0 !important;
    }
    /* Il .row dentro col-lg-6.btn-toolbar (DocumentsRelatedList) */
    .relatedContainer .relatedHeader .col-lg-6.btn-toolbar > .row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin: 0 !important;
        align-items: center !important;
        width: 100% !important;
    }
    /* Ogni btn-group occupa spazio naturale */
    .relatedContainer .relatedHeader .col-lg-6.btn-toolbar .btn-group {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }
    /* Riga paginazione */
    .relatedContainer .relatedHeader .col-lg-6:not(.btn-toolbar) {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Bottone pill — aggiunto via JS su tutti i bottoni azione delle related/activity */
    .vt-action-pill {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        height: 36px !important;
        padding: 0 16px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 18px !important;
        border: 1.5px solid var(--vtcard-accent, #3d9ec9) !important;
        background: transparent !important;
        color: var(--vtcard-accent, #3d9ec9) !important;
        box-shadow: none !important;
        white-space: nowrap !important;
        cursor: pointer !important;
        width: auto !important;
        min-width: 0 !important;
        text-decoration: none !important;
        vertical-align: middle !important;
    }
    .vt-action-pill:active,
    .vt-action-pill:focus {
        background: var(--vtcard-accent, #3d9ec9) !important;
        color: #fff !important;
        text-decoration: none !important;
    }
    .vt-action-pill i.fa {
        font-size: 12px !important;
    }
    /* Nasconde img usata come icona nel dropdown Documenti */
    .vt-action-pill img {
        display: none !important;
    }
    /* Bottoni Aggiungi Attività/Evento: sotto il titolo, tutta la larghezza */
    #relatedActivities .summaryWidgetContainer .widget_header {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px 8px !important;
    }
    #relatedActivities .summaryWidgetContainer .widget_header h4 {
        flex: 1 1 100% !important;
        float: none !important;
        margin: 0 !important;
    }
    #relatedActivities .summaryWidgetContainer .widget_header .pull-right {
        float: none !important;
        flex: 0 0 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        align-items: center !important;
        margin-top: 0 !important;
    }
    /* I singoli bottoni non devono prendere tutta la larghezza */
    #relatedActivities .summaryWidgetContainer .widget_header .pull-right .vt-action-pill {
        flex: 0 0 auto !important;
        width: auto !important;
    }

    /* Attività in summary: compatta le righe col-lg-* che collassano a 100% su mobile */
    .activityEntries .media .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }
    .activityEntries .media .row .col-lg-1,
    .activityEntries .media .row .col-md-1,
    .activityEntries .media .row .col-sm-1 {
        flex: 0 0 auto !important;
        width: 28px !important;
        float: none !important;
        padding: 0 !important;
        font-size: 20px !important;
    }
    .activityEntries .media .row .col-lg-7,
    .activityEntries .media .row .col-md-7,
    .activityEntries .media .row .col-sm-7 {
        flex: 1 1 0 !important;
        width: auto !important;
        float: none !important;
        min-width: 0 !important;
        padding: 0 !important;
    }
    .activityEntries .media .row .col-lg-4,
    .activityEntries .media .row .col-md-4,
    .activityEntries .media .row .col-sm-4 {
        flex: 0 0 auto !important;
        width: auto !important;
        float: none !important;
        padding: 0 !important;
        line-height: normal !important;
    }
    .activityEntries .activityStatus {
        padding-right: 0 !important;
    }
    .activityEntries hr {
        margin: 6px 0 !important;
    }
    .activityEntries .summaryViewEntries {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }

    /* Bottone Carica (fileUploadBtn): testo centrato */
    .fileUploadBtn span {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: none !important;
    }

    /* Nasconde il menu dropdown documenti su mobile (il toggle apre direttamente la modale) */
    .relatedHeader .dropdown-menu {
        display: none !important;
    }
    .relatedContainer .relatedHeader .relatedViewActions {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
    }
    /* Dissolvi il btn-group: diventa un flex trasparente */
    .relatedContainer .relatedHeader .relatedViewActions .btn-group {
        display: contents !important;
    }
    /* Freccia sinistra */
    .relatedContainer .relatedHeader .relatedViewActions #PreviousPageButton {
        order: 1 !important;
        padding: 6px 14px !important;
        font-size: 17px !important;
        line-height: 1.4 !important;
        float: none !important;
    }
    /* Contatore – estratto dal btn-group, in mezzo */
    .relatedContainer .relatedHeader .relatedViewActions .pageNumbers {
        order: 2 !important;
        flex: 1 !important;
        text-align: center !important;
        font-size: 15px !important;
        color: #555 !important;
        position: static !important;
        top: auto !important;
        white-space: nowrap !important;
        float: none !important;
    }
    /* Freccia destra */
    .relatedContainer .relatedHeader .relatedViewActions #NextPageButton {
        order: 3 !important;
        padding: 6px 14px !important;
        font-size: 17px !important;
        line-height: 1.4 !important;
        float: none !important;
    }
    /* Nasconde bottone "..." page jump (dropdown con input) */
    .relatedContainer .relatedHeader .relatedViewActions #PageJump,
    .relatedContainer .relatedHeader .relatedViewActions #PageJumpDropDown {
        display: none !important;
    }

    /* -----------------------------------------------------------------------
       COMMENTI – sezione addCommentBlock mobile
    ----------------------------------------------------------------------- */
    .commentContainer .addCommentBlock {
        background: #f7f9fc;
        border-radius: 10px;
        padding: 12px !important;
        margin-bottom: 12px;
    }
    /* Textarea commento (sia nuovo che risposta) */
    .commentContainer .addCommentBlock textarea.commentcontent,
    .singleComment .addCommentBlock textarea.commentcontent {
        font-size: 15px !important;
        border-radius: 8px !important;
        border: 1px solid #ddd !important;
        padding: 10px !important;
        resize: vertical !important;
        min-height: 80px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Il blocco risposta occupa tutto il container */
    .singleComment .addCommentBlock {
        width: 100% !important;
        box-sizing: border-box !important;
        background: #f7f9fc !important;
        border-radius: 10px !important;
        padding: 12px !important;
        margin-top: 8px !important;
    }
    /* Riga con bottoni sotto la textarea */
    .commentContainer .addCommentBlock .row:last-child {
        margin-top: 10px !important;
    }
    /* Bottone Pubblica / Salva */
    .commentContainer .addCommentBlock .btn.detailViewSaveComment {
        display: inline-flex !important;
        align-items: center !important;
        height: 40px !important;
        padding: 0 20px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        border-radius: 20px !important;
        background: #3CB878 !important;
        border: none !important;
        color: #fff !important;
        box-shadow: 0 2px 6px rgba(60,184,120,0.25) !important;
    }
    .commentContainer .addCommentBlock .btn.detailViewSaveComment:active {
        background: #2ea066 !important;
        box-shadow: none !important;
    }
    /* Sezione allegato documento */
    .commentContainer .addCommentBlock .fileUploadContainer {
        margin-top: 4px !important;
    }
    .commentContainer .addCommentBlock .fileUploadBtn.btn.btn-primary {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        height: 40px !important;
        padding: 0 16px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 20px !important;
        background: transparent !important;
        border: 1.5px solid #3d9ec9 !important;
        color: #3d9ec9 !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }
    .commentContainer .addCommentBlock .fileUploadBtn.btn.btn-primary span {
        pointer-events: none !important;
    }
    .commentContainer .addCommentBlock .fileUploadBtn.btn.btn-primary:active {
        background: #3d9ec9 !important;
        color: #fff !important;
    }
    /* Icona info accanto all'allegato */
    .commentContainer .addCommentBlock .col-xs-6.paddingTop10.pull-left .fa-info-circle,
    .commentContainer .addCommentBlock .col-xs-6.paddingTop10.pull-left > i {
        font-size: 18px !important;
        color: #aaa !important;
        vertical-align: middle !important;
        margin-left: 8px !important;
    }
    /* Colonne allegato + pubblica: affiancate e allineate */
    .commentContainer .addCommentBlock .col-xs-6.paddingTop10 {
        display: flex !important;
        align-items: center !important;
        padding-top: 0 !important;
    }
    .commentContainer .addCommentBlock .col-xs-6.pull-right.paddingTop10 {
        justify-content: flex-end !important;
    }
    .commentContainer .addCommentBlock .col-xs-6.pull-left.paddingTop10 {
        justify-content: flex-start !important;
    }
    /* Documenti in sommario: layout flessibile su mobile */
    .recentActivitiesContainer #documentRelatedRecord,
    .recentActivitiesContainer [id^="documentRelatedRecord"] {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: 100% !important;
    }
    .recentActivitiesContainer #documentRelatedRecord .col-sm-5,
    .recentActivitiesContainer [id^="documentRelatedRecord"] .col-sm-5 {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        float: none !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .recentActivitiesContainer #documentRelatedRecord .col-sm-2,
    .recentActivitiesContainer [id^="documentRelatedRecord"] .col-sm-2 {
        flex: 0 0 auto !important;
        width: auto !important;
        float: none !important;
        display: flex !important;
        gap: 8px !important;
        align-items: center !important;
    }
    .recentActivitiesContainer #documentRelatedRecord .col-sm-2 a,
    .recentActivitiesContainer [id^="documentRelatedRecord"] .col-sm-2 a {
        font-size: 18px !important;
        padding: 4px !important;
    }

    /* Related list documenti: bottone Nuovo Documento — nasconde icona + e caret, lascia solo testo */

    .relatedContainer .relatedHeader .dropdown-toggle .fa-plus,
    .relatedContainer .relatedHeader .dropdown-toggle .caret {
        display: none !important;
    }
    .relatedContainer .relatedHeader .dropdown-toggle {
        display: inline-flex !important;
        align-items: center !important;
        height: 30px !important;
        padding: 0 10px !important;
        border-radius: 15px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        border: 1.5px solid var(--vtcard-accent, #3d9ec9) !important;
        background: #fff !important;
        color: var(--vtcard-accent, #3d9ec9) !important;
        box-shadow: none !important;
        white-space: nowrap !important;
    }

    /* Related list documenti: bottoni affiancati in riga */
    .relatedContainer .relatedHeader .row {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: row !important;
        align-items: center !important;
    }
    .relatedContainer .relatedHeader .row > [class*="col-"] {
        width: auto !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        float: none !important;
    }

    /* Related list documenti: bottone Seleziona stesso stile di Aggiungi */
    .relatedContainer .btn.selectRelation,
    .relatedContainer .btn.addButton {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        height: 30px !important;
        padding: 0 10px !important;
        border-radius: 15px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        border: 1.5px solid var(--vtcard-accent, #3d9ec9) !important;
        background: #fff !important;
        color: var(--vtcard-accent, #3d9ec9) !important;
        box-shadow: none !important;
        white-space: nowrap !important;
    }
    .relatedContainer .btn.selectRelation:active,
    .relatedContainer .btn.addButton:active {
        background: var(--vtcard-accent, #3d9ec9) !important;
        color: #fff !important;
    }

    /* Modale anteprima file: bottone Download File */
    .filePreview .btn.btn-default[href] {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        height: 36px !important;
        padding: 0 16px !important;
        border-radius: 18px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        background: #2c3b49 !important;
        color: #fff !important;
        border: none !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
        white-space: nowrap !important;
    }

    /* Documenti collegati (related list): icone azione più grandi e spaziose */
    .relatedContainer .actionImages {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    .relatedContainer .actionImages a {
        font-size: 20px !important;
        padding: 4px !important;
        line-height: 1 !important;
    }

    /* File Preview modale: layout mobile (col-lg-* non scatta su mobile) */
    .filePreview .modal-header {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    .filePreview .modal-header .filename {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        float: none !important;
    }
    .filePreview .modal-header .filename h3 {
        font-size: 15px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }
    .filePreview .modal-header .col-lg-3 {
        flex: 0 0 auto !important;
        width: auto !important;
        float: none !important;
    }
    .filePreview .modal-header .col-lg-1 {
        flex: 0 0 auto !important;
        width: auto !important;
        float: none !important;
    }
    .filePreview .modal-header .close {
        font-size: 24px !important;
        padding: 4px 8px !important;
        line-height: 1 !important;
    }
    .filePreview .modal-body {
        height: calc(100vh - 130px) !important;
    }

    /* Azioni commento (Rispondi/Modifica/Elimina/N Risposte): riga centrata con gap */
    .commentActionsContainer {
        margin-top: 6px !important;
    }
    .commentActionsContainer .commentActions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        align-items: center !important;
    }
    .commentActionsContainer .commentActions a,
    .commentActionsContainer .commentActions span {
        font-size: 13px !important;
        padding: 4px 0 !important;
    }
    /* Rimuove gli &nbsp; che creano spazio anomalo */
    .commentActionsContainer .commentActions br { display: none !important; }
}

/* ==========================================================================
   FATTURATO – widget MonthlyRevenues: colonne su mobile
   Solo i widget MonthlyRevenuesTotal e MonthlyRevenuesGrouped
   ========================================================================== */
@media (max-width: 1279px) {
    /* Contenuto riga fatturato: flex con colonne bilanciate */
    li[data-name="MonthlyRevenuesTotal"] .dashboardWidgetContent .row,
    li[data-name="MonthlyRevenuesGrouped"] .dashboardWidgetContent .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: baseline !important;
    }
    /* Colonne: forza display in riga (col-lg-4 non scatta su mobile) */
    li[data-name="MonthlyRevenuesTotal"] .dashboardWidgetContent .col-lg-4,
    li[data-name="MonthlyRevenuesGrouped"] .dashboardWidgetContent .col-lg-4 {
        flex: 1 1 0 !important;
        width: auto !important;
        float: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding: 2px 4px !important;
        word-break: break-word !important;
        white-space: normal !important;
        font-size: 12px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    /* Prima colonna (nome campo/agente): più spazio */
    li[data-name="MonthlyRevenuesTotal"] .dashboardWidgetContent .row .col-lg-4:first-child,
    li[data-name="MonthlyRevenuesGrouped"] .dashboardWidgetContent .row .col-lg-4:first-child {
        flex: 2 1 0 !important;
    }

    /* Immagine utente/account nella detail view: mantieni proporzioni, non allargare */
    .detail-view img[width],
    .detailViewPageDiv img[width],
    .detailViewContainer img[width] {
        max-width: 100% !important;
        height: auto !important;
        width: auto !important;
    }
    /* Immagine small (ImageDetailView.tpl): max 150px */
    .detail-view img[width="150"],
    .detailViewPageDiv img[width="150"] {
        max-width: 150px !important;
    }
    /* Immagine grande (DetailViewBlockView.tpl): max 280px (proporzionata) */
    .detail-view img[width="400"],
    .detailViewPageDiv img[width="400"],
    .detail-view img[width="300"],
    .detailViewPageDiv img[width="300"] {
        max-width: 280px !important;
    }
    /* Immagine in modifica: adatta larghezza */
    .fileUploadContainer img,
    span[name="existingImages"] img {
        width: 100% !important;
        max-width: 280px !important;
        height: auto !important;
    }
    span[name="existingImages"] {
        display: block !important;
        width: 100% !important;
        float: none !important;
    }
}

/* ==========================================================================
   DASHBOARD – bottone + inline per aggiungere nuova tab (tutti i breakpoint)
   ========================================================================== */

/* Nasconde il bottone originale nel dropdown e il dropdown Ulteriori */
#newDashBoardLi {
    display: none !important;
}
.moreSettings {
    display: none !important;
}

/* Tab + – editing inline senza bordi, simula il rename del tab */
.vt-add-dashboard-li,
.vt-add-dashboard-li:focus,
.vt-add-dashboard-li:active,
.vt-add-dashboard-li.active {
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
}
.vt-add-dashboard-li a,
.vt-add-dashboard-li a:hover,
.vt-add-dashboard-li a:focus,
.vt-add-dashboard-li a:active {
    cursor: pointer;
    text-decoration: none !important;
    outline: none !important;
    border-bottom: none !important;
}
.vt-add-editing {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.vt-add-dashboard-li .vt-add-plus-label strong {
    font-size: 22px;
    font-weight: 900;
}
.vt-add-dashboard-input {
    background: transparent;
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: 600;
    color: inherit;
    width: 90px;
    padding: 0 2px;
}
.vt-dash-save,
.vt-dash-cancel {
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    padding: 0 6px;
    line-height: 1;
}
.vt-dash-save {
    color: #5cb85c;
}
.vt-dash-cancel {
    color: #999;
}

/* ==========================================================================
   LOADING OVERLAY – pallini animati durante navigazione pjax
   ========================================================================== */
#vt-loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.75);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
#vt-loading-overlay.vt-loading-visible {
    display: flex;
}
/* Nasconde il loading gif di vtiger quando il nostro overlay è attivo */
#vt-loading-overlay.vt-loading-visible ~ #messageBar,
body:has(#vt-loading-overlay.vt-loading-visible) #messageBar {
    display: none !important;
}
.vt-loading-dots {
    display: flex;
    gap: 10px;
    align-items: center;
}
.vt-loading-dots span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #333;
    display: inline-block;
    animation: vt-bounce 1.2s infinite ease-in-out both;
    transform: scale(0.6);
    opacity: 0.4;
}
.vt-loading-dots span:nth-of-type(1) { animation-delay: -0.4s; }
.vt-loading-dots span:nth-of-type(2) { animation-delay: -0.2s; }
.vt-loading-dots span:nth-of-type(3) { animation-delay: 0s; }
@keyframes vt-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%            { transform: scale(1.2); opacity: 1; }
}

/* Loading overlay solo su mobile */
@media (min-width: 769px) {
    #vt-loading-overlay,
    #vt-loading-overlay.vt-loading-visible {
        display: none !important;
    }
}

/* ==========================================================================
   DASHBOARD – FAB + bottom sheet per aggiungere widget (tutti i breakpoint)
   ========================================================================== */

/* Nasconde il vecchio header vuoto */
.dashboardHeading {
    padding: 0 !important;
    min-height: 0 !important;
}

/* Linguetta laterale destra – discreta, si espande al hover/tap */
.vt-widget-tab {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.18);
    color: #fff;
    border-radius: 8px 0 0 8px;
    padding: 14px 6px;
    cursor: pointer;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 0.2s, padding 0.2s;
    writing-mode: vertical-lr;
    letter-spacing: 1px;
}
.vt-widget-tab:hover,
.vt-widget-tab:active {
    background: rgba(0,0,0,0.38);
    padding: 14px 10px;
}

/* Overlay scuro dietro il sheet */
.vt-widget-sheet-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1060;
}
.vt-widget-sheet-overlay.vt-widget-sheet-overlay-open {
    display: block;
}

/* Bottom sheet */
.vt-widget-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
    z-index: 1070;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.vt-widget-sheet.vt-widget-sheet-open {
    transform: translateY(0);
}

/* Header sheet */
.vt-widget-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    font-size: 17px;
    font-weight: 600;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.vt-widget-sheet-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #888;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

/* Body sheet – griglia di bottoni */
.vt-widget-sheet-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Singolo widget item */
.vt-widget-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(33.333% - 8px);
    min-height: 80px;
    background: #f7f7f7;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    padding: 12px 8px;
    text-align: center;
    transition: background 0.15s;
}
.vt-widget-item:hover,
.vt-widget-item:active {
    background: #efefef;
}
.vt-widget-item .fa {
    font-size: 22px;
    color: #e8540a;
}

/* ================================================================== */
/* MENU SIDEBAR – accordion (tutti i breakpoint)                       */
/* ================================================================== */
.app-menu .app-modules-dropdown {
    display: none !important;
}
.vt-accordion-submenu {
    display: none;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #1e2b36 !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
}
.vt-accordion-submenu.vt-open {
    display: block !important;
}
.vt-accordion-submenu li a {
    display: flex !important;
    align-items: center !important;
    padding: 10px 12px 10px 20px !important;
    color: #fff !important;
    text-decoration: none !important;
    overflow: hidden !important;
}
.vt-accordion-submenu li a:active,
.vt-accordion-submenu li a:hover {
    background: #596875 !important;
}
.vt-accordion-submenu .module-icon {
    flex: 0 0 36px !important;
    width: 36px !important;
    margin-right: 10px !important;
    opacity: 0.8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.vt-accordion-submenu .module-icon .custom-module {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
}
.vt-accordion-submenu .module-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    font-size: 13px !important;
}
.app-item.vt-accordion-open .fa-chevron-right {
    transform: rotate(90deg) !important;
    transition: transform 0.2s !important;
}

@media (max-width: 1279px) {
    .module-breadcrumb h4 { font-size: 14px; }
    .module-breadcrumb-Detail .current-filter-name:not(.cursorPointer),
    .module-breadcrumb-Edit .current-filter-name:not(.cursorPointer) {
        display: none !important;
    }
    .module-breadcrumb .module-title {
        font-size: 17px !important;
        white-space: nowrap;
    }
    .module-breadcrumb .current-filter-name {
        font-size: 15px !important;
        white-space: nowrap;
    }
    .module-breadcrumb .current-filter-name a {
        font-size: 15px !important;
    }
    .module-breadcrumb .fa-angle-right {
        font-size: 15px !important;
    }

    /* Listview – nasconde navbar con ellipsis e bottoni azioni originali */
    .module-action-content .navbar-header,
    .module-action-content #appnavcontent {
        display: none !important;
    }

    /* Menu – larghezza 3/4 schermo */
    .app-menu {
        width: 75vw !important;
    }


    /* ------------------------------------------------------------------ */
    /* Modale "Crea lista / Modifica filtro" – restyling mobile           */
    /* ------------------------------------------------------------------ */

    /* Contenitore modale: occupa tutto lo schermo */
    #overlayPageContent .modal-dialog,
    .overlayPageContent .modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    #filterContainer .modal-content {
        border-radius: 12px 12px 0 0 !important;
        border: none !important;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15) !important;
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }

    /* Header modale */
    #filterContainer .overlayHeader {
        background: #2c3b49 !important;
        border-radius: 12px 12px 0 0 !important;
        padding: 14px 16px !important;
        flex-shrink: 0 !important;
    }
    #filterContainer .overlayHeader .modal-title,
    #filterContainer .overlayHeader h4 {
        color: #fff !important;
        font-size: 17px !important;
        font-weight: 600 !important;
    }
    #filterContainer .overlayHeader .close {
        color: #fff !important;
        opacity: 0.8 !important;
        font-size: 22px !important;
    }

    /* Body scrollabile */
    #filterContainer .modal-body {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        padding: 16px !important;
        height: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    #filterContainer .customview-content {
        height: auto !important;
    }

    /* Label sezioni */
    #filterContainer .modal-body label,
    #filterContainer .modal-body .filterHeaders {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #444 !important;
        margin-bottom: 6px !important;
        display: block !important;
    }

    /* Checkbox: allinea a sinistra con margine e spazio verticale */
    #filterContainer .checkbox-inline {
        margin-left: 16px !important;
        margin-top: 10px !important;
        margin-bottom: 4px !important;
        padding-left: 0 !important;
        float: none !important;
        display: block !important;
    }
    /* Spazio tra il form-group nome vista e quello colonne */
    #filterContainer .form-group {
        margin-bottom: 20px !important;
    }

    /* Input nome vista */
    #filterContainer #viewname {
        font-size: 16px !important;
        height: 44px !important;
        border-radius: 8px !important;
        border: 1.5px solid #c8d0d8 !important;
        padding: 0 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #filterContainer #viewname:focus {
        border-color: #6e7f8a !important;
        box-shadow: 0 0 0 3px rgba(110,127,138,0.15) !important;
        outline: none !important;
    }

    /* Select2 tag colonne */
    #filterContainer .columnsSelectDiv .select2-container {
        width: 100% !important;
    }
    #filterContainer .columnsSelectDiv .select2-choices {
        border-radius: 8px !important;
        border: 1.5px solid #c8d0d8 !important;
        padding: 6px !important;
        min-height: 48px !important;
        background: #fff !important;
    }
    #filterContainer .columnsSelectDiv .select2-search-choice {
        font-size: 13px !important;
        padding: 5px 22px 5px 8px !important;
        border-radius: 20px !important;
        background: #e8edf2 !important;
        border: 1px solid #c8d0d8 !important;
        margin: 3px !important;
        line-height: 1.4 !important;
    }
    #filterContainer .columnsSelectDiv .select2-search-choice-close {
        top: 7px !important;
        right: 5px !important;
    }
    #filterContainer .columnsSelectDiv .select2-search input {
        font-size: 14px !important;
        height: 32px !important;
    }
    /* Nasconde colonna vuota col-2 su mobile */
    #filterContainer .col-lg-2.col-md-2.col-sm-2 {
        display: none !important;
    }

    /* Sezione filtro condizioni */
    #filterContainer .filterConditionContainer {
        border-radius: 10px !important;
        border: 1.5px solid #dde3ec !important;
        background: #f8f9fb !important;
        padding: 12px !important;
        margin-top: 8px !important;
    }
    #filterContainer .filterConditionContainer .well {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Bottoni "Tutte le condizioni" / "Aggiungi condizione" */
    #filterContainer .filterConditionContainer .btn,
    #filterContainer .filterConditionContainer button {
        min-height: 40px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
        padding: 8px 14px !important;
    }

    /* Righe condizione filtro */
    #filterContainer .filterConditionsDiv .conditionRow,
    #filterContainer .filterConditionsDiv .condition-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-bottom: 8px !important;
        align-items: center !important;
    }
    #filterContainer .filterConditionsDiv select,
    #filterContainer .filterConditionsDiv input[type="text"],
    #filterContainer .filterConditionsDiv input[type="number"] {
        font-size: 15px !important;
        height: 40px !important;
        border-radius: 8px !important;
        border: 1.5px solid #c8d0d8 !important;
        padding: 0 10px !important;
        min-width: 0 !important;
        width: 100% !important;
    }


    /* Footer – Salva / Annulla */
    #filterContainer .modal-overlay-footer {
        border-left: none !important;
        background: #f8f9fb !important;
        border-top: 1px solid #dde3ec !important;
        padding: 12px 16px !important;
        flex-shrink: 0 !important;
    }
    #filterContainer .modal-overlay-footer .row {
        margin: 0 !important;
    }
    #filterContainer .modal-overlay-footer .textAlignCenter {
        display: flex !important;
        gap: 10px !important;
        justify-content: center !important;
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
    }
    #filterContainer .saveButton {
        flex: 1 !important;
        max-width: 160px !important;
        height: 46px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        border-radius: 23px !important;
        background: #2c3b49 !important;
        border: none !important;
    }
    #filterContainer .saveButton:active {
        background: #1e2b36 !important;
    }
    #filterContainer .cancelLink {
        flex: 1 !important;
        max-width: 160px !important;
        height: 46px !important;
        font-size: 16px !important;
        border-radius: 23px !important;
        border: 1.5px solid #c8d0d8 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #555 !important;
        background: #fff !important;
        text-decoration: none !important;
    }

    /* Topbar – icone lente e griglia nella navbar-header */
    .navbar-header .navbar-toggle .fa {
        font-size: 19px !important;
    }
    .navbar-header .navbar-toggle {
        padding: 8px 10px !important;
    }

    /* Topbar – icone nella global-actions (calendario, mail, report, utente) */
    .global-actions .nav.navbar-nav > li > div > a {
        font-size: 19px !important;
        padding: 14px 10px !important;
    }
    .global-actions .nav.navbar-nav > li.dropdown > div > a .fa {
        font-size: 19px !important;
    }

    /* Dropdown utente – nascondi preferenze */
    #menubar_item_right_LBL_MY_PREFERENCES,
    #menubar_item_right_LBL_MY_PREFERENCES + span,
    .logout-footer .pull-left {
        display: none !important;
    }

    /* Converti Lead: layout label sopra valore, allineato a sinistra */
    #convertLeadContainer .fieldLabel.col-lg-4 {
        width: 100% !important;
        text-align: left !important;
        padding-bottom: 2px !important;
    }
    #convertLeadContainer .fieldLabel.col-lg-4 label {
        float: none !important;
        text-align: left !important;
        color: #888 !important;
        font-size: 12px !important;
    }
    #convertLeadContainer .fieldValue.col-lg-8 {
        width: 100% !important;
    }
    #convertLeadContainer .fieldValue.col-lg-8 input[type="text"],
    #convertLeadContainer .fieldValue.col-lg-8 input[type="hidden"],
    #convertLeadContainer .fieldValue.col-lg-8 select {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #convertLeadContainer input[type="radio"] {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        appearance: auto !important;
        -webkit-appearance: radio !important;
        vertical-align: middle !important;
        margin-right: 4px !important;
    }
    #convertLeadContainer .defaultFields .fieldValue.col-lg-8 {
        font-size: 14px !important;
    }
    #convertLeadContainer .row {
        margin-bottom: 4px !important;
    }
    #convertLeadContainer .col-lg-1 {
        display: none !important;
    }
    #convertLeadContainer .col-lg-10 {
        width: 100% !important;
    }

    /* Profilo utente: clearfix per float interni */
    .logout-content .col-lg-8.col-sm-8::after {
        content: '';
        display: table;
        clear: both;
    }

    /* Dropdown utente – testo più grande */
    .logout-content .profile-container h4 {
        font-size: 16px !important;
    }
    .logout-content .profile-container h5,
    .logout-content .profile-container p {
        font-size: 14px !important;
    }
    .logout-content #logout-footer a,
    .logout-content #logout-footer .fa {
        font-size: 17px !important;
    }
    .logout-content #logout-footer .pull-right {
        padding: 6px 0 !important;
    }
}

@media (max-width: 1279px) {
    .vt-widget-minilist {
        display: none !important;
    }
}

@media (max-width: 1279px) {
    /* Notebook widget – versione mobile pulita */

    /* Nasconde tasto Modifica e data dalla posizione originale */
    .dashboard_notebookWidget_view .col-lg-2,
    .dashboard_notebookWidget_text .col-lg-10 {
        display: none !important;
    }
    /* Data spostata sotto il contenuto */
    .dashboard_notebookWidget_view .col-lg-10 {
        width: 100% !important;
        font-size: 11px !important;
        color: #bbb !important;
        margin-top: 8px;
        float: none !important;
        order: 2;
    }
    .dashboard_notebookWidget_view > div {
        display: flex;
        flex-direction: column;
    }
    .dashboard_notebookWidget_view .pushDown2per {
        order: 1;
    }

    /* Tasto Salva – icona floppy verde in alto a destra */
    .dashboard_notebookWidget_text .col-lg-2 {
        display: block !important;
        width: 100% !important;
        text-align: right;
        margin-bottom: 6px;
    }
    .dashboard_notebookWidget_save {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        font-size: 0 !important;
        padding: 0 !important;
    }
    .dashboard_notebookWidget_save::before {
        content: '\f0c7';
        font-family: FontAwesome;
        font-size: 22px;
        color: #5cb85c;
    }

    /* Area testo in sola lettura – tap per modificare */
    .dashboard_notebookWidget_viewarea {
        min-height: 80px;
        font-size: 15px;
        line-height: 1.5;
        color: #333;
        cursor: pointer;
        padding: 4px 0;
        white-space: pre-wrap;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
        border-radius: 0 !important;
    }
    .dashboard_notebookWidget_viewarea:empty::before {
        content: 'Tocca per aggiungere una nota...';
        color: #aaa;
        font-style: italic;
    }

    /* Textarea in modifica */
    .dashboard_notebookWidget_textarea {
        width: 100% !important;
        font-size: 16px !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 4px 0 !important;
        resize: none;
        min-height: 80px;
        background: transparent !important;
    }

    /* Rimuove i <br> di spaziatura */
    .dashboard_notebookWidget_view br,
    .dashboard_notebookWidget_text br {
        display: none !important;
    }
}

/* ==========================================================================
   DETAIL VIEW – mobile
   ========================================================================== */
@media (max-width: 1279px) {

    /* Font +2px su tutto il contenuto detail view */
    .detail-view .fieldValue,
    .detail-view .fieldLabel,
    .detail-view .summaryWidgetField,
    .detailview-list-status-column,
    .detailViewEntries td,
    .detailViewEntries th {
        font-size: 15px !important;
    }

    /* Nasconde i tasti originali (Modifica, Invia email, Ulteriori) */
    .detailViewButtoncontainer .btn-toolbar .btn-group:first-child > *:not(.vt-detail-actions) {
        display: none !important;
    }
    .detailViewButtoncontainer .btn-toolbar .btn-group:first-child {
        display: flex !important;
        align-items: center;
    }

    /* Spazio verticale nel blocco header detailview */
    .detailview-header-block {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .detailViewButtoncontainer {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    /* Spazio tra i campi header (headerForm) e il link Mostra posizione */
    #headerForm {
        margin-bottom: 12px;
    }

    /* Icone azione mobile – posizionate in alto a destra */
    .vt-detail-actions {
        display: flex;
        align-items: center;
        gap: 32px;
        padding: 4px 0;
    }
    .vt-detail-action-btn {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 26px;
        padding: 4px 8px;
        line-height: 1;
    }
    /* colori impostati inline dal JS (accent per modifica/email/duplica, rosso per elimina) */

    /* Allineamento sinistra importi nelle card listview */
    .vtlist-mobile-active #listview-table td .fieldValue,
    .vtlist-mobile-active #listview-table td .fieldValue span {
        text-align: left !important;
    }
    .vtlist-mobile-active #listview-table td[align] {
        text-align: left !important;
    }

    /* -----------------------------------------------------------------------
       OVERLAY DETTAGLIO – fullscreen, no doppio scroll, no tasti, X grande
    ----------------------------------------------------------------------- */
    .fc-overlay-modal.overlayDetail {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 9999 !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: flex-start !important;
    }
    .fc-overlay-modal.overlayDetail .modal-content {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 0 !important;
    }
    .fc-overlay-modal.overlayDetail .overlayDetailHeader {
        flex-shrink: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-end !important;
        padding-bottom: 4px !important;
    }
    /* Titolo: occupa tutto lo spazio */
    .fc-overlay-modal.overlayDetail .overlayDetailHeader > .col-lg-10 {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    /* Colonna bottoni: si restringe, allineata in basso */
    .fc-overlay-modal.overlayDetail .overlayDetailHeader > .col-lg-2 {
        flex: 0 0 auto !important;
        width: auto !important;
        padding: 0 !important;
    }
    /* Nasconde tasto Modifica */
    .fc-overlay-modal.overlayDetail .editRelatedRecord {
        display: none !important;
    }
    /* Barra icone */
    .fc-overlay-modal.overlayDetail .clearfix {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .fc-overlay-modal.overlayDetail .btn-group,
    .fc-overlay-modal.overlayDetail .pull-right {
        float: none !important;
    }
    .fc-overlay-modal.overlayDetail .fullDetailsButton {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        border: none !important;
        background: transparent !important;
        font-size: 0 !important;
        padding: 0 !important;
        cursor: pointer !important;
        opacity: 0.85 !important;
        color: #3d9ec9 !important; /* fallback, sovrascritto da JS */
    }
    .fc-overlay-modal.overlayDetail .fullDetailsButton::before {
        font-family: FontAwesome !important;
        content: "\f08e" !important;
        font-size: 22px !important;
    }
    .fc-overlay-modal.overlayDetail .fullDetailsButton:hover {
        opacity: 1 !important;
        background: rgba(0,0,0,0.06) !important;
    }
    /* X stessa altezza dell'icona dettaglio */
    .fc-overlay-modal.overlayDetail .close {
        font-size: 26px !important;
        padding: 4px 8px !important;
        opacity: 0.7 !important;
        float: none !important;
    }
    /* Blocca scroll body quando overlay aperto */
    body.vt-overlay-lock {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }
    /* Body: unico scroll interno, niente overflow sul contenitore esterno */
    .fc-overlay-modal.overlayDetail .modal-body {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 12px !important;
        max-height: none !important;
        height: 0 !important;
        scrollbar-width: none !important;
    }
    .fc-overlay-modal.overlayDetail .modal-body::-webkit-scrollbar {
        display: none !important;
    }
    /* mCustomScrollbar nell'overlay: barra sottilissima e quasi invisibile */
    .fc-overlay-modal.overlayDetail .mCSB_scrollTools {
        width: 4px !important;
        opacity: 1 !important;
    }
    .fc-overlay-modal.overlayDetail .mCSB_draggerRail {
        width: 2px !important;
        background: transparent !important;
    }
    .fc-overlay-modal.overlayDetail .mCSB_dragger_bar {
        width: 2px !important;
        background: rgba(0,0,0,0.12) !important;
        border-radius: 2px !important;
    }
    .fc-overlay-modal.overlayDetail .mCSB_dragger:hover .mCSB_dragger_bar {
        background: rgba(0,0,0,0.25) !important;
    }
}

/* ==========================================================================
   CALENDARIO – restyling mobile (< 1280px)
   ========================================================================== */
@media (max-width: 1279px) {

    /* Calendario – nasconde sidebar, navigator, essentials, modules-menu */
    .calendarview #sidebar-essentials,
    .calendarview .essentials-toggle,
    .calendarview #modnavigator,
    #modules-menu {
        display: none !important;
    }
    /* ================================================================
       CALENDARIO MOBILE – layout pulito
    ================================================================ */

    /* Nasconde l'intera barra header vtiger (titolo + bottoni Aggiungi) */
    body.vtiger-calendar-page .module-action-bar {
        display: none !important;
    }

    /* CalendarViewPageDiv: sotto topbar (~50px) */
    body.vtiger-calendar-page .CalendarViewPageDiv {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        height: calc(100vh - 50px) !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* #mycalendar cresce per riempire il CalendarViewPageDiv */
    body.vtiger-calendar-page #mycalendar {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* FullCalendar: struttura flex */
    body.vtiger-calendar-page .fc {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    body.vtiger-calendar-page .fc-view-container {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    /* Lo scroller occupa tutta l'altezza restante dopo la toolbar */
    body.vtiger-calendar-page .fc-scroller {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        height: calc(100vh - 160px) !important;
        max-height: none !important;
    }

    /* Bordo sopra la toolbar FullCalendar */
    body.vtiger-calendar-page .CalendarViewPageDiv {
        border-top: 3px solid #dde3ec !important;
    }

    /* FullCalendar – toolbar (Mese/Settimana/Giorno/Agenda + nav) */
    body.vtiger-calendar-page .fc-toolbar {
        display: flex !important;
        align-items: center !important;
        padding: 6px 8px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin: 0 !important;
    }
    body.vtiger-calendar-page .fc-toolbar .fc-left,
    body.vtiger-calendar-page .fc-toolbar .fc-center,
    body.vtiger-calendar-page .fc-toolbar .fc-right {
        float: none !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
    body.vtiger-calendar-page .fc-toolbar .fc-center h2 {
        font-size: 15px !important;
        white-space: nowrap !important;
        margin: 0 4px !important;
    }
    body.vtiger-calendar-page .fc-toolbar button {
        height: 34px !important;
        font-size: 12px !important;
        border-radius: 17px !important;
        padding: 0 12px !important;
        border: 1.5px solid #c8d0d8 !important;
        background: #fff !important;
        color: #2c3b49 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        outline: none !important;
    }
    body.vtiger-calendar-page .fc-toolbar button.fc-state-active {
        background: #2c3b49 !important;
        color: #fff !important;
        border-color: #2c3b49 !important;
    }
    body.vtiger-calendar-page .fc-toolbar .fc-button-group {
        display: flex !important;
        gap: 4px !important;
    }

    /* Celle griglia */
    body.vtiger-calendar-page .fc-day-header { font-size: 12px !important; padding: 5px 2px !important; }
    body.vtiger-calendar-page .fc-day-number { font-size: 13px !important; padding: 4px 6px !important; }
    body.vtiger-calendar-page .fc-event     { font-size: 12px !important; padding: 2px 5px !important; border-radius: 4px !important; line-height: 1.4 !important; }
    body.vtiger-calendar-page .fc-axis      { font-size: 11px !important; padding: 0 4px !important; white-space: nowrap !important; }
    body.vtiger-calendar-page .fc-time-grid .fc-event { font-size: 13px !important; min-height: 26px !important; }
    /* Vista Giorno: header colonna più compatto */
    body.vtiger-calendar-page .fc-agendaDay-view .fc-day-header { font-size: 13px !important; }
    /* "Ogni giorno" (all-day row): testo più piccolo */
    body.vtiger-calendar-page .fc-axis.fc-time { font-size: 10px !important; }
    /* +N more nella vista mese: etichetta in italiano */
    body.vtiger-calendar-page .fc-more { font-size: 11px !important; }

    /* Vista Agenda (vtAgendaList): header giorno ridotto */
    body.vtiger-calendar-page .agendaListViewHeader {
        font-size: 110% !important;
    }
    body.vtiger-calendar-page .agendaListDay hr {
        margin-top: 4px !important;
        margin-bottom: 6px !important;
    }

    /* ---------------------------------------------------------------
       AGENDA – layout a righe su mobile
       Riga 1: orario
       Riga 2: icona tipo + titolo + stato
       Riga 3: tasti azione grandi
    --------------------------------------------------------------- */
    body.vtiger-calendar-page .agenda-event-wrapper {
        background: #fff !important;
        border: 1px solid #e8edf3 !important;
        border-left: 3px solid var(--vtcard-accent, #3d9ec9) !important;
        border-radius: 6px !important;
        margin: 6px 0 !important;
        padding: 8px 10px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
        font-size: 14px !important;
    }

    /* agenda-event-info: flex row con wrap — 3 righe logiche tramite width */
    body.vtiger-calendar-page .agenda-event-info {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0 !important;
        width: 100% !important;
    }

    /* Riga 1 – orario: occupa tutta la larghezza → va su riga propria */
    body.vtiger-calendar-page .agenda-event-time {
        flex: 0 0 100% !important;
        width: 100% !important;
        display: block !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #666 !important;
        white-space: nowrap !important;
        padding: 0 0 4px 0 !important;
        order: 1 !important;
    }

    /* Nascondi il pulsante + dettagli (non serve su mobile) */
    body.vtiger-calendar-page .agenda-more-details {
        display: none !important;
    }

    /* Riga 2 – titolo: prende spazio restante, condivide riga con stato */
    body.vtiger-calendar-page .agenda-event-title {
        flex: 1 1 auto !important;
        display: block !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #222 !important;
        padding: 2px 0 !important;
        order: 2 !important;
        overflow: visible !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
    body.vtiger-calendar-page .agenda-event-title span,
    body.vtiger-calendar-page .agenda-event-title i {
        display: inline !important;
        vertical-align: middle !important;
    }

    /* Stato: accanto al titolo, pill tondeggiante */
    body.vtiger-calendar-page .agenda-event-status {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        font-size: 11px !important;
        color: #666 !important;
        background: #eef0f4 !important;
        border-radius: 10px !important;
        padding: 2px 9px !important;
        order: 3 !important;
        white-space: nowrap !important;
        margin-left: 6px !important;
    }

    /* Riga 3 – azioni: occupa tutta la larghezza → va su riga propria */
    body.vtiger-calendar-page .agenda-event-actions {
        flex: 0 0 100% !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        align-items: center !important;
        order: 4 !important;
        padding-top: 8px !important;
        margin: 0 !important;
    }
    body.vtiger-calendar-page .agenda-event-actions span {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: #f0f2f5 !important;
        color: #444 !important;
        font-size: 18px !important;
        float: none !important;
        margin: 0 !important;
        cursor: pointer !important;
    }
    body.vtiger-calendar-page .agenda-event-actions span:active {
        background: #dde1e8 !important;
    }
    body.vtiger-calendar-page .agenda-event-actions span:has(.fa-trash) { color: #e74c3c !important; }
    body.vtiger-calendar-page .agenda-event-actions span:has(.fa-check) { color: #27ae60 !important; }
    body.vtiger-calendar-page .agenda-event-actions span:has(.fa-flag)  { color: #e67e22 !important; }

    /* ================================================================
       FAB calendario: + (azioni) e ingranaggio (impostazioni)
    ================================================================ */

    /* Nasconde bottoni Aggiungi nell'header originale (ora nel FAB) */
    #calendarview_basicaction_addevent,
    #calendarview_basicaction_addtask {
        display: none !important;
    }

    /* Contenitore FAB: colonna dal basso, angolo in basso a sinistra */
    #vt-cal-fab {
        position: fixed !important;
        bottom: 24px !important;
        left: 24px !important;
        z-index: 9990 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    /* Bottone + (in alto nel FAB) */
    #vt-cal-fab .vt-cal-fab-plus {
        width: 52px !important;
        height: 52px !important;
        border-radius: 50% !important;
        background: #2c3b49 !important;
        color: #fff !important;
        border: none !important;
        font-size: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
        cursor: pointer !important;
        transition: transform 0.2s !important;
        order: 2 !important;
    }
    #vt-cal-fab.vt-fab-open .vt-cal-fab-plus {
        transform: rotate(45deg) !important;
    }


    /* Opzioni + : appaiono sopra il bottone + */
    #vt-cal-fab .vt-cal-fab-actions {
        display: none !important;
        flex-direction: column !important;
        gap: 8px !important;
        order: 1 !important;
    }
    #vt-cal-fab.vt-fab-open .vt-cal-fab-actions {
        display: flex !important;
    }

    /* Pill opzioni (Aggiungi Evento / Attività) */
    #vt-cal-fab .vt-cal-fab-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        height: 42px !important;
        padding: 0 16px !important;
        border-radius: 21px !important;
        border: none !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
        white-space: nowrap !important;
    }
    #vt-cal-fab .vt-cal-fab-btn-event {
        background: #2c3b49 !important;
        color: #fff !important;
    }
    #vt-cal-fab .vt-cal-fab-btn-task {
        background: #fff !important;
        color: #2c3b49 !important;
        border: 1.5px solid #2c3b49 !important;
    }

}

/* ================================================================== */
/* MOBILE DASHBOARD                                                     */
/* ================================================================== */
@media (max-width: 1279px) {

    /* Nasconde dashboard originale su mobile */
    .dashBoardContainer .tabContainer,
    .dashBoardContainer .quickAccessClass,
    .dashBoardContainer .dashboardHeading {
        display: none !important;
    }

    /* Contenitore cruscotto */
    #vt-mobile-dashboard {
        padding: 12px 10px 80px;
        background: #f4f6f8;
        min-height: 100vh;
    }

    /* Sezione */
    .vt-dash-section {
        background: #fff;
        border-radius: 12px;
        margin-bottom: 14px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.08);
        overflow: hidden;
    }

    /* Titolo sezione */
    .vt-dash-title {
        font-size: 13px;
        font-weight: 700;
        color: #555;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 12px 14px 8px;
        display: flex;
        align-items: center;
        gap: 6px;
        border-bottom: 1px solid #f0f0f0;
    }
    .vt-dash-title .fa {
        color: #EF5E29;
        font-size: 14px;
    }
    .vt-dash-more {
        margin-left: auto;
        font-size: 11px;
        font-weight: 600;
        color: #EF5E29;
        text-decoration: none;
        text-transform: none;
        letter-spacing: 0;
    }

    /* Quick access grid */
    .vt-dash-quick-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
    }
    .vt-dash-quick-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 16px 8px;
        text-decoration: none;
        color: #333;
        border-right: 1px solid #f0f0f0;
        border-bottom: 1px solid #f0f0f0;
        gap: 6px;
        transition: background 0.15s;
    }
    .vt-dash-quick-item:nth-child(3n) {
        border-right: none;
    }
    .vt-dash-quick-item.no-border-bottom {
        border-bottom: none !important;
    }
    .vt-dash-quick-item:active {
        background: #FEF3EF;
    }
    .vt-dash-quick-item .fa,
    .vt-dash-quick-item [class^="vicon-"],
    .vt-dash-quick-item [class*=" vicon-"] {
        font-size: 22px;
        color: #EF5E29;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #FEE9DF;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .vt-dash-quick-item span {
        font-size: 11px;
        font-weight: 600;
        color: #555;
        text-align: center;
        line-height: 1.2;
    }

    /* Lista items */
    .vt-dash-item {
        display: flex;
        align-items: center;
        padding: 10px 14px;
        border-bottom: 1px solid #f5f5f5;
        text-decoration: none;
        color: #333;
        gap: 10px;
    }
    .vt-dash-item:last-child {
        border-bottom: none;
    }
    .vt-dash-item:active {
        background: #FEF3EF;
    }
    .vt-dash-dot {
        font-size: 12px;
        color: #EF5E29;
        flex-shrink: 0;
    }
    .vt-dash-item-body {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
    }
    .vt-dash-item-title {
        font-size: 13px;
        font-weight: 600;
        color: #2c3b49;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .vt-dash-item-sub {
        font-size: 11px;
        color: #888;
        margin-top: 1px;
    }
    .vt-dash-item-badge {
        font-size: 10px;
        background: #FEE9DF;
        color: #EF5E29;
        border-radius: 4px;
        padding: 1px 5px;
        margin-top: 3px;
        align-self: flex-start;
    }
    .vt-dash-loading {
        padding: 14px;
        color: #aaa;
        font-size: 13px;
        text-align: center;
    }
    .vt-dash-empty {
        padding: 14px;
        color: #aaa;
        font-size: 13px;
        text-align: center;
    }

    /* Badge contatore comunicazioni non lette */
    .vt-dash-comm-badge {
        background: #e74c3c;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        border-radius: 10px;
        padding: 1px 6px;
        margin-right: 6px;
        order: -1;
    }

    /* Grafico fatturato */
    .vt-dash-chart-wrap {
        padding: 12px 8px 8px;
        position: relative;
    }
    #vt-dash-revenue-chart {
        width: 100% !important;
        display: block;
    }
}

/* ── Modale modifica accesso rapido ── */
#vt-quick-edit-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
}
#vt-quick-edit-modal.open {
    display: block;
}
.vt-qe-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
}
.vt-qe-box {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}
.vt-qe-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    font-size: 15px;
    font-weight: 700;
    color: #2c3b49;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}
.vt-qe-close {
    background: none;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
}
.vt-qe-body {
    overflow-y: auto;
    flex: 1;
    padding: 10px 16px;
}
.vt-qe-section-title {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.vt-qe-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    margin-bottom: 4px;
    background: #f7f9fc;
}
.vt-qe-item.vt-qe-active {
    background: #FEF3EF;
}
.vt-qe-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
    color: #EF5E29;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.vt-qe-label {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #333;
}
.vt-qe-remove,
.vt-qe-add {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vt-qe-remove { color: #e74c3c; }
.vt-qe-add    { color: #27ae60; }
.vt-qe-remove:hover { background: #fde; }
.vt-qe-add:hover    { background: #dfd; }
.vt-qe-footer {
    padding: 12px 16px;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0;
}
#vt-qe-save {
    width: 100%;
    background: #EF5E29;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
#vt-qe-save:active { opacity: 0.85; }

/* Icona testo (iniziali) per moduli senza icona vicon/fa */
.vt-dash-quick-item .vt-qe-initials,
.vt-qe-icon .vt-qe-initials {
    font-size: 13px;
    font-weight: 700;
    color: #EF5E29;
    line-height: 1;
}