/* =================================
   CSS Variablen für Theming
   ================================= */
:root {
    --bg-primary: #f0f0f0; --bg-secondary: #ffffff; --bg-tertiary: #e5e5e5;
    --text-primary: #0e0e10; --text-secondary: #5c5c5c; --accent-primary: #8e45f7;
    --accent-secondary: #7539c1; --border-color: #dcdcdc; --live-color: #eb0400;
}
body.dark-mode {
    --bg-primary: #0e0e10; --bg-secondary: #18181b; --bg-tertiary: #1f1f23;
    --text-primary: #efeff1; --text-secondary: #adadb8; --accent-primary: #a970ff;
    --accent-secondary: #7539c1; --border-color: #36363b;
}

/* =================================
   Allgemeine Styles & Body-Layout
   ================================= */
body { background-color: var(--bg-primary); color: var(--text-primary); font-family: Arial, sans-serif; margin: 0; overflow: hidden; }
.main-wrapper { display: grid; grid-template-columns: 240px 1fr; height: calc(100vh - 45px); transition: grid-template-columns 0.3s ease-in-out; }
body.sidebar-collapsed .main-wrapper { grid-template-columns: 50px 1fr; }
.content-wrapper { position: relative; display: flex; height: 100%; }

/* =================================
   Header & Suchleiste
   ================================= */
header { background-color: var(--bg-secondary); display: flex; align-items: center; padding: 0 10px; height: 44px; border-bottom: 1px solid var(--border-color); }
header .header-left, .header-center, .header-right, .header-actions { display: flex; align-items: center; gap: 15px; }
header .header-center { flex-grow: 1; justify-content: center; }
header .header-left { margin-left: 10px; }
header img.logo { height: 28px; margin-right: 25px; cursor: pointer; }
.search-bar-wrapper { display: flex; align-items: center; }
#stream-input {
    background-color: var(--bg-tertiary); color: var(--text-primary);
    border: 1px solid var(--border-color); border-right: none;
    border-radius: 6px 0 0 6px; padding: 6px 12px; width: 400px; height: 32px; box-sizing: border-box;
}
#stream-input:focus { outline: none; border-color: var(--accent-primary); }
#search-button {
    background-color: #3a3a3d; border: 1px solid var(--border-color);
    border-left: none; border-radius: 0 6px 6px 0; height: 32px; padding: 0 12px;
    display: flex; align-items: center; cursor: pointer;
}
#search-button:hover { background-color: #4a4a4d; }
#search-button svg { color: var(--text-primary); }
.header-layouts button, .header-buttons button { background: none; border: none; padding: 0; margin: 0 5px; font-weight: bold; font-size: 14px; color: var(--text-secondary); transition: color 0.2s; cursor: pointer; position: relative; }
.header-buttons button { margin: 0 8px; }
.header-layouts button:hover, .header-buttons button:hover { color: var(--accent-primary); }
.header-layouts button { font-size: 18px; letter-spacing: 1px; padding: 10px 5px; }
.header-layouts button::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background-color: var(--accent-primary); transform: scaleX(0); transition: transform 0.3s ease-in-out; }
.header-layouts button.active { color: var(--accent-primary); }
.header-layouts button.active::after { transform: scaleX(1); }
#theme-toggle, #how-to-use { background: none; border: none; font-size: 20px; padding: 5px; color: var(--text-secondary); transition: color 0.2s; cursor: pointer; }
#theme-toggle:hover, #how-to-use:hover { color: var(--accent-primary); }
#chat-indicator { font-weight: bold; color: var(--accent-primary); font-size: 14px; }

/* =================================
   Linke Seitenleiste (Sidebar)
   ================================= */
#sidebar { background-color: var(--bg-tertiary); display: flex; flex-direction: column; overflow-x: hidden; white-space: nowrap; }
.sidebar-toggle-wrapper { display: flex; justify-content: flex-end; padding: 5px; }
#sidebar-toggle { font-size: 20px; color: var(--text-secondary); background: none; border: none; transition: color 0.2s; }
#sidebar-toggle:hover { color: var(--accent-primary); }
.sidebar-section { margin-bottom: 10px; }
.sidebar-section-header { padding: 0 10px; margin: 5px 0; display: flex; align-items: center; gap: 10px; }
.section-title { margin: 0; font-size: 14px; text-transform: uppercase; color: var(--text-secondary); }
.sidebar-list { list-style: none; padding: 0; margin: 0; overflow-y: auto; }
.sidebar-list li { display: flex; align-items: center; padding: 5px 10px; cursor: pointer; transition: background-color 0.2s; position: relative; }
.sidebar-list li:hover { background-color: rgba(170, 170, 170, 0.1); }
.sidebar-list li.focused, .sidebar-list li.focused:hover { background-color: var(--accent-secondary); color: #fff; }
.sidebar-list .profile-pic { width: 30px; height: 30px; border-radius: 50%; margin-right: 10px; flex-shrink: 0; }
.sidebar-list .channel-name { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; }
.sidebar-list .favorite-btn { background: none; border: none; font-size: 18px; cursor: pointer; padding: 5px; color: transparent; }
.sidebar-list li:hover .favorite-btn { color: var(--text-secondary); }
.sidebar-list .favorite-btn.is-favorite { color: var(--accent-primary); }
.sidebar-icon { display: none; }
.sidebar-live-separator { display: none; }
body.sidebar-collapsed .section-title, body.sidebar-collapsed .channel-name, body.sidebar-collapsed .favorite-btn, body.sidebar-collapsed .live-indicator, body.sidebar-collapsed #favorites-list .sidebar-icon { display: none; }
body.sidebar-collapsed .sidebar-toggle-wrapper, body.sidebar-collapsed .sidebar-section-header, body.sidebar-collapsed .sidebar-list li { justify-content: center; }
body.sidebar-collapsed .sidebar-list .profile-pic { margin-right: 0; }
body.sidebar-collapsed .section-icon { display: block; font-size: 24px; text-align: center; color: var(--accent-primary); padding: 5px 0; }
body.sidebar-collapsed .sidebar-live-separator { display: block; margin: 10px auto; font-size: 9px; font-weight: bold; color: var(--text-secondary); text-align: center; }

/* =================================
   Haupt-Content & Rest
   ================================= */
#streams-container { display: grid; grid-gap: 2px; flex-grow: 1; }
#chat-iframe-container { display: none; width: 300px; border-left: 1px solid var(--border-color); }
.content-wrapper:not(.chat-hidden) #chat-iframe-container { display: block; }
.stream-wrapper { position: relative; background-color: #000; }
.stream-frame, .chat-frame { border: none; overflow: hidden; height: 100%; width: 100%; display: block; }
.loading-placeholder { background-color: var(--bg-tertiary); display: flex; justify-content: center; align-items: center; border: 1px dashed var(--accent-primary); height: 100%; }
.spinner { border: 4px solid rgba(255, 255, 255, 0.2); border-left-color: var(--accent-primary); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#streams-container.focus-layout { display: grid; height: 100%; }
#streams-container.focus-layout .stream-wrapper.focused { grid-row: 1 / -1; }
.unfocused-streams-container { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; grid-row: 1 / -1; }
.unfocused-streams-container .stream-wrapper { flex: 1 1 150px; min-height: 100px; }
.popup { display: none; position: fixed; z-index: 1001; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); }
.popup-content { background-color: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--accent-primary); margin: 15% auto; padding: 20px; border-radius: 5px; max-width: 600px; position: relative; }
.close-popup { position: absolute; top: 10px; right: 15px; font-size: 24px; font-weight: bold; cursor: pointer; }
.close-popup:hover { color: var(--accent-primary); }
.popup-title { text-align: center; margin-top: 0; color: var(--accent-primary); }
#how-to-use-text p { line-height: 1.6; }