/* ============================================================
   TEAMSPEAK — Server-Übersicht (Header, TS3-Widget-Ausgabe)
   ============================================================ */

/* Header */
.ts3_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(40,40,50,0.5);
    border-left: 3px solid #ebb43d;
    border-right: 1px solid var(--border);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow: -5px 5px 10px rgba(0,0,0,0.3), 5px 5px 10px rgba(0,0,0,0.3);
}

.ts3_header_info   { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ts3_header_label  { font-size: 13px; color: #6c7086; text-transform: uppercase; letter-spacing: .05em; }
.ts3_header_server { font-size: 15px; font-weight: bold; color: #FAD73C; }
.ts3_header_port   { font-size: 12px; color: #888; background: rgba(255,255,255,0.05); border: 1px solid #2a2c3a; border-radius: 4px; padding: 1px 7px; }

.ts3_connect_btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 5px;
    border: 1px solid #ebb43d44;
    background: rgba(235,180,61,0.1);
    color: #ebb43d;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.ts3_connect_btn:hover { background: rgba(235,180,61,0.22); border-color: #ebb43d88; color: #FAD73C; }

/* Server offline */
.ts3_offline {
    padding: 12px 16px;
    border-left: 3px solid #f7768e;
    background: rgba(247,118,142,0.08);
    color: #f7768e;
    font-size: 13px;
    border-radius: 0 5px 5px 0;
}

/* Body (vom ts3ssv.php-Widget gerendert) */
.ts3_body { width: 100%; font-family: Verdana, sans-serif; color: #cdd6f4; box-sizing: border-box; }
.ts3ssv   { width: 100%; max-width: 1300px; margin: 0 auto; font-family: Verdana, sans-serif; color: #fff; box-sizing: border-box; }

/* Hauptchannel */
.ts3ssvMainChannel { margin-bottom: 16px; }
.ts3ssvMainChannelHeader {
    font-size: 15px;
    font-weight: bold;
    color: #FAD73C;
    border-left: 3px solid #ebb43d;
    border-right: 1px solid var(--border);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
    padding: 6px 12px;
    background: rgba(40,40,50,0.5);
    box-shadow: -5px 5px 10px rgba(0,0,0,0.3), 5px 5px 10px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ts3ssvMainChannelHeader::before { content: "📢"; font-size: 14px; flex-shrink: 0; }

/* Subchannels */
.ts3ssvSubChannel {
    border-left: 3px solid #3a3c4e;
    border-right: 1px solid var(--border);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-left: 20px;
    margin-bottom: 6px;
    padding: 4px 0;
    background: rgba(30,30,40,0.3);
    box-shadow: -5px 5px 10px rgba(0,0,0,0.2), 5px 5px 10px rgba(0,0,0,0.2);
}
.ts3ssvSubChannelHeader { font-size: 15px; font-weight: bold; color: #888aaa; padding: 3px 10px; display: flex; align-items: center; gap: 6px; }

/* Users */
.ts3ssvUsers { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 8px 6px 40px; }

.ts3ssvUser {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 12px 3px 12px;
    background: rgba(20,25,35,0.4);
    border: 1px solid #2a2c3a;
    border-radius: 5px;
    font-size: 15px;
    font-weight: bold;
    color: #ebb43d;
    box-shadow: -3px 3px 8px rgba(0,0,0,0.3), 3px 3px 8px rgba(0,0,0,0.3);
    transition: background .15s, border-color .15s;
    user-select: none;
    cursor: default;
}
.ts3ssvUser img {
	height: 16px;
	width: 16px;
	object-fit: contain;
	vertical-align: middle;
	margin-right: 3px;
}
.ts3ssvUser:hover   { background: rgba(235,180,61,0.1); border-color: #ebb43d44; }

.ts3ssvUsers .ts3ssvItem { background-color: #101413; padding: 5px 10px; font-size: 15px; font-weight: bold; color: #fceb98; cursor: default; transition: background 0.2s, box-shadow 0.2s; box-shadow: 0 2px 6px rgba(0,0,0,0.5); border-radius: 4px; }
.ts3ssvUsers .ts3ssvItem:hover { background-color: #0b0b09; box-shadow: 0 4px 12px rgba(0,0,0,0.6); }

.ts3ssvItem, .ts3ssvSubChannel, .ts3ssvMainChannel { user-select: none; -webkit-user-select: none; -moz-user-select: none; }
.ts3ssvItem img { vertical-align: middle; margin-right: 5px; }

/* Leer */
.ts3UserEmpty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 210px; color: #6c7086; font-size: 16px; font-style: italic; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
.ts3UserEmpty::before { content: "🎧"; font-size: 32px; opacity: .5; }

/* Fehler */
.ts3ssvError { padding: 12px 16px; border-left: 3px solid #f7768e; background: rgba(247,118,142,0.08); color: #f7768e; font-size: 13px; border-radius: 0 5px 5px 0; }

/* ts_user Box (Startseiten-Widget, box_teamspeak.php) */
.ts-header-controls { display: flex; align-items: center; gap: 2px; }
.ts-arrow {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.5);
    width: 20px;
    height: 20px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    padding: 0;
    flex-shrink: 0;
}
.ts-arrow:hover { color: #e8a830; }
.ts-arrow:disabled { opacity: 0.2; cursor: default; }

.ts_user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 10px;
	height: 32px;
	font-size: 13px;
	font-weight: bold;
	color: #d0d0d0;
    cursor: default;
    border-top: 1px solid #21252b;
    border-bottom: 1px solid #07080a;
	transition: background 0.15s ease;
    user-select: none;
}
.ts_user:first-child { border-top: none; }
.ts_user:hover { background: rgba(255,255,255,0.025); }
.ts_user_name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts_user_icons { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.ts3_channel_icon { width: 22px; height: 22px; margin-right: 5px; vertical-align: middle; }
.ts_group_icon { width: 16px; height: 16px; object-fit: contain; margin: 0 5px; }

.ts_pagination { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; }
.ts_pagination a { color: #4CAF50; text-decoration: none; font-weight: 600; padding: 3px 8px; border: 1px solid #4CAF50; border-radius: 4px; transition: background 0.2s; display: inline-block; white-space: nowrap; }
.ts_pagination a:hover { background: #4CAF50; color: #fff; }

@media (max-width: 768px) {
    .ts3_header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .ts3_connect_btn { width: 100%; justify-content: center; }
    .ts3ssvUsers  { flex-direction: column; margin-left: 8px; }
    .ts3ssvSubChannel { margin-left: 8px; }
    .ts3ssvUser { font-size: 12px; }
    .ts3ssvMainChannelHeader { font-size: 16px; }
    .ts3ssvSubChannelHeader  { font-size: 14px; }
}