F: Fix tabIndex for modals

TODO.txt

@@ -2,7 +2,7 @@
 For more specific TODOs see comments in code
 
 [Bugs - PENDING]
-- Tab index still selecting background elements when modal is active
+- 
 
 [Functionality - PENDING]
 - Landing page

rsconcept/frontend/src/app/ApplicationLayout.tsx

@@ -3,6 +3,7 @@ import { Outlet } from 'react-router';
 
 import { ModalLoader } from '@/components/Modal';
 import { useAppLayoutStore, useMainHeight, useViewportHeight } from '@/stores/appLayout';
+import { useDialogsStore } from '@/stores/dialogs';
 
 import { NavigationState } from './Navigation/NavigationContext';
 import { Footer } from './Footer';
@@ -20,6 +21,7 @@ export function ApplicationLayout() {
   const noNavigationAnimation = useAppLayoutStore(state => state.noNavigationAnimation);
   const noNavigation = useAppLayoutStore(state => state.noNavigation);
   const noFooter = useAppLayoutStore(state => state.noFooter);
+  const activeDialog = useDialogsStore(state => state.active);
 
   return (
     <NavigationState>
@@ -39,7 +41,11 @@ export function ApplicationLayout() {
 
         <Navigation />
 
-        <div className='overflow-x-auto max-w-[100vw]' style={{ maxHeight: viewportHeight }}>
+        <div
+          className='overflow-x-auto max-w-[100vw]'
+          style={{ maxHeight: viewportHeight }}
+          inert={activeDialog !== null}
+        >
           <main className='cc-scroll-y' style={{ overflowY: showScroll ? 'scroll' : 'auto', minHeight: mainHeight }}>
             <GlobalLoader />
             <MutationErrors />

rsconcept/frontend/src/styling/setup.css

@@ -4,16 +4,6 @@
 
 @import './constants.css' layer(base);
 
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--clr-prim-400);
-  }
-}
-
 @layer utilities {
   *,
   *::after,
@@ -24,6 +14,16 @@
     /* background: hsla(135, 50%, 50%, 0.05); */
     /* outline: 2px solid hotpink; */
   }
+}
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--clr-prim-400);
+  }
 
   html {
     -webkit-text-size-adjust: none;
@@ -115,9 +115,7 @@
   div:not(.dense) > p:not(:last-child) {
     margin-bottom: 0.5rem;
   }
-}
 
-@layer components {
   h1 {
     font-weight: 600;
     font-size: 1.125rem;