/* TeamSpeak Viewer CSS */
:root {
    --ts-bg-color: #1a1d23;
    --ts-text-color: #e6e6e6;
    --ts-hover-color: #2a2e36;
    --ts-border-color: #14161a;
    --ts-header-color: #4f81bd;
    --ts-channel-color: #b9bbbe;
    --ts-offline-color: #f04747;
    --ts-online-color: #43b581;
}

body {
    font-family: 'Inter', 'Segoe UI', 'Arial', sans-serif;
    background-color: var(--ts-bg-color);
    color: var(--ts-text-color);
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

header {
    background-color: var(--ts-border-color);
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
}

header h1 {
    color: var(--ts-header-color);
    margin: 0;
    text-align: center;
}

.ts-tree {
    background-color: var(--ts-hover-color);
    border: 1px solid var(--ts-border-color);
    border-radius: 5px;
    padding: 10px;
}

.ts-server {
    font-weight: bold;
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 1.1em;
    display: flex;
    align-items: center;
}

.ts-server.online {
    color: var(--ts-online-color);
}

.ts-server.offline {
    color: var(--ts-offline-color);
}

.ts-server-info {
    font-size: 0.9em;
    margin-left: 24px;
    margin-bottom: 10px;
    color: var(--ts-channel-color);
}

/* Channel & Client Styles */
.ts-tree ul {
    list-style-type: none;
    padding-left: 20px;
    position: relative;
    margin: 0 0 0 5px;
}

.ts-tree li {
    position: relative;
    margin: 5px 0;
}

.ts-channel {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 3px;
    cursor: default;
}

.ts-channel:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.ts-client {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 3px;
    cursor: default;
}

.ts-client:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.ts-client-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.ts-client-name {
    flex-grow: 1;
}

.ts-client.away .ts-client-name {
    font-style: italic;
    opacity: 0.7;
}

.ts-updated {
    margin-top: 20px;
    text-align: right;
    font-size: 0.8em;
    color: var(--ts-channel-color);
    font-style: italic;
}

footer {
    margin-top: 20px;
    padding: 10px 0;
    text-align: center;
    font-size: 0.8em;
    color: var(--ts-channel-color);
    border-top: 1px solid var(--ts-border-color);
}

/* TeamSpeak 5 Style Icons */
.icon-server {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjNDNiNTgxIiBkPSJNOSA1YTEgMSAwIDAgMC0xIDF2MTJhMSAxIDAgMCAwIDEgMWg2YTEgMSAwIDAgMCAxLTFWNmExIDEgMCAwIDAtMS0xSDl6TTE2IDRINmEyIDIgMCAwIDAtMiAydjEyYTIgMiAwIDAgMCAyIDJoMTBhMiAyIDAgMCAwIDItMlY2YTIgMiAwIDAgMC0yLTJ6Ii8+PHBhdGggZmlsbD0iIzQzYjU4MSIgZD0iTTEwIDJoNHYyMGgtNFYyek02IDhoMTJ2MUg2Vjh6TTYgMTBoMTJ2MUg2di0xek02IDEyaDEydjFINnYtMXpNNiAxNGgxMnYxSDZ2LTF6Ii8+PC9zdmc+');
}

.icon-server-offline {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjZjA0NzQ3IiBkPSJNOSA1YTEgMSAwIDAgMC0xIDF2MTJhMSAxIDAgMCAwIDEgMWg2YTEgMSAwIDAgMCAxLTFWNmExIDEgMCAwIDAtMS0xSDl6TTE2IDRINmEyIDIgMCAwIDAtMiAydjEyYTIgMiAwIDAgMCAyIDJoMTBhMiAyIDAgMCAwIDItMlY2YTIgMiAwIDAgMC0yLTJ6Ii8+PHBhdGggZmlsbD0iI2YwNDc0NyIgZD0iTTEwIDJoNHYyMGgtNFYyek02IDhoMTJ2MUg2Vjh6TTYgMTBoMTJ2MUg2di0xek02IDEyaDEydjFINnYtMXpNNiAxNGgxMnYxSDZ2LTF6Ii8+PHBhdGggZmlsbD0iI2YwNDc0NyIgc3Ryb2tlPSIjZjA0NzQ3IiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik0zIDNsMTggMThNMjEgM0wzIDIxIi8+PC9zdmc+');
}

.icon-channel {
    background-image: url('data:image/svg+xml;base64,PHN2ZyBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjIiIHZpZXdCb3g9IjAgMCAyMiAyMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMC0waDIydjIyaC0yMnoiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJtMTAgLjU3N2MuNjE5LS4zNTcgMS4zODEtLjM1NyAyIDAgMS44MyAxLjA1NyA1LjY5NyAzLjI4OSA3LjUyNiA0LjM0Ni42MTkuMzU3IDEgMS4wMTcgMSAxLjczMnY4LjY5YzAgLjcxNS0uMzgxIDEuMzc1LTEgMS43MzItMS44MjkgMS4wNTctNS42OTYgMy4yODktNy41MjYgNC4zNDYtLjYxOS4zNTctMS4zODEuMzU3LTIgMC0xLjgzLTEuMDU3LTUuNjk3LTMuMjg5LTcuNTI2LTQuMzQ2LS42MTktLjM1Ny0xLTEuMDE3LTEtMS43MzIgMC0yLjExMyAwLTYuNTc3IDAtOC42OSAwLS43MTUuMzgxLTEuMzc1IDEtMS43MzIgMS44MjktMS4wNTcgNS42OTYtMy4yODkgNy41MjYtNC4zNDZ6IiBmaWxsPSIjZTNlZGY4Ii8+PHBhdGggZD0ibTEwLjUgMjAuNTU1Yy4zMDkuMTc5LjY5MS4xNzkgMSAwIDEuNTEtLjg3MiA2LjAxNS0zLjQ3MiA3LjUyNS00LjM0NC4zMDktLjE3OS41LS41MDkuNS0uODY2di04LjY5YzAtLjM1Ny0uMTkxLS42ODctLjUtLjg2Ni0xLjUxLS44NzItNi4wMTUtMy40NzItNy41MjUtNC4zNDQtLjMwOS0uMTc5LS42OTEtLjE3OS0xIDAtMS41MS44NzItNi4wMTUgMy40NzItNy41MjUgNC4zNDQtLjMwOS4xNzktLjUuNTA5LS41Ljg2NnY4LjY5YzAgLjM1Ny4xOTEuNjg3LjUuODY2IDEuNTEuODcyIDYuMDE1IDMuNDcyIDcuNTI1IDQuMzQ0eiIgZmlsbD0iI2ExYjdjYyIvPjxwYXRoIGQ9Im0yLjYwOSAxNS44NDVjLjA4Ni4xNDkuMjExLjI3Ni4zNjYuMzY2bDcuNTI1IDQuMzQ0Yy4zMDkuMTc5LjY5MS4xNzkgMSAwbDcuNTI1LTQuMzQ0Yy4xNTUtLjA5LjI4LS4yMTcuMzY2LS4zNjZsLTcuODkxLTQuNTU2Yy0uMzA5LS4xNzktLjY5MS0uMTc5LTEgMHoiIGZpbGw9IiNlM2VkZjgiLz48cGF0aCBkPSJtMTguMjg0IDE2LjYzOGMuMDc3LS4wNDQuMTI1LS4xMjcuMTI1LS4yMTYgMC0uMzA4IDAtMSAwLTFoLTE0LjgxOHYxYzAgLjA4OS4wNDguMTcyLjEyNS4yMTYuOTM0LjU0IDYuNzg0IDMuOTE3IDYuNzg0IDMuOTE3LjMwOS4xNzkuNjkxLjE3OSAxIDAgMCAwIDUuODUtMy4zNzcgNi43ODQtMy45MTd6IiBmaWxsPSIjYTFiN2NjIi8+PHBhdGggZD0ibTE4LjI4NCAxNi42MzhjLjA3Ny0uMDQ0LjEyNS0uMTI3LjEyNS0uMjE2IDAtLjMwOCAwLTEgMC0xaC03LjQwOXY1LjI2N2MuMTczIDAgLjM0NS0uMDQ1LjUtLjEzNCAwIDAgNS44NS0zLjM3NyA2Ljc4NC0zLjkxN3oiIGZpbGw9IiNjZGRkZjIiLz48cGF0aCBkPSJtMy43MTYgMTUuMjA1Yy0uMDc3LjA0NS0uMTI1LjEyOC0uMTI1LjIxN3MuMDQ4LjE3Mi4xMjUuMjE2YzEuMzQ2Ljc3OCA1LjkxMyAzLjQxNCA3LjAzNCA0LjA2MS4xNTUuMDkuMzQ1LjA5LjUgMCAxLjEyMS0uNjQ3IDUuNjg4LTMuMjgzIDcuMDM0LTQuMDYxLjA3Ny0uMDQ0LjEyNS0uMTI3LjEyNS0uMjE2cy0uMDQ4LS4xNzItLjEyNS0uMjE3Yy0xLjM0Ni0uNzc3LTUuOTEzLTMuNDEzLTcuMDM0LTQuMDYxLS4xNTUtLjA4OS0uMzQ1LS4wODktLjUgMC0xLjEyMS42NDgtNS42ODggMy4yODQtNy4wMzQgNC4wNjF6IiBmaWxsPSIjZTNlZGY4Ii8+PHBhdGggZD0ibTExIDEuMzExYy0uMTczIDAtLjM0NS4wNDUtLjUuMTM0bC03LjUyNSA0LjM0NGMtLjMwOS4xNzktLjUuNTA5LS41Ljg2NnY4LjY5YzAgLjE3OC4wNDguMzUuMTM0LjVsNy44OTEtNC41NTZjLjMwOS0uMTc5LjUtLjUwOS41LS44NjZ6IiBmaWxsPSIjY2RkZGYyIi8+PC9zdmc+');
}

.icon-channel-custom {
    /* Placeholder for custom channel icon - will be overridden in HTML */
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjZmZmZjAwIiBkPSJNMTcgOC41QTYuNSA2LjUgMCAwIDEgMTAuNSAxNUg4LjVBOC41IDguNSAwIDAgMCAxNyA2LjV2MnpNMTEuNSA0YTkuOTQyIDkuOTQyIDAgMCAwLTcuNDI0IDMuMzlBOS45NDEgOS45NDEgMCAwIDAgLjY3NiAxNC44MTRjLS4wNDEuMjk1LS4wNjguNTk2LS4wNzYuODk4YTEgMSAwIDAgMCAuODc5Ljk5NmwyLjg5OS4yNDNhMSAxIDAgMCAwIDEuMDc0LS44MjNsLjA2LS40MjFhNS45NzIgNS45NzIgMCAwIDEgNS40ODgtNS4xMjJWOC41YTggOCAwIDAgMSA4IDh2MS4wODNsLjkyLjE1NGExIDEgMCAwIDAgMS4xNTQtLjc2OWwuNTI1LTIuNzcyYTEgMSAwIDAgMC0uNjE3LTEuMTVBMTAuMDA0IDEwLjAwNCAwIDAgMCAxMS41IDR6Ii8+PC9zdmc+');
}

.icon-user {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyBjbGFzcz0idHN2LWljb24tY2xpZW50LW5vcm1hbCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MS40MTQyMTsiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOmJ4PSJodHRwczovL2JveHktc3ZnLmNvbSI+CiAgPHBhdGggZD0iTTEyIDJDMTcuNTIyOCAyIDIyIDYuNDc3MTUgMjIgMTJDMjIgMTcuNTIyOCAxNy41MjI4IDIyIDEyIDIyQzYuNDc3MTUgMjIgMiAxNy41MjI4IDIgMTJDMiA2LjQ3NzE1IDYuNDc3MTUgMiAxMiAyWiIgY2xhc3M9InRzdi1pY29uLXRpbnQtc3Ryb2tlIiBzdHJva2Utd2lkdGg9IjEuNSIgc3R5bGU9InN0cm9rZTogcmdiKDM0LCAxNzgsIDIzMSk7IGZpbGwtcnVsZTogZXZlbm9kZDsgZmlsbC1vcGFjaXR5OiAwLjg2OyBwYWludC1vcmRlcjogZmlsbDsgZmlsbDogdXJsKCNncmFkaWVudC0xLTApOyIvPgogIDxkZWZzPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudC0xIiBieDpwaW5uZWQ9InRydWUiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuMzg2IiBzdHlsZT0ic3RvcC1jb2xvcjogcmdiKDMzLCA0NiwgNTcpOyIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiByZ2IoNTMsIDgxLCAxMDMpOyIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQtMS0wIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjEyIiB5MT0iMiIgeDI9IjEyIiB5Mj0iMjIiIHhsaW5rOmhyZWY9IiNncmFkaWVudC0xIi8+CiAgPC9kZWZzPgo8L3N2Zz4=');
}

.icon-user-away {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjZmFhNjFhIiBkPSJNMTIgMTJjMi4yMSAwIDQtMS43OSA0LTRzLTEuNzktNC00LTQtNCAxLjc5LTQgNCAxLjc5IDQgNCA0em0wIDJjLTIuNjcgMC04IDEuMzQtOCA0djJoMTZ2LTJjMC0yLjY2LTUuMzMtNC04LTR6Ii8+PGNpcmNsZSBjeD0iMTkiIGN5PSI1IiByPSI0IiBmaWxsPSIjZmFhNjFhIiAvPjxwYXRoIGQ9Ik0xNyA1aDR2MWgtNFY1eiIgZmlsbD0iIzFhMWQyMyIgLz48L3N2Zz4=');
}

.icon-user-custom {
    /* Placeholder for custom user icon - will be overridden in HTML */
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjZmZmZjAwIiBkPSJNMTIgMTJjMi4yMSAwIDQtMS43OSA0LTRzLTEuNzktNC00LTQtNCAxLjc5LTQgNCAxLjc5IDQgNCA0em0wIDJjLTIuNjcgMC04IDEuMzQtOCA0djJoMTZ2LTJjMC0yLjY2LTUuMzMtNC04LTR6Ii8+PC9zdmc+');
}

/* Connector lines for tree structure */
.ts-tree ul {
    border-left: 1px dotted var(--ts-border-color);
}

.ts-tree li {
    padding: 0;
}

.ts-tree li:last-child {
    border-left: none;
}

.ts-tree li:before {
    position: absolute;
    content: "";
    top: 11px;
    left: -20px;
    width: 15px;
    height: 1px;
    background-color: var(--ts-border-color);
}

.ts-tree li:last-child:before {
    position: absolute;
    content: "";
    top: 11px;
    left: -20px;
    width: 15px;
    height: 1px;
    background-color: var(--ts-border-color);
}

.ts-tree ul li:last-child {
    border-left: 1px solid transparent;
}