/* ── 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__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__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.8125rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.1s ease;
}

.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 */
}

/* 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 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 {
  visibility: hidden;
}

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