/* Stile base per il corpo della pagina */
body {
    font-family: Arial, sans-serif;
    margin: 5px;
    background-color: #f5f5f5;
}

/* Stili per l'header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #242d40;  /* Colore di sfondo */
    color: white;               /* Colore del testo bianco per contrasto */
    padding: 2px;  /* Ridotto ulteriormente a 2px */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 1000;
}

.header img {
    vertical-align: middle;
    height: 40px;
    width: auto;
}

.header h1 {
    display: inline;
    margin-left: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    transition: color 0.3s;
}

.header h1:hover {
    color: #e0e0e0;
}

.header a {
    color: #ffffff;
    text-decoration: none;
}

.header a:hover {
    color: #e0e0e0;
}

/* Stili per i pulsanti */
button, .button {
    padding: 10px 15px;
    cursor: pointer;
    border: 1px solid #374561;
    border-radius: 5px;
    background-color: #2f3b54;
    color: #ffffff;
    margin: 5px;
    transition: background-color 0.3s, opacity 0.3s;
    opacity: 0.7;
}

button:hover, .button:hover {
    background-color: #374561;
    opacity: 1;
}

button:active, .button:active {
    background-color: #4a5c82;
}

/* Stili per il pulsante toggle e container di ricerca */
.tab-style-button {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2f3b54;
    border: 1px solid #374561;
    color: #ffffff;
    padding: 0 15px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.tab-style-button:hover {
    background-color: #374561;
}

/* Stile per il contenitore della ricerca */
.search-container {
    display: flex;
    align-items: center;
    position: relative;
    margin-left: auto;
    gap: 8px;
    height: 40px;  /* Aggiungiamo un'altezza fissa al contenitore */
}

.search-input {
    width: 100%;
    max-width: 300px;
    padding: 4px 8px;
    height: 32px !important;
    font-size: 1.3em !important;  /* Ridotto da 1.4em */
    line-height: 32px !important;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Stili per i messaggi flash */
.flash-message {
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
}

.success {
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
    color: #3c763d;
}

.error {
    background-color: #f2dede;
    border: 1px solid #ebccd1;
    color: #a94442;
}

/* Stili per i form */
form {
    background-color: white;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

input[type="text"], input[type="number"] {
    width: 100%;
    padding: 8px;
    margin: 5px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Stili per la tabella */
.table-container {
    position: relative;
    margin-top: 10px;
    overflow-x: auto;
    overflow-y: auto;
    height: calc(100vh - 200px);
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.table-fixed {
    table-layout: fixed;  /* Forza il layout fisso */
    width: 1200px;  /* Larghezza fissa minima */
    min-width: 1200px;  /* Forza la larghezza minima */
    border-collapse: separate;
    border-spacing: 0;
}

.table-fixed thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.table-fixed thead th {
    background-color: white;
    border-bottom: 2px solid #242d40;
    box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.12);
    white-space: nowrap; /* Impedisce il wrapping del testo */
    min-width: 80px; /* Ridotto da 100px per mobile */
}

.table-fixed th, 
.table-fixed td {
    width: 150px;  /* Larghezza fissa per ogni colonna */
    min-width: 150px;  /* Forza la larghezza minima */
    max-width: 150px;  /* Forza la larghezza massima */
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-fixed .filter {
    width: auto;
    min-width: 80px; /* Ridotto da 100px */
    padding: 2px 4px;
    margin: 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9em;
}

/* Stile per le righe normali */
.table-fixed tr {
    background-color: white;
}

/* Stile per le righe selezionate */
.table-fixed tr.selected {
    background-color: #4a5c82;  /* Stesso colore del tab attivo */
    border-left: 4px solid #242d40;
    color: white;  /* Testo bianco per contrasto */
    font-weight: 500;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
}

/* Manteniamo l'hover anche sulle righe selezionate */
.table-fixed tr.selected:hover {
    background-color: #5a6b92;  /* Versione leggermente più chiara per l'hover */
}

/* Stile per l'hover sulle righe */
.table-fixed tr:hover {
    background-color: #f5f5f5;
}

/* Stile per il footer */
.footer-text {
    font-size: 12px;
    vertical-align: middle;
}

/* Stile per il contenuto dell'header della tabella */
.th-content {
    display: flex;
    flex-direction: column;
    padding: 4px;
    min-height: 45px; /* Spazio fisso per il dropdown */
}

.th-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.filter-container {
    width: 100%;
    display: none; /* Nascosto di default */
    margin-top: 4px;
}

.filter-container.show {
    display: block;
}

.filter-icon {
    color: #666;
    font-size: 0.9em;
    cursor: pointer;
    padding: 2px;
    transition: color 0.2s;
}

.filter-icon:hover {
    color: #242d40;
}

.filter-icon.active {
    color: #242d40;
}

.table-fixed .filter {
    width: 100%;
    min-width: 60px;
    padding: 2px 4px;
    margin: 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9em;
}

/* Contenitore dei pulsanti */
.buttons-container {
    display: flex;
    align-items: center;
    gap: 5px;  /* Spazio tra i pulsanti */
}

/* Stile base per action-buttons */
.action-buttons {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: #ffffff;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    min-width: 280px;
    border: 1px solid rgba(0,0,0,0.1);
}

.action-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    width: 100%;
    grid-template-areas:
        "nuovo modifica elimina"
        "scarichi chiamata about"
        "admin admin admin";
}

.action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 2px;
    text-align: center;
    width: 100%;  /* Forza la larghezza al 100% del contenitore */
}

.action-item i {
    font-size: 0.9em;
    margin-bottom: 4px;
}

.action-item span {
    font-size: 0.7em;
    width: 100%;  /* Forza il testo a occupare tutta la larghezza */
    white-space: normal;  /* Permette il wrap del testo */
    line-height: 1.2;
}

/* Un solo media query per gestire il mobile */
@media screen and (max-width: 480px) {
    .action-buttons {
        position: absolute !important;  /* Forza la posizione */
        right: 0 !important;
        top: 100% !important;
        left: auto !important;
        bottom: auto !important;
        min-width: 200px;
        max-width: 280px;
        border-radius: 8px !important;
    }
}

/* Stili per mobile */
@media screen and (max-width: 768px) {
    .action-buttons {
        min-width: 100%;
        right: 0;
        top: 100%;
        max-height: none;
        overflow-y: visible;
        padding: 5px;
        background-color: white;
        box-shadow: none;
    }

    .action-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2px;
        padding: 2px;
        grid-template-areas:
            "nuovo modifica elimina"
            "scarichi chiamata about"
            "admin admin admin";
    }

    .action-item {
        padding: 8px 2px;
        background-color: white;
        border: none;
    }

    .action-item i {
        font-size: 1.2em;
        margin-bottom: 2px;
        color: #242d40;
    }

    .action-item span {
        font-size: 0.7em;
        color: #333;
        font-weight: normal;
    }

    .table-fixed th, 
    .table-fixed td {
        width: 150px;
        min-width: 150px;
        max-width: 150px;
        font-size: 12px;
    }

    /* Regole specifiche per colonna Marca in mobile */
    #qes-table th:nth-child(1),
    #qes-table td:nth-child(1) {
        width: 90px !important;
        min-width: 90px !important;
        max-width: 90px !important;
    }

    /* Regole specifiche per colonna Qes in mobile */
    #qes-table th:nth-child(3),
    #qes-table td:nth-child(3) {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
    }

    /* Assicurati che il contenitore permetta lo scroll */
    .table-container {
        margin: 5px 0;
        padding: 0;
        width: 100%;
    }
}

/* Aggiungi un overlay scuro quando il menu è aperto su mobile */
.menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
}

.menu-overlay.visible {
    display: block;
}

/* Stile per il footer della tabella */
.table-footer {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #242d40;
    padding: 2px;
    display: flex;
    justify-content: left;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
    z-index: 10;
    min-width: max-content;
}

.navigation-buttons {
    display: flex;
    gap: 5px;
}

.navigation-buttons .tab-style-button {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: transparent;
    border: none;
    color: #ffffff;
    height: 28px;
    cursor: pointer;
    padding: 0 6px;
    border-radius: 4px;
}

.navigation-buttons .tab-style-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Stili per il dropdown all'interno di action-buttons */
.action-buttons .dropdown {
    position: relative;
    display: inline-block;
}

/* Modifica gli stili esistenti per i tab */
.tabs {
    margin-top: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    width: 100%;
}

.tab {
    padding: 5px 8px;  /* Ridotto il padding */
    cursor: pointer;
    border: 1px solid #374561;
    border-radius: 3px 3px 0 0;  /* Ridotto il border-radius */
    background-color: #2f3b54;
    color: #ffffff;
    font-size: 0.9em;  /* Ridotto la dimensione del testo */
    transition: background-color 0.3s, opacity 0.3s;
    opacity: 0.7;
    white-space: nowrap;  /* Evita che il testo vada a capo */
    flex: 0 1 auto;  /* Permette ai tab di adattarsi allo spazio disponibile */
}

/* Modifica lo stile del contenuto */
.content {
    margin: 10px;
    margin-top: 150px;  /* Valore base per schermi grandi */
    position: relative;
    z-index: 1;
}

/* Aggiungi media queries per schermi piccoli */
@media screen and (max-width: 768px) {
    .tabs {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1px;
    }

    .tab {
        padding: 3px 6px;
        font-size: 0.8em;
        flex: 1 1 auto;  /* Su mobile, i tab si espandono per occupare lo spazio */
        text-align: center;
    }

    .search-container {
        flex: 1 1 100%;  /* Su mobile, la ricerca occupa tutta la larghezza */
        margin: 5px 0;
        max-width: 100%;
    }

    .header h1 {
        font-size: 18px;  /* Riduce la dimensione del titolo su mobile */
    }

    .buttons-container {
        flex-wrap: wrap;
    }

    .action-buttons {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        border-radius: 0;
        padding: 12px;
    }

    .dropdown-content {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 100%;
        top: auto;
        margin-bottom: 4px;
    }

    .dropdown-btn {
        padding: 10px 16px;
        font-size: 1em;
    }

    .dropdown-content a {
        padding: 12px 16px;
        font-size: 1em;
    }

    .table-container {
        margin-top: 5px;
        height: calc(100vh - 180px);
    }

    .table-footer {
        padding: 1px;
    }

    .record-counter {
        font-size: 12px;
    }

    .navigation-buttons .tab-style-button img {
        width: 24px;
    }

    .content {
        margin-top: 180px;  /* Aumenta il margine per schermi medi */
    }

    .header {
        padding: 4px 8px !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .tabs {
        margin-top: 10px;  /* Riduci il margine superiore dei tab */
    }

    .table-fixed {
        font-size: 12px; /* Riduce la dimensione del font */
    }

    .table-fixed th, 
    .table-fixed td {
        padding: 4px 6px; /* Riduce il padding */
        min-width: 60px; /* Riduce ulteriormente la larghezza minima */
    }

    .th-content {
        min-height: 40px;
        padding: 2px;
    }

    .th-content span {
        font-size: 0.9em;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100px; /* Limita la larghezza massima del testo */
    }

    /* Gestione scroll orizzontale */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Per uno scrolling fluido su iOS */
    }

    /* Mantieni visibile l'header durante lo scroll */
    .table-fixed thead {
        position: sticky;
        top: 0;
        z-index: 2;
        background-color: white;
    }

    .th-content {
        padding: 2px;
        gap: 2px;
    }

    .table-fixed .filter {
        min-width: 60px;
        font-size: 0.8em;
    }

    .filter-icon {
        font-size: 0.8em;
    }
}

/* Aggiungi media query per schermi molto piccoli */
@media screen and (max-width: 480px) {
    .tab {
        font-size: 0.75em;  /* Riduce ulteriormente il testo */
        padding: 2px 4px;
    }

    .header h1 {
        font-size: 16px;
    }

    .search-input {
        font-size: 0.8em;
    }

    .content {
        margin-top: 200px;  /* Aumenta ulteriormente per schermi molto piccoli */
        margin-left: 5px;   /* Riduci i margini laterali */
        margin-right: 5px;
    }

    .header {
        padding: 0;  /* Rimuovi il padding dell'header */
    }

    /* Ottimizza i dropdown per schermi molto piccoli */
    .dropdown-content {
        font-size: 0.9em;
    }

    .dropdown-content a {
        padding: 8px 12px;  /* Riduci il padding delle voci del menu */
    }

    .table-fixed th, 
    .table-fixed td {
        min-width: 50px; /* Riduce ulteriormente per schermi molto piccoli */
        font-size: 11px;
    }

    .th-content span {
        max-width: 80px;
    }

    .action-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2px;
    }

    .action-item {
        padding: 6px 2px;
    }

    .action-item i {
        font-size: 1.1em;
    }

    .action-item span {
        font-size: 0.65em;
    }
}

/* Stili base per le icone della navbar */
.nav-item i {
    font-size: 1.2em;
    margin-bottom: 4px;
    transition: font-size 0.3s ease;
}

.nav-item span {
    font-size: 0.8em;
    transition: font-size 0.3s ease;
}

/* Media query per tablet */
@media screen and (max-width: 768px) {
    .nav-item i {
        font-size: 1em;
        margin-bottom: 2px;
    }

    .nav-item span {
        font-size: 0.7em;
    }

    .nav-item {
        padding: 4px 8px;
    }
}

/* Media query per smartphone */
@media screen and (max-width: 480px) {
    .nav-item i {
        font-size: 0.9em;
        margin-bottom: 1px;
    }

    .nav-item span {
        font-size: 0.65em;
    }

    .nav-item {
        padding: 3px 6px;
    }

    /* Riduci lo spazio tra gli elementi */
    .main-nav {
        gap: 4px;
    }

    /* Riduci la dimensione del divisore */
    .nav-divider {
        margin: 0 2px;
    }
}

/* Media query per schermi molto piccoli */
@media screen and (max-width: 360px) {
    .nav-item i {
        font-size: 0.8em;
        margin-bottom: 1px;
    }

    .nav-item span {
        font-size: 0.6em;
    }

    .nav-item {
        padding: 2px 4px;
    }

    .main-nav {
        gap: 4px;
    }
}

/* Stile per il contatore nella navbar */
.record-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    margin-left: 2px;
}

.record-counter i {
    font-size: 1.2em;
    margin-bottom: 4px;
    opacity: 0.8;
    transition: font-size 0.3s ease;
}

.record-counter span {
    font-size: 0.8em;
    transition: font-size 0.3s ease;
}

/* Adatta il contatore per mobile */
@media screen and (max-width: 768px) {
    .record-counter i {
        font-size: 1em;
        margin-bottom: 2px;
    }

    .record-counter span {
        font-size: 0.7em;
    }
}

@media screen and (max-width: 480px) {
    .record-counter i {
        font-size: 0.9em;
        margin-bottom: 1px;
    }

    .record-counter span {
        font-size: 0.65em;
    }

    .record-counter {
        margin-left: 1px;
    }
}

/* Stile per il pulsante menu */
.menu-button {
    margin-left: auto;
    padding: 4px 8px;
    height: 32px !important;  /* Stessa altezza del campo di ricerca */
    transition: all 0.3s ease;
    background-color: transparent;
    border: none;
    color: white;
    display: flex;
    align-items: center;
}

.menu-button i {
    font-size: 1.4em !important;  /* Aumentato da 1.2em */
    transition: transform 0.3s ease;
}

.menu-button:hover i {
    transform: scale(1.1);
}

@media screen and (max-width: 768px) {
    .menu-button {
        padding: 3px 6px;
        height: 28px !important;
    }
    
    .menu-button i {
        font-size: 1.2em !important;
    }
}

@media screen and (max-width: 480px) {
    .menu-button {
        padding: 2px 4px;
        height: 24px !important;
    }
    
    .menu-button i {
        font-size: 1em !important;
    }
}

/* Stile per il pulsante reset */
.reset-button {
    background-color: transparent;
    border: none;
    color: white;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 32px !important;  /* Stessa altezza del campo di ricerca */
    display: flex;
    align-items: center;
    justify-content: center;
}

.reset-button i {
    font-size: 1.4em !important;  /* Aumentato da 0.9em */
    transition: transform 0.3s ease;
}

.reset-button:hover {
    opacity: 0.8;
}

.reset-button:hover i {
    transform: rotate(-180deg);
}

/* Adattamento per mobile */
@media screen and (max-width: 768px) {
    .reset-button, .menu-button {
        height: 28px !important;
    }
    
    .reset-button i, .menu-button i {
        font-size: 1.2em !important;
    }
}

/* Stile per le righe con ultima colonna = 1 */
.highlight-row {
    background-color: rgba(255, 0, 0, 0.25) !important;  /* Rosso più intenso */
    border-left: 4px solid #ff0000 !important;  /* Bordo rosso più spesso */
    font-weight: 600 !important;  /* Testo leggermente più marcato */
    box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.2) !important;  /* Ombra interna più marcata */
}

/* Mantieni l'hover anche sulle righe evidenziate */
.highlight-row:hover {
    background-color: rgba(255, 0, 0, 0.35) !important;  /* Rosso ancora più intenso all'hover */
    box-shadow: inset 0 0 12px rgba(255, 0, 0, 0.3) !important;  /* Ombra interna ancora più marcata */
}

/* Mantieni lo stile anche quando la riga è selezionata */
.highlight-row.selected {
    background-color: #ff0000 !important;  /* Rosso pieno quando selezionato */
    color: white !important;
    font-weight: 700 !important;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.4) !important;  /* Ombra esterna */
}

/* Riduci lo spazio tra gli elementi della navbar */
.main-nav {
    gap: 4px;  /* Ridotto da 8px */
}

/* Riduci la dimensione e il margine del divisore */
.nav-divider {
    margin: 0 2px;  /* Ridotto da 4px */
}

/* Riduci il margine del contatore */
.record-counter {
    margin-left: 2px;  /* Ridotto da 8px */
}

/* Media query per schermi più piccoli */
@media screen and (max-width: 768px) {
    .main-nav {
        gap: 3px;  /* Ridotto ulteriormente per mobile */
    }
    
    .nav-divider {
        margin: 0 1px;
    }
    
    .record-counter {
        margin-left: 1px;
    }
}

/* Adattamento per mobile */
@media screen and (max-width: 768px) {
    .search-input {
        height: 28px !important;
        font-size: 1em !important;  /* Ridotto da 1.2em */
        line-height: 28px !important;
    }
}

/* Stile per il pulsante utente */
.user-button {
    margin-left: auto;
    padding: 4px 8px;
    height: 32px !important;
    transition: all 0.3s ease;
    background-color: transparent;
    border: none;
    color: white;
    display: flex;
    align-items: center;
}

.user-button i {
    font-size: 1.4em !important;
    transition: transform 0.3s ease;
}

.user-button:hover i {
    transform: scale(1.1);
}

/* Adattamento per mobile */
@media screen and (max-width: 768px) {
    .user-button {
        padding: 3px 6px;
        height: 28px !important;
    }
    
    .user-button i {
        font-size: 1.2em !important;
    }
}

.login-container {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

.form-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.alert {
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

button {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

/* Stili per il menu utente */
.username-display {
    color: white;
    font-size: 0.9em;
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle;
}

.user-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: white;
    min-width: 160px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border-radius: 4px;
    z-index: 1000;
    margin-top: 5px;
}

.user-dropdown.show {
    display: block;
}

.user-dropdown a {
    color: #333;
    padding: 12px 16px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-dropdown a:hover {
    background-color: #f5f5f5;
}

.user-dropdown i {
    width: 20px;
}

/* Adattamento per mobile */
@media screen and (max-width: 768px) {
    .username-display {
        font-size: 0.8em;
        display: none;  /* Nascondi il nome utente su mobile */
    }
    
    .user-dropdown {
        right: 0;
        left: auto;
    }
}

/* Stili per il pannello di amministrazione */
.admin-container {
    max-width: 800px;
    margin: 80px auto 20px;
    padding: 20px;
}

.admin-section {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.admin-section h2 {
    color: #242d40;
    margin-bottom: 20px;
}

.admin-form {
    max-width: 400px;
}

.users-table table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.users-table th,
.users-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.users-table th {
    background-color: #f5f5f5;
    font-weight: 600;
}

.delete-btn {
    color: #dc3545;
    text-decoration: none;
}

.delete-btn:hover {
    color: #c82333;
}

/* Stili per il pulsante torna alla home */
.header-right {
    margin-left: auto;
    margin-right: 20px;
}

.back-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #2f3b54;
    color: white;
    border: 1px solid #374561;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.back-button:hover {
    background-color: #374561;
}

.back-button i {
    font-size: 1.1em;
}

/* Adattamento per mobile */
@media screen and (max-width: 768px) {
    .back-button span {
        display: none;
    }
    
    .back-button {
        padding: 8px;
    }
    
    .header-right {
        margin-right: 10px;
    }
}

/* Stili per il modal in versione mobile */
@media screen and (max-width: 768px) {
    /* Contenitore principale del modal */
    .modal .modal-content {
        width: 95% !important;
        margin: 10px auto;
        max-width: none !important;
        padding: 6px;
    }

    /* Sezioni della chiamata */
    .call-section {
        margin-bottom: 6px;
        padding: 4px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        background-color: #f8f9fa;
    }

    .call-section:first-child {
        margin-top: 0;
    }

    .call-section h3 {
        margin: 0 0 2px 0;
        color: #242d40;
        font-size: 1em;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Righe dei ricambi */
    .parts-row {
        flex-direction: column;
        gap: 8px;
        padding: 10px;
        background-color: #f8f9fa;
        border-radius: 4px;
        margin-bottom: 8px;
    }

    .parts-row input[type="text"],
    .parts-row input[type="number"] {
        width: 100%;
    }

    /* Righe della manodopera */
    .labor-row {
        flex-direction: column;
        gap: 8px;
        padding: 10px;
        background-color: #f8f9fa;
        border-radius: 4px;
        margin-bottom: 8px;
    }

    .labor-row select {
        width: 100%;
    }

    /* Pulsanti di rimozione */
    .remove-part,
    .remove-labor {
        align-self: flex-end;
        padding: 8px;
    }

    /* Totali */
    .totals {
        text-align: right;
        padding: 10px;
        background-color: #e9ecef;
        border-radius: 4px;
        margin-top: 4px;
    }

    /* Header del modal */
    .modal-header {
        padding: 6px 8px;
        margin-bottom: 2px;
        border-bottom: 1px solid #e0e0e0;
    }

    .modal-header h2 {
        font-size: 0.8em;
        margin: 0;
    }

    .modal-body {
        padding: 4px 6px;
    }

    .modal-actions {
        gap: 15px;
    }

    /* Pulsanti di aggiunta */
    .add-labor-btn,
    .add-part-btn {
        width: 100%;
        justify-content: center;
        margin: 10px 0;
    }
}

/* Nuovo stile per il pulsante + nell'header */
.add-button {
    background: none;
    border: none;
    color: #28a745;
    font-size: 1.2em;
    cursor: pointer;
    padding: 0 5px;
    transition: transform 0.2s ease;
}

.add-button:hover {
    transform: scale(1.1);
}

/* Rimuovi i vecchi pulsanti di aggiunta */
.add-labor-btn,
.add-part-btn {
    display: none;
}

/* Uniforma lo stile delle righe in entrambe le sezioni */
.parts-row,
.labor-row {
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 0; /* Rimuovi il padding verticale */
    align-items: center;
    flex-direction: row;
    background: none;
    min-height: 34px; /* Forza altezza minima uniforme */
}

/* Uniforma gli input e select */
.parts-row input,
.labor-row select {
    margin: 0;
    padding: 0 6px; /* Mantieni solo il padding orizzontale */
    height: 34px;
    box-sizing: border-box;
}

/* Contenitori delle liste */
#parts-list,
#labor-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Rimuovi qualsiasi margin/padding aggiuntivo dalle righe */
#parts-list .parts-row,
#labor-list .labor-row {
    margin: 0;
    padding: 0;
}

/* Forza queste regole anche su mobile */
@media screen and (max-width: 768px) {
    .parts-row,
    .labor-row {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 34px !important;
    }
}

/* Ottimizza i totali */
.totals {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid #e0e0e0;
}

.totals p {
    margin: 3px 0;
    font-size: 0.85em;
}

/* Ottimizza la sezione totale generale */
.total-section {
    background-color: #e9ecef;
    padding: 6px;
}

.total-section h3 {
    margin: 0 0 2px 0;
}

/* Aree grid per action items */
.action-item[onclick="redirectToAdd()"] { grid-area: nuovo; }
.action-item[onclick="deleteSelected()"] { grid-area: elimina; }
.action-item[onclick="showStorageHistory()"] { grid-area: scarichi; }
.action-item[onclick="showCallModal()"] { grid-area: chiamata; }
.action-item[onclick="showAbout()"] { grid-area: about; }
.action-item[onclick*="admin_panel"] { grid-area: admin; }

/* Aggiusta l'allineamento verticale delle opzioni nel select */
.labor-row select option {
    padding: 8px;
    font-size: 0.95em;
}

/* Stili per il modal chiamata */
.modal-content {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Impedisce lo scroll nell'intero contenitore */
}

.modal-header {
    flex: 0 0 auto; /* Non comprimibile o espandibile */
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 1;
    padding: 6px 8px;
    border-bottom: 1px solid #e0e0e0;
}

.modal-body {
    flex: 1 1 auto; /* Espandibile e comprimibile */
    overflow-y: auto; /* Attiva scrolling verticale */
    padding: 4px 6px;
    max-height: calc(90vh - 40px); /* Altezza massima considerando header */
}

/* Stile per la scrollbar */
.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Assicura che il footer del modal (se presente) rimanga visibile */
.modal-footer {
    flex: 0 0 auto;
    border-top: 1px solid #e0e0e0;
    padding: 6px 8px;
    background-color: white;
}

/* Corretto stile della sezione totale per allinearla con le altre sezioni */
#call-modal .total-section {
    position: static;
    background-color: #f8f9fa;
    margin-top: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 4px; /* Stesso padding delle altre sezioni */
    box-shadow: none;
}

/* Assicura che il titolo della sezione totale sia allineato con gli altri titoli */
#call-modal .total-section h3 {
    margin: 0 0 2px 0;
    color: #242d40;
    font-size: 1em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 4px; /* Allinea il padding con gli altri titoli */
}

/* Stile per il testo del totale nella stessa riga del titolo */
#call-modal .total-section .total-value {
    font-weight: bold;
    color: #242d40;
}

/* Adatta i totali parziali */
#call-modal .totals {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid #e0e0e0;
}

#call-modal .totals p {
    margin: 3px 0;
    font-size: 0.85em;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.modal-header h2 {
    margin: 0;
}

.modal-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.modal-actions .action-icon {
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
}

.modal-actions .action-icon:hover {
    transform: scale(1.1);
}

.modal-actions .share {
    color: #4a90e2;
}

.modal-actions .delete {
    color: #e74c3c;
}

/* Stili responsive per mobile */
@media screen and (max-width: 768px) {
    .modal-actions .action-icon {
        font-size: 26px !important;
        padding: 8px !important;
        margin: 0 2px !important;
    }
    
    .modal-actions {
        gap: 10px !important;
    }
}

/* Sezioni della chiamata */
.call-section {
    margin-bottom: 6px;
    padding: 4px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #f8f9fa;
}

.call-section:first-child {
    margin-top: 0;
}

.call-section h3 {
    margin: 0 0 2px 0;
    color: #242d40;
    font-size: 1em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Liste e righe delle sezioni */
#parts-list,
#labor-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.parts-row,
.labor-row {
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 0;
    align-items: center;
    flex-direction: row;
    background: none;
    min-height: 34px;
}

/* Input e select */
.parts-row input,
.labor-row select {
    margin: 0;
    padding: 0 6px;
    height: 34px;
    box-sizing: border-box;
}

.labor-row select option {
    padding: 8px;
    font-size: 0.95em;
}

/* Totali */
.totals {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid #e0e0e0;
}

.totals p {
    margin: 3px 0;
    font-size: 0.85em;
}

/* Sezione totale generale */
.total-section {
    background-color: #e9ecef;
    padding: 6px;
}

.total-section h3 {
    margin: 0 0 2px 0;
}

/* Media queries per mobile */
@media screen and (max-width: 768px) {
    .modal-content {
        max-height: 95vh;
        width: 95% !important;
        margin: 10px auto;
        max-width: none !important;
        padding: 6px;
    }

    .modal-body {
        max-height: calc(95vh - 40px);
    }

    .parts-row,
    .labor-row {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 34px !important;
    }
}

/* Aree grid per action items */
.action-item[onclick="redirectToAdd()"] { grid-area: nuovo; }
.action-item[onclick="deleteSelected()"] { grid-area: elimina; }
.action-item[onclick="showStorageHistory()"] { grid-area: scarichi; }
.action-item[onclick="showCallModal()"] { grid-area: chiamata; }
.action-item[onclick="showAbout()"] { grid-area: about; }
.action-item[onclick*="admin_panel"] { grid-area: admin; }

/* Media query per rendere il login più grande su mobile */
@media screen and (max-width: 768px) {
    .login-container {
        width: 85% !important;
        max-width: none !important;
        margin: 30px auto !important;
        padding: 30px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
    }
    
    .form-group {
        margin-bottom: 20px !important;
    }
    
    .form-group label {
        font-size: 18px !important;
        margin-bottom: 8px !important;
        display: block !important;
    }
    
    .form-group input {
        height: 25px !important;
        padding: 4px 8px !important;
        font-size: 18px !important;
        border-radius: 8px !important;
    }
    
    button[type="submit"] {
        height: 54px !important;
        font-size: 18px !important;
        width: 100% !important;
        margin-top: 25px !important;
        border-radius: 8px !important;
    }
}

/* Per schermi molto piccoli */
@media screen and (max-width: 480px) {
    .login-container {
        width: 92% !important;
        padding: 25px !important;
    }
}

/* Miglioramenti all'header per dispositivi mobili */
@media screen and (max-width: 768px) {
    /* Header più compatto */
    .header {
        padding: 4px 8px !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    
    /* Logo più piccolo */
    .header img {
        height: 50px !important;
        width: auto !important;
    }
    
    /* Titolo più piccolo */
    .header h1 {
        font-size: 18px !important;
        margin-left: 5px !important;
    }
    
    /* Contenitore di ricerca ottimizzato */
    .search-container {
        order: 3 !important; /* Sposta in fondo */
        width: 100% !important; /* Occupa tutta la larghezza */
        margin: 4px 0 !important;
        flex: 1 0 100% !important;
    }
    
    /* Input di ricerca ottimizzato */
    .search-input {
        width: 100% !important;
        max-width: none !important;
        height: 36px !important;
    }
    
    /* Pulsanti più grandi e facili da toccare */
    .menu-button, .reset-button, .user-button {
        min-width: 36px !important;
        min-height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }
    
    /* Icone più grandi nei pulsanti */
    .menu-button i, .reset-button i, .user-button i {
        font-size: 20px !important;
    }
    
    /* Spazio tra elementi della nav */
    .main-nav {
        gap: 8px !important;
    }
}

/* Per schermi molto piccoli */
@media screen and (max-width: 480px) {
    /* Nascondi il titolo */
    .header h1 {
        display: none !important;
    }
    
    /* Aumenta dimensione icone per tocco più facile */
    .menu-button i, .reset-button i, .user-button i {
        font-size: 24px !important;
    }
    
    /* Ottimizza altezza barra di ricerca */
    .search-input {
        height: 30px !important;
        font-size: 20px !important; /* Dimensione che previene lo zoom su iOS */
    }
}

/* Stili per i tab con le azioni */
.tab-with-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 5px;
}

.tab-actions {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    justify-content: center;
}

.tab-actions .action-icon {
    font-size: 18px;
    color: #242d40;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
    padding: 5px;
}

.tab-actions .action-icon:hover {
    color: #4a5c82;
    transform: scale(1.1);
}

.tab-actions .action-icon.share {
    color: #4a90e2;
}

.tab-actions .action-icon.delete {
    color: #e74c3c;
}

/* Stili responsive per mobile */
@media screen and (max-width: 768px) {
    .storage-tabs {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .tab-with-actions {
        min-width: 45%;
        margin-bottom: 15px;
    }
    
    .tab-actions {
        margin-top: 8px;
    }
    
    .tab-actions .action-icon {
        font-size: 20px; /* Leggermente più grande su mobile per il touch */
        padding: 8px;
    }
}

/* Stile per le azioni sopra i tab */
.tab-global-actions {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-bottom: 10px;
    padding: 0 10px;
}

.tab-global-actions .action-icon {
    font-size: 20px;
    color: #242d40;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
    padding: 5px;
}

.tab-global-actions .action-icon:hover {
    color: #4a5c82;
    transform: scale(1.1);
}

.tab-global-actions .action-icon.share {
    color: #4a90e2;
}

.tab-global-actions .action-icon.delete {
    color: #e74c3c;
}

/* Modale Modifica: allineamento checkbox "Crea nuovo record" */
.inline-checkbox {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-direction: row;
}

.inline-checkbox input[type="checkbox"] {
    width: 20px;
    min-width: 18px;
    max-width: 22px;
    height: 20px;
    margin: 0;
    box-sizing: border-box;
}

.inline-checkbox label {
    display: inline;
    margin: 0;
    text-align: left;
    line-height: 1.2;
    white-space: nowrap;
}

/* Stili responsive per mobile */
@media screen and (max-width: 768px) {
    .tab-global-actions {
        justify-content: center;
    }
    
    .tab-global-actions .action-icon {
        font-size: 24px; /* Più grande su mobile per il touch */
        padding: 8px;
    }
}

/* Aumenta dimensione icone per dispositivi mobili */
@media screen and (max-width: 768px) {
    .modal-actions .action-icon {
        font-size: 26px !important;
        padding: 8px !important;
        margin: 0 2px !important;
    }
    
    .modal-actions {
        gap: 10px !important;
    }
}

/* Ancora più grandi per schermi molto piccoli */
@media screen and (max-width: 480px) {
    .modal-actions .action-icon {
        font-size: 30px !important;
        padding: 10px !important;
    }
}

/* Aumenta dimensione icone cestino per i record individuali */
.fa-trash, 
.remove-part,
.remove-labor,
.remove-item,
.delete-row-icon {
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
}

.fa-trash:hover, 
.remove-part:hover,
.remove-labor:hover,
.remove-item:hover,
.delete-row-icon:hover {
    color: #e74c3c;
    transform: scale(1.1);
}

/* Media query per dispositivi mobili */
@media screen and (max-width: 768px) {
    .fa-trash, 
    .remove-part,
    .remove-labor,
    .remove-item,
    .delete-row-icon {
        font-size: 22px !important;
        padding: 6px !important;
    }
    
    /* Aumenta lo spazio per il tocco */
    td:last-child, 
    th:last-child {
        min-width: 50px !important;
        text-align: center !important;
    }
}

/* Per schermi molto piccoli */
@media screen and (max-width: 480px) {
    .fa-trash, 
    .remove-part,
    .remove-labor,
    .remove-item,
    .delete-row-icon {
        font-size: 26px !important;
        padding: 2px !important;
    }
    
    /* Ancora più spazio per il tocco */
    td:last-child, 
    th:last-child {
        min-width: 60px !important;
    }
}

/* Stili per il modal About */
#about-modal .modal-body {
    padding: 15px;
}

.about-info {
    margin-bottom: 20px;
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}

.changelog {
    max-height: 400px;
    overflow-y: auto;
}

.version-entry {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}

.version-entry:last-child {
    border-bottom: none;
}

.version-entry h4 {
    margin: 0 0 10px 0;
    color: #242d40;
}

.version-entry ul {
    margin: 0;
    padding-left: 20px;
}

.version-entry li {
    margin-bottom: 5px;
}

/* Aumento dimensione icone nel footer-nav */
.footer-nav .nav-item i {
    font-size: 16px !important; /* Aumentato da default */
}

.footer-nav .nav-item {
    padding: 4px 8px !important; /* Aumentato per dare più spazio alle icone */
}

/* Media query per dispositivi mobili - Allineamento con header */
@media screen and (max-width: 768px) {
    .footer-nav {
        padding: 6px 10px !important;
    }
    
    .main-nav {
        gap: 8px !important; /* Ridotto da 14px a 8px */
    }
    
    .footer-nav .nav-item i {
        font-size: 20px !important;
        margin-bottom: 3px !important;
    }
    
    .footer-nav .nav-item {
        padding: 6px 10px !important;
    }
}

/* Per schermi molto piccoli - Allineamento con header */
@media screen and (max-width: 480px) {
    .footer-nav {
        padding: 8px 5px !important;
    }
    
    .main-nav {
        gap: 5px !important; /* Ancora più stretto per schermi piccoli */
    }
    
    .footer-nav .nav-item i {
        font-size: 24px !important;
        margin-bottom: 4px !important; 
    }
    
    .footer-nav .nav-item {
        padding: 8px 10px !important; /* Ridotto di 2px */
    }
    
    .footer-nav .nav-item span {
        font-size: 11px !important;
        font-weight: 400 !important;
    }
}

/* Rimuovi separatore tra le icone del footer */
.footer-nav .nav-divider {
    display: none !important; /* Rimuove completamente il separatore */
}

/* Stili per le notifiche */
#call-notification, #storage-notification {
    display: none; /* Nascosto di default */
    position: fixed;
    z-index: 1000;
}

#call-notification.visible, #storage-notification.visible {
    display: block; /* Mostrato quando ha la classe 'visible' */
}

/* Stile finale per il toast - colore del pulsante flottante */
#toast {
    visibility: hidden;
    min-width: 250px;
    max-width: 80%;
    background-color: #4285f4; /* Colore del pulsante flottante "+" */
    color: white;
    text-align: center;
    border-radius: 8px;
    padding: 16px;
    position: fixed;
    z-index: 2000;
    left: 50%;
    transform: translateX(-50%);
    bottom: 70px;
    font-size: 1rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

#toast.show {
    visibility: visible;
    animation: fadein 0.5s;
    -webkit-animation: fadein 0.5s;
}

/* Toast dinamico */
#toast.dynamic-toast {
    background-color: #4285f4; /* Colore del pulsante flottante */
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 70px; opacity: 1;}
}

@keyframes fadeout {
    from {bottom: 70px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

/* Rimuovi la transizione di uscita automatica per controllare manualmente la durata */

/* Stili per l'header delle sezioni storage */
.storage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.storage-header h3 {
    margin: 0;
    color: #242d40;
}

.add-dummy-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    background-color: #4285f4;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.add-dummy-btn:hover {
    background-color: #3367d6;
}

.add-dummy-btn i {
    font-size: 1.1em;
}

/* Stili per il modal di inserimento manuale */
#dummy-item-modal .form-group {
    margin-bottom: 15px;
}

#dummy-item-modal .form-group label {
    display: block;
    margin-bottom: 5px;
    color: #242d40;
    font-weight: 500;
}

#dummy-item-modal .form-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
}

#dummy-item-modal .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

#dummy-item-modal .form-actions button {
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#dummy-item-modal .form-actions button:first-child {
    background-color: #4285f4;
    color: white;
}

#dummy-item-modal .form-actions button:last-child {
    background-color: #f1f3f4;
    color: #5f6368;
}

#dummy-item-modal .form-actions button:hover {
    opacity: 0.9;
}

/* Media queries per mobile */
@media screen and (max-width: 768px) {
    .storage-header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .add-dummy-btn {
        width: 100%;
        justify-content: center;
    }

    #dummy-item-modal .form-actions {
        flex-direction: column;
    }

    #dummy-item-modal .form-actions button {
        width: 100%;
        margin-bottom: 5px;
    }
}

/* Stili per le card nel modal scarichi e ripristini */
.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
    padding: 10px;
    width: 100%;
}

.storage-content .card {
    background: white;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px;
    padding: 12px;
    position: relative;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.storage-content .card .timestamp {
    font-size: 0.8em;
    color: #666;
    margin-bottom: 4px;
}

.storage-content .card .code {
    font-size: 0.9em;
    font-weight: 500;
    color: #242d40;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.storage-content .card .description {
    font-size: 0.85em;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.3;
    display: -webkit-box;
    display: box; /* Aggiunto per compatibilità */
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
    max-height: 2.6em; /* Usando max-height invece di height */
}

.storage-content .card .quantity-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto; /* Spinge i controlli verso il basso */
}

.storage-content .card .quantity-label {
    font-size: 0.85em;
    color: #666;
}

.storage-content .card .quantity-value {
    font-size: 0.9em;
    font-weight: 500;
    min-width: 30px;
    text-align: center;
}

.storage-content .card .quantity-btn {
    background: none;
    border: 1px solid #ddd !important; /* Forza il bordo */
    border-radius: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9em;
    color: #242d40;
    padding: 0;
}

.storage-content .card .quantity-btn:hover {
    background-color: #f5f5f5;
}

.storage-content .card > .card-actions {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 2 !important;
}

.storage-content .card > .card-actions > i.fa-keyboard {
    color: #4285f4 !important;
    font-size: 0.9em !important;
    opacity: 0.7 !important;
    display: inline-block !important;
    position: static !important;
}

.storage-content .card > .card-actions > .delete-btn {
    background: none !important;
    border: none !important;
    color: #e74c3c !important;
    cursor: pointer !important;
    padding: 4px !important;
    font-size: 0.9em !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
}

.storage-content .card > .card-actions > i.fa-keyboard:hover,
.storage-content .card > .card-actions > .delete-btn:hover {
    opacity: 1 !important;
}

/* Media query per desktop */
@media screen and (min-width: 1024px) {
    .card-container {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    .storage-content .card {
        padding: 10px;
    }

    .storage-content .card .description {
        font-size: 0.8em;
        height: 2.4em;
    }
}

/* Media query per schermi molto grandi */
@media screen and (min-width: 1440px) {
    .card-container {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

.storage-content .card .card-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.storage-content .card .card-actions i.fa-keyboard {
    color: #4285f4;
    font-size: 0.9em;
    opacity: 0.7;
}

.storage-content .card .card-actions .delete-btn {
    position: static;
    margin: 0;
    padding: 0;
}

.floating-menu .checkbox-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
}

.floating-menu .checkbox-item label {
    order: 1;
    margin-right: 8px;
}

.floating-menu .checkbox-item input[type="checkbox"] {
    order: 2;
}

.floating-menu .checkbox-item:hover {
    background-color: #f5f5f5;
}

#chiusura-modal .modal-content {
    max-height: 80vh;
    overflow-y: auto;
}
/* === CSS SPOSTATO DA INDEX.HTML === */
        body {
            font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
            background-color: #ffffff;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            background-color: #ffffff; /* Colore uguale a quello del tab attivo */
        }
        /* Manteniamo qui solo gli stili specifici per i tab e il layout che non sono nel CSS generale */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: #242d40;  /* Nuovo colore di sfondo */
            color: white;               /* Colore del testo bianco per contrasto */
            padding: 8px;  /* Ridotto da 10px a 5px */
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            z-index: 1000;
            display: flex;
            align-items: center;
            height: 50px;
        }

        .header-left {
            display: flex;
            align-items: center;
            flex: 0 0 auto;
        }

        .header-center {
            display: flex;
            align-items: center;
            flex: 1;
            margin: 0 10px;
        }

        .search-container {
            display: flex;
            align-items: center;
            flex: 1;
        }

        .search-input {
            flex: 1;
            padding: 6px;
            border: 1px solid #ccc;
            border-radius: 5px;
            height: 20px;
            font-size: 14px;
            background-color: #FFEB3B; /* Giallo */
        }

        .search-input.searching {
            background-color: #f9faf8;
            transition: background-color 0.3s ease;
        }

        .tab {
            padding: 10px 10px;
            cursor: pointer;
            border: 1px solid #374561;  /* Colore del bordo leggermente più chiaro */
            border-radius: 5px 5px 0 0;
            background-color: #2f3b54;  /* Sfondo tab non attivo leggermente più chiaro */
            color: #ffffff;             /* Testo bianco */
            margin-right: 5px;
            transition: background-color 0.3s, opacity 0.3s;
            opacity: 0.7;
        }
        .tab:hover {
            background-color: #374561;  /* Colore hover leggermente più chiaro */
        }
        .tab.active {
            background-color: #4a5c82;  /* Tab attivo più chiaro */
            border-bottom: 1px solid transparent;
            opacity: 1;
            font-weight: bold;
        }
        .content {
            margin: 10px;
            margin-top: 100px;
            margin-bottom: 35px; /* Ridotto da 50px a 35px */
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        .selected {
            background-color: #d3d3d3;
        }
        .search-container {
            display: flex;
            align-items: center;
            margin-left: 10px;
        }
        .search-input {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 5px;
            height: 22px;
            font-size: 14px;
        }
        .tab-style-button {
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            outline: none;
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 1001;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 5% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 600px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .modal-header h2 {
            margin: 0;
            color: #242d40;
        }

        .close {
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close:hover {
            color: #242d40;
        }

        #version-history {
            margin-top: 20px;
            max-height: 300px;
            overflow-y: auto;
        }

        .version-item {
            margin-bottom: 15px;
            padding: 10px;
            border-left: 3px solid #242d40;
            background-color: #f8f9fa;
        }

        .version-item h3 {
            margin: 0 0 10px 0;
            color: #242d40;
        }

        .version-item ul {
            margin: 0;
            padding-left: 20px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
        }

        .form-group select,
        .form-group input {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .modal-buttons {
            margin-top: 20px;
        }

        .modal-buttons button {
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .modal-buttons button[type="submit"] {
            background-color: #4CAF50;
            color: white;
        }

        .modal-buttons .cancel {
            background-color: #f44336;
            color: white;
            margin-left: 10px;
        }

        .tab.disabled {
            opacity: 0.5;
            cursor: not-allowed;
            background-color: #808080;
            pointer-events: none;
        }

        .record-counter {
            color: white;
            margin: 0 15px;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 5px; /* Ridotto leggermente lo spazio tra hashtag e numero */
        }

        .record-counter i {
            opacity: 0.7; /* Reso leggermente più tenue */
            font-size: 0.9em; /* Reso leggermente più piccolo */
        }

        /* Stili per la navbar nel footer */
        .footer-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #f8f9fa;
            padding: 4px 15px; /* Ridotto da 8px a 4px */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            border-top: 1px solid #e0e0e0;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
        }

        .main-nav {
            display: flex;
            align-items: center;
            gap: 15px; /* Ridotto lo spazio tra gli elementi */
        }

        .nav-control {
            color: #4a90e2; /* Colore diverso per i controlli */
        }

        .nav-item {
            color: #666;
            text-decoration: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0 5px; /* Ridotto il padding */
            transition: all 0.3s;
        }

        .nav-item.active {
            color: #4a90e2;
        }

        .nav-item i {
            font-size: 1em;
            margin-bottom: 1px;
        }

        .nav-item span {
            font-family: 'Inter', 'Roboto', sans-serif;
            font-weight: 400;
        }

        .nav-divider {
            width: 1px;
            height: 16px; /* Ridotta da 20px a 16px */
            background-color: #e0e0e0;
            margin: 0 10px; /* Ridotto il margine */
        }

        /* Spostiamo le info versione sopra la navbar */
        .version-info {
            bottom: 50px;
        }

        /* Modifica gli stili delle colonne della tabella qes */
        #qes-table th,
        #qes-table td {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 5px 8px;
        }

        /* Marca - Prima colonna */
        #qes-table th:nth-child(1),
        #qes-table td:nth-child(1) {
            min-width: 90px;
            max-width: 100px;
        }

        /* Tipo - Seconda colonna */
        #qes-table th:nth-child(2),
        #qes-table td:nth-child(2) {
            min-width: 120px;
            max-width: 240px;
            white-space: nowrap;
            overflow: hidden; /* Mostra il testo che eccede */
        }

        /* Qes - Terza colonna */
        #qes-table th:nth-child(3),
        #qes-table td:nth-child(3) {
            min-width: 60px;
            max-width: 70px;
        }

        /* Sezione - Quarta colonna */
        #qes-table th:nth-child(4),
        #qes-table td:nth-child(4) {
            min-width: 150px;
            max-width: 200px;
            white-space: nowrap;
            overflow: hidden; 
            width: auto;
        }

        /* Descrizione - Quinta colonna */
        #qes-table th:nth-child(5),
        #qes-table td:nth-child(5) {
            min-width: 200px;
            width: auto;
        }

        /* Speciale - Sesta colonna */
        #qes-table th:nth-child(6),
        #qes-table td:nth-child(6) {
            min-width: 50px;
            max-width: 80px;
            text-align: center;
        }

        /* Assicurati che la tabella si comporti correttamente */
        #qes-table {
            table-layout: fixed;
            width: 100%;
        }

        /* Stile per il contenuto delle celle */
        #qes-table td {
            text-align: left;
            vertical-align: middle;
        }

        /* Stili per la tabella allarmi */
        #allarmi-table th,
        #allarmi-table td {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 5px 8px;
        }

        /* Prima colonna - ridotta */
        #allarmi-table th:nth-child(1),
        #allarmi-table td:nth-child(1) {
            min-width: 60px;
            max-width: 100px;
            width: 100px;
        }

        /* Seconda colonna - ridotta */
        #allarmi-table th:nth-child(2),
        #allarmi-table td:nth-child(2) {
            min-width: 80px;
            max-width: 120px;
            width: 120px;
        }

        /* Terza colonna - fissa a 50px come richiesto */
        #allarmi-table th:nth-child(3),
        #allarmi-table td:nth-child(3) {
            width: 70px;
            min-width: 70px;
            max-width: 70px;
        }

        /* Quarta colonna - adattiva, per la descrizione */
        #allarmi-table th:nth-child(4),
        #allarmi-table td:nth-child(4) {
            min-width: 150px;
            width: auto;
            text-align: left;
            white-space: normal; /* Permette al testo di andare a capo */
            overflow: visible; /* Mostra tutto il contenuto */
        }

        /* Quinta colonna - adattiva */
        #allarmi-table th:nth-child(5),
        #allarmi-table td:nth-child(5) {
            min-width: 100px;
            width: auto;
        }

        /* Sesta colonna - adattiva */
        #allarmi-table th:nth-child(6),
        #allarmi-table td:nth-child(6) {
            min-width: 100px;
            width: auto;
        }

        /* Assicurati che la tabella si comporti correttamente */
        #allarmi-table {
            table-layout: fixed;
            width: 100%;
        }

        /* Stile per il contenuto delle celle */
        #allarmi-table td {
            text-align: left;
            vertical-align: middle;
        }

        /* Aggiunta regola specifica per dispositivi mobili */
        @media screen and (max-width: 768px) {
            #allarmi-table td, 
            #allarmi-table th {
                text-align: left !important; /* Forza l'allineamento a sinistra su mobile */
            }
            
            /* Adattamenti specifici per la colonna di descrizione su mobile */
            #allarmi-table td:nth-child(4) {
                min-width: 120px;
                white-space: normal; /* Permette al testo di andare a capo */
                overflow: visible; /* Mostra tutto il contenuto */
            }
        }

        /* Stili per la tabella listino */
        #listino-table {
            table-layout: auto; /* Permette alle colonne di adattarsi al contenuto */
            min-width: 100%;
            width: max-content; /* Permette alla tabella di espandersi oltre il contenitore */
        }

        /* Prima colonna - fissa a 20px */
        #listino-table th:nth-child(1),
        #listino-table td:nth-child(1) {
            width: 20px;
            min-width: 20px;
        }

        /* Seconda colonna - codice */
        #listino-table th:nth-child(2),
        #listino-table td:nth-child(2) {
            min-width: 120px; /* Aumentato per evitare troncamento */
            width: auto;
        }

        /* Terza colonna - prima colonna prezzo: stessa larghezza delle altre colonne prezzo (desktop) */
        #listino-table th:nth-child(3),
        #listino-table td:nth-child(3) {
            min-width: 150px;
            width: 150px;
            max-width: 150px;
        }

        /* Contenitore della tabella */
        #listino-content .table-container {
            overflow-x: auto !important; /* Forza lo scrolling orizzontale */
            overflow-y: auto;
            height: calc(100vh - 150px);
            position: relative;
            width: 100%; /* Assicura che il contenitore occupi tutto lo spazio disponibile */
        }

        /* Stile comune per tutte le celle del listino */
        #listino-table td,
        #listino-table th {
            white-space: nowrap;
            overflow: visible; /* Cambiato da hidden a visible */
            padding: 5px 8px;
            text-align: left;
        }

        /* Modifica il contenitore della tabella per permettere lo scrolling orizzontale */
        .table-container {
            overflow-x: auto; /* Aggiunge scrolling orizzontale */
            overflow-y: auto;
            height: calc(100vh - 150px);
            position: relative;
        }

        /* Assicurati che le celle mantengano il loro contenuto */
        #listino-table td,
        #listino-table th {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 5px 8px;
        }

        /* Stile comune per tutte le tabelle */
        #qes-table, #allarmi-table, #listino-table {
            font-size: 0.9em; /* Riduce la dimensione del testo */
        }

        /* Riduci anche il testo negli header delle tabelle */
        #qes-table th, #allarmi-table th, #listino-table th {
            font-family: 'Inter', 'Roboto', sans-serif;
            font-weight: 600; /* Mantiene la leggibilità dell'header */
        }

        /* Aggiusta il padding delle celle per il testo più piccolo */
        #qes-table td, #allarmi-table td, #listino-table td,
        #qes-table th, #allarmi-table th, #listino-table th {
            padding: 4px 6px; /* Riduce leggermente il padding */
        }

        /* Aggiorna il media query per schermi piccoli */
        @media screen and (max-width: 768px) {
            .header {
                height: 40px;
                padding: 5px;
            }

            .header img[alt="Icona"] {
                width: 30px;
            }

            .header h1 {
                font-size: 1.1em;
                margin: 0 5px;
            }

            .search-input {
                height: 18px;
                font-size: 12px;
                padding: 4px;
            }

            .record-counter {
                font-size: 12px;
                gap: 5px;
            }

            /* Nascondi elementi non necessari su mobile */
            .header div[style*="font-size: 12px"],
            .buttons-container {
                display: none;
            }

            /* Aggiusta il margine superiore del contenuto */
            .content {
                margin-top: 50px;
            }
        }

        /* Modifica lo stile del titolo nell'header */
        .header h1 {
            font-family: 'Inter', 'Roboto', sans-serif;
            font-size: 0.85em; /* Ridotto da 1em a 0.85em */
            font-weight: 500;
            margin-left: 8px;
        }

        /* Mantieni il titolo ancora più piccolo su mobile */
        @media screen and (max-width: 768px) {
            .header h1 {
                font-size: 0.75em; /* Ridotto da 0.9em a 0.75em */
                margin-left: 5px;
            }
        }

        /* Stili per i pulsanti e i dropdown */
        .buttons-container {
            display: flex;
            align-items: center;
            margin-left: 10px;
        }

        .action-buttons {
            display: none;
            position: absolute;
            right: 0;
            top: 100%;
            background-color: #242d40;
            padding: 5px;
            border-radius: 4px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        .action-buttons.visible {
            display: block;
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

        .dropdown-content.show {
            display: block;
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }

        .dropdown-btn {
            color: white;
            padding: 5px 10px;
            margin: 2px;
        }

        /* Stili per i dropdown nei header delle tabelle */
        .th-content {
            display: flex;
            flex-direction: column;
            padding: 4px;
            min-height: 45px; /* Spazio fisso per il dropdown */
        }

        .th-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 4px;
        }

        .filter-container {
            width: 100%;
            display: none; /* Nascosto di default */
            margin-top: 4px;
        }

        .filter-container.show {
            display: block;
        }

        .filter-icon {
            color: #666;
            font-size: 1.2em;
            cursor: pointer;
            padding: 2px;
            transition: color 0.2s;
        }

        .filter-icon:hover {
            color: #242d40;
        }

        .filter-icon.active {
            color: #242d40;
        }

        .table-fixed .filter {
            width: 100%;
            min-width: 60px;
            padding: 2px 4px;
            margin: 0;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 0.9em;
        }

        @media screen and (max-width: 768px) {
            .th-content {
                min-height: 40px;
                padding: 2px;
            }
        }

        /* Stili per il menu delle azioni */
        .action-buttons {
            display: none;
            position: absolute;
            right: 0;
            top: 100%;
            background-color: #ffffff;
            padding: 12px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 1000;
            min-width: 280px;
            border: 1px solid rgba(0,0,0,0.1);
        }

        .action-buttons.visible {
            display: block;
        }

        .action-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }

        .action-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 12px 8px;
            cursor: pointer;
            border-radius: 6px;
            transition: all 0.2s ease;
            color: #333;
        }

        .action-item:hover {
            background-color: #f5f7fa;
            transform: translateY(-1px);
        }

        .action-item i {
            font-size: 1.5em;
            margin-bottom: 8px;
            color: #242d40;
        }

        .action-item span {
            font-size: 0.85em;
            text-align: center;
            color: #666;
        }

        /* Stili per mobile */
        @media screen and (max-width: 768px) {
            .action-buttons {
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                top: auto;
                border-radius: 12px 12px 0 0;
                padding: 16px;
                min-width: 100%;
            }

            .action-grid {
                grid-template-columns: repeat(5, 1fr);
                gap: 12px;
            }

            .action-item {
                padding: 8px;
            }

            .action-item i {
                font-size: 1.3em;
                margin-bottom: 6px;
            }

            .action-item span {
                font-size: 0.75em;
            }
        }

        /* Aggiungi un overlay scuro quando il menu è aperto su mobile */
        .menu-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
            z-index: 999;
        }

        .menu-overlay.visible {
            display: block;
        }

        /* Stile per le righe con ultima colonna = 1 */
        .highlight-row {
            background-color: rgba(74, 92, 130, 0.1) !important;  /* Color e coerente con il tema, ma più leggero */
            border-left: 3px solid #4a5c82 !important;  /* Indicatore visivo sul bordo sinistro */
        }

        /* Mantieni l'hover anche sulle righe evidenziate */
        .highlight-row:hover {
            background-color: rgba(74, 92, 130, 0.2) !important;
        }

        /* Mantieni lo stile anche quando la riga è selezionata */
        .highlight-row.selected {
            background-color: #4a5c82 !important;
            color: white !important;
        }
        #floating-calc-button {
            position: fixed;
            bottom: 430px;
            right: 0;
            z-index: 1000;
        }
        #floating-calc-button .btn {
            width: 50px;
            height: 50px;
            border-radius: 8px 0 0 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
            background-color: #4a91e2CC; /* Reso meno trasparente */
            border: none;
            padding-right: 15px;
            box-sizing: border-box; /* Assicura che padding e bordi siano inclusi nella larghezza */
        }

        #floating-calc-button .btn:hover {
            width: 60px;
            background-color: #4a90e2;
        }
        
        /* Nuovo pulsante per l'euro */
        #floating-euro-button {
            position: fixed;
            bottom: 370px; /* 600px - 50px = 550px */
            right: 0;
            z-index: 1000;
        }
        #floating-euro-button .btn {
            width: 50px;
            height: 50px;
            border-radius: 8px 0 0 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
            background-color: #4a91e2CC; /* Reso meno trasparente */
            border: none;
            padding-right: 15px;
            box-sizing: border-box; /* Assicura che padding e bordi siano inclusi nella larghezza */
        }

        #floating-euro-button .btn:hover {
            width: 60px;
            background-color: #4a90e2;
        }

        #floating-action-button {
            position: fixed;
            bottom: 80px;
            right: 40px;
            z-index: 1000;
        }

        #floating-action-button .btn {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
            background-color: #4a90e2;
            border: none;
        }

        #floating-action-button .btn:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 12px rgba(0,0,0,0.3);
            background-color: #357abd;
        }

        #floating-action-button .btn i {
            font-size: 24px;
            color: white;
        }

        .product-row.selected {
            background-color: rgba(0, 123, 255, 0.1);
        }

        .floating-menu {
            position: absolute;
            bottom: 60px;
            right: 60px;  /* Modificato da 0 a 60px per spostarlo a sinistra */
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 3px 12px rgba(0,0,0,0.15);
            width: 250px;
            z-index: 1000;
            display: none;
            font-size: 0.9em;
            border: 1px solid rgba(0,0,0,0.1);
        }

        .floating-menu-title {
            padding: 12px 16px;
            border-bottom: 1px solid #e0e0e0;
            font-weight: 500;
            color: #242d40;
            border-radius: 12px 12px 0 0;
            background-color: #f8f9fa;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 0.85em;
        }

        .floating-menu-item {
            padding: 10px 16px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 0.85em;
            border-bottom: 1px solid #f0f0f0;
        }

        .floating-menu-item:last-child {
            border-bottom: none;
            border-radius: 0 0 12px 12px;
        }

        .floating-menu-item:hover {
            background-color: #f8f9fa;
            padding-left: 20px;
        }

        /* Modifica gli stili dei tab */
        .storage-tabs {
            display: flex;
            flex-direction: column; /* Cambiato da row a column */
            gap: 8px; /* Ridotto il gap */
            margin-bottom: 20px;
            width: 110px; /* Larghezza fissa più piccola */
        }

        .storage-tab {
            padding: 8px 10px;
            border: none;
            border-radius: 6px;
            background-color: #e0e0e0; /* Cambiato da #f0f0f0 a un grigio più scuro */
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
            white-space: normal;
            text-align: center;
            line-height: 1.2;
            min-height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8em;
            color: #333; /* Aggiunto colore del testo più scuro per maggior contrasto */
        }

        .storage-tab.active {
            background-color: #4a90e2 !important; /* Colore blu corrispondente al pulsante Qes nel footer */
            color: white !important;
            opacity: 1 !important;
            font-weight: bold !important;
            border-bottom: 1px solid transparent !important;
        }

        .storage-tab:hover {
            background-color: #d0d0d0; /* Aggiunto effetto hover leggermente più scuro */
        }

        /* Modifica il responsive per mobile */
        @media screen and (max-width: 768px) {
            .storage-tabs {
                width: 100%;
                flex-direction: row; /* Torna orizzontale su mobile */
            }

            .storage-tab {
                flex: 1;
                min-width: 120px;
                font-size: 0.75em;
            }
        }

        .storage-content {
            display: none;
        }

        .storage-content.active {
            display: block;
        }

        .storage-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }

        .storage-table th,
        .storage-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }

        .storage-table th {
            background-color: #f8f9fa;
            font-weight: 600;
        }

        .storage-table tr:hover {
            background-color: #f8f9fa;
        }

        /* Stili per il modal dello storico */
        #storage-history-modal .modal-content {
            width: 90%;
            max-width: 1200px;
            font-size: 0.9em; /* Stesso font-size del dropdown */
        }

        #storage-history-modal .modal-header {
            padding: 12px 16px;
            border-bottom: 1px solid #e0e0e0;
        }

        #storage-history-modal .modal-header h2 {
            font-size: 1em;
            font-weight: 500;
            margin: 0;
            color: #242d40;
        }

        #storage-history-modal .modal-body {
            padding: 16px;
        }

        .storage-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
            font-size: 0.85em; /* Stesso font-size degli item del dropdown */
        }

        .storage-table th {
            background-color: #f8f9fa;
            font-weight: 500;
            padding: 10px 12px;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
        }

        .storage-table td {
            padding: 8px 12px;
            border-bottom: 1px solid #f0f0f0;
        }

        /* Responsive per mobile */
        @media screen and (max-width: 768px) {
            #storage-history-modal .modal-content {
                width: 95%;
                margin: 10px auto;
                max-height: 90vh;
                overflow-y: auto;
            }

            #storage-history-modal .modal-header {
                padding: 10px 12px;
            }

            #storage-history-modal .modal-body {
                padding: 12px;
            }

            .storage-tabs {
                flex-wrap: wrap;
            }

            .storage-tab {
                flex: 1;
                min-width: 140px;
                padding: 8px 12px;
                font-size: 0.85em;
            }

            .storage-table {
                font-size: 0.8em;
            }

            .storage-table th,
            .storage-table td {
                padding: 6px 8px;
            }

            /* Gestione scroll orizzontale su mobile */
            .storage-content {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            .storage-table {
                min-width: 500px; /* Assicura che la tabella non si comprima troppo */
            }
        }

        /* Aggiungi questi stili */
        .storage-table .action-icons {
            display: flex;
            gap: 8px;
            align-items: center;
            justify-content: flex-end;
        }

        .storage-table .action-icon {
            cursor: pointer;
            padding: 4px;
            color: #666;
            transition: all 0.2s ease;
        }

        .storage-table .action-icon:hover {
            transform: scale(1.1);
        }

        .storage-table .action-icon.delete {
            color: #dc3545;
        }

        .storage-table .action-icon.plus {
            color: #28a745;
        }

        .storage-table .action-icon.minus {
            color: #ffc107;
        }

        .toast-notification {
            display: none;
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #4a90e2;
            color: white;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 0.9em;
            z-index: 2000;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .toast-notification.show {
            display: block;
            opacity: 1;
        }

        @media screen and (max-width: 768px) {
            .toast-notification {
                width: 90%;
                text-align: center;
                padding: 10px 16px;
            }
        }

        /* Aggiungi questi stili */
        .tab-container {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 20px;
        }

        .storage-tabs {
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 110px;
        }

        .tab-actions {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding-top: 8px;
        }

        .tab-action-button {
            padding: 6px;
            border: none;
            border-radius: 4px;
            background-color: #f0f0f0;
            cursor: pointer;
            color: #666;
            transition: all 0.2s ease;
        }

        .tab-action-button:hover {
            transform: scale(1.1);
        }

        .tab-action-button.share {
            color: #4a90e2;
        }

        .tab-action-button.delete {
            color: #dc3545;
        }

        /* Modifica il responsive per mobile */
        @media screen and (max-width: 768px) {
            .tab-container {
                flex-direction: column;
            }
            
            .tab-actions {
                flex-direction: row;
                justify-content: center;
            }
        }

        .table-actions {
            display: inline-flex;
            gap: 8px;
            margin-left: 10px;
            align-items: center;
        }

        .table-actions .action-icon {
            cursor: pointer;
            font-size: 0.9em;
            padding: 4px;
            transition: all 0.2s ease;
        }

        .table-actions .action-icon.share {
            color: #4a90e2;
        }

        .table-actions .action-icon.delete {
            color: #dc3545;
        }

        .table-actions .action-icon:hover {
            transform: scale(1.1);
        }

        .storage-table th {
            white-space: nowrap;
            position: relative;  /* Cambiato da display: flex */
            padding-right: 80px !important; /* Spazio per le icone */
        }

        .storage-table th .table-actions {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
        }

        /* Stili per il modal della chiamata */
        .call-section {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            background-color: #f8f9fa;
        }

        .call-section h3 {
            margin-top: 0;
            margin-bottom: 15px;
            color: #242d40;
            font-size: 1.1em;
        }

        .input-group {
            display: flex;
            gap: 15px;
            align-items: center;
            margin-bottom: 15px;
        }

        .input-group label {
            min-width: 100px;
        }

        .input-group input {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 100px;
        }

        .parts-row {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            gap: 8px;
        }

        .parts-row input {
            padding: 4px 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .parts-row input[type="text"] {
            flex: 2;
        }

        .parts-row input[type="number"] {
            flex: 1;
        }

        .parts-row .remove-part {
            color: #e74c3c;
            cursor: pointer;
        }

        .add-part-btn {
            background-color: #28a745;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            margin-bottom: 15px;
        }

        .totals {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #e0e0e0;
        }

        .totals p {
            margin: 5px 0;
            font-size: 0.9em;
        }

        .total-section {
            background-color: #e9ecef;
            font-weight: bold;
        }

        /* Aggiungi questi stili nella sezione degli stili esistente */
        .input-group select {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 200px; /* Più largo per contenere il testo delle tariffe */
            background-color: white;
            cursor: pointer;
        }

        .input-group select:hover {
            border-color: #4a90e2;
        }

        .input-group select:focus {
            outline: none;
            border-color: #4a90e2;
            box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
        }

        /* Stili per le righe della manodopera */
        .labor-row {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
            align-items: center;
        }

        .labor-row select {
            flex: 2;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: white;
        }

        .add-labor-btn {
            background-color: #28a745;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            margin-bottom: 15px;
        }

        .remove-labor {
            color: #dc3545;
            cursor: pointer;
            padding: 5px;
        }

        /* Stili per l'header del modal chiamata */
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .modal-actions .action-icon {
            cursor: pointer;
            font-size: 1.2em;
            padding: 5px;
            transition: all 0.2s ease;
        }

        .modal-actions .action-icon.share {
            color: #4a90e2;
        }

        .modal-actions .action-icon.delete {
            color: #dc3545;
        }

        .modal-actions .action-icon:hover {
            transform: scale(1.1);
        }

        /* Stili per il dropdown utente */
        .user-dropdown {
            position: absolute;
            top: 35px;
            right: 400px; /* Posizionato sotto l'icona utente */
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            z-index: 1001;
            min-width: 150px;
        }
        
        .user-dropdown a {
            display: block;
            padding: 10px 15px;
            color: #333;
            text-decoration: none;
            transition: background-color 0.2s;
        }
        
        .user-dropdown a:hover {
            background-color: #f5f5f5;
        }
        
        /* Rimuovi completamente la freccia */
        .user-dropdown::before {
            display: none; /* Nasconde la freccia */
        }
        
        /* Stile per dispositivi mobili */
        @media screen and (max-width: 768px) {
            .user-dropdown {
                top: 40px;
                right: 50px; /* Regolato per dispositivi mobili */
            }
            
            .user-dropdown a {
                padding: 12px 15px;
                font-size: 16px;
            }
        }

        /* Aggiungi questo codice CSS nella sezione degli stili, dopo gli stili del floating-action-button */
        #call-notification {
            position: fixed;
            bottom: 250px; /* 500px - 50px = 450px */
            right: 0;
            z-index: 1000;
            opacity: 0; /* Inizialmente nascosto */
            transition: opacity 0.3s ease, transform 0.3s ease;
            transform: scale(0.8);
            pointer-events: auto;
            cursor: pointer;
        }
        
        #call-notification.visible {
            opacity: 1;
            transform: scale(1);
        }
        
        #call-notification .notification-btn {
            width: 50px;
            height: 50px;
            border-radius: 8px 0 0 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
            background-color: #e74c3cCC; /* Reso meno trasparente */
            border: none;
            padding-right: 15px;
            box-sizing: border-box; /* Assicura che padding e bordi siano inclusi nella larghezza */
        }
        
        #call-notification .notification-btn:hover {
            width: 60px;
            background-color: #e74c3c;
        }
        
        #call-notification .notification-btn i {
            color: white;
            font-size: 30px;
        }

        #call-notification .notification-btn span {
            color: white;
        }

        /* Stile personalizzato per il toast della chiamata */
        .toast-notification.call-toast {
            background-color: #e74c3c;
            color: white;
            border-left: 4px solid #c0392b;
            opacity: 0.9;
        }
        
        .toast-notification.call-toast.show {
            opacity: 1;
        }

        /* Aggiungi questo stile CSS dopo gli stili del call-notification */
        #storage-notification {
            position: fixed;
            bottom: 310px; /* 550px - 50px = 500px */
            right: 0;
            z-index: 1000;
            opacity: 0; /* Inizialmente nascosto */
            transition: opacity 0.3s ease, transform 0.3s ease;
            transform: scale(0.8);
            pointer-events: auto;
            cursor: pointer;
        }
        
        #storage-notification.visible {
            opacity: 1;
            transform: scale(1);
        }
        
        #storage-notification .notification-btn {
            width: 50px;
            height: 50px;
            border-radius: 8px 0 0 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
            background-color: #e74c3cCC; /* Reso meno trasparente */
            border: none;
            padding-right: 15px;
            box-sizing: border-box; /* Assicura che padding e bordi siano inclusi nella larghezza */
        }
        
        #storage-notification .notification-btn:hover {
            width: 60px;
            background-color: #e74c3c; /* Rosso pieno come il call-notification */
        }
        
        #storage-notification .notification-btn i {
            color: white;
            font-size: 30px;
        }

        #storage-notification .notification-btn span {
            color: white;
        }

        /* Stile personalizzato per il toast degli scarichi/ripristini */
        .toast-notification.storage-toast {
            background-color: #3498db;
            color: white;
            border-left: 4px solid #2980b9;
            opacity: 0.9;
        }
        
        .toast-notification.storage-toast.show {
            opacity: 1;
        }

        /* Aggiungi o modifica questi stili CSS */
        .parts-row .remove-part,
        .labor-row .remove-labor {
            color: #dc3545;
            cursor: pointer;
            padding: 5px;
            background: transparent;
            border: none;
            font-size: 1em;
        }

        .parts-row .remove-part:hover,
        .labor-row .remove-labor:hover {
            color: #bd2130;
        }

        .card-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 16px;
            padding: 10px;
        }

        .storage-card {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: 15px;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            position: relative;
        }

        .storage-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }

        .card-header {
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card-date {
            font-weight: bold;
            color: #666;
            font-size: 0.9em;
        }

        .card-codice {
            background-color: #f8f9fa;
            border-radius: 4px;
            padding: 3px 8px;
            font-family: monospace;
            color: #333;
        }

        .card-descrizione {
            margin: 10px 0;
            font-size: 1.1em;
            color: #333;
            word-break: break-word;
            max-width: 70%; /* Regola questa percentuale per controllare quanto testo viene mostrato */
        }

        .card-quantita {
            font-weight: bold;
            font-size: 1.2em;
            color: #28a745;
            margin-top: 8px;
        }

        .card-actions {
            position: absolute;
            top: 10px;
            right: 10px;
        }

        /* Modifica lo stile del pulsante cestino per renderlo più piccolo */
        .card-delete-btn {
            background: none;
            border: none;
            color: #dc3545;
            cursor: pointer;
            padding: 3px; /* Ridotto da 5px a 3px */
            font-size: 0.85em; /* Ridotto da 1.1em a 0.85em */
        }
        
        /* Aggiustamento per l'icona all'interno del pulsante */
        .card-delete-btn i {
            font-size: 0.95em;
        }
        
        /* Mantieni la reattività al passaggio del mouse */
        .card-delete-btn:hover {
            color: #c82333;
        }

        .empty-message {
            text-align: center;
            padding: 30px;
            color: #6c757d;
            font-style: italic;
        }

        /* Aggiungi questi stili per la funzionalità di minimizzazione */
        .card-toggle-btn {
            background: none;
            border: none;
            color: #6c757d;
            cursor: pointer;
            padding: 5px;
            font-size: 1em;
            position: absolute;
            top: 10px;
            right: 40px; /* Posizionato accanto al pulsante elimina */
        }

        .card-toggle-btn:hover {
            color: #495057;
        }

        .card-toggle-btn i {
            transition: transform 0.3s ease;
        }

        .storage-card.minimized .card-toggle-btn i {
            transform: rotate(-180deg);
        }

        .storage-card .card-content {
            transition: max-height 0.3s ease, opacity 0.2s ease;
            max-height: 500px;
            overflow: hidden;
            opacity: 1;
        }

        .storage-card.minimized .card-content {
            max-height: 0;
            opacity: 0;
            margin: 0;
        }

        /* Modifica per la card minimizzata */
        .storage-card.minimized {
            padding-bottom: 5px;
        }

        .storage-card.minimized .card-header {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        /* Modifiche al layout delle card */
        .card-header {
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .card-info {
            display: flex;
            align-items: center;
            flex: 1;
            overflow: hidden;
        }

        .card-codice {
            background-color: #f8f9fa;
            border-radius: 4px;
            padding: 3px 8px;
            font-family: monospace;
            color: #333;
            margin-right: 10px;
            white-space: nowrap;
        }

        .card-descrizione {
            font-size: 0.95em;
            color: #333;
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 70%; /* Regola questa percentuale per controllare quanto testo viene mostrato */
        }

        .card-quantity-controls {
            display: flex;
            align-items: center;
            margin-left: 5px;
        }

        .card-quantity-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 2px 5px;
            font-size: 1em;
        }

        .card-minus-btn {
            color: #ffc107;
        }

        .card-plus-btn {
            color: #28a745;
        }

        .card-quantita {
            font-weight: bold;
            font-size: 1.1em;
            margin: 0 5px;
        }

        .card-content {
            padding-top: 5px;
        }

        .card-date {
            color: #666;
            font-size: 0.9em;
            display: block;
            margin-bottom: 5px;
        }

        /* Aggiusta le posizioni dei pulsanti di minimizzazione ed eliminazione */
        .card-actions {
            position: absolute;
            top: 10px;
            right: 10px;
        }

        /* Modifica al layout delle card con 2 righe fisse */
        .storage-card {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 15px 15px 12px 15px;
        }

        /* Prima riga fissa: Codice e descrizione */
        .card-row-1 {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding-right: 60px; /* Spazio per i pulsanti */
        }

        /* Seconda riga fissa: Controlli quantità */
        .card-row-2 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 8px;
            border-bottom: 1px solid #eee;
        }

        /* Icona per la quantità */
        .quantity-label {
            display: flex;
            align-items: center;
            gap: 5px;
            color: #6c757d;
            font-size: 0.9em;
        }

        /* Parte minimizzabile */
        .card-collapsible {
            transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.2s ease;
            max-height: 500px;
            overflow: hidden;
            opacity: 1;
            margin-top: 8px;
        }

        .storage-card.minimized .card-collapsible {
            max-height: 0;
            opacity: 0;
            margin: 0;
        }

        /* Aggiornamento delle classi esistenti */
        .card-codice {
            background-color: #f8f9fa;
            border-radius: 4px;
            padding: 4px 8px;
            font-family: monospace;
            color: #333;
            font-weight: 500;
        }

        .card-descrizione {
            font-size: 0.95em;
            color: #333;
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .card-quantity-controls {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .card-quantita {
            font-weight: bold;
            font-size: 1.1em;
            color: #28a745;
        }

        .card-info-rows {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .card-info-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .info-label {
            color: #6c757d;
            font-size: 0.85em;
            min-width: 75px;
        }

        .info-value {
            font-size: 0.9em;
        }

        /* Modifica per rendere le card minimizzate più compatte */
        .storage-card.minimized {
            padding: 8px 15px 8px 15px; /* Ridotto padding verticale */
            gap: 5px; /* Ridotto spazio tra elementi */
        }
        
        /* Riduci l'altezza della prima riga nella versione minimizzata */
        .storage-card.minimized .card-row-1 {
            padding-bottom: 0;
            margin-bottom: 0;
        }
        
        /* Riduci lo spazio nella seconda riga per la versione minimizzata */
        .storage-card.minimized .card-row-2 {
            padding-bottom: 0;
            border-bottom: none;
        }
        
        /* Migliora la separazione visiva tra le card */
        .card-container {
            gap: 10px; /* Ridotto per avere più card visibili */
        }

        /* Modifica al comportamento della griglia per evitare che l'espansione di una card influenzi le altre */
        .card-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 10px;
            padding: 5px;
            grid-auto-flow: row;
            grid-auto-rows: min-content; /* Forza ogni elemento a prendere solo lo spazio necessario */
        }
        
        /* Assicura che ogni card sia un contenitore isolato dagli altri */
        .storage-card {
            height: auto;
            align-self: start; /* Mantiene il card nella sua posizione di partenza */
            contain: layout;   /* Isola il layout della card */
        }
        
        /* Per dispositivi mobili, riduci le dimensioni delle icone */
        @media (max-width: 768px) {
            .card-delete-btn, 
            .card-toggle-btn, 
            .card-quantity-btn {
                padding: 3px;
                font-size: 0.9em;
            }
            
            .card-delete-btn i, 
            .card-toggle-btn i, 
            .card-quantity-btn i {
                font-size: 0.9em;
            }
            
            .card-actions {
                right: 5px;
                top: 5px;
            }
            
            .card-toggle-btn {
                right: 30px; /* Avvicina i pulsanti su mobile */
            }
            
            /* Adatta il padding delle card su mobile */
            .storage-card {
                padding: 12px 10px 10px 10px;
            }
            
            /* Ottimizza lo spazio per la prima riga */
            .card-row-1 {
                padding-right: 50px; /* Riduce lo spazio riservato ai pulsanti */
            }
        }
        
        /* Media query per dispositivi molto piccoli */
        @media (max-width: 360px) {
            .card-container {
                grid-template-columns: 1fr; /* Una sola colonna */
            }
            
            .card-delete-btn, 
            .card-toggle-btn, 
            .card-quantity-btn {
                padding: 2px;
                font-size: 0.85em;
            }
        }

        /* Modifiche al layout delle card per il nuovo design */
        .storage-card {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 12px;
            position: relative;
        }
        
        /* Prima riga: data e cestino */
        .card-row-1 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eee;
            padding-bottom: 8px;
        }
        
        /* Stile per la data */
        .card-date {
            font-size: 0.85em;
            color: #666;
        }
        
        /* Seconda riga: codice e descrizione */
        .card-row-2 {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 5px 0;
        }
        
        /* Stile per il codice */
        .card-codice {
            background-color: #f8f9fa;
            border-radius: 4px;
            padding: 3px 6px;
            font-family: monospace;
            font-weight: 500;
            font-size: 0.9em;
            white-space: nowrap;
        }
        
        /* Stile per la descrizione */
        .card-descrizione {
            font-size: 0.95em;
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        /* Terza riga: controlli quantità */
        .card-row-3 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 5px;
        }
        
        /* Stile per il controllo della quantità */
        .card-quantity-controls {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        /* Pulsanti + e - */
        .card-quantity-btn {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .card-minus-btn {
            color: white;
            background-color: #ffc107;
        }
        
        .card-minus-btn:hover {
            background-color: #e0a800;
        }
        
        .card-plus-btn {
            color: white;
            background-color: #28a745;
        }
        
        .card-plus-btn:hover {
            background-color: #218838;
        }
        
        /* Valore della quantità */
        .card-quantita {
            font-weight: bold;
            min-width: 30px;
            text-align: center;
        }
        
        /* Stile per il cestino */
        .card-delete-btn {
            background: none;
            border: none;
            color: #dc3545;
            cursor: pointer;
            font-size: 1.1em;
            padding: 5px;
        }
        
        /* Ottimizzazioni per mobile */
        @media (max-width: 768px) {
            .card-delete-btn {
                font-size: 1em;
                padding: 3px;
            }
            
            .card-quantity-btn {
                width: 24px;
                height: 24px;
            }
        }

        /* Aggiungiamo questi stili CSS per il nuovo layout delle card */
        .storage-card {
            display: flex;
            flex-direction: column;
            gap: 10px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: 12px;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            position: relative;
        }

        .storage-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }

        /* Prima riga: data e cestino */
        .card-row-1 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eee;
            padding-bottom: 8px;
        }

        .card-date {
            font-size: 0.85em;
            color: #666;
        }

        .card-delete-btn {
            background: none;
            border: none;
            color: #dc3545;
            cursor: pointer;
            font-size: 1.1em;
            padding: 5px;
        }

        /* Seconda riga: codice e descrizione */
        .card-row-2 {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 5px 0;
            border-bottom: 1px solid #eee;
            padding-bottom: 8px;
        }

        .card-codice {
            background-color: #f8f9fa;
            border-radius: 4px;
            padding: 3px 6px;
            font-family: monospace;
            color: #333;
            font-weight: 500;
            font-size: 0.9em;
            white-space: nowrap;
        }

        .card-descrizione {
            font-size: 0.95em;
            color: #333;
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Terza riga: controlli quantità */
        .card-row-3 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 5px;
        }

        .quantity-label {
            display: flex;
            align-items: center;
            gap: 5px;
            color: #6c757d;
            font-size: 0.9em;
        }

        .card-quantity-controls {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .card-quantity-btn {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color 0.2s;
            border: none;
        }

        .card-minus-btn {
            color: white;
            background-color: #ffc107;
        }

        .card-minus-btn:hover {
            background-color: #e0a800;
        }

        .card-plus-btn {
            color: white;
            background-color: #28a745;
        }

        .card-plus-btn:hover {
            background-color: #218838;
        }

        .card-quantita {
            font-weight: bold;
            min-width: 30px;
            text-align: center;
            color: #333;
        }

        /* Ottimizzazioni per mobile */
        @media (max-width: 768px) {
            .card-delete-btn {
                font-size: 1em;
                padding: 3px;
            }
            
            .card-quantity-btn {
                width: 24px;
                height: 24px;
            }
        }

        /* Modifiche agli stili CSS per la seconda riga delle card */
        /* Stile per il codice - uniformato con la descrizione */
        .card-codice {
            background-color: #f8f9fa;
            border-radius: 4px;
            padding: 3px 6px;
            font-family: inherit; /* Usa lo stesso font della card */
            color: #333;
            font-size: 0.95em; /* Stesso size della descrizione */
            white-space: nowrap;
            margin-right: 4px; /* Margine ridotto */
            min-width: fit-content; /* Occupa solo lo spazio necessario */
        }
        
        /* Stile per la descrizione - più spazio */
        .card-descrizione {
            font-size: 0.95em;
            color: #333;
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-left: 0; /* Rimuovi margine a sinistra */
        }
        
        /* Seconda riga: codice e descrizione più vicini */
        .card-row-2 {
            display: flex;
            align-items: center;
            gap: 4px; /* Ridotto da 8px a 4px */
            padding: 4px 0;
            border-bottom: 1px solid #eee;
            padding-bottom: 4px;
        }

        /* Card più compatta */
        .storage-card {
            display: flex;
            flex-direction: column;
            gap: 5px; /* Ridotto da 10px a 5px */
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: 4px 8px; /* Ridotto da 12px a 8px verticalmente */
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            position: relative;
        }

        /* Prima riga: data e cestino */
        .card-row-1 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eee;
            padding-bottom: 4px; /* Ridotto da 8px a 4px */
        }

        /* Seconda riga: codice e descrizione */
        .card-row-2 {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 3px 0; /* Ridotto da 5px a 3px */
            border-bottom: 1px solid #eee;
            padding-bottom: 4px; /* Ridotto da 8px a 4px */
            justify-content: flex-start;
        }

        /* Terza riga: controlli quantità */
        .card-row-3 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 3px; /* Ridotto da 5px a 3px */
        }
        
        /* Riduci lo spazio delle etichette */
        .quantity-label {
            display: flex;
            align-items: center;
            gap: 3px; /* Ridotto da 5px a 3px */
            color: #6c757d;
            font-size: 0.9em;
        }
        
        /* Riduzione dimensioni pulsanti */
        .card-quantity-btn {
            width: 24px; /* Ridotto da 28px a 24px */
            height: 24px; /* Ridotto da 28px a 24px */
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        /* Bordo più evidente per le card */
        .storage-card {
            border: 1px solid #ddd; /* Aggiungi un bordo leggero ma visibile */
            box-shadow: 0 2px 4px rgba(0,0,0,0.08); /* Mantieni l'ombra ma leggermente più sottile */
        }
        
        /* Miglioramento effetto hover con bordo colorato */
        .storage-card:hover {
            border-color: #bbb; /* Bordo più scuro al passaggio del mouse */
            box-shadow: 0 3px 6px rgba(0,0,0,0.12);
        }

        /* Prima riga ancora più compatta */
        .card-row-1 {
            padding-top: 2px; /* Aggiungiamo un padding superiore minimo */
            padding-bottom: 2px; /* Ridotto ulteriormente da 4px a 2px */
            margin-bottom: 2px; /* Ridotto da valori predefiniti */
        }
        
        /* Riduciamo leggermente la dimensione del font della data */
        .card-date {
            font-size: 1em; /* Ridotto da 0.85em a 0.8em */
        }
        
        /* Riduciamo leggermente lo spazio del pulsante cestino */
        .card-delete-btn {
            padding: 2px; /* Ridotto da 3px a 2px */
        }
        
        /* Aggiustiamo il padding generale della card */
        .storage-card {
            padding-top: 2px; /* Riduciamo il padding superiore */
        }

        .floating-menu-checkboxes {
            padding: 8px 12px;
        }

        .checkbox-item {
            display: flex;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .checkbox-item:last-child {
            border-bottom: none;
        }

        .checkbox-item input[type="checkbox"] {
            margin-right: 10px;
        }

        .checkbox-item label {
            flex: 1;
            cursor: pointer;
            font-size: 0.9em;
        }

        .menu-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 12px;
            padding-top: 8px;
            border-top: 1px solid #e0e0e0;
        }

        .menu-confirm-btn {
            background-color: #4a90e2;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 6px 16px;
            font-size: 0.9em;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .menu-confirm-btn:hover {
            background-color: #357abd;
        }

       
        .calculator-content {
            width: 300px !important;
            max-width: 100%;
            margin: 20px auto;
        }

        .calculator {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            background-color: #f8f9fa;
        }

        .calculator-display {
            margin-bottom: 10px;
        }

        .operation-display {
            width: 100%;
            height: 20px;
            padding: 0 10px;
            text-align: right;
            font-size: 14px;
            font-family: 'Roboto', sans-serif;
            color: #666;
            margin-bottom: 5px;
        }

        .calculator-screen {
            width: 100%;
            height: 50px;
            border: 1px solid #ccc;
            background-color: #fff;
            border-radius: 5px;
            padding: 0 10px;
            text-align: right;
            font-size: 24px;
            font-family: 'Roboto', sans-serif;
        }

        .calculator-keys {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 5px;
        }

        .calculator-keys button {
            height: 50px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #fff;
            font-size: 18px;
            cursor: pointer;
            transition: background-color 0.2s;
            color: #333;
            font-weight: 500;
        }

        .calculator-keys button:not(.operator):not(.equal-sign):not(.all-clear):hover {
            background-color: #e9ecef;
            color: #000;
        }

        .calculator-keys .operator,
        .calculator-keys .add-vat,
        .calculator-keys .remove-vat {
            background-color: #4a90e2;
            color: white;
        }

        /* Stile specifico per i pulsanti IVA */
        .calculator-keys .add-vat,
        .calculator-keys .remove-vat {
            font-size: 12px;  /* Riduco la dimensione del font */
        }

        .calculator-keys .operator:hover,
        .calculator-keys .add-vat:hover,
        .calculator-keys .remove-vat:hover {
            background-color: #357abd;
        }

        .calculator-keys .equal-sign {
            background-color: #28a745;
            color: white;
            height: 50px;
        }

        .calculator-keys .equal-sign:hover {
            background-color: #218838;
        }

        .calculator-keys .all-clear {
            background-color: #dc3545;
            color: white;
        }

        .calculator-keys .all-clear:hover {
            background-color: #c82333;
        }

        /* Media query per mobile */
        @media screen and (max-width: 768px) {
            .operation-display {
                height: 18px;
                font-size: 12px;
            }
            
            .calculator-screen {
                height: 45px;
                font-size: 20px;
            }
            
            .calculator-keys button {
                height: 45px;
                font-size: 16px;
            }
        }
       
        /* Stili per le righe degli acconti */
        .downpayment-row {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
            align-items: center;
        }

        .downpayment-row input {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .downpayment-row input[type="text"] {
            flex: 2;
        }

        .downpayment-row input[type="number"] {
            width: 100px;
        }

        .downpayment-row .remove-downpayment {
            color: #dc3545;
            cursor: pointer;
            padding: 5px;
        }

        /* Resto degli stili esistenti */
        .dynamic-toast {
            background-color: #28a745;
            color: white;
        }

        .error-toast {
            background-color: #dc3545;
            color: white;
        }

        .warning-toast {
            background-color: #ffc107;
            color: #343a40;
            font-weight: bold;
        }

        /* Stili per la carta (card) */
        .labor-row,
        .parts-row {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            gap: 10px;
        }

        .labor-row input,
        .parts-row input {
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .labor-row input[type="text"],
        .parts-row input[type="text"] {
            flex: 1;
        }

        .labor-row input[type="number"],
        .parts-row input[type="number"] {
            width: 100px;
        }

        #total-euro {
            font-size: 1.2em; /* Aumenta la dimensione del carattere */
        }
        /* --- AGGIUNTA: input prezzo ricambi chiamata più stretti --- */
        #parts-list .parts-row input[type="number"] {
            width: 60px !important;
            min-width: 50px;
            max-width: 80px;
            text-align: right;
        }
        #parts-list .parts-row input[type="text"] {
            flex: 1 1 0;
            min-width: 0;
        }
        @media (max-width: 768px) {
            #parts-list .parts-row input[type="number"] {
                width: 45px !important;
                min-width: 40px;
                max-width: 60px;
                font-size: 0.95em;
            }
            #parts-list .parts-row input[type="text"] {
                font-size: 0.95em;
            }
        }
        /* --- FINE AGGIUNTA --- */

        /* Scrollbar sottile e moderna solo per la modale di conferma eliminazione */
        #delete-confirm-modal .modal-content {
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: #4a90e2 #f0f0f0;
        }
        #delete-confirm-modal .modal-content::-webkit-scrollbar {
            width: 7px;
            background: #f0f0f0;
            border-radius: 6px;
        }
        #delete-confirm-modal .modal-content::-webkit-scrollbar-thumb {
            background: #4a90e2;
            border-radius: 6px;
        }

        @media (max-width: 600px) {
          #delete-confirm-modal .modal-content::-webkit-scrollbar {
            width: 4px;
          }
        }

        #floating-calc-button, #floating-euro-button, #storage-notification, #call-notification {
            right: 0 !important;
            margin-right: 0 !important;
        }

        #floating-calc-button .btn,
        #floating-euro-button .btn,
        #storage-notification .notification-btn,
        #call-notification .notification-btn {
            margin-right: 0 !important;
        }

        @media screen and (max-width: 768px) {
          #listino-table th:nth-child(n+3),
          #listino-table td:nth-child(n+3) {
            max-width: 80px;
            min-width: 60px;
            text-align: right;
            font-size: 0.95em;
            padding-left: 4px;
            padding-right: 4px;
          }
        }

        @media screen and (max-width: 768px) {
          #listino-table th:nth-child(2),
          #listino-table td:nth-child(2) {
            white-space: normal !important;
            word-break: break-word;
            overflow-wrap: break-word;
            max-width: 120px;
            font-size: 0.95em;
          }
        }