/* Remap Fluent UI's neutral design tokens to our shadcn-style palette so
   Fluent components (buttons, menus, search box, etc.) blend with the rest
   of the layout. These overrides must load AFTER Fluent's reboot.css.

   `!important` is required because FluentDesignTheme writes these same
   variables as inline style on the design-system-provider element when
   the user toggles the theme; without it, those inline values would
   override our :root overrides until the next full page load. */

:root,
.dark,
body,
fluent-design-system-provider {
    /* Surface colors */
    --neutral-fill-layer-rest: hsl(var(--background)) !important;
    --neutral-fill-layer-alt-rest: hsl(var(--background)) !important;
    --neutral-fill-input-rest: hsl(var(--background)) !important;
    --neutral-fill-input-hover: hsl(var(--background)) !important;
    --neutral-fill-input-active: hsl(var(--background)) !important;
    --neutral-fill-input-focus: hsl(var(--background)) !important;
    --neutral-fill-stealth-rest: transparent !important;
    --neutral-fill-stealth-hover: hsl(var(--muted)) !important;
    --neutral-fill-stealth-active: hsl(var(--muted)) !important;
    --neutral-fill-secondary-rest: hsl(var(--muted)) !important;
    --neutral-fill-secondary-hover: hsl(var(--muted)) !important;
    --neutral-fill-rest: hsl(var(--muted)) !important;
    --neutral-fill-hover: hsl(var(--muted)) !important;
    --neutral-fill-active: hsl(var(--muted)) !important;

    /* Foreground colors */
    --neutral-foreground-rest: hsl(var(--foreground)) !important;
    --neutral-foreground-hover: hsl(var(--foreground)) !important;
    --neutral-foreground-active: hsl(var(--foreground)) !important;
    --neutral-foreground-hint: hsl(var(--muted-foreground)) !important;

    /* Strokes / borders */
    --neutral-stroke-rest: hsl(var(--border)) !important;
    --neutral-stroke-hover: hsl(var(--border)) !important;
    --neutral-stroke-active: hsl(var(--border)) !important;
    --neutral-stroke-divider-rest: hsl(var(--border)) !important;
    --neutral-stroke-input-rest: hsl(var(--border)) !important;

    /* Accent palette is driven by FluentDesignTheme's CustomColor parameter
       (set to the same hex as --primary in AdminLayout.razor). Do NOT pin
       --accent-* tokens here — that would prevent FluentUI from computing
       matching hover / foreground tones from the base color. */

    /* Focus ring */
    --focus-stroke-outer: hsl(var(--ring)) !important;
    --focus-stroke-inner: hsl(var(--background)) !important;
}

/* Make sure body uses our tokens — overrides Fluent reboot.css. */
body {
    background-color: hsl(var(--background)) !important;
    color: hsl(var(--foreground)) !important;
}

fluent-button::part(control) {
    border-radius: var(--radius);
}

fluent-menu {
    border-radius: var(--radius);
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--background));
}

fluent-search,
fluent-text-field {
    --neutral-fill-input-rest: hsl(var(--background)) !important;
    --neutral-fill-input-hover: hsl(var(--background)) !important;
    --neutral-fill-input-active: hsl(var(--background)) !important;
    --neutral-fill-input-focus: hsl(var(--background)) !important;
}