:root {
    interpolate-size: allow-keywords;

    --toggle-bg-light: #ffffff;
    --toggle-bg-dark: #1f2937;

    --toggle-text-light: #374151;
    --toggle-text-dark: #d1d5db;

    --sun-color: hsl(43, 97%, 55%);
    --moon-color: hsl(234, 87%, 73%);

    --shadow-light-outer-light: -5px -5px 10px rgba(255, 255, 255, 0.7);
    --shadow-dark-outer-light: 5px 5px 10px #d1d5db;
    --shadow-light-inner-light: inset -3px -3px 6px rgba(255, 255, 255, 0.7);
    --shadow-dark-inner-light: inset 3px 3px 6px #d1d5db;

    --shadow-light-outer-dark: -5px -5px 10px #2e3d51;
    --shadow-dark-outer-dark: 5px 5px 10px #111827;
    --shadow-light-inner-dark: inset -3px -3px 6px #2e3d51;
    --shadow-dark-inner-dark: inset 3px 3px 6px #111827;

    --gradient-light: var(--toggle-bg-light);
    --gradient-dark: var(--toggle-bg-dark);

    --transition-speed: 0.5s;
    --transition-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);

    --body-bg-light: #F3F4F6;
    --body-text-light: #111827;
    --body-bg-dark: #111827;
    --body-text-dark: #F3F4F6;
}

@font-face {
    font-family: 'LavishlyYours';
    src: url('/webfonts/LavishlyYours-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

#logo {
    span {
        font-family: LavishlyYours, cursive;
        font-weight: 600;
        font-size: 2rem;
    }

    svg {
        transition: all 0.4s ease;
        filter: saturate(0.85) brightness(1.11);
    }

    html.dark & {
        svg {
            filter: saturate(0.7) brightness(1.5);
            transition: all 0.4s ease;
        }
    }
}

@view-transition {
    navigation: auto;
    /* types: slide, forwards; */
}

/* ::view-transition-group(root),
::view-transition-image-pair(root) {
    position: absolute;
    top: 0;
    left: 0;

    animation-duration: 1s;
    animation-fill-mode: both;
}


::view-transition-old(root) {
    animation: fade-out 0.5s ease-in both;
}

::view-transition-new(root) {
    animation: fade-in 0.5s ease-out both;
} */

::view-transition-group(main-area-transition),
::view-transition-image-pair(main-area-transition),
::view-transition-group(sidebar-transition),
::view-transition-image-pair(sidebar-transition) {
    position: absolute;
    top: 0;
    left: 0;

    animation-duration: 1s;
    animation-fill-mode: both;
}


@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-out {
    to {
        opacity: 0;
    }

    from {
        opacity: 1;
    }
}

::view-transition-old(main-area-transition),
::view-transition-old(sidebar-transition) {
    animation: 0.5s ease-out fade-out;
}

::view-transition-new(main-area-transition),
::view-transition-new(sidebar-transition) {
    animation: 0.5s ease-in fade-in;
}

#main-content main,
#sidebar {
    contain: layout;
}


@media (prefers-reduced-motion: reduce) {

    *,
    ::before,
    ::after {
        animation-duration: 0ms !important;
        transition-duration: 0ms !important;
    }
}


html.dark {
    text {
        fill: #d9d9d9;
    }
}

body {
    background-color: hsl(215, 85%, 98%);
    color: #1f2937;
    max-width: 100dvw;

    html.dark & {
        background-color: #111827;
        color: #f9fafb;
    }
}

#sidebar,
header {
    background-color: white;
    border-color: #e5e7eb;

    html.dark & {
        background-color: #1f2937;
        border-color: #374151;
    }
}

.sidebar-active {
    a {
        background-color: #f3f4f6;
        color: #1f2937;
        font-weight: 500;
        border-left: 3px solid #6366f1;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-right: 0.5rem;
        padding-left: calc(0.5rem + 0.5rem - 3px);


        svg {
            color: hsl(240, 83%, 67%);
        }

        &:hover {
            background-color: #e5e7eb;
        }

        html.dark & {
            background-color: #374151;
            color: #f9fafb;
            border-left-color: #818cf8;

            svg {
                color: hsl(234, 89%, 75%);
            }

            &:hover {
                background-color: #4b5563;
            }
        }
    }
}


main {
    max-width: 100vw;

    >div:first-of-type {
        background-color: #ffffff;
        border-color: #e5e7eb;

        html.dark & {
            background-color: #1f2937;
            border-color: #374151;
        }
    }
}

div#main-content {
    height: -webkit-fill-available;
    height: -moz-available;
    height: fill-available;
}

.grid {

    >div {
        background-color: #ffffff;
        border-color: #e5e7eb;

        html.dark & {
            background-color: #1f2937;
            border-color: #374151;
        }
    }
}

.theme-toggle-container {
    display: flex;
    align-items: center;
    margin-right: 1rem;

    body:not(:has(#login-form, #signup-form)) & {
        z-index: 0;
    }

    body:has(#login-form, #signup-form) & {
        margin-right: 0;
    }
}

.toggle {
    position: relative;
    width: 73px;
    height: 33px;
    border-radius: 100vh;
    cursor: pointer;
    transition: background var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease,
        transform 0.1s ease;
    background: var(--gradient-light);
    box-shadow: var(--shadow-light-inner-light), var(--shadow-dark-inner-light);
    display: flex;
    align-items: center;
    padding: 0 4px;
    overflow: hidden;
    outline: 1px solid #8080806e;

    html.dark & {
        background: var(--gradient-dark);
        box-shadow: var(--shadow-light-inner-dark), var(--shadow-dark-inner-dark);
    }

    &:active {
        transform: scale(0.97);
    }

    input {
        display: none;

        &:checked+.slider .slider-icon {
            transform: translateX(calc(100% + 13px));
        }

        &:checked:active+.slider .slider-icon {
            transform: scale(0.95) translateX(calc(100%));
        }

        &:not(:checked):active+.slider .slider-icon {
            transform: scale(0.95) translateX(0px);
        }
    }
}

.slider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0 8px;
    position: relative;
    z-index: 1;
}

.slider-icon {
    position: absolute;
    height: 25px;
    width: 25px;
    background: hsl(from var(--moon-color) h s 95%);
    border-radius: 50%;
    transition: transform var(--transition-speed) var(--transition-bounce),
        background var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    left: 1px;
    top: 4px;
    pointer-events: none;
    outline: 1px solid #80808040;
    box-shadow: var(--shadow-light-outer-light), var(--shadow-dark-outer-light);

    html.dark & {
        background: var(--toggle-bg-dark);
        box-shadow: var(--shadow-light-outer-dark), var(--shadow-dark-outer-dark);
    }
}

.sun-icon,
.moon-icon {
    width: 18px;
    height: 18px;
    transition: color var(--transition-speed) ease, opacity var(--transition-speed) ease, filter var(--transition-speed) ease;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.1));
    overflow: visible;
}

.sun-icon {
    opacity: 1;
    filter: drop-shadow(0 0 2px var(--sun-color));
    color: var(--sun-color);

    circle {
        fill: var(--sun-color);
        transition: fill var(--transition-speed) ease;
    }

    line {
        stroke: var(--sun-color);
        transition: stroke var(--transition-speed) ease;
    }

    html.dark & {
        filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.1));
        color: var(--sun-color);

        circle {
            fill: var(--sun-color);
        }

        line {
            stroke: var(--sun-color);
        }
    }
}

.moon-icon {
    color: var(--moon-color);

    path {
        fill: var(--moon-color);
        transition: fill var(--transition-speed) ease;
    }

    html.dark & {
        opacity: 1;
        filter: drop-shadow(0 0 3px var(--moon-color));
        color: var(--moon-color);

        path {
            fill: var(--moon-color);
        }
    }
}

#sidebar {
    width: 15rem !important;
    z-index: 1;

    /* transition: all 0.5s ease-in-out allow-discrete; */

    &:not(.collapsed) {
        .menu-item a {
            border-radius: 0.375rem;
            align-items: center;
        }

        .menu-text {
            opacity: 1;
            display: block;
            transition: all 0.5s ease-in allow-discrete;

            @starting-style {
                opacity: 0;
            }
        }
    }

    #desktopMenuToggle {
        outline: 1px solid;
    }

    &:is(.collapsed) {

        &::after {
            content: '';
            position: absolute;
            min-height: 100%;
            width: 1px;
            position-area: left;
            left: 100%;
            background: hsl(217, 21%, 27%);
        }

        width: 4rem !important;

        #logo {
            display: none;
        }

        #desktopMenuToggle {
            margin-left: -0.4ch;
        }

        .menu-text {
            display: none;
            opacity: 0;
            /* transition: all 0.5s ease-out allow-discrete; */
        }

        .menu-item {
            position: relative;
            width: fit-content;

            a {
                width: 3rem;

                &:hover {
                    border-radius: 0.5rem 0 0 0.5rem;
                }
            }

            &:hover .menu-hover-area {
                display: block !important;
            }
        }

        .menu-hover-area {
            position: absolute;
            left: 100%;
            top: 0;
            width: max-content;
            background: white;
            /* border-width: 2px; */
            border: 2.4px solid #1f2937;
            border-radius: 0 0.45rem 0.45rem 0;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            z-index: 9999;
            display: none;

            &:has(.submenu-hover) {
                /* border-width: 0px; */

                span {
                    border-top-right-radius: 4px;
                    background-color: #1f2937;
                    z-index: 9999;
                }

                .submenu-hover {
                    border-bottom-right-radius: 4px;
                }

            }

            span {
                /* border-radius: 0 2px 2px 0; */
                background-color: #1f2937;
            }

            .submenu-hover {
                position: static;
                display: block;
                padding-left: 1rem;

                a {
                    width: fit-content;
                }
            }
        }

        .submenu-click {
            display: none;
        }
    }
}


@scope (html:not(.dark)) {
    #sidebar:is(.collapsed) {

        &::after {
            content: '';
            position: absolute;
            min-height: 100%;
            width: 1px;
            position-area: left;
            left: 100%;
            background: #e5e7eb !important;
        }

        .menu-hover-area {
            border: 2.4px solid var(--toggle-bg-light);

            span {
                border-radius: 0 100vh 100vh 0;
                background-color: #fff !important;
            }
        }
    }

    .submenu-click.open {

        ul {
            border-left: 1px solid oklch(37.3% 0.034 259.733) !important;

            &::before {
                background-color: white !important;
            }
        }

        li::before {
            background-color: oklch(37.3% 0.034 259.733) !important;
        }
    }

    #stars {
        display: none;
    }
}


@keyframes twinkle {

    0%,
    100% {
        opacity: 0.2;
    }

    50% {
        opacity: 1;
    }
}

#light-pattern {
    background-image: radial-gradient(circle, rgba(156, 163, 175, 0.15) 0.3ch, transparent 0.3ch);
    background-size: 15px 15px;
    animation: subtle-scroll 60s linear infinite;

    html.dark & {
        display: none;
    }
}

@keyframes subtle-scroll {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 200px 200px;
    }
}

.submenu-hover {
    display: none;
}

.submenu-click {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out allow-discrete;
    background: transparent;
    padding-left: 2rem;

    &.open {
        max-height: fit-content;
        transition: max-height 0.5s ease-in allow-discrete;

        ul {
            border-left: 1px solid oklch(87.2% 0.01 258.338);
            border-radius: 0;
            margin-left: -1rem;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                bottom: -1%;
                left: -2px;
                width: 2.5px;
                height: calc(17px + 1%);
                background-color: #1e2939;
            }

            li {
                position: relative;
                height: auto;
            }

            li::before {
                content: '';
                position: absolute;
                top: 18px;
                left: 0;
                width: 1.25rem;
                height: 1px;
                background-color: oklch(87.2% 0.01 258.338);
            }
        }

    }
}

.submenu-arrow {
    transition: transform 0.3s ease allow-discrete;

    &.rotate {
        transform: rotate(180deg);
    }
}

.menu-item::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    background: transparent;
}

div#profileDropdown {
    margin-left: -1rem !important;
}

@media (width<768px) {
    #sidebar {
        min-height: -webkit-fill-available;
        min-height: -moz-available;
        min-height: fill-available;

        +* {
            position: absolute;
            min-width: 100%;

            #mobileMenuToggle {
                position: relative;
                z-index: 99999;
                margin-right: 1rem;
            }
        }

        &[style*="width: 15rem;"] {
            z-index: 9999;
            /* position: fixed; */
            width: 15rem !important;
            display: block;
            opacity: 1;
            transition: all 0.5s ease-in allow-discrete;

            +* {
                #mobileMenuToggle {
                    transform: translateX(11rem);
                    outline: 1px solid;
                }
            }
        }

        &[style*="width: 0px;"] {
            width: 0px !important;
            display: none;
            opacity: 0;
            transition: all 0.5s ease-out allow-discrete;

            +* {
                #mobileMenuToggle {
                    transform: translateX(0rem);
                    outline: 1px solid;
                }
            }
        }
    }

    #sidebar .mobile-toggle-icon {
        transition: transform 3.3s ease allow-discrete;

        .mobile-toggle-active & {
            transform: rotate(180deg);
        }
    }

    .menu-hover-area {
        display: none;
    }


}

@media (width>=768px) {
    #sidebar:not(.collapsed) {
        .menu-hover-area {
            display: none;
        }
    }
}

#login-form,
#signup-form {
    button {
        text-box: trim-both cap alphabetic;

        &:not(:has(i)) {
            padding-block: 1rem;
        }

        i {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}

[id*="modal"] {
    &.flex {
        &::before {
            content: '';
            position: fixed;
            background-color: hsl(220.91deg 39.29% 10.98% / 66%);
            inset: -100% 0 -100% auto;
            min-height: 999vh;
            min-width: 999vw;
        }
    }
}

body {
    &:has(div[id*="modal"][aria-modal="true"].flex) {
        #sidebar {
            z-index: -1;
        }
    }
}