/*
 * Cosmos.Common.AspNetCore.Blazor.MultiselectDropdown
 *
 * Styling strategy: consume Bootstrap 5 CSS custom properties directly —
 * the same variables that .form-select, .dropdown-menu and .dropdown-item use.
 * No hardcoded colours or font values. When Bootstrap variables are overridden
 * globally (e.g. via a Cosmos theme), this component updates automatically.
 *
 * Layout:
 *   .cosmos-multiselect-trigger  →  mirrors .form-select
 *   .cosmos-multiselect-panel    →  mirrors .dropdown-menu
 *   .cosmos-multiselect-option   →  mirrors .dropdown-item / .dropdown-item.active
 *
 * DataGrid.css adds compact sizing for the filter-row context.
 */

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
.cosmos-multiselect {
  position: relative;
  display: block;
  width: 100%;
}

/* ── Trigger — same variables as Bootstrap .form-select ──────────────────── */
.cosmos-multiselect-trigger {
  display: block;
  width: 100%;
  /* Sizing — matches Bootstrap .form-select with Compact.css overrides */
  padding: var(--bs-form-select-padding-y, .1rem)
           2rem                                       /* room for the chevron */
           var(--bs-form-select-padding-y, .1rem)
           var(--bs-form-select-padding-x, .4rem);
  font-size: var(--bs-form-select-font-size, var(--bs-body-font-size, .9rem));
  font-family: var(--bs-form-select-font-family, var(--bs-body-font-family, "Segoe UI", system-ui, sans-serif));
  font-weight: var(--bs-form-select-font-weight, 400);
  line-height: var(--bs-form-select-line-height, var(--bs-body-line-height, 1.5));
  min-height: 2rem;
  /* Colours */
  color: var(--bs-form-select-color, var(--bs-body-color));
  background-color: var(--bs-form-select-bg, var(--bs-body-bg, #fff));
  /* Chevron — same SVG as Bootstrap .form-select */
  background-image: var(--bs-form-select-bg-icon,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"));
  background-repeat: no-repeat;
  background-position: right var(--bs-form-select-padding-x, .75rem) center;
  background-size: 16px 12px;
  /* Border */
  border: var(--bs-border-width, 1px) solid var(--bs-border-color, var(--bs-form-select-border-color, #dee2e6));
  border-radius: var(--bs-form-select-border-radius, var(--bs-border-radius, .375rem));
  box-shadow: var(--bs-form-select-box-shadow, none);
  /* Behaviour */
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  appearance: none;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.cosmos-multiselect-trigger:hover {
  border-color: var(--bs-border-color-translucent, var(--bs-border-color));
}
.cosmos-multiselect-trigger:focus {
  outline: 0;
  border-color: var(--bs-form-select-focus-border-color, #86b7fe);
  box-shadow: var(--bs-form-select-focus-box-shadow,
    0 0 0 .25rem rgba(var(--bs-primary-rgb, 13, 110, 253), .25));
}
.cosmos-multiselect-trigger .is-placeholder {
  color: var(--bs-secondary-color, #6c757d);
}

/* ── Panel — declares the same Bootstrap dropdown variables that .dropdown-menu
   declares on itself.  Bootstrap defines these on .dropdown-menu, not :root, so
   they are unavailable to our panel unless we mirror them here.  Each value
   references a :root-level Bootstrap token so global theme changes propagate. ── */
.cosmos-multiselect-panel {
  /* Mirror of .dropdown-menu variable declarations */
  --bs-dropdown-zindex: 1000;
  --bs-dropdown-padding-y: .5rem;
  --bs-dropdown-font-size: var(--bs-body-font-size, 1rem);
  --bs-dropdown-color: var(--bs-body-color);
  --bs-dropdown-bg: var(--bs-body-bg, #fff);
  --bs-dropdown-border-color: var(--bs-border-color-translucent, rgba(0,0,0,.175));
  --bs-dropdown-border-width: var(--bs-border-width, 1px);
  --bs-dropdown-border-radius: var(--bs-border-radius, .375rem);
  --bs-dropdown-box-shadow: var(--bs-box-shadow, 0 .5rem 1rem rgba(0,0,0,.15));
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-color: var(--bs-body-color);
  --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg, #f8f9fa);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: var(--bs-primary, #0d6efd);
  --bs-dropdown-item-padding-x: 1rem;
  --bs-dropdown-item-padding-y: .25rem;

  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 100%;
  z-index: var(--bs-dropdown-zindex);
  padding: var(--bs-dropdown-padding-y) 0;
  font-size: var(--bs-dropdown-font-size);
  color: var(--bs-dropdown-color);
  background-color: var(--bs-dropdown-bg);
  border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
  border-radius: var(--bs-dropdown-border-radius);
  box-shadow: var(--bs-dropdown-box-shadow);
  max-height: 220px;
  overflow-y: auto;
}
.cosmos-multiselect.is-open .cosmos-multiselect-panel {
  display: block;
}

/* ── Options — same variables as Bootstrap .dropdown-item ────────────────── */
.cosmos-multiselect-option {
  /* Reset <button> browser defaults */
  appearance: none;
  border: 0;
  border-radius: 0;
  /* Layout */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--bs-dropdown-item-padding-y, .25rem)
           var(--bs-dropdown-item-padding-x, 1rem);
  /* Typography — inherits font-size from the panel (.dropdown-menu) */
  font-size: inherit;
  font-family: inherit;
  font-weight: 400;
  line-height: inherit;
  text-align: left;
  /* Colours — identical to .dropdown-item */
  color: var(--bs-dropdown-link-color);
  background-color: transparent;
  /* Behaviour */
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.cosmos-multiselect-option:hover,
.cosmos-multiselect-option:focus {
  color: var(--bs-dropdown-link-hover-color);
  background-color: var(--bs-dropdown-link-hover-bg);
}

/* Selected state — identical to Bootstrap .dropdown-item.active */
.cosmos-multiselect-option.is-selected {
  color: var(--bs-dropdown-link-active-color);
  background-color: var(--bs-dropdown-link-active-bg);
}
.cosmos-multiselect-option.is-selected:hover,
.cosmos-multiselect-option.is-selected:focus {
  color: var(--bs-dropdown-link-active-color);
  background-color: var(--bs-dropdown-link-active-bg);
  filter: brightness(.95);
}

/* ── Item internals ───────────────────────────────────────────────────────── */
.cosmos-multiselect-option-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Checkmark — always in the DOM, toggled with CSS visibility so Blazor never
   needs to add or remove this node (prevents "removeChild" render-batch races). */
.cosmos-multiselect-option-check {
  flex-shrink: 0;
  margin-left: var(--bs-dropdown-item-padding-x, 1rem);
  font-size: .75em;          /* relative to the option's inherited font-size */
  visibility: hidden;
}
.cosmos-multiselect-option.is-selected .cosmos-multiselect-option-check {
  visibility: visible;
}