feat: Updated styling into seperate css files

frontend/src/assets/styles/scoped/App.css

@@ -0,0 +1,254 @@
+.app-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow-x: hidden;
+    overflow-y: visible;
+}
+
+.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 var(--color-border);
+}
+
+.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: var(--color-primary);
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.breadcrumb-link:hover {
+    text-decoration: underline;
+}
+
+.breadcrumb-separator {
+    color: var(--color-text-muted);
+}
+
+.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: var(--color-border);
+}
+
+: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;
+}
+
+