/* style.css */
body {
    background-color: #f4f4f4;
}

.container {
    background: white;
    border-radius: 8px;
    padding: 20px;
}

img.img-fluid {
    max-height: 950px; /* Adjust based on your needs */
}

/* Pulsanti per le ore */
#hourButtons button {
    padding: 5px 10px;  /* Smaller padding */
    font-size: 0.75rem; /* Smaller font size */
    margin: 2px;        /* Tighter spacing */
    width: 60px;        /* Fixed width for uniform appearance */
}

#hourButtons {
    display: flex;
    flex-wrap: wrap; /* This allows the container to wrap items to the next line */
    gap: 5px; /* This sets spacing between buttons */
    justify-content: flex-start; /* Aligns items to the start of the flex container */
}

/* Layout dei pulsanti su schermi piccoli */
@media (max-width: 768px) {
    #hourButtons {
        flex-direction: row; /* Layout orizzontale su schermi piccoli */
        flex-wrap: wrap; /* Abilita il wrapping */
        justify-content: center; /* Centra i pulsanti */
    }
}

@media (max-width: 576px) {
    #hourButtons {
        display: none !important; /* Nasconde i pulsanti su schermi molto piccoli */
    }
}

/* Ridimensiona il testo in base alla larghezza del dispositivo */
@media (max-width: 576px) {
    .form-select {
        font-size: 0.75rem;  /* Font più piccolo su dispositivi mobili */
        padding: 0.25rem;    /* Riduci la spaziatura per i dropdown */
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .form-select {
        font-size: 0.85rem;  /* Font leggermente più grande per tablet */
        padding: 0.4rem;
    }
}

/* Mantieni i dropdown più piccoli anche su dispositivi più grandi */
.custom-select-sm {
    font-size: 0.8rem;
    padding: 0.15rem 0.75rem;
    height: auto;
}

/* Stile delle etichette orarie */
.time-label {
    flex: 1 1 0%;
    font-size: 0.6em;
    padding: 4px 2px; /* Uniform padding */
    text-align: center;
    margin: 0 1px !important; /* Margine laterale ridotto */
    background-color: #f0f0f0; /* Sfondo di default per le etichette */
    display: flex;
    justify-content: center; /* Centra il testo */
    align-items: center; /* Centra verticalmente il testo */
    border-radius: 4px; /* Bordi arrotondati */
    cursor: pointer; /* Rende cliccabili le etichette */
}

/* Pulsanti con margine ridotto */
.m-1 {
    margin: .1rem !important;
}

.btn-primary, .btn-secondary {
    padding: 5px 10px;  /* Smaller padding */
    font-size: 0.75rem; /* Smaller font size */
    margin: 2px;        /* Tighter spacing */
    width: 60px;        /* Fixed width for uniform appearance */
    text-align: center; /* Center text inside buttons */
}

/* Titoli leggermente più piccoli */
.h6, h6 {
    font-size: 0.9rem;
}

/* Evidenziazione per l'etichetta corrente */
.time-label-active {
    background-color: #28a745 !important; /* Colore verde per l'etichetta attiva */
    color: white; /* Testo bianco per contrasto */
}

/* Forza il wrapping e modifica l'aspetto su smartphone */
@media (max-width: 576px) {
    #timeLabels {
        justify-content: center; /* Centra le etichette su schermi piccoli */
        flex-wrap: wrap;  /* Forza il wrapping delle etichette */
    }
    
    #timeLabels button {
        flex-basis: 100%;   /* Ogni etichetta occupa l'intera larghezza del contenitore su schermi piccoli */
        margin-bottom: 5px; /* Spaziatura tra le etichette */
        text-align: center; /* Centra il testo */
        padding: 5px 8px; /* Riduce leggermente il padding su schermi piccoli */
    }

    /* Aggiungi interattività per le etichette su schermi piccoli */
    .time-label {
        flex-basis: 45px;  /* Ridimensiona le etichette per occupare meno spazio */
        margin: 1px;       /* Riduce ulteriormente il margine */
        font-size: 0.55em; /* Riduce la dimensione del font su smartphone */
        display: inline-flex;  /* Visualizza le etichette in linea ma flessibili */
    }
}

/* Stile per il LED */
.led {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: red;
}

/* Stile per la progress bar */
.progress-bar {
    background-color: #007bff;
    text-align: center;
    color: white;
    font-weight: bold;
}

/* Blinking animation */
@keyframes blinking {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

#runtime-text {
    font-size: 0.9em;  /* Dimensione maggiore per il runtime */
    color: #34bf2c;    /* Colore opzionale per distinguere */
    margin-right: 10px; /* Spazio tra runtime e progress text */
    font-weight: bold;
}

#progress-text {
    font-size: 0.9em;    /* Dimensione normale per il testo di avanzamento */
    color: #000;       /* Colore nero o come preferisci */
}

.progress {
    margin-bottom: 2px !important; /* Margine inferiore di 2px */
    height: 15px;       /* Altezza della progress bar */
}