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

table fix - breaks out of inline container to expand width

**********************************/
.view .view-content.row {
    position: relative;

    &>table:has(.wide-table) {
        position: relative;
        width: calc(100vw - 50%);
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        max-width: 100vw;
    }
}

.left-rail-ready:not(.left-rail-collapsed) {
    .wide-table.view .view-content.row>table:has(.wide-table) {
        width: calc(110vw - 50%);
    }
}

.left-rail-ready.left-rail-collapsed {
    .wide-table.view .view-content.row>table:has(.wide-table) {
        width: calc(125vw - 50%);
    }
}

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

Custom views title fix 
To use custom titles add .custom-subtitle to page css class

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

.page-container:has(.custom-subtitle) .page-top-container header .region-header .block-page-title-block h1.page-title  {
    color: transparent;
    background: none;
}

.custom-subtitle #custon-h1-title {
    margin: 0;

    h1.page-title {
        display: inline-block;
        font-size: var(--font-page-title);
        line-height: var(--page-title-line-height);
        letter-spacing: var(--page-title-letter-spacing);
        background: linear-gradient(180deg, var(--page-title-gradient-start) 10%, var(--page-title-gradient-end) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        padding-bottom: var(--page-title-padding-bottom);
        text-wrap: balance;
    }
}

.custom-subtitle .view-content {
    padding-top: 2.5rem;
}

.ice-view-icon-container {
    position: relative;

    &:hover>div {
        opacity: 1;
        transform: translate(0, -50%);
        z-index: 1;
    }

    &>div {
        position: absolute;
        right: 0;
        top: 0;
        background: #fff;
        border-radius: 1rem;
        padding: .25rem 1rem;
        opacity: 0;
        transform: translate(-100%, -50%);
        transition: 250ms;
        z-index: -1;
    }

    .fa-circle-info {
        color: #208194;
        cursor: pointer;
    }
}

.views-flex-column {
    display: flex;
    flex-direction: column;
    align-items: start;
}

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

Styles specific to learner view pages

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


.views-contact-container {
    display: flex;
    column-gap: 1rem;

    .phone-icon {
        color: #1e88e5;
    }

    .txt-icon {
        color: #8e24aa;
    }

    .email-icon {
        color: #fb8c00;
    }

    .whatsapp-icon {
        color: #25D366;
    }
}

.views-grid {
    display: grid;
    grid-template-columns: min-content 100%;
    column-gap: .25rem;

    div:nth-child(odd) {
        text-align: end;
    }
}

#provider-info-page-edit-button {
    font-size: 1.25rem;   
}

.provider-page-staff-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .25rem;

    & >div {
        white-space: nowrap;
    }
}

.provider-page-field-grid {
    display: grid;
    grid-template-columns: min-content 1fr;
    gap: .5rem; 

    .provider-page-field-label {
        grid-column: 1;
    }

    .provider-page-field-item {
        grid-column: 2;
    }

    &.safeguarding > div:nth-last-child(-n+2) {
        grid-column: 1 / -1;
    }
}

.provider-page-field {
    margin-bottom: .75rem;
}
.view-provider-information-page #custon-h1-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .page-title {
        flex-grow: 1;
    }
}

.view-provider-information-page .view-content .views-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    gap: 2.5rem;
}

.provider-page-label {
    margin-top: .75rem;
    margin-bottom: 1.25rem;    
}

.provider-page-logo-wrapper {
    justify-self: end;

    .provider-page-logo-image {
        margin-bottom: .75rem;
    }

    span {
        white-space: nowrap;
    }
}

.view-email-templates .views-table {
  table-layout: fixed;

    :is(th, td)::before{
        width: 5%;
    }

    :is(th, td).views-field-title {
        width: 25%;
    }
    :is(th, td).views-field-edit-node {
        width: 20%;
    }
    :is(th, td).views-field-field-description {
        width: 50%;
    }
}

.view-header:has(#toggle-view-table) {
    margin-bottom: 1rem;
}

input#toggle-view-table {
    display: none;
}

h4.toggle-view-table-header {
    position: relative;
    cursor: pointer;
    width: fit-content;
    background: linear-gradient(-90deg, #333 0 50%, #208194 50% 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    background-position: 100% 0%;
    transition: 1s ease;
    overflow-x: clip;
    margin-top: 0;
    margin-bottom: 1.5rem;

    &::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 3px;
        background-color: #208194;
        transform: translateX(-100%);
        transition: 1s ease;
    }
}

h4.toggle-view-table-header:hover {
    background-position: 0% 0%;

    &::after {
        transform: translateX(0);
    }
}

.views-element-container:has(input#toggle-view-table) > .view > .view-header + .view-content {
    opacity: 0;
    height: 1px;
    pointer-events: none;
    transition: 300ms;
}

.views-element-container:has(input#toggle-view-table:checked) > .view > .view-header + .view-content {
    opacity: 1;
    height: auto;
    pointer-events: auto;
}

.views-element-container:has(input#toggle-view-table:checked) > .view > .view-header h4.toggle-view-table-header {
    background-position: 0% 0%;

    &::after {
        transform: translateX(0);
    }
}

.screening-result-view-trait {
    font-size: 1.75rem;
}

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

Learning module tracking

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

.view-scorm-tracking .view-content > .view-grouping {
    --brand: #208194;
    border: 1px solid oklch(from var(--brand) l c h);
    border-radius: 14px;
    background: oklch(from var(--brand) 95% 0.04 h);
    padding: 2rem;
    margin-bottom: 60px;

    &> .view-grouping-header {
        font-size: 2rem;
    }

    &> .view-grouping-content{
        padding: 1rem;

        & > table {
            background: rgba(255,255,255, .4);
            border-radius: 14px;
        }
    }
}

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

ILP Profile view block

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

#profile-ilp {
    border-radius: 14px;

    details {
        border: 0;
    }


    .ilp-targets-profile {
        border-radius: 14px;
        padding: 1rem;
        font-size: var(--font-XXsmall);

        .view-content {

            display: grid;
            grid-template-columns: minmax(min-content, 40px) 1fr minmax(145px, auto) repeat(2, minmax(auto, 225px));
            gap: 1rem 0;

            counter-reset: rowCounters;

            max-height: 500px;
            overflow-y: scroll;
            scrollbar-color: #208194 #11444e;
            scrollbar-width: thin;


            .views-row {
                grid-column: 1 / -1;
                display: grid;
                grid-template-columns: subgrid;

                position: relative;
                background: #fff;
                border-radius: 14px 0 0 14px;
                padding-inline: 0;


                .counter-wrapper {
                    grid-column: 1;
                    grid-row: 1 / 4;
                    background: hsl(190deg 64% 35% / 35%);
                    border: 1px solid #208194;
                    border-radius: 14px 0 0 14px;
                    display: grid;
                    place-items: center;
                }

                .counter-content {
                    color: #208194;
                    font-weight: 600;
                    background: #fff;
                    border-radius: 50%;
                    width: 27.5px;
                    height: 27.5px;
                    text-align: center;
                }

                .views-field-title > .field-content > a {
                    padding-left: .5rem;
                }

                .views-field:nth-child(n+1):nth-child(-n+3) {
                    border-block: 1px solid #208194;
                }
                .views-field:nth-child(4) {
                    border-width: 1px;
                    border-style: solid;
                    border-image: 
                      linear-gradient(
                        to right, 
                        #208194, 
                        rgba(0, 0, 0, 0)
                      ) 1;
                    border-left: 0;
                    border-right: 0;
                }

                .views-field:last-child {
                    border-width: 1px;
                    border-style: solid;
                    border-image: 
                      linear-gradient(
                        to right, 
                        #208194 80%, 
                        rgba(0, 0, 0, 0)
                      ) 1;
                        border-left: 0;
                        border-right: 0;
                        border-top: 0;
                }

                :is(.views-field-progress-review, .views-field-field-short-term-target) {
                    grid-column: 2 / -1;
                }
            }
        }
    }
}

#views-exposed-form-ilp-targets-profile-view-ilp-targets-profile-views label {
    white-space: nowrap;
}

.js-form-item-field-ilp-status-value {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    min-width: 200px;
}

#block-ilp-targets-views-block {
    .view-filters {
        margin-bottom: 1rem;
    }

    .views-exposed-form .form--inline {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-end;
        justify-content: flex-start;
        width: fit-content;
        max-width: 100%;
        gap: 1rem;
    }

    .views-exposed-form :is(.js-form-item, .form-actions) {
        min-width: 0;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .views-exposed-form .js-form-item {
        display: flex;
        flex-direction: column;
        gap: .35rem;
    }

    .views-exposed-form .js-form-item > label {
        margin-bottom: 0;
    }

    .views-exposed-form .form-actions {
        width: fit-content;
        align-self: flex-end;
    }

    .views-exposed-form .form-select {
        inline-size: clamp(11rem, 42vw, 18rem);
    }

    .views-exposed-form .button {
        inline-size: fit-content;
        min-width: 0;
        margin: 0;
        padding-inline: 1.75rem;
        white-space: nowrap;
    }
}

@media (max-width: 960px) {
    #block-ilp-targets-views-block {
        .views-exposed-form label {
            white-space: normal;
        }

        .views-exposed-form .form-select {
            inline-size: clamp(10rem, 52vw, 14rem);
        }

        .views-exposed-form .button {
            padding-inline: 1.25rem;
        }

        .ilp-targets-profile {
            padding: .75rem;

            .view-content {
                grid-template-columns: 1fr;
                gap: .875rem;
                padding-inline: 0;
                max-height: none;
                overflow: visible;
            }

            .view-content .views-row {
                grid-template-columns: min-content 1fr;
                grid-template-areas:
                    "counter title"
                    "status status"
                    "period period"
                    "mentor mentor"
                    "target target"
                    "review review";
                gap: 0 1rem;
                align-items: start;
                padding: 1rem;
                border: 1px solid #208194;
                border-radius: 1rem;
                background: rgba(255,255,255,.92);
            }

            .view-content .views-row .views-field {
                border: 0;
                border-image: none;
            }

            .view-content .views-row :is(
                .views-field:nth-child(n+1):nth-child(-n+3),
                .views-field:nth-child(4),
                .views-field:last-child
            ) {
                border: 0;
                border-image: none;
            }

            .view-content .views-row .counter-wrapper {
                grid-area: counter;
                grid-row: auto;
                width: 2.75rem;
                min-height: 2.75rem;
                border-radius: 999px;
                align-self: start;
            }

            .view-content .views-row .counter-content {
                display: grid;
                place-items: center;
                width: 2rem;
                height: 2rem;
                line-height: 1;
            }

            .view-content .views-row .views-field-title {
                grid-area: title;
                display: flex;
                align-items: center;
                align-self: center;
                min-width: 0;
                min-height: 2.75rem;
                margin-bottom: 0;
                padding-bottom: 0;
                border-bottom: 0;
            }

            .view-content .views-row .views-field-title > .field-content {
                width: 100%;
                margin-bottom: 0;
            }

            .view-content .views-row .views-field-title > .field-content > a {
                display: block;
                padding-left: 0;
                font-size: 1.125rem;
                font-weight: 500;
                line-height: 1.35;
                overflow-wrap: anywhere;
            }

            .view-content .views-row .views-field.views-field-field-target-status {
                grid-area: status;
            }

            .view-content .views-row .views-field-field-time-period {
                grid-area: period;
            }

            .view-content .views-row .views-field-field-mentor {
                grid-area: mentor;
            }

            .view-content .views-row .views-field-field-short-term-target {
                grid-area: target;
            }

            .view-content .views-row .views-field-progress-review {
                grid-area: review;
            }

            .view-content .views-row :is(
                .views-field-field-target-status,
                .views-field-field-time-period,
                .views-field-field-mentor
            ) {
                display: grid;
                grid-template-columns: minmax(6.25rem, auto) 1fr;
                gap: .25rem .75rem;
                align-items: start;
                padding-top: 0;

                &::before {
                    font-weight: 600;
                    color: #208194;
                }
            }

            .view-content .views-row :is(
                .views-field-field-time-period,
                .views-field-field-mentor
            ) {
                padding-top: .25rem;
            }

            .view-content .views-row .views-field-field-mentor {
                padding-bottom: .75rem;
                border-bottom: 1px solid rgb(32 129 148 / 12%);
            }

            .view-content .views-row .views-field-field-target-status::before {
                content: "Status";
            }

            .view-content .views-row .views-field-field-time-period::before {
                content: "Time Period";
            }

            .view-content .views-row .views-field-field-mentor::before {
                content: "Mentor";
            }

            .view-content .views-row :is(
                .views-field-field-short-term-target,
                .views-field-progress-review
            ) {
                padding-top: .25rem;
            }

            .view-content .views-row .views-field-field-short-term-target details {
                background: rgb(32 129 148 / 5%);
                border: 1px solid rgb(32 129 148 / 12%);
                border-radius: .875rem;
                padding: .25rem .875rem;
            }
        }
    }
}

@media (max-width: 399px) {
    #block-ilp-targets-views-block {
        .ilp-targets-profile .view-content .views-row :is(
            .views-field-field-target-status,
            .views-field-field-time-period,
            .views-field-field-mentor
        ) {
            grid-template-columns: minmax(0, 1fr);
            gap: 0.12rem;
        }

        .ilp-targets-profile .view-content .views-row :is(
            .views-field-field-target-status,
            .views-field-field-time-period,
            .views-field-field-mentor
        ) > .field-content {
            min-inline-size: 0;
            overflow-wrap: anywhere;
            word-break: normal;
        }
    }
}

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

Learning Modules View

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

.learning-modules-view .view-content {
    display: grid;
    gap: 2rem;
    transition: 300ms ease-in-out;
}

.learning-modules-view .learning-modules-group {
    display: grid;
    gap: 1rem;
}

.learning-modules-view .learning-modules-group__title {
    margin: 0;
}

.learning-modules-view .learning-modules-group__grid {
    --learning-module-card-width: min(100%, 350px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--learning-module-card-width), var(--learning-module-card-width)));
    justify-content: start;
    gap: 0 2rem;
    grid-auto-rows: minmax(20px, 200px) minmax(20px, 250px);
    transition: 300ms ease-in-out;
}

.learning-modules-view .learning-modules-group__grid .views-row {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    margin-bottom: 2rem;
    border-radius: 1rem;
    overflow: clip;
    padding: 0;
    background: #142f3ce5;
    transition: 300ms ease-in-out;
    max-block-size: 450px;
    cursor: pointer;

    &:hover {

        .views-field-field-module-thumbnail {
            grid-row: span 2;

            img {
                block-size: 325px;
            }

            a:last-child img {
                -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent);
                mask-image: linear-gradient(to bottom, black 50%, transparent);
            }
        }

        .views-field-view-node {
            h3 {
                font-size: 1.25rem;
                transform: translateY(125px);
            }

            p {
                opacity: 0;
                transform: translateY(50px);
                block-size: 1px;
            }
        }
    }
}

.learning-modules-view .learning-modules-group__grid .views-field-field-module-thumbnail {
    transition: 300ms ease-in-out;

        &>.field-content {
            display: grid;
            grid-template-areas: "stack";
            position: relative;

        &>a{
            grid-area: stack;
        }

        & > a:first-child > img {
            filter: blur(12px);
            transform: scale(1.05);
        }

        & > a:first-child {
            z-index: 1;
        }
        & > a:last-child {
            z-index: 2;
        }
    }

    img {
        --border-rad: 0;
        inline-size: 100%;
        block-size: 200px;
        object-fit: cover;
        border-radius: var(--border-rad);
        transition: 200ms ease-in-out;
        transform-origin: top;
    }
}


.learning-modules-view .learning-modules-group__grid .views-field-view-node {
    z-index: 2;

    padding: 0 1rem 1rem;
    transition: 300ms ease-in-out;

    h3 {
        --font-size: 1rem;
        color: var(--clr-text-light);
        font-size: var(--font-size);
        margin-block: .75rem;
        transition: 300ms ease-in-out;
    }

    p {
        color: var(--clr-text-light);
        font-size: .75rem;
        opacity: .75;
        margin-block: .5rem .75rem;
        transition: 300ms ease-in-out;
    }
}

@media (max-inline-size: 700px) {
    .learning-modules-view {
        padding-inline: .35rem;
    }

    .learning-modules-view .view-content {
        gap: 1.5rem;
    }

    .learning-modules-view .learning-modules-group__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0 1rem;
        grid-auto-rows: 180px auto;
    }

    .learning-modules-view .learning-modules-group__grid .views-row {
        min-inline-size: 0;
        max-inline-size: 100%;
        max-block-size: none;
        margin-bottom: 1.25rem;
    }

    .learning-modules-view .learning-modules-group__grid .views-field-field-module-thumbnail {
        min-inline-size: 0;
    }

    .learning-modules-view .learning-modules-group__grid .views-field-field-module-thumbnail > .field-content {
        inline-size: 100%;
        overflow: hidden;
    }

    .learning-modules-view .learning-modules-group__grid .views-field-field-module-thumbnail > .field-content > a {
        display: block;
        inline-size: 100%;
        max-inline-size: 100%;
    }

    .learning-modules-view .learning-modules-group__grid .views-field-field-module-thumbnail img {
        display: block;
        inline-size: 100%;
        max-inline-size: 100%;
        block-size: 180px;
    }

    .learning-modules-view .learning-modules-group__grid .views-field-view-node {
        padding: 0 .75rem .85rem;
    }
}

/* Screening results view */
:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) {
    --screening-filter-border: color-mix(in srgb, var(--clr-outline, #b7d6df) 78%, white);
    --screening-filter-border-strong: color-mix(in srgb, var(--clr-accent, #157c8a) 24%, var(--screening-filter-border));
    --screening-filter-surface: color-mix(in srgb, white 76%, transparent);
    --screening-filter-surface-soft: color-mix(in srgb, white 46%, transparent);
    --screening-filter-gap: 1rem;

    margin-block-end: 1.5rem;
}

#views-exposed-form-screener-results-screening-results .form--inline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--screening-filter-gap);
    align-items: start;
    padding: 1rem;
    position: relative;
    border: 1px solid var(--screening-filter-border);
    border-radius: .9rem;
    background: var(--screening-filter-surface-soft);
}

#views-exposed-form-screener-results-provider-screening-results .form--inline {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--screening-filter-gap);
    align-items: start;
    padding: 1rem;
    position: relative;
    border: 1px solid var(--screening-filter-border);
    border-radius: .9rem;
    background: var(--screening-filter-surface-soft);
}

#views-exposed-form-screener-results-screening-results :is(.js-form-item, .form-actions, details) {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
}

#views-exposed-form-screener-results-provider-screening-results :is(.js-form-item, .form-actions, details) {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .js-form-item {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .form--inline > .js-form-item {
    padding: 1rem;
    border: 1px solid var(--screening-filter-border);
    border-radius: .7rem;
    background: var(--screening-filter-surface);
    position: relative;
    z-index: 1;
}

#views-exposed-form-screener-results-provider-screening-results .form--inline > .js-form-item {
    grid-column: span 2;
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .js-form-item > label,
:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) legend {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--clr-text-dark, #2d4850);
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary,
:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .form-actions {
    grid-column: 1 / -1;
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .form--inline > .form-actions {
    border: 0;
    background: transparent;
    padding: 0;
}

#views-exposed-form-screener-results-screening-results :is(.form-text, .form-select, .form-date) {
    inline-size: 100%;
    min-inline-size: 0;
    border-color: transparent;
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

#views-exposed-form-screener-results-provider-screening-results :is(.form-text, .form-select, .form-date) {
    inline-size: 100%;
    min-inline-size: 0;
    border-color: transparent;
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

#views-exposed-form-screener-results-screening-results .form--inline > .js-form-item:hover :is(.form-text, .form-select, .form-date),
#views-exposed-form-screener-results-screening-results .form--inline > .js-form-item:focus-within :is(.form-text, .form-select, .form-date),
#views-exposed-form-screener-results-screening-results .bef--secondary .details-wrapper > .js-form-item:hover :is(.form-text, .form-select, .form-date),
#views-exposed-form-screener-results-screening-results .bef--secondary .details-wrapper > .js-form-item:focus-within :is(.form-text, .form-select, .form-date),
#views-exposed-form-screener-results-screening-results .bef--secondary fieldset:hover :is(.form-text, .form-select, .form-date),
#views-exposed-form-screener-results-screening-results .bef--secondary fieldset:focus-within :is(.form-text, .form-select, .form-date) {
    border-color: var(--clr-accent, #157c8a);
}

#views-exposed-form-screener-results-provider-screening-results .form--inline > .js-form-item:hover :is(.form-text, .form-select, .form-date),
#views-exposed-form-screener-results-provider-screening-results .form--inline > .js-form-item:focus-within :is(.form-text, .form-select, .form-date),
#views-exposed-form-screener-results-provider-screening-results .bef--secondary .details-wrapper > .js-form-item:hover :is(.form-text, .form-select, .form-date),
#views-exposed-form-screener-results-provider-screening-results .bef--secondary .details-wrapper > .js-form-item:focus-within :is(.form-text, .form-select, .form-date),
#views-exposed-form-screener-results-provider-screening-results .bef--secondary fieldset:hover :is(.form-text, .form-select, .form-date),
#views-exposed-form-screener-results-provider-screening-results .bef--secondary fieldset:focus-within :is(.form-text, .form-select, .form-date) {
    border-color: var(--clr-accent, #157c8a);
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary {
    border: 1px solid var(--screening-filter-border);
    border-radius: .7rem;
    background: var(--screening-filter-surface-soft);
    overflow: clip;
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem 1rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--clr-text-dark, #2d4850);
    list-style: none;
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary > summary::-webkit-details-marker {
    display: none;
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary > summary::after {
    content: "+";
    font-size: 1.15rem;
    line-height: 1;
    color: var(--clr-accent, #157c8a);
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary[open] > summary {
    border-block-end: 1px solid var(--screening-filter-border);
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary[open] > summary::after {
    content: "−";
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .details-wrapper {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--screening-filter-gap);
    padding: 1rem;
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary fieldset {
    min-inline-size: 0;
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--screening-filter-border);
    border-radius: .7rem;
    background: var(--screening-filter-surface);
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary fieldset > legend {
    padding-inline: .2rem;
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .fieldset-wrapper {
    display: grid;
    gap: .65rem;
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .details-wrapper > #edit-field-screener-started-value-wrapper,
:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .details-wrapper > #edit-field-screener-completed-value-1-wrapper {
    grid-column: span 3;
    inline-size: 100%;
    min-inline-size: 0;
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .details-wrapper > #edit-field-screener-started-value-wrapper {
    grid-column: 1 / 4;
    grid-row: 2;
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .details-wrapper > #edit-field-screener-completed-value-1-wrapper {
    grid-column: 4 / 7;
    grid-row: 2;
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .details-wrapper > .js-form-item-field-name-value {
    grid-column: 1 / 4;
    grid-row: 1;
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .details-wrapper > .form-item-field-email-value {
    grid-column: 4 / 7;
    grid-row: 1;
}

#views-exposed-form-screener-results-screening-results .bef--secondary .details-wrapper > :is(
    .js-form-item-field-name-value,
    .form-item-field-email-value
) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: .85rem;
    padding: 1rem;
    border: 1px solid var(--screening-filter-border);
    border-radius: .7rem;
    background: var(--screening-filter-surface);
}

#views-exposed-form-screener-results-provider-screening-results .bef--secondary .details-wrapper > :is(
    .js-form-item-field-name-value,
    .form-item-field-email-value
) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: .85rem;
    padding: 1rem;
    border: 1px solid var(--screening-filter-border);
    border-radius: .7rem;
    background: var(--screening-filter-surface);
}

#views-exposed-form-screener-results-screening-results .bef--secondary .details-wrapper > :is(
    .js-form-item-field-name-value,
    .form-item-field-email-value
) > label {
    margin: 0;
    white-space: nowrap;
}

#views-exposed-form-screener-results-provider-screening-results .bef--secondary .details-wrapper > :is(
    .js-form-item-field-name-value,
    .form-item-field-email-value
) > label {
    margin: 0;
    white-space: nowrap;
}

#views-exposed-form-screener-results-screening-results .bef--secondary .details-wrapper > :is(
    #edit-field-screener-started-value-wrapper,
    #edit-field-screener-completed-value-1-wrapper
) > fieldset {
    inline-size: 100%;
}

#views-exposed-form-screener-results-provider-screening-results .bef--secondary .details-wrapper > :is(
    #edit-field-screener-started-value-wrapper,
    #edit-field-screener-completed-value-1-wrapper
) > fieldset {
    inline-size: 100%;
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .details-wrapper > #edit-field-safeguarding-flag-value--wrapper,
:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .details-wrapper > #edit-field-trauma-flagged-value--wrapper,
:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .details-wrapper > #edit-field-wellbeing-flagged-value--wrapper {
    grid-column: span 2;
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .details-wrapper > #edit-field-safeguarding-flag-value--wrapper {
    grid-column: 1 / 3;
    grid-row: 3;
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .details-wrapper > #edit-field-trauma-flagged-value--wrapper {
    grid-column: 5 / 7;
    grid-row: 3;
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .details-wrapper > #edit-field-wellbeing-flagged-value--wrapper {
    grid-column: 3 / 5;
    grid-row: 3;
}

#views-exposed-form-screener-results-screening-results .bef--secondary :is(
    #edit-field-safeguarding-flag-value--wrapper,
    #edit-field-trauma-flagged-value--wrapper,
    #edit-field-wellbeing-flagged-value--wrapper
) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0;
}

#views-exposed-form-screener-results-provider-screening-results .bef--secondary :is(
    #edit-field-safeguarding-flag-value--wrapper,
    #edit-field-trauma-flagged-value--wrapper,
    #edit-field-wellbeing-flagged-value--wrapper
) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0;
}

#views-exposed-form-screener-results-screening-results .bef--secondary :is(
    #edit-field-safeguarding-flag-value--wrapper,
    #edit-field-trauma-flagged-value--wrapper,
    #edit-field-wellbeing-flagged-value--wrapper
) > legend {
    padding-inline: 0;
}

#views-exposed-form-screener-results-provider-screening-results .bef--secondary :is(
    #edit-field-safeguarding-flag-value--wrapper,
    #edit-field-trauma-flagged-value--wrapper,
    #edit-field-wellbeing-flagged-value--wrapper
) > legend {
    padding-inline: 0;
}

#views-exposed-form-screener-results-screening-results .bef--secondary :is(
    #edit-field-safeguarding-flag-value--wrapper,
    #edit-field-trauma-flagged-value--wrapper,
    #edit-field-wellbeing-flagged-value--wrapper
) > .fieldset-wrapper {
    justify-self: end;
    display: flex;
    align-items: center;
}

#views-exposed-form-screener-results-provider-screening-results .bef--secondary :is(
    #edit-field-safeguarding-flag-value--wrapper,
    #edit-field-trauma-flagged-value--wrapper,
    #edit-field-wellbeing-flagged-value--wrapper
) > .fieldset-wrapper {
    justify-self: end;
    display: flex;
    align-items: center;
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .form-checkboxes,
:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .form-type-checkbox {
    display: flex;
    align-items: center;
    gap: .55rem;
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .form-type-checkbox {
    margin: 0;
}

#views-exposed-form-screener-results-screening-results .bef--secondary :is(
    .js-form-item-field-safeguarding-flag-value-1,
    .js-form-item-field-trauma-flagged-value-1,
    .js-form-item-field-wellbeing-flagged-value-1
) .form-checkbox {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}

#views-exposed-form-screener-results-provider-screening-results .bef--secondary :is(
    .js-form-item-field-safeguarding-flag-value-1,
    .js-form-item-field-trauma-flagged-value-1,
    .js-form-item-field-wellbeing-flagged-value-1
) .form-checkbox {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .form-type-checkbox .option {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 5rem;
    padding: .55rem .95rem;
    border: 1px solid var(--screening-filter-border-strong);
    border-radius: 999px;
    background: color-mix(in srgb, white 84%, var(--clr-accent, #157c8a) 16%);
    font-weight: 600;
    color: var(--clr-text-dark, #2d4850);
    cursor: pointer;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

#views-exposed-form-screener-results-screening-results .bef--secondary :is(
    .js-form-item-field-safeguarding-flag-value-1,
    .js-form-item-field-trauma-flagged-value-1,
    .js-form-item-field-wellbeing-flagged-value-1
) .option:hover {
    background: color-mix(in srgb, white 68%, var(--clr-accent, #157c8a) 32%);
    border-color: color-mix(in srgb, var(--clr-accent, #157c8a) 48%, white);
}

#views-exposed-form-screener-results-provider-screening-results .bef--secondary :is(
    .js-form-item-field-safeguarding-flag-value-1,
    .js-form-item-field-trauma-flagged-value-1,
    .js-form-item-field-wellbeing-flagged-value-1
) .option:hover {
    background: color-mix(in srgb, white 68%, var(--clr-accent, #157c8a) 32%);
    border-color: color-mix(in srgb, var(--clr-accent, #157c8a) 48%, white);
}

#views-exposed-form-screener-results-screening-results .bef--secondary :is(
    .js-form-item-field-safeguarding-flag-value-1,
    .js-form-item-field-trauma-flagged-value-1,
    .js-form-item-field-wellbeing-flagged-value-1
) .form-checkbox:focus-visible + .option {
    outline: 0;
    box-shadow:
        0 0 0 .18rem color-mix(in srgb, white 92%, transparent),
        0 0 0 .34rem color-mix(in srgb, var(--clr-accent, #157c8a) 38%, transparent);
    border-color: color-mix(in srgb, var(--clr-accent, #157c8a) 58%, white);
}

#views-exposed-form-screener-results-provider-screening-results .bef--secondary :is(
    .js-form-item-field-safeguarding-flag-value-1,
    .js-form-item-field-trauma-flagged-value-1,
    .js-form-item-field-wellbeing-flagged-value-1
) .form-checkbox:focus-visible + .option {
    outline: 0;
    box-shadow:
        0 0 0 .18rem color-mix(in srgb, white 92%, transparent),
        0 0 0 .34rem color-mix(in srgb, var(--clr-accent, #157c8a) 38%, transparent);
    border-color: color-mix(in srgb, var(--clr-accent, #157c8a) 58%, white);
}

#views-exposed-form-screener-results-screening-results .bef--secondary :is(
    .js-form-item-field-safeguarding-flag-value-1,
    .js-form-item-field-trauma-flagged-value-1,
    .js-form-item-field-wellbeing-flagged-value-1
) .form-checkbox:checked + .option {
    background: var(--clr-accent, #157c8a);
    border-color: var(--clr-accent, #157c8a);
    color: white;
    box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--clr-accent, #157c8a) 18%, transparent);
}

#views-exposed-form-screener-results-provider-screening-results .bef--secondary :is(
    .js-form-item-field-safeguarding-flag-value-1,
    .js-form-item-field-trauma-flagged-value-1,
    .js-form-item-field-wellbeing-flagged-value-1
) .form-checkbox:checked + .option {
    background: var(--clr-accent, #157c8a);
    border-color: var(--clr-accent, #157c8a);
    color: white;
    box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--clr-accent, #157c8a) 18%, transparent);
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .form-wrapper > fieldset .fieldset-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .js-form-type-date {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: .65rem;
    row-gap: 0;
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .js-form-type-date > label {
    position: relative;
    inline-size: fit-content;
    min-block-size: auto;
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .js-form-type-date > label::after {
    display: block;
    font-size: .875rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--clr-text-dark, #2d4850);
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .js-form-type-date > label[for$="-min"]::after {
    content: "Start";
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .js-form-type-date > label[for$="-max"]::after {
    content: "End";
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .js-form-type-date .form-date {
    min-inline-size: 0;
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .form-actions {
    display: flex;
    justify-content: flex-start;
    gap: .85rem;
    flex-wrap: wrap;
}

:is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .form-actions .button {
    min-inline-size: 10rem;
    margin: 0;
    padding-inline: 2rem;
}

@media (max-width: 1100px) {
    :is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .form--inline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    :is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .form--inline {
        grid-template-columns: minmax(0, 1fr);
    }

    :is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .details-wrapper,
    :is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .form-wrapper > fieldset .fieldset-wrapper {
        grid-template-columns: minmax(0, 1fr);
    }

    :is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .details-wrapper > #edit-field-screener-started-value-wrapper,
    :is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .details-wrapper > #edit-field-screener-completed-value-1-wrapper,
    :is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .details-wrapper > .js-form-item-field-name-value,
    :is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .details-wrapper > .js-form-item-mail,
    :is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .details-wrapper > #edit-field-safeguarding-flag-value--wrapper,
    :is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .details-wrapper > #edit-field-trauma-flagged-value--wrapper,
    :is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary .details-wrapper > #edit-field-wellbeing-flagged-value--wrapper {
        grid-column: 1;
        grid-row: auto;
    }

    #views-exposed-form-screener-results-screening-results .bef--secondary :is(
        #edit-field-safeguarding-flag-value--wrapper,
        #edit-field-trauma-flagged-value--wrapper,
        #edit-field-wellbeing-flagged-value--wrapper
    ) {
        grid-template-columns: minmax(0, 1fr);
        row-gap: .75rem;
    }

    #views-exposed-form-screener-results-screening-results .bef--secondary .details-wrapper > :is(
        .js-form-item-field-name-value,
        .js-form-item-mail
    ) {
        grid-template-columns: minmax(0, 1fr);
        row-gap: .5rem;
    }

    #views-exposed-form-screener-results-provider-screening-results .bef--secondary .details-wrapper > :is(
        .js-form-item-field-name-value,
        .js-form-item-mail
    ) {
        grid-template-columns: minmax(0, 1fr);
        row-gap: .5rem;
    }

    #views-exposed-form-screener-results-screening-results .bef--secondary :is(
        #edit-field-safeguarding-flag-value--wrapper,
        #edit-field-trauma-flagged-value--wrapper,
        #edit-field-wellbeing-flagged-value--wrapper
    ) > .fieldset-wrapper {
        justify-self: start;
    }

    #views-exposed-form-screener-results-provider-screening-results .bef--secondary :is(
        #edit-field-safeguarding-flag-value--wrapper,
        #edit-field-trauma-flagged-value--wrapper,
        #edit-field-wellbeing-flagged-value--wrapper
    ) > .fieldset-wrapper {
        justify-self: start;
    }

    :is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .bef--secondary > summary {
        padding-inline: .9rem;
    }

    :is(#views-exposed-form-screener-results-screening-results, #views-exposed-form-screener-results-provider-screening-results) .form-actions .button {
        inline-size: 100%;
        min-inline-size: 0;
    }
}

/* Safeguarding tracker exposed filters */
#views-exposed-form-safeguarding-tracker-safeguarding-tracker {
    --safeguarding-filter-border: color-mix(in srgb, var(--clr-outline, #b7d6df) 78%, white);
    --safeguarding-filter-border-strong: color-mix(in srgb, var(--clr-accent, #157c8a) 24%, var(--safeguarding-filter-border));
    --safeguarding-filter-surface: color-mix(in srgb, white 76%, transparent);
    --safeguarding-filter-surface-soft: color-mix(in srgb, white 46%, transparent);
    --safeguarding-filter-gap: 1rem;

    margin-block-end: 1.5rem;
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .form--inline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--safeguarding-filter-gap);
    align-items: start;
    padding: 1rem;
    position: relative;
    border: 1px solid var(--safeguarding-filter-border);
    border-radius: .9rem;
    background: var(--safeguarding-filter-surface-soft);
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .form--inline > :is(.js-form-item, .form-actions, details) {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .form--inline > .js-form-item {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1rem;
    border: 1px solid var(--safeguarding-filter-border);
    border-radius: .7rem;
    background: var(--safeguarding-filter-surface);
    position: relative;
    z-index: 1;
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker :is(.js-form-item, .form-actions, details, fieldset) {
    min-inline-size: 0;
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .js-form-item > label,
#views-exposed-form-safeguarding-tracker-safeguarding-tracker legend {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--clr-text-dark, #2d4850);
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .form--inline > :is(.bef--secondary, .form-actions) {
    grid-column: 1 / -1;
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .form--inline > .form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border: 0;
    background: transparent;
    padding: 0;
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker :is(.form-text, .form-select, .form-date) {
    inline-size: 100%;
    min-inline-size: 0;
    border-color: transparent;
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .form--inline > .js-form-item:hover :is(.form-text, .form-select),
#views-exposed-form-safeguarding-tracker-safeguarding-tracker .form--inline > .js-form-item:focus-within :is(.form-text, .form-select),
#views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary .details-wrapper > .js-form-wrapper:hover :is(.form-text, .form-select, .form-date),
#views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary .details-wrapper > .js-form-wrapper:focus-within :is(.form-text, .form-select, .form-date),
#views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary fieldset:hover :is(.form-text, .form-select, .form-date),
#views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary fieldset:focus-within :is(.form-text, .form-select, .form-date) {
    border-color: var(--clr-accent, #157c8a);
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary {
    border: 1px solid var(--safeguarding-filter-border);
    border-radius: .7rem;
    background: var(--safeguarding-filter-surface-soft);
    overflow: clip;
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem 1rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--clr-text-dark, #2d4850);
    list-style: none;
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary > summary::-webkit-details-marker {
    display: none;
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary > summary::after {
    content: "+";
    font-size: 1.15rem;
    line-height: 1;
    color: var(--clr-accent, #157c8a);
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary[open] > summary {
    border-block-end: 1px solid var(--safeguarding-filter-border);
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary[open] > summary::after {
    content: "−";
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary .details-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--safeguarding-filter-gap);
    padding: 1rem;
    align-items: start;
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary .details-wrapper > #edit-field-concern-areas-value--wrapper,
#views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary .details-wrapper > #edit-created-wrapper {
    margin: 0;
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary .details-wrapper > #edit-field-concern-areas-value--wrapper {
    grid-column: 1;
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary .details-wrapper > #edit-created-wrapper {
    grid-column: 1;
    inline-size: min(100%, 42rem);
    justify-self: start;
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary fieldset {
    min-inline-size: 0;
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--safeguarding-filter-border);
    border-radius: .7rem;
    background: var(--safeguarding-filter-surface);
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary fieldset > legend {
    padding-inline: .2rem;
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary .fieldset-wrapper {
    display: grid;
    gap: .65rem;
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary :is(
    #edit-field-concern-areas-value,
    #edit-field-concern-areas-value .bef-checkboxes
) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .55rem 1.15rem;
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary #edit-field-concern-areas-value .js-form-item {
    display: flex;
    flex: 1 1 16rem;
    align-items: flex-start;
    min-inline-size: min(100%, 15rem);
    gap: .65rem;
    margin: 0;
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary #edit-field-concern-areas-value .form-checkbox {
    margin-top: .15rem;
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary #edit-created-wrapper--2 > .fieldset-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem 1.15rem;
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary #edit-created-wrapper--2 .js-form-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: .7rem;
    row-gap: 0;
    margin: 0;
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary #edit-created-wrapper--2 .js-form-item > label {
    position: relative;
    inline-size: fit-content;
    min-block-size: auto;
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary #edit-created-wrapper--2 .js-form-item > label::after {
    display: block;
    font-size: .875rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--clr-text-dark, #2d4850);
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary #edit-created-wrapper--2 .js-form-item > label[for$="-min"]::after {
    content: "Start";
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary #edit-created-wrapper--2 .js-form-item > label[for$="-max"]::after {
    content: "End";
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary #edit-created-wrapper--2 .form-date {
    min-inline-size: 0;
}

#views-exposed-form-safeguarding-tracker-safeguarding-tracker .form-actions .button {
    margin-top: 0;
}

@media (max-width: 1000px) {
    #views-exposed-form-safeguarding-tracker-safeguarding-tracker .form--inline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    #views-exposed-form-safeguarding-tracker-safeguarding-tracker .form--inline {
        grid-template-columns: minmax(0, 1fr);
    }

    #views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary #edit-created-wrapper {
        inline-size: 100%;
    }

    #views-exposed-form-safeguarding-tracker-safeguarding-tracker .bef--secondary #edit-created-wrapper--2 > .fieldset-wrapper {
        grid-template-columns: minmax(0, 1fr);
    }

    #views-exposed-form-safeguarding-tracker-safeguarding-tracker .form--inline > .form-actions {
        justify-content: stretch;
    }

    #views-exposed-form-safeguarding-tracker-safeguarding-tracker .form-actions .button {
        inline-size: 100%;
        min-inline-size: 0;
    }
}

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

safeguarding Tracker View

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

.view-safeguarding-tracker {
    --tracker-cell-border: rgba(32, 129, 148, 0.14);
    --tracker-cell-padding-block: 0.65rem;
    --tracker-cell-padding-inline: 0.85rem;
    --tracker-cell-min-height: 5.7rem;
    --tracker-heading-min-height: 2.4rem;
}

.view-safeguarding-tracker .views-row {
    display: grid;
    grid-template-columns:
        minmax(12rem, 1fr)
        minmax(16rem, 1fr)
        minmax(12ch, 0.45fr)
        minmax(15ch, 1fr)
        minmax(18ch, 0.8fr);
    align-items: stretch;

    .views-field {
        min-inline-size: 0;
    }

    .views-field:not(.views-field-rendered-note) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-block-size: var(--tracker-cell-min-height);
        padding: var(--tracker-cell-padding-block) var(--tracker-cell-padding-inline);
        border-top: 1px solid var(--tracker-cell-border);
        border-bottom: 1px solid var(--tracker-cell-border);
        border-right: 1px solid var(--tracker-cell-border);
    }

    .views-field-field-name {
        border-left: 1px solid var(--tracker-cell-border);
    }

    .views-field-rendered-note {
        grid-column: 1 / -1;
        padding: var(--tracker-cell-padding-block) var(--tracker-cell-padding-inline) 0.8rem;
        border: 1px solid var(--tracker-cell-border);
        border-top: 0;
    }

    &:first-child {
        .views-field:not(.views-field-rendered-note) {
            position: relative;
            padding-top: calc(var(--tracker-heading-min-height) + var(--tracker-cell-padding-block));

            &::before {
                position: absolute;
                inset: 0 0 auto 0;
                display: flex;
                align-items: center;
                min-block-size: var(--tracker-heading-min-height);
                padding: 0.45rem var(--tracker-cell-padding-inline);
                font-weight: 600;
                color: #208194;
                line-height: 1.2;
                border-bottom: 2px solid var(--tracker-cell-border);
                white-space: nowrap;
                box-sizing: border-box;
            }
        }
        
        .views-field-field-name::before{
            content: "Name";
        }
        .views-field-field-concern-level::before{
            content: "Concern level and areas";
        }
        .views-field-field-safeguarding-note-count::before{
            content: "Note count";
        }
        .views-field-author-name::before{
            content: "Posted by";
        }
        .views-field-created::before{
            content: "Posted on";
        }
    }

    .views-field-field-safeguarding-note-count .field-content {
        text-align: center;
    }

    &:first-child .views-field-field-safeguarding-note-count::before {
        justify-content: center;
    }

    .views-field-rendered-note details {
        border: 0;
        margin-top: 0;

        summary {
            padding-block: 0;
        }
    }
}

.view-safeguarding-tracker .safeguarding-tracker__concern {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.25rem;
    align-items: baseline;
    min-inline-size: 0;
}

.view-safeguarding-tracker .safeguarding-tracker__label {
    white-space: nowrap;
}

.view-safeguarding-tracker .safeguarding-tracker__areas {
    display: block;
    min-inline-size: 0;
    max-inline-size: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: help;
}

.view-safeguarding-tracker .safeguarding-tracker__concern.is-areas-truncated:hover::after {
    content: attr(data-full);
    position: absolute;
    inset-inline-start: 0;
    top: calc(100% + 0.35rem);
    z-index: 20;
    inline-size: max-content;
    max-inline-size: 36ch;
    padding: 0.45rem 0.6rem;
    border: 1px solid rgba(32, 129, 148, 0.2);
    border-radius: 0.7rem;
    background: #fff;
    box-shadow: 0 12px 24px rgba(18, 58, 66, 0.14);
    color: #2b2b2b;
    line-height: 1.45;
    white-space: normal;
    pointer-events: none;
}

.view-screener-results tbody tr .view-field-name-email {
    padding-left: 1.25rem;
}

.screener-outcome-popout {
    position: fixed;
    z-index: 20;
    opacity: 0;
    visibility: hidden;

    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;

    inline-size: min(42rem, calc(100vw - 2rem));
    max-block-size: min(18rem, calc(100vh - 2rem));
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(32, 129, 148, 0.2);
    border-radius: 0.7rem;
    box-shadow: 0 12px 24px rgba(18, 58, 66, 0.14);
    padding: 0.45rem 0.6rem;
    font-size: 1rem;
    color: #2b2b2b;
    line-height: 1.45;
    pointer-events: none;

    transition: opacity 180ms ease, visibility 180ms ease;
}

.screener-outcome-popout .outcome-item:empty {
    display: none;
}

.screener-outcome-popout .outcome-item:not(:empty):has(~ .outcome-item:not(:empty))::after {
    content: ",";
}
.view-screener-results .views-screener-outcome-field {
    cursor: help;
}

.screener-outcome-popout.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.view-screener-results {
    --screener-row-pending: #7a869a;
    --screener-row-urgent: #c0392b;
    --screener-row-priority: #9a7bc0;
    --screener-row-discussion: #e38b1f;
    --screener-row-support: #d4a017;
    --screener-row-review: #9f7a0d;
    --screener-row-wellbeing: #b7862e;
    --screener-row-trauma: #b76549;
    --screener-row-no-referral: #2f8f57;
}

.view-screener-results .views-table tbody tr.screener-results-row--pending {
    --screener-row-accent: var(--screener-row-pending);
}

.view-screener-results .views-table tbody tr.screener-results-row--safeguarding,
.view-screener-results .views-table tbody tr.screener-results-row--urgent {
    --screener-row-accent: var(--screener-row-urgent);
}

.view-screener-results .views-table tbody tr.screener-results-row--priority {
    --screener-row-accent: var(--screener-row-priority);
}

.view-screener-results .views-table tbody tr.screener-results-row--discussion {
    --screener-row-accent: var(--screener-row-discussion);
}

.view-screener-results .views-table tbody tr.screener-results-row--support {
    --screener-row-accent: var(--screener-row-support);
}

.view-screener-results .views-table tbody tr.screener-results-row--review {
    --screener-row-accent: var(--screener-row-review);
}

.view-screener-results .views-table tbody tr.screener-results-row--wellbeing {
    --screener-row-accent: var(--screener-row-wellbeing);
}

.view-screener-results .views-table tbody tr.screener-results-row--trauma {
    --screener-row-accent: var(--screener-row-trauma);
}

.view-screener-results .views-table tbody tr.screener-results-row--no-referral {
    --screener-row-accent: var(--screener-row-no-referral);
}

.view-screener-results .views-table tbody tr.screener-results-row > td {
    transition: background-color 180ms ease, box-shadow 180ms ease;
}

.view-screener-results .views-table tbody tr[class*="screener-results-row--"]::before {
    background-color: color-mix(in srgb, var(--screener-row-accent) 13%, white);
    color: color-mix(in srgb, var(--screener-row-accent) 78%, #2b2b2b);
    transition: background-color 180ms ease, color 180ms ease;
}

.view-screener-results .views-table tbody tr[class*="screener-results-row--"] > td {
    background-color: color-mix(in srgb, var(--screener-row-accent) 13%, white);
}

.view-screener-results .views-table tbody tr[class*="screener-results-row--"] > td:first-child {
    box-shadow: inset 0.35rem 0 0 var(--screener-row-accent);
}

.view-screener-results .views-table tbody tr[class*="screener-results-row--"]:hover > td {
    background-color: color-mix(in srgb, var(--screener-row-accent) 18%, white);
}

.view-screener-results .views-table tbody tr[class*="screener-results-row--"]:hover::before {
    background-color: color-mix(in srgb, var(--screener-row-accent) 18%, white);
}