feat: Updated styling into seperate css files

frontend/src/App.vue

@@ -1,4 +1,4 @@
-<template>
+<template>
     <div id="app" class="app-container">
         <nav v-if="!isPublicRoute && !isAuthRoute" ref="navbarRef" class="navbar navbar-dark bg-dark sticky-top">
             <div class="container-fluid app-navbar">
@@ -1258,257 +1258,7 @@ const logout = () => {
 };
 </script>
 
-<style scoped>
-.app-container {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    overflow-x: hidden;
-    overflow-y: visible;
-}
+<style scoped src="./assets/styles/scoped/App.css"></style>
 
-.navbar {
-    z-index: 1100;
-    overflow: visible;
-}
 
-.app-navbar {
-    align-items: center;
-}
 
-.navbar-left {
-    min-width: 0;
-}
-
-.navbar-controls {
-    min-width: 0;
-}
-
-.app-brand {
-    white-space: nowrap;
-}
-
-.app-main {
-    flex: 1;
-    overflow: hidden;
-}
-
-.sidebar {
-    width: 280px;
-    overflow-y: auto;
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-}
-
-.sidebar-content {
-    flex: 1;
-    min-height: 0;
-    overflow-y: auto;
-}
-
-.sidebar-header {
-    border-bottom: 1px solid #dee2e6;
-}
-
-.main-content {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-}
-
-.content {
-    flex: 1;
-    overflow-y: auto;
-}
-
-.breadcrumb-title {
-    font-size: 1rem;
-    color: #495057;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.breadcrumb-link {
-    border: 0;
-    background: transparent;
-    padding: 0;
-    color: #0d6efd;
-    text-decoration: none;
-    cursor: pointer;
-}
-
-.breadcrumb-link:hover {
-    text-decoration: underline;
-}
-
-.breadcrumb-separator {
-    color: #6c757d;
-}
-
-.search-box {
-    width: 300px;
-}
-
-.dropdown {
-    position: relative;
-}
-
-.dropdown-menu {
-    z-index: 1200;
-    max-width: min(92vw, 320px);
-}
-
-.dropdown-menu-end {
-    right: 0;
-    left: auto;
-}
-
-.dropdown-menu.show {
-    display: block;
-}
-
-.admin-route-view {
-    flex: 1;
-    min-height: 0;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    padding: 0;
-}
-
-@media (max-width: 768px) {
-    .app-navbar {
-        display: grid;
-        grid-template-columns: 1fr auto;
-        grid-template-areas:
-            "left user"
-            "space space"
-            "search search";
-        row-gap: 0.5rem;
-        column-gap: 0.5rem;
-        align-items: center;
-    }
-
-    .navbar-left {
-        grid-area: left;
-    }
-
-    .navbar-controls {
-        width: 100%;
-    }
-
-    .nav-user-menu {
-        grid-area: user;
-        justify-self: end;
-    }
-
-    .nav-space-selector {
-        grid-area: space;
-    }
-
-    .nav-space-selector > .btn {
-        width: 100%;
-        text-align: left;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-
-    .nav-search {
-        grid-area: search;
-        width: 100%;
-    }
-
-    .nav-search .form-control {
-        width: 100%;
-    }
-
-    .search-box {
-        width: 100%;
-    }
-
-    .app-brand {
-        font-size: 1.5rem;
-    }
-
-    .nav-menu-toggle {
-        padding: 0.35rem 0.55rem;
-    }
-
-    .sidebar-backdrop {
-        position: fixed;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: rgba(0, 0, 0, 0.5);
-        z-index: 1090;
-    }
-
-    .sidebar {
-        position: fixed;
-        left: 0;
-        bottom: 0;
-        width: 280px;
-        z-index: 1095;
-        transform: translateX(-100%);
-        transition: transform 0.3s ease-in-out;
-        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
-        overflow-y: auto;
-    }
-
-    .sidebar.open {
-        transform: translateX(0);
-    }
-
-    .toolbar {
-        position: relative;
-        z-index: 0;
-    }
-
-    .action-button {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .action-label {
-        display: none;
-    }
-
-    .action-button .mdi {
-        margin-right: 0 !important;
-    }
-
-    .col-auto .action-button {
-        min-width: 2.75rem;
-    }
-
-    .app-main {
-        flex-direction: column;
-    }
-
-    .main-content {
-        width: 100%;
-    }
-}
-
-/* Dark mode overrides */
-:root[data-bs-theme="dark"] .sidebar-header {
-    border-bottom-color: #3a3f4b;
-}
-
-:root[data-bs-theme="dark"] .breadcrumb-title {
-    color: #94a3b8;
-}
-
-:root[data-bs-theme="dark"] .breadcrumb-link {
-    color: #7aa2f7;
-}
-
-:root[data-bs-theme="dark"] .breadcrumb-separator {
-    color: #4a5568;
-}
-</style>