/* 20250910 v5 */

body {
font-family: 'Barlow', sans-serif;
background-color: #f4f4f4;
color: #195d67;
margin: 0;
padding: 20px;
}
h1 {
font-size: 4.0em;
font-weight: 900;
text-transform: uppercase;
text-align: center;
color: #195d77;
margin-top: 8px;
margin-bottom: 8px;
text-shadow: 
    2px 2px #195d67,
    -2px 2px #195d67,
    2px -2px #195d67,
    -2px -2px #195d67;
}
input[type="checkbox"] {
width: 25px;
height: 25px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.last-saved {
text-align: center;
color: #6c757d;
font-size: 1em;
margin-top: 8px;
margin-bottom: 8px;
}
.controls-container {
max-width: 800px;
display: flex;
flex-wrap: nowrap; /* Su desktop, i pulsanti stanno sulla stessa riga */
justify-content: center;
gap: 28px; /* Spazio tra i pulsanti */

/*margin-top: 16px;
margin-right: auto;
margin-bottom: 16px;
margin-left: auto;*/

margin: 16px auto 16px auto;
}
.action-btn {
min-width: 105px;
font-family: 'Barlow', sans-serif;
font-size: 0.8em;
font-weight: 900;
text-transform: uppercase;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
flex-grow: 0;
flex-shrink: 0;
margin: 0 auto;
padding: 5px 5px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

#showAllBtn {background-color: #9e4e07; } /*Arancio Scuro*/
#showAllBtn:hover {background-color: #6e3202; } /*Arancio Notte*/
#showToBuyBtn {background-color: #ef7e21; } /*Arancio Bruciato*/
#showToBuyBtn:hover {background-color: #b75a0a; } /*Arancio Vibrante*/
#showPurchasedBtn {background-color: #f7a55f; } /*Arancio Pastello*/
#showPurchasedBtn:hover {background-color: #c9782d; } /*Arancio Medio*/
#saveBtn {background-color: #63cdda; } /*Verde Mare Chiaro*/
#saveBtn:hover {background-color: #2d99a8; } /*Verde Mare Medio*/
#reloadBtn {background-color: #2d99a8; } /*Verde Mare Scuro*/
#reloadBtn:hover {background-color: #195d67; } /*Verde Mare Notte*/
#savePdfBtn {background-color: #e53e3e; } /*Rosso Adobe*/
#savePdfBtn:hover {background-color: #b22a2a; } /*Rosso Adobe Scuro*/

#resetBtn {background-color: #bbb; } /*grigio 1*/
#resetBtn:hover {background-color: #999; } /*grigio 2*/

.list-container {
max-width: 800px;
margin: 0 auto 50px auto;
background-color: white;
padding: 10px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.category-title {
background-color: #195d67;
padding: 10px;
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 5px;
}
.category-title-span {
font-size: 1.0em;
font-weight: 900;
text-transform: uppercase;
color: #fff;
}
.category-labels {
display: flex;
gap: 42px;
text-align: left;
margin-left: 0px;
}
.category-labels-span {
font-size: 1.0em;
font-weight: 900;
color: #ddd;
}

.product-item.highlighted {
background-color: #f0f0f0; /* Colore per le righe evidenziate, leggermente più scuro */
}

/* Questa regola assicura che il colore di evidenziazione prevalga
   anche quando si passa il mouse su una riga evidenziata. */
.product-item.highlighted:hover {
background-color: #f0f0f0;
}

.product-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid #ddd;
font-size: 1em;
transition: background-color 0.3s ease;
}
.product-item:hover {
background-color: #f8f9fa;
}
.product-name {
flex-grow: 1;
}
.product-controls {
display: flex;
align-items: center;
gap: 15px;
}
.col-to-buy, .col-purchased {
text-align: center;
}
/* Stili per le checkbox "to buy" (rosso chiaro) */
.col-to-buy input[type="checkbox"]:checked {
accent-color: #c9782d; /*Arancio Medio*/
}
/* Stili per le checkbox "purchased" (verde chiaro) */
.col-purchased input[type="checkbox"]:checked {
accent-color: #2d99a8; /*Verde Mare Scuro*/

}
.col-quantity {
text-align: center;
}
.quantity-controls {
display: flex;
align-items: center;
}
.quantity-controls input {
width: 60px;
text-align: center;
color: #195d67;
font-size: 1em;
font-weight: 700;
border: 1px solid #ccc;
border-radius: 4px;
padding: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.quantity-controls button {
background-color: #195d67;
color: white;
border: none;
border-radius: 15px;
cursor: pointer;
width: 30px;
height: 30px;
margin: 0 5px;
font-size: 1.6em;
font-weight: 800;
line-height: 1;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.hidden {
display: none !important;
}
.category-title.hidden {
display: none !important;
}
#scrollToTopBtn {
display: none;
position: fixed;
width: 50px;
bottom: 20px;
right: 20px;
z-index: 99;
border: none;
outline: none;
background-color: #195d67;
color: white;
cursor: pointer;
padding: 10px 15px;
border-radius: 50%;
font-size: 24px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
transition: opacity 0.3s;
align-content: center;
}
#scrollToTopBtn:hover {
background-color: #2d99a8;
}

/* Media query per dispositivi mobili */
@media (max-width: 768px) {
h1 {
font-size: 2.5em;
text-shadow: 
    1px 1px #195d67,
    -1px 1px #195d67,
    1px -1px #195d67,
    -1px -1px #195d67;
}
.last-saved {
font-size: 1em;
margin-bottom: 15px;
}
.controls-container {
flex-wrap: wrap; 
gap: 16px; /* Spazio tra i pulsanti */
margin-top: 4px;
margin-bottom: 4px;
}
.controls-container {
display: flex;
justify-content: center;
gap: 5px 15px; /* Spazio tra i pulsanti */
margin-top: 8px;
margin-bottom: 8px;
}
.action-btn {
flex: 1 1 30%; /* Ogni pulsante occupa circa il 30% della larghezza */
margin-bottom: 5px; /* Spazio sotto i pulsanti per le righe */
}
.category-title {
/*font-size: 1em;*/
padding: 6px;
margin-top: 10px;
}
.category-title span, .product-name {
margin-bottom: 5px;
}
.product-item {
padding: 6px;
font-size: 1em;
}
.product-item, .category-title {
flex-direction: column;
align-items: flex-start;
}
.product-name, .category-title span {
/*width: 100%;*/
margin-bottom: 5px;
}
.product-controls, .category-labels {
width: 100%;
justify-content: space-between;
gap: 5px;
}
.category-labels {
margin-top: 3px;
font-size: 1em;
}
.category-labels span {
text-align: left;
}
}