@import url("studio-cells.css");
@import url("studio-forms.css");
@import url("studio-selectors.css");
@import url("studio-tools-planning.css");
@import url("studio-tools-data.css");
/* =====================================================================================================================
   Studio 2.4 shared theme: THE one token sheet for Studio (Studio 2.4 shared layout contract, Experience Designer,
   2026-10-08; reference: Docs.Developer/Features/Plans/Studio/Layout-2.4-Reference/tokens.css).
   Re-cut 2026-10-08 to the shadcn/ui zinc defaults (dark first): zinc-950 canvas, zinc-800 hairlines, transparent
   inputs, 36px controls (32px compact), one 2px offset focus ring, zinc-50 primary buttons, no zebra, no glow.

   Linked ONCE from the Studio host head (StudioHead.razor, and _StudioHeadPartial.cshtml for the MVC host) AFTER every
   legacy bundle (Metronic studio bundle, the abs.tweaks.* files, Radzen material-base + abs.radzen.*, FluentUI reboot),
   so it overrides at the shared adapter boundary without editing or deleting the legacy files.

   Theme authority: Studio resolves ONE theme and writes it to <html data-theme="light|dark"> (StudioApp.razor boot
   script + StudioThemeMode.setMode, and the head script in _StudioHostPartial.cshtml; the same attribute the legacy
   Metronic/Radzen sheets key on). FluentDesignTheme also writes body[data-theme], but it can disagree (its Mode is
   System), so every rule here keys on the html attribute only. The OS preference is never read: without an
   attribute the light tokens apply.

   Specificity prefix used by sections 9 to 11:
     :root:is([data-theme], :not([data-theme]))  matches the html element in every state at (0,2,0), the same weight as
     the former ":root[data-theme], :root:not([data-theme])" pair, so it out-ranks the legacy [data-theme="dark"] .x
     rules (0,2,0 or less, earlier in the cascade) without !important.

   Sections:
     1. Studio tokens (light, dark)                         shadcn: --background, --card, --border, --input, --ring...
     2. v5 token bridge (Fluent 2 tokens from the studio tokens) and legacy FAST aliases
     3. Legacy token mapping (--abs-input-*, --rz-*)
     4. Base (canvas, font, utilities)
     5. Shell integration (page gutter applied once)
     6. Form layout and section typography                   shadcn: Label, FormDescription, FormMessage, CardHeader
     7. Input anatomy: v5 web components (text-input, textarea, dropdown, field, checkbox, switch, radio, menus)
     8. Buttons: fluent-button / menu-button / anchor-button   shadcn: Button default / secondary / outline / ghost
     9. Legacy inputs (.form-control / .form-select, composite Suite inputs)
    10. Radzen inputs, popups and buttons
    11. Grids (Radzen behind SuiteDataGrid, FluentDataGrid)  shadcn: Table
    12. Live-review corrections: grid buttons outline, header menu buttons ghost, shell React chrome colours,
        validation text, scroll-to-top, grid persona avatars
    13. CEO light-mode pass: message bars, tabs, v9 focus, zinc primary for anchors and icons, column picker and
        popup scroll root, selects, grid cell truncation, section width, spacing
    14. Golden pair (User Create, Users list) to the Layout 2.4 contract: spacing scale only, type, controls, grid
    15. Routed nav (SuiteNavTabs / SuiteNavRailLayout) and record-page rhythm
    16. v5 corrections: badges, hover cards, grid column picker, form pages, shell height
   ===================================================================================================================== */

/* ---------------------------------------------------------------------------------------------------------------------
   1. Studio tokens. shadcn zinc: light is the default; dark is html[data-theme="dark"]. :root[data-theme] (0,2,0)
      out-specifies the legacy [data-theme=dark] (0,1,0) blocks that define the --abs-* and --rz-* tokens.
      shadcn map: --studio-bg = background, --studio-surface = card, --studio-raised = popover, --studio-text =
      foreground, --studio-muted = muted-foreground, --studio-divider = border, --studio-control-border = input,
      --studio-primary = primary, --studio-secondary = secondary, --studio-hover = accent, --studio-ring = ring,
      --studio-danger = destructive. --studio-accent (and --studio-accent-tint) carries links and every checked,
      selected, active and progress state; the zinc primary fill is reserved for the primary button.
   --------------------------------------------------------------------------------------------------------------------- */
:root {
    color-scheme: light;
    --studio-font: "Inter Variable", Inter, "Segoe UI", system-ui, sans-serif;
    --studio-mono: ui-monospace, Consolas, "SFMono-Regular", monospace;
    --studio-bg: #F5F6F8;                       /* contract canvas */
    --studio-canvas: var(--studio-bg);
    --studio-surface: #FFFFFF;                  /* card: white */
    --studio-raised: #FFFFFF;                   /* popover: white */
    --studio-text: #1F2328;                     /* contract text */
    --studio-muted: #59636E;                    /* contract muted */
    --studio-placeholder: #59636E;              /* contract input placeholder */
    --studio-divider: #D8DEE7;                  /* contract divider */
    --studio-control-border: #7A8594;           /* contract input border */
    --studio-control-border-hover: #52525B;     /* contract input hover border */
    --studio-check-border: #A1A1AA;             /* zinc-400: unchecked checkbox / radio */
    --studio-primary: #18181B;                  /* zinc-900 */
    --studio-on-primary: #FAFAFA;               /* zinc-50 */
    --studio-secondary: #F4F4F5;                /* zinc-100 */
    --studio-on-secondary: #18181B;             /* zinc-900 */
    --studio-hover: #F4F4F5;                    /* zinc-100: item / ghost / outline hover */
    --studio-row-hover: #FAFAFA;                /* zinc-50: table row hover (muted/50) */
    --studio-row-selected: #F4F4F5;             /* zinc-100 */
    --studio-ring: #71717A;                     /* contract focus ring (both themes) */
    --studio-accent: #464EB8;                   /* links and selected marks only */
    --studio-on-accent: #FFFFFF;
    --studio-danger: #B42318;                   /* contract input error */
    --studio-input-bg: #FFFFFF;
    --studio-input-disabled-bg: #F5F6F8;
    --studio-input-disabled-text: #687380;
    --studio-input-disabled-border: #B8C0CC;
    --studio-input-readonly-bg: #F5F6F8;
    /* Spacing scale (contract): spacing lives only in the shell gutter, SuitePage, panels and SuiteFormLayout. */
    --studio-space-1: 4px;
    --studio-space-2: 8px;
    --studio-space-3: 12px;
    --studio-space-4: 16px;
    --studio-space-5: 24px;
    --studio-space-6: 32px;
    --studio-space-7: 48px;
    --studio-space: 4px;
    --studio-body-size: 14px;
    --studio-body-leading: 20px;
    --studio-control-height: 36px;              /* shadcn h-9 */
    --studio-control-height-compact: 32px;      /* shadcn h-8 */
    --studio-grid-row-height: 44px;
    --studio-grid-header-height: 44px;          /* contract grid header */
    --studio-panel-radius: 8px;
    --studio-control-radius: 6px;               /* rounded-md */
    /* Derived (no new colors: mixes and composites of the tokens above). */
    --studio-focus-ring: 0 0 0 2px var(--studio-surface), 0 0 0 4px var(--studio-ring);   /* 2px ring, 2px offset */
    --studio-popover-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --studio-tab-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08), 0 1px 1px 0 rgba(0, 0, 0, 0.04);
    --studio-tab-list: #E4E4E7;                 /* shadcn TabsList track: zinc-200, because the light canvas (#F5F6F8) would swallow zinc-100 */
    --studio-button-secondary-bg: #FFFFFF;      /* contract reference button: surface + control border */
    --studio-button-secondary-border: #7A8594;
    --studio-button-secondary-hover: #F4F4F5;
    --studio-pressed: var(--studio-hover);
    --studio-primary-hover: color-mix(in srgb, var(--studio-primary) 90%, var(--studio-bg));
    --studio-secondary-hover: color-mix(in srgb, var(--studio-secondary) 80%, var(--studio-bg));
    --studio-accent-hover: color-mix(in srgb, var(--studio-accent) 88%, var(--studio-text));
    --studio-accent-pressed: color-mix(in srgb, var(--studio-accent) 78%, var(--studio-text));
    --studio-accent-tint: color-mix(in srgb, var(--studio-accent) 14%, var(--studio-surface));  /* selected rows, selected items */
    --studio-danger-surface: color-mix(in srgb, var(--studio-danger) 8%, var(--studio-bg));
    --studio-disabled-surface: transparent;
    /* Status chips and callouts (shadcn-style tinted badges): -50 background, -200 border, -700 text. Contrast of fg
       on bg: info 6.16, success 5.21, warning 4.84, danger 5.91 (all >= 4.5:1). */
    --studio-status-info-fg: #1D4ED8;           /* blue-700 */
    --studio-status-info-bg: #EFF6FF;           /* blue-50 */
    --studio-status-info-border: #BFDBFE;       /* blue-200 */
    --studio-status-success-fg: #047857;        /* emerald-700 */
    --studio-status-success-bg: #ECFDF5;        /* emerald-50 */
    --studio-status-success-border: #A7F3D0;    /* emerald-200 */
    --studio-status-warning-fg: #B45309;        /* amber-700 */
    --studio-status-warning-bg: #FFFBEB;        /* amber-50 */
    --studio-status-warning-border: #FDE68A;    /* amber-200 */
    --studio-status-danger-fg: #B91C1C;         /* red-700 */
    --studio-status-danger-bg: #FEF2F2;         /* red-50 */
    --studio-status-danger-border: #FECACA;     /* red-200 */
}

:root[data-theme="light"] {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --studio-bg: #09090B;                       /* zinc-950 */
    --studio-surface: #09090B;                  /* card: zinc-950 */
    --studio-raised: #18181B;                   /* contract raised (zinc-900) */
    --studio-text: #FAFAFA;                     /* zinc-50 */
    --studio-muted: #A1A1AA;                    /* zinc-400 */
    --studio-placeholder: #71717A;              /* zinc-500 */
    --studio-divider: #27272A;                  /* zinc-800 */
    --studio-control-border: #27272A;           /* zinc-800 */
    --studio-control-border-hover: #3F3F46;     /* zinc-700 */
    --studio-check-border: #52525B;             /* zinc-600 */
    --studio-primary: #FAFAFA;                  /* zinc-50 */
    --studio-on-primary: #18181B;               /* zinc-900 */
    --studio-secondary: #27272A;                /* zinc-800 */
    --studio-on-secondary: #FAFAFA;             /* zinc-50 */
    --studio-hover: #27272A;                    /* zinc-800 */
    --studio-row-hover: #18181B;                /* zinc-900 */
    --studio-row-selected: #27272A;             /* zinc-800 */
    --studio-ring: #71717A;                     /* contract focus ring */
    --studio-accent: #ADB4FF;
    --studio-on-accent: #09090B;
    --studio-danger: #FFB4AB;                   /* contract input error */
    --studio-input-bg: transparent;
    --studio-input-disabled-bg: transparent;
    --studio-input-disabled-text: #71717A;
    --studio-input-disabled-border: #27272A;
    --studio-input-readonly-bg: transparent;
    --studio-popover-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --studio-tab-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.6);
    --studio-tab-list: #27272A;
    --studio-button-secondary-bg: #27272A;
    --studio-button-secondary-border: transparent;
    --studio-button-secondary-hover: #1F1F22;
    /* Status (dark): -300/-400 text on a 12% tint with a 30% border. Contrast of fg on bg composited over #09090B:
       info 9.90, success 9.00, warning 10.14, danger 6.54. */
    --studio-status-info-fg: #93C5FD;                   /* blue-300 */
    --studio-status-info-bg: rgba(59, 130, 246, 0.12);
    --studio-status-info-border: rgba(59, 130, 246, 0.3);
    --studio-status-success-fg: #34D399;                /* emerald-400 */
    --studio-status-success-bg: rgba(16, 185, 129, 0.12);
    --studio-status-success-border: rgba(16, 185, 129, 0.3);
    --studio-status-warning-fg: #FBBF24;                /* amber-400 */
    --studio-status-warning-bg: rgba(245, 158, 11, 0.12);
    --studio-status-warning-border: rgba(245, 158, 11, 0.3);
    --studio-status-danger-fg: #F87171;                 /* red-400 */
    --studio-status-danger-bg: rgba(239, 68, 68, 0.12);
    --studio-status-danger-border: rgba(239, 68, 68, 0.3);
}

/* Compact density (shadcn h-8): toolbars, grid headers and filter rows, page and section header action rows. Every
   height token the adapters below read is re-declared here, so Fluent, Radzen and the legacy .suite-* rules all
   follow. */
fluent-toolbar,
.card-toolbar,
.suite-page-header-actions,
.suite-page-section-actions,
.rz-data-grid,
.rz-cell-filter,
.rz-grid-table thead,
.rz-toolbar,
.fluent-data-grid {
    --studio-control-height: var(--studio-control-height-compact);
    --abs-input-height: var(--studio-control-height-compact);
    --rz-input-size-md: var(--studio-control-height-compact);
    --rz-button-size-md: var(--studio-control-height-compact);
}

/* ---------------------------------------------------------------------------------------------------------------------
   2. v5 token bridge (Fluent UI Blazor 5.0: Fluent Web Components v3 on Fluent 2 design tokens).
      FluentDesignTheme writes the Fluent 2 tokens (--colorNeutralBackground1, --colorBrandBackground,
      --borderRadiusMedium...) to an adopted "html { }" sheet (0,0,1), and the library adds an adopted ":root { }"
      sheet (--success, --warning, --error, --info, --spacing*) (0,1,0). html:root (0,1,1) out-ranks both, so every
      Fluent web component paints from the studio tokens. The values are var(--studio-*) references, so the
      html[data-theme] switch in section 1 drives light and dark with no JS; Fluent's own body[data-theme] and the OS
      preference are never read.
      Map: Background1 = card surface, Background2/3 = canvas, Background4/5 and every hover = the zinc hover;
      foregrounds = text / muted / placeholder; Stroke1 and StrokeAccessible = the input border (inputs, outline and
      secondary buttons; the Fluent 2 darker bottom edge becomes the same 1px border), Stroke2/3 = divider.
      Brand background (FluentButton Primary) = the zinc primary pair. Compound brand and brand foregrounds (checked
      boxes, switches, radios, links, selected marks) = the studio accent (#464EB8 light). Status = the studio status
      tints. Focus = the ring.
   --------------------------------------------------------------------------------------------------------------------- */
html:root {
    --fontFamilyBase: var(--studio-font);
    --fontFamilyMonospace: var(--studio-mono);
    --fontFamilyNumeric: var(--studio-font);
    --fontSizeBase300: 14px;
    --lineHeightBase300: 20px;
    --borderRadiusSmall: 4px;
    --borderRadiusMedium: var(--studio-control-radius);
    --borderRadiusLarge: var(--studio-panel-radius);
    --borderRadiusXLarge: 12px;
    --strokeWidthThin: 1px;

    --colorNeutralBackground1: var(--studio-surface);
    --colorNeutralBackground1Hover: var(--studio-hover);
    --colorNeutralBackground1Pressed: var(--studio-hover);
    --colorNeutralBackground1Selected: var(--studio-row-selected);
    --colorNeutralBackground2: var(--studio-bg);
    --colorNeutralBackground2Hover: var(--studio-hover);
    --colorNeutralBackground2Pressed: var(--studio-hover);
    --colorNeutralBackground2Selected: var(--studio-row-selected);
    --colorNeutralBackground3: var(--studio-bg);
    --colorNeutralBackground3Hover: var(--studio-hover);
    --colorNeutralBackground3Pressed: var(--studio-hover);
    --colorNeutralBackground3Selected: var(--studio-row-selected);
    --colorNeutralBackground4: var(--studio-hover);
    --colorNeutralBackground4Hover: var(--studio-row-selected);
    --colorNeutralBackground4Pressed: var(--studio-row-selected);
    --colorNeutralBackground5: var(--studio-hover);
    --colorNeutralBackground5Hover: var(--studio-row-selected);
    --colorNeutralBackground6: var(--studio-divider);
    --colorNeutralBackgroundDisabled: var(--studio-input-disabled-bg);
    --colorNeutralBackgroundInverted: var(--studio-primary);
    --colorNeutralBackgroundAlpha: var(--studio-surface);
    --colorNeutralBackgroundAlpha2: var(--studio-surface);
    --colorSubtleBackground: transparent;
    --colorSubtleBackgroundHover: var(--studio-hover);
    --colorSubtleBackgroundPressed: var(--studio-hover);
    --colorSubtleBackgroundSelected: var(--studio-row-selected);
    --colorSubtleBackgroundLightAlphaHover: var(--studio-hover);
    --colorSubtleBackgroundLightAlphaPressed: var(--studio-hover);
    --colorSubtleBackgroundLightAlphaSelected: var(--studio-row-selected);
    --colorTransparentBackground: transparent;
    --colorTransparentBackgroundHover: var(--studio-hover);
    --colorTransparentBackgroundPressed: var(--studio-hover);
    --colorTransparentBackgroundSelected: var(--studio-row-selected);

    --colorNeutralForeground1: var(--studio-text);
    --colorNeutralForeground1Hover: var(--studio-text);
    --colorNeutralForeground1Pressed: var(--studio-text);
    --colorNeutralForeground1Selected: var(--studio-text);
    --colorNeutralForeground1Static: var(--studio-text);
    --colorNeutralForeground2: var(--studio-text);
    --colorNeutralForeground2Hover: var(--studio-text);
    --colorNeutralForeground2Pressed: var(--studio-text);
    --colorNeutralForeground2Selected: var(--studio-text);
    --colorNeutralForeground2BrandHover: var(--studio-text);
    --colorNeutralForeground2BrandPressed: var(--studio-text);
    --colorNeutralForeground2BrandSelected: var(--studio-text);
    --colorNeutralForeground2Link: var(--studio-text);
    --colorNeutralForeground2LinkHover: var(--studio-text);
    --colorNeutralForeground2LinkPressed: var(--studio-text);
    --colorNeutralForeground3: var(--studio-muted);
    --colorNeutralForeground3Hover: var(--studio-text);
    --colorNeutralForeground3Pressed: var(--studio-text);
    --colorNeutralForeground3Selected: var(--studio-text);
    --colorNeutralForeground4: var(--studio-placeholder);
    --colorNeutralForegroundDisabled: var(--studio-input-disabled-text);
    --colorNeutralForegroundOnBrand: var(--studio-on-primary);
    --colorNeutralForegroundInverted: var(--studio-on-primary);
    --colorNeutralForegroundInverted2: var(--studio-on-primary);
    --colorNeutralForegroundInvertedHover: var(--studio-on-primary);
    --colorNeutralForegroundInvertedPressed: var(--studio-on-primary);
    --colorNeutralForegroundStaticInverted: var(--studio-on-primary);

    --colorNeutralStroke1: var(--studio-control-border);
    --colorNeutralStroke1Hover: var(--studio-control-border-hover);
    --colorNeutralStroke1Pressed: var(--studio-control-border-hover);
    --colorNeutralStroke1Selected: var(--studio-control-border-hover);
    --colorNeutralStroke2: var(--studio-divider);
    --colorNeutralStroke3: var(--studio-divider);
    --colorNeutralStrokeSubtle: var(--studio-divider);
    --colorNeutralStrokeAccessible: var(--studio-control-border);
    --colorNeutralStrokeAccessibleHover: var(--studio-control-border-hover);
    --colorNeutralStrokeAccessiblePressed: var(--studio-control-border-hover);
    --colorNeutralStrokeAccessibleSelected: var(--studio-control-border-hover);
    --colorNeutralStrokeDisabled: var(--studio-input-disabled-border);
    --colorNeutralStrokeOnBrand: var(--studio-surface);
    --colorNeutralStrokeOnBrand2: var(--studio-on-primary);
    --colorTransparentStroke: transparent;
    --colorTransparentStrokeInteractive: transparent;
    --colorTransparentStrokeDisabled: transparent;

    --colorBrandBackground: var(--studio-primary);
    --colorBrandBackgroundHover: var(--studio-primary-hover);
    --colorBrandBackgroundPressed: var(--studio-primary-hover);
    --colorBrandBackgroundSelected: var(--studio-primary);
    --colorBrandBackgroundStatic: var(--studio-primary);
    --colorBrandBackground2: var(--studio-accent-tint);
    --colorBrandBackground2Hover: var(--studio-accent-tint);
    --colorBrandBackground2Pressed: var(--studio-accent-tint);
    --colorBrandBackgroundInverted: var(--studio-surface);
    --colorBrandBackgroundInvertedSelected: var(--studio-hover);
    --colorBrandForeground1: var(--studio-accent);
    --colorBrandForeground2: var(--studio-accent);
    --colorBrandForegroundInverted: var(--studio-accent);
    --colorBrandForegroundLink: var(--studio-accent);
    --colorBrandForegroundLinkHover: var(--studio-accent-hover);
    --colorBrandForegroundLinkPressed: var(--studio-accent-pressed);
    --colorBrandForegroundLinkSelected: var(--studio-accent);
    --colorBrandStroke1: var(--studio-accent);
    --colorBrandStroke2: var(--studio-accent-tint);
    --colorCompoundBrandBackground: var(--studio-accent);
    --colorCompoundBrandBackgroundHover: var(--studio-accent-hover);
    --colorCompoundBrandBackgroundPressed: var(--studio-accent-pressed);
    --colorCompoundBrandForeground1: var(--studio-accent);
    --colorCompoundBrandForeground1Hover: var(--studio-accent-hover);
    --colorCompoundBrandForeground1Pressed: var(--studio-accent-pressed);
    --colorCompoundBrandStroke: var(--studio-accent);
    --colorCompoundBrandStrokeHover: var(--studio-accent-hover);
    --colorCompoundBrandStrokePressed: var(--studio-accent-pressed);

    --colorStrokeFocus1: var(--studio-surface);
    --colorStrokeFocus2: var(--studio-ring);
    --colorBackgroundOverlay: rgba(0, 0, 0, 0.4);

    --colorStatusSuccessBackground1: var(--studio-status-success-bg);
    --colorStatusSuccessBackground3: var(--studio-status-success-fg);
    --colorStatusSuccessBorder1: var(--studio-status-success-border);
    --colorStatusSuccessForeground1: var(--studio-status-success-fg);
    --colorStatusSuccessForeground3: var(--studio-status-success-fg);
    --colorStatusWarningBackground1: var(--studio-status-warning-bg);
    --colorStatusWarningBackground3: var(--studio-status-warning-fg);
    --colorStatusWarningBorder1: var(--studio-status-warning-border);
    --colorStatusWarningForeground1: var(--studio-status-warning-fg);
    --colorStatusWarningForeground3: var(--studio-status-warning-fg);
    --colorStatusDangerBackground1: var(--studio-status-danger-bg);
    --colorStatusDangerBackground3: var(--studio-status-danger-fg);
    --colorStatusDangerBorder1: var(--studio-status-danger-border);
    --colorStatusDangerForeground1: var(--studio-status-danger-fg);
    --colorStatusDangerForeground3: var(--studio-status-danger-fg);
    --colorPaletteRedBackground1: var(--studio-status-danger-bg);
    --colorPaletteRedBackground2: var(--studio-status-danger-bg);
    --colorPaletteRedBackground3: var(--studio-danger);
    --colorPaletteRedBorder1: var(--studio-status-danger-border);
    --colorPaletteRedBorder2: var(--studio-danger);
    --colorPaletteRedForeground1: var(--studio-status-danger-fg);
    --colorPaletteRedForeground2: var(--studio-status-danger-fg);
    --colorPaletteRedForeground3: var(--studio-danger);
    --colorPaletteGreenBackground1: var(--studio-status-success-bg);
    --colorPaletteGreenBorder1: var(--studio-status-success-border);
    --colorPaletteGreenForeground1: var(--studio-status-success-fg);
    --colorPaletteGreenForeground3: var(--studio-status-success-fg);
    --colorPaletteYellowBackground1: var(--studio-status-warning-bg);
    --colorPaletteYellowBorder1: var(--studio-status-warning-border);
    --colorPaletteYellowForeground2: var(--studio-status-warning-fg);
    --colorPaletteDarkOrangeBackground1: var(--studio-status-warning-bg);
    --colorPaletteDarkOrangeBorder1: var(--studio-status-warning-border);
    --colorPaletteDarkOrangeForeground1: var(--studio-status-warning-fg);
    --colorPaletteDarkOrangeForeground3: var(--studio-status-warning-fg);

    /* The library's ":root" helpers (section 2 header): status text, mark highlight and monospace follow the studio
       tokens. The legacy Bootstrap values in abs.tweaks.colors.css used the same names; see that file. */
    --success: var(--studio-status-success-fg);
    --warning: var(--studio-status-warning-fg);
    --error: var(--studio-status-danger-fg);
    --info: var(--studio-muted);
    --highlight-bg: var(--studio-status-warning-bg);
    --font-monospace: var(--studio-mono);
}

/* Legacy FAST token aliases. FAST (Fluent UI Blazor 4) is gone, so nothing computes these any more; markup and
   scoped sheets still read a few of them in var() calls (SuiteSelector's popup header, TenantSectionState, ...), so
   they are defined once on the root from the studio tokens. No !important: nothing else writes them now. */
:root {
    --body-font: var(--studio-font);
    --fill-color: var(--studio-bg);
    --neutral-layer-1: var(--studio-bg);
    --neutral-layer-2: var(--studio-bg);
    --neutral-layer-3: var(--studio-bg);
    --neutral-layer-4: var(--studio-bg);
    --neutral-layer-card-container: var(--studio-surface);
    --neutral-layer-floating: var(--studio-raised);
    --neutral-fill-rest: var(--studio-secondary);
    --neutral-fill-hover: var(--studio-secondary-hover);
    --neutral-fill-layer-rest: var(--studio-surface);
    --neutral-fill-input-rest: transparent;
    --neutral-fill-stealth-rest: transparent;
    --neutral-fill-stealth-hover: var(--studio-divider);
    --neutral-fill-secondary-rest: var(--studio-hover);
    --neutral-stroke-rest: var(--studio-control-border);
    --neutral-stroke-divider-rest: var(--studio-divider);
    --neutral-stroke-layer-rest: var(--studio-divider);
    --neutral-foreground-rest: var(--studio-text);
    --neutral-foreground-hint: var(--studio-muted);
    --accent-fill-rest: var(--studio-accent);
    --accent-fill-hover: var(--studio-accent-hover);
    --accent-foreground-rest: var(--studio-accent);
    --foreground-on-accent-rest: var(--studio-on-accent);
    --focus-stroke-outer: var(--studio-ring);
}

/* ---------------------------------------------------------------------------------------------------------------------
   3. Legacy token mapping. The abs.tweaks.colors.css and abs.radzen.* sheets define these on :root and
      [data-theme=light|dark] (0,1,0); :root[data-theme] (0,2,0) wins, :root:not([data-theme]) covers the no-attribute
      case. shadcn map: transparent inputs on the input border; --rz-primary and its tints = the studio accent (the
      stock Radzen orange #ff6d41 from abs.radzen.dark.css / abs.radzen.light.css is gone) so links, tabs, progress,
      pager, checked and selected states stay on the accent; the zinc primary fill reaches ONLY the primary button,
      by explicit rules in section 10. Secondary = zinc secondary; every Radzen button gradient and inset shadow is
      switched off.
   --------------------------------------------------------------------------------------------------------------------- */
:root[data-theme],
:root:not([data-theme]),
html:root body {
    --bs-gradient: none;

    --abs-input-height: var(--studio-control-height);
    --abs-input-bg: transparent;
    --abs-input-color: var(--studio-text);
    --abs-input-border-color: var(--studio-control-border);
    --abs-input-placeholder-color: var(--studio-placeholder);
    --abs-input-plaintext-color: var(--studio-text);
    --abs-input-focus-bg: transparent;
    --abs-input-focus-color: var(--studio-text);
    --abs-input-focus-border-color: var(--studio-control-border-hover);
    --abs-input-disabled-bg: transparent;
    --abs-input-disabled-border-color: var(--studio-control-border);
    --abs-input-readonly-bg: transparent;
    --abs-input-solid-bg: transparent;
    --abs-input-solid-bg-focus: transparent;
    --abs-input-solid-color: var(--studio-text);
    --abs-input-solid-placeholder-color: var(--studio-placeholder);
    --abs-input-btn-focus-box-shadow: none;
    --abs-input-group-addon-bg: transparent;
    --abs-input-group-addon-border-color: var(--studio-control-border);
    --abs-input-group-addon-color: var(--studio-muted);
    --abs-form-select-bg: transparent;
    --abs-form-select-color: var(--studio-text);
    --abs-form-select-border-color: var(--studio-control-border);
    --abs-form-select-box-shadow: none;
    --abs-form-select-focus-border-color: var(--studio-control-border-hover);
    --abs-form-select-focus-box-shadow: var(--studio-focus-ring);
    --abs-form-select-disabled-bg: transparent;
    --abs-form-select-disabled-border-color: var(--studio-control-border);
    --abs-form-select-indicator-color: var(--studio-muted);

    --rz-primary: var(--studio-accent);
    --rz-primary-light: color-mix(in srgb, var(--studio-accent) 82%, var(--studio-surface));
    --rz-primary-lighter: color-mix(in srgb, var(--studio-accent) 14%, transparent);
    --rz-primary-dark: var(--studio-accent-hover);
    --rz-primary-darker: var(--studio-accent-pressed);
    --rz-on-primary: var(--studio-on-accent);
    --rz-on-primary-light: var(--studio-on-accent);
    --rz-on-primary-lighter: var(--studio-accent);
    --rz-on-primary-dark: var(--studio-on-accent);
    --rz-on-primary-darker: var(--studio-on-accent);
    --rz-secondary: var(--studio-secondary);
    --rz-secondary-light: var(--studio-secondary-hover);
    --rz-secondary-lighter: var(--studio-hover);
    --rz-secondary-dark: var(--studio-secondary-hover);
    --rz-secondary-darker: var(--studio-secondary-hover);
    --rz-on-secondary: var(--studio-on-secondary);
    --rz-on-secondary-light: var(--studio-on-secondary);
    --rz-on-secondary-lighter: var(--studio-text);
    --rz-border-primary: 1px solid var(--studio-accent);
    --rz-outline-color: var(--studio-accent);
    --rz-outline-offset: 2px;
    --rz-text-font-family: var(--studio-font);
    --rz-text-color: var(--studio-text);
    --rz-text-title-color: var(--studio-text);
    --rz-text-secondary-color: var(--studio-muted);
    --rz-text-tertiary-color: var(--studio-placeholder);
    --rz-base-background-color: var(--studio-surface);
    --rz-body-background-color: var(--studio-bg);

    --rz-input-size-md: var(--studio-control-height);
    --rz-input-size-sm: var(--studio-control-height-compact);
    --rz-input-padding-block-md: 7px;
    --rz-input-padding-inline-md: 12px;
    --rz-input-font-size-md: 14px;
    --rz-input-background-color: transparent;
    --rz-input-hover-background-color: transparent;
    --rz-input-focus-background-color: transparent;
    --rz-input-disabled-background-color: transparent;
    --rz-input-border: 1px solid var(--studio-control-border);
    --rz-input-border-block-end: 1px solid var(--studio-control-border);
    --rz-input-hover-border: 1px solid var(--studio-control-border-hover);
    --rz-input-hover-border-block-end: 1px solid var(--studio-control-border-hover);
    --rz-input-focus-border: 1px solid var(--studio-control-border-hover);
    --rz-input-focus-border-block-end: 1px solid var(--studio-control-border-hover);
    --rz-input-focus-shadow: var(--studio-focus-ring);
    --rz-input-focus-outline: none;
    --rz-input-shadow: none;
    --rz-input-hover-shadow: none;
    --rz-input-border-radius: var(--studio-control-radius);
    --rz-input-placeholder-color: var(--studio-placeholder);
    --rz-input-value-color: var(--studio-text);
    --rz-input-disabled-opacity: 0.5;
    --rz-input-disabled-border: 1px solid var(--studio-control-border);
    --rz-input-disabled-border-block-end: 1px solid var(--studio-control-border);
    --rz-input-disabled-color: var(--studio-text);
    --rz-checkbox-border-width: 1px;
    --rz-checkbox-border-radius: 4px;
    --rz-checkbox-checked-background-color: var(--studio-accent);
    --rz-checkbox-checked-hover-background-color: var(--studio-accent-hover);
    --rz-checkbox-checked-color: var(--studio-on-accent);
    --rz-checkbox-checked-border: 1px solid var(--studio-accent);
    --rz-checkbox-checked-hover-border: 1px solid var(--studio-accent-hover);
    --rz-checkbox-focus-outline: none;

    --rz-button-size-md: var(--studio-control-height);
    --rz-button-size-sm: var(--studio-control-height-compact);
    --rz-button-border-radius: var(--studio-control-radius);
    --rz-button-shadow: none;
    --rz-button-hover-shadow: none;
    --rz-button-focus-shadow: var(--studio-focus-ring);
    --rz-button-active-shadow: none;
    --rz-button-hover-gradient: none;
    --rz-button-focus-gradient: none;
    --rz-button-active-gradient: none;
    --rz-button-focus-outline: none;

    --rz-dropdown-item-hover-background-color: var(--studio-hover);
    --rz-dropdown-item-hover-color: var(--studio-text);
    --rz-dropdown-item-selected-background-color: var(--studio-accent-tint);
    --rz-dropdown-item-selected-color: var(--studio-text);
    --rz-dropdown-item-selected-hover-background-color: var(--studio-accent-tint);
    --rz-dropdown-item-selected-hover-color: var(--studio-text);
    --rz-dropdown-item-padding: 6px 8px;
    --rz-dropdown-items-padding: 4px;
    --rz-dropdown-panel-shadow: var(--studio-popover-shadow);
    --rz-dropdown-open-border: 1px solid var(--studio-control-border-hover);
    --rz-dropdown-open-background-color: transparent;
    --rz-datepicker-panel-shadow: var(--studio-popover-shadow);
    --rz-datepicker-panel-background-color: var(--studio-raised);
    --rz-datepicker-header-background-color: var(--studio-raised);
    --rz-datepicker-calendar-hover-background-color: var(--studio-hover);
    --rz-datepicker-calendar-selected-background-color: var(--studio-accent);
    --rz-datepicker-calendar-selected-color: var(--studio-on-accent);
    --rz-datepicker-calendar-selected-hover-background-color: var(--studio-accent-hover);
    --rz-datepicker-calendar-selected-hover-color: var(--studio-on-accent);
    --rz-datepicker-calendar-border-radius: var(--studio-control-radius);
    --rz-datepicker-calendar-today-box-shadow: none;
    --rz-datepicker-calendar-today-background-color: var(--studio-hover);
}

/* ---------------------------------------------------------------------------------------------------------------------
   4. Base: canvas (shadcn background / foreground), one UI font, tabular numerals for data, utilities.
   --------------------------------------------------------------------------------------------------------------------- */
html:root body {
    background-color: var(--studio-bg);
    color: var(--studio-text);
    font-family: var(--studio-font);
}

/* Shared visually-hidden utility: keeps text for assistive technology without showing it. The -focusable variant
   reappears while it (or something inside it) has focus (skip links). */
.suite-visually-hidden,
.suite-visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Technical identifiers and code only; names stay in the UI font. */
.suite-mono {
    font-family: var(--studio-mono);
    font-variant-numeric: tabular-nums;
}

.suite-tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------------------------------------------------
   5. Shell integration. The Studio content area (#abs_content: Metronic ".card pt-10 pb-10") pads itself; a
      SuitePageComponent owns the page gutter, so the shell drops its padding around one (gutter applied once) and
      shows the studio canvas. Bootstrap spacing utilities are !important, so these are too; the id selector wins.
   --------------------------------------------------------------------------------------------------------------------- */
#abs_content:has(.suite-page) {
    padding: 0 !important;
    background-color: var(--studio-bg) !important;
    background-image: none !important;
    color: var(--studio-text);
    border: 0;
    box-shadow: none;
}

/* ---------------------------------------------------------------------------------------------------------------------
   6. Form layout and section typography. Global (not scoped) on purpose: container queries and spans cross component
      boundaries. shadcn map: FormItem space-y-2 (8px label to control, 8px to description/message), fields 24px apart,
      Label text-sm font-medium, FormDescription text-sm muted (13px here), FormMessage text-sm destructive (13px),
      CardHeader title 16/24 semibold with a 14/20 muted description, card padding 24px.
   --------------------------------------------------------------------------------------------------------------------- */
.suite-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 960px;
    min-width: 0;
    margin: 0;
}

.suite-form-layout {
    container-type: inline-size;
    width: 100%;
    max-width: 960px;
    min-width: 0;
    box-sizing: border-box;
}

.suite-form-layout-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.suite-form-layout-legend {
    float: none;
    width: auto;
    margin: 0 0 16px;
    padding: 0;
    font-family: var(--studio-font);
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--studio-text);
}

.suite-form-layout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    min-width: 0;
}

@container (min-width: 720px) {
    .suite-form-layout-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.suite-form-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-family: var(--studio-font);
}

.suite-form-layout-grid > .suite-form-field-full,
.suite-form-field-full {
    grid-column: 1 / -1;
}

.suite-form-field-label-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    margin: 0 0 8px;
}

.suite-form-field .suite-form-field-label {
    display: inline;
    margin: 0;
    padding: 0;
    font-family: var(--studio-font);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: var(--studio-text);
    cursor: default;
}

.suite-form-field label.suite-form-field-label {
    cursor: pointer;
}

.suite-form-field-required {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--studio-danger);
}

.suite-form-field-control {
    min-width: 0;
}

/* Text-like controls fill the field. Never override a child's display (composite inputs such as .semail/.sphone are
   flex rows), and never stretch boolean controls (a full-width native checkbox renders as a bar). */
.suite-form-field-control > :not(input[type="checkbox"], input[type="radio"], fluent-checkbox, fluent-switch, fluent-radio, .form-check, .form-switch, .form-check-input, .rz-chkbox, .rz-radiobutton, .rz-switch, label, .suite-label) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.suite-form-field-short .suite-form-field-control > :not(input[type="checkbox"], input[type="radio"], fluent-checkbox, fluent-switch, fluent-radio, .form-check, .form-switch, .form-check-input, .rz-chkbox, .rz-radiobutton, .rz-switch, label, .suite-label) {
    max-width: 20rem;
}

/* A boolean control followed by its own label (RadzenCheckBox / InputCheckbox + SuiteLabel in the control slot) is one row:
   the box, then the label, vertically centred. */
.suite-form-field-control:has(> :is(.rz-chkbox, .rz-switch, input[type="checkbox"], .form-check-input)) {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--studio-control-height-compact, 32px);
}
.suite-form-field-control > :is(.rz-chkbox, .rz-switch, input[type="checkbox"], .form-check-input) {
    flex: none;
    width: auto;
}
.suite-form-field-control:has(> :is(.rz-chkbox, .rz-switch, input[type="checkbox"], .form-check-input)) > :is(label, .suite-label) {
    margin: 0;
    font-weight: 500;
}

.suite-form-field-help,
.suite-form-field-error {
    margin-top: 8px;
    font-family: var(--studio-font);
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
}

.suite-form-field-help {
    color: var(--studio-muted);
}

.suite-form-field-error {
    font-weight: 500;
    color: var(--studio-danger);
}

.suite-form-field-error:empty {
    display: none;
}

.suite-form-field-error .validation-message {
    margin: 0;
    font: inherit;
    color: inherit;
}

.suite-form-field-error .validation-message + .validation-message {
    margin-top: 4px;
}

/* Footer: a separate full-width row in normal flow; 16px block padding (inline 0 keeps its edges aligned with the
   header and panels), 1px top divider, Cancel then primary at the end; full width in DOM order below 640px. */
.suite-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: 960px;
    min-width: 0;
    margin: 0;
    padding: 16px 0;
    box-sizing: border-box;
    border-top: 1px solid var(--studio-divider);
    font-family: var(--studio-font);
}

.suite-form-actions-start {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--studio-muted);
}

.suite-form-actions-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-inline-start: auto;
}

@media (max-width: 639.98px) {
    .suite-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .suite-form-actions-buttons {
        flex-direction: column;
        align-items: stretch;
        margin-inline-start: 0;
    }

    .suite-form-actions-buttons > * {
        width: 100%;
    }
}

/* Save-failure summary (shadcn Alert destructive): focused on failure, lists the problems with links to the invalid
   fields. */
.suite-form-error-summary {
    padding: 16px;
    box-sizing: border-box;
    background: var(--studio-danger-surface);
    color: var(--studio-text);
    border: 1px solid color-mix(in srgb, var(--studio-danger) 50%, transparent);
    border-radius: 8px;
    font-family: var(--studio-font);
    font-size: 14px;
    line-height: 20px;
}

.suite-form-error-summary:focus {
    outline: none;
}

.suite-form-error-summary:focus-visible {
    outline: none;
    box-shadow: var(--studio-focus-ring);
}

.suite-form-error-summary-title {
    margin: 0 0 8px;
    font-weight: 600;
    color: var(--studio-danger);
}

.suite-form-error-summary ul {
    margin: 0;
    padding-inline-start: 20px;
}

.suite-form-error-summary li + li {
    margin-top: 4px;
}

.suite-form-error-summary a {
    color: var(--studio-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.suite-form-error-summary a:hover {
    color: var(--studio-accent);
}

/* Section panels (SuitePageSectionComponent): the scoped sheet draws the panel from --studio-surface and
   --studio-divider (zinc-950 card, zinc-800 border, 24px padding). The title and description are restated here at
   (0,3,0), above the scoped (0,2,0) rules, to the CardTitle 16/24 600 and CardDescription 14/20 muted sizes. */
:root .suite-page-section .suite-page-section-title {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--studio-text);
}

:root .suite-page-section .suite-page-section-description {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--studio-muted);
}

:root .suite-page-section .suite-page-section-heading {
    gap: 6px;
}

/* Grids run edge to edge in a flush section: the panel already draws the border. */
.suite-page-section-flush .rz-data-grid {
    border: 0;
    border-radius: 0 0 8px 8px;
}

/* ---------------------------------------------------------------------------------------------------------------------
   7. Input anatomy for the v5 web components (shadcn Input / Textarea / Select / Checkbox / Switch / Radio).
      Element map (read from the 5.0.0 lib.module.js templates and the live DOM):
        FluentTextInput (SuiteTextField, number, search, email, phone, URL, tax id, autocomplete, date and time
          text parts) -> fluent-text-input: box = part "root", native input = part "control"
        FluentTextArea  -> fluent-textarea: box = part "root", native textarea = part "control"
        FluentSelect    -> fluent-dropdown (+ fluent-listbox / fluent-option), painted from the bridge tokens
        FluentField     -> fluent-field: label / input / message slots around the control
        FluentCheckbox / FluentRadio / FluentSwitch -> fluent-checkbox / fluent-radio / fluent-switch
      ::part() rules come from the document tree, so they beat the shadow styles (including :host(:hover) and
      :host(:focus-within) state rules) for normal declarations; each state is therefore restated here.
      shadcn Input: 36px (32px compact), rounded-md, 1px input border, transparent fill in dark (white in light per
      the contract), px-3, 14/20 text, placeholder muted, focus = the shared 2px ring with a 2px offset and NO
      coloured underline, disabled opacity 0.5.
   --------------------------------------------------------------------------------------------------------------------- */

/* Hosts never draw a box of their own. Legacy bundles (Bootstrap .form-control, abs.tweaks.forms.css) and class
   passthrough (Class="form-control") used to paint a border and padding on the host, which, around v5's own inner
   box, rendered a second, inset input. (0,2,1) with !important on the size properties the legacy sheet forces. */
:root fluent-text-input,
:root fluent-textarea {
    box-sizing: border-box;
    max-width: 100%;
    margin: 0;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    outline: none;
    font-family: var(--studio-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--studio-text);
    /* the Fluent 2 focus underline (compound brand) is replaced by the ring */
    --colorCompoundBrandStroke: transparent;
    --colorCompoundBrandStrokeHover: transparent;
    --colorCompoundBrandStrokePressed: transparent;
    --focus-indicator-color: transparent;
}

:root fluent-text-input.form-control,
:root fluent-textarea.form-control {
    height: auto !important;
    min-height: 0 !important;
}

/* Inputs fill their field (contract: controls fill their cell). */
:root fluent-field:has(> fluent-text-input, > fluent-textarea, > fluent-dropdown),
:root .suite-form-field-control fluent-text-input,
:root .suite-form-field-control fluent-textarea,
:root .suite-form-field-control fluent-dropdown,
:root .form-group fluent-text-input,
:root .form-group fluent-textarea {
    width: 100%;
}

:root fluent-text-input::part(root),
:root fluent-textarea::part(root) {
    box-sizing: border-box;
    width: 100%;
    background: var(--studio-input-bg);
    border: 1px solid var(--studio-control-border);
    border-radius: var(--studio-control-radius);
    box-shadow: none;
    outline: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

:root fluent-text-input::part(root) {
    height: var(--studio-control-height);
    min-height: var(--studio-control-height);
    padding: 0 12px;
    gap: 8px;
}

:root:root fluent-textarea {
    height: auto !important; /* FluentTextArea writes an inline rows-based height that the box outgrew */
    min-height: 0;
}

:root fluent-textarea::part(root) {
    min-height: 64px;
    padding: 8px 12px;
}

:root fluent-text-input::part(control),
:root fluent-textarea::part(control) {
    padding: 0;
    background: transparent;
    color: var(--studio-text);
    font-family: var(--studio-font);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

:root fluent-text-input::part(control)::placeholder,
:root fluent-textarea::part(control)::placeholder {
    color: var(--studio-placeholder);
    opacity: 1;
}

/* Leading / trailing icons (slot start / end) are muted and 16 to 20px. */
:root fluent-text-input > [slot="start"],
:root fluent-text-input > [slot="end"] {
    color: var(--studio-muted);
}

:root:root fluent-text-input:not([disabled]):not([readonly]):hover::part(root),
:root:root fluent-textarea:not([disabled]):not([readonly]):hover::part(root) {
    border: 1px solid var(--studio-control-border-hover);
}

:root:root fluent-text-input:not([disabled]):focus-within::part(root),
:root:root fluent-textarea:not([disabled]):focus-within::part(root) {
    border: 1px solid var(--studio-control-border-hover);
    outline: none;
    box-shadow: var(--studio-focus-ring);
}

/* Error: FluentField carries "invalid" from the EditContext; aria-invalid covers custom wiring. */
:root:root fluent-field.invalid fluent-text-input::part(root),
:root:root fluent-field.invalid fluent-textarea::part(root),
:root:root fluent-text-input.invalid::part(root),
:root:root fluent-textarea.invalid::part(root),
:root:root fluent-text-input[aria-invalid="true"]::part(root),
:root:root fluent-textarea[aria-invalid="true"]::part(root) {
    border-color: var(--studio-danger);
}

:root fluent-text-input[disabled],
:root fluent-textarea[disabled],
:root fluent-dropdown[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

:root:root fluent-text-input[disabled]::part(root),
:root:root fluent-textarea[disabled]::part(root),
:root:root fluent-text-input[readonly]::part(root),
:root:root fluent-textarea[readonly]::part(root) {
    background: var(--studio-input-readonly-bg);
    border: 1px solid var(--studio-control-border);
}

/* Composite Suite inputs (phone, tax id, email, web URL, money) draw ONE box around inner fields: the inner Fluent
   boxes lose their border and ring (section 9 draws the outer box and its ring). */
:root:root :is(.sphone, .staxid, .semail, .sweburl, .money-input-container) fluent-text-input::part(root) {
    border-color: transparent;
    box-shadow: none;
    background: transparent;
}

/* Field chrome (FluentField label / message, when a control gets Label=...): the label anatomy, 8px to the
   control, messages 13/18 beneath. */
:root fluent-field > label[slot="label"],
:root fluent-field > [slot="label"] {
    padding: 0 0 8px;
    font-family: var(--studio-font);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--studio-text);
}

:root fluent-field > fluent-text[slot="message"]:empty {
    display: none;
}

:root fluent-field > [slot="message"] {
    margin-top: 4px;
    font-size: 13px;
    line-height: 18px;
}

/* Select (fluent-dropdown): full width of its field, the control height, and the input border and fill from the
   bridge tokens (Stroke1 / StrokeAccessible / Background1). */
:root fluent-dropdown {
    min-width: 0;
    max-width: 100%;
    min-height: var(--studio-control-height);
    font-family: var(--studio-font);
    font-size: 14px;
    color: var(--studio-text);
    --colorNeutralBackground1: var(--studio-input-bg);
    --colorCompoundBrandStroke: transparent;
    --colorCompoundBrandStrokeHover: transparent;
    --colorCompoundBrandStrokePressed: transparent;
}

:root fluent-dropdown:focus-within {
    border-radius: var(--studio-control-radius);
    box-shadow: var(--studio-focus-ring);
}

/* Popovers, listboxes and menus (shadcn Popover / SelectContent / DropdownMenuContent): raised surface, 1px divider,
   rounded-md, shadow-md, 4px inner padding; items rounded-sm with the zinc hover. fluent-menu is NOT a surface in v5:
   it is the wrapper around the trigger and its fluent-menu-list, so it stays transparent (it drew a bordered box
   around every grid "Actions" button and every header menu button). */
:root fluent-menu {
    display: inline-flex;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

:root fluent-menu-list,
:root fluent-listbox {
    box-sizing: border-box;
    min-width: 8rem;
    padding: 4px;
    background: var(--studio-raised);
    color: var(--studio-text);
    border: 1px solid var(--studio-divider);
    border-radius: var(--studio-control-radius);
    box-shadow: var(--studio-popover-shadow);
}

:root fluent-option,
:root fluent-menu-item {
    min-height: 32px;
    padding: 6px 8px;
    border-radius: 4px;
    background: transparent;
    font-family: var(--studio-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--studio-text);
}

:root fluent-option:not([disabled]):hover,
:root fluent-menu-item:not([disabled]):hover,
:root fluent-option[active],
:root fluent-menu-item:focus-visible {
    background: var(--studio-hover);
    color: var(--studio-text);
}

:root fluent-option[aria-selected="true"],
:root fluent-option[selected] {
    background: var(--studio-accent-tint);
    color: var(--studio-text);
}

/* Autocomplete popup (FluentAutocomplete renders fluent-popover-b > stack > header + fluent-listbox + footer next to
   its field): the raised surface, and the inner listbox flat inside it. In single mode the inner list is still a
   multi-select list (Fluent always renders it with Multiple=true), so its check boxes are hidden there; the
   selected option keeps the accent tint. SuiteAutocomplete marks the mode on the field. */
:root fluent-popover-b {
    color: var(--studio-text);
    --colorNeutralBackground1: var(--studio-raised);
}

:root fluent-popover-b fluent-listbox {
    width: 100%;
    max-width: 100%;
    padding: 4px;
    border: 0;
    box-shadow: none;
    background: transparent;
}

/* Single-select check indicator and the selected-value layout moved to studio-selectors.css (selector helper). */

/* Cards and dialogs (shadcn Card / Dialog): surface, 1px divider border, panel radius, no elevation on cards. */
:root fluent-card {
    background: var(--studio-surface);
    border: 1px solid var(--studio-divider);
    border-radius: var(--studio-panel-radius);
    box-shadow: none;
}

:root fluent-dialog::part(dialog) {
    background: var(--studio-surface);
    color: var(--studio-text);
    border: 1px solid var(--studio-divider);
    border-radius: var(--studio-panel-radius);
}

/* Checkbox / radio (shadcn Checkbox / RadioGroupItem): 16px box, unchecked border = the check border; checked fill =
   the studio accent through the bridge (compound brand). Labels 14/20 weight 500 in the text colour. */
:root fluent-checkbox,
:root fluent-radio,
:root fluent-switch {
    color: var(--studio-text);
    font-family: var(--studio-font);
    font-size: 14px;
    line-height: 20px;
    --colorNeutralStrokeAccessible: var(--studio-check-border);
    --colorNeutralStrokeAccessibleHover: var(--studio-control-border-hover);
    --colorNeutralStrokeAccessiblePressed: var(--studio-control-border-hover);
}

:root fluent-checkbox:focus-visible,
:root fluent-radio:focus-visible,
:root fluent-switch:focus-visible {
    outline: none;
    border-radius: 4px;
    box-shadow: var(--studio-focus-ring);
}

:root fluent-switch:focus-visible {
    border-radius: 999px;
}

:root fluent-checkbox[disabled],
:root fluent-radio[disabled],
:root fluent-switch[disabled] {
    opacity: 0.5;
}

/* A boolean control with its own label in a field (SuiteCheckbox / SuiteSwitch in a field control slot, settings
   rows): one row, the control then the label, vertically centred. */
:root .suite-form-field-control:has(> fluent-field > :is(fluent-checkbox, fluent-switch)),
:root .suite-form-field-control:has(> :is(fluent-checkbox, fluent-switch)) {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--studio-control-height-compact);
}

:root fluent-field:has(> :is(fluent-checkbox, fluent-switch, fluent-radio)) {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

:root fluent-field:has(> :is(fluent-checkbox, fluent-switch, fluent-radio)) > label[slot="label"] {
    padding: 0;
    font-weight: 500;
}

/* ---------------------------------------------------------------------------------------------------------------------
   8. Buttons (shadcn Button: h-9, px-4, rounded-md, text-sm font-medium; 32px compact via the density block in
      section 1). v5 elements: fluent-button, fluent-menu-button (menu triggers), fluent-anchor-button (links styled
      as buttons), fluent-toggle-button. Colours come from the bridge:
        primary          -> default   (zinc primary fill: colorBrandBackground)
        (no appearance)  -> secondary (contract reference button: surface fill + input border in light; zinc-800 in dark)
        outline          -> outline   (transparent, input border)
        subtle / transparent -> ghost (transparent, zinc hover)
      Anatomy restated on the host (outer rules beat :host): height, radius, 14/20 500 text, px-4 (px-3 compact), and
      NO 96px minimum width (Fluent 2 default): shadcn buttons size to their content, icon-only buttons are square.
      The shell (aside, header, subheader) is excluded from the size rule: it has its own icon-button rules below.
   --------------------------------------------------------------------------------------------------------------------- */
:root :is(fluent-button, fluent-menu-button, fluent-anchor-button, fluent-toggle-button) {
    box-sizing: border-box;
    min-width: 0;
    flex-shrink: 0;
    white-space: nowrap; /* a label never wraps to two lines inside a 36px button */
    height: var(--studio-control-height);
    min-height: var(--studio-control-height);
    padding: 0 16px;
    gap: 8px;
    border-radius: var(--studio-control-radius);
    font-family: var(--studio-font);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    background-image: none;
    box-shadow: none;
}

:root :is(fluent-toolbar, .card-toolbar, .suite-page-header-actions, .suite-page-section-actions, .rz-data-grid, .rz-toolbar, .fluent-data-grid, .suite-card-header) :is(fluent-button, fluent-menu-button, fluent-anchor-button) {
    padding: 0 12px;
}

/* secondary (no appearance attribute) */
:root :is(fluent-button, fluent-menu-button, fluent-anchor-button):not([appearance]) {
    background-color: var(--studio-button-secondary-bg);
    color: var(--studio-on-secondary);
    border-color: var(--studio-button-secondary-border);
}

:root :is(fluent-button, fluent-menu-button, fluent-anchor-button):not([appearance]):not([disabled]):hover {
    background-color: var(--studio-button-secondary-hover);
    color: var(--studio-on-secondary);
}

/* outline */
:root :is(fluent-button, fluent-menu-button, fluent-anchor-button)[appearance="outline"] {
    background-color: transparent;
    color: var(--studio-text);
    border-color: var(--studio-control-border);
}

:root :is(fluent-button, fluent-menu-button, fluent-anchor-button)[appearance="outline"]:not([disabled]):hover,
:root :is(fluent-button, fluent-menu-button, fluent-anchor-button)[appearance="outline"][aria-expanded="true"] {
    background-color: var(--studio-hover);
    color: var(--studio-text);
}

/* ghost */
:root :is(fluent-button, fluent-menu-button, fluent-anchor-button):is([appearance="subtle"], [appearance="transparent"]) {
    background-color: transparent;
    color: var(--studio-text);
    border-color: transparent;
}

:root :is(fluent-button, fluent-menu-button, fluent-anchor-button):is([appearance="subtle"], [appearance="transparent"]):not([disabled]):hover,
:root :is(fluent-button, fluent-menu-button, fluent-anchor-button):is([appearance="subtle"], [appearance="transparent"])[aria-expanded="true"] {
    background-color: var(--studio-hover);
    color: var(--studio-text);
}

/* primary keeps the bridge (zinc primary); restated so the legacy accent tints can never reach it */
:root :is(fluent-button, fluent-menu-button, fluent-anchor-button)[appearance="primary"] {
    background-color: var(--studio-primary);
    color: var(--studio-on-primary);
    border-color: transparent;
}

:root :is(fluent-button, fluent-menu-button, fluent-anchor-button)[appearance="primary"]:not([disabled]):hover {
    background-color: var(--studio-primary-hover);
    color: var(--studio-on-primary);
}

/* Icons in buttons follow the text colour (FluentIcon paints an inline fill, hence !important). */
:root :is(fluent-button, fluent-menu-button, fluent-anchor-button) svg {
    fill: currentColor !important;
    color: inherit;
}

:root :is(fluent-button, fluent-menu-button, fluent-anchor-button):focus-visible {
    outline: none;
    box-shadow: var(--studio-focus-ring);
}

:root :is(fluent-button, fluent-menu-button, fluent-anchor-button)[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Form footers: px-4 text buttons; below 640px full width in DOM order. */
@media (max-width: 639.98px) {
    :root .suite-form-actions :is(fluent-button, fluent-anchor-button) {
        width: 100%;
        justify-content: center;
    }
}

/* Icon-only buttons (shadcn Button variant ghost, size icon): a 32px square, transparent, zinc hover, whatever their
   appearance. v5 reflects icon-only to the host ([icon-only]); the SDK hooks stay for buttons that also carry text
   in a tooltip. Header / subheader / aside buttons are all icon-only ghosts. */
:root:root :is(fluent-button, fluent-menu-button, fluent-anchor-button):is([icon-only], .suite-icon-button, .col-options-button, .abs-topbar-iconbtn),
:root:root :is(#abs_header, #abs_header_mobile, #abs_subheader, .aside) :is(fluent-button, fluent-menu-button, fluent-anchor-button) {
    width: auto;
    min-width: var(--studio-control-height-compact);
    height: var(--studio-control-height-compact);
    min-height: var(--studio-control-height-compact);
    padding: 0 6px;
    background-color: transparent;
    color: var(--studio-text);
    border-color: transparent;
}

:root:root :is(fluent-button, fluent-menu-button, fluent-anchor-button):is([icon-only], .suite-icon-button, .col-options-button, .abs-topbar-iconbtn) {
    width: var(--studio-control-height-compact);
    padding: 0;
    justify-content: center;
}

:root:root :is(fluent-button, fluent-menu-button, fluent-anchor-button):is([icon-only], .suite-icon-button, .col-options-button, .abs-topbar-iconbtn):not([disabled]):hover,
:root:root :is(#abs_header, #abs_header_mobile, #abs_subheader, .aside) :is(fluent-button, fluent-menu-button, fluent-anchor-button):not([disabled]):hover,
:root:root :is(#abs_header, #abs_header_mobile, #abs_subheader, .aside) :is(fluent-button, fluent-menu-button)[aria-expanded="true"] {
    background-color: var(--studio-hover);
    color: var(--studio-text);
}

/* A primary icon-only button stays primary (the square, filled). */
:root:root :is(fluent-button, fluent-menu-button)[appearance="primary"]:is([icon-only], .suite-icon-button) {
    background-color: var(--studio-primary);
    color: var(--studio-on-primary);
}

/* ---------------------------------------------------------------------------------------------------------------------
   9. Legacy inputs. abs.tweaks.forms.css paints [data-theme="dark"] .form-control #0a0a0a with 1.375rem padding and
      fixes .form-control at 3rem !important; abs.tweaks.forms.css draws the composite Suite inputs (.sphone, .staxid,
      .semail, .sweburl, .money-input-container) and focuses them with an accent border. These rules ((0,3,0) and up,
      !important where the legacy rule is) bring them onto the shadcn Input anatomy.
   --------------------------------------------------------------------------------------------------------------------- */
:root:is([data-theme], :not([data-theme])) .form-control,
:root:is([data-theme], :not([data-theme])) .form-select {
    box-sizing: border-box;
    min-height: var(--studio-control-height);
    padding: 7px 12px;
    background-color: transparent;
    color: var(--studio-text);
    border: 1px solid var(--studio-control-border);
    border-radius: var(--studio-control-radius);
    box-shadow: none;
    font-family: var(--studio-font);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

:root:is([data-theme], :not([data-theme])) input.form-control,
:root:is([data-theme], :not([data-theme])) select.form-select:not([multiple]):not([size]) {
    height: var(--studio-control-height) !important;
}

:root:is([data-theme], :not([data-theme])) textarea.form-control {
    height: auto !important;
    min-height: 64px;
    padding-block: 8px;
}

:root:is([data-theme], :not([data-theme])) .form-select {
    padding-inline-end: 36px;
}

:root:is([data-theme], :not([data-theme])) .form-control::placeholder {
    color: var(--studio-placeholder);
    opacity: 1;
}

:root:is([data-theme], :not([data-theme])) .form-control:hover:not(:disabled):not([readonly]),
:root:is([data-theme], :not([data-theme])) .form-select:hover:not(:disabled) {
    border-color: var(--studio-control-border-hover);
}

:root:is([data-theme], :not([data-theme])) .form-control:focus,
:root:is([data-theme], :not([data-theme])) .form-select:focus {
    background-color: transparent;
    color: var(--studio-text);
    border-color: var(--studio-control-border-hover);
    outline: none;
    box-shadow: var(--studio-focus-ring);
}

:root:is([data-theme], :not([data-theme])) .form-control:disabled,
:root:is([data-theme], :not([data-theme])) .form-select:disabled {
    background-color: transparent;
    border-color: var(--studio-control-border);
    color: var(--studio-text);
    opacity: 0.5;
    cursor: not-allowed;
}

:root:is([data-theme], :not([data-theme])) .form-control[readonly] {
    background-color: transparent;
    border-color: var(--studio-control-border);
}

:root:is([data-theme], :not([data-theme])) .form-control.is-invalid,
:root:is([data-theme], :not([data-theme])) .form-select.is-invalid,
:root:is([data-theme], :not([data-theme])) .form-control.invalid {
    border-color: var(--studio-danger);
}

:root:is([data-theme], :not([data-theme])) .input-group-text {
    height: auto;
    min-height: var(--studio-control-height);
    background-color: transparent;
    color: var(--studio-muted);
    border: 1px solid var(--studio-control-border);
    border-radius: var(--studio-control-radius);
    font-family: var(--studio-font);
    font-size: 14px;
    line-height: 20px;
}

/* Composite Suite inputs: one transparent box, input border, the shared ring on focus. */
:root:is([data-theme], :not([data-theme])) .sphone,
:root:is([data-theme], :not([data-theme])) .staxid,
:root:is([data-theme], :not([data-theme])) .semail,
:root:is([data-theme], :not([data-theme])) .sweburl,
:root:is([data-theme], :not([data-theme])) .money-input-container {
    background: transparent;
    border-color: var(--studio-control-border);
    border-radius: var(--studio-control-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

:root:is([data-theme], :not([data-theme])) .money-input-container {
    overflow: visible;
}

:root:is([data-theme], :not([data-theme])) .sphone:focus-within,
:root:is([data-theme], :not([data-theme])) .staxid:focus-within,
:root:is([data-theme], :not([data-theme])) .semail:focus-within,
:root:is([data-theme], :not([data-theme])) .sweburl:focus-within,
:root:is([data-theme], :not([data-theme])) .money-input-container:focus-within {
    border-color: var(--studio-control-border-hover);
    box-shadow: var(--studio-focus-ring);
}

:root:is([data-theme], :not([data-theme])) .sphone.sphone-invalid,
:root:is([data-theme], :not([data-theme])) .staxid.staxid-invalid,
:root:is([data-theme], :not([data-theme])) .semail.semail-invalid,
:root:is([data-theme], :not([data-theme])) .sweburl.sweburl-invalid {
    border-color: var(--studio-danger);
}

:root:is([data-theme], :not([data-theme])) .sphone-input::placeholder,
:root:is([data-theme], :not([data-theme])) .staxid-input::placeholder {
    color: var(--studio-placeholder);
}

/* ---------------------------------------------------------------------------------------------------------------------
   10. Radzen inputs, popups and buttons (legacy pages and Suite wrappers over Radzen 11). Most of the anatomy flows
       from the --rz-* tokens in section 3 (input size, padding, border, focus shadow, button size, no gradients);
       these rules undo the abs.tweaks.radzen.dark.css hard paint (#0a0a0a fills, 1rem padding, 3.5rem dropdowns,
       1.5rem items, uppercase buttons) at (0,3,0) and up.
   --------------------------------------------------------------------------------------------------------------------- */
:root:is([data-theme], :not([data-theme])) .rz-textbox,
:root:is([data-theme], :not([data-theme])) .rz-textarea,
:root:is([data-theme], :not([data-theme])) .rz-dropdown,
:root:is([data-theme], :not([data-theme])) .rz-multiselect,
:root:is([data-theme], :not([data-theme])) .rz-numeric,
:root:is([data-theme], :not([data-theme])) .rz-autocomplete,
:root:is([data-theme], :not([data-theme])) .rz-datepicker > .rz-inputtext,
:root:is([data-theme], :not([data-theme])) .rz-timespanpicker > .rz-inputtext,
:root:is([data-theme], :not([data-theme])) .mask {
    box-sizing: border-box;
    min-height: var(--studio-control-height);
    background-color: transparent;
    color: var(--studio-text);
    border: 1px solid var(--studio-control-border);
    border-radius: var(--studio-control-radius);
    box-shadow: none;
    outline: none;
    font-family: var(--studio-font);
    font-size: 14px;
    line-height: 20px;
}

:root:is([data-theme], :not([data-theme])) .rz-textbox,
:root:is([data-theme], :not([data-theme])) .rz-datepicker > .rz-inputtext,
:root:is([data-theme], :not([data-theme])) .rz-timespanpicker > .rz-inputtext,
:root:is([data-theme], :not([data-theme])) .mask {
    height: var(--studio-control-height);
    padding: 0 12px;
}

:root:is([data-theme], :not([data-theme])) .rz-textarea {
    height: auto;
    min-height: 64px;
    padding: 8px 12px;
}

:root:is([data-theme], :not([data-theme])) .rz-numeric,
:root:is([data-theme], :not([data-theme])) .rz-autocomplete {
    height: var(--studio-control-height);
    padding: 0;
}

:root:is([data-theme], :not([data-theme])) .rz-numeric > .rz-inputtext,
:root:is([data-theme], :not([data-theme])) .rz-autocomplete > .rz-inputtext,
:root:is([data-theme], :not([data-theme])) .rz-autocomplete-input {
    height: 100%;
    padding: 0 12px;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--studio-text);
    font-size: 14px;
}

/* abs.tweaks.radzen.dark.css makes .rz-dropdown a 3.5rem inline-block with 0.8rem top padding and borders the label. */
:root:is([data-theme], :not([data-theme])) .rz-dropdown,
:root:is([data-theme], :not([data-theme])) .rz-multiselect {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    height: var(--studio-control-height);
    padding: 0;
}

:root:is([data-theme], :not([data-theme])) .rz-dropdown .rz-dropdown-label,
:root:is([data-theme], :not([data-theme])) .rz-multiselect .rz-multiselect-label {
    flex: 1 1 auto;
    margin: 0;
    padding: 0 0 0 12px;
    border: 0;
    background: transparent;
    color: var(--studio-text);
    font-size: 14px;
    line-height: 20px;
}

:root:is([data-theme], :not([data-theme])) .rz-dropdown .rz-placeholder,
:root:is([data-theme], :not([data-theme])) .rz-multiselect .rz-placeholder,
:root:is([data-theme], :not([data-theme])) .rz-textbox::placeholder,
:root:is([data-theme], :not([data-theme])) .rz-textarea::placeholder,
:root:is([data-theme], :not([data-theme])) .rz-inputtext::placeholder {
    color: var(--studio-placeholder);
    opacity: 1;
}

:root:is([data-theme], :not([data-theme])) .rz-dropdown-trigger,
:root:is([data-theme], :not([data-theme])) .rz-multiselect-trigger {
    color: var(--studio-muted);
    background: transparent;
}

:root:is([data-theme], :not([data-theme])) .rz-textbox:hover:not(:disabled):not(.rz-state-disabled),
:root:is([data-theme], :not([data-theme])) .rz-textarea:hover:not(:disabled):not(.rz-state-disabled),
:root:is([data-theme], :not([data-theme])) .rz-dropdown:hover:not(.rz-state-disabled),
:root:is([data-theme], :not([data-theme])) .rz-multiselect:hover:not(.rz-state-disabled),
:root:is([data-theme], :not([data-theme])) .rz-numeric:hover:not(.rz-state-disabled),
:root:is([data-theme], :not([data-theme])) .rz-autocomplete:hover:not(.rz-state-disabled),
:root:is([data-theme], :not([data-theme])) .rz-datepicker > .rz-inputtext:hover:not(:disabled) {
    border-color: var(--studio-control-border-hover);
    background-color: transparent;
}

:root:is([data-theme], :not([data-theme])) .rz-textbox:focus,
:root:is([data-theme], :not([data-theme])) .rz-textarea:focus,
:root:is([data-theme], :not([data-theme])) .rz-dropdown.rz-state-focused,
:root:is([data-theme], :not([data-theme])) .rz-dropdown:focus-within,
:root:is([data-theme], :not([data-theme])) .rz-multiselect.rz-state-focused,
:root:is([data-theme], :not([data-theme])) .rz-multiselect:focus-within,
:root:is([data-theme], :not([data-theme])) .rz-numeric:focus-within,
:root:is([data-theme], :not([data-theme])) .rz-autocomplete:focus-within,
:root:is([data-theme], :not([data-theme])) .rz-datepicker > .rz-inputtext:focus,
:root:is([data-theme], :not([data-theme])) .rz-timespanpicker > .rz-inputtext:focus,
:root:is([data-theme], :not([data-theme])) .mask:focus {
    background-color: transparent;
    border-color: var(--studio-control-border-hover);
    outline: none;
    box-shadow: var(--studio-focus-ring);
}

:root:is([data-theme], :not([data-theme])) .rz-textbox.rz-state-disabled,
:root:is([data-theme], :not([data-theme])) .rz-textbox:disabled,
:root:is([data-theme], :not([data-theme])) .rz-dropdown.rz-state-disabled,
:root:is([data-theme], :not([data-theme])) .rz-multiselect.rz-state-disabled,
:root:is([data-theme], :not([data-theme])) .rz-numeric.rz-state-disabled {
    background-color: transparent;
    opacity: 0.5;
    cursor: not-allowed;
}

:root:is([data-theme], :not([data-theme])) .rz-textbox.invalid,
:root:is([data-theme], :not([data-theme])) .rz-dropdown.invalid,
:root:is([data-theme], :not([data-theme])) .rz-numeric.invalid,
:root:is([data-theme], :not([data-theme])) .rz-textbox[aria-invalid="true"] {
    border-color: var(--studio-danger);
}

/* Popups (shadcn PopoverContent / SelectContent). */
:root:is([data-theme], :not([data-theme])) .rz-dropdown-panel,
:root:is([data-theme], :not([data-theme])) .rz-multiselect-panel,
:root:is([data-theme], :not([data-theme])) .rz-autocomplete-panel,
:root:is([data-theme], :not([data-theme])) .rz-splitbutton-menu,
:root:is([data-theme], :not([data-theme])) .rz-html-editor-dropdown-items,
:root:is([data-theme], :not([data-theme])) .rz-datepicker-popup,
:root:is([data-theme], :not([data-theme])) .rz-popup {
    background-color: var(--studio-raised);
    color: var(--studio-text);
    border: 1px solid var(--studio-divider);
    border-radius: var(--studio-control-radius);
    box-shadow: var(--studio-popover-shadow);
    transform: none;
}

:root:is([data-theme], :not([data-theme])) .rz-dropdown-item,
:root:is([data-theme], :not([data-theme])) .rz-multiselect-item,
:root:is([data-theme], :not([data-theme])) .rz-autocomplete-list-item {
    margin: 0;
    padding: 6px 8px;
    border-radius: 4px;
    font-family: var(--studio-font);
    font-size: 14px !important;
    line-height: 20px;
    color: var(--studio-text);
}

:root:is([data-theme], :not([data-theme])) .rz-dropdown-item:hover,
:root:is([data-theme], :not([data-theme])) .rz-multiselect-item:hover,
:root:is([data-theme], :not([data-theme])) .rz-autocomplete-list-item:hover,
:root:is([data-theme], :not([data-theme])) .rz-dropdown-item.rz-state-highlight,
:root:is([data-theme], :not([data-theme])) .rz-multiselect-item.rz-state-highlight {
    background-color: var(--studio-hover);
    color: var(--studio-text);
}

/* Checkbox / radio (Radzen): input border box, studio accent when on, no material ripple halo. */
:root:is([data-theme], :not([data-theme])) .rz-chkbox-box:not(.rz-state-active),
:root:is([data-theme], :not([data-theme])) .rz-radiobutton-box:not(.rz-state-active) {
    background-color: transparent;
    border: 1px solid var(--studio-check-border);
}

:root:is([data-theme], :not([data-theme])) .rz-chkbox-box.rz-state-active {
    background-color: var(--studio-accent);
    border: 1px solid var(--studio-accent);
    color: var(--studio-on-accent);
}

:root:is([data-theme], :not([data-theme])) .rz-radiobutton-box.rz-state-active {
    background-color: transparent;
    border: 1px solid var(--studio-accent);
}

:root:is([data-theme], :not([data-theme])) .rz-chkbox-box::after,
:root:is([data-theme], :not([data-theme])) .rz-radiobutton-box::after {
    display: none;
}

:root:is([data-theme], :not([data-theme])) .rz-chkbox-box:focus-visible,
:root:is([data-theme], :not([data-theme])) .rz-radiobutton-box:focus-visible,
:root:is([data-theme], :not([data-theme])) .rz-chkbox:focus-within .rz-chkbox-box,
:root:is([data-theme], :not([data-theme])) .rz-switch:focus-visible {
    outline: none;
    box-shadow: var(--studio-focus-ring);
}

/* Buttons (shadcn Button). Size: 36px md / 32px sm from the tokens; sentence case, 14px 500, no letter spacing.
   Variant map: filled .rz-primary (and .rz-button-primary) -> default, the ONLY Radzen element on the zinc primary
   fill (--rz-primary itself is the studio accent); .rz-secondary / .rz-base / .rz-light -> secondary;
   .rz-variant-outlined -> outline; .rz-variant-text -> ghost. Semantic colours (danger, success, warning, info) keep
   their hue. */
:root:is([data-theme], :not([data-theme])) .rz-button {
    border-radius: var(--studio-control-radius);
    font-family: var(--studio-font);
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    background-image: none;
    box-shadow: none;
}

:root:is([data-theme], :not([data-theme])) .rz-button.rz-button-md,
:root:is([data-theme], :not([data-theme])) .rz-button:not(.rz-button-sm):not(.rz-button-xs):not(.rz-button-lg):not(.rz-button-icon-only) {
    min-height: var(--rz-button-size-md);
    padding: 0 16px;
    font-size: 14px;
    line-height: 20px;
}

:root:is([data-theme], :not([data-theme])) .rz-button.rz-button-sm {
    min-height: var(--rz-button-size-sm);
    padding: 0 12px;
    font-size: 13px;
    line-height: 18px;
}

:root:is([data-theme], :not([data-theme])) .rz-button:is(.rz-primary, .rz-button-primary):not(.rz-variant-outlined):not(.rz-variant-text):not(.rz-variant-flat) {
    background-color: var(--studio-primary);
    color: var(--studio-on-primary);
}

:root:is([data-theme], :not([data-theme])) .rz-button:is(.rz-primary, .rz-button-primary):not(.rz-variant-outlined):not(.rz-variant-text):not(.rz-variant-flat):not(.rz-state-disabled):hover {
    background-color: var(--studio-primary-hover);
    color: var(--studio-on-primary);
}

/* The grid filter popup's Apply button is a primary button too. */
:root .rz-data-grid .rz-apply-filter,
:root .rz-grid-filter .rz-apply-filter {
    background-color: var(--studio-primary);
    color: var(--studio-on-primary);
}

:root:is([data-theme], :not([data-theme])) .rz-button:is(.rz-secondary, .rz-base, .rz-light):not(.rz-variant-outlined):not(.rz-variant-text),
:root:is([data-theme], :not([data-theme])) .rz-button.rz-primary.rz-variant-flat {
    background-color: var(--studio-secondary);
    color: var(--studio-on-secondary);
}

:root:is([data-theme], :not([data-theme])) .rz-button:is(.rz-secondary, .rz-base, .rz-light):not(.rz-variant-outlined):not(.rz-variant-text):not(.rz-state-disabled):hover,
:root:is([data-theme], :not([data-theme])) .rz-button.rz-primary.rz-variant-flat:not(.rz-state-disabled):hover {
    background-color: var(--studio-secondary-hover);
}

:root:is([data-theme], :not([data-theme])) .rz-button.rz-variant-outlined:is(.rz-primary, .rz-secondary, .rz-base, .rz-light, .rz-dark) {
    background-color: transparent;
    color: var(--studio-text);
    box-shadow: inset 0 0 0 1px var(--studio-control-border);
}

:root:is([data-theme], :not([data-theme])) .rz-button.rz-variant-outlined:is(.rz-primary, .rz-secondary, .rz-base, .rz-light, .rz-dark):not(.rz-state-disabled):hover {
    background-color: var(--studio-hover);
    color: var(--studio-text);
}

:root:is([data-theme], :not([data-theme])) .rz-button.rz-variant-text:is(.rz-primary, .rz-secondary, .rz-base, .rz-light, .rz-dark) {
    background-color: transparent;
    color: var(--studio-text);
}

:root:is([data-theme], :not([data-theme])) .rz-button.rz-variant-text:is(.rz-primary, .rz-secondary, .rz-base, .rz-light, .rz-dark):not(.rz-state-disabled):hover {
    background-color: var(--studio-hover);
    color: var(--studio-text);
}

:root:is([data-theme], :not([data-theme])) .rz-button:focus-visible {
    outline: none;
    box-shadow: var(--studio-focus-ring);
}

:root:is([data-theme], :not([data-theme])) .rz-button.rz-variant-outlined:focus-visible {
    box-shadow: inset 0 0 0 1px var(--studio-control-border), var(--studio-focus-ring);
}

:root:is([data-theme], :not([data-theme])) .rz-button.rz-state-disabled,
:root:is([data-theme], :not([data-theme])) .rz-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Pager: rounded-md, no gradient. The current page is a primary action surface, so it takes the zinc primary pair
   (contract: primary actions and selected primitives use the neutral primary; see 16.5). */
:root:is([data-theme], :not([data-theme])) .rz-pager-element {
    border-radius: var(--studio-control-radius);
    background-image: none;
}

/* ---------------------------------------------------------------------------------------------------------------------
   11. Grids (shadcn Table): header 40px, 13px weight 500 muted, row min-height 44px, zinc-800 row hairlines, no
       zebra, hover zinc-900 (dark), selected = the studio accent tint. Radzen variables are set on the grid element too,
       because Radzen redefines some of them on .rz-data-grid / density classes.
   --------------------------------------------------------------------------------------------------------------------- */
:root[data-theme],
:root:not([data-theme]),
html:root body,
:root .rz-data-grid {
    --rz-grid-background-color: transparent;
    --rz-grid-border-radius: 8px;
    --rz-grid-cell-color: var(--studio-text);
    --rz-grid-cell-font-size: 14px;
    --rz-grid-cell-line-height: 20px;
    --rz-grid-cell-padding: 12px 16px;
    --rz-grid-cell-border: 1px solid var(--studio-divider);
    --rz-grid-bottom-cell-border: 1px solid var(--studio-divider);
    --rz-grid-right-cell-border: 1px solid transparent;
    --rz-grid-header-cell-border: 1px solid transparent;
    --rz-grid-header-cell-border-bottom: 1px solid var(--studio-divider);
    --rz-grid-header-background-color: var(--studio-surface);
    --rz-grid-header-color: var(--studio-muted);
    --rz-grid-header-font-size: 13px;
    --rz-grid-header-font-weight: 500;
    --rz-grid-header-line-height: 20px;
    --rz-grid-header-padding: 10px 16px;
    --rz-grid-header-sorted-background-color: var(--studio-surface);
    --rz-grid-header-filter-icon-hover-color: var(--studio-text);
    --rz-grid-header-filter-icon-active-color: var(--studio-text);
    --rz-grid-sort-icon-color: var(--studio-muted);
    --rz-grid-stripe-background-color: transparent;
    --rz-grid-stripe-odd-background-color: transparent;
    --rz-grid-hover-background-color: var(--studio-row-hover);
    --rz-grid-hover-color: var(--studio-text);
    --rz-grid-selected-background-color: var(--studio-accent-tint);
    --rz-grid-selected-color: var(--studio-text);
    --rz-grid-cell-focus-background-color: var(--studio-accent-tint);
    --rz-grid-cell-focus-color: var(--studio-text);
    --rz-grid-toolbar-background-color: var(--studio-surface);
    --rz-grid-foot-background-color: var(--studio-surface);
    --rz-grid-foot-cell-color: var(--studio-text);
    --rz-grid-filter-background-color: var(--studio-surface);
    --rz-grid-filter-color: var(--studio-muted);
    --rz-grid-filter-focus-color: var(--studio-text);
    --rz-grid-filter-buttons-background-color: var(--studio-raised);
    --rz-grid-apply-filter-button-background-color: var(--studio-primary);
    --rz-grid-apply-filter-button-color: var(--studio-on-primary);
    --rz-grid-clear-filter-button-background-color: var(--studio-secondary);
    --rz-grid-clear-filter-button-color: var(--studio-on-secondary);
    --rz-grid-frozen-cell-background-color: var(--studio-surface);
    --rz-grid-detail-template-background-color: var(--studio-surface);
    --rz-grid-group-header-item-background-color: var(--studio-surface);
    --rz-grid-group-header-item-border: 1px solid var(--studio-divider);
    --rz-grid-column-resizer-helper-background-color: var(--studio-control-border-hover);
}

:root .rz-data-grid {
    font-family: var(--studio-font);
    font-variant-numeric: tabular-nums;
    background-color: var(--studio-surface);
    border-color: var(--studio-divider);
    box-shadow: none;
}

/* Legacy row paint (abs.tweaks.radzen.dark.css: odd rows --abs-gray-100, 60px rows, 1rem cells): no zebra. The row
   structure in the striped selector sits in :where() so this rule stays (0,3,1) and the hover / selected rules below
   (0,5,1) win on every row. */
:root:is([data-theme], :not([data-theme])) .rz-datatable-odd > td,
:root:is([data-theme], :not([data-theme])) .rz-datatable-even > td,
:root:is([data-theme], :not([data-theme])) .rz-grid-table-striped :where(tbody tr:not(.rz-expanded-row-content):nth-child(odd)) > td {
    height: var(--studio-grid-row-height);
    background-color: transparent;
}

/* Frozen (sticky) columns must stay OPAQUE or scrolled cells show through them: the card surface at rest (zinc-950 /
   white), at (0,4,1) above the transparent rule; the hover and selected rules below are opaque too (row hover is a
   solid zinc, the accent tint is mixed into the surface) and still win at (0,5,1). */
:root:is([data-theme], :not([data-theme])) .rz-data-grid td.rz-frozen-cell,
:root:is([data-theme], :not([data-theme])) .rz-data-grid th.rz-frozen-cell {
    background-color: var(--studio-surface);
}

:root:is([data-theme], :not([data-theme])) .rz-data-grid .rz-data-row:hover > td,
:root:is([data-theme], :not([data-theme])) .rz-data-grid .rz-data-row:hover:not(.rz-state-highlight) > td {
    background-color: var(--studio-row-hover);
}

:root:is([data-theme], :not([data-theme])) .rz-data-grid .rz-data-row.rz-state-highlight > td,
:root:is([data-theme], :not([data-theme])) .rz-data-grid .rz-data-row[aria-selected="true"] > td {
    background-color: var(--studio-accent-tint);
}

:root:is([data-theme], :not([data-theme])) .rz-datatable-data td .rz-cell-data {
    font-size: 14px;
    line-height: 20px;
    color: var(--studio-text);
}

:root .rz-data-grid thead th {
    height: var(--studio-grid-header-height);
    background-color: var(--studio-surface);
}

:root .rz-data-grid .rz-column-title,
:root .rz-data-grid .rz-column-title-content {
    font-size: 13px;
    font-weight: 500;
    color: var(--studio-muted);
    text-transform: none;
    letter-spacing: normal;
}

/* Filter row: compact (32px) inputs from the density block in section 1, on the card background. */
:root .rz-data-grid .rz-cell-filter {
    background-color: var(--studio-surface);
    border-top: 1px solid var(--studio-divider);
}

/* FluentDataGrid (table.fluent-data-grid): the same table anatomy. Scoped FluentUI rules are (0,1,1) to (0,2,1). */
:root table.fluent-data-grid th,
:root table.fluent-data-grid td {
    border-bottom: 1px solid var(--studio-divider);
}

:root table.fluent-data-grid td {
    height: var(--studio-grid-row-height);
    padding: 12px 16px;
    font-size: 14px;
    line-height: 20px;
    color: var(--studio-text);
}

:root table.fluent-data-grid th,
:root table.fluent-data-grid .column-header {
    height: var(--studio-grid-header-height);
    font-size: 13px;
    font-weight: 500;
    color: var(--studio-muted);
}

:root table.fluent-data-grid .column-header fluent-button {
    color: var(--studio-muted);
    font-size: 13px;
}

:root table.fluent-data-grid tbody tr:hover > td {
    background-color: var(--studio-row-hover);
}

:root table.fluent-data-grid tbody tr[aria-selected="true"] > td {
    background-color: var(--studio-accent-tint);
}

/* ---------------------------------------------------------------------------------------------------------------------
   12. Live-review corrections (dark first; light follows through the same tokens).
       a. Buttons in grids are shadcn outline; menu buttons in header rows are ghost; one primary per action row.
       b. Shell chrome (colour, radius and decoration only): the React-mounted aside menu, aside search, identity
          switcher, breadcrumbs and context indicator render Fluent UI React v9 inside their own FluentProvider, whose
          tokens do not track dark mode; they are remapped to the studio tokens on those providers only.
       c. Validation text, the scroll-to-top button, grid persona avatars.
       d. Header-strip noise: search scope chip, muted header icons, zero counter badges hidden.
   --------------------------------------------------------------------------------------------------------------------- */

/* a1. Grid buttons (outline, 32px): moved to studio-cells.css (C1). */

/* a2. Menu buttons in page and section header action rows, and the SDK action menus that pass a title (the
       *ActionsMenuComponent family, kebab menus): ghost, 32px, auto width (icon + chevron). */
:root:root .suite-page-header-actions fluent-menu-button,
:root:root .suite-page-section-actions fluent-menu-button,
:root:root .suite-record-header-actions fluent-menu-button[title],
:root:root fluent-menu-button[title]:not([appearance="primary"]) {
    height: var(--studio-control-height-compact);
    min-height: var(--studio-control-height-compact);
    padding: 0 8px;
    background-color: transparent;
    color: var(--studio-text);
    border-color: transparent;
}

:root:root .suite-page-header-actions fluent-menu-button:not([disabled]):hover,
:root:root .suite-page-section-actions fluent-menu-button:not([disabled]):hover,
:root:root fluent-menu-button[title]:not([appearance="primary"]):not([disabled]):hover,
:root:root fluent-menu-button[title][aria-expanded="true"] {
    background-color: var(--studio-hover);
    color: var(--studio-text);
}

/* a3. One primary per action row (shadcn: one default button, the rest outline). Any primary button followed by
       another primary sibling renders as outline, so the LAST primary in a row stays primary. */
:root:root :is(fluent-button, fluent-anchor-button)[appearance="primary"]:has(~ :is(fluent-button, fluent-anchor-button)[appearance="primary"]) {
    background-color: transparent;
    color: var(--studio-text);
    border-color: var(--studio-control-border);
}

:root:root :is(fluent-button, fluent-anchor-button)[appearance="primary"]:has(~ :is(fluent-button, fluent-anchor-button)[appearance="primary"]):not([disabled]):hover {
    background-color: var(--studio-hover);
    color: var(--studio-text);
}

/* b1. Fluent UI React v9 providers in the shell (aside menu, aside search, identity switcher, breadcrumbs, context
       indicator): provider surface transparent, v9 colour tokens on the studio tokens. Provider token classes are
       (0,1,0); these are (0,3,1). */
html:root .aside .fui-FluentProvider,
html:root #abs_aside .fui-FluentProvider,
html:root #abs_subheader .fui-FluentProvider,
html:root #abs_aside_secondary_footer .fui-FluentProvider {
    --colorNeutralBackground1: var(--studio-bg);
    --colorNeutralBackground1Hover: var(--studio-hover);
    --colorNeutralBackground1Pressed: var(--studio-hover);
    --colorNeutralBackground1Selected: var(--studio-hover);
    --colorNeutralBackground2: var(--studio-bg);
    --colorNeutralBackground2Hover: var(--studio-hover);
    --colorNeutralBackground2Pressed: var(--studio-hover);
    --colorNeutralBackground3: var(--studio-bg);
    --colorNeutralForeground1: var(--studio-text);
    --colorNeutralForeground1Hover: var(--studio-text);
    --colorNeutralForeground2: var(--studio-text);
    --colorNeutralForeground2Hover: var(--studio-text);
    --colorNeutralForeground2Pressed: var(--studio-text);
    --colorNeutralForeground3: var(--studio-muted);
    --colorNeutralForeground3Hover: var(--studio-text);
    --colorNeutralForeground4: var(--studio-placeholder);
    --colorNeutralStroke1: var(--studio-divider);
    --colorNeutralStroke1Hover: var(--studio-control-border-hover);
    --colorNeutralStroke1Pressed: var(--studio-control-border-hover);
    --colorNeutralStroke2: var(--studio-divider);
    --colorNeutralStrokeAccessible: var(--studio-control-border);
    --colorNeutralStrokeAccessibleHover: var(--studio-control-border-hover);
    --colorNeutralStrokeAccessiblePressed: var(--studio-control-border-hover);
    --colorCompoundBrandStroke: var(--studio-control-border-hover);
    --colorCompoundBrandStrokePressed: var(--studio-control-border-hover);
    --colorSubtleBackground: transparent;
    --colorSubtleBackgroundHover: var(--studio-hover);
    --colorSubtleBackgroundPressed: var(--studio-hover);
    --colorSubtleBackgroundSelected: var(--studio-hover);
    --colorTransparentBackgroundHover: var(--studio-hover);
    --colorBrandBackground2: var(--studio-hover);
    --colorBrandForeground1: var(--studio-text);
    --colorBrandBackground: var(--studio-primary);
    --colorBrandBackgroundHover: var(--studio-primary-hover);
    --colorBrandBackgroundPressed: var(--studio-primary-hover);
    --colorBrandBackgroundSelected: var(--studio-primary);
    --colorCompoundBrandBackground: var(--studio-primary);
    --colorCompoundBrandBackgroundHover: var(--studio-primary-hover);
    --colorCompoundBrandForeground1: var(--studio-text);
    --colorNeutralForegroundOnBrand: var(--studio-on-primary);
    --colorBrandStroke1: var(--studio-control-border-hover);
    --colorStrokeFocus1: var(--studio-bg);
    --colorStrokeFocus2: var(--studio-ring);
    background-color: transparent;
    color: var(--studio-text);
}

/* b2. Aside menu rows (menuTree.tsx: the row pill is .fui-TreeItemLayout, active = .abs-row-active): hover and active
       are zinc-800 with zinc-50 text in dark (zinc-100 / zinc-900 light), radius 6. No underline on menu links. */
html:root .aside .fui-TreeItemLayout {
    border-radius: var(--studio-control-radius);
}

html:root .aside .fui-TreeItemLayout:hover,
html:root .aside .fui-TreeItemLayout.abs-row-active,
html:root .aside .menu-item.here > .menu-link,
html:root .aside .menu-link.active {
    background-color: var(--studio-hover);
    color: var(--studio-text);
}

html:root .aside .fui-TreeItemLayout:hover .menu-title,
html:root .aside .fui-TreeItemLayout:hover .menu-title b,
html:root .aside .fui-TreeItemLayout:hover .menu-icon,
html:root .aside .fui-TreeItemLayout.abs-row-active .menu-title,
html:root .aside .fui-TreeItemLayout.abs-row-active .menu-title b,
html:root .aside .fui-TreeItemLayout.abs-row-active .menu-icon,
html:root .aside .fui-TreeItemLayout.abs-row-active .fui-TreeItemLayout__expandIcon {
    color: var(--studio-text);
}

html:root .aside a.menu-link,
html:root .aside a.menu-link:hover,
html:root .aside a.menu-link:focus,
html:root .aside a.menu-link:focus-visible,
html:root .aside a.menu-link .menu-title {
    text-decoration: none !important;
}

/* b3. Breadcrumbs and the context indicator (subheader, React): ghost chips. */
html:root #Breadcrumbs .fui-BreadcrumbButton,
html:root #context-indicator button {
    background-color: transparent;
    color: var(--studio-text);
    border-radius: var(--studio-control-radius);
}

html:root #Breadcrumbs .fui-BreadcrumbButton:hover,
html:root #context-indicator button:hover {
    background-color: var(--studio-hover);
    color: var(--studio-text);
}

/* d. Header-strip noise (shell, colour only; flags untouched).
   d1. Aside search scope pill (menuSearch.tsx scopeButton, data-test-class="menu-search-scope"): secondary chip,
       no brand blue. */
html:root .aside button[data-test-class="menu-search-scope"],
html:root #abs-contextual-menu button[data-test-class="menu-search-scope"] {
    background-color: var(--studio-secondary);
    background-image: none;
    color: var(--studio-on-secondary);
    border-color: transparent;
    border-radius: var(--studio-control-radius);
    box-shadow: none;
}

html:root .aside button[data-test-class="menu-search-scope"]:hover,
html:root #abs-contextual-menu button[data-test-class="menu-search-scope"]:hover {
    background-color: var(--studio-secondary-hover);
    color: var(--studio-on-secondary);
}

html:root .aside button[data-test-class="menu-search-scope"] svg,
html:root #abs-contextual-menu button[data-test-class="menu-search-scope"] svg {
    color: inherit;
    fill: currentColor;
}

/* d2. Command bar icons (CommandBarComponent: .ms-CommandBar .ms-CommandButton-icon). The SuiteIcons paint an inline
       fill of var(--cb-fg); re-declaring --cb-fg on the icon span only mutes the icon and leaves the date and label
       text alone. Font icons (.ms-Icon, .ms-fontColor-themePrimary) take the colour; image icons
       (.custom-commandbar-icon, e.g. the blue Share.svg) are flattened to a zinc-400 silhouette with a filter
       (brightness(0) then invert(0.63) = #a1a1a1). The country / locale flags (.flag) are separate spans and keep
       their colours. Hover: zinc-50 dark / zinc-900 light. */
html:root .ms-CommandBar .ms-CommandButton-icon {
    --cb-fg: var(--studio-muted);
    color: var(--studio-muted) !important;
}

html:root .ms-CommandBar .ms-CommandButton-icon .ms-Icon {
    color: inherit !important;
}

html:root .ms-CommandBar .ms-CommandButton-button:hover .ms-CommandButton-icon {
    --cb-fg: var(--studio-text);
    color: var(--studio-text) !important;
}

html:root .ms-CommandBar .ms-CommandButton-icon img,
html:root .ms-CommandBar img.custom-commandbar-icon {
    filter: brightness(0) invert(0.63);
}

html[data-theme="dark"]:root .ms-CommandBar .ms-CommandButton-button:hover .ms-CommandButton-icon img,
html[data-theme="dark"]:root .ms-CommandBar .ms-CommandButton-button:hover img.custom-commandbar-icon {
    filter: brightness(0) invert(0.98);
}

html[data-theme="light"]:root .ms-CommandBar .ms-CommandButton-button:hover .ms-CommandButton-icon img,
html[data-theme="light"]:root .ms-CommandBar .ms-CommandButton-button:hover img.custom-commandbar-icon {
    filter: brightness(0) invert(0.094);
}

/* d3. Subheader top-right group (help, support, terminal...) and header topbar icon buttons (mail, cart, bell,
       tasks): icons zinc-400, hover foreground. FluentIcon paints an inline fill, hence !important on fill. */
html:root #abs_subheader .abs-subheader_actions svg,
html:root #abs_header .abs-topbar-group fluent-button svg,
html:root #abs_header .abs-topbar-iconbtn svg {
    fill: var(--studio-muted) !important;
    color: var(--studio-muted);
}

html:root #abs_subheader .abs-subheader_actions fluent-button:hover svg,
html:root #abs_subheader .abs-header_topbar-wrapper:hover svg,
html:root #abs_header .abs-topbar-group fluent-button:hover svg,
html:root #abs_header .abs-topbar-iconbtn:hover svg {
    fill: var(--studio-text) !important;
    color: var(--studio-text);
}

/* d4. Header counter badges (FluentCounterBadge renders div.fluentui-counterbadge with title="{Count}"): a zero count
       is hidden; non-zero badges keep their accent. */
html:root .abs-topbar-actions .fluentui-counterbadge[title="0"],
html:root #abs_header .fluentui-counterbadge[title="0"] {
    display: none;
}

/* c1. Validation text (Blazor <ValidationMessage> renders div.validation-message; FluentValidationMessage and summary
       lists included): 13px destructive. */
:root .validation-message,
:root .fluent-validation-message,
:root .validation-errors .validation-message,
:root ul.validation-errors li {
    margin-top: 8px;
    font-family: var(--studio-font);
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    color: var(--studio-danger);
}

/* c2. Scroll-to-top (#abs_scrolltop, Metronic .scrolltop): 32px secondary square, no orange. */
html:root #abs_scrolltop.scrolltop {
    width: var(--studio-control-height-compact);
    height: var(--studio-control-height-compact);
    border-radius: var(--studio-control-radius);
    background-color: var(--studio-secondary);
    background-image: none;
    color: var(--studio-on-secondary);
    box-shadow: none;
}

html:root #abs_scrolltop.scrolltop:hover {
    background-color: var(--studio-secondary-hover);
}

html:root #abs_scrolltop.scrolltop .svg-icon,
html:root #abs_scrolltop.scrolltop .svg-icon svg {
    color: var(--studio-on-secondary);
}

html:root #abs_scrolltop.scrolltop .svg-icon svg [fill]:not(.permanent):not(g) {
    fill: var(--studio-on-secondary);
}

/* c3. Persona cells in grids (SDK/Components/Cells/*GridCellComponent -> SuitePersona, 42px inline size): the avatar
       caps at 32px and the cell drops to 6px block padding, so rows sit at 44px. The avatar size is an inline style,
       hence !important. Hover-card personas (inside fluent-tooltip) keep their size. */
:root .rz-data-grid td .suite-persona-avatar:not(fluent-tooltip *),
:root .rz-data-grid td .suite-persona-avatar:not(fluent-tooltip *) > *,
:root .rz-data-grid td .suite-persona-avatar:not(fluent-tooltip *) img,
:root .fluent-data-grid td .suite-persona-avatar:not(fluent-tooltip *),
:root .fluent-data-grid td .suite-persona-avatar:not(fluent-tooltip *) > *,
:root .fluent-data-grid td .suite-persona-avatar:not(fluent-tooltip *) img {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px;
    font-size: 12px;
}

:root .rz-data-grid td:has(.suite-persona),
:root .fluent-data-grid td:has(.suite-persona) {
    padding-block: 6px;
}

/* ---------------------------------------------------------------------------------------------------------------------
   13. CEO light-mode pass (2026-10-08). Every colour below is a --studio-* token defined for light AND dark, and no
       rule keys on body[data-theme] or on FluentUI's own .dark class.
   --------------------------------------------------------------------------------------------------------------------- */

/* 13.1 Message bars (shadcn Alert) on v5's fluent-message-bar[intent]. Info (and no intent) is the neutral alert:
        surface fill, divider border, text colour; warning / error / success use the status tints with status text.
        The intent icon follows the text colour. Section-state panels that are not message bars but carry the same
        meaning (TenantSectionStateComponent error / empty) get the same anatomy. */
:root fluent-message-bar {
    min-height: 40px;
    padding-inline: 12px;
    background-color: var(--studio-surface);
    color: var(--studio-text);
    border: 1px solid var(--studio-divider);
    border-radius: var(--studio-panel-radius);
    font-family: var(--studio-font);
    font-size: 14px;
    line-height: 20px;
}

:root fluent-message-bar[intent="warning"] {
    background-color: var(--studio-status-warning-bg);
    color: var(--studio-status-warning-fg);
    border-color: var(--studio-status-warning-border);
}

:root fluent-message-bar[intent="error"] {
    background-color: var(--studio-status-danger-bg);
    color: var(--studio-status-danger-fg);
    border-color: var(--studio-status-danger-border);
}

:root fluent-message-bar[intent="success"] {
    background-color: var(--studio-status-success-bg);
    color: var(--studio-status-success-fg);
    border-color: var(--studio-status-success-border);
}

:root fluent-message-bar svg {
    fill: currentColor !important;
    color: inherit;
}

:root fluent-message-bar:not([intent]) svg,
:root fluent-message-bar[intent="info"] svg {
    fill: var(--studio-muted) !important;
}

:root fluent-message-bar :is(fluent-text, p, span, div) {
    color: inherit;
}

:root .tenant-section-state.tenant-section-state--error {
    background: var(--studio-status-danger-bg);
    color: var(--studio-status-danger-fg);
    border: 1px solid var(--studio-status-danger-border);
}

:root .tenant-section-state.tenant-section-state--error .tenant-section-state__title,
:root .tenant-section-state.tenant-section-state--error .tenant-section-state__description {
    color: var(--studio-status-danger-fg);
}

:root .tenant-section-state.tenant-section-state--error svg {
    fill: currentColor !important;
}

:root .tenant-section-state:not(.tenant-section-state--error) {
    background: var(--studio-surface);
    border: 1px dashed var(--studio-divider);
}

/* 13.2 Tabs (shadcn Tabs) on v5's fluent-tablist / fluent-tab: the list is a muted rounded track, the active tab a
        raised surface chip; inactive tabs are muted text without borders. v5 draws the selected and hover
        indicators as ::after / ::before bars (and an anchor-positioned ::after on the list, which strayed as a "|"
        beside the tabs); all of them are removed, the chip is the indicator. Keyboard focus keeps the shared ring.
        Vertical lists (Orientation.Vertical) follow SuiteNavTabs Vertical: no track, full-width rows, the active row
        a subtle filled pill. */
:root fluent-tablist {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    gap: 0;
    padding: 3px;
    background-color: var(--studio-tab-list);
    border-radius: var(--studio-panel-radius);
    overflow-x: auto;
    scrollbar-width: none;
}

:root fluent-tablist::after,
:root fluent-tablist::before,
:root fluent-tab::after,
:root fluent-tab::before {
    display: none !important;
    content: none !important;
}

:root:root fluent-tab {
    position: relative;
    height: 30px;
    min-height: 30px;
    padding: 0 12px;
    align-items: center;
    border: 0;
    border-radius: var(--studio-control-radius);
    background-color: transparent;
    color: var(--studio-muted);
    font-family: var(--studio-font);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: none;
    outline: none;
}

:root:root fluent-tab:hover {
    color: var(--studio-text);
}

:root:root fluent-tab[aria-selected="true"] {
    background-color: var(--studio-surface);
    color: var(--studio-text);
    font-weight: 500;
    box-shadow: var(--studio-tab-shadow);
}

:root:root fluent-tab:focus {
    outline: none;
}

:root:root fluent-tab:focus-visible {
    outline: none;
    box-shadow: var(--studio-focus-ring);
}

:root fluent-tab svg {
    width: 16px;
    height: 16px;
    fill: currentColor !important;
}

:root fluent-tablist[orientation="vertical"] {
    display: flex;
    flex-direction: column;
    width: 208px;
    padding: 0;
    gap: 2px;
    background-color: transparent;
    border-radius: 0;
    overflow: visible;
}

:root:root fluent-tablist[orientation="vertical"] fluent-tab {
    justify-content: flex-start;
    width: 100%;
    height: 36px;
    min-height: 36px;
    box-shadow: none;
}

:root:root fluent-tablist[orientation="vertical"] fluent-tab:hover {
    background-color: var(--studio-hover);
}

:root:root fluent-tablist[orientation="vertical"] fluent-tab[aria-selected="true"] {
    background-color: var(--studio-hover);
    color: var(--studio-text);
    box-shadow: none;
}

:root:root fluent-tablist[orientation="vertical"] fluent-tab:focus-visible {
    box-shadow: var(--studio-focus-ring);
}

/* Tab panels sit 16px under the list. */
:root .fluent-tabs > fluent-tablist + *,
:root .fluent-tab-panel {
    margin-top: 0;
}

:root .fluent-tabs:not(:has(> fluent-tablist[orientation="vertical"])) > fluent-tablist {
    margin-bottom: 16px;
}

/* Legacy Metronic tabs in page content (module detail pages): the same anatomy. The aside icon rail (.aside .nav) is
   not content and is untouched. */
html:root #abs_content :is(.nav-tabs, .nav-pills, .nav-line-tabs) {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 3px;
    border: 0;
    border-radius: var(--studio-panel-radius);
    background-color: var(--studio-tab-list);
}

html:root #abs_content :is(.nav-tabs, .nav-pills, .nav-line-tabs) .nav-link {
    margin: 0;
    padding: 5px 12px;
    border: 0;
    border-radius: var(--studio-control-radius);
    background-color: transparent;
    color: var(--studio-muted);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    box-shadow: none;
}

html:root #abs_content :is(.nav-tabs, .nav-pills, .nav-line-tabs) .nav-link:hover {
    color: var(--studio-text);
    background-color: transparent;
}

html:root #abs_content :is(.nav-tabs, .nav-pills, .nav-line-tabs) .nav-link.active,
html:root #abs_content :is(.nav-tabs, .nav-pills, .nav-line-tabs) .nav-item.show .nav-link {
    background-color: var(--studio-surface);
    color: var(--studio-text);
    border: 0;
    box-shadow: var(--studio-tab-shadow);
}

html:root #abs_content :is(.nav-tabs, .nav-pills, .nav-line-tabs) .nav-link:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

html:root #abs_content :is(.nav-tabs, .nav-pills, .nav-line-tabs) .nav-link.active:focus:not(:focus-visible) {
    box-shadow: var(--studio-tab-shadow);
}

html:root #abs_content :is(.nav-tabs, .nav-pills, .nav-line-tabs) .nav-link:focus-visible {
    outline: none;
    box-shadow: var(--studio-focus-ring);
}

/* 13.3 Aside / header Fluent v9 focus: no box after a mouse click; keyboard focus ([data-fui-focus-visible]) keeps the
        ring, now on the studio ring tokens (12b1 remaps --colorStrokeFocus1/2). */
html:root .aside :is(.fui-TreeItem, .fui-TreeItemLayout, .fui-Button, a, button):focus:not([data-fui-focus-visible]):not(:focus-visible),
html:root #abs_subheader :is(.fui-Button, a, button):focus:not([data-fui-focus-visible]):not(:focus-visible) {
    outline: none;
}

html:root .aside :is(.fui-TreeItem, .fui-TreeItemLayout):not([data-fui-focus-visible])::after,
html:root .aside .fui-TreeItem:not([data-fui-focus-visible]) > .fui-TreeItemLayout::after {
    border-color: transparent;
}

/* 13.4 Links and icons. fluent-anchor-button follows the button appearances (section 8). fluent-link (FluentLink /
        SuiteAnchor hypertext) is the studio accent through the bridge, no underline at rest, underline on hover.
        FluentIcons that still carry the legacy inline fill var(--accent-fill-rest) follow the text colour instead
        (inside a primary control that is the on-primary colour). */
:root fluent-link {
    color: var(--studio-accent);
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    text-decoration: none;
}

:root fluent-link:hover {
    color: var(--studio-accent-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

:root fluent-link:focus-visible {
    outline: none;
    border-radius: 2px;
    box-shadow: var(--studio-focus-ring);
}

:root svg[style*="--accent-fill-rest"] {
    fill: currentColor !important;
}

/* 13.5 Data grid column picker (Radzen .rz-column-picker > .rz-dropdown, "N columns showing"): a 32px outline trigger
        sized to its label, text left-aligned; its popup gets the popover anatomy. The empty first item is a column
        without a Title (the Actions column); it is hidden when its label is empty. */
:root:is([data-theme], :not([data-theme])) .rz-column-picker {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
}

:root:is([data-theme], :not([data-theme])) .rz-column-picker > .rz-dropdown {
    width: auto;
    min-width: 0;
    height: var(--studio-control-height-compact);
    min-height: var(--studio-control-height-compact);
    padding: 0 8px 0 12px;
    gap: 8px;
    background-color: transparent;
    border: 1px solid var(--studio-control-border);
    border-radius: var(--studio-control-radius);
    cursor: pointer;
}

:root:is([data-theme], :not([data-theme])) .rz-dropdown .rz-helper-hidden-accessible,
:root:is([data-theme], :not([data-theme])) .rz-multiselect .rz-helper-hidden-accessible {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

:root:is([data-theme], :not([data-theme])) .rz-column-picker > .rz-dropdown:hover {
    background-color: var(--studio-hover);
}

:root:is([data-theme], :not([data-theme])) .rz-column-picker > .rz-dropdown .rz-dropdown-label {
    flex: 0 1 auto;
    padding: 0;
    text-align: start;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--studio-text);
}

:root:is([data-theme], :not([data-theme])) .rz-multiselect-panel {
    box-sizing: border-box;
    padding: 4px;
    background-color: var(--studio-raised);
    border: 1px solid var(--studio-divider);
    border-radius: var(--studio-control-radius);
    box-shadow: var(--studio-popover-shadow);
}

:root:is([data-theme], :not([data-theme])) .rz-multiselect-panel .rz-multiselect-items,
:root:is([data-theme], :not([data-theme])) .rz-multiselect-panel .rz-multiselect-items-wrapper {
    margin: 0;
    padding: 0;
}

:root:is([data-theme], :not([data-theme])) .rz-multiselect-panel .rz-multiselect-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 8px;
    border-radius: 4px;
    color: var(--studio-text);
    font-size: 14px;
    line-height: 20px;
}

:root:is([data-theme], :not([data-theme])) .rz-multiselect-panel .rz-multiselect-item:hover {
    background-color: var(--studio-hover);
}

:root:is([data-theme], :not([data-theme])) .rz-multiselect-panel .rz-multiselect-item:has(.rz-multiselect-item-content:empty) {
    display: none;
}

/* Radzen positions popups from the WINDOW scroll offset, but the legacy shell made BODY the scroller
   (abs.tweaks.normalizer.css html, body { height: 100% } + abs.tweaks.body.css body { overflow-y: auto }), so on a
   scrolled page a popup opened ABOVE its trigger, over the filter row (measured: trigger at y 484, popup at y 34 after
   a 482px body scroll). The document scrolls on the root again: body grows with its content. */
html:root {
    height: auto;
    margin-left: 0;
}

html:root body {
    height: auto;
    min-height: 100vh;
    overflow: visible;
}

/* 13.6 Selects at 32px and 36px: the selected value centres vertically and never clips (Radzen dropdowns; the v5
        fluent-dropdown centres its own button). */
:root:is([data-theme], :not([data-theme])) .rz-dropdown .rz-dropdown-label {
    padding-block: 0;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 13.7 Grid cells: single-line cells truncate with an ellipsis (the legacy rule did this only under
        [data-theme="dark"]); persona cells keep their two lines. Link text in cells uses the foreground colour with an
        accent underline on hover, including FluentAnchor links whose text sits in the shadow part. */
:root:is([data-theme], :not([data-theme])) .rz-data-grid td .rz-cell-data {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:root:is([data-theme], :not([data-theme])) .rz-data-grid td:has(.suite-persona) .rz-cell-data {
    white-space: normal;
}

:root:is([data-theme], :not([data-theme])) .rz-data-grid td:not(:has(.suite-persona)) .rz-cell-data > :is(h1, h2, h3, h4, h5, h6, p, div:not([class*="stack"])) {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:root:is([data-theme], :not([data-theme])) .rz-data-grid td .rz-cell-data :is(b, strong) {
    color: var(--studio-text);
}

:root .rz-data-grid td fluent-link {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    color: var(--studio-text);
    text-decoration: none;
}

:root .rz-data-grid td fluent-link:hover {
    text-decoration: underline;
    text-decoration-color: var(--studio-accent);
    text-underline-offset: 3px;
}

:root:is([data-theme], :not([data-theme])) .rz-data-grid td a {
    color: var(--studio-text);
    text-decoration: none;
}

:root:is([data-theme], :not([data-theme])) .rz-data-grid td a:hover {
    color: var(--studio-text);
    text-decoration: underline;
    text-decoration-color: var(--studio-accent);
    text-underline-offset: 3px;
}

/* 13.8 moved to studio-forms.css (forms helper). */

/* 13.9 Spacing.
   (a) A section whose content renders nothing (Maintenance "Clean guest carts": its message bar is conditional) lost
       its header's bottom padding, so the description touched the border. The header keeps 24px there. */
:root .suite-page-section .suite-page-section-header:has(+ .suite-page-section-content:empty),
:root .suite-page-section .suite-page-section-header:has(+ .suite-page-section-content:empty + .suite-page-section-footer) {
    padding-bottom: 24px;
}

/* (b) Accordion / expander bodies: 24px padding, the heading on the same inset. */
fluent-accordion-item::part(button) {
    padding-inline: 24px 8px;
}

fluent-accordion-item::part(region) {
    padding: 8px 24px 24px;
}

/* (c) Card header toolbars stay on one row at desktop widths (Outbox: Refresh | All | Dead-letter | Failed wrapped into
       a 2x2 block). A ToggleGroup look needs a hook: .suite-toggle-group (a bordered segmented group, the pressed item
       on the secondary fill) is ready for the markup change reported with this pass. */
@media (min-width: 768px) {
    :root .card-header .card-toolbar {
        flex: 0 0 auto;
    }

    :root .card-header .card-toolbar :is(.stack-horizontal, .fluent-stack-horizontal) {
        flex-wrap: nowrap !important;
    }
}

:root .suite-toggle-group {
    display: inline-flex;
    gap: 0;
    padding: 2px;
    border: 1px solid var(--studio-control-border);
    border-radius: var(--studio-control-radius);
}

:root:root .suite-toggle-group fluent-button {
    height: 26px;
    min-height: 26px;
    background: transparent;
    color: var(--studio-muted);
}

:root:root .suite-toggle-group fluent-button::part(control) {
    padding: 0 10px;
    border-color: transparent;
}

:root:root .suite-toggle-group fluent-button:is([aria-pressed="true"], [appearance="accent"]) {
    background: var(--studio-secondary);
    color: var(--studio-on-secondary);
}

/* 13.10 Card footer action rows (SuiteCardFooter): buttons sit at the end on one wrapping row, 8px apart. The SuiteCard
         family's own scoped CSS (suite-card, -header, -title, -description, -toolbar, -body, -footer) styles the
         panel; this rule only lays out the actions. */
.suite-card-footer:has(> fluent-button, > .suite-button, > button) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* 13.11 Record-header meta link values (ContactSight Email / Website: SuiteAnchor hypertext or plain mailto/http links
         directly inside a SuiteColumn of a card-body row). The current markup has no hook for that row, so the rule
         is limited to LINK values, which are single-line by nature; spans, labels and typography are untouched so
         multi-line text elsewhere never clips. A column only gives up its min-content width when it holds such a link.
         Replaced by SuiteRecordHeader at the next CRM build. */
:root .card-body > .row > [class*="col"]:has(> :is(fluent-link, a[href^="mailto:"], a[href^="http"])) {
    min-width: 0;
}

:root .card-body > .row > [class*="col"] > :is(fluent-link, a[href^="mailto:"], a[href^="http"]) {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 13.12 Dialog header: FluentDialogHeader's title wrapper is focusable (tabindex) and drew a black box when focus
         landed on it at open; keep the ring for keyboard focus only. */
:root .fluent-dialog-header [tabindex]:focus:not(:focus-visible) {
    outline: none;
}

:root .fluent-dialog-header [tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--studio-focus-ring);
    border-radius: var(--studio-control-radius);
}

/* ---------------------------------------------------------------------------------------------------------------------
   14. Golden pair: User Create and the Users list, to the Layout 2.4 contract
       (Docs.Developer/Features/Plans/Studio/Layout-2.4-Reference/contract.md). Spacing comes ONLY from the scale
       (--studio-space-1..7: 4, 8, 12, 16, 24, 32, 48) and only from the shell gutter, SuitePage, panels and
       SuiteFormLayout; everything inside contributes no outer margins.
   --------------------------------------------------------------------------------------------------------------------- */

/* 14.1 Neutralise stray outer margins inside the contract containers (headings, paragraphs, Bootstrap spacing
        utilities). Bootstrap utilities are !important, so the reset is too. */
:root .suite-page :is(h1, h2, h3, h4, h5, h6, p, fieldset, legend):not(.suite-visually-hidden) {
    margin-block: 0;
}

:root .suite-page :is([class^="m-"], [class*=" m-"], [class^="mt-"], [class*=" mt-"], [class^="mb-"], [class*=" mb-"], [class^="my-"], [class*=" my-"]) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

:root .suite-page .row {
    --bs-gutter-x: var(--studio-space-5);
    --bs-gutter-y: 0;
}

/* 14.2 Form anatomy: label -> control 8, helper / error 4 below the control at 13/20 weight 400, section heading to
        description 4 (reference .section-header p). The actions row pushes its buttons to the end without auto
        margins. The error summary list indents on the scale. */
:root .suite-form-field .suite-form-field-help,
:root .suite-form-field .suite-form-field-error {
    margin-top: var(--studio-space-1);
    font-size: 13px;
    line-height: 20px;
    font-weight: 400;
}

:root .suite-form-field .suite-form-field-error .validation-message,
:root .suite-form-field .validation-message {
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    font-weight: 400;
}

:root .suite-page .suite-page-section .suite-page-section-heading {
    gap: var(--studio-space-1);
}

/* 14.2 form-actions blocks moved to studio-forms.css (forms helper). */

:root .suite-form-error-summary ul {
    padding-inline-start: var(--studio-space-5);
}

/* 14.3 Input anatomy (contract input token table): light inputs are white on the #F5F6F8 canvas with a #7A8594
        border; dark inputs stay transparent with the zinc-800 border. Disabled keeps full opacity and uses the
        disabled tokens; read-only uses its own fill. */
:root:root fluent-text-input::part(root),
:root:root fluent-textarea::part(root) {
    background: var(--studio-input-bg);
}

:root:is([data-theme], :not([data-theme])) :is(.form-control, .form-select, .rz-textbox, .rz-textarea, .rz-dropdown, .rz-multiselect, .rz-numeric, .rz-autocomplete, .mask, .sphone, .staxid, .semail, .sweburl, .money-input-container),
:root:is([data-theme], :not([data-theme])) .rz-datepicker > .rz-inputtext {
    background-color: var(--studio-input-bg);
}

:root:root fluent-text-input[disabled],
:root:root fluent-textarea[disabled],
:root:root fluent-dropdown[disabled] {
    opacity: 1;
}

:root:root fluent-text-input[disabled]::part(root),
:root:root fluent-textarea[disabled]::part(root) {
    background: var(--studio-input-disabled-bg);
    border: 1px solid var(--studio-input-disabled-border);
    color: var(--studio-input-disabled-text);
}

:root:root fluent-text-input[disabled]::part(control),
:root:root fluent-textarea[disabled]::part(control) {
    color: var(--studio-input-disabled-text);
}

:root:root fluent-dropdown[disabled] {
    --colorNeutralBackgroundDisabled: var(--studio-input-disabled-bg);
    --colorNeutralStrokeDisabled: var(--studio-input-disabled-border);
    --colorNeutralForegroundDisabled: var(--studio-input-disabled-text);
}

:root:root fluent-text-input[readonly]::part(root),
:root:root fluent-textarea[readonly]::part(root) {
    background: var(--studio-input-readonly-bg);
    border: 1px solid var(--studio-control-border);
}

/* Textareas start at 132px (contract). */
:root:root fluent-textarea::part(root) {
    min-height: 132px;
}

:root:root fluent-textarea::part(control) {
    resize: vertical;
}

/* 14.4 Grid (contract: header 44, rows min 44, cell padding-x 16, header text 13/20/500 muted, quiet separators).
        Radzen sizes the header cell's inner div from its padding (9.75px measured) and spaces its parts in 3.25 /
        6.5 / 13px steps; all restated on the scale. */
:root .rz-data-grid .rz-grid-table thead th > div {
    min-height: var(--studio-grid-header-height);
    padding: var(--studio-space-3) var(--studio-space-4);
    box-sizing: border-box;
    align-items: center;
}

:root .rz-data-grid .rz-grid-table thead th {
    font-weight: 500;
}

:root .rz-data-grid .rz-column-title {
    gap: var(--studio-space-1);
}

:root .rz-data-grid .rz-grid-table {
    margin: 0;
}

:root:is([data-theme], :not([data-theme])) .rz-data-grid td:has(.suite-persona),
:root .fluent-data-grid td:has(.suite-persona) {
    padding-block: var(--studio-space-1);
}

:root .rz-data-grid .suite-persona-text {
    gap: 0;
}

/* The flag sprite sheet sets an em-based margin (3.25px measured) at higher specificity; the scale wins. */
:root .rz-data-grid .flag {
    margin-inline-end: var(--studio-space-1) !important;
}

/* "Drag a column header here" uses Radzen's tertiary text (4.12:1 on zinc-950); muted meets 4.5:1. */
:root .rz-data-grid .rz-group-header-drop {
    color: var(--studio-muted);
    font-size: 13px;
    line-height: 20px;
}

/* Grid toolbar row (the column picker lives here): the one compact toolbar above the grid, on the scale. */
:root .rz-data-grid .rz-group-header {
    padding: var(--studio-space-3) var(--studio-space-4);
    gap: var(--studio-space-2);
    background-color: var(--studio-surface);
    border-bottom: 1px solid var(--studio-divider);
}

/* Pager: 8 / 16 padding, 8px gaps, 32px square page buttons, muted summary text. */
:root .rz-data-grid .rz-pager {
    padding: var(--studio-space-2) var(--studio-space-4);
    gap: var(--studio-space-2);
    background-color: var(--studio-surface);
    border-top: 1px solid var(--studio-divider);
}

:root .rz-data-grid .rz-pager .rz-pager-pages {
    gap: var(--studio-space-2);
}

:root .rz-data-grid .rz-pager .rz-pager-summary {
    padding: 0 var(--studio-space-4) 0 0;
    color: var(--studio-muted);
    font-size: 13px;
    line-height: 20px;
}

:root .rz-data-grid .rz-pager .rz-pager-element {
    min-width: var(--studio-control-height-compact);
    height: var(--studio-control-height-compact);
    padding: 0 var(--studio-space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--studio-space-1);
}

/* 14.5 Error summary as a shadcn destructive Alert: 1px status-danger border on the status-danger fill, radius 8,
        padding 16, title 14/500 in the danger foreground, links 14 underlined; the ring only on keyboard focus. */
:root .suite-form-error-summary {
    padding: var(--studio-space-4);
    background: var(--studio-status-danger-bg);
    color: var(--studio-status-danger-fg);
    border: 1px solid var(--studio-status-danger-border);
    border-radius: var(--studio-panel-radius);
    box-shadow: none;
    outline: none;
}

:root .suite-form-error-summary .suite-form-error-summary-title {
    margin: 0 0 var(--studio-space-2);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--studio-status-danger-fg);
}

:root .suite-form-error-summary a {
    font-size: 14px;
    line-height: 20px;
    color: var(--studio-status-danger-fg);
    text-decoration: underline;
    text-underline-offset: 3px;
}

:root .suite-form-error-summary:focus:not(:focus-visible) {
    box-shadow: none;
}

/* 14.6 Icon-only menu buttons show one glyph: FluentMenuButton's built-in chevron sits in the button's "end" part. In
        grids the kebab stays a ghost square (above the grid outline rule 12a1). */
fluent-button.suite-icon-button::part(end) {
    display: none;
}

:root:root .rz-data-grid fluent-button.suite-icon-button:not([appearance="hypertext"]),
:root:root .fluent-data-grid fluent-button.suite-icon-button:not([appearance="hypertext"]) {
    width: var(--studio-control-height-compact);
    min-width: var(--studio-control-height-compact);
    background: transparent;
}

:root:root .rz-data-grid fluent-button.suite-icon-button:not([appearance="hypertext"])::part(control),
:root:root .fluent-data-grid fluent-button.suite-icon-button:not([appearance="hypertext"])::part(control) {
    border-color: transparent;
    padding: 0;
    justify-content: center;
}

:root:root .rz-data-grid fluent-button.suite-icon-button:not([appearance="hypertext"]):not([disabled]):hover,
:root:root .rz-data-grid fluent-button.suite-icon-button[aria-expanded="true"] {
    background: var(--studio-hover);
}

/* 14.7 Data table (.suite-data-table, shadcn tasks example). The grid's header row is the ONE toolbar: the search
        (HeaderTemplate, .rz-custom-header) on the left, the grouping drop zone between (its hint shows only while a
        column header is being dragged; the whole row stays the drop target), the column picker on the right labelled
        "View" (--suite-column-picker-label from the page). */
:root .suite-data-table .rz-group-header {
    display: flex;
    align-items: center;
    gap: var(--studio-space-2);
}

:root .suite-data-table .rz-custom-header {
    flex: 0 1 320px;
    min-width: 0;
}

:root .suite-data-table .suite-data-table-search {
    display: block;
    width: 100%;
}

:root .suite-data-table .rz-group-header-drop,
:root .suite-data-table .rz-group-header-items {
    flex: 1 1 auto;
    min-width: 0;
}

:root .suite-data-table .rz-group-header-drop {
    visibility: hidden;
}

html:root body:has(.rz-column-drag) .suite-data-table .rz-group-header-drop {
    visibility: visible;
}

:root .suite-data-table .rz-column-picker > .rz-dropdown .rz-dropdown-label {
    font-size: 0;
}

:root .suite-data-table .rz-column-picker > .rz-dropdown .rz-dropdown-label::before {
    content: var(--suite-column-picker-label);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

/* Person cell: avatar 32, name 14/20/500, email 13/20 muted beneath; rows land at about 56px. */
:root:is([data-theme], :not([data-theme])) .rz-data-grid td:has(.suite-persona) {
    padding-block: var(--studio-space-2);
}

:root .rz-data-grid .suite-persona-text .suite-persona-name {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--studio-text);
}

:root .rz-data-grid .suite-persona-text .suite-persona-secondary {
    font-size: 13px;
    line-height: 20px;
    font-weight: 400;
    color: var(--studio-muted);
}

/* Phone (stacked reflow): each row is a card; the selection box, the person and the row menu share the first line
   (menu top-right), the remaining fields follow as label / value lines. */
@media (max-width: 639.98px) {
    :root .suite-data-table .rz-datatable-reflow .rz-data-row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: start;
        column-gap: var(--studio-space-3);
        row-gap: var(--studio-space-1);
        padding: var(--studio-space-4);
        border-bottom: 1px solid var(--studio-divider);
    }

    :root .suite-data-table .rz-datatable-reflow .rz-data-row > td {
        display: block;
        grid-column: 1 / -1;
        padding: 0;
        border: 0;
        height: auto;
        min-height: 0;
    }

    :root .suite-data-table .rz-datatable-reflow .rz-data-row > td:first-child {
        grid-column: 1;
        grid-row: 1;
    }

    :root .suite-data-table .rz-datatable-reflow .rz-data-row > td:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    :root .suite-data-table .rz-datatable-reflow .rz-data-row > td:last-child {
        grid-column: 3;
        grid-row: 1;
    }

    :root .suite-data-table .rz-datatable-reflow .rz-data-row > td:is(:first-child, :nth-child(2), :last-child) .rz-column-title {
        display: none;
    }
}

/* 15. Routed nav (SuiteNavTabs / SuiteNavRailLayout) and record-page rhythm. Mirrors the components' scoped CSS so the
   fix is visible before the next build; remove the duplicated nav rules once the scoped copy ships.
   - Pills track on --studio-tab-list (visible on the grey canvas); active pill on the surface.
   - Vertical rail active item on --studio-tab-list.
   - A container holding a record header and its group tabs stacks them 24px apart, and the content after it starts
     16px below the tabs (spacing lives in the container, not in the components). */
html:root:root .suite-nav-tabs-pills .suite-nav-tabs-list { background: var(--studio-tab-list); }
html:root:root .suite-nav-tab-pills.suite-nav-tab-active { background: var(--studio-surface); }
html:root:root .suite-nav-tab-vertical.suite-nav-tab-active,
html:root:root .suite-nav-tab-vertical.suite-nav-tab-active:hover { background: var(--studio-tab-list); }
html:root .container-fluid:has(> .suite-record-header) { display: flex; flex-direction: column; gap: var(--studio-space-5, 24px); }
html:root .container-fluid:has(> .suite-record-header) > * { margin-top: 0; margin-bottom: 0; }
html:root .container-fluid:has(> .suite-nav-tabs) + * { margin-top: var(--studio-space-4, 16px); }
html:root .suite-nav-rail-content :is(.container-fluid, .container):first-child { padding-inline: 0; }
html:root .suite-nav-rail-content > :first-child > .row:first-child { --bs-gutter-x: 0; margin-inline: 0; }

/* ---------------------------------------------------------------------------------------------------------------------
   16. v5 corrections (Fluent UI Blazor 5.0 live review, 2026-10-09).
   --------------------------------------------------------------------------------------------------------------------- */

/* 16.1 Badges (shadcn Badge, tinted): every fluent-badge is a tinted chip whatever its v5 appearance (filled, tint,
        outline, ghost): status tint fill, status border, status text, 12/16 weight 500, 6px radius, 8px inline
        padding. v5's ghost appearance with a colour painted the colour as BOTH fill and text (a solid block with no
        readable label) and the filled warning was saturated yellow. Brand and subtle map to the neutral chip;
        informative to info. The outline ring v5 draws in ::after is turned off (the border is on the host). */
:root:root fluent-badge {
    height: 20px;
    min-width: 0;
    padding: 0 8px;
    gap: 4px;
    border: 1px solid var(--studio-divider);
    border-radius: var(--studio-control-radius);
    background-color: var(--studio-hover);
    color: var(--studio-text);
    font-family: var(--studio-font);
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    white-space: nowrap;
}

:root:root fluent-badge::after {
    display: none;
}

:root:root fluent-badge[shape="circular"] {
    border-radius: 999px;
}

:root:root fluent-badge :is(span, p, fluent-text) {
    color: inherit;
    font: inherit;
}

:root:root fluent-badge svg {
    fill: currentColor !important;
    width: 12px;
    height: 12px;
}

:root:root fluent-badge[color="success"] {
    background-color: var(--studio-status-success-bg);
    color: var(--studio-status-success-fg);
    border-color: var(--studio-status-success-border);
}

:root:root fluent-badge:is([color="warning"], [color="severe"]) {
    background-color: var(--studio-status-warning-bg);
    color: var(--studio-status-warning-fg);
    border-color: var(--studio-status-warning-border);
}

:root:root fluent-badge:is([color="danger"], [color="important"]) {
    background-color: var(--studio-status-danger-bg);
    color: var(--studio-status-danger-fg);
    border-color: var(--studio-status-danger-border);
}

:root:root fluent-badge[color="informative"] {
    background-color: var(--studio-status-info-bg);
    color: var(--studio-status-info-fg);
    border-color: var(--studio-status-info-border);
}

/* A badge whose text colour is set inline (SuiteBadge Color="#hex") keeps that colour on the neutral chip. */

/* 16.2 moved to studio-forms.css (forms helper). */

/* 16.3 Tooltips and hover cards. fluent-tooltip is a raised popover (surface, divider border, radius 6, 13/18 text).
        v5 caps every tooltip at 240px with visible overflow, so the entity hover cards (the *PreviewComponent family,
        300 to 380px wide) spilled out of it: the action strip's last icons sat outside the card and the tooltip
        surface showed as a white panel beside them. A tooltip that holds a preview card sizes to the card (bounded
        to the viewport) and lets the card own the padding. The card's quick-action strip is a row of 32px icon
        squares (each SuiteButton has only an icon child, so v5 did not mark it icon-only and gave it the 96px
        Fluent minimum). */
:root fluent-tooltip {
    background: var(--studio-raised);
    color: var(--studio-text);
    border: 1px solid var(--studio-divider);
    border-radius: var(--studio-control-radius);
    font-family: var(--studio-font);
    font-size: 13px;
    line-height: 18px;
}

:root:root fluent-tooltip:has([class*="-preview"]) {
    max-width: min(400px, calc(100vw - 32px));
    width: max-content;
    padding: 0;
    overflow: hidden;
    border-radius: var(--studio-panel-radius);
}

:root:root fluent-tooltip [class*="-preview"]:not([class*="-preview-"]) {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    color: var(--studio-text);
}

:root:root [class*="-preview-actions"] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

:root:root [class*="-preview-actions"] :is(fluent-button, fluent-anchor-button) {
    width: var(--studio-control-height-compact);
    min-width: var(--studio-control-height-compact);
    height: var(--studio-control-height-compact);
    min-height: var(--studio-control-height-compact);
    padding: 0;
    justify-content: center;
    background-color: transparent;
    border-color: transparent;
    color: var(--studio-text);
}

:root:root [class*="-preview-actions"] :is(fluent-button, fluent-anchor-button):not([disabled]):hover {
    background-color: var(--studio-hover);
}

:root:root [class*="-preview-actions"] :is(fluent-button, fluent-anchor-button) svg {
    width: 16px;
    height: 16px;
}

/* 16.4 Header top-bar counters. v5's fluent-counter-badge is a standalone 20px count, not a wrapper: content placed
        inside it (HeaderTopbarComponent puts each icon button there) is not rendered, so only the counts showed. The
        markup fix (Studio.Core HeaderTopbarComponent: the button first, then a FluentCounterBadge sibling with class
        abs-topbar-count, rendered only when the count is above zero) is pending; these rules place that badge on the
        button's top-end corner as a quiet accent tint (tinted fill, accent digits), never the black zinc primary
        fill; a zero count is hidden (v4 hid zero counts too). */
:root .abs-topbar-action {
    position: relative;
    display: inline-flex;
    align-items: center;
}

:root fluent-counter-badge {
    --colorBrandBackground: var(--studio-accent-tint);
    --colorNeutralForegroundOnBrand: var(--studio-accent);
    font-family: var(--studio-font);
    font-size: 11px;
    font-weight: 600;
}

:root .abs-topbar-action > fluent-counter-badge.abs-topbar-count {
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    pointer-events: none;
}

/* 16.5 One primary everywhere (contract tokens: the neutral zinc primary pair, #18181B on #FAFAFA in light, #FAFAFA on
        #18181B in dark; brand accents never drive buttons). FluentButton Primary / SuiteButton Accent / SuiteMenuButton
        Accent are covered by the bridge (colorBrandBackground) and section 8; this restates the Radzen surfaces that
        still painted --rz-primary (the indigo accent): the selected pager page and any filled primary Radzen button. */
:root:root .rz-pager .rz-pager-page.rz-state-active,
:root:root .rz-pager .rz-pager-element.rz-state-active,
:root:root .rz-pager-page.rz-state-active {
    background-color: var(--studio-primary);
    color: var(--studio-on-primary);
    border-color: transparent;
}

:root:root .rz-pager .rz-pager-element:not(.rz-state-active):not(.rz-state-disabled):hover {
    background-color: var(--studio-hover);
    color: var(--studio-text);
}

/* 16.6 Grid column picker on Radzen 12 (RadzenDataGrid AllowColumnPicking renders .rz-column-picker > .rz-dropdown
        with a .rz-multiselect-panel popup: a header row (.rz-multiselect-header: .rz-chkbox + the "All" button) and
        li.rz-multiselect-item rows, selected rows carrying .rz-state-highlight). The trigger always reads
        "N columns showing" (SuiteDataGrid ColumnsPickerMaxSelectedLabels 0). The popup: raised surface above the
        grid header and filter row (z-index, 4px offset); "All" is a row of the same anatomy as the items (same 8px
        inset, same 16px box, same 8px gap) with a divider under it; no grey fill on selected rows, hover only; the
        label text never collapses into the box. */
:root:root .rz-column-picker > .rz-dropdown .rz-inputtext,
:root:root .rz-column-picker > .rz-dropdown .rz-dropdown-label {
    border: 0;
    background: transparent;
    box-shadow: none;
    white-space: nowrap;
}

:root:root .rz-column-picker > .rz-dropdown .rz-dropdown-trigger {
    width: auto;
    border: 0;
    background: transparent;
    color: var(--studio-muted);
}

:root:root .rz-multiselect-panel {
    z-index: 1100;
    min-width: 200px;
    margin-top: 4px;
    font-family: var(--studio-font);
}

:root:root .rz-multiselect-panel .rz-multiselect-header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    margin: 0 0 4px;
    padding: 0 8px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--studio-divider);
    border-radius: 0;
}

:root:root .rz-multiselect-panel .rz-multiselect-header .rz-multiselect-selectall {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    text-align: start;
    color: var(--studio-text);
    font-family: var(--studio-font);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    cursor: pointer;
}

:root:root .rz-multiselect-panel .rz-multiselect-item,
:root:root .rz-multiselect-panel .rz-multiselect-item.rz-state-highlight,
:root:root .rz-multiselect-panel .rz-multiselect-item[aria-selected="true"] {
    margin: 0;
    padding: 0 8px;
    background-color: transparent;
    color: var(--studio-text);
    box-shadow: none;
}

:root:root .rz-multiselect-panel .rz-multiselect-item:hover,
:root:root .rz-multiselect-panel .rz-multiselect-item.rz-state-focused {
    background-color: var(--studio-hover);
}

:root:root .rz-multiselect-panel :is(.rz-multiselect-header, .rz-multiselect-item) .rz-chkbox {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0;
}

:root:root .rz-multiselect-panel :is(.rz-multiselect-header, .rz-multiselect-item) .rz-chkbox-box {
    width: 16px;
    height: 16px;
    min-width: 16px;
    border-radius: 4px;
}

:root:root .rz-multiselect-panel :is(.rz-multiselect-header, .rz-multiselect-item) .rz-chkbox-icon {
    font-size: 12px;
    width: 12px;
    height: 12px;
}

:root:root .rz-multiselect-panel .rz-multiselect-item-content,
:root:root .rz-multiselect-panel .rz-multiselect-item > span:not(.rz-chkbox) {
    padding: 0;
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
}

/* 16.7 Shell aside, full height. At >= 992px the Metronic aside (icon rail + context menu) is position: fixed, top 0,
        bottom 0, so in a live browser it always spans the viewport (verified: scrolled to the bottom of User Create,
        the panel still covers the full height). Anything that paints the page as ONE tall frame instead (full-page
        captures, print, a stale viewport after a resize) drew the fixed panel only once, at the top, and the canvas
        showed through under it further down. The page column behind the aside is painted with the aside's own
        surface, so the panel reads as full height in every rendering; it sits under the fixed aside (no visual change
        live) and takes no events. Widths follow the aside states (360px with the context menu, 100px rail only). */
@media (min-width: 992px) {
    html:root .aside-fixed .page {
        position: relative;
    }

    html:root .aside-fixed .page::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 360px;
        background-color: var(--abs-aside-bg-color, var(--studio-surface));
        pointer-events: none;
        z-index: 0;
    }

    html:root .aside-fixed.aside-secondary-disabled .page::before,
    html:root .aside-fixed[data-abs-aside-minimize="on"] .page::before {
        width: 100px;
    }
}

:root :is(#abs_header, #abs_header_mobile, .abs-topbar-actions) fluent-counter-badge[count="0"] {
    visibility: hidden;
}

/* 16.8 Shell command bar overflow ("More") menu. CommandBarComponent (Studio.Core) still uses the v4 FluentMenu
        shape (Anchor=..., FluentMenuItem children directly inside FluentMenu, no FluentMenuList and no trigger). In
        v5 a FluentMenu is the inline wrapper of a trigger and a popover fluent-menu-list, so those items rendered
        INLINE as plain text ("Default Portal  Network Manager  Share") next to the real command buttons. Until the
        markup moves to FluentMenu > FluentMenuButton (slot trigger) + FluentMenuList, stray items that are not in
        a fluent-menu-list are not shown; the same commands stay reachable as the bar's own buttons. */
:root .ms-CommandBar fluent-menu > fluent-menu-item {
    display: none;
}

/* 16.9 Links in content (contract: link colour from the tokens, no underline at rest, underline on hover with a
        3px offset). Bootstrap / Metronic and the v5 anchor shadow left nav links and card links underlined. Prose
        links (inside a paragraph or list item, without a class) keep their underline so text links in body copy stay
        recognisable. */
html:root #abs_content a:not([role="button"]),
html:root #abs_content fluent-anchor-button > a {
    text-decoration: none;
    text-underline-offset: 3px;
}

html:root #abs_content a:not([role="button"]):hover {
    text-decoration: underline;
}

html:root #abs_content :is(.nav-link, .menu-link, .btn, .suite-nav-tab, .suite-page-link-card):hover {
    text-decoration: none;
}

html:root #abs_content :is(p, li) > a:not([class]) {
    color: var(--studio-accent);
    text-decoration: underline;
}

html:root :is(fluent-anchor-button, fluent-link) {
    text-decoration: none;
}