/* TrueDEM Portal — the Fluent UI Blazor bridge (src/WebApp/SPEC.md §9, D23).
   Takes the place of the design bundle's Telerik (Kendo) bridge: every Fluent design token the
   portal's components read points at a --td-* token, so Fluent components follow the theme and the
   light/dark switch. Load AFTER tokens.css, truedem.css and Fluent's bundle.

   Where: on body and on every [data-theme] element, not on :root. Fluent writes its theme into an
   adopted stylesheet on :root, which the cascade places after every document stylesheet, so a :root
   rule here would lose; body inherits nothing Fluent sets, so the mapping wins for the whole page.
   Declaring it again on [data-theme] re-resolves the var() references inside a subtree that carries
   its own theme (the gallery's side-by-side frames), because a custom property is computed where it
   is declared and inherited as that value.

   Fluent's brand ramp is generated from --td-primary too (Theme/PortalTheme.cs), so tokens this file
   does not list (brand tints, compound variants) stay on the brand. */

body,
[data-theme] {
    /* ---------------------------------------------------------------- brand */
    --colorBrandBackground: var(--td-primary);
    --colorBrandBackgroundHover: var(--td-primary-hover);
    --colorBrandBackgroundPressed: var(--td-primary-hover);
    --colorBrandBackgroundSelected: var(--td-primary-hover);
    --colorBrandBackground2: var(--td-primary-soft);
    --colorBrandForeground1: var(--td-primary);
    --colorBrandForeground2: var(--td-primary-hover);
    --colorBrandForegroundLink: var(--td-primary);
    --colorBrandForegroundLinkHover: var(--td-primary-hover);
    --colorBrandForegroundLinkPressed: var(--td-primary-hover);
    --colorBrandForegroundLinkSelected: var(--td-primary);
    --colorBrandStroke1: var(--td-primary);
    --colorBrandStroke2: var(--td-primary-soft);
    --colorCompoundBrandBackground: var(--td-primary);
    --colorCompoundBrandBackgroundHover: var(--td-primary-hover);
    --colorCompoundBrandBackgroundPressed: var(--td-primary-hover);
    --colorCompoundBrandForeground1: var(--td-primary);
    --colorCompoundBrandForeground1Hover: var(--td-primary-hover);
    --colorCompoundBrandForeground1Pressed: var(--td-primary-hover);
    --colorCompoundBrandStroke: var(--td-primary);
    --colorCompoundBrandStrokeHover: var(--td-primary-hover);
    --colorCompoundBrandStrokePressed: var(--td-primary-hover);
    --colorNeutralForegroundOnBrand: var(--td-on-primary);
    --colorStrokeFocus2: var(--td-primary);

    /* ---------------------------------------------------------------- text */
    --colorNeutralForeground1: var(--td-ink);
    --colorNeutralForeground1Hover: var(--td-ink);
    --colorNeutralForeground1Pressed: var(--td-ink);
    --colorNeutralForeground1Selected: var(--td-ink);
    --colorNeutralForeground2: var(--td-ink-soft);
    --colorNeutralForeground2Hover: var(--td-ink);
    --colorNeutralForeground2Pressed: var(--td-ink);
    --colorNeutralForeground2Selected: var(--td-ink);
    --colorNeutralForeground2BrandHover: var(--td-primary);
    --colorNeutralForeground2BrandPressed: var(--td-primary-hover);
    --colorNeutralForeground2BrandSelected: var(--td-primary);
    --colorNeutralForeground3: var(--td-ink-soft);
    --colorNeutralForeground3Hover: var(--td-ink);
    --colorNeutralForeground3BrandHover: var(--td-primary);
    --colorNeutralForeground3BrandSelected: var(--td-primary);
    --colorNeutralForeground4: var(--td-ink-faint);

    /* ---------------------------------------------------------------- surfaces */
    --colorNeutralBackground1: var(--td-surface);
    --colorNeutralBackground1Hover: var(--td-surface-alt);
    --colorNeutralBackground1Pressed: var(--td-border);
    --colorNeutralBackground1Selected: var(--td-surface-alt);
    --colorNeutralBackground2: var(--td-surface-alt);
    --colorNeutralBackground2Hover: var(--td-border);
    --colorNeutralBackground3: var(--td-surface-alt);
    --colorNeutralBackground4: var(--td-surface);
    --colorNeutralBackground4Hover: var(--td-surface-alt);
    --colorNeutralCardBackground: var(--td-surface);
    --colorNeutralCardBackgroundHover: var(--td-surface-alt);
    --colorSubtleBackgroundHover: var(--td-surface-alt);
    --colorSubtleBackgroundPressed: var(--td-border);
    --colorSubtleBackgroundSelected: var(--td-primary-soft);
    --colorNeutralBackgroundInverted: var(--td-navy);
    --colorNeutralForegroundInverted: var(--td-surface);

    /* ---------------------------------------------------------------- strokes */
    --colorNeutralStroke1: var(--td-border);
    --colorNeutralStroke1Hover: var(--td-ink-faint);
    --colorNeutralStroke1Pressed: var(--td-ink-soft);
    --colorNeutralStroke2: var(--td-border);
    --colorNeutralStroke3: var(--td-border);
    --colorNeutralStrokeAccessible: var(--td-ink-soft);
    --colorNeutralStrokeAccessibleHover: var(--td-ink);
    --colorNeutralStrokeAccessiblePressed: var(--td-ink);

    /* ---------------------------------------------------------------- status (always with a word) */
    --colorStatusSuccessForeground1: var(--td-status-healthy);
    --colorStatusSuccessBackground1: color-mix(in srgb, var(--td-status-healthy) 14%, var(--td-surface));
    --colorStatusSuccessBorder1: var(--td-status-healthy);
    --colorStatusWarningForeground1: var(--td-status-advisory);
    --colorStatusWarningBackground1: color-mix(in srgb, var(--td-status-advisory) 14%, var(--td-surface));
    --colorStatusWarningBorder1: var(--td-status-advisory);
    --colorStatusDangerForeground1: var(--td-status-outage);
    --colorStatusDangerBackground1: color-mix(in srgb, var(--td-status-outage) 14%, var(--td-surface));
    --colorStatusDangerBorder1: var(--td-status-outage);

    /* ---------------------------------------------------------------- type, shape, depth */
    --fontFamilyBase: var(--td-font);
    --borderRadiusMedium: var(--td-radius-sm);
    --borderRadiusLarge: var(--td-radius);
    --borderRadiusXLarge: var(--td-radius);
    --borderRadiusCircular: var(--td-radius-pill);
    --shadow4: var(--td-shadow);
    --shadow16: var(--td-shadow-lift);
}

/* ==================================================================== box model
   Fluent sizes its parts assuming border-box everywhere: its default stylesheet sets it globally,
   and that stylesheet is switched off (no-fuib-style on body) because its body rules would replace
   the design system's. Without this the layout grid's footer (width 100% plus padding) is 40px wider
   than the window. The design system's own sizes read the same way ("a round 34px button" with a 1px
   ring), so the reset applies to the whole page. */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ==================================================================== components
   Where a Fluent component's own rules out-rank the design system's classes (Fluent's are scoped
   with an attribute or a second class), the portal's metrics are restored here, as the Kendo bridge
   did for TelerikAppBar and TelerikDrawer. */

/* The AppShell itself is the design system's (.app-shell, .app-bar, .td-drawer, .app-content):
   FluentLayout renders a <style> element the portal's CSP refuses (src/WebApp/spike-notes.md).

   The drawer's items on FluentNav: the td-drawer metrics, the selected item tinted, no Fluent pill. */
.fluent-nav.td-drawer-items {
    padding: var(--td-space-3) 0;
    row-gap: 2px;
    background: var(--td-surface);
}

/* Items sit inset with a small radius; the current page gets the brand tint, a bolder label and a
   3px accent bar on the drawer's left edge. */
.fluent-nav .fluent-navitem.td-drawer-item {
    position: relative;
    align-items: center;
    gap: .75rem;
    margin: 0 var(--td-space-2);
    padding: var(--td-space-2) var(--td-space-3);
    min-height: 2.5rem;
    border-radius: var(--td-radius-sm);
    background: transparent;
    color: var(--td-ink-soft);
    font-size: .95rem;
    line-height: 1.4;
    white-space: nowrap;
    transition: background-color 150ms, color 150ms;
}

.fluent-nav .fluent-navitem.td-drawer-item:hover {
    background: var(--td-surface-alt);
    color: var(--td-ink);
}

.fluent-nav .fluent-navitem.td-drawer-item:focus-visible {
    outline: 2px solid var(--td-primary);
    outline-offset: -2px;
}

.fluent-nav .fluent-navitem.td-drawer-item.is-selected,
.fluent-nav .fluent-navitem.td-drawer-item.is-selected:hover {
    background: var(--td-primary-soft);
    color: var(--td-primary);
    font-weight: 600;
}

.fluent-nav .fluent-navitem.td-drawer-item.is-selected::after { content: none; }

.fluent-nav .fluent-navitem.td-drawer-item.is-selected::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--td-space-2));
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--td-primary);
}

.fluent-nav .fluent-navitem.td-drawer-item svg { flex: none; width: 20px; height: 20px; fill: currentColor; }

.fluent-nav .fluent-navsectionheader.drawer-header {
    margin: var(--td-space-4) 0 0;
    padding: 0 var(--td-space-5) var(--td-space-1);
    min-height: 1rem;
    font-size: .72rem;
    font-weight: 700;
    line-height: normal;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--td-ink-faint);
    white-space: nowrap;
}

/* The mini rail: icons centred, labels hidden (the tooltips name the items), section headers reduced to a
   thin separator so the grouping stays visible. */
.td-drawer.is-mini .fluent-nav .fluent-navitem.td-drawer-item {
    justify-content: center;
    margin: 0 4px;
    padding: var(--td-space-2) 0;
}

.td-drawer.is-mini .drawer-text { display: none; }

.td-drawer.is-mini .fluent-nav .fluent-navsectionheader.drawer-header {
    margin: var(--td-space-3) var(--td-space-3) var(--td-space-2);
    padding: 0;
    min-height: 0;
    height: 1px;
    overflow: hidden;
    color: transparent;
    background: var(--td-border);
}

.td-drawer { transition: width 150ms; }

@media (prefers-reduced-motion: reduce) {
    .td-drawer, .fluent-nav .fluent-navitem.td-drawer-item { transition: none; }
}

/* Cards on FluentCard: .fluent-card sets Fluent's padding, radius and shadow after truedem.css. */
.fluent-card.td-card {
    width: auto;
    height: auto;
    padding: var(--td-space-5);
    background: var(--td-surface);
    border: 1px solid var(--td-border);
    border-radius: var(--td-radius);
    box-shadow: var(--td-shadow);
    color: var(--td-ink);
}

.fluent-card.dev-stat {
    width: auto;
    height: auto;
    padding: .9rem var(--td-space-4);
    background: var(--td-surface);
    border: 1px solid var(--td-border);
    border-left: 3px solid var(--td-primary);
    border-radius: var(--td-radius);
    box-shadow: none;
    color: var(--td-ink);
}

.fluent-card.dev-stat.is-warn { border-left-color: var(--td-status-advisory); }
.fluent-card.dev-stat.is-bad { border-left-color: var(--td-status-degraded); }
.fluent-card.region-card { padding: .9rem var(--td-space-4); }
.fluent-card.load-error { color: var(--td-status-outage); }

/* Fluent buttons: the design system's pill and 1px lift. */
fluent-button {
    --borderRadiusMedium: var(--td-radius-pill);
    transition: transform .15s ease;
}

fluent-button:hover { transform: translateY(-1px); }
fluent-button:active { transform: translateY(0); }