/* ── Dropdown Filter (Story 3.4) ────────────────────────────────── */

/* Wrapper positions panel relative to chip */
.dropdown-filter__wrapper {
  position: relative;
  display: inline-flex;
  flex-direction: column;
}

/* Panel */
.dropdown-filter__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  min-width: 260px;
  max-width: 360px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 8px 0;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.dropdown-filter__panel--closed {
  display: none;
}

.dropdown-filter__panel--open {
  display: block;
  animation: dropdown-slide-in 0.15s ease;
}

@keyframes dropdown-slide-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mode toggle (In List / Not In List) */
.dropdown-filter__mode-toggle {
  display: flex;
  gap: 0;
  padding: 4px 8px 8px;
  border-bottom: 1px solid var(--border-subtle);
}

.dropdown-filter__header-row {
  --dropdown-header-control-height: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid var(--border-subtle);
}

.dropdown-filter__header-row > .dropdown-filter__mode-toggle,
.dropdown-filter__header-row > .dropdown-filter__search {
  padding: 0;
  border-bottom: none;
}

.dropdown-filter__header-row > .dropdown-filter__mode-toggle {
  flex: 0 0 34%;
  min-width: 132px;
}

.dropdown-filter__header-row > .dropdown-filter__search {
  flex: 1 1 auto;
  min-width: 0;
}

.dropdown-filter__mode-toggle--select {
  padding: 8px;
}

.dropdown-filter__mode-select {
  width: 100%;
  min-width: 0;
}

.dropdown-filter__header-row .dropdown-filter__mode-select {
  display: flex;
  align-items: center;
  position: relative;
  width: 100% !important;
  min-width: 0 !important;
  height: var(--dropdown-header-control-height);
  min-height: var(--dropdown-header-control-height);
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 6px !important;
  padding-right: 6px !important;
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.2;
}

.dropdown-filter__header-row .dropdown-filter__mode-select,
.dropdown-filter__header-row .dropdown-filter__mode-select * {
  box-sizing: border-box;
}

.dropdown-filter__panel--open .dropdown-filter__mode-toggle--select .dash-dropdown-wrapper,
.dropdown-filter__mode-toggle--select .dash-dropdown-wrapper {
  width: 100% !important;
  min-width: 0 !important;
}

.dropdown-filter__panel--open .dropdown-filter__mode-toggle--select .dash-dropdown,
.dropdown-filter__mode-toggle--select .dash-dropdown {
  width: 100% !important;
  min-width: 0 !important;
}

.dropdown-filter__header-row .dropdown-filter__mode-select .dash-dropdown-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0 !important;
  gap: 0 !important;
}

.dropdown-filter__header-row .dropdown-filter__mode-select .dash-dropdown-value {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding-right: 16px;
}

.dropdown-filter__header-row .dropdown-filter__mode-select .dash-dropdown-value-item,
.dropdown-filter__header-row .dropdown-filter__mode-select .dash-dropdown-value-item > span {
  display: flex !important;
  align-items: center !important;
  height: 100%;
  min-width: 0;
  line-height: 1 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-filter__header-row .dropdown-filter__mode-select .dash-dropdown-trigger-icon {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  flex: 0 0 auto;
}

.dropdown-filter__header-row .dropdown-filter__mode-select[data-state="open"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.dropdown-filter__panel--open .dropdown-filter__mode-toggle--select .dash-dropdown-content {
  border-radius: var(--radius-sm);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  overflow: hidden;
}

.dropdown-filter__panel--open .dropdown-filter__mode-toggle--select .dash-dropdown-options {
  border-radius: 0;
}

.dropdown-filter__mode-select .Select-control {
  min-height: var(--dropdown-header-control-height);
  height: var(--dropdown-header-control-height);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  box-shadow: none;
}

.dropdown-filter__mode-select .Select-value {
  line-height: calc(var(--dropdown-header-control-height) - 2px);
}

.dropdown-filter__mode-select .Select-value-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-primary) !important;
}

.dropdown-filter__mode-select .Select-input {
  height: calc(var(--dropdown-header-control-height) - 2px);
}

.dropdown-filter__mode-select .Select-arrow-zone {
  width: 26px;
}

.dropdown-filter__mode-select .Select-menu-outer {
  margin-top: 4px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
}

.dropdown-filter__mode-select .Select-option {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: transparent;
}

.dropdown-filter__mode-select .Select-option.is-focused {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.dropdown-filter__mode-select .Select-option.is-selected {
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--text-primary);
}

/* Dash radix dropdown option rows (used by the mode selector menu) default to
   14px; pin them to the compact header scale so they match the checklist. */
.dropdown-filter__panel--open .dropdown-filter__mode-toggle--select .dash-dropdown-option,
.dropdown-filter__panel--open .dropdown-filter__mode-toggle--select .dash-options-list-option,
.dropdown-filter__panel--open .dropdown-filter__mode-toggle--select [role="option"] {
  font-size: 0.6875rem;
  line-height: 1.2;
  align-items: center;
  padding: 6px 8px;
}

.dropdown-filter__panel--open
  .dropdown-filter__mode-toggle--select
  .dash-options-list-option-text,
.dropdown-filter__panel--open
  .dropdown-filter__mode-toggle--select
  .dash-options-list-option-text
  > span {
  font-size: inherit;
  line-height: inherit;
}

.dropdown-filter__mode-select.is-focused .Select-control,
.dropdown-filter__mode-select .Select-control:focus-within {
  border-color: var(--accent);
}

.dropdown-filter__mode-btn {
  flex: 1;
  padding: 4px 12px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.15s ease;
}

.dropdown-filter__mode-btn:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.dropdown-filter__mode-btn:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  border-left: none;
}

.dropdown-filter__mode-btn--active {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}

.dropdown-filter__mode-btn:hover:not(.dropdown-filter__mode-btn--active) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Search */
.dropdown-filter__search {
  padding: 8px;
}

.dropdown-filter__search-input {
  width: 100%;
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.15s ease;
}

.dropdown-filter__header-row .dropdown-filter__search-input {
  height: var(--dropdown-header-control-height);
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 6px !important;
  padding-right: 6px !important;
  font-size: 0.75rem;
  line-height: calc(var(--dropdown-header-control-height) - 2px);
}

.dropdown-filter__search-input:focus {
  border-color: var(--accent);
}

.dropdown-filter__search-input::placeholder {
  color: var(--text-muted);
}

/* Select All / Clear All row */
.dropdown-filter__select-all-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border-subtle);
}

.dropdown-filter__selectall-btn,
.dropdown-filter__clearall-btn {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  background: transparent;
  color: var(--accent);
  border: none;
  cursor: pointer;
  padding: 2px 4px 2px 0;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}

.dropdown-filter__selectall-btn:hover,
.dropdown-filter__clearall-btn:hover {
  background: var(--bg-hover);
}

/* Options scrollable list */
.dropdown-filter__options-scroll {
  /* Shared so the plain-checklist wrapper and the virtualised inner list
     (clamped below) always render at the same panel height. */
  --dropdown-list-max-h: 280px;
  max-height: var(--dropdown-list-max-h);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Above 100 options Dash virtualises the checklist with react-window, which
   renders its OWN scroll container sized to the viewport height. Without this
   the wrapper above also scrolls, producing two nested vertical scrollbars.
   Hand scrolling to the inner virtualised list and clamp it to the panel. */
.dropdown-filter__options-scroll:has(.dash-options-list-virtualized) {
  max-height: none;
  overflow: visible;
}

/* react-window only sets an inline `height`, so a stylesheet `max-height`
   clamps it without needing !important. Labels truncate (see below) so the
   list never overflows horizontally. */
.dropdown-filter__options-scroll .dash-options-list-virtualized {
  max-height: var(--dropdown-list-max-h);
}

.dropdown-filter__options-scroll::-webkit-scrollbar {
  width: 6px;
}

.dropdown-filter__options-scroll::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

.dropdown-filter__options-scroll::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}

/* Dynamic options_query callbacks set loading attrs on the options component.
   Show an overlay spinner and block interactions with stale options while the
   refresh is in flight. */
.dropdown-filter__options-scroll:has([data-dash-is-loading="true"]) {
  position: relative;
  pointer-events: none;
}

.dropdown-filter__options-scroll:has([data-dash-is-loading="true"])::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
  z-index: 3;
}

.dropdown-filter__options-scroll:has([data-dash-is-loading="true"])::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: dropdown-filter-spinner 0.7s linear infinite;
  z-index: 4;
}

@keyframes dropdown-filter-spinner {
  to {
    transform: rotate(360deg);
  }
}

/* Checklist styling */
.dropdown-filter__checklist {
  display: flex;
  flex-direction: column;
  padding-left: 8px;
}

.dropdown-filter__option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 5px 12px 5px 0;
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.1s ease;
}

.dropdown-filter__panel--open .dropdown-filter__option {
  font-size: 0.6875rem;
}

.dropdown-filter__option:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.dropdown-filter__checkbox {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Truncate long labels with an ellipsis rather than forcing a horizontal
   scrollbar. Covers both the plain checklist (span.option-label) and Dash's
   virtualised rows (span.dash-options-list-option-text > inner text span). */
.dropdown-filter__option-label,
.dropdown-filter__option > span {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-filter__option-label {
  position: relative;
  top: -2px; /* optical alignment */
}

/* Per-option icon rendering (KWBI-238). The row wrapper lays out the icon and
   the text block (label, plus optional subheading) side by side; icon position
   is controlled by element order so left/right share one rule set. */
.dropdown-filter__option-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.dropdown-filter__option-row--icon-only {
  justify-content: flex-start;
}

.dropdown-filter__option-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 3px;
}

/* Option grouping (KWBI-234). The first option of each group carries a heading
   stacked above its row; the checkbox is realigned to the option line so the
   heading reads as a full-width section divider rather than a checkbox row. */
.dropdown-filter__option-grouped {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.dropdown-filter__option:has(.dropdown-filter__group-header) {
  align-items: flex-end;
}

.dropdown-filter__group-header {
  width: 100%;
  padding: 6px 0 2px;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Per-option copy-id control (KWBI-239). The row pushes the copy control to the
   trailing edge; the control sits inside the option <label> but stops click
   propagation so activating it copies the id without toggling the option. */
.dropdown-filter__option-row--with-copy {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.dropdown-filter__option-copy {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.12s ease,
    background 0.12s ease,
    color 0.12s ease;
}

/* Reveal the control on row hover/focus so it stays out of the way otherwise. */
.dropdown-filter__option:hover .dropdown-filter__option-copy,
.dropdown-filter__option-copy:focus-visible,
.dropdown-filter__option-copy--copied {
  opacity: 1;
}

.dropdown-filter__option-copy:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.dropdown-filter__option-copy:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent);
}

.dropdown-filter__option-copy--copied {
  color: var(--color-success);
}

.dropdown-filter__option-copy-icon {
  font-size: 0.875rem;
  line-height: 1;
}

/* Visually hidden but available to assistive tech (icon-only mode keeps the
   text label for screen readers). */
.dropdown-filter__option-label--sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Option with a secondary subheading line (KWBI-236): stack the primary label
   above a muted subheading within the row. */
.dropdown-filter__option-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dropdown-filter__option-content .dropdown-filter__option-label {
  top: 0; /* reset single-line optical nudge inside the stacked layout */
}

.dropdown-filter__option-subheading {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.6875rem;
  line-height: 1.2;
  color: var(--text-muted);
}

/* Empty state */
.dropdown-filter__empty-msg {
  padding: 16px 12px;
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}

.dropdown-filter__empty-msg--hidden {
  display: none;
}

.dropdown-filter__error-msg {
  margin: 8px 12px 4px;
  padding: 8px 10px;
  border: 1px solid var(--color-error-border);
  border-radius: var(--radius-sm);
  background: var(--color-error-bg);
  color: var(--color-error-text);
  font-size: 0.75rem;
  line-height: 1.25;
}

.dropdown-filter__error-msg--hidden {
  display: none;
}

/* Chip badge (separator + count) */
.filter-chip__badge {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 12px;
  font-weight: 500;
  margin-left: 0;
}

.filter-chip__badge--hidden {
  visibility: hidden;
}

/* Chip info tooltip (KWBI-240) */
.filter-chip__info {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.filter-chip__info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 4px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.625rem;
  line-height: 1;
}

.filter-chip__info-icon:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
}

.filter-chip__info-tooltip {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 80;
  min-width: 200px;
  max-width: 320px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-2px);
  transition:
    opacity 0.14s ease,
    transform 0.14s ease,
    visibility 0.14s ease;
}

.filter-chip__info:hover .filter-chip__info-tooltip,
.filter-chip__info:focus-within .filter-chip__info-tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.filter-chip__info-tooltip-content {
  font-size: 0.75rem;
  line-height: 1.35;
}

.filter-chip__info-tooltip-content :is(p, ul, ol) {
  margin: 0;
}

.filter-chip__info-tooltip-content :is(ul, ol) {
  padding-left: 1rem;
}

/* Chip clear (X) button */
.filter-chip__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 0.625rem;
  background: transparent;
  color: var(--text-secondary);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  margin-left: 2px;
  padding: 0;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.filter-chip__clear:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
}

.filter-chip__clear--hidden {
  display: none;
}

/* ── Light theme overrides ──────────────────────────────────── */

[data-theme="light"] .dropdown-filter__panel {
  background: var(--bg-secondary);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-lg);
}

[data-theme="light"] .dropdown-filter__search-input {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

[data-theme="light"] .dropdown-filter__option {
  color: var(--text-primary);
}

[data-theme="light"] .dropdown-filter__option:hover {
  background: var(--bg-secondary);
}

[data-theme="light"] .dropdown-filter__mode-btn {
  color: var(--text-secondary);
  border-color: var(--border-subtle);
}

[data-theme="light"]
  .dropdown-filter__mode-btn:hover:not(.dropdown-filter__mode-btn--active) {
  background: var(--bg-secondary);
}