:root {
    --gap: 1.6rem;
    --padding: 2rem;
    --padding-small: 1.2rem;
    --radius: 1rem;
    --background: #f5f5f5;
    --color: #1d1d1f;
    --color-accent: #0084d0;
    --color-accent-light: #85c0e5;
    --color-accent-ultra-light: #e1f0f9;
    --color-accent-fg: #fff;
    --color-secondary: #555559;
    --color-tertiary: #6e6e73;
    --color-grey: #aaa;
    --color-grey-light: #ddd;
    --color-grey-ultra-light: #f5f5f5;
    --color-light: #eee;
    --color-ultra-light: #fff;
    --color-green: #26ba6c;
    --color-green-bright: #09d860;
    --color-green-light: #c6f4dc;
    --color-orange: #d4b836;
    --color-orange-light: #fff3b7;
    --color-red: #d07878;
    --color-red-light: #ffd4d4;
    --max-width: 1200px;
    --shadow1: 0 0.375rem 1.25rem oklch(0% 0.00 0deg / 8%), inset 0 1px 0 oklch(100% 0 0deg / 60%);
    --shadow1-hover: 0 0.375rem 1.25rem oklch(0% 0.00 0deg / 12%), inset 0 1px 0 oklch(100% 0 0deg / 60%);
    --zindex-top: 1000;

    /* Mood analysis — new tokens */
    --mood-positive-bg: #eaf7ee;
    --mood-positive-label: #1a6630;

    /* contrast 5.2:1 on --mood-positive-bg  */
    --mood-positive-text: #2d4a32;

    /* contrast 7.1:1 */
    --mood-negative-bg: var(--color-red-light);
    --mood-negative-label: #8b2020;

    /* contrast 5.4:1 on --color-red-light   */
    --mood-negative-text: #4a1f1f;

    /* contrast 8.2:1 */
    --mood-neutral-bg: var(--color-grey-ultra-light);
    --mood-neutral-label: #444446;

    /* contrast 6.1:1 on --color-grey-ultra-light */
    --mood-neutral-text: var(--color-secondary);
    --mood-redflag-bg: var(--color-orange-light);
    --mood-redflag-border: var(--color-orange);
    --mood-redflag-text: #5a4000;

    /* contrast 7.3:1 on --color-orange-light */
    --mood-badge-low-bg: var(--color-red-light);
    --mood-badge-low-text: #8b2020;
    --mood-badge-mid-bg: var(--color-orange-light);
    --mood-badge-mid-text: #5a4000;
    --mood-badge-high-bg: var(--color-green-light);
    --mood-badge-high-text: #1a6630;
    --mood-bar-pos: var(--color-green);
    --mood-bar-neu: #bbb;
    --mood-bar-neg: var(--color-red);
    --mood-bar-very-good: var(--color-green);
    --mood-bar-good: #a9e3ac;
    --mood-bar-bad: #ff9c9c;
}

::input-placeholder {
    /* Chrome, Opera, Safari */
    color: var(--color-tertiary);
    opacity: 1;

    /* Fixes Firefox's default lower opacity */
}

::placeholder {
    /* Firefox 19+ */
    color: var(--color-grey);
    opacity: 1;
}

:input-placeholder {
    /* IE 10+ */
    color: var(--color-grey);
    opacity: 1;
}

::placeholder {
    /* Standard syntax */
    color: var(--color-grey);
    opacity: 1;
}

html {
    scroll-behavior: smooth;
    font-size: 12pt;

    &:has(.patient.open) {
        overflow: hidden;
    }
}

body {
    background: var(--background);
    color: var(--color);
    scroll-behavior: smooth;
    padding: 2rem;


    h1 {
        font-size: 2.4rem;
        font-weight: 600;
    }

    h2 {
        font-size: 1.6rem;
        font-weight: 500;
        color: var(--color-secondary);
        padding-bottom: calc(var(--gap) / 2);
    }

    h3 {
        font-size: 1.2rem;
        font-weight: 500;
        color: var(--color-tertiary);
        padding-bottom: calc(var(--gap) / 2);
    }

    .btn,
    button {
        transition: .3s;
        border-radius: var(--radius);
        background: var(--color-accent);
        color: var(--color-accent-fg);
        font-weight: 600;
        padding: calc(var(--padding) / 1.5) var(--padding);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        text-shadow: 0 1px 1px rgba(0 0 0 / 30%);
        box-shadow: inset 0 0 100vh rgba(255 255 255 / 0%), inset 0 0 0 1px rgba(0 0 0 / 5%), inset 0 -2px 2px rgba(0 0 0 / 30%), 0 1px 2px rgba(0 0 0 / 20%);
        cursor: pointer;
        font-size: 1.1rem;
        user-select: none;

        &:hover {
            box-shadow: inset 0 0 100vh rgba(255 255 255 / 10%), inset 0 0 0 1px rgba(0 0 0 / 5%), inset 0 -1px 2px rgba(0 0 0 / 20%), 0 1px 2px rgba(0 0 0 / 20%) !important;
        }

        &:active {
            text-shadow: 0 -1px 2px rgba(0 0 0 / 20%);
            box-shadow: inset 0 0 100vh rgba(0 0 0 / 10%), inset 0 0 0 1px rgba(0 0 0 / 5%), inset 0 1px 2px rgba(0 0 0 / 20%), 0 1px 2px rgba(0 0 0 / 0%) !important;
        }

        &.secondary,
        &:not(.btn)[type="button"] {
            box-shadow: inset 0 0 100vh rgba(255 255 255 / 0%), inset 0 0 0 1px rgba(0 0 0 / 5%), inset 0 -2px 2px rgba(0 0 0 / 10%), 0 1px 2px rgba(0 0 0 / 20%);
            background: var(--color-light);
            color: var(--color-secondary);
            text-shadow: 0 1px 1px rgba(255 255 255 / 80%);

            &:hover {
                box-shadow: inset 0 0 100vh rgba(255 255 255 / 20%), inset 0 0 0 1px rgba(0 0 0 / 5%), inset 0 -2px 2px rgba(0 0 0 / 10%), 0 1px 2px rgba(0 0 0 / 20%) !important;
            }

            &:active {
                text-shadow: 0 -1px 2px rgba(0 0 0 / 20%);
                box-shadow: inset 0 0 100vh rgba(0 0 0 / 10%), inset 0 0 0 1px rgba(0 0 0 / 5%), inset 0 1px 2px rgba(0 0 0 / 20%), 0 1px 2px rgba(0 0 0 / 0%) !important;
            }
        }

        &.disabled {
            background: var(--color-grey-ultra-light);
            color: var(--color-secondary);
            text-shadow: none !important;
            pointer-events: none;
            box-shadow: inset 0 0 100vh rgba(0 0 0 / 10%), inset 0 0 0 1px rgba(0 0 0 / 5%), inset 0 1px 2px rgba(0 0 0 / 20%), 0 1px 2px rgba(0 0 0 / 0%);

            &::before {
                content: '';
                display: inline-block;
                height: 2rem;
                aspect-ratio: 1;
                background-image: url(../img/spinner.gif);
                background-size: contain;
                margin-bottom: -.5rem;
                margin-top: -.5rem;
            }

            &:active {
                text-shadow: 0 -1px 2px rgba(0 0 0 / 20%);
                box-shadow: inset 0 0 100vh rgba(0 0 0 / 10%), inset 0 0 0 1px rgba(0 0 0 / 5%), inset 0 1px 2px rgba(0 0 0 / 20%), 0 1px 2px rgba(0 0 0 / 0%) !important;
            }
        }
    }

    textarea {
        field-sizing: content;
        min-height: 2rem;
        line-height: 1.3rem;
        resize: none;
    }

    textarea,
    .toggle,
    select,
    input {
        transition: .3s;
        border-radius: var(--radius);
        background: var(--background);
        font-weight: 500;
        padding: calc(var(--padding) / 1.8);
        box-shadow: inset 0 0 0 1px rgba(0 0 0 / 5%), inset 0 -1px 2px rgba(0 0 0 / 20%), 0 0 0 0 var(--color-accent-light);
        cursor: text;
        display: block;
        width: 100%;
        color: var(--color);

        &:hover {
            box-shadow: inset 0 0 0 0 rgba(0 0 0 / 0%), inset 0 0 0 rgba(0 0 0 / 0%), 0 0 0 3px var(--color-accent-light);
            background: var(--color-ultra-light);
        }

        &:focus {
            box-shadow: inset 0 0 0 0 rgba(0 0 0 / 0%), inset 0 0 0 rgba(0 0 0 / 0%), 0 0 0 3px var(--color-accent);
            background: var(--color-ultra-light);
        }

        &:not(:placeholder-shown) {
            background: var(--color-ultra-light);
        }
    }

    label.checkbox {
        display: flex;
        align-items: center;
        gap: .5rem;
        user-select: none;
        opacity: .6;

        input {
            display: none;
        }

        &::before {
            content: '';
            display: block;
            height: 2rem;
            aspect-ratio: 1;
            background-image: url(../img/checkbox.svg);
            background-size: contain;
            pointer-events: none;
        }

        &:has(:checked) {
            opacity: 1;

            &::before {
                background-image: url(../img/checkbox-checked.svg);
            }
        }
    }

    .toggle {
        width: auto;
        aspect-ratio: 1;
        padding: 0;
        height: 3.5108rem;
        flex: 0;
        display: inline-block;
        cursor: pointer;

        &:hover {
            box-shadow: 0 0 0 2px var(--color-accent-light);
            background: var(--color-ultra-light);
        }

        &.on {
            box-shadow: inset 0 0 0 1px rgba(0 0 0 / 5%), inset 0 1px 3px 1px rgba(0 0 0 / 20%);
            background: var(--color-accent-ultra-light);
        }

        img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }
    }

    select {
        appearance: none;

        select::-ms-expand {
            display: none;
        }

        cursor: default;
    }

    label:has(select) {
        display: flex;
        user-select: none;

        select {
            padding-right: calc(calc(var(--padding) / 1.8) + 2rem);
        }

        &::after {
            content: '';
            position: absolute;
            top: 50%;
            right: 1.12rem;
            display: block;
            transform: translateY(-50%);
            height: 1.2rem;
            aspect-ratio: 1;
            background-image: url(../img/chevron-down.svg);
            background-size: contain;
            pointer-events: none;
        }

        &:has(select:open) {
            &::after {
                transform: translateY(-50%) rotate(180deg);
            }
        }
    }

    form {
        padding: var(--padding);
        background: var(--color-ultra-light);
        border-radius: calc(var(--radius) * 2);
        box-shadow: inset 0 -1px 2px rgba(0 0 0 / 20%), 0 2px .25rem rgba(0 0 0 / 10%);

        div:has(label) {
            display: flex;

            label {
                margin: calc(var(--padding) / 2) 0;
                margin-bottom: 0;
                display: block;
                flex: 1;

                b {
                    font-weight: 500;
                    color: var(--color-secondary);
                    display: block;
                    padding: calc(var(--padding) / 4) 0;
                    pointer-events: none;
                }
            }
        }

        div:has(button) {
            display: flex;

            button {
                display: block;
                flex: 1;
                margin: calc(var(--padding) / 2) 0;
            }
        }
    }

    nav {
        display: flex;
        justify-content: space-between;
        max-width: var(--max-width);
        margin: auto;
        padding-bottom: 1.4rem;
        margin-bottom: 1.4rem;
        border-bottom: 1px solid var(--color-ultra-light);
        user-select: none;

        img {
            height: 64px;
            width: auto;
        }

        .therapist-header {
            display: flex;
            align-items: center;

            .user-info {
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                text-align: right;
                gap: .15rem;

                .name {
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    font-size: 1.3rem;
                    font-weight: 500;
                }

                .actions {
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    flex-direction: row;
                    font-weight: 500;
                    gap: .25rem;

                    div {
                        transition: .3s;
                        cursor: pointer;
                        background: var(--color-ultra-light);
                        box-shadow: 0 0 0 1px var(--color-grey-light);
                        padding: .2rem .5rem;
                        border-radius: .3rem;
                        color: var(--color-secondary);

                        &.therapist-info-form:hover {
                            background: var(--color-accent-ultra-light);
                            color: var(--color);
                            box-shadow: 0 0 0 1px var(--color-grey);
                        }

                        &.sign-out:hover {
                            background: var(--color-red-light);
                            color: var(--color);
                            box-shadow: 0 0 0 1px var(--color-red);
                        }
                    }
                }
            }

            .avatar {
                transition: .3s;
                height: 64px;
                background-color: var(--color-light);
                border-radius: 100%;
                aspect-ratio: 1;
                box-shadow: inset 0 0 0 1px var(--color-grey), 0 0 0 0 var(--color-accent);
                background-image: url(../img/user.svg);
                background-size: 40%;
                overflow: clip;
                margin-left: .5rem;
                cursor: pointer;

                &.has-avatar {
                    background-size: cover;
                    background-position: 50%;
                    box-shadow: inset 0 0 0 0 var(--color-grey), 0 0 0 0 var(--color-accent);
                }

                &:hover {
                    box-shadow: inset 0 0 0 2px var(--color-ultra-light), 0 0 0 2px var(--color-accent);
                }
            }
        }
    }

    main {
        max-width: var(--max-width);
        margin: auto;

        section {
            display: block;
            width: 100%;
            font-size: 0;

            &#patients {
                user-select: none;
                padding-bottom: 2rem;

                .no-patients {
                    text-align: center;
                    font-size: 1rem;

                    img {
                        display: inline-block;
                    }

                    b {
                        font-weight: 600;
                        font-size: 1.1rem;
                    }

                    p {
                        border: 1px solid var(--color-red);
                        display: inline-block;
                        padding: 1rem;
                        width: 100%;
                        max-width: 600px;
                        border-radius: calc(var(--radius) / 2);
                        color: var(--mood-negative-text);
                        overflow: hidden;

                        a {
                            font-weight: 500;
                            text-decoration: underline;
                            color: var(--color);
                        }

                        &::before {
                            content: '';
                            display: inline-block;
                            position: absolute;
                            inset: 0;
                            opacity: .3;
                            background: var(--color-red-light);
                            z-index: -1;
                        }
                    }
                }

                .actions-head {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 1rem;
                    margin-bottom: 2rem;

                    .filter-patients {
                        transition: .3s;
                        width: 100%;
                        max-width: 255px;
                        display: flex;
                        align-items: center;
                        flex-wrap: nowrap;

                        &:has(input:not(:placeholder-shown)),
                        &:focus-within {
                            max-width: 385px;

                            &::before {
                                opacity: .9;
                            }
                        }


                        &:has(input:not(:placeholder-shown)) {
                            #clear-filter {
                                opacity: .9;
                                pointer-events: initial;
                            }
                        }

                        &::before {
                            transition: .3s;
                            content: '';
                            display: inline-block;
                            height: 1.3rem;
                            aspect-ratio: 1;
                            background-image: url(../img/search.svg);
                            background-size: contain;
                            position: absolute;
                            top: 50%;
                            left: calc(var(--padding) / 1.6);
                            z-index: 10;
                            opacity: .5;
                            transform: translateY(-50%);
                            cursor: text;
                        }

                        #clear-filter {
                            transition: .3s;
                            display: inline-block;
                            height: 1.3rem;
                            aspect-ratio: 1;
                            background-image: url(../img/clear.svg);
                            background-size: contain;
                            position: absolute;
                            top: 50%;
                            right: calc(var(--padding) / 1.6);
                            z-index: 10;
                            transform: translateY(-50%);
                            cursor: pointer;
                            opacity: 0;
                            pointer-events: none;

                            &:hover {
                                opacity: 1 !important;
                            }
                        }

                        input {
                            background: var(--color-ultra-light);
                            font-size: 1rem;
                            padding: calc(var(--padding) / 1.466) calc(calc(var(--padding) / 1.466) + calc(var(--padding) / 1.2));
                        }
                    }

                    .count-patients {
                        font-size: 1rem;
                        font-weight: 600;
                        position: absolute;
                        inset: 0;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        pointer-events: none;
                    }

                    .btn {
                        white-space: nowrap;
                    }
                }

                ul {
                    transition: .3s;
                    display: grid;
                    gap: var(--gap);
                    grid-template-columns: repeat(3, minmax(0, 1fr));

                    &:has(.patient.open) {
                        transition: 0s;
                        opacity: 0;
                    }

                    li {
                        transition: .3s;
                        cursor: pointer;

                        * {
                            pointer-events: none;
                        }

                        &.open,
                        &:hover {
                            box-shadow: var(--shadow1-hover);
                            transform: scale(1.05);
                            z-index: 10;
                        }

                        &.open {
                            /* opacity: 0; */
                        }
                    }
                }
            }
        }
    }

    .patient,
    #patient-modal {
        display: inline-block;
        background: #fff;
        box-shadow: var(--shadow1);
        padding: var(--padding-small);
        border-radius: var(--radius);

        &#patient-modal.noinput {
            user-select: none;
        }

        .patient-head {
            display: flex;
            gap: 1rem;
            align-items: center;

            .avatar {
                transition: .3s;
                height: 70px;
                background-color: var(--color-light);
                border-radius: 100%;
                aspect-ratio: 1;
                box-shadow: inset 0 0 0 1px var(--color-grey);
                background-image: url(../img/user.svg);
                background-size: 40%;
                overflow: clip;

                &:has(img) {
                    box-shadow: none;
                    background-image: none;
                }

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transform: translate(-50%, -50%);
                    top: 50%;
                    left: 50%;
                    position: absolute;
                }
            }

            .info {
                width: 100%;

                >div {
                    display: flex;
                    padding: .2rem 0;

                    span,
                    a {
                        display: block;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        width: 100%;
                        max-width: calc(100% - 2.8rem);
                    }
                }

                .name {
                    font-size: 1.2rem;
                    font-weight: 500;

                    span {
                        max-width: calc(100% - 1.1rem);
                    }
                }

                .location {
                    &::before {
                        background-image: url(../img/location.svg);
                    }
                }

                .email {
                    &::before {
                        background-image: url(../img/email.svg);
                    }
                }

                .phone {
                    &::before {
                        background-image: url(../img/phone.svg);
                    }
                }

                .location,
                .email,
                .phone {
                    font-size: 1rem;
                    color: var(--color-tertiary);

                    &::before {
                        content: '';
                        display: inline-block;
                        height: 1.2rem;
                        aspect-ratio: 1;
                        margin-right: .5rem;
                        background-size: contain;
                        opacity: .4;
                    }

                    &.email {
                        display: none !important;
                    }
                }

            }
        }


        .app-status {
            transition: .3s;
            font-size: 1rem;
            padding: .7rem 0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 1rem;
            border-radius: calc(var(--radius) / 2);
            color: var(--color);
            font-weight: 500;

            &.positive {
                box-shadow: inset 0 0 0 1px var(--color-green);
                background: var(--color-green-light);
            }

            &.negative {
                box-shadow: inset 0 0 0 1px var(--color-orange);
                background: var(--color-orange-light);
            }

            &.unauthorized {
                box-shadow: inset 0 0 0 1px var(--color-red);
                background: var(--color-red-light);
            }
        }

        &#patient-modal {
            font-size: 0;
            position: fixed;
            inset: 0;
            opacity: 0;
            pointer-events: none;
            z-index: var(--zindex-top);

            .content {
                transition: .3s;
                opacity: 0;
                height: calc(100% - 150px - 2rem);
                margin-top: 1rem;

                #call-btn {
                    transition: .3s;
                    display: inline-block;
                    display: none !important;
                    height: 3rem;
                    aspect-ratio: 1;
                    border-radius: 100%;
                    background: var(--color-green-bright);
                    box-shadow: inset 0 0 0 1px rgba(0 0 0 / 15%), inset -.5rem -.5rem .5rem rgba(0 0 0 / 5%), 0 0 0 2px var(--background);
                    position: absolute;
                    top: -3.5rem;
                    left: 0;
                    z-index: 10;
                    cursor: pointer;

                    &:hover {
                        transform: scale(1.1);
                    }

                    &::before {
                        background-image: url(../img/facetime.svg);
                        background-size: contain;
                        content: '';
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        display: block;
                        transform: translate(-50%, -50%);
                        height: 55%;
                        aspect-ratio: 1;
                        filter: invert(100%);
                    }
                }

                .patient-tabs-content {
                    .head {
                        .row {
                            justify-content: center;
                            user-select: none;
                            flex-wrap: wrap;

                            &.filter-date {
                                .sel {
                                    display: flex;
                                    flex: 1;
                                    align-content: center;

                                    b {
                                        flex-wrap: wrap;
                                        display: flex;
                                        align-content: center;
                                        padding-right: 1rem;
                                    }
                                }

                                .toggle {
                                    margin-left: 1rem;
                                }
                            }

                            &.acts {
                                gap: 1rem;

                                .btn {
                                    flex: 1;
                                    align-items: center;
                                    justify-content: center;
                                }
                            }
                        }



                        .calendar {
                            user-select: none;
                            display: flex;
                            align-items: flex-start;
                            gap: 1rem;
                            overflow-x: auto;
                            padding: 1rem;
                            background: rgba(0 0 0 / 2%);

                            .cal-month {
                                min-width: 220px;
                                height: 100%;
                                background: var(--color-ultra-light);
                                aspect-ratio: 1 / 1.1;
                                padding: .5rem;
                                border-radius: var(--radius);
                                box-shadow: 0 1px 5px rgba(0 0 0 / 8%);
                            }

                            .cal-header {
                                font-weight: 600;
                                text-align: center;
                                margin-bottom: .5rem;
                                margin-top: .2rem;
                            }

                            .cal-grid {
                                display: grid;
                                grid-template-columns: repeat(7, 1fr);
                                text-align: center;
                            }

                            .cal-labels span {
                                font-size: .75rem;
                                opacity: .5;
                                padding: .2rem;
                                margin-bottom: .3rem;
                            }

                            .cal-day {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                aspect-ratio: 1;
                                border-radius: .25rem;
                                cursor: default;
                                opacity: .4;
                            }

                            .cal-start,
                            .cal-end {
                                background: var(--color-accent);
                                color: var(--color-accent-fg);
                                border-radius: .4rem;
                                cursor: pointer;
                                font-weight: 500;
                                opacity: 1;
                            }

                            .cal-start {
                                border-top-right-radius: 0;
                                border-bottom-right-radius: 0;
                            }

                            .cal-end {
                                border-top-left-radius: 0;
                                border-bottom-left-radius: 0;
                            }

                            .cal-in-range {
                                background: var(--color-accent-ultra-light);
                                border-radius: 0;
                                font-weight: 500;
                                opacity: 1;
                            }
                        }
                    }


                    .patient-info {
                        h3 {
                            text-align: center;
                        }

                        .by-therapist {
                            margin-top: 2rem;
                            border: 1px solid var(--color-grey-light);
                            border-radius: var(--radius);
                            background: var(--color-ultra-light);
                            display: block;
                            box-shadow: .2rem .4rem .6rem rgba(0 0 0 / 4%);

                            &:has(.disabled) {
                                pointer-events: none;
                            }

                            .therapist-avatar {
                                transition: .3s;
                                height: 120px;
                                margin-right: .5rem;
                                background-color: var(--color-light);
                                border-radius: 100%;
                                aspect-ratio: 1;
                                box-shadow: inset 0 0 0 1px var(--color-grey), 0 0 0 0 var(--color-accent);
                                background-image: url(../img/user.svg);
                                background-size: 40%;
                                overflow: clip;

                                &.has-avatar {
                                    background-size: cover;
                                    background-position: 50%;
                                    box-shadow: none;
                                }

                                &.my-avatar:hover {
                                    box-shadow: inset 0 0 0 2px var(--color-ultra-light), 0 0 0 2px var(--color-accent);
                                    cursor: pointer;
                                }
                            }

                            .therapist-info {
                                display: flex;
                                flex-direction: row;
                                background: rgba(0 0 0 / 2%);
                                border-bottom: 1px solid var(--color-grey-light);
                                border-radius: var(--radius);
                                border-bottom-left-radius: 0;
                                border-bottom-right-radius: 0;
                                text-shadow: 1px 1px 0 rgba(255 255 255 / 40%);
                                padding: 1rem;
                                align-items: center;

                                .therapist-contact-info {
                                    display: flex;
                                    flex-direction: column;

                                    >div {
                                        display: flex;
                                        align-items: center;
                                        font-weight: 500;
                                        margin-bottom: 0;
                                        user-select: none;
                                        padding: .13rem 0;
                                        margin-left: .5rem;


                                        span,
                                        a {
                                            display: block;
                                            white-space: nowrap;
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                            width: 100%;
                                            max-width: 100%;
                                        }

                                        a:hover {
                                            text-decoration: underline;
                                        }

                                        &.therapist-location {
                                            &::before {
                                                background-image: url(../img/location.svg);
                                            }
                                        }

                                        &.therapist-email {
                                            &::before {
                                                background-image: url(../img/email.svg);
                                            }
                                        }

                                        &.therapist-phone {
                                            &::before {
                                                background-image: url(../img/phone.svg);
                                            }
                                        }

                                        &.therapist-location,
                                        &.therapist-email,
                                        &.therapist-phone {
                                            font-size: 1rem;
                                            color: var(--color-tertiary);

                                            &::before {
                                                content: '';
                                                display: inline-block;
                                                height: 1.2rem;
                                                aspect-ratio: 1;
                                                margin-right: .5rem;
                                                background-size: contain;
                                                opacity: .4;
                                            }
                                        }

                                        &.therapist-name {
                                            font-size: 1.2rem;
                                            font-weight: 600;
                                        }
                                    }
                                }
                            }

                            .therapist-patient-info {
                                padding: 1rem;
                                font-size: 1rem;

                                >div {
                                    b {
                                        font-weight: 600;
                                        color: var(--color-tertiary);
                                        display: block;
                                        margin-top: .5rem;
                                    }

                                    textarea {
                                        margin: .5rem 0;

                                        &[disabled] {
                                            user-select: none;
                                            cursor: default;
                                            box-shadow: none;
                                        }

                                        &:not([disabled], :hover, :focus) {
                                            box-shadow: inset 0 0 0 0 rgba(0 0 0 / 5%), inset 0 0 0 rgba(0 0 0 / 20%), 0 0 0 0 var(--color-accent-light);
                                        }
                                    }
                                }
                            }

                            .therapist_note {
                                padding: 1rem;
                                display: block;
                                width: 100%;
                                border-radius: var(--radius);
                                border-top-left-radius: 0;
                                border-top-right-radius: 0;
                                field-sizing: content;
                                min-height: 2rem;
                                line-height: 1.3rem;
                                resize: none;
                                box-shadow: none;
                                background: var(--color-ultra-light);
                                font-weight: 400;
                            }

                            div.therapist_note {
                                cursor: default;
                            }

                            .actions {
                                display: none;
                                align-items: center;
                                font-weight: 600;
                                background: var(--color-grey-ultra-light);
                                border-top: 1px solid var(--color-grey-light);
                                padding: 1rem;
                                border-radius: var(--radius);
                                border-top-left-radius: 0;
                                border-top-right-radius: 0;
                                text-shadow: 1px 1px 0 rgba(255 255 255 / 40%);
                                gap: 1rem;

                                label {
                                    flex: 1;
                                }
                            }


                            &.changed {
                                .therapist_note {
                                    border-radius: 0;
                                }

                                .actions {
                                    display: flex;
                                    justify-content: flex-end;
                                }
                            }
                        }
                    }

                    .no-logs {
                        font-weight: 600;
                        text-align: center;
                        display: block;
                        user-select: none;
                    }

                    .logs-content {
                        --padding-y: 1rem;
                        --row-height: 3rem;
                        --col-width: 3rem;

                        user-select: none;
                        display: flex;
                        flex-wrap: nowrap;
                        margin-left: calc(calc(var(--padding) * -1) + 1px);
                        margin-right: calc(calc(var(--padding) * -1) + 1px);
                        padding: var(--padding-y) 0;
                        padding-top: 3rem;
                        background: var(--color-ultra-light);
                        box-shadow: 0 1px 0 var(--color-grey-light);

                        .log-emojies,
                        .log-entry {
                            background: var(--color-ultra-light);
                            display: flex;
                            height: calc(var(--row-height) * 6);
                            justify-content: center;
                            flex-direction: column;

                            .date,
                            .mood {
                                box-shadow: 0 1px 0 var(--color-grey-light);
                                height: var(--row-height);
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                width: calc(var(--col-width) * 1.5);

                                &.mood1 {
                                    box-shadow: none;
                                }
                            }

                            .date {
                                font-size: .9rem;

                                &.selected {
                                    background: var(--color-accent-ultra-light);
                                    border-radius: .5rem;
                                    box-shadow: inset 0 0 0 2px var(--color-accent-light);
                                    font-weight: 600;
                                }
                            }

                            &:has(.date.selected) {
                                background: var(--color-accent-ultra-light);
                                box-shadow: inset 4px 0 0 var(--color-ultra-light), inset -4px 0 0 var(--color-ultra-light);
                                border-radius: .5rem;
                            }

                            .mood-bar {
                                min-height: var(--row-height);
                                height: var(--row-height);
                                border-radius: var(--row-height);
                                width: var(--row-height);
                                position: absolute;
                                left: 50%;
                                margin-left: calc(calc(var(--row-height) / 2) * -1);
                                border: 1px solid rgba(0 0 0 / 20%);
                                box-shadow: inset .2rem .4rem .8rem rgba(255 255 255 / 40%), inset -.2rem -.4rem .4rem rgba(0 0 0 / 5%), .2rem .4rem .4rem rgba(0 0 0 / 5%);
                            }

                            .height0 {
                                background: var(--color-ultra-light);
                                height: calc(var(--row-height) * 5) !important;
                                transform: translateY(50%) translateY(calc(var(--row-height) * -0.5));
                                box-shadow: none;
                                bottom: 50%;

                                &::before {
                                    content: '';
                                    position: absolute;
                                    display: block;
                                    inset: 0;
                                    background-image: url(../img/close.svg);
                                    background-size: 50%;
                                    opacity: .5;
                                }
                            }

                            .height1 {
                                transition: height .5s;
                                background: #ce6878;
                                height: calc(var(--row-height) * 3);
                                transform: translateY(calc(var(--row-height) * -1));
                                top: calc(var(--row-height) * 3);
                            }

                            .height2 {
                                transition: height .4s;
                                background: #e6b0b9;
                                height: calc(var(--row-height) * 2);
                                transform: translateY(calc(var(--row-height) * -1));
                                top: calc(var(--row-height) * 3);
                            }

                            .height3 {
                                transition: height .3s;
                                background: #ddd;
                                height: calc(var(--row-height) * 1);
                                transform: translateY(calc(var(--row-height) * -1));
                                bottom: calc(var(--row-height) * 2);
                            }

                            .height4 {
                                transition: height .4s;
                                background: #a9e3ac;
                                height: calc(var(--row-height) * 2);
                                transform: translateY(calc(var(--row-height) * -1));
                                bottom: calc(var(--row-height) * 2);
                            }

                            .height5 {
                                transition: height .5s;
                                background: #68ce6e;
                                height: calc(var(--row-height) * 3);
                                transform: translateY(calc(var(--row-height) * -1));
                                bottom: calc(var(--row-height) * 2);
                            }

                        }

                        .log-entries {
                            display: flex;
                            flex-flow: row nowrap;
                            flex: 1;
                            overflow: auto hidden;
                            background: var(--color-ultra-light);
                            padding-left: calc(var(--col-width) * 1.4);

                            &.freeze {
                                .mood-bar {
                                    height: 0;
                                }
                            }

                            .lines {
                                display: flex;
                                flex-direction: column;
                                position: absolute;
                                left: 0;
                                right: 0;
                                top: 0;


                                >div {
                                    display: block;
                                    box-shadow: 0 1px 0 var(--color-grey-light);
                                    height: var(--row-height);
                                }
                            }

                        }

                        .log-emojies {
                            width: calc(var(--col-width) * 1.5);
                            position: absolute;
                            display: block;
                            left: 0;
                            top: 2.99rem;
                            bottom: 0;
                            z-index: 10;

                            .mood {
                                >div {
                                    position: absolute;
                                    top: 50%;
                                    left: 50%;
                                    transform: translate(-50%, -50%);
                                    text-align: center;
                                    font-size: 1.2rem;

                                    span {
                                        display: block;
                                        white-space: nowrap;
                                        font-size: .75rem;
                                    }
                                }
                            }
                        }
                    }

                    .mood-summary {
                        border-top: 1px solid var(--color-grey-light);
                        border-bottom: 1px solid var(--color-grey-light);
                        margin-left: calc(var(--padding) * -1);
                        margin-right: calc(var(--padding) * -1);
                        margin-bottom: 0;

                        &:has(.positive) {
                            background: var(--mood-positive-bg);
                        }

                        &:has(.negative) {
                            background: var(--mood-negative-bg);
                        }

                        &:has(.neutral) {
                            background: var(--mood-neutral-bg);
                        }

                        /* ─────────────────────────────────────────
                           CARD
                        ───────────────────────────────────────── */
                        .mood-card {
                            padding: 1rem var(--padding);
                            font-size: 1rem;
                            color: var(--color);

                            b,
                            strong {
                                font-weight: 600;
                            }

                            &.remember-to-log {
                                background: var(--color-ultra-light);
                                color: var(--color-secondary);
                                font-size: 0.9rem;
                                line-height: 1.5;
                            }

                            /* ── Header ─────────────────────────── */
                            .mood-header {
                                display: flex;
                                justify-content: space-between;
                                align-items: flex-start;
                                gap: var(--gap);
                                margin-bottom: 0.85rem;
                                pointer-events: none;
                            }

                            .mood-class {
                                display: block;
                                font-size: 1rem;
                                font-weight: 700;
                                letter-spacing: 0.08rem;
                                text-transform: uppercase;
                                margin-bottom: 1rem;
                                margin-top: 0.25rem;
                                cursor: pointer;

                                &.positive {
                                    color: var(--mood-positive-label);
                                }

                                &.neutral {
                                    color: var(--mood-neutral-label);
                                }

                                &.negative {
                                    color: var(--mood-negative-label);
                                }
                            }

                            .mood-intro {
                                font-size: 0.95rem;
                                line-height: 1.4;

                                .positive & {
                                    color: var(--mood-positive-text);
                                }

                                .negative & {
                                    color: var(--mood-negative-text);
                                }

                                .neutral & {
                                    color: var(--mood-neutral-text);
                                }
                            }

                            .mood-icon {
                                font-size: 1.8rem;
                                flex-shrink: 0;
                                line-height: 1;
                                margin-top: 0.1rem;
                            }

                            /* ── Red flag ───────────────────────── */
                            .red-flag-alert {
                                background: var(--mood-redflag-bg);
                                border: 1px solid var(--mood-redflag-border);
                                border-radius: calc(var(--radius) / 2);
                                padding: 0.5rem 0.75rem;
                                margin-bottom: 0.75rem;
                                font-size: 0.88rem;
                                line-height: 1.4;
                                color: var(--mood-redflag-text);
                                cursor: pointer;
                                transition: background 0.15s;

                                &:hover {
                                    filter: brightness(0.97);
                                }
                            }

                            /* ── Sentiment bar ──────────────────── */
                            .sentiment-bar-wrap {
                                margin-bottom: 0.75rem;
                                cursor: pointer;
                                padding: 0.45rem 1rem;
                                margin-left: -1rem;
                                margin-right: -1rem;
                                border-radius: calc(var(--radius) / 2);
                                position: relative;
                                transition: background 0.15s;

                                &::after {
                                    content: '';
                                    display: block;
                                    width: 1.1rem;
                                    aspect-ratio: 1;
                                    background-image: url(../img/question.svg);
                                    opacity: 0;
                                    position: absolute;
                                    bottom: .16rem;
                                    right: .5rem;
                                    transform: translateY(-50%);
                                    transition: opacity 0.15s;
                                }

                                &:hover {
                                    background: rgba(0 0 0 / 5%);

                                    &::after {
                                        opacity: 0.4;
                                    }
                                }

                                .sentiment-bar {
                                    display: flex;
                                    border-radius: 99px;
                                    overflow: hidden;
                                    background: var(--color-light);
                                    margin-bottom: 0.3rem;
                                    margin-top: 0.5rem;
                                    font-size: 1.5rem;
                                    box-shadow: 0 0 0 1px rgba(255 255 255 / 30%);

                                    span {
                                        display: block;
                                        transition: width 0.3s ease;
                                        min-width: 0;
                                        padding: .2rem;
                                        padding-top: .22rem;
                                        box-shadow: 0 0 0 1px rgba(255 255 255 / 80%);
                                    }

                                    .bar-pos {
                                        background: var(--mood-bar-pos);
                                    }

                                    .bar-neu {
                                        background: var(--mood-bar-neu);
                                    }

                                    .bar-neg {
                                        background: var(--mood-bar-neg);
                                    }


                                    .muito-bem {
                                        background: var(--mood-bar-very-good);
                                    }

                                    .bem {
                                        background: var(--mood-bar-good);
                                    }

                                    .neutro {
                                        background: var(--mood-bar-neu);
                                    }

                                    .mal {
                                        background: var(--mood-bar-bad);
                                    }

                                    .muito-mal {
                                        background: var(--mood-bar-neg);
                                    }
                                }

                                .sentiment-legend {
                                    display: block;
                                    font-size: 1em;
                                    color: var(--color-secondary);
                                    text-align: center;
                                    padding-top: .2rem;

                                    small {
                                        display: inline-flex;
                                        align-items: center;
                                        gap: 0.3rem;
                                        background: rgba(255 255 255 / 90%);
                                        border-radius: 99px;
                                        padding: 0.2rem 0.65rem;
                                        padding-top: .205rem;
                                        font-size: 1rem;
                                        color: var(--color);
                                        line-height: 1.3;
                                        box-shadow: 0 0 0 1px rgba(0 0 0 / 10%);
                                        font-weight: 500;
                                        margin: .1rem;
                                    }
                                }
                            }

                            /* ── Detail rows ────────────────────── */
                            .mood-details {
                                display: flex;
                                flex-direction: column;
                            }

                            .analysis-row {
                                display: flex;
                                flex-direction: column;
                                padding: 0.45rem 1rem;
                                margin: 0 -1rem;
                                margin-top: .5rem;
                                border-radius: calc(var(--radius) / 2);
                                cursor: pointer;
                                position: relative;
                                padding-right: 3rem;
                                line-height: 1.35;
                                transition: background 0.15s;

                                &::after {
                                    content: '';
                                    display: block;
                                    width: 1.1rem;
                                    aspect-ratio: 1;
                                    background-image: url(../img/question.svg);
                                    opacity: 0;
                                    position: absolute;
                                    top: 50%;
                                    right: 1rem;
                                    transform: translateY(-50%);
                                    transition: opacity 0.15s;
                                }

                                &:hover {
                                    background: rgba(0 0 0 / 5%);

                                    &::after {
                                        opacity: 0.4;
                                    }
                                }
                            }

                            .analysis-label {
                                font-size: .9rem;
                                font-weight: 600;
                                letter-spacing: 0.05rem;
                                text-transform: uppercase;
                                color: var(--color);
                                margin-bottom: 0.1rem;
                            }

                            .analysis-value {
                                color: var(--color);
                                font-size: 1rem;
                            }

                            /* ── Topic tags ─────────────────────── */
                            .topics-row .analysis-value {
                                display: flex;
                                flex-wrap: wrap;
                                gap: 0.35rem;
                                margin-top: 0.25rem;
                            }

                            .topic-tag {
                                display: inline-flex;
                                align-items: center;
                                gap: 0.3rem;
                                background: rgba(255 255 255 / 90%);
                                border-radius: 99px;
                                padding: 0.2rem 0.65rem;
                                padding-right: .25rem;
                                padding-top: .205rem;
                                font-size: 1rem;
                                color: var(--color);
                                line-height: 1.3;
                                box-shadow: 0 0 0 1px rgba(0 0 0 / 10%);
                                font-weight: 500;

                                em {
                                    font-style: normal;
                                    color: var(--color-secondary);
                                    font-size: 1rem;
                                }
                            }

                            .topic-mood-badge {
                                font-size: 1rem;
                                padding: 0.1rem 0.4rem;
                                border-radius: 99px;
                                font-weight: 500;
                                white-space: nowrap;
                                box-shadow: inset 0 0 0 1px rgba(0 0 0 / 10%);
                                margin-left: .2rem;

                                &.badge-low {
                                    background: var(--mood-badge-low-bg);
                                    color: var(--mood-badge-low-text);
                                }

                                &.badge-mid {
                                    background: var(--mood-badge-mid-bg);
                                    color: var(--mood-badge-mid-text);
                                }

                                &.badge-high {
                                    background: var(--mood-badge-high-bg);
                                    color: var(--mood-badge-high-text);
                                }
                            }
                        }
                    }


                    .logs {
                        display: block;
                        border-bottom: 1px solid var(--color-grey-light);
                        margin-left: calc(calc(var(--padding) * -1) + 1px);
                        margin-right: calc(calc(var(--padding) * -1) + 1px);
                        background: var(--color-grey-ultra-light);


                        .log-content {
                            margin: 1rem;
                            padding: 1rem;
                            border: 1px solid var(--color-grey-light);
                            border-radius: var(--radius);
                            background: var(--color-ultra-light);
                            display: block;
                            box-shadow: .2rem .4rem .6rem rgba(0 0 0 / 4%);

                            &.m1 {
                                .header {
                                    background-color: #ce6878;
                                    box-shadow: inset 0 10rem 0 rgba(255 255 255 / 50%);
                                }
                            }

                            &.m2 {
                                .header {
                                    background-color: #e6b0b9;
                                    box-shadow: inset 0 10rem 0 rgba(255 255 255 / 50%);
                                }
                            }

                            &.m3 {
                                .header {
                                    background-color: #ddd;
                                    box-shadow: inset 0 10rem 0 rgba(255 255 255 / 50%);
                                }
                            }

                            &.m4 {
                                .header {
                                    background-color: #a9e3ac;
                                    box-shadow: inset 0 10rem 0 rgba(255 255 255 / 50%);
                                }
                            }

                            &.m5 {
                                .header {
                                    background-color: #68ce6e;
                                    box-shadow: inset 0 10rem 0 rgba(255 255 255 / 50%);
                                }
                            }

                            .header {
                                display: flex;
                                align-items: center;
                                font-weight: 600;
                                background: var(--color-grey-ultra-light);
                                border-bottom: 1px solid var(--color-grey-light);
                                margin: -1rem;
                                margin-bottom: 0;
                                padding: 1rem;
                                border-radius: var(--radius);
                                border-bottom-left-radius: 0;
                                border-bottom-right-radius: 0;
                                text-shadow: 1px 1px 0 rgba(255 255 255 / 40%);

                                .time {
                                    font-size: 1rem;
                                    display: flex;
                                    align-items: center;
                                }

                                .mood {
                                    font-size: 1rem;
                                    display: flex;
                                    align-items: center;
                                    margin-left: .5rem;

                                    span {
                                        font-size: 1.2rem;
                                        margin-right: .5rem;
                                    }
                                }
                            }

                            .comment {
                                font-size: 1rem;
                                padding-top: 1rem;
                            }

                            &.no-log {
                                background: rgba(0 0 0 / 3%);
                                user-select: none;
                                box-shadow: inset 2px 2px 3px 1px rgba(0 0 0 / 3%), 0 0 0 1px rgba(255 255 255 / 50%), 1px 1px 0 rgba(255 255 255 / 50%);
                                padding: 2rem 1rem;
                                color: var(--color-secondary);

                                .comment {
                                    padding-top: 0;
                                    text-align: center;
                                    font-weight: 500;
                                }
                            }

                            .no-comment {
                                font-size: 1rem;
                            }
                        }

                        .logs-info {
                            padding-top: 1rem;

                            /*
                            .log.first-log,
                            .log.last-log {
                                .head {
                                    .row {
                                        .previous {
                                            display: none !important;
                                        }
                                    }
                                }
                            }

                            &:has(.log.call-attention) {
                                .log:not(.call-attention) {
                                    opacity: .5;
                                }

                            } */

                            .log {
                                transition: .3s;
                                position: sticky;

                                /* margin-top: -1rem; */
                                background: var(--color-grey-ultra-light);

                                /* &:not(:last-child) { */
                                padding-bottom: 5rem;

                                .therapists-comments {
                                    padding-top: 1rem;

                                    h3 {
                                        text-align: center;
                                        padding: 0 1rem;
                                    }

                                    .therapist-comment {
                                        margin: 1rem;
                                        padding-top: 1rem;
                                        border: 1px solid var(--color-grey-light);
                                        border-radius: var(--radius);
                                        background: var(--color-ultra-light);
                                        display: block;
                                        box-shadow: .2rem .4rem .6rem rgba(0 0 0 / 4%);

                                        &:has(.disabled) {
                                            pointer-events: none;
                                        }

                                        .therapist-name {
                                            display: flex;
                                            align-items: center;
                                            font-weight: 600;
                                            background: var(--color-grey-ultra-light);
                                            border-bottom: 1px solid var(--color-grey-light);
                                            margin-top: -1rem;
                                            margin-bottom: 0;
                                            padding: 1rem;
                                            border-radius: var(--radius);
                                            border-bottom-left-radius: 0;
                                            border-bottom-right-radius: 0;
                                            text-shadow: 1px 1px 0 rgba(255 255 255 / 40%);
                                            user-select: none;


                                            .avatar {
                                                transition: .3s;
                                                height: 40px;
                                                margin-right: .5rem;
                                                background-color: var(--color-light);
                                                border-radius: 100%;
                                                aspect-ratio: 1;
                                                box-shadow: inset 0 0 0 1px var(--color-grey), 0 0 0 0 var(--color-accent);
                                                background-image: url(../img/user.svg);
                                                background-size: 40%;
                                                overflow: clip;

                                                &.has-avatar {
                                                    background-size: cover;
                                                    background-position: 50%;
                                                    box-shadow: none;
                                                }

                                                &.my-avatar:hover {
                                                    box-shadow: inset 0 0 0 2px var(--color-ultra-light), 0 0 0 2px var(--color-accent);
                                                    cursor: pointer;
                                                }
                                            }
                                        }

                                        .therapist_note {
                                            padding: 1rem;
                                            display: block;
                                            width: 100%;
                                            border-radius: var(--radius);
                                            border-top-left-radius: 0;
                                            border-top-right-radius: 0;
                                            field-sizing: content;
                                            min-height: 2rem;
                                            line-height: 1.3rem;
                                            resize: none;
                                            box-shadow: none;
                                            background: var(--color-ultra-light);
                                            font-weight: 400;
                                        }

                                        div.therapist_note {
                                            cursor: default;
                                        }

                                        .actions {
                                            display: none;
                                            align-items: center;
                                            font-weight: 600;
                                            background: var(--color-grey-ultra-light);
                                            border-top: 1px solid var(--color-grey-light);
                                            padding: 1rem;
                                            border-radius: var(--radius);
                                            border-top-left-radius: 0;
                                            border-top-right-radius: 0;
                                            text-shadow: 1px 1px 0 rgba(255 255 255 / 40%);
                                            gap: 1rem;

                                            label {
                                                flex: 1;
                                            }
                                        }

                                        &:focus-within {
                                            box-shadow: .2rem .4rem .6rem rgba(0 0 0 / 4%),
                                                0 0 0 2px var(--color-accent);
                                        }

                                        &:has(.changed) {
                                            .therapist_note {
                                                border-radius: 0;
                                            }

                                            .actions {
                                                display: flex;
                                            }
                                        }
                                    }
                                }

                                /*
                                &:not(.first-log) {
                                    .log-date {
                                        &::before {
                                            content: '';
                                            display: block;
                                            left: 0;
                                            right: 0;
                                            height: 5rem;
                                            top: -5rem;
                                            background-image: linear-gradient(to top, var(--color-grey-ultra-light), transparent);
                                            position: absolute;
                                        }
                                    }
                                } */


                                .log-date {
                                    display: block;
                                    text-align: center;
                                    padding: 1rem;
                                    font-weight: 500;
                                    color: var(--color-tertiary);
                                    user-select: none;
                                    position: sticky;
                                    top: -2rem;
                                    z-index: 100;
                                    background: var(--color-grey-ultra-light);

                                    span {
                                        display: block;
                                        font-size: 1.1rem;
                                        color: var(--color);
                                        margin-top: .3rem;
                                    }

                                    &::after {
                                        content: '';
                                        display: block;
                                        left: 0;
                                        right: 0;
                                        height: 1rem;
                                        bottom: -1rem;
                                        background-image: linear-gradient(to bottom, var(--color-grey-ultra-light), transparent);
                                        position: absolute;
                                    }
                                }


                                /* } */

                                /*
                                .head {
                                    margin: 1rem;
                                    padding: .5rem;
                                    border: 1px solid var(--color-grey-light);
                                    border-radius: var(--radius);
                                    background: var(--color-ultra-light);
                                    box-shadow: -2rem 0 0 var(--color-grey-ultra-light), 2rem 0 0 var(--color-grey-ultra-light), 0 1rem 0 var(--color-grey-ultra-light), -2rem 2rem 0 var(--color-grey-ultra-light), 2rem 2rem 0 var(--color-grey-ultra-light), 0 -1rem 0 var(--color-grey-ultra-light), -2rem -2rem 0 var(--color-grey-ultra-light), 2rem -2rem 0 var(--color-grey-ultra-light);

                                    .row {
                                        border: none;
                                        margin: 0;
                                        background: none;
                                        font-weight: 600;

                                        .previous,
                                        .next {
                                            transition: .3s;
                                            display: inline-block;
                                            height: 2rem;
                                            aspect-ratio: 1;
                                            position: absolute;
                                            top: 50%;
                                            transform: translateY(-50%);
                                            border-radius: .5rem;
                                            background-size: contain;
                                            opacity: .8;
                                            cursor: pointer;

                                            &:hover {
                                                background-color: var(--color-grey-ultra-light);
                                                opacity: 1;
                                            }
                                        }

                                        .previous {
                                            left: .2rem;
                                            background-image: url(../img/chevron-up.svg);
                                        }

                                        .next {
                                            right: .2rem;
                                            background-image: url(../img/chevron-down.svg);
                                        }
                                    }
                                } */
                            }
                        }
                    }
                }
            }

            .close-patient-modal {
                transition: .3s;
                font-size: 1rem;
                position: absolute;
                top: 0;
                right: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: .6rem 1.5rem;
                border-top-right-radius: var(--radius);
                border-bottom-left-radius: .5rem;
                background: var(--color-light);
                box-shadow: inset 0 0 0 100vh rgba(0 0 0 / 0%), inset 0 0 0 1px var(--color-grey-light);
                font-weight: 500;
                color: var(--color-tertiary);
                cursor: pointer;
                opacity: 0;
                user-select: none;

                &::before {
                    transition: .3s;
                    content: '';
                    display: inline-block;
                    background-image: url(../img/close.svg);
                    background-size: contain;
                    height: 2rem;
                    aspect-ratio: 1;
                    opacity: .45;
                    margin-right: .2rem;
                }

                &:hover {
                    box-shadow: inset 0 0 0 100vh rgba(0 0 0 / 5%), inset 0 0 0 1px var(--color-grey-light);
                    color: var(--color);

                    &::before {
                        opacity: .7;
                    }
                }
            }

            &.animate {
                box-shadow: var(--shadow1), inset 0 0 0 1px var(--color-grey-light);

                .app-status {
                    margin-bottom: -3.6rem;
                    opacity: 0;
                }

                .close-patient-modal {
                    opacity: 1;
                }

                .content {
                    opacity: 1;

                    &:has(.unauthorized) {
                        opacity: 1 !important;

                        .unauthorized {
                            display: flex;
                            background: var(--color-grey-ultra-light);
                            position: absolute;
                            align-items: center;
                            justify-content: center;
                            font-size: 1rem;
                            font-weight: 600;
                            inset: 0;
                            border-radius: var(--radius);
                        }
                    }
                }

                .patient-head {
                    .avatar {
                        height: 110px;
                    }
                }
            }

            &.open {
                opacity: 1;
                pointer-events: all;
            }
        }
    }


    #patient-modal {
        .patient-head {
            .info {
                >div {

                    span,
                    a {
                        display: block;
                        overflow: initial;
                        max-width: initial;
                        width: initial;
                    }

                    a:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
    }


    .tabs-container {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius);
        background: var(--color-grey-ultra-light);
        padding: .3rem;
        padding-top: .32rem;
        gap: .3rem;
        box-shadow: inset 0 0 0 1px var(--color-grey-light);
        font-size: 0;

        div {
            transition: .3s;
            font-size: 1rem;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: inset 0 0 0 100vh rgba(0 0 0 / 0%);
            background: none;
            padding: .7rem;
            font-weight: 500;
            color: var(--color-tertiary);
            cursor: pointer;
            user-select: none;
            border-radius: calc(var(--radius) / 1.2);

            &.active {
                background: var(--color-ultra-light);
                color: var(--color);
                cursor: default;
                box-shadow: 0 1px 2px var(--color-grey-light);
            }

            &:not(.active) {
                &:hover {
                    box-shadow: inset 0 0 0 100vh rgba(0 0 0 / 5%);
                }
            }
        }
    }

    * {
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
            border-radius: var(--radius);
        }

        ::-webkit-scrollbar-track {
            background: rgb(0 0 0 / 0%);
            border-radius: var(--radius);
        }

        ::-webkit-scrollbar-thumb {
            background: rgb(0 0 0 / 30%);
            border-radius: var(--radius);
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgb(0 0 0 / 50%);
        }

    }

    .tabs-content {
        border: 1px solid var(--color-grey-light);
        background: var(--color-grey-ultra-light);
        margin-top: .6rem;
        height: calc(100% - .2rem);
        border-radius: var(--radius);
        margin-left: 1px;
        margin-right: 1px;

        >div {
            transition: .3s;
            border-radius: var(--radius);
            font-size: 1rem;
            position: absolute;
            pointer-events: none;
            opacity: 0;
            padding: var(--padding);
            transform: translateY(.5rem);
            width: 100%;
            display: block;
            overflow-y: auto;
            max-height: 100%;

            /* display: none; */

            &.active {
                pointer-events: all;
                opacity: 1;
                transform: translateY(0);

                /* display: block; */
            }
        }
    }

    .head {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-items: flex-start;
        margin: calc(var(--padding) * -1);
        margin-bottom: 0;
        border-bottom: 1px solid #fff;

        b {
            font-weight: 600;
        }

        .row {
            display: flex;
            flex-direction: row;
            align-items: center;
            border-bottom: 1px solid var(--color-grey-light);
            background: rgba(255 255 255 / 30%);
            padding: .5rem calc(var(--padding) / 2);
            width: 100%;
        }

        label {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;

            b {
                padding: 0 1rem;
                font-weight: 500;
            }
        }
    }

    footer {
        display: block;
        text-align: center;
        font-size: .9rem;
        padding: 1.5rem 1rem;
        color: var(--color-tertiary);

        a {
            text-decoration: underline;

            &:hover {
                color: var(--color-accent);
            }
        }

        p {
            display: block;
            margin-top: .5rem;
        }

        b {
            font-weight: 600;
        }
    }

    #finish-signup {
        background: var(--color-accent);
        color: var(--color-accent-fg);
        font-size: 1.3rem;
        display: flex;
        z-index: 2147483647;
        padding: 1rem;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        cursor: pointer;
        border-top: 1px solid rgba(255 255 255 / 15%);
        box-shadow: 0 0 1rem rgba(0 0 0 / 15%), 0 1rem 2rem var(--color-accent);

        &::before {
            content: '';
            display: block;
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(45deg,
                    transparent,
                    transparent 30px,
                    rgba(0 0 0 / 5%) 20px,
                    rgba(0 0 0 / 5%) 60px);
            background-size: 85px auto;
            background-repeat: repeat;
            animation: gridMove 3s linear infinite;
        }

        div {
            display: inline-block;
            pointer-events: none;
            text-shadow: 1px 1px 2px rgba(0 0 0 / 30%);
            box-shadow: inset 0 0 0 1px rgba(255 255 255 / 20%), 0 0 0 1px rgba(0 0 0 / 20%), 4px 4px 10px rgba(0 0 0 / 20%);
            padding: 1rem 2rem;
            border-radius: 10px;
            background: color-mix(black 20%, var(--color-accent) 100%);
        }

        &:hover {
            background: color-mix(white 5%, var(--color-accent) 100%);

            div {
                background: color-mix(black 25%, var(--color-accent) 100%);
            }
        }
    }

    .modal {
        transition: .3s;
        display: grid;
        place-items: center;
        position: fixed;
        z-index: 2000;
        inset: 0;
        background-color: rgb(255 255 255 / 50%);
        backdrop-filter: blur(10rem) saturate(300%);

        &:has(.alert) {
            z-index: 20000;
        }

        /* align-items: center;
        justify-content: center; */
        padding: var(--padding);
        overflow-y: auto;

        &#therapist-payment {
            .btn:not(.secondary) {
                width: 100%;
                margin-top: 2rem;
            }
        }

        &#calling-waiting {
            .modal-content {
                max-width: 500px;
                text-align: center;
            }
        }

        &#login-form {
            .instructions {
                display: none;
            }

            &:has(input[name="action"][value="forgot-password"]) {
                .instructions {
                    display: block;
                }

                .row {
                    margin-bottom: 0;
                }

                .row:has(input[type="password"]) {
                    display: none;
                }
            }
        }

        &#confirm {
            .modal-content {
                &.alert {
                    .content {
                        .actions {
                            padding: 0;
                            gap: 1rem;
                            justify-content: center;
                        }
                    }
                }
            }
        }



        .modal-content {
            display: block;
            max-width: 1000px;
            width: 100%;
            position: relative;
            padding: 1rem;

            center {
                a {
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }

            &:has(form.content) {
                max-width: 600px;
            }

            &.alert {
                max-width: 600px;

                .modal-head {
                    justify-content: flex-start;

                    .close-modal {
                        right: var(--padding);
                    }
                }

                .content {
                    .actions {
                        padding: 0;
                        gap: 0;
                        justify-content: flex-end;

                        .btn {
                            max-width: 50%;
                        }
                    }
                }
            }

            .modal-head {
                display: flex;
                align-items: center;
                justify-content: center;

                h2 {
                    text-align: center;
                    padding: var(--padding);
                    user-select: none;
                }

                .close-modal {
                    transition: .3s;
                    display: inline-block;
                    height: 2.2rem;
                    aspect-ratio: 1;
                    background-image: url(../img/close.svg);
                    background-size: contain;
                    position: absolute;
                    right: 0;
                    cursor: pointer;
                    opacity: .6;

                    &:hover {
                        opacity: 1;
                    }
                }
            }

            .content {
                background-color: var(--color-ultra-light);
                border-radius: var(--radius);
                box-shadow: var(--shadow1);
                display: block;
                padding: var(--padding);

                .block {
                    transition: .3s;
                    display: block;
                    background-color: var(--color-ultra-light);
                    border-radius: var(--radius);
                    box-shadow: var(--shadow1);
                    padding: 1.4rem;
                    margin-bottom: 2rem;

                    &:focus-within {
                        box-shadow: var(--shadow1-hover);
                    }

                    .row {
                        display: block;
                        margin-bottom: 1rem;

                        label {
                            padding: 0;
                            margin: 0;
                            margin-bottom: .5rem;
                            font-weight: 600;
                            color: var(--color-tertiary);
                            font-size: .9rem;
                        }

                        &:has(input) {
                            display: flex;
                            flex: 1;

                            label {
                                padding: 0;
                                margin: 0;
                                margin-bottom: 0;
                                font-weight: 600;
                                color: var(--color-tertiary);
                                font-size: .9rem;
                                position: absolute;
                                z-index: 1;
                                left: 1.1rem;
                                top: 0;
                                bottom: 0;
                                display: flex;
                                align-items: center;
                                pointer-events: none;
                            }

                            input {
                                padding-left: 10rem;
                                text-align: right;
                            }
                        }

                        &:has([type="radio"]) {
                            gap: calc(var(--gap) / 2);
                            flex-direction: row;
                            flex: 1;
                            height: 3rem;
                            transition: .3s;
                            font-weight: 500;
                            display: flex;
                            width: 100%;
                            color: var(--color);
                            padding: 0 !important;

                            label {
                                border-radius: calc(var(--radius) / 1.5);
                                background: var(--background);
                                text-align: center;
                                box-shadow: inset 0 0 0 1px rgba(0 0 0 / 10%);
                                cursor: pointer !important;
                                height: 3rem;
                                display: flex;
                                flex: 1;
                                width: 50%;
                                align-items: center;
                                justify-content: center;
                                position: relative;
                                margin: 0 !important;
                                left: initial;
                                pointer-events: all;

                                &:hover {
                                    box-shadow: inset 0 0 0 1px rgba(0 0 0 / 10%), inset 0 0 0 100vh rgba(0 0 0 / 3%);
                                }

                                &:has(:checked) {
                                    box-shadow: inset 0 0 0 2px var(--color-accent-light);
                                    background: var(--color-accent-ultra-light);

                                    b {
                                        color: var(--color-accent);
                                    }
                                }

                                b {
                                    user-select: none;
                                    font-weight: 500;
                                    color: var(--color-secondary);
                                    display: block;
                                    padding: calc(var(--padding) / 4) 0;
                                    pointer-events: none;
                                }

                                input {
                                    display: none;
                                }
                            }
                        }

                        input,
                        textarea {
                            border-radius: calc(var(--radius) / 1.5);
                        }

                        textarea {
                            min-height: 5rem;
                        }
                    }

                    .row:last-child {
                        margin-bottom: 0;
                    }
                }

                .actions {
                    display: flex;
                    justify-content: center;
                    margin-top: 1rem;
                    gap: 2rem;
                    padding: 0 1.4rem;

                    .btn {
                        justify-content: center;
                        flex: 1;
                    }
                }
            }

            form.content {
                background: none;
                box-shadow: none;
                padding: 0;
            }
        }
    }

    .loading {
        background-color: var(--color-grey-ultra-light) !important;
        background-image: url(../img/spinner.gif) !important;
        background-repeat: no-repeat !important;
        background-position: 50% !important;
        background-size: 3rem auto !important;
        border-radius: var(--radius) !important;
        user-select: none !important;
        z-index: 100 !important;

        *:not(.retry) {
            opacity: 0;
            pointer-events: none;
        }

        &::after {
            content: 'Carregando';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) translateY(2.8rem);
            font-size: .9rem;
            color: var(--color-tertiary);
            z-index: 100;

        }

        &.saving {
            &::after {
                content: 'Salvando' !important;
            }
        }
    }

    .loading-error {
        background-color: var(--color-grey-ultra-light) !important;
        border-radius: var(--radius) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        user-select: none !important;
        z-index: 100;

        *:not(.retry) {
            opacity: 0;
            pointer-events: none;
        }

        .retry {
            font-size: 1rem;
            text-align: center;
            font-weight: 500;

            .btn {
                margin-top: 1rem;
            }
        }
    }

    #video-call {
        position: fixed;
        inset: 0;
        flex-direction: column;
        z-index: 10000;
        display: none;

        .patient-list {
            padding: 20px;
            background: #1c1c1e;
            max-height: 100vh;
            overflow-y: auto;

            h2 {
                color: white;
                font-size: 28px;
                font-weight: 600;
                margin-bottom: 20px;
            }

            .patient-card {
                background: rgb(255 255 255 / 10%);
                backdrop-filter: blur(20px) saturate(180%);
                border-radius: 12px;
                padding: 16px;
                margin-bottom: 12px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                transition: all 0.2s ease;

                &:hover {
                    background: rgb(255 255 255 / 15%);
                    transform: scale(1.02);
                }

                .patient-info {
                    .patient-name {
                        color: white;
                        font-size: 17px;
                        font-weight: 600;
                        margin-bottom: 4px;
                    }

                    .patient-id {
                        color: rgb(255 255 255 / 60%);
                        font-size: 13px;
                    }
                }

                .call-btn {
                    width: 44px;
                    height: 44px;
                    border-radius: 50%;
                    background: #30d158;
                    border: none;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    transition: all 0.2s ease;

                    &:hover {
                        background: #28c44a;
                        transform: scale(1.1);
                    }

                    svg {
                        width: 20px;
                        height: 20px;
                        fill: white;
                    }
                }
            }
        }

        .video-container {
            position: fixed;
            inset: 0;
            background: #000;
            display: none;
            z-index: 100;

            &.active {
                display: block;
            }

            #remoteVideo {
                /* width: 100%; */
                height: 100%;
                object-fit: cover;
                background: #1a1a1a;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }

            .local-video-wrapper {
                --w: calc(100vw / 10);

                position: absolute;
                top: 20px;
                left: calc(100vw - var(--w) - 20px);
                width: var(--w);
                aspect-ratio: 9/16;
                cursor: move;
                z-index: 1000;
                transition: transform .3s;

                &:hover {
                    transform: scale(1.05);
                    box-shadow: 0 6px 16px rgb(0 0 0 / 60%);
                }

                #localVideo {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    background: #2a2a2a;
                    border-radius: 12px;
                    box-shadow: 0 4px 12px rgb(0 0 0 / 50%);
                    border: 2px solid rgb(255 255 255 / 15%);
                    pointer-events: none;
                }
            }

            .status {
                position: absolute;
                top: 20px;
                left: 20px;
                padding: 8px 16px;
                background: rgb(0 0 0 / 60%);
                backdrop-filter: blur(20px) saturate(180%);
                border-radius: 20px;
                color: white;
                font-size: 13px;
                z-index: 30;
                display: flex;
                align-items: center;
                gap: 8px;
                font-weight: 500;

                &.hidden {
                    display: none;
                }

                .status-dot {
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                    background: #30d158;
                    animation: pulse 2s infinite;
                }
            }

            .controls-panel {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                padding: 30px;
                background: linear-gradient(to top, rgb(0 0 0 / 80%), transparent);
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 20px;
                z-index: 20;
                opacity: 0;
                transition: opacity 0.3s ease;

                &.active {
                    opacity: 1;
                }

                .btn-control {
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    background: rgb(255 255 255 / 20%);
                    backdrop-filter: blur(20px) saturate(180%);
                    border: none;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    transition: all 0.3s ease;

                    &:hover {
                        background: rgb(255 255 255 / 30%);
                        transform: scale(1.1);
                    }

                    &.btn-end {
                        background: #ff3b30;

                        &:hover {
                            background: #ff2d1f;
                        }
                    }

                    svg {
                        width: 24px;
                        height: 24px;
                        fill: white;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        pointer-events: none;
                    }
                }
            }
        }
    }

    .hideit {
        display: none !important;
    }

    .no-transition,
    .no-transition * {
        transition: none !important;
    }

    .noinput * {
        pointer-events: none !important;
    }


    .payment-message {
        padding: var(--padding-small);
        border: 1px solid var(--color-accent-light) !important;
        overflow: hidden;
        display: inline-block;
        font-size: 1.2rem;
        font-weight: 500;
        width: 100%;
        border-radius: var(--radius);
        box-shadow: var(--shadow1);

        &::before {
            content: '';
            position: absolute;
            inset: 0;
            display: block;
        }


        .options {
            display: flex;
            flex-direction: row;
            gap: var(--padding-small);
            padding-top: var(--padding-small);
            align-items: center;
            justify-content: center;

            a.btn {
                flex: 1;
                margin-bottom: 0;
                margin-top: 0 !important;

                &.single {
                    max-width: 30rem;
                    width: 100%;
                }
            }
        }

        &#PAY-APROVADA {
            border: 1px solid var(--color-green) !important;

            &::before {
                background: var(--color-green);
                opacity: .1;
            }
        }

        &#PAY-UNKNOWN,
        &#PAY-REJEITADA,
        &#PAY-EXPIRADA {
            border: 1px solid var(--color-orange) !important;

            &::before {
                background: var(--color-orange);
                opacity: .1;
            }
        }

        &#PAY-CANCELADA {
            border: 1px solid var(--color-red) !important;

            &::before {
                background: var(--color-red);
                opacity: .1;
            }
        }
    }

    #therapist-payment {
        .modal-content {
            text-align: center;
            max-width: 520px;
        }
    }

    #missing-payment {
        padding: 1rem;
        margin-bottom: calc(2rem * 2);
        border: 1px solid var(--color-accent-light) !important;
        overflow: hidden;
        max-width: 32.5rem;
        display: inline-block;
        width: 100%;
        border-radius: var(--radius);
        box-shadow: var(--shadow1);
        text-align: center;

        .pay-pricing {
            color: var(--mood-positive-label);
            font-weight: 500;
        }

        label {
            text-align: left;
            margin: 1rem -1rem;
            padding: 1rem 2rem;
            border: 1px solid var(--color-accent-light);
            border-left: none;
            border-right: none;
            background: #fff;
            display: block;

            b {
                font-size: 1rem;
            }
        }

        img {
            display: block;
            width: calc(100% + 1rem * 2);
            height: auto;
            margin-left: calc(1rem * -1);
            margin-top: calc(1rem * -1);
            margin-bottom: 1rem;
            border-bottom: 1px solid var(--color-accent-light);
        }

        b {
            font-weight: 500;
            font-size: 1.2rem;
            margin-bottom: .5rem;
            display: block;
        }

        button {
            width: 100%;
            margin-top: 1rem;
            margin-bottom: 0 !important;
        }

        select {
            display: block;
            background: #fff;
            padding: 1rem;
            width: 100%;
            margin-top: 1rem;
            border-radius: var(--radius);
            box-shadow: var(--shadow1);
        }

        b.support-header {
            margin-top: 2rem;
            margin-bottom: 1rem;
        }

        .support {
            display: flex;
            flex-direction: row;
            gap: 1rem;

            a {
                flex: 1;
                margin-bottom: 0;
            }
        }
    }
}


#pix-data {
    background-color: var(--color-ultra-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow1);
    display: block;
    padding: var(--padding);

    #copy-pix-code {
        display: flex;
        flex-direction: column;
        cursor: pointer;
        background: #fff;
        border-radius: 1rem;
        border: 1px solid var(--color-accent) !important;
        padding: 1rem;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0 0 0 / 5%);
        margin: 2rem 0;

        textarea {
            resize: none;
            overflow: hidden;
            cursor: pointer;
            width: 100%;
            font-family: monospace;
            line-break: anywhere;
            border: none !important;
            padding: 0 !important;
            box-shadow: none !important;
            border-radius: 0 !important;
        }

        &::after {
            content: 'Clique para copiar o código PIX';
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            padding: 1rem;
            margin: -1rem;
            margin-top: 1rem;
            background: var(--color-accent);
            font-size: 1.2rem;
            color: #fff;
        }

        &.copied {
            border: 1px solid var(--mood-positive-label) !important;
        }

        &.copied::after {
            content: 'Código copiado!';
            background: var(--mood-positive-label);
        }
    }

    .steps {
        display: flex;
        flex-direction: column;
        margin-bottom: 2rem;

        &:not(.selected) {
            display: none;
        }

        .step {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: .5rem;
            padding: .5rem 1rem;
            border-radius: 1rem;
            text-align: left;
            font-weight: 500;

            span {
                display: flex;
                align-items: center;
                justify-content: center;
                min-width: 28px;
                height: 28px;
                background: var(--color-accent);
                color: white;
                border-radius: 50%;
                font-weight: 600;
                font-size: 1.1rem;
            }
        }
    }

    .steps-tabs {
        display: inline-flex;
        gap: 2px;
        padding: 4px;
        background: #f5f5f5;
        border-radius: 1rem;
        margin-bottom: 1rem;
        margin-top: 1rem;

        .step-tab {
            padding: .7rem 1.1rem;
            font-weight: 500;
            cursor: pointer;
            white-space: nowrap;

            &:not(.selected) {
                opacity: 0.6;
            }

            &.selected {
                border-radius: .8rem;
                background: var(--color-ultra-light);
                box-shadow: 0 1px 3px rgba(0 0 0 / 10%);
                opacity: 1;
            }
        }
    }

    b {
        font-weight: 600;
        margin-bottom: .6rem;
        display: inline-block;
    }

    p {
        display: block;
        line-height: 1.1rem;
    }

    h2 {
        font-size: 1.3rem !important;
        font-weight: 600;
        margin-bottom: 2rem;
        display: block;
    }

    #qrcode {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 2rem;
        margin-bottom: 2rem;

        img {
            width: 100%;
            height: auto;
            max-width: 304px;
            aspect-ratio: 1;
            border: 2px solid #fff;
        }
    }

    #payment-status {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: .5rem;
        padding: 1rem;
        background: var(--color-orange-light);
        border: 1px solid var(--color-orange) !important;
        font-weight: 500;
        margin-top: 1rem;
    }

    #novaintel {
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 600;
        font-size: .85rem;
        margin-top: 2rem;
    }

    .dots::after {
        content: '\00a0\00a0\00a0';
        animation: dot-animation 2s steps(3) infinite;
        font-family: monospace;
    }

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--ios-cyan);
        z-index: -1;
        opacity: .05;
    }
}


@keyframes dot-animation {
    0% {
        content: '\00a0\00a0\00a0';
    }

    33% {
        content: '.\00a0\00a0';
    }

    66% {
        content: '..\00a0';
    }

    100% {
        content: '...';
    }
}

@media (width <=48rem) {
    html {
        body {
            padding: 1rem;

            nav {
                flex-direction: column;
                gap: 20px;

                img {
                    height: auto;
                    width: 100%;
                    max-width: 206px;
                }

                .therapist-header {
                    justify-content: flex-end;
                }

            }

            main {
                section {
                    &#patients {
                        .actions-head {
                            flex-flow: column wrap;
                            padding-top: 5rem;
                            margin-bottom: 0;

                            >* {
                                flex: 1;
                                width: 100%;

                                &.filter-patients {
                                    max-width: 100%;
                                }

                                &.btn {
                                    justify-content: center;
                                    transform: translateY(-10rem);
                                }

                                &.count-patients {
                                    transform: translateY(4.5rem);
                                }
                            }
                        }


                        ul {
                            grid-template-columns: repeat(1, minmax(0, 1fr));

                            li {
                                .patient-head {
                                    .info {
                                        max-width: calc(100% - 4rem);
                                    }
                                }

                                &:hover {
                                    transform: none;
                                }
                            }
                        }
                    }
                }
            }

            .patient,
            #patient-modal {
                &#patient-modal {
                    .close-patient-modal {
                        font-size: 0;
                        padding: .6rem;
                        border-top-right-radius: 0;

                        &::before {
                            margin: 0;
                        }
                    }

                    .patient-head {
                        .info {
                            >* * {
                                max-width: calc(100% - 4rem);
                                overflow: clip;
                            }
                        }
                    }

                    .content {
                        .patient-tabs-content {
                            & .mood-summary {
                                .mood-card {
                                    padding: 1rem;

                                    .sentiment-bar-wrap {
                                        .sentiment-bar {
                                            .bar-pos {
                                                min-width: 2.2rem;
                                            }
                                        }
                                    }
                                }
                            }

                            .patient-info {
                                margin: 0 -1rem;
                                width: calc(100% + 2rem);

                                .by-therapist {
                                    .therapist-info {
                                        flex-direction: column;

                                        .therapist-contact-info {
                                            max-width: 100%;
                                            margin-top: .5rem;
                                        }
                                    }
                                }
                            }

                            .head {
                                .calendar {
                                    .cal-month {
                                        margin-bottom: 1rem;
                                        height: auto;
                                        aspect-ratio: initial;
                                        padding: 1rem;
                                        padding-top: .5rem;

                                        &:last-child {
                                            margin-bottom: 0;
                                        }
                                    }
                                }

                                .row {
                                    display: block;

                                    .btn {
                                        margin: 1rem 0;
                                    }

                                    &.filter-date {
                                        .sel {
                                            display: block;
                                            text-align: center;
                                            align-items: center;

                                            b {
                                                padding: .6rem 0;
                                                display: block;
                                                text-align: center;
                                                align-items: center;
                                            }

                                            label {
                                                margin-left: 3.8rem;
                                            }
                                        }

                                        label {
                                            padding: .3rem 0;

                                            b {
                                                padding: 0;
                                                width: 5rem;
                                                padding-left: .2rem;
                                            }
                                        }

                                        .toggle {
                                            position: absolute;
                                            top: 3.1rem;
                                            left: -.2rem;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .modal {
                padding: 1.5rem;

                .modal-content {
                    padding: 0;
                    width: 100% !important;
                    max-width: 100% !important;

                    &.alert {
                        & .content {
                            .actions {
                                flex-direction: row;
                            }
                        }
                    }

                    /*
                    &:has(#save-patient-form) {
                        width: calc(100% + 1rem) !important;
                        max-width: calc(100% + 1rem) !important;
                    } */

                    .modal-head {
                        text-align: left;
                        display: block;
                        align-items: initial;

                        h2 {
                            text-align: left;
                            padding-top: 0;
                            padding-left: 0;
                            padding-right: 0;
                        }

                        .close-modal {
                            position: fixed;
                            top: 1.1rem;
                            right: 1.2rem;
                            background-color: #f4f4f4;
                            opacity: 1;
                            aspect-ratio: 1;
                            height: 2.5rem;
                            border-radius: 100%;
                        }
                    }

                    .content {
                        .actions {
                            flex-direction: column;
                        }

                        .block {
                            .row {
                                display: block;

                                &:has(input) {
                                    label {
                                        padding: 0;
                                        margin: 0;
                                        margin-bottom: .5rem;
                                        font-weight: 600;
                                        color: var(--color-tertiary);
                                        font-size: .9rem;
                                        position: relative;
                                        left: initial;
                                    }

                                    input {
                                        padding: calc(var(--padding) / 1.8);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}


@keyframes gridMove {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -85px 0;
    }
}

html:has(#therapist-form:not(.hidden)) {
    #finish-signup {
        display: none;
    }
}

.modal.hidden {
    opacity: 0 !important;
    pointer-events: none !important;

    * {
        pointer-events: none !important;
    }
}