/*
 * Override applicativi per le pagine Bootstrap 5.
 * Regola: solo classi dedicate, nessun selettore globale su elementi (a, body, input, ...).
 */

/* box messaggi/errori AJAX centrati sopra la pagina (#messageDiv, #errorsDiv) */
.msg-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1060;
}

/* bottoni-icona compatti nelle colonne azioni delle tabelle */
.btn-icon {
    --bs-btn-padding-x: .4rem;
    --bs-btn-padding-y: .15rem;
    line-height: 1;
}

.cursor-pointer {
    cursor: pointer;
}

/* icone ordinamento colonne generate lato Java (cresce/decresce/crono.png) */
.imgOrdinamento {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    margin-left: .25rem;
}
/* versione icona Bootstrap (bi-caret-up-fill / bi-caret-down-fill / bi-clock-history) */
i.imgOrdinamento {
    width: auto;
    height: auto;
    font-size: .75em;
    vertical-align: baseline;
    color: var(--bs-secondary-color);
}

/* pallino tipo contatto (ex pallaBlu/Verde/Rossa.png): il colore segue l'immagine legacy in data-img */
.palla-contatto {
    font-size: .55rem;
    vertical-align: .15em;
    margin-right: .25rem;
    color: var(--bs-primary);
}
.palla-contatto[data-img$="pallaVerde.png"] { color: var(--bs-success); }
.palla-contatto[data-img$="pallaRossa.png"] { color: var(--bs-danger); }

/* anteprima esempio dei template (ex icoPDF/htmlPreview[Disable].png): icona e stato dall'immagine legacy in data-img */
.btn-esempio .icona-html { display: none; }
.btn-esempio[data-img^="htmlPreview"] { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); }
.btn-esempio[data-img^="htmlPreview"] .icona-pdf { display: none; }
.btn-esempio[data-img^="htmlPreview"] .icona-html { display: inline-block; }
.btn-esempio[data-img*="isable"] { --bs-btn-color: var(--bs-tertiary-color); --bs-btn-border-color: var(--bs-border-color); pointer-events: none; }

/* stato movimento di magazzino negli ordini fornitore (ex checkVerde/checkVerdeBlu/checkGiallo.png) */
.stato-movmag { color: var(--bs-success); }
.stato-movmag[data-img="checkVerdeBlu.png"] { color: var(--bs-info); }
.stato-movmag[data-img="checkGiallo.png"] { color: var(--bs-warning); }

/* condivisione template catalogo (ex share.png / shareR.png = sola lettura) */
.stato-share { color: var(--bs-success); }
.stato-share[data-img$="shareR.png"] { color: var(--bs-secondary-color); }

/* compila attivita' (ex compila.png / compilaUser.png = compila per i figli) */
.icona-compila .ic-compila-user { display: none; }
.icona-compila[data-img$="compilaUser.png"] .ic-compila { display: none; }
.icona-compila[data-img$="compilaUser.png"] .ic-compila-user { display: inline-block; }

/* filtro tipo attivita' (ex iPadPen.png = esterne, compila.png = interne, attivita.png = tutte) */
.icona-filtro-tipo i { display: none; }
.icona-filtro-tipo[data-img$="iPadPen.png"] .f-esterne,
.icona-filtro-tipo[data-img$="compila.png"] .f-interne,
.icona-filtro-tipo[data-img$="attivita.png"] .f-tutte { display: inline-block; }

/* testo su una riga troncato con ellissi (tooltip via initTooltipTroncati) */
.tip-troncato {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* autocompletamento: lettere già digitate evidenziate (span generato da autocomplete/*.jsp) */
.dropdown-item .textInsert {
    font-weight: 700;
    text-decoration: underline;
}

/* albero <ul>/<li> collassabile (initAlberoCollassabile) */
.albero-bs,
.albero-bs ul {
    list-style: none;
    padding-left: 1.25rem;
    margin: 0;
}
.albero-bs {
    padding-left: 0;
}
.albero-bs li {
    padding: .15rem 0;
}
.albero-bs li.albero-chiuso > ul {
    display: none;
}
/* alternative di un componente (markup generato da GestioneArticoli.appendComposizioneArticolo) */
.albero-bs .alternativa {
    font-style: italic;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    border-radius: var(--bs-border-radius-sm);
    margin: .25rem 0 .25rem 1.25rem;
    padding: .15rem .5rem;
}

/* galleria immagini (utility/getGallery.jsp?layout=bs) */
.galleria-bs .miniature img {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: var(--bs-border-radius-sm);
    flex-shrink: 0;
}
/* barra miniature: scorre in orizzontale (barra di scorrimento nascosta, si usano le frecce o la rotella);
   miniature centrate con margini automatici, cosi' quando sono tante restano raggiungibili anche le prime */
.galleria-bs .barra-miniature {
    width: 100%;
}
.galleria-bs .miniature {
    position: relative;             /* offsetLeft delle miniature relativo alla barra (initGalleriaBS) */
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    align-items: center;
}
.galleria-bs .miniature::-webkit-scrollbar {
    display: none;
}
.galleria-bs .miniature > img:first-child { margin-left: auto; }
.galleria-bs .miniature > img:last-child  { margin-right: auto; }
.galleria-bs .miniature-prec,
.galleria-bs .miniature-succ {
    flex-shrink: 0;
    padding: .1rem .3rem;
    line-height: 1;
}

/* popover con contenuto ajax (initPopoverAjax) */
.popover-ajax {
    --bs-popover-max-width: min(680px, 95vw);
}
.popover-ajax .popover-body {
    max-height: 60vh;
    overflow: auto;
}
/* cronologia articolo (markup legacy di getCronologiaArticolo.jsp dentro il popover) */
.cronologia-pop {
    font-size: .75rem;
}
.cronologia-pop table {
    width: 100%;
    border-collapse: collapse;
}
.cronologia-pop td {
    padding: .1rem .3rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}
.cronologia-pop .labelCA {
    font-weight: 600;
    color: var(--bs-secondary-color);
}
.cronologia-pop .noBrTipCA {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* righe documento generate lato Java (getInfoArticoliListino/DDT/Fattura/OrdForn.jsp):
   markup legacy con stili inline, adattato senza toccare lo scriptlet */
.righe-legacy {
    overflow-x: auto;
}
.righe-legacy > table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8125rem;
}
.righe-legacy > table td {
    padding: .3rem .4rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    vertical-align: middle;
    font-family: inherit !important;            /* sovrascrive 'font-family: Arial' inline */
    font-size: inherit !important;
}
.righe-legacy > table tr:first-child td {
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    white-space: nowrap;
}
.righe-legacy > table tr:hover td {
    background: var(--bs-secondary-bg-subtle);
}
.righe-legacy img.imgExec {
    width: 18px;
    height: 18px;
    cursor: pointer;
    opacity: .75;
}
.righe-legacy img.imgExec:hover {
    opacity: 1;
}
/* campi modificabili nelle righe generate in Java (select magazzino, quantità, prezzo) */
.righe-legacy select,
.righe-legacy input[type="text"] {
    padding: .2rem .4rem;
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
}
.righe-legacy input[type="text"] {
    text-align: right;
}
.righe-legacy select:focus,
.righe-legacy input[type="text"]:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .2);
}
.righe-legacy input[readonly] {
    background-color: var(--bs-secondary-bg);
}

/* tabelle di sola lettura generate lato Java (es. getInfoSede.jsp, getHtmlBanca) */
.info-legacy table {
    width: 100%;
}
.info-legacy td {
    padding: .2rem .4rem;
    vertical-align: top;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}
.info-legacy td.labelTips {
    color: var(--bs-secondary-color);
    white-space: nowrap;
    width: 1%;
}

/* =========================
   CARRELLO (ex carrello.css, non incluso nelle pagine BS perché ridefinisce img e a)
   ========================= */
.ordinePedice {                 /* numero d'ordine del criterio di ordinamento (generato in Java) */
    display: inline-block;
    min-width: 1.1em;
    padding: 0 .3em;
    border-radius: 1em;
    background: var(--bs-danger);
    color: #fff;
    font-size: .65rem;
    line-height: 1.4;
    text-align: center;
    vertical-align: super;
}
.inputQta {                     /* quantità: larghezza adattata da resizeInput */
    width: 40px;
    text-align: right;
}
.carrello-sidebar {             /* colonna servizi del carrello: resta visibile scorrendo */
    position: sticky;
    top: .75rem;
}

/* =========================
   PAGINE MENU (include/elementoMenu.jsp)
   ========================= */
.menu-griglia {
    max-width: 1100px;
}
.menu-card {
    cursor: pointer;
    transition: transform .12s ease-in-out, box-shadow .12s ease-in-out;
}
.menu-card:hover,
.menu-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;  /* = --bs-box-shadow (valore letterale: NetBeans non accetta var() in box-shadow) */
    border-color: var(--bs-primary-border-subtle);
}
.menu-card-img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    flex: 0 0 auto;
}

/* =========================
   PALETTE COLORI (initPaletteColoriBS, ex spectrum colorpicker)
   ========================= */
.palette-campione {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: middle;
    border: 1px solid var(--bs-border-color);
    border-radius: .2rem;
}
.palette-campione.palette-vuota {       /* nessun colore: barra rossa diagonale come spectrum */
    background: linear-gradient(to top left, transparent calc(50% - 1px), #dc3545 50%, transparent calc(50% + 1px)), #fff !important;
}
.palette-griglia {
    display: grid;
    grid-template-columns: repeat(8, 1.25rem);
    gap: 3px;
}
.palette-colore {
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: .15rem;
}
.palette-colore:hover,
.palette-colore.active {
    outline: 2px solid var(--bs-primary);
    outline-offset: 1px;
}

/* =========================
   RIGHE ALTERNE (ex righealterne/alterna legacy) su tutte le tabelle dati Bootstrap
   La classe riga-alterna-bs la mette aggiornaRigheAlterne() di myJavascript-bs.js:
   - escluse le tabelle .table-borderless (etichetta/valore) e .no-righe-alterne
   - le righe .riga-dettaglio e quelle nascoste non contano (alternanza giusta dopo filtri e ordinamento)
   - sostituisce l'alternanza di .table-striped (stesso colore Bootstrap)
   ========================= */
.table.righe-alterne-bs > tbody > tr > * {
    --bs-table-color-type: initial;
    --bs-table-bg-type: initial;
}
.table.righe-alterne-bs > tbody > tr.riga-alterna-bs > * {
    --bs-table-color-type: var(--bs-table-striped-color);
    --bs-table-bg-type: var(--bs-table-striped-bg);
}

/* =========================
   RIGHE AGGANCIATE (.riga-dettaglio: articoli o invio mail sotto la riga del documento)
   Quando sono visibili niente righe alterne: la riga del documento e' evidenziata,
   le righe agganciate sotto restano bianche (anche la tabella interna, senza alternanza)
   cosi' si attribuiscono a colpo d'occhio alla riga sopra.
   ========================= */
.table > tbody:has(> tr.riga-dettaglio:not(.d-none)) > tr:not(.riga-dettaglio) > * {
    --bs-table-color-type: initial;
    --bs-table-bg-type: var(--bs-primary-bg-subtle);
    border-top: 2px solid var(--bs-primary-border-subtle);
}
.table > tbody > tr.riga-dettaglio > td {
    --bs-table-bg-type: initial;
    background: var(--bs-body-bg);
}
.table > tbody > tr.riga-dettaglio > td > .table > tbody > tr > * {
    --bs-table-color-type: initial;
    --bs-table-bg-type: initial;
}

/* =========================================================
   TAB delle pagine di modifica (ul.nav-tabs, anche .card-header-tabs)
   schede non attive su fondo grigio con testo scuro, scheda attiva bianca
   con barretta colorata in alto: piu' contrasto rispetto al default Bootstrap
   ========================================================= */
.nav-tabs {
    --bs-nav-link-color: #495057;
    --bs-nav-link-hover-color: #212529;
    --bs-nav-link-font-weight: 500;
    --bs-nav-tabs-border-color: #ced4da;
    --bs-nav-tabs-link-hover-border-color: #ced4da #ced4da #ced4da;
    --bs-nav-tabs-link-active-color: #212529;
    --bs-nav-tabs-link-active-bg: #fff;
    --bs-nav-tabs-link-active-border-color: #ced4da #ced4da #fff;
    gap: .2rem;
}
.nav-tabs .nav-link:not(.active):not(.disabled) {
    background-color: #e9ecef;
    border-color: #dee2e6 #dee2e6 #ced4da;
}
.nav-tabs .nav-link:not(.active):not(.disabled):hover,
.nav-tabs .nav-link:not(.active):not(.disabled):focus-visible {
    background-color: #dde1e5;
    border-color: #ced4da;
}
.nav-tabs .nav-link.active {
    box-shadow: inset 0 3px 0 var(--bs-primary);   /* barretta in alto, senza spostare il layout */
}

/* =========================================================
   ETICHETTE dei campi nelle finestre di inserimento (label.form-label / .col-form-label)
   nome del parametro piu' in evidenza rispetto al valore digitato nel campo
   ========================================================= */
.form-label,
.col-form-label {
    font-weight: 600;
    color: #343a40;
}

/* compattezza delle finestre di inserimento: meno spazio verticale tra etichetta, campo e riga successiva
   (solo le righe .row.g-3 che contengono campi con etichetta, le altre griglie restano invariate) */
.form-label {
    margin-bottom: .2rem;
    font-size: .875rem;
    line-height: 1.3;
}
.row.g-3:has(> * > .form-label) {
    --bs-gutter-y: .55rem;
}

/* margini interni ridotti nei riquadri con campi da compilare: corpo, intestazione (anche con le tab
   .card-header-tabs, che usano le stesse variabili) e barra dei pulsanti (card-footer) */
.card:has(.form-label, .form-control, .form-select) {
    --bs-card-spacer-y: .75rem;
    --bs-card-spacer-x: .75rem;
    --bs-card-cap-padding-y: .4rem;
    --bs-card-cap-padding-x: .75rem;
}
/* pulsanti in fondo al modulo fuori dal card-footer (riga d-flex/text-center con margine mt-3) */
.mt-3:has(> .btn):is(.d-flex, .text-center) {
    margin-top: .5rem !important;
}
.pt-3.border-top:has(> .btn) {
    padding-top: .5rem !important;
}

/* finestre messaggi/errori spostabili (trascinamento in myJavascript-bs.js) */
.msg-overlay,
#errorsDiv.position-fixed,
#messageDiv.position-fixed {
    cursor: move;
    touch-action: none;             /* sul touch il dito sposta la finestra invece di scorrere la pagina */
}
.msg-overlay :is(a, button, input, select, textarea, label) {
    cursor: auto;
}
.msg-overlay :is(a, button) {
    cursor: pointer;
}
.msg-trascinamento {
    opacity: .92;
    user-select: none;
}

/* =========================
   FINESTRE FILTRO compatte (set*Search.jsp, righe .row.filtro-compatto)
   nella finestra larga (lg/xl): campi singoli 3 per riga invece di 2, blocchi a tutta larghezza
   (descrizione, note, contatto) a due terzi (con un campo singolo accanto riempiono la riga); restano a tutta larghezza quelli con una tabella
   ========================= */
@media (min-width: 700px) {
    .filtro-compatto > [class*="col-"]:not(.col-12) {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .filtro-compatto > .col-12:not(:has(table)) {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
}
/* titolo della finestra filtro piu' piccolo */
.card:has(.filtro-compatto) > .card-header h5 {
    font-size: 1rem;
    font-weight: 600;
}
/* etichette scritte come span.form-label.d-block (gruppi di bottoni, contatto): stessa altezza delle label vicine */
.filtro-compatto span.form-label.d-block {
    display: inline-block !important;
}

/* =========================
   PAGINE DI MODIFICA DOCUMENTI, ANAGRAFICHE E UTILITY compatte (gestDDT, gestFattura, gestOrdineFornitore,
   gestListino, gestCPIn, gestMovimentoMagazzino, gestCliente, gestFornitore, gestArticolo, gestBanca,
   gestMagazzino, gestTrasportatore, gestCategoriaArticolo, gestCondizionePagamento,
   gestPopUp, gestRegPosizione, gestMediaMediata, gestTipoScadenze: righe .row.modifica-compatta;
   gestAttivita ha invece una disposizione su misura con col-xl-*)
   su schermo largo i campi a coppie (col-md-6 / col-sm-6) diventano 3 per riga; le altre larghezze sono
   riportate alla stessa griglia a terzi cosi' le combinazioni esistenti riempiono le righe:
   col-md-8 / col-sm-8 / col-12 -> 2/3, col-md-4 / col-sm-4 -> 1/3, col-md-3 / col-sm-3 (es. ABI, CAB) -> 1/6.
   Restano a tutta riga i blocchi con una tabella e quelli con un testo a carattere fisso (textarea monospace:
   problema / intervento / ricambi delle attivita', larghi quanto la stampa).
   Le regole col-sm-* stanno prima delle col-md-*: con entrambe le classi vale la col-md-*.
   ========================= */
@media (min-width: 1200px) {
    .modifica-compatta > .col-sm-6:not(:has(table)):not([class*="offset-"]),
    .modifica-compatta > .col-sm-4:not(:has(table)):not([class*="offset-"]) {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .modifica-compatta > .col-sm-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
    .modifica-compatta > .col-sm-3 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }
    .modifica-compatta > .col-md-6:not(:has(table)):not([class*="offset-"]),
    .modifica-compatta > .col-md-4:not(:has(table)):not([class*="offset-"]) {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .modifica-compatta > .col-md-8,
    .modifica-compatta > .col-12:not(:has(table)):not(:has(textarea[style*="monospace"])) {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
    .modifica-compatta > .col-md-3 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }
}