/* 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));
}

/* ---- Shared input surface -------------------------------------------------
   One surface for every text-entry control, built as a depth model (tokens in
   theme.css): the fill is a recessed well at --input-bg (--background), a real 1px
   border (>=3:1 against the fill, the card, and the filter-row backdrop, per WCAG
   1.4.11) so the control reads unmistakably as an input, rounded corners, an inset
   top shadow that deepens the recess, and an accent focus ring. The well sits below
   the raised group-header band instead of matching it (the old flat --muted fill
   collided with the header). Hover lifts the fill and strengthens the border; focus
   returns to the resting fill, turns the border accent, and adds the ring. This
   replaces FluentUI's default host outline — a persistent high-contrast stroke drawn
   in the foreground color (near-white in dark mode) — plus its redundant 2px bottom
   accent bar (:host::after), so the whole design system reads as one control family.

   The bordered element differs per control's shadow DOM (verified in DevTools):
   fluent-text-field / fluent-search / fluent-number-field expose ::part(root);
   fluent-select / fluent-combobox / fluent-text-area expose no root part, so they
   carry it on ::part(control). Surface values come from the --input-* tokens (theme.css). */

fluent-text-field,
fluent-text-area,
fluent-search,
fluent-number-field,
fluent-combobox,
fluent-select {
    outline: none !important;
}

fluent-text-field::after,
fluent-text-area::after,
fluent-search::after,
fluent-number-field::after,
fluent-combobox::after,
fluent-select::after {
    display: none !important;
}

fluent-text-field::part(root),
fluent-search::part(root),
fluent-number-field::part(root),
fluent-combobox::part(control),
fluent-select::part(control),
fluent-text-area::part(control) {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius);
    box-shadow: var(--input-shadow);
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

/* Single-line controls share one height (--input-height); the multi-line text area is
   left to grow with its rows, so it is deliberately excluded from this list. */
fluent-text-field::part(root),
fluent-search::part(root),
fluent-number-field::part(root),
fluent-combobox::part(control),
fluent-select::part(control) {
    height: var(--input-height);
}

fluent-text-field:hover::part(root),
fluent-search:hover::part(root),
fluent-number-field:hover::part(root),
fluent-combobox:hover::part(control),
fluent-select:hover::part(control),
fluent-text-area:hover::part(control) {
    background: var(--input-bg-hover);
    border-color: var(--input-border-hover);
}

fluent-text-field:focus-within::part(root),
fluent-search:focus-within::part(root),
fluent-number-field:focus-within::part(root),
fluent-combobox:focus-within::part(control),
fluent-select:focus-within::part(control),
fluent-text-area:focus-within::part(control) {
    background: var(--input-bg);
    border-color: hsl(var(--primary));
    box-shadow: var(--input-ring);
}

/* Align the checkbox box, radio circle and switch track to the same --input-border
   as the text controls so the whole input family shares one boundary. Scoped to the
   unchecked state: a checked checkbox/radio/switch fills with the accent and FAST
   drops its border, which must stay untouched. */
fluent-checkbox:not([aria-checked="true"])::part(control),
fluent-radio:not([aria-checked="true"])::part(control),
fluent-switch:not([aria-checked="true"])::part(switch) {
    border-color: var(--input-border);
}

/* FAST lays a radio-group's options in a flex ::part(positioning-region) with no gap,
   so the choices sit flush against each other. column-gap spaces horizontal groups and
   row-gap spaces vertical ones; each axis only takes effect in the matching orientation,
   so one rule gives both layouts a sensible rhythm. */
fluent-radio-group::part(positioning-region) {
    column-gap: 1.5rem;
    row-gap: 0.5rem;
}

/* FluentUI's Blazor wrapper renders each field's label as a light-DOM
   <label class="fluent-input-label"> sibling before the control (its shadow
   ::part(label) is display:none), and ships it with a 4px bottom margin via a
   CSS-isolation-scoped rule. Stacked fields wrap the label + control in a flex
   column (.ki-create__field), so that wrapper's gap already owns the label-to-input
   rhythm; drop the built-in margin (!important to beat the library's scoped rule) so
   the label hugs its input and the field's own gap sets the single, uniform spacing.
   The filter row lays its label out horizontally, where this margin has no effect. */
.fluent-input-label {
    margin-bottom: 0 !important;
}

/* Filter-row deltas from the shared surface above: the repository/pipeline selects
   and the search box only need their filter-specific sizing and affordances here.
   The shared input border/fill above already applies, so the filters match the form
   fields; only the sizing and dropdown affordances are filter-specific. */

/* Drop the built-in magnifying-glass icon from the filter search box. */
.data-view__filters fluent-search::part(start) {
    display: none;
}

/* Filter fields are supplied by page/RepositoryFilter render fragments, so the
   layout helper lives here (unscoped) rather than in a component stylesheet.
   Keep each filter's label glued to its input so they wrap as one unit; the
   outer flex container breaks between field groups, never within one. */
.filter-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-field .fluent-input-label {
    white-space: nowrap;
}

/* The status toggle is a ~20px control with no stacked label, so the filter row's
   bottom alignment (items-end) would leave its centre below the taller inputs. Lift it
   by half the height difference onto the shared centre line: with --input-height at 2rem
   (32px) and the checkbox at 20px that is 32/2 - 20/2 = 6px. Also match the input label
   typography so it reads as part of the same filter row. */
.filter-field--checkbox {
    padding-bottom: 0.375rem;
}

.filter-field--checkbox fluent-checkbox::part(label) {
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
}