:root {
    --color-svg-color: #44546f;
    --color-background-blue: #0c66e4;
    --color-font-gray: #717d92;
    --color-border: #DDE0E5;
    --color-button-bg: #F0F1F4;
    --color-task-card-bg: #F7F8F9;
    --padding-medium: 1rem;
    --padding-small: 0.5rem;
    --padding-high: 1.5rem;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    color: var(--color-font-gray);
}

body {
    height: 100vh;
    width: 100vw;
}

#top-header {
    height: 4rem;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-medium);
    border-bottom: 1px solid var(--color-font-gray);

    #top-header-left {
        display: flex;
        align-items: center;

        #top-header-left-hamburger > svg {
            width: 2rem;
            height: 2rem;
            color: var(--color-svg-color);
        }

        #top-header-left-logo {
            margin: auto 1.5rem;
            img {
                height: 1.75rem;
            }
        }

        #top-header-nav {
            #top-header-nav-list {
                display: flex;
                align-items: center;
                list-style: none;

                .top-header-nav-list-item {
                    height: 100%;
                    padding: 1.1rem 0.5rem;
                    display: flex;
                    align-items: center;

                    .top-header-nav-link {
                        text-decoration: none;
                        color: var(--color-font-gray);

                        svg {
                            color: var(--color-svg-color);
                            margin: 1rem, 0.25rem;
                            height: 1rem;
                            width: 1rem;
                        }
                    }
                }

                .top-header-nav-list-item:hover {
                    border-bottom: 5px solid var(--color-background-blue);
                }
            }
        }

        #top-header-left-create-button {
            background-color: var(--color-background-blue);
            color: white;
            padding: 0.5rem 0.75rem;
            border: none;
            border-radius: 0.2rem;
            margin: 1rem;
        }
    }

    #top-header-right {
        display: flex;

        #global-search {
            height: 2rem;
            width: 20rem;
            max-width: 20rem;
            display: flex;
            align-items: center;
            border: 1px solid var(--color-font-gray);
            border-radius: 0.5rem;

            svg {
                color: var(--color-svg-color);
                height: 1rem;
                width: 1rem;
                margin: 0 var(--padding-small);
            }

            input {
                border: none;
                flex-grow: 1;
                padding-right: var(--padding-small);
            }

            input:focus {
                outline: none;
            }
        }

        #hamburger-responsive {
            display: none;
        }

        #top-header-menus {

            #top-header-menus-list {
                display: flex;
                list-style: none;
                align-items: center;

                .top-header-menus-item {
                    margin: 0 var(--padding-small);

                    svg {
                        color: var(--color-svg-color);
                        height: 1.5rem;
                        width: 1.5rem;
                    }
                }
            }
        }
    }
}

#main-wrapper {
    display: flex;
    height: calc(100vh - 4rem);
    

    #nav-section {
        max-height: 100%;
        width: 22rem;
        overflow-y: auto;
        border-right: 1px solid var(--color-font-gray);

        section {

            h5 {
                margin: var(--padding-small);
                padding: var(--padding-small) var(--padding-medium);
            }

            nav {
                border-radius: 0.4rem;
                margin: var(--padding-small);
                padding: var(--padding-medium);

                .aside-nav-list > .aside-nav-list-item {
                    padding: 0.5rem 0;
                }
            }
        }

        .aside-nav-list {
            list-style: none;

            .aside-nav-list-item {
                a {
                    text-decoration: none;
                    color: var(--color-font-gray);

                    svg {
                        height: 1rem;
                        width: 1rem;
                        color: var(--color-svg-color);
                    }
                }
            }
        }

        #project {
            display: flex;
            padding: 2rem;

            svg {
                height: 2rem;
                width: 2rem;
            }
        }

        #planning {
            #planning-dropdown {
                background-color: #e9f2ff;

                h5 {
                    display: flex;
                    color: var(--color-background-blue);
                    justify-content: space-between;
                    margin: 0;
                    padding: 0;

                    svg {
                        height: 1rem;
                        width: 1rem;
                    }
                }

                p {
                    color: var(--color-background-blue);
                    font-size: 0.8rem;
                }
            }

            #nav-planning {
                background-color: #e9f2ff;
            }
        }

        #options > nav {
            border-radius: 0%;
            border-top: 1px solid var(--color-svg-color);
            border-bottom: 1px solid var(--color-svg-color);
        }
        #details-prompt {
            margin: var(--padding-small);
            padding: var(--padding-small) var(--padding-medium);
        }
    }

    main {
        max-height: 100%;
        width: 100%;
        padding: var(--padding-medium) 2rem var(--padding-medium) 2rem;
        display: flex;
        flex-direction: column;

        #main-top-section{
            height: 9rem;
            #main-top-section-heading{

                h5{
                    font-weight: normal;
                }

                h3{
                    color: black;
                }
            }

            #main-top-section-menus{
                margin-bottom: 1rem;

                #main-top-section-menus-list{
                    list-style: none;
                    display: flex;
                    justify-content: end;
                    gap: 1rem;

                    .main-top-section-menus-list-item{

                        a{
                            text-decoration: none;
                            svg{
                                height: 1rem;
                                width: 1rem;
                                color: var(--color-svg-color);
                            }
                        }
                    }
                }
            }

            #main-top-section-filter{
                margin-bottom: 1rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
                #main-top-section-filter-left{

                    display: flex;
                    gap: 1rem;

                    #task-search{
                        height: 2.5rem;
                        width: 10rem;
                        max-width: 15rem;
                        display: flex;
                        align-items: center;
                        border: 2px solid var(--color-border);
                        border-radius: 0.25rem;

                        input{
                            max-width: 8rem;
                            flex-grow: 1;
                            border: none;
                        }

                        input:focus {
                            outline: none;
                        }

                        svg {
                            color: var(--color-svg-color);
                            height: 1rem;
                            width: 1rem;
                        }
                    }

                    #users-pfp{
                        display: flex;
                        align-items: center;
                        transform: rotate(180deg);

                        img{
                            transform: rotate(180deg);
                            margin: -2.5px;
                            height: 2rem;
                            width: 2rem;
                            outline: 2px solid white;
                            border-radius: 50%;
                        }
                    }

                    #select-epic-type{
                        display: flex;
                        align-items: center;
                        gap: 1rem;
                        
                        svg{
                            height: 1rem;
                            width: 1rem;
                        }
                    }
                }
                
                #main-top-section-filter-right{
                    display: flex;
                    align-items: center;
                    gap: 1rem;

                    button{
                        display: flex;
                        align-items: center;
                        padding:0.5rem 1rem;
                        background-color: var(--color-button-bg);
                        border: none;
                        border-radius: 0.2rem;
                        svg{
                            margin: 0rem 0.5rem 0rem 0rem;
                            height: 1rem;
                            width: 1rem;
                        }
                    }
                }
                
            }
        }

        #main-tasks{
            display: flex;
            justify-content: space-between;
            flex:1;
            overflow: hidden;

            div>ul{
                list-style: none;
            }

            .task-list-wrapper{
                max-height: 100%;
                width: 20rem;
                background-color: var(--color-task-card-bg);
                border-radius: 0.5rem;
                padding: var(--padding-small);
                overflow: hidden;
                display: flex;
                flex-direction: column;
                

                h5{
                    margin:1rem;
                }

                .task-list{
                    flex:1;
                    overflow-y: auto;
                    
                    .task{
                        background-color: white;
                        border-radius: 0.5rem;
                        padding: var(--padding-small) var(--padding-medium);
                        margin-bottom: 0.25rem;

                        .task-link{

                            .task-card{

                                h4{
                                    font-weight: normal;
                                    color: black;
                                }
                                .task-tags{
                                    display: flex;
                                    justify-content: space-between;

                                    .task-ticket{
                                        display: flex;
                                        gap: 0.5rem;
                                    }

                                    .task-tags-list{
                                        display: flex;
                                        gap: 0.5rem;
                                    }
                                }
                            }
                        }
                    }

                    svg{
                        height: 1rem;
                        width: 1rem;
                    }
                }
            }
        }
    }
}

@media (max-width: 1260px) {
    #top-header {
        #top-header-right {
            #global-search {
                display: none;
            }

            #top-header-menus {
                display: none;
            }

            #hamburger-responsive {
                align-self: center;
                display: inline-block;

                svg {
                    width: 1.5rem;
                    height: 1.5rem;
                }
            }
        }
    }
}

@media (max-width: 800px) {
    #top-header {
        #top-header-left {
            #top-header-nav {
                display: none;
            }
        }
    }
}