/* ==========================================
   ACCOUNT DROPDOWN
========================================== */

.ts-account-dropdown{

    position:absolute;

    top:calc(100% + 10px);

    right:0;

    left:auto;

    background:#fff;

    border:1px solid #edf1f7;

    border-radius:16px;

    box-shadow:0 18px 45px rgba(0,0,0,.12);

    display:none;

    overflow:hidden;

    z-index:999999;

}

.ts-account-popup{
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.45);
    z-index: 999999;
}

.ts-account-popup.show{
    display: flex;
}

.ts-account-dropdown.show{

    display:block;

    animation:tsDropdown .18s ease;

}

@keyframes tsDropdown{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================
   HEADER
========================================== */

.ts-account-header{

    display:flex;

    align-items:center;

    gap:12px;

    padding:18px;

    border-bottom:1px solid #edf1f7;

}

.ts-account-avatar{

    width:46px;

    height:46px;

    border-radius:50%;

    background:#2155ff;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    font-weight:700;

}

.ts-account-user{

    flex:1;

}

.ts-account-user strong{

    display:block;

    color:#111827;

    font-size:15px;

}

.ts-account-user small{

    display:block;

    margin-top:3px;

    color:#6b7280;

    font-size:12px;

    word-break:break-all;

}

/* ==========================================
   SECTION
========================================== */

.ts-account-section{

    padding:16px 18px;

    border-bottom:1px solid #edf1f7;

}

.ts-account-section label{

    display:block;

    margin-bottom:8px;

    color:#6b7280;

    font-size:12px;

}

.ts-active-role{

    width:100%;

    height:42px;

    border:1px solid #dbe3ef;

    border-radius:10px;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 14px;

    cursor:pointer;

}

.ts-active-role.fixed{

    justify-content:center;

    cursor:default;

}

/* ==========================================
   ROLE LIST
========================================== */

.ts-role-list{

    display:none;

    margin-top:8px;

    border:1px solid #edf1f7;

    border-radius:10px;

    overflow:hidden;

}

.ts-role-list.show{

    display:block;

}

.ts-role-item{

    width:100%;

    border:none;

    background:#fff;

    padding:11px 14px;

    text-align:right;

    cursor:pointer;

    transition:.2s;

}

.ts-role-item:hover{

    background:#f7f9fc;

}

.ts-role-item.active{

    background:#eef4ff;

    color:#2155ff;

    font-weight:600;

}
.ts-logout-link{
    color:#dc2626;
}

.ts-logout-link span{
    color:#dc2626;
}

.ts-logout-link i{
    color:#dc2626;
}
.ts-account-menu .ts-logout-link i{
    color:#dc2626;
}

/* ==========================================
   MENU
========================================== */

.ts-account-menu{

    padding:8px 0;

}

.ts-account-menu a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:13px 18px;

    color:#111827;

    text-decoration:none;

    transition:.2s;

}

.ts-account-menu a:hover{

    background:#f7f9fc;

}

.ts-account-menu i{

    width:18px;

    color:#2155ff;

    text-align:center;

}

/* ==========================================
   DESKTOP
========================================== */

.ts-header-actions{

    position:relative;

}

/* ==========================================
   MOBILE
========================================== */

@media(max-width:768px){

    .ts-account-dropdown{

        position:fixed;

        left:0;

        right:0;

        bottom:0;

        top:auto;

        width:100%;

        max-width:none;

        border-radius:22px 22px 0 0;

        animation:tsSheet .22s ease;

    }

}

@keyframes tsSheet{

    from{

        transform:translateY(100%);

    }

    to{

        transform:translateY(0);

    }

}