Add dark mode support and replace group assignment with playlist assignment

- Added comprehensive dark mode styling to all pages:
  * Dashboard (workflow guide, secondary text, log items)
  * Admin panel with user management system
  * Content/playlist management page
  * Upload media page
  * Add player page

- Implemented user management system:
  * Create/edit/delete users
  * Two role types (user/admin)
  * Reset password functionality
  * Role-based permissions

- Replaced group assignment with playlist assignment:
  * Players now directly assigned to playlists
  * Updated add player form and backend
  * Removed group selection from player creation

- Fixed bugs:
  * Updated instance_path configuration for SQLite
  * Fixed import path in app factory
  * Updated dependencies (Pillow 11.0.0, removed gevent)

- Added start.sh script for easy development server launch

app/templates/admin/admin.html

@@ -4,17 +4,140 @@
 
 {% block content %}
 <h1>Admin Panel</h1>
-<div class="card">
-    <h2>System Overview</h2>
-    <p>Total Users: {{ total_users or 0 }}</p>
-    <p>Total Players: {{ total_players or 0 }}</p>
-    <p>Total Groups: {{ total_groups or 0 }}</p>
-    <p>Total Content: {{ total_content or 0 }}</p>
-    <p>Storage Used: {{ storage_mb or 0 }} MB</p>
+
+<div class="dashboard-grid">
+    <!-- System Overview Card -->
+    <div class="card">
+        <h2>📊 System Overview</h2>
+        <div class="stats-grid">
+            <div class="stat-item">
+                <span class="stat-label">Total Users:</span>
+                <span class="stat-value">{{ total_users or 0 }}</span>
+            </div>
+            <div class="stat-item">
+                <span class="stat-label">Total Players:</span>
+                <span class="stat-value">{{ total_players or 0 }}</span>
+            </div>
+            <div class="stat-item">
+                <span class="stat-label">Total Groups:</span>
+                <span class="stat-value">{{ total_groups or 0 }}</span>
+            </div>
+            <div class="stat-item">
+                <span class="stat-label">Total Content:</span>
+                <span class="stat-value">{{ total_content or 0 }}</span>
+            </div>
+            <div class="stat-item">
+                <span class="stat-label">Storage Used:</span>
+                <span class="stat-value">{{ storage_mb or 0 }} MB</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- User Management Card -->
+    <div class="card management-card">
+        <h2>👥 User Management</h2>
+        <p>Manage application users, roles and permissions</p>
+        <div class="card-actions">
+            <a href="{{ url_for('admin.user_management') }}" class="btn btn-primary">
+                Manage Users
+            </a>
+        </div>
+    </div>
+
+    <!-- Quick Actions Card -->
+    <div class="card">
+        <h2>⚡ Quick Actions</h2>
+        <div class="quick-actions">
+            <a href="{{ url_for('players.list') }}" class="btn btn-secondary">View Players</a>
+            <a href="{{ url_for('groups.groups_list') }}" class="btn btn-secondary">View Groups</a>
+            <a href="{{ url_for('content.content_list') }}" class="btn btn-secondary">View Content</a>
+        </div>
+    </div>
 </div>
 
-<div class="card">
-    <h2>User Management</h2>
-    <p>User management features - Template in progress</p>
-</div>
+<style>
+.dashboard-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 20px;
+    margin-top: 20px;
+}
+
+.stats-grid {
+    display: grid;
+    gap: 10px;
+    margin-top: 15px;
+}
+
+.stat-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px;
+    background: #f8f9fa;
+    border-radius: 4px;
+}
+
+.stat-label {
+    font-weight: 500;
+    color: #666;
+}
+
+.stat-value {
+    font-weight: bold;
+    color: #2c3e50;
+}
+
+.management-card {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+.management-card h2 {
+    color: white;
+}
+
+.management-card p {
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.card-actions {
+    margin-top: 20px;
+}
+
+.quick-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 15px;
+}
+
+.btn {
+    padding: 10px 20px;
+    text-decoration: none;
+    border-radius: 4px;
+    text-align: center;
+    font-weight: 500;
+    display: inline-block;
+    border: none;
+    cursor: pointer;
+}
+
+.btn-primary {
+    background: white;
+    color: #667eea;
+}
+
+.btn-primary:hover {
+    background: #f0f0f0;
+}
+
+.btn-secondary {
+    background: #6c757d;
+    color: white;
+}
+
+.btn-secondary:hover {
+    background: #5a6268;
+}
+</style>
 {% endblock %}