/* ---------------------------------------------
   Stili per index.html
--------------------------------------------- */
/* Aggiungi spazio sopra la tabella DUTY */
#dutyTable {
    margin-top: 20px; /* Aggiunge uno spazio di 20px sopra la tabella */
}

/* Aggiungi spazio sopra la tabella TRIP */
#tripTable {
    margin-top: 20px; /* Aggiunge uno spazio di 20px sopra la tabella */
}

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    color: #333;
    text-align: center;
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Spazio tra i bottoni su schermi più grandi */
    margin-bottom: 10px;
}

.button-group button {
    padding: 5px 5px;
    border: none;
    border-radius: 5px;
    background-color: #007BFF;
    color: white;
    font-size: 16px;
    cursor: pointer;
    flex: 1;
    min-width: 150px; /* Larghezza minima per i pulsanti */
}

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

.tab-content {
    display: none;
    border: 1px solid #007BFF;
    border-radius: 5px;
    overflow: hidden;
}

.active-content {
    display: block;
}

iframe {
    width: 100%;
    height: 500px;
    border: none;
}

#default-content img {
    width: 100%;
    height: auto;
}

/* ---------------------------------------------
   Stili per duty.html
--------------------------------------------- */
#resultTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px; /* Aggiunge uno spazio di 20px sopra la tabella */
}

table, th, td {
    border: 1px solid #007BFF;
}

th, td {
    padding: 1px;
    text-align: left;
}


.custom-title {
    font-size: 1.5em; /* Dimensione del font personalizzata */
    color: #ffffff; /* Testo bianco */
    background-color: #ff0000; /* Sfondo rosso */
    padding: 10px 15px; /* Padding personalizzato */
    border-radius: 8px; /* Angoli arrotondati */
    text-align: center; /* Centra il testo */
    width: 95%; /* Larghezza al 95% del contenitore */
    margin: 0 auto 20px auto; /* Centra l'elemento e aggiunge margine inferiore */
}


.dropdown-container {
    display: flex;
    flex-direction: row;
    gap: 15px; /* Spazio tra gli elementi */
    justify-content: center; /* Allinea gli elementi orizzontalmente */
    align-items: center; /* Allinea gli elementi verticalmente al centro */
}


.dropdown-container label {
    font-weight: bold;
    color: #007BFF;
}

.dropdown-container select {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #007BFF;
    font-size: 16px;
    width: auto; /* Imposta una larghezza dinamica */
    max-width: 150px; /* Limita la larghezza massima */
}





h1 {
    font-size: 1.2em;
    color: #fff; /* Colore del testo bianco */
    background-color: #ff0000; /* Sfondo rosso */
    padding: 5px 10px;
    border-radius: 5px;
    margin-bottom: 0px;
    display: block;
    width: 95%; /* Imposta la larghezza al 95% del contenitore */
}


.form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.form-group label {
    font-weight: bold;
    color: #007BFF;
}

select, input {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #007BFF;
    font-size: 16px;
    width: 120px;
    
    box-sizing: border-box;
}

input {
    max-width: 150px;
}

button {
    background-color: #28a745;
    color: white;
    border: none;
    cursor: pointer;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 18px;
    width: 150px;
    margin-top: 10px;
}

button:hover {
    background-color: #218838;
}

#suffix-input {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

#fileContent {
    white-space: pre-wrap;
    margin-top: 20px;
    border: 1px solid #007BFF;
    padding: 10px;
    background-color: #f9f9f9;
    font-family: monospace;
    max-height: 400px;
    overflow-y: auto;
    border-radius: 5px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid #007BFF;
}

th, td {
    padding: 8px;
    text-align: left;
}

.title-row {
    font-weight: bold;
    background-color: #dc3545;
    color: white;
}

.trip-row {
    background-color: #556b2f;
    color: white;
    font-weight: bold;
}

.running-row {
    background-color: #FFD700;
    font-weight: bold;
}

.empty-row {
    background-color: #f9f9f9;
}

#suffixLabel {
    font-weight: bold;
    color: #007BFF;
    font-size: 50px; /* Cambia il valore in base alle tue esigenze */
}

/* ---------------------------------------------
   Media Query per dispositivi mobili (max-width: 600px)
   Riduce lo spazio tra i bottoni
--------------------------------------------- */

@media (max-width: 600px) {
    .button-group {
        gap: 5px; /* Riduce lo spazio tra i bottoni sui dispositivi mobili */
        margin-bottom: 2px;
    }

}

/* Evidenziazione delle sezioni importanti */
.highlight {
    font-weight: bold;
    background-color: #f0f0f0; /* Colore di sfondo per evidenziare */
    text-align: center;  /* Testo centrato */
}

.trip-no {
    font-weight: bold;
    background-color: #007BFF;
    color: white;
    text-align: center;
}

.service-no {
    font-weight: bold;
    background-color: #28a745;
    color: white;
    text-align: center;
}

.change-driver {
    font-weight: bold;
    background-color: #dc3545;
    color: white;
    text-align: center;
}

/* Stili di base per la tabella */
#myTrip td {
    padding: 8px;
    border: 1px solid #ddd;
}

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

#myTrip tr:nth-child(odd) {
    background-color: #fff;
}


/* --------------------------------------------- */
/* Aggiunta dello stile per RUNNING NUMBER */
/* --------------------------------------------- */
.running-number-row {
    background-color: #FFD700;  /* Sfondo giallo */
    color: black;               /* Testo nero */
    font-weight: bold;          /* Testo in grassetto */
    text-align: center;         /* Testo centrato */
}

/* --------------------------------------------- */
/* Aggiunta dello stile per TAKE OVER FROM */
/* --------------------------------------------- */
.take-over-row {
    background-color: #dc3545;  /* Sfondo rosso */
    color: white;               /* Testo bianco */
    font-weight: bold;          /* Testo in grassetto */
    text-align: center;         /* Testo centrato */
}





/* ---------------------------------------------
   Stili per fleet.html (prefisso: .fleet-)
--------------------------------------------- */

.fleet-container {
    font-family: Arial, sans-serif;
    text-align: center;
}

.fleet-header {
    font-size: 1.5em;
    color: #ffffff;
    background-color: #007BFF;
    padding: 10px 15px;
    border-radius: 8px;
    margin: 10px auto;
    width: 90%;
}

.fleet-dropdown-container {
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.fleet-dropdown-container label {
    font-weight: bold;
    color: #007BFF;
}

.fleet-dropdown-container select {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #007BFF;
    font-size: 16px;
    width: 150px;
}

.fleet-button {
    background-color: #28a745;
    color: white;
    border: none;
    cursor: pointer;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 18px;
    width: 150px;
    margin-top: 10px;
}

.fleet-button:hover {
    background-color: #218838;
}

.fleet-results {
    margin-top: 20px;
    text-align: center;
}

.fleet-table {
    width: 90%;
    border-collapse: collapse;
    margin: 0 auto;
}

.fleet-table, .fleet-table th, .fleet-table td {
    border: 1px solid #007BFF;
}

.fleet-table th, .fleet-table td {
    padding: 10px;
    text-align: left;
}

.fleet-table th {
    background-color: #007BFF;
    color: white;
}

.fleet-table td {
    background-color: #f9f9f9;
}

.suffix-row {
    background-color: red;
    color: white;
    font-weight: bold;
    text-align: center;
}

.service-row {
    font-weight: bold;
}


/* Stile per i risultati trovati */
#results ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#results li {
    margin: 8px 0;
    padding: 10px;
    text-align: left; /* Allinea il testo a sinistra */
    border-bottom: 1px solid #ddd;
}

/* Evidenziazione per i numeri in grassetto */
.bold {
    font-weight: bold;
}

/* Stile per le corrispondenze trovate */
.matched-result {
    background-color: #e6ffe6; /* Verde chiaro */
}

/* Stile per le corrispondenze non trovate */
.unmatched-result {
    background-color: #ffe6e6; /* Rosso chiaro */
}

/* --- spacing tra bottone e tabella --- */
.table-gap {
  height: 14px; /* riga vuota visiva */
}

/* --- colori blocchi --- */

/* --- OPZIONE 3: solo la riga chiave colorata --- */

/* Verde chiaro per "TAKE BUS FROM DEPOT" */
#deadRunResultTable tbody tr.takebus-block.deadrun-head td {
  background-color: #ccffcc !important;
  color: #000 !important;
  font-weight: 600;
}

/* Azzurro chiaro per "DEAD RUN" */
#deadRunResultTable tbody tr.deadrun-block.deadrun-head td {
  background-color: #ccf2ff !important;
  color: #000 !important;
  font-weight: 600;
}

/* Tutte le altre righe del blocco restano bianche */
#deadRunResultTable tbody tr.takebus-block td,
#deadRunResultTable tbody tr.deadrun-block td {
  background-color: #fff !important;
  color: #000 !important;
  font-weight: normal;
}

/* La riga vuota tra blocchi resta invariata */
#deadRunResultTable tbody tr.empty-row td {
  background: transparent !important;
  border: 0;
  height: 16px;
  line-height: 16px;
  padding: 0;
}