/* 20250916 v18 */

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: #f05a4e;
margin-top: 8px;
margin-bottom: 8px;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}
.img_shadow {
    width: 40px;
    height: 40px;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.4));
    margin: 2px 2px 2px 8px;
}
.last-saved {
text-align: center;
color: #6c757d;
font-size: 1em;
margin-top: 8px;
margin-bottom: 8px;
}
.controls-container {
max-width: 820px;
display: flex;
flex-wrap: nowrap; /* Su desktop, i pulsanti stanno sulla stessa riga */
justify-content: center;
gap: 18px; /* Spazio tra i pulsanti */
margin: 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);
}
.active-filter-btn-green {
  background-color: #2d99a8 !important;
}
.active-filter-btn-orange {
    background-color: #f05a4e !important;
}
#showPurchasedBtn {background-color: #f7a55f; } /*Arancio Pastello*/
#showPurchasedBtn:hover {background-color: #c9782d; } /*Arancio Medio*/
#showAllBtn, #showInStorageBtn, #showNotInStorageBtn {background-color: #195d67; } /*Verde Mare Notte*/
#showAllBtn:hover, #showInStorageBtn:hover, #showNotInStorageBtn:hover {background-color: #2d99a8; } /*Verde Mare Scuro*/
#reloadBtn {background-color: #2d99a8; } /*Verde Mare Scuro*/
#reloadBtn:hover {background-color: #63cdda; } /*Verde Mare Chiaro*/
#saveBtn {background-color: #4CAF50; }
#saveBtn:hover {background-color: #45A049; }
#showToBuyBtn {background-color: #e53e3e; } /*Rosso Adobe*/
#showToBuyBtn:hover {background-color: #f05a4e; } /*Rosso Altreconomia*/
#savePdfBtn {background-color: #c9782d; } /*Arancio Medio*/
#savePdfBtn:hover {background-color: #f7a55f; } /*Arancio Pastello*/
#resetToBuyBtn, #resetInStorageBtn {
  background-color: #bbb;
}
#resetToBuyBtn:hover, #resetInStorageBtn:hover {
  background-color: #999;
}
.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: #f05a4e;
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: 90px;
text-align: left;
margin-left: 0px;
margin-right: 55px;
}
.category-labels-span {
font-size: 0.8em;
font-weight: 900;
color: #ddd;
}
/* Modifiche per le nuove etichette */
.category-labels .in-storage-label, .category-labels .to-buy-label {
  width: 65px;
  text-align: center;
}

/* Nuove classi di evidenziazione */
.product-item.highlighted-in-storage {
    background-color: #ebf6f6; /* Verde acqua molto chiaro */
}

.product-item.highlighted-to-buy {
    /*background-color: #fff0e6;  Arancione molto chiaro*/
    background-color: rgba(240, 90, 78, 0.1);
}

/* Regole per mantenere il colore al mouse over */
.product-item.highlighted-in-storage:hover {
    background-color: #ebf6f6;
}

.product-item.highlighted-to-buy:hover {
    background-color: #fff0e6;
}

.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;
}

/* Modifiche per i nuovi controlli in storage e to buy */
.col-in-storage, .col-to-buy {
  text-align: center;
}
.col-quantity {
text-align: center;
}
.quantity-controls {
display: flex;
align-items: center;
}
/* Controlli "in storage" */
.in-storage-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);
}
.in-storage-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);
}

/* Controlli "to buy" */
.to-buy-controls input {
  width: 60px;
  text-align: center;
  color: #b75a0a;
  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);
}
.to-buy-controls button {
  background-color: #f05a4e;
  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: #f05a4e;
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: #e53e3e;
}

/* Media query per dispositivi mobili */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5em;
        text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    }
    .img_shadow {
        width: 24px;
        height: 24px;
    }
    .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: 0px 10px; /* Spazio tra i pulsanti */
    }
    .action-btn {
        flex: 1 1 30%; /* Ogni pulsante occupa circa il 30% della larghezza */
        margin-bottom: 5px; /* Spazio sotto i pulsanti per le righe */
        font-size: 0.7em;
    }
    .category-title {
        padding: 6px;
        margin-top: 10px;
        flex-direction: column;
        align-items: flex-start;
    }
    .category-title span, .product-name {
        margin-bottom: 5px;
    }
    .product-item {
        padding: 6px;
        font-size: 1em;
        flex-direction: column;
        align-items: flex-start;
    }
    .product-name, .category-title span {
        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;
    }
}

/* Regole specifiche per il contenitore dei pulsanti di reset su desktop */
@media (min-width: 769px) {
  .controls-container:last-of-type {
    justify-content: space-between;
    gap: 0;
  }
  .action-btn {min-width: 32%;}
  #showToBuyBtn {min-width: 100% }
  #resetInStorageBtn, #resetToBuyBtn {
    flex: 0 1 160px; /* Imposta una larghezza massima fissa per entrambi */
    min-width: 49%;
    margin: 0; /* Rimuove il margine automatico */
  }
}