/* app.css — LAYOUT PRIMITIVES ONLY. Shell grid, rail, tab bar, scroll containers, the .mono utility. No component appearance lives here — that belongs in *.razor.css reading var(--fx-*). */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; background: var(--fx-bg-page); color: var(--fx-text-base); font-family: var(--fx-font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; /* the page itself never scrolls horizontally */ } #app, .fx-app-root { height: 100%; } /* Data readouts switch to mono — this is how the operator recognizes data. */ .mono { font-family: var(--fx-font-mono); font-feature-settings: "tnum" 1; } /* ---- Windows host: the in-app top bar doubles as the native title bar ------ */ /* .fx-win is set on only in the MAUI Windows host. The top bar becomes a drag region and reserves space on the right for the min/max/close buttons. */ .fx-win .fx-top { -webkit-app-region: drag; app-region: drag; padding-right: 148px; } .fx-win .fx-top button, .fx-win .fx-top a, .fx-win .fx-top input, .fx-win .fx-top select, .fx-win .fx-top textarea { -webkit-app-region: no-drag; app-region: no-drag; } /* ---- App shell scaffold -------------------------------------------------- */ /* Desktop / tablet: persistent rail on the left, top bar + content on the right. */ .fx-shell { display: grid; grid-template-columns: var(--fx-rail-w, 236px) 1fr; grid-template-rows: 100%; height: 100%; width: 100%; overflow: hidden; } .fx-tablet .fx-shell { --fx-rail-w: 68px; } .fx-shell__main { display: grid; grid-template-rows: auto 1fr; /* chrome (TopBar / phone header), then content */ min-width: 0; /* let content shrink; prevents horizontal overflow */ height: 100%; overflow: hidden; } /* The single scrolling surface for a screen's content. */ .fx-content { overflow: auto; min-width: 0; min-height: 0; height: 100%; } /* Centered content container (DSM: 1220px max in a pane). */ .fx-container { width: 100%; max-width: var(--fx-container); margin-inline: auto; } /* ---- Phone shell --------------------------------------------------------- */ .fx-phone .fx-shell { grid-template-columns: 1fr; grid-template-rows: 1fr auto; /* content, then the bottom tab bar */ } /* .fx-shell__main keeps grid-template-rows: auto 1fr — the screen's PageChrome renders a phone header (auto) + scrolling content (1fr). */ /* ---- Generic multi-pane row (Chat, Automation, Documents, Vision) -------- */ .fx-panes { display: flex; height: 100%; min-width: 0; overflow: hidden; } .fx-pane { height: 100%; overflow: auto; min-width: 0; } .fx-pane--flex { flex: 1 1 auto; } /* Every pane scrolls independently; hide horizontal overflow inside panes. */ .fx-pane, .fx-content { overflow-x: hidden; } /* Wide content that must scroll horizontally does so in its own container. */ .fx-hscroll { overflow-x: auto; max-width: 100%; } /* Visually-hidden (screen-reader only) */ .fx-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Focus ring — consistent across the app. */ :focus-visible { outline: 2px solid var(--fx-border-hover); outline-offset: 2px; } /* Skip-to-content: off-screen until focused, then pinned top-left. */ .fx-skip { position: fixed; top: 8px; left: -9999px; z-index: 2000; background: var(--fx-accent); color: var(--fx-accent-ink); font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: var(--fx-radius-control); text-decoration: none; } .fx-skip:focus { left: 8px; } /* Respect reduced motion globally as a backstop. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }