@import url(base.css);

*{
    transition: all ease-in-out .1s;
}

.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    width: 100%;
}

.container > div{
    width: 100%;
}

.tabs{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    border-bottom: .5px solid var(--text-color);
}

.tabs input{
    display: none !important;
}

.tabs label{
    cursor: pointer;
    padding-bottom: 0.625rem;
    width: 100%;
    text-align: center;
}
.tabs input:checked + label{
    color: var(--title-color);
    border-bottom: 2px solid var(--title-color);
}

[class^="content-"]{
    display: none;
}

.container:has(:checked:nth-of-type(1)) .content-1, 
.container:has(:checked:nth-of-type(2)) .content-2{
    display: grid;
}

/* profile section design */

.container .content .profile{
    grid-template-areas:  "pfp displayName displayName"
                          "pfp displayName displayName"
                          "pfp points points"
                          "department department department"
                          "position position position"
                          "roles roles roles"
                          "putBtn putBtn putBtn";
    gap: 0.625rem;
    width: 100%;
    max-width: 450px;
}

.container .content .profile > div{
    display: flex;
    align-items: center;
    justify-content: left;
}

.container .content .profile #pfp{
    grid-area: pfp;
    width: 0;
}

.container .content .profile #pfp label{
    min-width: 95px;
    height: 95px;
    background-color: var(--title-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .content .profile #pfp img{
    width: 100px;
    border-radius: 50%;
}

.container .content .profile #displayName{
    grid-area: displayName;
}

.container .content .profile #department{
    grid-area: department;
}

.container .content .profile #position{
    grid-area: position;
}

.container .content .profile #points{
    grid-area: points;
}

.container .content .profile #roles{
    grid-area: roles;
}

.container .content .profile #putPfbtn{
    grid-area: putBtn;
}

.container .content .profile #updatePfBtn{
    visibility: hidden;
}

/* account section design */

.container .content .account{
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.container .content .account div{
    width: 100%;
}

.container .content .account > div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.625rem;
}

.container .content .account > div > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.625rem;
}

.container .content .account > *, .container .content .account b{
    display: flex !important;
    align-items: center !important;
    justify-content: left;
}


/* sudo section design */

/* roles tab design */

.container .content .members{
    
}

.container .content #addMember details{
    border-radius: 10px;
    background-color: var(--el-bg-color);
}

.container .content #addMember details > summary{
    cursor: pointer;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    padding: 5px 7px;
    border-radius: 50px;
}

.container .content #addMember details > summary span{
    display: flex;
    align-items: center;
}

.container .content #addMember details div{
    padding: 10px;
}

.container .content #addMember details div form{
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.container .content #addMember details div form .f-r{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.container .content #addMember details div form button{
    min-width: 100% !important;
}

@media screen and (min-width: 50px) and (max-width: 767px){
    /*Mobile Device Screens*/

    .container .content .account > div{
        flex-direction: column;
    }    

    .container .content .account button{
        max-width: 100% !important;
    }

}