/* Stile per nascondere le viste non attive */
.view {
    display: none;
}
.view.active {
    display: block;
}

/* Stile per gli elementi della lista cliccabili */
#shopping-lists .list-group-item,
#shopping-items .list-group-item {
    cursor: pointer;
}

/* Stile per barrare un elemento comprato */
.list-group-item.checked {
    text-decoration: line-through;
    color: #6c757d; /* Colore grigio di Bootstrap */
    background-color: #f8f9fa; /* Grigio chiaro di Bootstrap */
}

/* Stile per i bottoni di eliminazione degli item */
.item-actions .btn {
    padding: 0.1rem 0.4rem;
    font-size: 1.2rem;
    line-height: 1;
}
/* =============================================== */
/* REGOLE DI DEBUG E FORZATURA PER SORTABLEJS      */
/* =============================================== */

/* Assicura che gli elementi della lista siano "sopra" eventuali sfondi
   e che rispondano agli eventi del mouse. */
#list-items .list-group-item {
    cursor: grab !important; /* Mostra il cursore a "manina" per indicare che è trascinabile */
    z-index: 1060 !important; /* Un valore leggermente superiore a quello tipico delle modali */
    pointer-events: auto !important;
}

/* Quando un elemento viene attivamente trascinato,
   gli viene data la classe .sortable-chosen.
   Lo rendiamo semi-trasparente e con un z-index altissimo. */
#list-items .sortable-chosen {
    opacity: 0.8;
    background-color: #d1ecf1 !important; /* Aggiunto !important per sicurezza */
    z-index: 9999 !important;
}

/* L'elemento fantasma (ghost) che mostra dove l'elemento verrà rilasciato */
#list-items .sortable-ghost {
    opacity: 0.4;
    background-color: #b8daff;
}