/* ========================================== */
/* STILI GENERALI E ADATTAMENTO SCHERMO       */
/* ========================================== */
html {
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
}

body {
    background-color: #f3f4f6;
    font-family: inherit;
    margin: 0;
    padding: 12px; /* Ridotto il padding esterno per guadagnare spazio */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    box-sizing: border-box;
    width: 100%;
}


button, input, select, textarea {
    font-family: inherit;
}

/* Il contenitore ora occupa tutta la larghezza disponibile fino a un massimo di 448px */
.container {
    width: 100%;
    max-width: 448px;
    margin-top: 12px;
    box-sizing: border-box;
}

.header-blue {
    background-color: #1d4ed8;
    color: white;
    text-align: center;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 12px;
    width: 100%;
    box-sizing: border-box;
}

.card-white {
    background-color: white;
    padding: 16px; /* Ridotto il padding interno */
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
}

/* ========================================== */
/* SEZIONE POLIVALENTE INPUT E PULSANTI       */
/* ========================================== */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

.label-title {
    color: #374151;
    font-weight: 500;
    font-size: 15px;
}

/* La riga ora si adatta intelligentemente (flex-wrap) se lo schermo è troppo stretto */
.flex-row {
    display: flex;
    gap: 6px;
    width: 100%;
    align-items: center;
    box-sizing: border-box;
}

/* L'input occupa lo spazio massimo possibile ma si stringe se necessario */
.input-field {
    flex: 1;
    min-width: 0; /* Previene l'espansione forzata dell'input nei container flex */
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
    box-sizing: border-box;
}

/* Pulsanti ad assetto mobile e touch */
.btn-action {
    background-color: #2563eb;
    color: white;
    border: none;
    padding: 12px 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    white-space: nowrap; /* Impedisce al testo del pulsante di andare a capo */
    transition: all 0.1s ease;
}

    .btn-action:active {
        background-color: #1d4ed8;
        transform: scale(0.96);
    }

.btn-scan {
    background-color: #1f2937;
}

    .btn-scan:active {
        background-color: #111827;
    }

.btn-save {
    background-color: #16a34a;
}

    .btn-save:active {
        background-color: #15803d;
    }


/* ========================================== */
/* PULSANTI AZIONE STANDARD M32               */
/* Riferimento: Immissione Documenti           */
/* ========================================== */
.btn-icon {
    min-width: 58px;
    font-size: 20px;
    line-height: 1;
}
.btn-insert {
    background-color: #2563eb;
    color: #ffffff;
}
.btn-insert:active { background-color: #1d4ed8; }
.btn-edit {
    background-color: #f59e0b;
    color: #111827;
}
.btn-edit:active { background-color: #d97706; }
.btn-delete {
    background-color: #dc2626;
    color: #ffffff;
}
.btn-delete:active { background-color: #b91c1c; }
.btn-finish {
    background-color: #16a34a;
    color: #ffffff;
}
.btn-finish:active { background-color: #15803d; }
.btn-print {
    background-color: #7c3aed;
    color: #ffffff;
}
.btn-print:active { background-color: #6d28d9; }

.btn-page {
    min-width: 58px;
    padding: 12px 14px;
    background-color: #2563eb;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
}
.btn-page:active { background-color: #1d4ed8; }

/* ========================================== */
/* RISULTATI E STRUTTURE DATI                 */
/* ========================================== */
.box-data {
    padding: 12px;
    border-radius: 8px;
    box-sizing: border-box;
    width: 100%;
}

.box-blue {
    background-color: #eff6ff;
    border-left: 4px solid #2563eb;
}

.box-green {
    background-color: #f0fdf4;
    border-left: 4px solid #16a34a;
}

.box-gray {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sub-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #2563eb;
    margin: 0;
}

    .sub-title.green {
        color: #16a34a;
    }

    .sub-title.gray {
        color: #4b5563;
    }

.txt-desc {
    font-size: 16px;
    font-weight: bold;
    color: #1f2937;
    margin: 4px 0 0 0;
    word-break: break-word;
}

.val-big {
    font-size: 24px;
    font-weight: 900;
    color: #111827;
    margin: 4px 0 0 0;
}

.btn-back-menu {
    display: block;
    width: 100%;
    background-color: #6b7280;
    color: white;
    padding: 12px;
    border-radius: 8px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    box-sizing: border-box;
    margin-top: 8px;
}

    .btn-back-menu:active {
        background-color: #4b5563;
        transform: scale(0.96);
    }

/* GRIGLIE E PULSANTI DEL MENU PRINCIPALE */
.grid-vertical {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.btn-menu {
    background-color: white;
    border: 2px solid #2563eb;
    color: #1d4ed8;
    padding: 16px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    box-sizing: border-box;
}

    .btn-menu:active {
        transform: scale(0.96);
        background-color: #eff6ff;
    }

.hidden {
    display: none !important;
}

#sezioneScanner {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    overflow: hidden;
    background: black;
    width: 100%;
}

#lblStato {
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    margin: 8px 0;
}

.text-red-500 {
    color: #dc2626;
}

.text-blue-500 {
    color: #2563eb;
}

/* Estensioni mirate per la gestione intervento. */
[hidden]{display:none!important}button:disabled{opacity:.5;cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #d97706;outline-offset:2px}
.intervento-fields{border:0;padding:0;margin:0;min-width:0}
.intervento-block{margin-bottom:12px;gap:10px}
.intervento-identita{font-size:15px;font-weight:600;line-height:1.4;text-align:left;overflow-wrap:anywhere}
.intervento-identita p{margin:0}.intervento-identita p+p{margin-top:4px}
.intervento-textarea{width:100%;min-height:90px;padding:12px;border:1px solid #d1d5db;border-radius:8px;resize:vertical;font:inherit;box-sizing:border-box}
.intervento-comandi{display:flex;flex-wrap:wrap;gap:8px}.intervento-comandi>*{flex:1 1 100px;white-space:normal;min-height:44px;margin:0}
.intervento-table{width:100%;border-collapse:collapse;table-layout:fixed}.intervento-table th,.intervento-table td{padding:10px 3px;border-bottom:1px solid #e5e7eb;text-align:left;font-size:14px;overflow-wrap:anywhere}
.intervento-table .qta{text-align:right;width:65px}.intervento-table .azioni{width:94px;text-align:right;white-space:nowrap}
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:8px;background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe;border-radius:8px;cursor:pointer}
.icon-button.delete{color:#dc2626;background:#fef2f2;border-color:#fecaca}.icon-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.intervento-messaggio{font-size:14px;margin:0 0 12px;white-space:pre-wrap;overflow-wrap:anywhere}.intervento-messaggio:empty{display:none}.intervento-messaggio.error{color:#dc2626}
.intervento-motivo-riepilogo{white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.seleziona-cliente{font:inherit;background:transparent;border:0;color:inherit;text-align:left;padding:8px 0;margin:0;width:100%;white-space:normal;cursor:pointer}.tabella-scroll{table-layout:fixed}.tabella-scroll td{overflow-wrap:anywhere}