/* =============================================================================
   ibinderbook-combobox.css  -  global, white-label-aware Telerik RadComboBox
   DROPDOWN PANEL treatment.

   SCOPE (deliberately narrow). Styles ONLY the detached dropdown panel
   (.RadComboBoxDropDown ...). That panel renders at document root, nothing in the
   repo styles it today, and it has no layout coupling to the input control - so
   this is the safe, high-value win: every combo's dropdown (forms, filter rows,
   grids) gets a token look with no risk to the ~194 legacy filter-row layouts.

   NOT here (intentionally deferred): the combobox INPUT BOX on bare filter rows.
   An adversarial review of a fuller draft found that treatment depends on the
   actual rendered DOM (where the focus state-class sits, which element is the
   arrow well, and which element owns the dropdown scroll) - all differ from a
   naive guess and would risk clipping/misalignment on narrow filter cells. Add it
   later behind a wrapper class (like .pas-form-card already does) once verified
   against a rendered bare combo.

   CASCADE. Scoped under the suffix-less .RadComboBoxDropDown (matching the repo's
   existing .RadComboBox / .pas-form-card convention, so it survives a Telerik
   skin/version change). Telerik's Bootstrap skin sets these declarations WITHOUT
   !important, so plain precedence wins - no !important needed here, and any future
   scoped rule overrides with one extra class.

   Load after design-tokens.css (for --ibb-* resolution). color-mix() tints each
   carry a static rgba() fallback first for legacy/embedded browsers.
   ============================================================================= */

/* Panel chrome: surface, hairline border, soft radius, light elevation.
   No overflow:hidden (the panel root may own the scroll; clipping it would make
   long / multi-select lists unscrollable). No height (Telerik Height= /
   DropDownHeight= drive panel sizing). */
.RadComboBoxDropDown {
    background: var(--ibb-surface);
    border: 1px solid var(--ibb-border);
    border-radius: var(--ibb-radius-sm);
    box-shadow: var(--ibb-shadow-sm);
}

/* List + item text color. Scoped to the dropdown so the shared rcb* class names
   do not leak to RadDropDownList / RadListBox / RadMenu. No padding/height
   override - Telerik's natural item metrics are preserved (keeps multi-select
   checkbox lists intact). */
.RadComboBoxDropDown .rcbList,
.RadComboBoxDropDown .rcbItem {
    color: var(--ibb-text);
}

/* Hover: brand-following faint tint (replaces the skin's hardcoded blue). */
.RadComboBoxDropDown .rcbItem:hover,
.RadComboBoxDropDown .rcbItem.rcbHovered {
    background: rgba(3, 155, 229, 0.08);
    background: color-mix(in srgb, var(--ibb-primary) 8%, transparent);
    color: var(--ibb-text);
}

/* Selected: distinct from hover, still readable; no font-weight change (avoids
   reflow/clip in tight panels). */
.RadComboBoxDropDown .rcbItem.rcbSelected {
    background: rgba(3, 155, 229, 0.12);
    background: color-mix(in srgb, var(--ibb-primary) 12%, transparent);
    color: var(--ibb-text);
}

/* Keyboard focus: outline (not border) so there is no box-model shift. The skin
   shows only hover, so this is an accessibility add for keyboard navigation. */
.RadComboBoxDropDown .rcbItem.rcbFocused,
.RadComboBoxDropDown .rcbItem:focus {
    outline: 2px solid var(--ibb-primary);
    outline-offset: -2px;
}

/* Multi-select (CheckBoxes="true") checkmarks follow the brand. accent-color
   ONLY - never the checkbox box-model, which would break the checkbox-list
   layout on the multi-select pages. */
.RadComboBoxDropDown input[type="checkbox"] {
    accent-color: var(--ibb-primary);
}