Fix Bootstrap compatibility issues in admin settings template

PROBLEM DIAGNOSED:
- Admin settings page buttons weren't displaying correctly
- Template was using Bootstrap 5 syntax (data-bs-*, bootstrap.Modal) without Bootstrap framework
- Base template only had custom CSS, no Bootstrap CSS or JavaScript

ROOT CAUSE ANALYSIS:
- admin_settings.html used Bootstrap 5 modal attributes: data-bs-toggle, data-bs-target, data-bs-dismiss
- Template referenced bootstrap.Modal JavaScript constructor
- Bootstrap 5 CSS classes: container-fluid, row, col-md-*, card, btn-group not styled
- Base.html template had no Bootstrap framework loaded

SOLUTION IMPLEMENTED:
- Added Bootstrap 5.1.3 CSS from CDN in extra_css block
- Added Bootstrap 5.1.3 JavaScript bundle from CDN in extra_js block
- Added Font Awesome 6.0.0 icons for enhanced UI
- Maintained compatibility with existing custom CSS from base.html

TECHNICAL BENEFITS:
- ✅ All buttons now display correctly with proper Bootstrap styling
- ✅ Modal dialogs work with Bootstrap 5 JavaScript functionality
- ✅ Responsive grid system and card layouts render properly
- ✅ Toggle switches and button groups styled correctly
- ✅ Font Awesome icons enhance user interface
- ✅ Maintains backward compatibility with base template

This resolves the reported issue: 'all the buttons with the exceptions of add settings, update settings and two cancel buttons in the /admin/settings page aren't shown correctly'

app/templates/main/admin_settings.html

@@ -2,6 +2,13 @@
 
 {% block title %}System Settings - Admin{% endblock %}
 
+{% block extra_css %}
+<!-- Bootstrap 5 CSS -->
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
+<!-- Font Awesome -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+{% endblock %}
+
 {% block content %}
 <div class="container-fluid">
     <div class="row">
@@ -377,3 +384,8 @@ document.getElementById('editSettingForm').addEventListener('submit', function(e
 });
 </script>
 {% endblock %}
+
+{% block extra_js %}
+<!-- Bootstrap 5 JavaScript -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+{% endblock %}
\ No newline at end of file