/* ThinkReal platform shell — Dynamics 365 "modern look" tokens.
Loaded by app's App.razor via:
Sits *after* the FluentUI design-system stylesheet so its rules win. */
/* === Brand tokens === Dark Microsoft-blue palette ("edler" / Dynamics Sales Hub).
Override FluentUI v4's accent tokens so every Color="Color.Accent" usage and
every automatically picks up the new brand.
Also remap --accent-fill-rest etc. so our own .platform-* CSS uses the same color. */
:root {
--tr-brand-dark: #0F3268;
--tr-brand-dark-hover: #1A4584;
--tr-brand-dark-active: #0A2552;
--tr-brand-dark-on-bg: #FFFFFF;
--tr-brand-tint-50: rgba(15, 50, 104, 0.05);
--tr-brand-tint-100: rgba(15, 50, 104, 0.10);
}
:root,
:host {
--accent-fill-rest: var(--tr-brand-dark);
--accent-fill-hover: var(--tr-brand-dark-hover);
--accent-fill-active: var(--tr-brand-dark-active);
--accent-fill-focus: var(--tr-brand-dark);
--accent-foreground-rest: var(--tr-brand-dark);
--accent-foreground-hover: var(--tr-brand-dark-hover);
--accent-foreground-active: var(--tr-brand-dark-active);
--accent-foreground-focus: var(--tr-brand-dark);
}
.platform-shell {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.platform-brand-stripe {
height: 4px;
background: var(--accent-fill-rest);
width: 100%;
flex-shrink: 0;
}
.platform-header {
background: var(--neutral-layer-1);
color: var(--neutral-foreground-rest);
height: 48px;
border-bottom: 1px solid var(--neutral-stroke-rest);
/* No left padding here — the .topbar-left box must start exactly at x=0
so its right border lines up with the sidebar's right edge below.
Right padding stays so the action cluster doesn't kiss the edge. */
padding: 0 12px 0 0;
display: flex;
align-items: center;
flex-shrink: 0;
}
.platform-main {
display: flex;
flex-direction: row;
width: 100%;
flex: 1 1 auto;
min-height: 0;
/* viewport - brand stripe (4) - header (48) - footer (32) = 84 px reserved */
height: calc(100vh - 84px);
}
.platform-nav,
fluent-nav-menu.platform-nav {
background: var(--neutral-layer-1) !important;
border-right: 1px solid var(--neutral-stroke-rest);
height: 100%;
overflow-y: auto;
padding-top: 8px;
flex-shrink: 0;
/* Force the sidebar's total rendered width to exactly 245 px so its
right border lines up pixel-perfect with the topbar-left's right border
above. Without this, FluentNavMenu's Width="240" param plus its internal
4 px padding + 0.67 px border would render at ~244.67 px (content-box),
leaving a sub-pixel offset visible on high-DPI displays. */
width: 245px !important;
box-sizing: border-box !important;
}
.platform-workspace-wrap {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
min-height: 0;
}
.platform-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 16px 20px;
background: var(--neutral-layer-2);
min-width: 0;
}
.platform-footer {
height: 32px;
background: var(--neutral-layer-1);
border-top: 1px solid var(--neutral-stroke-rest);
flex-shrink: 0;
display: flex;
align-items: center;
gap: 12px;
padding: 0 24px;
font-size: 12px;
color: var(--neutral-foreground-hint);
}
.platform-footer-spacer {
flex: 1 1 auto;
}
/* === Nav rail === FluentNavLink renders as with an
child. We force-override the colors to our brand dark-blue —
FluentUI's own "Color.Accent" resolves to a medium #036ac4 that we don't want. */
/* All nav icons (active or not) get dark-blue fill so the rail reads cohesive. */
.platform-nav .fluent-nav-link svg {
fill: var(--tr-brand-dark) !important;
}
/* Disabled / muted items get a softer treatment. */
.platform-nav .fluent-nav-link.disabled svg,
.platform-nav .fluent-nav-link[aria-disabled="true"] svg {
fill: var(--neutral-foreground-hint) !important;
opacity: 0.6;
}
/* Active nav item: 3 px blue bar on the left + bolder dark-blue text. */
.platform-nav a.fluent-nav-link.active {
position: relative !important;
font-weight: 600 !important;
color: var(--tr-brand-dark) !important;
background: var(--tr-brand-tint-50) !important;
}
.platform-nav a.fluent-nav-link.active::before {
content: "";
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 3px;
background: var(--tr-brand-dark);
border-radius: 0 2px 2px 0;
}
/* === Card === Subtle elevated container — Dynamics 365 modern-look style.
Use