/*
 * Shared Tempus Dominus layout.
 *
 * Pickers are rendered inside their input group, which is often one column of
 * a three-column form.  Do not let that narrow parent become the width of a
 * side-by-side calendar and clock.
 */
.tempus-dominus-widget {
    box-sizing: border-box;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    width: min(360px, calc(100vw - 24px)) !important;
}

/*
 * Several module forms animate focused cards with transform. A transformed
 * card creates its own stacking context, so fields that occur later in the
 * form can otherwise paint over the calendar even when the widget itself has
 * a high z-index. Elevate each relevant wrapper while it owns an open picker.
 */
.tempus-dominus-widget.show {
    z-index: 10050 !important;
}

:where(
    .input-card,
    .input-group,
    .form-group,
    .from-to-date-wrap,
    .event-detail-form,
    .session-form-grid,
    .session-form-section,
    .step,
    .card,
    .card-body,
    .modal-content
):has(.tempus-dominus-widget.show) {
    overflow: visible !important;
    position: relative;
    z-index: 10000 !important;
}

.tempus-dominus-widget *,
.tempus-dominus-widget *::before,
.tempus-dominus-widget *::after {
    box-sizing: border-box;
}

.tempus-dominus-widget .td-row {
    min-height: 0 !important;
}

.tempus-dominus-widget.timepicker-sbs {
    width: min(640px, calc(100vw - 24px)) !important;
}

.tempus-dominus-widget.timepicker-sbs .td-row {
    display: grid !important;
    grid-template-columns: minmax(330px, 3fr) minmax(220px, 2fr);
    min-height: 360px !important;
}

.tempus-dominus-widget.timepicker-sbs .td-row .td-half,
.tempus-dominus-widget.timepicker-sbs .td-row .td-half.date-container,
.tempus-dominus-widget.timepicker-sbs .td-row .td-half.time-container {
    min-width: 0 !important;
    width: 100% !important;
}

.tempus-dominus-widget.timepicker-sbs .date-container,
.tempus-dominus-widget.timepicker-sbs .time-container {
    padding: 16px 12px !important;
}

.tempus-dominus-widget .time-container-clock {
    grid-template-columns: 52px 16px 52px 64px !important;
    justify-content: center !important;
    width: 100%;
}

.tempus-dominus-widget .time-container-clock div[data-time-component] {
    min-width: 52px;
    padding-left: 6px !important;
    padding-right: 6px !important;
}

.tempus-dominus-widget .time-container-clock .toggleMeridiem {
    min-width: 56px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .tempus-dominus-widget,
    .tempus-dominus-widget.timepicker-sbs {
        width: min(360px, calc(100vw - 24px)) !important;
    }

    .tempus-dominus-widget.timepicker-sbs .td-row {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }

    .tempus-dominus-widget .date-container,
    .tempus-dominus-widget .time-container {
        padding: 12px 8px !important;
    }
}

@media (max-width: 390px) {
    .tempus-dominus-widget .time-container-clock {
        grid-template-columns: 46px 12px 46px 58px !important;
        gap: 4px !important;
    }

    .tempus-dominus-widget .day {
        min-height: 36px !important;
    }
}