/**************

Global changes to form elments

*************/
:is(#block-nexus-content form:not(.views-exposed-form), .support-plan-amendment-form, #block-views-admin-whitelist-block .views-exposed-form) {

    --input-padding: 1.25rem 1rem .5rem;
    --b-rad: .75rem;

    :is(.mt-style-form-rounded input.form-text,
        input.form-text,
        input.form-tel,
        input.form-email,
        input.form-url,
        input.form-search,
        input.form-number,
        input.form-color,
        input.form-date,
        input.form-time,
        textarea,
        select,
        select.form-select) {
        padding: var(--input-padding);
        border-radius: var(--b-rad);
    }

    textarea {
        overflow-y: hidden;
        block-size: auto;
    }

    input.form-file {
        border-radius: var(--b-rad);
    }

    input.form-checkbox {
        min-width: 20px;
    }

    input[type="date"] {
        min-width: 220px;
    }

    .field--type-boolean {
        line-height: 1.5rem;
        margin-inline-start: 0;
        margin-block: 1rem;

        label {
            padding-inline-start: .25rem;
            padding-block-end: 0;
        }

        input[type='checkbox'] {
            --outer-radius: .75rem;
            all: unset;
            appearance: none;
            cursor: pointer;
            display: inline-block;
            vertical-align: top;
            inline-size: 2.5rem;
            block-size: 1.5rem;
            position: relative;
            overflow: hidden;
            clip-path: circle(1.5rem at 50% 50%);
            background-color: #767676;
            border: 3px solid transparent;
            border-radius: var(--outer-radius);
            box-sizing: border-box;

            &:hover {
                opacity: .9;
                box-shadow: 0 0 2px rgba(0, 0, 0, .2);
            }

            &::before {
                position: absolute;
                content: "";
                inline-size: 100%;
                block-size: 100%;
                background-color: #fff;
                border-radius: 21px;
                transform: translateX(-16px);
                transition: transform .3s;
            }

            &:checked {
                background-color: #26a769;

                &::before {
                    transform: translateX(16px);
                }
            }
        }
    }

    fieldset,
    fieldset.fieldgroup {
        padding: 0.5rem 1rem .75rem;
        border-radius: var(--b-rad);

        .form-item,
        .form-actions {
            margin: 0;
        }
    }

    fieldset .fieldset-wrapper>div {
        margin-bottom: .75rem
    }


    div:has(>label) {
        position: relative;
    }

    .form-type-textarea:has(.ck-editor)>label {
        font-size: 1rem;
    }

    div:not(.js-form-type-radio, .js-form-type-checkbox, .form-type-managed-file, .form-type-textarea:has(.ck-editor))>label,
    .form-type-number>span.field-prefix {
        --input-padding: 1rem .75rem;
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        inline-size: 100%;
        block-size: 100%;
        font-size: 18px;
        padding: var(--input-padding);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        pointer-events: none;
        border: 0;
        transform-origin: 0 0;
        transition: .1s ease-in-out, transform .1s ease-in-out;
        z-index: 1;
        pointer-events: none;
    }

    .form-type-number>span.field-prefix {
        opacity: 0;
        font-size: 1.25rem;
    }

    .form-item.form-type-select.is-empty-select select,
    .is-empty-date input[type="date"] {
        color: transparent;
        caret-color: transparent;
        -webkit-text-fill-color: transparent;
    }

    .field--name-field-cancellation-informed-time.is-empty-date input[type="date"] {
        /*exclusion to the above*/
        color: inherit;
        caret-color: auto;
        -webkit-text-fill-color: inherit;
    }

    div.password-parent:has(input:-webkit-autofill)>label {
        --input-padding: .25rem .5rem 0;
        font-size: 12px;
        padding: var(--input-padding);
    }
    div.password-parent:has(input:-moz-autofill)>label {
        --input-padding: .25rem .5rem 0;
        font-size: 12px;
        padding: var(--input-padding);
    } 

    div:has(>input[type="url"]:not(:placeholder-shown))>label,
    div:has(>input[type="url"]):focus-within>label,
    div:has(>input[type="tel"]:not(:placeholder-shown))>label,
    div:has(>input[type="tel"]):focus-within>label,
    div:has(>input[type="email"]:not(:placeholder-shown))>label,
    div:has(>input[type="email"]):focus-within>label,
    div:has(>input[type="password"]):focus-within>label,
    /* div:has(>input.username):focus-within>label, */
    div.has-value.has-value > label,
    div:has(>input[type="number"]):focus-within>label,
    div:has(>input[type="number"]:not(:placeholder-shown))>label,
    div:has(input[type="date"]):focus-within>label,
    div:has(input[type="time"]):focus-within>label,
    div:has(>input:not(#edit-name)[type="text"]:not(:placeholder-shown))>label,
    div:has(>input[type="text"]):focus-within>label,
    div:has(textarea):not(:has(textarea + .ck-editor)):focus-within>label,
    div:has(textarea:not(:placeholder-shown)):not(:has(textarea + .ck-editor))>label,
    .form-item.form-type-select:not(.is-empty-select)>label,
    .form-item.form-type-select:focus-within>label,
    .form-item.form-type-date:not(.is-empty-date)>label,
    .form-item.form-type-time:not(.is-empty-date)>label,
    .form-item.form-datetime-wrapper:not(:has(.is-empty-date))>label {
        --input-padding: .25rem .5rem 0;
        font-size: 12px;
        padding: var(--input-padding);
    }

    div:has(input[type="number"]):focus-within>span,
    div:has(>input[type="number"]:not(:placeholder-shown))>span {
        opacity: 1;
    }

    div input[type="number"]:is(:focus-within, :not(:placeholder-shown)) {
        padding-left: 2rem;
    }

    .form-item.form-datetime-wrapper,
    .smartdate--widget .fieldset-wrapper .form-item {
        margin: 0;
    }

    div:not(.field--type-boolean)> :is(.form-type-checkbox, .form-type-radio) {
        /* --form-bg: #2081942d; */
        --form-hover: #2081946b;
        --form-selected: #208194ce;

        inline-size: fit-content;
        background-color: var(--form-bg);
        border: 1px solid var(--form-hover);
        border-radius: 50vw;
        padding: .25rem .5rem;
        transition: 250ms ease-in-out;
        margin-top: .75rem;

        &:hover {
            background-color: var(--form-hover);
        }

        &:has(input:checked) {
            background-color: var(--form-selected);

            label {
                color: #ffffff;
            }
        }

        input {
            display: none
        }

        &:has(input[value="_none"]) {
            .no-null & {
                /* Hides radios with null values when inside a container with the 'no null class' */
                display: none;
            }
        }
    }
}

.smartdate--time-inline .smartdate--separator {
    width: 1rem;
}

.smartdate--widget input.time-end.form-date {
    display: none;
}

.smartdate--widget:has(.allday-label > input:checked) input.time-end.form-date {
    display: block;
}

.field--type-timestamp .form-item__description,
#edit-field-session-overview-0-format {
    display: none;
}

input:disabled,
select:disabled {
    pointer-events: none;
    background-color: inherit !important;
    color: inherit !important;
}

.field--type-text-long .js-filter-wrapper:has(.js-filter-guidelines) {
    display: none;
}

.masonry-grid {
    gap: 1rem;
    display: column;
    columns: 2;

    &>* {
        break-inside: avoid;
    }
}

.form-group-wrapper {
    padding: 0 1rem 1.5rem;
}

div:last-child>.form-group-wrapper {
    margin-bottom: 0;
}

fieldset legend,
fieldset.fieldgroup legend {
    float: inline-start;
    margin-bottom: .5rem;
}

form .field-group-html-element:has(h3) {
    --margin-sizing: 1rem;
    --form-bg: rgba(255, 255, 255, 0.4);

    background: oklch(from var(--form-bg) l c h);
    border-radius: 1rem;
    border: 1px solid #208194;
    margin-bottom: 50px;

    h3 {
        position: relative;
        inline-size: fit-content;
        padding: .5rem 1rem;
        margin-block: var(--margin-sizing);
        border-radius: 0 0 1rem 0;
    }
}


/************************

    Signatures

************************/

.esign_container {
    .signature {
        margin-bottom: 2.5rem;
    }

    canvas {
        inline-size: 100%;
        background: #ffffff;
    }

    .toolbox>.btn-group {
        inline-size: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;

        input {
            block-size: calc(1.5em + .75rem + 2px);

            &[type="range"] {
                background: #fff;
            }
        }

        button.btn {
            background: #ffffff;
            padding: 0.55rem .75rem;
            border-radius: 4px;
            border: 1px solid var(--mt-form-border);
        }
    }
}



.signature-group {
    display: grid;
    gap: 0 2rem;
    align-items: center;

    .field--type-list-string,
    .field--type-image {
        grid-row: 1 / 3;
    }
}

.form-grid {
    --col-size: 16rem;
    display: grid;
    grid-template-columns: repeat(auto-fit,
            minmax(min(100%, var(--col-size)),
                1fr));
    gap: 0 1rem;

    &.grid-colx2 {
        --col-size: 24rem;
    }

    &.grid-colx3 {
        --col-size: 12rem;
    }

    &.grid-colx4 {
        --col-size: 10rem;
    }

    &.grid-colx5 {
        --col-size: 8rem;
    }

    &.offset-grid {
        grid-template-columns: minmax(18rem, 1fr) minmax(300px, 400px);
    }
}

form {
    .description {
        padding: .25rem .75rem;
    }

    .field--name-field-contact-method {
        grid-row: 4 / 7;
        grid-column: 2;
    }

    .field--name-field-off-job-time {
        grid-row: 1 / 5;
        grid-column: 2;
    }

    .course-dates {
        display: flex;
        justify-content: space-between;
    }

    .field--type-file details {
        background: hsl(0 0% 100% / 0.4);
    }

    .field--name-field-support-plan-attendance {
        grid-column: 1 / -1;
        padding-inline: 1rem;
    }

    .field--name-field-has-evidence:has(input:checked) + .field--name-field-evidence {
        block-size: auto;
        opacity: 1;
        transform: translateY(0); 
        pointer-events: auto;
    }
    .field--name-field-has-evidence {

        .description {
            transition: 250ms ease-in-out;
        }

        input:checked ~ .description {
            opacity: 0;
        }
    }

    .field--name-field-evidence {
        block-size: 1px;
        opacity: 0;
        transform: translateY(-50px);
        transition: 250ms ease-in-out;
        pointer-events: none;
    }
    #profile-evidence:has(.field--name-field-evidence table) .field--name-field-has-evidence {
        pointer-events: none;
        opacity: .7;
    }
}

form div:has(>fieldset) {
    .form-grid & {
        display: flex;
        flex-direction: column;

        fieldset {
            display: flex;
            flex-direction: column;
            flex: 1;

            .fieldset-wrapper {
                display: contents;

                .form-checkboxes,
                .form-radios {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-evenly;
                }
            }
        }
    }
}

body:is(.path-create-learner,
    .path-create-learning-provider,
    .path-create-support-connect) form>.field--type-entity-reference details {
    border: 0;

    &>summary {
        display: none;
    }
}

.view-filters form {

    /** Display for default ANY **/
    .form-item-field-current-stage-target-id:has(option[value="All"]:checked)+.form-item-field-support-status-target-id option:not([value="313"], [value="314"], [value="318"], [value="319"], [value="317"], [value="316"], [value="452"], [value="321"], [value="322"], [value="324"], [value="325"], [value="326"], [value="332"], [value="329"], [value="331"], [value="330"], [value="334"], [value="335"], [value="337"], [value="341"], [value="340"], [value="339"], [value="338"]) {
        display: none;
    }

    /** Display only Registration statuses **/
    .form-item-field-current-stage-target-id:has(option[value="312"]:checked)+.form-item-field-support-status-target-id option:not([value="313"], [value="314"]) {
        display: none;
    }

    /** Display only Screening statuses **/
    .form-item-field-current-stage-target-id:has(option[value="315"]:checked)+.form-item-field-support-status-target-id option:not([value="318"], [value="319"], [value="317"], [value="316"]) {
        display: none;
    }

    /** Display only Support Plan Meeting statuses **/
    .form-item-field-current-stage-target-id:has(option[value="320"]:checked)+.form-item-field-support-status-target-id option:not([value="452"], [value="321"], [value="322"]) {
        display: none;
    }

    /** Display only Support Plan statuses **/
    .form-item-field-current-stage-target-id:has(option[value="323"]:checked)+.form-item-field-support-status-target-id option:not([value="324"], [value="325"], [value="326"]) {
        display: none;
    }

    /** Display only Support Approval statuses **/
    .form-item-field-current-stage-target-id:has(option[value="327"]:checked)+.form-item-field-support-status-target-id option:not([value="332"], [value="329"], [value="331"], [value="330"]) {
        display: none;
    }

    /** Display only Ongoing Support statuses **/
    .form-item-field-current-stage-target-id:has(option[value="333"]:checked)+.form-item-field-support-status-target-id option:not([value="334"], [value="335"]) {
        display: none;
    }

    /** Display only Support Ended statuses **/
    .form-item-field-current-stage-target-id:has(option[value="336"]:checked)+.form-item-field-support-status-target-id option:not([value="337"], [value="341"], [value="340"], [value="339"], [value="338"]) {
        display: none;
    }
}


.region.region-content:has(#support-plan-approval-form) {
    padding-bottom: 200px;
}


#support-plan-approval-form {
    position: fixed;
    inset-block-end: 0;
    inset-inline-start: 260px;
    inset-inline-end: 0;
    background-color: hsl(191 63% 88%);
    border-top: 1px solid rgba(134, 134, 134, 0.3);
    box-shadow: 0 -1px 2px rgba(134, 134, 134, 0.25);
    padding: 1rem 7rem 1rem 2rem;

    display: grid;
    grid-template-rows: repeat(2, min-content);
    grid-template-columns: min-content 1fr auto 200px;
    gap: 1rem;
    min-height: 177.25px;

    .left-rail-collapsed & {
        inset-inline-start: 72px;
    }

    #edit-actions,
    #edit-field-support-approval-wrapper {
        grid-column: 4;
        margin-bottom: 0;
        justify-self: end;
    }

    #edit-field-support-approval-wrapper {
        inline-size: 100%;
    }

    .form-item {
        margin: 0;
    }

    #edit-field-provider-signature-wrapper,
    #edit-field-change-required-text-wrapper {
        grid-row: 1 / -1;
        grid-column: 3;
        justify-self: end;
    }

    #edit-field-reason-to-decline-wrapper {
        grid-row: 1 / -1;
        grid-column: 2;
        justify-self: end;
    }


    #edit-field-provider-signature .signature_panel {
        position: relative;

        >.toolbox {
            position: absolute;
            inset-inline-end: 0;
            inset-block-end: 0;

            &>.btn-group>input {
                display: none;
            }
        }
    }

    .esign_container {
        & .signature_panel {
            display: flex;
            gap: .5rem;
        }

        & .signature {
            inline-size: 500px;
            block-size: 180px;
            max-height: 180px;
            max-width: 100%;
            margin-bottom: 0;

            label {
                padding: .25rem .5rem !important;
                opacity: .5;
            }

            canvas {
                border-radius: 1rem;
            }
        }
    }
}



#support-plan-approval-form button.support-plan-approval-collapse {
    grid-row: 1 / -1;
    grid-column: 1;

    position: relative;
    background: #e6e6e6;
    color: #222;
    border: 0;
    border-radius: 12px;
    inline-size: 48px;
    block-size: 48px;
    padding: 0;
    line-height: 48px;
    text-align: center;
    display: inline-block;
    font-size: 24px;
    cursor: pointer;
    border: 1px solid #b5b5b5;

    svg {
        transition: .3s ease;
    }

    &::after {
        position: absolute;
        content: "Sign here";
        inset-block-start: 50%;
        inset-inline-start: 100%;
        opacity: 0;
        transform: translate(-50px, -50%);
        transition: .3s ease;
        inline-size: 150px;
    }
}

#support-plan-approval-form {
    transition: .3s ease;
}

#support-plan-approval-form.collapsed {
    transform: translateY(80px);
    border-top-color: transparent;
    box-shadow: none;
    background-color: transparent;
    z-index: 0;

    button.support-plan-approval-collapse {
        &::after {
            opacity: .5;
            transform: translate(0, -50%);
        }

        &:hover::after {
            color: hsl(191 63% 48%);
            opacity: 1;
        }

        svg {
            rotate: 180deg;
        }
    }

    div {
        opacity: 0;
    }
}

.signature_panel {
    &>.signature {
        inline-size: 288px;
        margin-bottom: 1rem;
    }

    &>.toolbox {
        max-width: 288px;

        input[type="color"] {
            display: none;
        }
    }

}

#block-nexus-content form #target-review-group .paragraphs-subform {

    & > .form-wrapper {
        margin-bottom: 20px;
    }

    :is(.field--name-field-target-progress, .field--name-field-mentor-signature) {
        
        fieldset {
            display: flex;
            align-items: center;
            padding: var(--input-padding);

            legend {
                margin-bottom: 0;
            }
        }

        .fieldset-wrapper {
            flex-grow: 1; 
        }

        .form-radios {
            display: flex;
            justify-content: space-evenly;
            margin-bottom: 0;

            .form-type-radio {
                margin-top: 0;
            }
        }
    }
}

.paragraphs-tabs + .form-item {

    .tabledrag-toggle-weight-wrapper,
    table thead .paragraphs-actions,
    .field-multiple-drag {
        display: none;
    }

    table tbody .has-multiple-fields-remove-button {
        padding-left: 2rem;
    }
}

.esign_container :is(
    input[type="submit"][name$="_remove_button"],
    [data-drupal-selector$="remove-button"]
) {
    display: none;
}