* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; color: #333; line-height:1.6; }
header { background: #2c3e50; color: white; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; box-shadow:0 2px 5px rgba(0,0,0,0.1); }
header h1 { font-size:1.5rem; }
.header-actions { display: flex; gap: 0.5rem; }
.header-actions button { background: #e74c3c; color:white; border:none; padding:0.5rem 1rem; border-radius:4px; cursor:pointer; }
.container { display: flex; padding:2rem; gap:2rem; }
.sidebar { flex:0 0 250px; background:white; padding:1.5rem; border-radius:8px; box-shadow:0 2px 5px rgba(0,0,0,0.1); }
.sidebar h2 { margin-bottom:1rem; font-size:1.2rem; border-bottom:2px solid #eee; padding-bottom:0.5rem; }
.tools button { display:block; width:100%; margin-bottom:0.5rem; padding:0.5rem; background:#3498db; color:white; border:none; border-radius:4px; cursor:pointer; }
.tools button:hover { background:#2980b9; }
.script-output { margin-top:1rem; padding:0.5rem; background:#f8f9fa; border-radius:4px; font-size:0.9rem; max-height:200px; overflow-y:auto; white-space:pre-wrap; }
.content { flex:1; }
.section { background:white; padding:1.5rem; border-radius:8px; box-shadow:0 2px 5px rgba(0,0,0,0.1); margin-bottom: 1.5rem; }
.client-actions { display:flex; gap:1rem; margin-bottom:1.5rem; }
.client-actions input { flex:1; padding:0.5rem; border:1px solid #ddd; border-radius:4px; }
.client-actions button { background:#27ae60; color:white; border:none; padding:0.5rem 1rem; border-radius:4px; cursor:pointer; }
.table-responsive { overflow-x: auto; }
table { width:100%; border-collapse:collapse; min-width: 700px; }
th,td { padding:0.75rem; text-align:left; border-bottom:1px solid #eee; }
th { background:#f8f9fa; }
.status-badge { display:inline-block; padding:0.25rem 0.5rem; border-radius:4px; font-size:0.85rem; }
.status-connected { background:#d4edda; color:#155724; }
.status-disconnected { background:#f8d7da; color:#721c24; }
.status-enabled { background:#d4edda; color:#155724; }
.status-disabled { background:#fff3cd; color:#856404; }
.action-btn { padding:0.25rem 0.5rem; margin:0 0.25rem; border:none; border-radius:4px; cursor:pointer; font-size:0.85rem; }
.qr-btn { background:#3498db; color:white; }
.toggle-btn { background:#f39c12; color:white; }
.delete-btn { background:#e74c3c; color:white; }
.edit-btn { background:#95a5a6; color:white; }
.modal { display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); }
.modal-content { background:white; margin:10% auto; padding:2rem; border-radius:8px; width:90%; max-width:700px; text-align:center; }
.close { position:absolute; right:1rem; top:1rem; font-size:1.5rem; cursor:pointer; }
#qrcode { margin:2rem 0; display:flex; justify-content:center; }
#downloadConfig, #downloadConfigV4, #downloadConfigV6 { display:inline-block; background:#27ae60; color:white; text-decoration:none; padding:0.5rem 1rem; border-radius:4px; margin:0.25rem; }
#downloadConfigV6 { background:#3498db; }
.login-container { display:flex; justify-content:center; align-items:center; min-height:100vh; background:#2c3e50; }
.login-box { background:white; padding:2rem; border-radius:8px; width:100%; max-width:400px; }
.form-group { margin-bottom:1rem; text-align:left; }
.form-group label { display:block; margin-bottom:0.25rem; }
.form-group input { width:100%; padding:0.5rem; border:1px solid #ddd; border-radius:4px; }
button[type="submit"] { width:100%; padding:0.75rem; background:#27ae60; color:white; border:none; border-radius:4px; cursor:pointer; }
.error-message { color:#e74c3c; margin-top:1rem; text-align:center; }

/* Verbesserte Benutzerverwaltungstabelle - scrollbar auf Mobilgeräten */
#userList { overflow-x: auto; }
#userList table { min-width: 800px; width:100%; border-collapse:collapse; margin-top:1rem; }
#userList th { background:#3498db; color:white; padding:0.75rem; text-align:left; }
#userList td { padding:0.75rem; border-bottom:1px solid #ddd; }
#userList tr:hover { background:#f5f5f5; }
#userList button { margin-right:0.25rem; padding:0.25rem 0.5rem; border:none; border-radius:4px; cursor:pointer; }
#userList button:first-of-type { background:#f39c12; color:white; }
#userList button:nth-of-type(2) { background:#e74c3c; color:white; }
#userList button:nth-of-type(3) { background:#3498db; color:white; }

@media (max-width: 768px) {
    .container {
        flex-direction: column;
        padding: 1rem;
    }
    .sidebar {
        flex: auto;
        width: 100%;
    }
    .client-actions {
        flex-direction: column;
    }
    .client-actions button {
        width: 100%;
    }
    .modal-content {
        width: 95%;
        margin: 5% auto;
    }
    .header-actions {
        flex-direction: column;
        gap: 0.3rem;
    }
}