.task-form-page {
    display: block;
}

.task-form-page .task-form-loading {
    display: flex;
    justify-content: center;
    padding-block: var(--reden-space-2xl, 4.95rem);
}

.task-form-page .task-form-header .reden-link {
    display: flex;
    width: fit-content;
    line-height: 1;
}

.task-form-page .task-form-header .reden-link:hover,
.task-form-page .task-form-header .reden-link:focus {
    text-decoration: none;
}

.task-form-page .task-form-body {
    max-width: calc(68rem + (var(--reden-space-l, 2.47rem) * 2));
    padding-inline: var(--reden-space-l, 2.47rem);
}

.task-form-page .task-form-translation-editor {
    padding: var(--reden-space-m, 1.75rem) var(--reden-space-l, 2.47rem) var(--reden-space-xl, 3.5rem);
}

.task-form-page .task-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--reden-space-s, 1.24rem) var(--reden-space-m, 1.75rem);
}

@media (min-width: 768px) {
    .task-form-page .task-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.task-form-page .task-form-field-wide {
    grid-column: 1 / -1;
}

.task-form-page .task-form-hint {
    display: block;
    margin-top: var(--reden-space-4xs, 0.33rem);
    color: var(--reden-text-muted, #8A8490);
    font-size: var(--reden-text-xs, 0.88rem);
}

.task-form-page :where(.task-form-header, .task-form-body) .form-label {
    display: block;
    margin-bottom: var(--reden-space-3xs, 0.44rem);
    color: var(--reden-text-body, #000000);
    font-size: var(--reden-text-s, 0.94rem);
    font-weight: 700;
}

.task-form-page :where(.task-form-header, .task-form-body) .form-control,
.task-form-page :where(.task-form-header, .task-form-body) .form-select {
    display: block;
    width: 100%;
    border: 1px solid transparent;
    border-radius: var(--reden-radius-m, 0.75rem);
    padding: var(--reden-space-2xs, 0.62rem) var(--reden-space-xs, 0.88rem);
    background-color: var(--reden-surface-alt, #F6F3F6);
    color: var(--reden-text-body, #000000);
    font-size: var(--reden-text-m, 1.06rem);
}

.task-form-page :where(.task-form-header, .task-form-body) .form-control:focus,
.task-form-page :where(.task-form-header, .task-form-body) .form-select:focus {
    border-color: var(--reden-primary, #633269);
    background-color: var(--reden-surface, #FFFFFF);
    box-shadow: 0 0 0 0.2rem rgba(99, 50, 105, 0.15);
}

.task-form-page :where(.task-form-header, .task-form-body) .form-control:disabled,
.task-form-page :where(.task-form-header, .task-form-body) .form-control[readonly],
.task-form-page :where(.task-form-header, .task-form-body) .form-select:disabled {
    background-color: #EEE8EE;
    color: var(--reden-text-muted, #8A8490);
}

.task-form-page :where(.task-form-header, .task-form-body) .form-control::placeholder {
    color: var(--reden-text-muted, #8A8490);
}

.task-form-page .task-form-checks {
    display: grid;
    gap: var(--reden-space-3xs, 0.44rem);
}

.task-form-page .task-form-check {
    display: flex;
    align-items: center;
    gap: var(--reden-space-2xs, 0.62rem);
    padding: var(--reden-space-2xs, 0.62rem) var(--reden-space-xs, 0.88rem);
    border: 1px solid var(--reden-surface-border, #E5DCE5);
    border-radius: var(--reden-radius-s, 0.5rem);
    background-color: var(--reden-surface-alt, #F6F3F6);
}

.task-form-page :where(.task-form-header, .task-form-body) .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--reden-space-4xs, 0.33rem);
    padding: var(--reden-space-3xs, 0.44rem) var(--reden-space-xs, 0.88rem);
    border-radius: var(--reden-radius-s, 0.5rem);
    font-size: var(--reden-text-s, 0.94rem);
    font-weight: 600;
    box-shadow: var(--reden-shadow-s, 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.08));
}

.task-form-page :where(.task-form-header, .task-form-body) .btn-light {
    background-color: var(--reden-surface, #FFFFFF);
    border-color: var(--reden-surface-border, #E5DCE5);
    color: var(--reden-text-soft, #4A4550);
}

.task-form-page :where(.task-form-header, .task-form-body) .btn-light:hover,
.task-form-page :where(.task-form-header, .task-form-body) .btn-light:focus {
    background-color: var(--reden-surface-alt, #F6F3F6);
    border-color: var(--reden-surface-border, #E5DCE5);
    color: var(--reden-primary, #633269);
}

.task-form-page :where(.task-form-header, .task-form-body) .btn-danger {
    background-color: var(--reden-danger, #B23B30);
    border-color: var(--reden-danger, #B23B30);
}

.task-form-page :where(.task-form-header, .task-form-body) .btn-danger:hover,
.task-form-page :where(.task-form-header, .task-form-body) .btn-danger:focus {
    background-color: var(--reden-danger-dark, #9B332A);
    border-color: var(--reden-danger-dark, #9B332A);
}

.task-form-page .task-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--reden-space-2xs, 0.62rem);
    padding-bottom: var(--reden-space-l, 2.47rem);
}

@media (max-width: 479.98px) {
    .task-form-page .task-form-actions {
        flex-direction: column-reverse;
    }

    .task-form-page .task-form-actions .btn {
        justify-content: center;
        width: 100%;
    }
}