/* Stili per il contenitore principale della riga titolo-pulsante */
.align-row.documents-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-bottom: 20px; */ /* Puoi riattivare questo se vuoi spazio sotto */
}

/* Stili per il titolo della sezione (se necessario, in base al tuo CSS esistente) */
.form-section-title {
    margin-right: auto;
}

/* Stili per il contenitore del pulsante */
.document-upload-button-container {
    margin-left: auto;
}

/* Stili per il pulsante stesso - MODIFICATI PER RIMPICCIOLIRE */
.document-upload-button-container .btn {
    white-space: nowrap;
    padding: 8px 15px; /* Rimpicciolito il padding verticale e orizzontale */
    font-size: 0.9em;  /* Rimpicciolito il font-size */
}

/* Regole per schermi più piccoli (responsive) */
@media (max-width: 768px) {
    .align-row.documents-header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .document-upload-button-container {
        width: 100%;
        margin-left: 0;
        margin-top: 10px;
        text-align: left;
    }

    .document-upload-button-container .btn {
        width: 100%;
        padding: 8px 15px; /* Mantieni la dimensione rimpicciolita anche su mobile */
        font-size: 0.9em;
    }
}
/* --- IL TUO CSS ESISTENTE VA QUI SOPRA --- */

/* Stili per la sezione generale del modulo e i titoli (se non già presenti e allineati) */
/* ... (Mantiene il CSS precedente per label, input, textarea, hr, .align-row, .document-section-title, .document-upload-button-container, .file-upload-info, p:has, h3:has) ... */

/* --- Stili specifici per la tabella dei documenti --- */

/* Contenitore della tabella: Abilita lo scroll orizzontale */
/* Assumo che la tua tabella sia racchiusa in un div, e lo targettiamo con un selettore generico */
/* basato sulla presenza di una tabella con ID 'uploadedDocumentsTable' al suo interno. */
div:has(table#uploadedDocumentsTable) {
    overflow-x: auto; /* Questa proprietà è la chiave per lo scroll orizzontale su overflow */
    -webkit-overflow-scrolling: touch; /* Migliora lo scroll su iOS */
    margin-top: 15px; /* Spazio sopra la tabella */
    border: 1px solid var(--tblr-border-color); /* Bordo per la tabella, coerente con il tema Tabler */
    border-radius: 4px; /* Bordi arrotondati */
    background-color: var(--tblr-bg-surface-tertiary); /* Sfondo leggermente grigio per la tabella */
}

/* Stili generali della tabella */
table#uploadedDocumentsTable { /* Targetta la tabella stessa con il suo ID */
    width: 100%; /* La tabella occupa il 100% della larghezza del suo contenitore */
    border-collapse: collapse; /* Rimuove lo spazio tra i bordi delle celle */
    min-width: 600px; /* **Importante:** Questo assicura che la tabella non si comprima troppo, forzando lo scroll */
}

/* Stili per le intestazioni e le celle della tabella */
table#uploadedDocumentsTable th,
table#uploadedDocumentsTable td {
    border: 1px solid var(--tblr-border-color); /* Bordi delle celle */
    padding: 12px 10px; /* Padding interno */
    text-align: left; /* Allineamento testo a sinistra */
    vertical-align: middle; /* Allineamento verticale al centro */
    white-space: nowrap; /* Impedisce al testo delle intestazioni di andare a capo */
}

/* Stili specifici per le intestazioni (thead) */
table#uploadedDocumentsTable th {
    background-color: var(--tblr-bg-surface-secondary); /* Sfondo più chiaro per le intestazioni */
    font-weight: bold;
    color: var(--tblr-body-color);
}

/* Stili specifici per le celle di dato (tbody) */
table#uploadedDocumentsTable td {
    background-color: var(--tblr-bg-surface); /* Sfondo bianco per le celle di dato */
}

/* Stile per il messaggio "Nessun documento caricato." */
table#uploadedDocumentsTable td[colspan="4"] { /* Targetta la cella che copre 4 colonne */
    text-align: center;
    color: #777; /* Colore più tenue */
    padding: 20px; /* Padding maggiore per il messaggio */
    font-style: italic;
}


/* Stili per i pulsanti all'interno della tabella */
table#uploadedDocumentsTable button {
    padding: 8px 12px;
    margin-right: 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
    white-space: nowrap; /* Impedisce al testo del pulsante di andare a capo */
}

table#uploadedDocumentsTable button.btn-view {
    background-color: var(--tblr-primary);
    color: white;
}

table#uploadedDocumentsTable button.btn-view:hover {
    background-color: var(--tblr-primary-darken);
}

table#uploadedDocumentsTable button.btn-delete {
    background-color: var(--tblr-danger);
    color: white;
}

table#uploadedDocumentsTable button.btn-delete:hover {
    background-color: var(--tblr-danger-darken);
}

/* --- Media Queries per la responsività della tabella --- */
@media (max-width: 768px) {
    /* La regola `min-width: 600px;` sulla tabella e `overflow-x: auto;` sul contenitore
       gestiscono la responsività su schermi piccoli facendo apparire una barra di scorrimento.
       Non sono necessarie modifiche radicali al layout della tabella (come trasformarla in blocchi)
       se preferisci lo scroll orizzontale. */

    /* Riduci il padding e la dimensione del font per ottimizzare lo spazio su schermi piccoli */
    table#uploadedDocumentsTable th,
    table#uploadedDocumentsTable td {
        padding: 8px 6px; /* Padding ridotto */
        font-size: 0.85em; /* Font size leggermente più piccolo */
    }

    table#uploadedDocumentsTable button {
        padding: 6px 10px; /* Pulsanti ancora più piccoli */
        font-size: 0.8em;
        margin-right: 5px;
    }

    table#uploadedDocumentsTable td[colspan="4"] {
        padding: 15px; /* Riduci leggermente il padding del messaggio vuoto */
        font-size: 0.9em;
    }
}


/* *** NUOVI STILI PER I BADGE DI "SITUAZIONE" *** */
.situazione-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    text-transform: capitalize;
    white-space: nowrap;
}

.situazione-badge.bg-green-lighter {
    background-color: #8BC34A; /* Un verde più chiaro e meno saturo (Material Design Light Green 500) */
}

.situazione-badge.bg-blue {
    background-color: #2196F3; /* Blu standard (Material Design Blue 500) */
}

.situazione-badge.bg-yellow {
    background-color: #FFC107; /* Giallo standard (Material Design Amber 500) */
    color: #333; /* Testo più scuro per il giallo per contrasto */
}

.situazione-badge.bg-red { /* NUOVA CLASSE PER IL ROSSO */
    background-color: #F44336; /* Un rosso standard (Material Design Red 500) */
    color: white;
}

/* *** STILE PER IL CODICE UIC (no-wrap) *** */
.no-wrap-uic {
    white-space: nowrap;
}

/* *** AGGIUNTA PER ALLINEARE VERTICALMENTE LA TABELLA PRINCIPALE *** */
#table-list-riparazione th,
#table-list-riparazione td {
    vertical-align: middle;
}

#table-list-riparazione tbody tr.clickable-row {
    cursor: pointer; /* Cambia il cursore in una "manina" */
}

/* Stile al passaggio del mouse (hover) */
#table-list-riparazione tbody tr.clickable-row:hover {
    background-color: #e0e0e0; /* Un grigio più chiaro per evidenziare */
    transition: background-color 0.3s ease; /* Aggiunge una transizione fluida per l'effetto */
}

/* Se hai già classi 'grigio' e 'bianco', assicurati che l'hover le sovrascriva */
#table-list-riparazione tbody tr.grigio.clickable-row:hover,
#table-list-riparazione tbody tr.bianco.clickable-row:hover {
    background-color: #e0e0e0; /* Applica lo stesso hover per tutte le righe cliccabili */
}

/* Stile per le colonne delle note nella tabella */
#table-list-riparazione tbody td.note-column {
    max-width: 200px; /* Imposta una larghezza massima per la colonna (ad esempio 200px) */
    white-space: nowrap; /* Impedisce al testo di andare a capo */
    overflow: hidden; /* Nasconde il testo che supera la larghezza */
    text-overflow: ellipsis; /* Aggiunge i puntini di sospensione (...) al testo troncato */
}

/* Contenitore della tabella: Abilita lo scroll orizzontale */
div:has(table#uploadedDocumentsTable) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 15px;
    border: 1px solid var(--tblr-border-color);
    border-radius: 4px;
    background-color: var(--tblr-bg-surface-tertiary);
}

/* Stili generali della tabella */
table#uploadedDocumentsTable {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

/* Stili per le intestazioni e le celle della tabella */
table#uploadedDocumentsTable th,
table#uploadedDocumentsTable td {
    border: 1px solid var(--tblr-border-color);
    padding: 12px 10px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

/* Stili specifici per le intestazioni (thead) */
table#uploadedDocumentsTable th {
    background-color: var(--tblr-bg-surface-secondary);
    font-weight: bold;
    color: var(--tblr-body-color);
}

/* Stili specifici per le celle di dato (tbody) */
table#uploadedDocumentsTable td {
    background-color: var(--tblr-bg-surface);
}

/* Stile per il messaggio "Nessun documento caricato." */
table#uploadedDocumentsTable td[colspan="4"] {
    text-align: center;
    color: #777;
    padding: 20px;
    font-style: italic;
}

/* Stili per i pulsanti all'interno della tabella */
table#uploadedDocumentsTable button {
    padding: 8px 12px;
    margin-right: 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

table#uploadedDocumentsTable button.btn-view {
    background-color: var(--tblr-primary);
    color: white;
}

table#uploadedDocumentsTable button.btn-view:hover {
    background-color: var(--tblr-primary-darken);
}

table#uploadedDocumentsTable button.btn-delete {
    background-color: var(--tblr-danger);
    color: white;
}

table#uploadedDocumentsTable button.btn-delete:hover {
    background-color: var(--tblr-danger-darken);
}

/* --- Media Queries per la responsività della tabella --- */
@media (max-width: 768px) {
    table#uploadedDocumentsTable th,
    table#uploadedDocumentsTable td {
        padding: 8px 6px;
        font-size: 0.85em;
    }

    table#uploadedDocumentsTable button {
        padding: 6px 10px;
        font-size: 0.8em;
        margin-right: 5px;
    }

    table#uploadedDocumentsTable td[colspan="4"] {
        padding: 15px;
        font-size: 0.9em;
    }
}


/* *** NUOVI STILI PER I BADGE DI "SITUAZIONE" *** */
.situazione-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    color: white; /* Default white, override if needed */
    font-weight: bold;
    text-transform: capitalize;
    white-space: nowrap;
}

/* --- Classi Modificate/Aggiunte per i Colori Richiesti --- */

.situazione-badge.bg-green-lighter { /* Per "Completato" */
    background-color: #4CAF50; /* Un verde più standard (Material Design Green 500) */
}

.situazione-badge.bg-blue { /* Per "Arrivato" */
    background-color: #2196F3; /* Blu standard (Material Design Blue 500) */
}

.situazione-badge.bg-dark { /* NUOVA CLASSE per "Uscito" (Nero) */
    background-color: #343A40; /* Nero/Grigio scuro simile a Bootstrap .bg-dark */
    color: white;
}

.situazione-badge.bg-red { /* Per "Cancellato" */
    background-color: #F44336; /* Rosso standard (Material Design Red 500) */
}

.situazione-badge.bg-orange { /* Per "Tutti gli altri" (Arancione) */
    background-color: #FF9800; /* Arancione standard (Material Design Orange 500) */
    color: white; /* Testo bianco per buon contrasto */
}


/* *** STILE PER IL CODICE UIC (no-wrap) *** */
.no-wrap-uic {
    white-space: nowrap;
}

/* *** AGGIUNTA PER ALLINEARE VERTICALMENTE LA TABELLA PRINCIPALE *** */
#table-list-riparazione th,
#table-list-riparazione td {
    vertical-align: middle;
}

#table-list-riparazione tbody tr.clickable-row {
    cursor: pointer;
}

/* Stile al passaggio del mouse (hover) */
#table-list-riparazione tbody tr.clickable-row:hover {
    background-color: #e0e0e0;
    transition: background-color 0.3s ease;
}

#table-list-riparazione tbody tr.grigio.clickable-row:hover,
#table-list-riparazione tbody tr.bianco.clickable-row:hover {
    background-color: #e0e0e0;
}