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

frontend/node_modules/vuetify/lib/components/VTabs/VTabs.css

@@ -0,0 +1,115 @@
+@layer vuetify-components {
+  .v-tabs {
+    display: flex;
+    height: var(--v-tabs-height);
+  }
+  .v-tabs--density-default {
+    --v-tabs-height: 48px;
+  }
+  .v-tabs--density-default.v-tabs--stacked {
+    --v-tabs-height: 72px;
+  }
+  .v-tabs--density-comfortable {
+    --v-tabs-height: 44px;
+  }
+  .v-tabs--density-comfortable.v-tabs--stacked {
+    --v-tabs-height: 68px;
+  }
+  .v-tabs--density-compact {
+    --v-tabs-height: 36px;
+  }
+  .v-tabs--density-compact.v-tabs--stacked {
+    --v-tabs-height: 60px;
+  }
+  .v-tabs.v-slide-group--vertical {
+    height: auto;
+    flex: none;
+    --v-tabs-height: 48px;
+  }
+  .v-tabs--align-tabs-title:not(.v-slide-group--has-affixes) .v-tab:first-child {
+    margin-inline-start: 42px;
+  }
+  .v-tabs--fixed-tabs .v-slide-group__content > *:last-child,
+  .v-tabs--align-tabs-center .v-slide-group__content > *:last-child {
+    margin-inline-end: auto;
+  }
+  .v-tabs--fixed-tabs .v-slide-group__content > *:first-child,
+  .v-tabs--align-tabs-center .v-slide-group__content > *:first-child {
+    margin-inline-start: auto;
+  }
+  .v-tabs--grow {
+    flex-grow: 1;
+  }
+  .v-tabs--grow .v-tab {
+    flex: 1 0 auto;
+    max-width: none;
+  }
+  .v-tabs--align-tabs-end .v-tab:first-child {
+    margin-inline-start: auto;
+  }
+  .v-tabs--align-tabs-end .v-tab:last-child {
+    margin-inline-end: 0;
+  }
+  .v-tabs--inset {
+    --v-tabs-inset-radius: 4px;
+    --v-tabs-inset-padding: 4px;
+    --v-tabs-slider-background: rgba(var(--v-theme-on-surface), .2);
+    background: color-mix(in srgb, rgb(var(--v-theme-on-surface)) 6%, transparent);
+    box-shadow: inset 0 0 0 2px rgba(var(--v-border-color), var(--v-border-opacity));
+    border-radius: calc(var(--v-tabs-inset-radius) + var(--v-tabs-inset-padding));
+  }
+  .v-tabs--inset .v-tab {
+    margin: var(--v-tabs-inset-padding);
+    transition-property: box-shadow, transform, opacity, background, color;
+  }
+  .v-tabs--inset .v-tab.v-tab.v-btn {
+    border-radius: var(--v-tabs-inset-radius);
+  }
+  .v-tabs--inset .v-tab:focus-visible {
+    outline: 2px solid rgb(var(--v-border-color));
+    outline-offset: 2px;
+  }
+  .v-tabs--inset .v-tab:focus-visible:after {
+    opacity: 0;
+  }
+  .v-tabs--inset:not(.v-tabs--fixed-tabs, .v-tabs--grow) {
+    max-width: max-content;
+  }
+  .v-tabs--inset.v-tabs--fixed-tabs .v-slide-group__content {
+    padding-inline: var(--v-tabs-inset-padding);
+  }
+  .v-tabs--inset .v-tab__slider {
+    background: var(--v-tabs-slider-background);
+    inset: 0;
+    border-radius: var(--v-tabs-inset-radius);
+    z-index: -1;
+    width: auto;
+  }
+  .v-tabs--inset.v-tabs--horizontal {
+    height: calc(var(--v-tabs-height) + var(--v-tabs-inset-padding) * 2);
+    --v-tabs-inset-tab-radius: calc(var(--v-tabs-outer-radius) - var(--v-tabs-inset-padding) + 4px);
+  }
+  .v-tabs--inset.v-tabs--horizontal .v-tab__slider {
+    height: auto;
+  }
+  .v-tabs--inset .v-btn__overlay {
+    display: none;
+  }
+  .v-tabs--inset.v-tabs--vertical .v-tab {
+    grid-template-columns: max-content 1fr max-content;
+  }
+  .v-tabs--inset.v-tabs--vertical .v-tab > .v-btn__content {
+    justify-content: start;
+  }
+  .v-tabs--inset.v-tabs--vertical .v-tab .v-tab__slider {
+    width: auto;
+  }
+  @media (max-width: 1144.98px) {
+    .v-tabs.v-slide-group--is-overflowing.v-slide-group--horizontal:not(.v-slide-group--has-affixes) .v-tab:first-child {
+      margin-inline-start: 52px;
+    }
+    .v-tabs.v-slide-group--is-overflowing.v-slide-group--horizontal:not(.v-slide-group--has-affixes) .v-tab:last-child {
+      margin-inline-end: 52px;
+    }
+  }
+}