/* Packing list e ordini di consegna: layout pensato anche per smartphone */

/* Pulsanti di testata: su smartphone si distribuiscono su tutta la riga */
.pl-pulsanti {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

    .pl-pulsanti > .rz-button {
        flex: 1 1 auto;
    }

@media (min-width: 992px) {
    .pl-pulsanti > .rz-button {
        flex: 0 0 auto;
    }
}

/* Riga articolo dell'ordine: articolo sopra e quantità sotto su smartphone, tutto in riga da tablet */
.pl-riga {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--rz-base-300);
}

@media (min-width: 576px) {
    .pl-riga {
        flex-direction: row;
        align-items: flex-end;
        padding-bottom: 0;
        border-bottom: none;
    }
}

.pl-riga-qta {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

/* Campi dei dialog che vanno a capo quando non c'è spazio */
.pl-campi {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
}

/* Rientro delle sottoscatole, ridotto su smartphone */
.pl-scatola-figli {
    margin-top: 0.5rem;
    margin-left: 0.4rem;
}

@media (min-width: 768px) {
    .pl-scatola-figli {
        margin-left: 1.25rem;
    }
}

/* Schede degli elenchi su smartphone */
.lista-mobile .rz-datalist-data > li {
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

/* Nei contenitori flex i figli non si restringono sotto la lunghezza del testo: con descrizioni lunghe
   (es. articoli) i campi uscirebbero dal contenitore. Qui si lasciano restringere e il testo va in "…" */
.pl-form .rz-stack,
.pl-form .rz-dropdown,
.pl-form .rz-numeric {
    min-width: 0;
}

.pl-form .rz-dropdown {
    width: 100%;
    max-width: 100%;
}

.pl-form .rz-dropdown-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Testo completo sotto un campo che può essere troncato */
.pl-testo-completo {
    font-size: 0.85em;
    color: var(--rz-text-secondary-color);
    overflow-wrap: anywhere;
}

/* Pulsanti di scelta con testo lungo (es. elenco scatole) */
.pl-scelta {
    width: 100%;
    justify-content: flex-start;
    white-space: normal;
    text-align: start;
}

.pl-form {
    min-width: 0;
}