/* Multi-select dropdown widget — used for region / market / store filters.
   Sits inside .filter-group like the old <select> elements did, so the
   filter-bar layout doesn't change. */

.ms-wrap {
  position: relative;
  display: inline-block;
  font-family: var(--font-stack);
}

.ms-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--table-border);
  border-radius: 4px;
  background: #fff;
  color: var(--navy);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  min-width: 120px;
  max-width: 220px;
  transition: border-color 0.15s, background 0.15s;
}
.ms-trigger:hover { border-color: #b9c2cc; background: var(--icy-blue, #f3f6f9); }
.ms-trigger.open  { border-color: var(--primary-blue); }
.ms-trigger.has-selection { border-color: var(--primary-blue); background: var(--icy-blue, #f3f6f9); }

.ms-trigger-text {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-caret {
  font-size: 10px;
  color: #9ca3af;
  flex-shrink: 0;
}
.ms-trigger.open .ms-caret { transform: rotate(180deg); }

/* Closed panels MUST stay invisible. Browser default for `[hidden]` is
   `display: none`, but the open-state rule below uses `display: flex` —
   without an explicit override here, the unset display would inherit
   from the closed-state and we'd see empty ghost rectangles below every
   trigger. The `!important` guarantees the closed state always wins. */
.ms-panel[hidden] { display: none !important; }

.ms-panel {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: 200;
  min-width: 220px;
  max-width: 320px;
  background: #fff;
  border: 1px solid var(--table-border);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  font-size: 12px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ms-panel-head {
  display: flex;
  gap: 10px;
  padding: 2px 4px 4px;
  border-bottom: 1px solid var(--table-border);
}
.ms-link {
  background: transparent;
  border: none;
  color: var(--primary-blue);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  padding: 2px 0;
}
.ms-link:hover { text-decoration: underline; }

.ms-search {
  border: 1px solid var(--table-border);
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
}
.ms-search:focus { border-color: var(--primary-blue); }

.ms-list {
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* `<label class="ms-item">` lives inside `.filter-group`, which sets
   `text-transform: uppercase` on labels (intended for chip captions like
   "REGION" / "STORE"). Override here so store names render in their
   natural case ("Albany", not "ALBANY"). Also keeps font-size sane in
   case the parent rule cascades it. */
.ms-item, .ms-item-lbl {
  text-transform: none;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  color: inherit;
}

.ms-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
}
.ms-item:hover { background: var(--icy-blue, #f3f6f9); }
.ms-item input[type="checkbox"] {
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--primary-blue);
}
.ms-item.is-checked .ms-item-lbl { color: var(--navy); font-weight: 600; }
.ms-item-lbl {
  color: #4b5563;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-empty {
  padding: 8px 4px;
  color: #9ca3af;
  font-style: italic;
  text-align: center;
}