.page-toolbar {
	width: 100%;
	height: 100%;
	max-height: 500px;
	background-image: url('../public/images/testata.jpeg');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

/* Schermi medi (tablet) */
@media (min-width: 768px) and (max-width: 991px) {
    .page-toolbar {
        max-height: 400px; /* o un'altra regola che preferisci */
    }
}

/* Schermi piccoli (smartphone) */
@media (min-width: 400px) and (max-width: 767px) {
    .page-toolbar {
        max-height: 300px; /* Stretch l'immagine per coprire tutto il div */
        /* Oppure mantieni 'contain' per mantenere il rapporto aspetto senza riempire tutto lo spazio */
    }
}

/* Schermi piccoli (smartphone) */
@media (max-width: 399px) {
    .page-toolbar {
        max-height: 250px; /* Stretch l'immagine per coprire tutto il div */
        /* Oppure mantieni 'contain' per mantenere il rapporto aspetto senza riempire tutto lo spazio */
    }
}


.data-header {
    color: black;
	font-weight: bold;
}

.form-check-input[type=radio] {
	border-color: gray;
}

.feedback {
	display: none;
}

.feedback.invalid-feedback{
	display: inherit
}

.was-validated .form-control:valid {
	border: var(--bs-border-width) solid var(--bs-border-color);
	background-image:none
}

.was-validated .form-check-input:valid {
	border-color: gray;
}

.was-validated .form-check-input:valid~.form-check-label {
	color: inherit;
}

.page-header {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 10px;
}

.clock-image {
	height: 70px;
	width: 70px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url('../public/images/clock.jpeg');
}

.header-image {
	height: 300px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url('../public/images/testata.jpeg');
}

/* Stili per le card degli orari - supporto fino a 7 per riga */
.calendar-grid {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
}

/* Responsive per diverse dimensioni dello schermo - ottimizzato per 7 card */
@media (min-width: 1200px) {
    .calendar-grid {
        grid-template-columns: repeat(7, 1fr);
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .calendar-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .calendar-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .calendar-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 575px) {
    .calendar-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Stili per le card degli orari */
.day-cell {
    min-width: 100px;
    max-width: 140px;
}

.card {
    height: 100%;
    min-height: 90px;
}

/* Stili per gli input radio delle card degli orari */
.form-check .form-check-input {
    float: left;
}

/* Stili per i form-check delle card degli orari */
.form-check {
    text-align: center;
    gap: 1px;
    font-size: 0.9rem;
}