html {
    font-size: 16px;
}

body {
    @apply m-0 p-0 w-dvw h-dvh min-w-dvw min-h-dvh bg-gray-100 font-sans antialiased;

    /**
     * app container
     * on mobile, <main> is the viewport and <nav> is fixed to the bottom
     **/
    &#app {
        @apply grid grid-cols-1;
        grid-template-rows: 1fr 3.5rem;
    }

    /**
     * auth container
     **/
    &#auth {
        @apply flex items-center justify-center;

        header {
            @apply flex flex-row items-center justify-between px-6 fixed top-0 left-0 h-20;

            a {
                @apply inline-flex items-center gap-2;
            }
        }
    }

    /**
     * primary app navigation
     * starts fixed at the bottom on mobile, then moves to the left
     **/
    > nav {
        @apply flex flex-row items-center justify-between px-4 pb-2 order-1;

        /* app nav items */
        .top {
            @apply flex flex-row items-center;

            .home {
                @apply hidden;
            }
        }

        /* user items */
        .bottom {
            @apply flex flex-row items-center;
        }

        /* app buttons */
        menu {
            @apply flex flex-row gap-1 items-center;

            li.app-button {

                a {
                    @apply flex items-center justify-center p-3 bg-transparent text-black;
                    transition: background-color 100ms ease-in-out;
                    border-radius: 70% 50% 70% 30% / 60% 60% 60% 40%; /* blob 1 */

                    &:hover {
                        @apply bg-gray-200;
                    }

                    &.is-active {
                        @apply bg-cyan-400;

                        &:hover {
                            @apply bg-cyan-500;
                        }
                    }
                }

                &:nth-child(2) a {
                    border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%; /* blob 2 */
                }

                &:nth-child(3) a {
                    border-radius:  80% 65% 90% 50% / 90% 80% 75% 75%; /* blob 3 */
                }
            }
        }
    }
}

/*
 * primary content window defaults
 *
 * main
 *   aside (optional left bar, must include h1 page title)
 *   article (content pane; if no aside, header includes h1)
 *     header
 *     section
 */
main {
    @apply overflow-hidden rounded-lg;
    max-height: calc(100dvh - 1rem);
    container: main / inline-size;

    /* app */
    body#app & {
        @apply grid grid-cols-1 m-2 ml-0;

        /* if there's an aside, set the cols */
        &:has(aside) {
            grid-template-rows: 4rem 1fr;
        }
    }

    /* auth screens */
    body#auth & {
        @apply bg-white border-md border-primary shadow-drop w-1/2 mx-auto p-8 rounded-xl;
        min-width: 16rem;
        max-width: 40rem;
    }

    /* left column */
    aside {
        @apply flex flex-col col-span-1 pb-6 2xl:pb-8 h-16 overflow-hidden rounded-l-lg;

        > h1 {
            @apply flex items-center h-16 min-h-16 px-6 2xl:px-8;

            a.app-return {
                @apply flex flex-row gap-2 items-center;

                > svg {
                    @apply opacity-0 invisible -translate-x-1 text-white mt-1;
                    transition:
                        color 150ms ease-in,
                        opacity 150ms ease-in,
                        visibility 150ms ease-in,
                        translate 150ms ease-in;
                }

                &:hover > svg {
                    @apply opacity-100 visible translate-x-0 text-secondary;
                }
            }
        }

        > .aside-inset {
            @apply px-6 2xl:px-8;
        }

        .content {
            @apply grow;
        }

        .drawers {
            @apply grow flex flex-col gap-6 pt-1;
        }

        .pagelinks {
            @apply flex flex-col gap-2px -mx-3;
            width: calc(100% + 1.5rem);

            a {
                @apply flex flex-row gap-2 items-center justify-start px-3 h-9 rounded-md;
                /*transition: background-color 100ms ease-in-out; */

                &:hover {
                    @apply bg-cyan-200;
                }

                &.is-active {
                    @apply bg-cyan-400 font-semibold;

                    &:hover {
                        @apply bg-cyan-500;
                    }
                }

                span {
                    @apply flex items-center flex-row gap-2;
                }
            }
        }
    }

    /* main content wrapper */
    article {
        @apply bg-white grid grid-cols-1 ml-2 rounded-md z-2;
        @apply overflow-y-auto;
        grid-template-rows: 5rem auto;
        container: content / inline-size;

        /* specific animation sets */
        &#calendar {
            transition:
                margin 250ms ease-in-out,
                width 250ms ease-in-out,
                padding 250ms ease-in-out;
        }

        /* main content title and actions */
        header {
            @apply flex flex-row items-center justify-between w-full;
            @apply bg-white sticky top-0 z-20;

            /* app hedar; if h1 exists it means there's no aside, so force the width from that */
            h1 {
                @apply relative flex items-center pl-6 2xl:pl-8;
                width: minmax(16rem, 20dvw);
            }

            /* actual page header */
            h2 {
                @apply flex flex-row gap-2 items-center justify-start relative top-2px;
                animation: title-drop 350ms ease-out both;

                > span {
                    @apply text-gray-700;
                }
            }

            /* expand button */
            button.calendar-expand-toggle {
                svg {
                    transition: transform 150ms ease-in-out;
                }
            }

            /* header menu */
            menu {
                @apply fixed right-0 top-2 flex flex-col bg-gray-100 gap-6 p-6 rounded-l-xl;
                height: calc(100dvh - 0.5rem);
                width: 33dvw;
                display: none;
            }
        }

        /* sections with max width content */
        &.readable {
            grid-template-columns: repeat(4, 1fr);

            > header {
                @apply col-span-4;
            }

            > .content {
                @apply col-span-4 2xl:col-span-3;

                /* page subtitle section */
                .description {

                    strong {
                        @apply font-semibold;
                    }
                }

                /* everything below the description (i.e., the content pane) */
                .pane {
                    @apply flex flex-col items-start gap-4 my-8;
                }
            }
        }

        /* section specific */
        &#calendar {
            header {
                .calendar-expand-toggle {
                    @apply ml-1 opacity-0 pointer-events-none transition-opacity duration-150;
                }

                h2:hover .calendar-expand-toggle,
                h2:focus-within .calendar-expand-toggle {
                    @apply opacity-100 pointer-events-auto;
                }
            }
        }
        &#settings {
            /* */
        }

        /* main content */
        section {

            /* content footer defaults */
            footer {
                transition: padding 250ms ease-in-out;
            }

        }
    }

    /* expanded */
    &.expanded {

        button.calendar-expand-toggle {
            svg {
                transform: rotate(180deg);
            }
        }
    }
}

/* app logo */
.logo {
    @apply w-10 h-10 flex;

    .overlay {
        fill: var(--color-cyan-500);
    }
}

/* animations */
@keyframes title-drop {
    from {
        opacity: 0;
        transform: translateX(-0.5rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/**
 * desktop handling
 */

/* menu handling */
@container content (width >= 64rem)
{
    main {
        article {
            header {
                menu {
                    @apply relative top-auto right-auto h-auto w-auto rounded-none bg-transparent;
                    @apply flex flex-row items-center justify-end gap-4 p-0;
                }
            }
        }
    }
}

/* default desktop handling */
@media (width >= theme(--breakpoint-md))
{
    body#app {
        grid-template-columns: 5rem auto;
        grid-template-rows: 1fr 0;

        /* show app nav on the left at md */
        > nav {
            @apply relative w-20 flex-col items-center justify-between px-0 pb-0 order-0;

            .top {
                @apply flex-col pt-6 2xl:pt-8 mt-2px;

                .home {
                    @apply flex;
                }
            }

            .bottom {
                @apply flex-col pb-6;
            }

            menu {
                @apply flex-col mt-6;

                li.app-button {
                    svg {
                        @apply w-7 h-7;
                    }
                }
            }
        }

        /* main content with and without asides */
        main {

            &:has(aside) {
                grid-template-columns: max(16rem, 20dvw) auto;
                grid-template-rows: 1fr;
            }

            aside {
                @apply bg-white overflow-y-auto h-full min-w-48;
                transition:
                    translate 250ms ease-in-out,
                    visibility 250ms ease-in-out,
                    opacity 250ms ease-in-out,
                    scale 250ms ease-in-out;

                > h1 {
                    @apply backdrop-blur-xs sticky top-0 z-1 shrink-0 h-20 min-h-20;
                    background-color: rgba(255, 255, 255, 0.9);
                }
            }

            article {
                @apply w-full ml-0 pl-3 2xl:pl-4 pr-6 2xl:pr-8 rounded-l-none rounded-r-lg;

                &#calendar {
                    @apply pl-0;
                }
            }

            /* when the calendar is expanded and aside is gone */
            &.expanded {

                aside {
                    @apply translate-x-8 invisible opacity-0 scale-y-95;
                }

                article {
                    @apply pl-6 pr-6;
                    margin-left: min(-16rem, -20dvw) !important;
                    width: 100cqw !important;

                    &#calendar {
                        @apply pl-6;
                    }
                }

                footer {
                    @apply pb-3;
                }
            }
        }
    }
}

/* increase size of some things at 2xl */
@media (width >= theme(--breakpoint-2xl)) { /* 96rem */
    body#app main {
        aside {
            h1 {
                @apply h-22;
            }
        }
    }
    main {
        aside {
            > h1 {
                @apply h-22;
            }
        }
        article {
            grid-template-rows: 5.5rem auto;
        }
    }
}
