@import url("shell-chrome.css"); /* * App Shell — shared platform & admin navigation chrome. * * Ports the keyspotUIMockup navigation/layout mechanics into a single, * fully CSS-driven shell so PlatformRouter and AdminRouter no longer split * their markup between a desktop sidebar and a mobile bottom bar. The SAME * menu markup renders as: * - desktop (>= 40rem): a vertical, collapsible sidebar (collapse/expand * driven by `data-collapsed` on `.app-shell`) * - mobile (< 40rem): a fixed, horizontally-scrollable icon bar at the * bottom of the viewport * * The vertical / horizontal / mobile gradients are the SHARED --shell-gradient-* * tokens defined once in shell-chrome.css (imported above), the same ones the * Login auth shell (auth-shell.css) uses — so the platform/admin chrome stays * visually identical to the login flow with zero duplicated gradient literals. */ .app-shell { --app-nav-bar-height: 3.5rem; /* Mobile-first: symmetric green -> blue -> green. Desktop overrides this to the horizontal sweep in the media query below. */ background: var(--shell-gradient-mobile); /* Pin the shell to EXACTLY the viewport and clip it, so `.app-page` is the single in-shell scroller. */ height: 100vh; max-height: 100vh; overflow: hidden; display: grid; } /* The shell mounts INSIDE `#root`, and styles.css sets `#root { min-height: 100svh; display:flex }`. Clamping only `.app-shell` left the ancestor chain (html → body → #root) free to scroll, so a document/window scrollbar appeared OUTSIDE (the dark bar; html measured 1904x603 while content overflowed). Cap the whole chain to the viewport and clip it — but ONLY when a `.app-shell` is present (`:has`), so the auth/imprint pages, which render `.auth-page` and rely on normal body scroll, are completely unaffected. */ html:has(> body .app-shell), body:has(.app-shell) { height: 100%; max-height: 100vh; overflow: hidden; } #root:has(.app-shell), #root > .app-shell { min-height: 0; height: 100vh; max-height: 100vh; overflow: hidden; } /* ----- Mobile-first: fixed bottom icon bar + scrolling content ----- */ .app-shell > .app-nav { position: fixed; inset-inline: 0; inset-block-end: 0; block-size: var(--app-nav-bar-height); inline-size: 100%; z-index: 100; background: var(--shell-gradient-mobile); display: flex; flex-direction: row; align-items: stretch; /* Mobile: the whole bar is one horizontal scroller, so primary icons AND the secondary Imprint/Logout group scroll together (nothing is pinned). The submenu cards are position:fixed so they escape this clip and still open above the bar. */ overflow: auto hidden; scrollbar-width: none; -ms-overflow-style: none; } .app-shell > .app-nav::-webkit-scrollbar { display: none; } .app-shell > .app-page { margin-block: 1rem var(--app-nav-bar-height); inline-size: 100%; min-width: 0; overflow-y: auto; block-size: calc(100vh - var(--app-nav-bar-height) - 1rem); /* Warm light-grey canvas (mockup `main`); content panels/cards sit on top in white (--greyscale-100). */ background: var(--greyscale-200); /* Rounded panel corners; the shell gradient shows through the top-margin gap above the panel — the same inset-panel treatment the Login auth shell gives `.auth-content-wrapper` (gradient on top of the content). */ border-start-start-radius: 1rem; border-start-end-radius: 1rem; } /* Logo + collapse toggle + section labels are desktop-only chrome. */ .app-nav-logo-link, .app-nav-toggle-btn, .app-nav-section-label { display: none; } .app-nav-list { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.5rem; margin: 0; padding: 0.375rem 0.5rem; list-style: none; block-size: 100%; /* Mobile: lay out at natural width and let the parent `.app-nav` scroll the whole bar (icons + secondary) as one unit — so the list itself neither stretches to 100% nor owns a separate scrollbar. */ inline-size: auto; flex: 0 0 auto; overflow: visible; } .app-nav-item { list-style: none; flex-shrink: 0; } .app-nav-link { display: flex; align-items: center; justify-content: center; gap: 0.75rem; /* Mobile: fixed square icon targets. */ inline-size: 2.75rem; block-size: 2.75rem; flex-shrink: 0; padding: 0.5rem; border-radius: 0.5rem; color: var(--primary-100); fill: var(--primary-100); font-family: inherit; text-decoration: none; border: 2px solid transparent; background: transparent; cursor: pointer; position: relative; overflow: hidden; z-index: 1; transition: color 0.3s ease, fill 0.3s ease, font-weight 0.3s ease; } /* Hover/focus fill grows from the edge (mockup: scaleY on mobile). */ .app-nav-link::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--primary-700), oklch(from var(--primary-700) l c h / 70%)); border-radius: inherit; transform: scaleY(0); transform-origin: bottom center; transition: transform 0.3s ease-in-out; z-index: -1; } .app-nav-link:hover { color: var(--greyscale-100); fill: var(--greyscale-100); font-weight: 700; } .app-nav-link:hover::before { transform: scaleY(1); } .app-nav-link:is(:focus, :focus-visible) { outline: none; border: 2px solid var(--secondary-300); } /* Active route (aria-current="page"): white text + green accent, no hover fill. */ .app-nav-link[aria-current="page"] { color: var(--greyscale-100); fill: var(--greyscale-100); font-weight: 700; background: linear-gradient(0deg, var(--secondary-300), transparent 6%); } .app-nav-link[aria-current="page"]::before { display: none; } .app-nav-icon { inline-size: 1.75rem; block-size: 1.75rem; min-inline-size: 1.75rem; min-block-size: 1.75rem; aspect-ratio: 1; flex-shrink: 0; } .app-nav-text { display: none; white-space: nowrap; font-size: 1rem; line-height: 1.4; } /* Secondary nav (Imprint / Logout / context switch). Shown on every viewport: on the mobile bar the links render as icon-only buttons that scroll inside the shared `.app-nav` row (so Imprint and Logout stay reachable on phones and are NOT pinned); in the desktop sidebar they become a labelled row pinned to the bottom (see the desktop block below). */ .app-nav-secondary { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; margin: 0; padding: 0.375rem 0.5rem; flex: 0 0 auto; } /* Secondary links. Single base block (one previously split into two equal- specificity rules, where the second's primary-700 silently clobbered the mobile greyscale-100). Base = MOBILE: icon-button sized + greyscale-100 so the labels stay legible on the dark central section of the mobile gradient bar. The desktop >=40rem block overrides to auto size + primary-700 for the light sidebar. */ .app-nav-secondary-link { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.375rem; inline-size: 2.75rem; block-size: 2.75rem; flex-shrink: 0; margin: 0; padding: 0.5rem; color: var(--greyscale-100); fill: var(--greyscale-100); font-family: inherit; font-size: 0.875rem; text-decoration: none; border: 2px solid transparent; background: transparent; cursor: pointer; position: relative; overflow: hidden; transition: color 0.3s ease, fill 0.3s ease; } /* Moving underscore on hover (mirrors .auth-imprint-link). */ .app-nav-secondary-link::before { content: ''; position: absolute; inset-block-end: 0; inset-inline-start: 0; inline-size: 100%; block-size: 2px; border-block-end: 2px solid currentcolor; transform: scaleX(0); transform-origin: left center; transition: transform 0.3s ease-in-out; } .app-nav-secondary-link:hover::before { transform: scaleX(1); } .app-nav-secondary-link:is(:focus, :focus-visible) { outline: 2px solid var(--secondary-300); outline-offset: 2px; border-radius: 0.5rem; } .app-nav-icon-secondary { inline-size: 1.5rem; block-size: 1.5rem; aspect-ratio: 1; flex-shrink: 0; } /* The secondary icons reuse the shared icon factories, which hard-code the primary `app-nav-icon` (1.75rem) class on the