.image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Intestazione dei componenti (panel, detail, combochart, tabella, ...): titolo a sinistra e pulsanti a destra.
   Se non stanno su una riga (schermi stretti, molti pulsanti, titolo lungo) i pulsanti vanno a capo sotto il titolo
   invece di far uscire la pagina dallo schermo */
.panel-heading.is-flex {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

/* il titolo può restringersi e una parola molto lunga va a capo invece di allargare la riga */
.panel-heading.is-flex > :first-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* se i pulsanti sono troppi per una riga vanno a capo tra loro */
.panel-heading.is-flex > .is-flex {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

/* nei riepiloghi (detail, tabella) un valore lungo senza spazi, come un link, va a capo nella cella.
   Solo nelle celle dei valori: le intestazioni di riga (th) non devono essere spezzate a metà parola */
.table td {
    overflow-wrap: anywhere;
}

/* Colonna che sul desktop passa dopo le altre della stessa riga: nel codice resta prima, così sul telefono sta sopra
   (es. le approvazioni da dare nella home di split) */
@media screen and (min-width: 1024px) {
    .colonna-a-destra {
        order: 1;
    }
}