/* SlimSelect theme layer — a small, token-driven skin over the vendored slimselect.min.css (loaded
   first, which supplies the base layout/animation). SlimSelect themes entirely through its `--ss-*`
   custom properties, so we only re-point those at the platform design tokens and never restyle its
   internals by hand (coding-standards §4/§12). Buttons/chips pick up the mapped colours automatically.

   Scoped to SlimSelect's own roots — `.ss-main` (the control) AND `.ss-content` (the dropdown, which
   SlimSelect appends to <body>, so a wrapper class on the original <select> would not reach it). Every
   SlimSelect instance in the app is created through MultiSelectHelper, so these roots are always ours. */

.ss-main,
.ss-content {
    --ss-bg-color: var(--platform-color-surface, #ffffff);
    --ss-font-color: var(--platform-color-text, #1f2328);
    --ss-disabled-color: var(--platform-color-text-muted, #57606a);
    --ss-placeholder-color: var(--platform-color-text-muted, #57606a);
    --ss-border-color: var(--platform-color-border, #d0d7de);
    --ss-highlight-color: var(--platform-color-accent-surface, #ddf4ff);
    --ss-primary-color: var(--platform-color-accent, #0969da);
    --ss-focus-color: var(--platform-color-accent, #0969da);
    --ss-success-color: var(--platform-color-ok, #1a7f37);
    --ss-error-color: var(--platform-color-error, #cf222e);
    --ss-border-radius: var(--platform-radius-sm, 0.25rem);
    --ss-spacing-s: var(--platform-space-xs, 0.25rem);
    --ss-spacing-m: var(--platform-space-sm, 0.5rem);
    --ss-spacing-l: var(--platform-space-md, 1rem);
}

/* Fit-content dropdowns (M-185): MultiSelectHelper opens the dropdown with a ">"-floored contentWidth so it
   shrink-to-fits to its widest option (width:auto) instead of the narrow control. Shrink-to-fit still breaks at
   spaces unless wrapping is off, so options must not wrap — otherwise a short option with a longish label still
   splits across lines. The base skin sets `white-space: normal`; override it here. SlimSelect already clamps the
   dropdown's right edge to the viewport; the max-width is a second guard so a pathologically long label can never
   push the dropdown wider than the screen, and it ellipsizes rather than overflows. Scoped to .ss-content — our
   own dropdown root (appended to <body>), so no host markup is affected. Token-driven margin off the viewport.

   The selector must match the base skin's OWN `.ss-content .ss-list .ss-option` (0-3-0), not the shorter
   `.ss-content .ss-option` (0-2-0) — the latter LOSES the specificity contest to the vendor rule it means to
   override, so this rule sat dead from M-185 until the grid filters (where the dropdown really is pinned to a
   narrow control) exposed it. Forms only looked right because shrink-to-fit derives its preferred width from
   the unwrapped text anyway. Keep the `.ss-list` in the selector. */
.ss-content .ss-list .ss-option {
    max-width: calc(100vw - 2 * var(--platform-space-lg, 1.5rem));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Match the control's border/typography to our native inputs so it sits beside them consistently. The
   min-height is pulled down to the shared input-height token (M-084) so the select aligns with the now
   ~80%-tall native fields and labeled buttons on the same row (its default --ss-main-height was 40px). */
.ss-main {
    --ss-main-height: var(--platform-input-height, 1.9rem);

    font: inherit;
    border: 1px solid var(--platform-color-border, #d0d7de);
}
