/*
 * tvc_service_styles.css
 * Stili specifici per la pagina del servizio TVC (tvc_service.php)
 *
 * Questo file è pensato per sovrascrivere o integrare gli stili globali
 * definiti in style.css, applicandosi solo a questa specifica pagina.
 */

/* --- Layout Generale della Pagina TVC --- */

.main-content-wrapper {
    max-width: 97.22rem; /* 1400px -> ~97.22rem */
    width: 95%; /* Lascia un piccolo margine sui lati */
    margin: 0 auto; /* Centra il contenitore */
    padding: 1.38rem 0; /* 20px -> ~1.38rem */
}

.main-content-wrapper .container {
    max-width: 100%; /* Si espande per riempire .main-content-wrapper */
    padding: 0 1.04rem; /* 15px -> ~1.04rem */
    box-sizing: border-box; /* Include padding nella larghezza */
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.38rem; /* 20px -> ~1.38rem */
}

.page-header h1 {
    margin: 0;
    font-size: 1.8rem; /* Scalato per il titolo della pagina TVC */
}

/* --- Stili per i Messaggi di Stato (Successo/Errore) --- */
.success-message {
    color: #155724; /* Verde scuro */
    background-color: #d4edda; /* Verde chiaro */
    border: 0.069rem solid #c3e6cb; /* 1px -> ~0.069rem */
    padding: 0.69rem; /* 10px -> ~0.69rem */
    margin-bottom: 1.04rem; /* 15px -> ~1.04rem */
    border-radius: 0.27rem; /* 4px -> ~0.27rem */
    text-align: center;
    font-weight: bold;
    font-size: 0.9rem; /* Scalato */
}

.error-message {
    color: #721c24; /* Rosso scuro */
    background-color: #f8d7da; /* Rosso chiaro */
    border: 0.069rem solid #f5c6cb; /* 1px -> ~0.069rem */
    padding: 0.69rem; /* 10px -> ~0.69rem */
    margin-bottom: 1.04rem; /* 15px -> ~1.04rem */
    border-radius: 0.27rem; /* 4px -> ~0.27rem */
    text-align: center;
    font-weight: bold;
    font-size: 0.9rem; /* Scalato */
}

/* --- Stili per il Form di Inserimento/Modifica TVC "in linea" --- */
.inline-tvc-form {
    background-color: #f9f9f9;
    border: 0.069rem solid #ddd; /* 1px -> ~0.069rem */
    padding: 1.04rem; /* 15px -> ~1.04rem */
    margin-bottom: 1.38rem; /* 20px -> ~1.38rem */
    border-radius: 0.34rem; /* 5px -> ~0.34rem */
    display: flex;
    flex-direction: column;
}

.form-row-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.69rem; /* 10px -> ~0.69rem, RIDOTTO IL GAP per guadagnare spazio */
    align-items: flex-start; /* Allinea gli elementi all'inizio della riga (in alto) */
    margin-bottom: 0.69rem; /* 10px -> ~0.69rem */
}

.form-col-inline {
    display: flex;
    flex-direction: column; /* Ogni colonna è un flex container verticale */
    justify-content: flex-start; /* Allinea il contenuto in alto */
    flex-grow: 1; /* Permette alle colonne di espandersi se c'è spazio */
    min-width: 9.02rem; /* 130px -> ~9.02rem */
}

/* Nuovo stile per il gruppo label/input */
.form-col-inline .input-group {
    display: flex;
    flex-direction: column;
    width: 100%; /* L'input group occupa tutta la larghezza della sua colonna */
}

/* Definizione delle larghezze specifiche per alcune colonne, ora in rem */
.form-col-inline:nth-child(1) { /* Codice */
    flex-basis: 7.63rem; /* 110px -> ~7.63rem */
    min-width: 6.25rem; /* 90px -> ~6.25rem */
    flex-grow: 0;
}
.form-col-inline.full-width-description { /* Descrizione */
    flex-basis: 18.05rem; /* 260px -> ~18.05rem */
    min-width: 12.5rem; /* 180px -> ~12.5rem */
    flex-grow: 2;
}
.form-col-inline:nth-child(3), /* Latitudine */
.form-col-inline:nth-child(4) { /* Longitudine */
    flex-basis: 9.72rem; /* 140px -> ~9.72rem */
    min-width: 7.63rem; /* 110px -> ~7.63rem */
    flex-grow: 0;
}
.form-col-inline:nth-child(5), /* Data Inizio */
.form-col-inline:nth-child(6) { /* Data Fine */
    flex-basis: 10.41rem; /* 150px -> ~10.41rem */
    min-width: 9.02rem; /* 130px -> ~9.02rem */
    flex-grow: 0;
}

.form-col-inline.action-col-inline { /* Pulsanti di azione */
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto; /* La larghezza si adatta al contenuto dei pulsanti */
    min-width: 11.11rem; /* 160px -> ~11.11rem */
    align-self: flex-end; /* Allinea la colonna al fondo della riga */
}

/* Nuovo stile per raggruppare i pulsanti sotto la label "Azione" */
.action-col-inline .button-group {
    display: flex;
    gap: 0.55rem; /* 8px -> ~0.55rem */
    justify-content: flex-start; /* Allinea i pulsanti a sinistra sotto la label */
    align-items: center; /* Centra i pulsanti verticalmente */
    height: 2.63rem; /* 38px -> ~2.63rem */
    box-sizing: border-box; /* Include padding/border nella dimensione */
}


.form-col-inline label {
    font-weight: bold;
    margin-bottom: 0.27rem; /* 4px -> ~0.27rem */
    display: block;
    white-space: nowrap;
    font-size: 0.9em; /* Relativo alla dimensione base del font */
    line-height: 1.2; /* Altezza della linea per la label */
}

/* Allineamento e altezza uniformi per gli input */
.form-col-inline input[type="text"],
.form-col-inline input[type="date"],
.form-col-inline textarea {
    width: 100%;
    padding: 0.55rem 0.69rem; /* 8px 10px -> ~0.55rem ~0.69rem */
    border: 0.069rem solid #ccc; /* 1px -> ~0.069rem */
    border-radius: 0.27rem; /* 4px -> ~0.27rem */
    box-sizing: border-box;
    height: 2.63rem; /* 38px -> ~2.63rem */
    line-height: 1.2; /* Aiuta a centrare il testo verticalmente */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    margin: 0; /* Azzeriamo i margini predefiniti */
    font-size: 0.9rem; /* Scalato per il testo degli input */
}

.form-col-inline textarea {
    height: auto;
    min-height: 2.63rem; /* 38px -> ~2.63rem */
    resize: vertical;
}

/* Altezza e allineamento dei pulsanti */
.action-col-inline .vaia {
    padding: 0.41rem 0.83rem; /* 6px 12px -> ~0.41rem ~0.83rem */
    border-radius: 0.27rem; /* 4px -> ~0.27rem */
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.63rem; /* 38px -> ~2.63rem */
    font-size: 0.9em; /* Relativo alla dimensione base del font */
    white-space: nowrap;
    box-sizing: border-box;
    line-height: 1.2;
}

.action-col-inline .small-btn {
    font-size: 0.8em; /* Relativo alla dimensione base del font */
    padding: 0.41rem 0.69rem; /* 6px 10px -> ~0.41rem ~0.69rem */
    height: 2.63rem; /* 38px -> ~2.63rem */
    line-height: 1.2;
}

/* --- Stili per la Tabella delle TVC --- */
#tvc-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.38rem; /* 20px -> ~1.38rem */
    box-shadow: 0 0.13rem 0.34rem rgba(0,0,0,0.1); /* 2px 5px -> ~0.13rem ~0.34rem */
}

#tvc-table th, #tvc-table td {
    padding: 0.83rem 1.04rem; /* 12px 15px -> ~0.83rem ~1.04rem */
    border: 0.069rem solid #e0e0e0; /* 1px -> ~0.069rem */
    text-align: left;
    vertical-align: top;
    font-size: 0.9em; /* Relativo alla dimensione base del font */
}

#tvc-table th {
    background-color: #f2f2f2;
    color: #333;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85em; /* Leggermente più piccolo delle celle */
    white-space: nowrap;
}

#tvc-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

#tvc-table tr:hover {
    background-color: #e6f7ff;
    cursor: pointer;
}

.action-links {
    white-space: nowrap;
}

.action-links a {
    margin-right: 0.69rem; /* 10px -> ~0.69rem */
    text-decoration: none;
    color: #007bff;
    font-weight: 500;
    font-size: 0.9em; /* Scalato */
}

.action-links a:hover {
    text-decoration: underline;
}

.action-links a.delete-link {
    color: #dc3545;
}

.action-links a.download-link {
    color: #28a745; /* Verde per il link "Scarica" */
    font-size: 0.85em; /* Scalato */
}

/* --- Responsive Design (Media Queries) --- */

/* Per schermi più piccoli (es. tablet in verticale, smartphone) */
@media (max-width: 992px) {
    .form-row-inline {
        flex-direction: column;
        align-items: stretch;
    }
    .form-col-inline,
    .form-col-inline.full-width-description,
    .form-col-inline.action-col-inline {
        min-width: 100%;
        flex-basis: auto;
    }
    .form-col-inline .input-group {
        flex-direction: column;
    }
    .action-col-inline .button-group {
        flex-direction: row; /* Ritorna a riga per pulsanti su mobile */
        justify-content: center; /* Centra i pulsanti */
        align-items: center;
        height: auto; /* Rimuovi altezza fissa su mobile per maggiore flessibilità */
    }
    .action-col-inline .vaia,
    .action-col-inline .small-btn {
        width: auto; /* Lascia che il contenuto determini la larghezza */
        flex-grow: 1; /* Distribuisci lo spazio equamente */
        margin-bottom: 0; /* Rimuovi margine in basso tra i pulsanti */
    }

    #tvc-table th, #tvc-table td {
        white-space: normal;
        word-break: break-word;
        padding: 0.55rem 0.69rem; /* 8px 10px -> ~0.55rem ~0.69rem */
    }
    #tvc-table td:nth-child(1), /* Codice */
    #tvc-table td:nth-child(3), /* Latitudine */
    #tvc-table td:nth-child(4) { /* Longitudine */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Per schermi molto piccoli (es. smartphone) */
@media (max-width: 576px) {
    .main-content-wrapper .container {
        padding: 0 0.69rem; /* 10px -> ~0.69rem */
    }
    #tvc-table {
        font-size: 0.8em; /* Ulteriore riduzione per la tabella su schermi molto piccoli */
    }
    #tvc-table th, #tvc-table td {
        padding: 0.41rem 0.55rem; /* 6px 8px -> ~0.41rem ~0.55rem */
    }
    .action-col-inline .button-group {
        flex-direction: column; /* Impila i pulsanti su schermi molto piccoli */
    }
    .page-header h1 {
        font-size: 1.5rem; /* Adatta il titolo su schermi molto piccoli */
    }
}