.jl-schedule-cycle-preview {
    position: sticky;
    top: 1rem;
}

.jl-schedule-actions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: var(--tblr-bg-surface, var(--tblr-body-bg));
}

.jl-schedule-variant .card-header {
    align-items: center;
}

.jl-schedule-day-chip {
    display: inline-flex;
    justify-content: center;
    min-width: 2.35rem;
}

.jl-schedule-rule [data-rule-days] {
    min-width: 7rem;
}

.jl-schedule-type-option {
    cursor: pointer;
}

[data-schedule-rule-modal] .jl-schedule-type-option.required::after {
    content: none;
}

[data-schedule-rule-modal] [data-rule-type-fields] .btn-check:checked + .jl-schedule-type-option {
    border-color: var(--tblr-primary);
    background: var(--tblr-primary-lt);
}

[data-schedule-rule-modal] [data-rule-type-fields] .btn-check:focus-visible + .jl-schedule-type-option {
    outline: 2px solid var(--tblr-primary);
    outline-offset: 2px;
}

[data-schedule-rule-modal] .jl-schedule-weekday-label {
    min-width: 2.75rem;
    border: 1px solid var(--tblr-border-color);
    background: var(--tblr-bg-surface, var(--tblr-body-bg));
    color: var(--tblr-body-color);
    font-weight: 600;
}

[data-schedule-rule-modal] .jl-schedule-weekday-label:hover {
    border-color: var(--tblr-primary);
    color: var(--tblr-primary);
}

[data-schedule-rule-modal] .btn-check:checked + .jl-schedule-weekday-label {
    border-color: var(--tblr-primary);
    background: var(--tblr-primary);
    color: #fff;
}

[data-schedule-rule-modal] .btn-check:checked + .jl-schedule-weekday-label::before {
    margin-right: .2rem;
}

[data-schedule-rule-modal] .btn-check:focus-visible + .jl-schedule-weekday-label {
    outline: 2px solid var(--tblr-primary);
    outline-offset: 2px;
}

[data-schedule-rule-modal] .modal-dialog {
    max-width: min(600px, calc(100vw - 1rem));
}

@media (max-width: 1199.98px) {
    .jl-schedule-cycle-preview {
        position: static;
    }
}

@media (max-width: 575.98px) {
    [data-schedule-rule-modal] .modal-dialog {
        margin: .5rem auto;
    }
}
