:root{
    --image_upload_background_color:hsl(243,41%,25%);
    --image_upload_background_color_hover:color-mix(in hsl shorter hue, var(--image_upload_background_color), grey 20%);
    --image_upload_foreground_color:hsl(194, 77%, 51%);
    --image_upload_foreground_color_hover:color-mix(in hsl shorter hue, var(--image_upload_foreground_color), grey 20%);
    --brand_pink: hsl(324, 100%, 40%);
    --brand_green: hsl(63, 59%, 53%);
    --brand_purple: hsl(282, 57%, 33%);
    --brand_plum: hsl(321, 75%, 31%);
    --brand_navy: hsl(243, 41%, 25%);
    --brand_blue: hsl(194, 77%, 51%);
    --start_rotation: 0deg;
}
*{
    font-family: brandfont, serif;
    margin: 5px;
    box-sizing: border-box;
}
body,html{
    margin:0px;
    overflow-x: hidden;
    background: linear-gradient(135deg, hsl(0,0%,95%), hsl(0,0%,85%));
    min-height: 100vh;
    padding-top: 80px;
}
header>*,main>section{
    display:none;
}
/*
 *	Loading Screen
 */
html:has(.jsLoadingIcon.--active) body>*:not(.jsLoadingIcon){
    filter: blur(2px);
}
.jsLoadingIcon{
    top:0px;
    margin:0px;
    position:fixed;
    width:100%;
    height:100vh;
    z-index:10;
    background-color: hsla(0,0%,50%,50%);
    grid-template: 1fr 20% 1fr / 1fr;
    justify-content: center;
    display:none;
    row-gap: 20px;
    & *{
        margin:0px;
    }
    &>*{
        width:100%;
        &:is(:nth-child(1)){
            display:grid;
            grid-template: 1fr auto / 1fr;
            >p{
                text-align: center;
                width:100%;
                bottom:0px;
            }
        }
        &:is(div:not(.loadingSpinner)){
            width:100%;
            height:100%;
        }
        &.loadingSpinner{
            position: relative;
            margin: 0px;
            justify-self: center;
            height:100%;
            aspect-ratio: 1/1;
            width: auto;
            &>div{
                height:100%;
                aspect-ratio: 1/1;
                width: auto;
                position: absolute;
                top:0px;
                left: 0px;
                &:nth-of-type(1){
                    animation: 2s cubic-bezier(0.70,0.0,0.45,1.0) infinite load;
                    --start_rotation: -25deg;
                    &>div{
                        animation: 2s cubic-bezier(0.55,0.0,0.30,1.0) infinite reverse load;
                        --start_rotation: 25deg;
                    }
                }
                &:nth-of-type(2){
                    animation: 2s cubic-bezier(0.625,0.0,0.375,1.0) infinite load;
                    &>div{
                        animation: 2s cubic-bezier(0.625,0.0,0.375,1.0) infinite reverse load;
                    }
                }
                &:nth-of-type(3){
                    animation: 2s cubic-bezier(0.55,0.0,0.30,1.0) infinite load;
                    --start_rotation: 25deg;
                    &>div{
                        animation: 2s cubic-bezier(0.70,0.0,0.45,1.0) infinite reverse load;
                        --start_rotation: -25deg;
                    }
                }
                >div{
                    border: 1px solid hsl(0,0%,50%);
                    background: linear-gradient(hsl(0,0%,50%) 60%, hsl(0,0%,70%));
                    border-radius:50%;
                    width:20px;
                    height:20px;
                    position:absolute;
                    left:50%;
                    right:50%;
                    translate:-50% -50%;
                }
            }
        }
        &:is(p){
            text-align:center;
        }
    }
    &.--active{
        display:grid;
    }
}
.jsReloadIcon{
    position:fixed;
    width:30px;
    height:30px;
    stroke: black;
    stroke-width: 3px;
    fill: transparent;
    left: 50%;
    margin-left: 15;
    z-index:-1;
    &.--active{
        animation: 1s linear infinite load;
    }
}
@keyframes load{
    from{
        transform: rotate(var(--start_rotation));
    }
    to{
        transform: rotate(calc(var(--start_rotation) + 360deg));
    }
}
/*
 *	Header
 */
header{
    display: flex;
    position: fixed;
    top:0px;
    width: 100%;
    justify-content: space-around;
    align-items: center;
    background: linear-gradient(135deg, var(--brand_navy), var(--brand_blue));
    margin:0px;
    z-index:1000;
    margin-bottom: 20px;
    flex-wrap: wrap;
    box-shadow: 0px 5px 15px 3px hsla(0,0%,30%,50%);
    padding: 10px 20px;
    border-radius: 0 0 20px 20px;
    &:is(body.offline *){
        height: 111px;
        >.jsOfflineWarning{
            display:flex;
        }
    }
    >.jsOfflineWarning{
        display:none;
        background-color: hsl(0, 77%, 49%);
        color: hsl(0, 0%, 100%);
    }
    >.jsBackOnline{
        display:none;
        background-color: hsl(133, 77%, 49%);
        color: hsl(0,0%,100%);
    }
    >.jsBackOnline,>.jsOfflineWarning{
        flex-direction:column;
        align-items: center;
        top:0px;
        width:100%;
        height:fit-content;
        z-index:4;
        margin:0px;
    }
    & .SiteTitle{
        cursor:pointer;
        display:flex;
        >div{
            margin:0px;
            transition: transform 0.2s ease-in-out;
            &:nth-child(1){
                color:var(--brand_pink);
            }
            &:nth-child(2){
                color:var(--brand_green);
            }
            &:nth-child(3){
                color:var(--brand_purple);
            }
            &:nth-child(4){
                color:var(--brand_plum);
            }
            &:is(:nth-child(5),:nth-child(6)){
                color:var(--brand_navy);
            }
            &:is(:nth-child(7),:nth-child(8)){
                color:var(--brand_blue);
            }
            &:hover{
                transform: scale(1.1);
                z-index:1;
            }
            &:is(:hover+div){
                transform: rotate(20deg);
            }
            &:has(+:hover){
                transform: rotate(-20deg);
            }
        }
        &>*:before{
            -webkit-text-stroke: 2px white;
            content: attr(data-char);
            position: absolute;
            z-index:-1;
            text-shadow: 4px 2px 2px hsl(0, 0%, 10%);
        }
    }
    >.profile{
        display: flex;
        align-items: center;
        & .profilePhoto[data-loaded="true"]{
            display: block;
            &+div{
                display:none;
            }
        }
        & .profilePhoto{
            display:none;
            &+.noProfileImage{
                display:flex;
            }
        }
        & .profilePhoto,& .noProfileImage{
            width: 40px;
            height: 40px;
            border-radius:50%;
            cursor:pointer
        }
        & .noProfileImage{
            background-color: hsl(0,0%,80%);
            align-items:center;
            justify-content: center;
            & *{
                margin:0;
                width:80%;
                height:80%;
            }
        }
        &>.signout{
            cursor:pointer;
            &>svg{
                overflow: visible;
                &>polyline,&>line{
                    animation: signout 0.2s ease-in-out;
                    animation-fill-mode: forwards;
                }
            }
            &:hover{
                color: hsl(0,0%,20%);
                &>svg{
                    &>polyline,&>line{
                        animation-name: signoutHover;
                    }
                }
            }
        }
    }
    @media(max-width:490px){
        flex-direction: column;
    }
}
@keyframes signoutHover{
    0%{
        transform: translateX(0px) scaleX(1);
    }
    50%{
        transform: translateX(2.5px) scaleX(1.2);
    }
    100%{
        transform: translateX(5px) scaleX(1);
    }
}
@keyframes signout{
    0%{
        transform: translateX(5px) scaleX(1);
    }
    50%{
        transform: translateX(2.5px) scaleX(1.2);
    }
    100%{
        transform: translateX(0px) scaleX(1);
    }
}
#wysiwygContainerAbout, #wysiwygContainerComments{
    grid-template-columns: subgrid;
    *{
        background-color:white;
        margin: 0px;
    }
}
#wysiwygPreviewAbout, #wysiwygPreviewComments{
    display:none;
}
section{
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    >.content{
        width: 90%;
        margin:0px;
        min-width: 80%;
        max-width: 1200px;
        background-color: rgba(255,255,255,0.95);
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .jsBackButton, .jsPrintButton {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: fit-content !important;
        max-width: 180px;
        gap: 4px;
        margin: 8px 6px;
        padding: 6px 10px;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 600;
        font-size: 0.9rem;
        color: hsl(234, 70%, 20%);
        border: 1px solid hsl(228, 70%, 85%);
        background: linear-gradient(135deg, hsl(225, 100%, 96%), hsl(217, 79%, 92%));
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
        user-select: none;
    }
    .jsBackButton:hover, .jsPrintButton:hover {
        transform: translateY(-1px);
        box-shadow: 0 5px 10px rgba(0,0,0,0.18);
        background: linear-gradient(135deg, hsl(220, 100%, 98%), hsl(210, 90%, 94%));
    }
    .jsBackButton i, .jsPrintButton i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: hsl(225, 80%, 88%);
        color: hsl(223, 68%, 35%);
        box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
    }
    .jsBackButton span, .jsPrintButton span {
        line-height: 1;
        font-size: 0.95rem;
     }
}
section[page="list_pbs"]{
    & .newPBSPlan{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        justify-content: center;
        width: fit-content;
        min-width: 200px;
        background: linear-gradient(135deg, var(--brand_green), var(--brand_blue));
        color:white;
        border-radius: 999px;
        height: 44px;
        padding: 6px 18px;
        font-size: 0.92rem;
        font-weight: 700;
        text-transform: none;
        text-decoration: none;
        box-shadow: 0 3px 10px rgba(0,0,0,0.2);
        transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
        border: 1px solid rgba(255,255,255,0.4);
        backdrop-filter: blur(8px);
        & > i {
            background: rgba(255,255,255,0.22);
            border-radius: 50%;
            width: 28px;
            height: 28px;
            display: grid;
            place-items: center;
            box-shadow: inset 0 0 6px rgba(0,0,0,0.15);
        }
        &:hover{
            background: linear-gradient(135deg, hsl(63, 59%, 43%), hsl(194, 77%, 41%));
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.28);
            filter: brightness(1.05);
        }
    }
    & .pbsTable{
        display:grid;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        & *{
            margin:0px;
        }
        &>.pbsTableHeader,&>.pbsTableContent>.pbsTableContentRow{
            align-self: start;
            grid-row: auto / span 1;
            display:grid;
            grid-template: subgrid / 1fr 1fr 1fr 1fr 1fr;
            &>.pbsTableHeaderCell,&>.pbsTableContentCell{
                text-align: center;
                border-bottom: 1px solid hsl(239,27%,80%);
                border-right: 1px solid hsl(239,27%,80%);
                padding:10px 15px;
                position: relative;
                font-weight: 600;
            }
            &>.pbsTableHeaderCell{
                background-color: hsl(225, 100%, 94%);
                color: hsl(235, 40%, 18%);
                text-shadow: none;
                border-bottom: 1px solid hsl(235, 75%, 82%);
                border-top: 1px solid hsl(235, 75%, 82%);
            }
            &>.pbsTableContentCell{
                background-color: transparent;
                color: hsl(232, 14%, 18%);
                pointer-events: none;
            }
            &>.pbsTableHeaderCell:first-of-type,
            &>.pbsTableContentCell:first-of-type{
                border-left: 1px solid hsl(239,27%,80%);
            }
            &>.pbsTableHeaderCell:first-of-type{
                border-top: 1px solid hsl(235, 75%, 82%) !important;
                border-left: 1px solid hsl(239,27%,80%) !important;
            }
            & .pbsTableHeaderSortIcons{
                position: absolute;
                right: 6px;
                top: 50%;
                translate: 0 -50%;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 1px;
                background: hsla(225, 60%, 88%, 0.55);
                border-radius: 6px;
                padding: 3px 4px;
                height: auto;
                & *{ margin: 0; }
                &>svg{
                    cursor: pointer;
                    display: block;
                    width: 13px;
                    height: 13px;
                    stroke: hsl(234, 55%, 35%);
                    transition: stroke 0.12s ease, opacity 0.12s ease;
                    &:hover{
                        stroke: var(--brand_navy);
                        opacity: 1 !important;
                    }
                    &:is(.pbsTableHeaderCell:not([data-dir="asc"]) :nth-child(1)){
                        stroke: hsl(0,0%,65%);
                        opacity: 0.6;
                    }
                    &:is(.pbsTableHeaderCell:not([data-dir="desc"]) :nth-child(2)){
                        stroke: hsl(0,0%,65%);
                        opacity: 0.6;
                    }
                }
            }
            &:has(.pbsTableHeaderSortIcons){
                cursor:pointer;
            }
        }
        @media(max-width:720px){
            & div[data-field="Created"]{
                display:none;
            }
            &>.pbsTableHeaderCell,&>.pbsTableContentCell{
                font-size: 0.9em;
                padding:5px 0px;
            }
        }
    }
    &>.pbsTableHeader{
        background: hsl(225, 100%, 96%);
        color: hsl(235, 40%, 18%);
        border-radius: 10px 10px 0 0;
        border-bottom: 1px solid hsl(235, 75%, 82%);
        &>.pbsTableHeaderCell:first-of-type{
            border-top: 1px solid hsl(235, 75%, 82%);
            border-left: 1px solid hsl(239,27%,80%);
        }
    }
    &>.pbsTableContent>.pbsTableContentRow{
        cursor: pointer;
        background-color: rgba(255,255,255,0.95);
        border-radius: 0;
        transition: all 0.3s ease;
        &:nth-child(odd){
            background-color: rgba(240,240,240,0.95);
        }
        &:hover{
            background-color: rgba(200,220,255,0.35) !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.12);
        }
        &:hover .pbsTableContentCell{
            background-color: rgba(200,220,255,0.35) !important;
        }
        & .pbsTableContentCell{
            cursor: pointer !important;
            background-color: transparent !important;
            color: hsl(232, 14%, 18%) !important;
        }
        & [data-field="review_date"]{
            &[data-due="over"]{
                color: hsl(0,100%,40%);
            }
            &[data-due="soon"]{
                color: hsl(36, 100%, 50%);
            }
        }
        &.loading{
            background-color: transparent;
            cursor: default;
        }
        &.loading:hover{
            background-color: transparent;
            transform: none;
            box-shadow: none;
        }
    }
}
section[page="edit_pbs"]>.content{
    background-color: hsl(0,0%,95%);
    box-shadow: 5px 5px 5px 5px hsla(0,0%,0%,75%);
    display:grid;
    grid-template: 2fr / 1fr 1fr;
    align-content: space-between;
    margin-bottom: 80px;
    & .jsPrintButton{
        justify-self:end;
        &:hover>svg>rect{
            animation: printHover 1s;
        }
    }
    &>form{
        grid-column: 1 / span 2;
        & #formContainer{
            display:grid;
            grid-template-columns: 1fr 1fr;
            grid-auto-rows: auto;
            gap: 0 12px;
            & *{
                margin:0;
                & *{
                    padding:5px;
                }
                &>.formSectionHeader{
                    margin-top: 30px;
                    text-align: center;
                    /* design */
                    padding: 9px 16px;
                    border-radius: 8px;
                    font-weight: 700;
                    font-size: 0.9rem;
                    letter-spacing: 0.03em;
                }
            }
            &>div{
                align-self: start;
                grid-row: auto / span 100;
                display:grid;
                grid-template: subgrid / 1fr;
                &>.formSectionField{
                    page-break-inside: avoid;
                    display:grid;
                    grid-template: subgrid / 1fr;
                    gap: 10px;
                    grid-row: auto / span 2;
                    padding: 6px 0;
                    >label{
                        align-self: end;
                        font-size: 0.82rem;
                        font-weight: 600;
                        color: hsl(234, 45%, 35%);
                        letter-spacing: 0.02em;
                    }
                    & input:not([type="hidden"]),
                    & textarea{
                        width: 100%;
                        padding: 7px 12px;
                        border: 1px solid hsl(228, 70%, 85%);
                        border-radius: 8px;
                        background: white;
                        color: hsl(232, 14%, 18%);
                        font-size: 0.92rem;
                        box-shadow: 0 1px 4px rgba(0,0,0,0.06);
                        transition: border-color 0.15s ease, box-shadow 0.15s ease;
                        outline: none;
                        resize: vertical;
                        &:focus{
                            border-color: var(--brand_blue);
                            box-shadow: 0 0 0 3px hsla(194, 77%, 51%, 0.18);
                        }
                        &::placeholder{
                            color: hsl(220, 15%, 65%);
                        }
                    }
                    &>.bulletPoints{
                        background: white;
                        border: 1px solid hsl(228, 70%, 85%);
                        border-radius: 8px;
                        padding: 8px 10px 8px 16px;
                        box-shadow: 0 1px 4px rgba(0,0,0,0.06);
                        &>.bulletPointsList{
                            &:not(:has(li:not(.newBulletPoint))){
                                display:none;
                            }
                            & input{
                                width:100%;
                                border: none;
                                outline: none;
                                background: transparent;
                                box-shadow: none;
                                padding: 2px 4px;
                                font-size: 0.92rem;
                                color: hsl(232, 14%, 18%);
                            }
                            & li:not(:has(input)):hover{
                                background-color: hsl(214, 80%, 93%);
                                color: hsl(234, 70%, 25%);
                                cursor:pointer;
                                border-radius: 6px;
                            }
                            & li.newBulletPoint input{
                                color: hsl(220, 15%, 60%);
                                border-bottom: 1px dashed hsl(228, 55%, 82%);
                                border-radius: 0;
                                &::placeholder{
                                    color: hsl(220, 15%, 68%);
                                }
                            }
                        }
                        &>.bulletPointsPlaceholder{
                            color: hsl(220, 15%, 60%);
                            cursor:text;
                            width:100%;
                            height:100%;
                            display:block;
                            font-size: 0.88rem;
                            &:is(.bulletPoints:has(.newBulletPoint input:focus,.bulletPointsList li:not(.newBulletPoint))>.bulletPointsPlaceholder){
                                display:none;
                            }
                        }
                    }
                }
            }
        }
        @media(max-width:590px){
            & #formContainer{
                grid-template-columns: 1fr;
            }
        }
        &>div{
            display:flex;
            align-items: center;
            &>.formSection{
                display:contents;
                &>.formField{
                    display:block;
                    margin-bottom:10px;
                    gap: 10px;
                    width:100%;
                    >textarea{
                        resize: none;
                        height: 100%;
                        display: none;
                    }
                    >*{
                        margin:0;
                    }
                }
            }
        }
        & input:disabled{
            display: inline-block;
            padding: 7px 12px;
            border: 1px solid hsl(228, 40%, 88%);
            border-radius: 8px;
            background: hsl(220, 25%, 96%);
            color: hsl(220, 12%, 52%);
            font-size: 0.95rem;
            box-shadow: none;
            cursor: default;
            appearance: none;
            -webkit-appearance: none;
        }
        & input[type="date"]:disabled::-webkit-calendar-picker-indicator{
            display: none;
        }
        & input.--error{
            border: 2px solid red;
        }
        & .errorMessage{
            display: none;
            color: red;
        }
        & div:has(input.--error) .errorMessage{
            display: block;
        }
        >input[type='submit']{
            display:none;
        }
    }
}
.saveButtonContainer{
    width: 100%;
    position:fixed;
    bottom:0px;
    margin:0px;
    padding:5px;
    background-image: linear-gradient(to top,hsl(0, 0%, 95%)  80%, hsl(0, 0%, 70%));
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    >div{
        width: 400px;
        margin:10px;
        min-width: 80%;
        max-width: 100%;
        >.jsSaveButton{
            all:unset;
            background: linear-gradient(135deg, var(--brand_green), var(--brand_pink));
            padding: 15px 30px;
            border-radius: 25px;
            cursor:pointer;
            color: hsl(0,0%,100%);
            font-weight: bold;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            &:hover{
                background: linear-gradient(135deg, hsl(63, 59%, 43%), hsl(324, 100%, 35%));
                transform: translateY(-2px);
                box-shadow: 0 6px 12px rgba(0,0,0,0.3);
            }
            &[disabled]{
                background-color: hsl(207, 25%, 70%);
                cursor: default;
            }
        }
    }
}
.searchbox{
    position:relative;
    display:inline-block;
    &>.jsSearchTextbox{
        width:100%;
        padding: 7px 12px;
        border: 1px solid hsl(228, 70%, 85%);
        border-radius: 8px;
        background: white;
        color: hsl(232, 14%, 18%);
        font-size: 0.95rem;
        box-shadow: 0 1px 4px rgba(0,0,0,0.07);
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
        outline: none;
        &:focus{
            border-color: var(--brand_blue);
            box-shadow: 0 0 0 3px hsla(194, 77%, 51%, 0.18);
        }
    }
    .jsDropdown{
        overflow-y:hidden;
        overflow-x:hidden;
        height:200px;
        width: 100%;
        min-width: 180px;
        z-index:100;
        position:absolute;
        background-color: hsl(0,0%,100%);
        box-shadow: 0 8px 24px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.08);
        border: 1px solid hsl(228, 70%, 85%);
        border-top: none;
        border-radius: 0 0 10px 10px;
        display:none;
        left:0px;
        >div.dropdownOptions{
            overflow-y:auto;
            height:100%;
            -ms-overflow-style: none;
            scrollbar-width: none;
            margin:0px;
            padding: 6px;
            &::-webkit-scrollbar {
                display: none;
            }
            >.jsDropdownOption{
                margin:0;
                width:100%;
                cursor:pointer;
                border-radius: 6px;
                padding: 7px 10px;
                font-size: 0.93rem;
                color: hsl(232, 14%, 18%);
                transition: background-color 0.1s ease;
                &.--hover {
                    background-color: hsl(214, 80%, 93%);
                    color: hsl(234, 70%, 25%);
                }
                &.--selected {
                    background: linear-gradient(135deg, var(--brand_navy), var(--brand_blue));
                    color: white;
                }
            }
            >.jsDropdownOptionsTemplate{
                display:none;
            }
        }
        >.dropdownLetterIndicator{
            position: absolute;
            top: 50%;
            left: 50%;
            translate: -50% -50%;
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--brand_navy), var(--brand_blue));
            color: white;
            font-size: 2rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.15s ease;
            z-index: 3;
            box-shadow: 0 4px 16px rgba(0,0,0,0.3);
            &.--visible{
                opacity: 1;
            }
        }
        >.dropdownScroll{
            display:block;
            height:100%;
            width:4px;
            position:absolute;
            background-color:hsla(0,0%,0%,8%);
            top:0px;
            right:0px;
            margin:0px;
            border-radius: 0 0 10px 0;
            >.dropdownScrollInner{
                height:20px;
                width:100%;
                background: linear-gradient(to bottom, var(--brand_blue), var(--brand_navy));
                border-radius: 4px;
                position:absolute;
                top:0px;
                left:0px;
                margin:0px;
                opacity: 0.6;
                cursor: grab;
                &.--dragging{
                    cursor: grabbing;
                    opacity: 0.9;
                }
            }
        }
    }
    &>.jsDropdown:has(*:hover), &>input:focus+.jsDropdown{
        display:block;
    }
}
.jsFileDandDUpload{
    text-decoration: none;
    border: 2px dashed var(--brand_blue);
    border-radius: 16px;
    position: relative;
    cursor: url("/icons/upload.svg") 12 3, pointer;
    width: 400px;
    height: auto;
    min-width: 50px;
    min-height: 50px;
    max-width: 100%;
    aspect-ratio: 2/1;
    margin: 0px;
    background: linear-gradient(135deg, hsl(210, 55%, 98%), hsl(243, 45%, 97%));
    overflow: hidden;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    /* "click to browse" hint shown when no image is loaded */
    &::after{
        content: 'Drop an image or click to browse';
        position: absolute;
        left: 50%;
        top: 70%;
        translate: -50% -50%;
        font-size: 0.78rem;
        font-weight: 500;
        color: hsl(220, 35%, 60%);
        white-space: nowrap;
        pointer-events: none;
        z-index: 0;
    }
    &:hover:not(:has(.imagePreview[style*="visible"])){
        border-style: solid;
        border-color: var(--brand_navy);
        background: linear-gradient(135deg, hsl(194, 55%, 95%), hsl(243, 45%, 94%));
        box-shadow: 0 4px 16px hsla(194, 77%, 51%, 0.2);
    }
    /* hide hint and upload icon once an image is showing */
    &:has(.imagePreview[style*="visible"])::after{
        display: none;
    }
    &:has(.imagePreview[style*="visible"])>.addImageIcon{
        display: none;
    }
    &>.addImageIcon{
        position: absolute;
        width: 26%;
        height: 26%;
        left: 50%;
        top: 40%;
        translate: -50% -50%;
        stroke-width: 1.5;
        stroke: var(--brand_blue);
        fill: none;
        opacity: 0.55;
        z-index: 0;
        transition: opacity 0.2s ease, stroke 0.2s ease;
    }
    &:hover:not(:has(.imagePreview[style*="visible"]))>.addImageIcon{
        opacity: 0.9;
        stroke: var(--brand_navy);
    }
    &>.jsRemoveImage{
        position: absolute;
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: hsla(0, 0%, 0%, 0.45);
        backdrop-filter: blur(6px);
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s ease, transform 0.15s ease;
        &:is(.jsFileDandDUpload:has(.imagePreviewContainer>.imagePreview[src=""])>.jsRemoveImage){
            display: none;
        }
        &:hover{
            background: hsla(0, 75%, 45%, 0.85);
            transform: scale(1.12);
        }
        &, & *{
            cursor: url("/icons/trash-2.svg") 12 12, pointer;
        }
        & *{
            pointer-events: none;
        }
        /* two overlapping icons — first is white shadow, second is the visible icon */
        &>*{
            position: absolute;
            top: 50%;
            left: 50%;
            translate: -50% -50%;
            width: 15px;
            height: 15px;
            padding: 0;
            border: none;
            border-radius: 0;
            &:first-of-type{
                stroke: hsla(0, 0%, 0%, 0.5);
                stroke-width: 5px;
                top: 50%;
                left: 50%;
                border: none;
                padding: 0;
            }
            &:last-of-type{
                stroke: white;
                stroke-width: 2.5px;
            }
        }
    }
    & *{
        margin: 0px;
    }
    &>.imagePreviewContainer{
        transition-duration: 1s;
        position: absolute;
        left: 50%;
        top: 50%;
        translate: -50% -50%;
        height: 100%;
        width: 100%;
        margin: auto;
        z-index: 1;
        overflow: hidden;
        border-radius: 14px;
        &>.imagePreview{
            position: relative;
            object-fit: contain;
            border-radius: 4px;
            max-height: 100%;
            max-width: 100%;
            height: 100%;
            width: 100%;
            z-index: 1;
        }
        &>.imagePreviewBackground{
            position: absolute;
            top: 0;
            left: 0;
            object-fit: cover;
            border-radius: 4px;
            width: 100%;
            height: 100%;
            z-index: 0;
            filter: blur(40px) brightness(50%);
        }
    }
}
.sign-in-with-microsoft{
    display:inline-flex;
    align-items:center;
    gap:10px;
    justify-content:center;
    cursor:pointer;
    border-radius:10px;
    padding:10px 18px;
    font-size:1rem;
    font-weight:700;
    color:#222;
    background: linear-gradient(135deg, #ffffff, #f0f4ff);
    border:1px solid #b3c1ea;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.sign-in-with-microsoft:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
    background: linear-gradient(135deg, #f9fbff, #e8f0ff);
}

/* Table row hover pointer + highlight */
.pbsTableContentRow{
    cursor: pointer !important;
}
.pbsTableContentRow:hover{
    background-color: rgba(150,180,255,0.25) !important;
}
.pbsTableContentRow:hover .pbsTableContentCell,
.pbsTableContentRow .pbsTableContentCell{
    background-color: transparent !important;
}
.pbsTableContentRow.loading .pbsTableContentCell{
    background: linear-gradient(90deg, #c0c0c0 0%, #e0e0e0 20%, #ffffff 50%, #e0e0e0 80%, #c0c0c0 100%) !important;
    animation: shimmer 2.5s ease-in-out infinite !important;
    color: transparent !important;
    cursor: default !important;
}

@keyframes shimmer{
    0%{
        filter: brightness(0.8);
    }
    50%{
        filter: brightness(1.2);
    }
    100%{
        filter: brightness(0.8);
    }
}
#wysiwygAbout, #wysiwygContainerAbout, #wysiwygComments, #wysiwygContainerComments{
    height:fit-content;
}
.jsDatePicker{
    position: relative;
    display: inline-block;
    >.jsDatePickerTrigger{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 12px;
        border: 1px solid hsl(228, 70%, 85%);
        border-radius: 8px;
        background: white;
        cursor: pointer;
        font-size: 0.95rem;
        color: hsl(232, 14%, 18%);
        box-shadow: 0 1px 4px rgba(0,0,0,0.07);
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
        user-select: none;
        min-width: 160px;
        &:hover{
            border-color: var(--brand_blue);
            box-shadow: 0 0 0 3px hsla(194, 77%, 51%, 0.18);
        }
        >span{
            flex: 1;
        }
        &.--empty>span{
            color: hsl(0, 0%, 55%);
        }
        >svg{
            opacity: 0.45;
            flex-shrink: 0;
        }
    }
    >.jsDatePickerPopup{
        display: none;
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        z-index: 200;
        background: white;
        border: 1px solid hsl(228, 70%, 85%);
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.08);
        padding: 12px;
        min-width: 280px;
        &.--open{
            display: block;
        }
        >.jsDatePickerHeader{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
            & *{ margin: 0; }
            >.jsDatePickerNav{
                all: unset;
                cursor: pointer;
                width: 28px;
                height: 28px;
                border-radius: 6px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.3rem;
                color: hsl(234, 70%, 30%);
                transition: background 0.1s ease;
                &:hover{
                    background: hsl(214, 80%, 93%);
                }
            }
            >.jsDatePickerMonthYear{
                font-weight: 700;
                font-size: 0.95rem;
                color: hsl(234, 70%, 20%);
            }
        }
        >.jsDatePickerGrid{
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 2px;
            & *{ margin: 0; }
            >.jsDatePickerDayName{
                text-align: center;
                font-size: 0.72rem;
                font-weight: 600;
                color: hsl(234, 40%, 55%);
                padding: 4px 0 6px;
            }
            >.jsDatePickerDay{
                text-align: center;
                padding: 6px 2px;
                border-radius: 6px;
                font-size: 0.88rem;
                cursor: pointer;
                transition: background 0.1s ease;
                &:not(.--outside):not(.--disabled):not(.--selected):hover{
                    background: hsl(214, 80%, 93%);
                    color: hsl(234, 70%, 25%);
                }
                &.--today:not(.--selected){
                    outline: 2px solid var(--brand_blue);
                    outline-offset: -2px;
                    color: hsl(194, 77%, 30%);
                    font-weight: 700;
                }
                &.--selected{
                    background: linear-gradient(135deg, var(--brand_navy), var(--brand_blue));
                    color: white;
                    font-weight: 700;
                }
                &.--outside{
                    visibility: hidden;
                }
                &.--disabled{
                    color: hsl(0, 0%, 78%);
                    cursor: default;
                }
            }
        }
    }
}
@media print {
    body{
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color-adjust: exact;
    }
    #formContainer{
        display:block !important;
        &>div{
            break-inside: avoid;
        }
    }
    .bulletPointsList li.newBulletPoint{
        display:none;
    }
    .jsFileDandDUpload{
        border: unset;
        background: unset;
        &::after{
            display: none;
        }
        &>.addImageIcon{
            display: none;
        }
        & .imagePreviewBackground{
            display: none;
        }
        &>.jsRemoveImage{
            display: none;
        }
    }
    .content{
        background-color: hsl(0,0%,100%) !important;
        box-shadow: none !important;
    }
    .saveButtonContainer>div>.jsSaveButton, .saveButtonContainer{
        display:none !important;
    }
    header{
        display:none;
    }
    main{
        margin-top:0px;
    }
    section{
        margin-top:0px;
    }
    .jsLoadingIcon{
        display:none;
    }
    .jsReloadIcon{
        display:none;
    }
    .jsDatePickerTrigger,
    .jsDatePickerPopup,
    .jsBackButton,
    .jsPrintButton,
    .sign-in-with-microsoft,
    .jsSaveButton,
    .newPBSPlan,
    .pbsTableHeaderCell .pbsTableHeaderSortIcons,
    .profile,
    .searchbox,
    .jsDropdown,
    .jsOfflineWarning,
    .jsBackOnline{
        display:none !important;
    }
    #wysiwygContainerComments,
    #wysiwygContainerAbout {
        display:none !important;
    }
    #wysiwygPreviewComments,
    #wysiwygPreviewAbout {
        display:block !important;
    }
    #wysiwygPreviewComments > *,
    #wysiwygPreviewAbout > * {
        color: inherit;
        font-size: 1rem;
    }
    input {
        pointer-events: none;
        border: none;
        background-color: transparent;
        color: inherit;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
    }
    input[type="date"]::-webkit-calendar-picker-indicator {
        display: none !important;
    }
    .bulletPointsPlaceholder{
        display:none !important;
    }
}