/* Copyright (c) 2026 Bc. Jan Krejčí. All rights reserved. Proprietary and confidential. See LICENSE in the project root. ───────────────────────────────────────────────────────────── FORGE — Universal Platform OS — Dashboard token vocabulary v2 Pure CSS custom properties + OKLCH colour space. Drives the new design system that supports runtime user customisation without a build step. See docs/design/ui-theming-architecture-v2.md. Source: Anthropic Claude Design handoff (2026-04). The vocabulary is adopted wholesale; this asset is opt-in via: in the consumer host's . Existing forge-ui-components.css stays the default — switch when migrating to the new visual system. ───────────────────────────────────────────────────────────── */ :root { /* Type */ --font-sans: "Outfit", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace; --font-display: "Outfit", "Söhne", -apple-system, sans-serif; /* Spacing scale (8pt) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; /* Radii */ --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-2xl: 28px; /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* High-quality "Linear-style" emphasised ease — used for the sidebar collapse so the rail glides into place instead of arriving with the standard ease-out dent. Pairs well with --t-collapse below. */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 140ms; --t-med: 240ms; --t-slow: 420ms; /* Sidebar collapse uses its own duration knob so it can be tuned without touching the global motion vocabulary. Slightly longer than --t-med so the labels have time to fade before the rail arrives. */ --t-collapse: 280ms; /* Layout */ --sidebar-w: 248px; --sidebar-collapsed-w: 64px; --header-h: 60px; --ai-w: 360px; /* Accent (violet) — overridable by tweaks */ --accent-h: 300; --accent-c: 0.14; --accent-l: 0.74; --accent: oklch(var(--accent-l) var(--accent-c) var(--accent-h)); --accent-soft: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.12); --accent-glow: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.35); /* Glass intensity (0-1) */ --glass: 0.6; /* ── Form inputs — single customisation surface for ALL inputs ── The `.forge-input`, `.forge-textarea`, `.forge-select` rules in forge-ui-components.css consume these. Override any of them in wwwroot/forge-tokens.css to reshape the form vocabulary across the entire app (e.g. set --input-radius: 0 for square inputs, set --input-label-style: floating to opt every .forge-field--floating wrapper into the animated-label pattern at the bottom of this file). */ --input-height: 36px; --input-radius: var(--r-md); --input-padding-x: var(--s-3); --input-padding-y: 0px; --input-bg: oklch(var(--accent-l) 0 0 / 0); /* transparent — let surface bleed through */ --input-bg-focus: oklch(var(--accent-l) 0 0 / 0); /* same — focus uses ring instead */ --input-border-width: 1px; --input-border: var(--line-strong); --input-border-focus: var(--accent); --input-shadow-focus: 0 0 0 3px var(--accent-soft); --input-text: var(--fg-1); --input-placeholder: var(--fg-4); --input-disabled-bg: oklch(var(--accent-l) 0 0 / 0.04); --input-disabled-text: var(--fg-4); --input-label-style: static; /* `static` (default) | `floating` */ --focus-ring-width: 3px; --focus-ring-color: var(--accent-soft); } /* ── DARK (default cinematic) ─────────────────────────────── */ [data-theme="dark"] { --bg-0: oklch(0.16 0.012 280); /* deepest */ --bg-1: oklch(0.185 0.013 280); /* page */ --bg-2: oklch(0.215 0.014 280); /* panel */ --bg-3: oklch(0.245 0.014 280); /* raised */ --bg-4: oklch(0.28 0.015 280); /* hover */ --surface-glass: oklch(0.22 0.014 280 / 0.55); --surface-glass-strong: oklch(0.235 0.014 280 / 0.75); --surface-elevated: oklch(0.235 0.014 280); --line: oklch(1 0 0 / 0.07); --line-strong: oklch(1 0 0 / 0.12); --line-accent: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.35); --fg-1: oklch(0.97 0.005 280); --fg-2: oklch(0.78 0.008 280); --fg-3: oklch(0.6 0.01 280); --fg-4: oklch(0.45 0.01 280); --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-md: 0 4px 16px rgb(0 0 0 / 0.35), 0 1px 3px rgb(0 0 0 / 0.4); --shadow-lg: 0 12px 40px rgb(0 0 0 / 0.45), 0 2px 6px rgb(0 0 0 / 0.5); --shadow-xl: 0 24px 60px rgb(0 0 0 / 0.55), 0 6px 12px rgb(0 0 0 / 0.4); --shadow-glow: 0 0 0 1px oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.25), 0 8px 32px oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.18); --grid-line: oklch(1 0 0 / 0.04); --ok: oklch(0.78 0.14 160); --warn: oklch(0.82 0.14 75); --bad: oklch(0.7 0.18 25); --info: oklch(0.78 0.13 235); } /* ── LIGHT (airy) ─────────────────────────────────────────── */ [data-theme="light"] { --bg-0: oklch(0.985 0.003 280); --bg-1: oklch(0.975 0.004 280); --bg-2: oklch(1 0 0); --bg-3: oklch(0.96 0.005 280); --bg-4: oklch(0.94 0.006 280); --surface-glass: oklch(1 0 0 / 0.7); --surface-glass-strong: oklch(1 0 0 / 0.85); --surface-elevated: oklch(1 0 0); --line: oklch(0 0 0 / 0.07); --line-strong: oklch(0 0 0 / 0.12); --line-accent: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.4); --fg-1: oklch(0.18 0.01 280); --fg-2: oklch(0.36 0.012 280); --fg-3: oklch(0.5 0.012 280); --fg-4: oklch(0.65 0.01 280); --shadow-sm: 0 1px 2px rgb(20 20 30 / 0.04); --shadow-md: 0 4px 16px rgb(20 20 30 / 0.06), 0 1px 3px rgb(20 20 30 / 0.05); --shadow-lg: 0 12px 40px rgb(20 20 30 / 0.08), 0 2px 6px rgb(20 20 30 / 0.05); --shadow-xl: 0 24px 60px rgb(20 20 30 / 0.12), 0 6px 12px rgb(20 20 30 / 0.06); --shadow-glow: 0 0 0 1px oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.3), 0 8px 32px oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.15); --grid-line: oklch(0 0 0 / 0.03); --ok: oklch(0.6 0.14 160); --warn: oklch(0.65 0.14 60); --bad: oklch(0.55 0.2 25); --info: oklch(0.55 0.15 235); } /* ─── Reset ─── */ * { box-sizing: border-box; } html, body, #root { margin: 0; padding: 0; height: 100%; } body { font-family: var(--font-sans); background: var(--bg-0); color: var(--fg-1); font-feature-settings: "ss01", "cv11", "tnum"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Body lock-up only applies when the dashboard shell (.app) is mounted — .app owns its own scroll context (sidebar + canvas have overflow:auto). Pages WITHOUT .app (public preview at /preview/{slug}, login screen, any future marketing/landing route) need the document scroll to work, so we leave body:overflow alone there. CSS :has() is supported in every browser we target (Safari 15.4+, Chrome 105+, Firefox 121+). */ body:has(.app) { overflow: hidden; height: 100%; } body:not(:has(.app)) { overflow-x: hidden; min-height: 100%; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } input, textarea { font: inherit; color: inherit; } ::selection { background: var(--accent-soft); color: var(--fg-1); } /* ─── App shell ─── */ .app { position: relative; height: 100vh; width: 100vw; display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: var(--header-h) 1fr; grid-template-areas: "side header" "side main"; background: var(--bg-1); transition: grid-template-columns var(--t-collapse) var(--ease-out-expo); overflow: hidden; } .app[data-collapsed="true"] { grid-template-columns: var(--sidebar-collapsed-w) 1fr; } /* Ambient glow backdrop */ .app::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(900px 600px at 18% 0%, oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.12), transparent 60%), radial-gradient(800px 500px at 95% 100%, oklch(0.7 0.12 235 / 0.08), transparent 55%); opacity: calc(var(--glass) * 1.1); transition: opacity var(--t-slow) var(--ease-out); } [data-theme="light"] .app::before { background: radial-gradient(900px 600px at 18% 0%, oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.08), transparent 60%), radial-gradient(800px 500px at 95% 100%, oklch(0.7 0.12 235 / 0.05), transparent 55%); } /* Subtle dot grid */ .app::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle at 1px 1px, var(--grid-line) 1px, transparent 0); background-size: 32px 32px; mask-image: radial-gradient(circle at 50% 40%, black 0%, transparent 75%); -webkit-mask-image: radial-gradient(circle at 50% 40%, black 0%, transparent 75%); opacity: 0.6; } /* ─── Sidebar ─── */ .sidebar { grid-area: side; position: relative; z-index: 5; border-right: 1px solid var(--line); background: var(--bg-1); display: flex; flex-direction: column; overflow: hidden; transition: width var(--t-collapse) var(--ease-out-expo); } /* Allow flyout tooltips to escape the rail when sidebar is collapsed. Inner children (brand-text / nav-label / sidebar-user .forge-row) all have their own `max-width: 0` collapse animation, so nothing else bleeds out when overflow is visible — only the .nav-flyout absolute-positioned span that's anchored next to each .nav-item. Without this rule the `[data-collapsed="true"]` parent clipped the flyout and the user saw no tooltip on hover-over icons in rail mode. */ [data-collapsed="true"] .sidebar { overflow: visible; } [data-collapsed="true"] .sidebar-nav { overflow: visible; } /* `forgeTheme.js` sets `data-sidebar-style` on `document.documentElement` (the root ), NOT on `.app` — so the previous `.app[data-sidebar- style="floating"]` selectors never matched and the user reported "boční panel nefunguje". The fix moves the attribute up one level: match `[data-sidebar-style="floating"] .app .sidebar` so the selector resolves regardless of whether the attribute ends up on or on the `.app` wrapper (server-side SSR mirroring sets a cookie that the `App.razor` bootstrap script reads onto , which is the canonical single source of truth). Same fix applies to `data-density` below. */ [data-sidebar-style="floating"] .app .sidebar { margin: 12px 0 12px 12px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface-glass-strong); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); box-shadow: var(--shadow-lg); height: calc(100vh - 24px); } [data-sidebar-style="floating"] .app { grid-template-columns: calc(var(--sidebar-w) + 12px) 1fr; } [data-sidebar-style="floating"] .app[data-collapsed="true"] { grid-template-columns: calc(var(--sidebar-collapsed-w) + 12px) 1fr; } /* Brand row at the top of the sidebar. Padding stays at `0 18px` in BOTH states — combined with `gap: 0` in rail mode and the brand-text fading to `max-width: 0`, the 28×28 brand-mark chip lands at exactly `(64 − 28) / 2 = 18 px` from each edge → visually centred in the rail without any padding-jump. The previous code reset padding to 0 and toggled `justify-content` to centre on collapse, which produced a visible left-then-right shuffle as `justify-content` snapped instantly while `padding` was still mid-transition. */ .brand { display: flex; align-items: center; gap: 10px; padding: 0 18px; height: var(--header-h); border-bottom: 1px solid var(--line); flex-shrink: 0; transition: gap var(--t-collapse) var(--ease-out-expo); } [data-collapsed="true"] .brand { gap: 0; } .brand-mark { width: 28px; height: 28px; border-radius: 8px; background: conic-gradient(from 210deg at 50% 50%, oklch(var(--accent-l) var(--accent-c) var(--accent-h)), oklch(0.7 0.12 235), oklch(var(--accent-l) var(--accent-c) var(--accent-h))); position: relative; flex-shrink: 0; display: grid; place-items: center; color: white; font-size: 14px; font-weight: 700; letter-spacing: -0.02em; box-shadow: 0 0 18px var(--accent-glow), inset 0 0 0 1px oklch(1 0 0 / 0.15); } .brand-mark::after { content: none; } .brand-mark::before { content: none; } .brand-text { display: flex; flex-direction: column; min-width: 0; overflow: hidden; /* Animate to invisible-and-zero-width on collapse. `max-width` collapses the layout slot smoothly, `opacity` carries the fade. The pair lets the icons-only rail land at exactly 64 px without any pop. */ max-width: 240px; opacity: 1; transition: opacity var(--t-fast) var(--ease-out), max-width var(--t-collapse) var(--ease-out-expo); } .brand-version { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); letter-spacing: 0.04em; white-space: nowrap; margin-top: 1px; } [data-collapsed="true"] .brand-text { opacity: 0; max-width: 0; pointer-events: none; } .sidebar-sep { height: 1px; background: var(--line); margin: 6px 14px; opacity: 0.6; } /* ── Nav group (expandable) — used by MainLayout's "Account management" parent in templates/forge-app. The summary row mirrors `.nav-item` so the collapsed-rail icon centres at the same 18 px gutter and the active highlight (any descendant route active) lights up the parent chip identically. The items area uses CSS-grid `0fr↔1fr` to animate open/close without `display:none` popping. ────────────────────────── */ .nav-group { padding: 0 6px; } .nav-group__summary { /* Inherit .nav-item visuals so chrome and hit-target match exactly. */ display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; margin-bottom: 1px; border-radius: 8px; border: 1px solid transparent; font-size: 13px; font-weight: 500; color: var(--fg-2); background: transparent; cursor: pointer; position: relative; white-space: nowrap; text-align: left; font-family: inherit; transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), padding var(--t-collapse) var(--ease-out-expo), gap var(--t-collapse) var(--ease-out-expo); } .nav-group__summary:hover { background: var(--bg-3); border-color: var(--line); color: var(--fg-1); } /* Highlight the summary ONLY when a descendant route is the active page — never just because the user has expanded the submenu. Older revs included `.nav-group.is-open` here, which made the parent stay highlighted after the user navigated to a sibling route (e.g. expanded "Account management", clicked Profile, then clicked "Inventory" in another group → both "Account management" AND "Inventory" lit up because the group still carried `is-open`). `:has(.active)` keeps the highlight tied to the actual active descendant only. */ .nav-group:has(.active) > .nav-group__summary { background: var(--accent-soft); border-color: var(--line-accent); color: var(--fg-1); } .nav-group:has(.active) > .nav-group__summary::before { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 56%; background: var(--accent); border-radius: 0 2px 2px 0; box-shadow: 0 0 8px var(--accent-glow); } [data-collapsed="true"] .nav-group:has(.active) > .nav-group__summary::before { display: none; } /* Reuse the .nav-icon chip styling for the summary's leading icon so the active state lights up the same way the regular .nav-item does. The summary's chevron is the trailing element. */ .nav-group__summary .nav-icon { /* Inherit .nav-icon size + shape from the global rule above. */ background: var(--bg-3); color: var(--fg-2); transition: background var(--t-fast), color var(--t-fast); } .nav-group__summary:hover .nav-icon { background: var(--bg-4); color: var(--fg-1); } .nav-group:has(.active) > .nav-group__summary .nav-icon { background: var(--accent-soft); color: var(--accent); } .nav-group__summary .nav-label { flex: 1; min-width: 0; max-width: 240px; opacity: 1; overflow: hidden; text-overflow: ellipsis; transition: color var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out), max-width var(--t-collapse) var(--ease-out-expo); } [data-collapsed="true"] .nav-group__summary { /* Collapse to icon-only, identical to .nav-item collapsed treatment. */ justify-content: center; padding: 9px; gap: 0; } [data-collapsed="true"] .nav-group__summary .nav-label, [data-collapsed="true"] .nav-group__summary .nav-group__chevron { opacity: 0; max-width: 0; pointer-events: none; } .nav-group__chevron { flex-shrink: 0; color: var(--fg-3); transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out), max-width var(--t-collapse) var(--ease-out-expo); } .nav-group.is-open > .nav-group__summary .nav-group__chevron { transform: rotate(180deg); color: var(--fg-1); } /* Items area — CSS Grid 0fr ↔ 1fr animates rows without display:none. */ .nav-group__items { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-fast) var(--ease-out); overflow: hidden; } .nav-group.is-open .nav-group__items { grid-template-rows: 1fr; } /* On collapsed rail there's no horizontal room for the children, so they fold away — the user must expand the rail (or click the parent which navigates them to the index page, see MainLayout.OnAccountClickAsync). */ [data-collapsed="true"] .nav-group__items { grid-template-rows: 0fr !important; } .nav-group__inner { min-height: 0; padding-left: 12px; /* indent sub-items so they read as children. */ padding-top: 2px; } [data-collapsed="true"] .nav-group__inner { padding-left: 0; } .brand-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; opacity: 1; transition: opacity var(--t-fast); } [data-collapsed="true"] .brand-name { opacity: 0; } .brand-meta { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); letter-spacing: 0.04em; white-space: nowrap; } [data-collapsed="true"] .brand-meta { display: none; } /* Project switcher */ .proj-switcher { margin: 14px 12px 8px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); position: relative; } .proj-switcher:hover { background: var(--bg-3); border-color: var(--line-strong); } .proj-switcher:active { transform: scale(0.99); } [data-collapsed="true"] .proj-switcher { margin: 14px 8px 8px; padding: 8px; justify-content: center; } .proj-avatar { width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg, oklch(0.65 0.16 30), oklch(0.55 0.18 350)); flex-shrink: 0; display: grid; place-items: center; color: white; font-size: 12px; font-weight: 600; box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.15); } .proj-info { flex: 1; min-width: 0; overflow: hidden; } [data-collapsed="true"] .proj-info, [data-collapsed="true"] .proj-chev { display: none; } .proj-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .proj-domain { font-size: 11px; color: var(--fg-3); font-family: var(--font-mono); letter-spacing: 0.02em; white-space: nowrap; } .proj-chev { color: var(--fg-3); flex-shrink: 0; } /* Project popover */ .proj-pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; background: var(--surface-elevated); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-xl); padding: 6px; animation: pop-in 180ms var(--ease-out); } @keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .proj-pop-item { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: var(--r-sm); cursor: pointer; transition: background var(--t-fast); } .proj-pop-item:hover { background: var(--bg-3); } .proj-pop-item.active { background: var(--accent-soft); } .proj-pop-item .proj-info { font-size: 12px; } .proj-pop-divider { height: 1px; background: var(--line); margin: 4px 0; } .proj-pop-action { display: flex; align-items: center; gap: 8px; padding: 8px; font-size: 12px; color: var(--fg-3); border-radius: var(--r-sm); cursor: pointer; } .proj-pop-action:hover { background: var(--bg-3); color: var(--fg-1); } /* Nav */ .nav { flex: 1; overflow-y: auto; padding: 8px 8px 12px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .nav::-webkit-scrollbar { width: 6px; } .nav::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; } /* Rail mode: drop overflow on .nav so the .nav-flyout hover labels can escape to the right of the sidebar. Per CSS spec, `overflow-y: auto` forces `overflow-x: auto` (visible isn't honoured in mixed direction), which clipped the flyout despite the parent `.sidebar` already being set to overflow: visible. Most apps have ≤ 15 top-level nav items — each is ~30 px in rail mode so total < 500 px, fits without scroll. Apps with very long menus can re-enable scroll by overriding `.nav` in their own stylesheet. */ [data-collapsed="true"] .nav { overflow: visible; } .nav-section { padding: 10px 10px 6px; font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-4); white-space: nowrap; overflow: hidden; position: relative; /* `max-height` animates alongside padding so the section heading collapses smoothly as part of the rail-mode transition. The previous code set `height: 0` directly which snapped instantly (height:auto → 0 doesn't animate without interpolate-size), causing every nav-item below to "jump up" by the section's line-height the moment the burger was clicked — visible as a small icon jiggle at the END of the rail animation. With max-height in the transition list, the section height collapses over the same 280 ms as the sidebar width. */ max-height: 40px; transition: padding var(--t-collapse) var(--ease-out-expo), text-align var(--t-collapse), max-height var(--t-collapse) var(--ease-out-expo); } .nav-section span { display: inline-block; opacity: 1; max-width: 240px; transition: opacity var(--t-fast) var(--ease-out), max-width var(--t-collapse) var(--ease-out-expo); } /* Collapsed rail — section heading hides completely. Modern apps (Linear / Vercel / Notion) just rely on whitespace + icon grouping for collapsed-rail section separation; we animate max-height + padding to 0 so the collapse feels smooth rather than snapping. */ [data-collapsed="true"] .nav-section { padding: 0; margin-top: 8px; max-height: 0; } [data-collapsed="true"] .nav-section span { opacity: 0; max-width: 0; pointer-events: none; } [data-collapsed="true"] .nav-section::after { display: none; } /* ── Nav item — ported from ManufactOS NavMenu ── */ .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin-bottom: 1px; border-radius: 8px; border: 1px solid transparent; font-size: 13px; color: var(--fg-2); cursor: pointer; position: relative; text-decoration: none; transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), padding var(--t-collapse) var(--ease-out-expo), gap var(--t-collapse) var(--ease-out-expo); white-space: nowrap; } [data-collapsed="true"] .nav-item { justify-content: center; padding: 9px; gap: 0; } .nav-item:hover { background: var(--bg-3); border-color: var(--line); color: var(--fg-1); } .nav-item.active { background: var(--accent-soft); border-color: var(--line-accent); color: var(--fg-1); } .nav-item.active::before { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 56%; background: var(--accent); border-radius: 0 2px 2px 0; box-shadow: 0 0 8px var(--accent-glow); } [data-collapsed="true"] .nav-item.active::before { display: none; } /* Icon: 28×28 rounded-square chip */ .nav-icon { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--bg-3); color: var(--fg-2); transition: background var(--t-fast), color var(--t-fast); } /* 16px (even number) — odd pixel sizes (15px / 17px) cause sub-pixel rounding during the rail-mode collapse transition: as the parent `.nav-icon` (28×28) and its container animate, a 15 px icon centred in 28 px sits at fractional pixels (28-15=13/2=6.5) and the browser snaps it to either 6 or 7 px on every frame. The visible result is a one-pixel jiggle right at the end of the animation. Even-pixel icons sit at integer offsets and stay rock-stable through the transition. */ .nav-icon svg { width: 16px !important; height: 16px !important; } .nav-item:hover .nav-icon { background: var(--bg-4); color: var(--fg-1); } .nav-item.active .nav-icon { background: var(--accent-soft); color: var(--accent); } .nav-label { flex: 1; font-size: 13px; font-weight: 500; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; /* Smooth-fade label + collapse layout slot to 0 px width concurrently with the sidebar narrowing. Replaces the old `display: none` which popped without animation. min-width: 0 is critical so flex:1 can shrink below content size. */ min-width: 0; max-width: 240px; opacity: 1; transition: color var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out), max-width var(--t-collapse) var(--ease-out-expo); } .nav-item:hover .nav-label, .nav-item.active .nav-label { color: var(--fg-1); } [data-collapsed="true"] .nav-label, [data-collapsed="true"] .nav-badge { opacity: 0; max-width: 0; pointer-events: none; } /* Collapsed-rail icon centring. The .nav-icon CONTAINER is 28×28 px (it wraps an 18 px SVG centred via place-items). To centre the 28 px container in a 64 px rail we need `(64 − 28) / 2 = 18 px` symmetrical padding. The previous value 23 px used the 18 px SVG width by mistake, which left the container at `x = 23 px → ends at 51 px`, asymmetrical with the right gutter of 13 px — visually a 5 px shift to the right that the eye registers as a jiggle right at the end of the collapse animation when the label width hits zero and the icon "settles". 18 px keeps the icon in the exact centre throughout. */ .nav-item { transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), padding var(--t-collapse) var(--ease-out-expo), gap var(--t-collapse) var(--ease-out-expo); } [data-collapsed="true"] .nav-item { gap: 0; padding: 9px 18px; } [data-collapsed="true"] .nav-icon { margin: 0; } .nav-badge { font-family: var(--font-mono); font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 10px; background: var(--bg-4); color: var(--fg-3); letter-spacing: 0.02em; /* Same fade pair as .nav-label so badges don't pop out separately. */ max-width: 80px; overflow: hidden; transition: opacity var(--t-fast) var(--ease-out), max-width var(--t-collapse) var(--ease-out-expo); } /* ── Hover-flyout tooltip for collapsed nav items ─────────────────────── */ /* When the sidebar is in rail mode, the labels are hidden but consumers still need to know what each icon does. .nav-flyout is rendered as a sibling span inside ForgeNavItem; CSS keeps it offscreen until the nav-item is hovered in collapsed mode, then slides it in next to the rail with a 240 ms delay so accidental cursor passes don't trigger it. */ .nav-flyout { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(-4px); padding: 6px 10px; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 12px; font-weight: 500; color: var(--fg-1); white-space: nowrap; box-shadow: 0 4px 14px rgb(0 0 0 / 0.35); pointer-events: none; opacity: 0; visibility: hidden; z-index: 100; transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out), visibility 0s 120ms; } [data-collapsed="true"] .nav-item:hover .nav-flyout, [data-collapsed="true"] .nav-item:focus-visible .nav-flyout { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); /* 120 ms delay — long enough that accidental cursor passes don't trigger the flyout, short enough that a deliberate hover feels responsive. (Was 240 ms; users complained the labels felt slow.) */ transition-delay: 120ms, 120ms, 0s; } /* Don't show flyouts on mobile (the drawer always shows full labels) or when the sidebar isn't collapsed (the inline label is already visible). */ .app:not([data-collapsed="true"]) .nav-flyout { display: none; } @media (max-width: 768px) { .nav-flyout { display: none !important; } } .nav-item.active .nav-badge { background: var(--accent-soft); color: var(--accent); } .nav-badge.accent { background: var(--accent-soft); color: var(--accent); } .sidebar-user { padding: 10px; border-top: 1px solid var(--line); flex-shrink: 0; transition: padding var(--t-collapse) var(--ease-out-expo); } [data-collapsed="true"] .sidebar-user { padding: 8px 6px; } /* When collapsed, anything in the footer that isn't an icon (display name, role, log-out text) fades and zero-widths so the rail finishes at exactly 64 px without orphan strings poking through. Consumer wraps text in for the same treatment on log-out buttons (matches the topbar pattern in ForgeTopBar). */ [data-collapsed="true"] .sidebar-user .forge-row { justify-content: center; } [data-collapsed="true"] .sidebar-user .forge-row > div:not(.forge-avatar) { opacity: 0; max-width: 0; overflow: hidden; pointer-events: none; } .sidebar-user .forge-row > div:not(.forge-avatar) { transition: opacity var(--t-fast) var(--ease-out), max-width var(--t-collapse) var(--ease-out-expo); max-width: 240px; } [data-collapsed="true"] .sidebar-user .forge-button .forge-button__label { display: none; } [data-collapsed="true"] .sidebar-user .forge-button { padding-left: 0 !important; padding-right: 0 !important; width: 36px; justify-content: center; } .sidebar-user .forge-button { transition: width var(--t-collapse) var(--ease-out-expo); } .user-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer; min-width: 0; transition: background var(--t-fast), padding var(--t-collapse) var(--ease-out-expo); } .user-row:hover { background: var(--bg-2); } [data-collapsed="true"] .user-row { justify-content: center; padding: 6px; } .user-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, oklch(0.7 0.14 200), oklch(0.6 0.16 320)); flex-shrink: 0; display: grid; place-items: center; color: white; font-size: 12px; font-weight: 600; box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.2); position: relative; } .user-avatar.online::after { content: ""; position: absolute; bottom: -1px; right: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); border: 2px solid var(--bg-1); } .user-info { min-width: 0; flex: 1; max-width: 240px; opacity: 1; overflow: hidden; transition: opacity var(--t-fast) var(--ease-out), max-width var(--t-collapse) var(--ease-out-expo); } [data-collapsed="true"] .user-info { opacity: 0; max-width: 0; pointer-events: none; } .user-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-role { font-size: 11px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-more { color: var(--fg-3); flex-shrink: 0; } /* Brand area: collapse button next to brand text */ .brand-text { flex: 1; min-width: 0; overflow: hidden; } .brand-collapse { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--fg-3); transition: background var(--t-fast), color var(--t-fast); flex-shrink: 0; } .brand-collapse:hover { background: var(--bg-3); color: var(--fg-1); } .icon-btn { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--fg-3); transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast); flex-shrink: 0; } .icon-btn:hover { background: var(--bg-3); color: var(--fg-1); } .icon-btn:active { transform: scale(0.94); } /* ─── Header (top app bar) ─── */ /* No bottom border — the previous 1px rule competed visually with toolbars in page-headers (Cards/Table switcher + "+ New todo" sit right under it when the page header is compact). Modern dashboards (Linear / Vercel / Notion) rely on background contrast + content gap instead, which feels cleaner. The top-bar's surface (--bg-1) is already a touch darker than the canvas (--bg-2), giving an implicit horizon. IMPORTANT: no `position: relative` + `z-index` here. Together those create a stacking context that traps the burger-button tooltip below the sidebar (sidebar has z-index: 5). With the header in static flow, tooltips with `z-index: 9999` participate in the .app stacking context directly and paint above the sidebar — visible across the rail edge instead of being clipped by it. */ .header { grid-area: header; display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-5); background: var(--bg-1); min-width: 0; } .header-left, .header-right { display: flex; align-items: center; gap: var(--s-2); } .header-left { flex-shrink: 0; } .header-right { margin-left: auto; min-width: 0; } /* New ForgeTopBar layout (replaces position:absolute centre slot which overlapped left/right under ~1100px and broke mobile UX). The centre is part of the flex row, takes the remaining space, and centres its child via justify-content. */ .forge-topbar__brand { display: flex; align-items: center; gap: 10px; min-width: 0; } .forge-topbar__center { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; padding: 0 var(--s-3); } .forge-topbar__center > * { width: 100%; max-width: 560px; } .forge-topbar__sidebar-toggle { flex-shrink: 0; } /* Sidebar-toggle icon swap. Defaults to the desktop-expanded icon (panel-left-close = "collapse the side panel"); collapsed and mobile variants are layered in the DOM and revealed by the corresponding state. */ .forge-topbar__toggle-icon { display: none; } .forge-topbar__toggle-icon--expanded { display: inline-block; } .app[data-collapsed="true"] .forge-topbar__toggle-icon--expanded { display: none; } .app[data-collapsed="true"] .forge-topbar__toggle-icon--collapsed { display: inline-block; } .hist-nav { display: flex; align-items: center; gap: 6px; } .hist-btn { width: 30px !important; height: 30px !important; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); } .hist-btn:hover { background: var(--bg-4); } .hist-refresh { width: 30px !important; height: 30px !important; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); } .hist-refresh:hover { background: var(--bg-4); } .header-divider { width: 1px; height: 22px; background: var(--line); margin: 0 4px; } .crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-3); white-space: nowrap; overflow: hidden; } .crumbs .sep { color: var(--fg-4); } .crumbs .current { color: var(--fg-1); font-weight: 500; } /* ─── Global Search (header centered, dropdown below) ─── */ .gs-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, 42vw); z-index: 50; } .gs-input { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-2); color: var(--fg-3); cursor: text; transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast); } .gs-input:hover { border-color: var(--line-strong); background: var(--bg-3); } .gs-input.focused { border-color: var(--line-accent); background: var(--bg-2); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md); } .gs-input > svg { color: var(--fg-3); flex-shrink: 0; } .gs-input.focused > svg { color: var(--accent); } .gs-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--fg-1); } .gs-input input::placeholder { color: var(--fg-3); } .gs-kbd { display: inline-flex; gap: 3px; flex-shrink: 0; } .gs-kbd span { font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; border-radius: 4px; background: var(--bg-3); border: 1px solid var(--line); color: var(--fg-3); letter-spacing: 0.04em; } /* Dropdown */ .gs-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--surface-elevated); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-xl); overflow: hidden; opacity: 1; animation: gs-pop 180ms var(--ease-out); display: flex; flex-direction: column; max-height: min(560px, calc(100vh - 100px)); z-index: 100; } @keyframes gs-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .gs-scroll { flex: 1; overflow-y: auto; padding: 10px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .gs-scroll::-webkit-scrollbar { width: 6px; } .gs-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; } .gs-hint { font-size: 12px; color: var(--fg-3); padding: 10px 12px; margin-bottom: 8px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); line-height: 1.5; } .gs-hint strong { color: var(--fg-1); font-weight: 500; } .gs-group { margin-bottom: 10px; } .gs-group:last-child { margin-bottom: 0; } .gs-group-title { font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-4); padding: 6px 10px 6px; display: flex; align-items: center; gap: 8px; } .gs-group-count { margin-left: auto; font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--bg-3); color: var(--fg-3); letter-spacing: 0.02em; } .gs-quick-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px 6px; } .gs-quick-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); color: var(--fg-2); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); } .gs-quick-chip:hover { border-color: var(--line-accent); background: var(--bg-3); color: var(--fg-1); } .gs-item { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 10px 10px; border-radius: var(--r-sm); cursor: pointer; transition: background var(--t-fast); } .gs-item:hover { background: var(--bg-3); } .gs-avatar { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--fg-1); background: var(--bg-3); flex-shrink: 0; } .gs-avatar.v-teal { background: oklch(0.65 0.13 180 / 0.18); color: oklch(0.78 0.14 180); } .gs-avatar.v-violet { background: var(--accent-soft); color: var(--accent); } .gs-avatar.v-amber { background: oklch(0.7 0.15 70 / 0.18); color: oklch(0.78 0.16 70); } .gs-avatar.v-blue { background: oklch(0.65 0.13 235 / 0.18); color: oklch(0.78 0.13 235); } .gs-avatar.v-muted { background: var(--bg-3); color: var(--fg-3); } .gs-avatar-emp { background: linear-gradient(135deg, oklch(0.65 0.14 280), oklch(0.55 0.16 220)); color: white; } .gs-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .gs-top-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .gs-name { font-size: 13px; font-weight: 500; color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; } .gs-code { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.02em; flex-shrink: 0; } .gs-meta-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 11px; color: var(--fg-3); } .gs-meta-item { color: var(--fg-3); } .gs-meta-item strong { color: var(--fg-2); font-weight: 500; } .gs-meta-red { color: oklch(0.7 0.18 25); } .gs-meta-amber { color: oklch(0.78 0.16 70); } .gs-meta-blue { color: oklch(0.78 0.13 235); } .gs-meta-green { color: var(--ok); } .gs-meta-violet { color: var(--accent); } .gs-locations, .gs-space-contents { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; } .gs-loc, .gs-space-pill { font-family: var(--font-mono); font-size: 10px; padding: 2px 7px; border-radius: 999px; background: var(--bg-3); color: var(--fg-3); letter-spacing: 0.02em; white-space: nowrap; } .gs-loc strong, .gs-space-pill strong { color: var(--fg-1); font-weight: 500; } .gs-qty { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; } .gs-qty-val { font-family: var(--font-display); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .gs-qty-unit { font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); } .gs-qty-low { color: oklch(0.7 0.18 25); } .gs-qty-ok { color: var(--fg-1); } .gs-qty-red { color: oklch(0.7 0.18 25); } .gs-qty-amber { color: oklch(0.78 0.16 70); } .gs-qty-blue { color: oklch(0.78 0.13 235); } .gs-show-more { font-size: 12px; color: var(--accent); padding: 8px 10px; cursor: pointer; border-radius: var(--r-sm); } .gs-show-more:hover { background: var(--accent-soft); } .gs-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 36px 16px; text-align: center; } .gs-empty-icon { font-size: 28px; color: var(--fg-4); margin-bottom: 4px; } .gs-empty-title { font-size: 14px; font-weight: 500; color: var(--fg-1); } .gs-empty-sub { font-size: 12px; color: var(--fg-3); } .gs-footer { flex-shrink: 0; display: flex; gap: 16px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 10px; font-family: var(--font-mono); color: var(--fg-4); letter-spacing: 0.06em; text-transform: uppercase; } .gs-footer span { display: inline-flex; align-items: center; gap: 6px; } .gsf-kbd { display: inline-grid; place-items: center; min-width: 18px; height: 16px; padding: 0 4px; font-size: 10px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 3px; color: var(--fg-3); } /* Highlight in results */ .gs-hl, .gs-results mark { background: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.25); color: var(--fg-1); padding: 0 2px; border-radius: 3px; } .search { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, 40vw); display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-2); color: var(--fg-3); cursor: text; transition: border-color var(--t-fast), background var(--t-fast); } .search:hover { border-color: var(--line-strong); background: var(--bg-3); } .search-text { font-size: 13px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kbd { font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; border-radius: 4px; background: var(--bg-3); border: 1px solid var(--line); color: var(--fg-3); letter-spacing: 0.04em; flex-shrink: 0; } .header-right .icon-btn { width: 36px; height: 36px; } .icon-btn .dot { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); } .theme-toggle { display: flex; align-items: center; padding: 3px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; } .theme-toggle button { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; color: var(--fg-3); transition: background var(--t-fast), color var(--t-fast); } .theme-toggle button.active, /* CSS-driven active state from html[data-theme]. Eliminates the SSR/hydration flash that the .active class caused (server rendered _isDark default, client flipped after JS read localStorage → mismatched icon highlighted for ~80–250 ms). With this rule the active button tracks the html attribute that App.razor sets server-side from the forge-theme cookie. */ html[data-theme="light"] .theme-toggle button[data-theme-target="light"], html[data-theme="dark"] .theme-toggle button[data-theme-target="dark"] { background: var(--bg-4); color: var(--fg-1); box-shadow: var(--shadow-sm); } /* ─── Main / Workspace ─── */ .workspace { /* No `z-index` here. `position: relative; z-index: 1` would create a stacking context that traps any `position: fixed` overlay inside the workspace UNDER the sidebar (sidebar lives in the .app stacking context with z-index: 5; workspace's stacking context would resolve at z-index: 1, so even a child with z-index: 9999 could not beat the sidebar). The mobile sidebar drawer overlay still works because the @media block at the bottom of this file sets z-index: 200 directly on .sidebar at small viewports — workspace's relative-but-no-z-index doesn't compete with that. */ grid-area: main; position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; min-width: 0; } .canvas { overflow-y: auto; padding: var(--s-6) var(--s-8); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; scroll-behavior: smooth; } .canvas::-webkit-scrollbar { width: 8px; } .canvas::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; } .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6); margin-bottom: var(--s-6); } .page-title { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -0.025em; margin: 0 0 4px; } .page-sub { font-size: 13px; color: var(--fg-3); } .page-sub .accent-text { color: var(--accent); } /* Tab bar */ .tabs { display: flex; align-items: center; gap: 2px; padding: 3px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); } .tab { padding: 6px 12px; font-size: 12px; color: var(--fg-3); border-radius: var(--r-sm); cursor: pointer; transition: color var(--t-fast), background var(--t-fast); white-space: nowrap; } .tab:hover { color: var(--fg-1); } .tab.active { background: var(--bg-4); color: var(--fg-1); box-shadow: var(--shadow-sm); } /* ─── Modular grid ─── */ .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-4); padding-bottom: var(--s-12); } /* Density tier — `forgeTheme.js` writes `data-density` to , so selectors match on the root, not on `.app`. The two `gap` overrides below adjust the global grid spacing; consumer components honour density by reading the same CSS custom properties from the cascade. Future expansion: add table-row, card-padding, list-item-height tiers driven by the same attribute. */ [data-density="dense"] .grid { gap: var(--s-3); } [data-density="sparse"] .grid { gap: var(--s-6); } [data-density="dense"] { --density-padding-y: 4px; --density-padding-x: 8px; --density-row-height: 32px; --density-input-height: 30px; --density-card-padding: 12px; } [data-density="balanced"] { --density-padding-y: 6px; --density-padding-x: 10px; --density-row-height: 40px; --density-input-height: 36px; --density-card-padding: 16px; } [data-density="sparse"] { --density-padding-y: 10px; --density-padding-x: 14px; --density-row-height: 48px; --density-input-height: 42px; --density-card-padding: 24px; } .module { position: relative; background: var(--surface-elevated); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); display: flex; flex-direction: column; min-width: 0; transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), border-color var(--t-fast); overflow: hidden; } .module::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, oklch(1 0 0 / 0.04) 0%, transparent 30%), radial-gradient(120% 80% at 50% -20%, oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.06), transparent 60%); opacity: var(--glass); } [data-theme="light"] .module::before { background: linear-gradient(180deg, oklch(1 0 0 / 0.6) 0%, transparent 30%), radial-gradient(120% 80% at 50% -20%, oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.04), transparent 60%); } .module:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); } .module:focus-within { border-color: var(--line-accent); box-shadow: var(--shadow-glow); } .mod-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s-3); position: relative; z-index: 2; } .mod-title { font-size: 12px; font-family: var(--font-mono); color: var(--fg-3); letter-spacing: 0.04em; text-transform: uppercase; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mod-actions { display: flex; gap: 2px; } .mod-actions .icon-btn { width: 26px; height: 26px; color: var(--fg-3); } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-12 { grid-column: span 12; } @media (max-width: 1400px) { .col-3 { grid-column: span 6; } .col-4 { grid-column: span 6; } .col-5 { grid-column: span 6; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 12; } .col-8 { grid-column: span 12; } .col-9 { grid-column: span 12; } } @media (max-width: 1100px) { .crumbs { display: none; } .search { max-width: 320px; } } @media (max-width: 1000px) { .search-text { display: none; } } /* ─────────────── MOBILE / TABLET (≤ 768px) ─────────────── */ @media (max-width: 768px) { :root { --header-h: 56px; --sidebar-w: 280px; } /* App becomes single column; sidebar slides in over content */ .app { grid-template-columns: 0 1fr !important; grid-template-areas: "header header" "main main"; } .app[data-collapsed="true"] { grid-template-columns: 0 1fr !important; } /* Sidebar = mobile drawer, hidden by default */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; z-index: 200; transform: translateX(-100%); transition: transform var(--t-med) var(--ease-out); box-shadow: 0 0 60px rgba(0,0,0,0.6); } .app[data-mobile-open="true"] .sidebar { transform: translateX(0); } /* Backdrop when drawer open */ .mobile-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 199; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fade-in 200ms var(--ease-out); } /* On mobile, force-show labels even if data-collapsed=true */ .sidebar .nav-label, .sidebar .nav-badge, .sidebar .nav-section span, .sidebar .brand-name, .sidebar .brand-meta, .sidebar .proj-info, .sidebar .proj-chev, .sidebar .user-info { display: revert !important; opacity: 1 !important; } .sidebar .nav-item { justify-content: flex-start !important; padding: 8px 12px !important; } .sidebar .proj-switcher { margin: 14px 12px 8px !important; padding: 10px 12px !important; justify-content: flex-start !important; } .sidebar .nav-section { padding: 14px 12px 6px !important; text-align: left !important; } .sidebar .nav-section::after { display: none !important; } .sidebar .icon-btn.collapse { display: grid !important; } /* Floating sidebar style overrides */ [data-sidebar-style="floating"] .app { grid-template-columns: 0 1fr !important; } [data-sidebar-style="floating"] .app .sidebar { margin: 0; height: 100vh; border-radius: 0; border-right: 1px solid var(--line); border-top: 0; border-bottom: 0; border-left: 0; } /* Header: tight, no centered search */ .header { padding: 0 12px; gap: 8px; } .header-divider { display: none; } .hist-nav { display: none; } .crumbs { display: none; } /* New top-bar centre slot (search) is hidden on mobile to prioritise the brand + drawer toggle + auth/avatar. Power users still get Ctrl+K via keyboard. Consumers can opt back in by overriding `.forge-topbar__center`. */ .forge-topbar__center { display: none; } /* Mobile: classic three-line hamburger replaces the panel-left-close/open icons (which are a desktop convention). Forced — overrides the .app[data-collapsed=true] rule above so the burger stays the same on mobile regardless of the persisted desktop collapsed-rail preference. */ .forge-topbar__toggle-icon--expanded, .forge-topbar__toggle-icon--collapsed { display: none !important; } .forge-topbar__toggle-icon--mobile { display: inline-block !important; } /* Brand on mobile: keep the mark + name compact, drop the subtitle so it never wraps the header into two lines. */ .forge-topbar__brand .brand-version, .forge-topbar__brand .brand-meta { display: none; } /* Mobile top bar UX rules: 1. Buttons that ship optional text labels (Sign in, Refresh, Back) collapse to icon-only — `.forge-button__label` is the canonical label-span class consumers wrap their text in. The icon (svg) stays visible at 36 px. 2. Smaller icon buttons (.icon-btn) shrink to 36 px so eight items don't fight for 360 px of viewport width. 3. Theme toggle stays — explicit affordance, but smaller. */ .header-right .forge-button .forge-button__label { display: none; } .header-right .forge-button { padding-left: 8px !important; padding-right: 8px !important; width: 36px; height: 36px; justify-content: center; } .header-right .icon-btn { width: 36px; height: 36px; } .theme-toggle { padding: 1px; } .theme-toggle button { width: 30px; height: 30px; } /* Auth avatar fallback — keep, but constrain. */ .header-right .forge-avatar { flex-shrink: 0; } /* Search */ .gs-wrap { position: static; transform: none; width: auto; flex: 1; } .gs-input { padding: 7px 10px; } .gs-input input { font-size: 14px; } .gs-kbd { display: none; } .gs-results { position: fixed; top: var(--header-h); left: 8px; right: 8px; max-height: calc(100vh - var(--header-h) - 16px); border-radius: var(--r-md); } .header-right { gap: 4px; } .header-right .btn.primary { display: none; } .theme-toggle { display: none; } .header-right .icon-btn { width: 36px; height: 36px; } .notif-pop { position: fixed; top: var(--header-h); left: 8px; right: 8px; width: auto; } .workspace { grid-template-columns: 1fr; } .canvas { padding: 16px 12px 80px; } .page-header { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 16px; } .page-title { font-size: 22px !important; } .tabs { width: 100%; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .grid { grid-template-columns: repeat(1, 1fr) !important; gap: 12px !important; } .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-12 { grid-column: span 1 !important; } .module { padding: 16px; } .kpi-value { font-size: 26px; } .chart-wrap { height: 220px !important; } .ai-rail { position: fixed; top: var(--header-h); right: 0; bottom: 0; width: 100%; border-left: 0; z-index: 150; box-shadow: -4px 0 30px rgba(0,0,0,0.4); } .ai-rail[data-open="false"] { transform: translateX(100%); width: 100%; opacity: 0; pointer-events: none; } .queue { overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 0 16px; } .queue-row { grid-template-columns: 1.4fr 1fr 0.8fr; gap: 8px; font-size: 12px; min-width: 380px; } .queue-row > *:nth-child(4), .queue-row > *:nth-child(5) { display: none; } .feed-time { font-size: 10px; } .dock { grid-template-columns: repeat(2, 1fr); } .status-row { grid-template-columns: 1fr auto; gap: 8px; } .status-bar { display: none; } } @media (max-width: 420px) { .canvas { padding: 12px 10px 80px; } .module { padding: 14px; } .page-title { font-size: 20px !important; } .kpi-value { font-size: 24px; } .header { padding: 0 8px; } .dock { grid-template-columns: 1fr 1fr; } } /* ─── KPI Card ─── */ .kpi { position: relative; z-index: 2; } .kpi-row { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; } .kpi-value { font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .kpi-unit { font-size: 13px; color: var(--fg-3); font-family: var(--font-mono); } .kpi-delta { margin-left: auto; font-family: var(--font-mono); font-size: 11px; padding: 3px 7px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; } .kpi-delta.up { color: var(--ok); background: oklch(0.78 0.14 160 / 0.1); } .kpi-delta.down { color: var(--bad); background: oklch(0.7 0.18 25 / 0.1); } .kpi-spark { margin-top: 12px; height: 40px; width: 100%; } .kpi-foot { margin-top: 8px; font-size: 11px; color: var(--fg-4); font-family: var(--font-mono); letter-spacing: 0.02em; } /* ─── Big chart ─── */ .chart-wrap { position: relative; z-index: 2; margin-top: 8px; height: 280px; width: 100%; } .chart-legend { display: flex; gap: 18px; margin-top: 4px; font-size: 11px; font-family: var(--font-mono); color: var(--fg-3); letter-spacing: 0.02em; } .legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; } /* Range pills */ .range-pills { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px; } .range-pill { font-family: var(--font-mono); font-size: 11px; padding: 4px 10px; border-radius: 5px; color: var(--fg-3); cursor: pointer; } .range-pill.active { background: var(--bg-4); color: var(--fg-1); } /* ─── Activity feed: MOVED to ForgeActivityFeed (Krejci.Forge.UI.Components) ─── * * The dashboard's .feed / .feed-item / .feed-icon / .feed-text / .feed-time * selectors were superseded by on 2026-05-16. The * realtime widget brings the same visual rhythm AND adds: new-entry * highlight, mute toggle, OnNewEntry chime hook, role="feed" + aria-live * for screen readers, ForgeBadgeVariant-driven marker dot colour, relative * time formatting per CultureInfo, deterministic seen-set so first render * doesn't chime for everything. * * Migration playbook for the rest of the dashboard (Strategy B in * docs/ai/bundle-size-and-tree-shaking.md): when a custom .module child * widget gets re-used >= 2 places OR needs realtime / a11y polish, * promote it into a Forge component and delete the raw selectors here. */ /* ─── System status ─── */ .status-list { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .status-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13px; } .status-row:last-child { border-bottom: 0; } .status-name { display: flex; align-items: center; gap: 10px; } .status-pulse { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; position: relative; } .status-pulse.ok { background: var(--ok); } .status-pulse.warn { background: var(--warn); } .status-pulse.bad { background: var(--bad); } .status-pulse.ok::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--ok); opacity: 0.5; animation: pulse 2s var(--ease-out) infinite; } @keyframes pulse { 0% { transform: scale(0.8); opacity: 0.7; } 100% { transform: scale(1.8); opacity: 0; } } .status-meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); } .status-bar { width: 80px; height: 4px; background: var(--bg-3); border-radius: 2px; overflow: hidden; } .status-bar > i { display: block; height: 100%; background: var(--accent); border-radius: inherit; } .status-bar > i.ok { background: var(--ok); } .status-bar > i.warn { background: var(--warn); } .status-bar > i.bad { background: var(--bad); } /* ─── Quick actions dock ─── */ .dock { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 4px; } .dock-item { display: flex; flex-direction: column; gap: 8px; padding: 14px 10px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast); text-align: left; } .dock-item:hover { transform: translateY(-2px); border-color: var(--line-accent); background: var(--bg-3); } .dock-icon { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); } .dock-label { font-size: 12px; font-weight: 500; } .dock-hint { font-size: 11px; color: var(--fg-4); font-family: var(--font-mono); } /* ─── Queue / table ─── */ .queue { position: relative; z-index: 2; margin-top: 4px; display: flex; flex-direction: column; gap: 2px; } .queue-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 0.7fr 0.7fr; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); font-size: 13px; align-items: center; transition: background var(--t-fast); cursor: pointer; } .queue-row.head { font-size: 10px; font-family: var(--font-mono); color: var(--fg-4); text-transform: uppercase; letter-spacing: 0.08em; cursor: default; padding: 6px 4px; } .queue-row:not(.head):hover { background: var(--bg-2); } .queue-row .cell-id { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); } .queue-row .cell-title { color: var(--fg-1); font-weight: 500; } .pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; white-space: nowrap; } .pill.ok { background: oklch(0.78 0.14 160 / 0.12); color: var(--ok); } .pill.warn { background: oklch(0.82 0.14 75 / 0.12); color: var(--warn); } .pill.info { background: var(--accent-soft); color: var(--accent); } .pill.muted { background: var(--bg-3); color: var(--fg-3); } .pill .dot-sm { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } /* ─── AI Rail ─── */ .ai-rail { width: var(--ai-w); max-width: 40vw; flex-shrink: 0; border-left: 1px solid var(--line); background: var(--bg-1); display: flex; flex-direction: column; position: relative; transition: width var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-out); overflow: hidden; } .ai-rail[data-open="false"] { width: 0; opacity: 0; border-left-color: transparent; } .ai-head { padding: 14px 18px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .ai-orb { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, oklch(0.95 0.1 var(--accent-h)), oklch(var(--accent-l) var(--accent-c) var(--accent-h)) 60%, oklch(0.4 0.1 var(--accent-h))); box-shadow: 0 0 14px var(--accent-glow), inset 0 0 0 1px oklch(1 0 0 / 0.2); position: relative; flex-shrink: 0; } .ai-orb::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.4); animation: orb-pulse 2.4s var(--ease-out) infinite; } @keyframes orb-pulse { 0% { transform: scale(0.9); opacity: 0.6; } 100% { transform: scale(1.5); opacity: 0; } } .ai-title { font-size: 13px; font-weight: 500; } .ai-status { font-size: 11px; color: var(--fg-3); font-family: var(--font-mono); } .ai-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 16px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .ai-msg { display: flex; flex-direction: column; gap: 6px; } .ai-msg .who { font-size: 10px; font-family: var(--font-mono); color: var(--fg-4); letter-spacing: 0.06em; text-transform: uppercase; } .ai-bubble { font-size: 13px; line-height: 1.55; color: var(--fg-1); padding: 12px 14px; border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--line); } .ai-bubble.user { background: var(--accent-soft); border-color: var(--line-accent); color: var(--fg-1); align-self: flex-end; max-width: 90%; } .ai-bubble strong { color: var(--accent); font-weight: 500; } .ai-bubble .insight { margin-top: 8px; padding: 10px; background: var(--bg-1); border-radius: var(--r-sm); border: 1px dashed var(--line); display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); } .ai-suggestions { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; } .ai-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-2); color: var(--fg-2); cursor: pointer; text-align: left; width: 100%; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); } .ai-chip:hover { border-color: var(--line-accent); background: var(--bg-3); color: var(--fg-1); } .ai-chip svg { color: var(--accent); flex-shrink: 0; } .ai-foot { padding: 12px; border-top: 1px solid var(--line); flex-shrink: 0; } .ai-input-wrap { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-2); transition: border-color var(--t-fast); } .ai-input-wrap:focus-within { border-color: var(--line-accent); } .ai-input { flex: 1; outline: 0; border: 0; background: transparent; font-size: 13px; } .ai-send { width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--accent); color: white; display: grid; place-items: center; transition: transform var(--t-fast), filter var(--t-fast); } .ai-send:hover { filter: brightness(1.08); transform: scale(1.04); } /* ─── Command palette ─── */ .cmd-overlay { position: fixed; inset: 0; z-index: 60; background: oklch(0.1 0.01 280 / 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; place-items: start center; padding-top: 12vh; animation: fade-in 180ms var(--ease-out); } [data-theme="light"] .cmd-overlay { background: oklch(0.92 0.01 280 / 0.55); } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .cmd { width: min(640px, calc(100vw - 32px)); background: var(--surface-elevated); border: 1px solid var(--line-strong); border-radius: var(--r-xl); box-shadow: var(--shadow-xl); overflow: hidden; animation: cmd-in 220ms var(--ease-spring); } @keyframes cmd-in { from { opacity: 0; transform: translateY(-12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .cmd-input { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); } .cmd-input input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--fg-1); } .cmd-input input::placeholder { color: var(--fg-4); } .cmd-list { max-height: 360px; overflow-y: auto; padding: 8px; } .cmd-section { font-size: 10px; font-family: var(--font-mono); color: var(--fg-4); letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 12px 4px; } .cmd-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer; font-size: 13px; color: var(--fg-2); transition: background var(--t-fast), color var(--t-fast); } .cmd-item.active { background: var(--bg-3); color: var(--fg-1); } .cmd-item.active .cmd-shortcut { color: var(--fg-2); } .cmd-icon { width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--bg-3); display: grid; place-items: center; color: var(--fg-2); } .cmd-item.active .cmd-icon { background: var(--accent-soft); color: var(--accent); } .cmd-label { flex: 1; } .cmd-shortcut { font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); letter-spacing: 0.04em; } .cmd-foot { display: flex; justify-content: space-between; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 10px; font-family: var(--font-mono); color: var(--fg-4); letter-spacing: 0.06em; } /* ─── Notifications popover ─── */ .notif-pop { position: absolute; top: calc(100% + 8px); right: 0; width: 360px; background: var(--surface-elevated); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-xl); overflow: hidden; z-index: 50; animation: pop-in 200ms var(--ease-out); } .notif-head { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); } .notif-head h4 { margin: 0; font-size: 13px; font-weight: 500; } .notif-head .clear { font-size: 11px; color: var(--fg-3); cursor: pointer; } .notif-head .clear:hover { color: var(--accent); } .notif-list { max-height: 380px; overflow-y: auto; padding: 6px; } .notif-item { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 10px; border-radius: var(--r-sm); cursor: pointer; transition: background var(--t-fast); } .notif-item:hover { background: var(--bg-3); } .notif-item.unread { background: var(--accent-soft); } .notif-item.unread:hover { background: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.18); } .notif-text { font-size: 13px; line-height: 1.4; } .notif-meta { font-size: 11px; color: var(--fg-4); font-family: var(--font-mono); margin-top: 2px; } /* ─── Marketplace panel (floating context) ─── */ .context-panel { position: absolute; top: 80px; right: 24px; width: 320px; background: var(--surface-glass-strong); border: 1px solid var(--line-strong); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border-radius: var(--r-lg); box-shadow: var(--shadow-xl); padding: 16px; z-index: 30; animation: pop-in 240ms var(--ease-out); } /* ─── Misc ─── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-sm); font-size: 13px; font-weight: 500; cursor: pointer; transition: background var(--t-fast), transform var(--t-fast), border-color var(--t-fast); } .btn.primary { background: var(--accent); color: white; box-shadow: 0 4px 14px var(--accent-glow); } .btn.primary:hover { filter: brightness(1.08); } .btn.primary:active { transform: scale(0.98); } .btn.ghost { background: var(--bg-2); border: 1px solid var(--line); color: var(--fg-2); } .btn.ghost:hover { background: var(--bg-3); color: var(--fg-1); } /* Module 'expand' arrow */ .mod-expand { margin-left: auto; font-size: 11px; color: var(--fg-3); display: inline-flex; align-items: center; gap: 4px; transition: color var(--t-fast), gap var(--t-fast); cursor: pointer; } .mod-expand:hover { color: var(--accent); gap: 6px; } /* Subtle reveal animation for grid items */ .module { animation: rise 480ms var(--ease-out) backwards; } .module:nth-child(1) { animation-delay: 30ms; } .module:nth-child(2) { animation-delay: 60ms; } .module:nth-child(3) { animation-delay: 90ms; } .module:nth-child(4) { animation-delay: 120ms; } .module:nth-child(5) { animation-delay: 150ms; } .module:nth-child(6) { animation-delay: 180ms; } .module:nth-child(7) { animation-delay: 210ms; } .module:nth-child(8) { animation-delay: 240ms; } @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Accessibility */ *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); } /* ------------------------------------------------------------------------- */ /* Visual-effects respect — flattens decorative blur/shadow/gradient when */ /* user chose "Minimal" or "Balanced" in the Appearance panel. */ /* */ /* data-effects="minimal" → all decorative CSS effects flatten: */ /* - backdrop-filter (glass) → none */ /* - box-shadow (decorative) → none */ /* - linear-gradient backgrounds → solid color */ /* */ /* data-effects="balanced" → soft shadows kept, no blur: */ /* - backdrop-filter → none */ /* - shadows + gradients keep */ /* */ /* data-effects="auto" (default when unset) follows OS prefers-* hints: */ /* - @media (prefers-reduced-transparency: reduce) → strip transparency */ /* */ /* Components MUST drive expensive decoration through these gates so users */ /* can opt out on older devices. Use `var(--effects-shadow-*)` tokens that */ /* this section overrides, OR scope your CSS with these attribute selectors. */ /* ------------------------------------------------------------------------- */ :root[data-effects="minimal"] { --shadow-color: transparent; --shadow-color-strong: transparent; } :root[data-effects="minimal"] * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } :root[data-effects="balanced"] * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } @media (prefers-reduced-transparency: reduce) { :root:not([data-effects="full"]) * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } /* ------------------------------------------------------------------------- */ /* Unified theme-switch transition. */ /* */ /* PROBLEM this solves: components carry their own `transition: background */ /* var(--motion-duration*)` rules, so when the theme flips (light↔dark) they */ /* fade their colours over ~200 ms. The page background, shell, sidebar, */ /* top-bar and menu-icon backgrounds had NO such transition, so they SNAPPED */ /* instantly — the chrome jumped while the components lagged, which reads as */ /* a flicker / "some things switch now, some take a beat". */ /* */ /* FIX: forgeTheme.js adds `.forge-theme-anim` to for one motion */ /* window whenever it applies a theme/accent/density/effects change, then */ /* removes it. While present, EVERY element (chrome + components alike) */ /* animates its colour / background / border / fill / stroke / shadow to the */ /* new theme in lockstep, at one shared duration. The class is only on the */ /* document during the switch, so it never interferes with hover / focus / */ /* press transitions the rest of the time. */ /* */ /* RESPECTS TWEAKS: driven by `--motion-durationBase`, which the reduced */ /* block below zeroes (and the `* { transition: none }` override there wins */ /* on equal specificity since it comes later) — so when the user picks */ /* "Reduced" motion the entire UI snaps instantly. Motion on → everything */ /* animates together; motion off → everything is immediate. Either way it is */ /* consistent. See CLAUDE.md §0 META-PRAVIDLO "Component motion respect". */ /* ------------------------------------------------------------------------- */ :root.forge-theme-anim, :root.forge-theme-anim *, :root.forge-theme-anim *::before, :root.forge-theme-anim *::after { transition: background-color var(--motion-durationBase) var(--motion-easing), border-color var(--motion-durationBase) var(--motion-easing), color var(--motion-durationBase) var(--motion-easing), fill var(--motion-durationBase) var(--motion-easing), stroke var(--motion-durationBase) var(--motion-easing), box-shadow var(--motion-durationBase) var(--motion-easing) !important; } /* ------------------------------------------------------------------------- */ /* Motion respect — three layers, kept in sync: */ /* */ /* 1. data-motion="reduced" → user explicitly chose "Reduced" in the */ /* Appearance panel. Hard override regardless of OS preference. */ /* */ /* 2. data-motion="auto" + @media (prefers-reduced-motion: reduce) */ /* → user chose "Auto" and the OS reports a reduce-motion preference. */ /* We do NOT add `:not([data-motion="full"])` because absent attribute */ /* defaults to auto behaviour. Explicit "full" still wins over OS pref. */ /* */ /* 3. data-motion="full" → user explicitly chose "Full". OS preference */ /* is overridden. We don't fight back — if a user explicitly opts in to */ /* animations on a reduce-motion device they get them. */ /* */ /* All three layers kill animation/transition duration to a near-zero value */ /* (0.01ms, not 0, to preserve `animationend` event firing). Token vars are */ /* also zeroed so consumer CSS that uses `--motion-durationBase` follows. */ /* */ /* Components MUST drive their motion from `--motion-duration*` tokens or */ /* be inside the cascade reach of this rule. Hardcoded `transition: ... */ /* 200ms ...` bypasses the override and breaks the contract — see CLAUDE.md */ /* §0 META-PRAVIDLO "Component motion respect". */ /* ------------------------------------------------------------------------- */ :root[data-motion="reduced"] { --motion-durationFast: 0ms; --motion-durationBase: 0ms; --motion-durationSlow: 0ms; --t-collapse: 0ms; } /* `animation: none` (not just `animation-duration: 0`) is the strong-form */ /* override — it suppresses the keyframe pipeline entirely, so any element */ /* whose start state is set INSIDE @keyframes (e.g. `opacity: 0` on */ /* frame 0 of an entrance animation) reverts to its base CSS rule */ /* (typically `opacity: 1`). Duration-zero alone leaves the keyframe */ /* pipeline running for one frame at the start state — that frame is */ /* visible on slow devices as "empty form" before the layout settles. */ /* Same logic for `transition: none`. ADR-pending; META-PRAVIDLO */ /* "Component motion + effects respect" §"Tři vrstvy respektu". */ :root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { :root:not([data-motion="full"]) { --motion-durationFast: 0ms; --motion-durationBase: 0ms; --motion-durationSlow: 0ms; --t-collapse: 0ms; } :root:not([data-motion="full"]) *, :root:not([data-motion="full"]) *::before, :root:not([data-motion="full"]) *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }