@import url("global.css");
@import url("framework-tweaks.css");

.form-container {
    /* min-height: 100vh; */
    position: relative;

    background: var(--lightGradient);
    background-attachment: fixed;
    background-repeat: no-repeat;

    .my-app-dark & {
        /* background: var(--darkGradient); */
        background: transparent;
    }

    .on-admin-page,
    .on-tutorial-page & {
        min-height: auto;
    }

    /* .form-header {
        .on-admin-page & {
            padding-top: 0;
        }
    } */

    .form-footer {
        padding-bottom: 100px;

        .on-admin-page & {
            padding-bottom: 0;
        }
    }

    .form-background {
        /* min-height: 100vh; */

        .on-admin-page & {
            min-height: auto;
            padding: 0 1rem;
            height: 100%;
        }
    }

    .logo-cac {
        max-width: 200px;
    }

    [data-invalid="true"] {
        color: var(--cacredcolor);
        border-color: var(--cacredcolor);

        .formkit-inner {
            box-shadow: 0 0 0 1px var(--cacredcolor);
        }
    }

    .card {
        background-color: light-dark(rgba(255, 255, 255, .25), rgba(33, 37, 41, .25));
    }

    .container-narrow {
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 0;
        width: 100%;
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
        margin-right: auto;
        margin-left: auto;
        max-width: 720px;
    }

    /* Submit button placement */
    .formkit-actions .formkit-wrapper {
        display: flex;
        justify-content: flex-end
    }

    /* Pills and coloring */
    .prop-department,
    .prop-locationId,
    .prop-jobTitle,
    .prop-employeeId,
    .prop-teamColor,
    .prop-name,
    .badge {
        border-radius: 0.375rem;
        padding: 0.25em 0.35em;
        font-size: 0.75em;
        font-weight: 700;
        display: inline-block;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border: 2px solid var(--borderColor);
    }

    .prop-department[data-value="Administrative"],
    .prop-employeeId {
        border: 2px solid light-dark(var(--borderColor), var(--borderColor));
        background-color: light-dark(var(--borderColor), var(--borderColor));
        color: light-dark(var(--light), var(--light));
    }

    .prop-department[data-value="Information Technology"],
    .prop-teamColor[data-value="BLACK"] {
        border: 2px solid light-dark(black, black);
        background-color: light-dark(black, black);
        color: light-dark(var(--light), var(--light));
    }

   
    .prop-teamColor[data-value="BLUE"] {
        border: 2px solid light-dark(var(--cacbluebg), var(--cacbluebg));
        background-color: light-dark(var(--cacbluebg), var(--cacbluebg));
        color: light-dark(var(--dark), var(--dark));
    }
    
    
    .prop-teamColor[data-value="GREEN"] {
        border: 2px solid light-dark(var(--cacgreenbg), var(--cacgreenbg));
        background-color: light-dark(var(--cacgreenbg), var(--cacgreenbg));
        color: light-dark(var(--dark), var(--dark));
    }
    
    .prop-teamColor[data-value="RED"] {
        border: 2px solid light-dark(var(--cacredbg), var(--cacredbg));
        background-color: light-dark(var(--cacredbg), var(--cacredbg));
        color: light-dark(var(--dark), var(--dark));
    }
    
    .prop-department[data-value="Human Resources"],
    .prop-jobTitle[data-value="Behavior Technician"] {
        border: 2px solid light-dark(var(--btColor), var(--btColor));
        background-color: light-dark(var(--btColor), var(--btColor));
        color: light-dark(var(--dark), var(--dark));
    }
    
    .prop-department[data-value="Director of Outreach and Enrollment"],
    .prop-jobTitle[data-value="Registered Behavior Technician"] {
        border: 2px solid light-dark(var(--rbtColor), var(--rbtColor));
        background-color: light-dark(var(--rbtColor), var(--rbtColor));
        color: light-dark(var(--dark), var(--dark));
    }
    
    .prop-department[data-value="Operations"],
    .prop-jobTitle[data-value="Registered Behavior Technician III"] {
        border: 2px solid light-dark(var(--rbt3Color), var(--rbt3Color));
        background-color: light-dark(var(--rbt3Color), var(--rbt3Color));
        color: light-dark(white, white);
    }
    
    .prop-department[data-value="Billing and Claims"],
    .prop-jobTitle[data-value="Registered Behavior Technician IV"] {
        border: 2px solid light-dark(var(--rbt4Color), var(--rbt4Color));
        background-color: light-dark(var(--rbt4Color), var(--rbt4Color));
        color: light-dark(white, white);
    }

    .prop-department[data-value="Clinical Admin"] {
        border: 2px solid light-dark(var(--caColor), var(--caColor));
        background-color: light-dark(var(--caColor), var(--caColor));
        color: light-dark(white, white);
    }
    
    .prop-department[data-value="Marketing and Communications"],
    .prop-jobTitle[data-value="Case Supervisor"] {
        border: 2px solid light-dark(var(--cmColor), var(--cmColor));
        background-color: light-dark(var(--cmColor), var(--cmColor));
        color: light-dark(white, white);
    }

    .prop-displayName[data-value="No Manager"] {
        color: var(--cacredcolor);
    }

    .label-offset-1 {
        margin-top: 1.375rem;
    }

    .label-offset-2 {
        margin-top: 2.75rem;
    }

    .editor-debug-header {
        position: sticky;
        z-index: 2;
        top: 100px;
        pointer-events: none;

        >* {
            pointer-events: all;
        }

        .on-admin-page & {
            display: flex;
            top: 0px;
            background-color: light-dark(var(--light), var(--dark));
            border-bottom: 1px solid rgb(63, 63, 70);
            height: 50px;
        }

        .p-multiselect-label {
            font-size: .9rem;
            padding-bottom: 2px;
        }

        .p-inputgroup {
            width: auto;
        }
    }

    .revealed-if {
        opacity: .5;
        color: light-dark(var(--cacbluecolor), var(--cacorangecolor));
        transition: opacity 250ms;

        &:focus-within,
        &:focus,
        &:hover {
            opacity: 1;
        }

        .formkit-inner {
            box-shadow: 0 0 0 1px var(--cacorangebg);
        }
    }

    .language-picker {
        @media (min-width: 768px) {
            display: flex;
            justify-content: flex-end;

        }

        .p-select {
            width: 100%;

            @media (min-width: 768px) {
                width: 200px
            }
        }
    }

    .btn-themeToggler {
        aspect-ratio: 1/1;
        width: 58px;
    }
}

[data-type="radio"][data-empty="true"] .formkit-inner,
[data-type="radio"][data-invalid="true"] .formkit-inner,
[data-type="checkbox"][data-empty="true"] .formkit-inner,
[data-type="checkbox"][data-invalid="true"] .formkit-inner {
    box-shadow: 0 0 0 transparent;
}

.form-header {
    .eraser {
        width: 58px;
    }
}

/* .form-header+.language-picker {
    margin-bottom: 1rem;

    @media (min-width: 768px) {
        position: absolute;
        top: 26px;
        right: 78px;
    }
} */

.headerVisible {
    margin-top: 100px;

    .on-admin-page & {
        margin-top: 0;
    }
}

.user-banner,
.response-banner {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    background-color: light-dark(var(--light), var(--dark));
    z-index: 3;

    .p-button {
        text-wrap: nowrap;

        @media (width < 768px) {
            font-size: 0.8rem;
        }
    }
}

.loggedin-displayname {
    font-size: 1.8rem;

    @media (width < 768px) {
        font-size: 1.2rem;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}

.response-datetime,
.response-ipaddress {
    font-size: 1.8rem;
}

.is-editor-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    background-color: light-dark(white, black);
    height: 40px;
    overflow: hidden;

    &[data-form-type="Public"] {
        background-color: var(--cacredbg);
    }

    &[data-form-type="Internal"] {
        background-color: var(--cacgreenbg);
    }

    &[data-form-type="Targeted"] {
        background-color: var(--cacorangebg);
    }

    &+.user-banner,
    &+.response-banner {
        top: 40px;
    }
}

[data-type='repeater'] {
    &>.formkit-fieldset:focus-within {
        border: 0;
    }

    .formkit-fieldset {
        padding: 0;
        border: 0;
    }
    
    .formkit-controls,
    .formkit-item {
        background-color: transparent;
    }
}

.component-signature {
    .component-signature-card {
        box-shadow: var(--fk-border-box-shadow);
        border-radius: var(--fk-border-radius);
    }

    .formkit-outer {
        margin-bottom: 0;
    }

    .formkit-inner {
        box-shadow: none;
    }

    .btn-toggle {
        border-radius: 0 0 0 .25rem;

        svg {
            width: 1.1rem;
        }
    }

    .btn-clear {
        margin-right: 0;
        background-color: var(--cacorangebg);
        color: black;
        border-radius: 0 0 .25rem 0;
        border-left: 1px solid var(--fk-color-border);
    }

    .font-selector-outer {
        border-left: 1px solid var(--fk-color-border);
    }

    .signature-font {
        font-size: 2rem;
        line-height: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        max-width: 200px;
        padding: 5px 0 5px 15px;
    }

    canvas {
        border-radius: .25rem .25rem 0 0;
        transition: filter .2s;

        [data-bs-theme="dark"] & {
            filter: invert(95%);
        }
    }

    .signature-bottom {
        border-top: 1px solid var(--fk-color-border);
        /* height: 40px; */
    }

    [data-type="toggle"] input:checked~.formkit-track,
    .signature-type-toggle-outer[data-type="toggle"]:focus-within input~.formkit-track,
    .signature-type-toggle-outer[data-type="toggle"]:focus-within input:checked~.formkit-track {
        box-shadow: none;
        background-color: var(--fk-color-border);
    }

    .signature-type-toggle {
        [value="false"] {
            +.formkit-track {
                &::before {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath fill='white' d='M285.1 50.7C279.9 39.3 268.5 32 256 32s-23.9 7.3-29.1 18.7L59.5 416 48 416c-17.7 0-32 14.3-32 32s14.3 32 32 32l88 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-6.1 0 22-48 208.3 0 22 48-6.1 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l88 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-11.5 0-167.4-365.3zM330.8 304L181.2 304 256 140.8 330.8 304z'/%3E%3C/svg%3E");
                    animation-name: fade-in-cheese;
                }

                &::after {
                    content: var(--type-text);
                }
            }
        }

        [value="true"] {
            +.formkit-track {
                &::before {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath fill='white' d='M373.5 27.1c15-17.2 36.7-27.1 59.6-27.1 43.6 0 79 35.4 79 79 0 22.8-9.9 44.6-27.1 59.6L283.7 313.8 273 303 209 239 198.2 228.3 373.5 27.1zM161.1 259C162 260 188 286 239 337l13.9 13.9-17.1 74.2c-3.9 17.1-16.9 30.7-33.8 35.4l-169.8 47.5 92.3-92.3c1.2 .1 2.3 .2 3.5 .2 17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32c0 1.2 .1 2.4 .2 3.5L3.9 479.8 51.5 310c4.7-16.9 18.3-29.9 35.4-33.8L161.1 259z'/%3E%3C/svg%3E");
                    opacity: 1;
                    left: auto;
                    right: 2px;
                    animation-name: fade-in;
                }

                &::after {
                    content: var(--draw-text);
                }
            }
        }

        .formkit-track {
            border-radius: 0;
            width: 120px;
            height: 42px;
            position: relative;

            @media (min-width: 768px) {
                border-radius: 0 0 0 .25rem;
            }

            &::after,
            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;

                pointer-events: none;
                z-index: 9999;
            }

            &::before {
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center;
                width: 21px;
                height: 38px;
                margin: 2px 3px;
                opacity: 0;
                animation-duration: .2s;
                /* animation-delay: .2s; */
                animation-timing-function: ease-in;
                animation-fill-mode: forwards;
            }

            &::after {
                left: calc(50% - 26px);
                width: 52px;
                height: 30px;
                padding-top: 12px;
                text-align: center;
                color: white;
            }
        }

        .formkit-thumb {
            width: 25px;
            height: 38px;
            margin-top: 2px;
            aspect-ratio: auto;
            border-radius: var(--fk-border-radius);
        }
    }

    .signature-typedName {
        text-align: center;
    }

    .signature-typedName-outer {
        width: calc(100% - 100px);

        @media (max-width: 767px) {
            border-top: 1px solid var(--fk-color-border);
        }
    }
}

.p-splitter.form-splitter {
    background-color: transparent;
    border: 0;
    border-radius: 0;

    .p-splitterpanel {
        overflow-y: scroll;
    }

    .on-form-page & {
        height: 100vh;

        .form-splitter-debugger {
            margin-top: 100px;
        }
    }

    .on-admin-page & {
        .p-splitterpanel {
            overflow-y: scroll;
            height: calc(100vh - 100px);
        }
    }
}

.sharepoint-item-picker {
    .p-treeselect {
        width: 100%;
    }
}

.p-treeselect-overlay.all-leafs {
    .p-tree-node-toggle-button {
        display: none;
    }
}

.embedded .p-splitter.form-splitter .p-splitterpanel {
    overflow-y: auto;
}

.formkit-dropdown-wrapper,
.formkit-panel-wrapper {
    z-index: 999999 !important;
}