/* Add FontAwesome icons to settings menu tabs */

/* Chat Settings tab */
.tk-area-settings ul li[data-id="chat"]:before {
    content: "\f086" !important; /* comment icon */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    margin-right: 8px !important;
    color: #667eea !important;
    font-size: 14px !important;
    display: inline-block !important;
}

/* Messages tab */
.tk-area-settings ul li[data-id="messages"]:before {
    content: "\f0e0" !important; /* envelope icon */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    margin-right: 8px !important;
    color: #764ba2 !important;
    font-size: 14px !important;
    display: inline-block !important;
}

/* Admin tab */
.tk-area-settings ul li[data-id="admin"]:before {
    content: "\f013" !important; /* cog/gear icon */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    margin-right: 8px !important;
    color: #f093fb !important;
    font-size: 14px !important;
    display: inline-block !important;
}

/* Notifications tab */
.tk-area-settings ul li[data-id="notifications"]:before {
    content: "\f0f3" !important; /* bell icon */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    margin-right: 8px !important;
    color: #ffa502 !important;
    font-size: 14px !important;
    display: inline-block !important;
}

/* Users tab */
.tk-area-settings ul li[data-id="users"]:before {
    content: "\f0c0" !important; /* users icon */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    margin-right: 8px !important;
    color: #05c46b !important;
    font-size: 14px !important;
    display: inline-block !important;
}

/* Design tab */
.tk-area-settings ul li[data-id="design"]:before {
    content: "\f53f" !important; /* palette icon */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    margin-right: 8px !important;
    color: #ff6348 !important;
    font-size: 14px !important;
    display: inline-block !important;
}

/* Miscellaneous tab */
.tk-area-settings ul li[data-id="miscellaneous"]:before {
    content: "\f085" !important; /* cogs icon */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    margin-right: 8px !important;
    color: #00d2d3 !important;
    font-size: 14px !important;
    display: inline-block !important;
}

/* Style the menu tabs */
.tk-area-settings ul li {
    display: flex !important;
    align-items: center !important;
    padding: 12px 20px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border-radius: 8px !important;
    margin-bottom: 5px !important;
    font-weight: 500 !important;
}

/* Hover effect */
.tk-area-settings ul li:hover {
    background: rgba(102, 126, 234, 0.1) !important;
    transform: translateX(5px) !important;
}

/* Active tab */
.tk-area-settings ul li.tk-active {
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2)) !important;
    border-left: 3px solid #667eea !important;
    font-weight: 600 !important;
}

/* Active tab icon color */
.tk-area-settings ul li.tk-active:before {
    color: #667eea !important;
}

/* Make the navigation area look better */
.tk-area-settings > ul {
    background: white !important;
    border-radius: 10px !important;
    padding: 15px 10px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    margin-right: 20px !important;
}

/* Ensure icons show for all possible tab variations */
.tk-area-settings ul li[data-id]:before {
    display: inline-block !important;
    width: 20px !important;
    text-align: center !important;
}