Add Roles/MQTT-settings/Backup pages, AdminLTE demo shells, and a separate mobile design system

Backend: real endpoints for role-permission overview, MQTT broker settings
(with live reachability check), and SQLite backup download/restore (new
system.manage permission, super-admin only; restore validates the SQLite
file header and keeps a pre-restore safety copy).

Desktop frontend: Roles (read-only permissions view), MQTT Settings,
Backup & Restore wired to those endpoints; plus static AdminLTE-matching
shells for Profile, Settings (embeds the real 2FA flow in its Security
tab), Invoice, Calendar (FullCalendar), Chat, File Manager, and Projects.

Mobile frontend: new frontend/src/styles/mobile.css, a from-scratch design
system (purple theme, cards, slide-out sidebar, bottom tab bar) scoped
entirely under a .mob-app root and mob- prefixed classes so it can never
collide with the desktop Bootstrap/AdminLTE styling. Rebuilt TopBar/
BottomNav, added a new SlideOutNav, and reskinned the Dashboard and Users
pages to it with real data.

backend/app/Http/Controllers/Api/RoleController.php

@@ -17,4 +17,18 @@ class RoleController extends Controller
         // seeding/tinker, never assignable through the Users module.
         return RoleResource::collection(Role::where('name', '!=', 'super-admin')->orderBy('name')->get());
     }
+
+    /**
+     * Read-only view of every role (including Super Admin) and its
+     * permission set — for the Roles page, distinct from index() which
+     * feeds the assignable-role dropdown in the Users module.
+     */
+    public function overview(Request $request)
+    {
+        abort_unless($request->user()->can('roles.view'), 403);
+
+        $roles = Role::with('permissions')->orderBy('name')->get();
+
+        return RoleResource::collection($roles);
+    }
 }