/* ===========================================================
   Store MultiSelect (ms) — shared component (orders/finance/stores)
   Depends on common.css variables: --border, --muted, etc.
=========================================================== */
.ms{ position: relative; width: 100%; }
.ms-box{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 26px rgba(2,6,23,.04);
  cursor: pointer;
}
.ms-box:focus-within{ outline: 3px solid rgba(37,99,235,.18); border-color: rgba(37,99,235,.35); }
.ms-placeholder{ color: var(--muted, #6b7280); font-weight: 800; font-size: 13px; padding: 4px 2px; }
.ms-tag{
  display:inline-flex; align-items:center; gap:6px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(37,99,235,.22);
  background: rgba(37,99,235,.10);
  color: rgba(37,99,235,.95);
  font-weight: 900;
  font-size: 12px;
  max-width: 100%;
}
.ms-tag .txt{ max-width: 220px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-tag .x{
  width: 18px; height: 18px; display:flex; align-items:center; justify-content:center;
  border-radius: 999px;
  border: 1px solid rgba(37,99,235,.22);
  background: rgba(255,255,255,.75);
  font-weight: 900;
  cursor:pointer;
}
.ms-caret{
  margin-left: auto;
  width: 28px; height: 28px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 10px;
  color: var(--muted, #6b7280);
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.06);
}
.ms-panel{
  position:absolute; left:0; right:0; top: calc(100% + 8px);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 22px 50px rgba(2,6,23,.14);
  overflow:hidden;
  z-index: 50;
  display:none;
}
.ms.open .ms-panel{ display:block; }

.ms-list{
  max-height: 260px;
  overflow:auto;
  padding: 6px;
}
.ms-item{
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  cursor:pointer;
}
.ms-item:hover{ background: rgba(15,23,42,.05); }
.ms-item .name{
  font-weight: 900;
  font-size: 13px;
  color: rgba(15,23,42,.92);
  overflow:hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ms-item .check{
  width: 18px; height: 18px;
  border-radius: 6px;
  border: 1px solid rgba(37,99,235,.25);
  background: rgba(37,99,235,.10);
  display:flex; align-items:center; justify-content:center;
  font-weight: 900;
  color: rgba(37,99,235,.95);
  opacity: 0;
}
.ms-item[data-checked="true"]{ background: rgba(37,99,235,.08); }
.ms-item[data-checked="true"] .check{ opacity: 1; }
.ms-actions{
  border-top: 1px solid rgba(15,23,42,.08);
  padding: 8px 10px;
  display:flex;
  gap: 8px;
  justify-content: flex-end;
}
.ms-actions .btn{ border-radius: 999px; padding: 6px 10px; }