Add leftover media management, PDF to PNG conversion, video delete, and playlist duration editing

Features added:
- Leftover media management page in admin panel with delete functionality for images and videos
- Individual file delete buttons for leftover media
- PDF to PNG conversion (each page becomes a separate image at Full HD resolution)
- Delete functionality for leftover video files
- Enhanced playlist management with duration editing for all content types
- Improved dark mode support for playlist management page
- Content type badges with color coding
- Better styling for duration input fields with save functionality
- Fixed URL generation for duration update endpoint

app/templates/admin/leftover_media.html

@@ -63,6 +63,7 @@
                         <th style="padding: 10px; text-align: left; border-bottom: 2px solid #dee2e6;">Size</th>
                         <th style="padding: 10px; text-align: left; border-bottom: 2px solid #dee2e6;">Duration</th>
                         <th style="padding: 10px; text-align: left; border-bottom: 2px solid #dee2e6;">Uploaded</th>
+                        <th style="padding: 10px; text-align: left; border-bottom: 2px solid #dee2e6; width: 80px;">Action</th>
                     </tr>
                 </thead>
                 <tbody>
@@ -72,6 +73,11 @@
                         <td style="padding: 10px;">{{ "%.2f"|format(img.file_size_mb) }} MB</td>
                         <td style="padding: 10px;">{{ img.duration }}s</td>
                         <td style="padding: 10px;">{{ img.uploaded_at.strftime('%Y-%m-%d %H:%M') if img.uploaded_at else 'N/A' }}</td>
+                        <td style="padding: 10px;">
+                            <form method="POST" action="{{ url_for('admin.delete_single_leftover', content_id=img.id) }}" style="display: inline;" onsubmit="return confirm('Delete this image?');">
+                                <button type="submit" class="btn btn-danger btn-sm" style="padding: 4px 8px; font-size: 12px;">🗑️</button>
+                            </form>
+                        </td>
                     </tr>
                     {% endfor %}
                 </tbody>
@@ -107,6 +113,7 @@
                         <th style="padding: 10px; text-align: left; border-bottom: 2px solid #dee2e6;">Size</th>
                         <th style="padding: 10px; text-align: left; border-bottom: 2px solid #dee2e6;">Duration</th>
                         <th style="padding: 10px; text-align: left; border-bottom: 2px solid #dee2e6;">Uploaded</th>
+                        <th style="padding: 10px; text-align: left; border-bottom: 2px solid #dee2e6; width: 80px;">Action</th>
                     </tr>
                 </thead>
                 <tbody>
@@ -116,6 +123,11 @@
                         <td style="padding: 10px;">{{ "%.2f"|format(video.file_size_mb) }} MB</td>
                         <td style="padding: 10px;">{{ video.duration }}s</td>
                         <td style="padding: 10px;">{{ video.uploaded_at.strftime('%Y-%m-%d %H:%M') if video.uploaded_at else 'N/A' }}</td>
+                        <td style="padding: 10px;">
+                            <form method="POST" action="{{ url_for('admin.delete_single_leftover', content_id=video.id) }}" style="display: inline;" onsubmit="return confirm('Delete this video?');">
+                                <button type="submit" class="btn btn-danger btn-sm" style="padding: 4px 8px; font-size: 12px;">🗑️</button>
+                            </form>
+                        </td>
                     </tr>
                     {% endfor %}
                 </tbody>