/* =====================================================================
   Shortages Historical — "More filters" Offcanvas
   NEW: unique scope to avoid clashes everywhere else
   Root class: .shhist-morefilters
   Dropdown class: .shhist-morefilters__dd
   ===================================================================== */

/* ---------- Offcanvas shell ---------- */
.shhist-morefilters.offcanvas {
  /* Glassy deep blue like your app */
  background:
    radial-gradient(120% 160% at 0% 0%,
      rgba(64, 110, 205, .28) 0%,
      rgba(16, 38, 79, .78) 42%,
      rgba(7, 16, 36, .92) 100%);
  color: var(--text-strong);

  border-left: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--elev-3);

  /* Rounded leading edge */
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  overflow: visible; /* IMPORTANT: don't clip dropdown menus */
}

/* Header */
.shhist-morefilters .offcanvas-header {
  padding: 0.85rem 1rem 0.65rem;
  border-bottom: 1px solid var(--divider-glass);
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,0)
  );
}

.shhist-morefilters .offcanvas-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-strong);
}

.shhist-morefilters .btn-close {
  filter: invert(1);
  opacity: .75;
}
.shhist-morefilters .btn-close:hover { opacity: 1; }

/* Body */
.shhist-morefilters .offcanvas-body {
  padding: 0.95rem 1rem 1rem;
  overflow: visible; /* IMPORTANT: allow menus to overflow */
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ---------- Accordion (Bootstrap) ---------- */
.shhist-morefilters .accordion {
  background: transparent;
  border: 0;
}

.shhist-morefilters .accordion-item {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  margin-bottom: 0.75rem;
  overflow: visible; /* IMPORTANT: do not clip dropdown menus */
}

.shhist-morefilters .accordion-button {
  background: rgba(255,255,255,.06);
  color: var(--text-strong);
  font-weight: 700;
  font-size: 0.95rem;

  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-md);
  box-shadow: none;
}

.shhist-morefilters .accordion-button:not(.collapsed) {
  background: rgba(0,0,0,.22);
  color: #fff;
}

.shhist-morefilters .accordion-button:focus {
  box-shadow: var(--focus-ring);
}

.shhist-morefilters .accordion-body {
  padding: 0.8rem 0.85rem 0.9rem;
  overflow: visible;
}

/* Labels like "Area (0)" */
.shhist-morefilters .form-label {
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.35rem;
}

/* ---------- Footer actions ("Apply" / "Close") ---------- */
.shhist-morefilters .btn-apply {
  border-radius: 999px;
  font-weight: 700;
  padding: 0.38rem 1.15rem;
  box-shadow: 0 14px 34px rgba(47, 160, 255, .25);
}

.shhist-morefilters .btn-link {
  color: var(--text-muted);
}
.shhist-morefilters .btn-link:hover {
  color: var(--text-strong);
}

/* =====================================================================
   Dash dcc.Dropdown styling (react-select / virtualized)
   Scoped ONLY to .shhist-morefilters__dd inside .shhist-morefilters
   ===================================================================== */

/* The wrapper */
.shhist-morefilters .shhist-morefilters__dd {
  position: relative;
}

/* Control */
.shhist-morefilters .shhist-morefilters__dd .Select-control {
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;

  min-height: 38px;
  box-shadow: none;
}

.shhist-morefilters .shhist-morefilters__dd .Select-control:hover {
  border-color: rgba(255,255,255,.22);
}

/* Focus ring */
.shhist-morefilters .shhist-morefilters__dd.is-focused .Select-control,
.shhist-morefilters .shhist-morefilters__dd .Select-control:focus-within {
  border-color: rgba(47, 160, 255, .75);
  box-shadow: var(--focus-ring);
}

/* Placeholder + input text */
.shhist-morefilters .shhist-morefilters__dd .Select-placeholder {
  color: rgba(255,255,255,.60);
  font-size: 0.9rem;
}

.shhist-morefilters .shhist-morefilters__dd .Select-input > input {
  color: rgba(255,255,255,.95);
}

/* Selected value text */
.shhist-morefilters .shhist-morefilters__dd .Select-value-label {
  color: rgba(255,255,255,.95);
}

/* Dropdown arrow */
.shhist-morefilters .shhist-morefilters__dd .Select-arrow {
  border-top-color: rgba(255,255,255,.75) !important;
}
.shhist-morefilters .shhist-morefilters__dd.is-open .Select-arrow {
  border-top-color: rgba(255,255,255,.95) !important;
}

/* The menu container (this fixes your “huge white box” problem) */
.shhist-morefilters .shhist-morefilters__dd .Select-menu-outer {
  background: rgba(9, 18, 42, .98);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;

  margin-top: 6px;
  box-shadow: 0 22px 70px rgba(0,0,0,.65);

  max-height: 280px;
  z-index: 2000; /* safely above offcanvas */
}

/* Menu scrolling */
.shhist-morefilters .shhist-morefilters__dd .Select-menu {
  max-height: 260px;
}

/* Options (react-select v1) */
.shhist-morefilters .shhist-morefilters__dd .Select-option {
  background: transparent;
  color: rgba(255,255,255,.92);
  padding: 8px 12px;
  font-size: 0.9rem;
}

.shhist-morefilters .shhist-morefilters__dd .Select-option.is-focused {
  background: rgba(255,255,255,.08);
}

.shhist-morefilters .shhist-morefilters__dd .Select-option.is-selected {
  background: rgba(47, 160, 255, .22);
  color: rgba(255,255,255,.98);
}

/* Options (virtualized dropdowns in Dash) */
.shhist-morefilters .shhist-morefilters__dd .VirtualizedSelectOption {
  background: transparent !important;
  color: rgba(255,255,255,.92) !important;
  padding: 8px 12px !important;
  font-size: 0.9rem !important;
}

.shhist-morefilters .shhist-morefilters__dd .VirtualizedSelectFocusedOption {
  background: rgba(255,255,255,.08) !important;
}

.shhist-morefilters .shhist-morefilters__dd .VirtualizedSelectSelectedOption {
  background: rgba(47, 160, 255, .22) !important;
  color: rgba(255,255,255,.98) !important;
}

/* Multi-select chips */
.shhist-morefilters .shhist-morefilters__dd .Select--multi .Select-value {
  background: rgba(47, 160, 255, .16);
  border: 1px solid rgba(47, 160, 255, .28);
  border-radius: 999px;
}

.shhist-morefilters .shhist-morefilters__dd .Select--multi .Select-value-label {
  color: rgba(255,255,255,.95);
  font-weight: 600;
  padding: 2px 8px;
}

.shhist-morefilters .shhist-morefilters__dd .Select--multi .Select-value-icon {
  border-right: 0;
  color: rgba(255,255,255,.80);
  padding: 2px 8px 2px 10px;
}

.shhist-morefilters .shhist-morefilters__dd .Select--multi .Select-value-icon:hover {
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.95);
  border-radius: 999px;
}