routie dev init since i didn't adhere to any proper guidance up until now

frontend/node_modules/vuetify/lib/components/VTreeview/VTreeviewItem.css

@@ -0,0 +1,104 @@
+@layer vuetify-components {
+  .v-treeview-item {
+    --list-indent-size: 28px;
+  }
+  .v-treeview-item.v-treeview-item--filtered {
+    display: none;
+  }
+  .v-treeview-item.v-list-item--disabled:not(a) {
+    pointer-events: auto;
+  }
+  .v-treeview-item.v-list-item--disabled:not(a) .v-selection-control {
+    pointer-events: none;
+  }
+  .v-treeview-item__level {
+    width: 28px;
+  }
+  .v-treeview--fluid .v-treeview-item__level {
+    width: 0;
+  }
+  .v-treeview {
+    --v-treeview-indent-line-color: rgb(var(--v-theme-on-surface));
+    --v-treeview-indent-line-opacity: 0.4;
+  }
+  .v-treeview.v-list {
+    --indent-padding: 16px;
+  }
+  .v-treeview.v-list--disabled .v-list-item__prepend {
+    pointer-events: auto;
+  }
+  .v-treeview .v-list-item--slim > .v-list-item__prepend > .v-icon ~ .v-list-item__spacer {
+    width: var(--v-list-prepend-gap, 10px);
+  }
+  .v-treeview .v-list-item--slim > .v-list-item__prepend:not(:has(.v-list-item-action)) > .v-icon {
+    margin-inline-start: -6px;
+  }
+  .v-treeview:has(.v-treeview-indent-lines) .v-list-item-action:first-child > .v-selection-control,
+  .v-treeview:has(.v-treeview-indent-lines) .v-treeview-indent-lines + .v-list-item-action > .v-selection-control {
+    margin-inline: min(0px, -1 * (var(--v-selection-control-size) - 28px) / 2);
+  }
+  .v-treeview-indent-lines {
+    position: absolute;
+    inset-inline-start: 0;
+    height: 100%;
+    display: grid;
+    padding-inline-start: 8px;
+    padding-block: 0;
+    grid-template-columns: repeat(var(--v-indent-parts, 1), var(--prepend-width));
+    opacity: var(--v-treeview-indent-line-opacity);
+    pointer-events: none;
+  }
+  .v-treeview-indent-line, .v-treeview-indent-line::before {
+    border: 0px solid var(--v-treeview-indent-line-color);
+  }
+  .v-treeview-indent-line--leaf, .v-treeview-indent-line--line {
+    border-inline-start-width: 1px;
+    height: 100%;
+    width: calc(50% + 1px);
+    justify-self: end;
+  }
+  .v-treeview-indent-line--leaf {
+    position: relative;
+  }
+  .v-treeview-indent-line--leaf::before {
+    content: "";
+    position: absolute;
+    border-bottom-width: 1px;
+    height: calc(50% + 1px);
+    width: 100%;
+  }
+  .v-treeview-indent-line--leaf:last-child::before {
+    width: calc(100% - 4px);
+  }
+  .v-treeview-indent-line--leaf-link {
+    border-bottom-width: 1px;
+    height: calc(50% + 1px);
+    margin-inline-start: 0;
+    margin-inline-end: 6px;
+  }
+  .v-treeview-indent-line--last-leaf {
+    border-inline-start-width: 1px;
+    border-bottom-width: 1px;
+    height: calc(50% + 1px);
+    margin-inline-start: calc(50% - 1px);
+    border-bottom-left-radius: 4px;
+  }
+  .v-locale--is-rtl.v-treeview-indent-line--last-leaf, .v-locale--is-rtl .v-treeview-indent-line--last-leaf {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 4px;
+  }
+  .v-treeview-indent-line--last-leaf:last-child {
+    margin-inline-end: 4px;
+  }
+  .v-treeview-group.v-list-group {
+    --list-indent-size: 0px;
+  }
+  .v-treeview-group.v-list-group > .v-treeview-item__level {
+    width: 0px;
+  }
+}
+@layer vuetify-overrides {
+  .v-treeview-group.v-list-group .v-list-group__items .v-list-item {
+    padding-inline-start: calc(var(--indent-padding));
+  }
+}